/* ===== Base ===== */
:root {
  /* Fuente "pixel": si instalas/alojas 'Press Start 2P' se usará; si no, monoespaciada */
  --fuente: "Press Start 2P", "Lucida Console", "Courier New", monospace;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%;
  background: #0b0d10; color: #fff;
  font-family: var(--fuente);
  overflow: hidden;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
body { display: grid; place-items: center; }

/* ===== Contenedor 4:3 responsive =====
   --u = 1% del ancho del juego → todo el UI escala con "em" */
#contenedor {
  --u: min(1vw, 1.3333vh);
  position: relative;
  width: min(100vw, 133.333vh);
  aspect-ratio: 4 / 3;
  font-size: calc(var(--u) * 1.7);
  touch-action: none;
}
@supports (height: 100dvh) {
  #contenedor { --u: min(1vw, 1.3333dvh); width: min(100vw, 133.333dvh); }
}
#lienzo {
  width: 100%; height: 100%; display: block;
  background: #1b2a1b;
  cursor: crosshair;
  image-rendering: pixelated;      /* sprites nítidos */
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

.oculto { display: none !important; }

/* ===== HUD ===== */
#hud { position: absolute; inset: 0; pointer-events: none;
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 1.2em; text-shadow: 2px 2px 0 #000; }
#hud-der { text-align: right; line-height: 1.7; }
#hp-barra { position: relative; width: 16em; height: 1.7em;
  background: #2a0f14; border: 3px solid #000; outline: 2px solid #fff3; }
#hp-relleno { height: 100%; width: 100%; background: linear-gradient(#ff6b81, #d6213c);
  transition: width .12s; }
#hp-texto { position: absolute; inset: 0; display: grid; place-items: center; font-size: .8em; }
#hud-efectos { margin-top: .6em; font-size: .75em; line-height: 1.6; }

#banner { position: absolute; left: 0; right: 0; top: 22%; text-align: center;
  font-size: 3em; color: #ffd34d; text-shadow: 4px 4px 0 #000;
  opacity: 0; pointer-events: none; }
#banner.mostrar { animation: banner 2s ease-out; }
@keyframes banner {
  0% { opacity: 0; transform: scale(.6); }
  15% { opacity: 1; transform: scale(1.1); }
  25% { transform: scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-1em); }
}

/* ===== Pantallas / menús ===== */
.pantalla { position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1.2em; text-align: center;
  background: rgba(5, 8, 12, .8); padding: 1em; }
.pantalla h1 { font-size: 4.5em; margin: 0; color: #ffd34d; text-shadow: 5px 5px 0 #7a2a00; letter-spacing: .1em; }
.pantalla h2 { font-size: 3em; margin: 0; text-shadow: 4px 4px 0 #000; }
.pantalla h2.rojo { color: #ff4d5e; }
.sub { margin: 0; color: #9fd8a0; }
.ayuda { font-size: .75em; line-height: 2; color: #cbd5e1; margin: 0; }
.record { font-size: .8em; color: #7dffb2; margin: 0; line-height: 1.8; }

.boton { font-family: var(--fuente); font-size: 1.3em; color: #fff; cursor: pointer;
  background: #2f9e44; border: 4px solid #000; box-shadow: 0 5px 0 #1b5e2a;
  padding: .7em 1.6em; min-width: 11em; }
.boton.sec { background: #495057; box-shadow: 0 5px 0 #2b2f33; }
.boton:hover { filter: brightness(1.15); }
.boton:active { transform: translateY(4px); box-shadow: 0 1px 0 #1b5e2a; }

/* ===== Táctil ===== */
#btn-pausa { display: none; position: absolute; right: 1em; bottom: 1em; width: 3em; height: 3em;
  font-family: var(--fuente); font-size: 1.2em; color: #fff; background: #0008;
  border: 3px solid #fff6; border-radius: 50%; }
@media (pointer: coarse) { #btn-pausa:not(.oculto) { display: block; } }

.joy-base { position: absolute; width: 9em; height: 9em; margin: -4.5em 0 0 -4.5em;
  border-radius: 50%; background: rgba(255,255,255,.12); border: 3px solid rgba(255,255,255,.35);
  pointer-events: none; display: none; }
.joy-knob { position: absolute; left: 50%; top: 50%; width: 4em; height: 4em; margin: -2em 0 0 -2em;
  border-radius: 50%; background: rgba(255,255,255,.45); border: 3px solid rgba(255,255,255,.8); }

/* ===== Modo jefe ===== */
#jefe-barra { position: absolute; left: 50%; bottom: 1.2em; transform: translateX(-50%); width: 44%;
  text-align: center; font-size: .8em; color: #ff8fe8; text-shadow: 2px 2px 0 #000; }
#jefe-fondo { height: 1.3em; margin-top: .3em; background: #2a0f2a; border: 3px solid #000; outline: 2px solid #ff2bd655; }
#jefe-relleno { height: 100%; width: 100%; background: linear-gradient(#ff2bd6, #a0007a); transition: width .1s; }
.boton.jefe { background: #a61e4d; box-shadow: 0 5px 0 #5c1030; }
.pantalla h2.verde { color: #7dffb2; }
.pantalla .ayuda { margin: 0; }