/* 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.

   ==========================================================================
   THE SITE IS YELLOW. THE CYAN RAMP BELOW IS NOT WHAT RENDERS.
   ==========================================================================
   site/index.html sets data-brand="yellow" before the stylesheets resolve, so
   the :root[data-brand="yellow"] block further down OVERRIDES the whole ramp
   and --accent resolves to #FFCE1B, not #42FFFF. Cyan is BLOCKBET's parent
   brand; yellow is what BlockPacks ships (Ryan, 19 Aug: "bb branding but
   black/grey/yellow").

   Reading this file top-down and stopping at --accent gives you the wrong
   colour. That has now caught two separate sessions building BlockPacks
   documents in the parent company's cyan, so it is written here rather than
   left to be rediscovered. If you need the live accent, use #FFCE1B, or read
   it off the running page.
   ========================================================================== */
@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}
  /* ...EXCEPT the chrome leaving the room for a rip. Blanket-zeroing that
     turned the whole exit into a single frame — the dock and the live bar
     simply blinked out of existence (Luke's screen recording, 22 Aug: the
     dock's brightness fell 88.24 -> 32.48 between two frames, no
     intermediate value anywhere). That is not "reduced motion", that is a
     broken transition, and a phone in Low Power Mode or with the
     accessibility setting on got a visibly broken product.
     The preference asks for less TRAVEL, so: no travel at all — the pieces
     hold position and FADE. Class selectors outrank the `*` above, so this
     wins whatever the source order. */
  /* `visibility` HAS to stay in the transitioned list. The phone's dock and
     crate go visibility:hidden for the rip and rely on a delayed visibility
     transition to stay on screen while they animate — force the property
     list down to opacity alone and they are hidden on frame 0, fading
     invisibly (codex round 12). Two properties, two durations, two delays:
     opacity fades, visibility flips at the END going out and IMMEDIATELY
     coming back. */
  .mdock,.mcrate,.strip,.rail--left,.rail--right,.postrip,.poolrail{
    transition-property:opacity,visibility!important;
    transition-duration:220ms,0s!important;
    transition-delay:0s,0s!important;
    transition-timing-function:ease!important}
  [data-state="rip"] .mdock,[data-postrip="1"] .mdock,
  [data-state="rip"] .mcrate,[data-postrip="1"] .mcrate,
  [data-state="rip"] .strip,
  [data-state="rip"] .rail--left,[data-state="rip"] .rail--right{
    transform:none!important;
    transition-property:opacity,visibility!important;
    transition-duration:220ms,0s!important;
    transition-delay:0s,220ms!important}
}