/* birb: its canvas, its hit target and its menu. Owner: bird (design/CONTRACTS.md). Loaded by
   site/index.html; portal/build.sh versions it.

   #companion-overlay is a small canvas sized to birb + its bubble (<= 360 x 240 CSS px), moved with a
   transform only, above every layer and click-through (DESIGN §15.5). bird/layer.js sizes it and sets
   data-show / data-mode. #birb-hit is the only part that takes the pointer: a real <button> >= 44 x 44
   that follows birb's body, the last tab stop; its focus ring is drawn by the bird canvas. */
#companion-overlay { position: fixed; z-index: 2147483000; left: 0; top: 0; width: 0; height: 0; display: block;
  pointer-events: none; transform-origin: 0 0; will-change: transform; contain: strict; }
#companion-overlay[data-show="0"] { visibility: hidden; }
/* Without WebGPU birb draws with Canvas2D from the same atlas (DESIGN §15.9, bird/index.js birdNoGpu). */
html.gpu-unavailable #companion-overlay[data-mode="2d"] { display: block; }

#birb-hit { position: fixed; z-index: 2147483001; left: 0; top: 0; width: 44px; height: 44px; margin: 0; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: transparent; font: inherit; outline: none;
  box-shadow: none; pointer-events: auto; cursor: grab; touch-action: none; -webkit-tap-highlight-color: transparent;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
#birb-hit[hidden] { display: none; }
#birb-hit[data-grab="1"] { cursor: grabbing; }
#birb-hit:focus, #birb-hit:focus-visible { outline: none; box-shadow: none; }

/* birb's own menu (long press / context-menu key on #birb-hit): the Show birb switch. */
.birb-menu { position: fixed; left: 0; top: 0; z-index: 2147483002; display: grid; gap: 6px; width: max-content;
  max-width: calc(100vw - 16px); padding: 12px 16px 12px 14px; background: var(--void-2, #1D1133);
  border: 3px solid var(--ink, #07030D); border-radius: 16px; color: var(--text-hi, #FFF4E0);
  box-shadow: 0 5px 0 var(--slab-lip, #08040F), 0 5px 0 3px var(--ink, #07030D), var(--shadow-float, 0 20px 28px rgba(0, 0, 0, 0.45));
  font: 600 15px/1.2 var(--f-body, 'Fredoka', system-ui, sans-serif); }
.birb-menu[hidden] { display: none; }
.birb-menu__switch { justify-self: start; }
.birb-menu__desc { margin: 0; font: 500 13px/18px var(--f-body, 'Fredoka', system-ui, sans-serif); color: var(--text-dim, #A898C8); }

html:fullscreen #companion-overlay, html:fullscreen #birb-hit, html:fullscreen .birb-menu { display: none !important; }
@media (forced-colors: active) {
  #companion-overlay, #birb-hit, .birb-menu { display: none !important; }
}