/* Shared styles for the FortuneX legal pages (privacy / terms / cookies /
 * responsible-play). Kept small + self-contained so each page is one file +
 * this stylesheet. Brand tokens mirror landing.html. */
:root {
  --obsidian: #0A0205;
  --wine-950: #2A0F18;
  --wine-900: #3D1622;
  --wine-800: #4D1C2C;
  --wine-700: #6B2238;
  --gold-300: #F0D77E;
  --gold-400: #E5C547;
  --gold-500: #D4AF37;
  --gold-700: #8B6914;
  --cream:    #F5E6C8;
  --ivory:    #FFF8E7;
  --white:    #FFFFFF;
  --snow:     #F5F5F5;
  /* Lifted from #9A8A7E to clear WCAG AA (≥4.5:1) against the wine-tinted
     background. Now ≈5.9:1 against --wine-950. */
  --muted:    #B5A593;
  --danger:   #FF4757;
  --gold-leaf: linear-gradient(135deg, #F0D77E 0%, #D4AF37 50%, #8B6914 100%);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background:
    radial-gradient(ellipse 90% 50% at 50% -10%, rgba(240,215,126,0.16), transparent 60%),
    radial-gradient(ellipse 60% 40% at 10% 100%, rgba(160,40,56,0.16), transparent 65%),
    var(--wine-950);
  color: var(--snow);
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

.legal-shell { max-width: 760px; margin: 0 auto; padding: 0 24px 96px; }

nav.legal-top {
  position: sticky; top: 0; z-index: 5;
  backdrop-filter: blur(12px);
  background: rgba(26, 5, 10, 0.85);
  border-bottom: 1px solid rgba(139, 105, 20, 0.22);
}
nav.legal-top .inner {
  max-width: 760px; margin: 0 auto;
  padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.wordmark {
  font-family: "Cinzel", serif; font-weight: 900;
  font-size: 18px; letter-spacing: 0.08em;
  color: var(--ivory); text-transform: uppercase;
  text-decoration: none;
}
.wordmark .x {
  background: var(--gold-leaf);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.legal-nav-back {
  font-family: "Cinzel", serif; font-weight: 700;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold-400); text-decoration: none;
}
.legal-nav-back:hover { color: var(--gold-300); }

.legal-hero { padding: 56px 0 28px; border-bottom: 1px solid rgba(139, 105, 20, 0.18); margin-bottom: 36px; }
.legal-hero .eyebrow {
  font-family: "Cinzel", serif; font-weight: 700;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold-500); margin-bottom: 12px;
}
.legal-hero h1 {
  font-family: "Cinzel", serif; font-weight: 900;
  font-size: clamp(32px, 5vw, 48px); line-height: 1.1;
  letter-spacing: 0.02em; color: var(--ivory);
  margin-bottom: 14px;
}
.legal-hero .meta {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px; color: var(--muted);
  letter-spacing: 0.06em;
}

.legal-toc {
  background: rgba(45, 15, 24, 0.5);
  border: 1px solid rgba(139, 105, 20, 0.22);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 32px;
}
.legal-toc h3 {
  font-family: "Cinzel", serif; font-weight: 700;
  font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-400);
  margin-bottom: 10px;
}
.legal-toc ol {
  list-style: decimal;
  padding-left: 20px;
  font-size: 13px; color: var(--cream);
  line-height: 1.9;
}
.legal-toc a { color: var(--cream); text-decoration: none; }
.legal-toc a:hover { color: var(--gold-400); }

h2.legal-h2 {
  font-family: "Cinzel", serif; font-weight: 700;
  font-size: 22px; line-height: 1.25;
  letter-spacing: 0.04em; color: var(--ivory);
  margin: 36px 0 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(139, 105, 20, 0.18);
}
h2.legal-h2:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }

h3.legal-h3 {
  font-family: "Cinzel", serif; font-weight: 700;
  font-size: 14px; letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-400);
  margin: 22px 0 8px;
}

p.legal-p { margin-bottom: 12px; color: var(--cream); }
p.legal-p strong { color: var(--ivory); font-weight: 600; }
p.legal-p code {
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  background: rgba(212, 175, 55, 0.08);
  border: 1px solid rgba(139, 105, 20, 0.3);
  padding: 1px 6px; border-radius: 4px;
  color: var(--gold-400);
}

ul.legal-list, ol.legal-list {
  padding-left: 22px;
  margin-bottom: 14px;
}
ul.legal-list li, ol.legal-list li {
  margin-bottom: 6px;
  color: var(--cream);
}

.legal-callout {
  background: rgba(212, 175, 55, 0.06);
  border: 1px solid rgba(229, 197, 71, 0.32);
  border-left: 3px solid var(--gold-500);
  border-radius: 6px;
  padding: 14px 18px;
  margin: 20px 0;
  font-size: 14px;
  color: var(--ivory);
}
.legal-callout strong {
  display: block;
  font-family: "Cinzel", serif; font-weight: 700;
  font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-400);
  margin-bottom: 6px;
}

a.legal-link { color: var(--gold-400); text-decoration: underline; text-decoration-color: rgba(212, 175, 55, 0.3); }
a.legal-link:hover { color: var(--gold-300); }

/* Keyboard focus rings — WCAG AA. Suppressed on mouse focus via :focus-visible. */
*:focus { outline: none; }
*:focus-visible {
  outline: 2px solid var(--gold-400, #E5C547);
  outline-offset: 2px;
  border-radius: 4px;
}

footer.legal-foot {
  margin-top: 60px;
  padding-top: 20px;
  padding-bottom: 24px;
  border-top: 1px solid rgba(139, 105, 20, 0.18);
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--muted);
  display: flex; flex-wrap: wrap; gap: 8px 16px;
  justify-content: space-between;
}
footer.legal-foot a { color: var(--muted); text-decoration: none; }
footer.legal-foot a:hover { color: var(--gold-400); }

/* =====================================================================
   Light theme — :root[data-theme="light"] overrides.
   Flips the wine/gold palette to a cream/wine palette so legal pages
   stay readable when the user toggles light mode. Mirrors the variable-
   flip + element-override pattern from landing.html + play.html.
   ===================================================================== */
:root[data-theme="light"] {
  --obsidian: #F8F3E8;
  --wine-950: #FBF6EB;
  --wine-900: #F2EADC;
  --wine-800: #E8DCC4;
  --wine-700: #DBC9A8;
  /* Keep gold tokens but slightly darker for contrast against cream. */
  --gold-300: #B8941F;
  --gold-400: #A8841A;
  --gold-500: #8B6914;
  --gold-700: #6B5210;
  --cream:    #2A0F18;   /* used as body text — now dark wine */
  --ivory:    #1A0A10;   /* used as headings — now near-black wine */
  --white:    #1A0A10;
  --snow:     #2A0F18;
  /* Dark-on-cream muted. ≈ 5.4:1 against --wine-950 (#FBF6EB). */
  --muted:    #6B5A47;
  --danger:   #C8253A;
}
:root[data-theme="light"] body {
  background:
    radial-gradient(ellipse 90% 50% at 50% -10%, rgba(212,175,55,0.10), transparent 60%),
    radial-gradient(ellipse 60% 40% at 10% 100%, rgba(160,40,56,0.06), transparent 65%),
    var(--wine-950);
  color: var(--snow);
}
:root[data-theme="light"] nav.legal-top {
  background: rgba(251, 246, 235, 0.92);
  border-bottom: 1px solid rgba(139, 105, 20, 0.28);
}
:root[data-theme="light"] .legal-hero {
  border-bottom-color: rgba(139, 105, 20, 0.28);
}
:root[data-theme="light"] .legal-toc {
  background: rgba(232, 220, 196, 0.45);
  border-color: rgba(139, 105, 20, 0.28);
}
:root[data-theme="light"] h2.legal-h2 {
  border-top-color: rgba(139, 105, 20, 0.28);
}
:root[data-theme="light"] p.legal-p code {
  background: rgba(168, 132, 26, 0.10);
  border-color: rgba(139, 105, 20, 0.34);
}
:root[data-theme="light"] .legal-callout {
  background: rgba(212, 175, 55, 0.08);
  border-color: rgba(139, 105, 20, 0.34);
  border-left-color: var(--gold-500);
}
:root[data-theme="light"] a.legal-link {
  text-decoration-color: rgba(139, 105, 20, 0.4);
}
:root[data-theme="light"] footer.legal-foot {
  border-top-color: rgba(139, 105, 20, 0.28);
}

/* =====================================================================
   Mobile breakpoint — legal.css originally had only desktop sizing,
   which made every secondary page (Privacy, Terms, Cookies, Responsible
   Play, RTP, Verify, Changelog, 404, Offline) look sparse on phones
   with huge gaps between sections and footers that floated way below
   the content. This breakpoint tightens hero, section-gap, list, and
   footer paddings to match the landing-page mobile feel.
   ===================================================================== */
@media (max-width: 720px) {
  .legal-shell { padding: 0 16px 32px; }
  .legal-hero {
    padding: 28px 0 18px;
    margin-bottom: 22px;
  }
  .legal-hero h1 { font-size: clamp(28px, 7vw, 36px); margin-bottom: 8px; }
  .legal-hero .eyebrow { margin-bottom: 8px; font-size: 11px; }
  .legal-hero .meta { font-size: 11px; }
  .legal-toc { padding: 12px 14px; margin-bottom: 20px; }
  .legal-toc h3 { margin-bottom: 8px; }
  .legal-toc ol { padding-left: 18px; }
  .legal-toc li { font-size: 13px; margin-bottom: 4px; }
  .legal-callout { padding: 12px 14px; margin-bottom: 20px; font-size: 14px; }
  h2.legal-h2 { font-size: 17px; margin: 24px 0 8px; padding-top: 10px; }
  h3.legal-h3 { font-size: 14px; margin: 18px 0 6px; }
  p.legal-p { font-size: 14px; margin-bottom: 10px; line-height: 1.55; }
  ul.legal-list li { font-size: 14px; margin-bottom: 5px; }
  pre, code { font-size: 11.5px; }
  footer.legal-foot {
    margin-top: 28px;
    padding-top: 14px;
    padding-bottom: 28px;
    font-size: 10.5px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  nav.legal-top .inner { padding: 12px 16px; }
  nav.legal-top .wordmark { font-size: 18px; }
  nav.legal-top .legal-nav-back { font-size: 12px; }
}
@media (max-width: 480px) {
  .legal-shell { padding: 0 14px 24px; }
  .legal-hero { padding: 20px 0 14px; margin-bottom: 16px; }
  .legal-hero h1 { font-size: clamp(24px, 7vw, 30px); }
  h2.legal-h2 { font-size: 16px; margin: 20px 0 6px; }
  h3.legal-h3 { font-size: 13px; margin: 14px 0 4px; }
  p.legal-p, ul.legal-list li { font-size: 13.5px; }
}