// HYBRID B v3 — ARCADE DASHBOARD
//   - dramatic BeatLeader hero (cover bg, animated bars, waveform, rank delta)
//   - status pills, clock, blinking cursor, "1P CONTROLS" tiny socials strip
//   - cartridge apps with status pills + keyboard ↑↓ navigation
//   - visitor counter, Konami code, CRT atmosphere everywhere
function ElectricArcadeVariant() {
  const bl = useBeatLeader(window.__notnicPlayerId);
  const { scores, player, prevPlayer, source, lastUpdate, loading } = bl;
  const last = scores[0];

  // tick the "live" clock + relative timestamps every second
  useTicker(1000);

  // Konami code → splash + rainbow mode toggle
  const [konami, setKonami] = React.useState(false);
  useKonami(() => setKonami((x) => !x));

  // arrow-nav across the apps list
  const launchApp = React.useCallback((i) => {
    const app = APPS[i];
    if (app) window.open(app.url, '_blank', 'noopener');
  }, []);
  const { idx: appIdx, setIdx: setAppIdx } = useArrowNav(APPS.length, launchApp);

  // rank delta vs previous poll (live indicator)
  const rankDelta = prevPlayer && player && prevPlayer.rank
    ? prevPlayer.rank - player.rank // positive = improved (lower number)
    : 0;

  // pp delta vs prev poll
  const ppDelta = prevPlayer && player ? +(player.pp - prevPlayer.pp).toFixed(2) : 0;

  return (
    <div className={`ea-root${konami ? ' ea-konami' : ''}`}>
      <div className="ea-page">

        {/* ───── top marquee ─────────────────────────────────────────── */}
        <Marquee />

        {/* ───── status bar: live data indicator + clock ─────────────── */}
        <StatusBar source={source} lastUpdate={lastUpdate} />

        {/* ───── header / logo ───────────────────────────────────────── */}
        <header className="ea-header">
          <h1 className="ea-logo">
            NOTNIC<span className="ea-logo-dot">.</span>CO<span className="ea-cursor">█</span>
          </h1>
          <div className="ea-rule">═══════════════════════════════</div>
          <p className="ea-tag">► A PLACE FOR MY SOCIALS &amp; PROJECTS ◄</p>
        </header>

        {/* ───── HERO: BeatLeader — the centerpiece ──────────────────── */}
        <section className="ea-section ea-hero-section">
          <SectionTitle left="LAST PLAYED" />
          {last
            ? <HeroCard score={last} player={player} rankDelta={rankDelta} ppDelta={ppDelta} />
            : <OfflinePanel loading={loading} />
          }
        </section>

        {/* ───── secondary BL: recent scores (collapsed accordion) ───── */}
        {scores.length > 1 && (
          <Accordion
            className="ea-section ea-recents-section"
            title="RECENT RUNS"
            count={scores.length - 1}
          >
            <div className="ea-recents">
              {scores.slice(1, 6).map((s, i) => <RecentRow key={s.id} s={s} i={i + 1} />)}
            </div>
          </Accordion>
        )}

        {/* ───── Socials strip ───────────────────────────────────────── */}
        <section className="ea-section ea-controls-section">
          <SectionTitle left="SOCIALS" />
          <div className="ea-controls">
            {SOCIALS.map((s) => (
              <a
                key={s.id}
                href={s.url}
                className="ea-ctrl"
                aria-label={s.label}
                data-label={s.label}
                target="_blank"
                rel="noopener noreferrer"
              >
                <span className="ea-ctrl-icon"><Icon name={s.icon} size={18} /></span>
                <span className="ea-ctrl-label">{s.short}</span>
              </a>
            ))}
          </div>
        </section>

        {/* ───── GAMES / APPS — cartridge grid ───────────────────────── */}
        <section className="ea-section ea-apps-section">
          <SectionTitle left="— GAMES / APPS —" right={`${APPS.length} TITLES   ↑↓ SELECT`} />
          <div className="ea-cartridges">
            {APPS.map((a, i) => (
              <Cartridge key={a.id} app={a} i={i} active={i === appIdx} onMouseEnter={() => setAppIdx(i)} />
            ))}
          </div>
        </section>

        {/* ───── Konami secret panel ─────────────────────────────────── */}
        {konami && (
          <div className="ea-secret" onClick={() => setKonami(false)}>
            <div className="ea-secret-box">
              <div className="ea-secret-title">★ CHEAT ACTIVATED ★</div>
              <div className="ea-secret-art">{`
   ___   ___   ___   ___   ___
  |_ _| | _ \\ | __| /   \\ |   |
   | |  |   / | _|  | - | | | |
  |___| |_|_\\ |___| |___/ |_|_|
              `}</div>
              <div className="ea-secret-msg">
                infinite lives unlocked.
                <br/>tap to dismiss.
              </div>
            </div>
          </div>
        )}
      </div>
      <style>{EA_CSS}</style>
    </div>
  );
}

// ── marquee: smooth seamless scroll, no cutoff ────────────────────────
function Marquee() {
  // duplicate the content so the scroll loop is seamless
  const items = '◆ NOTNIC.CO ◆ GIVEMEPP.COM ◆ NOTBEATSABER.COM ◆ NOTREALLYNIC.COM ◆ NOTCODENAMES.COM ◆ BEATLEADER ◆ ';
  return (
    <div className="ea-marquee" aria-hidden="true">
      <div className="ea-marquee-track">
        <span>{items.repeat(3)}</span>
        <span>{items.repeat(3)}</span>
      </div>
    </div>
  );
}

// ── status bar: live data indicator + clock ──────────────────────────
function StatusBar({ source, lastUpdate }) {
  const now = new Date();
  const hh = String(now.getHours()).padStart(2, '0');
  const mm = String(now.getMinutes()).padStart(2, '0');
  const ss = String(now.getSeconds()).padStart(2, '0');
  const secsSince = lastUpdate ? Math.max(0, Math.floor((Date.now() - lastUpdate) / 1000)) : 0;
  let statusText, tone;
  if (source === 'live') {
    if (secsSince < 90) { statusText = 'DATA: SYNCHRONIZED'; tone = 'live'; }
    else { statusText = `DATA: STALE ${secsSince}s`; tone = 'stale'; }
  } else if (source === 'init') {
    statusText = 'DATA: SYNCING...'; tone = 'stale';
  } else {
    statusText = 'SYSTEM: OFFLINE'; tone = 'mock';
  }
  return (
    <div className="ea-statusbar">
      <span className={`ea-status-sync`} data-tone={tone} aria-live="polite">
        <span className="ea-sync-dot" />
        <span className="ea-sync-text">{statusText}</span>
      </span>
      <span className="ea-status-clock" aria-label={`time ${hh}:${mm}`}>
        {hh}:{mm}:<span className="ea-status-sec">{ss}</span>
      </span>
    </div>
  );
}

// ── section title with arcade bracketing ──────────────────────────────
function SectionTitle({ left, right, liveDot }) {
  return (
    <div className="ea-section-title">
      <span className="ea-section-title-left">
        {liveDot && <span className="ea-livedot" />}
        {left}
      </span>
      {right && <span className="ea-section-title-right">{right}</span>}
    </div>
  );
}

// ── HERO CARD: the absolute centerpiece ───────────────────────────────
function HeroCard({ score, player, rankDelta, ppDelta }) {
  const cover = score.coverImage;
  const replayUrl = `https://replay.beatleader.xyz/?scoreId=${score.id}`;
  return (
    <a href={replayUrl} target="_blank" rel="noopener noreferrer" className="ea-hero">
      {/* blurred cover art as dynamic background */}
      <div
        className="ea-hero-bg"
        style={cover ? { backgroundImage: `url(${cover})` } : undefined}
        aria-hidden="true"
      />
      <div className="ea-hero-bg-overlay" aria-hidden="true" />
      <div className="ea-hero-scanlines" aria-hidden="true" />

      <div className="ea-hero-inner">
        {/* top row: cover thumb + title block */}
        <div className="ea-hero-top">
          <div className="ea-hero-cover">
            {cover
              ? <img src={cover} alt="" />
              : <div className="ea-hero-cover-fallback"><Icon name="gamepad" size={36}/></div>
            }
            <div className="ea-hero-cover-frame" aria-hidden="true" />
          </div>
          <div className="ea-hero-title-block">
            <div className="ea-hero-eyebrow">▼ TRACK</div>
            <div className="ea-hero-song" title={score.songName}>{score.songName}</div>
            <div className="ea-hero-author">by {score.songAuthor || 'unknown'}{score.mapper ? <span className="ea-hero-mapper"> · mapped {score.mapper}</span> : null}</div>
            <div className="ea-hero-chips">
              <span className="ea-chip ea-chip-diff" data-d={score.difficulty}>{diffShort(score.difficulty)}</span>
              {score.stars ? <span className="ea-chip ea-chip-stars">★ {score.stars.toFixed(1)}</span> : null}
              {score.fc ? <span className="ea-chip ea-chip-fc">FULL COMBO</span> : <span className="ea-chip ea-chip-miss">×{score.misses}</span>}
              {score.modifiers ? <span className="ea-chip ea-chip-mod">{score.modifiers}</span> : null}
              <span className="ea-chip ea-chip-time">{relativeTime(score.timeset)}</span>
            </div>
          </div>
        </div>

        {/* mid row: BIG accuracy + waveform */}
        <div className="ea-hero-mid">
          <div className="ea-hero-acc-block">
            <div className="ea-hero-acc-label">ACCURACY</div>
            <div className="ea-hero-acc">
              <span className="ea-hero-acc-int">{(score.accuracy * 100).toFixed(0)}</span>
              <span className="ea-hero-acc-dec">.{((score.accuracy * 100) % 1).toFixed(2).slice(2)}</span>
              <span className="ea-hero-acc-pct">%</span>
            </div>
          </div>
          <Waveform seed={score.id} />
        </div>

        {/* animated progress bar */}
        <ProgressBar value={score.accuracy} pulse />

        {/* stat grid: rank · pp · player rank · delta */}
        <div className="ea-hero-stats">
          <Stat label="MAP RANK"  value={`#${score.rank.toLocaleString()}`}            tone="cyan" />
          <Stat label="PP GAINED" value={score.pp.toFixed(2)}                          tone="gold" />
          <Stat label="GLOBAL"    value={`#${(player?.rank || 0).toLocaleString()}`}   tone="gold"
                delta={rankDelta ? (rankDelta > 0 ? `▲${rankDelta}` : `▼${Math.abs(rankDelta)}`) : null}
                deltaTone={rankDelta > 0 ? 'good' : rankDelta < 0 ? 'bad' : null}
          />
          <Stat label="TOTAL PP"  value={(player?.pp || 0).toFixed(0)}                 tone="cyan"
                delta={ppDelta ? (ppDelta > 0 ? `+${ppDelta.toFixed(2)}` : ppDelta.toFixed(2)) : null}
                deltaTone={ppDelta > 0 ? 'good' : ppDelta < 0 ? 'bad' : null}
          />
        </div>

        {/* WATCH REPLAY mega-CTA */}
        <div className="ea-hero-cta">
          <span className="ea-hero-cta-icon"><Icon name="play" size={14}/></span>
          <span className="ea-hero-cta-text">WATCH REPLAY</span>
          <span className="ea-hero-cta-arrow">↗</span>
        </div>
      </div>
    </a>
  );
}

// ── offline panel: replaces the hero when BL is unreachable ───────────
function OfflinePanel({ loading }) {
  return (
    <div className={`ea-offline${loading ? ' ea-offline-loading' : ''}`} role="status" aria-live="polite">
      <div className="ea-offline-scanlines" aria-hidden="true" />
      <div className="ea-offline-inner">
        <div className="ea-offline-glyph" aria-hidden="true">
          {loading ? '◌' : '◼'}
        </div>
        <div className="ea-offline-title">
          {loading ? 'CONNECTING...' : 'SYSTEM OFFLINE'}
        </div>
        <div className="ea-offline-msg">
          {loading
            ? 'pinging beatleader feed'
            : 'could not reach the beatleader feed.'}
        </div>
        {!loading && (
          <button
            type="button"
            className="ea-offline-btn"
            onClick={() => window.location.reload()}
          >
            ► REFRESH
          </button>
        )}
      </div>
    </div>
  );
}

// ── stat tile ─────────────────────────────────────────────────────────
function Stat({ label, value, tone, delta, deltaTone }) {
  return (
    <div className={`ea-stat ea-stat-${tone || 'cyan'}`}>
      <div className="ea-stat-label">{label}</div>
      <div className="ea-stat-row">
        <div className="ea-stat-value">{value}</div>
        {delta && <div className={`ea-stat-delta ea-stat-delta-${deltaTone || ''}`}>{delta}</div>}
      </div>
    </div>
  );
}

// ── functional animated progress bar w/ shimmer + segments ────────────
function ProgressBar({ value, pulse }) {
  const v = Math.max(0, Math.min(1, value));
  return (
    <div className={`ea-pbar${pulse ? ' ea-pbar-pulse' : ''}`}>
      <div className="ea-pbar-track">
        <div className="ea-pbar-fill" style={{ width: `${(v * 100).toFixed(2)}%` }}>
          <div className="ea-pbar-shimmer" />
        </div>
        {/* tick marks */}
        {[25,50,75].map(p => <div key={p} className="ea-pbar-tick" style={{ left: `${p}%` }} />)}
      </div>
      <div className="ea-pbar-readout">{(v * 100).toFixed(2)}%</div>
    </div>
  );
}

// ── pure-CSS pseudo-waveform built from N bars w/ stable per-seed heights
function Waveform({ seed = 1 }) {
  const bars = React.useMemo(() => {
    const out = [];
    let s = seed * 9301 + 49297;
    for (let i = 0; i < 28; i++) {
      s = (s * 9301 + 49297) % 233280;
      const r = s / 233280;
      out.push(0.18 + r * 0.82);
    }
    return out;
  }, [seed]);
  return (
    <div className="ea-wave" aria-hidden="true">
      {bars.map((h, i) => (
        <span
          key={i}
          className="ea-wave-bar"
          style={{
            height: `${(h * 100).toFixed(0)}%`,
            animationDelay: `${(i * 0.055).toFixed(2)}s`,
            opacity: 0.5 + h * 0.5,
          }}
        />
      ))}
    </div>
  );
}

// ── recent scores compact list ────────────────────────────────────────
function RecentRow({ s, i }) {
  return (
    <a
      href={`https://replay.beatleader.xyz/?scoreId=${s.id}`}
      target="_blank"
      rel="noopener noreferrer"
      className="ea-rec"
    >
      <span className="ea-rec-idx">{String(i).padStart(2, '0')}</span>
      <span className="ea-rec-song" title={s.songName}>{s.songName}</span>
      <span className="ea-rec-meta">
        <span className="ea-rec-diff" data-d={s.difficulty}>{diffShort(s.difficulty)}</span>
        {s.fc ? <span className="ea-rec-fc">FC</span> : null}
      </span>
      <span className="ea-rec-acc">{pct(s.accuracy, 1)}</span>
      <span className="ea-rec-pp">{s.pp.toFixed(0)} PP</span>
      <span className="ea-rec-time">{relativeTime(s.timeset)}</span>
    </a>
  );
}

// ── cartridge: a chunky app tile w/ status pill + arcade slot ────────
function Cartridge({ app, i, active, onMouseEnter }) {
  return (
    <a
      href={app.url}
      className={`ea-cart${active ? ' ea-cart-active' : ''}`}
      target={app.external ? '_blank' : undefined}
      rel="noopener noreferrer"
      onMouseEnter={onMouseEnter}
      data-status={app.status}
    >
      <div className="ea-cart-slot" aria-hidden="true" />
      <div className="ea-cart-body">
        <div className="ea-cart-head">
          <span className="ea-cart-num">SLOT {String(i + 1).padStart(2, '0')}</span>
          <StatusPill status={app.status} />
        </div>
        <div className="ea-cart-title-row">
          <span className="ea-cart-icon"><Icon name={app.icon} size={18} /></span>
          <span className="ea-cart-title">{app.label}</span>
        </div>
        {app.desc && <div className="ea-cart-desc">{app.desc}</div>}
        <div className="ea-cart-foot">
          <span className="ea-cart-domain">{domainOf(app.url)}</span>
          <span className="ea-cart-arrow">► LAUNCH</span>
        </div>
      </div>
    </a>
  );
}

function domainOf(url) {
  try {
    const u = new URL(url);
    // unwrap tracemyip redirect: pull the real ?l= target if present
    const inner = u.searchParams.get('l');
    if (inner) return new URL(inner).hostname.replace(/^www\./, '');
    return u.hostname.replace(/^www\./, '');
  } catch (e) { return ''; }
}

function StatusPill({ status }) {
  const tone = status === 'SHIPPED' ? 'good' : status === 'WIP' ? 'warn' : status === 'ABANDONED' ? 'bad' : 'neutral';
  return <span className={`ea-pill ea-pill-${tone}`}>{status}</span>;
}

// ── collapsible accordion section (closed by default) ────────────────
function Accordion({ title, count, children, className }) {
  const [open, setOpen] = React.useState(false);
  return (
    <section className={(className || '') + (open ? ' ea-acc-open' : '')}>
      <button
        type="button"
        className="ea-acc-head"
        onClick={() => setOpen((o) => !o)}
        aria-expanded={open}
      >
        <span className="ea-acc-head-left">
          <span className="ea-acc-chevron">{open ? '▾' : '▸'}</span>
          {title}
        </span>
        {typeof count === 'number' && (
          <span className="ea-acc-head-right">{count} ENTRIES</span>
        )}
      </button>
      <div className="ea-acc-body" hidden={!open}>
        {open && children}
      </div>
    </section>
  );
}

const EA_CSS = `
.ea-root {
  --b-bright: #38bdf8;
  --b-body: #d6ecfc;
  --b-mid: #9ec7e2;
  --b-dim: #7aa2c2;
  --b-faint: #2d536e;
  --b-gold: #fbbf24;
  --b-gold-soft: #fde68a;
  --b-good: #4ade80;
  --b-bad: #f87171;
  --b-warn: #fbbf24;
  --bg: transparent;
  --bg-card: rgba(7,16,34,0.78);
  --bg-card-hi: rgba(10,28,58,0.88);

  position: relative;
  width: 100%;
  min-height: 100%;
  background: var(--bg);
  color: var(--b-body);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  text-rendering: optimizeLegibility;
}
.ea-root, .ea-root * { text-shadow: 0 0 1px currentColor; }

/* 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: 32px;
  padding: 0 0 32px;
}

/* ── MARQUEE ────────────────────────────────────────────────────── */
.ea-marquee {
  overflow: hidden;
  background: linear-gradient(180deg, rgba(2,8,20,0.96), rgba(8,18,42,0.96));
  border-top: 1px solid rgba(56,189,248,0.6);
  border-bottom: 2px solid var(--b-bright);
  box-shadow: 0 0 14px rgba(56,189,248,0.55), inset 0 0 12px rgba(0,0,0,0.55);
  padding: 8px 0;
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  color: var(--b-bright);
  position: relative;
}
.ea-marquee-track {
  display: flex;
  width: max-content;
  white-space: nowrap;
  animation: ea-scroll 38s linear infinite;
  text-shadow: 0 0 8px rgba(56,189,248,0.85);
}
.ea-marquee-track > span { padding-right: 32px; }
@keyframes ea-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── STATUS BAR ────────────────────────────────────────────────── */
.ea-statusbar {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
  padding: 8px 18px 0;
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  letter-spacing: 0.5px;
}
.ea-status-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 8px 4px;
  background: rgba(8,18,42,0.85);
  border: 1px solid rgba(56,189,248,0.45);
  color: var(--b-body);
  text-shadow: 0 0 6px rgba(56,189,248,0.5);
  box-shadow: inset 0 0 8px rgba(56,189,248,0.10);
}
.ea-status-pill-alt {
  color: var(--b-gold);
  border-color: rgba(251,191,36,0.6);
  text-shadow: 0 0 6px rgba(251,191,36,0.55);
  box-shadow: inset 0 0 8px rgba(251,191,36,0.10), 0 0 12px rgba(251,191,36,0.18);
}
.ea-status-pill-mode[data-mode="live"] {
  color: var(--b-good); border-color: rgba(74,222,128,0.55);
  text-shadow: 0 0 6px rgba(74,222,128,0.7);
}
.ea-status-pill-mode[data-mode="mock"] {
  color: var(--b-dim); border-color: rgba(79,122,153,0.5);
}
.ea-status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--b-good);
  box-shadow: 0 0 8px var(--b-good);
  animation: ea-pulse-dot 1.4s ease-in-out infinite;
}
@keyframes ea-pulse-dot { 0%,100% { opacity: 0.5; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1.1); } }
.ea-status-clock {
  margin-left: auto;
  color: var(--b-bright);
  text-shadow: 0 0 6px rgba(56,189,248,0.7);
  padding: 5px 8px 4px;
  background: rgba(2,8,20,0.85);
  border: 1px solid rgba(56,189,248,0.4);
  letter-spacing: 1px;
}
.ea-status-sec { color: var(--b-mid); }

/* live "system" sync indicator (pulsing pixel + status text) */
.ea-status-sync {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 8px 4px;
  background: rgba(2,8,20,0.85);
  border: 1px solid rgba(74,222,128,0.55);
  letter-spacing: 1px;
  color: var(--b-good);
  text-shadow: 0 0 6px rgba(74,222,128,0.6);
}
.ea-status-sync[data-tone="stale"] {
  color: var(--b-gold);
  border-color: rgba(251,191,36,0.55);
  text-shadow: 0 0 6px rgba(251,191,36,0.55);
}
.ea-status-sync[data-tone="mock"] {
  color: var(--b-dim);
  border-color: rgba(122,162,194,0.45);
  text-shadow: none;
}
.ea-sync-dot {
  width: 7px; height: 7px;
  background: currentColor;
  box-shadow: 0 0 6px currentColor, 0 0 12px currentColor;
  animation: ea-pulse-dot 1.4s ease-in-out infinite;
}
.ea-status-sync[data-tone="mock"] .ea-sync-dot { animation: none; box-shadow: none; }
.ea-sync-text { display: inline-block; }

/* ── HEADER ─────────────────────────────────────────────────────── */
.ea-header { text-align: center; padding: 0 20px; position: relative; }
.ea-header::before, .ea-header::after {
  content: '';
  position: absolute; top: 14px;
  width: 18%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--b-faint), transparent);
}
.ea-header::before { left: 16px; }
.ea-header::after { right: 16px; }
.ea-logo {
  font-family: 'Press Start 2P', monospace;
  font-size: 32px;
  color: #eaf6ff;
  letter-spacing: 1px;
  margin: 0 0 14px;
  position: relative;
  display: inline-block;
  text-shadow:
    2px 2px 0 #0c2d4a,
    0 0 12px rgba(56,189,248,0.65),
    0 0 28px rgba(56,189,248,0.4),
    0 0 60px rgba(56,189,248,0.25);
  animation: ea-logo-pop 4s ease-in-out infinite;
}
.ea-logo-dot { color: var(--b-bright); }
.ea-cursor {
  display: inline-block;
  margin-left: 6px;
  color: var(--b-bright);
  font-size: 0.85em;
  text-shadow: 0 0 8px var(--b-bright);
  animation: ea-blink 0.7s steps(2) infinite;
}
@keyframes ea-logo-pop {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.015); }
}
.ea-rule {
  font-size: 8px;
  color: var(--b-faint);
  letter-spacing: 1px;
  overflow: hidden;
  white-space: nowrap;
  margin: 0 0 8px;
}
.ea-tag {
  margin: 0;
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  color: var(--b-mid);
  letter-spacing: 0.5px;
}

/* ── SECTION SHELL ──────────────────────────────────────────────── */
.ea-section { padding: 0 18px; display: flex; flex-direction: column; gap: 14px; }
.ea-section-title {
  display: flex; align-items: center; justify-content: space-between;
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  color: var(--b-bright);
  text-shadow: 0 0 8px rgba(56,189,248,0.65);
  letter-spacing: 1px;
  padding-bottom: 8px;
  border-bottom: 1px dashed rgba(56,189,248,0.25);
}
.ea-section-title-left { display: inline-flex; align-items: center; gap: 8px; }
.ea-section-title-right { color: var(--b-gold); font-size: 8px; text-shadow: 0 0 6px rgba(251,191,36,0.6); letter-spacing: 1px; }
.ea-livedot { width: 8px; height: 8px; background: var(--b-good); border-radius: 50%; box-shadow: 0 0 8px var(--b-good); animation: ea-pulse-dot 1.2s infinite; display: inline-block; }

/* ── HERO ───────────────────────────────────────────────────────── */
.ea-hero {
  position: relative;
  display: block;
  text-decoration: none;
  color: var(--b-body);
  overflow: hidden;
  border: 2px solid var(--b-bright);
  background: var(--bg-card-hi);
  box-shadow:
    0 0 20px rgba(56,189,248,0.5),
    0 0 60px rgba(56,189,248,0.18),
    inset 0 0 22px rgba(56,189,248,0.12);
  transition: transform 0.15s, box-shadow 0.2s;
  animation: ea-hero-breath 3.6s ease-in-out infinite;
}
@keyframes ea-hero-breath {
  0%, 100% { box-shadow: 0 0 20px rgba(56,189,248,0.5), 0 0 60px rgba(56,189,248,0.18), inset 0 0 22px rgba(56,189,248,0.12); }
  50%      { box-shadow: 0 0 28px rgba(56,189,248,0.75), 0 0 90px rgba(56,189,248,0.32), inset 0 0 28px rgba(56,189,248,0.18); }
}
.ea-hero:hover { transform: translate(-2px, -3px); }
.ea-hero:active { transform: translate(1px, 1px); }

.ea-hero-bg {
  position: absolute; inset: -10%;
  background-size: cover;
  background-position: center;
  filter: blur(28px) saturate(1.4) brightness(0.7);
  opacity: 0.55;
  transform: scale(1.15);
  z-index: 0;
}
.ea-hero-bg-overlay {
  position: absolute; inset: 0; z-index: 0;
  background:
    linear-gradient(180deg, rgba(2,6,23,0.55) 0%, rgba(2,6,23,0.85) 100%),
    radial-gradient(ellipse at 70% 30%, rgba(56,189,248,0.18), transparent 60%);
}
.ea-hero-scanlines {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(56,189,248,0.00) 0px,
    rgba(56,189,248,0.00) 2px,
    rgba(56,189,248,0.06) 3px,
    rgba(56,189,248,0.06) 4px
  );
  mix-blend-mode: screen;
}
.ea-hero-inner {
  position: relative;
  z-index: 2;
  padding: 18px;
  display: flex; flex-direction: column; gap: 16px;
}
.ea-hero-top {
  display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: flex-start;
}
.ea-hero-cover {
  position: relative;
  width: 96px; height: 96px;
  border: 2px solid var(--b-bright);
  box-shadow: 0 0 12px rgba(56,189,248,0.6), inset 0 0 10px rgba(0,0,0,0.5);
  overflow: hidden;
  background: #08152a;
}
.ea-hero-cover img { width: 100%; height: 100%; object-fit: cover; image-rendering: optimizequality; }
.ea-hero-cover-fallback { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--b-bright); }
.ea-hero-cover-frame {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.18) 0%, transparent 30%, transparent 70%, rgba(0,0,0,0.4) 100%);
}
.ea-hero-eyebrow {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  color: var(--b-bright);
  text-shadow: 0 0 6px rgba(56,189,248,0.7);
  letter-spacing: 1px;
  margin-bottom: 6px;
}
.ea-hero-song {
  font-family: 'JetBrains Mono', monospace;
  font-size: 22px;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.1;
  letter-spacing: -0.3px;
  text-shadow: 0 0 10px rgba(56,189,248,0.6), 2px 2px 0 #0c2d4a;
  word-break: break-word;
}
.ea-hero-author {
  margin-top: 5px;
  font-size: 11px;
  color: var(--b-mid);
}
.ea-hero-mapper { color: var(--b-dim); }
.ea-hero-chips {
  display: flex; flex-wrap: wrap; gap: 5px;
  margin-top: 10px;
}
.ea-chip {
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  padding: 3px 5px 2px;
  background: rgba(56,189,248,0.1);
  color: var(--b-bright);
  border: 1px solid rgba(56,189,248,0.4);
  letter-spacing: 0.5px;
}
.ea-chip-diff[data-d="ExpertPlus"] { color: #c084fc; border-color: rgba(192,132,252,0.55); background: rgba(168,85,247,0.12); }
.ea-chip-diff[data-d="Expert"]     { color: #fca5a5; border-color: rgba(252,165,165,0.55); background: rgba(220,38,38,0.12); }
.ea-chip-stars { color: var(--b-gold); border-color: rgba(251,191,36,0.55); background: rgba(251,191,36,0.10); text-shadow: 0 0 6px rgba(251,191,36,0.6); }
.ea-chip-fc    { color: #08111e; background: var(--b-gold); border-color: var(--b-gold); text-shadow: none; box-shadow: 0 0 10px rgba(251,191,36,0.5); }
.ea-chip-miss  { color: var(--b-bad); border-color: rgba(248,113,113,0.5); background: rgba(248,113,113,0.10); }
.ea-chip-mod   { color: #5eead4; border-color: rgba(94,234,212,0.5); background: rgba(45,212,191,0.10); }
.ea-chip-time  { color: var(--b-dim); border-color: rgba(79,122,153,0.5); background: rgba(35,71,96,0.4); }

.ea-hero-mid {
  display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center;
}
.ea-hero-acc-block {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
}
.ea-hero-acc-label {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  color: var(--b-dim);
  letter-spacing: 1px;
}
.ea-hero-acc {
  font-family: 'Press Start 2P', monospace;
  color: var(--b-bright);
  text-shadow: 0 0 12px rgba(56,189,248,0.95), 0 0 32px rgba(56,189,248,0.5);
  display: flex; align-items: baseline; gap: 0;
  letter-spacing: -1px;
}
.ea-hero-acc-int { font-size: 40px; }
.ea-hero-acc-dec { font-size: 18px; color: var(--b-body); margin-left: 2px; }
.ea-hero-acc-pct { font-size: 16px; color: var(--b-mid); margin-left: 4px; }

/* Waveform */
.ea-wave {
  display: flex; align-items: flex-end; justify-content: flex-end;
  gap: 2px;
  height: 50px;
  padding-left: 6px;
}
.ea-wave-bar {
  display: inline-block;
  width: 4px;
  background: linear-gradient(180deg, var(--b-bright), rgba(56,189,248,0.3));
  box-shadow: 0 0 4px rgba(56,189,248,0.55);
  animation: ea-wave-pulse 0.9s ease-in-out infinite alternate;
  transform-origin: bottom;
}
@keyframes ea-wave-pulse {
  from { transform: scaleY(0.45); }
  to   { transform: scaleY(1); }
}

/* Progress bar */
.ea-pbar {
  display: flex; align-items: center; gap: 10px;
}
.ea-pbar-track {
  position: relative;
  flex: 1;
  height: 14px;
  background: rgba(2,6,23,0.8);
  border: 1px solid rgba(56,189,248,0.35);
  box-shadow: inset 0 0 6px rgba(0,0,0,0.7);
  overflow: hidden;
}
.ea-pbar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(90deg, var(--b-bright) 0%, var(--b-gold) 100%);
  box-shadow: 0 0 10px rgba(56,189,248,0.85), 0 0 14px rgba(251,191,36,0.4);
  transition: width 0.6s cubic-bezier(.22,.94,.36,1);
  overflow: hidden;
}
.ea-pbar-pulse .ea-pbar-fill { animation: ea-pbar-pulse 2.4s ease-in-out infinite; }
@keyframes ea-pbar-pulse {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.25); }
}
.ea-pbar-shimmer {
  position: absolute; top: 0; bottom: 0; width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), 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: rgba(2,6,23,0.6);
}
.ea-pbar-readout {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  color: var(--b-gold);
  text-shadow: 0 0 6px rgba(251,191,36,0.7);
  letter-spacing: -0.5px;
  min-width: 56px; text-align: right;
}

/* Stats grid */
.ea-hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.ea-stat {
  padding: 8px 9px;
  background: rgba(2,6,23,0.65);
  border: 1px solid rgba(56,189,248,0.25);
  min-width: 0;
}
.ea-stat-label {
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  color: var(--b-dim);
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.ea-stat-row { display: flex; align-items: baseline; gap: 6px; }
.ea-stat-value {
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;
  color: var(--b-body);
  letter-spacing: -0.5px;
}
.ea-stat-cyan .ea-stat-value  { color: var(--b-bright); text-shadow: 0 0 6px rgba(56,189,248,0.7); }
.ea-stat-gold .ea-stat-value  { color: var(--b-gold);   text-shadow: 0 0 6px rgba(251,191,36,0.6); }
.ea-stat-delta {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  color: var(--b-mid);
}
.ea-stat-delta-good { color: var(--b-good); text-shadow: 0 0 6px rgba(74,222,128,0.6); }
.ea-stat-delta-bad  { color: var(--b-bad);  text-shadow: 0 0 6px rgba(248,113,113,0.6); }

/* CTA */
.ea-hero-cta {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 14px;
  background: linear-gradient(90deg, rgba(251,191,36,0.18) 0%, rgba(56,189,248,0.22) 50%, rgba(251,191,36,0.18) 100%);
  border: 2px solid var(--b-gold);
  color: var(--b-gold);
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;
  letter-spacing: 2px;
  text-shadow: 0 0 8px rgba(251,191,36,0.85);
  box-shadow: 0 0 14px rgba(251,191,36,0.45), inset 0 0 12px rgba(251,191,36,0.18);
  position: relative;
  overflow: hidden;
  animation: ea-cta-pulse 2s ease-in-out infinite;
}
@keyframes ea-cta-pulse {
  0%, 100% { box-shadow: 0 0 14px rgba(251,191,36,0.45), inset 0 0 12px rgba(251,191,36,0.18); }
  50%      { box-shadow: 0 0 28px rgba(251,191,36,0.85), inset 0 0 18px rgba(251,191,36,0.28); }
}
.ea-hero-cta::after {
  content: '';
  position: absolute; top: 0; bottom: 0; width: 30%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  animation: ea-shimmer 3.2s linear infinite;
}
/* scanline pulse: a thin horizontal bar travels across on hover */
.ea-hero-cta::before {
  content: '';
  position: absolute;
  left: -40%; right: auto;
  top: 0; bottom: 0;
  width: 30%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(251,191,36,0.0) 20%,
    rgba(251,191,36,0.55) 50%,
    rgba(255,255,255,0.85) 50%,
    rgba(251,191,36,0.55) 50.5%,
    rgba(251,191,36,0.0) 80%,
    transparent 100%
  );
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}
.ea-hero:hover .ea-hero-cta::before,
.ea-hero:focus-visible .ea-hero-cta::before {
  animation: ea-scan-pulse 0.9s ease-in-out 1;
  opacity: 1;
}
@keyframes ea-scan-pulse {
  0%   { left: -40%; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { left: 110%; opacity: 0; }
}
.ea-hero-cta-icon { display: inline-flex; color: var(--b-gold); position: relative; z-index: 2; }
.ea-hero-cta-text { position: relative; z-index: 2; }
.ea-hero-cta-arrow { font-size: 14px; position: relative; z-index: 2; }

/* ── OFFLINE PANEL ──────────────────────────────────────────────── */
.ea-offline {
  position: relative;
  border: 2px dashed rgba(56,189,248,0.45);
  background: rgba(7,16,34,0.6);
  padding: 28px 18px;
  text-align: center;
  overflow: hidden;
  box-shadow: inset 0 0 22px rgba(0,0,0,0.5);
}
.ea-offline-scanlines {
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(56,189,248,0.00) 0px,
    rgba(56,189,248,0.00) 2px,
    rgba(56,189,248,0.05) 3px,
    rgba(56,189,248,0.05) 4px
  );
  mix-blend-mode: screen;
}
.ea-offline-inner {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.ea-offline-glyph {
  font-size: 36px;
  color: var(--b-bright);
  text-shadow: 0 0 12px rgba(56,189,248,0.75);
  line-height: 1;
}
.ea-offline-loading .ea-offline-glyph { animation: ea-spin 1.6s linear infinite; }
@keyframes ea-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.ea-offline-title {
  font-family: 'Press Start 2P', monospace;
  font-size: 14px;
  color: var(--b-bright);
  text-shadow: 0 0 10px rgba(56,189,248,0.7);
  letter-spacing: 2px;
}
.ea-offline-loading .ea-offline-title { color: var(--b-gold); text-shadow: 0 0 10px rgba(251,191,36,0.7); }
.ea-offline-msg {
  font-size: 12px;
  color: var(--b-mid);
  max-width: 320px;
  line-height: 1.5;
}
.ea-offline-btn {
  margin-top: 6px;
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--b-gold);
  background: rgba(2,6,23,0.7);
  border: 2px solid var(--b-gold);
  padding: 10px 16px;
  cursor: pointer;
  text-shadow: 0 0 8px rgba(251,191,36,0.7);
  box-shadow: 0 0 12px rgba(251,191,36,0.35), inset 0 0 10px rgba(251,191,36,0.15);
  transition: transform 0.12s, box-shadow 0.15s, filter 0.12s;
}
.ea-offline-btn:hover,
.ea-offline-btn:focus-visible {
  transform: translateY(-2px);
  filter: brightness(1.18);
  box-shadow: 0 4px 0 rgba(251,191,36,0.5), 0 0 20px rgba(251,191,36,0.8);
  outline: none;
  animation: ea-flicker 0.5s steps(2) 1;
}
.ea-offline-btn:active { transform: translateY(0); }

/* ── RECENT RUNS ────────────────────────────────────────────────── */
.ea-recents { display: flex; flex-direction: column; }
.ea-rec {
  display: grid;
  grid-template-columns: 24px 1fr auto 60px 60px auto;
  gap: 8px;
  align-items: center;
  padding: 10px 8px;
  border-bottom: 1px dashed rgba(56,189,248,0.18);
  text-decoration: none;
  color: var(--b-body);
  font-size: 12px;
  transition: background 0.12s, border-left-color 0.12s;
  border-left: 2px solid transparent;
}
.ea-rec:last-child { border-bottom: none; }
.ea-rec:hover { background: rgba(56,189,248,0.08); border-left-color: var(--b-bright); }
.ea-rec-idx { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--b-dim); }
.ea-rec-song { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ea-rec-meta { display: inline-flex; gap: 4px; }
.ea-rec-diff {
  font-family: 'Press Start 2P', monospace; font-size: 7px;
  padding: 2px 4px 1px;
  background: rgba(56,189,248,0.1); color: var(--b-bright);
  border: 1px solid rgba(56,189,248,0.35);
}
.ea-rec-diff[data-d="ExpertPlus"] { color: #c084fc; border-color: rgba(192,132,252,0.5); background: rgba(168,85,247,0.1); }
.ea-rec-diff[data-d="Expert"] { color: #fca5a5; border-color: rgba(252,165,165,0.5); background: rgba(220,38,38,0.1); }
.ea-rec-fc {
  font-family: 'Press Start 2P', monospace; font-size: 7px;
  padding: 2px 4px 1px;
  background: var(--b-gold); color: #08111e;
  text-shadow: none;
}
.ea-rec-acc { font-family: 'Press Start 2P', monospace; font-size: 9px; color: var(--b-bright); text-align: right; text-shadow: 0 0 5px rgba(56,189,248,0.6); }
.ea-rec-pp { font-family: 'Press Start 2P', monospace; font-size: 9px; color: var(--b-gold); text-align: right; text-shadow: 0 0 5px rgba(251,191,36,0.5); }
.ea-rec-time { font-size: 10px; color: var(--b-dim); }

/* ── 1P CONTROLS (tiny social strip) ────────────────────────────── */
.ea-controls {
  display: flex; gap: 8px;
  background: rgba(2,8,20,0.85);
  border: 1px solid rgba(56,189,248,0.4);
  padding: 8px;
  box-shadow: 0 0 12px rgba(56,189,248,0.18), inset 0 0 10px rgba(0,0,0,0.4);
}
.ea-ctrl {
  position: relative;
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: 10px 4px;
  min-height: 44px;
  background: linear-gradient(180deg, rgba(8,18,42,0.85), rgba(2,6,23,0.95));
  border: 1px solid rgba(56,189,248,0.35);
  color: var(--b-body);
  text-decoration: none;
  text-align: center;
  transition: transform 0.12s, box-shadow 0.15s, border-color 0.15s, filter 0.12s;
}
.ea-ctrl:hover, .ea-ctrl:focus-visible {
  transform: translateY(-3px);
  border-color: var(--b-bright);
  box-shadow: 0 4px 0 rgba(56,189,248,0.4), 0 0 14px rgba(56,189,248,0.6);
  filter: brightness(1.18);
  animation: ea-flicker 0.6s steps(2) 1;
  outline: none;
}
.ea-ctrl:active { transform: translateY(0); box-shadow: 0 0 8px rgba(56,189,248,0.4); }
.ea-ctrl-icon { color: var(--b-bright); filter: drop-shadow(0 0 5px rgba(56,189,248,0.7)); display: inline-flex; }
.ea-ctrl-label {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  color: var(--b-body);
  letter-spacing: 1px;
}
.ea-ctrl:hover .ea-ctrl-label,
.ea-ctrl:focus-visible .ea-ctrl-label { color: #eaf6ff; }

/* terminal-style tooltip on hover/focus: "> INSTAGRAM" */
.ea-ctrl::after {
  content: "> " attr(data-label);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: rgba(2,8,20,0.96);
  border: 1px solid var(--b-bright);
  color: var(--b-bright);
  padding: 5px 7px 4px;
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-shadow: 0 0 6px rgba(56,189,248,0.7);
  box-shadow: 0 0 10px rgba(56,189,248,0.45);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.14s ease, transform 0.14s ease;
  z-index: 5;
}
.ea-ctrl:hover::after,
.ea-ctrl:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
@keyframes ea-flicker {
  0%, 100% { filter: brightness(1.18); }
  40%      { filter: brightness(1.45); }
  60%      { filter: brightness(0.95); }
  80%      { filter: brightness(1.3); }
}

/* ── CARTRIDGES (apps) ──────────────────────────────────────────── */
.ea-cartridges { display: grid; grid-template-columns: 1fr; gap: 10px; }
.ea-cart {
  position: relative;
  display: flex;
  text-decoration: none;
  color: var(--b-body);
  background: linear-gradient(180deg, rgba(8,18,42,0.92), rgba(2,6,23,0.95));
  border: 2px solid rgba(56,189,248,0.35);
  box-shadow: 0 0 8px rgba(56,189,248,0.15);
  transition: transform 0.12s, box-shadow 0.15s, border-color 0.15s, padding-left 0.15s;
  overflow: hidden;
}
.ea-cart::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--b-bright);
  box-shadow: 0 0 8px var(--b-bright);
}
.ea-cart[data-status="WIP"]::before { background: var(--b-gold); box-shadow: 0 0 8px var(--b-gold); }
.ea-cart[data-status="ABANDONED"]::before { background: var(--b-bad); box-shadow: 0 0 8px var(--b-bad); }
.ea-cart-slot {
  width: 12px;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(56,189,248,0.15) 0 4px,
      transparent 4px 8px
    );
  border-right: 1px solid rgba(56,189,248,0.3);
  flex-shrink: 0;
}
.ea-cart-body {
  flex: 1; min-width: 0;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 6px;
}
.ea-cart-head {
  display: flex; align-items: center; justify-content: space-between;
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  color: var(--b-dim);
  letter-spacing: 1px;
}
.ea-cart-num { color: var(--b-mid); }
.ea-cart-title-row {
  display: flex; align-items: center; gap: 10px;
  margin-top: 2px;
}
.ea-cart-icon { color: var(--b-bright); filter: drop-shadow(0 0 4px rgba(56,189,248,0.55)); display: inline-flex; }
.ea-cart-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  font-weight: 600;
  color: var(--b-body);
  letter-spacing: -0.3px;
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ea-cart-desc {
  font-size: 11px;
  color: var(--b-mid);
  line-height: 1.4;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.25s ease, opacity 0.25s ease, margin 0.25s ease;
}
.ea-cart:hover .ea-cart-desc,
.ea-cart-active .ea-cart-desc { max-height: 60px; opacity: 1; }
.ea-cart-foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 4px;
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  color: var(--b-dim);
  letter-spacing: 1px;
}
.ea-cart-domain { color: var(--b-mid); }
.ea-cart-arrow {
  color: var(--b-bright);
  text-shadow: 0 0 6px rgba(56,189,248,0.7);
  transition: transform 0.12s;
}
.ea-cart:hover,
.ea-cart-active,
.ea-cart:focus-visible {
  border-color: var(--b-bright);
  box-shadow: 0 0 18px rgba(56,189,248,0.55), inset 0 0 12px rgba(56,189,248,0.08);
  transform: translate(-2px, -2px);
  filter: brightness(1.12);
  outline: none;
}
.ea-cart:hover { animation: ea-flicker 0.5s steps(2) 1; }
.ea-cart:hover .ea-cart-arrow,
.ea-cart-active .ea-cart-arrow,
.ea-cart:focus-visible .ea-cart-arrow { transform: translateX(4px); }

.ea-pill {
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  padding: 3px 5px 2px;
  border: 1px solid currentColor;
  letter-spacing: 0.5px;
  background: rgba(0,0,0,0.4);
}
.ea-pill-good { color: var(--b-good); text-shadow: 0 0 6px rgba(74,222,128,0.5); }
.ea-pill-warn { color: var(--b-gold); text-shadow: 0 0 6px rgba(251,191,36,0.5); }
.ea-pill-bad  { color: var(--b-bad);  text-shadow: 0 0 6px rgba(248,113,113,0.5); }
.ea-pill-neutral { color: var(--b-mid); }

/* ── ACCORDION ──────────────────────────────────────────────────── */
.ea-acc-head {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(2,8,20,0.7);
  border: 1px solid rgba(56,189,248,0.35);
  color: var(--b-bright);
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  letter-spacing: 1px;
  text-shadow: 0 0 8px rgba(56,189,248,0.6);
  padding: 10px 12px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.ea-acc-head:hover {
  background: rgba(8,18,42,0.9);
  border-color: var(--b-bright);
  box-shadow: 0 0 12px rgba(56,189,248,0.4);
}
.ea-acc-head-left { display: inline-flex; align-items: center; gap: 8px; }
.ea-acc-head-right { font-size: 8px; color: var(--b-gold); text-shadow: 0 0 6px rgba(251,191,36,0.5); }
.ea-acc-chevron {
  display: inline-block;
  width: 12px; text-align: center;
  color: var(--b-bright);
  transition: transform 0.2s;
}
.ea-acc-open .ea-acc-chevron { transform: translateY(1px); }
.ea-acc-body { margin-top: 10px; animation: ea-acc-in 0.22s ease; }
@keyframes ea-acc-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes ea-blink { 0%,49%{opacity:1} 50%,100%{opacity:0.3} }
.ea-blink { animation: ea-blink 0.8s steps(2) infinite; color: var(--b-bright); }

/* ── KONAMI splash ─────────────────────────────────────────────── */
.ea-secret {
  position: fixed; inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.65);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  cursor: pointer;
  animation: ea-fade 0.25s ease;
}
@keyframes ea-fade { from { opacity: 0; } to { opacity: 1; } }
.ea-secret-box {
  background: var(--bg-card-hi);
  border: 2px solid var(--b-gold);
  box-shadow: 0 0 40px rgba(251,191,36,0.7), inset 0 0 20px rgba(251,191,36,0.15);
  padding: 24px;
  max-width: 420px;
  text-align: center;
}
.ea-secret-title {
  font-family: 'Press Start 2P', monospace;
  font-size: 14px;
  color: var(--b-gold);
  text-shadow: 0 0 12px rgba(251,191,36,0.9);
  margin-bottom: 14px;
  letter-spacing: 2px;
}
.ea-secret-art {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--b-bright);
  text-shadow: 0 0 6px rgba(56,189,248,0.7);
  white-space: pre;
  line-height: 1.1;
  margin: 8px auto;
  text-align: center;
}
.ea-secret-msg {
  margin-top: 12px;
  font-size: 11px;
  color: var(--b-body);
}

/* ── responsive: narrow viewports ─────────────────────────────── */
@media (max-width: 600px) {
  .ea-statusbar { padding: 8px 14px 0; font-size: 7px; gap: 6px; }
  .ea-status-pill { padding: 4px 6px 3px; }
  .ea-status-sync { padding: 4px 6px 3px; }
  .ea-section { padding: 0 14px; }
  .ea-logo { font-size: 26px; }
  .ea-hero-inner { padding: 14px; gap: 12px; }
  .ea-hero-top { grid-template-columns: 80px 1fr; gap: 10px; }
  .ea-hero-cover { width: 80px; height: 80px; }
  .ea-hero-song { font-size: 18px; }
  .ea-hero-acc-int { font-size: 36px; }
  .ea-hero-acc-dec { font-size: 14px; }
  .ea-hero-acc-pct { font-size: 12px; }
  .ea-hero-mid { grid-template-columns: 1fr; gap: 10px; }
  .ea-wave { width: 100%; height: 40px; justify-content: space-between; }
  .ea-wave-bar { flex: 1; }
  .ea-hero-stats { grid-template-columns: repeat(2, 1fr); }
  .ea-hero-cta { font-size: 11px; letter-spacing: 1px; }
  .ea-rec { grid-template-columns: 22px 1fr auto 56px; gap: 6px; font-size: 11px; }
  .ea-rec-pp, .ea-rec-time { display: none; }
  .ea-controls { flex-wrap: wrap; gap: 6px; padding: 6px; }
  .ea-ctrl { flex-basis: calc(33.33% - 6px); flex-grow: 1; padding: 10px 4px; }
  .ea-cart-body { padding: 10px 12px; }
  .ea-cart-title { font-size: 13px; }
}

/* tiny phones: stack hero cover above the title block + flatten stats */
@media (max-width: 380px) {
  .ea-logo { font-size: 22px; }
  .ea-hero-inner { padding: 12px; gap: 10px; }
  .ea-hero-top {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    gap: 12px;
  }
  .ea-hero-cover { width: 96px; height: 96px; }
  .ea-hero-chips { justify-content: center; }
  .ea-hero-song { font-size: 17px; }
  .ea-hero-acc-int { font-size: 32px; }
  .ea-rec { grid-template-columns: 20px 1fr 48px; gap: 6px; }
  .ea-rec-meta { display: none; }
  .ea-rec-acc { font-size: 8px; }
  .ea-ctrl { flex-basis: calc(50% - 6px); }
}

/* ── desktop layout: 2-col grid ────────────────────────────────── */
@media (min-width: 900px) {
  .ea-page {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    grid-template-areas:
      "marquee  marquee"
      "status   status"
      "header   header"
      "hero     controls"
      "hero     recents"
      "apps     apps";
    column-gap: 28px;
    row-gap: 36px;
    padding: 0 28px 36px;
  }
  .ea-marquee          { grid-area: marquee; margin: 0 -28px; font-size: 11px; }
  .ea-statusbar        { grid-area: status; padding: 0; justify-content: flex-end; }
  .ea-header           { grid-area: header; padding-top: 8px; }
  .ea-hero-section     { grid-area: hero; }
  .ea-recents-section  { grid-area: recents; }
  .ea-controls-section { grid-area: controls; }
  .ea-apps-section     { grid-area: apps; }

  .ea-section          { padding-left: 0; padding-right: 0; }
  .ea-status-clock     { margin-left: auto; }

  .ea-logo             { font-size: 48px; margin-bottom: 16px; }
  .ea-tag              { font-size: 10px; }

  .ea-hero-inner       { padding: 24px; gap: 20px; }
  .ea-hero-top         { grid-template-columns: 128px 1fr; gap: 18px; }
  .ea-hero-cover       { width: 128px; height: 128px; }
  .ea-hero-song        { font-size: 28px; }
  .ea-hero-author      { font-size: 12px; }
  .ea-hero-acc-int     { font-size: 64px; }
  .ea-hero-acc-dec     { font-size: 24px; }
  .ea-hero-acc-pct     { font-size: 18px; }
  .ea-wave             { height: 72px; }
  .ea-wave-bar         { width: 5px; }
  .ea-pbar-track       { height: 18px; }
  .ea-hero-stats       { grid-template-columns: repeat(4, 1fr); gap: 10px; }
  .ea-stat-value       { font-size: 14px; }
  .ea-hero-cta         { font-size: 14px; padding: 14px 18px; }

  .ea-cartridges       { grid-template-columns: 1fr 1fr; gap: 14px; }
  .ea-cart-body        { padding: 14px 16px; }
  .ea-cart-title       { font-size: 16px; }

  .ea-controls         { padding: 10px; gap: 10px; }
  .ea-ctrl             { padding: 12px 6px; }
  .ea-ctrl-icon svg    { width: 20px; height: 20px; }
}
@media (min-width: 1200px) {
  .ea-logo             { font-size: 56px; }
  .ea-hero-acc-int     { font-size: 76px; }
}
`;

Object.assign(window, { ElectricArcadeVariant });