/* Telos — Copyright (c) 2026 Camilo Sánchez. Todos los derechos reservados.
   Obra original. Prohibida su reproducción, distribución, modificación o
   uso derivado, total o parcial, sin permiso escrito del autor.
   Contacto: instagram.com/ccamilo.7 */
/* ============================================================
   PROPÓSITO — interfaz pixel art (mobile-first, vertical)
   ============================================================ */
:root{
  --ink:#f3e9d2;
  --ink-dim:#b3a68c;
  --gold:#e8c060;
  --gold-dk:#a97a1e;
  --hp:#c9302c;
  --sta:#4fae52;
  --xp:#7a6ae0;
  --wood:#8a6238;
  --wood-dk:#3b2b1d;
  --wood-in:#241a11;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);

  /* ------------------------------------------------------------
     SISTEMA VISUAL DE TELOS — capa de nombres sobre los tokens de
     arriba (que se quedan, para no romper nada que ya los use).
     Todo panel nuevo debería construirse con estos nombres.
     ------------------------------------------------------------ */
  --panel-bg:#2a1f14;         /* madera media — cuerpo de un panel */
  --panel-bg-dark:#1b130c;    /* madera oscura — huecos, ranuras vacías */
  --panel-inner:#150e08;      /* el fondo más oscuro (cajas hundidas) */
  --gold-light:#f5dc9a;
  --bronze:#8a6238;           /* alias legible de --wood, mismo valor */
  --border-dark:#17100a;
  --text-main:var(--ink);
  --text-muted:var(--ink-dim);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{
  /* `height:100%` en un navegador móvil mide contra el viewport de
     maquetación, que NO es lo que se ve: la barra de direcciones entra
     y sale y el juego se encoge y se estira con ella. `dvh` (dynamic
     viewport height) mide lo que de verdad queda visible en cada
     momento. Las dos líneas de antes se quedan como respaldo para
     navegadores viejos — gana la última que el navegador entienda. */
  margin:0;padding:0;width:100%;
  height:100%;
  height:-webkit-fill-available;
  height:100dvh;
  overflow:hidden;position:fixed;
  background:#000;color:var(--ink);
  font-family:"Trebuchet MS","Segoe UI",system-ui,sans-serif;
  user-select:none;-webkit-user-select:none;touch-action:none;overscroll-behavior:none;
}
#app{
  position:absolute;inset:0;overflow:hidden;background:#0a0d10;
  height:100%;
  height:-webkit-fill-available;
  height:100dvh;
}

/* ------------------------------------------------------------
   BARRA DE SCROLL con la temática del juego (madera + dorado) en
   vez de la barra gris del sistema — se aplica a cualquier zona con
   scroll propio de un panel (inventario, tienda, personaje, perfil,
   panel dev, selector de personaje, mapa...).
   ------------------------------------------------------------ */
.drawer-body, .shop-body, .dev-body, .charselect-list, .charinfo-body,
.profile-body, .map-body, .popup-body{
  scrollbar-width:thin;
  scrollbar-color:var(--gold-dk) var(--panel-bg-dark);
}
.drawer-body::-webkit-scrollbar, .shop-body::-webkit-scrollbar,
.dev-body::-webkit-scrollbar, .charselect-list::-webkit-scrollbar,
.charinfo-body::-webkit-scrollbar, .profile-body::-webkit-scrollbar,
.map-body::-webkit-scrollbar, .popup-body::-webkit-scrollbar{
  width:10px;height:10px;
}
.drawer-body::-webkit-scrollbar-track, .shop-body::-webkit-scrollbar-track,
.dev-body::-webkit-scrollbar-track, .charselect-list::-webkit-scrollbar-track,
.charinfo-body::-webkit-scrollbar-track, .profile-body::-webkit-scrollbar-track,
.map-body::-webkit-scrollbar-track, .popup-body::-webkit-scrollbar-track{
  background:var(--panel-bg-dark);box-shadow:inset 0 0 0 1px var(--border-dark);
}
.drawer-body::-webkit-scrollbar-thumb, .shop-body::-webkit-scrollbar-thumb,
.dev-body::-webkit-scrollbar-thumb, .charselect-list::-webkit-scrollbar-thumb,
.charinfo-body::-webkit-scrollbar-thumb, .profile-body::-webkit-scrollbar-thumb,
.map-body::-webkit-scrollbar-thumb, .popup-body::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--gold),var(--gold-dk));
  border:2px solid var(--panel-bg-dark);
}
.drawer-body::-webkit-scrollbar-thumb:active, .shop-body::-webkit-scrollbar-thumb:active,
.dev-body::-webkit-scrollbar-thumb:active{background:var(--gold-light);}
canvas#game{position:absolute;inset:0;width:100%;height:100%;display:block;image-rendering:pixelated;}
.hide{display:none !important;}
canvas.bic,canvas.rbic,canvas.hd-ic{image-rendering:pixelated;display:block;}

/* ------------------------------------------------------------
   MARCO PIXEL ART: doble borde de madera + escuadras doradas
   ------------------------------------------------------------ */
.pf{
  position:relative;
  background:linear-gradient(180deg,var(--wood-dk),var(--wood-in));
  border:3px solid var(--wood);
  box-shadow:
    0 0 0 3px #17100a,
    inset 0 0 0 2px #4a3524,
    inset 0 2px 0 rgba(255,214,150,.08),
    0 6px 18px rgba(0,0,0,.5);
  image-rendering:pixelated;
}
/* escuadras doradas en las cuatro esquinas */
.pf::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:2;
  background:
    linear-gradient(var(--gold),var(--gold)) left 2px top 2px/9px 2px no-repeat,
    linear-gradient(var(--gold),var(--gold)) left 2px top 2px/2px 9px no-repeat,
    linear-gradient(var(--gold),var(--gold)) right 2px top 2px/9px 2px no-repeat,
    linear-gradient(var(--gold),var(--gold)) right 2px top 2px/2px 9px no-repeat,
    linear-gradient(var(--gold),var(--gold)) left 2px bottom 2px/9px 2px no-repeat,
    linear-gradient(var(--gold),var(--gold)) left 2px bottom 2px/2px 9px no-repeat,
    linear-gradient(var(--gold),var(--gold)) right 2px bottom 2px/9px 2px no-repeat,
    linear-gradient(var(--gold),var(--gold)) right 2px bottom 2px/2px 9px no-repeat;
}
.pf.no-corners::before{display:none;}

/* ------------------------------------------------------------
   ORNAMENTACIÓN REFORZADA para los paneles grandes (inventario,
   diálogo del sabio/NPCs, ficha de personaje, perfil): mismo marco
   .pf de siempre, pero con escuadras más grandes, un remache dorado
   en cada esquina y un filete interior fino — para que se acerquen
   más a un cofre/pergamino trabajado y no a un simple rectángulo
   con borde.
   ------------------------------------------------------------ */
.popup-win.pf, .drawer.pf, .dlg-frame.pf{
  box-shadow:
    0 0 0 3px #17100a,
    inset 0 0 0 2px #4a3524,
    inset 0 0 0 5px rgba(232,192,96,.09),
    inset 0 2px 0 rgba(255,214,150,.08),
    0 8px 22px rgba(0,0,0,.55);
}
.popup-win.pf::before, .drawer.pf::before, .dlg-frame.pf::before{
  background:
    linear-gradient(var(--gold),var(--gold)) left 2px top 2px/16px 3px no-repeat,
    linear-gradient(var(--gold),var(--gold)) left 2px top 2px/3px 16px no-repeat,
    linear-gradient(var(--gold),var(--gold)) right 2px top 2px/16px 3px no-repeat,
    linear-gradient(var(--gold),var(--gold)) right 2px top 2px/3px 16px no-repeat,
    linear-gradient(var(--gold),var(--gold)) left 2px bottom 2px/16px 3px no-repeat,
    linear-gradient(var(--gold),var(--gold)) left 2px bottom 2px/3px 16px no-repeat,
    linear-gradient(var(--gold),var(--gold)) right 2px bottom 2px/16px 3px no-repeat,
    linear-gradient(var(--gold),var(--gold)) right 2px bottom 2px/3px 16px no-repeat,
    radial-gradient(circle,#fff6da 0 35%,var(--gold) 55%,transparent 60%) left 4px top 4px/7px 7px no-repeat,
    radial-gradient(circle,#fff6da 0 35%,var(--gold) 55%,transparent 60%) right 4px top 4px/7px 7px no-repeat,
    radial-gradient(circle,#fff6da 0 35%,var(--gold) 55%,transparent 60%) left 4px bottom 4px/7px 7px no-repeat,
    radial-gradient(circle,#fff6da 0 35%,var(--gold) 55%,transparent 60%) right 4px bottom 4px/7px 7px no-repeat;
}
.popup-win.pf::after, .drawer.pf::after, .dlg-frame.pf::after{
  content:'';position:absolute;inset:5px;pointer-events:none;z-index:1;
  border:1px solid rgba(232,192,96,.16);
}
/* divisor dorado bajo el título, con puntos en los extremos — en vez
   de solo la línea plana de separación que ya traía la cabecera */
.popup-head .panel-title,.drawer-head .panel-title{position:relative;}
.popup-head .panel-title::after,.drawer-head .panel-title::after{
  content:'';display:block;margin-top:5px;height:2px;
  background:linear-gradient(90deg,var(--gold-dk),var(--gold) 45%,var(--gold) 55%,var(--gold-dk));
  opacity:.7;
}

/* ============================ HUD ============================ */
#hud{position:absolute;inset:0;pointer-events:none;z-index:10;}
.hud-top{
  position:absolute;top:calc(6px + var(--safe-t));left:8px;right:8px;
  display:flex;justify-content:space-between;align-items:flex-start;gap:8px;
}
/* el retrato, la insignia de nivel y las barras vuelven a ser cajas
   independientes (a petición expresa) — cada una ya tiene su propio
   marco/sombra/relieve, no hace falta una plancha que las una */
.hud-left{--hud-sq:80px;display:flex;align-items:stretch;gap:8px;pointer-events:auto;}

/* orden visual: stats primero, luego el retrato y el nivel a su
   derecha, los tres cuadrados/con la misma altura que el cuadro de
   stats (--hud-sq, fijado por .bars-frame más abajo) */
.avatar-frame{
  position:relative;
  width:var(--hud-sq,80px);height:var(--hud-sq,80px);flex:0 0 auto;padding:4px;cursor:pointer;order:2;
  background:
    linear-gradient(180deg,#8a6238 0%,#8a6238 22%,#6b4a2c 22%,#6b4a2c 78%,#4a3320 78%,#4a3320 100%);
  border:2px solid #241a11;
  box-shadow:0 0 0 2px #e8c060,0 0 0 3px #241a11,inset 0 0 0 1px #17100a,inset 0 2px 0 rgba(255,214,150,.18),0 2px 6px #0007;
  display:flex;align-items:center;justify-content:center;
}
/* ornamento superior: pequeña placa/gema centrada sobre el marco,
   como remate de la tarjeta de personaje */
.frame-orn{
  position:absolute;top:-5px;left:50%;transform:translateX(-50%);
  width:12px;height:6px;pointer-events:none;
  background:linear-gradient(180deg,var(--gold-light),var(--gold-dk));
  clip-path:polygon(0 100%,20% 0,80% 0,100% 100%);
  box-shadow:0 0 0 1px #17100a;
}
.frame-orn::after{
  content:'';position:absolute;top:1px;left:50%;width:3px;height:3px;
  transform:translateX(-50%) rotate(45deg);background:#3a6ac9;box-shadow:0 0 3px rgba(90,150,240,.9);
}
/* pequeños remaches dorados en las cuatro esquinas — tarjeta de
   personaje, no un simple cuadro con borde */
.avatar-frame::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle,#fff6da 0 30%,var(--gold) 55%,transparent 62%) 3px 3px/5px 5px no-repeat,
    radial-gradient(circle,#fff6da 0 30%,var(--gold) 55%,transparent 62%) calc(100% - 3px) 3px/5px 5px no-repeat,
    radial-gradient(circle,#fff6da 0 30%,var(--gold) 55%,transparent 62%) 3px calc(100% - 3px)/5px 5px no-repeat,
    radial-gradient(circle,#fff6da 0 30%,var(--gold) 55%,transparent 62%) calc(100% - 3px) calc(100% - 3px)/5px 5px no-repeat;
}
.avatar-frame::after{
  /* panel interior azul-gris oscuro detrás del retrato, no madera lisa */
  content:'';position:absolute;inset:4px;pointer-events:none;z-index:-1;
  background:radial-gradient(ellipse at 50% 35%,#2a3040,#12151c 75%);
  box-shadow:inset 0 0 0 1px #000;
}
.avatar-frame:active{filter:brightness(1.2);transform:scale(.95);}
.avatar-frame canvas{width:100%;height:100%;image-rendering:pixelated;position:relative;}
.avatar-frame.frame-silver{background:linear-gradient(180deg,#c9d2dc,#7a838c);border-color:#4a5158;}
.avatar-frame.frame-gold{background:linear-gradient(180deg,var(--gold),#8a6210);border-color:#5a3f0a;}
.avatar-frame.frame-arcane{background:linear-gradient(180deg,#b28aec,#4a2f8a);border-color:#2a1a52;box-shadow:0 0 8px rgba(154,109,224,.6);}

/* ---- INSIGNIA DE NIVEL: mismo cuadro que el retrato (.avatar-frame),
   no una silueta de escudo — la versión recortada quedaba cortada
   abajo, por eso se volvió a una caja simple ---- */
.lvl-badge{
  position:relative;
  width:var(--hud-sq,80px);height:var(--hud-sq,80px);flex:0 0 auto;order:3;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  background:radial-gradient(ellipse at 50% 35%,#22304a,#0a0e18 75%);
  border:2px solid var(--gold-dk);
  box-shadow:0 0 0 2px #17100a,inset 0 0 0 1px #4a3524,inset 0 2px 0 rgba(255,214,150,.12),0 2px 6px #0007;
}
/* pequeña gema azul arriba + un tick dorado a cada lado (laurel
   simplificado): insignia de condecoración, no una casilla de stat más */
.lvl-gem{
  position:absolute;top:5px;left:50%;width:5px;height:5px;
  transform:translateX(-50%) rotate(45deg);
  background:linear-gradient(135deg,#bcd8ff,#3a6ac9);
  box-shadow:0 0 4px rgba(90,150,240,.8),0 0 0 1px #17284a;
}
.lvl-orn{
  position:absolute;top:50%;width:2px;height:12px;transform:translateY(-50%);
  background:linear-gradient(var(--gold-dk),var(--gold-dk));
  box-shadow:0 0 0 1px #17100a;
}
.lvl-orn.l{left:4px;}
.lvl-orn.r{right:4px;}
.lvl-badge .lvl-tag{font-size:8px;letter-spacing:1px;color:var(--gold);text-transform:uppercase;opacity:.85;margin-top:4px;}
.lvl-badge span{font-weight:bold;font-size:21px;color:var(--gold-light);text-shadow:0 0 6px rgba(232,192,96,.5),0 2px 0 #000;line-height:1;}

.bars-frame{
  order:1;display:flex;flex-direction:column;gap:4px;justify-content:center;cursor:pointer;
}
.bars-frame:active .sbar{filter:brightness(1.2);}
/* cada barra es su propio marco independiente (antes las 3 compartían
   un único .pf) apiladas con espacio entre ellas */
.sbar{display:flex;align-items:center;gap:5px;padding:3px 6px;}
/* cada barra lleva su cajita de icono, como en la referencia — ahora
   con relieve metálico de verdad (tonos escalonados, no un color
   plano) y su propio remache */
.ibox{
  position:relative;
  width:20px;height:20px;flex:0 0 20px;
  display:flex;align-items:center;justify-content:center;
  background:
    linear-gradient(180deg,#c9a24a 0%,#c9a24a 18%,#8a6238 18%,#8a6238 60%,#5c4326 60%,#5c4326 100%);
  border:2px solid #17100a;
  box-shadow:0 0 0 1px #3a2818,inset 0 1px 0 rgba(255,236,190,.4),inset 0 -2px 0 rgba(0,0,0,.35);
}
.ibox-rivet{
  position:absolute;top:1px;left:1px;width:2px;height:2px;border-radius:50%;
  background:#fff6da;box-shadow:1px 0 0 #a97a1e,0 1px 0 #a97a1e;
}
.bic{width:12px;height:12px;flex:0 0 12px;position:relative;z-index:1;filter:drop-shadow(0 1px 0 rgba(0,0,0,.6));}
.bic.big{width:22px;height:22px;flex:0 0 22px;}
.track{
  position:relative;display:block;height:17px;width:148px;border-radius:9px;
  background:#160c0c;border:2px solid #17100a;
  box-shadow:inset 0 0 0 1px #4a3524,inset 0 2px 0 rgba(0,0,0,.4);
  overflow:hidden;transition:width .35s cubic-bezier(.2,1,.3,1);
}
.track i{
  position:absolute;left:0;top:0;bottom:0;width:100%;display:block;border-radius:7px;
  background:linear-gradient(180deg,#ff8a7a 0%,#e0453a 45%,#a02420 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -2px 0 rgba(0,0,0,.3);
  transition:width .18s ease-out;
}
/* vida crítica (<30%): fondo rojo oscuro pulsante en vez de solo la
   barra corta — se nota aunque quede muy poca vida rellenando */
.track.low{background:#2a0a08;animation:hpLowPulse 1s ease-in-out infinite;}
@keyframes hpLowPulse{0%,100%{box-shadow:inset 0 0 0 1px #4a3524,inset 0 2px 0 rgba(0,0,0,.4);}50%{box-shadow:inset 0 0 0 1px #c9302c,inset 0 2px 0 rgba(0,0,0,.4),0 0 8px rgba(201,48,44,.6);}}
/* destello breve al recibir daño */
.track.flash::before{
  content:'';position:absolute;inset:0;z-index:3;background:#fff;opacity:0;
  animation:hpFlash .25s ease-out forwards;
}
@keyframes hpFlash{0%{opacity:.75;}100%{opacity:0;}}
/* el valor va DENTRO de la barra, centrado, en vez de al lado — más
   ancha ahora, así que el texto entra holgado y en negrita de verdad */
.bval{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:900;color:#f8f1de;letter-spacing:.2px;white-space:nowrap;
  text-shadow:0 1px 0 #000,0 0 3px #000;pointer-events:none;
}
/* maná/estamina en azul, experiencia en verde (antes al revés) */
.sbar.sta .track i{background:linear-gradient(180deg,#9fc8ff 0%,#4a7ae0 45%,#1c2f78 100%);}
.sbar.sta .track{background:#0d1226;}
.sbar.xp .track i{background:linear-gradient(180deg,#a0f0a0 0%,#43c04a 45%,#1e5a24 100%);}
.sbar.xp .track{background:#0b1a0b;}
/* en una caja tan alargada las escuadras de 4 esquinas del .pf base se
   ven diminutas; aquí el dorado se concentra en los dos extremos
   (izquierdo y derecho) del cuadro completo, de arriba a abajo */
.sbar.pf::before{
  background:
    linear-gradient(var(--gold),var(--gold)) left 0 top 0/3px 100% no-repeat,
    linear-gradient(var(--gold),var(--gold)) right 0 top 0/3px 100% no-repeat;
}

.hud-right{display:flex;align-items:center;gap:5px;pointer-events:auto;}
.chip{
  display:flex;align-items:center;gap:5px;padding:6px 9px;
  font-size:13.5px;font-weight:bold;color:var(--ink);letter-spacing:.4px;
}
.chip.coins{color:var(--gold);}
.chip .bic{width:15px;height:15px;flex:0 0 15px;}
.icon-btn{
  width:34px;height:34px;padding:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.icon-btn:active{filter:brightness(1.3);}

/* Efectos activos (pociones, etc.) — justo debajo de las barras de
   stats. Cada casilla reaprovecha el mismo .chip/.pf que ya usan el
   reloj y las monedas del HUD (ver #clock/.coins más abajo): ninguna
   caja nueva de cero, solo su contenido (ver UI.renderBuffs, ui.js).
   Pensada para varios efectos a la vez, uno junto a otro en la fila. */
.buffs-bar{
  position:absolute;top:calc(92px + var(--safe-t));left:8px;
  display:flex;gap:6px;pointer-events:none;
}
.buffs-bar .chip{padding:4px 8px;}
.buff-ic{width:16px;height:16px;flex:0 0 16px;image-rendering:pixelated;}
.buff-time{font-size:11px;font-weight:900;color:var(--gold-light);white-space:nowrap;}

.wave-hud{
  position:absolute;top:calc(56px + var(--safe-t));left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:10px;padding:5px 14px;
  background:linear-gradient(180deg,#3a1414,#1e0a0a);
  border:2px solid #6b2a24;box-shadow:0 0 0 2px #17100a,inset 0 1px 0 rgba(255,150,130,.15),0 3px 8px #0007;
  color:#ffb3aa;
  font-size:11px;font-weight:bold;letter-spacing:1px;white-space:nowrap;
}
.wave-hud #wave-enemies:before{content:"☠ ";}

/* Barra de jefe: distinta a las barras normales a propósito (más
   ancha, roja, con el nombre encima) — segura en móvil, no tapa el
   HUD ni los controles porque va arriba, centrada, por debajo del
   HUD superior. */
.boss-bar{
  position:absolute;top:calc(56px + var(--safe-t));left:50%;transform:translateX(-50%);
  width:min(80vw,360px);
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:6px 16px 9px;z-index:5;pointer-events:none;
}
.boss-name{
  font-size:12px;font-weight:bold;letter-spacing:3px;color:#ff9a8a;
  text-shadow:0 2px 0 #000;text-transform:uppercase;
}
.boss-track{
  position:relative;display:block;height:12px;width:100%;
  background:#1a0808;border:2px solid #2a0d0d;box-shadow:inset 0 0 0 1px #4a1414;
  overflow:hidden;
}
.boss-track i{
  position:absolute;left:0;top:0;bottom:0;width:100%;display:block;
  background:linear-gradient(180deg,#ff6a5a 0%,#c9302c 45%,#7a1a18 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3);
  transition:width .25s ease-out;
}

.quest{
  /* Cuadro de misión: se agrandó a petición expresa (antes 12.5px en
     una caja de 64% de ancho, se leía apretado en móvil) */
  position:absolute;top:calc(60px + var(--safe-t));right:8px;left:auto;
  padding:10px 15px 11px;max-width:72%;
  font-size:15px;line-height:1.35;color:var(--ink);
  border-color:var(--gold-dk);
  box-shadow:0 0 0 2px #17100a,0 0 14px 1px rgba(232,192,96,.3),0 4px 12px #0007;
}
.quest.lowered{top:calc(90px + var(--safe-t));}
.quest-title{
  display:block;font-size:9.5px;letter-spacing:2.4px;text-transform:uppercase;
  color:var(--gold);font-weight:bold;margin-bottom:5px;
}
.quest-line{display:flex;align-items:center;gap:7px;}
.quest-dot{
  width:6px;height:6px;background:var(--gold);flex:0 0 6px;
  box-shadow:0 0 6px rgba(232,192,96,.8);animation:questDot 1.6s ease-in-out infinite;
}
@keyframes questDot{0%,100%{box-shadow:0 0 4px rgba(232,192,96,.6);}50%{box-shadow:0 0 10px 2px rgba(232,192,96,.95);}}
.quest-count{
  margin-left:2px;font-size:13px;font-weight:bold;color:var(--gold);
  background:rgba(232,192,96,.14);border:1px solid rgba(232,192,96,.35);
  padding:1px 6px;
}
.quest-count.done{color:#8fe0a0;background:rgba(84,192,106,.16);border-color:rgba(84,192,106,.45);}
/* Contadores por material (ver UI.setQuest con `subs`): un renglón por
   cosa que reunir, alineados en columna bajo el objetivo. Cada uno se
   pone verde por su cuenta al completarse, así se ve de un vistazo qué
   falta — que es justo lo que el marcador único sumado no permitía. */
.quest-subs{
  display:flex;flex-direction:column;gap:3px;
  margin:6px 0 0 13px;padding-top:5px;
  border-top:1px solid rgba(232,192,96,.18);
}
.quest-sub{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-dim);}
.quest-sub .qs-dot{
  width:4px;height:4px;flex:0 0 4px;background:var(--gold-dk);
  transform:rotate(45deg);
}
.quest-sub .qs-name{flex:1;min-width:0;}
.quest-sub .qs-n{
  font-weight:bold;color:var(--gold);font-size:12px;
  background:rgba(232,192,96,.12);border:1px solid rgba(232,192,96,.3);
  padding:0 5px;min-width:34px;text-align:center;
}
.quest-sub.done .qs-name{color:#8fe0a0;}
.quest-sub.done .qs-dot{background:#54c06a;}
.quest-sub.done .qs-n{color:#8fe0a0;background:rgba(84,192,106,.16);border-color:rgba(84,192,106,.45);}
.quest.pulse{animation:questIn .45s cubic-bezier(.2,1.4,.4,1);}
@keyframes questIn{0%{transform:translateX(-14px);opacity:0;}100%{transform:none;opacity:1;}}

.weather-note{
  position:absolute;top:calc(60px + var(--safe-t));left:50%;transform:translateX(-50%);
  padding:5px 14px;background:rgba(12,16,22,.85);border:1px solid rgba(255,255,255,.14);
  font-size:11.5px;color:#cfd8e4;letter-spacing:.6px;white-space:nowrap;opacity:0;
}
.weather-note.show{animation:wnote 3.4s ease-out forwards;}
@keyframes wnote{0%{opacity:0;transform:translate(-50%,-6px);}12%{opacity:1;transform:translate(-50%,0);}82%{opacity:1;}100%{opacity:0;}}

.banner{
  /* un poco más arriba del centro exacto de la pantalla (con `inset:0`
     quedaba centrado de verdad, pero se leía "bajo" con el HUD y los
     controles táctiles ocupando arriba/abajo) — sigue centrado en
     horizontal. z-index por encima de #overlays (20): un anuncio como
     "DRACUMBRA DERROTADO" no debe desaparecer si se abre encima un
     panel de subida de nivel u otro popup. */
  position:absolute;top:0;left:0;right:0;bottom:10%;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:0 24px;pointer-events:none;z-index:25;
  font-size:40px;font-weight:bold;letter-spacing:4px;color:#fff;
  text-shadow:0 0 22px #ff5a3c,0 0 44px #ff5a3c88,0 3px 0 #000;animation:bannerIn .5s ease-out;
}
@keyframes bannerIn{from{opacity:0;transform:scale(.6);}to{opacity:1;transform:scale(1);}}

.toasts{
  position:absolute;top:calc(60px + var(--safe-t));left:0;right:0;bottom:auto;
  display:flex;flex-direction:column;align-items:center;gap:5px;
  transition:top .2s ease-out;
}
/* mientras hay barra de jefe visible (ver UI.showBossBar/hideBossBar):
   los toasts bajan lo suficiente para no quedar tapados por ella */
.toasts.below-boss{top:calc(112px + var(--safe-t));}
.toast{
  padding:6px 14px;background:#000c;border:1px solid #ffffff26;
  font-size:12px;color:var(--ink);animation:toastIn .25s ease-out;max-width:88%;text-align:center;
}
.toast.good{border-color:#54c06a66;color:#b8f0c2;}
.toast.bad{border-color:#d24a4166;color:#ffb9b3;}
.toast.gold{border-color:#e8c06066;color:#ffdd99;}
.toast.rare{border-color:#4a9be088;color:#bfe0ff;background:#0d1a2acc;}
/* variante grande: avisos importantes que necesitan destacar más y
   quedarse más tiempo (p. ej. el bloqueo de una sala de la mazmorra) */
.toast.big{font-size:19px;font-weight:bold;padding:13px 22px;max-width:92%;letter-spacing:.3px;}
@keyframes toastIn{from{opacity:0;transform:translateY(-10px);}to{opacity:1;transform:none;}}
.toast.out{opacity:0;transition:opacity .3s;}

/* ====================== CONTROLES TÁCTILES ====================== */
#touch{position:absolute;inset:0;z-index:12;pointer-events:none;}
.stick-zone{position:absolute;left:0;bottom:70px;width:52%;height:50%;pointer-events:auto;}
.stick{
  position:absolute;width:118px;height:118px;margin:-59px 0 0 -59px;border-radius:50%;
  background:radial-gradient(circle,#ffffff10,#ffffff05 60%,transparent 70%);
  border:2px solid #ffffff28;
}
.knob{
  position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;
  background:radial-gradient(circle at 35% 32%,#ffffffcc,#ffffff55 60%,#ffffff22);
  border:2px solid #ffffff55;box-shadow:0 3px 10px #0007;
}
.action-cluster{
  position:absolute;right:14px;bottom:calc(82px + var(--safe-b));
  width:220px;height:196px;pointer-events:none;
}
.rbtn{
  position:absolute;border-radius:50%;pointer-events:auto;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  border:3px solid var(--gold-dk);color:#fff;overflow:hidden;
  box-shadow:0 0 0 2px #17100a,0 4px 12px #0007;
}
.rbic{width:30px;height:30px;}
/* la espada del botón de ataque va mucho más grande que los demás
   íconos redondos — es la acción principal del HUD */
#action-ic.rbic{width:46px;height:46px;}
.rbtn:active{transform:scale(.93);}
/* Botón de ataque: más grande, semitransparente y desplazado hacia la
   izquierda; las 3 habilidades se disponen en abanico a su alrededor. */
.rbtn.attack{
  right:40px;bottom:0;width:96px;height:96px;
  /* degradado con más recorrido de color (no un rojo plano): del
     naranja-brasa cerca de la luz hasta casi negro en el borde */
  background:radial-gradient(circle at 35% 30%,#ff9a6a 0%,#c2503f 42%,#5c1a12 80%,#3a0f0a 100%);
  border-color:var(--gold);
  opacity:.74;
  box-shadow:0 0 0 2px #17100a,0 0 16px 2px rgba(232,192,96,.45),0 4px 12px #0007;
}
.rbtn.attack.interacting{
  background:radial-gradient(circle at 35% 30%,#e0b154,#8a6210);
  border-color:#ffe08a;
  opacity:.92;
  animation:pulseI 1.2s ease-in-out infinite;
}
@keyframes pulseI{0%,100%{box-shadow:0 0 0 2px #17100a,0 0 0 0 #e8c06055;}50%{box-shadow:0 0 0 2px #17100a,0 0 0 10px #e8c06000;}}
/* Las 3 habilidades de la clase, en abanico alrededor del botón de
   combate (más grandes que antes, pero siempre por debajo del tamaño
   del ataque). Ocultas hasta canjear los vestigios con el sabio. */
.rbtn.ability{
  width:58px;height:58px;
  background:#241a12;
  border-color:var(--gold);
  box-shadow:0 0 0 2px #17100a,0 0 10px 1px rgba(232,192,96,.35),0 4px 12px #0007;
}
.rbtn.ability.ab0{right:7px;bottom:110px;}
.rbtn.ability.ab1{right:95px;bottom:118px;}
.rbtn.ability.ab2{right:158px;bottom:55px;}
.ab-icon{position:absolute;width:100%;height:100%;image-rendering:pixelated;}
.ab-num{
  position:absolute;left:3px;top:1px;font-size:9px;font-weight:bold;color:#fff;
  text-shadow:0 1px 3px #000,0 0 3px #000;pointer-events:none;z-index:2;
}
.action-label,.ability-label{
  position:absolute;right:0;bottom:88px;width:82px;text-align:center;
  font-size:10.5px;font-weight:bold;letter-spacing:1px;color:#ffe6a8;
  text-shadow:0 1px 3px #000,0 0 8px #000;pointer-events:none;
}
/* Temporizador de recarga: cuña gris que barre el círculo en sentido
   horario (como un reloj) y se encoge a medida que se recarga. */
.cdsweep{
  position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:conic-gradient(rgba(12,10,8,.82) var(--pct,0%), transparent var(--pct,0%));
}
.rbtn.cooling .ab-icon,.rbtn.cooling .rbic{filter:grayscale(.85) brightness(.7);}
.lockic{
  position:absolute;width:12px;height:14px;border:2px solid #d8cdb8;border-radius:2px;
  background:#3a3226;box-shadow:0 -5px 0 -2px transparent, inset 0 0 0 1px #000;
}
.lockic::before{
  content:'';position:absolute;left:1px;top:-7px;width:6px;height:7px;
  border:2px solid #d8cdb8;border-bottom:none;border-radius:4px 4px 0 0;
}
.action-label{
  position:absolute;right:0;bottom:88px;width:82px;text-align:center;
  font-size:10.5px;font-weight:bold;letter-spacing:1px;color:#ffe6a8;
  text-shadow:0 1px 3px #000,0 0 8px #000;pointer-events:none;
}
.bag-btn{
  position:absolute;right:16px;top:50%;transform:translateY(-50%);
  width:44px;height:44px;padding:0;pointer-events:auto;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.bag-btn:active{filter:brightness(1.3);transform:translateY(-50%) scale(.94);}
/* Aviso de botín nuevo (ver UI.setBagAlert): el botón de la mochila
   late y lanza un haz dorado hasta que el jugador la abre. Puramente
   decorativo — no bloquea toques (pointer-events:none en la capa).
   Las reglas .bag-alert están más abajo, junto a sus @keyframes. */
/* La antigua "barra de clases" (columna de ranuras pegada al borde
   del cajón del inventario para cambiar de arma) se retiró a petición
   expresa: sus estilos .class-bar/.cb-slot vivían aquí. Las armas de
   clase se equipan desde la propia rejilla del inventario. */

/* ============================================================
   TARJETA DE MEJORA DE LA FORJA (ver UI.forgeCard)
   ============================================================
   Ficha de objeto de RPG, no una fila de texto: marco de dos tonos
   con reborde interior oscuro, remaches dorados en las esquinas,
   ranura de inventario para el icono y una rejilla compacta de
   stats. Todo con bordes duros y sombras de píxel — ni un
   border-radius ni un blur.
   ============================================================ */
.forge-card{
  position:relative;display:flex;align-items:flex-start;gap:10px;
  padding:9px 10px;
  background:linear-gradient(180deg,#2a1e12 0%,#2a1e12 3px,#1b1209 3px,#140d06 100%);
  border:2px solid #6b4a2c;
  box-shadow:
    inset 0 0 0 1px #0d0803,
    inset 0 2px 0 rgba(255,214,150,.10),
    0 2px 0 #0d0803;
  image-rendering:pixelated;
}
/* remaches dorados en las cuatro esquinas, muy discretos */
.forge-card::before{
  content:'';position:absolute;inset:2px;pointer-events:none;
  background:
    linear-gradient(var(--gold-dk),var(--gold-dk)) 0 0/3px 3px no-repeat,
    linear-gradient(var(--gold-dk),var(--gold-dk)) 100% 0/3px 3px no-repeat,
    linear-gradient(var(--gold-dk),var(--gold-dk)) 0 100%/3px 3px no-repeat,
    linear-gradient(var(--gold-dk),var(--gold-dk)) 100% 100%/3px 3px no-repeat;
  opacity:.75;
}

/* ---- ranura del objeto: un slot de inventario de verdad ---- */
.fc-slot{
  position:relative;flex:0 0 40px;width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#1a1108,#0e0904);
  border:2px solid #8a6238;
  box-shadow:
    inset 0 2px 0 rgba(255,214,150,.16),
    inset 0 -2px 0 rgba(0,0,0,.65),
    0 1px 0 #0d0803;
}
.fc-slot canvas{width:32px;height:32px;image-rendering:pixelated;display:block;}

/* ---- cuerpo ---- */
.fc-body{flex:1 1 auto;min-width:0;}
.fc-name{
  font-size:12.5px;font-weight:bold;color:var(--ink);line-height:1.25;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;
}
.fc-lvl{
  display:inline-flex;align-items:baseline;gap:3px;
  font-size:11px;font-weight:bold;color:#7d7263;
  padding:0 5px;background:rgba(0,0,0,.35);border:1px solid #4a3524;
}
.fc-lvl .fc-lvl-ar{font-style:normal;color:#6b6153;}
.fc-lvl b{color:#8fe08a;}

/* ---- rejilla compacta de stats: etiqueta | ahora | flecha | nuevo ----
   Cuatro columnas de ancho fijo, pegadas entre sí y alineadas en
   vertical. NADA de space-between: los valores tienen que ir junto a
   su etiqueta, no huyendo al borde derecho de la tarjeta. */
.fc-stats{
  display:grid;
  grid-template-columns:auto minmax(42px,max-content) 14px minmax(42px,max-content);
  column-gap:6px;row-gap:1px;
  justify-content:start;
  margin:5px 0 4px;padding:4px 0 5px;
  border-top:1px solid rgba(232,192,96,.12);
  border-bottom:1px solid rgba(232,192,96,.12);
  font-size:11px;line-height:1.35;
}
.fc-stats .fs-k{color:#c2b49a;padding-right:4px;}
.fc-stats .fs-a{color:#7d7263;text-align:right;}
.fc-stats .fs-ar{color:#6b6153;text-align:center;}
.fc-stats .fs-b{color:#8fe08a;font-weight:700;text-align:right;}

/* ---- coste ---- */
.fc-cost{
  display:flex;align-items:center;gap:5px;flex-wrap:wrap;
  font-size:11px;color:var(--ink-dim);
}
.fc-cost .fc-coin{width:14px;height:14px;image-rendering:pixelated;flex:0 0 14px;}
.fc-cost .fc-sep{font-style:normal;color:#5c5040;}
.fc-cost.fc-free{color:#8fe08a;font-weight:bold;}

/* ---- botón de mejorar: solo la flecha ---- */
.forge-up{
  position:relative;flex:0 0 44px;align-self:center;
  width:44px;height:44px;padding:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#3a2718 0%,#3a2718 3px,#241708 3px,#180f05 100%);
  border:2px solid #b2823a;
  box-shadow:
    inset 0 0 0 1px #0d0803,
    inset 0 2px 0 rgba(255,214,150,.22),
    inset 0 -3px 0 rgba(0,0,0,.55),
    0 3px 0 #0d0803;
  image-rendering:pixelated;
}
/* remates dorados en las esquinas del botón */
.forge-up::before{
  content:'';position:absolute;inset:2px;pointer-events:none;
  background:
    linear-gradient(var(--gold),var(--gold)) 0 0/2px 2px no-repeat,
    linear-gradient(var(--gold),var(--gold)) 100% 0/2px 2px no-repeat,
    linear-gradient(var(--gold),var(--gold)) 0 100%/2px 2px no-repeat,
    linear-gradient(var(--gold),var(--gold)) 100% 100%/2px 2px no-repeat;
}
.forge-up canvas{
  width:26px;height:26px;image-rendering:pixelated;display:block;position:relative;
}
/* estados: sin transiciones, saltos secos de un fotograma a otro */
.forge-up:hover:not(:disabled){
  border-color:#ffe9a8;
  background:linear-gradient(180deg,#4a3220 0%,#4a3220 3px,#2e1d0b 3px,#1d1206 100%);
}
.forge-up:hover:not(:disabled) canvas{filter:brightness(1.25);}
.forge-up:active:not(:disabled){
  transform:translateY(2px);
  box-shadow:
    inset 0 0 0 1px #0d0803,
    inset 0 2px 0 rgba(255,214,150,.10),
    inset 0 -1px 0 rgba(0,0,0,.55),
    0 1px 0 #0d0803;
}
.forge-up:disabled{
  cursor:default;border-color:#5c4a34;
  background:linear-gradient(180deg,#241a10 0%,#241a10 3px,#1a1209 3px,#120c05 100%);
  box-shadow:inset 0 0 0 1px #0d0803,0 2px 0 #0d0803;
}
.forge-up:disabled::before{background:none;}
.forge-up:disabled canvas{filter:grayscale(.75) brightness(.55);}

/* en pantalla estrecha la tarjeta se estrecha, pero el botón conserva
   su área táctil y las stats siguen pegadas a sus etiquetas */
@media (max-width:420px){
  .forge-card{gap:8px;padding:8px;}
  .fc-name{font-size:12px;}
  .fc-stats{grid-template-columns:auto minmax(38px,max-content) 12px minmax(38px,max-content);column-gap:5px;}
}

.bag-btn.bag-alert{animation:bagAlertPulse 1.1s ease-in-out infinite;}
.bag-btn.bag-alert::after{
  content:'';position:absolute;left:50%;top:50%;
  width:92px;height:92px;margin:-46px 0 0 -46px;
  pointer-events:none;z-index:-1;border-radius:50%;
  background:radial-gradient(circle,rgba(255,226,150,.55),rgba(255,200,90,.22) 45%,transparent 72%);
  animation:bagAlertRay 1.1s ease-in-out infinite;
}
@keyframes bagAlertPulse{
  0%,100%{filter:brightness(1);}
  50%{filter:brightness(1.55) drop-shadow(0 0 8px rgba(255,214,120,.9));}
}
@keyframes bagAlertRay{
  0%,100%{opacity:.35;transform:scale(.82);}
  50%{opacity:.95;transform:scale(1.1);}
}
/* Aviso del retrato del HUD (ver UI.setCharAlert): late en dorado
   hasta que el jugador abre su ficha de personaje. Solo decorativo. */
.avatar-frame.char-alert{animation:charAlertPulse 1.05s ease-in-out infinite;}
.avatar-frame.char-alert::after{
  box-shadow:inset 0 0 0 1px #000, 0 0 10px 3px rgba(255,214,120,.75);
}
@keyframes charAlertPulse{
  0%,100%{filter:brightness(1);}
  50%{filter:brightness(1.5) drop-shadow(0 0 9px rgba(255,214,120,.95));}
}
/* FLECHA GUÍA DEL RETRATO (ver UI.setCharAlert).
   La primera vez que el sabio despierta los hechizos, el retrato se
   ilumina y además le cae encima una flecha que lo señala, porque el
   brillo por sí solo no decía DÓNDE mirar. Cuelga por debajo del
   retrato apuntando hacia arriba, con un rótulo corto al lado. Se
   oculta sola en cuanto se abre la ficha. Es puramente decorativa:
   no come toques, los recibe el botón que hay debajo. */
/* La flecha ya NO se monta con bordes CSS: es un sprite dibujado en
   píxeles (Art.ui('guideArrow')), como cualquier otro icono del juego.
   Los triángulos de `border` salían suavizados, planos y sin contorno,
   y a este tamaño cantaban muchísimo al lado del pixel art. */
.char-point{
  position:absolute;left:50%;top:100%;margin:7px 0 0 -13px;
  width:26px;height:32px;pointer-events:none;z-index:3;
  animation:charPointBob 1.05s ease-in-out infinite;
}
.char-point .cp-arrow{
  position:absolute;left:4px;top:0;
  width:18px;height:22px;image-rendering:pixelated;
  /* el resplandor sigue la silueta del sprite, no una caja */
  filter:drop-shadow(0 0 6px rgba(255,214,120,.85));
}
.char-point b{
  position:absolute;left:28px;top:4px;
  font-size:9px;font-weight:bold;letter-spacing:.6px;white-space:nowrap;
  color:#241703;
  background:linear-gradient(180deg,#ffe9a8 0%,#f0c460 45%,#c2912c 100%);
  border:2px solid #17100a;padding:3px 6px;
  text-shadow:0 1px 0 rgba(255,255,255,.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(0,0,0,.25),0 0 9px rgba(255,214,120,.55);
  /* mismas esquinas recortadas que los botones, para que el rótulo
     pertenezca al mismo mundo visual */
  clip-path:polygon(
    2px 0, calc(100% - 2px) 0, 100% 2px,
    100% calc(100% - 2px), calc(100% - 2px) 100%,
    2px 100%, 0 calc(100% - 2px), 0 2px);
}
/* pico que une el rótulo con el asta de la flecha */
.char-point b::before{
  content:'';position:absolute;left:-6px;top:50%;margin-top:-3px;
  width:0;height:0;
  border-top:3px solid transparent;border-bottom:3px solid transparent;
  border-right:5px solid #17100a;
}
.avatar-frame:not(.char-alert) .char-point{display:none;}
@keyframes charPointBob{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(5px);}
}
.map-btn{left:16px;right:auto;top:auto;bottom:calc(24px + var(--safe-b));transform:none;}
/* zona de toque ampliada: el botón está pegado al borde inferior y a
   veces un toque en su mitad baja caía fuera de su caja o se lo comía
   el borde de gestos del sistema — esto no cambia cómo se ve, solo
   agranda dónde responde. */
.map-btn::after{content:'';position:absolute;inset:-10px;}

/* ---------- mapa: ilustración assets/ui/mapa/mapa.png con flecha ---------- */
/* El mapa CABE, no se recorre. Antes la ilustración se estiraba al
   100 % del ancho del cuadro y en una pantalla baja salía más alta que
   la ventana: había que arrastrarla para verla entera, que es justo lo
   contrario de lo que sirve un mapa. Ahora se ajusta al hueco por el
   lado que toque — ancho o alto — y se centra. El marcador sigue
   colocado en porcentajes sobre .map-image-wrap, que se encoge con la
   imagen, así que sigue cayendo donde debe. */
.map-body{
  flex:1 1 auto;min-height:0;
  display:flex;align-items:center;justify-content:center;
  padding:2px;overflow:hidden;
}
.map-image-wrap{position:relative;line-height:0;max-width:100%;max-height:100%;}
/* El tope de alto va en unidades de VENTANA, no en porcentaje.
   `max-height:100%` no sirve aquí: un porcentaje necesita que el padre
   tenga un alto DEFINIDO, y .map-body solo tiene un máximo. Al no
   resolverse, la ilustración quedaba limitada solo por el ancho, se
   salía por abajo y el recorte del contenedor se comía el sur del mapa.
   El descuento son la cabecera del cuadro y sus márgenes. */
.map-image{
  display:block;max-width:100%;
  max-height:calc(94dvh - 64px);
  width:auto;height:auto;image-rendering:auto;
}
@supports not (height:1dvh){
  .map-image{max-height:calc(94vh - 64px);}
}
.map-marker{
  position:absolute;width:0;height:0;margin:-18px 0 0 -7px;
  border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:12px solid #ff5a4a;
  filter:drop-shadow(0 0 5px rgba(255,90,74,.95));animation:mapBlink 1s ease-in-out infinite;
}
@keyframes mapBlink{0%,100%{transform:scale(1);}50%{transform:scale(1.3);}}

.hotbar{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:calc(10px + var(--safe-b));
  display:flex;gap:6px;pointer-events:auto;padding:6px;
  z-index:5;
}
.hslot{
  width:42px;height:42px;position:relative;cursor:pointer;touch-action:none;
  background:linear-gradient(180deg,#2b2018,#170f09);
  border:2px solid #4a3626;
  display:flex;align-items:center;justify-content:center;
}
.hslot canvas{width:32px;height:32px;image-rendering:pixelated;}
.hslot.empty{border-style:dashed;border-color:#3a2c1e;}
.hslot.on{border-color:var(--gold);box-shadow:0 0 9px rgba(232,192,96,.5), inset 0 0 8px rgba(232,192,96,.2);}
.hslot:active{transform:scale(.93);}
.hslot.drop-hover{border-color:var(--gold);box-shadow:0 0 12px rgba(232,192,96,.8);}
.slot.drop-hover{border-color:var(--gold);box-shadow:0 0 12px rgba(232,192,96,.8);}
/* mientras se sostiene/arrastra un objeto equipable, la(s) ranura(s)
   compatibles del muñeco parpadean suavemente durante TODO el arrastre
   (no solo al pasar justo por encima, eso ya es .drop-hover) */
.slot.equip-hint{animation:equipHintPulse 1s ease-in-out infinite;}
/* Equipo fijo (herencia del Custodio): la ranura se marca en la
   esquina con dos píxeles dorados, nada más. Se pidió expresamente
   que NO hubiera candados grandes que rompan el estilo pixel art:
   basta con que se note que esa pieza ya no se mueve. */
.slot.locked{border-color:#6a5a38;}
.slot.locked::after{
  content:'';position:absolute;top:2px;right:2px;width:4px;height:4px;
  background:var(--gold,#e8c060);
  box-shadow:0 4px 0 0 rgba(232,192,96,.45), -4px 0 0 0 rgba(232,192,96,.45);
  pointer-events:none;
}
.idesc-req.locked{color:#c9a24a;font-weight:normal;font-style:italic;}
@keyframes equipHintPulse{
  0%,100%{border-color:var(--gold-dk,#8a6a2a);box-shadow:0 0 4px rgba(232,192,96,.25);}
  50%{border-color:var(--gold);box-shadow:0 0 10px rgba(232,192,96,.65);}
}
.hslot.dragging{opacity:.3;}
.cell.dragging{opacity:.3;}
.drag-ghost{position:fixed;width:32px;height:32px;pointer-events:none;z-index:999;image-rendering:pixelated;filter:drop-shadow(0 2px 5px rgba(0,0,0,.7));}
body.ui-dragging .drawer-scrim{pointer-events:none;}
.hlv{position:absolute;right:1px;bottom:0;font-size:8.5px;font-weight:bold;color:var(--gold);text-shadow:0 1px 2px #000;}
.hqty{position:absolute;right:2px;bottom:0;font-size:9px;font-weight:bold;color:#fff;text-shadow:0 1px 2px #000;}

/* ============================ PANELES ============================ */
#overlays{position:absolute;inset:0;z-index:20;pointer-events:none;}
.panel{pointer-events:auto;}
.panel.full{position:absolute;inset:0;display:flex;flex-direction:column;padding:calc(18px + var(--safe-t)) 18px calc(18px + var(--safe-b));}
.panel.center{align-items:center;justify-content:center;gap:20px;text-align:center;}
.panel.dim{background:#070a0ee8;backdrop-filter:blur(4px);}
.panel.dark{background:#000000f2;}

#panel-start{
  background:
    radial-gradient(ellipse at 50% 38%,#4a3316aa,transparent 58%),
    radial-gradient(ellipse at 50% 18%,#2a3b2a99,transparent 62%),
    linear-gradient(180deg,#0b1410,#0a0d10 55%,#140e08);
}
/* filete de luz al pie, como el resplandor de una antorcha fuera de
   cuadro: separa el menú del borde negro de la pantalla */
#panel-start::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:34%;
  background:linear-gradient(0deg,#e8842010,transparent);
  pointer-events:none;
}
/* ============================================================
   LA PORTADA
   ============================================================
   El título es lo primero que se ve del juego y tenía el aspecto de
   un <h1> con una sombra: letras planas, oro liso, sin peso. Ahora se
   monta por capas, como una pieza de orfebrería:

     · ::before  — el bloque de piedra: la misma palabra en un tono
                    oscuro, desplazada, que hace de canto tallado
     · <span>    — la cara de oro, un degradado recortado contra el
                    texto (background-clip), con veta clara arriba
     · ::after   — el brillo que la separa del fondo

   `data-t` repite la palabra para que las capas se generen solas
   desde CSS y el HTML siga teniendo un solo título legible. */
.title-wrap{display:flex;flex-direction:column;align-items:center;}
.game-title{
  position:relative;margin:0;
  font-size:clamp(46px,17vw,88px);
  letter-spacing:.10em;
  font-weight:bold;font-family:Georgia,"Times New Roman",serif;
  line-height:1.06;
  filter:drop-shadow(0 6px 0 #2b1a06) drop-shadow(0 10px 18px #000c);
}
/* el canto de piedra, detrás */
.game-title::before{
  content:attr(data-t);
  position:absolute;left:0;right:0;top:2px;
  color:#3a2408;
  -webkit-text-stroke:6px #3a2408;
  z-index:0;
}
/* la cara de oro */
.game-title span{
  position:relative;z-index:1;
  background:linear-gradient(180deg,
    #fff3cf 0%, #f6d98c 16%, #e2ab3e 42%,
    #b97d16 62%, #f0cc74 80%, #8d5d0d 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  -webkit-text-stroke:1.5px #5a3b0a;
  paint-order:stroke fill;
}
/* el resplandor cálido de detrás: es lo que hace que el oro parezca
   estar iluminado y no simplemente pintado de amarillo */
.game-title::after{
  content:'';position:absolute;z-index:-1;
  left:-26%;right:-26%;top:-22%;bottom:-30%;
  background:
    radial-gradient(ellipse at 50% 52%,#ffb84a4d,transparent 62%),
    radial-gradient(ellipse at 50% 60%,#e8722033,transparent 78%);
  pointer-events:none;
}
/* Destellos: dos estrellas de cuatro puntas sobre las letras, como en
   cualquier rótulo de metal pulido. Son dos barras cruzadas con
   degradado a transparente — nada de imágenes. */
.t-spark{
  position:absolute;z-index:2;pointer-events:none;
  width:var(--sp,26px);height:var(--sp,26px);
  margin:calc(var(--sp,26px) / -2) 0 0 calc(var(--sp,26px) / -2);
  opacity:0;
  animation:spark 5.5s ease-in-out infinite;
}
.t-spark::before,.t-spark::after{
  content:'';position:absolute;left:0;top:0;width:100%;height:100%;
  background:linear-gradient(90deg,transparent,#fff8e0 48%,#fff8e0 52%,transparent);
  -webkit-mask:radial-gradient(ellipse 50% 3% at 50% 50%,#000 0,transparent 100%);
  mask:radial-gradient(ellipse 50% 3% at 50% 50%,#000 0,transparent 100%);
}
.t-spark::after{transform:rotate(90deg);}
.t-spark.s1{left:62%;top:34%;--sp:34px;animation-delay:.6s;}
.t-spark.s2{left:17%;top:22%;--sp:20px;animation-delay:2.9s;}
@keyframes spark{
  0%,70%,100%{opacity:0;transform:scale(.4) rotate(0deg);}
  78%{opacity:1;transform:scale(1) rotate(25deg);}
  86%{opacity:0;transform:scale(.5) rotate(45deg);}
}
@media (prefers-reduced-motion:reduce){ .t-spark{animation:none;opacity:.55;} }
/* filete dorado bajo el título, con su rombo en medio */
.title-rule{display:flex;align-items:center;gap:7px;margin:12px 0 0;width:min(300px,78vw);}
.title-rule i{
  flex:1;height:2px;
  background:linear-gradient(90deg,transparent,#c9a24a 45%,#e8c060);
}
.title-rule i:last-child{background:linear-gradient(270deg,transparent,#c9a24a 45%,#e8c060);}
.title-rule em{
  width:7px;height:7px;background:#e8c060;transform:rotate(45deg);
  box-shadow:0 0 8px #e8c06099;
}
.game-sub{
  margin:13px 0 0;max-width:min(360px,88vw);
  font-size:13px;line-height:1.7;color:#9b9080;
  letter-spacing:.9px;font-style:italic;
}
.menu-btns{display:flex;flex-direction:column;gap:10px;width:min(300px,86%);margin:0 auto;}
/* en la portada el botón principal es el gesto de la pantalla:
   más alto y más separado que en el resto de paneles */
#panel-start .menu-btns{gap:12px;}
#panel-start .big-btn{padding:15px 18px;font-size:14.5px;letter-spacing:2.2px;}
#panel-start .big-btn.primary{box-shadow:
  inset 0 2px 0 rgba(255,255,255,.28),
  inset 0 -2px 0 rgba(0,0,0,.40),
  0 3px 0 var(--btn-deep),0 0 22px #e8c06033;}
.row-btns{display:flex;gap:10px;margin-top:10px;}
.row-btns .big-btn{flex:1;}
/* ============================================================
   BOTONES — RELIEVE PIXEL ART COMPARTIDO
   ============================================================
   Antes cada botón del juego traía su propio relieve: unos con sombra
   de 3 px, otros planos, otros con esquinas redondeadas. Todos usan
   ahora la misma receta, la de una chapa metálica de RPG pixelado:

     · contorno exterior negro y duro (nada de antialias)
     · chaflán: una línea de luz arriba y una de sombra abajo, POR
       DENTRO del borde, que es lo que da el volumen
     · "grosor" bajo el botón, que se hunde al pulsarlo
     · esquinas recortadas 2 px con degradados duros — el truco que
       hace que una caja CSS se lea como un sprite y no como un div

   Las variantes (primary/danger/sec) solo cambian los colores. */
.btnpx,
.big-btn,
.buy-btn,
.idesc-act,
.idesc-act-v2,
.cc-arrow{
  position:relative;cursor:pointer;
  font-family:inherit;font-weight:bold;
  border-style:solid;border-width:2px;
  border-radius:0;                       /* pixel art: esquinas duras */
  image-rendering:pixelated;
  transition:transform .07s steps(2,end),box-shadow .07s steps(2,end),filter .12s;
  /* esquinas recortadas: 2 px de cada punta se ven como fondo */
  clip-path:polygon(
    2px 0, calc(100% - 2px) 0, 100% 2px,
    100% calc(100% - 2px), calc(100% - 2px) 100%,
    2px 100%, 0 calc(100% - 2px), 0 2px);
}
/* el relieve va en una variable para no repetir la fórmula en cada
   variante: --btn-deep es el color del "canto" bajo el botón */
.btnpx, .big-btn, .buy-btn, .idesc-act, .idesc-act-v2, .cc-arrow{
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.22),
    inset 0 -2px 0 rgba(0,0,0,.40),
    inset 2px 0 0 rgba(255,255,255,.07),
    inset -2px 0 0 rgba(0,0,0,.22),
    0 3px 0 var(--btn-deep,#120c07);
}
.btnpx:active:not(:disabled),
.big-btn:active:not(:disabled),
.buy-btn:active:not(:disabled),
.idesc-act:active:not(:disabled),
.idesc-act-v2:active:not(:disabled),
.cc-arrow:active:not(:disabled){
  transform:translateY(3px);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.12),
    inset 0 -2px 0 rgba(0,0,0,.30),
    0 0 0 var(--btn-deep,#120c07);
}
@media (hover:hover){
  .btnpx:not(:disabled):hover,
  .big-btn:not(:disabled):hover,
  .buy-btn:not(:disabled):hover,
  .idesc-act:not(:disabled):hover,
  .idesc-act-v2:not(:disabled):hover,
  .cc-arrow:not(:disabled):hover{filter:brightness(1.12) saturate(1.05);}
}
.btnpx:disabled,.big-btn:disabled,.buy-btn:disabled,.idesc-act:disabled,.idesc-act-v2:disabled{
  opacity:.4;filter:grayscale(.75);cursor:default;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.10),inset 0 -2px 0 rgba(0,0,0,.30),0 3px 0 var(--btn-deep,#120c07);
}

.big-btn{
  --btn-deep:#120c07;
  padding:12px 16px;
  font-size:13.5px;letter-spacing:1.4px;
  color:var(--ink);
  background:linear-gradient(180deg,#4a3625 0%,#3a2b1d 48%,#221810 100%);
  border-color:#6b4a2c;
}
@media (hover:hover){
  .big-btn:not(:disabled):hover{border-color:var(--gold);}
}
/* el botón principal de cada pantalla: oro pulido, con un brillo que
   lo separa del resto sin necesidad de leerlo */
.big-btn.primary{
  --btn-deep:#5c4310;
  background:linear-gradient(180deg,#f5d98e 0%,#d3a03a 42%,#a6761c 78%,#8a6210 100%);
  border-color:#f5dc9a;color:#241703;
  text-shadow:0 1px 0 rgba(255,255,255,.35);
}
.big-btn.danger{
  --btn-deep:#3a100c;
  background:linear-gradient(180deg,#c05a4c 0%,#8e2f27 48%,#5d1c17 100%);
  border-color:#d2685c;color:#ffeae6;
}
/* ---- MENÚ DE PAUSA ----
   Eran siete chapas marrones idénticas en columna: una pared en la que
   había que leer cada línea para encontrar lo que buscabas. Ahora las
   opciones de verdad van arriba, los atajos de pruebas aparte y en
   otro color, y un separador con rótulo divide los dos bloques. */
/* Velo de la pausa: cierra al tocar fuera del cuadro, como el resto de
   paneles. Va DETRÁS del cuadro (z-index bajo) para no comerse los
   toques de los botones. */
.pause-scrim{position:absolute;inset:0;z-index:0;}
#panel-pause .popup-win{position:relative;z-index:1;}
.pause-menu{gap:8px;}
.pause-sep{
  display:flex;align-items:center;gap:8px;
  margin:5px 0 1px;font-size:8.5px;letter-spacing:2px;color:#7a6e5c;font-weight:bold;
}
.pause-sep::before,.pause-sep::after{
  content:'';flex:1;height:2px;
  background:linear-gradient(90deg,transparent,rgba(232,192,96,.22),transparent);
}
.pause-sep:empty{margin:3px 0 0;}
.pause-sep:empty::before{display:none;}
/* Atajos de pruebas: azul apagado, más bajos y con menos peso que las
   opciones reales — se distinguen de un vistazo sin leerlos. */
.big-btn.dev{
  --btn-deep:#101c26;
  padding:9px 14px;font-size:11px;letter-spacing:1px;
  background:linear-gradient(180deg,#3d5a6e 0%,#27404f 48%,#152531 100%);
  border-color:#4d7691;color:#bcd4e2;
}
.big-btn.dev::after{
  content:'DEV';
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  font-size:7.5px;letter-spacing:1px;font-weight:bold;
  color:#152531;background:#7fa8c0;padding:1px 4px;
  box-shadow:0 0 0 1px #0d1720;
}
@media (hover:hover){ .big-btn.dev:not(:disabled):hover{border-color:#8fc0d8;} }
/* botón "atrás" de los pasos de creación de personaje: secundario,
   separado del de continuar para que no se confundan al tocar */
.big-btn.cc-back{margin-top:8px;padding:9px 16px;font-size:12px;opacity:.85;}
.big-btn:disabled{opacity:.4;filter:grayscale(.7);}
/* el botón de apoyo del memorial de Larry es un <a>, no un <button> —
   necesita su propio display/alineado, lo demás lo hereda de .big-btn */
a.big-btn{display:block;text-align:center;text-decoration:none;box-sizing:border-box;}
/* ---- APOYO AL DESARROLLADOR (menú de pausa) ----
   Deliberadamente aparte del bloque de opciones: una fila propia, con
   el botón de donar a lo ancho y el icono de Instagram al lado. No
   compiten con REANUDAR ni con GUARDAR. */
.dev-links{
  display:flex;align-items:stretch;gap:8px;
  width:min(300px,86%);margin:14px auto 0;
}
.dev-links .big-btn.donate{
  --btn-deep:#0f2c2c;flex:1;
  padding:10px 8px;font-size:10.5px;letter-spacing:.4px;line-height:1.3;
  background:linear-gradient(180deg,#2f7d7a 0%,#1f5d5d 48%,#12383a 100%);
  border-color:#4aa6a0;color:#e6fbf8;
}
.dev-links .dl-ico{color:#ffd7dd;margin-right:4px;font-size:12px;}
@media (hover:hover){ .dev-links .big-btn.donate:hover{border-color:#8fe0d8;} }
/* Instagram: cuadrado, del tamaño del botón de al lado. El glifo es
   CSS puro (marco redondeado + anillo + punto) para no cargar ningún
   recurso externo desde el menú de pausa. */
.ig-btn{
  --btn-deep:#3a1030;
  flex:0 0 40px;display:flex;align-items:center;justify-content:center;
  border:2px solid #f0a6c8;border-radius:0;text-decoration:none;
  background:linear-gradient(135deg,#f9ce5a 0%,#e8663d 32%,#c72f8e 62%,#7b3ae0 100%);
  border-color:#f0a6c8;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.28),inset 0 -2px 0 rgba(0,0,0,.35),0 3px 0 var(--btn-deep);
  clip-path:polygon(
    2px 0, calc(100% - 2px) 0, 100% 2px,
    100% calc(100% - 2px), calc(100% - 2px) 100%,
    2px 100%, 0 calc(100% - 2px), 0 2px);
  cursor:pointer;transition:transform .07s steps(2,end),filter .12s;
}
.ig-btn:active{transform:translateY(3px);box-shadow:inset 0 2px 0 rgba(255,255,255,.12),0 0 0 var(--btn-deep);}
@media (hover:hover){ .ig-btn:hover{filter:brightness(1.12);} }
.ig-glyph{
  position:relative;width:19px;height:19px;
  border:2.5px solid #fff;border-radius:6px;
  box-shadow:0 1px 2px rgba(0,0,0,.35);
}
.ig-glyph::before{
  content:'';position:absolute;left:50%;top:50%;width:8px;height:8px;
  margin:-4px 0 0 -4px;border:2.5px solid #fff;border-radius:50%;
}
.ig-glyph::after{
  content:'';position:absolute;right:1px;top:1px;
  width:3px;height:3px;border-radius:50%;background:#fff;
}
/* ---- FIN DE LOS CRÉDITOS ----
   Sobre el negro del rodillo, abajo del todo: no tapa nada de lo que
   queda escrito en pantalla. */
/* ficha de un personaje que ya terminó la historia */
.char-card.done{border-color:#8a6a2c;}
.char-done{
  margin-top:3px;font-size:8.5px;letter-spacing:.4px;
  color:var(--gold);opacity:.85;line-height:1.3;
}
.panel.endcred{
  position:absolute;left:0;right:0;bottom:calc(26px + var(--safe-b));
  display:flex;flex-direction:column;align-items:center;gap:6px;
  text-align:center;
  animation:endcred-in .9s ease both;
}
.panel.endcred .big-btn{width:min(260px,74vw);}
.panel.endcred .hint-small{max-width:min(280px,80vw);}
@keyframes endcred-in{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.text-btn{background:none;border:none;color:#8d8272;font-size:12px;text-decoration:underline;cursor:pointer;padding:6px;}
.hint-small{font-size:10px;color:#7d7263;margin:4px 0 0;line-height:1.5;max-width:320px;}
.panel-title{margin:0;font-size:17px;letter-spacing:4px;color:var(--gold);text-shadow:0 2px 0 #000;}
.panel-title.death{color:#e35b4d;}
.card-text{margin:0;font-size:13px;line-height:1.6;color:var(--ink-dim);}

#panel-name{background:#000;}
.name-wrap{display:flex;flex-direction:column;align-items:center;gap:22px;width:min(360px,90%);}
.name-q{font-size:21px;line-height:1.7;color:#efe6d4;margin:0;min-height:60px;text-shadow:0 2px 18px #000;letter-spacing:.6px;font-weight:300;}
.name-field{position:relative;width:100%;}
#name-input{
  width:100%;padding:12px 14px;text-align:center;
  background:rgba(255,255,255,.05);border:none;border-bottom:2px solid var(--gold-dk);
  color:var(--gold);font-size:20px;font-family:inherit;letter-spacing:3px;outline:none;
}
#name-input::placeholder{color:#5a5040;letter-spacing:6px;}

/* ---------- creación de personaje: género ---------- */
#panel-gender, #panel-appearance, #panel-class{background:#0a0d10;gap:16px;}
.gender-row{display:flex;gap:16px;}
.gender-card{
  width:120px;padding:12px 8px 14px;cursor:pointer;
  background:linear-gradient(180deg,#241a12,#150f0a);
  border:3px solid #4a3524;display:flex;flex-direction:column;align-items:center;gap:8px;
  color:var(--ink-dim);font-size:13px;font-weight:bold;letter-spacing:.6px;
}
.gender-card canvas{width:64px;height:104px;image-rendering:pixelated;}
.gender-card.sel{border-color:var(--gold);color:var(--gold);box-shadow:0 0 14px rgba(232,192,96,.35);}
.gender-card:active{transform:scale(.97);}

/* ---------- apariencia / clase: layout compartido ---------- */
.cc-body{display:flex;align-items:flex-start;gap:16px;width:min(420px,92%);}
.cc-preview{
  flex:0 0 108px;height:172px;
  background:radial-gradient(ellipse at 50% 70%,#241a12,#120c07 75%);
  border:2px solid #4a3524;display:flex;align-items:center;justify-content:center;
}
.cc-preview canvas{width:96px;height:156px;image-rendering:pixelated;}
.cc-controls{flex:1;display:flex;flex-direction:column;gap:12px;min-width:0;}
.cc-row{display:flex;flex-direction:column;gap:6px;text-align:left;}
.cc-label{font-size:10px;letter-spacing:1.6px;color:var(--gold);text-transform:uppercase;font-weight:bold;}
.cc-hair-nav{display:flex;align-items:center;gap:10px;}
.cc-arrow{
  --btn-deep:#100b06;
  width:32px;height:32px;flex:0 0 32px;
  background:linear-gradient(180deg,#4a3625 0%,#2e2115 50%,#1c130b 100%);
  border-color:#6b4a2c;color:var(--gold-light);font-size:12px;
}
.cc-hair-name{flex:1;text-align:center;font-size:12.5px;color:var(--ink);font-weight:bold;}
.cc-swatches{display:flex;flex-wrap:wrap;gap:6px;}
.sw{
  width:24px;height:24px;border-radius:50%;cursor:pointer;
  border:2px solid rgba(255,255,255,.15);box-shadow:0 2px 4px rgba(0,0,0,.4);
}
.sw.sel{border-color:var(--gold);box-shadow:0 0 8px rgba(232,192,96,.6);transform:scale(1.1);}


/* ---------- continuar partida: selección de personaje ---------- */
/* cuadrícula de 3 columnas: 3 arriba y 3 abajo si llegan a haber 6 */
.charselect-list{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
  width:min(560px,96%);max-height:70vh;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;
  padding:4px 6px;
}
.char-card{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 8px 12px;
  background:linear-gradient(180deg,#241a12,#150f0a);border:2px solid #4a3524;cursor:pointer;
}
.char-card:active{filter:brightness(1.15);}
.char-portrait-wrap{
  width:100%;height:84px;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 50% 70%,#241a12,#120c07 75%);border:1px solid #3a2c1e;
}
.char-portrait-wrap canvas{width:46px;height:76px;image-rendering:pixelated;}
.char-info{width:100%;text-align:center;min-width:0;}
.char-name{font-size:12.5px;font-weight:bold;color:var(--gold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.char-class{font-size:9.5px;color:var(--ink-dim);letter-spacing:.5px;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.char-meta{font-size:9.5px;color:var(--ink-dim);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.char-del{
  position:absolute;top:-8px;right:-8px;width:22px;height:22px;border-radius:50%;padding:0;
  background:#5d1c17;border:2px solid #d2685c;color:#f3e9d2;font-size:13px;line-height:1;
  display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2;
}
.char-del:active{filter:brightness(1.2);}
.charselect-empty{color:var(--ink-dim);font-size:13px;padding:24px 10px;max-width:300px;}

.panel.cine{background:transparent;justify-content:center;align-items:center;padding:0 26px;}
.cine-text{
  font-size:23px;line-height:1.85;text-align:center;color:#efe6d4;
  text-shadow:0 2px 18px #000,0 0 40px rgba(0,0,0,.9);
  max-width:470px;min-height:130px;letter-spacing:.7px;font-weight:300;
}
.skip-btn{
  position:absolute;right:16px;top:calc(16px + var(--safe-t));
  padding:8px 14px;font-size:11px;letter-spacing:1.5px;
  background:#ffffff14;border:1px solid #ffffff2e;color:#cfc7b6;cursor:pointer;
}

/* ---------- descanso: oscuro y solo el reloj ---------- */
#panel-rest{background:#000;}
.rest-inner{display:flex;flex-direction:column;align-items:center;gap:14px;}
.rest-moon{width:56px;height:56px;image-rendering:pixelated;animation:restBob 3.4s ease-in-out infinite;}
@keyframes restBob{0%,100%{transform:translateY(0);opacity:.75;}50%{transform:translateY(-9px);opacity:1;}}
.rest-clock{
  font-size:52px;font-weight:bold;letter-spacing:6px;color:var(--gold);
  text-shadow:0 0 34px rgba(232,192,96,.35),0 3px 0 #000;
}
.rest-sub{font-size:12px;letter-spacing:3px;color:#6b6152;text-transform:uppercase;}

/* ---------- diálogo ---------- */
.panel.bottom-box{
  position:absolute;left:0;right:0;
  bottom:calc(92px + var(--safe-b));   /* por encima de los accesos directos */
  padding:0 8px;display:flex;justify-content:center;
}
/* El cuadro de diálogo es donde se cuenta el juego entero: se le dio
   más cuerpo y más letra, que a 13,5 px se leía apretado. */
.dlg-frame{width:min(640px,100%);padding:14px 16px;display:flex;gap:12px;align-items:flex-start;}
.dlg-portrait{
  position:relative;flex:0 0 58px;width:58px;height:58px;
  background:radial-gradient(ellipse at 50% 68%,#241a10,#12100c 75%);
  border:2px solid var(--gold-dk);
  box-shadow:inset 0 0 8px rgba(0,0,0,.6),0 0 8px rgba(232,192,96,.14);
  display:flex;align-items:center;justify-content:center;
}
.dlg-portrait::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(var(--gold),var(--gold)) left 0 top 0/7px 2px no-repeat,
    linear-gradient(var(--gold),var(--gold)) left 0 top 0/2px 7px no-repeat,
    linear-gradient(var(--gold),var(--gold)) right 0 top 0/7px 2px no-repeat,
    linear-gradient(var(--gold),var(--gold)) right 0 top 0/2px 7px no-repeat,
    linear-gradient(var(--gold),var(--gold)) left 0 bottom 0/7px 2px no-repeat,
    linear-gradient(var(--gold),var(--gold)) left 0 bottom 0/2px 7px no-repeat,
    linear-gradient(var(--gold),var(--gold)) right 0 bottom 0/7px 2px no-repeat,
    linear-gradient(var(--gold),var(--gold)) right 0 bottom 0/2px 7px no-repeat;
}
.dlg-portrait canvas{width:52px;height:52px;image-rendering:pixelated;}
.dlg-body{flex:1;min-width:0;}
.dlg-speaker{font-size:11px;letter-spacing:2.4px;color:var(--gold);font-weight:bold;margin-bottom:6px;}
.dlg-speaker::before{content:'◆ ';font-size:8px;vertical-align:middle;opacity:.85;}
.dlg-text{font-size:16px;line-height:1.6;color:var(--ink);min-height:52px;}
.dlg-arrow{position:absolute;right:12px;bottom:6px;font-size:11px;color:var(--gold);animation:dlgArrow .8s ease-in-out infinite;}
@keyframes dlgArrow{0%,100%{transform:translateY(0);opacity:.6;}50%{transform:translateY(3px);opacity:1;}}
.wave-break .row-btns{margin-top:8px;}

/* ---------- sliders ---------- */
.settings{width:100%;display:flex;flex-direction:column;gap:11px;margin-top:2px;}
.slider-row{display:flex;align-items:center;gap:9px;font-size:11.5px;color:var(--ink-dim);}
.slider-row>span{width:56px;text-align:left;}
.slider-row>b{width:24px;text-align:right;color:var(--gold);font-size:11px;}
.vslider{flex:1;position:relative;height:26px;cursor:pointer;touch-action:none;display:flex;align-items:center;}
.vslider::before{
  content:'';position:absolute;left:0;right:0;height:6px;
  background:#150f0a;border:1px solid #000;box-shadow:inset 0 1px 0 #ffffff10;
}
.vslider i{position:absolute;left:0;height:6px;background:linear-gradient(180deg,#f0cf7a,#a77c22);}
.vslider em{
  position:absolute;width:12px;height:18px;margin-left:-6px;
  background:linear-gradient(180deg,#e8d0a0,#9a7a48);border:1px solid #2a1d10;box-shadow:0 1px 3px #000a;
}

/* ---------- ventanas emergentes ---------- */
/* z-index:5 explícito: sin esto, un elemento interno con z-index propio
   (p.ej. la X de borrar personaje, z-index:2) pinta SIEMPRE por encima
   de un popup con z-index:auto, sea cual sea el orden en el HTML — así
   se veían las X de las tarjetas por delante del cuadro de confirmar borrado. */
.panel.popup{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;padding:14px;}
.popup-scrim{position:absolute;inset:0;background:rgba(6,9,12,.5);backdrop-filter:blur(2px);}
.popup-win{position:relative;width:min(360px,94%);max-height:82%;display:flex;flex-direction:column;padding:10px;}
.popup-win.narrow{width:min(320px,92%);}
.popup-win.wide{width:min(760px,98%);max-height:94%;}
.popup-win.in{animation:popIn .22s cubic-bezier(.2,1.3,.4,1);}
@keyframes popIn{0%{transform:scale(.9);opacity:0;}100%{transform:none;opacity:1;}}
.popup-head{display:flex;align-items:center;gap:8px;padding:2px 2px 8px;border-bottom:2px solid #4a3524;position:relative;z-index:3;}
.popup-head .panel-title{flex:1;font-size:14px;letter-spacing:2.6px;text-align:left;}
.hd-ic{width:20px;height:20px;flex:0 0 20px;}
/* El cuerpo de un panel emergente puede pasarse de alto — el menú de
   pausa, con sus atajos de pruebas y sus deslizadores, es más largo
   que un teléfono en horizontal. Antes se recortaba sin más y el
   botón de "menú principal" quedaba fuera de la pantalla, sin forma
   de llegar a él. Ahora rueda por dentro. */
.popup-body{
  padding:12px 2px 2px;display:flex;flex-direction:column;gap:12px;
  min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;
}
.popup-body.center-body{align-items:center;text-align:center;}
/* CERRAR (la X de cada panel): antes era un cuadro plano sin relieve,
   el único botón del juego que no se sentía pulsable. Ahora es una
   chapa pequeña con el mismo chaflán y el mismo hundido que el resto,
   en rojo apagado para leerse como "salir" sin gritar. */
.close-btn{
  --btn-deep:#2a0f0b;
  position:relative;width:30px;height:30px;padding:0;cursor:pointer;flex:0 0 30px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#7a3229 0%,#55201a 48%,#3a1410 100%);
  border:2px solid #b5584a;border-radius:0;image-rendering:pixelated;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.20),
    inset 0 -2px 0 rgba(0,0,0,.40),
    0 3px 0 var(--btn-deep);
  transition:transform .07s steps(2,end),box-shadow .07s steps(2,end),filter .12s;
  clip-path:polygon(
    2px 0, calc(100% - 2px) 0, 100% 2px,
    100% calc(100% - 2px), calc(100% - 2px) 100%,
    2px 100%, 0 calc(100% - 2px), 0 2px);
}
@media (hover:hover){ .close-btn:hover{filter:brightness(1.18);} }
.close-btn:active{
  transform:translateY(3px);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.10),inset 0 -2px 0 rgba(0,0,0,.30),0 0 0 var(--btn-deep);
}
.close-btn .bic{width:12px;height:12px;}
.shop-coins{display:flex;align-items:center;gap:4px;font-weight:bold;color:var(--gold);font-size:12.5px;}
/* ---------- cuadro memorial (homenaje a Larry) ---------- */
.popup-win.memorial{
  position:relative;overflow:hidden;padding-top:14px;
  background:radial-gradient(ellipse at 50% 26%,#2a1c10 0%,#160f08 68%,#100a05 100%);
}
.mem-motes{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    radial-gradient(1.5px 1.5px at 18% 22%, rgba(232,192,96,.45), transparent),
    radial-gradient(1.5px 1.5px at 78% 18%, rgba(232,192,96,.30), transparent),
    radial-gradient(1.5px 1.5px at 62% 68%, rgba(232,192,96,.35), transparent),
    radial-gradient(1.5px 1.5px at 30% 78%, rgba(232,192,96,.25), transparent),
    radial-gradient(1.5px 1.5px at 88% 55%, rgba(232,192,96,.30), transparent),
    radial-gradient(1.5px 1.5px at 45% 12%, rgba(232,192,96,.22), transparent);
  animation:memMotes 5s ease-in-out infinite;
}
@keyframes memMotes{0%,100%{opacity:.55;}50%{opacity:1;}}
/* versión ligera del ambiente del cuadro memorial, reutilizada en otros
   popups importantes (perfil, personaje, inventario) para que se
   sientan de la misma familia — motas doradas muy sutiles detrás del
   contenido, sin tocar su layout ni su lógica */
.popup-win.ambient{position:relative;overflow:hidden;}
.popup-win.ambient > .popup-head,
.popup-win.ambient > .charinfo-body,
.popup-win.ambient > .profile-body{position:relative;z-index:1;}
.drawer.ambient > .drawer-head,
.drawer.ambient > .drawer-body{position:relative;z-index:1;}
.mem-body{position:relative;z-index:1;}
.mem-rule{width:70%;height:1px;margin:10px auto;background:linear-gradient(90deg,transparent,rgba(232,192,96,.45),transparent);position:relative;}
.mem-rule::after{
  content:'\2726';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-size:8px;color:rgba(232,192,96,.7);background:#160f08;padding:0 4px;
}
.mem-rule.top{margin-top:0;margin-bottom:6px;}
.mem-rule.bottom{margin-bottom:12px;}
.mem-icon-wrap{position:relative;width:56px;height:80px;margin:2px auto 4px;}
.mem-icon-wrap canvas{
  width:100%;height:100%;image-rendering:pixelated;
  filter:drop-shadow(0 0 8px rgba(232,192,96,.55));
  animation:memSwordIn .6s cubic-bezier(.2,1.2,.4,1);
}
@keyframes memSwordIn{0%{transform:scale(.5) translateY(-10px);opacity:0;}100%{transform:none;opacity:1;}}
.mem-spark{position:absolute;width:4px;height:4px;border-radius:50%;background:#fff3c0;box-shadow:0 0 7px 2px rgba(255,230,150,.85);animation:memSpark 2.2s ease-in-out infinite;}
.mem-spark.a{top:8%;left:12%;animation-delay:0s;}
.mem-spark.b{top:30%;right:6%;animation-delay:.7s;}
.mem-spark.c{bottom:14%;left:20%;animation-delay:1.4s;}
@keyframes memSpark{0%,100%{opacity:0;transform:scale(.4);}50%{opacity:1;transform:scale(1);}}
.mem-title{
  font-size:19px;line-height:1.25;letter-spacing:2.5px;text-align:center;margin:2px 0 0;
  color:var(--gold);text-shadow:0 0 16px rgba(232,192,96,.55),0 2px 0 #000;
}
.mem-date{font-size:12px;letter-spacing:2px;color:var(--ink-dim);opacity:.8;margin-top:6px;}
.mem-phrase{font-size:17px;font-weight:bold;color:#ffe9c0;text-align:center;line-height:1.45;margin:0;text-shadow:0 1px 0 #000;}
.mem-sub{font-size:13px;line-height:1.5;color:var(--ink-dim);opacity:.78;text-align:center;margin:9px 0 0;}
.mem-sub.mem-kids{margin-top:6px;font-style:italic;opacity:.6;}
/* La nota del desarrollador. Va deliberadamente APAGADA y separada
   del epitafio: tiene que leerse como lo que es — alguien de fuera
   de la historia pidiendo algo — y no como una línea más de la
   lápida. La regla .mem-key se va con el chiste que la usaba. */
.mem-note{margin:0 auto 10px;max-width:250px;}
.mem-note-t{
  margin:0;font-size:11px;line-height:1.6;text-align:center;
  color:#7d7263;letter-spacing:.2px;
}
/* APOYAR AL DESARROLLADOR / CERRAR del memorial: mismo lenguaje pixel
   art que el resto (chaflán, esquinas recortadas, canto que se hunde),
   con el halo dorado propio de este cuadro por encima. */
.mem-btn{
  position:relative;
  padding:13px 14px;font-size:12.5px;font-weight:bold;letter-spacing:1.2px;text-align:center;
  cursor:pointer;text-decoration:none;display:block;
  border-style:solid;border-width:2px;border-radius:0;image-rendering:pixelated;
  transition:filter .12s,transform .07s steps(2,end),box-shadow .07s steps(2,end);
  clip-path:polygon(
    2px 0, calc(100% - 2px) 0, 100% 2px,
    100% calc(100% - 2px), calc(100% - 2px) 100%,
    2px 100%, 0 calc(100% - 2px), 0 2px);
}
.mem-btn.primary{
  background:linear-gradient(180deg,#fff3c8 0%,#ffe9a8 18%,#e8b448 55%,#c08f22 82%,#a97a1e 100%);
  border-color:#fff3c0;color:#241703;
  text-shadow:0 1px 0 rgba(255,255,255,.45);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.55),
    inset 0 -2px 0 rgba(0,0,0,.28),
    0 0 16px rgba(232,192,96,.5),
    0 3px 0 #6b4a10;
}
.mem-btn.primary:hover{filter:brightness(1.08);}
.mem-btn.primary:active{
  transform:translateY(3px);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.30),inset 0 -2px 0 rgba(0,0,0,.22),0 0 10px rgba(232,192,96,.4),0 0 0 #6b4a10;
}
.mem-btn.secondary{
  background:linear-gradient(180deg,#3a2b1d 0%,#241a11 50%,#160e08 100%);
  border-color:#4a3524;color:#8d8272;
  font-size:11px;letter-spacing:1px;padding:10px 14px;
  box-shadow:
    inset 0 2px 0 rgba(255,214,150,.10),
    inset 0 -2px 0 rgba(0,0,0,.45),
    0 3px 0 #100b06;
}
.mem-btn.secondary:hover{color:var(--ink-dim);border-color:#6b4a2c;filter:brightness(1.15);}
.mem-btn.secondary:active{
  transform:translateY(3px);
  box-shadow:inset 0 2px 0 rgba(255,214,150,.06),inset 0 -2px 0 rgba(0,0,0,.35),0 0 0 #100b06;
}

/* ============================================================
   LA NOTA DEL SABIO — pergamino desplegado (ver UI.openSageNote)
   ============================================================
   No reutiliza el marco de madera del resto de paneles a propósito:
   esto no es una ventana de interfaz, es un objeto del mundo. Dos
   rodillos torneados arriba y abajo, la hoja colgando entre ellos con
   su veta y sus bordes quemados, y el texto escrito encima. Todo en
   bloques de color duros y bordes rectos, sin sombras difusas, para
   que case con el pixel art: los únicos degradados son verticales y
   muy cortos, los que hacen de "torneado" del rodillo. */
/* Más ancha de lo que era (370 px): el texto es largo y en una
   columna estrecha se amontonaba hacia abajo hasta empujar el botón
   de cerrar fuera de la pantalla. */
.scroll-win{
  position:relative;width:min(560px,96%);max-height:97%;
  display:flex;flex-direction:column;align-items:stretch;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.6));
  animation:scrollIn .34s cubic-bezier(.2,1.15,.35,1);
}
@keyframes scrollIn{
  0%{transform:scaleY(.05);opacity:0;}
  45%{opacity:1;}
  100%{transform:scaleY(1);opacity:1;}
}
/* ---- rodillos ---- */
.scroll-rod{
  position:relative;flex:0 0 20px;height:20px;margin:0 -10px;
  background:linear-gradient(180deg,
    #6b4a2c 0%, #8a6238 18%, #b5834a 38%, #8a6238 62%, #5c3f26 84%, #3a2717 100%);
  border:2px solid #17100a;
  box-shadow:inset 0 2px 0 rgba(255,214,150,.28),inset 0 -2px 0 rgba(0,0,0,.45);
}
.scroll-rod.top{border-bottom-width:0;}
.scroll-rod.bottom{border-top-width:0;}
/* remates del rodillo: los "pomos" que sobresalen a los lados */
.sr-cap{
  position:absolute;top:-3px;width:9px;height:22px;
  background:linear-gradient(180deg,#d3a03a 0%,#a6761c 55%,#6b4a10 100%);
  border:2px solid #17100a;
  box-shadow:inset 0 1px 0 rgba(255,236,190,.5);
}
.sr-cap.l{left:-7px;}
.sr-cap.r{right:-7px;}
/* ---- la hoja ---- */
.scroll-sheet{
  position:relative;flex:1 1 auto;min-height:0;overflow:hidden;
  /* Papel viejo: manchas de tono distinto que se solapan, nunca un
     color plano. Los degradados van en diagonal y con centros
     irregulares — en cuanto dos tramas son perpendiculares y regulares
     la hoja se lee como papel milimetrado, que era justo el problema. */
  background:
    radial-gradient(ellipse 62% 38% at 18% 14%, rgba(206,178,124,.50), transparent 72%),
    radial-gradient(ellipse 54% 34% at 86% 30%, rgba(198,170,116,.42), transparent 74%),
    radial-gradient(ellipse 58% 40% at 30% 82%, rgba(202,174,120,.40), transparent 74%),
    radial-gradient(ellipse 50% 30% at 74% 66%, rgba(212,186,132,.36), transparent 76%),
    radial-gradient(ellipse 86% 60% at 50% 46%, rgba(248,239,214,.92), transparent 82%),
    linear-gradient(178deg,#f0e5c8 0%,#e8dab8 44%,#ddcda8 100%);
  border-left:2px solid #17100a;border-right:2px solid #17100a;
  box-shadow:
    /* bordes manoseados: la sombra entra por los cuatro lados */
    inset 8px 0 18px rgba(122,92,44,.30),
    inset -8px 0 18px rgba(122,92,44,.30),
    inset 0 10px 20px rgba(122,92,44,.26),
    inset 0 -10px 20px rgba(122,92,44,.26),
    inset 0 0 0 1px rgba(120,95,55,.22);
}
/* Grano del papel: fibra FINA en una sola diagonal (no una rejilla) mas
   un moteado de imperfecciones repartido a mano. Muy tenue: tiene que
   notarse al mirar de cerca, no competir con el texto. */
.scroll-grain{
  position:absolute;inset:0;pointer-events:none;opacity:.75;
  background:
    radial-gradient(circle 2px at 12% 9%,  rgba(140,108,56,.18), transparent 100%),
    radial-gradient(circle 3px at 71% 17%, rgba(146,112,58,.13), transparent 100%),
    radial-gradient(circle 2px at 34% 27%, rgba(140,108,56,.16), transparent 100%),
    radial-gradient(circle 4px at 88% 41%, rgba(150,116,60,.11), transparent 100%),
    radial-gradient(circle 2px at 21% 48%, rgba(140,108,56,.17), transparent 100%),
    radial-gradient(circle 3px at 60% 57%, rgba(146,112,58,.12), transparent 100%),
    radial-gradient(circle 2px at 83% 71%, rgba(140,108,56,.16), transparent 100%),
    radial-gradient(circle 3px at 15% 79%, rgba(146,112,58,.13), transparent 100%),
    radial-gradient(circle 2px at 47% 88%, rgba(140,108,56,.15), transparent 100%),
    radial-gradient(circle 2px at 92% 93%, rgba(140,108,56,.14), transparent 100%),
    repeating-linear-gradient(103deg,
      rgba(122,92,44,.055) 0 1px, transparent 1px 6px);
}
/* Veladura de los bordes: la hoja se oscurece hacia fuera, como el
   papel que lleva anos doblado en un bolsillo. Sustituye a las dos
   lineas de pliegue, que cruzaban el texto de lado a lado y se leian
   como subrayados. */
.scroll-sheet::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(ellipse 78% 72% at 50% 50%, transparent 58%, rgba(122,92,44,.20) 100%);
}
.scroll-inner{
  position:relative;z-index:1;
  padding:18px 26px 16px;overflow-y:auto;
  /* En unidades de VENTANA, no en porcentaje. `max-height:100%` no se
     resuelve aquí — el padre solo tiene un máximo, no un alto
     definido — y sin límite el pergamino crecía hasta el alto del
     texto: la hoja lo recortaba y la mitad de la carta quedaba
     inalcanzable, sin barra con la que bajar. El descuento son los dos
     rodillos y el botón de cerrar. */
  max-height:calc(97dvh - 100px);
  /* Se arrastra con el dedo y NO se pinta barra: una barra de sistema
     sobre un pergamino canta muchísimo. `overscroll-behavior:contain`
     evita que al llegar al final el gesto se lo quede la página. */
  -webkit-overflow-scrolling:touch;touch-action:pan-y;overscroll-behavior:contain;
  scrollbar-width:none;-ms-overflow-style:none;
  display:flex;flex-direction:column;gap:9px;
}
.scroll-orn{
  text-align:center;color:#a08a5c;font-size:12px;line-height:1;
  letter-spacing:6px;flex:0 0 auto;
}
.scroll-orn.top{margin-bottom:2px;}
.scroll-orn.bottom{margin-top:2px;}
/* el texto: serif, tinta sepia, con el sangrado de una carta */
.scroll-text{
  font-family:Georgia,"Times New Roman",serif;
  font-size:16px;line-height:1.68;color:#4a3a24;
  text-align:justify;text-indent:14px;
  text-shadow:0 1px 0 rgba(255,255,255,.35);
}
.scroll-text p{margin:0 0 9px;}
.scroll-text p:last-child{margin-bottom:0;}
.scroll-text em{font-style:italic;color:#6b4a10;font-weight:bold;letter-spacing:.4px;}
.scroll-text .sn-post{
  margin-top:11px;padding-top:9px;
  border-top:1px solid rgba(120,95,55,.28);
  font-style:italic;color:#5c4a2c;text-indent:0;text-align:center;
}
.scroll-sign{
  font-family:Georgia,"Times New Roman",serif;
  font-size:15px;font-style:italic;color:#6b5330;
  text-align:right;padding-top:4px;margin-top:2px;
  border-top:1px solid rgba(120,95,55,.28);
}
/* z-index: el rodillo de abajo se dibuja después y con su borde
   negativo llegaba a montarse encima del botón, que quedaba visible
   pero sin recibir el toque. */
.scroll-close{position:relative;z-index:3;margin:12px auto 0;width:min(200px,64%);flex:0 0 auto;}
/* en pantallas bajas el pergamino se queda sin sitio: el texto scrollea
   dentro de la hoja y el botón no se sale del cuadro */
.scroll-inner::-webkit-scrollbar{width:0;height:0;display:none;}
/* En su lugar, el aviso de que la carta sigue: el papel se desvanece
   por el borde de abajo, como una hoja que aún no se ha desenrollado
   del todo. Dice lo mismo que una barra y no rompe la escena. */
.scroll-sheet::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:30px;
  z-index:2;pointer-events:none;
  background:linear-gradient(to top,#ddcda8 0%,rgba(221,205,168,.72) 45%,transparent 100%);
}
/* «La carta sigue». El desvanecido de arriba avisa en silencio, pero en
   una pantalla pequeña se pasa por alto: media carta — el consejo del
   sabio, la posdata — se quedaba sin leer. Esta punta de flecha se
   balancea sobre el borde inferior mientras quede texto por ver, y
   desaparece a la primera que se arrastra: avisa una vez y se calla.
   En tinta sepia, del mismo color que la escritura. */
.scroll-more{
  position:absolute;left:50%;bottom:2px;z-index:3;
  margin-left:-13px;width:26px;height:22px;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;line-height:1;font-style:normal;
  color:#5a421e;
  text-shadow:0 1px 0 rgba(255,255,255,.6);
  /* un disco de papel algo más claro detrás: la flecha sola se perdía
     sobre la trama del pergamino a la primera ojeada, y esto existe
     precisamente para que NO se pase por alto */
  background:radial-gradient(circle,rgba(248,239,214,.95) 40%,rgba(248,239,214,0) 72%);
  pointer-events:none;
  animation:scrollMore 1.5s ease-in-out infinite;
  transition:opacity .25s;
}
.scroll-more.hide{display:none;}
@keyframes scrollMore{
  0%,100%{transform:translateY(0);opacity:.55;}
  50%{transform:translateY(5px);opacity:1;}
}
@media (prefers-reduced-motion:reduce){
  .scroll-more{animation:none;opacity:.85;}
}
@supports not (height:1dvh){
  .scroll-inner{max-height:calc(97vh - 100px);}
}
@media (max-height:620px){
  .scroll-text{font-size:14px;line-height:1.5;}
  .scroll-inner{padding:13px 18px 11px;}
}

/* ---------- cuadro de "subiste de nivel" ---------- */
.popup-win.levelup{overflow:hidden;box-shadow:0 0 0 1px #4a3524,0 0 34px rgba(232,192,96,.35),0 8px 30px rgba(0,0,0,.55);}
.lu-rays{
  position:absolute;inset:-40% -60%;z-index:0;pointer-events:none;
  background:repeating-conic-gradient(from 0deg,rgba(232,192,96,.08) 0deg 6deg,transparent 6deg 18deg);
  animation:luSpin 16s linear infinite;
}
@keyframes luSpin{to{transform:rotate(360deg);}}
.levelup .popup-body{position:relative;z-index:1;}
.lu-badge-wrap{position:relative;width:72px;height:72px;margin:2px auto 4px;}
.lu-badge-wrap canvas{width:72px;height:72px;image-rendering:pixelated;animation:luBadgeIn .5s cubic-bezier(.2,1.4,.4,1);}
@keyframes luBadgeIn{0%{transform:scale(.4) rotate(-25deg);opacity:0;}100%{transform:none;opacity:1;}}
.lu-spark{
  position:absolute;width:5px;height:5px;border-radius:50%;
  background:#fff3c0;box-shadow:0 0 8px 2px rgba(255,230,150,.9);
  animation:luSpark 1.6s ease-in-out infinite;
}
.lu-spark.a{top:-2px;left:6px;animation-delay:0s;}
.lu-spark.b{top:10px;right:-4px;animation-delay:.35s;}
.lu-spark.c{bottom:2px;left:-4px;animation-delay:.7s;}
.lu-spark.d{bottom:-2px;right:14px;animation-delay:1.05s;}
@keyframes luSpark{0%,100%{opacity:0;transform:scale(.4);}50%{opacity:1;transform:scale(1);}}
.lu-title{font-size:20px;letter-spacing:3px;text-align:center;text-shadow:0 0 18px rgba(232,192,96,.7),0 2px 0 #000;animation:luTitlePulse 1.4s ease-in-out infinite;}
@keyframes luTitlePulse{0%,100%{text-shadow:0 0 18px rgba(232,192,96,.7),0 2px 0 #000;}50%{text-shadow:0 0 28px rgba(232,192,96,1),0 2px 0 #000;}}
.lu-stats{display:flex;flex-direction:column;gap:6px;width:100%;margin-top:2px;}
.lu-stat-row{
  display:flex;align-items:center;gap:8px;padding:6px 10px;
  background:rgba(12,9,6,.72);border:1px solid #4a3524;border-radius:3px;
  position:relative;z-index:1;
}
.lu-stat-row .bic{width:16px;height:16px;flex:0 0 16px;}
.lu-stat-label{flex:1;text-align:left;font-size:12px;color:var(--ink-dim);letter-spacing:.5px;}
.lu-stat-val{font-size:13.5px;font-weight:bold;}

/* ---------- cajón de inventario ---------- */
.panel.drawer-wrap{position:absolute;inset:0;}
.drawer-scrim{position:absolute;inset:0;background:rgba(6,9,12,.45);}
.drawer{
  position:absolute;right:0;top:0;bottom:0;
  width:max(300px,22%);
  display:flex;flex-direction:column;
  padding:calc(8px + var(--safe-t)) 8px calc(8px + var(--safe-b));
  border-right:none;
}
.drawer.in{animation:drawerIn .26s cubic-bezier(.2,1,.3,1);}
@keyframes drawerIn{from{transform:translateX(100%);}to{transform:none;}}
.drawer-head{display:flex;align-items:center;gap:8px;padding:2px 2px 8px;border-bottom:2px solid #4a3524;position:relative;z-index:3;}
.drawer-head .panel-title{flex:1;font-size:14px;letter-spacing:3px;text-align:left;}
.drawer-body{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding-top:8px;-webkit-overflow-scrolling:touch;position:relative;z-index:3;}

.doll-area{
  position:relative;overflow:hidden;flex-shrink:0;
  background:linear-gradient(180deg,#221609,#150d05);border:2px solid var(--gold-dk);padding:9px 6px;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  box-shadow:inset 0 0 18px rgba(0,0,0,.5),0 0 12px rgba(232,192,96,.12);
}
/* decoración muy discreta detrás de todo (arco + emblema de Telos):
   no debe competir con el personaje, por eso va casi transparente y
   detrás de las ranuras y el muñeco (z-index natural del documento) */
.doll-area::before{
  content:'';position:absolute;left:50%;top:6%;width:74%;height:88%;
  transform:translateX(-50%);pointer-events:none;
  border:2px solid rgba(232,192,96,.07);border-radius:50% 50% 8% 8%/60% 60% 6% 6%;
}
.doll-area::after{
  content:'\2726';position:absolute;left:50%;top:4px;transform:translateX(-50%);
  font-size:10px;color:rgba(232,192,96,.22);pointer-events:none;
}
/* "altar de reliquias": halo ámbar/carmesí + un par de círculos
   rituales tenues, centrados detrás del personaje — sensación de
   cámara/santuario sin quitarle protagonismo al muñeco ni a las
   ranuras (todo esto va a z-index:0, ellas siguen en z-index:1) */
/* resplandor cálido de suelo, no un círculo ritual con anillos finos
   (los aros semitransparentes rojos no convencían) — una mancha de luz
   ovalada bajo los pies, como un foco/altar, sin bordes ni líneas */
.doll-halo{
  position:absolute;left:50%;top:60%;width:150px;height:76px;
  transform:translate(-50%,-50%);pointer-events:none;z-index:0;border-radius:50%;
  background:radial-gradient(ellipse at 50% 50%,rgba(232,160,100,.28),rgba(160,80,40,.10) 55%,transparent 78%);
  animation:dollHaloPulse 4.5s ease-in-out infinite;
}
@keyframes dollHaloPulse{0%,100%{opacity:.7;}50%{opacity:1;}}
.slot-line{display:flex;gap:6px;justify-content:center;position:relative;z-index:1;}
.doll-row{display:flex;align-items:center;justify-content:center;gap:7px;position:relative;z-index:1;}
.doll-col{display:flex;flex-direction:column;gap:6px;}
.doll{
  width:88px;height:126px;flex:0 0 88px;position:relative;
  background:radial-gradient(ellipse at 50% 30%,rgba(255,230,180,.10),transparent 55%),
             radial-gradient(ellipse at 50% 68%,#3a2b1c,#160e07 75%);
  border:2px solid var(--gold-dk);display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 0 10px rgba(0,0,0,.6);
}
/* pequeña plataforma bajo los pies, para que no quede flotando */
.doll::after{
  content:'';position:absolute;left:50%;bottom:8px;width:52px;height:8px;margin-left:-26px;
  background:radial-gradient(ellipse,rgba(232,192,96,.28),transparent 72%);
}
#doll-canvas{width:100%;height:100%;image-rendering:pixelated;position:relative;z-index:1;}
.slot{
  width:42px;height:42px;position:relative;cursor:pointer;
  background:linear-gradient(180deg,#1c140d,#100a06);
  border:2px solid #4a3626;transition:border-color .15s,box-shadow .15s,transform .1s;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.6);
  display:flex;align-items:center;justify-content:center;
}
/* esquinas pixeladas discretas en cada ranura, doradas solo cuando
   hay algo puesto — refuerza "equipado" sin recurrir a un brillo difuso */
.slot::before{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .15s;
  background:
    linear-gradient(var(--gold),var(--gold)) left 0 top 0/5px 2px no-repeat,
    linear-gradient(var(--gold),var(--gold)) left 0 top 0/2px 5px no-repeat,
    linear-gradient(var(--gold),var(--gold)) right 0 top 0/5px 2px no-repeat,
    linear-gradient(var(--gold),var(--gold)) right 0 top 0/2px 5px no-repeat,
    linear-gradient(var(--gold),var(--gold)) left 0 bottom 0/5px 2px no-repeat,
    linear-gradient(var(--gold),var(--gold)) left 0 bottom 0/2px 5px no-repeat,
    linear-gradient(var(--gold),var(--gold)) right 0 bottom 0/5px 2px no-repeat,
    linear-gradient(var(--gold),var(--gold)) right 0 bottom 0/2px 5px no-repeat;
}
.slot.filled{
  border-color:#8a6238;background:linear-gradient(180deg,#3a2b1d,#241a11);
  box-shadow:0 0 7px rgba(232,192,96,.28),inset 0 0 6px rgba(0,0,0,.5);
}
.slot.filled::before{opacity:1;}
@media (hover:hover){
  .slot:hover{border-color:#a97a1e;box-shadow:0 0 9px rgba(232,192,96,.35);}
  .slot.filled:hover{box-shadow:0 0 11px rgba(232,192,96,.45),inset 0 0 6px rgba(0,0,0,.5);}
}
.slot:active{filter:brightness(1.2);transform:scale(.94);}
.slot canvas{width:34px;height:34px;image-rendering:pixelated;}
.slot.sel{border-color:var(--gold);box-shadow:0 0 8px rgba(232,192,96,.45);}
.slot .lvtag{
  position:absolute;right:1px;bottom:1px;font-size:8px;color:#241703;font-weight:800;
  background:linear-gradient(180deg,var(--gold-light),var(--gold-dk));padding:0 3px;line-height:1.4;
}

/* Ya no ocupa sitio fijo dentro del cajón (antes empujaba el resto
   hacia abajo y con descripciones largas — bonus de set, requisito de
   nivel...— se quedaba muy apretado). Ahora es una tarjeta flotante
   que aparece sobre la izquierda del inventario (el cajón está
   anclado a la derecha, ver .drawer) solo mientras hay un objeto
   seleccionado, y desaparece sola si el objeto se deselecciona o si
   se cierra el inventario (es descendiente de #panel-inv). */
.item-desc{
  position:absolute;right:100%;top:calc(54px + var(--safe-t));margin-right:10px;
  width:min(252px,62vw);max-height:min(560px,78vh);overflow-y:auto;
  background:linear-gradient(180deg,#1f140b,#150d06);border:2px solid #4a3524;padding:12px 13px;
  font-size:11px;line-height:1.45;color:var(--ink-dim);
  box-shadow:inset 0 0 10px rgba(0,0,0,.45),inset 0 0 0 1px rgba(232,192,96,.06),0 8px 20px rgba(0,0,0,.55);
  display:none;
}
.item-desc.show{display:block;animation:idescIn .18s ease-out;}
@keyframes idescIn{from{opacity:0;transform:translateX(8px);}to{opacity:1;transform:none;}}
.idesc{display:flex;gap:9px;align-items:flex-start;width:100%;}
.idesc-ic{flex:0 0 44px;height:44px;background:#0f0b07;border:1px solid #4a3524;display:flex;align-items:center;justify-content:center;}
.idesc-ic canvas{width:38px;height:38px;image-rendering:pixelated;}
.idesc-main{flex:1;min-width:0;}
.idesc-name{font-size:13.5px;color:var(--ink);font-weight:bold;}
.idesc-sub{font-size:10px;color:var(--gold);letter-spacing:.6px;margin:2px 0 4px;}
.idesc-body{font-size:11px;line-height:1.5;}
.idesc-stat{color:#9fd8ff;}
.idesc-sp{color:#c0a0ff;}

/* ---- tarjeta completa de una pieza de equipo: ícono grande arriba,
   centrada, secciones separadas por divisores dorados tenues ---- */
.idesc-v2{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1px;width:100%;}
.idesc-v2 .idesc-ic{
  flex:none;width:60px;height:60px;margin-bottom:5px;
  background:radial-gradient(ellipse at 50% 35%,rgba(255,220,160,.14),transparent 65%),#0f0b07;
  border:2px solid var(--gold-dk);box-shadow:0 0 14px rgba(232,192,96,.18),inset 0 0 8px rgba(0,0,0,.5);
}
.idesc-v2 .idesc-ic canvas{width:50px;height:50px;}
.idesc-v2 .idesc-name{font-size:15px;letter-spacing:.3px;}
.idesc-v2 .idesc-type{font-size:10px;color:var(--ink-dim);letter-spacing:.8px;text-transform:uppercase;margin-top:2px;}
.idesc-setline{font-size:10.5px;font-weight:bold;margin-top:4px;letter-spacing:.2px;}
.idesc-divider{width:82%;height:1px;margin:9px auto;background:linear-gradient(90deg,transparent,rgba(232,192,96,.35),transparent);}
.idesc-section{width:100%;text-align:left;}
.idesc-sec-title{font-size:9.5px;font-weight:bold;letter-spacing:1.4px;text-transform:uppercase;color:var(--gold);margin-bottom:4px;}
.idesc-sec-title.bonus{color:#e8555a;}
.idesc-stat-line{font-size:11px;color:#9fd8ff;line-height:1.7;}
.idesc-bonus-line{font-size:10.5px;line-height:1.6;color:#8a7060;}
.idesc-bonus-line.active{color:#7fe08a;font-weight:bold;}
.idesc-lore{font-size:10.5px;font-style:italic;color:#a89a86;line-height:1.55;width:100%;text-align:left;}
.idesc-req{font-size:10.5px;font-weight:bold;margin-top:7px;width:100%;text-align:left;}
.idesc-req.ok{color:#8fd08a;}
.idesc-req.bad{color:#ff8a7a;}
/* EQUIPAR / QUITAR / COMER de la tarjeta de objeto: ancho a su texto
   (no ocupa todo el cartel) y con el relieve común de .btnpx */
.idesc-act-v2{
  --btn-deep:#5c4310;
  margin-top:11px;display:inline-block;width:auto;min-width:118px;
  padding:10px 20px;font-size:12px;letter-spacing:1.2px;text-align:center;
  background:linear-gradient(180deg,#f5d98e 0%,#d3a03a 42%,#a6761c 78%,#8a6210 100%);
  border-color:#f5dc9a;color:#241703;
  text-shadow:0 1px 0 rgba(255,255,255,.35);
}
/* QUITAR: rojo, para que no se confunda con EQUIPAR de un vistazo */
.idesc-act-v2.remove{
  --btn-deep:#3a100c;
  background:linear-gradient(180deg,#e0796a 0%,#a83d33 46%,#8e2f27 72%,#5d1c17 100%);
  border-color:#d2685c;color:#fff0ec;
  text-shadow:0 1px 0 rgba(0,0,0,.45);
}

.idesc-act{
  --btn-deep:#5c4310;
  flex:0 0 auto;align-self:center;padding:9px 12px;font-size:10px;letter-spacing:.8px;
  background:linear-gradient(180deg,#f0c868 0%,#d3a03a 45%,#8a6210 100%);
  border-color:#f5dc9a;color:#241703;
}

/* dos columnas con un divisor vertical dorado tenue en el centro —
   crece bien aunque se sigan sumando stats nuevas (ver .stat abajo) */
.stats-box{
  position:relative;
  display:grid;grid-template-columns:1fr 1fr;gap:0 10px;
  background:linear-gradient(180deg,#221609,#150d05);border:2px solid var(--gold-dk);padding:7px 9px;font-size:10.5px;
  box-shadow:inset 0 0 10px rgba(0,0,0,.4);
}
.stats-box::before{
  content:'';position:absolute;left:50%;top:8px;bottom:8px;width:1px;
  background:linear-gradient(180deg,transparent,rgba(232,192,96,.28),transparent);
}
/* ---------- ficha de personaje (stats + hechizos) ---------- */
.charinfo-body{display:flex;flex-direction:column;gap:8px;overflow-y:auto;padding:2px;}
.ci-head{
  display:flex;gap:10px;align-items:stretch;padding-bottom:10px;
  border-bottom:1px solid rgba(232,192,96,.18);
}
/* Las dos mitades de la cabecera de la ficha de personaje funcionan
   como selector: la izquierda vuelve a atributos/hechizos, la derecha
   abre la personalizacion (ver UI.openCharInfo) */
.ci-head-half{
  display:flex;align-items:center;gap:10px;cursor:pointer;
  background:transparent;border:2px solid transparent;padding:6px;
  color:inherit;font:inherit;text-align:left;
}
.ci-head-half.sel{
  background:linear-gradient(180deg,rgba(232,192,96,.10),rgba(232,192,96,.03));
  border-color:rgba(232,192,96,.35);
}
.ci-head-half:active{filter:brightness(1.2);}
.ci-head-main{flex:1 1 auto;min-width:0;}
.ci-head-custom{flex:0 0 auto;flex-direction:column;justify-content:center;gap:6px;}
.ci-avatar{
  order:0;   /* .avatar-frame trae order:2 pensado para el HUD; aqui no aplica */
  width:56px;height:56px;cursor:pointer;
}
.ci-custom-label{
  /* "PERSONALIZACIÓN" es una sola palabra larga: no puede partirse sin
     quedar fea, así que el tamaño se ajusta para que quepa entera */
  font-size:7.5px;letter-spacing:.2px;text-transform:uppercase;color:var(--gold-dk);
  text-align:center;line-height:1.2;white-space:nowrap;
}
.ci-head-custom.sel .ci-custom-label{color:var(--gold-light);}
.ci-doll{width:76px;height:112px;flex:0 0 76px;}
.ci-doll canvas{width:64px;height:104px;image-rendering:pixelated;display:block;}
.ci-info{display:flex;flex-direction:column;gap:3px;}
.ci-name{font-size:18px;font-weight:bold;color:var(--gold);text-shadow:0 2px 0 #000;}
.ci-class{
  display:inline-block;font-size:10.5px;color:var(--gold-dk);letter-spacing:1.2px;text-transform:uppercase;
  background:rgba(232,192,96,.08);border:1px solid rgba(232,192,96,.25);padding:2px 7px;margin-top:2px;
  width:fit-content;
}
.ci-spells{display:flex;flex-direction:column;gap:8px;}
.ci-spell{display:flex;gap:10px;align-items:flex-start;background:#1b120a;border:2px solid #4a3524;padding:8px;}
.ci-spell canvas{width:32px;height:32px;flex:0 0 32px;border-radius:50%;image-rendering:pixelated;}
.ci-spell-text{flex:1;min-width:0;}
.ci-spell-name{font-size:12.5px;font-weight:bold;color:var(--ink);margin-bottom:2px;}
.ci-spell-desc{font-size:11px;color:var(--ink-dim);line-height:1.4;}

/* ---------- perfil: el avatar como protagonista, marco y foto abajo ---------- */
.profile-hero{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:12px 0 14px;margin-bottom:2px;border-bottom:1px solid rgba(232,192,96,.18);
}
.profile-hero-frame{
  order:0;   /* .avatar-frame trae order:2 pensado para el HUD; aquí no aplica */
  width:84px;height:84px;cursor:default;margin-bottom:4px;
  box-shadow:0 4px 14px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.1);
}
.profile-hero .ci-name{font-size:16px;}
.profile-body{display:flex;flex-direction:column;gap:4px;overflow-y:auto;max-height:70vh;padding:2px;}
.profile-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px;margin-bottom:10px;}
.profile-opt{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;cursor:pointer;
  background:linear-gradient(180deg,#2b2018,#170f09);border:2px solid #4a3524;color:var(--ink-dim);font-size:9.5px;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.5);
}
.profile-opt canvas{width:32px;height:32px;image-rendering:pixelated;}
.profile-opt.sel{
  border-color:var(--gold);background:linear-gradient(180deg,#4a3418,#2a1c0d);color:var(--gold);
  box-shadow:inset 0 0 6px rgba(232,192,96,.25),0 0 8px rgba(232,192,96,.3);
}
.profile-opt.sel::after{
  content:'';position:absolute;left:3px;top:3px;width:5px;height:5px;
  background:var(--gold);transform:rotate(45deg);
}
.profile-opt.locked{opacity:.45;filter:grayscale(.7);cursor:default;}
.profile-opt:active:not(.locked){transform:scale(.95);}

/* fila de stat: icono en su cajita, nombre, y el valor pegado a la
   derecha — con una línea muy tenue entre filas en vez de verse todo
   amontonado en un bloque de texto */
.stat{
  display:flex;align-items:center;gap:6px;padding:3px 0;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.stat:last-child,.stats-box > .stat:nth-last-child(2){border-bottom:none;}
.stat canvas{
  width:16px;height:16px;flex:0 0 16px;image-rendering:pixelated;padding:2px;
  background:var(--panel-bg-dark);border:1px solid #4a3524;box-sizing:content-box;
}
.stat span{color:var(--ink-dim);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.stat b{color:var(--gold-light);font-weight:800;text-align:right;white-space:nowrap;}
/* Fila de valor largo (el bonus de un set completo). Antes ocupaba las
   DOS columnas (grid-column:1/-1), así que caía debajo de "Alcance"
   cruzando toda la caja y con el texto pegado al extremo opuesto de su
   etiqueta. Ahora es una celda normal: al ser la número 12 de la
   rejilla cae en la columna DERECHA, justo debajo de "Esquiva", y el
   texto del bonus baja de renglón dentro de su propia media caja en
   vez de irse al otro lado. */
.stat.stat-long{align-items:flex-start;flex-wrap:wrap;}
.stat.stat-long > span{flex:0 0 auto;white-space:nowrap;}
.stat.stat-long b{
  flex:1 1 100%;min-width:0;margin-left:24px;
  text-align:left;white-space:normal;overflow-wrap:anywhere;line-height:1.35;
}

.inv-tabs{display:flex;gap:5px;position:relative;}
/* PESTAÑAS (Equipo/Recursos del inventario, y las del sabio): mismo
   lenguaje pixel art que los botones — esquinas recortadas, chaflán de
   luz arriba y canto abajo — pero leyéndose como lengüetas: la
   inactiva está HUNDIDA en el marco y la activa sobresale hacia
   arriba, con su muesca dorada. */
.tab{
  position:relative;flex:1;padding:8px 5px;font-size:11px;font-weight:bold;letter-spacing:.6px;
  background:linear-gradient(180deg,#31251b 0%,#231a11 45%,#150e08 100%);
  border:2px solid #4a3626;color:#8d8272;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:5px;
  border-radius:0;image-rendering:pixelated;
  box-shadow:inset 0 2px 0 rgba(255,214,150,.08),inset 0 -3px 0 rgba(0,0,0,.5);
  transition:transform .07s steps(2,end),box-shadow .07s steps(2,end),filter .12s;
  clip-path:polygon(2px 0, calc(100% - 2px) 0, 100% 2px, 100% 100%, 0 100%, 0 2px);
}
.tab canvas{width:13px;height:13px;image-rendering:pixelated;opacity:.7;}
@media (hover:hover){ .tab:not(.active):hover{filter:brightness(1.15);} }
/* la pestaña activa no solo cambia de color: se "levanta" y lleva una
   pequeña muesca dorada arriba, para que se note de un vistazo cuál
   está seleccionada sin tener que leer el texto */
.tab.active{
  background:linear-gradient(180deg,#8a6323 0%,#5a3f1c 45%,#33230f 100%);
  border-color:var(--gold);color:var(--gold-light);
  text-shadow:0 1px 0 rgba(0,0,0,.5);
  box-shadow:
    inset 0 2px 0 rgba(255,236,190,.30),
    inset 0 -3px 0 rgba(0,0,0,.42),
    0 0 9px rgba(232,192,96,.30);
  transform:translateY(-2px);
}
.tab.active::before{
  content:'';position:absolute;left:50%;top:-6px;width:6px;height:6px;margin-left:-3px;
  background:var(--gold);transform:rotate(45deg);
  box-shadow:0 0 5px rgba(232,192,96,.7);
}
.tab.active canvas{opacity:1;}
.tab:active{transform:translateY(1px);box-shadow:inset 0 2px 0 rgba(255,214,150,.06),inset 0 -1px 0 rgba(0,0,0,.5);}

/* pestañas del sabio (Vender/Mejorar/Armas y sus sub-pestañas
   Recursos/Objetos): a diferencia de las del inventario (2 opciones,
   se reparten todo el ancho), aquí el marco quedaba igual de ancho
   que el panel aunque el texto fuera corto — ahora se ajustan al
   texto, con algo de aire, y quedan pegadas a la izquierda */
.shop-tabs .tab,.sell-subtabs .tab{
  flex:0 0 auto;padding-left:16px;padding-right:16px;
}
.shop-tabs,.sell-subtabs{justify-content:center;}

.inv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(62px,1fr));gap:6px;padding-bottom:12px;}
.cell{
  aspect-ratio:1;background:linear-gradient(180deg,#2b2018,#170f09);border:2px solid #4a3626;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  cursor:pointer;position:relative;padding:3px;touch-action:none;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.5);
}
.cell:active{filter:brightness(1.25);transform:scale(.96);}
.cell.equipped{border-color:var(--gold);box-shadow:inset 0 0 6px rgba(232,192,96,.3),0 0 6px rgba(232,192,96,.25);}
.cell.equipped::after{
  content:'';position:absolute;left:3px;top:3px;width:5px;height:5px;
  background:var(--gold);transform:rotate(45deg);
}
.cell[data-rar]{border-color:var(--rar);background:var(--rarbg);}
.slot[data-rar]{border-color:var(--rar);background:var(--rarbg);}
.hslot[data-rar]{border-color:var(--rar);}
.shop-row[data-rar]{border-color:var(--rar);background:var(--rarbg);}
.shop-row[data-rar] .nm{color:var(--rar);}
.idesc-rar{font-weight:bold;}
.rar-dot{display:inline-block;width:6px;height:6px;margin-right:4px;vertical-align:middle;}
.cell.sel{border-color:#9fd8ff;}
.cell canvas{width:34px;height:34px;image-rendering:pixelated;}
.cell .nm{font-size:7.5px;color:var(--ink-dim);text-align:center;line-height:1.1;}
.cell .qty{
  position:absolute;right:2px;top:1px;font-size:8.5px;font-weight:800;color:#241703;
  background:linear-gradient(180deg,var(--gold-light),var(--gold-dk));padding:0 3px;line-height:1.4;
}
.cell .lvtag{
  position:absolute;left:2px;bottom:1px;font-size:7.5px;color:#241703;font-weight:800;
  background:linear-gradient(180deg,var(--gold-light),var(--gold-dk));padding:0 3px;line-height:1.35;
}
/* mejora respecto a lo ya equipado: flecha verde en la esquina libre */
.cell .upgrade-arrow{
  position:absolute;left:2px;top:1px;width:11px;height:11px;
  display:flex;align-items:center;justify-content:center;
  border-radius:2px;font-size:8px;line-height:1;
}
.cell .upgrade-arrow.up{
  background:#183a1a;border:1px solid #7fe08a;color:#a8f0ac;
  box-shadow:0 0 5px rgba(120,224,140,.75);
  animation:arrowBlink 1.1s ease-in-out infinite;
}
.cell .upgrade-arrow.down{
  background:#3a1818;border:1px solid #e08a7f;color:#f0aca8;
  box-shadow:0 0 5px rgba(224,120,120,.75);
}
@keyframes arrowBlink{0%,100%{opacity:1;}50%{opacity:.35;}}
.empty-note{color:#6b6152;font-size:11.5px;text-align:center;padding:20px 10px;grid-column:1/-1;}

/* ---------- tienda ---------- */
.shop-body{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:7px;padding:8px 2px 6px;-webkit-overflow-scrolling:touch;position:relative;z-index:3;}
/* panel de objetos de desarrollador: mismo comportamiento que la
   tienda (lista larga con scroll propio) */
.dev-body{max-height:76vh;overflow-y:auto;display:flex;flex-direction:column;gap:7px;padding:8px 2px 6px;-webkit-overflow-scrolling:touch;}
.shop-row{
  position:relative;display:flex;align-items:center;gap:9px;padding:8px;
  background:linear-gradient(180deg,#241a10,#160e07);border:2px solid #4a3524;
  box-shadow:inset 0 0 8px rgba(0,0,0,.35);
}
.shop-row.owned{border-color:#4f6f57;background:linear-gradient(180deg,#1c2a20,#131e17);}
.shop-row .ic{
  width:42px;height:42px;flex:0 0 42px;background:var(--panel-bg-dark);
  display:flex;align-items:center;justify-content:center;border:1px solid #4a3524;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.5);
}
.shop-row .ic canvas{width:36px;height:36px;image-rendering:pixelated;}
.shop-row .info{flex:1;min-width:0;}
.shop-row .nm{font-size:12.5px;font-weight:bold;color:var(--ink);}
.shop-row .nm .x{color:var(--gold);}
.shop-row .desc{font-size:10px;color:var(--ink-dim);line-height:1.4;margin-top:2px;}
.shop-row .cost{color:var(--gold);font-weight:bold;}
.owned-tag{color:#8fd08a;font-size:10px;font-weight:bold;text-align:center;min-width:52px;}
/* Distintivo de "la que llevas puesta" en la fragua: ahora el Herrero
   lista TODAS tus armas de clase, no solo la equipada (ver UI.renderShop) */
.fc-eq{
  display:inline-block;margin-left:6px;vertical-align:middle;
  font-size:8px;font-weight:bold;letter-spacing:.8px;
  color:#241703;background:linear-gradient(180deg,#f0c460,#c2912c);
  border:1px solid #17100a;padding:1px 4px;
}
/* barra de la olla: la cuenta atrás de cada pieza al fuego, para que se
   vea de un vistazo cuánto le queda (ver UI.renderCook) */
.cook-bar{
  margin-top:4px;height:6px;background:#160e07;border:1px solid #4a3524;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.6);overflow:hidden;
}
.cook-bar i{
  display:block;height:100%;background:linear-gradient(180deg,#f0b64c,#a4620f);
  transition:width .12s linear;
}
.cook-bar.done i{background:linear-gradient(180deg,#9fe89a,#3f8a3a);}
/* COMPRAR / VENDER / COCINAR / RECOGER / EQUIPAR de las filas de
   tienda y de la olla — mismo relieve que el resto (ver .btnpx) */
.buy-btn{
  --btn-deep:#5c4310;
  padding:9px 12px;font-size:10.5px;letter-spacing:.8px;
  background:linear-gradient(180deg,#f0c868 0%,#d3a03a 45%,#a6761c 80%,#8a6210 100%);
  border-color:#f5dc9a;color:#241703;
  text-shadow:0 1px 0 rgba(255,255,255,.3);
  flex:0 0 auto;min-width:58px;align-self:center;
}
.buy-btn.sec{
  --btn-deep:#122029;
  background:linear-gradient(180deg,#4d7691 0%,#2f4a5e 48%,#1d3040 100%);
  border-color:#5c8098;color:#dceaf3;text-shadow:0 1px 0 rgba(0,0,0,.45);
}
/* título de sección reutilizable — lo usan la tienda, el panel de
   personaje, el de perfil, etc. Un rombo + una línea que se apaga
   hacia la derecha, en vez de solo texto suelto. */
.sec-title,.ci-section-title{
  display:flex;align-items:center;gap:7px;
  font-size:9.5px;letter-spacing:2.2px;color:var(--gold);margin:4px 2px 0;font-weight:bold;
  border-bottom:none;padding-bottom:0;text-transform:uppercase;
}
.sec-title::before,.ci-section-title::before{content:'';width:5px;height:5px;flex:0 0 5px;background:var(--gold-dk);transform:rotate(45deg);}
.sec-title::after,.ci-section-title::after{
  content:'';flex:1;height:1px;
  background:linear-gradient(90deg,rgba(232,192,96,.5),transparent);
}
.sec-hint,.sell-hint{font-size:13px;color:#8a7f6c;margin:0 2px 2px;line-height:1.45;font-style:italic;}
.sell-hint b{color:var(--gold);font-style:normal;}
.tag{display:inline-block;font-size:8.5px;padding:1px 6px;margin-right:4px;background:#2a3340;color:#93a2b4;border:1px solid #3c4757;}
.tag.g{background:#213524;color:#96d6a4;border-color:#37613f;}
.tag.r{background:#35211f;color:#e8a099;border-color:#6a3630;}
.tag.b{background:#1f2b3a;color:#94bfe0;border-color:#33506b;}
.tag.p{background:#2a2140;color:#bda6ec;border-color:#4a3a75;}

.sell-btn{
  position:relative;flex:0 0 auto;width:52px;height:52px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#f0cc72,#8a6210);
  border:3px solid #f5dc9a;cursor:pointer;touch-action:none;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 2px #17100a,0 3px 8px rgba(0,0,0,.5);
  --p:0deg;
}
.sell-btn:active{transform:scale(.94);}
.sell-btn canvas{width:26px;height:26px;image-rendering:pixelated;}
.sell-btn .ring{
  position:absolute;inset:-6px;border-radius:50%;pointer-events:none;
  background:conic-gradient(#7fe08a var(--p), transparent 0);
  -webkit-mask:radial-gradient(circle, transparent 62%, #000 64%);
  mask:radial-gradient(circle, transparent 62%, #000 64%);
  opacity:0;
}
.sell-btn.holding .ring{opacity:1;}
.sell-btn.holding{box-shadow:0 0 0 2px #17100a,0 0 14px rgba(127,224,138,.5);}
/* llama la atención hacia el botón mientras el sabio espera que le
   vendas las hierbas (ver UI.sellButton) */
.sell-btn.pulse{animation:sellPulse 1.15s ease-in-out infinite;}
@keyframes sellPulse{
  0%,100%{box-shadow:0 0 0 2px #17100a,0 0 0 0 rgba(240,204,114,.6);}
  50%{box-shadow:0 0 0 2px #17100a,0 0 0 10px rgba(240,204,114,0);}
}

@media (min-width:820px){
  .game-title{font-size:76px;}
  .drawer{width:max(320px,20%);}
}
@media (max-height:620px){
  .game-title{font-size:clamp(34px,12vw,52px);}
  .game-sub{font-size:11px;line-height:1.5;}
  .title-rule{margin-top:8px;}
  .doll{width:72px;height:106px;flex:0 0 72px;}
  .slot{width:36px;height:36px;}
  .slot canvas{width:30px;height:30px;}
  .rbtn.attack{width:72px;height:72px;}
  .cine-text{font-size:19px;}
  .rest-clock{font-size:40px;}
}
/* pantallas angostas (móvil vertical de gama chica): el retrato y la
   insignia de nivel se achican un poco para que la montura completa
   quepa sin desbordar ni tapar de más el mapa — las barras siguen
   creciendo con el nivel igual que siempre, solo cambia este tamaño
   fijo de los dos cuadros laterales */
@media (max-width:400px){
  .hud-left{--hud-sq:60px;}
  .hud-mount{padding:4px 5px;gap:4px;}
  .lvl-badge span{font-size:17px;}
  .lvl-badge .lvl-tag{font-size:7px;}
}

/* ---- Barra del aliado (Larry) --------------------------------
   Misma familia visual que la del jefe pero más estrecha y en verde:
   se lee de un vistazo que es "de los nuestros" y no otro enemigo.
   Se coloca bajo la del jefe; si no hay jefe, ocupa su sitio. */
.ally-bar{
  position:absolute;left:50%;transform:translateX(-50%);
  top:112px;width:min(40vw,260px);z-index:6;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  pointer-events:none;
}
.ally-bar.no-boss{top:62px;}
.ally-name{
  font-size:10px;letter-spacing:2px;font-weight:bold;color:#bfe8c4;
  text-shadow:0 1px 0 #000,0 0 6px rgba(110,200,130,.5);
}
.ally-track{
  width:100%;height:9px;background:#12180f;
  border:2px solid #3c5a34;box-shadow:inset 0 0 6px rgba(0,0,0,.8);
  overflow:hidden;
}
.ally-track i{
  display:block;height:100%;width:100%;
  background:linear-gradient(180deg,#8fd08a,#4a8a42 60%,#2f5a2a);
  transition:width .18s linear;
}
.ally-bar.low .ally-track i{background:linear-gradient(180deg,#ffb07a,#c9543a 60%,#7a2a1e);}
.ally-bar.down .ally-track i{background:linear-gradient(180deg,#8a5a5a,#5a2b2b);}
.ally-bar.down .ally-name{color:#ff9a8a;}

/* ============================================================
   MÓVIL: HORIZONTAL Y A PANTALLA COMPLETA
   ============================================================
   El juego se diseñó en vertical, pero en un teléfono la vista
   apaisada da el doble de mundo a los lados y deja el pulgar
   izquierdo libre para el stick y el derecho para el ataque. Aquí
   va lo que hace falta para que eso funcione: el aviso de girar y
   una capa de ajustes para cuando la pantalla es baja y ancha. */

/* ---- aviso de girar el dispositivo ---- */
.rotate-gate{
  position:fixed;inset:0;z-index:60;
  display:flex;align-items:center;justify-content:center;
  padding:24px;text-align:center;
  background:
    radial-gradient(ellipse at 50% 40%,#2a1f14,transparent 70%),
    linear-gradient(180deg,#0b0e12,#07090c);
}
.rotate-gate.hide{display:none;}
.rg-box{display:flex;flex-direction:column;align-items:center;gap:6px;max-width:320px;}
/* el teléfono: un rectángulo con su pantalla, girando un cuarto de
   vuelta una y otra vez. Todo CSS, sin imágenes */
.rg-phone{
  position:relative;width:56px;height:96px;margin-bottom:18px;
  border:3px solid var(--gold);border-radius:8px;
  background:#12100c;
  box-shadow:0 0 0 2px #17100a,0 0 18px rgba(232,192,96,.25);
  animation:rgTurn 2.8s cubic-bezier(.6,.05,.3,1) infinite;
}
.rg-screen{
  position:absolute;inset:6px 5px 12px;
  background:linear-gradient(180deg,#2a3b2a,#141c18);
  border:1px solid #3a2c1e;
}
.rg-home{
  position:absolute;left:50%;bottom:3px;width:16px;height:3px;margin-left:-8px;
  background:var(--gold-dk);border-radius:2px;
}
@keyframes rgTurn{
  0%,22%{transform:rotate(0deg);}
  45%,78%{transform:rotate(-90deg);}
  100%{transform:rotate(-90deg);}
}
.rg-title{
  margin:0;font-size:17px;letter-spacing:3px;color:var(--gold);
  text-shadow:0 2px 0 #000;
}
.rg-sub{margin:2px 0 0;font-size:13px;color:var(--ink-dim);}
.rg-hint{margin:12px 0 0;font-size:10.5px;line-height:1.6;color:#7d7263;}

/* ---- el teléfono ya girado ----
   Todo el HUD se encoge y se pega a los bordes: los tamaños pensados
   para pantalla grande se comían tres cuartas partes de un móvil.

   OJO CON LA CONDICIÓN. Antes era `max-height:560px`, y en teléfonos
   cuyo alto en horizontal pasa de esa cifra — que son muchos — no
   entraba y se veía todo gigante. Lo que de verdad define el caso no
   es cuántos píxeles mide la pantalla, es QUE SE JUEGA CON EL DEDO: en
   táctil el juego ya obliga a ponerse en horizontal (ver el aviso de
   girar), así que cualquier táctil apaisado entra aquí. La segunda
   rama cubre el escritorio con la ventana muy baja. */
@media (pointer:coarse) and (orientation:landscape),
       (orientation:landscape) and (max-height:600px){
  /* ---- BARRAS DE ESTADO ----
     El retrato y las tres barras ocupaban casi un tercio del alto útil.
     Se reduce el cuadrado maestro y, con él, retrato, insignia y barras
     a la vez (--hud-sq lo gobierna todo). */
  .hud-left{--hud-sq:46px;gap:5px;}
  .hud-top{top:calc(3px + var(--safe-t));left:5px;right:5px;}
  /* ---- BARRAS DE VIDA / ESTAMINA / EXPERIENCIA ----
     Son información de fondo: se miran de reojo. A tamaño de escritorio
     se comían la esquina entera de un teléfono. */
  .bars-frame{gap:2px;}
  .sbar{padding:1px 3px;gap:3px;}
  .ibox{width:11px;height:11px;flex:0 0 11px;border-width:1px;}
  .ibox canvas,.ibox .bic{width:8px;height:8px;}
  .sbar .val,.sbar b,.sbar span{font-size:7.5px;}
  .track{height:11px;width:96px;border-width:1px;border-radius:6px;}
  .track i{border-radius:5px;}
  .bval{font-size:7.5px;}
  .lvl-badge span{font-size:13px;}

  /* ---- BARRA DE JEFE ----
     Ocupaba 360 px y todo el ancho útil de la pantalla. */
  .boss-bar{top:calc(40px + var(--safe-t));width:min(62vw,240px);padding:3px 10px 5px;gap:2px;}
  .boss-name{font-size:9px;letter-spacing:2px;}
  .boss-track{height:8px;border-width:1px;}

  /* ---- AVISOS EMERGENTES ----
     Los `big` — los rojos de "algo te espera al otro lado" y compañía —
     iban a 19 px con 13 de relleno: tapaban media pantalla en apaisado.
     Se quedan destacados, pero sin gritar. */
  .toasts{top:calc(44px + var(--safe-t));gap:3px;}
  .toasts.below-boss{top:calc(72px + var(--safe-t));}
  .toast{padding:4px 9px;font-size:10px;max-width:80%;}
  .toast.big{font-size:12.5px;padding:6px 13px;max-width:76%;letter-spacing:.2px;}
  .banner{font-size:24px;letter-spacing:2px;bottom:14%;}

  /* ---- TARJETA DE OBJETO ---- */
  .idesc-ic{flex:0 0 34px;height:34px;}
  .idesc-ic canvas{width:29px;height:29px;}
  .idesc-name{font-size:11.5px;}
  .idesc-sub{font-size:9px;}
  .idesc-body{font-size:9.5px;line-height:1.4;}
  .idesc-v2 .idesc-ic{width:44px;height:44px;margin-bottom:3px;}
  .idesc-v2 .idesc-ic canvas{width:36px;height:36px;}
  .idesc-v2 .idesc-name{font-size:12.5px;}
  .idesc-v2 .idesc-type{font-size:9px;}
  .idesc-setline{font-size:9.5px;}
  .idesc-divider{margin:6px auto;}
  .idesc-sec-title{font-size:8.5px;margin-bottom:3px;}
  .idesc-stat-line{font-size:9.5px;line-height:1.5;}
  .idesc-bonus-line{font-size:9.5px;line-height:1.45;}
  .idesc-lore{font-size:9.5px;line-height:1.45;}
  .idesc-req{font-size:9.5px;margin-top:5px;}
  .idesc-act-v2{margin-top:7px;min-width:96px;padding:7px 16px;font-size:11px;}

  /* ---- CUADRO DE MISIÓN ----
     Está pensado para leerse de un vistazo, no para presidir la
     pantalla: en apaisado se recoge a una esquina y baja de cuerpo. */
  .quest{
    top:calc(40px + var(--safe-t));right:6px;
    padding:6px 10px 7px;max-width:44%;
    font-size:11.5px;line-height:1.3;
  }
  .quest.lowered{top:calc(58px + var(--safe-t));}
  .quest-title{font-size:8px;letter-spacing:1.8px;margin-bottom:3px;}
  .quest-line{gap:5px;}
  .quest-dot{width:5px;height:5px;flex:0 0 5px;}
  .quest-count{font-size:9.5px;}
  .quest-subs{gap:2px;margin-top:3px;}
  .quest-sub{font-size:10px;gap:5px;}

  .stick-zone{bottom:6px;width:44%;height:78%;}
  .stick{width:100px;height:100px;margin:-50px 0 0 -50px;}
  .knob{width:44px;height:44px;margin:-22px 0 0 -22px;}

  .action-cluster{right:8px;bottom:calc(8px + var(--safe-b));width:176px;height:152px;}
  .rbtn.attack{right:28px;width:76px;height:76px;}
  #action-ic.rbic{width:36px;height:36px;}
  .rbic{width:24px;height:24px;}
  .rbtn.ability{width:46px;height:46px;}
  .rbtn.ability.ab0{right:5px;bottom:86px;}
  .rbtn.ability.ab1{right:74px;bottom:92px;}
  .rbtn.ability.ab2{right:124px;bottom:44px;}
  .action-label,.ability-label{bottom:70px;width:70px;font-size:9.5px;}

  /* El botón del mapa vive abajo a la izquierda, que en táctil es
     justo donde cae el pulgar del stick: se pulsaba sin querer cada dos
     por tres. Arriba en el centro no estorba a nadie — las barras
     quedan a la izquierda y el reloj a la derecha. */
  /* Mapa y mochila, juntos arriba en el centro. La mochila estaba a
     media altura del borde derecho, justo encima de una de las
     habilidades: se pulsaba una por otra. Arriba no estorban a ningún
     pulgar — las barras quedan a la izquierda y el reloj a la derecha. */
  .bag-btn{
    top:calc(3px + var(--safe-t));bottom:auto;
    width:36px;height:36px;
  }
  .map-btn{left:calc(50% - 21px);right:auto;transform:translateX(-50%);}
  #btn-bag{left:calc(50% + 21px);right:auto;transform:translateX(-50%);}
  .map-btn:active,#btn-bag:active{transform:translateX(-50%) scale(.94);}

  .hotbar{bottom:calc(3px + var(--safe-b));gap:3px;padding:2px;}
  .hslot{width:28px;height:28px;}
  .hslot canvas{width:22px;height:22px;}
  .hlv{font-size:7px;}
  .hqty{font-size:7.5px;}

  /* el cuadro de diálogo, más bajo y más compacto: en apaisado hay
     ancho de sobra y lo que falta es alto */
  /* ---- CUADRO DE DIÁLOGO ----
     A 16 px y 640 de ancho (lo bueno en pantalla grande) se comía un
     tercio del alto de un teléfono apaisado. Aquí baja a 13 px y se
     ciñe al texto: sigue leyendose bien a un palmo de la cara, que es
     la distancia a la que se juega en móvil. */
  .panel.bottom-box{bottom:calc(38px + var(--safe-b));padding:0 6px;}
  .dlg-frame{width:min(600px,100%);padding:7px 10px;gap:8px;}
  .dlg-portrait{flex:0 0 36px;width:36px;height:36px;}
  .dlg-portrait canvas{width:30px;height:30px;}
  .dlg-text{font-size:13px;line-height:1.45;min-height:30px;}
  .dlg-speaker{font-size:9px;letter-spacing:1.8px;margin-bottom:3px;}
  .dlg-arrow{font-size:9px;right:8px;bottom:4px;}

  /* los paneles emergentes no pueden ser más altos que la pantalla */
  /* INVENTARIO. En vertical el cajón apila muñeco, estadísticas y
     rejilla, y se recorre con el dedo. En apaisado no cabe nada de eso
     a lo alto, pero sobra ancho: se ensancha el cajón y se ponen el
     muñeco y la rejilla uno al lado del otro. */
  .drawer{width:min(620px,86%);}
  /* Dos columnas: a la izquierda el muñeco con sus estadísticas debajo,
     a la derecha las pestañas y la rejilla. Se coloca con áreas de
     rejilla y NO se toca el HTML — los cuatro bloques siguen siendo
     hermanos, solo cambia dónde cae cada uno. Lo único que se recorre
     es la rejilla de objetos, que es lo único que puede crecer. */
  .drawer-body{
    display:grid;
    /* El personaje se lleva más sitio. Con 172 px la columna de la
       derecha era 2,4 veces la izquierda: el muñeco y sus estadísticas
       quedaban apretados contra el borde mientras la rejilla de objetos
       nadaba en hueco vacío. Con 236 la proporción baja a 1,5 y las
       ranuras de equipo vuelven a un tamaño que se toca con el dedo. */
    grid-template-columns:236px minmax(0,1fr);
    grid-template-rows:auto minmax(0,1fr);
    grid-template-areas:
      "doll  tabs"
      "doll  grid"
      "stats grid";
    gap:8px;overflow:hidden;padding-top:8px;
  }
  /* La columna izquierda tiene que CABER en su hueco. Con las ranuras
     a tamaño normal el muñeco medía 268 px y solo disponía de 244: se
     metía 24 px por debajo y se montaba encima del cuadro de
     estadísticas — los dos amontonados, que es lo que se veía
     colapsado. Se encogen ranuras y muñeco hasta que entra, y se le
     pone `overflow` por si algún día crece otra vez. */
  .doll-area{
    grid-area:doll;align-self:stretch;justify-content:center;
    padding:6px 5px;gap:4px;overflow:hidden;
  }
  .doll-area .slot{width:34px;height:34px;}
  .doll-area .slot canvas{width:28px;height:28px;}
  .doll{width:74px;height:108px;flex:0 0 74px;}
  /* ACOTADO AL CAJÓN. Sin el `.drawer-body` delante, este tope de alto
     también caía sobre los ATRIBUTOS de la ficha de personaje — que es
     otro .stats-box — y dejaba la mitad de las cifras detrás de una
     barra de desplazamiento. */
  .drawer-body .stats-box{
    grid-area:stats;align-self:end;
    /* Cada píxel que se lleva este cuadro se lo quita al muñeco: a 118
       la fila de abajo de las ranuras de equipo quedaba cortada por el
       borde. 86 es lo que deja el marco del personaje completo. */
    overflow-y:auto;overflow-x:hidden;max-height:86px;
    padding:6px 8px;font-size:10px;gap:0 8px;
    /* `minmax(0,1fr)` y no `1fr`: con `1fr` las columnas se ensanchan
       para que quepa la etiqueta más larga ("Reduc. enfriamiento") y el
       cuadro se desbordaba a lo ancho con su propia barra horizontal.
       Así se reparten a medias y el nombre largo se recorta. */
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  }
  .drawer-body .stats-box .stat{min-width:0;}
  .drawer-body .stats-box .stat span{
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1;
  }
  /* Pestañas más bajas: son un selector de dos, no una cabecera — a
     33 px de alto se comían el sitio de los objetos. */
  /* ATRIBUTOS a tres columnas: a dos, las once filas obligaban a
     desplazarse dentro de la ficha para ver la mitad de las cifras. A
     tres, cada celda es más estrecha y la lista cabe entera. */
  .ci-stats{grid-template-columns:repeat(3,1fr);gap:0 8px;font-size:9.5px;padding:5px 7px;}
  .ci-stats .stat.stat-long{grid-column:1 / -1;}
  .ci-spells{gap:4px;}
  .ci-spell{padding:5px;gap:6px;}
  .ci-spell canvas{width:26px;height:26px;}
  .ci-spell-name{font-size:11px;}
  .ci-spell-desc{font-size:9.5px;line-height:1.35;}
  /* La cabecera de la ficha (muñeco + acceso a personalización) medía
     115 px de los 301 disponibles, y entre eso y los atributos la ficha
     se salía por 63 px: había que desplazarse para ver las habilidades.
     Encogida, todo entra de una vez. */
  .ci-head{gap:6px;}
  .ci-head-half{padding:5px 7px;}
  .ci-doll{width:38px;height:58px;}
  /* filas de atributo más bajas: el icono con su marco es lo que las
     engorda, y a esta escala se lee igual de bien pequeño */
  .ci-stats .stat{padding:1px 0;gap:4px;}
  .ci-stats .stat canvas{width:11px;height:11px;flex:0 0 11px;padding:1px;}
  .ci-name{font-size:13px;}
  .ci-class{font-size:10px;}
  .ci-avatar{width:38px;height:38px;padding:3px;}
  .ci-custom-label{font-size:8px;}
  .ci-section-title{margin:6px 0 4px;font-size:9px;}

  .inv-tabs{grid-area:tabs;gap:4px;}
  .inv-tabs .tab{padding:4px 5px;font-size:10px;letter-spacing:.3px;gap:4px;}
  .inv-tabs .tab canvas{width:11px;height:11px;}
  .inv-grid{
    grid-area:grid;align-content:start;
    overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;
    grid-template-columns:repeat(auto-fill,minmax(54px,1fr));
    padding-bottom:4px;
  }
  /* el acceso rápido se esconde con el cajón abierto: en apaisado se
     le metía por debajo y se tocaban entre ellos */
  .panel.drawer-wrap:not(.hide) ~ .hotbar,
  body:has(.panel.drawer-wrap:not(.hide)) .hotbar{display:none;}
  .popup-win{max-height:96%;width:min(580px,90%);}
  .popup-win.wide{max-height:96%;}
  .map-image{max-height:calc(96dvh - 52px);}
  /* El cuadro se ajusta a la ilustración en vez de estirarse al 90 %
     de la pantalla: así no quedan dos franjas vacías a los lados del
     mapa. El ancho lo manda la imagen, que ya está limitada por alto. */
  #panel-map .popup-win{width:auto;max-width:96%;}
  /* Las listas de tienda en DOS columnas: a lo alto no cabe casi nada,
     pero a lo ancho sobra. Y las filas, más bajas — la descripción a
     dos líneas como mucho, que para elegir qué vender basta. */
  /* `auto-fit`, no `auto-fill`: con auto-fill la rejilla mantiene las
     dos columnas aunque solo haya un artículo, y ese artículo se queda
     pegado a la izquierda con medio panel vacío al lado — que es lo que
     pasaba al entregarle las hierbas al sabio. Con auto-fit la columna
     sobrante se colapsa y lo que hay ocupa el ancho entero. */
  /* UNA LISTA, HACIA ABAJO. Estuvo un rato a dos columnas para
     aprovechar el ancho, pero con el Comerciante, la Alquimista o el
     Herrero — que tienen mucho género — se leía fatal: los artículos
     iban hacia la derecha en vez de hacia abajo, con huecos desiguales
     donde uno era más alto que su vecino. Una tienda se lee en columna.
     Lo que se aprovecha del apaisado es el ANCHO de cada fila, no meter
     dos por renglón. */
  .shop-body{
    display:flex;flex-direction:column;
    gap:5px;overflow-x:hidden;
  }
  .shop-body > .shop-row{width:100%;min-width:0;}
  /* y el cuadro en sí, menos ancho: 90 % de la pantalla era casi todo */
  #panel-shop .popup-win{width:min(520px,78%);}
  /* los textos sueltos de la lista ocupan la fila entera, no una celda */
  .shop-body > .sell-hint,
  .shop-body > .empty-note,
  .shop-body > .sec-title,
  .shop-body > .shop-sep,
  .shop-body > .sub-tabs{width:100%;}
  .shop-row{padding:6px;gap:7px;}
  .shop-row .ic{width:34px;height:34px;flex:0 0 34px;}
  .shop-row .ic canvas{width:28px;height:28px;}
  .shop-row .nm{font-size:11.5px;}
  .shop-row .desc{
    font-size:9.5px;line-height:1.35;margin-top:1px;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }
  .popup-win.narrow{width:min(330px,66%);}
  .pause-menu{gap:5px;}
  .pause-menu .big-btn{padding:6px 12px;font-size:11.5px;letter-spacing:1px;}
  .pause-sep{margin:3px 0 0;}
  #panel-pause .popup-body{gap:6px;padding-top:6px;}
  #panel-pause .settings{gap:4px;}
  #panel-pause .slider-row{font-size:10px;}
  /* el recordatorio de teclas no pinta nada en un móvil */
  #panel-pause .hint-small{display:none;}
  .dev-links{margin-top:8px;}
  .dev-links .big-btn.donate{padding:6px 8px;font-size:9.5px;}
  .ig-btn{flex:0 0 34px;}
  .ig-glyph{width:16px;height:16px;border-width:2px;}
  .scroll-win{max-height:94%;}
  .panel.center{gap:12px;}
  .game-title{font-size:clamp(32px,9vh,48px);}
  .game-sub{font-size:11px;margin-top:8px;}
  #panel-start .big-btn{padding:11px 16px;font-size:13px;}
  .hint-small{font-size:9px;}
}