@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
/* ====== Aventura 2 styles (scoped to #game2) ====== */
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-2-wrapper {
  margin: 0 auto;
  padding: 12px;
}

/* Área de juego responsiva */
#game2 {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: var(--am2-max-width, 900px);
  overflow: visible;
}

#game2 canvas {
  width: 100%;
  height: auto;
  aspect-ratio: var(--am2-aspect, 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;
}

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

/* Controles móviles */
.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; }

@media (hover: hover) and (pointer: fine) { .am-controls[data-mode="auto"] { display: none; } }

@media (max-width: 420px) { .am-btn { min-width: 56px; padding: 12px 14px; } }

/* Start overlay */
#am2-start-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,0.75);
  z-index: 30;
  border-radius: 16px;
}
#am2-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;
}
#am2-start-btn:active { transform: translateY(1px); }
.am-start-note {
  margin-top: 10px;
  color: #ccc;
  font-size: 0.9rem;
  text-align: center;
 }

/* Rotar hint (solo retrato móvil) */
#am2-rotate-hint { display: none; }
@media (orientation: portrait) and (pointer: coarse) {
  #am2-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;
  }
}

/* Fake fullscreen (iOS fallback) */
#game2.am2-fakefs {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  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;
}
@supports (height: 100dvh) {
  #game2.am2-fakefs {
    height: 100dvh !important;
  }
}
#game2.am2-fakefs canvas {
  border-radius: 0;
  border-width: 0;
}

/* Center message overlay */
#am2-msg-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 40;
  pointer-events: none;
  opacity: 0;
  transition: opacity 180ms ease;
}
#am2-msg-overlay.show { opacity: 1; }

#am2-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;
}

/* Prevent selection/callout/zoom */
#game2, #game2 * {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
#game2 canvas, .am-btn {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}
.am-btn {
  touch-action: none !important;
}