/* The world: one canvas, one line of type, nothing else. Every pixel of chrome here is a pixel
   not spent on the creature. */

#world{width:100%;height:100%;display:block;touch-action:none;cursor:grab}
body.grabbing #world{cursor:grabbing}

#hint{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
      font-size:13px;letter-spacing:.28em;color:var(--txt-2);text-transform:uppercase;
      pointer-events:none;opacity:0;transition:opacity 1.2s}

/* ── the mute ────────────────────────────────────────────────
   The only thing you can press in the world that is not the creature, so it has to be findable
   and must not compete. It sits at 34% opacity — legible if you look at the corner, invisible if
   you are looking at the Oglet — and comes to full on hover, focus, and whenever it is *off*,
   because a muted site that does not say so is a broken one.

   Anchored to the bottom and not the top: the top of this view sits under the bar, and the
   bottom-right corner is the one place a creature never drifts to — it seeks the pointer, and
   the pointer is rarely parked in a corner. */
#mute{position:absolute;right:14px;bottom:14px;z-index:1;
      width:38px;height:38px;display:grid;place-items:center;
      padding:0;border:0;border-radius:50%;background:none;color:var(--txt);
      cursor:pointer;opacity:.34;transition:opacity .22s var(--ease)}
#mute:hover,#mute:focus-visible{opacity:1}
#mute:focus-visible{outline:1px solid var(--hair-2);outline-offset:2px}
#mute[aria-pressed="true"]{opacity:.78}
#mute svg{width:22px;height:22px;display:block;
          fill:none;stroke:currentColor;stroke-width:1.6;
          stroke-linecap:round;stroke-linejoin:round}
#mute .mute-horn{fill:currentColor;stroke:currentColor}
/* The two states are one icon with two groups swapped, so nothing reflows and the horn never
   moves — a control that changes shape as you press it reads as two different buttons. */
#mute .mute-cross{opacity:0}
#mute[aria-pressed="true"] .mute-waves{opacity:0}
#mute[aria-pressed="true"] .mute-cross{opacity:1}

@media (prefers-reduced-motion:reduce){
  #mute{transition:none}
}