/*
  Impulsa Quest · Micro:bit
  Campaña 1 · El Despertar del Núcleo
  V52 · CSS IA OMEGA en Campaña 1
  Creador y diseño pedagógico: Silvio Fagúndez
*/

/* ===== Bloque CSS original 1 ===== */
:root{
  --bg:#050913;--bg2:#091426;--panel:#0d1c33;--panel2:#102746;--line:#284c73;
  --txt:#f5fbff;--muted:#9fb5cf;--cyan:#46d8ff;--violet:#a77cff;--green:#56f39a;
  --red:#ff5f78;--gold:#ffd166;--orange:#ff9f43;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,Segoe UI,Arial,sans-serif;background:
radial-gradient(circle at 20% 0%,#12305c 0,transparent 28%),
radial-gradient(circle at 80% 10%,#28154c 0,transparent 22%),
linear-gradient(180deg,var(--bg2),var(--bg));color:var(--txt)}
button,input,select,textarea{font:inherit}
body:before{
 content:"";position:fixed;inset:0;pointer-events:none;opacity:.13;
 background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
 background-size:32px 32px
}
.app{max-width:1440px;margin:auto;padding:16px}
.card{background:linear-gradient(180deg,rgba(15,34,60,.96),rgba(6,16,30,.97));
 border:1px solid var(--line);border-radius:22px;box-shadow:0 18px 50px rgba(0,0,0,.28)}
.top{display:grid;grid-template-columns:1.35fr 1fr;gap:12px;margin-bottom:12px}
.brand{padding:18px 22px;position:relative;overflow:hidden}
.brand:after{content:"";position:absolute;right:-50px;top:-80px;width:220px;height:220px;border-radius:50%;
 background:radial-gradient(circle,#36cfff44,transparent 65%)}
.brand h1{margin:0;font-size:clamp(25px,4vw,46px);letter-spacing:.3px}
.brand p{margin:6px 0 0;color:var(--muted)}
.stats{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;padding:12px}
.stat{background:#071526;border:1px solid #193c61;border-radius:15px;padding:10px;text-align:center}
.stat b{display:block;font-size:20px}.stat span{display:block;color:var(--muted);font-size:11px;margin-top:2px}
.grid{display:grid;grid-template-columns:320px 1fr;gap:12px}
.side{padding:14px;display:flex;flex-direction:column;gap:12px}
.micro-shell{background:linear-gradient(145deg,#222,#080808);border:5px solid #3d4651;border-radius:30px;padding:16px;position:relative;min-height:250px;overflow:hidden}
.micro-shell.evolved{box-shadow:0 0 30px #46d8ff55,inset 0 0 35px #6f42ff25;border-color:#556a87}
.core{position:absolute;inset:0;background:radial-gradient(circle at 50% 46%,#3ce7ff22,transparent 32%);pointer-events:none}
.leds{display:grid;grid-template-columns:repeat(5,19px);gap:9px;justify-content:center;margin:12px 0 20px}
.led{width:19px;height:19px;border-radius:4px;background:#272d33;box-shadow:inset 0 0 6px #000}
.led.on{background:#ff4260;box-shadow:0 0 12px #ff4260}
.mbrow{display:flex;align-items:center;justify-content:space-between}
.mbutton{width:55px;height:55px;border-radius:50%;border:5px solid #9ea4aa;background:#444;color:#fff;font-weight:900}
.pins{height:20px;margin:16px -16px -16px;border-radius:0 0 14px 14px;background:repeating-linear-gradient(90deg,#e7bf4f 0 18px,#171717 18px 28px)}
.badges{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.badge{padding:8px 9px;background:#071526;border:1px solid #1c4166;border-radius:12px;font-size:12px;color:#bed3e8}
.badge.locked{opacity:.35;filter:grayscale(1)}
.nav{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.btn{border:0;border-radius:13px;padding:11px 14px;font-weight:800;cursor:pointer;transition:.18s}
.btn:hover{transform:translateY(-1px);filter:brightness(1.08)}
.primary{background:linear-gradient(90deg,#2368ff,#7647e9);color:#fff}
.secondary{background:#0c213a;color:#fff;border:1px solid #28567f}
.good{background:#13613a;color:#fff}.danger{background:#742438;color:#fff}.gold{background:#7c5812;color:#fff}
.main{padding:16px;min-height:740px}
.screen{display:none}.screen.active{display:block}
.hero{display:grid;grid-template-columns:1.25fr .75fr;gap:14px;align-items:center;min-height:640px}
.hero h2{font-size:clamp(32px,5vw,62px);line-height:1.02;margin:0 0 12px}
.hero p{color:var(--muted);line-height:1.65;font-size:16px}
.hero-art{padding:24px;text-align:center}
.hero-art .big{font-size:150px;filter:drop-shadow(0 0 28px #46d8ff44)}
.glow-title{background:linear-gradient(90deg,#fff,#65ddff,#b489ff);-webkit-background-clip:text;color:transparent}
.cta{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}
.section-title{display:flex;justify-content:space-between;gap:10px;align-items:end;margin-bottom:12px}
.section-title h2{margin:0}.section-title p{margin:0;color:var(--muted);font-size:13px}
.worlds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
.world{padding:15px;border-radius:17px;background:linear-gradient(180deg,#0a1d34,#071522);border:1px solid #275077;cursor:pointer;position:relative;overflow:hidden}
.world:before{content:"";position:absolute;inset:auto -30px -45px auto;width:120px;height:120px;border-radius:50%;background:#4fdcff12}
.world:hover{border-color:#56cfff;transform:translateY(-1px)}
.world.locked{opacity:.35;filter:grayscale(1);cursor:not-allowed}.world.done{border-color:#2e8f62}
.world h3{margin:0 0 6px}.world p{margin:0;color:var(--muted);font-size:13px}
.tag{display:inline-block;margin-top:9px;padding:5px 8px;border-radius:999px;background:#132e50;color:#b8ddff;font-size:11px}
.skilltree{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.node{padding:14px;border-radius:16px;background:#071526;border:1px solid #244b70;min-height:120px}
.node.unlocked{box-shadow:inset 0 0 28px #48d8ff12;border-color:#3c8ab7}.node h3{margin:0 0 6px}.node p{margin:0;color:var(--muted);font-size:12px;line-height:1.4}
.shop{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.shopitem{padding:14px;border-radius:16px;background:#071526;border:1px solid #244b70}
.shopitem h3{margin:0 0 5px}.price{color:var(--gold);font-weight:800}
.battle-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}
.battle-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fighter{padding:14px;text-align:center;border-radius:18px;background:#071526;border:1px solid #244b70}
.avatar{font-size:88px;filter:drop-shadow(0 0 16px #46d8ff33)}
.enemy-avatar{font-size:100px;filter:drop-shadow(0 0 18px #ff5f7833)}
.bar{height:14px;background:#162538;border:1px solid #304c69;border-radius:999px;overflow:hidden;margin:8px 0}
.fill{height:100%;transition:.35s}.hp{background:linear-gradient(90deg,#ff416c,#ff6b6b)}.mana{background:linear-gradient(90deg,#22c1ff,#7c4dff)}
.question{margin-top:12px;padding:15px;border-radius:17px;background:#071526;border:1px solid #244b70}
.qtop{display:flex;justify-content:space-between;color:var(--muted);font-size:12px;margin-bottom:8px}
.answers{display:grid;gap:8px;margin-top:11px}
.answer{padding:12px;text-align:left;border-radius:12px;border:1px solid #2e5f8e;background:#0c223c;color:#fff;cursor:pointer}
.answer:hover{background:#15385d}.answer:disabled{opacity:.55;cursor:not-allowed}
.actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.special{background:#3f2a78;color:white}.heal{background:#135d3b;color:white}
.feedback{min-height:22px;margin-top:9px;font-weight:800}
.eventbox{padding:20px;border-radius:18px;background:linear-gradient(180deg,#121d39,#071526);border:1px solid #4d4b82;text-align:center}
.eventbox .big{font-size:92px}
.progress-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.metric{padding:12px;border-radius:14px;background:#071526;border:1px solid #244b70}
.metric b{font-size:24px}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.76);display:none;align-items:center;justify-content:center;padding:18px;z-index:30}
.modal.open{display:flex}.modalbox{width:min(680px,100%);padding:20px}
label{display:block;margin:10px 0 5px;color:var(--muted)}
input,select,textarea{width:100%;padding:11px;border:1px solid #34587b;border-radius:10px;background:#061522;color:#fff}
textarea{min-height:115px;resize:vertical;line-height:1.45}
.survey-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}
.survey-card{padding:12px;border-radius:14px;background:#071526;border:1px solid #244b70;text-align:center}
.stars{display:flex;justify-content:center;gap:3px;margin-top:8px;flex-wrap:wrap}
.starbtn{border:0;background:transparent;color:#53667b;font-size:25px;cursor:pointer;padding:2px;line-height:1}
.starbtn.active{color:#ffd166;filter:drop-shadow(0 0 5px rgba(255,209,102,.35))}
.topic-row{display:grid;grid-template-columns:150px 1fr 55px;gap:9px;align-items:center;margin:8px 0}
.topic-bar{height:10px;background:#162538;border-radius:999px;overflow:hidden;border:1px solid #304c69}
.topic-fill{height:100%;background:linear-gradient(90deg,#2368ff,#56f39a)}

/* ===== MISIONES · COFRES · NIVEL SECRETO ===== */
.mission-summary{display:grid;grid-template-columns:repeat(4,minmax(120px,1fr));gap:10px;margin-bottom:14px}
.mission-summary .metric{background:linear-gradient(180deg,#0b1c31,#081523);border:1px solid #294a6b;border-radius:14px;padding:13px}
.mission-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.mission-card{position:relative;background:linear-gradient(160deg,#0b1b2f,#081421);border:1px solid #294a6b;border-radius:16px;padding:15px;overflow:hidden}
.mission-card.done{border-color:#22c985;box-shadow:0 0 22px rgba(34,201,133,.10)}
.mission-card.claimable{border-color:#f4c84a;box-shadow:0 0 26px rgba(244,200,74,.12)}
.mission-card h3{margin:0 0 7px;font-size:17px}.mission-card p{color:var(--muted);margin:0 0 10px;line-height:1.45}
.mission-progress{height:8px;background:#07111e;border:1px solid #1d3853;border-radius:999px;overflow:hidden;margin:10px 0}
.mission-progress>div{height:100%;background:linear-gradient(90deg,#27d3ff,#8b72ff);border-radius:999px}
.mission-reward{font-size:12px;color:#d8eaff;margin:8px 0 12px}.mission-status{font-size:12px;font-weight:800}
.fragment-box{background:linear-gradient(135deg,rgba(126,85,255,.16),rgba(33,211,255,.08));border:1px solid #7056c8;border-radius:18px;padding:18px;margin-top:14px}
.fragment-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:12px 0}.fragment{width:52px;height:52px;border-radius:14px;border:1px solid #39506d;background:#071321;display:grid;place-items:center;font-size:25px;filter:grayscale(1);opacity:.35}.fragment.on{filter:none;opacity:1;border-color:#9b7cff;box-shadow:0 0 22px rgba(155,124,255,.23)}
.secret-gate{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid #2b3f59}.secret-ready{color:#d4c3ff;font-weight:800}.secret-locked{color:var(--muted)}
.chest-legend{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}.chest-legend>div{background:#081726;border:1px solid #263f5a;border-radius:12px;padding:10px;text-align:center;font-size:12px}
@media(max-width:850px){.mission-grid{grid-template-columns:1fr}.mission-summary{grid-template-columns:1fr 1fr}.chest-legend{grid-template-columns:1fr 1fr}}

.secret-alert{border-color:#a77cff!important;box-shadow:0 0 30px rgba(167,124,255,.15)}
.reward-summary{display:grid;grid-template-columns:repeat(4,minmax(120px,1fr));gap:10px;margin-bottom:14px}
.reward-summary .metric{background:linear-gradient(180deg,#0b1c31,#081523);border:1px solid #294a6b;border-radius:14px;padding:13px}
.reward-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.reward-card{background:linear-gradient(160deg,#0b1b2f,#081421);border:1px solid #294a6b;border-radius:16px;padding:15px}
.reward-card h3{margin:0 0 8px}.reward-list{display:grid;gap:8px}.reward-item{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:10px 12px;border:1px solid #243e59;border-radius:12px;background:#071625}.reward-item small{color:var(--muted)}
.reward-toast{position:fixed;right:22px;bottom:22px;z-index:9999;width:min(390px,calc(100vw - 32px));background:linear-gradient(160deg,#102947,#091727);border:1px solid #f4c84a;border-radius:16px;padding:15px 16px;box-shadow:0 18px 50px rgba(0,0,0,.45);display:none;cursor:pointer}.reward-toast.show{display:block;animation:rewardPop .22s ease-out}.reward-toast-title{font-weight:900;font-size:16px;margin-bottom:5px}.reward-toast-text{color:#d8eaff;font-size:13px;line-height:1.45}.reward-toast-action{margin-top:8px;color:#f4c84a;font-weight:800;font-size:12px}
@keyframes rewardPop{from{transform:translateY(14px);opacity:0}to{transform:translateY(0);opacity:1}}
@media(max-width:850px){.reward-grid{grid-template-columns:1fr}.reward-summary{grid-template-columns:1fr 1fr}}
@media(max-width:650px){.survey-grid{grid-template-columns:1fr}.topic-row{grid-template-columns:110px 1fr 48px}}
.toast{position:fixed;right:16px;bottom:16px;background:#102a46;border:1px solid #3a739f;border-radius:13px;padding:12px 16px;display:none;z-index:40}
.pulse{animation:pulse .45s ease}.shake{animation:shake .35s ease}
@keyframes pulse{50%{transform:scale(1.07);filter:brightness(1.35)}}@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@media(max-width:1000px){.top,.grid,.hero,.battle-grid{grid-template-columns:1fr}.stats{grid-template-columns:repeat(3,1fr)}.worlds,.skilltree,.shop,.progress-grid{grid-template-columns:1fr 1fr}.grid{display:block}.side{margin-bottom:12px}}
@media(max-width:650px){.stats{grid-template-columns:repeat(2,1fr)}.worlds,.skilltree,.shop,.progress-grid{grid-template-columns:1fr}}

.author-credit{
  margin-top:18px;
  padding:12px 14px;
  border-radius:14px;
  background:linear-gradient(180deg,rgba(9,27,47,.72),rgba(6,18,32,.72));
  border:1px solid rgba(70,216,255,.18);
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
}
.author-credit strong{
  color:var(--txt);
  font-size:14px;
}
.author-credit .degree{
  color:#bfeeff;
}
.final-credit{
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid #244b70;
  color:var(--muted);
  font-size:13px;
  line-height:1.55;
}
.final-credit strong{color:var(--txt)}


.final-form{
  position:relative;
  width:280px;
  height:360px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
}
.final-aura{
  position:absolute;
  inset:0;
  border-radius:50%;
  background:
    radial-gradient(circle at center, rgba(70,216,255,.28) 0 18%, transparent 19% 100%),
    radial-gradient(circle at center, rgba(167,124,255,.18) 0 34%, transparent 35% 100%);
  filter:blur(6px);
  animation:auraPulse 2.2s ease-in-out infinite;
}
.energy-ring{
  position:absolute;
  width:300px;
  height:300px;
  border-radius:50%;
  border:2px solid rgba(70,216,255,.35);
  box-shadow:0 0 22px rgba(70,216,255,.22), inset 0 0 22px rgba(167,124,255,.15);
  animation:spinRing 10s linear infinite;
}
.energy-ring.r2{
  width:240px;
  height:240px;
  border-color:rgba(167,124,255,.45);
  animation-direction:reverse;
  animation-duration:7s;
}
.final-microbit{
  position:relative;
  width:220px;
  height:285px;
  border-radius:34px;
  background:linear-gradient(145deg,#0d1017,#2b2f3a 48%,#12151d);
  border:5px solid #6a86a5;
  box-shadow:
    0 0 30px rgba(70,216,255,.28),
    0 0 80px rgba(167,124,255,.18),
    inset 0 0 36px rgba(70,216,255,.12);
  overflow:hidden;
  animation:floatCore 3s ease-in-out infinite;
}
.final-microbit:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 38%, rgba(79,220,255,.22), transparent 22%),
    linear-gradient(180deg, rgba(255,255,255,.06), transparent 22%);
  pointer-events:none;
}
.final-leds{
  position:absolute;
  top:60px;
  left:50%;
  transform:translateX(-50%);
  display:grid;
  grid-template-columns:repeat(5,16px);
  gap:9px;
}
.final-led{
  width:16px;
  height:16px;
  border-radius:4px;
  background:#25303b;
  box-shadow:inset 0 0 6px #000;
  animation:ledBlink 1.4s infinite alternate;
}
.final-led.on{
  background:#57e7ff;
  box-shadow:0 0 12px #57e7ff, 0 0 24px rgba(167,124,255,.45);
}
.final-core{
  position:absolute;
  top:156px;
  left:50%;
  transform:translateX(-50%);
  width:78px;
  height:78px;
  border-radius:50%;
  background:radial-gradient(circle,#8ff3ff 0,#4fdcff 38%,#8b5cf6 70%,transparent 72%);
  filter:drop-shadow(0 0 18px rgba(79,220,255,.7));
  animation:corePulse 1.7s ease-in-out infinite;
}
.final-btn{
  position:absolute;
  top:200px;
  width:46px;
  height:46px;
  border-radius:50%;
  border:4px solid #b7c5d2;
  background:linear-gradient(180deg,#6d7682,#474e58);
  color:#fff;
  font-weight:900;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 0 10px rgba(255,255,255,.12);
}
.final-btn.a{left:32px}
.final-btn.b{right:32px}
.final-pins{
  position:absolute;
  left:0; right:0; bottom:0;
  height:28px;
  background:repeating-linear-gradient(90deg,#f0cb60 0 18px,#181818 18px 28px);
  border-radius:0 0 24px 24px;
}
.final-wing{
  position:absolute;
  top:110px;
  width:64px;
  height:110px;
  background:linear-gradient(180deg, rgba(79,220,255,.35), rgba(167,124,255,.12));
  border:2px solid rgba(111,219,255,.35);
  clip-path:polygon(50% 0,100% 18%,78% 100%,22% 100%,0 18%);
  filter:drop-shadow(0 0 12px rgba(79,220,255,.28));
  animation:wingPulse 2.2s ease-in-out infinite;
}
.final-wing.left{left:-40px; transform:rotate(-12deg)}
.final-wing.right{right:-40px; transform:rotate(12deg)}
.orb{
  position:absolute;
  width:18px;
  height:18px;
  border-radius:50%;
  background:radial-gradient(circle,#fff,#4fdcff 55%,#8b5cf6 95%);
  box-shadow:0 0 18px rgba(79,220,255,.65);
}
.orb.o1{animation:orbit1 5s linear infinite}
.orb.o2{animation:orbit2 6.5s linear infinite reverse}
.orb.o3{animation:orbit3 4.8s linear infinite}
@keyframes auraPulse{50%{transform:scale(1.06);opacity:.88}}
@keyframes spinRing{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes floatCore{50%{transform:translateY(-8px)}}
@keyframes corePulse{50%{transform:translateX(-50%) scale(1.12)}}
@keyframes wingPulse{50%{filter:drop-shadow(0 0 22px rgba(79,220,255,.5));opacity:.92}}
@keyframes ledBlink{0%{opacity:.7}100%{opacity:1}}
@keyframes orbit1{0%{transform:translate(0,-135px)}25%{transform:translate(115px,0)}50%{transform:translate(0,135px)}75%{transform:translate(-115px,0)}100%{transform:translate(0,-135px)}}
@keyframes orbit2{0%{transform:translate(95px,-95px)}25%{transform:translate(95px,95px)}50%{transform:translate(-95px,95px)}75%{transform:translate(-95px,-95px)}100%{transform:translate(95px,-95px)}}
@keyframes orbit3{0%{transform:translate(-125px,0)}25%{transform:translate(0,-125px)}50%{transform:translate(125px,0)}75%{transform:translate(0,125px)}100%{transform:translate(-125px,0)}}


/* ===== V15 EVOLUTION ===== */
.form-label{margin-top:10px;text-align:center;padding:8px 10px;border-radius:12px;background:#071526;border:1px solid #244b70;font-size:12px;color:#bfeeff;font-weight:800}
.evolution-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.evo-card{padding:16px;border-radius:18px;background:#071526;border:1px solid #244b70;text-align:center;position:relative;overflow:hidden}
.evo-card.unlocked{border-color:#3c8ab7}.evo-card.selected{box-shadow:0 0 24px #46d8ff33,inset 0 0 26px #46d8ff12;border-color:#56d8ff}
.evo-card.locked{opacity:.42;filter:grayscale(1)}.evo-icon{font-size:64px;margin:4px 0 8px}.evo-card h3{margin:4px 0}.evo-card p{color:var(--muted);font-size:12px;min-height:34px}
.talent-head{padding:12px 14px;border-radius:14px;background:#071526;border:1px solid #244b70;margin-bottom:12px;display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}
.skill-level{display:flex;gap:5px;margin:9px 0}.skill-pip{width:22px;height:7px;border-radius:999px;background:#1b334c}.skill-pip.on{background:linear-gradient(90deg,#46d8ff,#a77cff);box-shadow:0 0 8px #46d8ff55}
.xp-mini{height:7px;background:#162538;border-radius:999px;overflow:hidden;margin-top:6px}.xp-mini>div{height:100%;background:linear-gradient(90deg,#46d8ff,#a77cff)}
.micro-shell.form-pulse{border-color:#48d8ff;box-shadow:0 0 24px #48d8ff35}.micro-shell.form-nova{border-color:#a77cff;box-shadow:0 0 30px #a77cff44}.micro-shell.form-titan{border-color:#ffd166;box-shadow:0 0 34px #ffd16638}.micro-shell.form-omega{border-color:#ffffff;box-shadow:0 0 38px #46d8ff55,0 0 65px #a77cff22}
/* Personalización visual de Micro:bit */
.micro-shell{transition:border-color .28s ease,box-shadow .28s ease,filter .28s ease}
.micro-shell.micro-color-cyan{border-color:#48d8ff}
.micro-shell.micro-color-green{border-color:#56f39a}
.micro-shell.micro-color-red{border-color:#ff5f78}
.micro-shell.micro-color-violet{border-color:#a77cff}
.micro-shell.micro-color-gold{border-color:#ffd166}
.micro-shell.micro-color-white{border-color:#f6fbff}
.micro-shell.micro-color-cyan .core{background:radial-gradient(circle at 50% 46%,#3ce7ff32,transparent 34%)}
.micro-shell.micro-color-green .core{background:radial-gradient(circle at 50% 46%,#56f39a32,transparent 34%)}
.micro-shell.micro-color-red .core{background:radial-gradient(circle at 50% 46%,#ff5f7830,transparent 34%)}
.micro-shell.micro-color-violet .core{background:radial-gradient(circle at 50% 46%,#a77cff36,transparent 34%)}
.micro-shell.micro-color-gold .core{background:radial-gradient(circle at 50% 46%,#ffd16636,transparent 34%)}
.micro-shell.micro-color-white .core{background:radial-gradient(circle at 50% 46%,#ffffff30,transparent 34%)}
@keyframes microPulseAura{0%,100%{filter:drop-shadow(0 0 5px rgba(72,216,255,.35))}50%{filter:drop-shadow(0 0 18px rgba(72,216,255,.85))}}
@keyframes microFlameAura{0%,100%{box-shadow:0 0 22px rgba(255,95,120,.35),inset 0 0 20px rgba(255,209,102,.08)}50%{box-shadow:0 0 40px rgba(255,95,120,.7),0 0 62px rgba(255,209,102,.25),inset 0 0 32px rgba(255,209,102,.12)}}
@keyframes microGalaxyAura{0%,100%{box-shadow:0 0 28px rgba(167,124,255,.45),0 0 52px rgba(72,216,255,.14)}50%{box-shadow:0 0 46px rgba(167,124,255,.75),0 0 72px rgba(72,216,255,.3)}}
@keyframes microLegendAura{0%,100%{box-shadow:0 0 34px rgba(255,209,102,.55),0 0 65px rgba(255,255,255,.16)}50%{box-shadow:0 0 55px rgba(255,209,102,.9),0 0 85px rgba(167,124,255,.32)}}
.micro-shell.micro-aura-pulse{animation:microPulseAura 1.8s ease-in-out infinite}
.micro-shell.micro-aura-flame{animation:microFlameAura 1.35s ease-in-out infinite}
.micro-shell.micro-aura-galaxy{animation:microGalaxyAura 2.2s ease-in-out infinite}
.micro-shell.micro-aura-legend{animation:microLegendAura 1.7s ease-in-out infinite}
/* Módulos tecnológicos integrados: forman parte de la placa, sin emojis superpuestos */
.micro-accessory{position:absolute;inset:0;z-index:8;pointer-events:none;font-size:0;filter:none;transform:none}
.micro-accessory::before,.micro-accessory::after{content:"";position:absolute;display:block;box-sizing:border-box}
/* Visor: barra óptica integrada justo sobre la matriz LED */
.micro-accessory.acc-glasses::before{left:50%;top:88px;width:92px;height:12px;transform:translateX(-50%);border:2px solid currentColor;border-radius:5px;background:linear-gradient(90deg,transparent,rgba(125,235,255,.28),transparent);box-shadow:0 0 12px currentColor,inset 0 0 9px rgba(255,255,255,.12)}
.micro-accessory.acc-glasses::after{left:50%;top:92px;width:56px;height:3px;transform:translateX(-50%);background:currentColor;box-shadow:0 0 8px currentColor}
/* Antena/sensor: nace del PCB y termina en un nodo luminoso */
.micro-accessory.acc-antenna::before{right:24px;top:-12px;width:3px;height:30px;background:linear-gradient(currentColor,#31506b);box-shadow:0 0 8px currentColor}
.micro-accessory.acc-antenna::after{right:18px;top:-19px;width:15px;height:15px;border:3px solid currentColor;border-radius:50%;background:#071526;box-shadow:0 0 13px currentColor}
/* Blindaje: dos placas laterales incorporadas al cuerpo */
.micro-accessory.acc-shield::before{left:-9px;top:54px;width:24px;height:92px;border:2px solid currentColor;border-right:0;border-radius:12px 0 0 12px;background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(17,41,62,.72));box-shadow:0 0 14px currentColor}
.micro-accessory.acc-shield::after{right:-9px;top:54px;width:24px;height:92px;border:2px solid currentColor;border-left:0;border-radius:0 12px 12px 0;background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(17,41,62,.72));box-shadow:0 0 14px currentColor}
/* Arco Omega: aro técnico incrustado en el borde superior */
.micro-accessory.acc-crown::before{left:50%;top:-11px;width:108px;height:30px;transform:translateX(-50%);border:3px solid currentColor;border-bottom:0;border-radius:58px 58px 0 0;box-shadow:0 0 16px currentColor}
.micro-accessory.acc-crown::after{left:50%;top:-4px;width:12px;height:12px;transform:translateX(-50%) rotate(45deg);background:currentColor;box-shadow:-31px 31px 0 -3px currentColor,31px -31px 0 -3px currentColor,0 0 12px currentColor}
/* Propulsores: módulos compactos en los costados inferiores */
.micro-accessory.acc-wings::before{left:-13px;bottom:33px;width:20px;height:48px;border:2px solid currentColor;border-radius:8px 3px 3px 8px;background:linear-gradient(90deg,#13283d,currentColor);box-shadow:0 0 15px currentColor}
.micro-accessory.acc-wings::after{right:-13px;bottom:33px;width:20px;height:48px;border:2px solid currentColor;border-radius:3px 8px 8px 3px;background:linear-gradient(270deg,#13283d,currentColor);box-shadow:0 0 15px currentColor}
/* Anillo NULL: campo energético detrás de la placa */
.micro-accessory.acc-halo::before{left:50%;top:50%;width:118%;height:118%;transform:translate(-50%,-50%);border:2px solid currentColor;border-radius:28px;opacity:.72;box-shadow:0 0 18px currentColor,inset 0 0 16px currentColor}
.micro-accessory.acc-halo::after{left:50%;top:50%;width:106%;height:106%;transform:translate(-50%,-50%);border:1px dashed currentColor;border-radius:25px;opacity:.5;animation:microModuleScan 4s linear infinite}
@keyframes microModuleScan{to{transform:translate(-50%,-50%) rotate(360deg)}}
.micro-shell.micro-color-cyan .micro-accessory{color:#48d8ff}.micro-shell.micro-color-green .micro-accessory{color:#56f39a}.micro-shell.micro-color-red .micro-accessory{color:#ff5f78}.micro-shell.micro-color-violet .micro-accessory{color:#a77cff}.micro-shell.micro-color-gold .micro-accessory{color:#ffd166}.micro-shell.micro-color-white .micro-accessory{color:#f6fbff}
.cosmetic-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:10px}
.cosmetic-card{padding:14px;border-radius:16px;background:#071526;border:1px solid #244b70;min-height:138px}
.cosmetic-card.selected{border-color:#56cfff;box-shadow:inset 0 0 25px rgba(72,216,255,.1)}
.cosmetic-card.locked{opacity:.48;filter:grayscale(.4)}
.cosmetic-icon{font-size:34px;margin-bottom:6px}.cosmetic-card h4{margin:0 0 4px}.cosmetic-card p{margin:0;color:var(--muted);font-size:12px;min-height:34px}
.cosmetic-preview{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px;border:1px solid #31577d;border-radius:16px;background:linear-gradient(180deg,#0b2138,#071526);margin-bottom:12px}
.cosmetic-preview strong{font-size:16px}.cosmetic-preview span{color:var(--muted);font-size:12px}
@media(max-width:800px){.cosmetic-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.cosmetic-grid{grid-template-columns:1fr}}
.autosave-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#56f39a;box-shadow:0 0 8px #56f39a;margin-right:6px}
@media(max-width:900px){.evolution-grid{grid-template-columns:1fr 1fr}}@media(max-width:600px){.evolution-grid{grid-template-columns:1fr}}




/* V17 · BATALLA ESPACIAL DEL OLIMPO */
.ship-avatar{position:relative;width:160px;height:120px;margin:4px auto 14px;animation:shipFloat 1.7s ease-in-out infinite;filter:drop-shadow(0 0 18px rgba(70,216,255,.55))}
.ship-body{position:absolute;left:44px;top:25px;width:72px;height:72px;background:linear-gradient(145deg,#e8f7ff,#4f86b9 48%,#162941);clip-path:polygon(50% 0,88% 55%,72% 100%,28% 100%,12% 55%);border-radius:30px}
.ship-core{position:absolute;left:67px;top:49px;width:26px;height:26px;border-radius:50%;background:radial-gradient(circle,#fff,#55dcff 42%,#734cff 72%);box-shadow:0 0 22px #46d8ff}
.ship-wing{position:absolute;top:62px;width:50px;height:26px;background:linear-gradient(90deg,#245a88,#6edfff);clip-path:polygon(0 55%,100% 0,78% 100%)}
.ship-wing.left{left:13px}.ship-wing.right{right:13px;transform:scaleX(-1)}
.ship-flame{position:absolute;left:64px;top:94px;width:32px;height:34px;background:linear-gradient(#fff,#55dcff,#7c4dff,transparent);clip-path:polygon(50% 100%,0 0,100% 0);animation:flamePulse .22s alternate infinite}
.god-boss{position:relative;width:170px;height:150px;margin:auto;filter:drop-shadow(0 0 22px rgba(255,209,102,.42));animation:godFloat 2.1s ease-in-out infinite}
.god-head{position:absolute;left:55px;top:14px;font-size:62px;transition:.35s}.god-crown{position:absolute;left:61px;top:-2px;font-size:38px;transition:.35s}.god-lightning{position:absolute;font-size:46px;transition:.35s}.god-lightning.l{left:15px;top:56px}.god-lightning.r{right:12px;top:56px}.god-orb{position:absolute;left:67px;top:99px;font-size:42px;transition:.35s}.god-boss.damage-1 .god-lightning.r{opacity:.25;transform:rotate(35deg) translateY(18px)}
.god-boss.damage-2 .god-lightning.l{opacity:.2;transform:rotate(-35deg) translateY(20px)}
.god-boss.damage-2 .god-crown{opacity:.35;transform:translateY(14px) rotate(20deg)}
.god-boss.damage-3 .god-orb{opacity:.18;transform:scale(.55)}
.god-boss.damage-3 .god-head{filter:grayscale(.7);opacity:.55}
.ship-mode .fighter:first-child{background:radial-gradient(circle at 50% 80%,rgba(70,216,255,.13),transparent 45%),#071526}
.ship-mode .fighter:nth-child(2){background:radial-gradient(circle at 50% 35%,rgba(255,209,102,.15),transparent 45%),#071526}
@keyframes shipFloat{50%{transform:translateY(-8px)}}
@keyframes flamePulse{to{transform:scaleY(1.18);opacity:.72}}
@keyframes godFloat{50%{transform:translateY(-6px) rotate(1deg)}}


.avatar-picker{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:8px}
.avatar-choice{border:1px solid #31577d;background:#091a2d;color:#fff;border-radius:12px;padding:9px;cursor:pointer;font-size:28px;text-align:center;transition:.18s}
.avatar-choice:hover{transform:translateY(-1px);border-color:#65ddff}.avatar-choice.selected{outline:2px solid #65ddff;background:#12365a}
.avatar-preview-wrap{display:flex;align-items:center;gap:12px;margin-top:10px;padding:10px;border:1px solid #244b70;border-radius:14px;background:#071526}
.avatar-preview{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:42px;background:#0d223b;border:2px solid #3d6b91;overflow:hidden;flex:0 0 auto}
.avatar-preview img,.team-avatar img,.battle-player-photo{width:100%;height:100%;object-fit:cover;display:block}
.team-profile{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:#071526;border:1px solid #244b70}
.team-avatar{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:30px;background:#10243d;border:2px solid #345f87;overflow:hidden;flex:0 0 auto}
.team-profile b{display:block}.team-profile span{font-size:11px;color:var(--muted)}
.avatar.photo-avatar{width:92px;height:92px;margin:0 auto;border-radius:50%;overflow:hidden;border:3px solid #4fdcff;box-shadow:0 0 20px rgba(79,220,255,.25);font-size:0}


/* ===== V22 · NÚCLEO VITAL ===== */
.screen.active{animation:screenIn .32s ease both}
@keyframes screenIn{from{opacity:0;transform:translateY(8px) scale(.995)}to{opacity:1;transform:none}}
.world{transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease,filter .2s ease}
.world:not(.locked):hover{transform:translateY(-4px) scale(1.008);box-shadow:0 14px 35px rgba(0,0,0,.25)}
.world h3{display:flex;align-items:center;gap:7px}
.world.done:after{content:"✓";position:absolute;right:12px;top:9px;font-size:26px;color:var(--green);opacity:.8}
.battle-grid,.question{position:relative;z-index:2}
#battleScreen{position:relative;overflow:hidden;border-radius:18px;padding:4px}
#battleScreen:before{content:"";position:absolute;inset:-30px;z-index:0;pointer-events:none;opacity:.32;filter:blur(2px);background:var(--world-bg,radial-gradient(circle at 50% 0%,#173969,transparent 55%));animation:ambientDrift 9s ease-in-out infinite alternate}
#battleScreen:after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.18;background-image:radial-gradient(circle at 20% 20%,rgba(255,255,255,.22) 0 1px,transparent 2px),radial-gradient(circle at 70% 35%,rgba(255,255,255,.16) 0 1px,transparent 2px),radial-gradient(circle at 40% 75%,rgba(255,255,255,.18) 0 1px,transparent 2px);background-size:110px 110px,150px 150px,190px 190px;animation:starsMove 14s linear infinite}
@keyframes ambientDrift{to{transform:scale(1.06) translateY(12px)}}
@keyframes starsMove{to{background-position:110px 220px,150px 300px,190px 380px}}
body[data-world="0"]{--world-bg:radial-gradient(circle at 20% 20%,#26c6ff55,transparent 28%),linear-gradient(135deg,#07162b,#102b4a)}
body[data-world="1"]{--world-bg:radial-gradient(circle at 60% 20%,#6eff8155,transparent 28%),linear-gradient(135deg,#071d19,#132c25)}
body[data-world="2"]{--world-bg:radial-gradient(circle at 70% 20%,#ff7b4355,transparent 28%),linear-gradient(135deg,#2a0b09,#3a1710)}
body[data-world="3"]{--world-bg:radial-gradient(circle at 30% 10%,#ffe66d66,transparent 30%),linear-gradient(135deg,#211b05,#3a310b)}
body[data-world="4"]{--world-bg:radial-gradient(circle at 50% 30%,#bd7cff66,transparent 28%),linear-gradient(135deg,#150b2b,#281447)}
body[data-world="5"]{--world-bg:radial-gradient(circle at 50% 15%,#59b7ff55,transparent 28%),linear-gradient(135deg,#07172a,#172740)}
body[data-world="6"]{--world-bg:radial-gradient(circle at 30% 25%,#41ffb866,transparent 30%),linear-gradient(135deg,#061e22,#0c3032)}
body[data-world="7"]{--world-bg:radial-gradient(circle at 65% 20%,#ff54bb55,transparent 28%),linear-gradient(135deg,#230a25,#36113b)}
body[data-world="8"]{--world-bg:radial-gradient(circle at 40% 20%,#78ddff55,transparent 28%),linear-gradient(135deg,#071728,#11283d)}
body[data-world="9"]{--world-bg:radial-gradient(circle at 50% 20%,#ff325c55,transparent 28%),linear-gradient(135deg,#24060d,#3d0d17)}
body[data-world="10"]{--world-bg:radial-gradient(circle at 50% 10%,#ffe66d88,transparent 25%),radial-gradient(circle at 20% 50%,#8a5cff44,transparent 30%),linear-gradient(135deg,#0b1024,#211542 60%,#30240a)}
.fighter{position:relative;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease}
#battleScreen.boss-mode .fighter:last-child{border-color:#815d25;box-shadow:inset 0 0 30px rgba(255,209,102,.09),0 0 28px rgba(255,159,67,.08)}
#battleScreen.ship-mode .fighter:first-child{border-color:#327ca8;box-shadow:0 0 30px rgba(70,216,255,.12)}
.enemy-avatar.hit-flash{animation:hitFlash .34s ease}
@keyframes hitFlash{0%,100%{filter:drop-shadow(0 0 18px #ff5f7833)}45%{transform:scale(1.12);filter:brightness(2) drop-shadow(0 0 30px #fff)}}
.fighter.player-hit{animation:playerHit .34s ease}
@keyframes playerHit{25%{transform:translateX(-8px)}50%{filter:brightness(1.7)}75%{transform:translateX(7px)}}
.battle-fx-layer{position:absolute;inset:0;pointer-events:none;z-index:8;overflow:hidden}
.fx-burst{position:absolute;left:70%;top:34%;transform:translate(-50%,-50%);font-size:42px;animation:fxBurst .62s ease-out forwards;filter:drop-shadow(0 0 12px currentColor)}
.fx-burst.enemy{left:27%;top:34%}.fx-burst.special{font-size:60px}.fx-burst.critical{font-size:72px;font-weight:900}
.fx-laser{position:absolute;left:28%;top:35%;width:42%;height:5px;border-radius:99px;background:linear-gradient(90deg,transparent,#dffaff,#46d8ff,#fff);box-shadow:0 0 18px #46d8ff;transform-origin:left center;animation:laserShot .38s ease-out forwards}
@keyframes fxBurst{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}45%{opacity:1;transform:translate(-50%,-50%) scale(1.25)}100%{opacity:0;transform:translate(-50%,-70%) scale(.8)}}
@keyframes laserShot{0%{opacity:0;transform:scaleX(.05)}25%{opacity:1}100%{opacity:0;transform:scaleX(1)}}
.levelup-flash{animation:levelUpFlash .8s ease}
@keyframes levelUpFlash{45%{box-shadow:0 0 45px rgba(255,209,102,.45);filter:brightness(1.25)}}
.world-intro{min-height:620px;display:grid;place-items:center;text-align:center;position:relative;overflow:hidden}
.world-intro-card{width:min(760px,94%);padding:36px 26px;position:relative;background:linear-gradient(180deg,rgba(8,24,42,.92),rgba(5,13,25,.96));border:1px solid #34658c;border-radius:26px;box-shadow:0 25px 70px rgba(0,0,0,.4)}
.world-intro-icon{font-size:92px;line-height:1;filter:drop-shadow(0 0 25px rgba(70,216,255,.3));animation:introFloat 2.5s ease-in-out infinite}
.world-intro-card h2{font-size:clamp(34px,6vw,64px);margin:10px 0 8px}
.world-intro-meta{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:15px 0}
.world-intro-enemy{margin-top:15px;font-size:16px;color:#c8ddf0}
@keyframes introFloat{50%{transform:translateY(-8px) scale(1.04)}}
.combo-hot{animation:comboHot .55s ease;color:var(--gold)!important;text-shadow:0 0 15px rgba(255,209,102,.55)}
@keyframes comboHot{50%{transform:scale(1.18)}}
.final-learning-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.final-learning-box{background:#071526;border:1px solid #244b70;border-radius:14px;padding:12px}
.final-learning-box b{display:block;margin-bottom:6px}
.final-avatar-summary{display:flex;gap:12px;align-items:center;margin-bottom:12px}.final-avatar-summary .team-avatar{width:64px;height:64px;font-size:38px;flex:0 0 64px}
@media(max-width:650px){.world-intro{min-height:520px}.world-intro-card{padding:28px 16px}.world-intro-icon{font-size:72px}.final-learning-grid{grid-template-columns:1fr}.fx-burst{left:72%}.fx-burst.enemy{left:25%}}


.answers.confused-options .answer{animation:optionGlitch .55s ease both}
.answers.confused-options .answer:nth-child(2){animation-delay:.06s}
.answers.confused-options .answer:nth-child(3){animation-delay:.12s}
@keyframes optionGlitch{0%{transform:translateX(0)}25%{transform:translateX(5px)}50%{transform:translateX(-4px)}75%{transform:translateX(2px)}100%{transform:translateX(0)}}



/* ===== V21 · CAPA 3D / 2.5D ===== */
#battleScreen{perspective:1200px;transform-style:preserve-3d;isolation:isolate}
#battleScreen .battle-grid{perspective:1100px;transform-style:preserve-3d;transition:transform .22s ease;transform:rotateX(var(--arena-tilt-x,0deg)) rotateY(var(--arena-tilt-y,0deg))}
#battleScreen .fighter{transform-style:preserve-3d;backface-visibility:hidden;will-change:transform}
#battleScreen .fighter:first-child{transform:rotateY(7deg) translateZ(26px);box-shadow:-14px 18px 30px rgba(0,0,0,.24),inset 0 0 24px rgba(70,216,255,.05)}
#battleScreen .fighter:last-child{transform:rotateY(-7deg) translateZ(38px);box-shadow:14px 18px 30px rgba(0,0,0,.28),inset 0 0 24px rgba(255,95,120,.05)}
#battleScreen.boss-mode .fighter:last-child{transform:rotateY(-8deg) translateZ(58px) scale(1.025)}
#battleScreen.ship-mode .fighter:first-child{transform:rotateY(8deg) translateZ(48px) scale(1.015)}
#battleScreen .fighter h3,#battleScreen .bar,#battleScreen .tag,#battleScreen .avatar,#battleScreen .enemy-avatar{transform:translateZ(18px)}
#battleScreen .avatar,#battleScreen .enemy-avatar{position:relative;z-index:3}
#battleScreen .avatar:after,#battleScreen .enemy-avatar:after{content:"";position:absolute;left:50%;bottom:-12px;width:68%;height:18px;transform:translateX(-50%) rotateX(72deg) translateZ(-24px);border-radius:50%;background:rgba(0,0,0,.34);filter:blur(5px);z-index:-1;pointer-events:none}
.arena3d-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1}
.arena3d-floor{position:absolute;left:-18%;right:-18%;bottom:-34%;height:58%;transform-origin:center top;transform:rotateX(68deg) translateZ(-80px);background:repeating-linear-gradient(90deg,rgba(103,204,255,.14) 0 1px,transparent 1px 58px),repeating-linear-gradient(0deg,rgba(103,204,255,.10) 0 1px,transparent 1px 48px);mask-image:linear-gradient(to bottom,rgba(0,0,0,.95),transparent 92%);opacity:.48;animation:gridTravel 4.6s linear infinite}
.arena3d-horizon{position:absolute;left:8%;right:8%;top:42%;height:2px;background:linear-gradient(90deg,transparent,rgba(132,219,255,.5),transparent);box-shadow:0 0 18px rgba(70,216,255,.25);transform:translateZ(-60px)}
.arena3d-star{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;box-shadow:0 0 8px rgba(255,255,255,.9);opacity:.66;animation:depthStar var(--dur,4s) linear infinite}
@keyframes gridTravel{to{background-position:58px 0,0 48px}}
@keyframes depthStar{0%{transform:translate3d(0,0,-240px) scale(.35);opacity:.15}100%{transform:translate3d(var(--dx,0px),var(--dy,80px),160px) scale(1.8);opacity:.85}}
.ship-avatar{transform-style:preserve-3d;perspective:700px}
.ship-body{transform:translateZ(24px) rotateX(-4deg);box-shadow:0 20px 26px rgba(0,0,0,.32),inset 0 8px 12px rgba(255,255,255,.15)}
.ship-core{transform:translateZ(44px);box-shadow:0 0 24px #46d8ff,0 0 46px rgba(124,77,255,.45)}
.ship-wing.left{transform:translateZ(4px) rotateY(18deg)}
.ship-wing.right{transform:translateZ(4px) rotateY(-18deg) scaleX(-1)}
.ship-flame{transform:translateZ(-18px);filter:drop-shadow(0 0 10px #55dcff)}
.god-boss{transform-style:preserve-3d;perspective:700px}
.god-crown{transform:translateZ(46px)}
.god-head{transform:translateZ(30px)}
.god-lightning.l{transform:translateZ(12px) rotateY(16deg)}
.god-lightning.r{transform:translateZ(12px) rotateY(-16deg)}
.god-orb{transform:translateZ(56px)}
.fx-projectile3d{position:absolute;left:28%;top:34%;width:24px;height:24px;border-radius:50%;z-index:12;pointer-events:none;background:radial-gradient(circle,#fff 0 18%,#5be5ff 30%,#6557ff 58%,transparent 72%);box-shadow:0 0 14px #5be5ff,0 0 34px rgba(101,87,255,.7);animation:projectile3D .56s cubic-bezier(.15,.65,.18,1) forwards;transform-style:preserve-3d}
.fx-projectile3d.enemy{left:72%;background:radial-gradient(circle,#fff 0 18%,#ffd166 32%,#ff5f78 62%,transparent 74%);box-shadow:0 0 14px #ffd166,0 0 34px rgba(255,95,120,.65);animation-name:projectileEnemy3D}
.fx-projectile3d.special{width:40px;height:40px;filter:brightness(1.2)}
@keyframes projectile3D{0%{transform:translate3d(0,18px,-120px) scale(.25);opacity:.35}35%{opacity:1}100%{transform:translate3d(450px,-20px,180px) scale(2.4);opacity:0}}
@keyframes projectileEnemy3D{0%{transform:translate3d(0,-12px,-90px) scale(.35);opacity:.35}35%{opacity:1}100%{transform:translate3d(-450px,24px,170px) scale(2.1);opacity:0}}
#battleScreen.camera-punch{animation:cameraPunch .38s ease}
#battleScreen.camera-critical{animation:cameraCritical .52s ease}
@keyframes cameraPunch{35%{transform:translateZ(10px) scale(1.012)}70%{transform:translateZ(-4px) scale(.998)}}
@keyframes cameraCritical{30%{transform:scale(1.025) rotateZ(-.3deg)}55%{filter:brightness(1.25)}80%{transform:scale(.997) rotateZ(.2deg)}}
.ship-mode .arena3d-floor{background:repeating-linear-gradient(90deg,rgba(122,133,255,.18) 0 1px,transparent 1px 64px),repeating-linear-gradient(0deg,rgba(255,209,102,.12) 0 1px,transparent 1px 52px);opacity:.6}
.ship-mode .arena3d-horizon{background:linear-gradient(90deg,transparent,rgba(255,209,102,.75),transparent);box-shadow:0 0 24px rgba(255,209,102,.35)}
@media(max-width:700px){#battleScreen .fighter:first-child,#battleScreen .fighter:last-child,#battleScreen.boss-mode .fighter:last-child,#battleScreen.ship-mode .fighter:first-child{transform:none}.arena3d-floor{opacity:.28}.fx-projectile3d{animation-duration:.42s}@keyframes projectile3D{100%{transform:translate3d(220px,-10px,120px) scale(1.7);opacity:0}}@keyframes projectileEnemy3D{100%{transform:translate3d(-220px,12px,120px) scale(1.7);opacity:0}}}
@media(prefers-reduced-motion:reduce){.arena3d-floor,.arena3d-star,.fx-projectile3d{animation:none!important}.battle-grid{transform:none!important}}



/* ===== V24 · PROFESSIONAL UI ===== */
:root{--pro-soft:rgba(70,216,255,.08);--pro-border:rgba(127,231,255,.22);--pro-deep:#06111f}
.card{border-color:rgba(90,151,199,.28)}
.top{gap:12px}.brand h1{letter-spacing:-.025em}.brand p{max-width:760px}
.stats{backdrop-filter:blur(10px)}
.stat{position:relative;overflow:hidden}.stat:after{content:"";position:absolute;left:12px;right:12px;bottom:6px;height:2px;border-radius:9px;background:linear-gradient(90deg,var(--cyan),transparent);opacity:.35}
.pro-campaign{padding:12px;border:1px solid var(--pro-border);background:linear-gradient(145deg,rgba(7,21,38,.96),rgba(9,28,49,.78));border-radius:16px}
.pro-campaign-head{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:12px}.pro-campaign-head b{font-size:13px}.pro-progress{height:9px;margin-top:9px;border-radius:999px;overflow:hidden;background:#14263a;border:1px solid #23415f}.pro-progress>div{height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--violet));transition:width .45s ease;box-shadow:0 0 14px rgba(70,216,255,.38)}
.pro-save{display:flex;align-items:center;gap:7px;margin-top:8px;color:var(--muted);font-size:11px}.pro-save-dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px rgba(86,243,154,.7)}
.section-title{padding-bottom:12px;border-bottom:1px solid rgba(99,151,194,.16);margin-bottom:15px}.section-title h2{letter-spacing:-.02em}
.world{background:linear-gradient(145deg,rgba(8,24,42,.94),rgba(8,19,34,.82));border-color:rgba(74,132,179,.28)}
.world.done{background:linear-gradient(145deg,rgba(12,47,46,.66),rgba(8,25,36,.9))}
.shop{align-items:stretch}.shopitem{display:flex;flex-direction:column;min-height:250px;padding:18px;border-radius:18px;background:linear-gradient(155deg,rgba(9,28,49,.96),rgba(5,16,30,.96));border:1px solid rgba(84,144,191,.28);transition:.2s ease}.shopitem:hover{transform:translateY(-3px);border-color:rgba(98,214,255,.52)}.shopitem h3{margin:0 0 6px}.shopitem .btn{margin-top:auto}.shop-level-line{display:flex;justify-content:space-between;gap:10px;align-items:center;margin:12px 0 6px;font-size:12px}.shop-level-pips{display:flex;gap:4px}.shop-level-pips i{width:18px;height:6px;border-radius:9px;background:#1a334c}.shop-level-pips i.on{background:linear-gradient(90deg,var(--cyan),var(--violet))}.shop-effect{font-size:12px;line-height:1.45;color:#c8def0;background:rgba(70,216,255,.055);border:1px solid rgba(70,216,255,.13);border-radius:12px;padding:9px;margin:7px 0 12px}.shop-price{font-weight:900;color:var(--gold);font-size:15px}
.feedback{min-height:58px}
.boss-professional{border-color:rgba(255,209,102,.35)!important;background:radial-gradient(circle at 50% 28%,rgba(255,209,102,.08),rgba(7,21,38,.98) 68%)!important}.boss-rank{display:inline-flex;align-items:center;gap:5px;padding:4px 8px;border-radius:999px;background:rgba(255,209,102,.1);border:1px solid rgba(255,209,102,.28);font-size:11px;color:#ffe5a0;margin-top:5px}.boss-professional .enemy-avatar{filter:drop-shadow(0 0 16px rgba(255,209,102,.22))}.ship-mode .boss-professional{background:radial-gradient(circle at 50% 25%,rgba(167,124,255,.13),rgba(7,21,38,.98) 65%)!important}
.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.setting-card{padding:17px;border-radius:17px;border:1px solid rgba(82,139,184,.28);background:linear-gradient(145deg,rgba(8,25,44,.94),rgba(6,17,31,.9))}.setting-card h3{margin:0 0 5px}.setting-card p{color:var(--muted);font-size:12px;line-height:1.45}.setting-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}.setting-choice.active{outline:2px solid var(--cyan);background:#123957}.setting-card select{width:100%;margin-top:10px;background:#08192c;color:var(--txt);border:1px solid #31577d;border-radius:11px;padding:11px;font-size:15px}
body.text-large{font-size:18px}body.text-large .btn,body.text-large .answer{font-size:1em}body.graphics-low #battleScreen:before,body.graphics-low #battleScreen:after,body.graphics-low .arena3d-star{display:none}body.graphics-low .arena3d-floor{opacity:.14}body.reduce-motion *,body.reduce-motion *:before,body.reduce-motion *:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
.pro-final-header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-bottom:13px;border-bottom:1px solid rgba(100,159,201,.2)}.pro-grade{padding:8px 12px;border-radius:999px;font-weight:900;background:rgba(86,243,154,.1);border:1px solid rgba(86,243,154,.3);color:#a9ffd0}.pro-final-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-top:12px}.pro-final-metric{padding:12px;border-radius:13px;background:#07182b;border:1px solid rgba(66,119,161,.26)}.pro-final-metric span{display:block;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.06em}.pro-final-metric b{display:block;margin-top:5px;font-size:19px}.final-learning-grid{margin-top:12px}.final-learning-box{min-height:110px}
.pro-report-note{margin-top:12px;padding:10px 12px;border-radius:12px;background:rgba(167,124,255,.07);border:1px solid rgba(167,124,255,.18);color:#d9ceff;font-size:12px;line-height:1.5}
@media(max-width:760px){.settings-grid,.pro-final-metrics{grid-template-columns:1fr 1fr}.shopitem{min-height:0}}
@media(max-width:460px){.settings-grid,.pro-final-metrics{grid-template-columns:1fr}.pro-campaign-head{align-items:flex-start;flex-direction:column}}


.site-footer{max-width:1400px;margin:22px auto 10px;padding:24px 18px 8px;text-align:center;border-top:1px solid rgba(120,180,255,.18);color:var(--muted);font-size:13px;line-height:1.55}.site-footer__title{color:var(--txt);font-weight:900;font-size:14px;letter-spacing:.5px}.site-footer__author{margin-top:7px}.site-footer__author strong{color:#fff}.site-footer__role{margin-top:2px}.site-footer__copy{margin-top:12px;font-size:11px;opacity:.72}@media(max-width:600px){.site-footer{margin-top:14px;padding-top:19px;font-size:12px}.site-footer__role{max-width:330px;margin:3px auto 0}}

/* ===== PROTOCOLO PRIME · MISIÓN ARCADE INTEGRADA ===== */
.xenon-shell{background:linear-gradient(180deg,#0d1928,#08111c);border:1px solid #1f405d;border-radius:18px;padding:16px;box-shadow:0 16px 44px #0007}
.xenon-grid{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:16px}
.xenon-canvas{width:100%;display:block;border-radius:16px;border:1px solid #294e70;background:#02070f;min-height:620px}
.xenon-panel{background:#08111ddd;border:1px solid #21425f;border-radius:16px;padding:16px}
.xenon-code{background:#06101a;border:1px solid #28506d;border-radius:12px;padding:14px;min-height:78px;white-space:pre-wrap}
.xenon-options{display:grid;gap:9px;margin-top:12px}
.xenon-option{font:inherit;font-weight:700;background:#12283c;color:#fff;border:1px solid #2b5474;border-radius:10px;padding:10px;text-align:left;cursor:pointer}
.xenon-option:hover{border-color:#48e8ff}
.xenon-life-bg,.xenon-boss-bg{height:14px;background:#10283a;border-radius:999px;overflow:hidden}
.xenon-boss-bg{height:16px;background:#231016}
.xenon-life-fill{height:100%;width:100%;background:linear-gradient(90deg,#48e8ff,#63f5a4);transition:.25s}
.xenon-boss-fill{height:100%;width:100%;background:linear-gradient(90deg,#ff627a,#ffb347);transition:.25s}
.xenon-progress{height:12px;background:#10283a;border-radius:999px;overflow:hidden;margin:14px 0}.xenon-progress>div{height:100%;width:0;background:linear-gradient(90deg,#48e8ff,#63f5a4);transition:.3s}
.xenon-feedback{min-height:60px;font-weight:700}
.xenon-kbd{display:inline-block;padding:3px 7px;background:#13273b;border:1px solid #31536f;border-radius:7px}
.xenon-special-card{margin-top:14px;border:1px solid #4b6788;border-radius:16px;padding:16px;background:radial-gradient(circle at top right,rgba(167,124,255,.12),rgba(7,21,38,.98) 55%)}
.xenon-special-card.done{border-color:#2e8f62}.xenon-special-card.locked{opacity:.65}
.xenon-overlay{position:fixed;inset:0;background:rgba(0,0,0,.78);display:flex;align-items:center;justify-content:center;padding:20px;z-index:9999}
.xenon-overlay-card{width:min(760px,94vw);background:linear-gradient(180deg,#0d1a29,#07101a);border:1px solid #355b78;border-radius:22px;padding:24px;text-align:center;box-shadow:0 0 60px rgba(70,231,255,.18)}
.xenon-overlay-card h2{font-size:clamp(28px,5vw,48px);margin:.2em 0;color:#65f5a4}
.xenon-planet{width:180px;height:180px;border-radius:50%;margin:14px auto 18px;background:radial-gradient(circle at 35% 30%,#d9ffff 0,#55d9ff 18%,#2571ad 45%,#15315f 68%,#071223 100%);box-shadow:0 0 40px #46e7ff88,inset -28px -24px 35px rgba(0,0,0,.35);position:relative;overflow:hidden;animation:xenonPlanetPulse 2.4s ease-in-out infinite}
.xenon-planet:before{content:"";position:absolute;inset:18px 36px auto 24px;height:22px;border-radius:50%;background:#64f5a5aa;transform:rotate(-15deg);box-shadow:80px 70px 0 #64f5a566,30px 105px 0 #ffd16677}
.xenon-scan{height:12px;background:#10283a;border-radius:999px;overflow:hidden;margin:14px 0}.xenon-scan>div{height:100%;width:0;background:linear-gradient(90deg,#46e7ff,#65f5a4);animation:xenonScanFill 1.8s forwards}
@keyframes xenonScanFill{to{width:100%}}@keyframes xenonPlanetPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
@media(max-width:980px){.xenon-grid{grid-template-columns:1fr}.xenon-canvas{min-height:auto}}


/* =========================================================
   V38 · Campaña 1 Profesional
   Mejora visual de juego.php sin tocar APIs, guardado,
   ranking, Campaña 2 ni base de datos.
========================================================= */

.v38-version{
  display:inline-flex;
  align-items:center;
  margin-left:8px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(70,216,255,.10);
  border:1px solid rgba(70,216,255,.24);
  color:#bff4ff;
  font-size:clamp(11px,.34em,16px);
  font-weight:950;
  vertical-align:middle;
  letter-spacing:.2px;
}

.app{
  max-width:1380px;
  padding:14px 16px 20px;
}

.online-session-bar{
  max-width:1380px;
  border-radius:18px;
  background:
    linear-gradient(180deg,rgba(15,34,60,.96),rgba(6,16,30,.96));
  border-color:rgba(120,180,255,.18);
  box-shadow:0 14px 36px rgba(0,0,0,.24);
}

.top{
  grid-template-columns:minmax(0,1.1fr) minmax(520px,.9fr);
  gap:14px;
}

.brand{
  min-height:128px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border-radius:26px;
}

.brand h1{
  font-size:clamp(28px,3.6vw,46px);
  line-height:1.08;
  letter-spacing:-.045em;
}

.brand p{
  color:#b6cee8;
  font-size:15px;
  line-height:1.45;
  margin-top:10px;
}

.stats{
  border-radius:26px;
  background:
    linear-gradient(180deg,rgba(15,34,60,.88),rgba(6,16,30,.92));
}

.stat{
  border-radius:18px;
  background:
    radial-gradient(circle at 50% 0%,rgba(70,216,255,.12),transparent 50%),
    rgba(7,21,38,.86);
  border-color:rgba(120,180,255,.16);
}

.stat b{
  font-size:22px;
}

.grid{
  grid-template-columns:300px minmax(0,1fr);
  gap:14px;
}

.side{
  border-radius:26px;
  padding:13px;
  position:sticky;
  top:12px;
  align-self:start;
  max-height:calc(100vh - 24px);
  overflow:auto;
}

.micro-shell{
  transform:scale(.92);
  transform-origin:top center;
  margin-bottom:-14px;
}

.nav{
  gap:7px;
}

.nav .btn{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  text-align:left;
  min-height:42px;
  padding:10px 11px;
  border-radius:14px;
  font-size:13px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

.v38-nav-home{
  grid-column:1 / -1;
  justify-content:center!important;
  background:linear-gradient(135deg,rgba(70,216,255,.16),rgba(167,124,255,.12))!important;
  border-color:rgba(70,216,255,.28)!important;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  text-decoration:none;
}

.main{
  border-radius:26px;
  padding:18px;
  min-height:auto;
}

.hero{
  min-height:560px;
  grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);
  gap:18px;
}

.v38-tag{
  margin-top:0;
  background:rgba(86,243,154,.10);
  border:1px solid rgba(86,243,154,.24);
  color:#c9ffdf;
  font-weight:950;
}

.hero h2{
  font-size:clamp(38px,5vw,70px);
  letter-spacing:-.055em;
}

.hero p{
  max-width:780px;
  color:#b9cde4;
  font-size:16px;
}

.v38-home-strip{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin:18px 0 2px;
}

.v38-home-strip div{
  min-height:112px;
  padding:14px;
  border-radius:20px;
  background:
    radial-gradient(circle at 100% 0%,rgba(70,216,255,.14),transparent 42%),
    rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.09);
}

.v38-home-strip b{
  width:34px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:13px;
  background:linear-gradient(135deg,var(--cyan),var(--violet));
  color:#06111f;
  font-weight:950;
  margin-bottom:10px;
}

.v38-home-strip span{
  display:block;
  color:#fff;
  font-weight:950;
  margin-bottom:5px;
}

.v38-home-strip small{
  display:block;
  color:#9fb5cf;
  line-height:1.35;
  font-weight:750;
}

.cta{
  gap:10px;
  margin-top:18px;
}

.cta .btn{
  min-height:45px;
}

.author-credit{
  margin-top:18px;
  padding:13px 15px;
  border-radius:18px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.08);
  color:#c5d8ee;
  line-height:1.4;
}

.v38-hero-art{
  min-height:420px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  border-radius:26px;
  background:
    radial-gradient(circle at 50% 20%,rgba(70,216,255,.20),transparent 40%),
    radial-gradient(circle at 70% 80%,rgba(167,124,255,.14),transparent 34%),
    linear-gradient(180deg,rgba(12,31,55,.96),rgba(5,14,28,.96));
}

.v38-hero-art .big{
  font-size:132px;
}

.v38-hero-art h3{
  margin:0 0 4px;
  font-size:24px;
  letter-spacing:-.03em;
}

.v38-hero-art p{
  margin:0;
  color:#a9c3df;
  text-align:center;
}

.v38-hero-badge{
  position:absolute;
  top:18px;
  left:18px;
  padding:7px 11px;
  border-radius:999px;
  background:rgba(255,209,102,.13);
  border:1px solid rgba(255,209,102,.26);
  color:#ffe4a3;
  font-size:12px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.35px;
}

.v38-art-status{
  margin-top:18px;
  display:grid;
  gap:5px;
  text-align:center;
  padding:12px 14px;
  border-radius:18px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.09);
}

.v38-art-status span{
  color:#c8f5ff;
  font-weight:950;
}

.v38-art-status strong{
  color:#fff;
}

.section-title{
  border-bottom-color:rgba(120,180,255,.18);
}

.worlds{
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:12px;
}

.world{
  min-height:142px;
  padding:17px;
  border-radius:22px;
  transition:.18s ease;
}

.world h3{
  font-size:18px;
  letter-spacing:-.02em;
}

.world .tag,
.tag{
  border:1px solid rgba(70,216,255,.18);
}

.screen.active{
  animation:v38Fade .18s ease both;
}

@keyframes v38Fade{
  from{opacity:.78;transform:translateY(3px)}
  to{opacity:1;transform:translateY(0)}
}

.site-footer{
  max-width:1380px;
  margin:18px auto 0;
  padding:18px;
  text-align:center;
  color:#a9bfd8;
  border-top:1px solid rgba(120,180,255,.16);
  line-height:1.5;
}

.site-footer__title{
  color:#fff;
  font-weight:950;
  font-size:16px;
}

.site-footer__author strong{
  color:#fff;
}

@media(max-width:1100px){
  .top,
  .grid,
  .hero{
    grid-template-columns:1fr;
  }

  .side{
    position:relative;
    top:auto;
    max-height:none;
  }

  .micro-shell{
    transform:none;
    margin-bottom:0;
  }

  .nav{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media(max-width:760px){
  .stats{
    grid-template-columns:repeat(2,1fr);
  }

  .v38-home-strip{
    grid-template-columns:1fr;
  }

  .nav{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .v38-hero-art{
    min-height:300px;
  }
}


/* ===== Bloque CSS original 2 ===== */
.online-session-bar{max-width:1440px;margin:12px auto 0;padding:9px 16px;display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:rgba(6,20,36,.94);border:1px solid #284c73;border-radius:14px;color:#dfefff;position:relative;z-index:20}
.online-session-bar .online-user{display:flex;gap:9px;align-items:center;flex-wrap:wrap}.online-session-bar .online-badge{font-size:12px;padding:4px 8px;border-radius:999px;border:1px solid #265f7b;background:#0b2940;color:#8ce8ff}.online-session-bar a{color:#fff;text-decoration:none;border:1px solid #365b7d;padding:7px 10px;border-radius:10px}.online-session-bar a:hover{border-color:#46d8ff}.online-sync{font-size:12px;color:#9fb5cf}.online-sync.ok{color:#56f39a}.online-sync.err{color:#ff9f43}
@media(max-width:700px){.online-session-bar{margin:8px 8px 0}.online-session-bar .online-user{font-size:13px}}
.online-ranking-tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:13px}.rank-choice{padding:8px 11px;border-radius:10px;border:1px solid #31577d;background:#071526;color:#fff;cursor:pointer}.rank-choice.active{border-color:var(--cyan);background:#123957}.online-rank-summary{display:flex;gap:9px;flex-wrap:wrap;margin:0 0 12px}.online-rank-pill{padding:7px 10px;border-radius:999px;background:#0a2037;border:1px solid #274e72;color:#cce7f9;font-size:12px}.rank-me{background:rgba(70,216,255,.07)}.presence-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}.presence-online{background:#56f39a;box-shadow:0 0 8px #56f39a}.presence-recent{background:#ffd166}.presence-offline{background:#6e8297}.rank-medal{font-size:18px}


/* =========================================================
   V44 · Restauración estable
   Base: V39 confirmada como correcta.
   No incluye cambios agresivos de V40/V41/V42/V43.
========================================================= */

body{
  background:
    radial-gradient(circle at 18% 0%,rgba(70,216,255,.12),transparent 28%),
    radial-gradient(circle at 82% 6%,rgba(167,124,255,.14),transparent 26%),
    linear-gradient(180deg,var(--bg2),var(--bg)) !important;
}

/* =========================================================
   V44.1 · Ajuste superior de batalla
   Corrige lo marcado: título del mundo y botón Retirarse
   quedaban demasiado pegados al borde superior.
   No toca preguntas, ataques, guardado, APIs ni Campaña 2.
========================================================= */

/* El panel de batalla necesita aire arriba para que nada se corte */
#battleScreen{
  padding:22px 28px 24px !important;
  overflow:hidden !important;
  border-radius:24px !important;
}

/* Encabezado de la batalla alineado y con espacio */
#battleScreen .battle-head,
#battleScreen .v44-1-battle-head{
  position:relative !important;
  z-index:4 !important;
  display:flex !important;
  justify-content:space-between !important;
  align-items:flex-start !important;
  gap:18px !important;
  margin:0 0 18px 0 !important;
  padding:12px 0 14px 0 !important;
  min-height:58px !important;
  border-bottom:1px solid rgba(120,180,255,.16);
}

/* Caja izquierda: Ciudad LED + subtítulo */
.v44-1-battle-titlebox,
#battleScreen .battle-head > div:first-child{
  display:flex !important;
  flex-direction:column !important;
  gap:5px !important;
  min-width:0 !important;
  max-width:calc(100% - 170px) !important;
}

/* Título del mundo */
#battleWorld{
  display:block !important;
  color:#ffffff !important;
  font-size:20px !important;
  line-height:1.15 !important;
  font-weight:950 !important;
  letter-spacing:-.01em;
  white-space:normal !important;
}

/* Subtítulo del mundo */
#battlePhase,
.v44-1-battle-phase{
  display:block !important;
  color:#9fb5cf !important;
  font-size:13px !important;
  line-height:1.35 !important;
  margin:0 !important;
  white-space:normal !important;
}

/* Botón Retirarse separado del borde */
#battleScreen .v44-1-retreat,
#battleScreen .battle-head .btn{
  position:relative !important;
  top:0 !important;
  right:0 !important;
  margin:0 !important;
  min-height:42px !important;
  padding:10px 16px !important;
  border-radius:15px !important;
  white-space:nowrap !important;
  font-size:14px !important;
  font-weight:950 !important;
  align-self:flex-start !important;
  z-index:5 !important;
}

/* Los personajes arrancan más abajo, no encima del encabezado */
#battleScreen .battle-grid{
  margin-top:4px !important;
}

/* Evita que las tarjetas 3D se suban sobre el encabezado */
#battleScreen .fighter:first-child,
#battleScreen .fighter:last-child{
  margin-top:0 !important;
}

/* En pantallas chicas, el botón baja debajo del título */
@media(max-width:760px){
  #battleScreen{
    padding:18px 16px 20px !important;
  }

  #battleScreen .battle-head,
  #battleScreen .v44-1-battle-head{
    flex-direction:column !important;
    align-items:stretch !important;
  }

  .v44-1-battle-titlebox,
  #battleScreen .battle-head > div:first-child{
    max-width:100% !important;
  }

  #battleScreen .v44-1-retreat,
  #battleScreen .battle-head .btn{
    width:100% !important;
  }
}

/* =========================================================
   V44.2 · Inicio ajustado
   Quita la etiqueta chica "Campaña 1" superpuesta
   y ordena el espacio superior del inicio.
========================================================= */

/* Ocultar la etiqueta chica superpuesta del hero */
.v38-hero-badge,
.hero-badge{
  display:none !important;
}

/* Dar aire al inicio para que la etiqueta principal no choque con el título */
#homeScreen .tag,
#homeScreen .v38-tag{
  margin-bottom:14px !important;
}

/* Separar mejor el título grande */
#homeScreen .glow-title{
  margin-top:6px !important;
  line-height:1.04 !important;
}

/* Evitar cortes visuales en la tarjeta inicial */
#homeScreen .card,
#homeScreen .hero-art,
#homeScreen .v38-hero-art{
  overflow:hidden !important;
}

/* =========================================================
   V44.5 · Inicio limpio con footer
   - Deja el footer inferior del proyecto.
   - Quita solo el recuadro interno de autor en la pantalla inicial.
========================================================= */

.author-credit{
  display:none !important;
}

.site-footer{
  display:block !important;
}

/* =========================================================
   V44.6 · Narración inicial Campaña 1
   Historia de apertura antes del registro de expedición.
========================================================= */

.iq-c1-story-modal{
  z-index:80 !important;
}

.iq-c1-story-box{
  position:relative;
  overflow:hidden;
  width:min(860px,100%);
  padding:0 !important;
  border-radius:30px !important;
  background:
    radial-gradient(circle at 18% 0%,rgba(70,216,255,.22),transparent 34%),
    radial-gradient(circle at 90% 15%,rgba(167,124,255,.20),transparent 34%),
    linear-gradient(180deg,rgba(12,31,55,.98),rgba(5,14,28,.98)) !important;
  border:1px solid rgba(120,180,255,.24) !important;
  box-shadow:
    0 28px 80px rgba(0,0,0,.48),
    0 0 40px rgba(70,216,255,.10) !important;
}

.iq-c1-story-bg{
  position:absolute;
  inset:0;
  opacity:.34;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px),
    radial-gradient(circle at 22% 30%,rgba(86,243,154,.20),transparent 18%),
    radial-gradient(circle at 76% 65%,rgba(167,124,255,.18),transparent 22%);
  background-size:34px 34px,34px 34px,auto,auto;
  pointer-events:none;
}

.iq-c1-story-header{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:18px 20px 0;
}

.iq-c1-story-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  color:#c9ffdf;
  background:rgba(86,243,154,.11);
  border:1px solid rgba(86,243,154,.24);
  font-size:12px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.35px;
}

.iq-c1-story-close{
  width:38px;
  height:38px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.07);
  color:#fff;
  font-size:24px;
  font-weight:900;
  cursor:pointer;
}

.iq-c1-story-stage{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:210px minmax(0,1fr);
  gap:18px;
  align-items:center;
  padding:22px 24px 10px;
}

.iq-c1-story-character{
  min-height:210px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:28px;
  font-size:112px;
  background:
    radial-gradient(circle at 50% 45%,rgba(70,216,255,.22),transparent 48%),
    rgba(255,255,255,.055);
  border:1px solid rgba(120,180,255,.18);
  box-shadow:inset 0 0 30px rgba(70,216,255,.05);
}

.iq-c1-story-content{
  min-height:230px;
  padding:20px;
  border-radius:26px;
  background:rgba(255,255,255,.052);
  border:1px solid rgba(255,255,255,.09);
}

.iq-c1-story-speaker{
  display:inline-flex;
  margin-bottom:10px;
  padding:7px 10px;
  border-radius:999px;
  color:#bff4ff;
  background:rgba(70,216,255,.10);
  border:1px solid rgba(70,216,255,.20);
  font-size:12px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.28px;
}

.iq-c1-story-content h2{
  margin:0 0 12px;
  color:#fff;
  font-size:clamp(28px,4vw,46px);
  line-height:1.06;
  letter-spacing:-.045em;
}

.iq-c1-story-content p{
  margin:0;
  color:#d7e9ff;
  font-size:17px;
  line-height:1.65;
  font-weight:750;
}

.iq-c1-story-progress{
  position:relative;
  z-index:2;
  display:flex;
  justify-content:center;
  gap:8px;
  padding:8px 0 4px;
}

.iq-c1-story-progress span{
  width:10px;
  height:10px;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.10);
}

.iq-c1-story-progress span.active{
  width:30px;
  background:linear-gradient(90deg,var(--cyan),var(--green));
}

.iq-c1-story-actions{
  position:relative;
  z-index:2;
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding:16px 20px 20px;
}

.iq-c1-story-actions .btn{
  min-height:44px;
  border-radius:16px;
}

@media(max-width:760px){
  .iq-c1-story-stage{
    grid-template-columns:1fr;
  }

  .iq-c1-story-character{
    min-height:150px;
    font-size:82px;
  }

  .iq-c1-story-content{
    min-height:210px;
  }

  .iq-c1-story-actions{
    flex-direction:column;
  }

  .iq-c1-story-actions .btn{
    width:100%;
  }
}

/* =========================================================
   V44.7 · Narración Cinemática Campaña 1
   Sonido distinto por personaje + controles de audio.
========================================================= */

.iq-c1-story-cinematic{
  isolation:isolate;
}

.iq-c1-story-cinematic::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(115deg,transparent 0 34%,rgba(255,255,255,.035) 42%,transparent 52%),
    radial-gradient(circle at 50% 120%,rgba(70,216,255,.10),transparent 42%);
  mix-blend-mode:screen;
  animation:c1CineSweep 5.8s ease-in-out infinite;
}

@keyframes c1CineSweep{
  0%,100%{opacity:.45;transform:translateX(-8%)}
  50%{opacity:.85;transform:translateX(8%)}
}

.iq-c1-story-header-actions{
  display:flex;
  align-items:center;
  gap:8px;
}

.iq-c1-story-sound{
  min-height:38px;
  padding:8px 11px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.07);
  color:#eaf8ff;
  font-size:12px;
  font-weight:950;
  cursor:pointer;
}

.iq-c1-story-sound:hover,
.iq-c1-story-close:hover{
  filter:brightness(1.12);
  transform:translateY(-1px);
}

.iq-c1-story-character{
  transition:filter .25s ease,transform .25s ease,border-color .25s ease,background .25s ease;
}

.iq-c1-story-content{
  transition:border-color .25s ease,box-shadow .25s ease,background .25s ease;
}

/* Color por personaje */
.iq-c1-story-box.tone-narrator .iq-c1-story-character{
  filter:drop-shadow(0 0 22px rgba(120,180,255,.30));
}

.iq-c1-story-box.tone-omega .iq-c1-story-character{
  border-color:rgba(70,216,255,.34);
  filter:drop-shadow(0 0 28px rgba(70,216,255,.42));
  background:
    radial-gradient(circle at 50% 45%,rgba(70,216,255,.30),transparent 48%),
    rgba(255,255,255,.065);
}

.iq-c1-story-box.tone-virus .iq-c1-story-character{
  border-color:rgba(255,95,120,.38);
  filter:drop-shadow(0 0 30px rgba(255,95,120,.44));
  background:
    radial-gradient(circle at 50% 45%,rgba(255,95,120,.24),transparent 48%),
    rgba(255,255,255,.055);
  animation:c1VirusGlitch .28s steps(2,end) infinite alternate;
}

.iq-c1-story-box.tone-assistant .iq-c1-story-character{
  border-color:rgba(255,209,102,.36);
  filter:drop-shadow(0 0 28px rgba(255,209,102,.38));
  background:
    radial-gradient(circle at 50% 45%,rgba(255,209,102,.22),transparent 48%),
    rgba(255,255,255,.06);
}

@keyframes c1VirusGlitch{
  0%{transform:translateX(0)}
  50%{transform:translateX(1px) rotate(.25deg)}
  100%{transform:translateX(-1px) rotate(-.25deg)}
}

.iq-c1-story-box.tone-omega .iq-c1-story-speaker{
  color:#bff4ff;
  border-color:rgba(70,216,255,.25);
}

.iq-c1-story-box.tone-virus .iq-c1-story-speaker{
  color:#ffd2da;
  background:rgba(255,95,120,.10);
  border-color:rgba(255,95,120,.24);
}

.iq-c1-story-box.tone-assistant .iq-c1-story-speaker{
  color:#ffe4a3;
  background:rgba(255,209,102,.10);
  border-color:rgba(255,209,102,.24);
}

.iq-c1-story-box.tone-virus .iq-c1-story-content{
  border-color:rgba(255,95,120,.20);
  box-shadow:inset 0 0 28px rgba(255,95,120,.05);
}

.iq-c1-story-box.tone-omega .iq-c1-story-content{
  border-color:rgba(70,216,255,.20);
  box-shadow:inset 0 0 28px rgba(70,216,255,.05);
}

.iq-c1-story-box.tone-assistant .iq-c1-story-content{
  border-color:rgba(255,209,102,.20);
  box-shadow:inset 0 0 28px rgba(255,209,102,.04);
}

@media(max-width:760px){
  .iq-c1-story-header{
    align-items:flex-start;
  }

  .iq-c1-story-header-actions{
    flex-direction:column-reverse;
    align-items:flex-end;
  }

  .iq-c1-story-sound{
    font-size:11px;
  }
}

/* =========================================================
   V44.8 · Sonido de narración corregido
   Agrega estado visible de audio y mantiene narración cinemática.
========================================================= */

.iq-c1-story-sound-status{
  position:relative;
  z-index:2;
  margin:8px 24px 0;
  padding:9px 12px;
  border-radius:16px;
  color:#bff4ff;
  background:rgba(70,216,255,.08);
  border:1px solid rgba(70,216,255,.18);
  font-size:12px;
  font-weight:900;
  text-align:center;
}

.iq-c1-story-sound-status.ok{
  color:#c9ffdf;
  background:rgba(86,243,154,.09);
  border-color:rgba(86,243,154,.22);
}

.iq-c1-story-sound-status.warn{
  color:#ffe4a3;
  background:rgba(255,209,102,.09);
  border-color:rgba(255,209,102,.22);
}

/* =========================================================
   V44.9 · Registro de expedición profesional
   Mejora solo la ventana de Nombre, Integrantes y Avatar.
========================================================= */

.iq-start-modal{
  z-index:78 !important;
}

.iq-start-box{
  position:relative;
  overflow:hidden;
  width:min(980px,100%);
  padding:0 !important;
  border-radius:30px !important;
  background:
    radial-gradient(circle at 10% 0%,rgba(70,216,255,.18),transparent 36%),
    radial-gradient(circle at 95% 10%,rgba(167,124,255,.18),transparent 35%),
    linear-gradient(180deg,rgba(12,31,55,.98),rgba(5,14,28,.98)) !important;
  border:1px solid rgba(120,180,255,.24) !important;
  box-shadow:
    0 28px 80px rgba(0,0,0,.48),
    0 0 40px rgba(70,216,255,.09) !important;
}

.iq-start-glow{
  position:absolute;
  inset:0;
  opacity:.28;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:34px 34px;
}

.iq-start-header{
  position:relative;
  z-index:2;
  padding:24px 26px 12px;
}

.iq-start-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:12px;
  padding:8px 12px;
  border-radius:999px;
  color:#c9ffdf;
  background:rgba(86,243,154,.10);
  border:1px solid rgba(86,243,154,.22);
  font-size:12px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.35px;
}

.iq-start-header h2{
  margin:0;
  color:#fff;
  font-size:clamp(30px,4vw,46px);
  line-height:1.05;
  letter-spacing:-.045em;
}

.iq-start-header p{
  margin:10px 0 0;
  color:#aebfd4;
  font-size:15px;
  line-height:1.55;
}

.iq-start-layout{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);
  gap:18px;
  padding:10px 26px 20px;
}

.iq-start-form{
  padding:18px;
  border-radius:24px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.09);
}

.iq-start-form label{
  display:block;
  margin:0 0 7px;
  color:#eaf8ff;
  font-size:13px;
  font-weight:950;
}

.iq-start-input,
.iq-start-file{
  width:100%;
  margin:0 0 14px !important;
  border-radius:16px !important;
  border:1px solid rgba(120,180,255,.22) !important;
  background:rgba(5,18,34,.82) !important;
  color:#fff !important;
  min-height:46px;
}

.iq-start-input:focus{
  outline:2px solid rgba(70,216,255,.35);
  border-color:rgba(70,216,255,.42) !important;
}

.iq-start-avatar-picker{
  grid-template-columns:repeat(6,1fr) !important;
  gap:9px !important;
  margin:0 0 14px !important;
}

.iq-start-avatar-picker .avatar-choice{
  min-height:48px;
  border-radius:16px;
  background:rgba(9,26,45,.88);
}

.iq-start-avatar-picker .avatar-choice.selected{
  outline:2px solid rgba(70,216,255,.86);
  box-shadow:0 0 18px rgba(70,216,255,.20);
}

.iq-start-photo-label{
  margin-top:10px !important;
}

.iq-start-note{
  margin:0;
  color:#91a9c2;
  font-size:12px;
  line-height:1.45;
}

.iq-start-preview-panel{
  position:relative;
  overflow:hidden;
  padding:20px;
  border-radius:24px;
  background:
    radial-gradient(circle at 50% 12%,rgba(70,216,255,.16),transparent 42%),
    rgba(255,255,255,.045);
  border:1px solid rgba(120,180,255,.16);
  text-align:center;
}

.iq-start-preview-title{
  display:inline-flex;
  margin-bottom:14px;
  padding:7px 10px;
  border-radius:999px;
  color:#bff4ff;
  background:rgba(70,216,255,.10);
  border:1px solid rgba(70,216,255,.18);
  font-size:11px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.3px;
}

.iq-start-preview-wrap{
  justify-content:center;
  margin:0 auto 12px !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
}

.iq-start-preview-wrap .avatar-preview{
  width:118px;
  height:118px;
  margin:0 auto;
  border-radius:32px;
  font-size:68px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at 50% 45%,rgba(70,216,255,.22),transparent 48%),
    rgba(255,255,255,.07);
  border:1px solid rgba(120,180,255,.22);
  box-shadow:0 0 28px rgba(70,216,255,.11);
  overflow:hidden;
}

.iq-start-preview-wrap .avatar-preview img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.iq-start-preview-panel h3{
  margin:8px 0 4px;
  color:#fff;
  font-size:22px;
  line-height:1.12;
}

.iq-start-preview-panel p{
  margin:0 0 14px;
  color:#aebfd4;
  font-size:13px;
  line-height:1.45;
}

.iq-start-mission-card{
  margin:14px 0;
  padding:13px;
  border-radius:18px;
  text-align:left;
  background:rgba(86,243,154,.075);
  border:1px solid rgba(86,243,154,.16);
}

.iq-start-mission-card b{
  display:block;
  color:#c9ffdf;
  font-size:13px;
  margin-bottom:4px;
}

.iq-start-mission-card span{
  display:block;
  color:#bdd1e8;
  font-size:12px;
  line-height:1.45;
}

.iq-start-mini-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
}

.iq-start-mini-stats div{
  padding:10px 6px;
  border-radius:16px;
  background:rgba(5,18,34,.66);
  border:1px solid rgba(120,180,255,.12);
}

.iq-start-mini-stats b{
  display:block;
  color:#fff;
  font-size:17px;
}

.iq-start-mini-stats span{
  display:block;
  color:#8fa7c1;
  font-size:11px;
  margin-top:2px;
}

.iq-start-actions{
  position:relative;
  z-index:2;
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding:0 26px 24px;
}

.iq-start-actions .btn{
  min-height:46px;
  border-radius:16px;
}

.iq-start-launch{
  min-width:190px;
}

@media(max-width:860px){
  .iq-start-layout{
    grid-template-columns:1fr;
  }

  .iq-start-preview-panel{
    order:-1;
  }
}

@media(max-width:560px){
  .iq-start-header,
  .iq-start-layout,
  .iq-start-actions{
    padding-left:16px;
    padding-right:16px;
  }

  .iq-start-avatar-picker{
    grid-template-columns:repeat(4,1fr) !important;
  }

  .iq-start-actions{
    flex-direction:column;
  }

  .iq-start-actions .btn,
  .iq-start-launch{
    width:100%;
  }
}

/* =========================================================
   V45 · Mapa de mundos profesional
   Mejora solo la pantalla del mapa de Campaña 1.
========================================================= */

.iq-map-hero{
  position:relative;
  overflow:hidden;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:18px;
  padding:24px;
  margin-bottom:14px;
  border-radius:26px;
  background:
    radial-gradient(circle at 8% 0%,rgba(70,216,255,.18),transparent 38%),
    radial-gradient(circle at 95% 10%,rgba(167,124,255,.16),transparent 34%),
    linear-gradient(180deg,rgba(10,30,54,.96),rgba(5,16,31,.96));
  border:1px solid rgba(120,180,255,.20);
  box-shadow:0 18px 45px rgba(0,0,0,.22);
}

.iq-map-hero::after{
  content:"";
  position:absolute;
  inset:0;
  opacity:.22;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:34px 34px;
  pointer-events:none;
}

.iq-map-hero > *{
  position:relative;
  z-index:2;
}

.iq-map-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:12px;
  padding:8px 12px;
  border-radius:999px;
  color:#c9ffdf;
  background:rgba(86,243,154,.10);
  border:1px solid rgba(86,243,154,.22);
  font-size:12px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.35px;
}

.iq-map-hero h2{
  margin:0;
  color:#fff;
  font-size:clamp(32px,4vw,52px);
  line-height:1.02;
  letter-spacing:-.05em;
}

.iq-map-hero p{
  max-width:760px;
  margin:10px 0 0;
  color:#aebfd4;
  font-size:15px;
  line-height:1.55;
}

.iq-map-status{
  min-width:220px;
  display:flex;
  justify-content:flex-end;
}

.iq-map-status .tag{
  margin-top:0;
  white-space:normal;
  text-align:right;
  line-height:1.35;
  color:#dff7ff;
  background:rgba(70,216,255,.10);
  border:1px solid rgba(70,216,255,.22);
}

.iq-map-summary{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-bottom:16px;
}

.iq-map-summary-card{
  padding:15px 16px;
  border-radius:20px;
  background:
    radial-gradient(circle at 100% 0%,rgba(70,216,255,.10),transparent 35%),
    rgba(7,21,38,.92);
  border:1px solid rgba(120,180,255,.16);
}

.iq-map-summary-card b{
  display:block;
  color:#fff;
  font-size:clamp(22px,3vw,32px);
  line-height:1;
}

.iq-map-summary-card span{
  display:block;
  margin-top:7px;
  color:#93aac4;
  font-size:12px;
  font-weight:850;
}

.iq-map-route{
  position:relative;
}

.iq-map-route-line{
  position:absolute;
  left:34px;
  top:24px;
  bottom:24px;
  width:3px;
  border-radius:999px;
  background:linear-gradient(180deg,rgba(70,216,255,.20),rgba(86,243,154,.38),rgba(167,124,255,.25));
  box-shadow:0 0 18px rgba(70,216,255,.18);
  pointer-events:none;
  z-index:0;
}

.iq-worlds-map{
  position:relative;
  z-index:1;
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:14px !important;
}

.iq-world-card{
  min-height:158px;
  padding:18px 18px 16px 72px !important;
  border-radius:24px !important;
  background:
    radial-gradient(circle at 90% 8%,rgba(70,216,255,.10),transparent 36%),
    linear-gradient(180deg,rgba(10,29,52,.96),rgba(6,18,34,.98)) !important;
  border:1px solid rgba(120,180,255,.17) !important;
  box-shadow:0 14px 32px rgba(0,0,0,.20);
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease,filter .2s ease;
}

.iq-world-card::before{
  content:"";
  position:absolute;
  inset:auto -40px -52px auto;
  width:150px;
  height:150px;
  border-radius:50%;
  background:rgba(70,216,255,.07);
}

.iq-world-card.playable:hover{
  transform:translateY(-4px);
  border-color:rgba(70,216,255,.48) !important;
  box-shadow:0 22px 48px rgba(0,0,0,.27),0 0 28px rgba(70,216,255,.10);
}

.iq-world-card.next{
  border-color:rgba(86,243,154,.42) !important;
  box-shadow:0 18px 42px rgba(0,0,0,.25),0 0 24px rgba(86,243,154,.10);
}

.iq-world-card.next::after{
  content:"SIGUIENTE";
  position:absolute;
  top:13px;
  right:13px;
  z-index:3;
  padding:6px 9px;
  border-radius:999px;
  color:#c9ffdf;
  background:rgba(86,243,154,.12);
  border:1px solid rgba(86,243,154,.23);
  font-size:10px;
  font-weight:950;
  letter-spacing:.35px;
}

.iq-world-card.done{
  border-color:rgba(86,243,154,.36) !important;
}

.iq-world-card.locked{
  opacity:.48 !important;
  filter:grayscale(.85) !important;
}

.iq-world-number{
  position:absolute;
  left:16px;
  top:18px;
  z-index:2;
  width:42px;
  height:42px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  background:linear-gradient(180deg,rgba(70,216,255,.20),rgba(124,77,255,.14));
  border:1px solid rgba(120,180,255,.23);
  font-weight:950;
  font-size:15px;
  box-shadow:0 0 18px rgba(70,216,255,.09);
}

.iq-world-main{
  position:relative;
  z-index:2;
  display:flex;
  align-items:flex-start;
  gap:12px;
}

.iq-world-icon{
  width:50px;
  height:50px;
  flex:0 0 auto;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
}

.iq-world-copy{
  min-width:0;
}

.iq-world-card h3{
  margin:0 0 5px !important;
  color:#fff;
  font-size:19px;
  line-height:1.12;
  letter-spacing:-.02em;
}

.iq-world-card p{
  margin:0 !important;
  color:#9fb5cf !important;
  font-size:13px !important;
  line-height:1.42;
}

.iq-world-state{
  position:relative;
  z-index:2;
  margin-top:13px;
  color:#d7e9ff;
  font-size:12px;
  font-weight:950;
}

.iq-world-tags{
  position:relative;
  z-index:2;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:8px;
}

.iq-world-tags .tag{
  margin-top:0 !important;
  font-size:10.5px !important;
  color:#bfe9ff;
  background:rgba(70,216,255,.08);
  border:1px solid rgba(70,216,255,.15);
}

.iq-xenon-card{
  grid-column:1/-1;
  min-height:150px;
  background:
    radial-gradient(circle at 95% 10%,rgba(255,209,102,.16),transparent 35%),
    radial-gradient(circle at 15% 100%,rgba(167,124,255,.16),transparent 36%),
    linear-gradient(180deg,rgba(19,18,54,.98),rgba(7,16,31,.98)) !important;
  border-color:rgba(255,209,102,.26) !important;
}

.iq-xenon-card .iq-world-number{
  background:linear-gradient(180deg,rgba(255,209,102,.22),rgba(167,124,255,.18));
  border-color:rgba(255,209,102,.30);
}

@media(max-width:980px){
  .iq-worlds-map{
    grid-template-columns:1fr !important;
  }
}

@media(max-width:760px){
  .iq-map-hero{
    flex-direction:column;
    padding:20px;
  }

  .iq-map-status{
    min-width:0;
    width:100%;
    justify-content:flex-start;
  }

  .iq-map-status .tag{
    text-align:left;
  }

  .iq-map-summary{
    grid-template-columns:1fr;
  }

  .iq-world-card{
    padding-left:64px !important;
  }
}

@media(max-width:520px){
  .iq-map-route-line{
    display:none;
  }

  .iq-world-card{
    padding:16px !important;
  }

  .iq-world-number{
    position:relative;
    left:auto;
    top:auto;
    margin-bottom:12px;
  }

  .iq-world-main{
    flex-direction:column;
  }
}

/* =========================================================
   V45.1 · Mapa compacto
   Mantiene el diseño aprobado, pero reduce recuadros
   para optimizar espacio en pantalla.
========================================================= */

#mapScreen .iq-map-hero{
  padding:18px 20px !important;
  margin-bottom:10px !important;
  border-radius:22px !important;
}

#mapScreen .iq-map-chip{
  margin-bottom:8px !important;
  padding:6px 10px !important;
  font-size:11px !important;
}

#mapScreen .iq-map-hero h2{
  font-size:clamp(28px,3.2vw,42px) !important;
}

#mapScreen .iq-map-hero p{
  margin-top:7px !important;
  font-size:13px !important;
  line-height:1.42 !important;
}

#mapScreen .iq-map-summary{
  gap:8px !important;
  margin-bottom:10px !important;
}

#mapScreen .iq-map-summary-card{
  padding:11px 13px !important;
  border-radius:17px !important;
}

#mapScreen .iq-map-summary-card b{
  font-size:clamp(19px,2.5vw,26px) !important;
}

#mapScreen .iq-map-summary-card span{
  margin-top:5px !important;
  font-size:11px !important;
}

#mapScreen .iq-map-route-line{
  left:26px !important;
  top:18px !important;
  bottom:18px !important;
}

#mapScreen .iq-worlds-map{
  gap:10px !important;
}

#mapScreen .iq-world-card{
  min-height:112px !important;
  padding:13px 14px 12px 58px !important;
  border-radius:19px !important;
}

#mapScreen .iq-world-card.next::after{
  top:9px !important;
  right:9px !important;
  padding:5px 7px !important;
  font-size:9px !important;
}

#mapScreen .iq-world-number{
  left:12px !important;
  top:13px !important;
  width:34px !important;
  height:34px !important;
  border-radius:13px !important;
  font-size:13px !important;
}

#mapScreen .iq-world-main{
  gap:9px !important;
}

#mapScreen .iq-world-icon{
  width:40px !important;
  height:40px !important;
  border-radius:15px !important;
  font-size:23px !important;
}

#mapScreen .iq-world-card h3{
  font-size:16px !important;
  margin-bottom:3px !important;
  line-height:1.08 !important;
}

#mapScreen .iq-world-card p{
  font-size:12px !important;
  line-height:1.32 !important;
}

#mapScreen .iq-world-state{
  margin-top:8px !important;
  font-size:11px !important;
}

#mapScreen .iq-world-tags{
  gap:5px !important;
  margin-top:6px !important;
}

#mapScreen .iq-world-tags .tag{
  padding:4px 7px !important;
  font-size:9.5px !important;
}

#mapScreen .iq-xenon-card{
  min-height:120px !important;
}

@media(max-width:760px){
  #mapScreen .iq-map-hero{
    padding:16px !important;
  }

  #mapScreen .iq-world-card{
    padding-left:54px !important;
  }
}

@media(max-width:520px){
  #mapScreen .iq-world-card{
    padding:13px !important;
  }
}

/* =========================================================
   V45.2 · Elegir dificultad profesional
   Mejora solo la ventana de dificultad previa al combate.
========================================================= */

.iq-difficulty-modal{
  z-index:79 !important;
}

.iq-difficulty-box{
  position:relative;
  overflow:hidden;
  width:min(980px,100%);
  padding:0 !important;
  border-radius:30px !important;
  background:
    radial-gradient(circle at 8% 0%,rgba(70,216,255,.18),transparent 36%),
    radial-gradient(circle at 95% 10%,rgba(255,209,102,.14),transparent 34%),
    linear-gradient(180deg,rgba(12,31,55,.98),rgba(5,14,28,.98)) !important;
  border:1px solid rgba(120,180,255,.24) !important;
  box-shadow:
    0 28px 80px rgba(0,0,0,.48),
    0 0 40px rgba(70,216,255,.09) !important;
}

.iq-difficulty-bg{
  position:absolute;
  inset:0;
  opacity:.25;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:34px 34px;
}

.iq-difficulty-header{
  position:relative;
  z-index:2;
  padding:24px 26px 12px;
}

.iq-difficulty-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:12px;
  padding:8px 12px;
  border-radius:999px;
  color:#ffe4a3;
  background:rgba(255,209,102,.10);
  border:1px solid rgba(255,209,102,.22);
  font-size:12px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.35px;
}

.iq-difficulty-header h2{
  margin:0;
  color:#fff;
  font-size:clamp(30px,4vw,46px);
  line-height:1.05;
  letter-spacing:-.045em;
}

.iq-difficulty-header p{
  max-width:840px;
  margin:10px 0 0;
  color:#aebfd4;
  font-size:14px;
  line-height:1.55;
}

.iq-difficulty-layout{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:280px minmax(0,1fr);
  gap:16px;
  padding:10px 26px 20px;
}

.iq-difficulty-world{
  min-height:100%;
  padding:18px;
  border-radius:24px;
  background:
    radial-gradient(circle at 50% 8%,rgba(70,216,255,.16),transparent 42%),
    rgba(255,255,255,.045);
  border:1px solid rgba(120,180,255,.16);
  display:flex;
  flex-direction:column;
  justify-content:center;
  text-align:center;
}

.iq-difficulty-world-icon{
  width:102px;
  height:102px;
  margin:0 auto 14px;
  border-radius:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:58px;
  background:
    radial-gradient(circle at 50% 45%,rgba(70,216,255,.22),transparent 48%),
    rgba(255,255,255,.07);
  border:1px solid rgba(120,180,255,.22);
  box-shadow:0 0 28px rgba(70,216,255,.11);
}

.iq-difficulty-world-label{
  display:inline-flex;
  margin-bottom:8px;
  padding:6px 9px;
  border-radius:999px;
  color:#bff4ff;
  background:rgba(70,216,255,.10);
  border:1px solid rgba(70,216,255,.18);
  font-size:10.5px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.28px;
}

.iq-difficulty-world h3{
  margin:0 0 6px;
  color:#fff;
  font-size:22px;
  line-height:1.12;
}

.iq-difficulty-world p{
  margin:0;
  color:#9fb5cf;
  font-size:13px;
  line-height:1.42;
}

.iq-difficulty-options{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}

.iq-difficulty-card{
  position:relative;
  overflow:hidden;
  width:100%;
  min-height:108px;
  display:grid;
  grid-template-columns:58px minmax(0,1fr) auto;
  align-items:center;
  gap:13px;
  padding:14px 16px;
  border-radius:22px;
  border:1px solid rgba(120,180,255,.16);
  background:rgba(7,21,38,.92);
  color:#fff;
  text-align:left;
  cursor:pointer;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease,filter .2s ease;
}

.iq-difficulty-card::after{
  content:"";
  position:absolute;
  inset:auto -40px -55px auto;
  width:140px;
  height:140px;
  border-radius:50%;
  opacity:.26;
  pointer-events:none;
}

.iq-difficulty-card.easy::after{background:rgba(86,243,154,.30)}
.iq-difficulty-card.normal::after{background:rgba(255,209,102,.30)}
.iq-difficulty-card.hard::after{background:rgba(255,95,120,.30)}

.iq-difficulty-card:hover{
  transform:translateY(-3px);
  border-color:rgba(70,216,255,.38);
  box-shadow:0 18px 42px rgba(0,0,0,.26),0 0 22px rgba(70,216,255,.09);
}

.iq-difficulty-card.recommended{
  border-color:rgba(255,209,102,.33);
  box-shadow:0 0 24px rgba(255,209,102,.08);
}

.iq-difficulty-ribbon{
  position:absolute;
  top:8px;
  right:10px;
  z-index:3;
  padding:5px 8px;
  border-radius:999px;
  color:#ffe4a3;
  background:rgba(255,209,102,.11);
  border:1px solid rgba(255,209,102,.20);
  font-size:9.5px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.25px;
}

.iq-difficulty-card-icon{
  position:relative;
  z-index:2;
  width:52px;
  height:52px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
}

.iq-difficulty-card-copy{
  position:relative;
  z-index:2;
  min-width:0;
  padding-right:8px;
}

.iq-difficulty-card-copy b{
  display:block;
  font-size:21px;
  line-height:1.1;
  margin-bottom:4px;
}

.iq-difficulty-card-copy small{
  display:block;
  color:#aebfd4;
  font-size:13px;
  line-height:1.38;
  font-weight:750;
}

.iq-difficulty-card-copy em{
  display:inline-flex;
  margin-top:7px;
  color:#dff7ff;
  font-size:11px;
  font-style:normal;
  font-weight:950;
}

.iq-difficulty-play{
  position:relative;
  z-index:2;
  padding:10px 12px;
  border-radius:14px;
  color:#fff;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
  font-size:12px;
  font-weight:950;
  white-space:nowrap;
}

.iq-difficulty-card.easy .iq-difficulty-play{
  color:#c9ffdf;
}

.iq-difficulty-card.normal .iq-difficulty-play{
  color:#ffe4a3;
}

.iq-difficulty-card.hard .iq-difficulty-play{
  color:#ffd2da;
}

.iq-difficulty-actions{
  position:relative;
  z-index:2;
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding:0 26px 24px;
}

.iq-difficulty-actions .btn{
  min-height:44px;
  border-radius:16px;
}

@media(max-width:860px){
  .iq-difficulty-layout{
    grid-template-columns:1fr;
  }

  .iq-difficulty-world{
    flex-direction:row;
    text-align:left;
    gap:14px;
    justify-content:flex-start;
    align-items:center;
  }

  .iq-difficulty-world-icon{
    width:74px;
    height:74px;
    margin:0;
    font-size:42px;
    border-radius:22px;
  }
}

@media(max-width:560px){
  .iq-difficulty-header,
  .iq-difficulty-layout,
  .iq-difficulty-actions{
    padding-left:16px;
    padding-right:16px;
  }

  .iq-difficulty-card{
    grid-template-columns:46px minmax(0,1fr);
    min-height:118px;
  }

  .iq-difficulty-play{
    grid-column:1/-1;
    text-align:center;
  }

  .iq-difficulty-actions{
    flex-direction:column;
  }

  .iq-difficulty-actions .btn{
    width:100%;
  }
}

/* =========================================================
   V46 · Batalla visual profesional
   Mejora solo el diseño de la pantalla de batalla.
   No modifica lógica de preguntas, daño, guardado ni ranking.
========================================================= */

#battleScreen.iq-battle-pro,
#battleScreen{
  position:relative !important;
  padding:22px 24px 24px !important;
  border-radius:28px !important;
  overflow:hidden !important;
  background:
    radial-gradient(circle at 12% 0%,rgba(70,216,255,.16),transparent 36%),
    radial-gradient(circle at 90% 8%,rgba(255,95,120,.12),transparent 34%),
    linear-gradient(180deg,rgba(8,25,46,.96),rgba(4,13,27,.98)) !important;
  border:1px solid rgba(120,180,255,.20);
  box-shadow:0 18px 46px rgba(0,0,0,.24);
}

#battleScreen::before{
  opacity:.24 !important;
}

#battleScreen::after{
  opacity:.20 !important;
}

/* Encabezado de batalla */
#battleScreen .battle-head{
  position:relative !important;
  z-index:5 !important;
  display:flex !important;
  justify-content:space-between !important;
  align-items:flex-start !important;
  gap:16px !important;
  margin:0 0 14px !important;
  padding:12px 14px !important;
  min-height:auto !important;
  border-radius:20px !important;
  background:rgba(255,255,255,.045) !important;
  border:1px solid rgba(120,180,255,.14) !important;
  backdrop-filter:blur(8px);
}

#battleScreen .battle-head > div:first-child{
  max-width:calc(100% - 155px) !important;
}

#battleWorld{
  font-size:22px !important;
  line-height:1.08 !important;
  font-weight:950 !important;
  color:#fff !important;
}

#battlePhase{
  margin-top:4px !important;
  color:#aebfd4 !important;
  font-size:12.5px !important;
  line-height:1.32 !important;
}

#battleScreen .battle-head .btn{
  min-height:38px !important;
  padding:9px 14px !important;
  border-radius:14px !important;
  font-size:13px !important;
  white-space:nowrap !important;
}

/* Tarjetas jugador/enemigo */
#battleScreen .battle-grid{
  position:relative !important;
  z-index:3 !important;
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:14px !important;
  margin-top:0 !important;
}

#battleScreen .fighter{
  position:relative !important;
  min-height:260px !important;
  padding:16px !important;
  border-radius:24px !important;
  background:
    radial-gradient(circle at 50% 20%,rgba(70,216,255,.12),transparent 42%),
    rgba(7,21,38,.92) !important;
  border:1px solid rgba(120,180,255,.17) !important;
  box-shadow:0 14px 32px rgba(0,0,0,.22),inset 0 0 24px rgba(70,216,255,.035) !important;
  text-align:center !important;
}

#battleScreen .fighter:last-child{
  background:
    radial-gradient(circle at 50% 18%,rgba(255,95,120,.13),transparent 42%),
    rgba(7,21,38,.92) !important;
  box-shadow:0 14px 32px rgba(0,0,0,.22),inset 0 0 24px rgba(255,95,120,.035) !important;
}

#battleScreen .fighter h3{
  margin:0 0 8px !important;
  color:#fff !important;
  font-size:18px !important;
  line-height:1.15 !important;
  letter-spacing:-.02em;
}

#battleScreen .avatar,
#battleScreen .enemy-avatar{
  min-height:104px;
  display:flex !important;
  align-items:center;
  justify-content:center;
  margin:4px auto 8px !important;
  border-radius:28px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.07);
}

#battleScreen .avatar{
  font-size:74px !important;
  filter:drop-shadow(0 0 18px rgba(70,216,255,.30)) !important;
}

#battleScreen .enemy-avatar{
  font-size:84px !important;
  filter:drop-shadow(0 0 20px rgba(255,95,120,.30)) !important;
}

/* Barras de vida y energía más claras */
#battleScreen .bar{
  height:18px !important;
  margin:9px 0 6px !important;
  border-radius:999px !important;
  background:rgba(5,18,34,.84) !important;
  border:1px solid rgba(120,180,255,.18) !important;
  box-shadow:inset 0 0 10px rgba(0,0,0,.28);
}

#battleScreen .fill{
  border-radius:999px !important;
}

#battleScreen .hp{
  background:linear-gradient(90deg,#ff416c,#ff8a6b) !important;
  box-shadow:0 0 14px rgba(255,95,120,.28);
}

#battleScreen .mana{
  background:linear-gradient(90deg,#22c1ff,#7c4dff) !important;
  box-shadow:0 0 14px rgba(70,216,255,.24);
}

#phptext,
#ehptext{
  color:#eaf8ff !important;
  font-size:13px !important;
  font-weight:900 !important;
}

#statusText,
#armorText{
  margin-top:8px !important;
  font-size:11px !important;
}

/* Pregunta */
#battleScreen .question{
  position:relative !important;
  z-index:4 !important;
  margin-top:14px !important;
  padding:18px !important;
  border-radius:24px !important;
  background:
    radial-gradient(circle at 8% 0%,rgba(86,243,154,.10),transparent 34%),
    rgba(7,21,38,.95) !important;
  border:1px solid rgba(120,180,255,.18) !important;
  box-shadow:0 16px 34px rgba(0,0,0,.22);
}

#battleScreen .qtop{
  display:flex !important;
  justify-content:space-between !important;
  align-items:center !important;
  gap:10px !important;
  margin-bottom:12px !important;
  color:#aebfd4 !important;
  font-size:12px !important;
  font-weight:900 !important;
}

#missionLabel,
#comboText{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(70,216,255,.08);
  border:1px solid rgba(70,216,255,.15);
  color:#bff4ff;
}

#comboText{
  color:#c9ffdf;
  background:rgba(86,243,154,.08);
  border-color:rgba(86,243,154,.15);
}

#questionText{
  margin:0 !important;
  color:#ffffff !important;
  font-size:clamp(22px,2.6vw,34px) !important;
  line-height:1.18 !important;
  letter-spacing:-.025em;
}

/* Respuestas más legibles */
#battleScreen .answers{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:10px !important;
  margin-top:15px !important;
}

#battleScreen .answer{
  min-height:58px !important;
  padding:14px 15px !important;
  border-radius:18px !important;
  border:1px solid rgba(120,180,255,.18) !important;
  background:
    linear-gradient(180deg,rgba(17,47,80,.92),rgba(9,28,50,.95)) !important;
  color:#fff !important;
  font-size:15px !important;
  line-height:1.32 !important;
  font-weight:850 !important;
  box-shadow:0 10px 22px rgba(0,0,0,.16);
}

#battleScreen .answer:hover{
  transform:translateY(-2px);
  background:
    linear-gradient(180deg,rgba(25,65,105,.96),rgba(12,38,68,.98)) !important;
  border-color:rgba(70,216,255,.42) !important;
  box-shadow:0 15px 32px rgba(0,0,0,.22),0 0 18px rgba(70,216,255,.08);
}

#battleScreen .answer:disabled{
  opacity:.58 !important;
  transform:none !important;
}

/* Acciones inferiores */
#battleScreen .actions{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:10px !important;
  margin-top:14px !important;
}

#battleScreen .actions .btn{
  min-height:42px !important;
  padding:10px 14px !important;
  border-radius:15px !important;
  font-size:13px !important;
  font-weight:950 !important;
}

#battleScreen .special{
  background:linear-gradient(90deg,#3f2a78,#6c4ce8) !important;
  box-shadow:0 0 18px rgba(124,77,255,.12);
}

#battleScreen .heal{
  background:linear-gradient(90deg,#135d3b,#1d8c58) !important;
  box-shadow:0 0 18px rgba(86,243,154,.10);
}

/* Feedback correcto/incorrecto */
#battleScreen .feedback{
  min-height:30px !important;
  margin-top:12px !important;
  padding:9px 12px !important;
  border-radius:16px !important;
  color:#eaf8ff !important;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.09);
  font-size:14px !important;
  line-height:1.35;
}

/* Responsive */
@media(max-width:900px){
  #battleScreen .battle-grid{
    grid-template-columns:1fr !important;
  }

  #battleScreen .fighter{
    min-height:auto !important;
  }

  #battleScreen .avatar,
  #battleScreen .enemy-avatar{
    min-height:82px;
  }

  #battleScreen .avatar{
    font-size:58px !important;
  }

  #battleScreen .enemy-avatar{
    font-size:66px !important;
  }
}

@media(max-width:700px){
  #battleScreen{
    padding:16px !important;
  }

  #battleScreen .battle-head{
    flex-direction:column !important;
  }

  #battleScreen .battle-head > div:first-child{
    max-width:100% !important;
  }

  #battleScreen .battle-head .btn{
    width:100% !important;
  }

  #battleScreen .answers{
    grid-template-columns:1fr !important;
  }

  #battleScreen .qtop{
    flex-direction:column !important;
    align-items:flex-start !important;
  }

  #missionLabel,
  #comboText{
    width:100%;
    justify-content:center;
  }
}

/* =========================================================
   V46.1 · Ajuste fino de batalla
   Mantiene el diseño aprobado y optimiza espacio/alineación.
========================================================= */

#battleScreen.iq-battle-pro,
#battleScreen{
  padding:18px 20px 20px !important;
}

/* Encabezado un poco más compacto */
#battleScreen .battle-head{
  margin-bottom:10px !important;
  padding:10px 12px !important;
  border-radius:18px !important;
}

#battleWorld{
  font-size:20px !important;
}

#battlePhase{
  font-size:12px !important;
}

/* Menos altura en tarjetas de jugador/enemigo */
#battleScreen .battle-grid{
  gap:10px !important;
}

#battleScreen .fighter{
  min-height:220px !important;
  padding:13px !important;
  border-radius:21px !important;
}

#battleScreen .fighter h3{
  font-size:16px !important;
  margin-bottom:6px !important;
}

#battleScreen .avatar,
#battleScreen .enemy-avatar{
  min-height:82px !important;
  margin:2px auto 6px !important;
  border-radius:22px !important;
}

#battleScreen .avatar{
  font-size:58px !important;
}

#battleScreen .enemy-avatar{
  font-size:66px !important;
}

#battleScreen .bar{
  height:15px !important;
  margin:7px 0 5px !important;
}

#phptext,
#ehptext{
  font-size:12px !important;
}

/* Pregunta y respuestas más ordenadas */
#battleScreen .question{
  margin-top:10px !important;
  padding:15px !important;
  border-radius:21px !important;
}

#battleScreen .qtop{
  margin-bottom:9px !important;
}

#missionLabel,
#comboText{
  min-height:25px !important;
  padding:5px 9px !important;
  font-size:11px !important;
}

#questionText{
  font-size:clamp(20px,2.3vw,29px) !important;
}

#battleScreen .answers{
  gap:8px !important;
  margin-top:12px !important;
}

#battleScreen .answer{
  min-height:50px !important;
  padding:12px 13px !important;
  border-radius:16px !important;
  font-size:14px !important;
}

#battleScreen .actions{
  gap:8px !important;
  margin-top:11px !important;
}

#battleScreen .actions .btn{
  min-height:38px !important;
  padding:9px 12px !important;
  border-radius:14px !important;
}

#battleScreen .feedback{
  min-height:26px !important;
  margin-top:9px !important;
  padding:8px 11px !important;
  font-size:13px !important;
}

/* En pantallas medianas mantiene dos columnas si hay espacio */
@media(min-width:901px){
  #battleScreen .battle-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
  }
}

/* En tablets/celulares queda claro sin cortar */
@media(max-width:900px){
  #battleScreen .fighter{
    min-height:auto !important;
  }
}

@media(max-width:700px){
  #battleScreen{
    padding:14px !important;
  }

  #battleScreen .battle-head{
    gap:10px !important;
  }

  #battleScreen .answer{
    min-height:48px !important;
  }
}

/* =========================================================
   V47 · Progreso profesional
   Mejora solo la pantalla de progreso del estudiante.
========================================================= */

#progressScreen.iq-progress-pro{
  position:relative;
  overflow:hidden;
  padding:22px;
  border-radius:28px;
  background:
    radial-gradient(circle at 10% 0%,rgba(70,216,255,.16),transparent 36%),
    radial-gradient(circle at 92% 8%,rgba(86,243,154,.12),transparent 34%),
    linear-gradient(180deg,rgba(8,25,46,.96),rgba(4,13,27,.98));
  border:1px solid rgba(120,180,255,.20);
  box-shadow:0 18px 46px rgba(0,0,0,.24);
}

.iq-progress-hero{
  position:relative;
  overflow:hidden;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  padding:20px;
  margin-bottom:12px;
  border-radius:24px;
  background:
    radial-gradient(circle at 0% 0%,rgba(70,216,255,.15),transparent 38%),
    linear-gradient(180deg,rgba(12,31,55,.92),rgba(6,18,34,.94));
  border:1px solid rgba(120,180,255,.18);
}

.iq-progress-hero::after{
  content:"";
  position:absolute;
  inset:0;
  opacity:.20;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:32px 32px;
}

.iq-progress-hero > *{
  position:relative;
  z-index:2;
}

.iq-progress-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
  padding:7px 11px;
  border-radius:999px;
  color:#c9ffdf;
  background:rgba(86,243,154,.10);
  border:1px solid rgba(86,243,154,.22);
  font-size:11px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.35px;
}

.iq-progress-hero h2{
  margin:0;
  color:#fff;
  font-size:clamp(30px,3.8vw,48px);
  line-height:1.03;
  letter-spacing:-.045em;
}

.iq-progress-hero p{
  max-width:680px;
  margin:9px 0 0;
  color:#aebfd4;
  font-size:14px;
  line-height:1.48;
}

.iq-progress-status-card{
  min-width:176px;
  padding:14px;
  border-radius:20px;
  text-align:right;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.09);
}

.iq-progress-status-card span{
  display:block;
  color:#90a9c5;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
}

.iq-progress-status-card b{
  display:block;
  margin-top:6px;
  color:#c9ffdf;
  font-size:20px;
  line-height:1.1;
}

.iq-progress-overview{
  display:grid;
  grid-template-columns:1.35fr .8fr .8fr;
  gap:10px;
  margin-bottom:10px;
}

.iq-progress-team,
.iq-progress-main-card{
  min-height:118px;
  padding:15px;
  border-radius:21px;
  background:
    radial-gradient(circle at 100% 0%,rgba(70,216,255,.10),transparent 35%),
    rgba(7,21,38,.92);
  border:1px solid rgba(120,180,255,.16);
}

.iq-progress-team{
  display:flex;
  align-items:center;
  gap:13px;
}

.iq-progress-avatar{
  width:76px;
  height:76px;
  flex:0 0 auto;
  border-radius:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:42px;
  background:
    radial-gradient(circle at 50% 42%,rgba(70,216,255,.22),transparent 48%),
    rgba(255,255,255,.065);
  border:1px solid rgba(120,180,255,.22);
  overflow:hidden;
}

.iq-progress-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.iq-progress-team span,
.iq-progress-main-card span,
.iq-progress-campaign-card span{
  display:block;
  color:#90a9c5;
  font-size:11px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.25px;
}

.iq-progress-team h3{
  margin:5px 0 4px;
  color:#fff;
  font-size:22px;
  line-height:1.12;
}

.iq-progress-team p,
.iq-progress-main-card p{
  margin:0;
  color:#9fb5cf;
  font-size:12.5px;
  line-height:1.35;
}

.iq-progress-main-card b{
  display:block;
  margin:7px 0 5px;
  color:#fff;
  font-size:clamp(32px,4vw,44px);
  line-height:1;
}

.iq-progress-campaign-card{
  display:grid;
  grid-template-columns:230px minmax(0,1fr);
  align-items:center;
  gap:14px;
  padding:14px 15px;
  margin-bottom:12px;
  border-radius:21px;
  background:
    radial-gradient(circle at 100% 0%,rgba(86,243,154,.10),transparent 35%),
    rgba(7,21,38,.92);
  border:1px solid rgba(120,180,255,.16);
}

.iq-progress-campaign-card b{
  display:block;
  margin-top:5px;
  color:#fff;
  font-size:18px;
  line-height:1.2;
}

.iq-progress-bar{
  height:18px;
  border-radius:999px;
  overflow:hidden;
  background:rgba(5,18,34,.84);
  border:1px solid rgba(120,180,255,.18);
  box-shadow:inset 0 0 10px rgba(0,0,0,.28);
}

.iq-progress-bar > div{
  height:100%;
  width:0%;
  border-radius:999px;
  background:linear-gradient(90deg,#22c1ff,#56f39a);
  box-shadow:0 0 14px rgba(86,243,154,.20);
  transition:width .35s ease;
}

#progressScreen .iq-progress-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}

#progressScreen .iq-progress-metric{
  position:relative;
  overflow:hidden;
  min-height:100px;
  display:flex;
  align-items:flex-start;
  gap:11px;
  padding:13px !important;
  border-radius:19px !important;
  background:
    radial-gradient(circle at 100% 0%,rgba(70,216,255,.08),transparent 34%),
    rgba(7,21,38,.92) !important;
  border:1px solid rgba(120,180,255,.16) !important;
}

.iq-progress-metric::after{
  content:"";
  position:absolute;
  inset:auto -35px -45px auto;
  width:120px;
  height:120px;
  border-radius:50%;
  background:rgba(70,216,255,.055);
  pointer-events:none;
}

.iq-progress-metric-icon{
  position:relative;
  z-index:2;
  width:38px;
  height:38px;
  flex:0 0 auto;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.075);
}

.iq-progress-metric > div:last-child{
  position:relative;
  z-index:2;
  min-width:0;
}

.iq-progress-metric span{
  display:block;
  color:#90a9c5;
  font-size:11px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.22px;
}

.iq-progress-metric b{
  display:block;
  margin:4px 0 3px;
  color:#fff;
  font-size:24px !important;
  line-height:1.08;
}

.iq-progress-metric small{
  display:block;
  color:#9fb5cf;
  font-size:11.5px;
  line-height:1.3;
}

.iq-progress-achievements{
  margin-top:12px;
  padding:16px;
  border-radius:22px;
  background:
    radial-gradient(circle at 100% 0%,rgba(255,209,102,.10),transparent 32%),
    rgba(7,21,38,.92);
  border:1px solid rgba(120,180,255,.16);
}

.iq-progress-achievements-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:12px;
}

.iq-progress-achievements h3{
  margin:0;
  color:#fff;
  font-size:20px;
}

.iq-progress-achievements p{
  margin:5px 0 0;
  color:#9fb5cf;
  font-size:12.5px;
}

#progressScreen .iq-progress-badges{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

#progressScreen .iq-progress-badges .badge{
  min-height:42px;
  display:flex;
  align-items:center;
  border-radius:14px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.08);
}

@media(max-width:980px){
  .iq-progress-overview{
    grid-template-columns:1fr;
  }

  .iq-progress-campaign-card{
    grid-template-columns:1fr;
  }

  #progressScreen .iq-progress-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  #progressScreen .iq-progress-badges{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:620px){
  #progressScreen.iq-progress-pro{
    padding:16px;
  }

  .iq-progress-hero{
    flex-direction:column;
    padding:17px;
  }

  .iq-progress-status-card{
    min-width:0;
    width:100%;
    text-align:left;
  }

  .iq-progress-team{
    align-items:flex-start;
  }

  .iq-progress-avatar{
    width:62px;
    height:62px;
    border-radius:20px;
    font-size:34px;
  }

  #progressScreen .iq-progress-grid,
  #progressScreen .iq-progress-badges{
    grid-template-columns:1fr;
  }

  .iq-progress-achievements-head{
    flex-direction:column;
  }

  .iq-progress-achievements-head .btn{
    width:100%;
  }
}

/* =========================================================
   V47.1 · Misiones y recompensas profesionales
   Mejora solo las pantallas de Misiones y Recompensas.
========================================================= */

#missionsScreen.iq-missions-pro,
#rewardsScreen.iq-rewards-pro{
  position:relative;
  overflow:hidden;
  padding:22px;
  border-radius:28px;
  background:
    radial-gradient(circle at 10% 0%,rgba(70,216,255,.16),transparent 36%),
    radial-gradient(circle at 92% 8%,rgba(255,209,102,.11),transparent 34%),
    linear-gradient(180deg,rgba(8,25,46,.96),rgba(4,13,27,.98));
  border:1px solid rgba(120,180,255,.20);
  box-shadow:0 18px 46px rgba(0,0,0,.24);
}

.iq-mission-hero,
.iq-reward-hero{
  position:relative;
  overflow:hidden;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  padding:20px;
  margin-bottom:12px;
  border-radius:24px;
  background:
    radial-gradient(circle at 0% 0%,rgba(70,216,255,.15),transparent 38%),
    linear-gradient(180deg,rgba(12,31,55,.92),rgba(6,18,34,.94));
  border:1px solid rgba(120,180,255,.18);
}

.iq-mission-hero::after,
.iq-reward-hero::after{
  content:"";
  position:absolute;
  inset:0;
  opacity:.20;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:32px 32px;
}

.iq-mission-hero > *,
.iq-reward-hero > *{
  position:relative;
  z-index:2;
}

.iq-mission-chip,
.iq-reward-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
  padding:7px 11px;
  border-radius:999px;
  font-size:11px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.35px;
}

.iq-mission-chip{
  color:#ffe4a3;
  background:rgba(255,209,102,.10);
  border:1px solid rgba(255,209,102,.22);
}

.iq-reward-chip{
  color:#c9ffdf;
  background:rgba(86,243,154,.10);
  border:1px solid rgba(86,243,154,.22);
}

.iq-mission-hero h2,
.iq-reward-hero h2{
  margin:0;
  color:#fff;
  font-size:clamp(30px,3.8vw,48px);
  line-height:1.03;
  letter-spacing:-.045em;
}

.iq-mission-hero p,
.iq-reward-hero p{
  max-width:720px;
  margin:9px 0 0;
  color:#aebfd4;
  font-size:14px;
  line-height:1.48;
}

.iq-mission-hero-action,
.iq-reward-hero-action{
  display:flex;
  justify-content:flex-end;
  min-width:170px;
}

.iq-mission-summary,
.iq-reward-summary{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:10px !important;
  margin-bottom:12px !important;
}

.iq-mission-stat,
.iq-reward-stat{
  min-height:88px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:13px !important;
  border-radius:20px !important;
  background:
    radial-gradient(circle at 100% 0%,rgba(70,216,255,.09),transparent 35%),
    rgba(7,21,38,.92) !important;
  border:1px solid rgba(120,180,255,.16) !important;
}

.iq-mission-stat > span,
.iq-reward-stat > span{
  width:42px;
  height:42px;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:15px;
  font-size:24px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.075);
}

.iq-mission-stat small,
.iq-reward-stat small{
  display:block;
  color:#90a9c5;
  font-size:11px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.22px;
}

.iq-mission-stat b,
.iq-reward-stat b{
  display:block;
  margin:4px 0 2px;
  color:#fff;
  font-size:25px !important;
  line-height:1;
}

.iq-mission-stat em,
.iq-reward-stat em{
  display:block;
  color:#9fb5cf;
  font-style:normal;
  font-size:11.5px;
  line-height:1.25;
}

.iq-mission-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:12px;
  align-items:start;
}

.iq-mission-grid{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:12px !important;
}

.iq-mission-card{
  position:relative;
  overflow:hidden;
  min-height:250px;
  padding:16px !important;
  border-radius:22px !important;
  background:
    radial-gradient(circle at 100% 0%,rgba(70,216,255,.09),transparent 35%),
    rgba(7,21,38,.92) !important;
  border:1px solid rgba(120,180,255,.16) !important;
  box-shadow:0 12px 28px rgba(0,0,0,.18);
}

.iq-mission-card::after{
  content:"";
  position:absolute;
  inset:auto -40px -55px auto;
  width:135px;
  height:135px;
  border-radius:50%;
  background:rgba(70,216,255,.055);
  pointer-events:none;
}

.iq-mission-card.claimable{
  border-color:rgba(255,209,102,.38) !important;
  box-shadow:0 16px 34px rgba(0,0,0,.22),0 0 24px rgba(255,209,102,.08);
}

.iq-mission-card.done{
  border-color:rgba(86,243,154,.34) !important;
}

.iq-mission-card-top{
  position:relative;
  z-index:2;
  display:flex;
  gap:11px;
  align-items:flex-start;
  margin-bottom:10px;
}

.iq-mission-icon{
  width:48px;
  height:48px;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:17px;
  font-size:28px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
}

.iq-mission-card h3{
  margin:0 0 5px !important;
  color:#fff;
  font-size:19px !important;
  line-height:1.13;
  letter-spacing:-.02em;
}

.iq-mission-status{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:4px 8px;
  border-radius:999px;
  color:#dff7ff;
  background:rgba(70,216,255,.08);
  border:1px solid rgba(70,216,255,.15);
  font-size:10.5px;
  font-weight:950;
}

.iq-mission-card p{
  position:relative;
  z-index:2;
  margin:0 0 12px !important;
  color:#aebfd4 !important;
  font-size:13px;
  line-height:1.42;
}

.iq-mission-progress{
  position:relative;
  z-index:2;
  height:12px !important;
  margin:9px 0 7px !important;
  background:rgba(5,18,34,.84) !important;
  border:1px solid rgba(120,180,255,.18) !important;
}

.iq-mission-progress > div{
  background:linear-gradient(90deg,#22c1ff,#56f39a) !important;
  box-shadow:0 0 13px rgba(86,243,154,.18);
}

.iq-mission-progress-line{
  position:relative;
  z-index:2;
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
  color:#90a9c5;
  font-size:11.5px;
  font-weight:900;
}

.iq-mission-progress-line b{
  color:#eaf8ff;
}

.iq-mission-reward{
  position:relative;
  z-index:2;
  min-height:42px;
  padding:9px 10px;
  margin:8px 0 12px !important;
  border-radius:15px;
  color:#eaf8ff !important;
  background:rgba(255,209,102,.075);
  border:1px solid rgba(255,209,102,.14);
  font-size:12px !important;
  line-height:1.35;
}

.iq-mission-card .btn{
  position:relative;
  z-index:2;
  width:100%;
  min-height:40px;
  border-radius:15px;
}

.iq-secret-panel{
  position:sticky;
  top:12px;
  padding:18px !important;
  border-radius:24px !important;
  background:
    radial-gradient(circle at 50% 0%,rgba(167,124,255,.15),transparent 42%),
    rgba(7,21,38,.94) !important;
  border:1px solid rgba(167,124,255,.22) !important;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}

.iq-secret-head span{
  display:inline-flex;
  margin-bottom:8px;
  padding:6px 9px;
  border-radius:999px;
  color:#d8ccff;
  background:rgba(167,124,255,.10);
  border:1px solid rgba(167,124,255,.18);
  font-size:10.5px;
  font-weight:950;
  text-transform:uppercase;
}

.iq-secret-head h3{
  margin:0 0 8px !important;
  color:#fff;
  font-size:22px;
}

.iq-secret-head p{
  margin:0 0 14px !important;
  color:#aebfd4 !important;
  font-size:13px;
  line-height:1.45;
}

.iq-fragment-row{
  justify-content:center;
  gap:10px !important;
  margin:14px 0 !important;
}

.iq-secret-gate{
  margin-top:12px;
  padding:13px;
  border-radius:18px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.08);
}

.iq-secret-gate .btn{
  width:100%;
  margin-top:10px;
}

.iq-chest-legend{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:8px !important;
  margin-top:12px !important;
}

.iq-chest-legend div{
  padding:10px 11px !important;
  border-radius:16px !important;
  background:rgba(255,255,255,.045) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  color:#d9e9ff;
  font-size:12px;
  line-height:1.35;
}

/* Recompensas */
.iq-reward-grid{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:12px !important;
}

.iq-reward-card{
  min-height:270px;
  padding:16px !important;
  border-radius:22px !important;
  background:
    radial-gradient(circle at 100% 0%,rgba(86,243,154,.08),transparent 35%),
    rgba(7,21,38,.92) !important;
  border:1px solid rgba(120,180,255,.16) !important;
  box-shadow:0 12px 28px rgba(0,0,0,.18);
}

.iq-reward-card h3{
  margin:0 0 5px !important;
  color:#fff;
  font-size:20px;
}

.iq-reward-card > p{
  margin:0 0 12px;
  color:#9fb5cf;
  font-size:12.5px;
  line-height:1.35;
}

.iq-reward-item{
  display:flex !important;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  padding:11px !important;
  margin-bottom:8px !important;
  border-radius:16px !important;
  background:rgba(255,255,255,.045) !important;
  border:1px solid rgba(255,255,255,.08) !important;
}

.iq-reward-item b{
  display:block;
  color:#fff;
  font-size:13.5px;
  line-height:1.2;
}

.iq-reward-item small{
  display:block;
  margin-top:4px;
  color:#9fb5cf;
  font-size:11.5px;
  line-height:1.3;
}

.iq-reward-item time{
  color:#90a9c5;
  font-size:10.5px;
  white-space:nowrap;
}

.iq-reward-ok{
  color:#c9ffdf;
  font-weight:950;
}

.iq-secret-reward-box{
  padding:13px;
  border-radius:18px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.08);
}

.iq-secret-reward-box p{
  margin:10px 0 12px;
  color:#aebfd4;
  font-size:13px;
  line-height:1.45;
}

.iq-secret-reward-box .btn{
  width:100%;
}

.iq-reward-badges{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}

.iq-reward-badges .badge{
  min-height:42px;
  display:flex;
  align-items:center;
  border-radius:14px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.08);
}

.iq-empty-state{
  display:block;
  padding:14px;
  border-radius:17px;
  color:#aebfd4;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.08);
  font-size:13px;
  line-height:1.45;
}

@media(max-width:1080px){
  .iq-mission-layout{
    grid-template-columns:1fr;
  }

  .iq-secret-panel{
    position:relative;
    top:auto;
  }

  .iq-chest-legend{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media(max-width:900px){
  .iq-mission-summary,
  .iq-reward-summary{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  .iq-mission-grid,
  .iq-reward-grid{
    grid-template-columns:1fr !important;
  }
}

@media(max-width:620px){
  #missionsScreen.iq-missions-pro,
  #rewardsScreen.iq-rewards-pro{
    padding:16px;
  }

  .iq-mission-hero,
  .iq-reward-hero{
    flex-direction:column;
    padding:17px;
  }

  .iq-mission-hero-action,
  .iq-reward-hero-action{
    min-width:0;
    width:100%;
  }

  .iq-mission-hero-action .btn,
  .iq-reward-hero-action .btn{
    width:100%;
  }

  .iq-mission-summary,
  .iq-reward-summary{
    grid-template-columns:1fr !important;
  }

  .iq-chest-legend{
    grid-template-columns:1fr !important;
  }

  .iq-reward-badges{
    grid-template-columns:1fr !important;
  }
}

/* =========================================================
   V47.2 · Tienda profesional
   Mejora solo la pantalla Tienda / Taller de mejoras.
========================================================= */

#shopScreen.iq-shop-pro{
  position:relative;
  overflow:hidden;
  padding:22px;
  border-radius:28px;
  background:
    radial-gradient(circle at 10% 0%,rgba(70,216,255,.16),transparent 36%),
    radial-gradient(circle at 92% 8%,rgba(255,209,102,.13),transparent 34%),
    linear-gradient(180deg,rgba(8,25,46,.96),rgba(4,13,27,.98));
  border:1px solid rgba(120,180,255,.20);
  box-shadow:0 18px 46px rgba(0,0,0,.24);
}

.iq-shop-hero{
  position:relative;
  overflow:hidden;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  padding:20px;
  margin-bottom:12px;
  border-radius:24px;
  background:
    radial-gradient(circle at 0% 0%,rgba(70,216,255,.15),transparent 38%),
    linear-gradient(180deg,rgba(12,31,55,.92),rgba(6,18,34,.94));
  border:1px solid rgba(120,180,255,.18);
}

.iq-shop-hero::after{
  content:"";
  position:absolute;
  inset:0;
  opacity:.20;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:32px 32px;
}

.iq-shop-hero > *{
  position:relative;
  z-index:2;
}

.iq-shop-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
  padding:7px 11px;
  border-radius:999px;
  color:#ffe4a3;
  background:rgba(255,209,102,.10);
  border:1px solid rgba(255,209,102,.22);
  font-size:11px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.35px;
}

.iq-shop-hero h2{
  margin:0;
  color:#fff;
  font-size:clamp(30px,3.8vw,48px);
  line-height:1.03;
  letter-spacing:-.045em;
}

.iq-shop-hero p{
  max-width:720px;
  margin:9px 0 0;
  color:#aebfd4;
  font-size:14px;
  line-height:1.48;
}

.iq-shop-wallet{
  min-width:190px;
  padding:15px;
  border-radius:21px;
  text-align:right;
  background:rgba(255,209,102,.075);
  border:1px solid rgba(255,209,102,.18);
  box-shadow:0 0 24px rgba(255,209,102,.06);
}

.iq-shop-wallet span{
  display:block;
  color:#ffe4a3;
  font-size:11px;
  font-weight:950;
  text-transform:uppercase;
}

.iq-shop-wallet b{
  display:block;
  margin-top:6px;
  color:#fff;
  font-size:30px;
  line-height:1;
}

.iq-shop-wallet small{
  display:block;
  margin-top:6px;
  color:#aebfd4;
  font-size:11px;
}

.iq-shop-summary{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin-bottom:12px;
}

.iq-shop-summary-card{
  padding:13px;
  border-radius:20px;
  background:
    radial-gradient(circle at 100% 0%,rgba(70,216,255,.09),transparent 35%),
    rgba(7,21,38,.92);
  border:1px solid rgba(120,180,255,.16);
}

.iq-shop-summary-card b{
  display:block;
  color:#fff;
  font-size:25px;
  line-height:1;
}

.iq-shop-summary-card span{
  display:block;
  margin-top:7px;
  color:#90a9c5;
  font-size:11.5px;
  font-weight:950;
  text-transform:uppercase;
}

.iq-shop-recommendation{
  background:
    radial-gradient(circle at 100% 0%,rgba(86,243,154,.11),transparent 35%),
    rgba(7,21,38,.92);
  border-color:rgba(86,243,154,.20);
}

#shopScreen .iq-shop-grid{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:12px !important;
}

#shopScreen .iq-shop-item{
  position:relative;
  overflow:hidden;
  min-height:246px;
  padding:16px !important;
  border-radius:22px !important;
  background:
    radial-gradient(circle at 100% 0%,rgba(70,216,255,.09),transparent 35%),
    rgba(7,21,38,.92) !important;
  border:1px solid rgba(120,180,255,.16) !important;
  box-shadow:0 12px 28px rgba(0,0,0,.18);
}

#shopScreen .iq-shop-item::after{
  content:"";
  position:absolute;
  inset:auto -42px -56px auto;
  width:140px;
  height:140px;
  border-radius:50%;
  background:rgba(255,209,102,.06);
  pointer-events:none;
}

#shopScreen .iq-shop-item.available{
  border-color:rgba(86,243,154,.25) !important;
}

#shopScreen .iq-shop-item.locked{
  opacity:.78;
}

#shopScreen .iq-shop-item.maxed{
  border-color:rgba(86,243,154,.36) !important;
  box-shadow:0 12px 28px rgba(0,0,0,.18),0 0 24px rgba(86,243,154,.08);
}

.iq-shop-item-head{
  position:relative;
  z-index:2;
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin-bottom:11px;
}

.iq-shop-icon{
  width:50px;
  height:50px;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:18px;
  font-size:29px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
}

#shopScreen .iq-shop-item h3{
  margin:0 0 5px !important;
  color:#fff;
  font-size:20px;
  line-height:1.12;
}

.iq-shop-item-head span{
  display:inline-flex;
  min-height:24px;
  align-items:center;
  padding:4px 8px;
  border-radius:999px;
  color:#dff7ff;
  background:rgba(70,216,255,.08);
  border:1px solid rgba(70,216,255,.15);
  font-size:10.5px;
  font-weight:950;
}

#shopScreen .iq-shop-item p{
  position:relative;
  z-index:2;
  margin:0 0 12px !important;
  color:#aebfd4 !important;
  font-size:13px;
  line-height:1.42;
}

.iq-shop-level-line{
  position:relative;
  z-index:2;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  min-height:30px;
  padding:8px 10px;
  border-radius:15px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.08);
  color:#d9e9ff;
  font-size:12px;
  font-weight:950;
}

.shop-level-pips{
  display:flex;
  gap:4px;
}

.shop-level-pips i{
  width:9px;
  height:9px;
  border-radius:999px;
  display:block;
  background:rgba(255,255,255,.16);
}

.shop-level-pips i.on{
  background:#56f39a;
  box-shadow:0 0 8px rgba(86,243,154,.35);
}

.iq-shop-effect{
  position:relative;
  z-index:2;
  margin-top:9px;
  padding:9px 10px;
  border-radius:15px;
  color:#eaf8ff;
  background:rgba(70,216,255,.07);
  border:1px solid rgba(70,216,255,.13);
  font-size:12px;
  line-height:1.35;
  font-weight:850;
}

.iq-shop-advice{
  position:relative;
  z-index:2;
  margin-top:8px;
  color:#9fb5cf;
  font-size:12px;
  line-height:1.35;
}

.iq-shop-bottom{
  position:relative;
  z-index:2;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-top:13px;
}

.iq-shop-price{
  min-width:95px;
  color:#ffe4a3;
  font-size:13px;
  font-weight:900;
}

.iq-shop-price b{
  font-size:22px;
  color:#fff;
}

.iq-shop-bottom .btn{
  min-width:120px;
  min-height:40px;
  border-radius:15px;
  white-space:nowrap;
}

@media(max-width:980px){
  .iq-shop-summary{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  #shopScreen .iq-shop-grid{
    grid-template-columns:1fr !important;
  }
}

@media(max-width:620px){
  #shopScreen.iq-shop-pro{
    padding:16px;
  }

  .iq-shop-hero{
    flex-direction:column;
    padding:17px;
  }

  .iq-shop-wallet{
    min-width:0;
    width:100%;
    text-align:left;
  }

  .iq-shop-summary{
    grid-template-columns:1fr;
  }

  .iq-shop-bottom{
    flex-direction:column;
    align-items:stretch;
  }

  .iq-shop-bottom .btn{
    width:100%;
  }
}

/* =========================================================
   V47.2.1 · Tienda compacta
   Mantiene la tienda profesional, pero reduce recuadros
   para aprovechar mejor el espacio.
========================================================= */

#shopScreen.iq-shop-pro{
  padding:18px !important;
}

/* Encabezado más bajo */
#shopScreen .iq-shop-hero{
  padding:16px 18px !important;
  margin-bottom:9px !important;
  border-radius:21px !important;
}

#shopScreen .iq-shop-chip{
  margin-bottom:7px !important;
  padding:6px 9px !important;
  font-size:10px !important;
}

#shopScreen .iq-shop-hero h2{
  font-size:clamp(27px,3.2vw,40px) !important;
}

#shopScreen .iq-shop-hero p{
  margin-top:6px !important;
  font-size:13px !important;
  line-height:1.38 !important;
}

/* Saldo más compacto */
#shopScreen .iq-shop-wallet{
  min-width:165px !important;
  padding:12px !important;
  border-radius:18px !important;
}

#shopScreen .iq-shop-wallet b{
  font-size:25px !important;
}

#shopScreen .iq-shop-wallet small{
  margin-top:4px !important;
}

/* Resumen más chico */
#shopScreen .iq-shop-summary{
  gap:8px !important;
  margin-bottom:9px !important;
}

#shopScreen .iq-shop-summary-card{
  padding:10px 12px !important;
  border-radius:17px !important;
}

#shopScreen .iq-shop-summary-card b{
  font-size:21px !important;
}

#shopScreen .iq-shop-summary-card span{
  margin-top:5px !important;
  font-size:10.5px !important;
}

/* Tarjetas de la tienda más compactas */
#shopScreen .iq-shop-grid{
  gap:9px !important;
}

#shopScreen .iq-shop-item{
  min-height:205px !important;
  padding:13px !important;
  border-radius:19px !important;
}

#shopScreen .iq-shop-item-head{
  gap:10px !important;
  margin-bottom:8px !important;
}

#shopScreen .iq-shop-icon{
  width:43px !important;
  height:43px !important;
  border-radius:15px !important;
  font-size:25px !important;
}

#shopScreen .iq-shop-item h3{
  font-size:18px !important;
  margin-bottom:4px !important;
}

#shopScreen .iq-shop-item-head span{
  min-height:21px !important;
  padding:3px 7px !important;
  font-size:9.8px !important;
}

#shopScreen .iq-shop-item p{
  margin-bottom:9px !important;
  font-size:12.2px !important;
  line-height:1.32 !important;
}

#shopScreen .iq-shop-level-line{
  min-height:26px !important;
  padding:6px 9px !important;
  border-radius:13px !important;
  font-size:11px !important;
}

#shopScreen .shop-level-pips i{
  width:8px !important;
  height:8px !important;
}

#shopScreen .iq-shop-effect{
  margin-top:7px !important;
  padding:7px 9px !important;
  border-radius:13px !important;
  font-size:11.3px !important;
  line-height:1.28 !important;
}

#shopScreen .iq-shop-advice{
  margin-top:6px !important;
  font-size:11.2px !important;
  line-height:1.28 !important;
}

#shopScreen .iq-shop-bottom{
  margin-top:9px !important;
  gap:8px !important;
}

#shopScreen .iq-shop-price{
  min-width:82px !important;
  font-size:12px !important;
}

#shopScreen .iq-shop-price b{
  font-size:19px !important;
}

#shopScreen .iq-shop-bottom .btn{
  min-width:105px !important;
  min-height:36px !important;
  padding:8px 11px !important;
  border-radius:13px !important;
  font-size:12px !important;
}

/* En pantallas grandes mantiene buena densidad */
@media(min-width:1180px){
  #shopScreen .iq-shop-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

/* Responsive */
@media(max-width:620px){
  #shopScreen.iq-shop-pro{
    padding:14px !important;
  }

  #shopScreen .iq-shop-hero{
    padding:15px !important;
  }

  #shopScreen .iq-shop-wallet{
    width:100% !important;
  }

  #shopScreen .iq-shop-item{
    min-height:auto !important;
  }
}

/* =========================================================
   V47.2.2 · Tienda sin saldo superior
   Elimina visualmente el recuadro "Saldo disponible"
   del encabezado de tienda.
========================================================= */

#shopScreen .iq-shop-hero{
  align-items:center !important;
}

#shopScreen .iq-shop-hero > div:first-child{
  max-width:100% !important;
}

#shopScreen .iq-shop-wallet{
  display:none !important;
}

/* =========================================================
   V47.3 · Talentos profesional
   Mejora solo la pantalla Talentos / Árbol de habilidades.
========================================================= */

#treeScreen.iq-tree-pro{
  position:relative;
  overflow:hidden;
  padding:22px;
  border-radius:28px;
  background:
    radial-gradient(circle at 10% 0%,rgba(70,216,255,.16),transparent 36%),
    radial-gradient(circle at 92% 8%,rgba(167,124,255,.14),transparent 34%),
    linear-gradient(180deg,rgba(8,25,46,.96),rgba(4,13,27,.98));
  border:1px solid rgba(120,180,255,.20);
  box-shadow:0 18px 46px rgba(0,0,0,.24);
}

.iq-tree-hero{
  position:relative;
  overflow:hidden;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  padding:20px;
  margin-bottom:12px;
  border-radius:24px;
  background:
    radial-gradient(circle at 0% 0%,rgba(70,216,255,.15),transparent 38%),
    linear-gradient(180deg,rgba(12,31,55,.92),rgba(6,18,34,.94));
  border:1px solid rgba(120,180,255,.18);
}

.iq-tree-hero::after{
  content:"";
  position:absolute;
  inset:0;
  opacity:.20;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:32px 32px;
}

.iq-tree-hero > *{
  position:relative;
  z-index:2;
}

.iq-tree-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
  padding:7px 11px;
  border-radius:999px;
  color:#d8ccff;
  background:rgba(167,124,255,.10);
  border:1px solid rgba(167,124,255,.22);
  font-size:11px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.35px;
}

.iq-tree-hero h2{
  margin:0;
  color:#fff;
  font-size:clamp(30px,3.8vw,48px);
  line-height:1.03;
  letter-spacing:-.045em;
}

.iq-tree-hero p{
  max-width:720px;
  margin:9px 0 0;
  color:#aebfd4;
  font-size:14px;
  line-height:1.48;
}

.iq-tree-points{
  min-width:190px;
  padding:15px;
  border-radius:21px;
  text-align:right;
  background:rgba(167,124,255,.075);
  border:1px solid rgba(167,124,255,.20);
  box-shadow:0 0 24px rgba(167,124,255,.06);
}

.iq-tree-points span{
  display:block;
  color:#d8ccff;
  font-size:11px;
  font-weight:950;
  text-transform:uppercase;
}

.iq-tree-points b{
  display:block;
  margin-top:6px;
  color:#fff;
  font-size:30px;
  line-height:1;
}

.iq-tree-points small{
  display:block;
  margin-top:6px;
  color:#aebfd4;
  font-size:11px;
}

.iq-tree-summary{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-bottom:12px;
}

.iq-tree-summary-card{
  padding:13px;
  border-radius:20px;
  background:
    radial-gradient(circle at 100% 0%,rgba(70,216,255,.09),transparent 35%),
    rgba(7,21,38,.92);
  border:1px solid rgba(120,180,255,.16);
}

.iq-tree-summary-card b{
  display:block;
  color:#fff;
  font-size:25px;
  line-height:1;
}

.iq-tree-summary-card span{
  display:block;
  margin-top:7px;
  color:#90a9c5;
  font-size:11.5px;
  font-weight:950;
  text-transform:uppercase;
}

#treeScreen .iq-skilltree-pro{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:12px !important;
}

#treeScreen .iq-skill-node{
  position:relative;
  overflow:hidden;
  min-height:230px;
  padding:16px !important;
  border-radius:22px !important;
  background:
    radial-gradient(circle at 100% 0%,rgba(70,216,255,.08),transparent 35%),
    rgba(7,21,38,.92) !important;
  border:1px solid rgba(120,180,255,.16) !important;
  box-shadow:0 12px 28px rgba(0,0,0,.18);
}

#treeScreen .iq-skill-node::after{
  content:"";
  position:absolute;
  inset:auto -42px -56px auto;
  width:140px;
  height:140px;
  border-radius:50%;
  background:rgba(167,124,255,.06);
  pointer-events:none;
}

#treeScreen .iq-skill-node.unlocked{
  border-color:rgba(86,243,154,.28) !important;
  box-shadow:0 12px 28px rgba(0,0,0,.18),0 0 22px rgba(86,243,154,.06);
}

#treeScreen .iq-skill-node.locked{
  opacity:.60;
  filter:grayscale(.65);
}

#treeScreen .iq-skill-node.omega{
  border-color:rgba(255,209,102,.38) !important;
  box-shadow:0 12px 28px rgba(0,0,0,.18),0 0 26px rgba(255,209,102,.10);
}

.iq-skill-top{
  position:relative;
  z-index:2;
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin-bottom:11px;
}

.iq-skill-icon{
  width:48px;
  height:48px;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:17px;
  font-size:25px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
}

#treeScreen .iq-skill-node h3{
  margin:0 0 5px !important;
  color:#fff;
  font-size:19px !important;
  line-height:1.12;
}

.iq-skill-top span{
  display:inline-flex;
  min-height:24px;
  align-items:center;
  padding:4px 8px;
  border-radius:999px;
  color:#dff7ff;
  background:rgba(70,216,255,.08);
  border:1px solid rgba(70,216,255,.15);
  font-size:10.5px;
  font-weight:950;
}

#treeScreen .iq-skill-node p{
  position:relative;
  z-index:2;
  margin:0 0 12px !important;
  color:#aebfd4 !important;
  font-size:13px !important;
  line-height:1.42;
  min-height:38px;
}

.iq-skill-level-row{
  position:relative;
  z-index:2;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  min-height:34px;
  padding:8px 10px;
  border-radius:15px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.08);
}

.iq-skill-level-row > span{
  color:#90a9c5;
  font-size:11px;
  font-weight:950;
  text-transform:uppercase;
}

#treeScreen .iq-skill-level{
  display:flex !important;
  gap:5px !important;
  margin:0 !important;
}

#treeScreen .skill-pip{
  width:27px !important;
  height:18px !important;
  border-radius:999px !important;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.11) !important;
  color:rgba(255,255,255,.35);
  font-size:10px;
  font-weight:950;
}

#treeScreen .skill-pip.on{
  color:#fff;
  background:linear-gradient(90deg,#46d8ff,#a77cff) !important;
  box-shadow:0 0 10px rgba(70,216,255,.28);
}

#treeScreen .iq-skill-node.omega .skill-pip.on{
  background:linear-gradient(90deg,#ffd166,#a77cff) !important;
  box-shadow:0 0 12px rgba(255,209,102,.28);
}

.iq-skill-cost{
  position:relative;
  z-index:2;
  margin:9px 0 12px;
  padding:8px 10px;
  border-radius:14px;
  color:#eaf8ff;
  background:rgba(167,124,255,.065);
  border:1px solid rgba(167,124,255,.13);
  font-size:12px;
  line-height:1.35;
  font-weight:850;
}

#treeScreen .iq-skill-node .btn{
  position:relative;
  z-index:2;
  width:100%;
  min-height:40px;
  border-radius:15px;
}

/* Versión compacta para mantener buen espacio */
@media(min-width:1120px){
  #treeScreen .iq-skilltree-pro{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media(max-width:980px){
  .iq-tree-summary{
    grid-template-columns:1fr;
  }

  #treeScreen .iq-skilltree-pro{
    grid-template-columns:1fr !important;
  }
}

@media(max-width:620px){
  #treeScreen.iq-tree-pro{
    padding:16px;
  }

  .iq-tree-hero{
    flex-direction:column;
    padding:17px;
  }

  .iq-tree-points{
    min-width:0;
    width:100%;
    text-align:left;
  }

  #treeScreen .iq-skill-node{
    min-height:auto;
  }

  .iq-skill-level-row{
    flex-direction:column;
    align-items:flex-start;
  }
}

/* =========================================================
   V47.3.1 · Talentos compactos
   Mantiene el diseño profesional, pero reduce tamaños
   como en la tienda compacta.
========================================================= */

#treeScreen.iq-tree-pro{
  padding:18px !important;
}

/* Encabezado más compacto */
#treeScreen .iq-tree-hero{
  padding:16px 18px !important;
  margin-bottom:9px !important;
  border-radius:21px !important;
}

#treeScreen .iq-tree-chip{
  margin-bottom:7px !important;
  padding:6px 9px !important;
  font-size:10px !important;
}

#treeScreen .iq-tree-hero h2{
  font-size:clamp(27px,3.2vw,40px) !important;
}

#treeScreen .iq-tree-hero p{
  margin-top:6px !important;
  font-size:13px !important;
  line-height:1.38 !important;
}

/* Puntos disponibles más chico */
#treeScreen .iq-tree-points{
  min-width:165px !important;
  padding:12px !important;
  border-radius:18px !important;
}

#treeScreen .iq-tree-points b{
  font-size:25px !important;
}

#treeScreen .iq-tree-points small{
  margin-top:4px !important;
}

/* Resumen más compacto */
#treeScreen .iq-tree-summary{
  gap:8px !important;
  margin-bottom:9px !important;
}

#treeScreen .iq-tree-summary-card{
  padding:10px 12px !important;
  border-radius:17px !important;
}

#treeScreen .iq-tree-summary-card b{
  font-size:21px !important;
}

#treeScreen .iq-tree-summary-card span{
  margin-top:5px !important;
  font-size:10.5px !important;
}

/* Tarjetas de habilidades más chicas */
#treeScreen .iq-skilltree-pro{
  gap:9px !important;
}

#treeScreen .iq-skill-node{
  min-height:185px !important;
  padding:13px !important;
  border-radius:19px !important;
}

#treeScreen .iq-skill-top{
  gap:10px !important;
  margin-bottom:8px !important;
}

#treeScreen .iq-skill-icon{
  width:42px !important;
  height:42px !important;
  border-radius:15px !important;
  font-size:22px !important;
}

#treeScreen .iq-skill-node h3{
  font-size:17px !important;
  margin-bottom:4px !important;
}

#treeScreen .iq-skill-top span{
  min-height:21px !important;
  padding:3px 7px !important;
  font-size:9.8px !important;
}

#treeScreen .iq-skill-node p{
  min-height:28px !important;
  margin-bottom:9px !important;
  font-size:12.2px !important;
  line-height:1.32 !important;
}

#treeScreen .iq-skill-level-row{
  min-height:27px !important;
  padding:6px 9px !important;
  border-radius:13px !important;
}

#treeScreen .iq-skill-level-row > span{
  font-size:10.5px !important;
}

#treeScreen .iq-skill-level{
  gap:4px !important;
}

#treeScreen .skill-pip{
  width:22px !important;
  height:15px !important;
  font-size:8.8px !important;
}

#treeScreen .iq-skill-cost{
  margin:7px 0 9px !important;
  padding:7px 9px !important;
  border-radius:13px !important;
  font-size:11.2px !important;
  line-height:1.28 !important;
}

#treeScreen .iq-skill-node .btn{
  min-height:35px !important;
  padding:8px 11px !important;
  border-radius:13px !important;
  font-size:12px !important;
}

/* Mejor densidad en pantallas amplias */
@media(min-width:1180px){
  #treeScreen .iq-skilltree-pro{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media(max-width:620px){
  #treeScreen.iq-tree-pro{
    padding:14px !important;
  }

  #treeScreen .iq-tree-hero{
    padding:15px !important;
  }

  #treeScreen .iq-tree-points{
    width:100% !important;
  }

  #treeScreen .iq-skill-node{
    min-height:auto !important;
  }
}

/* =========================================================
   V47.4 · Evolución visual PRUEBA
   Mejora visual compacta de Evoluciones y Personalización.
   No cambia daño, preguntas, dificultad, tienda ni costos.
========================================================= */

#evolutionScreen.iq-evo-pro,
#customizationScreen.iq-custom-pro{
  position:relative;
  overflow:hidden;
  padding:18px;
  border-radius:28px;
  background:
    radial-gradient(circle at 10% 0%,rgba(70,216,255,.14),transparent 36%),
    radial-gradient(circle at 92% 8%,rgba(167,124,255,.12),transparent 34%),
    linear-gradient(180deg,rgba(8,25,46,.96),rgba(4,13,27,.98));
  border:1px solid rgba(120,180,255,.20);
  box-shadow:0 18px 46px rgba(0,0,0,.24);
}

.iq-evo-hero,
.iq-custom-hero{
  position:relative;
  overflow:hidden;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  padding:16px 18px;
  margin-bottom:9px;
  border-radius:21px;
  background:
    radial-gradient(circle at 0% 0%,rgba(70,216,255,.13),transparent 38%),
    linear-gradient(180deg,rgba(12,31,55,.92),rgba(6,18,34,.94));
  border:1px solid rgba(120,180,255,.18);
}

.iq-evo-hero::after,
.iq-custom-hero::after{
  content:"";
  position:absolute;
  inset:0;
  opacity:.18;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:32px 32px;
}

.iq-evo-hero > *,
.iq-custom-hero > *{
  position:relative;
  z-index:2;
}

.iq-evo-chip,
.iq-custom-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:7px;
  padding:6px 9px;
  border-radius:999px;
  color:#d8ccff;
  background:rgba(167,124,255,.10);
  border:1px solid rgba(167,124,255,.22);
  font-size:10px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.35px;
}

.iq-evo-hero h2,
.iq-custom-hero h2{
  margin:0;
  color:#fff;
  font-size:clamp(27px,3.2vw,40px);
  line-height:1.03;
  letter-spacing:-.045em;
}

.iq-evo-hero p,
.iq-custom-hero p{
  max-width:760px;
  margin:6px 0 0;
  color:#aebfd4;
  font-size:13px;
  line-height:1.38;
}

.iq-evo-current{
  min-width:165px;
  padding:12px;
  border-radius:18px;
  text-align:right;
  background:rgba(167,124,255,.075);
  border:1px solid rgba(167,124,255,.20);
}

.iq-evo-current span,
.iq-evo-current small{
  display:block;
  color:#aebfd4;
  font-size:11px;
}

.iq-evo-current b{
  display:block;
  margin:5px 0 4px;
  color:#fff;
  font-size:25px;
  line-height:1;
}

.iq-evo-summary,
.iq-custom-summary{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin-bottom:9px;
}

.iq-evo-summary-card,
.iq-custom-summary-card{
  padding:10px 12px;
  border-radius:17px;
  background:
    radial-gradient(circle at 100% 0%,rgba(70,216,255,.09),transparent 35%),
    rgba(7,21,38,.92);
  border:1px solid rgba(120,180,255,.16);
}

.iq-evo-summary-card b,
.iq-custom-summary-card b{
  display:block;
  color:#fff;
  font-size:21px;
  line-height:1;
}

.iq-evo-summary-card span,
.iq-custom-summary-card span{
  display:block;
  margin-top:5px;
  color:#90a9c5;
  font-size:10.5px;
  font-weight:950;
  text-transform:uppercase;
}

#evolutionScreen .iq-evolution-grid-pro{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:9px !important;
}

#evolutionScreen .iq-evo-card{
  position:relative;
  overflow:hidden;
  min-height:168px;
  padding:13px !important;
  border-radius:19px !important;
  background:
    radial-gradient(circle at 100% 0%,rgba(70,216,255,.08),transparent 35%),
    rgba(7,21,38,.92) !important;
  border:1px solid rgba(120,180,255,.16) !important;
  box-shadow:0 12px 28px rgba(0,0,0,.18);
}

#evolutionScreen .iq-evo-card.unlocked{
  border-color:rgba(86,243,154,.25) !important;
}

#evolutionScreen .iq-evo-card.selected{
  border-color:rgba(255,209,102,.38) !important;
  box-shadow:0 12px 28px rgba(0,0,0,.18),0 0 24px rgba(255,209,102,.09);
}

#evolutionScreen .iq-evo-card.locked{
  opacity:.60;
  filter:grayscale(.60);
}

.iq-evo-card-top{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-bottom:8px;
}

#evolutionScreen .iq-evo-icon{
  width:43px;
  height:43px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 !important;
  border-radius:15px;
  font-size:25px !important;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
}

#evolutionScreen .iq-evo-card h3{
  margin:0 0 4px !important;
  color:#fff;
  font-size:18px;
}

.iq-evo-card-top span{
  display:inline-flex;
  min-height:21px;
  align-items:center;
  padding:3px 7px;
  border-radius:999px;
  color:#dff7ff;
  background:rgba(70,216,255,.08);
  border:1px solid rgba(70,216,255,.15);
  font-size:9.8px;
  font-weight:950;
}

#evolutionScreen .iq-evo-card p{
  margin:0 0 9px !important;
  color:#aebfd4 !important;
  font-size:12.2px !important;
  line-height:1.32;
  min-height:32px;
}

.iq-evo-level-line{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  min-height:27px;
  padding:6px 9px;
  border-radius:13px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.08);
  color:#90a9c5;
  font-size:10.5px;
  font-weight:950;
  text-transform:uppercase;
}

.iq-evo-level-line b{
  color:#fff;
  font-size:12px;
}

.iq-evo-bottom{
  margin-top:9px;
}

.iq-evo-bottom .btn{
  width:100%;
  min-height:35px;
  padding:8px 11px;
  border-radius:13px;
  font-size:12px;
}

/* Personalización visual */
#customizationScreen .iq-custom-hero .btn{
  position:relative;
  z-index:2;
  min-width:155px;
  min-height:38px;
  border-radius:14px;
}

#customizationScreen .iq-custom-preview{
  margin:0 0 9px;
  padding:12px 14px;
  border-radius:17px;
  background:rgba(7,21,38,.92);
  border:1px solid rgba(120,180,255,.16);
}

#customizationScreen .iq-custom-preview strong{
  color:#fff;
  font-size:16px;
}

#customizationScreen .iq-custom-preview span{
  color:#aebfd4;
  font-size:12px;
}

.iq-custom-section{
  margin-top:9px;
  padding:12px;
  border-radius:19px;
  background:rgba(7,21,38,.62);
  border:1px solid rgba(120,180,255,.12);
}

.iq-custom-section-head{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:10px;
  margin-bottom:9px;
}

.iq-custom-section-head h3{
  margin:0;
  color:#fff;
  font-size:17px;
}

.iq-custom-section-head p{
  margin:0;
  color:#90a9c5;
  font-size:11.5px;
}

#customizationScreen .iq-cosmetic-grid-pro{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:8px !important;
}

#customizationScreen .iq-cosmetic-card{
  padding:11px !important;
  border-radius:17px !important;
  background:
    radial-gradient(circle at 100% 0%,rgba(70,216,255,.07),transparent 35%),
    rgba(5,17,32,.94) !important;
  border:1px solid rgba(120,180,255,.14) !important;
  min-height:150px;
}

#customizationScreen .iq-cosmetic-card.selected{
  border-color:rgba(86,243,154,.32) !important;
  box-shadow:0 0 20px rgba(86,243,154,.08);
}

#customizationScreen .iq-cosmetic-card.locked{
  opacity:.58;
  filter:grayscale(.60);
}

.iq-cosmetic-top{
  display:flex;
  gap:9px;
  align-items:flex-start;
  margin-bottom:7px;
}

#customizationScreen .iq-cosmetic-icon{
  width:38px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 !important;
  border-radius:14px;
  font-size:21px !important;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
}

#customizationScreen .iq-cosmetic-card h4{
  margin:0 0 4px !important;
  color:#fff;
  font-size:14px;
  line-height:1.15;
}

.iq-cosmetic-top span{
  display:inline-flex;
  min-height:20px;
  align-items:center;
  padding:3px 6px;
  border-radius:999px;
  color:#dff7ff;
  background:rgba(70,216,255,.08);
  border:1px solid rgba(70,216,255,.15);
  font-size:9.4px;
  font-weight:950;
}

#customizationScreen .iq-cosmetic-card p{
  margin:0 0 7px !important;
  color:#aebfd4 !important;
  font-size:11.3px !important;
  line-height:1.28;
  min-height:30px;
}

.iq-cosmetic-req{
  margin-bottom:8px;
  padding:6px 8px;
  border-radius:12px;
  color:#eaf8ff;
  background:rgba(167,124,255,.065);
  border:1px solid rgba(167,124,255,.13);
  font-size:10.7px;
  line-height:1.25;
  font-weight:850;
}

#customizationScreen .iq-cosmetic-card .btn{
  width:100%;
  min-height:33px;
  padding:7px 9px;
  border-radius:12px;
  font-size:11.5px;
}

@media(max-width:980px){
  #evolutionScreen .iq-evolution-grid-pro,
  #customizationScreen .iq-cosmetic-grid-pro{
    grid-template-columns:1fr !important;
  }

  .iq-evo-summary,
  .iq-custom-summary{
    grid-template-columns:1fr;
  }
}

@media(max-width:620px){
  #evolutionScreen.iq-evo-pro,
  #customizationScreen.iq-custom-pro{
    padding:14px;
  }

  .iq-evo-hero,
  .iq-custom-hero{
    flex-direction:column;
    padding:15px;
  }

  .iq-evo-current,
  #customizationScreen .iq-custom-hero .btn{
    width:100%;
    text-align:left;
  }

  .iq-custom-section-head{
    flex-direction:column;
    align-items:flex-start;
  }

  #evolutionScreen .iq-evo-card,
  #customizationScreen .iq-cosmetic-card{
    min-height:auto;
  }
}


/* =========================================================
   V47.4.1 · Sin evolución visual
   Se retiraron del menú y de la interfaz:
   - Evoluciones
   - Evolución visual
   Se conserva el código base para compatibilidad con partidas guardadas.
========================================================= */

/* =========================================================
   V47.5 · Ranking profesional
   Mejora solo la pantalla Ranking online.
========================================================= */

#rankingScreen.iq-rank-pro{
  position:relative;
  overflow:hidden;
  padding:18px;
  border-radius:28px;
  background:
    radial-gradient(circle at 10% 0%,rgba(70,216,255,.14),transparent 36%),
    radial-gradient(circle at 92% 8%,rgba(255,209,102,.12),transparent 34%),
    linear-gradient(180deg,rgba(8,25,46,.96),rgba(4,13,27,.98));
  border:1px solid rgba(120,180,255,.20);
  box-shadow:0 18px 46px rgba(0,0,0,.24);
}

.iq-rank-hero{
  position:relative;
  overflow:hidden;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  padding:16px 18px;
  margin-bottom:9px;
  border-radius:21px;
  background:
    radial-gradient(circle at 0% 0%,rgba(70,216,255,.13),transparent 38%),
    linear-gradient(180deg,rgba(12,31,55,.92),rgba(6,18,34,.94));
  border:1px solid rgba(120,180,255,.18);
}
.iq-rank-hero::after{
  content:"";
  position:absolute;
  inset:0;
  opacity:.18;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:32px 32px;
}
.iq-rank-hero>*{position:relative;z-index:2}
.iq-rank-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:7px;
  padding:6px 9px;
  border-radius:999px;
  color:#ffe4a3;
  background:rgba(255,209,102,.10);
  border:1px solid rgba(255,209,102,.22);
  font-size:10px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.35px;
}
.iq-rank-hero h2{
  margin:0;
  color:#fff;
  font-size:clamp(27px,3.2vw,40px);
  line-height:1.03;
  letter-spacing:-.045em;
}
.iq-rank-hero p{
  max-width:760px;
  margin:6px 0 0;
  color:#aebfd4;
  font-size:13px;
  line-height:1.38;
}
.iq-rank-status-card{
  min-width:170px;
  padding:12px;
  border-radius:18px;
  text-align:right;
  background:rgba(255,209,102,.075);
  border:1px solid rgba(255,209,102,.20);
}
.iq-rank-status-card span,
.iq-rank-status-card small{
  display:block;
  color:#aebfd4;
  font-size:11px;
}
.iq-rank-status-card b{
  display:block;
  margin:5px 0 4px;
  color:#fff;
  font-size:25px;
  line-height:1;
}
.iq-rank-filters{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:9px;
  margin-bottom:9px;
}
.iq-rank-filters>div{
  padding:11px;
  border-radius:18px;
  background:rgba(7,21,38,.72);
  border:1px solid rgba(120,180,255,.14);
}
.iq-rank-filter-label{
  display:block;
  margin-bottom:8px;
  color:#90a9c5;
  font-size:10.5px;
  font-weight:950;
  text-transform:uppercase;
}
.iq-rank-tool-row{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}
#rankingScreen .rank-choice{
  min-height:34px;
  padding:7px 10px;
  border-radius:999px;
  font-size:11.5px;
  font-weight:900;
  color:#dff3ff;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(120,180,255,.14);
}
#rankingScreen .rank-choice.active{
  color:#051321;
  background:linear-gradient(90deg,#46d8ff,#56f39a);
  border-color:transparent;
  box-shadow:0 0 18px rgba(70,216,255,.16);
}
.iq-rank-board{
  min-height:180px;
}
.iq-rank-loading,
.iq-rank-empty{
  padding:28px 16px;
  border-radius:20px;
  text-align:center;
  color:#aebfd4;
  background:rgba(7,21,38,.72);
  border:1px solid rgba(120,180,255,.14);
}
.iq-rank-empty div{font-size:46px;margin-bottom:8px}.iq-rank-empty h3{margin:0 0 7px;color:#fff}.iq-rank-empty p{margin:0;color:#aebfd4}.iq-rank-empty.error{border-color:rgba(255,159,67,.28)}
.iq-rank-summary{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin-bottom:9px;
}
.iq-rank-summary-card{
  padding:10px 12px;
  border-radius:17px;
  background:
    radial-gradient(circle at 100% 0%,rgba(70,216,255,.09),transparent 35%),
    rgba(7,21,38,.92);
  border:1px solid rgba(120,180,255,.16);
}
.iq-rank-summary-card b{display:block;color:#fff;font-size:21px;line-height:1}.iq-rank-summary-card span{display:block;margin-top:5px;color:#90a9c5;font-size:10.5px;font-weight:950;text-transform:uppercase}
.iq-rank-podium{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
  margin-bottom:9px;
}
.iq-rank-podium-card{
  position:relative;
  overflow:hidden;
  padding:14px;
  border-radius:19px;
  text-align:center;
  background:
    radial-gradient(circle at 50% 0%,rgba(255,209,102,.10),transparent 36%),
    rgba(7,21,38,.92);
  border:1px solid rgba(255,209,102,.18);
}
.iq-rank-podium-card.me{border-color:rgba(86,243,154,.34);box-shadow:0 0 22px rgba(86,243,154,.08)}
.iq-rank-medal-big{font-size:35px;margin-bottom:5px}.iq-rank-podium-card h3{margin:0 0 5px;color:#fff;font-size:16px}.iq-rank-podium-card strong{display:block;color:#ffe4a3;font-size:20px}.iq-rank-podium-card p{margin:6px 0 0;color:#aebfd4;font-size:11.5px}.iq-rank-you{position:absolute;top:9px;right:9px;padding:4px 7px;border-radius:999px;background:rgba(86,243,154,.16);border:1px solid rgba(86,243,154,.25);font-size:10px;font-weight:950;color:#d9ffe9}
.iq-rank-table-wrap{
  overflow:auto;
  border-radius:19px;
  border:1px solid rgba(120,180,255,.14);
  background:rgba(5,17,32,.78);
}
.iq-rank-table{
  width:100%;
  min-width:880px;
  border-collapse:collapse;
}
.iq-rank-table th{
  position:sticky;
  top:0;
  z-index:1;
  text-align:left;
  padding:10px;
  color:#9fb5cf;
  font-size:10.5px;
  font-weight:950;
  text-transform:uppercase;
  background:rgba(8,24,43,.98);
  border-bottom:1px solid rgba(120,180,255,.16);
}
.iq-rank-table td{
  padding:10px;
  border-bottom:1px solid rgba(120,180,255,.09);
  color:#eaf8ff;
  font-size:12.5px;
}
.iq-rank-table tr:hover td{background:rgba(70,216,255,.035)}
.iq-rank-table tr.rank-me td{background:rgba(86,243,154,.055)}
.iq-rank-table td small{display:block;margin-top:4px;color:#90a9c5;font-size:10.5px}
.rank-medal{font-weight:950;font-size:15px}.presence-dot{display:inline-block;width:8px;height:8px;border-radius:999px;margin-right:6px}.presence-online{background:#56f39a;box-shadow:0 0 10px rgba(86,243,154,.6)}.presence-recent{background:#ffd166}.presence-offline{background:#65758a}
.iq-rank-progress{min-width:110px}.iq-rank-progress span{display:block;margin-bottom:5px;font-weight:950}.iq-rank-progress div{height:8px;border-radius:999px;overflow:hidden;background:#15253a;border:1px solid rgba(120,180,255,.12)}.iq-rank-progress i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#46d8ff,#56f39a)}
.iq-rank-note{margin-top:9px;padding:10px 12px;border-radius:15px;color:#9fb5cf;font-size:11.5px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07)}
@media(max-width:980px){.iq-rank-filters{grid-template-columns:1fr}.iq-rank-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.iq-rank-podium{grid-template-columns:1fr}}
@media(max-width:620px){#rankingScreen.iq-rank-pro{padding:14px}.iq-rank-hero{flex-direction:column;padding:15px}.iq-rank-status-card{width:100%;text-align:left}.iq-rank-summary{grid-template-columns:1fr}}

/* =========================================================
   V47.6 · Configuración profesional
   Mejora solo la pantalla Configuración.
========================================================= */

#settingsScreen.iq-settings-pro{
  position:relative;
  overflow:hidden;
  padding:18px;
  border-radius:28px;
  background:
    radial-gradient(circle at 10% 0%,rgba(70,216,255,.14),transparent 36%),
    radial-gradient(circle at 92% 8%,rgba(86,243,154,.10),transparent 34%),
    linear-gradient(180deg,rgba(8,25,46,.96),rgba(4,13,27,.98));
  border:1px solid rgba(120,180,255,.20);
  box-shadow:0 18px 46px rgba(0,0,0,.24);
}

.iq-settings-hero{
  position:relative;
  overflow:hidden;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  padding:16px 18px;
  margin-bottom:9px;
  border-radius:21px;
  background:
    radial-gradient(circle at 0% 0%,rgba(70,216,255,.13),transparent 38%),
    linear-gradient(180deg,rgba(12,31,55,.92),rgba(6,18,34,.94));
  border:1px solid rgba(120,180,255,.18);
}

.iq-settings-hero::after{
  content:"";
  position:absolute;
  inset:0;
  opacity:.18;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:32px 32px;
}

.iq-settings-hero > *{
  position:relative;
  z-index:2;
}

.iq-settings-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:7px;
  padding:6px 9px;
  border-radius:999px;
  color:#bff7ff;
  background:rgba(70,216,255,.10);
  border:1px solid rgba(70,216,255,.22);
  font-size:10px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.35px;
}

.iq-settings-hero h2{
  margin:0;
  color:#fff;
  font-size:clamp(27px,3.2vw,40px);
  line-height:1.03;
  letter-spacing:-.045em;
}

.iq-settings-hero p{
  max-width:760px;
  margin:6px 0 0;
  color:#aebfd4;
  font-size:13px;
  line-height:1.38;
}

.iq-settings-status{
  min-width:165px;
  padding:12px;
  border-radius:18px;
  text-align:right;
  background:rgba(86,243,154,.07);
  border:1px solid rgba(86,243,154,.18);
}

.iq-settings-status span,
.iq-settings-status small{
  display:block;
  color:#aebfd4;
  font-size:11px;
}

.iq-settings-status b{
  display:block;
  margin:5px 0 4px;
  color:#fff;
  font-size:25px;
  line-height:1;
}

.iq-settings-summary{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin-bottom:9px;
}

.iq-settings-summary-card{
  padding:10px 12px;
  border-radius:17px;
  background:
    radial-gradient(circle at 100% 0%,rgba(70,216,255,.09),transparent 35%),
    rgba(7,21,38,.92);
  border:1px solid rgba(120,180,255,.16);
}

.iq-settings-summary-card b{
  display:block;
  color:#fff;
  font-size:21px;
  line-height:1;
}

.iq-settings-summary-card span{
  display:block;
  margin-top:5px;
  color:#90a9c5;
  font-size:10.5px;
  font-weight:950;
  text-transform:uppercase;
}

#settingsScreen .iq-settings-grid{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:9px !important;
}

#settingsScreen .iq-setting-card{
  position:relative;
  overflow:hidden;
  min-height:150px;
  padding:13px !important;
  border-radius:19px !important;
  background:
    radial-gradient(circle at 100% 0%,rgba(70,216,255,.08),transparent 35%),
    rgba(7,21,38,.92) !important;
  border:1px solid rgba(120,180,255,.16) !important;
  box-shadow:0 12px 28px rgba(0,0,0,.18);
}

.iq-setting-head{
  display:flex;
  gap:10px;
  align-items:flex-start;
  margin-bottom:10px;
}

.iq-setting-icon{
  width:42px;
  height:42px;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:15px;
  font-size:22px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
}

#settingsScreen .iq-setting-card h3{
  margin:0 0 4px !important;
  color:#fff;
  font-size:17px !important;
  line-height:1.12;
}

#settingsScreen .iq-setting-card p{
  margin:0 !important;
  color:#aebfd4 !important;
  font-size:12.2px !important;
  line-height:1.32;
}

#settingsScreen .iq-setting-actions{
  display:flex;
  flex-wrap:wrap;
  gap:7px !important;
  margin-top:8px;
}

#settingsScreen .setting-choice{
  min-height:35px;
  padding:8px 11px;
  border-radius:13px;
  font-size:12px;
  border:1px solid rgba(120,180,255,.18);
}

#settingsScreen .setting-choice.active{
  color:#03111f;
  background:linear-gradient(90deg,#56f39a,#46d8ff);
  border-color:transparent;
  box-shadow:0 0 18px rgba(86,243,154,.18);
  font-weight:950;
}

@media(max-width:980px){
  .iq-settings-summary{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  #settingsScreen .iq-settings-grid{
    grid-template-columns:1fr !important;
  }
}

@media(max-width:620px){
  #settingsScreen.iq-settings-pro{
    padding:14px;
  }

  .iq-settings-hero{
    flex-direction:column;
    padding:15px;
  }

  .iq-settings-status{
    width:100%;
    text-align:left;
  }

  .iq-settings-summary{
    grid-template-columns:1fr;
  }
}

/* =========================================================
   V47.7 · Pantalla final profesional
   Mejora solo el cierre de campaña / informe final.
========================================================= */

#endScreen.iq-end-pro{
  position:relative;
  overflow:hidden;
  padding:18px;
  border-radius:28px;
  background:
    radial-gradient(circle at 10% 0%,rgba(70,216,255,.15),transparent 36%),
    radial-gradient(circle at 92% 8%,rgba(255,209,102,.12),transparent 34%),
    linear-gradient(180deg,rgba(8,25,46,.96),rgba(4,13,27,.98));
  border:1px solid rgba(120,180,255,.20);
  box-shadow:0 18px 46px rgba(0,0,0,.24);
}

.iq-end-hero{
  position:relative;
  overflow:hidden;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  padding:16px 18px;
  margin-bottom:10px;
  border-radius:21px;
  background:
    radial-gradient(circle at 0% 0%,rgba(70,216,255,.13),transparent 38%),
    linear-gradient(180deg,rgba(12,31,55,.92),rgba(6,18,34,.94));
  border:1px solid rgba(120,180,255,.18);
}

.iq-end-hero::after{
  content:"";
  position:absolute;
  inset:0;
  opacity:.18;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:32px 32px;
}

.iq-end-hero > *{
  position:relative;
  z-index:2;
}

.iq-end-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:7px;
  padding:6px 9px;
  border-radius:999px;
  color:#ffe4a3;
  background:rgba(255,209,102,.10);
  border:1px solid rgba(255,209,102,.22);
  font-size:10px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.35px;
}

.iq-end-hero h2{
  margin:0;
  color:#fff;
  font-size:clamp(30px,3.4vw,44px);
  line-height:1.03;
  letter-spacing:-.045em;
}

.iq-end-hero p{
  max-width:760px;
  margin:6px 0 0;
  color:#aebfd4;
  font-size:13px;
  line-height:1.38;
}

.iq-end-status{
  min-width:168px;
  padding:12px;
  border-radius:18px;
  text-align:right;
  background:rgba(255,209,102,.075);
  border:1px solid rgba(255,209,102,.18);
}

.iq-end-status span,
.iq-end-status small{
  display:block;
  color:#aebfd4;
  font-size:11px;
}

.iq-end-status b{
  display:block;
  margin:5px 0 4px;
  color:#fff;
  font-size:25px;
  line-height:1;
}

.iq-end-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 290px;
  gap:12px;
  align-items:start;
}

.iq-end-main{
  display:grid;
  gap:10px;
}

.iq-end-card{
  padding:13px;
  border-radius:19px;
  background:
    radial-gradient(circle at 100% 0%,rgba(70,216,255,.08),transparent 35%),
    rgba(7,21,38,.92);
  border:1px solid rgba(120,180,255,.16);
  box-shadow:0 12px 28px rgba(0,0,0,.16);
}

.iq-end-card-head{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
  margin-bottom:10px;
}

.iq-end-card-head h3{
  margin:0 0 4px;
  color:#fff;
  font-size:17px;
}

.iq-end-card-head p{
  margin:0;
  color:#90a9c5;
  font-size:12px;
}

.iq-final-team-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  margin-bottom:10px;
}

.iq-final-avatar-summary{
  display:flex;
  gap:10px;
  align-items:center;
}

.iq-final-avatar-summary .team-avatar{
  width:54px;
  height:54px;
  border-radius:18px;
  font-size:27px;
}

.iq-final-avatar-summary .team-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:18px;
}

.iq-final-avatar-summary h3{
  margin:0;
  color:#fff;
  font-size:19px;
}

.iq-final-avatar-summary h3 + div{
  color:#aebfd4;
  font-size:12px;
}

.iq-final-grade{
  padding:9px 11px;
  border-radius:999px;
  color:#03111f;
  background:linear-gradient(90deg,#56f39a,#46d8ff);
  font-size:12px;
  font-weight:950;
  white-space:nowrap;
}

.iq-final-metrics{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:8px !important;
  margin:0 0 10px !important;
}

.iq-final-metrics .pro-final-metric{
  padding:10px !important;
  border-radius:15px !important;
  background:rgba(255,255,255,.045) !important;
  border:1px solid rgba(255,255,255,.08) !important;
}

.iq-final-metrics .pro-final-metric span{
  display:block;
  color:#90a9c5;
  font-size:10px;
  font-weight:950;
  text-transform:uppercase;
}

.iq-final-metrics .pro-final-metric b{
  display:block;
  margin-top:4px;
  color:#fff;
  font-size:20px;
  line-height:1;
}

.iq-final-learning-grid{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:8px !important;
  margin:0 0 10px !important;
}

.iq-final-learning-grid .final-learning-box{
  padding:11px !important;
  border-radius:16px !important;
  background:rgba(70,216,255,.06) !important;
  border:1px solid rgba(70,216,255,.12) !important;
  color:#dbeeff;
  font-size:12px;
  line-height:1.4;
}

.iq-final-learning-grid .final-learning-box b{
  display:block;
  margin-bottom:6px;
  color:#fff;
}

.iq-final-note{
  padding:11px !important;
  border-radius:16px !important;
  background:rgba(255,209,102,.06) !important;
  border:1px solid rgba(255,209,102,.14) !important;
  color:#d8eaff;
  font-size:12px;
  line-height:1.5;
}

#endScreen .topic-row{
  grid-template-columns:130px 1fr 46px;
  gap:8px;
  margin:7px 0;
  font-size:12px;
}

#endScreen .topic-bar{
  height:9px;
}

.iq-end-recommendation{
  margin-top:9px;
  padding:10px 11px;
  border-radius:15px;
  color:#eaf8ff;
  background:rgba(167,124,255,.075);
  border:1px solid rgba(167,124,255,.14);
  font-size:12px;
  line-height:1.45;
}

#endScreen .iq-end-survey-grid{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:8px !important;
}

#endScreen .survey-card{
  padding:11px !important;
  border-radius:16px !important;
  background:rgba(255,255,255,.045) !important;
  border:1px solid rgba(255,255,255,.08) !important;
}

#endScreen .starbtn{
  font-size:22px !important;
}

#endScreen textarea{
  min-height:98px;
  border-radius:15px;
}

.iq-end-comment-meta{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  margin-top:7px;
}

.iq-end-comment-meta small{
  color:#90a9c5;
}

.iq-end-comment-meta span{
  color:var(--green);
  font-size:13px;
}

.iq-end-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.iq-end-actions .btn{
  min-height:38px;
  border-radius:14px;
}

.iq-end-side{
  position:sticky;
  top:12px;
}

#endScreen .iq-end-omega-card{
  padding:14px !important;
  text-align:center;
  border-radius:22px;
  background:
    radial-gradient(circle at 50% 0%,rgba(255,209,102,.12),transparent 36%),
    rgba(7,21,38,.92);
  border:1px solid rgba(255,209,102,.15);
}

#endScreen .iq-end-omega-card .final-form{
  transform:scale(.78);
  transform-origin:center top;
  margin-bottom:-34px;
}

#endScreen .iq-end-omega-card h3{
  margin:0 0 5px;
  color:#fff;
  font-size:17px;
}

#endScreen .iq-end-omega-card p{
  margin:0;
  color:#90a9c5;
  font-size:12px;
  line-height:1.35;
}

@media(max-width:1100px){
  .iq-end-layout{
    grid-template-columns:1fr;
  }

  .iq-end-side{
    position:static;
  }

  #endScreen .iq-end-omega-card .final-form{
    transform:scale(.72);
    margin-bottom:-45px;
  }
}

@media(max-width:760px){
  .iq-final-metrics{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  .iq-final-learning-grid,
  #endScreen .iq-end-survey-grid{
    grid-template-columns:1fr !important;
  }

  .iq-final-team-row{
    flex-direction:column;
    align-items:flex-start;
  }

  .iq-final-grade{
    white-space:normal;
  }
}

@media(max-width:620px){
  #endScreen.iq-end-pro{
    padding:14px;
  }

  .iq-end-hero{
    flex-direction:column;
    padding:15px;
  }

  .iq-end-status{
    width:100%;
    text-align:left;
  }

  #endScreen .topic-row{
    grid-template-columns:1fr;
  }

  #endScreen .iq-end-omega-card{
    display:none;
  }
}

/* =========================================================
   V47.8 · Informe / Evidencia
   Pantalla nueva disponible en cualquier momento.
========================================================= */

#reportScreen.iq-report-pro{
  position:relative;
  overflow:hidden;
  padding:18px;
  border-radius:28px;
  background:
    radial-gradient(circle at 10% 0%,rgba(70,216,255,.14),transparent 36%),
    radial-gradient(circle at 92% 8%,rgba(167,124,255,.12),transparent 34%),
    linear-gradient(180deg,rgba(8,25,46,.96),rgba(4,13,27,.98));
  border:1px solid rgba(120,180,255,.20);
  box-shadow:0 18px 46px rgba(0,0,0,.24);
}

.iq-report-hero{
  position:relative;
  overflow:hidden;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  padding:16px 18px;
  margin-bottom:9px;
  border-radius:21px;
  background:
    radial-gradient(circle at 0% 0%,rgba(70,216,255,.13),transparent 38%),
    linear-gradient(180deg,rgba(12,31,55,.92),rgba(6,18,34,.94));
  border:1px solid rgba(120,180,255,.18);
}

.iq-report-hero::after{
  content:"";
  position:absolute;
  inset:0;
  opacity:.18;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:32px 32px;
}

.iq-report-hero > *{
  position:relative;
  z-index:2;
}

.iq-report-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:7px;
  padding:6px 9px;
  border-radius:999px;
  color:#d8ccff;
  background:rgba(167,124,255,.10);
  border:1px solid rgba(167,124,255,.22);
  font-size:10px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.35px;
}

.iq-report-hero h2{
  margin:0;
  color:#fff;
  font-size:clamp(28px,3.25vw,42px);
  line-height:1.03;
  letter-spacing:-.045em;
}

.iq-report-hero p{
  max-width:800px;
  margin:6px 0 0;
  color:#aebfd4;
  font-size:13px;
  line-height:1.38;
}

.iq-report-status{
  min-width:170px;
  padding:12px;
  border-radius:18px;
  text-align:right;
  background:rgba(167,124,255,.075);
  border:1px solid rgba(167,124,255,.18);
}

.iq-report-status span,
.iq-report-status small{
  display:block;
  color:#aebfd4;
  font-size:11px;
}

.iq-report-status b{
  display:block;
  margin:5px 0 4px;
  color:#fff;
  font-size:25px;
  line-height:1;
}

.iq-report-summary{
  display:grid;
  grid-template-columns:1.35fr .9fr .9fr;
  gap:9px;
  margin-bottom:9px;
}

.iq-report-team,
.iq-report-main-card{
  padding:12px;
  border-radius:18px;
  background:
    radial-gradient(circle at 100% 0%,rgba(70,216,255,.08),transparent 35%),
    rgba(7,21,38,.92);
  border:1px solid rgba(120,180,255,.16);
}

.iq-report-team{
  display:flex;
  gap:10px;
  align-items:center;
}

.iq-report-avatar{
  width:58px;
  height:58px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  font-size:28px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.09);
}

.iq-report-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.iq-report-team span,
.iq-report-main-card span{
  display:block;
  color:#90a9c5;
  font-size:10.5px;
  font-weight:950;
  text-transform:uppercase;
}

.iq-report-team h3,
.iq-report-main-card b{
  display:block;
  margin:4px 0 3px;
  color:#fff;
  font-size:22px;
  line-height:1;
}

.iq-report-team p,
.iq-report-main-card p{
  margin:0;
  color:#aebfd4;
  font-size:12px;
  line-height:1.32;
}

.iq-report-actions-top{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:9px;
}

.iq-report-actions-top .btn{
  min-height:38px;
  border-radius:14px;
}

.iq-report-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin-bottom:9px;
}

.iq-report-metric{
  padding:11px;
  border-radius:17px;
  background:rgba(7,21,38,.92);
  border:1px solid rgba(120,180,255,.16);
}

.iq-report-metric div{
  width:38px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  margin-bottom:7px;
  font-size:21px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
}

.iq-report-metric span{
  display:block;
  color:#90a9c5;
  font-size:10px;
  font-weight:950;
  text-transform:uppercase;
}

.iq-report-metric b{
  display:block;
  margin-top:4px;
  color:#fff;
  font-size:19px;
  line-height:1.1;
}

.iq-report-metric small{
  display:block;
  margin-top:4px;
  color:#aebfd4;
  font-size:11px;
  line-height:1.25;
}

.iq-report-card{
  margin-top:9px;
  padding:13px;
  border-radius:19px;
  background:
    radial-gradient(circle at 100% 0%,rgba(70,216,255,.08),transparent 35%),
    rgba(7,21,38,.92);
  border:1px solid rgba(120,180,255,.16);
  box-shadow:0 12px 28px rgba(0,0,0,.16);
}

.iq-report-card-head{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
  margin-bottom:10px;
}

.iq-report-card-head h3{
  margin:0 0 4px;
  color:#fff;
  font-size:17px;
}

.iq-report-card-head p{
  margin:0;
  color:#90a9c5;
  font-size:12px;
}

#reportScreen .topic-row{
  grid-template-columns:130px 1fr 46px;
  gap:8px;
  margin:7px 0;
  font-size:12px;
}

#reportScreen .topic-bar{
  height:9px;
}

.iq-report-recommendation{
  margin-top:9px;
  padding:10px 11px;
  border-radius:15px;
  color:#eaf8ff;
  background:rgba(167,124,255,.075);
  border:1px solid rgba(167,124,255,.14);
  font-size:12px;
  line-height:1.45;
}

#reportScreen .iq-report-survey-grid{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:8px !important;
}

#reportScreen .survey-card{
  padding:11px !important;
  border-radius:16px !important;
  background:rgba(255,255,255,.045) !important;
  border:1px solid rgba(255,255,255,.08) !important;
}

#reportScreen .starbtn{
  font-size:22px !important;
}

#reportScreen textarea{
  min-height:108px;
  border-radius:15px;
}

.iq-report-comment-meta{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  margin-top:7px;
}

.iq-report-comment-meta small{
  color:#90a9c5;
}

.iq-report-comment-meta span{
  color:var(--green);
  font-size:13px;
}

/* V47.8 · final limpio: el PDF y comentarios viven en Informe / Evidencia */
#endScreen.iq-end-clean .iq-end-actions .btn.good{
  background:linear-gradient(90deg,#46d8ff,#a77cff);
  color:#03111f;
  border-color:transparent;
}

@media(max-width:1000px){
  .iq-report-summary{
    grid-template-columns:1fr;
  }

  .iq-report-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  #reportScreen .iq-report-survey-grid{
    grid-template-columns:1fr !important;
  }
}

@media(max-width:620px){
  #reportScreen.iq-report-pro{
    padding:14px;
  }

  .iq-report-hero{
    flex-direction:column;
    padding:15px;
  }

  .iq-report-status{
    width:100%;
    text-align:left;
  }

  .iq-report-grid{
    grid-template-columns:1fr;
  }

  #reportScreen .topic-row{
    grid-template-columns:1fr;
  }
}

/* =========================================================
   V47.9 · Modo docente profesional
   Mejora solo acceso y panel docente.
========================================================= */

.iq-teacher-login-box,
.iq-teacher-box{
  width:min(760px,94vw);
  border-radius:26px !important;
  background:
    radial-gradient(circle at 8% 0%,rgba(70,216,255,.14),transparent 36%),
    radial-gradient(circle at 95% 0%,rgba(167,124,255,.12),transparent 35%),
    linear-gradient(180deg,rgba(8,25,46,.98),rgba(4,13,27,.99)) !important;
  border:1px solid rgba(120,180,255,.22) !important;
  box-shadow:0 25px 80px rgba(0,0,0,.42) !important;
}

.iq-teacher-login-box{
  width:min(520px,94vw);
}

.iq-teacher-login-head,
.iq-teacher-hero{
  position:relative;
  overflow:hidden;
  padding:16px 18px;
  margin-bottom:13px;
  border-radius:21px;
  background:
    radial-gradient(circle at 0% 0%,rgba(70,216,255,.14),transparent 38%),
    linear-gradient(180deg,rgba(12,31,55,.92),rgba(6,18,34,.94));
  border:1px solid rgba(120,180,255,.18);
}

.iq-teacher-hero{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
}

.iq-teacher-login-head::after,
.iq-teacher-hero::after{
  content:"";
  position:absolute;
  inset:0;
  opacity:.16;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:32px 32px;
}

.iq-teacher-login-head > *,
.iq-teacher-hero > *{
  position:relative;
  z-index:2;
}

.iq-teacher-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:7px;
  padding:6px 9px;
  border-radius:999px;
  color:#d8ccff;
  background:rgba(167,124,255,.10);
  border:1px solid rgba(167,124,255,.22);
  font-size:10px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.35px;
}

.iq-teacher-login-head h2,
.iq-teacher-hero h2{
  margin:0;
  color:#fff;
  font-size:clamp(25px,3vw,38px);
  line-height:1.03;
  letter-spacing:-.045em;
}

.iq-teacher-login-head p,
.iq-teacher-hero p{
  max-width:620px;
  margin:6px 0 0;
  color:#aebfd4;
  font-size:13px;
  line-height:1.38;
}

.iq-teacher-login-box label,
.iq-teacher-field label{
  color:#dbeeff;
  font-size:12px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.25px;
}

.iq-teacher-login-box input,
.iq-teacher-field select{
  margin-top:6px;
  border-radius:15px;
  border:1px solid rgba(120,180,255,.18);
  background:rgba(3,12,24,.86);
  color:#fff;
}

.iq-teacher-login-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}

.iq-teacher-login-actions .btn{
  min-height:38px;
  border-radius:14px;
}

.iq-teacher-feedback{
  margin-top:8px;
  min-height:22px;
}

.iq-teacher-status{
  min-width:158px;
  padding:12px;
  border-radius:18px;
  text-align:right;
  background:rgba(86,243,154,.07);
  border:1px solid rgba(86,243,154,.18);
}

.iq-teacher-status span,
.iq-teacher-status small{
  display:block;
  color:#aebfd4;
  font-size:11px;
}

.iq-teacher-status b{
  display:block;
  margin:5px 0 4px;
  color:#fff;
  font-size:24px;
  line-height:1;
}

.iq-teacher-layout{
  display:grid;
  grid-template-columns:1fr 280px;
  gap:10px;
  align-items:stretch;
}

.iq-teacher-controls,
.iq-teacher-preview{
  padding:13px;
  border-radius:19px;
  background:
    radial-gradient(circle at 100% 0%,rgba(70,216,255,.08),transparent 35%),
    rgba(7,21,38,.92);
  border:1px solid rgba(120,180,255,.16);
  box-shadow:0 12px 28px rgba(0,0,0,.16);
}

.iq-teacher-field{
  margin-bottom:10px;
}

.iq-teacher-check{
  display:flex !important;
  gap:10px;
  align-items:flex-start;
  padding:11px;
  border-radius:16px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.08);
  color:#dbeeff;
  cursor:pointer;
}

.iq-teacher-check input{
  width:auto !important;
  margin-top:3px;
}

.iq-teacher-check b{
  display:block;
  color:#fff;
  font-size:13px;
}

.iq-teacher-check small{
  display:block;
  margin-top:3px;
  color:#aebfd4;
  font-size:11.5px;
  line-height:1.3;
}

.iq-teacher-preview{
  text-align:center;
}

.iq-teacher-preview > span{
  display:inline-flex;
  margin-bottom:8px;
  padding:5px 8px;
  border-radius:999px;
  color:#bff7ff;
  background:rgba(70,216,255,.08);
  border:1px solid rgba(70,216,255,.15);
  font-size:10px;
  font-weight:950;
  text-transform:uppercase;
}

.iq-teacher-world-icon{
  width:66px;
  height:66px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 8px;
  border-radius:22px;
  font-size:34px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:inset 0 0 24px rgba(70,216,255,.08);
}

.iq-teacher-preview h3{
  margin:0 0 5px;
  color:#fff;
  font-size:18px;
}

.iq-teacher-preview p{
  margin:0;
  color:#aebfd4;
  font-size:12px;
  line-height:1.35;
}

.iq-teacher-preview-tags{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:6px;
  margin-top:10px;
}

.iq-teacher-preview-tags em{
  font-style:normal;
  padding:6px 8px;
  border-radius:999px;
  color:#eaf8ff;
  background:rgba(167,124,255,.075);
  border:1px solid rgba(167,124,255,.14);
  font-size:10.5px;
  font-weight:850;
}

.iq-teacher-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:11px;
}

.iq-teacher-actions .btn{
  min-height:38px;
  border-radius:14px;
  font-size:12.5px;
}

@media(max-width:760px){
  .iq-teacher-hero,
  .iq-teacher-login-head{
    padding:15px;
  }

  .iq-teacher-hero{
    flex-direction:column;
  }

  .iq-teacher-status{
    width:100%;
    text-align:left;
  }

  .iq-teacher-layout{
    grid-template-columns:1fr;
  }
}

/* =========================================================
   V48 · Eventos y cofres profesional
   Mejora solo intro de mundo, eventos y recompensas visuales.
========================================================= */

/* Intro de mundo */
#worldIntroScreen.iq-worldintro-pro{
  position:relative;
  overflow:hidden;
  padding:18px;
  border-radius:28px;
  background:
    radial-gradient(circle at 10% 0%,rgba(70,216,255,.14),transparent 36%),
    radial-gradient(circle at 92% 8%,rgba(255,209,102,.12),transparent 34%),
    linear-gradient(180deg,rgba(8,25,46,.96),rgba(4,13,27,.98));
  border:1px solid rgba(120,180,255,.20);
  box-shadow:0 18px 46px rgba(0,0,0,.24);
}

.iq-worldintro-wrap{
  min-height:420px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.iq-worldintro-card{
  position:relative;
  overflow:hidden;
  width:min(760px,100%);
  padding:20px !important;
  border-radius:25px !important;
  background:
    radial-gradient(circle at 0% 0%,rgba(70,216,255,.13),transparent 38%),
    radial-gradient(circle at 100% 0%,rgba(167,124,255,.12),transparent 36%),
    rgba(7,21,38,.94) !important;
  border:1px solid rgba(120,180,255,.20) !important;
  box-shadow:0 22px 60px rgba(0,0,0,.32);
}

.iq-worldintro-card::after{
  content:"";
  position:absolute;
  inset:0;
  opacity:.16;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:32px 32px;
}

.iq-worldintro-card > *{
  position:relative;
  z-index:2;
}

.iq-worldintro-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
}

.iq-worldintro-type{
  display:inline-flex !important;
  margin-bottom:8px;
  padding:6px 9px !important;
  color:#ffe4a3;
  background:rgba(255,209,102,.10) !important;
  border:1px solid rgba(255,209,102,.22) !important;
  font-size:10px !important;
  font-weight:950;
  text-transform:uppercase;
}

.iq-worldintro-card h2{
  margin:0;
  color:#fff;
  font-size:clamp(30px,4vw,50px);
  line-height:1.02;
  letter-spacing:-.05em;
}

.iq-worldintro-card p{
  max-width:620px;
  margin:8px 0 0 !important;
  color:#aebfd4 !important;
  font-size:14px !important;
  line-height:1.45 !important;
}

.iq-worldintro-icon{
  flex:0 0 auto;
  width:88px !important;
  height:88px !important;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 !important;
  border-radius:28px;
  font-size:48px !important;
  background:
    radial-gradient(circle at 50% 30%,rgba(255,255,255,.14),transparent 45%),
    rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:inset 0 0 30px rgba(70,216,255,.08),0 0 28px rgba(70,216,255,.10);
}

.iq-worldintro-meta{
  display:flex;
  flex-wrap:wrap;
  gap:7px !important;
  justify-content:flex-start !important;
  margin:15px 0 0 !important;
}

.iq-worldintro-meta .tag{
  padding:6px 9px;
  border-radius:999px;
  font-size:10.5px;
}

.iq-worldintro-enemy-card{
  margin-top:12px;
  padding:12px 13px;
  border-radius:18px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.08);
}

.iq-worldintro-enemy-card span{
  display:block;
  margin-bottom:4px;
  color:#90a9c5;
  font-size:10px;
  font-weight:950;
  text-transform:uppercase;
}

.iq-worldintro-enemy-card .world-intro-enemy{
  color:#eaf8ff;
  font-size:14px;
}

.iq-worldintro-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:13px;
  justify-content:flex-start;
}

.iq-worldintro-actions .btn{
  min-height:39px;
  border-radius:14px;
}

/* Evento / cofre */
#eventScreen.iq-event-pro{
  position:relative;
  overflow:hidden;
  min-height:520px;
  padding:18px;
  border-radius:28px;
  background:
    radial-gradient(circle at 10% 0%,rgba(70,216,255,.14),transparent 36%),
    radial-gradient(circle at 92% 8%,rgba(255,209,102,.14),transparent 34%),
    linear-gradient(180deg,rgba(8,25,46,.96),rgba(4,13,27,.98));
  border:1px solid rgba(120,180,255,.20);
  box-shadow:0 18px 46px rgba(0,0,0,.24);
  display:flex;
  align-items:center;
  justify-content:center;
}

#eventScreen.event-secret{
  background:
    radial-gradient(circle at 10% 0%,rgba(167,124,255,.16),transparent 38%),
    radial-gradient(circle at 92% 8%,rgba(255,70,120,.10),transparent 34%),
    linear-gradient(180deg,rgba(10,12,30,.98),rgba(4,8,19,.99));
}

#eventScreen.event-recharge{
  background:
    radial-gradient(circle at 10% 0%,rgba(86,243,154,.14),transparent 36%),
    radial-gradient(circle at 92% 8%,rgba(70,216,255,.12),transparent 34%),
    linear-gradient(180deg,rgba(8,25,46,.96),rgba(4,13,27,.98));
}

#eventScreen .iq-eventbox{
  position:relative;
  overflow:hidden;
  width:min(620px,100%);
  padding:24px 20px !important;
  border-radius:27px !important;
  text-align:center;
  background:
    radial-gradient(circle at 50% 0%,rgba(255,255,255,.10),transparent 38%),
    rgba(7,21,38,.94) !important;
  border:1px solid rgba(120,180,255,.20) !important;
  box-shadow:0 24px 70px rgba(0,0,0,.36);
}

.iq-event-glow{
  position:absolute;
  left:50%;
  top:16px;
  width:220px;
  height:220px;
  transform:translateX(-50%);
  border-radius:999px;
  background:radial-gradient(circle,rgba(255,209,102,.18),transparent 62%);
  filter:blur(4px);
  pointer-events:none;
}

.event-secret .iq-event-glow{
  background:radial-gradient(circle,rgba(167,124,255,.20),transparent 62%);
}

.event-recharge .iq-event-glow{
  background:radial-gradient(circle,rgba(86,243,154,.18),transparent 62%);
}

.iq-event-art-wrap{
  position:relative;
  z-index:2;
  width:110px;
  height:110px;
  margin:0 auto 11px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:34px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:inset 0 0 30px rgba(255,255,255,.05),0 0 30px rgba(255,209,102,.08);
}

#eventScreen .iq-event-art{
  font-size:58px !important;
  line-height:1;
}

.iq-event-chip{
  position:relative;
  z-index:2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-bottom:8px;
  padding:6px 10px;
  border-radius:999px;
  color:#ffe4a3;
  background:rgba(255,209,102,.10);
  border:1px solid rgba(255,209,102,.22);
  font-size:10px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.35px;
}

#eventScreen h2{
  position:relative;
  z-index:2;
  margin:0;
  color:#fff;
  font-size:clamp(28px,3.6vw,44px);
  line-height:1.03;
  letter-spacing:-.045em;
}

#eventScreen p{
  position:relative;
  z-index:2;
  max-width:520px;
  margin:9px auto 0 !important;
  color:#aebfd4 !important;
  font-size:14px;
  line-height:1.48;
}

.iq-event-divider{
  position:relative;
  z-index:2;
  height:1px;
  margin:17px auto 13px;
  width:min(420px,100%);
  background:linear-gradient(90deg,transparent,rgba(120,180,255,.28),transparent);
}

.iq-event-actions{
  position:relative;
  z-index:2;
  display:flex !important;
  flex-wrap:wrap;
  justify-content:center !important;
  gap:8px;
}

.iq-event-actions .btn{
  min-height:39px;
  border-radius:14px;
  padding:9px 13px;
}

/* Toast de recompensas más claro */
.reward-toast{
  border-radius:18px !important;
  background:
    radial-gradient(circle at 0% 0%,rgba(255,209,102,.13),transparent 42%),
    rgba(7,21,38,.96) !important;
  border:1px solid rgba(255,209,102,.20) !important;
  box-shadow:0 18px 50px rgba(0,0,0,.36),0 0 25px rgba(255,209,102,.08) !important;
}

.reward-toast-title{
  color:#fff !important;
  font-weight:950;
}

.reward-toast-text{
  color:#aebfd4 !important;
  line-height:1.35;
}

.reward-toast-action{
  display:inline-flex;
  margin-top:8px;
  padding:5px 8px;
  border-radius:999px;
  color:#03111f !important;
  background:linear-gradient(90deg,#ffd166,#56f39a);
  font-size:10px;
  font-weight:950;
}

@media(max-width:720px){
  .iq-worldintro-top{
    flex-direction:column-reverse;
  }

  .iq-worldintro-icon{
    width:72px !important;
    height:72px !important;
    font-size:40px !important;
  }

  #eventScreen.iq-event-pro{
    min-height:450px;
    padding:14px;
  }

  #eventScreen .iq-eventbox{
    padding:20px 16px !important;
  }

  .iq-event-art-wrap{
    width:92px;
    height:92px;
    border-radius:28px;
  }

  #eventScreen .iq-event-art{
    font-size:50px !important;
  }
}

/* =========================================================
   V48.2 · Fix evento visible después de continuar
   Asegura que Continuar sea clickeable y cierre el evento.
========================================================= */

#eventScreen.iq-event-pro{
  pointer-events:auto;
}

#eventScreen .iq-eventbox{
  pointer-events:auto;
  z-index:5;
}

#eventScreen .iq-event-actions{
  pointer-events:auto !important;
  z-index:60 !important;
}

#eventScreen .iq-event-actions .btn{
  position:relative;
  z-index:70 !important;
  pointer-events:auto !important;
  cursor:pointer;
}

#eventScreen .iq-event-glow{
  pointer-events:none !important;
  z-index:0;
}

#eventScreen .iq-event-divider,
#eventScreen .iq-event-chip,
#eventScreen .iq-event-art-wrap,
#eventScreen h2,
#eventScreen p{
  pointer-events:auto;
}

/* =========================================================
   V48.2 · Fix evento visible después de Continuar
   El evento/cofre solo se muestra cuando la pantalla está activa.
========================================================= */

#eventScreen.iq-event-pro{
  display:none !important;
}

#eventScreen.iq-event-pro.active{
  display:flex !important;
}

#eventScreen.iq-event-pro:not(.active){
  display:none !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

#eventScreen.iq-event-pro.active .iq-eventbox{
  display:block;
}

/* =========================================================
   V48.3 · Menú lateral / Panel del jugador profesional
   Mejora solo el panel izquierdo y navegación.
========================================================= */

.side.iq-side-pro{
  position:sticky;
  top:12px;
  max-height:calc(100vh - 24px);
  overflow:auto;
  padding:13px !important;
  border-radius:27px !important;
  background:
    radial-gradient(circle at 10% 0%,rgba(70,216,255,.12),transparent 34%),
    radial-gradient(circle at 95% 2%,rgba(167,124,255,.10),transparent 32%),
    linear-gradient(180deg,rgba(7,22,40,.96),rgba(3,12,24,.98)) !important;
  border:1px solid rgba(120,180,255,.19) !important;
  box-shadow:0 18px 48px rgba(0,0,0,.25);
}

.side.iq-side-pro::-webkit-scrollbar{
  width:8px;
}

.side.iq-side-pro::-webkit-scrollbar-thumb{
  background:rgba(120,180,255,.20);
  border-radius:999px;
}

.iq-side-player{
  position:relative;
  overflow:hidden;
  padding:12px;
  border-radius:22px;
  background:
    radial-gradient(circle at 50% 0%,rgba(70,216,255,.12),transparent 42%),
    rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.075);
  margin-bottom:9px;
}

.iq-side-player-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  margin-bottom:7px;
}

.iq-side-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 8px;
  border-radius:999px;
  color:#bff7ff;
  background:rgba(70,216,255,.08);
  border:1px solid rgba(70,216,255,.17);
  font-size:9.5px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.25px;
}

.iq-side-save{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:#aebfd4;
  font-size:10.5px;
  white-space:nowrap;
}

.iq-side-save i{
  display:inline-block;
}

.iq-side-micro-wrap{
  display:flex;
  justify-content:center;
  margin-top:3px;
}

.iq-side-pro .micro-shell{
  transform:scale(.78);
  transform-origin:center top;
  margin:-8px auto -42px;
}

.iq-side-form{
  margin:3px 0 9px !important;
  padding:7px 9px;
  border-radius:999px;
  color:#fff;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.08);
  text-align:center;
  font-size:12px;
  font-weight:900;
}

.iq-side-team{
  display:flex !important;
  align-items:center;
  gap:10px;
  padding:10px;
  border-radius:17px;
  background:rgba(3,12,24,.56);
  border:1px solid rgba(120,180,255,.13);
}

.iq-side-avatar{
  flex:0 0 auto;
  width:48px !important;
  height:48px !important;
  border-radius:16px !important;
  font-size:24px !important;
  background:
    radial-gradient(circle at 50% 20%,rgba(255,255,255,.12),transparent 48%),
    rgba(255,255,255,.055);
}

.iq-side-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:16px;
}

.iq-side-team b{
  display:block;
  color:#fff;
  font-size:14px;
  line-height:1.15;
}

.iq-side-team span{
  display:block;
  margin-top:3px;
  color:#9fb5cc;
  font-size:11.5px;
  line-height:1.25;
}

.iq-side-stats{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin-bottom:9px;
}

.iq-side-stat{
  padding:10px;
  border-radius:17px;
  background:
    radial-gradient(circle at 100% 0%,rgba(255,255,255,.055),transparent 44%),
    rgba(7,21,38,.90);
  border:1px solid rgba(120,180,255,.15);
}

.iq-side-stat span{
  display:block;
  color:#90a9c5;
  font-size:10px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.2px;
}

.iq-side-stat b{
  display:block;
  margin:5px 0 6px;
  color:#fff;
  font-size:19px;
  line-height:1;
}

.iq-side-stat small{
  display:block;
  color:#aebfd4;
  font-size:11px;
}

.iq-side-statbar{
  height:7px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.07);
}

.iq-side-statbar i{
  display:block;
  height:100%;
  width:0%;
  border-radius:999px;
  background:linear-gradient(90deg,#46d8ff,#a77cff);
  transition:width .25s ease;
}

.iq-side-stat.hp .iq-side-statbar i{
  background:linear-gradient(90deg,#ff5f78,#ffd166);
}

.iq-side-stat.energy .iq-side-statbar i{
  background:linear-gradient(90deg,#ffd166,#56f39a);
}

.iq-side-stat.xp .iq-side-statbar i{
  background:linear-gradient(90deg,#46d8ff,#a77cff);
}

.iq-side-stat.bits{
  border-color:rgba(255,209,102,.17);
}

.iq-side-campaign{
  padding:11px !important;
  margin-bottom:9px;
  border-radius:18px !important;
  background:rgba(255,255,255,.04) !important;
  border:1px solid rgba(120,180,255,.14) !important;
}

.iq-side-campaign .pro-campaign-head{
  gap:8px;
}

.iq-side-campaign .pro-campaign-head b{
  color:#fff;
  font-size:12px;
}

.iq-side-campaign .pro-campaign-head span{
  color:#aebfd4;
  font-size:11px;
}

.iq-side-modules{
  padding:11px;
  margin-bottom:9px;
  border-radius:18px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.075);
}

.iq-side-modules h3{
  margin:0 0 8px;
  color:#fff;
  font-size:13px;
}

.iq-side-modules .badges{
  max-height:126px;
  overflow:auto;
  gap:6px;
}

.iq-side-modules .badge{
  padding:5px 7px;
  border-radius:999px;
  font-size:10.5px;
}

.iq-side-nav{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:7px !important;
}

.iq-side-nav .iq-nav-action{
  min-height:38px;
  justify-content:center;
  padding:8px 9px !important;
  border-radius:14px !important;
  font-size:11.5px !important;
  line-height:1.15;
  white-space:normal;
  border-color:rgba(120,180,255,.14) !important;
  background:rgba(255,255,255,.045) !important;
}

.iq-side-nav .iq-nav-action:hover{
  transform:translateY(-1px);
  border-color:rgba(70,216,255,.30) !important;
  box-shadow:0 10px 22px rgba(0,0,0,.18);
}

.iq-side-nav .iq-nav-action.active{
  color:#04111f !important;
  background:linear-gradient(90deg,#46d8ff,#a77cff) !important;
  border-color:transparent !important;
  font-weight:950;
}

.iq-side-nav .iq-nav-feature{
  grid-column:1/-1;
  min-height:42px;
  color:#03111f !important;
  background:linear-gradient(90deg,#ffd166,#56f39a) !important;
  border-color:transparent !important;
  font-weight:950;
}

.iq-side-nav .iq-nav-new{
  grid-column:1/-1;
  min-height:42px;
  border-radius:16px !important;
}

@media(max-width:1100px){
  .side.iq-side-pro{
    position:relative;
    top:auto;
    max-height:none;
  }

  .iq-side-pro .micro-shell{
    transform:scale(.72);
    margin:-10px auto -54px;
  }

  .iq-side-stats{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }

  .iq-side-nav{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  }

  .iq-side-nav .iq-nav-feature,
  .iq-side-nav .iq-nav-new{
    grid-column:auto;
  }
}

@media(max-width:760px){
  .iq-side-stats{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .iq-side-nav{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  .iq-side-nav .iq-nav-feature,
  .iq-side-nav .iq-nav-new{
    grid-column:1/-1;
  }
}

/* =========================================================
   V48.4 · Panel sin estadísticas duplicadas
   Vida, energía, XP y Bits quedan arriba; el lateral no repite.
========================================================= */

.side.iq-side-pro{
  padding:10px !important;
}

.iq-side-player{
  padding:10px;
  margin-bottom:8px;
}

.iq-side-player-head{
  margin-bottom:5px;
}

.iq-side-chip{
  padding:4px 7px;
  font-size:9px;
}

.iq-side-pro .micro-shell{
  transform:scale(.66);
  transform-origin:center top;
  margin:-18px auto -68px;
}

.iq-side-form{
  margin:1px 0 8px !important;
  padding:6px 8px;
  font-size:11px;
}

.iq-side-team{
  padding:8px;
  gap:8px;
}

.iq-side-avatar{
  width:42px !important;
  height:42px !important;
  font-size:20px !important;
}

.iq-side-team b{
  font-size:13px;
}

.iq-side-team span{
  font-size:10.5px;
}

.iq-side-campaign{
  padding:9px !important;
  margin-bottom:8px;
}

.iq-side-modules{
  padding:9px;
  margin-bottom:8px;
}

.iq-side-modules h3{
  font-size:12px;
  margin-bottom:6px;
}

.iq-side-modules .badges{
  max-height:92px;
  overflow:auto;
}

.iq-side-modules .badge{
  padding:4px 6px;
  font-size:9.5px;
}

.iq-side-nav{
  gap:6px !important;
}

.iq-side-nav .iq-nav-action{
  min-height:34px;
  padding:7px 8px !important;
  border-radius:12px !important;
  font-size:10.5px !important;
}

.iq-side-nav .iq-nav-feature,
.iq-side-nav .iq-nav-new{
  min-height:38px;
}

.side.iq-side-pro::-webkit-scrollbar{
  width:10px;
}

.side.iq-side-pro::-webkit-scrollbar-thumb{
  background:rgba(120,180,255,.36);
}

.side.iq-side-pro::-webkit-scrollbar-track{
  background:rgba(255,255,255,.04);
}

/* =========================================================
   V48.5 · Panel principal compacto
   Mantiene solo el panel superior de estadísticas.
   El lateral queda sin estadísticas duplicadas.
========================================================= */

.top{
  grid-template-columns:minmax(0,1.45fr) minmax(420px,.95fr);
  gap:10px;
  margin-bottom:10px;
  align-items:stretch;
}

.brand{
  padding:14px 18px;
}

.brand h1{
  font-size:clamp(24px,3.4vw,38px);
  line-height:1.06;
}

.brand p{
  margin-top:5px;
  font-size:14px;
  line-height:1.45;
}

.stats{
  padding:10px;
  gap:8px;
  align-items:stretch;
}

.stat{
  min-height:78px;
  padding:9px 8px;
  border-radius:14px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}

.stat b{
  font-size:18px;
  line-height:1;
  margin-bottom:6px;
}

.stat span{
  font-size:11px;
  line-height:1.2;
  margin-top:0;
}

/* Evita métricas duplicadas abajo o en el lateral */
.iq-side-stats,
.iq-player-stats,
.player-quick-stats,
.side-stats,
.panel-stats-duplicate,
.stats-duplicate,
.side-metrics-grid{
  display:none !important;
}

@media(max-width:1100px){
  .top{
    grid-template-columns:1fr;
  }

  .stats{
    grid-template-columns:repeat(5,minmax(0,1fr));
  }
}

@media(max-width:760px){
  .brand{
    padding:12px 14px;
  }

  .brand h1{
    font-size:clamp(22px,8vw,30px);
  }

  .stats{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .stat{
    min-height:70px;
  }
}

/* =========================================================
   V48.6 · Panel cómodo y pantalla más ancha
   Ajuste visual pedido:
   - panel izquierdo más grande, como antes
   - módulos activos visibles sin scrollbar interno
   - contenido central más ancho
   - estadísticas solo arriba
========================================================= */

/* Página más ancha y mejor aprovechada */
.app{
  max-width:1760px;
  padding:10px 14px;
}

.top{
  grid-template-columns:minmax(0,1.42fr) minmax(420px,.72fr);
  gap:12px;
  margin-bottom:10px;
}

.grid{
  grid-template-columns:365px minmax(0,1fr);
  gap:16px;
}

.main{
  min-width:0;
  padding:16px;
}

.brand{
  padding:13px 18px;
}

.brand h1{
  font-size:clamp(25px,2.5vw,38px);
  line-height:1.05;
}

.brand p{
  font-size:14px;
  line-height:1.35;
}

/* Panel superior: moderno, pero no tan gigante */
.stats{
  padding:8px;
  gap:8px;
}

.stat{
  min-height:74px;
  padding:8px 7px;
  border-radius:14px;
}

.stat b{
  font-size:19px;
  line-height:1;
}

.stat span{
  font-size:10.5px;
}

/* Panel lateral más cómodo, no mini */
.side.iq-side-pro{
  width:100%;
  padding:12px !important;
  max-height:calc(100vh - 20px);
  overflow-y:auto;
  overflow-x:hidden;
}

.iq-side-player{
  padding:12px;
  margin-bottom:10px;
}

.iq-side-player-head{
  margin-bottom:8px;
}

.iq-side-chip{
  padding:5px 9px;
  font-size:10px;
}

.iq-side-save{
  font-size:11px;
}

/* Micro:bit vuelve a tener presencia */
.iq-side-pro .micro-shell{
  transform:scale(.78);
  transform-origin:center top;
  margin:-8px auto -42px;
}

.iq-side-form{
  margin:4px 0 10px !important;
  padding:8px 10px;
  font-size:12px;
}

.iq-side-team{
  padding:11px;
  gap:10px;
}

.iq-side-avatar{
  width:52px !important;
  height:52px !important;
  font-size:24px !important;
}

.iq-side-team b{
  font-size:15px;
}

.iq-side-team span{
  font-size:12px;
}

/* Campaña más legible */
.iq-side-campaign{
  padding:11px !important;
  margin-bottom:10px;
}

.iq-side-campaign .pro-campaign-head b{
  font-size:13px;
}

.iq-side-campaign .pro-campaign-head span{
  font-size:12px;
}

/* Módulos activos: más grande y SIN scrollbar interno */
.iq-side-modules{
  padding:12px;
  margin-bottom:10px;
}

.iq-side-modules h3{
  font-size:14px;
  margin-bottom:9px;
}

.iq-side-modules .badges{
  max-height:none !important;
  overflow:visible !important;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px;
}

.iq-side-modules .badge{
  padding:7px 9px;
  font-size:11px;
  min-height:32px;
  display:flex;
  align-items:center;
}

/* Oculta cualquier scrollbar heredado dentro de módulos */
.iq-side-modules .badges::-webkit-scrollbar{
  display:none;
}

/* Menú cómodo sin duplicar estadísticas */
.iq-side-nav{
  gap:7px !important;
}

.iq-side-nav .iq-nav-action{
  min-height:36px;
  padding:8px 9px !important;
  border-radius:13px !important;
  font-size:11px !important;
}

.iq-side-nav .iq-nav-feature,
.iq-side-nav .iq-nav-new{
  min-height:40px;
}

/* Confirmación: estadísticas duplicadas no aparecen en lateral */
.iq-side-stats,
.iq-player-stats,
.player-quick-stats,
.side-stats,
.panel-stats-duplicate,
.stats-duplicate,
.side-metrics-grid{
  display:none !important;
}

/* Ranking y pantallas anchas aprovechan mejor el centro */
#rankingScreen.iq-ranking-pro,
#mapScreen,
#progressScreen,
#reportScreen,
#missionsScreen,
#rewardsScreen,
#shopScreen,
#treeScreen{
  width:100%;
}

.rank-table,
.ranking-table,
.iq-ranking-table{
  width:100%;
}

@media(max-width:1300px){
  .app{
    max-width:100%;
  }

  .grid{
    grid-template-columns:340px minmax(0,1fr);
    gap:12px;
  }

  .iq-side-pro .micro-shell{
    transform:scale(.72);
    margin:-12px auto -54px;
  }
}

@media(max-width:1100px){
  .top{
    grid-template-columns:1fr;
  }

  .grid{
    grid-template-columns:1fr;
  }

  .side.iq-side-pro{
    position:relative;
    top:auto;
    max-height:none;
  }

  .iq-side-pro .micro-shell{
    transform:scale(.70);
    margin:-14px auto -58px;
  }

  .iq-side-modules .badges{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .iq-side-nav{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  }
}

@media(max-width:760px){
  .app{
    padding:8px;
  }

  .stats{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .stat{
    min-height:68px;
  }

  .iq-side-modules .badges{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .iq-side-nav{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  .iq-side-nav .iq-nav-feature,
  .iq-side-nav .iq-nav-new{
    grid-column:1/-1;
  }
}

/* =========================================================
   V48.7 · Portada interna restaurada
   Al entrar a Campaña 1 se muestra una portada con:
   Nueva partida / Continuar.
========================================================= */

#homeScreen.iq-entry-cover{
  position:relative;
  overflow:hidden;
  padding:18px;
  border-radius:28px;
  background:
    radial-gradient(circle at 12% 0%,rgba(70,216,255,.14),transparent 36%),
    radial-gradient(circle at 92% 8%,rgba(167,124,255,.12),transparent 34%),
    linear-gradient(180deg,rgba(8,25,46,.96),rgba(4,13,27,.98));
  border:1px solid rgba(120,180,255,.20);
  box-shadow:0 18px 46px rgba(0,0,0,.24);
}

.iq-entry-hero{
  min-height:560px;
  align-items:center;
}

.iq-entry-copy{
  position:relative;
  z-index:2;
}

.iq-entry-kicker{
  margin-bottom:10px;
}

.iq-entry-cover h2{
  font-size:clamp(38px,5.4vw,72px);
  line-height:.98;
  margin:0 0 12px;
}

.iq-entry-cover p{
  max-width:820px;
  color:#aebfd4;
  font-size:16px;
  line-height:1.62;
}

.iq-entry-strip{
  margin:18px 0 12px;
}

.iq-entry-status{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:4px 0 8px;
  padding:8px 11px;
  border-radius:999px;
  color:#d8eaff;
  background:rgba(70,216,255,.08);
  border:1px solid rgba(70,216,255,.18);
  font-size:12px;
  font-weight:850;
}

.iq-entry-status::before{
  content:"●";
  color:#56f39a;
  filter:drop-shadow(0 0 6px rgba(86,243,154,.60));
}

.iq-entry-actions{
  margin-top:12px;
}

.iq-entry-actions .btn{
  min-height:44px;
  border-radius:15px;
  padding:11px 16px;
}

.iq-entry-art{
  position:relative;
  overflow:hidden;
  border-radius:26px;
}

.iq-entry-art::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.18;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:32px 32px;
}

/* El botón Nueva partida ya no va en el panel lateral */
.iq-side-nav .iq-nav-new{
  display:none !important;
}

@media(max-width:760px){
  .iq-entry-hero{
    min-height:auto;
  }

  .iq-entry-cover{
    padding:14px;
  }

  .iq-entry-cover h2{
    font-size:clamp(34px,10vw,48px);
  }

  .iq-entry-cover p{
    font-size:14px;
  }

  .iq-entry-actions .btn{
    width:100%;
    justify-content:center;
  }
}

/* =========================================================
   V48.8 · Pantallas de misión más grandes
   Ajusta la pantalla previa a cada mundo / misión para que
   use mejor el ancho, se vea más protagonista y tenga
   botones más cómodos.
========================================================= */

#worldIntroScreen.iq-worldintro-pro{
  padding:24px;
}

.iq-worldintro-wrap{
  min-height:520px;
  align-items:center;
}

.iq-worldintro-card{
  width:min(1040px,100%) !important;
  padding:28px !important;
  border-radius:30px !important;
  box-shadow:0 26px 72px rgba(0,0,0,.34);
}

.iq-worldintro-top{
  gap:22px;
}

.iq-worldintro-card h2{
  font-size:clamp(42px,5vw,68px);
  line-height:1.02;
  margin-bottom:4px;
}

.iq-worldintro-card p{
  max-width:780px;
  font-size:18px !important;
  line-height:1.6 !important;
  margin-top:10px !important;
}

.iq-worldintro-type{
  padding:8px 12px !important;
  font-size:11px !important;
  letter-spacing:.03em;
}

.iq-worldintro-icon{
  width:120px !important;
  height:120px !important;
  border-radius:32px;
  font-size:64px !important;
  box-shadow:
    inset 0 0 40px rgba(70,216,255,.10),
    0 0 32px rgba(70,216,255,.13);
}

.iq-worldintro-meta{
  gap:10px !important;
  margin:18px 0 0 !important;
}

.iq-worldintro-meta .tag{
  padding:8px 12px;
  font-size:12px;
}

.iq-worldintro-enemy-card{
  margin-top:18px;
  padding:18px 20px;
  border-radius:20px;
}

.iq-worldintro-enemy-card span{
  margin-bottom:7px;
  font-size:11px;
}

.iq-worldintro-enemy-card .world-intro-enemy{
  font-size:22px;
  font-weight:900;
}

.iq-worldintro-actions{
  gap:12px;
  margin-top:18px;
}

.iq-worldintro-actions .btn{
  min-height:52px;
  padding:14px 20px;
  border-radius:16px;
  font-size:18px;
}

@media (min-width: 900px){
  .iq-worldintro-card{
    padding:32px 34px !important;
  }

  .iq-worldintro-top{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
  }
}

@media (max-width: 760px){
  #worldIntroScreen.iq-worldintro-pro{
    padding:14px;
  }

  .iq-worldintro-wrap{
    min-height:auto;
  }

  .iq-worldintro-card{
    width:100% !important;
    padding:20px 16px !important;
    border-radius:24px !important;
  }

  .iq-worldintro-top{
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
  }

  .iq-worldintro-card h2{
    font-size:clamp(32px,9vw,46px);
  }

  .iq-worldintro-card p{
    font-size:15px !important;
  }

  .iq-worldintro-icon{
    width:92px !important;
    height:92px !important;
    font-size:48px !important;
  }

  .iq-worldintro-enemy-card .world-intro-enemy{
    font-size:18px;
  }

  .iq-worldintro-actions .btn{
    width:100%;
    justify-content:center;
    font-size:16px;
  }
}

/* =========================================================
   V48.9 · Sonido en Configuración + Preguntas más grandes
   - El botón de sonido sale del panel lateral.
   - El control de sonido queda en Configuración.
   - El bloque de preguntas en batalla crece un poco.
========================================================= */

/* El botón lateral de sonido ya no se usa */
#soundBtn{
  display:none !important;
}

.iq-settings-note{
  margin:4px 0 0;
  color:#aebfd4;
  font-size:13px;
  line-height:1.35;
}

/* Preguntas de batalla un poco más grandes y cómodas */
#battleScreen.iq-battle-pro .question{
  margin-top:16px;
  padding:20px 22px;
  border-radius:22px;
}

#battleScreen.iq-battle-pro .qtop{
  font-size:13px;
  margin-bottom:12px;
}

#battleScreen.iq-battle-pro #questionText{
  font-size:clamp(28px,2.2vw,38px);
  line-height:1.18;
  margin:8px 0 14px;
}

#battleScreen.iq-battle-pro .answers{
  gap:12px;
  margin-top:14px;
}

#battleScreen.iq-battle-pro .answer{
  min-height:58px;
  padding:16px 18px;
  border-radius:16px;
  font-size:17px;
  line-height:1.35;
}

#battleScreen.iq-battle-pro .actions{
  gap:10px;
  margin-top:14px;
}

#battleScreen.iq-battle-pro .actions .btn{
  min-height:44px;
  padding:12px 16px;
  border-radius:15px;
  font-size:15px;
}

#battleScreen.iq-battle-pro .feedback{
  min-height:30px;
  margin-top:12px;
  font-size:16px;
}

@media(max-width:760px){
  #battleScreen.iq-battle-pro .question{
    padding:16px;
  }

  #battleScreen.iq-battle-pro #questionText{
    font-size:clamp(23px,7vw,32px);
  }

  #battleScreen.iq-battle-pro .answer{
    min-height:52px;
    font-size:15px;
  }
}

/* =========================================================
   V48.9.1 · Sin botón de sonido en panel lateral
   El control de sonido queda únicamente en Configuración.
========================================================= */

.iq-side-nav #soundBtn,
.iq-side-nav button[onclick="toggleSound()"],
.iq-side-nav button[onclick*="toggleSound"]{
  display:none !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

/* =========================================================
   V49 · Configuración final profesional
   Sonido, texto, movimiento y modo liviano en una pantalla clara.
========================================================= */

#settingsScreen.iq-settings-final{
  padding:18px;
  border-radius:28px;
  background:
    radial-gradient(circle at 10% 0%,rgba(70,216,255,.14),transparent 36%),
    radial-gradient(circle at 92% 8%,rgba(167,124,255,.12),transparent 34%),
    linear-gradient(180deg,rgba(8,25,46,.96),rgba(4,13,27,.98));
  border:1px solid rgba(120,180,255,.20);
  box-shadow:0 18px 46px rgba(0,0,0,.24);
}

#settingsScreen .iq-settings-hero{
  margin-bottom:11px;
}

#settingsScreen .iq-settings-summary{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:9px;
  margin-bottom:11px;
}

.iq-settings-summary-card{
  padding:13px;
  border-radius:18px;
  background:
    radial-gradient(circle at 100% 0%,rgba(255,255,255,.06),transparent 38%),
    rgba(7,21,38,.92);
  border:1px solid rgba(120,180,255,.16);
}

.iq-settings-summary-card span{
  display:block;
  color:#90a9c5;
  font-size:10.5px;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.25px;
}

.iq-settings-summary-card b{
  display:block;
  margin:5px 0 4px;
  color:#fff;
  font-size:24px;
  line-height:1;
}

.iq-settings-summary-card small{
  color:#aebfd4;
  font-size:11.5px;
  line-height:1.3;
}

.iq-settings-summary-card.sound{
  border-color:rgba(86,243,154,.20);
}

.iq-settings-summary-card.light{
  border-color:rgba(255,209,102,.20);
}

.iq-settings-grid{
  gap:10px !important;
}

#settingsScreen .iq-setting-card{
  min-height:190px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:16px !important;
}

#settingsScreen .iq-setting-head{
  gap:12px;
}

#settingsScreen .iq-setting-icon{
  width:46px;
  height:46px;
  font-size:24px;
  flex:0 0 46px;
}

#settingsScreen .iq-setting-head h3{
  font-size:19px;
}

#settingsScreen .iq-setting-head p{
  font-size:13px;
  line-height:1.45;
}

#settingsScreen .iq-setting-actions{
  margin-top:14px;
}

#settingsScreen .setting-choice{
  min-height:42px;
  padding:10px 13px !important;
  border-radius:14px !important;
  font-size:13px;
}

#settingsScreen .setting-choice.active{
  color:#03111f !important;
  background:linear-gradient(90deg,#46d8ff,#56f39a) !important;
  border-color:transparent !important;
  font-weight:950;
}

.iq-settings-footer-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}

.iq-settings-footer-actions .btn{
  min-height:40px;
  border-radius:14px;
}

/* El sonido queda únicamente en Configuración */
.iq-side-nav #soundBtn,
.iq-side-nav button[onclick="toggleSound()"],
.iq-side-nav button[onclick*="toggleSound"]{
  display:none !important;
}

/* Modo liviano real: reduce decoraciones visuales sin afectar juego */
body.graphics-low #battleScreen:before,
body.graphics-low #battleScreen:after,
body.graphics-low .arena3d-star,
body.graphics-low #homeScreen::before,
body.graphics-low .battle-fx-layer{
  display:none !important;
}

body.graphics-low .card,
body.graphics-low .fighter,
body.graphics-low .question,
body.graphics-low .iq-world-card,
body.graphics-low .iq-setting-card{
  box-shadow:none !important;
}

body.graphics-low .hero-art .big,
body.graphics-low .avatar,
body.graphics-low .enemy-avatar{
  filter:none !important;
}

@media(max-width:1000px){
  #settingsScreen .iq-settings-summary{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:620px){
  #settingsScreen.iq-settings-final{
    padding:14px;
  }

  #settingsScreen .iq-settings-summary{
    grid-template-columns:1fr;
  }

  #settingsScreen .iq-setting-card{
    min-height:auto;
  }
}

/* =========================================================
   V50 · Ajuste final de batalla y espacio
   Mejora visual de batalla sin tocar preguntas, respuestas
   correctas, daño ni lógica del combate.
========================================================= */

#battleScreen.iq-battle-pro{
  padding:16px;
  border-radius:28px;
  min-height:auto;
}

/* Encabezado más compacto y alineado */
#battleScreen.iq-battle-pro .battle-head{
  margin-bottom:10px;
  align-items:stretch;
}

#battleScreen.iq-battle-pro .v44-1-battle-titlebox{
  padding:12px 15px;
  border-radius:18px;
}

#battleScreen.iq-battle-pro #battleWorld{
  font-size:22px;
  line-height:1.1;
}

#battleScreen.iq-battle-pro .v44-1-battle-phase{
  font-size:12px;
  margin-top:3px;
}

#battleScreen.iq-battle-pro .v44-1-retreat{
  min-height:44px;
  align-self:center;
  border-radius:14px;
}

/* Tarjetas jugador/enemigo más equilibradas y sin estirar de más */
#battleScreen.iq-battle-pro .battle-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  align-items:stretch;
}

#battleScreen.iq-battle-pro .fighter{
  min-height:255px;
  padding:15px;
  border-radius:22px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

#battleScreen.iq-battle-pro .fighter h3{
  margin:0 0 8px;
  font-size:18px;
}

#battleScreen.iq-battle-pro .avatar,
#battleScreen.iq-battle-pro .enemy-avatar{
  font-size:82px;
  line-height:1;
  margin:4px 0 8px;
}

#battleScreen.iq-battle-pro .bar{
  height:13px;
  margin:7px 0;
}

#battleScreen.iq-battle-pro #phptext,
#battleScreen.iq-battle-pro #ehptext{
  font-size:13px;
}

#battleScreen.iq-battle-pro #statusText{
  margin-top:6px !important;
  align-self:center;
}

/* Pregunta más protagonista y ocupando mejor el ancho */
#battleScreen.iq-battle-pro .question{
  margin-top:13px;
  padding:22px 24px;
  border-radius:24px;
  background:
    radial-gradient(circle at 0% 0%,rgba(70,216,255,.10),transparent 38%),
    radial-gradient(circle at 100% 0%,rgba(167,124,255,.09),transparent 35%),
    rgba(7,21,38,.94);
  border:1px solid rgba(120,180,255,.22);
  box-shadow:0 16px 36px rgba(0,0,0,.20);
}

#battleScreen.iq-battle-pro .qtop{
  font-size:13px;
  margin-bottom:12px;
  color:#aebfd4;
}

#battleScreen.iq-battle-pro #questionText{
  width:100%;
  max-width:1120px;
  margin:0 auto 16px;
  font-size:clamp(30px,2.25vw,40px);
  line-height:1.16;
  letter-spacing:-.02em;
  text-align:left;
}

/* Respuestas más grandes y equilibradas */
#battleScreen.iq-battle-pro .answers{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:14px;
}

#battleScreen.iq-battle-pro .answer{
  min-height:64px;
  padding:17px 18px;
  border-radius:17px;
  font-size:17px;
  line-height:1.35;
  display:flex;
  align-items:center;
  text-align:left;
}

/* Botones de acción ordenados */
#battleScreen.iq-battle-pro .actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
  align-items:center;
}

#battleScreen.iq-battle-pro .actions .btn{
  min-height:44px;
  padding:12px 16px;
  border-radius:15px;
  font-size:15px;
}

#battleScreen.iq-battle-pro .feedback{
  min-height:30px;
  margin-top:12px;
  font-size:16px;
  line-height:1.35;
}

/* En pantallas grandes la batalla aprovecha más el ancho */
@media(min-width:1200px){
  #battleScreen.iq-battle-pro .battle-grid{
    grid-template-columns:minmax(0,.92fr) minmax(0,.92fr);
    justify-content:center;
  }

  #battleScreen.iq-battle-pro .question{
    max-width:100%;
  }
}

/* En pantallas chicas vuelve a una columna cómoda */
@media(max-width:900px){
  #battleScreen.iq-battle-pro .battle-grid,
  #battleScreen.iq-battle-pro .answers{
    grid-template-columns:1fr;
  }

  #battleScreen.iq-battle-pro .fighter{
    min-height:auto;
  }

  #battleScreen.iq-battle-pro #questionText{
    font-size:clamp(25px,7vw,34px);
  }

  #battleScreen.iq-battle-pro .answer{
    min-height:56px;
    font-size:16px;
  }
}

@media(max-width:620px){
  #battleScreen.iq-battle-pro{
    padding:12px;
  }

  #battleScreen.iq-battle-pro .battle-head{
    flex-direction:column;
  }

  #battleScreen.iq-battle-pro .v44-1-retreat{
    width:100%;
  }

  #battleScreen.iq-battle-pro .question{
    padding:17px 15px;
  }

  #battleScreen.iq-battle-pro .avatar,
  #battleScreen.iq-battle-pro .enemy-avatar{
    font-size:68px;
  }
}

/* =========================================================
   V51 · Mapa de mundos profesional
   Mejora la selección de mundos sin tocar lógica, preguntas
   ni batalla.
========================================================= */

#mapScreen{
  padding:18px;
  border-radius:28px;
  background:
    radial-gradient(circle at 10% 0%,rgba(70,216,255,.12),transparent 35%),
    radial-gradient(circle at 92% 6%,rgba(86,243,154,.09),transparent 34%),
    linear-gradient(180deg,rgba(8,25,46,.96),rgba(4,13,27,.98));
  border:1px solid rgba(120,180,255,.18);
}

#mapScreen .iq-map-hero{
  padding:24px 26px !important;
  margin-bottom:12px !important;
  border-radius:26px !important;
}

#mapScreen .iq-map-chip{
  padding:8px 12px !important;
  font-size:12px !important;
}

#mapScreen .iq-map-hero h2{
  font-size:clamp(34px,4.4vw,58px) !important;
  line-height:1 !important;
}

#mapScreen .iq-map-hero p{
  max-width:820px;
  font-size:15px !important;
  line-height:1.55 !important;
}

#mapScreen .iq-map-summary{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px !important;
  margin-bottom:13px !important;
}

#mapScreen .iq-map-summary-card{
  padding:16px !important;
  border-radius:20px !important;
}

#mapScreen .iq-map-summary-card b{
  font-size:clamp(24px,3vw,36px) !important;
}

#mapScreen .iq-map-summary-card span{
  font-size:12px !important;
}

/* Ruta sin achicar: tarjetas más grandes y más claras */
#mapScreen .iq-map-route{
  padding-top:2px;
}

#mapScreen .iq-map-route-line{
  left:34px !important;
  top:24px !important;
  bottom:24px !important;
  width:4px !important;
}

#mapScreen .iq-worlds-map{
  grid-template-columns:repeat(2,minmax(360px,1fr)) !important;
  gap:14px !important;
}

#mapScreen .iq-world-card-v51{
  position:relative;
  min-height:192px !important;
  padding:18px 18px 16px 76px !important;
  border-radius:25px !important;
  cursor:default;
}

#mapScreen .iq-world-card-v51.playable{
  cursor:default;
}

#mapScreen .iq-world-card-v51.playable:hover{
  transform:translateY(-3px);
}

#mapScreen .iq-world-card-v51.locked{
  opacity:.62 !important;
  filter:grayscale(.45) !important;
}

#mapScreen .iq-world-card-v51.done{
  background:
    radial-gradient(circle at 90% 8%,rgba(86,243,154,.11),transparent 36%),
    linear-gradient(180deg,rgba(8,34,38,.96),rgba(6,18,34,.98)) !important;
}

#mapScreen .iq-world-card-v51.next{
  border-color:rgba(86,243,154,.50) !important;
  box-shadow:0 18px 42px rgba(0,0,0,.25),0 0 32px rgba(86,243,154,.12) !important;
}

#mapScreen .iq-world-number{
  left:16px !important;
  top:18px !important;
  width:46px !important;
  height:46px !important;
  border-radius:16px !important;
  font-size:15px !important;
}

#mapScreen .iq-world-main{
  gap:13px !important;
  align-items:center !important;
}

#mapScreen .iq-world-icon{
  width:58px !important;
  height:58px !important;
  border-radius:19px !important;
  font-size:32px !important;
}

#mapScreen .iq-world-card h3{
  font-size:20px !important;
  line-height:1.1 !important;
  margin-bottom:5px !important;
}

#mapScreen .iq-world-card p{
  font-size:13px !important;
  line-height:1.4 !important;
}

#mapScreen .iq-world-state-v51{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-top:13px !important;
  padding:7px 10px;
  border-radius:999px;
  color:#e7f5ff;
  background:rgba(70,216,255,.08);
  border:1px solid rgba(70,216,255,.15);
  font-size:12px !important;
}

#mapScreen .iq-world-state-v51 span{
  font-size:14px;
}

#mapScreen .iq-world-state-v51 b{
  font-size:12px;
}

#mapScreen .iq-world-progress{
  position:relative;
  z-index:2;
  height:8px;
  margin-top:11px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.08);
}

#mapScreen .iq-world-progress span{
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#46d8ff,#56f39a);
  box-shadow:0 0 16px rgba(70,216,255,.20);
}

#mapScreen .iq-world-tags{
  margin-top:10px !important;
  gap:6px !important;
}

#mapScreen .iq-world-tags .tag{
  padding:5px 8px !important;
  font-size:10px !important;
}

#mapScreen .iq-world-footer-v51{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:12px;
}

#mapScreen .iq-world-action{
  min-height:38px;
  padding:9px 13px !important;
  border-radius:14px !important;
  font-size:13px;
  flex:0 0 auto;
}

#mapScreen .iq-world-footer-v51 small{
  color:#8fa7c3;
  font-size:11.5px;
  line-height:1.25;
  text-align:right;
}

#mapScreen .iq-xenon-card{
  min-height:180px !important;
}

#mapScreen .iq-xenon-card .iq-world-footer-v51{
  justify-content:flex-start;
}

#mapScreen .iq-xenon-card .iq-world-footer-v51 small{
  text-align:left;
}

/* Responsive */
@media(max-width:1280px){
  #mapScreen .iq-worlds-map{
    grid-template-columns:repeat(2,minmax(300px,1fr)) !important;
  }

  #mapScreen .iq-world-card-v51{
    min-height:188px !important;
  }
}

@media(max-width:980px){
  #mapScreen .iq-worlds-map{
    grid-template-columns:1fr !important;
  }
}

@media(max-width:760px){
  #mapScreen{
    padding:12px;
  }

  #mapScreen .iq-map-hero{
    padding:18px !important;
  }

  #mapScreen .iq-map-summary{
    grid-template-columns:1fr !important;
  }

  #mapScreen .iq-world-card-v51{
    padding-left:70px !important;
    min-height:auto !important;
  }

  #mapScreen .iq-world-footer-v51{
    align-items:stretch;
    flex-direction:column;
  }

  #mapScreen .iq-world-footer-v51 small{
    text-align:left;
  }

  #mapScreen .iq-world-action{
    width:100%;
    justify-content:center;
  }
}

@media(max-width:520px){
  #mapScreen .iq-world-card-v51{
    padding:16px !important;
  }

  #mapScreen .iq-world-number{
    position:relative;
    left:auto !important;
    top:auto !important;
    margin-bottom:12px;
  }
}

/* =========================================================
   V51.1 · Mundos más compactos
   Ajusta SOLO el tamaño de las tarjetas de mundos.
   Mantiene el diseño profesional de V51.
========================================================= */

#mapScreen .iq-world-card-v51{
  min-height:160px !important;
  padding:15px 15px 14px 66px !important;
  border-radius:22px !important;
}

#mapScreen .iq-world-number{
  left:14px !important;
  top:16px !important;
  width:38px !important;
  height:38px !important;
  border-radius:14px !important;
  font-size:13px !important;
}

#mapScreen .iq-world-main{
  gap:10px !important;
}

#mapScreen .iq-world-icon{
  width:48px !important;
  height:48px !important;
  border-radius:16px !important;
  font-size:27px !important;
}

#mapScreen .iq-world-card h3{
  font-size:18px !important;
  margin-bottom:3px !important;
}

#mapScreen .iq-world-card p{
  font-size:12px !important;
  line-height:1.34 !important;
}

#mapScreen .iq-world-state-v51{
  margin-top:9px !important;
  padding:6px 9px;
  font-size:11px !important;
}

#mapScreen .iq-world-state-v51 b{
  font-size:11px;
}

#mapScreen .iq-world-progress{
  height:7px;
  margin-top:8px;
}

#mapScreen .iq-world-tags{
  margin-top:8px !important;
  gap:5px !important;
}

#mapScreen .iq-world-tags .tag{
  padding:4px 7px !important;
  font-size:9.5px !important;
}

#mapScreen .iq-world-footer-v51{
  margin-top:9px;
  gap:8px;
}

#mapScreen .iq-world-action{
  min-height:34px;
  padding:7px 11px !important;
  border-radius:12px !important;
  font-size:12px;
}

#mapScreen .iq-world-footer-v51 small{
  font-size:10.5px;
}

#mapScreen .iq-xenon-card{
  min-height:150px !important;
}

@media(max-width:1280px){
  #mapScreen .iq-world-card-v51{
    min-height:156px !important;
  }
}

@media(max-width:760px){
  #mapScreen .iq-world-card-v51{
    min-height:auto !important;
    padding-left:62px !important;
  }
}

@media(max-width:520px){
  #mapScreen .iq-world-card-v51{
    padding:14px !important;
  }
}

/* =========================================================
   V52 · IA OMEGA en Campaña 1
   Asistente pedagógico local: analiza progreso sin revelar
   respuestas exactas.
========================================================= */

.iq-nav-ai{
  border-color:rgba(167,124,255,.24) !important;
  background:
    radial-gradient(circle at 0% 0%,rgba(167,124,255,.16),transparent 40%),
    rgba(255,255,255,.045) !important;
}

#aiScreen.iq-ai-pro{
  padding:18px;
  border-radius:28px;
  background:
    radial-gradient(circle at 8% 0%,rgba(167,124,255,.16),transparent 34%),
    radial-gradient(circle at 92% 4%,rgba(70,216,255,.12),transparent 35%),
    linear-gradient(180deg,rgba(8,25,46,.96),rgba(4,13,27,.98));
  border:1px solid rgba(167,124,255,.22);
  box-shadow:0 18px 46px rgba(0,0,0,.24);
}

.iq-ai-hero{
  display:flex;
  align-items:stretch;
  justify-content:space-between;
  gap:14px;
  padding:24px 26px;
  margin-bottom:12px;
  border-radius:26px;
  background:
    radial-gradient(circle at 0% 0%,rgba(70,216,255,.10),transparent 38%),
    rgba(255,255,255,.045);
  border:1px solid rgba(120,180,255,.16);
}

.iq-ai-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
  padding:8px 12px;
  border-radius:999px;
  color:#e5d6ff;
  background:rgba(167,124,255,.12);
  border:1px solid rgba(167,124,255,.24);
  font-size:12px;
  font-weight:950;
  text-transform:uppercase;
}

.iq-ai-hero h2{
  margin:0;
  color:#fff;
  font-size:clamp(34px,4.4vw,58px);
  line-height:1;
  letter-spacing:-.05em;
}

.iq-ai-hero p{
  max-width:830px;
  margin:10px 0 0;
  color:#aebfd4;
  font-size:15px;
  line-height:1.55;
}

.iq-ai-status{
  min-width:185px;
  padding:14px;
  border-radius:22px;
  background:rgba(7,21,38,.92);
  border:1px solid rgba(167,124,255,.20);
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.iq-ai-status span,
.iq-ai-metric span{
  color:#90a9c5;
  font-size:10.5px;
  font-weight:950;
  text-transform:uppercase;
}

.iq-ai-status b{
  color:#fff;
  font-size:28px;
  line-height:1;
}

.iq-ai-status small{
  color:#aebfd4;
  font-size:11px;
}

.iq-ai-summary{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin-bottom:12px;
}

.iq-ai-metric{
  padding:14px;
  border-radius:20px;
  background:
    radial-gradient(circle at 100% 0%,rgba(167,124,255,.09),transparent 36%),
    rgba(7,21,38,.92);
  border:1px solid rgba(120,180,255,.16);
}

.iq-ai-metric b{
  display:block;
  margin:6px 0 4px;
  color:#fff;
  font-size:clamp(24px,3vw,36px);
  line-height:1;
}

.iq-ai-metric small{
  color:#aebfd4;
  font-size:11.5px;
}

.iq-ai-layout{
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(280px,.85fr) minmax(280px,.85fr);
  gap:12px;
  margin-bottom:12px;
}

.iq-ai-card{
  padding:17px;
  border-radius:23px;
  background:
    radial-gradient(circle at 100% 0%,rgba(70,216,255,.08),transparent 36%),
    rgba(7,21,38,.94);
  border:1px solid rgba(120,180,255,.16);
  box-shadow:0 14px 32px rgba(0,0,0,.18);
}

.iq-ai-main{
  border-color:rgba(167,124,255,.24);
}

.iq-ai-card-head{
  display:flex;
  gap:12px;
  align-items:flex-start;
  margin-bottom:12px;
}

.iq-ai-card-head > span{
  width:46px;
  height:46px;
  flex:0 0 46px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:16px;
  font-size:25px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.09);
}

.iq-ai-card-head h3{
  margin:0;
  color:#fff;
  font-size:20px;
  line-height:1.12;
}

.iq-ai-card-head p{
  margin:4px 0 0;
  color:#9fb5cf;
  font-size:12.5px;
  line-height:1.35;
}

.iq-ai-message{
  min-height:118px;
  padding:15px;
  border-radius:18px;
  color:#dceeff;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.08);
  font-size:15px;
  line-height:1.55;
}

.iq-ai-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px;
}

.iq-ai-actions .btn{
  min-height:38px;
  border-radius:14px;
}

.iq-ai-next-world{
  display:flex;
  gap:12px;
  align-items:flex-start;
}

.iq-ai-next-icon{
  width:58px;
  height:58px;
  flex:0 0 58px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:18px;
  font-size:32px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.09);
}

.iq-ai-next-world span{
  color:#90a9c5;
  font-size:10.5px;
  font-weight:950;
  text-transform:uppercase;
}

.iq-ai-next-world h4{
  margin:5px 0 4px;
  color:#fff;
  font-size:19px;
}

.iq-ai-next-world p{
  margin:0 0 10px;
  color:#aebfd4;
  font-size:13px;
}

.iq-ai-focus{
  display:grid;
  gap:8px;
}

.iq-ai-focus-item{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:10px;
  border-radius:16px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.08);
}

.iq-ai-focus-item > span{
  font-size:21px;
}

.iq-ai-focus-item b{
  display:block;
  color:#fff;
  font-size:13px;
}

.iq-ai-focus-item small{
  display:block;
  margin-top:2px;
  color:#aebfd4;
  font-size:11.5px;
  line-height:1.35;
}

.iq-ai-topics-card{
  margin-top:0;
}

.iq-ai-topic-bars{
  display:grid;
  gap:8px;
}

.iq-ai-topic-row{
  display:grid;
  grid-template-columns:minmax(180px,.8fr) minmax(0,1fr) 52px;
  gap:10px;
  align-items:center;
  padding:10px;
  border-radius:16px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.08);
}

.iq-ai-topic-name b{
  display:block;
  color:#fff;
  font-size:13px;
}

.iq-ai-topic-name span{
  color:#8fa7c3;
  font-size:11px;
}

.iq-ai-topic-track{
  height:10px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.08);
}

.iq-ai-topic-track i{
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#46d8ff,#56f39a);
}

.iq-ai-topic-row.low .iq-ai-topic-track i{
  background:linear-gradient(90deg,#ff6b8b,#ffd166);
}

.iq-ai-topic-row.mid .iq-ai-topic-track i{
  background:linear-gradient(90deg,#ffd166,#56f39a);
}

.iq-ai-topic-row strong{
  color:#fff;
  font-size:13px;
  text-align:right;
}

.iq-ai-empty{
  padding:14px;
  border-radius:16px;
  color:#aebfd4;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.08);
  font-size:13px;
}

.iq-ai-safe-note{
  margin-top:12px;
  padding:12px 14px;
  border-radius:18px;
  color:#dceeff;
  background:rgba(255,209,102,.08);
  border:1px solid rgba(255,209,102,.18);
  font-size:13px;
  line-height:1.45;
}

@media(max-width:1250px){
  .iq-ai-layout{
    grid-template-columns:1fr;
  }
}

@media(max-width:900px){
  .iq-ai-hero{
    flex-direction:column;
  }

  .iq-ai-status{
    min-width:0;
  }

  .iq-ai-summary{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .iq-ai-topic-row{
    grid-template-columns:1fr;
  }

  .iq-ai-topic-row strong{
    text-align:left;
  }
}

@media(max-width:560px){
  #aiScreen.iq-ai-pro{
    padding:12px;
  }

  .iq-ai-summary{
    grid-template-columns:1fr;
  }

  .iq-ai-next-world{
    flex-direction:column;
  }
}



/* =========================================================
   V52.1 · OMEGA visual estilo Campaña 2 + análisis V52
========================================================= */
.iq-ai-hero-copy{flex:1 1 620px;min-width:0}
.iq-ai-visual-card{
  flex:0 0 min(360px,100%);
  width:min(360px,100%);
  padding:16px;
  border-radius:24px;
  background:
    radial-gradient(circle at 18% 14%,rgba(70,216,255,.22),transparent 34%),
    radial-gradient(circle at 88% 10%,rgba(167,124,255,.22),transparent 28%),
    linear-gradient(180deg,rgba(10,23,43,.96),rgba(6,14,28,.98));
  border:1px solid rgba(124,196,255,.20);
  box-shadow:0 18px 38px rgba(0,0,0,.28);
  display:flex;
  flex-direction:column;
  gap:12px;
}
.iq-ai-visual-top{display:flex;align-items:center;gap:14px}
.iq-ai-visual-avatar{
  width:92px;height:92px;flex:0 0 92px;border-radius:24px;overflow:hidden;
  display:grid;place-items:center;
  background:linear-gradient(145deg,rgba(16,44,73,.95),rgba(30,14,56,.9));
  border:1px solid rgba(255,255,255,.09);
  box-shadow:inset 0 0 18px rgba(255,255,255,.05),0 0 28px rgba(70,216,255,.16);
}
.iq-ai-visual-avatar img{width:100%;height:100%;object-fit:contain;padding:8px;filter:drop-shadow(0 8px 14px rgba(70,216,255,.26))}
.iq-ai-visual-copy{display:flex;flex-direction:column;gap:4px;min-width:0}
.iq-ai-visual-chip{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.09);font-size:10px;font-weight:950;color:#cde5ff;text-transform:uppercase;letter-spacing:.08em}
.iq-ai-visual-copy h3{margin:0;color:#fff;font-size:22px;line-height:1.1}
.iq-ai-visual-copy small{color:#9fb8d5;font-size:12px;line-height:1.35}
.iq-ai-visual-bubble{
  padding:14px 16px;
  border-radius:20px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  color:#e3f4ff;
  line-height:1.55;
  min-height:88px;
  position:relative;
}
.iq-ai-visual-bubble::before{
  content:"";
  position:absolute;
  left:28px;
  top:-10px;
  width:18px;
  height:18px;
  background:rgba(255,255,255,.06);
  border-left:1px solid rgba(255,255,255,.08);
  border-top:1px solid rgba(255,255,255,.08);
  transform:rotate(45deg);
}
.iq-ai-visual-actions{display:flex;gap:8px;flex-wrap:wrap}
.iq-ai-visual-actions .btn{flex:1 1 150px;min-height:40px}
@media(max-width:980px){
  .iq-ai-hero{flex-direction:column}
  .iq-ai-visual-card{width:100%;flex:1 1 auto}
}
@media(max-width:640px){
  .iq-ai-visual-top{align-items:flex-start}
  .iq-ai-visual-avatar{width:82px;height:82px;flex-basis:82px}
}


/* V53 · Protocolo PRIME · Código de acceso Campaña 3 */
#eventScreen p{white-space:pre-line}
.iq-progress-metric small,.iq-report-metric small{overflow-wrap:anywhere}


/* ===== V64 · Aprendizaje activo / Taller OMEGA ===== */
.iq-learning-hint{
  display:none;
  margin:10px 0 14px;
  padding:10px 12px;
  border:1px solid rgba(84,214,255,.24);
  border-radius:12px;
  background:rgba(20,42,61,.72);
  color:#dff7ff;
  font-size:.92rem;
  line-height:1.45;
}
.iq-learning-hint.show{display:block}
.iq-feedback-learn{display:inline-block;margin-top:7px;color:#dff7ff;line-height:1.45}
.iq-lab-overlay{
  position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;
  padding:18px;background:rgba(2,8,16,.82);backdrop-filter:blur(9px);
}
.iq-lab-overlay.open{display:flex}
.iq-lab-card{
  position:relative;width:min(760px,96vw);max-height:90vh;overflow:auto;
  padding:24px;border-radius:22px;border:1px solid rgba(85,224,255,.3);
  background:linear-gradient(180deg,rgba(11,31,49,.98),rgba(7,18,32,.98));
  box-shadow:0 26px 80px rgba(0,0,0,.48);
}
.iq-lab-close{
  position:absolute;right:14px;top:12px;width:38px;height:38px;border:0;border-radius:50%;
  background:rgba(255,255,255,.08);color:#fff;font-size:25px;cursor:pointer
}
.iq-lab-kicker{font-size:.78rem;font-weight:900;letter-spacing:.14em;color:#72e6ff}
.iq-lab-card h2{margin:7px 42px 5px 0}
.iq-lab-intro{color:var(--muted);line-height:1.5}
.iq-lab-feedback{min-height:28px;margin-top:14px;font-weight:700;color:#eafaff}
.iq-lab-target{display:inline-flex;vertical-align:top;flex-direction:column;gap:8px;margin:10px 18px 12px 0}
.iq-led-grid{display:grid;grid-template-columns:repeat(5,42px);gap:7px;padding:12px;border-radius:16px;background:#06121d}
.iq-led-grid button,.iq-led-grid span{
  width:42px;height:42px;border-radius:8px;border:1px solid rgba(120,210,255,.25);background:#132a39
}
.iq-led-grid button{cursor:pointer}
.iq-led-grid button.on,.iq-led-grid span.on{background:#ffe34d;box-shadow:0 0 18px rgba(255,227,77,.55)}
.iq-led-mini{grid-template-columns:repeat(5,24px);gap:4px}
.iq-led-mini span{width:24px;height:24px;border-radius:5px}
.iq-lab-check{display:block;margin-top:8px}
.iq-code-lab{display:grid;gap:8px;margin:18px 0;padding:16px;border-radius:15px;background:#06131f;border:1px solid rgba(84,214,255,.17)}
.iq-code-lab code{display:block;color:#bff4ff;font-size:1rem}
.iq-lab-question{font-size:1.06rem;font-weight:800}
.iq-lab-options{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.iq-lab-options button{
  flex:1 1 130px;padding:13px 14px;border-radius:13px;border:1px solid rgba(95,221,255,.3);
  background:#10283a;color:#fff;font-weight:800;cursor:pointer
}
.iq-lab-options button:hover{transform:translateY(-1px);border-color:rgba(95,221,255,.7)}
.iq-lab-options-stack{flex-direction:column}
.iq-lab-options-stack button{text-align:left}
.iq-logic-map,.iq-rover-line{
  display:flex;align-items:center;justify-content:space-between;gap:10px;margin:18px 0;
  padding:18px;border-radius:15px;background:rgba(10,28,43,.82);font-weight:900
}
.iq-rover-line{justify-content:center;font-size:1.55rem}
.iq-rover-line span{display:inline-grid;place-items:center;width:44px;height:44px;border:1px dashed rgba(255,255,255,.24);border-radius:9px}
@media(max-width:620px){
  .iq-lab-card{padding:20px 15px}
  .iq-led-grid{grid-template-columns:repeat(5,34px)}
  .iq-led-grid button,.iq-led-grid span{width:34px;height:34px}
  .iq-led-mini{grid-template-columns:repeat(5,20px)}
  .iq-led-mini span{width:20px;height:20px}
}


/* ===== V67 · Talleres OMEGA por mundo ===== */
.iq-event-flow{
  display:grid;grid-template-columns:repeat(3,minmax(54px,1fr));gap:10px;
  align-items:center;margin:16px 0;padding:14px;border:1px solid rgba(124,234,255,.22);
  border-radius:16px;background:rgba(5,20,38,.55);text-align:center
}
.iq-event-flow span{padding:9px 7px;border-radius:12px;background:rgba(255,255,255,.06);font-weight:800}
.iq-event-flow b{opacity:.72}
.iq-sensor-card{
  margin:14px auto 18px;max-width:420px;padding:16px;border-radius:18px;
  background:linear-gradient(180deg,rgba(10,31,52,.9),rgba(7,17,31,.9));
  border:1px solid rgba(124,234,255,.22);text-align:center
}
.iq-sensor-value{font-size:clamp(2rem,7vw,3.8rem);font-weight:900;letter-spacing:-.04em}
.iq-sensor-value small{font-size:.34em;opacity:.72;letter-spacing:0}
.iq-thermo-bar,.iq-light-bar{
  height:12px;margin-top:12px;border-radius:999px;background:rgba(255,255,255,.09);
  overflow:hidden;border:1px solid rgba(255,255,255,.08)
}
.iq-thermo-bar span,.iq-light-bar span{display:block;height:100%;border-radius:inherit;background:currentColor;opacity:.8}
.iq-motion-demo{
  display:flex;gap:12px;align-items:center;justify-content:center;margin:16px 0;
  font-size:1.7rem;padding:14px;border-radius:16px;background:rgba(255,255,255,.045)
}
.iq-motion-demo b{font-size:.85rem;letter-spacing:.12em}
.iq-compass{
  width:160px;height:160px;margin:10px auto 4px;border:2px solid rgba(124,234,255,.46);
  border-radius:50%;position:relative;background:radial-gradient(circle,rgba(124,234,255,.08),rgba(7,17,31,.7));
  box-shadow:inset 0 0 24px rgba(124,234,255,.08)
}
.iq-compass span{position:absolute;font-weight:900;font-size:.9rem}
.iq-compass-n{top:8px;left:50%;transform:translateX(-50%)}
.iq-compass-e{right:10px;top:50%;transform:translateY(-50%)}
.iq-compass-s{bottom:8px;left:50%;transform:translateX(-50%)}
.iq-compass-o{left:10px;top:50%;transform:translateY(-50%)}
.iq-compass i{
  position:absolute;left:50%;top:50%;width:54px;transform-origin:0 50%;
  font-style:normal;font-size:1.9rem;line-height:1;filter:drop-shadow(0 0 8px rgba(124,234,255,.4))
}
.iq-degree{text-align:center;font-size:1.65rem;margin-bottom:12px}
@media (max-width:560px){
  .iq-event-flow{grid-template-columns:1fr auto 1fr;gap:6px}
  .iq-event-flow span{font-size:.84rem}
  .iq-compass{width:138px;height:138px}
}


/* =========================================================
   V69.4 · Titán XENON visual más definido
========================================================= */
.xenon-titan-card{
  position:relative;
  width:190px;
  height:168px;
  margin:0 auto;
  filter:drop-shadow(0 0 24px rgba(255,86,120,.24)) drop-shadow(0 0 38px rgba(103,94,255,.18));
  animation:godFloat 2.1s ease-in-out infinite;
}
.xenon-titan-halo{
  position:absolute;inset:14px;
  border-radius:50%;
  background:
    radial-gradient(circle, rgba(255,90,128,.24) 0 18%, rgba(133,88,255,.20) 19% 37%, rgba(40,20,80,.08) 38% 62%, transparent 64%);
  filter:blur(4px);
}
.xenon-titan-horns{
  position:absolute;left:42px;right:42px;top:10px;height:34px;
}
.xenon-titan-horns::before,.xenon-titan-horns::after{
  content:"";position:absolute;top:0;width:32px;height:32px;
  background:linear-gradient(180deg,#ff4f74,#8d49ff);
  clip-path:polygon(50% 0,100% 100%,0 100%);
  filter:drop-shadow(0 0 10px rgba(255,79,116,.35));
}
.xenon-titan-horns::before{left:0;transform:rotate(-14deg)}
.xenon-titan-horns::after{right:0;transform:rotate(14deg)}
.xenon-titan-shell{
  position:absolute;left:37px;top:24px;width:116px;height:116px;border-radius:24px;
  border:2px solid rgba(255,255,255,.12);
  background:
    radial-gradient(circle at 26% 18%, rgba(255,255,255,.18), transparent 18%),
    linear-gradient(180deg, rgba(146,171,255,.20), rgba(8,10,16,.16) 26%, rgba(7,10,18,.96) 100%),
    linear-gradient(135deg,#2b3658,#0e1423 68%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 0 24px rgba(255,96,128,.10),
    0 20px 44px rgba(0,0,0,.38);
}
.xenon-titan-shell::before{
  content:"";position:absolute;left:16px;right:16px;top:20px;height:26px;
  background:
    radial-gradient(circle at 16px 19px,#ff587e 0 4px,transparent 5px),
    radial-gradient(circle at 28px 11px,#ff587e 0 4px,transparent 5px),
    radial-gradient(circle at calc(100% - 28px) 11px,#ff587e 0 4px,transparent 5px),
    radial-gradient(circle at calc(100% - 16px) 19px,#ff587e 0 4px,transparent 5px);
  filter:drop-shadow(0 0 10px rgba(255,88,126,.52));
}
.xenon-titan-leds{
  position:absolute;left:20px;right:20px;bottom:28px;display:grid;
  grid-template-columns:repeat(5,1fr);gap:5px 6px;
}
.xenon-titan-leds span{
  width:10px;height:10px;border-radius:50%;
  background:#ffb14c;
  box-shadow:0 0 10px rgba(255,177,76,.55);
}
.xenon-titan-leds span:nth-child(1),
.xenon-titan-leds span:nth-child(5),
.xenon-titan-leds span:nth-child(6),
.xenon-titan-leds span:nth-child(10){opacity:.82}
.xenon-titan-mouth{
  position:absolute;left:32px;right:32px;top:68px;height:10px;
  background:linear-gradient(90deg,#ffb14c,#ff6e00);
  clip-path:polygon(0 0,100% 0,82% 100%,50% 52%,18% 100%);
  filter:drop-shadow(0 0 10px rgba(255,110,0,.42));
}
.xenon-titan-core{
  position:absolute;left:74px;bottom:16px;width:42px;height:42px;border-radius:50%;
  background:radial-gradient(circle,#fff1b0 0 16%, #ff5a80 36%, #6d4dff 74%, rgba(109,77,255,0) 75%);
  box-shadow:0 0 16px rgba(255,90,128,.45),0 0 26px rgba(109,77,255,.36);
}
.xenon-titan-arms{
  position:absolute;top:74px;width:26px;height:58px;border-radius:999px;
  background:linear-gradient(180deg,#3b4d77,#131b2f);
  border:1px solid rgba(255,255,255,.08);
}
.xenon-titan-arms.left{left:18px;transform:rotate(18deg)}
.xenon-titan-arms.right{right:18px;transform:rotate(-18deg)}
#godBoss.damage-1 .xenon-titan-shell{box-shadow:inset 0 0 24px rgba(255,96,128,.22),0 20px 44px rgba(0,0,0,.38)}
#godBoss.damage-2{transform:translateY(4px) scale(.98);filter:grayscale(.18) drop-shadow(0 0 18px rgba(255,88,126,.18))}
#godBoss.damage-2 .xenon-titan-horns{opacity:.78}
#godBoss.damage-3{transform:translateY(7px) scale(.94);filter:grayscale(.45) brightness(.84)}
#godBoss.damage-3 .xenon-titan-core{opacity:.38}
#godBoss.damage-3 .xenon-titan-shell::before{filter:drop-shadow(0 0 4px rgba(255,88,126,.16));opacity:.6}