/* ============================================================================
   HUD in-game estándar (ver ui/ingamehud.js). DOM puro superpuesto al juego:
   position:absolute, pointer-events:none, para no robarle clicks al canvas.

   Todas las métricas están definidas para una referencia de diseño de 1080p
   y se multiplican por --hud-scale (alto real del contenedor / 1080), que el
   módulo recalcula solo vía ResizeObserver. Así se ve proporcionalmente
   igual en 720p, 1080p, 1440p y 4K. La única excepción es el timer: su
   anillo vive en un <canvas> de baja resolución interna (--timer-resolution)
   que ya se escala solo junto con --timer-size, no hace falta --hud-scale.

   No tocar client/src/ui/hud.js (el HUD viejo, en producción) — este archivo
   es el módulo nuevo, todavía sin enganchar a ningún minijuego.
   ========================================================================== */

.ihud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  font-family: 'Pixeloid Sans', ui-monospace, monospace;

  --hud-scale: 1; /* seteado en JS = alto del contenedor / 1080 */

  /* ---- Fila de jugadores ---- */
  --row-bottom-margin: 25px;   /* separación entre la fila y el borde inferior de la pantalla */
  --card-gap: 80px;            /* separación horizontal entre tarjetas de jugador */
  --portrait-size: 131px;       /* lado del retrato de cada jugador (sin marco ni máscara) */
  --points-font-size: 32px;    /* tamaño de fuente del número de puntos, arriba del retrato */

  /* ---- Timer ---- */
  --timer-size: 96px;          /* diámetro del círculo del timer */
  --timer-ring-width: 15;       /* grosor del trazo del anillo (unidades del canvas 0..100, ya proporcional) */
  --timer-resolution: 20;      /* lado en px del canvas interno del anillo, antes de escalar (pixelado) */
  --timer-margin-top: 20px;    /* margen del timer respecto al borde superior */
  --timer-margin-right: 20px;  /* margen del timer respecto al borde derecho */
  --timer-font-size: 34px;     /* tamaño de fuente del número de segundos restantes */

  /* ---- Controles (ayuda de teclas, arriba y centrada) ---- */
  --controls-margin-top: 20px;  /* margen de la fila de controles respecto al borde superior */
  --controls-font-size: 22px;   /* tamaño de fuente de la ayuda de controles */
  --controls-gap: 26px;         /* separación entre una entrada de control y la siguiente */
  --controls-opacity: 0.85;     /* opacidad de la ayuda: se lee, pero no compite con el juego */

  /* ---- General ---- */
  --hud-opacity: 1;            /* opacidad general de todo el HUD */
  --text-outline-width: 3.5px; /* grosor del contorno/sombra de todo el texto, para legibilidad */

  opacity: var(--hud-opacity);
}

/* Contorno de 4 direcciones: barato, legible sobre cualquier fondo, sin
   depender de -webkit-text-stroke (no se ve igual en todos los navegadores).
   Sin placa detrás de los puntos, este contorno es lo único que los separa
   del fondo del juego: no aflojarlo. */
.ihud-points, .ihud-timer-num, .ihud-controls {
  text-shadow:
    calc(var(--text-outline-width) * var(--hud-scale)) 0 0 #000,
    calc(var(--text-outline-width) * var(--hud-scale) * -1) 0 0 #000,
    0 calc(var(--text-outline-width) * var(--hud-scale)) 0 #000,
    0 calc(var(--text-outline-width) * var(--hud-scale) * -1) 0 #000;
}

/* ---------------------------------------------------------------- jugadores */
.ihud-row {
  position: absolute;
  left: 50%;
  bottom: calc(var(--row-bottom-margin) * var(--hud-scale));
  transform: translateX(-50%);
  display: flex;
  align-items: flex-end;
  gap: calc(var(--card-gap) * var(--hud-scale));
}

.ihud-card {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Sin marco circular: es la cabeza 3D tal cual la renderiza el snapshot
   (fondo transparente), sin máscara ni borde. `isYou` no pinta nada hoy
   —Julio sacó el resaltado verde—, pero la clase `.you` sigue llegando al
   DOM por si más adelante se resalta de otra forma.

   `overflow:hidden` recorta lo que el snapshot renderiza por fuera del
   encuadre: la cámara encuadra la cabeza sin melena (ver ingamehud.js), así
   que en las caras de pelo largo la cortina sobra por abajo y se corta acá.
   El foco es la cabeza, no el peinado completo. */
.ihud-portrait {
  position: relative;
  width: calc(var(--portrait-size) * var(--hud-scale));
  height: calc(var(--portrait-size) * var(--hud-scale));
  overflow: hidden;
}
.ihud-portrait canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}

/* Puntos: ARRIBA del retrato y centrados, sin placa detrás (Julio la sacó
   del layout; --plate-height/--plate-opacity ya no existen). */
.ihud-points {
  margin-bottom: calc(4px * var(--hud-scale));
  font-size: calc(var(--points-font-size) * var(--hud-scale));
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-align: center;
}

/* --------------------------------------------------------------- controles */
/* Ayuda de teclas: arriba, centrada, por encima del área de juego. Se esconde
   sola (atributo `hidden` desde JS) cuando el juego no llama a setControls(),
   así no ocupa layout el que no la usa. Queda a la izquierda del timer, que
   vive pegado al borde derecho: con `right` a la altura del timer, la ayuda
   nunca se le monta encima aunque tenga muchas entradas. */
.ihud-controls {
  position: absolute;
  top: calc(var(--controls-margin-top) * var(--hud-scale));
  left: 0;
  right: calc((var(--timer-size) + var(--timer-margin-right) * 2) * var(--hud-scale));
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: calc(var(--controls-gap) * var(--hud-scale)) calc(var(--controls-gap) * var(--hud-scale));
  font-size: calc(var(--controls-font-size) * var(--hud-scale));
  line-height: 1;
  color: #fff;
  opacity: var(--controls-opacity);
}
.ihud-controls[hidden] { display: none; }

.ihud-ctl {
  display: inline-flex;
  align-items: center;
  gap: calc(6px * var(--hud-scale));
  white-space: nowrap;
}

/* La tecla se pinta como tecla: recuadro tenue, mismo espíritu cuadrado que
   el resto del HUD (radio 0, ver la memoria del look Pixeloid). */
.ihud-key {
  font-weight: 700;
  padding: calc(3px * var(--hud-scale)) calc(7px * var(--hud-scale));
  border: calc(2px * var(--hud-scale)) solid rgba(255, 255, 255, 0.75);
  background: rgba(0, 0, 0, 0.45);
}

/* -------------------------------------------------------------------- timer */
.ihud-timer {
  position: absolute;
  top: calc(var(--timer-margin-top) * var(--hud-scale));
  right: calc(var(--timer-margin-right) * var(--hud-scale));
  width: calc(var(--timer-size) * var(--hud-scale));
  height: calc(var(--timer-size) * var(--hud-scale));
}
/* El anillo se dibuja en JS sobre un canvas de --timer-resolution px de lado
   (arc() 2D, sin SVG) y se estira a --timer-size con nearest-neighbor: eso es
   lo que da el borde pixelado, calibrable con el slider de resolución. */
.ihud-timer-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}
.ihud-timer-num {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: calc(var(--timer-font-size) * var(--hud-scale));
  font-weight: 700;
  color: #fff;
}
.ihud-timer.warn .ihud-timer-num { color: #ff6a6a; animation: ihud-pulse 0.5s steps(2) infinite; }
@keyframes ihud-pulse { 50% { transform: scale(1.16); } }