:root{--ink:#f6fbff;--muted:#b4c7ff;--panel:#030618b8;--panel-solid:#06041a;--neon:#00f5ff;--pink:#ff39f8;--gold:#fff05a;--rust:#ff5f1f;--scrap:#151934;--steel:#c8d7ff;--hazard:#ff8c1a;--danger:#ff4e50;--glass:#ffffff1f;--border:#00f5ff3d;color:var(--ink);touch-action:none;background:#050219;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html,body{overscroll-behavior:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;background:#050219;width:100%;height:100%;margin:0;overflow:hidden}button,select{font:inherit}#game-canvas{background:#050219;width:100vw;height:100vh;display:block;position:fixed;inset:0}#ui-root{pointer-events:none;position:fixed;inset:0}.hidden{display:none!important}.fatal-error{pointer-events:auto;border:1px solid var(--border);background:var(--panel-solid);place-content:center;padding:28px;display:grid;position:absolute;inset:24px}.menu-shell,.settings-panel{pointer-events:auto;padding:max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));background:linear-gradient(90deg,#040216f2,#0402165c),radial-gradient(circle at 76% 18%,#00f5ff52,#0000 29%),radial-gradient(circle at 84% 72%,#ff39f83d,#0000 34%),radial-gradient(circle at 44% 96%,#fff05a24,#0000 38%),repeating-linear-gradient(135deg,#00f5ff14 0 3px,#0000 3px 18px);justify-content:flex-start;align-items:stretch;display:flex;position:fixed;inset:0}.menu-shell{z-index:10}.settings-panel{z-index:40}.menu-panel,.settings-card,.drawer{border:1px solid var(--border);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:linear-gradient(#080826e6,#050814e6),repeating-linear-gradient(90deg,#00f5ff12 0 3px,#0000 3px 15px);border-radius:8px;align-self:center;width:min(480px,100%);padding:22px;box-shadow:0 16px 60px #0000006b,0 0 34px #00f5ff14}.brand-lockup{gap:12px;margin-bottom:22px;display:grid}.league-kicker{width:max-content;color:var(--hazard);letter-spacing:0;border:1px solid #00f5ff73;padding:5px 8px;font-size:.74rem;font-weight:900}h1,h2,p{margin:0}h1{letter-spacing:0;text-transform:uppercase;text-shadow:0 0 18px #00f5ff6b,0 0 32px #ff39f838;max-width:12ch;font-size:clamp(2.55rem,10vw,4.6rem);line-height:.9}.arena-peek{width:100%;color:var(--ink);text-align:left;background:linear-gradient(135deg,#00f5ff1a,#ff39f814),#0000003d;border:1px solid #00f5ff5c;border-radius:8px;grid-template-columns:104px minmax(0,1fr);align-items:center;gap:10px;margin:0 0 14px;padding:8px;display:grid}.arena-peek img,.concept-grid img,.level-sheet{object-fit:cover;border-radius:6px;width:100%;display:block}.arena-peek img{height:66px}.arena-peek strong,.concept-grid strong{color:var(--hazard);text-transform:uppercase;font-weight:950;display:block}.arena-peek small,.concept-grid span{color:var(--muted);font-size:.76rem;line-height:1.25;display:block}h2{text-transform:uppercase;margin-bottom:14px;font-size:1.15rem}p{max-width:46ch;color:var(--muted);line-height:1.45}.menu-actions{grid-template-columns:1fr 1fr;gap:10px;display:grid}.menu-actions button,.drawer-close,.settings-card button{border:1px solid var(--border);min-height:44px;color:var(--ink);background:#ffffff14;border-radius:8px}.menu-actions button:disabled{cursor:progress;opacity:.72}.menu-actions button.primary{color:#041016;background:linear-gradient(135deg, var(--neon), var(--gold));border-color:#00f5ffbd;grid-column:1/-1;min-height:58px;font-weight:950}.menu-actions button.primary.secondary{min-height:52px;color:var(--ink);background:linear-gradient(135deg,#ff39f8d1,#040f28eb);border-color:#ff39f8ad}.concept-grid{grid-template-columns:1fr 1fr;gap:10px;margin:14px 0 10px;display:grid}.concept-grid article{background:#03081a61;border:1px solid #00f5ff3d;border-radius:8px;overflow:hidden}.concept-grid img{border-radius:0;height:94px}.concept-grid strong,.concept-grid span{padding-inline:8px}.concept-grid strong{padding-top:8px}.concept-grid span{padding-bottom:9px}.level-sheet{max-height:min(54vh,520px);margin:10px 0 12px}.drawer{width:min(520px,100% - 36px);position:absolute;bottom:18px;left:18px}.drawer-close{float:right;min-height:36px;padding:0 12px}.team-preview{flex-wrap:wrap;gap:8px;margin-top:16px;display:flex}.team-preview span{color:var(--ink);background:#ffffff14;border:1px solid #ffffff2e;border-radius:999px;padding:7px 9px;font-size:.78rem}.settings-panel{background:#020509ad;justify-content:center}.settings-card{align-self:center;gap:12px;display:grid}.settings-card label{color:var(--muted);grid-template-columns:minmax(0,1fr) 132px;align-items:center;gap:12px;font-size:.9rem;display:grid}.settings-card select{border:1px solid var(--border);min-height:40px;color:var(--ink);background:#0c1724;border-radius:8px}.hud{pointer-events:none;z-index:20;position:fixed;inset:0}.score-strip{top:max(10px, env(safe-area-inset-top));z-index:2;align-items:center;gap:8px;display:flex;position:absolute;left:50%;transform:translate(-50%)}.score-team,.timer,.status-chip,.hud-right{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:linear-gradient(#060a24b3,#0204109e),radial-gradient(circle at 20% 0,#00f5ff1a,#0000 62%),repeating-linear-gradient(135deg,#ff39f80f 0 3px,#0000 3px 12px);border:1px solid #ffffff1f;border-radius:8px;box-shadow:0 8px 22px #00000038,inset 0 0 0 1px #00f5ff0f}.score-team{text-shadow:0 1px #000000b8;justify-content:center;align-items:center;gap:8px;min-width:92px;min-height:38px;padding:5px 10px;font-size:.72rem;font-weight:900;display:flex}.score-team strong{text-align:right;font-variant-numeric:tabular-nums;min-width:2.15ch;font-size:clamp(1.08rem,3.5vw,1.4rem);line-height:1;display:inline-block}.score-team strong.score-pop{animation:.42s cubic-bezier(.2,1.05,.34,1) scorePop}.score-team.neon span{color:var(--neon)}.score-team.concrete span{color:var(--gold)}.timer{min-width:58px;min-height:38px;color:var(--ink);place-items:center;font-weight:950;display:grid}.hud-left{top:max(58px, calc(env(safe-area-inset-top) + 54px));z-index:2;gap:8px;display:grid;position:absolute;left:10px}.status-chip{width:max-content;max-width:min(64vw,340px);color:var(--ink);padding:8px 10px;font-size:.78rem;font-weight:850;box-shadow:0 0 18px #00f5ff1f,0 8px 22px #00000038}.hud-right{top:max(58px, calc(env(safe-area-inset-top) + 54px));z-index:2;width:min(31vw,190px);padding:9px;position:absolute;right:10px}.tutorial-panel{left:50%;top:max(58px, calc(env(safe-area-inset-top) + 54px));z-index:2;width:min(44vw,310px);color:var(--ink);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:linear-gradient(#0a082ab8,#040814a8),radial-gradient(circle at 0 0,#00f5ff1a,#0000 58%),repeating-linear-gradient(135deg,#ff39f812 0 4px,#0000 4px 13px);border:1px solid #ff39f875;border-radius:8px;gap:5px;padding:9px 11px;display:grid;position:absolute;transform:translate(-50%);box-shadow:0 10px 24px #00000047,inset 0 0 0 1px #00f5ff14}.tutorial-kicker{color:var(--neon);text-transform:uppercase;font-size:.62rem;font-weight:950}.tutorial-panel strong{text-transform:uppercase;font-size:.9rem;line-height:1.1}.tutorial-panel span{color:var(--muted);font-size:.72rem;line-height:1.22}.tutorial-progress{background:#ffffff1f;border-radius:999px;height:7px;overflow:hidden}.tutorial-progress>div{border-radius:inherit;background:linear-gradient(90deg, var(--hazard), var(--neon));width:0;height:100%;transition:width .16s}.meter-label{color:var(--hazard);margin-bottom:6px;font-size:.66rem;font-weight:950}.meter{background:#ffffff24;border-radius:999px;height:10px;overflow:hidden}.meter>div{border-radius:inherit;background:linear-gradient(90deg, var(--rust), var(--hazard), var(--neon));width:0;height:100%;transition:width .13s linear}.gamebreaker-ready .hud-right{border-color:#ff2bd6db;animation:.78s ease-in-out infinite alternate gamebreakerPulse;box-shadow:0 0 26px #ff2bd673}.shot-meter{left:50%;bottom:calc(142px + env(safe-area-inset-bottom));z-index:2;background:#000000a3;border:1px solid #ffffff52;border-radius:999px;width:min(48vw,250px);height:22px;position:absolute;overflow:hidden;transform:translate(-50%);box-shadow:0 0 18px #00f5ff29,0 10px 24px #00000057}.shot-window{background:#00f5ff5c;border-inline:1px solid #ffffff6b;width:20%;height:100%;position:absolute;top:0;left:68%}.shot-fill{width:0;height:100%;filter:saturate(calc(.75 + var(--quality,0) * 1.4));background:linear-gradient(90deg,#ff4e50,#fff05a,#00f5ff)}.prompt{z-index:3;min-width:140px;color:var(--ink);text-align:center;text-transform:uppercase;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#03080fd1;border:1px solid #ffffff57;border-radius:8px;padding:10px 14px;font-weight:950;position:absolute;top:max(104px,16%);left:50%;transform:translate(-50%);box-shadow:0 0 20px #00f5ff1f,0 10px 30px #00000047}.prompt[data-kind=score]{color:var(--hazard);border-color:#ffd166cc}.prompt[data-kind=gamebreaker]{color:var(--pink);border-color:#ff2bd6cc}.juice-callout{z-index:3;min-width:150px;color:var(--ink);text-align:center;text-transform:uppercase;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:linear-gradient(#0c161cd6,#04080ec2),repeating-linear-gradient(135deg,#00f5ff14 0 4px,#0000 4px 12px);border:1px solid #00f5ff80;border-radius:8px;gap:2px;padding:8px 13px;display:grid;position:absolute;top:max(146px,22%);left:50%;transform:translate(-50%);box-shadow:0 0 24px #00f5ff33,0 12px 30px #0000004d}.juice-callout strong{font-size:.9rem;line-height:1.1}.juice-callout span{color:var(--muted);font-size:.62rem;font-weight:950}.juice-callout[data-kind=score]{border-color:#ffd166bf;box-shadow:0 0 24px #ffd16638,0 12px 30px #0000004d}.juice-callout[data-kind=gamebreaker]{color:var(--pink);border-color:#ff2bd6d1;box-shadow:0 0 32px #ff2bd652,0 12px 30px #0000004d}.juice-callout.pop{animation:.42s cubic-bezier(.2,1.25,.34,1) juicePop}.screen-flash{z-index:1;pointer-events:none;opacity:0;mix-blend-mode:screen;background:radial-gradient(circle at 50% 48%,#00f5ff5c,#00f5ff14 34%,#0000 64%);position:fixed;inset:0}.screen-flash[data-kind=score]{background:radial-gradient(circle at 50% 48%,#fff05a66,#ff39f814 34%,#0000 64%)}.screen-flash[data-kind=gamebreaker]{background:radial-gradient(circle at 50% 48%,#ff2bd66b,#ff2bd61f 34%,#0000 66%),linear-gradient(90deg,#00f5ff1a,#ff39f81a)}.screen-flash.pulse{animation:.19s ease-out screenFlash}.touch-controls{pointer-events:none;z-index:30;position:fixed;inset:0}.move-zone{pointer-events:auto;z-index:0;touch-action:none;width:min(48vw,260px);height:min(56vh,360px);position:absolute;bottom:0;left:0}.swipe-zone{pointer-events:auto;width:54%;height:42%;position:absolute;top:18%;right:0}.swipe-zone:after{content:attr(data-swipe);min-width:72px;color:var(--neon);text-align:center;text-transform:uppercase;opacity:0;background:#050c149e;border:1px solid #00f5ff80;border-radius:8px;padding:8px 10px;font-size:.72rem;font-weight:950;transition:opacity .12s,transform .12s;position:absolute;top:40%;right:18px;transform:translateY(8px)}.swipe-zone[data-swipe]:after{opacity:1;transform:translateY(0)}.joystick{pointer-events:auto;left:max(14px, env(safe-area-inset-left));bottom:max(16px, env(safe-area-inset-bottom));z-index:1;touch-action:none;background:radial-gradient(circle,#00f5ff33,#04081852 58%,#04081829),conic-gradient(from 45deg,#00f5ff29,#ff39f81f,#00f5ff29);border:1px solid #00f5ff85;border-radius:50%;width:112px;height:112px;transition:opacity .12s,box-shadow .12s,transform .12s;position:absolute;box-shadow:inset 0 0 24px #00f5ff33,0 0 22px #00f5ff1f}.joystick.is-active{opacity:1;box-shadow:inset 0 0 28px #00f5ff47,0 0 26px #00f5ff38}.joystick.is-floating{bottom:auto;transform:translate(-50%,-50%)}.joystick-stick{background:linear-gradient(135deg,#00f5ff9e,#ff39f86b);border:1px solid #f6fbff70;border-radius:50%;width:52px;height:52px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 20px #00f5ff47}.touch-buttons{pointer-events:none;right:max(8px, env(safe-area-inset-right));bottom:max(10px, env(safe-area-inset-bottom));z-index:3;grid-template-columns:repeat(3,minmax(54px,1fr));grid-template-areas:"pass shoot sprint""trick steal block""defend switch gamebreaker";gap:6px;width:min(56vw,306px);display:grid;position:absolute}.touch-button{pointer-events:auto;min-height:48px;color:var(--ink);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:linear-gradient(#09102ab8,#05081c80),radial-gradient(circle at 50% 0,#00f5ff29,#0000 64%);border:1px solid #00f5ff3d;border-radius:8px;padding:0 5px;font-size:clamp(.58rem,2.25vw,.72rem);font-weight:950;transition:transform 80ms,border-color .12s,background .12s,box-shadow .12s;box-shadow:0 8px 18px #0000003d,inset 0 0 14px #00f5ff0f}.touch-button.is-pressed{background:#00f5ff3d;border-color:#ffffffad;transform:translateY(2px)scale(.97)}.touch-button.is-buffered{box-shadow:0 0 18px #00f5ff52,0 8px 20px #00000047}.touch-pass{grid-area:pass}.touch-shoot{grid-area:shoot}.touch-sprint{grid-area:sprint}.touch-trick{grid-area:trick}.touch-steal{grid-area:steal}.touch-block{grid-area:block}.touch-defend{grid-area:defend}.touch-switch{grid-area:switch}.touch-gamebreaker{grid-area:gamebreaker}.touch-shoot,.touch-gamebreaker{background:linear-gradient(#ff39f83d,#1c092a85),radial-gradient(circle at 50% 0,#fff05a1f,#0000 66%);border-color:#ff39f894}.touch-pass,.touch-trick{border-color:#00f5ff8a}.touch-sprint,.touch-defend{border-color:#fff05a80}@media (width>=780px){.menu-shell{padding-left:52px}.touch-controls{opacity:.86}.joystick{width:132px;height:132px}}@media (width<=480px){.menu-shell,.settings-panel{padding-inline:12px}.menu-panel,.settings-card,.drawer{padding:18px}h1{max-width:100%;font-size:clamp(2rem,11vw,3rem);line-height:.94}.menu-actions{grid-template-columns:1fr}.arena-peek{grid-template-columns:82px minmax(0,1fr)}.arena-peek img{height:58px}.concept-grid{grid-template-columns:1fr}.menu-actions button.primary{grid-column:auto}.score-strip{gap:4px}.score-team{min-width:66px;padding-inline:7px}.score-team span{display:none}.hud-right{width:34vw}.tutorial-panel{top:max(100px, calc(env(safe-area-inset-top) + 92px));width:min(56vw,236px);left:10px;transform:none}.juice-callout{min-width:132px;max-width:54vw;padding:7px 10px;top:max(204px,27%)}.joystick{width:104px;height:104px}.joystick-stick{width:48px;height:48px}.move-zone{width:min(52vw,218px);height:min(58vh,390px)}.touch-buttons{grid-template-columns:repeat(3,minmax(46px,1fr));gap:5px;width:min(60vw,284px)}.touch-button{min-height:44px;padding-inline:3px;font-size:clamp(.52rem,2.05vw,.64rem)}}@keyframes gamebreakerPulse{0%{transform:scale(1)}to{transform:scale(1.035)}}@keyframes juicePop{0%{opacity:0;transform:translate(-50%)translateY(10px)scale(.88)}58%{opacity:1;transform:translate(-50%)translateY(-2px)scale(1.08)}to{opacity:1;transform:translate(-50%)translateY(0)scale(1)}}@keyframes screenFlash{0%{opacity:0}35%{opacity:.82}to{opacity:0}}@keyframes scorePop{0%{text-shadow:0 0 #ffd16600;transform:scale(1)}45%{text-shadow:0 0 18px #ffd166b8;transform:scale(1.16)}to{text-shadow:0 0 #ffd16600;transform:scale(1)}}