/* ══════════════════════════════════════════════════════════════
   THE PAD — on-screen controls for POND, Toad Loose and Toad Pong.

   One stylesheet for all three so the games do not each invent their
   own idea of where a thumb goes. Two rules decide everything here:

   1. The pad sits BESIDE the picture, never on it. The old POND pad
      was a transparent grid laid over the canvas, which meant both
      thumbs covered exactly the part of the level you were about to
      walk into.
   2. Nothing smaller than 64px. A 44px target is the accessibility
      floor for a thing you tap once; this is a thing you hold down
      while something is chasing you.
   ⚠ Der Name ist `tpad`, nicht `pad`: `.pad` ist auf dem Schreibtisch
   schon der Notepad-Rumpf (`min-height:100%`), und der zog die Leiste
   ueber den ganzen Bildschirm — der Beenden-Knopf des Spiels war
   dahinter nicht mehr zu treffen.
   ══════════════════════════════════════════════════════════════ */
.tpad{
  position:fixed; left:0; right:0; bottom:0; z-index:970;
  display:flex; justify-content:space-between; align-items:flex-end;
  padding:0 14px calc(14px + env(safe-area-inset-bottom,0px));
  pointer-events:none;                 /* only the buttons take touches */
  touch-action:none;
  -webkit-user-select:none; user-select:none;
}
.tpad[hidden]{ display:none; }

.tpad__side{ display:flex; align-items:flex-end; gap:12px; pointer-events:none; }

.tpad__b{
  pointer-events:auto; touch-action:none;
  width:66px; height:66px; border-radius:50%;
  display:grid; place-items:center;
  border:2px solid rgba(255,255,255,.5);
  background:radial-gradient(120% 120% at 50% 22%, rgba(255,255,255,.34), rgba(6,32,30,.6));
  box-shadow:0 4px 14px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.4);
  color:#fff; font:700 26px/1 system-ui, sans-serif;
  text-shadow:0 1px 2px rgba(0,0,0,.6);
  -webkit-tap-highlight-color:transparent;
  -webkit-user-select:none; user-select:none;
  cursor:pointer;
}
/* .is-down, not :active — a captured pointer stops matching :active on
   iOS the moment the thumb slides off the circle, so the button would
   look released while it is very much still held. */
.tpad__b.is-down{
  background:radial-gradient(120% 120% at 50% 22%, rgba(255,255,255,.6), rgba(10,70,60,.8));
  border-color:#fff; transform:translateY(1px);
}

/* Jump is the button pressed most often and the one you cannot afford
   to miss, so it is the biggest and sits lowest — where the right thumb
   rests without reaching. */
.tpad__b--jump{ width:82px; height:82px; font-size:30px; }
.tpad__b--tongue{ font-size:28px; margin-bottom:26px; }

/* Landscape on a phone is 390px tall: full-size circles would eat a
   third of the picture. */
@media (max-height:460px){
  .tpad{ padding:0 10px calc(8px + env(safe-area-inset-bottom,0px)); }
  .tpad__b{ width:54px; height:54px; font-size:21px; }
  .tpad__b--jump{ width:64px; height:64px; font-size:24px; }
  .tpad__b--tongue{ margin-bottom:14px; font-size:22px; }
  .tpad__side{ gap:9px; }
}