/*
  The game pages' nav, in the lobby's family (index.html's fun layer, Derek 2026-10-16: "warm and cute", not the
  cool dark bar). A floating warm-cream pill with a soft warm lift, the Fraunces wordmark at its SOFT + WONK end,
  deep-teal ink, round soft controls that pop a little, coral for "on". One file, linked by every game page after
  its own <style>; it only restyles header.top, so each page's layout, sizes and breakpoints still hold.
  A page sets --nav-accent: the second word of its wordmark (each game keeps its own colour; ≥4.5:1 on the cream).
  Text tokens are the lobby's (--text #06404a, --muted #2f6068, --coral-ink #b3332a), every one ≥4.5:1 on the cream.
*/
:root{--nav-cream:#fffdf8;--nav-ink:#06404a;--nav-muted:#2f6068;--nav-soft:#f3eee4;--nav-coral:#ff6f5e;--nav-on-coral:#03303a;--nav-coral-ink:#b3332a;--nav-shadow:93,72,54}
header.top{background:transparent;color:var(--nav-ink);padding:8px 10px 0;position:relative;z-index:10}
header.top .in{background:rgba(255,253,248,.96);border-radius:999px;box-shadow:0 12px 30px -12px rgba(var(--nav-shadow),.4),inset 0 0 0 1px rgba(var(--nav-shadow),.07);padding-top:6px;padding-bottom:6px;min-height:50px}
header.top .brand{color:var(--nav-ink);font-family:Fraunces,Georgia,serif;font-weight:650;font-variation-settings:"SOFT" 100,"WONK" 1;letter-spacing:-.01em}
header.top .brand span{color:var(--nav-accent,var(--nav-coral-ink))}
header.top .brand img{filter:drop-shadow(0 2px 5px rgba(6,64,74,.25))}
/* round soft controls: a warm pill that lifts a little; coral when it's on */
header.top .snd,header.top .icon-btn{background:var(--nav-soft);color:var(--nav-ink);border:0;box-shadow:0 5px 12px -7px rgba(var(--nav-shadow),.5),inset 0 0 0 1.5px rgba(6,64,74,.1);transition:transform .3s cubic-bezier(.34,1.56,.64,1),background .2s}
header.top .snd:hover,header.top .icon-btn:hover{transform:translateY(-1px) scale(1.06)}
header.top .snd:active,header.top .icon-btn:active{transform:scale(.94);transition-duration:.1s}
header.top .snd[aria-pressed="false"]{color:var(--nav-muted)}
header.top .snd[aria-pressed="true"]{background:linear-gradient(180deg,#ff8676,#ff6a58);color:var(--nav-on-coral);box-shadow:0 6px 14px -6px rgba(255,90,70,.5),inset 0 1px 0 rgba(255,255,255,.45)}
header.top .snd:focus-visible,header.top .icon-btn:focus-visible,header.top .brand:focus-visible{outline:2px solid var(--nav-coral-ink);outline-offset:3px}
/* the little readouts in the pill (time / moves / score, best) */
header.top .stats{color:var(--nav-muted)}
header.top .stats b{color:var(--nav-ink)}
header.top .best{color:var(--nav-muted)}
header.top .best b{color:var(--nav-accent,var(--nav-coral-ink))}
@media (prefers-reduced-motion:reduce){header.top .snd,header.top .icon-btn{transition:none}header.top .snd:hover,header.top .icon-btn:hover,header.top .snd:active,header.top .icon-btn:active{transform:none}}
html[data-capture-mode="1"] header.top .snd,html[data-capture-mode="1"] header.top .icon-btn{transition:none}