/* touch-action: none + user-select: none auf JEDEM Element blockiert
   Doppeltipp-Zoom, Pinch-Zoom und Text-Auswahl zuverlässig auf iOS/Android.
   Einzelne Elemente (canvas, Buttons) setzen es zur Klarheit nochmals explizit. */
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

:root {
  --banner-height: 52px;
}

html {
  height: 100%;
  overflow: hidden;
}

body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: #111;
  font-family: sans-serif;
  -webkit-touch-callout: none;
}

/* Banner mit Restaurant-Name */
#game-banner {
  position: fixed;
  top: 0;
  left: -3%;
  width: 106%;
  height: var(--banner-height);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 17px;
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 16px;
  z-index: 20;
  border-radius: 0 0 50% 50% / 0 0 26px 26px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* Spielfeld: nutzt die VOLLE Höhe unter dem Banner. Die Touch-Controls sitzen
   als transparentes Overlay DARÜBER (Joystick links floating, Sprung-Button
   rechts unten) und nehmen dem Spiel keine Höhe mehr weg.
   Breite wird aus der verfügbaren Höhe × Seitenverhältnis (405:720) berechnet,
   damit das Spiel auf dem Desktop nicht winzig wird. Auf dem Handy volle Breite. */
#game-container {
  position: fixed;
  top:    var(--banner-height);
  bottom: env(safe-area-inset-bottom, 0px);
  left:   50%;
  transform: translateX(-50%);
  width:     100%;
  max-width: calc((100vh - var(--banner-height)) * 405 / 720);
}

/* Handy / schmale Fenster: volle Breite, keine Begrenzung */
@media (max-width: 500px) {
  #game-container {
    left:      0;
    transform: none;
    width:     100%;
    max-width: 100%;
  }
}

#game-container canvas {
  touch-action: none;
  display: block;
}

/* ── Floating-Sprung-Button ──────────────────────────────────────────────────
   Spiegelbildlich zum Joystick: Der Button ist kein fixer Knopf am Rand mehr,
   sondern erscheint unter dem Finger (position:fixed, per JS gesetztes left/top,
   translate(-50%,-50%) macht den Punkt zur Button-MITTE). Startet unsichtbar
   (display:none), jump-button.js blendet ihn beim Auflegen ein. Events laufen
   über die Zone (#jump-zone), daher pointer-events:none am Button selbst.
   Größe wird von touch-input.js per Inline-Style aus config.json (jumpSize) gesetzt. */
.touch-btn {
  position: fixed;
  display: none;             /* wird von jump-button.js auf flex gesetzt */
  transform: translate(-50%, -50%);
  z-index: 20;               /* über der Zone, wie die Joystick-Basis */
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  border: 2px solid rgba(255, 255, 255, 0.45);
  color: #fff;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  touch-action: none;
}

/* ── Floating-Joystick ───────────────────────────────────────────────────── */
/* Auflegefläche = linke Bildschirmhälfte. Standardmäßig inert (pointer-events:
   none), damit sie im Menü/Endscreen nichts abfängt. game-scene.js schaltet sie
   per .active nur während des Spiels scharf. */
#joystick-zone {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 50%;
  z-index: 9;            /* über dem Canvas, unter der Steuerleiste (10) */
  pointer-events: none;
  touch-action: none;
}
#joystick-zone.active {
  pointer-events: auto;
}

/* Auflegefläche für den Sprung-Button = rechte Bildschirmhälfte. Spiegelbild der
   Joystick-Zone. Standardmäßig inert, game-scene.js schaltet sie per .active nur
   während des Spiels scharf. */
#jump-zone {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  width: 50%;
  z-index: 9;            /* über dem Canvas, wie die Joystick-Zone */
  pointer-events: none;
  touch-action: none;
}
#jump-zone.active {
  pointer-events: auto;
}

/* Die Basis erscheint erst beim Auflegen (display via joystick.js) und wird per
   JS an die Fingerposition gesetzt. translate(-50%,-50%) macht den gesetzten
   left/top-Punkt zur Basis-MITTE. z-index über der Steuerleiste, damit die Basis
   nie hinter dem dunklen Steuerbalken verschwindet. Events laufen über die Zone,
   daher pointer-events:none auf der Basis selbst. */
#joystick-base {
  position: fixed;
  display: none;
  transform: translate(-50%, -50%);
  z-index: 20;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 2px solid rgba(255, 255, 255, 0.35);
  pointer-events: none;
  touch-action: none;
}

#joystick-knob {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  border: 2px solid rgba(255, 255, 255, 0.8);
  pointer-events: none;
}

/* ── Start-Andeutung ──────────────────────────────────────────────────────────
   Nur wenn .hint gesetzt ist, blendet die Basis sanft ein/aus (joystick.js).
   Beim echten Auflegen ist .hint NICHT gesetzt → der Joystick erscheint sofort
   ohne Fade. */
#joystick-base.hint {
  transition: opacity 0.5s ease;
}
/* Der Knopf tippt während der Andeutung einmal nach rechts → signalisiert
   "schieben/ziehen". */
#joystick-base.hint #joystick-knob {
  animation: joystick-hint-nudge 1.1s ease-in-out 0.15s 1;
}
@keyframes joystick-hint-nudge {
  0%, 100% { transform: translate(-50%, -50%); }
  45%      { transform: translate(calc(-50% + 30px), -50%); }
}

/* Start-Andeutung des Sprung-Buttons: sanft ein-/ausblenden (jump-button.js).
   Beim echten Auflegen ist .hint NICHT gesetzt → der Button erscheint sofort
   ohne Fade. Spiegelbild der Joystick-Andeutung. */
#btn-jump.hint {
  transition: opacity 0.5s ease;
}

/* Auto-Run-Modus: kein Joystick, der Sprung-Button steht fix mittig am unteren
   Rand und ist dauerhaft sichtbar (kein Floating). */
#btn-jump.jump-center {
  display: flex;
  left: 50%;
  top: auto;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 32px);
  transform: translateX(-50%);
  pointer-events: auto;
}

.touch-btn.hidden {
  display: none !important;
}

/* Hinweis für Querformat auf kleinen Bildschirmen */
#orientation-hint {
  display: none;
  position: fixed;
  inset: 0;
  background: #111;
  color: #fff;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 20px;
  padding: 24px;
  z-index: 100;
}

@media (orientation: landscape) and (max-height: 500px) {
  #orientation-hint {
    display: flex;
  }

  #game-container,
  #joystick-zone,
  #jump-zone {
    display: none;
  }
}