/* Fans of Dark · estilos en píxel art: el lienzo retro a pantalla completa y, encima, las pantallas y el HUD.
   Los marcos de piedra y los botones son imágenes de 9 trozos que dibuja js/pixel-ui.js (variables --m-…); aquí solo se dice dónde van. */
:root { --fondo: #0b0812; --tinta: #f3eaff; --oro: #ffd34d; --naranja: #ff8a1f; --violeta: #b07cf0; --rojo: #ff5b5b; --verde: #6fdc72; --gris: #a89cc0;
  --pixel: "Press Start 2P", monospace; --texto: "Pixelify Sans", "Baloo 2", system-ui, sans-serif; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--fondo); color: var(--tinta); font: 400 17px/1.35 var(--texto); overflow: hidden; }
img, canvas, button, .marco, .panel, .ranura { image-rendering: pixelated; image-rendering: crisp-edges; }
#cv { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#app { position: fixed; inset: 0; pointer-events: none; }
h1, h2, h3 { font-family: var(--pixel); font-weight: 400; margin: 0; letter-spacing: 0; }

/* ---------- las piezas: panel de piedra, hueco hundido, hueco elegido y botones ---------- */
.panel { border: 16px solid transparent; border-image: var(--m-panel) 8 fill / 16px stretch; }
.ranura, .heroe, .mazmorra, .objeto, .ficha { border: 8px solid transparent; border-image: var(--m-ranura) 4 fill / 8px stretch; }
.heroe.sel, .mazmorra.sel { border-image-source: var(--m-elegido); }
.btn, .objeto button, .botones button, #b-pausa { --b: var(--m-btn-gris); --bp: var(--m-btn-gris-p);
  border: 8px solid transparent; border-image: var(--b) 4 fill / 8px stretch; background: none; color: #fff; cursor: pointer; text-shadow: 2px 2px 0 #0008; }
.btn:active, .objeto button:active, .botones button:active, #b-pausa:active { border-image-source: var(--bp); transform: translateY(2px); }
.btn.naranja { --b: var(--m-btn-naranja); --bp: var(--m-btn-naranja-p); color: #2a1200; text-shadow: 1px 1px 0 #ffd9a0; }
.btn.violeta { --b: var(--m-btn-violeta); --bp: var(--m-btn-violeta-p); }
.btn:disabled, .objeto button:disabled { filter: grayscale(.8) brightness(.7); cursor: default; transform: none; }
.ico { width: 16px; height: 16px; vertical-align: -3px; }

/* ---------- pantallas de menú: la pared de la cripta, a oscuras ---------- */
.pantalla { position: absolute; inset: 0; overflow: auto; pointer-events: auto; padding: max(12px, env(safe-area-inset-top)) 12px 24px;
  background: radial-gradient(ellipse at 50% 18%, #0b081255, #0b0812f2 72%), var(--pared) 0 0 / 128px 128px; }
.pantalla.hud { pointer-events: none; background: none; overflow: hidden; padding: 0; }
.pantalla.hud > * { pointer-events: auto; }
.caja { max-width: 560px; margin: 2vh auto 0; text-align: center; }
.ante { font: 9px/1.8 var(--pixel); color: var(--gris); margin: 6px 0 10px; text-shadow: 2px 2px 0 #000; }
.logo { margin: 0; line-height: 0; }
#logo { width: min(92vw, 480px); height: auto; }
#cv-titulo { width: min(92vw, 520px); height: auto; display: block; margin: 6px auto 4px; border: 16px solid transparent; border-image: var(--m-panel) 8 fill / 16px stretch; }
.btn { font: 12px/1.2 var(--pixel); padding: 8px 12px; }
.btn.grande { font-size: 15px; padding: 12px 14px; display: block; width: 100%; margin: 10px 0; }
.btn.mini { font-size: 9px; padding: 3px 6px; }
.fila { display: flex; gap: 10px; justify-content: center; }
.fila .btn { flex: 1; }
#b-sonido { flex: 0 0 auto; padding: 4px 8px; }
#b-sonido .ico { width: 32px; height: 32px; vertical-align: middle; }
.nota, .ayuda { color: var(--gris); font-size: 15px; margin: 8px 0; text-shadow: 2px 2px 0 #000; }
#t-version { font: 8px var(--pixel); }

.barra { display: flex; align-items: center; gap: 8px; margin: 0 auto 8px; max-width: 980px; border: 16px solid transparent; border-image: var(--m-panel) 8 fill / 16px stretch; padding: 0 2px; }
.barra h2 { flex: 1; font-size: 13px; line-height: 1.5; color: #fff; text-shadow: 2px 2px 0 #000; }
.btn-volver { background: none; border: 0; color: var(--gris); font: 9px var(--pixel); cursor: pointer; padding: 6px 2px; }
.oro { font: 11px var(--pixel); color: var(--oro); white-space: nowrap; text-shadow: 2px 2px 0 #000; }
.oro .ico { width: 24px; height: 24px; vertical-align: -7px; }
.et { font-size: 10px; color: var(--oro); margin: 16px 0 8px; text-shadow: 2px 2px 0 #000; }
.et::before { content: ''; display: inline-block; width: 8px; height: 8px; background: var(--oro); box-shadow: 2px 2px 0 #000; margin-right: 8px; vertical-align: 0; }
.columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; max-width: 980px; margin: 0 auto; }
@media (max-width: 760px) { .columnas { grid-template-columns: 1fr; } }

/* preparar: animales, ficha, mazmorras y equipo */
.heroes { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 6px; }
.heroe { background: none; color: var(--tinta); padding: 4px 2px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; font: 7px var(--pixel); }
.heroe img { height: 64px; width: auto; }
.heroe.sel { color: var(--oro); }
.ficha { margin-top: 8px; padding: 4px 8px; }
.ficha h3 { font-size: 12px; color: var(--oro); margin: 4px 0 6px; text-shadow: 2px 2px 0 #000; }
.ficha p { margin: 4px 0; }
.ficha .hab b { color: var(--violeta); }
.ficha .cifras { font: 9px/2.4 var(--pixel); display: flex; flex-wrap: wrap; gap: 4px 12px; }
.ficha .cifras .ico { width: 24px; height: 24px; vertical-align: -8px; margin-right: 4px; }
.mazmorras { display: grid; gap: 6px; }
.mazmorra { position: relative; display: flex; align-items: center; gap: 10px; background: none; padding: 2px 6px 2px 16px; color: var(--tinta); text-align: left; cursor: pointer; font-family: var(--texto); }
.mazmorra::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: var(--c); box-shadow: inset -2px -2px 0 #0007, inset 2px 2px 0 #fff5; }
.mazmorra img { height: 48px; width: auto; }
.mazmorra b { display: block; font: 10px/1.8 var(--pixel); }
.mazmorra small { color: var(--gris); font-size: 14px; }
.mazmorra.sel b { color: var(--oro); }
.ranura { margin: 6px 0; padding: 4px 8px; }
.ranura .ico { width: 24px; height: 24px; vertical-align: -7px; margin-right: 4px; }
.ranura small { color: var(--gris); }
#b-entrar { margin-top: 14px; }

/* el alijo */
.lista { display: grid; gap: 6px; max-width: 720px; margin: 0 auto; }
#p-alijo .et, #alijo-lleva { max-width: 720px; margin-left: auto; margin-right: auto; }
.objeto { position: relative; display: flex; align-items: center; gap: 10px; padding: 4px 6px 4px 16px; }
.objeto::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: var(--c); box-shadow: inset -2px -2px 0 #0007, inset 2px 2px 0 #fff5; }
.objeto .ic .ico { width: 32px; height: 32px; }
.objeto .nom { flex: 1; }
.objeto .nom b { color: var(--c); display: block; font-weight: 600; }
.objeto small { color: var(--gris); }
.objeto button { font: 8px var(--pixel); padding: 4px 4px; }
.objeto button[data-vende] { --b: var(--m-btn-oro); --bp: var(--m-btn-oro-p); color: #2a1a00; text-shadow: none; }

/* ---------- el HUD de la partida ---------- */
.arriba { position: absolute; top: max(6px, env(safe-area-inset-top)); left: 6px; right: 6px; display: flex; gap: 6px; align-items: flex-start; }
.vida { flex: 1.2; min-width: 0; max-width: 300px; border: 8px solid transparent; border-image: var(--m-ranura) 4 fill / 8px stretch; padding: 2px 4px 4px; }
#h-heroe { display: flex; align-items: center; gap: 6px; font: 8px var(--pixel); color: #fff; text-shadow: 2px 2px 0 #000; margin-bottom: 4px; }
#h-heroe img { height: 32px; }
.barra-vida, .barra-aguante { position: relative; background: #05030a; border: 2px solid #05030a; box-shadow: 0 2px 0 #3a2f52; overflow: hidden; }
.barra-vida { height: 16px; }
.barra-aguante { height: 8px; margin-top: 6px; }
.barra-vida::after, .barra-aguante::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 10px, #05030a99 10px 12px); pointer-events: none; }
#h-vida { height: 100%; background: linear-gradient(#ffb0b0 0 2px, #ff5b5b 2px 8px, #c0303c 8px); transition: width .15s steps(4); }
#h-vida-n { position: absolute; inset: 0; z-index: 1; text-align: center; font: 8px/12px var(--pixel); color: #fff; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000; }
#h-aguante { height: 100%; background: linear-gradient(#c8ecff 0 2px, #4aa8ff 2px 4px, #2f62b8 4px); transition: width .1s steps(3); }
#h-aguante.roto { background: var(--rojo); animation: late .3s steps(2) infinite; }
#h-efecto { display: block; font: 7px/2 var(--pixel); color: var(--violeta); text-shadow: 2px 2px 0 #000; }
#h-efecto:empty { display: none; }
.estado { flex: 1; min-width: 0; overflow: hidden; text-align: center; font: 7px/1.9 var(--pixel); text-shadow: 2px 2px 0 #000; border: 8px solid transparent; border-image: var(--m-ranura) 4 fill / 8px stretch; padding: 0 2px; }
.estado p { margin: 0; }
#h-portales { color: #c9a6ff; }
.estado .cuentas { color: var(--oro); white-space: nowrap; }
.estado .cuentas .ico { width: 16px; height: 16px; vertical-align: -4px; margin: 0 2px 0 4px; }
#h-tiempo.mal { color: var(--rojo); animation: late .6s steps(2) infinite; }
@keyframes late { 50% { opacity: .45; } }
#minimapa { width: 120px; height: 120px; border: 8px solid transparent; border-image: var(--m-ranura) 4 fill / 8px stretch; background: #05030a; }
#b-pausa { width: 40px; height: 40px; padding: 0; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
#b-pausa .ico { width: 16px; height: 16px; }
#h-avisos { position: absolute; top: 30%; left: 0; right: 0; text-align: center; pointer-events: none !important; }
#h-avisos p { margin: 4px auto; display: table; max-width: 86vw; border: 8px solid transparent; border-image: var(--m-ranura) 4 fill / 8px stretch; padding: 2px 6px; font: 8px/1.7 var(--pixel); color: #fff; }
#palanca { position: absolute; width: 104px; height: 104px; margin: -52px 0 0 -52px; pointer-events: none !important;
  background: radial-gradient(circle, transparent 0 46px, #fff5 46px 50px, transparent 50px); }
#palanca div { width: 44px; height: 44px; margin: 30px; background: #fff7; box-shadow: inset -4px -4px 0 #0004, inset 4px 4px 0 #fff6; }

/* los botones táctiles: piedra de colores con su icono a píxel doble */
.botones { position: absolute; right: 10px; bottom: max(12px, env(safe-area-inset-bottom)); display: flex; gap: 6px; align-items: flex-end; }
.botones button { position: relative; width: 66px; height: 66px; padding: 0; font: 6px var(--pixel); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; touch-action: none; }
.botones button .ico { width: 32px; height: 32px; }
.botones button b { position: absolute; top: -2px; right: -2px; font: 9px var(--pixel); color: var(--oro); text-shadow: 2px 2px 0 #000; }
.botones small { font: 6px var(--pixel); line-height: 1; max-width: 58px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.botones button::after { content: ''; position: absolute; inset: -4px; background: conic-gradient(#05030acc calc(var(--cd, 0) * 360deg), transparent 0); pointer-events: none; }
#b-ataca { --b: var(--m-btn-rojo); --bp: var(--m-btn-rojo-p); width: 86px; height: 86px; }
#b-ataca .ico { width: 48px; height: 48px; }
#b-hab { --b: var(--m-btn-violeta); --bp: var(--m-btn-violeta-p); }
#b-hab.listo { filter: drop-shadow(0 0 6px #c084fc); }
#b-pocion { --b: var(--m-btn-verde); --bp: var(--m-btn-verde-p); }
#b-pocion:not(.listo), #b-lanza:not(.listo), #b-esquiva:not(.listo) { filter: grayscale(.6) brightness(.75); }
#b-usa { --b: var(--m-btn-oro); --bp: var(--m-btn-oro-p); }
.botones.alta { bottom: calc(max(12px, env(safe-area-inset-bottom)) + 94px); right: 14px; }
.botones.alta button { width: 58px; height: 58px; }
#b-lanza { --b: var(--m-btn-marron); --bp: var(--m-btn-marron-p); }
#b-esquiva { --b: var(--m-btn-cian); --bp: var(--m-btn-cian-p); }
#b-bloqueo { --b: var(--m-btn-azul); --bp: var(--m-btn-azul-p); }
#b-bloqueo.activo { border-image-source: var(--bp); filter: drop-shadow(0 0 6px #9ad7ff); }
#b-bloqueo.parry { --b: var(--m-btn-oro); --bp: var(--m-btn-oro-p); filter: drop-shadow(0 0 8px var(--oro)); }
#b-bloqueo.roto { filter: grayscale(1) brightness(.6); }
@media (max-width: 600px) {
  #minimapa { width: 76px; height: 76px; } .estado { font-size: 6px; } .estado .cuentas .ico { width: 12px; height: 12px; margin: 0 1px 0 2px; } #b-pausa { width: 34px; height: 34px; }
  .botones button { width: 58px; height: 58px; } #b-ataca { width: 76px; height: 76px; }
  .botones.alta { bottom: calc(max(12px, env(safe-area-inset-bottom)) + 82px); } .botones.alta button { width: 52px; height: 52px; }
  .botones.alta button .ico { width: 24px; height: 24px; } .botones small { font-size: 5px; }
}

/* pausa y final */
#pausa-capa, #fin-capa { position: absolute; inset: 0; background: #0b0812c8; display: flex; align-items: center; justify-content: center; padding: 16px; }
#pausa-capa .caja, #fin-capa .caja { margin: 0; padding: 8px 6px; max-width: 420px; }
#pausa-capa h2, #fin-titulo { font-size: 18px; line-height: 1.4; color: #fff; text-shadow: 3px 3px 0 #000; margin-bottom: 10px; }
#fin-titulo.salvo { color: var(--verde); } #fin-titulo.muerto { color: var(--rojo); }
#fin-texto b { color: var(--oro); }
#pausa-capa .btn.gris { font-size: 9px; }
#pausa-capa:not([hidden]) ~ #h-avisos { display: none; }