.mobile-comic-root{position:fixed;inset:0;width:100vw;height:100vh;overflow:hidden;font-family:Share Tech Mono,Courier New,monospace;color:#f1f6ff;background:#000;touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}.comic-gol-canvas{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.3}.touch-particle{position:fixed;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;background:radial-gradient(circle,rgba(125,253,255,.8),transparent 70%);pointer-events:none;z-index:1000;animation:touchParticleExpand .8s ease-out forwards}@keyframes touchParticleExpand{0%{transform:scale(0);opacity:1}50%{transform:scale(1.5);opacity:.6}to{transform:scale(2.5);opacity:0}}.audio-unlock-overlay{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%,#7d57f626,#000 70%);backdrop-filter:blur(20px);transition:opacity .3s ease}.unlock-content{text-align:center;padding:32px;display:flex;flex-direction:column;align-items:center;gap:24px;max-width:400px}.unlock-content h2{margin:0;font-size:clamp(24px,6vw,32px);letter-spacing:1px;background:linear-gradient(135deg,#7dfdff,#ff57f6,#ffbf00);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:gradientShift 6s ease infinite}@keyframes gradientShift{0%,to{filter:hue-rotate(0deg)}50%{filter:hue-rotate(30deg)}}.unlock-content>p{margin:0;font-size:16px;color:#f1f6ffb3}.unlock-button{position:relative;padding:18px 40px;border:none;border-radius:50px;background:linear-gradient(135deg,#7dfdffe6,#ff57f6e6);color:#0a0520;font-size:18px;font-weight:600;letter-spacing:.5px;font-family:inherit;cursor:pointer;display:flex;align-items:center;gap:12px;box-shadow:0 8px 32px #7dfdff66;transition:transform .2s ease,box-shadow .2s ease}.unlock-button:active{transform:scale(.95);box-shadow:0 4px 16px #7dfdff4d}.unlock-icon{font-size:24px;animation:pulse 2s ease infinite}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.unlock-hint{font-size:13px;color:#f1f6ff80}.comic-panels{position:relative;width:100%;height:100vh;will-change:transform}.comic-panel{position:relative;width:100%;height:100vh;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:env(safe-area-inset-top,0) env(safe-area-inset-right,20px) env(safe-area-inset-bottom,40px) env(safe-area-inset-left,20px);opacity:.3;transition:opacity .5s ease}.comic-panel.active{opacity:1}.comic-panel.before,.comic-panel.after{opacity:.1}.panel-background{position:absolute;inset:0;z-index:1;background:var(--primary-color, #000);will-change:transform}.bg-stars{background:radial-gradient(circle at 20% 30%,rgba(125,253,255,.15),transparent 40%),radial-gradient(circle at 80% 70%,rgba(255,87,246,.12),transparent 40%),radial-gradient(2px 2px at 20% 80%,white,transparent),radial-gradient(2px 2px at 60% 30%,white,transparent),radial-gradient(1px 1px at 50% 50%,white,transparent),radial-gradient(1px 1px at 80% 10%,white,transparent),radial-gradient(2px 2px at 90% 60%,white,transparent),radial-gradient(1px 1px at 30% 20%,white,transparent),#0a0520;background-size:100% 100%,100% 100%,200% 200%,180% 180%,220% 220%,190% 190%,250% 250%,170% 170%;background-position:0 0,0 0,0 0,40% 60%,50% 50%,80% 10%,10% 90%,70% 20%;animation:starsFloat 120s linear infinite}@keyframes starsFloat{to{background-position:0 0,0 0,-200% -200%,-180% -180%,-220% -220%,-190% -190%,-250% -250%,-170% -170%}}.bg-crash{background:radial-gradient(circle at 40% 40%,rgba(255,154,209,.3),transparent 50%),radial-gradient(circle at 70% 30%,rgba(125,231,255,.2),transparent 40%),linear-gradient(180deg,#2a0f4be6,#060818f2);animation:crashFlash 2s ease-in-out infinite}@keyframes crashFlash{0%,to{filter:brightness(1)}50%{filter:brightness(1.3)}}.bg-uranus-surface{background:radial-gradient(circle at 30% 20%,rgba(125,231,255,.25),transparent 50%),radial-gradient(circle at 70% 80%,rgba(197,125,255,.15),transparent 40%),linear-gradient(180deg,#060818f2,#0a0f28eb)}.bg-aurora{background:linear-gradient(45deg,transparent 30%,rgba(158,231,255,.3) 50%,transparent 70%),linear-gradient(135deg,transparent 30%,rgba(197,125,255,.25) 50%,transparent 70%),radial-gradient(circle at 50% 30%,rgba(125,253,255,.2),transparent 60%),linear-gradient(180deg,#2a0f4be6,#06081ef2);background-size:200% 200%,200% 200%,100% 100%,100% 100%;animation:auroraShift 15s ease-in-out infinite}@keyframes auroraShift{0%,to{background-position:0% 0%,100% 100%,0 0,0 0}50%{background-position:100% 100%,0% 0%,0 0,0 0}}.bg-mycelium{background:radial-gradient(ellipse at 20% 60%,rgba(197,125,255,.3),transparent 40%),radial-gradient(ellipse at 80% 40%,rgba(125,255,197,.2),transparent 40%),linear-gradient(180deg,#0c041cf2,#160626eb)}.bg-tavern{background:radial-gradient(circle at 50% 50%,rgba(255,87,246,.25),transparent 50%),radial-gradient(circle at 30% 70%,rgba(125,253,255,.15),transparent 40%),linear-gradient(180deg,#120512f2,#140626e6)}.bg-crystal{background:radial-gradient(circle at 50% 20%,rgba(125,231,255,.35),transparent 40%),radial-gradient(circle at 70% 80%,rgba(158,231,255,.25),transparent 50%),linear-gradient(180deg,#060a18f2,#06081ef0);animation:crystalShimmer 8s ease-in-out infinite}@keyframes crystalShimmer{0%,to{filter:brightness(1)}50%{filter:brightness(1.2)}}.bg-void{background:radial-gradient(circle at 50% 50%,var(--secondary-color, #7dfdff) 0%,transparent 2%),radial-gradient(circle at 50% 50%,rgba(255,255,255,.1) 0%,transparent 3%),var(--primary-color, #000);animation:voidPulse 4s ease-in-out infinite}@keyframes voidPulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.panel-particles{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}.particles-sparkles:before,.particles-sparkles:after{content:"";position:absolute;width:4px;height:4px;border-radius:50%;background:#fffc;box-shadow:0 0 10px #ffffff80,20vw 30vh #7dfdff99,40vw 60vh #ff57f699,60vw 20vh #ffbf0099,80vw 70vh #7dfdff99,15vw 80vh #ff57f699,70vw 40vh #ffbf0099;animation:sparkleFloat 20s linear infinite}.particles-sparkles:after{animation-delay:-10s}@keyframes sparkleFloat{to{transform:translateY(-100vh);opacity:0}}.particles-spores{background-image:radial-gradient(circle at 20% 30%,rgba(168,255,125,.4) 2px,transparent 2px),radial-gradient(circle at 60% 70%,rgba(125,255,197,.3) 3px,transparent 3px),radial-gradient(circle at 80% 20%,rgba(197,125,255,.3) 2px,transparent 2px);background-size:50px 50px,80px 80px,100px 100px;animation:sporesDrift 30s linear infinite}@keyframes sporesDrift{to{background-position:50px 100vh,-80px 100vh,100px 100vh}}.particles-snow{background-image:radial-gradient(circle at 25% 35%,rgba(255,255,255,.6) 1px,transparent 1px),radial-gradient(circle at 65% 55%,rgba(158,231,255,.5) 2px,transparent 2px),radial-gradient(circle at 85% 15%,rgba(255,255,255,.4) 1px,transparent 1px);background-size:60px 60px,90px 90px,70px 70px;animation:snowFall 25s linear infinite}@keyframes snowFall{to{background-position:30px 100vh,-45px 100vh,35px 100vh}}.particles-cosmic-dust{background-image:radial-gradient(circle at 30% 40%,rgba(125,253,255,.3) 1px,transparent 1px),radial-gradient(circle at 70% 60%,rgba(255,87,246,.2) 1px,transparent 1px);background-size:100px 100px,120px 120px;animation:dustSwirl 40s linear infinite}@keyframes dustSwirl{to{background-position:100px 100vh,-120px 100vh;transform:rotate(5deg)}}.particles-embers{background-image:radial-gradient(circle at 40% 50%,rgba(255,191,0,.5) 2px,transparent 2px),radial-gradient(circle at 75% 25%,rgba(255,154,87,.4) 1px,transparent 1px);background-size:80px 80px,100px 100px;animation:embersRise 18s linear infinite}@keyframes embersRise{to{background-position:40px -100vh,-50px -100vh}}.panel-foreground{position:absolute;inset:0;z-index:3;pointer-events:none}.fg-ship{background:radial-gradient(ellipse at 50% 40%,rgba(125,253,255,.4),transparent 25%),radial-gradient(ellipse at 48% 42%,rgba(10,5,20,.8) 10%,transparent 15%);animation:shipWobble 3s ease-in-out infinite}@keyframes shipWobble{0%,to{transform:translate(-2%) rotate(-1deg)}50%{transform:translate(2%) rotate(1deg)}}.fg-wizards{background:radial-gradient(circle at 25% 60%,rgba(125,253,255,.6) 4%,transparent 5%),radial-gradient(circle at 42% 58%,rgba(255,87,246,.6) 4%,transparent 5%),radial-gradient(circle at 58% 62%,rgba(168,255,125,.6) 4%,transparent 5%),radial-gradient(circle at 75% 60%,rgba(255,191,0,.6) 4%,transparent 5%);animation:wizardGlow 4s ease-in-out infinite}@keyframes wizardGlow{0%,to{filter:brightness(1)}50%{filter:brightness(1.3)}}.fg-debris{background:linear-gradient(45deg,transparent 40%,rgba(125,231,255,.3) 45%,transparent 50%),linear-gradient(135deg,transparent 60%,rgba(197,125,255,.2) 65%,transparent 70%);background-size:150% 150%;animation:debrisFloat 10s ease-in-out infinite}@keyframes debrisFloat{0%,to{background-position:0% 0%}50%{background-position:100% 100%}}.fg-mushrooms{background:radial-gradient(ellipse at 30% 70%,rgba(197,125,255,.5) 8%,transparent 12%),radial-gradient(ellipse at 70% 75%,rgba(168,255,125,.4) 10%,transparent 15%)}.fg-crystals{background:linear-gradient(60deg,transparent 30%,rgba(125,231,255,.4) 35%,transparent 40%),linear-gradient(120deg,transparent 50%,rgba(158,231,255,.3) 55%,transparent 60%);background-size:100px 100px,150px 150px;animation:crystalRefract 6s ease-in-out infinite}@keyframes crystalRefract{0%,to{filter:hue-rotate(0deg)}50%{filter:hue-rotate(15deg)}}.panel-content{position:relative;z-index:10;display:flex;flex-direction:column;gap:16px;max-width:600px;margin:0 auto;animation:contentFadeIn .8s ease-out}@keyframes contentFadeIn{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.panel-chapter{font-size:12px;text-transform:uppercase;letter-spacing:2px;color:#f1f6ff99;font-weight:600}.panel-title{margin:0;font-size:clamp(28px,7vw,42px);line-height:1.2;letter-spacing:1px;text-shadow:0 2px 20px rgba(0,0,0,.8);animation:titleGlow 3s ease-in-out infinite}@keyframes titleGlow{0%,to{text-shadow:0 2px 20px rgba(0,0,0,.8),0 0 30px rgba(125,253,255,.3)}50%{text-shadow:0 2px 20px rgba(0,0,0,.8),0 0 40px rgba(125,253,255,.5)}}.panel-narrative{margin:0;font-size:clamp(16px,4vw,19px);line-height:1.6;color:#f1f6ffe6;text-shadow:0 1px 10px rgba(0,0,0,.8)}.panel-dialogue{position:relative;padding:20px;border-radius:20px;background:#080a1cd9;backdrop-filter:blur(10px);border:2px solid rgba(255,255,255,.1);box-shadow:0 8px 32px #00000080}.panel-dialogue:before{content:"";position:absolute;left:30px;bottom:-10px;width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid rgba(8,10,28,.85)}.dialogue-speaker{font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:8px;color:#7dfdff}.speaker-azura .dialogue-speaker{color:#7dfdff}.speaker-magenta .dialogue-speaker{color:#ff57f6}.speaker-viridian .dialogue-speaker{color:#a8ff7d}.speaker-saffron .dialogue-speaker{color:#ffbf00}.speaker-guide .dialogue-speaker{color:#00ffe6}.dialogue-text{margin:0;font-size:clamp(15px,4vw,18px);line-height:1.5;color:#f1f6fff2}.panel-hint{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:30px;background:#7dfdff26;backdrop-filter:blur(5px);border:1px solid rgba(125,253,255,.3);font-size:14px;color:#f1f6ffcc;align-self:center;animation:hintPulse 2s ease-in-out infinite}@keyframes hintPulse{0%,to{transform:translateY(0);opacity:.8}50%{transform:translateY(-5px);opacity:1}}.progress-indicator{position:fixed;right:env(safe-area-inset-right,20px);top:50%;transform:translateY(-50%);z-index:100;display:flex;flex-direction:column;gap:10px;padding:12px 8px;border-radius:20px;background:#080a1c99;backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1)}.progress-dot{width:10px;height:10px;border-radius:50%;background:#f1f6ff4d;cursor:pointer;transition:all .3s ease}.progress-dot.active{background:#7dfdff;box-shadow:0 0 15px #7dfdffcc;transform:scale(1.3)}.progress-dot:hover{background:#f1f6ff99;transform:scale(1.2)}@media(orientation:landscape){.panel-content{max-width:500px}.panel-title{font-size:clamp(24px,5vw,36px)}.panel-narrative,.dialogue-text{font-size:clamp(14px,3vw,17px)}}@media(min-width:768px){.progress-indicator{gap:12px;padding:16px 10px}.progress-dot{width:12px;height:12px}}