body{--hero-text:#f5ecd6;--hero-muted:#c7d7d3;--panel:#dfd1ad;--muted:#5b665e;--accent:#91652f;--rule:#d4c8ad}
body[data-time="alba"]{--sea:#633f51;--paper:#fbefdf;--ink:#45343b;--gold:#ffcf9b;--panel:#eed6c3;--muted:#65525a;--accent:#864a35;--rule:#d8b8ad}
body[data-time="giorno"]{--sea:#b9ddd9;--paper:#fff6df;--ink:#203e3e;--gold:#f3cc7e;--hero-text:#173c40;--hero-muted:#2d5154;--panel:#eddfbb;--muted:#46605a;--accent:#805720;--rule:#cecfb4}
body[data-time="tramonto"]{--sea:#703e35;--paper:#fae6ca;--ink:#49332b;--gold:#ffd08a;--panel:#eac49e;--muted:#6c4c3c;--accent:#914421;--rule:#d4ae8b}
body[data-time="notte"]{--sea:#101f30;--paper:#1c2d3b;--ink:#efe4ce;--gold:#e4bc74;--panel:#293d4a;--muted:#c5cdd0;--accent:#e4bc74;--rule:#4d606b}
header,.hero,footer{color:var(--hero-text)}.hero p,footer{color:var(--hero-muted)}.hero .button.secondary{color:var(--hero-text);border-color:var(--hero-muted)}.hero-art figcaption{color:var(--hero-text);background:var(--sea);padding:3px 7px}.museum{background:var(--panel)}.museum .button{color:var(--hero-text)}.game p{color:var(--muted)}.game .number,.eyebrow,.compass{color:var(--accent)}.game{border-color:var(--accent)}.welcome,.ad{border-color:var(--rule)}.ad{color:var(--muted)}dialog{color:var(--ink);background:var(--paper)}dialog button{color:var(--hero-text)}.time-controls{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:12px 6%;background:var(--panel);font:12px/1.6 Arial,sans-serif}.time-controls select{font:inherit;padding:7px 10px;background:var(--paper);color:var(--ink);border:1px solid var(--accent);border-radius:3px}.time-controls output{color:var(--ink)}.hero-art img{border-radius:3px}

/* Separate text accents from decorative gold for readable daylight themes. */
body{--hero-accent:var(--gold)}
body[data-time="giorno"]{--hero-accent:#70440e}
header .brand small,header nav a:hover,.hero .eyebrow,.hero h1 em{color:var(--hero-accent)}
header nav a[aria-current="page"]{border-color:var(--hero-accent)}
.game-art{display:block;width:100%;height:230px;object-fit:contain;background:var(--panel);margin:0 0 18px;padding:12px}
.hero .button.secondary:hover{background:var(--hero-text);color:var(--sea)}
@media(max-width:720px){.game-art{height:245px}}
.time-controls button{font:inherit;padding:8px 12px;border:1px solid var(--accent);border-radius:3px;background:var(--sea);color:var(--hero-text)}.time-controls button:hover{background:var(--paper);color:var(--ink)}.time-controls button[hidden]{display:none}.hero-art img{aspect-ratio:16/9;object-fit:contain}