:root{--bg-deep:#0a0a0f;--bg-primary:#0d0d1a;--bg-card:#1a1a2e;--bg-card-hover:#224;--bg-card-glass:#1a1a2eb3;--bg-overlay:#0009;--neon-cyan:#00f0ff;--neon-magenta:#ff00e5;--neon-lime:#39ff14;--neon-gold:gold;--neon-orange:#ff6b35;--neon-purple:#b94fff;--text-primary:#f0f0f5;--text-secondary:#a0a0c0;--text-muted:#606080;--color-success:#39ff14;--color-error:#f35;--color-warning:gold;--border-subtle:#ffffff0f;--border-glow-cyan:0 0 15px #00f0ff4d;--border-glow-magenta:0 0 15px #ff00e54d;--border-glow-lime:0 0 15px #39ff144d;--border-glow-gold:0 0 15px #ffd7004d;--space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-2xl:48px;--space-3xl:64px;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:24px;--radius-full:9999px;--font-heading:"Outfit", sans-serif;--font-body:"Inter", sans-serif;--transition-fast:.15s ease;--transition-base:.25s ease;--transition-slow:.4s ease;--transition-spring:.5s cubic-bezier(.34, 1.56, .64, 1)}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px}body{font-family:var(--font-body);background:var(--bg-deep);color:var(--text-primary);min-height:100vh;line-height:1.6}#root{flex-direction:column;min-height:100vh;display:flex}h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);letter-spacing:-.02em;font-weight:700;line-height:1.2}h1{font-size:2.5rem}h2{font-size:2rem}h3{font-size:1.5rem}h4{font-size:1.25rem}p{color:var(--text-secondary);line-height:1.7}a{color:var(--neon-cyan);transition:color var(--transition-fast);text-decoration:none}a:hover{color:var(--neon-magenta)}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg-deep)}::-webkit-scrollbar-thumb{background:var(--bg-card);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--bg-card-hover)}.bento-grid{gap:var(--space-lg);padding:var(--space-lg);display:grid}.bento-grid--2col{grid-template-columns:repeat(2,1fr)}.bento-grid--3col{grid-template-columns:repeat(3,1fr)}.bento-grid--4col{grid-template-columns:repeat(4,1fr)}.bento-grid--auto{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}.bento-card{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--space-lg);transition:all var(--transition-base);cursor:pointer;position:relative;overflow:hidden}.bento-card:before{content:"";border-radius:var(--radius-lg);-webkit-mask-composite:xor;pointer-events:none;opacity:0;transition:opacity var(--transition-base);background:linear-gradient(135deg,#0000 40%,#00f0ff26);padding:1px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);-webkit-mask-position:0 0,0 0;-webkit-mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.bento-card:hover{background:var(--bg-card-hover);box-shadow:var(--border-glow-cyan);transform:translateY(-4px)}.bento-card:hover:before{opacity:1}.bento-card--cyan:hover{box-shadow:var(--border-glow-cyan)}.bento-card--magenta:hover{box-shadow:var(--border-glow-magenta)}.bento-card--lime:hover{box-shadow:var(--border-glow-lime)}.bento-card--gold:hover{box-shadow:var(--border-glow-gold)}.bento-card--span-2{grid-column:span 2}.bento-card--span-3{grid-column:span 3}.btn{justify-content:center;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-lg);border-radius:var(--radius-md);font-family:var(--font-heading);cursor:pointer;transition:all var(--transition-base);border:none;font-size:.95rem;font-weight:600;display:inline-flex;position:relative;overflow:hidden}.btn--primary{background:linear-gradient(135deg, var(--neon-cyan), var(--neon-magenta));color:var(--bg-deep)}.btn--primary:hover{transform:translateY(-2px);box-shadow:0 8px 25px #00f0ff4d}.btn--secondary{background:var(--bg-card);color:var(--text-primary);border:1px solid var(--border-subtle)}.btn--secondary:hover{background:var(--bg-card-hover);border-color:var(--neon-cyan)}.btn--success{background:linear-gradient(135deg, var(--neon-lime), #0c4);color:var(--bg-deep)}.btn--success:hover{transform:translateY(-2px);box-shadow:0 8px 25px #39ff144d}.btn--lg{padding:var(--space-md) var(--space-xl);border-radius:var(--radius-lg);font-size:1.1rem}.btn--icon{border-radius:var(--radius-full);width:44px;min-width:44px;height:44px;min-height:44px;padding:0}.progress-bar{background:var(--bg-card);border-radius:var(--radius-full);width:100%;height:8px;position:relative;overflow:hidden}.progress-bar__fill{border-radius:var(--radius-full);background:linear-gradient(90deg, var(--neon-cyan), var(--neon-magenta));height:100%;transition:width var(--transition-slow);position:relative}.progress-bar__fill:after{content:"";background:linear-gradient(90deg,#0000,#ffffff4d,#0000);animation:2s infinite shimmer;position:absolute;inset:0}.badge{align-items:center;gap:var(--space-xs);padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-full);font-size:.75rem;font-weight:600;font-family:var(--font-heading);display:inline-flex}.badge--cyan{color:var(--neon-cyan);background:#00f0ff26;border:1px solid #00f0ff4d}.badge--magenta{color:var(--neon-magenta);background:#ff00e526;border:1px solid #ff00e54d}.badge--lime{color:var(--neon-lime);background:#39ff1426;border:1px solid #39ff144d}.badge--gold{color:var(--neon-gold);background:#ffd70026;border:1px solid #ffd7004d}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}@keyframes glow-pulse{0%,to{opacity:.6}50%{opacity:1}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes spin-slow{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-5px)}20%,40%,60%,80%{transform:translate(5px)}}@keyframes confetti-fall{0%{opacity:1;transform:translateY(-100vh)rotate(0)}to{opacity:0;transform:translateY(100vh)rotate(720deg)}}@keyframes fire-flicker{0%,to{text-shadow:0 0 5px #ff6b35,0 0 10px #ff6b35,0 0 20px gold;transform:scale(1)}50%{text-shadow:0 0 10px #ff6b35,0 0 20px #ff6b35,0 0 40px gold;transform:scale(1.1)}}@keyframes fade-in-up{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes scale-in{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}@keyframes neon-border{0%,to{border-color:var(--neon-cyan);box-shadow:0 0 10px #00f0ff4d}50%{border-color:var(--neon-magenta);box-shadow:0 0 10px #ff00e54d}}.text-center{text-align:center}.text-glow-cyan{text-shadow:0 0 20px #00f0ff80}.text-glow-magenta{text-shadow:0 0 20px #ff00e580}.text-glow-lime{text-shadow:0 0 20px #39ff1480}.text-glow-gold{text-shadow:0 0 20px #ffd70080}.text-neon-cyan{color:var(--neon-cyan)}.text-neon-magenta{color:var(--neon-magenta)}.text-neon-lime{color:var(--neon-lime)}.text-neon-gold{color:var(--neon-gold)}.animate-float{animation:3s ease-in-out infinite float}.animate-glow{animation:2s ease-in-out infinite glow-pulse}.animate-fire{animation:1s ease-in-out infinite fire-flicker}.page-container{flex-direction:column;min-height:100vh;display:flex}.page-content{padding:var(--space-lg);flex:1;width:100%;max-width:1400px;margin:0 auto;padding-top:80px}.flex-center{justify-content:center;align-items:center;display:flex}.flex-between{justify-content:space-between;align-items:center;display:flex}.app-header{-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border-subtle);height:70px;padding:0 var(--space-lg);z-index:1000;background:#0a0a0fd9;justify-content:space-between;align-items:center;display:flex;position:fixed;top:0;left:0;right:0}.app-header__logo{align-items:center;gap:var(--space-sm);text-decoration:none;display:flex}.app-header__logo img{border-radius:var(--radius-full);border:2px solid #00f0ff4d;width:42px;height:42px}.app-header__logo-text{font-family:var(--font-heading);background:linear-gradient(135deg, var(--neon-cyan), var(--neon-magenta));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:1.3rem;font-weight:800}.app-header__stats{align-items:center;gap:var(--space-lg);display:flex}.app-header__xp{align-items:center;gap:var(--space-sm);font-family:var(--font-heading);color:var(--neon-gold);font-size:1rem;font-weight:700;display:flex}.app-header__xp-icon{font-size:1.2rem}.app-header__streak{align-items:center;gap:var(--space-xs);font-family:var(--font-heading);color:var(--neon-orange);font-size:1rem;font-weight:700;display:flex}.app-header__streak-flame{font-size:1.3rem;animation:1s ease-in-out infinite fire-flicker}.app-header__nav{align-items:center;gap:var(--space-sm);display:flex}.zone-card{padding:var(--space-xl);border-radius:var(--radius-xl);background:var(--bg-card);border:1px solid var(--border-subtle);cursor:pointer;transition:all var(--transition-base);position:relative;overflow:hidden}.zone-card:after{content:"";border-radius:var(--radius-xl) var(--radius-xl) 0 0;height:4px;position:absolute;top:0;left:0;right:0}.zone-card--cyan:after{background:var(--neon-cyan)}.zone-card--magenta:after{background:var(--neon-magenta)}.zone-card--lime:after{background:var(--neon-lime)}.zone-card--gold:after{background:var(--neon-gold)}.zone-card:hover{transform:translateY(-6px)scale(1.02)}.zone-card--cyan:hover{box-shadow:var(--border-glow-cyan)}.zone-card--magenta:hover{box-shadow:var(--border-glow-magenta)}.zone-card--lime:hover{box-shadow:var(--border-glow-lime)}.zone-card--gold:hover{box-shadow:var(--border-glow-gold)}.zone-card__icon{margin-bottom:var(--space-md);font-size:3rem}.zone-card__title{margin-bottom:var(--space-sm);font-size:1.25rem;font-weight:700}.zone-card__desc{color:var(--text-secondary);margin-bottom:var(--space-md);font-size:.9rem}.zone-card__chapters{color:var(--text-muted);font-size:.8rem}.chapter-card{gap:var(--space-md);padding:var(--space-lg);background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-base);flex-direction:column;display:flex;position:relative}.chapter-card:hover{background:var(--bg-card-hover);transform:translateY(-4px)}.chapter-card__number{font-family:var(--font-heading);opacity:.1;top:var(--space-md);right:var(--space-lg);font-size:2.5rem;font-weight:800;position:absolute}.chapter-card__icon{font-size:2rem}.chapter-card__title{font-size:1rem;font-weight:600}.chapter-card__progress{margin-top:auto}.module-container{animation:.4s ease-out fade-in-up}.module-header{margin-bottom:var(--space-xl);padding:var(--space-lg);background:var(--bg-card);border-radius:var(--radius-lg);border:1px solid var(--border-subtle);justify-content:space-between;align-items:center;display:flex}.module-header__info{gap:var(--space-xs);flex-direction:column;display:flex}.module-header__title{font-size:1.5rem;font-weight:700}.module-header__subtitle{color:var(--text-secondary);font-size:.9rem}.module-header__score{align-items:center;gap:var(--space-lg);display:flex}.module-game-area{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);padding:var(--space-xl);min-height:400px;position:relative}.feedback-overlay{background:var(--bg-overlay);z-index:2000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.feedback-card{background:var(--bg-card);border-radius:var(--radius-xl);padding:var(--space-3xl);text-align:center;width:90%;max-width:400px;animation:.3s ease-out scale-in}.feedback-card--correct{border:2px solid var(--neon-lime);box-shadow:0 0 40px #39ff1433}.feedback-card--wrong{border:2px solid var(--color-error);animation:.3s ease-out scale-in,.5s ease-in-out .3s shake;box-shadow:0 0 40px #f353}.feedback-card__icon{margin-bottom:var(--space-md);font-size:4rem}.feedback-card__text{font-family:var(--font-heading);margin-bottom:var(--space-sm);font-size:1.5rem;font-weight:700}.feedback-card__xp{color:var(--neon-gold);font-family:var(--font-heading);font-weight:700}.scoreboard{text-align:center;padding:var(--space-3xl);animation:.4s ease-out scale-in}.scoreboard__icon{margin-bottom:var(--space-lg);font-size:5rem}.scoreboard__title{margin-bottom:var(--space-md);background:linear-gradient(135deg, var(--neon-cyan), var(--neon-gold));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:2rem;font-weight:800}.scoreboard__stats{gap:var(--space-lg);margin:var(--space-xl) 0;grid-template-columns:repeat(3,1fr);display:grid}.scoreboard__stat{padding:var(--space-lg);border-radius:var(--radius-md);background:#ffffff08}.scoreboard__stat-value{font-family:var(--font-heading);font-size:2rem;font-weight:800}.scoreboard__stat-label{color:var(--text-muted);margin-top:var(--space-xs);font-size:.8rem}.scoreboard__badge{margin:var(--space-xl) 0;padding:var(--space-lg);border-radius:var(--radius-lg);background:#ffd70014;border:1px solid #ffd70033;display:inline-block}.scoreboard__badge-icon{font-size:3rem}.scoreboard__badge-name{font-family:var(--font-heading);color:var(--neon-gold);margin-top:var(--space-sm);font-weight:700}.scoreboard__actions{gap:var(--space-md);margin-top:var(--space-xl);flex-wrap:wrap;justify-content:center;display:flex}.galaxy-canvas-container{z-index:0;width:100vw;height:100vh;position:fixed;top:0;left:0}.galaxy-overlay{z-index:1;pointer-events:none;position:relative}.galaxy-overlay>*{pointer-events:auto}.galaxy-title{text-align:center;padding-top:90px}.galaxy-title h1{background:linear-gradient(135deg, var(--neon-cyan), var(--neon-magenta), var(--neon-gold));-webkit-text-fill-color:transparent;margin-bottom:var(--space-sm);-webkit-background-clip:text;background-clip:text;font-size:3rem;font-weight:900}.galaxy-title p{color:var(--text-secondary);font-size:1.1rem}.galaxy-zones{padding:var(--space-lg);z-index:2;background:linear-gradient(#0000,#0a0a0ff2);position:fixed;bottom:0;left:0;right:0}.galaxy-zones__grid{gap:var(--space-md);grid-template-columns:repeat(4,1fr);max-width:1200px;margin:0 auto;display:grid}.boss-battle{text-align:center;animation:.5s ease-out fade-in-up}.boss-battle__pirate{margin-bottom:var(--space-md);font-size:6rem;animation:3s ease-in-out infinite float}.boss-battle__chests{gap:var(--space-md);margin:var(--space-xl) 0;flex-wrap:wrap;justify-content:center;display:flex}.boss-battle__chest{background:var(--bg-card);border:2px solid var(--border-subtle);border-radius:var(--radius-md);width:60px;height:60px;transition:all var(--transition-base);justify-content:center;align-items:center;font-size:1.5rem;display:flex}.boss-battle__chest--unlocked{border-color:var(--neon-gold);box-shadow:var(--border-glow-gold);animation:.3s ease-out scale-in}.boss-battle__question{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);padding:var(--space-xl);max-width:700px;margin:0 auto}.boss-battle__question-text{margin-bottom:var(--space-lg);font-size:1.3rem;font-weight:600}.boss-battle__options{gap:var(--space-md);grid-template-columns:1fr 1fr;display:grid}.boss-battle__option{padding:var(--space-md);border:2px solid var(--border-subtle);border-radius:var(--radius-md);cursor:pointer;font-family:var(--font-heading);color:var(--text-primary);transition:all var(--transition-fast);background:#ffffff08;font-size:1.1rem;font-weight:600}.boss-battle__option:hover{border-color:var(--neon-cyan);background:#00f0ff0d}.boss-battle__option--correct{border-color:var(--neon-lime)!important;background:#39ff141a!important}.boss-battle__option--wrong{animation:.5s ease-in-out shake;border-color:var(--color-error)!important;background:#ff33551a!important}.boss-battle__input{width:100%;padding:var(--space-md);border:2px solid var(--border-subtle);border-radius:var(--radius-md);color:var(--text-primary);font-family:var(--font-heading);text-align:center;transition:border-color var(--transition-fast);background:#ffffff08;outline:none;font-size:1.2rem}.boss-battle__input:focus{border-color:var(--neon-cyan)}.audio-control{align-items:center;display:inline-flex;position:relative}.audio-control__btn{font-size:1.1rem}.audio-control__caret{margin-left:4px;padding:0 8px;font-size:.85rem}.audio-popover{background:var(--bg-card,#14141f);border:1px solid var(--border-subtle);border-radius:var(--radius-lg,12px);width:220px;padding:var(--space-md,12px);gap:var(--space-sm,8px);z-index:100;flex-direction:column;display:flex;position:absolute;top:calc(100% + 8px);right:0;box-shadow:0 8px 24px #00000073}.audio-popover__mute{border:1px solid var(--border-subtle);border-radius:var(--radius-md,8px);color:var(--text-primary);cursor:pointer;text-align:left;transition:background var(--transition-base);background:0 0;padding:6px 10px;font-size:.85rem}.audio-popover__mute:hover{background:#ffffff0d}.audio-popover__row{color:var(--text-secondary);flex-direction:column;gap:4px;font-size:.8rem;display:flex}.audio-popover__row span{align-items:center;gap:6px;display:flex}.audio-popover__row input[type=range]{width:100%;accent-color:var(--neon-cyan,#00f0ff)}.audio-popover__row input[type=range]:disabled{opacity:.4}.audio-popover__label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px;font-size:.75rem}.audio-popover__tracks{border-bottom:1px solid var(--border-subtle);flex-direction:column;gap:4px;margin-bottom:4px;padding-bottom:8px;display:flex}.audio-popover__track{border:1px solid var(--border-subtle);border-radius:var(--radius-md);color:var(--text-secondary);cursor:pointer;text-align:left;transition:all var(--transition-base);background:0 0;flex-direction:column;align-items:flex-start;gap:2px;padding:6px 10px;font-family:inherit;font-size:.8rem;display:flex}.audio-popover__track:hover{color:var(--text-primary);border-color:var(--neon-cyan);background:#ffffff0d}.audio-popover__track--active{border-color:var(--neon-cyan);color:var(--neon-cyan);background:#00f0ff14}.audio-popover__track-label{font-weight:600}.audio-popover__track-desc{color:var(--text-muted);font-size:.7rem}.audio-popover__track--active .audio-popover__track-desc{color:var(--text-secondary)}.quiz-sfx-toggle{z-index:50;border-radius:var(--radius-full);border:1px solid var(--border-subtle);background:var(--bg-card);color:var(--text-primary);font-family:var(--font-heading);cursor:pointer;transition:all var(--transition-base);align-items:center;gap:6px;padding:8px 14px;font-size:.85rem;font-weight:600;display:inline-flex;position:fixed;top:80px;right:24px;box-shadow:0 4px 12px #00000059}.quiz-sfx-toggle:hover{background:var(--bg-card-hover);border-color:var(--neon-cyan)}.quiz-sfx-toggle--on{border-color:var(--neon-cyan);color:var(--neon-cyan)}.quiz-sfx-toggle--off{color:var(--text-muted)}.quiz-sfx-toggle__label{font-size:.75rem}@media (width<=1024px){.bento-grid--4col,.bento-grid--3col,.galaxy-zones__grid{grid-template-columns:repeat(2,1fr)}.galaxy-title h1{font-size:2.2rem}.boss-battle__options{grid-template-columns:1fr}}@media (width<=768px){.bento-grid--4col,.bento-grid--3col,.bento-grid--2col{grid-template-columns:1fr}.bento-card--span-2,.bento-card--span-3{grid-column:span 1}.galaxy-zones__grid{grid-template-columns:1fr}.galaxy-title h1{font-size:1.8rem}.scoreboard__stats,.boss-battle__options{grid-template-columns:1fr}.app-header__logo-text{display:none}.module-header__score{flex-wrap:wrap;justify-content:flex-end;gap:6px}.module-header{gap:var(--space-sm);flex-wrap:wrap}.boss-battle__chests{flex-wrap:wrap;justify-content:center;gap:8px}.audio-popover{max-width:calc(100vw - 24px);right:-8px}.audio-popover__done{display:block}.galaxy-zones{padding:var(--space-md);max-height:45vh;overflow-y:auto}.galaxy-title{padding-top:80px}}@media (width<=480px){.app-header{padding:0 var(--space-md);gap:var(--space-sm);height:64px}.app-header__logo img{width:36px;height:36px}.app-header__stats{gap:var(--space-sm)}.app-header__xp span:last-child,.app-header__streak span:last-child{display:none}.app-header__xp,.app-header__streak{padding:4px 6px}.app-header__xp-icon,.app-header__streak-flame{font-size:1.1rem}.galaxy-zones{padding:var(--space-sm);max-height:40vh}.zone-card{padding:var(--space-md)}.zone-card__icon{font-size:2.4rem}.boss-battle__pirate{font-size:4.5rem}.feedback-card{padding:var(--space-xl)}.feedback-card__icon{font-size:3rem}.page-content{padding:var(--space-md)}}@media (width<=380px){.app-header__xp,.app-header__streak{display:none}.app-header__stats{gap:var(--space-xs)}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}.progress-bar__fill:after,.app-header__streak-flame,.boss-battle__pirate,.feedback-card--wrong{animation:none!important}}@media (hover:none) and (pointer:coarse){.zone-card:hover,.grade-card-link:hover,.btn--secondary:hover{transform:none}}.audio-popover__done{margin-top:var(--space-xs);padding:var(--space-sm) var(--space-md);background:var(--neon-cyan);color:#0a0a0f;border-radius:var(--radius-md);font-family:var(--font-heading);cursor:pointer;-webkit-tap-highlight-color:transparent;border:none;font-weight:700;display:none}.audio-popover__done:active{opacity:.85}svg[viewBox][width]:not([width="100%"]){max-width:100%;height:auto;margin-left:auto;margin-right:auto;display:block}