/* ==========================================================================
   Sdílené dotykové ovládání pro hry na games.wellick.cz
   Kontejner nechává dotyky projít (pointer-events:none), reagují jen tlačítka.
   Rozměry a barvy konkrétních tlačítek si každá hra doplní ve svém CSS.
   ========================================================================== */
.touch {
  position: absolute; inset: 0;
  z-index: 30;
  pointer-events: none;
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: 10px max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  user-select: none; -webkit-user-select: none;
}
.touch-side { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.touch-label {
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.35);
}

.tbtn {
  pointer-events: auto;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  display: grid; place-items: center;
  margin: 0; padding: 0;
  font: 600 20px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: rgba(255,255,255,.82);
  background: rgba(18,26,36,.62);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 14px;
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
  transition: background .06s linear, transform .06s linear;
}
.tbtn.is-down {
  background: rgba(255,255,255,.3);
  border-color: rgba(255,255,255,.7);
  transform: scale(.94);
}

/* Se zapnutým dotykovým ovládáním klávesová nápověda ustoupí. */
body.touch-on .controls-help { display: none; }

/* --- výzva k otočení telefonu (aréna je na šířku) --- */
.rotate-hint {
  position: absolute; inset: 0;
  z-index: 40;
  display: grid; place-items: center;
  background: rgba(6,9,13,.92);
  pointer-events: none;
}
.rotate-box {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 22px;
  font: 600 15px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #e7ecf4;
  background: rgba(18,26,36,.9);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
}
.rotate-icon { font-size: 26px; }