/* BlockPacks design tokens.
   Brand values are Blockbet's own, verified three ways: their production
   branch (primary.main = brand[500]), the running app's computed styles,
   and the wordmark PNG's pixels. Do not "improve" these. */
@font-face {
  font-family:'Varien';
  src:url('../assets/fonts/varien.otf') format('opentype');
  font-display:swap;
}
:root {
  /* brand — Blockbet cyan ramp, origin/main-v2 src/theme/palette.ts */
  --brand-50:#EBFFFF; --brand-100:#D6FFFF; --brand-200:#B8FFFF; --brand-300:#BEE8F9;
  --brand-400:#6AFFFF; --brand-500:#42FFFF; --brand-600:#35D6D6; --brand-700:#28A8A8;
  --brand-800:#1A7474; --brand-900:#0E4545; --brand-950:#082A2A; --brand-975:#041A1A;

  /* neutrals */
  --gray-50:#F7F7F8;  --gray-200:#CDCFD8; --gray-300:#AEAFBB; --gray-400:#8E8FA2;
  --gray-500:#707187; --gray-700:#454558; --gray-800:#323241; --gray-850:#28282F;
  --gray-900:#22222C; --gray-925:#212126; --gray-950:#15151A; --gray-975:#0D0D10;

  /* semantic */
  --surface:      var(--gray-975);   /* Blockbet background.default */
  --surface-raised:var(--gray-925);
  --surface-sunk: #0A0A0C;
  --page-bg:      #161619;           /* Blockbet BG_COLOR */
  --text:         #FFFFFF;
  --text-dim:     var(--gray-300);
  --text-faint:   var(--gray-500);
  --hairline:     rgba(255,255,255,0.08);
  --hairline-str: rgba(255,255,255,0.14);
  --accent:       var(--brand-500);
  --accent-dim:   var(--brand-700);
  --accent-rgb:   66,255,255;        /* --accent as raw R,G,B for rgba() glows */
  --danger:#FF3F21; --success:#00E603; --warn:#FFAD00;

  /* 4/8pt spacing rhythm */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;

  /* radii — measured off the running Blockbet app */
  --r-sm:4px; --r-md:10px; --r-lg:16px; --r-xl:24px; --r-pill:120px;

  /* type */
  --font-display:'Poppins',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  /* Blockbet's own uppercase display face (assets/fonts/varien.otf, pulled
     from the bbdesign reference site 19 Aug). Uppercase-only — pair with
     text-transform:uppercase wherever it is used. */
  --font-brand:'Varien','Poppins',system-ui,sans-serif;
  --fs-xs:12px; --fs-sm:13px; --fs-md:15px; --fs-lg:18px; --fs-xl:24px; --fs-2xl:34px;

  /* measured chrome geometry, SITE-LAYOUT.md */
  --h-header:6.4svh; --h-strip:8.4svh; --w-rail:13.2%;

  --dur-fast:160ms; --dur-mid:260ms; --ease-out:cubic-bezier(.22,.8,.36,1);
  --z-stage:10; --z-rail:20; --z-header:40; --z-modal:100;
}
/* ---- ?brand=yellow MOCK (Ryan, 19 Aug: "bb branding but black/grey/yellow").
   The ramp is Blockbet's own palette.orange, read off the live theme at
   bbdesign-zeta.vercel.app/foundations on 19 Aug — same source of truth as the
   cyan ramp above, shifted one step brighter so --accent (=brand-500) lands on
   #FFCE1B: Ryan said YELLOW, and the true 500 (#FFAD00, now at 600) reads
   amber. Shift the ramp back one step if he wants it warmer. */
:root[data-brand="yellow"] {
  --brand-50:#FFFDEA; --brand-100:#FFF7C5; --brand-200:#FFEF85; --brand-300:#FFE046;
  --brand-400:#FFE046; --brand-500:#FFCE1B; --brand-600:#FFAD00; --brand-700:#E28300;
  --brand-800:#BB5B02; --brand-900:#984608; --brand-950:#7C3A0B; --brand-975:#481D00;
  --accent-rgb: 255,206,27;
  --page-bg:#0D0D10;                 /* blacker page — slabz.com-simple */
}

/* ── BIG GLASS: ONE DIAL, --ui ──────────────────────────────────────────
   Luke on his 3440x1440, 21 Aug: the rewards, rank, choose-a-pack, logo,
   header, live bar and every button are all too small — "we need to make
   them bigger so they can actually see the cards" — and the first attempt
   (token tiers + per-property px overrides, ~1.5x) read as "nothing
   changed". So: one scale factor, applied as `zoom` on the chrome layers
   in shell.css, sized ~2x against the 1464-wide reference.

   HOW OTHER BRANDS FIX THIS (Luke asked; measured, not assumed): slabz.com
   and stake.com were driven headless at 3440x1440 AND 1464x968 — root font
   16px at both, median button height identical at both (56 / 48), median
   image width identical. Neither scales on ultrawide; both REFLOW, filling
   the extra width with more tiles in a fluid grid (their content column
   goes 1204 -> 3180). That escape is closed to us: our middle column is a
   fixed-aspect 3D stage and the rails hold a fixed number of rows, so
   width buys us nothing to reflow into. Scaling the HUD is the honest
   answer for this shape — which is what game HUDs do on big glass.

   TWO AXES, because a 2560x1080 ultrawide is wide but SHORT: --ui-w is
   what the width wants, --ui-h is what the height can carry (the left
   rail's column needs ~745px of stacked chrome at 1x, so the ceiling is
   about viewport-height / 745), and --ui is the smaller of the two.
   Below 2000px wide nothing changes at all: every shape Luke has already
   approved — 1920x1080, 1600x950, 1464x968, 1200x720, the tablet band and
   the phone — computes --ui-w:1 and is pixel-identical. ────────────── */
:root{ --ui-w:1; --ui-h:1 }
@media (min-width:2000px){ :root{ --ui-w:1.30 } }
@media (min-width:2400px){ :root{ --ui-w:1.50 } }
@media (min-width:2800px){ :root{ --ui-w:1.72 } }
@media (min-width:3200px){ :root{ --ui-w:1.95 } }
@media (min-width:3800px){ :root{ --ui-w:2.20 } }
@media (min-height:900px) { :root{ --ui-h:1.18 } }
@media (min-height:1000px){ :root{ --ui-h:1.32 } }
@media (min-height:1100px){ :root{ --ui-h:1.46 } }
@media (min-height:1250px){ :root{ --ui-h:1.66 } }
@media (min-height:1400px){ :root{ --ui-h:1.90 } }
@media (min-height:1600px){ :root{ --ui-h:2.20 } }
/* declared last so the ladder above has landed; min() of two unitless
   customs is plain CSS math and feeds `zoom` directly */
:root{ --ui: min(var(--ui-w), var(--ui-h)) }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}