/* Wiki de Orelyn con la interfaz del juego: las piezas HD de Resources/HD/ui (ventana, título, tooltip, panel,
   pestañas, casillas de inventario por rareza, separador, campo de texto) en 9-slice a escala entera y pixeladas,
   la ilustración del login de fondo y las letras del juego (Jersey 10 texto, Jersey 15 títulos y cifras,
   Jacquard 24 solo en el logotipo). Sin CDN: todo es local. */
@font-face{font-family:"Jersey10";src:url("fuentes/Jersey10-Regular.ttf") format("truetype")}
@font-face{font-family:"Jersey15";src:url("fuentes/Jersey15-Regular.ttf") format("truetype")}
@font-face{font-family:"Jacquard24";src:url("fuentes/Jacquard24-Regular.ttf") format("truetype")}
:root{--texto:#e2dace;--tenue:#8c827e;--oro:#dec8a0;--oro2:#f1dfb4;--carmesi:#8e1a2c;--carmesi2:#d6463c;
--arcana:#a386e2;--pococomun:#60d65c;--raro:#5498ff;--epico:#be60ff;--legendario:#ffa434}
*{box-sizing:border-box}
html{background:#0b0a0d}
body{margin:0;color:var(--texto);font-family:"Jersey10",Georgia,serif;font-size:21px;line-height:1.22;
image-rendering:pixelated;min-height:100vh;position:relative;z-index:0;
background:#0b0a0d url("fondo_login.png") center top/1280px 720px no-repeat fixed}
@media (min-width:1500px){body{background-size:1920px 1080px}}
@media (min-width:2200px){body{background-size:2560px 1440px}}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
background:radial-gradient(ellipse at 50% 20%,rgba(10,8,14,.5),rgba(8,6,10,.86) 70%)}
a{color:var(--oro2);text-decoration:none}a:hover{color:#fff}
h1,h2,h3,th,.cuenta,.cartas small,summary{font-family:"Jersey15",Georgia,serif;font-weight:normal}
h1,h2,h3{color:var(--oro);letter-spacing:.5px;text-shadow:2px 2px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000}
h1{font-size:40px;color:var(--oro2);margin:0}
h2{font-size:31px;margin:1.1em 0 .35em}
h2::after{content:"";display:block;height:13px;margin-top:2px;
background:url("img/HD/ui/separador.png") left center/300px 13px no-repeat,
url("img/HD/ui/separador_fino.png") left center/100% 2px no-repeat}
h3{font-size:25px;margin:.9em 0 .3em}
p,li{text-shadow:1px 1px 0 #000}
code{font-family:Consolas,monospace;font-size:15px;color:var(--tenue)}
.nota,.clave{color:var(--tenue);font-size:18px}.magia{color:var(--arcana)}.centro{text-align:center}

/* ------------------------------------------------ cabecera: logotipo con su lema y buscador */
header{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;justify-content:space-between;padding:6px 18px 4px;
background:linear-gradient(rgba(14,11,16,.94),rgba(10,8,12,.9))}
.logo{display:flex;align-items:center;gap:12px}
.logo img{width:147px;height:79px;display:block}
.lema{font-family:"Jacquard24",serif;color:var(--oro);font-size:26px;letter-spacing:1px;
text-shadow:2px 2px 0 #000,0 0 10px rgba(214,70,60,.45)}
.busca{position:relative;flex:1;min-width:240px;max-width:460px;display:flex;align-items:center;gap:6px}
.busca img.st{width:28px;height:28px}
input{font-family:"Jersey10",serif;font-size:20px;color:var(--texto);background:transparent;padding:4px 9px;
border:5px solid transparent;border-image:url("img/HD/ui/campo_texto.png") 5 fill/5px;outline:none}
input:focus{border-image-source:url("img/HD/ui/campo_texto_foco.png")}
#buscar{width:100%}
#resultados{position:absolute;left:34px;right:0;top:100%;z-index:20;max-height:65vh;overflow:auto;display:none;
padding:10px;border:18px solid transparent;border-image:url("img/HD/ui/tooltip.png") 9 8 9 9 fill/18px 16px 18px 18px}
#resultados a{display:flex;justify-content:space-between;gap:10px;padding:2px 6px}
#resultados a.sel,#resultados a:hover{background:rgba(222,200,160,.12)}
#resultados small{color:var(--tenue)}

/* ------------------------------------------------ pestañas del menú */
.pestanas{display:flex;flex-wrap:wrap;justify-content:center;gap:2px;padding:4px 10px 0;
background:rgba(10,8,12,.92);position:sticky;top:0;z-index:10}
.pestanas::after{content:"";position:absolute;left:0;right:0;bottom:-13px;height:13px;pointer-events:none;
background:url("img/HD/ui/separador.png") center/300px 13px no-repeat,url("img/HD/ui/separador_fino.png") center/100% 2px no-repeat}
.pestana{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 6px;color:var(--oro);font-size:19px;
border:0 solid transparent;border-width:0 10px;border-image:url("img/HD/ui/pestana.png") 0 10 fill/0 10px;
text-shadow:1px 1px 0 #000}
.pestana:hover{border-image-source:url("img/HD/ui/pestana_encima.png");color:#fff}
.pestana.activa{border-image-source:url("img/HD/ui/pestana_activa.png");color:var(--oro2)}
.pestana img{width:22px;height:22px;object-fit:contain}

/* ------------------------------------------------ la ventana del juego (9-slice de ventana.png, a ×1) */
main.ventana{position:relative;max-width:1320px;margin:30px auto 10px;padding:38px 34px 34px;
border:30px solid transparent;border-image:url("img/HD/ui/ventana.png") 68 71 67 71 fill/68px 71px 67px 71px}
.titulo{position:relative;margin:-44px auto 14px;width:max-content;max-width:100%;min-width:300px;text-align:center;
height:64px;padding:8px 40px 0;border:0 solid transparent;border-width:0 32px;
border-image:url("img/HD/ui/ventana_titulo.png") 0 16 fill/0 32px}
.titulo::before{content:"";position:absolute;left:50%;top:-24px;width:48px;height:26px;margin-left:-24px;
background:url("img/HD/ui/ventana_titulo_remate.png") 0 0/48px 26px no-repeat}
.migas{color:var(--tenue);font-size:18px;margin:0 0 6px}

/* ------------------------------------------------ casillas de inventario (marco y fondo del color de la rareza) */
.cas{display:inline-flex;align-items:center;justify-content:center;flex:none;vertical-align:middle;overflow:hidden;
position:relative;isolation:isolate}
.cas.c40{width:40px;height:40px;background:url("img/HD/ui/casilla_40_fondo.png") 0 0/40px 40px}
.cas.c40::after{content:"";position:absolute;inset:0;pointer-events:none;background:url("img/HD/ui/casilla_40.png") 0 0/40px 40px}
.cas.c40.pococomun{background-image:url("img/HD/ui/casilla_40_fondo_pococomun.png")}.cas.c40.pococomun::after{background-image:url("img/HD/ui/casilla_40_pococomun.png")}
.cas.c40.raro{background-image:url("img/HD/ui/casilla_40_fondo_raro.png")}.cas.c40.raro::after{background-image:url("img/HD/ui/casilla_40_raro.png")}
.cas.c40.epico{background-image:url("img/HD/ui/casilla_40_fondo_epico.png")}.cas.c40.epico::after{background-image:url("img/HD/ui/casilla_40_epico.png")}
.cas.c40.legendario{background-image:url("img/HD/ui/casilla_40_fondo_legendario.png")}.cas.c40.legendario::after{background-image:url("img/HD/ui/casilla_40_legendario.png")}
.cas.c70{width:140px;height:140px;background:url("img/HD/ui/casilla_70_fondo.png") 0 0/140px 140px}
.cas.c70::after{content:"";position:absolute;inset:0;pointer-events:none;background:url("img/HD/ui/casilla_70.png") 0 0/140px 140px}
.cas.c70.pococomun{background-image:url("img/HD/ui/casilla_70_fondo_pococomun.png")}.cas.c70.pococomun::after{background-image:url("img/HD/ui/casilla_70_pococomun.png")}
.cas.c70.raro{background-image:url("img/HD/ui/casilla_70_fondo_raro.png")}.cas.c70.raro::after{background-image:url("img/HD/ui/casilla_70_raro.png")}
.cas.c70.epico{background-image:url("img/HD/ui/casilla_70_fondo_epico.png")}.cas.c70.epico::after{background-image:url("img/HD/ui/casilla_70_epico.png")}
.cas.c70.legendario{background-image:url("img/HD/ui/casilla_70_fondo_legendario.png")}.cas.c70.legendario::after{background-image:url("img/HD/ui/casilla_70_legendario.png")}
.cas.c40 img{width:32px;height:32px;object-fit:contain}
.cas.c70 img{width:128px;height:128px;object-fit:contain}
.cas.c40.mob img{width:64px;height:64px;max-width:none;object-fit:cover;object-position:50% 62%}
.cas.c70.mob img{width:176px;height:176px;max-width:none;object-fit:contain;margin-top:14px}
.cas.c40.legendario,.cas.c70.legendario{box-shadow:0 0 8px rgba(255,164,52,.25)}
a.o,a.m,a.dg,a.sk,a.hab,a.se,a.zo{display:inline-flex;align-items:center;gap:7px;vertical-align:middle;margin:1px 4px 1px 0}
a.pococomun span{color:var(--pococomun)}a.raro span{color:var(--raro)}a.epico span{color:var(--epico)}
a.legendario span{color:var(--legendario)}
a.m.jefe span{color:var(--carmesi2)}a.m.elite span{color:#e09a5a}
a:hover span{text-decoration:underline}
.cant{font-family:"Jersey15",serif;color:var(--oro)}
img.st{width:22px;height:22px;object-fit:contain;vertical-align:-4px;margin-right:5px}

/* ------------------------------------------------ cabecera de las fichas: casilla grande, tooltip del juego y ficha */
.cabeza{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap;margin:6px 0 10px}
.tooltip{min-width:260px;max-width:400px;padding:4px 8px;border:18px solid transparent;
border-image:url("img/HD/ui/tooltip.png") 9 8 9 9 fill/18px 16px 18px 18px}
.tooltip p{margin:1px 0;font-size:20px;text-shadow:1px 1px 0 #000,-1px 0 0 #000}
.tooltip p.b{font-family:"Jersey15",serif;font-size:23px}
.ficha{border:18px solid transparent;border-image:url("img/HD/ui/panel.png") 9 8 9 9 fill/18px 16px 18px 18px;
border-collapse:separate;border-spacing:0}
.ficha th{text-align:left;color:var(--oro);padding:2px 14px 2px 0;font-size:20px;vertical-align:top;white-space:nowrap;
text-shadow:1px 1px 0 #000}
.ficha td{padding:2px 0;font-family:"Jersey15",serif;font-size:20px;text-shadow:1px 1px 0 #000}

/* ------------------------------------------------ tablas: panel con el fondo en mosaico */
table{border-collapse:collapse}
.envoltura{overflow-x:auto;margin:4px 0 14px;border:18px solid transparent;
border-image:url("img/HD/ui/panel.png") 9 8 9 9 fill/18px 16px 18px 18px;
background:url("img/HD/ui/fondo_panel.png") 0 0/64px 64px;background-clip:padding-box}
.tabla{width:100%}
.tabla th{color:var(--oro);text-align:left;padding:4px 8px;white-space:nowrap;font-size:20px;text-shadow:1px 1px 0 #000;
background:rgba(8,6,10,.6);border-bottom:2px solid var(--carmesi)}
.tabla th[data-t]{cursor:pointer;user-select:none}.tabla th[data-t]:hover{color:var(--oro2)}
.tabla th.asc::after{content:" \25B2"}.tabla th.desc::after{content:" \25BC"}
.tabla td{padding:3px 8px;border-bottom:1px solid rgba(90,70,60,.35);vertical-align:middle;text-shadow:1px 1px 0 #000}
.tabla tbody tr:hover td{background:rgba(222,200,160,.07)}
.mini{margin:6px 0;border:18px solid transparent;border-image:url("img/HD/ui/panel.png") 9 8 9 9 fill/18px 16px 18px 18px}
.mini th,.mini td{padding:1px 8px;font-family:"Jersey15",serif}.mini th{color:var(--oro)}
.filtros{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:6px 0 0}
.filtros input{font-size:18px}.filtros input[type=number]{width:84px}
.cuenta{color:var(--tenue)}.cuenta::after{content:" filas"}
.saltos{margin:6px 0 10px;line-height:1.6}

/* ------------------------------------------------ listas y tarjetas */
main ul{padding-left:6px;list-style:none}main ul li{margin:4px 0}
main ol{padding-left:28px}
.piezas{display:flex;flex-wrap:wrap;gap:6px}.piezas li{margin:0;padding:2px 10px 2px 2px;
border:9px solid transparent;border-image:url("img/HD/ui/panel.png") 9 8 9 9 fill/9px 8px 9px 9px}
.piezas li.actual{border-image-source:url("img/HD/ui/panel_mision.png")}
.tarjetas,.cartas{list-style:none;padding:0;display:grid;gap:12px}
.tarjetas{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.cartas{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));position:relative;z-index:1}
.tarjetas a,.cartas a{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 6px;text-align:center;
border:18px solid transparent;border-image:url("img/HD/ui/panel.png") 9 8 9 9 fill/18px 16px 18px 18px;
font-family:"Jersey15",serif;font-size:25px;color:var(--oro);text-shadow:2px 2px 0 #000}
.tarjetas a:hover,.cartas a:hover{border-image-source:url("img/HD/ui/panel_mision.png");color:#fff;
filter:drop-shadow(0 0 8px rgba(214,70,60,.45))}
.tarjetas small,.cartas small{color:var(--tenue);font-size:19px}
.chip{display:inline-block;margin:3px}
.pnjs{display:grid;grid-template-columns:repeat(auto-fill,minmax(380px,1fr));gap:10px}
.pnj{display:flex;gap:12px;align-items:flex-start;border:18px solid transparent;
border-image:url("img/HD/ui/panel.png") 9 8 9 9 fill/18px 16px 18px 18px}
.pnj p{margin:4px 0;color:var(--tenue);font-size:18px}
details{margin:8px 0;padding:2px 8px;border:18px solid transparent;border-image:url("img/HD/ui/panel.png") 9 8 9 9 fill/18px 16px 18px 18px}
summary{cursor:pointer;color:var(--oro2);font-size:23px;text-shadow:1px 1px 0 #000}

/* ------------------------------------------------ portada: menú del juego con brasas */
.portada main.ventana{max-width:1240px}
.portada-logo{text-align:center;margin:-10px 0 10px;position:relative;z-index:1}
.portada-logo img{width:440px;height:237px;max-width:100%}
.portada-logo .lema{display:block;font-size:40px;margin-top:-6px}
.portada-logo .sub{margin:4px 0 0;color:var(--tenue);font-size:22px}
.brasas{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.brasas i{position:absolute;bottom:-12px;left:var(--x);width:4px;height:4px;background:#ffb347;opacity:0;
box-shadow:0 0 6px 2px rgba(255,120,40,.6);animation:brasa var(--d) linear var(--r) infinite}
.brasas i:nth-child(3n){width:2px;height:2px;background:#ff7a3c}
@keyframes brasa{0%{transform:translate(0,0);opacity:0}10%{opacity:.9}60%{transform:translate(18px,-55vh)}
100%{transform:translate(-14px,-105vh);opacity:0}}
@media (prefers-reduced-motion:reduce){.brasas{display:none}}

footer{text-align:center;color:var(--tenue);padding:10px 16px 26px;text-shadow:1px 1px 0 #000}
footer .lema{font-size:24px}
@media(max-width:760px){main.ventana{margin:16px 4px;padding:20px 6px;border-width:20px}
.titulo{min-width:0;padding:8px 10px 0}h1{font-size:30px}.logo img{width:110px;height:59px}.lema{font-size:20px}
.pnjs{grid-template-columns:1fr}}