/* ── 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 de rareza de los items NO se imitan: se usan los PNG del juego. */

@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{
  --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 arte real del juego, tapado por un velo oscuro para que el
   contenido se lea. Va en un pseudo-elemento fijo para que no scrollee ni se
   repinte, y en celular se sirve una versión de 48 KB en vez de 202. */
body{
  margin:0;color:var(--crema);
  font:17px/1.6 var(--texto);
  background:var(--fondo);
  min-height:100vh;position:relative;
}
body::before{
  content:"";position:fixed;inset:0;z-index:-2;
  background:url('/img/fondo.webp') center/cover no-repeat;
  opacity:.5;
}
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));
}
@media (max-width:760px){ body::before{background-image:url('/img/fondo-mob.webp');opacity:.42} }
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;
}
.menu{display:flex;gap:4px;flex-wrap:wrap;flex:1}
.menu a{
  font-family:var(--serif);color:var(--gris2);font-size:14px;padding:7px 11px;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}

/* ── 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)}
.ficha-card .retrato{
  width:100%;aspect-ratio:3/4;object-fit:cover;
  background:linear-gradient(180deg,#151d33,#0a0e1a);
}
.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:44px;padding:20px 16px 0;
  color:var(--gris);font-size:13px;text-align:center;
}

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

@media (max-width:760px){
  .cabecera-fila{padding:9px 12px;gap:8px;flex-wrap:nowrap}
  /* El menú no se apila en cinco filas: se desliza de costado, como una app */
  .menu{
    flex-wrap:nowrap;overflow-x:auto;gap:2px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
    mask-image:linear-gradient(90deg,#000 88%,transparent);
  }
  .menu::-webkit-scrollbar{display:none}
  .menu a{padding:6px 9px;font-size:13px}
  .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} }

/* ════════════════════════════════════════════════════════════════════════════
   MARCOS Y BOTONES REALES DEL JUEGO
   No son una imitación en CSS: son los mismos PNG que usa la barraca
   (public/img/ui/), recortados en 9 partes para que estiren sin deformarse.
   Los cortes salieron de probarlos y mirarlos, no de adivinar.
   ════════════════════════════════════════════════════════════════════════════ */

/* Panel con las volutas superiores — para bloques destacados */
.marco-real{
  border-style:solid;
  border-width:40px 12px 14px 12px;
  border-image:url('/img/ui/ba-celestials-panel.webp') 40 12 14 12 / 40px 12px 14px 12px stretch;
  background:linear-gradient(180deg,rgba(17,21,36,.93),rgba(11,15,28,.95)) border-box;
}

/* Tarjeta con base ornamentada — para fichas de contenido */
.card-real{
  border-style:solid;
  border-width:40px 26px 60px 26px;
  border-image:url('/img/ui/ba-card-frame.webp') 40 26 60 26 / 40px 26px 60px 26px stretch;
  background:linear-gradient(180deg,rgba(20,26,44,.92),rgba(11,15,28,.96)) border-box;
}

/* El botón del juego, entero: la filigrana dorada no se estira ni se corta.
   Por eso mantiene su proporción y crece con el ancho disponible. */
.btn-real{
  display:inline-grid;place-items:center;
  min-width:230px;aspect-ratio:3.3/1;padding:0 46px;
  background:url('/img/ui/ba-tipo-button.webp') center/100% 100% no-repeat;
  border:0;cursor:pointer;
  font-family:var(--serif);font-size:clamp(14px,1.5vw,17px);font-weight:700;
  color:#f4f9ff;letter-spacing:.6px;text-shadow:0 2px 6px rgba(0,20,40,.9);
  transition:filter .15s ease,transform .15s ease;
}
.btn-real:hover{filter:brightness(1.15) saturate(1.1);transform:translateY(-2px);color:#fff}
.btn-real:active{transform:translateY(0)}

/* Marco chico para íconos de hechizo (el mismo de la barraca) */
.marco-spell{
  border-style:solid;border-width:14px;
  border-image:url('/img/ui/ba-spell-frame.webp') 22 / 14px stretch;
}