*{box-sizing:border-box}html{font-size:16px}body{margin:0;background:#091820;color:#eff7f5;font-family:system-ui,sans-serif;line-height:1.7}main{max-width:1150px;margin:auto;padding:20px;display:grid;grid-template-columns:minmax(0,620px) minmax(0,1fr);gap:24px}header{grid-column:1/-1}header p{margin:.2rem 0;color:#bdd8d5}header p:first-child{color:#f6d88b}h1{font-size:1.8rem;margin:.2rem 0}h2{font-size:1.25rem;line-height:1.4}p{margin:.5rem 0 1rem}
.cabinet{position:relative;aspect-ratio:2/3;background:url('/images/hockey-table-v1.webp?v=20261009-hockey4') center/100% 100% no-repeat;isolation:isolate}canvas{position:absolute;left:18%;top:15%;width:64%;height:68.27%;touch-action:none;outline:none}canvas:focus-visible{outline:3px solid #ffe48f;outline-offset:3px}.meters{position:absolute;top:3.3%;left:14%;width:72%;display:flex;justify-content:space-between;text-align:center;line-height:1.2}.meters>div{width:27%;color:#ffe6a7}.meters span{display:block;font-size:max(14px,.8rem)}.meters strong{display:block;font-size:clamp(20px,3vw,34px);font-variant-numeric:tabular-nums;margin-top:3px}
.controls{position:absolute;left:25%;bottom:2.5%;width:50%;display:flex;justify-content:space-between;gap:6px}.controls button{background:none;border:none;padding:0;color:#fff4d5;width:30%;display:flex;align-items:center;flex-direction:column;cursor:pointer;min-height:64px;font:700 1rem system-ui}.physical{display:block;width:clamp(44px,6vw,64px);height:clamp(44px,6vw,64px);background:url('/images/hockey-objects-v1.webp?v=20261009-hockey4') 0 50%/300% auto no-repeat;filter:drop-shadow(0 3px 3px #0008)}#pause .physical{background-position:50% 50%}#sound .physical{background-position:100% 50%}.controls button:active .physical{transform:translateY(3px)}.controls button:disabled{opacity:.55}.label{font-size:max(14px,.9rem);white-space:nowrap;margin-top:2px}button:focus-visible,input:focus-visible{outline:3px solid #fff0ad;outline-offset:3px}
.overlay{position:absolute;left:20%;top:22%;width:60%;max-height:60%;overflow:auto;padding:16px;text-align:center;background:#061c23ed;border:1px solid #c9a661;border-radius:12px;box-shadow:0 12px 30px #0006}.overlay[hidden]{display:none}.portrait{width:105px;aspect-ratio:256/341;background:url('/images/hockey-robots-v1.webp?v=20261009-hockey4') 0 0/600% 300% no-repeat;margin:0 auto;animation:bob 3s ease-in-out infinite}.overlay p{font-size:1rem;line-height:1.55}.overlay h2{color:#ffe4a1;font-size:1.45rem}.overlay #eyebrow{letter-spacing:.12em;color:#9ddce3;font-weight:800;font-size:max(14px,.85rem)}#screen-start{min-height:48px;width:100%;padding:10px;font:800 1rem system-ui;background:#ffe09b;color:#122b30;border:1px solid #b99250;border-radius:6px;cursor:pointer}.goal-flash{position:absolute;top:44%;left:18%;width:64%;text-align:center;color:#ffe9a7;font-size:clamp(28px,5vw,50px);font-weight:900;text-shadow:0 0 20px #f8bd51;pointer-events:none;opacity:0}.cabinet[data-goal="true"] .goal-flash{animation:goal 1.25s ease-out}.cabinet[data-ready="true"] #start .physical{animation:pulse 1.6s ease-in-out infinite}
aside{padding:12px 0}#readout{font-weight:800;color:#f5db9c}#phase{min-height:3.4em;color:#bde7e6}.motion{display:flex;align-items:center;gap:10px;min-height:48px;font-size:1rem}.motion input{width:24px;height:24px}.development{color:#b2c6c9;border-top:1px solid #45636a;padding-top:16px;font-size:1rem}#asset-status{color:#ffce91}.reduced .portrait,.reduced .physical,.reduced .goal-flash{animation:none!important}.reduced .cabinet[data-goal="true"] .goal-flash{opacity:1}@keyframes bob{50%{transform:translateY(-5px)}}@keyframes pulse{50%{filter:drop-shadow(0 0 9px #ffd376)}}@keyframes goal{0%{opacity:0;transform:scale(.8)}20%,75%{opacity:1;transform:scale(1)}100%{opacity:0}}
@media(max-width:680px){main{display:block;padding:12px}header{margin-bottom:14px}.overlay{padding:10px;left:16%;width:68%;top:20%;max-height:60%}.portrait{width:70px}.overlay h2{font-size:1.15rem;margin:.4rem 0}.overlay p{margin:.4rem 0}.controls{left:22%;width:56%;bottom:1.8%}.meters{left:13%;width:74%}.meters span{font-size:14px}aside{padding-top:22px}}@media(prefers-reduced-motion:reduce){.portrait,.physical,.goal-flash{animation:none!important}.cabinet[data-goal="true"] .goal-flash{opacity:1}}
html[data-text-zoom="2"]{font-size:32px}html[data-text-zoom="2"] .overlay{position:relative;left:0;top:0;width:100%;max-height:none;transform:translateY(15%);z-index:3}html[data-text-zoom="2"] .controls .label{background:#092128;padding:3px;white-space:normal}html[data-text-zoom="2"] .meters{top:0;background:#092128}.device-heading{padding:16px;max-width:700px;margin:auto}.device-frame{display:block;width:390px;max-width:100%;height:1100px;margin:auto;border:1px solid #94b2bf}html[data-device="320"] .device-frame{width:320px}
body{background:linear-gradient(#07141bea,#07141bea),url("/images/arcade-background.webp") center/cover fixed}.portrait{clip-path:inset(0 5%)}
@media(max-width:680px){.meters>div{width:34%;padding:3px 0;background:#061318;border:1px solid #bda16d;border-radius:5px}.meters span{white-space:nowrap}.meters strong{font-size:20px}}html[data-text-zoom="2"] .cabinet{display:flex;flex-direction:column;aspect-ratio:auto;background-size:100% 100%}html[data-text-zoom="2"] .meters{position:static;order:0;width:100%;padding:10px}html[data-text-zoom="2"] .meters>div{width:45%}html[data-text-zoom="2"] .meters span{font-size:.875rem}html[data-text-zoom="2"] .meters strong{font-size:1.2rem}html[data-text-zoom="2"] canvas{position:static;order:1;width:100%;height:auto;aspect-ratio:5/8}html[data-text-zoom="2"] .overlay{position:static;order:2;transform:none;width:100%;max-height:none}html[data-text-zoom="2"] .controls{position:static;order:3;width:100%;padding:12px 5px;background:#082129}html[data-text-zoom="2"] .controls button{width:32%;min-width:44px}
.opponent-card{display:flex;align-items:center;gap:16px;padding:12px;border:1px solid #54777a;border-radius:10px;background:#061c24ed}.opponent-card .portrait{flex:0 0 75px;margin:0;animation:none}.opponent-card h2{color:#f5dc9c;margin:.2rem 0}.opponent-card p{margin:.3rem 0}
#campaign-results{list-style:none;padding:0;margin:16px 0;text-align:left;font-size:1rem;font-variant-numeric:tabular-nums}#campaign-results li{padding:8px;border-bottom:1px solid #54777a}.overlay.complete{border:2px solid #ffe4a1;box-shadow:0 0 26px #f8bd5150,0 12px 30px #0006}.overlay.complete .portrait{width:85px}.overlay.complete h2{color:#fff0b9}.overlay.complete #message{color:#bde7e6}

.ranking-panel{margin:20px 0;padding:16px;border:1px solid #54777a;border-radius:10px;background:#061c24ed}.ranking-panel label{display:block;margin:12px 0}.ranking-panel input,.ranking-panel select,.ranking-panel button{font:inherit;max-width:100%;min-height:44px;padding:8px;border:1px solid #b99250;border-radius:5px}.ranking-panel input{display:block;width:100%}.ranking-panel button{color:#122b30;background:#ffe09b;cursor:pointer}.ranking-panel button:disabled{opacity:.6}.ranking-panel summary{cursor:pointer;min-height:44px}.ranking-panel table{width:100%;border-collapse:collapse}.ranking-panel th,.ranking-panel td{padding:8px;text-align:left;overflow-wrap:anywhere;border-bottom:1px solid #45636a}.board-scroll{max-width:100%;overflow:auto}.ranking-panel [hidden]{display:none}

#campaign-results{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}#campaign-results[hidden]{display:none}#campaign-results li{padding:6px;border:1px solid #54777a;border-radius:5px;background:#0a2c34;overflow-wrap:anywhere}.overlay.complete .portrait{width:60px}.overlay.complete h2{margin:.5rem 0}@media(max-width:680px){.overlay.complete{top:10%;max-height:78%;left:16%;width:68%}.overlay.complete .portrait{width:42px}.overlay.complete #campaign-results{gap:4px;margin:8px 0}.overlay.complete #campaign-results li{padding:4px}}html[data-text-zoom="2"] .overlay.complete{position:static;width:100%;max-height:none}html[data-text-zoom="2"] #campaign-results{grid-template-columns:1fr}

.overlay.complete #eyebrow{display:none}

.hockey-nav{display:flex;flex-wrap:wrap;gap:12px;align-items:center}.hockey-nav a,.hockey-nav button{font:700 1rem system-ui;min-height:44px;padding:10px 14px;color:#eff7f5;background:#102a33;border:1px solid #66888a;border-radius:5px;text-decoration:none;cursor:pointer}main>header{min-width:0}.ranking-panel [hidden], [hidden]{display:none!important}

.hockey-guide{grid-column:1/-1;padding:24px;background:#071c25ef;border-top:2px solid #b4975a;font-size:1rem;line-height:1.8;min-width:0}.hockey-guide h3{margin:32px 0 12px;font-size:1.25rem;color:#ffe4a1}.hockey-opponents{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.hockey-opponents article{display:flex;gap:16px;align-items:center;min-width:0;padding:12px;border:1px solid #54777a}.hockey-opponents h4{font-size:1.125rem;margin:0}.hockey-opponents p{margin:.5rem 0}.hockey-robot{flex:0 0 70px;aspect-ratio:256/341;background:url(/images/hockey-robots-v1.webp?v=20261009-hockey4) 0 0/600% 300% no-repeat}.robot-1{background-position:20% 0}.robot-2{background-position:40% 0}.robot-3{background-position:60% 0}.robot-4{background-position:80% 0}.robot-5{background-position:100% 0}.hockey-guide nav{display:flex;flex-wrap:wrap;gap:12px}.hockey-guide a{display:inline-flex;align-items:center;min-height:44px;padding:8px;color:#bde7e6}.hockey-exit{display:inline-flex;gap:6px;align-items:center}.hockey-best{padding:12px;border-block:1px solid #54777a;color:#ffe4a1;font-weight:800}@media(max-width:680px){.hockey-opponents{grid-template-columns:1fr}.hockey-guide{padding:16px}.hockey-opponents article{align-items:start}}html[data-text-zoom="2"] .hockey-opponents{grid-template-columns:1fr}

#hockey-title-logo{display:block;width:220px;max-width:100%;height:auto;margin:0 auto 8px}.overlay[data-phase="ready"] #eyebrow{display:none}.overlay[data-phase="ready"] .portrait{width:60px}.overlay[data-phase="ready"] h2{margin:.5rem 0}@media(max-width:680px){#hockey-title-logo{width:160px}.overlay[data-phase="ready"] .portrait{width:42px}}

@media(max-width:680px){.overlay[data-phase="ready"] #message{display:none}}

.hockey-countdown,.hockey-go{width:180px;aspect-ratio:3/2;background:url(/images/hockey-countdown-v1.webp?v=20261009-hockey4) 0 0/200% 200% no-repeat}.hockey-countdown{display:none;margin:auto;animation:hockey-count-in 1s ease-out infinite}.overlay[data-phase="countdown"] .hockey-countdown{display:block}.overlay[data-countdown="2"] .hockey-countdown{background-position:100% 0}.overlay[data-countdown="1"] .hockey-countdown{background-position:0 100%}.overlay[data-phase="countdown"] #headline{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.hockey-go{position:absolute;display:none;left:50%;top:35%;transform:translateX(-50%);background-position:100% 100%;pointer-events:none;z-index:4}.cabinet[data-go="true"] .hockey-go{display:block;animation:hockey-count-in .7s ease-out}@keyframes hockey-count-in{0%{filter:brightness(1.6)}100%{filter:brightness(1)}}@media(max-width:680px){.hockey-countdown,.hockey-go{width:144px}}.reduced .hockey-countdown,.reduced .hockey-go{animation:none}@media(prefers-reduced-motion:reduce){.hockey-countdown,.hockey-go{animation:none}}
@media(max-width:360px){.overlay[data-phase="ready"]{top:18%;max-height:64%}.overlay[data-phase="ready"] .portrait{width:30px}.overlay[data-phase="ready"] #hockey-title-logo{width:120px;margin-bottom:2px}.overlay[data-phase="ready"] h2{margin:.3rem 0}}
@media(max-width:680px){.overlay[data-phase="countdown"] .portrait{width:42px}.overlay[data-phase="countdown"] #message{display:none}.overlay[data-phase="countdown"] #eyebrow{margin:.3rem 0}}