/*
 * Design tokens — marketing site edition.
 *
 * ============================================================================
 * STRUCTURE MIRRORS `admin/src/ui/tokens.css`, WHICH MIRRORS
 * `unity/Assets/UI/Theme/tokens.uss`. ALL THREE MUST BE KEPT IN STEP.
 *
 * PALETTE NOTE — RATRI BAZAAR × GILDED TABLE. As of the owner-approved final
 * Kismat identity, THE VALUES HERE LEAD THE MIRRORS: deep plum night ground
 * (#1c0c19 family) washed with lantern glow, emerald baize (--felt) on game
 * surfaces only, lantern gold (#ffb84d) for money and brand, a marigold
 * gradient CTA (#ffc255 → #f5a623), rani red (#e85d75) for celebration, and
 * Rozha One + Mukta type. The admin and Unity mirrors still carry earlier
 * palettes until their own retint lands; that drift is known, deliberate,
 * and temporary. The token NAMES and structure are still identical across
 * all three files — only values diverge, and only until the client-side
 * retint. Do not "fix" this file back to charcoal or mint.
 * ============================================================================
 *
 * Three surfaces, one product: the Unity client the player installs, the
 * operator panel, and this site — the only place the app is distributed from.
 * A visitor who lands here and then installs the APK should not experience a
 * change of product. Same ground, same lantern-gold accent, same Rozha One /
 * Mukta pairing, same 4px space scale.
 *
 * The values below the line marked "SHARED" are structurally duplicated from
 * the admin mirror. When a value changes there, change it here in the same
 * commit. An unflagged drift between the files is a bug, not a variation.
 *
 * What differs, and why:
 *   - `--font-*` are `url()` font assets in USS and local stacks in admin.
 *     Here they are the same two families served by Google Fonts, because this
 *     is the open web and the visitor has nothing installed yet.
 *   - Motion easing is written as real cubic-beziers, as in the admin mirror.
 *     USS has no cubic-bezier() and takes named curves only.
 *   - The celebration machinery (`--glow-multiplier`, `--tap-bet`,
 *     `--reveal-scale-from`) has no meaning on a marketing page and is omitted,
 *     exactly as it is in the admin mirror.
 *   - The admin-only density tokens (row height, sidebar width, meters, zebra)
 *     are omitted: this site has no dense data table.
 *
 * Tokens under "SITE-ONLY" at the bottom have NO Unity and NO admin
 * counterpart. They exist because a public page is a shape neither of the other
 * two products contains: fluid display type that has to work from a 390px phone
 * to a 1280px desktop, a reading measure, and a page gutter. Never add one of
 * those to tokens.uss or to the admin mirror.
 *
 * CLAUDE.md rule 6 holds on this side too: no page in this site declares a raw
 * colour, size, radius or duration. If a value is needed and is not here, it is
 * added here first.
 */

/* ============================================================ SHARED ===== */
:root {
  /* ---------------------------------------------------------- ground
   * Four steps of depth, deep plum night — never flat grey, never charcoal.
   * Anything needing a fifth is over-layered. */
  --surface-base: rgb(28, 12, 25);      /* #1c0c19 */
  --surface-raised: rgb(44, 18, 38);    /* #2c1226 */
  --surface-overlay: rgb(58, 24, 48);   /* #3a1830 */
  --surface-sunken: rgb(20, 8, 18);     /* #140812 */
  --surface-scrim: rgba(16, 6, 14, 0.74);

  /* ---------------------------------------------------------- ink
   * Warm lamplit ink on the plum night. */
  --text-primary: rgb(251, 238, 221);   /* #fbeedd */
  --text-secondary: rgb(201, 163, 180); /* #c9a3b4 */
  --text-muted: rgb(143, 111, 128);     /* #8f6f80 */
  --text-inverse: rgb(58, 28, 4);       /* #3a1c04 — ink on gold */
  --text-on-accent: rgb(58, 28, 4);     /* ink on the marigold CTA */

  /* ---------------------------------------------------------- accent
   * One hue: marigold. Primary action, active state, focus —
   * nothing you don't press. The full CTA face is --cta-grad below. */
  --accent: rgb(245, 166, 35);          /* #f5a623 */
  --accent-hover: rgb(255, 194, 85);    /* #ffc255 */
  --accent-pressed: rgb(216, 147, 58);  /* #d8933a */
  --accent-subtle: rgba(255, 184, 77, 0.14);
  --accent-border: rgba(255, 184, 77, 0.45);

  /* The per-game accent seam exists in Unity so 38 games can carry identity
   * without forking a component. The operator panel is one product with one
   * identity, so it points at --accent and no screen re-points it. */
  --game-accent: var(--accent);
  --game-accent-hover: var(--accent-hover);
  --game-accent-pressed: var(--accent-pressed);
  --game-accent-subtle: var(--accent-subtle);
  --game-accent-border: var(--accent-border);
  --game-ink-on-accent: var(--text-on-accent);

  /* ---------------------------------------------------------- semantic
   * Separate from the accent, and never a substitute for it. */
  --win: rgb(74, 222, 128);             /* #4ade80 */
  --win-subtle: rgba(74, 222, 128, 0.14);
  --loss: rgb(255, 92, 108);            /* #ff5c6c */
  --loss-hover: rgb(255, 125, 138);
  --loss-pressed: rgb(216, 74, 90);
  --loss-subtle: rgba(255, 92, 108, 0.14);
  --pending: rgb(255, 184, 77);         /* the gold family; see --gold below */
  --pending-subtle: rgba(255, 184, 77, 0.14);
  --info: rgb(111, 177, 255);           /* #6fb1ff */
  --info-hover: rgb(143, 195, 255);
  --info-pressed: rgb(90, 149, 221);
  --info-subtle: rgba(111, 177, 255, 0.14);

  /* Multiplier heat. Mirrored for completeness; the panel uses it only on the
   * hold-drift scale, which is the one place magnitude must read before value. */
  --mult-low: rgb(201, 163, 180);
  --mult-mid: rgb(74, 222, 128);
  --mult-high: rgb(255, 184, 77);
  --mult-max: rgb(251, 146, 60);

  /* ---------------------------------------------------------- lines
   * Warm gold-biased hairlines — lantern light catching an edge, not a
   * white wireframe. */
  --border-subtle: rgba(255, 184, 77, 0.1);
  --border-default: rgba(255, 184, 77, 0.17);
  --border-strong: rgba(255, 184, 77, 0.28);
  --focus-ring: rgb(255, 184, 77);
  --border-hairline: 1px;
  --border-thick: 2px;

  /* ---------------------------------------------------------- type
   * Two families: Rozha One carries the brand and the display line, Mukta
   * carries everything read or pressed. Tabular numerals everywhere money
   * lines up in a column — see --numeric below. */
  --font-display: 'Rozha One', 'Mukta', serif;
  --font-body: 'Mukta', system-ui, sans-serif;
  --font-body-medium: 'Mukta', system-ui, sans-serif;
  --font-numeric: 'Mukta', ui-monospace, system-ui, sans-serif;
  --numeric: tabular-nums lining-nums;

  /* Display weight. Rozha One ships in exactly one weight (400); asking it
   * for anything else synthesises a fake bold. Both display weights therefore
   * sit at 400 — the serif carries the display register by shape, not mass. */
  --weight-display: 400;
  --weight-display-sub: 400;

  --text-display: 34px;
  --text-title: 24px;
  --text-heading: 19px;
  --text-body: 15px;
  --text-label: 13px;
  --text-caption: 11px;

  --leading-tight: 1.15;
  --leading-normal: 1.45;

  --tracking-label: 0.7px;
  --tracking-display: 0px;   /* Rozha One needs no negative tracking */

  /* ---------------------------------------------------------- space
   * 4px base. Every gap and inset is one of these. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* ---------------------------------------------------------- shape
   * Cards sit at 12–16px, per the identity boards. */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ---------------------------------------------------------- state */
  --opacity-disabled: 0.38;
  --opacity-pressed: 0.88;
  --transparent: rgba(0, 0, 0, 0);

  /* Skeleton pulse endpoints. These DO exist in tokens.uss and were simply
   * missing from this mirror — a loading table pulses between them here for the
   * same reason C# toggles two classes there. Restoring them, not adding them. */
  --opacity-skeleton-lo: 0.45;
  --opacity-skeleton-hi: 1;

  /* ---------------------------------------------------------- motion
   * Durations mirrored exactly. --ease-spring is the real curve that USS's
   * named `ease-out-back` approximates; keep the two describing one motion. */
  --dur-instant: 80ms;
  --dur-fast: 140ms;
  --dur-normal: 220ms;
  --dur-slow: 380ms;
  --dur-none: 0s;

  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --lift-hover: -2px;
  --press-scale: 0.97;

  /* ---------------------------------------------------------- targets */
  --tap-min: 44px;

  /* ==========================================================================
   * PENDING MIRROR. Added here first; tokens.uss should take these verbatim so
   * the two files line up again. Flagged in the design-system report.
   * ======================================================================= */

  /* Icons are drawn, not shipped as a font, and every one is authored on a
   * 16-unit grid at a single stroke weight. Sizes are tokens so an icon can
   * never be sized by eye next to the text it labels. */
  --icon-sm: 14px;
  --icon-md: 16px;
  --icon-lg: 20px;
  --icon-xl: 28px;
  --icon-stroke: 1.5;

  /* A translucent wash that lifts whatever surface it sits on by one notch
   * without needing to know which rung of the ladder that is. Warm — candle
   * light, not fluorescent white. */
  --surface-wash: rgba(255, 214, 171, 0.05);
  --surface-wash-strong: rgba(255, 214, 171, 0.09);

  /* ==========================================================================
   * SITE-ONLY. No counterpart in tokens.uss or in the admin mirror — do not
   * add these there. A public page has to hold up on a 390px phone on a slow
   * connection AND on a 1280px desktop, which is a problem neither of the
   * other two products has: the client is laid out per-screen in Unity, and
   * the panel is only ever used on a desk.
   * ======================================================================= */

  /* Fluid display type. The shared scale tops out at --text-display (34px),
   * which is a phone-sized headline; a marketing hero needs to grow with the
   * viewport without a media query per step. Each clamp() starts at a shared
   * token value so the small end of every ramp is still the design system. */
  --text-hero: clamp(40px, 10.4vw, 66px);      /* floor > --text-display */
  --text-section: clamp(27px, 5vw, 46px);      /* floor > --text-title   */
  --text-subhead: clamp(19px, 2.4vw, 26px);    /* floor = --text-heading */
  --text-lead: clamp(17px, 1.7vw, 21px);       /* one step over body     */
  --text-numeral: clamp(32px, 6.2vw, 54px);    /* the big figures        */

  /* Page frame. */
  --site-max: 1120px;          /* content column, wider than --content-max is
                                * not readable and narrower wastes a desktop  */
  --site-gutter: var(--space-4);
  --header-height: 58px;
  --measure: 68ch;             /* reading measure for long-form prose */
  --measure-tight: 54ch;       /* lead paragraphs and pull copy */

  /* Grids. Minimums, not counts — the grid rewraps itself and the site never
   * declares "3 columns" anywhere. */
  --tile-min: 260px;           /* prose card before a grid rewraps */
  --step-min: 240px;           /* how-it-works step */
  --fact-min: 150px;           /* a labelled figure in a fact row */

  /* Depth. Used on exactly two things — the sticky header once it has content
   * scrolling under it, and nothing else. The client has no box-shadow at all
   * and this site should not look like it does. */
  --shadow-sticky: 0 12px 16px -12px rgba(0, 0, 0, 0.72);
  --blur-header: 12px;

  /* Furniture. */
  --rule: 1px;                 /* the hairline that separates every section */
  --mark-size: 26px;           /* a standalone brand glyph (favicon-scale) */
  --diya-w: 16px;              /* the diya mark beside the wordmark */
  --diya-h: 18px;
  --hero-plot-h: 132px;        /* the crash-curve plot in the hero */

  /* A media query cannot read a custom property, so the breakpoints in
   * site.css and lobby.css are written there as literals. They are recorded
   * here so the values still have a single documented home:
   *   --break-lap  720px   phone layout gives way to two columns; on /lobby,
   *                        the bottom nav gives way to the top bar
   *   --break-rail 960px   /lobby only — the 220px sidebar rail appears
   *   --break-desk 1000px  the hero splits and the nav stops collapsing
   * Nothing else in the site is allowed to invent a fourth one. */
  --break-lap: 720px;
  --break-rail: 960px;
  --break-desk: 1000px;
}

/* The page gutter grows once there is room for it. Declared here rather than in
 * site.css so the only file that names a spacing value is still this one. */
@media (min-width: 720px) {
  :root {
    --site-gutter: var(--space-6);
  }
}

/* Reduced motion. In Unity this is a `.reduce-motion` class on the panel root,
 * because USS has no @media. On the web the media query does the same job:
 * re-point the duration tokens once, and every transition in the app flattens
 * without a single component being named. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0s;
    --dur-fast: 0s;
    --dur-normal: 0s;
    --dur-slow: 0s;
    --lift-hover: 0px;
    --press-scale: 1;
  }
}

/* ==========================================================================
 * SITE-ONLY — THE CASINO REGISTER.
 *
 * Everything above this line describes a product surface a player is already
 * inside: the client they installed, the panel an operator works in. Restraint
 * is correct there. A hairline and a single accent is what you want on a
 * screen someone stares at for an hour with money on it.
 *
 * This block is for the one surface that has to make a stranger WANT to be
 * inside: the public page. It is louder on purpose — the plum night, lantern
 * glow around money, real depth on cards, and green baize where a game is
 * actually played.
 *
 * None of it belongs in tokens.uss or in the admin mirror. Do not carry it
 * across. The rule it does NOT break is the one that matters: no page or
 * component declares a raw value. If a louder value is needed, it is added
 * here first and used by name.
 * ======================================================================= */
:root {
  /* ---------------------------------------------------------- ground
   * The stage is the plum night itself (#1c0c19), and its panels are the
   * surface steps above it. --felt is REAL again: emerald baize, the Gilded
   * Table material inside the Bazaar night. It appears ONLY where a game is
   * played or previewed — the crash card, a game tile's art well, the live
   * bets card — never on marketing furniture. */
  --stage: rgb(28, 12, 25);        /* = --surface-base, #1c0c19 */
  --stage-deep: rgb(20, 8, 18);    /* = --surface-sunken, #140812 */
  --felt: rgb(20, 64, 46);         /* #14402e — emerald baize */
  --felt-raised: rgb(26, 79, 57);  /* #1a4f39 */
  --felt-deep: rgb(13, 43, 30);    /* #0d2b1e — the table's shadowed edge */
  --panel: rgb(44, 18, 38);        /* = --surface-raised, #2c1226 */

  /* Ink for copy that sits ON the baize — the plum-biased secondary inks
   * clash with green, so felt carries its own pale-baize pair. */
  --text-on-felt: rgb(207, 228, 211);      /* #cfe4d3 */
  --text-on-felt-dim: rgb(154, 183, 164);  /* #9ab7a4 */

  /* The baize itself, lit from above like a table under a lamp. */
  --wash-felt: radial-gradient(
    130% 140% at 50% 0%,
    rgb(26, 79, 57) 0%,
    rgb(20, 64, 46) 55%,
    rgb(13, 43, 30) 100%
  );

  /* ---------------------------------------------------------- heat
   * Marigold is the ACTION colour and is spent only on things you press.
   * Gold is the MONEY and BRAND colour — win figures, multipliers, the diya —
   * and is never a button face. Rani red is celebration and festivity —
   * the shagun card, the alternate marquee bulb — never a loss. */
  --gold: rgb(255, 184, 77);       /* #ffb84d — lantern gold */
  --gold-deep: rgb(216, 147, 58);  /* #d8933a */
  --gold-pale: rgb(255, 217, 138); /* #ffd98a — the lit bulb */
  --ember: rgb(251, 122, 60);
  --live: rgb(74, 222, 128);
  --rani: rgb(232, 93, 117);       /* #e85d75 */
  --rani-subtle: rgba(232, 93, 117, 0.14);
  --rani-border: rgba(232, 93, 117, 0.45);
  --text-on-rani: rgb(71, 0, 15);  /* #47000f */

  /* The CTA face: a marigold gradient, per the identity boards. */
  --cta-grad: linear-gradient(180deg, rgb(255, 194, 85), rgb(245, 166, 35));
  --cta-grad-hover: linear-gradient(180deg, rgb(255, 208, 122), rgb(255, 184, 77));
  --rani-grad: linear-gradient(180deg, rgb(244, 114, 138), rgb(232, 93, 117));

  /* ---------------------------------------------------------- glow
   * The single biggest lever between "fintech" and "casino". The client has no
   * box-shadow at all; this page has both glow and depth, and that difference
   * is deliberate rather than drift. Glow is lantern light — gold. */
  --glow-accent: 0 10px 34px -10px rgba(255, 184, 77, 0.5);
  --glow-accent-lg: 0 18px 60px -14px rgba(255, 184, 77, 0.55);
  --glow-ink-accent: 0 0 26px rgba(255, 184, 77, 0.45);
  --glow-ink-gold: 0 0 30px rgba(255, 217, 138, 0.4);

  /* ---------------------------------------------------------- depth */
  --shadow-card: 0 14px 26px -18px rgba(0, 0, 0, 0.95);
  --shadow-card-hover: 0 26px 44px -22px rgba(0, 0, 0, 1);
  --shadow-panel: 0 34px 70px -34px rgba(0, 0, 0, 1);
  --inset-top: inset 0 1px 0 rgba(255, 214, 171, 0.07);
  --inset-top-strong: inset 0 1px 0 rgba(255, 214, 171, 0.11);

  /* ---------------------------------------------------------- ambience
   * Radial washes only. A two-hue linear gradient across a hero is the single
   * most generic thing a page can do, and this page does not do it. These are
   * pools of lantern glow on the plum night — one gold, one rani. */
  --wash-accent: radial-gradient(
    120% 80% at 12% 0%,
    rgba(255, 184, 77, 0.13) 0%,
    rgba(255, 184, 77, 0.04) 38%,
    rgba(0, 0, 0, 0) 72%
  );
  --wash-gold: radial-gradient(
    90% 70% at 92% 8%,
    rgba(232, 93, 117, 0.1) 0%,
    rgba(0, 0, 0, 0) 66%
  );
  --wash-tile: radial-gradient(
    100% 100% at 50% 0%,
    rgba(255, 217, 138, 0.07) 0%,
    rgba(0, 0, 0, 0) 70%
  );

  /* ---------------------------------------------------------- big type
   * --text-mega is the live multiplier and nothing else. It is allowed to be
   * absurd; it is the first thing a visitor sees and it has two seconds. */
  --text-mega: clamp(66px, 21vw, 152px);
  --text-figure: clamp(30px, 6vw, 46px);
  --tracking-mega: -0.02em;

  /* ---------------------------------------------------------- targets
   * The primary call to action. This name replaces --tap-bet, which site.css
   * referenced and tokens.css never defined — so that min-height declaration
   * resolved to nothing and every button on the site had no minimum height at
   * all. Exactly the failure mode described in HANDOFF §5.3, on the web side. */
  --tap-cta: 56px;

  /* ---------------------------------------------------------- game art
   * Art is authored by the art track and dropped into web/art/. Nothing here
   * describes its colour — that is the one place the site does not own the
   * palette. These only describe the box it sits in. */
  --art-ratio: 4 / 3;
  --art-min: 148px;            /* two columns at 360px, still comfortable */
  --art-hero-min: 132px;       /* the horizontal strip in the hero */

  /* ---------------------------------------------------------- motion */
  --dur-live: 1600ms;          /* the live dot's pulse */
  --dur-marquee: 44s;          /* one pass of the wins ticker */
  --lift-tile: -4px;

  /* ---------------------------------------------------------- lobby
   * The /lobby app shell (lobby.html), which is the BC.Game-shaped page and
   * not a marketing layout: a fixed sidebar rail on desktop, a bottom nav on
   * phones. The rail ground sits BETWEEN --surface-base and --surface-raised —
   * neither existing surface step reads right for a full-height rail, hence a
   * named value here rather than a raw one in lobby.css. */
  --rail-bg: rgb(36, 16, 32);  /* #241020 */
  --rail-w: 220px;
  --topbar-h: 64px;
  --bnav-h: 64px;
  --lobby-tile-min: 148px;     /* an art tile in the lobby grids */
  --search-w: 320px;
}

@media (min-width: 720px) {
  :root {
    --art-min: 190px;
    --art-hero-min: 156px;
    --hero-plot-h: 190px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --lift-tile: 0px;
  }
}

/* ==========================================================================
 * SITE-ONLY — LOBBY ENERGY. Additive to the casino register above; nothing
 * before this block changed. These exist for the /lobby density pass: the
 * promo carousel, the per-kind rows, the crash-history chips, the play
 * overlay, and the designed fallback tile. Same discipline: lobby.css uses
 * these by name and declares no raw value of its own.
 * ======================================================================= */
:root {
  /* ---------------------------------------------------------- carousel */
  --promo-h: 210px;            /* min-height of a promo slide */
  --dur-slide: 6000ms;         /* auto-advance interval (read by lobby.js) */
  --dur-xfade: 650ms;          /* slide crossfade */
  --promo-dot: 8px;

  /* ---------------------------------------------------------- glow, extended
   * The register defines the lantern family; the energy pass needs the wider
   * tile bloom for hover, and the dot glows. The LIVE dot keeps its own green
   * glow — live is a semantic, not a decoration. */
  --glow-gold: 0 10px 34px -10px rgba(255, 184, 77, 0.5);
  --glow-gold-lg: 0 18px 60px -14px rgba(255, 184, 77, 0.5);
  --glow-tile-hover: 0 22px 48px -16px rgba(255, 184, 77, 0.3);
  --glow-dot: 0 0 10px rgba(255, 184, 77, 0.9);
  --glow-dot-live: 0 0 10px rgba(74, 222, 128, 0.9);

  /* Deeper light pools for the carousel cards — same radial-only rule as the
   * register's washes, just brighter, because a promo card IS the light. */
  --wash-promo-accent: radial-gradient(
    110% 130% at 14% -10%,
    rgba(255, 184, 77, 0.26) 0%,
    rgba(255, 184, 77, 0.07) 42%,
    rgba(0, 0, 0, 0) 74%
  );
  --wash-promo-gold: radial-gradient(
    110% 130% at 86% -10%,
    rgba(232, 93, 117, 0.26) 0%,
    rgba(232, 93, 117, 0.07) 42%,
    rgba(0, 0, 0, 0) 74%
  );
  --wash-promo-floor: radial-gradient(
    90% 60% at 50% 112%,
    rgba(255, 184, 77, 0.11) 0%,
    rgba(0, 0, 0, 0) 70%
  );

  /* ---------------------------------------------------------- key-art scrims
   * Full-bleed hero art sits BEHIND live copy and readouts. These gradients
   * are the legibility layer painted over it: darkest where the text lives
   * (left), open where the art performs (right of centre). */
  --scrim-hero: linear-gradient(
    100deg,
    rgba(16, 5, 13, 0.92) 0%,
    rgba(16, 5, 13, 0.72) 34%,
    rgba(16, 5, 13, 0.32) 58%,
    rgba(16, 5, 13, 0.68) 100%
  );
  --scrim-promo: linear-gradient(
    95deg,
    rgba(16, 5, 13, 0.9) 0%,
    rgba(16, 5, 13, 0.6) 44%,
    rgba(16, 5, 13, 0.16) 78%,
    rgba(16, 5, 13, 0.38) 100%
  );

  /* ---------------------------------------------------------- crash history */
  --chip-h: 30px;

  /* ---------------------------------------------------------- rows */
  --row-tile-w: 158px;         /* one art tile in a horizontal category row */

  /* ---------------------------------------------------------- play overlay */
  --play-badge: 48px;          /* the marigold play disc on tile hover */
  --play-tri: 16px;

  /* ---------------------------------------------------------- fallback tile
   * A game without art gets a hue-rotated gradient ground. The HUE is data —
   * lobby.js derives it from the slug and sets `--tile-hue` inline — but the
   * saturation/lightness recipe that makes every hue sit on this palette is
   * design, so it lives here. */
  --fallback-sat: 45%;
  --fallback-l-hi: 30%;
  --fallback-l-mid: 17%;
  --fallback-l-lo: 10%;
  --fallback-ink-sat: 62%;
  --fallback-ink-l: 74%;
  --letter-stroke: 2px;
  --letter-alpha: 0.92;

  /* ---------------------------------------------------------- hero figure
   * Between --text-numeral (too quiet) and --text-mega (a full-bleed
   * takeover): the crash hero's multiplier at card scale. */
  --text-mult: clamp(48px, 8.5vw, 92px);

  /* ---------------------------------------------------------- motion */
  --scale-tile-hover: 1.03;
  --dur-shimmer: 2400ms;       /* LIVE dot ring + gold win-glow breathing */

  /* ---------------------------------------------------------- footer marks */
  --paymark-h: 20px;

  /* ---------------------------------------------------------- the cut
   * RETIRED by the Ratri identity: the diagonal cut was the previous
   * geometry. The angle is now flat and both bands paint nothing, so every
   * component that still references them renders straight and clean. The
   * names survive only so lobby.css needs no structural change. */
  --skew-brand: 0deg;
  --slash-band-accent: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
  --slash-band-gold: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0));
}

@media (min-width: 720px) {
  :root {
    --promo-h: 240px;
    --row-tile-w: 186px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-xfade: 0s;
    --dur-shimmer: 0s;
    --scale-tile-hover: 1;
  }
}

/* ==========================================================================
 * SITE-ONLY — LOBBY UX PASS. Additive to the lobby-energy block; nothing
 * above changed. These exist for the above-the-fold restructure: the crash
 * hero and the welcome-bonus card share one compact banner row, the top bar
 * carries a category nav, and the sidebar rail wears per-section hue tints
 * (the Parimatch-style colourful rail). Same discipline as ever: lobby.css
 * uses these by name and declares no raw value of its own.
 * ======================================================================= */
:root {
  /* ------------------------------------------------------------ hero row
   * The crash card is a banner now, not a stage: art-first, capped height,
   * and the multiplier one size down from --text-mult so the tiles below
   * stay above the fold at 1280x900. */
  --hero-max-h: 340px;
  --hero-min-h: 232px;
  --text-mult-compact: clamp(38px, 4.6vw, 58px);
  --text-wait: clamp(19px, 2.2vw, 24px);   /* "Betting open · locks in Xs" */
  --text-promo: clamp(22px, 2.3vw, 29px);  /* bonus headline at card scale */

  /* ------------------------------------------------------------ rail tints
   * One hue per section so the rail reads as a game floor, not a settings
   * menu. Every tint resolves to a hue already in the register except
   * --violet, which the seated games (Ludo & Rummy) own from here on. The
   * old emerald tint slot now carries lantern gold — emerald is baize, not
   * a light. */
  --violet: rgb(180, 143, 245);    /* #b48ff5 */
  --tint-emerald: var(--gold);
  --tint-ember: var(--ember);
  --tint-rose: var(--rani);
  --tint-sky: var(--info);
  --tint-violet: var(--violet);
  --tint-gold: var(--gold-pale);

  /* ------------------------------------------------------------ empty states
   * The designed absence: the LIVE BETS card before the public feed ships. */
  --empty-mark: 28px;
}

/* The desktop top bar now holds a category nav beside the search box, so the
 * search gives back some width. 960px = --break-rail. */
@media (min-width: 960px) {
  :root {
    --search-w: 224px;
  }
}

/* ==========================================================================
 * SITE-ONLY — RATRI BAZAAR SHAPE LANGUAGE. Additive; nothing above changed.
 * The physical furniture of the identity: casino-chip pills, marquee-bulb
 * strips along banner cards and section heads, and the dotted bazaar divider
 * under the header. lobby.css and site.css use these by name and declare no
 * raw value of their own.
 * ======================================================================= */
:root {
  /* ------------------------------------------------------------ chip pills
   * A category pill is a casino chip: round, with a dashed inner ring.
   * Inactive chips wear the ring in lantern gold; the active chip flips to a
   * gold face with the ring stamped in its own ink. */
  --chip-ring: 2px dashed rgba(255, 184, 77, 0.45);
  --chip-ring-active: 2px dashed rgba(58, 28, 4, 0.35);

  /* ------------------------------------------------------------ marquee bulbs
   * The bulb strip: alternating lit / unlit dots, one halo layer under the
   * lit bulb. Painted as a repeat-x background — set background-image to
   * --bulb-strip, background-size to --bulb-tile x --bulb-h. */
  --bulb-h: 10px;
  --bulb-tile: 34px;
  --bulb-strip:
    radial-gradient(circle at 9px 5px, rgba(255, 217, 138, 0.32) 4.6px, rgba(0, 0, 0, 0) 5.4px),
    radial-gradient(circle at 9px 5px, rgb(255, 217, 138) 2.2px, rgba(0, 0, 0, 0) 3px),
    radial-gradient(circle at 26px 5px, rgba(255, 184, 77, 0.28) 2.2px, rgba(0, 0, 0, 0) 3px);

  /* ------------------------------------------------------------ the divider
   * The dotted bazaar divider under the header: dashes of lantern light with
   * alternating gold and rani beads. Three layers — gold bead, rani bead,
   * dash — sized by --divider-sizes, positioned by --divider-pos. */
  --divider-h: 9px;
  --bazaar-divider:
    radial-gradient(circle at 70px 50%, rgb(255, 184, 77) 2.4px, rgba(0, 0, 0, 0) 3.2px),
    radial-gradient(circle at 150px 50%, rgb(232, 93, 117) 2.4px, rgba(0, 0, 0, 0) 3.2px),
    repeating-linear-gradient(
      90deg,
      rgba(255, 184, 77, 0.4) 0,
      rgba(255, 184, 77, 0.4) 58px,
      rgba(0, 0, 0, 0) 58px,
      rgba(0, 0, 0, 0) 80px
    );
  --divider-sizes: 160px var(--divider-h), 160px var(--divider-h), 160px 1px;
  --divider-pos: 0 0, 0 0, 0 50%;
}