/* ====== Base ====== */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

html, body {
  margin: 0;
  padding: 0;
  background-color: #222;
  color: #fff;
  font-family: Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#aventura-magica-wrapper {
  margin: 0 auto;
  padding: 12px;
}

/* ====== Área de juego responsiva ====== */
#game {
  position: relative; /* necesario para overlays/controles */
  margin: 0 auto;
  width: 100%;
  max-width: var(--am-max-width, 900px);
  overflow: visible;
}

#game canvas {
  width: 100%;
  height: auto;
  aspect-ratio: var(--am-aspect, 2/1); /* 800x400 => 2/1 */
  display: block;
  background: url('assets/nivel1_bg.webp') repeat-x;
  background-size: cover;
  border: 4px solid #444;
  border-radius: 16px;
  image-rendering: pixelated;
  touch-action: none; /* evita scroll/zoom en el canvas */
}

.am-instructions {
  margin: 8px 0 0;
  color: #844b41;
  font-size: 10px;
	font-family: 'Press Start 2P', cursive;

}

/* ====== Controles móviles (izq: flechas, der: salto) ====== */
.am-controls {
  position: absolute;
  bottom: calc(10px + env(safe-area-inset-bottom, 0));
  z-index: 10;
  display: flex;
  gap: 10px;
}

.am-left  { left: 10px; }
.am-right { right: 10px; }

.am-btn {
  font-size: 1.3rem;
  padding: 14px 18px;
  border-radius: 14px;
  border: 0;
  background: #333;
  color: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,0.3);
  min-width: 64px;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.am-btn:active { transform: translateY(1px); }
.am-btn-jump  { min-width: 80px; font-size: 1.5rem; }

/* En escritorio (mouse/teclado), oculta controles si están en modo auto */
@media (hover: hover) and (pointer: fine) {
  .am-controls[data-mode="auto"] { display: none; }
}

/* Ajustes pantallas pequeñas */
@media (max-width: 420px) {
  .am-btn { min-width: 56px; padding: 12px 14px; }
}

/* ====== Overlay: Start (captura gesto del usuario) ====== */
#am-start-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,0.75);
  z-index: 30;
  border-radius: 16px;
}
#am-start-btn {
  font-size: 1.1rem;
  padding: 12px 20px;
  border-radius: 12px;
  border: 0;
  background: #f1871b;
  color: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  cursor: pointer;
}
#am-start-btn:active { transform: translateY(1px); }
.am-start-note {
  margin-top: 10px;
  color: #ccc;
  font-size: 0.9rem;
  text-align: center;
}

/* ====== Overlay: "Gira tu teléfono" (solo móvil en vertical) ====== */
#am-rotate-hint { display: none; }

@media (orientation: portrait) and (pointer: coarse) {
  #am-rotate-hint {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(0,0,0,0.75);
    color: #fff;
    font-weight: 600;
    font-size: 1.1rem;
    z-index: 20;
    border-radius: 16px;
    padding: 16px;
    text-align: center;
  }
}

/* ====== Fallback "pseudo-fullscreen" para iOS (sin Fullscreen API) ======
   Se activa al añadir la clase .am-fakefs al contenedor #game vía JS. */
#game.am-fakefs {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  /* Use dynamic viewport height fallback for iOS Safari */
  height: 100vh !important; /* baseline */
  height: calc(var(--am-vh, 1vh) * 100) !important; /* JS-updated */
  max-width: none !important;
  margin: 0 !important;
  z-index: 9999;
  background: #000;
  border-radius: 0;
  overscroll-behavior: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  overflow: hidden;
  display: grid;
  place-items: center;
}

/* Prefer modern dynamic viewport units when available */
@supports (height: 100dvh) {
  #game.am-fakefs {
    height: 100dvh !important;
  }
}
#game.am-fakefs canvas {
  border-radius: 0;
  border-width: 0;
}

/* ====== Overlay de mensajes centrados (estilo arcade) ====== */
#am-msg-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 40;             /* por encima de controles */
  pointer-events: none;    /* no bloquea toques/botones */
  opacity: 0;
  transition: opacity 180ms ease;
}

#am-msg-overlay.show { opacity: 1; }

#am-msg-overlay .am-msg {
  background: rgba(0,0,0,0.45);
  padding: 12px 24px;
  border: 3px solid #fff;
  border-radius: 12px;
  font-weight: 800;
  font-size: clamp(18px, 4vw, 28px);
  letter-spacing: 0.5px;
  text-shadow: 2px 2px 0 #000;
  color: #fff;
 	font-family: 'Press Start 2P', cursive;
  font-size:16px;

}

/* end overlay CSS removed (reverted) */

/* ====== iOS hardening: prevent selection/callout/zoom ====== */
/* Prevent long-press selection and callout within game */
#game, #game * {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Ensure buttons and canvas are non-selectable */
#game canvas,
.am-btn {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}

/* Stronger gesture suppression on buttons to avoid iOS long-press */
.am-btn {
  touch-action: none !important;
}