* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #062c53;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  font-family: "Fredoka", "Trebuchet MS", "Comic Sans MS", sans-serif;
}

/* game-shell = fullscreen target (canvas + controls μαζί) */
#game-shell {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

/* ΜΟΝΟ το Phaser κεντράρει (autoCenter). ΜΗΝ βάλεις flex/justify εδώ,
   αλλιώς διπλό κεντράρισμα → το canvas φεύγει δεξιά (iOS Safari). */
#game-container {
  position: absolute;
  inset: 0;
}

#game-container canvas {
  display: block;
}

.hidden { display: none !important; }

/* ---- Mobile controls: μέσα στο shell, πάνω από τον canvas ---- */
#mobile-controls {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 40;            /* πάνω από canvas & Phaser DOM container */
}

#joystick-zone {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 34vw;
  height: 55vh;
  pointer-events: auto;
}

#jump-btn {
  position: absolute;
  right: max(24px, env(safe-area-inset-right));
  bottom: max(40px, env(safe-area-inset-bottom));   /* πιο ψηλά για να μην το κρύβει η μπάρα του in-app browser */
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.9);
  font-size: 30px;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}

#jump-btn:active {
  background: rgba(255, 255, 255, 0.35);
  transform: scale(0.94);
}

/* ---- Rotate overlay ---- */
#rotate-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: #042c53;
  color: #fff;
  display: none;
  align-items: center;
  justify-content: center;
  text-align: center;
}

#rotate-overlay .rotate-icon {
  font-size: 64px;
  animation: spin 2.4s linear infinite;
  margin-bottom: 16px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(-90deg); }
  100% { transform: rotate(-90deg); }
}

body.needs-rotate #rotate-overlay { display: flex; }