:root{font-family:Inter,Arial,sans-serif;color:#15342f;background:#f3f5f2;font-synthesis:none}
*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer;border:0;border-radius:8px;padding:14px 24px;background:#174e43;color:white;font-weight:600;transition:background .15s}button:hover{background:#236855}button:focus-visible,input:focus-visible{outline:3px solid #c6943d;outline-offset:4px}button:disabled{opacity:.5;cursor:wait}
main{max-width:1160px;margin:auto;padding:40px 44px;min-height:100vh}
.top{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:56px}
.wordmark{font-size:16px;letter-spacing:.18em;font-weight:700}.skip{padding:9px 13px;border:1px solid #cbd4cb;background:transparent;color:#56695d;font-size:12px;font-weight:500}.skip:hover{background:#e5ebe3}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#658274;margin:0 0 16px}
h1{font-size:clamp(30px,4vw,47px);letter-spacing:-.045em;line-height:1.12;margin:0 0 20px;font-weight:600}
.intro{font-size:17px;line-height:1.65;color:#64746b;max-width:630px;margin:0 0 32px}.survey{max-width:850px;margin:0 auto}.items{margin:35px 0}.item{border:0;border-top:1px solid #dce3da;padding:25px 0;margin:0}.item legend{float:left;width:100%;font-size:16px;margin-bottom:20px;line-height:1.5}.choices{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;clear:both}.choice{position:relative;text-align:center;font-size:12px;color:#596c60;cursor:pointer}.choice input{position:absolute;opacity:0}.choice span{display:flex;min-height:62px;padding:10px 6px;border:1px solid #d3ddd3;border-radius:8px;align-items:center;justify-content:center;background:#fafbf9}.choice input:checked+span{background:#174e43;border-color:#174e43;color:white}.choice input:focus-visible+span{outline:3px solid #c6943d;outline-offset:3px}.actions{display:flex;gap:18px;align-items:center;flex-wrap:wrap}.hint{font-size:12px;color:#7a877d}.instructions{max-width:760px;margin:70px auto}.rules{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #dce3da;border-bottom:1px solid #dce3da;margin:36px 0;padding:26px 0;gap:28px}.rules strong{display:block;font-size:25px;font-weight:500;margin-bottom:9px}.rules span{font-size:13px;color:#6a7e6d;line-height:1.5}.brief{font-size:16px;line-height:1.7;max-width:670px}.play .top{margin-bottom:32px}.play-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:24px}.play-head h1{font-size:32px;margin-bottom:0}.metrics{display:flex;gap:30px}.metric strong{display:block;font-variant-numeric:tabular-nums;font-size:27px;font-weight:500}.metric span{display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#748472;margin-bottom:8px}
.board{position:relative;border-radius:14px;overflow:hidden;background:#101d28;box-shadow:0 20px 50px #15342f10}.board canvas{display:block;width:100%;height:auto;aspect-ratio:2}.countdown{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;background:#101d28ad;color:#fff;pointer-events:none}.countdown small{letter-spacing:.2em;font-size:11px;text-transform:uppercase}.countdown strong{font-size:100px;line-height:1.25;font-weight:500}.countdown p{font-size:13px;color:#cfdbd7}.countdown.go{background:transparent}.countdown.go small,.countdown.go p{visibility:hidden}.countdown.go strong{font-size:50px;color:#f3d89e;text-shadow:0 2px 15px #000}
.board-note{display:flex;justify-content:space-between;gap:16px;font-size:12px;color:#718171;margin-top:18px}.steering,.steering *{cursor:none!important}.steering .skip{cursor:pointer!important}.results{max-width:700px;margin:90px auto}.totals{display:flex;gap:50px;margin:40px 0}.totals strong{font-size:42px;font-weight:500;display:block}.totals span{font-size:12px;color:#73816e}.error{padding:22px;background:#fff4df;border:1px solid #e5cca3;border-radius:10px;margin:20px 0;color:#684b20}.error p{line-height:1.5}.error button{margin-right:10px}.loading{padding:100px;text-align:center}
[hidden]{display:none!important}
.board{max-width:min(100%,calc((100dvh - 260px)*2));margin-inline:auto}
.play .board{max-width:min(100%,calc((100dvh - 300px)*2))}
.play-head h1{max-width:610px;font-size:30px}
.device-note{font-size:13px;line-height:1.5;color:#765b2f;padding:14px 18px;background:#f7edda;border-radius:8px}
.matching{text-align:center;max-width:700px;margin:100px auto}.matching .intro{margin-inline:auto}
.search-wheel{width:78px;height:78px;border:3px solid #d9e3d9;border-top-color:#1b6253;border-radius:50%;margin:0 auto 40px;animation:search-spin 1.15s linear infinite}
.search-wheel.found{animation:none;border-color:#2e7a60;position:relative}
.search-wheel.found:after{content:'✓';position:absolute;inset:10px;font-size:34px;color:#2e7a60}
@keyframes search-spin{to{transform:rotate(360deg)}}
.race-key{display:flex;gap:22px;font-size:13px;color:#617365}.race-key span{display:flex;align-items:center;gap:8px}
.race-key i{display:inline-block;width:10px;height:10px;border-radius:50%}.you-dot{background:#87d6ff;box-shadow:0 0 0 1px #5494b4}.opponent-dot{background:#ef956c}
.arena-board{isolation:isolate}.arena-flat{opacity:0}.arena-gl{position:absolute;inset:0;width:100%;height:100%!important;z-index:1}
.arena-flat{position:relative;z-index:2;pointer-events:none}.film-card{position:absolute;z-index:3;left:0;right:0;top:0;padding:25px 42px 48px;background:linear-gradient(#07121be6,#07121b88,transparent);color:#fff;text-align:center;pointer-events:none}
.film-card small{font-size:10px;letter-spacing:.22em;color:#e8cd97}.film-card h2{font-size:clamp(28px,3.8vw,47px);font-weight:500;line-height:1.12;letter-spacing:-.035em;margin:12px auto;max-width:650px;text-shadow:0 2px 16px #000}
.film-card p{font-size:14px;margin:0;line-height:1.5;color:#d8e1df}.arena-board .countdown{z-index:4}
.film-scores{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:25px;max-width:560px;margin:25px auto 5px}
.film-scores span{display:block;font-size:15px;color:#d8e1df;line-height:1.4}
.film-scores strong{display:block;font-size:clamp(32px,5vw,64px);font-weight:500;font-variant-numeric:tabular-nums;line-height:1.2;margin-top:9px;text-shadow:0 2px 16px #000}
.film-scores em{font-size:14px;font-style:normal;color:#e8cd97}
.film-pause{position:absolute;z-index:5;bottom:15px;left:20px;color:white;padding:8px 14px;background:#15232bd9;border-radius:6px;font-size:12px}
.sam{max-width:970px;margin:auto}.sam-scale{border:0;border-top:1px solid #dce3da;padding:20px 0 25px;margin:0}.sam-scale legend{font-size:14px;font-weight:600;padding:0 12px 0 0}
.sam-options{display:grid;grid-template-columns:repeat(9,1fr);gap:8px}.sam-choice{position:relative;cursor:pointer}
.sam-choice input{position:absolute;opacity:0}.sam-choice span{display:flex;flex-direction:column;align-items:center;padding:9px 4px 6px;border:1px solid #d6dfd3;border-radius:8px;background:white}
.sam-choice img{width:100%;height:78px;object-fit:contain;filter:grayscale(1)}
.sam-choice b{font-size:12px;font-weight:500;margin-top:6px}.sam-choice input:checked+span{border:2px solid #1a5b4c;background:#e8f1e9;padding:8px 3px 5px}
.sam-choice input:focus-visible+span{outline:3px solid #c6943d;outline-offset:2px}.sam-ends{display:flex;justify-content:space-between;color:#768572;font-size:11px;margin-top:8px}
@media(prefers-reduced-motion:reduce){.search-wheel{animation-duration:3s}}
@media(max-width:720px){main{padding:24px 18px}.top{margin-bottom:35px}.choices{gap:5px}.choice{font-size:10px}.choice span{padding:8px 2px;min-height:68px}.rules{gap:16px}.rules strong{font-size:22px}.instructions,.results{margin:40px auto}.play-head{align-items:start;flex-direction:column}.metrics{width:100%;justify-content:space-between}.board-note{font-size:10px}.totals{gap:25px}.totals strong{font-size:30px}}
