/* ==========================================================================
   design-tokens.css — GENERATED from the handoff's tokens.json
   Do not hand-edit. Run: node _shotgun/gen-tokens.js
   ==========================================================================

   This file used to be hand-written, and :root carried themes.LIGHT — so every
   component that honoured a token got a light colour on a dark product, and
   styles.css had to bury each one under a hardcoded dark hex. Generating it
   removes that whole class of drift.

   DARK IS THE DEFAULT. The prototype ships dark; light is the opt-in.
   ========================================================================== */

:root {
  /* the prototype's THEMES.dark — the product default, all 52 values */
  --bg: #0d0c0b;
  --bg2: #100e0c;
  --surf0: #131110;
  --surf: #141210;
  --surf2: #171410;
  --surf3: #1c1917;
  --surf4: #2a251d;
  --goldwash: #241d10;
  --goldwash2: #1a1610;
  --line: #1c1a17;
  --line2: #262218;
  --line3: #3a3226;
  --line4: #4d4230;
  --line5: #5a4c2e;
  --line6: #7d6b45;
  --gold: #c9a24a;
  --gold-hi: #e8c874;
  --gold-dim: #a08a52;
  --on-gold: #141210;
  --ink: #efe9dc;
  --ink2: #a09689;
  --ink3: #8e867b;
  --ink4: #8a8177;
  --red: #b8332a;
  --green: #7d9a6a;
  --felt: #123024;
  --feltGradient: radial-gradient(120% 90% at 50% 40%,#1c4433 0%,#0f2b20 62%,#0b1f17 100%);
  --felt1: #1f4032;
  --felt2: #193527;
  --felt3: #122a1d;
  --on-felt: #eef0e9;
  --on-felt-2: #b6c2b1;
  --felt-gold: #e8c874;
  --av1: #242019;
  --av2: #171410;
  --avme1: #31281a;
  --avme2: #1d1811;
  --card: #ffffff;
  --card-line: #c4bfb2;
  --card-ink: #14120f;
  --card-red: #cc2f22;
  --card-gold: #7a5f16;
  --win: #12703a;
  --loss: #c22a1e;
  --bubble: #f7f4ec;
  --bubble-ink: #1a1815;
  --scrim: rgba(8,7,6,.74);
  --scrim-light: rgba(8,7,6,.55);
  --scrim-heavy: rgba(8,7,6,.88);
  --felt-shadow: inset 0 1px 0 rgba(232,200,116,.20),inset 0 0 0 4px rgba(0,0,0,.28),inset 0 -30px 50px rgba(0,0,0,.45),0 14px 34px rgba(0,0,0,.55);
  --felt-shadow-sm: inset 0 1px 0 rgba(232,200,116,.20),inset 0 -22px 38px rgba(0,0,0,.45);
  --felt-line: #2f5c45;
}

:root[data-theme="light"] {
  /* THEMES.light. Scoped to :root on purpose — a bare [data-theme="light"]
     matches any element carrying the attribute, which made the theme picker
     re-theme its own button. */
  --bg: #f5f5f5;
  --bg2: #e9e9e9;
  --surf0: #fbfbfb;
  --surf: #ffffff;
  --surf2: #efefef;
  --surf3: #e7e7e7;
  --surf4: #d6d6d6;
  --goldwash: #f3ead2;
  --goldwash2: #f9f3e4;
  --line: #dedede;
  --line2: #c8c8c8;
  --line3: #a0a0a0;
  --line4: #7d7d7d;
  --line5: #646464;
  --line6: #4b4b4b;
  --gold: #8a6a12;
  --gold-hi: #6b5009;
  --gold-dim: #4a3a0c;
  --on-gold: #fbf8f0;
  --ink: #141414;
  --ink2: #343434;
  --ink3: #424242;
  --ink4: #404040;
  --red: #a5261d;
  --green: #2b5c33;
  --felt: #143a2b;
  --feltGradient: radial-gradient(120% 90% at 50% 40%,#1f5340 0%,#143a2b 62%,#0f2e22 100%);
  --felt1: #2f6647;
  --felt2: #265539;
  --felt3: #1c4029;
  --on-felt: #eef0e9;
  --on-felt-2: #b6c2b1;
  --felt-gold: #e8c874;
  --av1: #f4f4f4;
  --av2: #dfdfdf;
  --avme1: #f5ecd0;
  --avme2: #e4d3a6;
  --card: #ffffff;
  --card-line: #8b8f92;
  --card-ink: #14120f;
  --card-red: #cc2f22;
  --card-gold: #7a5f16;
  --win: #12703a;
  --loss: #c22a1e;
  --bubble: #151515;
  --bubble-ink: #f4f4f4;
  --scrim: rgba(24,26,28,.48);
  --scrim-light: rgba(24,26,28,.30);
  --scrim-heavy: rgba(24,26,28,.66);
  --felt-shadow: inset 0 1px 0 rgba(255,255,255,.13),inset 0 0 0 4px rgba(0,0,0,.10),inset 0 -32px 52px rgba(0,0,0,.26),0 12px 30px rgba(46,70,52,.26);
  --felt-shadow-sm: inset 0 1px 0 rgba(255,255,255,.13),inset 0 -24px 36px rgba(0,0,0,.24);
  --felt-line: #3f7d59;
}

/* ---- compatibility aliases ----------------------------------------------
   styles.css grew a parallel palette while :root was serving LIGHT values —
   --navy, --cream, --lime, --ink-soft and friends, several of them hardcoded
   to the dark hexes the tokens should have been giving it. These aliases point
   the old names at the real ones so the existing stylesheet keeps working and
   now resolves CORRECTLY, instead of needing a big-bang rewrite. Retire them
   as each rule is ported to the design system. */
:root {
  --felt-gradient: var(--feltGradient);
  --gold-accent: var(--gold-hi);
  --muted: var(--ink3);
  --ink-soft: var(--ink2);
  --ink-mute: var(--ink3);
  --cream: var(--ink);
  --cream-soft: var(--ink2);
  --border: var(--line2);
  --border-soft: var(--line);
  --border-lit: var(--line4);
  --panel: var(--surf2);
  --panel-2: var(--surf3);
  --navy: var(--surf);
  --navy-deep: var(--bg);
  --accent: var(--gold);
  --rule-active: var(--rule-activePanel);
  --team-blue: var(--gold);
  --team-green: var(--green);
  --seat-avatar-size: 46px;
  --status-bar-height: var(--statusH);
}

/* ---- device geometry (tokens.json > devices) ----------------------------
   Every band is a number the design chose, not a consequence of content.
   phone 844 = status 24 + hud 54 + table 524 + hand 158 + rail 58 + safe 26,
   which is exactly the 2.8 / 6.4 / 62.1 / 18.7 / 6.9 / 3.1 vertical budget. */
:root {
  --fw: 390px;
  --fh: 844px;
  --cw: 84px;
  --ch: 118px;
  --tw: 59px;
  --th: 83px;
  --statusH: 24px;
  --hudH: 54px;
  --handH: 158px;
  --railH: 58px;
  --safeH: 26px;
  --lastBox: 98px;
}

@media (min-width: 768px) {
  :root {
    --fw: 834px;
    --fh: 1112px;
    --cw: 120px;
    --ch: 168px;
    --tw: 84px;
    --th: 118px;
    --statusH: 28px;
    --hudH: 64px;
    --handH: 214px;
    --railH: 70px;
    --safeH: 30px;
    --lastBox: 126px;
  }
}
@media (min-width: 1200px) {
  :root {
    --fw: 1440px;
    --fh: 860px;
    --cw: 112px;
    --ch: 157px;
    --tw: 82px;
    --th: 115px;
    --statusH: 0px;
    --hudH: 60px;
    --handH: 196px;
    --railH: 64px;
    --safeH: 18px;
    --lastBox: 128px;
    --sidePanel: 460px;
  }
}

/* ---- seat + corner anchors ----------------------------------------------
   "percent of the felt content box; you always render south; mirror x for RTL"
   "square, lastBox px, identical in both themes" */
:root {
  --seat-south-x: 50%;
  --seat-south-y: 84%;
  --seat-north-x: 50%;
  --seat-north-y: 14%;
  --seat-west-x: 11%;
  --seat-west-y: 50%;
  --seat-east-x: 89%;
  --seat-east-y: 50%;
  --corner-totals-x: 13%;
  --corner-totals-y: 12%;
  --corner-last-x: 87%;
  --corner-last-y: 12%;
  --corner-fill: rgba(0,0,0,.62);
  --corner-border: 1px solid rgba(255,255,255,.14);
}

/* ---- radius -------------------------------------------------------------
   "no rounded corners anywhere; circles only for presence dots and frame artwork"

   ...with ONE exception the token file does not state but the gameplay
   prototype does: every element carrying background:var(--card) has a small
   radius — 3px on a hand card, 4px on a played card, 2px on a mini card.
   "Zero everywhere" is a rule about CHROME. A squared playing card reads as a
   coloured rectangle, not a card. */
:root {
  --radius: 0px;
  --radius-sm: 0px;
  --radius-lg: 0px;
  --radius-xl: 0px;
  --radius-card: 3px;
  --radius-card-lg: 4px;
  --radius-card-mini: 2px;
}

/* ---- motion (tokens.json > motion) --------------------------------------
   Reduced motion SHORTENS; it never deletes. A reaction that never plays is
   indistinguishable from one that failed to send. */
:root, :root[data-motion="full"] {
  --m-fly: 260ms;
  --m-hold: 700ms;
  --m-sweep: 300ms;
  --m-stag: 180ms;
  --m-deal: 34ms;
  --m-dealAll: 900ms;
  --m-glow: 120ms;
  --m-lift: 190ms;
  --m-roundSummary: 1800ms;
  --ease-cardFlight: cubic-bezier(.45,0,.55,1);
  --ease-overshoot: cubic-bezier(.3,1.4,.5,1);
  --ease-riffle: cubic-bezier(.36,0,.5,1);
}
:root[data-motion="reduced"] {
  --m-fly: 120ms;
  --m-hold: 480ms;
  --m-sweep: 110ms;
  --m-stag: 60ms;
  --m-deal: 0ms;
  --m-dealAll: 80ms;
  --m-glow: 0ms;
  --m-lift: 0ms;
}
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) {
    --m-fly: 120ms;
    --m-hold: 480ms;
    --m-sweep: 110ms;
    --m-stag: 60ms;
    --m-deal: 0ms;
    --m-dealAll: 80ms;
    --m-glow: 0ms;
    --m-lift: 0ms;
  }
}

/* ---- spacing scale ------------------------------------------------------ */
:root {
  --sp-4: 4px;
  --sp-6: 6px;
  --sp-7: 7px;
  --sp-9: 9px;
  --sp-10: 10px;
  --sp-12: 12px;
  --sp-14: 14px;
  --sp-16: 16px;
  --sp-18: 18px;
  --sp-20: 20px;
  --sp-22: 22px;
  --sp-26: 26px;
}

/* ---- type --------------------------------------------------------------- */
:root {
  --font-ui: "Archivo", system-ui, sans-serif;
  --font-ar: "Noto Kufi Arabic", "Archivo", sans-serif;
  --type-screenTitle: 800 15px/1;
  --type-pageDisplay: 800 24-28px/1.1 letter-spacing:-.02em;
  --type-hero: 900 42px/1 letter-spacing:-.03em;
  --type-scoreNumeral: 900 30-34px/1 letter-spacing:-.02em;
  --type-body: 400 12-13px/1.5;
  --type-bodySmall: 400 11px/1.5;
  --type-fieldLabel: 700 10px/1 letter-spacing:.12em uppercase;
  --type-kicker: 700 9px/1 letter-spacing:.14em uppercase;
  --type-tabLabel: 700 9px/1 letter-spacing:.1em uppercase;
  --type-button: 700-800 13-15px/1;
  --type-tag: 700-800 8-9px/1 letter-spacing:.1em;
}
:lang(ar), [dir="rtl"] { --font-ui: var(--font-ar); }

/* ---- rules, targets, chrome --------------------------------------------- */
:root {
  --rule-hairline: 1px var(--line2);
  --rule-section: 2px var(--line4);
  --rule-activePanel: 2px var(--gold);
  --tap: 44px;
  --tabbar-h: 56px;
  --tab-target-w: 78px;
  --tab-active-mark: inset 0 2px 0 var(--gold);
  --header-h: 52px;
  --header-rule: 2px solid var(--line4);
  --toast-ms: 4200ms;
  --toast-border: 3px;
  --toast-info: var(--gold);
  --toast-success: var(--green);
  --toast-error: var(--red);
  --toast-neutral: var(--line6);
}

/* "nowrap is required: controls are shrink-to-fit and wrap without it, especially in Arabic and under font fallback" */
.t-control { min-height:44px;white-space:nowrap;display:flex;align-items:center;padding:0 13px }