@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700;900&family=Crimson+Pro:ital,wght@0,300;0,400;0,600;1,400&display=swap');

:root {
  --gold:    #c9a84c; --gold-l:  #f0d080; --gold-d:  #7a5c1e;
  --bg:      #0a0a0f; --bg-card: #1a1726; --bg-card2:#221f33;
  --border:  #2e2a45; --border-g:#4a3a1a;
  --text:    #e8e0d0; --muted:   #8a7f9a; --dim:     #4a4460;
  --red:     #c0392b; --red-l:   #e74c3c;
  --blue:    #2980b9; --blue-l:  #3498db;
  --green:   #27ae60; --green-l: #2ecc71;
  --amber:   #d4800a; --amber-l: #f0a030;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Crimson Pro',Georgia,serif;background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden}

/* Partículas */
#particles{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:hidden}
.star{position:absolute;width:2px;height:2px;background:var(--gold);border-radius:50%;opacity:0;animation:twinkle linear infinite}
@keyframes twinkle{0%,100%{opacity:0}50%{opacity:.6}}

/* Header */
header{position:relative;z-index:1;text-align:center;padding:1.5rem 1rem .8rem;border-bottom:1px solid var(--border-g);background:linear-gradient(180deg,#0d0b15,transparent)}
header h1{font-family:'Cinzel',serif;font-size:clamp(1.8rem,4vw,3rem);font-weight:900;color:var(--gold);text-shadow:0 0 40px rgba(201,168,76,.4);letter-spacing:.1em}
header p{font-size:.9rem;color:var(--muted);font-style:italic;margin-top:.2rem}

/* Nav */
nav{position:relative;z-index:1;display:flex;justify-content:center;gap:.5rem;padding:.8rem;border-bottom:1px solid var(--border);flex-wrap:wrap}
.nav-btn{font-family:'Cinzel',serif;font-size:.78rem;padding:.45rem 1rem;background:var(--bg-card);border:1px solid var(--border);color:var(--muted);cursor:pointer;border-radius:4px;transition:all .2s;letter-spacing:.04em}
.nav-btn:hover{border-color:var(--gold);color:var(--gold)}
.nav-btn.active{background:var(--gold-d);border-color:var(--gold);color:var(--gold-l)}
/* Campana de notificaciones del admin: indicador rojo cuando hay no leídas.
   El punto se posiciona arriba-derecha del botón; la pulsación llama la
   atención sin hacerse agresiva. */
.nav-btn.notif-bell{position:relative}
.nav-btn.notif-bell.has-unread{border-color:#ff4d4f;color:#ff6b6b;box-shadow:0 0 6px rgba(255,77,79,.35);animation:notif-bell-pulse 1.6s ease-in-out infinite}
.notif-dot{position:absolute;top:-4px;right:-4px;width:10px;height:10px;background:#ff4d4f;border-radius:50%;box-shadow:0 0 6px #ff4d4f}
.notif-dot.hidden{display:none}
@keyframes notif-bell-pulse{0%,100%{box-shadow:0 0 6px rgba(255,77,79,.35)}50%{box-shadow:0 0 14px rgba(255,77,79,.8)}}

/* ─── Mina de oro ─── Tarjeta pasiva generadora de oro en el perfil */
.gold-mine-card{
  position:relative;overflow:hidden;
  background:linear-gradient(160deg,#0e0a00 0%,#1a1200 50%,#0e0800 100%);
  border-color:#3a2800;
  transition:border-color .5s ease,box-shadow .5s ease;
}
.gold-mine-card::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 80% 20%,rgba(255,215,0,.09),transparent 55%),
             radial-gradient(ellipse at 20% 90%,rgba(180,120,0,.06),transparent 50%);
}
/* Card glow states driven by JS class */
.gold-mine-card.mine-s1{border-color:#4a3400}
.gold-mine-card.mine-s2{border-color:#7a5500;box-shadow:0 0 12px rgba(200,140,0,.12)}
.gold-mine-card.mine-s3{border-color:#c9900a;box-shadow:0 0 20px rgba(255,180,0,.2)}
.gold-mine-card.mine-s4{
  border-color:#ffd700 !important;
  animation:mine-card-full 2s ease-in-out infinite;
}
@keyframes mine-card-full{
  0%,100%{box-shadow:0 0 22px rgba(255,215,0,.3),0 0 6px rgba(255,215,0,.2) inset}
  50%    {box-shadow:0 0 55px rgba(255,215,0,.7),0 0 18px rgba(255,215,0,.4) inset}
}
.gold-mine-header{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:.8rem;position:relative;z-index:1;
}
.gold-mine-title{
  font-family:'Cinzel',serif;font-size:.95rem;color:var(--gold);
  display:flex;align-items:center;gap:.4rem;letter-spacing:.04em;
  text-shadow:0 0 10px rgba(255,215,0,.3);
}
.gold-mine-title-icon{font-size:1.1rem;filter:drop-shadow(0 0 5px rgba(255,215,0,.5))}
.gold-mine-rate-badge{
  font-size:.68rem;font-family:'Cinzel',serif;letter-spacing:.06em;
  color:#b8860b;background:rgba(184,134,11,.12);
  border:1px solid rgba(184,134,11,.35);
  padding:.18rem .55rem;border-radius:999px;
}
.gold-mine-body{display:flex;gap:1rem;align-items:center;margin:.1rem 0 .8rem;position:relative;z-index:1}
.gold-mine-icon-wrap{flex-shrink:0;position:relative;display:flex;align-items:center;justify-content:center;width:56px;height:56px}
.gold-mine-icon{
  font-size:2.5rem;position:relative;z-index:1;
  transform-origin:65% 75%;
  filter:drop-shadow(0 0 5px rgba(255,215,0,.4));
  will-change:transform;
}
/* Mining swing — speed set via animation-duration inline style */
@keyframes mine-swing{
  0%,100%{transform:rotate(-22deg) scale(1)}
  42%    {transform:rotate(16deg)  scale(1.12)}
  55%    {transform:rotate(10deg)  scale(1.08)}
}
.gold-mine-icon.mining{animation:mine-swing var(--swing-dur,2s) ease-in-out infinite}
/* Full state: violent shake */
.gold-mine-icon.gold-mine-full{
  animation:gold-mine-shake .65s ease-in-out infinite!important;
  filter:drop-shadow(0 0 16px rgba(255,215,0,1));
}
@keyframes gold-mine-shake{
  0%,100%{transform:rotate(0deg)   scale(1.05) translate(0,0)}
  20%    {transform:rotate(-14deg) scale(1.12) translate(-2px,1px)}
  40%    {transform:rotate(14deg)  scale(1.12) translate(2px,-1px)}
  60%    {transform:rotate(-8deg)  scale(1.08) translate(-1px,0)}
  80%    {transform:rotate(8deg)   scale(1.08) translate(1px,1px)}
}
/* Ambient glow halo around icon */
.gold-mine-glow{
  position:absolute;inset:-6px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,215,0,.18),transparent 70%);
  animation:mine-halo var(--halo-dur,3s) ease-in-out infinite;
}
@keyframes mine-halo{0%,100%{opacity:.4;transform:scale(.9)}50%{opacity:1;transform:scale(1.25)}}
.gold-mine-info{flex:1;min-width:0}
.gold-mine-amount{
  font-family:'Cinzel',serif;font-size:1.55rem;color:var(--gold);
  line-height:1;display:flex;align-items:baseline;gap:.12rem;
  text-shadow:0 0 12px rgba(255,215,0,.25);
}
.gold-mine-amount .gold-mine-slash{color:#4a3a10;font-size:1.1rem}
.gold-mine-amount .gold-mine-coin{font-size:1.1rem;margin-left:.15rem}
.gold-mine-bar{
  margin-top:.45rem;height:8px;
  background:rgba(0,0,0,.5);border:1px solid #3a2800;
  border-radius:4px;overflow:hidden;
}
.gold-mine-bar-fill{
  height:100%;width:0%;
  background:linear-gradient(90deg,#7a5200,#ffd700,#ffe87a);
  background-size:200% 100%;
  transition:width .7s ease;
  box-shadow:0 0 8px rgba(255,215,0,.5) inset;
  animation:gold-bar-flow 3s linear infinite;
}
@keyframes gold-bar-flow{0%{background-position:0 0}100%{background-position:200% 0}}
.gold-mine-next{font-size:.72rem;color:#7a6010;margin-top:.35rem;min-height:.9rem;font-style:italic}
.gold-mine-next.mine-full{color:#ffd700;font-style:normal;font-weight:700;animation:pulse-glow 1.5s ease-in-out infinite}
.gold-mine-btn{
  position:relative;z-index:1;
  background:linear-gradient(135deg,#3a2200,#5a3600)!important;
  border-color:#b8860b!important;
  letter-spacing:.06em;
}
.gold-mine-btn:not(:disabled):hover{
  background:linear-gradient(135deg,#5a3600,#8a5600)!important;
  box-shadow:0 0 18px rgba(255,215,0,.35)!important;
}
.gold-mine-btn:disabled{opacity:.5;cursor:not-allowed}
/* Flash overlay on claim */
.mine-claim-flash{
  position:absolute;inset:0;border-radius:8px;pointer-events:none;z-index:20;
  background:radial-gradient(circle at 28% 50%,rgba(255,240,130,.9),rgba(255,200,0,.4) 40%,transparent 70%);
  animation:mine-flash .55s ease-out forwards;
}
@keyframes mine-flash{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.08)}}
/* Ambient spark particles (JS-spawned) */
.mine-spark{
  position:fixed;font-size:.65rem;pointer-events:none;z-index:9997;
  animation:mine-spark-fly var(--dur,.8s) ease-out forwards;
}
@keyframes mine-spark-fly{
  0%  {opacity:1;transform:translate(0,0) scale(1)}
  100%{opacity:0;transform:translate(var(--tx,0px),var(--ty,-40px)) scale(.2)}
}

/* ═══════════════════════════════════════════════════════════════
   Mina de Oro — Modo extracción "Cobrar o Seguir Excavando"
   Reutiliza la paleta --gold/--gold-l/--gold-d existente.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --mine-success:#6ec27a;
  --mine-success-d:#3d7045;
  --mine-fail-soft:#b88860;
  --mine-fail-soft-d:#6e4e2e;
  --mine-vein-glow:rgba(255,215,0,.42);
}

/* Importante: nuestras reglas con display:flex/inline-block tienen la misma
   especificidad que el [hidden] del UA stylesheet, lo cual rompe el
   atributo HTML `hidden`. Forzamos display:none cuando hidden está presente
   para que JS pueda alternar vistas con elem.hidden = bool. */
.gold-mine-extraction[hidden],
.gold-mine-body[hidden],
.gold-mine-btn[hidden],
.gold-mine-attempt-badge[hidden],
.extraction-digging-overlay[hidden],
.extraction-feedback[hidden]{
  display:none !important;
}

.gold-mine-attempt-badge{
  font-family:'Cinzel',serif;font-size:.62rem;letter-spacing:.08em;
  background:linear-gradient(135deg,#3a2a10,#5a3a1a);
  color:var(--gold-l);border:1px solid var(--gold-d);
  border-radius:10px;padding:.18rem .5rem;
  box-shadow:inset 0 0 6px rgba(0,0,0,.4),0 0 8px rgba(255,200,80,.25);
  animation:mine-attempt-pulse 1.8s ease-in-out infinite;
}
@keyframes mine-attempt-pulse{
  0%,100%{box-shadow:inset 0 0 6px rgba(0,0,0,.4),0 0 8px rgba(255,200,80,.25)}
  50%   {box-shadow:inset 0 0 6px rgba(0,0,0,.4),0 0 14px rgba(255,200,80,.55)}
}

.gold-mine-card.in-extraction{
  transform:scale(1.025);
  box-shadow:0 0 28px rgba(255,200,80,.35),0 8px 30px rgba(0,0,0,.6);
  border-color:var(--gold);
  transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}

.gold-mine-extraction{
  display:flex;flex-direction:column;gap:.7rem;
  padding:.4rem .2rem .2rem;
  animation:mine-extraction-in .35s ease-out;
}
@keyframes mine-extraction-in{
  from{opacity:0;transform:translateY(-6px)}
  to  {opacity:1;transform:translateY(0)}
}

/* —— Zona "En la veta" —— */
.extraction-vein{
  position:relative;
  background:radial-gradient(ellipse at center,rgba(80,55,20,.55),rgba(20,10,5,.85));
  border:1px solid var(--gold-d);border-radius:10px;
  padding:.85rem .6rem;text-align:center;
  min-height:90px;overflow:hidden;
  box-shadow:inset 0 0 22px rgba(0,0,0,.5),inset 0 0 8px var(--mine-vein-glow);
}
.extraction-vein-label{
  display:block;font-family:'Cinzel',serif;font-size:.6rem;
  letter-spacing:.18em;color:var(--gold-d);text-transform:uppercase;
  margin-bottom:.25rem;
}
.extraction-vein-amount{
  font-family:'Cinzel',serif;font-size:1.85rem;font-weight:700;
  color:var(--gold-l);
  text-shadow:0 0 12px var(--mine-vein-glow),0 0 2px #000;
  display:flex;align-items:center;justify-content:center;gap:.35rem;
  animation:vein-shimmer 2.4s ease-in-out infinite;
}
@keyframes vein-shimmer{
  0%,100%{text-shadow:0 0 10px var(--mine-vein-glow),0 0 2px #000}
  50%   {text-shadow:0 0 20px rgba(255,225,140,.65),0 0 4px #000}
}

/* —— Próxima decisión —— */
.extraction-next-info{
  display:flex;flex-direction:column;gap:.3rem;
  background:rgba(15,10,4,.55);border:1px solid var(--border-g);
  border-radius:8px;padding:.55rem .6rem;
}
.next-row{
  display:flex;align-items:center;gap:.5rem;
  font-family:'Crimson Pro',serif;font-size:.92rem;
}
.next-row-success{color:var(--mine-success)}
.next-row-fail   {color:var(--mine-fail-soft)}
.next-icon{
  font-weight:700;font-size:1rem;width:1rem;text-align:center;
}
.next-prob{font-weight:700;min-width:3.4rem;font-variant-numeric:tabular-nums}
.next-arrow{opacity:.55;font-size:.85rem}
.next-result{
  font-weight:700;font-variant-numeric:tabular-nums;
  color:var(--gold-l);
}
.next-delta{
  margin-left:auto;font-size:.78rem;font-variant-numeric:tabular-nums;
  opacity:.85;
}
.next-row-success .next-delta{color:var(--mine-success)}
.next-row-fail    .next-delta{color:var(--mine-fail-soft)}

.prob-bar{
  display:flex;height:6px;border-radius:3px;overflow:hidden;
  background:#0a0a0f;border:1px solid #2a1f10;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.6);
}
.prob-bar-success{
  background:linear-gradient(90deg,var(--mine-success-d),var(--mine-success));
  height:100%;transition:width .45s ease;
}
.prob-bar-fail{
  background:linear-gradient(90deg,var(--mine-fail-soft),var(--mine-fail-soft-d));
  height:100%;transition:width .45s ease;
}

/* —— Botones de acción —— */
.extraction-actions{
  display:flex;gap:.5rem;
}
.extraction-actions .btn{flex:1;font-size:.86rem;padding:.55rem .4rem}
.extraction-claim{
  background:linear-gradient(180deg,#1d1916,#0e0c0a);
  color:var(--gold-l);border:1px solid var(--gold-d);
}
.extraction-claim:hover{
  background:linear-gradient(180deg,#2a221a,#15110d);
  box-shadow:0 0 10px rgba(255,200,80,.3);
}
.extraction-continue.risky{
  border-color:#a05a30;
  box-shadow:0 0 10px rgba(180,80,30,.45);
  animation:risky-pulse 1.4s ease-in-out infinite;
}
.extraction-continue.danger{
  border-color:#c84020;
  box-shadow:0 0 14px rgba(200,60,30,.65);
  animation:risky-pulse 1s ease-in-out infinite;
}
@keyframes risky-pulse{
  0%,100%{filter:brightness(1)}
  50%   {filter:brightness(1.18)}
}
.extraction-actions .btn:disabled{opacity:.45;cursor:wait;filter:grayscale(.4)}

/* —— Animación DIGGING (overlay sobre la veta) —— */
.extraction-digging-overlay{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;
}
.digging-pick{
  font-size:2.4rem;
  filter:drop-shadow(0 0 6px rgba(255,200,80,.6));
  transform-origin:75% 75%;
  animation:digging-swing .55s ease-in-out infinite;
}
@keyframes digging-swing{
  0%   {transform:rotate(-55deg) translate(-6px,-10px)}
  45%  {transform:rotate(15deg)  translate(2px,4px)}
  55%  {transform:rotate(15deg)  translate(2px,4px)}
  100% {transform:rotate(-55deg) translate(-6px,-10px)}
}
.digging-cracks{
  position:absolute;inset:0;
  background:
    radial-gradient(circle at 50% 60%,rgba(255,220,140,.0) 0%,rgba(255,220,140,.0) 50%,rgba(80,50,20,.0) 51%);
  opacity:0;
}
.digging-cracks.show{
  background:
    radial-gradient(circle at 50% 60%,rgba(255,220,140,.18) 0%,rgba(255,220,140,0) 38%),
    radial-gradient(circle at 48% 58%,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 22%);
  opacity:1;animation:cracks-pulse .6s ease-in-out infinite alternate;
}
@keyframes cracks-pulse{from{opacity:.7}to{opacity:1}}

.dig-particle{
  position:absolute;left:50%;top:60%;
  width:6px;height:6px;border-radius:50%;
  background:radial-gradient(circle,#ffe48a 0%,#c9a84c 60%,transparent 70%);
  pointer-events:none;
  animation:dig-particle-fly var(--dur,1.1s) ease-out forwards;
}
.dig-particle.dust{
  background:radial-gradient(circle,#8a7a60 0%,#3a2f20 70%,transparent 80%);
  filter:blur(.5px);
}
@keyframes dig-particle-fly{
  0%  {opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(calc(-50% + var(--tx,0px)),calc(-50% + var(--ty,-40px))) scale(.3)}
}

/* Shake leve de la tarjeta durante los golpes */
.gold-mine-card.dig-hit{
  animation:dig-card-hit .25s ease-out;
}
@keyframes dig-card-hit{
  0%  {transform:scale(1.025) translate(0,0)}
  25% {transform:scale(1.025) translate(-3px,2px)}
  50% {transform:scale(1.025) translate(2px,-2px)}
  75% {transform:scale(1.025) translate(-1px,1px)}
  100%{transform:scale(1.025) translate(0,0)}
}

/* —— Feedback ÉXITO —— */
.extraction-feedback{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  pointer-events:none;
}
.extraction-feedback.success{
  background:radial-gradient(circle at center,rgba(110,194,122,.18),transparent 70%);
  animation:feedback-flash-in .25s ease-out;
}
.extraction-feedback.fail{
  background:radial-gradient(circle at center,rgba(184,136,96,.16),transparent 70%);
  animation:feedback-flash-in .35s ease-out;
}
@keyframes feedback-flash-in{from{opacity:0}to{opacity:1}}

.feedback-message{
  font-family:'Cinzel',serif;font-size:.85rem;letter-spacing:.06em;
  text-shadow:0 0 6px rgba(0,0,0,.8);
  animation:feedback-msg-in .4s ease-out;
}
.extraction-feedback.success .feedback-message{color:var(--mine-success)}
.extraction-feedback.fail    .feedback-message{color:var(--mine-fail-soft)}
@keyframes feedback-msg-in{
  from{opacity:0;transform:translateY(8px)}
  to  {opacity:1;transform:translateY(0)}
}

.feedback-delta{
  font-family:'Cinzel',serif;font-weight:700;font-size:1.4rem;
  margin-top:.2rem;
  animation:feedback-delta-rise 1.1s ease-out forwards;
  text-shadow:0 0 10px rgba(0,0,0,.7);
}
.extraction-feedback.success .feedback-delta{color:var(--mine-success)}
.extraction-feedback.fail    .feedback-delta{color:var(--mine-fail-soft)}
@keyframes feedback-delta-rise{
  0%  {opacity:0;transform:translateY(10px)}
  20% {opacity:1;transform:translateY(0)}
  80% {opacity:1;transform:translateY(-12px)}
  100%{opacity:0;transform:translateY(-22px)}
}

/* Burst de partículas en éxito (más grande que las del dig) */
.dig-particle.success{
  background:radial-gradient(circle,#fff2b0 0%,#ffd24a 55%,transparent 70%);
  width:7px;height:7px;
  box-shadow:0 0 4px rgba(255,210,74,.7);
}

/* Mobile: stack más compacto */
@media (max-width:600px){
  .extraction-vein-amount{font-size:1.55rem}
  .next-row{font-size:.85rem}
  .extraction-actions .btn{font-size:.78rem}
}

/* Reduced motion: mata las animaciones complejas */
@media (prefers-reduced-motion:reduce){
  .digging-pick,.gold-mine-attempt-badge,.vein-shimmer,
  .extraction-continue.risky,.extraction-continue.danger,
  .gold-mine-card.dig-hit{animation:none}
}

/* ─── Speed-tie 50/50 overlay ─── */
.speed-tie-banner{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%) scale(.7);opacity:0;
  background:rgba(8,6,22,.93);border:2px solid #ff8c00;border-radius:14px;
  padding:.65rem 1.1rem .7rem;z-index:250;text-align:center;pointer-events:none;
  box-shadow:0 0 28px rgba(255,140,0,.5),0 6px 28px rgba(0,0,0,.7);
  animation:stb-in .2s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes stb-in{to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes stb-out{to{opacity:0;transform:translate(-50%,-50%) scale(.82)}}
.stb-label{font-size:.7rem;color:#ff8c00;letter-spacing:.14em;font-weight:700;margin-bottom:.4rem;font-family:'Cinzel',serif}
.stb-row{display:flex;align-items:center;justify-content:center;gap:.9rem}
.stb-fighter{display:flex;flex-direction:column;align-items:center;transition:opacity .3s}
.stb-fighter.stb-loser{opacity:.28}
.stb-icon{font-size:2rem;display:block;line-height:1}
.stb-name{font-size:.62rem;color:#aaa;margin-top:.15rem;max-width:5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stb-coin{font-size:1.7rem;display:block;animation:stb-spin .75s .18s cubic-bezier(.36,.07,.19,.97) both}
@keyframes stb-spin{
  0%  {transform:rotateY(0)}
  30% {transform:rotateY(270deg)}
  60% {transform:rotateY(540deg)}
  80% {transform:rotateY(660deg)}
  100%{transform:rotateY(720deg)}
}
.stb-winner-line{
  font-size:.78rem;font-weight:700;color:#ffd700;margin-top:.45rem;
  opacity:0;animation:stb-win-in .3s .82s ease forwards;
}
@keyframes stb-win-in{to{opacity:1}}
.stb-fighter.stb-winner .stb-icon{animation:stb-winner-pop .35s .85s ease forwards}
@keyframes stb-winner-pop{0%{transform:scale(1)}55%{transform:scale(1.55)}100%{transform:scale(1.2)}}
/* Línea del motivo del desempate (tempo alternante) */
.stb-reason{font-size:.62rem;color:#bba;letter-spacing:.06em;margin:-.05rem 0 .35rem;font-style:italic;opacity:.92}
.speed-tie-banner.stb-reason-initial{border-color:#ffd700;box-shadow:0 0 28px rgba(255,215,0,.45),0 6px 28px rgba(0,0,0,.7)}
.speed-tie-banner.stb-reason-initial .stb-label{color:#ffd700}
.speed-tie-banner.stb-reason-alternation{border-color:#6ab7ff;box-shadow:0 0 28px rgba(106,183,255,.45),0 6px 28px rgba(0,0,0,.7)}
.speed-tie-banner.stb-reason-alternation .stb-label{color:#6ab7ff}
/* Sin spin del dado: el centro ahora es 🎯 o 🔄 y no debe rotar */
.speed-tie-banner.stb-reason-initial .stb-coin,
.speed-tie-banner.stb-reason-alternation .stb-coin{animation:stb-icon-pulse .9s .15s ease-out both}
@keyframes stb-icon-pulse{0%{transform:scale(.4);opacity:0}45%{transform:scale(1.3);opacity:1}100%{transform:scale(1);opacity:1}}

/* ─── Tempo — indicador del próximo empate (junto al panel de habilidades) ─── */
.tempo-bar{
  display:flex;flex-wrap:wrap;gap:.35rem;justify-content:center;align-items:center;
  margin:.45rem 0 .35rem;padding:0 .25rem;
}
.tempo-bar.hidden{display:none}
.tempo-badge{
  display:inline-flex;align-items:center;gap:.2rem;
  font-family:'Cinzel',serif;font-size:.68rem;letter-spacing:.04em;font-weight:700;
  padding:.22rem .55rem;border-radius:10px;border:1px solid;
  cursor:help;user-select:none;white-space:nowrap;line-height:1.15;
  transition:background .2s,border-color .2s;
}
.tempo-badge.tempo-favor{
  color:#9bff9b;background:rgba(0,140,40,.28);border-color:#3fbf6a;
  text-shadow:0 0 6px rgba(80,255,120,.55);
}
.tempo-badge.tempo-against{
  color:#ffb09b;background:rgba(140,40,0,.28);border-color:#bf5a3f;
  text-shadow:0 0 6px rgba(255,120,80,.45);
}
.tempo-badge-2v2{font-size:.6rem;padding:.18rem .42rem;max-width:11rem;overflow:hidden;text-overflow:ellipsis}
@media (max-width:480px){
  .tempo-badge{font-size:.6rem;padding:.18rem .45rem}
  .tempo-badge-2v2{font-size:.55rem;padding:.15rem .35rem}
}

/* ─── Loadouts múltiples ─── Pestañas en la tarjeta Loadout */
.loadout-tabs{display:flex;gap:.25rem;margin-bottom:.55rem;flex-wrap:wrap;border-bottom:1px solid var(--border);padding-bottom:.4rem}
.loadout-tab{display:inline-flex;align-items:center;gap:.3rem;background:var(--bg);border:1px solid var(--border);color:var(--muted);padding:.3rem .55rem;border-radius:4px 4px 0 0;cursor:pointer;font-family:'Cinzel',serif;font-size:.75rem;transition:all .15s}
.loadout-tab:hover{border-color:var(--gold);color:var(--text)}
.loadout-tab.editing{background:var(--bg-card2);border-color:var(--gold);color:var(--gold-l);border-bottom-color:transparent;margin-bottom:-1px}
.loadout-tab.is-active{border-left:2px solid #f1c40f}
.loadout-tab-star{font-size:.8rem;filter:drop-shadow(0 0 4px rgba(241,196,15,.6))}
.loadout-tab-name{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.loadout-tab-count{font-size:.65rem;color:var(--muted);background:rgba(255,255,255,.05);padding:.08rem .3rem;border-radius:3px}
.loadout-tab-add{color:var(--green-l);border-style:dashed}
.loadout-tab-add:hover{border-color:var(--green);color:var(--green-l)}
.loadout-actions{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;margin-bottom:.5rem}
.loadout-actions .btn{flex-shrink:0}
.loadout-active-badge{font-size:.72rem;color:#f1c40f;background:rgba(241,196,15,.08);border:1px solid rgba(241,196,15,.35);padding:.2rem .5rem;border-radius:4px}

/* ─── Emoticonos ─── Popover sobre el botón y overlay al recibir */
.emote-btn{min-width:38px;padding:.35rem .5rem}
.emote-btn .emote-btn-label{font-size:.95rem;line-height:1}
.emote-btn.is-cooldown{opacity:.55;cursor:not-allowed;color:var(--muted)}
.emote-btn.is-cooldown .emote-btn-label{font-size:.72rem;font-family:'Cinzel',serif}
.emote-popover{position:absolute;z-index:9500;width:280px;background:#15101a;border:1px solid var(--gold);border-radius:10px;padding:.6rem;box-shadow:0 6px 26px rgba(0,0,0,.55),0 0 14px rgba(201,168,76,.25)}
.emote-popover-title{font-family:'Cinzel',serif;font-size:.78rem;color:var(--gold);margin-bottom:.4rem;text-align:center}
.emote-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:.25rem}
.emote-cell{background:#0d0816;border:1px solid #3a2a1a;border-radius:6px;padding:.35rem 0;font-size:1.15rem;cursor:pointer;transition:all .12s;line-height:1}
.emote-cell:hover{background:#2a1a3a;border-color:var(--gold);transform:scale(1.15)}
/* Overlay de recepción: apilado de burbujas abajo-centro */
#emote-incoming-host{position:fixed;left:0;right:0;bottom:12%;z-index:9800;display:flex;flex-direction:column-reverse;align-items:center;gap:.4rem;pointer-events:none}
.emote-incoming-bubble{display:flex;align-items:center;gap:.5rem;background:rgba(15,10,26,.92);border:1px solid var(--gold);border-radius:999px;padding:.45rem .9rem;box-shadow:0 0 18px rgba(201,168,76,.45)}
.emote-incoming-emoji{font-size:1.9rem;line-height:1;filter:drop-shadow(0 0 6px rgba(255,215,0,.5))}
.emote-incoming-from{font-family:'Cinzel',serif;color:var(--gold-l);font-size:.85rem}
/* Input de mensaje de texto en el popover de emoticonos */
.emote-msg-row{display:flex;gap:.3rem;margin-top:.5rem;padding-top:.45rem;border-top:1px solid #2a1f0e}
.emote-msg-input{flex:1;background:#0d0816;border:1px solid #3a2a1a;border-radius:6px;color:var(--text);font-size:.8rem;padding:.35rem .5rem;font-family:inherit;outline:none;min-width:0}
.emote-msg-input:focus{border-color:var(--gold)}
.emote-msg-send{background:var(--gold-d);border:1px solid var(--gold);border-radius:6px;color:#fff;font-size:1rem;padding:.3rem .55rem;cursor:pointer;transition:all .12s;flex-shrink:0}
.emote-msg-send:hover{background:var(--gold);color:#000}
/* Burbuja de texto de amigo recibida */
.friend-msg-bubble{display:flex;flex-direction:column;align-items:center;gap:.15rem;background:rgba(15,10,26,.94);border:1px solid #4a90d9;border-radius:14px;padding:.5rem .9rem;box-shadow:0 0 18px rgba(74,144,217,.4);max-width:min(80vw,300px)}
.friend-msg-from{font-family:'Cinzel',serif;color:#7ec8e3;font-size:.72rem;letter-spacing:.06em}
.friend-msg-text{color:#e8e8f0;font-size:.88rem;text-align:center;word-break:break-word;line-height:1.35}
/* Historial de chat en el popover de amigos */
.chat-history{max-height:160px;overflow-y:auto;display:flex;flex-direction:column;gap:.25rem;margin:.4rem 0;padding:.3rem 0;border-top:1px solid #2a1f0e;border-bottom:1px solid #2a1f0e;scrollbar-width:thin;scrollbar-color:#3a2a1a transparent}
.chat-msg{display:flex;flex-direction:column;max-width:90%;padding:.25rem .5rem;border-radius:8px;font-size:.8rem;line-height:1.3;word-break:break-word}
.chat-msg-mine{align-self:flex-end;background:#1a1030;border:1px solid var(--gold-d)}
.chat-msg-theirs{align-self:flex-start;background:#0d0816;border:1px solid #3a2a1a}
.chat-msg-from{font-family:'Cinzel',serif;font-size:.68rem;color:#7ec8e3;margin-bottom:.1rem}
.chat-msg-text{color:var(--text)}
/* Chat de partida */
.match-chat-wrap{margin-top:.5rem}
.match-chat-toggle{background:#15101a;border:1px solid var(--gold-d);border-radius:6px;color:var(--gold);font-size:.8rem;padding:.3rem .7rem;cursor:pointer;transition:all .15s;position:relative}
.match-chat-toggle:hover{border-color:var(--gold);background:#1f1530}
.match-chat-badge{position:absolute;top:-5px;right:-5px;background:#e74c3c;color:#fff;font-size:.65rem;border-radius:999px;min-width:16px;height:16px;line-height:16px;text-align:center;padding:0 3px}
.match-chat-panel{background:#0d0816;border:1px solid var(--gold-d);border-radius:8px;margin-top:.4rem;overflow:hidden}
.match-chat-list{max-height:140px;overflow-y:auto;padding:.4rem .5rem;display:flex;flex-direction:column;gap:.2rem;scrollbar-width:thin;scrollbar-color:#3a2a1a transparent}
.match-chat-msg{display:flex;flex-direction:column;max-width:88%;padding:.2rem .45rem;border-radius:7px;font-size:.8rem;line-height:1.3;word-break:break-word}
.match-chat-mine{align-self:flex-end;background:#1a1030;border:1px solid var(--gold-d)}
.match-chat-theirs{align-self:flex-start;background:#150d20;border:1px solid #3a2a1a}
.match-chat-from{font-family:'Cinzel',serif;font-size:.67rem;color:#7ec8e3;margin-bottom:.1rem}
.match-chat-text{color:var(--text)}
.match-chat-input-row{display:flex;gap:.3rem;padding:.35rem .4rem;border-top:1px solid #2a1f0e}
.match-chat-input{flex:1;background:#0d0816;border:1px solid #3a2a1a;border-radius:5px;color:var(--text);font-size:.8rem;padding:.3rem .45rem;font-family:inherit;outline:none;min-width:0}
.match-chat-input:focus{border-color:var(--gold)}
.match-chat-send{background:var(--gold-d);border:1px solid var(--gold);border-radius:5px;color:#fff;font-size:.9rem;padding:.28rem .5rem;cursor:pointer;flex-shrink:0;transition:all .12s}
.match-chat-send:hover{background:var(--gold);color:#000}
/* Panel de chat con amigos (fijo inferior-derecha) */
.friend-chat-panel{position:fixed;bottom:12px;right:12px;width:300px;display:flex;flex-direction:column;background:#0d0816;border:1px solid var(--gold-d);border-radius:10px;z-index:9000;box-shadow:0 4px 32px rgba(0,0,0,.6)}
.friend-chat-panel.hidden{display:none}
.friend-chat-header{display:flex;align-items:center;justify-content:space-between;padding:.4rem .6rem;border-bottom:1px solid #2a1f0e;background:#15101a;border-radius:10px 10px 0 0}
.friend-chat-title{font-family:'Cinzel',serif;font-size:.82rem;color:var(--gold)}
.friend-chat-close{background:none;border:none;color:var(--muted);cursor:pointer;font-size:1rem;padding:0 .3rem;line-height:1}
.friend-chat-close:hover{color:#fff}
.friend-chat-list{max-height:280px;overflow-y:auto;padding:.45rem .5rem;display:flex;flex-direction:column;gap:.25rem;scrollbar-width:thin;scrollbar-color:#3a2a1a transparent}
.friend-chat-msg{display:flex;flex-direction:column;max-width:88%;padding:.22rem .45rem;border-radius:7px;font-size:.8rem;line-height:1.3;word-break:break-word}
.friend-chat-mine{align-self:flex-end;background:#1a1030;border:1px solid var(--gold-d)}
.friend-chat-theirs{align-self:flex-start;background:#150d20;border:1px solid #3a2a1a}
.friend-chat-from{font-family:'Cinzel',serif;font-size:.67rem;color:#7ec8e3;margin-bottom:.1rem}
.friend-chat-text{color:var(--text)}
.friend-chat-input-row{display:flex;gap:.3rem;padding:.35rem .4rem;border-top:1px solid #2a1f0e}
.friend-chat-input{flex:1;background:#0d0816;border:1px solid #3a2a1a;border-radius:5px;color:var(--text);font-size:.8rem;padding:.3rem .45rem;font-family:inherit;outline:none;min-width:0}
.friend-chat-input:focus{border-color:var(--gold)}
.friend-chat-send{background:var(--gold-d);border:1px solid var(--gold);border-radius:5px;color:#fff;font-size:.9rem;padding:.28rem .5rem;cursor:pointer;flex-shrink:0;transition:all .12s}
.friend-chat-send:hover{background:var(--gold);color:#000}
/* Badge en botón 💬 de cada amigo */
.friend-chat-btn{position:relative}
.friend-chat-unread{position:absolute;top:-5px;right:-5px;background:#e74c3c;color:#fff;font-size:.6rem;border-radius:999px;min-width:14px;height:14px;line-height:14px;text-align:center;padding:0 2px}
.friend-chat-unread.hidden{display:none}
/* Badge en pestaña Amigos del nav */
.friends-nav-badge{display:inline-flex;align-items:center;justify-content:center;background:#e74c3c;color:#fff;font-size:.6rem;border-radius:999px;min-width:14px;height:14px;line-height:14px;padding:0 3px;margin-left:3px;vertical-align:middle}
.friends-nav-badge.hidden{display:none}
.nav-lang{display:flex;align-items:center;margin-left:.5rem}
.login-lang{position:absolute;top:.8rem;left:.8rem;z-index:5}
.lang-select{font-family:inherit;font-size:.85rem;padding:.4rem .6rem;background:var(--bg-card);color:var(--muted);border:1px solid var(--border);border-radius:4px;cursor:pointer;transition:all .2s;line-height:1.2;letter-spacing:.02em}
.lang-select:hover{border-color:var(--gold);color:var(--gold)}
.lang-select:focus{outline:none;border-color:var(--gold);color:var(--gold);box-shadow:0 0 6px var(--gold-d)}
.lang-select option{background:var(--bg-card);color:var(--text)}

/* Views */
.view{position:relative;z-index:1;padding:1.2rem;max-width:1100px;margin:0 auto}

/* Utils */
.hidden{display:none!important}
.mt05{margin-top:.5rem}.mt1{margin-top:1rem}.w100{width:100%}
.muted{color:var(--muted)}

/* Titles */
.section-title{font-family:'Cinzel',serif;font-size:1.3rem;color:var(--gold);border-bottom:1px solid var(--border-g);padding-bottom:.4rem;margin-bottom:1.2rem}
.card-title{font-family:'Cinzel',serif;font-size:.95rem;color:var(--gold);margin-bottom:.8rem}

/* Cards */
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:8px;padding:1.1rem;margin-bottom:.8rem}
.card-gold{border-color:var(--border-g)}

/* Buttons */
.btn{font-family:'Cinzel',serif;font-size:.82rem;padding:.55rem 1.2rem;border-radius:4px;cursor:pointer;border:none;transition:all .15s;letter-spacing:.04em;display:inline-block}
.btn-gold{background:var(--gold-d);color:var(--gold-l);border:1px solid var(--gold)}.btn-gold:hover{background:var(--gold);color:#1a1200}
.btn-red{background:#4a1010;color:#ff8080;border:1px solid var(--red)}.btn-red:hover{background:var(--red);color:#fff}
.btn-amber{background:#3a2200;color:var(--amber-l);border:1px solid var(--amber)}.btn-amber:hover{background:var(--amber);color:#1a0e00}
.btn-green{background:#0a3020;color:#80ffb0;border:1px solid var(--green)}.btn-green:hover{background:var(--green);color:#fff}
.btn-ghost{background:var(--bg);border:1px solid var(--border);color:var(--muted);font-family:'Cinzel',serif;font-size:.82rem;padding:.55rem 1.2rem;border-radius:4px;cursor:pointer;transition:all .15s}.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn-sm{font-size:.72rem;padding:.3rem .8rem}
.btn:disabled,.btn-ghost:disabled{opacity:.4;cursor:not-allowed}
.btn-row{display:flex;gap:.5rem;flex-wrap:wrap}

/* Inputs */
input[type=text],input[type=password],select{background:var(--bg);border:1px solid var(--border);color:var(--text);padding:.45rem .7rem;border-radius:4px;font-family:'Crimson Pro',serif;font-size:.95rem;width:100%;transition:border-color .2s}
input:focus,select:focus{outline:none;border-color:var(--gold)}
.field-group{margin-bottom:.6rem}
.field-group label{display:block;font-size:.82rem;color:var(--muted);margin-bottom:3px}

/* Badges */
.badge{display:inline-block;font-size:.68rem;padding:2px 7px;border-radius:3px;font-family:'Cinzel',serif;letter-spacing:.04em}
.badge-gold{background:var(--gold-d);color:var(--gold-l);border:1px solid var(--gold)}
.badge-red{background:#300;color:#ff8080;border:1px solid #700}
.badge-green{background:#030;color:#80ff80;border:1px solid #060}
.badge-blue{background:#003060;color:#80c0ff;border:1px solid #006}

/* Login */
.login-wrap{display:flex;align-items:center;justify-content:center;min-height:55vh;flex-direction:column;gap:1rem}
.login-icon{font-size:3.5rem}.login-subtitle{font-family:'Cinzel',serif;font-size:1rem;color:var(--gold)}
.login-box{background:var(--bg-card);border:1px solid var(--border-g);border-radius:12px;padding:1.8rem;width:100%;max-width:360px}
.login-hint{font-size:.76rem;color:var(--dim);margin-top:.8rem;text-align:center}

/* Class grid */
.class-grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin:.4rem 0 .8rem}
.class-grid.small .class-btn{padding:.45rem}
.class-btn{padding:.6rem;border-radius:6px;cursor:pointer;border:1px solid var(--border);background:var(--bg);color:var(--muted);text-align:center;transition:all .2s;font-family:'Crimson Pro',serif;font-size:.9rem}
.class-btn:hover,.class-btn.selected{border-color:var(--gold);color:var(--gold);background:var(--bg-card2)}
.class-icon{font-size:1.6rem;display:block;margin-bottom:3px}

/* Two col */
.two-col{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:1rem}

/* Hero */
.hero-header{display:flex;align-items:center;gap:1rem;margin-bottom:1rem}
.char-avatar{width:90px;height:90px;border-radius:50%;border:2.5px solid var(--gold);display:flex;align-items:center;justify-content:center;font-size:2.8rem;flex-shrink:0;position:relative;z-index:3;transition:box-shadow .4s,border-color .4s;background:radial-gradient(circle at 38% 32%,rgba(255,255,255,.04),transparent)}
.avatar-mage{background:radial-gradient(circle,#2a1a5e,#0a0520);border-color:#7b68ee}
.avatar-warrior{background:radial-gradient(circle,#4a2e10,#1a0e00);border-color:#cd853f}
.avatar-rogue{background:radial-gradient(circle,#0e3020,#040e08);border-color:#3cb371}
.avatar-paladin{background:radial-gradient(circle,#4a3a00,#1a1400);border-color:#ffd700}
.hero-name{font-family:'Cinzel',serif;font-size:1.25rem;color:var(--gold);text-shadow:0 0 20px rgba(201,168,76,.3);letter-spacing:.04em}
.hero-class{font-size:.82rem;color:var(--muted);margin-bottom:.35rem}
.hero-footer{display:flex;justify-content:space-between;flex-wrap:wrap;font-size:.78rem;color:var(--muted);margin-top:.9rem;padding-top:.9rem;border-top:1px solid var(--border);gap:.5rem}
.hero-footer span{background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:.2rem .55rem;display:flex;align-items:center;gap:.3rem}
.hero-footer strong{color:var(--gold);font-size:.92rem}

/* ═══════════════════════════════════════════════════════
   HERO CARD PREMIUM EFFECTS — orbital, aura, particles
   ═══════════════════════════════════════════════════════ */

/* Card needs relative so ::before and particles work */
#hero-card{position:relative;transition:background .5s,border-color .5s}
#hero-card::before{
  content:'';position:absolute;inset:-1px;border-radius:9px;pointer-events:none;
  background:radial-gradient(ellipse at 32% 12%,rgba(var(--aura-rgb,150,80,220),.11) 0%,transparent 62%);
  animation:hero-aura-shift 4s ease-in-out infinite;z-index:0
}
/* Rarity-specific aura — progressively stronger */
#hero-card.hero-dom-rare::before     {background:radial-gradient(ellipse at 32% 12%,rgba(52,152,219,.22) 0%,transparent 65%)}
#hero-card.hero-dom-epic::before     {background:radial-gradient(ellipse at 32% 12%,rgba(155,89,182,.32) 0%,transparent 65%)}
#hero-card.hero-dom-legendary::before{background:radial-gradient(ellipse at 30% 10%,rgba(241,196,15,.42) 0%,transparent 62%),radial-gradient(ellipse at 72% 82%,rgba(241,196,15,.14) 0%,transparent 50%)}
#hero-card.hero-dom-mythic::before   {background:radial-gradient(ellipse at 30% 10%,rgba(255,68,255,.52) 0%,transparent 60%),radial-gradient(ellipse at 80% 85%,rgba(180,0,255,.35) 0%,transparent 52%)}
#hero-card.hero-dom-divine::before   {background:radial-gradient(ellipse at 30% 10%,rgba(255,245,214,.6) 0%,transparent 60%),radial-gradient(ellipse at 80% 85%,rgba(255,215,100,.45) 0%,transparent 52%)}
/* Card background tint by dominant rarity */
#hero-card.hero-dom-rare     {background:linear-gradient(165deg,#1a1726 0%,#0a1525 100%)}
#hero-card.hero-dom-epic     {background:linear-gradient(165deg,#1a1726 0%,#12092a 100%)}
#hero-card.hero-dom-legendary{background:linear-gradient(165deg,#1a1726 0%,#211500 100%);border-color:#7a5a00!important}
#hero-card.hero-dom-mythic   {background:linear-gradient(165deg,#1a1726 0%,#210020 100%);border-color:#880088!important}
#hero-card.hero-dom-divine   {background:linear-gradient(165deg,#1a1726 0%,#2a2400 100%);border-color:#e6c050!important}
/* CELESTIAL hero card — solo cuando el jugador equipa 2D + 2M. Glow extra
   sobre la base de divine, con halo mítico en una segunda capa. */
#hero-card.tier-celestial    {background:linear-gradient(165deg,#1a1726 0%,#2a2400 60%,#1a0030 100%);border-color:#fff5d6!important;box-shadow:0 0 50px rgba(255,245,214,.45),0 0 90px rgba(255,68,255,.22)}
/* Keep text above ::before */
.hero-header,.hero-footer{position:relative;z-index:1}

@keyframes hero-aura-shift{0%,100%{opacity:.6}50%{opacity:1}}

/* Dominant rarity — GPU glow via ::after opacity (box-shadow static → no repaint per frame) */
.hero-dom-rare     {--aura-rgb:52,152,219}
.hero-dom-epic     {--aura-rgb:155,89,182}
.hero-dom-legendary{--aura-rgb:241,196,15}
.hero-dom-mythic   {--aura-rgb:255,68,255}
.hero-dom-divine   {--aura-rgb:255,245,214}

/* ::after holds the static glow box-shadow; only opacity animates (compositable — no repaint) */
#hero-card::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;opacity:0}
#hero-card.hero-dom-rare::after     {box-shadow:0 0 32px 8px rgba(52,152,219,.45);animation:hero-glow-opacity 3.5s ease-in-out infinite}
#hero-card.hero-dom-epic::after     {box-shadow:0 0 50px 14px rgba(155,89,182,.65),0 0 80px rgba(155,89,182,.15);animation:hero-glow-opacity 3s ease-in-out infinite}
#hero-card.hero-dom-legendary::after{box-shadow:0 0 65px 20px rgba(241,196,15,.75),0 0 120px rgba(241,196,15,.25);animation:hero-glow-opacity 2.5s ease-in-out infinite}
#hero-card.hero-dom-mythic::after   {box-shadow:0 0 70px 22px rgba(255,68,255,.9),0 0 130px 4px rgba(180,0,255,.4);animation:hero-glow-opacity 2s ease-in-out infinite}
#hero-card.hero-dom-divine::after   {box-shadow:0 0 78px 22px rgba(255,245,214,.95),0 0 140px 4px rgba(255,215,100,.5);animation:hero-glow-opacity 2.2s ease-in-out infinite}
@keyframes hero-glow-opacity{0%,100%{opacity:.25}50%{opacity:1}}
/* pp-modal: overflow-y:auto clips ::after box-shadow — use static glow directly on element */
.pp-modal.hero-dom-rare     {box-shadow:0 0 32px 8px rgba(52,152,219,.45),0 8px 40px rgba(0,0,0,.6)}
.pp-modal.hero-dom-epic     {box-shadow:0 0 50px 14px rgba(155,89,182,.65),0 8px 40px rgba(0,0,0,.6)}
.pp-modal.hero-dom-legendary{box-shadow:0 0 65px 20px rgba(241,196,15,.75),0 8px 40px rgba(0,0,0,.6)}
.pp-modal.hero-dom-mythic   {box-shadow:0 0 70px 22px rgba(255,68,255,.9),0 8px 40px rgba(0,0,0,.6)}
.pp-modal.hero-dom-divine   {box-shadow:0 0 78px 22px rgba(255,245,214,.95),0 8px 40px rgba(0,0,0,.6)}

/* ── Avatar orbital wrapper — sized to contain r=82px orbit ── */
#avatar-orbital-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:200px;height:200px}
#hero-orbital{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:0;height:0;pointer-events:none;z-index:2;perspective:600px;transform-style:preserve-3d}

/* Avatar rarity glow — applied when hero-dom-X is on #hero-card */
.hero-dom-rare      .char-avatar{border-color:#3498db;box-shadow:0 0 16px 5px rgba(52,152,219,.55)}
.hero-dom-epic      .char-avatar{border-color:#9b59b6;box-shadow:0 0 20px 6px rgba(155,89,182,.6)}
.hero-dom-legendary .char-avatar{border-color:#f1c40f;box-shadow:0 0 26px 7px rgba(241,196,15,.65),0 0 52px rgba(241,196,15,.2)}
.hero-dom-mythic .char-avatar{border-color:#ff44ff;box-shadow:0 0 36px 11px rgba(255,68,255,.78),0 0 72px rgba(255,0,255,.28)}
.hero-dom-divine .char-avatar{border-color:#fff5d6;box-shadow:0 0 39px 11px rgba(255,245,214,.83),0 0 80px rgba(255,215,100,.35)}

/* Orbital ring: a 3D-tilted plane container (atom style) — transform set inline */
.orbit-ring{position:absolute;width:0;height:0;transform-style:preserve-3d}

/* Faint ellipse track showing the orbital path */
.orbit-track{position:absolute;border-radius:50%;border:1px solid rgba(255,255,255,.09);width:calc(var(--orbit-r)*2);height:calc(var(--orbit-r)*2);top:calc(-1*var(--orbit-r));left:calc(-1*var(--orbit-r));pointer-events:none}

/* Arm rotates inside ring plane — --orbit-r set inline per arm */
.orbit-arm{
  position:absolute;
  width:calc(var(--orbit-r)*2);height:calc(var(--orbit-r)*2);
  top:calc(-1*var(--orbit-r));left:calc(-1*var(--orbit-r));
  transform-style:preserve-3d;
  animation:orbit-spin linear infinite
}
.orbit-ball{
  position:absolute;
  width:var(--ball-sz);height:var(--ball-sz);
  border-radius:50%;
  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.8),var(--ball-c));
  box-shadow:0 0 8px 3px var(--ball-g),0 0 24px 8px var(--ball-g),inset 0 0 0 1px rgba(255,255,255,.15);
  left:calc(var(--orbit-r) - var(--ball-sz)/2);
  top:calc(-1*var(--ball-sz)/2)
}
/* Comet trail */
.orbit-ball::after{
  content:'';position:absolute;
  width:var(--ball-sz);height:calc(var(--ball-sz)*3.5);
  border-radius:50%;
  background:linear-gradient(to bottom,var(--ball-g) 0%,transparent 100%);
  top:calc(var(--ball-sz)*.35);left:0;
  opacity:.55
}
@keyframes orbit-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* ── Floating particles (inside card) ── */
.hero-particles-wrap{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:8px;z-index:0}
.hero-particle{
  position:absolute;width:2.5px;height:2.5px;border-radius:50%;
  background:var(--p-color);bottom:8%;opacity:0;
  animation:hero-pfloat var(--p-dur) ease-in var(--p-del) infinite
}
@keyframes hero-pfloat{
  0%  {transform:translateY(0) translateX(0) scale(1);opacity:0}
  12% {opacity:.9}
  80% {opacity:.2}
  100%{transform:translateY(-72px) translateX(var(--p-drift)) scale(.2);opacity:0}
}

/* ── Equipped skill card pulse (legendary / mythic / divine) ── */
.loadout-equipped-card.sk-tier-legendary{box-shadow:0 0 10px 2px rgba(241,196,15,.3),0 0 20px rgba(241,196,15,.08)}
.loadout-equipped-card.sk-tier-mythic   {box-shadow:0 0 16px 4px rgba(255,68,255,.5),0 0 34px rgba(255,68,255,.17)}
.loadout-equipped-card.sk-tier-divine   {box-shadow:0 0 18px 5px rgba(255,245,214,.55),0 0 38px rgba(255,215,100,.22)}

/* ── Mobile: scale down orbit, dim particles ── */
@media(max-width:480px){
  .hero-header{flex-direction:column;align-items:center;text-align:center}
  #avatar-orbital-wrap{width:150px;height:150px}
  #hero-orbital{transform:translate(-50%,-50%) scale(.7)}
  .hero-particles-wrap{opacity:.5}
  .orbit-ball{box-shadow:0 0 5px 2px var(--ball-g)}
  .hero-particles-wrap .hero-particle:nth-child(n+4){display:none}
}

/* ═══════════════════════════════════════════════════════
   POWER TIER SYSTEM — badge, composition gems, halo, foil, frames
   ═══════════════════════════════════════════════════════ */

/* Hero info column — clean layout */
.hero-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:.28rem}
.hero-name-row{display:flex;align-items:center;flex-wrap:wrap;gap:.35rem}
.hero-title-line{font-size:.74rem;color:#a78ed8;font-style:italic;opacity:.88;margin-top:-.1rem;line-height:1.2}
.hero-league-grid{display:grid;grid-template-columns:1fr 1fr;gap:.4rem;margin-top:.15rem}
.hero-league-cell{font-size:.72rem!important;padding:.28rem .55rem!important;border-radius:5px;text-align:center;font-family:'Cinzel',serif;line-height:1.3;display:flex;align-items:center;justify-content:center;min-height:32px}
.hero-meta-chips{display:flex;gap:.35rem;flex-wrap:wrap;margin-top:.1rem}
.hero-meta-chips .badge{font-size:.7rem}

/* Power Tier badge */
.hero-tier-badge{display:inline-flex;align-items:center;gap:.32rem;padding:.18rem .6rem;border-radius:4px;font-family:'Cinzel',serif;font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;border:1px solid;width:fit-content;line-height:1.2;position:relative;z-index:2}
.hero-tier-badge .hero-tier-icon{font-size:.85em;line-height:1}
.hero-tier-badge .hero-tier-name{white-space:nowrap}

.tier-iniciado{color:#888;border-color:#555;background:rgba(255,255,255,.03)}
.tier-aprendiz{color:#5dade2;border-color:#3498db;background:rgba(52,152,219,.13)}
.tier-versado{color:#b67ed8;border-color:#9b59b6;background:rgba(155,89,182,.13)}
.tier-elite{color:#cc88ee;border-color:#9b59b6;background:rgba(155,89,182,.2);box-shadow:0 0 12px rgba(155,89,182,.3)}
.tier-campeon{color:#f1c40f;border-color:#c9a84c;background:rgba(241,196,15,.13);box-shadow:0 0 14px rgba(241,196,15,.32)}
.tier-heroe{color:#f1c40f;border-color:#f1c40f;background:rgba(241,196,15,.2);box-shadow:0 0 25px rgba(241,196,15,.63)}
.tier-leyenda{color:#fff5cc;border-color:#ffd700;background:linear-gradient(90deg,rgba(241,196,15,.28),rgba(255,215,0,.42),rgba(241,196,15,.28));box-shadow:0 0 28px rgba(255,215,0,.73)}
.tier-ascendido{color:#ff88ff;border-color:#ff44ff;background:rgba(255,68,255,.16);box-shadow:0 0 16px rgba(255,68,255,.45)}
.tier-divino{color:#ffaaff;border-color:#ff44ff;background:rgba(255,68,255,.24);box-shadow:0 0 33px rgba(255,68,255,.8)}
.tier-omnipotente{color:#fff;border-color:#fff;background:linear-gradient(90deg,#3498db,#9b59b6,#f1c40f,#ff44ff,#3498db);box-shadow:0 0 36px rgba(255,68,255,.85),0 0 55px rgba(241,196,15,.5);text-shadow:0 0 8px rgba(0,0,0,.6)}
/* CELESTIAL — tier máximo absoluto (2 divinas + 2 míticas). */
.tier-celestial{color:#fff;border-color:#fffacc;background:linear-gradient(90deg,#fffacc,#ffd700,#fff5d6,#ff44ff,#fffacc);box-shadow:0 0 44px rgba(255,245,214,.93),0 0 70px rgba(255,215,100,.58),0 0 95px rgba(255,68,255,.4);text-shadow:0 0 10px rgba(0,0,0,.6)}

/* Composition gems — small dots showing equipped rarities */
.hero-comp-gems{display:inline-flex;gap:.22rem;align-items:center}
.comp-gem{display:inline-block;width:9px;height:9px;border-radius:50%}
.comp-gem-common{background:#888;box-shadow:0 0 4px rgba(136,136,136,.4)}
.comp-gem-rare{background:#3498db;box-shadow:0 0 5px rgba(52,152,219,.7)}
.comp-gem-epic{background:#9b59b6;box-shadow:0 0 6px rgba(155,89,182,.85)}
.comp-gem-legendary{background:#f1c40f;box-shadow:0 0 10px rgba(241,196,15,.97),0 0 16px rgba(241,196,15,.38)}
.comp-gem-mythic{background:#ff44ff;box-shadow:0 0 12px rgba(255,68,255,1),0 0 20px rgba(255,68,255,.4)}
.comp-gem-divine{background:linear-gradient(135deg,#fffacc,#ffd700);box-shadow:0 0 14px rgba(255,245,214,1),0 0 26px rgba(255,215,100,.45)}

/* Halo ring around avatar — extra ring for high tiers */
#hero-halo,.pp-halo{position:absolute;width:140px;height:140px;border-radius:50%;border:1px solid transparent;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;display:none;z-index:1}
#hero-card.tier-heroe   #hero-halo,
#hero-card.tier-leyenda #hero-halo,
.pp-modal.tier-heroe   .pp-halo,
.pp-modal.tier-leyenda .pp-halo {display:block;border-color:rgba(241,196,15,.45);box-shadow:inset 0 0 26px 8px rgba(241,196,15,.18),0 0 26px 6px rgba(241,196,15,.18);animation:halo-pulse 3s ease-in-out infinite}
#hero-card.tier-divino       #hero-halo,
#hero-card.tier-omnipotente  #hero-halo,
.pp-modal.tier-divino       .pp-halo,
.pp-modal.tier-omnipotente  .pp-halo {display:block;border-color:rgba(255,68,255,.5);box-shadow:inset 0 0 32px 10px rgba(255,68,255,.22),0 0 34px 7px rgba(255,68,255,.22);animation:halo-pulse 2.2s ease-in-out infinite}
#hero-card.tier-celestial    #hero-halo,
.pp-modal.tier-celestial    .pp-halo {display:block;border-color:rgba(255,245,214,.7);box-shadow:inset 0 0 38px 12px rgba(255,245,214,.28),0 0 42px 9px rgba(255,215,100,.3),0 0 60px 4px rgba(255,68,255,.18);animation:halo-pulse 2s ease-in-out infinite}
@keyframes halo-pulse{0%,100%{opacity:.55;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}}

/* Corner ornaments — soft fade from corner inward (no harsh L-bracket look) */
.hero-frame{position:absolute;inset:0;pointer-events:none;z-index:2}
.hero-frame-corner{position:absolute;width:22px;height:22px;display:none;border-style:solid;border-color:transparent;opacity:.9}
#hero-card.tier-heroe       .hero-frame-corner,
#hero-card.tier-leyenda     .hero-frame-corner,
#hero-card.tier-ascendido   .hero-frame-corner,
#hero-card.tier-divino      .hero-frame-corner,
#hero-card.tier-omnipotente .hero-frame-corner,
#hero-card.tier-celestial   .hero-frame-corner,
.pp-modal.tier-heroe       .hero-frame-corner,
.pp-modal.tier-leyenda     .hero-frame-corner,
.pp-modal.tier-ascendido   .hero-frame-corner,
.pp-modal.tier-divino      .hero-frame-corner,
.pp-modal.tier-omnipotente .hero-frame-corner,
.pp-modal.tier-celestial   .hero-frame-corner {display:block}

/* Each corner: borders fade from corner outward via radial mask — looks like an etching, not a bracket */
.hero-frame-tl{top:0;left:0;border-top-width:1.5px;border-left-width:1.5px;border-top-left-radius:9px;
  -webkit-mask:radial-gradient(circle at 0% 0%,#000 35%,transparent 95%);
          mask:radial-gradient(circle at 0% 0%,#000 35%,transparent 95%)}
.hero-frame-tr{top:0;right:0;border-top-width:1.5px;border-right-width:1.5px;border-top-right-radius:9px;
  -webkit-mask:radial-gradient(circle at 100% 0%,#000 35%,transparent 95%);
          mask:radial-gradient(circle at 100% 0%,#000 35%,transparent 95%)}
.hero-frame-bl{bottom:0;left:0;border-bottom-width:1.5px;border-left-width:1.5px;border-bottom-left-radius:9px;
  -webkit-mask:radial-gradient(circle at 0% 100%,#000 35%,transparent 95%);
          mask:radial-gradient(circle at 0% 100%,#000 35%,transparent 95%)}
.hero-frame-br{bottom:0;right:0;border-bottom-width:1.5px;border-right-width:1.5px;border-bottom-right-radius:9px;
  -webkit-mask:radial-gradient(circle at 100% 100%,#000 35%,transparent 95%);
          mask:radial-gradient(circle at 100% 100%,#000 35%,transparent 95%)}

/* Tier color only — no per-corner glow, the card already glows via hero-dom-X */
#hero-card.tier-heroe       .hero-frame-corner,
.pp-modal.tier-heroe       .hero-frame-corner {border-color:#f1c40f}
#hero-card.tier-leyenda     .hero-frame-corner,
.pp-modal.tier-leyenda     .hero-frame-corner {border-color:#ffd700}
#hero-card.tier-ascendido   .hero-frame-corner,
.pp-modal.tier-ascendido   .hero-frame-corner {border-color:#ff66ff}
#hero-card.tier-divino      .hero-frame-corner,
.pp-modal.tier-divino      .hero-frame-corner {border-color:#ff44ff}
#hero-card.tier-omnipotente .hero-frame-corner,
.pp-modal.tier-omnipotente .hero-frame-corner {border-color:#fff;animation:frame-rainbow 3s linear infinite}
#hero-card.tier-celestial .hero-frame-corner,
.pp-modal.tier-celestial .hero-frame-corner {border-color:#fff5d6;box-shadow:0 0 14px rgba(255,245,214,.7);animation:frame-celestial 3.2s ease-in-out infinite}
@keyframes frame-rainbow{0%{filter:hue-rotate(0)}100%{filter:hue-rotate(360deg)}}
@keyframes frame-celestial{0%,100%{border-color:#fffacc;box-shadow:0 0 12px rgba(255,245,214,.55)}50%{border-color:#ffd700;box-shadow:0 0 22px rgba(255,245,214,.95),0 0 36px rgba(255,68,255,.3)}}

/* Holographic foil shimmer — only on legendary+/mythic+ */
.hero-foil{position:absolute;inset:0;border-radius:8px;pointer-events:none;z-index:1;overflow:hidden;display:none}
.hero-foil-sweep{position:absolute;top:-50%;left:-100%;width:200%;height:200%;background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.13) 50%,transparent 58%);animation:hero-foil-sweep 4s ease-in-out infinite}
#hero-card.tier-leyenda     .hero-foil,
#hero-card.tier-divino      .hero-foil,
#hero-card.tier-omnipotente .hero-foil,
.pp-modal.tier-leyenda     .hero-foil,
.pp-modal.tier-divino      .hero-foil,
.pp-modal.tier-omnipotente .hero-foil {display:block}
@keyframes hero-foil-sweep{
  0%  {transform:translateX(-30%)}
  60% {transform:translateX(60%)}
  100%{transform:translateX(60%)}
}

/* Mobile: stack league grid into single column */
@media(max-width:480px){
  .hero-league-grid{grid-template-columns:1fr}
  #hero-halo,.pp-halo{width:120px;height:120px}
  .hero-frame-corner{width:20px;height:20px}
  /* PP cards: kill animated box-shadow (paint cost x6 cards), static glow */
  .rarity-glow-epic     {animation:none;box-shadow:0 0 12px rgba(155,89,182,.4),0 2px 8px rgba(0,0,0,.4)}
  .rarity-glow-legendary{animation:none;box-shadow:0 0 16px rgba(241,196,15,.45),0 2px 8px rgba(0,0,0,.4)}
  .rarity-glow-mythic   {animation:none;box-shadow:0 0 20px rgba(255,68,255,.55),0 0 36px rgba(255,68,255,.12)}
  .rarity-glow-divine   {animation:none;box-shadow:0 0 22px rgba(255,245,214,.6),0 0 40px rgba(255,215,100,.15)}
  /* Kill shimmer pseudo-element on mobile (extra layer per card) */
  .rarity-glow-mythic::before,.rarity-glow-divine::before{display:none}
  /* Flatten pp-orbital — perspective + preserve-3d expensive on mobile */
  .pp-orbital{perspective:none;transform-style:flat}
  /* Halo: simpler static glow (kill animation paint) */
  .pp-modal.tier-heroe .pp-halo,
  .pp-modal.tier-leyenda .pp-halo,
  .pp-modal.tier-divino .pp-halo,
  .pp-modal.tier-omnipotente .pp-halo,
  .pp-modal.tier-celestial .pp-halo{animation:none;opacity:.85}
}

/* ── Reduced motion ── */
@media(prefers-reduced-motion:reduce){
  #hero-card,#hero-card::before,
  .orbit-arm,.hero-particle,
  .hero-dom-mythic .char-avatar,
  .hero-tier-badge,.comp-gem-legendary,.comp-gem-mythic,
  #hero-halo,.pp-halo,.hero-foil-sweep,
  #hero-card.tier-omnipotente .hero-frame-corner,
  .pp-modal.tier-omnipotente .hero-frame-corner,
  .loadout-equipped-card.sk-tier-legendary,
  .loadout-equipped-card.sk-tier-mythic{animation:none!important}
  #hero-orbital,.hero-particles-wrap,.hero-foil{display:none}
}

.stat-row{display:flex;align-items:center;gap:.7rem;margin-bottom:.5rem}
.stat-label{width:80px;font-size:.82rem;color:var(--muted);flex-shrink:0}
.stat-bar-bg{flex:1;height:7px;background:var(--bg);border-radius:4px;overflow:hidden}
.stat-bar{height:100%;border-radius:4px;transition:width .4s}
.stat-val{width:26px;text-align:right;font-size:.82rem;color:var(--gold);font-weight:600}
.bar-atk{background:linear-gradient(90deg,var(--red),var(--red-l))}
.bar-def{background:linear-gradient(90deg,var(--blue),var(--blue-l))}
.bar-spd{background:linear-gradient(90deg,var(--green),var(--green-l))}
.bar-hp{background:linear-gradient(90deg,#c0392b,#e74c3c 60%,#f0d080)}
.pts-pool{display:flex;align-items:center;gap:.5rem;padding:.45rem .7rem;background:var(--bg);border-radius:4px;border:1px solid var(--border-g);margin-bottom:.8rem}
.pts-pool-num{font-size:1.2rem;color:var(--gold);font-family:'Cinzel',serif}
.pts-pool-label{color:var(--muted);font-size:.82rem}
.upg-row{display:flex;align-items:center;gap:.6rem;margin-bottom:.6rem}
.upg-row label{flex:1;font-size:.85rem}
.upg-num{width:34px;text-align:center;background:var(--bg);border:1px solid var(--border);color:var(--gold);padding:.25rem;border-radius:4px;font-size:.85rem}
.upg-stepper{display:flex;gap:3px}
.upg-stepper button{width:24px;height:24px;border-radius:4px;border:1px solid var(--border);background:var(--bg-card2);color:var(--text);cursor:pointer;font-size:.9rem;display:flex;align-items:center;justify-content:center;transition:all .15s}
.upg-stepper button:hover{border-color:var(--gold);color:var(--gold)}
.skill-row,.shop-row{display:flex;align-items:center;gap:.7rem;padding:.5rem 0;border-bottom:1px solid var(--border)}
.skill-row:last-child,.shop-row:last-child{border-bottom:none}
.shop-row.owned{opacity:.55}
.sk-icon{font-size:1.3rem;width:28px;text-align:center;flex-shrink:0}
.btn-fav{background:none;border:1px solid var(--border);border-radius:4px;cursor:pointer;font-size:1rem;padding:.15rem .35rem;color:var(--dim);transition:all .2s;line-height:1}
.btn-fav:hover{border-color:#f1c40f;color:#f1c40f}.btn-fav.active{color:#f1c40f;border-color:#f1c40f;text-shadow:0 0 6px rgba(241,196,15,.5)}
.sk-info{flex:1}
.sk-name{font-family:'Cinzel',serif;font-size:.8rem;color:var(--gold)}
.sk-desc{font-size:.74rem;color:var(--muted);margin-top:1px}

/* ── LOADOUT SELECTOR ── */
.loadout-info{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem;flex-wrap:wrap;gap:.4rem}
.loadout-count{font-family:'Cinzel',serif;font-size:.82rem;color:var(--gold)}
.loadout-hint{font-size:.75rem;color:var(--muted);margin-bottom:.6rem;font-style:italic}
.loadout-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:.4rem}
.loadout-skill{background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:.45rem .5rem;cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:.4rem;position:relative}
.loadout-skill:hover{border-color:var(--gold);background:var(--bg-card2)}
.loadout-skill.loadout-active{border-color:var(--green);background:#0a2010;box-shadow:0 0 8px rgba(39,174,96,.2)}
.loadout-sk-icon{font-size:1.2rem;flex-shrink:0}
.loadout-sk-name{font-size:.7rem;color:var(--text);line-height:1.2;flex:1}
.loadout-check{position:absolute;top:2px;right:4px;color:var(--green-l);font-size:.7rem;font-weight:bold}

/* Matches */
.match-card{transition:border-color .2s}
.match-card:hover{border-color:var(--border-g)}
.match-myturn{border-color:var(--gold)!important;box-shadow:0 0 12px rgba(201,168,76,.2)}
.match-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.match-title{font-family:'Cinzel',serif;font-size:.95rem;color:var(--gold)}
.match-meta{font-size:.78rem;color:var(--muted);margin-top:2px}

/* Leaderboard */
.lb-row{display:flex;align-items:center;gap:.8rem;padding:.6rem .8rem;background:var(--bg-card);border:1px solid var(--border);border-radius:6px;margin-bottom:.4rem}
.lb-rank{font-family:'Cinzel',serif;font-size:1rem;color:var(--gold);width:28px}

/* Leaderboard tabs */
.lb-tab-btn{
  padding:.5rem 1rem;border:1.5px solid var(--border);border-radius:8px;
  background:rgba(10,6,28,.6);color:var(--muted);font-family:'Cinzel',serif;
  font-size:.85rem;font-weight:700;letter-spacing:.05em;cursor:pointer;
  transition:all .2s;
}
.lb-tab-btn:hover{border-color:var(--accent);color:#d8c8ff}
.lb-tab-btn.active{
  background:linear-gradient(135deg,rgba(150,80,220,.2),rgba(100,60,200,.15));
  border-color:var(--accent);color:var(--accent);
  box-shadow:0 0 12px rgba(150,80,220,.3);
}

/* Duo leaderboard 2v2 */
#lb-duo-list .lb-row{border-left:3px solid #9b59b6}
#lb-duo-list .lb-duo-team{display:flex;align-items:center;gap:.5rem;flex:1}
#lb-duo-list .lb-duo-team .lb-pair-avatars{display:flex;gap:2px;font-size:1.2rem}
.lb-name{flex:1}
.lb-wins{color:var(--gold);font-size:.85rem}
.student-name{font-family:'Cinzel',serif;font-size:.85rem;display:inline-flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.student-meta{font-size:.72rem;color:var(--muted)}

/* ── Leaderboard row premium effects — divine/mythic/celestial composition ──
   Aplican una fila con borde y aura según la rareza dominante del loadout
   activo del jugador. Las clases las añade hero.js usando `u.comp` del
   backend (sin coste de payload extra). */
.lb-tier-badge{display:inline-flex;align-items:center;gap:.25rem;padding:.1rem .45rem;border-radius:3px;font-family:'Cinzel',serif;font-size:.58rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border:1px solid;line-height:1.2;vertical-align:middle;white-space:nowrap}
.lb-tier-badge .hero-tier-icon{font-size:.85em;line-height:1}
.lb-gems{display:inline-flex;gap:.18rem;align-items:center;margin-top:.25rem}
.lb-gems .comp-gem{width:7px;height:7px}

/* Aura sutil en el lado izquierdo según rareza dominante del loadout activo. */
.lb-row.lb-dom-rare     {box-shadow:inset 4px 0 12px -4px rgba(52,152,219,.5)}
.lb-row.lb-dom-epic     {box-shadow:inset 4px 0 14px -4px rgba(155,89,182,.6)}
.lb-row.lb-dom-legendary{box-shadow:inset 4px 0 16px -4px rgba(241,196,15,.55),0 0 10px rgba(241,196,15,.18)}
.lb-row.lb-dom-mythic   {box-shadow:inset 4px 0 21px -3px rgba(255,68,255,.75),0 0 18px rgba(255,68,255,.3)}
.lb-row.lb-dom-divine   {box-shadow:inset 4px 0 26px -3px rgba(255,245,214,.83),0 0 22px rgba(255,245,214,.37),0 0 35px rgba(255,215,100,.15)}

/* Si el tier es CELESTIAL (2D+2M) la fila brilla con tornasol blanco-oro-mítico. */
.lb-row.tier-celestial{
  border:1px solid #fff5d6;
  background:linear-gradient(90deg,rgba(255,245,214,.06),rgba(255,68,255,.04),rgba(255,245,214,.06));
  box-shadow:0 0 27px rgba(255,245,214,.63),0 0 54px rgba(255,68,255,.25)
}

/* Leaderboard v2 */
.lb-my-rank-banner{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;padding:.55rem 1rem;background:rgba(150,80,220,.1);border:1px solid var(--accent);border-radius:8px;margin-bottom:.75rem;font-size:.83rem}
.lb-my-rank-banner strong{color:var(--accent)}
.lb-go-rank-btn{margin-left:auto;padding:.28rem .7rem;background:rgba(150,80,220,.2);border:1px solid var(--accent);border-radius:6px;color:var(--accent);font-family:'Cinzel',serif;font-size:.76rem;cursor:pointer}
.lb-go-rank-btn:hover{background:rgba(150,80,220,.38)}
.lb-controls{display:flex;gap:.5rem;margin-bottom:.75rem;flex-wrap:wrap}
.lb-input{flex:1;min-width:130px;padding:.38rem .65rem;background:var(--bg-card);border:1px solid var(--border);border-radius:6px;color:#e0d0ff;font-size:.84rem;outline:none}
.lb-input:focus{border-color:var(--accent)}
.lb-jump-wrap{display:flex;gap:.3rem;align-items:center}
.lb-jump-input{width:115px;flex:none}
.lb-jump-btn{padding:.38rem .7rem;background:rgba(150,80,220,.18);border:1px solid var(--accent);border-radius:6px;color:var(--accent);font-size:.82rem;cursor:pointer;white-space:nowrap}
.lb-jump-btn:hover{background:rgba(150,80,220,.35)}
.lb-loading{color:var(--muted);text-align:center;padding:1.5rem;font-style:italic;font-size:.85rem}
.lb-row-highlight{background:rgba(150,80,220,.18)!important;outline:2px solid var(--accent);outline-offset:-2px}
.lb-pagination{margin-top:.75rem}
.lb-pagin-info{text-align:center;color:var(--muted);font-size:.76rem;margin-bottom:.4rem}
.lb-pagin-btns{display:flex;gap:.3rem;justify-content:center;flex-wrap:wrap}
.lb-pagin-btn{padding:.28rem .55rem;background:var(--bg-card);border:1px solid var(--border);border-radius:5px;color:#b0a0cc;font-size:.8rem;cursor:pointer;font-family:inherit}
.lb-pagin-btn:hover{border-color:var(--accent);color:var(--accent)}
.lb-pagin-btn-active{background:rgba(150,80,220,.22)!important;border-color:var(--accent)!important;color:var(--accent)!important}
.lb-pagin-dots{color:var(--muted);padding:.28rem .15rem;font-size:.8rem}

/* ── Leaderboard clickable rows ── */
.lb-row-clickable{cursor:pointer;transition:background .12s}
.lb-row-clickable:hover{background:rgba(150,80,220,.1)!important}

/* ── Player profile overlay ── */
.pp-overlay{position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:9000;display:flex;align-items:center;justify-content:center;padding:1rem}
@media(min-width:768px){.pp-overlay{background:rgba(0,0,0,.72);backdrop-filter:blur(5px)}}
.pp-modal{position:relative;background:linear-gradient(160deg,#0f0a1e 0%,#140a28 100%);border:1.5px solid var(--accent);border-radius:14px;width:100%;max-width:520px;max-height:88vh;overflow-y:auto;padding:1.5rem 1.3rem 1.3rem;box-shadow:0 0 60px rgba(150,80,220,.22),0 8px 40px rgba(0,0,0,.6)}
.pp-close-btn{position:absolute;top:.65rem;right:.8rem;background:none;border:none;color:var(--muted);font-size:1.15rem;cursor:pointer;padding:.25rem .45rem;border-radius:4px;line-height:1;transition:color .12s,background .12s}
.pp-close-btn:hover{color:#e0d0ff;background:rgba(255,255,255,.09)}
.pp-header{display:flex;gap:1rem;align-items:flex-start;margin-bottom:1.1rem}
.pp-avatar{font-size:2.6rem;width:66px;height:66px;display:flex;align-items:center;justify-content:center;border-radius:50%;border:2.5px solid;flex-shrink:0;box-shadow:0 0 20px rgba(150,80,220,.2)}
.pp-header-info{flex:1;min-width:0}
.pp-username{font-family:'Cinzel',serif;font-size:1.08rem;font-weight:700;color:#e8d8ff;margin-bottom:.22rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-title-badge{font-size:.72rem;color:#9b59b6;font-style:italic;margin-bottom:.28rem;opacity:.85}
.pp-badges{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.45rem}
.pp-league-badge{font-family:'Cinzel',serif;font-size:.7rem;padding:.18rem .48rem;border-radius:4px;border:1px solid;white-space:nowrap}
.pp-stats{display:flex;gap:.65rem;flex-wrap:wrap}
.pp-stat{font-size:.8rem;color:var(--muted)}
.pp-win{color:#2ecc71!important}
.pp-loss{color:#e74c3c!important}
.pp-loadout-tabs{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.8rem;border-bottom:1px solid var(--border);padding-bottom:.6rem}
.pp-lo-tab{padding:.3rem .6rem;background:var(--bg-card);border:1px solid var(--border);border-radius:6px;color:var(--muted);font-size:.76rem;cursor:pointer;font-family:'Cinzel',serif;transition:all .14s}
.pp-lo-tab:hover{border-color:var(--accent);color:#d8c8ff}
.pp-lo-tab.active{background:rgba(150,80,220,.18);border-color:var(--accent);color:var(--accent)}
.pp-lo-tab-count{opacity:.6;font-size:.68rem}
.pp-loadout-content{min-height:60px}
.pp-skills-grid{display:flex;flex-direction:column;gap:.55rem}
.pp-sk-card{border-radius:8px;border:1px solid;padding:.65rem .8rem;position:relative;overflow:hidden;transition:transform .14s}
.pp-sk-card:hover{transform:translateY(-1px)}
.pp-sk-header{display:flex;align-items:flex-start;gap:.6rem;margin-bottom:.3rem}
.pp-sk-icon{font-size:1.55rem;line-height:1;flex-shrink:0;margin-top:.05rem}
.pp-sk-title-wrap{display:flex;align-items:center;flex-wrap:wrap;gap:.3rem;flex:1}
.pp-sk-name{font-family:'Cinzel',serif;font-size:.82rem;font-weight:700}
.pp-sk-rarity-badge{font-size:.62rem;padding:.1rem .32rem;border-radius:3px;border:1px solid}
.pp-sk-stats{font-size:.76rem;color:#b0a0cc;line-height:1.55}
.pp-sk-flavor{font-size:.7rem;color:var(--muted);font-style:italic;margin-top:.3rem;opacity:.8}

/* Rarity glow effects */
.rarity-glow-common{}
.rarity-glow-rare{box-shadow:0 0 10px rgba(52,152,219,.22),0 2px 8px rgba(0,0,0,.4)}
.rarity-glow-epic{animation:pp-epic-glow 3s ease-in-out infinite}
.rarity-glow-legendary{animation:pp-legendary-glow 2.5s ease-in-out infinite}
.rarity-glow-mythic{animation:pp-mythic-glow 2s ease-in-out infinite}
.rarity-glow-divine{animation:pp-divine-glow 2.2s ease-in-out infinite}

/* Mythic shimmer sweep via pseudo-element */
.rarity-glow-mythic::before{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 25%,rgba(255,68,255,.13) 50%,transparent 75%);animation:pp-shimmer 3.2s ease-in-out infinite;pointer-events:none;border-radius:inherit}
.rarity-glow-divine::before{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 25%,rgba(255,245,214,.18) 50%,transparent 75%);animation:pp-shimmer 3s ease-in-out infinite;pointer-events:none;border-radius:inherit}

@keyframes pp-epic-glow{
  0%,100%{box-shadow:0 0 10px rgba(155,89,182,.28),0 2px 8px rgba(0,0,0,.4)}
  50%{box-shadow:0 0 22px rgba(155,89,182,.58),0 0 40px rgba(155,89,182,.12)}
}
@keyframes pp-legendary-glow{
  0%,100%{box-shadow:0 0 14px rgba(241,196,15,.35),0 2px 8px rgba(0,0,0,.4)}
  50%{box-shadow:0 0 30px rgba(241,196,15,.65),0 0 55px rgba(241,196,15,.18)}
}
@keyframes pp-mythic-glow{
  0%{box-shadow:0 0 18px rgba(255,68,255,.5),0 0 40px rgba(255,68,255,.1)}
  33%{box-shadow:0 0 34px rgba(255,68,255,.78),0 0 65px rgba(255,68,255,.22)}
  66%{box-shadow:0 0 26px rgba(180,0,255,.62),0 0 52px rgba(180,0,255,.16)}
  100%{box-shadow:0 0 18px rgba(255,68,255,.5),0 0 40px rgba(255,68,255,.1)}
}
@keyframes pp-divine-glow{
  0%{box-shadow:0 0 20px rgba(255,245,214,.55),0 0 42px rgba(255,215,100,.14)}
  33%{box-shadow:0 0 38px rgba(255,245,214,.9),0 0 70px rgba(255,215,100,.32)}
  66%{box-shadow:0 0 30px rgba(255,215,100,.78),0 0 60px rgba(255,245,214,.22)}
  100%{box-shadow:0 0 20px rgba(255,245,214,.55),0 0 42px rgba(255,215,100,.14)}
}
@keyframes pp-shimmer{
  0%,100%{transform:translateX(-120%)}
  45%,55%{transform:translateX(120%)}
}

/* ── Profile overlay — hero-card-style premium design ── */
.pp-orbital-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:180px;height:180px}
.pp-orbital{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:0;height:0;pointer-events:none;z-index:2;perspective:600px;transform-style:preserve-3d}
.pp-av-lg{width:90px!important;height:90px!important;font-size:2.8rem!important;z-index:3}
.pp-hero-header{margin-bottom:.5rem}
.pp-stats-footer{flex-wrap:wrap;gap:.5rem;border-top:1px solid var(--border);padding-top:.7rem;margin-top:.7rem;display:flex;margin-bottom:.8rem}
.pp-stats-footer span{background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:.2rem .55rem;display:flex;align-items:center;gap:.3rem;font-size:.78rem;color:var(--muted)}
.pp-stats-footer strong{color:var(--gold);font-size:.92rem}

/* Modal rarity tints — applied dynamically via hero-dom-X class */
.pp-modal.hero-dom-rare     {background:linear-gradient(160deg,#0f0a1e 0%,#091520 100%);box-shadow:0 0 70px rgba(52,152,219,.4),0 8px 40px rgba(0,0,0,.7)}
.pp-modal.hero-dom-epic     {background:linear-gradient(160deg,#0f0a1e 0%,#13092a 100%);box-shadow:0 0 75px rgba(155,89,182,.5),0 8px 40px rgba(0,0,0,.7)}
.pp-modal.hero-dom-legendary{background:linear-gradient(160deg,#0f0a1e 0%,#1f1400 100%);box-shadow:0 0 100px rgba(241,196,15,.6),0 8px 40px rgba(0,0,0,.7);animation:pp-modal-legendary 2.5s ease-in-out infinite}
.pp-modal.hero-dom-mythic   {background:linear-gradient(160deg,#0f0a1e 0%,#200018 100%);animation:pp-modal-mythic 2s ease-in-out infinite}
.pp-modal.hero-dom-divine   {background:linear-gradient(160deg,#0f0a1e 0%,#1f1a00 100%);animation:pp-modal-divine 2.2s ease-in-out infinite}
@keyframes pp-modal-legendary{
  0%,100%{box-shadow:0 0 100px rgba(241,196,15,.6),0 8px 40px rgba(0,0,0,.7)}
  50%    {box-shadow:0 0 150px rgba(241,196,15,.88),0 8px 40px rgba(0,0,0,.7),0 0 70px rgba(241,196,15,.28)}
}
@keyframes pp-modal-mythic{
  0%,100%{box-shadow:0 0 100px rgba(255,68,255,.7),0 8px 40px rgba(0,0,0,.7)}
  33%    {box-shadow:0 0 160px rgba(255,68,255,.95),0 8px 40px rgba(0,0,0,.7),0 0 80px rgba(180,0,255,.45)}
  66%    {box-shadow:0 0 140px rgba(180,0,255,.85),0 8px 40px rgba(0,0,0,.7),0 0 70px rgba(255,68,255,.3)}
}
@keyframes pp-modal-divine{
  0%,100%{box-shadow:0 0 110px rgba(255,245,214,.7),0 8px 40px rgba(0,0,0,.7)}
  33%    {box-shadow:0 0 170px rgba(255,245,214,.95),0 8px 40px rgba(0,0,0,.7),0 0 80px rgba(255,215,100,.55)}
  66%    {box-shadow:0 0 150px rgba(255,215,100,.85),0 8px 40px rgba(0,0,0,.7),0 0 70px rgba(255,245,214,.35)}
}
.student-row{display:flex;align-items:center;gap:.6rem;padding:.5rem 0;border-bottom:1px solid var(--border);flex-wrap:wrap}
.student-row:last-child{border-bottom:none}
.student-info{flex:1;min-width:100px}
.student-btns{display:flex;gap:.35rem}

/* Teacher watch */
.teacher-watching{border-color:var(--gold)!important}
.teacher-watch-header{display:flex;align-items:center;justify-content:space-between;gap:.7rem;flex-wrap:wrap;margin-bottom:.8rem;padding-bottom:.6rem;border-bottom:1px solid var(--border-g)}
.teacher-watch-title{font-family:'Cinzel',serif;font-size:.95rem;color:var(--gold)}
.teacher-watch-arena{display:grid;grid-template-columns:1fr auto 1fr;gap:.6rem;align-items:center;margin-bottom:.8rem}
.teacher-combatant{background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:.6rem}
.teacher-combatant-name{font-family:'Cinzel',serif;font-size:.82rem;color:var(--gold);margin-bottom:.4rem}
.teacher-vs{font-family:'Cinzel',serif;font-size:1.2rem;color:var(--gold);text-align:center}
.teacher-watch-log{background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:.6rem;max-height:100px;overflow-y:auto;margin-top:.4rem}

/* Toast */
#toast{position:fixed;bottom:1.5rem;right:1.5rem;background:var(--bg-card2);border:1px solid var(--gold);color:var(--gold-l);padding:.7rem 1.2rem;border-radius:6px;font-size:.85rem;opacity:0;transform:translateY(10px);transition:all .3s;z-index:1000;pointer-events:none;font-family:'Cinzel',serif}
#toast.show{opacity:1;transform:translateY(0)}
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}

/* ════════════════════════════════════════════════════════
   BATALLA
════════════════════════════════════════════════════════ */
#battle-view{padding:.6rem;max-width:780px;margin:0 auto}

/* Topbar */
.battle-topbar{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.5rem;flex-wrap:wrap}
.timer-wrap{display:flex;align-items:center;gap:.4rem}
.timer-label{font-size:.75rem;color:var(--muted)}
.battle-timer{font-family:'Cinzel',serif;font-size:1.6rem;font-weight:900;color:var(--gold);min-width:2ch;text-align:center;transition:color .3s}
.timer-warning{color:var(--amber-l)!important}
.timer-urgent{color:#ff8800!important;animation:timer-pulse .6s ease infinite}
.timer-crit{color:#ff2200!important;animation:timer-pulse .25s ease infinite}
@keyframes timer-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}

/* Reglas */
.rules-panel{background:var(--bg-card);border:1px solid var(--border-g);border-radius:8px;padding:1rem 1.2rem;margin-bottom:.7rem;animation:slide-down .2s ease}
@keyframes slide-down{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.rules-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.rules-section{}
.rules-title{font-family:'Cinzel',serif;font-size:.82rem;color:var(--gold);margin-bottom:.4rem}
.rules-section ul{padding-left:1rem}
.rules-section li{font-size:.78rem;color:var(--muted);margin-bottom:.3rem;line-height:1.4}
.rules-section li strong{color:var(--text)}

/* Escena */
#battle-scene{position:relative;width:100%;aspect-ratio:16/10;max-height:520px;min-height:360px;overflow:hidden;border-radius:12px;border:2px solid #4a2a7a;box-shadow:0 0 0 1px #2a1a4a,0 0 40px rgba(120,60,200,.35),0 0 80px rgba(80,40,150,.15);transition:border-color .8s,box-shadow .8s}
.bs-sky{position:absolute;inset:0 0 38% 0;z-index:0;transition:background 1s}
.bs-aurora{position:absolute;inset:0 0 42% 0;z-index:1;opacity:.18;filter:blur(18px);animation:aurora-drift 8s ease-in-out infinite alternate;transition:background 1s}
@keyframes aurora-drift{0%{transform:scaleX(1) translateX(0);opacity:.14}50%{transform:scaleX(1.1) translateX(3%);opacity:.22}100%{transform:scaleX(.95) translateX(-3%);opacity:.12}}
.bs-moon{position:absolute;z-index:2;width:clamp(30px,6%,50px);height:clamp(30px,6%,50px);top:7%;left:68%;border-radius:50%;animation:moon-pulse 4s ease-in-out infinite;transition:background .8s,box-shadow .8s}
@keyframes moon-pulse{0%,100%{filter:brightness(1) drop-shadow(0 0 18px currentColor)}50%{filter:brightness(1.2) drop-shadow(0 0 30px currentColor)}}
.bs-stars-layer{position:absolute;inset:0 0 38% 0;z-index:2;pointer-events:none;overflow:hidden}
.bs-star{position:absolute;border-radius:50%;background:white;animation:star-twinkle linear infinite}
@keyframes star-twinkle{0%,100%{opacity:0;transform:scale(.8)}50%{opacity:.85;transform:scale(1.1)}}
.bs-clouds{position:absolute;inset:0 0 40% 0;z-index:2;pointer-events:none;overflow:hidden}
/* S3: cloud sin filter:blur runtime. Background convertido a radial-gradient
   con falloff suave — el alpha-falloff del gradient sustituye el blur.
   El color CSS var sale del scenario (set en JS spawnClouds). */
.bs-cloud{position:absolute;border-radius:50%;opacity:0;animation:cloud-drift linear infinite;background:radial-gradient(ellipse,var(--cloud-tint,rgba(255,255,255,.06)) 0%,var(--cloud-tint,rgba(255,255,255,.06)) 35%,transparent 75%)}
@keyframes cloud-drift{0%{transform:translateX(-120px);opacity:0}10%{opacity:var(--cloud-op,.06)}80%{opacity:var(--cloud-op,.06)}100%{transform:translateX(calc(100vw + 120px));opacity:0}}
.bs-mountains-far{position:absolute;bottom:36%;left:0;right:0;height:22%;z-index:3;clip-path:polygon(0% 100%,0% 65%,6% 50%,12% 63%,18% 44%,25% 60%,32% 40%,40% 58%,48% 36%,56% 58%,63% 42%,70% 60%,78% 38%,85% 55%,92% 45%,100% 58%,100% 100%);opacity:.6;filter:blur(2px);transition:background 1s}
.bs-mountains{position:absolute;bottom:37%;left:0;right:0;height:28%;z-index:4;clip-path:polygon(0% 100%,0% 70%,4% 55%,8% 68%,13% 46%,18% 64%,23% 42%,29% 60%,34% 40%,40% 58%,45% 35%,52% 62%,57% 40%,63% 60%,68% 30%,74% 55%,79% 38%,85% 55%,90% 38%,95% 55%,100% 48%,100% 100%);transition:background 1s}
.bs-ground{position:absolute;inset:63% 0 0 0;z-index:5;transition:background 1s}
.bs-ground::before{content:'';position:absolute;top:0;left:0;right:0;height:30%;background:var(--ground-lines,repeating-linear-gradient(90deg,transparent 0px,transparent 8px,rgba(60,120,40,.2) 8px,rgba(60,120,40,.2) 9px))}
#battle-scene::before{content:'';position:absolute;top:63%;left:0;right:0;height:3px;z-index:6;background:var(--scene-line,linear-gradient(90deg,transparent,rgba(80,200,80,.4) 15%,rgba(160,255,120,.9) 50%,rgba(80,200,80,.4) 85%,transparent));filter:blur(1.5px);animation:line-pulse 3s ease-in-out infinite}
@keyframes line-pulse{0%,100%{opacity:.7;filter:blur(1.5px)}50%{opacity:1;filter:blur(.5px)}}
.bs-ground-glow{position:absolute;top:58%;left:0;right:0;height:12%;z-index:6;filter:blur(12px);pointer-events:none;animation:glow-breathe 4s ease-in-out infinite;transition:background 1s}
@keyframes glow-breathe{0%,100%{opacity:.6}50%{opacity:1}}
.bs-weather{position:absolute;inset:0;z-index:7;pointer-events:none;overflow:hidden}
.bs-ambient{position:absolute;inset:0;z-index:7;pointer-events:none;overflow:hidden}
.bs-vignette{position:absolute;inset:0;z-index:8;pointer-events:none;background:radial-gradient(ellipse 85% 85% at 50% 50%,transparent 50%,rgba(0,0,0,.6))}
.bs-flash{position:absolute;inset:0;z-index:40;pointer-events:none;opacity:0}
@keyframes screen-flash{0%{opacity:0}8%,20%,36%{opacity:.9}14%,28%{opacity:.05}100%{opacity:0}}
.bs-flash.do-flash{animation:screen-flash .65s ease forwards}
#anim-layer{position:absolute;inset:0;z-index:35;pointer-events:none;overflow:hidden}

/* Weather particles */
.bs-rain{position:absolute;width:1.5px;background:linear-gradient(180deg,transparent,var(--rain-color,rgba(150,200,255,.5)));animation:rain-fall linear infinite;pointer-events:none}
@keyframes rain-fall{0%{transform:translateY(-20px);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateY(100vh);opacity:0}}
.bs-snow{position:absolute;width:4px;height:4px;border-radius:50%;background:rgba(220,240,255,.7);animation:snow-fall linear infinite;pointer-events:none;box-shadow:0 0 4px rgba(200,230,255,.4)}
@keyframes snow-fall{0%{transform:translate(0,-10px);opacity:0}10%{opacity:.8}90%{opacity:.6}100%{transform:translate(var(--snow-drift,20px),100vh);opacity:0}}
.bs-ember{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--ember-color,#ff6600);animation:ember-rise linear infinite;pointer-events:none;box-shadow:0 0 6px var(--ember-color,#ff6600)}
@keyframes ember-rise{0%{transform:translate(0,0) scale(1);opacity:0}10%{opacity:.9}60%{opacity:.7}100%{transform:translate(var(--ember-drift,30px),-200px) scale(0);opacity:0}}
.bs-lightning{position:absolute;inset:0;z-index:7;pointer-events:none;opacity:0}
@keyframes lightning-flash{0%{opacity:0}2%{opacity:.8}4%{opacity:0}6%{opacity:.6}8%{opacity:0}12%{opacity:.3}14%,100%{opacity:0}}
.bs-fog{position:absolute;width:200%;height:40%;bottom:30%;left:-50%;z-index:6;pointer-events:none;background:linear-gradient(90deg,transparent,var(--fog-color,rgba(100,100,150,.08)) 25%,var(--fog-color,rgba(100,100,150,.12)) 50%,var(--fog-color,rgba(100,100,150,.08)) 75%,transparent);filter:blur(30px);animation:fog-drift 20s ease-in-out infinite alternate}
@keyframes fog-drift{0%{transform:translateX(-10%)}100%{transform:translateX(10%)}}

/* Ambient keyframes */
@keyframes firefly{
  0%{opacity:0;transform:translate(0,0)}
  10%{opacity:.8}
  25%{transform:translate(15px,-10px);opacity:1}
  50%{transform:translate(-10px,-25px);opacity:.6}
  75%{transform:translate(20px,-15px);opacity:.9}
  90%{opacity:.3}
  100%{transform:translate(-5px,-35px);opacity:0}
}
@keyframes void-particle{
  0%{opacity:0;transform:scale(0)}
  20%{opacity:.7;transform:scale(1.5)}
  50%{opacity:.4;transform:scale(1)}
  80%{opacity:.6;transform:scale(2)}
  100%{opacity:0;transform:scale(0)}
}
@keyframes petal-fall{
  0%{transform:translate(0,0) rotate(0deg) scale(1);opacity:0}
  5%{opacity:.7}
  25%{transform:translate(30px,25vh) rotate(90deg) scale(.9)}
  50%{transform:translate(-20px,50vh) rotate(200deg) scale(.8)}
  75%{transform:translate(25px,75vh) rotate(310deg) scale(.7);opacity:.5}
  100%{transform:translate(-10px,105vh) rotate(400deg) scale(.5);opacity:0}
}

/* Impact ring effect */
.impact-ring{position:absolute;border-radius:50%;pointer-events:none;z-index:36;border:3px solid;transform:translate(-50%,-50%) scale(0);opacity:0}

/* ── Death animation ── */
@keyframes death-dissolve{
  0%{filter:brightness(1);transform:scale(1);opacity:1}
  12%{filter:brightness(4) saturate(0);transform:scale(1.15)}
  25%{filter:brightness(2.5) saturate(.2);transform:scale(1.05);opacity:.9}
  45%{filter:brightness(1.5) saturate(.1);transform:scale(.92) translateY(5px);opacity:.65}
  65%{filter:brightness(1) saturate(0);transform:scale(.75) translateY(12px);opacity:.35}
  85%{filter:saturate(0);transform:scale(.4) translateY(20px);opacity:.1}
  100%{filter:saturate(0);transform:scale(.1) translateY(30px);opacity:0}
}
.anim-death{animation:death-dissolve 1.5s ease-in forwards !important}
@keyframes death-flash{0%{opacity:0}8%{opacity:.6}20%{opacity:.2}40%{opacity:.1}100%{opacity:0}}

/* ══ EVENTO NARRATIVO (banner central) ══ */
.event-banner{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:45;pointer-events:none;
  font-family:'Cinzel',serif;font-size:clamp(.75rem,2vw,1.1rem);font-weight:700;letter-spacing:.05em;
  text-align:center;max-width:85%;
  padding:.45rem 1.2rem;border-radius:8px;
  text-shadow:0 2px 8px rgba(0,0,0,.9),0 0 20px currentColor;
  border:1.5px solid;
  box-shadow:0 0 30px rgba(0,0,0,.5),inset 0 0 20px rgba(255,255,255,.03)}
.event-banner-near{max-width:min(42%,240px);font-size:clamp(.62rem,1.1vw,.86rem);padding:.35rem .75rem;line-height:1.3}
.event-banner-hit    {background:linear-gradient(135deg,rgba(120,20,0,.9),rgba(80,10,0,.95));border-color:#ff4400;color:#ffcc88;box-shadow:0 0 30px rgba(255,68,0,.3),inset 0 0 20px rgba(255,100,0,.1)}
.event-banner-status {background:linear-gradient(135deg,rgba(0,50,120,.9),rgba(0,30,80,.95));border-color:#44aaff;color:#88ddff;box-shadow:0 0 30px rgba(68,170,255,.3),inset 0 0 20px rgba(68,170,255,.1)}
.event-banner-miss   {background:linear-gradient(135deg,rgba(40,40,40,.9),rgba(20,20,20,.95));border-color:#888;color:#ddd}
.event-banner-buff   {background:linear-gradient(135deg,rgba(100,70,0,.9),rgba(60,40,0,.95));border-color:#ffaa00;color:#ffe080;box-shadow:0 0 30px rgba(255,170,0,.3),inset 0 0 20px rgba(255,170,0,.1)}
.event-banner-heal   {background:linear-gradient(135deg,rgba(0,70,35,.9),rgba(0,40,20,.95));border-color:#00ee66;color:#88ffbb;box-shadow:0 0 30px rgba(0,238,102,.3),inset 0 0 20px rgba(0,238,102,.1)}
.event-banner-poison {background:linear-gradient(135deg,rgba(40,0,70,.9),rgba(20,0,40,.95));border-color:#bb55ff;color:#dd99ff;box-shadow:0 0 30px rgba(187,85,255,.3),inset 0 0 20px rgba(187,85,255,.1)}
.event-banner-death  {background:linear-gradient(135deg,rgba(120,90,0,.9),rgba(80,60,0,.95));border-color:var(--gold);color:var(--gold-l);box-shadow:0 0 30px rgba(201,168,76,.4),inset 0 0 20px rgba(201,168,76,.15)}
.event-banner-info   {background:linear-gradient(135deg,rgba(15,10,40,.9),rgba(8,5,25,.95));border-color:#6a3aaa;color:#d0b0ff;box-shadow:0 0 30px rgba(106,58,170,.3),inset 0 0 20px rgba(106,58,170,.1)}
.event-banner-crit   {background:linear-gradient(135deg,rgba(180,30,0,.95),rgba(120,10,0,.98));border-color:#ffd000;color:#ffe680;font-weight:900;letter-spacing:.05em;text-shadow:0 0 8px rgba(255,200,0,.85),0 0 14px rgba(255,80,0,.6);box-shadow:0 0 40px rgba(255,180,0,.55),0 0 18px rgba(255,60,0,.4),inset 0 0 24px rgba(255,180,0,.18)}

/* Info boxes HP */
.bs-infobox{position:absolute;background:rgba(6,3,18,.96);border:1.5px solid var(--scene-accent,#4a2a8a);border-radius:8px;padding:.45rem .75rem;min-width:min(185px,44%);z-index:10;box-shadow:0 2px 12px rgba(0,0,0,.5)}
.bs-enemy-box{top:4%;left:2%;animation:slide-in-left .5s cubic-bezier(.2,1,.3,1)}
.bs-player-box{bottom:4%;right:2%;animation:slide-in-right .5s cubic-bezier(.2,1,.3,1)}
@keyframes slide-in-left{from{transform:translateX(-50px);opacity:0}}
@keyframes slide-in-right{from{transform:translateX(50px);opacity:0}}
.bs-char-name{font-family:'Cinzel',serif;font-size:clamp(.6rem,.85vw,.82rem);color:#e8d8ff;margin-bottom:.28rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bs-hprow{display:flex;align-items:center;gap:.35rem;margin-bottom:.18rem}
.bs-hplabel{font-size:.58rem;color:#e8d8ff;font-family:'Cinzel',serif;flex-shrink:0;text-shadow:0 1px 3px rgba(0,0,0,.9)}
.bs-hptrack{flex:1;height:8px;background:#111;border-radius:4px;overflow:hidden;border:1px solid #2a1a4a}
.bs-hpfill{height:100%;border-radius:3px;transition:width .2s cubic-bezier(.3,.8,.2,1),background .3s}
.bs-hpnum{font-size:.68rem;color:#f0e8ff;text-align:right;font-weight:600;text-shadow:0 1px 4px rgba(0,0,0,.95),0 0 8px rgba(0,0,0,.6)}
.bs-bufflist{display:flex;flex-wrap:wrap;gap:2px;margin-top:.2rem;min-height:14px}
.bs-buff-tag{font-size:.52rem;padding:1px 4px;border-radius:2px;background:#1a1a4e;color:#80a0ff;border:1px solid #2a3a8e;white-space:nowrap}
.bs-buff-tag.poison{background:#2a0a3e;color:#c080ff;border-color:#6a2a9e}
.bs-buff-tag.bleed{background:#3e0a0a;color:#ff8080;border-color:#9e2a2a}
.bs-buff-tag.holy{background:#3e2a0a;color:#ffe080;border-color:#9e7a2a}
.bs-buff-tag.stunned,.bs-buff-tag.frozen{background:#3a2a00;color:#ffe080;border-color:#7a6000}

/* Sprites */
.bs-sprite-area{position:absolute;display:flex;flex-direction:column;align-items:center;z-index:9}
.bs-enemy-area{top:4%;right:4%;animation:sprite-entrance-r .7s cubic-bezier(.2,1,.3,1)}
.bs-player-area{bottom:5%;left:4%;animation:sprite-entrance-l .7s cubic-bezier(.2,1,.3,1)}
@keyframes sprite-entrance-r{0%{transform:translateX(80px) scale(.5);opacity:0}60%{transform:translateX(-5px) scale(1.05);opacity:1}100%{transform:translateX(0) scale(1)}}
@keyframes sprite-entrance-l{0%{transform:translateX(-80px) scale(.5);opacity:0}60%{transform:translateX(5px) scale(1.05);opacity:1}100%{transform:translateX(0) scale(1)}}
.bs-sprite{display:flex;align-items:center;justify-content:center;border-radius:50%;line-height:1;user-select:none;filter:drop-shadow(0 4px 12px rgba(0,0,0,.7));transition:filter .15s,transform .15s}
.bs-sprite-enemy{font-size:clamp(3rem,8vw,5rem);width:clamp(72px,14vw,100px);height:clamp(72px,14vw,100px);animation:sprite-idle 3s ease-in-out infinite}
.bs-sprite-player{font-size:clamp(4rem,10vw,6rem);width:clamp(88px,16vw,120px);height:clamp(88px,16vw,120px);transform:scaleX(-1);animation:sprite-idle-player 3s ease-in-out infinite}
@keyframes sprite-idle{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes sprite-idle-player{0%,100%{transform:scaleX(-1) translateY(0)}50%{transform:scaleX(-1) translateY(-4px)}}
.bs-platform{border-radius:50%;opacity:.6;margin-top:-8px;filter:blur(5px);animation:platform-pulse 3s ease-in-out infinite}
.bs-platform-enemy{width:clamp(75px,12vw,100px);height:clamp(14px,2.5vw,20px);background:radial-gradient(ellipse,var(--scene-accent,#4a3a6a),transparent)}
.bs-platform-player{width:clamp(88px,14vw,115px);height:clamp(16px,2.8vw,23px);background:radial-gradient(ellipse,var(--scene-accent,#4a3a6a),transparent)}
@keyframes platform-pulse{0%,100%{opacity:.4;transform:scaleX(1)}50%{opacity:.7;transform:scaleX(1.05)}}

/* Animaciones sprite — mejoradas con múltiples fases */
@keyframes lunge-to-right{0%{transform:translateX(0) scale(1) scaleX(-1)}15%{transform:translateX(-8px) scale(1.12) scaleX(-1)}45%{transform:translateX(45px) scale(1.15) scaleX(-1);filter:brightness(1.4) drop-shadow(0 0 12px rgba(255,200,100,.5))}70%{transform:translateX(-12px) scale(.95) scaleX(-1)}100%{transform:translateX(0) scale(1) scaleX(-1);filter:brightness(1)}}
@keyframes lunge-to-left{0%{transform:translateX(0) scale(1)}15%{transform:translateX(8px) scale(1.12)}45%{transform:translateX(-45px) scale(1.15);filter:brightness(1.4) drop-shadow(0 0 12px rgba(255,200,100,.5))}70%{transform:translateX(12px) scale(.95)}100%{transform:translateX(0) scale(1);filter:brightness(1)}}
.anim-lunge-r{animation:lunge-to-right .4s cubic-bezier(.2,0,.6,1)}
.anim-lunge-l{animation:lunge-to-left .4s cubic-bezier(.2,0,.6,1)}

@keyframes anim-hit{
  0%{filter:brightness(1);transform:translateX(0)}
  8%{filter:brightness(4) saturate(.2) drop-shadow(0 0 20px #ff2200);transform:translateX(-10px) scale(1.06)}
  16%{filter:brightness(1.5);transform:translateX(8px) scale(.97)}
  24%{filter:brightness(4) saturate(.2) drop-shadow(0 0 16px #ff4400);transform:translateX(-6px) scale(1.04)}
  36%{filter:brightness(1.2);transform:translateX(5px)}
  50%{filter:brightness(3) drop-shadow(0 0 10px #ff3300);transform:translateX(-3px)}
  70%{filter:brightness(1.1);transform:translateX(0)}
  100%{filter:brightness(1);transform:translateX(0)}
}
@keyframes anim-freeze{
  0%{filter:brightness(1);transform:scale(1)}
  15%{filter:brightness(2) hue-rotate(190deg) saturate(4) drop-shadow(0 0 20px #44ccff);transform:scale(1.08)}
  30%{filter:brightness(1.3) hue-rotate(190deg) saturate(2);transform:scale(.98)}
  50%{filter:brightness(3) hue-rotate(200deg) saturate(5) drop-shadow(0 0 32px #22aaff);transform:scale(1.05)}
  70%{filter:brightness(1.5) hue-rotate(190deg) saturate(3);transform:scale(1.02)}
  100%{filter:brightness(1);transform:scale(1)}
}
@keyframes anim-poison{
  0%{filter:brightness(1);transform:scale(1)}
  20%{filter:brightness(1.8) hue-rotate(80deg) saturate(5) drop-shadow(0 0 16px #44ff44);transform:scale(1.04) skewX(-2deg)}
  40%{filter:brightness(1.2) hue-rotate(90deg) saturate(3);transform:scale(.98) skewX(2deg)}
  60%{filter:brightness(2.2) hue-rotate(100deg) saturate(6) drop-shadow(0 0 28px #00ff66);transform:scale(1.06) skewX(-1deg)}
  80%{filter:brightness(1.4) hue-rotate(85deg) saturate(4);transform:scale(1)}
  100%{filter:brightness(1);transform:scale(1)}
}
@keyframes anim-holy{
  0%{filter:brightness(1);transform:scale(1)}
  20%{filter:brightness(2) saturate(1.5) sepia(.5) drop-shadow(0 0 16px #ffdd44);transform:scale(1.03)}
  40%{filter:brightness(4) saturate(2) sepia(.8) drop-shadow(0 0 38px #ffdd44);transform:scale(1.1)}
  60%{filter:brightness(3) saturate(1.8) sepia(.6) drop-shadow(0 0 20px #ffcc22);transform:scale(1.05)}
  100%{filter:brightness(1);transform:scale(1)}
}
@keyframes anim-heal{
  0%{filter:brightness(1);transform:scale(1)}
  15%{filter:brightness(1.3) saturate(2) hue-rotate(80deg) drop-shadow(0 0 12px #00ff88);transform:scale(1.02)}
  35%{filter:brightness(1.8) saturate(4) hue-rotate(80deg) drop-shadow(0 0 32px #00ff88);transform:scale(1.1)}
  55%{filter:brightness(1.5) saturate(3) hue-rotate(80deg) drop-shadow(0 0 18px #00ff88);transform:scale(1.06)}
  100%{filter:brightness(1);transform:scale(1)}
}
@keyframes anim-buff{
  0%{filter:brightness(1);transform:scale(1)}
  15%{filter:brightness(1.5) saturate(2) drop-shadow(0 0 14px #ffcc00);transform:scale(1.04)}
  30%{filter:brightness(2.5) saturate(4) drop-shadow(0 0 28px #ffcc00);transform:scale(1.1)}
  50%{filter:brightness(2) saturate(3) drop-shadow(0 0 18px #ffaa00);transform:scale(1.07)}
  70%{filter:brightness(1.5) saturate(2) drop-shadow(0 0 10px #ffcc00);transform:scale(1.03)}
  100%{filter:brightness(1);transform:scale(1)}
}
@keyframes anim-stun{
  0%{filter:brightness(1);transform:rotate(0)}
  8%{filter:brightness(3) sepia(1) hue-rotate(-20deg) drop-shadow(0 0 16px #ffee00);transform:rotate(-5deg) scale(1.06)}
  16%{filter:brightness(1);transform:rotate(4deg)}
  24%{filter:brightness(3) sepia(1) hue-rotate(-20deg) drop-shadow(0 0 16px #ffee00);transform:rotate(-3deg) scale(1.04)}
  36%{filter:brightness(1);transform:rotate(2deg)}
  48%{filter:brightness(2.5) sepia(.8) hue-rotate(-15deg) drop-shadow(0 0 12px #ffee00);transform:rotate(-2deg)}
  60%{filter:brightness(1);transform:rotate(1deg)}
  75%{filter:brightness(1.5) sepia(.4) drop-shadow(0 0 6px #ffee00);transform:rotate(0)}
  100%{filter:brightness(1);transform:rotate(0)}
}
.anim-hit{animation:anim-hit .6s ease}
.anim-freeze{animation:anim-freeze .8s ease}
.anim-poison{animation:anim-poison .7s ease}
.anim-holy{animation:anim-holy .7s ease}
.anim-heal{animation:anim-heal .8s ease}
.anim-buff{animation:anim-buff .85s ease}
.anim-stun{animation:anim-stun .9s ease}

/* Mobile cap: limita saturate/brightness en peaks para reducir coste filter */
@media(max-width:480px){
  @keyframes anim-freeze{
    0%{filter:brightness(1);transform:scale(1)}
    15%{filter:brightness(1.5) hue-rotate(190deg) saturate(2) drop-shadow(0 0 14px #44ccff);transform:scale(1.06)}
    50%{filter:brightness(2) hue-rotate(200deg) saturate(2.5) drop-shadow(0 0 20px #22aaff);transform:scale(1.04)}
    100%{filter:brightness(1);transform:scale(1)}
  }
  @keyframes anim-poison{
    0%{filter:brightness(1);transform:scale(1)}
    20%{filter:brightness(1.4) hue-rotate(80deg) saturate(2.5) drop-shadow(0 0 12px #44ff44);transform:scale(1.03)}
    60%{filter:brightness(1.6) hue-rotate(100deg) saturate(3) drop-shadow(0 0 18px #00ff66);transform:scale(1.04)}
    100%{filter:brightness(1);transform:scale(1)}
  }
  @keyframes anim-holy{
    0%{filter:brightness(1);transform:scale(1)}
    40%{filter:brightness(2) saturate(1.5) sepia(.5) drop-shadow(0 0 24px #ffdd44);transform:scale(1.07)}
    100%{filter:brightness(1);transform:scale(1)}
  }
  @keyframes anim-heal{
    0%{filter:brightness(1);transform:scale(1)}
    35%{filter:brightness(1.5) saturate(2) hue-rotate(80deg) drop-shadow(0 0 20px #00ff88);transform:scale(1.07)}
    100%{filter:brightness(1);transform:scale(1)}
  }
  @keyframes anim-buff{
    0%{filter:brightness(1);transform:scale(1)}
    30%{filter:brightness(1.6) saturate(2) drop-shadow(0 0 18px #ffcc00);transform:scale(1.07)}
    100%{filter:brightness(1);transform:scale(1)}
  }
}

/* ══ A6: Calidad Baja — keyframes con drop-shadow color-tinted, sin
   hue-rotate/saturate/sepia. drop-shadow color-tinted preserva la lectura
   del estado (rojo=hit, azul=freeze, verde=poison/heal, dorado=holy/buff/stun)
   sin la cadena cara de filter chains. ══ */
@keyframes anim-hit-baja{
  0%{filter:brightness(1);transform:translateX(0)}
  20%{filter:brightness(1.6) drop-shadow(0 0 14px #ff3300);transform:translateX(-6px) scale(1.04)}
  50%{filter:brightness(1.3) drop-shadow(0 0 10px #ff4400);transform:translateX(4px)}
  100%{filter:brightness(1);transform:translateX(0)}
}
@keyframes anim-freeze-baja{
  0%{filter:brightness(1);transform:scale(1)}
  35%{filter:brightness(1.4) drop-shadow(0 0 18px #22aaff);transform:scale(1.05)}
  100%{filter:brightness(1);transform:scale(1)}
}
@keyframes anim-poison-baja{
  0%{filter:brightness(1);transform:scale(1)}
  40%{filter:brightness(1.4) drop-shadow(0 0 16px #00ff66);transform:scale(1.04)}
  100%{filter:brightness(1);transform:scale(1)}
}
@keyframes anim-holy-baja{
  0%{filter:brightness(1);transform:scale(1)}
  40%{filter:brightness(1.6) drop-shadow(0 0 20px #ffdd44);transform:scale(1.06)}
  100%{filter:brightness(1);transform:scale(1)}
}
@keyframes anim-heal-baja{
  0%{filter:brightness(1);transform:scale(1)}
  40%{filter:brightness(1.4) drop-shadow(0 0 18px #00ff88);transform:scale(1.05)}
  100%{filter:brightness(1);transform:scale(1)}
}
@keyframes anim-buff-baja{
  0%{filter:brightness(1);transform:scale(1)}
  40%{filter:brightness(1.4) drop-shadow(0 0 16px #ffcc00);transform:scale(1.05)}
  100%{filter:brightness(1);transform:scale(1)}
}
@keyframes anim-stun-baja{
  0%{filter:brightness(1);transform:rotate(0)}
  25%{filter:brightness(1.4) drop-shadow(0 0 12px #ffee00);transform:rotate(-3deg)}
  60%{filter:brightness(1.2) drop-shadow(0 0 8px #ffee00);transform:rotate(2deg)}
  100%{filter:brightness(1);transform:rotate(0)}
}
[data-quality="baja"] .anim-hit   {animation:anim-hit-baja    .6s ease}
[data-quality="baja"] .anim-freeze{animation:anim-freeze-baja .8s ease}
[data-quality="baja"] .anim-poison{animation:anim-poison-baja .7s ease}
[data-quality="baja"] .anim-holy  {animation:anim-holy-baja   .7s ease}
[data-quality="baja"] .anim-heal  {animation:anim-heal-baja   .8s ease}
[data-quality="baja"] .anim-buff  {animation:anim-buff-baja   .85s ease}
[data-quality="baja"] .anim-stun  {animation:anim-stun-baja   .9s ease}

/* ══ Baja: desactivar blur en fondos del escenario (aurora/fog/clouds/glow)
   — blur(N) full-area mantiene composite pesado idle. Sin blur la imagen
   pierde suavidad pero los gradientes ya son blandos. ══ */
[data-quality="baja"] .bs-aurora{filter:none;opacity:.22}
[data-quality="baja"] .bs-fog{filter:none;opacity:.7}
[data-quality="baja"] .bs-cloud{filter:none}
[data-quality="baja"] .bs-ground-glow{filter:none}
[data-quality="baja"] .bs-platform{filter:none;opacity:.5}
[data-quality="baja"] #battle-scene-2v2 .bs-aurora{filter:none;opacity:.22}
[data-quality="baja"] #battle-scene-2v2 .bs-fog{filter:none;opacity:.7}

/* Media: blur reducido en fondos pesados */
[data-quality="media"] .bs-aurora{filter:blur(10px)}
[data-quality="media"] .bs-fog{filter:blur(16px)}
[data-quality="media"] .bs-cloud{filter:blur(12px)}
[data-quality="media"] #battle-scene-2v2 .bs-aurora{filter:blur(10px)}
[data-quality="media"] #battle-scene-2v2 .bs-fog{filter:blur(6px)}

/* Proyectiles y partículas (no-emoji system — pure CSS energy) */
.anim-proj{position:absolute;pointer-events:none;transform:translate(-50%,-50%);z-index:36;will-change:left,top,transform}
.dmg-number{position:absolute;pointer-events:none;font-family:'Cinzel',serif;font-weight:900;text-shadow:0 2px 10px rgba(0,0,0,.9),0 0 25px currentColor,0 0 50px currentColor;transform:translate(-50%,-50%);z-index:38;white-space:nowrap;animation:float-up 1.4s cubic-bezier(.2,.8,.4,1) forwards}
@keyframes float-up{0%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(-5deg)}12%{opacity:1;transform:translate(-50%,-75%) scale(1.5) rotate(3deg)}30%{transform:translate(-50%,-100%) scale(1.1) rotate(-1deg)}60%{opacity:1;transform:translate(-50%,-140%) scale(1) rotate(0)}100%{opacity:0;transform:translate(-50%,-200%) scale(.7)}}

/* Diálogo */
#poke-textbox{background:rgba(6,3,18,.95);border:1.5px solid #4a2a8a;border-radius:8px;padding:.7rem 1rem;margin-top:.4rem;min-height:54px;display:flex;align-items:center;box-shadow:0 2px 12px rgba(0,0,0,.4)}
#poke-msg{font-family:'Cinzel',serif;font-size:clamp(.75rem,.8vw+.35rem,.92rem);color:#e8d8ff;line-height:1.45}
@keyframes msg-appear{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
.msg-anim{animation:msg-appear .22s ease}

/* Panel de habilidades */
#poke-skill-panel{background:rgba(6,3,18,.93);border:1.5px solid #4a2a8a;border-top:none;border-radius:0 0 8px 8px;padding:.5rem .7rem .7rem}
.poke-skill-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.45rem;gap:.4rem}
.btn-surrender{font-size:.65rem;padding:.2rem .5rem;opacity:.7;transition:opacity .2s}.btn-surrender:hover{opacity:1}
.btn-surrender-corner{background:linear-gradient(135deg,#c41e1e,#7a0a0a);color:#fff5d0;border:1px solid #ff5a3c;border-radius:6px;font-size:.8rem;font-weight:600;padding:.35rem .65rem;opacity:.95;box-shadow:0 0 8px rgba(255,60,40,.55),inset 0 1px 0 rgba(255,255,255,.15);text-shadow:0 1px 2px rgba(0,0,0,.6);transition:opacity .2s,background .15s,box-shadow .2s,transform .1s}.btn-surrender-corner:hover{opacity:1;background:linear-gradient(135deg,#ff3838,#a01010);box-shadow:0 0 14px rgba(255,80,50,.9),inset 0 1px 0 rgba(255,255,255,.25);transform:scale(1.05)}
.poke-skill-label{font-family:'Cinzel',serif;font-size:.7rem;color:#9060c0;letter-spacing:.07em}
.poke-skill-grid{display:grid;grid-template-columns:1fr 1fr;gap:.4rem}
.skill-btn{font-family:'Cinzel',serif;background:linear-gradient(135deg,#140a2a,#1e1040);border:1px solid #3a2060;color:#c8a8f0;border-radius:6px;padding:.55rem .45rem;cursor:pointer;transition:all .12s;display:flex;align-items:flex-start;gap:.45rem;text-align:left;min-height:60px}
.skill-btn:hover{background:linear-gradient(135deg,#2a1450,#38208a);border-color:var(--gold);color:var(--gold-l);transform:scale(1.02);box-shadow:0 0 12px rgba(201,168,76,.2)}
.skill-btn:disabled{opacity:.3;cursor:not-allowed;transform:none}
.skill-btn.skill-cd{background:linear-gradient(135deg,#1a1020,#120d20);border-color:#2a1a3a;color:#5a4a6a;cursor:not-allowed}
.skill-btn.skill-cd:hover{transform:none;box-shadow:none;border-color:#2a1a3a;color:#5a4a6a;background:linear-gradient(135deg,#1a1020,#120d20)}
.sk-btn-cd{font-size:.6rem;color:#8855aa;line-height:1.2;margin-top:2px;font-family:'Crimson Pro',serif;font-style:italic}
.skill-btn.skill-skip{background:linear-gradient(135deg,#1a2a1a,#0d1a0d);border-color:#3a6a3a;color:#80c080}
.skill-btn.skill-skip:hover{background:linear-gradient(135deg,#2a3a2a,#1a2a1a);border-color:#60a060;color:#a0e0a0;transform:scale(1.02);box-shadow:0 0 12px rgba(80,160,80,.2)}
.sk-btn-icon{font-size:1.4rem;flex-shrink:0}
.sk-btn-name{font-size:.65rem;line-height:1.25;letter-spacing:.02em;font-weight:700}
.sk-btn-text{display:flex;flex-direction:column;flex:1;min-width:0}
.sk-btn-desc{font-size:.55rem;color:#a080d0;line-height:1.2;margin-top:1px;font-family:'Crimson Pro',serif;letter-spacing:0}
.rival-ready-badge{font-family:'Cinzel',serif;font-size:.65rem;padding:2px 7px;border-radius:3px;background:#0a3020;color:#80ffb0;border:1px solid var(--green)}

/* Panel stun */
#stun-panel{background:rgba(30,14,0,.96);border:1.5px solid var(--amber);border-top:none;border-radius:0 0 8px 8px;padding:.6rem .8rem}
.stun-inner{display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-wrap:wrap}
.stun-icon{font-size:1.5rem}
.stun-msg{font-family:'Cinzel',serif;font-size:.75rem;color:var(--amber-l);margin-top:.15rem}

/* Panel espera */
#poke-waiting-panel{background:rgba(6,3,18,.93);border:1.5px solid #4a2a8a;border-top:none;border-radius:0 0 8px 8px;padding:.6rem .8rem}
.waiting-inner{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.waiting-dots{display:flex;gap:4px}
.poke-wait-dot{display:inline-block;animation:dot-pulse 1.3s ease infinite;font-size:.55rem}
.poke-wait-dot:nth-child(2){animation-delay:.22s}
.poke-wait-dot:nth-child(3){animation-delay:.44s}
@keyframes dot-pulse{0%,60%,100%{opacity:.15}30%{opacity:1}}
.waiting-text{font-family:'Cinzel',serif;font-size:.75rem;color:#9060c0;flex:1}

/* Resultado */
.result-card{text-align:center;padding:1.6rem}
.result-emoji{font-size:2.8rem;margin-bottom:.35rem}
.result-title{font-family:'Cinzel',serif;font-size:1.4rem;color:var(--gold)}
.bs-lp-preview{margin-top:.25rem;font-size:.7rem;font-family:'Cinzel',serif;color:#cfcfa0;letter-spacing:.5px;cursor:help}
.bs-lp-preview .bs-lp-win{color:#7fe07f;margin-right:.5rem}
.bs-lp-preview .bs-lp-loss{color:#ff8888}
.result-lp{margin-top:.5rem;padding:.5rem .7rem;border:1px solid var(--border);border-radius:6px;background:rgba(0,0,0,.25);font-size:.8rem;text-align:left;display:inline-block;min-width:200px}
.result-lp .lp-part{display:flex;justify-content:space-between;gap:.8rem;padding:1px 0}
.result-lp .lp-part-lbl{color:var(--muted);font-size:.75rem}
.result-lp .lp-part-total{margin-top:.3rem;padding-top:.3rem;border-top:1px solid var(--border);font-weight:700;color:var(--gold);justify-content:center}
.result-lp.lp-positive{border-color:#4caf50}
.result-lp.lp-negative{border-color:#cc4060}
.result-rematch{margin-top:.7rem;display:flex;flex-direction:column;align-items:center;gap:.4rem}
.result-rematch .btn{font-family:'Cinzel',serif;letter-spacing:1px}
.rematch-counter{font-size:.7rem;color:var(--muted);margin-left:.3rem}
#rematch-status{display:flex;align-items:center;gap:.6rem;font-size:.78rem;color:var(--muted);padding:.3rem .6rem;border:1px solid var(--border);border-radius:5px;background:rgba(0,0,0,.25)}
.rematch-timer{color:#ffd86b;font-weight:600}

/* Aviso de fusión destructiva */
#fusion-warn-overlay{position:fixed;inset:0;background:rgba(0,0,0,.72);z-index:3600;display:flex;align-items:center;justify-content:center;padding:1rem}
.fusion-warn-modal{background:linear-gradient(180deg,#1a1208,#120a04);border:2px solid #cc8844;border-radius:10px;max-width:440px;width:100%;max-height:90vh;overflow-y:auto;padding:1.2rem;box-shadow:0 0 20px rgba(204,136,68,.4)}
.fusion-warn-title{font-family:'Cinzel',serif;color:#ffb060;font-size:1.1rem;text-align:center;margin-bottom:.3rem;letter-spacing:1px}
.fusion-warn-sub{text-align:center;font-size:.82rem;color:var(--muted);margin-bottom:.8rem}
.fus-warn-section{margin-bottom:.7rem}
.fus-warn-label{font-family:'Cinzel',serif;font-size:.78rem;color:var(--gold);margin-bottom:.25rem;letter-spacing:.5px}
.fus-warn-list{list-style:none;padding:0;margin:0}
.fus-warn-list li{padding:2px 0;font-size:.85rem}
.fus-warn-lost{color:#ff6666;font-weight:600}
.fus-warn-risk{color:#ffaa44}
.fus-warn-kept{color:#66cc77}
.fus-warn-reason{color:var(--muted);font-size:.75rem;margin-left:.4rem}
.fusion-warn-actions{display:flex;gap:.6rem;margin-top:.9rem}
.fusion-warn-actions .btn{flex:1}

/* ── Mercader unificado ── */
.mercader-card{background:linear-gradient(160deg,#130e04 0%,#1a1208 60%,#0e0a04 100%);border:1px solid #c8972233}
.mercader-intro{text-align:center;padding:.6rem 0 .2rem}
.merc-runes{color:#c89722;opacity:.45;letter-spacing:.5rem;font-size:.65rem;margin-bottom:.5rem}
.merc-avatar{font-size:2.6rem;filter:drop-shadow(0 0 10px #f1c40f66);margin-bottom:.35rem}
.merc-title{font-family:'Cinzel',serif;font-size:1.05rem;color:var(--gold);letter-spacing:.18rem;margin-bottom:.18rem}
.merc-tagline{font-size:.7rem;color:var(--muted);letter-spacing:.05rem;margin-bottom:.55rem}
.merc-desc{font-size:.74rem;color:var(--muted);line-height:1.55;margin-bottom:.55rem;max-width:240px;margin-left:auto;margin-right:auto}
.merc-count{font-size:.8rem;color:#f1c40fbb;margin-bottom:.75rem}
.merc-btn{border-radius:8px;font-size:.87rem;letter-spacing:.03rem}
.merc-tab{flex:1;background:none;border:none;border-bottom:2px solid transparent;padding:.6rem .5rem;font-size:.83rem;cursor:pointer;color:var(--muted);font-family:inherit;transition:color .15s,border-color .15s}
.merc-tab:hover{color:var(--text)}
.merc-tab-active{color:var(--gold);border-bottom-color:var(--gold)}

/* Log */
#battle-log{max-height:140px;overflow-y:auto;font-size:.8rem;line-height:1.6}
.log-line{padding:2px 0;border-bottom:1px solid var(--border);color:var(--muted)}
.log-line:first-child{color:var(--text)}
.log-win{color:var(--gold)!important}
.log-disc{color:var(--red-l)!important}

/* ══════════════════════════════════════════
   ARCAFIGHT
══════════════════════════════════════════ */
.login-tabs{display:flex;gap:0;margin-bottom:1rem;border-bottom:1px solid var(--border)}
.login-tab{flex:1;font-family:'Cinzel',serif;font-size:.82rem;padding:.5rem;background:none;border:none;color:var(--muted);cursor:pointer;transition:all .2s;border-bottom:2px solid transparent;text-align:center}
.login-tab.active{color:var(--gold);border-bottom-color:var(--gold)}.login-tab:hover{color:var(--gold-l)}
.verify-box{text-align:center;padding:.5rem 0}.verify-icon{font-size:2.5rem;margin-bottom:.5rem}
.verify-title{font-family:'Cinzel',serif;font-size:1rem;color:var(--gold);margin-bottom:.4rem}
.verify-text{font-size:.82rem;color:var(--muted);margin-bottom:.6rem;line-height:1.4}
.verify-user{font-size:.82rem;color:var(--text);margin-bottom:.8rem}
.verify-hint{font-size:.7rem;color:var(--dim);margin-top:.6rem;font-style:italic}
/* ══════════════════════════════════════════
   DAILY STREAK — panel premium
══════════════════════════════════════════ */
.daily-streak-panel{
  position:relative;
  padding:.8rem .7rem .7rem;
  border-radius:12px;
  background:
    radial-gradient(circle at 20% 0%, rgba(255,180,60,.12), transparent 60%),
    radial-gradient(circle at 80% 100%, rgba(255,69,0,.10), transparent 60%),
    linear-gradient(160deg, rgba(30,22,12,.55), rgba(15,10,6,.75));
  border:1px solid rgba(201,168,76,.25);
  box-shadow:inset 0 0 24px rgba(201,168,76,.06);
  overflow:hidden;
}
.daily-streak-panel::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(120deg, transparent 48%, rgba(255,215,100,.05) 50%, transparent 52%),
    linear-gradient(-120deg, transparent 48%, rgba(255,255,255,.03) 50%, transparent 52%);
  background-size:200% 200%;
  animation:streak-shimmer 8s linear infinite;
}
@keyframes streak-shimmer{0%{background-position:0 0,0 0}100%{background-position:200% 0,-200% 0}}
.daily-streak-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.6rem;position:relative;z-index:1}
.daily-streak-title{font-family:'Cinzel',serif;font-size:.95rem;color:var(--gold);letter-spacing:.04em;text-shadow:0 0 8px rgba(201,168,76,.3)}
.daily-streak-status{font-size:.72rem;padding:.2rem .55rem;border-radius:999px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.daily-streak-status.claimed{color:#7be39a;background:rgba(46,204,113,.14);border:1px solid rgba(46,204,113,.4)}
.daily-streak-status.available{color:var(--gold-l);background:rgba(201,168,76,.20);border:1px solid var(--gold);animation:pulse-glow 1.5s ease-in-out infinite}
@keyframes pulse-glow{0%,100%{box-shadow:0 0 4px rgba(201,168,76,.3)}50%{box-shadow:0 0 14px rgba(201,168,76,.7)}}

.daily-streak-count{
  text-align:center;margin-bottom:.7rem;position:relative;z-index:1;
  display:flex;align-items:baseline;justify-content:center;gap:.35rem;flex-wrap:wrap;
}
.streak-number{
  font-family:'Cinzel',serif;font-size:1.9rem;font-weight:900;
  background:linear-gradient(180deg,#ffe28a 0%,var(--gold) 55%,#a66e1a 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  text-shadow:0 2px 10px rgba(201,168,76,.35);
  filter:drop-shadow(0 0 8px rgba(255,180,60,.4));
}
.streak-label{font-size:.8rem;color:var(--muted);letter-spacing:.05em}
.streak-cycle{margin-left:.35rem;font-size:.72rem;color:var(--dim);background:rgba(255,255,255,.04);padding:.1rem .5rem;border-radius:999px;border:1px solid rgba(255,255,255,.07)}

.daily-streak-legend{
  display:flex;justify-content:center;gap:.7rem;font-size:.7rem;color:var(--muted);
  margin-bottom:.6rem;flex-wrap:wrap;position:relative;z-index:1;
}
.daily-streak-legend span{
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06);
  padding:.18rem .55rem;border-radius:999px;
}

/* ── Grid 7x4 ── */
.daily-streak-grid{
  display:grid;grid-template-columns:repeat(7,1fr);gap:.35rem;
  margin-bottom:.65rem;max-width:290px;margin-left:auto;margin-right:auto;
  position:relative;z-index:1;
}
.streak-dot{
  aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;
  font-size:.72rem;border:1px solid var(--border);border-radius:8px;
  color:var(--dim);
  background:linear-gradient(160deg,rgba(255,255,255,.03),rgba(0,0,0,.25));
  transition:all .28s cubic-bezier(.2,.9,.3,1.4);
  position:relative;user-select:none;
}
.streak-dot::after{
  content:'';position:absolute;inset:0;border-radius:7px;
  background:radial-gradient(circle at 30% 20%, rgba(255,255,255,.14), transparent 55%);
  pointer-events:none;opacity:.55;
}
.streak-dot.filled{
  border-color:var(--gold);color:var(--gold-l);
  background:linear-gradient(160deg,rgba(201,168,76,.28),rgba(201,168,76,.08));
  box-shadow:0 0 10px rgba(201,168,76,.3), inset 0 0 8px rgba(201,168,76,.12);
}
.streak-dot.exagerao{
  border-color:#ff6b2b;color:#ff9158;
  background:linear-gradient(160deg,rgba(255,107,43,.15),rgba(255,69,0,.04));
  font-size:1rem;
}
.streak-dot.exagerao.filled{
  color:#ffdc9a;
  background:linear-gradient(160deg,rgba(255,107,43,.5),rgba(255,69,0,.2));
  box-shadow:0 0 14px rgba(255,107,43,.55), inset 0 0 10px rgba(255,180,60,.3);
}
.streak-dot.definitivo{
  border-color:#ffd700;color:#ffd700;font-size:1.1rem;
  background:linear-gradient(160deg,rgba(255,215,0,.20),rgba(184,134,11,.05));
  grid-column:span 1;
}
.streak-dot.definitivo.filled{
  color:#fff;
  background:linear-gradient(160deg,rgba(255,215,0,.65),rgba(184,134,11,.3));
  box-shadow:0 0 22px rgba(255,215,0,.75), inset 0 0 14px rgba(255,255,255,.25);
  animation:crown-shine 2.5s ease-in-out infinite;
}
@keyframes crown-shine{0%,100%{box-shadow:0 0 18px rgba(255,215,0,.55), inset 0 0 10px rgba(255,255,255,.2)}50%{box-shadow:0 0 28px rgba(255,215,0,.95), inset 0 0 18px rgba(255,255,255,.4)}}
.streak-dot.today{
  outline:2px solid var(--gold);outline-offset:2px;
  animation:today-pop 1.3s ease-in-out infinite;transform:scale(1.06);
  z-index:2;
}
@keyframes today-pop{0%,100%{box-shadow:0 0 8px rgba(201,168,76,.5)}50%{box-shadow:0 0 20px rgba(255,215,100,.9)}}
@media (max-width:480px){
  .daily-streak-grid{max-width:100%;gap:.28rem}
  .streak-dot{font-size:.65rem;border-radius:7px}
}

.daily-streak-bar{
  position:relative;z-index:1;
  height:8px;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.05);
  border-radius:999px;overflow:hidden;margin-bottom:.45rem;
}
.streak-bar-fill{
  height:100%;
  background:linear-gradient(90deg,#b87333 0%,var(--gold) 40%,#ff4500 80%,#ffd700 100%);
  background-size:200% 100%;
  border-radius:999px;transition:width .6s cubic-bezier(.2,.9,.3,1);
  animation:bar-flow 4s linear infinite;
  box-shadow:0 0 8px rgba(255,180,60,.4);
}
@keyframes bar-flow{0%{background-position:0 0}100%{background-position:200% 0}}
.daily-streak-remaining{
  text-align:center;font-size:.78rem;color:var(--muted);
  position:relative;z-index:1;padding-top:.15rem;
}

/* Títulos / Logros */
.title-card{display:flex;gap:.7rem;align-items:flex-start;padding:.7rem;border-radius:10px;border:1px solid var(--rc,#444);background:linear-gradient(135deg,rgba(20,16,30,.95),rgba(10,10,15,.98));margin-bottom:.5rem;position:relative;transition:transform .15s,box-shadow .15s}
.title-card.owned{box-shadow:0 0 10px color-mix(in srgb,var(--rc,#888) 25%,transparent)}
.title-card.owned:hover{transform:translateY(-1px);box-shadow:0 0 18px color-mix(in srgb,var(--rc,#888) 45%,transparent)}
.title-card.locked{opacity:.55;filter:grayscale(.8)}
.title-card.equipped{outline:2px solid var(--gold);outline-offset:2px}
.title-card .title-icon{font-size:1.8rem;width:40px;text-align:center}
.title-card .title-body{flex:1;min-width:0}
.title-card .title-name{font-family:'Cinzel',serif;font-size:.95rem;color:var(--text);margin-bottom:.15rem}
.title-card .title-rarity{font-size:.65rem;letter-spacing:.05em;font-weight:700;margin-bottom:.25rem}
.title-card .title-desc{font-size:.75rem;color:var(--muted);line-height:1.3}
.title-card .title-action{align-self:center}
.title-card .title-lock{position:absolute;top:.4rem;right:.5rem;font-size:.9rem;opacity:.8}

/* Badge del título equipado junto al nombre en combate */
.equipped-title-badge{display:inline-block;font-size:.65em;color:var(--gold-l);margin-left:.25em;vertical-align:middle;opacity:.9}

/* Friends — tarjetas mejoradas con estado online */
.friends-header{display:flex;justify-content:space-between;align-items:center;padding:.3rem .1rem .6rem;border-bottom:1px solid var(--border);margin-bottom:.6rem;font-size:.78rem}
.friends-count{color:var(--gold-l);font-family:'Cinzel',serif}
.friends-online{color:#4caf50;display:inline-flex;align-items:center;gap:.35rem}
.online-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#4caf50;box-shadow:0 0 6px #4caf50;animation:pulse-online 2s ease-in-out infinite}
@keyframes pulse-online{0%,100%{opacity:1}50%{opacity:.55}}
.friend-card{display:flex;gap:.65rem;align-items:center;padding:.55rem .7rem;margin-bottom:.4rem;border-radius:10px;border:1px solid var(--border);background:linear-gradient(135deg,rgba(20,16,30,.9),rgba(10,10,15,.95));transition:transform .15s,box-shadow .15s,border-color .2s}
.friend-card.is-online{border-color:rgba(76,175,80,.5);box-shadow:0 0 12px rgba(76,175,80,.15)}
.friend-card.is-online:hover{transform:translateY(-1px);box-shadow:0 0 18px rgba(76,175,80,.3)}
.friend-card.is-offline{opacity:.78;filter:grayscale(.25)}
.friend-avatar{position:relative;font-size:1.6rem;width:42px;height:42px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(0,0,0,.35);flex-shrink:0}
.friend-status-dot{position:absolute;bottom:-1px;right:-1px;width:12px;height:12px;border-radius:50%;background:#4caf50;border:2px solid #15101a;box-shadow:0 0 6px #4caf50}
.friend-info{flex:1;min-width:0}
.friend-name{font-family:'Cinzel',serif;font-size:.95rem;color:var(--text);margin-bottom:.1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.friend-meta{font-size:.72rem;color:var(--muted);display:flex;align-items:center;gap:.35rem;flex-wrap:wrap}
.online-badge{color:#4caf50;display:inline-flex;align-items:center;gap:.3rem;font-weight:600}
.offline-badge{color:var(--dim);font-weight:500}
.friend-actions{display:flex;gap:.3rem;flex-shrink:0}
.friend-actions .btn{padding:.3rem .55rem;font-size:.8rem}
.friend-actions .btn:disabled{opacity:.5;cursor:not-allowed}

/* Lobby 2v2 — slots más bonitos */
.lobby-slot{display:flex;align-items:center;gap:.6rem;padding:.55rem .7rem;margin-bottom:.4rem;border-radius:10px;border:1px solid var(--border);background:linear-gradient(135deg,rgba(20,16,30,.9),rgba(10,10,15,.95));transition:border-color .2s,box-shadow .2s}
.lobby-slot.filled{border-color:rgba(201,168,76,.5);box-shadow:0 0 10px rgba(201,168,76,.15)}
.lobby-slot.filled.me{border-color:var(--accent);box-shadow:0 0 14px color-mix(in srgb,var(--accent) 35%,transparent)}
.lobby-slot.empty{border-style:dashed;opacity:.7}
.lobby-slot-avatar{position:relative;font-size:1.5rem;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(0,0,0,.35);flex-shrink:0}
.lobby-slot-avatar.empty{color:var(--dim);font-weight:700;border:1px dashed var(--border);background:transparent}
.lobby-crown{position:absolute;top:-8px;right:-6px;font-size:.8rem;filter:drop-shadow(0 0 4px #ffd70088)}
.lobby-slot-body{flex:1;min-width:0}
.lobby-slot-name{font-family:'Cinzel',serif;font-size:.9rem;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lobby-slot-meta{font-size:.7rem;color:var(--muted)}
.lobby-me{font-size:.7rem;color:var(--muted);margin-left:.2rem}
.lobby-invite-btn{display:inline-flex;align-items:center;gap:.25rem}
.lobby-invite-btn.is-online{border-color:rgba(76,175,80,.5);box-shadow:0 0 8px rgba(76,175,80,.2)}

.lootbox-item{
  position:relative;display:flex;align-items:center;gap:.9rem;
  padding:.85rem 1rem;margin-bottom:.6rem;border-radius:12px;
  border:2px solid var(--tier,#888);
  background:
    radial-gradient(ellipse at 20% 0%, color-mix(in srgb, var(--tier,#888) 32%, transparent) 0%, transparent 60%),
    linear-gradient(135deg, rgba(20,16,30,.95) 0%, rgba(10,10,15,.98) 100%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 0 18px color-mix(in srgb, var(--tier,#888) 35%, transparent),
    0 4px 14px rgba(0,0,0,.5);
  overflow:hidden;
  transition:transform .18s ease, box-shadow .25s ease, border-color .2s;
  cursor:pointer;
}
.lootbox-item::before{
  /* shimmer diagonal que recorre el cofre */
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg, transparent 35%, color-mix(in srgb, var(--tier,#fff) 55%, transparent) 50%, transparent 65%);
  transform:translateX(-120%);
  animation:lootboxShimmer 3.2s ease-in-out infinite;
  mix-blend-mode:screen;opacity:.55;
}
.lootbox-item::after{
  /* halo pulsante detrás */
  content:'';position:absolute;left:.6rem;top:50%;width:48px;height:48px;
  transform:translateY(-50%);border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb, var(--tier,#fff) 70%, transparent) 0%, transparent 70%);
  filter:blur(8px);pointer-events:none;
  animation:lootboxPulse 1.8s ease-in-out infinite;
}
.lootbox-item:hover{
  transform:translateY(-2px) scale(1.015);
  border-color:color-mix(in srgb, var(--tier,#fff) 85%, #fff);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08) inset,
    0 0 30px color-mix(in srgb, var(--tier,#fff) 55%, transparent),
    0 6px 20px rgba(0,0,0,.6);
}
.lootbox-icon{
  position:relative;z-index:1;font-size:2.4rem;line-height:1;
  filter:drop-shadow(0 0 8px var(--tier,#fff)) drop-shadow(0 0 14px color-mix(in srgb, var(--tier,#fff) 60%, transparent));
  animation:lootboxBob 2.4s ease-in-out infinite;
}
.lootbox-item:hover .lootbox-icon{animation:lootboxShake .45s ease-in-out infinite}
.lootbox-tier{
  position:relative;z-index:1;flex:1;
  font-family:'Cinzel',serif;font-size:.95rem;font-weight:700;
  letter-spacing:.04em;text-shadow:0 0 10px color-mix(in srgb, var(--tier,#fff) 70%, transparent), 0 1px 2px rgba(0,0,0,.8);
}
.lootbox-item .btn{position:relative;z-index:1}
@keyframes lootboxShimmer{
  0%{transform:translateX(-120%)}
  55%,100%{transform:translateX(220%)}
}
@keyframes lootboxPulse{
  0%,100%{opacity:.55;transform:translateY(-50%) scale(.95)}
  50%{opacity:.95;transform:translateY(-50%) scale(1.15)}
}
@keyframes lootboxBob{
  0%,100%{transform:translateY(0) rotate(-3deg)}
  50%{transform:translateY(-3px) rotate(3deg)}
}
@keyframes lootboxShake{
  0%,100%{transform:translateY(-1px) rotate(-8deg)}
  25%{transform:translateY(-3px) rotate(6deg)}
  50%{transform:translateY(-1px) rotate(-6deg)}
  75%{transform:translateY(-3px) rotate(8deg)}
}
.lootbox-shop{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.7rem;margin-top:.5rem}

/* ── Chest cards ── */
.chest-card{
  position:relative;display:flex;flex-direction:column;align-items:center;
  padding:1rem .6rem .8rem;border-radius:12px;cursor:pointer;
  border:1px solid rgba(255,255,255,.08);
  transition:transform .15s ease,box-shadow .2s ease,border-color .2s ease;
  overflow:hidden;
}
.chest-card::before{content:'';position:absolute;inset:0;opacity:.12;border-radius:12px;pointer-events:none;z-index:0}
.chest-card>*{position:relative;z-index:1}
.chest-card:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.2)}
.chest-card:active{transform:translateY(0)}

.chest-fuerte{background:linear-gradient(160deg,#1a1508 0%,#2a1f0a 100%);box-shadow:0 4px 16px rgba(205,133,63,.15)}
.chest-fuerte::before{background:linear-gradient(160deg,#cd853f,#8b6914)}
.chest-fuerte:hover{box-shadow:0 6px 24px rgba(205,133,63,.35);border-color:#cd853f55}

.chest-exagerao{background:linear-gradient(160deg,#1a0800 0%,#2a1000 100%);box-shadow:0 4px 16px rgba(255,69,0,.15)}
.chest-exagerao::before{background:linear-gradient(160deg,#ff4500,#ff6a00)}
.chest-exagerao:hover{box-shadow:0 6px 24px rgba(255,69,0,.35);border-color:#ff450055}

.chest-excesivo{background:linear-gradient(160deg,#180028 0%,#2a0040 100%);box-shadow:0 4px 16px rgba(224,64,251,.15)}
.chest-excesivo::before{background:linear-gradient(160deg,#e040fb,#7c4dff)}
.chest-excesivo:hover{box-shadow:0 6px 24px rgba(224,64,251,.4);border-color:#e040fb55}

.chest-card-icon{font-size:2.2rem;margin-bottom:.3rem;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}
.chest-card-name{font-family:'Cinzel',serif;font-size:.85rem;font-weight:700;letter-spacing:.08em;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.chest-card-odds{font-size:.62rem;color:rgba(255,255,255,.5);text-align:center;line-height:1.3;margin:.35rem 0}
.chest-card-price{
  font-family:'Cinzel',serif;font-size:.9rem;font-weight:700;
  padding:.3rem .8rem;border-radius:20px;margin-top:.2rem;
  background:linear-gradient(135deg,rgba(201,168,76,.2),rgba(201,168,76,.08));
  border:1px solid rgba(201,168,76,.3);color:var(--gold-l);
}
.chest-card-limit{
  position:absolute;top:.4rem;right:.4rem;font-size:.6rem;font-weight:700;
  padding:1px 6px;border-radius:8px;
  background:rgba(224,64,251,.25);color:#e040fb;border:1px solid rgba(224,64,251,.3);
}
/* ── Cofre Masivo ── */
.chest-masivo{background:linear-gradient(160deg,#0f0800 0%,#1a1400 100%);box-shadow:0 4px 16px rgba(255,215,0,.12);cursor:default}
.chest-masivo::before{background:linear-gradient(160deg,#ffd700,#b8860b)}
.chest-masivo-unlocked{cursor:pointer;border-color:#ffd70066!important;animation:masivo-pulse 2.2s ease-in-out infinite}
.chest-masivo-unlocked::before{opacity:.2!important}
.chest-masivo-unlocked:hover{box-shadow:0 6px 28px rgba(255,215,0,.5);border-color:#ffd700aa!important}
.chest-masivo-locked{opacity:.9}
@keyframes masivo-pulse{0%,100%{box-shadow:0 4px 16px rgba(255,215,0,.15)}50%{box-shadow:0 0 32px rgba(255,215,0,.55)}}
.chest-masivo-progress-label{font-size:.68rem;color:rgba(255,255,255,.55);text-align:center;margin-top:.3rem;font-variant-numeric:tabular-nums}
.chest-masivo-bar{height:5px;background:rgba(255,255,255,.1);border-radius:3px;overflow:hidden;margin-top:.35rem}
.chest-masivo-bar-fill{height:100%;background:linear-gradient(90deg,#9b59b6,#f1c40f,#ffd700);border-radius:3px;transition:width .6s ease}
.chest-masivo-ready{font-family:'Cinzel',serif;font-size:.76rem;color:#ffd700;text-align:center;margin-top:.25rem;letter-spacing:.06em;animation:masivo-blink 1.3s ease-in-out infinite}
@keyframes masivo-blink{0%,100%{opacity:1}50%{opacity:.5}}

.avatar-picker-grid{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:.4rem}
.avatar-opt{width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;border:1px solid var(--border);border-radius:6px;cursor:pointer;background:var(--bg);transition:all .15s}
.avatar-opt:hover{border-color:var(--gold);background:var(--bg-card2);transform:scale(1.1)}
.avatar-opt-active{border-color:var(--gold);background:var(--gold-d);box-shadow:0 0 8px rgba(201,168,76,.4);transform:scale(1.1)}
.avatar-custom-row{margin-top:.5rem;display:flex;flex-direction:column;gap:.3rem}
.avatar-custom-label{font-size:.8rem;color:var(--muted);opacity:.85}
.avatar-custom-controls{display:flex;align-items:center;gap:.4rem}
.avatar-custom-input{flex:1;min-width:0;padding:.35rem .5rem;font-size:1.1rem;background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:6px;outline:none;text-align:center}
.avatar-custom-input:focus{border-color:var(--gold)}
.avatar-custom-input.invalid{border-color:#c44}
.avatar-custom-preview{width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;border:1px dashed var(--border);border-radius:6px;background:var(--bg-card2)}
.avatar-custom-error{font-size:.75rem;color:#e66;min-height:1em}
.league-badge{font-family:'Cinzel',serif;font-size:.75rem;padding:2px 8px;border-radius:4px;border:1px solid;display:inline-block;margin-bottom:.3rem}
.nav-dropdown{position:relative;display:inline-block}
.nav-dropdown-content{background:var(--bg-card);border:1px solid var(--border-g);border-radius:8px;padding:1rem;width:340px;max-height:70vh;overflow-y:auto;z-index:9100;box-shadow:0 8px 32px rgba(0,0,0,.7);animation:slide-down .2s ease}
.help-section{margin-bottom:.8rem;padding-bottom:.6rem;border-bottom:1px solid var(--border)}
.help-section:last-child{border-bottom:none}.help-section strong{font-family:'Cinzel',serif;font-size:.82rem;color:var(--gold);display:block;margin-bottom:.3rem}
.help-section p{font-size:.78rem;color:var(--muted);margin:2px 0;line-height:1.4}
.enemy-skill-row{display:flex;align-items:flex-start;gap:.5rem;padding:.4rem .5rem;border-bottom:1px solid var(--border);font-size:.8rem}
.enemy-skill-row:last-child{border-bottom:none}
#enemy-skills-card{background:var(--bg-card);border:1px solid #2a1a4a}

/* ══ CHEST OPENING ANIMATION ══ */
#chest-overlay{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.92);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;animation:chest-fade-in .3s ease;overflow:hidden}
#chest-overlay .overlay-bg-glow{position:absolute;inset:0;opacity:0;transition:opacity 1s;pointer-events:none}
@keyframes chest-fade-in{from{opacity:0}to{opacity:1}}
@keyframes chest-screen-shake{0%,100%{transform:translate(0)}10%{transform:translate(-3px,-2px)}20%{transform:translate(4px,1px)}30%{transform:translate(-2px,3px)}40%{transform:translate(3px,-1px)}50%{transform:translate(-1px,2px)}60%{transform:translate(2px,-3px)}70%{transform:translate(-4px,1px)}80%{transform:translate(1px,-2px)}90%{transform:translate(-2px,3px)}}

/* ── Roulette CS:GO style ── */
.chest-roulette-wrap{position:relative;width:min(85vw,500px);display:flex;flex-direction:column;align-items:center}
.chest-roulette-viewport{width:100%;height:90px;overflow:hidden;position:relative;border-radius:10px;border:2px solid #3a2a6a;background:rgba(10,5,20,.85);box-shadow:0 0 20px rgba(58,42,106,.4),inset 0 0 30px rgba(0,0,0,.5);transition:box-shadow .3s,border-color .3s}
.chest-roulette-viewport.spinning{border-color:#5a4a8a;box-shadow:0 0 30px rgba(90,74,138,.6),inset 0 0 30px rgba(0,0,0,.5)}
.chest-roulette-viewport.landing{border-color:#ffd700;box-shadow:0 0 40px rgba(255,215,0,.5),inset 0 0 30px rgba(0,0,0,.3);transition:box-shadow 1.5s,border-color 1.5s}
.chest-roulette-viewport::after{content:'';position:absolute;left:50%;top:0;bottom:0;width:2px;background:rgba(255,215,0,.5);transform:translateX(-50%);z-index:4;pointer-events:none;box-shadow:0 0 8px rgba(255,215,0,.3)}
.chest-roulette-viewport::before{content:'';position:absolute;left:50%;top:50%;width:60px;height:100%;transform:translate(-50%,-50%);background:linear-gradient(90deg,transparent,rgba(255,215,0,.06),transparent);z-index:3;pointer-events:none}
.chest-roulette-strip{display:flex;gap:4px;padding:8px 4px;will-change:transform;height:100%;align-items:center}
.chest-roulette-item{flex-shrink:0;width:82px;height:70px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:1.6rem;border:2px solid rgba(255,255,255,.15);transition:border-color .3s,box-shadow .3s,transform .3s}
.chest-roulette-item.rarity-common{background:linear-gradient(135deg,#888,#555);border-color:rgba(170,170,170,.3)}
.chest-roulette-item.rarity-rare{background:linear-gradient(135deg,#3498db,#1a5276);border-color:rgba(52,152,219,.4)}
.chest-roulette-item.rarity-epic{background:linear-gradient(135deg,#9b59b6,#6c3483);border-color:rgba(155,89,182,.5)}
.chest-roulette-item.rarity-legendary{background:linear-gradient(135deg,#f1c40f,#b7950b);border-color:rgba(241,196,15,.6);box-shadow:0 0 18px rgba(241,196,15,.4)}
.chest-roulette-item.rarity-mythic{background:linear-gradient(135deg,#ff44ff,#660066);border-color:rgba(255,68,255,.65);box-shadow:0 0 22px rgba(255,68,255,.5)}
.chest-roulette-item.rarity-divine{background:linear-gradient(135deg,#fffacc,#c9a84c);border-color:rgba(255,245,214,.7);box-shadow:0 0 26px rgba(255,245,214,.55)}
/* Fusion roulette outcomes */
.chest-roulette-item.fuse-outcome-destroyed{background:linear-gradient(135deg,#e74c3c,#922b21);border-color:rgba(231,76,60,.5);box-shadow:inset 0 0 15px rgba(0,0,0,.3)}
.chest-roulette-item.fuse-outcome-normal{background:linear-gradient(135deg,#2ecc71,#1a9c54);border-color:rgba(46,204,113,.5)}
.chest-roulette-item.fuse-outcome-perfect{background:linear-gradient(135deg,#f1c40f,#d4ac0d);border-color:rgba(241,196,15,.6);box-shadow:0 0 18px rgba(241,196,15,.4)}
.chest-roulette-item.winner-highlight{transform:scale(1.08);border-color:#ffd700!important;box-shadow:0 0 25px rgba(255,215,0,.7)!important;z-index:2}
/* Indicadores centrales (flechas arriba y abajo) */
.chest-roulette-indicator,.chest-roulette-indicator-bottom{width:0;height:0;z-index:5;align-self:center;transition:filter .3s}
.chest-roulette-indicator{border-left:12px solid transparent;border-right:12px solid transparent;border-top:16px solid #ffd700;margin-bottom:4px;filter:drop-shadow(0 0 8px rgba(255,215,0,.6))}
.chest-roulette-indicator-bottom{border-left:12px solid transparent;border-right:12px solid transparent;border-bottom:16px solid #ffd700;margin-top:4px;filter:drop-shadow(0 0 8px rgba(255,215,0,.6))}
.chest-roulette-indicator.pulse,.chest-roulette-indicator-bottom.pulse{animation:indicator-pulse .4s ease 3}
@keyframes indicator-pulse{0%,100%{filter:drop-shadow(0 0 8px rgba(255,215,0,.6))}50%{filter:drop-shadow(0 0 20px rgba(255,215,0,1))}}

/* ── Old scene (keep for compat) ── */
.chest-scene{position:relative;width:300px;height:350px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.chest-emoji{font-size:4rem;transition:all .5s cubic-bezier(.3,1.5,.5,1);z-index:2;position:relative}
.chest-glow{position:absolute;width:100px;height:100px;border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%);opacity:0;transition:all .6s;z-index:1}
.chest-glow-active{opacity:1;background:radial-gradient(circle,rgba(201,168,76,.6),transparent 70%);width:200px;height:200px;animation:chest-pulse 1s ease infinite}
.chest-glow-burst{opacity:1;background:radial-gradient(circle,rgba(255,255,200,.8),transparent 60%);width:400px;height:400px;animation:none;transition:all .4s}
@keyframes chest-pulse{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.6}50%{transform:translate(-50%,-50%) scale(1.2);opacity:1}}
.chest-shake{animation:chest-shake-anim .6s ease infinite}
@keyframes chest-shake-anim{0%,100%{transform:rotate(0)}15%{transform:rotate(-8deg) scale(1.05)}30%{transform:rotate(8deg) scale(1.1)}45%{transform:rotate(-10deg) scale(1.15)}60%{transform:rotate(10deg) scale(1.1)}75%{transform:rotate(-5deg) scale(1.05)}}
.chest-particles{position:absolute;inset:0;pointer-events:none;z-index:3}
.chest-result{position:relative;z-index:4;text-align:center;opacity:0}
@keyframes chest-reveal{0%{opacity:0;transform:translateY(30px) scale(.5)}60%{opacity:1;transform:translateY(-8px) scale(1.05)}100%{opacity:1;transform:translateY(0) scale(1)}}
.chest-result-emoji{font-size:5rem;margin-bottom:.5rem;animation:chest-result-float 2.5s ease-in-out infinite}
@keyframes chest-result-float{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-10px) scale(1.05)}}
@keyframes chest-loading-pulse{0%,100%{opacity:.4}50%{opacity:1}}
.chest-result-name{font-family:'Cinzel',serif;font-size:1.3rem;margin-bottom:.2rem}
.chest-result-rarity{font-family:'Cinzel',serif;font-size:.85rem;margin-bottom:.5rem;opacity:.8}
.chest-result-desc{font-size:.8rem;color:var(--muted);max-width:260px;margin:0 auto;line-height:1.4}

/* ══ MATCH TIMER (global 3-min countdown) ══ */
.match-timer-wrap{display:flex;align-items:center;gap:.35rem;padding:.2rem .6rem;background:rgba(10,5,20,.7);border:1px solid #3a2a6a;border-radius:5px}
.match-timer-label{font-size:.62rem;color:var(--muted);font-family:'Cinzel',serif}
.match-timer-val{font-family:'Cinzel',serif;font-size:1rem;font-weight:700;color:#b090e8;min-width:3ch;text-align:center;transition:color .3s}

/* ══ LOADOUT REDESIGN — solo equipadas ══ */
.loadout-equipped-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.45rem;margin-top:.4rem}
.loadout-equipped-card{position:relative;background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:.45rem .55rem;display:flex;align-items:center;gap:.4rem;transition:border-color .15s}

/* Numerito de slot 1-4 sobre cada tarjeta. Clicable solo en el loadout en
   uso — cicla la posición en el array (slot en combate). */
.loadout-slot-badge{
  position:absolute;top:6px;right:6px;
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:50%;
  background:linear-gradient(135deg,#1c1733,#0e0b1e);
  border:1.5px solid var(--gold-d);color:var(--gold-l);
  font-family:'Cinzel',serif;font-size:.78rem;font-weight:700;line-height:1;
  cursor:pointer;padding:0;
  box-shadow:0 0 6px rgba(201,168,76,.35),inset 0 1px 0 rgba(255,255,255,.08);
  transition:transform .12s,background .15s,border-color .15s,box-shadow .15s;
  z-index:2;
}
.loadout-slot-badge:hover{
  background:linear-gradient(135deg,#2b2050,#16112b);
  border-color:var(--gold);color:#fff;
  box-shadow:0 0 12px rgba(240,208,128,.6),inset 0 1px 0 rgba(255,255,255,.12);
}
.loadout-slot-badge:active{transform:scale(.9)}
.loadout-slot-badge:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.loadout-slot-badge.loadout-slot-badge-locked{
  cursor:not-allowed;opacity:.55;
  border-color:var(--border);color:var(--muted);
  background:linear-gradient(135deg,#171425,#0c0a18);
  box-shadow:none;
}
.loadout-slot-badge.loadout-slot-badge-locked:hover{
  background:linear-gradient(135deg,#171425,#0c0a18);
  border-color:var(--border);color:var(--muted);box-shadow:none;
}
/* Dejar hueco al badge en la parte derecha del nombre/stats */
.loadout-equipped-card .loadout-sk-info{padding-right:22px}
.loadout-sk-info{flex:1;min-width:0}
.loadout-sk-rarity{font-size:.62rem;color:var(--muted);display:block}
.loadout-empty-msg{color:var(--muted);font-style:italic;font-size:.82rem;padding:.4rem 0}

/* ══ SKILL FILTERS ══ */
.skill-filters{margin-bottom:.7rem}
.skill-search{margin-bottom:.4rem;font-size:.82rem}
.skill-filter-row{display:flex;flex-wrap:wrap;gap:.3rem;margin-bottom:.3rem}
.skill-filter-btn{font-family:'Cinzel',serif;font-size:.66rem;padding:.2rem .55rem;background:var(--bg);border:1px solid var(--border);color:var(--muted);border-radius:4px;cursor:pointer;transition:all .15s;white-space:nowrap}
.skill-filter-btn:hover{border-color:var(--gold);color:var(--gold)}
.skill-filter-btn.active{background:var(--bg-card2)}

/* ══ FUSION PANEL ══ */
.fusion-desc{font-size:.76rem;color:var(--muted);margin-bottom:.7rem;line-height:1.4;font-style:italic}
.fusion-slots{display:flex;align-items:center;gap:.6rem;margin-bottom:.6rem;flex-wrap:wrap}
.fusion-slot{flex:1;min-width:110px;background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:.6rem .5rem;text-align:center;cursor:pointer;transition:all .2s;min-height:80px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem}
.fusion-slot:hover{border-color:var(--gold);background:var(--bg-card2)}
.fusion-slot-empty{border-style:dashed;border-color:var(--border)}
.fusion-slot-icon{font-size:1.8rem}
.fusion-slot-label{font-size:.7rem;color:var(--muted)}
.fusion-slot-name{font-family:'Cinzel',serif;font-size:.72rem;font-weight:700}
.fusion-slot-rarity{font-size:.62rem;color:var(--muted)}
.fusion-plus{font-size:1.6rem;flex-shrink:0;color:var(--muted)}
.fusion-warning{font-size:.72rem;color:#ff8844;margin-bottom:.5rem;font-style:italic}

/* Fusion picker modal */
#fusion-picker-overlay{position:fixed;inset:0;z-index:8000;background:rgba(0,0,0,.8);display:flex;align-items:center;justify-content:center;animation:chest-fade-in .2s ease}
.fusion-picker-modal{background:var(--bg-card);border:1px solid var(--border-g);border-radius:10px;padding:1.1rem;width:min(420px,94vw);max-height:75vh;display:flex;flex-direction:column;gap:.6rem}
.fusion-picker-title{font-family:'Cinzel',serif;font-size:.92rem;color:var(--gold)}
.fusion-picker-list{overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:.25rem}
.fusion-picker-item{display:flex;align-items:center;gap:.6rem;padding:.45rem .5rem;border-radius:5px;cursor:pointer;transition:background .15s;border-bottom:1px solid var(--border)}
.fusion-picker-item:hover{background:var(--bg-card2)}

/* Fusion animation overlay */
#fuse-anim-overlay{position:fixed;inset:0;z-index:8500;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;animation:chest-fade-in .2s ease}
.fuse-anim-scene{position:relative;width:260px;height:200px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem}
.fuse-anim-emojis{display:flex;align-items:center;gap:1.2rem;font-size:2.5rem}
.fuse-emoji-1,.fuse-emoji-2{animation:fuse-float 1.4s ease-in-out infinite alternate}
.fuse-emoji-2{animation-delay:.7s}
@keyframes fuse-float{0%{transform:translateY(0) scale(1)}100%{transform:translateY(-12px) scale(1.1)}}
.fuse-shatter{animation:fuse-shatter-anim .85s ease forwards!important}
@keyframes fuse-shatter-anim{0%{transform:scale(1) rotate(0deg);filter:none;opacity:1}15%{transform:scale(1.3) rotate(-8deg);filter:brightness(2) drop-shadow(0 0 12px #ff4400)}30%{transform:scale(.9) rotate(10deg) translateX(-6px);filter:brightness(1.5)}45%{transform:scale(1.1) rotate(-6deg) translateX(6px);filter:brightness(2) drop-shadow(0 0 8px #ff0000)}60%{transform:scale(.7) rotate(15deg) translateY(8px);filter:grayscale(.5)}80%{transform:scale(.4) rotate(-20deg) translateY(15px);opacity:.5}100%{transform:scale(0) rotate(30deg) translateY(20px);opacity:0}}
.fuse-center{font-size:2rem;animation:chest-pulse 1s ease-in-out infinite}
.fuse-particles{position:absolute;inset:0;pointer-events:none}
.fuse-label{font-family:'Cinzel',serif;font-size:.82rem;color:#b0a0d0;animation:chest-loading-pulse 1s ease-in-out infinite}

/* Chest runes container */
.chest-runes{position:absolute;inset:0;pointer-events:none;z-index:2}
/* Chest generating text (overlaid on animation) */
.chest-generating{position:absolute;bottom:12%;left:50%;transform:translateX(-50%);color:#e8d0ff;font-family:'Cinzel',serif;font-size:.95rem;letter-spacing:.1em;animation:chest-loading-pulse 1s ease-in-out infinite;white-space:nowrap;z-index:5;text-shadow:0 0 12px #9b44ff,0 0 24px #7733cc,0 2px 6px rgba(0,0,0,.9);background:linear-gradient(135deg,rgba(10,5,20,.7),rgba(30,10,50,.7));padding:.3rem .9rem;border-radius:6px;border:1px solid #6a2aaa}


/* ══ RULES PAGE ══ */
.rules-full-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1rem}
.rules-full-card{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:1.2rem 1.4rem;transition:border-color .3s,box-shadow .3s}
.rules-full-card:hover{border-color:var(--gold);box-shadow:0 0 20px rgba(201,168,76,.15)}
.rules-full-icon{font-size:2rem;margin-bottom:.4rem}
.rules-full-title{font-family:'Cinzel',serif;font-size:1.05rem;color:var(--gold);margin-bottom:.7rem;padding-bottom:.4rem;border-bottom:1px solid var(--border-g)}
.rules-full-card ul{padding-left:1.1rem;margin:0}
.rules-full-card li{font-size:.82rem;color:var(--muted);margin-bottom:.45rem;line-height:1.5}
.rules-full-card li strong{color:var(--text)}
.rules-card-gameplay{border-color:#27ae6044}.rules-card-gameplay:hover{border-color:#27ae60;box-shadow:0 0 20px rgba(39,174,96,.2)}
.rules-card-combat{border-color:#c0392b44}.rules-card-combat:hover{border-color:#c0392b;box-shadow:0 0 20px rgba(192,57,43,.2)}
.rules-card-skills{border-color:#2980b944}.rules-card-skills:hover{border-color:#2980b9;box-shadow:0 0 20px rgba(41,128,185,.2)}
.rules-card-fusion{border-color:#9b59b644}.rules-card-fusion:hover{border-color:#9b59b6;box-shadow:0 0 20px rgba(155,89,182,.2)}
.rules-card-status{border-color:#d4800a44}.rules-card-status:hover{border-color:#d4800a;box-shadow:0 0 20px rgba(212,128,10,.2)}
.rules-card-chests{border-color:#cd853f44}.rules-card-chests:hover{border-color:#cd853f;box-shadow:0 0 20px rgba(205,133,63,.2)}
.rules-card-coins{border-color:#f1c40f44}.rules-card-coins:hover{border-color:#f1c40f;box-shadow:0 0 20px rgba(241,196,15,.2)}
.rules-card-leagues{border-color:#b9f2ff44}.rules-card-leagues:hover{border-color:#b9f2ff;box-shadow:0 0 20px rgba(185,242,255,.15)}
.rules-status-grid{display:grid;grid-template-columns:1fr 1fr;gap:.4rem}
.rules-status-item{font-size:.78rem;color:var(--muted);padding:.35rem .5rem;background:var(--bg);border:1px solid var(--border);border-radius:5px;line-height:1.4}
.rules-status-item span{display:block;font-family:'Cinzel',serif;font-size:.72rem;color:var(--gold-l);margin-bottom:.1rem}
.rules-league-ladder{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.7rem}
.rules-league{font-family:'Cinzel',serif;font-size:.78rem;padding:.25rem .6rem;background:var(--bg);border:1px solid var(--border);border-radius:4px}

@media(max-width:580px){
  .two-col{grid-template-columns:1fr}.poke-skill-grid{grid-template-columns:1fr 1fr}
  #battle-scene{aspect-ratio:7/6;min-height:400px;max-height:620px}
  #battle-scene-2v2{aspect-ratio:7/6;min-height:410px;max-height:650px}
  .event-banner{top:46%;max-width:88%}
  .event-banner-near{max-width:min(46%,190px);font-size:.68rem;padding:.3rem .55rem}
  .rules-grid{grid-template-columns:1fr}
  .lootbox-shop{grid-template-columns:1fr}.nav-dropdown-content{width:280px;right:-50px}
  .avatar-picker-grid{gap:3px}.avatar-opt{width:32px;height:32px;font-size:1.1rem}
  /* Align view padding with nav so cards no longer look wider than navbar */
  .view{padding:.8rem}
  /* Skill cards: force 1 column so icon+info+QUITAR fit on one row without
     squeezing the stats column to 1-2 chars per line */
  .loadout-equipped-grid{grid-template-columns:1fr}
  .loadout-equipped-card{flex-wrap:wrap}
  .loadout-sk-info{flex:1 1 calc(100% - 3rem)}
  .loadout-equipped-card .btn{flex:0 0 auto}
  /* Friend chat panel: fit viewport with side margins instead of fixed 300px */
  .friend-chat-panel{left:8px;right:8px;width:auto;bottom:8px;max-width:none}
  .friend-chat-list{max-height:50dvh}
  /* Friend row actions: tighter on narrow widths so cards never overflow */
  .friend-actions{flex-wrap:wrap;justify-content:flex-end;gap:.25rem}
  .friend-actions .btn{padding:.25rem .45rem;font-size:.75rem}
}


/* ═══════════════════════════════════════════════════════════
   RANKED BANNER — buscador de partida en la página principal
   ═══════════════════════════════════════════════════════════ */
.ranked-banner{
  position:relative;overflow:hidden;border-radius:14px;margin-bottom:1.4rem;
  padding:1.4rem 1.8rem;
  background:
    radial-gradient(ellipse at top left,rgba(201,168,76,.18) 0%,transparent 55%),
    radial-gradient(ellipse at bottom right,rgba(155,48,255,.15) 0%,transparent 55%),
    linear-gradient(135deg,#1a1226 0%,#0f0a1a 50%,#1a0f1f 100%);
  border:1px solid var(--gold);
  box-shadow:
    0 0 50px rgba(201,168,76,.35),
    0 0 100px rgba(155,48,255,.17),
    inset 0 0 60px rgba(0,0,0,.4);
}

/* Orbes flotantes de fondo */
.ranked-bg-orbs{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.ranked-bg-orbs span{
  position:absolute;width:140px;height:140px;border-radius:50%;
  background:radial-gradient(circle,rgba(201,168,76,.25) 0%,transparent 70%);
  filter:blur(20px);
  animation:orbFloat 12s ease-in-out infinite;
  will-change:transform;transform:translateZ(0);
}
@media(max-width:480px){.ranked-bg-orbs span{filter:blur(10px)}}
.ranked-bg-orbs span:nth-child(1){top:-40px;left:10%;animation-delay:0s}
.ranked-bg-orbs span:nth-child(2){top:30%;left:60%;background:radial-gradient(circle,rgba(155,48,255,.22) 0%,transparent 70%);animation-delay:-3s}
.ranked-bg-orbs span:nth-child(3){bottom:-40px;left:30%;background:radial-gradient(circle,rgba(255,68,255,.18) 0%,transparent 70%);animation-delay:-6s}
.ranked-bg-orbs span:nth-child(4){top:20%;right:5%;background:radial-gradient(circle,rgba(64,224,208,.18) 0%,transparent 70%);animation-delay:-9s}
@keyframes orbFloat{
  0%,100%{transform:translate(0,0) scale(1)}
  33%   {transform:translate(20px,-15px) scale(1.1)}
  66%   {transform:translate(-15px,10px) scale(.95)}
}

/* Rayos diagonales de luz */
.ranked-bg-rays{
  position:absolute;inset:-50%;pointer-events:none;
  background:repeating-linear-gradient(45deg,
    transparent 0px,transparent 60px,
    rgba(255,215,100,.04) 60px,rgba(255,215,100,.04) 62px);
  animation:raysShift 18s linear infinite;
}
@keyframes raysShift{
  0%{transform:translate(0,0)}
  100%{transform:translate(60px,60px)}
}

/* Partículas de fondo */
.ranked-bg-particles{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.ranked-bg-particles::before,
.ranked-bg-particles::after{
  content:'';position:absolute;width:4px;height:4px;border-radius:50%;
  background:var(--gold-l);box-shadow:0 0 8px var(--gold);
  animation:particleRise 8s linear infinite;
}
.ranked-bg-particles::before{left:20%;animation-delay:-2s}
.ranked-bg-particles::after{left:75%;animation-delay:-5s}
@keyframes particleRise{
  0%  {transform:translateY(120%) translateX(0);opacity:0}
  10% {opacity:1}
  90% {opacity:1}
  100%{transform:translateY(-20%) translateX(30px);opacity:0}
}

/* Layout interno */
.ranked-content{
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  flex-wrap:wrap;
}
.ranked-left{display:flex;align-items:center;gap:1.2rem;flex:1;min-width:280px}

/* Corona pulsante */
.ranked-crown{
  font-size:3.2rem;
  filter:drop-shadow(0 0 18px rgba(255,215,100,.85));
  animation:crownFloat 3s ease-in-out infinite;
  will-change:transform;
}
@keyframes crownFloat{
  0%,100%{transform:translateY(0) rotate(-3deg)}
  50%   {transform:translateY(-6px) rotate(3deg)}
}

/* Texto */
.ranked-text{flex:1}
.ranked-title{
  font-family:'Cinzel',serif;font-size:1.6rem;font-weight:900;
  color:var(--gold-l);letter-spacing:.12em;
  text-shadow:0 0 20px rgba(255,215,100,.6),0 2px 0 rgba(0,0,0,.4);
  background:linear-gradient(180deg,#fff5d0 0%,#f0d080 50%,#c9a84c 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  margin-bottom:.25rem;
}
.ranked-title-pulse{animation:titlePulse 1.4s ease-in-out infinite}
@keyframes titlePulse{0%,100%{opacity:.82}50%{opacity:1}}
.ranked-sub{font-size:.85rem;color:var(--muted);font-style:italic;margin-bottom:.55rem}

/* Píldoras con las reglas */
.ranked-rules{display:flex;gap:.4rem;flex-wrap:wrap}
.ranked-pill{
  font-family:'Cinzel',serif;font-size:.7rem;letter-spacing:.05em;
  padding:.25rem .6rem;border-radius:99px;border:1px solid;
  text-shadow:0 1px 0 rgba(0,0,0,.4);
}
.ranked-pill-win  {background:rgba(46,204,113,.15);border-color:#2ecc71;color:#7fffaf}
.ranked-pill-loss {background:rgba(231,76,60,.15);border-color:#e74c3c;color:#ff8a7a}
.ranked-pill-mercy{background:rgba(241,196,15,.15);border-color:#f1c40f;color:#ffe066}

/* Botón principal dorado */
.ranked-btn{
  position:relative;overflow:hidden;cursor:pointer;
  font-family:'Cinzel',serif;font-weight:900;letter-spacing:.1em;font-size:1.05rem;
  padding:1rem 2rem;border-radius:8px;
  background:linear-gradient(180deg,#f0d080 0%,#c9a84c 50%,#7a5c1e 100%);
  border:2px solid #ffe066;color:#1a1200;
  box-shadow:
    0 4px 0 #4a3a1a,
    0 6px 25px rgba(255,215,100,.68),
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 -2px 6px rgba(0,0,0,.25);
  display:inline-flex;align-items:center;gap:.6rem;
  text-shadow:0 1px 0 rgba(255,255,255,.3);
  transition:transform .12s ease,box-shadow .15s ease;
}
.ranked-btn:hover{
  transform:translateY(-2px) scale(1.03);
  box-shadow:
    0 6px 0 #4a3a1a,
    0 10px 30px rgba(255,215,100,.7),
    inset 0 1px 0 rgba(255,255,255,.6),
    inset 0 -2px 6px rgba(0,0,0,.25);
}
.ranked-btn:active{transform:translateY(2px) scale(.98);box-shadow:0 2px 0 #4a3a1a,0 4px 12px rgba(201,168,76,.4),inset 0 1px 0 rgba(255,255,255,.4)}
.ranked-btn:disabled{opacity:.6;cursor:not-allowed;animation:none}
/* ── Columna derecha del banner (toggle + botón) ── */
.ranked-right-col{display:flex;flex-direction:column;align-items:flex-end;gap:.55rem}
/* ── Selector 3-opciones: Humanos / Mixto / Bots ── */
.queue-mode-select{display:flex;flex-direction:column;align-items:flex-end;gap:.3rem}
.queue-mode-opts{display:inline-flex;border:1px solid rgba(255,255,255,.15);border-radius:6px;overflow:hidden;background:rgba(0,0,0,.2)}
.queue-mode-opt{background:transparent;border:none;color:rgba(255,255,255,.55);padding:.3rem .55rem;font-size:.7rem;cursor:pointer;transition:all .15s;border-right:1px solid rgba(255,255,255,.08);font-family:inherit}
.queue-mode-opt:last-child{border-right:none}
.queue-mode-opt:hover{background:rgba(255,255,255,.05);color:rgba(255,255,255,.85)}
.queue-mode-opt.active{background:rgba(201,168,76,.25);color:#ffd86b;font-weight:600}
.queue-mode-seconds{display:flex;align-items:center;gap:.35rem;font-size:.65rem;color:rgba(255,255,255,.55)}
.queue-mode-seconds input[type=range]{width:90px;cursor:pointer}
.queue-mode-seconds.hidden{display:none}
.queue-seconds-value{min-width:32px;text-align:right;color:#ffd86b}
.ranked-btn-icon{font-size:1.3rem;filter:drop-shadow(0 1px 2px rgba(0,0,0,.3))}
.ranked-btn-shine{
  position:absolute;top:0;left:0;width:60%;height:100%;
  background:linear-gradient(110deg,transparent 0%,rgba(255,255,255,.55) 50%,transparent 100%);
  animation:rankedShine 3s ease-in-out infinite;
  pointer-events:none;
}
@keyframes rankedShine{
  0%,60%{transform:skewX(-25deg) translateX(-250%)}
  100%  {transform:skewX(-25deg) translateX(300%)}
}

/* Botón cancelar */
.ranked-btn-cancel{
  background:linear-gradient(180deg,#5a2020 0%,#3a1212 100%);
  border-color:#e74c3c;color:#ffb5a8;
  box-shadow:0 4px 0 #2a0a0a,0 6px 16px rgba(231,76,60,.4),inset 0 1px 0 rgba(255,255,255,.15);
  text-shadow:none;
  animation:none;
}
.ranked-btn-cancel:hover{
  box-shadow:0 6px 0 #2a0a0a,0 8px 24px rgba(231,76,60,.7),inset 0 1px 0 rgba(255,255,255,.2);
}

/* ═══ Estado SEARCHING — radar animado ═══ */
.ranked-radar{
  position:relative;width:90px;height:90px;flex-shrink:0;
  border-radius:50%;
  background:radial-gradient(circle,rgba(201,168,76,.12) 0%,rgba(0,0,0,.4) 70%);
  border:2px solid var(--gold);
  box-shadow:0 0 25px rgba(255,215,100,.4),inset 0 0 20px rgba(0,0,0,.6);
}
.ranked-radar::before,.ranked-radar::after{
  content:'';position:absolute;inset:0;border-radius:50%;
  border:1px solid rgba(201,168,76,.3);
}
.ranked-radar::before{inset:12px}
.ranked-radar::after{inset:24px}
.ranked-radar-sweep{
  position:absolute;inset:0;border-radius:50%;overflow:hidden;
  background:conic-gradient(from 0deg,transparent 0deg,transparent 270deg,rgba(255,215,100,.6) 350deg,rgba(255,215,100,.9) 360deg);
  animation:radarSweep 2s linear infinite;
  mix-blend-mode:screen;
}
@keyframes radarSweep{
  0%  {transform:rotate(0)}
  100%{transform:rotate(360deg)}
}
.ranked-radar-center{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-size:1.5rem;color:var(--gold-l);
  text-shadow:0 0 10px rgba(255,215,100,.9);
  z-index:2;
}
.ranked-radar-dot{
  position:absolute;width:6px;height:6px;border-radius:50%;
  background:var(--gold-l);box-shadow:0 0 8px var(--gold);
  opacity:0;
  animation:radarBlip 2s ease-out infinite;
}
.ranked-radar-dot-1{top:22%;left:65%;animation-delay:0s}
.ranked-radar-dot-2{top:60%;left:25%;animation-delay:.7s}
.ranked-radar-dot-3{top:70%;left:70%;animation-delay:1.3s}
@keyframes radarBlip{
  0%  {opacity:0;transform:scale(.5)}
  20% {opacity:1;transform:scale(1.4)}
  100%{opacity:0;transform:scale(1)}
}

/* Stats en estado searching */
.ranked-stats{display:flex;gap:1.2rem;flex-wrap:wrap;margin-top:.3rem}
.ranked-stat{
  display:flex;flex-direction:column;gap:.15rem;
  padding:.4rem .8rem;border-radius:6px;
  background:rgba(0,0,0,.35);border:1px solid rgba(201,168,76,.3);
}
.ranked-stat-label{font-size:.65rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.ranked-stat-val  {font-family:'Cinzel',serif;font-size:1.05rem;color:var(--gold-l);font-weight:700}

/* Responsive */
@media (max-width:720px){
  .ranked-banner{padding:1.1rem 1rem}
  .ranked-content{flex-direction:column;align-items:stretch;gap:1rem}
  .ranked-left{flex-direction:column;text-align:center;gap:.8rem}
  .ranked-stats{justify-content:center}
  .ranked-btn{width:100%;justify-content:center}
  .ranked-title{font-size:1.3rem}
}

/* ═══ TIENDA / SHOP ═══ */
.shop-balance{
  text-align:center;font-size:1.2rem;margin:1rem 0 1.5rem;
  color:var(--gold-l);font-family:'Cinzel',serif;
}
.shop-grid{
  display:grid;gap:1.2rem;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  margin-bottom:2rem;
}
.shop-pack{
  background:linear-gradient(160deg,var(--bg-card),var(--bg-card2));
  border:2px solid var(--gold-d);border-radius:14px;
  padding:1.4rem 1rem 1.2rem;text-align:center;
  position:relative;overflow:hidden;transition:transform .2s,box-shadow .2s,border-color .2s;
}
.shop-pack::before{
  content:'';position:absolute;inset:-2px;border-radius:14px;
  background:linear-gradient(135deg,transparent 40%,rgba(240,208,128,.15) 50%,transparent 60%);
  pointer-events:none;opacity:0;transition:opacity .3s;
}
.shop-pack:hover{transform:translateY(-4px);border-color:var(--gold);box-shadow:0 8px 24px rgba(201,168,76,.25)}
.shop-pack:hover::before{opacity:1}
.shop-pack-emoji{font-size:3rem;line-height:1;margin-bottom:.4rem;filter:drop-shadow(0 2px 8px rgba(240,208,128,.4))}
.shop-pack-name{font-family:'Cinzel',serif;font-weight:700;color:var(--gold-l);font-size:1.05rem;margin-bottom:.3rem}
.shop-pack-coins{font-size:1.4rem;color:#fff;font-weight:700;margin:.4rem 0}
.shop-pack-bonus{
  display:inline-block;background:rgba(80,200,120,.18);color:#7be39a;
  border:1px solid rgba(80,200,120,.4);border-radius:999px;
  padding:.2rem .7rem;font-size:.78rem;margin-bottom:.6rem;font-weight:600;
}
.shop-pack-price{font-family:'Cinzel',serif;font-size:1.3rem;color:var(--gold);margin:.6rem 0 1rem}

/* Regalo diario GRATIS */
.shop-pack.shop-pack-free{
  border-color:#4ade80;
  background:
    radial-gradient(circle at 20% 0%, rgba(74,222,128,.18), transparent 60%),
    linear-gradient(160deg,rgba(34,197,94,.08),var(--bg-card2));
  box-shadow:0 0 20px rgba(74,222,128,.22);
}
.shop-pack.shop-pack-free:hover{
  border-color:#86efac;box-shadow:0 8px 28px rgba(74,222,128,.4);transform:translateY(-4px);
}
.shop-pack.shop-pack-free.claimed{
  opacity:.7;filter:grayscale(.35);
}
.shop-pack.shop-pack-free.claimed .shop-pack-badge{
  animation:none;background:#374151;box-shadow:none;
}
.shop-pack-badge{
  position:absolute;top:.55rem;right:.55rem;
  background:linear-gradient(180deg,#22c55e,#16a34a);color:#fff;font-weight:900;
  font-size:.72rem;letter-spacing:.15em;padding:.25rem .65rem;
  border-radius:6px;box-shadow:0 2px 10px rgba(22,163,74,.65);
  animation:free-pulse 1.8s ease-in-out infinite;
  text-shadow:0 1px 2px rgba(0,0,0,.3);
}
@keyframes free-pulse{
  0%,100%{transform:scale(1);box-shadow:0 2px 10px rgba(22,163,74,.65)}
  50%{transform:scale(1.08);box-shadow:0 2px 18px rgba(34,197,94,1)}
}
.shop-pack-free .shop-pack-coins{color:#86efac}
.shop-pack-free-btn{margin-top:.6rem}
.shop-pack-free-note{
  margin-top:.45rem;font-size:.72rem;color:#9ca3af;
  min-height:1em;
}

.shop-history-wrap{margin-top:2.5rem}
.section-title.sub{font-size:1.1rem;opacity:.85}
#shop-history{display:flex;flex-direction:column;gap:.5rem}
.shop-tx{
  background:var(--bg-card);border:1px solid #2a2640;border-radius:8px;
  padding:.7rem 1rem;display:flex;justify-content:space-between;align-items:center;gap:1rem;
  flex-wrap:wrap;font-size:.92rem;
}
.shop-tx-paid{border-left:3px solid #5fcb7d}
.shop-tx-pending{border-left:3px solid #d4a84c;opacity:.85}
.shop-tx-refunded{border-left:3px solid #888;opacity:.7}
.shop-tx-failed{border-left:3px solid #c84c4c;opacity:.7}

.shop-legal{
  margin-top:2rem;padding:1rem;background:rgba(255,255,255,.03);
  border:1px solid #2a2640;border-radius:8px;font-size:.82rem;color:#aaa;line-height:1.5;
}
.shop-legal a{color:var(--gold-l);text-decoration:underline}

/* ══════════════════════════════════════════
   DAILY MISSIONS — Mockup B (circular rings)
══════════════════════════════════════════ */
.missions-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.9rem}
.missions-reset{font-size:.7rem;color:var(--muted);font-family:'Cinzel',serif;letter-spacing:.04em}
.missions-grid{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.mission-card{
  display:flex;flex-direction:column;align-items:center;gap:.35rem;
  padding:.9rem .5rem .8rem;border-radius:14px;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.07);
  transition:border-color .3s,box-shadow .3s;
}
.mission-card-ready{
  border-color:rgba(201,168,76,.55);
  animation:mission-ready-pulse 2s ease-in-out infinite;
}
.mission-card-done{border-color:rgba(124,179,66,.3);opacity:.72}
@keyframes mission-ready-pulse{
  0%,100%{box-shadow:0 0 8px rgba(201,168,76,.15)}
  50%{box-shadow:0 0 24px rgba(201,168,76,.45)}
}
.mission-ring-wrap{line-height:0}
.mission-label{font-size:.77rem;font-weight:600;text-align:center;color:var(--text);line-height:1.25;padding:0 .2rem}
.mission-reward-label{font-size:.68rem;color:var(--muted)}
.mission-done{font-size:.72rem;color:#7cb342;font-weight:700}
.mission-claim-btn{
  margin-top:.15rem;padding:.35rem .8rem!important;font-size:.75rem!important;
  animation:mission-btn-pulse 1.6s ease-in-out infinite;
}
@keyframes mission-btn-pulse{
  0%,100%{box-shadow:0 0 4px rgba(201,168,76,.3)}
  50%{box-shadow:0 0 16px rgba(201,168,76,.7)}
}
/* compat: hide old selectors if any stale HTML still uses them */
.daily-mission{padding:.3rem 0}
.daily-mission-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:.3rem}
.daily-mission-name{font-size:.85rem;font-weight:600}
.daily-mission-progress{font-size:.8rem;color:var(--gold-l);font-weight:700}
.daily-mission-claimed{font-size:.78rem;color:#7cb342;margin-top:.3rem}

/* ══════════════════════════════════════════
   APK DOWNLOAD FLOATING BUTTON
══════════════════════════════════════════ */
#apk-download-btn{
  position:fixed;left:1rem;bottom:1rem;z-index:9000;
  display:none;align-items:center;gap:.5rem;
}
#apk-download-btn.show{
  display:inline-flex;
  padding:.6rem .95rem;border-radius:999px;
  font-family:'Cinzel',serif;font-size:.85rem;font-weight:700;letter-spacing:.05em;
  color:#0a0a0f;background:linear-gradient(135deg,#a4c639 0%,#7cb342 100%);
  text-decoration:none;
  box-shadow:0 4px 14px rgba(124,179,66,.45),0 0 0 1px rgba(255,255,255,.15) inset;
  transition:transform .15s ease,box-shadow .15s ease,filter .15s ease;
}
#apk-download-btn:hover{transform:translateY(-2px);filter:brightness(1.1);box-shadow:0 6px 18px rgba(124,179,66,.6),0 0 0 1px rgba(255,255,255,.2) inset}
#apk-download-btn:active{transform:translateY(0)}
#apk-download-btn svg{display:block}
@media (max-width:520px){
  #apk-download-btn{padding:.55rem .8rem;font-size:.78rem}
  #apk-download-btn span{display:none}
}
/* Ocultar el botón si la app ya se está ejecutando como PWA instalada */
@media all and (display-mode:standalone){ #apk-download-btn{display:none} }

/* ═══ AJUSTES ═══ */
.settings-wrap{max-width:480px;margin:0 auto}
.settings-card{padding:1.2rem 1.5rem}
.settings-row{display:flex;align-items:center;gap:.8rem;margin-bottom:.7rem}
.settings-label{flex:0 0 160px;font-size:.85rem;font-weight:600;color:var(--text)}
.settings-slider{flex:1;-webkit-appearance:none;appearance:none;height:6px;border-radius:3px;background:rgba(255,255,255,.12);outline:none;cursor:pointer}
.settings-slider::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px rgba(255,215,0,.5);cursor:pointer;transition:transform .15s}
.settings-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}
.settings-slider::-moz-range-thumb{width:18px;height:18px;border:none;border-radius:50%;background:var(--gold);box-shadow:0 0 8px rgba(255,215,0,.5);cursor:pointer}
.settings-slider::-moz-range-track{height:6px;border-radius:3px;background:rgba(255,255,255,.12)}
.settings-val{flex:0 0 42px;text-align:right;font-size:.8rem;color:var(--gold-l);font-weight:700;font-variant-numeric:tabular-nums}
.settings-input{flex:1;padding:.5rem .8rem;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:6px;color:var(--text);font-size:.9rem;outline:none;transition:border-color .2s}
.settings-input:focus{border-color:var(--gold)}
.settings-input::placeholder{color:rgba(255,255,255,.35)}
@media(max-width:520px){
  .settings-row{flex-wrap:wrap;gap:.3rem}
  .settings-label{flex:1 1 100%;font-size:.82rem}
  .settings-slider{flex:1}
  .settings-input{flex:1}
}

/* ── Google Sign-In ── */
.google-signin-wrap{margin-top:1rem;display:flex;flex-direction:column;align-items:center;gap:.6rem}
.google-signin-divider{
  position:relative;width:100%;text-align:center;
  color:#6a6478;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  font-family:'Cinzel',serif;
}
.google-signin-divider::before,
.google-signin-divider::after{
  content:'';position:absolute;top:50%;width:38%;height:1px;
  background:linear-gradient(90deg,transparent,#3a3450,transparent);
}
.google-signin-divider::before{left:0}
.google-signin-divider::after{right:0}
.google-signin-divider span{
  position:relative;background:transparent;padding:0 .6rem;
}
.google-btn-host{display:flex;justify-content:center;min-height:40px;width:100%}
.google-btn-host:empty{display:none}
.google-btn-host > div{margin:0 auto !important}

/* ── APK inline download ── */
.apk-inline-wrap{margin-top:.7rem;display:flex;justify-content:center}
.apk-inline-btn{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.55rem 1.1rem;border-radius:999px;
  background:linear-gradient(135deg,#a4c639 0%,#7cb342 100%);
  color:#fff;font-weight:700;font-size:.88rem;letter-spacing:.03em;
  text-decoration:none;
  box-shadow:0 3px 12px rgba(124,179,66,.4);
  transition:box-shadow .2s,transform .1s;
}
.apk-inline-btn:hover{box-shadow:0 5px 18px rgba(124,179,66,.6);transform:translateY(-1px)}
.apk-inline-btn:active{transform:translateY(0)}

/* ── Badge BOT ── */
.bot-badge{
  display:inline-block;margin-left:.35em;padding:.1em .4em;
  font-family:'Cinzel',serif;font-size:.65em;font-weight:700;letter-spacing:.12em;
  color:#0b0b14;background:linear-gradient(135deg,#ffd700,#f1c40f);
  border:1px solid #b8860b;border-radius:4px;vertical-align:middle;
  text-shadow:none;box-shadow:0 0 6px rgba(241,196,15,.4);
}

/* ══ ESCENARIO 2v2 — estilo completo con fondos, clima, ambient ══ */
#battle-scene-2v2{
  position:relative;width:100%;aspect-ratio:16/10;max-height:620px;min-height:390px;overflow:hidden;
  border-radius:12px;border:2px solid #4a2a7a;
  box-shadow:0 0 0 1px #2a1a4a,0 0 40px rgba(120,60,200,.35),0 0 80px rgba(80,40,150,.15);
  transition:border-color .8s,box-shadow .8s;
}
#battle-scene-2v2.hidden{display:none}

/* Reutilizar las clases de fondo del 1v1 dentro del 2v2 */
#battle-scene-2v2 .bs-sky{position:absolute;inset:0 0 38% 0;z-index:0;transition:background 1s}
#battle-scene-2v2 .bs-aurora{position:absolute;inset:0 0 42% 0;z-index:1;opacity:.18;filter:blur(18px);animation:aurora-drift 8s ease-in-out infinite alternate;transition:background 1s}
#battle-scene-2v2 .bs-moon{position:absolute;top:5%;right:12%;width:clamp(32px,6vw,64px);height:clamp(32px,6vw,64px);border-radius:50%;z-index:2;box-shadow:0 0 18px rgba(245,216,96,.5);animation:moon-float 6s ease-in-out infinite}
#battle-scene-2v2 .bs-stars-layer{position:absolute;inset:0 0 45% 0;z-index:3;pointer-events:none}
#battle-scene-2v2 .bs-stars-layer .bs-star{position:absolute;border-radius:50%;background:#fff;animation:twinkle var(--dur,3s) ease-in-out infinite var(--del,0s)}
#battle-scene-2v2 .bs-clouds{position:absolute;inset:0 0 50% 0;z-index:4;pointer-events:none;overflow:hidden}
#battle-scene-2v2 .bs-cloud{position:absolute;border-radius:40px;opacity:var(--cloud-op,.06);animation:cloud-drift var(--dur,30s) linear infinite var(--del,0s)}
#battle-scene-2v2 .bs-mountains-far{position:absolute;bottom:58%;left:0;right:0;height:22%;z-index:5;transition:background 1s}
#battle-scene-2v2 .bs-mountains{position:absolute;bottom:48%;left:0;right:0;height:28%;z-index:6;transition:background 1s}
#battle-scene-2v2 .bs-ground{position:absolute;bottom:0;left:0;right:0;height:48%;z-index:7;transition:background 1s}
#battle-scene-2v2 .bs-ground::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--ground-lines,repeating-linear-gradient(90deg,transparent 0px,transparent 8px,rgba(60,120,40,.15) 8px,rgba(60,120,40,.15) 9px))}
#battle-scene-2v2 .bs-ground-glow{position:absolute;bottom:46%;left:0;right:0;height:4%;z-index:8;background:radial-gradient(ellipse,rgba(80,200,80,.18),transparent 70%);pointer-events:none}
#battle-scene-2v2 .bs-weather{position:absolute;inset:0;z-index:12;pointer-events:none;overflow:hidden}
#battle-scene-2v2 .bs-ambient{position:absolute;bottom:0;left:0;right:0;height:60%;z-index:13;pointer-events:none;overflow:hidden}
#battle-scene-2v2 .bs-vignette{position:absolute;inset:0;z-index:14;pointer-events:none;box-shadow:inset 0 0 80px rgba(0,0,0,.55)}
#battle-scene-2v2 .bs-fog{position:absolute;bottom:30%;left:0;right:0;height:30%;background:var(--fog-color,rgba(60,40,120,.08));filter:blur(10px);animation:fog-drift 12s ease-in-out infinite alternate}

/* Línea central decorativa */
.bs2-divider{
  position:absolute;top:48%;left:5%;right:0;height:2px;z-index:6;
  background:linear-gradient(90deg,transparent,rgba(150,80,220,.3) 15%,rgba(200,150,255,.6) 50%,rgba(150,80,220,.3) 85%,transparent);
  filter:blur(1px);animation:line-pulse 3s ease-in-out infinite;
}

/* Flash layer */
#bs-flash-2v2{position:absolute;inset:0;z-index:40;pointer-events:none;transition:opacity .15s}
#bs-flash-2v2.do-flash{opacity:1}
#bs-flash-2v2.hidden{opacity:0}

/* Target hint */
#bs2-target-hint{
  position:absolute;top:8px;left:50%;transform:translateX(-50%);
  background:rgba(20,0,40,.85);border:1px solid var(--accent);color:var(--accent);
  font-weight:bold;font-size:.8rem;padding:.3rem .7rem;border-radius:6px;
  z-index:30;pointer-events:none;
}
#bs2-target-hint.hidden{display:none}

/* Anim-layer 2v2 */
#anim-layer-2v2{position:absolute;inset:0;z-index:35;pointer-events:none}

/* ══ FIGHTERS 2v2 ══ */
.bs2-row{position:absolute;left:0;right:0;display:flex;justify-content:space-around;align-items:center;gap:2%;padding:0 4%;z-index:9}
.bs2-row-enemy{top:3%}
.bs2-row-ally{bottom:3%}
.bs2-fighter{
  flex:1 1 0;min-width:0;max-width:46%;
  display:flex;flex-direction:column;align-items:center;gap:.15rem;
  padding:0;border-radius:0;
  background:transparent;border:none;
  backdrop-filter:none;
  transition:transform .15s,border-color .15s,box-shadow .15s;
}
.bs2-fighter-enemy{animation:sprite-entrance-r .6s cubic-bezier(.2,1,.3,1)}
.bs2-fighter-ally{animation:sprite-entrance-l .6s cubic-bezier(.2,1,.3,1)}
.bs2-fighter.bs2-targetable{cursor:pointer;border-color:var(--accent);box-shadow:0 0 16px rgba(150,80,220,.55),inset 0 0 12px rgba(150,80,220,.15);animation:bs2-pulse 1.2s ease-in-out infinite}
.bs2-fighter.bs2-targetable:hover{transform:translateY(-3px) scale(1.03);border-color:#ff4466;box-shadow:0 0 20px rgba(255,68,102,.7)}
.bs2-fighter.bs2-dead{opacity:.35;filter:grayscale(1)}
@keyframes bs2-pulse{0%,100%{box-shadow:0 0 12px rgba(150,80,220,.4),inset 0 0 10px rgba(150,80,220,.1)}50%{box-shadow:0 0 22px rgba(180,100,255,.75),inset 0 0 16px rgba(180,100,255,.2)}}

.bs2-namebar{font-family:'Cinzel',serif;font-size:clamp(.55rem,1vw,.78rem);color:#e8d8ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;text-align:center;text-shadow:0 1px 4px rgba(0,0,0,.8)}
.bs2-hprow{display:flex;align-items:center;gap:.3rem;width:100%}
.bs2-hptrack{flex:1;height:7px;background:#111;border-radius:4px;overflow:hidden;border:1px solid #2a1a4a}
.bs2-hpfill{height:100%;width:100%;border-radius:3px;transition:width .2s cubic-bezier(.3,.8,.2,1),background .25s}
.bs2-hpnum{font-size:.62rem;color:#f0e8ff;white-space:nowrap;font-weight:600;text-shadow:0 1px 4px rgba(0,0,0,.95),0 0 8px rgba(0,0,0,.6)}
.bs2-sprite-wrap{display:flex;flex-direction:column;align-items:center;position:relative}
.bs2-sprite{display:flex;align-items:center;justify-content:center;border-radius:50%;line-height:1;user-select:none;pointer-events:none;filter:drop-shadow(0 4px 10px rgba(0,0,0,.7));transition:filter .15s,transform .15s}
.bs2-sprite.bs2-sprite-enemy{font-size:clamp(2.2rem,5.5vw,3.6rem);width:clamp(52px,10vw,78px);height:clamp(52px,10vw,78px);animation:sprite-idle 3s ease-in-out infinite}
.bs2-sprite.bs2-sprite-player{font-size:clamp(2.6rem,6.5vw,4.2rem);width:clamp(60px,11vw,88px);height:clamp(60px,11vw,88px);transform:scaleX(-1);animation:sprite-idle-player 3s ease-in-out infinite}
.bs2-platform{border-radius:50%;opacity:.55;margin-top:-6px;filter:blur(4px);width:clamp(54px,9vw,78px);height:clamp(11px,1.8vw,16px);background:radial-gradient(ellipse,var(--scene-accent,#4a3a6a),transparent);animation:platform-pulse 3s ease-in-out infinite}
.bs2-bufflist{display:flex;flex-wrap:wrap;gap:2px;justify-content:center;min-height:14px}

/* ─────────────────────────────────────────────────────────────────────────
 * Torre de Combate
 * ─────────────────────────────────────────────────────────────────────── */
.tower-header{margin:.4rem 0 .8rem;background:linear-gradient(180deg,#1a1424,#13101a);border:1px solid #3a2a5a;border-radius:10px;padding:.7rem .9rem;box-shadow:0 0 20px rgba(120,80,200,.12)}
.tower-header-row{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between}
.tower-header-stat{display:flex;flex-direction:column;align-items:flex-start;gap:.1rem;font-family:'Cinzel',serif}
.tower-header-stat strong{color:#ffd86b;font-size:1.3rem;line-height:1.1}
.tower-header-label{color:#b8a8d0;font-size:.7rem;letter-spacing:.04em;text-transform:uppercase}
.tower-header-hint{color:#a89b8c;font-size:.78rem;margin-top:.5rem;font-style:italic}

/* ── Ascensión + (New Game+) ─────────────────────────────────────────────
   Estilo carmesí para diferenciar del resto de la torre (dorado/púrpura).
   El botón solo aparece cuando el jugador ha completado la torre. */
.tower-ngplus-stat strong{color:#ff6b3a !important}
.tower-ngplus-cta-wrap{display:flex;flex-direction:column;align-items:center;gap:.4rem;margin-top:.7rem}
.tower-ngplus-btn{
  background:linear-gradient(180deg,#a01818,#5a0a0a);
  color:#ffe3c8;
  border:1px solid #ff7a3a;
  padding:.6rem 1.4rem;
  font-family:'Cinzel',serif;
  font-weight:700;
  font-size:.95rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  border-radius:8px;
  cursor:pointer;
  box-shadow:0 0 18px rgba(255,80,40,.45),inset 0 1px 0 rgba(255,200,160,.25);
  animation:tower-ngplus-glow 2.2s ease-in-out infinite;
  transition:transform .15s ease, box-shadow .2s ease;
}
.tower-ngplus-btn:hover{
  background:linear-gradient(180deg,#c02020,#7a0a0a);
  transform:translateY(-1px);
  box-shadow:0 0 28px rgba(255,100,50,.7),inset 0 1px 0 rgba(255,220,180,.35);
}
.tower-ngplus-btn:disabled{opacity:.55;cursor:wait;animation:none}
@keyframes tower-ngplus-glow{
  0%,100%{box-shadow:0 0 18px rgba(255,80,40,.45),inset 0 1px 0 rgba(255,200,160,.25)}
  50%   {box-shadow:0 0 30px rgba(255,120,60,.75),inset 0 1px 0 rgba(255,220,180,.4)}
}
.tower-ngplus-locked-hint{
  color:#9a8a7a;font-size:.78rem;font-style:italic;text-align:center;
  border:1px dashed #4a3a2a;border-radius:8px;padding:.5rem .8rem;
  background:rgba(60,30,20,.25);
}
/* Tag pequeño inline para mostrar nivel de Ascensión + junto al piso de la
   Torre en hero card, fila de leaderboard y modal de perfil. Estética carmesí
   acorde con el botón Ascensión +. */
.ngplus-tag{
  display:inline-block;margin-left:.35rem;padding:.05rem .45rem;
  background:linear-gradient(180deg,#a01818,#5a0a0a);color:#ffe3c8;
  border:1px solid #ff7a3a;border-radius:999px;
  font-size:.68rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  vertical-align:middle;line-height:1.4;
  box-shadow:0 0 8px rgba(255,80,40,.45);
  white-space:nowrap;
}
.ngplus-tag-slot{display:inline}
.tower-ngplus-badge{
  display:inline-block;margin-left:.6rem;padding:.15rem .55rem;
  background:linear-gradient(180deg,#a01818,#5a0a0a);color:#ffe3c8;
  border:1px solid #ff7a3a;border-radius:999px;
  font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  vertical-align:middle;
  box-shadow:0 0 12px rgba(255,80,40,.5);
  animation:tower-ngplus-glow 2.2s ease-in-out infinite;
}
.tower-ngplus-modal-card{
  border:1px solid #ff6b3a !important;
  box-shadow:0 0 40px rgba(255,80,40,.35) !important;
  background:linear-gradient(180deg,#1a0c0c,#10080a) !important;
}
.tower-ngplus-modal-list{margin:.4rem 0 .6rem 1.1rem;padding:0;color:#e8d8c0;font-size:.9rem;line-height:1.55}
.tower-ngplus-modal-list li{margin:.2rem 0}
.btn.tower-ngplus-confirm{
  background:linear-gradient(180deg,#a01818,#5a0a0a);
  color:#ffe3c8;border:1px solid #ff7a3a;
  box-shadow:0 0 14px rgba(255,80,40,.5);
}
.btn.tower-ngplus-confirm:hover{background:linear-gradient(180deg,#c02020,#7a0a0a)}

.tower-scroll{
  /* Solo este contenedor hace scroll. overscroll-behavior:contain evita el
     "scroll chaining" que arrastraría a la página entera al llegar a los
     extremos. */
  height:min(70vh,720px);
  overflow-y:auto;
  overscroll-behavior:contain;
  scroll-behavior:smooth;
  border:1px solid #3a2a5a;
  border-radius:12px;
  background:
    radial-gradient(circle at 50% 10%, rgba(180,120,255,.10), transparent 60%),
    linear-gradient(180deg,#0c0814 0%,#1a1024 50%,#0c0814 100%);
  padding:1rem .8rem;
  box-shadow:inset 0 0 40px rgba(0,0,0,.6);
  position:relative;
}
.tower-scroll::-webkit-scrollbar{width:10px}
.tower-scroll::-webkit-scrollbar-track{background:#0a0610;border-radius:5px}
.tower-scroll::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#5a3a8a,#3a2060);border-radius:5px;border:1px solid #2a1a4a}
.tower-scroll::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#7a5aaa,#4a2880)}

.tower-floors{display:flex;flex-direction:column-reverse;gap:.8rem;align-items:stretch;position:relative}
.tower-loading{color:var(--muted);text-align:center;padding:1.5rem;font-style:italic}

.tower-floor{
  position:relative;
  border:1px solid #3a2a5a;
  border-radius:12px;
  background:linear-gradient(180deg,#1a1024,#100818);
  padding:.9rem 1rem;
  box-shadow:0 4px 18px rgba(0,0,0,.4);
  display:flex;
  gap:.9rem;
  align-items:center;
  transition:transform .15s, box-shadow .25s, border-color .25s;
}
.tower-floor::before{
  /* Línea vertical que conecta los pisos como una "torre". */
  content:'';
  position:absolute;
  left:50%;
  top:-.85rem;
  width:2px;
  height:.85rem;
  background:linear-gradient(180deg,transparent,#5a3a8a);
  transform:translateX(-50%);
  pointer-events:none;
}
.tower-floor:last-child::before{display:none}

.tower-floor.locked{opacity:.55;filter:saturate(.4)}
.tower-floor.cleared{border-color:#5a8a4a;box-shadow:0 4px 18px rgba(80,180,80,.18)}
.tower-floor.current{border-color:var(--gold);box-shadow:0 0 26px rgba(201,168,76,.35);animation:tower-current-pulse 2.4s ease-in-out infinite}
@keyframes tower-current-pulse{
  0%,100%{box-shadow:0 0 18px rgba(201,168,76,.30)}
  50%   {box-shadow:0 0 32px rgba(201,168,76,.55)}
}

.tower-floor-num{
  flex:0 0 auto;
  width:54px;height:54px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:radial-gradient(circle,#3a2a5a,#1a0a2a);
  border:2px solid #5a3a8a;
  font-family:'Cinzel',serif;font-weight:700;font-size:1.1rem;
  color:#e8d8ff;
  text-shadow:0 1px 4px rgba(0,0,0,.8);
}
.tower-floor.cleared .tower-floor-num{border-color:#7acc7a;background:radial-gradient(circle,#2a4a2a,#0a1a0a);color:#c8ffc8}
.tower-floor.current .tower-floor-num{border-color:var(--gold);background:radial-gradient(circle,#5a4a1a,#2a1a0a);color:#ffe890}

.tower-floor-avatar{
  flex:0 0 auto;
  width:64px;height:64px;
  display:flex;align-items:center;justify-content:center;
  font-size:2.4rem;
  border-radius:12px;
  background:rgba(0,0,0,.35);
  border:1px solid #3a2a5a;
}

.tower-floor-info{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:.2rem}
.tower-floor-name{font-family:'Cinzel',serif;color:#ffd86b;font-size:1.05rem;font-weight:700;line-height:1.1}
.tower-floor-title{color:#b8a8d0;font-size:.75rem;font-style:italic}
.tower-floor-desc{color:#d0c8b8;font-size:.78rem;line-height:1.3;margin-top:.2rem}
.tower-floor-reward{display:inline-flex;align-items:center;gap:.4rem;margin-top:.35rem;font-size:.78rem;color:#e8d0a0}
.tower-floor-reward .pill{background:rgba(201,168,76,.15);border:1px solid #5a4a1a;border-radius:999px;padding:.1rem .55rem;color:#ffd86b;font-weight:600}

.tower-floor-action{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:.3rem}
.tower-floor-status{font-size:.68rem;letter-spacing:.05em;text-transform:uppercase;color:#a89b8c}
.tower-floor.cleared .tower-floor-status{color:#7acc7a}
.tower-floor.current .tower-floor-status{color:#ffd86b}
.tower-floor.locked  .tower-floor-status{color:#88688c}

.tower-empty-future{
  border:1px dashed #3a2a5a;
  border-radius:12px;
  padding:1rem;
  color:#88789c;
  text-align:center;
  font-style:italic;
  font-size:.85rem;
  background:rgba(0,0,0,.2);
}

/* Modal de combate */
.tower-fight-box{
  background:#15101a;
  border:1px solid var(--gold);
  border-radius:14px;
  padding:1.2rem;
  max-width:560px;width:100%;
  max-height:88vh;display:flex;flex-direction:column;gap:.7rem;
  box-shadow:0 0 40px rgba(201,168,76,.3);
}
.tower-fight-header{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.tower-fight-side{flex:1;display:flex;flex-direction:column;align-items:center;gap:.25rem;min-width:0}
.tower-fight-avatar{font-size:2.6rem;width:64px;height:64px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(0,0,0,.4);border:2px solid #3a2a5a}
.tower-fight-side-player .tower-fight-avatar{border-color:var(--gold)}
.tower-fight-side-enemy .tower-fight-avatar{border-color:#aa3a3a}
.tower-fight-name{font-family:'Cinzel',serif;color:#e8d8ff;font-size:.9rem;text-align:center;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tower-fight-vs{font-family:'Cinzel',serif;color:var(--gold);font-size:1.4rem;font-weight:700;letter-spacing:.1em}
.tower-fight-hpbar{width:100%;height:10px;background:#111;border-radius:5px;border:1px solid #2a1a4a;overflow:hidden}
.tower-fight-hpbar-fill{height:100%;width:100%;background:linear-gradient(90deg,#4ade80,#22c55e);transition:width .35s ease-out}
.tower-fight-hpbar-fill.enemy{background:linear-gradient(90deg,#ef4444,#b91c1c)}
.tower-fight-hp{font-size:.72rem;color:#b8a8d0}
.tower-fight-log{
  flex:1 1 auto;min-height:140px;max-height:280px;overflow-y:auto;
  background:#0a0814;border:1px solid #2a1a4a;border-radius:8px;
  padding:.6rem .8rem;font-size:.82rem;color:#d8c8e8;line-height:1.45;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  overscroll-behavior:contain;
}
.tower-fight-log .log-line{margin:0;padding:.1rem 0;animation:tower-log-in .25s ease-out}
.tower-fight-log .log-turn{color:var(--gold);font-weight:700;margin-top:.3rem}
@keyframes tower-log-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.tower-fight-result{
  text-align:center;font-family:'Cinzel',serif;font-size:1.1rem;padding:.6rem;border-radius:8px;
}
.tower-fight-result.victory{background:rgba(80,180,80,.15);border:1px solid #4a8a4a;color:#9ef09e}
.tower-fight-result.defeat {background:rgba(200,60,60,.15);border:1px solid #8a3a3a;color:#ff9a9a}
.tower-fight-result.draw   {background:rgba(140,140,140,.15);border:1px solid #6a6a6a;color:#d8d8d8}
.tower-fight-actions{display:flex;justify-content:flex-end;gap:.5rem}

/* ══════════════════════════════════════════════════════════════════
   TUTORIAL DE ONBOARDING
   Overlay con spotlight sobre la UI real. Sólo se monta cuando el
   sistema de tutorial está activo. El backdrop oscurece toda la
   pantalla salvo el "hole" recortado sobre el elemento destacado.
   ══════════════════════════════════════════════════════════════════ */
/* z-index por debajo del overlay del cofre (z=9999) para que los modales
   transaccionales de la app (cofres, batalla...) se muestren por encima
   del overlay del tutorial cuando estén abiertos. La tarjeta del tutorial
   se eleva por encima del backdrop pero por debajo del overlay del cofre. */
/* IMPORTANTE: #tutorial-root es un contenedor LÓGICO que NO crea stacking
   context. Sus hijos (panels, hole, card, arrow) son todos `position:fixed`
   con coordenadas propias, así que el contenedor solo necesita existir
   en el DOM. `position:static` evita que iOS Safari/Webkit promueva
   `position:fixed` a stacking context (lo que atraparía la card por
   debajo de las vistas elevadas con z-index). */
#tutorial-root{position:static;pointer-events:none}
/* Backdrop dividido en 4 paneles (top/right/bottom/left). El área del
   target queda LITERALMENTE sin elemento backdrop encima — los clics
   pasan directos al target. Cada panel intercepta clics fuera del
   target para bloquear cualquier otra interacción de la UI. */
#tutorial-root .tut-backdrop-panel{
  position:fixed;
  background:rgba(4,2,10,.85);
  pointer-events:auto;
  z-index:8000;
  transition:background .25s ease;
}
/* "Agujero" de luz sobre el elemento destacado. Usa box-shadow gigante
   para crear el efecto de spotlight sin recortes reales del DOM, así
   que funciona en cualquier elemento sin afectar al layout. */
/* El hole ahora solo dibuja el "marco" dorado alrededor del target. La
   oscuridad la generan los 4 paneles backdrop. NO usa box-shadow gigante
   porque ya no necesita enmascarar nada. */
#tutorial-root .tut-hole{
  position:fixed;border-radius:14px;
  box-shadow:0 0 28px 6px rgba(201,168,76,.75), inset 0 0 14px 2px rgba(255,215,112,.35);
  outline:2px solid rgba(255,215,112,.95);
  pointer-events:none;
  z-index:8002;
  transition:top .35s cubic-bezier(.4,.0,.2,1),left .35s cubic-bezier(.4,.0,.2,1),
             width .35s cubic-bezier(.4,.0,.2,1),height .35s cubic-bezier(.4,.0,.2,1);
}
/* Elemento marcado como target del paso actual: lo elevamos por encima
   del backdrop con z-index para que sea visualmente "iluminado". Su
   clicabilidad la decide el motor del tutorial (paso interactivo). */
/* El target se eleva por encima del backdrop con z-index 8001 (backdrop
   inside #tutorial-root z=8000). Mantenemos pointer-events:auto para que
   sea clicable y NO añadimos box-shadow propio para no oscurecer el contenido
   — el resalte visual lo hace el `box-shadow` del .tut-hole alrededor. */
body.tutorial-active .tut-target{
  position:relative;z-index:8001;
  pointer-events:auto;
}
/* Pasos informativos: el target se ve resaltado pero los clicks dentro
   no producen ninguna acción. El jugador debe avanzar con "Siguiente". */
body.tutorial-active .tut-target.tut-noclick,
body.tutorial-active .tut-target.tut-noclick *{
  pointer-events:none !important;
}
/* Tarjeta de texto */
#tutorial-root .tut-card{
  position:fixed;
  background:linear-gradient(180deg,#1a1426 0%,#120c1e 100%);
  border:1.5px solid var(--gold,#c9a84c);
  border-radius:14px;
  padding:1rem 1.1rem 1rem 1.1rem;
  color:#e8e0d0;
  box-shadow:0 0 38px rgba(201,168,76,.32),0 4px 20px rgba(0,0,0,.6);
  pointer-events:auto;
  /* z absurdamente alto para que la card SIEMPRE quede encima del
     contenido de la vista destacada (target lifted z=8001, chest modal
     z=9999, etc.) — pero por debajo de overlays globales del navegador. */
  z-index:2147483646;
  isolation:isolate;
  max-width:calc(100vw - 24px);
  animation:tut-card-in .35s cubic-bezier(.4,.0,.2,1);
}
/* Flecha animada que apunta al elemento que el jugador debe pulsar.
   Solo visible en pasos con `arrow:true` (chest-open, tower-fight). */
#tutorial-root .tut-arrow{
  position:fixed;display:none;
  width:36px;height:36px;line-height:36px;text-align:center;
  font-size:30px;color:#ffe07a;
  text-shadow:0 0 12px #ffd770,0 0 4px #fff;
  z-index:2147483646;pointer-events:none;
  animation:tut-arrow-bounce 1.1s ease-in-out infinite;
  transform-origin:50% 50%;
}
@keyframes tut-arrow-bounce{
  0%,100%{filter:drop-shadow(0 0 6px #ffd770)}
  50%   {filter:drop-shadow(0 0 14px #ffe07a) brightness(1.3)}
}
@keyframes tut-card-in{
  from{opacity:0;transform:translateY(8px) scale(.98)}
  to  {opacity:1;transform:translateY(0)    scale(1)}
}
#tutorial-root .tut-card.tut-card-center{box-shadow:0 0 50px rgba(201,168,76,.45),0 4px 30px rgba(0,0,0,.7)}
#tutorial-root .tut-card-header{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:.45rem;
}
#tutorial-root .tut-card-counter{
  font-size:.72rem;letter-spacing:.08rem;color:#a89b8c;
  text-transform:uppercase;font-family:'Cinzel',serif;
}
#tutorial-root .tut-card-title{
  font-family:'Cinzel',serif;color:var(--gold,#c9a84c);
  font-size:1.05rem;margin-bottom:.4rem;line-height:1.25;
}
#tutorial-root .tut-card-text{
  font-size:.92rem;line-height:1.45;color:#d8d0bf;
  margin-bottom:.85rem;word-break:break-word;
}
#tutorial-root .tut-card-text strong{color:#f0d080}
#tutorial-root .tut-card-actions{
  display:flex;justify-content:flex-end;gap:.5rem;
}
#tutorial-root .tut-btn{
  font-family:inherit;cursor:pointer;
  padding:.55rem 1rem;border-radius:8px;font-weight:600;
  border:1px solid var(--gold,#c9a84c);
  background:linear-gradient(180deg,#3a2d12,#241a0a);
  color:#f0d080;
  transition:background .18s,transform .12s;
}
#tutorial-root .tut-btn:hover  {background:linear-gradient(180deg,#4a3d22,#34280a);transform:translateY(-1px)}
#tutorial-root .tut-btn:active {transform:translateY(0)}
#tutorial-root .tut-btn-finish{
  background:linear-gradient(180deg,#1f4a1f,#0e2e0e);border-color:#6cbf6c;color:#bcf0bc;
}
#tutorial-root .tut-btn-finish:hover{background:linear-gradient(180deg,#2a5a2a,#143a14)}

/* Lock global de UI: mientras el tutorial está activo, todo lo que NO
   esté marcado como target queda no-clicable (el backdrop intercepta).
   Esto se garantiza por: backdrop con pointer-events:auto + el target
   elevado por encima vía .tut-target. */
body.tutorial-active{overflow:hidden}
/* Navegación lateral siempre bloqueada salvo que se marque target. */
body.tutorial-active #main-nav{pointer-events:none}
body.tutorial-active #main-nav .tut-target,
body.tutorial-active #main-nav .tut-target *{pointer-events:auto}
/* Garantizar que dentro del target los hijos también sean clicables
   (botones internos, items hijos del lootbox-list, etc.). */
body.tutorial-active .tut-target *{pointer-events:auto}

/* ══ MODO COMBATE BLOQUEADO ══
   body.combat-locked se activa cuando el jugador tiene un combate activo.
   Oculta el header y todos los botones de nav salvo el selector de idioma.
   El botón "Volver" del topbar de batalla también se oculta (el jugador
   solo puede salir rindiéndose o terminando la partida). */
body.combat-locked header{display:none!important}
body.combat-locked #main-nav .nav-btn{display:none!important}
body.combat-locked #main-nav{justify-content:flex-end}
body.combat-locked #btn-battle-back{display:none!important}
body.combat-locked #group-status-badge{display:none!important}

/* ══ BADGES ESQUINA SUPERIOR DERECHA: chat + grupo ══ */
#top-corner-badges{
  position:fixed;top:12px;right:12px;z-index:9998;
  display:flex;align-items:center;gap:.4rem;
}
/* Badge de chat sin leer — visible en todas las pantallas incluso combate */
#chat-unread-badge{
  display:flex;align-items:center;gap:.35rem;
  background:linear-gradient(135deg,rgba(20,30,55,.95),rgba(12,20,40,.95));
  border:2px solid #4a90d9;border-radius:999px;
  padding:.4rem .8rem;color:#fff;font-size:.85rem;font-weight:600;
  box-shadow:0 0 14px rgba(74,144,217,.4),0 2px 8px rgba(0,0,0,.45);
  cursor:pointer;font-family:inherit;
  transition:transform .15s ease,box-shadow .2s ease;
}
#chat-unread-badge:hover{transform:scale(1.06);box-shadow:0 0 22px rgba(74,144,217,.6),0 4px 12px rgba(0,0,0,.55)}
#chat-unread-badge.hidden{display:none!important}
#chat-unread-badge .chat-badge-icon{font-size:1.05rem;line-height:1}
#chat-unread-badge .chat-badge-count{
  background:rgba(74,144,217,.18);border:1px solid rgba(74,144,217,.55);
  border-radius:999px;padding:.05rem .45rem;font-size:.75rem;letter-spacing:.02em;
}
/* Badge permanente de grupo — visible en todas las pantallas salvo combate. Click → abre panel de grupo. */
#group-status-badge{
  display:flex;align-items:center;gap:.4rem;
  background:linear-gradient(135deg,rgba(34,40,55,.95),rgba(20,24,36,.95));
  border:2px solid #fbbf24;border-radius:999px;
  padding:.4rem .8rem;color:#fff;font-size:.85rem;font-weight:600;
  box-shadow:0 0 14px rgba(251,191,36,.4),0 2px 8px rgba(0,0,0,.45);
  cursor:pointer;font-family:inherit;
  transition:transform .15s ease,box-shadow .2s ease;
}
#group-status-badge:hover{transform:scale(1.06);box-shadow:0 0 22px rgba(251,191,36,.6),0 4px 12px rgba(0,0,0,.55)}
#group-status-badge.hidden{display:none!important}
#group-status-badge .group-badge-icon{font-size:1.05rem;line-height:1}
#group-status-badge .group-badge-count{
  background:rgba(251,191,36,.18);border:1px solid rgba(251,191,36,.55);
  border-radius:999px;padding:.05rem .45rem;font-size:.75rem;letter-spacing:.02em;
}
@media (max-width:520px){
  #top-corner-badges{top:8px;right:8px}
  #group-status-badge{padding:.35rem .6rem;font-size:.78rem}
  #chat-unread-badge{padding:.35rem .6rem;font-size:.78rem}
}

/* ══ MODAL DE INVITACIÓN A GRUPO ══ */
.lobby-invite-modal-overlay{
  position:fixed;inset:0;z-index:9999;
  background:rgba(0,0,0,.72);
  display:flex;align-items:center;justify-content:center;padding:1rem;
  animation:lobbyInviteFadeIn .18s ease-out;
}
.lobby-invite-modal-overlay.hidden{display:none!important}
.lobby-invite-modal-card{
  max-width:420px;width:100%;
  border:2px solid #fbbf24;
  box-shadow:0 0 32px rgba(251,191,36,.45);
  animation:lobbyInvitePop .25s cubic-bezier(.2,.9,.3,1.3);
}
@keyframes lobbyInviteFadeIn{from{opacity:0}to{opacity:1}}
@keyframes lobbyInvitePop{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
.lobby-invite-modal-head{display:flex;align-items:center;gap:.8rem;margin-bottom:.7rem}
.lobby-invite-avatar{
  width:48px;height:48px;border-radius:50%;
  background:linear-gradient(135deg,#fbbf24,#b45309);
  display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;flex-shrink:0;
  box-shadow:0 0 12px rgba(251,191,36,.55);
}
.lobby-invite-title{font-weight:700;font-size:1rem;color:#fbbf24}
.lobby-invite-text{font-size:.9rem;margin-top:.15rem;color:#e7e7ea}
.lobby-invite-timer-row{display:flex;align-items:center;gap:.6rem;margin:.6rem 0 .9rem}
.lobby-invite-timer-bar{
  flex:1;height:6px;background:rgba(255,255,255,.1);border-radius:3px;overflow:hidden;
}
.lobby-invite-timer-fill{
  height:100%;background:linear-gradient(90deg,#fbbf24,#f59e0b);
  width:100%;transition:width 1s linear;
}
.lobby-invite-timer-text{font-size:.78rem;color:var(--muted);font-variant-numeric:tabular-nums;min-width:28px;text-align:right}
.lobby-invite-modal-actions{display:flex;gap:.6rem;justify-content:flex-end}

/* ══ OVERLAY DEL LÍDER ESPERANDO ══ */
.duo-leader-waiting-overlay{
  position:fixed;inset:0;z-index:9998;
  background:rgba(0,0,0,.65);
  display:flex;align-items:center;justify-content:center;padding:1rem;
  animation:lobbyInviteFadeIn .18s ease-out;
}
.duo-leader-waiting-overlay.hidden{display:none!important}
.duo-leader-waiting-card{
  background:linear-gradient(135deg,rgba(34,40,55,.96),rgba(20,24,36,.96));
  border:2px solid #c084fc;border-radius:14px;
  padding:1.2rem 1.4rem;max-width:380px;width:100%;
  text-align:center;color:#fff;
  box-shadow:0 0 28px rgba(192,132,252,.45);
}
.duo-leader-waiting-spinner{
  width:42px;height:42px;margin:0 auto .6rem;
  border:3px solid #c084fc;border-top-color:transparent;border-radius:50%;
  animation:duo2v2spin 0.9s linear infinite;
}
.duo-leader-waiting-title{font-weight:700;font-size:1.05rem;color:#c084fc;margin-bottom:.3rem}
.duo-leader-waiting-text{font-size:.9rem;color:#e7e7ea;margin-bottom:.5rem}
.duo-leader-waiting-text #duo-leader-waiting-name{color:#fbbf24;font-weight:700;margin-right:.3rem}
.duo-leader-waiting-timer{font-size:1.4rem;font-weight:700;color:#fbbf24;font-variant-numeric:tabular-nums;margin-bottom:.8rem}

@media (max-width:520px){
  #tutorial-root .tut-card{padding:.85rem .9rem}
  #tutorial-root .tut-card-title{font-size:.98rem}
  #tutorial-root .tut-card-text{font-size:.85rem}
}

/* ══ NAV MÓVIL (bottom bar + drawer) ══
   Visible solo < 768px. En desktop el nav clásico (#main-nav) se mantiene
   intacto. En móvil ocultamos #main-nav y mostramos #mobile-nav fijo abajo.
   Durante combate (body.combat-locked) todo el nav móvil desaparece. */
#mobile-nav,#mobile-drawer,#mobile-drawer-overlay{display:none}
@media (max-width:767px){
  /* Desktop nav fuera */
  #main-nav{display:none!important}
  /* Header más compacto en móvil para liberar espacio */
  header{padding:.55rem .8rem .35rem}
  header h1{font-size:1.3rem;letter-spacing:.05em}
  header p{display:none}
  /* Reserva espacio para que el contenido no quede debajo de la bottom bar */
  body.mobile-nav-on:not(.combat-locked){
    padding-bottom:calc(60px + env(safe-area-inset-bottom,0px));
  }
  /* Mostrar elementos del nav móvil cuando no están .hidden */
  #mobile-nav:not(.hidden){display:flex}
  #mobile-drawer-overlay:not(.hidden){display:block}
  #mobile-drawer:not(.hidden){display:flex}
}

#mobile-nav{
  position:fixed;left:0;right:0;bottom:0;z-index:9990;
  justify-content:space-around;align-items:stretch;gap:0;
  background:linear-gradient(180deg,rgba(13,11,21,.96),rgba(8,6,16,.98));
  border-top:1px solid var(--border-g);
  padding:.25rem .25rem calc(.25rem + env(safe-area-inset-bottom,0px));
  box-shadow:0 -4px 18px rgba(0,0,0,.55);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}

.mobile-nav-btn{
  flex:1 1 0;min-width:0;position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  padding:.4rem .2rem;min-height:52px;
  background:transparent;border:0;cursor:pointer;border-radius:8px;
  font-family:'Cinzel',serif;font-size:.6rem;letter-spacing:.03em;color:var(--muted);
  transition:color .15s,background .15s,transform .12s;
}
.mobile-nav-btn .mnb-ico{font-size:1.25rem;line-height:1}
.mobile-nav-btn .mnb-lbl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;font-size:.6rem}
.mobile-nav-btn:active{transform:scale(.94)}
.mobile-nav-btn:hover,.mobile-nav-btn:focus-visible{color:var(--gold-l);outline:none}
.mobile-nav-btn.active{
  color:var(--gold-l);
  background:linear-gradient(180deg,rgba(201,168,76,.20),rgba(201,168,76,.04));
}
.mobile-nav-btn.active .mnb-ico{filter:drop-shadow(0 0 6px rgba(240,208,128,.55))}
/* Anular CSS del .nav-btn desktop sobre los botones mobile */
.mobile-nav-btn.nav-btn{padding:.4rem .2rem;border:0;background:transparent;font-size:.6rem}
.mobile-nav-btn.nav-btn.active{background:linear-gradient(180deg,rgba(201,168,76,.20),rgba(201,168,76,.04));border:0;color:var(--gold-l)}

.mobile-nav-btn .mnb-dot{
  position:absolute;top:5px;right:18%;
  width:8px;height:8px;background:#ff4d4f;border-radius:50%;
  box-shadow:0 0 6px #ff4d4f;
  animation:notif-bell-pulse 1.6s ease-in-out infinite;
}
.mobile-nav-btn .mnb-dot.hidden{display:none}

/* Overlay */
.mobile-drawer-overlay{
  position:fixed;inset:0;z-index:9994;
  background:rgba(0,0,0,.55);
  animation:mdrawer-fadein .18s ease;
}
@keyframes mdrawer-fadein{from{opacity:0}to{opacity:1}}

/* Drawer panel */
.mobile-drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(86vw,320px);z-index:9995;
  flex-direction:column;
  background:linear-gradient(180deg,#14101e 0%,#0d0a17 100%);
  border-left:1px solid var(--border-g);
  box-shadow:-8px 0 24px rgba(0,0,0,.6);
  transform:translateX(100%);
  transition:transform .22s cubic-bezier(.2,.8,.3,1);
  padding:calc(.4rem + env(safe-area-inset-top,0px)) 0 calc(.4rem + env(safe-area-inset-bottom,0px));
}
.mobile-drawer.open{transform:translateX(0)}

.mobile-drawer-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:.4rem .9rem .7rem;border-bottom:1px solid var(--border);
}
.mobile-drawer-title{
  font-family:'Cinzel',serif;font-size:1.05rem;color:var(--gold-l);letter-spacing:.08em;
  text-shadow:0 0 12px rgba(240,208,128,.3);
}
.mobile-drawer-close{
  background:transparent;border:1px solid var(--border);color:var(--muted);
  width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:.95rem;
  display:flex;align-items:center;justify-content:center;
  transition:color .15s,border-color .15s,transform .12s;
}
.mobile-drawer-close:hover{color:var(--gold);border-color:var(--gold)}
.mobile-drawer-close:active{transform:scale(.92)}

.mobile-drawer-list{
  flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:.5rem .6rem;display:flex;flex-direction:column;gap:.2rem;
}

.drawer-item.nav-btn{
  display:flex;align-items:center;gap:.7rem;width:100%;
  background:transparent;border:1px solid transparent;
  color:var(--text);font-family:'Cinzel',serif;font-size:.85rem;letter-spacing:.03em;
  padding:.7rem .8rem;border-radius:8px;text-align:left;cursor:pointer;
  transition:background .15s,border-color .15s,color .15s,transform .12s;
}
.drawer-item.nav-btn:hover{background:rgba(201,168,76,.08);border-color:rgba(201,168,76,.3);color:var(--gold-l)}
.drawer-item.nav-btn:active{transform:scale(.98)}
.drawer-item.nav-btn.active{background:rgba(201,168,76,.18);color:var(--gold-l);border-color:var(--gold-d)}
.drawer-item .di-ico{font-size:1.1rem;width:24px;text-align:center;line-height:1}
.drawer-item .di-lbl{flex:1}

.drawer-divider{height:1px;background:var(--border);margin:.5rem .25rem}
.drawer-row{
  display:flex;align-items:center;gap:.7rem;
  padding:.55rem .8rem;color:var(--text);font-family:'Cinzel',serif;font-size:.85rem;
}
.drawer-lang-select{margin-left:auto;min-width:120px}

.notif-dot-inline{
  width:9px;height:9px;border-radius:50%;background:#ff4d4f;
  box-shadow:0 0 6px #ff4d4f;display:inline-block;flex-shrink:0;
}
.notif-dot-inline.hidden{display:none}

.drawer-logout{color:#ff8a7a!important}
.drawer-logout:hover{border-color:var(--red)!important;background:rgba(192,57,43,.12)!important;color:#ffb3a8!important}

/* Combate: ocultar todo el nav móvil + drawer (igual que en desktop) */
body.combat-locked #mobile-nav{display:none!important}
body.combat-locked #mobile-drawer,
body.combat-locked #mobile-drawer-overlay{display:none!important}

/* Tutorial: bloquear nav móvil salvo dentro de tut-target */
body.tutorial-active #mobile-nav{pointer-events:none}
body.tutorial-active #mobile-nav .tut-target,
body.tutorial-active #mobile-nav .tut-target *{pointer-events:auto}

/* Orientación landscape en móvil pequeño: bottom bar un poco más fina */
@media (max-width:767px) and (orientation:landscape){
  #mobile-nav{padding-top:.15rem}
  .mobile-nav-btn{min-height:46px;padding:.25rem .2rem}
  .mobile-nav-btn .mnb-ico{font-size:1.1rem}
  body.mobile-nav-on:not(.combat-locked){padding-bottom:calc(50px + env(safe-area-inset-bottom,0px))}
}

/* ══ SUBMENÚ DE PERSONAJE (long-press) ══
   Popup vertical sobre el botón Personaje del bottom-nav. Cada bolita es
   un atajo a una sección de hero-view (perfil, mina, loadout, fusión,
   mercader, cofres, habilidades). Arrastra sin soltar para resaltar y
   suelta para navegar + scrollIntoView. */
.mobile-hero-submenu{
  position:fixed;z-index:9996;
  display:flex;flex-direction:column-reverse;gap:.45rem;
  padding:.55rem;border-radius:14px;
  background:linear-gradient(180deg,rgba(20,16,30,.97),rgba(10,8,18,.99));
  border:1px solid var(--gold-d);
  box-shadow:0 8px 28px rgba(0,0,0,.65),0 0 18px rgba(201,168,76,.25);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  pointer-events:none;
  opacity:0;transform:translateY(6px) scale(.92);transform-origin:50% 100%;
  transition:opacity .14s ease,transform .14s cubic-bezier(.2,.9,.3,1.2);
  touch-action:none;
}
.mobile-hero-submenu.open{
  opacity:1;transform:translateY(0) scale(1);pointer-events:auto;
}
.mobile-hero-submenu.hidden{display:none}

.hero-sub-dot{
  display:flex;align-items:center;gap:.55rem;
  background:linear-gradient(135deg,#1c1733,#0e0b1e);
  border:1.5px solid var(--gold-d);color:var(--gold-l);
  border-radius:999px;padding:.42rem .9rem .42rem .42rem;
  font-family:'Cinzel',serif;font-size:.78rem;letter-spacing:.04em;
  cursor:pointer;min-height:44px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .12s,background .14s,border-color .14s,box-shadow .14s,color .14s;
  user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;
}
.hero-sub-dot-ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:50%;
  background:rgba(0,0,0,.35);font-size:1rem;flex-shrink:0;
}
.hero-sub-dot-lbl{white-space:nowrap}
.hero-sub-dot.is-hover{
  background:linear-gradient(135deg,#3a2e6e,#1d1538);
  border-color:var(--gold);color:#fff;transform:scale(1.06);
  box-shadow:0 0 16px rgba(240,208,128,.7),inset 0 1px 0 rgba(255,255,255,.12);
}
.hero-sub-dot.is-hover .hero-sub-dot-ico{background:rgba(0,0,0,.55)}

/* Pulso visual breve al hacer scrollIntoView a una sección */
.hero-section-pulse{
  animation:hero-section-pulse 1.1s ease;
}
@keyframes hero-section-pulse{
  0%   {box-shadow:0 0 0 0 rgba(240,208,128,0)}
  20%  {box-shadow:0 0 0 4px rgba(240,208,128,.55),0 0 28px rgba(240,208,128,.45)}
  100% {box-shadow:0 0 0 0 rgba(240,208,128,0)}
}

/* ── Levantar elementos fixed-bottom por encima del mobile-nav ──
   Cuando la bottom bar está visible (body.mobile-nav-on y NO combate),
   empujamos hacia arriba los elementos flotantes anclados abajo (chat con
   amigos, toast, botón APK) para que no queden tapados por la barra. */
@media (max-width:767px){
  body.mobile-nav-on:not(.combat-locked) .friend-chat-panel{
    bottom:calc(72px + env(safe-area-inset-bottom,0px))!important;
    right:8px;left:auto;width:calc(100vw - 16px);max-width:360px;
  }
  /* Panel chat: lista interna no debe quedar enorme en móviles */
  body.mobile-nav-on:not(.combat-locked) .friend-chat-panel .friend-chat-list{
    max-height:38vh;
  }
  body.mobile-nav-on:not(.combat-locked) #toast{
    bottom:calc(72px + env(safe-area-inset-bottom,0px));
  }
  body.mobile-nav-on:not(.combat-locked) #apk-download-btn{
    bottom:calc(72px + env(safe-area-inset-bottom,0px));
  }
}