/* Shared top bar + footer (the markup comes from tools/layout.html via tools/sync_layout.py).
   Every rule is wrapped in :where() so it has zero specificity: pages with their own
   header styles (home page, sub.css) keep them, pages without get these defaults. */
:where(header){position:sticky;top:0;z-index:60;background:rgba(0,0,0,.5);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.08)}
:where(header) :where(.wrap){display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap;max-width:none;padding:10px clamp(16px,2.5vw,40px)}
:where(header .brand){font:400 26px "Sniglet",system-ui,sans-serif;color:var(--sun,#ffd65c);text-decoration:none}
:where(header nav){margin-left:auto;display:flex;flex-wrap:wrap;gap:2px;align-items:center}
:where(header nav a){white-space:nowrap;font:400 16px "Sniglet",system-ui,sans-serif;text-decoration:none;color:var(--muted,#a9c1cc);padding:8px 11px;border-radius:10px}
:where(header nav a:hover,header nav a.on){color:var(--text,#eef6f9);background:var(--card,rgba(255,255,255,.06))}
:where(header nav a.on){color:var(--sun,#ffd65c)}
:where(a.navplay){text-decoration:none}
:where(.navplay){background:linear-gradient(135deg,var(--sun,#ffd65c),var(--sun2,#ff9f45));color:#1b1405;font:700 15px "Sniglet",system-ui,sans-serif;white-space:nowrap;padding:8px 12px;border-radius:10px}
:where(.navsoon){cursor:not-allowed;opacity:.85}
:where(footer){background:rgba(0,0,0,.6);border-top:1px solid rgba(255,255,255,.08);color:var(--muted,#a9c1cc);font-size:14px;padding:26px 0}
:where(footer) :where(.wrap){display:flex;flex-wrap:wrap;gap:12px 18px;justify-content:space-between;align-items:center}
:where(footer a){color:var(--muted,#a9c1cc)}
:where(footer .links){display:flex;flex-wrap:wrap;gap:6px 14px}
footer .links a{margin:0}
/* The top bar always spans the full width (some pages limit .wrap to a narrow column) and stays on one
   line on desktop, so the brand, the menu and the Steam button never stack on top of each other. */
header>.wrap{max-width:none!important;margin-left:0!important;margin-right:0!important;width:auto!important}
@media (min-width:1320px){header>.wrap{flex-wrap:nowrap!important}header nav{flex-wrap:nowrap!important}}
@media (min-width:1320px) and (max-width:1500px){header nav a{padding:8px 7px!important;font-size:15px!important}}