/* =========================================================
   Steuerung fuer den Finger

   Die Knoepfe wachsen mit dem Spielrahmen mit (cqh/cqw). Auf dem
   iPad werden sie dadurch von selbst groesser als auf dem iPhone.
   ========================================================= */

.touch-controls {
  position: absolute;
  inset: 0;
  z-index: 15;
  display: none;
  pointer-events: none;
  --key: clamp(46px, 11cqh, 84px);
  --gap: clamp(4px, 1cqh, 10px);
}

.touch-controls.is-touch {
  display: block;
}

/* ---------- Steuerkreuz ---------- */

.dpad {
  position: absolute;
  left: max(2.5cqw, env(safe-area-inset-left, 0px));
  bottom: max(2.5cqh, env(safe-area-inset-bottom, 0px));
  width: calc(var(--key) * 3 + var(--gap) * 2);
  height: calc(var(--key) * 3 + var(--gap) * 2);
  display: grid;
  grid-template-columns: repeat(3, var(--key));
  grid-template-rows: repeat(3, var(--key));
  gap: var(--gap);
  pointer-events: none;
}

.tc-btn {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 30%;
  background: rgba(255, 253, 246, 0.34);
  color: #12240b;
  font-family: var(--font-display);
  font-size: calc(var(--key) * 0.34);
  font-weight: 700;
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.6),
    0 4px 14px rgba(12, 24, 8, 0.24);
  backdrop-filter: blur(8px) saturate(1.3);
  -webkit-backdrop-filter: blur(8px) saturate(1.3);
  pointer-events: auto;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  transition: transform 0.1s var(--ease-spring), background 0.12s, box-shadow 0.12s;
}

.tc-btn.is-active {
  transform: scale(0.9);
  background: rgba(255, 253, 246, 0.85);
  box-shadow:
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.8),
    0 0 0 4px rgba(255, 176, 32, 0.36),
    0 2px 8px rgba(12, 24, 8, 0.24);
}

.tc-up { grid-column: 2; grid-row: 1; }
.tc-left { grid-column: 1; grid-row: 2; }
.tc-right { grid-column: 3; grid-row: 2; }
.tc-down { grid-column: 2; grid-row: 3; }

/* ---------- Sprungknopf ---------- */

.jump-btn {
  position: absolute;
  right: max(3cqw, env(safe-area-inset-right, 0px));
  bottom: max(3.5cqh, env(safe-area-inset-bottom, 0px));
  width: calc(var(--key) * 1.5);
  height: calc(var(--key) * 1.5);
  border-radius: 50%;
  font-size: calc(var(--key) * 0.55);
  color: #2a1a02;
  background: linear-gradient(165deg, rgba(255, 212, 105, 0.92), rgba(255, 166, 15, 0.86));
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.6),
    inset 0 -3px 0 rgba(150, 88, 0, 0.28),
    0 8px 22px rgba(255, 176, 32, 0.44);
}

.jump-btn.is-active {
  transform: scale(0.92);
  background: linear-gradient(165deg, rgba(255, 226, 150, 0.98), rgba(255, 186, 45, 0.94));
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.7),
    0 0 0 5px rgba(255, 176, 32, 0.32),
    0 3px 10px rgba(255, 176, 32, 0.4);
}

/* Level 1 wird von oben gespielt: alle vier Richtungen, kein Sprung.
   Ab Level 2 laeuft Matheser von der Seite: links, rechts und springen. */

.touch-controls.level-1 .jump-btn {
  display: none;
}

.touch-controls.level-2 .tc-up,
.touch-controls.level-2 .tc-down {
  display: none;
}

/* Ohne Sprungknopf darf das Kreuz etwas groesser ausfallen. */
.touch-controls.level-1 {
  --key: clamp(48px, 12cqh, 92px);
}