/* ==========================================================================
   ICEBOX / premium layer. Liquid glass, iridescent hairlines, springy motion.
   Loads after style.css and only overrides it: tokens first, then each surface.
   ========================================================================== */
@property --ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@property --sheen { syntax: '<percentage>'; initial-value: -40%; inherits: false; }

:root {
  --f-hud: 'Geist', 'SF Pro Display', system-ui, sans-serif;
  --f-mono: 'Geist Mono', 'SF Mono', ui-monospace, monospace;
  --f-disp: 'Syncopate', 'Geist', sans-serif;
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --aur: conic-gradient(from var(--ang), #6ee7ff, #a78bfa, #ff8ad4, #ffd98a, #6ee7ff);
  --aur-l: linear-gradient(100deg, #6ee7ff, #a78bfa 45%, #ff8ad4 75%, #ffd98a);
  --champ: #ffe2a8; --champ2: #ffc46b; --ice: #9fe8ff; --vio: #b79cff;
  --g-bg: linear-gradient(140deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .035) 42%, rgba(255, 255, 255, .07));
  --g-bg-d: linear-gradient(140deg, rgba(22, 24, 34, .62), rgba(8, 9, 14, .72));
  --g-edge: rgba(255, 255, 255, .16);
  --g-shadow: inset 0 1px 0 rgba(255, 255, 255, .34), inset 0 -1px 0 rgba(255, 255, 255, .05), inset 0 0 40px rgba(255, 255, 255, .03), 0 30px 80px -10px rgba(0, 0, 0, .6), 0 2px 8px rgba(0, 0, 0, .35);
  --g-blur: blur(30px) saturate(1.7) brightness(1.06);
  --r-xl: 30px; --r-l: 22px; --r-m: 16px; --r-s: 11px;
  --dim: #9c9ca8; --line: rgba(255, 255, 255, .14); --line2: rgba(255, 255, 255, .07);
  --glass: rgba(14, 15, 22, .55); --hd: rgba(14, 16, 26, .5);
}
svg { stroke-linecap: round; stroke-linejoin: round; }
html, body { background: #05060a; }
::selection { background: rgba(167, 139, 250, .45); }

/* ambient wash behind every menu screen so glass has something to refract */
.screen:not(#splash):not(#loading)::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60vw 50vh at 12% 8%, rgba(110, 231, 255, .13), transparent 70%), radial-gradient(50vw 50vh at 92% 88%, rgba(255, 138, 212, .11), transparent 70%), radial-gradient(40vw 40vh at 60% 30%, rgba(167, 139, 250, .08), transparent 70%); }
.screen.active { animation: scrIn .15s var(--ease) forwards; }
@keyframes scrIn { from { opacity: 0; transform: translateY(8px) scale(.99); } to { opacity: 1; transform: none; } }
.fx-grain { opacity: .05; }
.fx-vignette { background: radial-gradient(ellipse at center, transparent 55%, rgba(4, 5, 14, .55) 100%); }

/* ---------- splash + loading ---------- */
#splash { background: radial-gradient(70vw 60vh at 50% 55%, #14122a 0, #05060a 70%); }
.sp-line { height: 2px; background: var(--aur-l); box-shadow: 0 0 24px rgba(167, 139, 250, .8); border-radius: 2px; }
.sp-studio { font-family: var(--f-mono); color: var(--champ); opacity: 0; }
.sp-title { font-weight: 700; background: linear-gradient(180deg, #fff 20%, #b9b7d6 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: blur(14px); position: relative; }
.sp-title::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .95) 50%, transparent 65%); background-size: 250% 100%; background-position: 150% 0; -webkit-background-clip: text; background-clip: text; mix-blend-mode: overlay; animation: shine 3.2s 2.4s var(--ease) infinite; }
@keyframes shine { to { background-position: -50% 0; } }
.press { color: var(--dim); font-family: var(--f-mono); }
#loading { background: radial-gradient(80vw 70vh at 20% 90%, #17132e 0, #05060a 70%); }
.ld-top { font-family: var(--f-mono); }
.ld-pct { font-family: var(--f-hud); font-weight: 200; letter-spacing: -.06em; background: linear-gradient(180deg, #fff, #9a98c8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ld-pct small { -webkit-text-fill-color: var(--dim); }
.ld-tip { font-size: 14px; color: #b6b6c4; } .ld-tip::before { color: var(--champ); }
.ld-bar { height: 4px; left: calc(40px + var(--safe-l)); right: calc(40px + var(--safe-r)); bottom: calc(28px + var(--safe-b)); border-radius: 4px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.ld-bar i { background: var(--aur-l); border-radius: 4px; box-shadow: 0 0 22px rgba(167, 139, 250, .9); }

/* ---------- title ---------- */
#title::before { background: linear-gradient(90deg, rgba(4, 5, 12, .92) 0, rgba(4, 5, 12, .55) 36%, transparent 62%), linear-gradient(0deg, rgba(4, 5, 12, .75) 0, transparent 24%); }
.tag, .eyebrow { font-family: var(--f-mono); color: var(--dim); } .eyebrow b, .tag b { color: var(--champ); }
.chip { width: 44px; height: 44px; border-radius: 50%; background: var(--g-bg); border: 1px solid var(--g-edge); box-shadow: var(--g-shadow); backdrop-filter: var(--g-blur); transition: transform .35s var(--spring), background .25s, color .25s; }
.chip:hover, .chip:focus-visible { background: rgba(255, 255, 255, .92); color: #05060a; transform: scale(1.08); }
.logo { font-weight: 700; letter-spacing: .04em; filter: drop-shadow(0 12px 40px rgba(110, 231, 255, .18)); }
.logo .l1 { background: linear-gradient(180deg, #fff 30%, #a9a7cf); -webkit-background-clip: text; background-clip: text; color: transparent; }
.logo .l2 { -webkit-text-stroke: 0; background: var(--aur-l); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: aurDrift 7s linear infinite; }
@keyframes aurDrift { to { background-position: 200% 0; } }
.menu { border-top: 0; gap: 8px; }
.menu-item { padding: 15px 20px; border: 1px solid transparent; border-radius: var(--r-l); font-family: var(--f-hud); font-weight: 500; font-size: 15px; letter-spacing: .22em; color: #b3b3c2; background: transparent; transition: color .25s, background .3s, transform .25s var(--spring), border-color .3s; position: relative; overflow: hidden; isolation: isolate; }
.menu-item .n { font-family: var(--f-mono); color: #6e6e80; }
.menu-item::before { content: ''; position: absolute; inset: 0; width: auto; height: auto; left: 0; bottom: auto; z-index: -1; border-radius: inherit; background: var(--g-bg); opacity: 0; transform: scale(.96); transition: opacity .3s, transform .5s var(--spring); }
.menu-item::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; z-index: -1; background: var(--aur); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .3s; animation: spin 5s linear infinite; }
@keyframes spin { to { --ang: 360deg; } }
.menu-item.focus, .menu-item:hover { color: #fff; background: rgba(255, 255, 255, .03); transform: translateX(6px); }
.menu-item.focus::before, .menu-item:hover::before { width: auto; opacity: 1; transform: none; }
.menu-item.focus::after, .menu-item:hover::after { opacity: 1; }
.menu-item .arrow { color: var(--champ); }
.hero-card .hc-role, .hc-role { font-family: var(--f-mono); color: var(--champ); }
.hc-name { font-weight: 700; background: linear-gradient(180deg, #fff, #b5b3d6); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 6px 24px rgba(0, 0, 0, .6)); }
.hc-blurb { font-family: var(--f-hud); }
.prompts { font-family: var(--f-mono); color: #7f7f92; }
.glyph { border-radius: 8px; border: 1px solid rgba(255, 255, 255, .3); background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .04)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 2px 0 rgba(0, 0, 0, .35); font-family: var(--f-mono); color: #fff; }
.glyph.pad { border-radius: 50%; }

/* player card on title */
.pcard { padding: 12px 16px; border-radius: var(--r-l); background: var(--g-bg); border: 1px solid var(--g-edge); box-shadow: var(--g-shadow); backdrop-filter: var(--g-blur); }
.rc-title { color: var(--champ); font-family: var(--f-mono); }
.xp-bar { height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.xp-bar i { background: var(--aur-l); box-shadow: 0 0 16px rgba(167, 139, 250, .8); border-radius: 6px; }
.xp-n span, .arm-wallet em, .ad-hint, .rc-h span { color: var(--champ); }

/* ---------- panels ---------- */
.panel { border-radius: var(--r-xl); border: 1px solid var(--g-edge); background: var(--g-bg-d); box-shadow: var(--g-shadow); backdrop-filter: var(--g-blur); padding: 36px 38px 30px; }
.panel::before { inset: 0; left: 0; top: 0; width: auto; height: auto; border: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(60% 40% at 0% 0%, rgba(255, 255, 255, .16), transparent 70%), radial-gradient(50% 40% at 100% 100%, rgba(167, 139, 250, .14), transparent 70%); }
.panel::after { inset: 0; right: 0; bottom: 0; width: auto; height: auto; border: 0; border-radius: inherit; padding: 1px; pointer-events: none; background: linear-gradient(140deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0) 70%, rgba(167, 139, 250, .45)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.panel > * { position: relative; z-index: 1; }
.panel-head .idx { font-family: var(--f-mono); color: #000; background: var(--champ); padding: 3px 9px; border-radius: 99px; font-weight: 700; font-size: 10px; letter-spacing: .12em; }
.panel-head h2 { font-family: var(--f-hud); font-weight: 600; font-size: 28px; letter-spacing: -.01em; }
.panel-head .sub { color: #a4a4b4; font-size: 14px; }
.btn { border-radius: 99px; font-family: var(--f-hud); font-weight: 600; font-size: 13px; letter-spacing: .16em; padding: 15px 30px; background: var(--g-bg); border: 1px solid var(--g-edge); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); transition: transform .18s var(--spring), background .2s, color .2s; }
.btn.focus, .btn:hover { background: #fff; color: #05060a; border-color: #fff; transform: translateY(-2px) scale(1.03); box-shadow: 0 10px 34px rgba(167, 139, 250, .45); }
.btn.primary { background: linear-gradient(120deg, #fff, #ffe2a8); color: #05060a; border: 0; font-weight: 700; padding: 18px 46px; box-shadow: 0 8px 40px rgba(255, 196, 107, .35), inset 0 1px 0 #fff; }
.btn.primary.focus, .btn.primary:hover { background: var(--aur-l); color: #05060a; box-shadow: 0 12px 50px rgba(167, 139, 250, .6); }
.btn i { border-color: currentColor; }

/* option rows: inset grouped list */
.opts { border-radius: var(--r-l); background: rgba(255, 255, 255, .035); border: 1px solid var(--line2); padding: 4px; gap: 2px; }
.opt { border-radius: var(--r-m); border-bottom: 0; padding: 12px 16px; transition: background .25s, transform .4s var(--spring); }
.opt.focus, .opt:hover { background: rgba(255, 255, 255, .09); transform: scale(1.012); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.opt .lbl { font-family: var(--f-hud); font-size: 13px; letter-spacing: .04em; text-transform: none; color: #b3b3c2; font-weight: 500; } .opt.focus .lbl { color: #fff; }
.opt .val { font-family: var(--f-hud); font-weight: 500; }
.opt .txt { font-family: var(--f-hud); letter-spacing: .02em; font-weight: 600; }
.opt .val button { width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, .08); border: 1px solid var(--line); transition: transform .3s var(--spring), background .2s; }
.opt .val button:hover { background: #fff; color: #05060a; transform: scale(1.15); }
.opt .bar { height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .12); overflow: visible; }
.opt .bar i { border-radius: 6px; background: var(--aur-l); } .opt .bar i::after { content: ''; position: absolute; right: -8px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .5), 0 0 0 4px rgba(255, 255, 255, .12); }

/* operator cards */
.card { border-radius: var(--r-l); border: 1px solid var(--g-edge); background: var(--g-bg); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); transition: transform .5s var(--spring), border-color .3s, box-shadow .4s; }
.card::before { height: 100%; opacity: .0; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 40%, transparent), transparent 60%); transition: opacity .4s; }
.card:hover::before, .card.sel::before { opacity: .65; }
.card .cn { font-family: var(--f-hud); font-weight: 600; letter-spacing: .02em; } .card .cr { font-family: var(--f-mono); }
.card.sel { border-color: color-mix(in srgb, var(--c) 80%, #fff); transform: translateY(-6px) scale(1.02); box-shadow: 0 18px 50px -8px color-mix(in srgb, var(--c) 55%, transparent), inset 0 1px 0 rgba(255, 255, 255, .4); }
.opt.cardsrow.focus .card.sel { outline: 2px solid rgba(255, 255, 255, .55); outline-offset: 5px; border-radius: var(--r-l); }
.map-tag { font-family: var(--f-mono); color: var(--champ); }

/* controls, online, lobby, save */
.ctrl-col h3, .lc-label, .rc-h { font-family: var(--f-mono); color: var(--champ); }
.ctrl-row { border-color: var(--line2); }
.lobby-code, .lobby-roster { border-radius: var(--r-l); background: rgba(255, 255, 255, .04); border: 1px solid var(--line2); }
.lc-code { font-family: var(--f-hud); font-weight: 200; letter-spacing: .12em; background: var(--aur-l); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.lp { border-color: var(--line2); } .lp i { border-radius: 50%; }
.join-input, #saveText { border-radius: var(--r-m); background: rgba(0, 0, 0, .35); border: 1px solid var(--line); font-family: var(--f-mono); }
.join-input:focus, #saveText:focus { border-color: var(--ice); box-shadow: 0 0 0 4px rgba(110, 231, 255, .18); }
.roll { border-radius: 50%; }
.online-status { color: var(--ice); }

/* armory / record */
.arm-tabs { border: 0; background: rgba(255, 255, 255, .05); border-radius: 26px; padding: 4px; gap: 2px; display: inline-flex; max-width: 100%; }
.at { border-radius: 99px; font-family: var(--f-hud); font-weight: 500; font-size: 12px; letter-spacing: .08em; padding: 9px 16px; transition: background .3s, color .3s, transform .4s var(--spring); }
.at.on { background: #fff; color: #05060a; box-shadow: 0 4px 16px rgba(0, 0, 0, .4); } .at:hover:not(.on) { background: rgba(255, 255, 255, .08); }
.arm-tabs.focus .at.on { box-shadow: 0 0 0 3px rgba(167, 139, 250, .5), 0 4px 16px rgba(0, 0, 0, .4); }
.at-tile { border-radius: var(--r-l); background: var(--g-bg); border: 1px solid var(--line); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2); transition: transform .5s var(--spring), border-color .25s, background .25s; }
.at-tile:hover { transform: translateY(-3px); background: rgba(255, 255, 255, .1); }
.at-tile.sel { border-color: #fff; transform: translateY(-5px) scale(1.03); box-shadow: 0 16px 40px -8px rgba(167, 139, 250, .5), inset 0 1px 0 rgba(255, 255, 255, .35); }
.arm-grid.focus .at-tile.sel { outline: 2px solid rgba(255, 255, 255, .5); outline-offset: 3px; }
.at-tile .tn { font-family: var(--f-hud); font-weight: 600; letter-spacing: .04em; } .at-tile .ts { font-family: var(--f-mono); }
.at-tile.buy .ts { color: var(--champ); }
.arm-detail { border-left: 1px solid var(--line2); } .ad-n { font-family: var(--f-hud); font-weight: 600; letter-spacing: -.01em; font-size: 26px; }
.stat-tbl div { border-color: var(--line2); }
.rs, .ch, .bd, .res-xp { border-radius: var(--r-m); background: rgba(255, 255, 255, .045); border: 1px solid var(--line2); }
.rs b { font-family: var(--f-hud); font-weight: 600; }
.bd.got { border-color: rgba(255, 226, 168, .5); box-shadow: 0 0 24px -6px rgba(255, 196, 107, .5); } .bd b { font-family: var(--f-hud); letter-spacing: .04em; }
.ch.wk { border-color: rgba(255, 226, 168, .4); }
.rc-tag { font-family: var(--f-hud); font-weight: 700; letter-spacing: .02em; }
.res-xp .rx-h, .res-xp .rx-up { font-family: var(--f-hud); } .res-xp .rx-h b { color: var(--champ); }
.res-xp .rx-up { color: #05060a; background: linear-gradient(100deg, var(--champ), #fff, var(--champ2)); padding: 6px 14px; border-radius: 99px; width: max-content; letter-spacing: .24em; }
.rm { border-radius: 99px; border-color: rgba(255, 226, 168, .5); background: rgba(255, 196, 107, .08); color: var(--champ); }

/* ---------- pause / results / toast ---------- */
.res-banner { border: 0; border-radius: var(--r-xl) var(--r-xl) 0 0; margin: 0 -38px 22px; padding: 38px 38px 26px; background: linear-gradient(110deg, color-mix(in srgb, var(--team) 48%, transparent), transparent 75%); position: relative; }
.res-title { font-family: var(--f-hud); font-weight: 700; letter-spacing: -.03em; text-shadow: 0 8px 50px color-mix(in srgb, var(--team) 60%, transparent); }
.res-score { color: var(--champ); } .res-kicker { font-family: var(--f-mono); }
.toast { border-radius: 99px; background: var(--g-bg-d); border: 1px solid var(--g-edge); box-shadow: var(--g-shadow); backdrop-filter: var(--g-blur); font-family: var(--f-hud); letter-spacing: .06em; padding: 12px 22px; font-weight: 500; font-size: 13px; }
.toast.on { animation: toastIn .6s var(--spring); } @keyframes toastIn { from { transform: translateY(20px) scale(.9); } }

/* ---------- HUD ---------- */
#hud { --hc: #f4f4fa; --hc2: #fff; --hd: rgba(12, 14, 24, .48); --hg: linear-gradient(140deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .03) 50%, rgba(255, 255, 255, .06)); }
.trap { height: 24px; clip-path: none; border-radius: 99px; background: linear-gradient(90deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .25)); padding: 1px; box-shadow: 0 8px 30px rgba(0, 0, 0, .4), 0 0 22px rgba(110, 231, 255, .15); }
.trap-in { inset: 1px; clip-path: none; border-radius: 99px; background: rgba(10, 12, 22, .58); backdrop-filter: blur(16px) saturate(1.5); }
.sh-ghost, .sh-fill, .sh-over { top: 5px; bottom: 5px; left: 7px; max-width: calc(100% - 14px); -webkit-mask: repeating-linear-gradient(90deg, #000 0 9px, transparent 9px 12px); mask: repeating-linear-gradient(90deg, #000 0 9px, transparent 9px 12px); }
.sh-fill { background: linear-gradient(90deg, #9fe8ff, #fff 60%, #d8f6ff); box-shadow: 0 0 14px rgba(159, 232, 255, .8); }
.sh-over { background: linear-gradient(90deg, #a78bfa, #f0d4ff); }
.hp-row i { border-radius: 4px; height: 5px; } .hp-row i.on { background: linear-gradient(90deg, #ff6b8a, #ff9a8a); box-shadow: 0 0 10px rgba(255, 107, 138, .6); }
.compass { opacity: .9; } .cmp-hd { background: rgba(10, 12, 22, .6); border-radius: 6px; font-family: var(--f-mono); backdrop-filter: blur(8px); }

.h-weapon { padding: 16px 20px 14px; border-radius: var(--r-l); background: var(--hg); border: 1px solid rgba(255, 255, 255, .16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 20px 50px -10px rgba(0, 0, 0, .55); backdrop-filter: blur(20px) saturate(1.6); right: calc(24px + var(--safe-r)); top: calc(20px + var(--safe-t)); opacity: 1; }
.wp-mag { font-family: var(--f-hud); font-weight: 300; font-size: 58px; letter-spacing: -.04em; text-shadow: 0 0 22px rgba(159, 232, 255, .55); }
.wp-res { font-family: var(--f-hud); font-weight: 400; }
.wp-name { font-family: var(--f-mono); color: var(--champ); opacity: 1; }
.wp-mag.low { color: #ff8aa0; text-shadow: 0 0 22px rgba(255, 90, 120, .8); }
.wp-reload { font-family: var(--f-mono); color: var(--champ); }
.gr { border-radius: 99px; padding: 3px 11px; font-family: var(--f-hud); } .gr.on { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .3); }
.h-abil .ab.nova .ring circle { fill: rgba(10, 12, 22, .6); }
.ab .kd { border-radius: 99px; background: rgba(10, 12, 22, .8); font-family: var(--f-mono); }
.ab.blink .pips i { border-radius: 3px; }

.rd-tilt { background: radial-gradient(circle, rgba(159, 232, 255, .2), rgba(167, 139, 250, .09) 65%, transparent 72%); border: 1.5px solid rgba(255, 255, 255, .5); box-shadow: 0 0 30px rgba(110, 231, 255, .22), inset 0 0 30px rgba(159, 232, 255, .16); }
.rd-place { font-family: var(--f-mono); color: var(--champ); }
.feed-item { border-radius: 99px; border-left: 0; padding: 6px 16px 6px 12px; font-family: var(--f-hud); background: var(--hg), rgba(12, 14, 24, .4); border: 1px solid rgba(255, 255, 255, .12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18); backdrop-filter: blur(14px) saturate(1.5); }
.feed-item.me { background: linear-gradient(100deg, rgba(255, 226, 168, .3), rgba(255, 226, 168, .06)); border-color: rgba(255, 226, 168, .5); }
.h-score { width: 250px; }
.sc-meta { font-family: var(--f-mono); }
.sc-row { clip-path: none; border-radius: 14px; padding: 6px 12px; background: var(--hg), rgba(12, 14, 24, .4); border: 1px solid rgba(255, 255, 255, .12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18); backdrop-filter: blur(14px) saturate(1.5); }
.sc-row .sq { border-radius: 5px; box-shadow: 0 0 12px var(--tcol); } .sc-bar { height: 4px; border-radius: 4px; overflow: hidden; } .sc-bar i { border-radius: 4px; box-shadow: 0 0 10px var(--tcol); }
.sc-n { font-family: var(--f-hud); font-weight: 300; font-size: 26px; } .sc-row.mine { outline: 0; border-color: rgba(255, 255, 255, .5); }
.ob, .sc-lead, .pu { border-radius: 99px; background: var(--hg), rgba(12, 14, 24, .4); border: 1px solid rgba(255, 255, 255, .1); }
.mk span { font-family: var(--f-mono); }
.h-reticle svg { stroke-linecap: round; }
.h-hit.kill { color: var(--champ); filter: drop-shadow(0 0 10px rgba(255, 196, 107, .9)); }

.h-announce { font-family: var(--f-hud); font-weight: 600; font-size: 22px; letter-spacing: .34em; padding: 14px 34px 14px 42px; border-radius: 99px; background: var(--hg), rgba(12, 14, 24, .5); border: 1px solid rgba(255, 255, 255, .18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 20px 60px rgba(0, 0, 0, .5), 0 0 40px rgba(167, 139, 250, .22); backdrop-filter: blur(20px) saturate(1.6); text-shadow: none; white-space: nowrap; top: 17%; }
.h-announce small { font-family: var(--f-mono); color: var(--champ); }
.h-announce.on.xo, .h-announce.xo { color: #1a1206; background: linear-gradient(100deg, #ffe2a8, #fff, #ffc46b); border-color: #fff; box-shadow: 0 0 70px rgba(255, 196, 107, .7), 0 20px 60px rgba(0, 0, 0, .5); text-shadow: none; }
.h-announce.on.xo { animation: xoIn 3.4s var(--ease) forwards; }
@keyframes xoIn { 0% { opacity: 0; transform: translateY(-20px) scale(.7); filter: blur(10px); } 9% { opacity: 1; transform: scale(1.12); filter: none; } 16% { transform: scale(1); } 84% { opacity: 1; } 100% { opacity: 0; transform: translateY(-8px); } }
.h-count { font-family: var(--f-hud); font-weight: 200; letter-spacing: -.04em; background: linear-gradient(180deg, #fff, #9fe8ff); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 10px 50px rgba(110, 231, 255, .4)); }
.h-mode { font-family: var(--f-mono); color: var(--champ); }
.medal { border-radius: 99px; padding: 8px 24px 8px 10px; font-family: var(--f-hud); font-weight: 600; letter-spacing: .18em; background: var(--hg), rgba(12, 14, 24, .55); border: 1px solid rgba(255, 226, 168, .55); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 36px rgba(255, 196, 107, .22); backdrop-filter: blur(16px) saturate(1.5); animation: medalIn .6s var(--spring), medalOut .5s 2.4s forwards; }
.medal svg { border-radius: 50%; color: var(--champ); border-color: var(--champ); }
.medal.perfect { background: linear-gradient(100deg, rgba(255, 226, 168, .5), rgba(12, 14, 24, .6)); }
.h-prompt { border-radius: 99px; padding: 10px 20px; font-family: var(--f-hud); font-weight: 500; letter-spacing: .12em; background: var(--hg), rgba(12, 14, 24, .5); border: 1px solid rgba(255, 255, 255, .16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 12px 40px rgba(0, 0, 0, .4); backdrop-filter: blur(18px) saturate(1.5); }
.eb-line { background: var(--aur-l); height: 2px; border-radius: 2px; } .eb-k, .eb-m { font-family: var(--f-mono); color: var(--champ); }
.eb-n { font-family: var(--f-hud); font-weight: 600; letter-spacing: .14em; }
.h-tut { border-radius: var(--r-m); border-left: 0; border: 1px solid rgba(255, 255, 255, .14); background: var(--hg), rgba(12, 14, 24, .5); backdrop-filter: blur(16px); }
.h-board { clip-path: none; border-radius: var(--r-xl); border: 1px solid var(--g-edge); background: var(--g-bg-d); box-shadow: var(--g-shadow); backdrop-filter: var(--g-blur); padding: 28px 32px; }
.tbl td.nm { font-family: var(--f-hud); font-weight: 600; } .tbl tr.me td { background: rgba(255, 255, 255, .1); } .tbl tr.me td:first-child { border-radius: 10px 0 0 10px; } .tbl tr.me td:last-child { border-radius: 0 10px 10px 0; }
.h-board h4 { font-family: var(--f-mono); }
.dd .nm { font-family: var(--f-hud); font-style: normal; font-weight: 600; letter-spacing: -.02em; } .dd .rs { color: var(--champ); }

/* ---------- sanctum hub ---------- */
.hh-loc b { color: var(--champ); font-family: var(--f-mono); }
.hh-loc span { font-family: var(--f-hud); font-style: normal; font-weight: 600; letter-spacing: -.02em; font-size: 30px; }
.hh-disc span { font-family: var(--f-mono); color: var(--champ); } .hh-disc b { font-family: var(--f-hud); font-weight: 300; font-size: 28px; }
.hh-disc i { border-radius: 4px; height: 4px; } .hh-disc u { background: var(--aur-l); border-radius: 4px; }
.hh-prompt { clip-path: none; border-radius: 99px; background: var(--g-bg-d); border: 1px solid var(--g-edge); box-shadow: var(--g-shadow); backdrop-filter: var(--g-blur); }
.hh-prompt span { font-family: var(--f-hud); font-weight: 500; letter-spacing: .14em; }
.hh-toast { border: 1px solid var(--g-edge); border-radius: 99px; background: var(--g-bg-d); box-shadow: var(--g-shadow); font-family: var(--f-hud); font-weight: 500; letter-spacing: .16em; text-shadow: none; }
.hcard { clip-path: none; border-radius: var(--r-xl); background: var(--g-bg-d); border: 1px solid var(--g-edge); box-shadow: var(--g-shadow); backdrop-filter: var(--g-blur); padding: 30px 32px 22px; transition: opacity .4s, transform .7s var(--spring); }
.hc-k { font-family: var(--f-mono); color: var(--champ); } .hcard h2 { font-family: var(--f-hud); font-style: normal; font-weight: 600; letter-spacing: -.03em; font-size: 36px; }
.hc-s { color: var(--champ2); font-family: var(--f-mono); } .hc-b { font-family: var(--f-hud); color: #d4d4e0; }
.hc-stats { border-radius: var(--r-m); overflow: hidden; background: rgba(255, 255, 255, .08); } .hc-stats div { background: rgba(10, 11, 18, .7); }
.hc-act em { font-family: var(--f-mono); }
.mcard { clip-path: none; border-radius: var(--r-l); background: var(--g-bg); border: 1px solid var(--line); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22); transition: transform .5s var(--spring), border-color .25s, background .25s; }
.mcard.focus, .mcard:hover { background: rgba(255, 226, 168, .1); border-color: var(--champ); transform: translateY(-4px) scale(1.01); box-shadow: 0 18px 44px -10px rgba(255, 196, 107, .4); }
.mcard.daily { border-color: rgba(255, 226, 168, .5); background: linear-gradient(120deg, rgba(255, 196, 107, .16), rgba(255, 255, 255, .03)); }
.mc-top b { font-family: var(--f-hud); font-style: normal; font-weight: 600; letter-spacing: -.02em; } .mc-top em, .mc-rw { color: var(--champ); font-family: var(--f-mono); }
.mc-tags span { border-radius: 99px; } .ms-res { border-radius: var(--r-l); border-color: var(--champ); }
.ms-res b { font-family: var(--f-hud); font-style: normal; }

/* ---------- wow layer (driven by js/wow.js) ---------- */
.wow-letter { position: fixed; left: 0; right: 0; height: 12vh; background: #000; z-index: 9; pointer-events: none; }
.wow-letter.t { top: 0; animation: wlT 2.6s var(--ease) forwards; } .wow-letter.b { bottom: 0; animation: wlB 2.6s var(--ease) forwards; }
@keyframes wlT { 0%, 45% { transform: none; } 100% { transform: translateY(-100%); } } @keyframes wlB { 0%, 45% { transform: none; } 100% { transform: translateY(100%); } }
.wow-card { position: fixed; left: 50%; top: 42%; translate: -50% -50%; z-index: 9; pointer-events: none; text-align: center; display: grid; gap: 14px; justify-items: center; animation: wowCard 3.2s var(--ease) forwards; }
.wow-card small { font: 500 12px var(--f-mono); letter-spacing: .7em; text-indent: .7em; color: var(--champ); }
.wow-card b { font: 700 clamp(40px, 9vw, 120px)/1 var(--f-disp); letter-spacing: .12em; text-indent: .12em; background: linear-gradient(180deg, #fff 25%, #b9b7dd); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 12px 50px rgba(110, 231, 255, .35)); }
.wow-card i { display: block; height: 2px; width: min(46vw, 460px); background: var(--aur-l); box-shadow: 0 0 24px rgba(167, 139, 250, .9); border-radius: 2px; transform-origin: center; animation: wowLine 1.4s .2s var(--ease) both; }
.wow-card span { font: 400 13px var(--f-mono); letter-spacing: .4em; text-indent: .4em; color: #b9b9c8; }
@keyframes wowLine { from { transform: scaleX(0); } }
@keyframes wowCard { 0% { opacity: 0; transform: scale(1.25); filter: blur(18px); letter-spacing: .5em; } 18% { opacity: 1; transform: none; filter: none; } 78% { opacity: 1; } 100% { opacity: 0; transform: scale(.96) translateY(-14px); filter: blur(6px); } }
.wow-flash { position: fixed; inset: 0; z-index: 8; pointer-events: none; background: radial-gradient(circle at 50% 50%, rgba(255, 244, 214, .85), rgba(255, 196, 107, .25) 45%, transparent 70%); opacity: 0; animation: wowFlash .9s var(--ease) forwards; }
@keyframes wowFlash { 0% { opacity: 0; } 8% { opacity: 1; } 100% { opacity: 0; } }
.wow-rays { position: fixed; left: 50%; top: 42%; width: 160vmax; height: 160vmax; margin: -80vmax 0 0 -80vmax; z-index: 8; pointer-events: none; opacity: 0; background: repeating-conic-gradient(from 0deg, rgba(255, 226, 168, .5) 0deg 3deg, transparent 3deg 15deg); -webkit-mask: radial-gradient(circle, #000, transparent 45%); mask: radial-gradient(circle, #000, transparent 45%); animation: wowRays 2.6s var(--ease) forwards; mix-blend-mode: screen; }
@keyframes wowRays { 0% { opacity: 0; transform: rotate(0) scale(.4); } 15% { opacity: .9; } 100% { opacity: 0; transform: rotate(50deg) scale(1.2); } }
canvas.wow-confetti { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 45; pointer-events: none; }
.wow-lvl { position: fixed; left: 50%; top: 50%; translate: -50% -50%; z-index: 44; pointer-events: none; display: grid; justify-items: center; gap: 10px; animation: wowCard 3.8s var(--ease) forwards; }
.wow-lvl small { font: 500 12px var(--f-mono); letter-spacing: .7em; text-indent: .7em; color: var(--champ); }
.wow-lvl b { font: 200 clamp(120px, 26vh, 300px)/.9 var(--f-hud); letter-spacing: -.06em; background: linear-gradient(180deg, #fff 30%, var(--champ2)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 60px rgba(255, 196, 107, .6)); }
.wow-lvl span { font: 500 14px var(--f-mono); letter-spacing: .4em; text-indent: .4em; color: #fff; }
body.wow-shake #hud { animation: hudShake .28s; } @keyframes hudShake { 20% { transform: translate(-3px, 2px); } 40% { transform: translate(3px, -2px); } 60% { transform: translate(-2px, -1px); } 80% { transform: translate(1px, 2px); } }

/* accessibility: keep feedback, drop the big motion */
@media (prefers-reduced-motion: reduce) { .logo .l2, .menu-item::after, .sp-title::after, .wow-rays { animation: none; } }
@media (max-width: 900px) { .panel { padding: 26px 22px 22px; border-radius: 24px; } .res-banner { margin: 0 -22px 18px; padding: 28px 22px 20px; } .h-weapon { padding: 10px 14px; } .wp-mag { font-size: 42px; } .h-announce { font-size: 15px; padding: 10px 22px; } }
@media (max-height: 520px) { .h-weapon { padding: 6px 12px; } .trap { height: 18px; } .panel { padding: 18px 22px; } .btn { padding: 11px 20px; } .h-announce { font-size: 14px; padding: 8px 20px; } }

/* compaction for short viewports so the 8-item menu always fits */
@media (max-height: 700px) {
  .menu { gap: 2px; } .menu-item { padding: 9px 18px !important; font-size: 13px; letter-spacing: .2em; }
  .logo { font-size: clamp(40px, 9vh, 90px); margin-bottom: 22px; } .eyebrow { margin-bottom: 12px; }
  .pcard { top: 84px; }
}
.rc-head > div { display: grid; gap: 3px; line-height: 1.25; } .pcard .rc-tag { line-height: 1.2; }
#pCard > div { display: grid; gap: 3px; line-height: 1.25; justify-items: end; min-width: 190px; } #pCard .rc-title, #pCard .rc-tag, #pCard .rc-rank { margin: 0; }
.h-top { width: min(440px, 38vw); }
@media (max-height: 700px) {
  .panel { padding: 24px 28px 20px; } .panel-head { margin-bottom: 16px; } .panel-head h2 { font-size: 24px; } .panel-foot { margin-top: 16px; }
  .opt { padding: 8px 14px; } .opts { padding: 3px; } .btn.primary { padding: 14px 38px; } .cards { margin-bottom: 14px; }
}

/* ---------- classic BR scope: black surround, rounded window, stadia reticle ---------- */
.h-brs { inset: 0; display: none; pointer-events: none; color: #fff; --sc: #fff; }
.h-brs.on { display: grid; place-items: center; animation: brIn .22s var(--ease); } @keyframes brIn { from { opacity: 0; transform: scale(1.08); } }
.brs-win { position: relative; width: min(66vw, 118vh); aspect-ratio: 2 / 1; border-radius: 34px; box-shadow: 0 0 0 100vmax #000, inset 0 0 90px 24px rgba(0, 0, 0, .55); }
.brs-win::before { content: ''; position: absolute; inset: 0; border-radius: inherit; border: 1px solid rgba(255, 255, 255, .32); }
.brs-win::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 3px); mix-blend-mode: overlay; }
.brs-win svg { position: absolute; inset: 4%; width: 92%; height: 92%; overflow: visible; fill: none; stroke: var(--sc); stroke-width: 1.6; stroke-linecap: butt; filter: drop-shadow(0 0 3px rgba(0, 0, 0, .9)); }
.brs-win svg .cb { stroke-width: 2.4; opacity: .8; } .brs-win svg .ct { stroke-width: 1.2; opacity: .8; } .brs-win svg .dr { stroke-width: 2; } .brs-win svg .dot { fill: var(--sc); stroke: none; }
.h-brs.lock { --sc: #ff4a58; }
.brs-zt { position: absolute; left: 5%; top: 7%; font: 700 clamp(14px, 2.6vh, 24px) var(--f-mono); letter-spacing: .14em; }
.brs-rg, .brs-am { position: absolute; right: 5%; display: grid; justify-items: end; gap: 1px; } .brs-rg { top: 6%; } .brs-am { bottom: 6%; }
.brs-win small { font: 500 9px var(--f-mono); letter-spacing: .4em; color: #b5b5b5; } .brs-win b { font: 700 clamp(15px, 2.6vh, 24px) var(--f-mono); font-variant-numeric: tabular-nums; }

/* ==================== NOIR PASS: black glass, white ink, one champagne accent ==================== */
:root {
  --aur: conic-gradient(from var(--ang), #fff, #ffe2a8, #6a6a72, #fff);
  --aur-l: linear-gradient(100deg, #ffffff, #ffe9c0 55%, #ffc46b);
  --g-bg: linear-gradient(150deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .025) 45%, rgba(255, 255, 255, .06));
  --g-bg-d: linear-gradient(165deg, rgba(14, 14, 17, .9), rgba(2, 2, 4, .95));
  --g-edge: rgba(255, 255, 255, .2); --dim: #a6a6b0; --line: rgba(255, 255, 255, .2); --line2: rgba(255, 255, 255, .09);
  --hd: rgba(0, 0, 0, .58);
}
.screen:not(#splash):not(#loading)::after { background: radial-gradient(60vw 50vh at 8% 6%, rgba(255, 255, 255, .07), transparent 70%), radial-gradient(50vw 40vh at 96% 96%, rgba(255, 196, 107, .07), transparent 70%); }
#splash { background: radial-gradient(70vw 60vh at 50% 55%, #17171c 0, #030304 70%); } #loading { background: radial-gradient(80vw 70vh at 20% 90%, #17171c 0, #030304 70%); }
.sp-line, .ld-bar i { box-shadow: 0 0 22px rgba(255, 226, 168, .8); }
.panel { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 40px 110px -10px rgba(0, 0, 0, .85), 0 0 0 1px rgba(0, 0, 0, .8); }
.panel::before { background: radial-gradient(55% 35% at 0% 0%, rgba(255, 255, 255, .13), transparent 70%), radial-gradient(45% 35% at 100% 100%, rgba(255, 196, 107, .08), transparent 70%); }
.panel::after { background: linear-gradient(140deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 28%, rgba(255, 255, 255, 0) 72%, rgba(255, 226, 168, .55)); }
.panel-head h2 { font-family: var(--f-disp); font-weight: 700; font-size: 22px; letter-spacing: .24em; text-transform: uppercase; }
.panel-head .idx { background: #fff; color: #000; }
.panel-head .sub { color: var(--dim); }
.logo .l2 { background: var(--aur-l); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; }
.menu-item { color: #c4c4cc; font-weight: 600; }
.menu-item.focus, .menu-item:hover { color: #05060a; background: #fff; box-shadow: 0 0 44px rgba(255, 255, 255, .28), 0 10px 30px rgba(0, 0, 0, .5); border-color: #fff; }
.menu-item.focus::before, .menu-item:hover::before { opacity: 0; } .menu-item.focus::after, .menu-item:hover::after { opacity: 0; }
.menu-item.focus .n, .menu-item:hover .n, .menu-item.focus .arrow, .menu-item:hover .arrow { color: #05060a; }
.btn { color: #fff; border-color: rgba(255, 255, 255, .34); background: rgba(255, 255, 255, .06); }
.btn.focus, .btn:hover { background: #fff; color: #05060a; box-shadow: 0 0 40px rgba(255, 255, 255, .3); }
.btn.primary { background: #fff; color: #05060a; box-shadow: 0 0 34px rgba(255, 255, 255, .25), inset 0 -2px 0 rgba(0, 0, 0, .18); }
.btn.primary.focus, .btn.primary:hover { background: var(--aur-l); box-shadow: 0 0 50px rgba(255, 226, 168, .55); }
.opts { background: rgba(0, 0, 0, .35); border-color: rgba(255, 255, 255, .14); }
.opt.focus, .opt:hover { background: #fff; box-shadow: 0 0 30px rgba(255, 255, 255, .18); transform: scale(1.01); } .opt.focus .lbl, .opt:hover .lbl { color: #05060a; } .opt.focus .txt, .opt:hover .txt, .opt.focus .val, .opt:hover .val { color: #05060a; }
.opt.focus .val button, .opt:hover .val button { color: #05060a; border-color: rgba(0, 0, 0, .35); background: rgba(0, 0, 0, .06); }
.opt.focus .bar, .opt:hover .bar { background: rgba(0, 0, 0, .18); } .opt.focus .bar i, .opt:hover .bar i { background: #05060a; } .opt.focus .bar i::after, .opt:hover .bar i::after { background: #05060a; box-shadow: 0 0 0 4px rgba(0, 0, 0, .12); }
.opt.cardsrow.focus, .opt.cardsrow:hover { background: none; box-shadow: none; transform: none; }
.opt .lbl { color: #d2d2da; }
.at.on { background: #fff; color: #05060a; }
.card.sel, .at-tile.sel { box-shadow: 0 0 0 1px rgba(255, 255, 255, .7), 0 18px 50px -8px rgba(255, 255, 255, .22), inset 0 1px 0 rgba(255, 255, 255, .4); }
.mcard.focus, .mcard:hover { box-shadow: 0 0 0 1px var(--champ), 0 18px 44px -10px rgba(255, 196, 107, .35); }
.glyph { background: linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .05)); }
/* HUD: blacker, sharper */
#hud { --hd: rgba(0, 0, 0, .55); --hg: linear-gradient(150deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .02) 50%, rgba(255, 255, 255, .05)); }
.trap-in { background: rgba(0, 0, 0, .62); } .trap { background: linear-gradient(90deg, rgba(255, 255, 255, .8), rgba(255, 255, 255, .3)); box-shadow: 0 8px 30px rgba(0, 0, 0, .6), 0 0 18px rgba(255, 255, 255, .12); }
.sh-fill { background: linear-gradient(90deg, #dcdce4, #fff); box-shadow: 0 0 14px rgba(255, 255, 255, .7); }
.h-weapon { background: linear-gradient(150deg, rgba(0, 0, 0, .74), rgba(0, 0, 0, .5)); border-color: rgba(255, 255, 255, .22); } .wp-mag { text-shadow: 0 0 22px rgba(255, 255, 255, .5); font-weight: 200; }
.rd-tilt { background: radial-gradient(circle, rgba(255, 255, 255, .16), rgba(255, 255, 255, .05) 65%, transparent 72%); box-shadow: 0 0 30px rgba(255, 255, 255, .14), inset 0 0 30px rgba(255, 255, 255, .12); }
.feed-item, .sc-row, .h-prompt, .ob, .sc-lead, .pu, .h-tut { background: linear-gradient(150deg, rgba(0, 0, 0, .72), rgba(0, 0, 0, .5)); border-color: rgba(255, 255, 255, .16); }
.h-announce { background: linear-gradient(150deg, rgba(0, 0, 0, .8), rgba(0, 0, 0, .58)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 20px 60px rgba(0, 0, 0, .6), 0 0 34px rgba(255, 255, 255, .1); }
.h-count { background: linear-gradient(180deg, #fff, #cfcfd6); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 10px 40px rgba(255, 255, 255, .3)); }
.medal { background: linear-gradient(150deg, rgba(0, 0, 0, .8), rgba(0, 0, 0, .55)); }
#hud.brscoped .h-weapon, #hud.brscoped .h-tut, #hud.brscoped .h-abil { opacity: 0; transition: opacity .15s; }
.h-flash { background: radial-gradient(ellipse at center, transparent 45%, rgba(255, 255, 255, .45)); }
/* icons */
.ico { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.menu-item .ico { width: 22px; height: 22px; opacity: .9; margin-right: -4px; } .btn .ico { width: 17px; height: 17px; margin-right: -4px; } .at .ico { width: 15px; height: 15px; margin-right: 6px; vertical-align: -3px; }
.opt .lbl { display: flex; align-items: center; gap: 12px; } .opt .lbl .ico { width: 18px; height: 18px; opacity: .7; }
.menu-item.focus .ico, .menu-item:hover .ico { opacity: 1; }
.btn .ico + span { order: 1; } .btn i { order: 2; }
@media (max-height: 620px) { .eyebrow { display: none; } .menu-item { padding: 6px 16px !important; font-size: 12px; } .logo { font-size: clamp(34px, 8vh, 70px); margin-bottom: 14px; } .menu-item .ico { width: 18px; height: 18px; } }

/* ==================== ARCADE MOTION: everything dashes, slams or sweeps ==================== */
@keyframes dashIn { from { opacity: 0; transform: translateX(-46px) skewX(-14deg); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes dashInR { from { opacity: 0; transform: translateX(46px) skewX(12deg); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes wipe { from { clip-path: polygon(0 0, 0 0, -14% 100%, -14% 100%); } to { clip-path: polygon(0 0, 118% 0, 104% 100%, 0 100%); } }
@keyframes shineX { from { background-position: 160% 0; } to { background-position: -60% 0; } }
@keyframes icoPop { 0% { transform: scale(.6) rotate(-18deg); } 60% { transform: scale(1.28) rotate(6deg); } 100% { transform: none; } }
@keyframes streaks { from { background-position: 0 0; } to { background-position: -600px 0; } }
@keyframes ticker { to { transform: translateX(-50%); } }
@keyframes stripes { to { background-position: 32px 0; } }
@keyframes underRun { 0% { transform: scaleX(0); transform-origin: left; } 50% { transform: scaleX(1); transform-origin: left; } 51% { transform-origin: right; } 100% { transform: scaleX(0); transform-origin: right; } }
@keyframes medalSlam { 0% { opacity: 0; transform: translateX(-120px) skewX(-20deg) scale(1.6); } 55% { opacity: 1; transform: translateX(10px) skewX(4deg) scale(1); } 100% { transform: none; } }
@keyframes annSlash { 0% { opacity: 0; transform: translateX(-160px) skewX(-24deg); filter: blur(10px); letter-spacing: .8em; } 14% { opacity: 1; transform: translateX(8px) skewX(3deg); filter: none; letter-spacing: .34em; } 22% { transform: none; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateX(120px) skewX(20deg); filter: blur(6px); } }
@keyframes feedSlam { from { opacity: 0; transform: translateX(-70px) skewX(-18deg); } to { opacity: 1; transform: none; } }
@keyframes pulseRing { from { box-shadow: 0 0 0 0 rgba(255, 255, 255, .5); } to { box-shadow: 0 0 0 22px rgba(255, 255, 255, 0); } }

.screen.active .panel { animation: wipe .5s var(--ease) backwards; }
.screen.active .panel-head { animation: dashIn .6s .12s var(--spring) backwards; }
.screen.active .panel-head h2 { position: relative; } .screen.active .panel-head h2::after { content: ''; position: absolute; left: 0; right: 0; bottom: -8px; height: 2px; background: var(--aur-l); animation: underRun 2.8s .5s var(--ease) infinite; }
.screen.active .opt, .screen.active .cards .card, .screen.active .at-tile, .screen.active .mcard, .screen.active .ch, .screen.active .rs { animation: dashInR .5s var(--spring) backwards; }
.screen.active .opt:nth-child(2), .screen.active .card:nth-child(2), .screen.active .at-tile:nth-child(2), .screen.active .mcard:nth-child(2) { animation-delay: .05s; }
.screen.active .opt:nth-child(3), .screen.active .card:nth-child(3), .screen.active .at-tile:nth-child(3), .screen.active .mcard:nth-child(3) { animation-delay: .1s; }
.screen.active .opt:nth-child(4), .screen.active .card:nth-child(4), .screen.active .at-tile:nth-child(4), .screen.active .mcard:nth-child(4) { animation-delay: .15s; }
.screen.active .opt:nth-child(5), .screen.active .at-tile:nth-child(5), .screen.active .mcard:nth-child(5) { animation-delay: .2s; }
.screen.active .opt:nth-child(n+6), .screen.active .at-tile:nth-child(n+6), .screen.active .mcard:nth-child(n+6) { animation-delay: .26s; }
#title.active .menu-item { animation: dashIn .7s var(--spring) backwards; }
#title.active .menu-item:nth-child(1) { animation-delay: .1s; } #title.active .menu-item:nth-child(2) { animation-delay: .16s; } #title.active .menu-item:nth-child(3) { animation-delay: .22s; } #title.active .menu-item:nth-child(4) { animation-delay: .28s; }
#title.active .menu-item:nth-child(5) { animation-delay: .34s; } #title.active .menu-item:nth-child(6) { animation-delay: .4s; } #title.active .menu-item:nth-child(7) { animation-delay: .46s; } #title.active .menu-item:nth-child(8) { animation-delay: .52s; }
#title.active .logo .l1 { animation: dashIn .8s var(--spring) backwards; } #title.active .logo .l2 { animation: dashInR .8s .1s var(--spring) backwards, aurDrift 7s linear infinite; }
.menu-item.focus::before, .menu-item:hover::before { opacity: 1; inset: 0; background: linear-gradient(100deg, transparent 38%, rgba(0, 0, 0, .16) 50%, transparent 62%); background-size: 260% 100%; animation: shineX .8s var(--ease); transform: none; }
.menu-item.focus .ico, .menu-item:hover .ico { animation: icoPop .5s var(--spring); }
.menu-item.focus .arrow { animation: none; }
.btn.primary { position: relative; overflow: hidden; } .btn.primary::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, .9) 50%, transparent 60%); background-size: 260% 100%; mix-blend-mode: overlay; animation: shineX 2.6s 1s var(--ease) infinite; }
.ld-bar i { background-image: repeating-linear-gradient(115deg, rgba(0, 0, 0, .22) 0 8px, transparent 8px 16px), var(--aur-l); background-size: 32px 100%, 100% 100%; animation: stripes .6s linear infinite; }
#title::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: .5; background: repeating-linear-gradient(105deg, transparent 0 140px, rgba(255, 255, 255, .05) 140px 142px, transparent 142px 300px, rgba(255, 226, 168, .07) 300px 303px); background-size: 600px 100%; animation: streaks 5s linear infinite; mask: linear-gradient(90deg, #000, transparent 70%); -webkit-mask: linear-gradient(90deg, #000, transparent 70%); }
.ticker { position: absolute; left: 0; right: 0; bottom: calc(60px + var(--safe-b)); overflow: hidden; pointer-events: none; opacity: .5; transform: skewY(-1.2deg); border-block: 1px solid rgba(255, 255, 255, .14); background: rgba(0, 0, 0, .35); backdrop-filter: blur(4px); z-index: 0; }
.tk-track { display: flex; width: max-content; animation: ticker 24s linear infinite; }
.tk-track span { display: flex; align-items: center; gap: 22px; padding: 7px 11px; font: 600 11px var(--f-disp); letter-spacing: .5em; white-space: nowrap; color: #fff; text-transform: uppercase; }
.tk-track i { width: 7px; height: 7px; background: var(--champ); transform: rotate(45deg); }
.card.sel, .at-tile.sel { animation: none; }
.bd.got .emb, .emb.big { position: relative; }
.bd.got .emb::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; background: conic-gradient(from var(--ang), transparent 0 70%, rgba(255, 226, 168, .95) 90%, transparent); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1px)); animation: spin 3.4s linear infinite; }
.bd.got { animation: none; }
/* HUD slams */
.medal { animation: medalSlam .5s var(--spring), medalOut .5s 2.4s forwards; } .medal svg { animation: icoPop .6s .1s var(--spring) backwards; }
.h-announce.on { animation: annSlash 2.6s var(--ease) forwards; } .h-announce.on.xo { animation: xoIn 3.4s var(--ease) forwards; }
.feed-item { animation: feedSlam .32s var(--spring), feedOut .5s 5s forwards; }
.h-score .sc-row.mine { animation: none; } .h-hit.kill { filter: drop-shadow(0 0 12px rgba(255, 226, 168, 1)); }
.h-reticle.enemy { animation: pulseRing .5s linear infinite; border-radius: 50%; }
.eb-n { animation: dashIn .5s var(--spring) backwards; } .h-elim.on .eb-line { box-shadow: 0 0 20px rgba(255, 226, 168, .8); }
@media (prefers-reduced-motion: reduce) { .tk-track, #title::after, .bd.got .emb::after, .ld-bar i { animation: none; } .screen.active .panel { animation: none; } }
@media (max-height: 620px) { .ticker { display: none; } }
.opt.focus .join-input, .opt:hover .join-input { background: #0a0a0d; color: #fff; border-color: #0a0a0d; }
.opt.focus .roll, .opt:hover .roll { color: #05060a; border-color: rgba(0, 0, 0, .35); }

/* ==================== BRUTALIST ART DECO NOIR: chamfers, gold rules, stepped frames, sunbursts ==================== */
:root { --cf: 10px; --gold-l: rgba(255, 226, 168, .55); }
.btn, .menu-item, .opt, .card, .at-tile, .mcard, .at, .chip, .lp, .ch, .rs, .bd, .res-xp, .lobby-code, .lobby-roster, .join-input, #saveText, .pcard, .arm-tabs, .opts, .hc-stats,
.h-weapon, .sc-row, .feed-item, .ob, .pu, .gr, .sc-lead, .h-prompt, .medal, .h-announce, .toast, .hh-prompt, .hh-toast, .hcard, .h-tut, .h-board, .panel, .mc-tags span, .rm, .glyph { border-radius: 0 !important; }
.btn { clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.menu-item { clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); }
.opt { clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.card, .at-tile, .mcard, .ch, .rs, .lobby-code, .lobby-roster, .res-xp, .pcard, .hc-stats { clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); }
.at, .chip, .lp, .join-input, .ob, .pu, .gr, .sc-lead, .rm, .mc-tags span { clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }
.arm-tabs { clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.h-weapon, .h-board, .hcard { clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px); }
.sc-row, .feed-item, .h-prompt, .medal, .h-announce, .toast, .hh-prompt, .hh-toast, .h-tut { clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.panel { clip-path: polygon(26px 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%, 0 26px); border: 1px solid rgba(255, 226, 168, .5); }
.xp-bar, .xp-bar i, .ld-bar, .ld-bar i, .opt .bar, .opt .bar i, .hh-disc i, .hh-disc u, .sc-bar, .sc-bar i, .trap, .trap-in { border-radius: 0 !important; clip-path: none; }
.trap { clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%); } .trap-in { clip-path: polygon(11px 0, 100% 0, calc(100% - 11px) 100%, 0 100%); }
.opt .bar i::after { border-radius: 0; transform: rotate(45deg); width: 12px; height: 12px; margin-top: -6px; right: -6px; }
/* panel frame: a second gold rule inset from the edge, corner ticks */
.panel::after { inset: 9px; padding: 0; background: none; -webkit-mask: none; mask: none; border: 1px solid rgba(255, 226, 168, .3); clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px); border-radius: 0; }
.panel::before { background: linear-gradient(var(--champ), var(--champ)) 0 0 / 26px 2px no-repeat, linear-gradient(var(--champ), var(--champ)) 100% 100% / 26px 2px no-repeat, radial-gradient(55% 35% at 0% 0%, rgba(255, 255, 255, .11), transparent 70%), radial-gradient(45% 35% at 100% 100%, rgba(255, 196, 107, .08), transparent 70%); }
.panel-head { position: relative; padding-bottom: 14px; }
.panel-head::after { content: ''; flex-basis: 100%; height: 6px; margin-top: 10px; background: linear-gradient(90deg, var(--champ) 0 34%, transparent 34% 36%, var(--champ) 36% 37%, transparent 37% 39%, rgba(255, 226, 168, .3) 39% 100%) 0 2px / 100% 1px no-repeat, linear-gradient(var(--champ), var(--champ)) 0 0 / 34% 2px no-repeat; opacity: .9; }
.panel-head .idx { clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 50%, calc(100% - 6px) 100%, 0 100%); border-radius: 0; padding: 3px 14px 3px 9px; }
.panel-head h2 { font-family: var(--f-disp); letter-spacing: .3em; text-transform: uppercase; }
.panel-foot { border-top: 1px solid var(--line2); padding-top: 18px; }
/* menu rows: gold tick at rest, full white slab on focus */
.menu-item { border: 0; border-left: 3px solid rgba(255, 226, 168, .35); background: rgba(0, 0, 0, .28); font-family: var(--f-disp); font-weight: 700; font-size: 13px; letter-spacing: .28em; }
.menu-item.focus, .menu-item:hover { border-left-color: var(--champ); background: #fff; }
.menu { gap: 6px; }
.menu-item .arrow { color: currentColor; }
.btn { font-family: var(--f-disp); font-weight: 700; font-size: 11px; letter-spacing: .28em; }
.btn i { display: none; }   /* icons carry the meaning now: no second arrow */
.btn.primary { font-size: 13px; padding: 18px 44px; }
.opt .lbl { font-family: var(--f-mono); text-transform: uppercase; letter-spacing: .2em; font-size: 11px; }
.opt .val button { border-radius: 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); width: 26px; height: 26px; }
.opt .txt { font-family: var(--f-mono); letter-spacing: .14em; text-transform: uppercase; font-size: 12px; }
.at { font-family: var(--f-mono); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; }
.card .cn, .at-tile .tn, .mc-top b, .hcard h2 { font-family: var(--f-disp); letter-spacing: .1em; text-transform: uppercase; }
.card .cn { font-size: 17px; } .hcard h2 { font-size: 28px; }
/* title: sunburst behind the mark, stepped rule under it */
.title-main { isolation: isolate; }
.title-main::before { content: ''; position: absolute; left: -12%; top: 6%; width: 130%; height: 60%; z-index: -1; pointer-events: none; opacity: .5;
  background: repeating-conic-gradient(from -90deg at 8% 48%, rgba(255, 226, 168, .16) 0 1.4deg, transparent 1.4deg 7deg); -webkit-mask: radial-gradient(60% 90% at 8% 48%, #000, transparent 72%); mask: radial-gradient(60% 90% at 8% 48%, #000, transparent 72%); animation: burst 40s linear infinite; }
@keyframes burst { to { filter: hue-rotate(20deg); transform: rotate(4deg); } }
.logo { position: relative; padding-bottom: 20px; }
.logo::after { content: ''; position: absolute; left: 3px; bottom: 0; width: min(420px, 100%); height: 10px; background: linear-gradient(var(--champ), var(--champ)) 0 0 / 100% 2px no-repeat, linear-gradient(var(--champ), var(--champ)) 0 6px / 62% 2px no-repeat, linear-gradient(var(--champ), var(--champ)) 0 10px / 28% 1px no-repeat; }
/* HUD accents */
.h-weapon { border: 0; box-shadow: none; background: linear-gradient(150deg, rgba(0, 0, 0, .8), rgba(0, 0, 0, .55)); position: absolute; }
.h-weapon::before { content: ''; position: absolute; inset: 0; border: 1px solid rgba(255, 226, 168, .5); clip-path: inherit; pointer-events: none; opacity: 0; }
.h-weapon::after { content: ''; position: absolute; left: 0; right: 20px; top: 0; height: 2px; background: var(--champ); }
.sc-row { border: 0; border-left: 3px solid var(--tcol); } .feed-item { border: 0; border-left: 3px solid var(--tc); }
.h-announce { border: 0; border-top: 2px solid var(--champ); border-bottom: 2px solid var(--champ); font-family: var(--f-disp); font-weight: 700; font-size: 17px; }
.medal { border: 0; border-left: 3px solid var(--champ); font-family: var(--f-disp); font-size: 13px; letter-spacing: .26em; }
.medal svg { border-radius: 0; transform: rotate(0); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); border: 0; background: rgba(255, 226, 168, .2); padding: 6px; }
.h-prompt, .hh-prompt { border: 0; border-bottom: 2px solid var(--champ); }
.h-board { border: 1px solid rgba(255, 226, 168, .5); } .hcard { border: 1px solid rgba(255, 226, 168, .5); }
.toast { border: 0; border-bottom: 2px solid var(--champ); font-family: var(--f-disp); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; }
.ld-bar { height: 6px; } .ld-bar i { background-image: repeating-linear-gradient(115deg, rgba(0, 0, 0, .3) 0 8px, transparent 8px 16px), var(--aur-l); }
.bd, .rs, .ch { border: 1px solid rgba(255, 226, 168, .22); }
.card, .at-tile, .mcard { border: 1px solid rgba(255, 226, 168, .28); }
.card.sel, .at-tile.sel { border-color: var(--champ); }

/* ---------- service record: extra books ---------- */
.rc-stats { grid-template-columns: repeat(6, 1fr); }
.wk-list { display: grid; gap: 6px; } .wkr { display: grid; grid-template-columns: 150px 1fr 54px; align-items: center; gap: 12px; font: 600 11px var(--f-disp); letter-spacing: .16em; } .wkr b { font: 700 13px var(--f-mono); text-align: right; font-variant-numeric: tabular-nums; }
.hist { display: grid; gap: 4px; max-height: 24vh; overflow-y: auto; scrollbar-width: none; }
.hr { display: grid; grid-template-columns: 62px 1fr 72px 56px 64px; gap: 10px; align-items: center; padding: 8px 12px; background: rgba(255, 255, 255, .04); border-left: 3px solid var(--tcol, #888); font: 500 11px var(--f-mono); letter-spacing: .1em; clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%, 0 8px); }
.hr b { font: 700 12px var(--f-disp); letter-spacing: .2em; } .hr span { color: #cfcfd8; } .hr i { font-style: normal; text-align: right; } .hr em { font-style: normal; color: var(--dim); text-align: right; } .hr u { text-decoration: none; text-align: right; color: var(--champ); font-weight: 700; }
.hr.win { --tcol: #6dffb0; } .hr.win b { color: #6dffb0; } .hr.loss { --tcol: #ff5a6a; } .hr.loss b { color: #ff5a6a; } .hr.tie { --tcol: #9aa7ff; }
@media (max-width: 900px) { .rc-stats { grid-template-columns: repeat(3, 1fr); } .wkr { grid-template-columns: 96px 1fr 44px; } .hr { grid-template-columns: 52px 1fr 60px 48px; } .hr em { display: none; } }

/* ---------- END OF MATCH: slab banner, count-up performance cards, MVP ---------- */
@keyframes slabIn { from { transform: translateX(-110%) skewX(-24deg); } to { transform: none; } }
@keyframes titleSlam { 0% { opacity: 0; transform: scale(2.4) skewX(-8deg); letter-spacing: .5em; filter: blur(14px); } 40% { opacity: 1; transform: scale(.94); filter: none; } 60% { transform: scale(1.03); } 100% { transform: none; letter-spacing: .12em; } }
@keyframes cardIn { from { opacity: 0; transform: translateY(26px) skewY(3deg); } to { opacity: 1; transform: none; } }
.results { padding-top: 0; overflow-x: hidden; }
.res-banner { position: relative; overflow: hidden; isolation: isolate; margin: 0 -38px 18px; padding: 34px 38px 22px; border-bottom: 2px solid var(--champ); background: linear-gradient(100deg, rgba(0, 0, 0, .0), rgba(0, 0, 0, .0)); }
.res-banner::before { content: ''; position: absolute; inset: 0; z-index: -2; background: linear-gradient(100deg, color-mix(in srgb, var(--team) 70%, #000) 0 46%, color-mix(in srgb, var(--team) 25%, #000) 46% 62%, transparent 62%); animation: slabIn .7s var(--ease) both; }
.res-banner::after { content: ''; position: absolute; right: -6%; top: -60%; width: 70%; height: 220%; z-index: -1; opacity: .55; background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255, 226, 168, .22) 0 2deg, transparent 2deg 9deg); -webkit-mask: radial-gradient(closest-side, #000, transparent); mask: radial-gradient(closest-side, #000, transparent); animation: burst 30s linear infinite; }
.res-kicker { color: var(--champ); letter-spacing: .5em; font-size: 11px; animation: dashIn .6s .2s var(--spring) backwards; }
.res-title { font-family: var(--f-disp) !important; font-weight: 700; font-size: clamp(44px, 10vh, 108px) !important; letter-spacing: .12em; text-transform: uppercase; text-shadow: 0 0 0 transparent, 6px 6px 0 rgba(0, 0, 0, .55); animation: titleSlam .9s .25s var(--ease) backwards; }
.res-score { font-family: var(--f-mono); color: #fff; letter-spacing: .3em; animation: dashInR .6s .7s var(--spring) backwards; }
.res-cards { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; margin-bottom: 14px; }
.res-cards .mvp { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; padding: 10px 16px; background: linear-gradient(100deg, rgba(255, 226, 168, .28), rgba(255, 226, 168, .04)); border-left: 4px solid var(--champ); clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px); animation: cardIn .5s .5s var(--spring) backwards; }
.mvp em { font: 700 11px var(--f-disp); letter-spacing: .4em; font-style: normal; color: #000; background: var(--champ); padding: 4px 10px; clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 50%, calc(100% - 6px) 100%, 0 100%); }
.mvp b { font: 700 18px var(--f-disp); letter-spacing: .2em; } .mvp span { margin-left: auto; font: 500 12px var(--f-mono); letter-spacing: .24em; color: var(--champ); }
.rcard { display: grid; gap: 4px; padding: 14px 10px 10px; text-align: center; background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02)); border-top: 2px solid rgba(255, 255, 255, .5); clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px); animation: cardIn .5s var(--spring) backwards; }
.rcard:nth-child(2) { animation-delay: .6s; } .rcard:nth-child(3) { animation-delay: .66s; } .rcard:nth-child(4) { animation-delay: .72s; } .rcard:nth-child(5) { animation-delay: .78s; } .rcard:nth-child(6) { animation-delay: .84s; } .rcard:nth-child(7) { animation-delay: .9s; } .rcard:nth-child(8) { animation-delay: .96s; } .rcard:nth-child(9) { animation-delay: 1.02s; }
.rcard b { font: 200 clamp(26px, 5vh, 44px) var(--f-hud); font-variant-numeric: tabular-nums; letter-spacing: -.03em; } .rcard span { font: 500 9px var(--f-mono); letter-spacing: .26em; color: var(--dim); }
.rcard.hot { border-top-color: #ff5a6a; } .rcard.hot b { color: #ffb3bb; } .rcard.gold { border-top-color: var(--champ); } .rcard.gold b { color: var(--champ); }
.res-table { max-height: 26vh; } .res-xp { animation: cardIn .5s 1.1s var(--spring) backwards; }
.res-xp .xp-bar i { transition: width 1.4s .9s var(--ease); }
@media (max-width: 900px) { .res-cards { grid-template-columns: repeat(4, 1fr); } }
@media (max-height: 640px) { .res-cards { grid-template-columns: repeat(9, 1fr); } .rcard { padding: 8px 4px; } .res-banner { padding: 20px 38px 14px; } .res-title { font-size: 44px !important; } .res-table { max-height: 20vh; } }
.results { max-height: 96vh; }
.results .panel-foot { position: sticky; bottom: -1px; z-index: 5; margin-top: 12px; padding: 12px 0 2px; background: linear-gradient(0deg, rgba(2, 2, 4, .96) 70%, transparent); }
@media (max-height: 720px) { .res-medals { display: none; } .res-table { max-height: 15vh; } .res-xp { padding: 8px 12px; gap: 3px 24px; } .res-xp .rx-r { font-size: 9px; } .res-kicker { display: none; } .res-banner { margin-bottom: 10px; } .res-cards { margin-bottom: 8px; } }

/* ---------- loading screens carry the map they are loading ---------- */
@keyframes kenburns { from { transform: scale(1.04) translate(0, 0); } to { transform: scale(1.16) translate(-2.5%, -1.5%); } }
#loading { overflow: hidden; }
#loading::before { content: ''; position: absolute; inset: -4%; z-index: -2; background: var(--map, none) center / cover no-repeat; opacity: .5; filter: saturate(.7) contrast(1.05); }
#loading.kb::before { animation: kenburns 22s linear infinite alternate; }
#loading::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(2, 2, 4, .94) 0, rgba(2, 2, 4, .55) 55%, rgba(2, 2, 4, .2)), linear-gradient(0deg, rgba(2, 2, 4, .95), transparent 45%); }
.ld-map { position: absolute; right: calc(48px + var(--safe-r)); bottom: 20vh; text-align: right; display: grid; gap: 6px; }
.ld-map small { font: 500 11px var(--f-mono); letter-spacing: .6em; color: var(--champ); } .ld-map b { font: 700 clamp(30px, 7vh, 72px) var(--f-disp); letter-spacing: .14em; text-shadow: 6px 6px 0 rgba(0, 0, 0, .5); }
.ld-map::after { content: ''; height: 10px; margin-top: 6px; justify-self: end; width: 70%; background: linear-gradient(var(--champ), var(--champ)) 0 0 / 100% 2px no-repeat, linear-gradient(var(--champ), var(--champ)) 100% 6px / 60% 2px no-repeat; }

/* ---------- NU LIGHT mark ---------- */
@keyframes markSpin { to { transform: rotate(360deg); } } @keyframes markPulse { 50% { opacity: .55; transform: scale(1.12); } }
.mark { width: 46px; height: 46px; fill: none; stroke: var(--champ); stroke-width: 2.2; stroke-linejoin: miter; stroke-linecap: square; display: block; filter: drop-shadow(0 0 10px rgba(255, 226, 168, .55)); }
.mark .m-ring { stroke: #fff; stroke-width: 1.6; } .mark .m-rays { stroke-width: 2; transform-origin: 32px 32px; animation: markSpin 24s linear infinite; opacity: .8; } .mark .m-star { fill: #fff; stroke: none; transform-origin: 32px 32px; animation: markPulse 3s ease-in-out infinite; }
.mark.big { width: clamp(64px, 12vh, 120px); height: clamp(64px, 12vh, 120px); opacity: 0; animation: rise 1.2s .3s var(--ease) forwards; }
.title-main .mark { margin-bottom: 14px; }
@media (max-height: 620px) { .title-main .mark { width: 34px; height: 34px; margin-bottom: 6px; } }
.h-sprint { position: absolute; left: 50%; bottom: 22%; translate: -50% 0; display: flex; gap: 8px; align-items: center; padding: 6px 16px; font: 700 10px var(--f-disp); letter-spacing: .4em; color: var(--champ); opacity: 0; transition: opacity .18s; border-block: 1px solid var(--champ); background: rgba(0, 0, 0, .45); }
.h-sprint svg { width: 16px; height: 16px; stroke-width: 2.2; } .h-sprint.on { opacity: 1; } .h-sprint.on svg { animation: sprintCh .5s linear infinite; }
@keyframes sprintCh { from { transform: translateX(-4px); opacity: .3; } 50% { opacity: 1; } to { transform: translateX(4px); opacity: .3; } }

/* panel frame lives in the panel's own background so it never scrolls away with long content */
.panel::before, .panel::after { display: none; }
.panel {
  background:
    linear-gradient(var(--champ), var(--champ)) 0 0 / 30px 2px no-repeat,
    linear-gradient(var(--champ), var(--champ)) 100% 100% / 30px 2px no-repeat,
    linear-gradient(rgba(255, 226, 168, .3), rgba(255, 226, 168, .3)) 22px 9px / calc(100% - 22px) 1px no-repeat,
    linear-gradient(rgba(255, 226, 168, .3), rgba(255, 226, 168, .3)) 0 calc(100% - 9px) / calc(100% - 22px) 1px no-repeat,
    linear-gradient(rgba(255, 226, 168, .3), rgba(255, 226, 168, .3)) 9px 22px / 1px calc(100% - 22px) no-repeat,
    linear-gradient(rgba(255, 226, 168, .3), rgba(255, 226, 168, .3)) calc(100% - 9px) 0 / 1px calc(100% - 22px) no-repeat,
    radial-gradient(55% 35% at 0% 0%, rgba(255, 255, 255, .11), transparent 70%),
    radial-gradient(45% 35% at 100% 100%, rgba(255, 196, 107, .08), transparent 70%),
    linear-gradient(165deg, rgba(14, 14, 17, .92), rgba(2, 2, 4, .96));
}

/* ---------- patch notes ---------- */
#patch .panel { left: 50%; top: 50%; width: min(860px, 94vw); }
.pn-list { display: grid; gap: 10px; max-height: 58vh; overflow-y: auto; scrollbar-width: none; padding: 4px; }
.pn-card { text-align: left; color: var(--paper); display: grid; gap: 8px; padding: 14px 18px 12px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 226, 168, .22); border-left: 3px solid rgba(255, 226, 168, .5); font-family: var(--f-hud); cursor: pointer; clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%, 0 12px); transition: background .2s, border-color .2s, transform .4s var(--spring); }
.pn-card.focus, .pn-card:hover { background: rgba(255, 255, 255, .09); border-left-color: var(--champ); transform: translateX(4px); }
.pn-card.latest { background: linear-gradient(100deg, rgba(255, 226, 168, .12), rgba(255, 255, 255, .03)); }
.pn-top { display: flex; align-items: baseline; gap: 14px; } .pn-top b { font: 700 22px var(--f-disp); letter-spacing: .1em; color: var(--champ); } .pn-top span { font: 700 14px var(--f-disp); letter-spacing: .2em; text-transform: uppercase; flex: 1; } .pn-top em { font: 500 11px var(--f-mono); letter-spacing: .2em; font-style: normal; color: var(--dim); }
.pn-card > p { font: 500 13px/1.5 var(--f-hud); color: #cfcfd8; }
.pn-sec { display: grid; grid-template-columns: 74px 1fr; gap: 10px; align-items: start; } .pn-sec i { font: 700 10px var(--f-mono); letter-spacing: .28em; font-style: normal; padding: 3px 8px; text-align: center; background: rgba(255, 255, 255, .1); }
.pn-sec.new i { background: var(--champ); color: #000; } .pn-sec.fixed i { background: #6dffb0; color: #000; } .pn-sec.known i { background: #ff5a6a; color: #000; }
.pn-sec ul { display: grid; gap: 4px; list-style: none; } .pn-sec li { font: 500 12px/1.5 var(--f-hud); color: #dcdce4; padding-left: 14px; position: relative; } .pn-sec li::before { content: ''; position: absolute; left: 0; top: .6em; width: 5px; height: 5px; background: var(--champ); transform: rotate(45deg); }

/* hit markers v2: chamfered ticks, health-hit orange, headshot skull, kill burst with ring, stacked damage number */
.h-hit { width: 54px; height: 54px; } .h-hit svg { fill: none; stroke: currentColor; stroke-linecap: square; filter: drop-shadow(0 0 4px rgba(0,0,0,.8)); overflow: visible; }
.h-hit circle { stroke-width: .8; opacity: 0; transform-origin: center; }
.h-hit.on { animation: hitm .28s cubic-bezier(.1,.8,.2,1) both; }
.h-hit.hp { color: #ff8a3c; } .h-hit.hp svg { stroke-width: 3.6; }
.h-hit.kill { width: 92px; height: 92px; color: var(--champ, #ffd48a); animation: hitk .55s cubic-bezier(.1,.8,.2,1) both; }
.h-hit.kill svg { stroke-width: 2.6; filter: drop-shadow(0 0 10px rgba(255,196,107,.95)); }
.h-hit.kill circle { animation: hitring .55s ease-out both; }
@keyframes hitm { 0% { opacity: 1; transform: scale(.55); } 40% { transform: scale(1.08); } 100% { opacity: 0; transform: scale(1.4); } }
@keyframes hitk { 0% { opacity: 1; transform: scale(.4) rotate(-18deg); } 30% { transform: scale(1.1) rotate(0); } 100% { opacity: 0; transform: scale(1.5) rotate(0); } }
@keyframes hitring { 0% { opacity: .9; transform: scale(.5); } 100% { opacity: 0; transform: scale(2.2); } }
.h-dn { position: absolute; left: calc(50% + 40px); top: calc(50% - 26px); font: 700 calc(15px * var(--ui, 1)) 'Chakra Petch', 'Rajdhani', sans-serif; letter-spacing: .04em; color: #fff; opacity: 0; pointer-events: none; font-variant-numeric: tabular-nums; text-shadow: 0 0 8px rgba(0,0,0,.9); }
.h-dn.on { animation: dnpop .9s cubic-bezier(.1,.8,.2,1) both; } .h-dn.head { color: #ff6a76; font-size: calc(19px * var(--ui, 1)); } .h-dn.kill { color: var(--champ, #ffd48a); font-size: calc(24px * var(--ui, 1)); text-shadow: 0 0 14px rgba(255,196,107,.9); }
@keyframes dnpop { 0% { opacity: 0; transform: translate(-6px, 8px) scale(.6); } 15% { opacity: 1; transform: translate(0, 0) scale(1.25); } 30% { transform: scale(1); } 100% { opacity: 0; transform: translate(10px, -26px) scale(.95); } }

.is-spartan .h-abil { --vo: #ffcf7a; } .is-spartan .h-abil .ab.nova .ic { stroke-width: 1.5; }

/* armor lock: hex frost frame, jetpack: warm edge streaks */
.h-lock { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .18s;
  background: radial-gradient(ellipse at center, transparent 42%, rgba(120,200,255,.22) 78%, rgba(120,200,255,.5) 100%),
    repeating-linear-gradient(60deg, rgba(160,220,255,.06) 0 1px, transparent 1px 22px), repeating-linear-gradient(-60deg, rgba(160,220,255,.06) 0 1px, transparent 1px 22px);
  box-shadow: inset 0 0 90px rgba(120,200,255,.55); }
body.is-locked .h-lock { opacity: 1; animation: lockp 1.1s ease-in-out infinite; }
@keyframes lockp { 50% { box-shadow: inset 0 0 130px rgba(160,225,255,.75); } }
body.is-jetting .h-lock { opacity: 1; background: radial-gradient(ellipse at center, transparent 55%, rgba(255,170,70,.16) 100%); box-shadow: inset 0 -60px 90px rgba(255,150,60,.28); }

/* short windows: weapon box docks to the bottom edge, never stretches */
@media (max-height: 520px) { .h-weapon { top: auto !important; } }
@media (max-width: 900px) { .h-weapon { top: auto !important; } }

/* killcam + top kill: letterbox, rec tag, name plate with chips */
body.is-replay #hud, body.is-replay .touch { display: none !important; }
#replayUI { position: fixed; inset: 0; z-index: 40; pointer-events: none; opacity: 0; transition: opacity .25s; font-family: 'Chakra Petch', 'Rajdhani', sans-serif; }
#replayUI.on { opacity: 1; }
.rp-bar { position: absolute; left: 0; right: 0; height: 9vh; background: #000; animation: rpbar .55s cubic-bezier(.2,.8,.2,1) both; } .rp-bar.t { top: 0; } .rp-bar.b { bottom: 0; animation-name: rpbarb; }
@keyframes rpbar { from { transform: translateY(-100%); } } @keyframes rpbarb { from { transform: translateY(100%); } }
.rp::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.55) 100%); }
.rp::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px); mix-blend-mode: overlay; }
.rp-title { position: absolute; left: calc(4vw + var(--safe-l, 0px)); bottom: calc(9vh + 26px); display: grid; gap: 4px; animation: rptitle .7s .1s cubic-bezier(.2,.8,.2,1) both; text-shadow: 0 2px 14px rgba(0,0,0,.8); }
.rp-title small { font: 600 11px 'JetBrains Mono', monospace; letter-spacing: .42em; color: var(--champ, #ffd48a); display: flex; align-items: center; gap: 10px; } .rp-title small::before { content: ''; width: 26px; height: 2px; background: var(--champ, #ffd48a); }
.rp-title b { font: 700 clamp(28px, 5vw, 58px)/1 'Unbounded', 'Chakra Petch', sans-serif; letter-spacing: .02em; color: #fff; text-transform: uppercase; border-left: 4px solid var(--tc, #ffd48a); padding-left: 14px; }
.rp-title span { font: 500 12px 'JetBrains Mono', monospace; letter-spacing: .3em; color: rgba(255,255,255,.7); padding-left: 18px; text-transform: uppercase; }
.rp-title em { display: flex; gap: 8px; flex-wrap: wrap; padding-left: 18px; font-style: normal; } .rp-title u { text-decoration: none; font: 600 10.5px 'JetBrains Mono', monospace; letter-spacing: .2em; padding: 5px 10px; color: #fff; background: rgba(8,10,16,.66); backdrop-filter: blur(8px); clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); border: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.rp.top .rp-title small { color: #ffe2a8; }
@keyframes rptitle { from { opacity: 0; transform: translateX(-30px); filter: blur(8px); } }
.rp-skip { position: absolute; right: calc(4vw + var(--safe-r, 0px)); bottom: calc(9vh + 26px); display: flex; align-items: center; gap: 10px; font: 600 11px 'JetBrains Mono', monospace; letter-spacing: .3em; color: rgba(255,255,255,.75); }
.rp-rec { position: absolute; right: calc(4vw + var(--safe-r, 0px)); top: calc(9vh + 22px); width: 12px; height: 12px; background: #ff3b4a; box-shadow: 0 0 14px #ff3b4a; border-radius: 50%; animation: recblink 1s steps(2, jump-none) infinite; } @keyframes recblink { 50% { opacity: .15; } }

.rcard.topk { grid-column: 1 / -1; display: grid; gap: 4px; text-align: left; padding: 14px 20px; border-left: 3px solid var(--champ, #ffd48a); }
.rcard.topk em { font: 600 10px 'JetBrains Mono', monospace; letter-spacing: .4em; color: var(--champ, #ffd48a); font-style: normal; }
.rcard.topk b { font: 700 22px 'Unbounded', 'Chakra Petch', sans-serif; letter-spacing: .03em; text-transform: uppercase; } .rcard.topk span { font: 500 11px 'JetBrains Mono', monospace; letter-spacing: .24em; opacity: .7; text-transform: uppercase; }

/* loading emblem: counter-rotating rings, live progress arc, radar sweep */
.ld-emb { position: absolute; right: calc(48px + var(--safe-r)); top: calc(64px + var(--safe-t)); width: clamp(120px, 26vh, 240px); aspect-ratio: 1; pointer-events: none; --p: 0; }
#loading { --p: 0; }
.ld-emb svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--champ, #ffd48a); overflow: visible; }
.ld-emb .e1 { stroke-width: .6; stroke-dasharray: 2 5; opacity: .6; transform-origin: center; animation: ldspin 40s linear infinite; }
.ld-emb .e2 { stroke-width: .4; opacity: .4; }
.ld-emb .e3 { stroke-width: 2; opacity: .85; transform-origin: center; animation: ldspin 9s linear infinite reverse; }
.ld-emb .e4 { stroke: rgba(255,255,255,.14); stroke-width: 3; transform: rotate(-90deg); } .ld-emb .e5 { stroke: #fff; stroke-width: 3; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--p) * 100); transform: rotate(-90deg); filter: drop-shadow(0 0 5px rgba(255,226,168,.9)); }
.ld-emb .e6 { stroke-width: 1.6; fill: rgba(255,226,168,.08); transform-origin: center; animation: ldpulse 2.2s ease-in-out infinite; }
.ld-emb .e7 { stroke-width: 1.2; }
.ld-sweep { position: absolute; inset: 6%; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 78%, rgba(255,226,168,.32) 100%); animation: ldspin 3.2s linear infinite; mask: radial-gradient(circle, transparent 0 24%, #000 25%); -webkit-mask: radial-gradient(circle, transparent 0 24%, #000 25%); }
@keyframes ldspin { to { transform: rotate(360deg); } } @keyframes ldpulse { 50% { transform: scale(1.12); opacity: .7; } }
@media (max-height: 520px) { .ld-emb { top: calc(44px + var(--safe-t)); width: 90px; } }

/* lobby comms: chat log, input, push-to-talk */
#comms { position: fixed; left: calc(16px + var(--safe-l, 0px)); bottom: calc(96px + var(--safe-b, 0px)); z-index: 30; width: min(360px, 62vw); pointer-events: none; font-family: 'Chakra Petch', 'Rajdhani', sans-serif; }
#comms[hidden] { display: none; }
.cm-log { display: grid; gap: 3px; justify-items: start; }
.cm-line { display: flex; gap: 8px; padding: 4px 10px; font-size: 13px; line-height: 1.3; color: #fff; background: rgba(6, 8, 14, .58); backdrop-filter: blur(8px); clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); border-left: 2px solid var(--champ, #ffd48a); transition: opacity 1.2s; animation: cmin .25s cubic-bezier(.2,.8,.2,1) both; word-break: break-word; }
.cm-line b { font: 700 11px 'JetBrains Mono', monospace; letter-spacing: .1em; color: var(--champ, #ffd48a); text-transform: uppercase; white-space: nowrap; padding-top: 2px; } .cm-line.me { border-left-color: #fff; } .cm-line.sys { border-left-color: #ff6a76; }
.cm-line.old { opacity: 0; } #comms.typing .cm-line.old { opacity: 1; }
@keyframes cmin { from { opacity: 0; transform: translateX(-14px); } }
.cm-form { pointer-events: auto; display: flex; gap: 6px; margin-top: 8px; }
.cm-form input { flex: 1; min-width: 0; font: 500 14px 'Chakra Petch', sans-serif; padding: 10px 12px; color: #fff; background: rgba(6, 8, 14, .85); border: 1px solid rgba(255, 226, 168, .5); outline: none; border-radius: 0; }
.cm-form button { font: 700 11px 'JetBrains Mono', monospace; letter-spacing: .2em; padding: 0 14px; color: #000; background: var(--champ, #ffd48a); border: 0; }
.cm-bar { position: fixed; left: calc(16px + var(--safe-l, 0px)); bottom: calc(24px + var(--safe-b, 0px)); display: flex; gap: 8px; pointer-events: auto; }
.cm-bar button { position: relative; display: grid; grid-auto-flow: column; align-items: center; gap: 6px; padding: 9px 12px; color: #fff; background: rgba(6, 8, 14, .6); backdrop-filter: blur(8px); border: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); touch-action: none; user-select: none; -webkit-user-select: none; }
.cm-bar svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .cm-bar b { font: 700 10px 'JetBrains Mono', monospace; opacity: .6; }
.cm-mic i { position: absolute; right: 6px; top: 6px; width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.25); } .cm-mic.live { color: #000; background: #7dffb0; box-shadow: 0 0 22px rgba(125,255,176,.7); } .cm-mic.live i { background: #000; }
body.touch-on .cm-bar { left: auto; right: calc(112px + var(--safe-r, 0px)); bottom: auto; top: calc(10px + var(--safe-t, 0px)); } body.touch-on .cm-bar button { padding: 11px 14px; } body.touch-on .cm-bar b { display: none; }
body.touch-on #comms { bottom: auto; top: calc(58px + var(--safe-t, 0px)); left: calc(12px + var(--safe-l, 0px)); width: min(300px, 46vw); } body.touch-on .cm-line { font-size: 12px; }
body.touch-on #comms.typing .cm-form { position: fixed; left: 8px; right: 8px; top: 8px; z-index: 60; }
body.is-replay #comms { display: none; }

/* phones: keep the HUD out of the thumbs' way */
body.touch-on .cm-bar { right: auto; left: calc(12px + var(--safe-l, 0px)); top: calc(96px + var(--safe-t, 0px)); }
body.touch-on #comms { top: calc(146px + var(--safe-t, 0px)); }
body.touch-on .h-weapon { scale: .62; transform-origin: bottom center; bottom: 2px !important; opacity: .9; }
body.touch-on .h-weapon .gr-row, body.touch-on .h-weapon .wp-name { display: none; }
body.touch-on .h-abil { display: none !important; }
body.touch-on .h-score { scale: .72; transform-origin: top right; }
body.touch-on .h-tut { display: none !important; }

.cm-form[hidden] { display: none !important; }

/* controls screen */
.opt-head { margin: 18px 0 8px; font: 600 10px 'JetBrains Mono', monospace; letter-spacing: .26em; color: var(--champ, #ffd48a); opacity: .85; }
.bind-list { display: grid; gap: 6px; }
.btn.bind { display: flex; justify-content: space-between; align-items: center; gap: 14px; text-align: left; }
.btn.bind b { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; font-weight: 500; }
.btn.bind u { text-decoration: none; font: 700 10.5px 'JetBrains Mono', monospace; letter-spacing: .14em; padding: 4px 9px; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); }
.btn.bind u.pd { background: rgba(255,226,168,.16); box-shadow: inset 0 0 0 1px rgba(255,226,168,.5); color: var(--champ, #ffd48a); } .btn.bind u.none { opacity: .55; }
.btn.bind.wait { box-shadow: inset 0 0 0 2px var(--champ, #ffd48a); animation: bindwait 1s ease-in-out infinite; } @keyframes bindwait { 50% { background: rgba(255,226,168,.12); } }
.cm-mic.open i { background: #7dffb0; } .cm-mic.muted { color: #ff6a76; } .cm-mic.muted i { background: #ff6a76; } .cm-mic[hidden] { display: none; }
#binds .panel { max-height: 92vh; overflow-y: auto; }
.ctrl-row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.07); } .ctrl-row b { display: flex; gap: 6px; } .ctrl-row u { text-decoration: none; font: 700 10.5px 'JetBrains Mono', monospace; letter-spacing: .12em; padding: 3px 8px; background: rgba(255,255,255,.1); } .ctrl-row u.pd { background: rgba(255,226,168,.16); color: var(--champ, #ffd48a); }

/* ---- HUD zones (goal 1): one job per corner, all scaled by --ui (viewport x HUD-size setting) ----
   top-centre: compass/shield/power-ups | top-left: score + objectives | top-right: weapon/grenades
   bottom-left: radar, feed stacks above it | bottom-right: ability tray | centre: medals/prompt/announce */
#hud { --hu: clamp(.7, var(--ui, 1), 1.25); --m: calc(28px * var(--hu)); }
.h-top { top: calc(14px * var(--hu) + var(--safe-t)); scale: var(--hu); transform-origin: 50% 0; }
.h-score { left: calc(var(--m) + var(--safe-l)); right: auto; top: calc(24px * var(--hu) + var(--safe-t)); bottom: auto; scale: var(--hu); transform-origin: 0 0; }
.h-weapon { right: calc(var(--m) + var(--safe-r)); top: calc(24px * var(--hu) + var(--safe-t)); scale: var(--hu); transform-origin: 100% 0; }
.h-radar { left: calc(var(--m) + var(--safe-l)); bottom: calc(52px * var(--hu) + var(--safe-b)); scale: var(--hu); transform-origin: 0 100%; }
.feed { left: calc(var(--m) + var(--safe-l)); bottom: calc(250px * var(--hu) + var(--safe-b)); scale: var(--hu); transform-origin: 0 100%; max-height: calc(34vh / var(--hu)); overflow: hidden; }
.h-abil { right: calc(var(--m) + var(--safe-r)); bottom: calc(40px * var(--hu) + var(--safe-b)); scale: var(--hu); transform-origin: 100% 100%; }
.h-cam { left: calc(250px * var(--hu) + var(--safe-l)); bottom: calc(60px * var(--hu) + var(--safe-b)); scale: var(--hu); transform-origin: 0 100%; }
.h-tut { left: calc(var(--m) + var(--safe-l)); top: 38%; scale: var(--hu); transform-origin: 0 0; }
.h-medals { top: 60%; scale: var(--hu); transform-origin: 50% 0; }
.h-prompt { top: 76%; scale: var(--hu); transform-origin: 50% 0; }
@media (max-width: 900px) { .h-abil { bottom: calc(150px * var(--hu) + var(--safe-b)); transform: none; } }
@media (max-height: 520px) { .h-score { width: 200px; } .feed { bottom: calc(220px * var(--hu) + var(--safe-b)); } }

/* guardian grenade cooldown: fills left to right, dim until ready */
.gr { position: relative; }
.gr.cd { opacity: .42; }
.gr.cd::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: calc((1 - var(--cd, 1)) * 100%); background: var(--hc, #fff); box-shadow: 0 0 8px var(--hc, #fff); }

/* fun pass: tighter hit markers, gold kill flash */
.h-hit { width: 42px; height: 42px; } .h-hit.head { width: 34px; height: 34px; } .h-hit.kill { width: 76px; height: 76px; }
.h-flash.kf { background: radial-gradient(ellipse at center, transparent 55%, rgba(255, 214, 140, .38)); animation: flash .22s; }

/* menu motion pass: exit transition, no layout jump, visible keyboard focus */
@keyframes scrOutP { to { opacity: 0; transform: translateY(-6px) scale(.99); } }
.screen.active.leaving { animation: scrOutP .15s var(--ease) forwards; pointer-events: none; }
.menu-item, .menu-item.focus, .menu-item:hover { padding: 15px 20px; }
.menu-item .n, .menu-item .arrow { transition: transform .45s var(--spring), color .25s; }
.menu-item.focus .n, .menu-item:hover .n { transform: translateX(6px); }
.menu-item.focus .arrow, .menu-item:hover .arrow { transform: translateX(4px); }
.opt.focus, .opt:hover { padding: 12px 16px; }
.menu-item:focus-visible, .btn:focus-visible, .opt:focus-visible, .chip:focus-visible { outline: 2px solid var(--champ, #fff); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .screen.active.leaving { animation-duration: .01s; } .menu-item, .btn, .opt, .card, .mcard { transition-duration: .01s; } }

/* results xp count-up */
@keyframes rxIn { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
.rx-h u { text-decoration: none; font-variant-numeric: tabular-nums; }
.rx-r b { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .rx-r { animation: none !important; } }

/* emote wheel */
.ew { position: fixed; left: 50%; top: 50%; width: 0; height: 0; z-index: 60; pointer-events: none; opacity: 0; transform: scale(.86); transition: opacity .16s ease, transform .22s cubic-bezier(.2,.9,.2,1); }
.ew.on { opacity: 1; transform: scale(1); }
.ew-ring { position: absolute; left: -210px; top: -210px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(10,10,14,.55) 0 38%, rgba(255,255,255,.06) 39% 100%); border: 1px solid rgba(255,255,255,.18); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 30px 80px rgba(0,0,0,.5); }
.ew-mid { position: absolute; left: -80px; top: -28px; width: 160px; text-align: center; display: flex; flex-direction: column; gap: 6px; font-family: var(--f-mono, monospace); letter-spacing: .3em; color: var(--paper, #fff); }
.ew-mid b { font-size: 10px; opacity: .55; font-weight: 700; }
.ew-name { font-size: 13px; font-weight: 700; min-height: 1.2em; }
.ew-it { position: absolute; left: calc(var(--x) - 34px); top: calc(var(--y) - 34px); width: 68px; height: 68px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: rgba(255,255,255,.62); border: 1px solid rgba(255,255,255,.14); background: rgba(12,12,16,.5); clip-path: polygon(14% 0, 100% 0, 100% 86%, 86% 100%, 0 100%, 0 14%); transition: transform .14s ease, color .14s, background .14s, border-color .14s; }
.ew-it svg { width: 26px; height: 26px; }
.ew-it span { font: 700 7px var(--f-mono, monospace); letter-spacing: .14em; }
.ew-it.on { color: #0b0b0f; background: var(--gold, #e8c66a); border-color: var(--gold, #e8c66a); transform: scale(1.22); box-shadow: 0 0 30px rgba(232,198,106,.5); }
@media (prefers-reduced-motion: reduce) { .ew, .ew-it { transition: none; } }

.build-tag { position: fixed; right: 14px; bottom: 8px; z-index: 5; font: 600 10px/1 'Rajdhani', 'Segoe UI', sans-serif; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.38); pointer-events: none; user-select: none; text-shadow: 0 1px 2px rgba(0,0,0,.6); }

/* crisp pass: tactile press, glass sheen sweep, sharper text, GPU hints */
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.btn, .menu-item, .opt .val button { will-change: transform; -webkit-tap-highlight-color: transparent; }
.btn:active, .btn.focus:active { transform: translateY(1px) scale(.965); transition-duration: .08s; box-shadow: 0 2px 14px rgba(167, 139, 250, .4); }
.menu-item:active { transform: scale(.985); transition-duration: .08s; }
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .42) 50%, transparent 65%); transform: translateX(-130%); transition: transform .7s var(--ease); pointer-events: none; }
.btn.focus::before, .btn:hover::before { transform: translateX(130%); }
@media (hover: none) { .btn:hover::before { transform: translateX(-130%); } }
@media (prefers-reduced-motion: reduce) { .btn::before { display: none; } .btn:active { transform: none; } }

/* 9 menu rows must fit short viewports (720p laptops): tighten rows, drop the ticker band behind them */
@media (max-height: 800px) { .menu { gap: 3px; } .menu-item { padding: 10px 18px !important; } .ticker { display: none; } }
@media (max-height: 700px) { .menu-item { padding: 7px 16px !important; } }
@media (max-height: 760px) { .menu-item { padding: 6px 16px !important; font-size: 12px; } .logo { font-size: clamp(40px, 9vh, 72px); margin-bottom: 10px; } .eyebrow { margin-bottom: 6px; } }

/* ---------- loading v2: owner art (earth video at boot, Year 3000 gates per map), one readable stack ---------- */
#loading { background: #05070d; }
#loading::before { background: none; opacity: 1; filter: none; }
#loading:not(.boot)::before { background: url(../img/art/loading-year3000.jpg) center top / cover no-repeat; }
#loading.boot::before { background: url(../img/art/loading-ambient-frame.jpg) center / cover no-repeat; }
#loading.kb:not(.boot)::before { animation: kenburns 26s linear infinite alternate; }
/* year 3000 art: lighter scrim so the gates read; the map title gets its own soft shadow instead of a dark wash */
#loading:not(.boot)::after { background: linear-gradient(0deg, rgba(3, 5, 10, .9) 0, rgba(3, 5, 10, .55) 18%, rgba(3, 5, 10, 0) 42%), linear-gradient(180deg, rgba(3, 5, 10, .45), transparent 22%); }
#loading:not(.boot) .ld-map b { text-shadow: 0 2px 22px rgba(0, 0, 0, .85), 0 0 2px rgba(0, 0, 0, .6); }
.ld-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; display: none; }
#loading.boot .ld-vid[src] { display: block; }
#loading::after { background: linear-gradient(0deg, rgba(3, 5, 10, .97) 0, rgba(3, 5, 10, .86) 22%, rgba(3, 5, 10, 0) 48%), linear-gradient(180deg, rgba(3, 5, 10, .7), transparent 26%); }
.ld-emb { display: none; }
.ld-top { position: absolute; left: calc(40px + var(--safe-l)); right: calc(40px + var(--safe-r)); top: calc(28px + var(--safe-t)); font: 600 12px var(--f-hud); letter-spacing: .28em; color: #efe6cf; }
.ld-top span:last-child { color: var(--champ, #ffd48a); }
.ld-map { left: 0; right: 0; bottom: auto; top: 13vh; justify-items: center; text-align: center; }
.ld-map small { font: 600 12px var(--f-hud); letter-spacing: .5em; padding-left: .5em; color: var(--champ, #ffd48a); }
.ld-map b { font: 700 clamp(30px, 7vh, 72px) var(--f-disp); letter-spacing: .14em; padding-left: .14em; color: #fff; text-shadow: 0 6px 40px rgba(0, 0, 0, .7); }
.ld-map::after { justify-self: center; width: min(260px, 40vw); }
.ld-foot { position: absolute; left: 50%; translate: -50% 0; bottom: calc(6vh + var(--safe-b)); width: min(680px, calc(100vw - 48px)); display: grid; gap: 14px; text-align: center; }
.ld-tip { position: static; width: auto; margin: 0 auto 6px; min-height: 3.4em; font: 500 15px/1.6 var(--f-hud); color: #e6dfcd; }
.ld-tip::before { content: 'FIELD NOTE'; font: 600 11px var(--f-hud); letter-spacing: .4em; padding-left: .4em; color: var(--champ, #ffd48a); margin-bottom: 8px; }
.ld-row { display: flex; justify-content: space-between; align-items: baseline; }
.ld-stage { font: 600 12px var(--f-hud); letter-spacing: .24em; text-transform: uppercase; color: #efe6cf; }
.ld-pct { position: static; font: 600 22px var(--f-hud); letter-spacing: 0; background: none; -webkit-text-fill-color: #fff; color: #fff; }
.ld-pct small { font-size: .6em; margin-left: 3px; }
.ld-bar { position: relative; left: auto; right: auto; bottom: auto; height: 6px; border-radius: 0; background: rgba(255, 226, 168, .16); box-shadow: inset 0 0 0 1px rgba(255, 226, 168, .35); }
.ld-bar i { border-radius: 0; background: linear-gradient(90deg, #b8893a, #ffe2a8); box-shadow: 0 0 18px rgba(255, 226, 168, .6); position: relative; }
.ld-bar i::after { content: ''; position: absolute; right: -7px; top: -5px; width: 14px; height: 14px; rotate: 45deg; background: #ffe2a8; box-shadow: 0 0 14px #ffe2a8; }
/* title and splash text: readable sizes, sane tracking */
.eyebrow { font: 600 12px var(--f-hud); letter-spacing: .3em; color: #d9d2c0; }
.tag, .sp-studio, .press, .ld-top { font-family: var(--f-hud); }
.sp-studio { font-size: 12px; letter-spacing: .5em; color: #d9d2c0; } .press { font-size: 13px; letter-spacing: .34em; color: #efe6cf; }

/* home: logo and action buttons only. Detail lives on the About page. */
#title .ticker, #title .hero-card, #title .eyebrow, #title .tag, #title .ver, #title .pcard .xp-bar { display: none !important; }
#title .logo { margin-bottom: 34px; }
.ab-copy { font: 500 15px/1.7 var(--f-hud); color: #d9d2c0; max-width: 56ch; margin: 6px 0 18px; }
.ab-list { display: grid; border-top: 1px solid var(--line); margin-bottom: 18px; }
#loading::after { background: linear-gradient(0deg, rgba(3, 5, 10, 1) 0, rgba(3, 5, 10, .95) 16%, rgba(3, 5, 10, .7) 30%, rgba(3, 5, 10, 0) 52%), linear-gradient(180deg, rgba(3, 5, 10, .7), transparent 26%); }

/* grenade tiles: icon, count, radial cooldown, key glyph */
.h-gren { position: absolute; right: calc(var(--m) + var(--safe-r) + 250px * var(--hu)); bottom: calc(40px * var(--hu) + var(--safe-b)); scale: var(--hu); transform-origin: 100% 100%; display: flex; gap: 12px; align-items: flex-end; pointer-events: none; }
.gt { position: relative; width: 62px; height: 62px; display: grid; place-items: center; color: #fff; opacity: .55; transition: opacity .2s, scale .2s; }
.gt.sel { opacity: 1; scale: 1.14; } .gt.sel.cd { opacity: .8; }
.gt .ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); fill: rgba(8, 10, 18, .68); }
.gt .ring circle { fill: rgba(8, 10, 18, .68); stroke: rgba(255, 226, 168, .3); stroke-width: 3; }
.gt .ring .pg { fill: none; stroke: #ffe2a8; stroke-dasharray: 100; stroke-dashoffset: calc(var(--cd, 0) * 100); filter: drop-shadow(0 0 4px rgba(255, 226, 168, .8)); transition: stroke-dashoffset .25s linear; }
.gt.cd .ring .pg { stroke: #ff9f43; }
.gt .ic { position: relative; width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.gt .n { position: absolute; right: -2px; top: -4px; min-width: 20px; padding: 1px 5px; font: 700 13px var(--f-hud); color: #000; background: #ffe2a8; text-align: center; clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px); }
.gt.cd .n { background: #ff9f43; }
.gt em { position: absolute; bottom: -20px; font: 600 10px var(--f-hud); letter-spacing: .2em; font-style: normal; color: #efe6cf; }
.gt .kd { position: absolute; top: -22px; padding: 1px 7px; font: 600 10px var(--f-mono); background: rgba(10, 12, 22, .85); border: 1px solid rgba(255, 255, 255, .3); }
.gt .kd:empty { display: none; }
.h-weapon .gr-row { display: none; }
body.touch-on .h-gren { display: none; }

/* weapon swap feedback */
.wp-name.swapped { animation: wpSwap .45s var(--ease) both; }
.wp-name.swapfail { animation: wpFail .32s var(--ease) both; }
.wp-name.swapfail::after { content: attr(data-msg); margin-left: .8em; color: #ff6a78; }
@keyframes wpSwap { 0% { opacity: 1; color: #fff; letter-spacing: .55em; text-shadow: 0 0 14px var(--team, #fff); transform: translateX(12px); } 100% { opacity: .8; letter-spacing: .3em; text-shadow: none; transform: none; } }
@keyframes wpFail { 0%, 100% { transform: none; } 25% { transform: translateX(-6px); } 60% { transform: translateX(5px); } }
@media (prefers-reduced-motion: reduce) { .wp-name.swapped, .wp-name.swapfail { animation: none; } }

/* feel pass (js/feel.js HIT): crit marker is yellow with a hot rim so it never reads as a body tick; low-health vignette; damage numbers setting */
.h-hit.head { color: #ffd23a; filter: drop-shadow(0 0 8px rgba(255, 110, 20, .95)); }
.h-hit.head svg { stroke-width: 2.2; }
.h-dn.head { color: #ffd23a; text-shadow: 0 0 10px rgba(255, 120, 20, .85); }
body.no-dn .h-dn { display: none; }
.h-lowhp { position: absolute; inset: 0; pointer-events: none; opacity: var(--lh, 0); background: radial-gradient(ellipse at center, transparent 38%, rgba(190, 8, 26, .62) 100%); animation: lowhpPulse .95s ease-in-out infinite alternate; }
@keyframes lowhpPulse { from { filter: brightness(.8); } to { filter: brightness(1.25); } }
@media (prefers-reduced-motion: reduce) { .h-lowhp { animation: none; } }

/* pause subtitle: one line, ellipsis when the sanctum or match line is long */
#pauseSub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* ---- touch (phone) layout pass: keep the HUD clear of the on-screen buttons ---- */
body.touch-on #hud .h-hint, body.touch-on .build-tag { display: none !important; }
body.touch-on #hud .h-top { left: auto; right: calc(150px + var(--safe-r, 0px)); width: min(300px, 42vw); }
body.touch-on #hud .vit { scale: .85; transform-origin: 100% 0; }
body.touch-on #hud .h-weapon { right: calc(290px + var(--safe-r, 0px)); }