/* DOOOM · doooom.css */
:root {
  --u: clamp(10px, calc(1.3vmin + 2.5px), 13px);
  --tb: clamp(46px, 9vmin, 68px);
  --naranja: #ff6a3a;
  --texto: #e8b48a;
  --borde: #6b1d12;
  --fondo-panel: rgba(10, 4, 4, 0.74);
}
html, body {
  margin: 0; height: 100%; background: #050303; overflow: hidden;
  font-family: "Courier New", monospace; color: var(--texto);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  touch-action: none; -webkit-tap-highlight-color: transparent;
}
#juego { position: fixed; inset: 0; overflow: hidden; }
#vista { position: absolute; inset: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated; image-rendering: crisp-edges; }
.oculta { display: none !important; }

/* ---------- Arma en primera persona ---------- */
#arma {
  position: absolute; left: 50%; bottom: 0; height: calc(min(52vh, 84vw) * var(--esc-arma, 1)); width: auto;
  transform: translateX(-50%) translateY(var(--bob, 0px));
  image-rendering: pixelated; pointer-events: none; z-index: 3;
}
#destello { position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 4; background: radial-gradient(ellipse at center, rgba(150,0,0,0) 30%, rgba(190,10,10,.78) 100%); }

/* ---------- Marcador ---------- */
#hud {
  position: absolute; z-index: 6; pointer-events: none;
  left: calc(var(--u) * .8 + env(safe-area-inset-left, 0px)); top: calc(var(--u) * .8 + env(safe-area-inset-top, 0px));
  width: calc(var(--u) * 12.6); box-sizing: border-box;
  padding: calc(var(--u) * .55); background: var(--fondo-panel); border: 1px solid var(--borde);
  font-size: var(--u); line-height: 1.25; text-shadow: 1px 1px 0 #000;
}
.hud-fila { display: flex; align-items: center; gap: calc(var(--u) * .5); }
.hud-cabecera { margin-bottom: calc(var(--u) * .4); }
#hud-cara { flex: 0 0 auto; width: calc(var(--u) * 3.4); height: calc(var(--u) * 3.4); border-radius: 50%; overflow: hidden; border: 2px solid var(--naranja); background: #1a0c0a; position: relative; }
#cara-img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; transform: scale(1.35); transform-origin: 50% 25%; image-rendering: pixelated; }
.hud-nivel { display: flex; flex-direction: column; min-width: 0; }
.hud-nivel span:first-child { color: var(--naranja); font-weight: bold; }
.hud-cuerpo { align-items: flex-end; margin-bottom: calc(var(--u) * .4); }
#botella { --bh: calc(var(--u) * 8.6); position: relative; flex: 0 0 auto; height: var(--bh); }
#cuerpo-vacio { display: block; height: var(--bh); width: auto; filter: brightness(.3) grayscale(1); image-rendering: pixelated; }
#cuerpo-lleno { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; overflow: hidden; }
#cuerpo-lleno img { position: absolute; left: 0; bottom: 0; height: var(--bh); width: auto; image-rendering: pixelated; }
.hud-datos { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: calc(var(--u) * .2); }
.dato { display: flex; justify-content: space-between; align-items: baseline; gap: calc(var(--u) * .4); white-space: nowrap; }
.dato .etq { color: #b48a6a; font-size: calc(var(--u) * .95); }
.dato b { color: #ffd9a0; }
.barra { height: calc(var(--u) * .45); background: #2a1512; border: 1px solid #4a2a20; }
.barra i { display: block; height: 100%; width: 0%; background: #4a9bff; }
.hud-pie { flex-direction: column; align-items: stretch; gap: calc(var(--u) * .15); border-top: 1px solid var(--borde); padding-top: calc(var(--u) * .4); }
#hud-arma { max-width: 60%; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Botón de sonido ---------- */
#silencio {
  position: absolute; z-index: 25; right: calc(var(--u) * .8 + env(safe-area-inset-right, 0px)); top: calc(var(--u) * .8 + env(safe-area-inset-top, 0px));
  width: clamp(40px, 7vmin, 48px); height: clamp(40px, 7vmin, 48px); padding: 0; cursor: pointer;
  font-size: clamp(18px, 3.4vmin, 24px); line-height: 1; color: #ffd9a0; background: rgba(20, 8, 6, .7);
  border: 2px solid rgba(255, 106, 58, .7); border-radius: 10px; touch-action: none;
}
#silencio:hover, #silencio:focus-visible { background: rgba(255, 106, 58, .4); outline: none; }

/* Pantallas bajas (móvil en horizontal): marcador más compacto */
@media (max-height: 460px) {
  #botella { --bh: calc(var(--u) * 6.2); }
  #hud-cara { width: calc(var(--u) * 2.6); height: calc(var(--u) * 2.6); }
  .hud-cabecera { margin-bottom: calc(var(--u) * .2); }
  .hud-cuerpo { margin-bottom: calc(var(--u) * .2); }
  .hud-pie { padding-top: calc(var(--u) * .2); }
  #hud { padding: calc(var(--u) * .4); }
}

#minimapa { display: block; width: 100%; height: auto; aspect-ratio: 1; margin-top: calc(var(--u) * .5); image-rendering: pixelated; image-rendering: crisp-edges; }

/* ---------- Avisos ---------- */
#aviso {
  position: absolute; z-index: 7; left: 50%; top: 40%; transform: translateX(-50%); pointer-events: none;
  padding: calc(var(--u) * .5) calc(var(--u) * 1.1); background: rgba(10, 4, 4, .8); border: 1px solid var(--borde);
  color: #ffd9a0; font-size: calc(var(--u) * 1.15); text-align: center; opacity: 0; transition: opacity .25s; max-width: 70vw;
}
#aviso.visible { opacity: 1; }

/* ---------- Controles táctiles ---------- */
#tactil { display: none; position: absolute; inset: 0; z-index: 8; pointer-events: none; }
body.tactil #tactil { display: block; }
#tactil button {
  pointer-events: auto; touch-action: none; color: #ffd9a0; background: rgba(20, 8, 6, .62);
  border: 2px solid rgba(255, 106, 58, .7); border-radius: 12px; font-family: inherit; font-weight: bold;
  width: var(--tb); height: var(--tb); font-size: calc(var(--tb) * .42); padding: 0; cursor: pointer;
}
#tactil button.pulsado { background: rgba(255, 106, 58, .55); }
#cruz {
  position: absolute; left: calc(var(--u) * .8 + env(safe-area-inset-left, 0px)); bottom: calc(var(--u) * .8 + env(safe-area-inset-bottom, 0px));
  display: grid; grid-template-columns: repeat(3, var(--tb)); grid-template-rows: repeat(2, var(--tb)); gap: 6px;
  grid-template-areas: ". arr ." "izq abj der";
}
#b-arr { grid-area: arr; } #b-izq { grid-area: izq; } #b-abj { grid-area: abj; } #b-der { grid-area: der; }
#b-fuego {
  position: absolute; right: calc(var(--u) * 1.2 + env(safe-area-inset-right, 0px)); bottom: calc(var(--u) * 1.2 + env(safe-area-inset-bottom, 0px));
  width: calc(var(--tb) * 1.7) !important; height: calc(var(--tb) * 1.7) !important; border-radius: 50% !important;
  font-size: calc(var(--tb) * .28) !important; letter-spacing: 1px; background: rgba(120, 20, 10, .7) !important;
}

/* ---------- Pantallas ---------- */
.pantalla { position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; background: rgba(5, 3, 3, .9); }
.caja { text-align: center; max-height: 100%; max-width: 100%; overflow-y: auto; padding: 12px 16px; box-sizing: border-box; }
.caja h1 { margin: 0 0 6px; font-size: clamp(32px, 9vmin, 72px); letter-spacing: .12em; color: var(--naranja); text-shadow: 3px 3px 0 #300a05; }
.caja .sub { margin: 4px 0 14px; font-size: clamp(14px, 2.6vmin, 20px); color: #ffd9a0; }
.caja .ayuda { margin: 14px 0 0; font-size: clamp(11px, 1.9vmin, 14px); color: #b48a6a; }
.libro-fila { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 8px 0; }
.botonera { display: flex; gap: 8px; }
.libro-nombre { width: 84px; text-align: right; color: var(--naranja); font-weight: bold; font-size: clamp(13px, 2.2vmin, 16px); }
#juego.pantalla-abierta #tactil { display: none; }
@media (max-width: 520px) {
  .libro-fila { flex-direction: column; gap: 4px; margin: 10px 0; }
  .libro-nombre { width: auto; text-align: center; }
}
.caja button.btn {
  font-family: inherit; font-weight: bold; color: #ffd9a0; background: #2a0f0a; border: 2px solid var(--naranja); border-radius: 8px;
  min-width: clamp(40px, 7vmin, 54px); height: clamp(40px, 7vmin, 54px); font-size: clamp(14px, 2.6vmin, 20px); cursor: pointer; padding: 0 12px;
}
.caja button.btn:hover, .caja button.btn:focus-visible { background: #5a1f10; outline: none; }
.botones { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 8px; }
.botones .btn { padding: 0 18px !important; }

/* Pantallas bajas: minimapa pequeño y cruceta en una sola fila (van al final para ganar a las reglas generales) */
@media (max-height: 460px) {
  #minimapa { width: calc(var(--u) * 6.8); margin-top: calc(var(--u) * .3); }
  #cruz { grid-template-columns: repeat(4, var(--tb)); grid-template-rows: var(--tb); grid-template-areas: "izq arr abj der"; }
}

/* ---------- Selección de personaje ---------- */
#pantalla-personajes { background: #050303; }
.sel { display: flex; align-items: center; justify-content: center; gap: clamp(12px, 3vmin, 40px); width: 100%; height: 100%; box-sizing: border-box; padding: 12px clamp(12px, 3vw, 40px); }
.sel-prev { flex: 0 1 34%; max-width: 330px; height: 100%; display: flex; align-items: flex-end; justify-content: center; padding: 8px 0; box-sizing: border-box; min-width: 0;
  background: radial-gradient(ellipse at 50% 70%, rgba(255, 106, 58, .28), rgba(255, 106, 58, 0) 70%); }
#sel-cuerpo { max-width: 100%; max-height: 92%; width: auto; height: auto; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 6px 0 rgba(0,0,0,.6)); }
.sel-panel { flex: 1 1 66%; min-width: 0; max-width: 820px; max-height: 100%; overflow: hidden; box-sizing: border-box; padding: clamp(14px, 3vmin, 28px); background: #0c0a0a; border: 1px solid var(--borde); border-radius: 22px; text-align: left; }
.sel-panel h1 { margin: 0; font-size: clamp(26px, 6.5vmin, 54px); letter-spacing: .1em; color: var(--naranja); text-shadow: 3px 3px 0 #300a05; }
.sel-panel .sub { margin: 4px 0 clamp(8px, 2vmin, 16px); font-size: clamp(13px, 2.4vmin, 18px); color: #ffd9a0; }
.sel-flechas { display: flex; gap: 10px; margin-bottom: clamp(8px, 2vmin, 14px); }
.redondo { width: clamp(40px, 7vmin, 52px); height: clamp(40px, 7vmin, 52px); border-radius: 50%; padding: 0; cursor: pointer; font-family: inherit; font-size: clamp(18px, 3.4vmin, 24px); line-height: 1; color: #ffd9a0; background: #1a100d; border: 1px solid #6b3a2a; }
.redondo:hover:not(:disabled), .redondo:focus-visible { background: #3a1a10; border-color: var(--naranja); outline: none; }
.redondo:disabled { opacity: .3; cursor: default; }
#sel-pista { overflow: hidden; margin-bottom: clamp(10px, 2.4vmin, 18px); }
#sel-tarjetas { position: relative; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; padding: 6px 4px 10px; scrollbar-width: none; -webkit-overflow-scrolling: touch; touch-action: pan-x; }
#sel-tarjetas::-webkit-scrollbar { display: none; }
.tarjeta { position: relative; flex: 0 0 auto; width: clamp(96px, 22vmin, 190px); aspect-ratio: 3 / 4; padding: 0; border: 2px solid #2a1a14; border-radius: 16px; overflow: hidden; cursor: pointer; background: #140c09; scroll-snap-align: center; transition: transform .15s, border-color .15s; }
.tarjeta img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 10%; image-rendering: pixelated; pointer-events: none; }
.tarjeta::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 35%; background: linear-gradient(to top, rgba(10, 4, 4, .75), rgba(10, 4, 4, 0)); pointer-events: none; }
.tarjeta:hover { border-color: #6b3a2a; }
.tarjeta.elegida { border-color: var(--naranja); transform: scale(1.04); box-shadow: 0 0 0 2px rgba(255, 106, 58, .35); }
.tarjeta:focus-visible { outline: 2px solid #ffd9a0; outline-offset: 2px; }
button.btn.grande { font-family: inherit; font-weight: bold; color: #ffd9a0; background: #6b1d12; border: 2px solid var(--naranja); border-radius: 10px; height: clamp(44px, 8vmin, 58px); padding: 0 clamp(24px, 5vmin, 48px); font-size: clamp(16px, 3vmin, 22px); cursor: pointer; }
button.btn.grande:hover, button.btn.grande:focus-visible { background: #9a2a18; outline: none; }

/* Móvil en vertical o pantalla estrecha: el personaje arriba, el panel debajo */
@media (max-aspect-ratio: 1 / 1) {
  .sel { flex-direction: column; justify-content: flex-start; gap: 8px; padding: 10px 10px 12px; }
  .sel-prev { flex: 1 1 0; min-height: 0; width: 100%; max-width: none; height: auto; max-height: none; }
  .sel-panel { flex: 0 0 auto; width: 100%; max-width: none; }
  #sel-cuerpo { max-height: 100%; }
}
@media (min-aspect-ratio: 1 / 1) {
  .sel { padding-right: 62px; }     /* deja sitio al botón de sonido */
}
@media (max-height: 460px) and (min-aspect-ratio: 1 / 1) {
  .sel-panel { padding: 10px 14px; }
  .sel-panel .sub { margin-bottom: 6px; }
  .sel-flechas { margin-bottom: 6px; }
  .tarjeta { width: clamp(70px, 19vh, 110px); }
  #sel-pista { margin-bottom: 8px; }
}

/* ---------- Marcador: cristales y poderes ---------- */
.dato-poderes b { white-space: normal; text-align: right; max-width: 70%; font-size: calc(var(--u) * .85); line-height: 1.15; color: #8ee0ff; }

/* ---------- Botón de cambio de arma (táctil) ---------- */
#b-arma { position: absolute; right: calc(var(--u) * 1.6 + env(safe-area-inset-right, 0px)); bottom: calc(var(--tb) * 1.7 + var(--u) * 2.2 + env(safe-area-inset-bottom, 0px));
  width: calc(var(--tb) * 1.1) !important; height: calc(var(--tb) * .8) !important; font-size: calc(var(--tb) * .24) !important; border-radius: 12px !important; letter-spacing: 1px; }

/* ---------- Pregunta del cristal ---------- */
#pantalla-pregunta { background: rgba(5, 3, 3, .985); }
.preg { width: min(900px, 100%); max-height: 100%; overflow-y: auto; box-sizing: border-box; padding: clamp(12px, 2.6vmin, 26px); text-align: left; }
.preg-cab { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: clamp(6px, 1.6vmin, 14px); font-size: clamp(12px, 2vmin, 15px); color: #b48a6a; }
.chip { display: inline-block; padding: 3px 12px; border-radius: 999px; font-weight: bold; color: #0a0404; background: #4a9bff; font-size: clamp(12px, 2.1vmin, 16px); }
.preg h2 { margin: 0 0 clamp(10px, 2.2vmin, 20px); font-size: clamp(16px, 3vmin, 26px); line-height: 1.3; color: #ffe2b8; font-weight: bold; overflow-wrap: anywhere; }
#preg-opciones { display: flex; flex-direction: column; gap: clamp(6px, 1.4vmin, 12px); }
.opcion { display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box; min-height: 44px; padding: clamp(8px, 1.5vmin, 14px) clamp(10px, 2vmin, 18px); text-align: left; cursor: pointer;
  font-family: inherit; font-size: clamp(14px, 2.5vmin, 20px); line-height: 1.25; color: #ffd9a0; background: #1a100d; border: 2px solid #4a2a20; border-radius: 12px; overflow-wrap: anywhere; }
.opcion .letra { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 1.9em; height: 1.9em; border-radius: 50%; font-weight: bold; color: #0a0404; background: #ff6a3a; }
.opcion:hover:not(:disabled), .opcion.marcada { border-color: #ff6a3a; background: #2a1510; outline: none; }
.opcion:disabled { cursor: default; }
.preg.compacta #preg-opciones { display: none; }
.preg.compacta #preg-resultado { margin-top: 0; }
.opcion.ok { border-color: #4ad36a; background: #10301a; }
.opcion.ok .letra { background: #4ad36a; }
.opcion.mal { border-color: #e04a3a; background: #3a1410; }
.opcion.mal .letra { background: #e04a3a; }
#preg-resultado { margin-top: clamp(10px, 2.2vmin, 20px); padding-top: clamp(8px, 1.6vmin, 14px); border-top: 1px solid var(--borde); }
#preg-resultado p { margin: 0 0 clamp(6px, 1.3vmin, 10px); font-size: clamp(13px, 2.3vmin, 18px); line-height: 1.35; color: #ffd9a0; overflow-wrap: anywhere; }
#preg-veredicto { font-size: clamp(16px, 3vmin, 24px) !important; font-weight: bold; }
#preg-veredicto.bien { color: #6ee58a; } #preg-veredicto.fallo { color: #ff7a6a; }
#preg-premio { color: #8ee0ff !important; font-weight: bold; }
@media (max-height: 460px) {
  .preg { padding: 6px 12px; }
  .preg-cab { margin-bottom: 4px; }
  .preg h2 { margin-bottom: 6px; font-size: 15px; line-height: 1.2; }
  #preg-opciones { gap: 4px; }
  .opcion { min-height: 34px; padding: 3px 10px; gap: 8px; font-size: 14px; line-height: 1.15; }
  .opcion .letra { width: 1.6em; height: 1.6em; }
  #preg-resultado { margin-top: 6px; padding-top: 6px; }
}
.preg.compacta h2 { margin-bottom: 8px; }
.preg.compacta #preg-resultado p { margin-bottom: 5px; }
/* Móvil en vertical: el aviso baja para no tapar el marcador ni el minimapa */
@media (max-aspect-ratio: 1 / 1) {
  #aviso { top: 66%; }
}
/* Pantallas bajas: los poderes (hasta 5 a la vez) ocupan menos alto para no chocar con la cruceta */
@media (max-height: 460px) {
  .dato-poderes b { font-size: calc(var(--u) * .72); line-height: 1.05; max-width: 78%; }
}

/* ---------- Identificación del alumno ---------- */
#login-form { display: grid; gap: 10px; width: min(360px, 88vw); margin: 0 auto; text-align: left; }
#login-form label { display: grid; gap: 4px; font-size: clamp(12px, 2vmin, 15px); color: #b48a6a; }
#login-form input { width: 100%; box-sizing: border-box; height: 40px; padding: 0 12px; font-family: inherit; font-size: 16px; color: #ffd9a0;
  background: #1a100d; border: 2px solid #4a2a20; border-radius: 10px; -webkit-user-select: text; user-select: text; touch-action: manipulation; }
#login-form input:focus { outline: none; border-color: var(--naranja); }
.login-error { min-height: 1.3em; margin: 0; font-size: clamp(12px, 2vmin, 15px); line-height: 1.3; color: #ff7a6a; text-align: center; }
#login-entrar { justify-self: center; }
@media (max-height: 460px) {
  #login-form { grid-template-columns: 1fr 1fr; width: min(520px, 90vw); gap: 6px 10px; }
  #login-form input { height: 34px; }
  #login-form .login-error, #login-form #login-entrar { grid-column: 1 / -1; }
  .login-error { min-height: 1.1em; }
}

/* ---------- Menú: ranking por libro y elección continuar / de cero ---------- */
.menu-cuerpo { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 4px 28px; }
.ranking { flex: 0 1 300px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 8px 0 0; text-align: left; }
.ranking-libro { min-width: 0; padding: 6px 8px; background: rgba(20, 8, 6, .6); border: 1px solid var(--borde); border-radius: 8px; }
.ranking-libro h3 { margin: 0 0 3px; font-size: 13px; color: var(--naranja); }
.ranking-fila { display: flex; justify-content: space-between; gap: 6px; font-size: 12px; line-height: 1.4; color: #ffd9a0; }
.ranking-fila span:first-child { min-width: 0; overflow-wrap: anywhere; }
.ranking-fila span:last-child { flex: 0 0 auto; }
.ranking-fila.vacia { color: #7a5a48; }
.eleccion { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; background: #050303; }
.eleccion-caja { max-width: 100%; padding: 12px 16px; box-sizing: border-box; text-align: center; }
.eleccion-caja .sub { margin: 0 0 14px; }

/* ---------- Botón de guardar partida (arriba a la derecha, debajo del silencio) ---------- */
#guardar {
  position: absolute; z-index: 25; right: calc(var(--u) * .8 + env(safe-area-inset-right, 0px));
  top: calc(var(--u) * .8 + clamp(40px, 7vmin, 48px) + 8px + env(safe-area-inset-top, 0px));
  height: clamp(32px, 5.6vmin, 38px); padding: 0 10px; cursor: pointer; font-family: inherit; font-weight: bold; font-size: 12px; letter-spacing: 1px;
  color: #ffd9a0; background: rgba(20, 8, 6, .7); border: 2px solid rgba(255, 106, 58, .7); border-radius: 10px; touch-action: none;
}
#guardar:hover, #guardar:focus-visible { background: rgba(255, 106, 58, .4); outline: none; }
#juego.pantalla-abierta #guardar { display: none; }

/* ---------- Récords del nivel (debajo del mapa) ---------- */
.hud-record { margin-top: calc(var(--u) * .4); padding-top: calc(var(--u) * .4); border-top: 1px solid var(--borde); display: flex; flex-direction: column; gap: calc(var(--u) * .15); }
.hud-record-nombre { font-size: calc(var(--u) * .85); line-height: 1.1; color: #b48a6a; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hud-record-nombre:empty { display: none; }
@media (max-height: 460px) { .hud-record { display: none; } }
@media (max-height: 460px) {
  .ranking { gap: 5px; margin-top: 4px; flex-basis: 340px; }
  .ranking-libro { padding: 3px 6px; }
  .ranking-libro h3 { margin-bottom: 1px; font-size: 12px; }
  .ranking-fila { font-size: 11px; line-height: 1.2; }
  .caja .ayuda { margin-top: 8px; }
}