:root{
  --fondo:#120d24; --fondo2:#1d1638; --borde:#3a3066; --violeta:#7b4dff; --corona:#f2c46d;
  --texto:#e9e4ff; --tenue:#9a91c2; --peligro:#e2445c; --energia:#4fa3ff; --xp:#5ee6d0;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;background:var(--fondo);color:var(--texto);
  font-family:"Rajdhani","Segoe UI",system-ui,sans-serif;font-size:17px;overflow:hidden;
  user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;touch-action:manipulation;-webkit-text-size-adjust:100%}
canvas#c{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
#nocheCv{position:fixed;inset:0;width:100%;height:100%;display:none;pointer-events:none}
button{font-family:inherit}
.oculto{display:none !important}

/* ---------- Pantallas ---------- */
.overlay{position:fixed;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;
  justify-content:safe center;gap:14px;text-align:center;overflow-y:auto;background:rgba(10,7,22,.88);
  padding:calc(24px + env(safe-area-inset-top,0px)) 18px calc(24px + env(safe-area-inset-bottom,0px))}
.eclipse{width:96px;height:96px;flex-shrink:0;border-radius:50%;background:var(--fondo);
  box-shadow:0 0 0 3px var(--corona),0 0 60px 12px rgba(242,196,109,.4)}
.eclipse.chico{width:64px;height:64px}
h1{font-family:"Marcellus",Georgia,serif;font-weight:400;font-size:clamp(2.5rem,9vw,4.4rem);line-height:1;letter-spacing:.03em}
h2{font-family:"Marcellus",Georgia,serif;font-weight:400;font-size:clamp(1.7rem,6vw,2.6rem);line-height:1.1}
h3{font-family:"Marcellus",Georgia,serif;font-weight:400;font-size:1.25rem;color:var(--corona)}
.tenue{color:var(--tenue);max-width:48ch;line-height:1.4}
.nota{color:var(--tenue);font-size:.9rem}
.panel{width:min(380px,100%);background:var(--fondo2);border:1px solid var(--borde);border-radius:10px;padding:18px;text-align:left}
.panel.ancho{width:min(580px,100%)}
.menu{display:flex;flex-direction:column;gap:10px;width:min(320px,100%)}
.menu.fila{flex-direction:row;width:min(420px,100%)}
.menu.fila .btn{flex:1}
.btn{padding:.8rem 1.2rem;border-radius:6px;border:1px solid var(--violeta);background:transparent;
  color:var(--texto);font-weight:700;font-size:1.02rem;cursor:pointer}
.btn.principal{background:var(--violeta)}
.btn.dorado{border-color:var(--corona);color:var(--corona)}
.btn.peligro{background:var(--peligro);border-color:var(--peligro)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn:focus-visible,.tab:focus-visible,.clase:focus-visible,.pj-card:focus-visible,.mas:focus-visible,.perfil:focus-visible{outline:2px solid var(--corona);outline-offset:3px}

.tabs{display:flex;margin-bottom:14px;border-bottom:1px solid var(--borde)}
.tab{flex:1;background:none;border:none;color:var(--tenue);padding:10px;font-weight:700;font-size:1rem;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.tab.activa{color:var(--texto);border-bottom-color:var(--corona)}
.form{display:flex;flex-direction:column;gap:12px}
label{display:flex;flex-direction:column;gap:4px;font-weight:600;color:var(--tenue);text-align:left}
input{padding:.75rem;border-radius:6px;border:1px solid var(--borde);background:var(--fondo);color:var(--texto);font:inherit;font-size:16px}
input:focus{outline:2px solid var(--violeta);outline-offset:0}
.campo{width:min(380px,100%)}
.error{color:#ff8a9b;min-height:1.2em;font-size:.95rem}
.aviso{color:#ff8a9b;font-weight:700}

.lista{display:flex;flex-direction:column;gap:10px;width:min(440px,100%)}
.pj-card{display:flex;align-items:center;gap:14px;padding:14px;border-radius:8px;border:1px solid var(--borde);
  background:var(--fondo2);color:var(--texto);text-align:left;cursor:pointer;width:100%}
.pj-card:hover{border-color:var(--corona)}
.pj-card .icono{width:48px;height:48px;overflow:hidden;border-radius:50%;flex-shrink:0;border:2px solid;display:grid;place-items:center;
  font-family:"Marcellus",serif;font-size:1.3rem;background:var(--fondo)}
.pj-card div{flex:1}
.pj-card strong{display:block;font-size:1.15rem}
.pj-card small{color:var(--tenue)}
.pj-fila{display:flex;gap:8px;align-items:stretch}
.borrar{background:none;border:1px solid var(--borde);color:var(--tenue);border-radius:8px;padding:0 12px;cursor:pointer;font-weight:600}
.borrar.confirmar{border-color:var(--peligro);color:#ff8a9b}
.vacio{color:var(--tenue);padding:18px;border:1px dashed var(--borde);border-radius:8px}

.clases{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:780px}
.clase{flex:1 1 210px;max-width:250px;padding:14px;border-radius:8px;border:1px solid var(--borde);background:var(--fondo2);
  color:var(--texto);text-align:left;cursor:pointer}
.clase[aria-pressed="true"]{border-color:var(--corona);box-shadow:0 0 0 1px var(--corona)}
.clase strong{display:block;font-size:1.15rem;margin-bottom:2px}
.clase p{color:var(--tenue);font-size:.95rem;margin-bottom:8px}
.clase dl{font-size:.93rem;display:grid;grid-template-columns:auto 1fr;gap:2px 8px}
.clase dt{color:var(--corona);font-weight:700}

/* Perfil */
.perfil-cab{display:flex;gap:16px;align-items:center;margin-bottom:14px}
.rango-grande{width:76px;height:76px;flex-shrink:0;border-radius:50%;border:3px solid currentColor;display:grid;place-items:center;
  font-family:"Marcellus",serif;font-size:2.6rem;background:var(--fondo);box-shadow:0 0 22px -4px currentColor}
.perfil-cab h3{font-size:1.5rem;color:var(--texto)}
.perfil-cab p{color:var(--tenue);line-height:1.35}
.xpbar{height:8px;background:#2a2148;border-radius:4px;overflow:hidden;margin:4px 0 14px}
.xpbar span{display:block;height:100%;background:var(--xp)}
.stats{display:grid;grid-template-columns:1fr auto auto;gap:8px 12px;align-items:center}
.stats .val{font-weight:700;text-align:right;min-width:2.5ch}
.mas{width:30px;height:30px;border-radius:50%;border:1px solid var(--corona);background:none;color:var(--corona);font-weight:700;cursor:pointer}
.mas:disabled{visibility:hidden}
.derivados{display:grid;grid-template-columns:1fr auto 1fr auto;gap:4px 14px;color:var(--tenue);margin-top:12px;font-size:.95rem}
.derivados b{color:var(--texto);text-align:right}
.registro{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:8px}
.registro div{background:var(--fondo);border:1px solid var(--borde);border-radius:6px;padding:6px 0;text-align:center}
.registro b{display:block;font-family:"Marcellus",serif;font-size:1.15rem}
.registro span{font-weight:700}
.habs{margin-top:12px;display:flex;flex-direction:column;gap:6px;font-size:.95rem}
.habs b{color:var(--corona)}
.seccion{margin-top:16px}
.seccion h3{margin-bottom:6px}
.linea{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid var(--borde)}
.linea:last-child{border-bottom:none}
.acertijo{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.acertijo .btn{text-align:left}
.linea span:first-child{color:var(--tenue)}
.compras{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.compras .btn{display:flex;justify-content:space-between;gap:10px;text-align:left}
.gatos{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:560px}
.gato{width:120px;padding:10px 8px;border-radius:8px;border:1px solid var(--borde);background:var(--fondo2);color:var(--texto);cursor:pointer;font-weight:700}
.gato[aria-pressed="true"]{border-color:var(--corona);box-shadow:0 0 0 1px var(--corona)}
.gato canvas{display:block;width:76px;height:76px;margin:0 auto 6px}
.gato:focus-visible{outline:2px solid var(--corona);outline-offset:3px}
.controles{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;text-align:left}
.controles dt{color:var(--corona);font-weight:700}

/* ---------- HUD ---------- */
#hud,#slots,#movil,#btnInteractuar,#jefe{display:none}
body.jugando #hud{display:flex}
body.jugando #jefe:not(.oculto){display:block}
body.jugando #btnInteractuar:not(.oculto){display:block}
body.jugando.combate:not(.tactil) #slots{display:flex}
body.jugando.tactil #movil{display:grid}
body.jugando.tactil:not(.combate) #mAtk,body.jugando.tactil:not(.combate) #mHab{display:none}

#hud{position:fixed;top:0;left:0;right:0;z-index:3;justify-content:space-between;align-items:flex-start;
  padding:calc(10px + env(safe-area-inset-top,0px)) 12px 0;pointer-events:none}
.hud-izq{display:flex;gap:12px;align-items:flex-start}
.perfil{pointer-events:auto;position:relative;width:58px;height:58px;flex-shrink:0;border-radius:50%;border:2px solid var(--corona);
  padding:0;background:var(--fondo2);cursor:pointer;box-shadow:0 0 14px -4px var(--corona)}
#avatar{width:100%;height:100%;border-radius:50%;display:block}
.rango-badge{position:absolute;right:-6px;bottom:-6px;width:26px;height:26px;border-radius:50%;background:var(--fondo);
  border:2px solid currentColor;font-family:"Marcellus",serif;font-size:15px;line-height:22px;text-align:center}
.hud-barras{width:min(220px,40vw)}
.hud-barras .pj{font-weight:700;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dorado{color:var(--corona)}
.barra{position:relative;height:15px;background:#2a2148;border-radius:3px;overflow:hidden;margin-bottom:4px}
.barra span{position:absolute;top:0;bottom:0;left:0;width:100%;background:var(--peligro)}
.barra em{position:absolute;inset:0;font-style:normal;font-size:11px;line-height:15px;text-align:center;font-weight:700}
.barra.en span{background:var(--energia)}
.barra.xp{height:5px}
.barra.xp span{background:var(--xp)}
.pill{pointer-events:auto;margin-top:4px;padding:4px 10px;border-radius:20px;border:1px solid var(--corona);
  background:rgba(18,13,36,.8);color:var(--corona);font-weight:700;font-size:.9rem;cursor:pointer}
.hud-der{display:flex;gap:10px;align-items:center;pointer-events:auto}
.dato{font-weight:700;background:rgba(18,13,36,.7);padding:4px 10px;border-radius:20px}
.redondo{width:40px;height:40px;border-radius:50%;border:1px solid var(--violeta);background:rgba(18,13,36,.75);color:var(--texto);font-size:1.1rem;cursor:pointer}

#jefe{position:fixed;left:50%;transform:translateX(-50%);top:calc(84px + env(safe-area-inset-top,0px));
  width:min(420px,60%);z-index:3;text-align:center;pointer-events:none}
#jefe p{font-family:"Marcellus",Georgia,serif;color:#ff8a9b;margin-bottom:4px;text-shadow:0 0 8px #000}
#jefe .barra{height:10px;border:1px solid var(--peligro)}

#banner{position:fixed;left:0;right:0;top:24%;z-index:4;text-align:center;pointer-events:none;padding:0 16px;
  font-family:"Marcellus",Georgia,serif;font-size:clamp(1.5rem,5vw,2.5rem);opacity:0;transition:opacity .35s;
  text-shadow:0 0 18px rgba(123,77,255,.9),0 2px 4px #000}
#banner small{display:block;font-family:"Rajdhani",sans-serif;font-size:1rem;color:var(--tenue)}
#banner.ver{opacity:1}
#fundido{position:fixed;inset:0;z-index:9;background:#000;opacity:0;pointer-events:none;transition:opacity .5s}
#fundido.ver{opacity:1}

#btnInteractuar{position:fixed;left:50%;transform:translateX(-50%);z-index:4;max-width:90vw;
  bottom:calc(92px + env(safe-area-inset-bottom,0px))}

#slots{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:3;gap:8px}
.slot{position:relative;width:118px;padding:8px 6px;border-radius:8px;border:1px solid var(--borde);background:rgba(18,13,36,.85);
  text-align:center;overflow:hidden;--cd:0}
.slot b{display:block;font-size:.78rem;color:var(--tenue)}
.slot span{font-weight:700;font-size:.9rem}
.slot::after{content:"";position:absolute;left:0;right:0;bottom:0;height:calc(var(--cd) * 100%);background:rgba(0,0,0,.6)}
#slot1{border-color:var(--corona)}
#slot2{border-color:var(--violeta)}

#movil{position:fixed;right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:3;
  grid-template-columns:auto auto;grid-template-rows:auto auto;gap:10px;align-items:end}
.mbtn{position:relative;width:62px;height:62px;border-radius:50%;border:2px solid var(--violeta);background:rgba(18,13,36,.78);
  color:var(--texto);font-size:1.5rem;overflow:hidden;touch-action:none;--cd:0}
.mbtn::after{content:"";position:absolute;inset:0;background:conic-gradient(rgba(0,0,0,.65) calc(var(--cd) * 360deg),transparent 0)}
.mbtn.grande{width:82px;height:82px;border-color:var(--corona);grid-row:span 2;align-self:center}
.mbtn.chico{width:50px;height:50px;font-size:1.2rem;justify-self:center}

/* ---------- Barra de acción ---------- */
#barra{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:3;display:none;
  gap:5px;align-items:center;padding:6px;border-radius:10px;background:rgba(12,8,25,.85);border:1px solid var(--borde)}
body.jugando #barra{display:flex}
.accion{position:relative;width:50px;height:50px;padding:0;border-radius:6px;border:1px solid #5a4d8a;background:#120d24;cursor:pointer;
  overflow:hidden;--cd:0;touch-action:none;flex-shrink:0}
.accion canvas{width:100%;height:100%;display:block}
.accion kbd{position:absolute;top:2px;left:4px;font:700 11px Rajdhani,sans-serif;color:#fff;text-shadow:0 0 3px #000,0 0 3px #000}
.accion::after{content:"";position:absolute;inset:0;pointer-events:none;background:conic-gradient(rgba(0,0,0,.72) calc(var(--cd) * 360deg),transparent 0)}
.accion.clic{border-color:var(--corona)}
.accion.bloqueado canvas{filter:grayscale(1) brightness(.35)}
.accion .bloq{position:absolute;left:0;right:0;bottom:4px;font:700 11px Rajdhani,sans-serif;color:#ff8a9b;text-align:center;z-index:1}
.accion .num{position:absolute;right:4px;bottom:2px;font:700 12px Rajdhani,sans-serif;font-style:normal;color:#fff;text-shadow:0 0 3px #000;z-index:1}
.accion:focus-visible{outline:2px solid var(--corona);outline-offset:2px}
.sep{width:1px;height:40px;background:var(--borde);margin:0 3px}
body.tactil .accion.clic,body.tactil .accion.poc,body.tactil .sep{display:none}
body.tactil .accion{width:44px;height:44px}
body.tactil #barra{left:calc(50% - 60px)}

/* ---------- Ventana de perfil estilo MMO ---------- */
#pPerfil{justify-content:center}
.ventana{width:min(740px,100%);max-height:100%;display:flex;flex-direction:column;text-align:left;overflow:hidden;
  background:linear-gradient(#1d1638,#140e28);border:1px solid #5a4d8a;border-radius:12px;box-shadow:0 0 0 1px #000,0 20px 60px rgba(0,0,0,.6)}
.ventana-cab{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;border-bottom:1px solid var(--borde);background:rgba(0,0,0,.25)}
.ventana-cab h2{font-size:1.55rem}
.cerrar{width:36px;height:36px;flex-shrink:0;border-radius:6px;border:1px solid var(--borde);background:none;color:var(--texto);font-size:1rem;cursor:pointer}
#vCuerpo{padding:14px 16px;overflow-y:auto;flex:1;min-height:0}
.pestanas{display:flex;border-top:1px solid var(--borde);background:rgba(0,0,0,.3)}
.pestanas button{flex:1;padding:12px 4px;background:none;border:none;border-top:2px solid transparent;color:var(--tenue);font-weight:700;font-size:.98rem;cursor:pointer}
.pestanas button[aria-selected="true"]{color:var(--corona);border-top-color:var(--corona);background:rgba(242,196,109,.07)}
.sub{color:var(--tenue);margin-bottom:12px}
.equipo{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center}
.equipo .col{display:flex;flex-direction:column;gap:8px;min-width:0}
.ranura{display:flex;align-items:center;gap:8px;padding:5px;border-radius:8px;border:2px solid var(--rc);background:#0e0a1c;color:var(--texto);
  cursor:pointer;text-align:left;min-height:50px;min-width:0}
.ranura span{width:36px;height:36px;flex-shrink:0;display:grid;place-items:center;font-size:1.25rem;background:#1d1638;border-radius:6px}
.ranura small{font-size:.86rem;line-height:1.15;color:var(--rc);font-weight:700;overflow:hidden;text-overflow:ellipsis}
.ranura.vacia small{color:var(--tenue);font-weight:600}
.ranura.sel,.celda.sel{box-shadow:0 0 0 2px var(--corona)}
.figura canvas{width:150px;height:188px;display:block;border-radius:10px;border:1px solid var(--borde)}
.detalle{margin:14px 0;padding:12px;border-radius:8px;background:rgba(0,0,0,.25);border:1px solid var(--borde)}
.tarjeta{border-left:3px solid var(--rc);padding-left:10px;display:flex;flex-direction:column;gap:2px}
.tarjeta b{color:var(--rc);font-size:1.1rem}
.tarjeta small{color:var(--tenue)}
.verde{color:#5fe08a}.rojo{color:#ff8a9b}
.acciones-obj{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.acciones-obj .btn{padding:.5rem .9rem;font-size:.95rem}
.lista-obj{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.mini-obj{display:flex;justify-content:space-between;gap:8px;padding:8px 10px;border-radius:6px;border:1px solid var(--rc);background:#0e0a1c;
  color:var(--rc);font-weight:700;cursor:pointer;text-align:left}
.mini-obj small{color:var(--tenue)}
.bolsa{display:grid;grid-template-columns:repeat(8,1fr);gap:6px}
.ico-obj{display:inline-block;width:36px;height:36px;background-repeat:no-repeat;background-size:auto 36px;image-rendering:pixelated;vertical-align:middle}
.celda .ico-obj{width:80%;height:80%;background-size:auto 100%}
.celda{aspect-ratio:1;border-radius:6px;border:2px solid var(--rc);background:#0e0a1c;font-size:1.35rem;cursor:pointer;display:grid;place-items:center;padding:0}
.celda.vacia{border:1px solid #2a2148;background:#0b0817;cursor:default}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.dos h3{margin-bottom:6px}
.puntos{font-weight:700;margin-bottom:8px}
.libro{display:flex;flex-direction:column;gap:10px}
.hechizo{display:flex;gap:12px;padding:10px;border-radius:8px;background:rgba(0,0,0,.25);border:1px solid var(--borde)}
.hechizo canvas{width:56px;height:56px;border-radius:8px;flex-shrink:0;border:1px solid #5a4d8a}
.hechizo.bloq canvas{filter:grayscale(1) brightness(.4)}
.hechizo.bloq b{color:var(--tenue)}
.hechizo small{color:var(--corona);display:block}
.hechizo p{color:var(--tenue);font-size:.95rem;margin-top:2px}
.teclas{display:flex;gap:5px;margin-top:6px;flex-wrap:wrap}
.teclas button{width:34px;height:30px;border-radius:5px;border:1px solid var(--borde);background:#0e0a1c;color:var(--texto);font-weight:700;cursor:pointer}
.teclas button[aria-pressed="true"]{background:var(--violeta);border-color:var(--violeta)}
@media (max-width:600px){
  .dos{grid-template-columns:1fr}
  .bolsa{grid-template-columns:repeat(6,1fr)}
  .equipo{grid-template-columns:1fr 1fr}
  .figura{grid-column:1 / -1;order:-1;justify-self:center}
  .pestanas button{font-size:.85rem}
}

/* ---------- Interfaz estilo WoW: marcos, barra, micromenú, chat ---------- */
#jefe{display:none !important}
#hud{right:auto;gap:18px;align-items:flex-start;flex-wrap:wrap}
.marco{position:relative;display:flex;align-items:center;pointer-events:auto;
  background:linear-gradient(#211a36,#0f0b1c);border:2px solid #b8933f;border-radius:40px 8px 8px 40px;
  padding:4px 10px 4px 4px;box-shadow:0 2px 10px rgba(0,0,0,.65),inset 0 0 0 1px rgba(0,0,0,.6)}
.marco .retrato{width:64px;height:64px;flex-shrink:0;border-radius:50%;border:2px solid #d9b860;padding:0;background:#120d24;overflow:hidden;cursor:pointer}
.marco .retrato canvas{width:100%;height:100%;display:block}
.nivel-badge{position:absolute;left:46px;bottom:-5px;min-width:24px;height:24px;padding:0 4px;border-radius:12px;background:#2a1b0a;
  border:2px solid #d9b860;color:#ffd76a;font:700 12px/20px Rajdhani,sans-serif;text-align:center}
.marco-info{width:min(200px,34vw);margin-left:8px}
.marco-nombre{display:flex;justify-content:space-between;gap:8px;font-family:"Marcellus",Georgia,serif;font-size:15px;color:#ffd76a;
  margin-bottom:3px;text-shadow:0 1px 2px #000;white-space:nowrap;overflow:hidden}
.rango-txt{font-family:"Rajdhani",sans-serif;font-weight:700;font-size:13px}
.marco .barra{height:14px;border:1px solid #000;border-radius:2px;background:#151515;margin-bottom:2px}
.marco .barra em{line-height:12px;text-shadow:0 1px 1px #000}
.marco .barra.vida span{background:linear-gradient(#41d65c,#128a29)}
.marco .barra.en span{background:linear-gradient(#5591ff,#1c45b3)}
.marco.objetivo{border-radius:8px 40px 40px 8px;padding:4px 4px 4px 10px}
.marco.objetivo .marco-info{margin:0 8px 0 0}
.marco.objetivo .barra{height:16px}
.marco.elite{border-color:#ffd76a;box-shadow:0 0 14px rgba(255,215,106,.45),0 2px 10px rgba(0,0,0,.65)}
.ret-obj{width:52px !important;height:52px !important;display:grid;place-items:center;cursor:default !important}
.ret-obj span{width:34px;height:34px;border-radius:50%;display:block;box-shadow:inset -5px -5px 0 rgba(0,0,0,.3)}
#btnPuntos{position:absolute;left:78px;top:calc(100% + 6px);margin:0}

#chat{position:fixed;left:12px;bottom:calc(14px + env(safe-area-inset-bottom,0px));width:min(380px,32vw);height:170px;z-index:2;
  display:none;flex-direction:column;font-size:14px;font-weight:600;text-shadow:0 1px 2px #000,0 0 3px #000;
  border-radius:6px;background:rgba(0,0,0,.38);border:1px solid rgba(201,164,60,.35)}
#chat:hover{background:rgba(0,0,0,.55)}
.chat-cab{display:flex;justify-content:space-between;align-items:center;padding:2px 6px 2px 8px;cursor:move;user-select:none;
  font:600 12px "Marcellus",Georgia,serif;color:#ffd100;background:linear-gradient(rgba(58,44,20,.9),rgba(26,19,10,.9));border-radius:6px 6px 0 0;border-bottom:1px solid rgba(201,164,60,.4)}
.chat-cab button{width:18px;height:16px;line-height:12px;padding:0;border:1px solid #6e5420;border-radius:3px;background:#2a1d0c;color:#ffd100;cursor:pointer;font-weight:700}
#chatLog{flex:1;overflow-y:auto;padding:4px 8px;display:flex;flex-direction:column;gap:1px;scrollbar-width:thin;scrollbar-color:#6e5420 transparent}
#chatLog p:first-child{margin-top:auto}
.chat-rs{position:absolute;right:0;top:0;width:14px;height:14px;cursor:nesw-resize;transform:translate(40%,-40%);
  background:linear-gradient(45deg,transparent 45%,#c9a43c 45%,#c9a43c 55%,transparent 55%);border-radius:2px}
#chat.min{height:auto !important}
#chat.min #chatLog,#chat.min .chat-rs{display:none}
body.jugando:not(.tactil) #chat{display:flex}
#chat p{transition:opacity 1.5s}
#chat p.viejo{opacity:.4}

#panelAccion{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(8px + env(safe-area-inset-bottom,0px));z-index:3;
  display:none;flex-direction:column;align-items:stretch;gap:3px}
body.jugando #panelAccion{display:flex}
#panelAccion #barra{position:static;transform:none;background:linear-gradient(#2b2238,#16111f);border:2px solid #b8933f;border-radius:6px;padding:5px}
body.tactil #panelAccion{left:calc(50% - 70px)}
.xp{position:relative;height:10px;background:#120c1a;border:1px solid #b8933f;border-radius:3px;overflow:hidden}
.xp span{position:absolute;top:0;bottom:0;left:0;background:linear-gradient(#c070ff,#6b2fc0)}
.xp em{position:absolute;inset:0;font:700 9px/9px Rajdhani,sans-serif;font-style:normal;text-align:center;color:#fff;text-shadow:0 1px 1px #000}

#micro{position:fixed;right:12px;bottom:calc(8px + env(safe-area-inset-bottom,0px));z-index:3;display:none;align-items:center;gap:5px;
  padding:5px 8px;background:linear-gradient(#2b2238,#16111f);border:2px solid #b8933f;border-radius:6px}
body.jugando #micro{display:flex}
.micro-btn{width:34px;height:38px;border-radius:4px;border:1px solid #6b5a2a;background:#1d1638;font-size:1.05rem;cursor:pointer;padding:0}
.micro-btn:hover{border-color:#ffd76a}
.micro-btn:focus-visible{outline:2px solid #ffd76a;outline-offset:2px}
#micro .dato{font-size:.92rem;background:none;padding:0 3px;white-space:nowrap}
body.tactil #micro{bottom:auto;top:calc(8px + env(safe-area-inset-bottom,0px) + env(safe-area-inset-top,0px));right:8px}
#btnInteractuar,body.tactil #btnInteractuar,body:not(.combate) #btnInteractuar{bottom:calc(100px + env(safe-area-inset-bottom,0px))}
@media (max-width:900px){ #micro #hPoc{display:none} }

/* ---------- Pantallas de inicio sobre la ilustración de la ciudad ---------- */
.overlay.portada{background:linear-gradient(rgba(14,10,40,.15),rgba(14,10,40,.35) 45%,rgba(10,7,22,.82))}
.overlay.portada h1,.overlay.portada h2{text-shadow:0 2px 0 #1a1036,0 0 24px rgba(40,20,90,.8)}
.overlay.portada .tenue,.overlay.portada .nota,.overlay.portada > label{color:#f1ecff;text-shadow:0 1px 3px #000,0 0 10px rgba(0,0,0,.6)}
.overlay.portada .panel,.overlay.portada .clase,.overlay.portada .pj-card,.overlay.portada .gato,.overlay.portada .vacio{
  background:rgba(22,16,48,.88);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.overlay.portada .btn:not(.principal){background:rgba(22,16,48,.82);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.overlay.portada .eclipse{box-shadow:0 0 0 3px var(--corona),0 0 60px 18px rgba(255,190,110,.55)}
/* ---------- Barra de poderes con el estilo del inicio: cristal violeta y oro ---------- */
#panelAccion{gap:4px;bottom:calc(10px + env(safe-area-inset-bottom,0px))}
#panelAccion #barra{gap:4px;padding:5px 7px;border-radius:14px;border:1px solid rgba(242,196,109,.55);
  background:linear-gradient(180deg,rgba(40,28,78,.78),rgba(16,11,34,.86));backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 0 0 1px rgba(10,6,24,.9),0 6px 22px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,230,170,.18),0 0 26px -8px rgba(242,196,109,.55)}
#panelAccion #barra::before{content:"";position:absolute;left:50%;top:-6px;width:10px;height:10px;transform:translateX(-50%) rotate(45deg);
  background:linear-gradient(135deg,#ffe3a1,#b8862f);box-shadow:0 0 8px rgba(242,196,109,.8);border-radius:2px}
#panelAccion #barra{position:relative;left:auto;bottom:auto;transform:none}
#panelAccion .xp{margin:0 14px 5px}
.accion{width:40px;height:40px;border-radius:9px;border:1px solid rgba(155,123,255,.45);
  background:radial-gradient(circle at 50% 35%,#2a1f52,#0e0a1c 75%);box-shadow:inset 0 0 0 1px rgba(0,0,0,.6),inset 0 -6px 10px rgba(0,0,0,.45);
  transition:transform .12s,border-color .12s,box-shadow .12s}
.accion:hover{transform:translateY(-2px);border-color:var(--corona);box-shadow:inset 0 0 0 1px rgba(0,0,0,.6),0 0 12px -2px rgba(242,196,109,.75)}
.accion:active{transform:translateY(0) scale(.95)}
.accion::after{border-radius:8px}
.accion canvas{border-radius:8px}
.accion kbd{top:auto;bottom:1px;left:50%;transform:translateX(-50%);padding:0 4px;border-radius:5px;line-height:12px;
  font:700 9.5px Rajdhani,sans-serif;color:#1a1036;background:linear-gradient(#ffe3a1,#d9a94a);text-shadow:none;box-shadow:0 1px 2px rgba(0,0,0,.6);z-index:2}
.accion.clic{border-color:rgba(242,196,109,.75)}
.accion.clic kbd{background:linear-gradient(#e6dcff,#9b7bff)}
.accion .bloq{bottom:auto;top:50%;transform:translateY(-50%);font-size:10px;color:#ffb3c0;text-shadow:0 0 3px #000}
.accion .num{top:1px;bottom:auto;right:3px;font-size:11px;color:#ffe3a1}
.sep{width:6px;height:6px;margin:0 2px;transform:rotate(45deg);background:linear-gradient(135deg,#ffe3a1,#b8862f);border-radius:1px;opacity:.85}
.xp{height:7px;border-radius:6px;border:1px solid rgba(242,196,109,.55);background:rgba(16,11,34,.85);box-shadow:0 2px 8px rgba(0,0,0,.5)}
.xp span{background:linear-gradient(90deg,#7b4dff,#c070ff 60%,#f2c46d);box-shadow:0 0 8px rgba(192,112,255,.7)}
.xp em{font-size:8px;line-height:6px;letter-spacing:.5px}
#micro{border-radius:14px;border:1px solid rgba(242,196,109,.55);padding:4px 8px;
  background:linear-gradient(180deg,rgba(40,28,78,.78),rgba(16,11,34,.86));backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 6px 22px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,230,170,.18)}
.micro-btn{width:32px;height:32px;border-radius:9px;border:1px solid rgba(155,123,255,.45);background:radial-gradient(circle at 50% 35%,#2a1f52,#0e0a1c 75%);font-size:.95rem}
.micro-btn:hover{border-color:var(--corona);box-shadow:0 0 10px -2px rgba(242,196,109,.75)}
body.tactil .accion{width:40px;height:40px}
@media (max-width:600px){ .accion,body.tactil .accion{width:36px;height:36px} #panelAccion #barra{gap:3px;padding:4px 5px} }
#buffs{position:fixed;left:calc(16px + env(safe-area-inset-left,0px));top:calc(96px + env(safe-area-inset-top,0px));z-index:3;display:none;gap:5px;flex-wrap:wrap;max-width:300px;pointer-events:none}
body.jugando #buffs{display:flex}
.buff{position:relative;width:30px;height:30px;border-radius:6px;background-repeat:no-repeat;background-size:auto 30px;image-rendering:pixelated;
  box-shadow:0 0 0 1px rgba(242,196,109,.7),0 2px 6px rgba(0,0,0,.6);pointer-events:auto}
.buff.malo{box-shadow:0 0 0 1px #e2445c,0 0 8px rgba(226,68,92,.6)}
.buff i{position:absolute;left:0;right:0;bottom:-13px;font:700 10px Rajdhani,sans-serif;font-style:normal;color:#fff;text-align:center;text-shadow:0 0 3px #000,0 0 3px #000}
.buff.fin{animation:parpBuff .5s infinite alternate}
@keyframes parpBuff{to{opacity:.35}}
/* =================== ESTILO WOW 3.3.5 =================== */
:root{--wo:#ffd100;--wb:#c9a43c;--wb2:#6e5420;--wtx:#f0f0f0;--wgris:#9d9d9d;--wverde:#1eff00}
.wbtn{position:relative;min-width:150px;padding:7px 16px;border-radius:4px;cursor:pointer;
  font:600 15px "Marcellus",Georgia,serif;color:var(--wo);text-shadow:0 1px 1px #000,0 0 2px #000;
  background:linear-gradient(#9b1410 0%,#6c0b08 48%,#4a0705 52%,#7a0f0b 100%);
  border:2px solid var(--wb);box-shadow:inset 0 0 0 1px #2a0503,inset 0 1px 0 rgba(255,200,150,.35),0 2px 4px rgba(0,0,0,.7)}
.wbtn:hover{filter:brightness(1.25);color:#fff}
.wbtn:active{transform:translateY(1px);filter:brightness(.9)}
.wbtn:disabled{filter:grayscale(.8) brightness(.6);cursor:default;color:#999}
.wbtn:focus-visible{outline:2px solid #fff;outline-offset:2px}
.wbtn.grande{min-width:190px;font-size:17px;padding:9px 18px}
.wbtn.enorme{min-width:230px;font-size:20px;padding:12px 26px}
.wpanel{background:linear-gradient(rgba(12,10,8,.9),rgba(6,5,4,.92));border:2px solid var(--wb);border-radius:6px;
  box-shadow:inset 0 0 0 1px #000,inset 0 0 0 3px rgba(201,164,60,.25),0 6px 20px rgba(0,0,0,.7);padding:10px}
.wpanel-tit{font:600 15px "Marcellus",Georgia,serif;color:var(--wo);text-align:center;margin:2px 0 8px;text-shadow:0 1px 2px #000;
  border-bottom:1px solid rgba(201,164,60,.35);padding-bottom:6px}

/* ---------- Login ---------- */
.wow-login{display:block;padding:0;background:linear-gradient(rgba(0,0,0,.05),rgba(0,0,0,.15) 55%,rgba(0,0,0,.75))}
.wow-login.oculto{display:none}
.wl-logo{position:absolute;top:28px;left:34px;display:flex;flex-direction:column;align-items:flex-start;text-align:left}
.wl-logo img{display:block;width:min(420px,38vw);height:auto;filter:drop-shadow(0 4px 12px rgba(0,0,0,.8))}
.ws-logo{position:absolute;top:10px;left:18px;width:min(270px,24vw);height:auto;filter:drop-shadow(0 4px 10px rgba(0,0,0,.8));pointer-events:none}
.menu-logo{width:min(380px,80vw);height:auto;filter:drop-shadow(0 4px 12px rgba(0,0,0,.8))}
.wl-logo b{font:400 54px/1 "Marcellus",Georgia,serif;letter-spacing:4px;color:#ffe9a8;
  background:linear-gradient(#fff6d2,#f2c46d 45%,#a8761f 55%,#ffe3a1);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 3px 0 #2a1608) drop-shadow(0 0 18px rgba(80,40,160,.8))}
.wl-logo small{font:600 15px "Marcellus",Georgia,serif;color:#cfc3ff;letter-spacing:3px;text-transform:uppercase;text-shadow:0 2px 4px #000;margin-top:4px}
.wl-eclipse{width:46px;height:46px;border-radius:50%;background:#0c0820;box-shadow:0 0 0 3px #f2c46d,0 0 30px 8px rgba(255,190,110,.6);margin-bottom:10px}
.wl-form{position:absolute;left:50%;bottom:110px;transform:translateX(-50%);width:min(300px,86vw);display:flex;flex-direction:column;align-items:center;gap:8px}
.wl-form label{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%;font:600 15px "Marcellus",Georgia,serif;color:var(--wo);text-shadow:0 1px 2px #000,0 0 6px #000}
.wl-form input:not([type=checkbox]){width:100%;padding:7px 10px;font:600 15px Rajdhani,sans-serif;color:#fff;text-align:center;
  background:rgba(0,0,0,.78);border:1px solid #8a8a8a;border-radius:3px;box-shadow:inset 0 0 0 1px #000,0 0 0 1px #2c2c2c}
.wl-form input:focus{outline:none;border-color:var(--wo);box-shadow:0 0 8px rgba(255,209,0,.5)}
.wl-form .error{min-height:1em;color:#ff6060;text-shadow:0 1px 2px #000}
.wl-check{flex-direction:row !important;font:500 13px Rajdhani,sans-serif !important;color:#ddd !important}
.wl-izq{position:absolute;left:20px;bottom:22px;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.wl-der{position:absolute;right:20px;bottom:22px;display:flex;flex-direction:column;gap:8px}
.wl-version{font:500 12px Rajdhani,sans-serif;color:#bbb;text-align:left;text-shadow:0 1px 2px #000;margin-top:4px}
.wl-copy{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);font:500 12px Rajdhani,sans-serif;color:#aaa;text-shadow:0 1px 2px #000;white-space:nowrap}
@media (max-width:700px){
  .wl-logo{left:50%;transform:translateX(-50%);align-items:center;text-align:center;top:22px}
  .wl-logo b{font-size:40px}
  .wl-form{bottom:150px}
  .wl-izq{left:12px;bottom:34px}.wl-der{right:12px;bottom:34px}
  .wl-izq .wbtn,.wl-der .wbtn{min-width:120px;font-size:13px;padding:6px 10px}
  .wl-version{display:none}
}

/* ---------- Selección y creación ---------- */
.wow-sel,.wow-crear{display:block;padding:0;background:radial-gradient(ellipse at 45% 70%,rgba(0,0,0,0),rgba(0,0,0,.65) 75%),linear-gradient(rgba(0,0,0,.1),rgba(0,0,0,.55))}
.wow-sel.oculto,.wow-crear.oculto{display:none}
.ws-reino{position:absolute;top:14px;left:50%;transform:translateX(-50%);font:600 16px "Marcellus",Georgia,serif;color:#fff;text-shadow:0 1px 3px #000}
.ws-reino b{color:var(--wo)}.ws-reino small{color:#bbb}
.ws-escena{position:absolute;left:50%;top:50%;transform:translate(-50%,-55%);width:min(520px,44vw);display:flex;flex-direction:column;align-items:center}
.ws-escena canvas{width:100%;height:auto;display:block;image-rendering:pixelated}
.ws-rotar{display:flex;gap:16px;margin-top:-30px}
.wrot{width:38px;height:38px;border-radius:50%;cursor:pointer;font-size:20px;color:var(--wo);background:radial-gradient(#5a0b08,#2a0503);border:2px solid var(--wb);box-shadow:0 2px 4px #000}
.wrot:hover{filter:brightness(1.3)}
.ws-lista{position:absolute;right:22px;top:56px;width:280px;max-height:calc(100% - 200px);display:flex;flex-direction:column;gap:6px;overflow:auto}
#listaPj{display:flex;flex-direction:column;gap:4px}
.ws-pj{display:block;width:100%;text-align:left;padding:7px 10px;border-radius:4px;cursor:pointer;background:rgba(255,255,255,.03);border:1px solid transparent;color:#fff}
.ws-pj:hover{background:rgba(255,209,0,.08)}
.ws-pj.sel{background:linear-gradient(90deg,rgba(255,209,0,.22),rgba(255,209,0,.05));border-color:rgba(255,209,0,.6)}
.ws-pj b{display:block;font:600 16px "Marcellus",Georgia,serif;color:var(--wo)}
.ws-pj span{display:block;font:600 13px Rajdhani,sans-serif;color:#fff}
.ws-pj small{display:block;font:500 12px Rajdhani,sans-serif;color:var(--wgris)}
/* con más de 4 personajes (hasta 8) las filas son más bajas: el sitio donde está solo se ve en el elegido */
#listaPj.muchos{gap:3px}
#listaPj.muchos .ws-pj{padding:4px 10px}
#listaPj.muchos .ws-pj b{font-size:15px}
#listaPj.muchos .ws-pj:not(.sel) small{display:none}
.ws-lista .wbtn{margin-top:6px;align-self:center}
#btnEntrarMundo{position:absolute;left:50%;transform:translateX(-50%);bottom:30px}
.ws-izq{position:absolute;left:20px;bottom:22px}
.ws-der{position:absolute;right:20px;bottom:22px;display:flex;flex-direction:column;gap:8px}
.ws-vacio{font:500 14px Rajdhani,sans-serif;color:#bbb;text-align:center;padding:10px}
.wc-izq{position:absolute;left:18px;top:30px;width:230px}
.wc-iconos{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:12px}
.wc-ic{aspect-ratio:1;border-radius:50%;padding:0;cursor:pointer;overflow:hidden;background:#100c08;border:2px solid #5a4a2a;box-shadow:0 2px 4px #000;display:grid;place-items:center;font-size:22px}
.wc-ic canvas{width:100%;height:100%}
.wc-ic[aria-pressed="true"]{border-color:var(--wo);box-shadow:0 0 10px rgba(255,209,0,.8)}
.wc-ic:hover{border-color:#e8c76a}
.wc-sub{font:500 12px Rajdhani,sans-serif;color:#ddd;text-align:center;margin:-6px 0 8px}
#clases{grid-template-columns:repeat(5,1fr)}
.wc-clase-movil{display:none;margin:0 0 2px;line-height:1.25}
.wc-clase-movil b{font:600 14px "Marcellus",Georgia,serif}
.wc-der{position:absolute;right:18px;top:66px;width:280px;text-align:left;font:500 14px Rajdhani,sans-serif;color:#eee}
.wc-der h3{font:600 20px "Marcellus",Georgia,serif;margin-bottom:6px}
.wc-der p{margin-bottom:8px;line-height:1.35}
.wc-der dt{color:var(--wo);font-weight:700;margin-top:6px}
.wc-nombre{position:absolute;left:50%;transform:translateX(-50%);bottom:24px;display:flex;flex-direction:column;align-items:center;gap:6px}
.wc-nombre label{display:flex;flex-direction:column;align-items:center;gap:4px;font:600 15px "Marcellus",Georgia,serif;color:var(--wo);text-shadow:0 1px 2px #000}
.wc-nombre input{width:220px;padding:7px 10px;text-align:center;font:600 15px Rajdhani,sans-serif;color:#fff;background:rgba(0,0,0,.8);border:1px solid #8a8a8a;border-radius:3px}
.wc-nombre .wbtn:not(.enorme){min-width:110px;padding:4px 10px;font-size:13px}
.wc-nombre .error{min-height:1em;color:#ff6060;text-shadow:0 1px 2px #000;font-size:14px}
@media (max-width:900px){
  .ws-escena{left:50%;top:38%;width:min(360px,80vw)}
  .ws-lista{left:12px;right:12px;width:auto;top:auto;bottom:130px;max-height:30vh}
  #btnEntrarMundo{left:50%;bottom:72px}
  .ws-izq,.ws-der{bottom:14px}.ws-der{flex-direction:row}
  .ws-der .wbtn,.ws-izq .wbtn{min-width:0;font-size:13px;padding:6px 10px}
  .wc-izq{left:8px;right:8px;width:auto;top:8px;padding:6px}.wc-iconos{grid-template-columns:repeat(8,1fr);margin-bottom:4px}
  .wc-der{display:none}
  .wc-clase-movil{display:block}#clases{grid-template-columns:repeat(6,1fr)}
  .wow-crear .wc-izq{right:52px}
  .wow-crear .ws-escena{top:48%}
  .wc-nombre{left:50%;bottom:62px}
}
/* pantallas medianas o teléfono acostado: escena a la izquierda y lista a la derecha, sin taparse */
@media (max-width:900px) and (orientation:landscape){
  .ws-escena{left:50%;top:calc(50% - 26px);transform:translate(-50%,-50%);width:min(32vw,62vh)}
  .ws-lista{left:auto;right:10px;top:62px;bottom:auto;width:min(250px,34vw);max-height:calc(100% - 150px)}
  #btnEntrarMundo{left:50%;bottom:12px;font-size:16px;padding:8px 22px}
  .wow-crear .ws-escena{left:50%;top:calc(50% - 30px);width:min(36vw,58vh)}
  .wc-nombre{bottom:10px;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 10px;width:min(64vw,560px)}
  .wc-nombre label{flex-direction:row;gap:8px}
  .wc-nombre input{width:170px;padding:5px 8px}
  .wc-nombre .error{order:9;width:100%;text-align:center;min-height:0}
  .wc-nombre .wbtn.enorme{font-size:16px;padding:8px 22px}
  .wow-crear .ws-der{bottom:10px}
  .wc-izq{left:8px;right:auto;width:min(230px,30vw);top:8px}.wc-iconos{grid-template-columns:repeat(4,1fr)}#clases{grid-template-columns:repeat(5,1fr)}
  .wc-clase-movil{display:none}.wow-crear .wc-izq{right:auto}
  /* la ficha de la clase debajo del botón ♪ y sin bajar hasta el nombre */
  .wc-der{display:block;right:8px;top:62px;width:min(240px,30vw);max-height:calc(100% - 62px - 112px);overflow:auto;font-size:12px}
  .wc-der h3{font-size:16px}
}

/* ---------- Ventanas del juego ---------- */
.wv{position:fixed;z-index:6;display:flex;flex-direction:column;color:var(--wtx);font:500 14px Rajdhani,sans-serif;
  background:linear-gradient(rgba(20,16,12,.97),rgba(8,6,5,.97));border:2px solid var(--wb);border-radius:8px;
  box-shadow:inset 0 0 0 1px #000,inset 0 0 0 3px rgba(201,164,60,.22),0 10px 30px rgba(0,0,0,.75)}
.wv.oculto{display:none}
.wv-cab{position:relative;display:flex;align-items:center;gap:8px;height:38px;padding:0 34px 0 64px;cursor:move;user-select:none;
  background:linear-gradient(#3a2c14,#1a130a);border-bottom:1px solid var(--wb2);border-radius:6px 6px 0 0}
.wv-cab b{font:600 16px "Marcellus",Georgia,serif;color:var(--wo);text-shadow:0 1px 2px #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wv-retrato{position:absolute;left:-10px;top:-14px;width:62px;height:62px;border-radius:50%;background:#120d24;border:3px solid var(--wb);box-shadow:0 2px 6px #000}
.wv-retrato.ico{display:grid;place-items:center;font-size:28px;background:radial-gradient(#4a3418,#1a1208)}
.wv-x{position:absolute;right:6px;top:7px;width:24px;height:24px;border-radius:4px;cursor:pointer;color:#fff;font-weight:700;
  background:linear-gradient(#a8140f,#5c0806);border:1px solid var(--wb)}
.wv-x:hover{filter:brightness(1.3)}
.wv-cuerpo{padding:10px;overflow:auto}
.wv-tabs{display:flex;gap:2px;padding:0 10px;margin-bottom:-2px;transform:translateY(100%);position:absolute;left:0;bottom:2px}
.wv-tabs button{padding:5px 12px 6px;cursor:pointer;font:600 13px "Marcellus",Georgia,serif;color:#bfa96a;
  background:linear-gradient(#1a130a,#2e2210);border:2px solid var(--wb2);border-top:none;border-radius:0 0 8px 8px}
.wv-tabs button[aria-selected="true"]{color:var(--wo);background:linear-gradient(#2e2210,#4a3518);border-color:var(--wb)}
#wPj{left:16px;top:96px;width:360px;max-height:calc(100vh - 220px);max-height:calc(100dvh - 220px)}
#wLibro{left:390px;top:96px;width:400px;max-height:calc(100vh - 200px);max-height:calc(100dvh - 200px)}
#wBolsa{right:16px;bottom:72px;width:212px}
@media (max-width:820px){
  #wPj,#wLibro{left:8px !important;right:8px;top:70px !important;width:auto;max-height:calc(100vh - 200px);max-height:calc(100dvh - 200px)}
  #wBolsa{right:8px !important;bottom:66px !important;left:auto;top:auto !important}
}
/* paperdoll */
.pd{display:grid;grid-template-columns:44px 1fr 44px;gap:6px;align-items:start}
.pd-col{display:flex;flex-direction:column;gap:6px}
.pd-mod{position:relative;height:216px;border-radius:4px;background:radial-gradient(ellipse at 50% 80%,#3a2d55,#0d0a14 70%);border:1px solid #3d3016}
.pd-mod canvas{width:100%;height:100%;display:block}
.pd-abajo{display:flex;justify-content:center;gap:6px;margin-top:6px}
.wslot{position:relative;width:42px;height:42px;padding:0;cursor:pointer;border-radius:4px;display:grid;place-items:center;
  background:radial-gradient(#2a2a2a,#0c0c0c);border:1px solid #555;box-shadow:inset 0 0 0 1px #000,inset 0 0 8px #000;--rc:#555}
.wslot.lleno{border-color:var(--rc);box-shadow:inset 0 0 0 1px #000,0 0 5px -1px var(--rc)}
.wslot:hover{filter:brightness(1.25);border-color:var(--wo)}
.wslot .ico-obj{width:36px;height:36px;background-size:auto 36px}
.wslot .vac{font-size:18px;opacity:.28;filter:grayscale(1)}
.wslot .cnt{position:absolute;right:2px;bottom:0;font:700 12px Rajdhani,sans-serif;color:#fff;text-shadow:0 0 2px #000,0 0 2px #000,0 0 2px #000}
.pd-stats{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:10px}
.pd-caja{background:rgba(0,0,0,.45);border:1px solid #3d3016;border-radius:4px;padding:6px 8px}
.pd-caja h4{font:600 13px "Marcellus",Georgia,serif;color:var(--wo);margin-bottom:4px;border-bottom:1px solid #3d3016;padding-bottom:3px}
.pd-fila{display:flex;align-items:center;justify-content:space-between;gap:4px;font-size:13px;line-height:1.55}
.pd-fila span{color:var(--wo)}.pd-fila b{color:#fff;font-weight:600}.pd-fila b.verde{color:var(--wverde)}
.pd-mas{width:17px;height:17px;padding:0;line-height:14px;border-radius:3px;cursor:pointer;font-weight:700;color:#fff;background:#2c6b1a;border:1px solid #6fd36b;margin-left:4px}
.pd-mas:disabled{display:none}
.pd-puntos{text-align:center;color:var(--wverde);font-weight:700;font-size:13px;margin-top:6px}
.pd-sub{text-align:center;color:#fff;margin:-2px 0 8px;font-size:13px}
/* bolsa */
.wbag{display:grid;grid-template-columns:repeat(4,42px);gap:4px;justify-content:center}
.wbag .wslot{cursor:pointer}
.wbag-pie{display:flex;justify-content:space-between;align-items:center;margin-top:8px;padding:4px 6px;background:rgba(0,0,0,.5);border:1px solid #3d3016;border-radius:3px;font-size:12px;color:#bbb}
.dinero{display:inline-flex;gap:7px;align-items:center;font:700 14px Rajdhani,sans-serif;color:#fff;text-shadow:0 1px 1px #000}
.mon{display:inline-flex;align-items:center;gap:2px}
.mon i{display:inline-block;width:13px;height:13px;flex-shrink:0;background:url(../img/interfaz/ui-1.webp) no-repeat;background-size:300% 100%}
.mon i.m-o{background-position:0 0}
.mon i.m-p{background-position:50% 0}
.mon i.m-c{background-position:100% 0}
/* tooltip */
.wtip{position:fixed;z-index:30;max-width:300px;pointer-events:none;padding:8px 10px;border-radius:5px;font:500 13.5px/1.35 Rajdhani,sans-serif;color:#fff;
  background:rgba(4,4,22,.93);border:1px solid #b0b0b0;box-shadow:0 0 0 1px #000,0 6px 18px rgba(0,0,0,.7)}
.wtip.oculto{display:none}
.wtip .tn{font:700 15px Rajdhani,sans-serif;display:block}
.wtip .gris{color:var(--wgris)}.wtip .verde{color:var(--wverde)}.wtip .rojo{color:#ff4040}.wtip .amar{color:var(--wo)}
.wtip .fila{display:flex;justify-content:space-between;gap:16px}
.wtip .tsep{height:6px}
.wtip .doble{display:flex;gap:8px;align-items:flex-start}
.wtip .doble>div{min-width:160px}
.wtip .doble>div+div{border-left:1px solid #555;padding-left:8px}
.wmenu{position:fixed;z-index:31;display:flex;flex-direction:column;min-width:150px;padding:4px;border-radius:5px;background:rgba(4,4,22,.96);border:1px solid #b0b0b0}
.wmenu.oculto{display:none}
.wmenu button{text-align:left;padding:6px 10px;border:none;background:none;color:#fff;font:600 14px Rajdhani,sans-serif;cursor:pointer;border-radius:3px;display:flex;justify-content:space-between;gap:10px}
.wmenu button:hover{background:rgba(255,209,0,.15);color:var(--wo)}
/* libro */
.libro .wv-cuerpo{background:linear-gradient(#e9d7a8,#cdb37a);color:#2a1a08;margin:6px;border-radius:4px;box-shadow:inset 0 0 30px rgba(90,60,20,.6)}
.wl-hechizos{display:grid;grid-template-columns:1fr 1fr;gap:8px 10px}
.wl-h{display:flex;gap:8px;align-items:center;padding:4px;border-radius:4px}
.wl-h:hover{background:rgba(90,60,20,.15)}
.wl-h canvas{width:40px;height:40px;flex-shrink:0;border-radius:4px;border:2px solid #6e5420;box-shadow:0 1px 3px rgba(0,0,0,.5);background:#120d24;cursor:grab}
.wl-h.bloq canvas{filter:grayscale(1) brightness(.5);cursor:default}
.wl-h b{display:block;font:700 14px Rajdhani,sans-serif;color:#2a1a08}
.wl-h small{display:block;font:600 12px Rajdhani,sans-serif;color:#6b4a1c}
.wl-h.bloq b{color:#7a6a50}
.wl-sec{grid-column:1/-1;font:600 15px "Marcellus",Georgia,serif;color:#5a3a10;border-bottom:1px solid rgba(90,60,20,.4);margin-top:4px}
.wl-nota{grid-column:1/-1;font-size:12px;color:#5a3a10}
.wl-tal{grid-column:1/-1}
.wl-tal>div{flex:1}
.wl-rango{font:700 12px Rajdhani,sans-serif;color:#8a5a10;margin-left:4px}
.wl-pts{font:700 12px Rajdhani,sans-serif;color:#8a5a10;margin-left:6px}
.wl-mas{flex-shrink:0;width:30px;height:30px;border-radius:50%;cursor:pointer;font:700 18px Rajdhani,sans-serif;color:#ffd100;background:radial-gradient(#5a0b08,#2a0503);border:2px solid #c9a43c;box-shadow:0 1px 3px rgba(0,0,0,.6)}
.wl-mas:disabled{filter:grayscale(1) brightness(.6);cursor:default}
.wl-mas:not(:disabled):hover{filter:brightness(1.3)}
.wl-reini{margin-left:6px;padding:2px 8px;cursor:pointer;font:700 12px Rajdhani,sans-serif;color:#5a3a10;background:rgba(255,255,255,.35);border:1px solid #8a6a30;border-radius:3px}
.accion.soltar{border-color:#1eff00 !important;box-shadow:0 0 12px #1eff00 !important}
@media (max-width:520px){
  body.tactil #panelAccion{left:50%}
  body.tactil #micro{top:auto;right:auto;left:8px;bottom:calc(64px + env(safe-area-inset-bottom,0px));padding:3px 5px;gap:3px}
  body.tactil #micro .dato,body.tactil #micro #hPoc{display:none}
  body.tactil .micro-btn{width:30px;height:30px;font-size:.85rem}
  body.tactil #wBolsa{bottom:110px !important}
}
/* textos que no se salen de sus recuadros */
.pill{white-space:nowrap}
#buffs{left:auto;right:176px;top:calc(18px + env(safe-area-inset-top,0px));flex-direction:row-reverse;max-width:40vw}
.accion .bloq{font-size:9.5px;letter-spacing:-.2px;white-space:nowrap}
.wslot,.accion,.wbtn,.ws-pj,.pd-fila,.wl-h div,.wmenu button{min-width:0}
.ws-pj b,.ws-pj span,.ws-pj small,.wv-cab b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wl-h div{min-width:0;overflow-wrap:anywhere}
.wtip{overflow-wrap:anywhere}
.wbtn{white-space:nowrap}
@media (max-width:520px){
  .pill{font-size:.78rem;padding:3px 9px}
  #buffs{right:8px;top:calc(220px + env(safe-area-inset-top,0px));flex-direction:column;max-width:none;gap:16px}
  body.tactil #panelAccion{left:calc(50% - 26px)}
  body.tactil .accion{width:33px;height:33px}
  body.tactil #panelAccion #barra{gap:2px;padding:3px 4px}
  .accion .bloq{font-size:8.5px}
  .wbtn{min-width:0}
}
.wtip:has(.doble){max-width:min(440px,calc(100vw - 12px))}
.wtip .doble>div{flex:1 1 0;min-width:0}
.wtip .doble .fila{flex-wrap:wrap;column-gap:8px}
.wtip span,.wtip .fila span{overflow-wrap:anywhere}
@media (max-width:480px){ .wtip .doble{flex-direction:column} .wtip .doble>div+div{border-left:none;padding-left:0;border-top:1px solid #555;padding-top:6px} }
.ic3{display:inline-block;width:36px;height:36px;background-repeat:no-repeat;background-size:auto 100%}
.ic3.ic2{background-size:1000% 800% !important;image-rendering:auto !important}
.seg-t .ic2{width:16px;height:16px;vertical-align:-3px;margin-right:2px}
.wv-retrato.ico .ic3{width:44px;height:44px}
.tienda-ic{display:inline-flex;align-items:center;gap:8px}
.tienda-ic .ic3{width:26px;height:26px}
.herm-colores{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.herm-c{width:28px;height:28px;border-radius:6px;border:2px solid rgba(0,0,0,.6);cursor:pointer;padding:0}
.herm-c[aria-pressed="true"]{outline:2px solid #fff;outline-offset:2px}
.herm-cab{display:flex;align-items:center;gap:12px;margin-bottom:8px;text-align:left}
.herm-cab b{display:block;font:600 18px "Marcellus",Georgia,serif;color:var(--corona)}
.herm-cab small{color:var(--tenue)}
.herm-escudo{flex-shrink:0;width:52px;height:60px;display:grid;place-items:center;font:700 15px Rajdhani,sans-serif;color:#fff;text-shadow:0 1px 2px #000;
  clip-path:polygon(0 0,100% 0,100% 70%,50% 100%,0 70%);border-top:4px solid #f2c46d}
#miCuerpo .linea span,#miCuerpo .linea b{min-width:min-content;overflow-wrap:normal}
#miCuerpo .linea{gap:14px}
#miCuerpo .linea b{text-align:right}
.wbtn{background:none !important;border:10px solid transparent !important;border-image:url(../img/interfaz/ui-2.webp) 9 10 fill / 10px 11px stretch !important;
  box-shadow:0 3px 5px rgba(0,0,0,.55) !important;border-radius:0 !important;color:#ffe9b0 !important;text-shadow:0 1px 0 #3a1a08,0 0 3px #000 !important;padding:2px 12px !important}
.wbtn:hover{filter:brightness(1.18) saturate(1.1)}
.wbtn.grande{padding:4px 16px !important}.wbtn.enorme{padding:6px 22px !important}
.wl-izq .wbtn,.wl-der .wbtn,.ws-der .wbtn,.ws-izq .wbtn,#btnBorrarPj,#btnLogout,#btnAleatorio,#tabEntrar{border-image-source:url(../img/interfaz/ui-3.webp) !important;color:#f1ead8 !important}
.wv-x,.wrot{background:none !important;border:6px solid transparent !important;border-image:url(../img/interfaz/ui-2.webp) 9 10 fill / 6px 7px stretch !important;border-radius:0 !important}
.wl-hechizos,.libro .wv-cuerpo{background:none}
.libro .wv-cuerpo{border:14px solid transparent;border-image:url(../img/interfaz/ui-4.webp) 22 22 fill / 14px stretch;box-shadow:none;margin:6px}
.herm-band{width:44px;height:88px;padding:0;cursor:pointer;border:2px solid transparent;border-radius:6px;background-repeat:no-repeat;background-size:800% 100%;background-color:rgba(0,0,0,.35)}
.herm-band[aria-pressed="true"]{border-color:#ffd100;box-shadow:0 0 10px rgba(255,209,0,.7)}
.herm-escudo.band{clip-path:none;border:none;background-repeat:no-repeat;background-size:800% 100%;width:44px;height:88px}
.btn{background:none !important;border:10px solid transparent !important;border-image:url(../img/interfaz/ui-3.webp) 9 10 fill / 10px 11px stretch !important;border-radius:0 !important;
  color:#f1ead8 !important;text-shadow:0 1px 0 #2a1a08,0 0 3px #000;box-shadow:0 3px 5px rgba(0,0,0,.5) !important;padding:4px 12px !important}
.btn.principal,.btn.dorado{border-image-source:url(../img/interfaz/ui-2.webp) !important;color:#ffe9b0 !important}
.btn.peligro{border-image-source:url(../img/interfaz/ui-2.webp) !important;color:#ffb3b3 !important}
.btn:hover:not(:disabled){filter:brightness(1.18)}
.btn:disabled{filter:grayscale(.7) brightness(.6)}
.mi-donde{text-align:left;margin:6px 0;padding:6px 8px;border-radius:6px;background:rgba(255,209,0,.08);border:1px solid rgba(255,209,0,.25);font-size:.92rem}
#wMis{left:50%;top:80px;transform:translateX(-50%);width:min(620px,calc(100vw - 16px));max-height:calc(100vh - 190px);max-height:calc(100dvh - 190px)}
.mis-cuerpo{display:grid;grid-template-columns:210px 1fr;gap:10px;min-height:280px}
.mis-lista{display:flex;flex-direction:column;gap:3px;border-right:1px solid #3d3016;padding-right:8px;overflow:auto}
.mis-titulo{font:600 13px "Marcellus",Georgia,serif;color:var(--wo);margin-bottom:4px}
.mis-item{display:flex;justify-content:space-between;gap:6px;text-align:left;padding:5px 7px;border-radius:3px;cursor:pointer;background:none;border:1px solid transparent;color:#ffd100;font:600 13px Rajdhani,sans-serif}
.mis-item small{color:#bbb;flex-shrink:0}
.mis-item:hover{background:rgba(255,209,0,.08)}
.mis-item.sel{background:rgba(255,209,0,.18);border-color:rgba(255,209,0,.5);color:#fff}
.mis-det{background:linear-gradient(#e9d7a8,#cdb37a);color:#2a1a08;border-radius:4px;padding:10px 12px;overflow:auto;box-shadow:inset 0 0 24px rgba(90,60,20,.55)}
.mis-det h3{font:600 17px "Marcellus",Georgia,serif;color:#3a2208;margin-bottom:4px}
.mis-det h4{font:700 13px Rajdhani,sans-serif;color:#6b3a10;margin-top:8px;text-transform:uppercase;letter-spacing:.5px}
.mis-det p{font:500 14px/1.35 Rajdhani,sans-serif}
.mis-det p.ok{color:#1d6b12;font-weight:700}
.mis-det .dinero{color:#2a1a08;text-shadow:none}
.mis-acc{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.mis-acc .wbtn{min-width:0;font-size:13px}
.mis-vacio{font:500 13px Rajdhani,sans-serif;color:#bbb;padding:6px}
.mis-det .mis-vacio{color:#5a3a10}
#seguimiento{position:fixed;right:14px;top:calc(232px + env(safe-area-inset-top,0px));z-index:3;width:220px;display:none;flex-direction:column;gap:6px;pointer-events:auto}
body.jugando #seguimiento{display:flex}
#seguimiento{background:rgba(0,0,0,.4);border:1px solid rgba(201,164,60,.3);border-radius:6px;padding:6px 8px}
#seguimiento:empty{display:none !important}
.seg-cab{display:flex;justify-content:space-between;align-items:center;font:600 14px "Marcellus",Georgia,serif;color:#ffd100;text-shadow:0 1px 2px #000}
.seg-cab button{width:20px;height:18px;line-height:14px;padding:0;border:1px solid #6e5420;border-radius:3px;background:#2a1d0c;color:#ffd100;cursor:pointer;font-weight:700}
.seg-m{cursor:pointer;text-shadow:0 1px 2px #000,0 0 3px #000}
.seg-t{display:block;font:700 13px Rajdhani,sans-serif;color:#ffd100}
.seg-o{display:block;font:500 12.5px Rajdhani,sans-serif;color:#eee;padding-left:6px}
.seg-o.ok,.seg-m.ok .seg-t{color:#7dffa8}
@media (max-width:700px){
  .mis-cuerpo{grid-template-columns:1fr}.mis-lista{border-right:none;padding-right:0;max-height:120px}
  #seguimiento{top:auto;bottom:calc(150px + env(safe-area-inset-bottom,0px));right:8px;width:160px}
  .seg-o{font-size:11px}
}
.micro-btn{display:grid;place-items:center;padding:2px !important}
.micro-btn .ic3,.micro-btn .ico-obj,.micro-btn canvas{width:min(26px,100%) !important;height:min(26px,100%) !important;image-rendering:pixelated;background-size:auto 100%}
.micro-btn canvas{display:block}
#hPoc{display:inline-flex;align-items:center;gap:2px}
#hPoc .ic3{width:22px;height:22px}
#mPoc .ic3{width:34px;height:34px}

/* =================== TELÉFONO ACOSTADO: HUD COMPACTO =================== */
/* En pantallas bajas (teléfono en horizontal) todo se achica para dejar ver más mundo */
@media (max-height:500px) and (pointer:coarse){
  #hud{padding:calc(6px + env(safe-area-inset-top,0px)) 8px 0 calc(8px + env(safe-area-inset-left,0px));gap:10px}
  .marco{padding:2px 8px 2px 2px;border-width:1.5px}
  .marco .retrato{width:42px;height:42px}
  .nivel-badge{left:28px;bottom:-4px;min-width:18px;height:18px;font-size:10px;line-height:14px;border-width:1.5px}
  .marco-info{width:min(150px,28vw);margin-left:6px}
  .marco-nombre{font-size:12px;margin-bottom:2px}
  .rango-txt{font-size:11px}
  .marco .barra{height:11px}
  .marco .barra em{font-size:9.5px;line-height:9px}
  .marco.objetivo .barra{height:12px}
  .ret-obj{width:36px !important;height:36px !important}
  .ret-obj span{width:24px;height:24px}
  #btnPuntos{left:50px;font-size:.8rem;padding:2px 8px}
  #buffs{top:calc(58px + env(safe-area-inset-top,0px));left:calc(10px + env(safe-area-inset-left,0px))}
  .buff{width:24px;height:24px;background-size:auto 24px}

  #micro{gap:4px;padding:3px 6px;border-radius:12px}
  .micro-btn{width:28px;height:28px;font-size:.85rem;border-radius:8px}
  body.tactil #micro{top:calc(6px + env(safe-area-inset-top,0px));right:calc(8px + env(safe-area-inset-right,0px))}

  #panelAccion{bottom:calc(4px + env(safe-area-inset-bottom,0px));gap:2px}
  #panelAccion .xp{margin:0 10px 4px;height:9px}
  #panelAccion .xp em{line-height:8px}
  #panelAccion #barra{gap:3px;padding:3px 5px;border-radius:11px}
  .accion,body.tactil .accion{width:34px;height:34px;border-radius:8px}
  .accion kbd{font-size:8.5px;line-height:10px}
  .accion .bloq{font-size:9px}

  #movil{right:calc(10px + env(safe-area-inset-right,0px));bottom:calc(8px + env(safe-area-inset-bottom,0px));gap:8px}
  .mbtn{width:52px;height:52px;font-size:1.25rem}
  .mbtn.grande{width:70px;height:70px}
  .mbtn.chico{width:44px;height:44px;font-size:1.05rem}

  #btnInteractuar,body.tactil #btnInteractuar,body:not(.combate) #btnInteractuar{bottom:calc(64px + env(safe-area-inset-bottom,0px));padding:.45rem 1rem;font-size:.95rem}
  #banner{top:18%;font-size:clamp(1.2rem,4vw,1.9rem)}

  /* menús en partida: título más chico y botones en dos columnas para que todo quepa */
  .overlay{gap:8px;padding:calc(10px + env(safe-area-inset-top,0px)) 14px calc(10px + env(safe-area-inset-bottom,0px))}
  #pPausa h2,#pMuerte h2{font-size:1.8rem}
  #pPausa .menu{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;width:min(640px,100%)}
  #pPausa .menu .btn{padding:.45rem .5rem;font-size:.9rem}
  #pPausa .ajustes{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px;width:min(760px,100%)}
  #pPausa .aj-grupo{padding:6px 8px 8px;gap:6px}
  #pPausa .ajustes .btn{padding:.35rem .5rem;font-size:.88rem}
  #pPausa .aj-volver{grid-column:1/-1;justify-self:center;min-width:200px}

  /* ventanas del juego: que quepan en la altura del teléfono */
  .wv{max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px)}
  .wv-cuerpo{overflow-y:auto}
}

/* =================== PODERES EN EL TELÉFONO (no cambia nada en PC) =================== */
/* barra de poderes centrada */
@media (orientation:landscape){ body.tactil #panelAccion{left:50%;transform:translateX(-50%)} }
/* segundos que faltan para volver a usar el poder */
.accion .seg{display:none}
body.tactil .accion .seg{display:block;position:absolute;inset:0;z-index:2;pointer-events:none;
  font:700 15px/1 Rajdhani,sans-serif;font-style:normal;color:#fff;display:grid;place-items:center;
  text-shadow:0 0 3px #000,0 0 3px #000,0 1px 2px #000}
body.tactil .accion .seg:empty{display:none}
/* al tocar, el botón se hunde y brilla para que se note que salió el poder */
body.tactil .accion:active{transform:scale(.9);border-color:var(--corona);box-shadow:0 0 14px rgba(242,196,109,.8)}
body.tactil .mbtn:active{transform:scale(.92);border-color:var(--corona)}

/* =================== CHAT EN EL TELÉFONO =================== */
/* chico, arriba a la izquierda bajo tu retrato, para no tapar el joystick ni los poderes */
/* lugar y tamaño por defecto; arrastrando la cabecera se mueve y con la esquina de abajo se cambia el tamaño */
body.jugando.tactil #chat{display:flex;z-index:4;left:calc(8px + env(safe-area-inset-left,0px));right:auto;bottom:auto !important;
  top:calc(92px + env(safe-area-inset-top,0px));width:min(260px,36vw);height:96px;font-size:12px;
  background:rgba(0,0,0,.28);border-color:rgba(201,164,60,.25)}
body.jugando.tactil #chat.min{height:auto !important}
body.jugando.tactil #chat .chat-cab{cursor:move;padding:3px 4px 3px 8px;font-size:11px;touch-action:none}
body.jugando.tactil #chat .chat-cab::after{content:"⠿ mover";order:1;margin-left:auto;margin-right:8px;font:600 10px Rajdhani,sans-serif;color:rgba(255,209,0,.55)}
body.jugando.tactil #chat .chat-cab button{order:2;width:28px;height:22px;line-height:18px}
body.jugando.tactil #chat .chat-rs{top:auto;bottom:0;right:0;width:26px;height:26px;transform:none;touch-action:none;border-radius:0 0 6px 0;
  background:linear-gradient(135deg,transparent 50%,rgba(201,164,60,.75) 50%,rgba(201,164,60,.75) 58%,transparent 58%,transparent 68%,rgba(201,164,60,.75) 68%,rgba(201,164,60,.75) 76%,transparent 76%)}
body.jugando.tactil #chatLog{padding:2px 6px;line-height:1.15}
@media (max-height:500px) and (pointer:coarse){
  body.jugando.tactil #chat{top:calc(60px + env(safe-area-inset-top,0px));height:78px;font-size:11px}
}

/* =================== AJUSTES DEL TELÉFONO =================== */
.solo-tel{display:none}
body.tactil .solo-tel{display:block}
/* tamaño de botones elegido en el menú de pausa */
body.tactil.bt-chico #movil{zoom:.82}
body.tactil.bt-chico #panelAccion{zoom:.85}
body.tactil.bt-grande #movil{zoom:1.22}
body.tactil.bt-grande #panelAccion{zoom:1.15}

/* =================== VENTANAS DENTRO DE LA PANTALLA (teléfono) =================== */
/* ninguna ventana se sale: la cabecera siempre se ve y lo de adentro se desplaza con el dedo */
body.tactil .wv{max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px)}
body.tactil .wv-cuerpo{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
@media (max-height:500px) and (pointer:coarse){
  /* arriba deja lugar al ícono redondo de la ventana; abajo, a las pestañas del personaje */
  body.tactil #wBolsa,body.tactil #wPj,body.tactil #wLibro,body.tactil #wMis{top:calc(18px + env(safe-area-inset-top,0px)) !important;bottom:auto !important;
    max-height:calc(100vh - 26px) !important;max-height:calc(100dvh - 26px) !important}
  body.tactil #wBolsa{right:calc(8px + env(safe-area-inset-right,0px)) !important;left:auto !important;transform:none !important}
  body.tactil #wPj{left:calc(8px + env(safe-area-inset-left,0px)) !important;right:auto !important;width:min(360px,52vw) !important;
    max-height:calc(100vh - 54px) !important;max-height:calc(100dvh - 54px) !important}
  body.tactil #wLibro{left:50% !important;right:auto !important;transform:translateX(-50%) !important;width:min(420px,62vw) !important}
  body.tactil #wMis{left:50% !important;right:auto !important;transform:translateX(-50%) !important;width:min(620px,calc(100vw - 16px)) !important}
  body.tactil .wv-cab{height:32px}
  body.tactil .wv-retrato{width:46px;height:46px;top:-10px;left:-6px}
  body.tactil .wv-retrato.ico{font-size:20px}
  body.tactil .wv-x{width:28px;height:24px;top:4px}
}

/* ---------- Mascota: nivel, barriga y habilidad ---------- */
.pet-caja{text-align:center}
.pet-caja h4 small{font:600 12px Rajdhani,sans-serif;color:#ffd100;margin-left:4px}
.pet-hab{margin:4px 0 8px;color:#7dffa8;font-weight:600}
.pet-barra{display:grid;grid-template-columns:78px 1fr 52px;align-items:center;gap:6px;margin:4px 0;font:600 12px Rajdhani,sans-serif;text-align:left}
.pet-barra i{display:block;height:9px;background:#120d0a;border:1px solid #5a4a2a;image-rendering:pixelated}
.pet-barra i b{display:block;height:100%}
.pet-barra small{color:#cfc4a8;text-align:right}
.pet-aviso{color:#ff8a8a;font-weight:700;margin:4px 0}
.pet-bot{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:6px}

/* ---------- Desafíos: diarias, titán, logros ---------- */
.des-caja{margin-bottom:8px}
.des-caja h4 small{font:600 11px Rajdhani,sans-serif;color:#9d9d9d;margin-left:6px}
.des-mis{display:flex;align-items:center;gap:8px;margin:6px 0}
.des-mis>div{flex:1;min-width:0}
.des-mis b{display:block;font:700 13px Rajdhani,sans-serif}
.des-mis i{display:block;height:8px;margin:3px 0;background:#120d0a;border:1px solid #5a4a2a}
.des-mis i b{height:100%;background:#ffd100}
.des-mis small{font:600 11px Rajdhani,sans-serif;color:#cfc4a8}
.des-mis.hecha b{color:#7dffa8}
.des-mis .wbtn{min-width:0;padding:4px 10px;font-size:13px}
.des-ok{color:#7dffa8;font-size:20px;font-weight:700}
.des-titulo{display:flex;align-items:center;gap:8px;margin:4px 0 8px;font:700 13px Rajdhani,sans-serif}
.des-titulo select{flex:1;padding:3px;background:#120d0a;color:#ffd100;border:1px solid #5a4a2a;font:600 13px Rajdhani,sans-serif}
.des-logros{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.des-logro{display:flex;gap:6px;align-items:center;padding:4px;border:1px solid rgba(201,164,60,.35);border-radius:4px;background:rgba(255,209,0,.05)}
.des-logro .ic3{width:32px;height:32px;flex-shrink:0;image-rendering:pixelated}
.des-logro b{display:block;font:700 12px Rajdhani,sans-serif;color:#ffd100}
.des-logro small{display:block;font:500 11px Rajdhani,sans-serif;color:#cfc4a8;line-height:1.15}
.des-logro .des-tit{color:#ff8000}
.des-logro.bloq{opacity:.45;filter:grayscale(1)}
@media (max-width:520px){.des-logros{grid-template-columns:1fr}}
/* ---------- Tintes ---------- */
.tintes{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.tinte{display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px;cursor:pointer;background:rgba(0,0,0,.35);border:2px solid #5a4a2a;border-radius:4px;color:#eee;font:600 12px Rajdhani,sans-serif}
.tinte canvas{width:64px;height:72px;image-rendering:pixelated}
.tinte small{color:#f2c46d;font-size:11px}
.tinte.sel{border-color:#ffd100;box-shadow:0 0 8px rgba(255,209,0,.6)}
.tinte:disabled{opacity:.5;cursor:default}
@media (max-width:520px){.tintes{grid-template-columns:repeat(3,1fr)}}

.ayuda-lista{margin:8px 0 0 18px;line-height:1.45}
.ayuda-lista li{margin-bottom:4px}

/* objetivo del objetivo (WoW) */
.marco.odo{margin-top:2px;padding:2px 8px;display:grid;grid-template-columns:auto 1fr;gap:0 6px;align-items:center;min-width:150px;border-radius:6px}
.marco.odo small{font:600 10px Rajdhani,sans-serif;color:#cfc4a8}
.marco.odo b{font:700 12px Rajdhani,sans-serif;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.marco.odo .barra{grid-column:1/-1;height:6px;margin-top:2px}
.col-obj{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.combo{display:flex;gap:4px;padding:0 0 0 12px}
.combo i{width:10px;height:10px;border:2px solid #3a2a08;background:#1a1408;box-shadow:0 1px 2px #000}
.combo i.on{background:#ffd100;box-shadow:0 0 6px #ffb300}
/* teléfono vertical: la barra deja fuera ataque, habilidad y poción (ya están en los botones grandes) y pasa a dos filas */
@media (max-width:520px){
  body.tactil #panelAccion #barra{flex-wrap:wrap;justify-content:center;max-width:calc(100vw - 160px)}
  body.tactil #panelAccion #barra .accion.clic,body.tactil #panelAccion #barra .accion.poc,body.tactil #panelAccion #barra .sep{display:none}
  body.tactil #panelAccion{left:8px;transform:none}
  body.tactil #micro{bottom:calc(112px + env(safe-area-inset-bottom,0px))}
  .marco.odo{display:none}
}
@media (max-width:520px) and (orientation:portrait){
  body.jugando.tactil #chat{top:calc(178px + env(safe-area-inset-top,0px))}
}

/* ---------- grupo y buscador ---------- */
#grupo{position:fixed;right:12px;top:calc(232px + env(safe-area-inset-top,0px));z-index:3;display:flex;flex-direction:column;gap:4px;pointer-events:none;width:170px}
#grupo.oculto{display:none}
.gm{display:flex;align-items:center;gap:6px;padding:3px 6px;background:linear-gradient(#211a36,#0f0b1c);border:1px solid #b8933f;border-radius:6px;box-shadow:0 2px 6px rgba(0,0,0,.6)}
.gm-rol{font-size:15px;width:18px;text-align:center}
.gm>div{flex:1;min-width:0}
.gm>div>b{display:block;font:700 12px Rajdhani,sans-serif;color:#fff}
.gm i{display:block;height:8px;background:#151515;border:1px solid #000}
.gm i b{display:block;height:100%;background:linear-gradient(#41d65c,#128a29)}
.gm.muerto{filter:grayscale(1);opacity:.6}
#ojoLFD{position:fixed;left:50%;transform:translateX(-50%);top:calc(8px + env(safe-area-inset-top,0px));z-index:4;display:flex;gap:6px;align-items:center;padding:4px 12px;cursor:pointer;
  color:#ffd100;font:700 13px Rajdhani,sans-serif;background:rgba(20,14,36,.9);border:1px solid #b8933f;border-radius:14px}
#ojoLFD.oculto{display:none}
.busc-sel{display:flex;gap:8px;align-items:center;margin:8px 0;font:700 13px Rajdhani,sans-serif}
.busc-sel select{flex:1;padding:4px;background:#120d0a;color:#ffd100;border:1px solid #5a4a2a;font:600 13px Rajdhani,sans-serif}
@media (max-width:520px){ #grupo{top:auto;bottom:calc(200px + env(safe-area-inset-bottom,0px));width:140px} }

/* ---------- emblemas y durabilidad ---------- */
.emb{display:inline-flex;align-items:center;gap:3px;color:#d2b4ff;font-weight:700}
.emb .ic3{width:20px;height:20px;image-rendering:pixelated}
.btn .ic3{width:20px;height:20px;vertical-align:middle;image-rendering:pixelated}
.emb-lista{display:flex;flex-direction:column;gap:5px;max-height:52vh;overflow:auto}
.emb-fila{display:flex;align-items:center;gap:8px;padding:4px;border:1px solid rgba(163,53,238,.35);border-radius:4px;background:rgba(163,53,238,.06)}
.emb-fila>div{flex:1;min-width:0}
.emb-fila b{display:block;font:700 13px Rajdhani,sans-serif}
.emb-fila small{display:block;font:500 12px Rajdhani,sans-serif;color:#cfc4a8}
.emb-fila .btn{min-width:0;padding:4px 10px;font-size:13px;white-space:nowrap}
.emb-ic{width:36px;height:36px;flex-shrink:0;border:2px solid var(--rc);border-radius:4px;display:grid;place-items:center;background:#120d0a}
.emb-ic .ico-obj{width:32px;height:32px}
#durAviso{position:fixed;right:12px;top:calc(200px + env(safe-area-inset-top,0px));z-index:3;display:flex;gap:4px;align-items:center;padding:3px 8px;cursor:pointer;
  font:700 12px Rajdhani,sans-serif;color:#ffd100;background:rgba(40,30,0,.85);border:1px solid #ffd100;border-radius:6px}
#durAviso b{font-size:15px}
#durAviso.rojo{color:#ff5a5a;border-color:#ff5a5a;background:rgba(50,0,0,.85)}
#durAviso.oculto{display:none}
.rojo{color:#ff5a5a}
@media (max-width:520px){ #durAviso{top:auto;bottom:calc(250px + env(safe-area-inset-bottom,0px))} }

/* retrato del objetivo: el dibujo del monstruo o del personaje */
.ret-obj canvas{width:100%;height:100%;display:block;border-radius:50%;image-rendering:pixelated}
.marco.amistoso .marco-nombre{color:#7dffa8}
.mbtn canvas{width:72%;height:72%;image-rendering:pixelated;pointer-events:none;position:relative;z-index:1}
/* casino: mesas a casi toda la pantalla */
#pCasino{padding:0}
.cas-ventana{position:relative;width:min(98vw,1400px);height:96vh;height:96dvh;display:flex;flex-direction:column;
  background:radial-gradient(ellipse at center,#3a0e22 0%,#1c0814 70%,#12050c 100%);border:3px solid #b8862f;border-radius:14px;box-shadow:0 0 40px rgba(0,0,0,.7);overflow:hidden}
.cas-cab{display:flex;align-items:center;gap:10px;padding:6px 14px;border-bottom:2px solid #6a4a1a;background:rgba(0,0,0,.35)}
.cas-cab h2{margin:0 auto 0 0;font-size:1.3rem;color:#ffe9a0}
#casCan{flex:1;min-height:0;width:100%;display:block;cursor:pointer;touch-action:manipulation}
.cas-pie{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 18px;padding:8px 10px;border-top:2px solid #6a4a1a;background:rgba(0,0,0,.4)}
.casp-grupo{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.casp-grupo>span{font-size:.85rem;opacity:.8}
.casp-premios{gap:4px 10px;font-size:.78rem}
.casp-premios span{display:flex;align-items:center;gap:2px}
.casp-acc .btn{padding:.35rem .9rem !important}
.btn.cas-ap{padding:.1rem .35rem !important;border-width:6px !important;font-size:.82rem;line-height:1.15}
.cas-ap[aria-pressed="true"]{border-image-source:url(../img/interfaz/ui-2.webp) !important;color:#ffe9b0 !important}
.cas-ficha{display:inline-flex !important;align-items:center;gap:4px}
.cas-ficha i{width:14px;height:14px;border-radius:50%;border:3px dashed;display:inline-block}
.cas-sim{display:inline-block;width:28px;height:28px;background:url(../img/mundo/casino.webp) no-repeat;image-rendering:pixelated;flex:none}
#casCan{min-width:0}
/* teléfono (de pie o acostado) y pantallas bajas: la mesa ocupa toda la pantalla y los controles son más pequeños */
@media (max-width:600px),(max-height:520px){
  .cas-ventana{width:100vw;height:100vh;height:100dvh;border-radius:0;border-width:0}
  .casp-premios{display:none}
  .cas-cab{padding:3px 10px;padding-top:calc(3px + env(safe-area-inset-top,0px))}
  .cas-cab h2{font-size:1rem}
  .cas-cab .tenue{display:none}
  .cas-pie{gap:4px 8px;padding:5px 6px;padding-bottom:calc(5px + env(safe-area-inset-bottom,0px))}
  .casp-grupo>span{font-size:.75rem}
  .casp-acc{flex-wrap:nowrap}
  .casp-acc .btn{padding:.2rem .55rem !important;font-size:.85rem;border-width:7px !important}
  .btn.cas-ap{font-size:.75rem}
}
/* teléfono acostado (pantalla completa): los controles van en una columna a la derecha y el juego usa toda la altura */
@media (orientation:landscape) and (max-height:520px){
  .cas-ventana{display:grid;grid-template-columns:minmax(0,1fr) clamp(150px,22vw,210px);grid-template-rows:auto minmax(0,1fr)}
  .cas-cab{grid-column:1 / -1;grid-row:1;padding-left:calc(10px + env(safe-area-inset-left,0px));padding-right:calc(10px + env(safe-area-inset-right,0px))}
  #casCan{grid-column:1;grid-row:2;width:100%;height:100%}
  .cas-pie{grid-column:2;grid-row:2;flex-direction:column;flex-wrap:nowrap;justify-content:flex-start;align-items:stretch;
    border-top:none;border-left:2px solid #6a4a1a;overflow-y:auto;padding-right:calc(6px + env(safe-area-inset-right,0px))}
  .casp-grupo{justify-content:center;gap:4px}
  .casp-grupo>span{width:100%;text-align:center}
  .casp-acc{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:auto}
  .casp-acc .btn{padding:.2rem .3rem !important;width:100%}
  .casp-acc .btn.principal{grid-column:1 / -1;order:9;padding:.45rem .3rem !important;font-size:1rem}
}
.btn.chef-plato{width:100%;display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:6px;text-align:left;padding:.4rem .6rem !important}
.chef-plato small{display:block;opacity:.75;font-size:.75rem;font-weight:400;line-height:1.2}
.chef-plato .ic3{width:32px !important;height:32px !important;flex:none}
/* prólogo: diálogos estilo novela visual y cinemática */
#pDialogo{background:linear-gradient(transparent 55%,rgba(6,4,14,.55));justify-content:flex-end;cursor:pointer}
.dlg-caja{position:relative;display:flex;gap:14px;align-items:flex-start;width:min(860px,96vw);min-height:120px;padding:14px 16px 18px;
  background:rgba(18,12,34,.94);border:3px solid #b8862f;border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,.6);text-align:left}
#dlgRetrato{width:96px;height:96px;flex:none;border:2px solid #6a4a1a;border-radius:8px;image-rendering:pixelated;background:#1d1638}
.dlg-txt{flex:1;min-width:0}
#dlgNombre{display:block;font-family:Marcellus,Georgia,serif;font-size:1.15rem;margin-bottom:4px}
#dlgTexto{margin:0;font-size:1.08rem;line-height:1.45;color:#f1ecff;min-height:3em}
#pDialogo[data-quien="narr"] #dlgTexto{font-style:italic;color:#d8d0e8}
#pDialogo[data-quien="voz"] #dlgTexto{color:#bff6ff;font-family:"Courier New",monospace}
.dlg-saltar{position:absolute;top:-14px;right:12px;padding:2px 10px;font-size:.8rem;background:#1c0a14;color:#d8c8a0;border:2px solid #6a4a1a;border-radius:6px;cursor:pointer}
.dlg-sig{position:absolute;right:16px;bottom:6px;color:#ffd76a;animation:dlgSig 1s infinite}
@keyframes dlgSig{50%{transform:translateY(3px);opacity:.5}}
#pPrologo{padding:0;background:#000;cursor:pointer;justify-content:flex-end}
#prCan{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated}
.pr-texto{position:relative;z-index:1;margin:0 auto calc(34px + env(safe-area-inset-bottom,0px));width:min(820px,92vw);padding:12px 18px;
  font-size:clamp(1rem,2.6vw,1.3rem);line-height:1.5;color:#f1ecff;background:rgba(0,0,0,.55);border-radius:10px;min-height:3.2em;text-shadow:0 2px 4px #000}
.pr-texto.voz{color:#bff6ff;font-family:"Courier New",monospace;border:1px solid rgba(122,232,255,.5)}
.pr-saltar{position:absolute;z-index:2;top:calc(12px + env(safe-area-inset-top,0px));right:14px;padding:6px 14px;background:rgba(0,0,0,.6);color:#d8c8a0;border:2px solid #6a4a1a;border-radius:8px;cursor:pointer}
.pr-sig{position:absolute;z-index:1;bottom:calc(10px + env(safe-area-inset-bottom,0px));left:0;right:0;font-size:.8rem;color:#9a91c2}
@media (max-width:600px),(max-height:520px){
  .dlg-caja{gap:10px;min-height:0;padding:10px 12px 14px}
  #dlgRetrato{width:64px;height:64px}
  #dlgTexto{font-size:.95rem}
  .pr-texto{margin-bottom:28px;padding:8px 12px}
}
/* selector de idioma en el inicio */
.wl-idioma{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));right:66px;display:flex;align-items:center;gap:6px;z-index:2}
.wl-idioma span{font-size:12px;color:#f1ecff;text-shadow:0 1px 3px #000}
.wl-idioma .wbtn{padding:4px 10px;font-size:13px;min-width:0}
.wl-idioma .wbtn[aria-pressed="true"]{color:#ffd76a !important;filter:brightness(1.3);text-decoration:underline;text-underline-offset:3px}
@media (max-width:600px){.son-flotante{top:calc(8px + env(safe-area-inset-top,0px));right:8px;width:34px;height:34px}.wl-idioma{top:calc(8px + env(safe-area-inset-top,0px));right:48px;gap:4px}.wl-idioma span{display:none}.wl-idioma .wbtn{font-size:12px;padding:3px 8px}}
/* botón de música fuera del juego (inicio, menú, personajes) */
.son-flotante{position:fixed;z-index:30;right:14px;top:calc(14px + env(safe-area-inset-top,0px));width:40px;height:40px;border-radius:50%;
  border:2px solid #b8862f;background:rgba(18,12,34,.85);color:#ffd76a;font-size:18px;cursor:pointer;display:none}
.son-flotante[aria-pressed="false"]{color:#9a91c2;border-color:#5a4a7a;font-size:13px}
body.con-son-flot:not(.jugando) .son-flotante{display:block}
.wl-mas.wl-eq{width:auto;min-width:30px;padding:0 8px;border-radius:12px;font-size:12px}
/* pantallas medianas: la barra de poderes y el panel de la derecha no se pisan */
@media (max-width:1500px){
  body:not(.tactil) .accion{width:35px;height:35px;border-radius:8px}
  body:not(.tactil) #panelAccion #barra{gap:3px;padding:4px 6px}
}
/* con el botón de la montura el menú pequeño creció: entre 1240 y 1320 px se achican sus botones para no tocar la barra */
@media (max-width:1320px) and (min-width:1241px){
  body:not(.tactil) #micro{gap:3px;padding:3px 6px}
  body:not(.tactil) .micro-btn{width:28px;height:30px}
}
@media (max-width:1240px){
  body:not(.tactil) #micro{flex-wrap:wrap;width:172px;justify-content:center;row-gap:4px}
  body:not(.tactil) .micro-btn{width:30px;height:32px}
}
/* el chat no se mete debajo de la barra: más estrecho en pantallas medianas y encima de ella en las pequeñas */
@media (max-width:1500px){ body:not(.tactil) #chat{width:min(380px,calc(50vw - 325px))} }
@media (max-width:1240px){ body:not(.tactil) #chat{width:min(340px,40vw);bottom:calc(84px + env(safe-area-inset-bottom,0px));height:140px} }
.seg-hist .seg-t{color:#ff9ad8}

/* ---------- sala de vídeos ---------- */
#pVideos{justify-content:flex-start;overflow-y:auto;padding:24px 16px}
#pVideos h2{margin-bottom:4px}
.vid-sub{margin-bottom:14px;text-align:center}
.vid-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;width:min(1100px,100%)}
.vid{position:relative;display:flex;flex-direction:column;gap:4px;padding:8px;text-align:left;cursor:pointer;color:#eee;font:500 13px Rajdhani,sans-serif;
  background:linear-gradient(rgba(20,16,12,.95),rgba(8,6,5,.95));border:2px solid #5a4a2a;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.6)}
.vid:hover,.vid:focus-visible{border-color:var(--wo,#ffd100)}
.vid canvas{width:100%;aspect-ratio:16/9;height:auto;border-radius:4px;image-rendering:pixelated;background:#000}
.vid b{font:600 16px "Marcellus",Georgia,serif;color:#ffd76a}
.vid small{color:#c8c0d8;line-height:1.3}
.vid-mini{position:relative;display:block}
.vid-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  font-size:18px;color:#fff;background:rgba(0,0,0,.55);border:2px solid rgba(255,215,106,.8);pointer-events:none}
.vid:hover .vid-play{background:rgba(255,180,60,.55)}
.vid-acc{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:16px 0 8px}
@media (max-width:600px){.vid-lista{grid-template-columns:1fr 1fr;gap:8px}.vid{padding:5px}.vid b{font-size:13px}.vid small{display:none}}
@media (max-height:500px) and (orientation:landscape){#pVideos{padding:10px 60px}.vid-lista{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px}.vid small{display:none}}
.micro-btn[aria-pressed="true"]{border-color:#ffd76a;box-shadow:0 0 8px rgba(255,215,106,.7)}

/* ---------- pausa: ajustes agrupados ---------- */
.ajustes{display:flex;flex-direction:column;gap:10px;width:min(420px,100%)}
.ajustes.oculto{display:none !important}
.aj-grupo{display:flex;flex-direction:column;gap:8px;padding:8px 12px 12px;border-radius:10px;
  background:linear-gradient(rgba(30,22,48,.82),rgba(12,9,20,.88));border:1px solid rgba(201,164,60,.45);box-shadow:inset 0 0 0 1px #000,0 6px 16px rgba(0,0,0,.45)}
.aj-grupo h3{font:600 13px "Marcellus",Georgia,serif;letter-spacing:.12em;text-transform:uppercase;color:var(--wo);text-align:center;
  padding-bottom:5px;border-bottom:1px solid rgba(201,164,60,.3)}
.aj-grupo.solo-tel{display:none}
body.tactil .aj-grupo.solo-tel{display:flex}
.aj-volver{align-self:center;min-width:180px}

/* ---------- ventana del personaje (más cuidada) ---------- */
.pd-cab{display:flex;align-items:center;gap:10px;margin:-2px 0 10px;padding:8px 10px;border-radius:8px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--cc) 22%,transparent),rgba(0,0,0,.35) 70%);border:1px solid color-mix(in srgb,var(--cc) 45%,#3d3016)}
.pd-nivel{flex-shrink:0;width:46px;height:46px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;
  background:radial-gradient(circle at 50% 35%,#3a2c14,#120c05);border:2px solid var(--wb);box-shadow:0 0 10px color-mix(in srgb,var(--cc) 55%,transparent),inset 0 0 6px #000}
.pd-nivel b{font:700 19px "Marcellus",Georgia,serif;color:var(--wo);text-shadow:0 1px 2px #000}
.pd-nivel small{font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:#cdb78a}
.pd-info{flex:1;min-width:0}
.pd-titulos{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:5px}
.pd-titulos b{font:600 15px "Marcellus",Georgia,serif;color:var(--cc);text-shadow:0 1px 2px #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pd-rango{flex-shrink:0;font:700 12px Rajdhani,sans-serif;color:var(--r);padding:1px 8px;border-radius:999px;border:1px solid var(--r);background:rgba(0,0,0,.45)}
.pd-xp{position:relative;height:12px;border-radius:6px;background:#140f22;border:1px solid #4a3a6a;overflow:hidden}
.pd-xp i{position:absolute;inset:0 auto 0 0;background:linear-gradient(#c58cff,#7a3fd0);box-shadow:0 0 6px #a66bff}
.pd-xp small{position:relative;display:block;text-align:center;font:700 10px/11px Rajdhani,sans-serif;color:#fff;text-shadow:0 0 2px #000,0 0 2px #000}
.pd-mod{height:236px;border:1px solid var(--wb2);border-radius:8px;overflow:hidden;
  box-shadow:inset 0 0 0 1px #000,inset 0 0 24px rgba(0,0,0,.85),0 0 12px -2px color-mix(in srgb,var(--cc) 60%,transparent)}
.pd-mod canvas{object-fit:cover;image-rendering:pixelated}
.pd-barras{display:flex;flex-direction:column;gap:5px;margin-top:10px}
.pd-barra{position:relative;display:flex;justify-content:space-between;align-items:center;height:20px;padding:0 8px;border-radius:5px;overflow:hidden;
  background:#120e0a;border:1px solid #3d3016;font-size:13px}
.pd-barra i{position:absolute;inset:0 auto 0 0;transition:width .25s}
.pd-barra.vida i{background:linear-gradient(#3fbf3f,#1d7a1d)}
.pd-barra.rec i{background:linear-gradient(#4f8cff,#2348b0)}
.pd-barra span,.pd-barra b{position:relative;color:#fff;font-weight:700;text-shadow:0 1px 2px #000}
.pd-caja{background:linear-gradient(rgba(40,30,16,.55),rgba(0,0,0,.55));border-radius:6px}
.pd-fila{padding:1px 2px;border-radius:3px}
.pd-caja .pd-fila:nth-child(even){background:rgba(255,255,255,.035)}
.pd-fila.st-fue span::before,.pd-fila.st-agi span::before,.pd-fila.st-vit span::before,.pd-fila.st-int span::before{content:"";display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:2px;transform:rotate(45deg) translateY(-1px)}
.pd-fila.st-fue span::before{background:#ff5a4a}.pd-fila.st-agi span::before{background:#6fe36b}
.pd-fila.st-vit span::before{background:#ffb347}.pd-fila.st-int span::before{background:#6aa8ff}
.pd-puntos{padding:4px;border-radius:6px;background:rgba(30,255,0,.08);border:1px dashed rgba(30,255,0,.4)}
#wPj{width:610px;max-height:calc(100vh - 150px);max-height:calc(100dvh - 150px)}
.pd-cuerpo{display:grid;grid-template-columns:330px 1fr;gap:12px;align-items:start}
.pd-der{display:flex;flex-direction:column;gap:8px;min-width:0}
.pd-der .pd-barras,.pd-der .pd-stats{margin-top:0}
.pd-der .pd-stats{grid-template-columns:1fr}
@media (max-width:660px){
  #wPj{width:auto}
  .pd-cuerpo{grid-template-columns:1fr}
  .pd-der .pd-stats{grid-template-columns:1fr 1fr}
}
/* teléfono acostado: el personaje a la izquierda y los números a la derecha, todo a la vista */
@media (max-height:500px) and (pointer:coarse){
  body.tactil #wPj{width:min(620px,calc(100vw - 16px)) !important}
  body.tactil .pd-cuerpo{grid-template-columns:minmax(0,250px) 1fr;gap:8px}
  body.tactil .pd{grid-template-columns:36px 1fr 36px;gap:4px}
  body.tactil .pd-col{gap:4px}
  body.tactil .pd .wslot,body.tactil .pd-abajo .wslot{width:36px;height:36px}
  body.tactil .pd-mod{height:176px}
  body.tactil .pd-cab{padding:5px 8px;margin-bottom:6px}
  body.tactil .pd-nivel{width:38px;height:38px}
  body.tactil .pd-fila{line-height:1.35}
  body.tactil .pd-der .pd-stats{grid-template-columns:1fr 1fr}
}
/* con un solo gato para elegir, su ícono va centrado sobre el nombre */
#gatosPj{display:flex !important;flex-wrap:wrap;justify-content:center;gap:6px}
#gatosPj .wc-ic{width:min(56px,100%);flex:0 0 auto}

/* ---------- colección (pestaña de la ventana del personaje) ---------- */
.col-cab{display:flex;justify-content:space-between;align-items:center;padding:6px 10px;margin-bottom:6px;border-radius:6px;
  background:linear-gradient(90deg,rgba(255,128,0,.18),rgba(0,0,0,.3));border:1px solid rgba(255,128,0,.4)}
.col-cab b{font:600 16px "Marcellus",Georgia,serif;color:#ff9a3d}.col-cab span{font-weight:700;color:#fff}
.col-sec{font:600 13px "Marcellus",Georgia,serif;color:var(--wo);margin:10px 0 6px;padding-bottom:3px;border-bottom:1px solid #3d3016}
.col-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:6px}
.col-item{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 4px;border-radius:6px;cursor:pointer;text-align:center;color:#fff;
  background:radial-gradient(ellipse at 50% 30%,#2a2238,#0e0b14);border:1px solid #4a3d20;font:600 12px Rajdhani,sans-serif;min-width:0}
.col-item canvas{width:72px;height:58px;image-rendering:pixelated}
.col-item b{font-size:12px;line-height:1.15;color:#ffd76a;overflow-wrap:anywhere}
.col-item small{font-size:10.5px;line-height:1.2;color:#cfc4a8;font-weight:500}
.col-item:hover:not(.bloq){filter:brightness(1.2);border-color:var(--wo)}
.col-item.sel{border-color:#7dffa8;box-shadow:0 0 8px rgba(125,255,168,.5)}
.col-item.sel small{color:#7dffa8;font-weight:700}
.col-item.bloq{cursor:help;background:#0b0910;border-style:dashed}
.col-item.bloq b{color:#8a8296}
/* efectos activos: se pueden tocar (descripción y quitar los buenos) */
#buffs .buff{pointer-events:auto;cursor:help;touch-action:none}
/* objetos en la barra de acción */
.accion.obj canvas{image-rendering:pixelated}
.accion.agotado canvas{filter:grayscale(1) brightness(.45)}
.accion.agotado .num{color:#ff8a9b}
.accion.activo{box-shadow:0 0 0 2px #7dffa8,0 0 10px rgba(125,255,168,.6)}
.wslot .ic-mont{width:36px;height:36px;image-rendering:pixelated}

/* ---------- banco ---------- */
#wBanco{left:16px;top:96px;width:236px}
.banco-tabs{display:flex;gap:4px;padding:6px 10px 0}
.banco-tabs button{flex:1;padding:4px 6px;cursor:pointer;font:600 13px "Marcellus",Georgia,serif;color:#bfa96a;border-radius:6px 6px 0 0;
  background:linear-gradient(#1a130a,#2e2210);border:1px solid var(--wb2);border-bottom:none}
.banco-tabs button[aria-selected="true"]{color:var(--wo);background:linear-gradient(#4a3518,#2e2210);border-color:var(--wb)}
.banco .wbag,.wbag.banco{max-height:230px;overflow-y:auto}
.bbtn{flex:1;min-width:0;padding:5px 6px;cursor:pointer;font:600 13px Rajdhani,sans-serif;color:#f3e2b0;border-radius:4px;
  background:linear-gradient(#5a3d1c,#3a2610);border:1px solid #8a6a30;box-shadow:inset 0 1px 0 rgba(255,230,160,.25)}
.bbtn:hover{filter:brightness(1.2)}
.bbtn:active{transform:translateY(1px)}
.bbtn:disabled{filter:grayscale(.8) brightness(.6);cursor:default}
.bbtn.si{background:linear-gradient(#3d6a26,#244414);border-color:#6aa040}
.banco-amp{display:flex;justify-content:space-between;align-items:center;gap:6px;width:100%;margin-top:6px}
.banco-amp .dinero{font-size:13px;gap:4px}
.banco-nota{margin-top:6px;font-size:11px;color:#9d9d9d;text-align:center;line-height:1.3}
.banco-oro{margin-top:6px;padding:6px;background:rgba(0,0,0,.45);border:1px solid #3d3016;border-radius:3px;display:flex;flex-direction:column;gap:5px}
.banco-oro b{font-size:12px;color:#ffd76a;text-align:center}
.bo-cant{display:flex;gap:4px}
.bo-cant label{flex:1;display:flex !important;flex-direction:row !important;align-items:center;gap:2px;min-width:0;margin:0}
.bo-cant input{width:100%;min-width:0;padding:3px 4px;font:700 13px Rajdhani,sans-serif;color:#fff;text-align:right;background:#0d0a06;border:1px solid #5a4520;border-radius:3px}
.bo-cant input::-webkit-inner-spin-button{display:none}
.bo-cant i{display:inline-block;width:13px;height:13px;flex-shrink:0;background:url(../img/interfaz/ui-1.webp) no-repeat;background-size:300% 100%}
.bo-cant i.m-o{background-position:0 0}.bo-cant i.m-p{background-position:50% 0}.bo-cant i.m-c{background-position:100% 0}
.bo-btns{display:flex;gap:5px;margin-top:6px}
.banco-oro .bo-btns{margin-top:0}
#wBanco .wv-cuerpo{overflow-y:auto;max-height:calc(100dvh - 190px)}
@media (max-width:820px){ #wBanco{left:8px !important;top:70px !important} }
@media (max-height:500px) and (pointer:coarse){
  body.tactil #wBanco{left:calc(8px + env(safe-area-inset-left,0px)) !important;top:calc(18px + env(safe-area-inset-top,0px)) !important;max-height:calc(100dvh - 26px) !important}
  body.tactil .wbag.banco{max-height:140px}
  body.tactil #wBanco .wv-cuerpo{max-height:calc(100dvh - 110px)}
}

/* ---------- grieta sin fin ---------- */
#grietaHud{position:fixed;left:50%;top:calc(10px + env(safe-area-inset-top,0px));transform:translateX(-50%);z-index:4;display:flex;flex-direction:column;align-items:center;
  padding:4px 14px 5px;border-radius:8px;pointer-events:none;background:linear-gradient(rgba(60,8,18,.88),rgba(20,4,10,.88));border:1px solid #ff4f6b;
  box-shadow:0 0 12px rgba(255,79,107,.45);font:600 13px Rajdhani,sans-serif;color:#fff;text-align:center}
#grietaHud.oculto{display:none}
#grietaHud b{font:600 15px "Marcellus",Georgia,serif;color:#ff8a9b}
#grietaHud span{font:700 20px Rajdhani,sans-serif;line-height:1}
#grietaHud span.amar{color:#ffd23f}#grietaHud span.rojo{color:#ff4f6b}
#grietaHud small{font-size:11.5px;color:#ffc9d2}
body:not(.jugando) #grietaHud{display:none}
.grieta-sec{font:600 14px "Marcellus",Georgia,serif;color:#ff8a9b;margin:10px 0 4px;text-align:left}
.grieta-af{display:flex;flex-direction:column;text-align:left;padding:5px 8px;margin-bottom:4px;border-radius:6px;background:rgba(255,79,107,.08);border:1px solid rgba(255,79,107,.3)}
.grieta-af b{color:#ffb3c0}.grieta-af span{font-size:.92rem}

/* ---------- profesiones ---------- */
#wProf{left:50%;top:80px;transform:translateX(-50%);width:min(400px,calc(100vw - 16px));max-height:calc(100vh - 170px);max-height:calc(100dvh - 170px)}
#icoProf .ic3,#btnProf .ic3{width:100%;height:100%}
.prof-tabs{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px}
.prof-tabs button{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:4px;padding:3px 4px;cursor:pointer;font:600 12.5px Rajdhani,sans-serif;color:#bfa96a;
  background:linear-gradient(#1a130a,#2e2210);border:1px solid var(--wb2);border-radius:4px}
.prof-tabs button .ic3{width:20px;height:20px;flex-shrink:0}
.prof-tabs button[aria-selected="true"]{color:var(--wo);background:linear-gradient(#4a3518,#2e2210);border-color:var(--wb)}
.prof-cab{display:flex;justify-content:space-between;align-items:baseline;font:600 16px Marcellus,Georgia,serif;color:var(--wo)}
.prof-cab span{font:600 13px Rajdhani,sans-serif;color:#bbb}
.prof-barra{position:relative;height:16px;margin:4px 0 6px;background:#0d0a06;border:1px solid #5a4520;border-radius:3px;overflow:hidden}
.prof-barra i{position:absolute;inset:0 auto 0 0;background:linear-gradient(#4a8adf,#2a5aa8)}
.prof-barra em{position:absolute;inset:0;text-align:center;font:700 12px/16px Rajdhani,sans-serif;font-style:normal;color:#fff;text-shadow:0 1px 1px #000}
.prof-d{font-size:12.5px;color:#cfc6b0;margin-bottom:6px}
.prof-aviso{font-size:12.5px;color:#ff9a8a;margin-bottom:6px}
.prof-recetas{display:flex;flex-direction:column;gap:5px}
.prof-receta{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:4px 6px;background:rgba(0,0,0,.4);border:1px solid #3d3016;border-radius:3px}
.prof-receta .tienda-ic{min-width:0}
.prof-receta small{display:block;font-size:11.5px;color:#cfc6b0;line-height:1.25}
.prof-receta small .falta{color:#ff8a8a}
.prof-receta .bbtn{flex:0 0 auto;width:64px}
.prof-olvidar{margin-top:10px;background:none;border:none;color:#9a7a7a;font:600 12px Rajdhani,sans-serif;cursor:pointer;text-decoration:underline}
.prof-vacio{margin-bottom:6px}
.prof-maestros{margin-left:18px;font-size:13px;line-height:1.5}
.prof-maestro{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:8px;padding:6px 8px;background:rgba(0,0,0,.25);border-radius:6px}
.prof-maestro small{display:block;opacity:.75;font-size:.75rem;font-weight:400;line-height:1.2}
.prof-maestro .btn{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:120px;padding:.35rem .6rem !important;font-size:.85rem}
/* barra de lanzamiento */
.lanz{position:fixed;left:50%;bottom:calc(150px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:5;width:240px;height:20px;
  background:#0d0a06;border:2px solid #b8933f;border-radius:4px;overflow:hidden;pointer-events:none}
.lanz span{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(#ffd76a,#c8901a)}
.lanz b{position:absolute;inset:0;text-align:center;font:700 13px/16px Rajdhani,sans-serif;color:#fff;text-shadow:0 1px 2px #000}
/* en el teléfono, justo encima de la barra de experiencia (en medio tapaba a los monstruos) */
body.tactil .lanz{bottom:calc(84px + env(safe-area-inset-bottom,0px));width:220px;height:18px}
body.tactil .lanz b{font-size:12px;line-height:14px}
/* mapa del mundo */
#pMapa .mapa-caja{width:min(1400px,calc(100vw - 24px));display:flex;justify-content:center;margin:4px 0}
#mapaLienzo{border:2px solid #b8933f;border-radius:6px;image-rendering:pixelated;background:#0d0a18}
@media (max-height:500px){ #pMapa h2,#pMapa .nota{display:none} #pMapa{gap:4px;padding-top:6px} }
.prof-receta small i{font-style:normal}
@media (min-width:1101px) and (max-width:1460px){ body:not(.tactil) #micro{gap:3px;padding:4px 6px} body:not(.tactil) .micro-btn{width:27px;height:27px;border-radius:7px} body:not(.tactil) #micro #hPoc{display:none} }

/* ---------- interfaz como en WoW ---------- */
.o-nom{display:inline-flex;align-items:center;gap:4px;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.o-nom #oNombre{overflow:hidden;text-overflow:ellipsis}
.marca-cv{width:16px;height:16px;flex-shrink:0}
.o-efectos{display:flex;flex-wrap:wrap;gap:3px;min-height:0;margin-top:2px}
.o-efectos:empty{display:none}
.buff.ef-obj{width:20px;height:20px;background-size:auto 20px;border-radius:4px;pointer-events:auto;margin-bottom:9px}
.buff.ef-obj i{bottom:-11px;font-size:9px}
.marco.foco{cursor:pointer;border:1px solid #6b5a2a;text-align:left;font:inherit;color:inherit}
.marco.foco b{display:flex;align-items:center;gap:3px}
.marco.foco small{color:#9fd0ff}
#miniUI{position:fixed;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:4px;width:28px;pointer-events:none}
#miniUI.oculto{display:none}
#miniUI button{pointer-events:auto;width:24px;height:24px;padding:0;border-radius:50%;border:1px solid #b8933f;background:#1d1638;color:#ffd76a;font:700 15px/1 Rajdhani,sans-serif;cursor:pointer}
#miniUI button:hover{filter:brightness(1.3)}
#miniUI button[aria-pressed="false"]{opacity:.45}
#miniHora{position:absolute;top:0;right:calc(100% + 4px);white-space:nowrap;font:700 12px Rajdhani,sans-serif;color:#ffe9b0;text-shadow:0 1px 2px #000,0 0 4px #000;padding:1px 5px;background:rgba(15,11,28,.75);border:1px solid #6b5a2a;border-radius:4px}
#wBotin{left:50%;top:22%;transform:translateX(-50%);width:min(240px,calc(100vw - 16px));max-height:60vh;max-height:60dvh}
.botin-fila{display:flex;align-items:center;gap:8px;width:100%;padding:3px;margin-bottom:4px;cursor:pointer;background:rgba(0,0,0,.35);border:1px solid #3d3016;border-radius:4px;text-align:left}
.botin-fila:hover{border-color:var(--rc,#b8933f);background:rgba(255,255,255,.05)}
.botin-fila .wslot{width:36px;height:36px;flex-shrink:0;pointer-events:none}
.botin-fila b{font:600 13px Rajdhani,sans-serif;line-height:1.2;overflow-wrap:anywhere}
.botin-todo{width:100%;margin-top:4px}
.wslot .mejora{position:absolute;left:2px;top:0;font:900 13px/1 sans-serif;font-style:normal;color:#40ff60;text-shadow:0 0 2px #000,0 1px 1px #000;pointer-events:none}
.wmenu .marca-ic canvas{width:16px;height:16px;vertical-align:-3px;margin-right:6px}
/* la barra de experiencia es lo bastante alta para que su número no se corte */
#panelAccion .xp{height:12px} #panelAccion .xp em{font-size:9px;line-height:10px}
/* teléfono pequeño acostado: los botones de la selección de personaje en columnas, sin tapar «Entrar al mundo» */
@media (max-width:720px) and (orientation:landscape){
  .wow-sel .ws-izq,.wow-sel .ws-der{display:flex;flex-direction:column;gap:6px;bottom:10px}
  .wow-sel .ws-izq .wbtn,.wow-sel .ws-der .wbtn{min-width:112px;padding:5px 8px;font-size:12.5px}
  #btnEntrarMundo{font-size:15px;padding:8px 16px}
  #clases .wc-ic,#gatosPj .wc-ic{font-size:17px}
}
.ws-pj span{white-space:normal}
/* pestañas de la ventana del personaje: caben en el teléfono vertical */
@media (max-width:600px){ .wv-tabs{flex-wrap:wrap;right:0;padding:0 6px} .wv-tabs button{padding:4px 7px 5px;font-size:12px} }
/* teléfono vertical: el banco arriba y la mochila abajo, sin taparse */
@media (max-width:600px) and (orientation:portrait){
  body:has(#wBanco:not(.oculto)) #wBanco{left:8px !important;right:8px;width:auto !important;top:calc(64px + env(safe-area-inset-top,0px)) !important;max-height:46dvh}
  body:has(#wBanco:not(.oculto)) #wBanco .wv-cuerpo{max-height:calc(46dvh - 96px)}
  body:has(#wBanco:not(.oculto)) #wBolsa{left:8px !important;right:8px !important;width:auto;top:calc(46dvh + 76px) !important;bottom:auto !important;max-height:calc(100dvh - 46dvh - 330px)}
  body:has(#wBanco:not(.oculto)) #wBolsa .wv-cuerpo{overflow-y:auto}
  /* lo mismo con los comerciantes y la casa de subastas: la ventana arriba y la mochila debajo */
  body:has(#wVendedor:not(.oculto)) #wVendedor,body:has(#wSubasta:not(.oculto)) #wSubasta{left:8px !important;right:8px !important;width:auto !important;transform:none !important;top:calc(64px + env(safe-area-inset-top,0px)) !important;max-height:44dvh !important}
  body:has(#wVendedor:not(.oculto)) #wVendedor .wv-cuerpo,body:has(#wSubasta:not(.oculto)) #wSubasta .wv-cuerpo{max-height:calc(44dvh - 96px)}
  body:has(#wVendedor:not(.oculto)) #wBolsa,body:has(#wSubasta:not(.oculto)) #wBolsa{left:8px !important;right:8px !important;width:auto;top:calc(44dvh + 72px + env(safe-area-inset-top,0px)) !important;bottom:auto !important;max-height:calc(56dvh - 242px)}
  body:has(#wVendedor:not(.oculto)) #wBolsa .wv-cuerpo,body:has(#wSubasta:not(.oculto)) #wBolsa .wv-cuerpo{overflow-y:auto;max-height:calc(56dvh - 322px)}
}
#seguimiento.sin-sitio{display:none !important}
/* portada en pantallas bajas (teléfono acostado): título pequeño a la izquierda y el formulario compacto a su derecha */
@media (max-height:500px) and (orientation:landscape){
  .wl-logo{top:calc(14px + env(safe-area-inset-top,0px));left:calc(18px + env(safe-area-inset-left,0px));transform:none;align-items:flex-start;text-align:left}
  .wl-logo b{font-size:30px;letter-spacing:2px}
  .wl-logo small{font-size:10px;letter-spacing:2px;margin-top:2px}
  .wl-idioma span{display:none}
  .wl-idioma .wbtn{padding:3px 8px;font-size:12px}
  .wl-form{top:50%;bottom:auto;left:52%;transform:translate(-50%,-50%);width:min(240px,40vw);gap:4px}
  .wl-form label{font-size:12.5px;gap:2px}
  .wl-form input:not([type=checkbox]){padding:4px 8px;font-size:13px}
  .wl-form .error{min-height:0;font-size:12px}
  .wl-form .wbtn.grande{min-width:150px;font-size:14px;padding:5px 14px}
  .wl-check{font-size:11.5px !important}
  .wl-izq,.wl-der{bottom:calc(10px + env(safe-area-inset-bottom,0px));gap:5px}
  .wl-izq{left:calc(12px + env(safe-area-inset-left,0px))}.wl-der{right:calc(12px + env(safe-area-inset-right,0px))}
  .wl-izq .wbtn,.wl-der .wbtn{min-width:104px;font-size:12px;padding:4px 8px}
  .wl-version{display:block;font-size:10.5px}
  .wl-copy{font-size:10px;bottom:4px}
}
@media (max-height:360px) and (orientation:landscape){ .wl-copy{display:none} .wl-idioma{right:58px} }
/* portada con el teléfono vertical: título arriba, formulario en el centro y los botones en filas abajo */
@media (max-width:600px) and (orientation:portrait){
  .wl-logo{top:calc(64px + env(safe-area-inset-top,0px))}
  .wl-logo b{font-size:38px}
  .wl-logo small{font-size:12px;letter-spacing:2px}
  .wl-form{top:52%;bottom:auto;transform:translate(-50%,-50%);width:min(290px,84vw)}
  .wl-izq{left:50%;transform:translateX(-50%);bottom:calc(84px + env(safe-area-inset-bottom,0px));align-items:center}
  .wl-der{left:12px;right:12px;bottom:calc(30px + env(safe-area-inset-bottom,0px));flex-direction:row;justify-content:center;gap:6px}
  .wl-der .wbtn{flex:1;min-width:0 !important;font-size:12.5px;padding:6px 4px}
  .wl-copy{font-size:10.5px;bottom:8px}
}
@media (max-width:600px){ .wl-idioma{right:calc(54px + env(safe-area-inset-right,0px))} }
/* logo del juego en teléfonos */
@media (max-height:500px) and (orientation:landscape){ .wl-logo img{width:min(240px,30vw)} .ws-logo{top:6px;left:10px;width:min(170px,22vw)} }
@media (max-width:600px) and (orientation:portrait){ .wl-logo img{width:min(320px,82vw)} .ws-logo{left:50%;transform:translateX(-50%);top:calc(8px + env(safe-area-inset-top,0px));width:min(200px,56vw)} .ws-reino{top:calc(100px + env(safe-area-inset-top,0px))} }
/* botón de la música de las portadas: de madera, como los demás, en la esquina */
.son-flotante{right:calc(12px + env(safe-area-inset-right,0px));width:44px;height:44px;border-radius:0;padding:0;line-height:1;
  background:none;border:8px solid transparent;border-image:url(../img/interfaz/ui-3.webp) 9 10 fill / 8px 9px stretch;color:#f1ead8;font-size:17px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.6))}
.son-flotante[aria-pressed="false"]{color:#c9b9a0;border-color:transparent;font-size:12px}
@media (max-width:600px){ .son-flotante{width:40px;height:40px;right:calc(8px + env(safe-area-inset-right,0px))} }
/* ajustes de la portada */
.wl-ajustes{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.45);padding:12px}
.wl-ajustes.oculto{display:none}
.wl-ajustes .wpanel{width:min(330px,92vw);max-height:calc(100% - 20px);overflow:auto;display:flex;flex-direction:column;gap:8px;padding:12px 14px}
.wl-ajustes .wbtn{width:100%;font-size:14px;padding:6px 10px;min-width:0}
.wla-fila{display:flex;align-items:center;justify-content:space-between;gap:8px;font:600 14px Rajdhani,sans-serif;color:#f1ead8}
.wla-fila > div{display:flex;gap:6px}
.wla-fila .wbtn{width:auto;font-size:13px;padding:4px 10px}
.wla-fila [data-idioma][aria-pressed="true"]{color:#ffd76a !important;filter:brightness(1.3);text-decoration:underline;text-underline-offset:3px}
.wla-nota{font:500 12.5px Rajdhani,sans-serif;color:#cfc3ff;margin:0;text-align:center}
@media (max-height:500px) and (orientation:landscape){ .wl-ajustes .wpanel{gap:5px;padding:8px 12px} .wl-ajustes .wbtn{font-size:13px;padding:4px 8px} }
.wl-ajustes .wbtn{border-image-source:url(../img/interfaz/ui-3.webp) !important;color:#f1ead8 !important}
/* la lista de personajes empieza debajo del botón de la música; en pantallas medianas la escena y los paneles no se pisan */
@media (min-width:901px){ .wow-sel .ws-lista{top:calc(66px + env(safe-area-inset-top,0px))} }
@media (min-width:901px) and (max-width:1180px){ .ws-escena{width:min(520px,40vw,64vh)} .ws-lista{width:min(280px,25vw)} .wc-der{width:min(280px,25vw)} .wow-crear .ws-escena{width:min(520px,38vw,62vh)} }
/* biblioteca y tablón de misiones: ventana de pergamino con marco de madera */
.bib-ventana{width:min(820px,96vw);max-height:92vh;max-height:92dvh;display:flex;flex-direction:column;text-align:left;
  background:linear-gradient(#f1e4c2,#e4d2a8);color:#3a2a18;border:10px solid transparent;border-image:url(../img/interfaz/ui-4.webp) 22 22 fill / 10px stretch;box-shadow:0 10px 40px rgba(0,0,0,.6)}
.bib-cab{display:flex;align-items:center;gap:10px;padding:6px 10px;border-bottom:2px solid #a8865a}
.bib-cab h2{margin:0 auto 0 0;font:400 1.35rem "Marcellus",Georgia,serif;color:#5a2a10}
.bib-cab .btn{padding:4px 14px;font-size:14px}
.bib-tabs{display:flex;gap:6px;padding:8px 10px 0;flex-wrap:wrap}
.bib-tabs .wbtn{padding:4px 12px;font-size:14px;min-width:0}
.bib-tabs .wbtn[aria-pressed="true"]{color:#ffe9b0 !important;filter:brightness(1.25);text-decoration:underline;text-underline-offset:3px}
.bib-cuerpo{display:grid;grid-template-columns:minmax(150px,240px) 1fr;gap:10px;padding:10px;min-height:0;flex:1;overflow:hidden}
.bib-lista{display:flex;flex-direction:column;gap:4px;overflow:auto;min-height:0;padding-right:4px}
.bib-item{all:unset;box-sizing:border-box;cursor:pointer;padding:6px 8px;border-radius:4px;font:600 14px Rajdhani,sans-serif;color:#3a2a18;background:rgba(120,80,40,.1);border:1px solid rgba(120,80,40,.25);overflow-wrap:anywhere}
.bib-item:hover{background:rgba(120,80,40,.2)}
.bib-item.sel{background:#7a4a20;color:#fff4d8;border-color:#5a2a10}
.bib-item.bloq{color:#8a7a68;font-style:italic}
.bib-nuevo{color:#c03030;font-style:normal;font-size:10px}
.bib-cuenta{margin:0 0 4px;font:600 13px Rajdhani,sans-serif;color:#6a4a2a}
.bib-libro{overflow:auto;min-height:0;padding:4px 12px 10px;background:rgba(255,250,235,.55);border:1px solid rgba(120,80,40,.3);border-radius:4px}
.bib-libro h3{font:400 1.25rem "Marcellus",Georgia,serif;color:#5a2a10;margin:6px 0 10px;border-bottom:1px solid rgba(120,80,40,.35);padding-bottom:6px}
.bib-libro p{font:500 15.5px/1.5 Georgia,"Times New Roman",serif;margin:0 0 10px}
.bib-libro p:first-of-type::first-letter{font:400 2.1em/1 "Marcellus",Georgia,serif;float:left;margin:2px 6px 0 0;color:#8a1a26}
.bib-ficha{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;font:500 15px Rajdhani,sans-serif;margin:0}
.bib-ficha dt{font-weight:700;color:#7a4a20}.bib-ficha dd{margin:0}
.tab-cuerpo{overflow:auto;padding:8px 10px 12px;min-height:0}
.tab-cab{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap;margin:6px 0;font:700 15px "Marcellus",Georgia,serif;color:#5a2a10}
.tab-cab small{font:600 12px Rajdhani,sans-serif;color:#7a5a3a}
.tab-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px;margin-bottom:8px}
.tab-enc{display:flex;align-items:center;gap:8px;padding:8px;background:#fffaf0;border:1px solid #c8a878;border-radius:3px;box-shadow:2px 3px 0 rgba(90,60,30,.25);position:relative}
.tab-enc::before{content:"";position:absolute;top:-4px;left:50%;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:#b8282e;box-shadow:0 1px 0 #5e0f18}
.tab-enc.hecho{opacity:.6}.tab-enc.listo{border-color:#d4a020;box-shadow:0 0 0 2px rgba(255,209,0,.5),2px 3px 0 rgba(90,60,30,.25)}
.tab-papel{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;font:500 13.5px Rajdhani,sans-serif}
.tab-papel b{font:700 15px Rajdhani,sans-serif;color:#3a2a18;overflow-wrap:anywhere}.tab-papel p{margin:0;overflow-wrap:anywhere}
.tab-premio{color:#7a5a20;font-weight:600}
.tab-barra{display:block;height:7px;background:rgba(0,0,0,.15);border-radius:4px;overflow:hidden}
.tab-barra b{display:block;height:100%;background:linear-gradient(90deg,#c99634,#ffd76a)}
.tab-enc .wbtn{padding:4px 10px;font-size:13px;min-width:0;flex:none}
.tab-enc .wbtn[disabled]{opacity:.45;filter:grayscale(.6)}
.tab-aband{font-size:12px !important;opacity:.85}
.tab-enc .des-ok{color:#2c7a46;font-size:20px;font-weight:900}
@media (max-width:640px){ .bib-cuerpo{grid-template-columns:1fr;grid-template-rows:auto 1fr} .bib-lista{flex-direction:row;overflow-x:auto;max-height:none} .bib-item{flex:none;max-width:70vw} }
@media (max-height:500px){ .bib-ventana{max-height:96dvh} .bib-libro p{font-size:14px} .tab-lista{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))} }
/* distancia de la cámara en Ajustes */
.aj-zoom{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%}
.aj-zoom > span{font:600 14px Rajdhani,sans-serif;color:#e9e4ff}
.aj-zoom > div{display:flex;align-items:center;gap:8px;width:100%;justify-content:center}
.aj-zoom .btn{min-width:0;width:40px;padding:4px 0;font-size:18px;line-height:1}
.aj-zoom input[type=range]{flex:1;max-width:200px;accent-color:#ffd76a}
.aj-zoom small{font:500 12px Rajdhani,sans-serif;color:#b9b0d8}
/* botín de las mazmorras fijas en el panel del portal */
.fija-botin{display:flex;flex-direction:column;gap:3px;margin-top:8px;padding:8px 10px;background:rgba(0,0,0,.25);border:1px solid rgba(163,53,238,.35);border-radius:6px;text-align:left}
.fija-botin > b{font:700 14px Rajdhani,sans-serif;color:#e9e4ff;margin-bottom:2px}
.fija-obj{font:600 14px Rajdhani,sans-serif;line-height:1.25}
.fija-mont{color:#ffd76a !important;margin-top:3px}
@media (max-height:500px){ .fija-botin{display:grid;grid-template-columns:1fr 1fr;column-gap:10px} .fija-botin > b,.fija-mont{grid-column:1/-1} .fija-obj{font-size:13px} }
/* Ciudadela de la Corona Helada: los seis pisos en la puerta */
.ciud-pisos{display:flex;flex-direction:column;gap:4px;margin-top:8px;text-align:left}
.ciud-piso{display:flex;align-items:center;gap:8px;padding:5px 8px;background:rgba(0,0,0,.25);border:1px solid rgba(159,232,255,.3);border-radius:6px}
.ciud-piso.cerrado{opacity:.55}
.ciud-n{flex:0 0 24px;height:24px;border-radius:50%;display:grid;place-items:center;font:700 14px Rajdhani,sans-serif;color:#0c1220;background:#9fe8ff}
.ciud-txt{flex:1;display:flex;flex-direction:column;min-width:0}
.ciud-txt b{font:700 14px Rajdhani,sans-serif;color:#e9e4ff}
.ciud-txt small{font:600 12.5px Rajdhani,sans-serif;color:#9fe8ff}
.ciud-piso .bbtn{padding:3px 12px;flex:0 0 auto;width:auto;min-width:0}
.ciud-piso em{font-style:normal}
@media (max-height:500px){
  .ciud-pisos{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:4px}
  .ciud-piso{padding:3px 6px;gap:6px}
  .ciud-n{flex-basis:18px;height:18px;font-size:12px}
  .ciud-txt b{font-size:12.5px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ciud-txt small{display:none}
  .ciud-piso .bbtn{padding:2px 9px;font-size:11.5px}
  #pPortal:has(.ciud-pisos) .linea:has(+ .linea){display:none}
  #pPortal:has(.ciud-pisos) .rango-grande{display:none}
  #pPortal:has(.ciud-pisos) h2{font-size:24px;margin:0}
  #pPortal:has(.ciud-pisos) .panel{max-width:min(620px,92vw);width:100%}
}
/* aviso al pulsar «Instalar el juego» */
.nota-instalar{position:fixed;left:50%;top:18px;transform:translateX(-50%);z-index:9999;max-width:min(520px,calc(100vw - 32px));padding:10px 16px;border:1px solid #c9a24a;border-radius:6px;background:rgba(18,13,36,.95);color:#f2e6c4;font:600 15px Rajdhani,sans-serif;text-align:center;box-shadow:0 4px 14px rgba(0,0,0,.6);cursor:pointer}

/* botón de la poción (móvil): cuántas quedan, y apagado si no hay */
#mPoc{position:relative;display:grid;place-items:center;padding:0}
#mPoc .ic3{display:block}
#mPoc .cnt{position:absolute;right:3px;bottom:1px;font:700 14px Rajdhani,sans-serif;color:#fff;text-shadow:0 1px 0 #000,0 0 3px #000,1px 0 0 #000,-1px 0 0 #000;line-height:1;pointer-events:none}
#mPoc.sin-poc{filter:grayscale(1) brightness(.7)}
#mPoc.sin-poc .cnt{color:#ff8a9b}
/* ---------- Guía de los primeros minutos ---------- */
#guia{position:fixed;z-index:6;width:min(320px,calc(100vw - 20px));padding:10px 12px;border-radius:12px;
  background:linear-gradient(#21184a,#120c26);border:1px solid rgba(242,196,109,.75);box-shadow:0 6px 24px rgba(0,0,0,.6);color:#f1ebff}
.guia-cab{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.guia-cab b{color:#ffd76a;font-size:1rem}
.guia-cab small{color:#b9a8e8;font-size:.75rem}
#guiaTxt{margin:6px 0 10px;font-size:.88rem;line-height:1.35}
.guia-bot{display:flex;justify-content:flex-end;gap:8px}
.guia-bot .btn{padding:6px 12px;font-size:.82rem;margin:0;width:auto}
#guiaAro{position:fixed;z-index:6;pointer-events:none;border-radius:12px;border:2px solid #ffd76a;
  box-shadow:0 0 14px 2px rgba(255,215,106,.8);animation:guiaLatir 1.1s ease-in-out infinite}
@keyframes guiaLatir{50%{box-shadow:0 0 4px 0 rgba(255,215,106,.4);transform:scale(1.08)}}
/* ---------- Personaje como en WoW 3.3.5: título arriba, pestañas Mascotas/Habilidades/Monedas y ventana de logros ---------- */
.pd-cab{flex-direction:column;align-items:center;gap:4px}
.pd-tit select{font:600 14px "Marcellus",Georgia,serif;color:var(--wo);background:#1a1208;border:1px solid var(--wb);border-radius:4px;padding:2px 8px;max-width:100%}
.pd-linea{margin:0;font-size:.92rem;color:#e8dcc0;text-align:center}
.pd-linea b{color:var(--cc)}
.mon-caja .mon-fila{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 2px;border-bottom:1px solid rgba(201,164,60,.25)}
.mon-fila span{display:flex;align-items:center;gap:6px}
.mon-fila .ic3{width:22px;height:22px}
.col-sec small{color:#bfa96a;font-size:.8em;margin-left:6px}
#wLogros{left:50%;top:80px;transform:translateX(-50%);width:min(620px,calc(100vw - 16px));max-height:calc(100vh - 190px);max-height:calc(100dvh - 190px)}
#wLogrosCuerpo{overflow-y:auto}
.log-cab{display:grid;grid-template-columns:1fr auto;gap:4px 8px;margin-bottom:8px}
.log-cab b{color:var(--wo)}
.log-cab i{grid-column:1/-1;height:10px;border-radius:5px;background:#140f22;border:1px solid #4a3a6a;overflow:hidden}
.log-cab i b{display:block;height:100%;background:linear-gradient(#ffe27a,#c08a10)}
@media (max-height:500px) and (pointer:coarse){
  body.tactil #wLogros{left:50% !important;right:auto !important;transform:translateX(-50%) !important;width:min(620px,calc(100vw - 16px)) !important;
    top:calc(18px + env(safe-area-inset-top,0px)) !important;max-height:calc(100dvh - 54px) !important}
}
/* la ventana del personaje mide lo mismo en todas las pestañas: lo que no cabe se desplaza por dentro */
#wPj .wv-cuerpo{flex:1 1 auto;min-height:0;overflow-y:auto}
/* ---------- Comerciante (como en WoW 3.3.5): 2 x 5 artículos por página, recompra y confirmación ---------- */
#wVendedor{left:16px;top:96px;width:430px;max-height:calc(100dvh - 150px)}
#wVendedor .wv-cuerpo{overflow-y:auto}
.vd-saludo{margin:0 0 8px;color:#e8dcc0;font-size:.9rem;min-height:1.2em}
.vd-extras{display:flex;flex-direction:column;gap:3px;margin-bottom:8px}
.vd-extra{display:flex;align-items:center;gap:6px;background:none;border:0;color:#ffd76a;font:600 13px Rajdhani,sans-serif;text-align:left;cursor:pointer;padding:2px 0}
.vd-extra:hover span{text-decoration:underline}
.vd-extra .ic3{width:18px;height:18px}
.vd-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.vd-art{display:flex;align-items:center;gap:6px;min-height:46px;padding:3px;border:1px solid rgba(201,164,60,.35);border-radius:4px;background:rgba(0,0,0,.35);color:inherit;font:inherit;text-align:left;cursor:pointer}
.vd-art:hover{border-color:var(--rc,#ffd100);background:rgba(255,209,0,.08)}
.vd-art.vacio{cursor:default;border-style:dashed;opacity:.35}
.vd-ic{position:relative;flex:0 0 38px;width:38px;height:38px;display:grid;place-items:center;border:2px solid var(--rc,#555);border-radius:4px;background:#120c1e}
.vd-ic .ic3,.vd-ic .ico-obj,.vd-ic canvas{width:30px !important;height:30px !important;image-rendering:pixelated}
.vd-ic .cnt{position:absolute;right:1px;bottom:0;font:700 11px Rajdhani,sans-serif;color:#fff;text-shadow:0 0 2px #000,0 0 2px #000;font-style:normal}
.vd-txt{display:flex;flex-direction:column;min-width:0;line-height:1.15}
.vd-txt b{font-size:.86rem;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.vd-txt small{font-size:.8rem;color:#e8dcc0}
.vd-art.pobre .vd-txt small{color:#ff6a6a}
.vd-art.no .vd-ic{filter:grayscale(1) brightness(.6)}
.vd-art.no .vd-txt small{color:#ff6a6a}
.vd-mon{display:inline-flex;align-items:center;gap:2px;font-weight:700}
.vd-mon .ic3{width:16px;height:16px}
.vd-pie{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px;margin-top:8px;padding-top:6px;border-top:1px solid rgba(201,164,60,.3)}
.vd-pag{display:flex;align-items:center;gap:4px;font-size:.85rem}
.vd-rep{display:inline-flex;align-items:center;gap:4px}
.vd-rep .ic3{width:16px;height:16px}
.vd-dinero{margin-left:auto;display:inline-flex;align-items:center;gap:6px}
.vd-nota{margin:6px 0 0}
.tventa{color:#fff}
#vConfirm{position:fixed;left:50%;top:30%;transform:translateX(-50%);z-index:9;width:min(360px,calc(100vw - 24px));padding:14px;border-radius:8px;text-align:center;
  background:linear-gradient(#21184a,#120c26);border:2px solid #c9a43c;box-shadow:0 8px 30px rgba(0,0,0,.7);color:#f1ebff}
#vConfirm p{margin:0 0 12px;line-height:1.35}
#vConfirm div{display:flex;gap:8px;justify-content:center}
#vConfirm .btn{width:auto;margin:0;padding:8px 18px}
@media (max-width:660px){ #wVendedor{left:8px !important;right:8px;width:auto} }
@media (max-height:500px) and (pointer:coarse){
  body.tactil #wVendedor{left:calc(8px + env(safe-area-inset-left,0px)) !important;right:auto !important;transform:none !important;width:min(430px,58vw) !important;
    top:calc(18px + env(safe-area-inset-top,0px)) !important;max-height:calc(100dvh - 54px) !important}
  body.tactil .vd-art{min-height:40px}
}
/* ---------- Casa de subastas (como en WoW 3.3.5) ---------- */
#wSubasta{left:50%;top:70px;transform:translateX(-50%);width:min(760px,calc(100vw - 16px));max-height:calc(100dvh - 140px)}
#wSubasta .wv-cuerpo{overflow-y:auto}
.sb-msg{margin:0 0 6px;color:#ffe9a0;font-size:.9rem}
.sb-filtros{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:8px}
.sb-filtros input,.sb-filtros select,.sb-lin input{background:#140e22;border:1px solid #6b5a2a;color:#f1ebff;border-radius:4px;padding:4px 6px;font:500 13px Rajdhani,sans-serif}
#sbTxt{flex:1 1 160px;min-width:120px}
.sb-nvf{display:inline-flex;align-items:center;gap:3px;font-size:.85rem}
.sb-nvf input{width:44px}
.sb-tabla{display:flex;flex-direction:column;gap:2px}
.sb-cab,.sb-fila{display:grid;grid-template-columns:minmax(0,2.6fr) 34px 70px minmax(0,1fr) minmax(0,1.3fr) minmax(0,1.3fr);gap:6px;align-items:center}
.sb-cab{font-size:.78rem;color:#bfa96a;padding:0 4px 2px;border-bottom:1px solid rgba(201,164,60,.3)}
.sb-cab span[data-ord]{cursor:pointer;text-decoration:underline dotted}
.sb-fila{padding:3px 4px;border:1px solid transparent;border-radius:4px;background:rgba(0,0,0,.3);color:inherit;font:inherit;text-align:left;cursor:pointer;min-height:38px}
.sb-fila:hover{background:rgba(255,209,0,.07)}
.sb-fila.sel{border-color:#ffd100;background:rgba(255,209,0,.12)}
.sb-obj{display:flex;align-items:center;gap:6px;min-width:0}
.sb-obj b{font-size:.86rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-ic{position:relative;flex:0 0 32px;width:32px;height:32px;display:grid;place-items:center;border:2px solid var(--rc,#555);border-radius:4px;background:#120c1e}
.sb-ic.vacio{border-style:dashed;opacity:.5}
.sb-ic .ic3,.sb-ic .ico-obj{width:26px !important;height:26px !important;image-rendering:pixelated}
.sb-ic .cnt{position:absolute;right:1px;bottom:0;font:700 11px Rajdhani,sans-serif;color:#fff;text-shadow:0 0 2px #000,0 0 2px #000;font-style:normal}
.sb-nv,.sb-t,.sb-v{font-size:.82rem}
.sb-v{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-p,.sb-c{display:flex;flex-direction:column;font-size:.82rem}
.sb-p small,.sb-c small{font-size:.7rem;color:#9a91c2}
.sb-pie{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px;margin-top:8px}
.sb-acc{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.sb-din{display:inline-flex;align-items:center;gap:2px}
.sb-din input{width:52px;background:#140e22;border:1px solid #6b5a2a;color:#f1ebff;border-radius:4px;padding:3px 4px;font:600 13px Rajdhani,sans-serif;text-align:right}
.sb-din input[data-u="100"],.sb-din input[data-u="1"]{width:38px}
.sb-din i{width:12px;height:12px;display:inline-block;margin-right:3px}
.sb-poner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:12px}
.sb-form{display:flex;flex-direction:column;gap:7px}
.sb-ranura{display:flex;align-items:center;gap:8px;padding:6px;border:1px dashed rgba(201,164,60,.5);border-radius:6px;min-height:46px}
.sb-ranura .sb-ic{flex-basis:38px;width:38px;height:38px}
.sb-lin{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:.86rem}
.sb-lin input[type=number]#sbCant{width:60px}
.sb-dur{display:flex;gap:4px;flex-wrap:wrap}
.sb-dur .wbtn[aria-pressed="true"]{border-color:#ffd100;color:#ffd100}
.sb-mias,.sb-buzon{display:flex;flex-direction:column;gap:4px}
.sb-sub{color:#ffd76a;font-size:.9rem}
.sb-mia,.sb-carta{display:flex;align-items:center;gap:6px;padding:4px;border-radius:4px;background:rgba(0,0,0,.3)}
.sb-mt{display:flex;flex-direction:column;min-width:0;flex:1}
.sb-mt b{font-size:.86rem}
.sb-mt small{font-size:.78rem;color:#e8dcc0}
.sb-dinero{margin-top:6px}
#avisoCorreo{font-size:13px !important}
@media (max-width:720px){
  .sb-cab,.sb-fila{grid-template-columns:minmax(0,2.4fr) 28px 56px minmax(0,1.2fr) minmax(0,1.2fr)}
  .sb-cab span:nth-child(4),.sb-fila .sb-v{display:none}
  .sb-poner{grid-template-columns:1fr}
}
@media (max-height:500px) and (pointer:coarse){
  body.tactil #wSubasta{top:calc(14px + env(safe-area-inset-top,0px)) !important;max-height:calc(100dvh - 50px) !important;width:min(760px,calc(100vw - 230px)) !important;left:8px !important;transform:none !important}
  body.tactil .sb-fila{min-height:34px}
}
.sb-poner{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.sb-lin{flex-wrap:wrap}
.sb-lin>span:first-child{min-width:78px;color:#e8dcc0}
.sb-lin{justify-content:flex-start;text-align:left}
.sb-lin .sb-din{margin-left:auto}
/* ---------- guía para instalar en iPhone y iPad ---------- */
.guia-ios{z-index:10000;background:rgba(6,4,14,.72);justify-content:center;padding:16px}
.guia-ios-v{max-width:440px;width:100%;padding:18px 18px 14px;text-align:left}
.guia-ios-v h2{margin:0 0 10px;font-size:1.25rem;color:#ffd76a;text-align:center}
.guia-ios-v ol{margin:0 0 12px;padding-left:22px;display:flex;flex-direction:column;gap:9px;color:#f1ebff;font-size:1rem;line-height:1.4}
.guia-ios-v b{color:#ffe9a0}
.ic-compartir{width:22px;height:22px;vertical-align:-5px;color:#5aa8ff;background:#fff;border-radius:5px;padding:2px}
.ic-mas{display:inline-block;padding:0 6px;border-radius:6px;background:#fff;color:#2a2a2a !important;font-weight:900;line-height:1.3}
.guia-ios-bot{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.guia-ios-bot .btn{width:auto;margin:0}
/* creación: los botones de girar van a los lados de la plataforma (así no los tapa el nombre en pantallas bajas) */
#pCrear .ws-rotar{position:absolute;left:2%;right:2%;top:76%;margin:0;justify-content:space-between;pointer-events:none}
#pCrear .ws-rotar .wrot{pointer-events:auto}
/* inicio de sesión con la cuenta del servidor */
.wl-olvido{display:block;margin-top:6px;background:none;border:0;padding:0;font:600 13px Rajdhani,sans-serif;color:#ffd76a;text-decoration:underline;cursor:pointer;text-shadow:0 1px 2px #000;text-align:center}
.wl-olvido.oculto{display:none}
a.wbtn{display:inline-block;text-decoration:none;text-align:center}
/* traer los personajes de antes a la cuenta nueva */
.ws-traer{margin-top:8px;padding-top:8px;border-top:1px solid rgba(255,215,106,.3);font:500 13px Rajdhani,sans-serif;color:#e9e4ff}
.ws-traer p{margin:0 0 6px}
.ws-traer-c{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:4px 0}
.ws-traer-c span{display:flex;flex-direction:column}.ws-traer-c small{color:#b9b0d8}
.ws-traer-c .wbtn{min-width:70px;padding:3px 8px;font-size:13px}

/* ===== RANKING Y PERFILES DE OTROS JUGADORES ===== */
#wRank{left:50%;top:80px;transform:translateX(-50%);width:min(560px,calc(100vw - 16px));max-height:calc(100dvh - 190px)}
#wRankCuerpo{overflow-y:auto}
.rk-sub{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;margin:0 0 8px;font-size:.9rem;color:#cfc6ea}
.rk-con,.wl-con{color:#7dffa8}
.rk-con::before,.wl-con::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#3ddc6a;box-shadow:0 0 6px #3ddc6a;margin-right:5px;vertical-align:1px}
.rk-tabla{display:flex;flex-direction:column;gap:3px}
.rk-fila{display:grid;grid-template-columns:34px 30px 1fr auto;align-items:center;gap:8px;padding:5px 8px;background:rgba(0,0,0,.35);border:1px solid #3a3052;border-radius:3px;color:#e9e4ff;text-align:left;cursor:pointer;font:inherit}
.rk-fila:hover{border-color:#ffd76a;background:rgba(255,215,106,.08)}
.rk-fila.mio{border-color:#7fc8ff;background:rgba(127,200,255,.1)}
.rk-pos{font:700 1.05rem Rajdhani,sans-serif;text-align:center;color:#b9b0d8}
.rk-pos.top1{color:#ffd100}.rk-pos.top2{color:#d8d8e8}.rk-pos.top3{color:#e0995a}
.rk-ic{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:radial-gradient(color-mix(in srgb,var(--cc) 45%,transparent),#100c18 70%);font-size:15px}
.rk-nom{display:flex;flex-direction:column;min-width:0}
.rk-nom b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rk-nom small{color:#a99fc8;font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rk-val{font-weight:700;color:#ffd76a;white-space:nowrap}
.rk-on{display:inline-block;width:8px;height:8px;border-radius:50%;background:#3ddc6a;box-shadow:0 0 5px #3ddc6a;vertical-align:1px}
.rk-pie{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:10px}
.rk-volver{margin-bottom:10px}
.rk-perfil{display:flex;gap:14px;align-items:flex-end;margin-bottom:10px}
.rk-perfil canvas{flex:none;width:120px;height:150px;image-rendering:pixelated;background:radial-gradient(ellipse at 50% 80%,rgba(255,215,106,.12),transparent 70%)}
.rk-datos{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.rk-nombre{font:400 1.4rem Marcellus,Georgia,serif;color:#7fc8ff}
.rk-tit{color:#ffd100;font-size:.85rem}
.rk-herm{color:#7dffa8;font-size:.85rem}
.rk-eqt{display:block;color:var(--wo,#ffd76a);margin:4px 0}
.rk-equipo{display:grid;grid-template-columns:repeat(2,1fr);gap:4px}
.rk-pieza{display:flex;flex-direction:column;padding:4px 7px;background:rgba(0,0,0,.35);border:1px solid #3a3052;border-radius:3px;min-width:0}
.rk-pieza span{font-size:.75rem}
.rk-pieza b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.88rem}
.rk-pieza small{color:#a99fc8;font-size:.72rem}
.sb-real{display:inline-block;width:7px;height:7px;border-radius:50%;background:#7fc8ff;box-shadow:0 0 4px #7fc8ff;margin-right:4px;vertical-align:1px}
@media (max-width:520px){ .rk-equipo{grid-template-columns:1fr} .rk-perfil canvas{width:96px;height:120px} }
@media (max-height:500px) and (pointer:coarse){
  body.tactil #wRank{left:50% !important;right:auto !important;transform:translateX(-50%) !important;width:min(560px,calc(100vw - 16px)) !important;
    top:calc(18px + env(safe-area-inset-top,0px)) !important;max-height:calc(100dvh - 54px) !important}
}

/* F5 con la sesión abierta: mientras se comprueba, en vez del login se ve «Conectando…» */
html.volviendo #pAuth{visibility:hidden}
html.volviendo body::after{content:"Conectando…";position:fixed;left:50%;top:55%;transform:translate(-50%,-50%);z-index:50;font:600 20px Rajdhani,sans-serif;color:#ffd76a;text-shadow:0 2px 6px #000;letter-spacing:.06em}
html[lang=en].volviendo body::after{content:"Connecting…"}

/* ===== ANUNCIOS (portada y tienda) Y FICHAS DE LA TIENDA (pantalla de personajes) ===== */
/* los anuncios van a la derecha, bajo el botón de la música y encima de «Cómo jugar»: ni tapan el logo ni el formulario */
.wl-anuncios{position:absolute;top:calc(64px + env(safe-area-inset-top,0px));right:calc(20px + env(safe-area-inset-right,0px));width:min(330px,27vw);max-height:calc(100% - 64px - 200px);overflow:hidden;display:flex;flex-direction:column;gap:8px;z-index:2}
.wl-anuncio p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}
.wl-anuncio{padding:10px 12px;background:rgba(14,10,28,.88);border:1px solid rgba(255,215,106,.45);border-left:4px solid #ffd76a;border-radius:4px;color:#e9e4ff;font:500 14px Rajdhani,sans-serif;box-shadow:0 4px 14px rgba(0,0,0,.5)}
.wl-anuncio b{display:block;color:#ffd76a;font:400 16px Marcellus,Georgia,serif}
.wl-anuncio p{margin:4px 0 0;line-height:1.35}
.wl-anuncio.evento{border-left-color:#7dffa8}.wl-anuncio.oferta{border-left-color:#ff9f43}.wl-anuncio.mantenimiento{border-left-color:#ff6b6b}
/* móvil en horizontal: más pequeños, uno solo y con el texto en dos líneas */
@media (max-height:520px) and (orientation:landscape){
  .wl-anuncios{top:calc(66px + env(safe-area-inset-top,0px));right:calc(12px + env(safe-area-inset-right,0px));width:min(260px,25vw);max-height:calc(100% - 66px - 150px);gap:6px}
  .wl-anuncios .wl-anuncio:nth-child(2){display:none}
  .wl-anuncio{padding:6px 9px;font-size:12px} .wl-anuncio b{font-size:14px} .wl-anuncio p{margin-top:2px;-webkit-line-clamp:2}
}
.ws-tienda-caja{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.ws-tienda{text-align:center}
.ws-fichas{display:flex;flex-direction:column;gap:6px;padding:8px;background:rgba(0,0,0,.35);border:1px solid rgba(255,215,106,.3);border-radius:4px}
.ws-fichas>b{color:#ffd76a;font:400 15px Marcellus,Georgia,serif}
.ws-ficha{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:14px}
.ws-ficha small{color:#ffd76a}
.ws-ficha .wbtn{padding:4px 8px;font-size:13px;min-width:0}
.ws-renombrar{display:flex;gap:6px}
.ws-renombrar input{flex:1;min-width:0;padding:6px 8px;font:600 14px Rajdhani,sans-serif;color:#fff;background:rgba(0,0,0,.75);border:1px solid #8a8a8a;border-radius:3px}
.ws-ficha-msg{margin:0;min-height:1em;color:#7dffa8;font-size:13px}
.ws-ficha-msg.mal{color:#ff8a8a}
.ws-repetido{border-color:#ff8a8a}.ws-repetido>b{color:#ff8a8a}.ws-repetido p{margin:0;font-size:13.5px;line-height:1.35}

/* el logo y, debajo, la tienda (pantalla de personajes) */
.ws-marca{position:absolute;top:10px;left:18px;width:min(270px,24vw);display:flex;flex-direction:column;align-items:center;gap:8px;z-index:2}
.ws-marca .ws-logo{position:static;width:100%;transform:none}
.ws-btn-tienda{width:100%;box-sizing:border-box;text-align:center;white-space:nowrap;font-size:clamp(13px,1.3vw,17px);box-shadow:0 0 16px rgba(255,215,106,.35)}
@media (max-height:500px) and (orientation:landscape){ .ws-marca{top:6px;left:10px;width:min(170px,22vw);gap:4px} .ws-btn-tienda{padding:4px 6px;font-size:12px} }
@media (max-width:600px) and (orientation:portrait){ .ws-marca{left:50%;transform:translateX(-50%);top:calc(8px + env(safe-area-inset-top,0px));width:min(200px,56vw);gap:4px} .ws-btn-tienda{padding:4px 8px;font-size:13px} }
@media (max-width:600px) and (orientation:portrait){ #pPersonajes .ws-reino{top:calc(156px + env(safe-area-inset-top,0px))} }

/* lo que llega de la tienda: aviso fijo arriba hasta pulsar «Entendido» */
.noti-tienda{position:fixed;top:calc(70px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);z-index:70;width:min(420px,calc(100vw - 24px));box-sizing:border-box;padding:12px 14px;display:flex;flex-direction:column;gap:8px;border-color:#ffd76a;box-shadow:0 0 0 2px rgba(255,215,106,.25),0 8px 28px rgba(0,0,0,.7);animation:notiEntra .35s ease-out}
.noti-tienda.oculto{display:none}
.noti-tienda ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;max-height:42vh;overflow:auto}
.noti-tienda li{display:flex;gap:10px;align-items:center}
.noti-tienda li b{display:block;color:#ffd76a}
.noti-tienda li small{display:block;color:#cfc6ea;font-size:13px;line-height:1.3}
.noti-ico{font-size:24px;flex:none}
.noti-botones{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
@keyframes notiEntra{from{opacity:0;transform:translate(-50%,-12px)}to{opacity:1;transform:translate(-50%,0)}}
/* monturas en la pestaña Mascotas: se arrastran a la barra (o 📌) */
.col-mont{position:relative;display:flex}
.col-mont>.col-item{flex:1}
.col-mont[draggable=true]{cursor:grab}
.col-barra{position:absolute;top:3px;right:3px;width:26px;height:26px;padding:0;border-radius:50%;border:1px solid rgba(255,215,106,.6);background:rgba(10,6,20,.85);font-size:13px;line-height:24px;cursor:pointer}
.col-barra:hover{background:#3a2a10}
.ws-gatos{display:flex;flex-wrap:wrap;gap:6px}.ws-gatos .wbtn{padding:4px 8px;font-size:13px;min-width:0}
/* el botón de la tienda: siempre del ancho del logo y con la letra que quepa (sin el ancho ni la letra de .wbtn.grande) */
.ws-marca .wbtn.ws-btn-tienda{min-width:0;max-width:100%;padding:4px 8px !important;font-size:clamp(12px,1.25vw,17px);overflow:hidden;text-overflow:ellipsis}
@media (max-height:500px) and (orientation:landscape){ .ws-marca .wbtn.ws-btn-tienda{padding:2px 6px !important;font-size:clamp(11px,1.45vw,14px)} }
@media (max-width:600px) and (orientation:portrait){ .ws-marca .wbtn.ws-btn-tienda{font-size:clamp(12px,3.6vw,15px)} }
/* se cayó la conexión: aviso encima de todo mientras el juego espera */
.red-caida{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;background:rgba(5,4,12,.72);backdrop-filter:blur(2px)}
.red-caja{max-width:min(380px,88vw);padding:20px 24px;text-align:center;color:#e9e4ff;background:linear-gradient(#1d1830,#120f1f);border:2px solid #b8963e;border-radius:10px;box-shadow:0 0 30px rgba(0,0,0,.7)}
.red-caja h3{margin:6px 0 4px;color:#ff8a7a;font-size:20px}
.red-caja p{margin:4px 0 8px;font-size:17px}
.red-caja b{color:#ffd76a}
.red-caja small{color:#b9b2d6;font-size:13px}
.red-giro{width:34px;height:34px;margin:0 auto;border:4px solid rgba(255,215,106,.25);border-top-color:#ffd76a;border-radius:50%;animation:redGiro 1s linear infinite}
@keyframes redGiro{to{transform:rotate(360deg)}}
/* en vertical (móvil o tableta) no se juega: se pide girar el dispositivo */
.girar-pantalla{display:none}
@media (orientation:portrait) and (pointer:coarse){
  .girar-pantalla{position:fixed;inset:0;z-index:10000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:24px;text-align:center;background:#0d0a18;color:#e9e4ff}
  .girar-pantalla h3{margin:8px 0 0;color:#ffd76a;font:400 24px Marcellus,Georgia,serif}
  .girar-pantalla p{margin:0;font:500 16px Rajdhani,sans-serif;color:#b9b2d6}
  .girar-ico{font-size:56px;animation:girarIco 2.4s ease-in-out infinite}
}
@keyframes girarIco{0%,25%{transform:rotate(0)}50%,85%{transform:rotate(-90deg)}100%{transform:rotate(0)}}
.girar-pantalla .girar-toca{margin-top:14px;font-size:14px;color:#ffd76a}
.girar-pantalla .girar-lado{margin-top:16px;padding:8px 22px !important;font-size:17px}
.girar-pantalla .girar-nota{margin-top:6px;max-width:300px;font-size:13px;color:#8f88b3}
/* diálogos de misión y de la Asociación (fundar hermandad...): si el texto no cabe, se desplaza por dentro
   y los botones de abajo siempre quedan a la vista */
#pMision #miCuerpo{max-height:calc(100dvh - 210px);overflow-y:auto;overscroll-behavior:contain;flex-shrink:1}
@media (max-height:520px){ #pMision #miCuerpo{max-height:calc(100dvh - 150px)} }

/* libro de hechizos: el tiempo de lanzamiento de cada hechizo */
.wl-h small.wl-lanz{color:#1f4fa8;font-weight:700}

/* crear personaje: la raza con su descripción y su isla */
.wc-sub.wc-raza{margin:2px 0 8px;line-height:1.25}
.wc-raza .wc-isla{color:#9fe0ff}
@media (max-height:520px){ .wc-sub.wc-raza{font-size:10.5px;margin:0 0 4px} }

/* viaje en barco: pantalla de carga */
#pViaje.viaje{background:#0e2a48;z-index:60}
#viajeCv{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated}
.viaje-caja{position:absolute;left:50%;bottom:calc(9% + env(safe-area-inset-bottom,0px));transform:translateX(-50%);width:min(520px,86vw);text-align:center;
  background:rgba(8,12,28,.7);border:1px solid #b8933f;border-radius:6px;padding:12px 16px}
.viaje-caja h2{margin:0 0 8px;font:700 22px "Marcellus",Georgia,serif;color:#ffd76a;text-shadow:0 2px 4px #000}
.viaje-barra{height:12px;background:#0d0a06;border:1px solid #b8933f;border-radius:3px;overflow:hidden}
.viaje-barra span{display:block;height:100%;width:0;background:linear-gradient(#7ad8ff,#2a7ab8)}
.viaje-caja p{margin:8px 0 0;font:600 14px Rajdhani,sans-serif;color:#d8e6ff}
.mi-zarpar{display:block;width:100%;margin-top:8px}
@media (max-height:520px){ .viaje-caja{padding:8px 12px} .viaje-caja h2{font-size:17px;margin-bottom:5px} .viaje-caja p{font-size:12px} }

/* aviso de desconexión por inactividad (sobre la elección de personaje) */
.aviso-ausente{position:fixed;left:50%;top:18px;transform:translateX(-50%);z-index:9999;max-width:min(460px,calc(100vw - 24px));
  background:linear-gradient(#8a5a30,#6a4020);border:3px solid #2a1608;border-radius:8px;box-shadow:0 6px 20px rgba(0,0,0,.5);
  padding:12px 16px;color:#fff2c8;font-family:Rajdhani,sans-serif;display:flex;flex-direction:column;gap:4px;cursor:pointer;text-align:center}
.aviso-ausente b{font-family:Marcellus,Georgia,serif;font-size:1.15rem;color:#ffd76a}
.aviso-ausente.oculto{display:none}
/* entrar con Ronin Wallet y vincular Ronin en la selección de personajes */
.wl-form .wbtn.wl-ronin{width:100%;max-width:260px;padding:6px 12px !important;font-size:15px;border-image:none !important;border:1px solid #6fa4ff !important;border-radius:4px;
  background:linear-gradient(#1f5fe0,#1546b3) !important;color:#fff !important;text-shadow:0 1px 1px #0008;box-shadow:0 0 0 1px #000,0 2px 6px #0008}
.wl-form .wbtn.wl-ronin:hover:not(:disabled){filter:brightness(1.15)}
.wl-form .wbtn.wl-ronin:disabled{filter:grayscale(.6);opacity:.7}
.ws-marca .wbtn.ws-ronin{width:100%;min-width:0;padding:3px 8px !important;font-size:clamp(11px,1.1vw,15px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  border-image:none !important;border:1px solid #6fa4ff !important;border-radius:4px;background:linear-gradient(#1f5fe0,#1546b3) !important;color:#fff !important;box-shadow:0 0 0 1px #000,0 2px 6px #0008}
.ws-marca .wbtn.ws-ronin:disabled{background:rgba(10,30,70,.85) !important;color:#9fc3ff !important;opacity:1;cursor:default;filter:none}
.ws-ronin-msg{width:100%;margin:0;padding:6px 8px;font:600 13px Rajdhani,sans-serif;color:#7dff9a;background:rgba(0,0,0,.78);border:1px solid #555;border-radius:3px;text-align:center}
.ws-ronin-msg.error{color:#ff8080}
@media (max-height:520px){ .wl-form .wbtn.wl-ronin{font-size:13px;padding:4px 10px !important} .ws-ronin-msg{font-size:11px;padding:3px 5px} .ws-marca .wbtn.ws-ronin{padding:2px 6px !important;font-size:clamp(10.5px,1.4vw,13px)} }
/* conectar Ronin Wallet (WalletConnect): QR en PC, botón para abrir la app en el móvil */
.ronin-con{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.72);padding:16px}
.ronin-caja{width:min(340px,100%);max-height:100%;overflow:auto;display:flex;flex-direction:column;align-items:center;gap:10px;padding:16px 18px;
  background:#0d1630;border:1px solid #6fa4ff;border-radius:8px;box-shadow:0 0 0 1px #000,0 8px 30px #000a;color:#e8eefc;text-align:center;font:600 14px Rajdhani,sans-serif}
.ronin-caja h3{margin:0;font:700 19px "Marcellus",Georgia,serif;color:#9fc3ff}
.ronin-caja p{margin:0}
.ronin-qr{width:220px;max-width:70vw;background:#fff;border-radius:6px;padding:4px}
.ronin-qr svg{display:block;width:100%;height:auto}
.ronin-caja .wbtn.wl-ronin{display:block;width:100%;padding:7px 12px !important;text-decoration:none;border-image:none !important;border:1px solid #6fa4ff !important;border-radius:4px;background:linear-gradient(#1f5fe0,#1546b3) !important;color:#fff !important}
.ronin-ext{color:#9fc3ff;text-decoration:underline}
@media (max-height:520px){ .ronin-qr{width:150px} .ronin-caja{gap:6px;padding:10px 14px} }