/* Magius Casino — theme for the monobrand template */

@font-face {
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/robotocondensed-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: "Roboto Condensed";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/robotocondensed-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: "Luckiest Guy";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/luckiestguy-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: "Luckiest Guy";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/luckiestguy-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;

  /* ---- Magius' own ramp ------------------------------------------------
     neutral is a wine scale struck off the lobby's own #21070c canvas, not
     a grey one; gold is the logo's bevel and carries every call to action.
     Every step holds hue 349, with the saturation easing off as it rises
     so the light end reads as warm paper rather than pink.               */
  --stb-neutral-950: 25 3 7;
  --stb-neutral-900: 33 7 12;
  --stb-neutral-850: 41 10 15;
  --stb-neutral-800: 50 13 20;
  --stb-neutral-750: 46 13 19;
  --stb-neutral-700: 61 18 26;
  --stb-neutral-600: 78 26 36;
  --stb-neutral-550: 85 30 40;
  --stb-neutral-500: 99 39 50;
  --stb-neutral-400: 125 56 69;
  --stb-neutral-300: 181 117 129;
  --stb-neutral-200: 201 156 164;
  --stb-neutral-150: 221 187 193;
  --stb-neutral-100: 237 212 216;
  --stb-neutral-50: 251 243 231;
  --stb-white: 255 247 236;
  --stb-black: 18 2 5;

  /* gold read off the logo's bevel: cream highlight down to a burnt core */
  --stb-gold-100: 255 233 176;
  --stb-gold-200: 243 212 150;
  --stb-gold-300: 230 178 80;
  --stb-gold-500: 224 154 18;
  --stb-gold-600: 186 112 0;
  --stb-gold-700: 92 46 0;

  /* the lobby has no second hue, so "brand" is the bright end of the same
     gold — it marks wins, where the old theme used a mint */
  --stb-brand-500: 255 206 92;
  --stb-brand-600: 240 178 48;
  --stb-brand-700: 198 140 20;
  --stb-brand-200: 255 227 163;
  --stb-brand-150: 255 238 196;

  /* likewise "blue": the accent-link gold the nav glyphs take */
  --stb-blue-500: 230 178 80;
  --stb-blue-600: 200 146 50;
  --stb-blue-700: 160 110 30;

  --stb-red-500: 255 94 78;
  --stb-green-500: 124 190 60;

  /* ---- surfaces -------------------------------------------------------- */
  --bg: rgb(var(--stb-neutral-950));
  /* the wine the hero artwork carries at its top and side edges, so the
     banner can extend past the picture without a seam */
  --hero-blue: #3d121a;
  /* 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%;
  --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 light gold; the bright end is kept
     for wins */
  --gold: rgb(var(--stb-gold-300));
  --gold-2: rgb(var(--stb-gold-200));
  --green: rgb(var(--stb-gold-500));

  --grad-gold: linear-gradient(180deg, rgb(var(--stb-gold-100)) 0%, rgb(var(--stb-gold-500)) 100%);
  --grad-mint: linear-gradient(180deg, rgb(var(--stb-brand-500)) 0%, rgb(var(--stb-brand-600)) 100%);
  --grad-teal: linear-gradient(180deg, rgb(var(--stb-neutral-400)) 0%, rgb(var(--stb-neutral-600)) 100%);
  --on-accent: rgb(var(--stb-gold-700));

  --glow-a: rgba(224, 154, 18, .07);
  --glow-b: rgba(168, 30, 50, .09);
  /* the header keeps a wine band a couple of steps up from the canvas */
  --header-bg: linear-gradient(180deg, rgb(var(--stb-neutral-600)) 0%, rgb(var(--stb-neutral-700)) 55%, rgb(var(--stb-neutral-800)) 100%);
  --nav-panel-bg: rgb(var(--stb-neutral-800));
  --band-bg: linear-gradient(to bottom, rgba(33, 7, 12, .75), rgba(33, 7, 12, .5) 60%, rgba(33, 7, 12, .75));
  --scrim-top: linear-gradient(to bottom, rgba(25, 3, 7, .7), transparent);
  --overlay: rgb(22 4 8 / .92);

  --win: rgb(var(--stb-brand-500));
  --win-glow: rgba(255, 206, 92, .4);
  --tint-accent: rgba(230, 178, 80, .12);
  --accent-glow: rgba(230, 178, 80, .3);
  --cta-glow: rgba(224, 154, 18, .24);
  --subtle-fill: rgba(255, 247, 236, .04);
  --subtle-fill-2: rgba(255, 247, 236, .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's arcade look rounds a step past the old theme - */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-btn: 10px;
  --radius-pill: 9999px;
  --radius-thumb: 6px;

  /* ---- type: Luckiest Guy sets the headings, Roboto Condensed the rest -
     Luckiest Guy ships a single weight and is drawn for display sizes, so
     it carries h1-h4 and the wordmark only; buttons, nav and the small
     badges run on condensed bold, which stays legible at 12-14px.       */
  --font-display: "Luckiest Guy", "Arial Black", "Arial", sans-serif;
  --font-ui: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
  --font-body: "Roboto Condensed", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display-weight: 400;
  --display-track: .01em;
  --display-case: uppercase;
  --btn-weight: 700;
  --btn-track: .02em;
  --btn-case: uppercase;
  --btn-shadow: none;
  /* the hard step under every pill, and how far it sinks when pressed */
  --btn-shadow-height: 4px;
  --btn-active-transform: 3px;
  --btn-label: rgb(var(--stb-gold-200));
  --nav-weight: 700;
  --nav-track: .03em;
  --nav-case: uppercase;
  --hero-stroke: 0;

  --container: 1180px;
  --container-narrow: 720px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: .25s;
  --shadow-1: 0 14px 34px -12px rgba(0, 0, 0, .65);
}
: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, built to the lobby's own recipe -------------------------
   A flat vertical gradient, a 1px lit rim, a 2px inset highlight along the
   top edge and a hard step underneath that the press sinks onto.        */
.btn-primary {
  border: 1px solid rgba(255, 233, 176, .5);
  color: rgb(var(--stb-gold-700));
  background: var(--grad-gold);
  text-shadow: 0 2px 0 rgba(92, 46, 0, .25);
  box-shadow: 0 2px #ffe9b0 inset, 0 var(--btn-shadow-height) 0 0 rgb(var(--stb-gold-700));
}
.btn-primary:hover {
  text-shadow: none;
  background: linear-gradient(180deg, rgb(var(--stb-gold-100)) 0%, rgb(var(--stb-gold-300)) 100%);
}
.btn-primary:active {
  box-shadow: 0 1px #ffe9b0 inset, 0 1px rgb(var(--stb-gold-700));
  transform: translateY(var(--btn-active-transform));
}

.btn-ghost {
  border: 1px solid rgba(181, 117, 129, .45);
  color: var(--btn-label);
  background: var(--grad-teal);
  text-shadow: 0 2px 0 rgba(17, 0, 0, .3);
  box-shadow: 0 2px #8a4152 inset, 0 var(--btn-shadow-height) 0 0 rgb(var(--stb-neutral-800));
}
.btn-ghost:hover {
  text-shadow: none;
  color: var(--btn-label);
  border-color: rgba(181, 117, 129, .3);
  background: linear-gradient(180deg, rgb(var(--stb-neutral-300)) 0%, rgb(var(--stb-neutral-600)) 100%);
}
.btn-ghost:active {
  color: rgb(var(--stb-gold-200) / .8);
  box-shadow: 0 1px #4e1a24 inset, 0 1px rgb(var(--stb-neutral-800));
  transform: translateY(var(--btn-active-transform));
}

/* the lobby steps the step down with the button */
.btn-sm,
.header-actions .btn {
  --btn-shadow-height: 2px;
  --btn-active-transform: 1px;
  border-radius: 6px;
}

.btn-sm { padding: .55rem 1.1rem; font-size: var(--fs-3); }

/* ---- the cast plaques Magius ships -----------------------------------
   Same three plates the lobby uses, so the header reads identically on a
   legal page. Slice and border-width hold one ratio per plate or the
   gold rail thickens as it turns a corner; see styles.css for the full
   note on the numbers.                                                 */
.btn-primary,
.header-actions .btn {
  background: none;
  border-style: solid;
  border-color: transparent;
  border-radius: 0;
  box-shadow: none;
  transition: filter var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn-primary:hover,
.header-actions .btn:hover { filter: brightness(1.08); background: none; }
.btn-primary:active,
.header-actions .btn:active {
  background: none;
  box-shadow: none;
  filter: brightness(.95);
  transform: translateY(var(--btn-active-transform));
}

/* one stretched image, not a nine-slice: the plate's rails carry a
   horizontal gradient from each flared corner inwards, so slicing it cut
   that ramp and butted the modelled corners against a flat band of gold.
   See the full note in styles.css. */
.btn-primary {
  --btn-active-transform: 2px;
  position: relative;
  border: 0;
  background: none;
  /* sides clear the corner flares, top and bottom the rails, and the top
     carries the drop Luckiest Guy's high cap band needs */
  padding: 1.05em 2.5em .75em;
  color: #fff;
  text-shadow: 0 2px 0 rgba(0, 48, 0, .6);
}
/* on its own layer, so the purple header plates can switch it off rather
   than have green show through their rounded corners */
.btn-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url("/assets/btn-cta-active1.04234946a9b318fc.png") center / 100% 100% no-repeat;
}
.header-actions .btn-primary::before { content: none; }
.btn-primary.btn-sm { padding: .95em 2.2em .7em; --btn-active-transform: 1px; }

.header-actions .btn {
  --btn-active-transform: 1px;
  border-width: 13px 17px;
  padding: .1rem .15rem;
  font-size: var(--fs-4);
  letter-spacing: 0;
}
.header-actions .btn-ghost {
  border-image: url("/assets/btn-active1.05acc1dd12730654.png") 30 40 fill stretch;
  color: rgb(var(--stb-gold-200));
  text-shadow: 0 1px 0 rgba(30, 0, 0, .6);
}
.header-actions .btn-primary {
  border-image: url("/assets/btn-active1.cb3f3568e1e0369b.png") 30 40 fill stretch;
  color: rgb(var(--stb-gold-100));
  text-shadow: 0 1px 0 rgba(26, 0, 30, .6);
}

.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: 52px; 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-4);
  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-4);
  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: 30px; }
.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: 46px; width: auto; }
.footer-brand .brand-logo { height: 40px; }
.cta-band-logo { height: 44px; 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: 400; }

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

/* the green plate's label is gold, which is 1.6:1 on that green by
   itself — the dark rim around each letter is what separates it, so it
   is drawn here rather than left to the fill. Matches the lobby. */
.btn-primary {
  color: rgb(var(--stb-gold-300));
  -webkit-text-fill-color: rgb(var(--stb-gold-300));
  text-shadow:
    1px 0 0 rgba(28, 14, 0, .92),
    -1px 0 0 rgba(28, 14, 0, .92),
    0 1px 0 rgba(28, 14, 0, .92),
    0 -1px 0 rgba(28, 14, 0, .92),
    0 2px 2px rgba(0, 32, 0, .55);
}
.header-actions .btn-primary {
  color: rgb(var(--stb-gold-100));
  -webkit-text-fill-color: rgb(var(--stb-gold-100));
  text-shadow: 0 1px 0 rgba(26, 0, 30, .6);
}