/* Shared visual shell for existing legal and support routes. Content stays in
   the original route files; this only aligns typography, spacing and surfaces. */
:root {
  color-scheme: dark;
  --bg: #111117;
  --bg-soft: #191820;
  --card: rgba(34, 31, 41, .88);
  --card-hover: rgba(42, 38, 49, .94);
  --border: rgba(238, 227, 242, .13);
  --line: rgba(238, 227, 242, .13);
  --text: #f7f4f7;
  --text-soft: #c6bfca;
  --soft: #c6bfca;
  --muted: #b7b0bd;
  --accent: #f07b91;
  --accent-2: #9785dc;
  --accent-soft: rgba(240, 123, 145, .12);
  --gold: #f07b91;
  --cyan: #9785dc;
  --max: 940px;
}
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body {
  color: var(--text);
  background:
    radial-gradient(ellipse at 88% 0%, rgba(240,123,145,.11), transparent 32rem),
    radial-gradient(ellipse at 4% 44%, rgba(151,133,220,.09), transparent 34rem),
    var(--bg);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.65;
}
a { color: #f29aae; text-decoration-thickness: .08em; text-underline-offset: .18em; }
a:hover { color: #ffc3ce; }
a:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 4px; border-radius: 5px; }
.page { width: min(calc(100% - 40px), var(--max, 940px)); padding: 25px 0 58px; }
.topbar { margin-bottom: clamp(28px, 5vw, 44px); }
.brand { gap: 10px; color: var(--text); font-size: .9rem; font-weight: 850; letter-spacing: .11em; }
.brand > .brand-logo, .brand-mark, .mark { width: 38px; height: 38px; border-radius: 12px; box-shadow: 0 0 20px rgba(240,123,145,.2); }
.brand-mark, .mark { display: grid; place-items: center; color: #381d2a; background: linear-gradient(140deg, #ffb0bf, #df6c8d); font-weight: 900; }
.back { padding: 9px 14px; border: 1px solid var(--border); border-radius: 999px; color: var(--text-soft); background: rgba(255,255,255,.035); font-size: .88rem; font-weight: 700; }
.back:hover { color: var(--text); text-decoration: none; border-color: rgba(240,123,145,.38); }
h1 { max-width: 760px; margin: 0 0 13px; color: var(--text); font-size: clamp(2.45rem, 6vw, 4.25rem); line-height: 1; letter-spacing: -.06em; }
h2 { color: var(--text); font-size: clamp(1.18rem, 2.2vw, 1.45rem); line-height: 1.25; letter-spacing: -.025em; }
h3 { color: var(--text); line-height: 1.35; }
.lead, .hero p, .meta, .updated { color: var(--text-soft); }
.hero {
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: clamp(22px, 4vw, 34px);
  background: linear-gradient(145deg, rgba(34,31,41,.72), rgba(23,22,30,.78));
  box-shadow: inset 0 1px rgba(255,255,255,.035);
}
.hero .eyebrow { margin-top: 0; }
.hero .meta { margin-top: 18px; }
.eyebrow { color: #f29aae; font-size: .76rem; letter-spacing: .085em; }
.eyebrow::before { background: var(--accent); box-shadow: 0 0 12px rgba(240,123,145,.6); }
section, .card, .toc, .notice {
  border-color: var(--border);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(34,31,41,.94), rgba(23,22,30,.97));
  box-shadow: inset 0 1px rgba(255,255,255,.035);
}
section { padding: clamp(20px, 3.5vw, 28px); }
.card { padding: clamp(20px, 3vw, 25px); }
.notice, .contact { border-color: rgba(240,123,145,.24); background: linear-gradient(140deg, rgba(240,123,145,.10), rgba(151,133,220,.065)); }
.notice strong, .contact strong { color: #ffd1da; }
.contact { border-left: 3px solid var(--accent); border-radius: 13px; }
.action { color: #fff7fa; border-color: rgba(240,123,145,.3); background: linear-gradient(135deg, rgba(240,123,145,.22), rgba(203,77,126,.13)); }
.action:hover { color: #fff; background: rgba(240,123,145,.25); }
.card .icon { color: #ffd5de; background: rgba(240,123,145,.13); }
.toc a { color: #f29aae; }
.soft, .muted, .text-soft { color: var(--text-soft); }
.igdb-attribution { color: #aaa2b1; font-size: .78rem; line-height: 1.5; }
.igdb-attribution a { display: inline; min-height: 0; color: #dfbecd; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1000px) {
}
@media (max-width: 620px) {
  .page { width: calc(100% - 28px); padding-top: 17px; }
  .topbar { gap: 12px; margin-bottom: 30px; }
  .brand > .brand-logo, .brand-mark, .mark { width: 34px; height: 34px; }
  section, .card { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Release shell: static starlight keeps policy pages calm and readable. */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle at 7% 18%,rgba(217,208,234,.3) 0 1px,transparent 1.8px),radial-gradient(circle at 94% 35%,rgba(217,208,234,.25) 0 1px,transparent 1.8px),radial-gradient(circle at 5% 70%,rgba(217,208,234,.25) 0 1px,transparent 1.8px),radial-gradient(circle at 89% 84%,rgba(217,208,234,.3) 0 1px,transparent 1.8px); }
p, li, .contact, a { overflow-wrap: anywhere; }
.toc a, .back, footer a { min-height: 44px; }
.toc a { display: inline-flex; align-items: center; }
section { scroll-margin-top: 28px; }
.link-page main { background: linear-gradient(145deg,#211e29,#17171f); border-color: var(--line); }
.link-page h1 { font-size: clamp(1.7rem,6vw,2.2rem); line-height: 1.12; }
.link-page a { color: #271921; background: linear-gradient(125deg,#dfa5aa,#b6718f); }
.link-page a.secondary { color: var(--text); background: rgba(255,255,255,.055); }
.link-page small, .link-page p, .link-page .meta { color: #c2baca; }
.link-page .platform-choices { border-color: var(--line); }
.link-page .mark { display: block; width: 68px; height: 68px; margin: 0 auto 22px; border-radius: 20px; }