:root{
  --bg:#0a0e14;
  --bg-panel:rgba(13,20,30,0.82);
  --cyan:#06b6d4;
  --cyan-bright:#22d3ee;
  --cyan-glow:rgba(6,182,212,0.15);
  --cyan-glow-strong:rgba(6,182,212,0.35);
  --red:#ef4444;
  --yellow:#f59e0b;
  --green:#22c55e;
  --gold:#f59e0b;
  --purple:#a855f7;
  --blue:#3b82f6;
  --gray:#64748b;
  --text:#e2e8f0;
  --text-dim:#94a3b8;
  --font:'Inter','Segoe UI',sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  font-family:var(--font);
  background:#05080c;
  color:var(--text);
  overflow:hidden;
  user-select:none;
  -webkit-user-select:none;
}

#app{
  position:relative;
  width:100%;
  height:100dvh;
  max-width:480px;
  margin:0 auto;
  background:var(--bg);
  overflow:hidden;
  box-shadow:0 0 60px rgba(0,0,0,0.8);
}

#screens,#overlay-root,#toast-root{position:absolute;inset:0;}
#overlay-root{pointer-events:none;z-index:50;}
#overlay-root>*{pointer-events:auto;}
#toast-root{pointer-events:none;z-index:90;display:flex;flex-direction:column;align-items:center;padding-top:12px;gap:8px;}

/* ---------- Screen base ---------- */
.screen{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  animation:screenIn .35s ease;
}
@keyframes screenIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

.scroll{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;flex:1;}
.scroll::-webkit-scrollbar{width:5px;}
.scroll::-webkit-scrollbar-thumb{background:var(--cyan);border-radius:3px;}

/* ---------- Panels ---------- */
.panel{
  background:var(--bg-panel);
  border:1px solid rgba(6,182,212,0.4);
  border-radius:14px;
  box-shadow:0 0 18px var(--cyan-glow), inset 0 0 24px rgba(6,182,212,0.04);
  backdrop-filter:blur(6px);
}

/* ---------- Buttons ---------- */
.btn{
  display:flex;align-items:center;justify-content:center;gap:10px;
  min-height:54px;padding:0 20px;
  font-family:var(--font);font-size:16px;font-weight:700;
  color:var(--text);
  background:linear-gradient(135deg,rgba(6,182,212,0.18),rgba(6,182,212,0.06));
  border:1.5px solid var(--cyan);
  border-radius:12px;
  cursor:pointer;
  transition:transform .12s, box-shadow .2s, background .2s;
  box-shadow:0 0 14px var(--cyan-glow);
}
.btn:active{transform:scale(.97);}
.btn.big{min-height:60px;font-size:18px;letter-spacing:.5px;}
.btn.primary{
  background:linear-gradient(135deg,var(--cyan),#0891b2);
  color:#04161b;border-color:var(--cyan-bright);
  box-shadow:0 0 22px var(--cyan-glow-strong);
}
.btn.gold{
  background:linear-gradient(135deg,#fbbf24,#d97706);
  color:#1a1206;border-color:#fcd34d;
  box-shadow:0 0 22px rgba(245,158,11,0.4);
}
.btn.ghost{background:rgba(13,20,30,0.7);}
.btn:disabled{opacity:.4;cursor:default;filter:grayscale(.5);box-shadow:none;}
.btn.pulse{animation:btnPulse 1.1s ease-in-out infinite;}
@keyframes btnPulse{0%,100%{box-shadow:0 0 14px var(--cyan-glow);}50%{box-shadow:0 0 28px var(--cyan-glow-strong);}}

/* ---------- Top HUD bar ---------- */
.hud-top{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:10px 12px;
  background:linear-gradient(180deg,rgba(10,14,20,0.96),rgba(10,14,20,0.7));
  border-bottom:1px solid rgba(6,182,212,0.3);
  z-index:5;
}
.hud-dir{display:flex;align-items:center;gap:9px;min-width:0;}
.hud-avatar{
  width:38px;height:38px;border-radius:50%;flex-shrink:0;
  border:2px solid var(--cyan);object-fit:cover;
  box-shadow:0 0 10px var(--cyan-glow);
}
.hud-dir-info{min-width:0;}
.hud-dir-name{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hud-dir-lvl{font-size:11px;color:var(--cyan-bright);font-weight:600;}
.hud-shards{
  display:flex;align-items:center;gap:6px;
  background:rgba(6,182,212,0.12);
  border:1px solid rgba(6,182,212,0.45);
  border-radius:20px;padding:5px 6px 5px 12px;
}
.hud-shards .val{font-size:15px;font-weight:800;color:var(--cyan-bright);}
.hud-shards .gem{font-size:14px;}
.shard-add{
  width:26px;height:26px;border-radius:50%;
  background:var(--cyan);color:#04161b;border:none;
  font-size:18px;font-weight:800;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}

/* ---------- Intro ---------- */
.intro-screen{position:relative;overflow:hidden;}
.intro-cover{
  position:absolute;inset:0;z-index:0;
  background-size:cover;background-position:center 28%;
  animation:coverZoom 14s ease-in-out infinite alternate;
}
@keyframes coverZoom{0%{transform:scale(1.04);}100%{transform:scale(1.14);}}
.intro-cover-grad{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,
    rgba(5,8,12,0.55) 0%,
    rgba(5,8,12,0.15) 32%,
    rgba(5,8,12,0.55) 62%,
    rgba(5,8,12,0.96) 100%);
}
#intro-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;opacity:.6;}
.intro-content{
  position:relative;z-index:2;flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-end;text-align:center;
  padding:30px 26px 38px;gap:13px;
}
.intro-logo{
  font-size:38px;font-weight:800;letter-spacing:2px;line-height:1.05;
  position:relative;
  background:linear-gradient(180deg,#dffaff,#67d8ff 60%,#2b9fd6);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 10px rgba(6,182,212,0.45));
}
.intro-logo-2{
  display:block;font-size:24px;letter-spacing:5px;
  background:linear-gradient(180deg,#ffe7b0,#f5b73a 55%,#c8851a);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.intro-logo .scanline{
  position:absolute;left:-6%;width:112%;height:3px;top:50%;
  background:linear-gradient(90deg,transparent,var(--cyan-bright),transparent);
  box-shadow:0 0 16px var(--cyan-bright);
  animation:scanMove 2.4s ease-in-out infinite;
}
@keyframes scanMove{0%,100%{top:8%;}50%{top:92%;}}
/* Logo oficial (imagen) en la portada intro */
.intro-logo-img{
  width:min(78vw,360px);max-height:46vh;object-fit:contain;
  filter:drop-shadow(0 0 26px rgba(6,182,212,0.45)) drop-shadow(0 4px 14px rgba(0,0,0,0.6));
}
.intro-sub{font-size:13px;font-weight:700;letter-spacing:2.5px;color:#f5d089;
  max-width:320px;line-height:1.5;text-shadow:0 1px 8px rgba(0,0,0,0.6);}
.intro-tag{font-size:11px;letter-spacing:3px;color:var(--cyan-bright);
  text-shadow:0 1px 6px rgba(0,0,0,0.7);}
.fade-in{animation:fadeIn .8s ease both;}
.fade-in.d1{animation-delay:.3s;}
.fade-in.d2{animation-delay:1.1s;}
.fade-in.d3{animation-delay:1.8s;}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}

/* ---------- HQ ---------- */
.hq-map{
  position:relative;height:170px;flex-shrink:0;margin:12px;border-radius:16px;overflow:hidden;
  border:1px solid rgba(6,182,212,0.4);
  background:#070b11 center/cover no-repeat;
  box-shadow:0 0 20px var(--cyan-glow), inset 0 0 30px rgba(0,0,0,0.6);
}
.hq-map::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,14,20,0.1),rgba(10,14,20,0.75));}
.hq-map-title{position:absolute;top:10px;left:12px;z-index:3;font-size:11px;letter-spacing:2px;color:var(--cyan-bright);font-weight:700;}
.crisis-dot{position:absolute;width:11px;height:11px;border-radius:50%;background:var(--red);z-index:3;
  box-shadow:0 0 0 0 rgba(239,68,68,0.7);animation:crisisPulse 1.8s infinite;}
@keyframes crisisPulse{0%{box-shadow:0 0 0 0 rgba(239,68,68,0.7);}70%{box-shadow:0 0 0 12px rgba(239,68,68,0);}100%{box-shadow:0 0 0 0 rgba(239,68,68,0);}}

.hq-menu{display:flex;flex-direction:column;gap:12px;padding:4px 14px 14px;}
.hq-btn{
  display:flex;align-items:center;gap:14px;min-height:70px;padding:0 18px;
  border-radius:14px;cursor:pointer;
  background:linear-gradient(120deg,rgba(6,182,212,0.14),rgba(13,20,30,0.85));
  border:1.5px solid rgba(6,182,212,0.5);
  box-shadow:0 0 14px var(--cyan-glow);
  transition:transform .12s,box-shadow .2s;
}
.hq-btn:active{transform:scale(.98);}
.hq-btn .ic{font-size:30px;width:42px;text-align:center;flex-shrink:0;}
.hq-btn .tx{flex:1;text-align:left;}
.hq-btn .tt{font-size:18px;font-weight:800;}
.hq-btn .ds{font-size:12px;color:var(--text-dim);margin-top:2px;}
.hq-btn .arrow{font-size:22px;color:var(--cyan-bright);}
.hq-btn.accent{border-color:var(--red);box-shadow:0 0 16px rgba(239,68,68,0.25);background:linear-gradient(120deg,rgba(239,68,68,0.14),rgba(13,20,30,0.85));}
.hq-btn.accent .arrow{color:var(--red);}

.event-bar{
  margin:0 14px 14px;padding:11px 14px;border-radius:12px;
  background:rgba(245,158,11,0.1);border:1px solid rgba(245,158,11,0.45);
  display:flex;align-items:center;gap:10px;
}
.event-bar .ic{font-size:18px;}
.event-bar .tx{flex:1;font-size:12.5px;line-height:1.35;}
.event-bar .tx b{color:var(--yellow);}
.event-bar .timer{font-size:15px;font-weight:800;color:var(--yellow);font-variant-numeric:tabular-nums;}

/* ---------- Section header ---------- */
.sec-head{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid rgba(6,182,212,0.25);}
.sec-back{
  width:42px;height:42px;border-radius:10px;flex-shrink:0;
  background:#0d1722;border:1.5px solid var(--cyan);color:var(--cyan-bright);
  font-size:20px;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.sec-title{font-size:19px;font-weight:800;flex:1;}
.sec-sub{font-size:12px;color:var(--text-dim);}

/* ---------- Mission list ---------- */
/* ---------- Mapa de brotes globales ---------- */
.crisis-map{
  position:relative;margin:12px 14px 4px;border-radius:14px;overflow:hidden;
  border:1.5px solid rgba(6,182,212,0.5);box-shadow:0 0 20px var(--cyan-glow);
  aspect-ratio:16/9;background:#05111a;
}
.crisis-map .cm-img{width:100%;height:100%;object-fit:cover;display:block;
  filter:brightness(.85) saturate(1.15);}
.cm-overlay{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 50% 45%,transparent 55%,rgba(5,8,12,0.7) 100%);}
.cm-label{position:absolute;top:7px;left:9px;font-size:9px;font-weight:700;
  letter-spacing:1.5px;color:var(--cyan-bright);text-shadow:0 1px 4px #000;pointer-events:none;}
.cm-dots{position:absolute;inset:0;}
.cm-dot{position:absolute;width:0;height:0;cursor:pointer;}
.cm-dot .cm-core{
  position:absolute;transform:translate(-50%,-50%);
  width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;color:#05080c;z-index:2;border:2px solid #fff;
}
.cm-dot .cm-ring{
  position:absolute;transform:translate(-50%,-50%);
  width:22px;height:22px;border-radius:50%;z-index:1;
}
.cm-dot.active .cm-core{background:var(--red);box-shadow:0 0 10px var(--red);}
.cm-dot.active .cm-ring{border:2px solid var(--red);animation:crisisPulse 1.8s ease-out infinite;}
.cm-dot.done .cm-core{background:var(--green);box-shadow:0 0 8px var(--green);}
.cm-dot.locked .cm-core{background:var(--gray);border-color:#9aa7b5;color:#e2e8f0;}
.cm-dot.locked{opacity:.75;}
@keyframes crisisPulse{
  0%{box-shadow:0 0 0 0 rgba(239,68,68,0.55);opacity:1;}
  100%{box-shadow:0 0 0 16px rgba(239,68,68,0);opacity:.4;}
}
.cm-dot .cm-tip{
  position:absolute;transform:translate(-50%,-160%);left:0;top:0;
  white-space:nowrap;font-size:9px;font-weight:700;letter-spacing:.5px;
  color:#fff;background:rgba(5,8,12,0.85);border:1px solid rgba(6,182,212,0.5);
  padding:2px 6px;border-radius:6px;opacity:0;transition:opacity .15s;pointer-events:none;z-index:3;
}
.cm-dot.active .cm-tip{opacity:.95;}

.mission-card{
  margin:10px 14px;padding:14px;border-radius:14px;cursor:pointer;
  background:var(--bg-panel);border:1.5px solid rgba(6,182,212,0.4);
  box-shadow:0 0 12px var(--cyan-glow);transition:transform .12s,box-shadow .3s,border-color .3s;
}
.mission-card:active{transform:scale(.98);}
.mission-card.locked{opacity:.5;border-color:var(--gray);filter:grayscale(.6);}
.mission-card.done{border-color:var(--green);}
.mission-card.flash{border-color:var(--cyan-bright);
  box-shadow:0 0 0 2px var(--cyan-bright),0 0 22px var(--cyan-glow-strong);
  animation:cardFlash 1.4s ease;}
@keyframes cardFlash{0%,100%{box-shadow:0 0 0 2px var(--cyan-bright),0 0 22px var(--cyan-glow-strong);}
  50%{box-shadow:0 0 0 2px var(--cyan-bright),0 0 34px var(--cyan-bright);}}
.mc-top{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.mc-zone{font-size:11px;letter-spacing:1px;color:var(--cyan-bright);font-weight:700;}
.mc-name{font-size:17px;font-weight:800;margin:3px 0 6px;}
.mc-stat{font-size:12.5px;color:var(--text-dim);line-height:1.4;}
.mc-badges{display:flex;gap:6px;margin-top:9px;flex-wrap:wrap;}
.pbadge{font-size:12px;font-weight:700;padding:3px 9px;border-radius:8px;}
.pbadge.r{background:rgba(239,68,68,0.18);color:#fca5a5;border:1px solid var(--red);}
.pbadge.y{background:rgba(245,158,11,0.16);color:#fcd34d;border:1px solid var(--yellow);}
.pbadge.g{background:rgba(34,197,94,0.16);color:#86efac;border:1px solid var(--green);}
.mc-foot{display:flex;align-items:center;justify-content:space-between;margin-top:10px;}
.mc-reward{font-size:13px;font-weight:700;color:var(--cyan-bright);}
.mc-go{font-size:13px;font-weight:800;color:var(--cyan-bright);}
.mc-check{color:var(--green);font-weight:800;font-size:13px;}

/* ---------- BROTES / PANDEMIA (misiones difíciles) ---------- */
.pand-head{margin:22px 14px 4px;padding:12px 14px;border-radius:14px;
  background:linear-gradient(135deg,rgba(239,68,68,0.18),rgba(132,204,22,0.08));
  border:1.5px solid rgba(239,68,68,0.5);box-shadow:0 0 16px rgba(239,68,68,0.22);}
.pand-head-tag{display:block;font-size:15px;font-weight:900;letter-spacing:1px;color:#fca5a5;}
.pand-head-sub{display:block;font-size:11.5px;color:#cbd5e1;margin-top:3px;}
.pand-gate{margin:8px 14px;padding:14px;border-radius:12px;text-align:center;
  font-size:12.5px;line-height:1.5;color:#9fb6c4;
  background:var(--bg-panel);border:1px dashed rgba(239,68,68,0.45);}
.pand-gate b{color:#fca5a5;}
.mission-card.pandemic{
  background:linear-gradient(160deg,rgba(35,10,12,0.92),rgba(13,20,30,0.92));
  border-color:rgba(239,68,68,0.55);box-shadow:0 0 14px rgba(239,68,68,0.3);}
.mission-card.pandemic .mc-zone{color:#fca5a5;}
.mission-card.pandemic.done{border-color:var(--green);}
.pand-badge{font-size:9.5px;font-weight:900;letter-spacing:1px;padding:3px 8px;border-radius:7px;
  background:rgba(239,68,68,0.2);color:#fca5a5;border:1px solid rgba(239,68,68,0.7);
  white-space:nowrap;animation:pandPulse 1.8s ease-in-out infinite;}
@keyframes pandPulse{0%,100%{box-shadow:0 0 0 rgba(239,68,68,0);}50%{box-shadow:0 0 12px rgba(239,68,68,0.6);}}
.pand-disease{margin:7px 0 2px;font-size:11.5px;color:#bef264;line-height:1.4;}
.pand-disease b{color:#d9f99d;}
.pand-note{margin:6px 14px 18px;padding:11px 13px;border-radius:11px;
  font-size:11px;line-height:1.45;color:#9fb6c4;font-style:italic;
  background:rgba(132,204,22,0.06);border:1px solid rgba(132,204,22,0.3);}

/* Recompensa de investigación (BioLab) en la pantalla de victoria */
.ms-bio-reward{position:relative;width:100%;max-width:320px;margin:6px auto 0;
  padding:11px 13px;border-radius:13px;
  background:linear-gradient(135deg,rgba(6,182,212,0.14),rgba(132,204,22,0.08));
  border:1.5px solid rgba(34,211,238,0.5);box-shadow:0 0 14px rgba(34,211,238,0.2);
  animation:msReward .5s 2.2s ease both;}
.ms-bio-reward-tag{font-size:9px;font-weight:800;letter-spacing:2px;color:#6fdcf2;margin-bottom:6px;text-align:center;}
.ms-bio-reward-main{display:flex;align-items:center;gap:6px;justify-content:center;flex-wrap:wrap;
  font-size:12px;font-weight:800;color:#e8f6ff;}
.ms-bio-chip{font-size:11px;font-weight:800;padding:3px 9px;border-radius:8px;
  background:rgba(34,211,238,0.16);color:#22d3ee;border:1px solid rgba(34,211,238,0.5);}
.ms-bio-chip.leaf{background:rgba(132,204,22,0.14);color:#bef264;border-color:rgba(132,204,22,0.5);}
.ms-bio-reward-sub{font-size:10.5px;color:#9fb6c4;text-align:center;margin-top:6px;line-height:1.4;}

/* ---------- Briefing ---------- */
.brief{padding:14px;display:flex;flex-direction:column;gap:14px;}
.brief-hero{padding:16px;border-radius:14px;text-align:center;
  background:linear-gradient(160deg,rgba(239,68,68,0.12),rgba(13,20,30,0.9));
  border:1.5px solid rgba(239,68,68,0.4);}
.brief-zone{font-size:12px;letter-spacing:2px;color:var(--red);font-weight:700;}
.brief-name{font-size:22px;font-weight:800;margin:6px 0;}
.brief-desc{font-size:13.5px;color:var(--text-dim);line-height:1.5;}
.brief-row{display:flex;gap:10px;}
.brief-stat{flex:1;text-align:center;padding:12px;border-radius:12px;background:var(--bg-panel);border:1px solid rgba(6,182,212,0.35);}
.brief-stat .v{font-size:20px;font-weight:800;color:var(--cyan-bright);}
.brief-stat .l{font-size:11px;color:var(--text-dim);margin-top:3px;}
.brief-team{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.team-circle{width:62px;text-align:center;}
.team-circle img{width:58px;height:58px;border-radius:50%;object-fit:cover;border:2px solid var(--cyan);box-shadow:0 0 10px var(--cyan-glow);object-position:center 18%;}
.team-circle .nm{font-size:10px;margin-top:4px;color:var(--text-dim);line-height:1.2;}
.brief-pat-icons{display:flex;justify-content:center;gap:14px;font-size:14px;font-weight:700;}

/* ---------- Briefing: selección de equipo integrada ---------- */
.brief-team-head{display:flex;align-items:center;justify-content:space-between;margin-top:4px;}
.brief-count{font-size:13px;font-weight:800;color:var(--cyan-bright);
  padding:3px 11px;border-radius:20px;background:rgba(6,182,212,0.12);
  border:1px solid rgba(6,182,212,0.4);}
.brief-count.full{color:var(--gold);border-color:rgba(245,158,11,0.5);background:rgba(245,158,11,0.12);}
.brief-roster{display:flex;flex-direction:column;gap:8px;}
.brec-cell{
  position:relative;display:flex;align-items:center;gap:11px;padding:9px 11px;
  border-radius:13px;cursor:pointer;background:var(--bg-panel);
  border:1.5px solid rgba(100,116,139,0.4);transition:transform .1s,border-color .2s,box-shadow .2s;
}
.brec-cell:active{transform:scale(.985);}
.brec-cell img{width:50px;height:50px;border-radius:11px;object-fit:cover;
  object-position:center 16%;border:1.5px solid rgba(6,182,212,0.4);flex-shrink:0;}
.brec-info{flex:1;min-width:0;}
.brec-nm{font-size:14.5px;font-weight:800;line-height:1.1;}
.brec-ro{font-size:11px;color:var(--cyan-bright);margin-top:1px;}
.brec-stats{font-size:10px;color:var(--text-dim);margin-top:3px;letter-spacing:.3px;}
.brec-pick{
  width:26px;height:26px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;
  color:transparent;border:2px solid rgba(100,116,139,0.55);transition:all .15s;
}
.brec-cell.sel{border-color:var(--cyan-bright);box-shadow:0 0 0 1px var(--cyan-bright),0 0 16px var(--cyan-glow);}
.brec-cell.sel .brec-pick{background:var(--cyan-bright);border-color:var(--cyan-bright);color:#04161b;}
.brec-cell.reco{border-color:rgba(245,158,11,0.55);}
.brec-cell.reco.sel{border-color:var(--cyan-bright);}
.brec-tag{
  position:absolute;top:-7px;right:10px;font-size:8.5px;font-weight:800;letter-spacing:.6px;
  color:#1a1206;background:linear-gradient(90deg,#fbbf24,#f59e0b);
  padding:2px 7px;border-radius:6px;box-shadow:0 1px 5px rgba(0,0,0,0.4);
}
/* tinte de borde por rareza en estado no seleccionado */
.brec-cell.r-rare:not(.sel){border-color:rgba(59,130,246,0.45);}
.brec-cell.r-elite:not(.sel){border-color:rgba(168,85,247,0.5);}
.brec-cell.r-legendary:not(.sel){border-color:rgba(245,158,11,0.55);}

/* ---------- Mission combat ---------- */
.mission-screen{position:relative;background:radial-gradient(circle at 50% 30%,#0c1622,#070a10);}
/* Escenario de fondo de la misión (cuarentena urbana / lab CODEX) */
.mission-scene{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-size:cover;background-position:center;
  opacity:.5;
  animation:sceneDrift 26s ease-in-out infinite alternate;
}
.mission-scene.scene-codex{filter:saturate(1.05) brightness(.82) hue-rotate(-4deg);}
.mission-scene.scene-quarantine{filter:saturate(1.02) brightness(.9);}
.mission-scene.scene-throne{opacity:.62;filter:saturate(1.12) brightness(.78) contrast(1.05) hue-rotate(-2deg);}
@keyframes sceneDrift{0%{transform:scale(1.06) translateY(0);}100%{transform:scale(1.12) translateY(-1.5%);}}
/* Velo para que la UI y los pacientes siempre se lean encima */
.mission-scene-veil{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(7,10,16,0.78) 0%,
    rgba(7,10,16,0.42) 26%,
    rgba(7,10,16,0.5) 62%,
    rgba(7,10,16,0.86) 100%);
}
/* Todo el contenido del combate va por encima del escenario */
.mission-screen > .cb-topbar,
.mission-screen > .codex-bar,
.mission-screen > .ss-passive-bar,
.mission-screen > .patient-zone,
.mission-screen > .cb-skillbar{position:relative;z-index:1;}

/* ===== HUD de combate cinematográfico ===== */
.cb-topbar{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:8px 12px;background:linear-gradient(180deg,rgba(4,8,14,0.92),rgba(4,8,14,0.55));
  border-bottom:1px solid rgba(34,211,238,0.3);backdrop-filter:blur(2px);}
.cb-brand{font-size:13px;font-weight:800;letter-spacing:1px;color:#cfeaf5;white-space:nowrap;}
.cb-brand .cb-logo{color:#22d3ee;text-shadow:0 0 10px rgba(34,211,238,0.7);}
.cb-brand-sub{color:#6fdcf2;font-weight:600;}
.cb-turn{position:relative;text-align:center;padding:2px 22px;}
.cb-turn::before,.cb-turn::after{content:'';position:absolute;top:50%;width:18px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(34,211,238,0.8));}
.cb-turn::before{left:0;}.cb-turn::after{right:0;transform:scaleX(-1);}
.cb-turn-n{font-size:15px;font-weight:900;letter-spacing:2px;color:#e8f6ff;line-height:1;}
.cb-turn-n b{color:#22d3ee;text-shadow:0 0 12px rgba(34,211,238,0.8);}
.cb-turn-lbl{font-size:9px;font-weight:700;letter-spacing:3px;color:#6fdcf2;margin-top:2px;}
.cb-top-right{display:flex;align-items:center;}
.cb-time-box{text-align:right;padding:3px 10px;border-radius:8px;
  border:1px solid rgba(34,211,238,0.35);background:rgba(6,14,22,0.6);}
.cb-time-lbl{font-size:8px;font-weight:700;letter-spacing:2px;color:#6fdcf2;}
.cb-time-val{font-size:16px;font-weight:900;font-variant-numeric:tabular-nums;color:#bdecff;line-height:1;}
.cb-time-box.low{border-color:rgba(255,60,60,0.6);animation:cbLow 1s ease-in-out infinite;}
.cb-time-box.low .cb-time-val{color:#ff6b6b;}
@keyframes cbLow{0%,100%{box-shadow:0 0 0 rgba(255,40,40,0);}50%{box-shadow:0 0 16px rgba(255,40,40,0.7);}}

/* Panel de objetivo (esquina superior izquierda, flotante) */
.cb-objective{position:absolute;top:54px;left:10px;z-index:3;max-width:54%;
  padding:8px 12px;border-radius:10px;border:1px solid rgba(34,211,238,0.35);
  background:rgba(5,12,20,0.72);backdrop-filter:blur(3px);
  box-shadow:0 4px 16px rgba(0,0,0,0.4);animation:fadeIn .5s ease both;}
.cb-obj-lbl{font-size:9px;font-weight:800;letter-spacing:2px;color:#6fdcf2;}
.cb-obj-main{font-size:15px;font-weight:900;color:#e8f6ff;margin-top:2px;letter-spacing:.5px;}
.cb-obj-main span{color:#22d3ee;}
.cb-obj-bonus{font-size:10px;color:#9fc6d6;margin-top:3px;}
.cb-obj-bonus .warn{color:#ff6b6b;font-weight:800;}
.cb-obj-phase{font-size:9px;font-weight:700;letter-spacing:1px;color:#ffd86b;margin-top:3px;}

/* Deja sitio a los paneles flotantes: la barra CODEX y las pasivas SS
   se ubican bajo el panel de objetivo (izq) y la lista de turno (der). */
.mission-screen > .codex-bar{margin-top:96px;margin-right:56px;}
.mission-screen > .ss-passive-bar{margin-right:56px;}

/* Lista de turno (lateral derecha) */
.cb-turnlist{position:absolute;top:54px;right:8px;z-index:3;
  display:flex;flex-direction:column;gap:5px;animation:fadeIn .5s ease both;}
.cb-tl-cell{position:relative;width:40px;height:40px;border-radius:8px;cursor:pointer;
  border:1.5px solid rgba(34,211,238,0.4);overflow:hidden;background:rgba(5,12,20,0.7);
  transition:transform .12s,box-shadow .2s,border-color .2s;}
.cb-tl-cell img{width:100%;height:100%;object-fit:cover;object-position:center 18%;}
.cb-tl-cell .cb-tl-n{position:absolute;top:1px;left:3px;z-index:2;font-size:9px;font-weight:800;
  color:#bdecff;text-shadow:0 1px 2px #000;}
.cb-tl-cell .cb-tl-bar{position:absolute;left:0;bottom:0;width:100%;height:3px;background:#22d3ee;}
.cb-tl-cell.sel{border-color:#22d3ee;box-shadow:0 0 16px rgba(34,211,238,0.7);transform:scale(1.06);}
.cb-tl-cell.used{opacity:.4;filter:grayscale(.7);pointer-events:none;}
.cb-tl-cell.used .cb-tl-bar{background:#475569;}

.patient-zone{flex:1;position:relative;overflow:hidden;}
.patient{
  position:absolute;border-radius:50%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;cursor:pointer;
  border:3px solid rgba(255,255,255,0.25);text-align:center;
  transition:transform .15s, box-shadow .2s, opacity .3s;
  transform:translate(-50%,-50%);
}
.patient .pstate{font-size:13px;font-weight:800;letter-spacing:.5px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,0.6);}
.patient .pvit{font-size:11px;font-weight:600;color:rgba(255,255,255,0.9);margin-top:1px;}
.patient.red{background:radial-gradient(circle at 40% 35%,#f87171,#b91c1c);box-shadow:0 0 22px rgba(239,68,68,0.6);animation:redBlink 1.4s ease-in-out infinite;}
.patient.yellow{background:radial-gradient(circle at 40% 35%,#fbbf24,#b45309);box-shadow:0 0 16px rgba(245,158,11,0.45);}
.patient.green{background:radial-gradient(circle at 40% 35%,#4ade80,#15803d);box-shadow:0 0 14px rgba(34,197,94,0.4);}
.patient.hidden-p{background:radial-gradient(circle at 40% 35%,#475569,#1e293b);box-shadow:0 0 12px rgba(100,116,139,0.4);}
.patient.hidden{background:radial-gradient(circle at 40% 35%,#64748b,#1e293b);border-style:dashed;border-color:rgba(148,163,184,0.7);animation:scanPulse 1.6s ease-in-out infinite;}
.patient.hidden .pstate{font-weight:800;letter-spacing:.3px;}
@keyframes scanPulse{0%,100%{box-shadow:0 0 12px rgba(148,163,184,0.4);}50%{box-shadow:0 0 26px rgba(34,211,238,0.6);}}
.patient.selected{border-color:#fff;box-shadow:0 0 28px rgba(255,255,255,0.7);transform:translate(-50%,-50%) scale(1.08);}
.patient.dead{opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.3);}
@keyframes redBlink{0%,100%{box-shadow:0 0 18px rgba(239,68,68,0.55);}50%{box-shadow:0 0 34px rgba(239,68,68,0.9);}}
.patient .tag-target{position:absolute;top:-9px;font-size:9px;background:#fff;color:#000;padding:1px 6px;border-radius:6px;font-weight:800;white-space:nowrap;}
.infect-wave{position:absolute;width:40px;height:40px;border-radius:50%;transform:translate(-50%,-50%);
  border:3px solid var(--red);pointer-events:none;z-index:6;animation:infectWave .85s ease-out forwards;}
@keyframes infectWave{0%{opacity:.9;width:30px;height:30px;}100%{opacity:0;width:230px;height:230px;border-color:rgba(239,68,68,0.1);}}
.patient.escalating{animation:escWarn 1s ease-in-out infinite;}
.patient .esc-timer{position:absolute;bottom:-10px;font-size:9px;background:#f59e0b;color:#1a1206;padding:1px 6px;border-radius:6px;font-weight:800;white-space:nowrap;box-shadow:0 0 8px rgba(245,158,11,0.6);}
@keyframes escWarn{0%,100%{box-shadow:0 0 14px rgba(245,158,11,0.5);}50%{box-shadow:0 0 26px rgba(239,68,68,0.7);}}

/* ===== Panel inferior de habilidades (cinematográfico) ===== */
.cb-skillbar{display:flex;align-items:stretch;gap:8px;padding:8px 10px 10px;
  background:linear-gradient(0deg,rgba(4,8,14,0.96),rgba(4,8,14,0.55));
  border-top:1px solid rgba(34,211,238,0.3);backdrop-filter:blur(2px);}
.cb-active{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:10px;
  min-width:118px;max-width:140px;flex-shrink:0;
  border:1.5px solid rgba(34,211,238,0.3);background:rgba(6,14,22,0.7);transition:box-shadow .2s,border-color .2s;}
.cb-active.on{border-color:#22d3ee;box-shadow:0 0 16px rgba(34,211,238,0.4);}
.cb-active-pic{width:44px;height:44px;border-radius:8px;flex-shrink:0;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  border:1.5px solid rgba(34,211,238,0.5);background:rgba(8,20,30,0.9);}
.cb-active-pic img{width:100%;height:100%;object-fit:cover;object-position:center 18%;}
.cb-active-pic span{font-size:22px;color:#3a5566;font-weight:800;}
.cb-active-info{min-width:0;}
.cb-active-name{font-size:12px;font-weight:800;color:#e8f6ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cb-active-role{font-size:10px;color:#6fdcf2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cb-skill-mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;}
.cb-endturn{flex-shrink:0;min-width:96px;padding:10px 12px;cursor:pointer;
  font-size:11px;font-weight:800;letter-spacing:1px;line-height:1.2;color:#1a1206;
  border:1.5px solid #ffd86b;border-radius:10px;
  background:linear-gradient(180deg,#ffd86b,#f0a500);
  box-shadow:0 0 16px rgba(255,200,60,0.4);text-shadow:0 1px 0 rgba(255,255,255,0.3);
  clip-path:polygon(8% 0,100% 0,92% 100%,0 100%);transition:transform .12s,box-shadow .2s;}
.cb-endturn b{font-size:14px;font-weight:900;}
.cb-endturn:active{transform:scale(.95);}
.cb-endturn:disabled{background:rgba(20,30,40,0.8);color:#4a5d6b;border-color:rgba(74,93,107,0.5);
  box-shadow:none;cursor:not-allowed;text-shadow:none;}

.spec-bar{
  display:flex;gap:6px;justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;
  padding:0;
}
.spec-bar::-webkit-scrollbar{height:0;}
.spec-card{
  flex:0 0 auto;width:64px;border-radius:10px;cursor:pointer;padding:5px 3px;
  background:var(--bg-panel);border:1.5px solid rgba(6,182,212,0.35);
  display:flex;flex-direction:column;align-items:center;gap:2px;
  transition:transform .12s,box-shadow .2s,border-color .2s;position:relative;
}
.spec-card:active{transform:scale(.96);}
.spec-card.selected{border-color:var(--cyan-bright);box-shadow:0 0 18px var(--cyan-glow-strong);background:rgba(6,182,212,0.16);}
.spec-card.used{opacity:.4;filter:grayscale(.7);pointer-events:none;}
.spec-card img{width:38px;height:38px;border-radius:50%;object-fit:cover;object-position:center 18%;border:2px solid var(--cyan);}
.spec-card .sn{font-size:9px;font-weight:700;line-height:1.05;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.spec-card .sr{font-size:8px;color:var(--cyan-bright);line-height:1.05;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.spec-card .badge{position:absolute;top:2px;right:2px;font-size:11px;}

.spec-hint{font-size:11px;text-align:center;color:var(--cyan-bright);min-height:26px;
  line-height:1.25;padding:0 4px;display:flex;align-items:center;justify-content:center;}

/* ---------- Recruit / gacha ---------- */
.recruit-screen{background:radial-gradient(circle at 50% 25%,#0e1a26,#070a10);}
.cryo-banner{margin:14px;padding:18px;border-radius:16px;text-align:center;
  background:linear-gradient(160deg,rgba(6,182,212,0.16),rgba(13,20,30,0.9));
  border:1.5px solid rgba(6,182,212,0.5);box-shadow:0 0 20px var(--cyan-glow);}
.cryo-banner .t{font-size:18px;font-weight:800;}
.cryo-banner .s{font-size:12.5px;color:var(--text-dim);margin-top:4px;}
.pity-row{display:flex;align-items:center;gap:10px;margin:0 14px 6px;font-size:12px;color:var(--text-dim);}
.pity-bar{flex:1;height:8px;background:#0d1722;border-radius:5px;overflow:hidden;border:1px solid rgba(6,182,212,0.3);}
.pity-fill{height:100%;background:linear-gradient(90deg,var(--cyan),var(--cyan-bright));transition:width .4s;}
.pull-options{display:flex;flex-direction:column;gap:12px;padding:8px 14px 14px;}
.pull-btn{display:flex;align-items:center;gap:12px;min-height:64px;padding:0 16px;border-radius:14px;cursor:pointer;
  background:linear-gradient(120deg,rgba(6,182,212,0.14),rgba(13,20,30,0.85));border:1.5px solid var(--cyan);
  box-shadow:0 0 14px var(--cyan-glow);transition:transform .12s;}
.pull-btn:active{transform:scale(.98);}
.pull-btn.gold{border-color:#fcd34d;background:linear-gradient(120deg,rgba(245,158,11,0.16),rgba(13,20,30,0.85));}
.pull-btn .ic{font-size:26px;}
.pull-btn .tx{flex:1;text-align:left;}
.pull-btn .tt{font-size:16px;font-weight:800;}
.pull-btn .cost{font-size:12.5px;color:var(--cyan-bright);font-weight:700;margin-top:2px;}
.pull-btn:disabled{opacity:.45;}

.roster-head{padding:10px 14px 4px;font-size:13px;font-weight:700;color:var(--text-dim);}
.roster-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:6px 14px 18px;}
.roster-cell{border-radius:10px;overflow:hidden;border:2px solid var(--gray);background:#0d1722;position:relative;aspect-ratio:3/4;}
.roster-cell.owned{}
.roster-cell.locked-c{opacity:.55;filter:grayscale(.8);}
.roster-cell img{width:100%;height:100%;object-fit:cover;object-position:center 15%;}
.roster-cell .rn{position:absolute;bottom:0;left:0;right:0;font-size:9px;font-weight:700;padding:3px 4px;background:linear-gradient(0deg,rgba(0,0,0,0.9),transparent);text-align:center;line-height:1.1;}
.roster-cell .qmark{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:800;color:var(--gray);}
.roster-cell .eqp{position:absolute;top:3px;left:3px;font-size:10px;background:var(--green);color:#04161b;padding:1px 5px;border-radius:6px;font-weight:800;}
.r-common{border-color:#94a3b8;}
.r-rare{border-color:var(--blue);box-shadow:0 0 10px rgba(59,130,246,0.4);}
.r-elite{border-color:var(--purple);box-shadow:0 0 10px rgba(168,85,247,0.45);}
.r-legendary{border-color:var(--gold);box-shadow:0 0 14px rgba(245,158,11,0.55);}

/* ---------- Team select ---------- */
.team-pick-bar{padding:10px 14px;font-size:13px;color:var(--cyan-bright);font-weight:700;text-align:center;border-bottom:1px solid rgba(6,182,212,0.25);}
.tp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:12px 14px;}
.tp-cell{border-radius:12px;overflow:hidden;border:2px solid var(--gray);background:#0d1722;cursor:pointer;position:relative;}
.tp-cell.sel{border-color:var(--cyan-bright);box-shadow:0 0 16px var(--cyan-glow-strong);}
.tp-cell img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:center 15%;}
.tp-cell .info{padding:6px;}
.tp-cell .nm{font-size:12px;font-weight:700;line-height:1.15;}
.tp-cell .ro{font-size:10px;color:var(--cyan-bright);}
.tp-cell .pick{position:absolute;top:5px;right:5px;width:24px;height:24px;border-radius:50%;background:var(--cyan);color:#04161b;font-weight:800;display:none;align-items:center;justify-content:center;font-size:13px;}
.tp-cell.sel .pick{display:flex;}

/* ---------- BioLab ---------- */
.tabs{display:flex;gap:6px;padding:10px 14px;}
.tab{flex:1;min-height:46px;border-radius:10px;font-size:13px;font-weight:700;cursor:pointer;
  background:#0d1722;border:1.5px solid rgba(6,182,212,0.35);color:var(--text-dim);
  display:flex;align-items:center;justify-content:center;gap:5px;transition:.18s;}
.tab.active{color:#04161b;background:linear-gradient(135deg,var(--cyan),#0891b2);border-color:var(--cyan-bright);}
.proj-card{margin:8px 14px;padding:13px;border-radius:13px;display:flex;gap:12px;align-items:center;
  background:var(--bg-panel);border:1.5px solid rgba(6,182,212,0.4);}
.proj-card.locked{opacity:.5;filter:grayscale(.5);}
.proj-card.done{border-color:var(--green);}
.proj-ic{width:46px;height:46px;border-radius:10px;flex-shrink:0;background:rgba(6,182,212,0.12);
  border:1px solid rgba(6,182,212,0.4);display:flex;align-items:center;justify-content:center;font-size:24px;}
.proj-info{flex:1;min-width:0;}
.proj-name{font-size:14.5px;font-weight:800;}
.proj-desc{font-size:11.5px;color:var(--text-dim);line-height:1.35;margin:2px 0 6px;}
.proj-cost{font-size:12px;font-weight:700;color:var(--cyan-bright);}
.proj-btn{min-height:38px;padding:0 14px;font-size:12.5px;border-radius:9px;font-weight:800;cursor:pointer;
  background:var(--cyan);color:#04161b;border:none;white-space:nowrap;}
.proj-btn:disabled{opacity:.45;background:var(--gray);color:#0d1722;}
.proj-done-tag{font-size:12px;font-weight:800;color:var(--green);white-space:nowrap;}

/* ============================================================
   BIOLAB · Investigación educativa (cyan holográfico)
   ============================================================ */
.biolab-screen{position:relative;background:#070b11;overflow:hidden;}
.biolab-bg{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url('assets/biolab_bg.webp') center/cover no-repeat;opacity:.45;
  animation:sceneDrift 30s ease-in-out infinite alternate;}
.biolab-veil{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,11,17,0.82),rgba(7,11,17,0.5) 30%,rgba(7,11,17,0.7) 78%,rgba(7,11,17,0.94));}
.biolab-screen > *:not(.biolab-bg):not(.biolab-veil){position:relative;z-index:1;}

.biolab-head{display:flex;align-items:center;gap:10px;padding:12px 14px 4px;}
.biolab-head .sec-back{width:38px;height:38px;border-radius:9px;font-size:22px;cursor:pointer;flex-shrink:0;
  background:rgba(8,18,28,0.8);border:1px solid rgba(34,211,238,0.4);color:#bdecff;}

/* Recursos + nivel científico */
.biolab-top{margin:6px 14px 4px;padding:10px 12px;border-radius:13px;
  background:rgba(6,16,24,0.78);border:1px solid rgba(34,211,238,0.35);
  box-shadow:0 0 18px rgba(34,211,238,0.1) inset;backdrop-filter:blur(2px);}
.bio-res-row{display:flex;gap:8px;justify-content:space-between;}
.bio-res{flex:1;display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 4px;border-radius:10px;
  background:rgba(8,22,32,0.6);border:1px solid rgba(34,211,238,0.25);}
.bio-res img{width:30px;height:30px;object-fit:contain;filter:drop-shadow(0 0 6px rgba(34,211,238,0.5));}
.bio-res span{font-size:16px;font-weight:900;color:#22d3ee;line-height:1;}
.bio-res small{font-size:9px;color:#7fb8cc;letter-spacing:.5px;}
.bio-sci{display:flex;align-items:center;justify-content:space-between;margin-top:8px;padding:7px 12px;border-radius:10px;
  background:linear-gradient(90deg,rgba(34,211,238,0.14),rgba(6,16,24,0.4));border:1px solid rgba(34,211,238,0.3);}
.bio-sci-l{font-size:11px;font-weight:800;letter-spacing:1.5px;color:#9fe4f5;}
.bio-sci-v{font-size:20px;font-weight:900;color:#fff;text-shadow:0 0 12px rgba(34,211,238,0.8);}

.biolab-tabs{padding:8px 14px 6px;}
.biolab-scroll{padding-bottom:24px;}

/* Tarjetas-libro */
.bio-book{margin:8px 14px;padding:12px;border-radius:14px;display:flex;gap:12px;align-items:center;cursor:pointer;
  background:rgba(8,18,28,0.82);border:1.5px solid rgba(34,211,238,0.4);
  transition:transform .12s,box-shadow .2s,border-color .2s;}
.bio-book:active{transform:scale(.98);}
.bio-book.sealed{opacity:.78;border-style:dashed;}
.bio-book.done{border-color:#22c55e;box-shadow:0 0 16px rgba(34,197,94,0.25);}
.bio-book-ic{position:relative;width:54px;height:54px;border-radius:12px;flex-shrink:0;
  background:rgba(34,211,238,0.1);border:1px solid rgba(34,211,238,0.4);
  display:flex;align-items:center;justify-content:center;}
.bio-book-ic img{width:46px;height:46px;object-fit:contain;filter:drop-shadow(0 0 7px rgba(34,211,238,0.55));}
.bio-book-seal{position:absolute;right:-5px;top:-5px;width:22px;height:22px;border-radius:50%;
  background:#22c55e;color:#04140a;font-size:13px;font-weight:900;display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 8px rgba(34,197,94,0.7);}
.bio-book-info{flex:1;min-width:0;}
.bio-book-name{font-size:15px;font-weight:800;color:#e8f6ff;}
.bio-book-tag{font-size:10.5px;color:#7fb8cc;margin:1px 0 6px;}
.bio-book-meta{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.bio-hojas{font-size:11px;font-weight:700;color:#9aa7b3;}
.bio-hojas.ok{color:#22d3ee;}
.bio-phase{font-size:10px;font-weight:800;letter-spacing:1px;color:#ffd86b;
  padding:2px 8px;border-radius:8px;background:rgba(40,30,8,0.5);border:1px solid rgba(255,200,60,0.35);}
.bio-book.done .bio-phase{color:#7ef0a6;background:rgba(8,30,16,0.5);border-color:rgba(34,197,94,0.4);}
.bio-lock-note{font-size:10.5px;color:#ff9c9c;margin-top:5px;}

/* Impacto global */
.bio-impact{margin:8px 14px;}
.bio-impact-big{text-align:center;padding:18px;border-radius:16px;margin-bottom:10px;
  background:linear-gradient(160deg,rgba(34,211,238,0.16),rgba(8,18,28,0.85));
  border:1.5px solid rgba(34,211,238,0.5);box-shadow:0 0 22px rgba(34,211,238,0.15);}
.bio-impact-emblem{width:108px;height:108px;object-fit:contain;display:block;margin:0 auto 8px;
  filter:drop-shadow(0 0 16px rgba(34,211,238,0.45));}
.bio-impact-l{font-size:11px;font-weight:800;letter-spacing:2px;color:#9fe4f5;}
.bio-impact-v{font-size:46px;font-weight:900;color:#fff;line-height:1.1;text-shadow:0 0 20px rgba(34,211,238,0.8);}
.bio-impact-row{display:flex;justify-content:space-between;padding:11px 14px;border-radius:11px;font-size:13px;
  background:rgba(8,18,28,0.8);border:1px solid rgba(34,211,238,0.3);margin-bottom:8px;}
.bio-impact-row b{color:#22d3ee;}
.bio-founder{display:flex;flex-direction:column;text-align:center;gap:2px;padding:12px;border-radius:12px;margin-bottom:8px;
  font-size:14px;font-weight:900;letter-spacing:1px;color:#ffd86b;
  background:linear-gradient(160deg,rgba(60,46,10,0.7),rgba(20,14,4,0.7));border:1.5px solid rgba(255,200,60,0.6);
  box-shadow:0 0 18px rgba(255,200,60,0.3);}
.bio-founder small{font-size:9.5px;font-weight:600;letter-spacing:0;color:#d8c79a;}
.bio-impact-list{display:flex;flex-direction:column;gap:6px;margin-bottom:10px;}
.bio-impact-item{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:10px;
  background:rgba(8,18,28,0.6);border:1px solid rgba(34,211,238,0.2);opacity:.6;}
.bio-impact-item.done{opacity:1;border-color:rgba(34,197,94,0.4);}
.bio-impact-item img{width:30px;height:30px;object-fit:contain;}
.bio-impact-item span{flex:1;font-size:12.5px;color:#dceefa;}
.bio-impact-item b{font-size:13px;color:#7ef0a6;}
.bio-disclaimer{font-size:10px;color:#6f8694;line-height:1.4;text-align:center;padding:4px 6px;}

/* Modal ficha-libro */
.bio-book-back{position:absolute;inset:0;z-index:88;display:flex;align-items:center;justify-content:center;
  padding:16px;background:rgba(4,8,12,0.82);backdrop-filter:blur(3px);animation:fadeIn .25s ease both;overflow:hidden;}
.bio-book-modal{position:relative;width:100%;max-width:440px;max-height:88%;overflow-y:auto;
  border-radius:18px;padding:18px 16px 14px;
  background:linear-gradient(180deg,rgba(10,22,32,0.98),rgba(6,12,20,0.98));
  border:1.5px solid rgba(34,211,238,0.5);box-shadow:0 0 30px rgba(34,211,238,0.25);}
.bio-book-modal::-webkit-scrollbar{width:5px;}
.bio-book-modal::-webkit-scrollbar-thumb{background:rgba(34,211,238,0.4);border-radius:4px;}
.bio-book-x{position:absolute;right:12px;top:12px;width:32px;height:32px;border-radius:8px;cursor:pointer;z-index:2;
  font-size:15px;background:rgba(8,18,28,0.9);border:1px solid rgba(34,211,238,0.4);color:#bdecff;}
.bio-book-top{display:flex;align-items:center;gap:12px;margin-bottom:12px;padding-right:34px;}
.bio-book-top img{width:54px;height:54px;object-fit:contain;flex-shrink:0;filter:drop-shadow(0 0 8px rgba(34,211,238,0.55));}
.bio-book-t{font-size:19px;font-weight:900;color:#e8f6ff;}
.bio-book-st{font-size:11px;color:#7fb8cc;margin-top:2px;}
.bio-ficha{display:flex;flex-direction:column;gap:9px;}
.bio-ficha-sec{padding:10px 12px;border-radius:11px;background:rgba(6,16,24,0.7);border:1px solid rgba(34,211,238,0.25);}
.bio-ficha-h{font-size:12px;font-weight:800;color:#22d3ee;letter-spacing:.5px;margin-bottom:4px;}
.bio-ficha-sec p{font-size:12.5px;color:#cfe3ef;line-height:1.5;margin:0;}
.bio-action{margin-top:12px;}
.bio-study,.bio-study-locked,.bio-study-done{padding:12px;border-radius:12px;text-align:center;
  background:rgba(8,20,30,0.7);border:1px solid rgba(34,211,238,0.3);}
.bio-study-locked{font-size:12.5px;color:#ffd6a0;line-height:1.4;}
.bio-study-done{font-size:13px;font-weight:800;color:#7ef0a6;border-color:rgba(34,197,94,0.4);}
.bio-study-phase{font-size:13px;font-weight:700;color:#dceefa;margin-bottom:8px;}
.bio-study-phase b{color:#22d3ee;}
.bio-study-bar{display:flex;gap:6px;margin-bottom:8px;}
.bio-seg{flex:1;height:14px;border-radius:5px;background:rgba(6,30,40,0.9);border:1px solid rgba(34,211,238,0.3);transition:background .3s,box-shadow .3s;}
.bio-seg.on{background:linear-gradient(90deg,#0891b2,#22d3ee,#67e8f9);box-shadow:0 0 10px rgba(34,211,238,0.6);border-color:transparent;}
.bio-study-cost{font-size:10.5px;color:#8fb4c5;margin-bottom:10px;}
.bio-btn{width:100%;min-height:46px;padding:0 14px;border-radius:11px;font-size:14px;font-weight:800;letter-spacing:.5px;cursor:pointer;
  transition:transform .12s,box-shadow .2s;}
.bio-btn:active{transform:scale(.97);}
.bio-btn.primary{color:#04161b;border:none;background:linear-gradient(180deg,#67e8f9,#06b6d4);
  box-shadow:0 0 18px rgba(34,211,238,0.5);}
.bio-btn.ghost{margin-top:10px;color:#bdecff;background:rgba(8,20,30,0.8);border:1.5px solid rgba(34,211,238,0.5);}
.bio-book-note{font-size:9.5px;color:#6f8694;text-align:center;margin-top:10px;line-height:1.4;}

/* ---------- BioLab · Capa 3: Ramas de laboratorio ---------- */
.bio-lab-intro{font-size:12px;color:#9fc6d8;line-height:1.5;margin:4px 4px 12px;padding:10px 12px;
  border-radius:11px;background:rgba(6,16,24,0.6);border:1px dashed rgba(34,211,238,0.3);}
.bio-lab-intro b{color:#ffd6a0;}
.bio-branch{display:flex;gap:12px;margin:0 4px 12px;padding:12px;border-radius:14px;
  background:linear-gradient(180deg,rgba(8,18,28,0.85),rgba(5,11,18,0.9));
  border:1.5px solid rgba(34,211,238,0.22);opacity:.82;transition:border-color .25s,box-shadow .25s,opacity .25s;}
.bio-branch.on{opacity:1;border-color:rgba(34,211,238,0.5);box-shadow:0 0 18px rgba(34,211,238,0.14);}
.bio-branch.maxed{border-color:rgba(245,197,24,0.55);box-shadow:0 0 20px rgba(245,197,24,0.18);}
.bio-branch-ic{position:relative;width:62px;flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:5px;}
.bio-branch-ic img{width:58px;height:58px;object-fit:contain;border-radius:12px;
  background:rgba(4,12,20,0.7);border:1px solid rgba(34,211,238,0.3);filter:drop-shadow(0 0 8px rgba(34,211,238,0.4));}
.bio-branch:not(.on) .bio-branch-ic img{filter:grayscale(.7) brightness(.7);}
.bio-branch-lv{font-size:11px;font-weight:900;color:#04161b;background:linear-gradient(180deg,#67e8f9,#06b6d4);
  padding:1px 9px;border-radius:20px;box-shadow:0 0 10px rgba(34,211,238,0.5);}
.bio-branch.maxed .bio-branch-lv{background:linear-gradient(180deg,#ffe98a,#f5c518);box-shadow:0 0 10px rgba(245,197,24,0.6);}
.bio-branch-lock{font-size:14px;}
.bio-branch-body{flex:1;min-width:0;}
.bio-branch-name{font-size:15.5px;font-weight:900;color:#e8f6ff;}
.bio-branch-tag{font-size:10.5px;color:#79b3c8;margin:1px 0 6px;letter-spacing:.3px;}
.bio-branch-desc{font-size:11.5px;color:#c2dae6;line-height:1.45;margin-bottom:7px;}
.bio-branch-source{display:inline-block;font-size:10px;font-weight:700;color:#bdecff;
  padding:2px 8px;border-radius:8px;background:rgba(6,30,40,0.8);border:1px solid rgba(34,211,238,0.3);margin-bottom:7px;}
.bio-branch-benefit{font-size:11.5px;color:#7ef0c2;line-height:1.45;margin-bottom:9px;}
.bio-branch-benefit b{color:#22d3ee;}
.bio-branch-bar{position:relative;height:20px;border-radius:8px;overflow:hidden;margin-bottom:9px;
  background:rgba(4,16,24,0.9);border:1px solid rgba(34,211,238,0.3);}
.bio-branch-fill{position:absolute;inset:0;width:0;background:linear-gradient(90deg,#0891b2,#22d3ee,#67e8f9);
  box-shadow:0 0 12px rgba(34,211,238,0.6);transition:width .4s ease;}
.bio-branch.maxed .bio-branch-fill{background:linear-gradient(90deg,#f0a500,#ffd700,#fff3c4);}
.bio-branch-bartxt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:9.5px;font-weight:700;color:#eafaff;text-shadow:0 1px 2px rgba(0,0,0,0.7);}
.bio-branch-hint{font-size:11.5px;color:#ffd6a0;text-align:center;padding:8px;border-radius:9px;
  background:rgba(8,20,30,0.6);border:1px solid rgba(34,211,238,0.22);}
.bio-branch-max{font-size:12px;font-weight:800;color:#ffe08a;text-align:center;padding:8px;}
.bio-branch-btn{min-height:42px;font-size:12.5px;}

/* ---------- Pantalla de DESCUBRIMIENTO ---------- */
.desc-back{position:absolute;inset:0;z-index:130;display:flex;align-items:center;justify-content:center;
  padding:16px;background:radial-gradient(circle at 50% 38%,rgba(8,40,56,0.96),rgba(3,7,12,0.98));
  overflow:hidden;animation:fadeIn .3s ease both;}
.desc-rays{position:absolute;top:-30%;left:50%;width:160%;height:160%;transform:translateX(-50%);
  background:conic-gradient(from 0deg,rgba(34,211,238,0.12) 0deg,transparent 14deg,rgba(34,211,238,0.12) 28deg,transparent 42deg,
    rgba(34,211,238,0.12) 56deg,transparent 70deg,rgba(34,211,238,0.12) 84deg,transparent 98deg,
    rgba(34,211,238,0.12) 112deg,transparent 126deg,rgba(34,211,238,0.12) 140deg,transparent 154deg);
  animation:descSpin 26s linear infinite;pointer-events:none;}
@keyframes descSpin{to{transform:translateX(-50%) rotate(360deg);}}
.desc-modal{position:relative;width:100%;max-width:440px;max-height:92%;overflow-y:auto;z-index:2;
  border-radius:20px;padding:20px 18px 16px;text-align:center;
  background:linear-gradient(180deg,rgba(10,24,34,0.97),rgba(5,11,18,0.98));
  border:1.5px solid rgba(34,211,238,0.55);box-shadow:0 0 40px rgba(34,211,238,0.3);
  animation:descPop .5s cubic-bezier(.2,1.3,.4,1) both;}
@keyframes descPop{from{opacity:0;transform:scale(.9) translateY(18px);}to{opacity:1;transform:none;}}
.desc-modal::-webkit-scrollbar{width:5px;}
.desc-modal::-webkit-scrollbar-thumb{background:rgba(34,211,238,0.4);border-radius:4px;}
.desc-eyebrow{font-size:9.5px;font-weight:800;letter-spacing:1.4px;color:#5fd0e8;margin-bottom:4px;}
.desc-title{font-size:30px;font-weight:900;letter-spacing:1px;
  background:linear-gradient(180deg,#a5f3fc,#22d3ee,#0891b2);-webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 26px rgba(34,211,238,0.5);margin-bottom:12px;}
.desc-proj{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:12px;}
.desc-proj img{width:58px;height:58px;object-fit:contain;filter:drop-shadow(0 0 10px rgba(34,211,238,0.6));}
.desc-proj-name{font-size:18px;font-weight:900;color:#eafaff;text-align:left;}
.desc-proj-tag{font-size:11px;color:#79b3c8;text-align:left;margin-top:1px;}
.desc-badge{display:inline-block;font-size:13px;font-weight:900;letter-spacing:.6px;color:#04161b;
  padding:7px 16px;border-radius:24px;margin-bottom:14px;
  background:linear-gradient(180deg,#67e8f9,#06b6d4);box-shadow:0 0 20px rgba(34,211,238,0.5);}
.desc-howto{text-align:left;padding:13px 14px;border-radius:13px;margin-bottom:13px;
  background:rgba(6,16,24,0.75);border:1px solid rgba(34,211,238,0.3);}
.desc-howto-h{font-size:12px;font-weight:800;color:#22d3ee;letter-spacing:.5px;margin-bottom:5px;}
.desc-howto p{font-size:12.5px;color:#cfe3ef;line-height:1.55;margin:0;}
.desc-rewards{display:flex;flex-direction:column;gap:8px;margin-bottom:13px;}
.desc-rew{display:flex;align-items:center;gap:9px;text-align:left;font-size:12.5px;color:#dbeef7;
  padding:9px 12px;border-radius:11px;background:rgba(8,20,30,0.7);border:1px solid rgba(34,211,238,0.28);}
.desc-rew b{color:#7ef0c2;}
.desc-rew.founder{border-color:rgba(245,197,24,0.5);background:rgba(40,32,8,0.5);}
.desc-rew.founder b{color:#ffe08a;}
.desc-rew-ic{font-size:17px;flex-shrink:0;}
.desc-note{font-size:9.5px;color:#6f8694;line-height:1.4;margin-bottom:14px;}
.desc-btn{width:100%;min-height:50px;border-radius:13px;font-size:15px;font-weight:900;letter-spacing:.6px;cursor:pointer;
  color:#04161b;border:none;background:linear-gradient(180deg,#67e8f9,#06b6d4);
  box-shadow:0 0 22px rgba(34,211,238,0.5);transition:transform .12s;}
.desc-btn:active{transform:scale(.97);}

/* ---------- Profile ---------- */
.prof-head{display:flex;align-items:center;gap:14px;margin:14px;padding:14px;border-radius:14px;
  background:var(--bg-panel);border:1.5px solid rgba(6,182,212,0.45);}
.prof-avatar{width:74px;height:74px;border-radius:50%;object-fit:cover;object-position:center 16%;border:3px solid var(--cyan);box-shadow:0 0 16px var(--cyan-glow);}
.prof-avatar.founder{border-color:var(--gold);box-shadow:0 0 18px rgba(245,158,11,0.5);}

/* === VIP "Director AETHERIS" — marco dorado del perfil (demo) === */
.prof-head.vip{border-color:rgba(245,200,60,0.6);
  background:linear-gradient(135deg,rgba(34,28,10,0.55),var(--bg-panel));
  box-shadow:0 0 20px rgba(245,200,60,0.18);}
.prof-avatar-wrap{position:relative;width:74px;height:74px;flex-shrink:0;}
.prof-avatar-wrap.vip{padding:3px;border-radius:50%;
  background:conic-gradient(from 0deg,#fff3c4,#ffd86b,#f0a500,#ffd86b,#fff3c4);
  box-shadow:0 0 22px rgba(245,200,60,0.6);animation:vipFrame 4s linear infinite;}
@keyframes vipFrame{to{transform:rotate(360deg);}}
.prof-avatar-wrap.vip .prof-avatar{width:100%;height:100%;border:2px solid #0a0e14;
  box-shadow:none;animation:vipFrameCounter 4s linear infinite;}
@keyframes vipFrameCounter{to{transform:rotate(-360deg);}}
.prof-avatar.vip{border-color:transparent;}
.prof-vip-crown{position:absolute;top:-10px;left:50%;transform:translateX(-50%) rotate(0);
  font-size:20px;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.6));z-index:2;
  animation:vipCrown 2.4s ease-in-out infinite;}
@keyframes vipCrown{0%,100%{transform:translateX(-50%) translateY(0);}50%{transform:translateX(-50%) translateY(-3px);}}
.prof-vip-badge{display:inline-block;vertical-align:middle;margin-left:6px;
  font-size:10px;font-weight:900;letter-spacing:1px;color:#1a1206;
  padding:2px 8px;border-radius:6px;background:linear-gradient(135deg,#ffd86b,#f0a500);
  box-shadow:0 0 10px rgba(245,200,60,0.6);}
.vip-status-on{font-size:10.5px;font-weight:700;line-height:1.4;color:#86efac;text-align:center;
  margin-bottom:9px;padding:7px 10px;border-radius:9px;
  background:rgba(34,197,94,0.1);border:1px solid rgba(34,197,94,0.4);}
.prof-meta .nm{font-size:18px;font-weight:800;}
.prof-meta .lv{font-size:13px;color:var(--cyan-bright);font-weight:700;}
.prof-meta .sh{font-size:12px;color:var(--text-dim);margin-top:3px;}
.prof-xp{margin:0 14px 8px;}
.xp-bar{height:12px;border-radius:7px;background:#0d1722;overflow:hidden;border:1px solid rgba(6,182,212,0.35);}
.xp-fill{height:100%;background:linear-gradient(90deg,var(--cyan),var(--cyan-bright));transition:width .6s;}
.xp-label{font-size:11px;color:var(--text-dim);margin-top:4px;text-align:center;}

.subhead{padding:10px 14px 2px;font-size:14px;font-weight:800;color:var(--cyan-bright);}
.ach-card{margin:7px 14px;padding:12px;border-radius:12px;display:flex;gap:12px;align-items:center;
  background:var(--bg-panel);border:1.5px solid rgba(6,182,212,0.3);}
.ach-card.locked{opacity:.55;}
.ach-card.unlocked{border-color:var(--green);}
.ach-ic{width:42px;height:42px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-size:22px;background:rgba(6,182,212,0.12);border:1px solid rgba(6,182,212,0.4);}
.ach-card.locked .ach-ic{filter:grayscale(1);background:#0d1722;}
.ach-info{flex:1;}
.ach-name{font-size:14px;font-weight:800;}
.ach-desc{font-size:11.5px;color:var(--text-dim);margin-top:2px;}
.ach-rew{font-size:11.5px;font-weight:700;color:var(--cyan-bright);white-space:nowrap;}

.rank-row{margin:5px 14px;padding:10px 12px;border-radius:10px;display:flex;align-items:center;gap:10px;
  background:var(--bg-panel);border:1px solid rgba(6,182,212,0.25);}
.rank-row.me{border-color:var(--cyan-bright);box-shadow:0 0 14px var(--cyan-glow-strong);background:rgba(6,182,212,0.12);}
.rank-pos{font-size:15px;font-weight:800;width:34px;color:var(--cyan-bright);}
.rank-name{flex:1;font-size:13.5px;font-weight:700;}
.rank-pts{font-size:13px;font-weight:700;color:var(--text-dim);}
.rank-msg{margin:10px 14px;padding:12px;border-radius:12px;text-align:center;font-size:13px;line-height:1.45;
  background:rgba(245,158,11,0.1);border:1px solid rgba(245,158,11,0.4);color:#fcd34d;}

/* ---------- Store / IAP ---------- */
.store-pack{margin:8px 14px;padding:13px;border-radius:13px;display:flex;align-items:center;gap:12px;
  background:var(--bg-panel);border:1.5px solid rgba(6,182,212,0.4);}
.store-pack.popular{border-color:var(--gold);box-shadow:0 0 16px rgba(245,158,11,0.3);}
.store-amt{flex:1;}
.store-amt .a{font-size:17px;font-weight:800;color:var(--cyan-bright);}
.store-amt .pop{font-size:10px;font-weight:800;color:var(--gold);margin-top:2px;}
.store-buy{min-height:42px;padding:0 16px;border-radius:10px;font-size:14px;font-weight:800;cursor:pointer;
  background:var(--green);color:#04161b;border:none;}

/* ---------- Overlays / modals ---------- */
.modal-back{position:absolute;inset:0;background:rgba(3,6,10,0.82);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;padding:24px;z-index:60;animation:fadeIn .25s ease;}
.modal{width:100%;max-width:340px;padding:22px;border-radius:18px;text-align:center;
  background:var(--bg-panel);border:1.5px solid var(--cyan);box-shadow:0 0 30px var(--cyan-glow-strong);}
.modal h3{font-size:20px;font-weight:800;margin-bottom:10px;}
.modal p{font-size:14px;color:var(--text-dim);line-height:1.5;margin-bottom:18px;}
.modal .btn{width:100%;margin-top:8px;}

/* ---------- Tutorial coach overlay ---------- */
.coach{position:absolute;left:16px;right:16px;padding:16px;border-radius:16px;z-index:70;
  background:linear-gradient(160deg,rgba(6,182,212,0.22),rgba(10,14,20,0.97));
  border:1.5px solid var(--cyan-bright);box-shadow:0 0 26px var(--cyan-glow-strong);animation:coachIn .3s ease;}
@keyframes coachIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.coach.bottom{bottom:20px;}
.coach.top{top:80px;}
.coach.center{top:50%;transform:translateY(-50%);}
.coach .ct{font-size:14.5px;line-height:1.55;color:var(--text);}
.coach .ct b{color:var(--cyan-bright);}
.coach .cbtn{margin-top:14px;}
.coach-arrow{position:absolute;font-size:30px;color:var(--cyan-bright);z-index:71;animation:arrowBob 1s ease-in-out infinite;pointer-events:none;
  filter:drop-shadow(0 0 8px var(--cyan-bright));}
@keyframes arrowBob{0%,100%{transform:translateY(0);}50%{transform:translateY(8px);}}

/* ---------- Tutorial guiado de combate (spotlight) ---------- */
.tut-intro{display:flex;flex-direction:column;align-items:center;justify-content:center;}
.tut-intro-box{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:26px 24px;gap:12px;max-width:360px;margin:0 auto;}
.tut-intro-ic{font-size:46px;}
.tut-intro-title{font-size:21px;font-weight:900;letter-spacing:.5px;color:var(--cyan-bright);}
.tut-intro-sub{font-size:13.5px;color:var(--text-dim);line-height:1.55;}
.tut-intro-points{width:100%;display:flex;flex-direction:column;gap:8px;margin:6px 0 2px;}
.tut-ip{display:flex;align-items:center;gap:10px;text-align:left;padding:9px 12px;border-radius:11px;
  background:var(--bg-panel);border:1px solid rgba(6,182,212,0.35);font-size:12.5px;line-height:1.35;color:var(--text);}
.tut-ip span{font-size:18px;}
.tut-ip b{color:var(--cyan-bright);}
.tut-intro-note{font-size:12px;color:#9fb6c4;line-height:1.5;margin-top:2px;}
.tut-intro-note b{color:#bef264;}

/* Capa de foco: oscurece todo MENOS el objetivo + mensaje + flecha.
   El "recorte" se logra con un box-shadow gigante sobre el anillo (no hay
   velo que tape el objetivo, así sigue siendo tocable). */
.tut-layer{position:absolute;inset:0;z-index:65;pointer-events:none;}
/* Velo de bloqueo SOLO cuando no hay objetivo recortado (mensajes simples). */
.tut-layer.no-spot .tut-block{position:absolute;inset:0;background:rgba(3,7,12,0.78);
  pointer-events:auto;animation:fadeIn .25s ease both;}
.tut-coach{z-index:72;pointer-events:auto;}
.tut-coach.top{top:96px;}
.tut-coach.bottom{bottom:118px;}
/* Anillo recortado: su sombra gigante oscurece el resto de la pantalla y deja
   un "agujero" claro y tocable sobre el objetivo. */
.tut-ring{position:fixed;z-index:67;border-radius:16px;pointer-events:none;
  border:2.5px solid var(--cyan-bright);
  box-shadow:0 0 0 9999px rgba(3,7,12,0.78),0 0 22px 4px rgba(34,211,238,0.85),inset 0 0 14px rgba(34,211,238,0.45);
  animation:tutRing 1.2s ease-in-out infinite;}
@keyframes tutRing{0%,100%{box-shadow:0 0 0 9999px rgba(3,7,12,0.78),0 0 18px 3px rgba(34,211,238,0.7),inset 0 0 12px rgba(34,211,238,0.4);}
  50%{box-shadow:0 0 0 9999px rgba(3,7,12,0.78),0 0 30px 8px rgba(34,211,238,1),inset 0 0 18px rgba(34,211,238,0.7);}}
.tut-arrow{position:fixed;z-index:70;font-size:30px;line-height:1;color:var(--cyan-bright);pointer-events:none;
  filter:drop-shadow(0 0 8px var(--cyan-bright));animation:arrowBob 1s ease-in-out infinite;}

/* ---------- Reward / celebration ---------- */
.reward-screen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:24px;text-align:center;gap:16px;background:radial-gradient(circle at 50% 40%,#0e1f2b,#05080c);z-index:80;}
.reward-title{font-size:26px;font-weight:800;color:var(--cyan-bright);animation:popIn .5s ease;}
@keyframes popIn{from{opacity:0;transform:scale(.7);}to{opacity:1;transform:scale(1);}}
.reward-row{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:800;animation:fadeIn .5s ease both;}
.reward-row.d1{animation-delay:.3s;}.reward-row.d2{animation-delay:.6s;}.reward-row.d3{animation-delay:.9s;}
.reward-row .gem{font-size:22px;}
.confetti{position:absolute;top:-10px;width:9px;height:14px;border-radius:2px;animation:confFall linear forwards;z-index:1;}
@keyframes confFall{to{transform:translateY(110vh) rotate(600deg);opacity:.3;}}
/* Confeti cian holográfico (victoria AETHERIS) — por encima de la transmisión */
.confetti.confetti-cyan{position:fixed;top:-14px;z-index:120;width:7px;height:13px;pointer-events:none;
  animation:confFallCyan linear forwards;}
@keyframes confFallCyan{
  0%{opacity:0;transform:translateY(-14px) rotate(0deg);}
  12%{opacity:1;}
  to{transform:translateY(112vh) rotate(720deg);opacity:.12;}}

/* ---------- Gacha cinematic ---------- */
.summon-overlay{position:absolute;inset:0;z-index:75;display:flex;flex-direction:column;align-items:center;justify-content:center;
  overflow:hidden;background:#05080c;}
.summon-bg{position:absolute;inset:0;transition:background 1s;}
.summon-rays{position:absolute;left:50%;top:46%;width:680px;height:680px;transform:translate(-50%,-50%);
  background:conic-gradient(from 0deg,transparent 0deg,rgba(255,255,255,0.12) 10deg,transparent 20deg,transparent 40deg,
  rgba(255,255,255,0.12) 50deg,transparent 60deg,transparent 100deg,rgba(255,255,255,0.1) 110deg,transparent 120deg,
  transparent 200deg,rgba(255,255,255,0.1) 210deg,transparent 220deg,transparent 300deg,rgba(255,255,255,0.1) 310deg,transparent 320deg);
  animation:raySpin 14s linear infinite;opacity:0;transition:opacity .6s;border-radius:50%;}
@keyframes raySpin{to{transform:translate(-50%,-50%) rotate(360deg);}}
.summon-card{position:relative;z-index:3;width:230px;border-radius:18px;overflow:hidden;
  border:3px solid var(--cyan);background:#0d1722;box-shadow:0 0 40px var(--cyan-glow-strong);
  opacity:0;transform:scale(.6) translateY(20px);transition:transform .7s cubic-bezier(.2,1.2,.3,1),opacity .6s;}
.summon-card.show{opacity:1;transform:scale(1) translateY(0);}
.summon-card img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:center 12%;}
.summon-card .sc-info{padding:12px;text-align:center;}
.summon-rar{font-size:14px;font-weight:800;letter-spacing:1px;}
.summon-name{font-size:20px;font-weight:800;margin:4px 0 2px;}
.summon-role{font-size:12px;color:var(--cyan-bright);}
.summon-power{font-size:12px;color:var(--text-dim);margin-top:6px;line-height:1.4;}
.summon-continue{position:relative;z-index:4;margin-top:22px;min-width:220px;min-height:56px;opacity:0;transition:opacity .4s;}
.summon-continue.show{opacity:1;}
.summon-banner{position:relative;z-index:4;font-size:22px;font-weight:800;letter-spacing:2px;margin-bottom:8px;opacity:0;
  transition:opacity .5s;text-shadow:0 0 16px currentColor;}
.summon-banner.show{opacity:1;}

.toast{padding:10px 18px;border-radius:24px;font-size:13px;font-weight:700;
  background:rgba(13,20,30,0.96);border:1px solid var(--cyan);color:var(--text);
  box-shadow:0 0 18px var(--cyan-glow);animation:toastIn .3s ease;max-width:90%;text-align:center;}
.toast.err{border-color:var(--red);color:#fca5a5;}
.toast.win{border-color:var(--gold);color:#fcd34d;}
@keyframes toastIn{from{opacity:0;transform:translateY(-12px);}to{opacity:1;transform:none;}}

/* ---------- Mute button ---------- */
.mute-btn{position:absolute;top:10px;right:10px;z-index:95;width:38px;height:38px;border-radius:50%;
  background:rgba(13,20,30,0.9);border:1.5px solid var(--cyan);color:var(--cyan-bright);
  font-size:17px;cursor:pointer;display:flex;align-items:center;justify-content:center;}

/* ---------- Results ---------- */
.results-screen{position:absolute;inset:0;z-index:80;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:24px;text-align:center;gap:14px;}
.results-screen.win{background:radial-gradient(circle at 50% 35%,#0c2417,#05080c);}
.results-screen.lose{background:radial-gradient(circle at 50% 35%,#2a0e10,#05080c);}
.results-verdict{font-size:30px;font-weight:800;animation:popIn .5s ease;}
.results-verdict.win{color:var(--green);}
.results-verdict.lose{color:var(--red);}
.results-stats{width:100%;max-width:320px;display:flex;flex-direction:column;gap:8px;}
.rstat{display:flex;justify-content:space-between;padding:10px 14px;border-radius:10px;
  background:var(--bg-panel);border:1px solid rgba(6,182,212,0.35);font-size:14px;}
.rstat .l{color:var(--text-dim);}
.rstat .v{font-weight:800;color:var(--cyan-bright);}

/* ============================================================
   MISSION SUCCESS — pantalla de victoria de alta fidelidad
   ============================================================ */
.ms-screen{position:absolute;inset:0;z-index:90;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  animation:msIn .4s ease both;}
.ms-screen.ms-out{animation:msOut .32s ease forwards;}
@keyframes msIn{from{opacity:0;}to{opacity:1;}}
@keyframes msOut{to{opacity:0;transform:scale(1.02);}}
.ms-bg{position:absolute;inset:0;background:url('assets/victory_bg.webp') center/cover no-repeat;
  transform:scale(1.08);animation:msBgDrift 22s ease-in-out infinite alternate;}
@keyframes msBgDrift{from{transform:scale(1.08) translateY(0);}to{transform:scale(1.14) translateY(-1.5%);}}
.ms-vignette{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 38%,rgba(5,8,12,0.25) 0%,rgba(5,8,12,0.72) 62%,rgba(5,8,12,0.94) 100%);}
.ms-confetti-host{position:absolute;inset:0;pointer-events:none;z-index:5;}

.ms-content{position:relative;z-index:2;width:100%;max-width:520px;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  gap:10px;padding:20px 18px;overflow-y:auto;}
.ms-content::-webkit-scrollbar{width:0;}

.ms-logo{width:140px;max-width:46%;margin-top:8px;filter:drop-shadow(0 0 14px rgba(6,182,212,0.5));
  animation:popIn .5s ease both;}
.ms-title{font-size:34px;font-weight:900;letter-spacing:3px;line-height:1;
  color:#bdecff;text-transform:uppercase;
  text-shadow:0 0 18px rgba(34,211,238,0.85),0 2px 0 rgba(0,0,0,0.4);
  animation:popIn .5s .1s ease both;}

/* Estrellas */
.ms-stars{display:flex;gap:6px;align-items:center;margin-top:6px;}
.ms-star-wrap{position:relative;width:88px;height:88px;display:flex;align-items:center;justify-content:center;}
.ms-star-ring{position:absolute;inset:6px;border-radius:50%;
  border:1.5px solid rgba(34,211,238,0.4);box-shadow:inset 0 0 16px rgba(34,211,238,0.25);}
.ms-star-ring.flash{animation:msRing .6s ease;}
@keyframes msRing{0%{transform:scale(.7);opacity:0;border-color:#ffd700;}
  40%{opacity:1;}100%{transform:scale(1);opacity:1;border-color:rgba(34,211,238,0.4);}}
.ms-star{font-size:62px;line-height:1;transition:transform .2s;}
.ms-star.off{color:#1b2733;text-shadow:none;opacity:.55;}
.ms-star.on{color:#ffd700;opacity:0;transform:scale(0) rotate(-40deg);
  text-shadow:0 0 18px rgba(255,215,0,0.9),0 0 34px rgba(255,179,0,0.7);}
.ms-star.on.pop{animation:msStarPop .55s cubic-bezier(.2,1.6,.4,1) forwards;}
@keyframes msStarPop{0%{opacity:0;transform:scale(0) rotate(-40deg);}
  60%{opacity:1;transform:scale(1.3) rotate(6deg);}100%{opacity:1;transform:scale(1) rotate(0);}}
.ms-star-wrap:nth-child(2){transform:translateY(-12px) scale(1.12);}
.ms-rank{margin-top:2px;font-size:14px;font-weight:800;letter-spacing:3px;color:#ffd86b;
  padding:5px 18px;border:1px solid rgba(255,200,60,0.5);border-radius:20px;
  background:rgba(40,30,8,0.5);text-shadow:0 0 10px rgba(255,200,60,0.5);
  animation:fadeIn .6s 1.2s ease both;}

/* Cabecera de sección */
.ms-sec-head{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;
  margin-top:10px;animation:fadeIn .5s 1.3s ease both;}
.ms-sec-head::before,.ms-sec-head::after{content:'';flex:1;height:1px;max-width:90px;
  background:linear-gradient(90deg,transparent,rgba(34,211,238,0.7));}
.ms-sec-head::after{background:linear-gradient(90deg,rgba(34,211,238,0.7),transparent);}
.ms-sec-head span{font-size:13px;font-weight:800;letter-spacing:4px;color:#6fdcf2;}

/* Recompensas */
.ms-rewards{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;width:100%;}
.ms-reward{flex:1;min-width:84px;max-width:108px;border-radius:12px;padding:10px 8px 8px;
  background:linear-gradient(180deg,rgba(8,20,30,0.92),rgba(6,14,22,0.92));
  border:1.5px solid rgba(34,211,238,0.45);text-align:center;
  box-shadow:0 4px 14px rgba(0,0,0,0.4);animation:msReward .5s ease both;}
.ms-reward.d0{animation-delay:1.4s;}.ms-reward.d1{animation-delay:1.55s;}
.ms-reward.d2{animation-delay:1.7s;}.ms-reward.d3{animation-delay:1.85s;}
@keyframes msReward{from{opacity:0;transform:translateY(14px) scale(.9);}to{opacity:1;transform:none;}}
.ms-reward.legendary{border-color:rgba(255,200,60,0.75);
  background:linear-gradient(180deg,rgba(50,38,8,0.95),rgba(28,20,4,0.95));
  box-shadow:0 0 16px rgba(255,200,60,0.3),0 4px 14px rgba(0,0,0,0.5);}
.ms-reward-tag{font-size:8.5px;font-weight:800;letter-spacing:1px;color:#6fdcf2;margin-bottom:5px;}
.ms-reward-tag.gold{color:#ffd86b;}
.ms-reward-art{height:46px;display:flex;align-items:center;justify-content:center;
  font-size:30px;color:#ffd86b;text-shadow:0 0 12px rgba(255,200,60,0.6);}
.ms-reward-art img{width:46px;height:46px;border-radius:8px;object-fit:cover;}
.ms-reward-name{font-size:10px;font-weight:700;color:#e8f6ff;margin-top:5px;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ms-reward-val{font-size:14px;font-weight:900;color:#22d3ee;margin-top:3px;}
.ms-reward-stars{font-size:9px;color:#ffd700;margin-top:3px;letter-spacing:1px;}

/* Caché CODEX confiscado (botín enemigo, paleta roja/verde tóxica) */
.codex-cache{position:relative;width:100%;max-width:300px;margin:4px auto 0;padding:14px 12px 12px;
  border-radius:16px;text-align:center;cursor:pointer;overflow:hidden;
  background:linear-gradient(180deg,rgba(20,6,6,0.95),rgba(6,10,6,0.96));
  border:1.5px solid rgba(239,68,68,0.6);
  box-shadow:0 0 18px rgba(34,197,94,0.22),0 0 18px rgba(239,68,68,0.18),0 6px 18px rgba(0,0,0,0.5);
  animation:msReward .5s 2.1s ease both;}
.codex-cache-glow{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 50% 60%,rgba(34,197,94,0.22),transparent 65%);
  opacity:.9;animation:cacheGlow 2.4s ease-in-out infinite;}
@keyframes cacheGlow{0%,100%{opacity:.55;}50%{opacity:1;}}
.codex-cache-tag{position:relative;font-size:10px;font-weight:800;letter-spacing:2px;
  color:#ff6b6b;text-shadow:0 0 10px rgba(239,68,68,0.6);margin-bottom:6px;}
.codex-cache-img{position:relative;width:140px;height:140px;object-fit:contain;display:block;margin:0 auto;
  filter:drop-shadow(0 0 14px rgba(34,197,94,0.5)) drop-shadow(0 6px 10px rgba(0,0,0,0.6));
  animation:cacheFloat 3s ease-in-out infinite;transition:transform .35s ease;}
@keyframes cacheFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}
.codex-cache-hint{position:relative;font-size:10px;font-weight:800;letter-spacing:1px;
  color:#bef264;text-shadow:0 0 8px rgba(132,204,22,0.5);margin-top:6px;
  animation:cachePulse 1.2s ease-in-out infinite;}
@keyframes cachePulse{0%,100%{opacity:.55;}50%{opacity:1;}}
.codex-cache-loot{position:relative;display:none;font-size:13px;font-weight:900;
  color:#84cc16;text-shadow:0 0 10px rgba(132,204,22,0.6);margin-top:6px;}
.codex-cache-loot.show{display:block;animation:cacheLoot .5s ease both;}
@keyframes cacheLoot{from{opacity:0;transform:scale(.7);}to{opacity:1;transform:scale(1);}}
.codex-cache.opened{cursor:default;border-color:rgba(132,204,22,0.7);
  box-shadow:0 0 26px rgba(132,204,22,0.4),0 6px 18px rgba(0,0,0,0.5);}
.codex-cache.opened .codex-cache-img{transform:scale(1.08);animation:none;
  filter:drop-shadow(0 0 22px rgba(132,204,22,0.7)) drop-shadow(0 6px 10px rgba(0,0,0,0.6));}

/* Escuadrón */
.ms-squad{width:100%;display:flex;flex-direction:column;gap:6px;margin-top:8px;}
.ms-squad-row{display:flex;align-items:center;gap:10px;padding:6px 10px;border-radius:10px;
  background:rgba(8,18,28,0.7);border:1px solid rgba(34,211,238,0.3);
  animation:msReward .5s ease both;}
.ms-squad-row.d0{animation-delay:1.7s;}.ms-squad-row.d1{animation-delay:1.8s;}
.ms-squad-row.d2{animation-delay:1.9s;}.ms-squad-row.d3{animation-delay:2.0s;}
.ms-squad-pic{width:36px;height:36px;border-radius:8px;object-fit:cover;
  border:1px solid rgba(34,211,238,0.5);flex-shrink:0;}
.ms-squad-mid{flex:1;min-width:0;}
.ms-squad-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:4px;}
.ms-squad-name{font-size:12px;font-weight:700;color:#e8f6ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ms-squad-lvl{font-size:10px;font-weight:800;color:#6fdcf2;flex-shrink:0;margin-left:6px;}
.ms-squad-bar{height:6px;border-radius:4px;background:rgba(6,30,40,0.9);overflow:hidden;}
.ms-squad-fill{height:100%;width:0;border-radius:4px;
  background:linear-gradient(90deg,#0891b2,#22d3ee,#67e8f9);
  box-shadow:0 0 8px rgba(34,211,238,0.6);animation:msXp 1.1s 2.0s ease forwards;}
@keyframes msXp{to{width:72%;}}

/* Botones */
.ms-actions{display:flex;gap:8px;width:100%;margin-top:auto;padding-top:12px;
  animation:fadeIn .5s 2.1s ease both;}
.ms-btn{flex:1;padding:14px 8px;border-radius:10px;font-size:13px;font-weight:800;letter-spacing:1px;
  cursor:pointer;border:1.5px solid rgba(34,211,238,0.5);color:#bdecff;
  background:rgba(8,20,30,0.85);transition:transform .12s,box-shadow .15s;}
.ms-btn.ghost:active{transform:scale(.96);}
.ms-btn.primary{flex:1.4;color:#1a1206;border-color:#ffd86b;
  background:linear-gradient(180deg,#ffd86b,#f0a500);
  box-shadow:0 0 18px rgba(255,200,60,0.5);text-shadow:0 1px 0 rgba(255,255,255,0.3);
  animation:msPulse 1.8s ease-in-out infinite;}
.ms-btn.primary:active{transform:scale(.96);}
@keyframes msPulse{0%,100%{box-shadow:0 0 18px rgba(255,200,60,0.45);}50%{box-shadow:0 0 28px rgba(255,200,60,0.8);}}
@media(max-width:420px){
  .ms-title{font-size:27px;}
  .ms-star-wrap{width:66px;height:66px;}
  .ms-star{font-size:46px;}
  .ms-reward{min-width:74px;}
}

/* ============================================================
   THE ARCHITECT — encuentro de jefe (intro cinematográfica)
   ============================================================ */
.arch-enc{position:absolute;inset:0;z-index:95;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;
  background:#04060a;animation:archIn .5s ease both;}
.arch-enc.arch-out{animation:archOut .36s ease forwards;}
@keyframes archIn{from{opacity:0;}to{opacity:1;}}
@keyframes archOut{to{opacity:0;filter:brightness(2);}}
.arch-bg{position:absolute;inset:0;background:url('assets/architect_arena_bg.webp') center/cover no-repeat;
  transform:scale(1.06);animation:archBgDrift 18s ease-in-out infinite alternate;}
@keyframes archBgDrift{from{transform:scale(1.06) translateY(0);}to{transform:scale(1.12) translateY(-1.5%);}}
.arch-haze{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 40%,rgba(120,20,20,0.18),transparent 55%),
             radial-gradient(ellipse at 50% 100%,rgba(4,6,10,0.95),transparent 60%),
             linear-gradient(180deg,rgba(4,6,10,0.6),transparent 22%);
  animation:archPulse 3.4s ease-in-out infinite;}
@keyframes archPulse{0%,100%{opacity:.85;}50%{opacity:1;}}
.arch-scanlines{position:absolute;inset:0;pointer-events:none;opacity:.12;
  background:repeating-linear-gradient(0deg,transparent 0 2px,rgba(255,255,255,0.08) 2px 3px);
  animation:archScan 6s linear infinite;}
@keyframes archScan{to{background-position:0 30px;}}

/* Barra de HP del jefe */
.arch-hpbar{position:relative;z-index:3;width:100%;max-width:680px;padding:18px 16px 0;
  animation:archHpIn .6s .2s ease both;}
@keyframes archHpIn{from{opacity:0;transform:translateY(-16px);}to{opacity:1;transform:none;}}
.arch-hp-frame{position:relative;padding:8px 14px 10px;border-radius:10px;
  border:1px solid rgba(255,60,60,0.5);background:rgba(20,4,6,0.55);
  box-shadow:0 0 22px rgba(255,40,40,0.25),inset 0 0 18px rgba(255,40,40,0.12);
  clip-path:polygon(0 0,100% 0,100% 70%,97% 100%,3% 100%,0 70%);}
.arch-hp-name{text-align:center;font-size:17px;font-weight:900;letter-spacing:3px;color:#fff;
  text-shadow:0 0 12px rgba(255,40,40,0.8);margin-bottom:6px;}
.arch-hp-num{font-size:12px;font-weight:700;letter-spacing:1px;color:#ff9c9c;margin-left:8px;}
.arch-hp-num b{color:#fff;}
.arch-hp-track{position:relative;height:18px;border-radius:4px;overflow:hidden;
  background:rgba(40,6,8,0.9);border:1px solid rgba(255,60,60,0.4);}
.arch-hp-fill{height:100%;width:0;border-radius:3px;
  background:linear-gradient(90deg,#7a0c10,#ff2b2b 60%,#ff5e5e);
  box-shadow:0 0 14px rgba(255,40,40,0.7);transition:width 1.4s cubic-bezier(.2,.8,.3,1);
  position:relative;}
.arch-hp-fill::after{content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(120deg,transparent 0 8px,rgba(255,255,255,0.12) 8px 10px);
  animation:archHpStripe .8s linear infinite;}
@keyframes archHpStripe{to{background-position:20px 0;}}

/* Jefe (sprite con capas de glitch) */
.arch-boss-wrap{position:relative;z-index:2;flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center;
  min-height:0;margin-top:-6px;}
.arch-boss-glow{position:absolute;bottom:4%;left:50%;transform:translateX(-50%);
  width:78%;height:46%;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse,rgba(255,40,40,0.4),transparent 70%);
  filter:blur(8px);animation:archPulse 2.8s ease-in-out infinite;}
.arch-boss{position:relative;max-height:74vh;max-width:88%;object-fit:contain;
  filter:drop-shadow(0 0 26px rgba(255,30,30,0.55));
  animation:archBossIn 1s .3s cubic-bezier(.2,.9,.3,1) both, archFloat 5s 1.3s ease-in-out infinite;}
@keyframes archBossIn{from{opacity:0;transform:scale(1.18) translateY(20px);filter:brightness(3) drop-shadow(0 0 40px rgba(255,30,30,0.9));}
  to{opacity:1;transform:none;}}
@keyframes archFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-12px);}}
/* Capas de aberración cromática que parpadean (glitch) */
.arch-boss.glitch{position:absolute;left:50%;bottom:0;max-height:74vh;max-width:88%;
  transform:translateX(-50%);mix-blend-mode:screen;opacity:0;pointer-events:none;}
.arch-boss.glitch.r{filter:drop-shadow(0 0 0 #f00);}
.arch-boss.glitch.c{filter:drop-shadow(0 0 0 #0ff);}
.arch-boss.glitch.r{animation:archGlitchR 3.2s steps(1) infinite;}
.arch-boss.glitch.c{animation:archGlitchC 3.2s steps(1) infinite;}
@keyframes archGlitchR{0%,90%,100%{opacity:0;transform:translateX(-50%);}
  91%{opacity:.55;transform:translate(-54%,0);}93%{opacity:0;}95%{opacity:.5;transform:translate(-47%,2px);}96%{opacity:0;}}
@keyframes archGlitchC{0%,92%,100%{opacity:0;transform:translateX(-50%);}
  93%{opacity:.5;transform:translate(-46%,0);}94%{opacity:0;}97%{opacity:.45;transform:translate(-53%,-2px);}98%{opacity:0;}}

/* Cita del Director */
.arch-quote{position:relative;z-index:3;display:flex;align-items:center;gap:12px;
  width:100%;max-width:520px;padding:10px 16px;margin-bottom:6px;
  animation:fadeIn .7s 1.4s ease both;}
.arch-quote-pic{width:48px;height:48px;border-radius:8px;object-fit:cover;flex-shrink:0;
  border:1px solid rgba(34,211,238,0.6);box-shadow:0 0 12px rgba(34,211,238,0.3);}
.arch-quote-name{font-size:12px;font-weight:800;letter-spacing:2px;color:#6fdcf2;margin-bottom:3px;}
.arch-quote-line{font-size:14px;font-style:italic;color:#e8f6ff;line-height:1.3;
  text-shadow:0 1px 4px rgba(0,0,0,0.8);}

/* Tag del escuadrón */
.arch-squad-tag{position:relative;z-index:3;width:100%;max-width:520px;padding:0 16px 6px;
  animation:fadeIn .6s 1.6s ease both;}
.arch-squad-title{font-size:11px;font-weight:800;letter-spacing:3px;color:#ffb4b4;
  text-align:center;margin-bottom:6px;text-shadow:0 0 8px rgba(255,40,40,0.5);}
.arch-squad-icons{display:flex;justify-content:center;gap:14px;}
.arch-squad-ic{display:flex;flex-direction:column;align-items:center;gap:3px;}
.arch-squad-ic img{width:40px;height:40px;border-radius:50%;object-fit:cover;
  border:1.5px solid rgba(255,60,60,0.5);box-shadow:0 0 10px rgba(255,40,40,0.3);}
.arch-squad-ic span{font-size:8.5px;font-weight:700;letter-spacing:1px;color:#cfe9f5;}

/* Botón de combate */
.arch-engage{position:relative;z-index:4;margin:4px 0 22px;padding:15px 40px;
  font-size:16px;font-weight:900;letter-spacing:2px;color:#fff;cursor:pointer;
  border:1.5px solid #ff5e5e;border-radius:10px;
  background:linear-gradient(180deg,#c81f24,#7a0c10);
  box-shadow:0 0 22px rgba(255,40,40,0.6);text-shadow:0 1px 6px rgba(0,0,0,0.6);
  clip-path:polygon(6% 0,94% 0,100% 50%,94% 100%,6% 100%,0 50%);
  animation:archEngage 1.6s ease-in-out infinite, fadeIn .6s 1.8s ease both;}
.arch-engage:active{transform:scale(.95);}
@keyframes archEngage{0%,100%{box-shadow:0 0 22px rgba(255,40,40,0.5);}50%{box-shadow:0 0 36px rgba(255,40,40,0.95);}}

.daily-grid{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-bottom:8px;}
.daily-day{width:54px;padding:8px 4px;border-radius:10px;text-align:center;
  background:#0d1722;border:1.5px solid rgba(6,182,212,0.3);}
.daily-day.claimed{border-color:var(--green);opacity:.7;}
.daily-day.today{border-color:var(--cyan-bright);box-shadow:0 0 14px var(--cyan-glow-strong);background:rgba(6,182,212,0.14);}
.daily-day .dn{font-size:10px;color:var(--text-dim);}
.daily-day .dv{font-size:13px;font-weight:800;color:var(--cyan-bright);margin-top:3px;}
.daily-day .chk{color:var(--green);font-size:14px;font-weight:800;}

/* Bloque de stats en la carta de especialista (HP/ATK/DEF/SPD) */
.spec-statgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:12px;}
.spec-stat{display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:8px 2px;border-radius:9px;background:rgba(6,182,212,0.08);
  border:1px solid rgba(6,182,212,0.28);}
.spec-stat .sl{font-size:9px;font-weight:700;color:var(--text-dim);letter-spacing:.3px;}
.spec-stat .sv{font-size:15px;font-weight:800;color:var(--cyan-bright);}

/* ========================================================= */
/* CODEX — facción enemiga (ROJO, en contraste con héroes cyan) */
/* ========================================================= */

/* --- Panel de enemigo en combate (.codex-bar) --- */
.codex-bar{display:flex;align-items:center;gap:11px;margin:8px 0 4px;padding:9px 11px;
  border-radius:13px;background:linear-gradient(135deg,rgba(40,9,12,0.92),rgba(20,5,7,0.92));
  border:1.5px solid rgba(239,68,68,0.55);box-shadow:0 0 18px rgba(239,68,68,0.22),inset 0 0 22px rgba(239,68,68,0.08);
  position:relative;overflow:hidden;}
.codex-bar::before{content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(45deg,rgba(239,68,68,0.05) 0 8px,transparent 8px 16px);
  pointer-events:none;}
.codex-art{width:50px;height:50px;flex-shrink:0;border-radius:10px;object-fit:cover;object-position:top center;
  border:1.5px solid rgba(239,68,68,0.7);box-shadow:0 0 12px rgba(239,68,68,0.45);background:#1a0608;}
.codex-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;z-index:1;}
.codex-tag{font-size:9px;font-weight:800;letter-spacing:1.2px;color:#fca5a5;text-transform:uppercase;}
.codex-name{font-size:15px;font-weight:800;color:#fecaca;line-height:1.1;
  text-shadow:0 0 9px rgba(239,68,68,0.55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.codex-role{font-size:10.5px;color:#f1a5a5;opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.codex-threat{display:flex;flex-direction:column;align-items:flex-end;gap:2px;z-index:1;flex-shrink:0;}
.codex-threat .ct-label{font-size:8.5px;font-weight:800;letter-spacing:.6px;color:#fca5a5;}
.codex-threat .ct-val{font-size:11px;font-weight:800;color:#ef4444;text-shadow:0 0 8px rgba(239,68,68,0.6);}
.codex-lvl{font-size:10px;color:#ef4444;letter-spacing:1px;text-shadow:0 0 6px rgba(239,68,68,0.5);}

/* --- Dossier de inteligencia en el briefing (.codex-dossier) --- */
.codex-dossier{display:flex;gap:12px;align-items:center;margin:14px 0;padding:12px;
  border-radius:14px;background:linear-gradient(135deg,rgba(40,9,12,0.95),rgba(16,4,6,0.95));
  border:1.5px solid rgba(239,68,68,0.5);box-shadow:0 0 22px rgba(239,68,68,0.2),inset 0 0 28px rgba(239,68,68,0.07);
  position:relative;overflow:hidden;animation:popIn .45s ease;}
.codex-dossier::before{content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(45deg,rgba(239,68,68,0.045) 0 9px,transparent 9px 18px);
  pointer-events:none;}
.codex-d-art{width:78px;height:96px;flex-shrink:0;border-radius:11px;object-fit:cover;object-position:top center;
  border:1.5px solid rgba(239,68,68,0.7);box-shadow:0 0 16px rgba(239,68,68,0.45);background:#1a0608;z-index:1;}
.codex-d-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;z-index:1;}
.codex-d-tag{font-size:9.5px;font-weight:800;letter-spacing:1.3px;color:#fca5a5;text-transform:uppercase;}
.codex-d-name{font-size:18px;font-weight:800;color:#fecaca;line-height:1.05;
  text-shadow:0 0 11px rgba(239,68,68,0.6);}
.codex-d-role{font-size:11px;color:#f1a5a5;opacity:.92;}
.codex-d-quote{font-size:11.5px;font-style:italic;color:#fda4af;opacity:.95;line-height:1.35;
  margin-top:3px;padding-left:9px;border-left:2px solid rgba(239,68,68,0.6);}
.codex-d-brief{font-size:12.5px;color:#fecaca;line-height:1.45;margin:6px 0 2px;
  padding:9px 11px;border-radius:10px;background:rgba(239,68,68,0.09);
  border:1px solid rgba(239,68,68,0.32);}

/* ========================================================= */
/* DESPLEGAR ESCUADRÓN — pantalla de selección de equipo      */
/* ========================================================= */
.deploy-screen{position:absolute;inset:0;display:flex;flex-direction:column;
  background:radial-gradient(circle at 50% 0%,#0c1420,#0a0e14 60%);overflow:hidden;}

/* ---- Encabezado ---- */
.dep-head{display:flex;align-items:center;gap:10px;padding:12px 12px 10px;flex-shrink:0;
  border-bottom:1px solid rgba(6,182,212,0.2);}
.dep-back{width:38px;height:38px;flex-shrink:0;border-radius:10px;cursor:pointer;
  background:rgba(13,20,30,0.9);border:1.5px solid var(--cyan);color:var(--cyan-bright);
  font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center;}
.dep-title-wrap{flex:1;min-width:0;}
.dep-title{font-size:19px;font-weight:800;color:#fff;letter-spacing:.5px;line-height:1.1;
  text-shadow:0 0 12px var(--cyan-glow-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dep-sub{font-size:11.5px;color:var(--cyan-bright);font-weight:600;margin-top:1px;}
.dep-power{text-align:right;flex-shrink:0;}
.dep-power-l{font-size:8.5px;font-weight:800;letter-spacing:.8px;color:var(--cyan-bright);}
.dep-power-v{font-size:20px;font-weight:800;color:var(--gold);line-height:1;
  text-shadow:0 0 10px rgba(245,158,11,0.5);}

/* ---- Cuerpo: ranuras (izq) + cuadrícula (der) ---- */
.dep-body{flex:1;display:grid;grid-template-columns:1fr 96px;gap:8px;
  padding:10px;overflow-y:auto;min-height:0;}
.dep-slots{display:flex;flex-direction:column;gap:8px;}
.dep-roster{display:flex;flex-direction:column;gap:6px;}

/* Ranuras */
.dep-slot{position:relative;display:flex;align-items:stretch;gap:6px;min-height:96px;}
.dep-slot-num{width:20px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  font-size:18px;font-weight:800;color:var(--cyan-bright);opacity:.8;}
.dep-slot-card{flex:1;display:flex;gap:9px;padding:8px;border-radius:13px;position:relative;
  background:linear-gradient(135deg,rgba(13,24,36,0.95),rgba(8,14,22,0.95));
  border:1.5px solid var(--cyan);box-shadow:0 0 16px var(--cyan-glow-strong),inset 0 0 20px rgba(6,182,212,0.06);}
.dep-slot-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  border-radius:13px;border:1.5px dashed rgba(6,182,212,0.4);background:rgba(6,182,212,0.04);}
.dse-plus{font-size:26px;color:rgba(6,182,212,0.6);font-weight:300;line-height:1;}
.dse-txt{font-size:10px;color:var(--text-dim);}

.dsc-portrait{position:relative;width:74px;flex-shrink:0;border-radius:10px;overflow:hidden;
  border:1px solid rgba(6,182,212,0.5);}
.dsc-portrait img{width:100%;height:100%;object-fit:cover;object-position:center 14%;display:block;}
.dsc-rank{position:absolute;top:3px;left:3px;min-width:22px;height:22px;padding:0 4px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#fff;
  background:rgba(10,14,20,0.8);}
.dsc-role-badge{position:absolute;bottom:3px;left:3px;width:20px;height:20px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;font-size:12px;
  background:rgba(6,182,212,0.85);color:#04222b;}
.dsc-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.dsc-name{font-size:15px;font-weight:800;color:#fff;line-height:1.05;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dsc-role-tag{display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:.4px;
  padding:1px 7px;border-radius:6px;background:rgba(6,182,212,0.16);color:var(--cyan-bright);
  border:1px solid rgba(6,182,212,0.4);}
.dsc-abil{font-size:9.5px;color:var(--text-dim);line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dsc-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:3px;}
.dsc-stat{display:flex;flex-direction:column;gap:1px;padding:4px 3px;border-radius:7px;
  background:rgba(6,182,212,0.06);border:1px solid rgba(6,182,212,0.2);text-align:center;}
.dsc-stat .l{font-size:8px;font-weight:700;color:var(--text-dim);letter-spacing:.2px;}
.dsc-stat .l.hp{color:#86efac;} .dsc-stat .l.atk{color:#fca5a5;} .dsc-stat .l.def{color:#93c5fd;}
.dsc-stat .v{font-size:12.5px;font-weight:800;color:#fff;}
.dsc-remove{position:absolute;top:5px;right:5px;width:20px;height:20px;border-radius:50%;cursor:pointer;
  background:rgba(40,9,12,0.85);border:1px solid rgba(239,68,68,0.6);color:#fca5a5;
  font-size:11px;line-height:1;display:flex;align-items:center;justify-content:center;}

/* Rango -> color de borde de la ranura */
.dep-slot-card.dr-ss{border-color:#f59e0b;box-shadow:0 0 16px rgba(245,158,11,0.4),inset 0 0 20px rgba(245,158,11,0.07);}
.dep-slot-card.dr-s{border-color:#a855f7;box-shadow:0 0 16px rgba(168,85,247,0.4),inset 0 0 20px rgba(168,85,247,0.07);}
.dep-slot-card.dr-a{border-color:#3b82f6;box-shadow:0 0 16px rgba(59,130,246,0.4),inset 0 0 20px rgba(59,130,246,0.07);}
.dep-slot-card.dr-b{border-color:#22c55e;box-shadow:0 0 16px rgba(34,197,94,0.4),inset 0 0 20px rgba(34,197,94,0.07);}
.dep-slot-card.dr-c{border-color:#94a3b8;box-shadow:0 0 16px rgba(148,163,184,0.35),inset 0 0 20px rgba(148,163,184,0.06);}
.dep-slot-card.dr-ss .dsc-rank{color:#fcd34d;border:1px solid #f59e0b;}
.dep-slot-card.dr-s .dsc-rank{color:#d8b4fe;border:1px solid #a855f7;}
.dep-slot-card.dr-a .dsc-rank{color:#93c5fd;border:1px solid #3b82f6;}
.dep-slot-card.dr-b .dsc-rank{color:#86efac;border:1px solid #22c55e;}
.dep-slot-card.dr-c .dsc-rank{color:#cbd5e1;border:1px solid #94a3b8;}

/* ---- Cuadrícula de 12 ---- */
.dep-roster-head{display:flex;flex-direction:column;gap:1px;padding:2px 1px;}
.drh-title{font-size:9px;font-weight:800;letter-spacing:.5px;color:var(--cyan-bright);line-height:1.1;}
.drh-count{font-size:11px;font-weight:800;color:#fff;}
.dep-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;}
.dep-cell{position:relative;aspect-ratio:3/4;border-radius:9px;overflow:hidden;cursor:pointer;
  border:1.5px solid rgba(148,163,184,0.4);background:#0d1722;transition:transform .12s;}
.dep-cell:active{transform:scale(0.95);}
.dep-cell img{width:100%;height:100%;object-fit:cover;object-position:center 12%;display:block;}
.dep-cell-rank{position:absolute;top:2px;left:2px;min-width:16px;height:16px;padding:0 3px;border-radius:4px;
  display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;color:#fff;
  background:rgba(10,14,20,0.82);}
.dep-cell-role{position:absolute;bottom:14px;right:3px;width:15px;height:15px;border-radius:4px;
  display:flex;align-items:center;justify-content:center;font-size:9px;
  background:rgba(6,182,212,0.85);color:#04222b;}
.dep-cell-lvl{position:absolute;bottom:0;left:0;right:0;text-align:center;font-size:7.5px;font-weight:700;
  color:#cbd5e1;background:linear-gradient(transparent,rgba(5,8,12,0.92));padding:5px 0 2px;letter-spacing:.3px;}
.dep-cell-check{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:26px;font-weight:800;color:#fff;background:rgba(6,182,212,0.4);text-shadow:0 0 10px #000;}
.dep-cell.sel{box-shadow:0 0 12px var(--cyan-glow-strong);}
.dep-cell.dr-ss{border-color:#f59e0b;} .dep-cell.dr-ss .dep-cell-rank{color:#fcd34d;border:1px solid #f59e0b;}
.dep-cell.dr-s{border-color:#a855f7;} .dep-cell.dr-s .dep-cell-rank{color:#d8b4fe;border:1px solid #a855f7;}
.dep-cell.dr-a{border-color:#3b82f6;} .dep-cell.dr-a .dep-cell-rank{color:#93c5fd;border:1px solid #3b82f6;}
.dep-cell.dr-b{border-color:#22c55e;} .dep-cell.dr-b .dep-cell-rank{color:#86efac;border:1px solid #22c55e;}
.dep-cell.dr-c{border-color:#94a3b8;} .dep-cell.dr-c .dep-cell-rank{color:#cbd5e1;border:1px solid #94a3b8;}

/* ---- Footer ---- */
.dep-footer{flex-shrink:0;display:grid;grid-template-columns:1fr 0.85fr;gap:8px;padding:8px 10px 4px;
  border-top:1px solid rgba(6,182,212,0.2);}
.dep-summary,.dep-synergy{border-radius:12px;padding:8px 10px;
  background:rgba(13,24,36,0.7);border:1px solid rgba(6,182,212,0.3);}
.ds-title,.dsy-title{font-size:9.5px;font-weight:800;letter-spacing:.6px;color:var(--cyan-bright);margin-bottom:6px;}
.ds-stats{display:flex;flex-direction:column;gap:5px;}
.ds-stat{display:flex;align-items:center;gap:6px;}
.ds-ic{font-size:11px;width:14px;}
.ds-l{flex:1;font-size:9px;font-weight:700;color:var(--text-dim);letter-spacing:.3px;}
.ds-v{font-size:14px;font-weight:800;color:#fff;}
.ds-stat.hp .ds-l{color:#86efac;} .ds-stat.atk .ds-l{color:#fca5a5;} .ds-stat.def .ds-l{color:#93c5fd;}
.dsy-row{display:flex;align-items:baseline;gap:6px;margin-bottom:4px;}
.dsy-pct{font-size:16px;font-weight:800;line-height:1;flex-shrink:0;}
.dsy-pct.heal{color:#22c55e;text-shadow:0 0 8px rgba(34,197,94,0.5);}
.dsy-pct.shield{color:var(--cyan-bright);text-shadow:0 0 8px var(--cyan-glow-strong);}
.dsy-lbl{font-size:8.5px;font-weight:700;color:var(--text-dim);letter-spacing:.3px;line-height:1.2;}

/* ---- Botón Iniciar Misión ---- */
.dep-start{flex-shrink:0;margin:6px 10px 12px;padding:15px;border-radius:14px;cursor:pointer;
  font-size:18px;font-weight:800;letter-spacing:1px;color:#04222b;border:none;
  background:linear-gradient(135deg,#22d3ee,#06b6d4);
  box-shadow:0 0 22px var(--cyan-glow-strong);transition:filter .15s,transform .1s;}
.dep-start.ready{animation:depPulse 1.8s ease-in-out infinite;}
.dep-start:active{transform:scale(0.98);}
.dep-start:disabled{filter:grayscale(0.7) brightness(0.6);box-shadow:none;cursor:not-allowed;animation:none;}
@keyframes depPulse{0%,100%{box-shadow:0 0 22px var(--cyan-glow-strong);}50%{box-shadow:0 0 34px var(--cyan-bright);}}

@media (max-width:380px){
  .dep-body{grid-template-columns:1fr 84px;}
  .dsc-portrait{width:64px;}
}

/* === Sello "PASIVA" en cartas SS del despliegue === */
.dsc-passive{position:absolute;right:3px;top:3px;
  display:flex;align-items:center;justify-content:center;gap:3px;
  height:18px;padding:0 6px;border-radius:6px;
  font-size:8px;font-weight:900;letter-spacing:0.6px;color:#0a0e14;
  background:linear-gradient(135deg,#fcd34d,#f59e0b);
  border:1px solid #fffbeb;
  box-shadow:0 0 10px rgba(245,158,11,0.6);
  text-transform:uppercase;white-space:nowrap;
  animation:passiveGlow 1.8s ease-in-out infinite;}
.dep-cell-passive{position:absolute;top:2px;right:2px;width:16px;height:16px;
  display:flex;align-items:center;justify-content:center;font-size:9px;border-radius:4px;
  background:linear-gradient(135deg,#fcd34d,#f59e0b);
  border:1px solid #fffbeb;box-shadow:0 0 8px rgba(245,158,11,0.7);
  animation:passiveGlow 1.8s ease-in-out infinite;}
@keyframes passiveGlow{0%,100%{box-shadow:0 0 8px rgba(245,158,11,0.7);}50%{box-shadow:0 0 14px rgba(252,211,77,0.95);}}

/* === Pasivas de escuadrón SS (Figueredo / Rivera) en combate === */
.ss-passive-bar{margin:6px 0 4px;padding:8px 10px;border-radius:12px;
  background:linear-gradient(135deg,rgba(6,182,212,0.12),rgba(13,20,30,0.6));
  border:1px solid rgba(6,182,212,0.32);box-shadow:0 0 16px rgba(6,182,212,0.12) inset;}
.ssp-head{font-size:9px;font-weight:800;letter-spacing:1.3px;color:var(--cyan-bright);
  text-transform:uppercase;margin-bottom:6px;opacity:.9;}
.ssp-list{display:flex;gap:8px;flex-wrap:wrap;}
.ss-passive{flex:1 1 0;min-width:140px;display:flex;align-items:center;gap:8px;
  padding:6px 8px;border-radius:10px;position:relative;overflow:hidden;
  background:rgba(8,14,22,0.7);
  border:1px solid color-mix(in srgb, var(--pc) 55%, transparent);
  box-shadow:0 0 12px color-mix(in srgb, var(--pc) 22%, transparent);}
.ss-passive img{width:34px;height:34px;border-radius:8px;object-fit:cover;flex-shrink:0;
  border:1.5px solid color-mix(in srgb, var(--pc) 70%, transparent);
  box-shadow:0 0 8px color-mix(in srgb, var(--pc) 30%, transparent);}
.ssp-txt{min-width:0;line-height:1.25;}
.ssp-name{font-size:11px;font-weight:800;color:var(--pc);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ssp-by{font-size:9px;color:var(--text-dim,#94a3b8);font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ss-passive.pulse{animation:sspFlash .8s ease-out;}
@keyframes sspFlash{
  0%{box-shadow:0 0 0 color-mix(in srgb, var(--pc) 0%, transparent);transform:scale(1);}
  35%{box-shadow:0 0 22px color-mix(in srgb, var(--pc) 70%, transparent);transform:scale(1.03);}
  100%{box-shadow:0 0 12px color-mix(in srgb, var(--pc) 22%, transparent);transform:scale(1);}
}
@media (max-width:380px){
  .ss-passive{min-width:120px;}
}

/* === PANTALLA DE CARGA — splash oficial a pantalla completa + barra real === */
.loading-screen{
  position:relative;overflow:hidden;background:#0a0e14;
  align-items:center;justify-content:center;
}
.load-splash{
  position:absolute;inset:0;width:100%;height:100%;z-index:0;
  object-fit:cover;object-position:center top;
  animation:loadSplashIn 1.2s ease both;
}
@keyframes loadSplashIn{0%{opacity:0;transform:scale(1.05);}100%{opacity:1;transform:scale(1);}}
/* Degradado inferior para que la barra y el texto siempre se lean */
.load-fade{
  position:absolute;left:0;right:0;bottom:0;height:34%;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,transparent 0%,rgba(10,14,20,0.55) 55%,rgba(10,14,20,0.95) 100%);
}
.load-ui{
  position:absolute;left:0;right:0;bottom:calc(34px + env(safe-area-inset-bottom,0px));
  z-index:2;display:flex;flex-direction:column;align-items:center;gap:9px;
  padding:0 26px;width:100%;
}
.load-label{
  font-size:13px;font-weight:700;letter-spacing:3px;color:var(--cyan-bright);
  text-transform:uppercase;text-shadow:0 1px 10px rgba(0,0,0,0.8);
}
.load-bar{
  position:relative;width:min(82vw,340px);height:12px;border-radius:7px;overflow:hidden;
  background:rgba(6,182,212,0.1);
  border:1px solid rgba(6,182,212,0.5);
  box-shadow:0 0 16px rgba(6,182,212,0.25), 0 0 10px rgba(6,182,212,0.18) inset;
}
.load-fill{
  width:0%;height:100%;border-radius:7px;
  background:linear-gradient(90deg,#0891b2,#22d3ee 70%,#67e8f9);
  box-shadow:0 0 16px var(--cyan-bright);
  transition:width .18s linear;
}
/* Brillo que recorre la barra mientras carga */
.load-fill::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.5),transparent);
  background-size:60px 100%;background-repeat:no-repeat;
  animation:loadShine 1.1s linear infinite;
}
@keyframes loadShine{0%{background-position:-60px 0;}100%{background-position:calc(100% + 60px) 0;}}
.load-pct{
  font-size:12px;font-weight:800;letter-spacing:1.5px;color:#e8feff;
  text-shadow:0 0 10px rgba(6,182,212,0.6);
}

/* === Logo oficial en el menú principal (HQ) === */
.hq-brand{display:flex;justify-content:center;align-items:center;padding:6px 16px 2px;}
.hq-logo{
  width:min(64vw,260px);max-height:120px;object-fit:contain;
  filter:drop-shadow(0 0 18px rgba(6,182,212,0.4));
}

/* === TRANSMISIÓN ENTRANTE — overlay holográfico de alerta === */
.tx-back{
  position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;
  padding:24px;background:rgba(4,7,11,0.74);backdrop-filter:blur(3px);
  animation:txBackIn .22s ease both;
}
.tx-back.tx-out{animation:txBackOut .26s ease both;}
@keyframes txBackIn{from{opacity:0;}to{opacity:1;}}
@keyframes txBackOut{from{opacity:1;}to{opacity:0;}}

.tx-box{
  --tx:#06b6d4;            /* color de facción (se sobreescribe por variante) */
  --tx-bright:#22d3ee;
  position:relative;width:100%;max-width:380px;overflow:hidden;
  border-radius:16px;padding:16px 16px 14px;
  background:linear-gradient(155deg, rgba(10,16,24,0.96), rgba(7,11,17,0.98));
  border:1px solid color-mix(in srgb, var(--tx) 60%, transparent);
  box-shadow:0 0 0 1px rgba(0,0,0,0.4), 0 0 40px color-mix(in srgb, var(--tx) 35%, transparent),
    0 18px 50px rgba(0,0,0,0.6);
  animation:txBoxIn .34s cubic-bezier(.2,.9,.25,1) both;
}
.tx-box.tx-out{animation:txBoxOut .26s ease both;}
@keyframes txBoxIn{0%{opacity:0;transform:translateY(14px) scale(.94);}100%{opacity:1;transform:translateY(0) scale(1);}}
@keyframes txBoxOut{0%{opacity:1;transform:scale(1);}100%{opacity:0;transform:scale(.96) translateY(8px);}}

/* Variantes de facción */
.tx-codex .tx-box{--tx:#ef4444;--tx-bright:#fca5a5;}
.tx-aetheris .tx-box{--tx:#06b6d4;--tx-bright:#22d3ee;}

/* Marco de esquinas tipo HUD */
.tx-box::before,.tx-box::after{
  content:'';position:absolute;width:22px;height:22px;pointer-events:none;
  border:2px solid var(--tx-bright);opacity:.85;
}
.tx-box::before{top:7px;left:7px;border-right:none;border-bottom:none;border-top-left-radius:8px;}
.tx-box::after{bottom:7px;right:7px;border-left:none;border-top:none;border-bottom-right-radius:8px;}

/* Barrido de escáner de apertura */
.tx-scan{
  position:absolute;left:0;right:0;top:0;height:40%;pointer-events:none;z-index:3;
  background:linear-gradient(180deg, color-mix(in srgb, var(--tx) 28%, transparent), transparent);
  animation:txScan 1.1s ease-out 1 both;
}
@keyframes txScan{0%{transform:translateY(-120%);}100%{transform:translateY(280%);opacity:0;}}
/* Líneas de ruido/scanlines sutiles */
.tx-noise{
  position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.10;mix-blend-mode:screen;
  background:repeating-linear-gradient(0deg, var(--tx-bright) 0 1px, transparent 1px 3px);
  animation:txNoise 3.4s linear infinite;
}
@keyframes txNoise{0%{background-position:0 0;}100%{background-position:0 6px;}}

.tx-head{position:relative;z-index:4;display:flex;align-items:center;gap:8px;margin-bottom:12px;}
.tx-dot{width:9px;height:9px;border-radius:50%;background:var(--tx-bright);
  box-shadow:0 0 10px var(--tx-bright);animation:txBlink 1s steps(2) infinite;flex-shrink:0;}
@keyframes txBlink{50%{opacity:.25;}}
.tx-tag{font-size:10px;font-weight:900;letter-spacing:1.6px;color:var(--tx-bright);
  text-transform:uppercase;flex:1;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tx-freq{font-size:8.5px;font-weight:700;letter-spacing:.5px;color:var(--text-dim);
  font-variant-numeric:tabular-nums;flex-shrink:0;}

.tx-body{position:relative;z-index:4;display:flex;gap:12px;align-items:center;margin-bottom:12px;}
.tx-portrait{position:relative;width:78px;height:78px;flex-shrink:0;border-radius:11px;overflow:hidden;
  border:1.5px solid color-mix(in srgb, var(--tx) 65%, transparent);
  box-shadow:0 0 16px color-mix(in srgb, var(--tx) 35%, transparent);background:#05080c;}
.tx-portrait img{width:100%;height:100%;object-fit:cover;
  filter:saturate(1.05) contrast(1.05);}
.tx-noart{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  font-size:34px;font-weight:900;color:var(--tx-bright);}
.tx-portrait-grid{position:absolute;inset:0;pointer-events:none;mix-blend-mode:overlay;opacity:.5;
  background:linear-gradient(color-mix(in srgb,var(--tx) 50%,transparent) 1px,transparent 1px) 0 0/100% 12px,
            linear-gradient(90deg,color-mix(in srgb,var(--tx) 50%,transparent) 1px,transparent 1px) 0 0/12px 100%;}
.tx-portrait-line{position:absolute;left:0;right:0;height:18px;pointer-events:none;
  background:linear-gradient(180deg, color-mix(in srgb,var(--tx-bright) 55%,transparent), transparent);
  animation:txPLine 2.2s linear infinite;}
@keyframes txPLine{0%{top:-20%;}100%{top:120%;}}

.tx-meta{min-width:0;}
.tx-from-l{font-size:8.5px;font-weight:800;letter-spacing:2px;color:var(--text-dim);text-transform:uppercase;}
.tx-from{font-size:18px;font-weight:900;color:var(--tx-bright);line-height:1.15;
  text-shadow:0 0 14px color-mix(in srgb, var(--tx) 50%, transparent);}
.tx-role{font-size:10.5px;font-weight:700;color:var(--text);opacity:.82;margin-top:2px;
  letter-spacing:.3px;}

.tx-msg{position:relative;z-index:4;min-height:64px;font-size:13px;line-height:1.5;color:var(--text);
  white-space:pre-wrap;padding:11px 12px;border-radius:10px;margin-bottom:13px;
  background:color-mix(in srgb, var(--tx) 9%, rgba(5,8,12,0.6));
  border-left:2px solid var(--tx);}
.tx-msg::after{content:'▋';color:var(--tx-bright);animation:txCaret .7s steps(2) infinite;margin-left:1px;}
.tx-msg.done::after{display:none;}
@keyframes txCaret{50%{opacity:0;}}

.tx-actions{position:relative;z-index:4;display:flex;gap:9px;}
.tx-btn{flex:1;padding:12px 10px;border-radius:10px;border:none;cursor:pointer;
  font-family:inherit;font-size:13px;font-weight:800;letter-spacing:.5px;transition:filter .15s,transform .1s;}
.tx-btn:active{transform:scale(.97);}
.tx-btn.accept{color:#04121a;
  background:linear-gradient(135deg, var(--tx-bright), var(--tx));
  box-shadow:0 0 18px color-mix(in srgb, var(--tx) 45%, transparent);}
.tx-btn.decline{flex:0 0 auto;min-width:96px;color:var(--text);background:rgba(148,163,184,0.12);
  border:1px solid rgba(148,163,184,0.32);}
.tx-btn.accept:hover{filter:brightness(1.08);}

@media (max-width:380px){
  .tx-from{font-size:16px;}
  .tx-portrait{width:66px;height:66px;}
}

/* ========================================================= */
/* TIENDA AETHERIS — economía de CRÉDITOS (cyan holográfico)  */
/* ========================================================= */
.shop-balance{display:flex;align-items:center;justify-content:center;gap:8px;
  margin:2px 12px 8px;padding:9px 14px;border-radius:12px;
  background:linear-gradient(135deg,rgba(13,24,36,0.92),rgba(8,14,22,0.92));
  border:1.5px solid rgba(6,182,212,0.45);box-shadow:0 0 16px rgba(6,182,212,0.18) inset;}
.shop-balance .gem{font-size:18px;color:var(--cyan-bright);text-shadow:0 0 10px var(--cyan-glow-strong);}
.shop-bal-v{font-size:20px;font-weight:900;color:#fff;letter-spacing:.5px;}
.shop-bal-l{font-size:10px;font-weight:800;letter-spacing:1.5px;color:var(--cyan-bright);}

.shop-tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.shop-note{font-size:11.5px;color:var(--text-dim);line-height:1.4;margin:2px 2px 10px;
  padding:8px 10px;border-radius:9px;background:rgba(6,182,212,0.06);
  border-left:2px solid rgba(6,182,212,0.5);}
.shop-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;}
.shop-item{display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:10px 9px 9px;border-radius:13px;position:relative;
  background:linear-gradient(180deg,rgba(13,24,36,0.92),rgba(8,14,22,0.94));
  border:1.5px solid rgba(6,182,212,0.34);box-shadow:0 3px 12px rgba(0,0,0,0.4);}
.shop-item.owned{border-color:rgba(34,197,94,0.55);box-shadow:0 0 14px rgba(34,197,94,0.18);}
.shop-item-ic{width:62px;height:62px;border-radius:12px;overflow:hidden;margin-bottom:7px;
  display:flex;align-items:center;justify-content:center;background:rgba(6,182,212,0.07);
  border:1px solid rgba(6,182,212,0.25);}
.shop-item-ic img{width:100%;height:100%;object-fit:contain;}
.shop-item-name{font-size:12.5px;font-weight:800;color:#fff;line-height:1.15;min-height:30px;
  display:flex;align-items:center;}
.shop-item-desc{font-size:10px;color:var(--text-dim);line-height:1.3;margin-top:3px;
  min-height:39px;}
.shop-item-spec{font-size:9px;font-weight:800;letter-spacing:.5px;color:var(--cyan-bright);
  margin-top:4px;padding:2px 8px;border-radius:6px;background:rgba(6,182,212,0.12);}
.shop-buy{margin-top:8px;width:100%;padding:9px 6px;border-radius:9px;cursor:pointer;
  font-family:inherit;font-size:13px;font-weight:800;letter-spacing:.3px;color:#04222b;border:none;
  background:linear-gradient(135deg,#22d3ee,#06b6d4);box-shadow:0 0 14px rgba(6,182,212,0.4);
  transition:filter .15s,transform .1s;display:flex;align-items:center;justify-content:center;gap:5px;}
.shop-buy .gem{font-size:13px;}
.shop-buy:active{transform:scale(.96);}
.shop-buy.owned{background:rgba(34,197,94,0.2);color:#86efac;border:1px solid rgba(34,197,94,0.5);
  box-shadow:none;cursor:default;}
.shop-buy.poor{filter:grayscale(0.5) brightness(0.7);}
.shop-disclaimer{font-size:10px;color:var(--text-dim);line-height:1.45;text-align:center;
  margin:14px 4px 8px;padding:10px;border-radius:10px;
  background:rgba(6,182,212,0.05);border:1px dashed rgba(6,182,212,0.3);}

/* ========================================================= */
/* TIENDA · CAPA 2 — MONETIZACIÓN SIMULADA (premium + dorado) */
/* ========================================================= */
.tab.tab-premium{color:#ffd86b;border-color:rgba(245,200,60,0.5);}
.tab.tab-premium.active{background:linear-gradient(135deg,rgba(245,200,60,0.22),rgba(245,158,11,0.12));
  color:#ffe9a8;box-shadow:0 0 14px rgba(245,200,60,0.35);}

.prem-demo-banner{font-size:11px;font-weight:800;letter-spacing:.4px;line-height:1.4;text-align:center;
  color:#ffe9a8;margin:0 2px 12px;padding:10px 12px;border-radius:11px;
  background:linear-gradient(135deg,rgba(245,200,60,0.16),rgba(245,158,11,0.08));
  border:1.5px solid rgba(245,200,60,0.5);box-shadow:0 0 16px rgba(245,200,60,0.2);}

.prem-section{margin-bottom:16px;padding:12px;border-radius:15px;
  background:linear-gradient(180deg,rgba(13,24,36,0.9),rgba(8,14,22,0.92));
  border:1.5px solid rgba(6,182,212,0.32);box-shadow:0 3px 14px rgba(0,0,0,0.4);}
.prem-section.vip{border-color:rgba(245,200,60,0.5);
  background:linear-gradient(180deg,rgba(34,28,10,0.55),rgba(10,12,16,0.92));
  box-shadow:0 0 18px rgba(245,200,60,0.14);}
.prem-sec-head{display:flex;align-items:center;gap:11px;margin-bottom:11px;}
.prem-sec-ic{font-size:24px;width:42px;height:42px;flex-shrink:0;border-radius:11px;
  display:flex;align-items:center;justify-content:center;color:var(--cyan-bright);
  background:rgba(6,182,212,0.1);border:1px solid rgba(6,182,212,0.35);
  text-shadow:0 0 10px var(--cyan-glow-strong);}
.prem-sec-ic.gold{color:#ffd86b;background:rgba(245,200,60,0.12);
  border-color:rgba(245,200,60,0.45);text-shadow:0 0 10px rgba(245,200,60,0.6);}
.prem-sec-title{font-size:16px;font-weight:900;letter-spacing:1px;color:#fff;line-height:1.1;}
.prem-sec-title.gold{color:#ffe9a8;text-shadow:0 0 12px rgba(245,200,60,0.4);}
.prem-sec-sub{font-size:10.5px;color:var(--text-dim);margin-top:2px;line-height:1.3;}

/* --- Packs de BioShards --- */
.prem-pack-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;}
.prem-pack{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:12px 8px 10px;border-radius:12px;
  background:linear-gradient(180deg,rgba(8,20,30,0.92),rgba(6,12,20,0.94));
  border:1.5px solid rgba(6,182,212,0.34);}
.prem-pack.best{border-color:rgba(245,200,60,0.65);box-shadow:0 0 18px rgba(245,200,60,0.25);
  grid-column:span 2;}
.prem-pack-best{position:absolute;top:-9px;left:50%;transform:translateX(-50%);
  font-size:8.5px;font-weight:900;letter-spacing:1px;color:#1a1206;white-space:nowrap;
  padding:3px 12px;border-radius:7px;background:linear-gradient(135deg,#ffd86b,#f0a500);
  box-shadow:0 0 10px rgba(245,200,60,0.6);}
.prem-pack-ic{font-size:26px;color:var(--cyan-bright);text-shadow:0 0 12px var(--cyan-glow-strong);}
.prem-pack.best .prem-pack-ic{color:#ffd86b;text-shadow:0 0 12px rgba(245,200,60,0.7);}
.prem-pack-amt{font-size:21px;font-weight:900;color:#fff;line-height:1.1;margin-top:2px;}
.prem-pack-lbl{font-size:9.5px;font-weight:800;letter-spacing:1px;color:var(--cyan-bright);}
.prem-pack-tag{font-size:9px;font-weight:800;color:#86efac;margin-top:4px;
  padding:2px 8px;border-radius:6px;background:rgba(34,197,94,0.14);}
.prem-buy{margin-top:9px;width:100%;padding:9px 6px;border-radius:9px;cursor:pointer;
  font-family:inherit;font-size:13px;font-weight:900;letter-spacing:.5px;color:#04222b;border:none;
  background:linear-gradient(135deg,#22d3ee,#06b6d4);box-shadow:0 0 12px rgba(6,182,212,0.4);
  transition:filter .15s,transform .1s;}
.prem-pack.best .prem-buy{color:#1a1206;background:linear-gradient(135deg,#ffd86b,#f0a500);
  box-shadow:0 0 14px rgba(245,200,60,0.5);}
.prem-buy:active{transform:scale(.96);}
.prem-fineprint{font-size:9.5px;color:var(--text-dim);line-height:1.4;text-align:center;margin-top:9px;}

/* --- Pase de temporada --- */
.pass-progress{margin-bottom:9px;}
.pass-prog-top{display:flex;justify-content:space-between;font-size:10px;font-weight:800;
  letter-spacing:.6px;color:var(--cyan-bright);margin-bottom:5px;}
.pass-prog-bar{height:9px;border-radius:6px;overflow:hidden;background:rgba(6,30,40,0.9);
  border:1px solid rgba(6,182,212,0.4);}
.pass-prog-fill{height:100%;border-radius:5px;
  background:linear-gradient(90deg,#0891b2,#22d3ee,#67e8f9);
  box-shadow:0 0 10px var(--cyan-glow-strong);}
.pass-legend{font-size:10px;color:var(--text-dim);margin-bottom:9px;}
.pass-tag{font-size:9px;font-weight:900;letter-spacing:.5px;padding:1px 6px;border-radius:5px;}
.pass-tag.free{color:#9fb6c4;background:rgba(148,163,184,0.16);}
.pass-tag.prem{color:#1a1206;background:linear-gradient(135deg,#ffd86b,#f0a500);}
.pass-rail{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;
  padding:2px 0 8px;margin-bottom:10px;}
.pass-col{flex:0 0 92px;display:flex;flex-direction:column;gap:5px;text-align:center;}
.pass-lvl{font-size:10px;font-weight:900;letter-spacing:.5px;color:#fff;padding:3px 0;border-radius:6px;
  background:rgba(6,182,212,0.12);border:1px solid rgba(6,182,212,0.3);}
.pass-col.reached .pass-lvl{color:#86efac;background:rgba(34,197,94,0.16);border-color:rgba(34,197,94,0.5);}
.pass-reward{font-size:9.5px;line-height:1.25;padding:7px 5px;border-radius:8px;min-height:42px;
  display:flex;align-items:center;justify-content:center;}
.pass-reward.free{color:#cfe9f5;background:rgba(148,163,184,0.1);border:1px solid rgba(148,163,184,0.25);}
.pass-reward.prem{color:#ffe9a8;background:rgba(245,200,60,0.1);border:1px solid rgba(245,200,60,0.4);}

/* --- CTA premium (botones grandes) --- */
.prem-cta{width:100%;padding:13px;border-radius:11px;cursor:pointer;font-family:inherit;
  font-size:13.5px;font-weight:900;letter-spacing:.6px;color:#04222b;border:none;
  background:linear-gradient(135deg,#22d3ee,#06b6d4);box-shadow:0 0 16px rgba(6,182,212,0.4);
  transition:filter .15s,transform .1s;}
.prem-cta.gold{color:#1a1206;background:linear-gradient(135deg,#ffd86b,#f0a500);
  box-shadow:0 0 18px rgba(245,200,60,0.5);}
.prem-cta:active{transform:scale(.98);}

/* --- VIP perks --- */
.vip-perks{display:flex;flex-direction:column;gap:7px;margin-bottom:11px;}
.vip-perk{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;
  background:rgba(245,200,60,0.06);border:1px solid rgba(245,200,60,0.28);}
.vip-perk-ic{font-size:19px;width:30px;text-align:center;flex-shrink:0;}
.vip-perk-title{font-size:12.5px;font-weight:800;color:#ffe9a8;line-height:1.15;}
.vip-perk-desc{font-size:10px;color:var(--text-dim);line-height:1.3;margin-top:1px;}