/* The Terms of Service and Privacy Policy pages (/terms, /policy): plain static pages beside the game, never loaded by
   it. They wear the game's Stone Rim (client/src/ui/stone-rim.css): frosted glass in a beveled stone rim, a carved
   title plate, Geist for words, Press Start 2P only for standalone numbers at 16px, the white viewfinder for the
   current page. The tokens are copied here, not imported, so nothing in the game's bundle depends on these pages. */
@font-face {
  font-family: 'Geist';
  src: url('/fonts/geist-latin-wght.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist';
  src: url('/fonts/geist-latin-ext-wght.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Press Start 2P';
  src: url('/fonts/press-start-2p-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --sr-font: 'Geist', ui-sans-serif, system-ui, sans-serif;
  --sr-numeral: 'Press Start 2P', ui-monospace, monospace;
  --sr-ink: #EEF3F8;
  --sr-body: #DCE4EC;
  --sr-muted: #AEBBC8;
  --sr-faint: #A5B3C2;
  --sr-panel: rgba(14, 20, 28, .82);
  --sr-glass-light: rgba(12, 17, 24, .72);
  --sr-raised: rgba(255, 255, 255, .08);
  --sr-inset: rgba(2, 5, 9, .55);
  --sr-line: rgba(200, 220, 240, .14);
  --sr-line-hi: rgba(200, 220, 240, .3);
  --sr-rim: #3B4049;
  --sr-rim-hi: #59606B;
  --sr-rim-lo: #1E2227;
  --sr-outline: #0B0E12;
  --sr-accent: #8FD3FF;
  --sr-ok: #8CCB5E;
  --sr-accent-ink: #0F1D07;
  --sr-select: rgba(255, 255, 255, .92);
  --sr-bevel: var(--sr-rim-hi) var(--sr-rim-lo) var(--sr-rim-lo) var(--sr-rim);
  --sr-bevel-raised: var(--sr-rim-hi) var(--sr-rim-lo) var(--sr-rim-lo) var(--sr-rim-hi);
  --sr-bevel-info: #3E5566 #1B2530 #1B2530 #2E4150;
  --gutter: max(16px, 4vw);
  color-scheme: dark;
  font-family: var(--sr-font);
  color: var(--sr-ink);
  background: #0E141C;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

* { box-sizing: border-box; }
html { scroll-padding-top: 24px; }
body { margin: 0; min-height: 100vh; background: transparent; }

/* The world behind the glass: a still from the game, dimmed and softened the way the menu's dialogs soften it. */
.backdrop {
  position: fixed; inset: 0; z-index: -1;
  background: #0E141C url('/menu/clips/caravan-forest-river.jpg') center / cover no-repeat;
}
.backdrop::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6, 10, 16, .55), rgba(6, 10, 16, .78) 40%, rgba(6, 10, 16, .9));
  -webkit-backdrop-filter: blur(7px) saturate(.9); backdrop-filter: blur(7px) saturate(.9);
}

.skip { position: absolute; left: 12px; top: -60px; z-index: 10; padding: 10px 14px; font-weight: 650; color: var(--sr-accent-ink); background: var(--sr-ok); box-shadow: 0 0 0 2px var(--sr-outline); text-decoration: none; }
.skip:focus { top: 12px; }

.page { width: min(820px, 100%); margin: 0 auto; padding: 40px var(--gutter) 56px; display: flex; flex-direction: column; align-items: center; gap: 28px; }

/* The masthead: the game's logo with its firm shadow (4 px straight down, no blur), linking home to the game. */
.logo { display: block; width: min(300px, 70vw); line-height: 0; }
.logo img { display: block; width: 100%; height: auto; filter: drop-shadow(0 4px 0 var(--sr-outline)); }
.logo:focus-visible { outline: 2px solid var(--sr-accent); outline-offset: 6px; }

/* The two pages as rimmed tags; the current one carries the game's white viewfinder. */
.switch { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: 0; padding: 0; list-style: none; }
.switch a {
  position: relative; display: inline-flex; align-items: center; height: 38px; padding: 0 14px;
  font-size: 14px; font-weight: 650; color: var(--sr-muted); text-decoration: none;
  background: var(--sr-glass-light); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 3px solid; border-color: var(--sr-bevel); box-shadow: 0 0 0 2px var(--sr-outline);
}
.switch a:hover { color: var(--sr-ink); background: rgba(40, 48, 58, .8); }
.switch a:focus-visible { outline: 2px solid var(--sr-accent); outline-offset: 3px; }
.switch a[aria-current="page"] { color: var(--sr-ink); background: rgba(255, 255, 255, .1); box-shadow: 0 0 0 2px var(--sr-select), 0 0 16px rgba(255, 255, 255, .12); }
.switch a[aria-current="page"]::after {
  content: ''; position: absolute; inset: -9px; pointer-events: none;
  background:
    linear-gradient(#fff, #fff) 0 0 / 8px 2px no-repeat, linear-gradient(#fff, #fff) 0 0 / 2px 8px no-repeat,
    linear-gradient(#fff, #fff) 100% 0 / 8px 2px no-repeat, linear-gradient(#fff, #fff) 100% 0 / 2px 8px no-repeat,
    linear-gradient(#fff, #fff) 0 100% / 8px 2px no-repeat, linear-gradient(#fff, #fff) 0 100% / 2px 8px no-repeat,
    linear-gradient(#fff, #fff) 100% 100% / 8px 2px no-repeat, linear-gradient(#fff, #fff) 100% 100% / 2px 8px no-repeat;
}

/* The document: one stone panel with its title on a carved plate over the top edge. */
.doc {
  position: relative; width: 100%; margin-top: 22px; padding: 30px clamp(18px, 4.5vw, 44px) 36px;
  background: var(--sr-panel); -webkit-backdrop-filter: blur(16px) saturate(1.15); backdrop-filter: blur(16px) saturate(1.15);
  border: 4px solid; border-color: var(--sr-bevel);
  box-shadow: 0 0 0 2px var(--sr-outline), inset 0 0 0 1px rgba(255, 255, 255, .07), 0 14px 30px rgba(0, 0, 0, .3);
  animation: sr-rise .36s steps(4) both;
}
.plate {
  position: absolute; left: 14px; top: -24px; display: inline-flex; align-items: center; height: 42px; margin: 0; padding: 0 16px;
  font-size: 21px; font-weight: 650; letter-spacing: -.015em; line-height: 1.1; color: var(--sr-ink);
  background: var(--sr-rim); border: 3px solid; border-color: var(--sr-bevel-raised);
  box-shadow: 0 0 0 2px var(--sr-outline), 0 4px 0 rgba(0, 0, 0, .25);
}
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 16px 0 0; font-size: 12.5px; font-weight: 600; color: var(--sr-muted); font-variant-numeric: tabular-nums; }
.meta .dot { color: var(--sr-faint); opacity: .6; }
.chip { display: inline-flex; align-items: center; height: 22px; padding: 0 7px; font-size: 11.5px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: #CFEBFF; background: rgba(143, 211, 255, .14); box-shadow: inset 0 0 0 1px rgba(143, 211, 255, .35); }

.label { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 10.5px; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; line-height: 1; color: var(--sr-faint); }
.label::after { content: ''; flex: 1; height: 1px; background: var(--sr-line); }

/* "In short": the plain version first, in an inset well with the info bevel. */
.short { margin: 26px 0 0; padding: 16px 18px 18px; background: var(--sr-inset); border: 3px solid; border-color: var(--sr-bevel-info); box-shadow: inset 2px 2px 0 rgba(0, 0, 0, .35); }
.short ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.short li { position: relative; padding-left: 16px; font-size: 14.5px; line-height: 1.5; color: var(--sr-body); text-wrap: pretty; }
.short li::before { content: ''; position: absolute; left: 1px; top: .6em; width: 5px; height: 5px; background: var(--sr-accent); }

/* Contents: a sunken well of numbered rows. */
.toc { margin: 22px 0 0; padding: 16px 18px; background: rgba(2, 5, 9, .35); box-shadow: inset 2px 2px 0 rgba(0, 0, 0, .35), inset -1px -1px 0 rgba(255, 255, 255, .06); }
.toc ol { margin: 0; padding: 0; list-style: none; columns: 2 220px; column-gap: 28px; }
.toc li { break-inside: avoid; }
.doc .toc a { display: flex; align-items: baseline; gap: 10px; padding: 5px 0; font-size: 14px; font-weight: 550; color: var(--sr-body); text-decoration: none; }
.doc .toc a .n { flex: none; width: 2.2em; font-size: 12px; font-weight: 650; color: var(--sr-faint); font-variant-numeric: tabular-nums; }
.doc .toc a:hover { color: var(--sr-ink); }
.doc .toc a:hover .n { color: var(--sr-accent); }
.doc .toc a:focus-visible { outline: 2px solid var(--sr-accent); outline-offset: 2px; }

/* The sections. A section's number is a standalone number, so it is Press Start 2P at 16px, on whole pixels. */
.doc section { margin-top: 34px; scroll-margin-top: 24px; }
.doc section + section { padding-top: 28px; border-top: 1px solid var(--sr-line); }
.doc h2 { display: flex; align-items: baseline; gap: 14px; margin: 0 0 12px; font-size: 19px; font-weight: 650; letter-spacing: -.015em; line-height: 1.3; color: var(--sr-ink); text-wrap: balance; }
.doc h2 .n { flex: none; font-family: var(--sr-numeral); font-size: 16px; font-weight: 400; line-height: 16px; color: var(--sr-accent); text-shadow: 1px 1px 0 rgba(0, 0, 0, .85); -webkit-font-smoothing: none; }
.doc h3 { margin: 20px 0 8px; font-size: 15px; font-weight: 650; color: var(--sr-ink); }
.doc p, .doc li { font-size: 15px; line-height: 1.62; color: var(--sr-body); text-wrap: pretty; }
.doc p { margin: 0 0 12px; max-width: 70ch; }
.doc section ul { margin: 0 0 12px; padding: 0; list-style: none; display: grid; gap: 6px; max-width: 70ch; }
.doc section li { position: relative; padding-left: 16px; }
.doc section li::before { content: ''; position: absolute; left: 1px; top: .68em; width: 4px; height: 4px; background: var(--sr-faint); opacity: .75; }
.doc strong { color: var(--sr-ink); font-weight: 650; }
.doc a { color: var(--sr-accent); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.doc a:focus-visible { outline: 2px solid var(--sr-accent); outline-offset: 2px; }
.doc code { font-family: var(--sr-font); font-size: .92em; font-weight: 600; padding: 1px 5px; color: var(--sr-ink); background: var(--sr-inset); }

/* A table of what we keep, for the privacy page. */
.table-wrap { overflow-x: auto; margin: 4px 0 14px; }
.doc table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 14px; }
.doc th { padding: 9px 12px; text-align: left; font-size: 10.5px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--sr-faint); background: rgba(2, 5, 9, .45); }
.doc td { padding: 10px 12px; vertical-align: top; line-height: 1.5; color: var(--sr-body); border-top: 1px solid var(--sr-line); }
.doc td:first-child { font-weight: 650; color: var(--sr-ink); white-space: nowrap; }


.foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; width: 100%; font-size: 12.5px; font-weight: 600; color: var(--sr-muted); }
.foot nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.foot a { color: var(--sr-muted); text-decoration: none; }
.foot a:hover { color: var(--sr-ink); text-decoration: underline; text-underline-offset: 2px; }
.foot a:focus-visible { outline: 2px solid var(--sr-accent); outline-offset: 3px; }

/* The way back: the menu's green primary button. */
.play {
  display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 18px;
  font-size: 15px; font-weight: 650; color: var(--sr-accent-ink); text-decoration: none; background: var(--sr-ok);
  box-shadow: 0 0 0 2px var(--sr-outline), inset 3px 3px 0 rgba(255, 255, 255, .3), inset -3px -4px 0 rgba(0, 0, 0, .26);
}
.play:hover { background: #9AD66E; }
.play:active { background: #7FBC52; transform: translateY(1px); box-shadow: 0 0 0 2px var(--sr-outline), inset 3px 3px 0 rgba(0, 0, 0, .24), inset -2px -2px 0 rgba(255, 255, 255, .18); }
.play:focus-visible { outline: 2px solid var(--sr-accent); outline-offset: 3px; }
.play svg { width: 16px; height: 16px; }

@keyframes sr-rise { from { transform: translateY(10px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .doc { animation: none; } }

@media (max-width: 560px) {
  .page { padding-top: 28px; gap: 22px; }
  .doc { margin-top: 26px; }
  .plate { left: 8px; font-size: 18px; height: 38px; padding: 0 12px; }
  .doc h2 { gap: 10px; font-size: 17.5px; }
  .foot { justify-content: center; text-align: center; }
}
@media print {
  .backdrop, .switch, .play, .skip { display: none; }
  :root, body { background: #fff; color: #000; }
  .doc { background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; animation: none; }
  .doc p, .doc li, .doc td { color: #000; }
}