/* Interfaz de Crónicas de Aurora: mundo isométrico a pantalla completa con ventanas
   de marco azul al estilo de los MMORPG clásicos. */
:root{
  --ink:#2a1e12; --ink-soft:#6e5c44; --panel:rgba(236,226,202,.96); --panel-2:#e2d3b2;
  --frame:#6b4f30; --title1:#5e4329; --title2:#2e2016; --night:#16241b;
  --hp:#44b65a; --hp-low:#e0533f; --sp:#3b86dc; --bexp:#e2a73a; --jexp:#9a6fd6; --gold:#9a6a12; --bad:#b2381f; --good:#2f7f3e;
  --font-ui:"Signika","Trebuchet MS",system-ui,sans-serif; --font-title:"Grenze Gotisch",Georgia,serif;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%;margin:0}
body{background:var(--night);color:var(--ink);font:14px var(--font-ui);overflow:hidden;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
input{-webkit-user-select:text;user-select:text}
#game{position:fixed;inset:0}
#c{display:block;width:100%;height:100%;touch-action:none}
#game:not(.en-juego) .juego{display:none}
.hud{position:absolute}
.win,.panel{background:var(--panel);border:1px solid var(--frame);border-radius:6px;box-shadow:0 6px 20px rgba(32,23,12,.35)}
.tb{background:linear-gradient(var(--title1),var(--title2));color:#fff;font-weight:600;font-size:12px;letter-spacing:.03em;padding:4px 8px;border-radius:5px 5px 0 0;display:flex;justify-content:space-between;align-items:center;gap:8px}
.tb .x{background:none;border:0;color:#fff;font:700 15px/1 var(--font-ui);cursor:pointer;padding:0 2px}
.who .gmtag,.gmtag{font-size:10px;background:#ffd27a;color:#5a3a06;border-radius:3px;padding:0 4px;font-size:10px;margin-left:4px}
.btn{font:600 12.5px var(--font-ui);color:var(--ink);background:linear-gradient(#fdfefe,#e9e2d8);border:1px solid var(--frame);border-radius:4px;padding:5px 10px;cursor:pointer;white-space:nowrap}
.btn:hover{background:linear-gradient(#ffffff,#f0ebe3)}
.btn.primary{background:linear-gradient(#caaa80,#96754a);color:#fff;border-color:#7d603a}
.btn.primary:hover{background:linear-gradient(#d1b590,#a68356)}
.btn:disabled{opacity:.5;cursor:default}
button:focus-visible,input:focus-visible{outline:2px solid #f0b43c;outline-offset:1px}

/* estado */
#status{left:calc(10px + env(safe-area-inset-left,0px));top:calc(10px + env(safe-area-inset-top,0px));width:236px}
.sbody{padding:6px 9px 9px;display:grid;gap:4px}
.who{display:flex;justify-content:space-between;align-items:baseline;gap:6px}
.who b{font-size:14px}
.who span{font-size:11.5px;color:var(--ink-soft);text-align:right}
.row{display:flex;justify-content:space-between;font-size:11px;color:var(--ink-soft);font-variant-numeric:tabular-nums;margin-top:1px}
.row b{color:var(--ink);font-weight:600}
.meter{height:9px;border-radius:3px;background:#e1dbd4;overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.18)}
.meter i{display:block;height:100%;width:0;transition:width .15s}
.meter.thin{height:6px}
#hpF{background:linear-gradient(#6fd383,var(--hp))}
#hpF.low{background:linear-gradient(#f07a62,var(--hp-low))}
#chpF{background:linear-gradient(#fff07a,#f2c80a)} /* CHP: barra de combate PVP (amarilla, sobre el HP) */
#spF{background:linear-gradient(#d1b692,var(--sp))}
#bxF{background:var(--bexp)}
#jxF{background:var(--jexp)}
.zeny{font-size:11.5px;color:var(--gold);font-weight:600;font-variant-numeric:tabular-nums}

#mapwin{right:calc(10px + env(safe-area-inset-right,0px));top:calc(10px + env(safe-area-inset-top,0px));width:146px}
#mm{display:block;width:138px;height:76px;margin:4px auto}
.place{text-align:center;font-size:11px;color:var(--ink-soft);padding:0 4px 5px}

#target{left:50%;transform:translateX(-50%);top:calc(10px + env(safe-area-inset-top,0px));width:190px;padding:6px 9px 8px;display:grid;gap:4px}
#target .tn{font-size:12.5px;font-weight:600;display:flex;justify-content:space-between}
#target .tn span{color:var(--ink-soft);font-weight:400}
#tgF{background:linear-gradient(#f07a62,#c43a2c)}

/* chat */
#log{left:calc(10px + env(safe-area-inset-left,0px));bottom:calc(10px + env(safe-area-inset-bottom,0px));width:min(400px,calc(100vw - 32px));display:flex;flex-direction:column;border-radius:6px;background:rgba(33,24,13,.58);overflow:hidden}
#log .lineas{height:128px;overflow-y:auto;overflow-x:hidden;display:block;padding:6px 9px 4px;font-size:12px;line-height:1.35;color:#f3eee8;-webkit-user-select:text;user-select:text;scrollbar-width:thin;scrollbar-color:rgba(240,217,160,.45) transparent;overscroll-behavior:contain}
#log .lineas .m{margin-bottom:1px}
#log .lineas::-webkit-scrollbar{width:7px}#log .lineas::-webkit-scrollbar-thumb{background:rgba(240,217,160,.4);border-radius:4px}
#log .m{text-shadow:0 1px 1px rgba(0,0,0,.6);overflow-wrap:anywhere}
#log .sis{color:#ffe39a}
#log .exp{color:#ddd0bf}
#log .obj{color:#a6f0b4}
#log .aviso{color:#ffa596}
#log .anuncio{color:#ffd27a;font-weight:700}
#log .chat b{color:#e9e1d7;font-weight:600}
#log .chat.gm b{color:#ffd27a}
#fChat{margin:0;border-top:1px solid rgba(255,255,255,.12)}
#chatIn{width:100%;border:0;background:rgba(255,255,255,.08);color:#fff;font:13px var(--font-ui);padding:6px 9px}
#chatIn::placeholder{color:rgba(240,234,226,.55)}
#chatIn:focus{background:rgba(255,255,255,.16);outline:none}

/* barra de atajos */
#bar{right:calc(10px + env(safe-area-inset-right,0px));bottom:calc(10px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column-reverse;gap:6px;padding:6px;align-items:stretch}
#slots{display:flex;flex-direction:column-reverse;gap:4px}
#slots .fila{display:flex;gap:4px}
#bar .sep{display:none}
.slot{width:42px;height:42px;position:relative;border:1px solid var(--frame);border-radius:5px;background:linear-gradient(#f8f6f3,#e8e1d7);padding:0;cursor:pointer;display:grid;place-items:center;overflow:hidden}
.slot svg{width:28px;height:28px;border-radius:5px}
.slot.vacio{background:linear-gradient(#f2ede7,#e1dad0);opacity:.75}
.f2 .slot{width:42px;height:36px}
.f2 .slot svg{width:24px;height:24px}
body.asignando .slot{outline:2px dashed #f0b43c;outline-offset:-2px;animation:pulsoSlot 1s ease-in-out infinite}
@keyframes pulsoSlot{50%{box-shadow:0 0 0 3px rgba(240,180,60,.45)}}
.slot .k{position:absolute;left:3px;top:1px;font-size:10px;font-weight:700;color:var(--ink-soft)}
.slot .cnt{position:absolute;right:3px;bottom:1px;font-size:10.5px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.slot .cd{position:absolute;left:0;right:0;bottom:0;height:0;background:rgba(61,45,23,.55)}
.slot.low svg{opacity:.4}
.sep{width:1px;align-self:stretch;background:var(--frame);opacity:.5}
.menu{display:flex;gap:4px;justify-content:space-between}
.mbtn{flex:1;min-width:0;height:34px;font:600 11px var(--font-ui);color:var(--ink);border:1px solid var(--frame);border-radius:5px;background:linear-gradient(#f8f6f3,#e8e1d7);cursor:pointer;position:relative;padding:0 2px}
.mbtn small{display:block;font-size:9.5px;color:var(--ink-soft);font-weight:400}
.mbtn.alert::after{content:"";position:absolute;right:4px;top:4px;width:8px;height:8px;border-radius:50%;background:#e8573f;box-shadow:0 0 0 2px #fff}

/* ventanas */
.win{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(380px,calc(100vw - 32px));max-height:min(78vh,580px);display:flex;flex-direction:column;font-size:13px;z-index:5}
.wbody{padding:10px 12px 12px;overflow:auto;display:grid;gap:10px}
.say{margin:0;line-height:1.45}
.acts{display:flex;flex-wrap:wrap;gap:6px}
.ic{width:26px;height:26px;flex:none;display:grid;place-items:center;background:#fff;border:1px solid #ded4c8;border-radius:4px}
.ic svg{width:20px;height:20px}
.srow,.irow{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid #e6e0d7}
.srow:last-child,.irow:last-child{border-bottom:0}
.nm{flex:1;min-width:0;font-weight:600}
.nm small{display:block;font-weight:400;color:var(--ink-soft);font-size:11.5px}
.pr{font-weight:600;color:var(--gold);font-variant-numeric:tabular-nums;white-space:nowrap}
.sacts{display:flex;gap:4px}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.scol{display:grid;gap:5px;align-content:start}
.srow2{display:flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums}
.srow2 .lab{width:40px;white-space:nowrap;font-weight:700;font-size:12px;color:var(--title2);letter-spacing:.04em}
.srow2 .val{flex:1}
.srow2 em{font-style:normal;color:var(--good);font-size:11.5px;margin-left:3px}
.srow2 em.neg{color:var(--bad)}
.plus{width:24px;height:22px;border:1px solid var(--frame);border-radius:4px;background:linear-gradient(#fdfefe,#e9e2d8);font:700 13px/1 var(--font-ui);color:var(--ink);cursor:pointer}
.plus:disabled{opacity:.35;cursor:default}
.pts,.raza-info{background:var(--panel-2);border-radius:4px;padding:6px 8px;font-size:12.5px}
.hint{margin:0;color:var(--ink-soft);font-size:11.5px;line-height:1.45}
.eqs{display:grid;gap:6px}
.eq{display:flex;align-items:center;gap:8px;background:var(--panel-2);border-radius:4px;padding:5px 8px}
.eq .lab{width:44px;font-weight:700;font-size:11.5px;color:var(--title2);letter-spacing:.04em}
.empty{color:var(--ink-soft);font-style:italic}

#banner{position:absolute;left:50%;top:34%;transform:translate(-50%,-50%);font-family:var(--font-title);font-weight:800;font-size:clamp(30px,7vw,52px);color:#ffe7a0;text-shadow:0 2px 0 #7a4a10,0 0 18px rgba(255,190,80,.7),0 4px 14px rgba(0,0,0,.6);white-space:nowrap;pointer-events:none;opacity:0;z-index:6}
#banner.show{animation:pop 2.4s ease-out forwards}
@keyframes pop{0%{opacity:0;transform:translate(-50%,-50%) scale(.7)}12%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}20%{transform:translate(-50%,-50%) scale(1)}78%{opacity:1}100%{opacity:0;transform:translate(-50%,-60%)}}

/* pantallas de acceso y creación */
.pantalla{position:absolute;inset:0;display:flex;flex-direction:column;padding:16px;overflow:auto;background:radial-gradient(ellipse at center,rgba(29,21,11,.35),rgba(29,21,11,.78));z-index:10}
.pantalla>.card{margin:auto;flex-shrink:0}
.card{width:min(400px,100%);background:var(--panel);border:1px solid var(--frame);border-radius:8px;box-shadow:0 10px 40px rgba(0,0,0,.45);overflow:hidden}
.card.ancha{width:min(880px,100%)}
.hero{padding:20px 20px 12px;background:linear-gradient(#84663f,#664a27);color:#fff;text-align:center}
.hero.chico{padding:10px 16px}
.hero h1{margin:0;font-family:var(--font-title);font-weight:800;font-size:44px;line-height:1;color:#ffe7a0;text-shadow:0 2px 0 #6a3f0c;text-wrap:balance}
.hero h2{margin:0;font-family:var(--font-title);font-weight:800;font-size:28px;color:#ffe7a0;text-shadow:0 2px 0 #6a3f0c}
.hero p{margin:6px 0 0;font-size:13px;color:#e6ddd0}
.cb{padding:16px 20px 18px;display:grid;gap:12px;margin:0}
label{font-size:12px;font-weight:600;color:var(--ink-soft)}
.card input{width:100%;margin-top:4px;font:600 15px var(--font-ui);padding:8px 10px;border:1px solid var(--frame);border-radius:4px;color:var(--ink);background:#fff}
.card .acts .btn{font-size:14px;padding:8px 14px}
.err{margin:0;color:var(--bad);font-size:12.5px;font-weight:600}
.estado{margin:0;font-size:12px;color:var(--ink-soft)}
.estado.ok{color:var(--good)}
.crear{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:16px;padding:16px}
.razas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;align-content:start}
.raza{display:grid;justify-items:center;gap:2px;padding:6px 2px 8px;border:1px solid #ded4c8;border-radius:6px;background:linear-gradient(#fff,#f3eee8);cursor:pointer;font:600 12px var(--font-ui);color:var(--ink)}
.raza canvas{width:56px;height:64px}
.raza[aria-pressed="true"]{border-color:var(--title2);background:linear-gradient(#f0eae2,#e5dbce);box-shadow:inset 0 0 0 1px var(--title2)}
.detalle{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px;align-items:start}
#rPrevia{width:150px;height:160px;background:radial-gradient(circle at 50% 70%,#eee7df,#f5f2ee 70%);border:1px solid #e5ddd3;border-radius:8px}
.info{display:grid;gap:8px;min-width:0}
.info h3{margin:0;font-family:var(--font-title);font-size:28px;font-weight:800;color:var(--title2);line-height:1}
.info p{margin:0;line-height:1.45;font-size:13px}
.rasgo span{font-size:11px;font-weight:700;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.06em;margin-right:4px}
.rasgo b{color:var(--title2)}
.rstats{display:flex;flex-wrap:wrap;gap:4px}
.rstats span{font-size:11.5px;font-weight:600;padding:2px 6px;border-radius:3px;background:var(--panel-2);font-variant-numeric:tabular-nums}
.rstats .pos{color:var(--good)}
.rstats .neg{color:var(--bad)}
.colores{display:flex;align-items:center;gap:8px}
.colores>span{width:46px;flex:none;font-size:12px;font-weight:600;color:var(--ink-soft)}
.sws{display:flex;gap:6px;flex-wrap:wrap}
.sexo{display:flex;gap:6px}.sexo .btn{padding:4px 10px;font-size:12px}.sexo .btn[aria-pressed="true"]{background:linear-gradient(#e7c56a,#c9a23a);border-color:#8a6a1e;color:#2a1c08;font-weight:700}
.sw{width:24px;height:24px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #d5ccc1;cursor:pointer;padding:0}
.sw[aria-pressed="true"]{box-shadow:0 0 0 2px var(--title2)}

@media (max-width:760px){
  .crear{grid-template-columns:1fr}
  .detalle{grid-template-columns:110px minmax(0,1fr)}
  #rPrevia{width:110px;height:118px}
}
@media (max-width:640px){
  #status{width:206px}
  #buffs{left:calc(222px + env(safe-area-inset-left,0px));max-width:calc(100vw - 350px)}
  #slots .fila{gap:3px}
  .f2 .slot,.slot{width:31px;height:31px}
  .f2 .slot svg,.slot svg{width:20px;height:20px}
  #avisoBarra{bottom:calc(128px + env(safe-area-inset-bottom,0px))}
  #mapwin{width:112px}
  #mm{width:104px;height:57px}
  #target{top:calc(184px + env(safe-area-inset-top,0px));width:180px}
  #bar{right:auto;left:50%;transform:translateX(-50%);padding:5px;gap:5px}
  #slots,.menu{gap:4px}
  .mbtn{height:28px;font-size:10px}
  .mbtn small{display:none}
  #log{bottom:calc(122px + env(safe-area-inset-bottom,0px))}
  #log .lineas{height:64px;font-size:11px}
  .chat-asa{width:28px;height:28px}
  .hero h1{font-size:36px}
}
@media (prefers-reduced-motion:reduce){#banner.show{animation:fade 2.4s linear forwards}@keyframes fade{0%,80%{opacity:1}100%{opacity:0}}.meter i{transition:none}}

/* equipos por grado y elemento */
#winInv{width:min(720px,calc(100vw - 32px));max-height:min(92vh,760px)}
.sec{margin:2px 0 -4px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--title2);display:flex;gap:6px;align-items:baseline}
.sec span{color:var(--ink-soft);font-weight:400;letter-spacing:0}
.gname{font-weight:700;text-shadow:0 1px 0 rgba(0,0,0,.18)}
.gbadge{display:inline-block;font-size:10px;font-weight:700;color:#fff;background:var(--c);border-radius:3px;padding:0 5px;margin-right:2px;text-shadow:0 1px 0 rgba(0,0,0,.25)}
.grado-ic{border-color:var(--c);box-shadow:inset 0 0 0 1px var(--c)}
.elem{display:flex;align-items:center;gap:6px;margin-top:3px;font-size:11px;color:var(--c);font-variant-numeric:tabular-nums}
.elem b{white-space:nowrap;font-weight:700}
.elem .barra{flex:none;width:70px;height:4px;border-radius:2px;background:#e6e0d9;overflow:hidden}
.elem .barra i{display:block;height:100%;background:var(--c)}
.motivo{margin:-4px 0 4px 34px;color:var(--bad)}
.eq .nm small{display:block}
.eq .btn{margin-left:auto}
#banner{color:#ffe7a0}

/* grupo y mundo */
#grupoWin{right:calc(10px + env(safe-area-inset-right,0px));top:calc(158px + env(safe-area-inset-top,0px));width:176px}
#grupoLista{padding:6px 8px 8px;display:grid;gap:6px}
.gm-row{display:grid;gap:2px}
.gm-row .gm-top{display:flex;justify-content:space-between;gap:6px;font-size:12px}
.gm-row .gm-top span{color:var(--ink-soft);font-variant-numeric:tabular-nums}
.gm-row small{font-size:10.5px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gm-row.yo b{color:var(--title2)}
#log .grupo b,#log .grupo{color:#8af0a8}
#banner small{display:block;font:600 15px var(--font-ui);letter-spacing:.08em;text-transform:uppercase;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.7);text-align:center;margin-top:4px}
@media (max-width:640px){#grupoWin{top:calc(110px + env(safe-area-inset-top,0px));width:132px}}
.lvtag{flex:none;min-width:58px;text-align:center;font-size:11.5px;font-weight:700;border-radius:4px;padding:3px 5px;background:var(--panel-2);color:var(--title2);font-variant-numeric:tabular-nums}
.lvtag.mio{background:#ffe7a0;color:#7a4a06}
.peligro{color:var(--bad);font-weight:600}
.facil{color:var(--ink-soft)}
.ok{color:var(--good);font-weight:600}
.refino{display:inline-block;font-weight:800;color:#40301b;background:var(--r);border-radius:3px;padding:0 4px;font-size:11.5px;text-shadow:none;box-shadow:0 0 6px var(--r)}
.refino.arcoiris{background:linear-gradient(90deg,#ff5a5a,#ffd84a,#5fd06f,#c7a477,#a46bff,#ff5ad8);animation:arco 2s linear infinite;background-size:200% 100%}
@keyframes arco{to{background-position:200% 0}}
.pr .riesgo{display:block;font-size:10.5px;font-weight:600;color:var(--good)}
.pr .riesgo.alto{color:var(--bad)}
.pr{text-align:right}

/* clanes */
.win.ancha{width:min(540px,calc(100vw - 32px))}
.tabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid #e5ddd3;padding-bottom:6px}
.tab{font:600 12px var(--font-ui);border:1px solid transparent;background:none;color:var(--ink-soft);padding:5px 9px;border-radius:4px;cursor:pointer}
.tab[aria-selected="true"]{background:var(--panel-2);color:var(--title2);border-color:#ded5ca}
.tab-body{display:grid;gap:8px}
.clan-cab{display:flex;align-items:center;gap:10px;background:var(--panel-2);border-radius:6px;padding:8px 10px}
.clan-cab>div:nth-child(2){flex:1;min-width:0}
.clan-cab b{display:block;font-size:15px}
.clan-cab small{color:var(--ink-soft);font-size:11.5px}
.clan-num{display:flex;gap:10px;text-align:center;font-size:10.5px;color:var(--ink-soft)}
.clan-num b{display:block;font-size:16px;color:var(--ink);font-variant-numeric:tabular-nums}
.emblema{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:5px 5px 10px 10px;background:var(--e);color:#fff;font:800 11px var(--font-ui);box-shadow:inset 0 0 0 2px rgba(255,255,255,.35),0 1px 2px rgba(0,0,0,.3);vertical-align:middle;flex:none}
.emblema.g{width:36px;height:38px;font-size:18px}
.lista{display:grid}
.fila-m,.fila-h{display:flex;align-items:center;gap:8px;padding:6px 2px;border-bottom:1px solid #eae4dc}
.fila-m:last-child,.fila-h:last-child{border-bottom:0}
.fila-m.yo{background:#f6f2ed}
.fila-m.enemigo .nm{color:var(--bad)}
.pieza{width:24px;text-align:center;font-size:20px;line-height:1;color:var(--title2);flex:none}
.punto{display:inline-block;width:7px;height:7px;border-radius:50%;background:#cec8c1;vertical-align:middle;margin-left:2px}
.punto.on{background:var(--good)}
.sel-rango{font:12px var(--font-ui);border:1px solid var(--frame);border-radius:4px;padding:3px;background:#fff;color:var(--ink)}
.btn.mini{padding:3px 8px;font-size:11.5px}
.btn.peligro{background:linear-gradient(#f07a62,#c43a2c);color:#fff;border-color:#9a2a1a}
.nivel{color:var(--gold);letter-spacing:1px;font-size:11px}
.tesoro{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;background:linear-gradient(#fff6dc,#f6e6b8);border:1px solid #e0c070;border-radius:6px;padding:8px 10px}
.tesoro span{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#7a5a12}
.tesoro b{font-size:16px;color:#7a4a06;font-variant-numeric:tabular-nums;flex:1}
.donar{display:flex;gap:6px;margin:0}
.donar input{width:120px;font:13px var(--font-ui);padding:4px 6px;border:1px solid #d8b860;border-radius:4px}
.registro{display:grid;gap:3px;font-size:11.5px;color:var(--ink-soft);max-height:150px;overflow:auto}
.registro time{font-variant-numeric:tabular-nums;color:var(--title2);margin-right:4px}
.rank{width:100%;border-collapse:collapse;font-size:12.5px}
.rank th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);padding:4px;border-bottom:1px solid #e5ddd3}
.rank td{padding:5px 4px;border-bottom:1px solid #eee9e2;font-variant-numeric:tabular-nums}
.rank td small{display:block;color:var(--ink-soft);font-size:10.5px}
.rank tr.mio td{background:#fff6dc}
.crear-clan{display:grid;gap:6px;margin:0;padding:8px 0;border-top:1px solid #eae4dc}
.crear-clan input{font:600 14px var(--font-ui);padding:7px 9px;border:1px solid var(--frame);border-radius:4px}
.colores-clan{display:flex;gap:6px;flex-wrap:wrap}
#log .clan{color:#ffcf7a}
@media (max-width:640px){.mbtn{width:40px}.clan-num{gap:6px}}

/* efectos activos */
#buffs{left:calc(256px + env(safe-area-inset-left,0px));top:calc(10px + env(safe-area-inset-top,0px));display:flex;flex-wrap:wrap;gap:4px;max-width:330px;pointer-events:auto}
#buffs .bf{position:relative;width:30px;height:30px;border-radius:6px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.4)}
#buffs .bf.ley{box-shadow:0 0 0 2px #f2c14e,0 0 8px rgba(242,193,78,.7)}
#buffs .bic svg{width:30px;height:30px;display:block}
#buffs .bf i{position:absolute;left:0;right:0;bottom:0;font:700 9.5px var(--font-ui);font-style:normal;color:#fff;text-align:center;background:linear-gradient(90deg,rgba(30,22,12,.75) var(--p),rgba(30,22,12,.45) var(--p));text-shadow:0 1px 1px #000}
#avisoBarra{right:calc(10px + env(safe-area-inset-right,0px));bottom:calc(150px + env(safe-area-inset-bottom,0px));background:rgba(33,24,13,.85);color:#ffe39a;font:600 12px var(--font-ui);padding:6px 10px;border-radius:6px;max-width:320px}

/* ventana de habilidades */
#winHab{background:#f4f0eb;width:min(600px,calc(100vw - 24px));top:calc(50% - 56px);height:min(calc(100vh - 210px),680px);max-height:none}
#habBody{display:flex;flex-direction:column;gap:8px;min-height:0;overflow:hidden}
.tab.on{background:var(--panel-2);color:var(--title2);border-color:#ded5ca}
.tab .punto{display:inline-grid;place-items:center;min-width:16px;height:16px;border-radius:8px;background:#e8573f;color:#fff;font:700 10px var(--font-ui);font-style:normal;margin-left:3px}
.hcab{display:flex;justify-content:space-between;align-items:center;gap:8px}
.hpts{font-size:12.5px;color:var(--ink-soft)}
.hpts b{font-size:15px;color:var(--ink)}
.hpts.hay b{color:#c0392b}
.hbuscar{font:13px var(--font-ui);border:1px solid #dad1c6;border-radius:4px;padding:4px 8px;width:160px}
.hlista{overflow:auto;min-height:0;flex:1;padding-right:2px}
.hesc{margin:10px 0 2px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--title2);border-bottom:1px solid #e5ddd3;padding-bottom:3px}
.hesc:first-child{margin-top:0}
.hesc.bloq{color:#b4aa9e}
.hesc .nuevo{color:#c0392b;text-transform:none;letter-spacing:0;font-weight:700}
.hfila{display:flex;align-items:flex-start;gap:9px;padding:7px 2px;border-bottom:1px solid #ece7e1}
.hfila.bloq{opacity:.55}
.hfila.tiene{background:linear-gradient(90deg,rgba(196,161,114,.07),transparent)}
.hic svg{width:36px;height:36px;display:block}
.hic[draggable="true"]{cursor:grab}
.hfila .nm{flex:1;min-width:0;display:grid;gap:1px}
.hfila .nm small{font-size:11.5px;color:var(--ink-soft);line-height:1.35}
.hfila .nm small.tipo{color:#827360;font-weight:600}
.hfila .nm small.sig{color:#3d7a3d}
.rango{font-size:10px;letter-spacing:1px;color:#e2a72e}
.hacts{display:flex;flex-direction:column;gap:4px;align-items:stretch}
.btn.mas{font-size:16px;line-height:1;padding:3px 10px;color:#2f6b2f}
.leys{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:4px}
.ley{border:1px solid #e5ddd3;border-radius:8px;padding:8px;display:flex;flex-direction:column;gap:5px;background:linear-gradient(#fffdf6,#f6efdc)}
.ley.elegida{border-color:#e2a72e;box-shadow:0 0 0 2px rgba(242,193,78,.5)}
.ley.otra,.ley.bloq{opacity:.5;background:#f0eeea}
.ley .lcab{display:flex;align-items:center;gap:6px}
.ley .lcab b{font-size:12.5px;line-height:1.2}
.ley .hic svg{width:30px;height:30px}
.ley p{margin:0;font-size:11.5px;line-height:1.35;color:var(--ink)}
.ley small{font-size:10.5px;color:var(--ink-soft)}
.ley .lacts{margin-top:auto;display:flex;gap:5px;align-items:center;flex-wrap:wrap}
.ley .ok{color:#2f8a3a;font-weight:700;font-size:12px}
@media (max-width:640px){.leys{grid-template-columns:1fr}.hbuscar{width:110px}}
.stats .scol+.scol .srow2 .lab{width:76px}
.stats .scol+.scol .srow2 .val{text-align:right}

/* cuentas recientes (inicio de sesión) */
.recientes{display:grid;gap:4px;margin-top:-4px}
.recientes>span{font-size:11px;font-weight:700;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.06em}
#recLista{display:flex;flex-wrap:wrap;gap:6px}
.rec{display:inline-flex;align-items:center;border:1px solid #ded4c8;border-radius:999px;background:linear-gradient(#fff,#f3eee8);overflow:hidden}
.rec button{border:0;background:none;font:600 12.5px var(--font-ui);color:var(--ink);cursor:pointer;padding:4px 4px 4px 10px}
.rec button.olvidar{color:var(--ink-soft);padding:4px 8px 4px 4px;font-weight:700}
.rec button.olvidar:hover{color:var(--bad)}
.rec.activa{border-color:var(--title2);background:linear-gradient(#f0eae2,#e5dbce)}

/* selección de personaje */
.card.sel{width:min(940px,100%)}
.sel-hero{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px;text-align:left;padding:10px 18px}
.sel-hero p{margin:0}
.sel-cuerpo{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px;padding:16px}
.ranuras{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px;align-content:start}
.ranura{position:relative;display:grid;justify-items:center;gap:1px;padding:8px 6px 10px;border:1px solid #ded4c8;border-radius:8px;background:linear-gradient(#fff,#f3eee8);cursor:pointer;font:inherit;color:var(--ink);text-align:center;min-height:168px;align-content:start}
.ranura:hover{border-color:var(--frame)}
.ranura[aria-selected="true"]{border-color:var(--title2);background:linear-gradient(#f0eae2,#e5dbce);box-shadow:inset 0 0 0 1px var(--title2),0 3px 10px rgba(131,101,62,.25)}
.ranura canvas{width:76px;height:86px}
.ranura b{font-size:14px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ranura small{font-size:11.5px;color:var(--ink-soft)}
.ranura .nv{position:absolute;top:6px;left:6px;font-size:10.5px;font-weight:700;color:#fff;background:var(--title2);border-radius:3px;padding:1px 5px;font-variant-numeric:tabular-nums}
.ranura .cl{position:absolute;top:6px;right:6px;width:10px;height:10px;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.25)}
.ranura.vacia{border-style:dashed;background:rgba(255,255,255,.55);color:var(--title2);align-content:center;gap:4px}
.ranura.vacia .mas{font-size:30px;line-height:1;font-weight:300}
.ranura.vacia small{font-weight:600}
.ranura.bloq{cursor:default;opacity:.45}
.sel-detalle{display:grid;grid-template-columns:130px minmax(0,1fr);gap:12px;align-content:start;background:var(--panel-2);border-radius:8px;padding:12px}
#selPrevia{width:130px;height:138px;background:radial-gradient(circle at 50% 70%,#f5f2ed,#ebe4db 75%);border:1px solid #e0d7cc;border-radius:8px}
.sel-info{display:grid;gap:6px;min-width:0;align-content:start}
.sel-info h3{margin:0;font-family:var(--font-title);font-size:30px;font-weight:800;color:var(--title2);line-height:1;overflow-wrap:anywhere}
.sel-info .sub{font-size:13px;font-weight:600}
.sel-datos{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 10px;font-size:12.5px;margin:2px 0 4px}
.sel-datos dt{color:var(--ink-soft)}
.sel-datos dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.sel-info .acts .btn{font-size:14px;padding:8px 14px}
.btn.peligro{color:var(--bad);border-color:#d79a90;background:linear-gradient(#fff,#f7e3df)}
.btn.peligro.lleno{color:#fff;border-color:#8f2a1d;background:linear-gradient(#e0644f,#b23a28)}
.borrar-caja{display:grid;gap:6px;padding:8px;border:1px solid #e3b4ab;border-radius:6px;background:#fff6f4}
.borrar-caja p{margin:0;font-size:12.5px;line-height:1.4}
.borrar-caja input{font:600 14px var(--font-ui);padding:6px 8px;border:1px solid #d79a90;border-radius:4px;width:100%}
.sel-vacio{grid-column:1/-1;margin:0;font-size:13px;color:var(--ink-soft);line-height:1.5}
.sel-err{padding:0 16px 8px}
.sel-pie{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 16px;border-top:1px solid #e5ddd3;background:rgba(239,233,225,.6)}
.crear-hero{position:relative}
.crear-hero .volver{position:absolute;left:10px;top:50%;transform:translateY(-50%)}

/* menú del juego */
.win.chica{width:min(300px,calc(100vw - 32px))}
.sistema .btn{font-size:14px;padding:9px 12px;text-align:left}
.sis-quien{margin:0;font-size:13px;color:var(--ink-soft)}
.sis-quien b{color:var(--ink)}

@media (max-width:760px){
  .sel-cuerpo{grid-template-columns:1fr}
  .sel-detalle{order:-1}
  .ranuras{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
  .ranura{min-height:150px}
  .ranura canvas{width:64px;height:72px}
  .sel-detalle{grid-template-columns:96px minmax(0,1fr)}
  #selPrevia{width:96px;height:102px}
  .sel-pie .hint{display:none}
  .hero.crear-hero{padding-top:46px}
  .crear-hero .volver{top:8px;transform:none}
}
.err.ok{color:var(--good)}

/* armaduras, joyas, monturas y runas */
.eq .lab{width:58px}
.runa-caja{display:grid;gap:6px;padding:8px;border:1px solid var(--frame);border-radius:6px;background:#f3eee8}
.runa-caja>b{font-size:13px}
.runa-caja>small{font-size:11.5px;color:var(--ink-soft);line-height:1.4}
.runa-op{text-align:left;white-space:normal;border-left:4px solid var(--c)}
.runa-op small{display:block;font-weight:400;color:var(--ink-soft);font-size:11px}

/* misión activa y viaje a la siguiente ciudad */
#misionWin{left:calc(10px + env(safe-area-inset-left,0px));top:calc(212px + env(safe-area-inset-top,0px));width:236px;padding:7px 9px;display:grid;gap:2px;border-color:#c9a23a;box-shadow:0 0 0 1px rgba(242,193,78,.35),0 6px 20px rgba(32,23,12,.35)}
#misionWin b{font-size:12px;color:#8a5a0a}
#misionWin span{font-size:10.5px;font-weight:700;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.05em}
#misionWin p{margin:0;font-size:11.5px;line-height:1.35}
.srow.sig{background:linear-gradient(90deg,rgba(242,193,78,.22),transparent);border-radius:4px;padding-left:4px}
.lvtag.sig{background:#c9a23a;color:#fff}
.srow.ant{background:linear-gradient(90deg,rgba(185,152,108,.2),transparent);border-radius:4px;padding-left:4px}
.lvtag.ant{background:#b9986c;color:#fff}
@media (max-width:640px){#misionWin{top:calc(150px + env(safe-area-inset-top,0px));width:180px}}

/* ===== habilidades: hoja de ruta horizontal ===== */
#winHab{width:min(1180px,calc(100vw - 24px));height:min(calc(100vh - 190px),620px)}
#habBody{display:flex;flex-direction:column;gap:8px;overflow:hidden}
.hreglas{font-size:12px;color:var(--ink-soft);flex:1;text-align:center}
.hreglas .nuevo{color:#c0392b}
.ruta{flex:1;min-height:0;display:flex;gap:0;overflow-x:auto;overflow-y:auto;padding:0 4px 6px;scroll-behavior:smooth;overscroll-behavior:contain}
.hcol{flex:0 0 196px;display:flex;flex-direction:column;gap:6px;padding:0 6px;position:relative}
.hcol.ley{flex-basis:178px}
.hito{position:relative;display:grid;justify-items:center;gap:0;padding-top:2px;margin-bottom:2px}
.hito::before{content:"";position:absolute;left:-6px;right:-6px;top:15px;height:4px;background:#e5ddd3;z-index:0}
.hcol:not(.bloq) .hito::before{background:linear-gradient(90deg,#b9986c,#cfb28b)}
.hcol.hecha .hito::before{background:#4caf6a}
.hito .punto{position:relative;z-index:1;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:700 13px var(--font-ui);color:#fff;background:#b9986c;box-shadow:0 0 0 3px #f4f0eb}
.hcol.bloq .hito .punto{background:#cfc8bf;font-size:12px}
.hcol.hecha .hito .punto{background:#4caf6a}
.hcol.ley .hito .punto{background:linear-gradient(#f6d27a,#d9a52a);color:#5a3a00;font-size:15px}
.hcol.ley.bloq .hito .punto{background:#d8cfb8;color:#8a7a5a}
.hito b{font-size:12.5px;margin-top:3px}
.hito small{font-size:10.5px;color:var(--ink-soft);text-align:center;line-height:1.2;min-height:13px}
.hgrupo{display:flex;flex-direction:column;gap:3px;background:#fff;border:1px solid #e6e0d7;border-radius:6px;padding:5px}
.hcol.ley .hgrupo{background:#fffaf0;border-color:#ecd9a8}
.hcol.bloq .hgrupo{opacity:.55}
.hgt{display:flex;justify-content:space-between;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--title2);padding:0 2px 2px}
.hgt em{font-style:normal;color:#827360}
.hgt em.lleno{color:#2f8f46}
.hnodo{display:flex;align-items:center;gap:6px;padding:3px 4px;border-radius:5px;border:1px solid transparent;cursor:pointer;min-width:0}
.hnodo:hover{background:#f3eee8}
.hnodo.sel{border-color:var(--title2);background:#f0eae2}
.hnodo .hic{flex:none;width:28px;height:28px}
.hnodo .hic svg{width:28px;height:28px}
.hnodo .hn{flex:1;min-width:0;display:grid;line-height:1.15}
.hnodo .hn b{font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hnodo .hn i{font-style:normal;font-size:9.5px;letter-spacing:1px;color:#b9986c}
.hnodo.tiene{background:linear-gradient(90deg,rgba(196,161,114,.13),transparent)}
.hnodo.max .hn i{color:#2f8f46}
.hnodo.cerrada{opacity:.38}
.hnodo.apagada{opacity:.22}
.hnodo .mas{flex:none;width:22px;height:22px;padding:0;font-size:14px;line-height:1}
.hnodo .mas:disabled{visibility:hidden}
.hnodo.leyn .hn i{letter-spacing:0;color:#a0761a}
.hnodo.leyn.tiene{background:linear-gradient(90deg,rgba(242,193,78,.3),transparent)}
.hdet{flex:none;display:flex;align-items:flex-start;gap:10px;background:#fff;border:1px solid #e6e0d7;border-radius:6px;padding:8px 10px;min-height:86px}
.hdet .hic.grande,.hdet .hic.grande svg{width:44px;height:44px;flex:none}
.hdet-txt{flex:1;min-width:0;display:grid;gap:2px}
.hdet-txt b{font-size:14px}
.hdet-txt small{font-size:12px;color:var(--ink-soft);line-height:1.35}
.hdet-txt small.tipo{color:#827360;font-weight:600}
.hdet-txt small.sig{color:#3d7a3d}
.hdet-txt small.motivo{color:#c0392b}
.hdet-txt .rango{font-size:11px;letter-spacing:1px;color:#b9986c}
.hdet .ltag{font-size:10.5px;font-weight:700;color:#a0761a;background:#fff3d0;border-radius:3px;padding:1px 5px}
.hdet-acts{display:flex;flex-direction:column;gap:5px;align-items:stretch}
.hdet-acts .ok{color:#2f8f46;font-weight:700;font-size:12.5px;text-align:center}
.hdet-vacio{margin:auto 0}
@media (max-width:640px){
  #winHab{height:calc(100vh - 170px)}
  .hcol{flex-basis:168px}
  .hreglas{display:none}
  .hdet{flex-wrap:wrap}
  .hdet-acts{flex-direction:row;width:100%}
}
.hnodo{padding:2px 4px;gap:5px}
.hnodo .hic,.hnodo .hic svg{width:24px;height:24px}
.hgrupo{gap:1px;padding:4px}
.hcol{gap:5px}
.hito small{min-height:0}

/* barra del jefe legendario */
#jefeBar{left:50%;transform:translateX(-50%);top:calc(64px + env(safe-area-inset-top,0px));width:min(560px,calc(100vw - 520px));min-width:300px;display:grid;gap:3px;pointer-events:none}
#jefeBar .jb-nom{display:flex;justify-content:center;align-items:baseline;gap:8px;color:#ffe7a0;text-shadow:0 2px 3px rgba(0,0,0,.8)}
#jefeBar .jb-nom b{font-family:var(--font-title);font-size:26px;font-weight:800}
#jefeBar .jb-nom span{font-size:12.5px;color:#f4e6c0}
#jefeBar .jb-barra{position:relative;height:16px;border-radius:8px;background:rgba(15,10,10,.75);border:2px solid #c9a23a;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.5)}
#jefeBar .jb-barra i{position:absolute;inset:0 auto 0 0;background:linear-gradient(#e85a3a,#a82a1a);transition:width .3s}
#jefeBar.furia .jb-barra i{background:linear-gradient(#ff3a2a,#7a0a0a);animation:latido .8s ease-in-out infinite}
#jefeBar .jb-barra span{position:relative;display:block;text-align:center;font:700 10.5px/12px var(--font-ui);color:#fff;text-shadow:0 1px 2px #000}
@keyframes latido{50%{filter:brightness(1.5)}}
@media (max-width:760px){#jefeBar{top:calc(150px + env(safe-area-inset-top,0px));width:calc(100vw - 32px);min-width:0}#jefeBar .jb-nom b{font-size:20px}}
.srow.dominio .tit{display:inline;color:#8a5a0a;font-weight:600}
.srow.dominio .vivo{color:#c0392b;font-weight:700}
.srow.dominio .dormido{color:var(--ink-soft)}
.lvtag.ley{background:var(--c);color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.4);min-width:58px;text-align:center}

/* registro de daño por grupo al jefe */
#rankDano{right:calc(10px + env(safe-area-inset-right,0px));top:calc(212px + env(safe-area-inset-top,0px));width:250px;padding:7px 9px;display:grid;gap:4px;border-color:#c9a23a;pointer-events:none}
#rankDano>b{font-size:12px;color:#8a5a0a}
#rankDano>b span{font-weight:600;color:var(--ink-soft)}
#rankDano ol{margin:0;padding:0;list-style:none;display:grid;gap:3px}
#rankDano li{position:relative;display:flex;justify-content:space-between;gap:6px;font-size:11.5px;padding:2px 5px;border-radius:4px;background:#f2ede7;overflow:hidden}
#rankDano li i{position:absolute;inset:0 auto 0 0;background:rgba(185,152,108,.25)}
#rankDano li span,#rankDano li em{position:relative;font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#rankDano li em{font-weight:700}
#rankDano li.gana i{background:rgba(242,193,78,.45)}
#rankDano li.mio{outline:2px solid #4fbf6b}
#rankDano small{font-size:10.5px;color:var(--ink-soft)}
@media (max-width:640px){#rankDano{top:auto;bottom:calc(150px + env(safe-area-inset-bottom,0px));width:190px}}
#rankDano{background:#fffdf6;border:2px solid #c9a23a;border-radius:8px;box-shadow:0 0 0 1px rgba(242,193,78,.35),0 6px 20px rgba(32,23,12,.35)}

/* botones de zoom en el panel del mapa */
#mapwin .tb{display:flex;align-items:center;justify-content:space-between}
.zoom-ctl{display:flex;gap:4px}
.zoom-ctl button{width:22px;height:20px;padding:0;line-height:18px;font-size:15px;font-weight:800;border-radius:4px;border:1px solid rgba(255,255,255,.5);background:rgba(255,255,255,.18);color:#fff;cursor:pointer}
.zoom-ctl button:hover{background:rgba(255,255,255,.35)}

/* NPC de Viaje: dos cuadros */
.cuadro-viaje{border:1px solid var(--frame);border-radius:6px;padding:6px 8px 4px;margin-top:6px;background:#f6f3ee}
.cuadro-viaje h4{margin:0 0 4px;font-size:12.5px;color:#7e6038;text-transform:uppercase;letter-spacing:.04em}

/* ===== pantalla de inicio estilo épico (fondo animado en fondoInicio.js) ===== */
#fondoInicio{position:absolute;inset:0;width:100%;height:100%;z-index:9;pointer-events:none}
#pLogin,#pPersonajes,#pCrear,#pDesconectado{background:transparent}
#pLogin .card{width:min(420px,100%);background:linear-gradient(180deg,rgba(36,26,14,.82),rgba(22,16,8,.9));border:1px solid #8a6a2a;box-shadow:0 0 0 1px rgba(242,193,78,.25),0 0 40px rgba(120,80,200,.35),0 20px 60px rgba(0,0,0,.6);backdrop-filter:blur(3px);color:#e8e2f4}
#pLogin .hero{background:none;border-bottom:1px solid rgba(242,193,78,.35);padding:22px 18px 14px;text-align:center}
#pLogin .hero h1{font-family:'Grenze Gotisch',serif;font-weight:800;font-size:46px;letter-spacing:.02em;margin:0;line-height:1;
  background:linear-gradient(180deg,#fff6d0 0%,#f2c14e 45%,#a8741a 70%,#f8e3a0 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 #3a2408) drop-shadow(0 0 14px rgba(242,193,78,.45))}
#pLogin .hero p{color:#cbb8ff;letter-spacing:.25em;text-transform:uppercase;font-size:11.5px;margin-top:8px}
#pLogin label,#pLogin .estado,#pLogin .hint,#pLogin .recientes span{color:#c8c0dc}
#pLogin input{background:rgba(255,255,255,.08);border:1px solid rgba(242,193,78,.35);color:#fff}
#pLogin input:focus{outline:none;border-color:#f2c14e;box-shadow:0 0 0 2px rgba(242,193,78,.25)}
#pLogin .btn{background:rgba(255,255,255,.08);border-color:rgba(242,193,78,.4);color:#f4ead0}
#pLogin .btn.primary{background:linear-gradient(180deg,#d8a034,#8a5a10);border-color:#f2c14e;color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.5)}
#pLogin .btn:hover{filter:brightness(1.15)}
#pPersonajes .card,#pCrear .card,#pDesconectado .card{box-shadow:0 0 0 1px rgba(242,193,78,.3),0 0 40px rgba(120,80,200,.3),0 20px 60px rgba(0,0,0,.6)}

/* ===== descripción flotante de habilidades ===== */
#tipHab{position:fixed;z-index:200;max-width:320px;padding:9px 11px;border-radius:7px;pointer-events:none;
  background:linear-gradient(180deg,rgba(40,31,20,.97),rgba(26,19,10,.97));border:1px solid #8a6a2a;box-shadow:0 8px 24px rgba(0,0,0,.5);color:#ebe6df;font:13px/1.4 var(--font-ui)}
#tipHab .th-cab{display:flex;gap:9px;align-items:center;margin-bottom:6px}
#tipHab .th-ic svg{width:38px;height:38px;display:block}
#tipHab b{color:#ffe08a;font-size:14px}
#tipHab small{display:block;color:#c3b6a5;font-size:11px}
#tipHab p{margin:4px 0 0}
#tipHab .th-costo{color:#d6c7b3;font-size:12px}
#tipHab .th-sig{color:#b8f0c0;font-size:12px;border-top:1px solid rgba(255,255,255,.12);padding-top:5px}
#tipHab .th-bloq{color:#ffb3a6;font-size:12px}

/* ===== teclas de la barra ===== */

.bteclas{position:absolute;left:-30px;top:4px;width:26px;height:26px;border-radius:5px;border:1px solid var(--frame);background:var(--panel);cursor:pointer;font-size:15px;line-height:1}
#winTeclas{width:min(520px,calc(100vw - 24px));max-height:min(80vh,640px)}
#winTeclas .wbody{overflow:auto}
.teclas-presets{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 8px}
.teclas-lista{display:grid;gap:4px}
.tecla-fila{display:grid;grid-template-columns:22px 30px 1fr 130px;gap:8px;align-items:center;padding:3px 6px;border-radius:5px;background:#f4f0ea}
.tecla-fila.esperando{background:#fff3c0;outline:2px solid #f2c14e}
.tecla-fila .tf-n{font-weight:700;color:var(--ink-soft);text-align:center}
.tecla-fila .ic svg{width:26px;height:26px;display:block}
.tecla-fila .tf-nom{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tecla-fila .tf-k{font-weight:800;font-size:13px;padding:4px 8px}
.slot .k{max-width:100%;overflow:hidden;white-space:nowrap}

/* ===== mapa del mundo ===== */
#winMundo{left:50%;top:50%;transform:translate(-50%,-50%);width:min(1240px,calc(100vw - 24px));height:min(820px,calc(100vh - 24px));display:flex;flex-direction:column;z-index:60;border-color:#8a6a2a}
#winMundo .tb{display:flex;align-items:center;gap:10px}
#winMundo .tb>span:first-child{flex:1;font-family:'Grenze Gotisch',serif;font-size:20px}
.mm-ctl{display:flex;gap:4px}
.mm-ctl button{width:26px;height:24px;border-radius:4px;border:1px solid rgba(255,255,255,.5);background:rgba(255,255,255,.18);color:#fff;font-weight:800;cursor:pointer}
.mm-cuerpo{position:relative;flex:1;min-height:0}
.mm-cuerpo canvas{position:absolute;inset:0;width:100%;height:100%;cursor:grab;touch-action:none}
.mm-cuerpo canvas:active{cursor:grabbing}
.mm-info{position:absolute;z-index:2;max-width:260px;padding:8px 10px;border-radius:6px;background:rgba(255,250,235,.97);border:1px solid #8a6a2a;box-shadow:0 6px 18px rgba(0,0,0,.35);pointer-events:none;font-size:12.5px;color:#2a2014}
.mm-info b{font-size:14px}
.mm-info small{display:block;color:#6a5a40}
.mm-info p{margin:4px 0 0}
.mm-info .j{font-size:12.5px;color:#a8341a}
.mm-info .pel{color:#c0392b;font-weight:700}.mm-info .fac{color:#867c6e;font-weight:700}.mm-info .ok{color:#2a8a3a;font-weight:700}.mm-info .aqui{color:#c0392b;font-weight:700}
.mm-leyenda{position:absolute;left:10px;bottom:10px;display:flex;flex-wrap:wrap;gap:10px;padding:6px 10px;border-radius:6px;background:rgba(255,250,235,.9);border:1px solid #8a6a2a;font-size:12px;color:#2a2014}
.mm-leyenda i{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:4px;vertical-align:-1px;border:2px solid}
.mm-leyenda .ci{border-radius:2px;background:#e8d8b8;border-color:#b8402a}.mm-leyenda .ca{background:#fff8e8;border-color:#946f3e}.mm-leyenda .gr{background:#fff8e8;border-color:#d84a8a}.mm-leyenda .le{background:#2a1a2a;border-color:#f2c14e}.mm-leyenda .yo{background:#e8342a;border-color:#a8201a}.mm-leyenda .pi{background:#2a1a22;border-color:#d8643a}
@media (max-width:640px){.mm-leyenda{font-size:10.5px;gap:6px}}

/* ===== cuentas: cambiar contraseña y panel de administración ===== */
.cuenta-form{display:grid;gap:8px}
.cuenta-form label{display:grid;gap:3px;font-size:13px;font-weight:600}
.cuenta-form input,.cuentas-barra input{font:600 14px var(--font-ui);padding:7px 9px;border:1px solid var(--frame);border-radius:4px}
.ok-msg{color:#2a8a3a;font-weight:700;margin:0}
#winCuentas{width:min(860px,calc(100vw - 24px));max-height:min(86vh,720px)}
#winCuentas .wbody{overflow:auto}
.cuentas-barra{display:flex;gap:6px;margin:6px 0}
.cuentas-barra input{flex:1}
.cu-resultado{padding:8px 10px;border-radius:6px;background:#fff6d8;border:1px solid #e8c060;margin-bottom:6px;font-size:13px}
.cu-resultado code{font:800 16px monospace;background:#fff;padding:2px 8px;border-radius:4px;border:1px solid #e8c060;user-select:all}
.cu-lista{display:grid;gap:5px}
.cu-fila{display:flex;align-items:center;gap:10px;padding:7px 9px;border-radius:6px;background:#f4f0ea}
.cu-fila.baneada{opacity:.65}
.cu-info{flex:1;min-width:0}
.cu-info small{display:block;color:var(--ink-soft);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cu-tag{font-size:10.5px;font-weight:700;padding:1px 6px;border-radius:3px;color:#fff}
.cu-tag.adm{background:#c9a23a}.cu-tag.ban{background:#c0392b}.cu-tag.on{background:#2a8a3a}
.btn.peligro{background:#c0392b;color:#fff;border-color:#8a2010}

/* comercio entre jugadores: cuadrícula de 8×4 = 32 casillas */
#winComercio{width:min(760px,calc(100vw - 24px))}
.co-body{display:grid;gap:8px;max-height:calc(100vh - 120px);overflow:auto}
.co-lados{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.co-lado{display:grid;gap:6px;justify-items:start}
.co-lado h4,.co-moch{margin:0;font:700 13px var(--font-ui);color:var(--title2);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.co-estado{font-weight:600;font-size:11.5px;color:var(--ink-soft)}
.co-estado .listo{color:#b9821e}.co-estado .ok{color:var(--good)}
.co-grid{position:relative;border:2px solid #786751;border-radius:4px;background-color:#382c1d;
  background-image:linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px);
  background-size:var(--cel) var(--cel);box-shadow:inset 0 0 12px rgba(0,0,0,.5)}
.co-grid.suya{border-color:#7a6a3e}
.co-grid.bloq{outline:2px solid #e2a73a;outline-offset:2px}
.co-it{position:absolute;display:grid;place-items:center;border:1px solid var(--c);border-radius:3px;
  background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--c) 38%,transparent),rgba(44,34,20,.85));box-shadow:inset 0 0 8px color-mix(in srgb,var(--c) 55%,transparent);cursor:grab}
.co-grid.suya .co-it,.co-grid.bloq .co-it{cursor:default}
.co-it .co-ic,.co-mo .co-ic{display:grid;place-items:center;width:100%;height:100%}
.co-it .co-ic svg{width:min(80%,64px);height:min(80%,64px);filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
.co-n{position:absolute;right:3px;bottom:1px;font:700 11px var(--font-ui);color:#fff;text-shadow:0 1px 2px #000}
.co-ref{position:absolute;left:3px;top:1px;font:700 10.5px var(--font-ui);color:#ffe08a;text-shadow:0 1px 2px #000}
.co-fantasma{position:absolute;pointer-events:none;border:2px dashed #7dffa0;background:rgba(125,255,160,.18);border-radius:3px}
.co-fantasma.mal{border-color:#ff7a6a;background:rgba(255,90,70,.2)}
.co-zeny{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600}
.co-zeny input{width:120px;font:13px var(--font-ui);padding:3px 6px;border:1px solid #ded4c8;border-radius:4px}
.co-zeny b{color:var(--gold)}
.co-info{min-height:58px;background:var(--panel-2);border-radius:6px;padding:6px 8px}
.co-info .irow{display:flex;gap:8px;align-items:flex-start}
.co-tam{color:var(--ink-soft)}
.co-cant{font-weight:500;font-size:11.5px;color:var(--ink-soft);display:flex;gap:4px;align-items:center}
.co-cant input{width:64px;font:12px var(--font-ui);padding:2px 4px;border:1px solid #ded4c8;border-radius:4px}
.co-mochila{display:flex;flex-wrap:wrap;gap:5px;max-height:150px;overflow:auto;padding:4px;background:#f2ede7;border-radius:6px}
.co-mo{position:relative;width:44px;height:44px;border:1px solid var(--c);border-radius:4px;background:radial-gradient(circle,color-mix(in srgb,var(--c) 30%,#fff),#fff);cursor:grab}
.co-mo:hover{box-shadow:0 2px 6px rgba(0,0,0,.25)}
.co-mo.off{opacity:.45;cursor:default}
.co-mo svg{width:30px;height:30px}
.co-mo .co-n{color:#40301b;text-shadow:0 0 2px #fff}
.co-dim{position:absolute;left:2px;bottom:0;font:600 9px var(--font-ui);color:var(--ink-soft)}
.co-acts{justify-content:flex-end}

/* ventana de habilidades por linaje de clases */
.htramo{flex:0 0 30px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:6px;padding-top:4px;margin:0 2px;border-radius:8px;background:linear-gradient(#b9986c,#8e6f46);color:#fff}
.htramo.bloq{background:linear-gradient(#cfc8bf,#b4aa9c)}
.htramo span,.htramo b{writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap}
.htramo span{font:600 10px var(--font-ui);opacity:.85;letter-spacing:.5px;text-transform:uppercase}
.htramo b{font:700 12px var(--font-ui)}
.hcol.futura .hgrupo{opacity:.8}
.hfutura{margin:4px 0 0;font-size:11.5px;color:var(--ink-soft);line-height:1.35}
.hlinaje{font-weight:700;color:var(--title2)}
/* quest de cambio de clase en el panel de misiones */
.mis-b{display:grid;gap:2px;min-width:0}.mis-b.mis-sep{margin-top:5px;padding-top:5px;border-top:1px solid #e8d8a8}

/* recuperar contraseña y vincular correo */
.enlace{background:none;border:0;padding:4px 0;color:var(--title2);font:600 12.5px var(--font-ui);text-decoration:underline;cursor:pointer;justify-self:start}
.enlace:hover{color:var(--title1)}
.rec-tit{margin:0;font:700 16px var(--font-ui);color:var(--title2)}
#fRecuperar .ok-msg,#fCorreo .ok-msg{color:var(--good);font-size:12.5px;margin:0}
/* modo de lanzamiento (ventana de teclas) */
.modo-lanz{display:grid;gap:4px;padding:8px 10px;margin-bottom:8px;background:var(--panel-2);border-radius:6px;font-size:12.5px}
.modo-lanz label{display:flex;gap:6px;align-items:flex-start;cursor:pointer}

/* avisos de puntos por repartir: abajo al centro (✚ atributos · ✦ habilidades) */
#avisosPuntos{left:50%;transform:translateX(-50%);bottom:calc(14px + env(safe-area-inset-bottom,0px));display:flex;gap:12px;pointer-events:none;z-index:6}
.aviso-pts{zoom:.9;pointer-events:auto;position:relative;display:grid;justify-items:center;gap:1px;width:64px;padding:6px 4px 4px;border-radius:14px;cursor:pointer;
  font:700 10.5px var(--font-ui);color:#fff;border:2px solid rgba(255,255,255,.85);box-shadow:0 4px 14px rgba(0,0,0,.35);animation:latido 1.6s ease-in-out infinite}
.aviso-pts .sim{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;font-size:22px;line-height:1;background:rgba(255,255,255,.18);text-shadow:0 1px 3px rgba(0,0,0,.4)}
.aviso-pts b{position:absolute;top:-8px;right:-8px;min-width:22px;height:22px;padding:0 5px;border-radius:11px;display:grid;place-items:center;font-size:12px;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.35)}
.aviso-pts small{font-size:10px;font-weight:700;letter-spacing:.02em;text-shadow:0 1px 2px rgba(0,0,0,.4)}
.aviso-pts.atr{background:linear-gradient(#4cc46a,#258a44)}
.aviso-pts.atr b{color:#1f7a3a}
.aviso-pts.hab{background:linear-gradient(#cfb28b,#a87f4a)}
.aviso-pts.hab b{color:#98713f}
.aviso-pts.hab.ley{background:linear-gradient(#f6c94a,#c98a1a)}
.aviso-pts.hab.ley b{color:#9a6400}
.aviso-pts.hab.ley small{color:#4a2a00;text-shadow:0 1px 0 rgba(255,255,255,.4)}
.aviso-pts.hab.ley .sim{color:#fff8d8}
.aviso-pts:hover{filter:brightness(1.1)}
@keyframes latido{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@media (max-width:640px){#avisosPuntos{bottom:calc(238px + env(safe-area-inset-bottom,0px));gap:8px}.aviso-pts{width:58px}.aviso-pts small{font-size:8.5px}.aviso-pts .sim{width:28px;height:28px;font-size:18px}}
@media (prefers-reduced-motion:reduce){.aviso-pts{animation:none}}
.acts-eq{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}

/* ---------- inventario al estilo Ragnarok ---------- */
#invBody{gap:8px}
.inv-arriba{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:stretch}
.inv-ficha{background:var(--panel-2);border:1px solid #dbd2c5;border-radius:6px;padding:8px 10px;font-size:12.5px;display:flex;flex-direction:column;gap:6px;min-height:0;overflow:auto;max-height:330px}
.inv-fe{display:flex;gap:8px;align-items:flex-start}
.inv-fe .ic svg{width:34px;height:34px}
.inv-fe .nm{display:grid;gap:2px}
.inv-fe .nm small{display:block;color:var(--ink-soft);line-height:1.35}
.inv-nota{margin:0;font-size:11.5px;color:var(--ink-soft)}
.inv-nota.mal{color:var(--bad);font-weight:600}
.inv-pista{margin:auto 0 0;font-size:11px;color:var(--ink-soft);font-style:italic;line-height:1.35}
.inv-acts{display:flex;flex-wrap:wrap;gap:6px}
.inv-res{display:grid;grid-template-columns:1fr 1fr;gap:3px 12px}
.inv-res .inv-nom{grid-column:1/-1;font-size:14px;color:var(--title2);margin-bottom:2px}
.inv-res span{display:flex;justify-content:space-between;border-bottom:1px dotted #dbd2c5;font-weight:600}
.inv-res em{font-style:normal;color:var(--ink-soft);font-weight:700;font-size:10.5px;letter-spacing:.05em}
.inv-pj{display:grid;grid-template-columns:52px 200px 52px;grid-template-areas:"izq centro der" "abajo abajo abajo" "mont mont mont";gap:6px;background:linear-gradient(#f5f2ed,#ebe4db);border:1px solid #dbd2c5;border-radius:6px;padding:8px}
#invIzq{grid-area:izq}#invDer{grid-area:der}.inv-centro{grid-area:centro}#invAbajo{grid-area:abajo}.inv-mont{grid-area:mont}
.inv-col{display:grid;gap:6px;align-content:start}
.inv-fila{display:flex;gap:6px;justify-content:center}
.inv-centro{position:relative;display:flex;flex-direction:column;align-items:center;background:radial-gradient(circle at 50% 40%,#ffffff,#e7dfd4 70%);border:1px solid #dbd2c5;border-radius:6px}
#invCv{width:200px;height:236px;image-rendering:auto}
.inv-girar{position:absolute;bottom:4px;display:flex;gap:4px}
.inv-girar .btn{padding:1px 7px;font-size:10px;opacity:.75}
.inv-girar .btn:hover{opacity:1}
.inv-slot,.inv-celda{position:relative;width:52px;height:52px;border-radius:5px;background:linear-gradient(#f8f6f3,#ede6de);border:1px solid #d4c9bb;display:grid;place-items:center;cursor:pointer}
.inv-slot.lleno,.inv-celda:not(.vacia){border-color:var(--c,#b9a891);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c,#b9a891) 35%,transparent)}
.inv-slot:hover,.inv-celda:not(.vacia):hover{background:linear-gradient(#ffffff,#f3eee8);box-shadow:0 0 0 2px rgba(240,180,60,.5)}
.inv-slot.sel,.inv-celda.sel{outline:2px solid #f0b43c;outline-offset:1px}
.inv-slot.sobre{box-shadow:0 0 0 3px #f0b43c;background:#fff8e4}
.inv-ic svg{width:36px;height:36px;display:block;pointer-events:none}
.inv-vacio{font-size:9.5px;font-weight:700;color:#bfb19f;text-align:center;line-height:1.1;letter-spacing:.02em;padding:2px}
.inv-n{position:absolute;right:3px;bottom:1px;font-size:11px;font-weight:700;color:#40301b;text-shadow:0 0 2px #fff,0 0 2px #fff}
.inv-ref{position:absolute;left:2px;top:0;font-size:10px;line-height:1}
.inv-ref .refino{font-size:10px}
.inv-celda.bloq .inv-ic{opacity:.45;filter:grayscale(.6)}
.inv-celda.vacia{cursor:default;background:#f1ede7;border-style:dashed;border-color:#e1d9ce}
.inv-mont{display:flex;align-items:center;gap:6px;justify-content:center;font-size:12px;font-weight:600;cursor:pointer;color:var(--title2)}
.inv-mont small{font-weight:400;color:var(--ink-soft)}
.inv-mont.apagado{opacity:.55;cursor:default}
.inv-barra{display:flex;align-items:center;gap:10px;border-bottom:2px solid var(--frame);padding-bottom:0}
.inv-tabs{display:flex;gap:2px}
.inv-tab{font:700 12px var(--font-ui);color:var(--title2);background:linear-gradient(#f4f0ea,#e6dfd6);border:1px solid #d4c9bb;border-bottom:0;border-radius:5px 5px 0 0;padding:4px 12px;cursor:pointer}
.inv-tab.activa{background:linear-gradient(var(--title1),var(--title2));color:#fff;border-color:var(--title2)}
.inv-cupo{margin-left:auto;font-size:11px;color:var(--ink-soft)}
.inv-zeny{font-weight:700;color:var(--gold);font-size:12.5px}
.inv-grid{display:grid;grid-template-columns:repeat(auto-fill,52px);gap:4px;justify-content:center;max-height:232px;overflow:auto;padding:2px}
@media (max-width:760px){
  .inv-arriba{grid-template-columns:1fr}
  .inv-pj{order:-1;justify-self:center}
  .inv-ficha{max-height:180px}
}
@media (max-width:420px){
  .inv-pj{grid-template-columns:46px 150px 46px}
  #invCv{width:150px;height:177px}
  .inv-slot,.inv-celda{width:46px;height:46px}
  .inv-grid{grid-template-columns:repeat(auto-fill,46px)}
  .inv-ic svg{width:30px;height:30px}
}
.inv-vacio{font-size:9px}
@media (max-width:640px){
  .inv-cupo{display:none}
  .inv-tab{padding:4px 8px;font-size:11px}
  .inv-zeny{margin-left:auto}
  .inv-mont small{display:none}
}

/* ---------- estilo Albion: gradación de color del mundo y viñeta ---------- */
#game.en-juego #c{filter:saturate(.9) contrast(1.06) brightness(.98)}
#vineta{position:fixed;inset:0;pointer-events:none;display:none;
  background:radial-gradient(ellipse at 50% 46%,rgba(0,0,0,0) 52%,rgba(12,8,4,.32) 100%),linear-gradient(160deg,rgba(255,226,170,.07),rgba(0,0,0,0) 45%,rgba(58,42,22,.08))}
#game.en-juego #vineta{display:block}

/* marcos de cuero y título dorado (estilo Albion) */
.win,.panel{border:1px solid #3a2a18;box-shadow:0 0 0 1px rgba(201,162,58,.35) inset,0 8px 24px rgba(6,4,2,.5)}
.tb{color:#f0d9a0;text-shadow:0 1px 0 rgba(0,0,0,.6);letter-spacing:.05em;border-bottom:1px solid #c9a23a55}
.tb .x{color:#f0d9a0}

/* chat: esquina para agrandarlo y aviso de mensajes nuevos al leer los antiguos */
#log{position:absolute}
.chat-asa{position:absolute;right:0;top:0;width:18px;height:18px;cursor:nesw-resize;z-index:2;touch-action:none;
  background:linear-gradient(45deg,transparent 45%,rgba(240,217,160,.55) 46%,rgba(240,217,160,.55) 54%,transparent 55%),linear-gradient(45deg,transparent 65%,rgba(240,217,160,.55) 66%,rgba(240,217,160,.55) 74%,transparent 75%);opacity:.6}
#log:hover .chat-asa,#log.cambiando .chat-asa{opacity:1}
#log.cambiando{outline:1px dashed rgba(240,217,160,.6)}
.chat-nuevos{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);font:600 11px var(--font-ui);color:#2a1e12;background:#f0d9a0;border:1px solid #6b4f30;border-radius:10px;padding:2px 10px;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.4)}

/* target en foco: botón para soltarlo */
#target{position:absolute}
#target .tg-x{position:absolute;right:-8px;top:-8px;width:20px;height:20px;border-radius:50%;border:1px solid #3a2a18;background:#5e4329;color:#f0d9a0;font:700 13px/1 var(--font-ui);cursor:pointer;padding:0}
#target .tg-x:hover{background:#7a5532}

/* inventario: mostrar montura y casco */
.inv-pj{grid-template-areas:"izq centro der" "abajo abajo abajo" "mont mont mont"}
.inv-mont-fila{grid-area:mont;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.inv-mont-nota{grid-column:1/-1;text-align:center;font-size:11px;color:var(--ink-soft);margin-top:-4px}

/* instancias del mapa */
#mapwin{position:absolute}
.inst-btn{display:block;width:calc(100% - 12px);margin:0 6px 6px;font:700 11.5px var(--font-ui);color:#f0d9a0;background:linear-gradient(#5e4329,#2e2016);border:1px solid #3a2a18;border-radius:4px;padding:3px 6px;cursor:pointer}
.inst-btn:hover{filter:brightness(1.15)}
.inst-menu{position:absolute;right:0;top:100%;margin-top:4px;width:200px;display:grid;gap:3px;padding:6px;background:var(--panel);border:1px solid #3a2a18;border-radius:6px;box-shadow:0 8px 20px rgba(0,0,0,.45);z-index:6}
.inst-menu button{display:flex;justify-content:space-between;align-items:baseline;gap:6px;font:12px var(--font-ui);color:var(--ink);background:var(--panel-2);border:1px solid #c9b48a;border-radius:4px;padding:5px 8px;cursor:pointer;text-align:left}
.inst-menu button small{color:var(--ink-soft);font-size:10.5px}
.inst-menu button.act{border-color:#c9a23a;background:#f3e2b4}
.inst-menu button:hover{filter:brightness(1.05)}
/* ---------- cinemática de los jefes legendarios ---------- */
.cine{position:absolute;inset:0;z-index:40;overflow:hidden;--cine:#ff7a2a;cursor:pointer}
.cine-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.cine-tinte{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity 1.2s}
.cine.on .cine-tinte{opacity:1}
.cine-flash{position:absolute;inset:0;opacity:0;pointer-events:none;mix-blend-mode:screen}
.cine-flash.va{animation:cineFlash .7s ease-out}
@keyframes cineFlash{0%{opacity:.85}100%{opacity:0}}
.cine-barra{position:absolute;left:0;right:0;height:13vh;background:#000;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.cine-barra.arriba{top:0;transform:translateY(-100%)}
.cine-barra.abajo{bottom:0;transform:translateY(100%)}
.cine.on .cine-barra{transform:none}
.cine.sale .cine-barra.arriba{transform:translateY(-100%)}
.cine.sale .cine-barra.abajo{transform:translateY(100%)}
.cine.tiembla .cine-titulo{animation:cineTiembla .12s linear infinite}
@keyframes cineTiembla{0%,100%{translate:0 0}25%{translate:-3px 2px}50%{translate:3px -2px}75%{translate:-2px -3px}}
.cine-intro{position:absolute;left:0;right:0;bottom:4.5vh;margin:0;text-align:center;font:italic 600 clamp(15px,2.2vw,22px)/1 Georgia,serif;color:#e8dcc0;letter-spacing:.04em;opacity:0;transition:opacity .8s}
.cine.intro .cine-intro{opacity:1}
.cine-titulo{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;pointer-events:none;opacity:0;transition:opacity .6s}
.cine.titulo .cine-titulo{opacity:1}
.cine-pre{display:block;font:700 clamp(11px,1.4vw,15px)/1 var(--font-ui);letter-spacing:.42em;text-transform:uppercase;color:#e8dcc0;text-shadow:0 2px 6px #000;margin-bottom:10px;opacity:0}
.cine.titulo .cine-pre{animation:cineSube .8s .1s both}
.cine-nombre{margin:0;font-family:var(--font-title);font-weight:800;font-size:clamp(54px,11vw,128px);line-height:1;color:#fff4d6;letter-spacing:.04em;
  text-shadow:0 0 22px var(--cine),0 0 60px var(--cine),0 4px 0 #2a1408,0 8px 24px rgba(0,0,0,.8)}
.cine-nombre span{display:inline-block;opacity:0}
.cine.titulo .cine-nombre span{animation:cineLetra .7s cubic-bezier(.2,1.4,.4,1) both}
@keyframes cineLetra{0%{opacity:0;transform:translateY(-40px) scale(1.8);filter:blur(8px)}100%{opacity:1;transform:none;filter:none}}
.cine-sub{margin:10px 0 0;font:italic 700 clamp(18px,2.8vw,30px)/1.1 Georgia,serif;color:var(--cine);text-shadow:0 2px 8px #000;opacity:0}
.cine.titulo .cine-sub{animation:cineSube .9s 1s both}
.cine-pie{display:flex;justify-content:center;gap:22px;flex-wrap:wrap;margin-top:18px;font:600 clamp(11px,1.3vw,14px)/1 var(--font-ui);color:#d8ccb0;letter-spacing:.08em;text-transform:uppercase;opacity:0}
.cine-pie span{padding:6px 12px;border-top:1px solid rgba(232,220,192,.35);border-bottom:1px solid rgba(232,220,192,.35)}
.cine.titulo .cine-pie{animation:cineSube .9s 1.8s both}
@keyframes cineSube{0%{opacity:0;transform:translateY(14px)}100%{opacity:1;transform:none}}
.cine-saltar{position:absolute;right:20px;bottom:calc(13vh + 14px);padding:7px 14px;border-radius:6px;border:1px solid rgba(232,220,192,.4);background:rgba(0,0,0,.55);color:#e8dcc0;font:600 13px var(--font-ui);cursor:pointer}
.cine-saltar:hover{background:rgba(0,0,0,.8);color:#fff}
body.en-cine #game .juego, body.en-cine #game > .win, body.en-cine #banner{opacity:0!important;pointer-events:none!important;transition:opacity .4s}
@media (prefers-reduced-motion:reduce){.cine.titulo .cine-nombre span{animation-duration:.01s}.cine.tiembla .cine-titulo{animation:none}}
.cine-titulo::before{content:"";position:absolute;left:50%;top:50%;width:min(1100px,110vw);height:340px;transform:translate(-50%,-50%);background:radial-gradient(ellipse at center,rgba(0,0,0,.62) 0%,rgba(0,0,0,.35) 45%,transparent 72%);z-index:-1}

/* ===== tienda SHOP (client/js/tienda.js) ===== */
.mbtn.shop{background:linear-gradient(#ffe9a8,#f2c14e);border-color:#a8781a;color:#3a2410;font-weight:800}
#winShop{width:min(980px,calc(100vw - 24px));max-height:min(88vh,820px);z-index:40}
#winShop .tb>span:first-child{flex:1;font-family:var(--font-title);font-size:20px;letter-spacing:.06em}
.shop-mon{background:rgba(0,0,0,.35);border:1px solid rgba(242,193,78,.6);border-radius:12px;padding:2px 10px;font-weight:800;color:#ffe08a;margin-right:6px}
.shop-tabs{display:flex;flex-wrap:wrap;gap:4px;padding:8px 10px 0}
.shop-tab{font:700 12.5px var(--font-ui);padding:6px 12px;border:1px solid var(--frame);border-radius:5px 5px 0 0;background:linear-gradient(#f8f6f3,#e8e1d7);cursor:pointer;color:var(--ink)}
.shop-tab[aria-selected="true"]{background:linear-gradient(#ffe9a8,#f2c14e);border-color:#a8781a}
.shop-nota{margin:6px 12px 0;font-size:11.5px;color:var(--ink-soft)}
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;padding:10px 12px 12px;overflow:auto;min-height:0}
.shop-card{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px;border:1px solid var(--frame);border-radius:7px;background:linear-gradient(#fbf7ef,#efe6d6);text-align:center}
.shop-card.puesta{box-shadow:0 0 0 2px #f2c14e inset}
.shop-card canvas{width:120px;height:125px;border-radius:5px;background:radial-gradient(circle at 50% 70%,#4a3a28,#241b12 72%)}
.shop-card b{font-size:12.5px;line-height:1.15}.shop-card small{font-size:11px;color:var(--ink-soft);min-height:13px}
.shop-card .btn{width:100%;font-size:11.5px;padding:4px 6px}
.shop-quitar{grid-column:1/-1;display:flex;gap:6px;flex-wrap:wrap}.shop-vacio{grid-column:1/-1;color:var(--ink-soft)}

/* ===== soporte: tickets (client/js/tickets.js) ===== */
#winTickets{width:min(900px,calc(100vw - 24px));height:min(84vh,640px);z-index:40}
.tk-cuerpo{display:grid;grid-template-columns:260px 1fr;gap:0;min-height:0;flex:1}
.tk-lado{display:flex;flex-direction:column;gap:6px;padding:10px;border-right:1px solid var(--frame);min-height:0}
.tk-filtros{display:flex;flex-wrap:wrap;gap:3px}.tk-filtros button{font:600 11px var(--font-ui);padding:3px 7px;border:1px solid var(--frame);border-radius:10px;background:#f8f4ec;cursor:pointer}
.tk-filtros button.on{background:#f2c14e;border-color:#a8781a}
.tk-lista{overflow:auto;display:flex;flex-direction:column;gap:5px;min-height:0}
.tk-item{text-align:left;border:1px solid var(--frame);border-radius:6px;background:#fbf7ef;padding:6px 8px;cursor:pointer;display:grid;gap:2px;font:13px var(--font-ui);color:var(--ink)}
.tk-item.sel{box-shadow:0 0 0 2px #f2c14e inset}.tk-item.nuevo{background:#fff3cf}
.tk-item small{color:var(--ink-soft);font-size:11px}.tk-as{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tk-top{display:flex;align-items:center;gap:6px}.tk-punto{width:8px;height:8px;border-radius:50%;background:#e8573f;margin-left:auto}
.tk-est{font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:9px}.tk-est.ab{background:#fde2b8;color:#8a4a10}.tk-est.re{background:#cfeccf;color:#1f6a2a}.tk-est.ce{background:#e2ddd4;color:#5a5048}
.tk-detalle{display:flex;flex-direction:column;gap:8px;padding:10px 14px;min-height:0;overflow:auto}
.tk-detalle h3{margin:0;font-size:16px}.tk-cab{display:flex;align-items:center;gap:10px;justify-content:space-between}.tk-meta{margin:0;font-size:11.5px;color:var(--ink-soft)}
.tk-chat{flex:1;min-height:120px;overflow:auto;display:flex;flex-direction:column;gap:6px;padding:6px;border:1px solid var(--frame);border-radius:6px;background:#f8f4ec}
.tk-msg{max-width:82%;padding:6px 9px;border-radius:8px;background:#fff}.tk-msg p{margin:2px 0 0;font-size:13px;line-height:1.35;white-space:normal;overflow-wrap:anywhere}.tk-msg small{color:var(--ink-soft);font-size:10.5px}
.tk-msg.jugador{align-self:flex-start;border:1px solid #d8ccb4}.tk-msg.admin{align-self:flex-end;background:#e6f0ff;border:1px solid #9ab4e0}.tk-msg.sistema{align-self:center;background:transparent;font-style:italic;max-width:100%}
.tk-form,.tk-resp{display:grid;gap:8px}.tk-form label{display:grid;gap:3px;font-weight:600;font-size:13px}
.tk-form input,.tk-form select,.tk-form textarea,.tk-resp textarea{font:14px var(--font-ui);padding:6px 8px;border:1px solid var(--frame);border-radius:5px;resize:vertical}
.tk-vacio,.tk-bienvenida p{color:var(--ink-soft);font-size:13px}
@media (max-width:700px){.tk-cuerpo{grid-template-columns:1fr}.tk-lado{border-right:0;border-bottom:1px solid var(--frame);max-height:38vh}}

/* ============================================================
   MODO CELULAR (horizontal) · client/js/movil.js
   Controles semitransparentes en las esquinas para no tapar el mapa:
   joystick a la izquierda, ataque + 4 botones a la derecha, chat escondido.
   ============================================================ */
.mv{display:none}
html.movil #game.en-juego .mv.hud:not([hidden]){display:block}
html.movil #bar,html.movil #avisoBarra,html.movil .chat-asa{display:none!important}
html.movil body{overscroll-behavior:none}
html.movil *{-webkit-touch-callout:none}
/* paneles del HUD más chicos */
html.movil #status{zoom:.72}
html.movil #status .row:nth-of-type(n+3),html.movil #status .meter.thin,html.movil #status .zeny{display:none}
html.movil #buffs{zoom:.8;left:calc(200px + env(safe-area-inset-left,0px));max-width:260px}
html.movil #mapwin{zoom:.72}
html.movil #target{zoom:.85}
html.movil #grupoWin{zoom:.72;top:calc(170px + env(safe-area-inset-top,0px))}
html.movil #jefeBar{zoom:.75;width:min(520px,60vw);min-width:0;top:calc(52px + env(safe-area-inset-top,0px))}
html.movil #rankDano{zoom:.68;top:calc(120px + env(safe-area-inset-top,0px));right:calc(12px + env(safe-area-inset-right,0px))}
html.movil #avisosPuntos{zoom:.75;bottom:calc(8px + env(safe-area-inset-bottom,0px))}
html.movil #misionWin{zoom:.75;top:calc(150px + env(safe-area-inset-top,0px));width:220px;cursor:pointer}
html.movil #misionWin:not(.abierta) p,html.movil #misionWin:not(.abierta) .mis-b p{display:none}
html.movil #misionWin:not(.abierta)::after{content:"▾ toca para ver";font-size:10px;color:var(--ink-soft)}
html.movil #banner{font-size:clamp(26px,6vw,40px)}
/* ventanas: caben en la altura del celular */
html.movil .win{max-height:calc(100dvh - 16px);max-width:calc(100vw - 16px);z-index:8}
html.movil .win .x{min-width:30px;min-height:30px;font-size:20px}
html.movil .wbody{-webkit-overflow-scrolling:touch}

/* ---------- joystick ---------- */
#mvJoy{position:absolute;left:0;bottom:0;width:42vw;height:70vh;pointer-events:none;z-index:3}
#mvJoy .mv-base{position:fixed;left:calc(92px + env(safe-area-inset-left,0px));top:calc(100dvh - 92px - env(safe-area-inset-bottom,0px));width:116px;height:116px;margin:-58px 0 0 -58px;border-radius:50%;
  background:radial-gradient(circle,rgba(20,14,8,.10) 40%,rgba(20,14,8,.28) 70%);border:2px solid rgba(240,217,160,.35);opacity:.55;transition:opacity .2s}
#mvJoy .mv-base::before{content:"";position:absolute;inset:10px;border-radius:50%;border:1px dashed rgba(240,217,160,.25)}
#mvJoy .mv-palo{position:absolute;left:50%;top:50%;width:52px;height:52px;border-radius:50%;transform:translate(-50%,-50%);
  background:radial-gradient(circle at 40% 35%,rgba(255,240,200,.75),rgba(201,162,58,.55) 60%,rgba(94,67,41,.6));border:2px solid rgba(255,231,160,.7);box-shadow:0 2px 8px rgba(0,0,0,.35)}

#mvJoy.activo .mv-base{opacity:.95}

/* ---------- botones de acción (abajo a la derecha) ---------- */
#mvAcc{position:absolute;right:calc(10px + env(safe-area-inset-right,0px));bottom:calc(10px + env(safe-area-inset-bottom,0px));width:224px;height:216px;pointer-events:none;z-index:4}
#mvAcc button{position:absolute;pointer-events:auto;touch-action:none;border-radius:50%;padding:0;cursor:pointer;-webkit-user-select:none;user-select:none}
.mv-atk{right:8px;bottom:8px;width:84px;height:84px;color:#ffe7a0;border:2.5px solid rgba(255,231,160,.75);
  background:radial-gradient(circle at 40% 35%,rgba(140,40,30,.75),rgba(70,18,12,.7));box-shadow:0 3px 10px rgba(0,0,0,.4),inset 0 0 0 3px rgba(0,0,0,.25);opacity:.85}
.mv-atk svg{width:46px;height:46px;display:block;margin:auto}
.mv-atk.on{transform:scale(.93);opacity:1;filter:brightness(1.2)}
/* 4 botones en arco alrededor del ataque */
.mv-hab{width:58px;height:58px;overflow:hidden;border:2px solid rgba(240,217,160,.7);background:rgba(20,14,8,.45);box-shadow:0 2px 8px rgba(0,0,0,.35);opacity:.88}
.mv-hab[data-i="0"]{right:110px;bottom:20px}
.mv-hab[data-i="1"]{right:98px;bottom:84px}
.mv-hab[data-i="2"]{right:58px;bottom:134px}
.mv-hab[data-i="3"]{right:-2px;bottom:150px}
.mv-hab .ic,.mv-hab .ic svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.mv-hab .cd{position:absolute;left:0;right:0;bottom:0;height:0;background:rgba(10,8,6,.62);pointer-events:none}
.mv-hab .cdt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:800 15px var(--font-ui);color:#fff;text-shadow:0 1px 2px #000,0 0 4px #000;pointer-events:none}
.mv-hab.low .ic{filter:grayscale(.75) brightness(.7)}
.mv-hab.on{transform:scale(.92);opacity:1;border-color:#ffe7a0}
.mv-hab.vacio{border-style:dashed;background:rgba(20,14,8,.25);opacity:.6}
.mv-hab .mas,.mv-op .mas{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font:700 24px var(--font-ui);color:rgba(240,217,160,.8)}
.mv-mini{right:166px;bottom:116px;width:42px;height:42px;font-size:20px;line-height:1;border:2px solid rgba(240,217,160,.55);background:rgba(20,14,8,.4);opacity:.75}
.mv-mini.on{border-color:#ff8a6a;box-shadow:0 0 0 2px rgba(255,90,74,.35)}
#mvCancelar{position:absolute;right:calc(60px + env(safe-area-inset-right,0px));bottom:calc(236px + env(safe-area-inset-bottom,0px));width:58px;height:58px;border-radius:50%;z-index:4;
  display:flex!important;flex-direction:column;align-items:center;justify-content:center;font:700 22px/1 var(--font-ui);color:#fff;background:rgba(120,30,20,.55);border:2px solid rgba(255,160,140,.7);pointer-events:none}
#mvCancelar[hidden]{display:none!important}
#mvCancelar small{font-size:9px;font-weight:600;margin-top:2px}
#mvCancelar.encima{background:rgba(200,50,30,.85);transform:scale(1.12)}

/* ---------- arriba a la derecha: chat, menú, pantalla completa ---------- */
#mvTop{position:absolute;top:calc(8px + env(safe-area-inset-top,0px));right:calc(124px + env(safe-area-inset-right,0px));z-index:4}
html.movil #game.en-juego #mvTop:not([hidden]){display:flex;gap:6px}
.mv-redondo{position:relative;width:40px;height:40px;border-radius:50%;padding:0;font:600 18px/1 var(--font-ui);color:#f0d9a0;background:rgba(33,24,13,.6);border:1.5px solid rgba(240,217,160,.55);cursor:pointer}
.mv-redondo.alert::after{content:"";position:absolute;right:1px;top:1px;width:10px;height:10px;border-radius:50%;background:#e8573f;box-shadow:0 0 0 2px #fff}
.mv-redondo i{position:absolute;right:-4px;top:-4px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:#e8573f;color:#fff;font:700 10.5px/18px var(--font-ui);font-style:normal}
#mvMenu{position:absolute;top:calc(54px + env(safe-area-inset-top,0px));right:calc(124px + env(safe-area-inset-right,0px));z-index:7;padding:8px;border-radius:10px;background:rgba(33,24,13,.88);border:1px solid rgba(240,217,160,.45);box-shadow:0 6px 20px rgba(0,0,0,.4)}
#mvMenu .menu{display:grid;grid-template-columns:repeat(4,72px);gap:6px}
#mvMenu .mbtn{height:46px;font-size:12px;flex:none;width:72px}

/* ---------- chat escondido ---------- */
html.movil #log{display:none!important}
html.movil.chat-abierto #log{display:flex!important;top:calc(8px + env(safe-area-inset-top,0px));bottom:auto;left:calc(8px + env(safe-area-inset-left,0px));width:min(460px,56vw)!important;z-index:9;flex-direction:column-reverse;background:rgba(33,24,13,.9)}
html.movil.chat-abierto #log .lineas{height:min(46dvh,220px)!important}
html.movil.chat-abierto #log #fChat{padding-right:40px}
html.movil.chat-abierto #log #chatIn{font-size:16px} /* 16px: el celular no hace zoom al escribir */
.mv-chat-x{display:none}
html.movil.chat-abierto .mv-chat-x{display:block;position:absolute;right:4px;top:4px;width:32px;height:32px;border-radius:50%;border:1px solid rgba(240,217,160,.5);background:#5e4329;color:#f0d9a0;font:700 18px/1 var(--font-ui);padding:0;cursor:pointer}
#mvChatPrev{position:absolute;left:calc(196px + env(safe-area-inset-left,0px));bottom:calc(10px + env(safe-area-inset-bottom,0px));width:min(320px,calc(100vw - 470px));pointer-events:none;z-index:3;font-size:11.5px;line-height:1.3}
#mvChatPrev .m{color:#f3eee8;text-shadow:0 1px 2px #000,0 0 3px #000;margin-top:2px;transition:opacity .6s;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#mvChatPrev .m.fuera{opacity:0}
#mvChatPrev .sis{color:#ffe39a}#mvChatPrev .obj{color:#a6f0b4}#mvChatPrev .aviso{color:#ffa596}#mvChatPrev .anuncio{color:#ffd27a;font-weight:700}#mvChatPrev .grupo{color:#8af0a8}#mvChatPrev .clan{color:#ffcf7a}
html.movil.chat-abierto #mvChatPrev{display:none!important}

/* ---------- elegir qué va en cada botón ---------- */
#winMvHab{width:min(520px,calc(100vw - 16px))}
.mv-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
.mv-op{display:flex;align-items:center;gap:8px;padding:6px;border:1px solid var(--frame);border-radius:8px;background:linear-gradient(#f8f6f3,#e8e1d7);font:600 12px var(--font-ui);color:var(--ink);text-align:left;cursor:pointer;min-height:48px}
.mv-op .ic{width:36px;height:36px;flex:none;border-radius:6px;overflow:hidden;background:#2a1e12}
.mv-op .ic svg{width:36px;height:36px;display:block}
.mv-op.sel{border-color:#c9a23a;box-shadow:0 0 0 2px rgba(242,193,78,.6)}
.mv-op.vacio .ic{background:#6e5c44}

/* ---------- celular en vertical: pedir que lo gire ---------- */
#mvGirar{position:fixed;inset:0;z-index:50;background:#1d150b;color:#f0d9a0;align-items:center;justify-content:center;text-align:center;font-family:var(--font-ui)}
#mvGirar span{display:block;font-size:64px;animation:mvGiro 1.6s ease-in-out infinite}
#mvGirar b{font:800 28px var(--font-title);display:block;margin:8px 0}
#mvGirar p{margin:0;color:#ddd0bf}
@keyframes mvGiro{0%,20%{transform:rotate(0)}60%,100%{transform:rotate(90deg)}}
@media (orientation:portrait){html.movil #game.en-juego~#mvGirar,html.movil #game.en-juego #mvGirar{display:flex}}
/* pantallas de inicio: que quepan en la altura de un celular acostado */
@media (max-height:500px){
  .pantalla{padding:8px}
  .hero{padding-top:8px!important;padding-bottom:8px!important}
  .hero h1{font-size:30px!important}
}
/* ventanas grandes en el celular acostado: usan toda la altura */
html.movil #winHab{top:50%;height:calc(100dvh - 16px);width:calc(100vw - 12px)}
html.movil #winHab .hreglas{display:none}
html.movil #winHab .hdet{min-height:0;padding-top:6px;padding-bottom:6px}
html.movil #winInv{max-height:calc(100dvh - 12px);width:calc(100vw - 12px)}

/* Menú → música */
.sis-musica{display:flex;align-items:center;gap:8px}.sis-musica .btn{flex:none;min-width:130px}.sis-musica input{flex:1;accent-color:#c9a23a}

/* buffs en modo toggle: anillo dorado girando alrededor del icono (barra de atajos y botones del celular) */
.slot .tg{position:absolute;right:1px;top:1px;width:14px;height:14px;border-radius:50%;font:700 10px/14px var(--font-ui);text-align:center;color:#7a6a52;background:rgba(255,255,255,.75);border:1px solid #c9b48a;z-index:2;cursor:pointer}
.slot .tg:hover{color:#2a1c08;background:#ffe7a0}
.slot.toggle .tg{color:#2a1c08;background:linear-gradient(#ffe7a0,#e2b84a);border-color:#8a6a1e}
.slot.toggle{overflow:visible}
.slot.toggle::after,.mv-hab.toggle::after{content:"";position:absolute;inset:-3px;border-radius:7px;padding:2.5px;pointer-events:none;
  background:conic-gradient(from 45deg,#fff3c0,#e2b84a 25%,rgba(226,184,74,.25) 50%,#e2b84a 75%,#fff3c0);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  /* solo late la opacidad: la tarjeta de video lo hace sola, sin redibujar la página en cada cuadro
     (antes el anillo giraba cambiando el degradado, y cada toggle encendido redibujaba 60 veces por segundo) */
  animation:latidoToggle 1.3s ease-in-out infinite alternate;will-change:opacity}
@keyframes latidoToggle{from{opacity:.5}to{opacity:1}}
.calidad-baja .slot.toggle::after,.calidad-baja .mv-hab.toggle::after{animation:none;opacity:1}
.mv-hab.toggle::after{border-radius:50%;inset:0;padding:3px;z-index:2}
.hdet-acts .btn.tg-on{background:linear-gradient(#ffe7a0,#e2b84a);border-color:#8a6a1e;color:#2a1c08;font-weight:700}
.mv-op .tgb{margin-left:auto;flex:none;padding:4px 8px;border-radius:12px;border:1px solid #c9b48a;background:#fff;font:700 11px var(--font-ui);color:#7a6a52}
.mv-op .tgb.on{background:linear-gradient(#ffe7a0,#e2b84a);color:#2a1c08;border-color:#8a6a1e}

/* ventana Atributos (E): atributos con lo que dan por punto y estadísticas agrupadas con su explicación */
#winStats{width:min(760px,calc(100vw - 24px));max-height:min(90vh,760px)}
#statsBody{display:flex;flex-direction:column;gap:8px;overflow:auto}
#statsBody .pts{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;font-size:14px}
#statsBody .pts small{color:var(--ink-soft);font-size:11.5px}
#statsBody .pts.hay{background:#fff3d0;border:1px solid #e2b84a}
#statsBody .pts.hay b{color:#b5452e;font-size:16px}
.stats2{display:grid;grid-template-columns:1fr 1.15fr;gap:10px;align-items:start}
.sgrupo{background:#fff;border:1px solid #e6e0d7;border-radius:6px;padding:7px 9px;display:grid;gap:5px}
.sgrupo h4{margin:0 0 2px;font:800 11px var(--font-ui);letter-spacing:.08em;text-transform:uppercase;color:#a0761a}
.sder{display:grid;gap:8px}
.atr{display:grid;gap:1px;padding-bottom:5px;border-bottom:1px dashed #ece4d6}
.atr:last-of-type{border-bottom:0}
.atr .nom{font-size:12px;color:var(--ink-soft);width:80px}
.atr small,.der small{font-size:11.2px;line-height:1.35;color:#6e6150}
.atr small b{color:var(--ink);font-weight:600}
.der{display:grid;grid-template-columns:76px auto;column-gap:8px;align-items:baseline}
.der .lab{font-weight:700;font-size:11.5px;color:var(--title2);letter-spacing:.03em;white-space:nowrap}
.der .val{font-weight:700;font-variant-numeric:tabular-nums}
.der small{grid-column:1 / -1}
@media (max-width:640px){.stats2{grid-template-columns:1fr}}
/* con Atributos o Habilidades abiertas, los avisos de puntos no tapan la ventana */
#game:has(#winStats:not([hidden])) #avisosPuntos,#game:has(#winHab:not([hidden])) #avisosPuntos,#game:has(#winAyuda:not([hidden])) #avisosPuntos{display:none!important}

/* mensajes privados (/w) */
#log .privado b,#log .privado{color:#f0a6ff}
#log .privado{cursor:pointer}
#mvChatPrev .privado{color:#f0a6ff}
/* F1 · ayuda rápida */
#winAyuda{width:min(720px,calc(100vw - 24px));max-height:min(88vh,720px)}
#winAyuda .wbody{overflow:auto;display:grid;gap:10px}
#winAyuda .ay-intro{margin:0;font-size:12.5px;color:var(--ink-soft)}
#winAyuda .ay-buscar{width:100%;padding:6px 9px;border:1px solid var(--frame);border-radius:6px;font:13px var(--font-ui)}
.ay-sec{background:#fff;border:1px solid #e6e0d7;border-radius:6px;padding:7px 9px}
.ay-sec h4{margin:0 0 5px;font:800 11px var(--font-ui);letter-spacing:.08em;text-transform:uppercase;color:#a0761a}
.ay-fila{display:grid;grid-template-columns:minmax(150px,auto) 1fr;gap:3px 12px;align-items:baseline;padding:4px 5px;border-radius:5px}
.ay-fila code{font:700 12.5px ui-monospace,Consolas,monospace;color:#2a1c08;background:#f4ead2;border:1px solid #e2cf9e;border-radius:4px;padding:1px 6px;white-space:nowrap;justify-self:start}
.ay-fila kbd{font:700 12px var(--font-ui);background:#f8f4ec;border:1px solid #c9b48a;border-bottom-width:2px;border-radius:4px;padding:0 6px;margin-right:3px;white-space:nowrap}
.ay-fila span{font-size:12.5px;color:#4a3e30}
button.ay-fila{width:100%;border:0;background:none;text-align:left;cursor:pointer;font:inherit}
button.ay-fila:hover{background:#fff3d0}
@media (max-width:640px){.ay-fila{grid-template-columns:1fr}}

/* J · Guía de objetos */
#winGuia{width:min(1180px,calc(100vw - 20px));height:min(88vh,800px);max-height:none}
#game:has(#winGuia:not([hidden])) #avisosPuntos{display:none!important}
.gu-cuerpo{flex:1;min-height:0;display:grid;grid-template-columns:190px 300px 1fr;background:#f4f0eb}
.gu-nav{overflow:auto;border-right:1px solid #e0d6c6;padding:6px;display:flex;flex-direction:column;gap:3px;background:#efe8dc}
.gu-nav button{display:flex;justify-content:space-between;align-items:center;gap:6px;text-align:left;border:1px solid transparent;border-radius:6px;background:none;padding:6px 8px;font:600 12.5px var(--font-ui);color:var(--ink);cursor:pointer}
.gu-nav button small{font-weight:600;color:var(--ink-soft);font-size:11px}
.gu-nav button:hover{background:#fff7e6}
.gu-nav button.on{background:#fff;border-color:#e2b84a;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.gu-lista{display:flex;flex-direction:column;min-height:0;border-right:1px solid #e0d6c6}
.gu-filtros{display:grid;gap:5px;padding:7px;border-bottom:1px solid #e0d6c6}
.gu-filtros input,.gu-filtros select{width:100%;padding:5px 8px;border:1px solid var(--frame);border-radius:5px;font:12.5px var(--font-ui);background:#fff}
.gu-items{overflow:auto;padding:5px;display:flex;flex-direction:column;gap:3px}
.gu-item{display:flex;align-items:center;gap:8px;text-align:left;border:1px solid transparent;border-radius:6px;background:#fff;padding:4px 6px;cursor:pointer}
.gu-item:hover{border-color:#e2cf9e}.gu-item.on{border-color:#c9a23a;background:#fff7e0}
.gu-item .ic,.gu-item .ic svg{width:30px;height:30px;flex:none;display:block;border-radius:5px;background:#2a1e12}
.gu-item .nm{display:grid;min-width:0}.gu-item b{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gu-item small{font-size:11px;color:var(--ink-soft)}
.gu-detalle{overflow:auto;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.gu-cab{display:flex;gap:12px;align-items:center}
.gu-cab .ic.grande,.gu-cab .ic.grande svg{width:56px;height:56px;display:block;border-radius:8px;background:#2a1e12;flex:none}
.gu-cab h3{margin:0 0 3px;font:800 19px var(--font-ui)}
.gu-cab small{font-size:12.5px;color:#5a4e40}
.gu-desc{margin:0;font-size:13px;color:#3a3026}
.gu-precios{margin:0;font-size:12px;color:var(--ink-soft)}.gu-id{font-family:ui-monospace,Consolas,monospace}
.gu-detalle h4{margin:6px 0 0;font:800 11.5px var(--font-ui);letter-spacing:.08em;text-transform:uppercase;color:#a0761a}
.gu-nada{margin:0;padding:8px 10px;background:#fbeee8;border-radius:6px;font-size:12.5px;color:#8a3a2a}
.gu-bloque{display:grid;gap:4px;background:#fff;border:1px solid #e6e0d7;border-radius:6px;padding:8px 10px;font-size:12.5px}
.gu-bloque>b{font-size:13px}
.gu-bloque.mision{border-left:4px solid #3d8bd9}.gu-bloque.titan{border-left:4px solid #e2457d}
.gu-bloque .btn{justify-self:start;margin-top:4px}
.gu-tabla{overflow-x:auto}
.gu-tabla table{width:100%;border-collapse:collapse;font-size:12px}
.gu-tabla th{text-align:left;font-weight:700;color:#7a6a52;border-bottom:1px solid #e6dccb;padding:4px 6px;white-space:nowrap}
.gu-tabla td{border-bottom:1px solid #f0e8dc;padding:4px 6px;vertical-align:top}
.gu-tabla td small{display:block;color:var(--ink-soft);font-size:10.5px}
.gu-tabla td:last-child{color:#6e6150;font-size:11px}
.gu-tabla td:nth-child(2){font-variant-numeric:tabular-nums}
@media (max-width:900px){.gu-cuerpo{grid-template-columns:150px 1fr}.gu-detalle{grid-column:1 / -1;border-top:1px solid #e0d6c6;max-height:50%}}
html.movil #winGuia{width:calc(100vw - 8px);height:calc(100dvh - 8px)}
html.movil .gu-cuerpo{grid-template-columns:140px 220px 1fr}
html.movil .gu-detalle{grid-column:auto;max-height:none;border-top:0}

/* tercera fila de la barra de atajos (Alt + 1-0) */
.f3 .slot{width:42px;height:32px}.f3 .slot svg{width:22px;height:22px}
@media (max-width:640px){.f3 .slot{width:31px;height:28px}}
/* marca ⟳ de buff (toggle) en la ventana Habilidades y en los botones del celular */
.hnodo .hic{position:relative}
.tgk{position:absolute;right:-4px;top:-4px;width:14px;height:14px;border-radius:50%;font:700 9.5px/13px var(--font-ui);text-align:center;color:#7a6a52;background:#fff;border:1px solid #c9b48a;box-shadow:0 1px 2px rgba(0,0,0,.25);z-index:1}
.tgk[data-toggle]{cursor:pointer}.tgk[data-toggle]:hover{background:#ffe7a0;color:#2a1c08}
.tgk.on{color:#2a1c08;background:linear-gradient(#ffe7a0,#e2b84a);border-color:#8a6a1e;box-shadow:0 0 0 2px rgba(242,193,78,.45)}
.mv-hab .tgm{position:absolute;right:6px;top:4px;font:700 11px var(--font-ui);color:#ffe7a0;text-shadow:0 1px 2px #000}
#tipHab .th-tog{color:#a0761a}#tipHab .th-tog.on{color:#2f8f46}#tipHab .th-tog.no{color:#8a7f70;font-size:11px}

/* ---------- Gráficos y rendimiento (client/js/graficos.js) ---------- */
#game.en-juego.sin-filtro #c{filter:none}
#winGraficos{width:min(520px,94vw)}
.gr-gpu{display:flex;flex-direction:column;gap:4px;padding:10px 12px;border-radius:8px;background:rgba(120,110,90,.12);border:1px solid rgba(120,100,60,.3);font-size:13px}
.gr-gpu.ok{background:rgba(70,160,90,.12);border-color:rgba(70,160,90,.45)}
.gr-gpu.mal{background:rgba(200,80,60,.12);border-color:rgba(200,80,60,.5)}
.gr-gpu small{color:var(--ink-soft);line-height:1.4}
.gr-tit{margin:14px 0 6px;font-size:14px}
.gr-ops{display:flex;flex-direction:column;gap:6px}
.gr-op{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border-radius:8px;border:1px solid rgba(120,100,60,.3);cursor:pointer}
.gr-op.sel{border-color:#c9a23a;background:rgba(201,162,58,.14)}
.gr-op input{margin-top:3px;accent-color:#c9a23a}
.gr-op span{display:flex;flex-direction:column;gap:2px;font-size:13px}
.gr-op em{font-style:normal;font-size:11px;color:#8a6a1a;margin-left:4px}
.gr-op small{color:var(--ink-soft);line-height:1.35}
.gr-medidor{display:flex;gap:18px;margin:12px 0 4px;padding:8px 12px;border-radius:8px;background:#1c1a24;color:#e8e2d0;font-size:14px}
.gr-medidor b{font-variant-numeric:tabular-nums}
.gr-check{display:flex;gap:8px;align-items:center;font-size:13px;margin-top:6px}
.fps-marcador{position:absolute;top:170px;right:12px;z-index:5;display:flex;gap:10px;padding:4px 9px;border-radius:6px;background:rgba(12,10,18,.72);color:#e8e2d0;font:600 12px/1.3 Signika,sans-serif;font-variant-numeric:tabular-nums;pointer-events:none}

/* ---------- marca de la Guía (client/js/guia.js · rumbo.js) ---------- */
.gu-marca{margin:4px 0 8px;font-size:12.5px;color:#0a5a7a;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.gu-chip{position:absolute;top:170px;left:calc(50% - 130px);width:260px;box-shadow:0 0 10px rgba(106,224,255,.45);z-index:6;padding:5px 10px;border-radius:14px;border:1px solid #6ae0ff;background:rgba(10,40,56,.85);color:#bff2ff;font:700 12px var(--font-ui);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gu-chip:hover{background:rgba(20,70,96,.95)}

/* ---------- «Has caído» (client/js/muerte.js) ---------- */
.muerte{position:absolute;inset:0;z-index:40;display:flex;align-items:flex-end;justify-content:center;padding-bottom:16vh;box-sizing:border-box;background:radial-gradient(ellipse at center,rgba(40,0,0,.25),rgba(10,0,0,.6));pointer-events:auto}
.muerte[hidden]{display:none}
.mu-caja{width:min(420px,92vw);padding:20px 22px;border-radius:12px;background:linear-gradient(#2a1a1a,#160c0c);border:1px solid #7a2a22;box-shadow:0 10px 40px rgba(0,0,0,.6);color:#f2e2d0;display:grid;gap:10px;text-align:center}
.mu-caja h2{margin:0;font:800 30px "Grenze Gotisch",Georgia,serif;color:#ff8a7a;letter-spacing:.5px}
.mu-caja p{margin:0;font-size:14px;color:#e8d0c0}
.mu-caja .btn{font-size:14px;padding:10px}
.mu-caja small{color:#b89a8a}

/* «Hacer seguimiento» en el panel de misiones (client/js/rumbo.js) */
.mis-seg{display:flex;align-items:center;gap:5px;margin-top:2px;font-size:11px;font-weight:700;color:#8a5a0a;cursor:pointer;width:max-content}
.mis-seg input{margin:0;accent-color:#c9a23a;cursor:pointer}
#misionWin .mis-seg{text-transform:none;letter-spacing:0}
html.movil #misionWin:not(.abierta) .mis-seg{display:none}

/* ===== Cuadros del HUD que se mueven y se cierran (js/paneles.js) ===== */
.cuadro-cerrado{display:none!important}
.cuadro-ctl{position:absolute;top:-11px;z-index:4;display:flex;gap:2px;padding:2px;border-radius:9px;background:rgba(33,24,13,.88);box-shadow:0 1px 4px rgba(0,0,0,.45);opacity:0;transition:opacity .15s;pointer-events:auto}
.cuadro-ctl.der{right:-6px}
.cuadro-ctl.izq{left:-6px}
.cuadro-ctl button{width:20px;height:18px;padding:0;border:0;border-radius:7px;background:transparent;color:#f3e3bd;font:700 12px/18px var(--font-ui);cursor:pointer}
.cuadro-ctl .cc-mover{cursor:grab;touch-action:none;display:grid;place-items:center}
.cuadro-ctl svg{display:block;pointer-events:none}
.cuadro-ctl button:hover{background:rgba(242,193,78,.3);color:#fff}
.cuadro-ctl .cc-cerrar:hover{background:#b8432f}
.cuadro:hover>.cuadro-ctl,.cuadro-ctl:hover,.cuadro.arrastrando>.cuadro-ctl{opacity:1}
/* los cuadros que dejan pasar los clics (avisos, jefe, ranking): la pestaña se ve siempre, tenue */
#avisosPuntos>.cuadro-ctl,#jefeBar>.cuadro-ctl,#rankDano>.cuadro-ctl{opacity:.55}
#avisosPuntos>.cuadro-ctl:hover,#jefeBar>.cuadro-ctl:hover,#rankDano>.cuadro-ctl:hover{opacity:1}
/* sin contenido no hay pestaña */
#buffs:not(:has(.bf))>.cuadro-ctl,#avisosPuntos:not(:has(.aviso-pts:not([hidden])))>.cuadro-ctl{display:none}
.cuadro-asa{cursor:grab}
.cuadro.arrastrando,.cuadro.arrastrando .cuadro-asa,.cuadro.arrastrando .cc-mover{cursor:grabbing;user-select:none}
.cuadro.arrastrando{transition:none!important;box-shadow:0 0 0 2px rgba(242,193,78,.7),0 10px 28px rgba(0,0,0,.45)}
/* en pantallas táctiles no hay «pasar el mouse»: la pestaña se ve siempre, pequeña */
@media (hover:none){.cuadro-ctl{opacity:.7}.cuadro-ctl button{width:24px;height:22px;line-height:22px}}
/* el chat recorta lo que sale de su borde: su pestaña va adentro, a la izquierda del tirador de tamaño */
#log>.cuadro-ctl{top:2px;right:24px}
/* avisos de puntos: la pestaña va al costado izquierdo, en columna, para no tapar los números */
#avisosPuntos>.cuadro-ctl{top:50%;left:-30px;right:auto;transform:translateY(-50%);flex-direction:column}

/* ===== Arena PVP del Coliseo (js/arena.js) ===== */
#winArena{width:min(860px,calc(100vw - 24px));max-height:min(90vh,820px);z-index:40}
#winArena .tb>span:first-child{flex:1;font-family:var(--font-title);font-size:20px;letter-spacing:.06em}
.ar-tabs{display:flex;flex-wrap:wrap;gap:4px;padding:8px 10px 0}
.ar-tab{font:700 12.5px var(--font-ui);padding:6px 12px;border:1px solid var(--frame);border-radius:5px 5px 0 0;background:linear-gradient(#f8f6f3,#e8e1d7);cursor:pointer;color:var(--ink)}
.ar-tab[aria-selected="true"]{background:linear-gradient(#ff8a6a,#b8222a);border-color:#6a1014;color:#fff}
.ar-cuerpo{padding:10px 12px 14px;overflow:auto;display:grid;gap:10px;min-height:0;border-top:1px solid var(--frame)}
.ar-cabeza{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch}
.ar-elo,.ar-sem{display:grid;padding:6px 12px;border:1px solid var(--frame);border-radius:7px;background:linear-gradient(#fbf7ef,#efe6d6);min-width:120px}
.ar-elo small,.ar-sem small{font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);font-weight:700}
.ar-elo b{font:800 24px var(--font-ui);color:#8a1a1a;line-height:1.1}.ar-sem b{font:800 18px var(--font-ui);line-height:1.3}
.ar-elo span,.ar-sem span{font-size:11px;color:var(--ink-soft)}
.ar-top3{align-self:center;padding:6px 12px;border-radius:7px;background:linear-gradient(#ffe9a8,#f2c14e);border:1px solid #a8781a;font-weight:700;font-size:12.5px}
.ar-modo{display:inline-flex;border:1px solid var(--frame);border-radius:6px;overflow:hidden;justify-self:start}
.ar-m{font:700 12.5px var(--font-ui);padding:6px 14px;border:0;background:#f4efe6;cursor:pointer;color:var(--ink)}
.ar-m.on{background:linear-gradient(#ff8a6a,#b8222a);color:#fff}
.ar-caja{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:8px 10px;border:1px solid var(--frame);border-radius:7px;background:#fbf7ef}
.ar-caja p{margin:2px 0 0;font-size:12px;color:var(--ink-soft)}
.ar-nota{margin:0;font-size:12px;color:var(--ink-soft);line-height:1.4}
.ar-lista{display:grid;gap:5px}
.ar-fila{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:6px 8px;border:1px solid #d8ccb4;border-radius:6px;background:#fffdf8}
.ar-fila.bot{background:#f6efe4}
.ar-nom{display:grid;min-width:0}.ar-nom b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ar-nom small{font-size:11px;color:var(--ink-soft)}
.ar-tag{font-style:normal;font-size:10px;font-weight:700;color:#8a1a1a;margin-right:6px}
.ar-on{display:inline-block;width:8px;height:8px;border-radius:50%;background:#3ac85a;margin-right:6px;vertical-align:1px}
.ar-pts{display:grid;text-align:right;font:800 17px var(--font-ui);color:#8a1a1a;line-height:1}.ar-pts small{font-size:9.5px;color:var(--ink-soft);font-weight:700}
.ar-vacio{margin:0;color:var(--ink-soft);font-size:12.5px}
.ar-colas{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}
.ar-cola{display:grid;gap:6px;padding:12px;border:1px solid var(--frame);border-radius:8px;background:linear-gradient(#fbf7ef,#efe6d6)}
.ar-cola>b{font:800 18px var(--font-ui);color:#6a1014}.ar-cola p{margin:0;font-size:12px;color:var(--ink-soft)}
.ar-cola.activa{box-shadow:0 0 0 2px #b8222a inset}
.ar-busca{color:#8a1a1a!important;font-weight:700}
.ar-rks{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px}
.ar-rk h4,.ar-salon h4,.ar-sub{margin:0 0 6px;font:700 13px var(--font-ui);text-transform:uppercase;letter-spacing:.06em;color:#6a1014}
.ar-rk ol{list-style:none;margin:0;padding:0;display:grid;gap:3px}
.ar-rk li{display:grid;grid-template-columns:28px 1fr auto;grid-template-rows:auto auto;column-gap:6px;padding:4px 8px;border-radius:5px;background:#fffdf8;border:1px solid #e2d6c0}
.ar-rk li span{grid-row:span 2;align-self:center;font-weight:800;text-align:center}.ar-rk li small{font-size:10.5px;color:var(--ink-soft)}
.ar-rk li em{grid-row:1 / span 2;grid-column:3;align-self:center;font:800 15px var(--font-ui);font-style:normal;color:#8a1a1a}
.ar-rk li.podio{background:linear-gradient(90deg,#fff3c8,#fffdf8)}.ar-rk li.yo{box-shadow:0 0 0 2px #b8222a inset}
.ar-salon p{margin:2px 0;font-size:12px}
.ar-premios{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.ar-premio{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px;border:1px solid var(--frame);border-radius:8px;background:linear-gradient(#fbf7ef,#efe6d6);text-align:center}
.ar-premio canvas{width:180px;height:187px;border-radius:6px;background:radial-gradient(circle at 50% 72%,#6a1a14,#1a0a0a 74%)}
.ar-premio small{font-size:11px;color:var(--ink-soft)}.ar-mini{margin:0;font-size:11.5px;font-weight:600}
.ar-galeria{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:6px}
.ar-galeria>div{display:grid;justify-items:center;padding:4px;border-radius:6px;background:#f4efe6;border:1px solid #e2d6c0}
.ar-galeria>div.mia{box-shadow:0 0 0 2px #b8222a inset}
.ar-galeria canvas{width:96px;height:102px;border-radius:5px;background:radial-gradient(circle at 50% 72%,#4a1a14,#1a0a0a 74%)}
.ar-galeria small{font-size:10.5px;font-weight:700}
/* recuadro del combate */
#arenaHud{left:50%;transform:translateX(-50%);top:calc(64px + env(safe-area-inset-top,0px));width:min(470px,calc(100vw - 24px));padding:6px 8px 8px;display:grid;gap:5px;border-color:#6a1014;z-index:7}
#arenaHud .ah-t{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12px;font-weight:700;color:#6a1014}
#arenaHud .ah-t b{font:800 17px var(--font-ui);color:var(--ink)}#arenaHud .ah-t b.gana{color:#2f7f3e}#arenaHud .ah-t b.pierde{color:#b2381f}
#arenaHud .ah-cuerpo{display:grid;grid-template-columns:1fr auto 1fr;gap:6px;align-items:center}
#arenaHud .ah-vs{font:800 14px var(--font-title);color:#8a1a1a}
#arenaHud h5{margin:0 0 3px;font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft)}
#arenaHud .ah-eq.mio h5{color:#2f7f3e}
#arenaHud ul{list-style:none;margin:0;padding:0;display:grid;gap:3px}
#arenaHud li{display:grid;grid-template-columns:1fr auto;column-gap:4px;font-size:11.5px}
#arenaHud li b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#arenaHud li small{font-size:9.5px;color:var(--ink-soft)}
#arenaHud li i{grid-column:1 / span 2;height:6px;border-radius:3px;background:rgba(0,0,0,.15);overflow:hidden}
#arenaHud li u{display:block;height:100%;text-decoration:none;transition:width .25s}#arenaHud u.e0{background:linear-gradient(#5ab8ff,#2a6ad8)}#arenaHud u.e1{background:linear-gradient(#ff7a5a,#b8222a)}
#arenaHud li.caido{opacity:.45}#arenaHud li.caido b{text-decoration:line-through}
#arenaHud .ah-elo{margin:0;text-align:center;font-size:12.5px}
#arenaHud .ah-cola{margin:0;font-size:12px;color:var(--ink-soft)}
#arenaHud .ah-bot{display:flex;gap:6px;justify-content:flex-end}
@media (max-width:760px){#arenaHud{top:calc(150px + env(safe-area-inset-top,0px))}}

/* Menú (Esc): más ancho y los botones nunca se salen del cuadro (los textos largos pasan a dos líneas) */
#winSistema{width:min(400px,calc(100vw - 24px));max-height:min(88vh,720px)}
#winSistema .wbody{grid-template-columns:minmax(0,1fr);gap:7px;overflow-y:auto;overflow-x:hidden}
#winSistema .sistema .btn{white-space:normal;min-width:0;width:100%;padding:8px 12px;line-height:1.25}
#winSistema .sis-musica{min-width:0}#winSistema .sis-musica .btn{width:auto;min-width:120px}#winSistema .sis-musica input{min-width:0}
/* ---------- Ventana «Elige tu camino» (client/js/guiaClases.js) ---------- */
#winClases{width:min(900px,calc(100vw - 24px));max-height:min(92vh,860px);z-index:42}
#winClases .tb>span:first-child{flex:1;font-family:var(--font-title);font-size:19px;letter-spacing:.04em}
#winClases .gc-cuerpo{overflow-y:auto;overflow-x:hidden;padding:10px 12px 12px;display:flex;flex-direction:column;gap:10px}
.gc-intro{flex:none;margin:0;line-height:1.4}
.gc-cartas{flex:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px}
.gc-card{display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 4px 8px;border:2px solid var(--frame);border-radius:8px;background:linear-gradient(#fbf8f2,#ece4d6);cursor:pointer;font:inherit;color:var(--ink);min-width:0}
.gc-card:hover{border-color:var(--gc)}
.gc-card.on{border-color:var(--gc);box-shadow:0 0 0 2px var(--gc) inset,0 0 12px color-mix(in srgb,var(--gc) 50%,transparent);background:linear-gradient(#fffdf6,#f4ead2)}
.gc-card canvas{width:96px;height:104px}
.gc-card b{font-size:13.5px}
.gc-card small{font-size:11px;color:#8a6a2a}
.gc-roles{display:flex;flex-wrap:wrap;justify-content:center;gap:3px}
.gc-roles i,.gc-ficha i{font-style:normal;font-size:10.5px;font-weight:700;color:#fff;padding:1px 6px;border-radius:9px;line-height:1.5;text-align:center}
.gc-panel{flex:none;border:1px solid var(--frame);border-radius:8px;padding:10px 12px;background:rgba(255,255,255,.55)}
.gc-det{display:flex;gap:14px;align-items:flex-start}
.gc-det canvas{width:170px;height:190px;flex:none;border-radius:8px;background:radial-gradient(circle at 50% 70%,rgba(242,193,78,.28),transparent 70%)}
.gc-txt{flex:1;min-width:0}
.gc-txt h3{margin:0 0 6px;font-family:var(--font-title);font-size:22px}
.gc-txt h4{margin:8px 0 4px;font-size:13px}
.gc-ficha{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;margin:0}
.gc-ficha dt{font-weight:700;color:#6a5030}
.gc-ficha dd{margin:0}
.gc-estilo{margin:6px 0 0;line-height:1.4}
.gc-ramas{margin:0;padding-left:18px;line-height:1.45}
.gc-prueba{margin:8px 0 0;line-height:1.4;font-size:12.5px}
.gc-pie{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.gc-pie .btn{white-space:normal}
.mis-elegir{margin-top:6px;width:100%;white-space:normal}
@media (max-width:620px){.gc-det{flex-direction:column;align-items:center}.gc-det canvas{width:130px;height:146px}.gc-cartas{grid-template-columns:repeat(auto-fill,minmax(92px,1fr))}.gc-card canvas{width:80px;height:87px}}
/* Guía J · NPC de misiones */
.gu-item .ic.gu-npc-ic,.gu-cab .ic.gu-npc-ic{display:flex;align-items:center;justify-content:center;font-size:17px;background:linear-gradient(#fff4d0,#e8d098);line-height:1}
.gu-cab .ic.grande.gu-npc-ic{font-size:30px}

/* ============================================================
   CELULAR ACOSTADO: ventanas que quepan en ~360-430 px de alto
   ============================================================ */
/* Inventario: el personaje a la izquierda y la bolsa a la derecha, todo a la vista sin bajar */
html.movil #winInv{width:calc(100vw - 12px);height:calc(100dvh - 12px);max-height:none}
html.movil #invBody{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr);gap:6px;overflow:hidden;padding:6px 8px}
html.movil #invBody .inv-arriba{display:contents}
html.movil #invBody .inv-pj{grid-column:1;grid-row:1 / 4;order:0;align-self:start;justify-self:start;zoom:.7}
html.movil #invBody .inv-ficha{grid-column:2;grid-row:1;max-height:min(112px,26dvh);font-size:12px;padding:6px 8px}
html.movil #invBody .inv-pista{display:none}
html.movil #invBody .inv-barra{grid-column:2;grid-row:2}
html.movil #invBody .inv-grid{grid-column:2;grid-row:3;max-height:none;min-height:0;align-content:start;justify-content:start;grid-template-columns:repeat(auto-fill,46px)}
html.movil #invBody .inv-celda{width:46px;height:46px}
html.movil #invBody .inv-celda .inv-ic svg{width:32px;height:32px}
html.movil #invBody .inv-mont-nota{display:none}
/* Todas las ventanas: título más bajo y cuerpos que se deslizan con el dedo */
html.movil .win>.tb{padding-top:4px;padding-bottom:4px}
html.movil .win>.wbody{min-height:0}
/* Atributos, Arena, SHOP, Guía, Ayuda, Elige tu camino: toda la altura de la pantalla */
html.movil #winStats,html.movil #winArena,html.movil #winShop,html.movil #winAyuda,html.movil #winClases,html.movil #winTickets{max-height:calc(100dvh - 10px);width:calc(100vw - 12px)}
html.movil #winStats .wbody{zoom:.88}
/* Elige tu camino: tarjetas en una fila que se desliza y el detalle compacto */
html.movil #winClases .gc-cuerpo{padding:6px 8px;gap:6px}
html.movil #winClases .gc-intro{font-size:12px}
html.movil #winClases .gc-cartas{display:flex;overflow-x:auto;gap:6px;padding-bottom:4px;scroll-snap-type:x proximity}
html.movil #winClases .gc-card{flex:0 0 96px;scroll-snap-align:start;padding:4px 3px 6px}
html.movil #winClases .gc-card canvas{width:70px;height:76px}
html.movil #winClases .gc-card b{font-size:12px}
html.movil #winClases .gc-roles i{font-size:9.5px}
html.movil #winClases .gc-det{flex-direction:row;align-items:flex-start}
html.movil #winClases .gc-det canvas{width:110px;height:124px}
html.movil #winClases .gc-txt h3{font-size:18px}
/* Diálogo con NPC: más ancho y bajo, para que las opciones se vean sin bajar */
html.movil #winNpc{width:min(640px,calc(100vw - 12px));max-height:calc(100dvh - 10px)}
/* /casa modo (administrador): aviso arriba al centro */
.casa-chip{position:absolute;top:calc(10px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);z-index:20;display:flex;align-items:center;gap:8px;padding:6px 8px 6px 14px;border-radius:20px;background:rgba(120,24,16,.92);color:#ffe8e0;font:700 13px var(--font-ui);box-shadow:0 2px 10px rgba(0,0,0,.45)}
.casa-chip[hidden]{display:none}
.casa-chip .btn{padding:3px 10px;font-size:12px}
/* Habilidades (K): las 4 habilidades de las clases a distancia */
.hkit{flex:none;border:2px solid #c9a23a;border-radius:8px;background:linear-gradient(#fffaf0,#f6ead2);padding:6px 8px}
.hkit-t{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin-bottom:4px}
.hkit-t b{font-size:13px;color:var(--title2)}
.hkit-t small{font-size:11px;color:var(--ink-soft)}
.hkit-l{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.hnodo.kitn{background:#fff;border-color:#e2d2ae}
.hnodo.kitn .hic{position:relative}
.kitnum{position:absolute;left:-4px;top:-5px;font-size:12px;line-height:1;color:#7a4a12;text-shadow:0 0 2px #fff,0 0 2px #fff}
.hnodo .hn small.kitr{font-size:9.5px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:760px){.hkit-l{grid-template-columns:repeat(2,minmax(0,1fr))}}
html.movil .hkit-t small{display:none}
.hkit-nota{margin:2px 4px;font-size:10.5px;color:var(--ink-soft);font-style:italic}
/* Poder de Combate (PC): flecha en la esquina inferior derecha del icono · ▲ verde = mejor, ▼ roja = peor */
.pcf{position:absolute;right:-2px;bottom:-3px;z-index:2;width:15px;height:15px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:900 9.5px/1 var(--font-ui);color:#fff;box-shadow:0 0 0 1.5px #fff,0 1px 3px rgba(0,0,0,.5);pointer-events:none}
.pcf.sube{background:#22a548}.pcf.baja{background:#d83a2e}
.inv-celda .pcf{right:1px;bottom:1px}
.ic.grado-ic,.inv-celda .inv-ic,.eqm-ic{position:relative}
.pc-linea{display:block;color:var(--ink-soft)}.pc-linea b{color:var(--title2)}
.pc-sube{font-style:normal;font-weight:800;color:#1f8f3e}.pc-baja{font-style:normal;font-weight:800;color:#c0392b}
/* aviso para equipar de un toque */
/* al centro, justo debajo del personaje (antes abajo a la derecha, muy orillado) */
.eqm{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(140px + env(safe-area-inset-bottom,0px));z-index:7;display:flex;flex-direction:column;gap:6px;align-items:center;pointer-events:none}
.eqm[hidden]{display:none}
.eqm-item{display:flex;align-items:stretch;pointer-events:auto;animation:eqmEntra .35s ease-out}
.eqm-btn{display:flex;align-items:center;gap:8px;padding:6px 10px 6px 6px;border:2px solid var(--c);border-right:0;border-radius:10px 0 0 10px;background:linear-gradient(#fffaf0,#efe2c4);cursor:pointer;font:inherit;color:var(--ink);box-shadow:0 2px 10px rgba(0,0,0,.4);max-width:270px;text-align:left}
.eqm-btn:hover{background:linear-gradient(#ffffff,#f6ead2)}
.eqm-ic{flex:none;width:40px;height:40px;border-radius:8px;background:#2a1e12;display:grid;place-items:center}
.eqm-ic svg{width:34px;height:34px}
.eqm-tx{display:grid;min-width:0}.eqm-tx b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.eqm-tx small{font-size:11px;color:#1f8f3e;font-weight:700}
.eqm-x{border:2px solid var(--c);border-left:1px solid #e0d2b0;border-radius:0 10px 10px 0;background:#f6ead2;padding:0 8px;cursor:pointer;font:700 15px var(--font-ui);color:#7a6a52;box-shadow:0 2px 10px rgba(0,0,0,.4)}
@keyframes eqmEntra{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}
html.movil .eqm{bottom:calc(190px + env(safe-area-inset-bottom,0px));zoom:.85}
@media (prefers-reduced-motion:reduce){.eqm-item{animation:none}}

/* ===== Tienda de los NPC: pestañas Comprar / Vender (client/js/tiendaPnj.js) ===== */
#winNpc.tienda-modo{width:min(640px,calc(100vw - 24px));max-height:min(80vh,700px);height:min(80vh,700px);top:calc(50% - 30px);z-index:7}
#winNpc.tienda-modo #npcBody{display:flex;flex-direction:column;gap:8px;overflow:hidden;flex:1;min-height:0}
.tp-cab{display:flex;align-items:center;gap:10px}
.tp-saludo{margin:0;flex:1;font-size:12px;color:var(--ink-soft);font-style:italic;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tp-zeny{flex:none;background:#fff6dc;border:1px solid #d9b86a;border-radius:14px;padding:3px 10px;font-size:13px;color:#7a5208;font-variant-numeric:tabular-nums}
.tp-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.tp-tabs button{font:700 14px var(--font-ui);padding:8px;border:1px solid var(--frame);border-radius:6px;background:linear-gradient(#f6f0e4,#e4d8c0);color:var(--ink);cursor:pointer}
.tp-tabs button small{font-weight:600;font-size:11px;background:rgba(0,0,0,.12);border-radius:8px;padding:0 6px;margin-left:4px}
.tp-tabs button[aria-selected=true]{background:linear-gradient(#caaa80,#8f6e43);color:#fff;box-shadow:inset 0 -3px 0 #f0c45a}
.tp-tabs button[aria-selected=true] small{background:rgba(255,255,255,.25)}
.tp-panel{display:flex;flex-direction:column;gap:6px;flex:1;min-height:0}
.tp-panel>*,.tp>*{flex-shrink:0}
.tp-panel>.tp-lista,.tp>.tp-panel{flex-shrink:1}
.tp-filtros{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.tp-buscar{flex:1;min-width:120px;font:13px var(--font-ui);padding:5px 8px;border:1px solid #c9b896;border-radius:4px;background:#fff}
.tp-orden{font:12.5px var(--font-ui);padding:5px;border:1px solid #c9b896;border-radius:4px;background:#fff}
.tp-mio{font-size:12px;display:flex;align-items:center;gap:4px;white-space:nowrap;cursor:pointer}
.tp-chips{display:flex;gap:4px;overflow-x:auto;scrollbar-width:thin;padding-bottom:2px}
.tp-chips button{flex:none;font:600 12px var(--font-ui);padding:3px 9px;border-radius:12px;border:1px solid #c9b896;background:#fffaf0;color:var(--ink);cursor:pointer;white-space:nowrap}
.tp-chips button.on{background:var(--title1);border-color:var(--title1);color:#fff}
.tp-chips.grados button[style]{border-color:var(--c);color:var(--c)}
.tp-chips.grados button[style].on{background:var(--c);color:#fff}
.tp-lista{flex:1;min-height:90px;overflow:auto;border:1px solid #d9cdb4;border-radius:6px;background:rgba(255,255,255,.45);overscroll-behavior:contain}
.tp-fila{display:flex;align-items:center;gap:8px;padding:6px 8px;border-bottom:1px solid #e6dcc8;min-height:46px}
.tp-fila:hover{background:rgba(255,240,200,.45)}
.tp-fila.apagada .tp-nm b,.tp-fila.apagada .ic{opacity:.55}
.tp-fila.marcada{background:rgba(255,215,120,.35)}
.tp-fila .ic{width:34px;height:34px}
.tp-fila .ic svg{width:26px;height:26px}
.tp-nm{flex:1;min-width:0}
.tp-nm b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tp-nm b i{font-style:normal;color:var(--ink-soft);font-weight:600}
.tp-nm small{display:block;font-size:11px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tp-pc{font-style:normal;font-weight:700}.tp-pc.sube{color:#1d8a3c}.tp-pc.baja{color:#c0392b}
.tp-falta{color:#b2381f;font-weight:600}
.tp-info{flex:none;width:24px;height:24px;border-radius:50%;border:1px solid #c9b896;background:#fff;color:var(--ink-soft);font:700 12px/1 var(--font-ui);cursor:pointer}
.tp-pr{flex:none;min-width:70px;text-align:right;font-variant-numeric:tabular-nums;color:var(--gold);font-size:13px}
.tp-caro{color:#b2381f}
.tp-oro{color:#8a6a0a}
.tp-acts{flex:none;display:flex;gap:4px;align-items:center}
.tp-cant{display:flex;align-items:center;border:1px solid #c9b896;border-radius:4px;overflow:hidden;background:#fff}
.tp-cant button{border:0;background:#f3ece0;font:700 13px var(--font-ui);padding:4px 7px;cursor:pointer;color:var(--ink)}
.tp-cant input{width:38px;border:0;text-align:center;font:600 13px var(--font-ui);-moz-appearance:textfield}
.tp-cant input::-webkit-inner-spin-button{-webkit-appearance:none}
.tp-det{padding:4px 10px 8px 52px;border-bottom:1px solid #e6dcc8;background:rgba(255,255,255,.6);font-size:12px}
.tp-det p{margin:0}
.tp-vacio{padding:18px;text-align:center;color:var(--ink-soft);margin:0}
.tp-ck{flex:none;display:flex;align-items:center;cursor:pointer}
.tp-ck input{width:18px;height:18px;cursor:pointer;accent-color:#9a6a12}
.tp-botin{border:1px solid #d9b86a;background:#fff8e6;border-radius:6px;padding:8px;display:grid;gap:6px}
.tp-botin-t{display:flex;align-items:baseline;gap:8px}.tp-botin-t small{color:var(--ink-soft)}
.tp-botin-l{display:flex;flex-wrap:wrap;gap:4px;max-height:70px;overflow:auto}
.tp-botin-l .ic{position:relative}
.tp-botin-l .ic i{position:absolute;right:-3px;bottom:-4px;font:700 9px/1 var(--font-ui);font-style:normal;background:#4a3420;color:#fff;border-radius:6px;padding:1px 3px}
.tp-mas{align-self:center;font-size:11px;color:var(--ink-soft)}
.tp-vbotin{justify-self:start}
.tp-selbar{display:flex;gap:4px;align-items:center;flex-wrap:wrap;font-size:12px;color:var(--ink-soft)}
.tp-selbar .btn{padding:3px 8px;font-size:12px}
.tp-pie{display:flex;align-items:center;gap:8px;padding:6px 8px;border:1px solid #d9b86a;background:#fff8e6;border-radius:6px}
.tp-pie-t{flex:1;font-size:12.5px}
.btn.tp-peligro{background:linear-gradient(#e86a50,#b8402a)!important;color:#fff;border-color:#8a2a1a}
.tp-adios{justify-content:flex-end}
html.movil #winNpc.tienda-modo{width:calc(100vw - 8px);height:calc(100dvh - 8px);max-height:calc(100dvh - 8px);top:50%}
html.movil .tp-cab .tp-saludo{display:none}
html.movil .tp-cab{position:absolute;top:2px;right:34px;z-index:2}
html.movil .tp-zeny{padding:1px 8px;font-size:12px}
html.movil #winNpc.tienda-modo #npcBody{gap:5px;padding:6px 8px 8px}
html.movil .tp-tabs button{padding:4px;font-size:13px}
html.movil .tp-filtros{flex-wrap:nowrap}
html.movil .tp-buscar,html.movil .tp-orden{padding:3px 6px;font-size:12px}
html.movil .tp-mio{font-size:11px}
html.movil .tp-chips{gap:3px}
html.movil .tp-chips button{padding:2px 7px;font-size:11px}
html.movil .tp-fila{min-height:40px}
html.movil .tp-fila .ic{width:30px;height:30px}
html.movil .tp-adios{display:none}
html.movil .tp-botin{padding:5px 6px;gap:4px}
html.movil .tp-botin-l{max-height:38px}
html.movil .tp-fila{padding:5px 6px;gap:6px}
html.movil .tp-info{display:none}
html.movil .tp-pr{min-width:56px;font-size:12px}
html.movil .tp-saludo{-webkit-line-clamp:1}
@media (max-width:520px){
  .tp-fila{flex-wrap:wrap}
  .tp-fila .tp-nm{flex-basis:calc(100% - 120px)}
  .tp-acts{margin-left:auto}
  .tp-mio{order:3}
}

/* ===== Tutorial de Aurora (client/js/tutorial.js) ===== */
.tuto{position:absolute;z-index:4;right:calc(10px + env(safe-area-inset-right,0px));top:calc(232px + env(safe-area-inset-top,0px));width:300px;max-height:calc(100dvh - 360px);overflow:auto;
  background:linear-gradient(#fbf5e6,#efe2c4);border:1px solid #c9a23a;border-radius:10px;box-shadow:0 0 0 2px rgba(242,193,78,.25),0 8px 22px rgba(32,23,12,.4);padding:8px 10px 10px;font-size:12.5px;color:var(--ink);pointer-events:auto;display:grid;gap:6px}
.tuto.mini{background:none;border:0;box-shadow:none;padding:0;width:auto;overflow:visible}
.tuto-chip{font:700 12.5px var(--font-ui);color:#fff;background:linear-gradient(#3e5f96,#24375c);border:1px solid #e8c25a;border-radius:16px;padding:6px 12px;cursor:pointer;box-shadow:0 3px 10px rgba(0,0,0,.35);animation:tutoLat 2.4s ease-in-out infinite}
.tuto-chip b{color:#ffe08a;margin-left:4px}
.tuto-cab{display:flex;align-items:center;gap:6px}
.tuto-cab>b{flex:1;font-size:13px;color:#24375c}
.tuto-nav{display:flex;gap:2px}
.tuto-nav button,.tuto-x{border:1px solid #c9b48a;background:#fff;border-radius:4px;font:700 11px/1 var(--font-ui);padding:3px 6px;cursor:pointer;color:var(--ink)}
.tuto-nav button:disabled{opacity:.35;cursor:default}
.tuto-x{font-size:13px;padding:2px 7px}
.tuto-barra{display:grid;grid-template-columns:repeat(6,1fr);gap:3px}
.tuto-barra span{height:5px;border-radius:3px;background:#d9cbb0}
.tuto-barra span.ok{background:#3aa55a}.tuto-barra span.ahora{background:#e8b84a}
.tuto h4{margin:2px 0 0;font:700 14.5px var(--font-ui);color:#5e4329}
.tuto h4 em{font-style:normal;font-size:11px;color:#2f7f3e;margin-left:4px}
.tuto-txt p{margin:0 0 5px;line-height:1.4}
.tuto-tareas{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.tuto-tareas li{display:flex;align-items:center;gap:7px;padding:5px 7px;border-radius:6px;background:#fff;border:1px solid #e0d2b4}
.tuto-tareas li.ok{background:#e8f6e8;border-color:#9ccf9f;color:#2c6b36}
.tuto-tareas li>span:nth-child(2){flex:1}
.tuto-tareas .btn{padding:2px 8px;font-size:11.5px}
.tuto-ck{flex:none;width:18px;height:18px;border-radius:4px;border:1.5px solid #b59a6a;display:grid;place-items:center;font-size:12px;font-weight:900;color:#fff;background:#fff}
.tuto-tareas li.ok .tuto-ck{background:#3aa55a;border-color:#2c8a46}
.tuto kbd{font:700 10.5px var(--font-ui);background:#f3ece0;border:1px solid #b9a37a;border-bottom-width:2px;border-radius:4px;padding:0 5px;margin-left:2px;white-space:nowrap}
.tuto-seguir{justify-self:stretch}
.tuto-demo{display:flex;align-items:center;gap:10px;background:#fff;border:1px dashed #c9a23a;border-radius:8px;padding:6px 8px}
.tuto-buff{position:relative;border:0;background:none;padding:0;cursor:pointer}
.tuto-buff .ic{width:38px;height:38px}.tuto-buff .ic svg{width:32px;height:32px}
.tuto-buff .tgk{width:18px;height:18px;font-size:12px;line-height:17px;right:-6px;top:-6px}
.tuto-buff:not(.on) .tgk{animation:tutoPulso 1.2s ease-in-out infinite}
.tuto-grados{display:flex;flex-wrap:wrap;align-items:center;gap:3px}
.tuto-grados span{font:700 11px var(--font-ui);color:#fff;background:var(--c);border-radius:4px;padding:1px 6px;text-shadow:0 1px 0 rgba(0,0,0,.3)}
.tuto-grados i{font-style:normal;color:var(--ink-soft)}
.tuto-nota{margin:0;font-size:11.5px;color:var(--ink-soft)}
.tuto-inv{display:flex;gap:8px;align-items:center}
.tuto-inv canvas{flex:none;width:96px;height:106px;background:radial-gradient(circle at 50% 70%,#fff4d0,transparent 70%);border-radius:8px}
.tuto-inv p{margin:0;line-height:1.4}
.tuto-acts{display:flex;gap:6px}
.tuto-pie{color:var(--ink-soft);font-size:11px}
.tuto-brillo{position:relative;z-index:3;animation:tutoBrillo 1.1s ease-in-out infinite!important;outline:3px solid #ffd84a!important;outline-offset:1px}
@keyframes tutoBrillo{0%,100%{box-shadow:0 0 0 0 rgba(255,216,74,.9)}50%{box-shadow:0 0 0 8px rgba(255,216,74,0)}}
@keyframes tutoPulso{0%,100%{transform:scale(1)}50%{transform:scale(1.3)}}
@keyframes tutoLat{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@media (prefers-reduced-motion:reduce){.tuto-brillo,.tuto-chip,.tuto-buff .tgk{animation:none!important}}
html.movil .tuto{left:calc(184px + env(safe-area-inset-left,0px));right:calc(256px + env(safe-area-inset-right,0px));top:calc(6px + env(safe-area-inset-top,0px));width:auto;max-height:calc(100dvh - 100px);font-size:12px;padding:6px 8px 8px;gap:4px}
html.movil .tuto.mini{right:auto}
html.movil .tuto h4{font-size:13px}
html.movil .tuto-tareas li{padding:3px 6px}
html.movil .tuto:not(.ver-txt) .tuto-txt,html.movil .tuto:not(.ver-txt) .tuto-demo~.tuto-nota{display:none}
html.movil .tuto-inv canvas{width:70px;height:78px}
.tuto-vertxt{display:none}
html.movil .tuto-vertxt{display:inline-block;justify-self:start;border:0;background:none;color:#24375c;font:700 11.5px var(--font-ui);padding:0;text-decoration:underline;cursor:pointer}
html.movil .tuto-txt p{margin-bottom:3px}

/* globos de mensajes privados (arriba al centro, se apilan hacia abajo) y mensaje global del GM */
#globosPm{position:fixed;left:50%;top:64px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:0;z-index:40;pointer-events:none;width:min(360px,calc(100vw - 32px))}
.globoPm{pointer-events:auto;cursor:pointer;width:100%;box-sizing:border-box;margin-bottom:6px;padding:7px 12px 8px;border-radius:14px;background:rgba(40,22,58,.92);border:1px solid #c58cff;box-shadow:0 3px 12px rgba(0,0,0,.45);color:#f3e8ff;font:500 13px var(--font-ui);line-height:1.3;overflow:hidden;position:relative;animation:globoEntra .22s ease-out;transition:height .3s ease,opacity .3s ease,margin .3s ease,padding .3s ease}
.globoPm::after{content:'';position:absolute;left:22px;bottom:-1px;width:10px;height:10px}
.globoPm b{display:block;color:#e2b8ff;font-weight:700;font-size:12px;margin-bottom:2px}
.globoPm span{display:block;word-wrap:break-word;overflow-wrap:anywhere}
.globoPm.gm{border-color:#ffd27a;background:rgba(58,40,14,.94)}.globoPm.gm b{color:#ffd27a}
.globoPm:hover{border-color:#fff;filter:brightness(1.12)}
.globoPm.fuera{opacity:0;margin-bottom:0;padding-top:0;padding-bottom:0;border-width:0}
@keyframes globoEntra{from{opacity:0;transform:translateY(-8px) scale(.96)}to{opacity:1;transform:none}}
#avisoGlobal{position:fixed;left:50%;top:22%;transform:translate(-50%,-50%) scale(.96);width:min(640px,calc(100vw - 32px));box-sizing:border-box;padding:14px 22px 16px;border-radius:12px;background:rgba(30,20,8,.9);border:2px solid #ffd27a;box-shadow:0 0 24px rgba(255,190,80,.35),0 6px 20px rgba(0,0,0,.55);color:#fff4d6;text-align:center;font:600 18px var(--font-ui);line-height:1.35;overflow-wrap:anywhere;z-index:41;pointer-events:none;opacity:0;transition:opacity .35s ease,transform .35s ease}
#avisoGlobal.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
#avisoGlobal small{display:block;font:700 12px var(--font-ui);letter-spacing:.08em;text-transform:uppercase;color:#ffd27a;margin-bottom:6px}

/* ===== J › ⚔ Guía de clases (client/js/guia.js) ===== */
.gu-item.gu-clase.t2{padding-left:14px}.gu-item.gu-clase.t3{padding-left:26px}
.gu-item.gu-clase.t1 .nm b{font-size:13.5px}
.gu-tuya{font-style:normal;font-size:10px;background:#3aa55a;color:#fff;border-radius:6px;padding:0 5px;margin-left:3px;vertical-align:middle}
.gu-cab-clase .gu-prev{flex:none;width:92px;height:104px;border-radius:8px;background:radial-gradient(circle at 50% 75%,#fff4d0,#e8dcc0 70%)}
.gu-cab-clase small i{font-style:normal;color:#fff;border-radius:4px;padding:0 5px;font-size:11px;margin-left:2px}
.gu-camino{margin-top:4px;font-size:11.5px;color:#7a6a52}.gu-camino span.on{color:#2a1e12;font-weight:800}
.gu-ficha{margin:0}
.gu-rep{display:grid;grid-template-columns:42px 1fr 40px;align-items:center;gap:8px}
.gu-rep b{font-size:12px}.gu-rep em{font-style:normal;font-weight:700;font-size:12px;text-align:right}
.gu-rep-b{height:10px;border-radius:5px;background:#eee4d0;overflow:hidden}.gu-rep-b i{display:block;height:100%;background:linear-gradient(90deg,#c9a23a,#e8c25a)}
.gu-eq{display:inline-flex;align-items:center;gap:3px;white-space:nowrap;margin-right:6px}.gu-eq svg{width:18px;height:18px}
.gu-kit>span{display:flex;align-items:center;gap:6px}.gu-kit .ic{width:30px;height:30px}.gu-kit .ic svg{width:26px;height:26px}.gu-kit small{color:var(--ink-soft)}
.gu-ir{justify-self:start;margin-top:4px}
/* barra del asedio del castillo (client/js/asedio.js): arriba al centro, la ve todo el servidor */
#barraAsedio{position:fixed;left:50%;top:calc(8px + env(safe-area-inset-top,0px));transform:translateX(-50%);width:min(380px,calc(100vw - 32px));z-index:9;pointer-events:none;font:700 12px var(--font-ui);color:#fff;text-shadow:0 1px 2px #000;background:rgba(24,16,8,.82);border:2px solid #c99a3a;border-radius:10px;padding:5px 10px 6px;box-shadow:0 3px 12px rgba(0,0,0,.45);box-sizing:border-box}
#barraAsedio .ba-t{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;color:#ffe08a}
#barraAsedio .ba-s{font-variant-numeric:tabular-nums;color:#fff}
#barraAsedio .ba-b{position:relative;height:16px;border:1px solid #1a1208;border-radius:8px;background:rgba(0,0,0,.55);overflow:hidden}
#barraAsedio .ba-b i{position:absolute;left:0;top:0;bottom:0;width:0;transition:width .4s linear}
#barraAsedio .ba-b span{position:relative;display:block;text-align:center;line-height:16px;font-size:11px}
#barraAsedio .ba-d{margin-top:3px;text-align:center;font-size:11px;font-weight:600;color:#e8dcc0}
#barraAsedio.disputa{border-color:#ff6a4a;animation:baDisputa 1s ease-in-out infinite alternate}
@keyframes baDisputa{from{box-shadow:0 3px 12px rgba(0,0,0,.45)}to{box-shadow:0 0 16px rgba(255,90,60,.7)}}
body.conAsedio #target{top:calc(92px + env(safe-area-inset-top,0px))}
body.conAsedio #globosPm{top:150px}
@media (max-width:640px){#barraAsedio{top:calc(132px + env(safe-area-inset-top,0px));width:min(300px,calc(100vw - 32px))}body.conAsedio #target{top:calc(214px + env(safe-area-inset-top,0px))}}

/* cuadro de sucesos (client/js/interfaz.js → mensaje): justo encima del chat, mismo ancho; el chat queda para conversar */
#sucesos{position:fixed;left:calc(10px + env(safe-area-inset-left,0px));bottom:200px;width:min(400px,calc(100vw - 32px));border-radius:6px;background:rgba(18,22,30,.55);overflow:hidden;display:flex;flex-direction:column;pointer-events:auto}
#sucesos .suc-tit{font:700 10px var(--font-ui);letter-spacing:.08em;text-transform:uppercase;color:rgba(240,217,160,.75);padding:3px 9px 0}
#sucesos .lineas{height:92px;overflow-y:auto;overflow-x:hidden;padding:2px 9px 4px;font-size:11.5px;line-height:1.32;color:#e8ecf2;scrollbar-width:thin;scrollbar-color:rgba(240,217,160,.4) transparent;-webkit-user-select:text;user-select:text}
#sucesos .m{text-shadow:0 1px 1px rgba(0,0,0,.6);overflow-wrap:anywhere;margin-bottom:1px}
#sucesos .sis{color:#ffe39a}#sucesos .exp{color:#ddd0bf}#sucesos .obj{color:#a6f0b4}#sucesos .aviso{color:#ffa596}#sucesos .anuncio{color:#ffd27a;font-weight:700}#sucesos .dano{color:#ffb38a}#sucesos .clan{color:#ffcf7a}
html.movil #sucesos{display:none!important}

/* ===== Títulos e insignias (inventario) ===== */
.inv-tit{display:grid;grid-template-columns:auto 1fr;gap:3px 8px;align-items:center;padding:6px 0 2px;border-top:1px dashed #d8cfbf}
.inv-tit label{font-weight:800;font-size:12px;color:#a0761a}
.inv-tit select{padding:3px 6px;border:1px solid #d8cfbf;border-radius:5px;background:#fff;font-size:12.5px;min-width:0}
.inv-tit small{grid-column:1/-1;font-size:11px;color:var(--ink-soft);cursor:help}
.inv-llaves{display:grid;gap:3px;padding-top:5px;border-top:1px dashed #d8cfbf;font-size:12px}
.inv-llaves > b{font-size:12px;color:#a0761a}
.inv-llave{padding:3px 7px;border-radius:5px;background:#f1ebe0;color:#7a6e5a;cursor:help}
.inv-llave.ok{background:#fff3cf;color:#5a4410}
.inv-llave em{font-style:normal;font-weight:800;color:#a0761a}
/* (lista de títulos antigua de la ventana Estado) */
.sgrupo.titulos{margin-top:8px}
.tit-lista{display:grid;gap:4px}
.tit-fila{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 8px;padding:5px 8px;border:1px solid #e6e0d7;border-radius:5px;background:#fbf8f2}
.tit-fila.sel{border-color:#c9a23a;background:#fff6dc}
.tit-fila.bloq{opacity:.62}
.tit-fila .tit-n{font-weight:800;font-size:13px}
.tit-fila small{grid-column:1;font-size:11.5px;color:#6a604f}
.tit-fila .btn{grid-column:2;grid-row:1/span 2;padding:3px 10px;font-size:12px}

/* ===== Inspeccionar a otro personaje ===== */
#winInsp{width:min(620px,94vw);max-height:84vh;display:flex;flex-direction:column}
#winInsp .wbody.insp{overflow:auto;display:grid;gap:8px}
.insp-cab{display:flex;gap:12px;align-items:center;background:var(--panel-2);border-radius:6px;padding:6px 10px}
.insp-cab canvas{width:120px;height:140px;flex:none}
.insp-quien{display:grid;gap:3px;font-size:13px}
.insp-quien .insp-n{font-size:18px}
.insp-quien .insp-ti{font-weight:800}
.insp-pc b{color:#a0761a}
.insp-tabs{display:flex;gap:6px}
.insp-tab{flex:1;padding:6px;border:1px solid #d8cfbf;border-radius:5px;background:#fbf8f2;font-weight:700;cursor:pointer}
.insp-tab[aria-selected="true"]{background:#c9a23a;color:#fff;border-color:#a0761a}
.insp-eq{display:grid;gap:4px}
.insp-eq .srow{display:flex;align-items:center;gap:8px}
.insp-r{flex:none;width:62px;font:700 10.5px var(--font-ui);text-transform:uppercase;color:#8a7a5a}
.insp-vacio{opacity:.5}
.insp-grupo h4{margin:6px 0 4px;font:800 11px var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:#a0761a}
.insp-habs{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:5px}
.insp-hab{display:flex;gap:6px;align-items:center;background:#fbf8f2;border:1px solid #e6e0d7;border-radius:5px;padding:4px 6px;font-size:12px}
.insp-hab > span:last-child{display:grid}
.insp-hab small{color:#7a6e5a;font-size:10.5px}
.insp-rg{font-style:normal;color:#c9a23a;letter-spacing:1px;font-size:10px}
.insp-atr,.insp-stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:5px}
.insp-atr div,.insp-stats div{display:flex;justify-content:space-between;background:#fbf8f2;border:1px solid #e6e0d7;border-radius:5px;padding:5px 8px;font-size:12.5px}
.insp-atr b{color:#a0761a}

/* ===== SHOP: filtros y secciones ===== */
.shop-filtros{display:grid;gap:6px;padding:6px 12px 0}
.shop-chips{display:flex;flex-wrap:wrap;gap:4px}
.shop-chips:empty{display:none}
.shop-chip{padding:3px 9px;border:1px solid #d8cfbf;border-radius:999px;background:#fbf8f2;font-size:12px;font-weight:700;cursor:pointer;color:#5a4a2a}
.shop-chip.on{background:#c9a23a;border-color:#a0761a;color:#fff}
.shop-ctrl{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.shop-ctrl .shop-q{flex:1 1 160px;min-width:0;padding:5px 8px;border:1px solid #d8cfbf;border-radius:5px}
.shop-ctrl select{padding:4px 6px;border:1px solid #d8cfbf;border-radius:5px;background:#fff;font-size:12.5px}
.shop-n{font-size:12px;color:#7a6e5a;font-weight:700}
.shop-sec{grid-column:1/-1;margin:6px 0 0;padding-bottom:3px;border-bottom:1px solid #e0d5c0;font:800 12px var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:#a0761a}

/* ===== Guía: el monstruo de cada carta ===== */
.gu-mon{display:flex;align-items:center;gap:12px;margin:6px 0 8px;padding:6px 10px;border:1px solid #e0d5c0;border-radius:8px;background:radial-gradient(ellipse at 30% 70%,#f6efe0,#e6dcc6)}
.gu-mon canvas{width:260px;height:210px;flex:none;max-width:60%}
.gu-mon span{display:grid;gap:3px}
.gu-mon small{color:#6a604f}

/* ===== Buscador de mazmorras ===== */
#winBuscador{width:min(470px,calc(100vw - 32px))}
.wbody.bus{overflow:auto;display:grid;gap:6px}
.wbody.bus h4{margin:4px 0 0;font:800 11px var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:#a0761a}
.wbody.bus h4 small{text-transform:none;letter-spacing:0;color:#7a6e5a;font-weight:600}
.bus-motivo{margin:0;padding:6px 8px;border-radius:5px;background:#fff1e0;border:1px solid #e8b878;color:#8a4a10;font-size:12.5px}
.bus-roles{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.bus-rol{display:grid;justify-items:center;gap:2px;padding:7px 4px;border:1px solid #d8cfbf;border-radius:7px;background:#fbf8f2;cursor:pointer;text-align:center}
.bus-rol input{position:absolute;opacity:0;pointer-events:none}
.bus-rol .ico{font-size:22px}
.bus-rol small{font-size:10.5px;color:#7a6e5a}
.bus-rol.on{border-color:#3a8ac0;background:#e6f4ff;box-shadow:0 0 0 2px #9ad8ff inset}
.bus-rol.no{opacity:.45;cursor:not-allowed}
.bus-maz{display:grid;gap:4px}
.bus-m{display:grid;grid-template-columns:auto 1fr;gap:0 8px;align-items:center;padding:5px 8px;border:1px solid #e0d5c0;border-radius:6px;background:#fbf8f2;cursor:pointer}
.bus-m input{grid-row:1/span 2}
.bus-m small{color:#7a6e5a;font-size:11.5px}
.bus-m.on{border-color:#3a8ac0;background:#eef8ff}
.bus-cola{display:grid;gap:2px;padding:8px 10px;border-radius:7px;background:#e6f4ff;border:1px solid #9ad8ff}
.bus-cola small{color:#3a5a7a}
#bBuscador{font-size:9.5px;letter-spacing:-.05em;padding:0}

/* ===== Globos de cola (Arena y Buscador) ===== */
.globos-cola{position:fixed;top:10px;left:50%;transform:translateX(-50%);z-index:30;display:flex;flex-direction:column;gap:6px;align-items:center;pointer-events:none}
.globo-cola{pointer-events:auto;position:relative;display:flex;align-items:center;gap:10px;padding:7px 34px 7px 12px;border-radius:16px;border:1px solid #9ad8ff;background:rgba(14,30,48,.9);color:#e6f6ff;cursor:pointer;box-shadow:0 3px 12px rgba(0,0,0,.35);min-width:230px;animation:gcEntra .25s ease-out}
.globo-cola::after{content:'';position:absolute;left:50%;bottom:-6px;width:10px;height:10px;background:rgba(14,30,48,.9);border-right:1px solid #9ad8ff;border-bottom:1px solid #9ad8ff;transform:translateX(-50%) rotate(45deg)}
.globo-cola[data-k="arena"]{border-color:#ffb08a}.globo-cola[data-k="arena"]::after{border-color:#ffb08a}
.gc-ico{font-size:18px}
.gc-txt{display:grid;line-height:1.2}
.gc-txt b{font:700 12.5px var(--font-ui)}
.gc-txt small{font-size:11px;color:#9ec4dc}
.gc-t{margin-left:auto;font:800 15px var(--font-ui);font-variant-numeric:tabular-nums;color:#ffe08a}
.gc-x{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:22px;height:22px;border-radius:50%;border:none;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;font-size:14px;line-height:1}
.gc-x:hover{background:#c0392b}
@keyframes gcEntra{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
/* Buscador: pestañas, jefes y recomendación de misión */
.bus-tabs{display:flex;gap:6px}
.bus-tab{flex:1;padding:6px;border:1px solid #d8cfbf;border-radius:6px;background:#fbf8f2;font-weight:800;cursor:pointer}
.bus-tab.on{background:#3a8ac0;border-color:#2a6a9a;color:#fff}
.bus-cats{display:flex;flex-wrap:wrap;gap:4px}
.bus-cat{padding:3px 9px;border:1px solid #d8cfbf;border-radius:999px;background:#fbf8f2;font-size:12px;font-weight:700;cursor:pointer}
.bus-cat.on{background:#c9a23a;border-color:#a0761a;color:#fff}
.bus-cat small{opacity:.75}
.bus-jefes{display:grid;gap:4px;max-height:230px;overflow:auto;padding-right:2px}
.bus-j{display:grid;grid-template-columns:auto 1fr auto;gap:0 8px;align-items:center;padding:5px 8px;border:1px solid #e0d5c0;border-radius:6px;background:#fbf8f2;cursor:pointer}
.bus-j.on{border-color:#3a8ac0;background:#eef8ff}
.bus-j.no .bus-jn{opacity:.6}
.bus-jn{display:grid}.bus-jn small{color:#7a6e5a;font-size:11px}
.bus-je{display:flex;gap:4px;font-style:normal;font-size:11px}
.bus-je i{font-style:normal}.bus-je .vivo{color:#2a8a3a;font-weight:700}.bus-je .muerto{color:#9a7a5a}
.bus-oferta{display:grid;gap:3px;padding:8px 10px;border-radius:7px;background:#fff6dc;border:1px solid #e8c878}
.bus-oferta small{color:#6a5a3a;font-size:12px}
.bus-oferta .btn{justify-self:start;margin-top:3px}
#winBuscador{max-height:min(90vh,760px)}
#winBuscador .wbody.bus{display:flex;flex-direction:column;gap:6px}
#winBuscador .wbody.bus > *{flex:none}
#winBuscador .bus-jefes{min-height:150px;max-height:240px}
/* Buscador: pestaña Arena */
.bus-arena{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.bus-am{display:grid;gap:4px;padding:9px 10px;border:1px solid #e0d5c0;border-radius:8px;background:#fbf8f2}
.bus-am.on{border-color:#e0804a;background:#fff2e8}
.bus-am small{color:#7a6e5a;font-size:11.5px}
.bus-ac{font-size:12px;color:#8a4a10}
.bus-am .btn{justify-self:start}

/* ===== Heraldos: terremoto y aviso rojo sangriento al renacer un titán (client/js/heraldos.js) ===== */
.bus-caza{max-height:230px;overflow:auto;padding-right:2px}
.bus-m.rec{border-color:#8ac07a}
.bus-m.rec small{color:#3a7a2a}
#c.terremoto{animation:terremoto 6s linear}
@keyframes terremoto{
  0%{transform:translate(0,0)}4%{transform:translate(-9px,5px) rotate(-.4deg)}8%{transform:translate(8px,-6px) rotate(.4deg)}12%{transform:translate(-10px,-4px)}16%{transform:translate(9px,6px) rotate(-.3deg)}
  20%{transform:translate(-7px,7px)}25%{transform:translate(8px,-5px) rotate(.3deg)}30%{transform:translate(-8px,3px)}36%{transform:translate(6px,-6px)}42%{transform:translate(-6px,5px)}
  50%{transform:translate(5px,-4px)}58%{transform:translate(-4px,3px)}66%{transform:translate(4px,-3px)}75%{transform:translate(-3px,2px)}85%{transform:translate(2px,-1px)}100%{transform:translate(0,0)}}
#heraldoAviso{position:fixed;left:0;right:0;top:16%;z-index:60;pointer-events:none;text-align:center;opacity:0;font-family:Georgia,'Times New Roman',serif}
#heraldoAviso.va{animation:herEntra 1.1s cubic-bezier(.2,1.4,.4,1) forwards}
#heraldoAviso.sale{opacity:1;animation:herSale 1.2s ease-in forwards}
#heraldoAviso .her-sup{font-size:clamp(14px,2vw,20px);letter-spacing:.35em;color:#ffb0a0;text-shadow:0 0 8px #6a0000,0 2px 2px #000;font-weight:700}
#heraldoAviso .her-txt{position:relative;display:inline-block;margin:6px auto 0;padding:0 12px 10px;font-size:clamp(26px,5.2vw,64px);font-weight:900;line-height:1.05;letter-spacing:.04em;text-transform:uppercase;
  color:#9a0000;background:linear-gradient(#ff2a1a 0%,#b30000 45%,#5a0000 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 2px #200) drop-shadow(0 3px 0 #2a0000) drop-shadow(0 0 18px rgba(255,0,0,.55))}
#heraldoAviso .her-txt b{display:block;font-size:1.35em;letter-spacing:.08em}
#heraldoAviso .her-txt i{position:absolute;top:78%;width:var(--w,6px);height:0;border-radius:3px 3px 50% 50%/3px 3px 9px 9px;background:linear-gradient(#c40000,#8a0000 70%,#5a0000);-webkit-text-fill-color:initial;animation:herGota 2.8s cubic-bezier(.5,0,.9,.6) forwards}
#heraldoAviso .her-sub{margin-top:14px;font-size:clamp(13px,1.8vw,19px);color:#ffd8d0;text-shadow:0 0 6px #600,0 2px 2px #000;font-style:italic}
@keyframes herEntra{0%{opacity:0;transform:scale(1.8);filter:blur(6px)}60%{opacity:1;filter:blur(0)}100%{opacity:1;transform:scale(1)}}
@keyframes herSale{to{opacity:0;transform:translateY(-20px)}}
@keyframes herGota{0%{height:0}100%{height:var(--h,30px)}}

/* ===== Loteo de botín (client/js/loteo.js): Necesidad, Codicia o Pasar ===== */
#loteos{position:fixed;right:12px;top:150px;z-index:40;display:flex;flex-direction:column;gap:8px;width:300px;max-width:calc(100vw - 24px);pointer-events:none}
.loteo{pointer-events:auto;background:rgba(20,16,24,.94);border:2px solid var(--c);border-radius:10px;padding:8px 10px;color:#f0e6d8;box-shadow:0 0 14px color-mix(in srgb,var(--c) 45%,transparent),0 4px 12px rgba(0,0,0,.5);animation:ltEntra .3s ease-out}
.loteo.fin{opacity:.85}
.lt-cab{display:flex;gap:8px;align-items:center}
.lt-ic{width:40px;height:40px;flex:none;border:2px solid var(--c);border-radius:7px;background:#2a2230;display:grid;place-items:center}
.lt-ic svg{width:32px;height:32px}
.lt-nm{display:grid;min-width:0}
.lt-nm b{color:var(--c);font-size:14px;line-height:1.15}
.lt-nm small{font-size:11px;color:#c8bca8}
.lt-nm .lt-desc{color:#9ad8a0}
.lt-or{font-size:11px;color:#c8bca8;margin-top:5px}
.lt-no{font-size:11px;color:#ff9a8a;margin-top:2px}
.lt-tiempo{height:5px;border-radius:3px;background:#3a3040;margin:6px 0;overflow:hidden}
.lt-tiempo i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#ff6a4a,#ffd84a);transition:width .2s linear}
.lt-bt{display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px}
.lt-bt button{padding:6px 2px;border-radius:6px;border:1px solid #5a4a3a;font-weight:700;font-size:12px;cursor:pointer;color:#fff}
.lt-bt .nec{background:#2f7a3a}.lt-bt .cod{background:#9a7a1a}.lt-bt .pas{background:#5a5060}
.lt-bt button:disabled{opacity:.4;cursor:not-allowed}
.lt-res{font-size:12.5px;text-align:center;padding:3px 0;color:#ffe9b0}
@keyframes ltEntra{from{opacity:0;transform:translateX(30px)}}
@media (max-width:700px){#loteos{top:auto;bottom:170px;right:8px;width:260px}}

/* ===== Menú de misiones (client/js/misiones.js, tecla O) ===== */
#winMisiones{width:min(560px,calc(100vw - 24px))}
#winMisiones .mq{max-height:min(70vh,620px);overflow:auto;display:grid;gap:8px}
.mq-m{border:1px solid #e0d5c0;border-radius:8px;background:#fbf8f2;padding:8px 10px;display:grid;gap:4px}
.mq-m.on{border-color:#e8b84a;box-shadow:0 0 0 2px #ffe08a inset}
.mq-cab{display:flex;justify-content:space-between;gap:8px;align-items:baseline;flex-wrap:wrap}
.mq-cab b{font-size:14px}
.mq-cab small{color:#7a6e5a;font-size:11.5px}
.mq-m p{margin:0;font-size:12.5px;line-height:1.35}
.mq-donde{color:#5a6e8a}
.mq-barra{height:5px;border-radius:3px;background:#e8e0d0;overflow:hidden}
.mq-barra i{display:block;height:100%;background:linear-gradient(90deg,#e8b84a,#f2c14e)}
.mq-acts{display:flex;gap:8px;align-items:center;justify-content:flex-end}
.tp-todo{display:inline-flex;align-items:center;gap:4px;font-weight:700;margin-right:6px;cursor:pointer}
.tp-nota{font-size:12.5px;margin:4px 0 6px;color:#5a4a32}

/* ===== Tamaño ajustable de cuadros y ventanas (client/js/paneles.js) ===== */
.cuadro-zoom{position:absolute;right:1px;bottom:1px;width:15px;height:15px;z-index:6;cursor:nwse-resize;touch-action:none;pointer-events:auto;opacity:0;transition:opacity .15s;
  background:linear-gradient(135deg,transparent 0 45%,rgba(120,90,50,.85) 45% 52%,transparent 52% 64%,rgba(120,90,50,.85) 64% 71%,transparent 71% 83%,rgba(120,90,50,.85) 83% 90%,transparent 90%);border-radius:0 0 5px 0}
.con-zoom:hover>.cuadro-zoom,.cuadro-zoom:hover,.con-zoom.arrastrando>.cuadro-zoom{opacity:1}
.win>.cuadro-zoom{opacity:.6}

/* ---------- Campos de Batalla (client/js/bg.js) ---------- */
#winBG{width:min(900px,calc(100vw - 24px));max-height:min(90vh,820px);z-index:40}
#winBG .tb>span:first-child{flex:1;font-family:var(--font-title);font-size:20px;letter-spacing:.06em}
#winBG .ar-tab[aria-selected="true"]{background:linear-gradient(#6a9aff,#2a4aa8);border-color:#1a2a6a}
.ar-tab.ar-irbg{margin-left:auto;background:linear-gradient(#e8f0ff,#c8d8f4);border-color:#4a6ab0}
.bg-med b{color:#a8781a!important}
.bg-campos{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.bg-campo>b{font-size:16px!important}.bg-tipo{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:#2a4aa8}
.bg-campo .btn{align-self:end}
.bg-precio{margin:2px 0;font:800 15px var(--font-ui);color:#a8781a}
.bg-tienda .ar-premio small{font-size:11px;color:var(--ink-soft)}
#bgHud{left:50%;transform:translateX(-50%);top:calc(64px + env(safe-area-inset-top,0px));width:min(500px,calc(100vw - 24px));padding:6px 8px 8px;display:grid;gap:5px;border-color:#1a2a6a;z-index:7}
#bgHud .ah-t{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12px;font-weight:700;color:#1a2a6a}
#bgHud .ah-t b{font:800 17px var(--font-ui);color:var(--ink)}#bgHud .ah-t b.gana{color:#2f7f3e}#bgHud .ah-t b.pierde{color:#b2381f}
#bgHud .ah-vs{font:800 14px var(--font-title);color:#4a4a6a;align-self:center}
.bg-marcador{display:grid;grid-template-columns:1fr auto 1fr;gap:8px}
.bg-lado{display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:6px}
.bg-lado small{grid-column:1 / span 2;font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft)}
.bg-lado.mio small{color:#2f7f3e;font-weight:700}
.bg-lado>b{font:800 15px var(--font-ui)}.bg-lado em{font:800 20px var(--font-ui);font-style:normal;text-align:right}.bg-lado em small{display:inline;font-size:11px}
.bg-lado i{grid-column:1 / span 2;height:6px;border-radius:3px;background:#e2d8c6;overflow:hidden}.bg-lado i u{display:block;height:100%}
.bg-objs{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:11px}
.bg-o{padding:1px 6px;border-left:3px solid var(--c);background:#fbf7ef;border-radius:3px}
.bg-rv{margin:0;text-align:center;font-weight:700;color:#b2381f}

/* ---------- Títulos y logros (client/js/logros.js) ---------- */
#winLogros{width:min(820px,calc(100vw - 24px));max-height:min(88vh,780px);z-index:40;display:flex;flex-direction:column}
#winLogros .tb>span:first-child{flex:1;font-family:var(--font-title);font-size:20px;letter-spacing:.06em}
.lg-cab{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:10px 12px;border-bottom:1px solid var(--frame)}
.lg-total{display:grid;grid-template-columns:auto 1fr;column-gap:6px;align-items:baseline;min-width:170px}
.lg-total b{font:800 24px var(--font-ui);color:#a8781a}.lg-total small{font-size:11px;color:var(--ink-soft)}
.lg-total i{grid-column:1 / span 2;height:6px;border-radius:3px;background:#e2d8c6;overflow:hidden}.lg-total i u{display:block;height:100%;background:linear-gradient(90deg,#f2c14e,#e2457d)}
.lg-puesto{flex:1;font-size:12.5px}.lg-filtros{display:flex;gap:4px}
.lg-cuerpo{display:grid;grid-template-columns:190px 1fr;min-height:0;flex:1}
.lg-cats{display:grid;align-content:start;gap:3px;padding:8px;border-right:1px solid var(--frame);overflow:auto}
.lg-cats button{display:flex;justify-content:space-between;gap:6px;font:700 12.5px var(--font-ui);padding:7px 9px;border:1px solid transparent;border-radius:6px;background:none;cursor:pointer;text-align:left;color:var(--ink)}
.lg-cats button small{color:var(--ink-soft);font-weight:600}
.lg-cats button[aria-selected="true"]{background:linear-gradient(#fff3c8,#f2dc9a);border-color:#c8a040}
.lg-lista{overflow:auto;padding:8px 10px 12px;display:grid;align-content:start;gap:5px}
.lg-fila{display:grid;grid-template-columns:34px 1fr auto;gap:8px;align-items:center;padding:7px 9px;border:1px solid #e2d6c0;border-left:4px solid #c8c0b0;border-radius:6px;background:#fffdf8;opacity:.86}
.lg-fila.ok{border-left-color:var(--c);opacity:1;background:linear-gradient(90deg,#fffaf0,#fffdf8)}
.lg-fila.puesto{box-shadow:0 0 0 2px var(--c) inset}
.lg-ico{font-size:22px;text-align:center;filter:grayscale(1)}.lg-fila.ok .lg-ico{filter:none}
.lg-txt{display:grid;min-width:0}.lg-txt b{font-size:13.5px;color:var(--ink)}.lg-fila.ok .lg-txt b{color:var(--c);text-shadow:0 1px 0 rgba(0,0,0,.15)}
.lg-txt small{font-size:11.5px;color:var(--ink-soft)}
.lg-barra{display:block;height:5px;margin-top:4px;border-radius:3px;background:#e8e0d0;overflow:hidden}.lg-barra u{display:block;height:100%}
.lg-num{font-size:10.5px!important}
.lg-tag{font-weight:800;font-size:12px;color:#2f7f3e}.lg-tag.lock{color:#a89a88}
.lg-vacio{color:var(--ink-soft);font-size:12.5px}
@media (max-width:640px){.lg-cuerpo{grid-template-columns:1fr}.lg-cats{grid-auto-flow:column;grid-auto-columns:max-content;border-right:0;border-bottom:1px solid var(--frame)}}

/* ---------- Casa de Subastas (client/js/subasta.js) ---------- */
#winSubasta{width:min(1080px,calc(100vw - 24px));height:min(86vh,760px);z-index:40;display:flex;flex-direction:column}
#winSubasta .tb>span:first-child{flex:1;font-family:var(--font-title);font-size:20px;letter-spacing:.06em}
#winSubasta .sb-zeny{font:800 13px var(--font-ui);color:#ffe08a;margin-right:10px}
#winSubasta .ar-tab[aria-selected="true"]{background:linear-gradient(#e8c870,#a8781a);border-color:#6a4a10}
.sb-cuerpo{flex:1;min-height:0;border-top:1px solid var(--frame);display:flex;flex-direction:column}
.sb-buscar,.sb-vender{flex:1;min-height:0;display:grid;grid-template-columns:200px 1fr}
.sb-cats,.sb-bolsa{display:flex;flex-direction:column;gap:3px;padding:8px;border-right:1px solid var(--frame);overflow:auto;background:#f7f1e6}
.sb-cat{font:700 12.5px var(--font-ui);padding:7px 9px;border:1px solid transparent;border-radius:6px;background:none;text-align:left;cursor:pointer;color:var(--ink)}
.sb-cat.on{background:linear-gradient(#fff3c8,#f2dc9a);border-color:#c8a040}
.sb-res,.sb-ficha{display:flex;flex-direction:column;min-height:0;padding:8px 10px;gap:8px;overflow:auto}
.sb-filtros{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.sb-filtros input[type=search]{flex:1;min-width:160px}
.sb-filtros input,.sb-filtros select,.sb-acc input,.sb-campo input{font:13px var(--font-ui);padding:5px 7px;border:1px solid var(--frame);border-radius:5px;background:#fffdf8}
.sb-filtros input[type=number]{width:56px}.sb-filtros label{font-size:12px;color:var(--ink-soft);display:flex;gap:4px;align-items:center}
.sb-tabla{display:grid;gap:3px;align-content:start;flex:1;overflow:auto}
.sb-th,.sb-fila{display:grid;grid-template-columns:minmax(200px,2.4fr) 52px 92px minmax(70px,1fr) 108px 108px minmax(190px,auto);gap:8px;align-items:center}
.sb-th{position:sticky;top:0;z-index:1;padding:5px 8px;background:#efe6d6;border-radius:5px;font:700 11px var(--font-ui);text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft)}
.sb-ord{font:inherit;text-transform:inherit;letter-spacing:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}.sb-ord.on{color:#8a5a10}
.sb-fila{padding:5px 8px;border:1px solid #e2d6c0;border-radius:6px;background:#fffdf8;font-size:12.5px}
.sb-fila:hover{background:#fff7e4}.sb-fila.mia{background:#f2f6ff}.sb-fila.gano{box-shadow:0 0 0 2px #3a9a5a inset}
.sb-obj{display:flex;gap:8px;align-items:center;min-width:0}.sb-obj>span:last-child{display:grid;min-width:0}
.sb-obj b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sb-obj small,.sb-pre small{font-size:10.5px;color:var(--ink-soft)}
.sb-ic svg{width:30px;height:30px;display:block;border-radius:5px;background:#2a2622;padding:2px}
.sb-nv{text-align:center;font-weight:700}.sb-t{font-weight:700;font-size:11.5px}
.sb-vend{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-soft)}
.sb-pre{display:grid;text-align:right}.sb-pre b{font:800 13.5px var(--font-ui);color:#6a4a10}.sb-ya{color:#2f7f3e!important}
.sb-acc{display:flex;gap:4px;justify-content:flex-end;align-items:center}.sb-acc input{width:86px}
.sb-pie{display:flex;gap:6px;align-items:center;justify-content:flex-end;font-size:12px;color:var(--ink-soft)}
.sb-vacio{padding:14px}
.sb-conf{background:linear-gradient(#ff9a6a,#c8402a)!important;color:#fff!important}
.sb-bolsa h4{margin:0 0 4px;font:700 12px var(--font-ui);text-transform:uppercase;color:#6a4a10}.sb-bolsa h4 small{text-transform:none;color:var(--ink-soft);font-weight:600}
.sb-bo{display:flex;gap:7px;align-items:center;padding:4px 6px;border:1px solid transparent;border-radius:6px;background:none;cursor:pointer;text-align:left;font:12px var(--font-ui);color:var(--ink)}
.sb-bo span{display:grid;min-width:0}.sb-bo b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sb-bo small{font-size:10.5px;color:var(--ink-soft)}
.sb-bo:hover{background:#fff7e4}.sb-bo.on{background:linear-gradient(#fff3c8,#f2dc9a);border-color:#c8a040}
.sb-vender{grid-template-columns:280px 1fr}
.sb-elegido{display:flex;gap:12px;align-items:flex-start;padding:10px;border:1px solid var(--frame);border-radius:8px;background:#fbf7ef}
.sb-elegido .sb-ic svg{width:52px;height:52px}.sb-elegido>div{display:grid}.sb-elegido p{margin:4px 0 0;font-size:12px;color:var(--ink-soft)}
.sb-campo{display:grid;grid-template-columns:150px 180px 1fr;gap:8px;align-items:center;font-weight:700;font-size:13px}.sb-campo small{font-weight:500;color:var(--ink-soft)}
.sb-mal{color:#b2381f}
.sb-cuentas{padding:8px 10px;border:1px dashed #c8b890;border-radius:7px;background:#fffdf8}.sb-cuentas p{margin:3px 0;font-size:12.5px}
.sb-pub{align-self:flex-start;font-size:14px;padding:8px 18px}
.sb-ayuda{padding:12px;border:1px solid var(--frame);border-radius:8px;background:#fbf7ef}.sb-ayuda h4{margin:0 0 6px}.sb-ayuda li{font-size:12.5px;margin:3px 0}
.sb-hist{padding:10px 14px;overflow:auto;display:grid;gap:4px}.sb-hist p{margin:0;font-size:12.5px;padding:5px 8px;border-radius:5px;background:#fffdf8;border:1px solid #ece2d0}.sb-hist small{color:var(--ink-soft);margin-right:8px}
@media (max-width:760px){.sb-buscar,.sb-vender{grid-template-columns:1fr}.sb-cats{flex-direction:row;overflow-x:auto;border-right:0}.sb-th{display:none}.sb-fila{grid-template-columns:1fr 1fr}.sb-campo{grid-template-columns:1fr 1fr}}

/* ---------- Maestro Artesano (client/js/artesano.js) ---------- */
#winArtesano{width:min(1120px,calc(100vw - 24px));height:min(86vh,760px);z-index:40;display:flex;flex-direction:column}
#winArtesano .tb>span:first-child{flex:1;font-family:var(--font-title);font-size:19px;letter-spacing:.04em}
.ae-zeny{font:700 12.5px var(--font-ui);margin-right:10px;color:#fff3c8}
.ae-cuerpo{flex:1;min-height:0;display:grid;grid-template-columns:210px minmax(240px,1fr) minmax(300px,1.3fr);gap:0;border-top:1px solid var(--frame)}
.ae-filtros{padding:10px;display:flex;flex-direction:column;gap:8px;overflow:auto;border-right:1px solid var(--frame);background:#f6f0e4}
.ae-filtros input[type=search]{font:13px var(--font-ui);padding:6px 8px;border:1px solid var(--frame);border-radius:6px}
.ae-puedo{font-size:12px;display:flex;gap:6px;align-items:center}
.ae-cats,.ae-grados{display:grid;gap:3px}.ae-grados{grid-template-columns:repeat(3,1fr)}
.ae-cats button,.ae-grados button{font:600 12.5px var(--font-ui);text-align:left;padding:6px 8px;border:1px solid #d8ccb4;border-radius:6px;background:#fffdf8;cursor:pointer;display:flex;justify-content:space-between;color:var(--ink)}
.ae-grados button{justify-content:center;border-left:3px solid var(--c,#8a93a6)}
.ae-cats button.on,.ae-grados button.on{background:linear-gradient(#ffd27a,#d8901a);border-color:#8a5a10;color:#2a1a08}
.ae-cats small{color:var(--ink-soft)}
.ae-nota{margin:0;font-size:11px;color:var(--ink-soft);line-height:1.4}
.ae-lista{overflow:auto;padding:8px;display:grid;align-content:start;gap:4px;border-right:1px solid var(--frame)}
.ae-rec{display:grid;grid-template-columns:34px 1fr auto;gap:8px;align-items:center;text-align:left;padding:5px 8px;border:1px solid #e2d6c0;border-radius:6px;background:#fffdf8;cursor:pointer;font:inherit;color:var(--ink)}
.ae-rec.on{box-shadow:0 0 0 2px #d8901a inset;background:#fff6e0}.ae-rec.ok em{color:#2f7f3e;font-style:normal;font-weight:800}
.ae-ico{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:6px;background:#2a2620;border:1px solid #5a4a30}.ae-ico svg{width:26px;height:26px}
.ae-ico.grande{width:52px;height:52px}.ae-ico.grande svg{width:44px;height:44px}
.ae-nom{display:grid;min-width:0}.ae-nom b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px}.ae-nom small{font-size:11px;color:var(--ink-soft)}
.ae-ficha{overflow:auto;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.ae-cab{display:flex;gap:10px;align-items:center}.ae-cab h3{margin:0;font:800 17px var(--font-ui)}.ae-cab small{color:var(--ink-soft)}
.ae-desc{margin:0;font-size:12.5px;color:var(--ink-soft);line-height:1.4}
.ae-ficha h4{margin:4px 0 0;font:700 12px var(--font-ui);text-transform:uppercase;letter-spacing:.06em;color:#8a5a10}
.ae-req{list-style:none;margin:0;padding:0;display:grid;gap:2px;font-size:12.5px}.ae-req .ok{color:#2f7f3e}.ae-req .no{color:#b2381f}
.ae-mats{display:grid;gap:4px}
.ae-mat{display:grid;grid-template-columns:34px 1fr auto auto;gap:8px;align-items:center;padding:5px 8px;border:1px solid #e2d6c0;border-left:3px solid #b2381f;border-radius:6px;background:#fffdf8}
.ae-mat.ok{border-left-color:#2f7f3e}.ae-mnom{display:grid;min-width:0}.ae-mnom b{font-size:12.5px}.ae-mnom small{font-size:11px;color:var(--ink-soft)}
.ae-cant{font:600 12px var(--font-ui);white-space:nowrap}.ae-cant b{font-size:15px}.ae-mat.ok .ae-cant b{color:#2f7f3e}
.ae-mat .btn{padding:3px 7px}
.ae-pie{margin-top:auto;display:flex;flex-direction:column;gap:6px;padding-top:6px;border-top:1px solid #e2d6c0}
.ae-fab{font-size:15px;padding:9px}.ae-aviso{margin:0;font-size:12px;color:#a8781a;font-weight:700}
.ae-vacio{margin:8px;color:var(--ink-soft);font-size:12.5px}
html.movil #winArtesano{width:calc(100vw - 12px);height:calc(100dvh - 10px)}
@media (max-width:820px){.ae-cuerpo{grid-template-columns:1fr;grid-auto-rows:auto}.ae-filtros,.ae-lista{border-right:0;border-bottom:1px solid var(--frame)}.ae-lista{max-height:30vh}}
/* Botón AUTO · batalla automática (client/js/autoBatalla.js) */
.aviso-pts.auto{background:linear-gradient(#5a6b86,#34425a);color:#e6f0ff}
.aviso-pts.auto .au-mas{position:absolute;top:-7px;right:-7px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:12px;font-weight:900;line-height:1;background:#fff;color:#34425a;box-shadow:0 2px 6px rgba(0,0,0,.35)}
.aviso-pts.auto.on{background:linear-gradient(#36d6a0,#138a64);box-shadow:0 0 0 2px #b8ffe6,0 0 12px rgba(54,214,160,.6)}
.aviso-pts.auto.on::after{content:'';position:absolute;inset:-4px;border-radius:16px;box-shadow:0 0 14px rgba(54,214,160,.9);opacity:0;animation:auPulso 1.6s ease-in-out infinite;pointer-events:none;will-change:opacity}
.aviso-pts.auto.on .sim{animation:auGiro 2.4s linear infinite}
.aviso-pts.auto.agotado{background:linear-gradient(#7a7f88,#4d525a);opacity:.85}
@keyframes auPulso{50%{opacity:1}} /* solo opacidad: la anima la tarjeta de video sin repintar (antes la sombra se repintaba en cada cuadro) */
@keyframes auGiro{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
.auto-panel{position:absolute;left:50%;bottom:calc(96px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);width:min(340px,calc(100vw - 32px));z-index:7;padding:0 12px 10px;border-radius:10px;border:1px solid #7d603a;background:rgba(253,250,244,.97);color:var(--ink);font:13px var(--font-ui);box-shadow:0 8px 24px rgba(0,0,0,.4)}
.auto-panel .tb{display:flex;align-items:center;justify-content:space-between;margin:0 -12px 6px;padding:7px 12px;border-radius:10px 10px 0 0;background:linear-gradient(#8a6a3e,#6a4e2a);color:#ffe9b8;font-weight:800}
.auto-panel .tb .x{background:none;border:0;color:#ffe9b8;font-size:18px;cursor:pointer;line-height:1}
.auto-panel p{margin:6px 0;line-height:1.35}
.auto-panel .au-tiempo{padding:6px 8px;border-radius:6px;background:#eef6ff;border:1px solid #b9d4f2}
.auto-panel .au-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.auto-panel .btn.oro{background:linear-gradient(#ffd86a,#d8a020);border-color:#9a6c10;color:#3a2600;font-weight:800}
.auto-panel .au-mon{font-size:11.5px;color:#6a5a44}
/* Guía del titán (client/js/guiaTitan.js): lectura obligatoria antes de la guarida */
.guia-titan{position:absolute;inset:0;z-index:40;display:grid;place-items:center;background:rgba(10,6,4,.6);pointer-events:auto}
.guia-titan .gt-caja{width:min(640px,calc(100vw - 32px));max-height:min(86vh,760px);display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--frame);border-radius:8px;box-shadow:0 10px 40px rgba(0,0,0,.6);font:13.5px var(--font-ui);color:var(--ink)}
.guia-titan .tb{font-size:14px;padding:8px 12px}
.guia-titan .tb .x{background:none;border:0;color:#fff;font-size:20px;cursor:pointer;line-height:1}
.guia-titan .gt-cuerpo{overflow:auto;padding:10px 16px;-webkit-user-select:text;user-select:text}
.guia-titan h4{margin:12px 0 4px;font:700 14px var(--font-ui);color:var(--title1)}
.guia-titan p{margin:6px 0;line-height:1.4}
.guia-titan ul{margin:0;padding-left:18px}
.guia-titan li{margin:5px 0;line-height:1.35}
.guia-titan .gt-tec li span{color:#4a3a28}
.guia-titan .gt-tec li em{color:#2f6a3a;font-style:normal;font-weight:600}
.guia-titan .gt-tec li.letal b{color:#a8281a}
.guia-titan .gt-letal{display:inline-block;margin-left:4px;padding:0 6px;border-radius:8px;background:#a8281a;color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.03em}
.guia-titan .gt-tec.comun li b{color:#5a4632}
.guia-titan .gt-estilo{font-weight:700;color:#8a4a12}
.guia-titan .gt-obl{padding:6px 10px;border-radius:6px;background:#fff1d6;border:1px solid #d8a85a;font-weight:600}
.guia-titan .gt-nota{font-size:12px;color:var(--ink-soft)}
.guia-titan .gt-pie{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;padding:10px 16px;border-top:1px solid #cdb994;background:#efe4cb;border-radius:0 0 8px 8px}
.guia-titan .gt-pie label{display:flex;gap:6px;align-items:center;font-weight:600;cursor:pointer}
.guia-titan .gt-pie input{width:18px;height:18px}