/* The plain pages search reads (tools/site-pages.js writes them): the game's
   colours and its title face, nothing that moves. */
@font-face { font-family: Cinzel; src: url(../fonts/cinzel-latin.woff2) format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: Nunito; src: url(../fonts/nunito-latin.woff2) format("woff2"); font-weight: 200 1000; font-display: swap; }
:root {
  --bg: #0c0a14; --panel: #1b1530; --line: rgba(150,120,220,.22);
  --ink: #ece9f6; --dim: #b9b3d4; --accent: #a970ff; --gold: #ffd166;
}
* { box-sizing: border-box; }
html { color-scheme: dark; }
body {
  margin: 0; color: var(--ink);
  background: radial-gradient(900px 500px at 50% -10%, rgba(169,112,255,.2), transparent 60%), var(--bg);
  font: 17px/1.65 Nunito, "Segoe UI", system-ui, -apple-system, sans-serif;
}
a { color: var(--gold); }
img { max-width: 100%; height: auto; display: block; }
.top { display: flex; align-items: center; gap: 16px; max-width: 980px; margin: 0 auto; padding: 14px 16px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; font: 700 16px Cinzel, Georgia, serif; }
.top nav { display: flex; gap: 14px; margin-left: auto; }
.top nav a { color: var(--dim); text-decoration: none; font-size: 15px; }
.top nav a:hover { color: var(--ink); }
.wrap { max-width: 760px; margin: 0 auto; padding: 12px 16px 40px; }
h1 { font: 800 clamp(30px, 6vw, 44px)/1.15 Cinzel, Georgia, serif; margin: 10px 0 14px; color: var(--gold); }
h2 { font: 700 22px/1.3 Cinzel, Georgia, serif; margin: 36px 0 10px; }
.lead { font-size: 19px; color: var(--ink); margin: 0 0 18px; }
.crumbs { font-size: 14px; color: var(--dim); }
.crumbs a { color: var(--dim); }
.shot img { border-radius: 12px; border: 1px solid var(--line); }
.btn { display: inline-block; padding: 12px 22px; border-radius: 10px; background: var(--accent); color: #fff; font-weight: 800; text-decoration: none; }
.btn:hover { filter: brightness(1.12); }
.btn.small { padding: 6px 14px; font-size: 15px; }
.cta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin: 18px 0; }
.cta span { color: var(--dim); font-size: 15px; }
li { margin: 6px 0; }
dt { font-weight: 800; margin-top: 12px; }
dd { margin: 0; color: var(--dim); }
.cards { list-style: none; padding: 0; margin: 12px 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.cards li { margin: 0; }
.cards a { display: block; height: 100%; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; color: var(--ink); text-decoration: none; }
.cards a:hover { border-color: var(--accent); }
.cards b { display: block; padding: 10px 12px 2px; line-height: 1.3; }
.cards span { display: block; padding: 0 12px 12px; color: var(--dim); font-size: 14.5px; line-height: 1.4; }
.foot { border-top: 1px solid var(--line); padding: 20px 16px 32px; text-align: center; color: var(--dim); font-size: 14px; }
.foot nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; margin-bottom: 8px; }
.foot a { color: var(--dim); }