/* CrownPlay — theme for the monobrand template
   Palette, type and button plates are read off crownplay'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;
}

/* The lobby's own display face, served the way the lobby serves it:
   local() first, then its five woff cuts. Only the display roles use it
   — titles, buttons, nav — because the lobby is an app of short labels
   and this page carries paragraphs it never has to set. */
@font-face {
  font-family: "BeaufortforLOL";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local("BeaufortforLOL"), url('/assets/fonts/beaufort-light.woff') format('woff');
}
@font-face {
  font-family: "BeaufortforLOL";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("BeaufortforLOL"), url('/assets/fonts/beaufort-regular.woff') format('woff');
}
@font-face {
  font-family: "BeaufortforLOL";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local("BeaufortforLOL"), url('/assets/fonts/beaufort-medium.woff') format('woff');
}
@font-face {
  font-family: "BeaufortforLOL";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local("BeaufortforLOL"), url('/assets/fonts/beaufort-bold.woff') format('woff');
}
@font-face {
  font-family: "BeaufortforLOL";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: local("BeaufortforLOL"), url('/assets/fonts/beaufort-heavy.woff') format('woff');
}

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

  /* ---- CrownPlay's own ramp --------------------------------------------
     The lobby is near-black rather than tinted: its canvas is the
     --stb-yellow-1300 #050404, and the steps above it climb through the
     same warm brown family, not a grey one. The light half is the
     lobby's --stb-neutral-* scale, which is a cool grey-teal — the one
     cool note in the sheet, and the reason body copy reads blue-ish
     against the brown it sits on. Every step is a value the lobby
     ships. Note the ramp is numbered the opposite way round from the
     lobby's own: here 950 is the canvas and 50 is the copy. */
  --stb-neutral-950: 5 4 4;        /* yellow-1300 — bg-primary, the canvas */
  --stb-neutral-900: 22 16 13;     /* yellow-1200 — bg-secondary, cards    */
  --stb-neutral-850: 25 23 21;     /* yellow-1500                          */
  --stb-neutral-800: 30 19 19;     /* yellow-1100 — bg-tertiary, raised    */
  --stb-neutral-750: 40 32 26;     /* yellow-900 — the input well, hairline*/
  --stb-neutral-700: 45 36 29;     /* yellow-1000 — the well, selected     */
  --stb-neutral-600: 62 58 52;     /* yellow-1400 — borders                */
  --stb-neutral-550: 50 34 22;     /* brand-1400 — the bronze plate's foot */
  --stb-neutral-500: 84 63 50;     /* brand-1450 — the input stroke        */
  --stb-neutral-400: 115 136 134;  /* neutral-200 — the lobby's body copy  */
  --stb-neutral-300: 136 162 157;  /* neutral-300 — fine print, 7:1 on bg  */
  --stb-neutral-200: 151 178 180;  /* neutral-500 — secondary copy         */
  --stb-neutral-150: 193 210 210;  /* neutral-600                          */
  --stb-neutral-100: 217 217 217;  /* neutral-900                          */
  --stb-neutral-50: 241 241 241;   /* neutral-950 — primary copy           */
  --stb-white: 255 255 255;
  --stb-black: 9 8 12;             /* the lobby's black, faintly violet    */

  /* the amber the lobby accents with: --stb-accent is yellow-300 and its
     links are yellow-400, with the pale yellow-700/800 kept for the
     lettering that sits on a lit plate */
  --stb-gold-100: 254 205 161;     /* yellow-800 — the pale end            */
  --stb-gold-200: 255 176 57;      /* yellow-400 — link accent, hover      */
  --stb-gold-300: 229 144 69;      /* yellow-300 — --stb-accent            */
  --stb-gold-500: 192 132 86;      /* yellow-600 — icons                   */
  --stb-gold-600: 156 106 57;      /* yellow-1600                          */
  --stb-gold-700: 34 22 10;        /* yellow-50 — the ground under gold    */

  /* "brand" is the lobby's mint ramp: the primary button's lit top, the
     win figures, and nothing else */
  --stb-brand-500: 8 235 181;      /* brand-1050 — the CTA's lit crown     */
  --stb-brand-600: 0 255 133;      /* green-800                            */
  --stb-brand-700: 7 101 79;       /* brand-1100 — the CTA's foot          */
  --stb-brand-200: 129 255 225;    /* brand-1000 — the hover crown         */
  --stb-brand-150: 232 254 95;     /* green-700                            */

  /* the lobby paints its accent links in amber too, so "blue" is amber */
  --stb-blue-500: 229 144 69;
  --stb-blue-600: 192 132 86;
  --stb-blue-700: 156 106 57;

  --stb-red-500: 234 51 35;        /* red-500 — --stb-functional-alert     */
  --stb-green-500: 8 235 181;      /* the lobby's one green is the mint    */

  /* ---- 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 brown. Re-sample it if the art changes — the mean of
     the picture's leftmost column is the number. */
  --hero-blue: #01140f;
  /* 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 canvas
     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. */
  --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 brighter #ffb039 is
     kept for hover and 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 gold of the crown in the mark, stop for stop */
  --grad-gold: linear-gradient(180deg, #f9f295 0%, #dbb057 32.46%, #d9ac53 53.16%, #ffeca9 75%, #c9a65e 89.65%, #b88a44 100%);
  /* the mint the primary plate lights with, flattened to a line */
  --grad-mint: linear-gradient(270deg, #81ffe1 0%, #08ebb5 45%, #07654f 100%);
  /* --stb-gradient-400, the lobby's quiet panel fill */
  --grad-teal: linear-gradient(270deg, #16100d 0%, #1e1313 35.63%, #16100d 100%);

  /* the three button plates, stop for stop: --stb-gradient-600 (primary),
     --stb-gradient-800 (secondary) and --stb-gradient-1000 (tertiary).
     Each lights from a point above the plate's top edge, which is what
     gives the fill its domed look without any border drawing it. */
  --plate-primary: radial-gradient(100% 100% at 50% 0%, rgb(var(--stb-brand-500)) 0%, rgb(var(--stb-brand-700)) 100%);
  --plate-secondary: radial-gradient(100% 100% at 50% 0%, rgb(245 188 137) 13.54%, rgb(102 55 0) 100%);
  --plate-tertiary: radial-gradient(100% 100% at 50% 0%, rgb(126 99 68) 0%, rgb(var(--stb-neutral-550)) 100%);
  --on-accent: rgb(var(--stb-gold-700));

  --glow-a: rgba(8, 235, 181, .05);
  --glow-b: rgba(229, 144, 69, .06);
  /* the header keeps the lobby's bg-tertiary band above the canvas */
  --header-bg: linear-gradient(180deg, rgb(30 19 19) 0%, rgb(25 17 14) 55%, rgb(22 16 13) 100%);
  --nav-panel-bg: rgb(var(--stb-neutral-850));
  --band-bg: linear-gradient(to bottom, rgba(22, 16, 13, .75), rgba(22, 16, 13, .5) 60%, rgba(22, 16, 13, .75));
  --scrim-top: linear-gradient(to bottom, rgba(5, 4, 4, .7), transparent);
  --overlay: rgb(5 4 4 / .94);

  --win: rgb(var(--stb-brand-500));
  --win-glow: rgba(8, 235, 181, .4);
  --tint-accent: rgba(229, 144, 69, .12);
  --accent-glow: rgba(229, 144, 69, .3);
  --cta-glow: rgba(8, 235, 181, .26);
  --subtle-fill: rgba(241, 241, 241, .04);
  --subtle-fill-2: rgba(241, 241, 241, .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 cuts a 4px corner on nearly everything — the
     game thumbnail, every button, the arrow controls — and saves 8px
     for the panels it treats as dialogs.                              */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-btn: 4px;
  --radius-pill: 9999px;
  --radius-thumb: 4px;

  /* ---- type -------------------------------------------------------------
     The lobby sets everything in BeaufortforLOL, which it self-hosts, so
     this page serves the same five cuts. It takes the display roles only
     — titles, buttons, nav — and leaves the body to Inter: the lobby is
     an app of short labels, and the paragraphs here have no counterpart
     in it to copy. Cases and tracking are the lobby's own: titles and
     labels uppercase, the type set tight.                             */
  --font-display: "BeaufortforLOL", "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: 700;
  /* the lobby sets its titles tight and in plain case — its .title-block
     carries no text-transform at all, and -.03em of tracking at 28-32px.
     Only the controls are uppercased, which is why --btn-case and
     --nav-case still are. The tracking is eased to -.02em here because
     these headings run over a wider size range than the lobby's two. */
  --display-track: -.02em;
  --display-case: none;
  --btn-weight: 700;
  --btn-track: .02em;
  --btn-case: uppercase;
  --btn-shadow: none;
  /* the plates are flat gradients with a cast shadow, not moulded caps,
     so the press is a short dip onto that shadow */
  --btn-shadow-height: 0px;
  --btn-active-transform: 1px;
  --btn-label: rgb(var(--stb-neutral-50));
  /* the lobby's nav runs on the display face at medium */
  --nav-weight: 500;
  --nav-track: .03em;
  --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 lit plates ----------------------------------
   CrownPlay draws its buttons in CSS: a 4px box filled by a radial
   gradient whose light source sits on the plate's top edge, so the fill
   domes without a border or a highlight drawn for it, and a short cast
   shadow underneath. Only the primary plate carries a texture over the
   fill — a scalloped tile the lobby repeats at 150x78.

   One number runs the box, --btn-pad, and it moves with the size steps;
   the plate itself stretches, so there is nothing to keep in proportion
   the way a moulded cap would be.                                    */
.btn {
  --btn-pad: 1.5rem;
  --plate-stroke: rgb(var(--stb-black) / .25);

  min-height: 42px;
  padding: 0 var(--btn-pad);
  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;
  /* --stb-text-shadow: a single soft drop, which is all the label needs
     to hold against the lit half of the plate */
  text-shadow: 0 1px 1px 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;
  border-radius: var(--radius-btn);
  box-shadow: 0 2px 4px rgb(var(--stb-black) / .2);
  /* the texture tile comes first so it lies over the fill; it is sized
     in px because it is a repeating pattern, not a stretched layer */
  background-repeat: repeat, no-repeat;
  background-position: left top, 0 0;
  background-size: 150px 78px, auto;
}

/* the mint plate: every call to action — register, claim, play */
.btn-primary { color: var(--btn-label); }
.btn-primary::before {
  background-image: url("/assets/button-pattern.svg"), var(--plate-primary);
}

/* the bronze plate: log in, and anything that sits beside a mint CTA.
   The lobby lays no texture on this one, so the fill is the only layer */
.btn-ghost { color: var(--btn-label); }
.btn-ghost::before {
  background-image: var(--plate-secondary);
  background-size: auto;
  background-position: 0 0;
}
.btn-ghost:hover { color: var(--btn-label); }

/* 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 {
  --btn-pad: .9rem;
  padding: 0 var(--btn-pad);
  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 {
  --btn-pad: 1.4rem;
  padding: 0 var(--btn-pad);
  background: var(--grad-mint);
  color: rgb(var(--stb-neutral-950));
  text-shadow: none;
}

/* ---- the size steps the lobby ships -----------------------------------
   The lobby runs 84/60/48/40px plates on 40/32/24/16px of side padding;
   this page sits between its s and xs steps, so the padding is carried
   across at that ratio rather than at its raw pixel value. */
.btn-sm {
  --btn-pad: 1rem;
  min-height: 38px;
  font-size: var(--fs-3);
}
.btn-lg {
  --btn-pad: 1.75rem;
  min-height: 54px;
  font-size: var(--fs-6);
  --btn-active-transform: 2px;
}

/* ---- 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 {
  --btn-pad: 1.05rem;
  --btn-active-transform: 1px;
  min-height: 38px;
  padding: 0 var(--btn-pad);
  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: var(--plate-secondary);
  background-size: auto;
  background-position: 0 0;
}
.site-header.is-cta-passed .header-actions .btn-primary::before {
  background-image: url("/assets/button-pattern.svg"), var(--plate-primary);
  background-size: 150px 78px, auto;
  background-position: left top, 0 0;
}


.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; }
/* The mark is a wordmark seven times as wide as it is tall, so it is
   sized on its width: hold it by height and the header fills with it. */
.brand-logo { width: 176px; height: 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);
  letter-spacing: var(--nav-track);
  text-transform: var(--nav-case);
  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 { width: 150px; }
.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;
}

/* The inline nav needs about 1120px before the five links, the mark and
   the two pills stop fighting for the row — the wordmark is 190px wide
   on its own — so it folds into the panel well above the phone
   breakpoint. The panel only takes over the buttons at 860px, where the
   header runs out of room for them. */
@media (max-width: 1100px) {
  .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); }

}

@media (max-width: 860px) {
  .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 { width: 166px; height: auto; }
.footer-brand .brand-logo { width: 150px; }
.cta-band-logo { width: 166px; height: auto; }

/* ---- where each face lands -------------------------------------------
   The display face keeps the headings, the wordmark, the buttons and the
   nav, as it does in the lobby; the two badges run on the UI face, which
   still holds its counters at 12-15px. */
.license-badge,
.age-badge {
  font-family: var(--font-ui);
}

/* the buttons carry the display face, as they do in the lobby */
.btn {
  font-family: var(--font-display);
  font-weight: var(--btn-weight);
  letter-spacing: var(--btn-track);
}

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

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

.nav-side ul a,
.main-nav ul a,
.nav-actions a { font-family: var(--font-display); 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));
}