/*
 * 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 — KISMAT HOUSE. Midnight Volt (ADR-061) is warmed, not
 * replaced. The client is being redressed as a real casino — a warm ground and
 * gold ornament — and the front door may not disagree with the product behind
 * it, so THE VALUES HERE FOLLOW that: a warm four-step espresso ground
 * (#0D0906 chrome, #17110D page, #261C15 cards, #30231A inner panels), warm
 * white ink, ONE electric volt accent (#EDFF00) still spent only on things you
 * press, and GOLD as the ornament — hairlines, beads, ribbons, money and the
 * top heat tier. Gold is never a button; volt is never decoration.
 *
 * FLAT IS OVER, AND THAT IS THE POINT OF THIS FILE. Midnight Volt zeroed the
 * whole depth family — --elev-*, --glow-*, --inset-top, --wash-*, --bulb-strip,
 * --bazaar-divider — while leaving every NAME in place and every rule in
 * site.css and lobby.css still asking for them. Re-pointing those names here is
 * the entire redress: not one component rule changed to gain a shadow, a lit
 * CTA face or a gold bead rule. This is the open web, so these are real
 * gradients, real box-shadows and real keyframes — the constraints in
 * docs/06-DESIGN-SYSTEM.md's "What USS actually supports" table are Unity's,
 * not this file's. Type is Inter everywhere (replaces Rozha One + Mukta).
 *
 * The admin and Unity mirrors still carry earlier palettes until their own
 * retint lands in the same push; that drift is known, deliberate, and
 * temporary. The token NAMES and structure are identical across all three
 * files — only values diverge, and only until the client-side retint. The
 * retired identities' names (felt, gold, rani, bulbs, divider) survive below
 * pointed at Midnight Volt equivalents so no selector breaks; each carries
 * its mapping in a comment. Do not "fix" this file back to plum or charcoal.
 * ============================================================================
 *
 * 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 volt accent, same Inter type, 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 it is one family 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, true near-black — flat, no glow, no gradient.
   * Anything needing a fifth is over-layered. */
  --surface-base: rgb(23, 17, 13);      /* #17110d — the page */
  --surface-raised: rgb(38, 28, 21);    /* #261c15 — cards, tiles, chips */
  --surface-overlay: rgb(48, 35, 26);   /* #30231a — tile title bars, inputs */
  --surface-sunken: rgb(13, 9, 6);      /* #0d0906 — chrome: top bar, footer */
  --surface-scrim: rgba(13, 9, 6, 0.78);

  /* NEW NAMES (ADR-061). The mockups introduced two steps the ladder never
   * had: the hover step above raised, and the secondary control face (the
   * grey "Log in" beside the volt "Sign up"). tokens.uss and the admin
   * mirror gain BOTH names in the same push — add them there verbatim. */
  --surface-hover: rgb(58, 43, 32);     /* #3a2b20 — hover step above raised */
  --control-secondary: rgb(62, 46, 34); /* #3e2e22 — secondary button face */

  /* ---------------------------------------------------------- ink
   * Warm white on a warm ground. A neutral grey secondary over espresso reads
   * as a stain; each step carries the ground's own bias and clears its contrast
   * ratio by more than the neutral it replaces. */
  --text-primary: rgb(255, 250, 244);   /* #fffaf4 */
  --text-secondary: rgb(186, 174, 160); /* #baaea0 — 7.6:1 on --surface-base */
  --text-muted: rgb(138, 125, 110);     /* #8a7d6e — was 3.3:1, now 4.0:1 */
  --text-inverse: rgb(23, 17, 13);      /* #17110d — ink on the volt */
  --text-on-accent: rgb(23, 17, 13);    /* ink on the volt CTA */

  /* ---------------------------------------------------------- accent
   * One hue: electric volt. Spent ONLY on primary action, active state,
   * focus, and small live indicators — nothing you don't press. */
  --accent: rgb(237, 255, 0);           /* #edff00 */
  --accent-hover: rgb(244, 255, 92);    /* #f4ff5c */
  --accent-pressed: rgb(201, 212, 0);   /* #c9d400 */
  --accent-subtle: rgba(237, 255, 0, 0.12);
  --accent-border: rgba(237, 255, 0, 0.4);

  /* 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(237, 255, 0);          /* the volt family — was lantern gold */
  --pending-subtle: rgba(237, 255, 0, 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; magnitude reads grey → win
   * green → volt. The old marigold rungs map onto the volt. */
  --mult-low: rgb(160, 160, 160);
  --mult-mid: rgb(74, 222, 128);
  --mult-high: rgb(237, 255, 0);
  --mult-max: rgb(237, 255, 0);

  /* ---------------------------------------------------------- lines
   * GOLD-BIASED HAIRLINES. A pure-white rule on a warm ground reads blue, and
   * every card, section rule, input and footer column on this site is drawn
   * with one of these three — so the bias is most of what makes the page feel
   * warm rather than merely brown. */
  --border-subtle: rgba(255, 208, 150, 0.10);
  --border-default: rgba(255, 208, 150, 0.18);
  --border-strong: rgba(255, 196, 122, 0.34);
  --focus-ring: rgb(237, 255, 0);
  --border-hairline: 1px;
  --border-thick: 2px;

  /* ---------------------------------------------------------- type
   * ONE family: Inter, weight doing the work Rozha One's shape used to do.
   * 400/600 for reading, 700 for controls, 800/900 for display and the
   * wordmark. Tabular numerals everywhere money lines up in a column. */
  --font-display: 'Inter', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-body-medium: 'Inter', system-ui, -apple-system, sans-serif;
  --font-numeric: 'Inter', ui-monospace, system-ui, sans-serif;
  --numeric: tabular-nums lining-nums;

  /* Display weight. Inter ships the full range; the display register is
   * carried by mass now, not by a serif's shape. */
  --weight-display: 900;
  --weight-display-sub: 700;

  --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;

  /* ---------------------------------------------------------- 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
   * Per the Midnight Volt mockups: 8 / 12 / 16, pill for CTAs. */
  --radius-sm: 8px;
  --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 — same names as tokens.uss. */
  --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);

  /* --ease-settle is --ease-spring's non-overshooting sibling. Overshoot
   * belongs to geometry: applied to a COLOUR or an OPACITY it drives the value
   * out of range for a frame and flickers. Mirrors tokens.uss, where the same
   * name is `ease-out-cubic` because USS takes named curves only.
   *     transform  -> --ease-spring
   *     colour, opacity, size -> --ease-settle
   *     anything the system started on its own -> --ease-out */
  --ease-settle: cubic-bezier(0.33, 1, 0.68, 1);

  /* Spring SETTLE TIMES, mirroring tokens.uss. */
  --dur-spring: 320ms;
  --dur-spring-slow: 520ms;
  --spring-damping: 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. */
  --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.
   * Neutral white now — the candle-warm wash is retired with the lanterns. */
  --surface-wash: rgba(255, 226, 184, 0.05);
  --surface-wash-strong: rgba(255, 226, 184, 0.10);

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

  /* Fluid display type. 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;
  --site-gutter: var(--space-4);
  --header-height: 58px;
  --measure: 68ch;
  --measure-tight: 54ch;

  /* Grids. Minimums, not counts — the grid rewraps itself and the site never
   * declares "3 columns" anywhere. */
  --tile-min: 260px;
  --step-min: 240px;
  --fact-min: 150px;

  /* Depth. Midnight Volt is FLAT — the sticky-header shadow paints nothing
   * now; the name survives so the declaration stays valid. */
  --shadow-sticky: 0 10px 28px rgba(0, 0, 0, 0.5);
  --blur-header: 12px;

  /* Furniture. --diya-* survive as names; the diya glyph itself is retired
   * from the chrome (the wordmark is plain text in the accent now). */
  --rule: 1px;
  --mark-size: 26px;
  --diya-w: 16px;
  --diya-h: 18px;
  --hero-plot-h: 132px;

  /* 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 top-bar nav 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. 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;
    --dur-spring: 0s;
    --dur-spring-slow: 0s;
    --lift-hover: 0px;
    --press-scale: 1;
  }
}

/* ==========================================================================
 * SHARED — THE DEPTH FAMILY.  Mirrors tokens.uss by NAME.
 *
 *     --elev-1/2/3        elevation
 *     --glow-accent/-win/-gold
 *     --grad-surface-from/-to, --grad-accent-from/-to
 *     --blur-sheet
 *
 * THIS FAMILY IS LIT AGAIN. Midnight Volt zeroed every one of these and kept
 * the names, so every rule in site.css and lobby.css that asks for --elev-2,
 * --glow-accent or --inset-top has been resolving to nothing for weeks. They
 * carry real values here, which is why the redress touched no component rule.
 *
 * Every shade is BLACK, not neutral grey: a grey shadow on a warm ground is a
 * blue bruise, the same reason tokens.uss cuts its --elev-* out of the plum
 * night rather than out of #000 neutral.
 * ======================================================================= */
:root {
  /* ---------------------------------------------------------- elevation
   * Two shades each — a tight contact shade that says the edge is real, and a
   * wide ambient one that says how far off the page it is. One shadow alone
   * gives either a hard sticker or a smudge. */
  --elev-1: 0 1px 2px rgba(0, 0, 0, 0.5), 0 4px 14px rgba(0, 0, 0, 0.36);
  --elev-2: 0 2px 4px rgba(0, 0, 0, 0.5), 0 10px 30px rgba(0, 0, 0, 0.46);
  --elev-3: 0 4px 8px rgba(0, 0, 0, 0.5), 0 24px 64px rgba(0, 0, 0, 0.58);

  /* ---------------------------------------------------------- glow */
  --glow-win: 0 0 22px rgba(74, 222, 128, 0.28);

  /* ---------------------------------------------------------- gradient
   * The CTA face is a real ramp again: the hover step at the top, the accent
   * through the middle, the pressed step at the foot. That is what gives a
   * flat yellow rectangle the weight of a button you are meant to press. */
  --grad-surface-from: var(--surface-raised);
  --grad-surface-to: var(--surface-base);
  --grad-accent-from: var(--accent-hover);
  --grad-accent-to: var(--accent);

  /* ---------------------------------------------------------- backdrop */
  --blur-sheet: 18px;

  /* The surface ramp, spelled out. */
  --wash-surface: linear-gradient(180deg, var(--grad-surface-from), var(--grad-surface-to));
}

/* ==========================================================================
 * SHARED — SPRING KEYFRAMES.
 *
 * A keyframed settle whose overshoot is ZERO, matching --spring-damping: 1.
 * Nothing here is applied by this file. site.css and lobby.css opt in by name.
 * ======================================================================= */

@keyframes settle-in {
  from { opacity: 0; transform: translateY(var(--space-3)) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

@keyframes settle-pop {
  0%   { transform: scale(1); }
  38%  { transform: scale(var(--pop-scale, 1.06)); }
  100% { transform: scale(1); }
}

@keyframes glow-breathe {
  0%, 100% { box-shadow: var(--glow-gold); }
  50%      { box-shadow: var(--glow-gold-lg); }
}

/* The download button's own breath. It keeps its drop and its lit top edge in
 * both halves of the cycle and only the BLOOM moves — a button that changed
 * elevation on a loop would look like it was being pressed by nobody.
 *
 * site.css opts in by name on .btn--cta and turns it off under
 * prefers-reduced-motion; nothing here applies it. */
@keyframes cta-breathe {
  0%, 100% { box-shadow: var(--glow-accent), var(--elev-2), var(--inset-top-strong); }
  50%      { box-shadow: var(--glow-accent-lg), var(--elev-2), var(--inset-top-strong); }
}

/* The skeleton pulse — same two token endpoints as the client. */
@keyframes skeleton-pulse {
  0%, 100% { opacity: var(--opacity-skeleton-lo); }
  50%      { opacity: var(--opacity-skeleton-hi); }
}

/* ==========================================================================
 * SHARED — DEPTH UTILITIES.
 *
 * Named classes so a page raises depth without writing a shadow.
 * ======================================================================= */

.elev-1 { box-shadow: var(--elev-1), var(--inset-top); }
.elev-2 { box-shadow: var(--elev-2), var(--inset-top); }
.elev-3 { box-shadow: var(--elev-3), var(--inset-top-strong); }

.glow-accent { box-shadow: var(--glow-accent); }
.glow-gold   { box-shadow: var(--glow-gold); }
.glow-win    { box-shadow: var(--glow-win); }

.grad-surface { background-image: var(--wash-surface); }
.grad-accent  { background-image: var(--cta-grad); }

/* Feature-queried, because a backdrop-filter that is not supported leaves a
 * transparent panel with unreadable text over it — worse than no effect. */
.blur-sheet {
  background-color: var(--surface-scrim);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .blur-sheet {
    backdrop-filter: blur(var(--blur-sheet)) saturate(1.1);
    -webkit-backdrop-filter: blur(var(--blur-sheet)) saturate(1.1);
  }
}

/* The press micro-interaction, mirroring components.uss §1b: one rule, every
 * interactive surface, no page opts in element by element. */
.pressable {
  transition:
    transform var(--dur-spring) var(--ease-spring),
    opacity var(--dur-fast) var(--ease-settle),
    box-shadow var(--dur-normal) var(--ease-settle);
}
.pressable:hover  { transform: translateY(var(--lift-hover)); }
.pressable:active { transform: scale(var(--press-scale)); opacity: var(--opacity-pressed); }
.pressable:disabled,
.pressable[aria-disabled='true'] { transform: none; opacity: var(--opacity-disabled); }

@media (prefers-reduced-motion: reduce) {
  .pressable { transition: none; }
  .pressable:hover,
  .pressable:active { transform: none; }
}

/* ==========================================================================
 * SITE-ONLY — THE CASINO REGISTER.
 *
 * This block was the Ratri Bazaar's louder public register: baize, lantern
 * glow, rani celebration. ADR-061 retires the IDENTITY but the NAMES are
 * load-bearing across site.css and lobby.css, so every one survives, pointed
 * at its Midnight Volt equivalent and commented with the mapping. The rule
 * it still does not break: no page declares a raw value.
 * ======================================================================= */
:root {
  /* ---------------------------------------------------------- ground
   * --stage       = --surface-base   (the page)
   * --stage-deep  = --surface-sunken (the chrome)
   * --felt*       — the emerald baize is RETIRED; game surfaces sit on the
   *                 neutral card ladder now (raised / hover / a deep edge). */
  --stage: rgb(23, 17, 13);        /* = --surface-base */
  --stage-deep: rgb(13, 9, 6);     /* = --surface-sunken */
  --felt: rgb(38, 28, 21);         /* was #14402e baize -> warm card ground */
  --felt-raised: rgb(52, 39, 29);  /* was #1a4f39      -> hover step        */
  --felt-deep: rgb(20, 15, 11);    /* was #0d2b1e      -> shadowed edge     */
  --panel: rgb(38, 28, 21);        /* = --surface-raised */

  /* Ink on the (former) baize = plain ink now. */
  --text-on-felt: rgb(255, 250, 244);      /* = --text-primary */
  --text-on-felt-dim: rgb(186, 174, 160);  /* = --text-secondary */

  /* A game surface lit from above — neutral greys, and it lives ONLY inside
   * game preview wells (an art well is the one place gradients survive). */
  --wash-felt: radial-gradient(
    130% 140% at 50% 0%,
    rgb(56, 42, 31) 0%,
    rgb(38, 28, 21) 55%,
    rgb(20, 15, 11) 100%
  );

  /* ---------------------------------------------------------- heat
   * GOLD IS BACK (ADR-074, amending ADR-061), mirroring the Unity lead in
   * unity/Assets/UI/Theme/tokens.uss. Volt stays the only ACTION colour —
   * gold is never a button — but money, a settled win and the top heat tier
   * read in metal again. White ink on five greys is a spreadsheet; this is a
   * casino. --ember / --rani stay retired as festive hues. */
  --gold: rgb(255, 184, 77);
  --gold-deep: rgb(184, 124, 40);
  --gold-pale: rgb(255, 214, 138);
  /* The two gold washes tokens.uss already carries, mirrored by name so a
   * ribbon, a bead or a gold-ruled plaque never states an alpha of its own. */
  --gold-subtle: rgba(255, 184, 77, 0.12);
  --gold-border: rgba(255, 184, 77, 0.38);
  --ember: rgb(255, 138, 76);
  --live: rgb(74, 222, 128);
  --rani: rgb(255, 92, 108);       /* = --loss family, worn by HOT only */
  --rani-subtle: rgba(255, 92, 108, 0.14);
  --rani-border: rgba(255, 92, 108, 0.45);
  --text-on-rani: rgb(10, 10, 10);

  /* The CTA face: a lit volt plate. Three stops, not two — the middle one is
   * the accent itself, so the button's mid-tone is exactly --accent and the
   * ramp only lights the top and shades the foot. (Re-derived from
   * --grad-accent-from/-to at the END of this file — declaring it here as well
   * would be silently overwritten there, which is how the flat face survived a
   * repaint once already. Only the hover ramp lives here.) */
  --cta-grad-hover: linear-gradient(
    180deg,
    rgb(252, 255, 176) 0%,
    var(--accent-hover) 46%,
    var(--accent) 100%
  );
  --rani-grad: linear-gradient(180deg, rgb(255, 132, 144), rgb(255, 92, 108));

  /* ---------------------------------------------------------- glow
   * Volt behind what you press, gold behind money. The two ink glows are
   * text-shadows: the live multiplier and the word "money" in the headline. */
  --glow-accent: 0 6px 20px rgba(237, 255, 0, 0.20);
  --glow-accent-lg: 0 10px 34px rgba(237, 255, 0, 0.34);
  --glow-ink-accent: 0 0 24px rgba(237, 255, 0, 0.38);
  --glow-ink-gold: 0 0 26px rgba(255, 184, 77, 0.45);

  /* ---------------------------------------------------------- depth
   * (Re-pointed at --elev-* at the end of the file; the two insets are the
   * lit top edge that makes a raised surface read as raised rather than as a
   * lighter rectangle.) */
  --shadow-card: var(--elev-1);
  --shadow-card-hover: var(--elev-2);
  --shadow-panel: var(--elev-3);
  --inset-top: inset 0 1px 0 rgba(255, 226, 184, 0.07);
  --inset-top-strong: inset 0 1px 0 rgba(255, 226, 184, 0.13);

  /* ---------------------------------------------------------- ambience
   * TWO POOLS OF LIGHT ON A DARK ROOM, and this is where most of the "warm"
   * actually comes from — a flat espresso fill is just brown. Gold from the
   * top right, ember from the top left, both fading out well before the fold
   * so a long page never stretches one ramp over six thousand pixels.
   * Off-centre and different sizes on purpose: two symmetrical pools read as
   * a machine's idea of atmosphere. */
  --wash-accent: radial-gradient(
    118% 88% at 84% -12%,
    rgba(255, 184, 77, 0.15) 0%,
    rgba(255, 184, 77, 0) 62%
  );
  --wash-gold: radial-gradient(
    104% 82% at 6% 2%,
    rgba(255, 116, 62, 0.13) 0%,
    rgba(255, 116, 62, 0) 66%
  );
  --wash-tile: linear-gradient(
    180deg,
    rgba(255, 226, 184, 0.06) 0%,
    rgba(255, 226, 184, 0) 46%
  );

  /* ---------------------------------------------------------- big type
   * --text-mega is the live multiplier and nothing else. */
  --text-mega: clamp(66px, 21vw, 152px);
  --text-figure: clamp(30px, 6vw, 46px);
  --tracking-mega: -0.02em;

  /* ---------------------------------------------------------- targets
   * The primary call to action (replaces the never-defined --tap-bet —
   * HANDOFF §5.3's silent-resolution failure, fixed 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;
  --art-hero-min: 132px;

  /* ---------------------------------------------------------- motion */
  --dur-live: 1600ms;          /* the live dot's pulse */
  --dur-breathe: 3400ms;       /* one breath of the download button's bloom */
  --dur-marquee: 44s;          /* one pass of the wins ticker */
  --lift-tile: -2px;

  /* ---------------------------------------------------------- lobby
   * The /lobby app shell. The sidebar rail is RETIRED (the reference layout
   * is top-bar only); --rail-bg and --rail-w survive as names pointed at the
   * chrome values. The top bar is the mockups' 60px black bar. */
  --rail-bg: rgb(0, 0, 0);     /* = --surface-sunken */
  --rail-w: 220px;
  --topbar-h: 60px;
  --bnav-h: 64px;
  --lobby-tile-min: 118px;     /* an art tile in the lobby grids (~9-up at 1232) */
  --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. These
 * exist for the /lobby density pass: the hero banner (the promo carousel
 * restyled as the reference's bonus banner), the crash-history chips, and
 * the designed fallback tile. lobby.css uses these by name and declares no
 * raw value of its own.
 * ======================================================================= */
:root {
  /* ---------------------------------------------------------- carousel
   * The hero banner row. --promo-h is the banner's min-height. */
  --promo-h: 220px;
  --dur-slide: 6000ms;         /* auto-advance interval (read by lobby.js) */
  --dur-xfade: 650ms;          /* slide crossfade */
  --promo-dot: 8px;

  /* ---------------------------------------------------------- glow, extended
   * Gold behind money and the top heat tier; a warm-black lift under a tile
   * on hover, because a tile that only brightens does not read as picked up.
   * The two dot glows are the small live indicators. */
  --glow-gold: 0 0 18px rgba(255, 184, 77, 0.24);
  --glow-gold-lg: 0 0 32px rgba(255, 184, 77, 0.42);
  --glow-tile-hover: 0 14px 32px rgba(0, 0, 0, 0.55);
  --glow-dot: 0 0 8px rgba(255, 184, 77, 0.55);
  --glow-dot-live: 0 0 10px rgba(74, 222, 128, 0.7);

  /* Hero-art PLACEHOLDER washes — the mockups' muted dark pools, standing in
   * until the art track delivers hero key art. An art placeholder is one of
   * the two places a gradient is still allowed (ADR-061). */
  --wash-promo-accent: radial-gradient(
    90% 130% at 82% 20%,
    rgb(35, 32, 48) 0%,
    rgba(0, 0, 0, 0) 60%
  );
  --wash-promo-gold: radial-gradient(
    70% 110% at 65% 90%,
    rgb(27, 36, 48) 0%,
    rgba(0, 0, 0, 0) 55%
  );
  --wash-promo-floor: linear-gradient(
    105deg,
    rgb(16, 16, 20) 0%,
    rgb(22, 22, 28) 55%,
    rgb(16, 16, 24) 100%
  );

  /* ---------------------------------------------------------- key-art scrims
   * The legibility layer over hero art: darkest where the text lives (left),
   * open where the art performs. Neutral black now. */
  --scrim-hero: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.82) 0%,
    rgba(0, 0, 0, 0.55) 40%,
    rgba(0, 0, 0, 0) 70%
  );
  --scrim-promo: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.82) 0%,
    rgba(0, 0, 0, 0.55) 40%,
    rgba(0, 0, 0, 0) 70%
  );

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

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

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

  /* ---------------------------------------------------------- fallback tile
   * A game without art gets a hue-rotated gradient ground (inside the art
   * well — allowed). The HUE is data — lobby.js derives it from the slug and
   * sets `--tile-hue` inline — but the recipe is design, so it lives here.
   * Desaturated a step for the darker ground. */
  --fallback-sat: 32%;
  --fallback-l-hi: 26%;
  --fallback-l-mid: 15%;
  --fallback-l-lo: 9%;
  --fallback-ink-sat: 45%;
  --fallback-ink-l: 78%;
  --letter-stroke: 2px;
  --letter-alpha: 0.92;

  /* ---------------------------------------------------------- hero figure */
  --text-mult: clamp(48px, 8.5vw, 92px);

  /* ---------------------------------------------------------- motion */
  --scale-tile-hover: 1.0;     /* tiles lift 2px instead of scaling now */
  --dur-shimmer: 2400ms;

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

  /* ---------------------------------------------------------- the cut
   * RETIRED long before this repaint: the diagonal cut. Flat, paints nothing;
   * the names survive 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: 264px;          /* the mockups' desktop hero height */
    --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. The hero
 * row, and the (retired) per-section rail tints. Same discipline as ever.
 * ======================================================================= */
:root {
  /* ------------------------------------------------------------ hero row */
  --hero-max-h: 300px;
  --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);  /* promo headline at card scale */

  /* ------------------------------------------------------------ rail tints
   * RETIRED with the sidebar rail (ADR-061): Midnight Volt spends no
   * per-section hues — the accent budget is the volt and nothing else.
   * Every tint resolves to the secondary ink so any straggler renders
   * quiet instead of colourful. */
  --violet: rgb(160, 160, 160);
  --tint-emerald: rgb(160, 160, 160);
  --tint-ember: rgb(160, 160, 160);
  --tint-rose: rgb(160, 160, 160);
  --tint-sky: rgb(160, 160, 160);
  --tint-violet: rgb(160, 160, 160);
  --tint-gold: rgb(160, 160, 160);

  /* ------------------------------------------------------------ empty states
   * The designed absence: the LIVE WINS surfaces before a win lands. */
  --empty-mark: 28px;
}

/* The desktop top bar 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 — THE GOLD ORNAMENT.
 *
 * Chip pills, marquee bulbs and the bead rule under the header. ADR-061 turned
 * the last two OFF — transparent layers at the same geometry — and site.css
 * has been painting `.site-header::after` with nothing ever since: a nine-pixel
 * band of dead space under the header on every page of the site.
 *
 * They are lit again, in gold, because ornament is the difference between a
 * dark SaaS page and a casino. Every layer is geometry over a token colour; a
 * re-skin re-points --gold and reaches all of it.
 * ======================================================================= */
:root {
  /* ------------------------------------------------------------ chip pills */
  --chip-ring: 1px solid rgba(255, 208, 150, 0.20);
  --chip-ring-active: 1px solid rgba(23, 17, 13, 0.4);

  /* ------------------------------------------------------------ marquee bulbs
   * A run of lit bulbs along a rail: a hot pale core, a gold halo, and the
   * gap between them. --bulb-tile is one bulb's pitch, so the strip is a
   * background-repeat and never a row of elements. */
  --bulb-h: 10px;
  --bulb-tile: 34px;
  --bulb-strip: radial-gradient(
    circle at 17px 5px,
    rgb(255, 236, 196) 0 2.6px,
    rgba(255, 184, 77, 0.55) 2.6px 4.4px,
    rgba(255, 184, 77, 0) 5.4px
  );

  /* ------------------------------------------------------------ the divider
   * THE RIBBON UNDER THE HEADER. A hairline of gold light with alternating
   * bright and deep beads riding on it, repeating every --bulb-tile. Three
   * layers, so --divider-sizes and --divider-pos are three-valued lists —
   * a single pair would size all three layers alike and stretch the rule.
   *
   * Paint order in `background-image` is FIRST LAYER ON TOP, so the beads are
   * declared before the rule they sit on. */
  --divider-h: 10px;
  --bazaar-divider:
    radial-gradient(circle at 8px 5px, rgb(255, 214, 138) 0 2.2px, rgba(255, 214, 138, 0) 3px),
    radial-gradient(circle at 25px 5px, rgb(184, 124, 40) 0 1.7px, rgba(184, 124, 40, 0) 2.5px),
    linear-gradient(90deg, rgba(255, 184, 77, 0.42), rgba(255, 184, 77, 0.08));
  --divider-sizes: 34px var(--divider-h), 34px var(--divider-h), 240px 1px;
  --divider-pos: 0 0, 0 0, 0 0;

  /* ------------------------------------------------------------ the ribbon
   * A section eyebrow drawn as a banner with forked ends, which is the one
   * shape that says "casino" without a single bevel. --ribbon-notch is the
   * depth of the fork; the face is a shallow gold plate. */
  --ribbon-notch: 11px;
  --ribbon-face: linear-gradient(
    180deg,
    rgba(255, 184, 77, 0.22) 0%,
    rgba(255, 184, 77, 0.07) 100%
  );
  --ribbon-face-hot: linear-gradient(
    180deg,
    rgba(237, 255, 0, 0.20) 0%,
    rgba(237, 255, 0, 0.06) 100%
  );
}

/* ==========================================================================
 * LAST ALIAS BLOCK — must stay AFTER the register defines these names.
 *
 * The site's depth vocabulary (--shadow-card, --shadow-card-hover,
 * --shadow-panel, --cta-grad) aliases the shared family so the two
 * vocabularies cannot drift. CSS takes the LAST declaration of a custom
 * property, so this re-point must follow the register block above — placed
 * earlier it would be silently overwritten. --cta-grad is derived here and
 * ONLY here, from --grad-accent-from/-to plus the pressed step at the foot;
 * --cta-grad-hover is the same ramp one step lighter and lives in the register
 * above, where the accent family it is cut from is declared.
 * ======================================================================= */
:root {
  --shadow-card: var(--elev-1);
  --shadow-card-hover: var(--elev-2);
  --shadow-panel: var(--elev-3);
  --cta-grad: linear-gradient(
    180deg,
    var(--grad-accent-from) 0%,
    var(--grad-accent-to) 46%,
    var(--accent-pressed) 100%
  );
}

/* ==========================================================================
 * SITE-ONLY — PHASE 7A · THE DESKTOP STOREFRONT. The wide lobby: the
 * full-bleed live-wins ticker, curated category grids with truthful badges,
 * and the mega-footer trust band. lobby.css uses these by name.
 *
 * A media query cannot read a custom property, so the desktop breakpoint is
 * written in lobby.css as a literal and recorded here for a single home:
 *   --break-wide 1280px
 * ======================================================================= */
:root {
  --break-wide: 1280px;

  /* ------------------------------------------------------------ frame
   * The reference layout is a 1232px centred column (the mockups' wrap).
   * --site-max still governs the marketing pages. --live-rail-w survives as
   * a name; the desktop live-wins side column is retired with the sidebar —
   * the ticker carries the wins feed. */
  --lobby-max: 1232px;
  --live-rail-w: 320px;

  /* ------------------------------------------------------------ wins ticker
   * The single biggest "alive" lever, and an honest one — every entry is a
   * real settled win from GET /feed/wins + the `feed.win` socket stream.
   * Pauses on hover, stops dead under prefers-reduced-motion. */
  --ticker-h: 52px;
  --dur-ticker: 64s;
  --win-thumb: 30px;
  --win-gap: var(--space-3);

  /* Badge family — LIVE (green, round games run live rounds), NEW (the five
   * newest, objectively true), HOT (editorial curation on a hand-picked set).
   * No fabricated statistic anywhere. */
  --badge-h: 19px;
  --badge-live-bg: var(--win-subtle);
  --badge-live-ink: var(--live);
  --badge-new-bg: var(--info-subtle);
  --badge-new-ink: var(--info);
  --badge-hot-bg: var(--rani-subtle);
  --badge-hot-ink: var(--rani);
  --badge-dot: 6px;

  /* ------------------------------------------------------------ wins ground */
  --wins-ground: var(--surface-sunken);
  --win-row-bg: var(--surface-raised);

  /* ------------------------------------------------------------ mega footer */
  --foot-col-min: 150px;
}

/* ==========================================================================
 * SITE-ONLY — PHASE 7A-ADS · THE ADVERTISING LAYER. The promotional layer on
 * /lobby: the "What Kismat offers" value band, the VIP tier ladder, the
 * "Why Kismat" trust band, and the Android app CTA band. All copy is TRUE:
 * the programmes are real (bonus/VIP/referral engines exist server-side);
 * no unconfigured bonus figure is ever quoted.
 * ======================================================================= */
:root {
  --offer-min: 210px;        /* one card in the value band's auto-fit grid */
  --offer-ico: 40px;         /* the tinted glyph disc on an offer card */
  --vip-tier-min: 96px;      /* one tier chip in the VIP ladder */
  --vip-bar-h: 6px;          /* the rakeback fill under a tier chip */
  --why-min: 168px;          /* one differentiator cell in the Why band */
  --why-ico: 22px;
  --band-radius: var(--radius-lg);
}

/* ==========================================================================
 * SITE-ONLY — MIDNIGHT VOLT LOBBY (ADR-061, T-165). NEW names for the
 * reference-layout storefront: the 60px black top bar (recorded above as
 * --topbar-h), the circular quick-nav row, and the title-bar tile. Every
 * name below is new; nothing above changed shape.
 * ======================================================================= */
:root {
  /* ------------------------------------------------------------ quick nav */
  --qdisc: 54px;             /* the circular icon chip */
  --qchip-w: 62px;           /* one chip's column, label included */

  /* ------------------------------------------------------------ tiles
   * Art well (real 4:3 art from web/art/png/) + the dark title-bar strip
   * beneath it — never text over art. */
  --tbar-h: 30px;            /* the title bar strip under the art */

  /* ------------------------------------------------------------ hero CTA */
  --tap-hero: 48px;          /* the hero banner's pill CTA */
}