/* ============================================================
   SOBRECARGA - dark / neon-red / glitch theme
   ============================================================ */
:root{
  --bg:#131316;
  --bg-2:#17171b;
  --panel:#0e0e11;
  --line:#2a2a31;
  --line-soft:#1f1f25;
  --red:#ff2233;
  --red-soft:#ff5b66;
  --red-dim:#8d101c;
  --cyan:#23dede;
  --text:#e9e9ec;
  --muted:#8b8b95;
  --font-ui:"Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  --font-mono:Consolas,"SFMono-Regular",ui-monospace,"Courier New",monospace;
  --font-display:Impact,Haettenschweiler,"Arial Narrow Bold",var(--font-ui);
  /* UI scale, set from the viewport by applyUiScale(): 1 at 1280x800 and below,
     up to 1.6 on big screens. Text, cards and panel widths follow it. */
  --s:1;
  --card-w:clamp(58px,6.2vw,calc(80px * var(--s)));
  --card-w-sm:clamp(38px,4.2vw,calc(52px * var(--s)));
  --r:10px;
  --lift:12px;        /* how far a hand card rises on hover; read by the tooltip */

  /* The shell (platform/css/shell.css) in the overloaded circuit's colors. */
  --cp-font:var(--font-ui);
  --cp-font-display:var(--font-display);
  --cp-scale:var(--s);
  --cp-surface:#121216;
  --cp-surface-2:#191920;
  --cp-text:var(--text);
  --cp-muted:var(--muted);
  --cp-line:var(--line);
  --cp-accent:#3a141a;
  --cp-accent-text:#ffdfe2;
  --cp-on:#22141a;
  --cp-on-text:var(--red-soft);
  --cp-good:var(--cyan);
  --cp-bad:var(--red-soft);
  --cp-focus:var(--cyan);
  --cp-border:1px;
  --cp-radius:12px;
  --cp-shadow:none;
  --cp-caps:uppercase;
  --cp-tracking:.1em;
  --cp-backdrop:rgba(6,6,9,.82);
  --cp-side-w:calc(280px * var(--s));
}
html{height:100%}
body{
  margin:0;min-height:100%;
  background:
    radial-gradient(1100px 520px at 50% -12%,#212128 0%,transparent 62%),
    radial-gradient(700px 400px at 50% 115%,rgba(255,34,51,.07) 0%,transparent 60%),
    var(--bg);
  color:var(--text);
  font-family:var(--font-ui);
  -webkit-font-smoothing:antialiased;
}
/* faint scanline overlay for the "overloaded screen" vibe */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:5;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px);
}
.svg-defs{position:absolute;width:0;height:0;overflow:hidden}

/* ---------- Top bar (the shell's; the game's name block) ---------- */
.brand{
  font-family:var(--font-display);font-size:clamp(22px,3vw,34px);
  letter-spacing:.06em;line-height:1;text-transform:uppercase;position:relative;
}
.brand .bolt{color:var(--red);text-shadow:0 0 18px var(--red)}
.tagline{
  font-family:var(--font-mono);font-size:calc(11px * var(--s));color:var(--muted);
  letter-spacing:.18em;text-transform:uppercase;
}
.btn{
  background:#191920;border:1px solid var(--line);border-radius:8px;
  padding:7px 13px;cursor:pointer;font-family:var(--font-mono);font-size:calc(12px * var(--s));
  letter-spacing:.1em;text-transform:uppercase;transition:.15s;
}
.btn:hover{border-color:var(--red);color:#fff;box-shadow:0 0 0 1px var(--red-dim),0 0 16px rgba(255,34,51,.25)}
.btn.primary{background:linear-gradient(180deg,#251215,#190b0d);border-color:var(--red-dim);color:#ffdfe2}
.btn.primary:hover{background:linear-gradient(180deg,#3a171c,#210c10)}
.btn:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}