@font-face { font-family: 'Grandstander'; font-weight: 800; font-display: swap; src: url(fonts/grandstander-800-latin.woff2) format('woff2'); }
/* Fixed transparent header injected by header.js. Only the buttons take pointer events, so a
   tap anywhere else in the strip still reaches the canvas underneath (tapping the picture = action). */
#topbar { position: fixed; left: 0; right: 0; top: 0; z-index: 20; display: flex; align-items: flex-start; justify-content: space-between; pointer-events: none; padding: calc(10px + env(safe-area-inset-top)) calc(10px + env(safe-area-inset-right)) 0 calc(10px + env(safe-area-inset-left)); }
/* Wooden frame around a white face: the border is transparent and the background is painted twice,
   white clipped to the padding box and the wood (base tone + grain streaks + knots) clipped to the
   border box, so the wood only ever shows through the border ring. */
#topbar button {
  --wood: #b7743a; --wood-dark: #7a4720; --face: #fffdf7;
  pointer-events: auto; -webkit-tap-highlight-color: transparent; touch-action: manipulation; margin: 0; padding: 0; cursor: pointer;
  width: 56px; height: 56px; border: 6px solid transparent; border-radius: 50%; font-size: 26px; line-height: 1;
  display: flex; align-items: center; justify-content: center; color: #4a2c12;
  background:
    linear-gradient(var(--face), var(--face)) padding-box,
    radial-gradient(circle at 18% 22%, var(--wood-dark) 0 1.5px, transparent 2.6px) border-box,
    radial-gradient(circle at 84% 78%, var(--wood-dark) 0 1.2px, transparent 2.2px) border-box,
    repeating-linear-gradient(97deg, transparent 0 3px, rgba(255, 230, 190, .28) 3px 4px, transparent 4px 7px, rgba(70, 35, 10, .32) 7px 8.5px, transparent 8.5px 12px) border-box,
    linear-gradient(var(--wood), var(--wood)) border-box;
  box-shadow: inset 0 0 0 1px rgba(80, 45, 15, .55), 0 0 0 1px rgba(80, 45, 15, .55), 0 4px 10px rgba(0, 0, 0, .35);
  transition: transform .12s, box-shadow .12s;
}
#topbar .grp { display: flex; gap: 8px; }
/* display:flex on the button rule would otherwise beat the hidden attribute, un-hiding the
   fullscreen button on the browsers that can't do fullscreen. */
#topbar button[hidden] { display: none; }
#topbar #hdr-full svg { width: 24px; height: 24px; }
#topbar button:active { transform: scale(.92); box-shadow: inset 0 0 0 1px rgba(80, 45, 15, .55), 0 0 0 1px rgba(80, 45, 15, .55), 0 2px 5px rgba(0, 0, 0, .35); }
#topbar #hdr-home.armed { --face: #d9f5df; transform: scale(1.08); }
:root[data-theme="night"] #topbar button { --wood: #8f5a2c; --wood-dark: #4f2c12; }
@media (max-height: 520px) { #topbar button { width: 46px; height: 46px; border-width: 5px; border-radius: 50%; font-size: 21px; } #topbar #hdr-full svg { width: 20px; height: 20px; } }