/* Zoblins info pages (about, how to play, privacy): plain readable pages in the game's colours */
:root { --bg:#0e0724; --card:#1a1033; --text:#ece4ff; --muted:#b8a9dc; --acid:#9dff4a; --gold:#ffd76a; --line:rgba(180,150,255,.2); }
* { box-sizing:border-box; }
html { background:var(--bg); }
body { margin:0; min-height:100vh; color:var(--text); font:400 17px/1.65 Fredoka, system-ui, sans-serif;
  background:radial-gradient(1200px 600px at 50% -10%, #2b1a55 0%, var(--bg) 60%) fixed; }
.wrap { max-width:820px; margin:0 auto; padding:24px 20px 60px; }
header { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:18px; }
header img { height:64px; width:auto; }
nav a { color:var(--muted); text-decoration:none; margin-left:16px; font-weight:600; }
nav a:hover, nav a[aria-current] { color:var(--acid); }
h1 { font:400 clamp(36px, 6vw, 54px)/1.1 Creepster, Fredoka, cursive; letter-spacing:2px; color:var(--acid); margin:10px 0 6px; text-shadow:0 0 18px rgba(157,255,74,.35); }
h2 { font-weight:700; font-size:24px; color:var(--gold); margin:34px 0 8px; }
h3 { font-weight:700; font-size:19px; margin:20px 0 4px; }
p, li { color:var(--text); }
.lead { font-size:19px; color:var(--muted); }
a { color:var(--acid); }
.card { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:18px 22px; margin:16px 0; }
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:12px; }
.grid .card { margin:0; }
.grid b { color:var(--acid); }
.play { display:inline-block; margin:18px 0; padding:14px 28px; border-radius:14px; background:linear-gradient(#7be33a, #3fa51a); color:#0b1a04; font-weight:700; font-size:20px; text-decoration:none; box-shadow:0 6px 18px rgba(80,200,40,.35); }
.play:hover { filter:brightness(1.1); }
kbd { display:inline-block; min-width:26px; padding:1px 7px; border-radius:6px; background:#2a1d4d; border:1px solid var(--line); font:600 14px Fredoka; text-align:center; }
footer { margin-top:50px; padding-top:18px; border-top:1px solid var(--line); color:var(--muted); font-size:14px; }
footer a { color:var(--muted); margin-right:14px; }