/* Casinia — theme for the monobrand template
   Palette, type and button plates are read off casinia.com's own
   stylesheet (--stb-* design system), so the names below carry the
   lobby's real values rather than an approximation of them. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url('/assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/assets/fonts/cinzel-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('/assets/fonts/cinzel-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --scheme: dark;

  /* type scale: every font-size in the sheet snaps to one of these steps */
  --fs-1: .7rem;
  --fs-2: .78rem;
  --fs-3: .85rem;
  --fs-4: .95rem;
  --fs-5: 1.05rem;
  --fs-6: 1.2rem;
  --fs-7: 1.35rem;

  /* ---- Casinia's own ramp ----------------------------------------------
     Neutral is the lobby's pine scale, struck off its #031a16 canvas: the
     dark half is the --stb-green-* family, the light half the --stb-gray-*
     one, which is the same hue bleached rather than a true grey. Every
     step below is a value the lobby itself ships, so the two sites tint
     identically. Gold is the single accent; the lobby has no second hue. */
  --stb-neutral-950: 3 26 22;      /* green-1000 — the canvas            */
  --stb-neutral-900: 0 33 27;      /* green-900  — cards                 */
  --stb-neutral-850: 0 41 33;      /* green-800                          */
  --stb-neutral-800: 0 51 42;      /* green-700  — raised surfaces       */
  --stb-neutral-750: 22 49 42;     /* green-600  — the hairline border   */
  --stb-neutral-700: 0 61 49;      /* green-750                          */
  --stb-neutral-600: 0 73 59;      /* green-500  — borders               */
  --stb-neutral-550: 35 72 64;     /* the lighter stop of gradient-green-400 */
  --stb-neutral-500: 51 71 66;     /* the category-card rail             */
  --stb-neutral-400: 91 105 101;   /* gray-900 — the lobby's body colour */
  --stb-neutral-300: 121 143 137;  /* gray-600 — fine print, 5.2:1 on bg */
  --stb-neutral-200: 155 176 171;  /* gray-500 — secondary copy          */
  --stb-neutral-150: 209 224 220;  /* gray-400                           */
  --stb-neutral-100: 233 242 240;  /* gray-300                           */
  --stb-neutral-50: 239 249 247;   /* gray-200 — primary copy            */
  --stb-white: 255 247 227;        /* white-900 — the lobby's warm white */
  --stb-black: 0 0 0;

  /* gold read off the lobby's --stb-gradient-gold and its gold token:
     cream highlight, the #e5a749 brand gold, down to a burnt core */
  --stb-gold-100: 255 225 117;     /* #ffe175 — the gradient's highlight */
  --stb-gold-200: 241 211 99;      /* #f1d363                            */
  --stb-gold-300: 229 167 73;      /* #e5a749 — --stb-gold, the accent   */
  --stb-gold-500: 173 126 55;      /* bronth-800 — the button rails      */
  --stb-gold-600: 142 80 11;       /* #8e500b — the gradient's foot      */
  --stb-gold-700: 77 33 0;         /* red-700 — the shadow under gold    */

  /* "brand" is the lobby's lime-to-teal win ramp: it marks wins and the
     live jackpot, and nothing else */
  --stb-brand-500: 146 234 59;     /* green-300 — #92ea3b                */
  --stb-brand-600: 98 191 67;      /* #62bf43                            */
  --stb-brand-700: 17 166 141;     /* #11a68d                            */
  --stb-brand-200: 178 240 120;
  --stb-brand-150: 209 246 170;

  /* the lobby paints its accent links in gold too, so "blue" is gold */
  --stb-blue-500: 229 167 73;
  --stb-blue-600: 200 143 58;
  --stb-blue-700: 160 112 40;

  --stb-red-500: 255 53 26;        /* red-1000                           */
  --stb-green-500: 0 161 118;      /* --stb-green                        */

  /* ---- surfaces -------------------------------------------------------- */
  --bg: rgb(var(--stb-neutral-950));
  /* the ground under the hero picture. On desktop the artwork covers the
     banner and this never shows; on the phone it backs the narrow band
     above the picture, so it carries the artwork's own edge tone rather
     than the page's pine. Re-sample it if the art changes — the mean of
     the picture's leftmost column is the number. */
  --hero-blue: #381406;
  /* the shared stop list both hero scrims run, each in its own direction:
     a short solid lip, then an eased ramp to nothing */
  --hero-fade:
    rgb(var(--stb-neutral-950)) 0%,
    rgb(var(--stb-neutral-950)) 20%,
    rgb(var(--stb-neutral-950) / .96) 30%,
    rgb(var(--stb-neutral-950) / .84) 40%,
    rgb(var(--stb-neutral-950) / .68) 50%,
    rgb(var(--stb-neutral-950) / .5) 60%,
    rgb(var(--stb-neutral-950) / .32) 70%,
    rgb(var(--stb-neutral-950) / .16) 80%,
    rgb(var(--stb-neutral-950) / .04) 90%,
    rgb(var(--stb-neutral-950) / 0) 100%;
  /* the sides run the same eased ramp but over a shorter distance, since
     they only have to carry the picture's edge into the bare pine beside
     it. The left runs further: that is the side the copy sits on, so it
     doubles as the headline's ground — but only just past the end of the
     headline, so the artwork is clear of it from there on. */
  /* Now that the picture covers the banner there is no edge for this to
     hide — its only job is to keep a readable ground under the headline
     and the button. So it starts easing almost straight away and is gone
     by a third across, a little past where the copy ends. */
  --hero-side:
    rgb(var(--stb-neutral-950)) 0%,
    rgb(var(--stb-neutral-950) / .9) 5%,
    rgb(var(--stb-neutral-950) / .78) 10%,
    rgb(var(--stb-neutral-950) / .62) 15%,
    rgb(var(--stb-neutral-950) / .44) 20%,
    rgb(var(--stb-neutral-950) / .28) 24%,
    rgb(var(--stb-neutral-950) / .15) 28%,
    rgb(var(--stb-neutral-950) / .05) 32%,
    rgb(var(--stb-neutral-950) / 0) 36%;
  --hero-side-soft:
    rgb(var(--stb-neutral-950) / .85) 0%,
    rgb(var(--stb-neutral-950) / .6) 4%,
    rgb(var(--stb-neutral-950) / .34) 9%,
    rgb(var(--stb-neutral-950) / .16) 14%,
    rgb(var(--stb-neutral-950) / .05) 19%,
    rgb(var(--stb-neutral-950) / 0) 24%;
  --bg-top: rgb(var(--stb-neutral-900));
  --bg-elevated: rgb(var(--stb-neutral-800));
  --surface: rgb(var(--stb-neutral-900));
  --surface-2: rgb(var(--stb-neutral-800));
  --border: rgb(var(--stb-neutral-600));
  --border-soft: rgb(var(--stb-neutral-750));

  --text: rgb(var(--stb-neutral-50));
  --text-muted: rgb(var(--stb-neutral-200));
  /* the fine print takes neutral-300, the lowest step on this ramp that
     still clears 4.5:1 against every surface the copy actually sits on */
  --text-faint: rgb(var(--stb-neutral-300));

  /* links and accents are the lobby's #e5a749; the cream end is kept for
     the plates' own lettering */
  --gold: rgb(var(--stb-gold-300));
  --gold-2: rgb(var(--stb-gold-200));
  --green: rgb(var(--stb-green-500));

  /* the lobby's own --stb-gradient-gold, stop for stop */
  --grad-gold: linear-gradient(360deg, #8e500b 0%, #ffe175 71.35%, #f1d363 100%);
  /* and its win ramp, --stb-gradient-green-300 */
  --grad-mint: linear-gradient(270deg, #93eb3b .01%, #62bf43 20.67%, #11a68d 100%);
  /* --stb-gradient-green-400, the lobby's quiet panel fill */
  --grad-teal: linear-gradient(251.88deg, #234840 0%, #17332d 101.58%);
  --on-accent: rgb(var(--stb-gold-700));

  --glow-a: rgba(0, 161, 118, .07);
  --glow-b: rgba(229, 167, 73, .06);
  /* the header keeps the lobby's #002b23 band above the canvas */
  --header-bg: linear-gradient(180deg, rgb(0 43 35) 0%, rgb(0 38 31) 55%, rgb(0 33 27) 100%);
  --nav-panel-bg: rgb(var(--stb-neutral-850));
  --band-bg: linear-gradient(to bottom, rgba(0, 33, 27, .75), rgba(0, 33, 27, .5) 60%, rgba(0, 33, 27, .75));
  --scrim-top: linear-gradient(to bottom, rgba(3, 26, 22, .7), transparent);
  --overlay: rgb(3 26 22 / .94);

  --win: rgb(var(--stb-brand-500));
  --win-glow: rgba(146, 234, 59, .4);
  --tint-accent: rgba(229, 167, 73, .12);
  --accent-glow: rgba(229, 167, 73, .3);
  --cta-glow: rgba(0, 161, 118, .26);
  --subtle-fill: rgba(239, 249, 247, .04);
  --subtle-fill-2: rgba(239, 249, 247, .08);
  /* the marks are black-on-transparent, so they are flattened to white
     rather than greyed the way they were against a light lobby */
  --provider-filter: brightness(0) invert(1);
  --provider-blend: normal;

  /* ---- radii: the lobby is cut square. Its one rounded thing is the game
     thumbnail, at --stb-thumbnail-border-radius: 4px, and that is the
     whole budget — the plates and panels keep their corners.           */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 4px;
  --radius-btn: 0px;
  --radius-pill: 9999px;
  --radius-thumb: 4px;

  /* ---- type -------------------------------------------------------------
     The lobby runs two faces: Beaufortforlol for every title and button
     label, Apercu for everything else. Both are licensed, so the nearest
     free cuts stand in — Cinzel for the flared display caps, Inter for
     the grotesque. The roles, cases and tracking are the lobby's own:
     titles and labels are uppercase, labels at .04em.                   */
  --font-display: "Cinzel", "Times New Roman", Georgia, serif;
  --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display-weight: 600;
  --display-track: .02em;
  --display-case: uppercase;
  --btn-weight: 700;
  --btn-track: .04em;
  --btn-case: uppercase;
  --btn-shadow: none;
  /* the plates carry their own moulding, so there is no hard step to sink
     onto — the press is a short dip instead */
  --btn-shadow-height: 0px;
  --btn-active-transform: 1px;
  --btn-label: rgb(var(--stb-white));
  /* the lobby's nav runs on Apercu, not the display face */
  --nav-weight: 600;
  --nav-track: .04em;
  --nav-case: uppercase;
  --hero-stroke: 0;

  --container: 1180px;
  --container-narrow: 720px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: .15s;
  --shadow-1: 0 4px 24px rgba(0, 0, 0, .25);
}
:root { --icon-accent: var(--gold-2); }

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  color-scheme: var(--scheme);
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.2; font-weight: var(--display-weight); letter-spacing: var(--display-track); text-transform: var(--display-case); }
p { color: var(--text-muted); }
button { font: inherit; background: none; border: 0; color: inherit; cursor: pointer; }

.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  background: var(--gold);
  color: var(--on-accent);
  padding: .6rem 1rem;
  border-radius: var(--radius-sm);
  z-index: 200;
  font-weight: 700;
}
.skip-link:focus { left: 1rem; top: 1rem; }

:focus-visible {
  outline: 2px solid var(--gold-2);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

.wrap {
  width: min(100% - 2.5rem, var(--container));
  margin-inline: auto;
}
.wrap-narrow { max-width: var(--container-narrow); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .8rem 1.6rem;
  border-radius: var(--radius-btn);
  font-family: var(--font-display);
  font-weight: var(--btn-weight);
  font-size: var(--fs-4);
  text-transform: var(--btn-case);
  letter-spacing: var(--btn-track);
  border: 1px solid transparent;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), filter var(--dur) var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* ---- buttons: the lobby's cast plates --------------------------------
   Casinia does not draw its buttons in CSS. Each one is a three-part
   plate — a moulded left cap, a stretched middle, a moulded right cap —
   laid on as three background layers, which is why the gold corner
   brackets hold their shape at every label length while only the well
   between them stretches.

   The middle is listed first, so it paints *over* the caps, and it is
   laid out to tuck exactly --cap-tuck under each one: far enough that no
   seam shows, not so far that it covers the bracket the cap is there to
   draw. Two numbers run it, and only --cap changes between size steps,
   because the brackets are drawn to scale with the plate's height.

   The artwork is 74px tall at 1x, so every step below downsamples it;
   the @2x files come along for the ride through image-set.            */
.btn {
  --cap: 19px;
  --cap-tuck: 2px;
  --plate-stroke: rgb(0 0 0 / .3);

  min-height: 42px;
  /* the label clears both brackets, and rides 3px high: the plate's
     bottom rail is drawn deeper than its top one, so centring on the box
     leaves the type looking low in the well */
  padding: 0 calc(var(--cap) + .6rem) 3px;
  border: 0;
  border-radius: var(--radius-btn);
  line-height: 1.2;
  letter-spacing: var(--btn-track);
  /* the plate itself is a layer of its own; see the note below */
  position: relative;
  background: none;
  box-shadow: none;
  /* the lobby's own 1px letter-stroke, which is what separates the label
     from the lit middle of the well — not the fill colour */
  text-shadow:
    -.5px -.5px 0 var(--plate-stroke),
    .5px -.5px 0 var(--plate-stroke),
    -.5px .5px 0 var(--plate-stroke),
    .5px .5px 0 var(--plate-stroke),
    0 2px 2px var(--plate-stroke);
  transition: filter var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn:hover { transform: none; filter: brightness(1.08); }
.btn:active { filter: brightness(.95); transform: translateY(var(--btn-active-transform)); }

/* ---- the plate layer -------------------------------------------------
   The plate rides behind the label rather than on the button itself.
   That is what lets a CTA breathe without the type breathing with it: a
   scale on the button resamples the glyphs every frame and the label
   visibly shivers, where scaling this leaves the text on the pixel grid.
   Both pulse animations drive this layer for exactly that reason. */
.btn-primary::before,
.btn-ghost::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: calc(var(--cap) - var(--cap-tuck)) center, left center, right 0 center;
  background-size:
    calc(100% - (var(--cap) - var(--cap-tuck)) * 2) 100%,
    var(--cap) 100%,
    var(--cap) 100%;
}

/* the green plate: every call to action — register, claim, play */
.btn-primary { color: rgb(var(--stb-white)); }
.btn-primary::before {
  background-image:
    image-set(url("/assets/primary-center.325cf6deb31cc916.png") 1x, url("/assets/primary-center@2x.a660d8e943f6aeb3.png") 2x),
    image-set(url("/assets/primary-left.cb14a0528dcb5c83.png") 1x, url("/assets/primary-left@2x.47546361ff99a73a.png") 2x),
    image-set(url("/assets/primary-right.c83dfc5586fc8a42.png") 1x, url("/assets/primary-right@2x.b092bb023fe7cf84.png") 2x);
}

/* the bronze plate: log in, and anything that sits beside a green CTA */
.btn-ghost { color: rgb(var(--stb-white)); }
.btn-ghost::before {
  background-image:
    image-set(url("/assets/secondary-center.68505bb4387ae3ac.png") 1x, url("/assets/secondary-center@2x.d64c002f425d70b1.png") 2x),
    image-set(url("/assets/secondary-left.b78af9a9ef20698c.png") 1x, url("/assets/secondary-left@2x.b943779077b81ff9.png") 2x),
    image-set(url("/assets/secondary-right.e9cc2ed76db88e6e.png") 1x, url("/assets/secondary-right@2x.15f4d5221dbf4dde.png") 2x);
}
.btn-ghost:hover { color: rgb(var(--stb-white)); }

/* the lobby's third button is not a plate at all: a hairline box that
   turns gold on hover. It carries no plate, so it keeps its own padding
   and drops the letter-stroke. */
.btn-outline::before, .btn-mint::before { content: none; }

.btn-outline {
  --cap: 0px;
  padding: 0 .9rem;
  gap: .5rem;
  border: 1px solid rgb(var(--stb-neutral-400));
  color: var(--btn-label);
  background: none;
  text-shadow: none;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn-outline:hover {
  border-color: currentColor;
  color: var(--gold);
  filter: none;
}

/* the win ramp, kept for the odd secondary the lobby paints in brand */
.btn-mint {
  --cap: 0px;
  padding: 0 1.4rem 1px;
  background: var(--grad-mint);
  color: rgb(var(--stb-neutral-950));
  text-shadow: none;
}

/* ---- the three size steps the lobby ships ----------------------------
   The bracket is drawn to the plate's height, so each step moves --cap
   and the height together and the tuck takes care of itself. */
.btn-sm {
  --cap: 17px;
  min-height: 38px;
  font-size: var(--fs-3);
}
.btn-lg {
  --cap: 25px;
  min-height: 54px;
  font-size: var(--fs-6);
  --btn-active-transform: 2px;
}
.btn-outline.btn-sm, .btn-outline.btn-lg,
.btn-mint.btn-sm, .btn-mint.btn-lg { --cap: 0px; }

/* ---- the header pair -------------------------------------------------
   The lobby runs its header buttons one step down from the page's, and
   sets them in the UI face at 14px so the two pills stay narrow enough
   to sit beside the mark. */
.header-actions .btn {
  --cap: 17px;
  --btn-active-transform: 1px;
  min-height: 38px;
  padding: 0 calc(var(--cap) + .35rem) 3px;
  font-size: var(--fs-3);
}

/* ---- the header's register button ------------------------------------
   The lobby keeps this one on the bronze plate for as long as the
   banner's own call to action is still on screen, and swaps it to green
   the moment that scrolls away — so only ever one green button is in
   view at a time. Log in keeps the bronze plate throughout. The class is
   set from the CTA's visibility in script.js, not from scroll depth. */
.header-actions .btn-primary::before {
  background-image:
    image-set(url("/assets/secondary-center.68505bb4387ae3ac.png") 1x, url("/assets/secondary-center@2x.d64c002f425d70b1.png") 2x),
    image-set(url("/assets/secondary-left.b78af9a9ef20698c.png") 1x, url("/assets/secondary-left@2x.b943779077b81ff9.png") 2x),
    image-set(url("/assets/secondary-right.e9cc2ed76db88e6e.png") 1x, url("/assets/secondary-right@2x.15f4d5221dbf4dde.png") 2x);
}
.site-header.is-cta-passed .header-actions .btn-primary::before {
  background-image:
    image-set(url("/assets/primary-center.325cf6deb31cc916.png") 1x, url("/assets/primary-center@2x.a660d8e943f6aeb3.png") 2x),
    image-set(url("/assets/primary-left.cb14a0528dcb5c83.png") 1x, url("/assets/primary-left@2x.47546361ff99a73a.png") 2x),
    image-set(url("/assets/primary-right.c83dfc5586fc8a42.png") 1x, url("/assets/primary-right@2x.b092bb023fe7cf84.png") 2x);
}


.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--border-soft);
}
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--header-bg);
  backdrop-filter: blur(10px);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  height: 72px;
}

.brand { display: flex; align-items: center; gap: .6rem; font-weight: 800; font-size: var(--fs-6); flex-shrink: 0; }
.brand-logo { height: 40px; width: auto; }

.nav-side { display: flex; align-items: center; gap: 1.25rem; min-width: 0; }
.nav-side-left { justify-content: flex-start; }
.nav-side-right { justify-content: flex-end; margin-left: auto; }

.nav-side ul { display: flex; align-items: center; gap: 1.75rem; }
.nav-side ul a {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--text-muted);
  font-weight: 600;
  font-size: var(--fs-2);
  white-space: nowrap;
  transition: color var(--dur) var(--ease);
}
.nav-side ul a:hover { color: var(--text); }

.nav-icon {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  color: var(--icon-accent);
}

.main-nav { display: none; }

.main-nav ul { display: flex; gap: 1.75rem; }
.main-nav ul a {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--text-muted);
  font-weight: 600;
  font-size: var(--fs-2);
  transition: color var(--dur) var(--ease);
}
.main-nav ul a:hover { color: var(--text); }

.header-actions { display: flex; align-items: center; gap: .6rem; }

.nav-toggle {
  display: none;
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.nav-toggle:hover { background: var(--subtle-fill-2); }

.nav-toggle-bar {
  position: absolute;
  left: 50%;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform: translateX(-50%);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease), top var(--dur) var(--ease);
}
.nav-toggle-bar:nth-child(1) { top: 14px; }
.nav-toggle-bar:nth-child(2) { top: 19px; }
.nav-toggle-bar:nth-child(3) { top: 24px; }

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { top: 19px; transform: translateX(-50%) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { top: 19px; transform: translateX(-50%) rotate(-45deg); }

.nav-actions { display: none; }

.site-footer {
  background: var(--bg-elevated);
  border-top: 1px solid var(--border-soft);
  padding-top: clamp(3rem, 5vw, 4.5rem);
}

.footer-inner {
  display: grid;
  gap: 2.5rem;
  grid-template-columns: 1fr;
  padding-bottom: 2.5rem;
}
@media (min-width: 780px) {
  .footer-inner { grid-template-columns: 2fr 1fr 1fr 1fr; }
}

.footer-brand .brand-logo { height: 28px; }
.footer-brand p { margin: .9rem 0 1.1rem; font-size: var(--fs-4); max-width: 480px; }

.footer-col h3 {
  font-size: var(--fs-3);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 1rem;
}
.footer-col ul { display: flex; flex-direction: column; gap: .65rem; }
.footer-col a { color: var(--text-muted); font-size: var(--fs-4); transition: color var(--dur) var(--ease); }
.footer-col a:hover { color: var(--text); }

.footer-bottom {
  border-top: 1px solid var(--border-soft);
  padding: 1.6rem 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.footer-legal-text { display: flex; flex-direction: column; gap: .6rem; }
.footer-disclaimer { font-size: var(--fs-2); color: var(--text-faint); max-width: 100%; }

.footer-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: var(--fs-3);
  color: var(--text-faint);
}

.license-badge, .age-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: .3rem .7rem;
  font-weight: 700;
}

@media (max-width: 860px) {
  .nav-toggle { display: block; }

  .nav-side ul { display: none; }

  .main-nav {
    display: block;
    position: fixed;
    inset: 72px 0 0 0;
    background: var(--nav-panel-bg);
    padding: 1.5rem clamp(1.25rem, 6vw, 2rem) 2rem;
    transform: translateX(100%);
    transition: transform var(--dur) var(--ease);
    overflow-y: auto;
  }
  .main-nav.is-open { transform: translateX(0); }

  body.nav-open { overflow: hidden; }
  .main-nav ul { flex-direction: column; gap: 0; }
  .main-nav li { border-bottom: 1px solid var(--border-soft); }
  .main-nav ul a { display: flex; padding: 1rem 0; font-size: var(--fs-5); }

  .nav-actions { display: flex; flex-direction: column; gap: .8rem; margin-top: 1.5rem; }
  .nav-actions .btn { width: 100%; }

  .header-actions .btn { display: none; }
}

.legal-hero {
  padding: clamp(2.5rem, 6vw, 4rem) 0 clamp(1.5rem, 4vw, 2rem);
  border-bottom: 1px solid var(--border-soft);
}
.legal-hero .eyebrow {
  color: var(--gold-2);
  font-weight: 700;
  font-size: var(--fs-2);
  letter-spacing: .09em;
  text-transform: uppercase;
  margin-bottom: .6rem;
}
.legal-hero h1 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); }
.legal-hero p { margin-top: .8rem; max-width: 720px; font-size: var(--fs-4); }

.legal-content {
  padding: clamp(2.5rem, 5vw, 3.5rem) 0 clamp(3.5rem, 6vw, 5rem);
  max-width: 780px;
}

.legal-content h2 {
  font-size: var(--fs-6);
  margin-top: 2.25rem;
  margin-bottom: .75rem;
}
.legal-content h2:first-child { margin-top: 0; }

.legal-content h3 {
  font-size: var(--fs-5);
  margin-top: 1.5rem;
  margin-bottom: .5rem;
  color: var(--text);
}

.legal-content p { margin-bottom: 1rem; font-size: var(--fs-4); }

.legal-content ul, .legal-content ol {
  margin: 0 0 1rem;
  padding-left: 1.3rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.legal-content ul { list-style: disc; }
.legal-content ol { list-style: decimal; }
.legal-content li { font-size: var(--fs-4); color: var(--text-muted); }

.legal-content strong { color: var(--text); }

.legal-content a { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; }
.legal-content a:hover { color: var(--gold-2); }

.legal-table-wrap { overflow-x: auto; margin-bottom: 1.5rem; border: 1px solid var(--border); border-radius: var(--radius-md); }
.legal-table { width: 100%; border-collapse: collapse; font-size: var(--fs-4); }
.legal-table th, .legal-table td { padding: .7rem 1rem; text-align: left; border-bottom: 1px solid var(--border); }
.legal-table th { background: var(--surface-2); color: var(--text-faint); font-size: var(--fs-1); text-transform: uppercase; letter-spacing: .05em; }
.legal-table tr:last-child td { border-bottom: none; }

.legal-note {
  margin-top: 2rem;
  padding: 1rem 1.2rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: var(--fs-3);
  color: var(--text-faint);
}

.legal-updated { font-size: var(--fs-3); color: var(--text-faint); margin-top: .5rem; }

.brand-logo { height: 40px; width: auto; }
.footer-brand .brand-logo { height: 34px; }
.cta-band-logo { height: 40px; width: auto; }

/* ---- where each face lands -------------------------------------------
   Luckiest Guy keeps the headings, the wordmark and the buttons; the
   small chrome runs on condensed bold, which stays legible at 12-15px. */
.license-badge,
.age-badge {
  font-family: var(--font-ui);
}

/* the buttons carry the display face, as they do in the lobby. One
   weight ships, so 700 would only be synthesised into a smear. */
.btn {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: .03em;
}
.nav-side ul a,
.main-nav ul a,
.nav-actions a { font-weight: 400; }

.brand { font-family: var(--font-display); font-weight: 700; }

h1, h2, h3, h4 { font-weight: var(--display-weight); line-height: 1.3; }

/* the nav runs in the UI face, which still holds its counters at 13px */
.nav-side ul a,
.main-nav ul a,
.nav-actions a { font-family: var(--font-ui); font-weight: var(--nav-weight); }

/* The plate labels are white, as the lobby sets them; the dark rim that
   separates them from the lit middle of the well is built on .btn. This
   only has to undo the gradient-text fill the headings set. */
.btn-primary,
.btn-ghost,
.header-actions .btn-primary {
  color: rgb(var(--stb-white));
  -webkit-text-fill-color: rgb(var(--stb-white));
}