/* Legal / policy pages — skinned to match the GAME's identity so the site and
 * the game read as one product (see .ai/UI_BEAUTIFY_PLAN.md §2). Mirrors the
 * token set + "mech-cockpit" language of src/style.css: carbon surfaces, an
 * amber accent, square corners, targeting-bracket panels, Chakra Petch display
 * headings + IBM Plex Mono meta. Dark, on-brand (no more SaaS-docs blue/light).
 * Self-contained apart from the two brand webfonts. */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  color-scheme: dark;
  --bg: #131740;
  --panel: rgba(24, 28, 68, 0.94);
  --raised: rgba(255, 255, 255, 0.08);
  --text: #f4f6ff;
  --muted: #a7aed4;
  --border: rgba(255, 255, 255, 0.18);
  --amber: #ffd23e;
  --amber-glow: rgba(255, 210, 62, 0.4);
  --phosphor: #46e690;
  --font-display: 'Fredoka', 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
  /* Long legal copy stays in a neutral, highly legible sans for readability. */
  --font-body: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background:
    radial-gradient(900px 520px at 15% -5%, rgba(59, 116, 255, 0.28), transparent 60%),
    radial-gradient(900px 560px at 90% 10%, rgba(138, 92, 245, 0.25), transparent 62%),
    var(--bg);
  color: var(--text);
  font: 16px/1.65 var(--font-body);
  -webkit-text-size-adjust: 100%;
}

.wrap { max-width: 820px; margin: 0 auto; padding: 24px 20px 64px; }

/* Site header: game-style wordmark (white CHAMELEON / amber PLAY) + a tactical
 * "back to game" control. The [[BRAND]] token renders as-is; when it is the
 * literal "ChameleonPlay" the split colour reads through the .brand styling. */
header.site {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding-bottom: 16px; margin-bottom: 24px; border-bottom: 1px solid var(--border);
}
header.site .brand {
  font-family: var(--font-display);
  font-weight: 700; font-size: 20px;
  color: var(--text);
}
header.site a.back {
  font-family: var(--font-display);
  font-size: 14px; font-weight: 600;
  color: #fff; text-decoration: none;
  background: linear-gradient(180deg, #6b9bff, #3b74ff);
  border: 2px solid rgba(255, 255, 255, 0.35); border-radius: 12px; padding: 8px 16px;
  box-shadow: 0 3px 0 rgba(10, 20, 80, 0.6);
  transition: filter 0.15s, transform 0.1s, box-shadow 0.1s;
}
header.site a.back:hover { filter: brightness(1.12); transform: translateY(-1px); }
header.site a.back:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(10, 20, 80, 0.6); }

h1 {
  font-family: var(--font-display);
  font-size: 30px; margin: 8px 0 4px;
}
h2 {
  font-family: var(--font-display);
  font-size: 19px; margin: 28px 0 8px;
  color: var(--amber);
}
p, li { color: var(--text); }
.muted, .updated { color: var(--muted); font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.04em; }
.updated { margin-top: 0; text-transform: uppercase; }
a { color: var(--phosphor); }

/* Content panel: glossy rounded game card (matches the in-game .lb-card). */
.card {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 30%),
    var(--panel);
  border: 2px solid var(--border);
  border-radius: 16px;
  padding: 8px 24px 20px;
  box-shadow: 0 12px 36px rgba(5, 8, 30, 0.55);
}

ul { padding-left: 20px; }
li { margin: 4px 0; }

.notice {
  background: rgba(255, 210, 62, 0.12);
  border: 2px solid var(--amber-glow);
  border-radius: 12px; padding: 12px 16px; margin: 18px 0; font-size: 15px;
}

footer.site {
  margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--border);
  color: var(--muted); font-family: var(--font-mono); font-size: 13px;
}
footer.site nav { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 8px; }
footer.site nav a {
  color: var(--muted); text-decoration: none;
  text-transform: uppercase; letter-spacing: 0.08em; font-size: 12px;
}
footer.site nav a:hover { color: var(--amber); }

table { width: 100%; border-collapse: collapse; margin: 12px 0; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); }
th {
  color: var(--muted); font-family: var(--font-mono);
  font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em;
}