@import"https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Lora:ital,wght@0,400;0,500;0,600;1,400&display=swap";:root{--color-primary: #4de8c7;--color-secondary: #8b7dff;--color-accent: #ffd700;--color-dark: #0a0f1c;--color-dark-light: #1a2235;--color-text: #e8e8f0;--color-text-muted: #9ca3b8;--font-display: "Cinzel", serif;--font-body: "Lora", serif}*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:var(--font-body);background-color:var(--color-dark);color:var(--color-text);line-height:1.6;overflow-x:hidden}h1,h2,h3,h4,h5,h6{font-family:var(--font-display);font-weight:600;line-height:1.2}.container{max-width:1400px;margin:0 auto;padding:0 2rem}.glow-text{text-shadow:0 0 20px rgba(77,232,199,.5),0 0 40px rgba(77,232,199,.3)}.accent-text{color:var(--color-accent)}.crystal-divider{width:100%;height:60px;background:linear-gradient(90deg,transparent 0%,rgba(77,232,199,.3) 25%,rgba(139,125,255,.5) 50%,rgba(77,232,199,.3) 75%,transparent 100%);clip-path:polygon(0 50%,5% 0,95% 0,100% 50%,95% 100%,5% 100%);margin:0 auto}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-20px)}}@keyframes pulse-glow{0%,to{opacity:.6;filter:blur(20px)}50%{opacity:1;filter:blur(30px)}}@keyframes shimmer{0%{background-position:-200% center}to{background-position:200% center}}@keyframes twinkle{0%,to{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.app{min-height:100vh;overflow-x:hidden}.music-toggle{position:fixed;bottom:2rem;right:2rem;z-index:1000;width:50px;height:50px;border-radius:50%;border:2px solid var(--color-primary);background:#0a0f1ce6;color:var(--color-primary);font-size:1.5rem;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;box-shadow:0 0 20px #4de8c74d}.music-toggle:hover{background:#4de8c733;transform:scale(1.1);box-shadow:0 0 30px #4de8c780}section{position:relative}.section-title{font-size:clamp(2rem,5vw,3.5rem);text-align:center;margin-bottom:1rem;background:linear-gradient(135deg,var(--color-primary),var(--color-accent),var(--color-secondary));background-size:200% 200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:shimmer 4s ease infinite}.section-subtitle{text-align:center;color:var(--color-text-muted);font-size:1.1rem;max-width:600px;margin:0 auto 3rem}.splash-screen{position:fixed;inset:0;z-index:9999;background:#000;display:flex;align-items:center;justify-content:center;transition:opacity 1.2s ease,visibility 1.2s ease;overflow:hidden}.splash-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}.splash-overlay{position:absolute;inset:0;background:#0006;display:flex;align-items:center;justify-content:center;z-index:1}.splash-screen.fade-out{opacity:0;visibility:hidden}.splash-content{text-align:center;animation:splashFadeIn 1.5s ease forwards}@keyframes splashFadeIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.splash-logo{margin-bottom:2rem}.splash-icon{font-size:4rem;color:#fff;display:inline-block;animation:splashPulse 2s ease-in-out infinite;text-shadow:0 0 15px rgba(255,255,255,.8),0 0 30px rgba(77,232,199,.5)}@keyframes splashPulse{0%,to{transform:scale(1);opacity:.9}50%{transform:scale(1.15);opacity:1}}.splash-title{font-family:var(--font-display);font-size:clamp(2rem,6vw,4rem);font-weight:700;letter-spacing:.3em;color:#fff;text-shadow:0 0 10px rgba(255,255,255,.6),0 0 20px rgba(139,125,255,.4);margin-bottom:1rem;animation:splashGlow 3s ease-in-out infinite alternate}@keyframes splashGlow{0%{text-shadow:0 0 10px rgba(255,255,255,.6),0 0 20px rgba(139,125,255,.4)}to{text-shadow:0 0 15px rgba(255,255,255,.8),0 0 30px rgba(77,232,199,.5),0 0 40px rgba(139,125,255,.3)}}.splash-subtitle{font-family:var(--font-display);font-size:clamp(1.2rem,3vw,2rem);letter-spacing:.5em;color:#fffc;opacity:0;animation:subtitleFade 1s ease 1s forwards}@keyframes subtitleFade{to{opacity:1}}.splash-hint{position:absolute;bottom:2rem;left:50%;transform:translate(-50%);font-size:.9rem;color:#fff9;z-index:2;opacity:0;animation:hintFade 1s ease 2s forwards;cursor:pointer;padding:.5rem 1rem}@keyframes hintFade{to{opacity:.7}}.play-screen{position:absolute;inset:0;background:radial-gradient(ellipse at center,#0f1628,#080c18,#020408);display:flex;align-items:center;justify-content:center;animation:playScreenIn 1s ease forwards}@keyframes playScreenIn{0%{opacity:0}to{opacity:1}}.play-particles{position:absolute;inset:0;overflow:hidden;pointer-events:none}.play-particle{position:absolute;left:var(--x);top:var(--y);width:var(--size);height:var(--size);background:radial-gradient(circle,rgba(77,232,199,.8),transparent);border-radius:50%;animation:particleFloat var(--dur) ease-in-out var(--delay) infinite}@keyframes particleFloat{0%,to{opacity:0;transform:translateY(0)}20%{opacity:1}80%{opacity:.6}to{opacity:0;transform:translateY(-60px)}}.play-content{text-align:center;z-index:2;animation:playContentIn 1.2s ease .3s both}@keyframes playContentIn{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.play-icon{width:clamp(100px,20vw,180px);height:auto;margin-bottom:1rem;filter:drop-shadow(0 0 25px rgba(77,232,199,.4)) drop-shadow(0 0 50px rgba(168,85,247,.2));animation:iconPulse 3s ease-in-out infinite alternate}@keyframes iconPulse{0%{filter:drop-shadow(0 0 25px rgba(77,232,199,.4)) drop-shadow(0 0 50px rgba(168,85,247,.2));transform:scale(1)}to{filter:drop-shadow(0 0 40px rgba(77,232,199,.6)) drop-shadow(0 0 70px rgba(168,85,247,.3));transform:scale(1.02)}}.play-game-title{font-family:Cinzel,serif;font-size:clamp(3rem,10vw,6rem);font-weight:700;letter-spacing:.2em;color:#fff;margin-bottom:.3rem;text-shadow:0 0 10px rgba(255,255,255,.5),0 2px 20px rgba(77,232,199,.3)}.play-game-subtitle{font-family:Cinzel,serif;font-size:clamp(.9rem,3vw,1.6rem);letter-spacing:.6em;color:gold;margin-bottom:2rem;text-shadow:0 0 15px rgba(255,215,0,.4)}.play-divider{display:flex;align-items:center;justify-content:center;gap:1rem;margin-bottom:2.5rem}.play-divider-line{display:block;width:clamp(40px,10vw,80px);height:1px;background:linear-gradient(90deg,transparent,rgba(77,232,199,.5),transparent)}.play-divider-gem{color:#4de8c7;font-size:.6rem;opacity:.7}.play-button{display:flex;align-items:center;justify-content:center;gap:.8rem;margin:0 auto 2rem;padding:1rem 3.5rem;background:transparent;border:2px solid rgba(77,232,199,.5);border-radius:50px;cursor:pointer;position:relative;overflow:hidden;transition:all .4s ease}.play-button:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#4de8c71a,#a855f714);border-radius:50px;transition:all .4s ease}.play-button:hover{border-color:#4de8c7;transform:scale(1.05);box-shadow:0 0 30px #4de8c74d,0 0 60px #4de8c71a}.play-button:hover:before{background:linear-gradient(135deg,#4de8c733,#a855f726)}.play-button:active{transform:scale(.98)}.play-button-icon{font-size:1.2rem;color:#4de8c7;position:relative;z-index:1;filter:drop-shadow(0 0 8px rgba(77,232,199,.6))}.play-button-text{font-family:Cinzel,serif;font-size:clamp(1rem,3vw,1.4rem);letter-spacing:.3em;color:#fff;font-weight:600;position:relative;z-index:1}.play-credit{font-family:Lora,serif;font-size:.75rem;color:#ffffff40;letter-spacing:.15em}@media(max-width:768px){.play-icon{margin-bottom:.8rem}.play-game-subtitle{letter-spacing:.4em;margin-bottom:1.5rem}.play-divider{margin-bottom:2rem}.play-button{padding:.8rem 2.5rem}}@media(max-width:480px){.play-icon{margin-bottom:.5rem}.play-game-subtitle{letter-spacing:.3em;margin-bottom:1.2rem}.play-button{padding:.7rem 2rem;gap:.5rem}.play-button-icon{font-size:1rem}.play-credit{font-size:.65rem}}.hero{position:relative;min-height:100vh;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}.hero-bg{position:absolute;inset:0;z-index:0}.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center top}.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,#0a0f1c00,#0a0f1c33 40%,#0a0f1cb3,#0a0f1cf2)}.floating-crystals{position:absolute;inset:0;z-index:1;pointer-events:none}.crystal{position:absolute;top:10%;font-size:2rem;color:var(--color-primary);opacity:.6;animation:float 4s ease-in-out infinite;text-shadow:0 0 20px var(--color-primary)}.particles{position:absolute;inset:0;z-index:1;pointer-events:none}.particle{position:absolute;width:4px;height:4px;background:var(--color-primary);border-radius:50%;animation:twinkle 3s ease-in-out infinite}.bubbles{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}.bubble{position:absolute;bottom:-20px;background:radial-gradient(circle at 30% 30%,#4de8c766,#8b7dff33);border-radius:50%;border:1px solid rgba(77,232,199,.3);animation:rise 8s ease-in infinite;box-shadow:inset 0 0 10px #fff3,0 0 8px #4de8c74d}@keyframes rise{0%{bottom:-20px;opacity:0;transform:translate(0) scale(.8)}10%{opacity:.6}50%{opacity:.4}90%{opacity:.2}to{bottom:110%;opacity:0;transform:translate(30px) scale(1)}}.hero-content{position:relative;z-index:2;text-align:center;max-width:900px;padding:2rem 2rem 6rem;opacity:0;transform:translateY(30px);transition:all 1s ease}.hero-content.loaded{opacity:1;transform:translateY(0)}.hero-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1.5rem;background:#4de8c726;border:1px solid rgba(77,232,199,.3);border-radius:50px;font-size:.9rem;color:var(--color-primary);margin-bottom:1.5rem}.badge-icon{animation:twinkle 1.5s ease-in-out infinite}.hero-description{font-size:1.15rem;color:var(--color-text);max-width:700px;margin:0 auto 2rem;line-height:1.8}.hero-actions{display:flex;gap:1.5rem;justify-content:center;flex-wrap:wrap;margin-bottom:2.5rem}.btn{display:inline-flex;align-items:center;justify-content:center;padding:1rem 2.5rem;border-radius:50px;font-family:var(--font-display);font-size:1rem;font-weight:600;text-decoration:none;transition:all .3s ease;position:relative;overflow:hidden}.btn-primary{background:linear-gradient(135deg,var(--color-primary),var(--color-secondary));color:var(--color-dark)}.btn-primary:hover{transform:translateY(-3px);box-shadow:0 15px 40px #4de8c766}.btn-glow{position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transform:translate(-100%)}.btn-primary:hover .btn-glow{animation:btnGlow .6s ease}@keyframes btnGlow{to{transform:translate(100%)}}.btn-secondary{background:transparent;border:2px solid var(--color-primary);color:var(--color-primary)}.btn-secondary:hover{background:#4de8c71a;transform:translateY(-3px)}.hero-platforms{display:flex;flex-direction:column;align-items:center;gap:1rem;color:var(--color-text-muted);font-size:.9rem}.platforms{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}.platform{padding:.5rem 1rem;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:8px;font-size:.85rem}.scroll-indicator{position:absolute;bottom:2rem;left:50%;transform:translate(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:.5rem;color:var(--color-text-muted);font-size:.85rem;animation:float 2s ease-in-out infinite}.scroll-arrow{font-size:1.2rem;animation:bounce 1.5s ease-in-out infinite}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(10px)}}@media(max-width:768px){.hero-description{font-size:1rem}.btn{padding:.875rem 2rem}.hero-content{padding-bottom:5rem}}.about{position:relative;padding:8rem 0;overflow:hidden}.about-bg{position:absolute;inset:0;pointer-events:none}.gradient-orb{position:absolute;border-radius:50%;filter:blur(100px);opacity:.3}.orb-1{width:600px;height:600px;background:var(--color-primary);top:-200px;left:-200px}.orb-2{width:500px;height:500px;background:var(--color-secondary);bottom:-200px;right:-200px}.about .container{position:relative;z-index:1;opacity:0;transform:translateY(50px);transition:all .8s ease}.about .container.visible{opacity:1;transform:translateY(0)}.about-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem;margin-bottom:4rem}.about-card{background:#ffffff08;border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:2.5rem;transition:all .4s ease}.about-card:hover{transform:translateY(-10px);background:#ffffff0d;border-color:#4de8c74d;box-shadow:0 20px 60px #0000004d}.card-icon{font-size:3rem;margin-bottom:1.5rem}.about-card h3{font-size:1.5rem;color:var(--color-primary);margin-bottom:1rem}.about-card p{color:var(--color-text-muted);line-height:1.8}.story-card:hover{border-color:#ffd70080}.hero-card:hover{border-color:#4de8c780}.companion-card:hover{border-color:#8b7dff80}.quest-card:hover{border-color:#ff6b6b80}.story-quote{text-align:center;padding:3rem;background:linear-gradient(135deg,#4de8c71a,#8b7dff1a);border-radius:20px;border:1px solid rgba(77,232,199,.2)}.story-quote blockquote{font-size:1.5rem;font-style:italic;color:var(--color-text);margin-bottom:1rem}.story-quote cite{color:var(--color-accent);font-style:normal}@media(max-width:768px){.about{padding:5rem 0}.about-grid{grid-template-columns:1fr}.about-card{padding:2rem}.story-quote blockquote{font-size:1.2rem}}.features{position:relative;padding:8rem 0;background:linear-gradient(180deg,var(--color-dark) 0%,var(--color-dark-light) 50%,var(--color-dark) 100%)}.features-bg{position:absolute;inset:0;overflow:hidden;opacity:.1}.hex-pattern{position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%234de8c7' fill-opacity='0.4'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")}.features .container{position:relative;z-index:1;opacity:0;transform:translateY(50px);transition:all .8s ease}.features .container.visible{opacity:1;transform:translateY(0)}.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}.feature-card{position:relative;background:#ffffff05;border:1px solid rgba(255,255,255,.08);border-radius:24px;padding:2.5rem;transition:all .4s ease;overflow:hidden}.feature-card:hover{transform:translateY(-10px) scale(1.02);border-color:#4de8c766;background:#4de8c70d}.feature-card:hover .feature-glow{opacity:1}.feature-glow{position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(77,232,199,.1) 0%,transparent 70%);opacity:0;transition:opacity .4s ease;pointer-events:none}.feature-icon{font-size:3.5rem;margin-bottom:1.5rem;display:inline-block}.feature-card h3{font-size:1.4rem;color:var(--color-text);margin-bottom:1rem}.feature-card p{color:var(--color-text-muted);line-height:1.7;margin-bottom:1.5rem}.feature-abilities{display:flex;flex-wrap:wrap;gap:.5rem}.ability-tag{padding:.4rem .8rem;background:#4de8c71a;border:1px solid rgba(77,232,199,.2);border-radius:20px;font-size:.75rem;color:var(--color-primary)}@media(max-width:1024px){.features-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:768px){.features{padding:5rem 0}.features-grid{grid-template-columns:1fr}.feature-card{padding:2rem}}.world{position:relative;padding:8rem 0;overflow:hidden}.world:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(77,232,199,.05) 0%,transparent 70%)}.world .container{position:relative;z-index:1;opacity:0;transform:translateY(50px);transition:all .8s ease}.world .container.visible{opacity:1;transform:translateY(0)}.world-map-cta{text-align:center;margin-bottom:3rem}.explore-map-btn{display:inline-flex;align-items:center;gap:.75rem;padding:1rem 2.5rem;background:linear-gradient(135deg,#4de8c726,#a855f726);border:2px solid rgba(77,232,199,.4);border-radius:50px;color:#fff;font-family:Cinzel,serif;font-size:1.1rem;letter-spacing:1px;cursor:pointer;transition:all .4s ease;position:relative;overflow:hidden}.explore-map-btn:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#4de8c74d,#a855f74d);opacity:0;transition:opacity .4s ease}.explore-map-btn:hover{border-color:#4de8c7;transform:translateY(-3px);box-shadow:0 10px 40px #4de8c733,0 0 20px #4de8c71a}.explore-map-btn:hover:before{opacity:1}.explore-map-icon{font-size:1.4rem;position:relative;z-index:1}.explore-map-btn span:last-child{position:relative;z-index:1}.world-display{display:grid;grid-template-columns:1fr 1.5fr;gap:4rem;align-items:center;margin-bottom:4rem}.region-showcase{position:relative;text-align:center;padding:3rem;background:#ffffff05;border:1px solid rgba(255,255,255,.08);border-radius:30px;overflow:hidden}.showcase-bg{position:absolute;inset:0;transition:background .5s ease}.showcase-icon{font-size:5rem;margin-bottom:1.5rem;position:relative;z-index:1;animation:float 3s ease-in-out infinite}.region-showcase h3{font-size:2rem;margin-bottom:1rem;position:relative;z-index:1;transition:color .3s ease}.region-showcase p{color:var(--color-text-muted);line-height:1.8;position:relative;z-index:1}.regions-map{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}.region-node{position:relative;display:flex;flex-direction:column;align-items:center;gap:.6rem;padding:1.2rem .8rem;background:#ffffff05;border:2px solid rgba(255,255,255,.1);border-radius:16px;cursor:pointer;transition:all .3s ease;overflow:hidden}.region-node:hover,.region-node.active{border-color:var(--region-color);background:#ffffff0d;transform:scale(1.05)}.region-node.active .node-glow{opacity:1}.node-glow{position:absolute;inset:0;background:radial-gradient(circle at center,var(--region-color),transparent 70%);opacity:0;transition:opacity .3s ease;filter:blur(20px)}.node-icon{font-size:2rem;position:relative;z-index:1}.node-name{font-family:var(--font-display);font-size:.75rem;color:var(--color-text);position:relative;z-index:1;text-align:center;line-height:1.3}.world-features{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}.world-feature{text-align:center;padding:2rem;background:#ffffff05;border:1px solid rgba(255,255,255,.08);border-radius:20px;transition:all .3s ease}.world-feature:hover{transform:translateY(-5px);border-color:#4de8c74d}.wf-icon{font-size:2.5rem;margin-bottom:1rem}.world-feature h4{font-size:1.2rem;color:var(--color-primary);margin-bottom:.75rem}.world-feature p{color:var(--color-text-muted);font-size:.95rem}@media(max-width:1024px){.world-display{grid-template-columns:1fr;gap:2rem}.regions-map{grid-template-columns:repeat(4,1fr)}}@media(max-width:768px){.world{padding:5rem 0}.regions-map{grid-template-columns:repeat(2,1fr)}.world-features{grid-template-columns:1fr}.explore-map-btn{font-size:.95rem;padding:.8rem 1.8rem}}.characters{position:relative;padding:8rem 0;background:linear-gradient(180deg,var(--color-dark) 0%,var(--color-dark-light) 100%);overflow:hidden}.characters-bg{position:absolute;inset:0;pointer-events:none}.star-field{position:absolute;inset:0}.star{position:absolute;width:3px;height:3px;background:#fff;border-radius:50%;animation:twinkle 2s ease-in-out infinite}.characters .container{position:relative;z-index:1;opacity:0;transform:translateY(50px);transition:all .8s ease}.characters .container.visible{opacity:1;transform:translateY(0)}.characters-showcase{margin-bottom:5rem}.char-tabs{display:flex;justify-content:center;gap:1rem;margin-bottom:3rem}.char-tab{padding:1rem 2rem;background:transparent;border:2px solid rgba(255,255,255,.1);border-radius:30px;color:var(--color-text-muted);font-family:var(--font-display);font-size:1rem;cursor:pointer;transition:all .3s ease}.char-tab:hover{border-color:#ffffff4d;color:var(--color-text)}.char-tab.active{border-color:var(--char-color);color:var(--char-color);background:#ffffff0d}.char-display{position:relative;display:flex;align-items:center;gap:3rem;padding:3rem;background:#ffffff05;border:1px solid rgba(255,255,255,.08);border-radius:30px;overflow:hidden}.char-glow{position:absolute;inset:0;transition:background .5s ease}.char-avatar{position:relative;z-index:1;width:200px;height:200px;border-radius:50%;border:4px solid;display:flex;align-items:center;justify-content:center;background:#ffffff0d;flex-shrink:0;transition:border-color .3s ease}.avatar-initial{font-family:var(--font-display);font-size:5rem;font-weight:700;color:var(--color-text)}.char-info{position:relative;z-index:1}.char-info h3{font-size:2.5rem;margin-bottom:.5rem;transition:color .3s ease}.char-role{display:inline-block;color:var(--color-text-muted);font-size:1.1rem;margin-bottom:1.5rem}.char-info p{color:var(--color-text-muted);line-height:1.8;margin-bottom:1.5rem;max-width:600px}.char-traits{display:flex;flex-wrap:wrap;gap:.75rem}.trait-tag{padding:.5rem 1rem;border:1px solid;border-radius:20px;font-size:.85rem;transition:all .3s ease}.transformations{text-align:center}.trans-title{font-size:1.8rem;color:var(--color-text);margin-bottom:2rem}.trans-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}.trans-card{position:relative;padding:2.5rem;background:#ffffff05;border:2px solid rgba(255,255,255,.08);border-radius:24px;overflow:hidden;transition:all .4s ease}.trans-card:hover{transform:translateY(-10px) scale(1.02);border-color:var(--trans-color)}.trans-card:hover .trans-glow{opacity:1}.trans-glow{position:absolute;inset:0;background:radial-gradient(circle at center,var(--trans-color),transparent 70%);opacity:0;transition:opacity .4s ease;filter:blur(30px)}.trans-icon{font-size:4rem;margin-bottom:1.5rem;position:relative;z-index:1}.trans-card h4{font-size:1.3rem;color:var(--color-text);margin-bottom:.75rem;position:relative;z-index:1}.trans-card p{color:var(--color-text-muted);font-size:.95rem;position:relative;z-index:1}@media(max-width:1024px){.char-display{flex-direction:column;text-align:center}.char-info p{max-width:100%}.char-traits{justify-content:center}}@media(max-width:768px){.characters{padding:5rem 0}.char-tabs{flex-wrap:wrap}.char-tab{padding:.75rem 1.5rem;font-size:.9rem}.char-avatar{width:150px;height:150px}.avatar-initial{font-size:4rem}.trans-grid{grid-template-columns:1fr}}.footer{position:relative;padding:6rem 0 2rem;overflow:hidden}.footer-bg{position:absolute;inset:0;pointer-events:none}.footer-gradient{position:absolute;top:0;left:50%;transform:translate(-50%);width:100%;height:400px;background:radial-gradient(ellipse at center top,rgba(77,232,199,.1) 0%,transparent 70%)}.footer .container{position:relative;z-index:1}.footer-cta{text-align:center;max-width:700px;margin:0 auto 4rem}.footer-cta h2{font-size:clamp(2rem,5vw,3rem);background:linear-gradient(135deg,var(--color-primary),var(--color-accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:1rem}.footer-cta p{color:var(--color-text-muted);font-size:1.1rem;line-height:1.8;margin-bottom:2rem}.cta-buttons{display:flex;gap:1.5rem;justify-content:center;flex-wrap:wrap}.footer-divider{display:flex;align-items:center;justify-content:center;margin-bottom:4rem}.divider-icon{font-size:1.5rem;color:var(--color-primary);animation:twinkle 2s ease-in-out infinite}.footer-divider:before,.footer-divider:after{content:"";flex:1;max-width:200px;height:1px;background:linear-gradient(90deg,transparent,rgba(77,232,199,.3),transparent);margin:0 1.5rem}.footer-content{display:grid;grid-template-columns:1.5fr 2fr;gap:4rem;margin-bottom:4rem}.footer-brand h3{display:flex;align-items:center;gap:.5rem;font-size:2rem;color:var(--color-accent);margin-bottom:.5rem}.brand-icon{color:var(--color-primary);animation:twinkle 2s ease-in-out infinite}.footer-brand>p{color:var(--color-text-muted);margin-bottom:.5rem}.tagline{font-style:italic;opacity:.8}.footer-links{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}.link-group h4{color:var(--color-text);font-size:1rem;margin-bottom:1.5rem}.link-group a{display:block;color:var(--color-text-muted);text-decoration:none;margin-bottom:.75rem;transition:color .3s ease}.link-group a:hover{color:var(--color-primary)}.footer-legal{display:flex;justify-content:center;align-items:center;gap:1rem;padding:1.5rem 0}.footer-legal a{color:#ffffff80;text-decoration:none;font-size:.85rem;font-family:Lora,serif;transition:color .3s}.footer-legal a:hover{color:#4de8c7}.legal-separator{color:#ffffff26;font-size:.85rem}.footer-bottom{text-align:center;padding-top:2rem;border-top:1px solid rgba(255,255,255,.08)}.footer-bottom p{color:var(--color-text-muted);font-size:.9rem}.rating{margin-top:.5rem;opacity:.7}@media(max-width:1024px){.footer-content{grid-template-columns:1fr;gap:3rem;text-align:center}.footer-brand h3,.footer-links{justify-content:center}}@media(max-width:768px){.footer{padding:4rem 0 2rem}.footer-links{grid-template-columns:1fr;gap:2rem}.cta-buttons{flex-direction:column;align-items:center}}.navigation{position:fixed;top:0;left:0;right:0;z-index:1000;padding:1.5rem 0;transition:all .3s ease}.navigation.scrolled{background:#0a0f1cf2;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);padding:1rem 0;box-shadow:0 4px 30px #00000080}.nav-container{max-width:1400px;margin:0 auto;padding:0 2rem;display:flex;justify-content:space-between;align-items:center}.nav-logo{display:flex;align-items:center;gap:.5rem;text-decoration:none;font-family:var(--font-display);font-size:1.5rem;font-weight:700;color:var(--color-accent)}.logo-icon{font-size:1.8rem;color:var(--color-primary);animation:twinkle 2s ease-in-out infinite}.nav-links{display:flex;align-items:center;gap:2.5rem;list-style:none}.nav-links a{text-decoration:none;color:var(--color-text);font-size:.95rem;font-weight:500;transition:color .3s ease;position:relative}.nav-links a:after{content:"";position:absolute;bottom:-5px;left:0;width:0;height:2px;background:var(--color-primary);transition:width .3s ease}.nav-links a:hover{color:var(--color-primary)}.nav-links a:hover:after{width:100%}.nav-cta{padding:.75rem 1.5rem!important;background:linear-gradient(135deg,var(--color-primary),var(--color-secondary));border-radius:30px;color:var(--color-dark)!important;font-weight:600!important}.nav-cta:after{display:none!important}.nav-cta:hover{transform:translateY(-2px);box-shadow:0 10px 30px #4de8c74d}.nav-login-item{display:flex;align-items:center}.nav-user{display:flex;align-items:center;gap:.6rem}.nav-user-name{color:#4de8c7;font-family:Lora,serif;font-size:.85rem;font-weight:600}.nav-logout-btn{background:none;border:1px solid rgba(255,255,255,.15);color:#ffffff80;font-family:Lora,serif;font-size:.7rem;padding:.25rem .6rem;border-radius:15px;cursor:pointer;transition:all .3s}.nav-logout-btn:hover{border-color:#ffffff4d;color:#fffc}.nav-signin-btn{background:#4de8c71a;border:1px solid rgba(77,232,199,.3);color:#4de8c7;font-family:Cinzel,serif;font-size:.8rem;letter-spacing:.05em;padding:.4rem 1rem;border-radius:20px;cursor:pointer;transition:all .3s}.nav-signin-btn:hover{background:#4de8c733;border-color:#4de8c7}.nav-login-form{display:flex;align-items:center;gap:.4rem}.nav-login-input{background:#ffffff0f;border:1px solid rgba(77,232,199,.3);border-radius:15px;padding:.35rem .8rem;color:#fff;font-family:Lora,serif;font-size:.8rem;outline:none;width:120px;transition:all .3s}.nav-login-input::placeholder{color:#ffffff4d}.nav-login-input:focus{border-color:#4de8c7;background:#4de8c714}.nav-login-btn{background:#4de8c733;border:1px solid rgba(77,232,199,.4);color:#4de8c7;font-family:Cinzel,serif;font-size:.75rem;padding:.35rem .7rem;border-radius:15px;cursor:pointer;transition:all .3s}.nav-login-btn:hover:not(:disabled){background:#4de8c74d}.nav-login-btn:disabled{opacity:.3;cursor:default}.nav-login-cancel{background:none;border:none;color:#fff6;font-size:.9rem;cursor:pointer;padding:.2rem;transition:color .3s}.nav-login-cancel:hover{color:#fffc}.menu-toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:5px}.menu-toggle span{width:25px;height:2px;background:var(--color-text);transition:all .3s ease}@media(max-width:768px){.menu-toggle{display:flex;z-index:1001}.menu-toggle.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}.menu-toggle.open span:nth-child(2){opacity:0}.menu-toggle.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}.nav-links{position:fixed;top:0;right:-100%;width:80%;max-width:300px;height:100vh;background:#0a0f1cfa;flex-direction:column;justify-content:center;gap:2rem;transition:right .3s ease;padding:2rem}.nav-links.open{right:0}}.battle-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}.battle-bg-image{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat;animation:bgSlowZoom 30s ease-in-out infinite alternate}@keyframes bgSlowZoom{0%{transform:scale(1)}to{transform:scale(1.08)}}.battle-bg-image-overlay{position:absolute;inset:0;background:#0a0f1c59}.battle-bg-layer,.battle-bg-particles{position:absolute;inset:0}.battle-bg-vignette{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,15,28,.5) 0%,transparent 15%,transparent 85%,rgba(10,15,28,.5) 100%),radial-gradient(ellipse at center,transparent 40%,rgba(10,15,28,.6) 100%);z-index:1}.bg-particle{position:absolute;border-radius:50%;animation:particleDrift 6s infinite ease-in-out;will-change:transform,opacity}@media(prefers-reduced-motion:reduce){.bg-particle,.battle-bg-layer{animation:none!important}}@keyframes particleDrift{0%,to{transform:translate(0) scale(1)}25%{transform:translate(15px,-20px) scale(1.2)}50%{transform:translate(-10px,-35px) scale(.8)}75%{transform:translate(20px,-15px) scale(1.1)}}.bg-meadows .battle-bg-base{background:linear-gradient(180deg,#0a1a0f,#0d2818,#122e1e 30%,#0f2a1a 50%,#1a3822 65%,#0d2415 85%,#0a1a0f)}.bg-meadows .grass-wave{background:repeating-linear-gradient(85deg,transparent,transparent 40px,rgba(74,222,128,.03) 40px,rgba(74,222,128,.03) 42px),repeating-linear-gradient(95deg,transparent,transparent 60px,rgba(52,211,153,.02) 60px,rgba(52,211,153,.02) 62px);animation:grassSway 8s ease-in-out infinite}@keyframes grassSway{0%,to{transform:skew(0)}50%{transform:skew(1deg)}}.bg-meadows .light-rays{background:conic-gradient(from 200deg at 70% 20%,transparent 0deg,rgba(255,215,0,.03) 15deg,transparent 30deg,rgba(255,215,0,.02) 45deg,transparent 60deg,transparent 360deg);animation:rayRotate 20s linear infinite}@keyframes rayRotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.bg-meadows .pollen{background:radial-gradient(circle at 30% 60%,rgba(74,222,128,.06) 0%,transparent 50%),radial-gradient(circle at 70% 40%,rgba(255,215,0,.04) 0%,transparent 40%);animation:pollenFloat 12s ease-in-out infinite}@keyframes pollenFloat{0%,to{opacity:.6;transform:translateY(0)}50%{opacity:1;transform:translateY(-10px)}}.bg-meadows .petal{background:radial-gradient(circle,#f9a8d4,#f472b6);border-radius:50% 0;animation:petalFall 8s infinite linear}.bg-meadows .firefly{background:gold;box-shadow:0 0 6px gold,0 0 12px #ffd70066;border-radius:50%;animation:fireflyGlow 4s infinite ease-in-out}.bg-meadows .leaf{background:#4ade80;border-radius:50% 0;animation:leafDrift 10s infinite linear}@keyframes petalFall{0%{transform:translateY(-20px) rotate(0);opacity:0}10%{opacity:.7}90%{opacity:.7}to{transform:translate(40px,100vh) rotate(720deg);opacity:0}}@keyframes fireflyGlow{0%,to{opacity:.2;transform:translate(0)}25%{opacity:.9;transform:translate(10px,-15px)}50%{opacity:.3;transform:translate(-5px,-25px)}75%{opacity:.8;transform:translate(15px,-10px)}}@keyframes leafDrift{0%{transform:translateY(-10px) rotate(0);opacity:0}10%{opacity:.5}90%{opacity:.5}to{transform:translate(-30px,100vh) rotate(360deg);opacity:0}}.bg-crystal-peaks .battle-bg-base{background:linear-gradient(180deg,#0a0f2e,#0d1640,#111d52 30%,#0e1a4a 50%,#1a2560 65%,#0d1640 85%,#0a0f2e)}.bg-crystal-peaks .mountain-silhouette{background:linear-gradient(160deg,transparent 40%,rgba(96,165,250,.06) 50%,transparent 60%),linear-gradient(200deg,transparent 45%,rgba(147,197,253,.04) 55%,transparent 65%);clip-path:polygon(0% 100%,15% 55%,25% 70%,40% 35%,55% 60%,65% 25%,80% 50%,100% 100%)}.bg-crystal-peaks .blizzard{background:repeating-linear-gradient(-45deg,transparent,transparent 3px,rgba(200,220,255,.015) 3px,rgba(200,220,255,.015) 4px);animation:blizzardMove 3s linear infinite}@keyframes blizzardMove{0%{transform:translate(0)}to{transform:translate(-50px,50px)}}.bg-crystal-peaks .aurora{background:linear-gradient(90deg,transparent 0%,rgba(96,165,250,.06) 20%,rgba(168,85,247,.05) 40%,rgba(77,232,199,.04) 60%,rgba(96,165,250,.06) 80%,transparent 100%);height:30%;top:5%;animation:auroraPulse 10s ease-in-out infinite}@keyframes auroraPulse{0%,to{opacity:.4;transform:scaleY(1) translate(0)}33%{opacity:.8;transform:scaleY(1.3) translate(5%)}66%{opacity:.5;transform:scaleY(.8) translate(-3%)}}.bg-crystal-peaks .snowflake{background:#fff;border-radius:50%;animation:snowfall 7s infinite linear}.bg-crystal-peaks .ice-shard{background:linear-gradient(135deg,#93c5fd,#60a5fa);clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%);animation:iceShimmer 5s infinite ease-in-out}.bg-crystal-peaks .frost{background:#c8dcff99;border-radius:50%;box-shadow:0 0 4px #93c5fd80;animation:frostSparkle 4s infinite ease-in-out}@keyframes snowfall{0%{transform:translateY(-20px) rotate(0);opacity:0}10%{opacity:.6}90%{opacity:.4}to{transform:translate(20px,100vh) rotate(360deg);opacity:0}}@keyframes iceShimmer{0%,to{opacity:.2;transform:rotate(0) scale(1)}50%{opacity:.7;transform:rotate(180deg) scale(1.3)}}@keyframes frostSparkle{0%,to{opacity:.1;transform:scale(.5)}50%{opacity:.8;transform:scale(1.5)}}.bg-swamp .battle-bg-base{background:linear-gradient(180deg,#0a1a12,#0d2218,#0f2a1e 30%,#0b1f15 50%,#112a1c 65%,#0d2218 85%,#0a1a12)}.bg-swamp .fog-layer{background:radial-gradient(ellipse at 20% 50%,rgba(52,211,153,.08) 0%,transparent 50%),radial-gradient(ellipse at 80% 40%,rgba(52,211,153,.06) 0%,transparent 40%),radial-gradient(ellipse at 50% 70%,rgba(74,222,128,.05) 0%,transparent 45%);animation:fogDrift 15s ease-in-out infinite}@keyframes fogDrift{0%,to{transform:translate(0);opacity:.6}50%{transform:translate(3%);opacity:.9}}.bg-swamp .water-ripple{background:radial-gradient(circle at 40% 65%,rgba(52,211,153,.04) 0%,transparent 20%),radial-gradient(circle at 60% 55%,rgba(52,211,153,.03) 0%,transparent 25%);animation:rippleExpand 6s ease-in-out infinite}@keyframes rippleExpand{0%,to{transform:scale(1);opacity:.5}50%{transform:scale(1.1);opacity:.8}}.bg-swamp .bioluminescence{background:radial-gradient(circle at 25% 45%,rgba(52,211,153,.1) 0%,transparent 10%),radial-gradient(circle at 65% 35%,rgba(74,222,128,.08) 0%,transparent 8%),radial-gradient(circle at 45% 75%,rgba(110,231,183,.07) 0%,transparent 12%),radial-gradient(circle at 85% 65%,rgba(52,211,153,.06) 0%,transparent 9%);animation:bioGlow 4s ease-in-out infinite alternate}@keyframes bioGlow{0%{opacity:.3}to{opacity:1}}.bg-swamp .bubble{background:#6ee7b766;border:1px solid rgba(110,231,183,.3);border-radius:50%;animation:bubbleRise 6s infinite ease-in}.bg-swamp .wisp{background:#34d399;border-radius:50%;box-shadow:0 0 8px #34d399,0 0 16px #34d3994d;animation:wispFloat 8s infinite ease-in-out}.bg-swamp .spore{background:#a7f3d080;border-radius:50%;animation:sporeDrift 10s infinite linear}@keyframes bubbleRise{0%{transform:translateY(20px) scale(.5);opacity:0}20%{opacity:.5}80%{opacity:.3}to{transform:translateY(-100vh) scale(1.2);opacity:0}}@keyframes wispFloat{0%,to{transform:translate(0);opacity:.2}25%{transform:translate(20px,-30px);opacity:.7}50%{transform:translate(-15px,-50px);opacity:.4}75%{transform:translate(25px,-20px);opacity:.8}}@keyframes sporeDrift{0%{transform:translate(0) scale(1);opacity:0}20%{opacity:.4}80%{opacity:.3}to{transform:translate(30px,-80vh) scale(.5);opacity:0}}.bg-inferno .battle-bg-base{background:linear-gradient(180deg,#1a0a0a,#2d0d0d,#3d1111 30%,#4a1515 50%,#3d1111 65%,#2d0d0d 85%,#1a0a0a)}.bg-inferno .lava-flow{background:linear-gradient(180deg,transparent 60%,rgba(249,115,22,.06) 70%,rgba(239,68,68,.08) 80%,rgba(249,115,22,.1) 90%,rgba(239,68,68,.06) 100%);animation:lavaGlow 4s ease-in-out infinite alternate}@keyframes lavaGlow{0%{opacity:.5}to{opacity:1}}.bg-inferno .heat-haze{background:repeating-linear-gradient(0deg,transparent,transparent 8px,rgba(249,115,22,.02) 8px,rgba(249,115,22,.02) 10px);animation:heatHaze 3s ease-in-out infinite}@keyframes heatHaze{0%,to{transform:translate(0) scaleY(1)}50%{transform:translate(2px) scaleY(1.01)}}.bg-inferno .fire-glow{background:radial-gradient(circle at 30% 80%,rgba(249,115,22,.12) 0%,transparent 30%),radial-gradient(circle at 70% 85%,rgba(239,68,68,.1) 0%,transparent 25%),radial-gradient(circle at 50% 75%,rgba(251,191,36,.06) 0%,transparent 35%);animation:fireFlicker 2s ease-in-out infinite alternate}@keyframes fireFlicker{0%{opacity:.5;transform:scaleY(.98)}to{opacity:1;transform:scaleY(1.02)}}.bg-inferno .ember{background:#f97316;border-radius:50%;box-shadow:0 0 4px #f97316,0 0 8px #f9731680;animation:emberRise 5s infinite ease-out}.bg-inferno .ash{background:#b4a08c66;border-radius:50%;animation:ashFloat 8s infinite linear}.bg-inferno .spark{background:#fbbf24;box-shadow:0 0 3px #fbbf24;border-radius:50%;animation:sparkBurst 3s infinite ease-out}@keyframes emberRise{0%{transform:translateY(20px);opacity:0}20%{opacity:.9}to{transform:translateY(-100vh) translate(30px);opacity:0}}@keyframes ashFloat{0%{transform:translate(0) rotate(0);opacity:0}15%{opacity:.4}85%{opacity:.3}to{transform:translate(-20px,-60vh) rotate(180deg);opacity:0}}@keyframes sparkBurst{0%{transform:scale(0);opacity:0}20%{transform:scale(2);opacity:1}to{transform:scale(0) translateY(-40px);opacity:0}}.bg-abyss .battle-bg-base{background:linear-gradient(180deg,#050a1a,#081030,#0a1540 30%,#0c1a50 50%,#0a1540 65%,#081030 85%,#050a1a)}.bg-abyss .ocean-current{background:linear-gradient(170deg,transparent 30%,rgba(56,189,248,.03) 40%,transparent 50%),linear-gradient(190deg,transparent 50%,rgba(56,189,248,.02) 60%,transparent 70%);animation:currentFlow 12s ease-in-out infinite}@keyframes currentFlow{0%,to{transform:translate(0) skew(0)}50%{transform:translate(3%) skew(1deg)}}.bg-abyss .depth-fog{background:radial-gradient(ellipse at 50% 80%,rgba(56,189,248,.06) 0%,transparent 50%),radial-gradient(ellipse at 30% 30%,rgba(59,130,246,.04) 0%,transparent 40%);animation:depthPulse 8s ease-in-out infinite}@keyframes depthPulse{0%,to{opacity:.4}50%{opacity:.8}}.bg-abyss .coral-glow{background:radial-gradient(circle at 20% 90%,rgba(251,113,133,.06) 0%,transparent 15%),radial-gradient(circle at 60% 85%,rgba(56,189,248,.05) 0%,transparent 12%),radial-gradient(circle at 80% 95%,rgba(168,85,247,.04) 0%,transparent 10%);animation:coralPulse 6s ease-in-out infinite alternate}@keyframes coralPulse{0%{opacity:.3}to{opacity:.8}}.bg-abyss .bubble-deep{background:#38bdf84d;border:1px solid rgba(56,189,248,.2);border-radius:50%;animation:deepBubble 9s infinite ease-in}.bg-abyss .jellyfish{background:radial-gradient(circle,#a855f780,#a855f71a);border-radius:50% 50% 30% 30%;animation:jellyPulse 6s infinite ease-in-out}.bg-abyss .plankton{background:#38bdf899;border-radius:50%;box-shadow:0 0 4px #38bdf866;animation:planktonDrift 10s infinite linear}@keyframes deepBubble{0%{transform:translateY(10px) scale(.3);opacity:0}20%{opacity:.4}to{transform:translateY(-100vh) scale(1.5);opacity:0}}@keyframes jellyPulse{0%,to{transform:translateY(0) scaleY(1);opacity:.3}25%{transform:translateY(-20px) scaleY(.9);opacity:.6}50%{transform:translateY(-30px) scaleY(1.1);opacity:.4}75%{transform:translateY(-15px) scaleY(.95);opacity:.5}}@keyframes planktonDrift{0%{transform:translate(0);opacity:0}20%{opacity:.5}80%{opacity:.3}to{transform:translate(30px,-50vh);opacity:0}}.bg-enchanted .battle-bg-base{background:linear-gradient(180deg,#0f0a1f,#150d2d,#1a1038 30%,#1e1340 50%,#1a1038 65%,#150d2d 85%,#0f0a1f)}.bg-enchanted .tree-canopy{background:radial-gradient(ellipse at 15% 20%,rgba(168,85,247,.05) 0%,transparent 25%),radial-gradient(ellipse at 85% 15%,rgba(168,85,247,.04) 0%,transparent 20%),radial-gradient(ellipse at 50% 10%,rgba(139,92,246,.03) 0%,transparent 30%)}.bg-enchanted .magic-streams{background:conic-gradient(from 0deg at 30% 50%,transparent,rgba(168,85,247,.04),transparent,rgba(139,92,246,.03),transparent),conic-gradient(from 180deg at 70% 50%,transparent,rgba(168,85,247,.03),transparent,rgba(192,132,252,.02),transparent);animation:magicSwirl 20s linear infinite}@keyframes magicSwirl{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.bg-enchanted .temporal-shift{background:linear-gradient(90deg,transparent 0%,rgba(168,85,247,.03) 20%,rgba(139,92,246,.05) 50%,rgba(168,85,247,.03) 80%,transparent 100%);animation:timeShift 6s ease-in-out infinite}@keyframes timeShift{0%,to{opacity:.3;transform:scaleX(1)}50%{opacity:.7;transform:scaleX(1.05)}}.bg-enchanted .magic-mote{background:#a855f7;border-radius:50%;box-shadow:0 0 6px #a855f7,0 0 12px #a855f766;animation:moteDance 6s infinite ease-in-out}.bg-enchanted .rune{background:#c084fc80;clip-path:polygon(50% 0%,100% 38%,82% 100%,18% 100%,0% 38%);animation:runeGlow 5s infinite ease-in-out}.bg-enchanted .time-fragment{background:linear-gradient(135deg,#a855f799,#8b5cf64d);clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%);animation:fragmentPhase 4s infinite ease-in-out}@keyframes moteDance{0%,to{transform:translate(0) scale(1);opacity:.3}33%{transform:translate(20px,-25px) scale(1.5);opacity:.8}66%{transform:translate(-15px,-40px) scale(.7);opacity:.5}}@keyframes runeGlow{0%,to{opacity:.1;transform:rotate(0) scale(.8)}50%{opacity:.6;transform:rotate(72deg) scale(1.3)}}@keyframes fragmentPhase{0%,to{opacity:0;transform:scale(0) rotate(0)}50%{opacity:.7;transform:scale(1.5) rotate(180deg)}}.bg-archipelago .battle-bg-base{background:linear-gradient(180deg,#0d1530,#132050,#1a2d6a 30%,#1e3578 50%,#1a2d6a 65%,#132050 85%,#0d1530)}.bg-archipelago .floating-islands{background:radial-gradient(ellipse at 20% 40%,rgba(251,191,36,.04) 0%,transparent 15%),radial-gradient(ellipse at 75% 30%,rgba(251,191,36,.03) 0%,transparent 12%),radial-gradient(ellipse at 50% 55%,rgba(251,191,36,.03) 0%,transparent 18%);animation:islandFloat 10s ease-in-out infinite}@keyframes islandFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.bg-archipelago .wind-streams{background:repeating-linear-gradient(-15deg,transparent,transparent 20px,rgba(251,191,36,.015) 20px,rgba(251,191,36,.015) 22px);animation:windFlow 5s linear infinite}@keyframes windFlow{0%{transform:translate(-40px)}to{transform:translate(40px)}}.bg-archipelago .sky-gradient{background:radial-gradient(ellipse at 50% 30%,rgba(251,191,36,.06) 0%,transparent 50%),radial-gradient(ellipse at 50% 70%,rgba(96,165,250,.04) 0%,transparent 40%);animation:skyBreathe 8s ease-in-out infinite}@keyframes skyBreathe{0%,to{opacity:.4}50%{opacity:.8}}.bg-archipelago .cloud-puff{background:#ffffff26;border-radius:50%;filter:blur(2px);animation:cloudDrift 12s infinite linear}.bg-archipelago .feather{background:#fbbf2480;border-radius:50% 0;animation:featherFloat 9s infinite ease-in-out}.bg-archipelago .light-bridge{background:linear-gradient(90deg,transparent,rgba(251,191,36,.4),transparent);height:1px!important;width:20px!important;border-radius:0;animation:bridgeShimmer 4s infinite ease-in-out}@keyframes cloudDrift{0%{transform:translate(-50px);opacity:0}20%{opacity:.3}80%{opacity:.2}to{transform:translate(100vw);opacity:0}}@keyframes featherFloat{0%,to{transform:translate(0) rotate(0);opacity:.2}50%{transform:translate(30px,-40px) rotate(180deg);opacity:.6}}@keyframes bridgeShimmer{0%,to{opacity:0;transform:scaleX(.5)}50%{opacity:.8;transform:scaleX(3)}}.bg-citadel .battle-bg-base{background:linear-gradient(180deg,#050508,#0a0a12,#0e0e1a 30%,#121220 50%,#0e0e1a 65%,#0a0a12 85%,#050508)}.bg-citadel .dark-pillars{background:linear-gradient(90deg,transparent 10%,rgba(100,100,120,.03) 12%,rgba(100,100,120,.03) 13%,transparent 15%),linear-gradient(90deg,transparent 30%,rgba(100,100,120,.02) 32%,rgba(100,100,120,.02) 33%,transparent 35%),linear-gradient(90deg,transparent 55%,rgba(100,100,120,.03) 57%,rgba(100,100,120,.03) 58%,transparent 60%),linear-gradient(90deg,transparent 75%,rgba(100,100,120,.02) 77%,rgba(100,100,120,.02) 78%,transparent 80%)}.bg-citadel .shadow-pulse{background:radial-gradient(circle at 50% 50%,rgba(239,68,68,.04) 0%,transparent 30%),radial-gradient(circle at 50% 50%,rgba(168,85,247,.03) 0%,transparent 50%);animation:shadowPulse 3s ease-in-out infinite}@keyframes shadowPulse{0%,to{transform:scale(1);opacity:.3}50%{transform:scale(1.2);opacity:.8}}.bg-citadel .throne-glow{background:radial-gradient(circle at 50% 30%,rgba(239,68,68,.08) 0%,transparent 20%),conic-gradient(from 0deg at 50% 30%,transparent,rgba(239,68,68,.03),transparent,rgba(168,85,247,.02),transparent);animation:throneFlare 8s linear infinite}@keyframes throneFlare{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.bg-citadel .shadow-wisp{background:#64647880;border-radius:50%;box-shadow:0 0 8px #6464784d;animation:shadowWisp 7s infinite ease-in-out}.bg-citadel .dark-shard{background:linear-gradient(135deg,#ef444480,#a855f74d);clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%);animation:darkShardFloat 5s infinite ease-in-out}.bg-citadel .void-crack{background:linear-gradient(180deg,rgba(239,68,68,.4),transparent);width:1px!important;height:15px!important;border-radius:0;animation:voidCrack 4s infinite ease-out}@keyframes shadowWisp{0%,to{transform:translate(0) scale(1);opacity:.1}50%{transform:translate(-20px,-30px) scale(2);opacity:.4}}@keyframes darkShardFloat{0%,to{transform:rotate(0) translateY(0);opacity:.2}50%{transform:rotate(180deg) translateY(-20px);opacity:.6}}@keyframes voidCrack{0%{transform:scaleY(0);opacity:0}30%{transform:scaleY(1);opacity:.8}to{transform:scaleY(0);opacity:0}}.card-game-overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:10000;background:#0a0f1c;display:flex;align-items:center;justify-content:center;overflow:hidden}.card-game-menu{display:flex;flex-direction:column;align-items:center;gap:1.5rem;position:relative;padding:1rem}.menu-particles{position:fixed;inset:0;pointer-events:none}.menu-particle{position:absolute;width:4px;height:4px;background:#4de8c7;border-radius:50%;animation:floatParticle 5s infinite ease-in-out;opacity:.6}.menu-particle:nth-child(odd){background:#a855f7}.menu-particle:nth-child(3n){background:gold}@keyframes floatParticle{0%,to{transform:translateY(0) scale(1);opacity:.3}50%{transform:translateY(-30px) scale(1.5);opacity:.8}}.menu-display-card{width:180px;height:260px;border-radius:12px;overflow:hidden;animation:cardFloat 3s ease-in-out infinite,cardGlow 2s ease-in-out infinite alternate}.card-back-img{width:100%;height:100%;object-fit:cover;border-radius:12px;display:block}.card-back-img-mini{width:100%;height:100%;object-fit:cover;border-radius:5px;display:block}@keyframes cardFloat{0%,to{transform:translateY(0) rotateY(0)}25%{transform:translateY(-10px) rotateY(5deg)}75%{transform:translateY(-5px) rotateY(-5deg)}}@keyframes cardGlow{0%{filter:drop-shadow(0 0 10px rgba(77,232,199,.3))}to{filter:drop-shadow(0 0 25px rgba(77,232,199,.6))}}.card-back{background:linear-gradient(135deg,#1a1a3e,#0d0d2b);border-radius:12px;border:2px solid #4de8c7;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.card-back:before{content:"";position:absolute;inset:4px;border:1px solid rgba(77,232,199,.3);border-radius:8px}.card-back:after{content:"";position:absolute;inset:0;background:repeating-conic-gradient(from 0deg,rgba(77,232,199,.05) 0deg 30deg,transparent 30deg 60deg)}.card-back-inner{position:relative;z-index:1;text-align:center}.card-back-border{display:flex;flex-direction:column;align-items:center;gap:.5rem}.card-back-symbol{font-family:Cinzel,serif;font-size:3rem;font-weight:900;color:#4de8c7;text-shadow:0 0 20px rgba(77,232,199,.5)}.card-back-symbol.small{font-size:.8rem}.card-back-title{font-family:Cinzel,serif;font-size:1rem;letter-spacing:.3em;color:gold;text-shadow:0 0 10px rgba(255,215,0,.3)}.card-back-subtitle{font-size:.6rem;letter-spacing:.2em;color:#4de8c7b3;text-transform:uppercase}.card-back-ornament{font-size:.7rem;color:#ffd70080;letter-spacing:.5em;margin-top:.25rem}.card-back.mini{width:44px;height:62px;border-radius:5px;border-width:1px}.menu-title{font-family:Cinzel,serif;font-size:2.2rem;background:linear-gradient(to right,#4de8c7,gold,#a855f7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-align:center;line-height:1.2}.menu-subtitle{color:#fff9;font-family:Lora,serif;font-size:1rem;text-align:center}.menu-flavor{color:#ffffff59;font-family:Lora,serif;font-size:.75rem;font-style:italic;text-align:center}.menu-play-btn{position:relative;padding:.8rem 2.5rem;background:linear-gradient(135deg,#4de8c7,#3bc4a8);border:none;border-radius:50px;color:#0a0f1c;font-family:Cinzel,serif;font-size:1.1rem;font-weight:700;cursor:pointer;overflow:hidden;transition:transform .3s,box-shadow .3s}.menu-play-btn:hover{transform:scale(1.05);box-shadow:0 0 30px #4de8c780}.btn-shimmer{position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:shimmer 2s infinite}@keyframes shimmer{0%{left:-100%}to{left:100%}}.menu-close-btn{background:none;border:1px solid rgba(255,255,255,.2);color:#fff9;padding:.5rem 1.5rem;border-radius:50px;font-family:Lora,serif;font-size:.85rem;cursor:pointer;transition:all .3s}.menu-close-btn:hover{border-color:#4de8c7;color:#4de8c7}.hero-select-screen{display:flex;flex-direction:column;align-items:center;gap:1.5rem;padding:1.5rem;max-height:100vh;overflow-y:auto;width:100%;max-width:900px}.map-screen{display:flex;flex-direction:column;align-items:center;gap:1.5rem;padding:2rem 1.5rem;max-height:100vh;overflow-y:auto;width:100%;max-width:900px;background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(139,119,80,.04) 3px,rgba(139,119,80,.04) 4px),repeating-linear-gradient(90deg,transparent,transparent 3px,rgba(139,119,80,.04) 3px,rgba(139,119,80,.04) 4px),radial-gradient(ellipse at center,#a0825026,#644b281a 60%,#281e0f33),linear-gradient(135deg,#2a2115,#1e1a10,#2a2115);border:3px solid rgba(139,119,80,.35);border-radius:8px;box-shadow:inset 0 0 60px #0006,0 4px 20px #00000080;position:relative}.map-btn{background:#8b775026;border:1px solid rgba(196,165,90,.35);color:#c4a55acc;padding:.5rem 1.5rem;border-radius:4px;font-family:Cinzel,serif;font-size:.85rem;cursor:pointer;transition:all .3s;letter-spacing:1px}.map-btn:hover{border-color:#c4a55a;color:#c4a55a;background:#c4a55a33}.select-title{font-family:Cinzel,serif;font-size:1.8rem;background:linear-gradient(to right,#4de8c7,gold);-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-align:center}.select-subtitle{color:#ffffff80;font-family:Lora,serif;font-size:.9rem;text-align:center}.hero-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;width:100%}.hero-select-card{background:linear-gradient(135deg,#141925,#1a2035);border:2px solid rgba(255,255,255,.1);border-radius:12px;padding:1.2rem;cursor:pointer;transition:all .3s;text-align:center;display:flex;flex-direction:column;align-items:center;gap:.4rem}.hero-select-card:hover{border-color:var(--hero-color);transform:translateY(-5px);box-shadow:0 10px 30px #0000004d,0 0 15px var(--hero-color)}.hero-select-card.selected{border-color:var(--hero-color);box-shadow:0 0 25px var(--hero-color),inset 0 0 30px #0000004d;background:linear-gradient(135deg,#1a2540,#202a45)}.hero-select-symbol{font-size:2.5rem;margin-bottom:.25rem}.hero-select-card h3{font-family:Cinzel,serif;color:var(--hero-color);font-size:1.1rem;margin:0}.hero-select-title{font-size:.7rem;color:#ffffff80;text-transform:uppercase;letter-spacing:.1em}.hero-select-desc{font-size:.7rem;color:#fff9;font-family:Lora,serif;line-height:1.4}.hero-select-stats{display:flex;gap:1rem;font-size:.65rem;color:#ffffffb3;font-weight:600}.hero-ability-desc{font-size:.6rem;color:var(--hero-color);font-style:italic;opacity:.8}.map-title{font-family:Cinzel,serif;font-size:1.8rem;color:#c4a55a;text-shadow:0 1px 3px rgba(0,0,0,.6),0 0 12px rgba(196,165,90,.2);text-align:center;letter-spacing:2px}.map-subtitle{color:#c4a55a99;font-family:Lora,serif;font-size:.9rem;font-style:italic;text-align:center}.region-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.8rem;width:100%}.region-card{background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(139,119,80,.03) 2px,rgba(139,119,80,.03) 3px),linear-gradient(135deg,#50412366,#3c321980);border:1px solid rgba(139,119,80,.3);border-radius:4px;padding:1rem;cursor:pointer;transition:all .3s;position:relative;overflow:hidden}.region-card.available:hover{border-color:var(--region-color);transform:translateY(-3px);box-shadow:0 8px 25px #0000004d,0 0 10px var(--region-color),inset 0 0 20px #c4a55a0d}.region-card.cleared{border-color:#4de8c759;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(77,232,199,.02) 2px,rgba(77,232,199,.02) 3px),linear-gradient(135deg,#1e3c3266,#142d2380)}.region-card.locked{opacity:.35;cursor:not-allowed;filter:grayscale(.7)}.region-number{position:absolute;top:.5rem;left:.5rem;width:22px;height:22px;background:var(--region-color);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.65rem;font-weight:900;color:#1a1508;box-shadow:0 0 6px #0006}.region-boss-symbol{font-size:1.8rem;text-align:center;margin:.3rem 0;filter:drop-shadow(0 0 3px rgba(196,165,90,.3))}.region-card h4{font-family:Cinzel,serif;font-size:.8rem;color:var(--region-color);margin:.2rem 0;text-align:center}.region-card-desc{font-size:.55rem;color:#c4a55a8c;font-family:Lora,serif;font-style:italic;line-height:1.3;text-align:center}.region-boss-info{display:flex;flex-direction:column;align-items:center;gap:.15rem;margin-top:.3rem;font-size:.6rem;color:#c4a55a99}.region-boss-name{font-family:Cinzel,serif;font-weight:600;color:var(--region-color)}.cleared-badge{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-15deg);background:#4de8c726;border:1px solid #4de8c7;padding:.3rem .8rem;border-radius:4px;font-family:Cinzel,serif;font-size:.7rem;color:#4de8c7;font-weight:700;letter-spacing:.05em}.locked-badge{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:Cinzel,serif;font-size:.8rem;color:#ffffff4d;letter-spacing:.1em}.map-progress{display:flex;flex-direction:column;align-items:center;gap:.5rem;width:100%;max-width:400px}.progress-bar{width:100%;height:8px;background:#8b775033;border:1px solid rgba(139,119,80,.25);border-radius:4px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,#4de8c7,#c4a55a);border-radius:4px;transition:width .5s ease}.map-progress span{font-size:.75rem;color:#c4a55a99;font-family:Cinzel,serif}.card-game-board{width:100%;height:100%;background:transparent;display:flex;flex-direction:column;position:relative;overflow:hidden}.card-game-board>*:not(.battle-bg){position:relative;z-index:2}.story-banner{position:absolute;top:0;left:0;right:0;z-index:200;background:#000000eb;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:.75rem;cursor:pointer;padding:1.5rem 2rem;animation:fadeIn .5s ease}.story-banner p{font-family:Lora,serif;font-size:1.1rem;color:#fffc;text-align:center;max-width:500px;line-height:1.6}.story-dismiss{font-size:.7rem;color:#ffffff4d;animation:pulse 2s infinite}.game-close-btn{position:absolute;top:8px;right:8px;z-index:100;width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:#00000080;color:#fff;font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s}.game-close-btn:hover{border-color:#f43f5e;color:#f43f5e}.boss-area,.player-hero-area{display:flex;align-items:center;gap:.75rem;padding:.5rem .75rem;position:relative;transition:all .3s;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.boss-area{background:linear-gradient(180deg,#a855f71f,#a855f705);border-bottom:1px solid rgba(168,85,247,.15)}.player-hero-area{background:linear-gradient(0deg,#4de8c71f,#4de8c705);border-top:1px solid rgba(77,232,199,.15)}.damage-flash{animation:damageFlash .5s ease-out}@keyframes damageFlash{0%{background-color:transparent;box-shadow:none}30%{background-color:#f43f5e59;box-shadow:inset 0 0 30px #f43f5e4d}to{background-color:transparent;box-shadow:none}}.hero-portrait{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:linear-gradient(135deg,#141928e6,#1e2337e6);border:2px solid;position:relative}.hero-portrait:after{content:"";position:absolute;inset:-3px;border-radius:50%;border:1px solid;border-color:inherit;opacity:.3;animation:portraitRing 3s ease-in-out infinite}@keyframes portraitRing{0%,to{transform:scale(1);opacity:.2}50%{transform:scale(1.08);opacity:.5}}.boss-portrait{border-color:var(--region-accent, #a855f7);box-shadow:0 0 12px var(--region-accent, rgba(168, 85, 247, .3)),inset 0 0 8px #a855f71a}.player-portrait{border-color:#4de8c7;background:linear-gradient(135deg,#4de8c71f,#2dd4aa1f);box-shadow:0 0 12px #4de8c74d,inset 0 0 8px #4de8c71a}.portrait-letter{font-size:1.4rem;filter:drop-shadow(0 0 4px currentColor)}.hero-stats{flex:1;min-width:0}.hero-name{font-family:Cinzel,serif;font-size:.85rem;color:#fff;font-weight:700;text-shadow:0 0 6px rgba(255,255,255,.3);letter-spacing:.5px}.health-bar{height:28px;background:linear-gradient(180deg,#00000080,#000000b3);border-radius:14px;position:relative;overflow:hidden;margin:4px 0;border:2px solid rgba(255,255,255,.18);box-shadow:inset 0 2px 6px #0009,0 2px 8px #0006,0 0 12px #0000004d}.health-fill{height:100%;border-radius:12px;transition:width .5s ease;position:relative;overflow:hidden}.health-fill:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.45) 0%,rgba(255,255,255,.15) 25%,transparent 50%,rgba(0,0,0,.1) 75%,rgba(0,0,0,.2) 100%);border-radius:12px;z-index:1}.health-fill:after{content:"";position:absolute;top:0;left:-100%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),rgba(255,255,255,.1),transparent);animation:healthShimmer 2.5s infinite ease-in-out;z-index:2}@keyframes healthShimmer{0%{left:-50%}60%{left:110%}to{left:110%}}.player-health{background:linear-gradient(90deg,#1f9a7a,#3bcfaa,#5eecd0,#7af8e4,#5eecd0,#3bcfaa);background-size:300% 100%;box-shadow:0 0 20px #4de8c799,0 0 40px #4de8c740,inset 0 2px 4px #ffffff59,inset 0 -2px 4px #0003;animation:healthPulsePlayer 3s ease-in-out infinite;border-right:2px solid rgba(180,255,240,.7)}@keyframes healthPulsePlayer{0%,to{background-position:0% 50%;box-shadow:0 0 20px #4de8c780,0 0 40px #4de8c733,inset 0 2px 4px #ffffff59,inset 0 -2px 4px #0003}50%{background-position:100% 50%;box-shadow:0 0 28px #4de8c7b3,0 0 50px #4de8c759,inset 0 2px 4px #fff6,inset 0 -2px 4px #0003}}.boss-health-fill{box-shadow:0 0 20px #a855f780,0 0 40px #a855f733,inset 0 2px 4px #ffffff59,inset 0 -2px 4px #0003;animation:healthPulseBoss 3s ease-in-out infinite;border-right:2px solid rgba(210,160,255,.7)}@keyframes healthPulseBoss{0%,to{box-shadow:0 0 20px #a855f780,0 0 40px #a855f733,inset 0 2px 4px #ffffff59,inset 0 -2px 4px #0003}50%{box-shadow:0 0 28px #a855f7b3,0 0 50px #a855f759,inset 0 2px 4px #fff6,inset 0 -2px 4px #0003}}.health-text{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:900;font-family:Cinzel,serif;color:#fff;text-shadow:0 0 10px rgba(255,255,255,.8),0 0 20px rgba(77,232,199,.6),0 0 30px rgba(77,232,199,.3),0 2px 4px rgba(0,0,0,1);letter-spacing:1.5px;z-index:2}.boss-health-text{text-shadow:0 0 10px rgba(255,255,255,.8),0 0 20px rgba(168,85,247,.6),0 0 30px rgba(168,85,247,.3),0 2px 4px rgba(0,0,0,1)}.mana-display{font-size:.75rem;color:#60a5fa;font-weight:700;text-shadow:0 0 8px rgba(96,165,250,.4)}.mana-icon{color:#60a5fa}.boss-region-tag{font-size:.6rem;color:var(--region-accent, rgba(255,255,255,.4));font-family:Cinzel,serif;letter-spacing:.05em}.battle-chat{position:absolute;left:6px;top:50%;transform:translateY(-50%);width:160px;max-height:260px;overflow-y:auto;overflow-x:hidden;border-radius:10px;background:linear-gradient(180deg,#000000b3,#0000008c);border:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 0 20px #00000080,inset 0 1px #ffffff14;z-index:5;display:flex;flex-direction:column;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.15) transparent}.battle-chat::-webkit-scrollbar{width:3px}.battle-chat::-webkit-scrollbar-track{background:transparent}.battle-chat::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:3px}.chat-header{font-family:Cinzel,serif;font-size:.55rem;color:#fff6;text-align:center;padding:.3rem .4rem .15rem;letter-spacing:1px;text-transform:uppercase;border-bottom:1px solid rgba(255,255,255,.06);flex-shrink:0}.chat-msg{padding:.3rem .5rem;border-bottom:1px solid rgba(255,255,255,.04);animation:chatSlideIn .4s ease-out}.chat-msg:last-child{border-bottom:none}.chat-msg.hero{background:linear-gradient(90deg,rgba(77,232,199,.08),transparent);border-left:2px solid rgba(77,232,199,.5)}.chat-msg.boss{background:linear-gradient(90deg,rgba(168,85,247,.08),transparent);border-left:2px solid rgba(168,85,247,.5)}.chat-speaker{display:block;font-family:Cinzel,serif;font-size:.55rem;font-weight:700;letter-spacing:.3px;margin-bottom:1px}.chat-msg.hero .chat-speaker{color:#4de8c7;text-shadow:0 0 6px rgba(77,232,199,.4)}.chat-msg.boss .chat-speaker{color:var(--region-accent, #a855f7);text-shadow:0 0 6px rgba(168,85,247,.4)}.chat-text{display:block;font-size:.65rem;font-family:Lora,serif;color:#fffc;font-style:italic;line-height:1.35}@keyframes chatSlideIn{0%{opacity:0;transform:translate(-8px)}to{opacity:1;transform:translate(0)}}.hero-model-wrapper{width:100%;height:200px;position:relative;z-index:3;display:flex;justify-content:center;pointer-events:none;margin-top:-10px}.hero-model-3d{width:220px;height:200px;pointer-events:none;filter:drop-shadow(0 4px 25px rgba(0,0,0,.6))}.hero-model-3d canvas{background:transparent!important}.enemy-hand-count{font-size:.6rem;color:#ffffff59;position:absolute;right:.75rem;bottom:3px}.enemy-hidden-hand{display:flex;justify-content:center;gap:3px;padding:.2rem}.ability-btn{padding:.35rem .7rem;background:transparent;border:1px solid var(--hero-color, #4de8c7);color:var(--hero-color, #4de8c7);border-radius:20px;font-family:Cinzel,serif;font-size:.6rem;font-weight:600;cursor:pointer;transition:all .3s;white-space:nowrap}.ability-btn:hover:not(.disabled){background:var(--hero-color);color:#0a0f1c;box-shadow:0 0 15px var(--hero-color)}.ability-btn.disabled{opacity:.3;cursor:not-allowed}.battlefield{flex:1;display:flex;flex-direction:column;justify-content:center;padding:.3rem .5rem;position:relative}.field-row,.enemy-field-row,.player-field-row{display:flex;justify-content:center;gap:.4rem;min-height:70px;padding:.3rem;align-items:center}.enemy-field-row{border-bottom:1px solid rgba(168,85,247,.1)}.player-field-row{border-top:1px solid rgba(77,232,199,.1)}.field-empty{font-size:.6rem;color:#fff3;font-style:italic}.field-divider{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:.25rem .5rem}.turn-indicator{font-family:Cinzel,serif;font-size:.65rem;color:#ffffff59;letter-spacing:.08em}.field-card{width:95px;height:78px;background:linear-gradient(135deg,#141928e6,#1e2337e6);border:1px solid var(--card-color, #4de8c7);border-radius:7px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;position:relative;box-shadow:0 0 8px #4de8c714;animation:cardAppear .5s ease}.field-card:after{content:"";position:absolute;inset:0;border-radius:7px;background:radial-gradient(circle at center,var(--card-color, #4de8c7),transparent);opacity:.04}.player-fc{border-width:2px}@keyframes cardAppear{0%{transform:scale(0) rotateY(180deg);opacity:0}to{transform:scale(1) rotateY(0);opacity:1}}.field-card-name{font-family:Cinzel,serif;font-size:.55rem;color:var(--card-color, white);font-weight:600;text-align:center;line-height:1.1}.field-card-stats{display:flex;gap:.4rem;font-size:.65rem}.stat-atk{color:#f43f5e;font-weight:700}.stat-def{color:#60a5fa;font-weight:700}.attacking-up{animation:attackUp .4s ease}.attacking-down{animation:attackDown .4s ease}@keyframes attackUp{0%{transform:translateY(0)}50%{transform:translateY(-25px) scale(1.1)}to{transform:translateY(0)}}@keyframes attackDown{0%{transform:translateY(0)}50%{transform:translateY(25px) scale(1.1)}to{transform:translateY(0)}}.player-hand{display:flex;justify-content:center;gap:.4rem;padding:.3rem .5rem;min-height:130px;flex-wrap:nowrap;overflow-x:auto}.hand-card{width:120px;min-width:120px;height:170px;background:linear-gradient(180deg,#1a1f35,#141925);border:2px solid var(--card-color, #4de8c7);border-radius:8px;cursor:pointer;transition:all .3s;display:flex;flex-direction:column;position:relative;overflow:hidden;flex-shrink:0}.hand-card:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--rarity-color, #9ca3af)}.hand-card:hover{transform:translateY(-12px) scale(1.05);box-shadow:0 8px 25px #00000080,0 0 12px var(--card-color);z-index:10}.hand-card.selected{transform:translateY(-20px) scale(1.08);box-shadow:0 12px 35px #00000080,0 0 20px var(--card-color);border-color:gold;z-index:20}.hand-card.unplayable{opacity:.45;cursor:not-allowed;filter:grayscale(.5)}.hand-card.unplayable:hover{transform:none;box-shadow:none}.hand-card.playing{animation:playCard .5s ease forwards}@keyframes playCard{0%{transform:scale(1);opacity:1}50%{transform:scale(1.15) translateY(-40px);opacity:.8}to{transform:scale(0) translateY(-80px);opacity:0}}.hand-card-top{display:flex;justify-content:space-between;align-items:center;padding:.25rem .35rem}.card-name{font-family:Cinzel,serif;font-size:.6rem;font-weight:700;color:var(--card-color, white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}.card-mana{width:22px;height:22px;background:linear-gradient(135deg,#3b82f6,#1d4ed8);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:900;color:#fff;flex-shrink:0}.card-art-area{height:48px;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#4de8c70a,#a855f70a);margin:0 .25rem;border-radius:3px}.card-type-badge{font-size:1.5rem;opacity:.5}.card-desc{font-size:.5rem;color:#ffffff8c;padding:.15rem .3rem;flex:1;line-height:1.3;font-family:Lora,serif}.card-stats-row{display:flex;justify-content:space-between;padding:.2rem .45rem;font-size:.75rem;font-weight:700}.card-rarity-bar{height:2px;background:var(--rarity-color, #9ca3af);margin-top:auto}.game-controls{display:flex;justify-content:center;padding:.4rem}.end-turn-btn{position:relative;padding:.5rem 1.8rem;background:linear-gradient(135deg,gold,#f59e0b);border:none;border-radius:25px;color:#0a0f1c;font-family:Cinzel,serif;font-size:.85rem;font-weight:700;cursor:pointer;overflow:hidden;transition:all .3s}.end-turn-btn:hover{transform:scale(1.05);box-shadow:0 0 20px #ffd70066}.ai-thinking{font-family:Cinzel,serif;font-size:.8rem;color:var(--region-accent, #a855f7);animation:pulse 1.5s infinite}@keyframes pulse{0%,to{opacity:.5}50%{opacity:1}}.game-log{height:50px;overflow-y:auto;padding:.2rem .4rem;background:#00000040;border-top:1px solid rgba(255,255,255,.04)}.game-log::-webkit-scrollbar{width:3px}.game-log::-webkit-scrollbar-thumb{background:#4de8c726;border-radius:2px}.log-entry{font-size:.55rem;color:#ffffff73;padding:1px 0;font-family:Lora,serif}.game-over-overlay{position:absolute;inset:0;background:#000000e0;display:flex;align-items:center;justify-content:center;z-index:100;animation:fadeIn .5s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.game-over-content{text-align:center;display:flex;flex-direction:column;align-items:center;gap:.75rem;padding:1rem}.game-over-content h2{font-family:Cinzel,serif;font-size:2.5rem}.game-over-content h2.victory{background:linear-gradient(to right,#4de8c7,gold);-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:victoryGlow 1s ease-in-out infinite alternate}@keyframes victoryGlow{0%{filter:drop-shadow(0 0 10px rgba(77,232,199,.5))}to{filter:drop-shadow(0 0 25px rgba(255,215,0,.5))}}.game-over-content h2.defeat{color:#f43f5e;text-shadow:0 0 20px rgba(244,63,94,.5)}.game-over-content p{color:#ffffffb3;font-family:Lora,serif;font-size:.95rem}.reward-text{color:gold!important;font-family:Cinzel,serif!important;font-weight:600}.next-hint{color:#4de8c7b3!important;font-style:italic;font-size:.85rem!important}.game-over-buttons{display:flex;gap:.75rem;margin-top:.5rem;flex-wrap:wrap;justify-content:center}@media(max-width:768px){.menu-title{font-size:1.5rem}.menu-display-card{width:140px;height:200px}.hand-card{width:100px;min-width:100px;height:140px}.card-desc{font-size:.45rem}.field-card{width:80px;height:65px}.battle-chat{width:130px;max-height:200px}.hero-model-wrapper{height:130px}.hero-model-3d{width:130px;height:130px}.hero-portrait{width:36px;height:36px}.portrait-letter{font-size:1rem}.hero-grid,.region-grid{grid-template-columns:repeat(2,1fr)}.select-title{font-size:1.3rem}}@media(max-width:480px){.hand-card{width:88px;min-width:88px;height:125px}.player-hand{gap:.25rem}.card-art-area{height:25px}.card-stats-row{font-size:.55rem}.hero-grid,.region-grid{grid-template-columns:1fr 1fr;gap:.5rem}.hero-select-card{padding:.8rem}}@media(prefers-reduced-motion:reduce){.health-fill:after,.hero-portrait:after{animation:none}.player-health,.boss-health-fill{animation:none}}.legal-overlay{position:fixed;inset:0;z-index:10000;background:#0a0f1c;overflow-y:auto;-webkit-overflow-scrolling:touch}.legal-page{max-width:800px;margin:0 auto;padding:2rem 1.5rem 4rem;color:#e0e0e0;font-family:Lora,Georgia,serif;line-height:1.8}.legal-close{display:inline-block;background:none;border:1px solid rgba(77,232,199,.3);color:#4de8c7;font-family:Cinzel,serif;font-size:.9rem;padding:.4rem 1.2rem;cursor:pointer;margin-bottom:1.5rem;transition:all .3s}.legal-close:hover{background:#4de8c71a;border-color:#4de8c7}.legal-page h1{font-family:Cinzel,serif;color:#4de8c7;font-size:2rem;margin-bottom:.3rem}.legal-updated{color:#fff6;font-size:.85rem;margin-bottom:2rem}.legal-page section{margin-bottom:1.5rem}.legal-page h2{font-family:Cinzel,serif;color:gold;font-size:1.2rem;margin-bottom:.5rem;border-bottom:1px solid rgba(255,215,0,.2);padding-bottom:.3rem}.legal-page h3{color:#a855f7;font-size:1rem;margin:1rem 0 .3rem}.legal-page p{font-size:.95rem;margin-bottom:.5rem}.legal-page ul{padding-left:1.5rem;margin-bottom:.5rem}.legal-page li{font-size:.95rem;margin-bottom:.3rem}.legal-contact{font-weight:700}.legal-contact a{color:#4de8c7;text-decoration:none}.legal-contact a:hover{text-decoration:underline}@media(max-width:768px){.legal-page{padding:1.5rem 1rem 3rem}.legal-page h1{font-size:1.5rem}.legal-page h2{font-size:1.05rem}.legal-page h3{font-size:.9rem}.legal-page p,.legal-page li{font-size:.88rem;line-height:1.7}.legal-page ul{padding-left:1.2rem}.legal-close{font-size:.8rem;padding:.35rem 1rem}}@media(max-width:480px){.legal-page{padding:1rem .75rem 2.5rem}.legal-page h1{font-size:1.3rem}.legal-page h2{font-size:.95rem}.legal-page p,.legal-page li{font-size:.82rem;line-height:1.65}.legal-updated{font-size:.75rem;margin-bottom:1.5rem}.legal-page section{margin-bottom:1.2rem}}@media(max-width:360px){.legal-page{padding:.75rem .6rem 2rem}.legal-page h1{font-size:1.15rem}.legal-page p,.legal-page li{font-size:.78rem}}