/* Riventale info pages (/about/, /how-to-play/, /faq/, /lore/): plain HTML, no JS, same pixel style as the game menus.
   Tokens copied from style.css (Early screens). The font is the game's own Pixelify Sans (OFL, public/fonts). */
@font-face { font-family: 'Pixelify Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/pixelify-sans-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Pixelify Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/pixelify-sans-latin-700-normal.woff2) format('woff2'); }

:root {
  --font: 'Pixelify Sans', 'Courier New', Courier, monospace;
  --ink: #0a0716; --night: #140f2b; --panel: #1d1640; --line: #4a3f80; --gold: #ffd23f; --gold-dark: #d99a12; --muted: #b9b0d8;
  --text: #ece7ff;
  --water: #5ab4ff; --fire: #ff6a3d; --earth: #4fd06a; --wind: #fff1b8;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--ink); }
body {
  margin: 0; min-height: 100vh; font-family: var(--font); font-size: 18px; line-height: 1.6; color: var(--text);
  background: radial-gradient(ellipse at 50% 0%, #2a1f5c 0%, #140f2b 45%, var(--ink) 100%) fixed, var(--ink);
}
a { color: var(--gold); text-underline-offset: 3px; }
a:hover { color: #fff0a8; }
a:focus-visible, .play:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.wrap { width: min(820px, 100% - 32px); margin: 0 auto; }

/* Header: crest + wordmark home link, then the page links */
.top { padding: 18px 0 8px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand img { display: block; image-rendering: pixelated; }
.brand .crest { width: 40px; height: 40px; }
.brand .word { height: 30px; width: auto; }
.top nav { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 16px; }
.top nav a { color: var(--muted); text-decoration: none; padding: 4px 0; border-bottom: 2px solid transparent; }
.top nav a:hover, .top nav a[aria-current="page"] { color: var(--gold); border-bottom-color: var(--gold); }

main { padding: 12px 0 32px; }
h1, h2, h3 { line-height: 1.2; text-shadow: 2px 2px 0 var(--ink); }
h1 { font-size: clamp(30px, 7vw, 44px); color: var(--gold); margin: 18px 0 8px; letter-spacing: 0.5px; }
h2 { font-size: 26px; color: var(--gold); margin: 34px 0 10px; }
h3 { font-size: 21px; color: #f2edff; margin: 22px 0 6px; }
.lead { font-size: 20px; color: #d8d0f0; margin: 0 0 18px; }
p, li, dd { color: var(--text); }
.muted { color: var(--muted); }
strong { color: #fff; }

/* Panels: the menus' night-purple slab */
.panel {
  background: linear-gradient(180deg, #241b4d 0%, var(--panel) 100%); border: 3px solid var(--line);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.05), 0 5px 0 var(--ink); padding: 16px 20px; margin: 16px 0;
}
.panel > :first-child { margin-top: 0; }
.panel > :last-child { margin-bottom: 0; }

/* Facts list (AEO: short, quotable lines) */
.facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0; }
.facts dt { color: var(--gold); font-weight: 700; }
.facts dd { margin: 0; }
@media (max-width: 560px) { .facts { grid-template-columns: 1fr; } .facts dd { margin-bottom: 8px; } }

/* Controls table */
table { width: 100%; border-collapse: collapse; margin: 8px 0; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 2px solid #2c2358; vertical-align: top; }
th { color: var(--gold); font-weight: 700; }
kbd {
  font-family: var(--font); font-size: 15px; display: inline-block; padding: 1px 7px; margin: 1px 0; color: #fff;
  background: #2c2358; border: 2px solid var(--line); box-shadow: 0 2px 0 var(--ink);
}

/* FAQ: question as a heading, answer straight after */
.faq h2 { font-size: 22px; margin-top: 28px; }
.faq h2 + p { margin-top: 4px; }

/* The four Keepers */
.keepers { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 14px 0; padding: 0; list-style: none; }
.keepers li { background: var(--panel); border: 3px solid var(--line); border-top: 6px solid var(--c, var(--gold)); padding: 12px 14px; box-shadow: 0 5px 0 var(--ink); }
.keepers b { display: block; color: var(--c, var(--gold)); font-size: 19px; }
.keepers span { color: var(--muted); font-size: 16px; }
.water { --c: var(--water); } .fire { --c: var(--fire); } .earth { --c: var(--earth); } .wind { --c: var(--wind); }

/* The big gold button, copied from .menu-btn.primary */
.cta { margin: 26px 0; text-align: center; }
.play {
  display: inline-block; font-family: var(--font); font-size: 28px; font-weight: 700; letter-spacing: 0.5px; text-decoration: none;
  color: #2a1600; text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.35); padding: 14px 44px;
  background: linear-gradient(180deg, #ffe680 0%, var(--gold) 45%, var(--gold-dark) 100%); border: 3px solid #fff3b0;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35), inset 0 -4px 0 rgba(140, 80, 0, 0.45), 0 5px 0 #5a3200, 0 0 24px rgba(255, 210, 63, 0.25);
  transition: transform 0.12s, box-shadow 0.12s;
}
.play:hover { color: #2a1600; transform: translateY(-2px); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.45), inset 0 -4px 0 rgba(140, 80, 0, 0.45), 0 7px 0 #5a3200, 0 0 30px rgba(255, 210, 63, 0.5); }
.play:active { transform: translateY(3px); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35), 0 2px 0 #5a3200; }
.cta small { display: block; margin-top: 12px; color: var(--muted); font-size: 15px; }

footer { border-top: 3px solid #2c2358; padding: 18px 0 30px; font-size: 15px; color: var(--muted); }
footer nav { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-bottom: 6px; }
footer a { color: var(--muted); }

@media (prefers-reduced-motion: reduce) { .play { transition: none; } }