/*
  D · Press Start. 80s amber-terminal frame around a modern studio site.
  Rule: the retro treatment lives in the brand chrome (bar, loader, character,
  labels, buttons). Client work is always shown clean.
*/
:root {
  --bg: #0c0906;
  --bg2: #120d09;
  --panel: #17110c;
  --text: #f2e9db;
  --mute: #ae9f8d;
  --amber: #ffb547;
  --o: #fd9007;
  --line: rgba(255, 181, 71, .17);
  --glow: 0 0 6px rgba(253, 144, 7, .55), 0 0 18px rgba(253, 144, 7, .22);
  --term: "VT323", ui-monospace, Menlo, monospace;
  --arc: "Press Start 2P", ui-monospace, Menlo, monospace;
  --sans: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pad: clamp(16px, 4vw, 48px);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
html.booting { overflow: hidden; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 17px/1.6 var(--sans); font-stretch: 100%;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: var(--amber); }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.sr, .skip:not(:focus) { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip:focus { position: fixed; top: 8px; left: 8px; z-index: 100; background: var(--amber); color: #120c06; padding: 10px 14px; font: 22px var(--term); }

/* ---------- Type helpers ---------- */
.tag, .kicker, .hint, .hud, .continue, .cheat, .lvl-meta, .sound, .btn, .bubble, .zzz, .fame, .stage-n, .rule-n, .kind {
  font-family: var(--term); letter-spacing: .02em;
}
.tag { margin: 0 0 6px; color: var(--amber); text-transform: uppercase; font-size: 22px; text-shadow: var(--glow); }
.tag::before { content: "► "; }
h1, h2, h3 { font-family: var(--sans); font-stretch: 118%; font-weight: 800; letter-spacing: -.01em; line-height: 1.05; margin: 0; }
h2 { font-size: clamp(28px, 4.4vw, 52px); }
.lede { color: var(--mute); max-width: 56ch; margin: 12px 0 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 6px 20px; border: 2px solid var(--o);
  background: var(--o); color: #170e05; text-decoration: none; text-transform: uppercase;
  font-size: 24px; line-height: 1; cursor: pointer;
  box-shadow: 4px 4px 0 #6b3a00; transition: transform .08s steps(2), box-shadow .08s steps(2);
}
.btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 #6b3a00; }
.btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 #6b3a00; }
.btn-ghost { background: transparent; color: var(--amber); border-color: var(--line); box-shadow: none; }
.btn-ghost:hover { border-color: var(--amber); box-shadow: none; }
.btn-ghost[aria-pressed="true"] { background: var(--amber); color: #170e05; }
.btn-sm { min-height: 40px; font-size: 21px; padding: 4px 14px; box-shadow: 3px 3px 0 #6b3a00; }

/* ---------- Top bar ---------- */
.bar {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 18px;
  padding: 10px var(--pad); background: rgba(12, 9, 6, .86); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; margin-right: auto; }
.brand img { width: 34px; height: 34px; }
.word { font-stretch: 118%; font-weight: 800; font-size: 19px; letter-spacing: -.01em; white-space: nowrap; }
.word .i { position: relative; display: inline-block; }
.word .idot { position: absolute; left: 50%; top: .02em; width: .26em; height: .26em; margin-left: -.13em; background: var(--o); box-shadow: 0 0 8px rgba(253,144,7,.7); transform-origin: 50% 50%; }
.word .idot.wink { animation: wink .32s steps(3) 1; }
@keyframes wink { 50% { transform: scaleY(.15); } }
.links { display: flex; gap: 22px; }
.links a { color: var(--text); text-decoration: none; font: 22px var(--term); text-transform: uppercase; }
.links a:hover { color: var(--amber); text-shadow: var(--glow); }
.sound { background: none; border: 1px solid var(--line); color: var(--mute); font-size: 20px; min-height: 40px; padding: 0 10px; cursor: pointer; text-transform: uppercase; }
.sound b { color: var(--amber); font-weight: 400; }

/* ---------- Hero ---------- */
.hero { position: relative; padding: 18px var(--pad) clamp(40px, 7vw, 90px); overflow: hidden; isolation: isolate; }
.hero::before { /* warm phosphor glow behind the cube */
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: radial-gradient(60% 70% at 30% 52%, rgba(253, 144, 7, .17), transparent 70%), linear-gradient(var(--bg2), var(--bg));
}
.hero:has(.char.gl)::before { background: linear-gradient(var(--bg2), var(--bg)); } /* the 3D cube makes its own glow */
.hero::after { /* faint scanlines, background only */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .55;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,.28) 0 1px, transparent 1px 3px);
}
.hud { display: flex; justify-content: space-between; gap: 12px; color: var(--amber); font-size: 20px; opacity: .8; text-shadow: var(--glow); max-width: 1240px; margin: 0 auto; }
.hero-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(20px, 4vw, 64px); align-items: center; max-width: 1240px; margin: 0 auto; }
.kicker { color: var(--amber); font-size: 24px; margin: 0 0 14px; text-shadow: var(--glow); }
.hero h1 { font-size: clamp(34px, 4.6vw, 62px); max-width: 16ch; }
.sub { color: var(--mute); font-size: clamp(17px, 1.5vw, 20px); max-width: 44ch; margin: 18px 0 28px; }
.cta { display: flex; flex-wrap: wrap; gap: 14px; }

.stage { position: relative; width: min(100%, 560px); justify-self: center; padding-top: 30px; }
.char {
  display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 0; background: none; cursor: pointer;
  perspective: 900px; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.char:focus-visible { outline-offset: -6%; }
.char-static { width: 100%; height: 100%; }
.char-tilt { display: block; width: 100%; height: 100%; transform-style: preserve-3d; will-change: transform; }
.char svg, .char canvas { display: block; width: 100%; height: 100%; overflow: visible; }
.char-tilt canvas { display: none; image-rendering: pixelated; image-rendering: crisp-edges; }
/* Real-time 3D cube: black background screened onto the page so the glow blends in */
.char.gl { position: relative; perspective: none; }
.char.gl .char-tilt { visibility: hidden; }
.char .char-gl {
  /* 30% taller than the cube's box, reaching upward, so the pixel has room to jump */
  position: absolute; left: 0; top: -30%; width: 100%; height: 130%; pointer-events: none;
  mix-blend-mode: screen; transition: opacity .45s steps(5);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 8%, #000 90%, transparent 100%), linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent 0, #000 8%, #000 90%, transparent 100%), linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-composite: intersect;
}
.char.off .char-gl { opacity: 0; }
.char .char-gl.low { image-rendering: pixelated; image-rendering: crisp-edges; }
.char .frame path, .char .facets path, .char .eye { transition: opacity .3s steps(3); }
.char.off .frame path, .char.off .facets path, .char.off .eye, .char.off .halo { opacity: 0; }
.char .frame path:nth-child(2) { transition-delay: .09s; }
.char .frame path:nth-child(3) { transition-delay: .18s; }
.char .frame path:nth-child(4) { transition-delay: .27s; }
.char .facets path { transition-delay: .36s; }
.hint { text-align: center; color: var(--mute); font-size: 20px; margin: 4px 0 0; }

/* Speech bubble: a little terminal readout, not a cartoon balloon */
.bubble {
  position: absolute; top: 0; right: 0; z-index: 3; max-width: min(270px, 64vw);
  padding: 6px 12px 7px; background: #140d06; color: var(--amber); border: 2px solid var(--amber);
  font-size: 22px; line-height: 1.1; text-transform: uppercase; text-shadow: var(--glow);
  box-shadow: 4px 4px 0 rgba(0,0,0,.6); opacity: 0; transform: translateY(6px);
  transition: opacity .15s steps(2), transform .15s steps(2); pointer-events: none;
}
.bubble.on { opacity: 1; transform: none; }
.bubble::after { content: ""; position: absolute; left: 22px; bottom: -10px; width: 12px; height: 10px; background: var(--amber); clip-path: polygon(0 0, 100% 0, 0 100%); }
.bubble .cur { display: inline-block; width: .5em; height: .85em; margin-left: 2px; background: currentColor; vertical-align: -1px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.zzz { position: fixed; z-index: 25; pointer-events: none; color: var(--amber); font-family: var(--arc); font-size: 14px; text-shadow: var(--glow); animation: zzz 2.4s steps(12) forwards; }
@keyframes zzz { from { opacity: 0; transform: translate(0, 0) scale(.7); } 15% { opacity: 1; } to { opacity: 0; transform: translate(26px, -70px) scale(1.25); } }
.bit { position: fixed; left: 0; top: 0; z-index: 40; pointer-events: none; }
.flyer { position: fixed; left: 0; top: 0; z-index: 60; background: var(--amber); box-shadow: 0 0 18px rgba(255,181,71,.9); transform-origin: 0 0; pointer-events: none; }

/* ---------- The companion: the pixel travels with you down the page ---------- */
.dock { position: fixed; left: 0; top: 0; z-index: 28; width: 44px; opacity: 0; pointer-events: none; transition: opacity .2s steps(3); will-change: transform; }
.dock.on { opacity: 1; pointer-events: auto; }
.dock.gone { opacity: 0 !important; pointer-events: none; }
.buddy { display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.buddy-body { display: block; width: 100%; height: 100%; animation: buddybob 1.6s ease-in-out infinite;
  filter: drop-shadow(0 0 6px rgba(255,190,60,.95)) drop-shadow(0 0 18px rgba(253,130,0,.6)); }
.buddy svg { display: block; width: 100%; height: 100%; }
@keyframes buddybob { 50% { transform: translateY(-8%) scaleY(1.03); } }
.dock.asleep .buddy-body { animation: none; filter: brightness(.5) drop-shadow(0 0 4px rgba(253,130,0,.4)); }
.dock .bubble { top: auto; bottom: calc(100% + 10px); left: -6px; right: auto; font-size: 20px; width: max-content; max-width: min(240px, 70vw); }
.dock .bubble::after { left: 16px; }
.dock.flip .bubble { left: auto; right: -6px; }
.dock.flip .bubble::after { left: auto; right: 16px; }
@media (prefers-reduced-motion: reduce) { .buddy-body { animation: none; } }

/* ---------- Sections ---------- */
.sec { padding: clamp(56px, 9vw, 120px) var(--pad); max-width: 1240px; margin: 0 auto; overflow-x: clip; } /* cards slide in from the sides */
.sec-head { margin-bottom: clamp(26px, 4vw, 44px); }

.modes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1200px) { .modes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mode {
  --c: var(--o); position: relative; display: flex; flex-direction: column; gap: 14px; padding: 24px 24px 22px; overflow: hidden;
  background: radial-gradient(110% 70% at 0% 0%, color-mix(in srgb, var(--c) 10%, transparent), transparent 60%), var(--panel);
  border: 1px solid var(--line); transition: border-color .2s, box-shadow .2s, transform .2s;
}
.mode::after { /* scanlines */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,.22) 0 1px, transparent 1px 3px);
}
.mode > * { position: relative; z-index: 1; }
.mode:hover, .mode:focus-within { border-color: var(--c); box-shadow: 0 0 0 1px var(--c), 0 18px 50px -24px var(--c); transform: translateY(-3px); }
.m-sel { position: absolute; top: 14px; right: 16px; z-index: 2; font: 14px var(--arc); color: var(--c); text-transform: uppercase; opacity: 0; transition: opacity .1s steps(2); }
.mode:hover .m-sel, .mode:focus-within .m-sel { opacity: 1; animation: blink .8s steps(1) infinite; }
.m-top { display: flex; align-items: center; gap: 16px; }
.m-icon-wrap { flex: none; width: 72px; height: 72px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); background: #0b0806; box-shadow: inset 0 0 18px color-mix(in srgb, var(--c) 18%, transparent); }
.m-icon { width: 48px; height: 48px; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--c) 70%, transparent)); }
.m-icon .pa { fill: var(--c); } .m-icon .pb { fill: #fff3dc; } .m-icon .pd { fill: color-mix(in srgb, var(--c) 45%, #0b0806); }
.mode:hover .m-icon { animation: mbob .6s steps(2) infinite; }
@keyframes mbob { 50% { transform: translateY(-3px); } }
.mode h3 { font-size: 26px; }
.mode h3::before { display: none; }
.mode .m-short { color: var(--c); margin: 0 0 4px; font: 20px var(--term); text-transform: uppercase; }
.mode p { margin: 0; color: #d3c8b8; }
.m-stats { margin: 2px 0 0; display: grid; gap: 6px; padding: 12px 14px; border: 1px dashed color-mix(in srgb, var(--c) 35%, transparent); background: rgba(0,0,0,.25); }
.m-stat { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.m-stat dt { font: 19px var(--term); color: var(--mute); text-transform: uppercase; line-height: 1; }
.m-stat dd { margin: 0; display: flex; align-items: center; gap: 8px; }
.m-stat b { font: 12px var(--arc); color: var(--c); width: 2.2em; text-align: right; }
.m-bar { display: flex; gap: 2px; }
.m-bar i { width: 8px; height: 12px; background: rgba(255,255,255,.07); }
.mode.lit .m-bar i.on { background: var(--c); box-shadow: 0 0 6px color-mix(in srgb, var(--c) 60%, transparent); transition: background 0s calc(var(--k) * 60ms + 200ms), box-shadow 0s calc(var(--k) * 60ms + 200ms); }
.mode ul { margin: 0; padding: 0; list-style: none; color: var(--mute); font-size: 15px; display: grid; gap: 4px; }
.mode li { padding-left: 18px; position: relative; }
.mode li::before { content: "▸"; position: absolute; left: 0; color: var(--c); }
.m-proof { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 14px; }
.m-proof span { font: 17px var(--term); color: var(--mute); text-transform: uppercase; margin-right: 2px; }
.m-proof em { font-style: normal; font-size: 13px; padding: 3px 8px; border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); color: var(--text); background: color-mix(in srgb, var(--c) 8%, transparent); }
.mode .btn { margin-top: auto; align-self: flex-start; }

.levels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.level { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); }
.level figure { margin: 0; background: #1d1711; }
.level img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; background: #211a13; }
.kind { display: block; padding: 6px 12px; color: var(--mute); font-size: 18px; border-top: 1px solid var(--line); }
.level-body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.lvl-meta { color: var(--amber); font-size: 20px; text-transform: uppercase; margin: 0; }
.level h3 { font-size: clamp(22px, 2.2vw, 28px); }
.level .ttl { margin: 0; font-weight: 600; }
.level p { margin: 0; color: #d3c8b8; font-size: 16px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 4px 0 0; list-style: none; }
.chips li { border: 1px solid var(--line); padding: 2px 8px; font: 18px var(--term); color: var(--mute); }
.level .acts { margin-top: auto; padding-top: 8px; display: flex; flex-wrap: wrap; gap: 10px; }
.level .acts .btn { font-size: 20px; min-height: 42px; }
.bonus-title { margin: 48px 0 16px; font-size: 22px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; }
.bonus-title .tag { margin: 0; }
.bonus { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.bonus .level img { aspect-ratio: 1; }
.bonus .level-body { padding: 12px 14px 16px; gap: 6px; }
.bonus .level h3 { font-size: 18px; }
.bonus .level p { font-size: 14px; }

.fame { width: 100%; border-collapse: collapse; font-size: 24px; color: var(--amber); text-shadow: var(--glow); }
.fame th { text-align: left; font-weight: 400; color: var(--mute); text-shadow: none; padding: 0 12px 10px 0; border-bottom: 2px dashed var(--line); text-transform: uppercase; font-size: 20px; }
.fame td { padding: 12px 12px 12px 0; border-bottom: 1px dashed var(--line); vertical-align: top; }
.fame .ini { font-family: var(--arc); font-size: 16px; color: var(--o); width: 7.5em; padding-top: 18px; }
.fame .who { color: var(--text); text-transform: uppercase; }
.fame .made { display: block; color: var(--mute); text-shadow: none; text-transform: none; font-size: 20px; line-height: 1.15; margin-top: 2px; }
.fame .yr { white-space: nowrap; text-align: right; width: 7em; }
.fame tbody tr:hover td { background: rgba(253,144,7,.06); }

.rules { list-style: none; padding: 0; margin: 0 0 56px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.rules li {
  --c: var(--o); position: relative; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: start;
  padding: 24px 24px 26px; border: 1px solid var(--line);
  background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--c) 9%, transparent), transparent 60%), var(--panel);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.rules li::after { /* pixel-grid sheen that sweeps on hover */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent 35%, color-mix(in srgb, var(--c) 16%, transparent) 50%, transparent 65%),
              repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 8px);
  background-size: 250% 100%, auto; background-position: 120% 0, 0 0; transition: opacity .2s;
}
.rules li:hover, .rules li:focus-within { border-color: color-mix(in srgb, var(--c) 60%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 25%, transparent), 0 12px 40px -18px var(--c); transform: translateY(-2px); }
.rules li:hover::after { opacity: 1; animation: sheen 1.1s ease-out; }
@keyframes sheen { from { background-position: 120% 0, 0 0; } to { background-position: -40% 0, 0 0; } }
.rule-btn { /* a real arcade button */
  position: relative; width: 64px; height: 64px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; margin-top: 4px;
  background: radial-gradient(circle at 38% 30%, color-mix(in srgb, var(--c) 55%, #fff) 0 12%, var(--c) 42%, color-mix(in srgb, var(--c) 70%, #000) 100%);
  box-shadow: 0 7px 0 color-mix(in srgb, var(--c) 45%, #000), 0 9px 0 #050302, 0 0 0 5px #0b0806, 0 0 0 6px rgba(255,255,255,.08), 0 10px 26px -6px var(--c);
  transition: transform .08s, box-shadow .08s; -webkit-tap-highlight-color: transparent;
}
.rule-btn b { font-family: var(--arc); font-size: 18px; color: #1a0f05; text-shadow: 0 1px 0 rgba(255,255,255,.35); }
.rules li:hover .rule-btn { box-shadow: 0 7px 0 color-mix(in srgb, var(--c) 45%, #000), 0 9px 0 #050302, 0 0 0 5px #0b0806, 0 0 0 6px rgba(255,255,255,.12), 0 10px 34px -2px var(--c); }
.rule-btn:active, .rule-btn.hit { transform: translateY(6px); box-shadow: 0 1px 0 color-mix(in srgb, var(--c) 45%, #000), 0 3px 0 #050302, 0 0 0 5px #0b0806, 0 0 0 6px rgba(255,255,255,.08), 0 0 40px 2px var(--c); }
.rule-btn.hit { animation: press .35s steps(3) 1; }
@keyframes press { 0%,60% { transform: translateY(6px); } 100% { transform: none; } }
.rule-btn:focus-visible { outline: 2px dashed var(--amber); outline-offset: 8px; }
.rule-n { color: var(--c); font-size: 20px; text-transform: uppercase; display: block; margin-bottom: 6px; text-shadow: 0 0 10px color-mix(in srgb, var(--c) 50%, transparent); }
.rules h3 { font-size: 22px; margin-bottom: 8px; }
.rules p { margin: 0; color: #d3c8b8; font-size: 16px; }
.stages { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); }
.stages li { padding: 18px 18px 22px; border-right: 1px solid var(--line); }
.stages li:last-child { border-right: 0; }
.stage-bar { display: flex; gap: 3px; margin-bottom: 14px; }
.stage-bar i { flex: 1; height: 10px; background: rgba(253,144,7,.14); }
.stages.lit .stage-bar i { animation: fill .1s steps(1) forwards; animation-delay: calc(var(--n) * 70ms); }
@keyframes fill { to { background: var(--o); box-shadow: 0 0 8px rgba(253,144,7,.6); } }
.stage-n { color: var(--amber); font-size: 20px; text-transform: uppercase; }
.stages h3 { font-size: 26px; margin: 2px 0 6px; }
.stages p { margin: 0; color: var(--mute); font-size: 15px; }
.stages li:last-child h3::after { content: " \2691"; color: var(--o); text-shadow: var(--glow); } /* finish flag */

/* ---------- Headline gag ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hero h1 { cursor: default; }
.hl-swap { display: block; position: relative; white-space: nowrap; min-height: 1.05em; }
.hl-w { position: relative; display: inline-block; color: var(--mute); font-size: min(1em, 8.6vw); }
.hl-w::after { content: ""; position: absolute; left: -2%; right: -2%; top: 54%; height: .12em; background: var(--o); box-shadow: 0 0 12px var(--o); transform: scaleX(0) rotate(-2deg); transform-origin: left; transition: transform .35s steps(6); }
.hl-w.struck::after { transform: scaleX(1) rotate(-2deg); }
.hl-w.gone { opacity: 0; transform: translateY(-.3em); transition: opacity .2s steps(3), transform .2s steps(3); }
.hl-final { color: var(--text); }
.hl-final::after { display: none; }
.hl-final.land { color: var(--o); text-shadow: 0 0 18px rgba(253,144,7,.55); animation: land .5s steps(5) both; }
@keyframes land { 0% { transform: scale(1.35) translateY(-.2em); opacity: 0; } 60% { transform: scale(.94); opacity: 1; } 100% { transform: none; } }

/* ---------- Brief ---------- */
.start { border-top: 1px solid var(--line); }
.blink-tag::after { content: "_"; animation: blink 1s steps(1) infinite; }
.brief-form { display: grid; gap: 26px; }
.brief-q { border: 0; padding: 0; margin: 0; min-width: 0; }
.brief-q legend { padding: 0; margin-bottom: 12px; font-weight: 700; font-size: 20px; font-stretch: 110%; }
.brief-num { font: 20px var(--term); color: var(--amber); margin-right: 6px; }
.brief-options { display: flex; flex-wrap: wrap; gap: 8px; }
.brief-opt { position: relative; cursor: pointer; }
.brief-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.brief-opt span { display: inline-flex; align-items: center; min-height: 44px; padding: 4px 14px; border: 1px solid var(--line); background: var(--panel); font: 22px var(--term); color: var(--text); }
.brief-opt span::before { content: "►"; width: 0; overflow: hidden; color: #170e05; transition: width .08s steps(2); }
.brief-opt input:checked + span { background: var(--amber); color: #170e05; border-color: var(--amber); }
.brief-opt input:checked + span::before { width: 1em; }
.brief-opt input:focus-visible + span { outline: 2px solid var(--amber); outline-offset: 3px; }
.brief-opt:hover span { border-color: var(--amber); }
.brief-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.brief-field { display: flex; flex-direction: column; gap: 6px; font-size: 15px; color: var(--mute); }
.brief-wide { grid-column: 1 / -1; }
.brief-field input, .brief-field textarea { font: 17px var(--sans); color: var(--text); background: #0f0b07; border: 1px solid var(--line); padding: 12px; border-radius: 0; }
.brief-field input:focus, .brief-field textarea:focus { border-color: var(--amber); outline: none; box-shadow: 0 0 0 2px rgba(255,181,71,.25); }
.brief-out { border: 2px solid var(--amber); background: #100a05; padding: 18px; box-shadow: 6px 6px 0 rgba(0,0,0,.5); }
.brief-out-label { margin: 0 0 8px; font: 20px var(--term); color: var(--mute); text-transform: uppercase; }
.brief-preview { margin: 0; white-space: pre-wrap; font: 23px/1.2 var(--term); color: var(--amber); text-shadow: var(--glow); min-height: 6em; }
.brief-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.brief-send { display: inline-flex; align-items: center; min-height: 48px; padding: 6px 18px; text-decoration: none; text-transform: uppercase; font: 23px var(--term); border: 2px solid var(--o); }
.brief-email { background: var(--o); color: #170e05; box-shadow: 4px 4px 0 #6b3a00; }
.brief-wa { color: var(--amber); }
.brief-note { margin: 14px 0 0; font-size: 14px; color: var(--mute); }

/* ---------- Footer ---------- */
.foot { border-top: 1px solid var(--line); padding: 56px var(--pad) calc(110px + env(safe-area-inset-bottom)); text-align: center; }
.continue { font-family: var(--arc); font-size: clamp(16px, 3vw, 28px); color: var(--o); text-shadow: var(--glow); margin: 0 0 26px; text-transform: uppercase; line-height: 1.5; }
.foot-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.cheat { color: var(--mute); font-size: 20px; margin: 22px 0 6px; }
kbd { display: inline-block; min-width: 1.4em; margin: 0 2px; padding: 0 4px; border: 1px solid var(--line); font: inherit; color: var(--amber); }
.small { color: var(--mute); font-size: 13px; max-width: 60ch; margin: 10px auto 0; }

/* ---------- Boot screen ---------- */
.boot { position: fixed; inset: 0; z-index: 50; background: #0a0704; color: var(--amber); padding: max(28px, 6vh) max(20px, 6vw); font: clamp(19px, 2.6vw, 28px)/1.25 var(--term); text-shadow: var(--glow); cursor: pointer; transition: background-color .45s steps(5); }
.boot::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(to bottom, rgba(0,0,0,.3) 0 1px, transparent 1px 3px); }
.boot pre { margin: 0; font: inherit; white-space: pre-wrap; transition: opacity .25s steps(3); }
.boot .bcur { display: inline-block; width: .55em; height: .9em; background: var(--amber); vertical-align: -.1em; animation: blink .5s steps(1) infinite; }
.boot .skipnote { position: absolute; bottom: max(20px, 4vh); left: max(20px, 6vw); right: max(20px, 6vw); color: var(--mute); text-shadow: none; font-size: 20px; }
.boot.out { background-color: rgba(10,7,4,0); }
.boot.out pre, .boot.out .skipnote { opacity: 0; }

/* ---------- 8-bit mode (cheat) ---------- */
body.bit8 .char svg { display: none; }
body.bit8 .char-tilt canvas { display: block; }
body.bit8 h1, body.bit8 h2, body.bit8 h3, body.bit8 .word { font-family: var(--arc); font-weight: 400; letter-spacing: 0; line-height: 1.45; }
body.bit8 .hero h1 { font-size: clamp(18px, 2.6vw, 34px); max-width: 22ch; }
body.bit8 h2 { font-size: clamp(16px, 2.4vw, 28px); }
body.bit8 h3, body.bit8 .mode h3 { font-size: 14px; }
body.bit8 .word { font-size: 11px; }
body.bit8 .brand img { image-rendering: pixelated; }
body.bit8 .hero::after { opacity: .9; }
body.bit8 .brief-q legend { font-family: var(--arc); font-size: 12px; font-weight: 400; line-height: 1.6; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .links { display: none; }
  .modes { grid-template-columns: 1fr; }
  .bonus { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stages li:nth-child(2) { border-right: 0; }
  .stages li:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 760px) {
  .hero-grid { grid-template-columns: 1fr; gap: 6px; }
  .stage { width: min(80vw, 380px); }
  .hero h1 { font-size: clamp(31px, 8.6vw, 44px); }
  .levels, .rules, .brief-fields { grid-template-columns: 1fr; }
  .rules li { gap: 16px; padding: 20px 18px 22px; }
  .rule-btn { width: 52px; height: 52px; }
  .hud span:nth-child(2) { display: none; }
  .fame { font-size: 21px; }
  .fame .ini { font-size: 11px; width: 5.4em; padding-top: 16px; }
  .fame .made { font-size: 18px; }
  .fame .yr { width: auto; font-size: 18px; }
}
@media (max-width: 520px) {
  .word { display: none; }
  .bar { gap: 10px; }
  .stages { grid-template-columns: 1fr; }
  .stages li { border-right: 0 !important; border-bottom: 1px solid var(--line); }
  .stages li:last-child { border-bottom: 0; }
  .bonus { grid-template-columns: 1fr 1fr; gap: 10px; }
  .btn { font-size: 22px; padding: 6px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .mode:hover .m-icon, .mode:hover .m-sel, .mode:focus-within .m-sel { animation: none; }
  html { scroll-behavior: auto; }
  .bubble .cur, .blink-tag::after, .boot .bcur, .mode:hover h3::before { animation: none; }
  .stages .stage-bar i { animation: none !important; background: var(--o); }
  .btn, .btn:hover, .btn:active { transition: none; transform: none; }
}

/* ---------- Scroll-driven animations (cheeky, 8-bit) ----------
   Pure CSS scroll timelines. Without support, or with reduced motion, everything
   is simply shown in place. Ticker strips and the HUD bar are decorative. */
.scrollhud { position: absolute; left: 0; right: 0; bottom: -1px; height: 4px; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(253,144,7,.16) 0 10px, transparent 10px 12px); }
.ticker { overflow: hidden; border-block: 1px solid var(--line); background: #100b07; padding: 10px 0; }
.ticker-track { display: flex; width: max-content; white-space: nowrap; font: 24px var(--term); color: var(--amber); text-transform: uppercase; text-shadow: var(--glow); }

@property --pct { syntax: "<integer>"; inherits: true; initial-value: 0; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    /* 1. Progress: a pixel bar fills, a pixel hops along it with the percentage */
    .scrollhud { animation: hudfill linear both; animation-timeline: scroll(root); }
    .scrollhud::before { content: ""; position: absolute; inset: 0; transform-origin: 0 50%;
      background: repeating-linear-gradient(90deg, var(--o) 0 10px, transparent 10px 12px);
      box-shadow: 0 0 8px rgba(253,144,7,.55); animation: hudbar linear both; animation-timeline: scroll(root); }
    .runner { position: absolute; top: -6px; left: 0; width: 8px; height: 8px; background: #ffe07a; box-shadow: 0 0 10px rgba(255,200,80,.9);
      animation: hudrun linear both, hop .36s steps(2) infinite; animation-timeline: scroll(root), auto; }
    .runner::after { counter-reset: p var(--pct); content: counter(p) "%"; position: absolute; top: 10px; left: 50%; translate: -50% 0;
      font: 16px var(--term); color: var(--amber); white-space: nowrap; text-shadow: var(--glow);
      animation: hudlabel steps(1) both; animation-timeline: scroll(root); }
    @keyframes hudfill { to { --pct: 100; } }
    @keyframes hudbar { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
    @keyframes hudrun { from { left: 0; } to { left: calc(100% - 8px); } }
    @keyframes hop { 50% { translate: 0 -3px; } }
    @keyframes hudlabel { 0%, 97% { translate: -50% 0; } 98%, 100% { content: "LEVEL COMPLETE!"; translate: -100% 0; } }

    /* 2. Headings wipe on in 8-bit steps */
    .sec-head h2, .bonus-title { animation: wipe steps(8) both; animation-timeline: view(); animation-range: entry 15% cover 35%; }
    @keyframes wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 -10% 0 0); } }

    /* 3. Work cards slide in like cartridges, alternating sides */
    .levels .level, .bonus .level { animation: cartL steps(6) both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
    .levels .level:nth-child(even), .bonus .level:nth-child(even) { animation-name: cartR; }
    @keyframes cartL { from { opacity: 0; transform: translate(-60px, 40px) rotate(-4deg); } }
    @keyframes cartR { from { opacity: 0; transform: translate(60px, 40px) rotate(4deg); } }

    /* 4. Ticker strips slide sideways with the scroll */
    .ticker-track { animation: tick linear both; animation-timeline: view(); animation-range: cover; }
    .ticker-rev .ticker-track { animation-name: tickrev; }
    @keyframes tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }
    @keyframes tickrev { from { transform: translateX(-50%); } to { transform: translateX(0); } }

    /* 5. High scores pop in row by row */
    .fame tbody tr { animation: rowin steps(4) both; animation-timeline: view(); animation-range: entry 10% cover 25%; }
    @keyframes rowin { from { opacity: 0; transform: translateX(-28px); } }

    /* 6. The mode cards light up as they pass the middle of the screen */
    .mode { animation: modesel linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    .mode h3::before { animation: modecur steps(1) both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    @keyframes modesel { 38%, 62% { border-color: var(--c); box-shadow: 0 0 0 1px var(--c), 0 0 24px color-mix(in srgb, var(--c) 20%, transparent); } }
    @keyframes modecur { 0%, 37% { opacity: .25; } 38%, 62% { opacity: 1; } 63%, 100% { opacity: .25; } }

    /* 7. Stage bars fill pixel by pixel with the scroll */
    .stages { view-timeline-name: --stages; }
    .stages .stage-bar i, .stages.lit .stage-bar i { animation: fill steps(1) both; animation-timeline: --stages;
      animation-delay: 0s; animation-range: cover calc(25% + var(--n) * 1.6%) cover calc(26% + var(--n) * 1.6%); }
  }
}

/* ---------- Playing with the pixel ---------- */
.play-row { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 18px; }
.link-btn { background: none; border: 0; padding: 6px 0; min-height: 40px; color: var(--amber); font: 22px var(--term); text-transform: uppercase; cursor: pointer; text-shadow: var(--glow); }
.link-btn:hover { color: #ffe07a; }
.pix-handle { position: absolute; z-index: 4; display: none; cursor: grab; touch-action: none; border-radius: 6px; }
html.grabbing, html.grabbing * { cursor: grabbing !important; user-select: none; }
.game-hud { position: absolute; left: 50%; top: -6px; translate: -50% 0; z-index: 5; display: none; padding: 6px 12px; background: #140d06; border: 2px solid var(--o);
  color: var(--o); font: 12px/1.4 var(--arc); white-space: nowrap; text-shadow: var(--glow); }
.game-hud.on { display: block; }

.chat { position: fixed; right: max(14px, env(safe-area-inset-right)); bottom: calc(100px + env(safe-area-inset-bottom)); z-index: 45;
  width: min(390px, calc(100vw - 28px)); max-height: min(72vh, 560px); display: flex; flex-direction: column;
  background: #110b06; border: 2px solid var(--amber); box-shadow: 6px 6px 0 rgba(0,0,0,.55), 0 0 30px rgba(253,144,7,.15);
  opacity: 0; transform: translateY(10px); transition: opacity .15s steps(3), transform .15s steps(3); }
.chat.on { opacity: 1; transform: none; }
.chat[hidden] { display: none; }
.chat-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.chat-head p { margin: 0; color: var(--o); font: 12px var(--arc); text-transform: uppercase; text-shadow: var(--glow); }
.chat-x { background: none; border: 1px solid var(--line); color: var(--amber); width: 36px; height: 36px; cursor: pointer; font-size: 16px; }
.chat-note { margin: 0; padding: 6px 12px; color: var(--mute); font-size: 12px; border-bottom: 1px dashed var(--line); }
.chat-log { flex: 1; overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; min-height: 140px; }
.msg { margin: 0; font: 15px/1.45 var(--sans); color: var(--text); }
.msg b { font: 18px var(--term); font-weight: 400; color: var(--mute); }
.msg.px b { color: var(--amber); }
.msg.px { color: #f6dcb8; }
.msg.typing { color: var(--amber); font: 22px var(--term); }
.chat-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 10px; }
.chip { background: var(--panel); border: 1px solid var(--line); color: var(--amber); font: 18px var(--term); padding: 4px 10px; min-height: 34px; cursor: pointer; text-transform: uppercase; }
.chip:hover, .chip:focus-visible { border-color: var(--amber); background: #1d150c; }
.chat-form { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); }
.chat-form input { flex: 1; min-width: 0; font: 15px var(--sans); color: var(--text); background: #0d0905; border: 1px solid var(--line); padding: 10px; }
.chat-form input:focus { border-color: var(--amber); outline: none; }
@media (max-width: 520px) { .chat { bottom: calc(86px + env(safe-area-inset-bottom)); max-height: 64vh; } }
@media (prefers-reduced-motion: reduce) { .chat { transition: none; } }

/* Selfie flash */
.stage.flash::after { content: ""; position: absolute; inset: -10% -20%; z-index: 6; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(255,250,235,.55), rgba(255,230,180,0) 55%); animation: flash .35s ease-out forwards; }
@keyframes flash { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .stage.flash::after { animation: none; opacity: 0; } }

/* ---------- The lane: the pixel's track down the left edge (wide screens) ---------- */
.rail { position: fixed; left: 0; top: 0; z-index: 27; width: 44px; height: 100vh; pointer-events: none; opacity: 0; transition: opacity .25s steps(3); }
/* the lane is always there on desktop; the pixel pops onto it when it leaves the cube */
.rail.on { opacity: 1; }
.rail-line { position: absolute; left: 21px; top: var(--rail-top, 96px); height: var(--rail-h, 70vh); width: 2px;
  background: repeating-linear-gradient(to bottom, rgba(253,144,7,.45) 0 6px, transparent 6px 10px); box-shadow: 0 0 8px rgba(253,144,7,.2); }
.rail-tick { position: absolute; left: 14px; width: 16px; height: 16px; margin-top: -8px; pointer-events: auto; text-decoration: none; }
.rail.on .rail-tick { pointer-events: auto; }
.rail:not(.on) .rail-tick { pointer-events: none; }
.rail-tick::before { content: ""; position: absolute; left: 4px; top: 4px; width: 8px; height: 8px; background: #3a2a18; border: 1px solid rgba(253,144,7,.6); }
.rail-tick.here::before { background: var(--o); box-shadow: 0 0 8px rgba(253,144,7,.8); }
.rail-tick span { position: absolute; left: 22px; top: 50%; translate: 0 -50%; padding: 2px 8px; background: #140d06; border: 1px solid var(--line);
  color: var(--amber); font: 18px var(--term); text-transform: uppercase; white-space: nowrap; opacity: 0; transition: opacity .12s steps(2); pointer-events: none; }
.rail-tick:hover span, .rail-tick:focus-visible span { opacity: 1; }
/* Desktop: the lane is the progress indicator, so the top progress bar goes.
   Mobile: the top bar stays, and the pixel itself rides it (the old runner goes). */
html.lane .scrollhud { display: none; }
.runner { display: none !important; }
.dock.below .bubble { bottom: auto; top: calc(100% + 8px); font-size: 17px; max-width: min(220px, 64vw); }
.dock.below .bubble::after { bottom: auto; top: -10px; clip-path: polygon(0 100%, 100% 100%, 0 0); }
.dock.pop-in .buddy-body { animation: popin .32s steps(4) both, buddybob 1.6s ease-in-out .32s infinite; }
.dock.pop-out .buddy-body { animation: popout .2s steps(3) forwards; }
.dock.pop-out .bubble { opacity: 0; }
@keyframes popin { 0% { transform: scale(0); } 60% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes popout { to { opacity: 0; transform: scale(0); } }
@media (max-width: 899px) { .rail { display: none; } }

/* Light trail canvas (behind the riding pixel, above the page) */
.trail-cv { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 27; pointer-events: none; }

/* The flat 2D drawing never shows. Before the 3D cube is ready: nothing (no flash).
   If 3D can't run: a still image of the 3D cube. Without JavaScript: the same still. */
.js .char-static { visibility: hidden; }
.char[data-char="hero"] .char-tilt { display: none; }
.char-photo { display: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.char.no-gl .char-photo { display: block; }
.char.gl .char-photo { display: none; } /* the live cube wins, never both */
.char[data-char="hero"] { position: relative; }

/* Lost pixels: small, twinkling, findable */
.lost { position: absolute; z-index: 3; width: 16px; height: 16px; padding: 0; border: 0; background: none; cursor: pointer;
  filter: drop-shadow(0 0 4px rgba(255,190,60,.9)); opacity: .8; animation: twinkle 2.6s ease-in-out infinite; }
.lost svg { display: block; width: 100%; height: 100%; }
.lost::after { content: ""; position: absolute; inset: -10px; }   /* bigger tap target */
.lost:hover, .lost:focus-visible { opacity: 1; transform: scale(1.3); }
.lost.got { animation: lostgot .35s steps(3) forwards; }
.lp-br { right: 8px; bottom: 8px; } .lp-tr { right: 10px; top: 10px; } .lp-r { right: 0; top: 50%; margin-top: -8px; }
.foot .cheat { position: relative; display: inline-block; padding-right: 26px; }
@keyframes twinkle { 50% { opacity: .35; transform: scale(.85); } }
@keyframes lostgot { to { opacity: 0; transform: scale(2.2); } }
.lost-count { color: var(--amber); font: 20px var(--term); margin: 18px 0 0; text-transform: uppercase; }
.lost-count b { font-weight: 400; color: #ffe07a; }
html.gold .lost-count { color: #ffe07a; text-shadow: 0 0 10px rgba(255,220,120,.7); }

/* Enquiry: the message box glows when it's ready to send */
.brief-out.ready { box-shadow: 6px 6px 0 rgba(0,0,0,.5), 0 0 0 2px var(--o), 0 0 30px rgba(253,144,7,.35); animation: readyglow 1.8s ease-in-out infinite; }
@keyframes readyglow { 50% { box-shadow: 6px 6px 0 rgba(0,0,0,.5), 0 0 0 2px var(--o), 0 0 10px rgba(253,144,7,.15); } }

/* Golden pixel and seasons on the riding pixel */
html.gold .buddy-body { filter: brightness(1.25) saturate(.75) drop-shadow(0 0 7px rgba(255,235,150,1)) drop-shadow(0 0 20px rgba(255,200,80,.7)); }
html.season-cny .buddy-body { filter: hue-rotate(-22deg) saturate(1.3) drop-shadow(0 0 6px rgba(255,80,40,.9)) drop-shadow(0 0 18px rgba(230,30,20,.6)); }
html.season-xmas .buddy::before { content: ""; position: absolute; left: 30%; top: -42%; width: 46%; height: 55%; background: #b8100f;
  clip-path: polygon(50% 0, 100% 100%, 0 100%); transform: rotate(-16deg); z-index: 1; }
html.season-xmas .buddy::after { content: ""; position: absolute; left: 24%; top: 6%; width: 58%; height: 14%; background: #f3efe8; border-radius: 3px; transform: rotate(-16deg); z-index: 1; }
.buddy { position: relative; }
@media (prefers-reduced-motion: reduce) { .lost, .brief-out.ready { animation: none; } }

/* ---------- Plain label, arcade alter ego on hover ---------- */
.has-arc { display: inline-grid; place-items: center; }
.has-arc > .lbl, .has-arc > .arc { grid-area: 1 / 1; white-space: nowrap; }
.has-arc > .arc { visibility: hidden; text-shadow: var(--glow); }
.has-arc:hover > .lbl, .has-arc:focus-visible > .lbl { visibility: hidden; }
.has-arc:hover > .arc, .has-arc:focus-visible > .arc { visibility: visible; animation: arcflick .28s steps(4) 1, blink 1s steps(1) .28s infinite; }
.btn.has-arc:not(.btn-ghost):hover > .arc { text-shadow: none; }
.links a.has-arc:hover > .arc { color: var(--amber); }
@keyframes arcflick { 0% { opacity: 0; clip-path: inset(0 100% 0 0); } 50% { opacity: 1; clip-path: inset(0 40% 0 0); } 75% { opacity: .4; } 100% { opacity: 1; clip-path: inset(0); } }
.credit { position: fixed; z-index: 60; pointer-events: none; font: 14px var(--arc); color: #ffe07a; text-shadow: var(--glow); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .has-arc:hover > .arc, .has-arc:focus-visible > .arc { animation: none; } }
@media (hover: none) { .has-arc > .arc { display: none; } .has-arc:hover > .lbl { visibility: visible; } }

/* ---------- Project form drawer ---------- */
html.drawer-open { overflow: hidden; }
.drawer { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(560px, 100vw); max-width: 100vw; height: 100dvh; max-height: 100dvh;
  padding: 0; border: 0; border-left: 2px solid var(--amber); background: #0f0a06; color: var(--text); overflow-y: auto; overscroll-behavior: contain;
  box-shadow: -10px 0 0 rgba(0,0,0,.35), -30px 0 60px rgba(253,144,7,.12); animation: drawerin .26s steps(6) both; }
.drawer::backdrop { background: rgba(8,5,2,.72); backdrop-filter: blur(2px); animation: fadein .2s steps(4) both; }
.drawer.closing { animation: drawerout .18s steps(4) both; }
.drawer.closing::backdrop { animation: fadeout .18s steps(4) both; }
@keyframes drawerin { from { transform: translateX(100%); } }
@keyframes drawerout { to { transform: translateX(100%); } }
@keyframes fadein { from { opacity: 0; } }
@keyframes fadeout { to { opacity: 0; } }
.drawer-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 18px 22px 14px; background: #0f0a06; border-bottom: 1px solid var(--line); }
.drawer-head .tag { margin: 0 0 4px; font-size: 19px; }
.drawer-head h2 { font-size: clamp(26px, 4vw, 34px); }
.drawer-x { flex: none; width: 44px; height: 44px; background: none; border: 1px solid var(--line); color: var(--amber); font-size: 20px; cursor: pointer; }
.drawer-x:hover { border-color: var(--amber); }
.drawer-lede { margin: 14px 22px 0; color: var(--mute); font-size: 15px; }
.drawer-body { padding: 18px 22px 28px; }
.drawer .brief-fields { grid-template-columns: 1fr; }
.drawer .brief-out { box-shadow: none; }
.brief-slot.away::before { content: "The project form is open on the right."; display: block; padding: 18px; border: 1px dashed var(--line); color: var(--mute); font: 20px var(--term); text-transform: uppercase; }
@media (max-width: 600px) { .drawer { width: 100vw; border-left: 0; } .drawer-head { padding: 14px 16px 12px; } .drawer-lede, .drawer-body { padding-left: 16px; padding-right: 16px; } .drawer-lede { margin-left: 0; margin-right: 0; } }
@media (prefers-reduced-motion: reduce) { .drawer, .drawer::backdrop { animation: none; } }

/* ---------- Story mode ---------- */
.story { list-style: none; margin: 0; padding: 0 0 0 0; position: relative; display: grid; gap: 48px; }
.story::before { content: ""; position: absolute; left: 31px; top: 10px; bottom: 10px; width: 2px;
  background: repeating-linear-gradient(to bottom, rgba(253,144,7,.55) 0 8px, transparent 8px 13px); }
.st { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(0, .9fr); gap: 22px; align-items: start; }
.st:not(:has(.st-fig)) { grid-template-columns: 64px minmax(0, 1fr); }
.st-badge { position: relative; z-index: 1; width: 64px; height: 64px; display: grid; place-items: center; align-content: center; background: #140d06;
  border: 2px solid var(--o); color: var(--o); font: 22px/1 var(--arc); text-shadow: var(--glow); box-shadow: 4px 4px 0 rgba(0,0,0,.5); }
.st-badge span { font: 16px/1 var(--term); color: var(--amber); margin-bottom: 4px; }
.st-main { padding: 4px 0 6px; }
.st-years { margin: 0 0 4px; color: var(--amber); font: 20px var(--term); text-transform: uppercase; }
.st h3 { font-size: clamp(22px, 2.6vw, 32px); margin-bottom: 10px; }
.st p { margin: 0; color: #d3c8b8; max-width: 58ch; }
.st-brands { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.st-brands li { border: 1px solid var(--line); background: var(--panel); padding: 2px 10px; font: 19px var(--term); color: var(--text); text-transform: uppercase; }
.st-fig { margin: 0; border: 1px solid var(--line); background: #211a13; }
.st-fig img { width: 100%; height: auto; max-height: 300px; object-fit: contain; }
.st-cta .st-badge { background: var(--o); color: #170e05; text-shadow: none; animation: blink 1.2s steps(1) infinite; }
.st-cta .btn { margin-top: 16px; }
@media (max-width: 760px) {
  .st, .st:not(:has(.st-fig)) { grid-template-columns: 48px minmax(0, 1fr); gap: 14px; }
  .st-fig { grid-column: 2; }
  .st-badge { width: 48px; height: 48px; font-size: 16px; } .st-badge span { font-size: 13px; }
  .story::before { left: 23px; }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .st { animation: stin steps(6) both; animation-timeline: view(); animation-range: entry 5% cover 30%; }
    @keyframes stin { from { opacity: 0; transform: translateX(-40px); } }
  }
}
@media (prefers-reduced-motion: reduce) { .st-cta .st-badge { animation: none; } }

/* ---------- Selected work: level-select screen ---------- */
.lvsel { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 22px; align-items: start; }
.lvsel > * { min-width: 0; }
.lvsel-list { display: flex; flex-direction: column; gap: 10px; position: sticky; top: 90px; }
.lv-btn { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center; text-align: left;
  padding: 14px 16px; background: var(--panel); border: 2px solid var(--line); color: var(--text); cursor: pointer;
  box-shadow: 4px 4px 0 rgba(0,0,0,.45); transition: transform .08s steps(2), border-color .08s steps(2); }
.lv-n { grid-row: 1 / 3; font: 22px var(--arc); color: var(--mute); }
.lv-name { font: 800 20px/1.1 var(--sans); font-stretch: 112%; }
.lv-sub { font: 17px var(--term); color: var(--mute); text-transform: uppercase; }
.lv-btn:hover { border-color: var(--key); transform: translate(-2px, -2px); }
.lv-btn[aria-selected="true"] { border-color: color-mix(in srgb, var(--key) 65%, #ffb547); background: linear-gradient(90deg, color-mix(in srgb, var(--key) 30%, #17110c), #17110c 85%); }
.lv-btn[aria-selected="true"] .lv-n { color: #fff; text-shadow: 0 0 10px var(--key); }
.lv-btn[aria-selected="true"]::after { content: "◄"; position: absolute; right: 12px; color: var(--amber); font: 22px var(--term); animation: blink .8s steps(1) infinite; }
.lv-btn { position: relative; }
.lvsel-hint { margin: 4px 0 0; color: var(--mute); font: 18px var(--term); text-transform: uppercase; }
.lvsel-stage { --key: #fd9007; --glowc: color-mix(in srgb, var(--key) 65%, #ffb547); position: relative; border: 2px solid var(--glowc); background: #0d0906;
  box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 0 70px color-mix(in srgb, var(--glowc) 40%, transparent), 8px 8px 0 rgba(0,0,0,.5);
  transition: border-color .3s steps(4), box-shadow .3s steps(4); }
.lv-screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  background: radial-gradient(70% 80% at 50% 45%, color-mix(in srgb, var(--key) 42%, #1a120b), #0b0705 80%); }
.lv-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,.18) 0 1px, transparent 1px 3px); mix-blend-mode: multiply; }
.lv-img, .lv-pix { position: absolute; inset: 5%; width: 90%; height: 90%; object-fit: contain; filter: drop-shadow(0 18px 30px rgba(0,0,0,.55)); }
.lv-img { transition: opacity .12s steps(2); }
.lv-pix { image-rendering: pixelated; }
.lv-hud { position: absolute; left: 14px; top: 12px; z-index: 2; padding: 4px 10px; background: rgba(10,6,3,.75); border: 1px solid var(--key);
  color: #fff; font: 12px var(--arc); text-shadow: 0 0 8px var(--key); }
.lv-kind { position: absolute; right: 12px; bottom: 10px; z-index: 2; padding: 2px 8px; background: rgba(10,6,3,.7); color: var(--mute); font: 17px var(--term); text-transform: uppercase; }
.lv-thumbs { display: flex; gap: 8px; padding: 10px 12px; overflow-x: auto; border-top: 1px solid var(--line); background: #110b07; scrollbar-width: thin; }
.lv-th { flex: none; width: 74px; height: 56px; padding: 0; border: 2px solid var(--line); background: #1d150e; cursor: pointer; opacity: .6; }
.lv-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lv-th:hover, .lv-th[aria-current="true"] { opacity: 1; border-color: var(--key); }
.lv-info { padding: 18px 22px 24px; display: flex; flex-direction: column; gap: 10px; }
.lv-info h3 { font-size: clamp(28px, 3.4vw, 44px); }
.lv-info .ttl { margin: 0; font-weight: 600; font-size: 18px; }
.lv-info p { margin: 0; color: #d3c8b8; max-width: 68ch; }
.pu-label { color: var(--amber) !important; font: 18px var(--term) !important; text-transform: uppercase; margin-top: 4px !important; }
.chips.pu li { border-color: var(--key); color: #fff; background: color-mix(in srgb, var(--key) 22%, transparent); box-shadow: 0 0 10px color-mix(in srgb, var(--key) 30%, transparent); }
.chips.pu li::before { content: "+ "; color: var(--amber); }
.lv-info .acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
@media (max-width: 860px) {
  .lvsel { grid-template-columns: 1fr; }
  .lvsel-list { position: static; flex-direction: row; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; }
  .lv-btn { flex: none; min-width: 210px; scroll-snap-align: start; }
  .lvsel-hint { display: none; }
  .lv-screen { aspect-ratio: 4 / 3; }
}
@media (prefers-reduced-motion: reduce) { .lv-btn[aria-selected="true"]::after { animation: none; } }

/* ---------- Big-brand archive: collector cards ---------- */
.bonus { gap: 18px; perspective: 1000px; }
.ccard { --key: #fd9007; --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%; }
.cc-in { position: relative; height: 100%; display: flex; flex-direction: column; padding: 8px; border-radius: 10px; overflow: hidden;
  background: linear-gradient(160deg, color-mix(in srgb, var(--key) 85%, #fff 15%), color-mix(in srgb, var(--key) 70%, #000 30%));
  box-shadow: 0 0 0 2px rgba(255,255,255,.12) inset, 6px 8px 0 rgba(0,0,0,.45);
  transform: rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d; transition: transform .12s ease-out; }
.cc-top { display: flex; justify-content: space-between; align-items: center; padding: 2px 4px 6px; font: 16px var(--term); color: #fff; text-transform: uppercase; text-shadow: 0 1px 0 rgba(0,0,0,.4); }
.cc-rar { color: #fff6c8; }
.cc-art { aspect-ratio: 1; display: grid; place-items: center; padding: 12px; border-radius: 6px;
  background: radial-gradient(circle at 50% 40%, #fbf6ec, #e9dfcc); box-shadow: 0 0 0 2px rgba(0,0,0,.25) inset; }
.cc-art img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; filter: saturate(1.12) contrast(1.05); }
.cc-body { padding: 10px 6px 4px; color: #fff; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.cc-body h3 { font-size: 19px; color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.35); }
.cc-body p { margin: 0; font-size: 13.5px; line-height: 1.4; color: rgba(255,255,255,.88); }
.cc-body .cc-kind { margin-top: auto; padding-top: 6px; font: 15px var(--term); text-transform: uppercase; color: rgba(255,255,255,.7); }
.cc-shine { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .2s; mix-blend-mode: color-dodge;
  background: radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.55), transparent 42%),
              linear-gradient(115deg, transparent 20%, rgba(255,0,170,.25) 35%, rgba(0,220,255,.25) 50%, rgba(255,240,0,.25) 65%, transparent 80%);
  background-size: 100% 100%, 220% 220%; background-position: center, var(--mx) var(--my); }
.ccard:hover .cc-shine { opacity: 1; }
.ccard:hover .cc-in { box-shadow: 0 0 0 2px rgba(255,255,255,.25) inset, 10px 14px 0 rgba(0,0,0,.4), 0 0 30px color-mix(in srgb, var(--key) 45%, transparent); }
@media (max-width: 520px) { .cc-body h3 { font-size: 16px; } .cc-body p { font-size: 12.5px; } .cc-top { font-size: 13px; } }

/* Story images on the same cream card face */
.st-fig { background: radial-gradient(circle at 50% 40%, #fbf6ec, #e9dfcc); border: 0; border-radius: 6px; padding: 10px; box-shadow: 6px 6px 0 rgba(0,0,0,.45); }
.st-fig img { mix-blend-mode: multiply; }

/* ---------- Story flashbacks: projects dealt like cards ---------- */
.bonus-sub { margin: -8px 0 18px; color: var(--mute); font: 20px var(--term); text-transform: uppercase; }
.st-note { margin-top: 8px !important; color: var(--mute) !important; font: 17px var(--term) !important; text-transform: uppercase; }
.st-fig { position: relative; aspect-ratio: 4 / 3; min-height: 0; padding: 0 !important; overflow: visible; }
.st-fig .st-hero, .st-fig .st-frame { position: absolute; inset: 14px; width: calc(100% - 28px); height: calc(100% - 28px); max-height: none; object-fit: contain; mix-blend-mode: multiply; }
.st-fig .st-hero { transition: opacity .25s ease; }
.st-fig .st-frame { opacity: 0; pointer-events: none; }
.st-fig.flashing .st-hero { opacity: 0; }
.st-fig.flashing .st-frame { opacity: 1; }
.st-fig { background: #f3ecdf; border-radius: 6px; }
.st-frame.hit { animation: deal .32s cubic-bezier(.2,.8,.2,1) 1; }
@keyframes deal { from { opacity: .45; transform: translate(22px, 8px) rotate(3deg) scale(.97); } to { opacity: 1; transform: none; } }
.st-fig.flashing::before, .st-fig.flashing::after { content: ""; position: absolute; inset: 0; border-radius: 6px; background: #efe6d4; z-index: -1; box-shadow: 4px 4px 0 rgba(0,0,0,.35); }
.st-fig.flashing::before { transform: rotate(-3deg) translate(-6px, 4px); }
.st-fig.flashing::after { transform: rotate(2.5deg) translate(6px, 6px); background: #e6dcc6; }
.fb-hud { position: absolute; left: 12px; top: -12px; z-index: 3; padding: 3px 10px; background: var(--o); color: #170e05; font: 12px var(--arc); box-shadow: 3px 3px 0 rgba(0,0,0,.4); opacity: 0; transition: opacity .2s; }
.st-fig.flashing .fb-hud, .st-fig.done .fb-hud { opacity: 1; }
.fb-replay { position: absolute; right: 12px; bottom: -14px; z-index: 3; padding: 3px 10px; background: #140d06; border: 2px solid var(--o); color: var(--amber);
  font: 18px var(--term); text-transform: uppercase; cursor: pointer; opacity: 0; transition: opacity .15s; }
.st-fig.done .fb-replay, .st-fig:hover .fb-replay, .fb-replay:focus-visible { opacity: 1; }
.st-fig.flashing .fb-replay { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .fb-replay { opacity: 1; } .st-frame.hit { animation: none; } }

/* ---------- Household names: arcade character select ---------- */
.bonus.csel, .csel { --key: #fd9007; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 26px; align-items: start; perspective: none; }
.csel > * { min-width: 0; }
.csel-title { margin: 0 0 14px; font: 16px var(--arc); color: #ffe07a; text-shadow: var(--glow); }
.csel-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.cs-tile { position: relative; aspect-ratio: 1; display: grid; place-items: center; padding: 14px; cursor: pointer; border: 2px solid #3a2a18; border-radius: 4px;
  background: linear-gradient(160deg, #241810, #120b06); box-shadow: inset 0 0 0 2px rgba(0,0,0,.4), 4px 4px 0 rgba(0,0,0,.45); transition: transform .12s steps(2), border-color .12s steps(2), background .12s steps(2); }
.cs-tile img { max-width: 100%; max-height: 62%; object-fit: contain; filter: grayscale(.85) brightness(.75); transition: filter .15s steps(3); }
.cs-tile b { font: 800 clamp(13px, 1.3vw, 17px)/1.05 var(--sans); font-stretch: 115%; color: rgba(255,240,220,.55); text-transform: uppercase; text-align: center; }
.cs-p1 { position: absolute; left: -2px; top: -12px; padding: 1px 6px; background: var(--key); color: #fff; font: 11px var(--arc); opacity: 0; box-shadow: 2px 2px 0 rgba(0,0,0,.5); }
.cs-tile:hover, .cs-tile[aria-selected="true"] { transform: translate(-2px, -3px); border-color: var(--key); background: #f6efe1; }
.cs-tile[aria-selected="true"] { box-shadow: 0 0 0 3px var(--key), 0 0 26px color-mix(in srgb, var(--key) 45%, transparent), 4px 4px 0 rgba(0,0,0,.45); }
.cs-tile[aria-selected="true"] img, .cs-tile:hover img { filter: none; }
.cs-tile[aria-selected="true"] b, .cs-tile:hover b { color: #2a1a0a; }
.cs-tile[aria-selected="true"] .cs-p1 { opacity: 1; animation: blink .8s steps(1) infinite; }
.cs-tile:focus-visible { outline: none; }
.csel-hint { margin: 14px 0 0; color: var(--mute); font: 18px var(--term); text-transform: uppercase; }
.csel-card { border: 2px solid var(--key); border-radius: 6px; overflow: hidden; background: #130c07;
  box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 0 60px color-mix(in srgb, var(--key) 22%, transparent), 8px 8px 0 rgba(0,0,0,.5); transition: border-color .2s; }
.cs-stage { position: relative; aspect-ratio: 16 / 10; display: grid; place-items: center; padding: 22px;
  background: radial-gradient(70% 70% at 50% 45%, #fbf6ec, #e6dccb); }
.cs-stage::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: var(--key); }
.cs-art { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; filter: drop-shadow(0 14px 18px rgba(0,0,0,.18)); }
.csel-card.swap .cs-art { animation: csin .35s cubic-bezier(.2,.8,.2,1); }
@keyframes csin { from { opacity: 0; transform: translateX(30px) scale(.96); } to { opacity: 1; transform: none; } }
.cs-era { position: absolute; left: 12px; top: 12px; padding: 3px 9px; background: #140d06; color: var(--amber); font: 17px var(--term); text-transform: uppercase; }
.cs-info { padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 10px; }
.cs-name { margin: 0; font: 800 clamp(28px, 3.4vw, 42px)/1 var(--sans); font-stretch: 115%; }
.cs-title { margin: 0; font-weight: 600; color: #e9dfcf; }
.cs-special { margin: 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cs-special span { padding: 2px 8px; background: var(--key); color: #fff; font: 11px var(--arc); }
.cs-special b { font: 22px var(--term); color: #ffe07a; font-weight: 400; text-transform: uppercase; text-shadow: var(--glow); }
.cs-kinds { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 5px; }
.cs-kinds li { display: grid; grid-template-columns: 150px repeat(5, 14px); gap: 4px; align-items: center; color: var(--mute); font: 17px var(--term); text-transform: uppercase; }
.cs-kinds i { height: 10px; background: #2b1e12; }
.cs-kinds li.on { color: var(--text); }
.cs-kinds li.on i { background: var(--key); box-shadow: 0 0 6px color-mix(in srgb, var(--key) 60%, transparent); }
.cs-line { margin: 0; color: #d3c8b8; font-size: 15px; }
.cs-vs { position: absolute; inset: -20px; z-index: 20; display: none; place-items: center; align-content: center; gap: 6px; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--key) 55%, transparent), rgba(10,6,3,.85) 70%); text-align: center; }
.cs-vs.go { display: grid; animation: vsout 1.3s steps(8) forwards; }
.cs-vs span { font: clamp(22px, 4vw, 44px) var(--arc); color: #fff; text-shadow: 4px 4px 0 #000, 0 0 20px var(--key); }
.cs-vs .vs-x { color: #ffe07a; font-size: clamp(30px, 5vw, 60px); }
@keyframes vsout { 0% { opacity: 0; transform: scale(1.3); } 15% { opacity: 1; transform: none; } 75% { opacity: 1; } 100% { opacity: 0; } }
@media (max-width: 860px) { .csel { grid-template-columns: 1fr; } .cs-kinds li { grid-template-columns: 130px repeat(5, 12px); } }
@media (prefers-reduced-motion: reduce) { .cs-tile[aria-selected="true"] .cs-p1 { animation: none; } .csel-card.swap .cs-art { animation: none; } }

/* ---------- Hall of fame: light-up logo wall ---------- */
.wall-hud { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 0 0 18px; padding: 10px 14px; background: #100a06; border: 1px solid var(--line); position: relative; }
.wall-hud [data-wall-score] { font: 16px var(--arc); color: var(--o); text-shadow: var(--glow); }
.wall-h { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 26px 0 12px; font-size: 22px; }
.wall-h small { font: 18px var(--term); color: var(--mute); text-transform: uppercase; font-weight: 400; }
.wall-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 1100px) { .wall-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.wt-tag { position: absolute; top: 4px; left: 4px; font: 13px/1 var(--term); font-style: normal; text-transform: uppercase; color: #1a0f05; background: var(--amber); padding: 2px 4px 1px; letter-spacing: .03em; opacity: .85; }
.wall-key { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; color: var(--mute); font-size: 14px; }
.wall-key .wt-tag { position: static; }
.wt { position: relative; height: 84px; display: grid; place-items: center; padding: 12px 10px; cursor: pointer; border: 1px solid var(--line); background: #120c07;
  transition: background .18s steps(3), transform .18s steps(3), box-shadow .18s steps(3), border-color .18s steps(3); }
.wt img { max-width: 100%; max-height: 64px; object-fit: contain; filter: grayscale(1) sepia(1) saturate(4) hue-rotate(-14deg) brightness(.75) contrast(1.1); opacity: .55; transition: filter .25s steps(4), opacity .25s steps(4); }
.wt-word span { font: 800 19px/1.1 var(--sans); font-stretch: 115%; text-align: center; color: rgba(255,181,71,.45); text-transform: uppercase; letter-spacing: .02em; transition: color .25s steps(4); }
.wt.on { background: #f6efe1; border-color: var(--amber); box-shadow: 0 0 0 2px rgba(253,144,7,.3), 0 0 22px rgba(253,144,7,.25); }
.wt.on img { filter: none; opacity: 1; }
.wt.on.wt-word span { color: #2a1a0a; }
.wt:hover, .wt:focus-visible { transform: translateY(-4px); outline: none; }
.wt:focus-visible { box-shadow: 0 0 0 3px var(--amber); }
.credits { margin-top: 28px; }
.credits summary { cursor: pointer; color: var(--amber); font: 20px var(--term); text-transform: uppercase; }
.credits .fame { margin-top: 12px; }
@media (max-width: 640px) { .wall-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } .wall-grid .wt { height: 64px; padding: 8px 6px; } .wall-grid .wt img { max-height: 40px; } .wt-tag { font-size: 10px; } }
.wt-word span { font-size: clamp(13px, 1.25vw, 17px); overflow-wrap: anywhere; hyphens: auto; }
.wt img { max-height: 52px; }
.cp-idle::before { content: ""; display: block; width: 64px; height: 64px; margin: 0 auto 16px; background: url("assets/brand/fap-mark.svg") center / contain no-repeat; filter: drop-shadow(0 0 14px rgba(253,144,7,.6)); animation: buddybob 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .cp-idle::before { animation: none; } }
/* character select: tiles are always cream so every logo reads; unselected ones are dimmed */
.cs-tile { background: #e8dfcf; border-color: #3a2a18; }
.cs-tile img { filter: grayscale(.6); opacity: .55; }
.cs-tile b { color: rgba(42,26,10,.55); font-size: clamp(12px, 1.05vw, 15px); overflow-wrap: anywhere; }
.cs-tile:hover, .cs-tile[aria-selected="true"] { background: #fbf6ec; }
.cs-tile[aria-selected="true"] img, .cs-tile:hover img { filter: none; opacity: 1; }

/* ---------- Price list: pick a cartridge (10 Oct 2026) ---------- */
.m-link { align-self: flex-start; font: 20px var(--term); color: var(--c, var(--amber)); text-transform: uppercase; text-decoration: none; letter-spacing: .03em; margin-top: -4px; }
.m-link:hover { text-decoration: underline; }
.carts { --c: var(--o); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(18px, 3vw, 36px); align-items: start; }
.carts > * { min-width: 0; }
.cart-rack { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding-top: 8px; }
.cart {
  --c: var(--o); position: relative; display: flex; flex-direction: column; text-align: left; padding: 16px 0 0; border: 0; cursor: pointer; color: #1a0f05;
  background: linear-gradient(#2a221c, #1a1410);
  clip-path: polygon(0 12px, 12px 0, 28% 0, 31% 7px, 69% 7px, 72% 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
  transition: transform .18s steps(3), filter .18s;
}
.cart::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,255,255,.06), transparent 30%, transparent 70%, rgba(0,0,0,.25)); pointer-events: none; }
.cart-label { position: relative; margin: 0 12px; padding: 12px 12px 14px; min-height: 132px; display: flex; flex-direction: column; gap: 4px; border-radius: 3px;
  background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, #fff 35%, var(--c)), var(--c) 55%, color-mix(in srgb, #000 18%, var(--c))); box-shadow: inset 0 0 0 2px rgba(0,0,0,.18); }
.cart-tag { font: 9px/1.3 var(--arc); text-transform: uppercase; opacity: .75; }
.cart-name { font: 800 clamp(17px, 1.6vw, 21px)/1.05 var(--sans); font-stretch: 112%; }
.cart-price { margin-top: auto; font: 30px/1 var(--term); }
.cart-time { font: 17px/1 var(--term); text-transform: uppercase; opacity: .7; }
.cart-ridges { display: block; height: 20px; margin: 10px 12px 12px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.1) 0 3px, transparent 3px 8px); }
.cart:hover { transform: translateY(-3px); }
.cart[aria-checked="true"] { transform: translateY(-8px); filter: drop-shadow(0 0 14px color-mix(in srgb, var(--c) 70%, transparent)); }
.cart[aria-checked="true"]::after { content: "▶ LOADED"; position: absolute; right: 14px; bottom: 9px; font: 15px var(--term); color: var(--c); }
.cart:focus-visible { outline: 2px dashed var(--amber); outline-offset: 4px; }
.cart-console { position: sticky; top: 92px; padding: 22px; border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); background: radial-gradient(90% 60% at 100% 0%, color-mix(in srgb, var(--c) 10%, transparent), transparent 60%), var(--panel);
  box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 20px 60px -30px var(--c); }
.cc-loaded { margin: 0; font: 18px var(--term); color: var(--c); text-transform: uppercase; animation: blink 1s steps(1) infinite; }
.cc-name { font-size: 28px; margin: 2px 0 2px; }
.cc-time { margin: 0 0 12px; font: 19px var(--term); color: var(--amber); text-transform: uppercase; }
.cc-inc { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 5px; color: #d3c8b8; font-size: 15px; }
.cc-inc li { padding-left: 22px; position: relative; }
.cc-inc li::before { content: "✓"; position: absolute; left: 0; color: var(--c); }
.cc-h { margin: 18px 0 8px; font: 19px var(--term); color: var(--mute); text-transform: uppercase; font-weight: 400; letter-spacing: .04em; }
.cc-addons { display: grid; gap: 6px; }
.ca { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 10px; background: rgba(0,0,0,.25); border: 1px solid var(--line); }
.ca-l { font-size: 15px; display: flex; flex-direction: column; }
.ca-l small { font: 16px var(--term); color: var(--mute); }
.ca-step { display: flex; align-items: center; gap: 4px; }
.ca-step button { width: 30px; height: 30px; border: 1px solid var(--line); background: #0b0806; color: var(--text); font: 20px var(--term); cursor: pointer; }
.ca-step button:hover { border-color: var(--c); color: var(--c); }
.ca-step output { min-width: 34px; text-align: center; font: 22px var(--term); color: var(--c); }
.ca-sw { width: 46px; height: 26px; border: 1px solid var(--line); background: #0b0806; padding: 3px; cursor: pointer; position: relative; }
.ca-sw i { display: block; width: 18px; height: 18px; background: var(--mute); transition: transform .12s steps(2), background .12s; }
.ca-sw[aria-checked="true"] { border-color: var(--c); }
.ca-sw[aria-checked="true"] i { transform: translateX(20px); background: var(--c); box-shadow: 0 0 8px var(--c); }
.cc-care { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.cc-care button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 10px; border: 1px solid var(--line); background: rgba(0,0,0,.25); color: var(--text); cursor: pointer; text-align: left; }
.cc-care b { font: 700 14px var(--sans); }
.cc-care span { font: 17px var(--term); color: var(--mute); }
.cc-care button[aria-checked="true"] { border-color: var(--c); box-shadow: inset 0 0 0 1px var(--c); }
.cc-care button[aria-checked="true"] span { color: var(--c); }
.cc-care-desc { margin: 6px 0 0; font-size: 14px; color: var(--mute); min-height: 1.4em; }
.cc-total { margin: 18px 0 14px; padding: 14px 16px; border: 2px dashed color-mix(in srgb, var(--c) 60%, transparent); display: grid; gap: 2px; background: #0b0806; }
.cc-credits { font: 11px var(--arc); color: var(--mute); text-transform: uppercase; }
.cc-sum { font: clamp(40px, 4.6vw, 56px)/1 var(--term); color: var(--c); text-shadow: 0 0 14px color-mix(in srgb, var(--c) 55%, transparent); }
.cc-monthly { font: 18px var(--term); color: var(--amber); text-transform: uppercase; }
.cc-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.cc-note { margin: 12px 0 0; font-size: 13px; color: var(--mute); }
@media (max-width: 900px) {
  .carts { grid-template-columns: 1fr; }
  .cart-console { position: static; }
}
@media (max-width: 520px) {
  .cart-rack { gap: 10px; }
  .cart-label { min-height: 118px; padding: 10px; }
  .cart-price { font-size: 25px; }
  .cc-care { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cart-console { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) { .cc-loaded { animation: none; } }
/* Logo wall: unlit tiles are cream logos under an amber "screen-off" filter, so black logos stay visible */
.wall-grid .wt { background: #efe6d6; }
.wall-grid .wt:not(.on) { filter: sepia(1) saturate(2.4) hue-rotate(-12deg) brightness(.36) contrast(1.15); }
.wall-grid .wt img, .wall-grid .wt.on img { filter: none; opacity: 1; }
.wall-grid .wt.on { filter: none; background: #f6efe1; }
@media (min-width: 1201px) { .m-bar i { width: 6px; } .m-bar { gap: 1.5px; } .m-stat dt { font-size: 17px; } }

/* ---------- Mode cards: real-work slideshow on top (10 Oct 2026) ---------- */
.m-shots { position: relative; margin: -24px -24px 4px; aspect-ratio: 16 / 10; overflow: hidden; background: #efe6d6; border-bottom: 1px solid color-mix(in srgb, var(--c) 45%, transparent); cursor: pointer; }
.m-shot { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .35s steps(5); }
.m-shot.on { opacity: 1; }
.m-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.m-shot.fit img { object-fit: contain; padding: 10px; }
.m-shot figcaption { position: absolute; left: 10px; bottom: 10px; max-width: calc(100% - 90px); padding: 3px 8px 2px; background: rgba(11,8,6,.88); color: var(--text); font: 16px/1.1 var(--term); text-transform: uppercase; letter-spacing: .03em; border-left: 3px solid var(--c); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-dots { position: absolute; right: 10px; bottom: 14px; display: flex; gap: 4px; z-index: 2; }
.m-dots i { width: 7px; height: 7px; background: rgba(11,8,6,.45); }
.m-dots i.on { background: var(--c); box-shadow: 0 0 6px var(--c); }
.m-shots .m-sel { top: 10px; right: 10px; padding: 3px 6px 2px; background: rgba(11,8,6,.9); }
.mode:hover .m-shot.on img { transform: scale(1.03); transition: transform .6s ease; }
@media (prefers-reduced-motion: reduce) { .m-shot { transition: none; } .mode:hover .m-shot.on img { transform: none; } }
.m-shot.dark { background: #0b0806; } .m-shot.dark img { padding: 4px; }

/* Story LV2: "Player 1 ready" card with the first logo and the clients who followed */
.st-fig.st-start { aspect-ratio: auto; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 34px 24px 22px !important; text-align: center; }
.st-start .fb-hud { opacity: 1; }
.st-start-logo { position: static !important; width: min(70%, 360px) !important; height: auto !important; mix-blend-mode: multiply; }
.st-start figcaption { font: 15px/1.3 var(--term); color: #6b5a45; text-transform: uppercase; letter-spacing: .03em; }
.st-start-p1 { margin: 4px 0 2px; font: 13px var(--arc); color: #c46a00; animation: blink 1s steps(1) infinite; }
.st-start-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px 18px; padding-top: 12px; border-top: 1px dashed rgba(60,40,20,.25); width: 100%; }
.st-start-row span { font: 15px var(--term); color: #6b5a45; text-transform: uppercase; }
.st-start-row img { height: 34px; width: auto; max-width: 110px; object-fit: contain; }
@media (prefers-reduced-motion: reduce) { .st-start-p1 { animation: none; } }

/* ---------- Price list, round 2: real cartridges, legible prices, a proper console (10 Oct 2026) ---------- */
.cart-left { display: grid; gap: 22px; align-content: start; }
.cart-rack { gap: 18px; }
.cart { padding-top: 0; background: linear-gradient(170deg, #34291f, #1b140f 60%, #120d09); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.cart-top { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px 8px; font: 8px var(--arc); color: rgba(255,255,255,.22); text-shadow: 0 -1px 0 rgba(0,0,0,.6); letter-spacing: .1em; }
.cart-top b { font-weight: 400; color: rgba(255,255,255,.3); }
.cart-label { min-height: 168px; padding: 14px 14px 14px; gap: 2px; border-radius: 4px; overflow: hidden;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.16), inset 0 -40px 60px -40px rgba(0,0,0,.25); }
.cart-label::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.28) 48%, transparent 60%); background-size: 250% 100%; background-position: 130% 0; transition: background-position .6s ease; }
.cart:hover .cart-label::after, .cart[aria-checked="true"] .cart-label::after { background-position: -40% 0; }
.cart-icon { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; opacity: .9; }
.cart-icon .m-icon { width: 34px; height: 34px; filter: none; }
.cart-icon .m-icon .pa { fill: #1a0f05; } .cart-icon .m-icon .pb { fill: #fff8ec; } .cart-icon .m-icon .pd { fill: rgba(26,15,5,.45); }
.cart-tag { font: 8px/1.4 var(--arc); letter-spacing: .06em; opacity: .7; margin-bottom: 4px; }
.cart-name { font: 800 clamp(18px, 1.7vw, 22px)/1.05 var(--sans); font-stretch: 115%; max-width: 85%; }
.cart-price { margin-top: auto; padding-top: 10px; font: 900 clamp(30px, 3vw, 40px)/1 var(--sans); font-stretch: 125%; letter-spacing: -.02em; font-variant-numeric: tabular-nums; display: flex; align-items: flex-start; gap: 2px; }
.cart-price small { font-size: .42em; font-weight: 800; letter-spacing: 0; margin-top: .22em; opacity: .8; }
.cart-price em { font: 700 12px var(--sans); font-style: normal; text-transform: uppercase; letter-spacing: .08em; margin: .55em 6px 0 0; opacity: .75; }
.cart-time { font: 700 11px/1 var(--sans); text-transform: uppercase; letter-spacing: .12em; opacity: .7; margin-top: 6px; }
.cart-time::before { content: "◷ "; }
.cart-ridges { display: none; }
.cart-pins { display: block; height: 20px; margin: 12px 16px 14px; background: linear-gradient(#f2d688, #b98d33 60%, #8a6623);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 7px, transparent 7px 11px); mask: repeating-linear-gradient(90deg, #000 0 7px, transparent 7px 11px); opacity: .85; }
.cart[aria-checked="true"]::after { content: "▶ IN THE SLOT"; bottom: 46px; right: 18px; font: 8px var(--arc); color: var(--c); text-shadow: 0 0 8px var(--c); }
.cart-every { padding: 18px 20px; border: 1px dashed var(--line); background: rgba(255,255,255,.02); }
.cart-every p { margin: 0 0 10px; font: 18px var(--term); color: var(--amber); text-transform: uppercase; letter-spacing: .04em; }
.cart-every ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
.cart-every li { position: relative; padding-left: 24px; font-size: 14px; color: #d3c8b8; }
.cart-every li::before { content: ""; position: absolute; left: 0; top: 4px; width: 12px; height: 12px; background: var(--o); box-shadow: 0 0 8px rgba(253,144,7,.6); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 50%); }
/* the console */
.cart-console { padding: 0 0 22px; overflow: hidden; }
.cart-console > *:not(.cc-screen) { margin-left: 22px; margin-right: 22px; }
.cc-screen { position: relative; padding: 20px 22px 18px; margin-bottom: 16px; background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--c) 22%, transparent), transparent 60%), #0b0806; border-bottom: 2px solid color-mix(in srgb, var(--c) 55%, transparent); }
.cc-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(to bottom, rgba(0,0,0,.25) 0 1px, transparent 1px 3px); }
.cc-loaded { font: 9px var(--arc); letter-spacing: .08em; }
.cc-name { font-size: clamp(26px, 2.6vw, 34px); margin: 8px 0 4px; }
.cc-time { margin: 0; font: 700 12px var(--sans); letter-spacing: .12em; color: var(--c); }
.cc-inc { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; font-size: 14px; }
.ca-l { font-size: 15px; }
.ca-l small { font: 600 12px var(--sans); color: var(--mute); letter-spacing: .02em; margin-top: 1px; }
.ca-step output { font: 800 18px var(--sans); font-variant-numeric: tabular-nums; }
.ca-step button { font: 700 16px var(--sans); }
.cc-care span { font: 600 13px var(--sans); }
.cc-total { position: relative; margin-top: 20px; padding: 16px 18px 14px; border: 0; border-radius: 6px; background: #050302;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent), inset 0 0 30px rgba(0,0,0,.9), 0 0 30px -10px var(--c); }
.cc-total::after { content: ""; position: absolute; inset: 0; border-radius: 6px; pointer-events: none; background: repeating-linear-gradient(90deg, rgba(0,0,0,.35) 0 1px, transparent 1px 3px); }
.cc-credits { font: 9px var(--arc); letter-spacing: .1em; }
.cc-sum { display: flex; align-items: flex-start; gap: 3px; font: 900 clamp(44px, 4.8vw, 60px)/1 var(--sans); font-stretch: 125%; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin: 6px 0 4px; }
.cc-sum small { font-size: .38em; margin-top: .25em; opacity: .85; }
.cc-sum em { font: 700 13px var(--sans); font-style: normal; text-transform: uppercase; letter-spacing: .08em; margin: .7em 8px 0 0; color: var(--amber); }
.cc-monthly { font: 600 13px var(--sans); letter-spacing: .04em; text-transform: none; color: var(--amber); }
@media (max-width: 520px) {
  .cart-label { min-height: 150px; padding: 12px 10px; }
  .cart-icon { width: 26px; height: 26px; top: 8px; right: 8px; } .cart-icon .m-icon { width: 26px; height: 26px; }
  .cart-price { font-size: 26px; }
  .cart-every ul, .cc-inc { grid-template-columns: 1fr; }
  .cart[aria-checked="true"]::after { display: none; }
}
.cart { align-items: stretch; }
.cart-label { align-self: stretch; margin: 0 14px; }
.cart[aria-checked="true"]::after { display: none; }
.cart[aria-checked="true"] .cart-top i::after { content: "  ▶ IN THE SLOT"; color: var(--c); text-shadow: 0 0 8px var(--c); }
.cart-price { flex-wrap: wrap; font-size: clamp(28px, 2.6vw, 38px); }
.cart-price em { flex-basis: 100%; margin: 0 0 2px; font-size: 11px; }
.cc-sum { flex-wrap: wrap; }
.cc-sum em { flex-basis: 100%; margin: 0 0 4px; }
@media (max-width: 520px) {
  .cart-price { font-size: 24px; }
  .cart[aria-checked="true"] .cart-top i::after { content: " ▶"; }
}

/* ---------- Real logo in the bar: 3D cube + Michroma wordmark, the pixel sits on the i (10 Oct 2026) ---------- */
@font-face { font-family: "Michroma"; src: url("assets/fonts/Michroma-Regular.ttf") format("truetype"); font-display: swap; }
.brand img { width: 36px; height: 40px; object-fit: contain; filter: drop-shadow(0 0 8px rgba(253,144,7,.35)); }
.word { font-family: "Michroma", var(--sans); font-weight: 400; font-stretch: normal; font-size: 16px; letter-spacing: .04em;
  background: linear-gradient(#f4f5f5, #c3cad0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.word .i { color: transparent; background: linear-gradient(#f4f5f5, #c3cad0); -webkit-background-clip: text; background-clip: text; }
.word .idot { top: .2em; width: .3em; height: .3em; margin-left: -.15em; background: none; box-shadow: none;
  background: conic-gradient(from 30deg at 50% 46%, #ffd25e 0 120deg, #e06a00 120deg 240deg, #ff9a1a 240deg 360deg);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); filter: drop-shadow(0 0 4px rgba(255,160,20,.9)); }

/* Cheeky bar logo: the pixel has hopped off the i, leaving a little pixel trail. It bobs, and drops back on hover. */
.word .idot { top: -.32em; margin-left: .02em; width: .36em; height: .36em; transform: rotate(-20deg); transition: transform .35s cubic-bezier(.3,1.6,.5,1), top .35s cubic-bezier(.3,1.6,.5,1), margin-left .35s ease; animation: dotbob 2.4s ease-in-out infinite; }
.word .i::before, .word .i::after { content: ""; position: absolute; background: #ff9300; pointer-events: none; transition: opacity .2s; }
.word .i::before { left: 34%; top: .14em; width: .1em; height: .1em; opacity: .35; }
.word .i::after { left: 58%; top: -.04em; width: .13em; height: .13em; opacity: .6; }
.brand:hover .word .idot, .brand:focus-visible .word .idot { top: .2em; margin-left: -.15em; transform: none; animation: none; }
.brand:hover .word .i::before, .brand:hover .word .i::after, .brand:focus-visible .word .i::before, .brand:focus-visible .word .i::after { opacity: 0; }
@keyframes dotbob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -.08em; } }
.word .idot.wink { animation: wink .32s steps(3) 1; }
@media (prefers-reduced-motion: reduce) { .word .idot { animation: none; transition: none; } }

/* Price list: real sites made with each cartridge */
.cc-ex-h { margin-top: 0; }
.cc-ex { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 8px; }
.cc-ex[data-n="1"] { grid-template-columns: minmax(0, 1fr); }
.cc-shot { display: block; text-decoration: none; color: var(--text); background: #efe6d6; border-radius: 6px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 10px 26px -14px rgba(0,0,0,.9); transition: transform .2s, box-shadow .2s; }
.cc-shot:hover, .cc-shot:focus-visible { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--c), 0 14px 30px -12px var(--c); outline: none; }
.cc-bar { display: flex; align-items: center; gap: 4px; padding: 6px 8px; background: #2a231d; }
.cc-bar i { width: 7px; height: 7px; border-radius: 50%; background: #5a4c40; }
.cc-bar i:first-child { background: #ff6b5a; } .cc-bar i:nth-child(2) { background: #ffbd3b; } .cc-bar i:nth-child(3) { background: #44c25a; }
.cc-bar b { flex: 1; margin-left: 6px; padding: 2px 8px; border-radius: 4px; background: #15110d; font: 600 11px var(--sans); color: #c9bfb2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-shot img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.cc-ex[data-n="1"] .cc-shot img { aspect-ratio: 16 / 8; }
.cc-cap { display: block; padding: 7px 10px 8px; background: #15110d; font: 600 12px var(--sans); color: var(--amber); }
@media (max-width: 520px) { .cc-ex { grid-template-columns: 1fr; } }
.cc-concept img { aspect-ratio: 16 / 10.5; object-position: top; }
.cc-concept .cc-cap { color: #c9bfb2; }

/* Price list: pick a starting look + already live (10 Oct 2026) */
.cc-looks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cc-look { position: relative; display: flex; flex-direction: column; padding: 0; border: 0; border-radius: 6px; overflow: hidden; cursor: pointer; text-align: left; background: #15110d;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08); transition: transform .18s, box-shadow .18s, opacity .18s; opacity: .62; }
.cc-look img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: top; background: #efe6d6; }
.cc-look-t { display: flex; flex-direction: column; gap: 1px; padding: 7px 9px 8px; }
.cc-look-t b { font: 700 13px var(--sans); color: var(--text); }
.cc-look-t small { font: 600 11px var(--sans); color: var(--mute); }
.cc-look:hover { opacity: .9; transform: translateY(-2px); }
.cc-look[aria-checked="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--c), 0 10px 26px -12px var(--c); }
.cc-look[aria-checked="true"]::after { content: "✓"; position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--c); color: #1a0f05; font: 800 13px var(--sans); }
.cc-look[aria-checked="true"] .cc-look-t small { color: var(--c); }
.cc-look:focus-visible { outline: 2px dashed var(--amber); outline-offset: 3px; }
.cc-look-note { margin: 8px 0 4px; font-size: 13px; color: var(--mute); }
.cc-live { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 4px; }
.cc-live:empty { display: none; }
.cc-live-h { font: 16px var(--term); color: var(--mute); text-transform: uppercase; letter-spacing: .04em; margin-right: 2px; }
.cc-live-a { display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border: 1px solid var(--line); border-radius: 6px; text-decoration: none; color: var(--amber); font: 600 12px var(--sans); background: rgba(0,0,0,.25); }
.cc-live-a img { width: 52px; height: 32px; object-fit: cover; object-position: top; border-radius: 3px; }
.cc-live-a b { color: var(--text); margin-right: 6px; }
.cc-live-a:hover { border-color: var(--c); }
@media (max-width: 520px) { .cc-looks { gap: 6px; } .cc-look-t { padding: 5px 6px 6px; } .cc-look-t b { font-size: 11px; } .cc-look-t small { font-size: 10px; } }
.cc-looks { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cc-look-own .cc-own-art { display: grid; place-items: center; aspect-ratio: 4 / 3; background: repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 8px, transparent 8px 16px), #120d09; border-bottom: 1px dashed var(--line);
  font: 900 40px var(--sans); color: var(--c); text-shadow: 0 0 14px color-mix(in srgb, var(--c) 50%, transparent); }
.cc-look-t small { font-weight: 500; }
.cc-look-note { margin: -2px 0 10px; }
@media (max-width: 700px) { .cc-looks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Price list: play the demo + demo mode overlay (11 Oct 2026) */
.cc-play { display: flex; align-items: center; gap: 14px; width: 100%; margin: 12px 0 6px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--c) 60%, transparent); border-radius: 10px; cursor: pointer; text-align: left; color: var(--text);
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 18%, #0b0806), #0b0806 70%); box-shadow: 0 0 24px -10px var(--c); transition: transform .2s, box-shadow .2s; }
.cc-play:hover { transform: translateY(-2px); box-shadow: 0 0 34px -6px var(--c); }
.cc-play-i { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--c); color: #1a0f05; font-size: 16px; padding-left: 3px; animation: dmpulse 1.8s ease-in-out infinite; }
@keyframes dmpulse { 50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--c) 25%, transparent); } }
.cc-play b { display: block; font: 9px var(--arc); letter-spacing: .08em; color: var(--c); text-transform: uppercase; margin-bottom: 4px; }
.cc-play small { display: block; font: 500 13px/1.35 var(--sans); color: #d3c8b8; }
.cc-demo-soon { margin: 10px 0 4px; font: 16px var(--term); color: var(--mute); text-transform: uppercase; letter-spacing: .04em; }
.demo-mode { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #0b0806; color: var(--text); }
.demo-mode::backdrop { background: rgba(0,0,0,.85); }
.dm-bar { display: flex; align-items: center; gap: 14px; height: 54px; padding: 0 16px; border-bottom: 1px solid var(--line); background: #120c07; }
.dm-tag { font: 10px var(--arc); color: #1a0f05; background: var(--amber); padding: 5px 7px 4px; animation: blink 1.2s steps(1) infinite; }
.dm-name { font: 700 14px var(--sans); margin-right: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-dev { display: flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.dm-dev button { border: 0; background: none; color: var(--mute); font: 600 12px var(--sans); padding: 6px 12px; border-radius: 999px; cursor: pointer; }
.dm-dev button[aria-pressed="true"] { background: var(--amber); color: #1a0f05; }
.dm-new { font: 600 12px var(--sans); color: var(--amber); text-decoration: none; white-space: nowrap; }
.dm-x { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: none; color: var(--text); cursor: pointer; font-size: 15px; }
.dm-stage { height: calc(100vh - 54px); display: grid; place-items: center; background: radial-gradient(60% 60% at 50% 40%, #2a1a0e, #0b0806); }
.dm-stage iframe { width: 100%; height: 100%; border: 0; background: #faf6ee; transition: width .4s cubic-bezier(.2,.8,.2,1), height .4s, border-radius .4s; }
.demo-mode.phone .dm-stage iframe { width: 390px; height: min(820px, calc(100vh - 90px)); border-radius: 36px; box-shadow: 0 0 0 10px #1c1612, 0 0 0 11px #3a2f27, 0 30px 80px -20px rgba(253,144,7,.35); }
@media (max-width: 700px) { .dm-new { display: none; } .demo-mode.phone .dm-stage iframe { width: 100%; height: 100%; border-radius: 0; box-shadow: none; } .dm-dev { display: none; } }
@media (prefers-reduced-motion: reduce) { .cc-play-i, .dm-tag { animation: none; } }

/* ---------- Photoreal 3D cartridges (Blender renders) 11 Oct 2026 ---------- */
.cart3d { all: unset; position: relative; display: block; cursor: pointer; perspective: 900px; padding: 4px 4px 22px; -webkit-tap-highlight-color: transparent; }
.cart3d::before, .cart3d::after { content: none !important; }
.c3-tilt { position: relative; display: block; transform-style: preserve-3d; transition: transform .45s cubic-bezier(.2,.8,.2,1); will-change: transform; }
.c3-tilt img { display: block; width: 100%; height: auto; filter: drop-shadow(0 18px 22px rgba(0,0,0,.6)); }
.c3-tilt::after { content: ""; position: absolute; inset: 6% 8% 12%; border-radius: 6px; pointer-events: none; mix-blend-mode: screen; opacity: 0; transition: opacity .3s;
  background: radial-gradient(circle at var(--gx,30%) var(--gy,20%), rgba(255,240,210,.35), transparent 45%); }
.cart3d:hover .c3-tilt::after { opacity: 1; }
.c3-shadow { position: absolute; left: 14%; right: 14%; bottom: 8px; height: 16px; border-radius: 50%; background: radial-gradient(closest-side, rgba(253,144,7,.0), transparent); transition: background .3s; }
.c3-in { position: absolute; left: 50%; bottom: -2px; transform: translateX(-50%); font: 9px var(--arc); color: var(--c); letter-spacing: .08em; white-space: nowrap; opacity: 0; transition: opacity .2s; text-shadow: 0 0 8px var(--c); }
.cart3d:hover .c3-tilt { transform: translateY(-6px) rotateX(4deg); }
.cart3d[aria-checked="true"] .c3-tilt { animation: slotin .55s cubic-bezier(.3,1.5,.5,1) both; }
.cart3d[aria-checked="true"] .c3-tilt img { filter: drop-shadow(0 18px 22px rgba(0,0,0,.6)) drop-shadow(0 0 22px color-mix(in srgb, var(--c) 55%, transparent)); }
.cart3d[aria-checked="true"] .c3-shadow { background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 60%, transparent), transparent); }
.cart3d[aria-checked="true"] .c3-in { opacity: 1; }
@keyframes slotin { 0% { transform: translateY(0); } 40% { transform: translateY(-16px) rotateX(10deg); } 100% { transform: translateY(-4px); } }
.cart3d:focus-visible .c3-tilt img { outline: 2px dashed var(--amber); outline-offset: 4px; }
.cart-rack { gap: 10px 14px; }
@media (prefers-reduced-motion: reduce) { .c3-tilt { transition: none; } .cart3d[aria-checked="true"] .c3-tilt { animation: none; } }

/* House rules: photoreal arcade tokens (Blender renders) 11 Oct 2026 */
.rule-btn.token { width: 84px; height: 84px; border-radius: 50%; background: none; box-shadow: none; perspective: 500px; margin-top: 0; }
.rule-btn.token img { width: 100%; height: 100%; display: block; filter: brightness(1.35) contrast(1.12) saturate(1.1) drop-shadow(0 8px 10px rgba(0,0,0,.6)); transition: transform .35s cubic-bezier(.2,.8,.2,1), filter .3s; }
.rules li:hover .rule-btn.token img { transform: translateY(-4px) rotate(-8deg); filter: brightness(1.5) contrast(1.12) saturate(1.1) drop-shadow(0 12px 14px rgba(0,0,0,.6)) drop-shadow(0 0 14px color-mix(in srgb, var(--c) 55%, transparent)); }
.rule-btn.token:active, .rule-btn.token.hit { transform: none; box-shadow: none; animation: none; }
.rule-btn.token.hit img { animation: coinflip .8s cubic-bezier(.3,.7,.3,1); }
@keyframes coinflip { 0% { transform: translateY(0) rotateY(0); } 45% { transform: translateY(-28px) rotateY(540deg); } 80% { transform: translateY(0) rotateY(720deg); } 90% { transform: translateY(-4px) rotateY(720deg); } 100% { transform: translateY(0) rotateY(720deg); } }
@media (max-width: 520px) { .rule-btn.token { width: 64px; height: 64px; } }
@media (prefers-reduced-motion: reduce) { .rule-btn.token.hit img { animation: none; } }
/* no button chrome around the photoreal objects (fixes dark ring on hover) */
.rule-btn.token, .rules li:hover .rule-btn.token, .rule-btn.token:active, .rule-btn.token.hit { box-shadow: none !important; background: none !important; transform: none !important; }
.rule-btn.token:focus { outline: none; }
.rule-btn.token:focus-visible img { outline: 2px dashed var(--amber); outline-offset: 2px; border-radius: 50%; }
.cart3d, .cart3d:hover, .cart3d[aria-checked="true"] { transform: none !important; filter: none !important; box-shadow: none !important; background: none !important; outline: none; }
/* Tron neon halo around each cartridge */
.c3-tilt img { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--c) 70%, transparent)) drop-shadow(0 0 22px color-mix(in srgb, var(--c) 40%, transparent)) drop-shadow(0 18px 22px rgba(0,0,0,.7)); }
.cart3d:hover .c3-tilt img { filter: brightness(1.12) drop-shadow(0 0 8px var(--c)) drop-shadow(0 0 30px color-mix(in srgb, var(--c) 60%, transparent)) drop-shadow(0 18px 22px rgba(0,0,0,.7)); }
.cart3d[aria-checked="true"] .c3-tilt img { filter: brightness(1.18) drop-shadow(0 0 10px var(--c)) drop-shadow(0 0 40px var(--c)) drop-shadow(0 18px 22px rgba(0,0,0,.7)); animation: neonhum 2.6s ease-in-out infinite; }
@keyframes neonhum { 50% { filter: brightness(1.28) drop-shadow(0 0 12px var(--c)) drop-shadow(0 0 52px var(--c)) drop-shadow(0 18px 22px rgba(0,0,0,.7)); } }
@media (prefers-reduced-motion: reduce) { .cart3d[aria-checked="true"] .c3-tilt img { animation: none; } }

/* ===== Real arcade objects, neon edition (11 Oct 2026) ===== */
/* 1. Arcade push-button on "Start a project" */
.btn-arcade { position: relative; padding-left: 64px !important; overflow: visible; }
.btn-arcade.btn-sm { padding-left: 50px !important; }
.btn-arcade .ab { position: absolute; left: 6px; top: 50%; width: 54px; height: 37px; transform: translateY(-52%); pointer-events: none; filter: drop-shadow(0 0 8px rgba(255,120,0,.85)) drop-shadow(0 0 18px rgba(255,90,0,.45)); }
.btn-arcade.btn-sm .ab { width: 42px; height: 29px; left: 4px; }
.btn-arcade .ab img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .06s; }
.btn-arcade .ab-down { opacity: 0; }
.btn-arcade:hover .ab { filter: drop-shadow(0 0 10px #ff7a00) drop-shadow(0 0 26px rgba(255,90,0,.7)); }
.btn-arcade:active .ab-up { opacity: 0; } .btn-arcade:active .ab-down { opacity: 1; }
.btn-arcade:active .ab { filter: drop-shadow(0 0 14px #ffd23f) drop-shadow(0 0 40px #ff7a00); }

/* 2. Hall of fame: backlit marquee light boxes with neon rims */
.wall-grid .wt { --n: #19e6ff; border: 0; border-radius: 8px; padding: 9px; background:
  radial-gradient(circle at 7px 7px, #cfcfd6 0 1.6px, transparent 2.2px), radial-gradient(circle at calc(100% - 7px) 7px, #cfcfd6 0 1.6px, transparent 2.2px),
  radial-gradient(circle at 7px calc(100% - 7px), #cfcfd6 0 1.6px, transparent 2.2px), radial-gradient(circle at calc(100% - 7px) calc(100% - 7px), #cfcfd6 0 1.6px, transparent 2.2px),
  linear-gradient(160deg, #3a3640, #141218 45%, #26222c); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -2px 0 rgba(0,0,0,.6), 0 0 0 1px color-mix(in srgb, var(--n) 35%, transparent), 0 6px 14px rgba(0,0,0,.55); filter: none !important; }
.wall-grid .wt:nth-child(4n+2) { --n: #ff2bd6; } .wall-grid .wt:nth-child(4n+3) { --n: #ff7a00; } .wall-grid .wt:nth-child(4n+4) { --n: #a6ff00; }
.wall-grid .wt::before { content: ""; position: absolute; inset: 9px; border-radius: 3px; background: linear-gradient(180deg, #1c1a1e, #0d0c0f); box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), inset 0 8px 14px rgba(0,0,0,.6); transition: background .3s, box-shadow .3s; }
.wall-grid .wt img, .wall-grid .wt span { position: relative; z-index: 1; }
.wall-grid .wt:not(.on) img { filter: grayscale(1) brightness(.55) contrast(.9) !important; opacity: .55 !important; }
.wall-grid .wt.on { box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 0 0 2px var(--n), 0 0 16px var(--n), 0 0 38px color-mix(in srgb, var(--n) 55%, transparent); }
.wall-grid .wt.on::before { background: radial-gradient(120% 90% at 50% 40%, #ffffff, #fbf3e6 55%, #efe2cc); box-shadow: inset 0 0 18px color-mix(in srgb, var(--n) 40%, transparent), inset 0 0 0 1px rgba(255,255,255,.6); }
.wall-grid .wt.on img { filter: none !important; opacity: 1 !important; }
.wall-grid .wt-tag { z-index: 2; }

/* 3. Enamel pin badges */
.st-badge.st-pin { width: 76px; height: 70px; background: none !important; border: 0 !important; box-shadow: none !important; animation: none !important; }
.st-pin img { width: 100%; height: auto; filter: drop-shadow(0 6px 8px rgba(0,0,0,.6)); transition: transform .3s cubic-bezier(.3,1.6,.5,1); }
.st:hover .st-pin img { transform: rotate(-8deg) scale(1.08); }
.st-start .pin-est { position: absolute !important; left: -18px; top: -26px; width: 150px !important; height: auto !important; z-index: 3; mix-blend-mode: normal !important; transform: rotate(-4deg); filter: drop-shadow(0 6px 10px rgba(0,0,0,.6)); }
@media (max-width: 640px) { .st-badge.st-pin { width: 56px; height: 52px; } }

/* 4. Enquiry form inside an arcade cabinet */
.cabinet { max-width: 880px; margin: 0 auto; filter: drop-shadow(0 30px 50px rgba(0,0,0,.6)); }
.cabinet > img { display: block; width: 100%; height: auto; }
.cab-screen { position: relative; margin: -2px 0; padding: 26px clamp(18px, 6.5%, 60px); background:
  linear-gradient(90deg, #08060b 0 2.6%, #ff2bd6 2.6% 3.3%, #08060b 3.3% 7%, transparent 7% 93%, #08060b 93% 96.7%, #ff2bd6 96.7% 97.4%, #08060b 97.4%); }
.cab-screen::before { content: ""; position: absolute; left: 7%; right: 7%; top: 0; bottom: 0; background: radial-gradient(120% 80% at 50% 30%, #12101a, #050407); box-shadow: inset 0 0 0 3px #1a1622, inset 0 0 60px rgba(25,230,255,.12); border-radius: 6px; z-index: 0; }
.cab-screen::after { content: ""; position: absolute; left: 7%; right: 7%; top: 0; bottom: 0; pointer-events: none; z-index: 2; background: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px); border-radius: 6px; }
.cab-screen > * { position: relative; z-index: 1; }
.cab-screen .brief-slot { padding: 6px 4px; }
.cab-screen { box-shadow: -6px 0 18px -6px #ff2bd6, 6px 0 18px -6px #ff2bd6; }
@media (max-width: 640px) { .cab-screen { padding: 18px 10%; } }

/* Cartridges: Tron light trace runs around the outline on hover (replaces the white shine) */
.c3-tilt::after { content: none !important; }
.c3-trace { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.c3-trace path { fill: none; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.c3-trace .tr-base { stroke: var(--c); stroke-width: 1.5; opacity: 0; transition: opacity .3s; filter: drop-shadow(0 0 3px var(--c)); }
.c3-trace .tr-run { stroke: #fff; stroke-width: 3; stroke-dasharray: 0 1000; opacity: 0;
  filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 6px var(--c)) drop-shadow(0 0 14px var(--c)) drop-shadow(0 0 26px var(--c)); }
.cart3d:hover .c3-trace .tr-base, .cart3d:focus-visible .c3-trace .tr-base, .cart3d[aria-checked="true"] .c3-trace .tr-base { opacity: .55; }
.cart3d:hover .c3-trace .tr-run, .cart3d:focus-visible .c3-trace .tr-run { opacity: 1; stroke-dasharray: 170 830; animation: lightcycle 1.6s linear infinite; }
.cart3d:hover .c3-trace .tr-b, .cart3d:focus-visible .c3-trace .tr-b { animation-delay: -.8s; }
.cart3d[aria-checked="true"] .c3-trace .tr-run { opacity: 1; stroke-dasharray: 110 890; animation: lightcycle 3.2s linear infinite; }
.cart3d[aria-checked="true"] .c3-trace .tr-b { animation-delay: -1.6s; }
.cart3d[aria-checked="true"]:hover .c3-trace .tr-run { animation-duration: 1.6s; }
.cart3d[aria-checked="true"]:hover .c3-trace .tr-b { animation-delay: -.8s; }
@keyframes lightcycle { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -1000; } }
@media (prefers-reduced-motion: reduce) { .c3-trace .tr-run { animation: none !important; stroke-dasharray: none !important; opacity: 0 !important; } .cart3d:hover .c3-trace .tr-base { opacity: 1; } }
/* cabinet sides matched to the rendered marquee/control panel: pink neon tube + dark side panel */
.cab-screen { box-shadow: none; background:
  linear-gradient(90deg, transparent 0 1.9%, #ffb8ff 1.9% 3.9%, #241629 3.9% 7.4%, transparent 7.4% 92.6%, #241629 92.6% 96.1%, #ffb8ff 96.1% 98.1%, transparent 98.1%); }
.cabinet { position: relative; }
.cabinet::before, .cabinet::after { content: ""; position: absolute; top: 4%; bottom: 4%; width: 2%; pointer-events: none; box-shadow: 0 0 14px 2px #ff4dea, 0 0 34px 6px rgba(255,43,214,.55); border-radius: 4px; z-index: -1; }
.cabinet::before { left: 1.9%; } .cabinet::after { right: 1.9%; }
.cab-screen::before, .cab-screen::after { left: 7.4%; right: 7.4%; }

/* ===== Mode cards: Tron neon panels (11 Oct 2026) ===== */
.mode { border-radius: 14px; border: 1px solid color-mix(in srgb, var(--c) 55%, transparent);
  background: radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--c) 16%, transparent), transparent 55%),
    linear-gradient(180deg, #0d0b14, #07060b 70%);
  box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 0 18px -4px color-mix(in srgb, var(--c) 55%, transparent), inset 0 0 24px -8px color-mix(in srgb, var(--c) 45%, transparent); }
.mode:hover, .mode:focus-within { border-color: var(--c); transform: translateY(-4px);
  box-shadow: 0 0 0 1px var(--c), 0 0 30px -2px color-mix(in srgb, var(--c) 70%, transparent), 0 24px 60px -24px var(--c), inset 0 0 36px -10px color-mix(in srgb, var(--c) 60%, transparent); }
.mode::after { border-radius: inherit; opacity: .35; }
/* light-cycle trace */
.mode > .m-trace { position: absolute !important; inset: 0; width: 100%; height: 100%; z-index: 4 !important; pointer-events: none; overflow: visible; }
.m-trace rect { fill: none; vector-effect: non-scaling-stroke; }
.m-trace .tr-base { stroke: var(--c); stroke-width: 3; opacity: .25; transition: opacity .3s; }
.m-trace .tr-run { stroke: #fff; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 0 1000; opacity: 0;
  filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 6px var(--c)) drop-shadow(0 0 16px var(--c)); }
.mode:hover .m-trace .tr-base, .mode:focus-within .m-trace .tr-base { opacity: .8; }
.mode:hover .m-trace .tr-run, .mode:focus-within .m-trace .tr-run { opacity: 1; stroke-dasharray: 140 860; animation: lightcycle 2.4s linear infinite; }
.mode:hover .m-trace .tr-b, .mode:focus-within .m-trace .tr-b { animation-delay: -1.2s; }
/* the slideshow becomes a glowing CRT screen */
.m-shots { margin: -12px -12px 4px; border-radius: 10px; border: 2px solid var(--c); background: #f3ead9;
  box-shadow: 0 0 14px color-mix(in srgb, var(--c) 65%, transparent), 0 0 0 4px #050407, 0 0 0 5px color-mix(in srgb, var(--c) 35%, transparent); }
.m-shots::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
  background: linear-gradient(155deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.04) 28%, transparent 40%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.10) 0 1px, transparent 1px 3px);
  box-shadow: inset 0 0 40px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.12); }
.m-shot figcaption, .m-dots, .m-shots .m-sel { z-index: 2; }
.m-shot figcaption { border-left-color: var(--c); box-shadow: -3px 0 10px -2px var(--c); }
/* neon chip icon */
.m-icon-wrap { border-radius: 12px; border: 1.5px solid var(--c); background: radial-gradient(circle, color-mix(in srgb, var(--c) 22%, #07060b), #07060b 70%);
  box-shadow: 0 0 14px -2px var(--c), inset 0 0 16px -4px var(--c); }
.m-icon { filter: drop-shadow(0 0 4px var(--c)) drop-shadow(0 0 12px color-mix(in srgb, var(--c) 70%, transparent)); }
.mode .m-short { text-shadow: 0 0 10px color-mix(in srgb, var(--c) 80%, transparent); }
.mode:hover h3 { text-shadow: 0 0 18px color-mix(in srgb, var(--c) 55%, transparent); }
/* LED stat bars */
.m-stats { border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); border-radius: 10px; background: rgba(0,0,0,.45); box-shadow: inset 0 0 18px -6px color-mix(in srgb, var(--c) 50%, transparent); }
.m-bar i { border-radius: 2px; }
.mode.lit .m-bar i.on { box-shadow: 0 0 4px var(--c), 0 0 10px color-mix(in srgb, var(--c) 60%, transparent); }
.m-stat b { text-shadow: 0 0 8px var(--c); }
.mode .btn-ghost { border-color: var(--c); color: var(--c); box-shadow: 0 0 10px -2px var(--c), inset 0 0 10px -4px var(--c); border-radius: 6px; }
.mode .btn-ghost:hover { background: var(--c); color: #07060b; box-shadow: 0 0 22px var(--c); }
@media (prefers-reduced-motion: reduce) { .m-trace .tr-run { animation: none !important; opacity: 0 !important; } }

/* ===== One neon system across the page (11 Oct 2026) ===== */
.m-trace { position: absolute !important; inset: 0; width: 100%; height: 100%; z-index: 4 !important; pointer-events: none; overflow: visible; }
.rules li:hover .m-trace .tr-base, .rules li:focus-within .m-trace .tr-base, .arcscreen .m-trace .tr-base { opacity: .8; }
.rules li:hover .m-trace .tr-run, .rules li:focus-within .m-trace .tr-run { opacity: 1; stroke-dasharray: 140 860; animation: lightcycle 2.4s linear infinite; }
.rules li:hover .m-trace .tr-b, .rules li:focus-within .m-trace .tr-b { animation-delay: -1.2s; }

/* House rules: neon panels, one colour each */
.rules li { border-radius: 14px; border: 1px solid color-mix(in srgb, var(--c) 55%, transparent);
  background: radial-gradient(90% 120% at 0% 0%, color-mix(in srgb, var(--c) 16%, transparent), transparent 60%), linear-gradient(180deg, #0d0b14, #07060b);
  box-shadow: 0 0 18px -4px color-mix(in srgb, var(--c) 55%, transparent), inset 0 0 24px -8px color-mix(in srgb, var(--c) 45%, transparent); }
.rules li:hover, .rules li:focus-within { border-color: var(--c); transform: translateY(-3px);
  box-shadow: 0 0 0 1px var(--c), 0 0 30px -2px color-mix(in srgb, var(--c) 70%, transparent), inset 0 0 36px -10px color-mix(in srgb, var(--c) 60%, transparent); }
.rules li::after { border-radius: inherit; }
.rules .rule-n { color: var(--c) !important; text-shadow: 0 0 10px color-mix(in srgb, var(--c) 80%, transparent); }
.rules li:hover h3 { text-shadow: 0 0 18px color-mix(in srgb, var(--c) 55%, transparent); }
.rule-btn.token img { filter: drop-shadow(0 0 8px color-mix(in srgb, var(--c) 70%, transparent)) drop-shadow(0 8px 10px rgba(0,0,0,.6)); }
.rules li:hover .rule-btn.token img { filter: brightness(1.15) drop-shadow(0 0 10px var(--c)) drop-shadow(0 0 26px color-mix(in srgb, var(--c) 60%, transparent)) drop-shadow(0 12px 14px rgba(0,0,0,.6)); }

/* Story mode: neon level signs, light-cycle timeline, CRT frames */
.story::before { left: 31px; width: 3px; border-radius: 2px; background: linear-gradient(to bottom, #ff2bd6, #19e6ff 22%, #ff7a00 44%, #a6ff00 64%, #b14dff 82%, #ffd23f);
  box-shadow: 0 0 8px rgba(255,43,214,.5), 0 0 18px rgba(25,230,255,.35); opacity: .85; }
.story::after { content: ""; position: absolute; left: 29px; top: 0; width: 7px; height: 90px; border-radius: 4px; pointer-events: none;
  background: linear-gradient(to bottom, transparent, #fff); box-shadow: 0 0 10px #fff, 0 0 22px #19e6ff; animation: trailrun 5s linear infinite; }
@keyframes trailrun { from { top: 0; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } to { top: calc(100% - 90px); opacity: 0; } }
.st-badge.st-neon { width: 64px; height: 64px; border-radius: 12px; display: grid; place-items: center; align-content: center; gap: 2px;
  background: radial-gradient(circle, color-mix(in srgb, var(--c) 20%, #07060b), #07060b 72%); border: 2px solid var(--c); color: var(--c);
  box-shadow: 0 0 10px var(--c), 0 0 26px color-mix(in srgb, var(--c) 55%, transparent), inset 0 0 12px color-mix(in srgb, var(--c) 60%, transparent);
  animation: none; text-shadow: none; }
.st-neon span { font: 10px/1 var(--arc); color: #fff; text-shadow: 0 0 4px var(--c), 0 0 10px var(--c); margin: 0; }
.st-neon b { font: 22px/1 var(--arc); color: #fff; text-shadow: 0 0 4px var(--c), 0 0 12px var(--c), 0 0 24px var(--c); }
.st:hover .st-neon { animation: neonflick .5s steps(2) 1; }
@keyframes neonflick { 0%, 40% { opacity: 1; } 20%, 60% { opacity: .35; } 100% { opacity: 1; } }
.st-cta .st-badge.st-neon { animation: neonflick 1.6s steps(2) infinite; background: radial-gradient(circle, color-mix(in srgb, var(--c) 20%, #07060b), #07060b 72%); }
.st-years { color: var(--c) !important; text-shadow: 0 0 10px color-mix(in srgb, var(--c) 80%, transparent); }
.st-brands li { border-color: color-mix(in srgb, var(--c) 45%, transparent); border-radius: 4px; background: #0b0910; box-shadow: inset 0 0 8px -3px var(--c); }
.st-fig { border-radius: 12px !important; border: 2px solid var(--c) !important;
  box-shadow: 0 0 14px color-mix(in srgb, var(--c) 65%, transparent), 0 0 0 5px #050407, 0 0 0 6px color-mix(in srgb, var(--c) 35%, transparent), 0 0 40px -6px var(--c) !important; }
.st-fig .glare { display: none; }
.st-fig:not(.st-start)::after { content: ""; position: absolute; inset: 0; border-radius: 10px; pointer-events: none; z-index: 2;
  background: linear-gradient(155deg, rgba(255,255,255,.35), rgba(255,255,255,0) 35%), repeating-linear-gradient(0deg, rgba(0,0,0,.05) 0 1px, transparent 1px 3px);
  box-shadow: inset 0 0 40px rgba(0,0,0,.28); }
.st-fig.flashing::before, .st-fig.flashing::after { display: none; }
.fb-hud { background: #07060b; color: #fff; border: 2px solid var(--c); border-radius: 6px; text-shadow: 0 0 6px var(--c), 0 0 12px var(--c);
  box-shadow: 0 0 10px var(--c), inset 0 0 8px color-mix(in srgb, var(--c) 50%, transparent); }
.fb-replay { border-color: var(--c); color: #fff; border-radius: 6px; text-shadow: 0 0 6px var(--c); box-shadow: 0 0 10px color-mix(in srgb, var(--c) 70%, transparent); }
.neon-est { position: absolute; left: -14px; top: -22px; z-index: 3; transform: rotate(-5deg); padding: 8px 14px; border-radius: 10px;
  font: 14px/1 var(--arc); color: #fff; text-transform: uppercase; background: #07060b; border: 2px solid var(--c);
  text-shadow: 0 0 4px var(--c), 0 0 12px var(--c), 0 0 22px var(--c); box-shadow: 0 0 12px var(--c), 0 0 30px color-mix(in srgb, var(--c) 50%, transparent), inset 0 0 10px color-mix(in srgb, var(--c) 50%, transparent);
  animation: neonflick 3.5s steps(2) 1s infinite; }
@media (prefers-reduced-motion: reduce) { .story::after, .neon-est, .st-cta .st-badge.st-neon { animation: none; } .story::after { display: none; } }
@media (max-width: 640px) { .st-badge.st-neon { width: 48px; height: 48px; } .st-neon b { font-size: 16px; } .story::after { left: 21px; } }

/* Enquiry: slim neon arcade screen */
.arcscreen { --c: #ff2bd6; position: relative; max-width: 900px; margin: 0 auto; padding: 0; border-radius: 18px;
  background: linear-gradient(180deg, #110c1a, #07060b); border: 1px solid var(--c);
  box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 0 24px -2px color-mix(in srgb, var(--c) 70%, transparent), 0 0 70px -20px #19e6ff, inset 0 0 30px -10px var(--c); }
.arcscreen .m-trace rect { rx: 18px; }
.arcscreen .m-trace .tr-run { opacity: 1; stroke-dasharray: 90 910; animation: lightcycle 6s linear infinite; }
.arcscreen .m-trace .tr-b { animation-delay: -3s; stroke: #fff; filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 6px #19e6ff) drop-shadow(0 0 16px #19e6ff); }
.as-marquee { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 16px 16px; border-radius: 17px 17px 0 0; overflow: hidden;
  background: linear-gradient(180deg, rgba(80,10,120,.55), rgba(255,43,214,.18)), repeating-linear-gradient(90deg, rgba(25,230,255,.12) 0 1px, transparent 1px 28px), #0c0714;
  border-bottom: 2px solid var(--c); box-shadow: 0 2px 16px -2px var(--c); }
.as-marquee span { font: 11px var(--arc); color: #ffd23f; text-transform: uppercase; letter-spacing: .12em; text-shadow: 0 0 8px #ff7a00; }
.as-marquee b { font: clamp(16px, 2.6vw, 26px)/1.1 var(--arc); color: #fff; text-transform: uppercase; text-align: center;
  text-shadow: 0 0 4px var(--c), 0 0 14px var(--c), 0 0 32px var(--c); }
.as-screen { position: relative; margin: 16px; border-radius: 12px; padding: 22px clamp(14px, 3vw, 30px); background: radial-gradient(120% 80% at 50% 0%, #121019, #060509);
  border: 1px solid rgba(25,230,255,.45); box-shadow: inset 0 0 50px rgba(25,230,255,.10), 0 0 16px -4px rgba(25,230,255,.6); }
.as-screen::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
  background: linear-gradient(155deg, rgba(255,255,255,.06), transparent 30%), repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px); }
.as-screen > * { position: relative; z-index: 1; }
.as-deck { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 4px 16px 18px; }
.as-deck span { font: 11px var(--arc); color: #ffd23f; text-transform: uppercase; text-shadow: 0 0 8px #ff7a00; animation: blink 1.2s steps(1) infinite; }
.as-slot { position: relative; width: 26px; height: 32px; border-radius: 5px; background: linear-gradient(180deg, #ff4fe0, #ff2bd6); border: 2px solid #c9c4d8;
  box-shadow: 0 0 10px #ff2bd6, 0 0 24px rgba(255,43,214,.6), inset 0 0 6px rgba(255,255,255,.5); }
.as-slot::after { content: ""; position: absolute; left: 50%; top: 6px; bottom: 6px; width: 3px; transform: translateX(-50%); border-radius: 2px; background: #0a0610; box-shadow: 0 0 0 1.5px #d8d4e4; }
@media (max-width: 640px) { .as-screen { margin: 10px; } }
@media (prefers-reduced-motion: reduce) { .arcscreen .m-trace .tr-run { animation: none; opacity: 0; } .as-deck span { animation: none; } }
/* the form inside the neon screen: cyan options, magenta selection, neon message panel */
.as-screen .brief-num { color: #19e6ff; text-shadow: 0 0 8px #19e6ff; }
.as-screen .brief-opt span { border-color: rgba(25,230,255,.32); background: rgba(10,20,30,.55); border-radius: 6px; }
.as-screen .brief-opt:hover span { border-color: #19e6ff; box-shadow: 0 0 10px -2px #19e6ff; }
.as-screen .brief-opt input:checked + span { background: #ff2bd6; border-color: #ff7cec; color: #fff; text-shadow: 0 0 6px rgba(255,255,255,.6); box-shadow: 0 0 14px #ff2bd6, 0 0 30px rgba(255,43,214,.45); }
.as-screen .brief-opt input:checked + span::before { color: #fff; }
.as-screen .brief-opt input:focus-visible + span { outline-color: #19e6ff; }
.as-screen .brief-field input, .as-screen .brief-field textarea { background: rgba(6,10,16,.8); border-color: rgba(25,230,255,.3); border-radius: 6px; }
.as-screen .brief-field input:focus, .as-screen .brief-field textarea:focus { border-color: #19e6ff; box-shadow: 0 0 0 2px rgba(25,230,255,.25), 0 0 14px -2px #19e6ff; }
.as-screen .brief-out { border: 2px solid #ff2bd6; border-radius: 10px; background: #0a0610; box-shadow: 0 0 16px rgba(255,43,214,.45), inset 0 0 24px -8px #ff2bd6; }
.as-screen .brief-preview { color: #ffd23f; text-shadow: 0 0 6px rgba(255,122,0,.8); }
.as-screen .brief-send { border-radius: 6px; }
.as-screen .brief-email { background: #ff2bd6; border-color: #ff2bd6; color: #fff; box-shadow: 0 0 16px #ff2bd6; }
.as-screen .brief-wa { border-color: #19e6ff; color: #19e6ff; box-shadow: 0 0 12px -2px #19e6ff; }
/* neon flicker dims the glow, never the box: the timeline must not show through a badge */
@keyframes neonflick { 0%, 40% { filter: none; } 20%, 60% { filter: brightness(.45) saturate(.7); } 100% { filter: none; } }
.st-badge.st-neon { background: #07060b; background-image: radial-gradient(circle, color-mix(in srgb, var(--c) 20%, #07060b), #07060b 72%); isolation: isolate; }
.st-cta .st-badge.st-neon { background-color: #07060b; }

/* ===== Side quest: Fix my DIY site (11 Oct 2026) ===== */
.cart-side { all: unset; box-sizing: border-box; position: relative; cursor: pointer; display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; align-items: center; gap: 16px;
  padding: 14px 18px 14px 14px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--c) 55%, transparent);
  background: radial-gradient(90% 140% at 0% 50%, color-mix(in srgb, var(--c) 16%, transparent), transparent 60%), linear-gradient(180deg, #0d0b14, #07060b);
  box-shadow: 0 0 18px -4px color-mix(in srgb, var(--c) 55%, transparent), inset 0 0 24px -8px color-mix(in srgb, var(--c) 45%, transparent); transition: transform .2s, box-shadow .2s; }
.cart-side:hover, .cart-side:focus-visible { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--c), 0 0 30px -2px color-mix(in srgb, var(--c) 70%, transparent), inset 0 0 36px -10px color-mix(in srgb, var(--c) 60%, transparent); }
.cart-side[aria-checked="true"] { border-color: var(--c); box-shadow: 0 0 0 1px var(--c), 0 0 34px color-mix(in srgb, var(--c) 60%, transparent), inset 0 0 40px -10px var(--c); }
.cart-side:hover .m-trace .tr-base, .cart-side:focus-visible .m-trace .tr-base, .cart-side[aria-checked="true"] .m-trace .tr-base { opacity: .8; }
.cart-side:hover .m-trace .tr-run, .cart-side:focus-visible .m-trace .tr-run { opacity: 1; stroke-dasharray: 140 860; animation: lightcycle 2.4s linear infinite; }
.cart-side:hover .m-trace .tr-b, .cart-side:focus-visible .m-trace .tr-b { animation-delay: -1.2s; }
.cart-side[aria-checked="true"] .m-trace .tr-run { opacity: 1; stroke-dasharray: 90 910; animation: lightcycle 4s linear infinite; }
.cart-side[aria-checked="true"] .m-trace .tr-b { animation-delay: -2s; }
.cs-img img { display: block; width: 74px; height: auto; transform: rotate(-6deg); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--c) 70%, transparent)) drop-shadow(0 8px 10px rgba(0,0,0,.6)); transition: transform .3s cubic-bezier(.3,1.5,.5,1); }
.cart-side:hover .cs-img img { transform: rotate(0deg) translateY(-3px); }
.cs-t { display: grid; gap: 4px; min-width: 0; }
.cs-tag { font: 11px var(--arc); color: var(--c); text-transform: uppercase; text-shadow: 0 0 8px var(--c); letter-spacing: .04em; }
.cs-t strong { font-size: 21px; font-weight: 800; font-stretch: 112%; color: var(--text); line-height: 1.1; }
.cs-t small { font-size: 14px; color: #cfc6bb; line-height: 1.4; }
.cs-price { display: grid; justify-items: end; font-weight: 900; font-stretch: 120%; font-size: 30px; line-height: 1; color: #fff; text-shadow: 0 0 10px var(--c), 0 0 22px color-mix(in srgb, var(--c) 60%, transparent); }
.cs-price em { font-style: normal; font-size: 14px; opacity: .8; justify-self: end; }
.cs-price small { margin-top: 6px; font: 15px var(--term); color: var(--c); text-shadow: none; text-transform: uppercase; white-space: nowrap; }
.cc-pitch { margin: 10px 0 4px; padding: 12px 14px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--c) 50%, transparent); background: rgba(0,0,0,.35); color: var(--text); font-size: 15px; line-height: 1.5; box-shadow: inset 0 0 18px -6px var(--c); }
@media (max-width: 640px) {
  .cart-side { grid-template-columns: 56px minmax(0, 1fr); gap: 12px; }
  .cs-img img { width: 56px; }
  .cs-price { grid-column: 2; justify-items: start; font-size: 26px; }
  .cs-price em, .cs-price small { justify-self: start; }
}
@media (prefers-reduced-motion: reduce) { .cart-side .m-trace .tr-run { animation: none !important; opacity: 0 !important; } }
.cc-looks[hidden], .cc-ex-h[hidden], .cc-look-note[hidden] { display: none !important; }

/* ===== One content width and tighter rhythm across the page (12 Oct 2026) ===== */
:root { --max: 1240px; --edge: max(var(--pad), calc((100% - var(--max)) / 2)); }
.sec { max-width: calc(var(--max) + 2 * var(--pad)); padding-block: clamp(40px, 5vw, 72px); }
.bar, .foot { padding-left: var(--edge); padding-right: var(--edge); }
.hud, .hero-grid { max-width: var(--max); }
.arcscreen { max-width: none; }
.rules { margin-bottom: 40px; }

/* Tickers scroll on their own (they used to move only while the page scrolled, and not at all in Safari) */
@media (prefers-reduced-motion: no-preference) {
  .ticker-track { animation: tickloop var(--tick-dur, 40s) linear infinite !important; animation-timeline: auto !important; animation-range: normal !important; will-change: transform; }
  .ticker-track.tick-rev { animation-direction: reverse !important; }
  .ticker:hover .ticker-track { animation-play-state: paused !important; }
}
@keyframes tickloop { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ===== Enquiry pop-up in the neon style + contact fields (12 Oct 2026) ===== */
.drawer { background: linear-gradient(180deg, #110c1a, #07060b 40%); border-left: 2px solid #ff2bd6;
  box-shadow: -2px 0 18px rgba(255,43,214,.55), -40px 0 90px -20px rgba(25,230,255,.35); }
.drawer::backdrop { background: rgba(5,3,10,.72); backdrop-filter: blur(3px); }
.drawer-head { background: linear-gradient(180deg, rgba(80,10,120,.6), rgba(17,12,26,.96)); border-bottom: 2px solid #ff2bd6; box-shadow: 0 2px 16px -4px #ff2bd6; }
.drawer-head .tag { color: #ffd23f; text-shadow: 0 0 8px #ff7a00; }
.drawer-head h2 { color: #fff; text-shadow: 0 0 6px #ff2bd6, 0 0 20px rgba(255,43,214,.7); }
.drawer-x { border-color: rgba(25,230,255,.5); color: #19e6ff; border-radius: 8px; box-shadow: 0 0 10px -3px #19e6ff; }
.drawer-x:hover { border-color: #19e6ff; box-shadow: 0 0 16px #19e6ff; }
/* same neon form styling inside the pop-up as in the on-page screen */
.drawer .brief-num { color: #19e6ff; text-shadow: 0 0 8px #19e6ff; }
.drawer .brief-opt span { border-color: rgba(25,230,255,.32); background: rgba(10,20,30,.55); border-radius: 6px; }
.drawer .brief-opt:hover span { border-color: #19e6ff; box-shadow: 0 0 10px -2px #19e6ff; }
.drawer .brief-opt input:checked + span { background: #ff2bd6; border-color: #ff7cec; color: #fff; box-shadow: 0 0 14px #ff2bd6; }
.drawer .brief-opt input:checked + span::before { color: #fff; }
.drawer .brief-field input, .drawer .brief-field textarea { background: rgba(6,10,16,.8); border-color: rgba(25,230,255,.3); border-radius: 6px; }
.drawer .brief-field input:focus, .drawer .brief-field textarea:focus { border-color: #19e6ff; box-shadow: 0 0 0 2px rgba(25,230,255,.25), 0 0 14px -2px #19e6ff; outline: none; }
.drawer .brief-out { border: 2px solid #ff2bd6; border-radius: 10px; background: #0a0610; box-shadow: 0 0 16px rgba(255,43,214,.45), inset 0 0 24px -8px #ff2bd6; }
.drawer .brief-preview { color: #ffd23f; text-shadow: 0 0 6px rgba(255,122,0,.8); }
.drawer .brief-send { border-radius: 6px; }
.drawer .brief-email { background: #ff2bd6; border-color: #ff2bd6; color: #fff; box-shadow: 0 0 16px #ff2bd6; }
.drawer .brief-wa { border-color: #19e6ff; color: #19e6ff; box-shadow: 0 0 12px -2px #19e6ff; }
/* new fields */
.brief-q legend em { font-style: normal; font-weight: 400; font-size: .7em; color: var(--mute); }
.brief-hint { margin: -4px 0 0; font-size: 13px; color: var(--mute); }
.brief-needs-contact .brief-hint { color: #ff5fa8; font-weight: 600; }
.brief-needs-contact input[name="email"], .brief-needs-contact input[name="phone"] { border-color: #ff2bd6 !important; box-shadow: 0 0 0 2px rgba(255,43,214,.35), 0 0 14px -2px #ff2bd6 !important; }
.drawer-head { background: linear-gradient(180deg, #2b0c40, #150d20); }

/* Story timeline: line, light streak and level badges share one centre line at every width */
.story::before { left: 30.5px; width: 3px; }            /* badge 64px -> centre 32px */
.story::after { left: 28.5px; width: 7px; }
@media (max-width: 760px) {
  .st-badge.st-neon { width: 48px; height: 48px; }
  .st-neon b { font-size: 16px; } .st-neon span { font-size: 8px; }
  .story::before { left: 22.5px; }                      /* badge 48px -> centre 24px */
  .story::after { left: 20.5px; }
}

/* ===== Price list on phones and tablets: sticky tier switcher + swipeable cartridges (12 Oct 2026) ===== */
.cc-tabs { display: none; }
@media (max-width: 900px) {
  .cart-console { overflow: clip; }
  .cart-console > .cc-tabs { display: flex; position: sticky; top: 62px; z-index: 6; margin: 0; gap: 8px; overflow-x: auto; scrollbar-width: none;
    padding: 10px 12px; background: rgba(9,7,13,.95); backdrop-filter: blur(8px); border-bottom: 1px solid color-mix(in srgb, var(--c) 40%, transparent); }
  .cc-tabs::-webkit-scrollbar { display: none; }
  .cc-tabs button { flex: 0 0 auto; display: grid; gap: 1px; text-align: left; cursor: pointer; padding: 7px 12px 6px; border-radius: 9px;
    border: 1px solid color-mix(in srgb, var(--c) 50%, transparent); background: #0b0910; color: var(--text); font: 700 13px var(--sans); white-space: nowrap; }
  .cc-tabs small { font: 15px/1 var(--term); color: var(--c); }
  .cc-tabs button[aria-checked="true"] { background: var(--c); border-color: var(--c); color: #07060b; box-shadow: 0 0 14px color-mix(in srgb, var(--c) 70%, transparent); }
  .cc-tabs button[aria-checked="true"] small { color: #07060b; }
}
@media (max-width: 600px) {
  .cart-rack { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * var(--pad)); padding: 8px var(--pad) 16px; scroll-padding-inline: var(--pad); }
  .cart-rack::-webkit-scrollbar { display: none; }
  .cart-rack .cart3d { flex: 0 0 40%; scroll-snap-align: start; }
  .cart-rack .c3-in { font-size: 8px; }
}

/* ===== Phone polish (12 Oct 2026) ===== */
.brief-slot { overflow-anchor: none; }
.nowrap { white-space: nowrap; }
.as-marquee b span { white-space: nowrap; }
.hero h1, .brief-q legend, .sec-head h2 { text-wrap: balance; }
.cheat .keys { white-space: nowrap; display: inline-block; }
.sound { white-space: nowrap; }
/* bigger tap targets in the price list */
.ca-step button { width: 40px; height: 40px; }
.ca-sw { width: 54px; height: 32px; }
.ca-sw i { width: 24px; height: 24px; }
.ca-sw[aria-checked="true"] i { transform: translateX(22px); }
.ca { cursor: pointer; }
.fb-replay { min-height: 40px; padding: 8px 14px; bottom: -20px; }
.m-link { padding-block: 10px; }
.brief-note a { display: inline-block; padding-block: 8px; }
/* logo wall: agency tag sits on the tile's top edge, never on the logo; unlit logos stay readable */
.wall-grid .wt-tag { top: -7px; left: 50%; transform: translateX(-50%); padding: 2px 6px; white-space: nowrap; }
.wall-grid .wt:not(.on) img { filter: grayscale(1) brightness(.9) contrast(.85) !important; opacity: .72 !important; }
@media (max-width: 640px) { .wall-grid { row-gap: 12px; } .wall-grid .wt-tag { font-size: 9px; padding: 1px 4px; top: -6px; } }
@media (max-width: 420px) {
  .sound { font-size: 16px; padding: 0 8px; }
  .cheat kbd { min-width: 0; padding: 1px 5px; }
}
/* the cube that follows you down the page sits on top of content on small screens, so it stays home there */
@media (max-width: 700px) { .dock { display: none !important; } }

/* ===== Phone polish (12 Oct 2026) ===== */
.brief-slot { overflow-anchor: none; }
.nowrap { white-space: nowrap; }
.as-marquee b span { white-space: nowrap; }
.hero h1, .brief-q legend, .sec-head h2 { text-wrap: balance; }
.cheat .keys { white-space: nowrap; display: inline-block; }
.sound { white-space: nowrap; }
/* bigger tap targets in the price list */
.ca-step button { width: 40px; height: 40px; }
.ca-sw { width: 54px; height: 32px; }
.ca-sw i { width: 24px; height: 24px; }
.ca-sw[aria-checked="true"] i { transform: translateX(22px); }
.ca { cursor: pointer; }
.fb-replay { min-height: 40px; padding: 8px 14px; bottom: -20px; }
.m-link { padding-block: 10px; }
.brief-note a { display: inline-block; padding-block: 8px; }
/* logo wall: agency tag sits on the tile's top edge, never on the logo; unlit logos stay readable */
.wall-grid .wt-tag { top: -7px; left: 50%; transform: translateX(-50%); padding: 2px 6px; white-space: nowrap; }
.wall-grid .wt:not(.on) img { filter: grayscale(1) brightness(.9) contrast(.85) !important; opacity: .72 !important; }
@media (max-width: 640px) { .wall-grid { row-gap: 12px; } .wall-grid .wt-tag { font-size: 9px; padding: 1px 4px; top: -6px; } }
@media (max-width: 420px) {
  .sound { font-size: 16px; padding: 0 8px; }
  .cheat kbd { min-width: 0; padding: 1px 5px; }
}
/* the cube that follows you down the page sits on top of content on small screens, so it stays home there */
@media (max-width: 700px) { .dock { display: none !important; } }
.wall-grid .wt.dk:not(.on) img { filter: brightness(0) invert(1) !important; opacity: .5 !important; }
/* phones and tablets: cartridges -> details -> what's included -> side quest at the very bottom */
@media (max-width: 900px) {
  .cart-left { display: contents; }
  .cart-rack { order: 1; } .cart-console { order: 2; } .cart-every { order: 3; } .cart-side { order: 4; }
}

/* ===== Phone top bar: keep the "From a Pixel" wordmark (12 Oct 2026) ===== */
@media (max-width: 520px) {
  .bar { gap: 8px; }
  .brand { gap: 6px; min-width: 0; }
  .brand img { width: 28px; height: 32px; }
  .word { display: inline-block !important; font-size: 11px; letter-spacing: .02em; }
  .sound { min-width: 40px; padding: 0 6px; font-size: 15px; }
  .sound .snd-l { display: none; }
  .sound::before { content: "\266A"; margin-right: 3px; color: var(--amber); }
  .bar .btn-sm { font-size: 16px; padding: 4px 10px 4px 46px !important; }
  .bar .btn-arcade.btn-sm .ab { width: 36px; height: 25px; left: 5px; }
}
@media (max-width: 370px) {
  .word { font-size: 10px; letter-spacing: 0; }
  .bar .btn-sm { font-size: 14px; padding-right: 8px; }
}

/* ===== Tron mode (cheat code): every light trace races for a few seconds ===== */
body.tron-show .m-trace .tr-base, body.tron-show .c3-trace .tr-base { opacity: .8; }
body.tron-show .m-trace .tr-run, body.tron-show .c3-trace .tr-run { opacity: 1 !important; stroke-dasharray: 140 860 !important; animation: lightcycle 1.3s linear infinite !important; }
body.tron-show .m-trace .tr-b, body.tron-show .c3-trace .tr-b { animation-delay: -.65s !important; }
body.tron-show .story::after { animation-duration: 1.4s; }
@media (prefers-reduced-motion: reduce) { body.tron-show .m-trace .tr-run, body.tron-show .c3-trace .tr-run { animation: none !important; stroke-dasharray: none !important; } }

/* ===== Catch me prize: arcade high-score screen ===== */
.prize { border: 0; padding: 0; background: none; max-width: min(440px, calc(100vw - 24px)); width: 100%; color: var(--text); }
.prize::backdrop { background: rgba(5,3,10,.78); backdrop-filter: blur(3px); }
.prize-in { position: relative; text-align: center; padding: 26px 22px 22px; border-radius: 18px; border: 2px solid #ff2bd6;
  background: radial-gradient(120% 70% at 50% 0%, rgba(255,43,214,.22), transparent 60%), linear-gradient(180deg, #120c1c, #07060b);
  box-shadow: 0 0 24px rgba(255,43,214,.6), 0 0 80px -10px rgba(25,230,255,.5), inset 0 0 30px -10px #ff2bd6; animation: prizein .5s cubic-bezier(.3,1.5,.5,1) both; }
@keyframes prizein { from { transform: scale(.7); opacity: 0; } }
.prize-tag { margin: 0; font: 11px var(--arc); color: #ffd23f; text-transform: uppercase; text-shadow: 0 0 8px #ff7a00; }
.prize h2 { margin: 10px 0 4px; font: clamp(20px, 6vw, 28px)/1.2 var(--arc); color: #fff; text-transform: uppercase; text-shadow: 0 0 6px #ff2bd6, 0 0 20px #ff2bd6, 0 0 40px #ff2bd6; animation: neonflick 2.4s steps(2) infinite; }
.prize-time { margin: 0 0 16px; font: 20px var(--term); color: #19e6ff; text-shadow: 0 0 8px #19e6ff; }
.prize-ini { display: grid; gap: 6px; justify-items: center; margin-bottom: 14px; }
.prize-ini span { font: 16px var(--term); color: var(--mute); text-transform: uppercase; }
.prize-ini input { width: 5.2em; text-align: center; font: 30px var(--arc); letter-spacing: .25em; padding: 10px 0 8px .25em; color: #ffd23f; background: #050409; border: 2px solid #19e6ff; border-radius: 8px; box-shadow: 0 0 14px -2px #19e6ff; text-transform: uppercase; caret-color: #ff2bd6; }
.prize-ini input:focus { outline: none; box-shadow: 0 0 22px #19e6ff; }
.prize-board { list-style: none; margin: 0 auto 16px; padding: 10px 14px; max-width: 260px; border: 1px solid rgba(25,230,255,.3); border-radius: 10px; background: rgba(0,0,0,.35); font: 20px/1.5 var(--term); }
.prize-board li { display: grid; grid-template-columns: 2em 1fr auto; gap: 8px; color: #cfc6bb; text-align: left; }
.prize-board li b { color: var(--mute); font-weight: 400; }
.prize-board li.me { color: #ffd23f; text-shadow: 0 0 8px #ff7a00; animation: blink 1s steps(1) infinite; }
.prize-gift { margin: 0 0 18px; padding: 14px; border-radius: 12px; border: 1px dashed #a6ff00; background: rgba(166,255,0,.06); box-shadow: inset 0 0 18px -8px #a6ff00; }
.prize-gift b { display: block; font: 12px var(--arc); color: #a6ff00; text-transform: uppercase; text-shadow: 0 0 8px #a6ff00; }
.prize-gift p { margin: 8px 0 4px; font-weight: 700; font-size: 17px; color: #fff; }
.prize-gift small { color: var(--mute); font-size: 13px; }
.prize-cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center; }
@media (prefers-reduced-motion: reduce) { .prize-in, .prize h2, .prize-board li.me { animation: none; } }

/* Bar logo: the pixel sits centred over the i (ı stem is narrower than its advance width, so nudge for the letter-spacing), a small gap above it */
.word .idot { left: 50%; width: .34em; height: .34em; margin-left: calc(-.17em - .02em); top: .02em; transform: rotate(-12deg); }
.word .i::before, .word .i::after { display: none; }
.brand:hover .word .idot, .brand:focus-visible .word .idot { top: .02em; margin-left: calc(-.17em - .02em); transform: rotate(0deg) scale(1.15); }
.word .idot, .brand:hover .word .idot, .brand:focus-visible .word .idot { top: .2em; }

/* ===== Enquiry form sends itself (launch, 11 Oct 2026) ===== */
.brief-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.brief-submit { cursor: pointer; font: inherit; }
.as-screen .brief-submit, .drawer .brief-submit { background: #ff2bd6; border: 2px solid #ff2bd6; color: #fff; border-radius: 6px; padding: 8px 22px; min-height: 48px; font: 23px var(--term); text-transform: uppercase;
  box-shadow: 0 0 16px #ff2bd6, 0 0 36px rgba(255,43,214,.45); }
.as-screen .brief-submit:hover, .drawer .brief-submit:hover { background: #ff4fe0; box-shadow: 0 0 22px #ff2bd6, 0 0 50px rgba(255,43,214,.6); }
.brief-sending .brief-submit { opacity: .7; cursor: progress; }
.brief-sent .brief-submit { background: #a6ff00 !important; border-color: #a6ff00 !important; color: #07060b !important; box-shadow: 0 0 18px #a6ff00 !important; cursor: default; }
.brief-status { margin: 12px 0 0; min-height: 1.4em; font: 20px var(--term); color: #19e6ff; text-shadow: 0 0 6px rgba(25,230,255,.6); }
.brief-sent .brief-status { color: #a6ff00; text-shadow: 0 0 8px rgba(166,255,0,.6); }
.brief-failed .brief-status { color: #ff8fd8; }
.brief-or { margin: 10px 0 0; font-size: 14px; color: var(--mute); }
.brief-or .brief-email, .brief-or .brief-wa { display: inline !important; padding: 0 !important; min-height: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important;
  color: #19e6ff !important; font: inherit !important; text-transform: none !important; text-decoration: underline; text-underline-offset: 3px; }
.brief-failed .brief-or { font-size: 16px; color: var(--text); }
.foot .small a { color: inherit; text-underline-offset: 3px; }

/* ===== Floating WhatsApp button (neon) ===== */
.wa-float { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 40;
  display: flex; align-items: center; gap: 10px; height: 58px; padding: 0 14px; border-radius: 999px; text-decoration: none; color: #fff;
  background: radial-gradient(circle at 30% 30%, #3dfc8a, #12b856 70%); border: 2px solid #b9ffd5;
  box-shadow: 0 0 0 4px rgba(7,6,11,.6), 0 0 18px rgba(37,211,102,.75), 0 0 46px rgba(37,211,102,.45), 0 10px 24px rgba(0,0,0,.5);
  opacity: 0; transform: translateY(20px) scale(.8); pointer-events: none; transition: opacity .25s, transform .35s cubic-bezier(.3,1.5,.5,1); }
.wa-float.on { opacity: 1; transform: none; pointer-events: auto; }
.wa-float svg { flex: none; filter: drop-shadow(0 0 4px rgba(255,255,255,.6)); }
.wa-float-t { display: grid; line-height: 1.1; padding-right: 4px; }
.wa-float-t b { font: 16px var(--arc); text-transform: uppercase; letter-spacing: .02em; text-shadow: 0 1px 0 rgba(0,0,0,.25); }
.wa-float-t small { font-size: 12px; font-weight: 600; opacity: .92; margin-top: 4px; }
.wa-float::after { content: ""; position: absolute; inset: -6px; border-radius: inherit; border: 2px solid rgba(61,252,138,.7); animation: waping 2.6s ease-out infinite; pointer-events: none; }
@keyframes waping { 0% { transform: scale(.92); opacity: .9; } 70%, 100% { transform: scale(1.18); opacity: 0; } }
.wa-float:hover { box-shadow: 0 0 0 4px rgba(7,6,11,.6), 0 0 26px rgba(37,211,102,.95), 0 0 70px rgba(37,211,102,.6), 0 10px 24px rgba(0,0,0,.5); }
.wa-float:active { transform: scale(.94); }
html.drawer-open .wa-float, .demo-mode[open] ~ .wa-float { opacity: 0; pointer-events: none; }
@media (max-width: 700px) { .wa-float { width: 58px; padding: 0; justify-content: center; } .wa-float-t { display: none; } }
@media (prefers-reduced-motion: reduce) { .wa-float::after { animation: none; display: none; } .wa-float { transition: none; } }

/* ===== Very narrow phones (Display Zoom, small Androids): keep the top bar inside the screen ===== */
@media (max-width: 374px) {
  .sound { display: none !important; }
  .bar { gap: 6px; }
  .word { font-size: 10px; }
  .bar .btn-sm { font-size: 14px; padding: 4px 8px 4px 42px !important; }
  .bar .btn-arcade.btn-sm .ab { width: 32px; height: 22px; left: 5px; }
}

/* ===== Reveal animations without scroll-linked timelines (they stall half-way in iOS Safari) ===== */
.sec-head h2, .bonus-title, .st, .mode, .mode h3::before, .levels .level, .bonus .level, .fame tbody tr { animation-timeline: auto !important; }
.sec-head h2, .bonus-title, .st { animation: none !important; }
@media (prefers-reduced-motion: no-preference) {
  html.reveal-on .sec-head h2:not(.in), html.reveal-on .bonus-title:not(.in) { clip-path: inset(0 100% 0 0); }
  html.reveal-on .sec-head h2.in, html.reveal-on .bonus-title.in { animation: wipe .5s steps(8) both !important; }
  html.reveal-on .st:not(.in) { opacity: 0; transform: translateX(-40px); }
  html.reveal-on .st.in { animation: stin .55s steps(6) both !important; }
}
@keyframes wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 -10% 0 0); } }
@keyframes stin { from { opacity: 0; transform: translateX(-40px); } }
@media (max-width: 374px) {
  .cheat .keys { display: block; margin-top: 6px; }
  .cheat kbd { font-size: 15px; padding: 0 4px; margin: 0 1px; }
}
/* touch: sideways slides on the cube turn it, vertical swipes still scroll the page */
[data-stage], .char { touch-action: pan-y; }

/* ===== FAQ (neon accordion) ===== */
.faq { display: grid; gap: 10px; }
.faq-q { border: 1px solid rgba(25,230,255,.32); border-radius: 12px; background: linear-gradient(180deg, #0d0b14, #07060b); box-shadow: inset 0 0 18px -10px #19e6ff; transition: border-color .2s, box-shadow .2s; }
.faq-q[open] { border-color: #19e6ff; box-shadow: 0 0 16px -4px #19e6ff, inset 0 0 22px -10px #19e6ff; }
.faq-q summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; min-height: 48px;
  font-weight: 800; font-stretch: 108%; font-size: clamp(17px, 2vw, 20px); color: var(--text); }
.faq-q summary::-webkit-details-marker { display: none; }
.faq-q summary::after { content: "+"; flex: none; font: 18px var(--arc); color: #19e6ff; text-shadow: 0 0 8px #19e6ff; transition: transform .2s; }
.faq-q[open] summary::after { content: "−"; color: #ff2bd6; text-shadow: 0 0 8px #ff2bd6; }
.faq-q summary:hover { color: #fff; }
.faq-q p { margin: 0; padding: 0 18px 18px; color: #d3c8b8; max-width: 70ch; }

/* Enquiry screen light cycles (12 Oct 2026). The old animated SVG trace re-painted the whole tall form
   every frame (24 fps on desktop, about 14 on phones). Two small glowing heads now ride the edge on their
   own layers, so the browser only moves them. Browsers without offset-path keep the static neon edge. */
.arcscreen .m-trace .tr-run { display: none; }
.as-cycle { display: none; }
@supports (offset-path: inset(0 round 18px)) {
  .as-cycle { display: block; position: absolute; left: 0; top: 0; z-index: 5; width: 9px; height: 3px; border-radius: 2px; pointer-events: none;
    offset-path: inset(0 round 18px); offset-anchor: 50% 50%; offset-rotate: auto; will-change: transform;
    background: var(--c); box-shadow: 0 0 6px var(--c); opacity: calc(1 - var(--i) * .045);
    animation: ascycle 10s linear infinite; animation-delay: calc(var(--i) * 13ms); }
  .as-cycle.as-head { background: #fff; box-shadow: 0 0 6px #fff, 0 0 14px var(--c); width: 8px; }
  .as-cycle-b { --c: #19e6ff; animation-delay: calc(-5s + var(--i) * 13ms); }
}
@keyframes ascycle { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@media (prefers-reduced-motion: reduce) { .as-cycle { display: none !important; } }

/* Selected cartridge: keep the neon glow but stop pulsing it. Animating three large drop-shadow
   filters re-painted the picture every frame and dropped the price list to about 35 fps. */
.cart3d[aria-checked="true"] .c3-tilt img { animation: none; }
/* Light traces: two glow layers instead of three or four. Same look, about half the paint work per frame
   (the price list ran at about 43 fps on a slower laptop with four). */
.c3-trace .tr-run, .m-trace .tr-run { filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 8px var(--c)); }

/* Hint under the cube: both texts are in the HTML and CSS picks one, so nothing moves when the script loads. */
.hint-touch { display: none; }
@media (pointer: coarse) { .hint-fine { display: none; } .hint-touch { display: inline; } }
/* Show the still of the 3D cube straight away, so the hero is never empty on a slow connection.
   The live cube replaces it as soon as it's ready (.gl), and .no-gl keeps showing the still. */
.js .char[data-char="hero"]:not(.gl) .char-static { visibility: visible; }
.char[data-char="hero"]:not(.gl) .char-photo { display: block; }

/* Headline gag: a block cursor deletes and retypes the last word (replaces the strike-through line) */
.hl-cur { display: inline-block; font-size: min(1em, 8.6vw); width: .42em; height: .78em; margin-left: .05em; vertical-align: -.04em; background: var(--o); box-shadow: 0 0 12px rgba(253,144,7,.7); transition: opacity .3s; }
.hl-cur.blink { animation: blink 1s steps(1) infinite; }
.hl-cur.off { opacity: 0; animation: none; }
.hl-swap .hl-w::after { display: none; }
/* keep the cube hint on one line on phones */
@media (max-width: 440px) { .hint { font-size: 16px; white-space: nowrap; } }

/* ---------- Footer game: Pixel City · Neon Run (neon-run.js) ---------- */
.nr { max-width: 1240px; margin: 4px auto 36px; text-align: left; }
.nr [hidden] { display: none !important; }
.nr-screen {
  position: relative; aspect-ratio: 16 / 7; min-height: 320px; overflow: hidden; isolation: isolate;
  border: 2px solid rgba(255, 181, 71, .38); border-radius: 14px;
  background: radial-gradient(70% 60% at 50% 92%, #5e1752 0%, #1d0b33 48%, #05030a 100%);
  box-shadow: 0 0 0 1px #000, 0 0 46px rgba(253, 144, 7, .14), 0 0 120px rgba(255, 43, 214, .08);
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
.nr-screen > canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.nr-poster { position: absolute; inset: 0; display: grid; place-items: center; color: var(--amber); font: 24px var(--term); text-shadow: var(--glow); letter-spacing: .08em; }
.nr-poster::before { content: ""; position: absolute; left: 50%; bottom: 22%; width: min(240px, 40%); aspect-ratio: 1; translate: -50% 0; border-radius: 50%;
  background: repeating-linear-gradient(to bottom, transparent 0 58%, #05030a 58% 64%) , linear-gradient(#ffc75a, #ff2a7a); opacity: .55; filter: blur(.5px); }
.nr-poster span { position: relative; animation: nr-blink 1s steps(2) infinite; }
.nr--live .nr-poster { display: none; }
@keyframes nr-blink { 50% { opacity: .35; } }

.nr-panel {
  position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 20px; text-align: center; background: linear-gradient(rgba(5, 3, 10, .18), rgba(5, 3, 10, .62) 70%, rgba(5, 3, 10, .82));
}
.nr-panel p { margin: 0; }
.nr-kicker { font: 22px var(--term); color: var(--amber); text-transform: uppercase; letter-spacing: .14em; text-shadow: var(--glow); }
.nr-logo { margin: 0; display: grid; gap: 6px; font-stretch: 100%; line-height: 1; }
.nr-logo span {
  font: clamp(26px, 5vw, 64px)/1 var(--arc); letter-spacing: .02em;
  background: linear-gradient(180deg, #fff3cf 0%, #ffb547 45%, #ff4f8b 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 10px rgba(255, 79, 139, .55)) drop-shadow(0 0 2px rgba(255, 181, 71, .9));
}
.nr-logo em { font: clamp(22px, 3.2vw, 38px)/1 var(--term); font-style: normal; letter-spacing: .5em; padding-left: .5em; color: #8ff1ff; text-shadow: 0 0 8px rgba(45, 226, 255, .8), 0 0 22px rgba(45, 226, 255, .35); text-transform: uppercase; }
.nr-go { margin-top: 8px; animation: nr-pulse 1.4s steps(2) infinite; }
.nr-go:hover, .nr-go:focus-visible { animation: none; }
@keyframes nr-pulse { 50% { box-shadow: 4px 4px 0 #6b3a00, 0 0 24px rgba(253, 144, 7, .7); } }
.nr-help, .nr-tip, .nr-bestline, .nr-stats { font: 20px/1.25 var(--term); color: var(--mute); }
.nr-help .nr-touch { display: none; }
@media (pointer: coarse) { .nr-help .nr-keys { display: none; } .nr-help .nr-touch { display: inline; } }
.nr-tip b { font-weight: 400; }
.c-cy { color: #8ff1ff; } .c-mg { color: #ff8ae6; } .c-am { color: var(--amber); }
.nr-bestline:empty { display: none; }
.nr-bestline { color: var(--amber); }
.nr-final { display: grid; gap: 4px; }
.nr-final b { font: clamp(28px, 5vw, 56px)/1 var(--arc); color: #fff3cf; text-shadow: 0 0 12px rgba(255, 181, 71, .8); }
.nr-final span { font: 22px var(--term); color: #ff8ae6; text-transform: uppercase; letter-spacing: .1em; }
.nr-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 6px; }
.nr-over .nr-cta { animation: none; }

.nr-hud { position: absolute; inset: 0; z-index: 2; pointer-events: none; padding: 14px 16px; color: #fff3cf; }
.nr-hud p { margin: 0; }
.nr-score { position: absolute; left: 16px; top: 12px; display: grid; gap: 4px; }
.nr-score small { font: 16px var(--term); color: var(--mute); text-transform: uppercase; letter-spacing: .12em; }
.nr-score b { font: clamp(16px, 2vw, 24px)/1 var(--arc); text-shadow: 0 0 10px rgba(255, 181, 71, .7); }
.nr-score i { font: 13px var(--arc); font-style: normal; color: var(--mute); }
.nr-score i.is-hot { color: #ff8ae6; text-shadow: 0 0 8px rgba(255, 43, 214, .8); }
.nr-side { position: absolute; right: 16px; top: 12px; display: grid; gap: 6px; justify-items: end; font: 18px var(--term); color: var(--mute); text-transform: uppercase; }
.nr-side b { color: #fff3cf; font-weight: 400; }
.nr-px { font: 15px var(--arc); color: var(--amber) !important; text-shadow: var(--glow); }
.nr-px i { font-style: normal; }
.nr-powers { position: absolute; left: 50%; bottom: 14px; translate: -50% 0; font: 18px var(--term); text-transform: uppercase; letter-spacing: .1em; color: #8ff1ff; text-shadow: 0 0 8px rgba(45, 226, 255, .8); white-space: nowrap; }

.nr-pops { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.nr-pop { position: absolute; translate: -50% -50%; font: 13px var(--arc); color: #ffe07a; text-shadow: 0 0 8px rgba(253, 144, 7, .9); white-space: nowrap; animation: nr-up .95s ease-out forwards; }
.nr-pop--hot { color: #ff8ae6; text-shadow: 0 0 10px rgba(255, 43, 214, .9); }
.nr-pop--warn { color: #ff6b7d; text-shadow: 0 0 10px rgba(255, 42, 74, .9); }
.nr-pop--big { left: 50%; top: 36%; font-size: clamp(20px, 4vw, 44px); color: #fff3cf; text-shadow: 0 0 14px rgba(255, 181, 71, .9), 0 0 40px rgba(255, 79, 139, .6); animation: nr-big 1.3s ease-out forwards; }
@keyframes nr-up { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-46px); } }
@keyframes nr-big { 0% { opacity: 0; transform: scale(1.8); } 12% { opacity: 1; transform: scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: scale(.94); } }

.nr-ctrl { position: absolute; right: 10px; bottom: 10px; z-index: 4; display: flex; gap: 8px; }
.nr-ic {
  width: 40px; height: 40px; display: grid; place-items: center; padding: 0; cursor: pointer;
  background: rgba(10, 6, 20, .7); color: var(--amber); border: 1px solid rgba(255, 181, 71, .35); border-radius: 8px;
}
.nr-ic:hover, .nr-ic:focus-visible { border-color: var(--amber); background: rgba(40, 20, 8, .85); }
.nr-ic svg { width: 22px; height: 22px; fill: currentColor; }
.nr-ic .i-off, .nr-ic.is-off .i-on, .nr-ic.is-full .i-on { display: none; }
.nr-ic.is-off .i-off, .nr-ic.is-full .i-off { display: block; }
.nr-nogl { display: none; }
.nr--nogl .nr-nogl { display: grid; place-items: center; position: absolute; inset: 0; z-index: 5; margin: 0; padding: 24px; text-align: center; font: 22px var(--term); color: var(--amber); background: #0a0614; }
.nr:not(.nr--ready) .nr-ctrl, .nr:not(.nr--ready) .nr-title { visibility: hidden; }

.nr--playing .nr-screen { touch-action: none; cursor: none; }
.nr--full { margin: 0; }
.nr--full .nr-screen { position: fixed; inset: 0; z-index: 2147483000; width: 100%; height: 100%; min-height: 0; aspect-ratio: auto; border: 0; border-radius: 0; }
.nr--full .nr-hud { padding-top: max(14px, env(safe-area-inset-top)); }
.nr--full .nr-ctrl { right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); }
html.nr-lock, html.nr-lock body { overflow: hidden; }
html.nr-lock .wa-float, html.nr-lock .dock, html.nr-lock .chat { visibility: hidden; }

@media (max-width: 720px) {
  .nr-screen { aspect-ratio: 4 / 3.6; min-height: 0; border-radius: 10px; }
  .nr-tip { display: none; }
  .nr-kicker { font-size: 19px; }
  .nr-score b { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .nr-go, .nr-poster span { animation: none; } }
.nr-pop--tip { left: 50%; top: 24%; font-size: clamp(13px, 2.2vw, 20px); color: #fff; padding: 8px 12px; background: rgba(255, 42, 74, .85); border: 2px solid #ffd0d8; box-shadow: 0 0 22px rgba(255, 42, 74, .7); text-shadow: none; animation: nr-big 1.6s ease-out forwards; }

/* Neon Run leaderboard */
.nr-link { margin-top: 2px; padding: 4px 10px; background: none; border: 1px dashed rgba(255, 181, 71, .45); color: var(--amber); font: 19px var(--term); cursor: pointer; border-radius: 4px; }
.nr-link:hover, .nr-link:focus-visible { border-style: solid; background: rgba(40, 20, 8, .7); }
.nr-over { flex-direction: row; flex-wrap: wrap; align-content: center; gap: 14px 40px; overflow-y: auto; justify-content: safe center; }
.nr-over-l { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 100%; }
.nr-over-l .nr-row { max-width: 100%; }
.nr-over-r { width: min(340px, 100%); text-align: left; }
.nr-post, .nr-after { display: grid; gap: 8px; padding: 14px; background: rgba(10, 6, 20, .82); border: 1px solid rgba(255, 181, 71, .35); border-radius: 10px; }
.nr-post-h, .nr-rank { font: 14px/1.4 var(--arc); color: #fff3cf; text-shadow: 0 0 8px rgba(255, 181, 71, .6); }
.nr-field { display: grid; gap: 3px; font: 17px var(--term); color: var(--mute); }
.nr-field em { font-style: normal; opacity: .75; }
.nr-field input { width: 100%; min-height: 40px; padding: 6px 10px; background: #0c0816; color: #fff3cf; border: 1px solid rgba(255, 181, 71, .35); border-radius: 6px; font: 20px var(--term); }
.nr-field input:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 2px rgba(255, 181, 71, .25); }
.nr-fine { font: 16px/1.25 var(--term); color: var(--mute); margin: 0; }
.nr-fine a { color: var(--amber); }
.nr-check { display: flex; gap: 8px; align-items: flex-start; font: 17px/1.2 var(--term); color: var(--text); cursor: pointer; }
.nr-check input { margin-top: 2px; width: 18px; height: 18px; accent-color: var(--o); flex: none; }
.nr-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.nr-msg { font: 17px var(--term); color: #ff8ea0; min-height: 0; }
.nr-msg:empty { display: none; }
.nr-board { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; min-width: min(320px, 100%); text-align: left; }
.nr-board li { display: grid; grid-template-columns: 2.4em 1fr auto; gap: 8px; align-items: baseline; padding: 3px 8px; font: 19px var(--term); color: var(--text); border-radius: 4px; }
.nr-board li:nth-child(odd) { background: rgba(255, 255, 255, .035); }
.nr-board li:first-child:not(.nr-empty) { color: #ffe07a; text-shadow: 0 0 8px rgba(255, 181, 71, .6); }
.nr-board .r { color: var(--mute); }
.nr-board .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: uppercase; }
.nr-board .s { font: 13px var(--arc); color: var(--amber); }
.nr-board li.is-you { background: rgba(255, 43, 214, .18); outline: 1px solid rgba(255, 138, 230, .6); }
.nr-board .nr-empty { display: block; color: var(--mute); text-align: center; }
.nr-boardp { overflow-y: auto; justify-content: safe center; }
.nr-boardp .nr-board { width: min(380px, 100%); max-height: 46%; overflow-y: auto; }
.nr-boardp .nr-fine { max-width: 40ch; }
.nr-tabs { display: flex; gap: 6px; }
.nr-tabs button { padding: 4px 12px; background: none; border: 1px solid rgba(255, 181, 71, .35); color: var(--mute); font: 18px var(--term); border-radius: 4px; cursor: pointer; text-transform: uppercase; }
.nr-tabs button[aria-selected="true"] { background: var(--amber); color: #170e05; border-color: var(--amber); }
@media (max-width: 720px) { .nr-over { flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; padding-inline: 16px; } .nr-over-l { gap: 6px; width: 100%; } .nr-over-l .nr-row .btn { flex: 1 1 200px; } }