/* 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 { white-space: nowrap; }
.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; }

/* ---------- Premio recogido: mensaje grande del color del premio + destello en los bordes ---------- */
#premio-flash {
  position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0; --c: #ffd23a;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 45%, var(--c) 135%);
}
#premio-flash.visible { animation: premio-flash .7s ease-out; }
@keyframes premio-flash { 0% { opacity: .8; } 100% { opacity: 0; } }
#premio {
  position: absolute; z-index: 7; left: 50%; top: 14%; transform: translateX(-50%); pointer-events: none; display: none;
  flex-direction: column; align-items: center; gap: calc(var(--u) * .3); text-align: center; box-sizing: border-box;
  max-width: 70vw; padding: calc(var(--u) * .7) calc(var(--u) * 1.8); --c: #ffd9a0; --dur: 2.4s;
  background: rgba(10, 4, 4, .9); border: 3px solid var(--c); box-shadow: 0 0 calc(var(--u) * 1.6) var(--c), inset 0 0 calc(var(--u) * .8) rgba(255, 255, 255, .08);
}
#premio.visible { display: flex; animation: premio-pop .35s ease-out, premio-fade var(--dur) linear forwards; }
@keyframes premio-pop { 0% { scale: .55; } 65% { scale: 1.1; } 100% { scale: 1; } }
@keyframes premio-fade { 0%, 84% { opacity: 1; } 100% { opacity: 0; } }
#premio-titulo { font-size: calc(var(--u) * 2.4); line-height: 1.1; letter-spacing: .06em; color: var(--c); text-shadow: 2px 2px 0 #000; overflow-wrap: break-word; }
#premio-detalle { font-size: calc(var(--u) * 1.3); line-height: 1.25; color: #ffe2b8; text-shadow: 1px 1px 0 #000; overflow-wrap: break-word; }
#premio-detalle:empty { display: none; }

/* ---------- 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 {                       /* en vertical: a la derecha del marcador (que ocupa la izquierda) y por encima de los botones, en la zona que queda libre */
    top: 50%; left: auto; transform: none; width: max-content; box-sizing: border-box;
    right: calc(var(--u) * .8 + env(safe-area-inset-right, 0px)); max-width: calc(100vw - var(--u) * 15.4 - env(safe-area-inset-right, 0px));
  }
}
/* 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; }
}

/* ---------- Desplegable de curso (igual que los campos de texto) ---------- */
#login-form select { width: 100%; box-sizing: border-box; height: 40px; padding: 0 10px; font-family: inherit; font-size: 16px; color: #ffd9a0;
  background: #1a100d; border: 2px solid #4a2a20; border-radius: 10px; touch-action: manipulation; }
#login-form select:focus { outline: none; border-color: var(--naranja); }
@media (max-height: 460px) { #login-form select { height: 34px; } }

/* ---------- Botones de unidad: candado, estrellas y barra de aciertos ---------- */
.caja button.btn.unidad { width: clamp(40px, 7.4vmin, 58px); min-width: 0; height: auto; min-height: clamp(52px, 9vmin, 66px); padding: 3px 2px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 2px; font-size: clamp(14px, 2.6vmin, 18px); }
.u-num { line-height: 1.1; }
.u-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2px; width: 100%; text-align: center; font-size: 10px; line-height: 1.15; white-space: nowrap; }
.u-cat.cero { opacity: .35; }
.u-cat.corona { font-size: 12px; }
.u-cat.gra { color: #4a9bff; } .u-cat.voc { color: #4ad36a; } .u-cat.com { color: #a66bff; } .u-cat.fon { color: #ffd23a; }
.u-barra { display: block; width: 88%; height: 4px; background: #2a1512; border: 1px solid #4a2a20; box-sizing: content-box; }
.u-barra i { display: block; height: 100%; width: 0%; background: #4a9bff; }
.caja button.btn.unidad.bloqueada { opacity: .4; cursor: not-allowed; }
.caja button.btn.unidad.bloqueada:hover { background: #2a0f0a; }
.doblones { margin: -8px 0 10px; font-size: clamp(12px, 2.2vmin, 16px); color: #ffd23a; }
.doblones:empty { display: none; }
.barra-cr i { background: #4ad36a; }
.barra-cr { margin-top: calc(var(--u) * .15); }
.libro-nombre { flex: 0 0 auto; width: auto; min-width: 84px; white-space: nowrap; }
/* Pantallas bajas: botones de unidad más anchos con las 4 categorías en una fila (menos alto); minimapa algo menor para dar sitio a la barra de cristales */
@media (max-height: 460px) {
  .caja button.btn.unidad { width: 56px; min-height: 40px; }
  #minimapa { width: calc(var(--u) * 6.2); }
}
@media (max-height: 460px) {
  /* botón de unidad apaisado: número a la izquierda, las 4 categorías en 2x2 a la derecha y la barra debajo */
  .caja button.btn.unidad { width: 64px; min-height: 36px; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1px 4px; padding: 2px 2px 0; }
  .u-num { flex: 0 0 14px; text-align: center; }
  .u-cats { flex: 0 0 36px; width: 36px; }
  .u-barra { flex: 0 0 auto; width: 90%; margin: 0 auto 3px; }
  .menu-cuerpo { gap: 4px 20px; }
  .botonera { gap: 6px; }
  .libro-fila { margin: 3px 0; }
  .ranking { flex: 1 1 100%; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; margin-top: 2px; }
}

/* ---------- Meta diaria en la partida (derecha, debajo de silencio y guardar) ---------- */
#hud-der {
  position: absolute; z-index: 6; pointer-events: none; display: flex; flex-direction: column; gap: calc(var(--u) * .5);
  right: calc(var(--u) * .8 + env(safe-area-inset-right, 0px));
  top: calc(var(--u) * .8 + clamp(40px, 7vmin, 48px) + 8px + clamp(32px, 5.6vmin, 38px) + 8px + env(safe-area-inset-top, 0px));
  width: calc(var(--u) * 10.6);
}
#hud-dia, #hud-lecc {
  box-sizing: border-box; display: flex; flex-direction: column; gap: calc(var(--u) * .2); 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.oculta ~ #hud-der { display: none !important; }
#hud-dia.lograda { border-color: #4ad36a; }
#hud-dia .dia-regalo b { color: #4ad36a; }
#hud-lecc.completa { border-color: #ffd23a; }
#hud-lecc.completa b { color: #ffd23a; }

/* ---------- Pergamino de una sala oculta (lección de gramática) ---------- */
#pantalla-leccion { background: rgba(5, 3, 3, .985); }
.lecc { width: min(900px, 100%); max-height: 100%; overflow-y: auto; box-sizing: border-box; padding: clamp(12px, 2.6vmin, 26px); text-align: left; touch-action: pan-y; --f: 1; }
.lecc-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); }
#lecc-punt { color: #6ee58a; font-weight: bold; text-align: right; }
.lecc h2 { margin: 0 0 clamp(8px, 1.8vmin, 16px); font-size: calc(clamp(16px, 3vmin, 26px) * var(--f)); line-height: 1.3; color: #ffe2b8; font-weight: bold; overflow-wrap: anywhere; }
#lecc-cuerpo { margin-bottom: clamp(10px, 2.2vmin, 20px); font-size: calc(clamp(14px, 2.5vmin, 20px) * var(--f)); line-height: 1.35; color: #ffd9a0; overflow-wrap: anywhere; }
#lecc-cuerpo p { margin: 0; }
#lecc-cuerpo ul { margin: 0; padding-left: 1.2em; }
#lecc-cuerpo li { margin-bottom: .5em; }
#lecc-cuerpo li:last-child { margin-bottom: 0; }
.lecc-fr { display: block; color: #ffb070; font-weight: bold; }
.lecc-es { display: block; color: #b48a6a; }
@media (max-height: 460px) {
  .lecc { padding: 6px 12px; }
  .lecc-cab { margin-bottom: 4px; }
  .lecc h2 { margin-bottom: 4px; }
  #lecc-cuerpo { margin-bottom: 6px; line-height: 1.2; }
  #lecc-cuerpo li { margin-bottom: .25em; }
  .lecc button.btn.grande { height: 38px; }
}

/* ---------- Menú: rankings con pestañas (Total · Doblones · Puntos · Días) y racha de días ---------- */
.ranking-panel { flex: 0 1 300px; margin: 8px 0 0; text-align: left; min-width: 0; }
.ranking-panel .ranking { flex: none; margin: 0; }
.rk-tabs { display: flex; gap: 4px; margin: 0 0 6px; }
.rk-tab { flex: 1 1 0; min-width: 0; height: 28px; padding: 0 4px; cursor: pointer; font-family: inherit; font-weight: bold; font-size: 12px; color: #b48a6a;
  background: rgba(20, 8, 6, .6); border: 1px solid var(--borde); border-radius: 8px; touch-action: manipulation; }
.rk-tab.activa { color: #ffd9a0; background: #5a1f10; border-color: var(--naranja); }
.rk-tab:hover, .rk-tab:focus-visible { background: #5a1f10; outline: none; }
.rk-filtro { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 6px; font-size: 12px; color: #b48a6a; }
.rk-filtro select { flex: 0 0 auto; height: 28px; padding: 0 6px; font-family: inherit; font-size: 12px; color: #ffd9a0; background: #1a100d; border: 1px solid var(--borde); border-radius: 8px; touch-action: manipulation; }
.rk-filtro select:focus { outline: none; border-color: var(--naranja); }
.ranking.semanal { grid-template-columns: minmax(0, 1fr); }
.rk-lista { display: block; }
.dia-menu { margin-top: -6px; color: #ffd9a0; }
@media (max-height: 460px) {
  .ranking-panel { flex: 1 1 100%; width: 100%; margin-top: 2px; }
  .rk-tabs { margin-bottom: 3px; }
  .rk-tab, .rk-filtro select { height: 24px; }
  .rk-filtro { margin-bottom: 3px; }
  .ranking.semanal .rk-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
}

/* ---------- Mapa grande (M o tocar el minimapa) ---------- */
#minimapa { pointer-events: auto; cursor: pointer; }
#pantalla-mapa { background: rgba(5, 3, 3, .97); cursor: pointer; }
.mapa-caja { width: 100%; height: 100%; box-sizing: border-box; padding: 10px 12px 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
#mapa-grande { display: block; flex: 1 1 auto; min-height: 0; max-width: 100%; image-rendering: pixelated; image-rendering: crisp-edges; }
.mapa-pie { margin: 0; flex: 0 0 auto; font-size: clamp(12px, 2.2vmin, 16px); color: #b48a6a; text-align: center; }

/* ---------- Pantallas bajas (móvil en horizontal): la columna derecha del marcador (meta diaria + lecciones) es más alta, así que el botón ARMA
   se pone junto al de FUEGO en vez de encima, y los avisos se estrechan para no tapar esa columna ---------- */
@media (max-height: 460px) {
  #b-arma { right: calc(var(--u) * 1.2 + var(--tb) * 1.7 + 10px + env(safe-area-inset-right, 0px)); bottom: calc(var(--u) * 1.2 + env(safe-area-inset-bottom, 0px)); }
  #aviso { width: max-content; box-sizing: border-box; max-width: min(56vw, calc(100vw - var(--u) * 27.6)); }   /* ni sobre el marcador de la izquierda ni sobre la columna de la derecha */
}

/* ---------- Premio recogido en pantallas verticales y bajas (no tapa el marcador, la columna derecha ni los botones) ---------- */
@media (max-aspect-ratio: 1 / 1) {
  #premio {
    top: 36%; left: auto; transform: none; width: max-content;
    right: calc(var(--u) * .8 + env(safe-area-inset-right, 0px)); max-width: calc(100vw - var(--u) * 15.4 - env(safe-area-inset-right, 0px));
  }
  #premio.visible ~ #aviso { top: 56%; }        /* mientras hay un premio en pantalla, el aviso baja debajo de él */
  #premio { padding: calc(var(--u) * .6) calc(var(--u) * .8); border-width: 2px; }
  #premio-titulo { letter-spacing: 0; font-size: min(calc(var(--u) * 2.4), calc((100vw - var(--u) * 17 - 4px) / 7.9)); }   /* la palabra más larga («INVISIBILIDAD») cabe entera */
}
@media (max-height: 460px) {
  #premio { top: calc(var(--u) * .8); max-width: 50vw; padding: calc(var(--u) * .5) calc(var(--u) * 1.2); }
}