/* ═══════════════════════════════════════════════════════════
   SoulsGuides — MURO · Capa CATÁLOGO
   Rejilla de vitrinas (.wall/.plate) + ficha a pantalla completa
   (.ficha) reutilizable para armas, armaduras, objetos y NPCs.
   Requiere muro-base.css. El material se muestra como ICONO en
   object-fit:contain (nunca se recorta).
   ═══════════════════════════════════════════════════════════ */

/* ═══════════ EL MURO DE VITRINAS ═══════════ */
.wall-wrap{width:min(1420px,95vw);margin:0 auto;padding:38px 0 100px}
/* Columnas fluidas: nunca por debajo de ~300px, que es lo que necesita el .info
   superpuesto para no tapar el icono. Con el ancho máximo (1420px) siguen
   saliendo 4 columnas; en anchos intermedios caen a 3 o 2 en vez de encoger. */
.wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.plate{position:relative;cursor:pointer;overflow:hidden;display:flex;flex-direction:column;border:1px solid rgba(var(--muro-text-rgb),.14);
  background:radial-gradient(ellipse at 50% 38%,var(--bg3),var(--bg2) 78%);
  transition:transform .5s var(--muro-ease),border-color .35s,box-shadow .5s}
/* Animación de entrada: solo mientras la vitrina lleva .is-in (se retira al terminar).
   Si viviera en la regla base de .plate, el pulso de «obtenida» —que reemplaza la
   propiedad animation— la reiniciaría al quitarse, y la vitrina «se recargaría». */
.plate.is-in{animation:muro-up .55s var(--muro-ease) both}
@keyframes muro-up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.plate::after{content:'';position:absolute;inset:5px;border:1px solid rgba(var(--amber-rgb),.14);pointer-events:none;z-index:3;transition:border-color .35s}
/* Dos zonas EN FLUJO: icono arriba (relación fija) + datos abajo con altura
   reservada. Antes el .info iba en position:absolute SOBRE el icono y crecía
   con el texto, tapándolo en cuanto el nombre o el uso ocupaban varias líneas
   (y como el alto del texto -en em- no escala igual que el padding del icono
   -en %-, siempre había un ancho de columna donde reventaba). En flujo el icono
   no se solapa jamás; reservando líneas fijas para título y uso, todas las
   placas empiezan y terminan el texto a la misma altura. */
.plate img{position:relative;inset:auto;flex:0 0 auto;width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;padding:9% 12% 5%;
  filter:brightness(.88) drop-shadow(0 14px 22px rgba(var(--bg-deep-rgb),.9));transition:filter .5s,transform .6s var(--muro-ease)}
.plate .veil{display:none}
.plate .info{position:relative;left:auto;right:auto;bottom:auto;z-index:2;flex:1 1 auto;display:flex;flex-direction:column;padding:0 17px 16px}
.plate h3{font-family:var(--ff-muro);font-size:17px;font-weight:700;color:var(--muro-white);line-height:1.28;text-shadow:0 2px 12px rgba(var(--bg-deep-rgb),.9);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;min-height:calc(1.28em * 2)}
.plate .quick{display:flex;gap:26px;margin-top:10px}
.plate .quick>*{flex:1 1 0;min-width:0}
.plate .quick b{font-size:13.5px;font-weight:700;color:var(--muro-text-l);line-height:1.4;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;min-height:calc(1.4em * 2)}
.plate .quick span{display:block;font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muro-text);margin-bottom:4px}
.plate:hover,.plate:focus-visible{transform:translateY(-6px);border-color:rgba(var(--crim-rgb),.55);
  box-shadow:0 26px 60px -18px rgba(var(--bg-deep-rgb),.95),0 0 34px -8px rgba(var(--crim-rgb),.4);outline:none}
.plate:hover::after{border-color:rgba(var(--amber-rgb),.35)}
.plate:hover img{filter:brightness(1.04) drop-shadow(0 18px 30px rgba(var(--bg-deep-rgb),.95));transform:scale(1.07)}
.plate .ph{position:relative;inset:auto;aspect-ratio:4/3;flex:0 0 auto;display:grid;place-items:center;color:rgba(var(--muro-text-rgb),.35)}
.wall-empty{grid-column:1/-1;text-align:center;padding:80px 0;font-size:13px;letter-spacing:.18em;text-transform:uppercase}

/* ══════════ Variante «captura» del muro (cfg.wallClass:'wall-shot') ══════════
   Para items cuya imagen es una escena/captura 16:9 (jefes, zonas…) en lugar de
   un icono: la placa deja de ser un cuadrado con la imagen de fondo y el texto
   superpuesto; pasa a ser una tarjeta con la captura a sangre arriba (cover) y
   los datos debajo, en flujo normal — así el texto nunca tapa la imagen ni la
   desborda cuando la ventana es estrecha. */
.wall-shot .plate{aspect-ratio:auto;display:flex;flex-direction:column}
.wall-shot .plate img{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:16/9;
  object-fit:cover;padding:0;flex:0 0 auto}
.wall-shot .plate .veil{display:none}
.wall-shot .plate .info{position:relative;left:auto;right:auto;bottom:auto;flex:1 1 auto;padding:14px 16px 16px}
.wall-shot .plate .quick{margin-top:12px}

/* ══════════ Variante «sin imagen» (placas de texto) ══════════
   Cuando el item no tiene retrato (p.ej. jefes sin webp), la placa sería una
   tarjeta con el título pegado al marco (el .info base tiene padding-top:0 y
   el icono que lo separaba no existe). Aquí convertimos la placa en una ficha
   de texto con aire generoso, contenido centrado en vertical (así el estirado
   de la fila por nombres de 2 líneas no deja un hueco feo abajo) y un filete
   de acento sobre el título que lo ancla lejos del borde y le da carácter. */
.plate.no-visual{background:radial-gradient(ellipse at 50% 30%,var(--bg3),var(--bg2) 80%)}
.plate.no-visual .info{padding:30px 22px 22px;justify-content:center;gap:15px}
.plate.no-visual h3{min-height:0;-webkit-line-clamp:3;font-size:18px;line-height:1.22;letter-spacing:.01em}
.plate.no-visual h3::before{content:'';display:block;width:38px;height:2px;margin-bottom:13px;
  background:linear-gradient(90deg,var(--crim),rgba(var(--crim-rgb),0));box-shadow:0 0 10px rgba(var(--crim-rgb),.5)}
.plate.no-visual .quick{margin-top:2px;gap:22px}
.plate.no-visual .muro-inspect{margin-top:4px}
.plate.no-visual:hover h3::before{width:54px;background:linear-gradient(90deg,var(--crim-l),rgba(var(--crim-rgb),0))}

/* Contenedor del inventario de comerciantes dentro de la ficha Muro (tiendas).
   Las filas .er-shop-item y el banner ya viven en eldenring.css; aquí solo se
   define la rejilla de una columna con separación, que el contenedor legacy no
   declaraba. grid-column:1/-1 del banner/empty ocupa así la fila completa. */
.er-shop-items-grid{display:grid;grid-template-columns:1fr;gap:10px}
.wall-shot .plate:hover img{transform:none}

/* ══════════ Vídeo-preview en hover (módulo muro-hover-video.js) ══════════
   Overlay que reproduce el vídeo de YouTube de la ficha al pasar el ratón,
   por encima de la imagen y por debajo del marco/info (z-index:1). Solo en
   puntero fino (el módulo ya lo filtra). En wall-shot cubre la banda 16:9
   superior exacta; en el muro estándar (.cover) cubre la placa sin deformar. */
.plate .muro-hv{position:absolute;z-index:1;overflow:hidden;background:#000;
  opacity:0;transition:opacity .4s ease;pointer-events:none}
.plate .muro-hv.playing{opacity:1}
.plate .muro-hv iframe{position:absolute;border:0;pointer-events:none}
.wall-shot .plate .muro-hv{top:0;left:0;width:100%;aspect-ratio:16/9}
.wall-shot .plate .muro-hv iframe{inset:0;width:100%;height:100%}
.plate .muro-hv.cover{inset:0}
.plate .muro-hv.cover iframe{top:50%;left:50%;height:100%;width:auto;aspect-ratio:16/9;min-width:100%;transform:translate(-50%,-50%)}

/* ══════════ Variante «descripción» (cfg.wallClass:'wall-desc') ══════════
   Para catálogos cuyo primer dato del .quick es una FRASE (uso, efecto…) y no
   un número: la descripción pasa a ocupar TODA la línea, con letra menor y
   varias líneas, en vez de encajarse en media columna donde se cortaba a los
   pocos caracteres. La categoría queda debajo como meta compacta. Se mantiene
   la altura reservada (líneas fijas) para que todas las placas sigan igualadas. */
.wall-desc .plate .quick{display:block;margin-top:11px}
.wall-desc .plate .quick>div+div{margin-top:11px}
.wall-desc .plate .quick>div:first-child b{font-size:12px;line-height:1.5;-webkit-line-clamp:2;min-height:calc(1.5em * 2)}
.wall-desc .plate .quick>div:last-child b{-webkit-line-clamp:1;min-height:0}

/* ── Botón «Ver detalles» dentro de la vitrina ── */
.plate .muro-inspect{margin-top:12px;display:inline-flex;align-items:center;gap:6px;vertical-align:top;
  font-family:var(--ff-muro);font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muro-white);background:rgba(var(--crim-rgb),.16);border:1px solid rgba(var(--crim-rgb),.45);
  padding:8px 13px;cursor:pointer;transition:all .3s}
.plate .muro-inspect:hover{background:var(--crim);border-color:var(--crim);box-shadow:0 0 18px -4px rgba(var(--crim-rgb),.6)}
.plate .muro-inspect svg{width:12px;height:12px}

/* ── Botón «Compartir» (copia el enlace directo #slug del item) ── */
.plate .muro-share{margin-top:12px;margin-left:8px;width:31px;height:31px;vertical-align:top;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--muro-text-l);
  background:rgba(var(--bg3-rgb),.5);border:1px solid rgba(var(--muro-text-rgb),.28);transition:all .3s}
.plate .muro-share:hover{color:var(--muro-white);border-color:rgba(var(--amber-rgb),.65);background:rgba(var(--amber-rgb),.14);
  box-shadow:0 0 16px -4px rgba(var(--amber-rgb),.5)}
.plate .muro-share svg{width:13px;height:13px}
.muro-share .ic-check,.ficha-share .ic-check{display:none}
.muro-share.ok,.ficha-share.ok{border-color:rgba(95,201,138,.65);color:#7ddd9f;background:rgba(46,204,113,.12)}
.muro-share.ok .ic-share,.ficha-share.ok .ic-share{display:none}
.muro-share.ok .ic-check,.ficha-share.ok .ic-check{display:block}

/* ── Toast «copiado al portapapeles» ── */
.muro-toast{position:fixed;left:50%;bottom:34px;z-index:200;transform:translate(-50%,16px);opacity:0;
  display:flex;align-items:center;gap:10px;pointer-events:none;
  font-family:var(--ff-muro);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muro-white);background:rgba(var(--bg2-rgb),.96);border:1px solid rgba(95,201,138,.5);
  padding:13px 20px;box-shadow:0 14px 40px -8px rgba(var(--bg-deep-rgb),.9),0 0 24px -6px rgba(46,204,113,.35);
  transition:opacity .3s,transform .35s var(--muro-ease)}
.muro-toast.show{opacity:1;transform:translate(-50%,0)}
.muro-toast svg{color:#7ddd9f;flex:0 0 auto}

/* ── Estado «obtenida» (progreso) ── */
.plate.is-obtained{border-color:rgba(95,201,138,.5)}
.plate.is-obtained::after{border-color:rgba(95,201,138,.32)}
.plate.is-obtained img{filter:brightness(.58) saturate(.72) drop-shadow(0 14px 22px rgba(var(--bg-deep-rgb),.9))}
.plate .obt-mark{position:absolute;top:11px;right:11px;z-index:4;width:26px;height:26px;display:grid;place-items:center;
  background:linear-gradient(135deg,#2ecc71,#27ae60);border-radius:50%;opacity:0;transform:scale(.4);
  transition:opacity .3s,transform .3s var(--muro-ease);box-shadow:0 2px 10px rgba(46,204,113,.5)}
.plate.is-obtained .obt-mark{opacity:1;transform:scale(1)}
.plate .obt-mark svg{width:15px;height:15px;stroke:#fff}
.plate.lop-toggle-pulse{animation:muro-pulse .5s var(--muro-ease)}
@keyframes muro-pulse{50%{transform:translateY(-6px) scale(1.03)}}

/* ═══════════ FILTRO EN BARRA DE MANDO ═══════════ */
.cmd-filter{font-family:var(--ff-muro);font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muro-text-l);background:rgba(var(--bg3-rgb),.5);border:1px solid rgba(var(--crim-rgb),.2);
  padding:10px 32px 10px 13px;cursor:pointer;outline:none;-webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23c94a4a' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;transition:border-color .3s,box-shadow .3s}
.cmd-filter:focus{border-color:rgba(var(--crim-rgb),.55);box-shadow:0 0 22px rgba(var(--crim-rgb),.14)}
.cmd-filter option{background:var(--bg2);color:var(--muro-text-l)}

/* ═══════════ PANELES INFORMATIVOS (sistema + pool) ═══════════ */
.muro-panels{display:grid;gap:14px;margin-bottom:32px}
.muro-panel{border:1px solid rgba(var(--crim-rgb),.18);background:rgba(var(--bg2-rgb),.6)}
.muro-panel-tog{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;
  background:transparent;border:0;color:var(--muro-text-l);font-family:var(--ff-muro);font-size:12px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;padding:16px 20px;transition:color .3s;text-align:left}
.muro-panel-tog:hover,.muro-panel.open .muro-panel-tog{color:var(--muro-white)}
.muro-panel-tog svg{flex:0 0 auto;color:var(--crim);transition:transform .35s}
.muro-panel.open .muro-panel-tog svg{transform:rotate(180deg)}
.muro-panel-body{display:none;padding:0 20px 20px}
.muro-panel.open .muro-panel-body{display:block}
.muro-panel-in h5{font-family:var(--ff-muro);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--amber-l);margin:16px 0 6px}
.muro-panel-in p{font-size:13px;line-height:1.75;color:var(--muro-text-l);margin-bottom:8px;max-width:78ch}
/* Info del sistema en columnas fluidas para aprovechar el ancho del panel */
#sysInfoBody{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:0 36px;align-items:start}
.muro-panel-sec{min-width:0}
.muro-panel-sec h5{margin-top:14px}
.muro-panel-sec p{max-width:none}
/* Info del sistema en columnas fluidas para aprovechar el ancho del panel */
#sysInfoBody{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:0 36px;align-items:start}
.muro-panel-sec{min-width:0}
.muro-panel-sec h5{margin-top:14px}
.muro-panel-sec p{max-width:none}
.muro-panel-in strong{color:var(--muro-white)}
.muro-pool-controls{display:flex;flex-wrap:wrap;gap:12px;margin:16px 0 18px}
.muro-pool-controls .fgrp{display:flex;flex-direction:column;gap:5px}
.muro-pool-controls label{font-size:8.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muro-text)}
.muro-pool-table{width:100%;border-collapse:collapse;font-size:12.5px}
.muro-pool-table th{text-align:left;font-family:var(--ff-muro);font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--amber-l);padding:9px 12px;border-bottom:1px solid rgba(var(--crim-rgb),.25)}
.muro-pool-table td{padding:9px 12px;border-bottom:1px solid rgba(var(--muro-text-rgb),.1);color:var(--muro-text-l)}
.muro-pool-stat-name{font-weight:600;color:var(--muro-white)}
.muro-pool-global,.muro-pool-nd{color:var(--muro-text)}
.muro-pool-empty,.muro-pool-note{font-size:12.5px;color:var(--muro-text);padding:10px 0;line-height:1.7}

/* ═══════════ PANEL DE PROGRESO (portado de khazan.css, tema Muro) ═══════════ */
body.muro .lop-progress-panel{position:fixed;top:50%;right:0;transform:translateY(-50%);z-index:90;width:90px;padding:20px 0;
  background:rgba(var(--bg-rgb),.97);border:1px solid rgba(var(--crim-rgb),.15);border-right:none;border-radius:14px 0 0 14px;
  /* backdrop-filter:blur eliminado — elemento fixed que coexiste con modales animados; el blur dejaba capa GPU corrupta. Compensado con fondo casi opaco. */
  display:flex;flex-direction:column;align-items:center;gap:14px;box-shadow:-4px 0 20px rgba(0,0,0,.35)}
body.muro .lop-progress-mini{display:flex;flex-direction:column;align-items:center;gap:4px}
body.muro .lop-progress-mini-ring{width:54px;height:54px;position:relative}
body.muro .lop-progress-mini-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
body.muro .lop-progress-mini-ring .ring-bg{fill:none;stroke:rgba(255,255,255,.06);stroke-width:3.5}
body.muro .lop-progress-mini-ring .ring-fill{fill:none;stroke:var(--amber);stroke-width:3.5;stroke-linecap:round;transition:stroke-dashoffset .5s var(--muro-ease);filter:drop-shadow(0 0 4px rgba(var(--amber-rgb),.4))}
body.muro .lop-progress-mini-pct{font-size:13px;font-weight:700;color:var(--amber);letter-spacing:.04em}
body.muro .lop-progress-expanded{width:100%;opacity:0;max-height:0;overflow:hidden;padding:0 14px;transition:opacity .25s,max-height .35s}
body.muro .lop-progress-panel:hover,body.muro .lop-progress-panel.lop-progress-panel--drawer-open{width:260px;padding:22px 0;transition:width .3s var(--muro-ease),padding .3s}
body.muro .lop-progress-panel:hover .lop-progress-expanded,body.muro .lop-progress-panel.lop-progress-panel--drawer-open .lop-progress-expanded{opacity:1;max-height:500px}
body.muro .lop-progress-header{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:8px;width:100%}
body.muro .lop-progress-title{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--amber);white-space:nowrap;font-family:var(--ff-muro)}
body.muro .lop-progress-title svg{flex-shrink:0;stroke:var(--amber);width:14px;height:14px}
body.muro .lop-progress-count{font-size:12px;color:var(--muro-text-l);white-space:nowrap}
body.muro .lop-progress-count em{font-style:normal;color:var(--amber);font-weight:600}
body.muro .lop-progress-bar-wrap{width:100%;height:8px;background:rgba(255,255,255,.06);border-radius:4px;overflow:hidden}
body.muro .lop-progress-bar-wrap--sm{height:6px;border-radius:3px}
body.muro .lop-progress-bar{height:100%;background:linear-gradient(90deg,var(--crim-d),var(--crim),var(--amber));border-radius:inherit;transition:width .5s var(--muro-ease)}
body.muro .lop-progress-categories{display:flex;flex-direction:column;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid rgba(var(--crim-rgb),.12);width:100%}
body.muro .lop-progress-cat-header{display:flex;align-items:baseline;justify-content:space-between;gap:6px;margin-bottom:4px}
body.muro .lop-progress-cat-name{font-size:11px;font-weight:600;color:var(--muro-text-l);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.muro .lop-progress-cat-count{font-size:11px;color:var(--muro-text);white-space:nowrap}
/* Móvil: el rail lateral pasa a cajón inferior. Imprescindible aquí: las reglas
   body.muro de arriba ganan en especificidad a los @media de cada juego, y sin
   este bloque el panel quedaba centrado a pantalla completa tapando el muro. */
@media (max-width:768px){
  body.muro .lop-progress-panel{top:auto;bottom:0;left:0;right:0;transform:none;width:100%;
    border-radius:12px 12px 0 0;border:1px solid rgba(var(--crim-rgb),.15);border-bottom:none;
    flex-direction:row;align-items:center;padding:10px 16px;padding-bottom:max(10px,env(safe-area-inset-bottom));gap:12px}
  body.muro .lop-progress-panel:hover,body.muro .lop-progress-panel.lop-progress-panel--drawer-open{
    width:100%;padding:12px 16px;padding-bottom:max(12px,env(safe-area-inset-bottom));flex-wrap:wrap;align-items:flex-start}
  body.muro .lop-progress-panel:hover .lop-progress-expanded{opacity:0;max-height:0}
  body.muro .lop-progress-panel.lop-progress-panel--drawer-open .lop-progress-expanded{
    flex:1 1 100%;width:100%;opacity:1;max-height:min(42vh,320px);overflow-y:auto;padding-top:8px}
  body.muro .lop-progress-mini{flex-direction:row;gap:8px;align-items:center}
  body.muro .lop-progress-mini-ring{width:38px;height:38px}
}

/* ═══════════ FICHA FULLSCREEN — vitrina lateral, datos a la derecha ═══════════ */
.ficha{position:fixed;inset:0;z-index:100;display:grid;grid-template-columns:minmax(300px,42%) 1fr;
  background:var(--bg);opacity:0;pointer-events:none;transition:opacity .4s;will-change:opacity}
.ficha.open{opacity:1;pointer-events:auto}
/* El antiguo grano fílmico fue sustituido por las brasas flotantes (muro-fx.js),
   una capa de partículas por detrás del contenido que no se re-mezcla con el
   viewport, así que abrir/cerrar la ficha no produce destellos ni estática. */
.ficha-close{position:absolute;top:20px;right:20px;z-index:6;width:44px;height:44px;display:grid;place-items:center;cursor:pointer;
  background:rgba(var(--bg-rgb),.7);border:1px solid rgba(var(--crim-rgb),.35);color:var(--muro-text-l);transition:all .3s}
.ficha-close:hover{background:var(--crim);color:var(--muro-white);transform:rotate(90deg)}
.ficha-share{position:absolute;top:20px;right:74px;z-index:6;width:44px;height:44px;display:grid;place-items:center;cursor:pointer;
  background:rgba(var(--bg-rgb),.7);border:1px solid rgba(var(--amber-rgb),.35);color:var(--muro-text-l);transition:all .3s}
.ficha-share:hover{background:rgba(var(--amber-rgb),.2);color:var(--muro-white);border-color:var(--amber)}
.ficha-share svg{width:16px;height:16px}
.ficha-nav{position:absolute;bottom:22px;right:22px;z-index:6;display:flex;gap:8px}
.ficha-nav button{width:42px;height:42px;display:grid;place-items:center;cursor:pointer;background:rgba(var(--bg-rgb),.7);border:1px solid rgba(var(--crim-rgb),.3);color:var(--muro-text-l);transition:all .3s}
.ficha-nav button:hover{background:rgba(var(--crim-rgb),.25);color:var(--muro-white)}
.ficha-vis{position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 42%,var(--bg3),var(--bg) 82%)}
.ficha-vis img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:16%;filter:drop-shadow(0 26px 44px rgba(var(--bg-deep-rgb),.95))}
.ficha.open .ficha-vis img{animation:muro-vin .8s var(--muro-ease)}
@keyframes muro-vin{from{opacity:0;transform:scale(1.08) rotate(-2deg)}to{opacity:1;transform:none}}
.ficha-vis::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 55%,var(--bg) 100%),linear-gradient(0deg,rgba(var(--bg-rgb),.55),transparent 30%)}
/* Variante «captura» (cfg.fichaClass:'ficha-shot'): la vitrina es una escena 16:9
   (capturas de jefes…), no un icono flotante — columna más ancha y la imagen
   llena todo el ancho para que se vea claramente más grande. */
.ficha.ficha-shot{grid-template-columns:minmax(320px,52%) 1fr}
.ficha-shot .ficha-vis img{padding:clamp(16px,2.5vw,36px);object-fit:contain;
  filter:drop-shadow(0 18px 34px rgba(var(--bg-deep-rgb),.9))}
.ficha-shot .ficha-vis::after{background:linear-gradient(90deg,transparent 72%,var(--bg) 100%),linear-gradient(0deg,rgba(var(--bg-rgb),.4),transparent 24%)}
.ficha-data{position:relative;overflow-y:auto;padding:clamp(28px,5vh,60px) clamp(24px,4.5vw,70px);scrollbar-width:thin;scrollbar-color:var(--crim-d) transparent}
.fd-counter{font-size:10.5px;font-weight:700;letter-spacing:.3em;color:var(--muro-text);display:block;margin-bottom:10px}
.fd-counter b{color:var(--amber)}
.fd-name{font-family:var(--ff-muro);font-weight:700;font-size:clamp(28px,3.6vw,46px);color:var(--muro-white);line-height:1.08;margin-bottom:14px;text-shadow:0 0 40px rgba(var(--crim-rgb),.4)}
.fd-orn{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.fd-orn i{width:7px;height:7px;background:var(--crim);transform:rotate(45deg);box-shadow:0 0 10px rgba(var(--crim-rgb),.85)}
.fd-orn::before{content:'';height:1px;width:60px;background:linear-gradient(270deg,var(--crim),transparent)}
.fd-orn::after{content:'';height:1px;width:120px;background:linear-gradient(90deg,var(--crim),transparent)}
.fd-stats{display:grid;grid-template-columns:repeat(3,minmax(0,150px));gap:12px;margin-bottom:20px}
.fds{background:rgba(var(--bg3-rgb),.45);border:1px solid rgba(var(--crim-rgb),.15);padding:14px 17px;min-width:0}
/* Valores textuales largos (p.ej. «Coleccionable»): partir palabra antes que desbordar la caja */
.fds b{display:block;font-size:20px;font-weight:700;color:var(--muro-white);overflow-wrap:break-word;hyphens:auto}
.fds span{font-size:8.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--amber-l)}
.fds.weak{border-color:rgba(95,201,138,.35)}
.fds.weak b{color:#7ddd9f;font-size:15px;padding-top:4px}
.fd-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.chip{display:inline-flex;align-items:baseline;gap:7px;background:rgba(var(--bg3-rgb),.4);border:1px solid rgba(var(--muro-text-rgb),.16);padding:7px 11px}
.chip b{font-size:12.5px;font-weight:700;color:var(--muro-text-l)}
.chip span{font-size:8px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muro-text)}
/* Ficha técnica en formato spec sheet (sustituye la fila de chips) */
.fd-spec{flex:1 1 100%;display:grid;grid-template-columns:1fr 1fr;column-gap:32px;border-top:1px solid rgba(var(--crim-rgb),.18)}
.fd-spec-row{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:9px 1px;border-bottom:1px solid rgba(var(--crim-rgb),.12)}
.fd-spec-row.wide{grid-column:1 / -1;flex-direction:column;align-items:flex-start;gap:4px}
.fd-spec-row.wide .v{text-align:left}
.fd-spec-row .k{font-size:8.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--amber-l);white-space:nowrap}
.fd-spec-row .v{font-size:13.5px;font-weight:700;color:var(--muro-white);text-align:right;line-height:1.25}
.fd-desc{font-size:14px;line-height:1.85;color:var(--muro-text-l);max-width:58ch;white-space:pre-line;margin-bottom:26px}
.fd-loot{margin-top:18px;margin-bottom:24px}
.fd-loot-h{font-size:9.5px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--amber-l);margin-bottom:10px}
.fd-loot ul{list-style:none;display:grid;gap:8px}
.fd-loot li{display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;letter-spacing:.04em;color:var(--muro-text-l)}
.fd-loot li::before{content:'';width:5px;height:5px;background:var(--amber);transform:rotate(45deg);flex:0 0 auto;box-shadow:0 0 6px rgba(var(--amber-rgb),.7)}
.fd-loot li.oi{flex-wrap:wrap;align-items:baseline}
.fd-loot li.oi .oi-stat{flex:0 1 auto;color:var(--muro-text-l)}
.fd-loot li.oi .oi-val{flex:0 0 auto;font-weight:700;color:var(--amber-l);white-space:nowrap}
.fd-loot li.oi .oi-meta{flex:0 0 100%;margin-left:14px;font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muro-text)}
.fd-loot li.oi .oi-desc{flex:0 0 100%;margin-left:14px;font-size:12px;font-weight:400;letter-spacing:0;text-transform:none;line-height:1.55;color:var(--muro-text-l)}
.fd-loot li.fd-set-count{color:var(--amber-l);font-weight:700;letter-spacing:.04em}
.fd-loot li.fd-set-count::before{background:var(--crim)}
/* Tabla de Desafío de Jefes: efecto/habilidad en dos niveles */
.muro-boss-main{display:block;color:var(--muro-white);font-weight:700}
.muro-boss-sub{display:block;margin-top:3px;font-size:11px;font-weight:400;line-height:1.5;color:var(--muro-text)}
.fd-tabs{display:flex;gap:6px;margin-bottom:14px;max-width:420px}
.fd-tab{flex:1;cursor:pointer;background:rgba(var(--bg3-rgb),.4);border:1px solid rgba(var(--muro-text-rgb),.16);color:var(--muro-text);
  font-family:var(--ff-muro);font-size:9.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;padding:9px 6px;transition:all .3s}
.fd-tab:hover{color:var(--muro-text-l);border-color:rgba(var(--crim-rgb),.35)}
.fd-tab.on{background:rgba(var(--crim-rgb),.14);border-color:rgba(var(--crim-rgb),.5);color:var(--muro-white)}
.res-list{display:grid;gap:11px;max-width:420px}
.res{display:grid;grid-template-columns:minmax(86px,max-content) 1fr 64px;align-items:center;gap:12px}
/* Etiquetas largas (Perforación, Electricidad…): la columna crece en vez de partir la palabra */
.res .rl{font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muro-text-l);white-space:nowrap}
.res .bar{height:5px;background:rgba(var(--muro-text-rgb),.14);position:relative;overflow:hidden}
.res .bar i{position:absolute;inset:0;transform-origin:left;background:linear-gradient(90deg,var(--crim-d),var(--crim));transition:transform .8s var(--muro-ease)}
.res.gold .bar i{background:linear-gradient(90deg,#8a6a2e,var(--amber-l))}
.res .rv{font-size:11px;font-weight:700;text-align:right;color:var(--muro-text-l)}

@media(max-width:860px){
  .wall{grid-template-columns:repeat(2,1fr);gap:12px}
  /* En columnas estrechas el .info superpuesto es más alto que la placa y tapa
     el icono por completo: la placa pasa a tarjeta en flujo (icono arriba,
     datos debajo), la misma receta que la variante wall-shot. */
  .plate{aspect-ratio:auto;display:flex;flex-direction:column}
  .plate img{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;padding:7% 10%;flex:0 0 auto}
  .plate .veil{display:none}
  .plate .ph{position:relative;inset:auto;aspect-ratio:4/3;flex:0 0 auto}
  .plate .info{position:relative;left:auto;right:auto;bottom:auto;flex:1 1 auto;padding:2px 11px 12px}
  .plate h3{font-size:12px}
  .plate .quick{gap:14px;margin-top:6px}
  .plate .muro-inspect{margin-top:8px;font-size:8px;padding:6px 9px;letter-spacing:.1em}
  .plate .muro-share{margin-top:8px;width:25px;height:25px}
  .plate .obt-mark{width:22px;height:22px;top:8px;right:8px}
  .muro-pool-controls{gap:9px}
  .muro-pool-table{font-size:11.5px}
  .ficha{grid-template-columns:1fr;grid-template-rows:34vh 1fr}
  .ficha.ficha-shot{grid-template-columns:1fr;grid-template-rows:30vh 1fr}
  .ficha-vis img{padding:8%}
  .ficha-shot .ficha-vis img{padding:12px}
  .ficha-data{padding:18px 22px 90px}
  .fd-stats{grid-template-columns:repeat(3,1fr)}
  .fd-spec{grid-template-columns:1fr;column-gap:0}
  .fd-spec-row.wide{grid-column:auto}
  .ficha-nav{bottom:16px;right:16px}
}

/* ══════════ DESCOMPOSICIÓN — vitrinas sin ficha, todo en la placa ══════════ */
.muro-dc .plate{aspect-ratio:auto;cursor:default}
.muro-dc .plate .veil,.muro-dc .plate .ph,.muro-dc .plate .muro-inspect,.muro-dc .plate .obt-mark{display:none}
.muro-dc .plate .info{position:relative;padding:16px 18px}
.muro-dc .plate h3{font-size:14px;margin-bottom:10px;display:block;min-height:0}
.muro-dc .plate .quick{display:block;margin-top:0}
.muro-dc .plate .quick b,.muro-dc .plate .quick span{display:inline}
.dc-label{display:block;font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muro-text);margin:10px 0 5px}
.dc-label:first-child{margin-top:0}
.dc-mats{list-style:none;display:grid;gap:4px}
.dc-mats li{display:flex;align-items:baseline;gap:8px;font-size:12.5px;color:var(--muro-text-l);line-height:1.4}
.dc-mats .dc-n{flex:1}
.dc-mats i{font-style:normal;font-size:10.5px;color:var(--amber);font-weight:600}
.dc-mats b{font-size:12px;font-weight:700;color:var(--muro-white);white-space:nowrap}
.dc-mats.rand li{color:var(--muro-text)}
@media(max-width:860px){
  .muro-dc .plate .info{padding:11px 12px}
  .muro-dc .plate h3{font-size:12px}
  .dc-mats li{font-size:11.5px}
}

/* ══════════ HABILIDADES — vitrinas sin ficha, todo en la placa ══════════ */
.muro-hab .plate{aspect-ratio:auto;cursor:default}
.muro-hab .plate .veil,.muro-hab .plate .ph,.muro-hab .plate .muro-inspect,.muro-hab .plate .obt-mark{display:none}
.muro-hab .plate .info{position:relative;padding:18px 19px}
.muro-hab .plate h3{font-size:15px;margin-bottom:8px;display:block;min-height:0}
.muro-hab .plate .quick{display:block;margin-top:0}
.muro-hab .plate .quick b,.muro-hab .plate .quick span{display:inline}
.hab-tipo{display:inline-block;font-size:8.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--crim-l);border:1px solid rgba(var(--crim-rgb),.4);padding:3px 8px 2px;margin-bottom:11px;
  background:rgba(var(--crim-rgb),.08)}
.hab-names{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.hab-names i{font-style:normal;font-size:10.5px;font-weight:600;letter-spacing:.06em;color:var(--muro-text-l);
  background:rgba(var(--muro-text-rgb),.1);padding:3px 8px}
.hab-names i:first-child{border-left:2px solid var(--crim)}
.hab-names i:last-child{border-left:2px solid var(--amber)}
.hab-block{border-left:2px solid rgba(var(--muro-text-rgb),.25);padding:2px 0 2px 11px;margin-top:9px}
.hab-block p{font-size:12.5px;line-height:1.65;color:var(--muro-text-l);margin:0}
.hab-block--temple{border-left-color:var(--crim)}
.hab-block--furia{border-left-color:var(--amber)}
.hab-block-tag{display:block;font-size:8.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;margin-bottom:3px}
.hab-block--temple .hab-block-tag{color:var(--crim-l)}
.hab-block--furia .hab-block-tag{color:var(--amber-l)}
.hab-resumen{font-size:11.5px;line-height:1.6;color:var(--muro-text);margin-top:11px;padding-top:9px;
  border-top:1px solid rgba(var(--muro-text-rgb),.12)}
@media(max-width:860px){
  .muro-hab .plate .info{padding:12px 13px}
  .muro-hab .plate h3{font-size:12.5px}
  .hab-block p{font-size:11.5px}
}

/* ══════════ PAGINADOR (muro-pager) — solo si el adaptador pide pageSize ══════════ */
.muro-pager{display:flex;justify-content:center;align-items:center;gap:7px;flex-wrap:wrap;
  margin:38px auto 6px;width:min(1420px,95vw)}
.muro-pager button{min-width:38px;height:38px;padding:0 12px;display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;font-family:var(--ff-muro);font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--muro-text-l);
  background:rgba(var(--bg3-rgb),.45);border:1px solid rgba(var(--crim-rgb),.22);transition:all .25s}
.muro-pager button:hover:not(:disabled){color:var(--muro-white);border-color:rgba(var(--crim-rgb),.5);background:rgba(var(--crim-rgb),.12)}
.muro-pager button.on{background:var(--crim);border-color:var(--crim);color:var(--muro-white);
  box-shadow:0 0 16px -4px rgba(var(--crim-rgb),.6)}
.muro-pager button:disabled{opacity:.32;cursor:default}
.muro-pager button svg{width:14px;height:14px}
.muro-pager .mp-dots{color:var(--muro-text);letter-spacing:.1em;padding:0 2px;user-select:none}

/* ══════════ TALISMANES — vitrinas sin ficha, efecto completo en la placa ══════════ */
.muro-tal .plate{aspect-ratio:auto;cursor:default}
.muro-tal .plate .veil,.muro-tal .plate .ph,.muro-tal .plate .muro-inspect,.muro-tal .plate .obt-mark{display:none}
.muro-tal .plate .info{position:relative;padding:16px 18px}
.muro-tal .plate h3{font-size:14px;margin-bottom:10px;display:block;min-height:0}
.muro-tal .plate .quick{display:block;margin-top:0}
.muro-tal .tal-peso{font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muro-text);margin-bottom:9px}
.muro-tal .tal-peso b{font-size:13px;font-weight:700;color:var(--muro-white);letter-spacing:0;text-transform:none;margin-left:6px}
.muro-tal .er-tal-stats{margin-top:2px}
.muro-tal .tal-info{font-size:12px;line-height:1.6;color:var(--muro-text-l);margin-top:11px}
@media(max-width:860px){
  .muro-tal .plate .info{padding:12px 13px}
  .muro-tal .plate h3{font-size:12.5px}
}

/* ══════════ SITIOS DE GRACIA — vitrinas sin ficha ni imagen (texto en placa) ══════════
   Reset «sin ficha» (idéntico en concepto a muro-tal/muro-hab/muro-dc) + estilos de
   zona y nota. Se usa cuando el catálogo es una lista de texto sin imagen por item. */
.muro-grace .plate{aspect-ratio:auto;cursor:default}
.muro-grace .plate .veil,.muro-grace .plate .ph,.muro-grace .plate .muro-inspect,.muro-grace .plate .obt-mark{display:none}
.muro-grace .plate .info{position:relative;padding:16px 18px}
.muro-grace .plate h3{font-size:14.5px;margin-bottom:8px;display:block;min-height:0;line-height:1.25}
.muro-grace .plate .quick{display:block;margin-top:0}
.muro-grace .grace-zone{display:inline-block;font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--amber-l);margin-bottom:8px}
.muro-grace .grace-zone::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--amber);box-shadow:0 0 8px rgba(var(--amber-rgb),.7);margin-right:7px;vertical-align:middle}
.muro-grace .grace-nota{font-size:12px;line-height:1.6;color:var(--muro-text);font-style:italic;
  border-top:1px solid rgba(var(--amber-rgb),.14);padding-top:9px;margin-top:4px}
@media(max-width:860px){
  .muro-grace .plate .info{padding:12px 13px}
  .muro-grace .plate h3{font-size:13px}
}

/* Media de localización en la ficha (imagen / vídeo / enlace) */
.fd-loc-media{margin-top:12px}
.fd-loc-media img{display:block;max-width:100%;max-height:220px;object-fit:cover;border:1px solid rgba(var(--crim-rgb),.2);background:rgba(0,0,0,.35)}
.fd-loc-media a{color:var(--amber-l);text-decoration:none;border-bottom:1px dotted rgba(var(--amber-rgb),.5);font-size:12.5px}

/* ══════════ Acordeón de pasos de ficha (questlines, rutas…) ══════════
   Patrón reutilizable: pasos numerados colapsables con acción + recompensas.
   Collapse por grid-template-rows (0fr→1fr) como el resto del sistema. */
.fd-quest{margin-top:6px}
.fd-quest-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.fd-quest-bar .fdq-title{font-size:9.5px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--amber-l)}
.fd-quest-toggle{display:inline-flex;align-items:center;gap:6px;font-family:var(--ff-muro);font-size:8.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muro-text);background:transparent;
  border:1px solid rgba(var(--muro-text-rgb),.22);padding:6px 11px;cursor:pointer;transition:all .25s}
.fd-quest-toggle:hover{color:var(--muro-white);border-color:rgba(var(--crim-rgb),.5)}
.fd-quest-toggle svg{transition:transform .3s var(--muro-ease)}
.fd-quest-toggle.is-open svg{transform:rotate(180deg)}
.fd-steps{display:flex;flex-direction:column;gap:8px}
.fd-step{border:1px solid rgba(var(--muro-text-rgb),.13);border-left:2px solid rgba(var(--crim-rgb),.4);
  background:linear-gradient(165deg,rgba(var(--bg3-rgb),.5),rgba(var(--bg2-rgb),.3));transition:border-color .3s,box-shadow .3s}
.fd-step.open{border-color:rgba(var(--crim-rgb),.32);border-left-color:var(--crim);box-shadow:0 12px 34px -28px rgba(var(--crim-rgb),.4)}
.fd-step-h{display:flex;align-items:center;gap:12px;width:100%;background:none;border:0;cursor:pointer;text-align:left;padding:12px 14px;transition:background .25s}
.fd-step-h:hover{background:rgba(var(--crim-rgb),.05)}
.fd-step-num{flex:none;width:26px;height:26px;display:grid;place-items:center;font-family:var(--ff-muro-d);font-weight:900;font-size:12px;
  color:var(--muro-white);background:rgba(var(--crim-rgb),.16);border:1px solid rgba(var(--crim-rgb),.3)}
.fd-step.open .fd-step-num{background:var(--crim);border-color:var(--crim);box-shadow:0 0 12px rgba(var(--crim-rgb),.4)}
.fd-step-loc{flex:1;min-width:0;font-family:var(--ff-muro);font-weight:700;font-size:13.5px;letter-spacing:.02em;color:var(--muro-text-l);line-height:1.3;transition:color .25s}
.fd-step-h:hover .fd-step-loc{color:var(--muro-white)}
.fd-step-chev{flex:none;color:rgba(var(--crim-rgb),.5);transition:transform .4s var(--muro-ease),color .25s}
.fd-step.open .fd-step-chev{transform:rotate(180deg);color:var(--crim)}
.fd-step-body{display:grid;grid-template-rows:0fr;overflow:hidden;transition:grid-template-rows .45s var(--muro-ease)}
.fd-step.open .fd-step-body{grid-template-rows:1fr}
.fd-step-body-in{min-height:0;overflow:hidden}
.fd-step-pad{padding:0 14px 14px 52px}
.fd-step-act{font-size:12.5px;line-height:1.7;color:var(--muro-text-l)}
.fd-step-rew{display:flex;align-items:flex-start;gap:8px;margin-top:11px;padding-top:10px;border-top:1px solid rgba(var(--amber-rgb),.14);
  font-size:11.5px;line-height:1.5;color:var(--amber-l)}
.fd-step-rew svg{flex:none;margin-top:1px;color:var(--amber);opacity:.85}