/* ============================================================
   bustabit — MODERN REWRITE theme
   Premium near-black shell, single electric accent, max-energy core.
   Accent + font family are driven by CSS vars that app.jsx sets
   from the Tweaks panel.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700;800&family=Inter+Tight:wght@400;500;600;700;800&family=Roboto+Mono:wght@400;500;700&family=Sora:wght@400;500;600;700;800&family=Space+Mono:wght@400;700&display=swap');

:root {
  /* ---- surfaces: a true near-black ramp ---- */
  --ink-0: #050507;   /* void / stage backdrop        */
  --ink-1: #0B0D11;   /* app background (slightly lifted, softer) */
  --ink-2: #0F1115;   /* panels / cards               */
  --ink-3: #15181E;   /* fields / inputs              */
  --ink-4: #1B1F27;   /* hover / raised               */

  /* ---- hairlines ---- */
  --line:   rgba(255,255,255,.07);
  --line-2: rgba(255,255,255,.13);
  --line-3: rgba(255,255,255,.22);

  /* ---- text (softened off-white to reduce glare on near-black) ---- */
  --txt:   #E9EBF0;   /* primary — soft white, not harsh #fff */
  --txt-2: #AAB1BE;   /* secondary — readable                */
  --txt-3: #6E7480;   /* muted — lifted for legibility        */
  --txt-4: #4A505C;   /* faint                                */

  /* ---- semantic state ---- */
  --red:    #FF2E55;   /* BUST / loss / cash-out-too-late */
  --red-2:  #FF6B86;
  --green:  #38E89B;   /* realized profit ↑               */
  --gold:   #FFC53D;   /* heritage nod / coins            */

  /* ---- ACCENT (tweakable — JS overrides these) ---- */
  --accent:     #B8FF2E;            /* live curve / brand glow */
  --accent-ink: #0A0B0E;            /* text on accent fills    */
  --accent-dim: color-mix(in srgb, var(--accent) 14%, transparent);
  --accent-soft:color-mix(in srgb, var(--accent) 26%, transparent);

  /* ---- FONTS (tweakable — JS overrides) ---- */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* ---- radii ---- */
  --r-xl: 24px;
  --r-lg: 18px;
  --r-md: 12px;
  --r-sm: 9px;
  --r-pill: 999px;

  /* ---- motion (speed tweak scales --t-scale) ---- */
  --t-scale: 1;
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-snap: cubic-bezier(.5,1.6,.4,1);
}

/* ---- LIGHT THEME (chrome lightens; the game stage stays a dark space viewport) ---- */
:root[data-theme="light"] {
  --ink-0: #E2E6EE;
  --ink-1: #ECEFF5;   /* app background — soft cool grey */
  --ink-2: #FFFFFF;   /* cards / panels */
  --ink-3: #F1F4F9;   /* fields */
  --ink-4: #E5E9F1;   /* hover / raised */
  --line:   rgba(20,26,40,.10);
  --line-2: rgba(20,26,40,.15);
  --line-3: rgba(20,26,40,.24);
  --txt:   #161A22;
  --txt-2: #525A68;
  --txt-3: #5C6470;
  --txt-4: #8A92A0;
  --red:   #E11D48;   /* readable on white */
  --green: #0C7A40;   /* deep, friendly green on white */
  --gold:  #B7820A;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--ink-1);
  color: var(--txt);
  font-family: var(--font-display);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* tabular numerals everywhere numbers tick */
.tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

::selection { background: var(--accent); color: var(--accent-ink); }

/* thin custom scrollbars in panels */
.bb-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
.bb-scroll::-webkit-scrollbar-track { background: transparent; }
.bb-scroll::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 99px; }
.bb-scroll::-webkit-scrollbar-thumb:hover { background: var(--line-3); }

@keyframes bb-pop {
  0%   { transform: scale(.6); opacity: 0; }
  60%  { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes bb-rise {
  from { transform: translateY(14px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
@keyframes bb-flash {
  0% { opacity: .9; } 100% { opacity: 0; }
}
@keyframes bb-pulse-ring {
  0%   { transform: scale(.8); opacity: .7; }
  100% { transform: scale(2.4); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}