/* ==========================================================
   SPLXCE / HOME v2 — game menu front end
   Themes stay compatible with the other rooms (splxce-theme)
   ========================================================== */

:root {
  --void: #020604;
  --ink: #e9e4d4;
  --sig: #c8ff00;
  --punk: #ff2d7a;
  --tape: #ece6d2;
  --tape-ink: #020604;
  --line: color-mix(in srgb, var(--sig) 26%, transparent);
  --dim: color-mix(in srgb, var(--ink) 58%, transparent);
  --lcd: var(--sig);
  --chrome: linear-gradient(180deg, #fbfcfd 0%, #dde3e9 34%, #a7b2bd 50%, #c6ced6 66%, #f1f4f7 100%);
  --display: "Anybody", "Arial Black", Impact, sans-serif;
  --ui: "Chakra Petch", "Segoe UI", system-ui, sans-serif;
  --snap: cubic-bezier(.2, .9, .25, 1.35);
  color-scheme: dark;
}
[data-theme="ice"]    { --void: #01060c; --sig: #00e5ff; --punk: #ffb000; }
[data-theme="hot"]    { --void: #0a0202; --sig: #ff3b1f; --punk: #ffd400; --ink: #f1e6dc; --tape: #f1e6dc; --tape-ink: #0a0202; }
[data-theme="violet"] { --void: #06030b; --sig: #b44dff; --punk: #3dff9a; --tape-ink: #06030b; }
[data-theme="chrome"] { --void: #cdd5de; --ink: #0b1220; --sig: #0047d4; --punk: #ff2d7a; --tape: #ffffff; --tape-ink: #0b1220; --lcd: #6fd3ff; color-scheme: light; }
[data-theme="light"]  { --lcd: #7dff2a; --void: #e8e4d6; --ink: #141414; --sig: #141414; --punk: #e0301e; --tape: #141414; --tape-ink: #e8e4d6; color-scheme: light; }

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--void);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 16px;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.nucleus { fill: var(--punk); }

/* ---------- CRT layers ---------- */
.fx { position: fixed; inset: 0; pointer-events: none; z-index: 40; }
.fx-scan { background: repeating-linear-gradient(to bottom, rgb(0 0 0 / .24) 0 1px, transparent 1px 3px); }
[data-theme="light"] .fx-scan { background: repeating-linear-gradient(to bottom, rgb(0 0 0 / .07) 0 1px, transparent 1px 3px); }
.fx-noise {
  inset: -40%;
  opacity: .075;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain .6s steps(3) infinite;
}
@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  33% { transform: translate(-3%, 2%); }
  66% { transform: translate(2%, -3%); }
}
.fx-vig { background: radial-gradient(125% 95% at 50% 45%, transparent 55%, rgb(0 0 0 / .6)); }
[data-theme="light"] .fx-vig { background: radial-gradient(125% 95% at 50% 45%, transparent 60%, rgb(60 50 30 / .22)); }
[data-fx="off"] .fx-scan, [data-fx="off"] .fx-noise { display: none; }

/* ---------- Frame ---------- */
#crt {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding:
    max(14px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right))
    max(12px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
}

/* ---------- HUD ---------- */
.hud {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dim);
}
.p1 {
  font-family: var(--display);
  font-style: italic;
  font-weight: 900;
  font-size: .95rem;
  letter-spacing: 0;
  background: var(--sig);
  color: var(--void);
  padding: .1em .75em .1em .6em;
  clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
}
.sys { color: var(--ink); }
.grow { flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), transparent 80%); }
.memcard { display: inline-flex; align-items: center; gap: .5em; }
.memcard svg { width: 11px; height: 14px; color: var(--sig); }
.clock { color: var(--ink); font-variant-numeric: tabular-nums; }
.padstate { display: inline-flex; align-items: center; gap: .5em; color: var(--sig); }
.padstate[hidden], .np[hidden] { display: none; }
.padstate i { width: 7px; height: 7px; border-radius: 50%; background: var(--sig); box-shadow: 0 0 8px var(--sig); }

/* ---------- Screens ---------- */
.screens { position: relative; min-height: 0; }
.screen { position: absolute; inset: 0; display: grid; overflow: auto; overscroll-behavior: contain; }
.screen[hidden] { display: none; }
.screen.is-in { animation: chIn .24s ease-out; }
@keyframes chIn {
  0%   { opacity: 0; transform: scaleY(.02); filter: brightness(3); }
  55%  { opacity: 1; transform: scaleY(1.015); filter: brightness(1.4); }
  100% { transform: none; filter: none; }
}

/* ---------- Boot ---------- */
#scr-boot { align-content: center; padding: 0 6vw; }
.boot { font-size: clamp(.9rem, 1.6vw, 1.1rem); font-weight: 500; color: var(--sig); max-width: 640px; }
.boot p { margin: .25em 0; display: flex; gap: 1ch; }
.boot .dots { flex: 1; overflow: hidden; white-space: nowrap; color: var(--line); }
.boot .dots::before { content: "................................................................................"; }
.boot .ok { color: var(--ink); }
.boot .found {
  margin-top: 1.2em;
  font-family: var(--display);
  font-style: italic;
  font-weight: 900;
  font-variation-settings: "wdth" 150;
  font-size: clamp(1.8rem, 5vw, 3.2rem);
  color: var(--ink);
  text-shadow: -.04em .035em 0 var(--punk);
}

/* ---------- Title ---------- */
#scr-title { place-content: center; justify-items: center; text-align: center; padding: 2vh 2vw; cursor: pointer; }
.wordmark {
  margin: 0;
  display: flex;
  align-items: center;
  font-family: var(--display);
  font-style: italic;
  font-weight: 900;
  font-variation-settings: "wdth" 150;
  font-size: clamp(3.2rem, 14.5vw, 12rem);
  line-height: .85;
  letter-spacing: -.02em;
  color: var(--ink);
  text-shadow: -.035em .03em 0 var(--punk);
}
.atom-x {
  width: .9em;
  height: .9em;
  margin: 0 -.02em 0 .02em;
  color: var(--sig);
  overflow: visible;
  filter: drop-shadow(-.035em .03em 0 var(--punk));
  animation: spin 14s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.tagline {
  margin: 1.4rem 0 0;
  font-size: clamp(.8rem, 1.5vw, 1rem);
  font-weight: 600;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--dim);
}
.press {
  margin-top: clamp(2.5rem, 9vh, 5rem);
  background: none;
  border: 0;
  padding: .3em .6em;
  cursor: pointer;
  font-family: var(--display);
  font-weight: 800;
  font-variation-settings: "wdth" 125;
  font-size: clamp(1.2rem, 2.6vw, 1.8rem);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--sig);
  animation: blink 1.1s steps(1) infinite;
}
.press.go { animation: blink .08s steps(1) 5; }
.press:focus-visible { outline: 2px dashed var(--punk); outline-offset: 6px; }
@keyframes blink { 50% { opacity: 0; } }
.legal { margin: 2rem 0 0; font-size: .75rem; letter-spacing: .12em; color: var(--dim); }

/* ---------- Tape selection (shared by menu, tracks, options) ---------- */
.tapeable { position: relative; isolation: isolate; }
.tapeable.is-sel { color: var(--tape-ink); }
.tapeable.is-sel::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: .02em -.35em -.02em -.25em;
  background:
    repeating-linear-gradient(90deg, transparent 0 7px, rgb(0 0 0 / .05) 7px 8px),
    var(--tape);
  clip-path: polygon(1.5% 8%, 4% 0, 97% 4%, 100% 22%, 98.5% 55%, 100% 88%, 96% 100%, 3% 94%, 0 70%, 1.8% 40%);
  transform: rotate(-1deg) skewX(-10deg);
  transform-origin: left center;
  filter: url(#rough);
  animation: slap .16s var(--snap);
}
.tapeable.is-sel::after {
  content: "";
  position: absolute;
  left: -.72em;
  top: 50%;
  width: .38em;
  height: .44em;
  translate: 0 -50%;
  background: var(--punk);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  animation: nudge .5s steps(2) infinite;
}
.tapeable.confirm::before { animation: flash .08s steps(1) 4; }
@keyframes slap {
  0%   { transform: rotate(-4deg) skewX(-10deg) scaleX(.05); opacity: .6; }
  100% { transform: rotate(-1deg) skewX(-10deg) scaleX(1); opacity: 1; }
}
@keyframes nudge { 50% { translate: .14em -50%; } }
@keyframes flash { 50% { opacity: 0; } }

/* ---------- Main menu ---------- */
#scr-main {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
  gap: 2vw;
  padding: 1vh 1vw 1vh 3vw;
}
.menu-head {
  display: flex;
  align-items: center;
  gap: .6em;
  margin: 0 0 1.2rem;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--sig);
}
.atom-mini { width: 1.1em; height: 1.1em; color: var(--sig); }
.menu { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; padding-left: 1em; }
.mi {
  display: inline-block;
  background: none;
  border: 0;
  padding: .06em .3em .1em .1em;
  cursor: pointer;
  text-decoration: none;
  text-align: left;
  font-family: var(--display);
  font-style: italic;
  font-weight: 900;
  font-variation-settings: "wdth" 150;
  font-size: clamp(2rem, min(5.4vw, 8.4vh), 4.8rem);
  line-height: 1;
  letter-spacing: -.01em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--void);
  -webkit-text-stroke: 2.8px color-mix(in srgb, var(--ink) 50%, var(--void));
  paint-order: stroke fill;
  transition: -webkit-text-stroke-color .15s;
}
.mi:hover { -webkit-text-stroke-color: var(--ink); }
.mi.is-sel { color: var(--tape-ink); -webkit-text-stroke: 0 transparent; }
.mi:focus { outline: none; }
.mi:focus-visible { outline: 2px dashed var(--punk); outline-offset: 6px; }
.tapeable.is-sel:focus-visible { outline: none; }
.menu-blurb { display: none; }

/* Preview */
.preview { display: grid; justify-items: center; align-content: center; gap: 1.2rem; min-height: 0; }
.stage { position: relative; width: min(34vw, 50vh, 460px); aspect-ratio: 1; color: var(--sig); isolation: isolate; }
.atom-big { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 14px color-mix(in srgb, var(--sig) 50%, transparent)); }
.atom-big .orbits { opacity: .9; }
.atom-big .e { fill: var(--ink); }
.atom-big .shine { fill: rgb(255 255 255 / .55); }
.floor {
  position: absolute;
  z-index: -1;
  left: -40%;
  right: -40%;
  bottom: 4%;
  height: 40%;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 36px 36px;
  transform: perspective(260px) rotateX(64deg);
  transform-origin: bottom;
  -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 90%);
  mask-image: linear-gradient(to top, #000 10%, transparent 90%);
}
.pv { position: relative; width: min(100%, 440px); }
.pv-card {
  padding: 1.1rem 1.4rem 1.3rem;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--sig) 10%, transparent), transparent 60%),
    color-mix(in srgb, var(--void) 70%, transparent);
  border-left: 3px solid var(--sig);
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%);
}
.pv-title {
  margin: 0 0 .4rem;
  font-family: var(--display);
  font-style: italic;
  font-weight: 900;
  font-variation-settings: "wdth" 125;
  font-size: clamp(1.6rem, 2.6vw, 2.3rem);
  line-height: 1;
  color: var(--sig);
}
.pv-blurb { margin: 0; font-size: 1.05rem; line-height: 1.45; max-width: 34ch; }
.sticker {
  position: absolute;
  z-index: 2;
  top: -.9rem;
  right: -.6rem;
  padding: .35em .75em;
  font-family: var(--display);
  font-weight: 800;
  font-variation-settings: "wdth" 110;
  font-size: .8rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--void);
  background: var(--punk);
  rotate: 7deg;
  filter: url(#rough) drop-shadow(3px 3px 0 rgb(0 0 0 / .45));
}
.pv.swap .pv-title, .pv.swap .sticker { animation: glitch .2s steps(1); }
.pv.swap .pv-blurb { animation: fadein .25s ease-out; }
@keyframes glitch {
  0%   { clip-path: inset(0 0 68% 0); translate: -7px 0; }
  33%  { clip-path: inset(38% 0 22% 0); translate: 6px 0; }
  66%  { clip-path: inset(74% 0 0 0); translate: -3px 0; }
  100% { clip-path: inset(0); translate: 0 0; }
}
@keyframes fadein { from { opacity: 0; } }

/* ---------- Sub screens ---------- */
.sub { align-content: start; gap: 3vh; padding: 2vh 3vw 2vh 4vw; }
.sub-title {
  margin: 0;
  font-family: var(--display);
  font-style: italic;
  font-weight: 900;
  font-variation-settings: "wdth" 150;
  font-size: clamp(2.2rem, 6.5vw, 5.4rem);
  line-height: .9;
  text-transform: uppercase;
  color: var(--void);
  -webkit-text-stroke: 3px var(--sig);
  paint-order: stroke fill;
}

/* Sound test */
.snd { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 4vw; align-items: start; }
.tracks { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; padding-left: 1em; }
.tr {
  background: none;
  border: 0;
  padding: .12em .5em .12em .1em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font-family: var(--display);
  font-style: italic;
  font-weight: 800;
  font-variation-settings: "wdth" 120;
  font-size: clamp(1.1rem, min(2.2vw, 3.6vh), 1.6rem);
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--dim);
}
.tr:hover { color: var(--ink); }
.tr.is-sel { color: var(--tape-ink); }
.tr .note { font-style: normal; color: var(--punk); visibility: hidden; }
.tr.is-playing .note { visibility: visible; }
.tr:focus { outline: none; }
.tr:focus-visible { outline: 2px dashed var(--punk); outline-offset: 4px; }
.readout {
  padding: 1.2rem 1.5rem 1.4rem;
  border-left: 3px solid var(--sig);
  background: linear-gradient(135deg, color-mix(in srgb, var(--sig) 9%, transparent), transparent 55%);
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%);
}
.ro-top { display: flex; justify-content: space-between; font-size: .8rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--dim); }
#sndState.on { color: var(--sig); }
.ro-num {
  font-family: var(--display);
  font-style: italic;
  font-weight: 900;
  font-variation-settings: "wdth" 150;
  font-size: clamp(4.5rem, 13vw, 10rem);
  line-height: .9;
  color: var(--sig);
  text-shadow: -.035em .03em 0 var(--punk);
  font-variant-numeric: tabular-nums;
}
.viz { display: block; width: 100%; height: clamp(90px, 18vh, 160px); margin-top: 1rem; }

/* Options */
.opts { display: flex; flex-direction: column; gap: .5rem; max-width: 900px; padding-left: 1em; }
.opt {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2rem;
  padding: .15em .4em .15em .1em;
  cursor: pointer;
  font-family: var(--display);
  font-style: italic;
  font-weight: 800;
  font-variation-settings: "wdth" 120;
  font-size: clamp(1.2rem, min(2.8vw, 5vh), 2.2rem);
  text-transform: uppercase;
  color: var(--dim);
}
.opt:hover { color: var(--ink); }
.opt.is-sel { color: var(--tape-ink); }
.opt .val { display: inline-flex; align-items: center; gap: .7em; font-family: var(--ui); font-style: normal; font-weight: 700; font-size: .55em; letter-spacing: .2em; }
.opt .arr { background: none; border: 0; padding: .2em .35em; cursor: pointer; font-size: .9em; line-height: 1; }
.opt .arr:focus-visible { outline: 2px dashed var(--punk); }
.opt .v { min-width: 7.5em; text-align: center; display: inline-flex; justify-content: center; align-items: center; gap: .55em; }
.swatch { width: .95em; height: .95em; border: 2px solid currentColor; }
.blocks { display: inline-flex; gap: 3px; }
.blocks i { width: .5em; height: 1.05em; border: 1.5px solid currentColor; }
.blocks i.on { background: currentColor; }

/* ---------- Footer / button hints ---------- */
.pad {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 2.4rem;
  padding-top: .6rem;
  border-top: 1px solid var(--line);
  font-size: .85rem;
  font-weight: 600;
  color: var(--dim);
}
.hints { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
.hint { display: inline-flex; align-items: center; gap: .5em; background: none; border: 0; padding: .2em 0; }
button.hint { cursor: pointer; }
button.hint:hover { color: var(--ink); }
.k {
  display: inline-grid;
  place-items: center;
  min-width: 1.8em;
  height: 1.8em;
  padding: 0 .5em;
  border: 1.5px solid currentColor;
  border-radius: 4px;
  font-size: .72rem;
  letter-spacing: .06em;
}
.k.pad-a, .k.pad-b { min-width: 1.8em; padding: 0; border: 0; border-radius: 50%; font-family: var(--display); font-weight: 900; color: var(--void); }
.k.pad-a { background: var(--sig); }
.k.pad-b { background: var(--punk); }
.player { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px 5px 8px; border-radius: 999px; background: var(--chrome);
  box-shadow: inset 0 1px 0 #fff, inset 0 -2px 3px rgb(0 0 0 / .25), 0 3px 10px rgb(0 0 0 / .45); }
.pl-btn { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; border: 1px solid #7d8894; cursor: pointer; font-size: .72rem; color: #1b2430;
  background: radial-gradient(circle at 35% 30%, #fff, #d7dee5 45%, #9ba6b2 100%); box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgb(0 0 0 / .4); }
.pl-btn:hover { filter: brightness(1.08); }
.pl-btn:active { transform: translateY(1px); box-shadow: inset 0 2px 3px rgb(0 0 0 / .35); }
.pl-lcd { display: inline-flex; align-items: center; gap: 8px; width: 188px; height: 30px; padding: 0 10px; border-radius: 8px; border: 1px solid #56606b; cursor: pointer; overflow: hidden;
  background: linear-gradient(180deg, #061008, #0d1c12); box-shadow: inset 0 2px 6px rgb(0 0 0 / .8); color: var(--lcd); font-family: "VT323", monospace; font-size: 19px; letter-spacing: .04em; text-shadow: 0 0 6px color-mix(in srgb, var(--lcd) 70%, transparent); }
.pl-marq { flex: 1; overflow: hidden; white-space: nowrap; }
.pl-marq span { display: inline-block; }
.player.on .pl-marq span { animation: marq 9s linear infinite; padding-left: 100%; }
@keyframes marq { to { transform: translateX(-100%); } }
.np-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; flex: none; }
.np-eq i { width: 3px; height: 3px; background: currentColor; }
.player.on .np-eq i { animation: eq .6s ease-in-out infinite alternate; }
.np-eq i:nth-child(2) { animation-delay: -.3s; }
.np-eq i:nth-child(3) { animation-delay: -.55s; }
.np-eq i:nth-child(4) { animation-delay: -.15s; }
@keyframes eq { from { height: 3px; } to { height: 14px; } }

/* ---------- Leaving: CRT power-off ---------- */
body.poweroff #crt { animation: off .4s ease-in forwards; }
body.poweroff .fx-vig { background: #000; transition: background .4s; }
@keyframes off {
  0%   { transform: none; filter: none; }
  55%  { transform: scale(1, .004); filter: brightness(5); }
  100% { transform: scale(0, .004); filter: brightness(8); }
}


/* ==========================================================
   ROOMS
   ========================================================== */
.hud-room:not(:empty)::before { content: " / "; color: var(--dim); }
.hud-room { color: var(--sig); }
.room { align-content: start; grid-template-rows: auto minmax(0, 1fr); gap: 2.2vh; padding: 1.6vh 2vw 1.6vh 3vw; overflow: hidden; }
.room-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; }
.room-note { margin: 0 0 .6em; font-size: .8rem; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--sig); }
.sticker.static { position: static; display: inline-block; rotate: -3deg; }

/* shared cursor frame for grid items */
.cell { position: relative; outline: none; }
.cell.is-sel { z-index: 2; }
.cell.is-sel::after {
  content: ""; position: absolute; inset: -5px;
  border: 3px solid var(--sig);
  clip-path: polygon(0 0, 30% 0, 30% 3px, 70% 3px, 70% 0, 100% 0, 100% 30%, calc(100% - 3px) 30%, calc(100% - 3px) 70%, 100% 70%, 100% 100%, 70% 100%, 70% calc(100% - 3px), 30% calc(100% - 3px), 30% 100%, 0 100%, 0 70%, 3px 70%, 3px 30%, 0 30%);
  animation: pulse 1s steps(2) infinite;
  pointer-events: none;
}
.cell:focus-visible::after { content: ""; position: absolute; inset: -5px; border: 3px solid var(--sig); pointer-events: none; }
@keyframes pulse { 50% { border-color: var(--punk); } }

/* ---------- Work ---------- */
.work { display: grid; grid-template-columns: minmax(220px, .7fr) minmax(0, 2fr); gap: 3vw; min-height: 0; }
.roster { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; padding-left: 1em; padding-top: .4rem; }
.cl {
  background: none; border: 0; cursor: pointer; text-align: left;
  padding: .12em .5em .14em .1em;
  font-family: var(--display); font-style: italic; font-weight: 900; font-variation-settings: "wdth" 115;
  font-size: clamp(1.05rem, min(1.9vw, 3.6vh), 1.7rem); line-height: 1.02; text-transform: uppercase;
  color: var(--dim);
}
.cl small { display: block; font-family: var(--ui); font-style: normal; font-weight: 600; font-size: .5em; letter-spacing: .2em; opacity: .8; margin-top: .25em; }
.cl:hover { color: var(--ink); }
.cl.is-sel { color: var(--tape-ink); }
.cl:focus { outline: none; }
.dossier { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: .4rem 1rem 2rem 0; scrollbar-width: thin; scrollbar-color: var(--sig) transparent; }
.dossier.swap .dos-top, .dossier.swap .stats { animation: fadein .3s ease-out; }
.dos-top { display: grid; grid-template-columns: auto 1fr; gap: 1.6rem; align-items: center; }
.logo-plate { width: clamp(96px, 11vw, 150px); aspect-ratio: 1; display: grid; place-items: center; padding: 14px; background: #16181a; border: 1px solid var(--line); clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); }
.logo-plate img { max-width: 100%; max-height: 100%; object-fit: contain; }
.dos-name { margin: .35rem 0 .3rem; font-family: var(--display); font-style: italic; font-weight: 900; font-variation-settings: "wdth" 130; font-size: clamp(1.7rem, 3.4vw, 3rem); line-height: .95; text-transform: uppercase; color: var(--ink); text-shadow: -.03em .03em 0 var(--punk); }
.dos-blurb { margin: 0; max-width: 52ch; line-height: 1.45; color: var(--dim); }
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 2px; margin: 1.6rem 0 .4rem; }
.stats div { padding: .7rem .9rem; background: color-mix(in srgb, var(--sig) 7%, transparent); border-top: 2px solid var(--line); }
.stats dt { font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); order: 2; }
.stats dd { margin: 0 0 .15rem; font-family: var(--display); font-style: italic; font-weight: 900; font-variation-settings: "wdth" 120; font-size: clamp(1.25rem, 1.9vw, 1.7rem); color: var(--sig); line-height: 1.05; }
.stats div { display: flex; flex-direction: column-reverse; }
.dos-source { margin: 0 0 1.4rem; font-size: .75rem; color: var(--dim); }
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 12px; }
.mcard { display: block; padding: 0; border: 0; background: #111; cursor: pointer; text-align: left; color: #f2eee2; aspect-ratio: 9 / 14; overflow: visible; }
.mcard img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.9) contrast(1.05); transition: filter .15s; }
.mcard:hover img, .mcard.is-sel img { filter: saturate(1.15) contrast(1.1); }
.mcard .mc-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.6rem .55rem .5rem; background: linear-gradient(transparent, rgb(0 0 0 / .85)); font-size: .78rem; font-weight: 600; line-height: 1.25; }
.mcard .mc-cap b { display: block; font-family: var(--display); font-style: italic; font-weight: 800; color: #c8ff00; font-size: .85rem; }
[data-theme]:not([data-theme="acid"]) .mcard .mc-cap b { color: var(--sig); }
[data-theme="light"] .mcard .mc-cap b { color: #fff; }
.mcard .mc-play { position: absolute; top: .45rem; left: .45rem; width: 1.7rem; height: 1.7rem; display: grid; place-items: center; background: var(--punk); color: #000; font-size: .7rem; clip-path: polygon(0 0, 100% 0, 100% 70%, 70% 100%, 0 100%); }
.dos-links { margin: 1.4rem 0 0; display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; font-size: .9rem; }
.dos-links a, .rd-links a { color: var(--sig); text-underline-offset: .2em; }

/* ---------- Latest (TV) ---------- */
.tvwrap { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(200px, .8fr); gap: 2.5vw; min-height: 0; align-items: start; }
.tv { padding: clamp(10px, 1.4vw, 20px); background: linear-gradient(160deg, #3a3d42, #1b1c1f 40%, #0e0f11); border-radius: 22px; box-shadow: inset 0 2px 0 rgb(255 255 255 / .12), 0 18px 40px rgb(0 0 0 / .5); }
.tv-screen { position: relative; aspect-ratio: 16 / 10; max-height: calc(100vh - 290px); width: 100%; margin: 0 auto; overflow: hidden; background: #000; border-radius: 16px / 22px; box-shadow: inset 0 0 60px rgb(0 0 0 / .9); }
.tv-bg { position: absolute; inset: -10%; width: 120%; height: 120%; object-fit: cover; filter: blur(22px) brightness(.45) saturate(1.3); }
.tv-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.tv-static { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.tv-static.on { opacity: 1; }
.tv-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(to bottom, rgb(0 0 0 / .25) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 60%, rgb(0 0 0 / .55)); }
.osd { position: absolute; z-index: 2; font-family: var(--ui); font-weight: 700; color: #7dff2a; text-shadow: 0 0 6px rgb(125 255 42 / .8), 2px 2px 0 #000; letter-spacing: .08em; }
.osd-ch { top: 5%; left: 4%; font-size: clamp(1.4rem, 3.4vw, 2.8rem); }
.osd-snd { top: 6%; right: 4%; font-size: clamp(.8rem, 1.3vw, 1rem); text-transform: uppercase; }
.osd-info { bottom: 6%; left: 4%; right: 4%; display: flex; flex-direction: column; gap: .2em; font-size: clamp(.8rem, 1.2vw, 1rem); }
.osd-info b { font-size: 1.5em; color: #fff; text-shadow: 2px 2px 0 #000; }
.osd-ch.flash { animation: fadein .1s steps(1); }
.tv-controls { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 12px; }
.tvb {
  display: inline-flex; align-items: center; gap: .4em; padding: .55em 1em;
  border: 1.5px solid var(--line); background: color-mix(in srgb, var(--void) 70%, transparent);
  font-family: var(--ui); font-weight: 700; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink);
  text-decoration: none; cursor: pointer; clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
.tv .tvb { color: #e9e4d4; border-color: rgb(255 255 255 / .2); background: rgb(0 0 0 / .35); }
.tvb:hover { border-color: var(--sig); color: var(--sig); }
.tvb.on { background: var(--sig); color: var(--void); border-color: var(--sig); }
.tvb:focus-visible { outline: 2px dashed var(--punk); outline-offset: 3px; }
.guide { display: flex; flex-direction: column; gap: 2px; min-height: 0; max-height: 100%; overflow-y: auto; padding: 2px 4px 2px 1.2em; scrollbar-width: thin; scrollbar-color: var(--sig) transparent; }
.gch { display: grid; grid-template-columns: 2.4em 1fr; gap: .6em; align-items: baseline; width: 100%; background: none; border: 0; cursor: pointer; text-align: left; padding: .38em .5em .38em .2em; color: var(--dim); font-weight: 600; font-size: .88rem; }
.gch b { font-family: var(--display); font-style: italic; font-weight: 900; color: var(--sig); }
.gch span small { display: block; font-size: .72rem; opacity: .8; letter-spacing: .06em; }
.gch:hover { color: var(--ink); }
.gch.is-sel { color: var(--tape-ink); }
.gch.is-sel b { color: var(--tape-ink); }
.gch.is-sel::before { inset: 0 -.2em 0 -.1em; transform: rotate(-.6deg) skewX(-6deg); }
.gch:focus { outline: none; }

/* ---------- About ---------- */
.about { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(0, 1.6fr); gap: 3vw; min-height: 0; }
.pcard { align-self: start; position: relative; padding: 1.4rem 1.4rem 1.5rem; background: linear-gradient(160deg, color-mix(in srgb, var(--sig) 14%, transparent), transparent 50%), color-mix(in srgb, var(--void) 60%, #000); border: 1px solid var(--line); clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 26px 100%, 0 calc(100% - 26px)); }
.pc-top { display: flex; justify-content: space-between; font-size: .72rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }
.pc-top .lv { color: var(--sig); }
.pc-avatar { position: relative; margin: 1rem 0; aspect-ratio: 5 / 3; display: grid; place-items: center; background: repeating-linear-gradient(0deg, color-mix(in srgb, var(--sig) 10%, transparent) 0 1px, transparent 1px 6px), #070a08; border: 1px solid var(--line); overflow: hidden; }
.pc-avatar svg { width: 48%; height: auto; aspect-ratio: 1; color: var(--sig); filter: drop-shadow(0 0 12px color-mix(in srgb, var(--sig) 50%, transparent)); animation: spin 18s linear infinite; }
.pc-name { margin: 0; font-family: var(--display); font-style: italic; font-weight: 900; font-variation-settings: "wdth" 130; font-size: clamp(1.7rem, 2.6vw, 2.4rem); line-height: .95; text-transform: uppercase; text-shadow: -.03em .03em 0 var(--punk); }
.pc-sub { margin: .4rem 0 1rem; color: var(--dim); font-weight: 600; }
.pc-classes { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: 1.2rem; }
.pc-classes span { padding: .25em .6em; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; border: 1px solid var(--sig); color: var(--sig); }
.pc-contact { display: grid; gap: .3rem; margin: 0 0 1.2rem; font-size: .95rem; }
.pc-contact a { color: var(--ink); text-decoration: none; }
.pc-contact a:hover { color: var(--sig); }
.pc-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.pc-actions .tvb.primary { background: var(--sig); color: var(--void); border-color: var(--sig); }
.pfile { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; gap: 1.2rem; }
.tabs { display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; align-items: center; padding-left: 1em; }
.tab {
  background: none; border: 0; cursor: pointer; padding: .1em .45em .12em .1em;
  font-family: var(--display); font-style: italic; font-weight: 900; font-variation-settings: "wdth" 120;
  font-size: clamp(1rem, 1.6vw, 1.4rem); text-transform: uppercase; color: var(--dim);
}
.tab:hover { color: var(--ink); }
.tab.is-sel { color: var(--tape-ink); }
.tab:focus { outline: none; }
.tab:focus-visible { outline: 2px dashed var(--punk); }
.tabs .k { margin: 0 .2rem; }
.tabbody { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: .5rem 1rem 2rem 1em; outline: none; scrollbar-width: thin; scrollbar-color: var(--sig) transparent; line-height: 1.55; }
.tabbody.swap > * { animation: fadein .25s ease-out; }
.tabbody h4 { margin: 1.6rem 0 .5rem; font-family: var(--display); font-style: italic; font-weight: 800; font-variation-settings: "wdth" 115; font-size: 1.05rem; text-transform: uppercase; color: var(--sig); }
.tabbody h4:first-child { margin-top: 0; }
.tabbody p { margin: 0 0 1rem; max-width: 62ch; }
.tabbody .big { font-size: clamp(1.1rem, 1.6vw, 1.35rem); line-height: 1.45; color: var(--ink); }
.job { padding: 1rem 0 1.1rem; border-top: 1px solid var(--line); }
.job:first-child { border-top: 0; padding-top: 0; }
.job h5 { margin: 0; font-size: 1.1rem; font-weight: 700; }
.job .org { color: var(--sig); }
.job .meta { margin: .2rem 0 .5rem; font-size: .82rem; color: var(--dim); }
.job ul, .tabbody ul.plain { margin: 0; padding-left: 1.1rem; max-width: 64ch; }
.job li { margin: .25rem 0; }
.job li::marker, .tabbody ul.plain li::marker { color: var(--punk); content: "▸ "; }
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chips span { padding: .35em .75em; background: color-mix(in srgb, var(--sig) 9%, transparent); border-left: 2px solid var(--sig); font-weight: 600; font-size: .9rem; }
.nowlist { display: grid; gap: .6rem; }
.nowlist div { display: flex; gap: .8rem; align-items: baseline; }
.nowlist b { font-weight: 700; }
.nowlist span { color: var(--dim); font-size: .9rem; }
.nowlist i { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--sig); box-shadow: 0 0 8px var(--sig); translate: 0 -2px; }

/* ---------- Overlays ---------- */
.overlay { position: fixed; inset: 0; z-index: 30; background: color-mix(in srgb, var(--void) 94%, transparent); backdrop-filter: blur(6px); }
.overlay[hidden] { display: none; }
.overlay.is-in { animation: chIn .22s ease-out; }
.viewer { z-index: 34; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 12px; padding: max(14px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); }
.vw-head { display: flex; align-items: center; gap: 1rem; }
.vw-count { font-size: .8rem; font-weight: 700; letter-spacing: .2em; color: var(--sig); }
.vw-title { flex: 1; font-family: var(--display); font-style: italic; font-weight: 900; font-variation-settings: "wdth" 120; font-size: clamp(1.1rem, 2vw, 1.7rem); text-transform: uppercase; }
.vw-x { background: none; border: 1.5px solid var(--line); padding: .45em .9em; cursor: pointer; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: .78rem; }
.vw-x:hover { border-color: var(--punk); color: var(--punk); }
.vw-stage { position: relative; min-height: 0; }
.vw-stage video, .vw-stage img { position: absolute; inset: 0; margin: auto; max-width: 100%; max-height: 100%; background: #000; box-shadow: 0 0 0 1px var(--line), 0 20px 50px rgb(0 0 0 / .6); }
.vw-foot { display: flex; align-items: center; justify-content: center; gap: .8rem; flex-wrap: wrap; }
.vw-meta { color: var(--dim); font-size: .85rem; min-width: 8em; text-align: center; }
.vw-foot a[hidden] { display: none; }

/* ---------- Room nav (desktop HUD) + tab bar (phones) ---------- */
.hud-nav { display: flex; gap: .2rem; }
.hud-nav a { padding: .35em .7em; color: var(--dim); text-decoration: none; border: 1px solid transparent; }
.hud-nav a:hover { color: var(--ink); border-color: var(--line); }
.hud-nav a[aria-current="page"] { color: var(--void); background: var(--sig); }
.tabbar { display: none; }

/* ---------- Magazine: newsstand kiosk ---------- */
.kiosk { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0; width: min(100%, 1180px); justify-self: center;
  border: 3px solid #2a2d31; border-top: 0; background: linear-gradient(#141619, #0c0d0f); box-shadow: 0 20px 50px rgb(0 0 0 / .5); }
[data-theme="light"] .kiosk { background: linear-gradient(#d8d2c0, #cfc8b3); border-color: #b9b19a; }
.awning { position: relative; height: 74px; display: grid; place-items: center;
  background: repeating-linear-gradient(90deg, var(--punk) 0 46px, #f2eee2 46px 92px);
  --sc: radial-gradient(23px at 23px calc(100% - 23px), #000 98%, #0000) 0 0 / 46px 100% repeat-x, linear-gradient(#000, #000) top / 100% calc(100% - 23px) no-repeat;
  -webkit-mask: var(--sc); mask: var(--sc); }
.awning::before { content: ""; position: absolute; inset: 0 0 auto; height: 10px; background: rgb(0 0 0 / .25); }
.sign { position: relative; top: -8px; padding: .3em 1em; background: #0c0d0f; border: 2px solid var(--sig); color: var(--sig);
  font-family: var(--display); font-style: italic; font-weight: 900; font-variation-settings: "wdth" 130; font-size: clamp(.9rem, 1.8vw, 1.3rem); text-transform: uppercase; letter-spacing: .04em;
  box-shadow: 0 0 18px color-mix(in srgb, var(--sig) 45%, transparent); }
.rack { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(130px, 16vw, 200px), 1fr)); align-content: start; gap: 34px 26px; padding: 26px 28px 30px; overflow-y: auto; overscroll-behavior: contain; min-height: 0; scrollbar-width: thin; scrollbar-color: var(--sig) transparent; }
.slot { position: relative; padding-bottom: 14px; }
.slot::after { content: ""; position: absolute; left: -13px; right: -13px; bottom: 0; height: 14px; border-radius: 2px;
  background: linear-gradient(#5b6168, #2b2f34); box-shadow: 0 6px 10px rgb(0 0 0 / .5), inset 0 1px 0 rgb(255 255 255 / .25); }
.slot::before { content: ""; position: absolute; left: 6%; right: 6%; bottom: 10px; height: 38%; z-index: 1; pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 18px, rgb(160 168 176 / .75) 18px 20px); border-top: 2px solid rgb(160 168 176 / .75); }
.mag { position: relative; display: block; width: 100%; aspect-ratio: 3 / 4; padding: 0; border: 0; cursor: pointer; background: #111; transform-origin: bottom center;
  box-shadow: 0 10px 18px rgb(0 0 0 / .6); transition: transform .2s var(--snap), filter .2s; filter: brightness(.82); }
.mag img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mag:hover, .mag.is-sel { filter: none; transform: translateY(-10px) rotate(-2deg); }
.mag .tag { position: absolute; z-index: 2; top: -10px; right: -10px; padding: .3em .6em; background: var(--sig); color: #000; font-family: var(--display); font-weight: 900; font-size: .72rem; text-transform: uppercase; rotate: 8deg; }
.mag.soon { background: repeating-linear-gradient(45deg, #1a1c1f 0 14px, #222529 14px 28px); filter: none; }
.mag.soon::before { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgb(255 255 255 / .16) 42%, transparent 50%, transparent 65%, rgb(255 255 255 / .1) 72%, transparent 78%); }
.mag .soon-in { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: .4rem; padding: 10%; color: #9aa0a6; }
.mag .soon-in b { font-family: var(--display); font-style: italic; font-weight: 900; font-variation-settings: "wdth" 130; font-size: clamp(1rem, 1.8vw, 1.5rem); color: #c9ced3; text-transform: uppercase; }
.mag .soon-in span { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; }
.mag .seal { position: absolute; left: 50%; top: 58%; translate: -50% 0; rotate: -8deg; padding: .25em .7em; background: var(--punk); color: #000; font-family: var(--display); font-weight: 800; font-size: .72rem; text-transform: uppercase; }
.counter { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem 2rem; padding: 16px 28px 18px; border-top: 6px solid #2a2d31; background: linear-gradient(#1f2226, #16181b); }
[data-theme="light"] .counter { background: #bfb7a0; border-color: #a79f88; }
.counter .ci-top { display: flex; gap: .8rem; align-items: baseline; flex-wrap: wrap; }
.counter .ci-issue { font-size: .78rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }
.counter .ci-title { font-family: var(--display); font-style: italic; font-weight: 900; font-variation-settings: "wdth" 125; font-size: clamp(1.3rem, 2.4vw, 2rem); color: var(--sig); text-transform: uppercase; line-height: 1; }
.counter p { margin: .35rem 0 0; color: var(--dim); max-width: 60ch; line-height: 1.4; }
.counter .ci-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.tvb.primary { background: var(--sig); color: var(--void); border-color: var(--sig); }
.tvb[disabled] { opacity: .45; cursor: not-allowed; }

/* ---------- Flipbook reader ---------- */
.reader { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 10px;
  padding: max(12px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); }
.rd-bar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.rd-title { flex: 1; min-width: 0; font-family: var(--display); font-style: italic; font-weight: 900; font-variation-settings: "wdth" 120; font-size: clamp(1rem, 2vw, 1.5rem); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-page { font-size: .8rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--sig); font-variant-numeric: tabular-nums; }
.book { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 0; touch-action: pan-y pinch-zoom; }
.spread { position: relative; height: 100%; display: flex; justify-content: center; align-items: center; perspective: 2200px; min-width: 0; }
.page { position: relative; height: var(--ph, 80vh); aspect-ratio: 3 / 4; background: #ece6d2; cursor: pointer; flex: none; box-shadow: 0 18px 40px rgb(0 0 0 / .55); }
.page img { width: 100%; height: 100%; display: block; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.page.blank { visibility: hidden; }
.spread.dual .page.l::after, .spread.dual .page.r::after { content: ""; position: absolute; top: 0; bottom: 0; width: 12%; pointer-events: none; }
.spread.dual .page.l::after { right: 0; background: linear-gradient(90deg, transparent, rgb(0 0 0 / .28)); }
.spread.dual .page.r::after { left: 0; background: linear-gradient(90deg, rgb(0 0 0 / .32), transparent); }
.turner { position: absolute; z-index: 3; transition: transform .32s cubic-bezier(.45, 0, .55, 1), filter .32s; box-shadow: 0 10px 30px rgb(0 0 0 / .5); pointer-events: none; }
.turner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.turner.next { transform-origin: left center; }
.turner.prev { transform-origin: right center; }
.turner.next.go { transform: rotateY(-92deg); filter: brightness(.5); }
.turner.prev.go { transform: rotateY(92deg); filter: brightness(.5); }
.turn { width: clamp(40px, 4vw, 56px); height: clamp(64px, 12vh, 110px); display: grid; place-items: center; border: 1.5px solid var(--line); background: color-mix(in srgb, var(--void) 70%, transparent); cursor: pointer; font-size: 1.1rem; color: var(--sig);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)); }
.turn:hover { background: var(--sig); color: var(--void); }
.turn[disabled] { opacity: .25; cursor: default; background: none; color: var(--dim); }
.rd-thumbs { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 6px; justify-content: safe center; scrollbar-width: thin; scrollbar-color: var(--sig) transparent; }
.rd-thumbs button { flex: none; width: 46px; aspect-ratio: 3 / 4; padding: 0; border: 2px solid transparent; background: #222; cursor: pointer; opacity: .6; }
.rd-thumbs button img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rd-thumbs button:hover { opacity: 1; }
.rd-thumbs button.on { border-color: var(--sig); opacity: 1; }

.toast { position: fixed; z-index: 60; left: 50%; top: 14%; translate: -50% 0; padding: .8rem 1.4rem; background: var(--sig); color: var(--void);
  font-family: var(--display); font-style: italic; font-weight: 900; font-variation-settings: "wdth" 130; font-size: clamp(1rem, 2.4vw, 1.5rem); text-transform: uppercase;
  box-shadow: -6px 6px 0 var(--punk); animation: toast 2.6s ease-out forwards; pointer-events: none; }
.toast[hidden] { display: none; }
@keyframes toast { 0% { opacity: 0; transform: scale(1.4); } 10% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- Touch devices: bigger targets, tab bar, d-pad ---------- */
@media (hover: none) {
  .hints { display: none; }
  .gch { padding: .6em .5em .6em .2em; }
  .tab { padding: .3em .5em; }
  .cl { padding: .3em .5em .3em .1em; }
  .tr { padding: .3em .5em .3em .1em; }
}

/* ---------- Locked menu slot ---------- */
.mi.locked .lab { letter-spacing: .08em; }
.mi.locked:not(.is-sel) { -webkit-text-stroke-color: color-mix(in srgb, var(--ink) 30%, var(--void)); }
.mi.shake { animation: shake .32s steps(6); }
@keyframes shake { 20% { translate: -6px 0; } 40% { translate: 6px 0; } 60% { translate: -4px 0; } 80% { translate: 3px 0; } }

/* ---------- Hire ---------- */
.hire { display: grid; grid-template-columns: minmax(0, 2fr) minmax(250px, .85fr); gap: 2.4vw; min-height: 0; }
.perks { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); align-content: start; gap: 14px; overflow-y: auto; overscroll-behavior: contain; padding: 6px 8px 12px 6px; min-height: 0; scrollbar-width: thin; scrollbar-color: var(--sig) transparent; }
.perk { position: relative; display: grid; align-content: start; gap: .45rem; padding: 1rem 1.1rem 1.1rem; text-align: left; cursor: pointer; color: var(--ink);
  background: linear-gradient(150deg, color-mix(in srgb, var(--sig) 7%, transparent), transparent 60%), color-mix(in srgb, var(--void) 70%, #000);
  border: 1.5px solid var(--line); clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%); transition: background .15s, border-color .15s; }
[data-theme="light"] .perk { background: #f1eee3; }
.perk:hover { border-color: var(--sig); }
.perk .pk-top { display: flex; align-items: center; justify-content: space-between; }
.perk .pk-icon { width: 2.4rem; height: 2.4rem; display: grid; place-items: center; font-size: 1.1rem; color: var(--sig); border: 1.5px solid var(--sig); }
.perk .pk-state { font-size: .68rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--dim); }
.perk .pk-name { font-family: var(--display); font-style: italic; font-weight: 900; font-variation-settings: "wdth" 125; font-size: 1.5rem; text-transform: uppercase; line-height: 1; margin-top: .3rem; }
.perk .pk-line { color: var(--dim); font-size: .92rem; line-height: 1.4; }
.perk ul { margin: .2rem 0 0; padding-left: 1rem; font-size: .86rem; line-height: 1.5; }
.perk li::marker { content: "\25B8  "; color: var(--punk); }
.perk[aria-pressed="true"] { background: var(--sig); border-color: var(--sig); color: var(--void); }
.perk[aria-pressed="true"] .pk-icon { background: var(--void); color: var(--sig); border-color: var(--void); }
.perk[aria-pressed="true"] .pk-line, .perk[aria-pressed="true"] .pk-state { color: color-mix(in srgb, var(--void) 75%, transparent); }
.perk[aria-pressed="true"] li::marker { color: var(--void); }
.loadout { align-self: start; padding: 1.2rem 1.3rem 1.4rem; border-left: 3px solid var(--sig); background: linear-gradient(160deg, color-mix(in srgb, var(--sig) 10%, transparent), transparent 55%); }
.lo-head { margin: 0 0 .8rem; font-size: .78rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--sig); }
.lo-list { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .4rem; min-height: 2.2rem; }
.lo-list li { display: flex; align-items: center; gap: .6rem; font-family: var(--display); font-style: italic; font-weight: 900; font-variation-settings: "wdth" 115; font-size: 1.15rem; text-transform: uppercase; animation: fadein .2s; }
.lo-list li i { font-style: normal; color: var(--sig); width: 1.3rem; text-align: center; }
.lo-list li.empty { font-family: var(--ui); font-style: normal; font-weight: 500; font-size: .95rem; text-transform: none; color: var(--dim); }
.lo-note { margin: 0 0 1.1rem; color: var(--dim); line-height: 1.45; font-size: .92rem; }
.lo-go { width: 100%; justify-content: center; padding: .9em 1em; font-size: .9rem; }
.socials { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.1rem; }
.socials:empty { display: none; }
.socials a { padding: .4em .8em; border: 1.5px solid var(--line); color: var(--ink); text-decoration: none; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.socials a:hover { border-color: var(--sig); color: var(--sig); }

/* ---------- Inquiry ---------- */
.inquiry { z-index: 35; display: grid; place-items: center; overflow-y: auto; padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
.iq-panel { width: min(100%, 620px); padding: 1.6rem 1.7rem 1.8rem; border: 1px solid var(--line); border-left: 3px solid var(--sig);
  background: linear-gradient(150deg, color-mix(in srgb, var(--sig) 10%, transparent), transparent 45%), color-mix(in srgb, var(--void) 85%, #000);
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%); }
.iq-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.iq-title { margin: 0; font-family: var(--display); font-style: italic; font-weight: 900; font-variation-settings: "wdth" 140; font-size: clamp(1.6rem, 4vw, 2.4rem); text-transform: uppercase; line-height: .9; text-shadow: -.035em .03em 0 var(--punk); }
.iq-sub { margin: .6rem 0 1.2rem; color: var(--dim); line-height: 1.45; }
.fld { display: grid; gap: .35rem; margin: 0 0 1rem; padding: 0; border: 0; min-width: 0; }
.fld > span, .fld legend { font-size: .74rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--sig); padding: 0; margin-bottom: .35rem; }
.fld input, .fld textarea { width: 100%; padding: .75rem .85rem; font: inherit; font-size: 1rem; color: var(--ink); background: color-mix(in srgb, var(--void) 60%, #000);
  border: 1.5px solid var(--line); border-radius: 0; outline: none; resize: vertical; }
[data-theme="light"] .fld input, [data-theme="light"] .fld textarea { background: #f4f1e6; }
.fld input:focus, .fld textarea:focus { border-color: var(--sig); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sig) 25%, transparent); }
.fld input[aria-invalid="true"], .fld textarea[aria-invalid="true"] { border-color: var(--punk); }
.pick { display: flex; flex-wrap: wrap; gap: .45rem; }
.pick button { padding: .5em .9em; background: none; border: 1.5px solid var(--line); cursor: pointer; font-weight: 700; font-size: .85rem; color: var(--dim); }
.pick button:hover { color: var(--ink); border-color: var(--sig); }
.pick button[aria-pressed="true"] { background: var(--sig); border-color: var(--sig); color: var(--void); }
.pick button:focus-visible { outline: 2px dashed var(--punk); outline-offset: 2px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.iq-err { margin: 0 0 .8rem; min-height: 1.2em; color: var(--punk); font-weight: 600; }
.iq-actions { display: flex; justify-content: flex-end; }
.iq-actions .tvb { padding: .8em 1.5em; font-size: .9rem; }
.iq-done { display: grid; justify-items: start; gap: .8rem; padding-top: 1.2rem; }
.iq-done[hidden] { display: none; }
.iq-done b { font-family: var(--display); font-style: italic; font-weight: 900; font-variation-settings: "wdth" 140; font-size: clamp(1.8rem, 5vw, 3rem); text-transform: uppercase; color: var(--sig); line-height: .9; }
.iq-done p { margin: 0; line-height: 1.5; }

/* ---------- SplxceAmp (sound test skin) ---------- */
.amp { max-width: 560px; padding: 14px 18px 18px; border-radius: 30px 30px 40px 40px; background: var(--chrome); color: #1b2430;
  box-shadow: inset 0 2px 0 #fff, inset 0 -4px 8px rgb(0 0 0 / .25), 0 18px 40px rgb(0 0 0 / .5); border: 1px solid #7d8894; }
.amp-bar { display: flex; justify-content: space-between; align-items: center; padding: 0 6px 10px; }
.amp-logo { font-family: var(--display); font-style: italic; font-weight: 900; font-variation-settings: "wdth" 130; font-size: 1.3rem; letter-spacing: -.01em; color: #2a3440; text-shadow: 0 1px 0 #fff; }
.amp-logo b { color: #0047d4; margin-left: .15em; }
.amp-led { display: flex; gap: 6px; }
.amp-led i { width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #9ba6b2); box-shadow: inset 0 -1px 2px rgb(0 0 0 / .3); }
.amp-led i:first-child { background: radial-gradient(circle at 35% 30%, #ffd1e3, var(--punk)); }
.amp-lcd { padding: 12px 16px 12px; border-radius: 14px; background: linear-gradient(180deg, #061008, #0d1c12); border: 2px solid #56606b;
  box-shadow: inset 0 3px 12px rgb(0 0 0 / .85); color: var(--lcd); font-family: "VT323", monospace; text-shadow: 0 0 8px color-mix(in srgb, var(--lcd) 65%, transparent); }
.lcd-row { display: flex; justify-content: space-between; font-size: 20px; letter-spacing: .08em; opacity: .9; }
.lcd-main { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 2px; }
.lcd-no { font-size: 22px; }
.lcd-no b { font-weight: 400; font-size: clamp(64px, 9vw, 96px); line-height: .8; margin-left: 8px; }
.lcd-time { font-size: clamp(38px, 5vw, 54px); line-height: .9; font-variant-numeric: tabular-nums; }
.lcd-marquee { margin-top: 6px; font-size: 24px; letter-spacing: .06em; white-space: nowrap; overflow: hidden; border-top: 1px dashed color-mix(in srgb, var(--lcd) 35%, transparent); padding-top: 4px; }
.amp .viz { height: clamp(70px, 13vh, 120px); margin-top: 8px; }
.amp-seek { position: relative; height: 12px; margin: 14px 4px 12px; border-radius: 999px; cursor: pointer; background: linear-gradient(180deg, #7d8894, #c9d1d9); box-shadow: inset 0 2px 3px rgb(0 0 0 / .45); overflow: hidden; }
.amp-seek-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--lcd) 70%, #fff), var(--lcd)); box-shadow: 0 0 10px var(--lcd); }
.amp-ctrl { display: flex; align-items: center; gap: 10px; }
.amp-btn { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; border: 1px solid #7d8894; cursor: pointer; font-size: 1rem; color: #1b2430;
  background: radial-gradient(circle at 35% 28%, #fff, #dde3e9 45%, #97a3af 100%); box-shadow: inset 0 1px 0 #fff, 0 3px 6px rgb(0 0 0 / .35); }
.amp-btn.big { width: 58px; height: 58px; font-size: 1.25rem; color: #0047d4; }
.amp-btn:hover { filter: brightness(1.08); }
.amp-btn:active { transform: translateY(1px); box-shadow: inset 0 3px 5px rgb(0 0 0 / .35); }
.amp-btn:focus-visible, .pl-btn:focus-visible, .pl-lcd:focus-visible { outline: 2px dashed var(--punk); outline-offset: 3px; }
.amp-vol { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: .72rem; font-weight: 700; letter-spacing: .16em; color: #2a3440; }
.amp-vol input { width: 110px; accent-color: #0047d4; }

/* ---------- Camcorder viewfinder ---------- */
.vf { position: absolute; z-index: 2; pointer-events: none; font-family: "VT323", monospace; color: #fff; font-size: clamp(16px, 2.4vh, 26px); letter-spacing: .05em;
  text-shadow: 0 0 3px #000, 1px 1px 0 #000; }
.vf > * { position: absolute; }
.vf .c { width: 9%; aspect-ratio: 1; border: 3px solid rgb(255 255 255 / .9); box-shadow: 0 0 2px #000; }
.vf .c.tl { top: 4%; left: 5%; border-width: 3px 0 0 3px; }
.vf .c.tr { top: 4%; right: 5%; border-width: 3px 3px 0 0; }
.vf .c.bl { bottom: 4%; left: 5%; border-width: 0 0 3px 3px; }
.vf .c.br { bottom: 4%; right: 5%; border-width: 0 3px 3px 0; }
.vf .rec { top: 7%; left: 12%; display: flex; align-items: center; gap: .35em; }
.vf .rec i { width: .55em; height: .55em; border-radius: 50%; background: #ff2a2a; box-shadow: 0 0 6px #ff2a2a; animation: blink 1s steps(1) infinite; }
.vf.paused .rec i { background: none; box-shadow: none; animation: none; width: auto; height: auto; }
.vf .bat { top: 7%; right: 12%; display: flex; align-items: center; gap: .4em; }
.vf .bat b { width: 1.4em; height: .7em; border: 2px solid #fff; position: relative; box-shadow: 0 0 2px #000; }
.vf .bat b::before { content: ""; position: absolute; inset: 1px 30% 1px 1px; background: #fff; }
.vf .bat b::after { content: ""; position: absolute; right: -5px; top: 25%; width: 3px; height: 50%; background: #fff; }
.vf .focus { top: 50%; left: 50%; width: 16%; aspect-ratio: 1.3; translate: -50% -50%; border: 2px solid rgb(255 255 255 / .55);
  -webkit-mask: linear-gradient(#000 0 0) top left / 22% 22% no-repeat, linear-gradient(#000 0 0) top right / 22% 22% no-repeat, linear-gradient(#000 0 0) bottom left / 22% 22% no-repeat, linear-gradient(#000 0 0) bottom right / 22% 22% no-repeat;
  mask: linear-gradient(#000 0 0) top left / 22% 22% no-repeat, linear-gradient(#000 0 0) top right / 22% 22% no-repeat, linear-gradient(#000 0 0) bottom left / 22% 22% no-repeat, linear-gradient(#000 0 0) bottom right / 22% 22% no-repeat; }
.vf .date { bottom: 7%; left: 12%; }
.vf .tc { bottom: 7%; right: 12%; font-variant-numeric: tabular-nums; }

/* ---------- Chrome theme ---------- */
[data-theme="chrome"] body { background: linear-gradient(165deg, #f3f6f9 0%, #cfd7e0 42%, #b3bec9 55%, #dde3ea 100%) fixed; }
[data-theme="chrome"] .fx-scan { background: repeating-linear-gradient(to bottom, rgb(0 20 60 / .05) 0 1px, transparent 1px 3px); }
[data-theme="chrome"] .fx-vig { background: radial-gradient(125% 95% at 50% 40%, transparent 55%, rgb(20 40 70 / .25)); }
[data-theme="chrome"] .fx-noise { opacity: .04; }
[data-theme="chrome"] .tapeable.is-sel::before { background: linear-gradient(180deg, #ffffff 0%, #e6ebf0 42%, #a9b5c1 52%, #d9e0e7 70%, #f6f8fa 100%);
  clip-path: none; border-radius: 999px; filter: none; border: 1px solid #7d8894; box-shadow: inset 0 1px 0 #fff, 0 4px 12px rgb(0 30 80 / .25); }
[data-theme="chrome"] .mi.is-sel, [data-theme="chrome"] .tapeable.is-sel { color: #0b1220; }
[data-theme="chrome"] .kiosk, [data-theme="chrome"] .counter { background: linear-gradient(#e9eef3, #c3ccd6); border-color: #9aa6b2; }
[data-theme="chrome"] .perk, [data-theme="chrome"] .pv-card, [data-theme="chrome"] .readout, [data-theme="chrome"] .loadout, [data-theme="chrome"] .iq-panel, [data-theme="chrome"] .pcard { background: var(--chrome); border-color: #8a96a2; }
[data-theme="chrome"] .fld input, [data-theme="chrome"] .fld textarea { background: #f4f7fa; }

/* ---------- Room transition ---------- */
body.poweron #crt { animation: on .38s ease-out; }
@keyframes on {
  0%   { transform: scale(0, .004); filter: brightness(8); }
  45%  { transform: scale(1, .004); filter: brightness(4); }
  100% { transform: none; filter: none; }
}


@media (max-width: 980px) {
  .snd > * { min-width: 0; }
  .amp { order: -1; max-width: none; width: 100%; padding: 12px 12px 14px; border-radius: 24px; }
  .amp-ctrl { flex-wrap: wrap; gap: 8px; }
  .amp-vol { width: 100%; margin-left: 0; }
  .amp-vol input { flex: 1; width: auto; }
  .lcd-no b { font-size: 56px; }
  .lcd-time { font-size: 34px; }
  .lcd-marquee { font-size: 20px; }
  .hire { grid-template-columns: 1fr; }
  .perks { overflow: visible; grid-template-columns: 1fr 1fr; }
  .loadout { order: -1; }
  .rd-title { flex-basis: 100%; }
  .rd-page { margin-right: auto; }
  .hud-nav { display: none; }
  .rack { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 30px 22px; padding: 22px 20px; }
  .counter { grid-template-columns: 1fr; }
  .rd-thumbs { justify-content: flex-start; }
  .turn { display: none; }
  .book { grid-template-columns: minmax(0, 1fr); }
  .room-note { display: none; }
  .room .sub-title { font-size: clamp(2rem, 11vw, 3.4rem); }
  .work { grid-template-columns: 1fr; }
  .roster { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; padding: .3rem 0 .6rem 1em; gap: 1.2rem; }
  .cl { white-space: nowrap; }
  .cl small { display: none; }
  .room { overflow-y: auto; grid-template-rows: auto auto; }
  .dossier { overflow: visible; }
  .tvwrap { grid-template-columns: 1fr; }
  .guide { max-height: none; overflow: visible; }
  .about { grid-template-columns: 1fr; }
  .tabbody { overflow: visible; }
  .spread { grid-template-columns: 1fr; }
  .rd-hero img { aspect-ratio: 4 / 3; }
}
/* ---------- Small screens ---------- */
@media (max-width: 820px) {
  .memcard { display: none; }
  .hud .sys { font-size: .72rem; }
  #scr-main { grid-template-columns: 1fr; align-content: center; padding: 2vh 2vw 2vh 5vw; }
  .preview { display: none; }
  .mi { font-size: min(9.4vw, 3rem); font-variation-settings: "wdth" 112; }
  .menu { gap: .2rem; }
  .menu-blurb { display: block; margin: 1.4rem 0 0 1em; max-width: 34ch; font-size: .95rem; line-height: 1.45; color: var(--dim); min-height: 2.9em; }
  .snd { grid-template-columns: 1fr; gap: 2rem; }
  .readout { order: -1; }
  .ro-num { font-size: clamp(3.5rem, 20vw, 6rem); }
  .opt { grid-template-columns: 1fr; gap: .2rem; }
  .opt .val { font-size: .6em; }
  .pad { gap: .4rem; font-size: .8rem; padding-top: .4rem; }
  .hints { display: none; }
  .tabbar { display: flex; flex: 1; justify-content: space-between; order: -1; }
  .tabbar a { flex: 1; min-width: 0; display: grid; justify-items: center; gap: 2px; padding: .35rem 0 .2rem; color: var(--dim); text-decoration: none; font-size: .56rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
  .tabbar a i { font-style: normal; font-size: 1.15rem; line-height: 1; }
  .tabbar a[aria-current="page"] { color: var(--sig); }
  .player { margin-left: 0; }
  .pl-lcd, #plNext { display: none; }
  .pl-btn { width: 2.6rem; height: 2.6rem; font-size: 1rem; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .mi { font-size: clamp(1.4rem, 9vh, 2.4rem); }
  .stage { width: min(30vw, 44vh); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition: none !important; }
  .press { animation: none; }
}
@media (max-width: 440px) { .perks { grid-template-columns: 1fr; } }


/* ==========================================================
   v8: GAME-SCREEN LAYER, ARCADE, SCREENSAVER, HALLOWEEN
   ========================================================== */

/* ---------- CRT bezel: rounded tube corners + glass ---------- */
.fx-bezel { inset: 0; border-radius: 22px; box-shadow: 0 0 0 40px #000, inset 0 0 0 1px rgb(255 255 255 / .05), inset 0 0 70px rgb(0 0 0 / .35);
  background: linear-gradient(128deg, rgb(255 255 255 / .045), transparent 26%); }
[data-theme="light"] .fx-bezel, [data-theme="chrome"] .fx-bezel { box-shadow: 0 0 0 40px #0b0d10, inset 0 0 50px rgb(0 0 0 / .14); }
@media (max-width: 820px) { .fx-bezel { border-radius: 14px; } }

/* ---------- Pixel cursor (mouse only) ---------- */
@media (hover: hover) and (pointer: fine) {
  body { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='26' shape-rendering='crispEdges'%3E%3Cpath d='M2 2v19l5-4 3.5 7 3-1.5L10 15.5h6.5z' fill='%23fff' stroke='%23000' stroke-width='2' stroke-linejoin='miter'/%3E%3C/svg%3E") 2 2, auto; }
  a, button, [role="option"], .opt, .cell, .sq, .card.up, .sol-slot.stock, #scr-title, .amp-seek, .mn-canvas {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='26' shape-rendering='crispEdges'%3E%3Cpath d='M2 2v19l5-4 3.5 7 3-1.5L10 15.5h6.5z' fill='%23c8ff00' stroke='%23000' stroke-width='2' stroke-linejoin='miter'/%3E%3C/svg%3E") 2 2, pointer; }
  input, textarea { cursor: text; }
}

/* ---------- HUD score ---------- */
.hud-score { position: relative; display: inline-flex; align-items: baseline; gap: .5em; }
.hud-score i { font-style: normal; }
#hudScore > b { font-family: "VT323", monospace; font-weight: 400; font-size: 1.3rem; letter-spacing: .06em; color: var(--sig); line-height: 1; text-shadow: 0 0 8px color-mix(in srgb, var(--sig) 45%, transparent); }
.xp-stack { position: absolute; z-index: 50; right: 0; top: 135%; display: grid; justify-items: end; gap: 6px; pointer-events: none; }
.xp-pop { white-space: nowrap; padding: .25em .6em; background: var(--sig); color: var(--void);
  font-family: var(--display); font-style: italic; font-weight: 900; font-variation-settings: "wdth" 115; font-size: .82rem; letter-spacing: .02em; text-transform: uppercase;
  box-shadow: -4px 4px 0 var(--punk); animation: xpPop 1.5s ease-out forwards; pointer-events: none; }
.xp-pop b { font-weight: 900; }
@keyframes xpPop { 0% { opacity: 0; transform: translateY(8px) scale(.8); } 12% { opacity: 1; transform: none; } 75% { opacity: 1; } 100% { opacity: 0; transform: translateY(-14px); } }

/* ---------- Title extras ---------- */
.tscores { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 2.4rem; margin: 1.6rem 0 0; font-family: "VT323", monospace; font-size: clamp(1.2rem, 2vw, 1.55rem); letter-spacing: .08em; color: var(--dim); text-transform: uppercase; }
.tscores b { font-weight: 400; color: var(--ink); }
#tHiScore { color: var(--sig); }
.tscores [hidden] { display: none; }
.credit { position: absolute; right: 3vw; bottom: 1.6vh; margin: 0; font-family: "VT323", monospace; font-size: 1.25rem; letter-spacing: .1em; color: var(--dim); text-transform: uppercase; }
.sticker.haunted { display: none; position: static; margin-top: 1.1rem; rotate: -4deg; }

/* ---------- RPG dialog box on the menu preview ---------- */
.pv-card { border: 2px solid color-mix(in srgb, var(--sig) 55%, transparent); border-left-width: 3px; }
.pv-blurb .ghost, .menu-blurb .ghost { visibility: hidden; }
.more { display: inline-block; margin-left: .45em; font-style: normal; font-size: .62em; color: var(--sig); vertical-align: middle; animation: blink .8s steps(1) infinite; }

/* ---------- Stage title card ---------- */
.stage-card { position: fixed; z-index: 45; left: 0; right: 0; top: 24%; display: grid; justify-items: center; gap: .3rem; pointer-events: none; }
.stage-card[hidden] { display: none; }
.stage-card i { font-style: normal; padding: .25em .9em; background: var(--tape); color: var(--tape-ink); font-weight: 700; font-size: .85rem; letter-spacing: .3em; text-transform: uppercase; rotate: -2deg; }
.stage-card b { font-family: var(--display); font-style: italic; font-weight: 900; font-variation-settings: "wdth" 150; font-size: clamp(2.6rem, 9vw, 6.5rem); line-height: .9; text-transform: uppercase;
  color: var(--ink); text-shadow: -.04em .035em 0 var(--punk), 0 0 30px rgb(0 0 0 / .6); }
.stage-card.go { animation: stageIn 1.5s cubic-bezier(.2, .9, .25, 1) forwards; }
@keyframes stageIn { 0% { transform: translateX(-110%) skewX(-12deg); opacity: 0; } 18% { transform: translateX(2%) skewX(-4deg); opacity: 1; } 26%, 74% { transform: none; opacity: 1; } 100% { transform: translateX(110%) skewX(-12deg); opacity: 0; } }

/* ---------- Gamepad glyphs ---------- */
.k.pad-x, .k.pad-y, .k.pad-s { min-width: 1.8em; padding: 0; border: 0; border-radius: 50%; font-family: var(--display); font-weight: 900; color: #000; }
.k.pad-x { background: #3d8bff; }
.k.pad-y { background: #ffd400; }
.k.pad-s { background: var(--ink); color: var(--void); border-radius: 6px; }

/* ---------- Arcade room ---------- */
.arcade { display: grid; grid-template-columns: minmax(200px, .62fr) minmax(0, 1.6fr); gap: 3vw; min-height: 0; align-items: start; }
.carts { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; padding-left: 1em; padding-top: .4rem; }
.cab { width: min(100%, 680px); justify-self: center; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0; max-height: 100%;
  background: linear-gradient(180deg, #202329, #121417); border: 3px solid #2c3036; border-radius: 18px 18px 8px 8px; box-shadow: 0 20px 50px rgb(0 0 0 / .5), inset 0 1px 0 rgb(255 255 255 / .1); }
[data-theme="chrome"] .cab { background: var(--chrome); border-color: #8a96a2; }
.cab.swap .cab-marquee span { animation: glitch .2s steps(1); }
.cab-marquee { position: relative; display: grid; place-items: center; height: 74px; margin: 10px 10px 0; border-radius: 10px 10px 4px 4px; overflow: hidden;
  background: radial-gradient(120% 140% at 50% 0%, color-mix(in srgb, var(--sig) 30%, #000), #050605 70%); border: 2px solid #000; box-shadow: inset 0 0 22px color-mix(in srgb, var(--sig) 35%, transparent); }
.cab-marquee::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgb(255 255 255 / .05) 0 2px, transparent 2px 6px); pointer-events: none; }
.cab-marquee span { font-family: var(--display); font-style: italic; font-weight: 900; font-variation-settings: "wdth" 150; font-size: clamp(1.6rem, 3.6vw, 2.8rem); line-height: 1; text-transform: uppercase;
  color: #fff; text-shadow: 0 0 6px var(--sig), 0 0 18px var(--sig), -.04em .035em 0 var(--punk); }
.cab-screen { position: relative; margin: 10px; min-height: 0; overflow: hidden; border-radius: 16px / 22px; background: #030504; border: 2px solid #000;
  box-shadow: inset 0 0 50px rgb(0 0 0 / .9), 0 0 0 6px #0b0c0e; }
.cab-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(to bottom, rgb(0 0 0 / .3) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 60%, rgb(0 0 0 / .5)); }
.cab-attract { height: 100%; overflow-y: auto; padding: 16px 22px 18px; color: #e9e4d4; scrollbar-width: none; }
.att-title { text-align: center; font-family: "VT323", monospace; font-size: 1.7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--punk); margin-bottom: .4rem; text-shadow: 0 0 10px currentColor; }
[data-theme="light"] .att-title { color: #ff5a3c; }
.att-note { margin: .8rem 0 0; text-align: center; font-family: "VT323", monospace; font-size: 1.2rem; letter-spacing: .06em; color: #9aa59d; }
.how { margin: .6rem auto 0; padding: 0; list-style: none; max-width: 36ch; display: grid; gap: .8rem; font-size: 1rem; line-height: 1.45; }
.how li { padding-left: 1.4em; position: relative; }
.how li::before { content: "\25B6"; position: absolute; left: 0; top: .1em; font-size: .75em; color: #c8ff00; }
[data-theme]:not([data-theme="acid"]) .how li::before { color: var(--sig); }
[data-theme="light"] .how li::before { color: #7dff2a; }
.rec { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 1rem; text-align: center; }
.rec div { display: grid; padding: .9rem .4rem; border: 1px solid rgb(255 255 255 / .12); }
.rec b { font-family: "VT323", monospace; font-weight: 400; font-size: 3rem; line-height: .9; color: #fff; }
.rec span { font-size: .72rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #9aa59d; }
.cab-panel { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; padding: 10px 14px 14px; border-top: 2px solid #000;
  background: linear-gradient(180deg, #2a2e34, #181a1e); border-radius: 0 0 6px 6px; }
[data-theme="chrome"] .cab-panel { background: linear-gradient(180deg, #e6ebf0, #bcc6d0); }
.cab-dots { display: flex; gap: 4px; }
.cab-dots button { padding: .45em .8em; border: 1.5px solid rgb(255 255 255 / .2); background: rgb(0 0 0 / .35); color: #c9ced3; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.cab-dots button.on { background: #e9e4d4; color: #000; border-color: #e9e4d4; }
.cab-level { display: inline-flex; align-items: center; gap: .4rem; color: #e9e4d4; font-family: "VT323", monospace; font-size: 1.35rem; letter-spacing: .1em; text-transform: uppercase; }
.cab-level[hidden] { display: none; }
.cab-level span { min-width: 4.8em; text-align: center; color: var(--sig); }
[data-theme="light"] .cab-level span { color: #7dff2a; }
.cab-level .arr { background: none; border: 0; color: inherit; cursor: pointer; padding: .2em .4em; font-size: .9rem; }
[data-theme="chrome"] .cab-level, [data-theme="chrome"] .cab-dots button { color: #1b2430; }
.cab-play { margin-left: auto; padding: .8em 2em; font-size: .95rem; }

/* High-score table (cabinet + results) */
.hs { font-family: "VT323", monospace; font-size: clamp(1.15rem, 1.8vw, 1.45rem); letter-spacing: .08em; text-transform: uppercase; }
.hs-head, .hs-row { display: grid; grid-template-columns: 3.4em 1fr auto; gap: 1rem; padding: .02em .4em; }
.hs-head { color: #9aa59d; border-bottom: 1px dashed rgb(255 255 255 / .2); margin-bottom: .2rem; }
.hs-row span:last-child, .hs-head span:last-child { text-align: right; }
.hs-row.r0 { color: #c8ff00; } .hs-row.r1 { color: #ff2d7a; } .hs-row.r2 { color: #e9e4d4; } .hs-row.r3 { color: #00e5ff; } .hs-row.r4 { color: #ffd400; }
.hs-row.you { background: rgb(255 255 255 / .12); box-shadow: inset 3px 0 0 currentColor; animation: youBlink .8s steps(1) infinite; }
@keyframes youBlink { 50% { color: #fff; background: rgb(255 255 255 / .22); } }
.hs.loading .hs-row { opacity: .35; }
.hs-src { margin: .5rem 0 0; text-align: center; font-size: .9rem; color: #7d867f; letter-spacing: .14em; }

/* ---------- Game player ---------- */
.game { z-index: 33; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 10px; background: var(--void);
  padding: max(12px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); }
[data-theme="chrome"] .game { background: linear-gradient(165deg, #f3f6f9 0%, #cfd7e0 42%, #b3bec9 55%, #dde3ea 100%); }
.gm-head { display: flex; align-items: center; gap: .6rem 1.4rem; flex-wrap: wrap; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: .78rem; color: var(--dim); }
.gm-title { font-family: var(--display); font-style: italic; font-weight: 900; font-variation-settings: "wdth" 150; font-size: clamp(1.2rem, 2.8vw, 1.9rem); letter-spacing: 0; color: var(--sig); text-shadow: -.04em .035em 0 var(--punk); }
.gm-stats { display: flex; gap: .4rem 1.2rem; flex-wrap: wrap; }
.gm-stat { display: inline-flex; align-items: baseline; gap: .45em; }
.gm-stat i { font-style: normal; }
.gm-stat b { font-family: "VT323", monospace; font-weight: 400; font-size: 1.5rem; line-height: 1; letter-spacing: .06em; color: var(--ink); }
.gm-np { margin-left: auto; color: var(--sig); max-width: 14em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.gm-stage { position: relative; display: grid; place-items: center; min-height: 0; min-width: 0; overflow: hidden; outline: none; }
.gm-msg { position: absolute; inset: 0; z-index: 3500; display: grid; place-content: center; text-align: center; gap: .6rem; pointer-events: none; padding: 1rem; }
.gm-msg:empty { display: none; }
.gm-msg b { font-family: var(--display); font-style: italic; font-weight: 900; font-variation-settings: "wdth" 150; font-size: clamp(2rem, 7vw, 4.2rem); line-height: .9; text-transform: uppercase; color: var(--ink); text-shadow: -.04em .035em 0 var(--punk), 0 0 24px var(--void); }
.gm-msg span { font-weight: 700; letter-spacing: .2em; text-transform: uppercase; font-size: .85rem; color: var(--sig); animation: blink 1.1s steps(1) infinite; text-shadow: 0 0 10px var(--void); }
.gm-pad { display: none; }
.gm-pad:empty { display: none !important; }

/* Results */
.gm-end { position: absolute; inset: 0; z-index: 4000; display: grid; place-items: center; overflow-y: auto; padding: 16px; background: color-mix(in srgb, var(--void) 78%, transparent); backdrop-filter: blur(3px); }
.gm-end[hidden] { display: none; }
.gm-end.is-in .ge-panel { animation: chIn .25s ease-out; }
.ge-panel { width: min(100%, 520px); padding: 1.4rem 1.6rem 1.6rem; text-align: center; background: #070908; border: 2px solid var(--sig); box-shadow: 0 0 0 6px #000, 0 0 40px color-mix(in srgb, var(--sig) 30%, transparent); color: #e9e4d4; }
.ge-kicker { margin: 0; font-size: .78rem; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--punk); }
[data-theme="light"] .ge-kicker { color: #ff5a3c; }
.ge-big { display: block; margin: .3rem 0 .2rem; font-family: var(--display); font-style: italic; font-weight: 900; font-variation-settings: "wdth" 150; font-size: clamp(2.2rem, 7vw, 3.6rem); line-height: .9; text-transform: uppercase; color: #fff; text-shadow: -.04em .035em 0 var(--punk); }
.ge-score { margin: .2rem 0 1rem; font-family: "VT323", monospace; font-size: 1.7rem; letter-spacing: .08em; color: #c8ff00; text-transform: uppercase; }
[data-theme]:not([data-theme="acid"]) .ge-score { color: var(--sig); }
[data-theme="light"] .ge-score, [data-theme="chrome"] .ge-score { color: #7dff2a; }
.ge-name { position: relative; display: grid; justify-items: center; gap: .6rem; margin-bottom: 1.1rem; }
.ge-name[hidden] { display: none; }
.ge-label { font-size: .75rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: #9aa59d; }
.ge-boxes { display: flex; gap: 10px; }
.ge-boxes span { width: 64px; height: 76px; display: grid; place-items: center; border: 2px solid rgb(255 255 255 / .25); background: #000; font-family: "VT323", monospace; font-size: 4rem; line-height: 1; color: #fff; }
.ge-boxes span.cur { border-color: var(--sig); box-shadow: inset 0 -6px 0 var(--sig); }
.ge-name.typing .ge-boxes span.cur { animation: pulse 1s steps(2) infinite; }
.ge-input { position: absolute; top: 1.6rem; left: 50%; translate: -50% 0; width: 212px; height: 76px; opacity: 0; font-size: 16px; border: 0; }
.ge-err { margin: 0; min-height: 1.1em; color: #ff5a7a; font-weight: 600; font-size: .9rem; }
.ge-table { text-align: left; margin-bottom: 1rem; }
.ge-table[hidden] { display: none; }
.ge-actions { display: flex; justify-content: center; gap: .6rem; flex-wrap: wrap; }
.ge-panel .tvb { color: #e9e4d4; }
.ge-panel .tvb.primary { color: var(--void); }

/* Touch controls under the game */
@media (hover: none) {
  .gm-pad { display: flex; justify-content: center; gap: 8px; padding-bottom: 4px; }
  .gm-pad.dpad { display: grid; grid-template-columns: repeat(3, 64px); grid-template-rows: repeat(3, 54px); gap: 6px; justify-content: center; }
  .gm-pad .pb { border: 2px solid var(--line); background: color-mix(in srgb, var(--sig) 8%, transparent); color: var(--sig); font-size: 1.2rem; border-radius: 10px; touch-action: none; }
  .gm-pad .pb:active { background: var(--sig); color: var(--void); }
  .gm-pad .pb-up { grid-column: 2; grid-row: 1; } .gm-pad .pb-left { grid-column: 1; grid-row: 2; } .gm-pad .pb-right { grid-column: 3; grid-row: 2; } .gm-pad .pb-down { grid-column: 2; grid-row: 3; }
  .gm-pad .pb-a { grid-column: 2; grid-row: 2; border-radius: 50%; background: var(--punk); color: #000; border-color: var(--punk); font-family: var(--display); font-weight: 900; }
  .gm-np { display: none; }
}
.pb-mode { padding: .7em 1.6em; border: 2px solid var(--line); background: none; color: var(--dim); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: .85rem; cursor: pointer; }
.pb-mode.on { background: var(--sig); border-color: var(--sig); color: var(--void); }
.mn-pad, .sol-pad { display: flex; justify-content: center; gap: 8px; }

/* ---------- Snake / Mines / Bricks canvases ---------- */
.sn-canvas, .mn-canvas, .bb-canvas { display: block; border: 2px solid var(--line); background: color-mix(in srgb, var(--void) 85%, #000);
  box-shadow: 0 0 30px color-mix(in srgb, var(--sig) 18%, transparent), inset 0 0 0 1px #000; }
.mn-canvas, .bb-canvas, .sn-canvas { touch-action: none; }

/* ---------- 2048 ---------- */
.t48 { --b: 400px; --g: calc(var(--b) * .03); --cs: calc((var(--b) - var(--g) * 5) / 4); width: var(--b); height: var(--b); touch-action: none; }
.t48-board { position: relative; width: 100%; height: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--g); padding: var(--g);
  background: color-mix(in srgb, var(--sig) 10%, #000); border: 2px solid var(--line); box-shadow: 0 0 30px color-mix(in srgb, var(--sig) 18%, transparent); }
.t48-cell { background: color-mix(in srgb, var(--ink) 3%, transparent); }
.t48-tiles { position: absolute; inset: 0; }
.t48-tile { position: absolute; left: var(--g); top: var(--g); width: var(--cs); height: var(--cs); display: grid; place-items: center;
  transform: translate(calc(var(--c) * (var(--cs) + var(--g))), calc(var(--r) * (var(--cs) + var(--g)))); transition: transform .09s ease-out; }
.t48-tile span { width: 100%; height: 100%; display: grid; place-items: center; font-family: var(--display); font-style: italic; font-weight: 900; font-variation-settings: "wdth" 115;
  font-size: calc(var(--cs) * .36); line-height: 1; background: var(--tb, #333); color: var(--tc, var(--ink)); box-shadow: inset 0 -4px 0 rgb(0 0 0 / .25); }
.t48-tile.big span { font-size: calc(var(--cs) * .28); }
.t48-tile[data-l="1"] { --tb: color-mix(in srgb, var(--sig) 30%, #2a2a2a); }
.t48-tile[data-l="2"] { --tb: color-mix(in srgb, var(--sig) 42%, #2a2a2a); }
.t48-tile[data-l="3"] { --tb: color-mix(in srgb, var(--sig) 58%, #1a1a1a); }
.t48-tile[data-l="4"] { --tb: color-mix(in srgb, var(--sig) 70%, #1a1a1a); --tc: #000; }
.t48-tile[data-l="5"] { --tb: var(--sig); --tc: #000; }
.t48-tile[data-l="6"] { --tb: color-mix(in srgb, var(--sig) 60%, var(--punk)); --tc: #000; }
.t48-tile[data-l="7"] { --tb: color-mix(in srgb, var(--sig) 35%, var(--punk)); --tc: #000; }
.t48-tile[data-l="8"] { --tb: var(--punk); --tc: #000; }
.t48-tile[data-l="9"] { --tb: color-mix(in srgb, var(--punk) 70%, #fff); --tc: #000; }
.t48-tile[data-l="10"] { --tb: #f4efe0; --tc: #000; }
.t48-tile[data-l="11"] span { background: #fff; color: #000; box-shadow: 0 0 24px var(--sig), 0 0 50px var(--punk); }
.t48-tile.new span { animation: tNew .16s ease-out; }
.t48-tile.pop span { animation: tPop .14s ease-out; }
.t48-tile.gone { z-index: 0; opacity: .9; }
@keyframes tNew { from { transform: scale(.2); opacity: 0; } }
@keyframes tPop { 50% { transform: scale(1.14); } }

/* ---------- Solitaire ---------- */
.sol { position: absolute; inset: 0; z-index: 0; touch-action: none; user-select: none; -webkit-user-select: none; }
.sol-slot { position: absolute; left: 0; top: 0; width: var(--cw); height: var(--ch); border: 2px dashed var(--line); border-radius: calc(var(--cw) * .08); display: grid; place-items: center; }
.sol-slot .slot-suit { width: 46%; fill: var(--line); }
.sol-slot.stock { border-style: solid; }
.sol-slot .recycle { display: none; font-size: calc(var(--cw) * .5); color: var(--dim); }
.sol-slot.stock.empty .recycle { display: block; }
.sol-count { position: absolute; left: 0; top: 0; z-index: 900; min-width: 1.6em; padding: 0 .3em; background: var(--punk); color: #000; font-weight: 700; font-size: .72rem; text-align: center; border-radius: 99px; pointer-events: none; }
.sol-count:empty { display: none; }
.card { position: absolute; left: 0; top: 0; width: var(--cw); height: var(--ch); border-radius: calc(var(--cw) * .08); transition: transform .18s cubic-bezier(.3, .8, .3, 1); will-change: transform; }
.sol.instant .card, .card.drag { transition: none; }
.card.drag { filter: drop-shadow(0 12px 14px rgb(0 0 0 / .5)); }
.card.held .cf { box-shadow: 0 0 0 3px var(--sig), 0 10px 18px rgb(0 0 0 / .45); }
.card.hidden-under { visibility: hidden; }
.card.shake { animation: shake .3s steps(6); }
.cf, .cb { position: absolute; inset: 0; border-radius: inherit; }
.cf { background: #f4efe0; border: 1px solid #1b1b1b; color: #141414; box-shadow: 0 1px 2px rgb(0 0 0 / .4); overflow: hidden; }
.card.red .cf { color: #e0301e; }
.cf svg { fill: currentColor; }
.ci { position: absolute; display: grid; justify-items: center; line-height: .9; font-weight: 700; font-size: calc(var(--cw) * .27); letter-spacing: -.04em; }
.ci.tl { left: 5%; top: 4%; }
.ci.br { right: 5%; bottom: 4%; rotate: 180deg; }
.ci .cis { width: calc(var(--cw) * .2); height: calc(var(--cw) * .2); margin-top: .08em; }
.cbig { position: absolute; left: 50%; top: 52%; width: 46%; translate: -50% -50%; opacity: .95; }
.cbig.sm { width: 24%; top: 74%; }
.cbig-l { position: absolute; left: 50%; top: 42%; translate: -50% -50%; font-family: var(--display); font-style: italic; font-weight: 900; font-variation-settings: "wdth" 120; font-size: calc(var(--cw) * .58); line-height: 1; }
.card:not(.up) .cf, .card.up .cb { display: none; }
.cb { border: 1px solid #000; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--sig) 26%, transparent), transparent 60%), repeating-linear-gradient(45deg, var(--void) 0 4px, color-mix(in srgb, var(--sig) 40%, var(--void)) 4px 6px);
  box-shadow: inset 0 0 0 3px #e9e4d4, inset 0 0 0 4px #000, 0 1px 2px rgb(0 0 0 / .4); }
.cb svg { width: 56%; height: 56%; color: var(--sig); }
.sol-cursor { position: absolute; left: 0; top: 0; z-index: 2000; border: 3px dashed var(--punk); border-radius: calc(var(--cw) * .1); pointer-events: none; margin: -4px; padding: 4px; box-sizing: content-box; animation: pulse 1s steps(2) infinite; }
.sol-cursor[hidden] { display: none; }
.sol-cascade { position: absolute; inset: 0; z-index: 3000; pointer-events: none; }
.sol-skip { position: absolute; z-index: 3001; right: 12px; bottom: 12px; }

/* ---------- Chess ---------- */
.ch { --bs: 480px; position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ch.wide { flex-direction: row; align-items: flex-start; }
.ch-board { width: var(--bs); height: var(--bs); display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); border: 3px solid #000; box-shadow: 0 0 0 2px var(--line), 0 18px 40px rgb(0 0 0 / .5); }
.sq { position: relative; padding: 0; border: 0; display: grid; place-items: center; outline: none; }
.sq.lt { background: #ece6d2; }
.sq.dk { background: color-mix(in srgb, var(--sig) 58%, #0d120d); }
[data-theme="light"] .sq.dk { background: #6f8f4f; }
.sq .pz { position: relative; z-index: 2; width: 88%; height: 88%; display: grid; place-items: center; pointer-events: none; }
.pc { width: 100%; height: 100%; overflow: visible; }
.pc.w path, .pc.w circle { fill: #fbf7ec; stroke: #111; stroke-width: 1.5; stroke-linejoin: round; }
.pc.b path, .pc.b circle { fill: #161616; stroke: #ece6d2; stroke-width: 1.2; stroke-linejoin: round; }
.pc .pd { fill: none !important; stroke-width: 1.6; stroke-linecap: round; }
.pc.w .pd { stroke: #111; } .pc.b .pd { stroke: #ece6d2; }
.pc.w .pd-f { fill: #111 !important; stroke: none !important; } .pc.b .pd-f { fill: #ece6d2 !important; stroke: none !important; }
.sq .co { position: absolute; z-index: 1; font-size: clamp(.55rem, calc(var(--bs) / 48), .8rem); font-weight: 700; opacity: .75; pointer-events: none; }
.sq .co.r { left: 3px; top: 2px; } .sq .co.f { right: 3px; bottom: 1px; }
.sq.lt .co { color: #3a4a32; } .sq.dk .co { color: #ece6d2; }
.sq.last { box-shadow: inset 0 0 0 999px color-mix(in srgb, var(--punk) 28%, transparent); }
.sq.sel { box-shadow: inset 0 0 0 4px var(--punk), inset 0 0 0 999px color-mix(in srgb, var(--punk) 25%, transparent); }
.sq.check { background-image: radial-gradient(circle, #ff2a2a 0 30%, transparent 70%); }
.sq.tmv::after { content: ""; position: absolute; z-index: 3; width: 28%; height: 28%; border-radius: 50%; background: rgb(0 0 0 / .32); pointer-events: none; }
.sq.tcap::after { content: ""; position: absolute; z-index: 3; inset: 4%; border-radius: 50%; border: 5px solid rgb(0 0 0 / .32); pointer-events: none; }
.sq.cur { outline: 3px dashed var(--punk); outline-offset: -4px; z-index: 4; }
.ch-side { width: var(--bs); display: grid; gap: 8px; }
.ch.wide .ch-side { width: 240px; height: var(--bs); grid-template-rows: auto auto auto minmax(0, 1fr) auto auto; }
.ch-lv { margin: 0; font-size: .75rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--sig); }
.ch-status { margin: 0; padding: .6rem .8rem; border-left: 3px solid var(--sig); background: color-mix(in srgb, var(--sig) 8%, transparent); font-weight: 600; line-height: 1.35; min-height: 2.9em; }
.ch-status.think::after { content: "..."; display: inline-block; width: 1.2em; animation: blink .8s steps(1) infinite; }
.ch-status.warn { border-color: var(--punk); color: var(--punk); }
.ch-status.win { border-color: var(--sig); color: var(--sig); }
.ch-moves { margin: 0; padding: 0 0 0 2.2em; overflow-y: auto; font-family: "VT323", monospace; font-size: 1.2rem; line-height: 1.25; color: var(--dim); max-height: 6.5em; scrollbar-width: thin; scrollbar-color: var(--sig) transparent; }
.ch.wide .ch-moves { max-height: none; }
.ch-moves li { display: grid; grid-template-columns: 1fr 1fr; }
.ch-moves li span:first-child { color: var(--ink); }
.ch-cap { display: flex; flex-wrap: wrap; gap: 0; min-height: 22px; }
.ch-cap svg { width: 22px; height: 22px; }
.ch-btns { display: flex; gap: .5rem; flex-wrap: wrap; }
.ch-promo { position: absolute; z-index: 10; left: 50%; top: 50%; translate: -50% -50%; display: flex; align-items: center; gap: 8px; padding: 14px; background: #070908; border: 2px solid var(--sig); box-shadow: 0 0 0 6px #000; }
.ch-promo[hidden] { display: none; }
.ch-promo p { margin: 0 .4rem 0 0; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: .78rem; color: #e9e4d4; }
.ch-promo .tvb { width: 58px; height: 58px; padding: 6px; justify-content: center; background: #ece6d2; }
@media (max-width: 820px) { .ch-moves { display: none; } }

/* ---------- Screensaver ---------- */
.saver { position: fixed; inset: 0; z-index: 38; background: #000; overflow: hidden; cursor: none; }
.saver[hidden] { display: none; }
.saver.is-in { animation: fadein .6s ease-out; }
.saver canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.sv-logo { --sv: var(--sig); position: absolute; left: 0; top: 0; display: flex; align-items: center; font-family: var(--display); font-style: italic; font-weight: 900; font-variation-settings: "wdth" 150;
  font-size: clamp(2.2rem, 7vw, 5rem); line-height: .85; color: var(--sv); text-shadow: -.035em .03em 0 color-mix(in srgb, var(--sv) 40%, #000), 0 0 30px color-mix(in srgb, var(--sv) 40%, transparent); will-change: transform; }
.sv-logo svg { width: .9em; height: .9em; margin: 0 .02em; color: var(--sv); overflow: visible; }
.sv-foot { position: absolute; left: 0; right: 0; bottom: max(18px, env(safe-area-inset-bottom)); margin: 0; display: flex; justify-content: center; gap: 2rem; font-family: "VT323", monospace; font-size: 1.4rem; letter-spacing: .12em; text-transform: uppercase; color: #7d867f; }
.sv-any { animation: blink 1.4s steps(1) infinite; }
.saver.corner { animation: cornerHit 1.4s steps(2, end); }
@keyframes cornerHit { 0%, 100% { background: #000; } 10%, 30%, 50% { background: color-mix(in srgb, var(--sig) 30%, #000); } }

/* ---------- Halloween ---------- */
[data-season="halloween"][data-theme="acid"] { --void: #07030a; --ink: #f3e9da; --sig: #ff7b1c; --punk: #a855ff; --tape: #f3e9da; --tape-ink: #07030a; --lcd: #ff9a3c; }
.jack { display: none; }
[data-season="halloween"] .jack { display: inline; fill: #1a0700; }
[data-season="halloween"] .nucleus { fill: #ff7b1c; }
[data-season="halloween"] .atom-big .shine { display: none; }
[data-season="halloween"] .atom-mini .jack, [data-season="halloween"] .cb .jack { display: none; }
[data-season="halloween"] .sticker.haunted { display: inline-block; background: #ff7b1c; }
.spooky { display: none; }
[data-season="halloween"] .spooky { display: block; position: fixed; inset: 0; z-index: 41; pointer-events: none; }
[data-season="halloween"][data-fx="off"] .spooky .bat { display: none; }
.web { position: absolute; top: 0; width: clamp(70px, 9vw, 120px); height: auto; fill: none; stroke: var(--ink); stroke-width: 1; opacity: .28; }
.web.tl { left: 0; }
.web.tr { right: 0; transform: scaleX(-1); }
.bat { position: absolute; top: 8%; left: -60px; width: 40px; height: 22px; background: var(--punk); opacity: .75;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 22'%3E%3Cpath d='M20 4c2 0 3 2 3 3 2-3 7-6 17-5-5 2-7 6-6 12-3-3-7-3-9 0-1-2-3-3-5-3s-4 1-5 3c-2-3-6-3-9 0C7 8 5 4 0 2c10-1 15 2 17 5 0-1 1-3 3-3z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 22'%3E%3Cpath d='M20 4c2 0 3 2 3 3 2-3 7-6 17-5-5 2-7 6-6 12-3-3-7-3-9 0-1-2-3-3-5-3s-4 1-5 3c-2-3-6-3-9 0C7 8 5 4 0 2c10-1 15 2 17 5 0-1 1-3 3-3z'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: batFly 19s linear infinite, batFlap .22s steps(2) infinite; }
.bat.b2 { top: 17%; width: 28px; height: 16px; animation-duration: 26s, .18s; animation-delay: -9s, 0s; }
.bat.b3 { top: 5%; width: 22px; height: 12px; animation-duration: 33s, .2s; animation-delay: -21s, 0s; opacity: .5; }
@keyframes batFly { 0% { transform: translate(0, 0); } 25% { transform: translate(28vw, 6vh); } 50% { transform: translate(55vw, -2vh); } 75% { transform: translate(82vw, 7vh); } 100% { transform: translate(112vw, 0); } }
@keyframes batFlap { 50% { scale: 1 .45; } }
.ghosty { display: none; }
[data-season="halloween"] .ghosty { display: block; position: absolute; z-index: 2; left: -4%; top: 4%; width: 22%; height: 26%; fill: var(--ink); opacity: .85; animation: ghostFloat 6s ease-in-out infinite; filter: drop-shadow(0 0 14px color-mix(in srgb, var(--punk) 60%, transparent)); }
.ghosty .eye { fill: var(--void); }
@keyframes ghostFloat { 0%, 100% { transform: translate(0, 0) rotate(-4deg); } 50% { transform: translate(14%, -12%) rotate(5deg); } }

/* ---------- Arcade on small screens ---------- */
@media (max-width: 980px) {
  .arcade { grid-template-columns: 1fr; }
  .carts { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; padding: .3rem 0 .6rem 1em; gap: 1.2rem; scrollbar-width: none; }
  .carts .cl { white-space: nowrap; }
  .carts .cl small { display: none; }
  .cab { width: 100%; }
  .cab-screen { min-height: 300px; }
}
@media (max-width: 820px) {
  .hud-score i { display: none; }
  #hudScore > b { font-size: 1.15rem; }
  .credit { display: none; }
  .gm-head { gap: .3rem .9rem; }
  .gm-stat b { font-size: 1.25rem; }
  .cab-play { width: 100%; margin-left: 0; }
  .ge-boxes span { width: 54px; height: 64px; font-size: 3.4rem; }
  .ge-input { width: 182px; height: 64px; }
}


/* ==========================================================
   v9: VECTORHEART — the new Splxce identity
   Zen Dots display type, pill selections with chevrons,
   rounded panel bars, halftones and rings, layered wordmark
   ========================================================== */
:root {
  --display: "Zen Dots", "Chakra Petch", system-ui, sans-serif;
  --sel-ink: var(--void);
  --wm-st: #f4f1e6; --wm-sh: var(--punk); --wm-ol: #0b0d0b; --wm-fi: var(--sig);
  --dot: var(--sig);
  font-synthesis: style;
}
[data-theme="blue"] { --void: #0f3fd1; --ink: #ffffff; --sig: #ffffff; --punk: #ffd400; --tape: #ffffff; --tape-ink: #0b0d0b; --lcd: #7fe3ff;
  --sel-ink: #0f3fd1; --wm-st: #ffffff; --wm-sh: #0b0d0b; --wm-ol: #0b0d0b; --wm-fi: #e9eef7; --dot: #8fb3ff;
  --line: rgb(255 255 255 / .3); --dim: rgb(255 255 255 / .74); color-scheme: dark; }
[data-theme="blue"] body { background: linear-gradient(165deg, #2a6bff 0%, #1146d9 45%, #0a2e9c 100%) fixed; }
[data-theme="blue"] .nucleus { fill: #ffd400; }
[data-theme="chrome"] { --sel-ink: #ffffff; --wm-st: #ffffff; --wm-ol: #0b1220; --wm-fi: #0047d4; --wm-sh: #ff2d7a; --dot: #0047d4; }
[data-theme="light"] { --wm-st: #141414; --wm-ol: #141414; --wm-fi: #f4f1e6; --wm-sh: #e0301e; --dot: #141414; }

/* ---------- Background: halftone dots and rings ---------- */
#crt { z-index: 1; }
.vh { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.vh i { position: absolute; display: block; }
.vh-dots { background-image: radial-gradient(circle, var(--dot) 34%, transparent 37%); }
.vh-dots.a { right: -4vw; top: -6vh; width: 46vw; height: 54vh; background-size: 26px 26px; opacity: .2;
  -webkit-mask-image: radial-gradient(circle at 100% 0%, #000 6%, transparent 66%); mask-image: radial-gradient(circle at 100% 0%, #000 6%, transparent 66%); }
.vh-dots.b { left: -4vw; bottom: -6vh; width: 40vw; height: 46vh; background-size: 20px 20px; opacity: .16; background-image: radial-gradient(circle, var(--punk) 34%, transparent 37%);
  -webkit-mask-image: radial-gradient(circle at 0% 100%, #000 6%, transparent 66%); mask-image: radial-gradient(circle at 0% 100%, #000 6%, transparent 66%); }
.vh-rings { right: -14vh; bottom: -22vh; width: 70vh; height: 70vh; border-radius: 50%; opacity: .55;
  background: repeating-radial-gradient(circle, transparent 0 40px, var(--line) 40px 43px); }
.vh-chev { left: 0; bottom: 12vh; width: 220px; height: 60px; translate: -60px 0; opacity: .12; background: var(--sig);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 60'%3E%3Cpath d='M0 0h40l30 30-30 30H0l30-30zM70 0h40l30 30-30 30H70l30-30zM140 0h40l30 30-30 30h-40l30-30z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 60'%3E%3Cpath d='M0 0h40l30 30-30 30H0l30-30zM70 0h40l30 30-30 30H70l30-30zM140 0h40l30 30-30 30h-40l30-30z'/%3E%3C/svg%3E") center / contain no-repeat; }
[data-fx="off"] .vh-dots { opacity: .1; }

/* ---------- The wordmark ---------- */
.wordmark { display: block; width: min(92vw, 1060px); text-shadow: none; }
.wm { display: block; width: 100%; height: auto; overflow: visible; }
.wm use { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.wm-st { stroke: var(--wm-st); stroke-width: 62; } .wm-st.a { stroke-width: 50; } .wm-stf { fill: var(--wm-st); }
.wm-sh { stroke: var(--wm-sh); stroke-width: 38; } .wm-sh.a { stroke-width: 28; } .wm-shf { fill: var(--wm-sh); }
.wm-ol { stroke: var(--wm-ol); stroke-width: 38; } .wm-ol.a { stroke-width: 28; } .wm-olf { fill: var(--wm-ol); }
.wm-fi { stroke: var(--wm-fi); stroke-width: 22; } .wm-fi.a { stroke-width: 13; }
.wm-ring { fill: var(--wm-fi); fill-rule: evenodd; opacity: .9; }
.wm-spark { fill: var(--wm-st); } .wm-spark.b { fill: var(--wm-fi); }
#scr-title .wm { animation: wmIn .7s var(--snap) both; }
@keyframes wmIn { from { transform: translateX(-6%) skewX(8deg); opacity: 0; } }
.sv-logo { width: clamp(320px, 42vw, 640px); }
.sv-logo .wm-fi, .sv-logo .wm-ring { stroke: var(--sv); } .sv-logo .wm-ring, .sv-logo .wm-spark.b { fill: var(--sv); stroke: none; }

/* ---------- HUD + footer become rounded panel bars ---------- */
.hud { padding: 5px 8px 5px 5px; border: 2px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--void) 70%, transparent); backdrop-filter: blur(4px); }
.p1 { clip-path: none; border-radius: 999px; padding: .15em .9em; font-size: .85rem; font-style: italic; transform: skewX(-10deg); }
.hud-nav a { border-radius: 999px; }
.hud-nav a[aria-current="page"] { color: var(--sel-ink); }
.grow { background: repeating-linear-gradient(90deg, var(--line) 0 10px, transparent 10px 16px); height: 3px; }
.pad { margin-top: 8px; padding: 6px 8px 6px 14px; border: 2px solid var(--line); border-top-width: 2px; border-radius: 999px; background: color-mix(in srgb, var(--void) 70%, transparent); backdrop-filter: blur(4px); }
.k { border-radius: 999px; }
@media (max-width: 820px) { .hud { border-radius: 16px; } .pad { border-radius: 18px; padding: 4px 6px; } }

/* ---------- Selection: slanted pill + chevrons (menus, lists, tabs) ---------- */
.tapeable.is-sel { color: var(--sel-ink); }
.tapeable.is-sel::before {
  inset: -.04em -.55em -.06em -.4em; background: var(--sig); clip-path: none; filter: none; border-radius: 999px;
  transform: skewX(-12deg); transform-origin: left center; box-shadow: .16em .16em 0 var(--punk); animation: pillIn .18s var(--snap);
}
@keyframes pillIn { from { transform: skewX(-12deg) scaleX(.1); opacity: .5; } }
.tapeable.is-sel::after {
  left: -1.35em; width: .95em; height: .5em; background: var(--punk); clip-path: none; animation: nudge .5s steps(2) infinite;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20'%3E%3Cpath d='M0 0h9l10 10-10 10H0l10-10zM20 0h9l10 10-10 10h-9l10-10z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 20'%3E%3Cpath d='M0 0h9l10 10-10 10H0l10-10zM20 0h9l10 10-10 10h-9l10-10z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.tapeable.confirm::before { animation: flash .08s steps(1) 4; }

/* Main menu */
.menu { gap: .45rem; padding-left: 1.6em; }
.mi { font-size: clamp(1.4rem, min(3.4vw, 5.6vh), 3rem); font-style: italic; letter-spacing: .01em; color: color-mix(in srgb, var(--ink) 42%, transparent); -webkit-text-stroke: 0; transition: color .15s; }
.mi:hover { color: var(--ink); }
.mi.locked:not(.is-sel) { color: color-mix(in srgb, var(--ink) 24%, transparent); }
.mi.is-sel { color: var(--sel-ink); }
.mi.locked .lab { letter-spacing: .14em; }
.menu-head { display: inline-flex; align-self: flex-start; padding: .35em 1em; border: 2px solid var(--sig); border-radius: 999px; }
.menu-col { display: flex; flex-direction: column; align-items: flex-start; }

/* Preview card: a console info panel */
.pv-card { border: 2px solid var(--sig); border-radius: 24px; clip-path: none; padding: 1.3rem 1.5rem 1.4rem; box-shadow: 7px 7px 0 var(--punk); }
.pv-title { font-size: clamp(1.3rem, 2.1vw, 1.9rem); font-style: italic; }
.sticker { border-radius: 999px; padding: .45em 1em; filter: none; border: 3px solid var(--void); box-shadow: 0 0 0 3px var(--punk), 3px 4px 0 3px #000; }
.stage::before { content: ""; position: absolute; inset: -12%; z-index: -2; border-radius: 50%; opacity: .5;
  background: repeating-radial-gradient(circle, transparent 0 26px, color-mix(in srgb, var(--sig) 30%, transparent) 26px 28px);
  -webkit-mask-image: radial-gradient(circle, #000 40%, transparent 72%); mask-image: radial-gradient(circle, #000 40%, transparent 72%); }

/* Title */
.tagline { margin-top: .4rem; }
.press { font-family: var(--display); font-style: italic; padding: .45em 1.6em; border: 3px solid var(--sig); border-radius: 999px; letter-spacing: .14em; font-size: clamp(1rem, 2vw, 1.45rem); box-shadow: 5px 5px 0 var(--punk); }
.boot .found { font-style: italic; }

/* Room titles: a slanted tab like a console select screen */
.sub-title {
  justify-self: start; width: max-content; max-width: 100%; padding: .22em 1.4em .22em .7em; margin-left: -.2em;
  font-size: clamp(1.3rem, 3vw, 2.4rem); font-style: italic; line-height: 1.1; color: var(--sel-ink); background: var(--sig);
  -webkit-text-stroke: 0; border-radius: 10px 999px 999px 10px; transform: skewX(-10deg); box-shadow: 6px 6px 0 var(--punk);
}
.room-head { align-items: center; }
.room-note { margin: 0; padding: .35em 1em; border: 2px solid var(--line); border-radius: 999px; }

/* Buttons */
.tvb { clip-path: none; border-radius: 999px; border-width: 2px; padding: .6em 1.25em; }
.tvb.primary { box-shadow: 4px 4px 0 var(--punk); }
.tvb.primary:active { box-shadow: 1px 1px 0 var(--punk); translate: 3px 3px; }

/* Panels */
.pcard, .perk, .loadout, .iq-panel, .readout { clip-path: none; border-radius: 22px; }
.pcard { border: 2px solid var(--line); }
.loadout { border: 2px solid var(--sig); border-left-width: 2px; box-shadow: 6px 6px 0 var(--punk); }
.perk { border-radius: 20px; border-width: 2px; }
.perk[aria-pressed="true"] { box-shadow: 5px 5px 0 var(--punk); }
.perk .pk-icon { border-radius: 50%; }
.iq-panel { border: 2px solid var(--sig); border-left-width: 2px; box-shadow: 8px 8px 0 var(--punk); }
.stats { gap: 8px; }
.stats div { border: 2px solid var(--line); border-top-width: 2px; border-radius: 14px; }
.logo-plate { clip-path: none; border-radius: 22px; }
.pc-avatar { border-radius: 16px; }
.pc-classes span, .chips span { border-radius: 999px; }
.chips span { border-left: 0; padding: .35em .9em; }
.mcard { border-radius: 14px; }
.mcard img { border-radius: 14px; }
.mcard .mc-cap { border-radius: 0 0 14px 14px; }
.mcard .mc-play { clip-path: none; border-radius: 50%; }
.cell.is-sel::after { clip-path: none; border-radius: 20px; inset: -6px; }
.cell:focus-visible::after { border-radius: 20px; }
.kiosk { border-radius: 18px 18px 14px 14px; overflow: hidden; }
.turn { clip-path: none; border-radius: 999px; }
.toast { border-radius: 999px; padding: .8rem 1.8rem; font-style: italic; }
.stage-card b { font-style: italic; }
.stage-card i { border-radius: 999px; padding: .3em 1.1em; }
.xp-pop { border-radius: 999px; padding: .3em .8em; }
.gm-title, .ge-big, .cab-marquee span, .att-title, .sn-title { font-style: italic; }
.ge-panel { border-radius: 24px; }
.cab { border-radius: 24px 24px 12px 12px; }
.cab-dots button { border-radius: 999px; }

/* Display text sized for Zen Dots (it runs wider than the old face) */
.cl { font-size: clamp(.95rem, min(1.55vw, 3vh), 1.35rem); font-style: italic; }
.tr { font-size: clamp(1rem, min(1.8vw, 3.2vh), 1.35rem); }
.opt { font-size: clamp(1.05rem, min(2.2vw, 4.2vh), 1.75rem); }
.tab { font-size: clamp(.9rem, 1.3vw, 1.15rem); }
.dos-name { font-size: clamp(1.4rem, 2.6vw, 2.3rem); font-style: italic; }
.pc-name { font-size: clamp(1.4rem, 2vw, 1.9rem); }
.perk .pk-name { font-size: 1.2rem; }
.counter .ci-title { font-size: clamp(1.1rem, 2vw, 1.6rem); }
.vw-title, .rd-title { font-size: clamp(1rem, 1.6vw, 1.35rem); }
.lo-list li { font-size: 1rem; }
.gch b { font-style: italic; }
.iq-title { font-size: clamp(1.3rem, 3.2vw, 2rem); }
.iq-done b { font-size: clamp(1.5rem, 4vw, 2.4rem); }
.gm-msg b, .ge-big { font-size: clamp(1.8rem, 5.6vw, 3.4rem); }
.stage-card b { font-size: clamp(2rem, 7vw, 5rem); }
.boot .found { font-size: clamp(1.5rem, 4vw, 2.6rem); }
.mag .soon-in b { font-size: clamp(.9rem, 1.4vw, 1.2rem); }
.amp-logo { font-size: 1.05rem; }

@media (max-width: 820px) {
  .mi { font-size: min(7.4vw, 2.2rem); }
  .menu { gap: .55rem; }
  .sub-title { font-size: clamp(1.15rem, 6.6vw, 1.8rem); }
  .room .sub-title { font-size: clamp(1.15rem, 6.6vw, 1.8rem); }
  .wordmark { width: 96vw; }
  .press { margin-top: 2.4rem; }
}
.press { animation: pressFlash 1.1s steps(1) infinite; }
@keyframes pressFlash { 50% { background: var(--sig); color: var(--sel-ink); } }
.press.go { animation: pressFlash .16s steps(1) 4; }