/* Shared styling for Stix War legal/policy + about pages. Faction-aware Y2K/XP
   theme matching the store: GIFSTIX = chrome/gold/XP-desktop, MEMESTIX = neon-dark.
   Readable prose inside an XP-window panel. */
:root {
  --pixel: 'Press Start 2P', monospace;
  --page-bg:
    radial-gradient(120% 70% at 50% 118%, #7bbf3a 0%, #5fa92f 30%, transparent 62%),
    linear-gradient(180deg, #2f6fc4 0%, #5a9bdc 34%, #8fc3ea 58%, #b9d66a 73%, #79b53e 100%);
  --page-bg-color: #5a9bdc;
  --win: #ece9d8; --bvl-hi: #ffffff; --bvl-lo: #808080;
  --header-top: #f3f1e7; --header-bot: #c9c4b4;
  --ink: #161616; --muted: #4a4a3e; --line: #9a9684;
  --title: #02007f; --gold-ink: #7a5600; --accent: #FFD700;
  --hero-ink: #f2f6ff;
}
html[data-faction='unc'] {
  --page-bg:
    radial-gradient(circle at 50% -8%, rgba(255,226,61,0.14), transparent 52%),
    radial-gradient(rgba(255,255,255,0.03) 1px, transparent 1.5px),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 3px);
  --page-bg-color: #08080d;
  --win: #16161f; --bvl-hi: #3c3c50; --bvl-lo: #000000;
  --header-top: #16161f; --header-bot: #0e0e14;
  --ink: #f4f4fb; --muted: #a6a6b6; --line: #33333f;
  --title: #ffe23d; --gold-ink: #ffe23d; --accent: #ffe23d;
  --hero-ink: #d6d6e6;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--page-bg) fixed; background-color: var(--page-bg-color); color: var(--ink);
  font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased;
}
a { color: var(--title); text-decoration: none; }
a:hover { text-decoration: underline; }

.store-header { position: sticky; top: 0; z-index: 30; background: linear-gradient(var(--header-top), var(--header-bot)); border-bottom: 2px solid var(--bvl-hi); box-shadow: 0 2px 0 var(--bvl-lo); }
.store-header nav { max-width: 900px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; }
.brand { font-family: var(--pixel); font-size: 13px; color: var(--title); text-decoration: none; }
.navlinks { display: flex; gap: 20px; font-size: 14px; }
.navlinks a { color: var(--muted); text-decoration: none; }
.navlinks a:hover { color: var(--ink); }

.policy {
  max-width: 800px; margin: 28px auto; padding: 34px 30px 44px;
  background: var(--win); border: 2px solid; border-color: var(--bvl-hi) var(--bvl-lo) var(--bvl-lo) var(--bvl-hi);
  border-radius: 5px; box-shadow: 3px 3px 0 rgba(0,0,0,0.3);
}
.policy .eyebrow { font-family: var(--pixel); font-size: 9px; letter-spacing: 0.12em; color: var(--gold-ink); text-transform: uppercase; margin: 0 0 14px; }
.policy h1 { font-family: var(--pixel); font-size: clamp(15px, 3vw, 22px); line-height: 1.4; color: var(--title); margin: 0 0 8px; }
.policy .updated { color: var(--muted); font-size: 13px; margin: 0 0 26px; }
.policy h2 { font-size: 17px; font-weight: 700; color: var(--ink); margin: 30px 0 10px; }
.policy p, .policy li { color: var(--muted); font-size: 15px; line-height: 1.75; }
.policy p { margin: 0 0 14px; }
.policy ul { margin: 0 0 16px; padding-left: 20px; }
.policy li { margin: 0 0 8px; }
.policy b { color: var(--ink); }
.policy .review-note { margin: 0 0 28px; padding: 12px 15px; border: 1px solid var(--line); border-radius: 4px; background: color-mix(in srgb, var(--win) 70%, var(--page-bg-color)); color: var(--muted); font-size: 13px; line-height: 1.6; }

footer.store-footer { padding: 26px 20px 36px; text-align: center; color: var(--hero-ink); font-size: 12px; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
footer.store-footer .links { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 12px; }
footer.store-footer .links a { color: var(--hero-ink); text-decoration: none; }
footer.store-footer .links a:hover { text-decoration: underline; }

/* mobile correctness: safe-area insets + bigger touch targets */
.store-header { padding-top: env(safe-area-inset-top, 0px); }
.navlinks a { padding: 8px 2px; display: inline-flex; align-items: center; }
@media (max-width: 620px) { .policy { margin: 18px 12px; padding: 28px 20px 40px; } }