/* ============================================================
   Bomberman 2D — Estilo "consola"
   - Layout full-bleed (sin huecos, sin pie de página)
   - Canvas dimensionado por JS para llenar el alto disponible
     manteniendo el ratio 15:11
   - HUD como barra superior tipo arcade
   - Overlay como panel sólido con menú navegable con teclado
   ============================================================ */

/* ---------- Reset ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  width: 100%;
  background: #000;
  color: #f1f1f1;
  font-family: "Lucida Console", "Courier New", Courier, ui-monospace, monospace;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;        /* nada de scroll estilo web */
  user-select: none;       /* selección de texto estilo juego */
}

/* Sutiles scanlines CRT (no estorban al gameplay, dan atmósfera) */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background: repeating-linear-gradient(
    0deg,
    rgba(0,0,0,0.28) 0,
    rgba(0,0,0,0.28) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: multiply;
}

/* ---------- Layout principal (columna flexible, full-screen) ---------- */
#app {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: radial-gradient(ellipse at center, #0d0d20 0%, #000 80%);
}

/* ---------- HUD: barra superior tipo arcade ---------- */
#hud {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;        /* permite apilar HUD single arriba y multi abajo */
  background: #14142a;
  border-bottom: 3px solid #ffe066;
  box-shadow: 0 4px 0 #ff5e1a;
  z-index: 10;
}

.hud-row {
  display: flex;
  height: 56px;
}

.hud-row--multi {
  flex-direction: column;
  height: auto;
  padding: 6px 10px;
  gap: 4px;
  border-top: 2px solid #2a2a4a;
}

.hud-row.hidden { display: none; }

.hud-block {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4px 6px;
  border-right: 2px solid #2a2a4a;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.15));
}

.hud-block:last-child { border-right: none; }

.hud-label {
  font-size: 10px;
  letter-spacing: 2px;
  color: #9a9ad0;
  text-transform: uppercase;
  line-height: 1;
}

.hud-value {
  font-size: 20px;
  font-weight: 800;
  color: #ffe066;
  text-shadow: 0 0 6px rgba(255,224,102,0.6), 2px 2px 0 #c4410a;
  letter-spacing: 1px;
  line-height: 1.1;
  margin-top: 2px;
}

/* ---------- Escenario / canvas ---------- */
#stage {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 12px;
}

/* El tamaño real lo define main.js en función de la ventana.
   Aquí sólo el aspecto: pixeleado y "marco de consola" usando
   box-shadow para no alterar el tamaño del CSS box. */
#game {
  display: block;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: #0f0f1a;
  box-shadow:
    0 0 0 3px  #ffe066,                /* anillo amarillo interno */
    0 0 0 6px  #14142a,                /* separador oscuro */
    0 0 0 9px  #ff5e1a,                /* anillo rojo externo */
    0 14px 36px rgba(0,0,0,0.75);      /* sombra arrojada */
}

/* ---------- Overlay (menú) ---------- */
.overlay {
  position: absolute;
  inset: 0;
  background: rgba(8, 8, 18, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(3px);
  z-index: 100;
  transition: opacity 0.18s ease;
}

.overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

/* Panel: cuadro sólido con esquinas tipo "insignia" estilo arcade */
.overlay-card {
  position: relative;
  background: #14142a;
  border: 4px solid #ffe066;
  box-shadow: 12px 12px 0 #ff5e1a, 0 0 40px rgba(255,224,102,0.35);
  padding: 32px 40px 28px;
  max-width: 880px;          /* más ancho: el menú ahora tiene 2 columnas */
  width: 92%;
  text-align: center;
}

.overlay-corner {
  position: absolute;
  width: 14px;
  height: 14px;
  background: #ff5e1a;
  border: 2px solid #ffe066;
}
.overlay-corner.top-left     { top: -8px;    left: -8px;   }
.overlay-corner.top-right    { top: -8px;    right: -8px;  }
.overlay-corner.bottom-left  { bottom: -8px; left: -8px;   }
.overlay-corner.bottom-right { bottom: -8px; right: -8px;  }

.overlay-card h1 {
  font-size: 36px;
  letter-spacing: 5px;
  color: #ff6b6b;
  text-shadow: 4px 4px 0 #c4410a, 0 0 14px rgba(255,107,107,0.45);
  margin-bottom: 14px;
  text-transform: uppercase;
}

.overlay-card p {
  color: #d0d0e8;
  margin: 0 0 14px;
  line-height: 1.5;
  font-size: 14px;
  white-space: pre-line;       /* respeta saltos de línea del mensaje */
}

/* ============================================================
   Menú principal: 2 columnas (teclado | control remoto)
   ============================================================ */
.menu-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: start;
  margin-top: 12px;
}
.menu-col { min-width: 0; }
.menu-col--left  { text-align: left; }
.menu-col--right { text-align: center; }

/* En pantallas angostas, apilar vertical */
@media (max-width: 720px) {
  .menu-columns { grid-template-columns: 1fr; gap: 18px; }
  .menu-col--left { text-align: center; }
  .menu-col--left .controls { text-align: left; }
}

/* Panel "Control remoto" (columna derecha del menú) */
.menu-col--right {
  padding: 14px 12px;
  background: rgba(107, 199, 255, 0.06);
  border: 2px dashed #6bc7ff;
}
.remote-panel-label {
  font-size: 11px;
  letter-spacing: 4px;
  color: #6bc7ff;
  text-transform: uppercase;
  font-weight: 700;
}
.remote-panel-sub {
  font-size: 11px;
  color: #9a9ad0;
  margin-top: 4px;
  margin-bottom: 10px;
}
.remote-qr-wrap {
  background: #ffe066;
  padding: 8px;
  border: 3px solid #14142a;
  box-shadow: 4px 4px 0 #ff5e1a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
.remote-qr-wrap img {
  display: block;
  width: 160px;
  height: 160px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.remote-code-block {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-bottom: 8px;
}
.remote-code-label {
  font-size: 9px;
  letter-spacing: 3px;
  color: #9a9ad0;
  text-transform: uppercase;
}
.remote-code {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: 8px;
  color: #ffe066;
  text-shadow: 2px 2px 0 #c4410a, 0 0 12px rgba(255, 224, 102, 0.5);
  font-family: inherit;
  line-height: 1.1;
}
.remote-url-block {
  margin-top: 4px;
  text-align: center;
}
.remote-url-label {
  font-size: 9px;
  letter-spacing: 2px;
  color: #6a6a90;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.remote-url {
  font-size: 11px;
  color: #d0d0e8;
  word-break: break-all;
  background: #0d0d20;
  border: 1px solid #2a2a4a;
  padding: 4px 6px;
  border-radius: 4px;
  font-family: ui-monospace, "Lucida Console", "Courier New", monospace;
  user-select: all;        /* para que con un tap se seleccione y se pueda copiar */
  cursor: pointer;
}
.remote-status {
  font-size: 11px;
  letter-spacing: 1.5px;
  color: #d0d0e8;
  text-transform: uppercase;
  margin-top: 8px;
  min-height: 14px;
}
.remote-status.connected { color: #6bff95; }
.remote-status.waiting   { color: #6bc7ff; }
.remote-status.error     { color: #ff6b6b; }

/* Lista de controles con teclas estilo tecla física */
.controls {
  list-style: none;
  text-align: left;
  margin: 14px 0 18px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.04);
  border: 2px dashed #2a2a4a;
  font-size: 12px;
  color: #b8b8d8;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.controls li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.controls .key {
  background: #1f1f3a;
  border: 1px solid #3a3a66;
  padding: 3px 8px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  color: #ffe066;
  letter-spacing: 1px;
  white-space: nowrap;
}

/* ---------- Opciones del menú ---------- */
.overlay-menu {
  list-style: none;
  padding: 0;
  margin: 18px 0 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.menu-option {
  font-family: inherit;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: left;
  padding: 12px 16px 12px 16px;
  min-width: 280px;
  border: 3px solid #2a2a4a;
  background: #14142a;
  color: #d0d0e8;
  cursor: pointer;
  outline: none;
  position: relative;
  transition: transform 0.05s linear, background 0.05s linear, color 0.05s linear, border-color 0.05s linear;
}

/* Triángulo indicador a la izquierda (aparece cuando está enfocado/hover) */
.menu-option::before {
  content: '▶';
  position: absolute;
  left: -8px;
  top: 50%;
  transform: translateY(-50%) translateX(-12px);
  color: #ff5e1a;
  font-size: 18px;
  opacity: 0;
  transition: opacity 0.06s ease, transform 0.06s ease;
}

.menu-option:focus,
.menu-option:hover {
  border-color: #ffe066;
  background: #ffe066;
  color: #14142a;
  box-shadow: 6px 6px 0 #ff5e1a;
  transform: translate(-2px, -2px);
}

.menu-option:focus::before,
.menu-option:hover::before {
  opacity: 1;
  transform: translateY(-50%) translateX(-22px);
  color: #ff5e1a;
}

.menu-option:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 #c4410a;
}

/* ---------- Hint "Pulsa cualquier flecha" parpadeante ---------- */
.overlay-hint {
  margin-top: 14px;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #ffe066;
  text-shadow: 0 0 6px rgba(255,224,102,0.6);
  animation: blink 1.4s ease-in-out infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

/* ---------- Variantes por estado ---------- */
.overlay-card.victory h1 {
  color: #6bff95;
  text-shadow: 4px 4px 0 #2a8a4a, 0 0 14px rgba(107,255,149,0.5);
}
.overlay-card.victory { border-color: #6bff95; box-shadow: 12px 12px 0 #2a8a4a, 0 0 40px rgba(107,255,149,0.35); }
.overlay-card.victory .overlay-corner { border-color: #6bff95; background: #2a8a4a; }

.overlay-card.defeat h1 {
  color: #ff6b6b;
  text-shadow: 4px 4px 0 #c4410a, 0 0 14px rgba(255,107,107,0.5);
}

.overlay-card.paused h1 {
  color: #6bc7ff;
  text-shadow: 4px 4px 0 #2a6b8a, 0 0 14px rgba(107,199,255,0.5);
}
.overlay-card.paused { border-color: #6bc7ff; box-shadow: 12px 12px 0 #2a6b8a, 0 0 40px rgba(107,199,255,0.35); }
.overlay-card.paused .overlay-corner { border-color: #6bc7ff; background: #2a6b8a; }

/* ---------- Panel "Jugar con control remoto" (QR + código) ----------
   NOTA: el panel remoto ahora vive en la columna derecha del menú
   principal (clase .menu-col--right) y se muestra siempre.
   Los estilos están definidos en el bloque "Menú principal: 2
   columnas" más arriba. Las reglas de abajo son solo para
   compatibilidad y para el bloque de la HUD. */

/* ---------- HUD: bloque del control remoto ---------- */
.hud-block--remote {
  border-right: none;
  background: linear-gradient(180deg, rgba(255, 94, 26, 0.18), rgba(0, 0, 0, 0.25));
}
.hud-block--remote .hud-label { color: #ffb38a; }
.hud-block--remote.hidden { display: none; }
.hud-value--small {
  font-size: 14px;
  color: #6bff95;
  text-shadow: 0 0 6px rgba(107, 255, 149, 0.5), 2px 2px 0 #2a8a4a;
}

/* Variante "remote" del overlay: bordes y esquinas verdes-azuladas */
.overlay-card.remote { border-color: #6bc7ff; box-shadow: 12px 12px 0 #2a6b8a, 0 0 40px rgba(107, 199, 255, 0.35); }
.overlay-card.remote h1 { color: #6bc7ff; text-shadow: 4px 4px 0 #2a6b8a, 0 0 14px rgba(107, 199, 255, 0.5); }
.overlay-card.remote .overlay-corner { border-color: #6bc7ff; background: #2a6b8a; }

/* ---------- Responsive (pantallas pequeñas) ---------- */
@media (max-width: 720px) {
  #hud { height: 48px; }
  .hud-label { font-size: 8px;  letter-spacing: 1px; }
  .hud-value { font-size: 14px; }
  #stage    { padding: 6px; }
  .overlay-card         { padding: 22px 22px 18px; }
  .overlay-card h1      { font-size: 26px; letter-spacing: 3px; }
  .controls             { font-size: 11px; padding: 10px; }
  .menu-option          { font-size: 13px; min-width: 200px; padding: 10px 14px; }
}

/* ---------- Responsive (pantallas MUY anchas sin altura) ---------- */
@media (max-height: 480px) {
  #hud { height: 44px; }
  .hud-label { font-size: 8px; }
  .hud-value { font-size: 14px; }
  .overlay-card h1 { font-size: 24px; }
}

/* ============================================================
   HUD MULTI-PLAYER (una franja por jugador)
   ============================================================ */

.hud-multi-team-headers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  font-size: 10px;
  letter-spacing: 1.5px;
  font-weight: 800;
  text-transform: uppercase;
}
.hud-multi-team-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 8px;
  border-radius: 4px;
  border: 2px solid;
}
.hud-multi-team-header.team-0 {
  background: rgba(255, 85, 119, 0.18);
  border-color: #ff5577;
  color: #ff5577;
}
.hud-multi-team-header.team-1 {
  background: rgba(77, 208, 225, 0.18);
  border-color: #4dd0e1;
  color: #4dd0e1;
}
.hud-multi-team-header .team-lives {
  font-family: inherit;
  font-weight: 800;
  font-size: 12px;
}

.hud-multi-row {
  display: grid;
  grid-template-columns: 14px 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  background: rgba(255,255,255,0.04);
  border: 2px solid #2a2a4a;
  border-left-width: 6px;
  border-radius: 4px;
  font-size: 12px;
  color: #f1f1f1;
  transition: opacity 0.3s ease, filter 0.3s ease;
}
.hud-multi-row.team-0 { border-left-color: #ff5577; }
.hud-multi-row.team-1 { border-left-color: #4dd0e1; }
.hud-multi-row.dead {
  opacity: 0.35;
  filter: grayscale(0.8);
  text-decoration: line-through;
}

.hud-multi-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.4);
  box-shadow: 0 0 6px currentColor;
}
.hud-multi-name {
  font-weight: 800;
  letter-spacing: 1px;
  color: #ffe066;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hud-multi-lives {
  font-weight: 800;
  color: #ff6b6b;
  white-space: nowrap;
}
.hud-multi-stats {
  display: flex;
  gap: 8px;
  font-family: ui-monospace, monospace;
  font-size: 11px;
  color: #d0d0e8;
  white-space: nowrap;
}

/* ============================================================
   Lista de jugadores conectados (panel derecho del overlay,
   visible durante el lobby y fin de partida multi).
   ============================================================ */

.lobby-players-block {
  margin-top: 14px;
  padding: 10px 12px;
  background: rgba(107, 199, 255, 0.06);
  border: 2px dashed #6bc7ff;
  text-align: left;
}
.lobby-players-block.hidden { display: none; }

.lobby-players-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.lobby-players-title {
  font-size: 10px;
  letter-spacing: 2px;
  color: #6bc7ff;
  text-transform: uppercase;
  font-weight: 700;
}
.lobby-count {
  font-size: 11px;
  color: #ffe066;
  font-weight: 800;
}

#lobby-players {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#lobby-players .lobby-player {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  background: rgba(255,255,255,0.04);
  border: 2px solid #2a2a4a;
  border-radius: 6px;
  font-size: 13px;
  color: #f1f1f1;
}
#lobby-players .lobby-player--empty {
  opacity: 0.45;
  font-style: italic;
  color: #9a9ad0;
}
#lobby-players .lobby-player-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.2);
  flex: 0 0 auto;
}
#lobby-players .lobby-player--empty .lobby-player-dot {
  background: transparent !important;
  border-style: dashed;
}
#lobby-players .lobby-player-name {
  flex: 1;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#lobby-players .lobby-player-tag {
  font-size: 9px;
  letter-spacing: 1px;
  color: #ffe066;
  text-transform: uppercase;
  font-weight: 800;
  background: rgba(255, 224, 102, 0.18);
  border: 1px solid #ffe066;
  padding: 2px 6px;
  border-radius: 4px;
}
.lobby-empty {
  font-size: 12px;
  color: #9a9ad0;
  font-style: italic;
  padding: 6px 0;
  text-align: center;
  list-style: none;
}

/* ============================================================
   Modal de fin de partida multi
   ============================================================ */

.gameover-modal {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  background: rgba(8, 8, 18, 0.92);
  backdrop-filter: blur(3px);
  transition: opacity 0.2s ease;
}
.gameover-modal.hidden {
  display: none;
}
.gameover-card {
  background: #14142a;
  border: 6px solid #ffe066;
  box-shadow: 12px 12px 0 #ff5e1a, 0 0 40px rgba(255,224,102,0.4);
  padding: 32px 36px;
  max-width: 520px;
  width: 88%;
  text-align: center;
}
.gameover-card h1 {
  font-size: 42px;
  letter-spacing: 4px;
  color: #ffe066;
  text-shadow: 4px 4px 0 #c4410a, 0 0 14px rgba(255,224,102,0.5);
  margin-bottom: 12px;
  text-transform: uppercase;
}
.gameover-winner {
  font-size: 18px;
  font-weight: 800;
  color: #f1f1f1;
  letter-spacing: 2px;
  margin-bottom: 4px;
  min-height: 22px;
}
.gameover-subtitle {
  font-size: 13px;
  color: #d0d0e8;
  margin: 0 0 22px;
  letter-spacing: 1px;
}
.gameover-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}