/* ====================================================================
   CAPITÁN BELLOTA — estilos
   Paleta: bosque oscuro + verde Capi + crema + madera + rojo
   ==================================================================== */

:root {
  --verde-capi: #7ec84a;
  --verde-osc:  #1f3d2b;
  --verde-prof: #0d1a12;
  --crema:      #f4ecd6;
  --madera:     #7a4a2c;
  --madera-osc: #5e2f1d;
  --rojo:       #c0392b;

  --fuente-titulo: 'Press Start 2P', 'Courier New', monospace;
  --fuente-texto:  'VT323', 'Courier New', monospace;

  /* Colchón extra para las flechas, además del safe-area del sistema.
     Chrome en iOS dibuja su propia barra inferior que NO se reporta como
     "área segura" (eso solo lo hace Safari), así que esto la compensa.
     Súbelo si en algún dispositivo todavía se ven tapadas. */
  --controls-extra-bottom: 46px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: #000;        /* barras negras a los lados en web */
  font-family: var(--fuente-texto);
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  overscroll-behavior: none;
}

#game-wrap {
  position: fixed;
  overflow: hidden;
  background: #083629;   /* fondo del área de juego (las franjas laterales son el negro del body) */
  /* left/top/width/height los define game.js para el formato 9:16 */
  container-type: size;
  container-name: stage;
}

/* Pixel-art nítido en cualquier imagen */
img { image-rendering: pixelated; image-rendering: crisp-edges; }

#game-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated;
}

.hidden { display: none !important; }

/* ---------------- HUD superior ---------------- */
#hud {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: max(10px, env(safe-area-inset-top)) 16px 10px;
  background: linear-gradient(180deg, rgba(94,47,29,0.92) 0%, rgba(94,47,29,0.78) 70%, rgba(94,47,29,0) 100%);
  pointer-events: none;
}

#bellotas {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--crema);
  font-family: var(--fuente-texto);
  font-size: clamp(22px, 7cqw, 40px);
  line-height: 1;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.6);
}
.hud-acorn { height: clamp(22px, 6cqw, 34px); }
#bellotas-count { color: var(--verde-capi); min-width: 1.5ch; }

#hearts {
  display: flex;
  align-items: center;
  gap: 6px;
}
#hearts img {
  height: clamp(22px, 7cqw, 36px);
  filter: drop-shadow(2px 2px 0 rgba(0,0,0,0.5));
  transition: transform 0.12s ease;
}
#hearts img.lost { transform: scale(0.85); }

/* ---------------- Controles ---------------- */
#controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(max(18px, env(safe-area-inset-bottom)) + var(--controls-extra-bottom));
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  pointer-events: none; /* solo los hijos reciben toques */
}

.arrow {
  pointer-events: auto;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  opacity: 0.5;                 /* botones visibles al 50% como pediste */
  transition: opacity 0.1s, transform 0.06s;
  -webkit-tap-highlight-color: transparent;
}
.arrow img {
  width: clamp(80px, 24cqw, 150px);
  height: auto;
  display: block;
}
.arrow:active {
  opacity: 0.85;
  transform: scale(0.92);
}

#btn-mute {
  pointer-events: auto;
  align-self: flex-end;
  margin-bottom: 10px;
  background: rgba(0,0,0,0.35);
  border: 2px solid rgba(244,236,214,0.5);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  font-size: 20px;
  color: var(--crema);
  cursor: pointer;
  opacity: 0.55;
}
#btn-mute:active { opacity: 0.9; }

/* ---------------- Overlays (menú / game over) ---------------- */
.overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: var(--verde-prof);
  background-size: cover;
  background-position: center;
  image-rendering: pixelated;
}

/* MENÚ */
/* Fondo de la PANTALLA DE TÍTULO (independiente del fondo in-game).
   Cámbialo reemplazando assets/sprites/fondo_menu.png o esta ruta. */
#menu {
  cursor: pointer;
  background-image:
    radial-gradient(120% 90% at 50% 30%, rgba(31,61,43,0.35) 0%, rgba(13,26,18,0.85) 100%),
    url('../assets/sprites/fondo_menu.png');
}

/* Fondo de la pantalla de GAME OVER (usa el fondo del juego). */
#gameover {
  background-image:
    radial-gradient(120% 90% at 50% 30%, rgba(31,61,43,0.35) 0%, rgba(13,26,18,0.85) 100%),
    url('../assets/sprites/fondo.png');
}
.menu-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px;
}

.title {
  font-family: var(--fuente-titulo);
  font-size: clamp(30px, 11cqw, 64px);
  line-height: 1.25;
  margin: 0 0 22px;
  letter-spacing: 1px;
  /* contorno pixel oscuro */
  text-shadow:
    -3px 0 0 #14241a, 3px 0 0 #14241a,
    0 -3px 0 #14241a, 0 3px 0 #14241a,
    -3px -3px 0 #14241a, 3px 3px 0 #14241a,
    3px -3px 0 #14241a, -3px 3px 0 #14241a,
    5px 6px 0 rgba(0,0,0,0.5);
}
.t-green { color: var(--verde-capi); }
.t-white { color: #ffffff; }

.subtitle {
  font-family: var(--fuente-texto);
  font-size: clamp(24px, 8cqw, 46px);
  color: var(--crema);
  margin: 0 0 28px;
  line-height: 1.1;
  text-shadow: 3px 3px 0 rgba(0,0,0,0.7);
}

.menu-capi {
  width: clamp(80px, 24cqw, 130px);
  margin-top: 10px;
  animation: capi-bob 1.1s ease-in-out infinite;
}
@keyframes capi-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* GAME OVER */
.go-card {
  background: rgba(20, 36, 26, 0.92);
  border: 4px solid var(--madera);
  border-radius: 6px;
  padding: 32px 28px;
  box-shadow: 0 10px 0 rgba(0,0,0,0.4);
}
.go-title {
  font-family: var(--fuente-titulo);
  font-size: clamp(22px, 7cqw, 38px);
  color: var(--rojo);
  margin: 0 0 18px;
  text-shadow: 3px 3px 0 #14241a;
}
.go-score, .go-best {
  font-family: var(--fuente-texto);
  font-size: clamp(24px, 7cqw, 40px);
  color: var(--crema);
  margin: 6px 0;
}
.go-score span { color: var(--verde-capi); }
.go-best span { color: var(--crema); }

.go-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 22px;
}

.pixel-btn {
  margin-top: 0;
  font-family: var(--fuente-titulo);
  font-size: clamp(14px, 4cqw, 20px);
  color: #fff;
  background: var(--verde-capi);
  border: none;
  border-bottom: 6px solid #4a8c30;
  border-radius: 4px;
  padding: 16px 26px;
  cursor: pointer;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.4);
  transition: transform 0.06s, border-width 0.06s;
}

/* Botón secundario (Menú): estilo madera para diferenciarlo del primario */
.pixel-btn.secondary {
  background: var(--madera);
  border-bottom-color: var(--madera-osc);
}
.pixel-btn:active {
  transform: translateY(3px);
  border-bottom-width: 3px;
}

/* Accesibilidad: respeta reduce-motion */
@media (prefers-reduced-motion: reduce) {
  .menu-capi { animation: none; }
}