/* Gemeinsame Basis-Styles für alle Rategalgen-Spiele.
   Enthält ausschließlich Regeln, die in allen drei Spielen 1:1 identisch waren. */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Unterdrückt Pull-to-Refresh und Überzieh-Effekte, die in einer App fehl am Platz sind. */
html,
body {
  overscroll-behavior: none;
}

/* Verhindert Doppeltipp-Zoom, ohne Scrollen oder Pinch-Zoom zu blockieren. */
button,
.key,
.letter-box {
  touch-action: manipulation;
}

/* Notch und Gestenleiste freihalten (greift nur mit viewport-fit=cover). */
body {
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
}

/* Click-Ripple-Effekt (Tastatur) */
.ripple {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, var(--glow-color) 0%, transparent 70%);
  animation: rippleEffect 0.6s ease-out forwards;
  pointer-events: none;
}

@keyframes rippleEffect {
  0% {
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    width: 300px;
    height: 300px;
    opacity: 0;
  }
}