/* Soul Jam demo shell — the Claude Design CSS (demo/src/css), built by scripts/build-demo.mjs. Do not edit. */

/* ═════ tokens.css ═════ */
/* tokens.css — SOUL JAM design tokens + base primitives. Sampled from character-select. */
:root{
--ink:#09090B;--ink-2:#16140f;--char:#141317;--char-2:#1d1b20;
--paper:#EEE9D9;--paper-2:#f7f2e2;--paper-3:#e3dcc6;--paper-line:rgba(9,9,11,.14);
--soul-purple:#6A2AA6;--soul-orange:#FF8A4E;--soul-grad:linear-gradient(100deg,#6A2AA6 0%,#b2419a 48%,#FF8A4E 100%);
--p1:#00d4ff;--p2:#ff3b6e;--gold:#e2a52b;--ok:#3f9b5a;--warn:#d8722c;
--court-green:#5E6B4E;--court-green-2:#4b5740;--earth-red:#8A4536;--asphalt:#3d3f3c;
--font-display:"Anton",sans-serif;--font-cond:"Oswald",sans-serif;--font-mono:"Space Mono",monospace;
--b:3px;--b-lg:4px;--shadow:6px 6px 0 var(--ink);--shadow-sm:3px 3px 0 var(--ink);--shadow-lg:10px 10px 0 var(--ink);
--clip:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px));
--clip-sm:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%);
--t-fast:110ms;--t:180ms;--t-slow:260ms;--ease:cubic-bezier(.2,.9,.25,1.15);--ease-out:cubic-bezier(.16,1,.3,1);
--stripe:repeating-linear-gradient(135deg,transparent 0 14px,rgba(9,9,11,.045) 14px 28px);
--halftone:radial-gradient(circle,rgba(9,9,11,.22) 1.3px,transparent 1.5px) 0 0/8px 8px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:#000;overflow:hidden}
body{font-family:var(--font-cond);-webkit-font-smoothing:antialiased;color:var(--ink)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
a{color:var(--soul-purple);text-decoration:none}a:hover{color:var(--soul-orange)}
::selection{background:var(--soul-orange);color:var(--ink)}

/* ---------- type ---------- */
.d{font-family:var(--font-display);font-weight:400;text-transform:uppercase;line-height:.9;letter-spacing:.01em}
.s{font-family:var(--font-cond);font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.u{font-family:var(--font-mono);font-size:12px;text-transform:uppercase;letter-spacing:.08em}
.mut{opacity:.62}

/* ---------- panels ---------- */
.cp{position:relative;background:var(--paper);border:var(--b) solid var(--ink);box-shadow:var(--shadow);color:var(--ink)}
.cp.stripe{background:var(--stripe),var(--paper)}
.cp.clip{clip-path:var(--clip);box-shadow:none;filter:drop-shadow(6px 6px 0 var(--ink))}
.cp.flat{box-shadow:none}
.cp .ht{position:absolute;inset:0;background:var(--halftone);opacity:.35;pointer-events:none;mask:linear-gradient(160deg,transparent 40%,#000 100%)}
.dp{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.03),transparent 40%),var(--char);border:2px solid var(--ink);color:var(--paper);box-shadow:var(--shadow)}
.dp::after{content:"";position:absolute;inset:0;background:url("/demo/assets/noise.svg") 0 0/200px;opacity:.12;mix-blend-mode:overlay;pointer-events:none}
.ph{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;border-bottom:var(--b) solid var(--ink)}
.dp .ph{border-color:rgba(255,255,255,.12)}
.ph .d{font-size:24px}

/* ---------- buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;
font-family:var(--font-display);font-size:20px;letter-spacing:.03em;text-transform:uppercase;
background:var(--paper);color:var(--ink);border:var(--b) solid var(--ink);box-shadow:var(--shadow-sm);
transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast),background var(--t-fast);white-space:nowrap}
.btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.btn:active,.btn.pressed{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}
.btn.pri{background:var(--soul-orange)}
.btn.pri::before{content:"";position:absolute;left:0;top:0;bottom:0;width:8px;background:var(--soul-purple)}
.btn.pri{padding-left:30px}
.btn.ink{background:var(--ink);color:var(--paper);border-color:var(--ink);box-shadow:3px 3px 0 var(--soul-orange)}
.btn.p1c{background:var(--p1)}.btn.p2c{background:var(--p2)}
.btn.ok{background:#8fd19e}
.btn.sm{min-height:36px;font-size:15px;padding:0 14px}
.btn.sm.pri{padding-left:22px}.btn.sm.pri::before{width:6px}
.btn.lg{min-height:64px;font-size:30px;padding:0 34px}
.btn.lg.pri{padding-left:44px}.btn.lg.pri::before{width:12px}
.btn[disabled],.btn.dis{background:repeating-linear-gradient(135deg,#cfc9b8 0 6px,#c4bda9 6px 7px);color:rgba(9,9,11,.45);box-shadow:none;cursor:not-allowed;filter:saturate(0)}
.btn[disabled]:hover{transform:none}
.btn.on{background:var(--ink);color:var(--paper)}
.icon-btn{color:var(--ink);width:44px;height:44px;display:grid;place-items:center;border:2px solid var(--ink);background:var(--paper);box-shadow:var(--shadow-sm);transition:transform var(--t-fast) var(--ease)}
.icon-btn:hover{transform:translate(-1px,-1px)}
.icon-btn svg{width:20px;height:20px}

/* ---------- focus: loud, controller-grade ---------- */
:focus{outline:none}
:focus-visible,.kbd-nav .focusable:focus{outline:4px solid var(--soul-orange)!important;outline-offset:3px;z-index:3}
.btn:focus-visible,.tile:focus-visible{transform:translate(-2px,-2px) scale(1.03);box-shadow:6px 6px 0 var(--soul-purple)}

/* ---------- chips / tabs ---------- */
.chip{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;border:2px solid var(--ink);background:var(--paper);
font-family:var(--font-cond);font-weight:600;font-size:14px;letter-spacing:.08em;text-transform:uppercase;transition:all var(--t-fast)}
.chip:hover{background:var(--paper-2)}
.chip.on{background:var(--ink);color:var(--paper);box-shadow:3px 3px 0 var(--soul-orange)}
.tabs{position:relative;display:flex;gap:0;border-bottom:var(--b) solid var(--ink)}
.tab{position:relative;padding:10px 20px 12px;font-family:var(--font-cond);font-weight:700;font-size:17px;letter-spacing:.1em;text-transform:uppercase;opacity:.55;transition:opacity var(--t-fast)}
.tab:hover{opacity:.85}
.tab.on{opacity:1}
.tabs .bar{position:absolute;bottom:-3px;height:6px;background:var(--ink);transition:left var(--t) var(--ease-out),width var(--t) var(--ease-out)}
.tabs .bar::after{content:"";position:absolute;inset:0;transform:translate(4px,-3px);background:var(--soul-orange);z-index:-1}
.on-dark .tabs{border-color:rgba(238,233,217,.25)}
.on-dark .tabs .bar{background:var(--paper)}
.on-dark .tab{color:var(--paper)}

/* ---------- badges / tags ---------- */
.tag{display:inline-flex;align-items:center;height:22px;padding:0 8px;font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border:1.5px solid currentColor}
.tag.fill{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.tag.or{background:var(--soul-orange);color:var(--ink);border-color:var(--ink)}
.tag.pu{background:var(--soul-purple);color:#fff;border-color:var(--ink)}
.tag.gr{background:#8fd19e;color:var(--ink);border-color:var(--ink)}
.tag.rd{background:var(--p2);color:var(--ink);border-color:var(--ink)}
.dot{width:9px;height:9px;border-radius:50%;background:var(--ok);display:inline-block;border:1.5px solid var(--ink)}

/* ---------- inputs ---------- */
.inp{color:var(--ink);height:48px;padding:0 14px;border:var(--b) solid var(--ink);background:var(--paper-2);font-family:var(--font-cond);font-size:18px;font-weight:500;letter-spacing:.04em;width:100%}
.inp::placeholder{color:rgba(9,9,11,.4);text-transform:uppercase}
.inp:focus{box-shadow:4px 4px 0 var(--soul-orange)}
.tog{position:relative;width:62px;height:30px;border:2px solid var(--ink);background:var(--paper-3);flex:0 0 auto}
.tog::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;background:var(--ink);transition:left var(--t) var(--ease)}
.tog.on{background:var(--soul-orange)}.tog.on::after{left:35px}
.range{-webkit-appearance:none;appearance:none;width:100%;height:10px;background:var(--paper-3);border:2px solid var(--ink)}
.range::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:26px;background:var(--ink);border:2px solid var(--paper);cursor:pointer}

/* ---------- striped portrait placeholder (character-select DNA) ---------- */
.port{position:relative;overflow:hidden;border:var(--b) solid var(--ink);background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--c,#888) 18%,var(--paper-2)) 0 16px,color-mix(in srgb,var(--c,#888) 8%,var(--paper-2)) 16px 32px)}
.port .pn{position:absolute;left:0;right:0;bottom:12%;text-align:center;font-family:var(--font-display);font-style:italic;color:var(--ink);text-shadow:3px 3px 0 color-mix(in srgb,var(--c,#888) 55%,transparent);white-space:nowrap}
.port .pl{position:absolute;left:10px;top:8px;font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;color:rgba(9,9,11,.5);text-transform:uppercase}
.port.dark{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--c,#888) 16%,#0c0d11) 0 16px,color-mix(in srgb,var(--c,#888) 8%,#0c0d11) 16px 32px);border-color:var(--ink)}
.port.dark .pn{color:#fff;text-shadow:0 2px 16px rgba(0,0,0,.6),3px 3px 0 color-mix(in srgb,var(--c,#888) 60%,transparent)}
.port.dark .pl{color:rgba(255,255,255,.4)}
.port.round{border-radius:50%}

/* ---------- SOUL rating ---------- */
.soul{position:relative;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;isolation:isolate}
.soul .aura{position:absolute;inset:-18% -30%;z-index:-1;background:var(--soul-grad);clip-path:polygon(6% 22%,30% 4%,62% 12%,96% 2%,88% 40%,100% 74%,70% 92%,38% 86%,8% 98%,14% 62%,0 44%);filter:drop-shadow(0 0 14px rgba(255,138,78,.45)) drop-shadow(4px 4px 0 var(--ink))}
.soul .sl{font-family:var(--font-cond);font-weight:700;letter-spacing:.28em;font-size:.2em;color:#fff;line-height:1;padding-left:.28em}
.soul .sv{font-family:var(--font-display);line-height:.88;color:#fff;text-shadow:3px 3px 0 var(--ink)}
.soul.flat .aura{filter:drop-shadow(3px 3px 0 var(--ink))}

/* ---------- attribute bar ---------- */
.attr{display:grid;grid-template-columns:44px 1fr 34px;align-items:center;gap:10px}
.attr .ak{font-family:var(--font-cond);font-weight:700;font-size:14px;letter-spacing:.12em}
.attr .at{height:12px;border:2px solid var(--ink);background:var(--paper-3);position:relative;overflow:hidden}
.attr .af{position:absolute;inset:0 auto 0 0;background:var(--c,var(--ink));transition:width .5s var(--ease-out)}
.attr .af::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,transparent 0 4px,rgba(0,0,0,.14) 4px 6px)}
.attr .av{font-family:var(--font-display);font-size:20px;text-align:right}
.on-dark .attr .at{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.3)}

/* ---------- stat block ---------- */
.stat{display:flex;flex-direction:column;gap:2px}
.stat .sk{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;opacity:.6;text-transform:uppercase}
.stat .sv{font-family:var(--font-display);font-size:34px;line-height:.95}

/* ---------- tiles ---------- */
.tile{position:relative;text-align:left;transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast),filter var(--t-fast)}
.tile:hover{transform:translate(-2px,-2px)}
.tile:active{transform:translate(2px,2px)}

/* ---------- keys legend ---------- */
.kb{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 6px;border:2px solid currentColor;font-family:var(--font-mono);font-size:11px;font-weight:700}

@keyframes slamIn{0%{transform:translateX(-40px) skewX(-12deg);opacity:0}60%{transform:translateX(6px) skewX(-4deg);opacity:1}100%{transform:none;opacity:1}}
@keyframes riseIn{0%{transform:translateY(26px);opacity:0}100%{transform:none;opacity:1}}
@keyframes popIn{0%{transform:scale(.82);opacity:0}70%{transform:scale(1.04);opacity:1}100%{transform:none}}
@keyframes shake{0%,100%{transform:none}25%{transform:translate(-3px,1px)}50%{transform:translate(3px,-1px)}75%{transform:translate(-2px,0)}}
@media (prefers-reduced-motion:reduce){*{animation-duration:1ms!important;transition-duration:1ms!important}}


/* ═════ shell.css ═════ */
/* shell.css — stage, AppShell, nav, HUD, environments, shared composites, transitions, mobile. */
.viewport{position:fixed;inset:0;background:#000;overflow:hidden}
.stage-root{position:absolute;left:0;top:0;width:1600px;height:900px;transform-origin:0 0;overflow:hidden;background:var(--paper);--navw:250px}
.shell.m .stage-root{--navw:0px}

/* ---------- environment scene (CSS stand-in for painted court art) ---------- */
.env{position:absolute;inset:0;overflow:hidden;
--sky1:#9ec1d3;--sky2:#dfe3d6;--sky3:#efe6cb;--far:#8f978e;--far2:#a7ab9f;--tree1:#4c5c3c;--tree2:#6d7c4e;--floor1:#6a7560;--floor2:#4f5947;--key:#8A4536;--line:rgba(238,233,217,.55);--light:rgba(255,236,190,.35);--fence:rgba(40,44,40,.42)}
.env.tod-sunset{--sky1:#57597e;--sky2:#d98d62;--sky3:#f0c890;--far:#5d5157;--far2:#7a676a;--tree1:#343c2e;--tree2:#4d5439;--floor1:#5e5a4f;--floor2:#45433b;--key:#8b4332;--light:rgba(255,160,90,.34);--fence:rgba(30,26,26,.5)}
.env.tod-cloudy{--sky1:#9aa4a6;--sky2:#c9cbc3;--sky3:#dedbd0;--far:#7f857f;--far2:#9a9e97;--tree1:#465341;--tree2:#5f6c50;--floor1:#626a5c;--floor2:#4b5247;--light:rgba(255,255,255,.12)}
.env.tod-night{--sky1:#131a28;--sky2:#2a3346;--sky3:#3d4658;--far:#202631;--far2:#2d3440;--tree1:#172017;--tree2:#222d20;--floor1:#2e3530;--floor2:#222823;--key:#5a2e25;--line:rgba(238,233,217,.35);--light:rgba(255,220,150,.22);--fence:rgba(0,0,0,.55)}
.env-sky{position:absolute;inset:0 0 40% 0;background:linear-gradient(180deg,var(--sky1) 0%,var(--sky2) 62%,var(--sky3) 100%)}
.env-sky::after{content:"";position:absolute;inset:0;background:radial-gradient(40% 30% at 22% 30%,rgba(255,255,255,.35),transparent 70%),radial-gradient(30% 18% at 70% 18%,rgba(255,255,255,.28),transparent 70%)}
.env-far{position:absolute;left:0;right:0;top:26%;height:22%;
background:linear-gradient(var(--far),var(--far)) 4% 100%/9% 70% no-repeat,linear-gradient(var(--far2),var(--far2)) 13% 100%/7% 48% no-repeat,linear-gradient(var(--far),var(--far)) 21% 100%/11% 88% no-repeat,linear-gradient(var(--far2),var(--far2)) 58% 100%/8% 60% no-repeat,linear-gradient(var(--far),var(--far)) 67% 100%/12% 96% no-repeat,linear-gradient(var(--far2),var(--far2)) 81% 100%/7% 52% no-repeat,linear-gradient(var(--far),var(--far)) 90% 100%/10% 74% no-repeat;opacity:.85}
.env-far::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 10px,rgba(255,240,200,.18) 10px 13px,transparent 13px 26px) 0 0/100% 40%;mask:linear-gradient(transparent 20%,#000 30%,#000 90%,transparent);opacity:.5}
.env-trees{position:absolute;left:-4%;right:-4%;top:34%;height:22%;
background:radial-gradient(9% 60% at 6% 70%,var(--tree1) 60%,transparent 62%),radial-gradient(8% 50% at 15% 80%,var(--tree2) 60%,transparent 62%),radial-gradient(12% 70% at 30% 85%,var(--tree1) 60%,transparent 62%),radial-gradient(7% 45% at 44% 92%,var(--tree2) 60%,transparent 62%),radial-gradient(10% 60% at 76% 88%,var(--tree1) 60%,transparent 62%),radial-gradient(9% 70% at 88% 78%,var(--tree2) 60%,transparent 62%),radial-gradient(10% 55% at 98% 84%,var(--tree1) 60%,transparent 62%)}
.env-fence{position:absolute;left:0;right:0;top:40%;height:21%;
background:repeating-linear-gradient(45deg,transparent 0 10px,var(--fence) 10px 11.4px),repeating-linear-gradient(-45deg,transparent 0 10px,var(--fence) 10px 11.4px);
border-top:4px solid rgba(60,62,58,.7);box-shadow:inset 0 -3px 0 rgba(0,0,0,.25)}
.env-fence::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 calc(12.5% - 3px),rgba(70,72,68,.75) calc(12.5% - 3px) 12.5%)}
.env-fence .ivy{position:absolute;inset:0;background:radial-gradient(10% 70% at 3% 60%,rgba(52,74,40,.95) 50%,transparent 55%),radial-gradient(7% 50% at 11% 88%,rgba(70,92,48,.9) 50%,transparent 55%),radial-gradient(6% 40% at 27% 96%,rgba(52,74,40,.85) 50%,transparent 55%),radial-gradient(9% 60% at 91% 70%,rgba(52,74,40,.95) 50%,transparent 55%),radial-gradient(6% 45% at 99% 40%,rgba(70,92,48,.9) 50%,transparent 55%)}
.env-floor{position:absolute;left:-30%;right:-30%;bottom:0;height:40%;clip-path:polygon(22% 0,78% 0,100% 100%,0 100%);
background:radial-gradient(60% 80% at 50% 0,rgba(255,255,255,.06),transparent),linear-gradient(180deg,var(--floor1),var(--floor2))}
.env-floor::before{content:"";position:absolute;inset:0;background:url("/demo/assets/noise.svg") 0 0/180px;opacity:.28;mix-blend-mode:overlay}
.env-key{position:absolute;left:42%;right:42%;top:0;height:58%;background:var(--key);opacity:.62;clip-path:polygon(18% 0,82% 0,100% 100%,0 100%);box-shadow:inset 0 0 0 3px var(--line)}
.env-arc{position:absolute;left:34%;right:34%;top:-26%;height:118%;border:3px solid var(--line);border-top:0;border-radius:0 0 50% 50%;opacity:.8}
.env-cracks{position:absolute;inset:0;background:linear-gradient(28deg,transparent 49.6%,rgba(0,0,0,.35) 49.8% 50.2%,transparent 50.4%) 20% 60%/18% 30% no-repeat,linear-gradient(-14deg,transparent 49.5%,rgba(0,0,0,.3) 49.8% 50.2%,transparent 50.5%) 64% 76%/22% 20% no-repeat,linear-gradient(62deg,transparent 49.5%,rgba(70,92,48,.6) 49.7% 50.3%,transparent 50.5%) 58% 30%/8% 26% no-repeat}
.env-hoop{position:absolute;left:50%;top:22%;transform:translateX(-50%);width:170px;height:320px;opacity:.92}
.env-hoop .bb{position:absolute;left:0;right:0;top:0;height:104px;background:linear-gradient(160deg,rgba(236,232,220,.8),rgba(196,190,176,.8));border:5px solid rgba(70,70,66,.9);box-shadow:inset 0 0 0 20px transparent}
.env-hoop .bb::after{content:"";position:absolute;left:34%;right:34%;bottom:10px;height:36px;border:4px solid rgba(150,60,40,.7);border-radius:1px;background:radial-gradient(40% 40% at 70% 30%,rgba(120,70,40,.35),transparent)}
.env-hoop .rim{position:absolute;left:28%;right:28%;top:98px;height:12px;border:4px solid #a4502e;border-radius:50%;border-top-color:#c0643b}
.env-hoop .rim::after{content:"";position:absolute;left:4%;right:4%;top:6px;height:40px;background:repeating-linear-gradient(60deg,transparent 0 6px,rgba(240,236,224,.6) 6px 7.5px),repeating-linear-gradient(-60deg,transparent 0 6px,rgba(240,236,224,.6) 6px 7.5px);clip-path:polygon(0 0,100% 0,82% 100%,18% 100%)}
.env-hoop .pole{position:absolute;left:calc(50% - 7px);top:104px;width:14px;bottom:0;background:linear-gradient(90deg,#4e514d,#6f726c 40%,#3b3d3a)}
.env-light{position:absolute;inset:0;background:radial-gradient(70% 60% at 78% 10%,var(--light),transparent 70%);mix-blend-mode:screen;pointer-events:none}
.env.tod-night .env-light{background:radial-gradient(22% 40% at 50% 36%,var(--light),transparent 70%)}
.env-art{position:absolute!important;inset:0;width:100%!important;height:100%!important;aspect-ratio:auto!important;z-index:1;pointer-events:none;color:#fff}
.env-art:not([data-filled])::part(frame){background:transparent}
.env-art:not([data-filled])::part(empty),.env-art:not([data-filled])::part(ring){opacity:0;transition:opacity .15s}
.env.art-mode .env-art{pointer-events:auto}
.env.art-mode .env-art:not([data-filled])::part(empty),.env.art-mode .env-art:not([data-filled])::part(ring){opacity:1}
.env-scrim{position:absolute;inset:0;z-index:2;pointer-events:none}
.env.dim-soft .env-scrim{background:linear-gradient(180deg,transparent 40%,rgba(9,9,11,.45))}
.env.dim-left .env-scrim{background:linear-gradient(90deg,rgba(9,9,11,.82) 0%,rgba(9,9,11,.55) 34%,transparent 62%),linear-gradient(0deg,rgba(9,9,11,.55),transparent 34%)}
.env.dim-bottom .env-scrim{background:linear-gradient(0deg,rgba(9,9,11,.88) 0%,rgba(9,9,11,.4) 40%,transparent 70%),linear-gradient(180deg,rgba(9,9,11,.4),transparent 20%)}
.env.dim-heavy .env-scrim{background:rgba(9,9,11,.62)}
.env.dim-hero .env-scrim{background:linear-gradient(90deg,rgba(9,9,11,.85) 0%,rgba(9,9,11,.35) 40%,transparent 60%,rgba(9,9,11,.5) 100%),linear-gradient(0deg,rgba(9,9,11,.7),transparent 30%)}
.env>*:not(.env-art):not(.env-scrim):not(.env-sky):not(.env-far):not(.env-trees):not(.env-fence):not(.env-floor):not(.env-hoop):not(.env-light){position:relative;z-index:3}

/* ---------- screen frame ---------- */
.scr{position:absolute;inset:0;display:flex;flex-direction:column;padding:28px 40px 32px calc(var(--navw) + 40px);overflow:hidden}
.scr-bg{position:absolute;inset:0;z-index:0}
.scr-bg.paper{background:var(--stripe),radial-gradient(120% 90% at 70% 0%,var(--paper-2),var(--paper) 55%,var(--paper-3))}
.scr-bg.paper::after{content:"";position:absolute;inset:0;background:url("/demo/assets/noise.svg") 0 0/220px;opacity:.16;mix-blend-mode:multiply}
.scr-bg.ink{background:radial-gradient(120% 90% at 60% 0%,#1d1b20,#0d0c0f 60%,#060607)}
.scr-bg.ink::after{content:"";position:absolute;inset:0;background:url("/demo/assets/noise.svg") 0 0/220px;opacity:.1;mix-blend-mode:overlay}
.scr>:where(:not(.scr-bg)){position:relative;z-index:2}
.scr.on-dark{color:var(--paper)}
.scr-body{flex:1;min-height:0;display:flex;flex-direction:column}
.scroll-y{overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--ink) transparent}
.scroll-x{overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}
.on-dark .scroll-y{scrollbar-color:rgba(238,233,217,.4) transparent}

.shead{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;min-height:104px;padding-right:540px;margin-bottom:18px}
.shead.small{min-height:84px}
.sh-l{display:flex;align-items:flex-end;gap:20px;min-width:0}
.sh-back{display:flex;align-items:center;gap:6px;height:44px;padding:0 14px 0 8px;border:var(--b) solid var(--ink);background:var(--paper);box-shadow:var(--shadow-sm);font-family:var(--font-cond);font-weight:700;letter-spacing:.12em;font-size:14px;margin-bottom:6px;color:var(--ink);transition:transform var(--t-fast) var(--ease)}
.sh-back:hover{transform:translateX(-3px)}
.sh-k{margin-bottom:6px;opacity:.7}
.sh-h{font-size:84px;animation:slamIn var(--t-slow) var(--ease) both;white-space:nowrap}
.shead.small .sh-h{font-size:64px}
.sh-s{margin-top:8px;font-family:var(--font-cond);font-size:18px;letter-spacing:.04em;opacity:.72;max-width:720px;text-wrap:pretty}
.sh-r{display:flex;gap:10px;align-items:center;margin-bottom:6px}
.on-dark .sh-h{color:var(--paper);text-shadow:4px 4px 0 var(--ink)}

/* ---------- nav rail ---------- */
.nav{position:absolute;left:0;top:0;bottom:0;width:var(--navw);z-index:40;display:flex;flex-direction:column;padding:26px 0 22px;color:var(--paper)}
.nav::before{content:"";position:absolute;inset:0 -26px 0 0;background:var(--ink);clip-path:polygon(0 0,100% 0,calc(100% - 26px) 100%,0 100%);z-index:-1;box-shadow:inset -3px 0 0 var(--soul-orange)}
.nav::after{content:"";position:absolute;inset:0;background:url("/demo/assets/noise.svg") 0 0/200px;opacity:.1;mix-blend-mode:overlay;pointer-events:none;z-index:-1}
.logo{display:flex;flex-direction:column;align-items:flex-start;padding:0 26px 22px;line-height:.82}
.logo .l1{font-family:var(--font-display);font-size:50px;color:var(--paper);letter-spacing:.01em}
.logo .l2{font-family:var(--font-display);font-size:50px;background:var(--soul-grad);-webkit-background-clip:text;background-clip:text;color:transparent;transform:skewX(-8deg) translateX(18px)}
.nav-list{display:flex;flex-direction:column;gap:2px;flex:1}
.nav-i{position:relative;display:flex;align-items:center;gap:12px;height:54px;padding:0 26px;font-family:var(--font-display);font-size:30px;letter-spacing:.02em;color:rgba(238,233,217,.62);transition:transform var(--t) var(--ease),color var(--t-fast);text-align:left}
.nav-i .ni-k{font-family:var(--font-mono);font-size:10px;opacity:.5;width:18px}
.nav-i:hover{color:var(--paper);transform:translateX(6px)}
.nav-i.on{color:var(--ink);transform:translateX(14px)}
.nav-i.on::before{content:"";position:absolute;inset:4px -34px 4px 8px;background:var(--paper);clip-path:polygon(0 0,100% 0,calc(100% - 14px) 100%,0 100%);box-shadow:none;z-index:-1;animation:navIn var(--t) var(--ease-out) both}
.nav-i.on::after{content:"";position:absolute;left:8px;top:4px;bottom:4px;width:8px;background:var(--soul-orange)}
.nav-i.on .ni-k{opacity:.8}
@keyframes navIn{0%{clip-path:polygon(0 0,0 0,0 100%,0 100%)}100%{clip-path:polygon(0 0,100% 0,calc(100% - 14px) 100%,0 100%)}}
.nav-sec{display:flex;flex-direction:column;gap:0;padding:10px 26px 0;border-top:1px solid rgba(238,233,217,.12);margin:0 26px 0 0}
.nav-s{display:flex;justify-content:space-between;align-items:center;height:32px;font-family:var(--font-cond);font-weight:600;font-size:14px;letter-spacing:.14em;color:rgba(238,233,217,.55);text-align:left;transition:color var(--t-fast),transform var(--t-fast)}
.nav-s:hover{color:var(--paper);transform:translateX(4px)}
.nav-s.on{color:var(--soul-orange)}
.nav-s .cnt{font-family:var(--font-mono);font-size:10px;background:var(--p2);color:var(--ink);padding:1px 5px}
.nav-legend{padding:14px 26px 0;display:flex;gap:10px;flex-wrap:wrap;color:rgba(238,233,217,.4);font-family:var(--font-mono);font-size:10px;letter-spacing:.08em}
.nav-legend span{display:flex;align-items:center;gap:5px}
.nav-legend .kb{height:18px;min-width:18px;font-size:9px;border-width:1.5px}

/* ---------- player HUD ---------- */
.hud{position:absolute;top:24px;right:32px;z-index:45;display:flex;align-items:stretch;gap:10px}
.hud-card{display:flex;align-items:center;gap:12px;height:64px;padding:0 16px 0 6px;background:var(--paper);border:var(--b) solid var(--ink);box-shadow:var(--shadow-sm);clip-path:polygon(0 0,100% 0,100% 100%,14px 100%,0 calc(100% - 14px));transition:transform var(--t-fast) var(--ease)}
.hud-card:hover{transform:translateY(-2px)}
.hud-card .av{border-width:2px}
.hud-id{display:flex;flex-direction:column;align-items:flex-start;line-height:1}
.hud-id b{font-family:var(--font-display);font-size:24px;font-weight:400;letter-spacing:.02em}
.hud-id i{font-style:normal;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;opacity:.65;margin-top:4px}
.hud-xp{width:110px;height:6px;background:var(--paper-3);border:1.5px solid var(--ink);margin-top:5px;position:relative}
.hud-xp span{position:absolute;inset:0 auto 0 0;background:var(--soul-orange)}
.hud .soul{margin:0 2px}
.hud-icons{display:flex;gap:8px;align-items:center}
.icon-btn{position:relative}
.icon-btn.on{background:var(--ink);color:var(--paper)}
.ib-badge{position:absolute;top:-8px;right:-8px;min-width:20px;height:20px;padding:0 5px;background:var(--p2);border:2px solid var(--ink);font-family:var(--font-mono);font-size:10px;font-weight:700;display:grid;place-items:center;color:var(--ink)}

/* ---------- avatars / chips ---------- */
.av{display:inline-grid;place-items:center;flex:0 0 auto;border:2px solid var(--ink);background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--c) 45%,var(--paper-2)) 0 5px,color-mix(in srgb,var(--c) 26%,var(--paper-2)) 5px 10px);font-family:var(--font-display);color:var(--ink);letter-spacing:0;clip-path:polygon(0 0,100% 0,100% 78%,78% 100%,0 100%)}
.pchip{display:flex;align-items:center;gap:12px;width:100%;padding:8px 10px;border:2px solid var(--ink);background:var(--paper-2);text-align:left;transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast)}
.pchip:hover{transform:translateX(3px);box-shadow:-4px 0 0 var(--soul-orange)}
.pc-t{flex:1;display:flex;flex-direction:column;line-height:1.05;min-width:0}
.pc-t b{font-family:var(--font-display);font-size:20px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-t i{font-style:normal;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;opacity:.6}
.pc-ovr{font-family:var(--font-display);font-size:26px}

/* ---------- seg / toggles ---------- */
.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg-o{min-height:44px;padding:0 18px;border:var(--b) solid var(--ink);background:var(--paper-2);font-family:var(--font-display);font-size:20px;letter-spacing:.03em;transition:all var(--t-fast) var(--ease)}
.seg-o:hover{transform:translateY(-2px)}
.seg-o.on{background:var(--ink);color:var(--paper);box-shadow:4px 4px 0 var(--soul-orange);transform:translate(-2px,-2px)}
.seg.big .seg-o{min-height:72px;min-width:110px;font-size:32px}
.tog-row{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:52px;padding:0 4px;border-bottom:1.5px solid var(--paper-line);font-family:var(--font-cond);font-weight:600;font-size:17px;letter-spacing:.08em;text-align:left}

/* ---------- stepper ---------- */
.stepper{display:flex;flex-direction:column;gap:6px}
.stp{display:flex;align-items:center;gap:14px;height:54px;padding:0 16px;border:2px solid transparent;text-align:left;transition:all var(--t-fast) var(--ease);color:inherit}
.stp-n{font-size:28px;opacity:.35;width:40px}
.stp-l{font-family:var(--font-cond);font-weight:700;font-size:18px;letter-spacing:.16em;opacity:.6}
.stp:hover{transform:translateX(4px)}
.stp.done .stp-n{opacity:.7;color:var(--soul-orange)}
.stp.done .stp-l{opacity:.85}
.stp.on{background:var(--paper);border-color:var(--ink);color:var(--ink);box-shadow:5px 5px 0 var(--soul-orange);transform:translateX(10px)}
.stp.on .stp-n,.stp.on .stp-l{opacity:1}

/* ---------- run card ---------- */
.runcard{display:flex;flex-direction:column;overflow:hidden;min-width:0}
.rc-env{position:relative;height:130px;border-bottom:var(--b) solid var(--ink);overflow:hidden}
.rc-env .env-hoop{transform:translateX(-50%) scale(.42);transform-origin:50% 0;top:8%}
.rc-fmt{position:absolute;left:12px;bottom:8px;font-size:40px;color:var(--paper);text-shadow:3px 3px 0 var(--ink);z-index:4}
.rc-j{position:absolute;right:10px;top:10px;z-index:4}
.rc-b{padding:12px 14px 14px;display:flex;flex-direction:column;gap:8px}
.rc-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.rc-court{font-size:30px}.rc-time{font-size:26px;color:var(--soul-purple)}
.rc-meta{display:flex;gap:14px;opacity:.65;font-size:11px}
.rc-slots{display:flex;align-items:center;gap:4px}
.rc-slots .slot{width:16px;height:16px;border:2px solid var(--ink);background:transparent;transform:skewX(-12deg)}
.rc-slots .slot.f{background:var(--ink)}
.runcard.joined .rc-slots .slot.f:last-of-type{background:var(--soul-orange)}
.rc-slots b{margin-left:8px;font-size:12px}
.rc-host{display:flex;align-items:center;gap:8px;font-size:11px}
.rc-host b{font-family:var(--font-cond);font-size:14px;letter-spacing:.06em}
.rc-host .tag{margin-left:auto}
.rc-act{display:flex;gap:8px;margin-top:2px}
.runcard.joined{box-shadow:6px 6px 0 var(--soul-orange)}

/* ---------- jam media ---------- */
.jam-media{position:relative;overflow:hidden;border:var(--b) solid var(--ink);background:#222;aspect-ratio:16/10}
.jam-media.big{aspect-ratio:auto;height:100%}
.jam-media .port{z-index:3}
.jm-lines{position:absolute;inset:0;z-index:4;pointer-events:none;background:repeating-conic-gradient(from 0deg at 50% 60%,rgba(255,255,255,.18) 0 .5deg,transparent .5deg 6deg);mask:radial-gradient(circle at 50% 60%,transparent 0 30%,#000 70%);opacity:.6}
.jm-kind{position:absolute;left:12px;top:12px;z-index:6}
.jm-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-4deg);z-index:7;width:74px;height:74px;display:grid;place-items:center;background:var(--soul-orange);border:var(--b) solid var(--ink);box-shadow:5px 5px 0 var(--ink);color:var(--ink);transition:transform var(--t-fast) var(--ease)}
.jam-media.big .jm-play{width:110px;height:110px}
.jm-play:hover{transform:translate(-50%,-50%) rotate(0) scale(1.08)}
.jm-pause{width:22px;height:26px;border-left:8px solid var(--ink);border-right:8px solid var(--ink)}
.jam-media .jm-play:has(.jm-pause){opacity:.0}
.jam-media:hover .jm-play:has(.jm-pause){opacity:1}
.jm-prog{position:absolute;left:0;right:0;bottom:0;height:8px;background:rgba(0,0,0,.5);z-index:7}
.jm-prog span{position:absolute;inset:0 auto 0 0;background:var(--soul-grad);animation:jamProg 9s linear infinite}
@keyframes jamProg{from{width:0}to{width:100%}}
.jm-slot{position:absolute!important;inset:0;width:100%!important;height:100%!important;aspect-ratio:auto!important;z-index:5;pointer-events:none;color:#fff}
.jm-slot:not([data-filled])::part(frame){background:transparent}
.jm-slot:not([data-filled])::part(empty),.jm-slot:not([data-filled])::part(ring){opacity:0}
.art-on .jm-slot{pointer-events:auto}.art-on .jm-slot:not([data-filled])::part(empty){opacity:1}

/* ---------- leaderboard ---------- */
.lrow{display:grid;grid-template-columns:70px 52px minmax(0,1fr) 70px 90px 60px 70px;align-items:center;gap:14px;width:100%;min-height:58px;padding:6px 18px;border-bottom:2px solid var(--ink);background:var(--paper-2);text-align:left;transition:transform var(--t-fast) var(--ease),background var(--t-fast)}
.lrow:hover{transform:translateX(6px);background:#fff}
.lr-rk{font-size:32px;opacity:.5}
.lr-n{font-size:26px;display:flex;align-items:center;gap:10px;white-space:nowrap;overflow:hidden}
.lr-n .tag{font-style:normal}
.lr-ovr{font-size:30px;text-align:right}
.lr-rec,.lr-st,.lr-mv{font-size:13px;text-align:right}
.lr-st.w{color:var(--ok)}.lr-st.l{color:var(--p2)}
.lr-mv.up{color:var(--ok)}.lr-mv.dn{color:var(--p2)}
.lrow.you{background:color-mix(in srgb,var(--soul-orange) 22%,var(--paper-2));box-shadow:inset 8px 0 0 var(--soul-orange)}
.lrow.top{min-height:78px}
.lrow.top .lr-rk{opacity:1;font-size:44px}
.lrow.top .lr-n{font-size:34px}
.lrow.t1 .lr-rk{color:var(--gold);-webkit-text-stroke:1.5px var(--ink)}
.lrow.t2 .lr-rk{color:#b9bcc2;-webkit-text-stroke:1.5px var(--ink)}
.lrow.t3 .lr-rk{color:#b8733d;-webkit-text-stroke:1.5px var(--ink)}

/* ---------- badges / crest ---------- */
.badge{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;transition:transform var(--t-fast) var(--ease)}
.badge:hover{transform:translateY(-4px) rotate(-2deg)}
.bd-em{position:relative;display:grid;place-items:center;clip-path:polygon(50% 0,93% 20%,100% 62%,74% 100%,26% 100%,0 62%,7% 20%);background:var(--ink)}
.bd-ring{position:absolute;inset:5px;clip-path:inherit;background:conic-gradient(from 200deg,var(--tc),color-mix(in srgb,var(--tc) 40%,#fff),var(--tc),color-mix(in srgb,var(--tc) 60%,#000),var(--tc))}
.bd-core{position:relative;display:grid;place-items:center;width:62%;height:62%;background:var(--ink);color:var(--paper);clip-path:inherit;font-size:28px}
.bd-core::after{content:"";position:absolute;inset:0;background:var(--halftone);opacity:.5;mix-blend-mode:screen}
.badge.locked .bd-ring{filter:grayscale(1) brightness(.7)}
.badge.locked .bd-core{color:rgba(238,233,217,.4)}
.bd-prog{position:absolute;inset:5px;clip-path:inherit;background:conic-gradient(var(--soul-orange) calc(var(--p) * 360deg),transparent 0);mask:radial-gradient(circle,transparent 58%,#000 60%)}
.bd-n{font-family:var(--font-display);font-size:17px;line-height:1;letter-spacing:.02em}
.bd-t{font-size:10px;opacity:.6}
.crest{display:inline-grid;place-items:center;flex:0 0 auto;background:var(--cc);color:var(--cc2);clip-path:polygon(0 0,100% 0,100% 70%,50% 100%,0 70%);filter:drop-shadow(3px 3px 0 var(--ink));position:relative}
.crest::before{content:"";position:absolute;inset:4px;clip-path:inherit;border:0;box-shadow:inset 0 0 0 3px var(--cc2);opacity:.6}
.crest .d{transform:translateY(-12%)}

/* ---------- modal / drawer / toast ---------- */
.modal-layer{position:absolute;inset:0;z-index:90;background:rgba(9,9,11,.62);display:grid;place-items:center;animation:fadeIn var(--t) both}
.modal{width:620px;max-width:calc(100% - 40px);max-height:calc(100% - 80px);display:flex;flex-direction:column;animation:popIn var(--t) var(--ease) both}
.modal.wide{width:960px}
.md-b{padding:18px;overflow:auto}
.md-a{display:flex;justify-content:flex-end;gap:10px;padding:14px 18px;border-top:var(--b) solid var(--ink)}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.drawer{position:absolute;top:0;right:0;bottom:0;width:520px;z-index:85;transform:translateX(105%);transition:transform var(--t) var(--ease-out);display:flex;flex-direction:column;background:var(--paper);border-left:var(--b-lg) solid var(--ink);box-shadow:-12px 0 0 rgba(9,9,11,.35)}
.drawer.open{transform:none}
.drawer-scrim{position:absolute;inset:0;z-index:84;background:rgba(9,9,11,.35);animation:fadeIn var(--t) both}
.toasts{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);z-index:95;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none}
.toast{padding:12px 22px 12px 30px;background:var(--ink);color:var(--paper);font-family:var(--font-display);font-size:22px;letter-spacing:.03em;position:relative;box-shadow:5px 5px 0 var(--soul-orange);animation:toastIn var(--t) var(--ease) both;clip-path:polygon(0 0,100% 0,calc(100% - 12px) 100%,0 100%)}
.toast::before{content:"";position:absolute;left:0;top:0;bottom:0;width:10px;background:var(--soul-orange)}
@keyframes toastIn{0%{transform:translateY(24px) skewX(-10deg);opacity:0}100%{transform:none;opacity:1}}

/* ---------- transitions: ink slash wipe ---------- */
.wipe{position:absolute;inset:0;z-index:80;pointer-events:none;overflow:hidden}
.wipe::before,.wipe::after{content:"";position:absolute;top:-10%;bottom:-10%;width:70%;left:-80%;transform:skewX(-18deg);animation:wipe 380ms cubic-bezier(.7,0,.2,1) both}
.wipe::before{background:var(--ink)}
.wipe::after{background:var(--soul-orange);width:10%;animation-delay:30ms}
@keyframes wipe{0%{left:-80%}100%{left:130%}}
.screen-in{animation:screenIn 300ms var(--ease-out) both}
@keyframes screenIn{0%{opacity:0;transform:translateX(26px)}40%{opacity:0}100%{opacity:1;transform:none}}
.screen-in .scr-bg .env,.screen-in>.scr>.scr-bg{animation:camPan 700ms var(--ease-out) both}
@keyframes camPan{0%{transform:scale(1.06) translateX(-18px)}100%{transform:none}}
.stagger>*{animation:riseIn 260ms var(--ease-out) both}
.stagger>*:nth-child(2){animation-delay:40ms}.stagger>*:nth-child(3){animation-delay:80ms}.stagger>*:nth-child(4){animation-delay:120ms}.stagger>*:nth-child(5){animation-delay:160ms}.stagger>*:nth-child(6){animation-delay:200ms}.stagger>*:nth-child(7){animation-delay:240ms}.stagger>*:nth-child(n+8){animation-delay:270ms}
.speedlines{position:absolute;inset:0;pointer-events:none;background:repeating-conic-gradient(from 0deg at 50% 50%,rgba(9,9,11,.9) 0 .7deg,transparent .7deg 5deg);mask:radial-gradient(circle,transparent 0 26%,#000 70%);opacity:.18}

/* ---------- in-game (character select iframe) ---------- */
.ingame{position:absolute;inset:0;z-index:50;background:#000}
.ingame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.ingame-bar{position:absolute;left:16px;top:16px;z-index:2;display:flex;gap:8px}

/* ---------- mobile companion ---------- */
.mnav{position:absolute;left:0;right:0;bottom:0;height:74px;z-index:45;display:grid;grid-template-columns:repeat(5,1fr);background:var(--ink);border-top:3px solid var(--soul-orange)}
.mnav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:rgba(238,233,217,.6);font-family:var(--font-cond);font-weight:700;font-size:11px;letter-spacing:.12em}
.mnav button b{font-family:var(--font-display);font-weight:400;font-size:20px;letter-spacing:.02em}
.mnav button.on{color:var(--ink);background:var(--paper);clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
.mtop{position:absolute;left:0;right:0;top:0;height:64px;z-index:45;display:flex;align-items:center;gap:10px;padding:0 14px;background:var(--ink);color:var(--paper)}
.mtop .logo{flex-direction:row;gap:6px;padding:0;flex:1}
.mtop .logo .l1,.mtop .logo .l2{font-size:28px;transform:none}
.mtop .icon-btn{width:40px;height:40px;background:var(--paper);color:var(--ink)}
.shell.m .scr{padding:82px 16px 92px;overflow-y:auto;display:block}
.shell.m .scr>.scr-body{display:block}
.shell.m .shead{padding-right:0;min-height:0;flex-wrap:wrap;margin-bottom:14px}
.shell.m .sh-h{font-size:48px;white-space:normal}
.shell.m .shead.small .sh-h{font-size:40px}
.shell.m .sh-r{flex-wrap:wrap}
.shell.m .drawer{width:100%}
.shell.m .scr-bg{position:fixed}
.shell.m .m-stack{display:flex!important;flex-direction:column!important;gap:14px!important;height:auto!important}
.shell.m .m-stack>*{width:auto!important;max-width:none!important;min-width:0!important;flex:none!important;height:auto!important}
.shell.m .m-1{grid-template-columns:minmax(0,1fr)!important;height:auto!important}
.shell.m .m-2{grid-template-columns:repeat(2,minmax(0,1fr))!important;height:auto!important}
.shell.m .m-hide{display:none!important}
.shell.m .scroll-y{overflow:visible}
.shell.m .lrow{grid-template-columns:40px 38px minmax(0,1fr) 44px 52px;gap:8px;padding:6px 10px}
.shell.m .lrow .lr-rec,.shell.m .lrow .lr-st{display:none}
.shell.m .lr-n,.shell.m .lrow.top .lr-n{font-size:20px}
.shell.m .lr-rk,.shell.m .lrow.top .lr-rk{font-size:24px}
.shell.m .modal{max-height:calc(100% - 120px)}

/* (design 2026-10-21) logo image, art backgrounds */
.logo img{display:block;width:190px;height:auto;filter:drop-shadow(0 3px 0 rgba(0,0,0,.4))}
.mtop .logo img{width:auto;height:48px}
.scr-bg.art{background:#0c0b0e;overflow:hidden}
.scr-bg.art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.scr-bg.art::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(9,9,11,.82),rgba(9,9,11,.5) 45%,rgba(9,9,11,.62)),linear-gradient(0deg,rgba(9,9,11,.7),transparent 40%)}
.port.has-art .port-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 4%;user-select:none}
.port.has-art.full{background:none;border:0;overflow:visible}
.port.has-art.full .port-art{object-fit:contain;object-position:50% 100%;filter:drop-shadow(0 18px 30px rgba(0,0,0,.55))}
.lk-sw.img{background:#141216;overflow:hidden}
.lk-sw.img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* the small tag on the logo (EARLY ACCESS / DEMO) */
.logo{position:relative}
.logo .ea-tag{position:absolute;right:26px;bottom:14px;transform:rotate(-6deg);padding:3px 9px;background:var(--soul-orange);color:var(--ink);border:2px solid var(--ink);font-family:var(--font-mono);font-weight:700;font-size:11px;letter-spacing:.14em;line-height:1.2}
.mtop .logo .ea-tag{position:static;transform:rotate(-4deg);margin-left:4px;font-size:10px;padding:2px 6px}


/* ═════ screens-a.css ═════ */
/* screens-a.css — Home, Play, Training, Open Runs, Run Detail, Create Run. */
.fans{display:flex;align-items:flex-end;gap:12px;pointer-events:none}
.fan{flex:1;position:relative;border:2px solid rgba(9,9,11,.8);border-bottom:0;border-radius:40px 40px 0 0;background:repeating-linear-gradient(135deg,rgba(40,38,44,.82) 0 8px,rgba(58,55,62,.82) 8px 16px);animation:fanBob 2.4s ease-in-out infinite;animation-delay:var(--d)}
.fan i{position:absolute;left:0;right:0;top:44%;text-align:center;font-style:normal;font-family:var(--font-mono);font-size:8.5px;letter-spacing:.08em;color:rgba(238,233,217,.5)}
@keyframes fanBob{0%,100%{transform:none}50%{transform:translateY(-3px)}}
.home-char{position:absolute;left:calc(var(--navw) + 700px);bottom:0;z-index:2}
.home-char .port{border-bottom:0}
.home-main{position:absolute;left:calc(var(--navw) + 56px);top:150px;width:600px;display:flex;flex-direction:column;gap:16px;z-index:3}
.home-k{color:var(--paper);display:flex;align-items:center;gap:8px;opacity:.85}
.home-play{position:relative;display:grid;grid-template-columns:1fr auto;align-items:end;padding:10px 30px 22px 44px;background:var(--soul-orange);border:var(--b-lg) solid var(--ink);box-shadow:10px 10px 0 var(--ink);text-align:left;clip-path:polygon(0 0,100% 0,calc(100% - 30px) 100%,0 100%);transition:transform var(--t) var(--ease);animation:slamIn var(--t-slow) var(--ease) both}
.home-play::before{content:"";position:absolute;left:0;top:0;bottom:0;width:16px;background:var(--soul-purple)}
.home-play:hover,.home-play:focus-visible{transform:translate(-4px,-4px) scale(1.02)}
.hp-t{font-size:170px;line-height:.86;grid-column:1}
.hp-s{grid-column:1;font-size:17px;letter-spacing:.18em}
.hp-arrow{grid-column:2;grid-row:1/3;font-size:90px;align-self:center;padding-right:24px}
.home-next{color:var(--ink);display:flex;flex-direction:column;gap:4px;align-items:flex-start;width:460px;padding:12px 16px;background:var(--paper);border:var(--b) solid var(--ink);box-shadow:var(--shadow-sm);text-align:left;transition:transform var(--t-fast) var(--ease)}
.home-next:hover{transform:translateX(6px)}
.home-next b{font-size:30px}
.home-next .u{font-size:10.5px;opacity:.65}
.home-tiles{position:absolute;right:32px;top:118px;width:340px;display:flex;flex-direction:column;gap:10px;z-index:3}
.htile{color:var(--ink);display:flex;align-items:center;gap:12px;min-height:78px;padding:10px 16px 10px 22px;background:var(--paper);border:var(--b) solid var(--ink);box-shadow:var(--shadow-sm)}
.htile::before{content:"";position:absolute;left:0;top:0;bottom:0;width:8px;background:var(--tc)}
.htile:hover,.htile:focus-visible{box-shadow:6px 6px 0 var(--tc)}
.ht-t{flex:1;display:flex;flex-direction:column;gap:4px;min-width:0}
.ht-t b{font-size:28px}
.ht-t i{font-style:normal;font-size:10.5px;opacity:.65;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ht-a{font-size:30px;transition:transform var(--t-fast)}
.htile:hover .ht-a{transform:translateX(4px)}
.home-strip{position:absolute;left:calc(var(--navw) + 56px);right:400px;bottom:30px;display:flex;align-items:center;gap:30px;padding:14px 26px;z-index:3}
.hs-id{display:flex;align-items:baseline;gap:12px;margin-right:auto}
.hs-n{font-size:42px}.hs-o{font-size:54px;color:var(--soul-purple)}
.modes{flex:1;min-height:0;display:flex;gap:10px}
.mode{flex:1;min-width:0;overflow:hidden;border:var(--b) solid var(--ink);background:#111;color:var(--paper);transition:flex var(--t-slow) var(--ease-out),box-shadow var(--t-fast)}
.mode.open{flex:3.4;box-shadow:0 0 0 3px var(--mc)}
.mode-art{position:absolute;inset:0;filter:saturate(.8) brightness(.85);transition:filter var(--t)}
.mode.open .mode-art{filter:none}
.mode::after{content:"";position:absolute;left:0;right:0;bottom:0;height:10px;background:var(--mc);z-index:4}
.mode-n{position:absolute;left:14px;top:12px;font-size:28px;z-index:5;color:var(--paper);text-shadow:2px 2px 0 var(--ink)}
.mode-v{position:absolute;left:50%;bottom:30px;z-index:5;writing-mode:vertical-rl;transform:translateX(-50%) rotate(180deg);font-size:40px;white-space:nowrap;text-shadow:3px 3px 0 var(--ink);transition:opacity var(--t-fast)}
.mode.open .mode-v{opacity:0}
.mode-info{position:absolute;left:22px;right:22px;bottom:30px;z-index:5;display:flex;flex-direction:column;align-items:flex-start;gap:10px;opacity:0;transform:translateY(16px);transition:all var(--t) var(--ease-out)}
.mode.open .mode-info{opacity:1;transform:none;transition-delay:80ms}
.mode-info b{font-size:64px;text-shadow:4px 4px 0 var(--ink);white-space:nowrap}
.mode-info p{font-size:18px;max-width:380px;text-wrap:pretty;text-shadow:0 1px 8px rgba(0,0,0,.8)}
.mode-go{font-size:24px;color:var(--mc);text-shadow:2px 2px 0 var(--ink)}
.train{flex:1;min-height:0;display:grid;grid-template-columns:300px minmax(0,1fr);gap:22px}
.train-cats{display:flex;flex-direction:column;gap:8px}
.tcat{display:flex;justify-content:space-between;align-items:center;min-height:70px;padding:0 18px;background:rgba(9,9,11,.7);border:var(--b) solid var(--ink);color:var(--paper)}
.tcat .d{font-size:32px}.tcat i{font-style:normal;opacity:.6}
.tcat.on{background:var(--paper);color:var(--ink);box-shadow:6px 6px 0 var(--soul-orange);transform:translateX(8px)}
.train-drills{align-self:start;display:flex;flex-direction:column}
.drill{display:flex;align-items:center;gap:18px;padding:16px 20px;border-bottom:2px solid var(--paper-line)}
.drill:last-child{border-bottom:0}
.dr-n{font-size:36px;opacity:.3;width:50px}
.dr-t{flex:1;display:flex;flex-direction:column;gap:4px}
.dr-t b{font-size:30px}.dr-t i{font-style:normal;opacity:.6}
.runs-filters{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:18px}
.runs-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;padding:4px 10px 20px 4px}
.empty-note{grid-column:1/-1;font-size:34px;padding:40px 0;opacity:.6}
.rd{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 460px;gap:30px}
.rd-l{display:flex;flex-direction:column;justify-content:flex-end;gap:20px;padding-bottom:10px}
.rd-facts{display:grid;grid-template-columns:repeat(4,auto);justify-content:start;gap:40px}
.rd-facts .sv{font-size:54px}
.rd-host{opacity:.85}
.lnk{font-family:var(--font-cond);font-weight:700;letter-spacing:.08em;color:var(--soul-orange);text-decoration:underline;text-underline-offset:3px}
.rd-act{display:flex;gap:12px;flex-wrap:wrap}
.rd-roster{display:flex;flex-direction:column;min-height:0}
.rd-slots{flex:1;display:flex;flex-direction:column;gap:6px;padding:12px}
.open-slot{display:grid;place-items:center;min-height:58px;border:2px dashed rgba(9,9,11,.35);opacity:.6}
.cr{flex:1;min-height:0;display:grid;grid-template-columns:260px minmax(0,1fr) 340px;gap:24px}
.cr-steps{color:var(--paper)}
.cr-main{display:flex;flex-direction:column;min-height:0}
.cr-body{flex:1;padding:22px;animation:riseIn var(--t) var(--ease-out) both}
.cr-courts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.cr-court{height:150px;overflow:hidden;border:var(--b) solid var(--ink);color:var(--paper)}
.cr-court .env-hoop{transform:translateX(-50%) scale(.4);transform-origin:50% 0}
.cr-court b{position:absolute;left:12px;bottom:26px;z-index:4;font-size:28px;text-shadow:2px 2px 0 var(--ink)}
.cr-court i{position:absolute;left:12px;bottom:8px;z-index:4;font-style:normal;font-size:10px}
.cr-court.on{box-shadow:0 0 0 4px var(--soul-orange),6px 6px 0 4px var(--ink)}
.cr-col{display:flex;flex-direction:column;gap:14px}
.cr-lab{opacity:.6;margin-top:6px}
.cr-big{font-size:120px;line-height:.85}
.cr-note{font-size:18px;opacity:.7}
.cr-confirm{font-size:52px;line-height:1}
.cr-prev .runcard{box-shadow:var(--shadow)}


/* ═════ screens-b.css ═════ */
/* screens-b.css — Challenge, Private, Crew game, Tournament, Lobby, Post-game, Profile, Locker, Progression, Lab, Discover, Court, Rankings, Crew, Messages, Settings. */
.cnt{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;background:var(--soul-orange);color:var(--ink);border:2px solid var(--ink);font-family:var(--font-mono);font-size:10px;font-weight:700}
.inp-wrap{display:flex;align-items:center;gap:8px;padding-left:12px;background:var(--paper-2);border:var(--b) solid var(--ink)}
.inp-wrap .inp{border:0;background:none}

/* challenge */
.chl{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 540px 320px;gap:24px;align-items:stretch}
.chl-vs{display:flex;align-items:center;justify-content:center;gap:10px;align-self:end;min-width:0}
.chl-x{font-size:56px;color:var(--soul-orange);text-shadow:4px 4px 0 var(--ink)}
.chl-form,.chl-list{display:flex;flex-direction:column;min-height:0}
.chl-b{flex:1;padding:14px 18px;display:flex;flex-direction:column;gap:8px;overflow:auto}
.chl-b>*{flex-shrink:0}
.chl-opps{display:flex;gap:8px;padding-bottom:4px}
.chl-o{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px;border:2px solid transparent}
.chl-o.on{border-color:var(--ink);background:var(--paper-3);box-shadow:var(--shadow-sm)}
.chl-o b{font-size:9.5px;white-space:nowrap}
.chl-courts{display:flex;gap:6px;flex-wrap:wrap}
.chl-row{display:flex;gap:18px;align-items:flex-end}
.chl-it{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:2px solid var(--paper-line)}
.chl-it-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.chl-it-t b{font-size:22px}.chl-it-t i{font-style:normal;font-size:10px;opacity:.65}
.md-a{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;padding:12px 14px;border-top:var(--b) solid var(--ink)}

/* private */
.pvg{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:24px}
.pvg-l{display:flex;flex-direction:column;gap:16px;max-width:620px}
.pvg-code{padding:18px 22px;display:flex;flex-direction:column;gap:8px}
.pvg-code b{font-size:96px;letter-spacing:.04em;color:var(--soul-purple)}
.pvg-set,.pvg-join{padding:16px 20px;display:flex;flex-direction:column;gap:8px}
.pvg-fr{display:flex;flex-direction:column;min-height:0}
.pvg-list{flex:1;padding:12px;display:flex;flex-direction:column;gap:8px}
.pvg-row{display:flex;gap:8px;align-items:center}

/* crew game */
.cg{flex:1;min-height:0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:30px;color:var(--paper)}
.cg-side{display:flex;flex-direction:column;align-items:center;gap:12px;animation:slamIn var(--t-slow) var(--ease) both}
.cg-side.r{animation-delay:120ms}
.cg-side b{font-size:64px;text-shadow:4px 4px 0 var(--ink);color:var(--cc)}
.cg-roster{display:flex;gap:8px}
.cg-mid{display:flex;flex-direction:column;align-items:center;gap:14px}
.cg-vs{font-size:140px;color:var(--soul-orange);text-shadow:6px 6px 0 var(--ink)}
.cg-pick{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* tournament */
.bracket{display:flex;gap:30px;min-width:max-content;padding:6px 6px 20px}
.br-col{width:250px;display:flex;flex-direction:column;justify-content:space-around;gap:10px}
.br-h{padding-bottom:4px;border-bottom:var(--b) solid var(--ink)}
.tm{background:var(--paper-2);border:var(--b) solid var(--ink);box-shadow:var(--shadow-sm)}
.tm.live{box-shadow:0 0 0 3px var(--soul-orange),var(--shadow-sm)}
.tm-r{display:flex;justify-content:space-between;padding:5px 10px;font-family:var(--font-cond);font-weight:600;font-size:14px;letter-spacing:.05em;opacity:.6}
.tm-r+.tm-r{border-top:2px solid var(--paper-line)}
.tm-r.w{opacity:1;background:var(--paper)}
.tm-r b{font-family:var(--font-display);font-weight:400;font-size:18px}
.br-crown{padding:22px;text-align:center;font-size:40px;background:var(--soul-grad);color:var(--paper);border:var(--b) solid var(--ink);box-shadow:var(--shadow)}

/* lobby */
.lb{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 260px minmax(0,1fr);gap:24px;align-items:start}
.lb-team{border-top:10px solid var(--tc)}
.lb-list{padding:12px;display:flex;flex-direction:column;gap:8px}
.lb-mid{display:flex;flex-direction:column;align-items:stretch;gap:12px;padding-top:30px;text-align:center}
.lb-vs{font-size:110px;color:var(--paper);text-shadow:5px 5px 0 var(--ink)}
.lb-count{font-size:160px;color:var(--soul-orange);text-shadow:6px 6px 0 var(--ink);animation:slamIn 300ms var(--ease) both}

/* post-game */
.pg{position:relative;z-index:2;flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 460px;gap:40px;align-items:center;color:var(--paper)}
.pg-l{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.pg-res{font-size:130px;text-shadow:6px 6px 0 var(--soul-purple);animation:slamIn var(--t-slow) var(--ease) both}
.pg-res.w{text-shadow:6px 6px 0 var(--soul-orange)}
.pg-score{display:flex;gap:18px;font-size:110px}.pg-score i{font-style:normal;opacity:.4}
.pg-names{display:flex;gap:20px}
.pg-xp{width:520px;display:flex;flex-direction:column;gap:6px}
.pg-bar,.pr-xp{height:16px;border:var(--b) solid var(--ink);background:var(--char-2)}
.pg-bar span,.pr-xp span{display:block;height:100%;background:var(--soul-grad);transition:width 900ms var(--ease-out)}
.pg-act{display:flex;gap:10px;flex-wrap:wrap}
.pg-grid{display:grid;grid-template-columns:80px 1fr 1fr;gap:8px 12px;padding:14px 18px;align-items:baseline}
.pg-grid .d{font-size:28px}
.pg-badge{padding:12px 18px 18px;border-top:var(--b) solid var(--ink);display:flex;flex-direction:column;gap:8px}

/* profile / player */
.pf{flex:1;min-height:0;display:grid;grid-template-columns:330px minmax(0,1fr);gap:36px;margin-top:40px;color:var(--paper)}
.pf-l{align-self:end;margin-bottom:-32px}
.pf-l .port{border-bottom:0}
.pf-r{display:flex;flex-direction:column;gap:14px;min-height:0;padding-right:10px}
.pf-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;padding-right:520px}
.pf-name{font-size:110px;text-shadow:5px 5px 0 var(--ink)}
.pf-sub{margin-top:6px;display:inline-block;padding:4px 8px;background:rgba(9,9,11,.78)}
.pf-r>.tabs{align-self:flex-start;background:rgba(9,9,11,.78)}
.pf-facts{display:flex;gap:40px}.pf-facts .sv{font-size:48px}
.pf-act{display:flex;gap:10px;flex-wrap:wrap}
.pf-body{flex:1;min-height:0;animation:riseIn var(--t) var(--ease-out) both}
.pf-attrs{padding:16px 20px;display:flex;flex-direction:column;gap:10px;max-width:640px}
.pf-games{display:flex;flex-direction:column;gap:8px;max-width:760px}
.pf-g{display:flex;align-items:center;gap:16px;padding:10px 16px}
.pf-g b{font-size:34px;width:110px}.pf-g .mut{margin-left:auto}
.pf-badges,.pr-badges{display:flex;gap:14px;flex-wrap:wrap}

/* locker */
.lk{flex:1;min-height:0;display:grid;grid-template-columns:240px 360px minmax(0,1fr);gap:24px}
.lk-cats{display:flex;flex-direction:column;gap:6px}
.lk-cats .tcat{min-height:52px}
.lk-preview{display:flex;flex-direction:column;align-items:center;gap:12px}
.lk-cur{text-align:center;display:flex;flex-direction:column;gap:4px}.lk-cur b{font-size:34px;color:var(--paper)}
.lk-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-content:start;padding:4px 8px 20px 4px}
.lk-it{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:10px;background:var(--char-2);border:var(--b) solid var(--ink);border-bottom:6px solid var(--rc);color:var(--paper);text-align:left;transition:transform var(--t-fast) var(--ease)}
.lk-it:hover{transform:translateY(-3px)}
.lk-it.sel{box-shadow:0 0 0 3px var(--soul-orange)}
.lk-it.eq{background:#2a2530}
.lk-it.lock{opacity:.55}
.lk-ph{width:100%;height:110px;display:grid;place-items:center;background:repeating-linear-gradient(135deg,rgba(255,255,255,.04) 0 10px,rgba(255,255,255,.08) 10px 20px);opacity:.6}
.lk-it b{font-size:16px}.lk-it i{font-style:normal;font-size:10px;opacity:.65}
.lk-new{position:absolute;top:8px;right:8px}
.lk-lock{position:absolute;top:48px;left:50%;transform:translateX(-50%)}
.lk-bar{display:flex;gap:10px;justify-content:flex-end;padding-top:14px}

/* progression */
.pr-xp{margin-bottom:18px}
.pr{flex:1;min-height:0;display:grid;grid-template-columns:460px minmax(0,1fr);grid-template-rows:auto 1fr;gap:20px}
.pr-attr{grid-row:1/3;display:flex;flex-direction:column;align-self:start}
.pr-rows{padding:14px 18px;display:flex;flex-direction:column;gap:10px}
.pr-row{display:flex;align-items:center;gap:10px}
.pr-track{display:flex;gap:10px;padding:4px 4px 12px}
.pr-tier{flex:0 0 150px;padding:12px;display:flex;flex-direction:column;gap:4px;opacity:.55}
.pr-tier .d{font-size:44px}.pr-tier b{font-size:14px}
.pr-tier.got{opacity:1;background:var(--paper-3)}
.pr-tier.next{opacity:1;box-shadow:0 0 0 3px var(--soul-orange),var(--shadow)}
.pr-badges{align-content:start}

/* lab */
.lab-eds{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;padding-right:4px}
.lab-ed{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:16px 18px 16px 22px;min-height:150px}
.lab-ed::before{content:"";position:absolute;left:0;top:0;bottom:0;width:10px;background:var(--ec)}
.lab-ed b{font-size:40px}.lab-ed span{font-size:15px;opacity:.75}
.lab-go{margin-top:auto;font-size:22px;opacity:1!important;color:var(--soul-purple)}
.lab-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;padding:4px 10px 20px 4px}
.lab-thumb{position:relative;height:130px;display:flex;justify-content:space-between;align-items:flex-start;padding:8px;background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--ec) 70%,#000) 0 12px,var(--ec) 12px 24px);border-bottom:var(--b) solid var(--ink);color:var(--paper)}
.lab-cb{padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.lab-cb b{font-size:24px}.lab-cb .u{font-size:10px;opacity:.65}
.ed-top{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding-right:540px;margin-bottom:14px}
.ed-tl{display:flex;flex-direction:column;gap:6px}
.ed-name{width:420px;font-family:var(--font-display);font-size:30px;height:56px}
.ed-tr{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ed-z{color:var(--paper);width:48px;text-align:center}
.ed{flex:1;min-height:0;display:grid;grid-template-columns:200px minmax(0,1fr) 300px;gap:20px}
.ed-tools{display:flex;flex-direction:column;gap:6px}
.ed-tools .tcat{min-height:54px}
.ed-canvas{display:grid;place-items:center;overflow:hidden;background:var(--halftone),#1a181d;border:var(--b) solid var(--ink)}
.ed-art{position:relative;width:560px;height:380px;display:grid;place-items:center;border:var(--b) solid var(--ink);box-shadow:var(--shadow-lg);transition:transform var(--t) var(--ease-out),background var(--t)}
.ed-court{background:var(--ac)}
.ec-key{position:absolute;left:0;top:50%;width:150px;height:130px;transform:translateY(-50%);border:4px solid var(--paper);border-left:0}
.ec-arc{position:absolute;left:-60px;top:50%;width:330px;height:330px;transform:translateY(-50%);border:4px solid var(--paper);border-radius:50%;clip-path:inset(0 0 0 60px)}
.ec-mid{position:absolute;right:0;top:0;bottom:0;width:4px;background:var(--paper)}
.ed-poster{width:340px;height:460px;background:var(--stripe),var(--ac);flex-direction:column;align-content:end;justify-items:start;padding:24px;color:var(--paper)}
.ed-poster b{font-size:64px;text-shadow:4px 4px 0 var(--ink)}
.ed-player,.ed-crew{background:var(--paper)}
.ed-props{display:flex;flex-direction:column;min-height:0}
.ed-pb{padding:14px;display:flex;flex-direction:column;gap:8px;overflow:auto}
.ed-sw{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.ed-s{aspect-ratio:1;border:var(--b) solid var(--ink)}
.ed-s.on{box-shadow:0 0 0 3px var(--soul-orange)}
.ed-layers{display:flex;flex-direction:column;gap:4px}
.ed-l{display:flex;align-items:center;gap:8px;padding:6px 8px;border:2px solid var(--paper-line)}
.ed-l.on{border-color:var(--ink);background:var(--paper-3)}

.jd-in{display:flex;gap:8px;padding:12px;border-top:var(--b) solid var(--ink)}

/* discover */
.dc{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:24px}
.dc-map{overflow:hidden;background:#dcd4bc}
.dc-grid{position:absolute;inset:0;background:linear-gradient(rgba(9,9,11,.08) 2px,transparent 2px) 0 0/80px 80px,linear-gradient(90deg,rgba(9,9,11,.08) 2px,transparent 2px) 0 0/80px 80px}
.dc-river{position:absolute;left:-5%;right:-5%;top:52%;height:60px;background:#9fb7b2;border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);transform:rotate(-8deg)}
.dc-pin{position:absolute;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;gap:2px;transition:transform var(--t-fast) var(--ease)}
.dc-pin svg{fill:var(--paper)}
.dc-pin span{padding:2px 6px;background:var(--ink);color:var(--paper);font-size:10px;white-space:nowrap}
.dc-pin.on{transform:translate(-50%,-100%) scale(1.25);z-index:3}
.dc-pin.on svg{fill:var(--soul-orange)}
.dc-live{position:absolute;top:-6px;right:-10px;font-style:normal;font-family:var(--font-mono);font-size:10px;background:var(--ok);color:var(--paper);border:2px solid var(--ink);padding:0 4px}
.dc-you{position:absolute;left:36%;top:62%;color:var(--p1);background:var(--ink);padding:3px 8px}
.dc-side{display:flex;flex-direction:column;gap:12px;min-height:0}
.dc-list{flex:1;display:flex;flex-direction:column;gap:6px}
.dc-row{color:var(--ink);display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:10px 14px;border:2px solid var(--paper-line);background:var(--paper-2);text-align:left}
.dc-row b{font-size:24px}.dc-row .u{font-size:10px;opacity:.65}
.dc-row.on{border-color:var(--ink);box-shadow:var(--shadow-sm);background:var(--paper)}
.dc-env{position:relative;height:120px;overflow:hidden;border-bottom:var(--b) solid var(--ink)}

/* court */
.ct{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:30px;color:var(--paper)}
.ct-l{display:flex;flex-direction:column;justify-content:flex-end;gap:20px;padding-bottom:10px}
.ct-king{display:flex;align-items:center;gap:12px;max-width:460px}
.ct-r{display:flex;flex-direction:column;gap:12px;padding-right:6px}
.ct-h{margin-top:6px}
.ct-regs{display:flex;flex-direction:column;gap:8px}

/* rankings */
.rk-list{display:flex;flex-direction:column;gap:6px;padding:4px 10px 20px 4px}

/* crew */
.cw{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:30px;color:var(--paper);margin-top:60px}
.cw-l{display:flex;flex-direction:column;align-items:flex-start;gap:14px;justify-content:center}
.cw-n{font-size:120px;color:var(--cc);text-shadow:6px 6px 0 var(--ink)}
.cw-r{display:flex;flex-direction:column;gap:16px;overflow:auto}

/* messages */
.msg{flex:1;min-height:0;display:grid;grid-template-columns:400px minmax(0,1fr);gap:20px}
.msg-list{display:flex;flex-direction:column;overflow:auto}
.msg-t{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:2px solid var(--paper-line);text-align:left}
.msg-t.on{background:var(--paper-3);box-shadow:inset 6px 0 0 var(--soul-orange)}
.msg-gc{display:grid;place-items:center;width:40px;height:40px;background:var(--ink);color:var(--paper);font-size:14px}
.msg-m{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.msg-m i{font-style:normal;font-size:10px;opacity:.6}
.msg-conv{display:flex;flex-direction:column;min-height:0}
.msg-body{flex:1;padding:16px;display:flex;flex-direction:column;gap:10px}
.bub{display:flex;gap:8px;align-items:flex-end;max-width:70%}
.bub>div{padding:8px 12px;background:var(--paper-2);border:2px solid var(--ink)}
.bub i{font-style:normal;font-size:9.5px;opacity:.6}
.bub p{font-size:16px}
.bub.me{align-self:flex-end}
.bub.me>div{background:var(--ink);color:var(--paper)}
.nf-page{flex:1;min-height:0;max-width:900px;display:flex;flex-direction:column}
.nf-page .notif{height:100%;display:flex;flex-direction:column}

/* settings */
.st{flex:1;min-height:0;display:grid;grid-template-columns:300px minmax(0,1fr);gap:22px}
.st-body{align-self:start;max-height:100%;animation:riseIn var(--t) var(--ease-out) both}
.st-row{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:78px;padding:12px 22px;border-bottom:2px solid var(--paper-line)}
.st-row:last-child{border-bottom:0}
.st-row>div:first-child{display:flex;flex-direction:column;gap:3px}
.st-row b{font-size:22px}.st-row i{font-style:normal;font-size:10px;opacity:.6}
.st-c{display:flex;align-items:center;gap:10px}
.st-c .tog-row{padding:0;gap:0}
.st-sl{display:flex;align-items:center;gap:14px;width:340px}
.sb{padding:16px 22px 22px;border-top:2px solid var(--paper-line);display:flex;flex-direction:column;gap:12px}
.sb-note{opacity:.6}
.sb-h{display:flex;flex-direction:column;gap:3px}.sb-h b{font-size:22px}.sb-h i{font-style:normal;font-size:10px;opacity:.6}
.sb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.sb-cue{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 12px;border:var(--b) solid var(--ink);background:var(--paper-2);text-align:left;transition:all var(--t-fast) var(--ease)}
.sb-cue:hover,.sb-cue:focus-visible{transform:translateY(-2px)}
.sb-cue.on{background:var(--ink);color:var(--paper);box-shadow:4px 4px 0 var(--soul-orange);transform:translate(-2px,-2px)}
.sb-p{width:28px;height:28px;display:grid;place-items:center;border:var(--b) solid currentColor;font-size:12px;flex:none}
.sb-t{display:flex;flex-direction:column;gap:2px;min-width:0}.sb-t b{font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sb-t i{font-style:normal;font-size:9px;opacity:.6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-sl b{font-size:28px;width:44px;text-align:right}


/* ═════ select.css ═════ */
/* select.css — the Soul Jam character select + court select (design/claude-design-export/.../character-select/).
 * Part 1: the stage CSS from "Character Select.html" (its inline <style>), scoped to .cs-viewport so its light
 * --ink does not leak into the shell (.viewport → .cs-viewport, .stage → .cs-stage, :root vars → .cs-viewport).
 * Part 2: styles.css verbatim, minus its MATCH (in-game HUD) section — the real court draws its own HUD.
 * The tweak values the design shipped with are fixed: street type, anime theme, anime/blade/recessed stat tabs,
 * bracket grid, video layer + ambient sparks on. */
.cs-viewport {
  --p1: #00d4ff;
  --p2: #ff3b6e;
  --ink: #f4f1ea;
  --asphalt: #0c0c0e;
  --font-display: "Anton", sans-serif;
  --font-cond: "Oswald", sans-serif;
  --font-mono: "Space Mono", monospace;
  font-family: var(--font-cond); -webkit-font-smoothing: antialiased;
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(120% 90% at 50% 0%, #14141a 0%, #050506 70%, #000 100%);
  overflow: hidden;
}

.cs-stage {
  position: relative;
  width: 1280px; height: 720px;
  flex: 0 0 auto;
  transform-origin: center center;
  will-change: transform;
  color: var(--ink);
  user-select: none;
  overflow: hidden;
}

/* ---- grit overlays (live inside the scaled stage) ---- */
.grain {
  position: absolute; inset: -20%;
  pointer-events: none; z-index: 60;
  opacity: 0.10; mix-blend-mode: overlay;
  background-image: url("/demo/assets/noise.svg");
  background-size: 240px 240px;
  animation: grainShift 1.2s steps(6) infinite;
}
@keyframes grainShift {
  0%{transform:translate(0,0)} 20%{transform:translate(-6px,4px)}
  40%{transform:translate(5px,-7px)} 60%{transform:translate(-4px,6px)}
  80%{transform:translate(7px,3px)} 100%{transform:translate(0,0)}
}
.vignette {
  position: absolute; inset: 0; pointer-events: none; z-index: 55;
  box-shadow: inset 0 0 220px 40px rgba(0,0,0,0.85);
}
.scanline {
  position:absolute; inset:0; pointer-events:none; z-index:58; opacity:.25;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.5) 2px 3px);
  mix-blend-mode: multiply;
}

@media (prefers-reduced-motion: reduce) {
  .grain { animation: none; }
}

/* styles.css — Soul Jam character select. Gritty streetball HUD. */

/* ============================================================= VIDEO PLACEHOLDER */
.video-ph { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.vp-court {
  position: absolute; inset: 0;
  background:
    radial-gradient(70% 55% at 50% 92%, rgba(70,72,84,0.28) 0%, rgba(0,0,0,0) 55%),
    radial-gradient(120% 100% at 50% 0%, #17181f 0%, #0a0a0d 60%, #050507 100%);
}
.vp-court::after {
  /* faint center-court arc */
  content: ""; position: absolute; left: 50%; bottom: -180px;
  width: 520px; height: 520px; transform: translateX(-50%);
  border: 2px solid rgba(150,155,170,0.10); border-radius: 50%;
  box-shadow: 0 0 0 80px rgba(150,155,170,0.025);
}
.vp-grain {
  position: absolute; inset: 0; opacity: 0.5; mix-blend-mode: overlay;
  background: url("/demo/assets/noise.svg"); background-size: 200px 200px;
}
.vp-tag {
  position: absolute; left: 14px; bottom: 11px;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.08em;
  color: rgba(220,225,235,0.26); text-transform: uppercase; white-space: nowrap;
}
.vp-tag b { color: rgba(220,225,235,0.5); font-weight: 700; }

/* ============================================================= AMBIENT SPARKS */
.ambient-layer { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.ember-field { position: absolute; inset: 0; overflow: hidden; }
.ember {
  position: absolute; border-radius: 50%;
  filter: blur(0.3px);
  box-shadow: 0 0 6px currentColor;
  animation-name: emberRise; animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes emberRise {
  0%   { transform: translate(0, 30px); opacity: 0; }
  12%  { opacity: var(--o, .5); }
  88%  { opacity: var(--o, .5); }
  100% { transform: translate(var(--drift), -180px); opacity: 0; }
}

/* ============================================================= PORTRAITS */
.portrait-wrap { position: absolute; z-index: 5; }
.port-glow {
  position: absolute; left: 50%; top: 46%; width: 420px; height: 420px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, color-mix(in srgb, var(--c) 38%, transparent) 0%, transparent 62%);
  opacity: 0.55; filter: blur(6px); transition: opacity .3s;
}
.port-glow.locked { opacity: 0.9; animation: glowPulse 1.8s ease-in-out infinite; }
@keyframes glowPulse { 0%,100%{ opacity:.75 } 50%{ opacity: 1 } }

.striped-ph {
  position: relative; overflow: hidden;
  border: 1.5px dashed color-mix(in srgb, var(--c) 55%, transparent);
}
.striped-ph.faded { opacity: 0.62; }
.striped-fill {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(135deg,
      color-mix(in srgb, var(--c) 9%, #0c0d11) 0 16px,
      color-mix(in srgb, var(--c) 16%, #0c0d11) 16px 32px);
  mask: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
}
.striped-tag {
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  text-align: center;
}
.striped-name {
  font-family: var(--font-display); font-size: 44px; line-height: .9;
  white-space: nowrap;
  letter-spacing: 0.01em; color: color-mix(in srgb, var(--c) 80%, #fff);
  text-shadow: 0 2px 18px rgba(0,0,0,.6);
}
.striped-hint {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em;
  color: rgba(255,255,255,0.42); text-transform: uppercase;
  border: 1px solid rgba(255,255,255,0.18); padding: 3px 7px;
}
.port-base {
  position: absolute; left: 50%; bottom: -4px; width: 240px; height: 40px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 70%, transparent), transparent);
  filter: blur(7px); opacity: 0.6;
}
.port-base.locked { opacity: 0.95; height: 52px; }
.port-plate {
  position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  white-space: nowrap;
}
.plate-name {
  font-family: var(--font-display); font-size: 30px; line-height: .9;
  color: #fff; letter-spacing: .01em; text-shadow: 0 2px 10px rgba(0,0,0,.8);
}
.plate-tag {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
  color: color-mix(in srgb, var(--c) 80%, #fff); text-transform: uppercase;
}
.port-prompt {
  position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  text-align: center;
}
.port-prompt span {
  font-family: var(--font-display); font-size: 22px; color: rgba(255,255,255,.55);
}
.port-prompt em {
  font-family: var(--font-mono); font-size: 10px; font-style: normal;
  letter-spacing: .12em; color: color-mix(in srgb, var(--c) 85%, #fff);
  text-transform: uppercase; animation: blinkPrompt 1.1s steps(2) infinite;
}
@keyframes blinkPrompt { 50% { opacity: .25 } }

/* ============================================================= STAT TABS */
.tab-mount { position: absolute; top: 0; width: 364px; height: 118px; z-index: 20; }
.tab-mount.p1 { left: 0; }
.tab-mount.p2 { right: 0; }
.tab-mount.deny { animation: denyShake .36s cubic-bezier(.36,.07,.19,.97); }
@keyframes denyShake {
  10%,90% { transform: translateX(-2px) } 20%,80% { transform: translateX(4px) }
  30%,50%,70% { transform: translateX(-7px) } 40%,60% { transform: translateX(7px) }
}

.stat-tab { position: absolute; inset: 0; }

.tab-bg { position: absolute; inset: 0; overflow: hidden; }
/* ---- layout: angled (default trapezoid) ---- */
.stat-tab.p1 .tab-bg, .stat-tab.p1 .tab-inner { clip-path: polygon(0 0, 100% 0, 86.3% 100%, 0 100%); }
.stat-tab.p2 .tab-bg, .stat-tab.p2 .tab-inner { clip-path: polygon(0 0, 100% 0, 100% 100%, 13.7% 100%); }

/* ---- layout: squared (clean rectangle) ---- */
.stat-tab.lay-squared.p1 .tab-bg, .stat-tab.lay-squared.p1 .tab-inner,
.stat-tab.lay-squared.p2 .tab-bg, .stat-tab.lay-squared.p2 .tab-inner { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }

/* ---- layout: notch (beveled inner-bottom corner) ---- */
.stat-tab.lay-notch.p1 .tab-bg, .stat-tab.lay-notch.p1 .tab-inner { clip-path: polygon(0 0, 100% 0, 100% 56%, 88% 100%, 0 100%); }
.stat-tab.lay-notch.p2 .tab-bg, .stat-tab.lay-notch.p2 .tab-inner { clip-path: polygon(0 0, 100% 0, 100% 100%, 12% 100%, 0 56%); }

/* ---- layout: blade (sliced top inner corner) ---- */
.stat-tab.lay-blade.p1 .tab-bg, .stat-tab.lay-blade.p1 .tab-inner { clip-path: polygon(0 0, 87% 0, 100% 36%, 100% 100%, 0 100%); }
.stat-tab.lay-blade.p2 .tab-bg, .stat-tab.lay-blade.p2 .tab-inner { clip-path: polygon(13% 0, 100% 0, 100% 100%, 0 100%, 0 36%); }

/* ---- stat tray: recessed (toggle) ---- */
.stat-tab.tray-recessed .tab-stats {
  margin-top: 7px; padding: 6px 6px 8px;
  background: linear-gradient(180deg, rgba(0,0,0,.42), rgba(0,0,0,.18));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), inset 0 0 0 1px rgba(0,0,0,.4);
}

.tab-metal {
  position: absolute; inset: 0;
  background:
    linear-gradient(178deg, #2a2b31 0%, #1b1c21 16%, #141519 50%, #0d0e11 100%);
}
/* brushed bands */
.tab-metal::before {
  content: ""; position: absolute; inset: 0; opacity: .5;
  background: repeating-linear-gradient(180deg,
    rgba(255,255,255,0.035) 0 1px, rgba(0,0,0,0) 1px 4px);
}
.tab-grain {
  position: absolute; inset: 0; opacity: .16; mix-blend-mode: overlay;
  background: url("/demo/assets/noise.svg"); background-size: 180px 180px;
}
.tab-sheen {
  position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.07) 47%, transparent 64%);
}
.tab-basebar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 5px;
  background: linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 30%, #000));
  box-shadow: 0 0 14px color-mix(in srgb, var(--c) 70%, transparent);
}
.stat-tab.p2 .tab-basebar {
  background: linear-gradient(270deg, var(--c), color-mix(in srgb, var(--c) 30%, #000));
}
.tab-edge {
  position: absolute; inset: 0; pointer-events: none;
  mix-blend-mode: screen;
}
.stat-tab.p1 .tab-edge {
  background: linear-gradient(95deg, transparent 62%, color-mix(in srgb, var(--c) 60%, transparent) 92%, var(--c) 100%);
}
.stat-tab.p2 .tab-edge {
  background: linear-gradient(265deg, transparent 62%, color-mix(in srgb, var(--c) 60%, transparent) 92%, var(--c) 100%);
}
.tab-scuff {
  position: absolute; inset: 0; opacity: .4; mix-blend-mode: soft-light;
  background:
    radial-gradient(40px 12px at 26% 40%, rgba(0,0,0,.5), transparent 70%),
    radial-gradient(60px 16px at 70% 72%, rgba(0,0,0,.45), transparent 70%),
    radial-gradient(28px 10px at 50% 22%, rgba(255,255,255,.06), transparent 70%);
}

.stat-tab.locked .tab-metal {
  background: linear-gradient(178deg,
    color-mix(in srgb, var(--c) 22%, #25262c) 0%,
    color-mix(in srgb, var(--c) 10%, #141519) 60%, #0c0d10 100%);
}

/* ---- tab content ---- */
.tab-inner { position: absolute; inset: 0; z-index: 3; }
.stat-tab.p1 .tab-inner { padding: 9px 26px 0 13px; }
.stat-tab.p2 .tab-inner { padding: 9px 13px 0 26px; }

.tab-head { display: flex; align-items: center; gap: 8px; height: 24px; }
.stat-tab.p2 .tab-head { justify-content: flex-end; }
.p-pill {
  flex: 0 0 auto; font-family: var(--font-mono); font-weight: 700; font-size: 11px;
  letter-spacing: .04em; color: #06070a; background: var(--c);
  padding: 2px 6px; line-height: 1; box-shadow: 0 0 10px color-mix(in srgb, var(--c) 60%, transparent);
}
.tab-name {
  font-family: var(--font-display); font-size: 23px; line-height: 1;
  letter-spacing: .015em; text-transform: uppercase; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1;
  text-shadow: 0 1px 0 #000;
}
.stat-tab.p2 .tab-name { text-align: right; }
.tab-name.blank { color: rgba(255,255,255,.32); }

.tab-sep { margin-top: 5px; height: 3px; }
.tab-sep i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--c), transparent 88%);
  box-shadow: 0 0 8px color-mix(in srgb, var(--c) 55%, transparent);
}
.stat-tab.p2 .tab-sep i { background: linear-gradient(270deg, var(--c), transparent 88%); }

.tab-stats { display: flex; margin-top: 9px; }
.stat-tab.p2 .tab-stats { justify-content: flex-end; }
.stat-col {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  border-right: 1px solid rgba(255,255,255,.07);
}
.stat-col:last-child { border-right: none; }
.stat-col.soul { flex: 1.2 1 0; }
.stat-label {
  font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .08em;
  color: rgba(255,255,255,.5); text-transform: uppercase;
}
.stat-col.soul .stat-label { color: color-mix(in srgb, var(--c) 85%, #fff); font-weight: 700; }
.stat-val {
  font-family: var(--font-display); font-size: 21px; line-height: .9; color: #f2f2f4;
  font-variant-numeric: tabular-nums;
}
.stat-val.soul { font-size: 35px; text-shadow: 0 0 16px color-mix(in srgb, var(--c) 60%, transparent); }

.tab-locktag {
  position: absolute; z-index: 4; bottom: 7px;
  font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: .22em;
  color: var(--c); text-transform: uppercase;
  animation: lockBlink 1s steps(2) infinite;
}
.stat-tab.p1 .tab-locktag { left: 14px; }
.stat-tab.p2 .tab-locktag { right: 14px; }
@keyframes lockBlink { 50% { opacity: .3 } }

/* ---- variant: metal (cleaner) ---- */
.stat-tab.v-metal .tab-metal {
  background: linear-gradient(180deg, #34363d 0%, #202227 40%, #15161a 100%);
}
.stat-tab.v-metal .tab-grain { opacity: .06; }
.stat-tab.v-metal .tab-scuff { display: none; }
.stat-tab.v-metal .tab-basebar { height: 3px; }
.stat-tab.v-metal .tab-metal::before { opacity: .9; }

/* ---- variant: tape (matte + gaffer tape edge) ---- */
.stat-tab.v-tape .tab-metal { background: linear-gradient(180deg, #161616 0%, #0e0e0e 100%); }
.stat-tab.v-tape .tab-grain { opacity: .22; }
.stat-tab.v-tape .tab-sheen { display: none; }
.stat-tab.v-tape .tab-edge {
  background: none;
  border: 0;
}
.stat-tab.v-tape .tab-basebar {
  height: 14px; opacity: .92;
  background:
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--c) 80%, #000) 0 7px, color-mix(in srgb, var(--c) 55%, #000) 7px 14px);
  box-shadow: none; mask: linear-gradient(90deg, #000 0 92%, transparent);
  filter: contrast(1.1);
}
.stat-tab.v-tape.p2 .tab-basebar { mask: linear-gradient(270deg, #000 0 92%, transparent); }
.stat-tab.v-tape .tab-scuff { opacity: .7; }

/* ---- variant: anime (cel ink + screentone) ---- */
.stat-tab.v-anime {
  filter:
    drop-shadow(2px 0 0 #16140f) drop-shadow(-2px 0 0 #16140f)
    drop-shadow(0 2px 0 #16140f) drop-shadow(0 -2px 0 #16140f)
    drop-shadow(6px 7px 0 rgba(11, 11, 13, .55));
}
.stat-tab.v-anime .tab-metal {
  background: linear-gradient(105deg, #faf6ea 0 55%, #ebe3cf 55% 100%);
}
.stat-tab.v-anime .tab-metal::before { display: none; }
.stat-tab.v-anime .tab-grain {
  opacity: 1; mix-blend-mode: normal;
  background-image: radial-gradient(circle, rgba(22, 20, 15, .17) 1.3px, transparent 1.5px);
  background-size: 7px 7px;
  mask: linear-gradient(105deg, transparent 0 48%, #000 78%);
}
.stat-tab.v-anime.p2 .tab-grain { mask: linear-gradient(-105deg, transparent 0 48%, #000 78%); }
.stat-tab.v-anime .tab-sheen {
  opacity: .1;
  background: repeating-linear-gradient(115deg, #16140f 0 2px, transparent 2px 12px);
  mask: linear-gradient(90deg, transparent 55%, #000);
}
.stat-tab.v-anime.p2 .tab-sheen { mask: linear-gradient(270deg, transparent 55%, #000); }
.stat-tab.v-anime .tab-basebar {
  height: 9px; box-shadow: none;
  background: linear-gradient(90deg, var(--c) 0 70%, #16140f 70% 76%, transparent 76%);
}
.stat-tab.v-anime.p2 .tab-basebar {
  background: linear-gradient(270deg, var(--c) 0 70%, #16140f 70% 76%, transparent 76%);
}
.stat-tab.v-anime .tab-edge, .stat-tab.v-anime .tab-scuff { display: none; }
.stat-tab.v-anime .p-pill { box-shadow: 2px 2px 0 #16140f; }
.stat-tab.v-anime .tab-name { color: #16140f; text-shadow: none; font-style: italic; }
.stat-tab.v-anime .tab-name.blank { color: rgba(22, 20, 15, .35); }
.stat-tab.v-anime .tab-sep i { background: #16140f; box-shadow: none; }
.stat-tab.v-anime .stat-label { color: rgba(22, 20, 15, .55); }
.stat-tab.v-anime .stat-col.soul .stat-label { color: color-mix(in srgb, var(--c) 60%, #16140f); }
.stat-tab.v-anime .stat-val { color: #16140f; }
.stat-tab.v-anime .stat-val.soul {
  text-shadow: 2.5px 2.5px 0 color-mix(in srgb, var(--c) 45%, transparent);
}
.stat-tab.v-anime .stat-col { border-right-color: rgba(22, 20, 15, .14); }
.stat-tab.v-anime.tray-recessed .tab-stats {
  background: rgba(22, 20, 15, .06);
  box-shadow: inset 0 0 0 1.5px rgba(22, 20, 15, .55);
}
.stat-tab.v-anime.locked .tab-metal {
  background: linear-gradient(105deg,
    color-mix(in srgb, var(--c) 26%, #faf6ea) 0 55%,
    color-mix(in srgb, var(--c) 36%, #ebe3cf) 55% 100%);
}
.stat-tab.v-anime .tab-locktag { color: #16140f; }

/* ============================================================= SPRAY BURST */
.spray-burst {
  position: absolute; z-index: 6; top: 58px; pointer-events: none;
}
.stat-tab.p1 .spray-burst { left: 120px; }
.stat-tab.p2 .spray-burst { right: 120px; }
.spray-burst .ring {
  position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%;
  border: 2px solid var(--c);
  animation: burstRing .5s ease-out forwards;
}
@keyframes burstRing {
  0% { transform: scale(.4); opacity: 1; }
  100% { transform: scale(14); opacity: 0; }
}
.spray-burst .shard {
  position: absolute; left: 0; top: 0; width: var(--len); transform-origin: left center;
  transform: rotate(var(--ang)) scaleX(0);
  background: var(--c); border-radius: 2px;
  box-shadow: 0 0 8px var(--c);
  animation: burstShard .5s ease-out forwards;
}
@keyframes burstShard {
  0% { transform: rotate(var(--ang)) scaleX(0); opacity: 1; }
  60% { transform: rotate(var(--ang)) scaleX(1); opacity: 1; }
  100% { transform: rotate(var(--ang)) scaleX(1) translateX(8px); opacity: 0; }
}

/* ============================================================= GRID */
.grid-zone {
  position: absolute; left: 0; right: 0; top: 510px; height: 150px;
  z-index: 10; display: flex; justify-content: center; gap: 32px;
}
.grid-group {
  display: grid; grid-template-columns: repeat(6, 64px);
  grid-auto-rows: 64px; gap: 4px;
}

.cell {
  position: relative; width: 64px; height: 64px;
  background: linear-gradient(160deg, #1a1b20, #0e0f12);
  border: 1px solid rgba(255,255,255,.08);
  overflow: visible; transition: transform .12s ease, box-shadow .12s ease;
}
.cell-thumb {
  position: absolute; inset: 1px;
  background:
    repeating-linear-gradient(135deg,
      rgba(255,255,255,0.05) 0 6px, rgba(255,255,255,0.10) 6px 12px),
    linear-gradient(160deg, #23252c, #131418);
  opacity: .9;
}
.cell-corner {
  position: absolute; top: 0; right: 0; width: 0; height: 0;
  border-top: 12px solid color-mix(in srgb, var(--lock, #5b6cff) 0%, #3a3d48);
  border-left: 12px solid transparent;
  opacity: .5;
}
.cell-abbr {
  position: absolute; left: 0; right: 0; bottom: 3px; text-align: center;
  font-family: var(--font-cond); font-weight: 700; font-size: 13px;
  letter-spacing: .02em; color: rgba(255,255,255,.82);
  text-transform: uppercase; text-shadow: 0 1px 2px #000;
}
.cell.empty { background: #0b0c0e; border-color: rgba(255,255,255,.04); }
.cell-slash {
  position: absolute; inset: 0; opacity: .5;
  background: repeating-linear-gradient(135deg, transparent 0 9px, rgba(255,255,255,.04) 9px 10px);
}
.cell.is-cursor { transform: translateY(-3px); z-index: 5; }
.cell.is-locked {
  border-color: var(--lock);
  box-shadow: 0 0 0 1px var(--lock), 0 0 18px color-mix(in srgb, var(--lock) 55%, transparent);
}
.cell.is-locked .cell-thumb {
  background:
    repeating-linear-gradient(135deg,
      color-mix(in srgb, var(--lock) 18%, #15161a) 0 6px,
      color-mix(in srgb, var(--lock) 30%, #15161a) 6px 12px);
}
.cell-lockface {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: color-mix(in srgb, var(--lc) 16%, rgba(8,9,12,.4));
  animation: lockPop .25s ease-out;
}
@keyframes lockPop { 0% { transform: scale(.6); opacity: 0 } 100% { transform: scale(1); opacity: 1 } }
.lock-tick {
  width: 18px; height: 10px; border-left: 3px solid var(--lc); border-bottom: 3px solid var(--lc);
  transform: rotate(-45deg) translateY(-2px); box-shadow: 0 0 8px var(--lc);
}

/* ---- grid variant: solid ---- */
.gridv-solid .cell { background: #0d0e11; }
.gridv-solid .cell-thumb { background: linear-gradient(160deg, #2a2c34, #15161b); opacity: 1; }
.gridv-solid .cell.filled { border-color: rgba(255,255,255,.12); }
.gridv-solid .cell-corner { display: none; }
.gridv-solid .cell-abbr { font-size: 15px; bottom: 4px; }
.gridv-solid .cell.is-locked .cell-thumb { background: linear-gradient(160deg, var(--lock), color-mix(in srgb, var(--lock) 40%, #000)); }
.gridv-solid .cell.is-locked .cell-abbr { color: #07080a; }

/* ---- grid variant: tape ---- */
.gridv-tape .grid-group { gap: 6px; }
.gridv-tape .cell {
  background: #e9e6dd; border: none;
  box-shadow: 0 4px 10px rgba(0,0,0,.5);
}
.gridv-tape .cell:nth-child(2n) { transform: rotate(-1.4deg); }
.gridv-tape .cell:nth-child(3n) { transform: rotate(1.2deg); }
.gridv-tape .cell.is-cursor { transform: translateY(-3px) rotate(0deg); }
.gridv-tape .cell-thumb {
  inset: 4px; background:
    repeating-linear-gradient(135deg, #c9c4b8 0 6px, #d6d2c7 6px 12px);
  opacity: 1;
}
.gridv-tape .cell::before {
  content: ""; position: absolute; top: -5px; left: 50%; transform: translateX(-50%) rotate(-3deg);
  width: 26px; height: 12px; background: rgba(210,205,150,.55);
  box-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.gridv-tape .cell-abbr { color: #16140f; bottom: 5px; }
.gridv-tape .cell-corner { display: none; }
.gridv-tape .cell.empty { background: #1a1a18; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
.gridv-tape .cell.empty::before { display: none; }
.gridv-tape .cell.empty .cell-slash { opacity: .35; }
.gridv-tape .cell.is-locked { box-shadow: 0 0 0 3px var(--lock), 0 6px 14px rgba(0,0,0,.6); }

/* ============================================================= SELECTOR BRACKETS */
.sel-brackets { position: absolute; inset: -4px; pointer-events: none; z-index: 8; }
.sel-brackets .br {
  position: absolute; width: 13px; height: 13px;
  border: 3px solid var(--c); filter: drop-shadow(0 0 4px var(--c));
  animation: bracketPulse .7s ease-in-out infinite;
}
.sel-brackets .tl { top: 0; left: 0; border-right: none; border-bottom: none; }
.sel-brackets .tr { top: 0; right: 0; border-left: none; border-bottom: none; }
.sel-brackets .bl { bottom: 0; left: 0; border-right: none; border-top: none; }
.sel-brackets .br2 { bottom: 0; right: 0; border-left: none; border-top: none; }
@keyframes bracketPulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50% { opacity: .55; transform: scale(1.08); }
}
.sel-brackets.locked .br { animation: none; opacity: 1; width: 15px; height: 15px; }
.p2mark { position: absolute; inset: 0; pointer-events: none; }
.p2mark.offset { inset: 4px; }
.p2mark.offset .sel-brackets { inset: 0; }

/* ============================================================= DIAMOND */
.diamond-cell {
  position: relative; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px;
  --dia: var(--lock);
}
.dia-shape {
  position: relative; width: 52px; height: 52px;
  display: grid; place-items: center;
}
.dia-ring {
  position: absolute; inset: 0; transform: rotate(45deg);
  border: 2px solid color-mix(in srgb, var(--dia) 80%, #fff);
  box-shadow: 0 0 16px var(--dia), inset 0 0 10px color-mix(in srgb, var(--dia) 60%, transparent);
  animation: diaSpin 6s linear infinite, diaPulse 1.4s ease-in-out infinite;
}
.dia-core {
  position: absolute; width: 30px; height: 30px; transform: rotate(45deg);
  background: linear-gradient(135deg, color-mix(in srgb, var(--dia) 35%, #111), #0a0a10);
  border: 1px solid color-mix(in srgb, var(--dia) 50%, transparent);
}
.dia-q {
  position: relative; z-index: 2; font-family: var(--font-display); font-size: 30px;
  color: #fff; text-shadow: 0 0 12px var(--dia);
  animation: diaGlitch 2.6s steps(1) infinite;
}
.dia-spark {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 6px var(--dia);
  animation: diaSparkle 1.8s ease-in-out infinite;
}
.dia-spark.s1 { top: -2px; left: 50%; }
.dia-spark.s2 { left: -2px; top: 55%; animation-delay: .5s; }
.dia-spark.s3 { right: -2px; top: 35%; animation-delay: 1s; }
.dia-label {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .2em;
  color: color-mix(in srgb, var(--dia) 70%, #fff); text-transform: uppercase;
}
.diamond-cell.unlocked { --dia: #ffd23f; }
.diamond-cell.unlocked .dia-q { animation: none; }
@keyframes diaSpin { to { transform: rotate(405deg); } }
@keyframes diaPulse { 0%,100% { opacity: 1 } 50% { opacity: .5 } }
@keyframes diaGlitch {
  0%,80%,100% { transform: translate(0,0); opacity: 1; }
  82% { transform: translate(-2px,1px); opacity: .7; }
  86% { transform: translate(2px,-1px); }
  90% { transform: translate(-1px,0); opacity: .85; }
}
@keyframes diaSparkle { 0%,100% { opacity: 0; transform: scale(.4) } 50% { opacity: 1; transform: scale(1) } }
.diamond-cell.is-locked .dia-ring { animation: diaPulse 1s ease-in-out infinite; }

/* ============================================================= HINT BAR */
.hint-bar {
  position: absolute; left: 0; right: 0; bottom: 8px; height: 26px; z-index: 25;
  display: flex; align-items: center; justify-content: center;
}
.hints { display: flex; align-items: center; gap: 14px; }
.hint {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em;
  color: rgba(235,238,245,.62); text-transform: uppercase; display: inline-flex; gap: 6px; align-items: baseline;
}
.hint i { font-style: normal; color: rgba(235,238,245,.4); }
.hint.p1 b { color: var(--p1); }
.hint.p2 b { color: var(--p2); }
.hint.esc { color: rgba(235,238,245,.45); }
.hint-sep { width: 1px; height: 12px; background: rgba(255,255,255,.18); }
.ready-cta {
  display: flex; align-items: center; gap: 12px; white-space: nowrap;
  font-family: var(--font-display); font-size: 20px; letter-spacing: .06em;
  color: #fff; text-transform: uppercase; animation: ctaPulse 1s ease-in-out infinite;
}
.ready-cta b { color: #ffd23f; }
.ready-dot { width: 9px; height: 9px; border-radius: 50%; background: #ffd23f; box-shadow: 0 0 12px #ffd23f; }
@keyframes ctaPulse { 0%,100% { opacity: 1; transform: scale(1) } 50% { opacity: .8; transform: scale(1.03) } }

/* ============================================================= REVEAL FLASH */
.reveal-flash {
  position: absolute; inset: 0; z-index: 50; pointer-events: none;
  background: radial-gradient(circle at 50% 60%, rgba(255,210,63,.5), rgba(255,255,255,.2) 30%, transparent 60%);
  animation: revealFlash .6s ease-out forwards;
}
@keyframes revealFlash { 0% { opacity: 0 } 18% { opacity: 1 } 100% { opacity: 0 } }

/* ============================================================= THEME: ANIME */
/* Manga paper, ink outlines, screentone, no digital glows. */

/* ---- background ---- */
.theme-anime .vp-court {
  background:
    radial-gradient(60% 75% at 16% 45%, color-mix(in srgb, var(--p1) 16%, transparent), transparent 70%),
    radial-gradient(60% 75% at 84% 45%, color-mix(in srgb, var(--p2) 16%, transparent), transparent 70%),
    radial-gradient(circle at 50% 44%, #fdfaf0 0%, #f4eeda 48%, #e6dcc0 100%);
}
.theme-anime .vp-court::before {
  content: ""; position: absolute; inset: -12%;
  background: repeating-conic-gradient(from 0deg at 50% 46%,
    rgba(22, 20, 15, .8) 0 .6deg, transparent .6deg 5.4deg);
  mask: radial-gradient(circle at 50% 46%, transparent 0 28%, #000 64%);
  opacity: .14;
}
.theme-anime .vp-court::after {
  left: 0; right: 0; top: 0; bottom: 0; width: auto; height: auto;
  transform: none; border: none; border-radius: 0; box-shadow: none;
  background-image: radial-gradient(circle, rgba(22, 20, 15, .2) 1.5px, transparent 1.7px);
  background-size: 9px 9px;
  mask: linear-gradient(180deg, transparent 58%, #000 92%);
}
.theme-anime .vp-grain { opacity: .3; mix-blend-mode: multiply; }
.theme-anime .vp-tag { color: rgba(22, 20, 15, .35); }
.theme-anime .vp-tag b { color: rgba(22, 20, 15, .6); }

/* ---- overlays ---- */
.theme-anime .scanline { display: none; }
.theme-anime .grain { mix-blend-mode: multiply; opacity: .07; }
.theme-anime .vignette {
  box-shadow: inset 0 0 0 6px #16140f, inset 0 0 110px 8px rgba(70, 52, 22, .3);
}

/* ---- ambient ---- */
.theme-anime .ember { box-shadow: none; filter: none; }

/* ---- portraits ---- */
.theme-anime .port-glow { opacity: .3; }
.theme-anime .port-glow.locked { animation: none; opacity: .45; }
.theme-anime .striped-ph {
  border: 2.5px solid #16140f;
  box-shadow: 7px 8px 0 rgba(22, 20, 15, .75);
  background: #fdfaf0;
}
.theme-anime .striped-ph.faded { opacity: .8; }
.theme-anime .striped-fill {
  background: repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--c) 16%, #f7f1de) 0 16px,
    color-mix(in srgb, var(--c) 8%, #f7f1de) 16px 32px);
  mask: none;
}
.theme-anime .striped-name {
  color: #16140f; font-style: italic;
  text-shadow: 3px 3px 0 color-mix(in srgb, var(--c) 55%, transparent);
}
.theme-anime .striped-hint { color: rgba(22, 20, 15, .55); border-color: rgba(22, 20, 15, .35); }
.theme-anime .port-base {
  background: radial-gradient(closest-side, rgba(22, 20, 15, .5), transparent);
  filter: blur(2px); opacity: .55;
}
.theme-anime .port-base.locked { opacity: .75; }
.theme-anime .plate-name { color: #16140f; text-shadow: none; }
.theme-anime .plate-tag { color: color-mix(in srgb, var(--c) 55%, #16140f); }
.theme-anime .port-prompt span { color: rgba(22, 20, 15, .6); }
.theme-anime .port-prompt em { color: color-mix(in srgb, var(--c) 55%, #16140f); }

/* ---- grid ---- */
.theme-anime .cell {
  background: #fdfaf0; border: 2px solid #16140f;
  box-shadow: 3px 3px 0 #16140f;
}
.theme-anime .cell-thumb {
  inset: 2px; opacity: 1;
  background: repeating-linear-gradient(135deg, #efe8d2 0 6px, #f8f3e3 6px 12px);
}
.theme-anime .cell-abbr { color: #16140f; text-shadow: none; }
.theme-anime .cell-corner {
  border-top-color: #16140f; opacity: .85;
}
.theme-anime .cell.empty {
  background: #ece3cb; border-color: rgba(22, 20, 15, .3); box-shadow: none;
}
.theme-anime .cell-slash {
  background: repeating-linear-gradient(135deg, transparent 0 9px, rgba(22, 20, 15, .14) 9px 10px);
}
.theme-anime .cell.is-cursor { transform: translateY(-4px); }
.theme-anime .cell.is-locked {
  border-color: #16140f;
  box-shadow: 3px 3px 0 #16140f, 0 0 0 3px var(--lock);
}
.theme-anime .cell.is-locked .cell-thumb {
  background: repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--lock) 30%, #fdfaf0) 0 6px,
    color-mix(in srgb, var(--lock) 16%, #fdfaf0) 6px 12px);
}
.theme-anime .cell-lockface { background: color-mix(in srgb, var(--lc) 18%, rgba(253, 250, 240, .55)); }
.theme-anime .lock-tick { box-shadow: none; }

/* ---- brackets / diamond ---- */
.theme-anime .sel-brackets .br { filter: none; border-width: 3.5px; }
.theme-anime .dia-ring {
  border-color: #16140f; box-shadow: none;
}
.theme-anime .dia-core {
  background: color-mix(in srgb, var(--dia) 42%, #fdfaf0);
  border: 1.5px solid #16140f;
}
.theme-anime .dia-q { color: #16140f; text-shadow: none; }
.theme-anime .dia-label { color: color-mix(in srgb, var(--dia) 45%, #16140f); }
.theme-anime .dia-spark { background: #16140f; box-shadow: none; }

/* ---- hint bar ---- */
.theme-anime .hint { color: rgba(22, 20, 15, .68); }
.theme-anime .hint i { color: rgba(22, 20, 15, .45); }
.theme-anime .hint.p1 b { color: color-mix(in srgb, var(--p1) 65%, #16140f); }
.theme-anime .hint.p2 b { color: color-mix(in srgb, var(--p2) 65%, #16140f); }
.theme-anime .hint.esc { color: rgba(22, 20, 15, .5); }
.theme-anime .hint-sep { background: rgba(22, 20, 15, .3); }
.theme-anime .ready-cta { color: #16140f; }
.theme-anime .ready-cta b { color: #a8730a; }
.theme-anime .ready-dot { background: #a8730a; box-shadow: none; }

/* ---- fx ---- */
.theme-anime .spray-burst .shard { box-shadow: none; }
.theme-anime .reveal-flash {
  background: radial-gradient(circle at 50% 60%, rgba(22, 20, 15, .35), rgba(255, 255, 255, .4) 30%, transparent 60%);
}


/* ============================================================= PHASE FLOW */
/* select -> court -> match. Background layers persist; content swaps. */
.select-lower {
  position: absolute; inset: 0;
  transition: opacity .45s ease, transform .45s ease;
}
.select-lower.out {
  opacity: 0; transform: translateY(38px) scale(.99);
  pointer-events: none;
}
.tab-mount {
  transition: transform .55s cubic-bezier(.55,-.18,.7,.1), opacity .5s ease, filter .55s ease;
}
.tab-mount.fly-out { opacity: 0; filter: blur(4px); pointer-events: none; }
.tab-mount.fly-out.p1 { transform: translate(-46px, -160%) rotate(-4deg); }
.tab-mount.fly-out.p2 { transform: translate(46px, -160%) rotate(4deg); }

/* ============================================================= COURT SELECT */
.court-layer {
  position: absolute; inset: 0; z-index: 24;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 30px;
}
.court-layer.gone { opacity: 0; transition: opacity .35s ease; pointer-events: none; }
@keyframes ccIn { from { opacity: 0; transform: translateY(42px); } }

.court-title {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  animation: ccIn .5s .08s backwards;
}
.court-title > span {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .3em;
  color: rgba(235,238,245,.5); text-transform: uppercase;
}
.court-title h2 {
  margin: 0; font-family: var(--font-display); font-size: 46px; line-height: .95;
  letter-spacing: .02em; color: #fff; text-transform: uppercase; font-weight: 400;
  white-space: nowrap;
  text-shadow: 0 2px 18px rgba(0,0,0,.55);
}
.court-row { display: flex; gap: 22px; }
.court-card {
  position: relative; width: 212px; padding: 12px 12px 14px;
  display: flex; flex-direction: column; gap: 8px;
  background: linear-gradient(180deg, #262931, #15171c);
  border: 1px solid #3a3f4a;
  box-shadow: 0 12px 28px rgba(0,0,0,.45);
  transition: transform .18s ease, box-shadow .18s ease;
  animation: ccIn .45s backwards;
  animation-delay: calc(.16s + var(--d) * .07s);
}
.court-card.is-cursor {
  transform: translateY(-8px);
  box-shadow: 0 0 0 2.5px #ffd23f, 0 16px 32px rgba(0,0,0,.55), 0 0 24px rgba(255,210,63,.18);
}
.court-card.is-locked {
  transform: translateY(-8px);
  box-shadow: 0 0 0 2.5px #ffd23f, 0 0 30px rgba(255,210,63,.4);
}
.cc-pill {
  align-self: flex-start;
  font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: .14em;
  background: #ffd23f; color: #06070a; padding: 2px 7px; line-height: 1.5;
}
.cc-thumb {
  height: 118px; position: relative;
  display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.06) 0 14px, rgba(255,255,255,.02) 14px 28px);
  border: 1px dashed rgba(255,255,255,.22);
}
.cc-thumb > span {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .2em;
  color: rgba(255,255,255,.38); text-transform: uppercase;
}
.cc-name {
  font-family: var(--font-display); font-size: 25px; line-height: .95;
  color: #fff; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cc-tag {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em;
  color: rgba(235,238,245,.55); text-transform: uppercase;
}
.cc-locktag {
  position: absolute; left: 0; right: 0; top: 44%; text-align: center;
  font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: .34em;
  color: #ffd23f; text-shadow: 0 0 14px rgba(255,210,63,.65);
  animation: lockBlink 1s steps(2) infinite;
}
.court-hint {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em;
  color: rgba(235,238,245,.55); text-transform: uppercase;
  animation: ccIn .5s .42s backwards;
}
.court-hint b { color: rgba(255,255,255,.85); font-weight: 700; }

/* court — anime theme */
.theme-anime .court-title > span { color: rgba(22,20,15,.5); }
.theme-anime .court-title h2 { color: #16140f; font-style: italic; text-shadow: 4px 4px 0 rgba(255,210,63,.55); }
.theme-anime .court-card {
  background: #fdfaf0; border: 2.5px solid #16140f;
  box-shadow: 7px 8px 0 rgba(22,20,15,.75);
}
.theme-anime .court-card.is-cursor {
  box-shadow: 7px 10px 0 rgba(22,20,15,.75), 0 0 0 3px #ffd23f;
}
.theme-anime .court-card.is-locked {
  box-shadow: 7px 10px 0 rgba(22,20,15,.75), 0 0 0 3px #a8730a;
}
.theme-anime .cc-pill { border: 1.5px solid #16140f; }
.theme-anime .cc-thumb {
  background: repeating-linear-gradient(135deg, #efe8d2 0 14px, #f8f3e3 14px 28px);
  border: 1.5px dashed rgba(22,20,15,.4);
}
.theme-anime .cc-thumb > span { color: rgba(22,20,15,.5); }
.theme-anime .cc-name { color: #16140f; font-style: italic; }
.theme-anime .cc-tag { color: rgba(22,20,15,.55); }
.theme-anime .cc-locktag { color: #a8730a; text-shadow: none; }
.theme-anime .court-hint { color: rgba(22,20,15,.6); }
.theme-anime .court-hint b { color: #16140f; }



/* ═════ design-demo.css ═════ */
/* design-demo.css — the Claude Design export's demo.css (2026-10-21): boot, locked tiles, COMING SOON hero. `.boot*` renamed `.dboot*` (ours is the pre-React splash). */
/* demo.css — Soul Jam Demo build: boot sequence (video → sponsor → UI) and locked sections. Only loaded by Soul Jam Demo.html. */
.dboot{position:fixed;inset:0;z-index:9999;background:#000;color:#EEE9D9;display:grid;place-items:center;transition:opacity .9s ease}
.dboot.out{opacity:0;pointer-events:none}
.dboot-vid{position:absolute;inset:0;display:grid;place-items:center;background:#0b0a0d}
.dboot-vid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dboot-vid .ph{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.dboot .dboot-vid .ph b{font-family:"Anton",sans-serif!important;font-weight:400;font-size:min(7vw,72px)!important;line-height:1;letter-spacing:.02em;text-transform:uppercase}
.dboot-vid .ph span{font-family:var(--font-mono,"Space Mono");font-size:12px;letter-spacing:.16em;text-transform:uppercase;opacity:.6}
.dboot-vid .play{width:72px;height:72px;border:3px solid #EEE9D9;display:grid;place-items:center;clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
.dboot-vid .play::after{content:"";border-left:22px solid #EEE9D9;border-top:13px solid transparent;border-bottom:13px solid transparent;margin-left:6px}
.dboot-bar{position:absolute;left:50%;width:min(320px,60vw);transform:translateX(-50%);bottom:72px;display:flex;flex-direction:column;gap:10px}
.dboot-bar i{display:block;height:3px;background:rgba(238,233,217,.15);position:relative;overflow:hidden}
.dboot-bar i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--p,0%);background:#FF8A4E;transition:width .12s linear}
.dboot-bar div{display:flex;justify-content:space-between;font-family:var(--font-mono,"Space Mono");font-size:12px;letter-spacing:.16em;text-transform:uppercase;opacity:.75}
.dboot-sp{position:absolute;inset:0;display:grid;place-items:center;background:#000;opacity:0;transition:opacity 1.1s ease}
.dboot-sp.in{opacity:1}
.dboot-sp .wrap{width:min(56vw,760px);aspect-ratio:16/9;display:flex;flex-direction:column;align-items:center;gap:18px}
.dboot-sp .wrap>span{font-family:var(--font-mono,"Space Mono");font-size:12px;letter-spacing:.2em;text-transform:uppercase;opacity:.55}
.dboot-sp image-slot{width:100%;flex:1;display:block}
.dboot-skip{position:absolute;right:24px;bottom:22px;z-index:2;min-height:40px;padding:0 12px;background:none;color:rgba(238,233,217,.55);border:0;font-family:var(--font-mono,"Space Mono");font-size:12px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.dboot-skip:hover{color:#EEE9D9}
.demo-tag{position:fixed;left:50%;top:10px;transform:translateX(-50%);z-index:60;padding:4px 12px;background:#FF8A4E;color:#09090B;font-family:var(--font-mono,"Space Mono");font-size:11px;font-weight:700;letter-spacing:.18em;pointer-events:none}
body.sj-demo .nav-list .nav-i:not(:first-child){opacity:.32}

body.sj-demo .hud-icons,body.sj-demo .mtop .icon-btn{display:none}
body.sj-demo .hud-sb{pointer-events:none}
body.sj-demo .mnav button:not(:first-child){opacity:.42}
.mode.dlock{cursor:not-allowed}
.mode.na:disabled{opacity:1;pointer-events:none}
.mode .dm-na{font-family:"Space Mono",monospace!important;font-size:11px!important;font-weight:700;letter-spacing:.16em;white-space:nowrap;color:rgba(238,233,217,.7)}
.mode.dlock .mode-art{filter:grayscale(1) brightness(.45)!important}
.mode.dlock .mode-v{opacity:.4}
.mode.dlock .mode-info{opacity:1;transform:none}
.mode .dl{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:6;display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--paper);text-align:center}
.mode.dlock .dl b{font-family:"Anton",sans-serif!important;font-weight:400;font-size:26px!important;line-height:1.1;white-space:nowrap;letter-spacing:.04em;padding:4px 12px;border:3px solid var(--paper);background:rgba(9,9,11,.6)}
.mode.dlock .dl span{font-family:"Space Mono",monospace!important;font-size:12px!important;white-space:nowrap;letter-spacing:.14em}
.dlk{flex:1;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:18px;max-width:640px}
.dlk p{margin:0;font-size:22px;opacity:.7;line-height:1.4;color:var(--paper);text-wrap:pretty}
.dlk .acts{display:flex;gap:10px}

body.sj-demo .ea-tag{font-size:0!important}
body.sj-demo .ea-tag::after{content:"DEMO";font-size:11px}
.dm-cut{position:absolute;right:-4%;bottom:10px;width:62%;height:70%;z-index:3;object-fit:contain;object-position:bottom;pointer-events:none;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.dm-cut.ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border:2px dashed rgba(238,233,217,.35);color:rgba(238,233,217,.7);text-align:center}
.dm-cut.ph span{font-family:"Space Mono",monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.dm-cut.ph i{font-style:normal;font-family:"Space Mono",monospace;font-size:10px;letter-spacing:.1em;opacity:.6}
.mode{transition:flex .55s cubic-bezier(.2,.8,.2,1),box-shadow .2s,transform .7s cubic-bezier(.2,.8,.2,1),opacity .5s}
.mode.launch{transform:scale(1.03);z-index:8;box-shadow:0 0 0 4px var(--mc),0 0 60px var(--mc)}
.mode.launch .dm-cut{transform:scale(1.08) translateY(-2%)}
.mode.launch .mode-info{opacity:0;transition:opacity .25s}
.modes:has(.launch) .mode:not(.launch){opacity:0}
.dm-fade{position:absolute;inset:0;z-index:50;background:#000;opacity:0;pointer-events:none;transition:opacity .45s ease .3s}
.dm-fade.on{opacity:1}
.dlk.hero{max-width:none;align-items:flex-start;gap:14px}
.dlk-k{font-family:"Space Mono",monospace;font-size:16px;letter-spacing:.2em;text-transform:uppercase;color:#FF8A4E}
.dlk-h{margin:0;font-family:"Anton",sans-serif;font-weight:400;font-style:italic;font-size:150px;line-height:.9;white-space:nowrap;letter-spacing:.01em;color:#EEE9D9;text-shadow:6px 6px 0 #6A2AA6;animation:dmIn .5s cubic-bezier(.2,.8,.2,1) both}
.dlk.hero .acts{margin-top:18px}
.dm-soon{position:absolute;inset:0;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;background:rgba(9,9,11,.82);cursor:pointer;animation:dmFade 1.6s ease both}
.dm-soon .dlk-h{font-size:170px}
@keyframes dmIn{from{opacity:0;transform:translateY(24px) skewX(-6deg)}to{opacity:1;transform:none}}
@keyframes dmFade{0%{opacity:0}12%{opacity:1}80%{opacity:1}100%{opacity:0}}


/* ═════ demo.css ═════ */
/* demo.css — what the demo adds to the Claude Design CSS: the screens the design doesn't have (welcome, legal, the
 * match frame, controls, device check, loading / error / coming-soon states) and small hooks for real data.
 * Only the design's tokens: ink / paper / soul-orange / soul-purple / P1 / P2, Anton / Oswald / Space Mono,
 * 3 px ink borders, hard offset shadows, clipped corners. */

/* ---------- boot (before React) ---------- */
#root>.boot{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#09090B;line-height:.82}
.boot .l1,.boot .l2{font-family:"Anton",sans-serif;font-size:64px;color:#EEE9D9}
.boot .l2{background:linear-gradient(100deg,#6A2AA6 0%,#b2419a 48%,#FF8A4E 100%);-webkit-background-clip:text;background-clip:text;color:transparent;transform:skewX(-8deg) translateX(22px)}
.noscript{position:fixed;left:0;right:0;bottom:30px;text-align:center;color:#EEE9D9;font-family:"Space Mono",monospace}
.boot-in{flex:1;display:grid;place-items:center}

/* ---------- the stage never scrolls: overflow:hidden boxes can still be scrolled by focus / scrollIntoView, which
   slid the whole 1600×900 stage sideways (the drawer parked off to the right gives it room); clip can't scroll ---------- */
.viewport,.stage-root,.cs-viewport,.cs-stage{overflow:clip}

/* ---------- shell without the nav (welcome, finish, signed-out legal) ---------- */
.shell.no-chrome .stage-root{--navw:0px}
.shell.no-chrome .shead{padding-right:0}
body.reduce-motion *,body.reduce-motion *::before,body.reduce-motion *::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important}

/* ---------- small kit additions ---------- */
/* the design's .rd (Run Detail layout: display:grid, flex:1) also matches the red tag "tag rd" — keep tags tags */
.tag.rd{display:inline-flex;flex:0 0 auto;min-height:0;gap:0;grid-template-columns:none}
.port-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 12%}
.env-photo{background-size:cover;background-position:50% 50%}
.btn.danger{background:var(--p2);color:var(--ink)}
.btn.danger:not([disabled]):hover{box-shadow:4px 4px 0 var(--ink)}
.md-p{font-size:18px;line-height:1.35;margin-bottom:10px;text-wrap:pretty}
.md-p:last-child{margin-bottom:0}
.notif{display:flex;flex-direction:column;height:100%;min-height:0}
.nf-list{flex:1;min-height:0}
.nf-empty{display:flex;flex-direction:column;gap:8px;padding:34px 18px;border:2px dashed rgba(9,9,11,.3);margin:16px 14px}
.nf-empty b{font-size:34px}
.nf-empty .u{opacity:.65;line-height:1.5;text-transform:none;letter-spacing:.02em}
.lnk{background:none;border:0;padding:0;cursor:pointer}

/* checkbox, in the toggle's language */
.chk{display:flex;align-items:center;gap:12px;min-height:40px;text-align:left;font-family:var(--font-cond);font-weight:600;font-size:17px;letter-spacing:.03em}
.chk-box{flex:0 0 auto;display:grid;place-items:center;width:30px;height:30px;border:var(--b) solid var(--ink);background:var(--paper-2);box-shadow:var(--shadow-sm);transition:transform var(--t-fast) var(--ease)}
.chk.on .chk-box{background:var(--soul-orange)}
.chk:active .chk-box{transform:translate(2px,2px);box-shadow:none}

/* coming soon — a taped-over panel */
.soon{position:relative;overflow:hidden;background:var(--stripe),var(--paper);max-width:920px}
.soon-dark{background:repeating-linear-gradient(135deg,rgba(255,255,255,.03) 0 14px,rgba(255,255,255,.06) 14px 28px),var(--char);color:var(--paper);border-color:var(--ink)}
.soon-tape{position:relative;display:flex;align-items:center;height:46px;padding:0 18px;background:var(--soul-orange);border-bottom:var(--b) solid var(--ink);color:var(--ink)}
.soon-tape::before{content:"";position:absolute;left:0;top:0;bottom:0;width:10px;background:var(--soul-purple)}
.soon-tape::after{content:"";position:absolute;right:0;top:0;bottom:0;width:180px;background:repeating-linear-gradient(135deg,var(--ink) 0 10px,transparent 10px 20px);opacity:.85;clip-path:polygon(18px 0,100% 0,100% 100%,0 100%)}
.soon-tape .d{font-size:26px;letter-spacing:.06em;padding-left:6px}
.soon-b{display:flex;flex-direction:column;gap:12px;padding:20px 24px 24px}
.soon-t{font-size:56px}
.soon-p{font-size:19px;line-height:1.4;max-width:720px;text-wrap:pretty}
.soon-a{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.soon.compact .soon-t{font-size:34px}
.soon.compact .soon-p{font-size:16px}
.soon-wrap{flex:0 0 auto}
.mode.is-soon .mode-art{filter:saturate(.25) brightness(.6)}
.mode.is-soon.open .mode-art{filter:saturate(.5) brightness(.75)}
.lab-ed.is-soon .lab-go{color:var(--soul-orange)}
.lab-ed.is-soon{background:var(--stripe),var(--paper)}

/* error + loading */
.errp{max-width:760px;display:flex;flex-direction:column}
.errp-dark{background:var(--paper)}
.errp-b{padding:16px 18px}
.loading{display:flex;flex-direction:column;gap:12px;align-items:flex-start;padding:18px 0}
.ld-bar{position:relative;width:360px;height:16px;border:var(--b) solid var(--ink);background:var(--paper-3);overflow:hidden}
.loading.on-dark .ld-bar{background:var(--char-2);border-color:var(--paper)}
.ld-bar span{position:absolute;top:0;bottom:0;width:40%;background:var(--soul-grad);animation:ldRun 1.1s cubic-bezier(.6,0,.4,1) infinite}
@keyframes ldRun{0%{left:-40%}100%{left:100%}}
.ld-t{font-size:40px}
.loading.on-dark .ld-t{color:var(--paper);text-shadow:3px 3px 0 var(--ink)}
.ld-s{opacity:.7}
.loading.on-dark .ld-s{color:var(--paper)}

/* settings additions */
.st-inp{width:260px;height:40px;font-size:16px}
.st-val{font-size:18px;text-transform:none;letter-spacing:.02em}
.st-err{color:#b3123c;padding:0 22px 12px;text-transform:none;letter-spacing:.02em;font-size:13px}
.st-c{flex-wrap:wrap;justify-content:flex-end}
.st-np{max-width:300px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* discover / profile / locker / postgame */
.dc-legend{position:absolute;left:12px;bottom:10px;background:var(--ink);color:var(--paper);padding:3px 8px;font-size:10px}
.dc-pin svg{fill:var(--paper)}
.pf-kv{display:grid;grid-template-columns:120px 1fr;gap:6px 14px;align-items:baseline;margin-bottom:10px}
.pf-kv .d{font-size:24px}
.lk-soon{grid-column:1/-1}
.lk-soon .soon{max-width:none}
.pg-facts{display:flex;gap:18px;flex-wrap:wrap;opacity:.8}
.pg-facts span+span::before{content:"·";margin-right:18px;opacity:.6}
.pg-box .pg-badge .u{opacity:.6;font-size:10px}

/* ---------- welcome / finish ---------- */
.wl{padding:0!important}
.wl .scr-bg{z-index:0}
.wl-logo{position:absolute!important;left:56px;top:40px;display:flex;flex-direction:column;line-height:.82;z-index:3}
.wl-logo .l1{font-family:var(--font-display);font-size:58px;color:var(--paper);text-shadow:3px 3px 0 var(--ink)}
.wl-logo .l2{font-family:var(--font-display);font-size:58px;background:var(--soul-grad);-webkit-background-clip:text;background-clip:text;color:transparent;transform:skewX(-8deg) translateX(20px)}
.wl-ea{position:absolute;left:150px;top:6px;white-space:nowrap}
.wl-main{position:absolute!important;left:110px;top:190px;width:780px;display:flex;flex-direction:column;gap:18px;z-index:3}
.wl-k{color:var(--paper);display:flex;align-items:center;gap:8px;opacity:.85}
.wl-h{font-size:148px;line-height:.86;color:var(--paper);text-shadow:7px 7px 0 var(--ink);animation:slamIn var(--t-slow) var(--ease) both}
.wl-form{display:flex;flex-direction:column;gap:14px;padding:22px 24px 20px;max-width:760px;clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,0 100%)}
.wl-lab{font-size:15px;letter-spacing:.04em;text-transform:none;font-family:var(--font-cond);font-weight:600}
.wl-row{display:flex;gap:12px;align-items:stretch;flex-wrap:wrap}
.wl-inp{flex:1;min-width:260px;height:64px;font-size:22px;text-transform:none}
.wl-inp::placeholder{letter-spacing:.06em}
.wl-legal{font-family:var(--font-mono);font-size:11.5px;line-height:1.55;opacity:.75;letter-spacing:.02em}
.wl-legal .lnk{font-family:var(--font-mono);font-size:11.5px;color:var(--soul-purple)}
.wl-dev{display:flex;gap:10px;align-items:center;text-transform:none;letter-spacing:.02em;flex-wrap:wrap}
.wl-sent{gap:12px}
.wl-mail{width:64px;height:64px;display:grid;place-items:center;background:var(--soul-orange);border:var(--b) solid var(--ink);box-shadow:var(--shadow-sm)}
.wl-sent-h{font-size:56px}
.wl-p{font-size:18px;line-height:1.4}
.wl-char{position:absolute!important;right:140px;bottom:0;z-index:2}
.wl-fan{position:absolute;right:70px;bottom:40px;z-index:2;width:640px;height:auto;pointer-events:none}
.shell.m .wl-fan{display:none}
.wl-char .port{border-bottom:0}
.wl .errp{max-width:760px}

/* ---------- the sign-up form (#/welcome, #/complete; the field kit is contact-ui.jsx) ----------
   The welcome column runs from 150 px to the stage's foot; the form scrolls inside it if it ever outgrows it
   (inline messages, the 13–17 note) — the stage itself never scrolls. */
.wl-main{top:150px;bottom:20px}
.wl-main>.wl-k,.wl-main>.wl-h{flex:0 0 auto}
.wl-h{font-size:116px}
.wl-main>.wl-form{flex:0 1 auto;min-height:0}
.wl-form.scroll-y{overflow-y:auto}
.wl-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px 16px;align-items:start}
.wl-end{display:flex;align-items:center;justify-content:space-between;gap:12px 16px;flex-wrap:wrap}
.wl-end .btn.lg{min-width:220px}
.wl-err{padding:0}
.wl-lab-t{font-family:var(--font-cond);font-weight:500;font-size:17px;line-height:1.35;letter-spacing:.01em}
.cf{display:flex;flex-direction:column;gap:6px;min-width:0}
.cf-l{font-size:11px;font-weight:700;letter-spacing:.1em}
.cf-hint{opacity:.6;font-weight:400}
.cf-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cf-inp{height:52px;font-size:20px;text-transform:none}
.cf-err{font-family:var(--font-mono);font-size:12px;line-height:1.4;color:#b3123c;letter-spacing:.01em;text-wrap:pretty}
.cf.bad .inp:not(.inp-wrap .inp),.cf.bad .inp-wrap{border-color:#b3123c;background:color-mix(in srgb,#b3123c 7%,var(--paper-2))}
.cf-phone{display:flex;gap:8px}
.cf-code{flex:0 0 78px;height:52px;font-size:20px;text-align:center;padding:0 6px;text-transform:none}
.cf-phone .cf-inp{flex:1;min-width:0}
/* BORN (age-ui.jsx): month + year side by side; the 13–17 note (Early Access's own look; ea.css repeats it for its build) */
.cf-dob{display:flex;gap:8px}
.cf-dob .cf-inp{flex:1 1 60%;min-width:0;padding:0 10px;font-size:18px}
.cf-dob .cf-year{flex:1 1 40%}
.ob-teen{display:flex;flex-direction:column;gap:10px;padding:14px 16px;border:3px solid var(--ink);background:var(--paper-3)}
.ob-teen b{font-size:26px}
.wl-checks{display:flex;flex-direction:column;gap:2px}
.wl-switch{opacity:.9}
.wl-switch .lnk{font-weight:700}
/* WELCOME BACK, <name> · CONTINUE — a device that kept its sign-in */
.wl-back{gap:16px}
.wl-back-who{display:flex;align-items:center;gap:18px}
.wl-back-t{display:flex;flex-direction:column;gap:4px;min-width:0}
.wl-back-k{font-size:11px;letter-spacing:.14em;opacity:.7}
.wl-back-h{font-size:46px;line-height:.95;overflow-wrap:anywhere}
.wl-back-e{font-size:13px;letter-spacing:.04em;text-transform:none;opacity:.75;overflow-wrap:anywhere}
.wl-notyou{margin:0}
.wl-signin .cf-inp{height:60px;font-size:22px}
.wl-u13 .errp{max-width:760px}
/* settings → account: the same fields, labelled by the row */
.st-cf{width:420px;max-width:100%}
.st-cf .cf-inp,.st-cf .cf-code{height:44px;font-size:17px}

/* ---------- legal ---------- */
.legal{flex:1;min-height:0;max-width:980px;padding:22px 30px 30px;font-size:18px;line-height:1.5}
.legal:focus-visible{outline-offset:-4px}
.legal-meta{opacity:.6;margin-bottom:6px}
.legal h2{font-size:30px;margin:22px 0 8px}
.legal p{margin-bottom:10px;max-width:820px;text-wrap:pretty}
.legal ul{margin:0 0 10px 22px;max-width:820px}
.legal li{margin-bottom:6px}
.legal code{font-family:var(--font-mono);font-size:14px;background:var(--paper-3);padding:0 4px}
.legal a{color:var(--soul-purple);text-decoration:underline;text-underline-offset:3px}
.legal .btn{margin-left:10px;vertical-align:middle}
.legal-banner{display:flex;align-items:center;gap:12px;margin:-22px -30px 16px;padding:10px 30px;background:var(--p2);border-bottom:var(--b) solid var(--ink);font-family:var(--font-display);font-size:22px;letter-spacing:.04em}
.legal-banner .u{font-size:11px;letter-spacing:.06em;text-transform:none;opacity:.85}

/* ---------- character select additions ---------- */
.cs-mode{position:absolute;left:50%;top:14px;transform:translateX(-50%);z-index:21;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#16140f;background:#fdfaf0;border:2px solid #16140f;box-shadow:3px 3px 0 rgba(22,20,15,.6);padding:4px 10px;white-space:nowrap}
.cs-mode b{color:#16140f;background:var(--p1);padding:0 5px;margin-right:4px}
/* MATCH SETTINGS — the top banner made interactive (select.jsx MatchSettings): the design's cream tab, ink rules, mono
   labels, display-face values; the pad / keys' row wears the grid's own selector brackets */
.cs-match{position:absolute;left:50%;top:12px;transform:translateX(-50%);z-index:21;width:372px;color:#16140f;background:#fdfaf0;border:2px solid #16140f;box-shadow:3px 3px 0 rgba(22,20,15,.6);font-family:var(--font-mono);text-transform:uppercase}
.cs-match.is-focus{box-shadow:3px 3px 0 rgba(22,20,15,.6),0 0 0 3px var(--p1)}
.csm-head{display:flex;align-items:center;gap:6px;height:24px;padding:0 8px;font-size:11px;letter-spacing:.12em;white-space:nowrap;border-bottom:2px solid #16140f}
.csm-head b{background:var(--p1);padding:0 5px}
.csm-head .csm-k{margin-left:auto;font-size:8.5px;letter-spacing:.2em;opacity:.55}
.csm-row{position:relative;display:grid;grid-template-columns:90px 26px 1fr 26px 92px;align-items:center;height:32px;padding:0 6px 0 8px;border-top:1px dashed rgba(22,20,15,.28)}
.csm-head+.csm-row{border-top:0}
.csm-row.is-cursor{background:color-mix(in srgb,var(--p1) 16%,#fdfaf0)}
.csm-row .sel-brackets{inset:1px}
.csm-lab{font-size:9.5px;font-weight:700;letter-spacing:.16em;opacity:.72}
.csm-row.is-cursor .csm-lab{opacity:1}
.csm-val{font-family:var(--font-display);font-weight:400;font-size:20px;line-height:1;letter-spacing:.03em;text-align:center;white-space:nowrap;transform:skewX(-6deg)}
.csm-arr{position:relative;width:26px;height:26px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center}
.csm-arr::after{content:"";position:absolute;inset:-6px}   /* (a bigger target on a small screen) */
.csm-arr i{width:0;height:0;border-top:7px solid transparent;border-bottom:7px solid transparent}
.csm-arr.l i{border-right:10px solid #16140f}
.csm-arr.r i{border-left:10px solid #16140f}
.csm-arr:hover:not(:disabled) i{filter:drop-shadow(0 0 3px var(--p1))}
.csm-arr:disabled{cursor:default;opacity:.2}
.csm-pips{display:flex;justify-content:flex-end;align-items:center;gap:3px}
.csm-pip{position:relative;height:16px;min-width:13px;padding:0 4px;border:1.5px solid #16140f;background:#fdfaf0;cursor:pointer;font-family:var(--font-mono);font-size:9px;font-weight:700;color:#16140f;transform:skewX(-14deg);line-height:1}
.csm-pip::after{content:"";position:absolute;inset:-5px -1px}
.csm-pips.n3 .csm-pip{min-width:24px}
.csm-pips.n2 .csm-pip{min-width:24px}
.csm-pips.n5 .csm-pip{min-width:0;width:13px;padding:0}
.csm-pip.on{background:#16140f;color:#fdfaf0}
.csm-pips.n5 .csm-pip.on{background:color-mix(in srgb,var(--p2) 70%,#16140f)}
.csm-pip.cur{box-shadow:2px 2px 0 rgba(22,20,15,.45)}
.csm-pip:hover:not(.cur){background:color-mix(in srgb,var(--p1) 30%,#fdfaf0)}
.csm-foot{height:18px;display:flex;align-items:center;justify-content:center;gap:4px;border-top:2px solid #16140f;font-size:8.5px;letter-spacing:.12em;color:rgba(22,20,15,.7);white-space:nowrap}
.csm-foot b{color:#16140f}
.grid-zone.is-away .sel-brackets{opacity:.35}
.cs-back{position:absolute;left:16px;bottom:9px;z-index:26;height:26px;padding:0 10px;font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.1em;color:#16140f;background:#fdfaf0;border:2px solid #16140f;box-shadow:2px 2px 0 rgba(22,20,15,.6);cursor:pointer}
.cs-back:hover{transform:translate(-1px,-1px)}
.hint-deny{font-family:var(--font-mono);font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#16140f;background:color-mix(in srgb,var(--p2) 30%,#fdfaf0);border:2px solid #16140f;padding:3px 10px;white-space:nowrap;max-width:1000px;overflow:hidden;text-overflow:ellipsis;animation:lockPop .2s ease-out}
button.ready-cta{background:none;border:0;cursor:pointer;font:inherit;font-family:var(--font-display);font-size:20px;letter-spacing:.06em}
@media (pointer:coarse){button.ready-cta{min-height:90px;padding:10px 40px}}
.rotate-hint{position:fixed;left:50%;top:10px;transform:translateX(-50%);z-index:99999;max-width:calc(100% - 24px);padding:8px 14px;background:#ffd23f;color:#16140f;border:2px solid #16140f;font:700 13px/1.2 var(--font-display);letter-spacing:.06em;text-align:center;pointer-events:none}
.cell{padding:0;text-align:center;cursor:pointer;font:inherit}
.cell.empty{cursor:default}
.cell-lock{position:absolute;right:3px;top:3px;z-index:3;color:#16140f;opacity:.75;line-height:0}
.cell.anon .cell-lock{left:50%;top:50%;right:auto;transform:translate(-50%,-50%);opacity:.5}
.cell.soon .cell-thumb{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--p2) 14%,#efe8d2) 0 6px,#f8f3e3 6px 12px)}
.cell.featured .cell-corner{border-top-color:#a8730a;opacity:1}
.court-card{text-align:left;cursor:pointer;font:inherit}
.cc-thumb{overflow:hidden}
.cc-thumb>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* a character's idle cut-out stands LOW in its card: the stat tab covers the card's top ~92 px, so the head starts below
   it and the feet stand on the card's floor line (the port-base shadow) */
.striped-cut{position:absolute;left:0;right:0;bottom:-2.3%;height:81%;pointer-events:none}   /* head ≈ 110 px down: under the stat tab */
.striped-cut>img,.striped-cut>video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 100%;transition:opacity .15s}
/* the 3-D-scan hologram that stands in for every slot without published art (no likeness) */
.striped-holo{position:absolute;left:0;right:0;bottom:-2.3%;width:100%;height:81%;object-fit:contain;object-position:50% 100%;pointer-events:none;animation:holoFlicker 4.2s steps(1) infinite}
.striped-ph.has-holo::after{content:"";position:absolute;left:0;right:0;top:0;height:18%;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(0,212,255,.18) 50%,transparent);transform:translateY(-100%);animation:holoScan 3.6s linear infinite}
@keyframes holoFlicker{0%,100%{opacity:.92}46%{opacity:.78}47%{opacity:.95}72%{opacity:.84}73%{opacity:.92}}
@keyframes holoScan{to{transform:translateY(560%)}}
.striped-tag.over-holo{top:102px;left:auto;right:12px;align-items:flex-end;gap:6px}
.striped-tag.over-holo .striped-name{display:none}
.striped-tag.over-holo .striped-lock svg{width:24px;height:24px}
.striped-ph.has-holo .striped-flag{display:none}   /* the over-holo tag carries IN PRODUCTION */
.cell-face{position:absolute;inset:2px;background-repeat:no-repeat;background-size:235% auto;background-position:50% 2%;pointer-events:none}   /* the figure-cropped cut-out / hologram: head and shoulders */
.cell-face.holo{opacity:.8}
.cell.anon .cell-face.holo{opacity:.55}
.cell.empty .cell-face.holo{opacity:.3}
@media (prefers-reduced-motion:reduce){.striped-holo{animation:none}.striped-ph.has-holo::after{display:none}}
/* ---- a character standing free on the stage (Stand): no card, no stripes — real height, soles on the floor line ---- */
.portrait-wrap.stand{inset:0;pointer-events:none}
.stand-fig{position:absolute}
.stand-fig .striped-cut{inset:0;height:auto}
.stand-fig .striped-cut>img,.stand-fig .striped-cut>video{object-fit:fill}
.stand-holo{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none;animation:holoFlicker 4.2s steps(1) infinite}
.portrait-wrap.stand.anon .stand-holo{opacity:.7}
.portrait-wrap.stand.waiting .stand-holo{opacity:.28;animation:none;filter:grayscale(.4)}
.portrait-wrap.stand .port-base{bottom:auto;transform:none;width:260px;height:32px}
.stand-plate{position:absolute;top:128px;left:18px;max-width:160px;display:flex;flex-direction:column;align-items:flex-start;gap:5px}
.portrait-wrap.stand.p2 .stand-plate{left:auto;right:18px;align-items:flex-end;text-align:right}
.sp-pill{white-space:nowrap;display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#16140f;background:#ffd23f;border:2px solid #16140f;padding:3px 8px}
.portrait-wrap.stand.anon .sp-pill{background:#fdfaf0}
.sp-arch{font-family:var(--font-display);font-size:19px;line-height:1.02;font-style:italic;color:#16140f;text-transform:uppercase;text-shadow:2px 2px 0 color-mix(in srgb,var(--c) 45%,transparent)}
.sp-meta{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.14em;color:color-mix(in srgb,var(--c) 60%,#16140f)}
.stand-wait{position:absolute;width:300px;display:flex;flex-direction:column;align-items:center;gap:6px}
.stand-wait b{font-family:var(--font-display);font-size:30px;font-weight:400;color:rgba(22,20,15,.5)}
.stand-wait em{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-style:normal;color:color-mix(in srgb,var(--p2) 55%,#16140f);animation:blinkPrompt 1.1s steps(2) infinite}
@media (prefers-reduced-motion:reduce){.stand-holo{animation:none}.stand-wait em{animation:none}}
.striped-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 10%}
.striped-flag{position:absolute;left:50%;top:136px;margin-left:-70px;width:140px;text-align:center;font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.16em;color:#16140f;background:#ffd23f;border:2px solid #16140f;padding:3px 0}
.striped-lock{color:rgba(22,20,15,.45);line-height:0}
.cpu-wait{width:358px;height:480px;display:grid;place-items:center}
.cpu-wait-in{display:flex;flex-direction:column;align-items:center;gap:6px;padding:20px 26px;border:2.5px dashed rgba(22,20,15,.35)}
.cpu-wait-in b{font-family:var(--font-display);font-size:30px;color:rgba(22,20,15,.45);font-weight:400}
.cpu-wait-in em{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-style:normal;color:color-mix(in srgb,var(--p2) 55%,#16140f);animation:blinkPrompt 1.1s steps(2) infinite}
.cs-center{position:absolute;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center}
.cs-big{font-family:var(--font-display);font-size:46px;color:#16140f;font-weight:400;text-shadow:4px 4px 0 rgba(255,210,63,.55)}
.cs-sub{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(22,20,15,.6);max-width:640px}
.cs-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.cs-btn{height:34px;padding:0 16px;font-family:var(--font-display);font-size:18px;letter-spacing:.04em;color:#16140f;background:#fdfaf0;border:2.5px solid #16140f;box-shadow:3px 3px 0 rgba(22,20,15,.75);cursor:pointer}
.cs-btn.pri{background:#ffd23f}

/* ---------- the match: the court fills the window; the shell's overlays sit on top ---------- */
.match-frame{position:fixed;inset:0;z-index:1;background:#000}
.match-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.shell.in-match{z-index:2;background:transparent;pointer-events:none}
.shell.in-match .stage-root{background:transparent}
.shell.in-match .match-ui,.shell.in-match .modal-layer,.shell.in-match .toasts{pointer-events:auto}
.match-scr{padding:0!important}
.match-ui{position:absolute!important;z-index:5}
.mx-cover{inset:0;background:radial-gradient(120% 90% at 60% 0%,#1d1b20,#0d0c0f 60%,#060607)}
.mx-cover::after{content:"";position:absolute;inset:0;background:url("/demo/assets/noise.svg") 0 0/220px;opacity:.1;mix-blend-mode:overlay;pointer-events:none}
.mx-center{inset:0;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;z-index:6}
.mx-panel{width:640px;max-width:calc(100% - 40px);max-height:calc(100% - 60px);display:flex;flex-direction:column;animation:popIn var(--t) var(--ease) both}
.mx-panel.wide{width:1180px}
.mx-b{padding:18px;overflow:auto}
.mx-p{font-size:18px;line-height:1.4;margin-top:10px;text-wrap:pretty}
.mx-load{display:flex;align-items:center}
.mx-load-in{position:relative;z-index:2;margin-left:140px;display:flex;flex-direction:column;gap:10px;color:var(--paper)}
.mx-k{opacity:.8}
.mx-court{font-size:120px;color:var(--paper);text-shadow:6px 6px 0 var(--soul-purple);animation:slamIn var(--t-slow) var(--ease) both}
.mx-slow{display:flex;flex-direction:column;gap:10px;max-width:720px}
.mx-slow b{font-size:44px}
.match-bar{left:16px;top:16px;z-index:7}
.mx-final{left:50%;top:40%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 40px;background:var(--ink);color:var(--paper);border:var(--b) solid var(--ink);box-shadow:8px 8px 0 var(--soul-orange);animation:popIn var(--t) var(--ease) both}
.mx-final b{font-size:96px}
.mx-pad{left:50%;bottom:28px;transform:translateX(-50%);display:flex;align-items:center;gap:14px;padding:12px 16px;background:var(--paper);border:var(--b) solid var(--ink);box-shadow:6px 6px 0 var(--p2);animation:toastIn var(--t) var(--ease) both}
.mx-pad.ok{box-shadow:6px 6px 0 #8fd19e}
.mx-pad b{display:block;font-size:24px}
.mx-pad i{font-style:normal;text-transform:none;letter-spacing:.02em}

/* controls sheet */
.ctl{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.ctl-h{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.ctl-h b{font-size:30px}
.ctl-g{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.ctl-gh{opacity:.6;padding-bottom:3px;border-bottom:2px solid var(--paper-line)}
.ctl-r{display:grid;grid-template-columns:150px 1fr;gap:10px;align-items:baseline}
.ctl-k{justify-content:center;height:auto;min-height:24px;padding:2px 6px;text-align:center;white-space:pre}
.ctl-v{font-size:15px;line-height:1.3}

/* device check */
.dv-row{display:grid;grid-template-columns:40px 1fr auto;gap:12px;align-items:center;padding:10px 0;border-bottom:2px solid var(--paper-line)}
.dv-row b{font-size:18px}
.dv-ok{width:32px;height:32px;display:grid;place-items:center;border:var(--b) solid var(--ink);font-family:var(--font-display);font-size:18px}
.dv-ok.y{background:#8fd19e}.dv-ok.n{background:var(--p2)}.dv-ok.w{background:var(--soul-orange)}

/* ---------- phones (the design's 430-wide companion layout) ---------- */
.shell.m .wl-main{left:16px;right:16px;top:150px;bottom:auto;width:auto;padding-bottom:24px}
.shell.m .wl-h{font-size:64px}
.shell.m .wl-grid{grid-template-columns:minmax(0,1fr)}
.shell.m .wl-back-h{font-size:34px}
.shell.m .wl-back-who .av{width:56px!important;height:56px!important}
.shell.m .wl-end{flex-direction:column;align-items:stretch}
.shell.m .wl-form{padding:18px 16px 16px}
.shell.m .st-cf{width:100%}
.shell.m .wl-logo{left:16px;top:20px}
.shell.m .wl-logo .l1,.shell.m .wl-logo .l2{font-size:40px}
.shell.m .wl-ea{left:110px}
.shell.m .wl-char{display:none}
.shell.m .wl-row{flex-direction:column}
.shell.m .ctl{grid-template-columns:1fr}
.shell.m .mx-panel{max-width:calc(100% - 24px)}
.shell.m .ctl-r{grid-template-columns:120px 1fr}
.shell.m .dv-row{grid-template-columns:36px 1fr}
.shell.m .dv-row i{grid-column:2}
.shell.m .mx-load-in{margin-left:20px}
.shell.m .mx-court{font-size:56px}
.shell.m .legal{padding:16px}

/* ---------- CREATE YOUR PLAYER (#/create): the Sprite Factory wizard's progress steps + one card per step ---------- */
.cr{display:flex;flex-direction:column;gap:18px;padding:4px 10px 28px 4px;max-width:1040px}
.cr-prog{display:flex;gap:0;list-style:none;margin:0;padding:0;max-width:760px}
.cr-prog li{flex:1;display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:4px solid var(--paper-line);color:rgba(9,9,11,.5)}
.cr-prog li i{display:grid;place-items:center;width:28px;height:28px;border:2px solid currentColor;font-style:normal;font-family:var(--font-display);font-size:15px}
.cr-prog li.on{color:var(--ink);border-color:var(--soul-orange)}
.cr-prog li.on i{background:var(--ink);color:var(--paper);box-shadow:3px 3px 0 var(--soul-orange)}
.cr-prog li.done{color:var(--ink);border-color:var(--ink)}
.cr-prog li.done i{background:var(--soul-orange);border-color:var(--ink);color:var(--ink)}
.cr-card{max-width:820px;clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,0 100%)}
.cr-card.wide{max-width:1040px}
.cr-b{display:flex;flex-direction:column;gap:16px;padding:18px 22px}
.cr-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.cr-step{display:flex;align-items:center;gap:8px}
.cr-step .inp{text-align:center;min-width:0}
.cr-step .btn{min-width:44px;padding:0 10px;flex:0 0 auto}
.cr-unit{opacity:.7}
.cr-conv{margin:-6px 0 0;opacity:.7}
.cr-chips{display:flex;flex-wrap:wrap;gap:8px}
.cr-chip{min-height:44px;padding:0 14px;border:var(--b) solid var(--ink);background:var(--paper-2);font-family:var(--font-cond);font-weight:600;font-size:16px;letter-spacing:.05em;transition:all var(--t-fast) var(--ease)}
.cr-chip:hover{transform:translateY(-2px)}
.cr-chip.on{background:var(--ink);color:var(--paper);box-shadow:4px 4px 0 var(--soul-orange);transform:translate(-2px,-2px)}
.cr-ta{height:92px;padding:10px 14px;resize:vertical;line-height:1.3}
.cr-fine{font-family:var(--font-cond);font-size:15px;line-height:1.4;color:rgba(9,9,11,.78);text-wrap:pretty}
.cr-consent{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border:2px dashed rgba(9,9,11,.35);background:var(--paper-2)}
.cr-consent.bad{border-color:#b3123c}
.cr-slots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.cr-slot{display:grid;grid-template-columns:132px minmax(0,1fr);gap:12px;padding:10px;border:var(--b) solid var(--ink);background:var(--paper-2)}
.cr-slot.done{box-shadow:4px 4px 0 var(--soul-orange)}
.cr-slot.bad{border-color:#b3123c}
.cr-ph{position:relative;height:156px;display:grid;place-items:center;background:repeating-linear-gradient(135deg,rgba(9,9,11,.05) 0 10px,rgba(9,9,11,.1) 10px 20px);border:2px solid var(--ink);overflow:hidden}
.cr-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cr-ok{position:absolute;right:6px;top:6px;display:grid;place-items:center;width:26px;height:26px;background:var(--soul-orange);border:2px solid var(--ink)}
.cr-sb{display:flex;flex-direction:column;gap:6px;min-width:0}
.cr-sb b{font-size:22px}
.cr-sa{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}
.cr-sum{display:grid;grid-template-columns:120px minmax(0,1fr);gap:8px 14px;align-items:baseline;margin:0}
.cr-sum dd{margin:0;font-family:var(--font-cond);font-weight:600;font-size:18px}
.cr-sum dd.d{font-size:30px;font-weight:400}
.cr-flow{display:flex;gap:0;list-style:none;margin:0;padding:0}
.cr-flow li{flex:1;display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:5px solid var(--paper-line);color:rgba(9,9,11,.45)}
.cr-flow li i{display:grid;place-items:center;width:34px;height:34px;border:3px solid currentColor;font-style:normal;font-family:var(--font-display);font-size:18px}
.cr-flow li span{font-size:26px}
.cr-flow li.on{color:var(--ink);border-color:var(--soul-orange)}
.cr-flow li.on i{background:var(--soul-orange);border-color:var(--ink)}
.cr-flow li.on.no{border-color:var(--p2)}.cr-flow li.on.no i{background:var(--p2)}
.cr-flow li.done{color:var(--ink);border-color:var(--ink)}
.cr-note{padding:12px 16px;border:var(--b) solid var(--ink);background:var(--paper-2);box-shadow:4px 4px 0 var(--soul-purple)}
.cr-note p{margin:6px 0 0;font-family:var(--font-cond);font-size:20px;font-weight:600;line-height:1.3;white-space:pre-wrap;overflow-wrap:anywhere}
.shell.m .cr-row,.shell.m .cr-slots{grid-template-columns:minmax(0,1fr)}
.shell.m .cr-slot{grid-template-columns:104px minmax(0,1fr)}
.shell.m .cr-ph{height:132px}
.shell.m .cr-prog li span{display:none}.shell.m .cr-prog li.on span{display:inline}
.shell.m .cr-flow li span{font-size:16px}
.shell.m .cr-sum{grid-template-columns:90px minmax(0,1fr)}
.shell.m .cr-b{padding:14px 14px}

/* ---------- Playground: two live tiles + the labs that are still soon; the TRAINING court picker ---------- */
.lab-live{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:16px;padding-right:4px}
.lab-big{min-height:200px}.lab-big b{font-size:56px}.lab-big>span:not(.tag):not(.lab-go){font-size:17px;opacity:.85}
.lab-go.live{margin-top:auto;color:var(--ink);background:var(--soul-orange);padding:4px 10px;border:2px solid var(--ink)}
.lab-big[disabled]{opacity:.6}
.lab-eds.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.tr-courts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding:6px 2px}
.tr-court{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:0 0 12px;text-align:left;overflow:hidden}
.tr-court b{font-size:30px;padding:0 14px}.tr-court .u{padding:0 14px;opacity:.7}
.tr-art{position:relative;width:100%;height:170px;border-bottom:var(--b) solid var(--ink);overflow:hidden}
.shell.m .lab-live,.shell.m .lab-eds.three,.shell.m .tr-courts{grid-template-columns:minmax(0,1fr)}

/* ---------- Discover: art thumbs in the list, the reserved floating-court slot ---------- */
.dc-row{flex-direction:row;align-items:center;gap:12px}
.dc-th{flex:0 0 74px;height:48px;border:2px solid var(--ink);background:var(--stripe),var(--paper-3);background-size:cover;background-position:50% 50%}
.dc-rt{display:flex;flex-direction:column;gap:3px;min-width:0}
.dc-slot{display:flex;flex-direction:column;gap:3px;padding:10px 14px;border:2px dashed rgba(9,9,11,.4);background:transparent;color:rgba(9,9,11,.6);cursor:default}
.dc-slot b{font-size:22px}.dc-slot .u{font-size:10px}

/* ---------- Profile totals, Progression, Locker's worn item ---------- */
.pf-tot{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;padding-bottom:12px;border-bottom:2px solid var(--paper-line)}
.pf-tot>div{display:flex;flex-direction:column;gap:2px}.pf-tot b{font-size:34px}.pf-tot .u{font-size:10px;opacity:.7}
.pf-note{display:block;margin-top:6px;line-height:1.5;text-transform:none;letter-spacing:.02em}
.pf-attrs .pf-note{color:var(--ink)}
.pr{display:flex;flex-direction:column;gap:16px;padding:2px 10px 8px 2px;max-width:1120px}
.pr-tiles{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:12px}
.pr-t{display:flex;flex-direction:column;gap:2px;padding:10px 12px}.pr-t b{font-size:44px}.pr-t .u{font-size:10px;opacity:.7}
.pr-cols{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:18px}
.pr-kv{display:grid;grid-template-columns:1fr auto;gap:8px 16px;margin:0;padding:14px 18px;align-items:baseline}
.pr-kv dd{margin:0;font-size:32px;text-align:right}
.pr-bars{display:flex;align-items:flex-end;gap:8px;height:190px;padding:14px 16px 10px}
.pr-col{flex:1 1 0;max-width:64px;min-width:0;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px}
.pr-col i{display:block;width:100%;background:var(--soul-purple);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--soul-orange)}
.pr-col b{font-size:20px}.pr-col .u{font-size:9px;opacity:.7;white-space:nowrap}
.lk-worn{grid-column:1/-1;display:flex;gap:18px;align-items:stretch;padding:0;color:var(--ink);overflow:hidden}
.lk-sw{flex:0 0 150px;background:linear-gradient(135deg,var(--sw) 0 70%,var(--sw2) 70% 100%);border-right:var(--b) solid var(--ink)}
.lk-wb{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:16px 18px 16px 0}
.lk-wb b{font-size:46px}.lk-fine{font-family:var(--font-cond);font-size:16px;opacity:.78;max-width:520px}
.shell.m .pf-tot{grid-template-columns:repeat(3,minmax(0,1fr))}
.shell.m .pr-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
.shell.m .pr-cols{grid-template-columns:minmax(0,1fr)}
.shell.m .lk-worn{flex-direction:column}.shell.m .lk-sw{flex-basis:90px;border-right:0;border-bottom:var(--b) solid var(--ink)}.shell.m .lk-wb{padding:0 16px 16px}

/* ---------- the demo build (design 2026-10-21): HUD without the Soul Bucks pill, hologram tiles, boot placeholders ---------- */
.hud-mini{gap:8px;align-items:center}
.hud-chip{display:flex;align-items:center;gap:10px;height:50px;padding:0 14px 0 8px;background:rgba(9,9,11,.72);border:2px solid rgba(238,233,217,.35);color:var(--paper);text-align:left}
.hud-chip:hover{border-color:var(--paper)}
.hud-chip span{display:flex;flex-direction:column;line-height:1}
.hud-chip b{font-family:var(--font-display);font-weight:400;font-size:20px;letter-spacing:.02em}
.hud-chip i{font-style:normal;font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;opacity:.65;margin-top:3px}
.hud-mini .icon-btn{background:rgba(9,9,11,.72);color:var(--paper);border-color:rgba(238,233,217,.35)}
body.sj-demo .mtop .icon-btn{display:inline-flex}
.dm-holo{opacity:.85;mix-blend-mode:normal}
.mode.dlock .dl{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:6}
.dboot-logo{width:min(42vw,360px);height:auto;filter:drop-shadow(0 4px 0 rgba(0,0,0,.5));animation:dmIn .8s cubic-bezier(.2,.8,.2,1) both}
.dboot-slot{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;width:100%;aspect-ratio:16/9;border:3px dashed rgba(238,233,217,.3);color:rgba(238,233,217,.6)}
.dboot-slot b{font-size:min(6vw,54px)}
.dboot-sp .wrap img{width:100%;height:auto}
.shell.m .dlk-h,.shell.m .dm-soon .dlk-h{font-size:64px;white-space:normal}

/* phone: the mode tiles stack — PLAY NOW tall, the locked ones short with their name across */
.shell.m .modes.m-stack>.mode{min-height:110px!important;position:relative}
.shell.m .modes.m-stack>.mode[data-mode=local]{min-height:380px!important}
.shell.m .mode.dlock .mode-v{writing-mode:horizontal-tb;transform:none;left:92px;top:50%;margin-top:-18px;bottom:auto;font-size:34px}
.shell.m .mode.dlock .dm-cut{width:30%;height:96%}
.shell.m .mode.dlock .dl{left:auto;right:18px;transform:translateY(-50%)}
.shell.m .mode .mode-n{top:8px;left:12px}
.shell.m .mode[data-mode=local] .mode-info{opacity:1;transform:none}

.dlk-ea{align-self:flex-start;padding:8px 16px;background:var(--soul-orange);color:var(--ink);border:3px solid var(--ink);font-family:var(--font-display);font-size:22px;letter-spacing:.04em;box-shadow:var(--shadow-sm)}
.dlk-ea:hover{color:var(--ink);background:var(--paper)}


/* ═════ controller.css ═════ */
/* controller.css — controller play on an iPad and in Soul Jam for Mac (demo/src/app-bridge.js): the Home Screen hint,
   the match's FULLSCREEN, the sign-in link box of an app the email cannot come back to. */

/* the iPad's "add to Home Screen" hint (home-hint.jsx) — on the stage, above the content, below the toasts */
.a2hs{position:absolute;left:50%;top:22px;transform:translateX(-50%);z-index:90;width:min(980px,calc(100% - 48px));display:flex;align-items:center;gap:16px;padding:14px 16px 14px 20px;background:var(--paper);color:var(--ink);border:var(--b) solid var(--ink);box-shadow:6px 6px 0 var(--soul-purple);animation:toastIn var(--t) var(--ease) both}
.a2hs-t{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0;font-size:17px;line-height:1.35}
.a2hs-t b.d{font-size:24px;letter-spacing:.02em}
.a2hs-t i{font-style:normal}
.a2hs-ok{flex:none}
.a2hs-x{flex:none;width:34px;height:34px;display:grid;place-items:center;background:transparent;border:0;color:var(--ink);cursor:pointer}
.shell.m .a2hs{top:auto;bottom:86px}

/* the match: EXIT and FULLSCREEN side by side; the loading screen's tap target */
.match-bar{display:flex;gap:10px}
.mx-fs{justify-content:flex-start;margin-top:14px}

/* the email sign-in link, pasted (the Home Screen app, Soul Jam for Mac: the email opens in the browser, not here) */
.wl-paste{display:flex;flex-direction:column;gap:8px;margin-top:14px;padding-top:14px;border-top:2px dashed rgba(22,20,15,.25)}
.wl-paste-row{display:flex;gap:10px;flex-wrap:wrap}
.wl-paste-row input{flex:1;min-width:220px;height:44px;padding:0 12px;font:16px var(--font-mono);border:var(--b) solid var(--ink);background:#fff;color:var(--ink)}