/* Hallmark · shape: custom (a link page in one cabinet: marquee, status, header, socials, play card, recent runs, apps) · genre: playful · theme: brand (DESIGN.md) · redesign: full
 * paper: oklch(10% 0.015 237) · accent: oklch(75% 0.139 233) · display: Press Start 2P · body: JetBrains Mono · hero: custom (the live play card) · nav: none (marquee and one status pill) · footer: none · signature: the live BeatLeader play card, its accuracy tallying up
 * axes: dark/pixel/cool · posture: full-palette · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R3 V4 · weakest: R, the cabinet stacks scanlines, grain, flicker, stars and a breathing frame; kept as the locked material, and cut the fake waveform, the clock, the counters and every glued arrow instead */
/* Hallmark · hero-review: fix · 5 findings · 4 resolved 1 partial (the owner rewrote the tagline in the not voice; the cover is bigger but still a thumbnail) */
/* Hallmark · finish-review: subagent · 7 findings · 7 resolved · gap: none */
/* Hallmark · waive 29 · phosphor bloom on text and frames plus two fixed deep-space blooms, never orbs · the glow is the light of the arcade cabinet screen itself */
/* Hallmark · waive 47c · scanlines, grain, vignette and cartridge slot ribs, all drawn as geometry · the cabinet surface is the arcade material this page is drawn on */
/* Hallmark · waive 78 · 16px pixel panel titles over dashboard panels · the page is one arcade cabinet screen of panels, not a landing page */
/* Hallmark · waive 66 · the boot splash only, under a second per load · the NOTNIC OS boot is the arcade brand joke */
/* Hallmark · answered F2 · the boot lines use dot leaders between a label and its status, not ellipses */
/* Hallmark · dropped the clock, the hero waveform, the TRACK label, slot numbers, the run index, the two-letter social codes and their tooltip · DESIGN.md: no visitor clock, real readouts only, no kickers or counters, names always visible */
/* Hallmark · dropped play, the icon beside WATCH REPLAY · the Cursor Rule: an action is the verb alone */
/* Hallmark · dropped n, the grain filter id · it moved with the grain layer from index.html into this stylesheet */
/* Hallmark · dropped the progress bar's own readout · 69: it repeated the accuracy 60px under the readout */
/* Hallmark · dismissed 54 · SectionTitle renders a real h2 with the id the section is labelled by */
/* Hallmark · reworded "► A PLACE FOR MY SOCIALS & PROJECTS ◄" to "not a place for my links and socials" (the owner's copy) · 63 names arrows glued to text and bracketed lines */
/* Hallmark · reworded "► LAUNCH" to "launch", "► REFRESH" to "REFRESH", "WATCH REPLAY ↗" to "WATCH REPLAY", "★ CHEAT ACTIVATED ★" to "CHEAT ACTIVATED" · 63 names arrows glued to actions and bracketed titles */
/* Hallmark · reworded "— GAMES / APPS —" to "GAMES / APPS" and "NOTNIC OS v4.7.1 — © 1996-2026" to "notnic os v4.7.1 © 1996-2026" · 19 names em dashes in copy */

/* ── tokens: the one block (DESIGN.md, The One Token Block Rule) ─────── */
:root {
  /* palette */
  --c-cyan: #38bdf8;
  --c-gold: #fbbf24;
  --c-gold-soft: #fde68a;
  --c-green: #4ade80;
  --c-red: #f87171;
  --c-expert-plus: #c084fc;
  --c-expert: #fca5a5;
  --c-teal: #5eead4;
  --c-white: #eaf6ff;
  --c-body: #d6ecfc;
  --c-mid: #9ec7e2;
  --c-dim: #7aa2c2;
  --c-faint: #2d536e;
  --c-void: #010407;
  /* deep space under the glass */
  --c-nebula: #0f3764;
  --c-abyss: #020617;
  --c-logo-shadow: #0c2d4a;
  --c-cover: #08152a;

  /* navy glass: always translucent, the stars show through */
  --glass: rgba(7, 16, 34, 0.78);
  --glass-hi: rgba(10, 28, 58, 0.88);
  --glass-top: rgba(8, 18, 42, 0.92);
  --glass-bottom: rgba(2, 6, 23, 0.95);
  --well: rgba(2, 8, 20, 0.85);
  --well-deep: rgba(2, 6, 23, 0.8);

  /* glow strengths per voice */
  --cyan-faint: color-mix(in oklch, var(--c-cyan) 6%, transparent);
  --cyan-tint: color-mix(in oklch, var(--c-cyan) 10%, transparent);
  --cyan-quiet: color-mix(in oklch, var(--c-cyan) 18%, transparent);
  --cyan-line: color-mix(in oklch, var(--c-cyan) 35%, transparent);
  --cyan-on: color-mix(in oklch, var(--c-cyan) 55%, transparent);
  --cyan-hot: color-mix(in oklch, var(--c-cyan) 80%, transparent);
  --gold-tint: color-mix(in oklch, var(--c-gold) 10%, transparent);
  --gold-quiet: color-mix(in oklch, var(--c-gold) 18%, transparent);
  --gold-line: color-mix(in oklch, var(--c-gold) 45%, transparent);
  --gold-on: color-mix(in oklch, var(--c-gold) 55%, transparent);
  --gold-hot: color-mix(in oklch, var(--c-gold) 85%, transparent);
  --green-line: color-mix(in oklch, var(--c-green) 55%, transparent);
  --green-on: color-mix(in oklch, var(--c-green) 60%, transparent);
  --red-tint: color-mix(in oklch, var(--c-red) 10%, transparent);
  --red-line: color-mix(in oklch, var(--c-red) 50%, transparent);
  --red-on: color-mix(in oklch, var(--c-red) 60%, transparent);
  --expert-plus-tint: color-mix(in oklch, var(--c-expert-plus) 12%, transparent);
  --expert-plus-line: color-mix(in oklch, var(--c-expert-plus) 55%, transparent);
  --expert-tint: color-mix(in oklch, var(--c-expert) 12%, transparent);
  --expert-line: color-mix(in oklch, var(--c-expert) 55%, transparent);
  --teal-tint: color-mix(in oklch, var(--c-teal) 10%, transparent);
  --teal-line: color-mix(in oklch, var(--c-teal) 50%, transparent);
  --dim-tint: color-mix(in oklch, var(--c-dim) 15%, transparent);
  --dim-line: color-mix(in oklch, var(--c-dim) 45%, transparent);
  /* darkness: the void at strength */
  --shade-faint: color-mix(in oklch, var(--c-void) 18%, transparent);
  --shade-quiet: color-mix(in oklch, var(--c-void) 40%, transparent);
  --shade-on: color-mix(in oklch, var(--c-void) 55%, transparent);
  --shade-veil: color-mix(in oklch, var(--c-void) 65%, transparent);
  --shade-hot: color-mix(in oklch, var(--c-void) 70%, transparent);
  --abyss-veil: color-mix(in oklch, var(--c-abyss) 55%, transparent);
  --abyss-shroud: color-mix(in oklch, var(--c-abyss) 85%, transparent);
  --abyss-deep: color-mix(in oklch, var(--c-abyss) 95%, transparent);
  --nebula-bloom: color-mix(in oklch, var(--c-nebula) 55%, transparent);
  /* light: stars, sheen and the power-on flash */
  --star-hi: color-mix(in oklch, var(--c-body) 85%, transparent);
  --star-mid: color-mix(in oklch, var(--c-body) 60%, transparent);
  --star-lo: color-mix(in oklch, var(--c-body) 40%, transparent);
  --sheen-faint: color-mix(in oklch, var(--c-white) 18%, transparent);
  --sheen: color-mix(in oklch, var(--c-white) 35%, transparent);
  --sheen-hot: color-mix(in oklch, var(--c-white) 92%, transparent);

  /* type: two faces, Press Start 2P only on its 8px grid */
  --font-display: 'Press Start 2P', monospace;
  --font-body: 'JetBrains Mono', ui-monospace, monospace;
  --text-label: 12px;
  --text-data: 14px;
  --text-body: 16px;
  --text-head: 16px;
  --text-title: 22px;
  --px-24: 24px;
  --px-32: 32px;
  --px-40: 40px;
  --px-48: 48px;
  --px-56: 56px;
  --px-64: 64px;
  --px-72: 72px;

  /* space: a 4px scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* motion */
  --ease-snap: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-press: 0.12s;
  --dur-state: 0.15s;
  --dur-reveal: 0.22s;
}

/* ── base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  overflow-x: clip;
  background: var(--c-void);
  color: var(--c-body);
  font-family: var(--font-body);
  overscroll-behavior: none;
}
/* stop iOS Safari inflating the pixel type on rotation to landscape */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-color: var(--cyan-line) var(--c-void);
}
body { caret-color: var(--c-cyan); }
::selection { background: var(--cyan-on); color: var(--c-white); }
:focus-visible { outline: 2px solid var(--c-cyan); outline-offset: 2px; }

/* ── ground: deep-space gradient + starfield (parallax fog) ─────────── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 20% 10%, var(--nebula-bloom), transparent 55%),
    radial-gradient(ellipse at 85% 90%, var(--cyan-quiet), transparent 60%),
    radial-gradient(ellipse at 50% 50%, var(--abyss-deep) 0%, var(--c-void) 80%),
    var(--c-void);
}
body::after {
  content: '';
  position: fixed;
  inset: -50%;
  z-index: -2;
  pointer-events: none;
  opacity: 0.55;
  background-image:
    radial-gradient(1px 1px at 14% 22%, var(--star-hi), transparent 50%),
    radial-gradient(1px 1px at 38% 68%, var(--star-mid), transparent 50%),
    radial-gradient(1px 1px at 61% 12%, var(--cyan-hot), transparent 50%),
    radial-gradient(1px 1px at 78% 44%, var(--star-lo), transparent 50%),
    radial-gradient(1px 1px at 8% 82%, var(--gold-on), transparent 50%),
    radial-gradient(1px 1px at 92% 76%, var(--star-mid), transparent 50%),
    radial-gradient(2px 2px at 25% 50%, var(--cyan-on), transparent 50%),
    radial-gradient(2px 2px at 70% 30%, var(--star-lo), transparent 50%);
  background-size: 300px 300px, 220px 220px, 410px 410px, 180px 180px, 340px 340px, 260px 260px, 600px 600px, 480px 480px;
  animation: drift 120s linear infinite;
}
@keyframes drift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-120px, -80px, 0); }
}

/* ── CRT overlay: scanlines + vignette, grain, flicker (no blend modes:
   alpha black is the same pixels and skips a full-viewport re-blend) ── */
.crt-scanlines {
  position: fixed;
  inset: 0;
  z-index: 9997;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(to bottom, transparent 0, transparent 2px, var(--shade-faint) 3px, var(--shade-faint) 4px),
    radial-gradient(ellipse at 50% 50%, transparent 55%, var(--shade-on) 100%);
}
.crt-grain {
  position: fixed;
  inset: 0;
  z-index: 9996;
  pointer-events: none;
  opacity: 0.06;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 0.7s steps(4) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-3%, 2%); }
  50% { transform: translate(2%, -2%); }
  75% { transform: translate(-1%, 3%); }
  100% { transform: translate(0, 0); }
}
.crt-flicker {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background: var(--cyan-faint);
  opacity: 0;
  animation: flicker 6s infinite;
}
@keyframes flicker {
  0%, 96%, 100% { opacity: 0; }
  97% { opacity: 0.35; }
  97.5% { opacity: 0; }
  98% { opacity: 0.5; }
  98.5% { opacity: 0; }
}

/* ── stage: centres a phone column, widens by tier, 2 columns at 900 ── */
#stage {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  min-height: 100dvh;
  /* viewport-fit=cover: keep content clear of the notch in landscape */
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
}
#root {
  position: relative;
  width: 100%;
  max-width: 460px;
  min-height: 100dvh;
  box-shadow: 0 0 80px var(--shade-hot);
}
@media (max-width: 480px) { #root { max-width: 100%; box-shadow: none; } }
@media (min-width: 640px) { #root { max-width: 740px; } }
@media (min-width: 900px) { #root { max-width: 980px; } }
@media (min-width: 1200px) { #root { max-width: 1140px; } }
@media (min-width: 1500px) { #root { max-width: 1320px; } }

/* ── boot: a CRT power-on, gone in under a second, never without JS ── */
#boot {
  position: fixed;
  inset: 0;
  z-index: 10000;
  overflow: hidden;
  padding:
    calc(var(--space-5) + env(safe-area-inset-top, 0))
    calc(var(--space-5) + env(safe-area-inset-right, 0))
    var(--space-5)
    calc(var(--space-5) + env(safe-area-inset-left, 0));
  background: var(--c-void);
  color: var(--c-cyan);
  font-family: var(--font-body);
  font-size: var(--text-data);
  line-height: 1.8;
  text-shadow: 0 0 6px var(--cyan-on);
  transition: opacity 0.4s ease;
}
#boot.done { opacity: 0; pointer-events: none; }
.no-js #boot { display: none; }
#boot .boot-line { white-space: pre-wrap; opacity: 0; animation: boot-in 0.2s ease forwards; }
#boot .boot-ok { color: var(--c-green); }
#boot .boot-warn { color: var(--c-gold); }
#boot .boot-start {
  margin-top: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-head);
  line-height: 1.25;
}
#boot .boot-cursor::after {
  content: '█' / '';
  margin-left: var(--space-1);
  animation: boot-blink 0.6s steps(2) infinite;
}
@keyframes boot-in { to { opacity: 1; } }
@keyframes boot-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0.1; } }
/* power-on flash: a bright band opens across the tube and fades,
   scaled rather than resized */
#boot::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--sheen-hot);
  box-shadow: 0 0 22px var(--sheen-hot);
  transform-origin: 50% 0;
  animation: boot-sweep 0.9s ease-out forwards;
}
@keyframes boot-sweep {
  0% { transform: scaleY(0.8) translateY(12%); opacity: 0.95; }
  60% { transform: scaleY(1); opacity: 0.05; }
  100% { transform: scaleY(0); opacity: 0; }
}

/* ── without JavaScript: the socials still work ─────────────────────── */
.ea-nojs {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-7) var(--space-4);
  text-align: center;
}
.ea-nojs-links {
  display: grid;
  gap: var(--space-2);
  width: min(100%, 320px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.ea-nojs-links a {
  display: block;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--gold-line);
  background: var(--well);
  color: var(--c-gold);
  font-size: var(--text-body);
  text-decoration: none;
}
.ea-nojs-links a:hover { border-color: var(--c-gold); color: var(--c-gold-soft); }
.ea-nojs-links a:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 2px; }

/* ── the cabinet ─────────────────────────────────────────────────── */
.ea-root {
  position: relative;
  width: 100%;
  min-height: 100%;
  color: var(--c-body);
  font-family: var(--font-body);
  font-size: var(--text-body);
  text-rendering: optimizeLegibility;
}
/* The Phosphor Bloom Rule */
.ea-root, .ea-root * { text-shadow: 0 0 1px currentColor; }
/* the arcade supplies its own press feedback; kill the gray iOS tap flash */
.ea-root a, .ea-root button { -webkit-tap-highlight-color: transparent; }

/* Konami rainbow mode */
.ea-konami { animation: ea-hue 4s linear infinite; }
@keyframes ea-hue { from { filter: hue-rotate(0deg); } to { filter: hue-rotate(360deg); } }

.ea-page {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  /* clear the home indicator on notched phones (env is 0 elsewhere) */
  padding: 0 0 calc(var(--space-6) + env(safe-area-inset-bottom, 0));
}

/* ── marquee ─────────────────────────────────────────────────────── */
.ea-marquee {
  position: relative;
  display: flex;
  align-items: stretch;
  /* first element on the page: stay below the status bar when installed */
  padding-top: env(safe-area-inset-top, 0);
  background: linear-gradient(180deg, var(--well), var(--glass-top));
  border-top: 1px solid var(--cyan-on);
  border-bottom: 2px solid var(--c-cyan);
  box-shadow: 0 0 14px var(--cyan-on), inset 0 0 12px var(--shade-on);
  color: var(--c-cyan);
  font-family: var(--font-display);
  font-size: var(--text-head);
  line-height: 1.25;
}
.ea-marquee-viewport { flex: 1; min-width: 0; overflow: hidden; padding: var(--space-3) 0; }
.ea-marquee-track {
  display: flex;
  width: max-content;
  white-space: nowrap;
  text-shadow: 0 0 8px var(--cyan-hot);
  /* the font is monospaced: scale this with the item text to keep the speed */
  animation: ea-scroll 54s linear infinite;
}
@keyframes ea-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* pointer users can hold the marquee still to read it; anyone can stop it */
.ea-marquee:hover .ea-marquee-track,
.ea-marquee[data-paused="true"] .ea-marquee-track { animation-play-state: paused; }
.ea-marquee-toggle {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-height: 44px;
  padding: 0;
  background: var(--well);
  border: 0;
  border-left: 1px solid var(--cyan-line);
  color: var(--c-cyan);
  cursor: pointer;
  filter: drop-shadow(0 0 4px var(--cyan-on));
  transition: background var(--dur-state);
}
.ea-marquee-toggle:hover { background: var(--cyan-quiet); }
/* the strip runs to the screen edge, so its ring sits inside the button */
.ea-marquee-toggle:focus-visible { outline: 2px solid var(--c-cyan); outline-offset: -4px; }
.ea-marquee-toggle:active { background: var(--cyan-line); }
.ea-marquee-toggle[aria-pressed="true"] { color: var(--c-white); }

/* ── status bar: one pill, live only while live ───────────────────── */
.ea-statusbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4) 0;
}
.ea-status-sync {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  background: var(--well);
  border: 1px solid var(--green-line);
  color: var(--c-green);
  font-size: var(--text-label);
  line-height: 1.4;
  text-shadow: 0 0 6px var(--green-on);
}
.ea-status-sync[data-tone="stale"] { color: var(--c-gold); border-color: var(--gold-line); text-shadow: 0 0 6px var(--gold-on); }
.ea-status-sync[data-tone="mock"] { color: var(--c-dim); border-color: var(--dim-line); text-shadow: none; }
.ea-sync-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
  animation: ea-pulse-dot 1.4s ease-in-out infinite;
}
.ea-status-sync[data-tone="stale"] .ea-sync-dot,
.ea-status-sync[data-tone="mock"] .ea-sync-dot { animation: none; box-shadow: none; }
@keyframes ea-pulse-dot { 0%, 100% { opacity: 0.5; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1.1); } }
.ea-sync-text { display: inline-block; }

/* visually hidden, still read by assistive tech (live-region text) */
.ea-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── header ──────────────────────────────────────────────────────── */
/* left-aligned: the wordmark leads, nothing else shares its axis */
.ea-header {
  position: relative;
  display: grid;
  justify-content: start;
  padding: 0 var(--space-4);
  text-align: left;
}
.ea-logo {
  position: relative;
  display: inline-block;
  min-width: 0;
  margin: 0 0 var(--space-3);
  color: var(--c-white);
  font-family: var(--font-display);
  font-size: var(--px-32);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 1px;
  overflow-wrap: break-word;
  text-shadow:
    2px 2px 0 var(--c-logo-shadow),
    0 0 12px var(--cyan-on),
    0 0 28px var(--cyan-line),
    0 0 60px var(--cyan-quiet);
}
.ea-logo-dot { color: var(--c-cyan); }
.ea-cursor {
  display: inline-block;
  margin-left: var(--space-1);
  color: var(--c-cyan);
  font-size: 0.85em;
  text-shadow: 0 0 8px var(--c-cyan);
  animation: ea-blink 0.7s steps(2) infinite;
}
@keyframes ea-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0.3; } }
/* zero width so it never sizes the block, then stretched to it */
.ea-rule {
  width: 0;
  min-width: 100%;
  margin: 0 0 var(--space-2);
  overflow: hidden;
  white-space: nowrap;
  color: var(--c-faint);
  font-size: var(--text-label);
  line-height: 1;
}
.ea-tag {
  margin: 0;
  color: var(--c-mid);
  font-size: var(--text-body);
  line-height: 1.5;
  /* on narrow phones it wraps: two even lines, never one word alone */
  text-wrap: balance;
}
/* the "not" of the notnic domain joke, in the wordmark's cyan */
.ea-tag-not { color: var(--c-cyan); text-shadow: 0 0 6px var(--cyan-on); }

/* ── panels ──────────────────────────────────────────────────────── */
.ea-section { display: flex; flex-direction: column; gap: var(--space-3); padding: 0 var(--space-4); }
.ea-section-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px dashed var(--cyan-quiet);
}
.ea-section-title-left {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  margin: 0;
  color: var(--c-cyan);
  font-family: var(--font-display);
  font-size: var(--text-head);
  font-weight: 400;
  line-height: 1.25;
  text-transform: uppercase;
  overflow-wrap: break-word;
  text-shadow: 0 0 8px var(--cyan-on);
}
.ea-section-title-right {
  display: inline-flex;
  gap: var(--space-3);
  color: var(--c-dim);
  font-size: var(--text-label);
  line-height: 1.4;
}

/* ── socials deck: the page's job, its only gold controls ─────────── */
.ea-controls {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--well);
  border: 2px solid var(--c-gold);
  box-shadow: 0 0 18px var(--gold-on), inset 0 0 14px var(--gold-quiet);
}
.ea-ctrl {
  position: relative;
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-width: 0;
  min-height: 48px;
  padding: var(--space-3) var(--space-1);
  background:
    linear-gradient(180deg, var(--gold-tint), transparent),
    linear-gradient(180deg, var(--glass-top), var(--glass-bottom));
  border: 1px solid var(--gold-line);
  color: var(--c-gold);
  text-align: center;
  text-decoration: none;
  transition: transform var(--dur-press), box-shadow var(--dur-state), border-color var(--dur-state), filter var(--dur-press);
}
/* rows of three; a short last row shares its width, never one alone */
.ea-ctrl:nth-child(3n+1):nth-last-child(2),
.ea-ctrl:nth-child(3n+2):last-child { grid-column: span 3; }
.ea-ctrl:nth-child(3n+1):last-child { grid-column: 1 / -1; }
.ea-ctrl:hover {
  transform: translateY(-3px);
  border-color: var(--c-gold);
  box-shadow: 0 4px 0 var(--gold-line), 0 0 14px var(--gold-on);
  filter: brightness(1.18);
  animation: ea-flicker 0.6s steps(2) 1;
}
.ea-ctrl:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 2px; }
.ea-ctrl:active { transform: translateY(0); box-shadow: 0 0 8px var(--gold-line); }
.ea-ctrl-icon { display: inline-flex; color: var(--c-gold); filter: drop-shadow(0 0 5px var(--gold-hot)); }
.ea-ctrl-label {
  max-width: 100%;
  color: var(--c-gold);
  font-size: var(--text-data);
  line-height: 1.4;
  text-shadow: 0 0 6px var(--gold-on);
}
/* The Cursor Rule: the menu cursor, shown in the list layout on desktop */
.ea-ctrl::before {
  content: '►' / '';
  display: none;
  position: absolute;
  left: var(--space-3);
  color: var(--c-gold);
  font-size: var(--text-label);
  opacity: 0;
}
.ea-ctrl:hover::before, .ea-ctrl:focus-visible::before { opacity: 1; }
.ea-ctrl:hover .ea-ctrl-label,
.ea-ctrl:focus-visible .ea-ctrl-label { color: var(--c-gold-soft); }
@keyframes ea-flicker {
  0%, 100% { filter: brightness(1.18); }
  40% { filter: brightness(1.45); }
  60% { filter: brightness(0.95); }
  80% { filter: brightness(1.3); }
}

/* ── the play card (signature) ───────────────────────────────────── */
/* frame: owns the power-on entrance, the breathing glow and the hover
   lift, so the card itself can stay overflow:hidden for its layers */
.ea-hero-frame {
  position: relative;
  transition: transform var(--dur-state);
  transform-origin: 50% 50%;
  /* backwards fill: once on, the frame is free to lift on hover */
  animation: ea-hero-on 0.55s var(--ease-snap) backwards;
}
.ea-hero-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: 0 0 28px var(--cyan-hot), 0 0 90px var(--cyan-line);
  opacity: 0.35;
  animation: ea-hero-breath 3.6s ease-in-out infinite;
}
/* the breath is an opacity fade on a static shadow layer: composited */
@keyframes ea-hero-breath { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
/* power-on: the picture opens from a bright line across the tube */
@keyframes ea-hero-on {
  0% { opacity: 0; transform: scaleY(0.02); }
  40% { opacity: 1; }
  100% { opacity: 1; transform: scaleY(1); }
}
.ea-hero-frame:hover { transform: translate(-2px, -3px); }
.ea-hero-frame:active { transform: translate(1px, 1px); }
.ea-hero {
  position: relative;
  z-index: 1;
  display: block;
  overflow: hidden;
  background: var(--glass-hi);
  border: 2px solid var(--c-cyan);
  box-shadow: 0 0 20px var(--cyan-on), inset 0 0 22px var(--cyan-quiet);
  color: var(--c-body);
  text-decoration: none;
}
.ea-hero:focus-visible { outline: 2px solid var(--c-cyan); outline-offset: 2px; }
.ea-hero-bg {
  position: absolute;
  inset: -10%;
  z-index: 0;
  background-size: cover;
  background-position: center;
  filter: blur(28px) saturate(1.4) brightness(0.7);
  opacity: 0.7;
  transform: scale(1.15);
  /* own compositor layer: the 28px blur rasterises once */
  will-change: transform;
}
.ea-hero-bg-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(180deg, var(--abyss-veil) 0%, var(--abyss-shroud) 100%),
    radial-gradient(ellipse at 70% 30%, var(--cyan-quiet), transparent 60%);
}
.ea-hero-scanlines {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 2px, var(--cyan-faint) 3px, var(--cyan-faint) 4px);
  mix-blend-mode: screen;
}
.ea-hero-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
}
.ea-hero-top {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: start;
  gap: var(--space-3);
}
.ea-hero-cover {
  position: relative;
  width: 96px;
  height: 96px;
  overflow: hidden;
  background: var(--c-cover);
  border: 2px solid var(--c-cyan);
  box-shadow: 0 0 12px var(--cyan-on), inset 0 0 10px var(--shade-on);
  color: var(--c-cyan);
}
.ea-hero-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ea-hero-cover-fallback { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--c-cyan); }
.ea-hero-cover-frame {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, var(--sheen-faint) 0%, transparent 30%, transparent 70%, var(--shade-quiet) 100%);
}
.ea-hero-title-block { min-width: 0; }
.ea-hero-song {
  min-width: 0;
  margin: 0;
  color: var(--c-white);
  font-family: var(--font-body);
  font-size: var(--text-title);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.3px;
  overflow-wrap: break-word;
  text-shadow: 0 0 10px var(--cyan-on), 2px 2px 0 var(--c-logo-shadow);
}
.ea-hero-author {
  margin-top: var(--space-1);
  color: var(--c-mid);
  font-size: var(--text-data);
  line-height: 1.4;
}
.ea-hero-mapper { color: var(--c-dim); }
.ea-hero-chips { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-3); }
.ea-chip {
  padding: 0 var(--space-2);
  background: var(--cyan-tint);
  border: 1px solid var(--cyan-line);
  color: var(--c-cyan);
  font-size: var(--text-label);
  line-height: 1.6;
}
.ea-chip-diff[data-d="ExpertPlus"] { color: var(--c-expert-plus); border-color: var(--expert-plus-line); background: var(--expert-plus-tint); }
.ea-chip-diff[data-d="Expert"] { color: var(--c-expert); border-color: var(--expert-line); background: var(--expert-tint); }
.ea-chip-stars { color: var(--c-gold); border-color: var(--gold-line); background: var(--gold-tint); text-shadow: 0 0 6px var(--gold-on); }
.ea-chip-fc { color: var(--c-void); background: var(--c-gold); border-color: var(--c-gold); text-shadow: none; box-shadow: 0 0 10px var(--gold-line); }
.ea-chip-miss { color: var(--c-red); border-color: var(--red-line); background: var(--red-tint); }
.ea-chip-mod { color: var(--c-teal); border-color: var(--teal-line); background: var(--teal-tint); }
.ea-chip-time { color: var(--c-dim); border-color: var(--dim-line); background: var(--dim-tint); }

/* the readout: real accuracy, tallied like an arcade score */
.ea-hero-mid { display: flex; align-items: flex-end; }
.ea-hero-acc-block { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); }
.ea-hero-acc-label { color: var(--c-dim); font-size: var(--text-label); line-height: 1.4; }
.ea-hero-acc {
  display: flex;
  align-items: baseline;
  color: var(--c-cyan);
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-shadow: 0 0 12px var(--cyan-hot), 0 0 32px var(--cyan-line);
}
.ea-hero-acc-int { font-size: var(--px-40); }
.ea-hero-acc-dec { color: var(--c-body); font-size: var(--text-head); }
.ea-hero-acc-pct { margin-left: var(--space-1); color: var(--c-mid); font-size: var(--text-head); }

/* progress bar tracks the tally */
.ea-pbar { display: flex; align-items: center; gap: var(--space-3); }
.ea-pbar-track {
  position: relative;
  flex: 1;
  height: 14px;
  overflow: hidden;
  background: var(--well-deep);
  border: 1px solid var(--cyan-line);
  box-shadow: inset 0 0 6px var(--shade-hot);
}
.ea-pbar-fill {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(90deg, var(--c-cyan) 0%, var(--c-gold) 100%);
  box-shadow: 0 0 10px var(--cyan-hot), 0 0 14px var(--gold-line);
}
.ea-pbar-shimmer {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40%;
  background: linear-gradient(90deg, transparent, var(--sheen), transparent);
  animation: ea-shimmer 2.2s linear infinite;
}
@keyframes ea-shimmer { from { transform: translateX(-110%); } to { transform: translateX(280%); } }
.ea-pbar-tick { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--abyss-veil); }

/* stat tiles */
.ea-hero-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
.ea-stat {
  min-width: 0;
  padding: var(--space-2);
  background: var(--well-deep);
  border: 1px solid var(--cyan-line);
}
.ea-stat-label { margin-bottom: var(--space-1); color: var(--c-dim); font-size: var(--text-label); line-height: 1.4; }
.ea-stat-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2); }
.ea-stat-value {
  color: var(--c-body);
  font-family: var(--font-display);
  font-size: var(--text-head);
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
}
.ea-stat-cyan .ea-stat-value { color: var(--c-cyan); text-shadow: 0 0 6px var(--cyan-hot); }
.ea-stat-gold .ea-stat-value { color: var(--c-gold); text-shadow: 0 0 6px var(--gold-on); }
.ea-stat-delta { color: var(--c-mid); font-size: var(--text-label); line-height: 1.4; }
.ea-stat-delta-good { color: var(--c-green); text-shadow: 0 0 6px var(--green-on); }
.ea-stat-delta-bad { color: var(--c-red); text-shadow: 0 0 6px var(--red-on); }

/* watch replay: a quiet cyan control that lights only under the pointer;
   the brightest thing to press on the page is the socials deck */
.ea-hero-cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  overflow: hidden;
  padding: var(--space-3) var(--space-5);
  background: transparent;
  border: 2px solid var(--cyan-line);
  color: var(--c-cyan);
  font-family: var(--font-display);
  font-size: var(--text-head);
  line-height: 1.25;
  text-transform: uppercase;
  text-shadow: 0 0 6px var(--cyan-on);
  transition: box-shadow 0.2s, border-color 0.2s, filter 0.2s;
}
.ea-hero:hover .ea-hero-cta {
  border-color: var(--c-cyan);
  box-shadow: 0 0 18px var(--cyan-on), inset 0 0 14px var(--cyan-quiet);
  filter: brightness(1.08);
}
/* scanline pulse: one bright bar travels across on hover */
.ea-hero-cta::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 30%;
  background: linear-gradient(90deg, transparent 20%, var(--cyan-on) 50%, var(--sheen-hot) 50%, var(--cyan-on) 50.5%, transparent 80%);
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
}
.ea-hero:hover .ea-hero-cta::before { animation: ea-scan-pulse 0.9s ease-in-out 1; }
@keyframes ea-scan-pulse {
  0% { transform: translateX(-140%); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateX(370%); opacity: 0; }
}
.ea-hero-cta-text { position: relative; z-index: 2; }
/* The Cursor Rule: ► beside the control that holds the pointer or focus */
.ea-hero-cta-text::before {
  content: '►' / '';
  position: absolute;
  right: calc(100% + var(--space-2));
  opacity: 0;
}
.ea-hero:hover .ea-hero-cta-text::before,
.ea-hero:focus-visible .ea-hero-cta-text::before { opacity: 1; }

/* ── offline panel ───────────────────────────────────────────────── */
.ea-offline {
  position: relative;
  overflow: hidden;
  padding: var(--space-6) var(--space-4);
  background: var(--glass);
  border: 2px dashed var(--cyan-line);
  box-shadow: inset 0 0 22px var(--shade-on);
  text-align: center;
}
.ea-offline-scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 2px, var(--cyan-faint) 3px, var(--cyan-faint) 4px);
  mix-blend-mode: screen;
}
.ea-offline-inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
/* square glyphs drawn in CSS: a lit block offline, a turning frame while connecting */
.ea-offline-glyph {
  width: 32px;
  height: 32px;
  background: var(--c-cyan);
  box-shadow: 0 0 12px var(--cyan-hot);
}
.ea-offline-loading .ea-offline-glyph {
  background: transparent;
  border: 2px dashed var(--c-gold);
  box-shadow: 0 0 12px var(--gold-on);
  animation: ea-spin 1.6s steps(8) infinite;
}
@keyframes ea-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.ea-offline-title {
  color: var(--c-cyan);
  font-family: var(--font-display);
  font-size: var(--text-head);
  line-height: 1.25;
  text-transform: uppercase;
  text-shadow: 0 0 10px var(--cyan-hot);
}
.ea-offline-loading .ea-offline-title { color: var(--c-gold); text-shadow: 0 0 10px var(--gold-hot); }
.ea-offline-msg { max-width: 32ch; color: var(--c-mid); font-size: var(--text-body); line-height: 1.5; }
.ea-offline-btn {
  min-height: 48px;
  margin-top: var(--space-1);
  padding: var(--space-3) var(--space-4);
  background: var(--well-deep);
  border: 2px solid var(--c-cyan);
  box-shadow: 0 0 12px var(--cyan-line), inset 0 0 10px var(--cyan-quiet);
  color: var(--c-cyan);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--text-head);
  line-height: 1.25;
  text-transform: uppercase;
  text-shadow: 0 0 8px var(--cyan-hot);
  transition: transform var(--dur-press), box-shadow var(--dur-state), filter var(--dur-press);
}
.ea-offline-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.18);
  box-shadow: 0 4px 0 var(--cyan-on), 0 0 20px var(--cyan-hot);
  animation: ea-flicker 0.5s steps(2) 1;
}
.ea-offline-btn:focus-visible { outline: 2px solid var(--c-cyan); outline-offset: 2px; }
.ea-offline-btn:active { transform: translateY(0); }
/* never set today; if a control is ever disabled it says so three ways */
.ea-offline-btn:disabled,
.ea-acc-head:disabled { opacity: 0.5; cursor: not-allowed; filter: none; box-shadow: none; }

/* ── recent runs ─────────────────────────────────────────────────── */
.ea-acc-heading { margin: 0; font: inherit; }
.ea-acc-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
  width: 100%;
  min-height: 48px;
  padding: var(--space-3);
  background: var(--well);
  border: 1px solid var(--cyan-line);
  color: var(--c-cyan);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--text-head);
  line-height: 1.25;
  text-align: left;
  text-transform: uppercase;
  text-shadow: 0 0 8px var(--cyan-on);
  transition: background var(--dur-state), border-color var(--dur-state), box-shadow var(--dur-state);
}
.ea-acc-head:hover { background: var(--glass-top); border-color: var(--c-cyan); box-shadow: 0 0 12px var(--cyan-line); }
.ea-acc-head:focus-visible { outline: 2px solid var(--c-cyan); outline-offset: 2px; }
.ea-acc-head:active { background: var(--glass-hi); }
.ea-acc-head-left { display: inline-flex; align-items: center; gap: var(--space-2); }
.ea-acc-head-right {
  color: var(--c-dim);
  font-family: var(--font-body);
  font-size: var(--text-label);
  line-height: 1.4;
  text-shadow: none;
  text-transform: none;
}
/* the chevron shows open or closed */
.ea-acc-chevron { display: inline-block; width: 16px; color: var(--c-cyan); font-family: var(--font-body); text-align: center; }
.ea-acc-body { margin-top: var(--space-2); animation: ea-acc-in var(--dur-reveal) ease; }
@keyframes ea-acc-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

.ea-recents { display: flex; flex-direction: column; }
/* two lines per run at every width: the song gets the whole first line,
   so nothing is cut or dropped on a phone or in the narrow column */
.ea-rec {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  grid-template-areas:
    "song song song song"
    "meta time acc  pp";
  align-items: center;
  gap: var(--space-1) var(--space-3);
  min-height: 44px;
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-5);
  border-bottom: 1px dashed var(--cyan-quiet);
  border-left: 2px solid transparent;
  color: var(--c-body);
  font-size: var(--text-data);
  line-height: 1.4;
  text-decoration: none;
  transition: background var(--dur-press), border-color var(--dur-press);
}
/* the cursor sits in the row's left padding, so it never takes a column */
.ea-rec::before {
  content: '►' / '';
  position: absolute;
  top: var(--space-2);
  left: var(--space-1);
  color: var(--c-cyan);
  font-size: var(--text-label);
  line-height: 1.6;
  opacity: 0;
}
.ea-rec-song { grid-area: song; }
.ea-rec-meta { grid-area: meta; }
.ea-rec-time { grid-area: time; }
.ea-rec-acc { grid-area: acc; }
.ea-rec-pp { grid-area: pp; }
.ea-rec:last-child { border-bottom: none; }
.ea-rec:hover { background: var(--cyan-tint); border-left-color: var(--c-cyan); }
.ea-rec:hover::before, .ea-rec:focus-visible::before { opacity: 1; }
.ea-rec:focus-visible { outline: 2px solid var(--c-cyan); outline-offset: 2px; }
.ea-rec:active { background: var(--cyan-quiet); }
.ea-rec-song { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ea-rec-meta { display: inline-flex; gap: var(--space-1); }
.ea-rec-diff, .ea-rec-fc { padding: 0 var(--space-1); font-size: var(--text-label); line-height: 1.5; }
.ea-rec-diff { background: var(--cyan-tint); border: 1px solid var(--cyan-line); color: var(--c-cyan); }
.ea-rec-diff[data-d="ExpertPlus"] { color: var(--c-expert-plus); border-color: var(--expert-plus-line); background: var(--expert-plus-tint); }
.ea-rec-diff[data-d="Expert"] { color: var(--c-expert); border-color: var(--expert-line); background: var(--expert-tint); }
.ea-rec-fc { background: var(--c-gold); color: var(--c-void); text-shadow: none; }
.ea-rec-acc, .ea-rec-pp { font-variant-numeric: tabular-nums; text-align: right; }
.ea-rec-acc { color: var(--c-cyan); text-shadow: 0 0 5px var(--cyan-on); }
.ea-rec-pp { color: var(--c-gold); text-shadow: 0 0 5px var(--gold-on); }
.ea-rec-time { color: var(--c-dim); font-size: var(--text-label); }

/* ── cartridges ──────────────────────────────────────────────────── */
.ea-cartridges { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.ea-cart {
  position: relative;
  display: flex;
  overflow: hidden;
  background: linear-gradient(180deg, var(--glass-top), var(--glass-bottom));
  border: 2px solid var(--cyan-line);
  box-shadow: 0 0 8px var(--cyan-quiet);
  color: var(--c-body);
  text-decoration: none;
  transition: transform var(--dur-press), box-shadow var(--dur-state), border-color var(--dur-state);
}
.ea-cart:hover {
  transform: translate(-2px, -2px);
  border-color: var(--c-cyan);
  box-shadow: 0 0 18px var(--cyan-on), inset 0 0 12px var(--cyan-tint);
  filter: brightness(1.12);
  animation: ea-flicker 0.5s steps(2) 1;
}
.ea-cart:focus-visible { outline: 2px solid var(--c-cyan); outline-offset: 2px; }
.ea-cart:active { transform: translate(0, 0); }
.ea-cart-slot {
  flex-shrink: 0;
  width: 12px;
  background: repeating-linear-gradient(to bottom, var(--cyan-quiet) 0 4px, transparent 4px 8px);
  border-right: 1px solid var(--cyan-line);
}
.ea-cart-body { display: flex; flex-direction: column; flex: 1; gap: var(--space-2); min-width: 0; padding: var(--space-3) var(--space-4); }
.ea-cart-head { display: flex; justify-content: flex-end; }
.ea-cart-title-row { position: relative; display: flex; align-items: center; gap: var(--space-2); }
/* the cursor sits in the card's left padding, so the row never shifts */
.ea-cart-title-row::before {
  content: '►' / '';
  position: absolute;
  right: calc(100% + var(--space-1));
  color: var(--c-cyan);
  font-size: var(--text-label);
  opacity: 0;
}
.ea-cart:hover .ea-cart-title-row::before,
.ea-cart:focus-visible .ea-cart-title-row::before { opacity: 1; }
.ea-cart-icon { display: inline-flex; color: var(--c-cyan); filter: drop-shadow(0 0 4px var(--cyan-on)); }
.ea-cart-title {
  flex: 1;
  min-width: 0;
  color: var(--c-body);
  font-size: var(--text-body);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.3px;
  overflow-wrap: break-word;
  text-wrap: balance;
}
.ea-cart-desc { color: var(--c-mid); font-size: var(--text-body); line-height: 1.5; text-wrap: pretty; }
.ea-cart-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  color: var(--c-dim);
  font-size: var(--text-label);
  line-height: 1.4;
}
.ea-cart-domain { min-width: 0; overflow-wrap: anywhere; color: var(--c-mid); }
.ea-cart-arrow { color: var(--c-cyan); text-shadow: 0 0 6px var(--cyan-hot); }

.ea-pill {
  padding: 0 var(--space-2);
  background: var(--shade-quiet);
  border: 1px solid currentColor;
  font-size: var(--text-label);
  line-height: 1.6;
}
.ea-pill-good { color: var(--c-green); text-shadow: 0 0 6px var(--green-on); }
.ea-pill-warn { color: var(--c-gold); text-shadow: 0 0 6px var(--gold-on); }
.ea-pill-bad { color: var(--c-red); text-shadow: 0 0 6px var(--red-on); }
.ea-pill-neutral { color: var(--c-mid); }

/* ── Konami splash ───────────────────────────────────────────────── */
.ea-secret {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding:
    calc(var(--space-5) + env(safe-area-inset-top, 0))
    calc(var(--space-5) + env(safe-area-inset-right, 0))
    calc(var(--space-5) + env(safe-area-inset-bottom, 0))
    calc(var(--space-5) + env(safe-area-inset-left, 0));
  background: var(--shade-veil);
  cursor: pointer;
  animation: ea-fade 0.25s ease;
}
@keyframes ea-fade { from { opacity: 0; } to { opacity: 1; } }
.ea-secret-box {
  max-width: 420px;
  padding: var(--space-5);
  background: var(--glass-hi);
  border: 2px solid var(--c-gold);
  box-shadow: 0 0 40px var(--gold-hot), inset 0 0 20px var(--gold-quiet);
  text-align: center;
}
.ea-secret-title {
  margin-bottom: var(--space-3);
  color: var(--c-gold);
  font-family: var(--font-display);
  font-size: var(--text-head);
  line-height: 1.25;
  text-shadow: 0 0 12px var(--gold-hot);
}
.ea-secret-art {
  margin: var(--space-2) auto;
  color: var(--c-cyan);
  font-size: var(--text-label);
  line-height: 1.1;
  text-align: center;
  text-shadow: 0 0 6px var(--cyan-hot);
  white-space: pre;
}
.ea-secret-msg { margin-top: var(--space-3); color: var(--c-body); font-size: var(--text-body); line-height: 1.5; }

/* ── offscreen: ambient loops pause while scrolled out of view ──── */
[data-offscreen="true"],
[data-offscreen="true"] *,
[data-offscreen="true"]::before,
[data-offscreen="true"]::after { animation-play-state: paused !important; }
/* the entrance isn't a loop: squashed to a line it can't reach the viewport
   until its middle does, so pausing it leaves the card blank under the fold */
.ea-hero-frame[data-offscreen="true"] { animation-play-state: running !important; }

/* ── touch: no hover, so press feedback stands in for the lift ────── */
@media (hover: none) {
  /* a keyboard hint without a keyboard is noise */
  .ea-kbd-hint { display: none; }
  /* the menu cursor needs a pointer or focus; on touch its space goes */
  .ea-rec { padding-left: var(--space-2); }
  .ea-rec::before { display: none; }
  /* hold the marquee still to read it (hover pause is unreachable) */
  .ea-marquee:active .ea-marquee-track { animation-play-state: paused; }
  .ea-cart:active {
    transform: translateY(1px);
    border-color: var(--c-cyan);
    box-shadow: 0 0 18px var(--cyan-on), inset 0 0 12px var(--cyan-tint);
    filter: brightness(1.15);
  }
  .ea-ctrl:active {
    transform: translateY(1px);
    border-color: var(--c-gold);
    box-shadow: 0 0 14px var(--gold-on);
    filter: brightness(1.2);
  }
}

/* ── narrow phones ───────────────────────────────────────────────── */
@media (max-width: 600px) {
  .ea-hero-top { grid-template-columns: 80px minmax(0, 1fr); }
  .ea-hero-cover { width: 80px; height: 80px; }
  .ea-hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* tiny phones: the cover stacks above the title block */
@media (max-width: 380px) {
  .ea-logo { font-size: var(--px-24); }
  .ea-hero-top { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .ea-hero-cover { width: 96px; height: 96px; }
  .ea-hero-chips { justify-content: center; }
}

/* ── tablet and up: paired cartridges, a last odd one spans the row ── */
@media (min-width: 640px) {
  .ea-logo { font-size: var(--px-40); }
  .ea-hero-inner { gap: var(--space-4); padding: var(--space-5); }
  .ea-hero-top { grid-template-columns: 112px minmax(0, 1fr); gap: var(--space-4); }
  .ea-hero-cover { width: 112px; height: 112px; }
  .ea-hero-song { font-size: var(--px-24); }
  .ea-hero-acc-int { font-size: var(--px-56); }
  .ea-hero-acc-dec { font-size: var(--px-24); }
  .ea-pbar-track { height: 16px; }
  .ea-cartridges { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ea-cart:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ── desktop: a two-column stage ─────────────────────────────────── */
@media (min-width: 900px) {
  .ea-page {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    /* the right column stacks socials then recent runs from the top;
       the last flexible row soaks up the play card's extra height */
    grid-template-rows: auto auto auto 1fr auto;
    grid-template-areas:
      "marquee  marquee"
      "header   header"
      "hero     controls"
      "hero     recents"
      "apps     apps";
    gap: var(--space-6) var(--space-5);
    padding: 0 var(--space-5) calc(var(--space-6) + env(safe-area-inset-bottom, 0));
  }
  .ea-marquee { grid-area: marquee; margin: 0 calc(var(--space-5) * -1); }
  /* the status pill shares the header's row, at its right edge */
  .ea-statusbar { grid-area: header; justify-self: end; align-self: start; padding: var(--space-2) 0 0; }
  .ea-header { grid-area: header; padding: 0; }
  .ea-hero-section { grid-area: hero; }
  .ea-controls-section { grid-area: controls; align-self: start; }
  .ea-recents-section { grid-area: recents; align-self: start; }
  .ea-apps-section { grid-area: apps; }
  .ea-section { padding-left: 0; padding-right: 0; }

  .ea-logo { font-size: var(--px-48); margin-bottom: var(--space-2); }
  .ea-hero-top { grid-template-columns: 160px minmax(0, 1fr); gap: var(--space-5); }
  .ea-hero-cover { width: 160px; height: 160px; }
  .ea-hero-song { font-size: 28px; }
  .ea-hero-acc-int { font-size: var(--px-64); }
  .ea-hero-acc-pct { font-size: var(--px-24); }
  .ea-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "top  top"
      "mid  stats"
      "pbar stats"
      "cta  cta";
    gap: var(--space-4) var(--space-5);
  }
  .ea-hero-top { grid-area: top; }
  .ea-hero-mid { grid-area: mid; }
  .ea-pbar { grid-area: pbar; align-self: start; }
  .ea-hero-stats { grid-area: stats; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ea-hero-cta { grid-area: cta; justify-self: end; }

  /* socials become the cabinet's 1P menu: one per row, cursor on the left */
  .ea-controls { grid-template-columns: minmax(0, 1fr); }
  .ea-controls > .ea-ctrl:nth-child(n) { grid-column: auto; }
  .ea-ctrl {
    flex-direction: row;
    justify-content: flex-start;
    gap: var(--space-3);
    min-height: 52px;
    padding: var(--space-3) var(--space-4) var(--space-3) var(--space-6);
    text-align: left;
  }
  .ea-ctrl::before { display: block; }
  .ea-ctrl-icon svg { width: 22px; height: 22px; }
  .ea-ctrl-label { font-size: var(--text-body); }
}
@media (min-width: 1200px) {
  .ea-logo { font-size: var(--px-56); }
  .ea-hero-acc-int { font-size: var(--px-72); }
  .ea-hero-acc-dec { font-size: var(--px-32); }
  /* three across on six tracks, so a short last row shares its width,
     never one alone (the socials deck's rule) */
  .ea-cartridges { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ea-cart,
  .ea-cart:last-child:nth-child(odd) { grid-column: span 2; }
  .ea-cart:nth-child(3n+1):nth-last-child(2),
  .ea-cart:nth-child(3n+2):last-child { grid-column: span 3; }
  .ea-cart:nth-child(3n+1):last-child { grid-column: 1 / -1; }
}

/* ── reduced motion: loops stop and land at rest; state feedback stays ── */
@keyframes ea-pulse-opacity { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  body::after,
  .crt-grain,
  .crt-flicker,
  #boot .boot-line,
  #boot .boot-cursor::after,
  .ea-konami,
  .ea-marquee-track,
  .ea-cursor,
  .ea-hero-frame::after,
  .ea-pbar-shimmer,
  .ea-hero-cta::before,
  .ea-ctrl,
  .ea-cart,
  .ea-offline-btn,
  .ea-acc-body { animation: none; }
  #boot { transition: none; }
  #boot::before { display: none; }
  #boot .boot-line { opacity: 1; }
  .ea-hero-frame { animation: ea-fade 0.25s ease backwards; }
  .ea-hero-frame::after { opacity: 0.7; }
  .ea-cursor { opacity: 1; }
  /* nothing scrolls, so there is nothing to pause */
  .ea-marquee-toggle { display: none; }
  .ea-sync-dot { animation: ea-pulse-opacity 2.4s ease-in-out infinite; }
  .ea-status-sync[data-tone="stale"] .ea-sync-dot,
  .ea-status-sync[data-tone="mock"] .ea-sync-dot { animation: none; }
  .ea-offline-loading .ea-offline-glyph { animation: ea-pulse-opacity 1.6s ease-in-out infinite; }
  /* hover and press keep their colour and glow, lose the lift */
  .ea-hero-frame:hover,
  .ea-hero-frame:active,
  .ea-ctrl:hover,
  .ea-ctrl:active,
  .ea-cart:hover,
  .ea-cart:active,
  .ea-offline-btn:hover { transform: none; }
}