/* ── The Holy War · sistema visual de la web ──────────────────────────────────
   El lenguaje sale de las UI reales del juego (altar divino, barraca, ciudad):
   fondo azul-negro profundo, marcos dorados, cards biseladas, acento cian mágico.
   La paleta son los colores literales de public/css/*.css del juego, y la
   tipografía es la MISMA que usa el juego (Cinzel + Yrsa, ver barracks.css).
   Los marcos, botones y adornos NO usan archivos del juego: están dibujados en
   CSS. Las interfaces del juego son sólo la REFERENCIA de cómo tiene que verse. */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Cinzel+Decorative:wght@700&family=Yrsa:wght@300;400;600;700&display=swap');

:root{
  --version:'04/09 legibilidad';
  --serif:'Cinzel',Georgia,serif;
  --display:'Cinzel Decorative','Cinzel',Georgia,serif;
  --texto:'Yrsa',Georgia,serif;
  --fondo:#080a12; --fondo2:#0c0818; --fondo3:#0e1526;
  --panel:#111524; --panel2:#0b0f1c;
  --oro:#f0d68a; --oro2:#c8a850; --oro3:#8a6d2f;
  --crema:#efe6cc; --cian:#7fe3f0; --azul:#7ea8f8;
  --gris:#7f8ea8; --gris2:#b7c3d6;
  --violeta:#2a1840; --violeta2:#56428a;
  --rojo:#e05252; --verde:#3ec46d;
  --borde:#241a3e;
  --sombra:0 10px 30px rgba(0,0,0,.55);
  --radio:10px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* El fondo es todo CSS: sin una sola imagen. */
body{
  margin:0;color:var(--crema);
  font:17px/1.6 var(--texto);
  background:var(--fondo);
  min-height:100vh;position:relative;
}
/* El fondo es arte, y va. En celular se sirve la versión de 48 KB. */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;
  background:url('/img/fondo.webp') center/cover no-repeat;
  opacity:.5;
}
@media (max-width:760px){ body::before{background-image:url('/img/fondo-mob.webp');opacity:.42} }
body::after{
  content:"";position:fixed;inset:0;z-index:-1;
  background:
    radial-gradient(1100px 640px at 50% 0%,rgba(20,14,40,.55) 0%,rgba(8,10,18,.93) 62%),
    linear-gradient(180deg,rgba(8,10,18,.80),rgba(8,10,18,.96));
}

a{color:var(--cian);text-decoration:none}
a:hover{color:var(--oro)}
img{max-width:100%;display:block}

/* ── Marco dorado: el gesto visual que define al juego ─────────────────────── */
.marco{
  border:1px solid transparent;border-radius:var(--radio);
  background:
    linear-gradient(180deg,rgba(17,21,36,.92),rgba(11,15,28,.92)) padding-box,
    linear-gradient(180deg,var(--oro) 0%,var(--oro3) 45%,var(--oro2) 100%) border-box;
  box-shadow:var(--sombra);
}
/* Corte en las esquinas, como las cards del altar */
.biselado{
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
}

/* ── Cabecera ──────────────────────────────────────────────────────────────── */
.cabecera{
  position:sticky;top:0;z-index:50;
  background:linear-gradient(180deg,rgba(8,10,18,.97),rgba(8,10,18,.86));
  border-bottom:1px solid var(--borde);
  backdrop-filter:blur(8px);
}
.cabecera-fila{
  max-width:1240px;margin:0 auto;padding:12px 16px;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
}
.logo{
  font-family:var(--display);
  font-size:20px;font-weight:700;letter-spacing:.5px;white-space:nowrap;
  background:linear-gradient(180deg,#fff6dd,var(--oro) 50%,var(--oro2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  display:flex;align-items:center;flex:0 0 auto;
}
/* El logo real del juego. Su imagen ya trae el nombre, así que no lleva texto. */
.logo img{height:50px;width:auto;display:block;filter:drop-shadow(0 2px 8px rgba(0,0,0,.6))}
.marca-pie .logo img{height:64px}
@media (max-width:900px){ .logo img{height:34px} }
.menu{display:flex;gap:2px;align-items:center;flex:1}
.menu a{
  font-family:var(--serif);color:var(--gris2);font-size:14px;padding:8px 12px;border-radius:7px;
  border:1px solid transparent;white-space:nowrap;
}
.menu a:hover{background:#151033;border-color:var(--borde);color:var(--crema)}
.menu a.activo{color:var(--oro);border-color:var(--oro3);background:#171125}

/* Grupos del menú: nueve entradas sueltas no entraban, agrupadas sí.
   Con mouse se abren al pasar por encima; con el dedo, al tocar el botón. */
.grupo-menu{position:relative}
/* Puente invisible entre el botón y su desplegable: sin esto, al bajar el mouse
   se cruzaba el hueco de 7 px, se perdía el :hover y el menú se cerraba solo. */
.grupo-menu::after{content:"";position:absolute;left:0;right:0;top:100%;height:12px}
.grupo-menu > button{
  font-family:var(--serif);color:var(--gris2);font-size:14px;padding:8px 12px;border-radius:7px;
  border:1px solid transparent;background:none;cursor:pointer;white-space:nowrap;
  display:inline-flex;align-items:center;gap:6px;
}
.grupo-menu > button i{font-style:normal;font-size:10px;opacity:.7;transition:transform .15s ease}
.grupo-menu:hover > button,.grupo-menu.abierto > button{background:#151033;border-color:var(--borde);color:var(--crema)}
.grupo-menu.abierto > button i{transform:rotate(180deg)}
.grupo-menu.activo > button{color:var(--oro)}
.desplegable{
  position:absolute;top:calc(100% + 9px);left:0;min-width:210px;z-index:60;
  display:none;flex-direction:column;padding:7px;border-radius:11px;
  background:linear-gradient(180deg,#141029,#0a0e1a);
  border:1px solid var(--oro3);box-shadow:0 18px 44px rgba(0,0,0,.7);
}
.grupo-menu:hover .desplegable,.grupo-menu.abierto .desplegable{display:flex}
.desplegable a{font-size:14px;padding:9px 12px;border-radius:7px}

/* La banderita del idioma */
.idioma{
  display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:8px;cursor:pointer;
  background:rgba(11,15,28,.6);border:1px solid var(--borde);color:var(--gris2);
  font-family:var(--serif);font-size:13px;
}
.idioma:hover{border-color:var(--oro3);color:var(--oro)}
.idioma svg{width:16px;height:16px;flex:0 0 auto}
.idioma .corto{font-weight:600;letter-spacing:1px}

.btn-jugar{
  font-family:var(--serif);font-weight:700;font-size:14px;letter-spacing:.6px;white-space:nowrap;
  padding:9px 18px;border-radius:8px;border:1px solid #f0d68a;
  background:linear-gradient(180deg,#e8cf86,#b8912f);color:#20180a;
  box-shadow:0 6px 18px rgba(200,168,80,.26);
}
.btn-jugar:hover{background:linear-gradient(180deg,#f6e2a2,#caa03a);color:#20180a}

.menu .solo-movil{display:none}
/* Los controles de la derecha, con su propio aire */
.acciones-cab{display:flex;align-items:center;gap:12px;flex:0 0 auto;margin-left:16px}
.menu-hamburguesa{
  display:none;background:none;border:1px solid var(--borde);border-radius:8px;
  color:var(--crema);font-size:18px;padding:5px 11px;cursor:pointer;
}

/* ── Estructura ────────────────────────────────────────────────────────────── */
.envoltura{max-width:1240px;margin:0 auto;padding:22px 16px 80px}
.titulo{
  font-family:var(--serif);
  font-size:clamp(25px,5vw,40px);margin:6px 0 4px;font-weight:700;letter-spacing:.6px;
  background:linear-gradient(180deg,#fff6dd,var(--oro) 55%,var(--oro2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.bajada{color:var(--gris);margin:0 0 20px;font-size:15px}
.seccion{
  font-family:var(--serif);
  font-size:13px;letter-spacing:2.4px;text-transform:uppercase;color:var(--oro2);
  margin:34px 0 14px;font-weight:600;display:flex;align-items:center;gap:12px;
}
.seccion::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--oro3),transparent)}

/* ── Grillas y tarjetas ────────────────────────────────────────────────────── */
.grilla{display:grid;gap:14px}
.g-portales{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.g-items{grid-template-columns:repeat(auto-fill,minmax(158px,1fr))}
.g-fichas{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.g-datos{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}

.portal{
  display:block;padding:18px;text-align:center;color:var(--crema);
  transition:transform .13s ease,filter .13s ease;
}
.portal:hover{transform:translateY(-3px);filter:brightness(1.12);color:var(--crema)}
.portal .n{font-family:var(--serif);font-size:31px;color:var(--oro);font-weight:700;font-variant-numeric:tabular-nums}
.portal .t{font-family:var(--serif);font-size:15px;margin-top:4px;letter-spacing:.5px}
.portal .d{font-size:12px;color:var(--gris);margin-top:6px;line-height:1.4}

/* Card de item: el marco de rareza es el PNG del juego, no una imitación */
.item{
  position:relative;padding:10px;text-align:center;color:var(--crema);
  background:linear-gradient(180deg,#141a2c,#0b0f1c);
  border:1px solid var(--borde);border-radius:9px;
  transition:transform .12s ease,border-color .12s ease;
}
.item:hover{transform:translateY(-2px);color:var(--crema)}
/* frames/<rareza>.png es la PLACA DE FONDO (no un marco superpuesto) y encima
   va el ícono del item, que es transparente. Mismo apilado que el inventario. */
.item-arte{position:relative;width:100%;aspect-ratio:1;margin-bottom:8px}
.item-arte img.mar{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.item-arte img.ico{position:absolute;inset:11%;width:78%;height:78%;object-fit:contain;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.6))}
.item-nombre{font-family:var(--serif);font-size:13px;line-height:1.3;font-weight:600}
.item-meta{font-size:11px;color:var(--gris);margin-top:3px}

.ficha-card{
  display:block;color:var(--crema);overflow:hidden;
  transition:transform .13s ease;
}
.ficha-card:hover{transform:translateY(-3px);color:var(--crema)}
/* El recorte es obligatorio, no cosmético: las imágenes con zoom del Estudio
   crecen más allá de su caja y sin esto se derraman sobre el pie de la tarjeta,
   tapando el nombre de la unidad. */
.ficha-card .marco-arte{overflow:hidden;position:relative;display:block}
.ficha-card .retrato{
  width:100%;aspect-ratio:3/4;object-fit:cover;
  background:linear-gradient(180deg,#151d33,#0a0e1a);
}
/* Los edificios son sprites con transparencia y proporción cuadrada: recortarlos
   como a un retrato les cortaba las torres. Van enteros y centrados. */
.ficha-card .retrato.entera{object-fit:contain;padding:10px}
.retrato-grande .entera{object-fit:contain;padding:14px}
.dato .sub{font-size:11.5px;color:var(--gris);margin-top:5px;line-height:1.45}

/* ── Ficha de edificio: un formato único para los 22 ───────────────────────── */
.tabla-nivel{width:100%;border-collapse:collapse;margin:4px 0 0}
.tabla-nivel th{
  width:40%;text-align:left;vertical-align:top;padding:13px 16px 13px 0;font-weight:400;
  color:var(--gris2);font-size:15px;border-bottom:1px solid var(--borde);
  text-transform:none;letter-spacing:0;font-family:var(--texto);background:none;
}
.tabla-nivel th .nota{display:block;font-size:12.5px;color:var(--gris);margin-top:4px;
  line-height:1.45;text-transform:none;letter-spacing:0}
.tabla-nivel td{
  padding:13px 0;vertical-align:top;border-bottom:1px solid var(--borde);color:var(--crema);
  font-size:15px;text-transform:none;letter-spacing:0;background:none;
}
.tabla-nivel td b{font-family:var(--serif);font-size:19px;color:var(--oro);font-weight:600}
.tabla-nivel td small{color:var(--gris);font-size:13px}
.tabla-nivel td .salto{color:var(--verde);font-size:13px;margin-left:9px}
.tabla-nivel tr:last-child th,.tabla-nivel tr:last-child td{border-bottom:0}
@media (max-width:600px){
  .tabla-nivel th,.tabla-nivel td{display:block;width:auto;border-bottom:0;padding:6px 0}
  .tabla-nivel tr{display:block;border-bottom:1px solid var(--borde);padding:8px 0}
}

/* Recursos (costo, almacenamiento base): siempre la misma fila de celditas */
.recursos{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;max-width:640px}
@media (max-width:900px){ .recursos{grid-template-columns:repeat(3,minmax(0,1fr))} }
.recursos .rec{background:rgba(8,11,20,.55);border:1px solid var(--borde);border-radius:6px;padding:8px 10px;text-align:center}
.recursos .rn{display:block;font-size:10.5px;color:var(--gris);text-transform:uppercase;letter-spacing:1px}
.recursos b{font-family:var(--serif);font-size:16px;color:var(--crema);font-weight:600}
.costo-nivel{margin-top:20px}
.costo-nivel .k,.desbloquea .k{font-family:var(--serif);font-size:12px;letter-spacing:1.8px;
  text-transform:uppercase;color:var(--oro);margin-bottom:10px}

.desbloquea{margin-top:12px;padding:14px 16px;border:1px solid var(--borde);border-radius:8px;
  background:rgba(11,15,28,.5)}
.desbloquea .k{font-family:var(--serif);font-size:12px;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--oro);margin-bottom:8px}
.desbloquea ul{margin:0;padding-left:18px;color:var(--gris2);font-size:14px;line-height:1.7}
.ficha-card .sin-arte{
  width:100%;aspect-ratio:3/4;display:grid;place-items:center;
  background:linear-gradient(180deg,#151d33,#0a0e1a);color:#2f3d5c;font-size:40px;
}
.ficha-card .pie{padding:10px 12px}
.ficha-card .pie b{display:block;font-size:16px;font-family:var(--serif);font-weight:600}
.ficha-card .pie span{font-size:12px;color:var(--gris)}

/* ── Píldoras, chips, badges ───────────────────────────────────────────────── */
.chip{
  display:inline-block;font-size:11px;padding:3px 9px;border-radius:99px;
  border:1px solid currentColor;white-space:nowrap;line-height:1.5;
}
.etiqueta{
  display:inline-block;font-size:11px;padding:3px 9px;border-radius:5px;
  background:#151033;border:1px solid var(--borde);color:var(--gris2);
}

/* ── Controles ─────────────────────────────────────────────────────────────── */
.barra{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:16px}
input,select,button{
  font:inherit;font-size:15px;color:var(--crema);
  background:var(--panel2);border:1px solid var(--borde);
  border-radius:8px;padding:10px 12px;min-width:0;
}
input{flex:1 1 240px}
select{cursor:pointer}
button{cursor:pointer;background:#161029}
button:hover{border-color:var(--oro3);color:var(--oro)}
input:focus,select:focus,button:focus-visible{outline:2px solid var(--oro3);outline-offset:1px}
button:disabled{opacity:.4;cursor:default}

.paginado{display:flex;gap:10px;align-items:center;justify-content:center;margin-top:26px;flex-wrap:wrap}

/* ── Paneles de datos ──────────────────────────────────────────────────────── */
.panel{padding:16px}
.dato{
  background:var(--panel2);border:1px solid var(--borde);border-radius:8px;
  padding:11px;text-align:center;
}
.dato .k{font-size:11px;color:var(--gris);text-transform:uppercase;letter-spacing:.8px}
.dato .v{font-family:var(--serif);font-size:17px;color:var(--crema);font-weight:600;font-variant-numeric:tabular-nums;margin-top:3px}

.pestanas{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.pestanas button{font-size:13px;padding:7px 13px}
.pestanas button.activa{color:var(--oro);border-color:var(--oro3);background:#171125}

table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid #191330}
th{font-family:var(--serif);color:var(--gris);font-size:11px;text-transform:uppercase;letter-spacing:1px;font-weight:600}
tbody tr:hover{background:#100d22}

/* ── Estados ───────────────────────────────────────────────────────────────── */
.cargando{color:var(--gris);padding:26px 0;text-align:center}
.error{color:var(--rojo);padding:16px;text-align:center}
.vacio{color:var(--gris);padding:36px 0;text-align:center}

.pie-web{
  border-top:1px solid var(--borde);margin-top:60px;padding:40px 16px 0;
  color:var(--gris);font-size:14px;
  background:linear-gradient(180deg,transparent,rgba(6,8,14,.6));
}
.pie-fila{
  max-width:1240px;margin:0 auto;display:grid;gap:26px;
  grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,.8fr)) minmax(0,1.1fr);
}
@media (max-width:1100px){ .pie-fila{grid-template-columns:1fr 1fr 1fr} }
.col-pie h4{
  font-family:var(--serif);font-size:12px;letter-spacing:2px;text-transform:uppercase;
  color:var(--oro);margin:0 0 12px;
}
.col-pie a{display:block;color:var(--gris2);font-size:14px;padding:4px 0}
.col-pie a:hover{color:var(--oro)}
.col-pie p{margin:0 0 12px;line-height:1.6;font-size:13.5px;color:var(--gris)}
.marca-pie .logo{display:inline-block;margin-bottom:10px;font-size:19px}
.marca-pie .redes{display:flex;margin-top:4px}
.form-pie{display:flex;gap:7px}
.form-pie input{
  flex:1;min-width:0;padding:10px 12px;font-size:14px;border-radius:8px;
  background:rgba(8,11,20,.9);border:1px solid var(--borde);color:var(--crema);
}
.form-pie input:focus{outline:none;border-color:var(--oro3)}
.form-pie button{
  padding:10px 14px;border-radius:8px;cursor:pointer;font-size:15px;
  background:linear-gradient(180deg,#e8cf86,#b8912f);color:#20180a;border:1px solid #f0d68a;
}
.msg-pie{font-size:12.5px;margin-top:7px;min-height:17px}
.msg-pie.ok{color:var(--verde)} .msg-pie.mal{color:var(--rojo)}
.pie-legal{
  max-width:1240px;margin:30px auto 0;padding:16px 0 22px;text-align:center;font-size:12px;
  color:#4a5568;border-top:1px solid var(--borde);
}
@media (max-width:900px){
  .pie-fila{grid-template-columns:1fr 1fr}
  .marca-pie{grid-column:1 / -1}
}
@media (max-width:560px){ .pie-fila{grid-template-columns:1fr} }

/* El contenido ancho scrollea adentro suyo; la página nunca de costado */
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}

@media (max-width:900px){
  /* Con nowrap el menú desplegado no tenía a dónde ir y la fila se desbordaba:
     los botones de la derecha se salían de la pantalla. */
  .cabecera-fila{padding:9px 12px;gap:8px;flex-wrap:wrap;justify-content:flex-end}
  .logo{margin-right:auto}
  .menu-hamburguesa{display:block;order:5}
  .idioma{order:2} .btn-jugar{order:3} .cabecera-fila .sesion{order:4}
  /* El menú se guarda detrás de la hamburguesa: en el celular una fila con
     cinco grupos no entra, y deslizarla de costado escondía la mitad. */
  .menu{
    display:none;order:9;flex:1 1 100%;flex-direction:column;align-items:stretch;
    gap:2px;padding:8px 0 4px;border-top:1px solid var(--borde);margin-top:6px;
  }
  .cabecera.menu-abierto .menu{display:flex}
  .menu a{padding:10px 9px;font-size:14px}
  .grupo-menu > button{width:100%;justify-content:space-between;padding:10px 9px}
  .desplegable{position:static;display:none;border:0;background:none;box-shadow:none;padding:0 0 0 14px}
  .grupo-menu:hover .desplegable{display:none}
  .grupo-menu.abierto .desplegable{display:flex}
  .btn-jugar{padding:8px 13px;font-size:13px}
}
/* En pantallas chicas la fila de arriba tiene que entrar entera: se achica todo
   y la banderita se queda sólo con la bandera. */
@media (max-width:560px){
  .cabecera-fila{gap:6px}
  /* La hamburguesa se va a la izquierda del todo: así los cinco elementos de la
     cabecera entran en UNA fila en un teléfono de 390 px. */
  .menu-hamburguesa{order:-1}
  /* En un teléfono chico "Entrar" se pasa al menú desplegable: en la fila de
     arriba no entra sin apretar todo lo demás. */
  .cabecera-fila > .sesion{display:none}
  .menu .solo-movil{display:block}
  .logo{font-size:15px}
  .idioma{padding:6px 8px} .idioma .corto{display:none}
  .btn-jugar{padding:7px 11px;font-size:12px}
  .cabecera-fila .sesion{padding:6px 9px;font-size:12px}
  .menu-hamburguesa{padding:5px 9px}
  .logo{font-size:17px}
  .envoltura{padding:16px 12px 60px}
  /* Los filtros entran de a dos por fila en vez de comerse media pantalla */
  .barra{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .barra input{grid-column:1 / -1}
  .barra select{width:100%}
  .g-items{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
  .g-fichas{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
  .g-datos{grid-template-columns:repeat(auto-fill,minmax(102px,1fr));gap:8px}
  .g-mec{grid-template-columns:1fr}
}

/* ── Tooltip de item ──────────────────────────────────────────────────────────
   Mismo comportamiento que el inventario del juego (public/hero-inventory.html):
   pasás el mouse por encima y te dice qué hace, sin entrar a ninguna página.
   Mismo esqueleto: nombre en el color de la rareza, "rareza · tipo", y las
   líneas de lo que otorga. */
#tip{
  position:fixed;z-index:90;pointer-events:none;display:none;
  width:270px;background:#12121a;border-radius:12px;padding:2px;
  box-shadow:0 12px 40px rgba(0,0,0,.8);
}
#tip .in{border-radius:10px;padding:12px 14px;border:1px solid var(--rar,#3a3446)}
#tip .nm{font-family:var(--serif);font-weight:700;font-size:1.05rem;color:var(--rar,#fff);line-height:1.25}
#tip .rr{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--gris);margin:2px 0 9px}
#tip .ln{font-size:.86rem;color:#cdc7ba;line-height:1.5;display:flex;justify-content:space-between;gap:10px}
#tip .ln b{color:var(--cian);font-weight:600;font-variant-numeric:tabular-nums}
#tip .sep{height:1px;background:#2a2536;margin:9px 0}
#tip .nota{font-size:.78rem;color:var(--gris);line-height:1.45}
/* En celular no hay mouse: el tooltip se abre al tocar, anclado abajo */
@media (max-width:760px){
  #tip{width:auto;left:10px!important;right:10px;top:auto!important;bottom:12px}
}

/* ── Hechizos y buffs ─────────────────────────────────────────────────────────
   Un héroe sin sus cuatro hechizos está a medio contar. Cada uno con su ícono
   real del juego (assets/ui/icons-game). */
.g-spells{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.spell{display:flex;gap:13px;padding:14px}
.spell .ic{
  flex:0 0 56px;width:56px;height:56px;border-radius:9px;object-fit:contain;
  background:linear-gradient(180deg,#1a2138,#0b0f1c);border:1px solid var(--oro3);padding:3px;
}
.spell .ic-ph{
  flex:0 0 56px;width:56px;height:56px;border-radius:9px;display:grid;place-items:center;
  background:linear-gradient(180deg,#1a2138,#0b0f1c);border:1px solid var(--borde);
  font-family:var(--serif);font-size:19px;color:var(--oro2);
}
.spell .cuerpo{min-width:0;flex:1}
.spell h4{margin:0 0 3px;font-family:var(--serif);font-size:15px;color:var(--oro);font-weight:600}
.spell .meta{font-size:11px;color:var(--gris);text-transform:uppercase;letter-spacing:.7px;margin-bottom:6px}
.spell p{margin:0;font-size:14px;color:var(--gris2);line-height:1.55}
.spell .escala{
  margin-top:7px;font-size:12px;color:var(--cian);font-variant-numeric:tabular-nums;
  display:flex;gap:5px;flex-wrap:wrap;align-items:center;
}
.spell .escala i{font-style:normal;color:var(--gris)}
.spell .req{margin-top:7px;font-size:12px;color:var(--gris);line-height:1.5}

/* ── Mecánica: tarjeta clickeable y página dedicada ──────────────────────────*/
a.sistema{display:block;color:var(--crema);transition:transform .13s ease,filter .13s ease}
a.sistema:hover{transform:translateY(-3px);filter:brightness(1.1);color:var(--crema)}
a.sistema .leer{margin-top:9px;font-size:12px;color:var(--cian);letter-spacing:.5px}
.claves{list-style:none;padding:0;margin:0}
.claves li{
  position:relative;padding:9px 0 9px 26px;border-bottom:1px solid #191330;
  color:var(--crema);font-size:16px;line-height:1.5;
}
.claves li:last-child{border-bottom:none}
.claves li::before{
  content:"◆";position:absolute;left:2px;top:9px;color:var(--oro2);font-size:11px;
}
.texto-grande{font-size:18px;line-height:1.75;color:var(--gris2);max-width:74ch}
.enlaces{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.enlaces a{
  display:inline-block;padding:9px 15px;border-radius:8px;font-family:var(--serif);
  font-size:14px;background:#161029;border:1px solid var(--oro3);color:var(--oro);
}
.enlaces a:hover{background:#1d1436}

/* Acceso a la cuenta, siempre a mano en la cabecera */
.cabecera-fila .sesion{
  font-family:var(--serif);font-size:14px;padding:7px 14px;border-radius:8px;
  border:1px solid var(--oro3);color:var(--oro);background:#171125;white-space:nowrap;
}
.cabecera-fila .sesion:hover{background:#241a3e;color:var(--oro)}
@media (max-width:760px){ .cabecera-fila .sesion{padding:6px 10px;font-size:13px} }

/* ════════════════════════════════════════════════════════════════════════════
   PIEZAS DE INTERFAZ — propias de la web
   Recreadas mirando las pantallas del juego (altar, equipo, inventario). Lo que
   se copió es el CRITERIO, no los archivos: en el juego cada panel se corona
   con un emblema distinto según lo que contiene — yelmo en el de equipo, alas
   con gema en el de inventario, escudo en el de acciones. Acá pasa lo mismo:
   un marco pariente, ocho remates, y cada sección usa el suyo.
   Se generan con web/assets-src/forja-svg.js.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Panel ───────────────────────────────────────────────────────────────── */
.panel-oro{
  position:relative;
  /* El corte es 118 sobre un lienzo de 420: las esquinas llevan las garras y
     las estrellas, los lados la filigrana, y el centro se estira. */
  border-style:solid;border-width:46px;
  border-image:url('/ui/marco.svg') 118 fill / 46px stretch;
  background:linear-gradient(180deg,rgba(17,23,42,.95),rgba(10,14,26,.97)) border-box;
  padding:10px 16px 16px;
  margin-top:52px;                 /* aire para el emblema que sobresale */
}
/* Con correas de cuero, para los bloques que "guardan" cosas */
.panel-oro.con-correas{
  border-image:url('/ui/marco-correas.svg') 78 fill / 46px stretch;
}

/* ── El remate: cada sección lleva el suyo ───────────────────────────────── */
/* El remate se monta SOBRE el filo superior y sobresale hacia arriba, como en
   el juego. El panel reserva ese aire con su margin-top. */
[class*="rem-"]{padding-top:54px}
[class*="rem-"]::before{
  content:"";position:absolute;left:50%;top:-52px;
  width:140px;height:100px;transform:translateX(-50%);
  background-position:center bottom;background-repeat:no-repeat;background-size:contain;
  pointer-events:none;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.7));
}
.rem-yelmo::before    {background-image:url('/ui/emblema-yelmo.svg')}
.rem-alas::before     {background-image:url('/ui/emblema-alas.svg')}
.rem-escudo::before   {background-image:url('/ui/emblema-escudo.svg')}
.rem-runa::before     {background-image:url('/ui/emblema-runa.svg')}
.rem-espadas::before  {background-image:url('/ui/emblema-espadas.svg')}
.rem-corona::before   {background-image:url('/ui/emblema-corona.svg')}
.rem-pergamino::before{background-image:url('/ui/emblema-pergamino.svg')}
.rem-yunque::before   {background-image:url('/ui/emblema-yunque.svg')}

/* La runa del remate late; las demás sólo brillan al pasar por el panel */
.rem-runa::before{animation:pulso-runa 4.5s ease-in-out infinite}
@keyframes pulso-runa{
  0%,100%{filter:drop-shadow(0 4px 10px rgba(0,0,0,.7))}
  50%{filter:drop-shadow(0 4px 10px rgba(0,0,0,.7)) drop-shadow(0 0 12px rgba(127,227,240,.7))}
}
.panel-oro:hover::before{filter:drop-shadow(0 4px 10px rgba(0,0,0,.7)) brightness(1.14)}

/* ── Tarjeta: MÁS LIVIANA que el panel, no el mismo marco otra vez ────────── */
/* En una grilla de doce, repetir la moldura pesada satura la pantalla. Las
   tarjetas llevan sólo un filo con esquinas marcadas. */
.tarjeta-oro{
  position:relative;
  background:linear-gradient(180deg,rgba(22,29,50,.92),rgba(10,14,26,.96));
  border:1px solid #6d5320;
  box-shadow:inset 0 1px 0 rgba(240,214,138,.18),0 8px 22px rgba(0,0,0,.5);
  padding:14px;
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.tarjeta-oro::before,.tarjeta-oro::after{
  content:"";position:absolute;width:16px;height:16px;pointer-events:none;
  border:2px solid var(--oro);
}
.tarjeta-oro::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.tarjeta-oro::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
.tarjeta-oro:hover{
  transform:translateY(-4px);border-color:var(--oro);
  box-shadow:inset 0 1px 0 rgba(240,214,138,.3),0 14px 32px rgba(0,0,0,.6),
             0 0 22px rgba(240,214,138,.14);
}

/* ── Casillero de item ───────────────────────────────────────────────────── */
.casillero{
  position:relative;border:0;padding:14px 10px 10px;
  background:url('/ui/casillero.svg') center/100% 100% no-repeat;
  transition:transform .12s ease,filter .12s ease;
}
.casillero:hover{transform:translateY(-3px);filter:brightness(1.18)}

/* ── Cinta de título ─────────────────────────────────────────────────────── */
.cinta{
  min-height:62px;display:grid;place-items:center;padding:0 76px;
  background:url('/ui/cinta.svg') center/100% 100% no-repeat;
  font-family:var(--serif);font-size:16px;letter-spacing:2.4px;
  text-transform:uppercase;color:var(--oro);margin:32px 0 18px;
}

/* ── Botón ───────────────────────────────────────────────────────────────── */
.btn-real{
  position:relative;display:inline-grid;place-items:center;
  min-width:230px;min-height:62px;padding:16px 52px;
  border:0;cursor:pointer;
  background:
    linear-gradient(105deg,transparent 40%,rgba(255,255,255,.38) 50%,transparent 60%) no-repeat,
    url('/ui/boton.svg') center/100% 100% no-repeat;
  background-size:260% 100%, 100% 100%;
  background-position:135% 0, center;
  font-family:var(--serif);font-size:clamp(14px,1.5vw,17px);font-weight:700;
  color:#f2fbff;letter-spacing:.8px;text-shadow:0 2px 7px rgba(0,22,42,.95);
  filter:drop-shadow(0 6px 16px rgba(20,90,140,.3));
  transition:background-position .6s ease,transform .14s ease,filter .14s ease;
}
.btn-real:hover{
  transform:translateY(-2px);color:#fff;background-position:-45% 0, center;
  filter:drop-shadow(0 9px 22px rgba(40,140,200,.45)) brightness(1.08);
}
.btn-real:active{transform:translateY(1px)}
.btn-real:disabled{opacity:.55;cursor:default;transform:none}

/* ── Sello ───────────────────────────────────────────────────────────────── */
.sello{
  width:52px;height:52px;flex:0 0 auto;
  background:url('/ui/sello.svg') center/contain no-repeat;
  animation:latir 4s ease-in-out infinite;
}
@keyframes latir{
  0%,100%{filter:drop-shadow(0 0 4px rgba(127,227,240,.3))}
  50%{filter:drop-shadow(0 0 15px rgba(127,227,240,.75))}
}

@media (prefers-reduced-motion: reduce){
  .rem-runa::before,.sello{animation:none}
  .btn-real,.tarjeta-oro,.casillero{transition:none}
}

/* ════════════════════════════════════════════════════════════════════════════
   ESTUDIO DE ARTE — edición en vivo
   Sólo lo ve quien entró como admin. La idea: navegás la web como cualquiera y,
   con el modo encendido, cada imagen y cada hueco te dejan cargar y acomodar
   ahí mismo, viendo cómo va a quedar de verdad.
   ════════════════════════════════════════════════════════════════════════════ */
#estudio-sw{
  position:fixed;right:16px;bottom:16px;z-index:150;
  padding:11px 18px;border-radius:10px;cursor:pointer;
  font-family:var(--serif);font-size:14px;letter-spacing:.6px;
  background:linear-gradient(180deg,#2a1840,#150e26);
  color:var(--oro);border:1px solid var(--oro3);
  box-shadow:0 8px 24px rgba(0,0,0,.6);
}
#estudio-sw:hover{background:linear-gradient(180deg,#3a2258,#1d1333);color:var(--oro)}
body.estudio-on #estudio-sw{background:linear-gradient(180deg,#7a2020,#3d1010);border-color:#e05252;color:#ffd9d9}

/* Con el modo encendido, lo editable se delata */
body.estudio-on [data-arte]{outline:2px dashed rgba(240,214,138,.5);outline-offset:2px}
body.estudio-on [data-arte]:hover{outline-color:var(--oro)}

.arte-editar{
  position:absolute;top:6px;right:6px;z-index:20;
  width:30px;height:30px;border-radius:8px;cursor:pointer;padding:0;
  background:rgba(10,14,26,.92);border:1px solid var(--oro3);
  color:var(--oro);font-size:15px;line-height:1;
  display:none;place-items:center;
}
body.estudio-on .arte-editar{display:grid}
.arte-editar:hover{background:var(--oro);color:#1a1206;border-color:var(--oro)}
/* Los huecos se marcan en verde: son los que hay que completar */
.arte-editar.vacio{border-color:var(--verde);color:var(--verde);
  box-shadow:0 0 12px rgba(62,196,109,.35)}
.arte-editar.vacio:hover{background:var(--verde);color:#06210f}

/* ── El editor ───────────────────────────────────────────────────────────── */
.estudio-velo{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:18px;
  background:rgba(4,6,12,.88);backdrop-filter:blur(6px);
}
.estudio-caja{
  position:relative;width:min(560px,100%);max-height:94vh;overflow:auto;
  padding:24px;border-radius:14px;
  background:linear-gradient(180deg,#141029,#0a0e1a);
  border:1px solid var(--oro3);box-shadow:0 26px 70px rgba(0,0,0,.8);
}
.estudio-caja h3{
  font-family:var(--serif);color:var(--oro);margin:0 0 2px;font-size:19px;
  text-transform:capitalize;
}
.estudio-caja h3 small{color:var(--gris);font-size:13px;text-transform:none;margin-left:6px}
.estudio-ayuda{color:var(--gris);font-size:13px;margin:0 0 14px}
.estudio-x{
  position:absolute;top:10px;right:12px;background:none;border:0;
  color:var(--gris);font-size:19px;cursor:pointer;padding:4px 8px;
}
.estudio-x:hover{color:var(--rojo);border:0}

/* El lienzo respeta la PROPORCIÓN REAL del lugar donde se usa la imagen */
.estudio-lienzo{
  position:relative;width:100%;overflow:hidden;border-radius:10px;
  background:#0b0f1c;border:1px solid var(--borde);cursor:grab;
  display:grid;place-items:center;
}
.estudio-lienzo.agarrando{cursor:grabbing}
.estudio-lienzo img{width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none}
.estudio-sin{color:var(--gris);font-size:14px;text-align:center;padding:30px;line-height:1.6}
/* Guías al tercio: ayudan a ubicar el foco donde se mira */
.estudio-mira{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to right,transparent 33.2%,rgba(255,255,255,.16) 33.3%,transparent 33.4%,
                    transparent 66.5%,rgba(255,255,255,.16) 66.6%,transparent 66.7%),
    linear-gradient(to bottom,transparent 33.2%,rgba(255,255,255,.16) 33.3%,transparent 33.4%,
                    transparent 66.5%,rgba(255,255,255,.16) 66.6%,transparent 66.7%);
}
.estudio-controles{display:flex;gap:14px;align-items:center;margin:14px 0;flex-wrap:wrap}
.estudio-zoom{flex:1;display:flex;gap:10px;align-items:center;font-size:13px;color:var(--gris2);min-width:220px}
.estudio-zoom input{flex:1;accent-color:var(--oro2)}
.estudio-zoom b{color:var(--oro);font-variant-numeric:tabular-nums;min-width:46px}
.estudio-pie{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:6px}
.estudio-msg{flex:1;font-size:13px;color:var(--gris);min-width:120px}
.estudio-msg.ok{color:var(--verde)}
.estudio-msg.mal{color:var(--rojo)}

/* ── Stats agrupados ──────────────────────────────────────────────────────────
   Los stats en una lista plana no se leen: hay veinte renglones iguales y el que
   mira no distingue el daño de la armadura. Agrupados por familia, con el ícono
   del arma al lado y el total resaltado, se entiende de un vistazo — que es para
   lo que existe una guía. */
.stats-familias{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:14px;margin:6px 0 4px;
}
.stat-fam{
  background:linear-gradient(180deg,rgba(24,32,54,.62),rgba(12,17,30,.62));
  border:1px solid rgba(240,214,138,.16);border-radius:10px;padding:12px 14px;
}
.stat-fam h4{
  margin:0 0 8px;font:600 11px/1 var(--serif,Cinzel,Georgia,serif);
  letter-spacing:1.4px;text-transform:uppercase;color:var(--oro,#f0d68a);
  border-bottom:1px solid rgba(240,214,138,.14);padding-bottom:7px;
}
.stat-ln{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:4px 0;font-size:13.5px;
}
.stat-ln + .stat-ln{border-top:1px solid rgba(255,255,255,.045)}
.stat-nom{display:flex;align-items:center;gap:7px;color:var(--gris,#93a0b8)}
.stat-nom img{
  width:19px;height:19px;object-fit:contain;flex:none;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.6));
}
.stat-ln b{color:var(--crema,#e8e2d2);font-variant-numeric:tabular-nums}
/* El total de cada familia es el número que importa: se destaca. */
.stat-ln.total{
  margin:-2px -6px 4px;padding:6px;border-radius:7px;
  background:rgba(240,214,138,.07);
}
.stat-ln.total .stat-nom{color:var(--oro,#f0d68a);font-weight:600}
.stat-ln.total b{color:var(--oro,#f0d68a);font-size:15px}

/* Dónde encontrar a un rebelde o un calabozo. Va en prosa y con el pin porque
   es lo primero que quiere saber quien lee: a dónde tengo que ir. */
.ubicacion{
  margin:8px 0 12px;padding:8px 12px;font-size:13.5px;
  background:rgba(240,214,138,.07);border-left:3px solid var(--oro,#f0d68a);
  border-radius:0 8px 8px 0;color:var(--crema,#e8e2d2);
}