/* Touch controls: hidden unless a touch is detected. The buttons themselves
   are generated from TOUCH_PADS in src/input/bindings.js. */
.touch {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: none;
  justify-content: space-between;
  padding: 0 1.2rem calc(1.2rem + env(safe-area-inset-bottom));
  pointer-events: none;
}
body.has-touch .touch { display: flex; }
/* ...and not while a menu is up. Both this and the dock are pinned to the foot
   of the screen, so on a phone the bomb button lands on the words TAP TO
   START, and src/input/input.js has nothing else on that screen that starts a
   game. See src/ui/overlays.js for who puts the class on. */
body.has-touch.menu .touch { display: none; }
.touch .pad { display: flex; gap: 0.9rem; pointer-events: auto; }
.touch button {
  width: 4.2rem;
  height: 4.2rem;
  border-radius: 50%;
  border: 1px solid rgba(33,243,255,0.5);
  background: rgba(160,75,255,0.12);
  color: var(--cyan);
  font-family: var(--mono);
  font-size: 1.25rem;
  touch-action: none;
}
.touch button:active { background: rgba(255,62,200,0.3); }
.touch button.bomb {
  border-color: rgba(255,176,32,0.6);
  color: var(--amber);
}
.touch button.hookbtn {
  border-color: rgba(182,255,61,0.6);
  color: var(--lime);
}

/* Six buttons, the gaps between them and the padding either side come to
   499px at full size. That is wider than every phone there is in portrait — a
   16 Pro Max is 440 and an SE is 375 — so `space-between` had nowhere to put
   the last group and painted THRUST half off the right edge and FIRE entirely
   past it. The game was unplayable in the orientation people land in, which
   is the one a shared link opens in.

   Shrink to fit rather than wrapping onto a second row: wrapping moves the
   thumbs off the two bottom corners, and the corners are the whole reason the
   pad is split into two groups. `clamp` rather than a flat rem because the
   failure is continuous — every width below 499 was broken, not a bracket of
   them. The floor is 44px, which is the smallest a thumb reliably hits, and
   it only binds below about 340px. The 13vw in the middle is what leaves
   `space-between` enough slack to still read as two thumbs at two corners
   rather than one row of six. */
@media (max-width: 520px) {
  .touch { padding: 0 0.5rem calc(0.6rem + env(safe-area-inset-bottom)); }
  .touch .pad { gap: 0.5rem; }
  .touch button {
    width: clamp(2.75rem, 13vw, 3.4rem);
    height: clamp(2.75rem, 13vw, 3.4rem);
    font-size: 1rem;
  }
}
#mute {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  background: none;
  border: none;
  color: var(--dim);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  cursor: pointer;
  padding: 0.4rem;
}
#mute:focus-visible { outline: 1px solid var(--cyan); }
body.has-touch #mute { bottom: auto; top: 3.6rem; }