/* The legal pages (Terms of Service, Privacy Policy, Your Data): plain pages in the game's look,
   readable without scripts, on any screen */
@font-face {
  font-family: 'SV Title';
  src: url('../assets/finalnew.ttf') format('truetype');
  font-display: swap;
}
:root {
  --bg: #05070d;
  --panel: rgba(8, 18, 34, 0.86);
  --line: rgba(80, 200, 255, 0.22);
  --text: #d7e3f4;
  --text-dim: #8b99ae;
  --accent: #39d8ff;
  --accent-2: #8af0ff;
  --good: #57f287;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; color: var(--text); font: 16px/1.65 'Segoe UI', system-ui, -apple-system, Roboto, sans-serif;
  background:
    radial-gradient(ellipse 80% 40% at 50% -10%, rgba(30, 80, 150, 0.35), transparent 70%),
    radial-gradient(ellipse 60% 40% at 100% 100%, rgba(57, 216, 255, 0.06), transparent 70%),
    var(--bg);
  background-attachment: fixed;
}
a { color: var(--accent); text-underline-offset: 2px; }
a:hover { color: var(--accent-2); }
:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }

.lg-top {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px max(16px, calc((100vw - 900px) / 2)); background: rgba(5, 9, 18, 0.88); border-bottom: 1px solid var(--line);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.lg-brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; margin-right: auto; }
.lg-brand img { width: 34px; height: 34px; }
.lg-brand span { font-family: 'SV Title', 'Segoe UI', sans-serif; letter-spacing: 0.06em; font-size: 17px; white-space: nowrap; }
.lg-brand b { color: var(--good); font-weight: normal; margin-left: 0.3em; }
.lg-nav { display: flex; gap: 4px; flex-wrap: wrap; }
.lg-nav a {
  padding: 5px 12px; border-radius: 16px; text-decoration: none; color: var(--text-dim); font-size: 14px; border: 1px solid transparent;
}
.lg-nav a:hover { color: #fff; border-color: var(--line); }
.lg-nav a[aria-current='page'] { color: #fff; border-color: var(--accent); background: rgba(57, 216, 255, 0.12); }
.lg-play { padding: 6px 14px; border-radius: 8px; background: linear-gradient(180deg, #27c6f2, #1186bb); color: #fff; text-decoration: none; font-weight: 600; font-size: 14px; white-space: nowrap; }
.lg-play:hover { color: #fff; filter: brightness(1.1); }

main { max-width: 900px; margin: 0 auto; padding: 28px 16px 40px; }
.lg-head h1 { font-family: 'SV Title', 'Segoe UI', sans-serif; font-weight: normal; letter-spacing: 0.05em; color: #fff; font-size: clamp(28px, 5vw, 40px); line-height: 1.15; margin: 0 0 6px; text-shadow: 0 0 20px rgba(57, 216, 255, 0.4); }
.lg-head p { margin: 0; color: var(--text-dim); }
.lg-summary {
  margin: 22px 0 26px; padding: 16px 18px; border-radius: 12px; background: rgba(57, 216, 255, 0.07); border: 1px solid rgba(57, 216, 255, 0.28);
}
.lg-summary h2 { margin: 0 0 6px; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-2); }
.lg-summary ul { margin: 0; padding-left: 20px; }
.lg-toc { margin: 0 0 26px; padding: 14px 18px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
.lg-toc h2 { margin: 0 0 6px; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-dim); }
.lg-toc ol { margin: 0; padding-left: 22px; columns: 2 260px; column-gap: 28px; }
.lg-toc li { break-inside: avoid; }
section { margin: 0 0 24px; padding: 18px 20px 6px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); scroll-margin-top: 80px; }
section h2 { margin: 0 0 8px; font-size: 20px; color: #fff; }
section h3 { margin: 16px 0 4px; font-size: 16px; color: var(--accent-2); }
section p, section ul, section ol { margin: 0 0 12px; }
section li { margin: 2px 0; }
table { width: 100%; border-collapse: collapse; margin: 0 0 14px; font-size: 15px; }
th, td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid rgba(80, 200, 255, 0.14); }
th { color: var(--accent-2); font-weight: 600; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; }
.lg-table { overflow-x: auto; }
.lg-note { color: var(--text-dim); font-size: 14px; }
.lg-caps { font-size: 14px; letter-spacing: 0.01em; }
footer { max-width: 900px; margin: 0 auto; padding: 0 16px 36px; color: var(--text-dim); font-size: 14px; display: flex; flex-wrap: wrap; gap: 6px 18px; }
footer a { color: var(--text-dim); }

@media (max-width: 640px) {
  .lg-top { gap: 8px; }
  .lg-brand span { font-size: 15px; }
  .lg-nav { order: 3; width: 100%; }
  section { padding: 14px 14px 4px; }
  th, td { padding: 7px 6px; }
}
@media print {
  body { background: #fff; color: #000; }
  .lg-top, .lg-play, footer { display: none; }
  section, .lg-summary, .lg-toc { background: none; border: 1px solid #ccc; }
  section h2, .lg-head h1 { color: #000; text-shadow: none; }
  a { color: #000; }
}