/* Dice to Seed: shared brand tokens.
   BTC Sessions "Midnight Garage" design system (the YouTube Optimizer's system,
   design/system.css and design/midnight garage.md): rockabilly badass x broadcast
   control room. Layered darkness with atmosphere, Bebas set big, mono data,
   orange is earned, blue is information, red only for live. */
@font-face { font-family: 'Bebas Neue'; src: url('../fonts/bebas-neue.ttf') format('truetype'); font-display: block; }
@font-face { font-family: 'Montserrat'; font-weight: 400; src: url('../fonts/montserrat-400.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Montserrat'; font-weight: 600; src: url('../fonts/montserrat-600.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Montserrat'; font-weight: 700 800; src: url('../fonts/montserrat-700.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('../fonts/jetbrains-mono-400.ttf') format('truetype'); font-display: swap; }

:root {
  /* inks: page, panel, card, raised. Never one flat colour. */
  --ink-0: #07090F;
  --ink-1: #0D101C;          /* Midnight Sky */
  --ink-2: #121828;
  --ink-3: #1A2338;
  --line: #1F2A48;
  --line-bright: #31406B;

  /* brand */
  --orange: #F7931A;         /* Bitcoin Orange: the ONE most important thing on screen */
  --orange-hot: #FFB347;
  --orange-deep: #E8630A;
  --flame: linear-gradient(135deg, #FFC24B 0%, #F7931A 48%, #E8630A 100%);
  --blue: #7ED3F2;           /* Electro Blue: information, the computed, the checksum */
  --blue-deep: #3BA7D9;

  /* signals */
  --live: #FF4757;           /* ON AIR and the burn banner only */
  --ok: #3DDC84;
  --warn: #FFC53D;
  --bad: #FF6B6B;            /* errors and re-rolls */

  /* text */
  --text: #F4F6FB;
  --muted: #8B96B3;
  --faint: #5A6584;

  /* dice */
  --die: #C8202F;
  --pip: #FFFFFF;

  --r-sm: 8px; --r-md: 12px; --r-lg: 18px;
  --shadow: 0 14px 34px rgba(0, 0, 0, .35);
  --hairline: inset 0 1px 0 rgba(255, 255, 255, .045);

  --font-display: 'Bebas Neue', Impact, sans-serif;
  --font-body: 'Montserrat', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* names used by the first build, kept so nothing breaks */
  --ink: var(--ink-1);
  --ink-lift: var(--ink-2);
  --ink-line: var(--line);
  --text-2: #A7AEC0;
  --text-3: var(--muted);
  --danger: var(--live);
}

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

/* Atmosphere: add class="atmos" to the page root. Glow washes plus a faint
   44px blueprint grid fading out down the page. */
.atmos { position: relative; isolation: isolate; }
.atmos::before, .atmos::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: -1; }
.atmos::before {
  background:
    radial-gradient(1200px 600px at 8% -10%, rgba(247,147,26,.10), transparent 60%),
    radial-gradient(900px 500px at 105% 110%, rgba(126,211,242,.07), transparent 60%),
    radial-gradient(600px 400px at 50% 120%, rgba(232,99,10,.05), transparent 70%);
}
.atmos::after {
  background-image:
    linear-gradient(rgba(126,211,242,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(126,211,242,.035) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 38%);
          mask-image: linear-gradient(to bottom, #000 0%, transparent 38%);
}

/* Kicker: every section opens with a mono slash label. */
.kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--orange); font-weight: 600; }
.kicker::before { content: '// '; color: var(--faint); }

/* Flame text for the one emphasised word. */
.flame-text { background: var(--flame); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 18px rgba(247,147,26,.35)); }

/* The burn banner. Every screen, always visible, never dismissible. */
.burn-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: linear-gradient(90deg, #B0122A, var(--live) 50%, #B0122A); color: #fff; text-align: center;
  font-family: var(--font-mono); font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  font-size: 11px; line-height: 1.2; padding: 7px 10px;
  padding-top: calc(7px + env(safe-area-inset-top, 0px));
  box-shadow: 0 0 24px rgba(255,71,87,.35);
}
.burn-banner + * { margin-top: 30px; }