:root{
  --purple:#432076;
  --purple-2:#2c145d;
  --pink:#ff5ea8;
  --pink-2:#ff8cc3;
  --cream:#fff6e9;
  --gold:#ffbf3f;
  --blue:#55c8ff;
  --green:#3bcf81;
  --dark:#27143f;
  --text:#35254c;
  --muted:#74588a;
  --shadow:0 18px 46px rgba(38,13,75,.28);
  --radius:28px;
}
*{box-sizing:border-box}html,body{height:100%}body{margin:0;overflow:hidden;font-family:Arial,Helvetica,sans-serif;background:#20103f;color:#fff}button{font:inherit;border:0;cursor:pointer}img{display:block;max-width:100%}.app,.screen{width:100%;height:100%}.screen{display:none}.screen.active{display:block}

/* START SCREEN */
.intro-screen{background:#210d44}.intro-visual{position:relative;width:100%;height:100%;background:url('../assets/backgrounds/intro.png') center/cover no-repeat}.intro-visual:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(38,13,73,.04),rgba(38,13,73,.1));pointer-events:none}.intro-round{position:absolute;z-index:3;width:58px;height:58px;border-radius:20px;background:rgba(87,55,169,.92);color:#fff;font-size:25px;font-weight:900;border:3px solid rgba(255,222,175,.7);box-shadow:var(--shadow)}.intro-round:hover{transform:translateY(-2px)}.intro-sound{left:22px;top:22px}.intro-fullscreen{left:94px;top:22px}.hotspot-start{position:absolute;z-index:3;left:50%;bottom:86px;transform:translateX(-50%);width:min(32vw,410px);min-width:245px;height:min(9vw,112px);min-height:74px;border-radius:999px;background:linear-gradient(180deg,#ff9bc7,#ff6fae 52%,#ef4c99);border:7px solid #ffd99c;color:#fff;font-size:clamp(28px,2.5vw,48px);font-weight:1000;letter-spacing:.04em;text-shadow:0 3px 0 rgba(124,26,86,.45);box-shadow:0 18px 44px rgba(91,24,83,.38)}.hotspot-start:hover{transform:translateX(-50%) translateY(-2px);filter:brightness(1.04)}.version-pill{position:absolute;right:22px;bottom:18px;z-index:3;background:rgba(255,246,233,.92);color:#745089;padding:10px 16px;border-radius:999px;font-weight:900;box-shadow:var(--shadow)}

/* GAME LAYOUT */
.game-screen{background:radial-gradient(circle at top,#4c2789,#211043 70%)}.hud{height:84px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 16px;background:linear-gradient(180deg,#4b247c,#35186b);border-bottom:4px solid rgba(255,217,156,.42);box-shadow:0 10px 30px rgba(18,6,44,.3);position:relative;z-index:20}.brand{display:flex;flex-direction:column;min-width:230px}.brand strong{font-size:28px;letter-spacing:.02em;line-height:1;color:#fff;text-shadow:0 3px 0 #7c2b5a,0 0 14px rgba(255,198,76,.35)}.brand small{font-size:12px;color:#ffe7ff;font-weight:900}.hud-center{display:flex;justify-content:center;gap:10px;flex:1}.hud-pill{min-width:92px;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 15px;border-radius:999px;background:rgba(255,255,255,.13);border:2px solid rgba(255,255,255,.18);font-size:18px;font-weight:1000}.hearts{color:#ff98bf}.stars{color:#ffd05a}.progress{color:#e8f7ff}.hud-actions{display:flex;gap:8px}.hud-btn{width:46px;height:46px;border-radius:16px;background:rgba(255,255,255,.14);color:#fff;font-size:20px;border:2px solid rgba(255,255,255,.18);box-shadow:0 8px 18px rgba(20,8,44,.18)}.hud-btn:hover{transform:translateY(-2px)}
.game-layout{height:calc(100% - 84px);padding:14px;display:grid;grid-template-columns:315px 1fr;gap:16px}.mission-panel{background:linear-gradient(180deg,var(--cream),#ffeef9);color:var(--text);border-radius:var(--radius);box-shadow:var(--shadow);border:4px solid #ffd7ec;padding:16px;display:flex;flex-direction:column;gap:15px;min-height:0}.portrait-card{display:flex;align-items:center;gap:12px;padding:12px;border-radius:22px;background:#fff;border:2px solid #f4d7ff}.portrait-card img{width:74px;height:74px;object-fit:contain;image-rendering:pixelated;border-radius:18px;background:#fff4fb;padding:4px}.portrait-card b{display:block;font-size:22px;color:#42235d}.portrait-card span{font-size:13px;color:#865fa4;font-weight:900}.mission-text h1{margin:0;color:#dc4387;font-size:30px;line-height:1.05}.mission-text p{margin:10px 0 0;color:#604a70;line-height:1.45;font-weight:700}.byte-card{display:grid;grid-template-columns:64px 1fr;gap:12px;align-items:center;background:#fff;border:2px dashed #efb9d8;border-radius:24px;padding:12px;margin-top:auto}.byte-card img{width:60px;height:60px;object-fit:contain;image-rendering:pixelated}.byte-card p{margin:0;color:#604a70;font-weight:800;line-height:1.35}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border-radius:999px;color:#fff;font-weight:1000;text-transform:uppercase;letter-spacing:.04em;box-shadow:0 12px 26px rgba(103,54,173,.22);transition:.15s ease}.btn:hover{transform:translateY(-2px);filter:brightness(1.05)}.hint-btn{background:linear-gradient(180deg,#8d74ff,#694eea)}.btn-primary{background:linear-gradient(180deg,#ff94c5,#ff5fa8)}.play-panel{position:relative;display:flex;flex-direction:column;gap:10px;min-width:0}.stage{position:relative;flex:1;min-height:0;border-radius:32px;border:4px solid rgba(255,218,160,.58);box-shadow:var(--shadow);overflow:hidden;background:#5f4193 center/cover no-repeat;isolation:isolate}.stage:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at top,rgba(255,255,255,.09),transparent 42%),linear-gradient(180deg,rgba(255,255,255,.02),rgba(0,0,0,.04));z-index:2}.stage-message{min-height:54px;border-radius:22px;background:rgba(255,246,233,.96);border:3px solid #ffd99c;color:#6b4e7b;display:flex;align-items:center;justify-content:center;text-align:center;padding:10px 18px;font-weight:1000;box-shadow:var(--shadow)}.side-nav{position:absolute;top:50%;z-index:25;transform:translateY(-50%);width:54px;height:92px;border-radius:999px;background:rgba(91,58,172,.95);color:#fff;font-size:48px;display:grid;place-items:center;border:3px solid rgba(255,218,160,.72);box-shadow:var(--shadow)}.side-left{left:-8px}.side-right{right:-8px}.side-nav:hover{transform:translateY(-50%) scale(1.04)}.side-nav:disabled{opacity:.32;cursor:not-allowed}.hidden{display:none!important}

/* DRAG LEVEL */
.drop-zone{position:absolute;z-index:4;border:2px dashed rgba(255,255,255,.45);border-radius:24px;background:rgba(75,31,123,.13);display:flex;align-items:flex-end;justify-content:center;padding:10px;transition:.18s ease}.drop-zone span{padding:6px 10px;border-radius:999px;background:rgba(255,246,233,.91);color:#76528a;font-size:11px;font-weight:1000;box-shadow:0 6px 12px rgba(56,22,91,.16)}.drop-zone.active{border-color:#5ee4ff;background:rgba(94,228,255,.22);transform:scale(1.025);box-shadow:0 0 0 5px rgba(94,228,255,.16)}.drop-zone.complete{border-style:solid;border-color:#4bd585;background:rgba(75,213,133,.22)}.draggable{position:absolute;z-index:8;width:94px;height:94px;border-radius:24px;background:linear-gradient(180deg,#fff,#fff0f8);border:3px solid #ffd6e9;box-shadow:0 14px 28px rgba(50,20,86,.24);display:grid;place-items:center;cursor:grab;touch-action:none;transition:transform .16s ease}.draggable:hover{transform:translateY(-2px)}.draggable.dragging{transition:none;cursor:grabbing;z-index:40;box-shadow:0 22px 42px rgba(30,10,64,.35),0 0 0 5px rgba(87,219,255,.18)}.draggable img{width:76%;height:76%;object-fit:contain;image-rendering:pixelated}.object-label{position:absolute;left:50%;bottom:-14px;transform:translateX(-50%);white-space:nowrap;background:#fff7ec;border:2px solid #ffd99c;color:#78568a;border-radius:999px;padding:4px 8px;font-size:10px;font-weight:1000}.spark{position:absolute;width:24px;height:24px;border-radius:50%;background:radial-gradient(circle,#fff,var(--gold),transparent 70%);pointer-events:none;z-index:60;animation:spark .65s ease forwards}@keyframes spark{to{transform:scale(3.3);opacity:0}}

/* QUIZ */
.quiz-wrap{position:absolute;inset:0;z-index:3;display:grid;grid-template-columns:minmax(220px,330px) 1fr;gap:22px;padding:34px}.quiz-character{align-self:end;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:12px}.quiz-character img{width:min(190px,18vw);image-rendering:pixelated;filter:drop-shadow(0 20px 25px rgba(42,16,83,.3))}.byte-speech{background:#fff7ea;color:#5a3f71;border:3px dashed #ffbadb;border-radius:28px;padding:16px;font-size:18px;font-weight:900;line-height:1.25;box-shadow:var(--shadow)}.quiz-board{align-self:center;background:rgba(255,246,233,.96);border:4px solid #ffd99c;border-radius:34px;padding:26px;color:var(--text);box-shadow:var(--shadow)}.quiz-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.quiz-block{background:#f9d8ff;color:#823f93;border-radius:999px;padding:8px 12px;font-weight:1000}.quiz-count{color:#7d628f;font-weight:1000}.question{font-size:clamp(36px,5vw,70px);font-weight:1000;text-align:center;line-height:1.1;color:#d84386;margin:14px 0 22px}.quiz-help{text-align:center;color:#604a70;font-size:18px;font-weight:800;margin-bottom:20px}.option-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.option-btn{min-height:88px;border-radius:24px;background:linear-gradient(180deg,#fff,#ffeefa);border:4px solid #ffd6e9;color:#4a2c61;font-size:34px;font-weight:1000;box-shadow:0 10px 22px rgba(73,35,111,.14)}.option-btn:hover{transform:translateY(-2px);border-color:#ff8ec4}.option-btn.good{background:#e9fff3;border-color:#42d281}.option-btn.bad{background:#ffe8ec;border-color:#e75365}.quiz-word-options .option-btn{font-size:24px;text-transform:none}

/* BATTLE */
.battle-wrap{position:absolute;inset:0;z-index:3;overflow:hidden}.battle-title{position:absolute;left:30px;top:28px;z-index:5;background:rgba(255,246,233,.94);color:#593876;border:3px solid #ffd99c;border-radius:24px;padding:14px 18px;box-shadow:var(--shadow);font-weight:1000}.battle-title strong{display:block;color:#df4389;font-size:23px}.hero-player{position:absolute;left:7%;bottom:12%;z-index:6;width:145px;image-rendering:pixelated;filter:drop-shadow(0 18px 22px rgba(16,4,40,.32));animation:heroFloat 1.5s ease-in-out infinite}@keyframes heroFloat{50%{transform:translateY(-8px)}}.monster{position:absolute;z-index:7;width:112px;height:112px;border-radius:50%;background:rgba(255,255,255,.08);display:grid;place-items:center;animation:monsterPulse 1.3s ease-in-out infinite;will-change:left,top,transform}.monster img{width:105%;height:105%;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 12px 16px rgba(18,5,42,.32))}.monster:hover{transform:scale(1.06)}@keyframes monsterPulse{50%{filter:brightness(1.1)}}.energy-beam{position:absolute;height:12px;z-index:8;background:linear-gradient(90deg,#ff6cb4,#fff,#55d7ff);border-radius:999px;box-shadow:0 0 18px #ff70bd;transform-origin:left center;pointer-events:none;animation:beam .24s ease forwards}@keyframes beam{to{opacity:0;transform:scaleX(.3)}}.battle-progress{position:absolute;right:30px;top:28px;z-index:6;background:rgba(255,246,233,.94);border:3px solid #ffd99c;border-radius:22px;padding:12px 16px;color:#593876;font-weight:1000;box-shadow:var(--shadow)}

/* MAP */
.map-wrap{position:absolute;inset:0;z-index:3;background:linear-gradient(180deg,rgba(255,246,233,.88),rgba(255,238,249,.92));display:flex;align-items:center;justify-content:center;padding:82px 24px 24px}.map-card{position:relative;height:100%;width:auto;max-width:100%;aspect-ratio:1400/965;border-radius:26px;background:#fff;border:4px solid #ffd99c;box-shadow:var(--shadow);overflow:hidden;display:flex;align-items:center;justify-content:center}.spain-map-image{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff}.marker-layer{position:absolute;inset:0;z-index:5}.map-question{position:absolute;left:50%;top:18px;transform:translateX(-50%);z-index:8;background:#fff7ea;color:#5b3976;border:4px solid #ffd99c;border-radius:999px;padding:13px 22px;font-size:24px;font-weight:1000;box-shadow:var(--shadow);text-align:center}.province-marker{position:absolute;z-index:6;transform:translate(-50%,-50%);width:30px;height:30px;min-width:0;border-radius:999px;background:rgba(255,111,184,.92);border:4px solid #fff;color:transparent;font-size:0;font-weight:1000;box-shadow:0 0 0 2px rgba(255,111,184,.35),0 8px 18px rgba(74,35,112,.22)}.province-marker:after{content:attr(data-label);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%) scale(.92);opacity:0;pointer-events:none;background:#fff7ea;color:#5b3976;border:2px solid #ffd99c;border-radius:999px;padding:5px 9px;font-size:11px;white-space:nowrap;box-shadow:0 8px 18px rgba(74,35,112,.18);transition:.14s ease}.province-marker:hover{transform:translate(-50%,-50%) scale(1.16);background:#ffd05a}.province-marker:hover:after{opacity:1;transform:translateX(-50%) scale(1)}.province-marker.good{background:#43cf81;border-color:#fff}.province-marker.good:before{content:'✓';color:#fff;font-size:17px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.province-marker.bad{background:#df4b60;animation:mapBad .35s ease}.map-counter{position:absolute;right:26px;bottom:24px;z-index:8;background:#fff7ea;color:#6b4e7b;border:3px solid #ffd99c;border-radius:20px;padding:12px 16px;font-weight:1000;box-shadow:var(--shadow)}@keyframes mapBad{25%{transform:translate(-50%,-50%) translateX(-6px)}50%{transform:translate(-50%,-50%) translateX(6px)}75%{transform:translate(-50%,-50%) translateX(-4px)}}

/* MODALS */
.modal{position:fixed;inset:0;z-index:100;display:none;place-items:center;background:rgba(24,7,48,.58);backdrop-filter:blur(10px);padding:18px}.modal.open{display:grid}.modal-card{position:relative;width:min(560px,94vw);max-height:88vh;overflow:auto;border-radius:34px;background:linear-gradient(180deg,#fff9ef,#ffeefa);border:4px solid #ffd7ec;color:var(--text);padding:28px;text-align:center;box-shadow:var(--shadow)}.modal-close{position:absolute;right:14px;top:14px;width:42px;height:42px;border-radius:16px;background:#f9d9ea;color:#754d80;font-size:28px;font-weight:1000}.eyebrow{margin:0 0 10px;color:#9a67a8;text-transform:uppercase;font-size:12px;font-weight:1000;letter-spacing:.08em}.modal-card h2{margin:0 0 10px;color:#d84386;font-size:38px;line-height:1}.modal-card p{color:#674e79}.reward-line{display:flex;justify-content:center;gap:16px;margin:22px 0}.reward-line span{background:#fff;border:2px solid #ffd6e9;border-radius:22px;min-width:110px;padding:14px;font-size:24px;font-weight:1000}.shop-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-top:18px}.shop-item{text-align:left;background:#fff;border:2px solid #f2d8ff;border-radius:22px;padding:14px}.shop-item h3{margin:0 0 8px;color:#513568}.shop-item p{font-size:13px;margin:0 0 12px}.shop-item button{width:100%;min-height:42px;background:linear-gradient(180deg,#8a70ff,#6951e8)}.shop-item button.active{background:linear-gradient(180deg,#ff94c5,#ff5fa8)}.toast{position:fixed;left:50%;bottom:22px;z-index:140;transform:translateX(-50%) translateY(160%);padding:13px 18px;border-radius:999px;background:#fff7ea;color:#6b4e7b;border:3px solid #ffd99c;font-weight:1000;box-shadow:var(--shadow);transition:.22s ease}.toast.show{transform:translateX(-50%) translateY(0)}
.outfit-rainbow #albaPortrait{filter:hue-rotate(25deg) saturate(1.3)}.outfit-cape #albaPortrait{filter:drop-shadow(0 0 14px rgba(255,191,63,.6))}.outfit-armor #albaPortrait{filter:drop-shadow(0 0 14px rgba(85,200,255,.7)) contrast(1.1)}

@media (max-width:1080px){.hud{height:auto;flex-wrap:wrap}.brand{min-width:0}.hud-center{order:3;width:100%}.game-layout{grid-template-columns:1fr;height:calc(100% - 124px)}.mission-panel{display:grid;grid-template-columns:220px 1fr auto;align-items:center}.byte-card{display:none}.mission-text h1{font-size:24px}.quiz-wrap{grid-template-columns:1fr;padding:24px}.quiz-character{display:none}.option-grid{grid-template-columns:1fr}.option-btn{min-height:64px}.stage{min-height:500px}.draggable{width:82px;height:82px}.hotspot-start{bottom:74px}}
@media (max-width:680px){body{overflow:auto}.game-layout{height:auto;min-height:calc(100% - 140px);padding:10px}.mission-panel{display:flex}.stage{height:620px}.brand strong{font-size:21px}.hud-pill{min-width:78px;font-size:15px;padding:8px 10px}.hotspot-start{bottom:70px;min-width:220px;height:70px;font-size:26px}.version-pill{display:none}.map-question{font-size:18px;width:calc(100% - 40px);border-radius:24px}.map-wrap{padding:76px 8px 12px}.province-marker{width:26px;height:26px}.hero-player{width:115px}.monster{width:88px;height:88px}}

/* v1.3.2 · Animación y mejoras */
.transformation-overlay{position:absolute;inset:0;z-index:30;display:grid;place-items:center;background:radial-gradient(circle at center,rgba(255,111,184,.28),rgba(37,13,74,.78) 72%);backdrop-filter:blur(3px);animation:transformIn .25s ease both}.transformation-overlay.ending{animation:transformOut .42s ease both}.transform-card{width:min(720px,86%);min-height:390px;border-radius:36px;background:rgba(255,246,233,.96);border:5px solid #ffd99c;box-shadow:0 22px 60px rgba(28,8,64,.35);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:#5c3977;text-align:center;overflow:hidden;position:relative}.transform-card:before{content:"";position:absolute;inset:-40%;background:conic-gradient(from 0deg,transparent,#ff65b3,transparent,#67dfff,transparent,#ffd05a,transparent);opacity:.28;animation:magicSpin 1.2s linear infinite}.transform-card>*{position:relative;z-index:2}.transform-card p{margin:0;text-transform:uppercase;letter-spacing:.08em;font-weight:1000;color:#a04d9b}.transform-card strong{font-size:clamp(24px,3.1vw,42px);color:#df4389;text-shadow:0 2px 0 #fff}.transform-scene{position:relative;width:min(520px,90%);height:220px;display:flex;align-items:center;justify-content:center}.transform-alba,.transform-hero{position:absolute;image-rendering:pixelated;filter:drop-shadow(0 18px 24px rgba(37,13,74,.28))}.transform-alba{width:132px;animation:albaToHero 2.25s ease-in-out both}.transform-hero{width:160px;opacity:0;transform:scale(.5);animation:heroAppears 2.25s ease-in-out both}.transform-flash{position:absolute;width:190px;height:190px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:86px;background:radial-gradient(circle,#fff 0 12%,#ff65b3 13% 34%,rgba(255,101,179,.25) 35% 58%,transparent 59%);box-shadow:0 0 45px #ff65b3;animation:flashPulse 2.25s ease both}@keyframes transformIn{from{opacity:0}to{opacity:1}}@keyframes transformOut{to{opacity:0;transform:scale(1.04)}}@keyframes magicSpin{to{transform:rotate(360deg)}}@keyframes flashPulse{0%{opacity:0;transform:scale(.35) rotate(0)}35%{opacity:1;transform:scale(1) rotate(120deg)}70%{opacity:1;transform:scale(1.12) rotate(240deg)}100%{opacity:.05;transform:scale(1.45) rotate(360deg)}}@keyframes albaToHero{0%{opacity:1;transform:translateX(-115px) scale(1)}48%{opacity:1;transform:translateX(0) scale(1.22)}72%{opacity:.18;transform:translateX(0) scale(.75)}100%{opacity:0;transform:translateX(90px) scale(.35)}}@keyframes heroAppears{0%,54%{opacity:0;transform:translateX(90px) scale(.3) rotate(-8deg)}72%{opacity:1;transform:translateX(0) scale(1.22) rotate(4deg)}100%{opacity:1;transform:translateX(0) scale(1) rotate(0)}}
@media (max-width:680px){.transform-card{min-height:330px}.transform-scene{height:180px}.transform-alba{width:108px}.transform-hero{width:128px}.transform-flash{width:148px;height:148px;font-size:66px}}