/* Sticky header: Clippy top-left, wordmark beside it, compacts on scroll */
#game .hud{position:sticky;top:0;z-index:60;align-items:center;padding:max(8px,env(safe-area-inset-top)) 12px 6px!important;transition:padding .2s,background .2s,box-shadow .2s;border-radius:0 0 12px 12px}
#game .hud .clippy{position:relative;top:auto;right:auto;flex:none;width:44px;height:52px;transform:rotate(-8deg);order:-2;z-index:2;transition:width .2s,height .2s}
#game .hud .clippy:hover,#game .hud .clippy:focus-visible{transform:rotate(-2deg) translateY(-2px)}
#game .hud .wm{order:-1;margin-right:auto;transition:width .2s}
#game .hud .ribbons{order:0}
.dogeared .hud .clippy{right:auto}
body.hud-slim #game .hud{padding:max(3px,env(safe-area-inset-top)) 10px 3px!important;background:rgba(32,20,14,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 4px 14px rgba(0,0,0,.25)}
body.hud-slim #game .hud .wm{width:clamp(70px,18vw,96px)}
body.hud-slim #game .hud .clippy{width:30px;height:36px}
@media (prefers-reduced-motion:reduce){#game .hud,#game .hud *{transition:none!important}}