/* Star Bot Adventures: tokens and chrome shared by every page (hub, games, contact, privacy, stats, maintenance). */
:root{ --bg:#dff1ff; --bg2:#c9e7ff; --card:#ffffff; --ink:#1b2a4a; --muted:#5b6b8a; --line:#c9dcf0; --accent:#2d9cdb; --shadow:0 8px 24px rgba(27,42,74,.12); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg:#0f1a2e; --bg2:#152442; --card:#1a2742; --ink:#eaf2ff; --muted:#a9b8d4; --line:#2c3d5e; --shadow:0 8px 24px rgba(0,0,0,.4); } }
:root[data-theme="dark"]{ --bg:#0f1a2e; --bg2:#152442; --card:#1a2742; --ink:#eaf2ff; --muted:#a9b8d4; --line:#2c3d5e; --shadow:0 8px 24px rgba(0,0,0,.4); }
*{box-sizing:border-box}
[hidden]{display:none!important}
html{min-height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Nunito,"Segoe UI",system-ui,sans-serif;font-weight:700;font-size:16px}
/* Document pages (hub, contact, privacy, stats, maintenance) opt in with <body class="page">: soft gradient, comfortable line height. Games keep the plain background.
   :where() keeps the specificity at plain body, so a page's own body rule still wins. */
body:where(.page){min-height:100vh;background-image:radial-gradient(ellipse at top,var(--bg2),transparent 60%);background-repeat:no-repeat;line-height:1.45}
a{color:inherit}
.app{max-width:1080px;margin:0 auto;padding-block:20px 40px;padding-inline:16px}
header{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
header h1{font-family:Fredoka,Nunito,sans-serif;font-weight:700;font-size:34px;margin:0;display:flex;align-items:center;gap:8px}
header h1 svg{width:40px;height:40px}
.back{margin-left:auto;background:var(--card);color:var(--ink);text-decoration:none;border-radius:999px;padding:10px 16px;font-size:15px;box-shadow:var(--shadow);font-weight:700}
.card{background:var(--card);border-radius:22px;box-shadow:var(--shadow)}
.card h2{font-family:Fredoka,Nunito,sans-serif;font-weight:600;font-size:22px;margin:0 0 12px}
.copy{margin-top:48px;text-align:center;color:var(--muted);font-size:13px;font-weight:700}
.copy a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line)}
.copy a:hover{border-bottom-color:var(--muted)}