/* Shared style of every page of the About site (public/about/**). Plain HTML, no Phaser. The header is built by header.js. */
:root { --bg:#242b3d; --panel:#2f3850; --txt:#f5f2ea; --dim:#b3bac8; --accent:#e0b559; }
@media (prefers-color-scheme: light) { :root { --bg:#f6f3ea; --panel:#fffdf7; --txt:#1c1a15; --dim:#5d5a50; --accent:#8a6a1f; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--txt); font:16px/1.6 Georgia, 'Times New Roman', serif; }
main { max-width:760px; margin:0 auto; padding:24px 16px 48px; }
h1 { font-size:28px; margin:8px 0 4px; } h2 { font-size:19px; margin:28px 0 6px; color:var(--accent); }
h3 { font-size:16px; margin:20px 0 4px; }
p, li { margin:6px 0; } ul { padding-left:22px; } a { color:var(--accent); }
.meta { color:var(--dim); font-size:14px; }
.soon { color:var(--dim); }
nav.topics ul { list-style:none; padding-left:0; }
section { scroll-margin-top:72px; }

/* ---- header: back arrow, address of the game (link), language button */
.site-header { position:sticky; top:0; z-index:20; background:var(--panel); border-bottom:1px solid var(--accent); box-shadow:0 2px 12px rgba(0,0,0,.28); }
.site-header .bar { max-width:760px; margin:0 auto; padding:6px 12px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:6px; min-height:56px; }
.site-header .home { grid-column:2; justify-self:center; }
.site-header .nav-left { grid-column:1; justify-self:start; display:flex; gap:2px; }
.site-header .home, .site-header .back { display:flex; align-items:center; justify-content:center; width:44px; height:44px; flex:none; border-radius:50%; color:var(--accent); text-decoration:none; }
.site-header .home:hover, .site-header .home:focus-visible, .site-header .back:hover, .site-header .back:focus-visible { background:rgba(212,168,75,.18); }
.site-header .back svg, .site-header .home svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.site-header .site { grid-column:2; text-align:center; color:var(--accent); font-size:15px; text-decoration:none; min-height:44px; line-height:44px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.site-header .site:hover, .site-header .site:focus-visible { text-decoration:underline; }

#lang-select { position:relative; grid-column:3; justify-self:end; }
#lang-select button { white-space:nowrap; font:inherit; font-size:15px; color:var(--txt); background:transparent; border:1px solid var(--accent); border-radius:8px; min-height:44px; padding:0 12px; cursor:pointer; }
#lang-select button:hover { background:rgba(212,168,75,.14); }
#lang-select ul { position:absolute; z-index:30; right:0; top:100%; margin:6px 0 0; padding:4px; list-style:none; min-width:100%; background:var(--panel); border:1px solid var(--accent); border-radius:8px; box-shadow:0 6px 18px rgba(0,0,0,.35); }
#lang-select ul[hidden] { display:none; }
#lang-select li { margin:0; }
#lang-select li a, #lang-select li span { display:flex; align-items:center; min-height:44px; padding:0 12px; border-radius:6px; white-space:nowrap; font-size:15px; text-decoration:none; }
#lang-select li a { color:var(--txt); } #lang-select li a:hover { background:rgba(212,168,75,.18); }
#lang-select li span { color:var(--dim); opacity:.6; }
#lang-select li.current a { color:var(--accent); font-weight:bold; }
@media (max-width:480px) { .site-header .bar { grid-template-columns:auto 1fr auto; padding:6px 8px; } .site-header .site { font-size:14px; } }

/* ---- About index: the group titles (General, User, ...) look different from the section titles of the sub-pages */
nav.topics h2 { font-size:22px; color:var(--txt); text-transform:uppercase; letter-spacing:.08em; border-bottom:2px solid var(--accent); padding-bottom:4px; margin:32px 0 10px; }
nav.topics h2:first-child { margin-top:8px; }