:root{--bg: #070b18;--bg-2: #0e1428;--panel: #141c34;--panel-2: #1b2544;--line: #2a3660;--text: #eef2ff;--muted: #93a0c8;--accent: #ffd54a;--accent-2: #38e1ff;--good: #4ade80;--bad: #f87171;--radius: 18px;--shadow: 0 14px 40px rgba(0, 0, 0, .45);color-scheme:dark}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;padding:0;height:100%;width:100%;background:var(--bg);color:var(--text);font-family:Fredoka,Segoe UI,system-ui,-apple-system,sans-serif;overscroll-behavior:none}body{overflow:hidden}#app{position:fixed;inset:0;overflow:hidden}button{font-family:inherit}.screen{position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden;background:radial-gradient(1200px 700px at 15% -10%,#1c2a5c 0%,transparent 60%),radial-gradient(900px 600px at 100% 0%,#35215c 0%,transparent 55%),linear-gradient(180deg,#0a0f22,#070b18)}.screen--game{background:#000}.scroll{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;flex:1;min-height:0}.topbar{display:flex;align-items:center;gap:12px;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));padding-left:calc(16px + env(safe-area-inset-left,0px));padding-right:calc(16px + env(safe-area-inset-right,0px));background:#080c1adb;border-bottom:2px solid var(--line);backdrop-filter:blur(8px);flex-wrap:wrap}.topbar h1{font-size:20px;margin:0;letter-spacing:.4px}.topbar .spacer{flex:1}.tabs{display:flex;gap:6px;overflow-x:auto;padding:8px 12px;border-bottom:2px solid var(--line);background:#0a0f20b3}.tabs::-webkit-scrollbar{height:0}.tab{border:2px solid transparent;background:var(--panel);color:var(--muted);padding:8px 14px;border-radius:999px;font-size:14px;font-weight:600;white-space:nowrap;cursor:pointer}.tab.is-active{background:var(--accent);color:#201a00;border-color:#fff3}.content{padding:16px;padding-left:calc(16px + env(safe-area-inset-left,0px));padding-right:calc(16px + env(safe-area-inset-right,0px))}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;border-radius:14px;cursor:pointer;padding:12px 20px;font-size:16px;font-weight:600;background:linear-gradient(180deg,#2c3a68,#202b50);color:var(--text);box-shadow:0 4px #131a33,var(--shadow);transition:transform .06s ease,box-shadow .06s ease,filter .15s ease;min-height:44px}.btn:active{transform:translateY(3px);box-shadow:0 1px #131a33}.btn:disabled{opacity:.45;cursor:not-allowed}.btn--primary{background:linear-gradient(180deg,#ffe06a,#f5b91f);color:#241c00;box-shadow:0 4px #a37600,var(--shadow)}.btn--accent{background:linear-gradient(180deg,#5fe6ff,#14b8d8);color:#01222b;box-shadow:0 4px #0a7288,var(--shadow)}.btn--danger{background:linear-gradient(180deg,#ff7b7b,#e23a3a);color:#2a0000;box-shadow:0 4px #911d1d,var(--shadow)}.btn--good{background:linear-gradient(180deg,#86efac,#22c55e);color:#05270f;box-shadow:0 4px #14682f,var(--shadow)}.btn--sm{padding:7px 12px;font-size:13px;min-height:34px;border-radius:10px}.btn--block{width:100%}.btn--ghost{background:transparent;border:2px solid var(--line);box-shadow:none}.card{background:linear-gradient(180deg,#1d2748eb,#121931eb);border:2px solid var(--line);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}.card h3{margin:0 0 10px;font-size:17px}.card h4{margin:0 0 8px;font-size:15px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}.grid{display:grid;gap:14px}.grid--2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}.grid--3{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}.grid--4{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.stack{display:flex;flex-direction:column;gap:10px}.muted{color:var(--muted)}.small{font-size:13px}.tiny{font-size:11px}.right{text-align:right}.center{text-align:center}.pill{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:700;background:var(--panel-2);border:1px solid var(--line)}table{width:100%;border-collapse:collapse;font-size:13px}th{text-align:left;color:var(--muted);font-weight:600;padding:7px 8px;border-bottom:2px solid var(--line);position:sticky;top:0;background:#131b33;z-index:2;font-size:12px;text-transform:uppercase;letter-spacing:.04em}td{padding:7px 8px;border-bottom:1px solid rgba(42,54,96,.5)}tr.clickable{cursor:pointer}tr.clickable:hover td{background:#38e1ff12}.table-wrap{overflow-x:auto;border-radius:12px;border:1px solid var(--line);max-height:62vh;overflow-y:auto}input,select,textarea{background:#0d1428;color:var(--text);border:2px solid var(--line);border-radius:10px;padding:9px 11px;font-family:inherit;font-size:15px;width:100%;min-height:42px}input[type=range]{padding:0;min-height:30px;accent-color:var(--accent)}input[type=color]{padding:2px;height:42px}label.field{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--muted)}.title-wrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:20px;text-align:center}.title-logo{font-size:clamp(46px,11vw,108px);font-weight:700;line-height:.92;letter-spacing:-.02em;background:linear-gradient(180deg,#fff 10%,#ffd54a,#ff8a3d);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 8px 30px rgba(255,180,60,.25);margin:0}.title-sub{color:var(--muted);font-size:clamp(13px,2.2vw,17px);margin:-10px 0 0}.title-menu{display:grid;gap:12px;width:min(420px,92vw)}.title-menu .btn{font-size:18px;padding:15px 22px}.hud{position:absolute;inset:0;pointer-events:none;font-variant-numeric:tabular-nums}.hud>*{pointer-events:none}.hud button,.hud .clickable{pointer-events:auto}.scorebug{position:absolute;top:calc(10px + env(safe-area-inset-top,0px));left:50%;transform:translate(-50%);display:flex;align-items:stretch;border-radius:14px;overflow:hidden;border:2px solid rgba(255,255,255,.18);box-shadow:var(--shadow);background:#060a16d9;backdrop-filter:blur(6px)}.scorebug .team{display:flex;align-items:center;gap:8px;padding:7px 14px;font-weight:700;font-size:17px}.scorebug .score{font-size:26px;min-width:34px;text-align:center}.scorebug .mid{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4px 14px;background:#ffffff12}.scorebug .clock{font-size:22px;font-weight:700}.scorebug .period{font-size:10px;color:var(--muted);letter-spacing:.14em}.scorebug .crest{width:26px;height:26px;display:block}.poss-dot{width:9px;height:9px;border-radius:50%;background:#ffd54a;box-shadow:0 0 10px #ffd54a}.shotclock{position:absolute;top:calc(76px + env(safe-area-inset-top,0px));left:50%;transform:translate(-50%);background:#060a16cc;border:2px solid var(--line);border-radius:10px;padding:3px 12px;font-size:15px;font-weight:700}.shotclock.danger{color:#ff6b6b;border-color:#ff6b6b;animation:pulse .4s infinite alternate}@keyframes pulse{to{transform:translate(-50%) scale(1.09)}}.hud-left{position:absolute;left:calc(12px + env(safe-area-inset-left,0px));top:calc(12px + env(safe-area-inset-top,0px));display:flex;flex-direction:column;gap:8px}.hud-right{position:absolute;right:calc(12px + env(safe-area-inset-right,0px));top:calc(12px + env(safe-area-inset-top,0px));display:flex;flex-direction:column;gap:8px;align-items:flex-end}.powerup-slot{display:flex;align-items:center;gap:10px;background:#060a16d1;border:2px solid var(--accent);border-radius:14px;padding:8px 12px;box-shadow:0 0 24px #ffd54a47}.powerup-slot .icon{font-size:26px}.powerup-slot .name{font-size:13px;font-weight:700}.powerup-slot .hint{font-size:10px;color:var(--muted)}.powerup-slot.empty{border-color:var(--line);box-shadow:none;opacity:.5}.effect-chip{background:#060a16cc;border:1px solid var(--line);border-radius:999px;padding:3px 10px;font-size:12px}.controlled-tag{background:#060a16cc;border:2px solid var(--line);border-radius:12px;padding:6px 12px;font-size:13px;font-weight:600}.stamina{width:110px;height:6px;border-radius:4px;background:#24304f;overflow:hidden;margin-top:5px}.stamina>i{display:block;height:100%;background:linear-gradient(90deg,#4ade80,#facc15)}.toast-wrap{position:absolute;left:50%;bottom:calc(96px + env(safe-area-inset-bottom,0px));transform:translate(-50%);display:flex;flex-direction:column;gap:6px;align-items:center;width:min(560px,92vw)}.toast{background:#060a16e6;border:2px solid var(--line);border-radius:12px;padding:8px 16px;font-size:14px;font-weight:600;animation:toastIn .2s ease;text-align:center}.toast.goal{border-color:var(--accent);color:var(--accent);font-size:17px}.toast.powerup{border-color:#f0abfc;color:#f0abfc}.toast.foul{border-color:#f87171;color:#fca5a5}@keyframes toastIn{0%{opacity:0;transform:translateY(10px)}}.big-banner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px}.big-banner .headline{font-size:clamp(38px,9vw,96px);font-weight:700;text-shadow:0 8px 40px rgba(0,0,0,.8);animation:pop .35s cubic-bezier(.2,1.6,.4,1)}@keyframes pop{0%{transform:scale(.5);opacity:0}}.log-panel{position:absolute;left:calc(12px + env(safe-area-inset-left,0px));bottom:calc(12px + env(safe-area-inset-bottom,0px));width:min(330px,46vw);max-height:30vh;overflow:hidden;display:flex;flex-direction:column-reverse;gap:4px}.log-line{background:#060a16b8;border-left:3px solid var(--line);padding:4px 9px;font-size:12px;border-radius:0 8px 8px 0}@media(pointer:coarse){.log-panel{bottom:calc(200px + env(safe-area-inset-bottom,0px));max-height:22vh;width:min(300px,40vw)}}.touch-pad{position:absolute;inset:0;pointer-events:none;z-index:5}.stick-zone{position:absolute;left:calc(18px + env(safe-area-inset-left,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));width:168px;height:168px;pointer-events:auto;touch-action:none;display:flex;align-items:center;justify-content:center}.stick-base{width:130px;height:130px;border-radius:50%;border:3px solid rgba(255,255,255,.28);background:#0a10226b;display:flex;align-items:center;justify-content:center}.stick-knob{width:62px;height:62px;border-radius:50%;background:#ffffff52;border:3px solid rgba(255,255,255,.5)}.btn-cluster{position:absolute;right:calc(18px + env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));width:232px;height:200px;pointer-events:none}.tbtn{position:absolute;pointer-events:auto;touch-action:none;border:3px solid rgba(255,255,255,.45);border-radius:50%;color:#fff;font-weight:700;font-size:13px;background:#141c34b3}.tbtn.is-down{transform:scale(.93);filter:brightness(1.4)}.tbtn-shoot{right:4px;bottom:22px;width:92px;height:92px;background:#f59e0bb8;font-size:15px}.tbtn-pass{right:92px;bottom:96px;width:74px;height:74px;background:#38bdf8a8}.tbtn-jump{right:12px;bottom:122px;width:70px;height:70px;background:#4ade8099;font-size:12px}.tbtn-power{right:160px;bottom:30px;width:64px;height:64px;background:#f0abfca8;font-size:22px}.tbtn-switch{right:150px;bottom:110px;width:56px;height:56px;background:#94a3b88c;font-size:20px}@media(hover:hover)and (pointer:fine){.touch-pad{display:none}}@media(pointer:coarse)and (max-height:470px){.stick-zone{width:118px;height:118px}.stick-base{width:92px;height:92px}.stick-knob{width:44px;height:44px}.btn-cluster{width:176px;height:150px}.tbtn-shoot{width:68px;height:68px;font-size:12px;bottom:14px}.tbtn-pass{width:56px;height:56px;font-size:11px;right:68px;bottom:72px}.tbtn-jump{width:52px;height:52px;font-size:10px;right:8px;bottom:90px}.tbtn-power{width:48px;height:48px;font-size:17px;right:120px;bottom:22px}.tbtn-switch{width:42px;height:42px;font-size:15px;right:114px;bottom:82px}.log-panel{bottom:calc(146px + env(safe-area-inset-bottom,0px));max-height:16vh;width:min(230px,34vw)}.log-line{font-size:10px;padding:2px 6px}.scorebug .team{padding:4px 9px;font-size:14px}.scorebug .score{font-size:20px;min-width:26px}.scorebug .crest{width:20px;height:20px}.scorebug .clock{font-size:17px}.controlled-tag{font-size:11px;padding:4px 8px}.powerup-slot{padding:5px 8px}.powerup-slot .icon{font-size:19px}}.modal-backdrop{position:absolute;inset:0;background:#030610c7;backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;padding:18px;z-index:40}.modal{background:linear-gradient(180deg,#1a2444,#121a33);border:2px solid var(--line);border-radius:20px;padding:20px;width:min(760px,96vw);max-height:92vh;overflow-y:auto;box-shadow:var(--shadow)}.modal h2{margin:0 0 12px;font-size:22px}.orientation-nag{position:fixed;inset:0;z-index:999;background:#070b18;display:none;align-items:center;justify-content:center;flex-direction:column;gap:14px;text-align:center;padding:24px}@media(orientation:portrait)and (max-width:950px){.orientation-nag.armed{display:flex}}.rotate-icon{font-size:60px;animation:rot 2s ease-in-out infinite}@keyframes rot{0%,to{transform:rotate(0)}50%{transform:rotate(90deg)}}.badge-ovr{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:26px;border-radius:8px;font-weight:700;font-size:14px;color:#0b1020}.team-chip{display:inline-flex;align-items:center;gap:8px}.swatch{width:16px;height:16px;border-radius:5px;border:1px solid rgba(255,255,255,.35)}.bar{height:8px;background:#24304f;border-radius:5px;overflow:hidden}.bar>i{display:block;height:100%;background:linear-gradient(90deg,#38bdf8,#4ade80)}.kv{display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px solid rgba(42,54,96,.4);font-size:14px}.kv:last-child{border-bottom:none}.hidden{display:none!important}.preview-canvas{width:100%;aspect-ratio:16/10;border-radius:14px;overflow:hidden;background:#0a0f22;border:2px solid var(--line)}.list-scroll{max-height:46vh;overflow-y:auto;border:1px solid var(--line);border-radius:12px}.chip-row{display:flex;gap:6px;flex-wrap:wrap}.chip{padding:5px 11px;border-radius:999px;border:2px solid var(--line);background:var(--panel);font-size:13px;cursor:pointer}.chip.is-active{border-color:var(--accent);background:#ffd54a24;color:var(--accent)}.feature-done{color:var(--good)}.feature-todo{color:var(--bad)}.loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;background:#070b18;z-index:60}.spinner{width:46px;height:46px;border-radius:50%;border:5px solid rgba(255,255,255,.15);border-top-color:var(--accent);animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}