:root{font-family:system-ui,sans-serif;color:#e5f6f4;background:#081b21;font-synthesis:none;color-scheme:dark}*{box-sizing:border-box}body{margin:0;overscroll-behavior:none}button,input,select{font:inherit}button{min-height:48px;border:1px solid #35616a;border-radius:12px;background:#17343e;color:#e5f6f4;cursor:pointer;padding:8px 12px}button:disabled{opacity:.45;cursor:default}button:focus-visible{outline:2px solid #6ef0fa;outline-offset:2px}button:active,button.pressed{background:#317078}button.pressed{box-shadow:inset 0 0 0 2px #6ef0fa;color:#fff}[data-surface],.field{touch-action:none;user-select:none;-webkit-user-select:none}#app{height:var(--viewport-height, 100dvh);overflow:hidden}.shell{--top-inset: max(8px, env(safe-area-inset-top));--bottom-inset: max(8px, env(safe-area-inset-bottom));position:relative;width:100%;height:var(--viewport-height, 100dvh);overflow:hidden;background:#102e32}.hud{position:absolute;top:var(--top-inset);left:14px;right:14px;height:44px;display:flex;align-items:center;justify-content:space-between;gap:8px;pointer-events:none;white-space:nowrap;z-index:2}.brand{font-size:11px;font-weight:900;letter-spacing:2px;line-height:1.1}.brand span{display:block;color:#beef8a}.hud .brand{border:0;background:transparent;padding:0;text-align:left;min-width:40px}.scoreboard{display:grid;grid-template-columns:auto auto;align-items:center;column-gap:12px}.hud-actions{display:flex;gap:6px}.hud button{pointer-events:auto;min-height:40px;padding:6px 9px;font-size:12px}#score{font-size:24px;font-weight:850;letter-spacing:3px}#clock{font-size:12px;font-variant-numeric:tabular-nums;color:#a4bcb8}.field{position:absolute;inset:calc(56px + var(--top-inset)) 8px calc(72px + var(--bottom-inset))}.field canvas{position:absolute;pointer-events:none}.match-controls{position:absolute;bottom:var(--bottom-inset);left:12px;right:12px;height:60px;display:flex;gap:8px;align-items:center;pointer-events:none}.match-readout{flex:1;min-width:0;text-align:center}#relay{font-size:11px;letter-spacing:1px;color:#c3ee91;font-weight:750}#status{margin-top:5px;font-size:10px;color:#aac3be;line-height:1.3}#chain{font-size:9px;color:#e1eff1;margin-top:3px}.left .match-controls{flex-direction:row-reverse}#switch,#ability{pointer-events:auto;width:60px;height:52px;padding:2px;font-size:10px;flex-shrink:0}#ability{color:#d8f3b3;border-color:#87a85f;background:#2e4431}pre{white-space:pre-wrap;font-size:10px}.modal{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;padding:20px;background:#041217b8;z-index:10}.hidden{display:none}.panel{width:min(100%,410px);max-height:85dvh;overflow:auto;background:#102b35;border:1px solid #426470;border-radius:18px;padding:24px}.panel h1,.panel h2{margin-top:0}.panel button{margin:6px 4px 6px 0}.panel label{display:block;margin:10px 0}.panel input[type=number]{max-width:110px;padding:5px}.panel input[type=checkbox]{accent-color:#6ef0fa}.panel select{min-height:48px}.debug-row{display:flex;flex-wrap:wrap;gap:8px;align-items:end}.debug-row label{flex:1}#version{cursor:pointer}.notice{position:fixed;bottom:20px;left:50%;transform:translate(-50%);z-index:20;background:#254854;padding:12px 18px;border-radius:8px}@media(max-width:360px){.shell{padding-left:8px;padding-right:8px}}.primary{background:#b9ec83;border-color:#b9ec83;color:#142d2c;font-weight:800}.eyebrow{font-size:10px;letter-spacing:2px;color:#b9ec83;font-weight:800}.panel h1{font-size:clamp(25px,4vw,38px);letter-spacing:-1px;line-height:1.05;margin-bottom:16px}.panel p{color:#a9c2bd;font-size:13px;line-height:1.6}.panel .eyebrow{color:#b9ec83;font-size:10px}.keyboard-help{font-size:11px!important}.roster-panel{width:min(880px,100%)}.team-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:20px 0}.team-slots button{margin:0;text-align:left;font-weight:800}.team-slots small{display:block;color:#8ba59f;font-size:10px;margin-bottom:4px}[aria-pressed=true]{outline:2px solid #b9ec83;outline-offset:-2px;background:#294838}.character-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:18px}.panel .character-card{margin:0;padding:14px;text-align:left;display:grid;grid-template-columns:50px 1fr;gap:12px 10px;align-content:start;border-color:#36524d;background:#193632}.character-card[aria-pressed=true]{background:#2a493e}.portrait{width:50px;height:50px}.character-name{align-self:center;color:var(--accent);font-size:18px;font-weight:800}.character-name small{display:block;color:#9bb6ae;font-size:10px;margin-top:4px;font-weight:500}.trait{grid-column:1 / -1;font-size:11px;color:#c0d2cc;line-height:1.5}.trait b{display:block;font-size:8px;letter-spacing:1px;color:var(--accent);margin-bottom:3px}.roster-actions{position:sticky;bottom:-24px;background:#102b35;padding-top:8px}@media(max-width:600px){.character-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.roster-panel{padding:18px}.panel .character-card{grid-template-columns:1fr;padding:12px;gap:8px}.character-name{font-size:16px}.roster-actions{bottom:-18px}.scoreboard{gap:8px}#score{font-size:20px}.brand{letter-spacing:1px}}.kickoff-banner{position:absolute;left:50%;top:35%;transform:translate(-50%,-50%);pointer-events:none;color:#d9fbb8;background:#0c2635e8;border:1px solid #91ae73;padding:10px 16px;font-size:10px;font-weight:850;letter-spacing:1px;white-space:nowrap;border-radius:30px}.kickoff-banner:empty{display:none}.clubhouse-panel{width:min(680px,100%)}.clubhouse-panel h1{font-size:clamp(32px,6vw,52px)}.club-record{display:flex;gap:24px;margin:22px 0;font-size:10px;letter-spacing:1px;color:#9bb9b6}.club-record b{display:block;font-size:26px;color:#e3f4ed;letter-spacing:0}.cup-route{display:grid;gap:8px;margin:22px 0}.cup-stop{display:flex;align-items:center;gap:16px;padding:10px 14px;border:1px solid #34535a;border-radius:14px}.cup-stop.current{border-color:#b9ec83;background:#294334}.cup-stop h3{font-size:17px;margin:0}.cup-stop p{font-size:10px;margin:5px 0 0}.cup-stop>div{flex:1}.cup-stop .portrait.atlas{width:58px;height:58px;flex-shrink:0;margin:0}.round-number{color:#b9ec83;font-size:18px;font-weight:800}.club-actions{display:flex;flex-wrap:wrap;gap:6px}.club-actions button{margin:0}.trophy{display:flex;gap:16px;align-items:center;padding:16px;margin-top:22px;border-radius:14px;background:#19343a}.trophy>svg{color:#718f89;flex-shrink:0}.trophy.earned>svg,.champion-cup{color:#ffdf84}.champion-cup svg{width:72px;height:72px}.trophy p{margin:5px 0 0;font-size:11px}.panel .club-note{font-size:11px}.opponent-lineup{display:flex;justify-content:center;gap:12px;margin:20px 0}.opponent-lineup .portrait.atlas{width:80px;height:80px;margin:0}.result-score{font-size:64px;font-weight:900;letter-spacing:4px}.result-score span{color:#6b908e}@media(max-width:400px){.hud{left:10px;right:10px;gap:4px}.scoreboard{gap:5px}#score{font-size:18px;letter-spacing:1px}.club-stop{gap:8px}}.portrait.atlas{width:76px;height:76px;display:block;position:relative;overflow:hidden}.atlas img{position:absolute;width:300%;height:300%;max-width:none}.panel .character-card{grid-template-columns:76px 1fr;background:linear-gradient(150deg,#23433d,#152b33)}@media(max-width:600px){.panel .character-card{grid-template-columns:1fr}.portrait.atlas{width:96px;height:96px;margin:auto}}:root{color:#192132;background:#fff9ed;color-scheme:light}button{color:#192132;background:#fffdf5;border:2px solid #192132;border-radius:9px;box-shadow:3px 3px #192132;font-weight:750}button:active{background:#ffe15c;transform:translate(2px,2px);box-shadow:1px 1px #192132}button:focus-visible{outline:3px solid #8351e6;outline-offset:4px}button:disabled{opacity:.5;box-shadow:none}.primary{color:#192132;background:#d2e823;border-color:#192132}.shell{background:#4a167b;color:#fffdf5}.hud .brand{color:#fffdf5;box-shadow:none}.brand span{color:#d2e823}.hud button{min-height:44px}#clock{color:#eff6db}#ability{background:#ffe15c;color:#192132;border-color:#192132}#status{color:#d6efe9}.modal{background:#123334d9;padding:18px}.panel{background:#fff9ed;border:3px solid #192132;border-radius:16px;box-shadow:8px 8px #192132;padding:26px;max-height:91dvh}.panel h1,.panel h2{color:#192132;font-weight:950}.panel p{color:#42495a;line-height:1.45;font-size:14px}.panel .eyebrow{color:#6741b2;letter-spacing:1.5px;font-weight:900}.panel select{width:100%;border:2px solid #192132;border-radius:8px;padding:8px;background:#fff;color:#192132}.panel input[type=checkbox]{accent-color:#6741b2;width:20px;height:20px;vertical-align:middle}.panel .setting-list label{padding:4px 0}.panel details{margin:18px 0;border-top:2px solid #192132;padding-top:14px}.panel summary{cursor:pointer;font-weight:800}.panel details p{font-size:12px}.notice{background:#ffe15c;color:#192132;border:2px solid #192132;width:min(90%,460px)}.clubhouse-panel{width:min(560px,100%);padding:28px;position:relative}.menu-hero{position:relative;overflow:hidden;border-bottom:3px solid #192132;padding-bottom:10px}.menu-hero h1{font-size:clamp(64px,13vw,92px);line-height:.87;letter-spacing:-5px;position:relative;z-index:1}.menu-hero h1 span{color:#7040c7}.menu-hero .eyebrow{font-size:10px}.menu-athletes{position:absolute;right:0;bottom:0;display:flex;width:52%;align-items:end}.menu-athletes:before{content:"";position:absolute;top:15%;right:0;bottom:5%;left:0;background:#ffe15c;border:2px solid #192132;border-radius:50%;transform:rotate(-12deg)}.menu-athletes{height:155px}.menu-athletes .portrait.atlas{position:absolute;width:92px;height:92px;margin:0;bottom:4px;left:0}.menu-athletes .portrait.atlas:nth-child(2){z-index:1;width:110px;height:110px;left:26px;bottom:16px}.menu-athletes .portrait.atlas:nth-child(3){left:62px}.panel .menu-tag{color:#192132;font-size:18px;font-weight:800;margin:15px 0 22px}.menu-choices{display:grid;gap:13px}.menu-choices button{margin:0;text-align:left;padding:16px 18px}.menu-choices button b{display:block;font-size:24px;font-weight:900}.menu-choices button span{display:block;font-size:13px;margin-top:4px;font-weight:600}.menu-choices #play-cup{background:#c7b2f3}.menu-choices #club-settings{text-align:center}.panel .trophy{background:#ffe89c;color:#192132;border:2px solid #192132;margin-bottom:0;font-size:12px}.trophy.earned>svg,.champion-cup{color:#996214}.club-record,.club-record b{color:#192132}.result-score span{color:#746787}.panel .character-card{background:#fffdf5;border:2px solid #192132}.panel .character-card[aria-pressed=true]{background:#e2d3ff;outline-color:#6741b2}.character-name,.trait b{color:#53249b}.character-name small,.trait,.team-slots small{color:#42495a}.team-slots [aria-pressed=true]{background:#d2e823;outline:none}.roster-actions{background:#fff9ed;padding-bottom:6px}.welcome-ball{width:84px;height:84px;display:grid;place-items:center;background:#ffe15c;border:3px solid #192132;border-radius:50%;font-size:48px;box-shadow:5px 5px #192132;margin:22px 0}.twist-card{padding:14px;border:2px solid #192132;background:#ffcfe9;border-radius:10px;margin:16px 0}.twist-card p{margin-bottom:0}.lesson{position:absolute;top:max(64px,calc(env(safe-area-inset-top) + 56px));left:12px;right:12px;z-index:3;background:#fff9ed;color:#192132;padding:10px 12px;border:2px solid #192132;box-shadow:3px 3px #192132;border-radius:10px}.lesson-count{display:inline-block;font-size:11px;background:#d2e823;padding:3px 6px;margin-right:8px}.lesson b{font-size:15px}.lesson p{font-size:12px;margin:5px 0;line-height:1.3}.lesson-actions{display:flex;gap:8px}.lesson button{min-height:36px;padding:5px 12px;font-size:12px}.lesson small{display:block;font-size:10px;margin-top:5px}.training .field{top:calc(230px + var(--top-inset))}.training #clock{visibility:hidden}@media(min-width:700px){.lesson{max-width:560px;left:50%;transform:translate(-50%)}}@media(max-height:500px){.lesson{left:8px;right:auto;width:220px;top:65px;transform:none}.training .field{top:calc(56px + var(--top-inset));left:240px}.panel{max-height:94dvh;padding:18px}}@media(prefers-reduced-motion:reduce){button:active{transform:none}}.team-key{grid-column:1 / -1;text-align:center;font-size:8px;line-height:10px;letter-spacing:.5px}.team-key span:first-child{color:#62eff5}.team-key span:last-child{color:#ffb766}.field{background:#4a167b}#panel fieldset{border:2px solid #4a167b;border-radius:12px;margin:14px 0;padding:12px}#panel fieldset legend{font-weight:800}