/* Legado de los Reinos — estilos v11 (2026-11-04). Va después del <style> de index.html y lo corrige o completa. */
[hidden]{display:none!important}

/* ---------- el marco cuadrado alrededor de cada enemigo era un box-shadow del recuadro entero:
   ahora el tipo se marca con un aro en el suelo y el brillo sigue la silueta ---------- */
.enemigo.comun,.enemigo.elite,.enemigo.jefe,.enemigo.cargando,.enemigo.contragolpe{box-shadow:none}
.enemigo::before{content:"";position:absolute;left:16%;right:16%;height:8%;border-radius:50%;pointer-events:none;
  bottom:calc(100% - var(--pies,92) * 1% - 4%);background:radial-gradient(ellipse at center,var(--aro,#8d7c6677) 0,transparent 68%)}
.enemigo.comun{--aro:#a99370aa}
.enemigo.elite{--aro:#76efe2dd}
.enemigo.jefe{--aro:#ffd861f0}
.enemigo.jefe::before{animation:aro-jefe 1.6s ease-in-out infinite}
@keyframes aro-jefe{50%{opacity:.55;transform:scaleX(1.12)}}
.peleador img{filter:hue-rotate(var(--matiz,0deg)) drop-shadow(0 14px 12px rgba(0,0,0,.7))}
.enemigo.elite img{filter:hue-rotate(var(--matiz,0deg)) drop-shadow(0 0 7px #76efe2aa) drop-shadow(0 14px 12px rgba(0,0,0,.7))}
.enemigo.jefe img{filter:hue-rotate(var(--matiz,0deg)) drop-shadow(0 0 9px #ffd861aa) drop-shadow(0 14px 12px rgba(0,0,0,.7))}
.enemigo.cargando img{filter:hue-rotate(var(--matiz,0deg)) drop-shadow(0 0 14px #ff9c41) drop-shadow(0 0 4px #ff9c41) drop-shadow(0 14px 12px rgba(0,0,0,.7))}
.enemigo.cargando::before{--aro:#ff9c41f0;animation:aro-jefe .5s ease-in-out infinite}
.enemigo.contragolpe img{filter:hue-rotate(var(--matiz,0deg)) drop-shadow(0 0 12px #ff5c5c) drop-shadow(0 14px 12px rgba(0,0,0,.7))}
.enemigo.furia img{filter:hue-rotate(var(--matiz,0deg)) drop-shadow(0 0 16px #ff3b2a) drop-shadow(0 14px 12px rgba(0,0,0,.7))}
.enemigo.furia::before{--aro:#ff3b2af0}
.enemigo.cargando,.enemigo.contragolpe{animation:none}
/* El avance del golpe ya no atraviesa al otro: llega hasta donde queda el hueco (--av lo calcula colocar()). */
@keyframes golpe{0%{transform:translateX(0)}22%{transform:translateX(-8px) rotate(-2deg)}
  52%{transform:translateX(var(--av,54px)) rotate(2deg)}70%{transform:translateX(calc(var(--av,54px) * .7))}100%{transform:translateX(0)}}
@keyframes ataca{0%{transform:translateX(8px)}42%{transform:translateX(calc(var(--av,46px) * -.85)) rotate(-6deg)}100%{transform:translateX(0)}}
.arena{--av:46px}

/* ---------- efectos ---------- */
.capa-fx{position:fixed;inset:0;z-index:60;pointer-events:none;overflow:hidden}
.fx-canvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:59}
body.con-panel .fx-canvas{display:none}
.fx-vineta{position:fixed;inset:0;pointer-events:none;z-index:58;opacity:0;
  background:radial-gradient(circle at 50% 50%,transparent 42%,var(--c,#d02010) 135%)}
.dano{font-size:26px;-webkit-text-stroke:3px rgba(20,6,2,.7);paint-order:stroke fill;will-change:transform,opacity;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.dano.grande{font-size:34px}
.dano.critico{font-size:40px;-webkit-text-stroke:4px rgba(60,20,4,.75)}
.dano.habilidad{font-size:44px}
.dano.al-heroe{font-size:22px}
.dano.oro{font-size:20px;color:#ffd861;text-shadow:0 2px #6a3a07,0 0 10px #f4b73c;-webkit-text-stroke:2.5px rgba(40,14,2,.7)}
.dano.barrera{color:#9ff8ee;text-shadow:0 2px #0f3a46,0 0 12px #67e5ff}
.dano.esquive{font-size:22px}

/* ---------- pantalla de juego ---------- */
.riel.barrera{height:5px;margin-top:3px;padding:0;border-color:#67e5ff55}
.riel.barrera i{transition:transform .12s;background:linear-gradient(90deg,#3a9fb3,#9ff8ee)}
.vida-enemigo .riel.barrera i{transform-origin:right}
.efectos span.rol{border-color:#8d7c62;color:#c9b894}
.chips{position:absolute;z-index:14;left:10px;right:10px;top:64px;display:flex;flex-wrap:wrap;gap:4px;pointer-events:none}
.chip{padding:2px 7px;border:1px solid #ffdb8655;border-radius:99px;background:#100906d0;color:#e9d9b6;font-size:9px;font-weight:800;letter-spacing:.02em}
.chip.racha{border-color:#ff8f3c;color:#ffb978}
.chip.x2{border-color:#ffd861;color:#ffd861}
.laterales{position:absolute;z-index:31;right:8px;bottom:76px;display:flex;flex-direction:column;gap:6px;align-items:center}
.laterales button{width:38px;height:38px;border:1px solid var(--linea);border-radius:50%;background:#0c0805d8;font-size:16px;color:#f8ecd3}
.laterales .sonido{position:static}
.laterales .x2{font-size:10px;font-weight:900;color:var(--oro);border-color:var(--oro)}
.laterales .x2.activo{background:#3a2a07;box-shadow:0 0 10px #f4b73c88}
.revivir{position:absolute;z-index:46;left:50%;top:42%;transform:translateX(-50%);padding:12px 18px;border:2px solid #ffd861;border-radius:12px;
  background:#1d1207f0;color:#ffd861;font-weight:900;font-size:13px;box-shadow:0 0 22px #f4b73c88;animation:pulso-r 1s ease-in-out infinite}
@keyframes pulso-r{50%{transform:translateX(-50%) scale(1.05)}}
.toast{position:absolute;z-index:57;left:50%;top:84px;transform:translate(-50%,-30px);width:max-content;max-width:92%;display:flex;gap:9px;align-items:center;
  padding:9px 14px;border:1px solid #ffd861;border-radius:12px;background:#1b1208f4;box-shadow:0 6px 22px #000b;opacity:0;pointer-events:none}
.toast i{font-style:normal;font-size:22px}
.toast b{display:block;font-size:12px;color:#ffd861}
.toast small{display:block;margin-top:2px;font-size:10px;color:#e9d9b6;font-weight:700}
.toast.ver{animation:toast 3.3s ease-out}
@keyframes toast{0%{opacity:0;transform:translate(-50%,-30px)}9%,86%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-14px)}}
.cartel p#patronJefe{margin:8px auto 0;max-width:300px;padding:0 24px;color:#ffb9a8;font-size:11px;font-weight:700;line-height:1.4}
.lamina.leyenda{filter:drop-shadow(0 0 6px #ffb445) drop-shadow(0 2px 3px #000b)!important}

/* ---------- estadísticas del héroe (segunda fila) ---------- */
.datos + .datos{margin-top:5px}
.dato b{font-size:11px;white-space:nowrap}

/* ---------- menú de inicio ---------- */
.inicio{overflow-y:auto;padding:max(12px,env(safe-area-inset-top)) 0 max(12px,env(safe-area-inset-bottom))}
.inicio .tarjeta{width:min(100%,360px);margin:auto}
.inicio h1{margin:0 0 4px}
.inicio p{margin:0 0 16px}
.inicio .regreso{max-height:34vh;overflow-y:auto;padding:10px 12px;border:1px solid var(--linea);border-radius:10px;background:#0c0805aa;text-align:left;font-size:12px;line-height:1.45}
.inicio button.primario{display:block;width:100%;padding:15px 20px;font-size:16px;letter-spacing:.03em;margin-bottom:12px;box-shadow:0 4px 18px #c98f3166}
.menu-sec{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.inicio button.sec{padding:12px 8px;border:1px solid #6b5230;background:#1b1208;color:#e9d9b6;font-size:13px;box-shadow:none}
.inicio .idioma{display:flex;justify-content:center;align-items:center;gap:8px;margin:2px 0 0;font-size:11px;color:#a99370;letter-spacing:0}
.inicio select,.modal select{padding:7px 9px;border:1px solid #6b5230;border-radius:8px;background:#1b1208;color:#f8ecd3;font:inherit;font-size:12px}

/* ---------- ventanas ---------- */
.modal{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:14px;background:#050302d9;backdrop-filter:blur(3px)}
.modal-caja{width:min(100%,520px);max-height:min(88vh,88dvh);display:flex;flex-direction:column;border:1px solid #6b5230;border-radius:14px;
  background:radial-gradient(circle at 50% 0,#3a200f 0,#120a05 80%);box-shadow:0 12px 40px #000c;color:var(--tinta)}
.modal-cabeza{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 14px;border-bottom:1px solid var(--linea)}
.modal-cabeza b{font:900 14px Georgia,serif;letter-spacing:.1em}
.modal-cabeza button{width:34px;height:34px;border:1px solid var(--linea);border-radius:50%;background:#0c0805;color:#f8ecd3;font-size:14px}
.modal-cuerpo{overflow-y:auto;padding:14px;-webkit-overflow-scrolling:touch;font-size:12px;line-height:1.5}
.ajustes{display:grid;gap:8px}
.fila{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 11px;border:1px solid var(--linea);border-radius:10px;background:#0f0a06d9;font-size:12px;font-weight:800}
.fila small{display:block;margin-top:2px;color:#8d7c62;font-size:10px;font-weight:700}
.fila input{width:130px;padding:7px 9px;border:1px solid #6b5230;border-radius:8px;background:#1b1208;color:#f8ecd3;font:inherit;font-size:12px}
.fila.evento{border-color:#ffd86155}
.interruptor{position:relative;flex:none;width:46px;height:26px;padding:0;border:1px solid #6b5230;border-radius:99px;background:#241309}
.interruptor i{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#8d7c62;transition:transform .15s,background .15s}
.interruptor[aria-checked="true"]{background:#3a2a07;border-color:var(--oro)}
.interruptor[aria-checked="true"] i{transform:translateX(20px);background:var(--oro)}
.botones-aj{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.botones-aj .boton{padding:11px 4px}
.boton.grande{width:100%;padding:13px;font-size:12px}
ol.como{margin:0;padding-left:20px;display:grid;gap:9px;font-size:13px;line-height:1.5}
.creditos{text-align:center;display:grid;gap:8px}
.creditos b{font:900 18px Georgia,serif;color:var(--oro)}
.creditos p{margin:0}
.creditos small{color:#8d7c62}

/* ---------- logros, diario, semana ---------- */
.resumen-l{margin:0 0 9px;color:var(--oro);font-weight:900;font-size:12px}
.lista-logros{display:grid;gap:6px}
.logro{display:grid;grid-template-columns:28px 1fr auto;gap:9px;align-items:center;padding:8px 10px;border:1px solid var(--linea);border-radius:10px;background:#0f0a06d9;opacity:.75}
.logro.ok{opacity:1;border-color:#c9922f}
.logro i{font-style:normal;font-size:20px;text-align:center}
.logro b{display:block;font-size:11px}
.logro small{display:block;margin-top:2px;color:#8d7c62;font-size:9px;font-weight:700}
.barra-l{display:block;height:4px;margin-top:5px;border-radius:3px;background:#3d2a18;overflow:hidden}
.barra-l u{display:block;height:100%;background:var(--oro)}
.premio-l{text-align:right;font-size:10px;font-weight:900;color:#a99370}
.premio-l small{color:#c9922f}
.dias{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin:8px 0}
.dia{padding:7px 2px;border:1px solid var(--linea);border-radius:9px;background:#0f0a06d9;text-align:center}
.dia small{display:block;color:#8d7c62;font-size:8px;font-weight:800}
.dia b{display:block;font-size:18px;margin:3px 0}
.dia em{display:block;font-style:normal;color:#c9a96b;font-size:7px;font-weight:800;line-height:1.2;min-height:18px}
.dia.hecho{opacity:.5;border-color:var(--acento)}
.dia.hoy{border-color:var(--oro);box-shadow:0 0 10px #f4b73c66;background:#2e1c0d}
.racha-txt{margin:6px 0 10px;text-align:center;color:#ffb978;font-weight:900;font-size:12px}
.cofre-caja{margin-top:16px}
.boton:disabled{opacity:.5}
.mejora.mision .precio{white-space:nowrap}
.seccion .subtabs{margin-top:0}
.subtab{font-size:9px;padding:8px 4px}

/* ---------- movimiento reducido ---------- */
@media (prefers-reduced-motion:reduce){
  .heroe.quieto,.enemigo.entra,.enemigo.entra.flota,.enemigo.jefe::before,.enemigo.cargando::before,.revivir{animation:none!important}
  .arena.viajando .lejos,.arena.viajando .cerca,.arena.viajando .piso{animation:none!important}
  .heroe.golpea,.enemigo.ataca,.enemigo.pegado,.heroe.herido,.heroe.esquiva{animation-duration:.01s!important}
  .heroe.sube:after{animation:none;opacity:0}
  .dano{animation:dano-quieto .9s ease-out forwards!important}
  @keyframes dano-quieto{0%{opacity:0}15%,70%{opacity:1}100%{opacity:0}}
  .toast.ver{animation:toast-q 3.3s linear}
  @keyframes toast-q{0%{opacity:0}6%,90%{opacity:1}100%{opacity:0}}
}