:root{
  --ink:#0d0b2e;--deep:#0a0a2e;--panel:#0f0d3a;--panel2:#141246;
  --gold:#c9a84c;--gold2:#ffd700;--gold3:#fff4c2;
  --ember:#c0392b;--flame:#e74c3c;
  --teal:#4ecdc4;--teal2:#00b4d8;
  --violet:#6b35b8;--violet2:#9b59b6;
  --text:#f0e6d3;--muted:#8899aa;--faint:#556677;
  --green:#27ae60;--green2:#2ecc71;
  --heart:#e74c3c;
  --border:rgba(201,168,76,.35);--border2:rgba(201,168,76,.75);
  --tx-dur:.28s;
  --bg-base:#050514;--gold-dark:#8b6914;
}
/* ── Paleta Curso 2ºESO: Esmeralda ── */
body.curso-2eso{
  --gold:#6dbf67;--gold2:#2ecc71;--gold3:#d4f4e0;
  --gold-dark:#2a7a3a;
  --border:rgba(46,204,113,.32);--border2:rgba(46,204,113,.72);
  --panel:#081f10;--panel2:#0d2a16;
  --bg-base:#050f08;
  background-color:#080f0a;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.6' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 65% 55% at 8% 15%,rgba(20,70,35,.5) 0%,transparent 55%),
    radial-gradient(ellipse 55% 60% at 92% 88%,rgba(24,140,60,.18) 0%,transparent 55%),
    radial-gradient(ellipse 45% 40% at 50% 50%,rgba(15,45,22,.3) 0%,transparent 55%),
    radial-gradient(circle at 78% 28%,rgba(39,174,96,.18) 0%,transparent 40%),
    linear-gradient(170deg,#080f0a 0%,#0e2016 50%,#080f0a 100%);
}
/* ── Paleta Curso 3ºESO: Ámbar ── */
body.curso-3eso{
  --gold:#d4820a;--gold2:#f0a500;--gold3:#fef3d0;
  --gold-dark:#9a4f08;
  --border:rgba(230,126,34,.32);--border2:rgba(230,126,34,.72);
  --panel:#1e0e04;--panel2:#2a1408;
  --bg-base:#0f0800;
  background-color:#0f0800;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.6' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 65% 55% at 8% 15%,rgba(90,40,10,.5) 0%,transparent 55%),
    radial-gradient(ellipse 55% 60% at 92% 88%,rgba(180,80,10,.16) 0%,transparent 55%),
    radial-gradient(ellipse 45% 40% at 50% 50%,rgba(60,28,8,.3) 0%,transparent 55%),
    radial-gradient(circle at 78% 28%,rgba(200,100,20,.18) 0%,transparent 40%),
    linear-gradient(170deg,#0f0800 0%,#201408 50%,#0f0800 100%);
}
body.curso-bach{
  --gold:#d4af37;--gold2:#ffd700;--gold3:#fff8e1;
  --gold-dark:#8b6914;
  --border:rgba(212,175,55,.35);--border2:rgba(212,175,55,.78);
  --panel:#100c00;--panel2:#1c1400;
  --bg-base:#0a0800;
  background-color:#0a0800;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.6' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 65% 55% at 8% 15%,rgba(180,130,0,.45) 0%,transparent 55%),
    radial-gradient(ellipse 55% 60% at 92% 88%,rgba(200,150,20,.18) 0%,transparent 55%),
    radial-gradient(ellipse 45% 40% at 50% 50%,rgba(140,100,0,.28) 0%,transparent 55%),
    radial-gradient(circle at 78% 28%,rgba(255,210,50,.16) 0%,transparent 40%),
    linear-gradient(170deg,#0a0800 0%,#1a1200 50%,#0a0800 100%);
}
/* ── Pantallas pre-juego: paleta siempre neutral ── */
body.curso-2eso #s-title, body.curso-2eso #s-course,
body.curso-3eso #s-title, body.curso-3eso #s-course,
body.curso-bach #s-title, body.curso-bach #s-course {
  --gold:#c9a84c;--gold2:#ffd700;--gold3:#fff4c2;
  --gold-dark:#8b6914;
  --border:rgba(201,168,76,.35);--border2:rgba(201,168,76,.75);
  --panel:#0f0d3a;--panel2:#141246;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:20px;scroll-behavior:smooth;background-color:#0a0820}
body{font-family:'Crimson Pro',Georgia,serif;color:var(--text);min-height:100vh;overflow-x:hidden;
  background-color:#0a0820;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.6' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 65% 55% at 8% 15%,rgba(45,27,78,.45) 0%,transparent 55%),
    radial-gradient(ellipse 55% 60% at 92% 88%,rgba(24,140,120,.14) 0%,transparent 55%),
    radial-gradient(ellipse 45% 40% at 50% 50%,rgba(26,26,78,.28) 0%,transparent 55%),
    radial-gradient(circle at 78% 28%,rgba(107,53,184,.18) 0%,transparent 40%),
    linear-gradient(170deg,#0a0820 0%,#14103a 50%,#0a0820 100%);}
::-webkit-scrollbar{width:5px}::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}

/* TITLE */
#s-title{align-items:center;justify-content:center;min-height:100vh;padding:16px 16px 20px;text-align:center;position:relative;overflow-y:auto;background:radial-gradient(ellipse 100% 70% at 50% 0%,#12103a 0%,#050514 65%)}
#s-title::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;background-image:radial-gradient(2px 2px at 8% 4%,rgba(255,255,240,1),transparent),radial-gradient(1px 1px at 22% 11%,rgba(255,255,255,.87),transparent),radial-gradient(3px 3px at 36% 2%,rgba(255,250,200,.97),transparent),radial-gradient(1px 1px at 49% 17%,rgba(255,255,255,.78),transparent),radial-gradient(2px 2px at 62% 7%,rgba(255,255,255,.98),transparent),radial-gradient(2px 2px at 75% 13%,rgba(255,230,120,.85),transparent),radial-gradient(2px 2px at 89% 5%,rgba(255,255,255,.97),transparent),radial-gradient(1px 1px at 4% 27%,rgba(255,255,255,.7),transparent),radial-gradient(1px 1px at 17% 34%,rgba(255,255,255,.82),transparent),radial-gradient(2px 2px at 31% 21%,rgba(200,215,255,.78),transparent),radial-gradient(1px 1px at 44% 42%,rgba(255,255,255,.62),transparent),radial-gradient(1px 1px at 57% 29%,rgba(255,255,255,.78),transparent),radial-gradient(1px 1px at 70% 23%,rgba(255,255,255,.68),transparent),radial-gradient(2px 2px at 82% 37%,rgba(255,250,180,.82),transparent),radial-gradient(1px 1px at 94% 19%,rgba(255,255,255,.74),transparent),radial-gradient(1px 1px at 11% 55%,rgba(255,255,255,.58),transparent),radial-gradient(1px 1px at 24% 62%,rgba(255,255,255,.65),transparent),radial-gradient(2px 2px at 39% 58%,rgba(210,210,255,.62),transparent),radial-gradient(1px 1px at 52% 70%,rgba(255,255,255,.52),transparent),radial-gradient(1px 1px at 65% 48%,rgba(255,255,255,.62),transparent),radial-gradient(1px 1px at 78% 64%,rgba(255,255,255,.48),transparent),radial-gradient(1px 1px at 91% 53%,rgba(255,255,255,.58),transparent),radial-gradient(1px 1px at 6% 75%,rgba(255,255,255,.42),transparent),radial-gradient(2px 2px at 19% 82%,rgba(255,250,180,.52),transparent),radial-gradient(1px 1px at 33% 88%,rgba(255,255,255,.48),transparent),radial-gradient(1px 1px at 46% 78%,rgba(255,255,255,.42),transparent),radial-gradient(1px 1px at 59% 85%,rgba(255,255,255,.38),transparent),radial-gradient(1px 1px at 72% 90%,rgba(255,255,255,.38),transparent),radial-gradient(1px 1px at 85% 76%,rgba(255,255,255,.48),transparent),radial-gradient(1px 1px at 97% 83%,rgba(255,255,255,.42),transparent);animation:star-twinkle 8s ease-in-out infinite alternate}
@keyframes star-twinkle{0%{opacity:.75}100%{opacity:1}}
@keyframes rune-drift{from{transform:translateY(0)}to{transform:translateY(-60px)}}
.t-flask{font-size:3.8rem;line-height:1;filter:drop-shadow(0 0 18px rgba(201,168,76,.95)) drop-shadow(0 0 50px rgba(78,205,196,.55)) drop-shadow(0 0 85px rgba(255,215,0,.28));animation:bob 3.5s ease-in-out infinite;margin-bottom:16px;position:relative;z-index:1}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.t-title{font-family:'UnifrakturMaguntia',cursive;font-size:clamp(2.2rem,6vw,4.8rem);line-height:1.12;background:linear-gradient(150deg,#8b6914,#c9a84c 28%,#ffd700 52%,#c9a84c 76%,#8b6914);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:1px;margin-bottom:8px;position:relative;z-index:1;animation:title-glow 3s ease-in-out infinite alternate}
@keyframes title-glow{0%{filter:drop-shadow(0 0 8px rgba(201,168,76,.35))}100%{filter:drop-shadow(0 0 22px rgba(255,215,0,.8)) drop-shadow(0 2px 4px rgba(0,0,0,.6))}}
.t-sub{font-family:'Cinzel',serif;font-size:.95rem;color:var(--teal2);letter-spacing:5px;margin-bottom:4px;position:relative;z-index:1}
.t-rule{width:250px;height:2px;margin:14px auto;background:linear-gradient(90deg,transparent,var(--gold),var(--gold2),var(--gold),transparent);position:relative;z-index:1}
.t-rule::before,.t-rule::after{content:'◆';position:absolute;top:-8px;color:var(--gold2);font-size:.75rem;line-height:1;text-shadow:0 0 10px rgba(255,215,0,.7)}
.t-rule::before{left:-10px}.t-rule::after{right:-10px}
.t-authors{font-style:italic;color:var(--muted);font-size:.82rem;margin-bottom:22px;position:relative;z-index:1}
.btn-start{font-family:'Cinzel',serif;font-weight:700;font-size:1.18rem;letter-spacing:4px;padding:16px 62px 16px 44px;border-radius:2px;cursor:pointer;position:relative;overflow:hidden;background:linear-gradient(180deg,#19163c 0%,#0d0b2e 100%);border:2px solid var(--gold-dark);color:var(--gold2);box-shadow:0 0 22px rgba(201,168,76,.18),inset 0 1px 0 rgba(255,255,255,.06),inset 0 -1px 0 rgba(0,0,0,.4);transition:all .3s;z-index:1}
.btn-start::before{content:'▶';position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--gold);font-size:.75rem;opacity:0;transition:opacity .2s,transform .2s}
.btn-start::after{content:'';position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,215,0,.08) 50%,transparent 70%);transform:translateX(-100%);transition:transform .55s}
.btn-start:hover::before{opacity:1;transform:translateY(-50%) translateX(4px)}
.btn-start:hover::after{transform:translateX(100%)}
.btn-start:hover{border-color:var(--gold2);box-shadow:0 0 38px rgba(255,215,0,.28),inset 0 0 12px rgba(201,168,76,.06);transform:translateY(-2px);color:var(--gold3)}

/* CHAR CREATE */
#s-char{align-items:center;justify-content:center;flex:1;overflow-y:auto;padding:40px 20px;text-align:center}
.char-box{max-width:520px;width:100%;background:var(--panel);border:1px solid var(--border2);border-radius:12px;padding:40px 36px}
.char-em{font-size:5rem;margin-bottom:18px;animation:bob 3s ease-in-out infinite;display:block}
.char-sprite-preview{width:80px;height:124px;image-rendering:pixelated;display:block;margin:0 auto 18px;animation:bob 3s ease-in-out infinite}
.cg-sprite{width:52px;height:81px;image-rendering:pixelated;display:block;margin:0 auto 6px}
.cc-sprite{width:44px;height:68px;image-rendering:pixelated;display:block;margin:0 auto 5px}
.char-h{font-family:'Cinzel',serif;font-size:1.55rem;color:var(--gold2);margin-bottom:6px}
.char-p{color:var(--muted);font-size:1.02rem;margin-bottom:28px;line-height:1.75}
.char-inp{width:100%;background:rgba(255,255,255,.05);border:2px solid var(--border2);border-radius:6px;padding:15px 17px;text-align:center;font-family:'Cinzel',serif;font-size:1.25rem;color:var(--gold2);letter-spacing:2px;outline:none;transition:all .2s;margin-bottom:22px}
.char-inp:focus{border-color:var(--teal);box-shadow:0 0 20px rgba(24,154,128,.3)}
.char-cls-lbl{font-family:'Cinzel',serif;font-size:.78rem;color:var(--muted);letter-spacing:2px;margin-bottom:12px}
.char-class{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px;margin-bottom:24px}
.cc{background:rgba(0,0,0,.32);border:2px solid var(--border);border-radius:8px;padding:13px 7px;cursor:pointer;transition:all .2s;text-align:center}
.cc:hover,.cc.sel{border-color:var(--gold2);background:rgba(200,145,30,.12)}
.cc.sel{box-shadow:0 0 16px rgba(200,145,30,.3)}
.cc-em{font-size:2rem;display:block;margin-bottom:5px}
.cc-n{font-family:'Cinzel',serif;font-size:.72rem;color:var(--gold);letter-spacing:1px}
.cc-d{font-size:.84rem;color:var(--muted);margin-top:3px}
.btn-create{width:100%;font-family:'Cinzel',serif;font-weight:700;font-size:1.05rem;letter-spacing:2px;padding:17px;border-radius:5px;cursor:pointer;background:linear-gradient(135deg,#1a4a20,#2a8838);border:2px solid var(--green2);color:#fff;box-shadow:0 0 22px rgba(40,168,88,.28);transition:all .3s}
.btn-create:hover{box-shadow:0 0 42px rgba(40,168,88,.5);transform:translateY(-2px)}

/* HUD */
#hud{display:none;z-index:100}


.hud-name{font-family:'Cinzel',serif;font-size:.88rem;color:var(--gold2);font-weight:700}
.hud-clslbl{font-size:.72rem;color:var(--teal2);letter-spacing:1px}
.hud-lives{display:flex;gap:4px;align-items:center}
.heart{font-size:1.35rem;line-height:1;transition:transform .2s,filter .2s}
.heart.lost{filter:grayscale(1);opacity:.3}
.heart.pulse{animation:hpulse .35s ease}
@keyframes hpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.5)}}
/* .hud-xp removed - now .hud-xp-wrap */
.hud-xp-bar{height:7px;background:rgba(255,255,255,.08);border-radius:4px;overflow:hidden;margin-top:3px}
.hud-xp-fill{height:100%;background:linear-gradient(90deg,var(--violet),var(--violet2));transition:width .5s}
.hud-xp-lbl{font-family:'Press Start 2P',monospace;font-size:.4rem;color:var(--violet2);display:flex;justify-content:space-between}
/* .hud-coins in layout section */
.hud-coins span:first-child{font-size:.95rem}
.hbtn{font-family:'Cinzel',serif;font-size:.76rem;background:rgba(200,145,30,.14);border:1px solid var(--border);color:var(--gold);padding:5px 12px;border-radius:4px;cursor:pointer;letter-spacing:1px;transition:all .2s;white-space:nowrap}
.hbtn:hover{background:rgba(200,145,30,.3);border-color:var(--gold2)}
.hbtn-report{background:rgba(56,208,176,.14);border-color:var(--teal);color:var(--teal2)}
.hbtn-report:hover{background:rgba(56,208,176,.3)!important;border-color:var(--teal2)!important}
.hbtn-clear{background:rgba(100,50,50,.18);border-color:rgba(184,42,24,.4);color:rgba(184,42,24,.6);opacity:.55;font-size:.65rem;padding:5px 8px}
.hbtn-clear:hover{opacity:1;background:rgba(184,42,24,.18)!important;border-color:var(--ember)!important}

/* MAP GLOBAL PROGRESS */
.map-global{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.map-global-bar{flex:1;min-width:120px;height:9px;background:rgba(8,6,24,.85);border-radius:5px;overflow:hidden;border:1px solid rgba(200,145,30,.35);box-shadow:inset 0 1px 4px rgba(0,0,0,.6),0 0 6px rgba(200,145,30,.08)}
.map-global-fill{height:100%;background:linear-gradient(90deg,var(--gold),var(--gold2),#ffe060);transition:width .7s;border-radius:5px}
.map-global-pct{font-family:'Press Start 2P',monospace;font-size:.5rem;color:var(--gold2);white-space:nowrap}
.btn-map-report{font-family:'Cinzel',serif;font-weight:700;font-size:.78rem;letter-spacing:1px;padding:6px 14px;border-radius:4px;cursor:pointer;background:rgba(56,208,176,.14);border:1px solid var(--teal);color:var(--teal2);transition:all .2s;white-space:nowrap}
.btn-map-report:hover{background:rgba(56,208,176,.3)}

/* MARIO MAP */
/* Map screen uses full viewport height */
#s-map{display:flex;flex-direction:column}
.mario-map-wrap{display:flex;flex-direction:column;flex:1;max-width:1100px;margin:0 auto;width:100%;padding:14px 14px 0;min-height:0;overflow-y:auto}
.mario-map-hdr{display:flex;align-items:center;gap:10px;padding:4px 0;margin-bottom:4px}
.map-h{font-family:'UnifrakturMaguntia',cursive;font-size:clamp(1.5rem,4vw,2.4rem);color:var(--gold2);margin-right:6px}

/* World overworld canvas */
.world-map-canvas{
  position:relative;
  width:100%;
  height:min(60vh,480px);
  background:
    radial-gradient(ellipse 90% 70% at 50% 60%, rgba(10,30,20,.8) 0%, transparent 80%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Crect fill='%230e0c22' width='60' height='60'/%3E%3Ccircle cx='30' cy='30' r='1' fill='rgba(200,145,30,.06)'/%3E%3C/svg%3E");
  background-color:var(--deep);
  border:2px solid var(--border);
  border-radius:12px;
  overflow:hidden;
  margin-bottom:10px;
  flex-shrink:0;
}
/* Path lines drawn by SVG overlay */
.map-svg-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
/* World node */
.world-node{
  position:absolute;
  transform:translate(-50%,-50%);
  cursor:pointer;
  text-align:center;
  transition:transform .2s,filter .2s;
  z-index:2;
}
.world-node:hover .wn-icon{transform:scale(1.18);filter:drop-shadow(0 0 18px var(--nodeColor,var(--gold)))}
.world-node.wn-locked{cursor:not-allowed}
.world-node.wn-locked .wn-icon,.world-node.wn-locked .wn-label,.world-node.wn-locked .wn-badge{opacity:.5!important;filter:grayscale(.85) blur(.5px)!important;transition:none!important}
.world-node.wn-locked:hover .wn-icon{transform:none!important;filter:grayscale(.85) blur(.5px)!important}
/* Nube primaria: cuerpo principal sobre el nodo */
.world-node.wn-locked::before{content:'';position:absolute;width:130px;height:52px;top:-12px;left:50%;transform:translateX(-50%);background:rgba(200,215,240,.62);border-radius:45% 55% 58% 42%/50% 46% 54% 50%;filter:blur(9px);z-index:11;pointer-events:none;animation:cloud-drift-a 9s ease-in-out infinite}
/* Nube secundaria: más abajo, movimiento contrario */
.world-node.wn-locked::after{content:'';position:absolute;width:100px;height:40px;top:44px;left:50%;transform:translateX(-50%);background:rgba(190,208,235,.56);border-radius:52% 48% 42% 58%/46% 54% 50% 50%;filter:blur(11px);z-index:11;pointer-events:none;animation:cloud-drift-b 12s ease-in-out infinite}
@keyframes cloud-drift-a{0%,100%{transform:translateX(-50%)}35%{transform:translateX(calc(-50% + 9px))}70%{transform:translateX(calc(-50% - 6px))}}
@keyframes cloud-drift-b{0%,100%{transform:translateX(-50%)}40%{transform:translateX(calc(-50% - 11px))}75%{transform:translateX(calc(-50% + 7px))}}
.wn-icon{
  font-size:2.6rem;
  line-height:1;
  display:block;
  transition:transform .25s,filter .25s;
  filter:drop-shadow(0 0 8px rgba(200,145,30,.4));
}
.wn-icon.wn-done{filter:drop-shadow(0 0 12px rgba(40,168,88,.7))}
.wn-label{
  font-family:'Cinzel',serif;
  font-size:.6rem;
  color:var(--gold2);
  white-space:nowrap;
  text-shadow:0 1px 4px #000,0 0 14px rgba(0,0,0,.95),0 0 22px rgba(0,0,0,.8);
  margin-top:3px;
  max-width:100px;
  overflow:hidden;
  text-overflow:ellipsis;
  letter-spacing:.5px;
  font-weight:600;
}
.wn-badge{
  font-family:'Press Start 2P',monospace;
  font-size:.35rem;
  background:var(--gold);
  color:#1a0800;
  border-radius:3px;
  padding:1px 4px;
  margin-top:1px;
  display:inline-block;
}
.wn-badge.wn-b-lock{background:rgba(100,100,100,.4);color:var(--muted)}
.wn-badge.wn-b-done{background:var(--green);color:#fff}
.wn-badge.wn-b-prog{background:rgba(24,154,128,.4);color:var(--teal2);border:1px solid var(--teal)}

/* Player sprite on map */
.map-player{
  position:absolute;
  transform:translate(-50%,-50%);
  z-index:4;
  font-size:2rem;
  filter:drop-shadow(0 0 10px rgba(200,145,30,.8));
  animation:map-bounce .9s ease-in-out infinite;
  transition:left .5s ease, top .5s ease;
  pointer-events:none;
}
@keyframes map-bounce{0%,100%{transform:translate(-50%,-60%)}50%{transform:translate(-50%,-70%)}}

/* Level panel — styled by map-and-panel-wrap context */
@keyframes fadeSlideUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.level-panel-hdr{
  display:flex;align-items:center;gap:14px;
  padding:14px 14px 16px;
  border-bottom:1px solid var(--border);
  margin-bottom:12px;
  flex-wrap:wrap;
}
.lvls{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:9px;padding-top:4px}
.lcard{background:rgba(0,0,0,.26);border:1px solid var(--border);border-radius:8px;padding:13px 14px;cursor:pointer;position:relative;overflow:hidden;transition:transform .2s,border-color .2s,box-shadow .2s}
.lcard:hover{transform:translateY(-3px);border-color:var(--gold2);box-shadow:0 7px 25px rgba(0,0,0,.5)}
.lcard.is-apuntes{border-left:3px solid var(--teal)}
.lcard.is-extra{border-left:3px solid var(--violet)}
.lcard.is-boss{border-left:3px solid var(--ember);background:rgba(18,2,2,.42)}
.lcard.is-boss:hover{border-color:var(--flame)}
.lcard.is-final{border:2px solid rgba(223,88,32,.6);background:linear-gradient(145deg,#160000,#240404);grid-column:1/-1}
.lcard.is-final:hover{box-shadow:0 0 50px rgba(184,42,24,.28)}
.lcard.is-locked{cursor:not-allowed;opacity:.42;filter:grayscale(.5)}
.lcard.is-locked:hover{transform:none;border-color:var(--border);box-shadow:none}
.lc-em{font-size:2rem;line-height:1;margin-bottom:7px;display:block}
.lcard.is-final .lc-em{font-size:3.2rem}
.lc-typelbl{font-family:'Press Start 2P',monospace;font-size:.4rem;margin-bottom:4px}
.is-apuntes .lc-typelbl{color:var(--teal2)}
.is-extra .lc-typelbl{color:var(--violet2)}
.is-boss .lc-typelbl,.is-final .lc-typelbl{color:#ff8860}
.lc-name{font-family:'Cinzel',serif;font-size:.9rem;font-weight:700;color:var(--gold2);margin-bottom:3px}
.is-boss .lc-name,.is-final .lc-name{color:#ff9966}
.lc-mon{font-style:italic;color:var(--muted);font-size:.8rem;margin-bottom:6px}
.lc-meta{display:flex;align-items:center;gap:6px}
.lc-barb{flex:1;height:3px;background:rgba(255,255,255,.07);border-radius:2px;overflow:hidden}
.lc-barf{height:100%;background:linear-gradient(90deg,var(--teal),var(--teal2));transition:width .5s}
.lc-pct{font-family:'Press Start 2P',monospace;font-size:.4rem;color:var(--teal2);min-width:32px;text-align:right}
.lc-badge{position:absolute;top:7px;right:7px;font-family:'Press Start 2P',monospace;font-size:.36rem;padding:3px 5px;border-radius:2px}
.bd-done{background:var(--gold);color:#1a0800}
.bd-boss{background:var(--ember);color:#fff}
.bd-ap{background:rgba(24,154,128,.28);color:var(--teal2);border:1px solid var(--teal)}
.bd-ex{background:rgba(112,48,160,.28);color:var(--violet2);border:1px solid var(--violet)}
.bd-prog{background:rgba(24,154,128,.2);color:var(--teal2)}
.wprog{display:flex;align-items:center;gap:9px}
.wbar{width:100px;height:5px;background:rgba(255,255,255,.08);border-radius:3px;overflow:hidden}
.wfill{height:100%;background:linear-gradient(90deg,var(--teal),var(--teal2));transition:width .5s}
.wpct{font-family:'Press Start 2P',monospace;font-size:.42rem;color:var(--teal2);min-width:32px;text-align:right}

/* CHARACTER BODY (equippable) */
.cc-portrait-wrap{position:relative;flex-shrink:0;width:80px}
.char-body-svg{width:76px;height:110px;display:block}
.char-body-svg svg{width:100%;height:100%}
/* Slot glow on equipped item */
.char-slot-helm{transition:opacity .2s}
.char-slot-armor{transition:opacity .2s}
.char-slot-weapon{transition:opacity .2s}
.char-slot-ring{transition:opacity .2s}


/* SHOP */
#s-shop{padding:0}
.shop-wrap{flex:1;overflow-y:auto;padding:0 20px 20px;max-width:900px;margin:0 auto;width:100%}
.shop-hdr{display:flex;align-items:center;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.shop-h{font-family:'UnifrakturMaguntia',cursive;font-size:2.3rem;color:var(--gold2)}
.shop-sub{color:var(--muted);font-style:italic;margin-bottom:0;text-align:center;font-size:1rem}

/* SHOP TABS */
.shop-tabs{display:none}
.shop-tab{font-family:'Cinzel',serif;font-weight:700;font-size:1rem;letter-spacing:2px;padding:12px 28px;cursor:pointer;background:transparent;border:none;color:var(--muted);border-bottom:3px solid transparent;margin-bottom:-2px;transition:all .2s;display:flex;align-items:center;gap:8px}
.shop-tab:hover{color:var(--gold2)}
.shop-tab.active{color:var(--gold2);border-bottom-color:var(--gold2);background:rgba(200,145,30,.06)}
.shop-tab .tab-count{font-family:'Press Start 2P',monospace;font-size:.38rem;background:var(--panel2);padding:3px 7px;border-radius:10px;color:var(--teal2)}
/* shop panels controlled by JS */
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.scard{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:22px 20px;text-align:center;position:relative;transition:border-color .2s, box-shadow .2s}
.scard:hover{border-color:var(--border2);box-shadow:0 4px 24px rgba(0,0,0,.5)}
.scard.s-maxed{border-color:var(--green);background:rgba(40,192,96,.07)}
.sc-em{font-size:3rem;margin-bottom:10px;display:block;filter:drop-shadow(0 0 10px rgba(200,145,30,.3))}
.sc-name{font-family:'Cinzel',serif;font-size:.82rem;color:var(--gold2);margin-bottom:4px;font-weight:700;word-break:break-word;line-height:1.3}
.sc-desc{color:var(--muted);font-size:.95rem;line-height:1.7;margin-bottom:14px}
.sc-lvl{font-family:'Press Start 2P',monospace;font-size:.46rem;color:var(--teal2);margin-bottom:10px;padding:5px 8px;background:rgba(64,232,192,.07);border-radius:4px;display:inline-block}
.sc-cost{display:flex;align-items:center;justify-content:center;gap:6px;font-family:'Press Start 2P',monospace;font-size:.55rem;color:var(--gold2);margin-bottom:12px}
.sc-cost span:first-child{font-size:1.2rem}
.btn-buy{font-family:'Cinzel',serif;font-weight:700;font-size:.9rem;letter-spacing:1px;padding:11px 20px;border-radius:6px;cursor:pointer;background:linear-gradient(135deg,#4a2c00,#9a6010);border:2px solid var(--gold2);color:#fff;transition:all .2s;width:100%}
.btn-buy:hover:not(:disabled){background:linear-gradient(135deg,#6a3c00,#c08020);box-shadow:0 0 22px rgba(210,155,40,.4)}
.btn-buy:disabled{opacity:.4;cursor:not-allowed}

/* GEAR CARDS in shop */
.shop-gear-section{margin-bottom:22px;flex-shrink:0}
.shop-gear-slot-hdr{display:flex;align-items:center;gap:12px;padding:12px 0 10px;border-bottom:1px solid var(--border);margin-bottom:12px}
.shop-gear-slot-hdr .slot-em{font-size:1.8rem}
.shop-gear-slot-hdr .slot-name{font-family:'Cinzel',serif;font-size:1.05rem;color:var(--gold2);font-weight:700;letter-spacing:2px}
.shop-gear-slot-hdr .slot-hint{font-size:.82rem;color:var(--teal2);margin-left:auto;font-style:italic}

/* Character preview in gear tab */
.shop-char-preview{
  display:flex;align-items:center;gap:18px;
  background:linear-gradient(135deg,rgba(0,0,0,.35),rgba(20,18,40,.6));
  border:1px solid var(--border2);border-radius:12px;
  padding:16px 20px;margin-bottom:20px;flex-shrink:0;
}
.shop-char-avatar{
  flex-shrink:0;background:rgba(0,0,0,.3);border-radius:10px;
  padding:8px;border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
}
.shop-char-info{flex:1;min-width:0}

.scard.gear-card{border-color:rgba(210,155,40,.35);background:linear-gradient(145deg,var(--panel),rgba(30,26,60,.9))}
.scard.gear-card.equipped{border-color:var(--teal2);background:linear-gradient(145deg,rgba(26,176,144,.1),rgba(26,176,144,.05));box-shadow:0 0 18px rgba(64,232,192,.15)}
.scard.gear-card.locked-gear{opacity:.5;filter:grayscale(.4)}
.gear-equipped-badge{position:absolute;top:10px;right:10px;background:var(--teal2);color:#001a14;font-family:'Press Start 2P',monospace;font-size:.36rem;padding:4px 8px;border-radius:3px;font-weight:700}
.gear-slot-lbl{font-family:'Press Start 2P',monospace;font-size:.4rem;color:var(--gold);letter-spacing:3px;margin-bottom:8px;padding:4px 8px;background:rgba(200,145,30,.1);border-radius:3px;display:inline-block}
.btn-equip{font-family:'Cinzel',serif;font-weight:700;font-size:.92rem;letter-spacing:1px;padding:11px 20px;border-radius:6px;cursor:pointer;background:linear-gradient(135deg,#0c3a30,#1a7060);border:2px solid var(--teal2);color:#fff;transition:all .2s;width:100%;margin-top:8px}
.btn-equip:hover:not(:disabled){box-shadow:0 0 18px rgba(64,232,192,.35);transform:translateY(-1px)}
.btn-unequip{font-family:'Cinzel',serif;font-weight:700;font-size:.92rem;letter-spacing:1px;padding:11px 20px;border-radius:6px;cursor:pointer;background:rgba(196,42,24,.15);border:2px solid var(--ember);color:#ff9966;transition:all .2s;width:100%;margin-top:6px}
.btn-unequip:hover{background:rgba(196,42,24,.35);transform:translateY(-1px)}
.btn-equip:disabled{opacity:.4;cursor:not-allowed}

/* ── GEAR MODAL ── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:800;display:flex;align-items:center;justify-content:center;padding:20px;animation:fadeIn .2s ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal-overlay.closing{animation:fadeOut .2s ease forwards}
@keyframes fadeOut{from{opacity:1}to{opacity:0}}
.gear-modal{background:var(--panel);border:2px solid var(--border2);border-radius:16px;max-width:780px;width:95%;max-height:90vh;overflow-y:auto;animation:slideUp .25s ease;margin:auto}
@keyframes slideUp{from{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}
.gear-modal-hdr{display:flex;align-items:center;gap:14px;padding:20px 24px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--panel);z-index:1}
.gear-modal-title{font-family:'Cinzel',serif;font-size:1.3rem;color:var(--gold2);font-weight:700}
.gear-modal-close{margin-left:auto;background:rgba(255,255,255,.07);border:1px solid var(--border);color:var(--muted);font-size:1.2rem;width:36px;height:36px;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}
.gear-modal-close:hover{background:rgba(255,255,255,.15);color:var(--text)}
.gear-modal-body{display:grid;grid-template-columns:auto 1fr;gap:24px;padding:24px}
.gear-modal-portrait{display:flex;flex-direction:column;align-items:center;gap:10px}
.gear-modal-portrait .char-body-svg{width:100px;height:145px}
.gear-modal-portrait .char-body-svg svg{width:100%;height:100%}
.gear-char-name{font-family:'Cinzel',serif;font-size:.9rem;color:var(--gold2);text-align:center;font-weight:700}
.gear-char-lvl{font-family:'Press Start 2P',monospace;font-size:.42rem;color:var(--violet2);text-align:center;padding:4px 10px;background:rgba(128,56,184,.2);border-radius:10px}
.gear-slots{display:flex;flex-direction:column;gap:14px}
.gear-slot-row{background:var(--panel2);border:1px solid var(--border);border-radius:10px;padding:14px 16px;display:flex;align-items:center;gap:14px;transition:border-color .2s}
.gear-slot-row.slot-filled{border-color:var(--teal2);background:rgba(26,176,144,.06)}
.gear-slot-icon{font-size:2.4rem;width:50px;text-align:center;flex-shrink:0;filter:drop-shadow(0 2px 6px rgba(0,0,0,.3));display:flex;align-items:center;justify-content:center}
.gear-slot-info{flex:1;min-width:0}
.gear-slot-label{font-family:'Press Start 2P',monospace;font-size:.38rem;color:var(--gold);letter-spacing:2px;margin-bottom:4px}
.gear-slot-item{font-family:'Cinzel',serif;font-size:.95rem;color:var(--gold2);font-weight:700}
.gear-slot-effect{font-size:.88rem;color:var(--muted);margin-top:2px}
.gear-slot-actions{display:flex;flex-direction:column;gap:5px;flex-shrink:0}
.gear-slot-btn{font-family:'Cinzel',serif;font-size:.78rem;padding:7px 14px;border-radius:5px;cursor:pointer;font-weight:700;white-space:nowrap;transition:all .2s}
.gear-slot-btn.equip{background:linear-gradient(135deg,#0c3a30,#1a7060);border:1px solid var(--teal2);color:#fff}
.gear-slot-btn.equip:hover{box-shadow:0 0 14px rgba(64,232,192,.3)}
.gear-slot-btn.unequip{background:rgba(196,42,24,.15);border:1px solid var(--ember);color:#ff9966}
.gear-slot-btn.unequip:hover{background:rgba(196,42,24,.3)}
.gear-slot-btn.change{background:rgba(200,145,30,.15);border:1px solid var(--gold);color:var(--gold2)}
.gear-modal-inv{padding:0 24px 24px}
.gear-modal-inv-title{font-family:'Cinzel',serif;font-size:.8rem;color:var(--muted);letter-spacing:3px;margin-bottom:12px;padding-top:16px;border-top:1px solid var(--border)}
.inv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.inv-item{background:var(--panel2);border:1px solid var(--border);border-radius:8px;padding:12px;display:flex;align-items:center;gap:10px;cursor:pointer;transition:all .2s}
.inv-item:hover{border-color:var(--gold2);background:rgba(200,145,30,.08)}
.inv-item.equipped{border-color:var(--teal2);background:rgba(26,176,144,.08)}
.inv-item-em{font-size:1.8rem;flex-shrink:0}
.inv-item-info{flex:1;min-width:0}
.inv-item-name{font-family:'Cinzel',serif;font-size:.82rem;color:var(--gold2);font-weight:700}
.inv-item-slot{font-size:.78rem;color:var(--muted)}

/* ── TUTORIAL MODAL ── */
.tutorial-modal{background:var(--panel);border:2px solid var(--border2);border-radius:16px;max-width:680px;width:100%;max-height:88vh;overflow-y:auto;animation:slideUp .25s ease}
.tut-hdr{background:linear-gradient(135deg,var(--panel2),var(--panel));padding:24px 28px;border-bottom:1px solid var(--border);text-align:center}
.tut-hdr h2{font-family:'UnifrakturMaguntia',cursive;font-size:2rem;color:var(--gold2);margin-bottom:6px}
.tut-hdr p{color:var(--muted);font-size:.95rem;font-style:italic}
.tut-body{padding:24px 28px}
.tut-section{margin-bottom:22px}
.tut-section h3{font-family:'Cinzel',serif;font-size:1rem;color:var(--teal2);letter-spacing:2px;margin-bottom:10px;display:flex;align-items:center;gap:8px}
.tut-section p,.tut-section li{color:var(--muted);font-size:.97rem;line-height:1.85}
.tut-section ul{list-style:none;padding:0}
.tut-section li{padding:4px 0 4px 22px;position:relative}
.tut-section li::before{content:'⚗';position:absolute;left:0;top:5px;color:var(--teal);font-size:.7rem}
.tut-card{background:var(--panel2);border:1px solid var(--border);border-radius:8px;padding:14px 16px;margin-top:8px}
.tut-btn{font-family:'Cinzel',serif;font-weight:700;font-size:1rem;letter-spacing:2px;padding:14px 40px;border-radius:6px;cursor:pointer;background:linear-gradient(135deg,#4a2c00,#9a6010);border:2px solid var(--gold2);color:#fff;width:100%;margin-top:10px;transition:all .2s}
.tut-btn:hover{box-shadow:0 0 24px rgba(210,155,40,.4);transform:translateY(-1px)}

/* SCREEN TRANSITIONS */
.scr{display:none;opacity:0;transform:translateY(12px);transition:opacity var(--tx-dur),transform var(--tx-dur);height:100dvh;overflow:hidden}
.scr.on{display:flex;flex-direction:column;opacity:1;transform:translateY(0);height:100dvh;overflow:hidden}

/* BOSS LEVEL CARD — full width special layout */
.lcard.is-boss,.lcard.is-final{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:18px;
  padding:22px 24px;
  background:linear-gradient(135deg,rgba(26,2,2,.85),rgba(40,6,6,.65));
  border:2px solid rgba(255,112,48,.6);
  box-shadow:0 0 30px rgba(212,48,32,.2);
}
.lcard.is-boss .lc-em,.lcard.is-final .lc-em{
  font-size:4rem;
  margin-bottom:0;
  display:flex;
  align-items:center;
  justify-content:center;
  width:80px;
  height:80px;
  background:rgba(212,48,32,.18);
  border-radius:50%;
  border:2px solid rgba(255,112,48,.5);
  flex-shrink:0;
  filter:drop-shadow(0 0 12px rgba(255,112,48,.5));
}
.lcard.is-boss .lc-boss-info,.lcard.is-final .lc-boss-info{display:flex;flex-direction:column;gap:5px}
.lcard.is-final{border-color:rgba(255,112,48,.9);background:linear-gradient(135deg,#180000,#260404);box-shadow:0 0 50px rgba(212,48,32,.3);}
.lc-boss-info{display:none}


/* INTRO */
#s-intro{min-height:100vh;padding:14px}
.intro-inner{max-width:950px;margin:0 auto;width:100%}
.intro-hd{display:flex;align-items:flex-start;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.intro-em{font-size:4.8rem;line-height:1;filter:drop-shadow(0 0 22px rgba(200,145,30,.5));flex-shrink:0}
.intro-tag{font-family:'Press Start 2P',monospace;font-size:.52rem;color:var(--teal);letter-spacing:2px;margin-bottom:4px}
.intro-name{font-family:'Cinzel',serif;font-weight:700;font-size:clamp(1.25rem,3.5vw,2rem);color:var(--gold2);line-height:1.2}
.intro-name.is-boss{color:#ff9966}
.type-badge{display:inline-flex;align-items:center;gap:7px;border-radius:20px;padding:6px 15px;margin-bottom:16px;font-family:'Cinzel',serif;font-size:.79rem;letter-spacing:1px}
.type-badge.ap{background:rgba(24,154,128,.14);border:1px solid var(--teal);color:var(--teal2)}
.type-badge.ex{background:rgba(112,48,160,.14);border:1px solid var(--violet);color:var(--violet2)}
.type-badge.bo{background:rgba(184,42,24,.16);border:1px solid var(--ember);color:#ff9966}
.tcard{background:var(--panel);border:1px solid var(--border);border-radius:7px;padding:19px 21px;margin-bottom:12px}
.tcard h3{font-family:'Cinzel',serif;font-size:.85rem;color:var(--gold);letter-spacing:3px;margin-bottom:11px;padding-bottom:8px;border-bottom:1px solid var(--border)}
.tcard p,.tcard li{color:var(--muted);line-height:1.95;font-size:1.02rem}
.tcard p{margin-bottom:9px}
.tcard p strong,.tcard li strong{color:var(--gold2)}
.tcard ul{list-style:none;padding:0}
.tcard li{padding:4px 0 4px 20px;position:relative}
.tcard li::before{content:'⚗';position:absolute;left:0;top:6px;color:var(--teal);font-size:.65rem}
.nom-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:9px;margin-top:11px}
.nom-c{background:rgba(0,0,0,.3);border:1px solid rgba(200,145,30,.12);border-radius:5px;padding:11px 12px}
.nom-ct{font-family:'Cinzel',serif;font-size:.65rem;color:var(--teal2);letter-spacing:2px;margin-bottom:7px}
.nom-ce{font-style:italic;color:var(--muted);font-size:.94rem;line-height:1.75}
.nom-ce span{color:var(--gold2);font-style:normal;font-weight:600}
.btn-fight{font-family:'Cinzel',serif;font-weight:700;font-size:1.08rem;letter-spacing:3px;background:linear-gradient(135deg,#550000,#a81808 50%,#550000);color:#fff;border:2px solid var(--flame);padding:16px 40px;border-radius:4px;cursor:pointer;width:100%;margin-top:9px;box-shadow:0 0 26px rgba(184,42,24,.3);transition:all .3s}
.btn-fight:hover{box-shadow:0 0 52px rgba(223,88,32,.6);transform:translateY(-2px)}

/* COMBAT */
#s-combat{padding:9px 13px;overflow-y:auto}

/* Chemical symbol orbit animations on monsters */
@keyframes chem-orbit-0{0%{transform:translate(-50%,-50%) translateY(0)}50%{transform:translate(-50%,-50%) translateY(-8px)}100%{transform:translate(-50%,-50%) translateY(0)}}
@keyframes chem-orbit-1{0%{transform:translate(-50%,-50%) translateX(0)}50%{transform:translate(-50%,-50%) translateX(8px)}100%{transform:translate(-50%,-50%) translateX(0)}}
@keyframes chem-orbit-2{0%{transform:translate(-50%,-50%) translate(0,0)}50%{transform:translate(-50%,-50%) translate(-6px,6px)}100%{transform:translate(-50%,-50%) translate(0,0)}}
#arena{background:linear-gradient(160deg,#0c0c28,#14183e 50%,#0c0c28);border:2px solid rgba(24,154,128,.5);border-radius:9px;padding:15px 17px;display:flex;justify-content:space-between;align-items:center;min-height:175px;position:relative;overflow:hidden;box-shadow:inset 0 0 70px rgba(0,0,0,.9);margin-bottom:10px;transition:border-color .4s}
#arena::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 110%,rgba(24,154,128,.07) 0%,transparent 55%);pointer-events:none}
#arena.aboss{background:linear-gradient(160deg,#200000,#340808 50%,#200000);border-color:rgba(223,88,32,.65)}
#arena.afinal{background:linear-gradient(160deg,#2e0000,#480808 50%,#2e0000);border-color:rgba(255,80,30,.9)}
.a-side{width:22%;font-family:'Cinzel',serif}
.a-side.r{text-align:right}
.a-ref{font-size:.6rem;color:var(--teal2);letter-spacing:1px;margin-bottom:3px}
.a-mon{font-size:.86rem;color:var(--gold2);margin-bottom:5px;font-weight:600}
.a-cnt{font-family:'Press Start 2P',monospace;font-size:.5rem;color:var(--muted)}
.a-combo{font-family:'Press Start 2P',monospace;font-size:.46rem;color:var(--flame);margin-top:4px;min-height:12px}
.a-mid{width:50%;text-align:center;display:flex;flex-direction:column;align-items:center;position:relative;z-index:2}
#m-em{display:flex;align-items:center;justify-content:center;margin-bottom:10px;transform-origin:center bottom;will-change:transform,filter;user-select:none;overflow:visible}
#m-em.idle{animation:m-idle 3.2s ease-in-out infinite}
#m-em.boss{animation:m-boss .42s infinite alternate}
#m-em.final{animation:m-final .3s infinite alternate;filter:drop-shadow(0 0 24px rgba(255,30,10,0.9))}
@keyframes m-idle{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-13px) rotate(1deg)}}
@keyframes m-boss{0%{transform:scale(1) rotate(-.7deg)}100%{transform:scale(1.07) rotate(.7deg)}}
@keyframes m-final{0%{transform:scale(1) rotate(-1deg)}100%{transform:scale(1.1) rotate(1deg)}}
.hp-wrap{width:95%;background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.18);border-radius:6px;height:23px;position:relative;overflow:hidden}
#hp-fill{height:100%;background:linear-gradient(90deg,var(--green),var(--green2));transition:width .45s ease,background .45s}
#hp-txt{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Press Start 2P',monospace;font-size:.52rem;color:#fff;text-shadow:1px 1px 2px #000}
.combat-lives{display:flex;justify-content:center;gap:4px;margin-top:6px}
.clive{font-size:1.15rem;transition:transform .2s,filter .2s}
.clive.lost{filter:grayscale(1);opacity:.3}

#feedback{border-radius:6px;padding:12px 16px;margin-bottom:10px;display:none;border-left:4px solid;animation:fb-in .24s ease}
#feedback.ok{background:rgba(40,168,88,.1);border-color:var(--green)}
#feedback.ko{background:rgba(184,42,24,.11);border-color:var(--flame)}
#feedback.rv{background:rgba(112,48,160,.14);border-color:var(--violet)}
#fb-ttl{font-family:'Cinzel',serif;font-size:.88rem;font-weight:700;letter-spacing:2px;margin-bottom:4px}
#feedback.ok #fb-ttl{color:#60ee98}
#feedback.ko #fb-ttl{color:var(--flame)}
#feedback.rv #fb-ttl{color:#c090f8}
#fb-body{font-size:1.02rem;color:var(--muted);line-height:1.7}
@keyframes fb-in{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:translateY(0)}}

#hint-panel{background:rgba(112,48,160,.12);border:1px solid var(--violet);border-radius:6px;padding:10px 13px;margin-bottom:9px;display:none}
#hint-text{color:var(--violet2);font-size:1rem;line-height:1.7}

.q-zone{background:var(--panel);border:1px solid var(--border);border-radius:7px;padding:17px 19px;margin-bottom:10px;overflow-x:auto}
.q-top{display:flex;align-items:center;gap:9px;margin-bottom:13px;flex-wrap:wrap}
.pill{font-family:'Cinzel',serif;font-weight:700;font-size:.78rem;letter-spacing:2px;padding:4px 12px;border-radius:20px}
.pill.n{background:rgba(24,154,128,.18);color:var(--teal2);border:1px solid var(--teal)}
.pill.f{background:rgba(184,42,24,.2);color:#ff8860;border:1px solid var(--ember)}
.q-ins{font-style:italic;color:var(--muted);font-size:.98rem}

sup{font-size:.68em;line-height:0;vertical-align:super}
.qtbl{width:100%;border-collapse:separate;border-spacing:0;border-radius:6px;overflow:hidden}
.qtbl th{background:rgba(200,145,30,.1);color:var(--gold2);font-family:'Cinzel',serif;font-size:.76rem;letter-spacing:2px;padding:10px 8px;border-bottom:1px solid var(--border);text-align:center}
.qtbl td{background:rgba(0,0,0,.22);padding:9px 7px;border-bottom:1px solid rgba(255,255,255,.04);text-align:center}
.qtbl tr:last-child td{border-bottom:none}
.td-q{background:rgba(200,145,30,.08)!important;color:var(--gold3);font-size:1.42rem;font-weight:600;width:22%}
.inp{width:100%;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:4px;padding:10px 11px;font-family:'Crimson Pro',serif;font-size:1.2rem;color:var(--text);text-align:center;outline:none;transition:all .2s;caret-color:var(--teal2)}
.inp:focus{border-color:var(--teal);background:rgba(24,154,128,.08);box-shadow:0 0 14px rgba(24,154,128,.2)}
.inp.ok{border-color:var(--green);background:rgba(40,168,88,.1);color:#88ffb0}
.inp.ko{border-color:var(--ember);background:rgba(184,42,24,.1);color:#ff8860;animation:inp-ko .3s}
.inp.rev{border-color:var(--gold);background:rgba(200,145,30,.12);color:var(--gold2)}
@keyframes inp-ko{0%,100%{transform:translateX(0)}22%,66%{transform:translateX(-7px)}44%,88%{transform:translateX(7px)}}

.btn-row{display:flex;gap:9px;flex-wrap:wrap}
.cbtn{font-family:'Cinzel',serif;font-weight:700;letter-spacing:1px;font-size:.94rem;padding:13px 20px;border-radius:4px;cursor:pointer;border:2px solid;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:7px}
.cbtn-atk{background:linear-gradient(135deg,#520000,#a81808);border-color:var(--flame);color:#fff;flex:1}
.cbtn-atk:hover{box-shadow:0 0 28px rgba(223,88,32,.5);transform:translateY(-1px)}
.cbtn-hint{background:rgba(112,48,160,.25);border-color:var(--violet);color:#d0a8f8}
.cbtn-hint:hover{background:rgba(112,48,160,.45)}
.cbtn-hint:disabled{opacity:.4;cursor:not-allowed}
.cbtn-rev{background:rgba(70,70,70,.25);border-color:rgba(140,140,140,.4);color:#bbb}
.cbtn-rev:hover{background:rgba(70,70,70,.45)}
.cbtn-nxt{background:linear-gradient(135deg,#0c4018,#1e8038);border-color:var(--green);color:#fff;width:100%;font-size:1rem;padding:14px;display:none}
.cbtn-nxt:hover{box-shadow:0 0 28px rgba(40,168,88,.42)}

/* WIN / GAMEOVER / FINAL */
#s-win,#s-gameover,#s-final{flex:1;align-items:center;justify-content:center;text-align:center;padding:40px 20px}
.w-em{font-size:7rem;animation:bob 3s ease-in-out infinite;margin-bottom:16px;display:block}
.w-h{font-family:'UnifrakturMaguntia',cursive;font-size:clamp(2rem,5vw,3.3rem);background:linear-gradient(135deg,#c8911e,#ffe060,#c8911e);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:10px}
.w-p{font-style:italic;color:var(--muted);max-width:500px;line-height:1.95;margin:0 auto 24px;font-size:1.05rem}
.w-rewards{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:26px}
.wr{background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:13px 16px;text-align:center}
.wr-em{font-size:1.8rem;display:block;margin-bottom:4px}
.wr-v{font-family:'Press Start 2P',monospace;font-size:.58rem;color:var(--gold2)}
.wr-l{font-size:.85rem;color:var(--muted);margin-top:2px}
.go-em{font-size:6.5rem;margin-bottom:18px;display:block}
.go-h{font-family:'Cinzel',serif;font-size:2rem;color:var(--flame);margin-bottom:9px}
.go-p{color:var(--muted);max-width:460px;margin:0 auto 28px;line-height:1.9;font-size:1.02rem}
.final-em{font-size:7.5rem;margin-bottom:18px;filter:drop-shadow(0 0 40px rgba(200,145,30,.9));display:block}
.final-h{font-family:'UnifrakturMaguntia',cursive;font-size:clamp(2.2rem,5vw,3.8rem);background:linear-gradient(135deg,#c8911e,#ffe060,#c8911e);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:12px}
.final-p{color:var(--muted);max-width:560px;margin:0 auto 28px;line-height:2;font-size:1.08rem}
.btn-pdf{font-family:'Cinzel',serif;font-weight:700;font-size:1.08rem;letter-spacing:2px;background:linear-gradient(135deg,#1a4a20,#2a8838);border:2px solid var(--green2);color:#fff;padding:17px 40px;border-radius:5px;cursor:pointer;box-shadow:0 0 28px rgba(40,168,88,.3);transition:all .3s}
.btn-pdf:hover{box-shadow:0 0 52px rgba(40,168,88,.55);transform:translateY(-2px)}

/* NOTIFS */
#notif{position:fixed;top:66px;right:16px;display:flex;flex-direction:column;gap:7px;z-index:500;pointer-events:none;width:270px}
.nc{background:var(--panel);border-left:4px solid;border-radius:6px;padding:10px 13px;animation:nc-in .35s ease;opacity:1;transition:opacity .4s}
.nc.gold{border-color:var(--gold2)}.nc.teal{border-color:var(--teal2)}.nc.violet{border-color:var(--violet2)}.nc.red{border-color:var(--heart)}
.nc-t{font-family:'Cinzel',serif;font-size:.76rem;font-weight:700;margin-bottom:2px}
.nc.gold .nc-t{color:var(--gold2)}.nc.teal .nc-t{color:var(--teal2)}.nc.violet .nc-t{color:var(--violet2)}.nc.red .nc-t{color:var(--heart)}
.nc-b{font-size:.86rem;color:var(--muted)}
@keyframes nc-in{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:translateX(0)}}

/* FX */
@keyframes fx-hit{0%{filter:none;transform:scale(1) rotate(0)}12%{filter:brightness(5) saturate(0) drop-shadow(0 0 30px #fff);transform:scale(1.1) rotate(-4deg)}30%{filter:brightness(.25) drop-shadow(0 0 25px rgba(223,88,32,1));transform:scale(.9) rotate(3deg)}55%{filter:brightness(2) drop-shadow(0 0 15px #fff);transform:scale(1.04) rotate(-1deg)}78%{filter:none;transform:scale(1) rotate(.5deg)}100%{filter:none;transform:scale(1) rotate(0)}}
@keyframes fx-crit{0%{filter:none;transform:scale(1)}10%{filter:brightness(6) hue-rotate(30deg);transform:scale(1.15) rotate(-6deg)}25%{filter:brightness(.2) drop-shadow(0 0 35px #ff4400);transform:scale(.85) rotate(5deg)}45%{filter:brightness(3) saturate(2);transform:scale(1.1) rotate(-3deg)}65%{filter:brightness(1.5);transform:scale(.97) rotate(2deg)}85%{filter:none;transform:scale(1.02)}100%{filter:none;transform:scale(1) rotate(0)}}
@keyframes fx-shake{0%,100%{transform:translate(0,0)}8%{transform:translate(-10px,-5px)}18%{transform:translate(10px,5px)}28%{transform:translate(-8px,8px)}38%{transform:translate(8px,-8px)}48%{transform:translate(-5px,4px)}58%{transform:translate(5px,-4px)}68%{transform:translate(-3px,5px)}78%{transform:translate(3px,-3px)}90%{transform:translate(-1px,1px)}}
@keyframes fx-dodge{0%{transform:translateX(0) scaleX(1);opacity:1;filter:none}35%{transform:translateX(70px) scaleX(.45);opacity:.18;filter:blur(3px)}65%{transform:translateX(70px) scaleX(.45);opacity:.18;filter:blur(3px)}100%{transform:translateX(0) scaleX(1);opacity:1;filter:none}}
@keyframes fx-death{0%{opacity:1;transform:scale(1) rotate(0);filter:none}35%{opacity:.9;transform:scale(1.15) rotate(12deg);filter:saturate(4) brightness(1.6)}65%{opacity:.5;transform:scale(.5) rotate(28deg);filter:grayscale(1) brightness(.4)}100%{opacity:0;transform:scale(.05) rotate(45deg) translateY(60px);filter:grayscale(1)}}
@keyframes fx-dmg{0%{opacity:1;transform:translate(-50%,0) scale(.55) rotate(-12deg)}55%{opacity:1;transform:translate(-50%,-80px) scale(1.4) rotate(6deg)}100%{opacity:0;transform:translate(-50%,-118px) scale(1) rotate(0)}}
@keyframes fx-miss{0%{opacity:1;transform:translate(-50%,0) scale(.65)}55%{opacity:.9;transform:translate(-50%,-58px) scale(1.12)}100%{opacity:0;transform:translate(-50%,-92px) scale(.9)}}
@keyframes fx-ring{0%{transform:translate(-50%,-50%) scale(.2);opacity:1}55%{transform:translate(-50%,-50%) scale(1.6);opacity:.7}100%{transform:translate(-50%,-50%) scale(2.4);opacity:0}}
@keyframes fx-pt{0%{opacity:1;transform:translate(0,0) scale(1.1)}100%{opacity:0;transform:translate(var(--tx),var(--ty)) scale(0)}}
@keyframes body-hit{0%,100%{background-color:transparent}50%{background-color:rgba(40,168,88,.07)}}
@keyframes body-wrong{0%,100%{background-color:transparent}50%{background-color:rgba(184,42,24,.09)}}
.fx-num{position:absolute;left:50%;top:5px;font-family:'Press Start 2P',monospace;font-size:1.7rem;pointer-events:none;z-index:40;white-space:nowrap}
.fx-num.hit{color:#ffeb3b;text-shadow:2px 2px 0 #a81808,-1px -1px 0 #000;animation:fx-dmg 1.1s ease forwards}
.fx-num.miss{color:#999;font-size:1.1rem;animation:fx-miss 1s ease forwards}
.fx-ring{position:absolute;left:50%;top:50%;border-radius:50%;border:3px solid;width:135px;height:135px;pointer-events:none;z-index:20;animation:fx-ring .7s ease forwards}
.fx-pt{position:absolute;border-radius:50%;pointer-events:none;z-index:25;animation:fx-pt .8s ease forwards}
body.flash-hit{animation:body-hit .4s ease}
body.flash-wrong{animation:body-wrong .4s ease}
.do-hit{animation:fx-hit .65s ease forwards!important}
.do-crit{animation:fx-crit .70s ease forwards!important}
.do-dodge{animation:fx-dodge .62s ease forwards!important}
.do-death{animation:fx-death 1.85s ease forwards!important}
.arena-shake{animation:fx-shake .52s ease forwards}

@media(max-width:640px){
  #arena{flex-direction:column;gap:12px;min-height:auto}
  .a-side,.a-mid{width:100%;text-align:center}
  #m-em{font-size:4.5rem!important}
  .td-q{font-size:1.1rem}
  .inp{font-size:1.06rem}
  .qtbl th{font-size:.68rem;padding:8px 6px}
  .wprog{display:none}
  .hud-xp{display:none}
}

/* GENDER SELECTOR */
.char-gender{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:20px}
.cg{background:rgba(0,0,0,.32);border:2px solid var(--border);border-radius:8px;padding:16px 7px;cursor:pointer;transition:all .2s;text-align:center}
.cg:hover,.cg.sel{border-color:var(--gold2);background:rgba(200,145,30,.12)}
.cg.sel{box-shadow:0 0 16px rgba(200,145,30,.3)}
.cg-em{font-size:2.8rem;display:block;margin-bottom:6px}
.cg-n{font-family:'Cinzel',serif;font-size:.78rem;color:var(--gold);letter-spacing:2px}

/* CHARACTER CARD on map */
.char-card{background:var(--panel);border:1px solid var(--border2);border-radius:12px;padding:16px 20px;display:flex;align-items:center;gap:16px;width:100%;position:relative;overflow:hidden;cursor:pointer;transition:border-color .2s, box-shadow .2s}
.char-card:hover{border-color:var(--teal2);box-shadow:0 0 20px rgba(64,232,192,.15)}
.char-card::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 20% 50%,rgba(210,155,40,.08),transparent 70%);pointer-events:none}
.char-card-hint{position:absolute;bottom:8px;right:12px;font-size:.78rem;color:var(--faint);font-style:italic}
.cc-portrait{font-size:3.2rem;line-height:1;flex-shrink:0;filter:drop-shadow(0 2px 8px rgba(210,155,40,.4));transition:all .4s}
.cc-info{flex:1;min-width:0}
.cc-nameline{font-family:'Cinzel',serif;font-size:1.05rem;font-weight:700;color:var(--gold2);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-titleline{font-size:.88rem;color:var(--teal2);font-style:italic;margin-bottom:6px}
.cc-gearrow{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:5px}
.gear-badge{background:rgba(0,0,0,.4);border:1px solid var(--border);border-radius:5px;padding:4px 9px;font-size:.82rem;display:flex;align-items:center;gap:5px}
.gear-badge span:first-child{font-size:1.1rem}
.gear-badge-name{font-family:'Cinzel',serif;font-size:.62rem;color:var(--muted);letter-spacing:1px}
.cc-lvlbadge{background:linear-gradient(135deg,var(--violet),var(--violet2));border-radius:20px;padding:5px 14px;font-family:'Press Start 2P',monospace;font-size:.46rem;color:#fff;white-space:nowrap;flex-shrink:0}
.cc-xpbar{width:100%;height:6px;background:rgba(255,255,255,.08);border-radius:3px;overflow:hidden;margin-top:5px}
.cc-xpfill{height:100%;background:linear-gradient(90deg,var(--violet),var(--violet2));transition:width .6s;border-radius:3px}

/* GEAR SHOP (legacy, kept for backwards compat) */
.shop-section-title{font-family:'Cinzel',serif;font-size:.8rem;color:var(--muted);letter-spacing:4px;padding:16px 0 10px;border-top:1px solid var(--border);margin-top:12px;text-align:center}

/* ═══ ANIMATED WORLD BACKGROUNDS ═══ */
body.bg-menu{background:linear-gradient(160deg,#16083a,#220e4e,#100626)!important}
body.bg-w0{background:linear-gradient(180deg,#1a5838,#28784a,#1a5838)!important}
body.bg-w1{background:linear-gradient(180deg,#6a2800,#983c08,#6a2800)!important}
body.bg-w2{background:linear-gradient(180deg,#302060,#482e88,#302060)!important}
body.bg-w3{background:linear-gradient(180deg,#1a4068,#285888,#1a4068)!important}
body.bg-w4{background:linear-gradient(180deg,#504008,#6a5818,#504008)!important}
body.bg-w5{background:linear-gradient(180deg,#301860,#482890,#301860)!important}
body.bg-w6{background:linear-gradient(180deg,#601818,#902828,#601818)!important}

/* World scene canvas — drawn procedurally */
#world-bg-canvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:0;transition:opacity 1s ease}

/* Particle stars overlay on title */
#star-canvas{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5}

/* BIGGER INPUTS */
.inp{width:100%;background:rgba(255,255,255,.07);border:2px solid rgba(255,255,255,.18);border-radius:6px;padding:13px 14px;font-family:'Crimson Pro',serif;font-size:1.4rem;color:var(--text);text-align:center;outline:none;transition:all .2s;caret-color:var(--teal2)}
.inp:focus{border-color:var(--teal);background:rgba(30,200,168,.1);box-shadow:0 0 18px rgba(30,200,168,.25)}
.inp.ok{border-color:var(--green);background:rgba(48,216,112,.12);color:#a0ffcc}
.inp.ko{border-color:var(--ember);background:rgba(212,48,32,.12);color:#ff9988;animation:inp-ko .3s}
.inp.rev{border-color:var(--gold);background:rgba(200,145,30,.12);color:var(--gold2)}
.qtbl th{background:rgba(232,168,32,.13);color:var(--gold2);font-family:'Cinzel',serif;font-size:.82rem;letter-spacing:2px;padding:12px 10px;border-bottom:1px solid var(--border);text-align:center}
.qtbl td{background:rgba(0,0,0,.25);padding:11px 9px;border-bottom:1px solid rgba(255,255,255,.05);text-align:center}
.td-q{background:rgba(232,168,32,.1)!important;color:var(--gold3);font-size:1.5rem;font-weight:600;width:22%}
.lc-name{font-family:'Cinzel',serif;font-size:1rem;font-weight:700;color:var(--gold2);margin-bottom:4px}
.lc-mon{font-style:italic;color:var(--muted);font-size:.86rem;margin-bottom:8px}

/* Level card bigger */
.lcard{background:rgba(0,0,0,.3);border:1px solid var(--border);border-radius:10px;padding:16px 18px;cursor:pointer;position:relative;overflow:hidden;transition:transform .2s,border-color .2s,box-shadow .2s}
.lcard:hover{transform:translateY(-4px);border-color:var(--gold2);box-shadow:0 8px 28px rgba(0,0,0,.55)}

/* Music button */
#music-btn{position:fixed;bottom:16px;right:16px;z-index:200;background:rgba(0,0,0,.6);border:1px solid var(--border2);border-radius:50%;width:46px;height:46px;font-size:1.2rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;backdrop-filter:blur(8px)}
#music-btn:hover{background:rgba(232,168,32,.2);transform:scale(1.1)}
#music-btn.muted{opacity:.45}

/* Shop layout fix — keep at same height as map */
#s-shop{display:flex;flex-direction:column}
.shop-hdr{padding-top:10px;padding-bottom:8px;border-bottom:1px solid var(--border)}

/* Level panel replaces map in same space */
/* Map screen uses full viewport height */
/* Map screen uses full viewport height */
.map-and-panel-wrap{
  position:relative;
  flex:1;
  display:grid;
  grid-template-rows:1fr;
  min-height:0;
  height:100%;
}
.map-and-panel-wrap>.world-map-canvas{
  grid-area:1/1;
  position:relative;
  width:100%;
  min-height:0;
}
.map-and-panel-wrap>.level-panel{
  grid-area:1/1;
  overflow-y:auto;
  animation:fadeSlideUp .22s ease;
  background:var(--panel);
  display:none;
  border:2px solid var(--border);
  border-radius:12px;
  height:100%;
}

/* Interior world map location nodes */
.wloc-node{transition:transform .2s}
.wloc-node:hover{transform:translate(-50%,-50%) scale(1.15)!important}
.wloc-icon{font-size:1.8rem;line-height:1;filter:drop-shadow(0 0 8px rgba(200,145,30,.5));transition:filter .2s}
.wloc-node:hover .wloc-icon{filter:drop-shadow(0 0 16px rgba(200,145,30,.9))}
.wloc-label{font-family:'Cinzel',serif;font-size:.5rem;color:var(--gold);text-shadow:0 0 6px var(--ink),0 0 10px var(--ink);white-space:nowrap;margin-top:2px;max-width:90px;overflow:hidden;text-overflow:ellipsis;text-align:center}
.wloc-locked .wloc-icon{filter:grayscale(1) opacity(.4)}
.wloc-locked .wloc-label{color:var(--faint)}
.wloc-done .wloc-icon{filter:drop-shadow(0 0 10px rgba(200,145,30,.9))}
.wloc-boss .wloc-icon{filter:drop-shadow(0 0 12px rgba(212,48,32,.8));animation:boss-pulse 1.5s ease-in-out infinite}
.wloc-node:not(.wloc-done):not(.wloc-locked) .wloc-icon{animation:node-avail 2.4s ease-in-out infinite}
@keyframes node-avail{0%,100%{filter:drop-shadow(0 0 6px rgba(200,145,30,.4))}50%{filter:drop-shadow(0 0 14px rgba(200,145,30,.85))}}
.wloc-check{font-family:monospace;font-size:1.4rem;font-weight:900;color:#ffd700;text-shadow:0 0 8px #c9a84c,0 0 2px #fff8e0;display:inline-block;line-height:1;image-rendering:pixelated}
@keyframes boss-pulse{0%,100%{filter:drop-shadow(0 0 8px rgba(212,48,32,.6))}50%{filter:drop-shadow(0 0 18px rgba(255,80,30,.9))}}
.wloc-selected .wloc-icon{filter:drop-shadow(0 0 16px rgba(232,168,32,1));transform:scale(1.2)}
.wloc-selected .wloc-label{color:var(--gold2)}

/* ════════════════════════════════════════════════════
   LAYOUT — Clean, readable, fits viewport
   ════════════════════════════════════════════════════ */

/* 1. ROOT */
html, body {
  height: 100% !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
  background-color: #0a0820 !important;
}
/* html font-size set in original rule as 19px */
body {
  display: flex !important;
  flex-direction: column !important;
  min-height: unset !important;
  overflow-x: hidden !important;
}

/* 2. SCREENS */
.scr {
  display: none !important;
  flex: 1 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  height: unset !important;
}
.scr.on {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  height: unset !important;
  opacity: 1 !important;
  transform: none !important;
}

/* 3. HUD — two-section layout */
#hud {
  flex-shrink: 0 !important;
  position: static !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
  gap: 0 !important;
  flex-wrap: nowrap !important;
  background: linear-gradient(180deg, #12103a 0%, #0d0b2e 100%) !important;
  border-bottom: 2px solid rgba(201,168,76,.4) !important;
  box-shadow: 0 3px 20px rgba(0,0,0,.7), inset 0 -1px 0 rgba(201,168,76,.15) !important;
}
/* Left - character */
.hud-left {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px; cursor: pointer;
  border-right: 1px solid rgba(232,168,32,.15);
  transition: background .2s;
}
.hud-left:hover { background: rgba(232,168,32,.08); }
.hud-avatar { width:40px!important;height:56px!important;flex-shrink:0!important;overflow:visible!important; }
.hud-info { display: flex; flex-direction: column; }
.hud-name { font-family: 'Cinzel',serif; font-size: 1rem; color: var(--gold2); font-weight: 700; line-height: 1.2; }
.hud-level { font-family: 'Press Start 2P',monospace; font-size: .4rem; color: var(--teal2); letter-spacing: 1px; }
/* Center - stats */
.hud-center {
  display: flex; align-items: center; gap: 14px;
  padding: 8px 16px; flex: 1; min-width: 0;
}
.hud-lives { display: flex; gap: 3px; align-items: center; flex-shrink: 0; }
.heart { font-size: 1.2rem !important; line-height: 1; transition: transform .2s, filter .2s; }
.heart.lost { filter: grayscale(1); opacity: .3; }
.hud-xp-wrap { flex: 1; min-width: 60px; max-width: 180px; }
.hud-xp-bar { height: 6px; background: rgba(255,255,255,.08); border-radius: 3px; overflow: hidden; }
.hud-xp-fill { height: 100%; background: linear-gradient(90deg, var(--violet), var(--violet2)); transition: width .5s; }
.hud-xp-lbl { font-family: 'Press Start 2P',monospace; font-size: .36rem; color: var(--violet2); display: flex; justify-content: space-between; margin-top: 2px; }
.hud-coins {
  display: flex; align-items: center; gap: 5px;
  font-family: 'Press Start 2P',monospace; font-size: .55rem; color: var(--gold2);
  background: rgba(232,168,32,.1); padding: 5px 10px; border-radius: 6px;
  border: 1px solid rgba(232,168,32,.2);
}
.hud-coins span:first-child { font-size: 1.1rem; }
/* Right - navigation */
.hud-nav {
  display: flex; align-items: center; gap: 4px;
  padding: 8px 12px;
  border-left: 1px solid rgba(232,168,32,.15);
}
.hbtn {
  font-family: 'Cinzel',serif; font-size: .78rem !important;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  color: var(--gold); padding: 7px 12px !important; border-radius: 6px;
  cursor: pointer; letter-spacing: 1px; transition: all .2s; white-space: nowrap;
}
.hbtn:hover { background: rgba(232,168,32,.15); border-color: rgba(232,168,32,.5); color: var(--gold2); }
.hbtn-teal { background: rgba(30,200,168,.1) !important; border-color: rgba(30,200,168,.3) !important; color: var(--teal2) !important; }
.hbtn-teal:hover { background: rgba(30,200,168,.22) !important; }
.hbtn-report { background: rgba(56,208,176,.1); border-color: rgba(56,208,176,.25); color: var(--teal2); }
.hbtn-report:hover { background: rgba(56,208,176,.22) !important; }
.hbtn-home { background: rgba(255,255,255,.04); color: var(--faint); }
.hbtn-home:hover { color: var(--gold); }
#music-btn { display: none !important; }

/* 4. TITLE */
#s-title {
  align-items: center !important;
  justify-content: center !important;
  min-height: unset !important;
  padding: 20px 24px !important;
  gap: 8px !important;
  overflow-y: auto !important;
}
.t-flask { font-size: 3.5rem !important; margin-bottom: 4px !important; }
.t-title { font-size: clamp(1.4rem, 4.5vw, 2.6rem) !important; margin-bottom: 4px !important; }
.t-sub { font-size: .8rem !important; margin-bottom: 2px !important; letter-spacing: 3px !important; }
.t-rule { margin: 6px auto !important; width: 200px !important; }
.t-authors { font-size: .82rem !important; margin-bottom: 12px !important; }
.btn-start { font-size: 1rem !important; padding: 12px 48px 12px 34px !important; letter-spacing: 2px !important; border-radius: 2px !important; }
#title-continue-btn { margin-top: 8px !important; }

/* 5. CHARACTER CREATE */
#s-char {
  justify-content: flex-start !important;
  overflow-y: auto !important;
  padding: 8px 16px !important;
}
.char-box { padding: 16px 18px !important; max-width: 480px !important; border-radius: 14px !important; margin: 0 auto !important; }
.char-sprite-preview { width: 56px !important; height: 87px !important; margin-bottom: 10px !important; }
.char-em { font-size: 3rem !important; margin-bottom: 8px !important; }
.char-h { font-size: 1.25rem !important; margin-bottom: 3px !important; }
.char-p { font-size: .95rem !important; margin-bottom: 10px !important; line-height: 1.4 !important; }
.char-inp { padding: 11px 14px !important; font-size: 1.05rem !important; margin-bottom: 10px !important; border-radius: 8px !important; }
.char-cls-lbl { font-size: .68rem !important; margin-bottom: 6px !important; margin-top: 4px !important; }
.char-gender { gap: 8px !important; margin-bottom: 8px !important; }
.cg { padding: 8px !important; border-radius: 10px !important; }
.cg-sprite { width: 40px !important; height: 62px !important; margin-bottom: 4px !important; }
.cg-em { font-size: 1.8rem !important; margin-bottom: 2px !important; }
.cg-n { font-size: .68rem !important; }
.char-class { gap: 7px !important; margin-bottom: 10px !important; }
.cc { padding: 8px 6px !important; border-radius: 10px !important; }
.cc-sprite { width: 36px !important; height: 56px !important; margin-bottom: 3px !important; }
.cc-em { font-size: 1.8rem !important; margin-bottom: 4px !important; }
.cc-n { font-size: .72rem !important; }
.cc-d { font-size: .76rem !important; color: var(--teal2) !important; }
.btn-create { padding: 14px !important; font-size: 1rem !important; border-radius: 8px !important; }

/* 6. MAP */
#s-map { overflow: hidden !important; }
.mario-map-wrap { flex: 1 !important; min-height: 0 !important; overflow: hidden !important; padding: 4px 8px 0 !important; }
.mario-map-wrap.world-open .mario-map-hdr { display: none !important; }
.mario-map-wrap.world-open { padding-top: 0 !important; }
.mario-map-hdr { flex-shrink: 0 !important; padding: 6px 0 !important; margin-bottom: 4px !important; gap: 10px !important; display: flex !important; align-items: center !important; }
.map-h { font-size: 1rem !important; font-family:'Cinzel',serif !important; font-weight:700 !important; white-space:nowrap !important; }
.map-global-pct { font-size: .42rem !important; }
.map-global-bar { height: 5px !important; min-width: 60px !important; max-width: 120px !important; border-radius: 3px !important; }
.btn-map-report { display: none !important; }
.char-card { display: none !important; }

/* 7. WORLD MAP */
.map-and-panel-wrap { flex: 1 !important; min-height: 0 !important; position: relative !important; }
.world-map-canvas { flex: 1 !important; min-height: 0 !important; height: 100% !important; border-radius: 10px !important; }
.level-panel { flex: 1; min-height: 0; overflow: hidden; flex-direction: column; border-radius: 14px; }
/* level-panel visibility controlled entirely by JS */

/* Light mode */
body.light-mode {
  --ink:#e8e6f0 !important;--deep:#d8d6e8 !important;
  --panel:#f0eef8 !important;--panel2:#e4e2f0 !important;
  --text:#1a1830 !important;--muted:#4a4868 !important;--faint:#8886a0 !important;
  --gold:#a07010 !important;--gold2:#805808 !important;--gold3:#604000 !important;
  --teal:#0a8868 !important;--teal2:#068060 !important;
  --violet:#7030a0 !important;--violet2:#6028a0 !important;
  --border:rgba(100,80,40,.25) !important;--border2:rgba(100,80,40,.5) !important;
  background-color:#e8e6f8 !important;
  background-image:
    radial-gradient(ellipse 60% 50% at 10% 15%,rgba(100,40,200,.06) 0%,transparent 50%),
    radial-gradient(ellipse 50% 55% at 90% 85%,rgba(24,170,140,.05) 0%,transparent 50%) !important;
  color:#1a1830 !important;
}
body.light-mode #hud {
  background:linear-gradient(180deg,#e0ddf0,#d4d2e8) !important;
  border-bottom-color:rgba(100,80,40,.2) !important;
  box-shadow:0 2px 8px rgba(0,0,0,.08) !important;
}
body.light-mode .hud-name { color:#805808 !important; }
body.light-mode .hud-level { color:#068060 !important; }
body.light-mode .hud-coins { background:rgba(200,160,40,.1) !important; border-color:rgba(200,160,40,.2) !important; color:#805808 !important; }
body.light-mode .hbtn { background:rgba(0,0,0,.04) !important; border-color:rgba(0,0,0,.12) !important; color:#4a4060 !important; }
body.light-mode .hbtn:hover { background:rgba(100,80,40,.1) !important; color:#805808 !important; }
body.light-mode .scard { background:linear-gradient(145deg,#f4f2fc,#eceaf6) !important; border-color:rgba(100,80,40,.2) !important; }
body.light-mode .sc-name { color:#805808 !important; }
body.light-mode .sc-desc { color:#4a4868 !important; }
body.light-mode .shop-section-card { background:linear-gradient(145deg,#f0eef8,#e6e4f0) !important; border-color:rgba(100,80,40,.25) !important; }
body.light-mode .shop-sec-title { color:#805808 !important; }
body.light-mode .world-map-canvas { background-color:#dddaf0 !important; }
body.light-mode .level-panel { background:rgba(240,238,250,.95) !important; }
body.light-mode #arena { background:linear-gradient(160deg,#e0ddf0,#eceaf8 50%,#e0ddf0) !important; }
body.light-mode .q-zone { background:rgba(240,238,252,.95) !important; }
body.light-mode .inp { background:rgba(0,0,0,.04) !important; color:#1a1830 !important; border-color:rgba(100,80,40,.25) !important; }
body.light-mode .qtbl th { background:rgba(200,160,40,.12) !important; color:#805808 !important; }
body.light-mode .qtbl td { background:rgba(0,0,0,.03) !important; color:#1a1830 !important; }
body.light-mode .gear-modal,.light-mode .tutorial-modal,.light-mode .ptable-modal { background:#f0eef8 !important; }
body.light-mode .pt-el { border-color:rgba(0,0,0,.08) !important; }
body.light-mode .pt-el .pt-sym { color:#1a1830 !important; }
body.light-mode .mario-map-hdr { color:#805808 !important; }
body.light-mode .heart { filter:none !important; }


/* Title screen floating particles */
#s-title .t-flask::after{
  content:'✦ ✧ ✦';
  position:absolute;
  font-size:1rem;
  color:rgba(200,145,30,.3);
  animation:sparkle-drift 6s linear infinite;
  pointer-events:none;
  top:-10px;left:-30px;
  letter-spacing:20px;
}
@keyframes sparkle-drift{
  0%{transform:translateY(0) rotate(0deg);opacity:.3}
  50%{opacity:.6}
  100%{transform:translateY(-30px) rotate(180deg);opacity:0}
}


.hud-more-btn{display:block;width:100%;padding:9px 12px;font-family:'Cinzel',serif;font-size:.78rem;color:var(--muted);background:none;border:1px solid transparent;border-radius:6px;cursor:pointer;text-align:left;transition:all .18s}
.hud-more-btn:hover{background:rgba(255,255,255,.06);color:var(--gold2)}
.hud-more-popup>button:nth-child(-n+3){color:var(--gold2);border-color:rgba(201,168,76,.28);background:rgba(201,168,76,.07);font-size:.82rem;padding:11px 14px;margin-bottom:2px}
.hud-more-popup>button:nth-child(-n+3):hover{background:rgba(201,168,76,.2)!important;border-color:var(--gold)!important;color:#fff!important;box-shadow:0 0 12px rgba(201,168,76,.18)}

/* Title screen buttons */
.t-btn-secondary{
  font-family:'Cinzel',serif;font-size:.82rem;color:var(--muted);
  background:rgba(5,5,20,.65);border:1px solid var(--gold-dark);
  border-radius:2px;padding:9px 28px 9px 22px;cursor:pointer;letter-spacing:1px;
  transition:all .25s;position:relative;z-index:1;
}
.t-btn-secondary::before{content:'▶';position:absolute;left:8px;top:50%;transform:translateY(-50%);color:var(--gold);font-size:.6rem;opacity:0;transition:opacity .18s,transform .18s}
.t-btn-secondary:hover{background:rgba(201,168,76,.1);border-color:var(--gold);color:var(--gold2);transform:translateY(-1px)}
.t-btn-secondary:hover::before{opacity:1;transform:translateY(-50%) translateX(2px)}
.t-btn-mini{
  font-family:'Cinzel',serif;font-size:.72rem;color:var(--faint);
  background:rgba(5,5,20,.5);border:1px solid rgba(139,105,20,.4);
  border-radius:2px;padding:7px 16px;cursor:pointer;letter-spacing:1px;
  transition:all .2s;position:relative;z-index:1;
}
.t-btn-mini:hover{color:var(--gold);border-color:var(--gold-dark);background:rgba(201,168,76,.07)}

/* Screen transitions */
.scr.on { animation: screenIn .3s ease-out !important; }
@keyframes screenIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.level-panel-hdr { flex-shrink: 0 !important; padding: 10px 14px !important; margin-bottom: 0 !important; }
#lvls-panel { flex: 1 !important; min-height: 0 !important; overflow-y: auto !important; overflow-x: hidden !important; padding: 8px !important; }

/* 8. SHOP */
#s-shop { overflow: hidden !important; }
.shop-wrap { display: flex !important; flex-direction: column !important; flex: 1 !important; min-height: 0 !important; padding: 0 16px !important; overflow-y: auto !important; }
.shop-hdr { flex-shrink: 0 !important; padding: 10px 0 !important; border-bottom: 1px solid var(--border) !important; display: flex !important; align-items: center !important; gap: 12px !important; }
.shop-h { font-size: 1.8rem !important; }
.shop-tabs { flex-shrink: 0 !important; }
.shop-tab { 
  font-size: 1.05rem !important; 
  padding: 14px 30px !important; 
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  border-radius: 10px 10px 0 0 !important;
  overflow: visible !important;
  white-space: nowrap !important;
}
#panel-pociones, #panel-equipo { overflow-y: auto !important; overflow-x: hidden !important; }
.shop-panel { overflow-y: auto !important; overflow-x: hidden !important; padding-top: 12px !important; flex: 1 !important; min-height: 0 !important; }
#shop-gear-content { flex-shrink: 0 !important; }
.shop-gear-section { flex-shrink: 0 !important; margin-bottom: 18px !important; }
.shop-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important; gap: 10px !important; }
.scard { padding: 16px 14px !important; border-radius: 12px !important; }
.sc-em { font-size: 2.8rem !important; margin-bottom: 8px !important; line-height: 1.3 !important; overflow: visible !important; }
.sc-name { font-size: .82rem !important; word-break: break-word !important; line-height: 1.3 !important; }
.sc-desc { font-size: .92rem !important; line-height: 1.55 !important; margin-bottom: 10px !important; }

/* 9. INTRO */
#s-intro { overflow-y: auto !important; min-height: unset !important; padding: 12px 16px !important; }
.intro-inner { max-width: 860px !important; }
.intro-hd { gap: 12px !important; margin-bottom: 14px !important; }
.intro-em { font-size: 4rem !important; position:relative !important; }
.intro-name { font-size: clamp(1.1rem, 3vw, 1.6rem) !important; }
.tcard { padding: 14px 16px !important; margin-bottom: 10px !important; border-radius: 10px !important; }
.tcard h3 { font-size: 1rem !important; }
.tcard p, .tcard li { font-size: 1rem !important; line-height: 1.65 !important; }
.btn-fight { padding: 16px 36px !important; font-size: 1.05rem !important; margin-top: 10px !important; border-radius: 6px !important; }

/* 10. COMBAT */
#s-combat { padding: 10px 14px !important; overflow-y: auto !important; }
#arena { min-height: 210px !important; padding: 16px 12px !important; border-radius: 12px !important; margin-bottom: 8px !important; }
#m-em { height: auto !important; width: auto !important; min-height: 170px !important; min-width: 100px !important; }
.a-mon { font-size: 1.05rem !important; }
.a-ref { font-size: .78rem !important; }
.q-zone { border-radius: 10px !important; padding: 14px 16px !important; }
.pill { font-size: .9rem !important; padding: 5px 14px !important; }
.q-ins { font-size: 1.05rem !important; }
.inp { font-size: 1.2rem !important; padding: 12px !important; border-radius: 8px !important; }
.cbtn { font-size: 1rem !important; padding: 12px 18px !important; border-radius: 6px !important; }
.cbtn-nxt { font-size: 1.1rem !important; padding: 14px !important; border-radius: 8px !important; }

/* 11. WIN / GAMEOVER */
#s-win, #s-gameover, #s-final { overflow-y: auto !important; padding: 20px !important; }

/* 12. RESPONSIVE */
@media (max-width: 700px) {
  html { font-size: 16px !important; }
  #hud { flex-wrap: wrap !important; }
  .hud-left { padding: 6px 10px !important; }
  .hud-center { padding: 5px 8px !important; gap: 8px !important; }
  .hud-xp-wrap { display: none !important; }
  .hud-level { display: none !important; }
  .hud-nav { padding: 5px 6px !important; gap: 3px !important; flex-wrap: wrap !important; flex-basis: 100% !important; justify-content: center !important; border-left: none !important; border-top: 1px solid rgba(232,168,32,.1) !important; }
  .hbtn { font-size: .68rem !important; padding: 5px 8px !important; }
  #arena { flex-direction: column !important; min-height: auto !important; gap: 6px !important; }
  .a-side, .a-side.r { width: 100% !important; text-align: center !important; }
  .a-mid { width: 100% !important; }
  .char-box { padding: 16px 14px !important; }
  .shop-grid { grid-template-columns: 1fr 1fr !important; }
  .mario-map-wrap { padding: 6px 10px 0 !important; }
  .qtbl th { font-size: .68rem !important; padding: 8px 5px !important; }
  .td-q { font-size: 1.15rem !important; }
  .inp { font-size: 1rem !important; padding: 10px !important; }
  .gear-modal, .tutorial-modal, .ptable-modal { max-width: 97vw !important; max-height: 94vh !important; }
  .gear-modal-body { grid-template-columns: 1fr !important; padding: 14px !important; }
  .btn-row { gap: 6px !important; }
  .cbtn { font-size: .82rem !important; padding: 10px 12px !important; }
  .lvls { grid-template-columns: 1fr !important; }
  .lcard.is-boss, .lcard.is-final { grid-template-columns: auto 1fr !important; gap: 10px !important; padding: 14px !important; }
}
@media (max-width: 420px) {
  html { font-size: 13px !important; }
  .hud-lives .heart:nth-child(n+4) { display: none !important; }
  .shop-grid { grid-template-columns: 1fr !important; }
  .hbtn { font-size: .58rem !important; padding: 4px 6px !important; }
}

/* ════════════════════════════════════════════
   VISUAL OVERHAUL — legibilidad y aspecto
   ════════════════════════════════════════════ */

/* Fix z-index: canvases de fondo por DETRÁS de todo */
#star-canvas    { z-index: 0 !important; opacity: .6 !important; }
#world-bg-canvas{ z-index: 0 !important; }
#notif          { z-index: 900 !important; }
.modal-overlay  { z-index: 400 !important; }
#hud            { z-index: 300 !important; }
.scr.on         { position: relative !important; z-index: 1 !important; }
body > canvas   { pointer-events: none !important; }

/* Colors now set in :root directly */

/* Body background now set in original body rule */

/* Pantallas con fondo semisólido para legibilidad */
.scr.on > * { position: relative; z-index: 2; }
#s-title, #s-char {
  background: linear-gradient(160deg, rgba(45,42,88,.3) 0%, rgba(52,50,95,.35) 100%) !important;
}
#s-map {
  background: linear-gradient(160deg, rgba(14,11,36,.95) 0%, rgba(10,8,28,.98) 100%) !important;
}
#s-shop {
  background: linear-gradient(180deg, rgba(30,28,62,.7) 0%, rgba(35,32,70,.72) 100%) !important;
}
#s-intro {
  background: linear-gradient(160deg, rgba(28,25,58,.65) 0%, rgba(24,22,52,.7) 100%) !important;
}
#s-combat {
  background: rgba(28,25,65,.25) !important;
}
#s-gameover, #s-win, #s-final {
  background: radial-gradient(ellipse at 50% 40%, rgba(30,28,62,.8), rgba(22,20,50,.85)) !important;
}

/* HUD colors set in layout section */

/* TÍTULO con ambiente */
#s-title {
  background:
    radial-gradient(ellipse 55% 45% at 50% 20%, rgba(201,168,76,.08) 0%, transparent 50%),
    radial-gradient(ellipse 50% 55% at 12% 78%, rgba(107,53,184,.18) 0%, transparent 55%),
    radial-gradient(ellipse 40% 45% at 88% 72%, rgba(30,200,168,.1) 0%, transparent 50%),
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(26,26,78,.55) 0%, transparent 60%),
    linear-gradient(170deg, #0e0c28 0%, #1a1440 35%, #200e38 65%, #0e0c28 100%) !important;
}
#s-title::before {
  color: rgba(200,145,30,.06) !important;
}
.t-sub { letter-spacing: 4px !important; }
.t-authors { color: rgba(192,184,144,.7) !important; }

/* CREAR PERSONAJE: caja con borde visible */
.char-box {
  background: rgba(35,32,72,.95) !important;
  border: 1px solid rgba(232,168,32,.6) !important;
  box-shadow: 0 8px 40px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.04) !important;
}

/* MAPA: header compact */
.mario-map-hdr {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 4px 4px !important;
  margin-bottom: 2px !important;
}
.map-h { color: var(--gold2) !important; }

/* CANVAS del mapa: fondo definido */
.world-map-canvas {
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, rgba(30,15,60,.45) 0%, transparent 70%),
    radial-gradient(ellipse 55% 75% at 80% 85%, rgba(8,36,26,.4) 0%, transparent 60%),
    rgba(8,6,22,.93) !important;
  border: 1.5px solid rgba(232,168,32,.42) !important;
  border-radius: 10px !important;
  box-shadow: inset 0 0 60px rgba(0,0,0,.45), 0 2px 20px rgba(0,0,0,.35) !important;
}

/* PANEL DE NIVELES: fondo con contraste */
.level-panel {
  background: rgba(48,46,92,.9) !important;
  border: 1.5px solid rgba(232,168,32,.5) !important;
  border-radius: 10px !important;
}
.level-panel-hdr {
  background: rgba(28,26,60,.85) !important;
  border-bottom: 1px solid rgba(232,168,32,.3) !important;
}

/* TIENDA: fondo legible */
#s-shop { background: rgba(14,12,30,.92) !important; }
.shop-hdr { border-bottom: 1px solid rgba(232,168,32,.4) !important; }
.shop-h { color: #ffd040 !important; }
.shop-tab.active { 
  color: #ffd040 !important; 
  border-bottom-color: #ffd040 !important;
  background: rgba(200,145,30,.1) !important;
}
.scard {
  background: linear-gradient(145deg, rgba(40,38,78,.95), rgba(32,30,65,.97)) !important;
  border: 1px solid rgba(232,168,32,.3) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.03) !important;
}
.scard:hover {
  border-color: rgba(232,168,32,.7) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.5) !important;
}
.sc-name { color: #ffd040 !important; }
.sc-desc { color: #c8b898 !important; }

/* HUD button styles in layout section */

/* INTRO: texto legible sobre fondo */
#s-intro { background: rgba(12,10,26,.93) !important; }
.intro-inner { padding-top: 8px !important; }
.tcard { 
  background: rgba(35,32,70,.95) !important;
  border: 1px solid rgba(232,168,32,.25) !important;
}
.tcard h3 { color: #ffd040 !important; font-size: .82rem !important; }
.tcard p, .tcard li { color: #c8b898 !important; line-height: 1.6 !important; }

/* COMBATE: arena legible */
#arena {
  border: 2px solid rgba(30,200,160,.6) !important;
  background: linear-gradient(160deg, #282570, #353280 50%, #282570) !important;
}
.a-mon { color: #ffd040 !important; font-size: .88rem !important; }
.a-ref { color: #50f0d0 !important; }

/* CARDS de nivel legibles */
.lcard {
  background: rgba(35,32,70,.95) !important;
  border: 1px solid rgba(232,168,32,.3) !important;
}
.lcard:hover {
  border-color: rgba(232,168,32,.7) !important;
  background: rgba(42,40,78,.97) !important;
}
.lc-name { color: #ffd040 !important; }
.lc-mon  { color: #c8b898 !important; }

/* FEEDBACK + HINT visible */
#feedback { border-left-width: 4px !important; }
#feedback.ok { background: rgba(48,216,112,.25) !important; }
#feedback.ko { background: rgba(212,48,32,.25) !important; }
#hint-panel { 
  background: rgba(120,60,200,.25) !important;
  border: 1px solid rgba(180,100,255,.5) !important;
}

/* NOTIFICACIONES */
.nc { 
  background: rgba(38,35,75,.95) !important;
  border: 1px solid rgba(232,168,32,.5) !important;
}

/* INPUT de combate */
.inp { 
  background: rgba(255,255,255,.12) !important;
  border: 2px solid rgba(255,255,255,.22) !important;
  color: #f0e8d0 !important;
  font-size: 1.1rem !important;
}
.inp:focus { 
  border-color: #50f0d0 !important;
  background: rgba(30,200,168,.1) !important;
}
.inp.ok { border-color: #30d870 !important; }
.inp.ko { border-color: #d43020 !important; }

/* MODALES legibles */
.gear-modal, .tutorial-modal {
  background: rgba(38,35,78,.97) !important;
  border: 2px solid rgba(232,168,32,.6) !important;
}

/* Tabla de preguntas */
.qtbl th { 
  background: rgba(232,168,32,.22) !important;
  color: #ffd040 !important;
}
.qtbl td { background: rgba(0,0,0,.2) !important; color: #f0e8d0 !important; }
.td-q { background: rgba(232,168,32,.12) !important; color: #fff8c0 !important; }

/* Barra HP visible */
#hp-fill { background: linear-gradient(90deg, #20d060, #60ff90) !important; }
#hp-txt { color: #fff !important; text-shadow: 0 1px 4px #000 !important; }

/* WIN / GAMEOVER */
#s-win, #s-gameover, #s-final {
  background: rgba(12,10,28,.95) !important;
  align-items: center !important;
  justify-content: center !important;
  overflow-y: auto !important;
}


/* Shopkeeper */
/* shopkeeper styles are inline */

/* Shop section cards - big clickable areas */
.shop-sections{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;
  margin-bottom:16px;flex-shrink:0;
}
.shop-section-card{
  background:linear-gradient(145deg,rgba(50,48,88,.9),rgba(38,35,72,.95));
  border:2px solid var(--border);border-radius:14px;
  padding:24px 20px;text-align:center;cursor:pointer;
  transition:all .25s;position:relative;overflow:hidden;
}
.shop-section-card:hover{
  border-color:var(--gold2);transform:translateY(-3px);
  box-shadow:0 8px 30px rgba(200,145,30,.2);
}
.shop-section-card::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 30%,rgba(200,145,30,.06),transparent 70%);
  pointer-events:none;
}
.shop-sec-icon{font-size:3rem;margin-bottom:10px;display:block;filter:drop-shadow(0 0 10px rgba(200,145,30,.3))}
.shop-sec-title{font-family:'Cinzel',serif;font-size:1rem;color:var(--gold2);font-weight:700;margin-bottom:6px}
.shop-sec-desc{font-size:.88rem;color:var(--muted);line-height:1.5}

@media(max-width:600px){
  .shop-sections{grid-template-columns:1fr}
  .shopkeeper-avatar{font-size:2.5rem}
}

/* ════════════════════════════════════════════
   PERIODIC TABLE MODAL — dark theme integrated
   ════════════════════════════════════════════ */
.ptable-modal{background:var(--panel);border:2px solid var(--border2);border-radius:16px;width:98%;max-width:1400px;max-height:94vh;overflow-y:auto;animation:slideUp .25s ease}
.ptable-modal-hdr{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--panel);z-index:10;flex-wrap:wrap}
.ptable-modal-title{font-family:'Cinzel',serif;font-size:1.1rem;color:var(--gold2);font-weight:700}
.ptable-controls{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto;margin-right:8px}
.ptable-ctrl-btn{font-family:'Cinzel',serif;font-size:.72rem;background:rgba(200,145,30,.14);border:1px solid var(--border);color:var(--gold);padding:5px 12px;border-radius:5px;cursor:pointer;letter-spacing:1px;transition:all .2s;white-space:nowrap}
.ptable-ctrl-btn:hover{background:rgba(200,145,30,.3)}
.ptable-ctrl-btn.active{background:rgba(200,145,30,.3);border-color:var(--gold2);color:var(--gold2)}
.ptable-ctrl-sel{font-family:'Cinzel',serif;font-size:.72rem;background:rgba(255,255,255,.06);border:1px solid var(--border);color:var(--gold);padding:5px 10px;border-radius:5px;cursor:pointer;outline:none}
.ptable-ctrl-sel option{background:var(--panel);color:var(--text)}
.ptable-modal-body{padding:14px 18px}

/* Legend */
.pt-legend{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;justify-content:center}
.pt-legend-item{display:flex;align-items:center;gap:6px;font-size:.78rem;font-weight:700;color:var(--muted);background:rgba(0,0,0,.3);padding:5px 12px;border-radius:14px;cursor:pointer;transition:all .2s;border:1px solid transparent}
.pt-legend-item:hover{border-color:var(--border2);background:rgba(200,145,30,.1)}
.pt-legend-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0}

/* Grid — bigger cells for readability */
.pt-table-wrap{position:relative;overflow-x:auto;padding:4px 0 12px;margin-bottom:12px}
.pt-grid{display:grid;grid-template-columns:24px repeat(18,minmax(56px,1fr));gap:3px;min-width:1050px}
.pt-group-lbl,.pt-period-lbl{font-weight:800;font-size:.72rem;color:var(--faint);display:flex;align-items:center;justify-content:center}

/* Element cell — taller aspect ratio so ox numbers have room */
.pt-el{
  position:relative;border-radius:7px;padding:4px 3px 3px;text-align:center;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  min-height:62px;transition:all .18s;border:1px solid rgba(255,255,255,.05);
  gap:1px;
}
.pt-el:hover{transform:scale(1.18) translateY(-4px);box-shadow:0 10px 28px rgba(0,0,0,.6);z-index:20;border-color:var(--gold2)}

/* Atomic number — top-left corner */
.pt-el .pt-z{
  position:absolute;top:2px;left:4px;
  font-family:'Press Start 2P',monospace;font-size:.38rem;font-weight:800;
  color:rgba(255,255,255,.45);line-height:1;
}

/* Element SYMBOL — the star of the show, big and bold */
.pt-el .pt-sym{
  font-family:'Cinzel',serif;font-size:1.45rem;font-weight:900;
  color:#fff;line-height:1;margin-top:10px;
  text-shadow:0 1px 3px rgba(0,0,0,.4);
  letter-spacing:.5px;
}

/* Oxidation numbers — prominently displayed at bottom */
.pt-el .pt-ox{
  font-family:'Cinzel',serif;font-size:.72rem;font-weight:900;
  color:#ff5050;letter-spacing:.3px;
  display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;
  margin-top:auto;padding-top:3px;
  border-top:1px solid rgba(255,255,255,.1);
  min-height:16px;line-height:1.15;width:100%;
  text-shadow:0 0 6px rgba(255,60,60,.3);
  transition:color .3s,opacity .3s;
}

/* Element category colors — dark theme, slightly stronger */
.pt-alcalino{background:rgba(255,154,158,.25);border-color:rgba(255,154,158,.35)}
.pt-alcalinoterreo{background:rgba(254,207,106,.22);border-color:rgba(254,207,106,.32)}
.pt-transicion{background:rgba(142,228,175,.2);border-color:rgba(142,228,175,.28)}
.pt-post-transicion{background:rgba(161,196,253,.2);border-color:rgba(161,196,253,.28)}
.pt-metaloide{background:rgba(255,195,160,.22);border-color:rgba(255,195,160,.28)}
.pt-no-metal{background:rgba(168,237,234,.2);border-color:rgba(168,237,234,.28)}
.pt-halogeno{background:rgba(212,165,165,.22);border-color:rgba(212,165,165,.28)}

/* ── Game states ── */
/* Mode 1/3: element completely hidden (locked) */
.pt-el.pt-locked{background:rgba(40,40,60,.6)!important;border-color:rgba(80,80,100,.25)!important}
.pt-el.pt-locked .pt-sym,.pt-el.pt-locked .pt-z{visibility:hidden}
.pt-el.pt-locked .pt-ox{visibility:hidden}

/* Mode 2: element visible but ox hidden */
.pt-el.pt-ox-hidden .pt-ox{
  color:transparent!important;text-shadow:none!important;
  background:rgba(255,255,255,.04);border-radius:3px;
}

/* Revealed after correct answer — green flash */
.pt-el.pt-ox-revealed .pt-ox{
  color:#50ff90!important;text-shadow:0 0 8px rgba(80,255,140,.5)!important;
  animation:pt-reveal .5s ease;
}
@keyframes pt-reveal{0%{transform:scale(1.4);color:#80ffc0}100%{transform:scale(1)}}

/* Highlight target for current question */
.pt-el.pt-highlight{animation:pt-pulse 1.2s infinite;border:2px solid var(--flame)!important;transform:scale(1.1);z-index:10}
@keyframes pt-pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,80,30,.5)}50%{box-shadow:0 0 0 10px rgba(255,80,30,0)}}

/* Game HUD */
.pt-game-hud{display:none;background:rgba(0,0,0,.4);border:1px solid var(--border);border-radius:10px;padding:14px 18px;margin-bottom:14px;text-align:center}
.pt-game-hud.active{display:block;animation:fadeSlideUp .3s ease}
.pt-game-status{display:flex;justify-content:space-between;font-size:.9rem;font-weight:800;color:var(--text);padding-bottom:10px;border-bottom:1px solid var(--border);margin-bottom:12px}
.pt-game-msg{font-size:1.1rem;margin-bottom:14px;color:var(--gold2);font-weight:700;min-height:1.4em}
.pt-game-opts{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.pt-opt-btn{background:rgba(255,255,255,.08);color:var(--text);border:2px solid var(--border);padding:10px 22px;border-radius:8px;font-size:1.05rem;font-weight:900;cursor:pointer;transition:all .2s;font-family:'Cinzel',serif}
.pt-opt-btn:hover:not(:disabled){transform:scale(1.05);border-color:var(--gold2);background:rgba(200,145,30,.12)}
.pt-opt-btn:disabled{opacity:.5;cursor:not-allowed}
.pt-opt-btn.pt-correct{background:rgba(48,216,112,.2)!important;border-color:var(--green)!important;color:var(--green2)!important}
.pt-opt-btn.pt-wrong{background:rgba(212,48,32,.2)!important;border-color:var(--ember)!important;color:var(--flame)!important}

/* Electronegativity arrows */
.pt-en-overlay{display:none;position:absolute;inset:0;pointer-events:none;z-index:15}
.pt-en-overlay.active{display:block}
.pt-en-arrow{position:absolute;display:flex;align-items:center;justify-content:center;font-weight:900;color:var(--gold);font-size:.85rem;border:2px dashed var(--gold);border-radius:6px;background:rgba(200,145,30,.08)}

/* Rules panel */
.pt-rules{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:8px}
@media(max-width:800px){.pt-rules{grid-template-columns:1fr}}
.pt-rules h3{font-family:'Cinzel',serif;font-size:.9rem;color:var(--teal2);margin:0 0 8px;letter-spacing:1px}
.pt-rule-list{list-style:none;padding:0;margin:0}
.pt-rule-list li{background:rgba(0,0,0,.25);margin-bottom:6px;padding:8px 12px;border-radius:6px;font-size:.82rem;color:var(--muted);border-left:3px solid var(--teal);line-height:1.5}
.pt-rule-list li strong{color:var(--gold2)}
.pt-rule-col{background:rgba(0,0,0,.2);border:1px solid var(--border);border-radius:10px;padding:14px 16px}

/* Element info card */
.pt-elem-card{background:var(--panel);border:2px solid var(--border2);border-radius:16px;width:90%;max-width:520px;padding:28px;position:relative;animation:slideUp .25s ease}
.pt-elem-hdr{display:flex;align-items:center;gap:18px;margin-bottom:18px}
.pt-elem-symbol{font-size:2.8rem;font-weight:900;color:var(--gold2);background:rgba(0,0,0,.3);width:80px;height:80px;display:flex;align-items:center;justify-content:center;border-radius:14px;border:1px solid var(--border)}
.pt-elem-badge{display:inline-block;padding:4px 12px;border-radius:6px;font-size:.75rem;font-weight:800;background:rgba(200,145,30,.2);color:var(--gold);letter-spacing:1px;text-transform:uppercase}
.pt-elem-ox-row{margin-bottom:16px}
.pt-elem-ox{font-size:1.6rem;font-weight:900;color:#ff6060;display:block;margin-top:4px}
.pt-elem-behavior{background:rgba(0,0,0,.25);border-left:4px solid var(--gold);padding:14px 16px;border-radius:0 8px 8px 0;line-height:1.7;color:var(--muted);font-size:.92rem}

@media(max-width:600px){
  .ptable-modal{max-height:98vh;border-radius:8px}
  .ptable-modal-hdr{padding:10px 12px}
  .ptable-modal-title{font-size:.88rem}
  .ptable-controls{gap:5px}
  .pt-grid{gap:2px;min-width:780px;grid-template-columns:20px repeat(18,minmax(40px,1fr))}
  .pt-el{min-height:50px;padding:3px 2px 2px}
  .pt-el .pt-sym{font-size:1.1rem;margin-top:7px}
  .pt-el .pt-z{font-size:.32rem}
  .pt-el .pt-ox{font-size:.58rem;min-height:13px}
}


/* ═══════════════════════════════════════════════════════════
   PRO VISUAL UPGRADE — Shadows, Glows, Glass, Depth
   ═══════════════════════════════════════════════════════════ */

/* ── Global glass effect mixin ── */
.glass{
  background:rgba(255,255,255,.04)!important;
  backdrop-filter:blur(16px) saturate(1.4)!important;
  -webkit-backdrop-filter:blur(16px) saturate(1.4)!important;
  border:1px solid rgba(255,255,255,.08)!important;
}

/* ── Body: richer background with animated gradient ── */
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(ellipse 80% 60% at 20% 10%, rgba(120,50,220,.12) 0%, transparent 50%),
    radial-gradient(ellipse 70% 50% at 80% 90%, rgba(20,180,140,.1) 0%, transparent 50%),
    radial-gradient(ellipse 50% 40% at 50% 50%, rgba(220,160,40,.05) 0%, transparent 60%);
  animation: bgPulse 20s ease-in-out infinite alternate;
}
@keyframes bgPulse{
  0%{opacity:.6;filter:hue-rotate(0deg)}
  100%{opacity:1;filter:hue-rotate(15deg)}
}

/* ── HUD: glass bar with inner glow ── */
#hud{
  background:rgba(45,42,90,.92)!important;
  backdrop-filter:blur(20px) saturate(1.5)!important;
  -webkit-backdrop-filter:blur(20px) saturate(1.5)!important;
  border-bottom:1px solid rgba(232,168,32,.2)!important;
  box-shadow:
    0 4px 20px rgba(0,0,0,.4),
    0 1px 0 rgba(255,255,255,.03) inset,
    0 -1px 40px rgba(100,50,200,.05) inset !important;
}
.hud-left{
  border-right:1px solid rgba(255,255,255,.06)!important;
  transition:background .3s!important;
}
.hud-left:hover{
  background:rgba(232,168,32,.06)!important;
  box-shadow:0 0 20px rgba(232,168,32,.08) inset;
}
.hud-avatar{
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))!important;
}
.hud-name{
  text-shadow:0 1px 4px rgba(0,0,0,.3)!important;
}
.hud-coins{
  background:rgba(232,168,32,.08)!important;
  border:1px solid rgba(232,168,32,.15)!important;
  box-shadow:0 0 12px rgba(232,168,32,.06) inset!important;
  border-radius:8px!important;
}
.hbtn{
  background:rgba(255,255,255,.05)!important;
  border:1px solid rgba(255,255,255,.1)!important;
  box-shadow:0 2px 8px rgba(0,0,0,.2), 0 1px 0 rgba(255,255,255,.04) inset!important;
  transition:all .25s cubic-bezier(.4,0,.2,1)!important;
}
.hbtn:hover{
  background:rgba(232,168,32,.12)!important;
  border-color:rgba(232,168,32,.4)!important;
  box-shadow:0 4px 16px rgba(232,168,32,.15), 0 0 20px rgba(232,168,32,.05) inset!important;
  transform:translateY(-1px)!important;
}

/* ── Cards: elevated glass panels ── */
.scard{
  background:linear-gradient(145deg,rgba(50,48,95,.85),rgba(35,33,75,.92))!important;
  border:1px solid rgba(255,255,255,.07)!important;
  box-shadow:
    0 4px 16px rgba(0,0,0,.3),
    0 1px 0 rgba(255,255,255,.04) inset,
    0 0 0 1px rgba(0,0,0,.2)!important;
  backdrop-filter:blur(8px)!important;
  transition:all .3s cubic-bezier(.4,0,.2,1)!important;
}
.scard:hover{
  border-color:rgba(232,168,32,.35)!important;
  box-shadow:
    0 8px 32px rgba(0,0,0,.4),
    0 0 30px rgba(232,168,32,.08),
    0 1px 0 rgba(255,255,255,.06) inset!important;
  transform:translateY(-3px)!important;
}
.sc-em{
  filter:drop-shadow(0 4px 12px rgba(200,145,30,.25))!important;
}

/* ── Shop section cards: premium feel ── */
.shop-section-card{
  background:linear-gradient(145deg,rgba(55,52,100,.85),rgba(38,36,78,.92))!important;
  border:1px solid rgba(255,255,255,.08)!important;
  box-shadow:0 6px 24px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.05) inset!important;
  backdrop-filter:blur(8px)!important;
  transition:all .35s cubic-bezier(.4,0,.2,1)!important;
}
.shop-section-card:hover{
  border-color:rgba(232,168,32,.5)!important;
  box-shadow:
    0 12px 40px rgba(0,0,0,.4),
    0 0 40px rgba(232,168,32,.1),
    0 1px 0 rgba(255,255,255,.08) inset!important;
  transform:translateY(-4px) scale(1.01)!important;
}
.shop-section-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);
}
.shop-sec-icon{
  filter:drop-shadow(0 4px 16px rgba(200,145,30,.3))!important;
}

/* ── Arena: dramatic lighting ── */
#arena{
  background:
    radial-gradient(ellipse 80% 60% at 50% 30%, rgba(60,50,120,.4), transparent 70%),
    linear-gradient(160deg, rgba(35,32,75,.95), rgba(42,40,88,.95) 50%, rgba(35,32,75,.95))!important;
  border:1px solid rgba(255,255,255,.06)!important;
  box-shadow:
    0 8px 32px rgba(0,0,0,.4),
    0 0 60px rgba(100,50,200,.06) inset,
    0 1px 0 rgba(255,255,255,.04) inset!important;
  position:relative!important;
}
#arena::before{
  content:'';position:absolute;top:0;left:5%;right:5%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(232,168,32,.3),transparent)!important;
}
#arena::after{
  content:'';position:absolute;bottom:0;left:5%;right:5%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(80,240,208,.15),transparent);
  pointer-events:none;
}
#m-em{
  filter:drop-shadow(0 8px 24px rgba(0,0,0,.5)) drop-shadow(0 0 20px rgba(200,145,30,.15))!important;
}

/* ── Buttons: premium gradients ── */
.btn-start{
  box-shadow:
    0 6px 24px rgba(200,145,30,.35),
    0 2px 0 rgba(255,255,255,.15) inset,
    0 0 60px rgba(200,145,30,.15)!important;
  text-shadow:0 1px 2px rgba(0,0,0,.3)!important;
}
.btn-start:hover{
  box-shadow:
    0 8px 40px rgba(200,145,30,.5),
    0 2px 0 rgba(255,255,255,.2) inset,
    0 0 80px rgba(200,145,30,.2)!important;
  transform:translateY(-3px) scale(1.02)!important;
}
.btn-buy,.btn-equip{
  box-shadow:0 3px 12px rgba(0,0,0,.25), 0 1px 0 rgba(255,255,255,.1) inset!important;
  transition:all .25s cubic-bezier(.4,0,.2,1)!important;
}
.btn-buy:hover:not(:disabled),.btn-equip:hover:not(:disabled){
  box-shadow:0 6px 20px rgba(0,0,0,.35), 0 0 20px rgba(200,145,30,.1)!important;
  transform:translateY(-2px)!important;
}
.cbtn{
  box-shadow:0 3px 12px rgba(0,0,0,.3), 0 1px 0 rgba(255,255,255,.06) inset!important;
  transition:all .2s cubic-bezier(.4,0,.2,1)!important;
}
.cbtn:hover{
  transform:translateY(-1px)!important;
  box-shadow:0 5px 20px rgba(0,0,0,.4)!important;
}
.cbtn-atk{
  background:linear-gradient(135deg,#6a1800,#c83010 40%,#e84020 60%,#c83010)!important;
  box-shadow:0 4px 16px rgba(200,40,20,.3), 0 1px 0 rgba(255,255,255,.12) inset!important;
  text-shadow:0 1px 3px rgba(0,0,0,.4)!important;
}
.cbtn-atk:hover{
  box-shadow:0 6px 24px rgba(200,40,20,.45), 0 0 30px rgba(255,80,30,.1)!important;
}
.cbtn-nxt{
  box-shadow:0 4px 16px rgba(30,200,168,.2), 0 1px 0 rgba(255,255,255,.1) inset!important;
}

/* ── Input fields: inner glow ── */
.inp{
  background:rgba(0,0,0,.15)!important;
  border:2px solid rgba(255,255,255,.08)!important;
  box-shadow:0 2px 8px rgba(0,0,0,.2) inset, 0 1px 0 rgba(255,255,255,.03)!important;
  transition:all .25s!important;
}
.inp:focus{
  border-color:rgba(80,240,208,.4)!important;
  box-shadow:0 2px 8px rgba(0,0,0,.2) inset, 0 0 16px rgba(80,240,208,.1)!important;
  background:rgba(0,0,0,.2)!important;
}

/* ── Modals: frosted glass ── */
.modal-overlay{
  background:rgba(0,0,0,.6)!important;
  backdrop-filter:blur(8px)!important;
  -webkit-backdrop-filter:blur(8px)!important;
}
.gear-modal,.tutorial-modal,.ptable-modal,.pt-elem-card{
  background:rgba(40,38,80,.95)!important;
  backdrop-filter:blur(20px) saturate(1.3)!important;
  -webkit-backdrop-filter:blur(20px) saturate(1.3)!important;
  border:1px solid rgba(255,255,255,.08)!important;
  box-shadow:
    0 16px 60px rgba(0,0,0,.5),
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 1px 0 rgba(255,255,255,.06) inset!important;
}

/* ── Notifications: glass pill ── */
.notif{
  backdrop-filter:blur(16px) saturate(1.3)!important;
  -webkit-backdrop-filter:blur(16px) saturate(1.3)!important;
  box-shadow:0 8px 32px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.06) inset!important;
  border:1px solid rgba(255,255,255,.08)!important;
}

/* ── World map nodes: glow effects ── */
.world-node{
  transition:all .35s cubic-bezier(.4,0,.2,1)!important;
}
.world-node:hover:not(.wn-locked){
  filter:brightness(1.2)!important;
}
.wn-icon{
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.4)) drop-shadow(0 0 16px var(--nodeColor,.3))!important;
}
.world-node:not(.wn-locked) .wn-icon{
  animation:nodeFloat 4s ease-in-out infinite;
}
@keyframes nodeFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-5px)}
}
.wn-badge{
  box-shadow:0 2px 8px rgba(0,0,0,.3)!important;
}

/* ── Level panel: depth ── */
.level-panel{
  box-shadow:0 -4px 24px rgba(0,0,0,.3), 0 0 0 1px rgba(255,255,255,.04) inset!important;
}
.level-panel-hdr{
  border-bottom:1px solid rgba(255,255,255,.06)!important;
  box-shadow:0 2px 8px rgba(0,0,0,.15)!important;
}

/* ── Intro cards: subtle lift ── */
.tcard{
  background:rgba(48,46,92,.88)!important;
  border:1px solid rgba(255,255,255,.06)!important;
  box-shadow:0 4px 16px rgba(0,0,0,.25), 0 1px 0 rgba(255,255,255,.03) inset!important;
  backdrop-filter:blur(8px)!important;
}

/* ── HP bar: glossy ── */
.hp-wrap{
  box-shadow:0 2px 8px rgba(0,0,0,.3) inset!important;
  border:1px solid rgba(255,255,255,.06)!important;
}
#hp-fill{
  box-shadow:0 0 8px rgba(48,216,112,.3), 0 1px 0 rgba(255,255,255,.2) inset!important;
}

/* ── XP bar: glossy ── */
.hud-xp-bar{
  box-shadow:0 1px 4px rgba(0,0,0,.3) inset!important;
  border:1px solid rgba(255,255,255,.04)!important;
}
.hud-xp-fill{
  box-shadow:0 0 6px rgba(144,64,208,.3), 0 1px 0 rgba(255,255,255,.15) inset!important;
}

/* ── Hearts: animated glow ── */
.heart{
  filter:drop-shadow(0 0 4px rgba(255,72,72,.4))!important;
  transition:all .3s!important;
}
.heart:not(.lost):hover{
  filter:drop-shadow(0 0 8px rgba(255,72,72,.6))!important;
  transform:scale(1.15);
}

/* ── Feedback panels: glass ── */
#feedback{
  backdrop-filter:blur(8px)!important;
  box-shadow:0 4px 20px rgba(0,0,0,.25)!important;
  border:1px solid rgba(255,255,255,.06)!important;
}
#hint-panel{
  backdrop-filter:blur(8px)!important;
  box-shadow:0 4px 16px rgba(0,0,0,.2)!important;
  border:1px solid rgba(255,255,255,.06)!important;
}

/* ── Question zone: refined ── */
.q-zone{
  background:rgba(42,40,88,.88)!important;
  border:1px solid rgba(255,255,255,.06)!important;
  box-shadow:0 4px 20px rgba(0,0,0,.3), 0 1px 0 rgba(255,255,255,.03) inset!important;
  backdrop-filter:blur(8px)!important;
}
.qtbl th{
  text-shadow:0 1px 3px rgba(0,0,0,.3)!important;
}
.pill{
  box-shadow:0 2px 8px rgba(0,0,0,.2)!important;
  text-shadow:0 1px 2px rgba(0,0,0,.3)!important;
}

/* ── Periodic Table: refined cells ── */
.pt-el{
  box-shadow:0 2px 6px rgba(0,0,0,.2), 0 1px 0 rgba(255,255,255,.04) inset!important;
  transition:all .2s cubic-bezier(.4,0,.2,1)!important;
}
.pt-el:hover{
  box-shadow:0 8px 24px rgba(0,0,0,.5), 0 0 20px rgba(232,168,32,.15)!important;
}

/* ── Gear cards: premium ── */
.scard.gear-card{
  background:linear-gradient(145deg,rgba(50,48,95,.85),rgba(35,33,75,.92))!important;
  box-shadow:0 4px 16px rgba(0,0,0,.3), 0 0 0 1px rgba(210,155,40,.15) inset!important;
}
.scard.gear-card.equipped{
  box-shadow:0 4px 16px rgba(0,0,0,.3), 0 0 20px rgba(64,232,192,.1), 0 0 0 1px rgba(64,232,192,.2) inset!important;
}

/* ── Gear modal slots: refined ── */
.gear-slot{
  box-shadow:0 2px 8px rgba(0,0,0,.2), 0 1px 0 rgba(255,255,255,.03) inset!important;
  transition:all .25s!important;
}
.gear-slot:hover{
  box-shadow:0 4px 16px rgba(0,0,0,.3), 0 0 12px rgba(80,240,208,.05)!important;
}


/* ── Boss monster enhancements ── */
#m-em .boss-aura{
  position:absolute;inset:-20px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,60,20,.1) 0%,transparent 70%);
  animation:bossAura 2s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes bossAura{
  0%{transform:scale(1);opacity:.5}
  100%{transform:scale(1.15);opacity:.8}
}
/* Boss monster glow */
.is-boss-fight #m-em{
  filter:drop-shadow(0 0 30px rgba(255,80,30,.3)) drop-shadow(0 8px 24px rgba(0,0,0,.5))!important;
}
.is-boss-fight #arena{
  border-color:rgba(255,80,30,.2)!important;
  box-shadow:0 8px 32px rgba(0,0,0,.4), 0 0 60px rgba(255,60,20,.06) inset!important;
}
.is-boss-fight #arena::before{
  background:linear-gradient(90deg,transparent,rgba(255,80,30,.3),transparent)!important;
}

/* Level intro monster glow */
.intro-em{
  position:relative;
}
.intro-em::after{
  content:'';position:absolute;inset:-15px;
  background:radial-gradient(circle,rgba(200,145,30,.1),transparent 70%);
  border-radius:50%;pointer-events:none;
  animation:introGlow 3s ease-in-out infinite alternate;
}
@keyframes introGlow{
  0%{transform:scale(.9);opacity:.3}
  100%{transform:scale(1.1);opacity:.7}
}

/* ── Win/GameOver screens: dramatic ── */
#s-win,#s-gameover,#s-final{
  background:radial-gradient(ellipse at 50% 40%, rgba(35,32,70,.9), rgba(22,20,55,.95))!important;
}
.w-em,.go-em,.final-em{
  filter:drop-shadow(0 8px 24px rgba(200,145,30,.4))!important;
  animation:bob 3s ease-in-out infinite!important;
}
.w-h,.final-h{
  background:linear-gradient(135deg,var(--gold),var(--gold2),var(--gold3),var(--gold2),var(--gold))!important;
  -webkit-background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
  background-clip:text!important;
}
.w-h,.go-h,.final-h{
  text-shadow:0 2px 8px rgba(0,0,0,.4)!important;
}
.wr{
  box-shadow:0 2px 8px rgba(0,0,0,.2), 0 1px 0 rgba(255,255,255,.04) inset!important;
  border:1px solid rgba(255,255,255,.05)!important;
}

/* ── Title screen: atmospheric ── */
#s-title::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:45%;
  background:linear-gradient(to top,rgba(5,5,20,.7),rgba(10,10,40,.2),transparent);
  pointer-events:none;z-index:0;
}
.t-title{
  text-shadow:0 0 30px rgba(201,168,76,.15)!important;
}
.t-sub{
  text-shadow:0 0 16px rgba(0,180,216,.2)!important;
}

/* ── Character create: refined ── */
.char-box{
  box-shadow:
    0 16px 48px rgba(0,0,0,.4),
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 1px 0 rgba(255,255,255,.06) inset!important;
  backdrop-filter:blur(12px)!important;
}
.cc,.cg{
  box-shadow:0 2px 8px rgba(0,0,0,.2), 0 1px 0 rgba(255,255,255,.04) inset!important;
  transition:all .25s cubic-bezier(.4,0,.2,1)!important;
}
.cc:hover,.cg:hover{
  box-shadow:0 4px 16px rgba(0,0,0,.3), 0 0 12px rgba(232,168,32,.06)!important;
  transform:translateY(-2px)!important;
}
.cc.sel,.cg.sel{
  box-shadow:0 4px 16px rgba(0,0,0,.3), 0 0 16px rgba(80,240,208,.1)!important;
}

/* ── Map: richer canvas ── */
.world-map-canvas{
  box-shadow:0 4px 24px rgba(0,0,0,.3) inset, 0 1px 0 rgba(255,255,255,.03)!important;
  border:1px solid rgba(255,255,255,.06)!important;
}

/* ── Interior map nodes: glow ── */
.wloc-icon{
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.4)) drop-shadow(0 0 12px rgba(200,145,30,.3))!important;
}

@keyframes tut-marker-pulse {
  0%,100% { box-shadow:0 0 0 4px rgba(200,145,30,.3),inset 0 0 20px rgba(200,145,30,.15); border-color:var(--gold); }
  50%      { box-shadow:0 0 0 8px rgba(200,145,30,.5),inset 0 0 40px rgba(200,145,30,.3); border-color:var(--gold2); }
}
@keyframes tut-arrow-bounce {
  0%,100% { transform:translateY(0); }
  50%      { transform:translateY(-6px); }
}
@keyframes tut-float {
  0%,100% { transform:translateY(0); }
  50%      { transform:translateY(-8px); }
}

/* ── Combat animations refined ── */
@keyframes m-idle{
  0%,100%{transform:translateY(0);filter:drop-shadow(0 8px 16px rgba(0,0,0,.4))}
  50%{transform:translateY(-6px);filter:drop-shadow(0 14px 20px rgba(0,0,0,.3))}
}
.idle #m-em>*,.idle #m-em>div{animation:m-idle 3.2s ease-in-out infinite}

/* ── Scrollbar pro ── */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:rgba(0,0,0,.15);border-radius:3px}
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,rgba(232,168,32,.5),rgba(200,145,30,.3));
  border-radius:3px;
  box-shadow:0 0 4px rgba(232,168,32,.2);
}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,rgba(232,168,32,.7),rgba(200,145,30,.5))}

/* ── Selection style ── */
::selection{background:rgba(200,145,30,.3);color:#fff}

/* ── Focus ring ── */
:focus-visible{
  outline:2px solid rgba(80,240,208,.5)!important;
  outline-offset:2px!important;
}


/* Battle Intro Animations */
@keyframes biSlideIn{from{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes biFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes biSlideLeft{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:none}}
@keyframes biSlideRight{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
@keyframes biPulseVS{0%{opacity:0;transform:scale(0)}50%{opacity:1;transform:scale(1.3)}100%{opacity:1;transform:scale(1)}}

.battle-intro-overlay{
  display:none;
  position:fixed;inset:0;z-index:999;
  background:#000;
  align-items:center;justify-content:center;
  flex-direction:column;gap:16px;
}
.battle-intro-overlay.active{
  display:flex!important;
}


/* Pro textures for cards */
.scard::before{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(135deg,rgba(255,255,255,.03) 0%,transparent 50%,rgba(0,0,0,.03) 100%);
  pointer-events:none;
}
.shop-section-card .shop-sec-icon{
  transition:transform .4s cubic-bezier(.4,0,.2,1);
}
.shop-section-card:hover .shop-sec-icon{
  transform:scale(1.15) translateY(-4px);
}
/* Gear equipped glow */
.scard.gear-card.equipped{
  animation:equippedPulse 3s ease-in-out infinite;
}
@keyframes equippedPulse{
  0%,100%{box-shadow:0 4px 16px rgba(0,0,0,.3), 0 0 15px rgba(64,232,192,.08)}
  50%{box-shadow:0 4px 16px rgba(0,0,0,.3), 0 0 25px rgba(64,232,192,.15)}
}
/* Question table cells - alternating subtle bg */
.qtbl tr:nth-child(even) td{
  background:rgba(255,255,255,.02)!important;
}
/* Combat streak fire effect */
#streak-d span{
  text-shadow:0 0 8px rgba(255,100,30,.5);
}


/* Filter system handled by JS updateBodyFilter() */

/* Copyright watermark — persistent */
#credits-watermark{
  position:fixed;
  bottom:5px;
  right:10px;
  font-family:'Cinzel',serif;
  font-size:.48rem;
  color:rgba(201,168,76,.7);
  pointer-events:auto;
  user-select:none;
  z-index:5;
  white-space:nowrap;
  letter-spacing:.3px;
}
#credits-watermark a{
  color:rgba(201,168,76,.7);
  text-decoration:underline;
  text-underline-offset:2px;
  transition:color .2s,opacity .2s;
}
#credits-watermark a:hover{
  color:rgba(255,215,0,.95);
}

@keyframes streakShake{0%{transform:translateX(-2px)}25%{transform:translateX(2px)}50%{transform:translateX(-1px)}75%{transform:translateX(1px)}100%{transform:none}}
body.streak-shake{animation:streakShake .3s ease!important;}
body.flash-kill .scr.on{animation:flashKill .4s ease!important;}
@keyframes flashKill{0%{opacity:.7;transform:scale(1.01)}100%{opacity:1;transform:scale(1)}}

@keyframes secretPulse{0%,100%{filter:drop-shadow(0 0 8px rgba(200,80,255,.3))}50%{filter:drop-shadow(0 0 20px rgba(200,80,255,.6))}}

/* RESUME MODAL */
.resume-modal-box{background:var(--panel);border:2px solid var(--border2);border-radius:12px;padding:36px 32px;max-width:420px;width:100%;text-align:center;box-shadow:0 8px 48px rgba(0,0,0,.6)}
.resume-modal-title{font-family:'Cinzel',serif;font-size:1.3rem;color:var(--gold2);margin-bottom:14px}
.resume-modal-msg{font-size:1rem;color:var(--muted);margin-bottom:28px;line-height:1.6}
.resume-modal-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.btn-resume-continue{font-family:'Cinzel',serif;font-weight:700;font-size:.9rem;letter-spacing:1px;padding:12px 28px;border-radius:6px;cursor:pointer;background:linear-gradient(135deg,#1a6040,var(--teal));border:2px solid var(--teal);color:#fff;transition:all .2s}
.btn-resume-continue:hover{filter:brightness(1.2);transform:translateY(-2px)}
.btn-resume-restart{font-family:'Cinzel',serif;font-weight:700;font-size:.9rem;letter-spacing:1px;padding:12px 28px;border-radius:6px;cursor:pointer;background:rgba(0,0,0,.3);border:2px solid var(--border2);color:var(--muted);transition:all .2s}
.btn-resume-restart:hover{border-color:var(--gold2);color:var(--text);transform:translateY(-2px)}

/* ══════════════════════════════════════
   TITLE SCREEN — MARCO Y AUTORÍA
   ══════════════════════════════════════ */

/* Marco pergamino medieval */
.t-menu-frame{
  position:relative;
  background:rgba(5,5,20,.78);
  border:2px solid var(--gold-dark);
  box-shadow:
    inset 0 0 0 1px rgba(201,168,76,.1),
    inset 0 0 40px rgba(0,0,0,.5),
    0 0 60px rgba(0,0,0,.7),
    0 0 16px rgba(201,168,76,.05);
  padding:32px 26px 26px;
  border-radius:2px;
}
/* Esquinas ornamentadas: barra superior e inferior */
.t-menu-frame::before,.t-menu-frame::after{
  content:'';
  position:absolute;left:6px;right:6px;height:1px;
  background:linear-gradient(90deg,rgba(255,215,0,.75),rgba(201,168,76,.35) 15%,rgba(255,215,0,.6) 50%,rgba(201,168,76,.35) 85%,rgba(255,215,0,.75));
  box-shadow:0 0 4px rgba(255,215,0,.3);
}
.t-menu-frame::before{top:6px}
.t-menu-frame::after{bottom:6px}

/* ── Botón de accesibilidad (hereda .t-btn-mini) ── */
#btn-access.active{
  color:#ffd700!important;
  border-color:rgba(255,215,0,.65)!important;
  background:rgba(201,168,76,.15)!important;
  box-shadow:0 0 10px rgba(255,215,0,.22)!important;
  text-shadow:0 0 6px rgba(255,215,0,.4)!important;
}

/* ══════════════════════════════════════
   NIVEL BASE — contraste/brillo mejorado
   (siempre activo, sin clase)
   ══════════════════════════════════════ */

/* Variables de texto más claras en todas las pantallas */
body{
  --text:#fff;
  --muted:rgba(210,222,234,.9);
  --faint:rgba(175,192,210,.7);
}

/* Título: glow base */
.t-title{filter:brightness(1.2) contrast(1.1)}
.t-sub{
  color:rgba(140,235,220,.95)!important;
  text-shadow:0 0 10px rgba(78,205,196,.5),0 1px 2px rgba(0,0,0,.8);
}
.t-authors{
  color:rgba(255,215,0,.92)!important;
  text-shadow:0 0 8px rgba(255,215,0,.3);
}
.t-cc-license,.t-cc-license a{
  color:rgba(255,215,0,.88)!important;
  text-shadow:0 0 5px rgba(255,215,0,.2);
}

/* Botones principales */
.btn-start{
  color:#fff!important;
  text-shadow:0 0 10px rgba(255,255,255,.35),0 1px 0 rgba(0,0,0,.9);
  border-color:rgba(255,215,0,.85)!important;
  box-shadow:0 0 14px rgba(255,215,0,.18),0 4px 20px rgba(0,0,0,.5)!important;
}
#title-continue-btn .btn-start{
  border-color:rgba(56,208,176,.85)!important;
  box-shadow:0 0 14px rgba(56,208,176,.2),0 4px 20px rgba(0,0,0,.5)!important;
}
#title-continue-btn .t-btn-mini{
  color:rgba(255,110,90,.95)!important;
  border-color:rgba(200,60,40,.6)!important;
}
.t-btn-mini{
  color:rgba(255,215,0,.9)!important;
  border-color:rgba(201,168,76,.5)!important;
}
button[onclick="startTutorial()"]{
  color:rgba(255,215,0,.95)!important;
  text-shadow:0 0 10px rgba(255,215,0,.35),0 1px 0 rgba(0,0,0,.9);
  border-color:rgba(200,145,30,.85)!important;
}
button[onclick="showTeacherPanel()"]{
  color:rgba(215,185,255,.95)!important;
  text-shadow:0 0 10px rgba(180,130,255,.35),0 1px 0 rgba(0,0,0,.9);
  border-color:rgba(160,130,210,.7)!important;
}

/* ══════════════════════════════════════
   NIVEL 2 — botón Aa activo (aún más contraste)
   ══════════════════════════════════════ */
body.high-contrast{
  --muted:rgba(235,245,252,.96);
  --faint:rgba(210,228,244,.86);
}

/* Trazo fino que engrosa las letras sin cambiar su tamaño */
body.high-contrast button,
body.high-contrast p,
body.high-contrast h1,body.high-contrast h2,body.high-contrast h3,
body.high-contrast a,
body.high-contrast label,
body.high-contrast span:not([class*="icon"]) {
  -webkit-text-stroke: 0.45px currentColor;
}
body.high-contrast .t-title{filter:brightness(1.38) contrast(1.18)}
body.high-contrast .t-sub{
  color:rgba(160,255,242,.99)!important;
  text-shadow:0 0 16px rgba(78,205,196,.7),0 0 6px rgba(78,205,196,.4),0 1px 2px rgba(0,0,0,.9);
}
body.high-contrast .t-authors{
  color:#ffd700!important;
  text-shadow:0 0 12px rgba(255,215,0,.55),0 1px 0 rgba(0,0,0,.8);
}
body.high-contrast .t-cc-license,body.high-contrast .t-cc-license a{
  color:#ffd700!important;
  text-shadow:0 0 8px rgba(255,215,0,.38);
}
body.high-contrast .btn-start{
  text-shadow:0 0 14px rgba(255,255,255,.55),0 1px 0 rgba(0,0,0,.95)!important;
  border-color:rgba(255,215,0,.96)!important;
  box-shadow:0 0 22px rgba(255,215,0,.32),0 4px 24px rgba(0,0,0,.6)!important;
}
body.high-contrast #title-continue-btn .btn-start{
  border-color:rgba(56,208,176,.96)!important;
  box-shadow:0 0 22px rgba(56,208,176,.34),0 4px 24px rgba(0,0,0,.6)!important;
}
body.high-contrast #title-continue-btn .t-btn-mini{
  color:rgba(255,135,112,1)!important;
  border-color:rgba(220,70,50,.82)!important;
}
body.high-contrast .t-btn-mini{
  color:#ffd700!important;
  border-color:rgba(201,168,76,.72)!important;
  text-shadow:0 0 6px rgba(255,215,0,.28);
}
body.high-contrast button[onclick="startTutorial()"]{
  color:#ffd700!important;
  text-shadow:0 0 14px rgba(255,215,0,.58),0 1px 0 rgba(0,0,0,.95);
  border-color:rgba(200,145,30,.96)!important;
  box-shadow:0 0 22px rgba(200,145,30,.3)!important;
}
body.high-contrast button[onclick="showTeacherPanel()"]{
  color:rgba(228,205,255,1)!important;
  text-shadow:0 0 14px rgba(180,130,255,.58),0 1px 0 rgba(0,0,0,.95);
  border-color:rgba(185,155,235,.88)!important;
}

/* Símbolos alquímicos flotantes de fondo */
.t-alch-symbols{
  position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;
}
.t-alch-symbols span{
  position:absolute;
  top:90%;
  font-family:'Cinzel',serif;
  color:rgba(201,168,76,.16);
  animation:alch-float linear infinite;
  user-select:none;
}
@keyframes alch-float{
  0%{transform:translateY(0) rotate(0deg);opacity:0}
  8%{opacity:1}
  92%{opacity:1}
  100%{transform:translateY(-115vh) rotate(15deg);opacity:0}
}

/* Nota de autoría y licencia */
.t-cc-license{
  font-family:'Cinzel',serif;
  font-size:.6rem;
  color:var(--gold2);
  letter-spacing:.8px;
  margin-top:12px;
  position:relative;z-index:1;
  pointer-events:auto;
  user-select:none;
  opacity:.85;
}
.t-cc-license a{
  color:var(--gold2);
  text-decoration:underline;
  text-underline-offset:2px;
  opacity:.85;
  transition:opacity .2s,color .2s;
}
.t-cc-license a:hover{
  opacity:1;
  color:var(--gold);
}

/* ══════════════════════════════════════
   COURSE SELECT SCREEN
   ══════════════════════════════════════ */
#s-course{align-items:center;justify-content:center;min-height:100vh;padding:10px 16px}
.course-box{background:rgba(5,5,20,.82);border:2px solid var(--gold-dark);border-radius:2px;padding:18px 20px 14px;max-width:600px;width:100%;text-align:center;box-shadow:0 0 60px rgba(0,0,0,.7),inset 0 0 40px rgba(0,0,0,.4),inset 0 0 0 1px rgba(201,168,76,.08)}
.course-title{font-family:'UnifrakturMaguntia',cursive;font-size:1.4rem;background:linear-gradient(150deg,#8b6914,#c9a84c 40%,#ffd700 60%,#8b6914);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:3px}
.course-sub{font-family:'Cinzel',serif;font-size:.72rem;color:var(--muted);letter-spacing:3px;margin-bottom:12px}
.course-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
@media(max-width:480px){.course-cards{grid-template-columns:1fr}}
.course-card{border-radius:2px;padding:12px 10px 10px;border:2px solid;position:relative;transition:all .28s;text-align:center}
.course-active{background:rgba(14,12,40,.85);border-color:var(--gold-dark);cursor:pointer}
.course-active:hover{border-color:var(--gold2);background:rgba(201,168,76,.07);transform:translateY(-4px);box-shadow:0 10px 40px rgba(201,168,76,.2)}
.course-disabled{background:rgba(8,8,18,.6);border-color:rgba(80,80,100,.22);cursor:default;opacity:.45}
.course-icon{font-size:1.8rem;margin-bottom:5px;display:block}
.course-name{font-family:'Cinzel',serif;font-size:.9rem;letter-spacing:1px;margin-bottom:3px}
.course-active .course-name{color:var(--gold2)}
.course-disabled .course-name{color:var(--muted)}
.course-tag{font-family:'Cinzel',serif;font-size:.62rem;letter-spacing:2px;margin-bottom:5px}
.course-active .course-tag{color:var(--teal2)}
.course-disabled .course-tag{color:var(--faint)}
.course-detail{font-size:.68rem;color:var(--muted);line-height:1.45;margin-bottom:7px}
.course-badge{display:inline-block;font-family:'Cinzel',serif;font-size:.54rem;letter-spacing:2px;padding:2px 8px;border-radius:1px;border:1px solid var(--teal);color:var(--teal);background:rgba(78,205,196,.06)}
.course-badge-soon{border-color:rgba(100,100,120,.3);color:var(--faint);background:transparent}
.course-back{font-family:'Cinzel',serif;font-size:.72rem;color:var(--muted);background:rgba(5,5,20,.5);border:1px solid rgba(139,105,20,.3);border-radius:2px;padding:7px 22px;cursor:pointer;letter-spacing:1px;transition:all .2s}
.course-back:hover{color:var(--gold);border-color:var(--gold-dark)}
.course-info-btn{display:inline-flex;align-items:center;gap:4px;margin-top:8px;padding:5px 12px;font-family:'Cinzel',serif;font-size:.75rem;background:rgba(120,60,200,.15);border:1px solid rgba(120,60,200,.4);border-radius:20px;color:var(--violet2);cursor:pointer;transition:all .2s;letter-spacing:.5px}
.course-info-btn:hover{background:rgba(120,60,200,.3);border-color:var(--violet)}

/* Override compacto — mantiene border-radius 2px en modo layout */
@media (max-height:700px){
  .btn-start{border-radius:2px!important}
}

/* ════════════════════════════════════════════════════════════════
   WORLD THEMING — MAP overworld + COMBAT per-world backgrounds
   ════════════════════════════════════════════════════════════════ */

/* ── MAP CANVAS: path lines above mountain/fog layers ── */
.map-svg-overlay{z-index:1!important}

/* Montañas lejanas — capa trasera, tono azul-gris suave */
.world-map-canvas::before{
  content:'';
  position:absolute;
  left:0;right:0;bottom:0;
  height:100%;
  pointer-events:none;
  z-index:0;
  background:linear-gradient(180deg,
    rgba(14,10,40,0) 0%,
    rgba(14,10,44,.20) 50%,
    rgba(10,7,34,.58) 70%,
    rgba(8,5,26,.84) 84%,
    rgba(6,3,18,.97) 100%
  );
  clip-path:polygon(
    0% 100%, 0% 68%,
    3% 61%, 7% 72%, 11% 57%, 16% 68%,
    21% 51%, 26% 65%, 31% 47%, 36% 62%,
    42% 44%, 47% 60%, 52% 42%, 57% 58%,
    62% 50%, 67% 63%, 72% 47%, 77% 62%,
    82% 53%, 87% 67%, 92% 54%, 97% 67%,
    100% 60%, 100% 100%
  );
}

/* Montañas cercanas — capa delantera, oscuras y altas + niebla base */
.world-map-canvas::after{
  content:'';
  position:absolute;
  left:0;right:0;bottom:0;
  height:100%;
  pointer-events:none;
  z-index:0;
  background:
    linear-gradient(to top,
      rgba(4,2,10,.96) 0%,
      rgba(5,2,14,.68) 8%,
      rgba(6,3,18,.22) 20%,
      transparent 30%
    ),
    linear-gradient(180deg,
      rgba(6,3,16,0) 0%,
      rgba(8,4,22,.42) 44%,
      rgba(6,3,14,.88) 62%,
      rgba(4,2,10,.98) 100%
    );
  clip-path:polygon(
    0% 100%, 0% 57%,
    2% 48%, 6% 60%, 10% 42%, 14% 56%,
    18% 37%, 23% 52%, 28% 32%, 33% 50%,
    38% 27%, 43% 47%, 48% 30%, 52% 49%,
    57% 36%, 62% 52%, 67% 34%, 72% 51%,
    77% 40%, 82% 56%, 87% 39%, 91% 54%,
    95% 43%, 99% 57%, 100% 51%, 100% 100%
  );
  animation:map-fog 11s ease-in-out infinite;
}
@keyframes map-fog{
  0%,100%{opacity:.88}
  50%    {opacity:1}
}

/* ── COMBAT: shared pseudo-element base ── */
body.bg-w0 #s-combat::before, body.bg-w1 #s-combat::before,
body.bg-w2 #s-combat::before, body.bg-w3 #s-combat::before,
body.bg-w4 #s-combat::before, body.bg-w5 #s-combat::before,
body.bg-w6 #s-combat::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
}

/* ── M1 · Tierras del Hidrógeno: cielo azul, atmósfera gaseosa ── */
body.bg-w0 #s-combat{
  background:linear-gradient(165deg,
    rgba(0,22,58,.54) 0%, rgba(0,50,110,.44) 55%, rgba(6,28,74,.50) 100%
  )!important;
}
body.bg-w0 #s-combat::before{
  background:
    radial-gradient(ellipse 110% 36% at 50% -8%, rgba(0,115,215,.23) 0%, transparent 68%),
    radial-gradient(ellipse 75%  26% at 50% 108%, rgba(0,58,125,.33) 0%, transparent 60%),
    radial-gradient(ellipse 28%  58% at  8%  50%, rgba(0,80,165,.10) 0%, transparent 55%),
    radial-gradient(ellipse 28%  58% at 92%  50%, rgba(0,100,205,.10) 0%, transparent 55%);
  animation:w-pulse 6s ease-in-out infinite;
}

/* ── M2 · Tierras Ardientes del Óxido: volcanes, lava ── */
body.bg-w1 #s-combat{
  background:linear-gradient(165deg,
    rgba(50,8,0,.64) 0%, rgba(90,17,0,.54) 55%, rgba(60,11,0,.60) 100%
  )!important;
}
body.bg-w1 #s-combat::before{
  background:
    radial-gradient(ellipse 105% 30% at 50% 110%, rgba(245,72,0,.34) 0%, transparent 62%),
    radial-gradient(ellipse  68% 20% at 28%  94%, rgba(205,36,0,.21) 0%, transparent 52%),
    radial-gradient(ellipse  58% 18% at 72%  97%, rgba(255,92,0,.19) 0%, transparent 50%);
  animation:w-flicker 3.2s ease-in-out infinite;
}

/* ── M3 · Cavernas de las Sales: cristales, cueva cyan ── */
body.bg-w2 #s-combat{
  background:linear-gradient(165deg,
    rgba(0,16,35,.62) 0%, rgba(0,35,60,.52) 55%, rgba(6,23,50,.58) 100%
  )!important;
}
body.bg-w2 #s-combat::before{
  background:
    radial-gradient(ellipse 76% 38% at 18% 16%, rgba(0,178,205,.19) 0%, transparent 62%),
    radial-gradient(ellipse 56% 32% at 84% 24%, rgba(72,220,255,.15) 0%, transparent 58%),
    radial-gradient(ellipse 82% 28% at 50% 110%, rgba(0,98,160,.32) 0%, transparent 58%);
  animation:w-pulse 7s ease-in-out infinite;
}

/* ── M4 · Torres del Alquimista: tormenta púrpura, magia ── */
body.bg-w3 #s-combat{
  background:linear-gradient(165deg,
    rgba(20,4,48,.64) 0%, rgba(40,8,82,.54) 55%, rgba(27,5,62,.60) 100%
  )!important;
}
body.bg-w3 #s-combat::before{
  background:
    radial-gradient(ellipse 86% 44% at 50% -14%, rgba(118,40,222,.23) 0%, transparent 65%),
    radial-gradient(ellipse 42% 56% at 10%  48%, rgba(76,18,180,.16) 0%, transparent 55%),
    radial-gradient(ellipse 42% 56% at 90%  48%, rgba(138,58,255,.14) 0%, transparent 52%);
  animation:w-storm 5s ease-in-out infinite;
}

/* ── M5 · Palacio de las Sales del Rey: oro, realeza ── */
body.bg-w4 #s-combat{
  background:linear-gradient(165deg,
    rgba(18,14,2,.60) 0%, rgba(40,32,6,.50) 55%, rgba(29,21,4,.56) 100%
  )!important;
}
body.bg-w4 #s-combat::before{
  background:
    radial-gradient(ellipse 108% 27% at 50%  -7%, rgba(218,178,0,.21) 0%, transparent 65%),
    radial-gradient(ellipse  86% 18% at 50% 110%, rgba(178,138,0,.26) 0%, transparent 55%),
    radial-gradient(ellipse  30% 74% at 50%  50%, rgba(198,158,0,.07) 0%, transparent 58%);
  animation:w-pulse 6.5s ease-in-out infinite;
}

/* ── M6 · Laberinto del Gran Alquimista: niebla esmeralda ── */
body.bg-w5 #s-combat{
  background:linear-gradient(165deg,
    rgba(4,19,7,.64) 0%, rgba(7,35,12,.54) 55%, rgba(4,23,9,.60) 100%
  )!important;
}
body.bg-w5 #s-combat::before{
  background:
    radial-gradient(ellipse 98%  37% at 50% 110%, rgba(0,158,56,.27) 0%, transparent 60%),
    radial-gradient(ellipse 58%  58% at 16%  48%, rgba(0,118,40,.17) 0%, transparent 55%),
    radial-gradient(ellipse 48%  48% at 84%  37%, rgba(40,198,78,.14) 0%, transparent 50%);
  animation:w-mist 8.5s ease-in-out infinite;
}

/* ── M7 · Ciudadela del Caos Químico: caos, electricidad ── */
body.bg-w6 #s-combat{
  background:linear-gradient(165deg,
    rgba(30,0,30,.64) 0%, rgba(50,0,20,.54) 55%, rgba(19,0,40,.60) 100%
  )!important;
}
body.bg-w6 #s-combat::before{
  background:
    radial-gradient(ellipse 70% 48% at 16% 26%, rgba(198,0,78,.19) 0%, transparent 58%),
    radial-gradient(ellipse 60% 38% at 84% 64%, rgba(118,0,198,.17) 0%, transparent 55%),
    radial-gradient(ellipse 84% 30% at 50% 110%, rgba(252,36,0,.21) 0%, transparent 55%),
    radial-gradient(ellipse 38% 38% at 50%  50%, rgba(78,0,158,.09) 0%, transparent 48%);
  animation:w-chaos 4s ease-in-out infinite;
}

/* ── Combat atmosphere keyframes ── */
@keyframes w-pulse  {0%,100%{opacity:.72}50%{opacity:1}}
@keyframes w-flicker{0%,100%{opacity:.76}38%{opacity:1}68%{opacity:.83}}
@keyframes w-storm  {0%,100%{opacity:.70}27%{opacity:1}57%{opacity:.80}87%{opacity:1}}
@keyframes w-mist   {0%,100%{opacity:.70}50%{opacity:1}}
@keyframes w-chaos  {0%{opacity:.68}24%{opacity:1}50%{opacity:.74}74%{opacity:.95}100%{opacity:.68}}

/* ════════════════════════════════════════════════════════════════
   MEJORAS VISUALES: PANELES TRANSPARENTES + TEMAS + TARJETAS
   ════════════════════════════════════════════════════════════════ */

/* ── TAREA 1: Arena y zona de preguntas — cristal muy transparente ── */
#arena{
  background:rgba(8,6,24,.35)!important;
  backdrop-filter:blur(8px) saturate(140%)!important;
  -webkit-backdrop-filter:blur(8px) saturate(140%)!important;
}
.q-zone{
  background:rgba(8,6,24,.45)!important;
  backdrop-filter:blur(10px)!important;
  -webkit-backdrop-filter:blur(10px)!important;
}
.btn-row{
  background:rgba(8,6,24,.28);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  border-radius:8px;
  padding:4px;
}

/* ── TAREA 2: Panel de niveles — fondo base más liviano ── */
.level-panel{
  background:rgba(28,26,65,.82)!important;
  backdrop-filter:blur(6px)!important;
  -webkit-backdrop-filter:blur(6px)!important;
}
.level-panel-hdr{
  background:rgba(16,14,48,.80)!important;
}
.lcard{
  background:rgba(22,20,54,.76)!important;
  backdrop-filter:blur(3px)!important;
  -webkit-backdrop-filter:blur(3px)!important;
}
.lcard:hover{
  background:rgba(30,28,64,.88)!important;
}

/* ── TAREA 2b: Colores por mundo en el panel de niveles ── */
/* W0 — Hidrógeno: azul cielo */
body.bg-w0 .level-panel    {background:rgba(0,14,40,.84)!important;border-color:rgba(0,120,200,.38)!important}
body.bg-w0 .level-panel-hdr{background:rgba(0,8,28,.80)!important;border-bottom-color:rgba(0,140,220,.28)!important}
/* W1 — Óxidos: volcánico rojo */
body.bg-w1 .level-panel    {background:rgba(28,5,0,.84)!important;border-color:rgba(200,48,0,.38)!important}
body.bg-w1 .level-panel-hdr{background:rgba(18,3,0,.80)!important;border-bottom-color:rgba(220,60,0,.28)!important}
/* W2 — Sales binarias: caverna cyan */
body.bg-w2 .level-panel    {background:rgba(0,10,26,.84)!important;border-color:rgba(0,158,200,.38)!important}
body.bg-w2 .level-panel-hdr{background:rgba(0,6,18,.80)!important;border-bottom-color:rgba(0,178,220,.28)!important}
/* W3 — Alquimista: tormenta púrpura */
body.bg-w3 .level-panel    {background:rgba(12,3,30,.84)!important;border-color:rgba(118,40,220,.38)!important}
body.bg-w3 .level-panel-hdr{background:rgba(8,2,22,.80)!important;border-bottom-color:rgba(138,50,240,.28)!important}
/* W4 — Sales del Rey: dorado real */
body.bg-w4 .level-panel    {background:rgba(14,10,2,.84)!important;border-color:rgba(200,158,0,.42)!important}
body.bg-w4 .level-panel-hdr{background:rgba(10,7,1,.80)!important;border-bottom-color:rgba(220,178,0,.30)!important}
/* W5 — Gran Alquimista: esmeralda */
body.bg-w5 .level-panel    {background:rgba(3,13,5,.84)!important;border-color:rgba(0,158,58,.38)!important}
body.bg-w5 .level-panel-hdr{background:rgba(2,9,4,.80)!important;border-bottom-color:rgba(0,178,68,.28)!important}
/* W6 — Caos Químico: crimson caos */
body.bg-w6 .level-panel    {background:rgba(17,0,17,.84)!important;border-color:rgba(188,0,78,.38)!important}
body.bg-w6 .level-panel-hdr{background:rgba(11,0,11,.80)!important;border-bottom-color:rgba(208,0,88,.28)!important}

/* ── TAREA 3: Iconos y estados de tarjetas de nivel ── */
/* Icono más grande con sombra */
.lc-em{
  font-size:2.4rem!important;
  filter:drop-shadow(0 3px 9px rgba(0,0,0,.55))!important;
}
.lcard.is-final .lc-em{font-size:3.4rem!important}

/* Niveles COMPLETADOS — resplandor dorado */
.lcard:has(.bd-done){
  box-shadow:0 0 0 1px rgba(201,168,76,.32),0 0 18px rgba(201,168,76,.12),0 4px 14px rgba(0,0,0,.4)!important;
}
.lcard:has(.bd-done):hover{
  box-shadow:0 0 0 1px rgba(201,168,76,.6),0 0 28px rgba(201,168,76,.22),0 8px 24px rgba(0,0,0,.5)!important;
}
.bd-done{
  box-shadow:0 0 10px rgba(201,168,76,.55),0 1px 3px rgba(0,0,0,.3)!important;
}

/* Niveles DISPONIBLES (no bloqueados, no hechos) — pulso dorado sutil */
.lcard:not(.is-locked):not(:has(.bd-done)){
  animation:card-avail 3.5s ease-in-out infinite!important;
}
@keyframes card-avail{
  0%,100%{box-shadow:0 2px 8px rgba(0,0,0,.3)}
  50%    {box-shadow:0 4px 18px rgba(0,0,0,.4),0 0 16px rgba(201,168,76,.22)}
}

/* Niveles BLOQUEADOS — más fundidos */
.lcard.is-locked{
  opacity:.32!important;
  filter:grayscale(.92) blur(.4px)!important;
}

/* ════════════════════════════════════════════════════════════════
   MAPA OVERWORLD — CIELO NOCTURNO PROFUNDO + FONDOS TRANSPARENTES
   ════════════════════════════════════════════════════════════════ */

/* Cielo nocturno con estrellas en #s-map */
#s-map{
  position:relative!important;
  background:
    radial-gradient(1px 1px at 7% 6%,rgba(255,255,240,.90),transparent),
    radial-gradient(2px 2px at 18% 3%,rgba(255,255,255,.86),transparent),
    radial-gradient(1px 1px at 29% 10%,rgba(200,215,255,.76),transparent),
    radial-gradient(2px 2px at 41% 4%,rgba(255,250,200,.88),transparent),
    radial-gradient(1px 1px at 53% 8%,rgba(255,255,255,.78),transparent),
    radial-gradient(1px 1px at 64% 5%,rgba(255,255,255,.73),transparent),
    radial-gradient(2px 2px at 76% 9%,rgba(220,220,255,.86),transparent),
    radial-gradient(1px 1px at 87% 6%,rgba(255,255,255,.78),transparent),
    radial-gradient(1px 1px at 94% 12%,rgba(255,250,180,.82),transparent),
    radial-gradient(1px 1px at 11% 19%,rgba(255,255,255,.66),transparent),
    radial-gradient(1px 1px at 22% 26%,rgba(200,215,255,.68),transparent),
    radial-gradient(2px 2px at 33% 15%,rgba(255,250,180,.70),transparent),
    radial-gradient(1px 1px at 44% 23%,rgba(255,255,255,.60),transparent),
    radial-gradient(1px 1px at 56% 17%,rgba(255,255,255,.63),transparent),
    radial-gradient(1px 1px at 68% 21%,rgba(210,210,255,.66),transparent),
    radial-gradient(1px 1px at 79% 28%,rgba(255,255,255,.60),transparent),
    radial-gradient(2px 2px at 90% 16%,rgba(255,250,180,.68),transparent),
    radial-gradient(1px 1px at 4% 34%,rgba(255,255,255,.50),transparent),
    radial-gradient(1px 1px at 47% 38%,rgba(200,215,255,.46),transparent),
    radial-gradient(1px 1px at 83% 32%,rgba(255,255,255,.48),transparent),
    radial-gradient(ellipse 90% 48% at 50% 0%,rgba(60,40,160,.28) 0%,transparent 54%),
    radial-gradient(ellipse 50% 38% at 18% 30%,rgba(20,15,90,.16) 0%,transparent 48%),
    radial-gradient(ellipse 40% 32% at 82% 44%,rgba(15,35,120,.12) 0%,transparent 44%),
    linear-gradient(180deg,
      #04021a 0%,
      #07053c 16%,
      #0a0848 32%,
      #080636 52%,
      #060422 72%,
      #040215 100%
    )!important;
}

/* Estrellas adicionales animadas sobre el mapa */
#s-map::before{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(1px 1px at 12% 7%,rgba(255,255,255,.90),transparent),
    radial-gradient(2px 2px at 34% 2%,rgba(255,250,200,.96),transparent),
    radial-gradient(1px 1px at 58% 9%,rgba(200,215,255,.84),transparent),
    radial-gradient(1px 1px at 81% 4%,rgba(255,255,255,.90),transparent),
    radial-gradient(2px 2px at 27% 14%,rgba(255,250,180,.92),transparent),
    radial-gradient(1px 1px at 70% 18%,rgba(255,255,255,.76),transparent),
    radial-gradient(1px 1px at 45% 22%,rgba(200,215,255,.72),transparent),
    radial-gradient(1px 1px at 91% 25%,rgba(255,255,255,.66),transparent),
    radial-gradient(1px 1px at 15% 30%,rgba(255,250,180,.62),transparent),
    radial-gradient(1px 1px at 63% 34%,rgba(255,255,255,.56),transparent);
  animation:star-twinkle 7s ease-in-out infinite alternate;
}

/* Canvas del mapa: semi-transparente para dejar ver el cielo */
.world-map-canvas{
  background:
    radial-gradient(ellipse 78% 52% at 50% 36%,rgba(28,16,68,.36) 0%,transparent 66%),
    rgba(4,2,14,.55)!important;
  border:1.5px solid rgba(232,168,32,.48)!important;
}

/* Caminos entre mundos: dorado más brillante */
.map-svg-overlay path{
  stroke:rgba(201,168,76,.58)!important;
  filter:drop-shadow(0 0 4px rgba(201,168,76,.40));
}

/* ── Reducir overlays por mundo en combate para ver el fondo ── */
#s-combat{background:rgba(6,4,18,.14)!important}
body.bg-w0 #s-combat{background:linear-gradient(165deg,rgba(0,22,58,.28) 0%,rgba(0,50,110,.20) 55%,rgba(6,28,74,.24) 100%)!important}
body.bg-w1 #s-combat{background:linear-gradient(165deg,rgba(50,8,0,.36) 0%,rgba(90,17,0,.26) 55%,rgba(60,11,0,.32) 100%)!important}
body.bg-w2 #s-combat{background:linear-gradient(165deg,rgba(0,16,35,.32) 0%,rgba(0,35,60,.24) 55%,rgba(6,23,50,.28) 100%)!important}
body.bg-w3 #s-combat{background:linear-gradient(165deg,rgba(20,4,48,.34) 0%,rgba(40,8,82,.26) 55%,rgba(27,5,62,.30) 100%)!important}
body.bg-w4 #s-combat{background:linear-gradient(165deg,rgba(18,14,2,.30) 0%,rgba(40,32,6,.22) 55%,rgba(29,21,4,.26) 100%)!important}
body.bg-w5 #s-combat{background:linear-gradient(165deg,rgba(4,19,7,.34) 0%,rgba(7,35,12,.26) 55%,rgba(4,23,9,.30) 100%)!important}
body.bg-w6 #s-combat{background:linear-gradient(165deg,rgba(30,0,30,.34) 0%,rgba(50,0,20,.26) 55%,rgba(19,0,40,.30) 100%)!important}

/* ════════════════════════════════════════════════════════════════
   FONDOS COMBATE — INTENSIDAD MÁXIMA (sobreescribe reducciones)
   ════════════════════════════════════════════════════════════════ */
#s-combat{background:rgba(6,4,18,.18)!important}

/* ── M1 · Hidrógeno: cielo azul eléctrico, atmósfera gaseosa ── */
body.bg-w0 #s-combat{background:linear-gradient(165deg,rgba(0,28,72,.70) 0%,rgba(0,65,140,.60) 55%,rgba(4,38,100,.66) 100%)!important}
body.bg-w0 #s-combat::before{
  background:
    radial-gradient(ellipse 115% 38% at 50% -10%,rgba(0,145,255,.34) 0%,transparent 65%),
    radial-gradient(ellipse  80% 28% at 50% 113%,rgba(0,74,162,.42) 0%,transparent 58%),
    radial-gradient(ellipse  38% 66% at  6%  52%,rgba(0,104,206,.18) 0%,transparent 52%),
    radial-gradient(ellipse  38% 66% at 94%  52%,rgba(0,124,245,.18) 0%,transparent 52%),
    radial-gradient(ellipse  52% 26% at 50%  52%,rgba(0,82,185,.09) 0%,transparent 48%);
  animation:w-pulse 5s ease-in-out infinite
}

/* ── M2 · Óxido: volcanes rugientes, brasa y lava intensa ── */
body.bg-w1 #s-combat{background:linear-gradient(165deg,rgba(66,10,0,.74) 0%,rgba(115,22,0,.64) 55%,rgba(82,14,0,.70) 100%)!important}
body.bg-w1 #s-combat::before{
  background:
    radial-gradient(ellipse 112% 36% at 50% 118%,rgba(255,82,0,.50) 0%,transparent 60%),
    radial-gradient(ellipse  74% 24% at 24% 100%,rgba(225,46,0,.34) 0%,transparent 50%),
    radial-gradient(ellipse  64% 22% at 76% 104%,rgba(255,102,0,.30) 0%,transparent 48%),
    radial-gradient(ellipse  46% 18% at 50%  90%,rgba(205,62,0,.24) 0%,transparent 44%),
    radial-gradient(ellipse  90% 14% at 50% 102%,rgba(255,128,0,.18) 0%,transparent 38%);
  animation:w-flicker 2.8s ease-in-out infinite
}

/* ── M3 · Sales Binarias: caverna de cristal, luz cyan brillante ── */
body.bg-w2 #s-combat{background:linear-gradient(165deg,rgba(0,22,48,.72) 0%,rgba(0,46,80,.62) 55%,rgba(4,30,66,.68) 100%)!important}
body.bg-w2 #s-combat::before{
  background:
    radial-gradient(ellipse  86% 44% at 20%  14%,rgba(0,215,250,.28) 0%,transparent 60%),
    radial-gradient(ellipse  66% 38% at 80%  22%,rgba(82,245,255,.24) 0%,transparent 56%),
    radial-gradient(ellipse  92% 34% at 50% 118%,rgba(0,124,195,.40) 0%,transparent 56%),
    radial-gradient(ellipse  42% 62% at 50%  50%,rgba(0,165,225,.09) 0%,transparent 50%),
    radial-gradient(ellipse  32% 30% at 50%   2%,rgba(125,245,255,.16) 0%,transparent 44%);
  animation:w-pulse 6.5s ease-in-out infinite
}

/* ── M4 · Torres del Alquimista: tormenta violeta, rayos mágicos ── */
body.bg-w3 #s-combat{background:linear-gradient(165deg,rgba(26,5,62,.74) 0%,rgba(52,12,106,.64) 55%,rgba(34,6,80,.70) 100%)!important}
body.bg-w3 #s-combat::before{
  background:
    radial-gradient(ellipse  94% 52% at 50% -20%,rgba(145,50,255,.32) 0%,transparent 62%),
    radial-gradient(ellipse  50% 64% at  8%  50%,rgba(92,24,215,.26) 0%,transparent 54%),
    radial-gradient(ellipse  50% 64% at 92%  50%,rgba(165,70,255,.24) 0%,transparent 50%),
    radial-gradient(ellipse  62% 26% at 50% 118%,rgba(82,20,186,.34) 0%,transparent 56%),
    radial-gradient(ellipse  30% 30% at 50%  50%,rgba(125,42,225,.11) 0%,transparent 46%);
  animation:w-storm 4.5s ease-in-out infinite
}

/* ── M5 · Palacio Real: oro suntuoso, brillo dorado intenso ── */
body.bg-w4 #s-combat{background:linear-gradient(165deg,rgba(24,18,2,.70) 0%,rgba(54,42,6,.60) 55%,rgba(38,28,4,.66) 100%)!important}
body.bg-w4 #s-combat::before{
  background:
    radial-gradient(ellipse 116% 32% at 50%  -8%,rgba(245,205,0,.30) 0%,transparent 62%),
    radial-gradient(ellipse  94% 24% at 50% 118%,rgba(205,162,0,.36) 0%,transparent 54%),
    radial-gradient(ellipse  38% 82% at 50%  50%,rgba(225,182,0,.08) 0%,transparent 55%),
    radial-gradient(ellipse  28% 26% at 22%  30%,rgba(255,225,0,.14) 0%,transparent 42%),
    radial-gradient(ellipse  28% 26% at 78%  30%,rgba(255,225,0,.14) 0%,transparent 42%);
  animation:w-pulse 5.8s ease-in-out infinite
}

/* ── M6 · Laberinto: niebla esmeralda densa, runas de luz ── */
body.bg-w5 #s-combat{background:linear-gradient(165deg,rgba(4,26,8,.72) 0%,rgba(8,48,16,.62) 55%,rgba(5,30,10,.68) 100%)!important}
body.bg-w5 #s-combat::before{
  background:
    radial-gradient(ellipse 108% 42% at 50% 122%,rgba(0,196,70,.38) 0%,transparent 58%),
    radial-gradient(ellipse  66% 66% at 14%  50%,rgba(0,152,52,.27) 0%,transparent 54%),
    radial-gradient(ellipse  54% 54% at 86%  40%,rgba(50,225,92,.24) 0%,transparent 48%),
    radial-gradient(ellipse  78% 24% at 50%  -8%,rgba(0,125,42,.22) 0%,transparent 52%),
    radial-gradient(ellipse  34% 34% at 50%  50%,rgba(0,165,58,.09) 0%,transparent 46%);
  animation:w-mist 7.5s ease-in-out infinite
}

/* ── M7 · Caos Químico: igual (referente visual, sin tocar) ── */
body.bg-w6 #s-combat{background:linear-gradient(165deg,rgba(30,0,30,.64) 0%,rgba(50,0,20,.54) 55%,rgba(19,0,40,.60) 100%)!important}
body.bg-w6 #s-combat::before{
  background:
    radial-gradient(ellipse 70% 48% at 16% 26%,rgba(198,0,78,.19) 0%,transparent 58%),
    radial-gradient(ellipse 60% 38% at 84% 64%,rgba(118,0,198,.17) 0%,transparent 55%),
    radial-gradient(ellipse 84% 30% at 50% 110%,rgba(252,36,0,.21) 0%,transparent 55%),
    radial-gradient(ellipse 38% 38% at 50%  50%,rgba(78,0,158,.09) 0%,transparent 48%);
  animation:w-chaos 4s ease-in-out infinite
}

/* ════════════════════════════════════════════════════════════════
   ARENA — centro muy transparente para ver el monstruo
   ════════════════════════════════════════════════════════════════ */
#arena{
  background:linear-gradient(to right,
    rgba(8,6,24,.60) 0%,
    rgba(8,6,24,.24) 25%,
    rgba(8,6,24,.08) 50%,
    rgba(8,6,24,.24) 75%,
    rgba(8,6,24,.60) 100%
  )!important;
}

/* ════════════════════════════════════════════════════════════════
   PARALLAX — 3 capas de profundidad en combate
   ════════════════════════════════════════════════════════════════ */
body.bg-w0 #s-combat::after,body.bg-w1 #s-combat::after,
body.bg-w2 #s-combat::after,body.bg-w3 #s-combat::after,
body.bg-w4 #s-combat::after,body.bg-w5 #s-combat::after,
body.bg-w6 #s-combat::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background-repeat:repeat-x;background-size:380px 100%;
  will-change:background-position;
}

/* Capa parallax W0: burbujas de hidrógeno flotando */
body.bg-w0 #s-combat::after{
  background-image:
    radial-gradient(circle 6px at  8% 28%,rgba(100,195,255,.32),transparent 16px),
    radial-gradient(circle 3px at 22% 66%,rgba(60,155,225,.26),transparent 10px),
    radial-gradient(circle 8px at 38% 14%,rgba(80,175,255,.22),transparent 20px),
    radial-gradient(circle 4px at 53% 50%,rgba(40,135,205,.28),transparent 12px),
    radial-gradient(circle 7px at 68% 80%,rgba(100,185,245,.20),transparent 18px),
    radial-gradient(circle 3px at 82% 34%,rgba(60,165,255,.26),transparent 10px),
    radial-gradient(circle 5px at 94% 58%,rgba(80,185,255,.24),transparent 14px);
  animation:combat-drift 26s linear infinite
}

/* Capa parallax W1: brasas y chispas de lava */
body.bg-w1 #s-combat::after{
  background-image:
    radial-gradient(circle 4px at  6% 84%,rgba(255,82,0,.36),transparent 12px),
    radial-gradient(circle 3px at 19% 60%,rgba(225,52,0,.28),transparent 10px),
    radial-gradient(circle 6px at 34% 90%,rgba(255,102,0,.30),transparent 17px),
    radial-gradient(circle 4px at 50% 70%,rgba(205,42,0,.34),transparent 12px),
    radial-gradient(circle 5px at 65% 86%,rgba(255,92,0,.26),transparent 15px),
    radial-gradient(circle 3px at 79% 64%,rgba(235,62,0,.30),transparent 10px),
    radial-gradient(circle 6px at 93% 78%,rgba(255,112,0,.24),transparent 17px);
  animation:combat-drift 18s linear infinite
}

/* Capa parallax W2: destellos de cristal cyan */
body.bg-w2 #s-combat::after{
  background-image:
    radial-gradient(circle 5px at  7% 20%,rgba(0,225,255,.34),transparent 14px),
    radial-gradient(circle 3px at 22% 54%,rgba(82,245,255,.28),transparent 10px),
    radial-gradient(circle 7px at 37% 10%,rgba(0,205,245,.24),transparent 19px),
    radial-gradient(circle 4px at 53% 40%,rgba(62,215,255,.32),transparent 12px),
    radial-gradient(circle 6px at 68% 70%,rgba(0,235,255,.22),transparent 16px),
    radial-gradient(circle 3px at 81% 25%,rgba(102,245,255,.28),transparent 10px),
    radial-gradient(circle 6px at 95% 57%,rgba(0,215,250,.24),transparent 16px);
  animation:combat-drift 14s linear infinite
}

/* Capa parallax W3: chispas mágicas violeta */
body.bg-w3 #s-combat::after{
  background-image:
    radial-gradient(circle 5px at  9% 24%,rgba(185,62,255,.36),transparent 14px),
    radial-gradient(circle 3px at 24% 58%,rgba(145,42,225,.28),transparent 10px),
    radial-gradient(circle 7px at 40% 12%,rgba(205,82,255,.26),transparent 19px),
    radial-gradient(circle 4px at 56% 44%,rgba(165,52,245,.34),transparent 12px),
    radial-gradient(circle 6px at 71% 76%,rgba(185,62,255,.24),transparent 16px),
    radial-gradient(circle 3px at 85% 30%,rgba(145,46,225,.30),transparent 10px),
    radial-gradient(circle 6px at 97% 54%,rgba(205,72,255,.24),transparent 16px);
  animation:combat-drift 20s linear infinite
}

/* Capa parallax W4: polvo de oro flotante */
body.bg-w4 #s-combat::after{
  background-image:
    radial-gradient(circle 3px at  8% 34%,rgba(255,218,0,.32),transparent 10px),
    radial-gradient(circle 2px at 22% 57%,rgba(225,184,0,.26),transparent 7px),
    radial-gradient(circle 5px at 38% 18%,rgba(255,224,0,.24),transparent 13px),
    radial-gradient(circle 3px at 54% 47%,rgba(245,204,0,.32),transparent 10px),
    radial-gradient(circle 5px at 69% 72%,rgba(255,218,0,.22),transparent 13px),
    radial-gradient(circle 2px at 83% 27%,rgba(225,188,0,.28),transparent 7px),
    radial-gradient(circle 4px at 96% 50%,rgba(255,214,0,.24),transparent 11px);
  animation:combat-drift 32s linear infinite
}

/* Capa parallax W5: volutas de niebla esmeralda */
body.bg-w5 #s-combat::after{
  background-image:
    radial-gradient(circle 7px at  5% 38%,rgba(0,205,72,.28),transparent 18px),
    radial-gradient(circle 5px at 20% 64%,rgba(42,185,62,.24),transparent 14px),
    radial-gradient(circle 9px at 36% 22%,rgba(0,195,62,.20),transparent 23px),
    radial-gradient(circle 6px at 52% 54%,rgba(22,205,72,.26),transparent 17px),
    radial-gradient(circle 8px at 67% 82%,rgba(0,185,57,.22),transparent 20px),
    radial-gradient(circle 5px at 81% 37%,rgba(42,205,72,.24),transparent 14px),
    radial-gradient(circle 7px at 94% 64%,rgba(0,200,67,.22),transparent 18px);
  animation:combat-drift 24s linear infinite
}

/* Capa parallax W6: partículas de caos rojo-violeta */
body.bg-w6 #s-combat::after{
  background-image:
    radial-gradient(circle 5px at  7% 30%,rgba(225,0,82,.34),transparent 14px),
    radial-gradient(circle 3px at 22% 62%,rgba(155,0,205,.28),transparent 10px),
    radial-gradient(circle 7px at 37% 18%,rgba(245,22,0,.26),transparent 19px),
    radial-gradient(circle 4px at 53% 50%,rgba(185,0,165,.32),transparent 12px),
    radial-gradient(circle 6px at 68% 75%,rgba(225,0,62,.24),transparent 16px),
    radial-gradient(circle 3px at 82% 35%,rgba(165,0,225,.30),transparent 10px),
    radial-gradient(circle 6px at 95% 57%,rgba(205,12,0,.26),transparent 16px);
  animation:combat-drift 16s linear infinite
}

@keyframes combat-drift{0%{background-position:0 0}100%{background-position:-380px 0}}

/* ════════════════════════════════════════════════════════════════
   MAPA OVERWORLD — 3ª MONTAÑA + SILUETAS DRAMÁTICAS + CAMINOS
   ════════════════════════════════════════════════════════════════ */

/* Capa 0: montañas ultra-lejanas en #s-map::after */
#s-map::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:linear-gradient(180deg,
    rgba(8,5,28,0) 0%,rgba(9,6,32,.10) 50%,
    rgba(7,4,24,.50) 66%,rgba(6,3,20,.76) 76%,
    rgba(5,2,16,.90) 86%,rgba(4,2,12,.98) 100%
  );
  clip-path:polygon(
    0% 100%, 0% 80%,
    4% 76%, 8% 81%, 13% 72%, 18% 79%,
    23% 68%, 28% 77%, 33% 64%, 38% 74%,
    43% 61%, 48% 71%, 53% 65%, 58% 73%,
    63% 67%, 68% 75%, 73% 68%, 78% 76%,
    83% 69%, 88% 77%, 93% 71%, 97% 78%,
    100% 73%, 100% 100%
  );
}

/* Montañas lejanas — silueta más asimétrica y dramática */
.world-map-canvas::before{
  clip-path:polygon(
    0% 100%, 0% 64%,
    2% 57%, 5% 63%, 8% 52%, 12% 60%,
    16% 47%, 21% 57%, 25% 50%, 29% 60%,
    33% 41%, 38% 56%, 43% 44%, 48% 59%,
    52% 42%, 56% 55%, 60% 46%, 65% 58%,
    69% 49%, 74% 62%, 78% 45%, 83% 60%,
    87% 51%, 91% 63%, 95% 53%, 99% 65%,
    100% 58%, 100% 100%
  )!important
}

/* Montañas cercanas — picos muy altos e irregulares */
.world-map-canvas::after{
  clip-path:polygon(
    0% 100%, 0% 53%,
    1% 44%, 5% 56%, 8% 38%, 12% 50%,
    15% 31%, 19% 47%, 23% 28%, 27% 44%,
    30% 23%, 35% 41%, 39% 26%, 44% 43%,
    48% 29%, 52% 46%, 56% 31%, 61% 48%,
    65% 34%, 70% 51%, 74% 37%, 79% 53%,
    83% 39%, 87% 55%, 91% 42%, 96% 57%,
    100% 49%, 100% 100%
  )!important
}

/* Caminos entre mundos — dorado radiante */
.map-svg-overlay path{
  stroke:rgba(228,192,66,.88)!important;
  stroke-width:2.5!important;
  filter:drop-shadow(0 0 6px rgba(220,186,60,.68)) drop-shadow(0 0 16px rgba(220,186,60,.34))!important;
}

/* ════════════════════════════════════════════════════════════════
   FONDOS COMBATE — INTENSIDAD FINAL (80-88 % opacidad)
   Sobrescribe todas las reglas anteriores de combate
   ════════════════════════════════════════════════════════════════ */
#s-combat{background:rgba(6,4,18,.20)!important}

/* M1 — Hidrógeno: cielo azul eléctrico, atmósfera gaseosa vibrante */
body.bg-w0 #s-combat{background:linear-gradient(165deg,rgba(0,38,96,.84) 0%,rgba(0,82,172,.76) 55%,rgba(4,52,132,.80) 100%)!important}
body.bg-w0 #s-combat::before{
  background:
    radial-gradient(ellipse 118% 40% at 50% -12%,rgba(0,155,255,.58) 0%,transparent 64%),
    radial-gradient(ellipse  84%  30% at 50%  115%,rgba(0,78,168,.70) 0%,transparent 56%),
    radial-gradient(ellipse  40%  70% at  5%   52%,rgba(0,110,215,.34) 0%,transparent 50%),
    radial-gradient(ellipse  40%  70% at 95%   52%,rgba(0,130,250,.34) 0%,transparent 50%),
    radial-gradient(ellipse  55%  28% at 50%   52%,rgba(0,88,195,.16) 0%,transparent 46%);
  animation:w-pulse 5s ease-in-out infinite
}

/* M2 — Óxido: volcanes rugientes, brasa, incandescencia de lava */
body.bg-w1 #s-combat{background:linear-gradient(165deg,rgba(90,14,0,.86) 0%,rgba(150,28,0,.78) 55%,rgba(112,18,0,.82) 100%)!important}
body.bg-w1 #s-combat::before{
  background:
    radial-gradient(ellipse 114%  38% at 50% 120%,rgba(255,84,0,.78) 0%,transparent 58%),
    radial-gradient(ellipse  76%  26% at 24% 102%,rgba(228,48,0,.58) 0%,transparent 48%),
    radial-gradient(ellipse  66%  24% at 76% 106%,rgba(255,105,0,.52) 0%,transparent 46%),
    radial-gradient(ellipse  48%  20% at 50%  92%,rgba(210,65,0,.42) 0%,transparent 42%),
    radial-gradient(ellipse  92%  15% at 50% 104%,rgba(255,130,0,.32) 0%,transparent 36%);
  animation:w-flicker 2.6s ease-in-out infinite
}

/* M3 — Sales Binarias: caverna de cristal, luz cyan explosiva */
body.bg-w2 #s-combat{background:linear-gradient(165deg,rgba(0,30,64,.84) 0%,rgba(0,60,106,.76) 55%,rgba(4,40,90,.80) 100%)!important}
body.bg-w2 #s-combat::before{
  background:
    radial-gradient(ellipse  88%  46% at 20%  14%,rgba(0,218,252,.50) 0%,transparent 58%),
    radial-gradient(ellipse  68%  40% at 80%  22%,rgba(84,248,255,.44) 0%,transparent 54%),
    radial-gradient(ellipse  94%  36% at 50% 120%,rgba(0,128,198,.68) 0%,transparent 54%),
    radial-gradient(ellipse  44%  65% at 50%  50%,rgba(0,170,228,.16) 0%,transparent 48%),
    radial-gradient(ellipse  34%  32% at 50%   1%,rgba(128,248,255,.28) 0%,transparent 42%);
  animation:w-pulse 6s ease-in-out infinite
}

/* M4 — Torres del Alquimista: tormenta violeta feroz, rayos arcanos */
body.bg-w3 #s-combat{background:linear-gradient(165deg,rgba(36,8,84,.86) 0%,rgba(68,16,140,.78) 55%,rgba(46,9,106,.82) 100%)!important}
body.bg-w3 #s-combat::before{
  background:
    radial-gradient(ellipse  96%  54% at 50% -22%,rgba(148,52,255,.56) 0%,transparent 60%),
    radial-gradient(ellipse  52%  66% at  7%  50%,rgba(96,26,218,.46) 0%,transparent 52%),
    radial-gradient(ellipse  52%  66% at 93%  50%,rgba(168,72,255,.42) 0%,transparent 48%),
    radial-gradient(ellipse  64%  28% at 50% 120%,rgba(84,20,188,.58) 0%,transparent 54%),
    radial-gradient(ellipse  32%  32% at 50%  50%,rgba(128,44,228,.20) 0%,transparent 44%);
  animation:w-storm 4s ease-in-out infinite
}

/* M5 — Palacio del Rey: oro suntuoso, resplandor áureo deslumbrante */
body.bg-w4 #s-combat{background:linear-gradient(165deg,rgba(32,24,3,.84) 0%,rgba(70,55,8,.76) 55%,rgba(50,38,5,.80) 100%)!important}
body.bg-w4 #s-combat::before{
  background:
    radial-gradient(ellipse 118%  34% at 50%  -9%,rgba(248,208,0,.52) 0%,transparent 60%),
    radial-gradient(ellipse  96%  26% at 50%  120%,rgba(208,165,0,.62) 0%,transparent 52%),
    radial-gradient(ellipse  40%  86% at 50%   50%,rgba(228,185,0,.14) 0%,transparent 52%),
    radial-gradient(ellipse  30%  28% at 20%   28%,rgba(255,228,0,.25) 0%,transparent 40%),
    radial-gradient(ellipse  30%  28% at 80%   28%,rgba(255,228,0,.25) 0%,transparent 40%);
  animation:w-pulse 5.5s ease-in-out infinite
}

/* M6 — Laberinto: niebla esmeralda densa, runas de luz vívida */
body.bg-w5 #s-combat{background:linear-gradient(165deg,rgba(5,36,10,.84) 0%,rgba(10,62,22,.76) 55%,rgba(6,42,14,.80) 100%)!important}
body.bg-w5 #s-combat::before{
  background:
    radial-gradient(ellipse 110%  44% at 50%  125%,rgba(0,200,72,.62) 0%,transparent 56%),
    radial-gradient(ellipse  68%  68% at 13%   50%,rgba(0,155,54,.46) 0%,transparent 52%),
    radial-gradient(ellipse  56%  56% at 87%   40%,rgba(52,228,95,.40) 0%,transparent 46%),
    radial-gradient(ellipse  80%  26% at 50%   -9%,rgba(0,128,44,.38) 0%,transparent 50%),
    radial-gradient(ellipse  36%  36% at 50%   50%,rgba(0,170,60,.16) 0%,transparent 44%);
  animation:w-mist 7s ease-in-out infinite
}

/* M7 — Caos Químico: referente visual, sin cambio */
body.bg-w6 #s-combat{background:linear-gradient(165deg,rgba(30,0,30,.64) 0%,rgba(50,0,20,.54) 55%,rgba(19,0,40,.60) 100%)!important}
body.bg-w6 #s-combat::before{
  background:
    radial-gradient(ellipse 70% 48% at 16% 26%,rgba(198,0,78,.19) 0%,transparent 58%),
    radial-gradient(ellipse 60% 38% at 84% 64%,rgba(118,0,198,.17) 0%,transparent 55%),
    radial-gradient(ellipse 84% 30% at 50% 110%,rgba(252,36,0,.21) 0%,transparent 55%),
    radial-gradient(ellipse 38% 38% at 50%  50%,rgba(78,0,158,.09) 0%,transparent 48%);
  animation:w-chaos 4s ease-in-out infinite
}

/* ════════════════════════════════════════════════════════════════
   OVERWORLD — REDISEÑO ÉPICO COMPLETO
   Aurora boreal · Luna detallada · Montañas dramáticas
   ════════════════════════════════════════════════════════════════ */

/* Ocultar canvas JS — sustituido íntegramente por CSS */
#world-map-canvas > canvas{display:none!important}

/* ── Cielo: luna con cráteres + nebulosa + estrellas variables + gradiente profundo ── */
#s-map{
  background:
    /* Cráteres lunares sutiles */
    radial-gradient(circle 5px at 80.4% 10.6%,rgba(0,0,0,.10),transparent 7px),
    radial-gradient(circle 3.5px at 84.0% 14.0%,rgba(0,0,0,.08),transparent 5px),
    radial-gradient(circle 4px at 81.6% 15.6%,rgba(0,0,0,.08),transparent 6px),
    /* Luna */
    radial-gradient(circle 38px at 83% 13%,#f5f1e0 0%,#ece8d0 36%,rgba(240,234,200,.30) 54%,transparent 70%),
    /* Halo lunar */
    radial-gradient(circle 82px at 83% 13%,rgba(218,208,165,.20) 0%,transparent 76%),
    /* Nebulosa morada izquierda */
    radial-gradient(ellipse 70% 50% at 21% 22%,rgba(88,22,172,.26) 0%,transparent 68%),
    /* Nebulosa azul derecha */
    radial-gradient(ellipse 60% 44% at 67% 16%,rgba(22,82,215,.20) 0%,transparent 62%),
    /* Resplandor cálido del suelo (atmósfera mágica) */
    radial-gradient(ellipse 105% 24% at 50% 100%,rgba(44,22,84,.48) 0%,transparent 100%),
    /* Estrellas grandes y brillantes */
    radial-gradient(3px 3px at  7%  5%,rgba(255,255,245,.96),transparent),
    radial-gradient(2px 2px at 14% 10%,rgba(255,250,200,.92),transparent),
    radial-gradient(3px 3px at 25%  4%,rgba(220,226,255,.94),transparent),
    radial-gradient(2px 2px at 37%  8%,rgba(255,255,255,.90),transparent),
    radial-gradient(3px 3px at 48%  3%,rgba(255,250,200,.94),transparent),
    radial-gradient(2px 2px at 60%  7%,rgba(255,255,255,.88),transparent),
    radial-gradient(3px 3px at 72%  5%,rgba(220,226,255,.94),transparent),
    radial-gradient(2px 2px at 91%  9%,rgba(255,255,245,.90),transparent),
    /* Estrellas medianas */
    radial-gradient(2px 2px at  4% 18%,rgba(255,255,255,.74),transparent),
    radial-gradient(1px 1px at 18% 22%,rgba(200,216,255,.72),transparent),
    radial-gradient(2px 2px at 32% 14%,rgba(255,250,180,.78),transparent),
    radial-gradient(1px 1px at 44% 20%,rgba(255,255,255,.68),transparent),
    radial-gradient(2px 2px at 58% 17%,rgba(255,255,255,.72),transparent),
    radial-gradient(1px 1px at 70% 23%,rgba(210,216,255,.70),transparent),
    radial-gradient(2px 2px at 78% 16%,rgba(255,250,180,.74),transparent),
    radial-gradient(1px 1px at 96% 21%,rgba(255,255,255,.70),transparent),
    /* Estrellas pequeñas */
    radial-gradient(1px 1px at 10% 30%,rgba(255,255,255,.58),transparent),
    radial-gradient(1px 1px at 28% 27%,rgba(200,216,255,.54),transparent),
    radial-gradient(1px 1px at 42% 33%,rgba(255,255,255,.52),transparent),
    radial-gradient(1px 1px at 55% 28%,rgba(255,250,180,.50),transparent),
    radial-gradient(1px 1px at 68% 35%,rgba(255,255,255,.52),transparent),
    radial-gradient(1px 1px at 88% 28%,rgba(200,216,255,.50),transparent),
    /* Gradiente de cielo profundo */
    linear-gradient(180deg,
      #020114 0%,#060336 10%,#0a0752 22%,#0d0a64 34%,
      #090740 50%,#060428 68%,#04021a 84%,#030113 100%
    )!important;
  position:relative!important
}

/* ── Aurora boreal animada: bandas horizontales de color ── */
#s-map::before{
  content:'';
  position:absolute; left:-22%; top:0; width:144%; height:62%;
  pointer-events:none; z-index:0;
  background:
    linear-gradient(2deg, transparent 16%,rgba(0,232,145,.30) 24%,rgba(0,210,128,.18) 32%,transparent 40%),
    linear-gradient(-2deg,transparent  8%,rgba(65,22,232,.24) 16%,rgba(45,16,205,.14) 26%,transparent 34%),
    linear-gradient(4deg, transparent 34%,rgba(0,192,222,.22) 42%,rgba(0,172,210,.13) 52%,transparent 60%),
    linear-gradient(-3deg,transparent 50%,rgba(115,0,218,.20) 58%,rgba(0,170,132,.16) 68%,transparent 76%),
    linear-gradient(1deg, transparent  2%,rgba(0,255,132,.12) 10%,transparent 20%);
  animation:aurora-drift 22s ease-in-out infinite alternate
}
@keyframes aurora-drift{
  0%  {transform:translateX(0) rotate(0deg)}
  33% {transform:translateX(7%) rotate(.4deg)}
  66% {transform:translateX(-4%) rotate(-.3deg)}
  100%{transform:translateX(9%) rotate(.6deg)}
}

/* ── Nubes volumétricas en movimiento lento ── */
#s-map::after{
  content:'';
  position:absolute; left:-10%; top:0; width:120%; height:100%;
  pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse 340px 58px at 20% 46%,rgba(26,16,58,.58),transparent),
    radial-gradient(ellipse 260px 44px at 50% 42%,rgba(20,13,48,.52),transparent),
    radial-gradient(ellipse 300px 52px at 80% 48%,rgba(28,18,62,.56),transparent),
    radial-gradient(ellipse 400px 68px at 12% 68%,rgba(16,10,38,.72),transparent),
    radial-gradient(ellipse 320px 58px at 44% 72%,rgba(12,8,32,.66),transparent),
    radial-gradient(ellipse 360px 64px at 72% 66%,rgba(18,12,44,.70),transparent),
    radial-gradient(ellipse 220px 46px at 94% 74%,rgba(14,9,36,.64),transparent),
    linear-gradient(to top,rgba(28,16,54,.70) 0%,rgba(18,10,40,.32) 8%,transparent 18%);
  animation:cloud-drift 38s ease-in-out infinite alternate
}
@keyframes cloud-drift{
  0%  {transform:translateX(0)}
  100%{transform:translateX(-4%)}
}

/* ── Canvas del mapa: más transparente para que resplandezca el cielo ── */
.world-map-canvas{
  background:
    radial-gradient(ellipse 88% 58% at 50% 38%,rgba(20,12,52,.28) 0%,transparent 68%),
    rgba(4,2,12,.36)!important;
  border:1.5px solid rgba(232,170,34,.55)!important
}

/* ── Montañas lejanas: silueta más alta, dramática, nieve en cimas ── */
.world-map-canvas::before{
  background:
    linear-gradient(180deg,rgba(215,228,255,.42) 0%,rgba(184,204,255,.20) 5%,transparent 16%),
    linear-gradient(180deg,
      rgba(10,6,30,0) 0%,rgba(12,8,36,.18) 46%,
      rgba(10,6,30,.60) 64%,rgba(8,4,24,.84) 76%,rgba(6,3,18,.97) 100%
    )!important;
  clip-path:polygon(
    0% 100%, 0% 60%,
    2% 52%, 4% 58%, 7% 46%, 11% 55%,
    14% 41%, 18% 52%, 22% 38%, 26% 50%,
    30% 33%, 34% 47%, 38% 36%, 42% 49%,
    46% 37%, 50% 51%, 54% 38%, 58% 50%,
    62% 41%, 66% 54%, 70% 38%, 74% 52%,
    78% 44%, 82% 57%, 87% 42%, 91% 56%,
    95% 47%, 99% 62%, 100% 56%, 100% 100%
  )!important;
  animation:mountain-shimmer 16s ease-in-out infinite
}
@keyframes mountain-shimmer{0%,100%{opacity:.86}50%{opacity:1}}

/* ── Montañas cercanas: picos muy altos, irregulares, dramáticos, niebla ── */
.world-map-canvas::after{
  background:
    linear-gradient(180deg,rgba(195,215,255,.30) 0%,rgba(164,192,255,.14) 4%,transparent 13%),
    linear-gradient(to top,rgba(6,4,18,.98) 0%,rgba(8,5,22,.82) 8%,rgba(10,6,26,.30) 22%,transparent 34%),
    linear-gradient(180deg,rgba(6,3,16,0) 0%,rgba(8,4,22,.40) 38%,rgba(6,3,14,.84) 54%,rgba(4,2,10,.97) 100%)!important;
  clip-path:polygon(
    0% 100%, 0% 50%,
    1% 41%, 4% 52%, 7% 33%, 10% 46%,
    13% 25%, 17% 42%, 20% 19%, 24% 37%,
    27% 15%, 31% 35%, 35% 22%, 39% 40%,
    43% 24%, 47% 42%, 50% 26%, 54% 44%,
    58% 28%, 62% 46%, 66% 30%, 70% 48%,
    74% 34%, 78% 51%, 82% 36%, 86% 53%,
    90% 38%, 94% 54%, 98% 43%, 100% 50%,
    100% 100%
  )!important;
  animation:map-fog 14s ease-in-out infinite
}

/* ── Iconos de nodos: layout para SVG inline ── */
.wn-icon{display:flex!important;align-items:center;justify-content:center;line-height:1!important}
.wn-icon svg{display:block!important;flex-shrink:0}
.wn-icon img{display:block!important;width:36px;height:36px;flex-shrink:0;object-fit:contain}

/* ── Caminos entre mundos: radiancia máxima ── */
.map-svg-overlay path{
  stroke:rgba(230,195,68,.92)!important;
  stroke-width:2.5!important;
  filter:drop-shadow(0 0 7px rgba(222,188,62,.72)) drop-shadow(0 0 18px rgba(222,188,62,.38))!important
}

/* ════════════════════════════════════════════════════════════════
   FIX 1 — PARIDAD COMBATE: todos los mundos al nivel del M2
   ════════════════════════════════════════════════════════════════ */

/* M1 Hidrógeno — cielo azul tanto desde arriba como desde abajo */
body.bg-w0 #s-combat::before{
  background:
    radial-gradient(ellipse 126% 46% at 50% -16%,rgba(0,172,255,.86) 0%,transparent 60%),
    radial-gradient(ellipse  92%  36% at 50%  122%,rgba(0,92,182,.84) 0%,transparent 52%),
    radial-gradient(ellipse  46%  78% at  4%   52%,rgba(0,126,232,.62) 0%,transparent 46%),
    radial-gradient(ellipse  46%  78% at 96%   52%,rgba(0,146,255,.60) 0%,transparent 46%),
    radial-gradient(ellipse  62%  34% at 50%   52%,rgba(0,108,218,.30) 0%,transparent 42%);
  animation:w-pulse 5s ease-in-out infinite
}

/* M3 Sales Binarias — cristal y luz desde abajo al nivel del volcán */
body.bg-w2 #s-combat::before{
  background:
    radial-gradient(ellipse  98%  50% at 20%  12%,rgba(0,232,255,.82) 0%,transparent 54%),
    radial-gradient(ellipse  74%  44% at 80%  20%,rgba(96,255,255,.78) 0%,transparent 50%),
    radial-gradient(ellipse 102%  44% at 50%  126%,rgba(0,145,218,.86) 0%,transparent 50%),
    radial-gradient(ellipse  50%  72% at 50%   50%,rgba(0,188,240,.28) 0%,transparent 44%),
    radial-gradient(ellipse  40%  38% at 50%   -2%,rgba(148,255,255,.46) 0%,transparent 38%);
  animation:w-pulse 6s ease-in-out infinite
}

/* M4 Torres — tormenta violeta tan violenta como la lava del M2 */
body.bg-w3 #s-combat::before{
  background:
    radial-gradient(ellipse 104%  60% at 50% -26%,rgba(166,62,255,.82) 0%,transparent 56%),
    radial-gradient(ellipse  58%  74% at  5%   50%,rgba(114,36,235,.72) 0%,transparent 48%),
    radial-gradient(ellipse  58%  74% at 95%   50%,rgba(186,86,255,.68) 0%,transparent 44%),
    radial-gradient(ellipse  70%  36% at 50%  126%,rgba(98,30,208,.80) 0%,transparent 50%),
    radial-gradient(ellipse  38%  40% at 50%   50%,rgba(148,55,242,.32) 0%,transparent 40%);
  animation:w-storm 4s ease-in-out infinite
}

/* M5 Palacio — oro deslumbrante tanto desde abajo como desde arriba */
body.bg-w4 #s-combat::before{
  background:
    radial-gradient(ellipse 126%  40% at 50%  -11%,rgba(255,220,0,.82) 0%,transparent 56%),
    radial-gradient(ellipse 102%  32% at 50%   126%,rgba(220,178,0,.86) 0%,transparent 48%),
    radial-gradient(ellipse  46%  94% at 50%    50%,rgba(242,198,0,.26) 0%,transparent 48%),
    radial-gradient(ellipse  36%  32% at 17%    28%,rgba(255,240,0,.46) 0%,transparent 36%),
    radial-gradient(ellipse  36%  32% at 83%    28%,rgba(255,240,0,.44) 0%,transparent 36%);
  animation:w-pulse 5.5s ease-in-out infinite
}

/* M6 Laberinto — niebla esmeralda tan densa como la lava del M2 */
body.bg-w5 #s-combat::before{
  background:
    radial-gradient(ellipse 118%  50% at 50%  130%,rgba(0,218,84,.86) 0%,transparent 52%),
    radial-gradient(ellipse  74%  76% at 11%   50%,rgba(0,176,66,.76) 0%,transparent 48%),
    radial-gradient(ellipse  62%  64% at 89%   40%,rgba(62,248,112,.72) 0%,transparent 42%),
    radial-gradient(ellipse  88%  32% at 50%  -11%,rgba(0,144,56,.64) 0%,transparent 46%),
    radial-gradient(ellipse  42%  44% at 50%   50%,rgba(0,188,72,.30) 0%,transparent 40%);
  animation:w-mist 7s ease-in-out infinite
}

/* Lobby (panel de mundo): presencia visual intensa al nivel del M2 */
body.bg-w0 .level-panel{box-shadow:inset 0 0 90px rgba(0,130,235,.30),0 0 0 2px rgba(0,162,255,.60)!important}
body.bg-w1 .level-panel{box-shadow:inset 0 0 90px rgba(235,65,0,.34),0 0 0 2px rgba(255,75,0,.62)!important}
body.bg-w2 .level-panel{box-shadow:inset 0 0 90px rgba(0,185,235,.30),0 0 0 2px rgba(0,208,255,.60)!important}
body.bg-w3 .level-panel{box-shadow:inset 0 0 90px rgba(140,44,255,.32),0 0 0 2px rgba(162,55,255,.62)!important}
body.bg-w4 .level-panel{box-shadow:inset 0 0 90px rgba(235,188,0,.32),0 0 0 2px rgba(255,208,0,.65)!important}
body.bg-w5 .level-panel{box-shadow:inset 0 0 90px rgba(0,185,65,.30),0 0 0 2px rgba(0,208,75,.60)!important}
body.bg-w6 .level-panel{box-shadow:inset 0 0 90px rgba(215,0,85,.30),0 0 0 2px rgba(235,0,95,.58)!important}
body.bg-w0 .level-panel-hdr{background:rgba(0,10,32,.90)!important;border-bottom-color:rgba(0,172,255,.56)!important}
body.bg-w1 .level-panel-hdr{background:rgba(22,4,0,.90)!important;border-bottom-color:rgba(255,85,0,.62)!important}
body.bg-w2 .level-panel-hdr{background:rgba(0,8,24,.90)!important;border-bottom-color:rgba(0,220,255,.56)!important}
body.bg-w3 .level-panel-hdr{background:rgba(11,2,30,.90)!important;border-bottom-color:rgba(172,65,255,.58)!important}
body.bg-w4 .level-panel-hdr{background:rgba(14,9,0,.90)!important;border-bottom-color:rgba(255,218,0,.62)!important}
body.bg-w5 .level-panel-hdr{background:rgba(2,11,4,.90)!important;border-bottom-color:rgba(0,220,85,.56)!important}
body.bg-w6 .level-panel-hdr{background:rgba(14,0,9,.90)!important;border-bottom-color:rgba(235,0,88,.58)!important}

/* ════════════════════════════════════════════════════════════════
   FIX 2 — ICONOS: header del panel de nivel con SVG
   ════════════════════════════════════════════════════════════════ */
#lp-em{display:flex!important;align-items:center;justify-content:center}
#lp-em svg{width:44px!important;height:44px!important;display:block!important}

/* ════════════════════════════════════════════════════════════════
   FIX 3 — NIVEL SECRETO: nodo épico + combate Fénix Primordial
   ════════════════════════════════════════════════════════════════ */

/* Nodo secreto en el overworld: más grande, glow dorado-carmesí pulsante */
.secret-world-node{
  z-index:8!important;
  animation:secret-float 3s ease-in-out infinite!important;
  transform-origin:center bottom
}
.secret-world-node svg{
  filter:
    drop-shadow(0 0 14px rgba(255,140,0,.80))
    drop-shadow(0 0 36px rgba(255,60,0,.55))
    drop-shadow(0 0 72px rgba(200,0,60,.30))!important;
  animation:secret-glow 3s ease-in-out infinite alternate!important
}
@keyframes secret-float{
  0%,100%{transform:translateY(0) scale(1)}
  50%     {transform:translateY(-8px) scale(1.04)}
}
@keyframes secret-glow{
  0%  {filter:drop-shadow(0 0 14px rgba(255,140,0,.80)) drop-shadow(0 0 36px rgba(255,60,0,.55))}
  100%{filter:drop-shadow(0 0 24px rgba(255,200,0,.95)) drop-shadow(0 0 60px rgba(255,100,0,.75)) drop-shadow(0 0 100px rgba(255,40,0,.40))}
}

/* Fondo combate nivel secreto: dorado-carmesí, renacimiento del Fénix */
body.secret-combat #s-combat{
  background:linear-gradient(165deg,
    rgba(72,20,0,.92) 0%,rgba(108,36,0,.86) 38%,
    rgba(160,68,0,.90) 65%,rgba(72,15,0,.94) 100%
  )!important
}
body.secret-combat #s-combat::before{
  background:
    radial-gradient(ellipse 130% 50% at 50%  132%,rgba(255,115,0,.94) 0%,transparent 52%),
    radial-gradient(ellipse  88%  34% at 26%  120%,rgba(255,65,0,.88) 0%,transparent 44%),
    radial-gradient(ellipse  88%  34% at 74%  120%,rgba(255,88,0,.84) 0%,transparent 44%),
    radial-gradient(ellipse 120%  44% at 50%  -20%,rgba(255,198,0,.86) 0%,transparent 56%),
    radial-gradient(ellipse  44%  90% at  5%   50%,rgba(210,0,55,.68) 0%,transparent 48%),
    radial-gradient(ellipse  44%  90% at 95%   50%,rgba(230,0,72,.64) 0%,transparent 48%),
    radial-gradient(ellipse  60%  68% at 50%   44%,rgba(230,86,0,.46) 0%,transparent 50%);
  animation:phoenix-flame 2.6s ease-in-out infinite
}
body.secret-combat #s-combat::after{
  background-image:
    radial-gradient(circle 7px  at  7% 30%,rgba(255,168,0,.52),transparent 18px),
    radial-gradient(circle 4px  at 22% 66%,rgba(255,88,0,.46),transparent 13px),
    radial-gradient(circle 9px  at 39% 22%,rgba(255,218,0,.48),transparent 23px),
    radial-gradient(circle 5px  at 55% 54%,rgba(210,0,65,.50),transparent 15px),
    radial-gradient(circle 8px  at 69% 80%,rgba(255,148,0,.44),transparent 21px),
    radial-gradient(circle 4px  at 84% 37%,rgba(188,0,88,.48),transparent 13px),
    radial-gradient(circle 7px  at 96% 60%,rgba(255,188,0,.46),transparent 18px);
  animation:combat-drift 10s linear infinite
}
@keyframes phoenix-flame{
  0%   {opacity:.70}
  20%  {opacity:1}
  42%  {opacity:.76}
  68%  {opacity:1}
  85%  {opacity:.80}
  100% {opacity:.70}
}

/* ════════════════════════════════════════════════════════════════
   FONDOS DE MAPA POR CURSO
   ════════════════════════════════════════════════════════════════ */

/* ── 2ºESO: Amanecer químico — cielo verde-azul, aurora cian, nieve blanca ── */
body.curso-2eso #s-map {
  background:
    /* Sol naciente */
    radial-gradient(circle 32px at 22% 14%,rgba(180,255,200,.92) 0%,rgba(80,220,150,.38) 50%,transparent 72%),
    radial-gradient(circle 100px at 22% 14%,rgba(60,200,140,.16) 0%,transparent 76%),
    /* Nebulosa esmeralda */
    radial-gradient(ellipse 68% 52% at 68% 20%,rgba(0,170,110,.30) 0%,transparent 66%),
    radial-gradient(ellipse 52% 38% at 32% 32%,rgba(20,190,210,.20) 0%,transparent 60%),
    /* Resplandor horizonte */
    radial-gradient(ellipse 105% 26% at 50% 100%,rgba(10,80,40,.52) 0%,transparent 100%),
    /* Estrellas frías */
    radial-gradient(2px 2px at  8%  6%,rgba(200,255,220,.90),transparent),
    radial-gradient(1px 1px at 45%  9%,rgba(220,255,240,.78),transparent),
    radial-gradient(2px 2px at 65%  4%,rgba(180,255,210,.86),transparent),
    radial-gradient(1px 1px at 86% 12%,rgba(200,255,230,.74),transparent),
    radial-gradient(2px 2px at 14% 22%,rgba(220,255,235,.68),transparent),
    radial-gradient(1px 1px at 55% 19%,rgba(180,255,215,.62),transparent),
    radial-gradient(1px 1px at 78% 26%,rgba(200,255,225,.60),transparent),
    /* Cielo amanecer verde-azul */
    linear-gradient(180deg,
      #020c06 0%,#04180c 8%,#062414 18%,#082c1a 28%,
      #062014 45%,#041610 65%,#030e08 84%,#020a05 100%
    ) !important;
}
body.curso-2eso #s-map::before {
  background:
    linear-gradient(2deg, transparent 16%,rgba(0,255,160,.30) 24%,rgba(0,220,130,.16) 32%,transparent 40%),
    linear-gradient(-2deg,transparent  8%,rgba(0,210,255,.24) 16%,rgba(0,170,230,.13) 26%,transparent 34%),
    linear-gradient(4deg, transparent 34%,rgba(40,230,180,.22) 42%,rgba(20,210,160,.12) 52%,transparent 60%),
    linear-gradient(-3deg,transparent 50%,rgba(0,190,110,.20) 58%,rgba(0,200,150,.14) 68%,transparent 76%),
    linear-gradient(1deg, transparent  2%,rgba(100,255,180,.11) 10%,transparent 20%);
  animation:aurora-drift 22s ease-in-out infinite alternate
}
body.curso-2eso #s-map::after {
  background:
    radial-gradient(ellipse 340px 58px at 20% 46%,rgba(8,36,20,.44),transparent),
    radial-gradient(ellipse 260px 44px at 50% 42%,rgba(6,28,16,.38),transparent),
    radial-gradient(ellipse 300px 52px at 80% 48%,rgba(10,40,22,.40),transparent),
    radial-gradient(ellipse 400px 68px at 12% 68%,rgba(4,20,12,.56),transparent),
    radial-gradient(ellipse 320px 58px at 44% 72%,rgba(4,18,10,.50),transparent),
    radial-gradient(ellipse 360px 64px at 72% 66%,rgba(6,24,14,.54),transparent),
    radial-gradient(ellipse 220px 46px at 94% 74%,rgba(4,18,10,.48),transparent),
    linear-gradient(to top,rgba(8,36,18,.58) 0%,rgba(5,22,11,.22) 8%,transparent 18%);
  animation:cloud-drift 38s ease-in-out infinite alternate
}
body.curso-2eso .world-map-canvas::before {
  background:
    linear-gradient(180deg,rgba(210,255,235,.58) 0%,rgba(170,240,210,.26) 5%,transparent 15%),
    linear-gradient(180deg,
      rgba(4,18,8,0) 0%,rgba(6,24,12,.18) 46%,
      rgba(4,18,8,.58) 64%,rgba(3,14,6,.82) 76%,rgba(2,10,4,.97) 100%
    ) !important
}
body.curso-2eso .world-map-canvas::after {
  background:
    linear-gradient(180deg,rgba(190,240,215,.28) 0%,rgba(150,220,195,.12) 4%,transparent 12%),
    linear-gradient(to top,rgba(2,14,6,.98) 0%,rgba(4,18,8,.80) 8%,rgba(5,22,10,.28) 22%,transparent 34%),
    linear-gradient(180deg,rgba(2,10,4,0) 0%,rgba(4,16,8,.38) 38%,rgba(3,12,6,.82) 54%,rgba(2,8,4,.97) 100%) !important
}

/* ── 3ºESO: Atardecer alquímico — crepúsculo ámbar-violeta, aurora rosada, montañas cálidas ── */
body.curso-3eso #s-map {
  background:
    /* Sol poniente */
    radial-gradient(circle 42px at 76% 16%,rgba(255,150,40,.92) 0%,rgba(255,100,20,.36) 50%,transparent 74%),
    radial-gradient(circle 120px at 76% 16%,rgba(255,120,30,.18) 0%,transparent 76%),
    /* Nebulosa crepuscular */
    radial-gradient(ellipse 72% 52% at 24% 22%,rgba(160,30,140,.30) 0%,transparent 66%),
    radial-gradient(ellipse 58% 42% at 62% 18%,rgba(220,80,30,.22) 0%,transparent 62%),
    /* Resplandor suelo cálido */
    radial-gradient(ellipse 105% 26% at 50% 100%,rgba(80,28,8,.55) 0%,transparent 100%),
    /* Estrellas cálidas */
    radial-gradient(2px 2px at  5%  7%,rgba(255,240,200,.88),transparent),
    radial-gradient(1px 1px at 22% 11%,rgba(255,220,160,.78),transparent),
    radial-gradient(2px 2px at 40%  5%,rgba(255,230,180,.84),transparent),
    radial-gradient(1px 1px at 62%  9%,rgba(255,240,200,.76),transparent),
    radial-gradient(2px 2px at 88%  6%,rgba(255,220,160,.80),transparent),
    radial-gradient(1px 1px at 12% 22%,rgba(255,200,140,.68),transparent),
    radial-gradient(1px 1px at 50% 20%,rgba(255,210,160,.62),transparent),
    /* Cielo atardecer */
    linear-gradient(180deg,
      #0a0304 0%,#160608 8%,#220a08 18%,#2c0e08 28%,
      #1e0a06 45%,#140606 65%,#0c0404 84%,#070203 100%
    ) !important;
}
body.curso-3eso #s-map::before {
  background:
    linear-gradient(2deg, transparent 16%,rgba(255,100,40,.28) 24%,rgba(240,80,30,.14) 32%,transparent 40%),
    linear-gradient(-2deg,transparent  8%,rgba(200,30,130,.24) 16%,rgba(180,20,110,.13) 26%,transparent 34%),
    linear-gradient(4deg, transparent 34%,rgba(255,120,60,.20) 42%,rgba(240,100,40,.11) 52%,transparent 60%),
    linear-gradient(-3deg,transparent 50%,rgba(180,40,160,.20) 58%,rgba(220,60,60,.14) 68%,transparent 76%),
    linear-gradient(1deg, transparent  2%,rgba(255,80,20,.11) 10%,transparent 20%);
  animation:aurora-drift 22s ease-in-out infinite alternate
}
body.curso-3eso #s-map::after {
  background:
    radial-gradient(ellipse 340px 58px at 20% 46%,rgba(44,14,6,.54),transparent),
    radial-gradient(ellipse 260px 44px at 50% 42%,rgba(36,10,4,.48),transparent),
    radial-gradient(ellipse 300px 52px at 80% 48%,rgba(48,16,6,.52),transparent),
    radial-gradient(ellipse 400px 68px at 12% 68%,rgba(28,8,3,.70),transparent),
    radial-gradient(ellipse 320px 58px at 44% 72%,rgba(22,7,3,.64),transparent),
    radial-gradient(ellipse 360px 64px at 72% 66%,rgba(32,10,4,.68),transparent),
    radial-gradient(ellipse 220px 46px at 94% 74%,rgba(24,8,3,.62),transparent),
    linear-gradient(to top,rgba(48,16,6,.68) 0%,rgba(30,10,3,.26) 8%,transparent 18%);
  animation:cloud-drift 38s ease-in-out infinite alternate
}
body.curso-3eso .world-map-canvas::before {
  background:
    linear-gradient(180deg,rgba(255,215,160,.42) 0%,rgba(220,175,110,.18) 5%,transparent 14%),
    linear-gradient(180deg,
      rgba(28,8,3,0) 0%,rgba(36,12,4,.18) 46%,
      rgba(28,8,3,.58) 64%,rgba(20,6,2,.82) 76%,rgba(14,4,2,.97) 100%
    ) !important
}
body.curso-3eso .world-map-canvas::after {
  background:
    linear-gradient(180deg,rgba(240,190,130,.26) 0%,rgba(200,150,90,.11) 4%,transparent 12%),
    linear-gradient(to top,rgba(14,4,2,.98) 0%,rgba(20,6,3,.80) 8%,rgba(26,8,3,.28) 22%,transparent 34%),
    linear-gradient(180deg,rgba(10,3,2,0) 0%,rgba(16,5,2,.38) 38%,rgba(12,4,2,.82) 54%,rgba(8,3,1,.97) 100%) !important
}

/* ── 1º Bachillerato: cielo dorado — maestría suprema, claro y épico ── */
body.curso-bach #s-map {
  background:
    linear-gradient(185deg,
      #3a2c08 0%,
      #5a4410 15%,
      #6e5518 30%,
      #503e0c 55%,
      #3a2c08 100%) !important;
}
body.curso-bach #s-map::before {
  background:
    radial-gradient(ellipse 100% 40% at 50% 22%,rgba(255,220,60,.90) 0%,transparent 58%),
    radial-gradient(ellipse 85% 30% at 12% 14%,rgba(255,200,20,.82) 0%,transparent 56%),
    radial-gradient(ellipse 75% 24% at 88% 30%,rgba(248,185,10,.75) 0%,transparent 54%),
    radial-gradient(ellipse 55% 14% at 40% 58%,rgba(220,248,255,.38) 0%,transparent 50%),
    radial-gradient(ellipse 40% 10% at 72% 65%,rgba(200,230,255,.30) 0%,transparent 46%) !important;
}
body.curso-bach #s-map::after {
  background:
    radial-gradient(circle 9% at 78% 9%,rgba(255,255,200,1) 0%,rgba(255,238,80,.88) 36%,rgba(255,215,0,.45) 62%,transparent 78%),
    radial-gradient(circle 24% at 78% 9%,rgba(255,225,0,.38) 0%,transparent 65%),
    radial-gradient(ellipse 60% 16% at 18% 20%,rgba(255,230,50,.62) 0%,transparent 54%),
    radial-gradient(ellipse 42% 12% at 66% 38%,rgba(248,200,20,.52) 0%,transparent 48%) !important;
}
body.curso-bach .world-map-canvas::before {
  background:
    linear-gradient(180deg,rgba(255,230,100,.68) 0%,rgba(235,185,10,.40) 4%,rgba(200,140,0,.18) 9%,transparent 16%) !important;
}
body.curso-bach .world-map-canvas::after {
  background:
    radial-gradient(ellipse 90% 22% at 50% 100%,rgba(255,220,80,.55) 0%,transparent 52%),
    radial-gradient(ellipse 50% 15% at 14% 100%,rgba(255,200,20,.44) 0%,transparent 46%),
    radial-gradient(ellipse 45% 12% at 86% 100%,rgba(255,210,40,.40) 0%,transparent 44%),
    linear-gradient(to top,rgba(20,12,0,.80) 0%,rgba(32,22,0,.55) 8%,rgba(44,32,4,.18) 22%,transparent 36%),
    linear-gradient(180deg,rgba(30,20,0,0) 0%,rgba(20,14,0,.28) 38%,rgba(14,9,0,.62) 54%,rgba(8,5,0,.88) 100%) !important
}


/* ═══════════════════════════════════════════════════════════════
   AUDITORÍA RESPONSIVIDAD MÓVIL — 375/390/412px
   ═══════════════════════════════════════════════════════════════ */

/* 1. GLOBALES — tap highlight + overflow lateral */
button, .btn, .cbtn, .hbtn, .lcard, .course-card {
  -webkit-tap-highlight-color: transparent;
}
body {
  max-width: 100vw !important;
}

/* 2. @media 640px — bloque principal mobile */
@media(max-width:640px) {

  /* ── TÍTULO ── */
  .t-menu-frame {
    padding: 20px 14px !important;
    width: calc(100% - 20px) !important;
    max-width: min(560px, calc(100vw - 20px)) !important;
    box-sizing: border-box !important;
  }
  .btn-start {
    width: 100% !important;
    min-height: 48px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .t-btn-secondary {
    width: 100% !important;
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .t-btn-mini {
    flex: 1 !important;
    min-width: 70px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  /* Contenedor de botones secundarios: columna */
  .t-menu-frame > div:has(.t-btn-secondary) {
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
    align-items: stretch !important;
  }
  /* Todos los botones del título excepto btn-start y mini: altura mínima táctil */
  #s-title button:not(.btn-start):not(.t-btn-mini) {
    min-height: 44px !important;
    width: 100% !important;
  }

  /* ── COMBATE ── */
  #m-em {
    width: 28vw !important;
    height: 28vw !important;
    min-width: unset !important;
    min-height: unset !important;
    max-width: 30vw !important;
    max-height: 30vw !important;
    font-size: clamp(2rem, 22vw, 4rem) !important;
  }
  #m-em svg {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
  }
  .inp {
    min-height: 48px !important;
    font-size: 1rem !important;
  }
  .cbtn {
    min-height: 44px !important;
    font-size: .85rem !important;
  }
  .td-q {
    font-size: 1rem !important;
  }
  /* Wrapper tabla: scroll horizontal si no cabe */
  #tbl-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
  }
  .qtbl {
    min-width: 300px !important;
  }
  /* HP bar y HUD: asegurar legibilidad */
  .hp-wrap {
    min-height: 18px !important;
  }

  /* ── MAPA ── */
  .mario-map-wrap {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    padding: 4px 6px 0 !important;
  }

  /* ── TIENDA ── */
  .shop-grid {
    grid-template-columns: 1fr !important;
  }
  .scard {
    padding: 12px !important;
  }
  .btn-buy, .btn-equip {
    min-height: 44px !important;
    height: 44px !important;
  }
  .shop-sections {
    grid-template-columns: 1fr !important;
  }

  /* ── MODALES ── */
  .gear-modal, .tutorial-modal, .ptable-modal {
    max-height: 92vh !important;
    overflow-y: auto !important;
  }
  /* Panel del profesor */
  #teacher-panel-overlay > div {
    padding: 16px 12px !important;
    max-width: 100% !important;
    width: calc(100% - 20px) !important;
  }
  #teacher-panel-overlay h2 {
    font-size: 1rem !important;
  }
  #teacher-panel-overlay p,
  #teacher-panel-overlay label {
    font-size: .82rem !important;
  }
  #teacher-panel-overlay .tp-b {
    font-size: .75rem !important;
    padding: 8px 10px !important;
  }

  /* ── BOMBA ── */
  #bomb-widget {
    transform: translateX(-50%) scale(.85) !important;
    top: 4px !important;
  }

}

/* 3. @media 420px — pantallas muy pequeñas */
@media(max-width:420px) {
  .td-q {
    font-size: .9rem !important;
  }
  .qtbl {
    min-width: 280px !important;
  }
  /* HUD icon-only cuando hay 6+ botones */
  .hbtn-lbl {
    display: none !important;
  }
  .hbtn {
    font-size: 1.3rem !important;
    padding: 8px !important;
    min-height: 44px !important;
    min-width: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* 4. @media 375px — iPhone SE y equivalentes */
@media(max-width:375px) {
  html {
    font-size: 12px !important;
  }
  /* Limitar encabezados Cinzel */
  .shop-h { font-size: 1.1rem !important; }
  .intro-name { font-size: 1.1rem !important; }
  .level-panel-hdr .lp-title { font-size: 1rem !important; }
  /* Cuerpo Crimson Pro: mínimo legible */
  .tcard p, .tcard li,
  .sc-desc, .lc-mon,
  .lc-name { font-size: .9rem !important; }
}

/* ═══════════════════════════════════════════════════════
   TUTORIAL INTERACTIVO — ARCHIMEDES
   ═══════════════════════════════════════════════════════ */
body.tut-locked { cursor: default; }
body.tut-locked *:not(.tut-allow):not(.tut-allow *):not(#tut-overlay):not(#tut-overlay *) {
  pointer-events: none !important;
  user-select: none !important;
}
.tut-allow { pointer-events: all !important; cursor: pointer; }
.tut-allow input { cursor: text !important; }

.tut-spotlight {
  position: relative !important;
  z-index: 9750 !important;
  filter: brightness(1.3) drop-shadow(0 0 12px rgba(200,145,30,.6)) !important;
  animation: tut-glow 1.8s ease-in-out infinite !important;
}
@keyframes tut-glow {
  0%,100% { filter: brightness(1.3) drop-shadow(0 0 12px rgba(200,145,30,.6)); }
  50%      { filter: brightness(1.55) drop-shadow(0 0 24px rgba(200,145,30,.9)); }
}

#tut-backdrop {
  position: fixed; inset: 0; z-index: 9700;
  background: rgba(5,3,20,.74);
  pointer-events: auto;
}
.tut-phase1-card {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%);
  z-index: 9998;
  width: min(440px, 92vw);
  max-height: 82vh;
  overflow-y: auto;
  background: var(--panel);
  border: 2px solid rgba(201,168,76,.6);
  border-radius: 16px;
  box-shadow: 0 8px 40px rgba(0,0,0,.8), 0 0 28px rgba(201,168,76,.15);
}
.tut-action-bubble {
  position: fixed; z-index: 9757;
  max-width: min(280px, calc(100vw - 24px));
  background: linear-gradient(135deg,#1a1535,#2a1f52);
  border: 2px solid var(--gold);
  border-radius: 10px;
  padding: 8px 14px;
  font-family: 'Cinzel', serif;
  font-size: .78rem;
  color: var(--gold2);
  text-align: center;
  white-space: normal;
  box-shadow: 0 4px 20px rgba(0,0,0,.6), 0 0 16px rgba(200,145,30,.35);
  pointer-events: none;
  animation: tut-bubble-pulse 1.4s ease-in-out infinite;
}
@keyframes tut-bubble-pulse {
  0%,100% { box-shadow: 0 4px 20px rgba(0,0,0,.6), 0 0 16px rgba(200,145,30,.35); }
  50%      { box-shadow: 0 4px 24px rgba(0,0,0,.7), 0 0 26px rgba(200,145,30,.6); }
}
.tut-skip-corner {
  position: fixed; left: 12px; bottom: 16px; z-index: 9998;
  font-family: 'Cinzel', serif;
  font-size: .7rem;
  padding: 9px 14px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(20,15,40,.92);
  color: var(--gold2);
  cursor: pointer;
}
@keyframes tut-finger-anim {
  0%,100% { transform: scale(1) translateY(0); opacity: 1; }
  50%      { transform: scale(1.06) translateY(-3px); opacity: .85; }
}
@keyframes tut-btn-pulse {
  0%,100% { box-shadow: 0 0 16px rgba(200,145,30,.7), 0 0 32px rgba(200,145,30,.3); }
  50%      { box-shadow: 0 0 28px rgba(200,145,30,1), 0 0 56px rgba(200,145,30,.6); }
}
body.tut-locked .world-node.wn-locked {
  filter: blur(0.8px) brightness(0.65) !important;
  opacity: 0.7 !important;
  transition: none !important;
}
body.tut-locked #s-combat,
body.tut-locked #s-intro {
  pointer-events: auto !important;
  overflow-y: auto !important;
}
body.tut-locked #level-panel,
body.tut-locked #lvls-panel {
  pointer-events: auto !important;
  overflow-y: auto !important;
}
@keyframes tut-bounce {
  0%,100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-7px); }
}
.tut-spotlight::after {
  content: '▼';
  position: absolute; top: -30px; left: 50%;
  transform: translateX(-50%);
  color: var(--gold); font-size: 1.1rem;
  animation: tut-bounce .85s ease-in-out infinite;
  pointer-events: none; z-index: 9760;
}
#hud .tut-spotlight::after {
  top: auto !important; bottom: -28px !important;
  content: '▲' !important;
}

/* ═══════════════════════════════════════════════════════════
   MOBILE PORTRAIT ≤ 480px
   Solo layout y tamaños — estilo visual intacto.
   ═══════════════════════════════════════════════════════════ */

@keyframes mobileDrawerUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* ══════════════════════════════════════
   Pantallas muy pequeñas (≤ 360px)
   Evita desbordamiento del menú principal
   ══════════════════════════════════════ */
@media (max-width: 360px) {

  /* Frame empieza arriba y permite scroll si hace falta */
  #s-title {
    justify-content: flex-start !important;
    padding-top: 8px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Menos padding interior del marco */
  .t-menu-frame {
    padding: 12px 10px !important;
  }

  /* Menos separación bajo el caldero */
  .t-flask {
    margin-bottom: 6px !important;
  }

  /* Botones principales ligeramente más compactos */
  .btn-start,
  #s-title button:not(.btn-start):not(.t-btn-mini) {
    min-height: 42px !important;
  }

  /* Botones mini: rejilla 2×2 para no desbordar el marco */
  #s-title div:has(.t-btn-mini) {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .t-btn-mini {
    flex: 1 1 calc(50% - 3px) !important;
    min-width: unset !important;
    min-height: 40px !important;
  }
}

@media (max-width: 480px) {

  /* ── GENERAL ── */
  html, body { overflow-x: hidden !important; }
  .scr.on    { overflow-x: hidden !important; }

  /* ══════════════════════════════════════
     1. HUD — fila única, 56px
  ══════════════════════════════════════ */
  #hud {
    display: flex !important;
    height: 56px !important;
    max-height: 56px !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
  }
  /* Izquierda: avatar ↑ + nombre ↓ en columna */
  .hud-left {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 2px 4px !important;
    gap: 1px !important;
    flex-shrink: 0 !important;
    min-width: 0 !important;
  }
  /* Avatar 32×36px — reducido para que todo quepa en una fila */
  .hud-avatar {
    width: 32px !important;
    height: 36px !important;
    flex-shrink: 0 !important;
  }
  /* Nombre visible a 10px; nivel oculto por breakpoint 700px */
  .hud-info {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  .hud-name {
    font-size: 10px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    max-width: 60px !important;
    text-overflow: ellipsis !important;
  }
  /* Centro: vidas + monedas */
  .hud-center {
    padding: 4px 6px !important;
    gap: 4px !important;
    flex: 1 !important;
    min-width: 0 !important;
  }
  .hud-xp-wrap { display: none !important; }
  .hud-lives { gap: 3px !important; flex-shrink: 0 !important; }
  /* Corazones: 18px en fila sin overflow */
  .heart { font-size: 18px !important; }
  .hud-lives .heart:nth-child(n+4) { display: none !important; }
  /* Monedas: max-width fijo para no solaparse con botones nav */
  .hud-coins {
    font-size: 11px !important;
    padding: 2px 4px !important;
    gap: 2px !important;
    white-space: nowrap !important;
    flex-shrink: 1 !important;
    max-width: 76px !important;
  }
  .hud-coins span:first-child { font-size: 14px !important; }
  /* Derecha: nav solo iconos — 32px para dejar espacio al centro */
  .hud-nav {
    padding: 2px 3px !important;
    gap: 0 !important;             /* sin gap para ganar px en 360px */
    flex-basis: auto !important;   /* anula flex-basis:100% del breakpoint 700px */
    flex-wrap: nowrap !important;
    border-left: none !important;
    border-top: none !important;
    flex-shrink: 0 !important;
  }
  .hbtn-lbl { display: none !important; }
  .hbtn {
    font-size: 1.1rem !important;
    padding: 0 !important;
    min-height: 36px !important;
    min-width: 32px !important;    /* reducido de 36 a 32 para que quepan las monedas */
    width: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    letter-spacing: 0 !important;
    flex-shrink: 1 !important;
    border-radius: 4px !important;
  }

  /* ══════════════════════════════════════
     2. MAPA PRINCIPAL
  ══════════════════════════════════════ */
  .mario-map-wrap {
    padding: 0 !important;
    overflow: hidden !important;
    max-width: 100vw !important;
  }
  .mario-map-hdr { display: none !important; }

  /* Forzar grid de una sola celda para anular cualquier flex que ponga JS
     → el canvas ocupa width:100% cuando el panel está oculto;
       el panel aparece como drawer fijo (position:fixed) al tocar un nodo */
  .map-and-panel-wrap {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr !important;
  }
  .map-and-panel-wrap > .world-map-canvas {
    grid-area: 1 / 1 !important;
    width: 100% !important;
  }

  /* Canvas: exactamente 100% ancho, sin borde ni radio que distorsionen */
  .world-map-canvas {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
    border-width: 0 !important;
    margin-bottom: 0 !important;
    overflow: hidden !important;
  }
  /* Icono de nodo: proporcional al viewport con clamp */
  .wn-icon { font-size: clamp(22px, 6.5vw, 32px) !important; }
  /* Etiqueta: 9px, máx 2 líneas, sin puntos suspensivos */
  .wn-label {
    font-size: 9px !important;
    white-space: normal !important;
    max-width: 72px !important;
    line-height: 1.2 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: unset !important;
  }
  .wn-badge { font-size: 6px !important; padding: 1px 3px !important; }
  /* Personaje del jugador: tamaño correcto, no estirado */
  .map-player { font-size: clamp(18px, 5vw, 28px) !important; }

  /* Nodos del mapa mundial: área táctil 44×44px mínimo */
  .world-node {
    min-width: 44px !important;
    min-height: 44px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* ══════════════════════════════════════
     2b. MAPA INTERNO (árbol de niveles)
         Oculto por defecto → drawer abajo
  ══════════════════════════════════════ */
  /* Nodos: área táctil mínima */
  .wloc-node { min-width: 44px !important; min-height: 44px !important; }
  .wloc-label {
    font-size: 8px !important;
    white-space: normal !important;
    max-width: 70px !important;
    line-height: 1.2 !important;
  }
  /* Panel de nivel: drawer fijo desde abajo (se eleva sobre barra iOS) */
  .level-panel {
    position: fixed !important;
    bottom: env(safe-area-inset-bottom, 0px) !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    max-height: 70vh !important;
    height: auto !important;
    border-radius: 14px 14px 0 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    z-index: 200 !important;
    animation: mobileDrawerUp .28s ease !important;
  }

  /* ══════════════════════════════════════
     3. COMBATE
  ══════════════════════════════════════ */
  /* Arena en columna; monstruo al principio con order:-1 */
  #arena {
    flex-direction: column !important;
    align-items: center !important;
    min-height: auto !important;
    gap: 4px !important;
    padding: 8px 10px !important;
  }
  .a-mid {
    order: -1 !important;
    width: 100% !important;
  }
  .a-side, .a-side.r {
    width: 100% !important;
    text-align: center !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 2px 10px !important;
    justify-content: center !important;
    align-items: center !important;
  }
  /* Monstruo: máx 25% de la altura disponible */
  #m-em {
    max-height: 25vh !important;
    max-width: 30vw !important;
    width: 28vw !important;
    height: 28vw !important;
    min-width: unset !important;
    min-height: unset !important;
    margin-bottom: 4px !important;
  }
  /* Barra HP: bien visible */
  .hp-wrap { height: 14px !important; min-height: 14px !important; }

  /* Combate: scroll vertical, sin overflow horizontal */
  #s-combat {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 6px 10px 4px !important;
  }
  /* Tabla: scroll horizontal si no cabe */
  #tbl-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
  }
  /* Fila de botones sticky → visibles aunque salga el teclado virtual */
  .btn-row {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 10 !important;
    background: rgba(8, 6, 24, 0.94) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    padding: 6px 0 !important;
    margin-bottom: 0 !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
  }
  /* Botón Siguiente también sticky */
  #btn-nxt {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 9 !important;
    background: rgba(8, 6, 24, 0.94) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    padding-bottom: 4px !important;
  }
  /* Botones ATACAR/PISTA/REVELAR: 52px mínimo; texto puede hacer wrap */
  .cbtn {
    min-height: 52px !important;
    font-size: clamp(11px, 3vw, 14px) !important;
    padding: 8px 6px !important;
    white-space: normal !important;
    word-break: break-word !important;
    line-height: 1.3 !important;
  }
  /* ATACAR: "Atacar" nunca se parte; "(Enter)" oculto en móvil */
  .cbtn-atk {
    white-space: nowrap !important;
    font-size: 11px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .cbtn-atk span { display: none !important; }
  .cbtn-nxt {
    min-height: 52px !important;
    font-size: 16px !important;
    padding: 14px !important;
  }
  /* Inputs: font-size 16px mínimo evita zoom automático Android/iOS */
  .inp, .char-inp, input[type="text"], input[type="number"] {
    font-size: 16px !important;
    min-height: 48px !important;
    width: 100% !important;
  }

  /* ══════════════════════════════════════
     4. LISTA DE NIVELES (dentro del drawer)
  ══════════════════════════════════════ */
  .lvls { grid-template-columns: 1fr !important; gap: 6px !important; }
  .lcard { min-height: 48px !important; padding: 10px 12px !important; }
  .lc-name { font-size: 13px !important; }
  .lc-mon  { font-size: 12px !important; }
  .lcard.is-boss, .lcard.is-final {
    grid-column: 1 !important;
    grid-template-columns: auto 1fr !important;
    padding: 12px !important;
    gap: 8px !important;
  }
  .lcard.is-boss .lc-em, .lcard.is-final .lc-em {
    font-size: 2rem !important;
    width: 48px !important;
    height: 48px !important;
  }
  .level-panel-hdr { flex-wrap: wrap !important; gap: 6px !important; }
  #lvls-panel      { padding: 6px !important; overflow-y: auto !important; }

  /* ══════════════════════════════════════
     5. PANTALLAS — fixes adicionales 360px
  ══════════════════════════════════════ */
  /* Título tienda: evitar overflow en 360px */
  .shop-h { font-size: clamp(1rem, 4.5vw, 1.6rem) !important; }

  /* Q-zone: menos padding para ganar espacio a la tabla en combate */
  .q-zone { padding: 10px !important; }

  /* Q-top: espaciado compacto */
  .q-top { margin-bottom: 8px !important; gap: 6px !important; }

  /* Pill: sin letter-spacing excesivo */
  .pill { letter-spacing: 1px !important; padding: 4px 10px !important; }

  /* Feedback y hint: ancho completo sin overflow */
  #feedback, #hint-panel { overflow-x: hidden !important; }

  /* ══════════════════════════════════════
     6. TABLA PERIÓDICA INTERACTIVA
  ══════════════════════════════════════ */
  /* Overlay sin padding → modal ocupa toda la pantalla */
  #ptable-overlay { padding: 0 !important; }
  .ptable-modal {
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: 100dvh !important;
    height: 100dvh !important;
    border-radius: 0 !important;
    margin: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;   /* evita scroll lateral en portrait */
  }
  /* Header compacto: título + controles en menos espacio */
  .ptable-modal-hdr {
    padding: 6px 8px !important;
    gap: 4px !important;
  }
  .ptable-modal-title { font-size: .7rem !important; }
  .ptable-controls { gap: 3px !important; margin-left: 0 !important; flex-wrap: wrap !important; }
  .ptable-ctrl-btn { font-size: .58rem !important; padding: 4px 7px !important; white-space: nowrap !important; }
  .ptable-ctrl-sel { font-size: .58rem !important; padding: 4px 6px !important; max-width: 128px !important; }
  /* Body: mínimo padding para aprovechar el ancho */
  .ptable-modal-body { padding: 6px 8px !important; }
  /* Tabla wrapper: scroll horizontal como último recurso */
  .pt-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 2px 0 4px !important;
    margin-bottom: 6px !important;
  }
  /* Grid: columnas fluidas — 18 columnas en ~344px ≈ 17px c/u (16-20px ok) */
  .pt-grid {
    display: grid !important;
    grid-template-columns: 14px repeat(18, minmax(0, 1fr)) !important;
    gap: 1px !important;
    min-width: unset !important;
    width: 100% !important;
  }
  /* Celdas: 16px mínimo, sin relleno excesivo */
  .pt-el {
    min-height: 16px !important;
    padding: 1px !important;
    border-radius: 2px !important;
    border-width: 1px !important;
    gap: 0 !important;
  }
  .pt-el:hover { transform: scale(1.5) translateY(-2px) !important; z-index: 25 !important; }
  /* Número atómico: 4px, esquina superior izquierda */
  .pt-el .pt-z {
    font-size: 4px !important;
    top: 1px !important;
    left: 1px !important;
    line-height: 1 !important;
  }
  /* Símbolo: 7px centrado */
  .pt-el .pt-sym {
    font-size: 7px !important;
    margin-top: 3px !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
  }
  /* Valencias: sin espacio para mostrarlas en celdas de 16px */
  .pt-el .pt-ox { display: none !important; }
  /* Labels fila/columna */
  .pt-group-lbl, .pt-period-lbl { font-size: 5px !important; }
  /* Leyenda de categorías */
  .pt-legend { gap: 4px !important; margin-bottom: 6px !important; }
  .pt-legend-item { font-size: .54rem !important; padding: 2px 7px !important; }
  .pt-legend-dot { width: 8px !important; height: 8px !important; }
  /* Reglas de oxidación */
  .pt-rules { gap: 8px !important; margin-top: 6px !important; }
  .pt-rules h3 { font-size: .76rem !important; margin-bottom: 6px !important; }
  .pt-rule-col { padding: 10px 12px !important; }
  .pt-rule-list li { font-size: .72rem !important; padding: 6px 10px !important; line-height: 1.45 !important; }
  /* Game HUD de la tabla (modo juego) */
  .pt-game-hud { padding: 8px 10px !important; margin-bottom: 6px !important; }
  .pt-game-status { font-size: .78rem !important; padding-bottom: 8px !important; }
  .pt-game-msg { font-size: .9rem !important; margin-bottom: 10px !important; }
  .pt-opt-btn { padding: 7px 14px !important; font-size: .88rem !important; }
  /* Modal de detalle del elemento */
  .pt-elem-card {
    width: 92% !important;
    max-width: 340px !important;
    padding: 16px !important;
  }
  .pt-elem-symbol {
    width: 60px !important;
    height: 60px !important;
    font-size: 2rem !important;
    border-radius: 10px !important;
  }
}

/* ──────────────────────────────────────────────────
   Landscape móvil (altura ≤ 480px)
   En landscape el ancho es > 480px → el bloque portrait
   no se aplica; aquí se redefine la cuadrícula completa.
   ────────────────────────────────────────────────── */
@media (max-height: 480px) {
  /* Modal: pantalla completa también en landscape */
  #ptable-overlay { padding: 0 !important; }
  .ptable-modal {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    margin: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
  /* Header: sticky y ultra-compacto */
  .ptable-modal-hdr {
    padding: 4px 8px !important;
    gap: 4px !important;
    position: sticky !important;
    top: 0 !important;
    background: var(--panel) !important;
    z-index: 10 !important;
  }
  .ptable-modal-title { font-size: .65rem !important; }
  .ptable-controls { gap: 3px !important; margin-left: 0 !important; }
  .ptable-ctrl-btn { font-size: .54rem !important; padding: 3px 6px !important; }
  .ptable-ctrl-sel { font-size: .54rem !important; padding: 3px 5px !important; max-width: 110px !important; }
  .ptable-modal-body { padding: 4px 8px !important; }
  /* Tabla: scroll horizontal si aún no cabe */
  .pt-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 2px 0 4px !important;
    margin-bottom: 4px !important;
  }
  /* Grid: 18 columnas fluidas en el ancho landscape (~640px)
     → celda ≈ (640-32)/18 ≈ 34px; todas las columnas visibles */
  .pt-grid {
    grid-template-columns: 12px repeat(18, minmax(0, 1fr)) !important;
    gap: 1px !important;
    min-width: unset !important;
    width: 100% !important;
  }
  /* Celdas: más altas que en portrait para que el símbolo se lea */
  .pt-el {
    min-height: 24px !important;
    padding: 1px !important;
    border-radius: 2px !important;
    border-width: 1px !important;
    gap: 0 !important;
  }
  .pt-el:hover { transform: scale(1.4) translateY(-2px) !important; z-index: 25 !important; }
  .pt-el .pt-z {
    font-size: 5px !important;
    top: 1px !important;
    left: 1px !important;
    line-height: 1 !important;
  }
  .pt-el .pt-sym {
    font-size: 9px !important;
    margin-top: 5px !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
  }
  .pt-el .pt-ox { display: none !important; }
  .pt-group-lbl, .pt-period-lbl { font-size: 5px !important; }
  /* Leyenda y reglas compactas */
  .pt-legend { gap: 3px !important; margin-bottom: 4px !important; }
  .pt-legend-item { font-size: .5rem !important; padding: 2px 6px !important; }
  .pt-rules { gap: 6px !important; margin-top: 4px !important; }
  .pt-rule-col { padding: 8px 10px !important; }
  .pt-rule-list li { font-size: .68rem !important; padding: 5px 8px !important; }
}

/* Ocultar botones de título — necesita !important para ganar a .btn-start { display:flex !important } */
.title-btn-hidden { display: none !important; }

/* ── Secondary icon-button row (title screen bottom) ── */
.t-secondary-row {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 18px;
  width: 100%;
}
.t-icon-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  background: rgba(5,5,20,.55);
  border: 1px solid rgba(139,105,20,.35);
  border-radius: 10px;
  padding: 10px 18px;
  cursor: pointer;
  color: var(--faint);
  font-family: 'Cinzel', serif;
  text-decoration: none;
  transition: all .22s;
  min-width: 68px;
  z-index: 1;
}
.t-icon-btn:hover {
  background: rgba(201,168,76,.08);
  border-color: var(--gold-dark);
  color: var(--gold);
  transform: translateY(-2px);
}
.t-icon-btn-em { font-size: 1.35rem; line-height: 1; }
.t-icon-btn-lbl { font-size: .58rem; letter-spacing: 1.5px; text-transform: uppercase; }
.t-icon-btn--danger { color: rgba(230,90,60,.85); border-color: rgba(184,42,24,.3); }
.t-icon-btn--danger:hover { background: rgba(184,42,24,.1); border-color: rgba(184,42,24,.5); color: var(--flame); }

/* ── Settings modal ── */
.settings-modal { max-width: 360px !important; width: 92% !important; }
.settings-modal-body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 10px; }
.settings-item-btn {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  background: rgba(5,5,20,.5);
  border: 1px solid rgba(139,105,20,.35);
  border-radius: 8px;
  padding: 13px 18px;
  cursor: pointer;
  color: var(--faint);
  font-family: 'Cinzel', serif;
  font-size: .88rem;
  letter-spacing: 1px;
  transition: all .2s;
  text-align: left;
}
.settings-item-btn:hover { background: rgba(201,168,76,.07); border-color: var(--gold-dark); color: var(--gold); }
.settings-item-btn.active { color: var(--teal2); border-color: var(--teal); background: rgba(78,205,196,.06); }
.settings-item-icon { font-size: 1.15rem; min-width: 26px; text-align: center; }
.settings-item-label { flex: 1; }
.settings-sound-onoff { font-size: .68rem; color: var(--muted); letter-spacing: 0; margin-left: auto; }
.settings-sound-wrap { border: 1px solid rgba(139,105,20,.35); border-radius: 8px; overflow: hidden; }
.settings-sound-wrap #btn-sound { border: none; border-radius: 0; }
.settings-slider-row { padding: 6px 14px; transition: opacity .2s; }
.settings-slider-hdr { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; font-family: 'Cinzel', serif; font-size: .72rem; color: var(--muted); letter-spacing: .5px; }
.settings-slider-pct { min-width: 28px; text-align: right; }
.settings-slider-pct.teal { color: var(--teal2); }
.settings-slider-pct.violet { color: var(--violet2); }
.settings-range { width: 100%; height: 4px; cursor: pointer; }
.settings-range.teal { accent-color: var(--teal); }
.settings-range.violet { accent-color: var(--violet); }

@media (max-width: 400px) {
  .t-icon-btn { padding: 9px 12px; min-width: 56px; }
  .t-icon-btn-em { font-size: 1.15rem; }
  .t-icon-btn-lbl { font-size: .52rem; }
  .t-secondary-row { gap: 8px; }
}

/* ═══════════════════════════════════════════════════════
   SAFE AREA — notch / Dynamic Island / home bar (iOS)
   Con viewport-fit:cover el contenido empieza bajo el notch.
   env(safe-area-inset-*) lo desplaza al borde seguro.
   ═══════════════════════════════════════════════════════ */
body {
  padding-top:   env(safe-area-inset-top,   0px) !important;
  padding-left:  env(safe-area-inset-left,  0px) !important;
  padding-right: env(safe-area-inset-right, 0px) !important;
  box-sizing: border-box !important;
}
/* Título: centrado seguro (no corta contenido arriba cuando
   no cabe; home-bar queda fuera de la licencia) */
#s-title {
  justify-content: safe center !important;
  padding-bottom: max(16px, env(safe-area-inset-bottom, 16px)) !important;
}
/* HUD móvil: dejar que crezca con el padding del body en
   lugar de quedar aplastado a exactamente 56px */
@media (max-width: 480px) {
  #hud {
    height: auto      !important;
    max-height: none  !important;
    min-height: 56px  !important;
  }
}

/* ═══════════════════════════════════════════════════════
   HUD RESPONSIVO — evita solapamiento horizontal
   ═══════════════════════════════════════════════════════ */
/* 390-400px (iPhone 14/15/16 y equivalentes) */
@media (max-width: 400px) {
  .hbtn           { min-width: 28px !important; font-size: 1rem !important; }
  .hud-coins      { max-width: 68px !important; font-size: 10px !important; }
  .hud-name       { max-width: 54px !important; }
  .heart          { font-size: 16px !important; }
}
/* 360px y menos (Android gama media) */
@media (max-width: 360px) {
  .hbtn           { min-width: 24px !important; font-size: .88rem !important; }
  .hud-coins      { max-width: 52px !important; font-size: 9px !important;
                    padding: 2px 3px !important; gap: 1px !important; }
  .hud-coins span:first-child { font-size: 12px !important; }
  .heart          { font-size: 15px !important; }
}