@font-face{font-family:Kenney Future;src:url(/assets/fonts/KenneyFuture.ttf) format("truetype");font-display:swap}@font-face{font-family:Kenney Future Narrow;src:url(/assets/fonts/KenneyFutureNarrow.ttf) format("truetype");font-display:swap}:root{--bg: #0b1320;--panel: rgba(13, 21, 36, .92);--panel-light: rgba(28, 40, 62, .92);--line: #2c3c58;--text: #e8edf6;--dim: #93a3bc;--gold: #f2c14e;--green: #4caf6e;--red: #e25656;--blue: #5a8ff2}*{box-sizing:border-box}body{font-family:Segoe UI,Helvetica Neue,Arial,sans-serif;color:var(--text)}button{font:inherit;color:inherit;cursor:pointer;background:var(--panel-light);border:1px solid var(--line);border-radius:8px;padding:8px 14px;transition:transform .08s ease,border-color .12s ease,background .12s ease}button:hover:not(:disabled){border-color:var(--gold);transform:translateY(-1px)}button:disabled{opacity:.45;cursor:default}button.primary{background:linear-gradient(160deg,#2a4a8f,#1c2f5c);border-color:#4a6dbb}button.danger{border-color:#7a3a3a}.screen{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden}.canvas-host{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10;pointer-events:none;display:flex;flex-direction:column}.overlay>*{pointer-events:auto}.hud-panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 14px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-image:url(/assets/ui/panel_blue.png) 10 / 10px stretch}@keyframes hud-panel-enter{0%{opacity:0;translate:0 6px}to{opacity:1;translate:0 0}}.call-panel,.result-panel,.narration,.playback-controls,.tutorial-coach,.gameover .box{animation:hud-panel-enter .14s ease-out both}.orientation-splash{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;display:none;align-items:center;justify-content:center;flex-direction:column;gap:22px;padding:calc(env(safe-area-inset-top) + 28px) calc(env(safe-area-inset-right) + 24px) calc(env(safe-area-inset-bottom) + 28px) calc(env(safe-area-inset-left) + 24px);text-align:center;background:linear-gradient(180deg,#070d17fa,#0d1b2bfa),repeating-linear-gradient(90deg,rgba(76,175,110,.16) 0 1px,transparent 1px 54px);color:var(--text)}.orientation-phone{position:relative;width:118px;height:118px}.orientation-phone-body{position:absolute;left:38px;top:14px;width:44px;height:76px;border:3px solid var(--gold);border-radius:10px;box-shadow:0 0 32px #f2c14e3d;transform:rotate(-18deg)}.orientation-phone-body:after{content:"";position:absolute;left:50%;bottom:5px;width:8px;height:8px;border-radius:50%;background:var(--gold);transform:translate(-50%)}.orientation-rotate{position:absolute;left:19px;top:26px;width:80px;height:80px;border:3px solid rgba(90,143,242,.65);border-left-color:transparent;border-bottom-color:transparent;border-radius:50%}.orientation-rotate:after{content:"";position:absolute;right:6px;top:7px;border-left:12px solid rgba(90,143,242,.9);border-top:7px solid transparent;border-bottom:7px solid transparent;transform:rotate(31deg)}.orientation-copy{max-width:320px}.orientation-copy h1{margin:0 0 8px;font-family:Kenney Future,Arial Black,sans-serif;font-size:28px;line-height:1.08;text-transform:uppercase}.orientation-copy p{margin:0;color:var(--dim);font-size:14px;line-height:1.45}@media (pointer: coarse) and (orientation: portrait){.orientation-splash{display:flex}}.title-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:26px;background:radial-gradient(ellipse at 50% 120%,#15301d 0%,transparent 60%),linear-gradient(180deg,#0a1322,#0c1a2e)}.title-logo{font-family:Kenney Future,Arial Black,sans-serif;font-size:64px;font-weight:900;letter-spacing:3px;text-transform:uppercase;background:linear-gradient(180deg,#fff 30%,var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 8px 40px rgba(242,193,78,.25)}.title-sub{color:var(--dim);margin-top:-18px;letter-spacing:1px}.setup-grid{display:flex;gap:20px}.setup-col{width:270px;display:flex;flex-direction:column;gap:8px}.setup-col h3{margin:0 0 4px;font-size:13px;text-transform:uppercase;color:var(--dim);letter-spacing:1px}.pick{text-align:left;display:flex;flex-direction:column;gap:2px}.pick.selected{border-color:var(--gold);background:#f2c14e1a}.pick .name{font-weight:600}.pick .meta{font-size:12px;color:var(--dim)}.hud-top{display:flex;justify-content:center;padding:12px;gap:12px;align-items:flex-start}.scoreboard{display:flex;align-items:center;gap:16px;font-variant-numeric:tabular-nums}.scoreboard .team{display:flex;align-items:center;gap:8px;font-weight:700}.scoreboard .chip{width:14px;height:14px;border-radius:4px}.scoreboard .score{font-family:Kenney Future,Arial Black,sans-serif;font-size:26px;font-weight:900}.scoreboard .mid{text-align:center;color:var(--dim);font-size:12px;line-height:1.5}.scoreboard .mid .clock{font-family:Kenney Future Narrow,Kenney Future,sans-serif;font-size:20px;color:var(--text);font-weight:700}.poss{color:var(--gold)}.timeout-pips{letter-spacing:2px;font-size:10px;color:var(--gold)}.hud-bottom{margin-top:auto;display:flex;flex-direction:column;gap:8px;padding:12px}.hand-tray{display:flex;gap:10px;justify-content:center;align-items:flex-end;flex-wrap:wrap}.card-face{width:168px;background:linear-gradient(165deg,#1d2c47,#131e33);border:1px solid var(--line);border-radius:10px;padding:10px;text-align:left;display:flex;flex-direction:column;gap:6px;min-height:120px;border-image:url(/assets/ui/panel_blue.png) 10 / 8px stretch}.card-face:hover:not(:disabled){border-image:none;border-color:var(--gold)}.card-face.illegal{opacity:.38}.card-face.defense{background:linear-gradient(165deg,#3a2030,#1d1322)}.card-face .card-name{font-weight:700;font-size:14px}.card-face .card-tags{display:flex;flex-wrap:wrap;gap:4px}.tag{font-size:10px;text-transform:uppercase;letter-spacing:.5px;background:#5a8ff22e;border:1px solid rgba(90,143,242,.4);color:#aac4f7;padding:1px 6px;border-radius:99px}.tag.run{background:#4caf6e26;border-color:#4caf6e73;color:#9fd9b4}.stats-row{display:grid;grid-template-columns:repeat(5,1fr);gap:2px;font-size:10px;color:var(--dim);text-align:center}.stats-row b{display:block;font-size:12px;color:var(--text)}.stats-row .good b{color:var(--green)}.stats-row .bad b{color:var(--red)}.call-panel{align-self:center;display:flex;flex-direction:column;gap:10px;align-items:center;max-width:860px}.call-panel .prompt{font-family:Kenney Future Narrow,Kenney Future,sans-serif;font-weight:700;letter-spacing:.5px}.choice-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.choice-row .pick{width:180px}.side-left{position:fixed;left:12px;top:86px;width:230px;display:flex;flex-direction:column;gap:10px;z-index:11}.side-right{position:fixed;right:12px;top:86px;width:250px;display:flex;flex-direction:column;gap:10px;z-index:11}.drive-chart{font-size:12px;max-height:200px;overflow-y:auto}.drive-chart .row{display:flex;justify-content:space-between;gap:6px;padding:2px 0;color:var(--dim)}.drive-chart .row b{color:var(--text)}.narration{font-size:13px;display:flex;flex-direction:column;gap:4px}.narration .latest{color:var(--gold);font-weight:600}.result-panel{font-size:13px}.result-panel h4{margin:0 0 6px}.m-row{display:flex;justify-content:space-between;padding:1px 0;color:var(--dim)}.m-row b.pos{color:var(--green)}.m-row b.neg{color:var(--red)}.m-total{border-top:1px solid var(--line);margin-top:4px;padding-top:4px;font-weight:700}.roll-line{margin-top:6px;color:var(--gold);font-weight:700}.playback-controls{align-self:center;display:inline-flex;flex-wrap:wrap;gap:6px;justify-content:center;width:fit-content;max-width:calc(100vw - 24px)}.playback-controls button{padding:6px 10px;font-size:12px}.tutorial-coach{position:fixed;z-index:24;width:min(340px,calc(100vw - 24px));display:flex;flex-direction:column;gap:7px;pointer-events:auto}.tutorial-coach h3{margin:0;font-family:Kenney Future Narrow,Kenney Future,sans-serif;font-size:19px;line-height:1.05}.tutorial-coach p{margin:0;color:var(--dim);font-size:13px;line-height:1.35}.tutorial-kicker{color:var(--gold);font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase}.tutorial-hint{color:var(--gold);font-size:12px;font-weight:700}.tutorial-actions{display:flex;flex-wrap:wrap;gap:6px}.tutorial-actions button{padding:6px 10px;font-size:12px}.tutorial-coach.anchor-scoreboard{top:86px;left:50%;transform:translate(-50%)}.tutorial-coach.anchor-formation,.tutorial-coach.anchor-hand,.tutorial-coach.anchor-defense,.tutorial-coach.anchor-special,.tutorial-coach.anchor-pat{left:50%;bottom:220px;transform:translate(-50%)}.tutorial-coach.anchor-focus{left:12px;top:300px}.tutorial-coach.anchor-playback,.tutorial-coach.anchor-scouting{right:276px;top:104px}.tutorial-coach.anchor-wrap{top:50%;left:50%;transform:translate(-50%,-50%)}.gameover{position:fixed;top:0;right:0;bottom:0;left:0;z-index:30;display:flex;align-items:center;justify-content:center;background:#050910c7}.gameover .box{text-align:center;padding:36px 60px}.gameover h1{font-family:Kenney Future,Arial Black,sans-serif;font-size:42px;margin:0 0 6px}.box-score{display:flex;gap:30px;justify-content:center;margin:16px 0;font-size:14px;color:var(--dim)}.deck-builder{height:100%;display:flex;background:linear-gradient(180deg,#0a1322,#0d1a2c);overflow:hidden}.db-left{flex:1;padding:14px;overflow-y:auto}.db-right{width:380px;border-left:1px solid var(--line);padding:14px;overflow-y:auto;background:#090e18b3;display:flex;flex-direction:column;gap:10px}.db-toolbar{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap;align-items:center}.db-toolbar button.active{border-color:var(--gold);color:var(--gold)}.collection-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}.player-card{text-align:left;display:flex;flex-direction:column;gap:4px;padding:10px}.player-card .pos-cost{display:flex;justify-content:space-between;font-size:11px;color:var(--dim)}.player-card .pname{font-weight:700}.player-card .ratings{font-size:11px;color:var(--dim)}.cap-meter{font-weight:700}.cap-meter.over{color:var(--red)}.slot-row{display:flex;justify-content:space-between;align-items:center;padding:3px 6px;border-radius:6px;font-size:13px}.slot-row:hover{background:#ffffff0d}.slot-row .empty{color:var(--red)}.slot-row.selected{outline:1px solid var(--gold)}.problems{color:var(--red);font-size:12px;display:flex;flex-direction:column;gap:2px}.count-pill{font-size:11px;color:var(--dim)}.scrolly{max-height:30vh;overflow-y:auto}.focus-row{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}.focus-row button.selected{border-color:var(--gold);color:var(--gold)}.toggle-row{display:flex;gap:10px;font-size:12px;color:var(--dim);align-items:center}@media (pointer: coarse) and (orientation: landscape) and (max-height: 520px){button{border-radius:7px;padding:6px 9px;font-size:12px}.title-screen{justify-content:flex-start;gap:7px;height:100dvh;padding:calc(env(safe-area-inset-top) + 6px) calc(env(safe-area-inset-right) + 8px) calc(env(safe-area-inset-bottom) + 6px) calc(env(safe-area-inset-left) + 8px);overflow:hidden}.title-screen>div:first-child{flex:0 0 auto;text-align:center}.title-logo{font-size:34px;letter-spacing:1px}.title-sub{margin-top:-5px;font-size:11px;line-height:1.2;text-align:center}.title-screen>.title-sub:last-child{display:none}.setup-grid{width:100%;min-height:0;gap:8px;justify-content:flex-start;align-items:flex-start;overflow-x:auto;overflow-y:hidden;padding-bottom:3px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}.setup-col{flex:0 0 calc((100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 40px) / 3);width:calc((100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 40px) / 3);min-width:0;max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 68px);gap:5px;overflow-y:auto;padding-right:2px;scroll-snap-align:start;-webkit-overflow-scrolling:touch}.setup-col h3{margin-bottom:0;font-size:10px;letter-spacing:.5px}.setup-col .pick{gap:1px;padding:5px 7px}.pick .name{font-size:12px;line-height:1.15}.pick .meta{font-size:10px;line-height:1.15}.setup-col>button.primary{order:-3}.setup-col>button.primary+button{order:-2}.setup-col label.meta{order:-1;font-size:11px}.hud-panel{border-radius:9px;padding:7px 9px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.hud-top{align-items:center;flex-wrap:nowrap;gap:6px;padding:calc(env(safe-area-inset-top) + 6px) calc(env(safe-area-inset-right) + 8px) 4px calc(env(safe-area-inset-left) + 8px)}.hud-top>button{flex:0 0 auto;padding:6px 8px;line-height:1}.scoreboard{flex:0 1 auto;min-width:0;gap:7px;padding:6px 8px;white-space:nowrap}.scoreboard .team{gap:4px;font-size:12px}.scoreboard .chip{width:10px;height:10px;border-radius:3px}.scoreboard .score{font-size:19px}.scoreboard .mid{font-size:10px;line-height:1.16}.scoreboard .mid .clock{font-size:15px}.timeout-pips{font-size:8px;letter-spacing:0}.side-left{left:calc(env(safe-area-inset-left) + 8px);top:calc(env(safe-area-inset-top) + 58px);width:min(34vw,178px);gap:6px}.side-left .drive-chart{display:none}.narration{max-height:76px;overflow:hidden;font-size:11px;gap:3px}.side-right{right:calc(env(safe-area-inset-right) + 8px);top:calc(env(safe-area-inset-top) + 58px);width:min(34vw,210px);max-height:calc(100dvh - 178px);gap:6px;overflow-y:auto}.result-panel{font-size:11px}.result-panel h4{margin-bottom:4px;font-size:12px}.m-row{gap:8px;padding:0}.m-row b{white-space:nowrap}.roll-line{margin-top:4px}.hud-bottom{gap:5px;max-height:58dvh;padding:4px calc(env(safe-area-inset-right) + 8px) calc(env(safe-area-inset-bottom) + 7px) calc(env(safe-area-inset-left) + 8px);overflow:visible}.call-panel{gap:6px;max-width:min(620px,calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 18px));max-height:24dvh;overflow-y:auto}.call-panel .prompt{font-size:13px;line-height:1.15;text-align:center}.choice-row{flex-wrap:nowrap;justify-content:flex-start;max-width:100%;gap:6px;overflow-x:auto;padding-bottom:1px}.choice-row .pick{flex:0 0 132px;width:132px}.focus-row{flex-wrap:nowrap;justify-content:flex-start;max-width:100%;gap:5px;overflow-x:auto;padding-bottom:1px}.focus-row button{flex:0 0 auto;padding:4px 7px}.toggle-row{flex-wrap:nowrap;max-width:100%;gap:8px;overflow-x:auto;font-size:11px;white-space:nowrap}.hand-tray{justify-content:flex-start;align-items:stretch;flex-wrap:nowrap;gap:7px;max-width:100%;overflow-x:auto;overflow-y:hidden;padding:0 0 3px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}.hand-tray .card-face{flex:0 0 136px;width:136px;min-height:94px;padding:7px;gap:4px;scroll-snap-align:start}.card-face .card-name{font-size:12px;line-height:1.12}.card-face .card-tags{gap:3px}.tag{font-size:9px;padding:1px 5px}.stats-row{gap:1px;font-size:9px}.stats-row b,.count-pill{font-size:10px}.playback-controls{align-self:center;gap:5px;width:fit-content;max-width:calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 16px)}.playback-controls button{padding:5px 8px}.tutorial-coach{width:min(300px,calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 16px));gap:4px;padding:7px 9px}.tutorial-coach h3{font-size:14px}.tutorial-coach p,.tutorial-hint{font-size:11px;line-height:1.24}.tutorial-kicker{font-size:9px}.tutorial-actions{gap:5px}.tutorial-actions button{padding:5px 7px;font-size:11px}.tutorial-coach.anchor-scoreboard{top:calc(env(safe-area-inset-top) + 56px)}.tutorial-coach.anchor-formation,.tutorial-coach.anchor-hand,.tutorial-coach.anchor-defense,.tutorial-coach.anchor-special,.tutorial-coach.anchor-pat{bottom:calc(env(safe-area-inset-bottom) + 142px)}.tutorial-coach.anchor-focus{left:calc(env(safe-area-inset-left) + 8px);top:calc(env(safe-area-inset-top) + 132px);width:min(31vw,180px)}.tutorial-coach.anchor-playback,.tutorial-coach.anchor-scouting{right:calc(env(safe-area-inset-right) + 8px);top:calc(env(safe-area-inset-top) + 58px);width:min(31vw,180px)}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}.call-panel,.result-panel,.narration,.playback-controls,.tutorial-coach,.gameover .box{animation:none!important;opacity:1;translate:0 0}button:hover:not(:disabled){transform:none}}