/* Shared look for the index pages and books. Games and apps may use it or bring their own style.css. */
:root { --ink:#202124; --paper:#faf9f6; --blue:#2678bb; --amber:#f2b134; --green:#6bbe45; --card:#fff; --line:#e4e1da; }
@media (prefers-color-scheme: dark) { :root { --ink:#f1efe9; --paper:#17181b; --card:#222428; --line:#34363b; --blue:#6fb2ee; } }
* { box-sizing: border-box; }
body { margin:0; font:18px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif; color:var(--ink); background:var(--paper); }
a { color:var(--blue); }
header.top, main, footer { max-width: 760px; margin: 0 auto; padding: 0 20px; }
header.top { display:flex; gap:16px; align-items:center; padding-top:20px; padding-bottom:8px; flex-wrap:wrap; }
header.top a { text-decoration:none; font-weight:700; }
h1 { font-size:2rem; line-height:1.2; margin:1.2em 0 .3em; }
.lead { opacity:.8; margin-top:0; }
.grid { display:grid; gap:14px; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); padding:0; list-style:none; }
.card { display:block; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px; text-decoration:none; color:inherit; }
.card:hover { border-color:var(--amber); transform:translateY(-2px); }
.card b { display:block; font-size:1.1rem; }
.tag { display:inline-block; font-size:.75rem; padding:1px 8px; border-radius:99px; background:var(--amber); color:#202124; margin-top:6px; }
article p { margin:1em 0; }
.pager { display:flex; justify-content:space-between; gap:12px; margin:2em 0; }
footer { opacity:.6; font-size:.85rem; padding-bottom:30px; margin-top:40px; }