:root{--sidebar-w:230px;--radius:16px;--radius-sm:10px;--radius-lg:20px;--radius-pill:50px;--transition:0.3s cubic-bezier(0.25, 1, 0.5, 1);--transition-fast:0.15s cubic-bezier(0.25, 1, 0.5, 1);--transition-slow:0.45s cubic-bezier(0.16, 1, 0.3, 1);--bg-primary:#0B0B1A;--bg-secondary:rgba(30, 25, 45, 0.5);--bg-glass:rgba(45, 30, 80, 0.25);--bg-glass-hover:rgba(60, 45, 100, 0.4);--bg:var(--bg-primary);--bg2:var(--bg-secondary);--glass:var(--bg-glass);--glass-border:rgba(255, 255, 255, 0.08);--glass-blur:24px;--border:rgba(255, 255, 255, 0.1);--border-accent:rgba(0, 210, 255, 0.3);--border-thick:1px;--accent-primary:#9D4EDD;--accent-secondary:#00F5FF;--accent-success:#00E676;--accent-danger:#FF1744;--accent-warning:#FFD600;--accent-xp:#E02020;--accent:var(--accent-primary);--accent2:var(--accent-secondary);--success:var(--accent-success);--danger:var(--accent-danger);--warning:var(--accent-warning);--text-primary:#F8FAFC;--text-secondary:#94A3B8;--text-muted:#475569;--text:var(--text-primary);--text2:var(--text-secondary);--text3:var(--text-muted);--shadow-glow:0 0 25px rgba(157, 78, 221, 0.5);--shadow-glow-lg:0 0 50px rgba(0, 245, 255, 0.4);--shadow-card:0 20px 40px rgba(0, 0, 0, 0.6),inset 0 1px 1px rgba(255,255,255,0.15);--shadow-card-lg:0 30px 60px rgba(0, 0, 0, 0.7),inset 0 2px 2px rgba(255,255,255,0.2);--btn-shadow:0 8px 16px rgba(0,0,0,0.4),inset 0 2px 2px rgba(255,255,255,0.15);--btn-shadow-active:0 2px 4px rgba(0,0,0,0.5),inset 0 1px 1px rgba(0,0,0,0.2);--panel-border:1px solid var(--glass-border);--game-font:'Outfit',sans-serif;--bg:#0a0a1a;--bg2:#12122a;--glass:rgba(18,18,42,0.92);--accent:#6C5CE7;--accent2:#00D2FF;--success:#2DC653;--danger:#FF6B6B;--warning:#FFC857;--xp:#A855F7;--text:#F8FAFC;--text2:#94A3B8;--muted:#64748B;--border:rgba(255,255,255,0.08);--radius:14px}
*,::after,::before{box-sizing:border-box;margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);color:var(--text);scroll-behavior:smooth}
h1,h2,h3{font-family:Outfit,system-ui,sans-serif}
a{color:var(--accent2)}
.screen:not(.active) *,[style*="display: none"] *{animation-play-state:paused!important}
button{cursor:pointer;border:none;font-family:inherit}
input,select{font-family:inherit}
.flex{display:flex}
.flex-center{display:flex;align-items:center;justify-content:center}
.flex-col{display:flex;flex-direction:column}
.flex-between{display:flex;justify-content:space-between;align-items:center}
.gap-sm{gap:8px}
.gap-md{gap:15px}
.gap-lg{gap:20px}
.text-center{text-align:center}
.text-success{color:var(--success)}
.text-danger{color:var(--danger)}
.w-full{width:100%}
.mb-sm{margin-bottom:8px}
.mb-md{margin-bottom:15px}
.btn{padding:12px 24px;border-radius:var(--radius);font-weight:700;font-size:1rem;transition:transform .15s,box-shadow .15s}
.btn:hover{transform:scale(1.03);box-shadow:0 0 20px rgba(108,92,231,.35)}
.btn:active{transform:scale(.97)}
.btn-primary{background:linear-gradient(135deg,var(--accent),#8b5cf6)}
.btn-ghost{color:var(--text);border:1px solid var(--border)}
.form-group{margin-bottom:12px}
.form-group label{display:block;font-size:.85rem;color:var(--text2);margin-bottom:4px}
.form-group input,.form-group select{width:100%;padding:10px 14px;border-radius:10px;font-size:1rem;background:rgba(255,255,255,.06);border:1px solid var(--border);color:var(--text)}
.form-group input:focus,.form-group select:focus{outline:0;border-color:var(--accent)}
.role-btn{flex:1;padding:8px 6px;border-radius:10px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.05);color:#94a3b8;font-size:.75rem;font-weight:700;cursor:pointer;transition:.18s;font-family:Inter,sans-serif;text-align:center}
.role-btn:hover{background:rgba(108,92,231,.2);color:#f8fafc}
.role-btn.selected{background:rgba(108,92,231,.35);border-color:rgba(108,92,231,.7);color:#f8fafc;box-shadow:0 0 12px rgba(108,92,231,.3)}
body,html{margin:0;padding:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none;background-color:var(--bg-primary);background-image:radial-gradient(rgba(255,255,255,.03) 2px,transparent 2px);background-size:40px 40px;font-family:Outfit,Inter,sans-serif;color:var(--text)}
#loading-screen{position:fixed;top:0;right:0;bottom:0;left:0;z-index:99999;background:#0a0a1a;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:system-ui,sans-serif}
.loading-emoji{font-size:4rem;animation:1.5s infinite loadingPulse}
.loading-title{color:#6c5ce7;font-size:1.5rem;font-weight:900;margin-top:15px}
.loading-sub{color:#64748b;font-size:.9rem;margin-top:8px}
@keyframes loadingPulse{0%,100%{transform:scale(1)}
50%{transform:scale(1.2)}
}
.inline-flex-center{display:flex;gap:16px;justify-content:center;margin-bottom:16px}
.text-accent-label{color:var(--accent-warning,#ffc857);font-weight:900;letter-spacing:2px}
.text-success-bold{color:#2dc653;font-weight:900;font-size:1.1rem;margin-bottom:8px}
.panel-title-lg{text-align:center;font-weight:900;font-size:1.3rem;margin-bottom:12px}
.panel-subtitle{text-align:center;color:var(--text2);font-size:.9rem;margin-top:12px}
.img-rounded{border-radius:20px;max-width:100%;box-shadow:0 10px 40px rgba(0,0,0,.5)}
#game-stage{width:100%;height:100%;position:fixed;top:0;left:0;right:0;bottom:0;overflow:hidden;background:0 0;display:flex;flex-direction:column;padding-top:70px;touch-action:none;overscroll-behavior:none}
#game-hud{position:fixed;top:0;left:0;right:0;height:70px;background:rgba(10,10,18,.85);border-bottom:1px solid rgba(255,255,255,.08);box-shadow:0 10px 30px rgba(0,0,0,.5);display:flex;align-items:center;justify-content:space-between;padding:0 40px;z-index:100}
body.in-hub #game-hud .hud-avatar-ring{display:none!important}
.hud-avatar-ring{width:44px;height:44px;background:linear-gradient(135deg,rgba(245,158,11,.15),rgba(234,88,12,.15));border:1px solid rgba(245,158,11,.45);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.5rem;box-shadow:0 0 15px rgba(245,158,11,.25),inset 0 0 10px rgba(245,158,11,.08);transition:.3s;cursor:pointer}
.hud-avatar-ring:hover{transform:scale(1.05);box-shadow:0 0 22px rgba(245,158,11,.5)}
.hud-user{display:flex;flex-direction:column;gap:2px}
.hud-name{color:#fff;letter-spacing:.5px;line-height:1;max-width:130px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hud-level-bar{display:flex;align-items:center;gap:6px}
.hud-level{font-weight:900;color:#ffc857;white-space:nowrap}
.hud-xp-track{width:80px;height:6px;background:rgba(0,0,0,.6);border-radius:4px;overflow:hidden;border:1px solid rgba(255,255,255,.1);box-shadow:inset 0 1px 3px rgba(0,0,0,.8)}
.hud-xp-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,#ea580c,#f59e0b,#fcd34d);box-shadow:0 0 8px rgba(245,158,11,.5)}
.hud-pill{padding:6px 14px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1);border-radius:12px;font-weight:900;font-size:.95rem;display:flex;align-items:center;gap:6px;color:#fff;transition:transform .2s cubic-bezier(.34, 1.56, .64, 1),box-shadow .2s}
.hud-pill:hover{transform:translateY(-2px)}
.hud-pill.gold-pill{background:rgba(255,200,87,.08);border-color:rgba(255,200,87,.2)}
.hud-pill.gold-pill:hover{box-shadow:0 0 15px rgba(255,200,87,.2);border-color:rgba(255,200,87,.4)}
.hud-pill.gold-pill .hud-icon{filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}
.hud-pill.gem-pill{background:rgba(0,210,255,.08);border-color:rgba(0,210,255,.2)}
.hud-pill.gem-pill:hover{box-shadow:0 0 15px rgba(0,210,255,.2);border-color:rgba(0,210,255,.4)}
.hud-pill.streak-pill{background:rgba(255,51,102,.08);color:#f36;border-color:rgba(255,51,102,.2)}
.hud-pill.streak-pill:hover{box-shadow:0 0 15px rgba(255,51,102,.2);border-color:rgba(255,51,102,.4)}
.hud-btn{width:44px;height:44px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1);border-radius:12px;font-size:1.2rem;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;transition:.3s cubic-bezier(.34, 1.56, .64, 1)}
.hud-btn:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);transform:scale(1.1) rotate(5deg);box-shadow:0 8px 16px rgba(0,0,0,.3)}
.hud-btn:active{transform:scale(.95)}
#main-content{flex:1;position:relative;overflow:hidden;min-height:0}
.screen{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;overflow:hidden;background:var(--bg);z-index:1}
.screen.active{z-index:5;animation:screenFadeIn var(--transition) forwards}
@keyframes screenFadeIn{from{opacity:0;transform:translateY(10px)}
to{opacity:1;transform:translateY(0)}
}
.screen-padded{padding:30px 40px;overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth;overscroll-behavior-y:none}
.screen-padded::-webkit-scrollbar{width:6px}
.screen-padded::-webkit-scrollbar-track{background:0 0}
.screen-padded::-webkit-scrollbar-thumb{background:rgba(108,92,231,.3);border-radius:3px}
.page-content{max-width:1200px;margin:0 auto;width:100%}
.screen-hero{display:flex;align-items:center;gap:24px;padding:24px 32px;margin-bottom:30px;background:linear-gradient(180deg,rgba(20,20,40,.95) 0,rgba(10,10,25,.7) 100%);border-bottom:1px solid rgba(255,255,255,.08);position:relative;overflow:hidden;border-radius:20px;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 15px 40px rgba(0,0,0,.4);z-index:10}
.screen-hero-icon{font-size:4rem;flex-shrink:0;filter:drop-shadow(0 0 30px rgba(0, 210, 255, .5));animation:4.5s ease-in-out infinite heroIconVolumetricFloat}
@keyframes heroIconVolumetricFloat{0%,100%{transform:translateY(0) scale(1) rotate(-3deg);filter:drop-shadow(0 0 30px rgba(0, 210, 255, .4))}
50%{transform:translateY(-8px) scale(1.05) rotate(3deg);filter:drop-shadow(0 15px 40px rgba(108, 92, 231, .6))}
}
.screen-hero-text{flex:1;min-width:0;position:relative;z-index:2}
.screen-hero-title{font-family:Outfit,sans-serif;font-size:clamp(2rem, 5vw, 2.8rem);font-weight:900;margin:0 0 6px;color:#fff;letter-spacing:1px;text-transform:uppercase;background:linear-gradient(135deg,#fff 30%,#00d2ff 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 4px 12px rgba(0,0,0,.8)}
.screen-hero-sub{font-size:clamp(.95rem, 2.5vw, 1.1rem);color:#94a3b8;font-weight:500;margin:0;letter-spacing:.5px;line-height:1.5}
.screen-hero-badge{flex-shrink:0;position:relative;z-index:2;background:rgba(108,92,231,.15);border:1px solid rgba(108,92,231,.5);border-radius:99px;padding:8px 18px;font-size:clamp(.8rem, 2vw, .95rem);font-weight:800;color:#c4b5fd;white-space:nowrap;box-shadow:0 0 20px rgba(108,92,231,.3)}
.easter-eggs-grid{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;max-width:600px;margin:24px auto 0}
.canvas-world-wrap{display:none;position:relative;width:100%;height:100%}
.canvas-world-wrap.visible{display:block}
.game-canvas-el{width:100%;height:100%;display:block;background:#0a0a1a}
.dialogue-box-fixed{position:fixed;bottom:5%;left:50%;transform:translateX(-50%);width:40%;padding:20px;z-index:90}
.dialogue-continue{font-size:.9rem;margin-top:10px;text-align:right;font-weight:700;color:var(--text2)}
.encounter-modal-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:50;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.7)}
.encounter-modal-card{padding:30px 40px;border-radius:24px;text-align:center;max-width:380px}
.encounter-emoji{font-size:4rem;margin-bottom:8px}
.encounter-name{font-size:1.5rem;margin-bottom:4px}
.encounter-info{margin-bottom:16px}
.encounter-btns{display:flex;gap:12px;justify-content:center}
.encounter-btn-lg{font-size:1.1rem;padding:10px 28px}
.enc-run-btn-style{font-size:1.1rem;padding:10px 28px;background:rgba(255,255,255,.08)}
.shop-scrollable{height:300px;overflow-y:auto}
.gender-picker-row{display:flex;gap:16px;justify-content:center;margin-bottom:16px}
.gender-icon{font-size:3rem}
.stripe-label{color:var(--accent-primary);font-weight:900;font-style:italic}
.auth-toggle-link{color:var(--accent-primary);font-weight:700}
.adv-action-panel{position:absolute;top:140px;left:20px;z-index:30;display:flex;flex-direction:column;gap:6px}
.settings-sfx-row{display:flex;gap:8px;align-items:center;margin-bottom:16px}
.settings-checkbox{width:20px;height:20px;cursor:pointer}
.settings-label{cursor:pointer;font-size:1.1rem;font-weight:700}
.notif-btn{margin-bottom:16px}
.drawing-pad-label{font-size:.85rem;font-weight:700;color:var(--text-secondary)}
.bp-warning-text{color:var(--accent-warning);font-weight:900;letter-spacing:2px}
.modal-scroll-inner{max-width:800px;max-height:80vh;overflow-y:auto}
.lb-self-wrap{margin-top:8px}
.emote-row{position:relative;text-align:right;margin-top:8px}
.friends-list-scroll{max-height:200px;overflow-y:auto}
.tier-badge-pill{display:inline-flex;padding:10px 20px;border-radius:50px;cursor:pointer}
.auth-link{color:var(--accent-primary);font-weight:700}
.auth-link-underline{text-decoration:underline}
.bp-countdown-text{font-size:.8rem;font-weight:700;color:var(--text-secondary);margin-bottom:8px}
.btn-buy-success{background:linear-gradient(135deg,var(--accent-success),#1b8a3c)}
.shop-title-accent{color:var(--accent-primary)}
.stripe-brand{color:var(--accent-primary);font-weight:900;font-style:italic}
.checkout-desc-sm{font-size:.85rem;color:var(--text-secondary)}
.sm-score-row{color:#2dc653;font-weight:900;font-size:1.1rem;margin-bottom:8px}
.sm-question-el{font-size:2rem;font-weight:900;margin-bottom:16px}
.br-header-text{text-align:center;font-weight:900;font-size:1.3rem;margin-bottom:12px}
.br-loading-text{text-align:center;color:var(--text-secondary);font-size:.9rem;margin-top:12px}
.chat-header-row{display:flex;gap:6px}
.easter-egg-overlay{z-index:999;background:rgba(0,0,0,.8)}
.easter-egg-card{background:0 0;border:none;box-shadow:none}
.easter-egg-title{font-size:3rem;text-shadow:0 0 20px #000;margin-bottom:20px}
.sidebar-logo{display:flex;align-items:center;gap:10px;padding:24px 20px 16px;justify-content:center}
.logo-icon{font-size:2.2rem;filter:drop-shadow(0 0 8px rgba(108,92,231,.5))}
.logo-text{display:flex;flex-direction:column;line-height:1}
.logo-text span:first-child{font-size:1.4rem;font-weight:900;letter-spacing:3px;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.logo-accent{font-size:1.4rem;font-weight:900;letter-spacing:3px;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.sidebar-currency{display:flex;gap:8px;padding:0 20px 18px;justify-content:center}
.currency-pill{display:flex;align-items:center;gap:6px;padding:6px 14px;border-radius:20px;font-size:.85rem;font-weight:800}
.gold-pill{background:rgba(255,200,87,.15);color:#ffc857;border:1px solid rgba(255,200,87,.25)}
.gem-pill{background:rgba(0,210,255,.12);color:#00d2ff;border:1px solid rgba(0,210,255,.2)}
.side-btn{display:flex;align-items:center;gap:12px;padding:11px 18px;margin:3px 12px;border-radius:14px;background:0 0;color:#94a3b8;font-size:.95rem;font-weight:700;transition:.3s cubic-bezier(.25, 1, .5, 1);border:1px solid transparent;cursor:pointer;font-family:Outfit,sans-serif;white-space:nowrap;position:relative;overflow:hidden}
.side-btn::before{content:'';position:absolute;left:0;top:20%;bottom:20%;width:3px;background:linear-gradient(180deg,#6c5ce7,#00d2ff);border-radius:0 3px 3px 0;opacity:0;transition:opacity .3s cubic-bezier(.25, 1, .5, 1)}
.side-btn:hover{background:rgba(255,255,255,.06);color:#f8fafc;border-color:rgba(255,255,255,.06)}
.side-btn.active{background:linear-gradient(135deg,rgba(108,92,231,.2),rgba(0,210,255,.08));color:#f8fafc;border-color:rgba(108,92,231,.35);box-shadow:0 0 24px rgba(108,92,231,.2),inset 0 0 16px rgba(108,92,231,.08)}
.side-btn.active::before{opacity:1}
.nav-icon-box{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:10px;font-size:1.1rem;flex-shrink:0}
.icon-adventure{background:linear-gradient(135deg,rgba(239,68,68,.3),rgba(220,38,38,.2))}
.icon-pvp{background:linear-gradient(135deg,rgba(251,191,36,.3),rgba(245,158,11,.2))}
.icon-shop{background:linear-gradient(135deg,rgba(34,197,94,.3),rgba(22,163,74,.2))}
.icon-games{background:linear-gradient(135deg,rgba(59,130,246,.3),rgba(37,99,235,.2))}
.icon-profile{background:#a855f7;border:3px solid #000;box-shadow:0 4px 0 #000}
.icon-account{background:#64748b;border:3px solid #000;box-shadow:0 4px 0 #000}
.nav-icon-box-home{background:#3b82f6;border:3px solid #000;box-shadow:0 4px 0 #000}
.sidebar-divider{height:1px;margin:4px 20px;background:rgba(255,255,255,.06)}
.nav-icon{font-size:1.2rem}
.nav-label{font-size:.88rem;letter-spacing:.3px}
.glass,.glass-panel{background:var(--bg2);border:var(--panel-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-card)}
.glass-card{padding:24px;box-shadow:0 10px 40px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.1);overflow:hidden}
.glass-card:hover{transform:translateY(-6px) scale(1.01);box-shadow:0 20px 50px rgba(0,0,0,.6),inset 0 0 30px rgba(108,92,231,.1)}
.section-title{font-size:1.8rem;font-weight:800;margin-bottom:15px;color:var(--text-primary);text-shadow:0 4px 16px rgba(0,210,255,.4);letter-spacing:1px}
.title-sm{font-size:1.2rem;font-weight:700;color:var(--text-primary)}
.title-md{font-size:1.6rem;font-weight:800;color:var(--text-primary)}
.title-lg{font-weight:900;color:var(--text-primary)}
.title-gradient{background:linear-gradient(135deg,var(--text-primary),var(--text-secondary));-webkit-background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 0 10px rgba(0,210,255,.3))}
.btn-primary{background:linear-gradient(180deg,var(--accent) 0,rgba(var(--accent),.8) 100%);background-color:var(--accent);color:#fff;padding:14px 28px;font-family:var(--game-font);text-transform:uppercase;letter-spacing:1.5px;box-shadow:var(--btn-shadow);cursor:pointer;text-shadow:0 2px 4px rgba(0,0,0,.4)}
.btn-primary::after{content:'';position:absolute;top:0;left:0;width:100%;height:50%;background:linear-gradient(180deg,rgba(255,255,255,.15),transparent)}
.btn-primary:active{box-shadow:var(--btn-shadow-active)}
.btn-primary:hover{filter:brightness(1.2);box-shadow:0 0 20px var(--accent);transform:scale(1.05)}
.pulse-btn{animation:2s ease-in-out infinite pulseGlow}
@keyframes pulseGlow{0%,100%{box-shadow:0 0 10px rgba(108,92,231,.3)}
50%{box-shadow:0 0 30px rgba(108,92,231,.6)}
}
input,select{background:var(--bg2);border:2px solid #000;border-radius:10px;padding:10px 14px;color:var(--text);font-size:1rem;box-shadow:inset 0 2px 4px rgba(0,0,0,.3)}
input:focus,select:focus{border-color:var(--accent)}
.currency-hud{display:flex;gap:15px;align-items:center}
.currency-item{display:flex;align-items:center;gap:5px;font-weight:700;font-size:.9rem}
.hero-showcase{display:flex;flex-direction:column;align-items:center;justify-content:center;height:70vh;text-align:center}
.hero-character{margin-bottom:20px}
@keyframes heroFloat{0%,100%{transform:translateY(0)}
50%{transform:translateY(-15px)}
}
.hero-shadow{width:60px;height:10px;margin:0 auto;background:rgba(108,92,231,.3);border-radius:50%;animation:3s ease-in-out infinite shadowPulse}
@keyframes shadowPulse{0%,100%{transform:scaleX(1);opacity:.3}
50%{transform:scaleX(.7);opacity:.5}
}
.hero-title{color:var(--text2);font-size:1.1rem;font-weight:700;letter-spacing:3px;margin:5px 0 20px}
.hero-play-btn{background:linear-gradient(135deg,var(--accent),#8b5cf6);color:#fff;font-weight:900;cursor:pointer}
.hero-play-btn:hover{transform:scale(1.05);box-shadow:0 0 30px rgba(108,92,231,.5)}
.screen-title{font-weight:900;margin-bottom:16px;font-size:1.4rem;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.screen-title-guilds{font-size:1.6rem;margin-bottom:20px;background:linear-gradient(90deg,#ffc857,#ff6b6b)}
.screen-title-tournament{background:linear-gradient(90deg,gold,#ff6b6b)}
.screen-title-story{background:linear-gradient(90deg,#a855f7,#00d2ff)}
.battle-action-btn,.glass-card,.glass-panel,.modal,.modal-backdrop,.nav-btn,.screen,.shop-glass-card{background:linear-gradient(135deg,rgba(255,255,255,.08) 0,rgba(20,20,40,.4) 100%);border:1px solid rgba(255,255,255,.1);box-shadow:0 8px 32px 0 rgba(0,0,0,.4)}
.battle-layout{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;background:linear-gradient(180deg,#1a1a3a 0,#0d0d20 60%,#2a1a0a 85%,#1a0f05 100%);overflow:hidden;z-index:10}
.battle-layout *{pointer-events:auto}
.battle-layout.zone-meadow{background-color:#66a6ff;background-image:url('/images/map_clean.jpg');background-position:center;background-size:cover;background-repeat:no-repeat}
.battle-layout.zone-forest{background-color:#1a2f18;background-image:url('/images/ai/forest_battle_bg.jpg');background-position:center;background-size:cover;background-repeat:no-repeat}
.battle-layout.zone-cave{background-color:#18181b;background-image:url('/images/vibrant_world_map_nano.png');background-position:center;background-size:cover;background-repeat:no-repeat}
.battle-layout.zone-volcano{background-color:#450a0a;background-image:url('/images/ai/volcano_battle_bg.jpg');background-position:center;background-size:cover;background-repeat:no-repeat}
.battle-layout.zone-ice{background-color:#7dd3fc;background-image:url('/images/ai/ice_battle_bg.jpg');background-position:center;background-size:cover;background-repeat:no-repeat}
.battle-layout.zone-desert{background-color:#f59e0b;background-image:url('/images/ai/desert_battle_bg.jpg');background-position:center;background-size:cover;background-repeat:no-repeat}
.battle-layout.zone-castle{background-color:#334155;background-image:url('/images/vibrant_world_map_nano.png');background-position:center;background-size:cover;background-repeat:no-repeat}
.battle-hud-top{display:flex;justify-content:space-between;align-items:flex-start;padding:30px 40px;position:absolute;top:0;left:0;right:0;z-index:15;pointer-events:none}
.hud-holo-bar{width:380px;padding:16px 20px;border-radius:20px;background:rgba(5,5,15,.4);border:1px solid rgba(255,255,255,.08);box-shadow:0 10px 40px rgba(0,0,0,.5);pointer-events:auto;transition:transform .3s}
.holo-bar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.holo-name{font-size:1.1rem;font-weight:800;color:#f8fafc;text-transform:uppercase;letter-spacing:1px}
.holo-level{color:var(--accent-primary);font-size:.9rem;margin-left:8px}
.holo-icon{font-size:1.5rem;filter:drop-shadow(0 0 10px rgba(255,255,255,.3))}
.monster-holo .holo-name{color:var(--accent-danger)}
.holo-track{position:relative;height:12px;border-radius:6px;background:rgba(0,0,0,.6);overflow:hidden;box-shadow:inset 0 2px 10px rgba(0,0,0,.8)}
.holo-fill-under{position:absolute;top:0;left:0;height:100%;border-radius:6px;background:#ff4757;transition:width .8s cubic-bezier(.25, 1, .5, 1) .3s;z-index:1}
.monster-holo .holo-fill-under{background:#ffa502}
.holo-fill{position:absolute;top:0;left:0;height:100%;border-radius:6px;transition:width .4s cubic-bezier(.1, .9, .2, 1);background:linear-gradient(90deg,#10b981,#34d399);box-shadow:0 0 15px rgba(16,185,129,.8);z-index:2}
.holo-fill-danger{background:linear-gradient(90deg,#ef4444,#f87171);box-shadow:0 0 15px rgba(239,68,68,.8)}
.holo-nums{text-align:right;margin-top:8px;font-size:.85rem;font-weight:800;color:rgba(255,255,255,.6)}
.hud-holo-timer{flex-shrink:0;pointer-events:auto;margin-top:5px}
.timer-orb{width:70px;height:70px;border-radius:50%;background:rgba(10,10,30,.6);border:2px solid rgba(255,200,87,.5);display:flex;align-items:center;justify-content:center;font-size:1.6rem;font-weight:900;color:#ffc857;box-shadow:0 0 30px rgba(255,200,87,.2),inset 0 0 15px rgba(255,200,87,.1)}
.battle-arena{display:flex;justify-content:space-between;align-items:flex-end;flex:1;padding:100px 4% 120px;z-index:5;gap:20px;overflow-y:visible}
.avatar-container{width:320px;height:320px;display:flex;justify-content:center;align-items:center;position:relative;overflow:visible}
.avatar{width:100%;height:100%;object-fit:contain;object-position:bottom center}
.entity{position:relative;z-index:6;overflow:visible}
.entity canvas{display:block;width:clamp(150px,22vw,320px);height:clamp(150px,22vw,320px)}
.damage-text{font-weight:900;font-size:2rem;min-height:40px;text-shadow:0 4px 15px rgba(0,0,0,.8)}
.battle-center-hologram{flex:1;display:flex;flex-direction:row;flex-wrap:wrap;align-items:flex-start;justify-content:center;margin:0 auto;max-width:900px;width:100%;align-self:center;position:relative;z-index:4}
.battle-question-panel{flex:3;min-width:300px;padding:28px;background:rgba(5,5,15,.9);border:1px solid rgba(245,158,11,.25);border-radius:24px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.6),inset 0 0 40px rgba(245,158,11,.06)}
.drawing-pad-wrapper.hidden{display:none!important}
.bq-title{font-size:.95rem;font-weight:900;letter-spacing:2px;margin-bottom:12px;text-transform:uppercase}
.bq-question{font-size:clamp(1.8rem, 4vw, 3rem);line-height:1.35;font-weight:900;color:#fff;margin:16px 0 24px;text-shadow:0 4px 20px rgba(255,255,255,.3)}
.bq-timer-bar{height:6px;background:rgba(255,255,255,.1);border-radius:3px;overflow:hidden;margin-bottom:24px}
.bq-timer-fill{height:100%;border-radius:3px;transition:width .1s linear;width:100%;box-shadow:0 0 8px rgba(245,158,11,.6)}
.bq-explanation{margin-top:16px;padding:16px;border-radius:12px;background:rgba(108,92,231,.15);border:1px solid rgba(108,92,231,.3);font-size:.95rem;color:#cbd5e1}
.bq-options{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bq-options button{padding:18px 16px;border-radius:18px;font-size:1.2rem;font-weight:800;color:#fff;background:rgba(255,255,255,.03);border:1.5px solid rgba(255,255,255,.09);cursor:pointer;transition:.22s cubic-bezier(.34, 1.56, .64, 1);position:relative;overflow:hidden;font-family:Outfit,sans-serif;line-height:1.4;display:flex;align-items:center;justify-content:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.bq-options button::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,rgba(255,255,255,.08),transparent);opacity:0;transition:opacity .2s;border-radius:18px}
.bq-options button:hover::before{opacity:1}
.bq-options button:first-child{border-color:rgba(245,158,11,.4)}
.bq-options button:nth-child(2){border-color:rgba(96,165,250,.4)}
.bq-options button:nth-child(3){border-color:rgba(168,85,247,.4)}
.bq-options button:nth-child(4){border-color:rgba(16,185,129,.4)}
.bq-options button:hover{transform:translateY(-5px) scale(1.03)}
.bq-options button:first-child:hover{box-shadow:0 12px 30px rgba(245,158,11,.28);background:rgba(245,158,11,.1);border-color:rgba(245,158,11,.7)}
.bq-options button:nth-child(2):hover{box-shadow:0 12px 30px rgba(96,165,250,.28);background:rgba(96,165,250,.1);border-color:rgba(96,165,250,.7)}
.bq-options button:nth-child(3):hover{box-shadow:0 12px 30px rgba(168,85,247,.28);background:rgba(168,85,247,.1);border-color:rgba(168,85,247,.7)}
.bq-options button:nth-child(4):hover{box-shadow:0 12px 30px rgba(16,185,129,.28);background:rgba(16,185,129,.1);border-color:rgba(16,185,129,.7)}
.option-correct{background:rgba(45,198,83,.3)!important;border-color:#2dc653!important;box-shadow:0 0 20px rgba(45,198,83,.5)!important;transform:scale(1.05)}
.option-wrong{background:rgba(239,68,68,.3)!important;border-color:#ef4444!important}
.battle-hud-bottom{position:absolute;bottom:0;left:0;right:0;padding:12px 20px 20px;display:flex;flex-direction:column;align-items:center;gap:10px;z-index:15;pointer-events:none}
.action-dock{display:flex;gap:12px;padding:12px 16px;border-radius:20px;background:rgba(5,5,15,.5);border:1px solid rgba(255,255,255,.08);box-shadow:0 10px 40px rgba(0,0,0,.5);pointer-events:auto}
.spatial-btn{display:flex;align-items:center;gap:8px;padding:12px 24px;border-radius:14px;font-weight:800;font-size:1.05rem;border:1px solid transparent;cursor:pointer;color:#fff;transition:.2s cubic-bezier(.34, 1.56, .64, 1)}
.atk-btn{background:rgba(108,92,231,.2);border-color:rgba(108,92,231,.3);color:#c4b5fd;text-shadow:0 0 10px rgba(108,92,231,.5)}
.atk-btn:hover{background:rgba(108,92,231,.4);transform:translateY(-4px);box-shadow:0 10px 25px rgba(108,92,231,.4)}
.heal-btn{background:rgba(239,68,68,.15);border-color:rgba(239,68,68,.3);color:#fca5a5}
.heal-btn:hover{background:rgba(239,68,68,.3);transform:translateY(-4px);box-shadow:0 10px 25px rgba(239,68,68,.4)}
.sidekick-btn{background:rgba(255,200,87,.15);border-color:rgba(255,200,87,.3);color:#fde047}
.sidekick-btn:hover{background:rgba(255,200,87,.3);transform:translateY(-4px);box-shadow:0 10px 25px rgba(255,200,87,.4)}
.item-btn{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1);color:#cbd5e1}
.item-btn:hover{background:rgba(255,255,255,.15);transform:translateY(-4px);box-shadow:0 10px 25px rgba(255,255,255,.1)}
.spatial-spell-drawer{pointer-events:auto;background:rgba(5,5,15,.6);border:1px solid rgba(108,92,231,.3);border-radius:20px;box-shadow:0 20px 50px rgba(0,0,0,.6)}
.drawing-pad-toolbar{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.06);background:rgba(0,0,0,.2)}
.draw-tools{display:flex;gap:8px}
.draw-tool-btn{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:6px 12px;font-size:1.1rem;cursor:pointer;transition:.15s;color:#f8fafc}
.draw-tool-btn:hover{background:rgba(108,92,231,.3);border-color:rgba(108,92,231,.5)}
.draw-tool-btn.active{background:rgba(108,92,231,.4);border-color:#6c5ce7;box-shadow:0 0 8px rgba(108,92,231,.4)}
.drawing-canvas{display:block;width:100%;height:110px;cursor:crosshair;touch-action:none;background:0 0}
.spell-menu{padding:20px}
.stat-pill{padding:6px 14px;border-radius:10px;font-weight:700;font-size:.85rem;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);color:#f8fafc}
.float-anim{animation:3s ease-in-out infinite float}
.float-anim-delayed{animation:3s ease-in-out 1.5s infinite float}
@keyframes float{0%,100%{transform:translateY(0)}
50%{transform:translateY(-12px)}
}
@keyframes floatDeco{0%{transform:translateY(0) rotate(0);opacity:0}
5%{opacity:.4}
90%{opacity:.3}
100%{transform:translateY(-110vh) rotate(360deg);opacity:0}
}
.battle-float-deco{position:absolute;pointer-events:none;z-index:1;filter:blur(.5px)}
.screen-shatter{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:10000;pointer-events:none;background:linear-gradient(45deg,transparent 48%,rgba(255,255,255,.8) 49%,rgba(255,255,255,.8) 51%,transparent 52%),linear-gradient(-45deg,transparent 48%,rgba(255,255,255,.8) 49%,rgba(255,255,255,.8) 51%,transparent 52%),linear-gradient(10deg,transparent 48%,rgba(255,255,255,.6) 49%,rgba(255,255,255,.6) 51%,transparent 52%),linear-gradient(100deg,transparent 48%,rgba(255,255,255,.6) 49%,rgba(255,255,255,.6) 51%,transparent 52%);background-size:150vw 150vh;background-position:center;clip-path:polygon(0 0,15% 35%,40% 10%,65% 45%,90% 20%,100% 0,100% 100%,85% 65%,50% 95%,20% 70%,0 100%);animation:.2s cubic-bezier(.1,.9,.2,1) forwards shatterBreak}
@keyframes shatterBreak{0%{transform:scale(1);opacity:1;filter:brightness(2) contrast(200%)}
100%{transform:scale(1.05);opacity:.8;filter:brightness(1) contrast(100%)}
}
.boss-intro-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:9999;pointer-events:none;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;transition:opacity .5s}
.boss-intro-overlay.fade-out{opacity:0}
.boss-intro-stripes{position:absolute;top:0;bottom:0;left:0;right:0;background:repeating-linear-gradient(45deg,rgba(0,0,0,.2),rgba(0,0,0,.2) 20px,rgba(255,0,0,.15) 20px,rgba(255,0,0,.15) 40px);animation:5s linear infinite panStripes;mix-blend-mode:overlay}
@keyframes panStripes{from{background-position:0 0}
to{background-position:100px 100px}
}
.boss-intro-text{position:relative;z-index:2;text-align:center}
.boss-intro-warning{color:#ff6b6b;font-size:2.5rem;font-weight:900;letter-spacing:12px;animation:.8s ease-in-out infinite alternate flashWarning;text-shadow:0 0 30px #ff6b6b}
@keyframes flashWarning{from{opacity:.5;color:#ffc857}
to{opacity:1;color:#ff6b6b}
}
.boss-intro-name{font-size:7rem;font-family:Outfit;font-weight:900;color:#f8fafc;text-transform:uppercase;text-shadow:0 10px 40px rgba(255,30,30,.9),3px 3px 0 #ff6b6b,-3px -3px 0 #00d2ff;margin:10px 0;transform:scale(3);opacity:0;animation:.5s cubic-bezier(.1,.9,.2,1) .5s forwards slamName}
@keyframes slamName{to{transform:scale(1);opacity:1}
}
.bm-overlay{position:fixed;inset:0;z-index:9000;background:rgba(0,0,10,.88);display:flex;align-items:center;justify-content:center;animation:.25s bmFadeIn}
.bm-overlay.bm-dismiss{animation:.35s forwards bmFadeOut}
@keyframes bmFadeIn{from{opacity:0;transform:scale(.96)}
to{opacity:1;transform:scale(1)}
}
@keyframes bmFadeOut{from{opacity:1;transform:scale(1)}
to{opacity:0;transform:scale(1.03)}
}
.bm-container{width:100%;max-width:680px;display:flex;flex-direction:column;align-items:center;gap:20px;padding:20px}
.bm-header{text-align:center}
.bm-title{font-family:Outfit,sans-serif;font-weight:900;font-size:clamp(1.6rem, 4vw, 2.4rem);background:linear-gradient(135deg,#6c5ce7,#00d2ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.bm-subtitle{color:var(--text-secondary,#94a3b8);font-size:.95rem;margin-top:4px}
.bm-carousel{display:flex;align-items:center;justify-content:center;gap:0;width:100%;height:220px;position:relative;overflow:visible;perspective:800px}
.bm-card{position:absolute;width:220px;min-height:250px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:22px;padding:22px 16px;display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;transition:.35s cubic-bezier(.175, .885, .32, 1.275);transform:translateX(-240px) scale(.72) rotateY(25deg);opacity:0;pointer-events:none;user-select:none}
.bm-card.prev{transform:translateX(-185px) scale(.82) rotateY(15deg);opacity:.55;pointer-events:auto}
.bm-card.active{transform:translateX(0) scale(1) rotateY(0);opacity:1;pointer-events:auto;background:rgba(var(--mode-color-r,108),var(--mode-color-g,92),var(--mode-color-b,231),.12);border-color:var(--mode-color,#6c5ce7);box-shadow:0 0 40px var(--mode-glow,rgba(108,92,231,.4)),0 20px 40px rgba(0,0,0,.4)}
.bm-card.next{transform:translateX(185px) scale(.82) rotateY(-15deg);opacity:.55;pointer-events:auto}
.bm-card-icon{font-size:3.2rem;line-height:1}
.bm-card-name{font-family:Outfit,sans-serif;font-weight:900;font-size:1.2rem;color:var(--mode-color,#6c5ce7)}
.bm-card-desc{font-size:.82rem;color:var(--text-secondary,#94a3b8);text-align:center;line-height:1.4}
.bm-card-proscons{display:flex;flex-direction:column;gap:4px;width:100%;margin-top:auto;padding-top:10px;border-top:1px solid rgba(255,255,255,.1);text-align:left}
.bm-pro{font-size:.75rem;color:#4ade80;font-weight:700;line-height:1.2}
.bm-con{font-size:.75rem;color:#f87171;font-weight:700;line-height:1.2}
.bm-dots{display:flex;gap:8px}
.bm-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.2);cursor:pointer;transition:.2s}
.bm-dot.active{width:22px;border-radius:4px;background:var(--accent,#6c5ce7)}
.bm-start-btn{padding:14px 48px;background:linear-gradient(135deg,#6c5ce7,#00d2ff);border:none;border-radius:16px;font-family:Outfit,sans-serif;font-weight:900;font-size:1.2rem;color:#fff;cursor:pointer;letter-spacing:1px;box-shadow:0 8px 30px rgba(108,92,231,.5);transition:transform .15s,box-shadow .15s}
.bm-start-btn:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 14px 40px rgba(108,92,231,.65)}
.bm-start-btn:active{transform:scale(.96)}
@keyframes spellFlash{0%{opacity:1}
100%{opacity:0}
}
.achievement-popup{position:fixed;top:80px;right:-400px;z-index:200;animation:.5s cubic-bezier(.34,1.56,.64,1) forwards achSlideIn}
.achievement-popup.ach-popup-exit{animation:.4s forwards achSlideOut}
@keyframes achSlideIn{0%{right:-400px}
100%{right:20px}
}
@keyframes achSlideOut{0%{right:20px;opacity:1}
100%{right:-400px;opacity:0}
}
.ach-popup-inner{display:flex;align-items:center;gap:14px;padding:16px 22px;border-radius:16px;background:rgba(10,10,30,.95);border:2px solid rgba(255,200,87,.4);box-shadow:0 8px 40px rgba(0,0,0,.6),0 0 30px rgba(255,200,87,.15);min-width:280px;max-width:380px}
.ach-popup-icon{font-size:2.5rem;flex-shrink:0;filter:drop-shadow(0 0 8px rgba(255,200,87,.4))}
.ach-popup-label{font-size:.7rem;font-weight:800;color:#ffc857;letter-spacing:2px;text-transform:uppercase}
.ach-popup-title{font-size:1.1rem;font-weight:900;color:#f8fafc;font-family:Outfit,sans-serif}
.ach-popup-desc{font-size:.8rem;color:#94a3b8;margin-top:2px}
.battle-stats-row{display:flex;gap:12px;justify-content:center;margin:8px 0;flex-wrap:wrap}
.bstat{font-size:.85rem;font-weight:700;color:#94a3b8;background:rgba(255,255,255,.06);padding:4px 12px;border-radius:8px;border:1px solid rgba(255,255,255,.08)}
.rb-game{display:flex;flex-direction:column;height:100%;max-width:800px;margin:0 auto;gap:16px;animation:.4s fadeIn}
.rb-hud{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px}
.rb-player-hud{display:flex;flex-direction:column;align-items:center;text-align:center}
.rb-you{align-items:flex-start;text-align:left}
.rb-opp{align-items:flex-end;text-align:right}
.rb-player-avatar{font-size:3.5rem;filter:drop-shadow(0 0 15px rgba(255,255,255,.2));margin-bottom:8px}
.rb-player-name{font-weight:900;font-size:1.1rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:1px}
.rb-player-score{font-size:3rem;font-weight:900;line-height:1;margin-top:4px;font-family:Outfit,sans-serif;text-shadow:0 0 20px rgba(255,255,255,.1)}
.rb-score-you{color:#2dc653}
.rb-score-opp{color:#ff6b6b}
.rb-hud-center{display:flex;flex-direction:column;align-items:center}
.rb-round-label{font-size:.85rem;font-weight:900;text-transform:uppercase;letter-spacing:2px}
.rb-round-num{font-size:1.8rem;font-weight:900;color:#f8fafc}
.rb-timer-wrap{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px}
.rb-timer-circle{width:70px;height:70px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#4c1d95,#2e1065);border:2px solid rgba(108,92,231,.5);display:flex;align-items:center;justify-content:center;font-size:1.8rem;font-weight:900;color:#fff;box-shadow:inset 0 0 20px rgba(0,0,0,.5),0 0 20px rgba(108,92,231,.4);transition:.3s}
.rb-timer-circle.rb-timer-warning{background:radial-gradient(circle at 30% 30%,#ef4444,#7f1d1d);border-color:#ef4444;box-shadow:inset 0 0 20px rgba(0,0,0,.5),0 0 30px rgba(239,68,68,.6);animation:.3s infinite alternate pulsemad}
@keyframes pulsemad{to{transform:scale(1.1)}
}
.rb-timer-bar-bg{width:100%;height:8px;background:rgba(0,0,0,.4);border-radius:4px;overflow:hidden;border:1px solid rgba(255,255,255,.1)}
.rb-timer-bar-fill{height:100%;background:linear-gradient(90deg,#6c5ce7,#00d2ff);border-radius:4px;box-shadow:0 0 10px #00d2ff}
.rb-answers{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:16px 0}
.rb-answer-btn{position:relative;padding:24px 20px;border-radius:20px;border:none;font-size:1.5rem;font-weight:900;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:12px;transition:.2s cubic-bezier(.34, 1.56, .64, 1);box-shadow:0 10px 30px rgba(0,0,0,.3);overflow:hidden}
.rb-answer-btn.rb-a{background:linear-gradient(135deg,#e63946,#780000);border:1px solid #ff4d6d}
.rb-answer-btn.rb-b{background:linear-gradient(135deg,#2196f3,#0a2463);border:1px solid #4cc9f0}
.rb-answer-btn.rb-c{background:linear-gradient(135deg,#ff9800,#9d0208);border:1px solid #ffba08}
.rb-answer-btn.rb-d{background:linear-gradient(135deg,#4caf50,#004b23);border:1px solid #70e000}
.rb-answer-btn::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(255,255,255,.1) 0,transparent 60%);opacity:0;transition:opacity .3s;pointer-events:none}
.rb-answer-btn:hover:not(:disabled){transform:translateY(-6px) scale(1.03);box-shadow:0 15px 40px rgba(0,0,0,.5),inset 0 0 20px rgba(255,255,255,.2)}
.rb-answer-btn:hover:not(:disabled)::before{opacity:1}
.rb-answer-btn:active:not(:disabled){transform:scale(.95)}
.rb-answer-icon{font-size:2rem;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4))}
.rb-answer-btn.rb-correct{animation:.5s cubic-bezier(.175,.885,.32,1.275) correctFlash;box-shadow:0 0 50px rgba(45,198,83,.8),inset 0 0 30px rgba(45,198,83,.8)!important;border-color:#2dc653!important;filter:brightness(1.2);z-index:10}
.rb-answer-btn.rb-wrong{opacity:.3;filter:grayscale(1);transform:scale(.95)}
.rb-answer-btn.rb-reveal{box-shadow:0 0 30px rgba(255,255,255,.4)!important;filter:brightness(1.2)}
@keyframes correctFlash{0%,100%{transform:scale(1)}
40%{transform:scale(1.1) translateY(-10px)}
}
.rb-roast-popup{position:fixed;top:50%;left:50%;width:90%;max-width:500px;transform:translate(-50%,-50%) scale(.5);background:rgba(10,10,25,.85);border:2px solid #ff6b6b;border-radius:30px;padding:40px 30px;text-align:center;z-index:2000;opacity:0;pointer-events:none;box-shadow:0 30px 100px rgba(0,0,0,.8),0 0 50px rgba(255,107,107,.3);animation:.5s cubic-bezier(.34,1.56,.64,1) forwards roastIn}
.rb-roast-popup.rb-roast-out{animation:.3s forwards roastOut}
@keyframes roastIn{to{transform:translate(-50%,-50%) scale(1);opacity:1}
}
@keyframes roastOut{to{transform:translate(-50%,-50%) scale(.8) translateY(40px);opacity:0}
}
.rb-roast-emoji{font-size:5rem;text-shadow:0 10px 30px rgba(0,0,0,.5);margin-bottom:10px}
.rb-roast-text{font-size:1.8rem;font-weight:900;color:#fff;line-height:1.2}
.rb-opp-buzz{background:rgba(255,107,107,.1);border:1px solid rgba(255,107,107,.3);border-radius:12px;padding:8px 16px;font-weight:900;color:#ff6b6b;text-align:center;animation:.3s cubic-bezier(.175,.885,.32,1.275) slideDown}
.rb-mm-spinner{width:80px;height:80px;border:6px solid rgba(108,92,231,.2);border-top-color:#6c5ce7;border-radius:50%;margin:0 auto;animation:1s linear infinite spin;box-shadow:0 0 30px rgba(108,92,231,.2)}
@keyframes spin{to{transform:rotate(360deg)}
}
@media (max-width:768px){.rb-answers{grid-template-columns:1fr}
.rb-answer-btn{padding:16px 12px;font-size:1.1rem;border-radius:14px}
.rb-player-avatar{font-size:2.5rem}
.rb-player-score{font-size:2rem}
.battle-center-hologram{flex-direction:column-reverse;align-items:center;gap:10px}
.avatar,.avatar-container,.entity,.entity canvas{pointer-events:none!important}
.battle-hud-top{padding:12px 10px;gap:4px;align-items:center}
.hud-holo-bar{width:125px;padding:8px 10px;border-radius:12px}
.holo-bar-header{margin-bottom:6px}
.holo-name{font-size:.7rem;letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:80px}
.holo-icon,.holo-level{display:none!important}
.holo-track{height:8px}
.holo-nums{font-size:.65rem;margin-top:4px}
.timer-orb{width:48px;height:48px;font-size:1.1rem}
.battle-arena{flex-direction:column;justify-content:flex-start;align-items:center;padding:75px 12px 90px;gap:15px}
.avatar-container,.entity canvas{width:100px;height:100px}
.player-entity{position:absolute;left:12px;top:75px}
.monster-entity{position:absolute;right:12px;top:75px}
.battle-question-panel{width:100%;min-width:0;margin-top:105px;padding:16px;border-radius:18px}
.bq-title{font-size:.8rem;margin-bottom:8px}
.bq-title button#toggle-scratchpad-btn{position:static!important;margin:8px auto 0!important;display:block;font-size:.85rem;padding:6px 12px}
.bq-question{font-size:clamp(1.2rem, 5vw, 1.8rem);margin:10px 0 16px}
.bq-options{grid-template-columns:1fr;gap:8px}
.bq-options button{padding:12px 14px;font-size:1rem;border-radius:12px}
.drawing-pad-wrapper{width:100%;max-width:290px;min-height:250px!important}
.drawing-canvas{height:140px}
}
.slime-splat-anim{animation:.5s ease-out slimeSplat}
@keyframes slimeSplat{0%,100%{transform:scale(1)}
20%{transform:scale(1.3,.7)}
40%{transform:scale(.8,1.2)}
60%{transform:scale(1.1,.9)}
}
.slime-explode-anim{animation:.6s ease-out forwards slimeExplode}
@keyframes slimeExplode{0%{transform:scale(1);filter:brightness(1) drop-shadow(0 0 0px transparent)}
30%{transform:scale(1.4,.6);filter:brightness(1.8) drop-shadow(0 0 15px #22c55e)}
60%{transform:scale(.6,1.5);filter:brightness(2.5) drop-shadow(0 0 30px #22c55e) invert(1)}
100%{transform:scale(0);opacity:0;filter:brightness(3) drop-shadow(0 0 50px #22c55e) invert(1)}
}
.targeting-overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1000;cursor:crosshair}
.targeting-prompt{position:absolute;top:20px;left:50%;transform:translateX(-50%);background:rgba(10,10,26,.85);border:1px solid var(--accent-secondary);box-shadow:0 0 15px rgba(0,210,255,.4);color:var(--text-primary);padding:10px 20px;border-radius:10px;font-family:Outfit,sans-serif;font-size:1.2rem;pointer-events:none;z-index:1001;animation:2s ease-in-out infinite float}
.entity.player-entity .avatar-container{animation:4s ease-in-out infinite playerFloatPremium!important}
.entity.monster-entity .avatar-container{animation:3.6s ease-in-out infinite monsterFloatPremium!important}
@keyframes playerFloatPremium{0%,100%{transform:translateY(0) rotate(0) scale(1);filter:drop-shadow(0 15px 20px rgba(108,92,231,.25)) drop-shadow(0 0 10px rgba(108,92,231,.1))}
50%{transform:translateY(-20px) rotate(1.5deg) scale(1.03);filter:drop-shadow(0 30px 35px rgba(108,92,231,.5)) drop-shadow(0 0 25px rgba(108,92,231,.3))}
}
@keyframes monsterFloatPremium{0%,100%{transform:translateY(0) rotate(0) scale(1);filter:drop-shadow(0 15px 20px rgba(255,107,107,.2)) drop-shadow(0 0 10px rgba(255,107,107,.08))}
50%{transform:translateY(-16px) rotate(-1.5deg) scale(1.04);filter:drop-shadow(0 25px 30px rgba(255,107,107,.45)) drop-shadow(0 0 20px rgba(255,107,107,.25))}
}
#global-chat-wrapper{position:fixed;bottom:0;right:20px;width:320px;z-index:60;background:var(--glass);border:1px solid var(--border);border-radius:16px 16px 0 0;transition:transform .2s}
#global-chat-wrapper.collapsed{transform:translateY(calc(100% - 45px))}
#global-chat-wrapper h3{font-size:.95rem;padding:10px 15px;border-bottom:1px solid var(--border)}
.online-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--success)}
.online-count{font-size:.8rem;color:var(--text2)}
#toggle-chat-btn{position:absolute;top:8px;right:10px;background:0 0;color:var(--text2);font-size:1rem;border:none;cursor:pointer}
#chat-messages{height:250px;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:4px}
.chat-msg{padding:6px 10px;border-radius:10px;font-size:.85rem;max-width:90%}
.player-msg{background:rgba(108,92,231,.1);align-self:flex-start}
.system-msg{background:rgba(0,210,255,.1);color:var(--accent2);align-self:center;text-align:center;font-style:italic;font-size:.8rem}
.chat-author{font-weight:700;color:var(--accent)}
.chat-input-row{display:flex;gap:6px;padding:10px}
#chat-input{flex:1;padding:8px 12px;border-radius:10px;background:rgba(255,255,255,.06);border:1px solid var(--border);color:var(--text);font-size:.9rem}
#chat-send-btn{padding:8px 16px;border-radius:10px;background:var(--accent);color:#fff;font-weight:700;border:none}
.modal{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(5,5,15,.7);display:flex;justify-content:center;align-items:center;z-index:99999!important}
.modal-content{padding:32px 28px;width:90%;max-width:480px;box-shadow:0 40px 100px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.15);position:relative;overflow:hidden;animation:.3s cubic-bezier(.25,1,.5,1) modalFadeIn}
@keyframes modalFadeIn{from{transform:scale(.95);opacity:0}
to{transform:scale(1);opacity:1}
}
.modal-content::after{content:'';position:absolute;top:0;left:0;width:100%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent)}
.modal-content h2{font-size:1.6rem;margin-bottom:18px;text-align:center;font-weight:900}
.modal-content .btn{width:100%;margin-top:10px}
#toast-container{position:fixed;top:20px;right:20px;z-index:999999;display:flex;flex-direction:column;align-items:flex-end;gap:10px;pointer-events:none}
.funny-toast{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--accent-primary);color:var(--text-primary);padding:12px 24px;font-size:1.1rem;box-shadow:var(--shadow-glow);opacity:0;transform:translateY(-20px) scale(.95);transition:.35s cubic-bezier(.25, 1, .5, 1)}
.funny-toast.show{opacity:1;transform:translateY(0) scale(1)}
#confetti-container{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:9999;overflow:hidden}
.confetti-piece{position:absolute;top:50%;left:50%;width:8px;height:8px;border-radius:2px;animation:2.5s ease-out forwards confettiExplode}
@keyframes confettiExplode{0%{transform:translate(-50%,-50%) scale(0);opacity:1}
15%{transform:translate(calc(-50% + var(--tx) * .8),calc(-50% + var(--ty) - 30vh)) scale(1) rotate(180deg);opacity:1}
100%{transform:translate(calc(-50% + var(--tx)),100vh) scale(1) rotate(720deg);opacity:0}
}
#big-announcement{position:fixed;top:50%;left:0;width:100%;transform:translateY(-50%);height:140px;display:flex;align-items:center;justify-content:center;z-index:10000;background:linear-gradient(0deg,transparent,rgba(0,0,0,.85) 20%,rgba(0,0,0,.85) 80%,transparent);font-size:2.2rem;font-weight:900;color:var(--accent-warning);text-align:center;pointer-events:none;border-top:2px solid rgba(255,200,87,.2);border-bottom:2px solid rgba(255,200,87,.2);text-shadow:0 10px 30px rgba(0,0,0,.8);box-shadow:0 0 50px rgba(0,0,0,.5)}
#result-modal .modal-content{text-align:center;background:rgba(5,5,15,.5);border-color:rgba(108,92,231,.5);box-shadow:0 40px 100px rgba(108,92,231,.3),inset 0 0 40px rgba(108,92,231,.2)}
#result-title{font-size:3rem;margin-bottom:12px;font-family:Outfit;font-weight:900;background:linear-gradient(135deg,#6c5ce7,#00d2ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 4px 15px rgba(0,210,255,.4))}
#result-message{font-size:1.1rem;color:#cbd5e1}
#result-rewards{margin:20px 0;font-size:1.4rem;color:#ffc857;font-weight:900;text-shadow:0 0 20px rgba(255,200,87,.4)}
.spatial-shop-layout{display:flex;flex-direction:column;height:100vh;overflow:hidden;background:radial-gradient(circle at 50% 10%,rgba(108,92,231,.05),transparent 60%)}
.shop-header{padding:30px 60px 20px;border-bottom:1px solid rgba(255,255,255,.05);background:rgba(5,5,15,.6);z-index:10}
.shop-mega-title{font-size:2.5rem;font-weight:900;letter-spacing:4px;margin-bottom:4px;text-transform:uppercase}
.shop-spatial-content{flex:1;padding:40px 60px;overflow-y:auto;scroll-behavior:smooth}
.shop-spatial-content::-webkit-scrollbar{width:6px}
.shop-spatial-content::-webkit-scrollbar-track{background:0 0}
.shop-spatial-content::-webkit-scrollbar-thumb{background:rgba(108,92,231,.3);border-radius:3px}
.shop-category-header{margin-bottom:24px}
.shop-category-header h2{font-size:1.5rem;font-weight:900;letter-spacing:2px}
.spatial-gallery{display:grid;gap:24px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.premium-gallery{grid-template-columns:repeat(3,1fr);gap:30px;margin-bottom:40px}
.shop-glass-card{padding:24px;box-shadow:0 10px 40px rgba(0,0,0,.4);display:flex;flex-direction:column;align-items:center;text-align:center;overflow:hidden;min-height:280px}
.shop-glass-card:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 20px 50px rgba(0,0,0,.6),inset 0 0 30px rgba(108,92,231,.1)}
.shop-card-icon{font-size:4rem;margin-bottom:20px;display:inline-block}
.shop-preview-visual{width:80px;height:80px;border-radius:50%;margin:10px auto 20px;box-shadow:0 0 20px rgba(255,255,255,.2)}
.shop-card-title{font-size:1.3rem;font-weight:900;margin-bottom:8px;color:#f8fafc;letter-spacing:1px}
.shop-card-desc{font-size:.9rem;color:#94a3b8;margin-bottom:20px;flex:1}
.shop-card-meta{font-size:.85rem;padding:6px 12px;border-radius:8px;background:rgba(108,92,231,.1);border:1px solid rgba(108,92,231,.2);color:#c4b5fd;margin-bottom:16px;font-weight:700}
.shop-card-meta.locked{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1);color:#cbd5e1}
.premium-glow{position:absolute;top:-50%;left:-50%;width:200%;height:200%;pointer-events:none;opacity:0;transition:opacity .5s;background:radial-gradient(circle at center,rgba(108,92,231,.2) 0,transparent 70%)}
.shop-glass-card:hover .premium-glow{opacity:1}
.pro-tier{border-color:rgba(45,198,83,.3)}
.pro-tier:hover{border-color:rgba(45,198,83,.8);box-shadow:0 20px 50px rgba(45,198,83,.2)}
.pro-tier .premium-glow{background:radial-gradient(circle at center,rgba(45,198,83,.2) 0,transparent 70%)}
.premium-tier{border-color:rgba(255,200,87,.3)}
.premium-tier:hover{border-color:rgba(255,200,87,.8);box-shadow:0 20px 50px rgba(255,200,87,.2)}
.premium-tier .premium-glow{background:radial-gradient(circle at center,rgba(255,200,87,.2) 0,transparent 70%)}
.pet-tier{border-color:rgba(255,107,107,.3)}
.pet-tier:hover{border-color:rgba(255,107,107,.8);box-shadow:0 20px 50px rgba(255,107,107,.2)}
.pet-tier .premium-glow{background:radial-gradient(circle at center,rgba(255,107,107,.2) 0,transparent 70%)}
.btn-spatial-buy{width:100%;padding:14px;font-weight:900;font-size:1rem;border:1px solid rgba(108,92,231,.4);cursor:pointer;transition:.2s cubic-bezier(.34, 1.56, .64, 1);position:relative;overflow:hidden}
.btn-spatial-buy:hover:not(:disabled){border-color:#6c5ce7;box-shadow:0 0 20px rgba(108,92,231,.4);transform:scale(1.02)}
.btn-spatial-equip{background:linear-gradient(135deg,#3b82f6,#2563eb);border:1px solid #60a5fa;color:#fff}
.btn-spatial-equip:hover{box-shadow:0 0 20px rgba(59,130,246,.6)}
.btn-spatial-equipped{background:rgba(45,198,83,.2);border:1px solid #2dc653;color:#2dc653;opacity:.8;cursor:default;pointer-events:none}
.btn-spatial-locked{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:#94a3b8;opacity:.5;cursor:not-allowed}
@media (max-width:1100px){.premium-gallery{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:768px){.premium-gallery{grid-template-columns:1fr}
.spatial-gallery{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
}
#profile-screen{padding:20px;height:100%;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(108,92,231,0.4) transparent}
.profile-header{display:flex;gap:20px;align-items:flex-start;background:rgba(10,10,24,.6);border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:24px;margin-bottom:20px;box-shadow:0 15px 40px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.1)}
.profile-avatar-wrap{display:flex;flex-direction:column;align-items:center;gap:6px}
.profile-avatar{width:84px;height:84px;font-size:3rem;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(108,92,231,.2),rgba(0,210,255,.1));border:2px solid rgba(108,92,231,.5);border-radius:50%;cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.5),inset 0 0 20px rgba(108,92,231,.2);user-select:none}
.profile-avatar:hover{transform:scale(1.1) rotate(5deg) translateY(-4px);box-shadow:0 15px 40px rgba(108,92,231,.4),inset 0 0 30px rgba(108,92,231,.4)}
.profile-avatar-hint{font-size:.62rem;color:var(--text-muted)}
.profile-info{flex:1;min-width:0}
.profile-name{font-size:1.4rem;font-weight:900;color:var(--text-primary)}
.profile-title{font-size:.8rem;color:var(--accent-warning);font-weight:700;margin-bottom:4px}
.profile-class{font-size:.85rem;font-weight:800;margin-bottom:8px}
.profile-level-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.profile-level-badge{background:linear-gradient(135deg,#6c5ce7,#a855f7);color:#fff;font-weight:900;font-size:.75rem;padding:3px 10px;border-radius:20px;white-space:nowrap;box-shadow:inset 0 0 10px rgba(255,255,255,.3)}
.profile-xp-bar-bg{flex:1;min-width:80px;height:8px;background:rgba(0,0,0,.6);border-radius:6px;overflow:hidden;box-shadow:inset 0 1px 3px rgba(0,0,0,.8);border:1px solid rgba(255,255,255,.05)}
.profile-xp-bar-fill{height:100%;background:linear-gradient(90deg,#6c5ce7,#00d2ff);border-radius:6px;transition:width .6s;box-shadow:0 0 12px rgba(0,210,255,.6)}
.profile-xp-text{font-size:.7rem;color:var(--text-muted);white-space:nowrap}
.profile-stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.profile-stat-card{display:flex;flex-direction:column;align-items:center;gap:4px;background:rgba(10,10,30,.4);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:14px 8px;text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.05);transition:.3s cubic-bezier(.34, 1.56, .64, 1)}
.profile-stat-card:hover{transform:translateY(-6px) scale(1.02);border-color:rgba(255,255,255,.15)}
.profile-stat-card:first-child:hover{box-shadow:0 20px 40px rgba(45,198,83,.2),inset 0 0 20px rgba(45,198,83,.1);border-color:rgba(45,198,83,.4)}
.profile-stat-card:nth-child(2):hover{box-shadow:0 20px 40px rgba(255,107,107,.2),inset 0 0 20px rgba(255,107,107,.1);border-color:rgba(255,107,107,.4)}
.profile-stat-card:nth-child(3):hover{box-shadow:0 20px 40px rgba(108,92,231,.2),inset 0 0 20px rgba(108,92,231,.1);border-color:rgba(108,92,231,.4)}
.profile-stat-card:nth-child(4):hover{box-shadow:0 20px 40px rgba(255,51,102,.2),inset 0 0 20px rgba(255,51,102,.1);border-color:rgba(255,51,102,.4)}
.profile-stat-card:nth-child(5):hover{box-shadow:0 20px 40px rgba(255,200,87,.2),inset 0 0 20px rgba(255,200,87,.1);border-color:rgba(255,200,87,.4)}
.profile-stat-card:nth-child(6):hover{box-shadow:0 20px 40px rgba(0,210,255,.2),inset 0 0 20px rgba(0,210,255,.1);border-color:rgba(0,210,255,.4)}
.psc-icon{font-size:1.4rem}
.psc-val{font-size:1.2rem;font-weight:900;color:var(--text-primary)}
.psc-label{font-size:.65rem;color:var(--text-muted);font-weight:600}
.profile-section-title{font-size:.8rem;font-weight:800;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.8px;margin:14px 0 8px}
.profile-bp-row{display:flex;align-items:center;gap:0;background:rgba(10,10,30,.4);border:1px solid rgba(255,200,87,.3);box-shadow:0 10px 30px rgba(0,0,0,.4),inset 0 0 20px rgba(255,200,87,.1);border-radius:16px;padding:12px 16px;margin-bottom:8px;transition:transform .3s cubic-bezier(.34, 1.56, .64, 1)}
.profile-bp-row:hover{transform:translateY(-4px);box-shadow:0 15px 40px rgba(255,200,87,.2),inset 0 0 30px rgba(255,200,87,.15)}
.profile-bp-level{font-size:.8rem;font-weight:800;color:#ffc857;white-space:nowrap}
.profile-ach-list{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:4px}
.profile-ach-badge{display:flex;flex-direction:column;align-items:center;gap:3px;background:rgba(45,198,83,.15);border:1px solid rgba(45,198,83,.3);border-radius:14px;padding:12px 14px;font-size:1.5rem;transition:.3s cubic-bezier(.34, 1.56, .64, 1);box-shadow:0 8px 20px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.1);cursor:default}
.profile-ach-badge:hover{transform:scale(1.1) translateY(-4px);box-shadow:0 15px 30px rgba(45,198,83,.3),inset 0 0 20px rgba(45,198,83,.2);border-color:rgba(45,198,83,.6)}
.pab-title{font-size:.62rem;color:var(--text-secondary);font-weight:700;text-align:center}
.profile-ach-empty{color:var(--text-muted);font-size:.85rem;font-style:italic}
.profile-avatar-picker{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:24px}
.avatar-pick-btn{font-size:1.8rem;background:rgba(10,10,30,.6);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:12px;cursor:pointer;transition:.3s cubic-bezier(.34, 1.56, .64, 1);box-shadow:inset 0 4px 10px rgba(0,0,0,.6)}
.avatar-pick-btn:hover{background:rgba(108,92,231,.15);transform:scale(1.1) translateY(-2px);box-shadow:0 10px 20px rgba(108,92,231,.3),inset 0 0 10px rgba(255,255,255,.1);border-color:rgba(108,92,231,.4)}
.avatar-pick-active{background:rgba(108,92,231,.3)!important;border-color:#00d2ff!important;box-shadow:0 10px 30px rgba(0,210,255,.4),inset 0 0 20px rgba(0,210,255,.3)!important;transform:scale(1.1)}
#class-cards-container{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:4px;max-height:60vh;overflow-y:auto}
.class-card{background:var(--bg-glass);border:2px solid var(--glass-border);border-radius:16px;padding:14px;cursor:pointer;transition:.25s;position:relative;overflow:hidden}
.class-card::before{content:'';position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,rgba(255,255,255,.04),transparent);pointer-events:none}
.class-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,0,0,.4)}
.class-card.selected{box-shadow:0 0 24px rgba(108,92,231,.4);background:rgba(108,92,231,.1)}
.class-card-top{display:flex;align-items:flex-start;gap:10px;padding-bottom:10px;margin-bottom:10px}
.class-card-icon{font-size:2rem;flex-shrink:0;filter:drop-shadow(0 0 8px currentColor)}
.class-card-info{flex:1}
.class-card-name{font-size:1rem;font-weight:900;margin:0 0 4px;font-family:Outfit,sans-serif}
.class-card-desc{font-size:.75rem;color:var(--text-secondary);margin:0;line-height:1.4}
.class-stat-bars{display:flex;flex-direction:column;gap:5px;margin-bottom:10px}
.stat-bar-row{display:flex;align-items:center;gap:6px}
.stat-bar-label{font-size:.65rem;font-weight:800;color:var(--text-muted);width:30px;text-transform:uppercase}
.stat-bar-bg{flex:1;height:5px;background:rgba(255,255,255,.08);border-radius:999px;overflow:hidden}
.stat-bar-fill{height:100%;border-radius:999px;transition:width .6s}
.class-abilities{display:flex;flex-direction:column;gap:4px}
.class-ability-item{display:flex;flex-direction:column;gap:1px}
.class-ability-name{font-size:.72rem;font-weight:800;color:var(--text-primary)}
.class-ability-desc{font-size:.65rem;color:var(--text-secondary);line-height:1.3}
#quest-panel{position:fixed;top:90px;right:24px;width:320px;z-index:1000;display:none!important;background:rgba(5,5,15,.7);border:1px solid rgba(255,255,255,.1);border-radius:24px;box-shadow:0 15px 40px rgba(0,0,0,.6),inset 0 0 20px rgba(255,255,255,.02);overflow:hidden;transition:.4s cubic-bezier(.34, 1.56, .64, 1);transform-origin:top right}
#quest-panel.visible{display:block;animation:.4s cubic-bezier(.34,1.56,.64,1) questPanelSlide}
@keyframes questPanelSlide{from{opacity:0;transform:scale(.9) translateY(-20px)}
to{opacity:1;transform:scale(1) translateY(0)}
}
#quest-panel-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:rgba(255,255,255,.03);border-bottom:1px solid rgba(255,255,255,.08);text-align:left}
#quest-panel-header h4{margin:0;font-size:1.1rem;font-weight:900;font-family:Outfit,sans-serif;color:#f8fafc;text-transform:uppercase;letter-spacing:1px;display:flex;align-items:center;gap:8px}
#quest-panel-toggle{background:rgba(255,255,255,.1);border:none;color:#fff;width:28px;height:28px;border-radius:50%;cursor:pointer;font-size:.8rem;display:flex;align-items:center;justify-content:center;transition:.2s;box-shadow:0 2px 8px rgba(0,0,0,.2)}
#quest-panel-toggle:hover{background:rgba(255,255,255,.2);transform:scale(1.1)}
#quest-panel-body{padding:16px;display:flex;flex-direction:column;gap:12px;max-height:400px;overflow-y:auto}
#quest-panel-body::-webkit-scrollbar{width:4px}
#quest-panel-body::-webkit-scrollbar-track{background:0 0}
#quest-panel-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:10px}
#quest-panel-body.hidden{display:none!important}
.quest-item{position:relative;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:14px;transition:.3s cubic-bezier(.34, 1.56, .64, 1);overflow:hidden}
.quest-item:hover{transform:translateY(-3px);background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.2)}
.quest-item.quest-done{background:rgba(45,198,83,.1);border-color:rgba(45,198,83,.4);box-shadow:0 0 20px rgba(45,198,83,.2) inset}
.quest-header{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px}
.quest-icon{font-size:1.8rem;flex-shrink:0;filter:drop-shadow(0 4px 6px rgba(0,0,0,.5));line-height:1}
.quest-info{flex:1;display:flex;flex-direction:column;gap:4px}
.quest-title{font-size:.95rem;font-weight:900;color:#f8fafc;line-height:1.1;font-family:Outfit,sans-serif}
.quest-desc{font-size:.75rem;color:#94a3b8;line-height:1.3;font-weight:600}
.quest-reward{font-size:.85rem;font-weight:900;color:#ffc857;white-space:nowrap;text-align:right;background:rgba(255,200,87,.1);padding:4px 8px;border-radius:8px;border:1px solid rgba(255,200,87,.3)}
.quest-bar-bg{width:100%;height:8px;background:rgba(0,0,0,.5);border-radius:4px;overflow:hidden;margin-bottom:6px;border:1px solid rgba(255,255,255,.05);box-shadow:inset 0 1px 3px rgba(0,0,0,.8)}
.quest-bar-fill{height:100%;border-radius:4px;border-right:1px solid rgba(255,255,255,.3);background:linear-gradient(90deg,#6c5ce7,#00d2ff);box-shadow:0 0 10px rgba(0,210,255,.6);transition:width .6s cubic-bezier(.34, 1.56, .64, 1)}
.quest-bar-fill.quest-bar-done{background:linear-gradient(90deg,#2dc653,#0fa);box-shadow:0 0 15px rgba(45,198,83,.8);animation:2s linear infinite quest-shining}
@keyframes quest-shining{0%,100%{filter:brightness(1)}
50%{filter:brightness(1.3)}
}
.quest-progress-label{font-size:.75rem;color:#94a3b8;font-weight:700;text-align:right;letter-spacing:.5px}
.quest-item.quest-done .quest-progress-label{color:#2dc653;font-weight:900}
.quest-badge{display:none;position:absolute;top:0;right:-4px;background:#ff6b6b;color:#fff;font-size:.65rem;font-weight:900;width:18px;height:18px;border-radius:50%;align-items:center;justify-content:center;box-shadow:0 0 10px rgba(255,107,107,.6);border:2px solid #0a0a1a}
#battlepass-screen{overflow-y:auto}
.bp-container{max-width:700px;margin:0 auto;padding:10px 0 40px}
.bp-header{background:linear-gradient(135deg,rgba(108,92,231,.25),rgba(0,210,255,.15));border:1px solid var(--glass-border);border-radius:20px;padding:20px 24px;margin-bottom:20px;position:relative;overflow:hidden}
.bp-header::before{content:'';position:absolute;top:-40px;right:-40px;width:150px;height:150px;background:radial-gradient(circle,rgba(108,92,231,.25) 0,transparent 70%);pointer-events:none}
.bp-season-label{font-size:.8rem;font-weight:700;color:var(--accent-secondary);text-transform:uppercase;letter-spacing:2px;margin-bottom:4px}
#bp-season-name{font-family:Outfit,sans-serif;font-weight:900;font-size:1.3rem;color:var(--text-primary);margin-bottom:14px}
.bp-level-row{display:flex;align-items:center;gap:16px;margin-bottom:8px}
.bp-level-num{font-family:Outfit,sans-serif;font-weight:900;font-size:3rem;color:var(--accent-primary);line-height:1;min-width:60px}
.bp-level-info{flex:1}
.bp-xp-bar-bg{height:8px;background:rgba(255,255,255,.08);border-radius:10px;overflow:hidden;margin-bottom:4px}
#bp-xp-bar{height:100%;background:linear-gradient(90deg,var(--accent-primary),var(--accent-secondary));border-radius:10px;transition:width .4s}
#bp-xp-label{font-size:.78rem;font-weight:700;color:var(--text-secondary)}
#bp-premium-badge{display:none;align-items:center;gap:6px;background:linear-gradient(135deg,rgba(255,200,87,.2),rgba(255,200,87,.1));border:1px solid rgba(255,200,87,.3);border-radius:20px;padding:4px 12px;font-size:.8rem;font-weight:800;color:var(--accent-warning)}
#bp-upgrade-btn{width:100%;padding:12px;font-size:1rem;background:linear-gradient(135deg,gold,#f59e0b);color:#1a1a1a;font-weight:900;border-radius:14px;border:none;cursor:pointer;margin-top:14px;transition:.2s}
#bp-upgrade-btn:hover{transform:scale(1.02);box-shadow:0 6px 20px rgba(255,215,0,.3)}
.bp-column-headers{display:grid;grid-template-columns:48px 1fr 1fr;gap:8px;margin-bottom:8px;padding:0 4px}
.bp-col-label{font-size:.75rem;font-weight:900;color:var(--text-secondary);text-transform:uppercase;letter-spacing:1px;text-align:center}
.bp-col-label.premium-label{color:var(--accent-warning)}
#bp-tracks{display:flex;flex-direction:column;gap:8px}
.bp-row{display:grid;grid-template-columns:48px 1fr 1fr;gap:8px;align-items:center;opacity:.6;transition:opacity .2s}
.bp-row.bp-unlocked{opacity:1}
.bp-level-badge{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.06);border:2px solid var(--glass-border);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:.8rem;color:var(--text-secondary);margin:0 auto;flex-shrink:0;transition:.2s}
.bp-lvl-done{background:rgba(45,198,83,.15);border-color:var(--accent-success);font-size:1rem}
.bp-card{background:var(--bg-glass);border:1px solid var(--glass-border);border-radius:12px;padding:10px 12px;display:flex;align-items:center;gap:8px;min-height:46px;transition:.2s}
.bp-card-done{border-color:rgba(45,198,83,.35);background:rgba(45,198,83,.07)}
.bp-track-premium.bp-locked{border-color:rgba(255,200,87,.15);background:rgba(255,200,87,.04)}
.bp-reward-icon{font-size:1.1rem;flex-shrink:0}
.bp-reward-label{font-size:.78rem;font-weight:700;color:var(--text-primary);line-height:1.3}
.bp-track-premium.bp-locked .bp-reward-label{color:var(--text-muted)}
.bp-empty{color:var(--text-muted);font-size:.8rem;width:100%;text-align:center}
.bp-row.bp-current .bp-level-badge{background:rgba(108,92,231,.3);border-color:var(--accent-primary);color:var(--accent-primary);box-shadow:0 0 12px rgba(108,92,231,.5);animation:2s infinite bp-pulse}
.bp-row.bp-current{opacity:1}
@keyframes bp-pulse{0%,100%{box-shadow:0 0 12px rgba(108,92,231,.5)}
50%{box-shadow:0 0 24px rgba(108,92,231,.8)}
}
.bp-levelup-flash{animation:.8s bp-levelup}
@keyframes bp-levelup{0%,100%{color:var(--accent-primary);transform:scale(1)}
30%{color:gold;transform:scale(1.4);text-shadow:0 0 20px gold}
}
.adventure-map{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;overflow:hidden;background:#050510}
.map-header{display:flex;align-items:center;gap:14px;padding:8px 20px;background:rgba(5,5,18,.75);border-bottom:1px solid rgba(245,158,11,.15);z-index:10;box-shadow:0 4px 40px rgba(0,0,0,.6),0 1px 0 rgba(245,158,11,.1);flex-shrink:0}
.map-player-info{display:flex;align-items:center;gap:12px}
.map-player-avatar{font-size:1.7rem;filter:drop-shadow(0 0 10px rgba(245,158,11,.5))}
.map-player-name{font-size:.92rem;font-weight:900;color:#f8fafc;font-family:Outfit,sans-serif}
.map-player-level{font-size:.65rem;color:#f59e0b;font-weight:700;letter-spacing:1px;text-transform:uppercase}
.map-stats{display:flex;gap:12px;flex:1;max-width:260px}
.map-stat-bar{flex:1;display:flex;align-items:center;gap:6px}
.map-stat-label{font-size:.72rem;font-weight:700;white-space:nowrap}
.map-bar-bg{flex:1;height:8px;background:rgba(255,255,255,.08);border-radius:5px;overflow:hidden}
.map-bar-fill{height:100%;border-radius:5px;transition:width .5s}
.map-hp-fill{background:linear-gradient(90deg,#059669,#10b981);box-shadow:0 0 6px rgba(16,185,129,.5)}
.map-xp-fill{background:linear-gradient(90deg,#d97706,#f59e0b);box-shadow:0 0 6px rgba(245,158,11,.5)}
.map-currency-hud{display:flex;gap:14px}
.map-currency{font-size:.88rem;color:#f59e0b;font-weight:800}
.map-currency b{color:#fff}
.btn-icon{width:40px;height:40px;border-radius:12px;background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.2);font-size:1.1rem;cursor:pointer;transition:.25s cubic-bezier(.34, 1.56, .64, 1);color:#f8fafc}
.btn-icon:hover{background:rgba(245,158,11,.2);transform:scale(1.1) rotate(5deg);box-shadow:0 0 15px rgba(245,158,11,.3);border-color:rgba(245,158,11,.5)}
.map-camera{flex:1;position:relative;overflow:auto;cursor:grab;display:block}
.map-world{position:relative;width:100%;height:100%}
.map-world::before{content:'';position:absolute;inset:0;z-index:0;background:radial-gradient(1.5px 1.5px at 12% 8%,rgba(255,255,255,.5),transparent),radial-gradient(2px 2px at 28% 5%,rgba(245,158,11,.4),transparent),radial-gradient(1px 1px at 65% 4%,rgba(255,255,255,.4),transparent),radial-gradient(2px 2px at 88% 7%,rgba(168,85,247,.4),transparent),radial-gradient(1px 1px at 40% 9%,rgba(255,255,255,.2),transparent),radial-gradient(1.5px 1.5px at 74% 11%,rgba(96,165,250,.3),transparent);pointer-events:none}
.map-world::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:2;background:radial-gradient(ellipse at 50% 50%,transparent 40%,rgba(3,3,12,.6) 100%)}
.map-paths{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.map-paths path{fill:none;stroke:rgba(255,255,255,0.25);stroke-width:.5;transition:.3s;stroke-linecap:round}
.map-node{transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;filter:drop-shadow(0 8px 16px rgba(0,0,0,.6));display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;z-index:5;transform-origin:center center;pointer-events:auto}
.map-node:hover{transform:translate(-50%,-50%) translateY(-8px) scale(1.06)}
.map-node:not(.node-unlocked):active{animation:.3s lockedShake}
.map-node::before{content:'';position:absolute;top:-90px;left:-30px;right:-30px;height:90px}
.map-node:hover:not(.node-locked-state){z-index:15;transform:translate(-50%,-50%) scale(1.15)!important}
.node-lock{position:absolute;top:-10%;right:-10%;font-size:clamp(1rem, 2vmin, 1.5rem);background:rgba(10,10,24,.9);border:2px solid rgba(255,255,255,.2);border-radius:50%;width:clamp(24px,4vmin,36px);height:clamp(24px,4vmin,36px);display:flex;align-items:center;justify-content:center;z-index:10;box-shadow:0 6px 16px rgba(0,0,0,.8),inset 0 0 12px rgba(0,0,0,.6);pointer-events:none}
.node-icon{width:clamp(50px,8vmin,76px);height:clamp(50px,8vmin,76px);border-radius:50%;background:rgba(8,8,28,.75);border:3px solid rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;font-size:clamp(1.5rem, 4vmin, 2.3rem);box-shadow:0 15px 40px rgba(0,0,0,.8),inset 0 2px 0 rgba(255,255,255,.2),inset 0 -6px 20px rgba(0,0,0,.5);transition:.4s cubic-bezier(.34, 1.56, .64, 1);position:relative}
.node-unlocked .node-icon{border-color:rgba(245,158,11,.7);box-shadow:0 18px 50px rgba(0,0,0,.8),0 0 30px rgba(245,158,11,.3),inset 0 0 40px rgba(245,158,11,.15)}
.map-node[data-zone=meadow] .node-icon{border-color:rgba(45,198,83,.8);box-shadow:0 18px 50px rgba(0,0,0,.8),0 0 30px rgba(45,198,83,.35)}
.map-node[data-zone=forest] .node-icon{border-color:#10b981;box-shadow:0 18px 50px rgba(0,0,0,.8),0 0 30px rgba(16,185,129,.35)}
.map-node[data-zone=cave] .node-icon{border-color:rgba(139,92,246,.9);box-shadow:0 18px 50px rgba(0,0,0,.8),0 0 35px rgba(139,92,246,.4)}
.map-node[data-zone=volcano].node-icon{border-color:rgba(239,68,68,.9);box-shadow:0 18px 50px rgba(0,0,0,.8),0 0 35px rgba(239,68,68,.4)}
.map-node[data-zone=ice] .node-icon{border-color:rgba(96,165,250,.9);box-shadow:0 18px 50px rgba(0,0,0,.8),0 0 35px rgba(96,165,250,.4)}
.map-node[data-zone=desert] .node-icon{border-color:rgba(245,158,11,.9);box-shadow:0 18px 50px rgba(0,0,0,.8),0 0 35px rgba(245,158,11,.4)}
.map-node[data-zone=castle] .node-icon{border-color:rgba(168,85,247,.9);box-shadow:0 18px 50px rgba(0,0,0,.8),0 0 45px rgba(168,85,247,.5)}
.map-node:hover .node-icon{border-width:4px;box-shadow:0 25px 70px rgba(0,0,0,.9),0 0 60px inherit,0 0 100px inherit,inset 0 0 50px inherit}
.node-label{margin-top:clamp(4px,1vmin,8px);font-size:clamp(.7rem, 2vmin, .9rem);font-weight:900;color:#f8fafc;text-shadow:0 3px 12px #000,0 0 20px rgba(0,0,0,.8);white-space:nowrap;font-family:Outfit,sans-serif;letter-spacing:.5px}
.node-act{font-size:clamp(.5rem, 1.5vmin, .65rem);font-weight:800;color:#f59e0b;background:rgba(0,0,0,.85);padding:2px 8px;border-radius:99px;margin-top:clamp(2px,.5vmin,4px);letter-spacing:1px;text-transform:uppercase;border:1px solid rgba(245,158,11,.4);box-shadow:0 4px 10px rgba(0,0,0,.5)}
.node-progress{width:clamp(40px,7vmin,64px);height:5px;margin-top:clamp(4px,1vmin,6px);background:rgba(255,255,255,.1);border-radius:99px;overflow:hidden;border:1px solid rgba(255,255,255,.1);box-shadow:0 2px 8px rgba(0,0,0,.5)}
.node-progress-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,#f59e0b,#fde047);box-shadow:0 0 10px rgba(245,158,11,.6);transition:width .6s}
.node-current .node-icon{border:4px solid #fcd34d;animation:2s ease-in-out infinite currentPulse}
@keyframes currentPulse{0%,100%{box-shadow:0 15px 45px rgba(0,0,0,.8),0 0 20px rgba(245,158,11,.4)}
50%{box-shadow:0 15px 45px rgba(0,0,0,.8),0 0 50px rgba(245,158,11,.8),0 0 100px rgba(245,158,11,.4)}
}
.node-boss .node-icon{width:90px;height:90px;font-size:2.6rem;border-color:rgba(239,68,68,.9);box-shadow:0 12px 35px rgba(0,0,0,.8),0 0 40px rgba(239,68,68,.5)}
.node-locked-state{opacity:.9;cursor:not-allowed}
.node-locked-state:hover{opacity:1;transform:translate(-50%,-50%) scale(1.05)!important}
@keyframes lockedShake{0%,100%{transform:translate(-50%,-50%)}
25%{transform:translate(calc(-50% + 8px),-50%)}
75%{transform:translate(calc(-50% - 8px),-50%)}
}
.node-tooltip{position:absolute;bottom:calc(100% + 18px);left:50%;transform:translateX(-50%) translateY(10px);background:rgba(5,5,18,.95);border:1px solid rgba(245,158,11,.35);border-radius:16px;padding:14px 20px;white-space:nowrap;font-size:.85rem;color:#94a3b8;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s cubic-bezier(.34,1.56,.64,1);z-index:20;box-shadow:0 20px 50px rgba(0,0,0,.8),0 0 30px rgba(245,158,11,.1),inset 0 1px 0 rgba(255,255,255,.1)}
.node-tooltip strong{color:#f8fafc;display:block;margin-bottom:5px;font-size:.9rem}
.map-node:hover .node-tooltip{opacity:1;transform:translateX(-50%) translateY(0)}
.map-deco{position:absolute;font-size:1.5rem;pointer-events:none;opacity:.4;animation:5s ease-in-out infinite decoFloat;filter:drop-shadow(0 3px 6px rgba(0,0,0,.5))}
@keyframes decoFloat{0%,100%{transform:translateY(0)}
50%{transform:translateY(-8px)}
}
.adventure-map::after{content:'';position:absolute;bottom:0;left:0;right:0;height:100px;pointer-events:none;z-index:4;background:linear-gradient(0deg,rgba(4,4,13,.8) 0,transparent 100%)}
.zone-view-wrap{display:flex;flex-direction:column;width:100%;height:100%;overflow-y:auto;overflow-x:hidden;box-sizing:border-box;position:relative}
.zone-view-wrap::before{content:'';position:fixed;inset:0;background:radial-gradient(ellipse at 20% 50%,var(--zone-glow-raw,rgba(108,92,231,.12)) 0,transparent 50%),radial-gradient(ellipse at 80% 20%,var(--zone-glow-raw,rgba(108,92,231,.08)) 0,transparent 40%),radial-gradient(ellipse at 60% 80%,var(--zone-glow-raw,rgba(108,92,231,.06)) 0,transparent 35%);pointer-events:none;z-index:0}
.zone-hero-header{display:flex;align-items:center;gap:24px;padding:20px 32px;background:linear-gradient(180deg,color-mix(in srgb,var(--zone-color,#6c5ce7) 15%,rgba(5,5,18,.95)) 0,rgba(8,8,28,.7) 100%);border-bottom:1px solid rgba(255,255,255,.08);position:sticky;top:0;z-index:20;box-shadow:inset 0 -1px 0 rgba(255,255,255,.05),inset 0 1px 0 rgba(255,255,255,.1),0 25px 80px rgba(0,0,0,.8);flex-shrink:0}
.zone-hero-header::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent 0,var(--zone-color,#6c5ce7) 40%,var(--zone-color,#6c5ce7) 60%,transparent 100%);opacity:.9;animation:3s ease-in-out infinite headerLineFlow;box-shadow:0 0 20px var(--zone-color)}
@keyframes headerLineFlow{0%,100%{opacity:.5;filter:hue-rotate(0deg)}
50%{opacity:1;filter:hue-rotate(15deg)}
}
.zone-hero-icon{font-size:3.5rem;filter:drop-shadow(0 0 30px var(--zone-glow, rgba(108,92,231,.8)));flex-shrink:0;animation:4s ease-in-out infinite heroIconPop;position:relative;z-index:1}
@keyframes heroIconPop{0%,100%{transform:scale(1) rotate(-4deg)}
50%{transform:scale(1.15) rotate(4deg)}
}
.zone-hero-info{flex:1;min-width:0;position:relative;z-index:1}
.zone-hero-name{font-size:clamp(1.5rem, 6vw, 2.5rem);font-weight:900;color:#f8fafc;font-family:Outfit,sans-serif;letter-spacing:.5px;text-shadow:0 0 40px var(--zone-glow,rgba(108,92,231,.6)),0 4px 12px rgba(0,0,0,.9)}
.zone-hero-act{font-size:clamp(.75rem, 2.5vw, .9rem);font-weight:900;letter-spacing:4px;color:var(--zone-color,#6c5ce7);text-transform:uppercase;margin-top:4px;margin-bottom:12px;opacity:1;text-shadow:0 2px 8px rgba(0,0,0,.8)}
.zone-hero-progress-wrap{display:flex;align-items:center;gap:12px}
.zone-hero-progress-bar{flex:1;max-width:240px;height:8px;background:rgba(0,0,0,.4);border-radius:99px;overflow:hidden;border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 2px 6px rgba(0,0,0,.6);position:relative}
.zone-hero-progress-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,color-mix(in srgb,var(--zone-color,#6c5ce7) 60%,#000),var(--zone-color,#6c5ce7));transition:width .8s cubic-bezier(.4, 0, .2, 1);box-shadow:0 0 16px var(--zone-glow,rgba(108,92,231,.8));position:relative}
.zone-hero-progress-fill::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent 0,rgba(255,255,255,.5) 50%,transparent 100%);animation:2s ease-in-out infinite progressShimmer}
@keyframes progressShimmer{0%{transform:translateX(-100%)}
100%{transform:translateX(300%)}
}
.zone-hero-pct{font-size:.75rem;color:#cbd5e1;font-weight:800;white-space:nowrap;font-family:Outfit,sans-serif}
.zone-hero-btns{display:flex;gap:10px;flex-shrink:0;position:relative;z-index:1}
.zone-back-btn{padding:12px 24px;border-radius:14px;font-weight:800;font-size:clamp(.9rem, 3.5vw, 1rem);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);color:#f8fafc;cursor:pointer;transition:.3s cubic-bezier(.34,1.56,.64,1);font-family:Outfit,sans-serif;box-shadow:0 4px 15px rgba(0,0,0,.5)}
.zone-back-btn:hover{border-color:rgba(245,158,11,.4);color:#f59e0b;transform:translateY(-2px) scale(1.03);box-shadow:0 8px 24px rgba(245,158,11,.2)}
.zone-locations-list{display:flex;flex-direction:column;align-items:center;padding:24px 28px 80px;width:100%;max-width:100%;margin:0;box-sizing:border-box;position:relative;z-index:1}
.zone-loc-connector{width:40px;height:36px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;flex-shrink:0}
.zone-loc-line{width:2px;height:24px;background:linear-gradient(180deg,var(--zone-color,rgba(245,158,11,.6)),rgba(245,158,11,.1));border-radius:99px;position:relative}
.zone-loc-line::after{content:'';position:absolute;width:6px;height:6px;border-radius:50%;background:var(--zone-color,#f59e0b);left:50%;transform:translateX(-50%);box-shadow:0 0 8px var(--zone-color,#f59e0b);animation:2s ease-in-out infinite orbTravel;top:0}
@keyframes orbTravel{0%{top:0;opacity:1}
100%{top:100%;opacity:0}
}
.zone-loc-card{display:flex;align-items:center;gap:clamp(16px,2.5vw,32px);width:clamp(300px,75vw,1400px);padding:clamp(16px,2.5vw,32px) clamp(20px,4vw,40px);background:rgba(8,8,20,.9);border:1px solid rgba(255,255,255,.15);border-radius:24px;cursor:pointer;flex-shrink:0;box-shadow:0 8px 30px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.05);transition:transform .4s cubic-bezier(.34,1.56,.64,1),box-shadow .4s,border-color .4s,background .4s;position:relative;overflow:hidden;box-sizing:border-box;z-index:1}
.loc-holo-border{position:absolute;overflow:hidden;inset:-2px;z-index:-2;border-radius:26px}
.loc-holo-border::before{content:'';position:absolute;top:50%;left:50%;width:200%;height:500%;background:conic-gradient(from 0deg,transparent 0,transparent 70%,var(--loc-color,#f59e0b) 100%,transparent 100%);transform-origin:center center;animation:3s linear infinite spinHolo;opacity:.9;z-index:-2}
.loc-holo-border::after{content:'';position:absolute;inset:2px;border-radius:24px;background:#0c0c20;z-index:-1}
@keyframes spinHolo{0%{transform:translate(-50%,-50%) rotate(0)}
100%{transform:translate(-50%,-50%) rotate(360deg)}
}
.zone-loc-card::after{content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent);transform:skewX(-15deg);transition:left .6s;pointer-events:none;z-index:0}
.zone-loc-card:hover::after{left:160%}
.zone-loc-card:hover:not(.loc-locked){transform:translateY(-8px) scale(1.02);box-shadow:0 25px 70px rgba(0,0,0,.7),0 0 0 1px var(--loc-color,rgba(255,255,255,.2)),0 10px 40px var(--loc-glow,rgba(0,0,0,.1)),inset 0 0 60px rgba(255,255,255,.03);border-color:transparent;background:rgba(15,15,40,.85)}
.loc-icon-wrap{position:relative;flex-shrink:0;z-index:1}
.loc-icon{width:clamp(56px,7vw,100px);height:clamp(56px,7vw,100px);border-radius:clamp(14px,2vw,24px);display:flex;align-items:center;justify-content:center;font-size:clamp(1.8rem, 4vw, 3.5rem);background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),inset 0 -1px 0 rgba(0,0,0,.3);transition:.4s cubic-bezier(.34,1.56,.64,1);position:relative;overflow:hidden}
.zone-loc-card:hover:not(.loc-locked) .loc-icon{background:var(--loc-glow,rgba(245,158,11,.15));border-color:var(--loc-color,rgba(255,255,255,.4));transform:scale(1.1) rotate(-5deg);box-shadow:0 0 30px var(--loc-glow),inset 0 1px 0 rgba(255,255,255,.2)}
.loc-check{position:absolute;top:-10px;right:-10px;width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,#10b981,#34d399);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:900;border:2px solid #050514;box-shadow:0 0 14px rgba(52,211,153,.7),0 3px 10px rgba(0,0,0,.5)}
.loc-info{flex:1;min-width:0;z-index:1}
.loc-name{font-size:clamp(1.1rem, 3.5vw, 2rem);font-weight:900;color:#f8fafc;margin-bottom:6px;font-family:Outfit,sans-serif;letter-spacing:.3px;text-shadow:0 2px 8px rgba(0,0,0,.6)}
.loc-desc{font-size:clamp(.85rem, 2.5vw, 1.4rem);color:#94a3b8;line-height:1.4;margin-bottom:12px}
.loc-tags{display:flex;gap:6px;flex-wrap:wrap;z-index:1}
.loc-type-tag{font-size:clamp(.7rem, 2.5vw, .85rem);font-weight:700;padding:4px 10px;border-radius:99px;letter-spacing:.5px;background:rgba(245,158,11,.08);color:#fbbf24;border:1px solid rgba(245,158,11,.2)}
.loc-tag-done{font-size:clamp(.7rem, 2.5vw, .85rem);font-weight:700;padding:4px 10px;border-radius:99px;background:rgba(52,211,153,.08);color:#34d399;border:1px solid rgba(52,211,153,.2)}
.loc-tag-ready{font-size:clamp(.7rem, 2.5vw, .85rem);font-weight:800;padding:4px 12px;border-radius:99px;letter-spacing:.5px;background:rgba(245,158,11,.15);color:#f59e0b;border:1px solid rgba(245,158,11,.4);animation:1.8s ease-in-out infinite tagReadyPulse}
@keyframes tagReadyPulse{0%,100%{box-shadow:0 0 0 0 rgba(245,158,11,.4)}
50%{box-shadow:0 0 0 4px rgba(245,158,11,0)}
}
.loc-tag-lock{font-size:clamp(.7rem, 2.5vw, .85rem);font-weight:700;padding:4px 10px;border-radius:99px;background:rgba(100,116,139,.08);color:#475569;border:1px solid rgba(100,116,139,.15)}
.loc-stars{font-size:.8rem;flex-shrink:0;letter-spacing:1px}
.loc-arrow{font-size:1.5rem;color:#f59e0b;flex-shrink:0;opacity:.9;animation:1.2s ease-in-out infinite arrowBounce;text-shadow:0 0 12px rgba(245,158,11,.6)}
@keyframes arrowBounce{0%,100%{transform:translateX(0)}
50%{transform:translateX(6px)}
}
.loc-unlocked{border-color:rgba(255,255,255,.08)}
.loc-completed{border-color:rgba(52,211,153,.3);background:rgba(16,32,24,.9)}
.loc-completed:hover{border-color:rgba(52,211,153,.6)!important;box-shadow:0 25px 70px rgba(0,0,0,.6),0 0 40px rgba(52,211,153,.15)!important;background:rgba(20,40,30,.95)!important}
.loc-completed .loc-icon{background:rgba(52,211,153,.12);border-color:rgba(52,211,153,.4)}
.loc-current{border-color:transparent;background:rgba(12,12,32,.9);box-shadow:0 12px 40px rgba(0,0,0,.6),0 0 50px var(--loc-glow,rgba(245,158,11,.15))}
.loc-current:hover{box-shadow:0 30px 80px rgba(0,0,0,.8),0 0 0 1px var(--loc-color,rgba(245,158,11,.4)),0 0 80px var(--loc-glow,rgba(245,158,11,.25))!important}
.loc-current .loc-icon{background:var(--loc-glow,rgba(245,158,11,.2));border-color:var(--loc-color,rgba(245,158,11,.6));box-shadow:0 0 30px var(--loc-glow),inset 0 1px 0 rgba(255,255,255,.2)}
.loc-boss{border-color:rgba(239,68,68,.4);background:rgba(40,16,16,.9)}
.loc-boss:not(.loc-locked):hover{border-color:rgba(239,68,68,.8)!important;box-shadow:0 25px 80px rgba(239,68,68,.2),0 0 0 1px rgba(239,68,68,.5)!important;background:rgba(50,20,20,.95)!important}
.loc-boss .loc-icon{background:rgba(239,68,68,.15);border-color:rgba(239,68,68,.4)}
.loc-boss.loc-current{animation:2s ease-in-out infinite bossCardPulse}
@keyframes bossCardPulse{0%,100%{box-shadow:0 12px 40px rgba(0,0,0,.6),0 0 40px rgba(239,68,68,.15)}
50%{box-shadow:0 12px 40px rgba(0,0,0,.6),0 0 80px rgba(239,68,68,.35)}
}
.loc-locked{opacity:.7;cursor:not-allowed;filter:grayscale(80%)}
.loc-locked:hover{transform:none!important;box-shadow:0 8px 30px rgba(0,0,0,.5)!important;border-color:rgba(255,255,255,.06)!important}
.map-quest-panel{display:none!important}
.map-dragging{cursor:grabbing!important}
.adv-event-modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:200;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.7);animation:.2s fadeIn}
.adv-event-card{padding:30px 36px;border-radius:28px;text-align:center;max-width:420px;width:92%;border:3px solid rgba(255,255,255,.2);position:relative;background:rgba(15,15,40,.95);box-shadow:0 8px 40px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.05)}
.adv-event-card::after{content:'';position:absolute;bottom:-20px;left:50%;transform:translateX(-50%);border-left:18px solid transparent;border-right:18px solid transparent;border-top:22px solid rgba(15,15,40,.95);filter:drop-shadow(0 3px 0 rgba(255,255,255,.2))}
.adv-event-icon{font-size:4rem;margin-bottom:10px}
.adv-event-title{font-size:1.6rem;font-weight:900;color:#ffc857;margin-bottom:8px;letter-spacing:1px;text-shadow:2px 2px 0 rgba(0,0,0,.5),-1px -1px 0 rgba(255,200,87,.3);text-transform:uppercase}
.adv-event-desc{font-size:1rem;color:#c4c9d4;margin-bottom:14px;font-style:italic;line-height:1.5}
.adv-event-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.adv-event-options{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:8px}
.adv-event-options .btn{min-width:60px}
.zone-shop-items{display:flex;flex-direction:column;gap:8px;margin:10px 0}
.zone-shop-item{display:flex;align-items:center;gap:10px;padding:10px 14px;background:rgba(255,255,255,.06);border-radius:12px;border:1px solid rgba(255,255,255,.08);cursor:pointer;transition:.2s}
.zone-shop-item:hover{background:rgba(108,92,231,.15);border-color:rgba(108,92,231,.3)}
.shop-item-name{font-weight:800;color:#f8fafc;flex:1;text-align:left}
.shop-item-desc{font-size:.8rem;color:#94a3b8}
.shop-item-price{font-weight:900;color:#ffc857;white-space:nowrap}
.base-grid{display:flex;flex-direction:column;gap:8px;margin:10px 0}
.base-building{display:flex;align-items:center;gap:10px;padding:10px 14px;background:rgba(255,255,255,.06);border-radius:12px;border:1px solid rgba(255,255,255,.08)}
.base-maxed{border-color:rgba(45,198,83,.3);background:rgba(45,198,83,.05)}
.base-icon{font-size:1.8rem}
.base-info{flex:1;text-align:left}
.base-name{font-weight:800;font-size:.9rem;color:#f8fafc}
.base-desc{font-size:.75rem;color:#94a3b8}
.base-level{font-size:.7rem;color:#a855f7;font-weight:700}
.mount-list{display:flex;flex-direction:column;gap:6px;margin:10px 0}
.mount-item{display:flex;align-items:center;gap:10px;padding:8px 12px;background:rgba(255,255,255,.05);border-radius:10px;border:1px solid rgba(255,255,255,.06)}
.mount-active{border-color:rgba(45,198,83,.4);background:rgba(45,198,83,.08)}
.mount-locked{opacity:.4}
.mount-icon{font-size:1.5rem}
.mount-name{flex:1;font-weight:700;font-size:.9rem;color:#f8fafc;text-align:left}
.mount-speed{font-size:.8rem;color:#00d2ff;font-weight:700}
.mount-badge{color:#2dc653;font-size:1.1rem}
.fog-hidden{opacity:.15!important;filter:blur(3px) grayscale(1);pointer-events:none}
.fog-hidden .node-icon{background:rgba(20,20,40,.95)}
.zone-stars-badge{font-size:.7rem;margin-top:2px;letter-spacing:2px}
.arena-wave-banner{position:fixed;top:30%;left:50%;transform:translate(-50%,-50%);z-index:300;font-size:2.5rem;font-weight:900;color:#ffc857;text-shadow:0 0 30px rgba(255,200,87,.5),0 4px 20px rgba(0,0,0,.8);animation:.5s bounceIn,.5s 1.5s forwards fadeOut;pointer-events:none}
.boss-cinematic{position:fixed;top:0;right:0;bottom:0;left:0;z-index:500;display:flex;align-items:center;justify-content:center;transition:opacity .5s}
.boss-cin-bg{position:absolute;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,.9);animation:.3s fadeIn}
.boss-cin-content{text-align:center;z-index:1;animation:.5s bounceIn}
.boss-cin-warning{font-size:1.2rem;font-weight:900;color:#ff6b6b;animation:.5s step-end infinite blink;margin-bottom:10px}
.boss-cin-emoji{font-size:5rem;margin-bottom:8px;animation:2s ease-in-out infinite float}
.boss-cin-name{font-size:2.5rem;font-weight:900;background:linear-gradient(135deg,#ff6b6b,#ffc857);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.boss-cin-zone{font-size:1rem;color:#94a3b8;font-weight:700;margin-top:4px}
@keyframes blink{50%{opacity:0}
}
@keyframes fadeOut{to{opacity:0}
}
@keyframes weatherFall{0%{transform:translateY(-20px);opacity:0}
5%{opacity:.4}
95%{opacity:.3}
100%{transform:translateY(105vh);opacity:0}
}
.btn-sm{padding:5px 12px;font-size:.8rem;border-radius:8px}
.map-player-marker{position:absolute;top:-8px;left:50%;transform:translateX(-50%);font-size:1.4rem;z-index:15;animation:1s ease-in-out infinite playerMarkerBounce;filter:drop-shadow(0 2px 6px rgba(45,198,83,.5))}
@keyframes playerMarkerBounce{0%,100%{transform:translateX(-50%) translateY(0)}
50%{transform:translateX(-50%) translateY(-6px)}
}
.map-progress-bottom{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);z-index:10;width:90%;max-width:600px;background:rgba(10,10,30,.85);border:1px solid rgba(108,92,231,.2);border-radius:14px;padding:10px 16px}
.map-progress-info{display:flex;justify-content:space-between;font-size:.8rem;color:#94a3b8;font-weight:700;margin-bottom:6px}
.map-progress-info b{color:#f8fafc}
.map-progress-track{height:6px;background:rgba(255,255,255,.1);border-radius:3px;overflow:hidden}
.map-progress-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,#2dc653,#6c5ce7,#ffc857);transition:width .8s}
.answer-flash-correct,.answer-flash-wrong{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:50;animation:.8s forwards flashFade}
.answer-flash-correct{background:rgba(45,198,83,.15)}
.answer-flash-correct span{font-size:2.5rem;font-weight:900;color:#2dc653;text-shadow:0 0 20px rgba(45,198,83,.5);animation:.5s flashScale}
.answer-flash-wrong{background:rgba(255,107,107,.15)}
.answer-flash-wrong span{font-size:2.5rem;font-weight:900;color:#ff6b6b;text-shadow:0 0 20px rgba(255,107,107,.5);animation:.4s flashShake}
@keyframes flashFade{0%{opacity:1}
100%{opacity:0}
}
@keyframes flashScale{0%{transform:scale(.5)}
50%{transform:scale(1.3)}
100%{transform:scale(1)}
}
@keyframes flashShake{0%,100%{transform:translateX(0)}
25%{transform:translateX(-10px)}
75%{transform:translateX(10px)}
}
.accuracy-badge{position:absolute;top:12px;right:12px;z-index:20;font-size:1rem;font-weight:900;padding:6px 12px;background:rgba(10,10,30,.8);border-radius:10px;border:1px solid rgba(255,255,255,.1)}
.combo-ring{position:absolute;top:-40px;right:-40px;z-index:15;width:36px;height:36px;pointer-events:none}
.combo-ring svg{width:36px;height:36px;transform:rotate(-90deg)}
.combo-ring-bg{fill:none;stroke:rgba(255,255,255,0.1);stroke-width:3}
.combo-ring-fg{fill:none;stroke:#FFC857;stroke-width:3;stroke-dasharray:100;stroke-dashoffset:0}
@keyframes comboCountdown{from{stroke-dashoffset:0}
to{stroke-dashoffset:100}
}
.post-battle-card{max-width:400px}
.pb-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}
.pb-stat{text-align:center;padding:10px;background:rgba(255,255,255,.05);border-radius:12px}
.pb-icon{font-size:1.5rem}
.pb-label{font-size:.7rem;color:#94a3b8;font-weight:700;margin-top:2px}
.pb-value{font-size:1.2rem;font-weight:900;color:#f8fafc}
.pb-divider{height:1px;background:rgba(255,255,255,.08);margin:8px 0}
.pb-rewards{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.pb-reward{font-size:1rem;font-weight:800;color:#ffc857;padding:6px 14px;background:rgba(255,200,87,.08);border-radius:10px;border:1px solid rgba(255,200,87,.15)}
.pb-dmg-stats{display:flex;justify-content:center;gap:16px;margin-top:8px;font-size:.8rem;color:#94a3b8;font-weight:600}
.dmg-number{position:absolute;top:30%;z-index:50;font-size:1.8rem;font-weight:900;pointer-events:none;animation:1.2s forwards dmgFloat;text-shadow:0 2px 6px rgba(0,0,0,.5);font-family:Outfit,sans-serif}
.dmg-hit{color:#ff6b6b}
.dmg-heal{color:#2dc653}
@keyframes dmgFloat{0%{opacity:1;transform:translateY(0) scale(.5)}
20%{transform:translateY(-10px) scale(1.2)}
100%{opacity:0;transform:translateY(-60px) translateX(var(--float-x,0)) scale(.8)}
}
.monster-nameplate{position:absolute;top:8px;left:50%;transform:translateX(-50%);z-index:10;min-width:180px;padding:6px 14px;background:rgba(10,10,30,.85);border:1px solid rgba(255,255,255,.08);border-radius:10px;text-align:center}
.np-header{display:flex;align-items:center;justify-content:center;gap:6px}
.np-icon{font-size:1.1rem}
.np-name{font-size:.9rem;font-weight:800;color:#f8fafc}
.np-level{font-size:.7rem;font-weight:700;color:#a855f7;background:rgba(168,85,247,.15);padding:1px 6px;border-radius:6px}
.np-bar{height:6px;background:rgba(255,255,255,.1);border-radius:3px;margin-top:4px;overflow:hidden}
.np-bar-fill{height:100%;border-radius:3px;transition:width .5s}
.np-hp{font-size:.7rem;color:#94a3b8;font-weight:700;margin-top:2px}
.path-highlighted{stroke:#FFC857!important;stroke-width:.6!important;filter:drop-shadow(0 0 8px rgba(255,200,87,.8));transition:.3s}
.zone-float-stats{display:flex;gap:6px;margin-top:4px;font-size:.65rem;font-weight:800;color:#94a3b8;background:rgba(0,0,0,.5);padding:2px 8px;border-radius:6px}
.map-water-shimmer{animation:2s ease-in-out infinite waterShimmer!important}
@keyframes waterShimmer{0%,100%{opacity:.2;transform:translateX(0)}
25%{opacity:.35;transform:translateX(3px) translateY(-2px)}
50%{opacity:.2;transform:translateX(6px)}
75%{opacity:.3;transform:translateX(3px) translateY(2px)}
}
.loading-tip{position:absolute;bottom:60px;left:50%;transform:translateX(-50%);z-index:30;padding:8px 18px;background:rgba(10,10,30,.9);border:1px solid rgba(108,92,231,.2);border-radius:12px;font-size:.82rem;font-weight:600;color:#94a3b8;white-space:nowrap;max-width:90%;transition:opacity .5s;animation:.4s tipSlideUp}
.loading-tip-label{font-weight:900;color:#ffc857;margin-right:6px}
@keyframes tipSlideUp{from{opacity:0;transform:translateX(-50%) translateY(10px)}
to{opacity:1;transform:translateX(-50%) translateY(0)}
}
.help-guide-modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:500;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.7)}
.help-guide-card{max-width:520px;width:90%;max-height:80vh;border-radius:24px;padding:24px;display:flex;flex-direction:column;background:rgba(15,15,40,.95);border:1px solid rgba(108,92,231,.3);box-shadow:0 20px 60px rgba(0,0,0,.6);animation:.3s guideCardIn}
@keyframes guideCardIn{from{opacity:0;transform:scale(.9) translateY(20px)}
to{opacity:1;transform:scale(1) translateY(0)}
}
.help-guide-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.help-guide-tabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:16px;padding:4px;background:rgba(255,255,255,.04);border-radius:14px}
.help-tab{flex:1;min-width:40px;padding:8px 6px;background:0 0;border:none;border-radius:10px;cursor:pointer;font-size:1.2rem;transition:.2s;opacity:.5}
.help-tab:hover{opacity:.8;background:rgba(108,92,231,.15)}
.help-tab-active{opacity:1;background:rgba(108,92,231,.3);box-shadow:0 2px 10px rgba(108,92,231,.3)}
.help-guide-body{overflow-y:auto;flex:1;min-height:0;padding:4px;-webkit-overflow-scrolling:touch}
.help-section-title{font-family:Outfit,sans-serif;font-weight:900;font-size:1.2rem;color:#f8fafc;margin-bottom:12px}
.help-section-content p{color:#94a3b8;font-size:.95rem;font-weight:600;line-height:1.5;margin-bottom:8px}
.help-bullet{color:#cbd5e1;font-size:.9rem;font-weight:600;padding:4px 0 4px 8px;border-left:3px solid rgba(108,92,231,.4);margin-bottom:6px;margin-left:4px}
.house-interior{display:flex;flex-direction:column;gap:16px;padding-top:8px}
.house-room{display:flex;justify-content:center;gap:20px;padding:16px;background:rgba(139,69,19,.15);border-radius:16px;border:1px solid rgba(139,69,19,.2);font-size:2rem}
.house-item{animation:2s ease-in-out infinite houseItemFloat}
.house-item:nth-child(2){animation-delay:.3s}
.house-item:nth-child(3){animation-delay:.6s}
.house-item:nth-child(4){animation-delay:.9s}
@keyframes houseItemFloat{0%,100%{transform:translateY(0)}
50%{transform:translateY(-4px)}
}
.house-hp-display{text-align:center;font-weight:800;font-size:1rem;color:#f8fafc;padding:8px;background:rgba(239,68,68,.15);border-radius:12px;border:1px solid rgba(239,68,68,.2)}
.house-actions{display:flex;flex-direction:column;gap:8px}
.house-actions .btn{width:100%;font-size:1rem;padding:10px 16px}
@media (max-width:768px){.help-guide-card{max-width:95%;padding:16px}
.help-tab{padding:6px 4px;font-size:1rem}
.help-section-title{font-size:1rem}
}
.map-3d-toggle{position:absolute;top:10px;left:10px;background:rgba(108,92,231,.25);border:1px solid rgba(108,92,231,.4);color:#f8fafc;border-radius:10px;padding:6px 14px;font-size:.8rem;font-family:Outfit,sans-serif;font-weight:700;cursor:pointer;z-index:10;transition:background .2s,transform .15s;letter-spacing:.04em}
.map-3d-toggle:hover{background:rgba(108,92,231,.45);transform:scale(1.04)}
.map-3d-toggle.active{background:rgba(108,92,231,.6);box-shadow:0 0 14px rgba(108,92,231,.5)}
.map-world-3d-wrapper{flex:1;position:relative;overflow:visible;min-height:0;height:100%;perspective:900px;perspective-origin:50% 30%}
.map-world.map-3d{transform:rotateX(28deg) scale(.92);transform-origin:50% 0%;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.34,1.2,.64,1);filter:drop-shadow(0 30px 40px rgba(0,0,0,.6))}
.map-world:not(.map-3d){transform:rotateX(0) scale(1);transition:transform .4s}
.map-world.map-3d .node-label{font-size:.7rem}
.map-world.map-3d .node-icon{width:72px;height:72px;font-size:2rem}
.map-world.map-3d::before{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;background-image:linear-gradient(rgba(108,92,231,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(108,92,231,.06) 1px,transparent 1px);background-size:80px 80px}
#canvas-world{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden}
#game-canvas{image-rendering:pixelated;cursor:crosshair;touch-action:none}
#canvas-hud{position:absolute;bottom:20px;left:20px;display:flex;justify-content:space-between;align-items:flex-end;pointer-events:none;z-index:10}
.hud-left{display:flex;gap:12px;align-items:center;background:rgba(10,10,26,.85);border:1px solid rgba(255,255,255,.15);box-shadow:0 4px 30px rgba(0,0,0,.4),inset 0 0 0 1px rgba(255,255,255,.1);border-radius:16px;padding:10px 16px;pointer-events:auto}
.hud-avatar{font-size:2rem;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:rgba(108,92,231,.2);border-radius:12px;border:2px solid rgba(108,92,231,.4);box-shadow:inset 0 0 8px rgba(108,92,231,.5)}
.hud-bars{display:flex;flex-direction:column;gap:4px;min-width:160px}
.hud-name{font-weight:800;font-size:.85rem;color:var(--text-primary);font-family:Outfit,sans-serif;text-shadow:0 2px 4px rgba(0,0,0,.5)}
.hud-level{color:var(--accent-xp);font-size:.75rem;margin-left:6px;text-shadow:0 2px 4px rgba(0,0,0,.5)}
.hud-bar-row{display:flex;align-items:center;gap:6px}
.hud-bar-label{font-size:.7rem;width:16px;filter:drop-shadow(0 2px 2px rgba(0,0,0,.5))}
.hud-bar-bg{flex:1;height:8px;background:rgba(0,0,0,.3);border-radius:4px;overflow:hidden;box-shadow:inset 0 1px 3px rgba(0,0,0,.5)}
.hud-bar-fill{height:100%;border-radius:4px;transition:width .4s cubic-bezier(.34, 1.56, .64, 1)}
.hud-hp{background:linear-gradient(90deg,#ef4444,#f97316);box-shadow:0 0 8px rgba(239,68,68,.4)}
.hud-xp{background:linear-gradient(90deg,#6c5ce7,#a855f7);box-shadow:0 0 8px rgba(108,92,231,.4)}
.hud-bar-text{font-size:.65rem;color:var(--text-secondary);font-weight:700;min-width:50px;text-align:right;text-shadow:0 2px 4px rgba(0,0,0,.5)}
.hud-right{display:flex;gap:8px;pointer-events:auto}
.hud-currency{display:flex;align-items:center;gap:6px;background:rgba(10,10,26,.85);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:8px 14px;font-weight:800;font-size:.9rem;color:var(--text-primary)}
.hud-currency span{font-size:1.1rem}
#minimap-canvas{position:absolute;bottom:20px;right:20px;width:160px;height:160px;border-radius:16px;border:1px solid rgba(255,255,255,.15);box-shadow:0 4px 30px rgba(0,0,0,.4),inset 0 0 8px rgba(255,255,255,.1);background:rgba(10,10,26,.85);z-index:10}
#leave-zone-btn{position:absolute;top:150px;left:20px;z-index:1000;font-size:1.1rem;font-weight:800;padding:12px 24px;border-radius:16px;border:1px solid rgba(255,255,255,.15);background:rgba(10,10,26,.75);color:#f8fafc;box-shadow:0 4px 20px rgba(0,0,0,.5),0 0 15px rgba(108,92,231,.2);cursor:pointer;transition:.2s;letter-spacing:.5px}
#leave-zone-btn:hover{transform:scale(1.08);box-shadow:0 4px 25px rgba(0,0,0,.6),0 0 25px rgba(108,92,231,.4);border-color:rgba(108,92,231,.4)}
#leave-zone-btn:active{transform:scale(.95)}
#zone-name-banner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:Outfit,sans-serif;font-weight:900;font-size:2.5rem;color:#fff;text-shadow:0 0 30px rgba(108,92,231,.6),0 4px 20px rgba(0,0,0,.8);z-index:20;pointer-events:none;opacity:0;animation:2.5s forwards zoneBannerIn}
@keyframes zoneBannerIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}
15%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}
30%{transform:translate(-50%,-50%) scale(1)}
70%{opacity:1}
100%{opacity:0;transform:translate(-50%,-60%)}
}
@media (max-width:768px){.hud-bars{min-width:120px}
.hud-name{font-size:.75rem}
.hud-bar-text{font-size:.6rem;min-width:40px}
#minimap-canvas{width:100px;height:100px;bottom:10px;right:10px}
.hud-currency{padding:6px 10px;font-size:.8rem}
}
@keyframes encounterShake{0%,100%{transform:translate(0,0);filter:brightness(1)}
10%{transform:translate(-8px,4px);filter:brightness(2)}
20%{transform:translate(6px,-6px);filter:brightness(1)}
30%{transform:translate(-5px,3px);filter:brightness(1.5)}
40%{transform:translate(7px,-2px)}
50%{transform:translate(-4px,5px)}
60%{transform:translate(3px,-3px)}
80%{transform:translate(-2px,1px)}
}
#battle-transition{position:fixed;top:0;right:0;bottom:0;left:0;z-index:200;pointer-events:none;background:#000;opacity:0}
#battle-transition.active{pointer-events:all;animation:.8s forwards battleTransition}
@keyframes battleTransition{0%{opacity:0;transform:scale(1)}
30%{opacity:.3;transform:scale(1.1)}
60%{opacity:.7;transform:scale(1.3)}
100%{opacity:1;transform:scale(1)}
}
#battle-transition.fade-out{animation:.4s forwards btFadeOut}
@keyframes btFadeOut{0%{opacity:1}
100%{opacity:0}
}
.zone-stars{color:#fbbf24;font-size:.8rem;margin-top:2px;letter-spacing:2px}
.mission-objective-banner{position:fixed;top:30px;left:50%;transform:translate(-50%,-50px) scale(.9);background:rgba(10,10,30,.95);border:1px solid rgba(255,200,87,.4);border-radius:16px;padding:12px 24px;display:flex;align-items:center;gap:16px;z-index:10000;opacity:0;pointer-events:none;box-shadow:0 20px 50px rgba(0,0,0,.8),0 0 30px rgba(255,200,87,.2) inset;transition:.5s cubic-bezier(.34, 1.56, .64, 1)}
.mission-objective-banner.show{opacity:1;transform:translate(-50%,0) scale(1)}
.mission-icon{font-size:2.5rem;filter:drop-shadow(0 0 10px rgba(255,200,87,.6));animation:3s ease-in-out infinite floatAnim}
.mission-title{color:#ffc857;font-size:1.2rem;font-weight:900;margin-bottom:4px;text-shadow:0 0 10px rgba(255,200,87,.4);letter-spacing:1px;font-family:Outfit,sans-serif}
.mission-desc{color:#f8fafc;font-size:1.1rem;font-weight:600;line-height:1.4}
.streak-badge{display:flex;align-items:center;gap:4px;padding:6px 12px;background:rgba(255,200,87,.12);border:1px solid rgba(255,200,87,.3);border-radius:20px;cursor:pointer;transition:.2s;font-size:14px;font-weight:700}
.streak-badge:hover{background:rgba(255,200,87,.22);transform:scale(1.05)}
.streak-count{color:#ffc857;font-size:16px}
.streak-shield-dot{font-size:11px}
.streak-flame{font-size:18px;animation:1.5s ease-in-out infinite flamePulse}
.flame-rare{filter:hue-rotate(20deg);animation-duration:1.2s}
.flame-epic{filter:hue-rotate(-30deg) saturate(1.5);animation-duration:.9s}
.flame-legendary{filter:hue-rotate(-60deg) saturate(2);animation-duration:.6s}
@keyframes flamePulse{0%,100%{transform:scale(1)}
50%{transform:scale(1.2) rotate(-5deg)}
}
.streak-popup{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;z-index:10000;background:rgba(0,0,0,.6);opacity:0;transition:opacity .3s}
.streak-popup.visible{opacity:1}
.streak-popup-content{background:linear-gradient(135deg,#12122a,#1e0a3a);border:1px solid rgba(255,200,87,.4);border-radius:24px;padding:40px;text-align:center;box-shadow:0 0 40px rgba(255,200,87,.2);animation:.5s cubic-bezier(.34,1.56,.64,1) bounceIn}
.streak-popup-flame{font-size:64px;margin-bottom:8px}
.streak-popup-day{font-size:48px;font-weight:900;color:#ffc857}
.streak-popup-msg{font-size:18px;color:#94a3b8;margin:12px 0}
.streak-bonus{background:rgba(168,85,247,.2);border:1px solid rgba(168,85,247,.4);border-radius:12px;padding:8px 16px;margin:12px 0;color:#a855f7}
.streak-popup-btn{margin-top:16px;padding:12px 32px;background:linear-gradient(135deg,#ffc857,#f59e0b);border:none;border-radius:16px;font-size:18px;font-weight:700;cursor:pointer;color:#000;transition:transform .2s}
.streak-popup-btn:hover{transform:scale(1.05)}
@keyframes bounceIn{0%{transform:scale(.5);opacity:0}
100%{transform:scale(1);opacity:1}
}
.streak-modal{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;z-index:9990;background:rgba(0,0,0,.5);opacity:0;transition:opacity .25s}
.streak-modal.visible{opacity:1}
.streak-modal-inner{background:var(--bg-secondary,#12122a);border:1px solid var(--glass-border,rgba(255,255,255,.08));border-radius:24px;padding:32px;width:min(420px,90vw);position:relative;text-align:center}
.streak-big-num{font-size:72px;font-weight:900;color:#ffc857;line-height:1}
.streak-label{color:#94a3b8;font-size:14px;margin-bottom:16px}
.streak-stats-row{display:flex;gap:16px;justify-content:center;margin:16px 0}
.streak-stat{background:rgba(255,255,255,.05);border-radius:14px;padding:12px 20px;display:flex;flex-direction:column;gap:4px}
.streak-stat span{font-size:14px;color:#64748b}
.streak-stat strong{font-size:22px;color:#f8fafc}
.streak-week{display:flex;gap:8px;justify-content:center;margin:16px 0}
.streak-day{display:flex;flex-direction:column;align-items:center;gap:4px;justify-content:center}
.streak-day.done{background:rgba(255,200,87,.15);border-color:rgba(255,200,87,.3);font-size:18px}
.streak-day.today{background:rgba(255,200,87,.25);box-shadow:0 0 12px rgba(255,200,87,.3);font-size:18px}
.streak-day span{font-size:12px;color:#64748b}
.streak-shield-section{margin-top:16px}
.streak-shield-section p{color:#64748b;font-size:13px;margin-bottom:10px}
#live-panel{position:fixed;bottom:24px;right:24px;width:240px;z-index:800;background:rgba(10,10,26,.9);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:14px 16px;box-shadow:0 8px 32px rgba(0,0,0,.4)}
.live-header{display:flex;align-items:center;gap:8px;font-size:14px;color:#f8fafc;margin-bottom:10px;font-weight:700}
.live-dot{width:10px;height:10px;border-radius:50%;background:#2dc653;animation:2s ease-in-out infinite livePulse;flex-shrink:0}
@keyframes livePulse{0%,100%{box-shadow:0 0 0 0 rgba(45,198,83,.5)}
50%{box-shadow:0 0 0 6px rgba(45,198,83,0)}
}
.live-feed-list{display:flex;flex-direction:column;gap:6px;max-height:180px;overflow:hidden}
.live-feed-item{display:flex;align-items:center;gap:6px;font-size:12px;color:#94a3b8;padding:5px 8px;border-radius:8px;background:rgba(255,255,255,.04);animation:.3s slideIn;line-height:1.3}
@keyframes slideIn{from{opacity:0;transform:translateX(10px)}
to{opacity:1}
}
.live-feed-icon{font-size:14px;flex-shrink:0}
.live-feed-text b{color:#f8fafc}
.live-close-btn{margin-left:auto;background:0 0;border:none;color:#64748b;cursor:pointer;font-size:13px;line-height:1;padding:2px 4px;border-radius:4px;transition:color .15s,background .15s}
.live-close-btn:hover{color:#ff6b6b;background:rgba(255,107,107,.1)}
.live-panel-toggle{position:fixed;bottom:24px;right:24px;z-index:800;background:rgba(10,10,26,.9);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:6px 12px;font-size:14px;font-weight:700;color:#f8fafc;cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.4);display:flex;align-items:center;gap:6px;transition:transform .15s,box-shadow .15s}
.live-panel-toggle:hover{transform:scale(1.06);box-shadow:0 6px 24px rgba(0,0,0,.5)}
.live-panel-toggle span{color:#2dc653}
#overworld-screen.hidden~* #quest-panel,#overworld-screen.hidden~* #story-panel,body:not(.in-overworld) #quest-panel,body:not(.in-overworld) #story-panel{display:none!important}
.float-number{position:fixed;font-weight:900;font-size:22px;z-index:10001;pointer-events:none;transition:transform .8s cubic-bezier(.2,.8,.5,1),opacity .8s;opacity:1;transform:translateY(0) scale(1);text-shadow:0 2px 8px rgba(0,0,0,.8);white-space:nowrap}
.float-damage{color:#ff6b6b}
.float-heal{color:#2dc653}
.float-crit{color:#ffc857;font-size:28px}
.float-miss{color:#94a3b8;font-style:italic;font-size:18px}
.float-dot{color:#a855f7}
.float-xp{color:#6c5ce7;font-size:18px}
.float-coins{color:#f59e0b;font-size:18px}
.float-crit-big{animation:.3s critPop}
@keyframes critPop{0%{transform:scale(.5) rotate(-10deg)}
50%{transform:scale(1.4) rotate(5deg)}
100%{transform:scale(1)}
}
@keyframes victoryFlash{0%,100%{opacity:0}
20%{opacity:1}
}
.lightning-modal{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;z-index:9990;background:rgba(0,0,0,.6);opacity:0;transition:opacity .25s}
.lightning-modal.visible{opacity:1}
.lightning-modal>div{background:linear-gradient(135deg,#0d0d1f,#1a0a2e);border:1px solid rgba(108,92,231,.4);border-radius:24px;padding:32px;width:min(480px,92vw);position:relative;box-shadow:0 0 60px rgba(108,92,231,.2)}
.lightning-title{font-size:32px;font-weight:900;color:#ffc857;text-align:center}
.lightning-subtitle{font-size:14px;color:#64748b;text-align:center;margin-bottom:20px}
.lightning-rules{display:flex;flex-direction:column;gap:8px;margin:16px 0}
.rule-item{padding:8px 14px;background:rgba(255,255,255,.04);border-radius:10px;font-size:14px;color:#94a3b8}
.lightning-grade-row{display:flex;align-items:center;gap:12px;margin:16px 0;justify-content:center}
.lightning-grade-row label{color:#94a3b8}
.glass-select{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:10px;color:#f8fafc;padding:6px 12px;font-size:14px}
.btn-lightning{width:100%;padding:14px;background:linear-gradient(135deg,#6c5ce7,#00d2ff);border:none;border-radius:16px;font-size:20px;font-weight:900;color:#fff;cursor:pointer;transition:transform .2s,box-shadow .2s;box-shadow:0 4px 24px rgba(108,92,231,.4);margin-top:8px}
.btn-lightning:hover{transform:scale(1.03);box-shadow:0 8px 32px rgba(108,92,231,.6)}
.lightning-arena{display:flex;flex-direction:column;gap:16px}
.lightning-scoreboard{display:flex;justify-content:space-between;align-items:center;gap:8px}
.opp-score,.player-score{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:13px;color:#94a3b8}
.opp-score strong,.player-score strong{font-size:28px;color:#f8fafc;font-weight:900}
.lightning-round-label{font-size:14px;color:#64748b;text-align:center}
.light-timer-bar{height:8px;background:rgba(255,255,255,.08);border-radius:4px;overflow:hidden}
.light-timer-fill{height:100%;width:100%;background:#6c5ce7;border-radius:4px;transition:width .9s linear,background .5s}
.light-question{font-size:28px;font-weight:900;text-align:center;color:#f8fafc;min-height:40px;padding:8px}
.light-answer-area{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.light-answer-btn{padding:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:14px;color:#f8fafc;font-size:20px;font-weight:700;cursor:pointer;transition:.15s}
.light-answer-btn:hover:not(:disabled){background:rgba(108,92,231,.25);border-color:#6c5ce7;transform:scale(1.03)}
.light-answer-btn:disabled{opacity:.5;cursor:not-allowed}
.light-feedback{text-align:center;font-size:20px;font-weight:700;min-height:28px;transition:.2s}
.light-feedback.correct{color:#2dc653}
.light-feedback.wrong{color:#ff6b6b}
.lightning-result{text-align:center}
.result-scores{display:flex;align-items:center;justify-content:center;gap:16px;margin:16px 0}
.result-score-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:16px 24px;display:flex;flex-direction:column;align-items:center;gap:4px;flex:1}
.result-score-card.winner{border-color:#ffc857;background:rgba(255,200,87,.1)}
.result-score-card span{font-size:12px;color:#94a3b8}
.result-score-card strong{font-size:32px;font-weight:900;color:#f8fafc}
.vs-label{font-size:18px;font-weight:700;color:#64748b;flex-shrink:0}
.result-rewards{display:flex;gap:16px;justify-content:center;margin:12px 0;font-size:18px;font-weight:700;color:#ffc857}
.result-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:16px}
.share-modal{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;z-index:10001;background:rgba(0,0,0,.6);opacity:0;transition:opacity .25s}
.share-modal.visible{opacity:1}
.share-modal-inner{background:var(--bg-secondary,#12122a);border:1px solid rgba(255,255,255,.1);border-radius:24px;padding:28px;width:min(560px,94vw);position:relative;text-align:center}
.share-preview-img{width:100%;border-radius:14px;border:1px solid rgba(255,255,255,.1);margin:14px 0}
.share-text-box{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:12px;font-size:13px;color:#94a3b8;margin-bottom:16px;text-align:left}
.share-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.share-btn{padding:10px 20px;border:none;border-radius:12px;font-size:14px;font-weight:600;cursor:pointer;transition:.2s}
.share-copy{background:rgba(108,92,231,.2);color:#6c5ce7;border:1px solid rgba(108,92,231,.4)}
.share-download{background:rgba(45,198,83,.15);color:#2dc653;border:1px solid rgba(45,198,83,.3)}
.share-native{background:rgba(0,210,255,.15);color:#00d2ff;border:1px solid rgba(0,210,255,.3)}
.share-btn:hover{transform:scale(1.05)}
.btn-share{padding:10px 20px;background:rgba(0,210,255,.15);border:1px solid rgba(0,210,255,.3);border-radius:12px;color:#00d2ff;font-weight:600;cursor:pointer;transition:.2s}
.btn-share:hover{transform:scale(1.05);background:rgba(0,210,255,.25)}
.modal-close-btn{position:absolute;top:14px;right:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);border-radius:8px;color:#94a3b8;width:32px;height:32px;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;transition:.2s}
.modal-close-btn:hover{background:rgba(255,100,100,.2);color:#ff6b6b}
.btn-disabled{opacity:.4;pointer-events:none}
@media (max-width:768px){#sidebar-nav{position:fixed!important;bottom:0;left:0;right:0;top:auto!important;width:100%!important;height:auto!important;flex-direction:row!important;padding:8px!important;gap:4px!important;border-top:1px solid rgba(255,255,255,.08);border-right:none!important;z-index:900;overflow-x:auto;overflow-y:hidden;background:rgba(10,10,26,.95)!important}
#sidebar-nav .nav-btn{flex-direction:column!important;font-size:9px!important;padding:8px 12px!important;gap:2px!important;min-width:54px;flex-shrink:0}
#sidebar-nav .nav-icon{font-size:20px!important}
#game-container,main{margin-left:0!important;padding-bottom:80px!important}
#overworld-canvas{width:100%!important;max-width:100vw}
#combat-screen{flex-direction:column!important}
#spell-menu-container button{font-size:11px!important;padding:6px 8px!important}
.live-panel{display:none}
.streak-badge{padding:4px 8px;font-size:12px}
.lightning-modal>div,.share-modal-inner,.streak-modal-inner{width:95vw!important;padding:20px!important}
.btn-primary,.btn-secondary,button{min-height:44px}
}
@media (max-width:480px){.light-question{font-size:22px}
.light-answer-btn{font-size:16px;padding:10px}
.streak-big-num{font-size:54px}
.result-score-card strong{font-size:24px}
}
.pvp-mode-lightning{background:linear-gradient(135deg,rgba(108,92,231,.2),rgba(255,200,87,.15))!important;border-color:rgba(255,200,87,.4)!important;animation:2.5s ease-in-out infinite lightningPulse}
.pvp-mode-lightning span{filter:drop-shadow(0 0 8px #FFC857)}
@keyframes lightningPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,200,87,.2)}
50%{box-shadow:0 0 20px 4px rgba(255,200,87,.25)}
}
#overworld-canvas{touch-action:none}
#overworld-screen{touch-action:none;overflow:hidden;-webkit-overflow-scrolling:auto}
#vn-dialog-overlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:10000;display:none;align-items:flex-end;justify-content:center;padding-bottom:20px;background:0 0;pointer-events:none}
#vn-dialog-overlay.active{display:flex;pointer-events:auto}
.vn-dialog-box{width:90%;max-width:900px;height:180px;background:var(--bg-secondary,#12122a);border:2px solid var(--accent-primary,#6c5ce7);border-radius:20px;box-shadow:0 10px 40px rgba(0,0,0,.8),inset 0 0 20px rgba(108,92,231,.2);display:flex;position:relative;transform:translateY(100px);opacity:0;transition:transform .4s cubic-bezier(.2, .8, .2, 1),opacity .4s;pointer-events:auto;cursor:pointer}
#vn-dialog-overlay.active .vn-dialog-box{transform:translateY(0);opacity:1}
.vn-portrait-container{width:160px;height:200px;position:absolute;bottom:0;left:10px;display:flex;align-items:flex-end;justify-content:center;z-index:2}
.vn-portrait{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 0 10px rgba(0,0,0,.5));transition:transform .2s}
.vn-content{flex-grow:1;margin-left:180px;padding:20px;display:flex;flex-direction:column;justify-content:flex-start}
.vn-speaker-name{font-family:Outfit,sans-serif;font-size:24px;font-weight:900;color:var(--accent-secondary,#00d2ff);text-shadow:0 2px 4px rgba(0,0,0,.5);margin-bottom:8px;text-transform:uppercase;letter-spacing:1px}
.vn-text{font-family:Inter,sans-serif;font-size:20px;color:var(--text-primary,#f8fafc);line-height:1.5;text-shadow:0 1px 2px rgba(0,0,0,.8);min-height:60px}
.vn-continue-hint{position:absolute;bottom:15px;right:20px;font-size:14px;color:var(--text-secondary,#94a3b8);animation:1.5s infinite pulseHint;font-weight:700;display:none}
.vn-continue-hint.show{display:block}
@keyframes pulseHint{0%,100%{opacity:.5;transform:translateX(0)}
50%{opacity:1;transform:translateX(5px)}
}
.vn-dialog-box.speaker-right .vn-portrait-container{left:auto;right:10px}
.vn-dialog-box.speaker-right .vn-content{margin-left:20px;margin-right:180px;align-items:flex-end;text-align:right}
.vn-dialog-box.speaker-right .vn-speaker-name{color:var(--accent-danger,#ff6b6b)}
@media (max-width:768px){.vn-dialog-box{height:150px;margin:0 10px}
.vn-portrait-container{width:120px;height:160px}
.vn-content{margin-left:130px;padding:15px}
.vn-speaker-name{font-size:20px}
.vn-text{font-size:16px}
.vn-dialog-box.speaker-right .vn-content{margin-right:130px}
}
@keyframes monsterIdle{0%,100%{transform:translateY(0) scale(1)}
50%{transform:translateY(-4px) scale(1.02)}
}
@keyframes particleBurst{0%{transform:translate(0,0) scale(1);opacity:1}
100%{transform:translate(var(--tx),var(--ty)) scale(.3);opacity:0}
}
.adventure-map.phase-morning::before{content:'';position:absolute;inset:0;background:rgba(168,192,255,.1);pointer-events:none}
.adventure-map.phase-day::before{content:'';position:absolute;inset:0;background:rgba(135,206,250,0);pointer-events:none}
.adventure-map.phase-evening::before{content:'';position:absolute;inset:0;background:rgba(197,83,0,.2);pointer-events:none}
.adventure-map.phase-night::before{content:'';position:absolute;inset:0;background:rgba(5,5,16,.4);pointer-events:none}
.battle-emote-bar{position:absolute;bottom:80px;left:50%;transform:translateX(-50%);z-index:30;display:flex;gap:6px}
.emote-btn{width:42px;height:42px;border-radius:50%;background:rgba(10,10,30,.8);border:1px solid rgba(255,255,255,.12);font-size:1.3rem;cursor:pointer;transition:.15s;display:flex;align-items:center;justify-content:center}
.emote-btn:hover{transform:scale(1.2);background:rgba(108,92,231,.3)}
.emote-btn:active{transform:scale(.9)}
.emote-float{position:absolute;font-size:2.5rem;z-index:40;pointer-events:none;animation:1.5s ease-out forwards emoteFloat}
@keyframes emoteFloat{0%{transform:scale(.5) translateY(0);opacity:0}
20%{transform:scale(1.3) translateY(-20px);opacity:1}
100%{transform:scale(.8) translateY(-120px);opacity:0}
}
.boss-phase-bar{display:flex;gap:4px;justify-content:center;margin-top:4px}
.boss-phase-dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.1);transition:.3s}
.boss-phase-dot.active{background:#ff6b6b;border-color:#ff6b6b;box-shadow:0 0 10px rgba(255,107,107,.5)}
.boss-phase-dot.done{background:#2dc653;border-color:#2dc653}
.loot-chest-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,.85);z-index:200;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:20px}
.chest-icon{font-size:6rem;animation:.6s cubic-bezier(.34,1.56,.64,1) chestBounce;cursor:pointer;filter:drop-shadow(0 0 20px rgba(255,200,87,.5))}
@keyframes chestBounce{0%{transform:scale(.3);opacity:0}
100%{transform:scale(1);opacity:1}
}
.chest-opening{animation:.5s forwards chestOpen}
@keyframes chestOpen{0%{transform:scale(1) rotateZ(0)}
30%{transform:scale(1.1) rotateZ(-5deg)}
60%{transform:scale(1.2) rotateZ(5deg)}
100%{transform:scale(1.5) rotateZ(0);filter:brightness(2)}
}
.chest-rewards{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}
.chest-reward-item{background:rgba(255,255,255,.08);border:1px solid rgba(255,200,87,.3);border-radius:14px;padding:12px 18px;text-align:center;animation:.4s cubic-bezier(.34,1.56,.64,1) forwards rewardPop;opacity:0;font-weight:800}
@keyframes rewardPop{0%{transform:scale(0);opacity:0}
100%{transform:scale(1);opacity:1}
}
.chest-reward-icon{font-size:2rem}
.chest-reward-val{font-size:1.1rem;color:#ffc857;margin-top:4px}
.chest-reward-label{font-size:.75rem;color:#94a3b8}
.speed-timer-big{font-size:3rem;font-weight:900;color:#ffc857;text-shadow:0 0 20px rgba(255,200,87,.4);font-family:Outfit,sans-serif}
.speed-score-big{font-size:1.5rem;font-weight:800;color:#f8fafc}
.streak-calendar{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:12px 0}
.streak-day{width:50px;height:60px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-weight:700;font-size:.8rem;color:#94a3b8;transition:.2s}
.streak-day.claimed{background:rgba(45,198,83,.2);border-color:rgba(45,198,83,.4);color:#2dc653}
.streak-day.today{border-color:#ffc857;color:#ffc857;box-shadow:0 0 10px rgba(255,200,87,.2)}
.streak-day-icon{font-size:1.3rem}
.premium-modal{background:rgba(10,10,30,.95);border:2px solid rgba(108,92,231,.3);border-radius:20px;padding:24px 28px;text-align:center;max-width:450px;width:90%;box-shadow:0 8px 40px rgba(0,0,0,.5)}
.premium-title{color:#ffc857;font-size:1.6rem;font-weight:900;font-family:Outfit,sans-serif;margin-bottom:12px}
.skill-tree-screen{display:flex;gap:20px;padding:20px;flex-wrap:wrap;justify-content:center}
.skill-branch{flex:1;min-width:200px;max-width:280px}
.skill-branch-header{font-size:1.1rem;font-weight:900;padding:8px;text-align:center}
.skill-node{background:rgba(255,255,255,.04);border:2px solid;border-radius:14px;padding:12px;margin:8px 0;cursor:pointer;transition:.2s}
.skill-node:hover{transform:scale(1.03);background:rgba(255,255,255,.08)}
.skill-owned{background:rgba(45,198,83,.1)!important}
.skill-name{font-weight:800;color:#f8fafc;font-size:.95rem}
.skill-desc{color:#94a3b8;font-size:.8rem;margin:4px 0}
.skill-cost{font-weight:700;font-size:.75rem;color:#ffc857}
.training-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:16px 0}
.training-topic-btn{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 10px;border-radius:14px;border:2px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);color:#f8fafc;cursor:pointer;font-weight:700;font-size:.85rem;transition:.2s}
.training-topic-btn:hover{background:rgba(108,92,231,.2);border-color:rgba(108,92,231,.4);transform:scale(1.05)}
.avatar-preview{background:rgba(255,255,255,.04);border-radius:16px;padding:20px;margin:12px 0;min-height:80px;display:flex;align-items:center;justify-content:center}
.avatar-row{display:flex;align-items:center;gap:10px;margin:8px 0}
.avatar-label{color:#94a3b8;font-weight:700;font-size:.8rem;width:60px;text-transform:capitalize}
.avatar-options{display:flex;gap:6px;flex-wrap:wrap}
.avatar-opt{width:38px;height:38px;border-radius:10px;border:2px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);font-size:1.2rem;cursor:pointer;transition:.15s}
.avatar-opt:hover{border-color:rgba(108,92,231,.5);transform:scale(1.1)}
.avatar-opt.active{border-color:#6c5ce7;background:rgba(108,92,231,.2);box-shadow:0 0 10px rgba(108,92,231,.3)}
.title-grid{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:12px 0}
.title-btn{padding:8px 16px;border-radius:10px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);color:#f8fafc;font-weight:700;cursor:pointer;transition:.15s}
.title-btn:hover{background:rgba(108,92,231,.2)}
.title-btn.active{border-color:#ffc857;color:#ffc857;background:rgba(255,200,87,.1)}
.trophy-room{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:16px 0}
.trophy{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:16px;font-size:2rem;text-align:center}
.journal-stats-row{display:flex;gap:12px;justify-content:center;margin:12px 0}
.journal-stat{background:rgba(255,255,255,.06);border-radius:14px;padding:12px 20px;border:1px solid rgba(255,255,255,.08);min-width:80px}
.js-val{font-size:1.5rem;font-weight:900;color:#f8fafc}
.js-label{font-size:.75rem;color:#94a3b8;font-weight:700}
.journal-topics{margin:8px 0}
.journal-topic-row{display:flex;align-items:center;gap:10px;padding:6px 0}
.jt-name{color:#f8fafc;font-weight:700;font-size:.85rem;width:100px}
.jt-bar{flex:1;height:8px;background:rgba(255,255,255,.08);border-radius:4px;overflow:hidden}
.jt-fill{height:100%;border-radius:4px;transition:width .3s}
.jt-pct{color:#94a3b8;font-weight:700;font-size:.8rem;width:40px;text-align:right}
.intro-slide{text-align:center;animation:.5s introFade}
.intro-emoji{font-size:5rem;margin-bottom:20px;filter:drop-shadow(0 0 30px rgba(255,200,87,.4))}
.intro-title{font-size:2.5rem;font-weight:900;color:#f8fafc;font-family:Outfit,sans-serif;margin-bottom:10px}
.intro-sub{font-size:1.1rem;color:#94a3b8}
@keyframes introFade{0%{opacity:0;transform:translateY(20px)}
100%{opacity:1;transform:translateY(0)}
}
.evo-grid{display:flex;flex-direction:column;gap:8px;margin:10px 0;max-height:350px;overflow-y:auto}
.evo-card{display:flex;align-items:center;gap:10px;padding:10px 14px;background:rgba(255,255,255,.05);border-radius:14px;border:1px solid rgba(255,255,255,.06)}
.evo-locked{opacity:.4}
.evo-unlocked{border-color:rgba(45,198,83,.3)}
.evo-active{border-color:rgba(168,85,247,.5);background:rgba(168,85,247,.08);box-shadow:0 0 12px rgba(168,85,247,.15)}
.evo-emoji{font-size:2rem}
.evo-info{flex:1;text-align:left}
.evo-name{font-weight:800;font-size:.9rem;color:#f8fafc}
.evo-desc{font-size:.75rem;color:#94a3b8}
.evo-progress-bar{height:6px;background:rgba(255,255,255,.1);border-radius:3px;margin-top:4px;overflow:hidden}
.evo-progress-fill{height:100%;background:linear-gradient(90deg,#a855f7,#6c5ce7);border-radius:3px;transition:width .5s}
.evo-kills{font-size:.7rem;color:#64748b;margin-top:2px}
.tourney-list{display:flex;flex-direction:column;gap:4px;margin:10px 0;max-height:300px;overflow-y:auto}
.tourney-row{display:flex;align-items:center;gap:10px;padding:8px 12px;background:rgba(255,255,255,.04);border-radius:10px}
.tourney-you{background:rgba(108,92,231,.15);border:1px solid rgba(108,92,231,.3)}
.tourney-rank{font-weight:900;min-width:30px;text-align:center;font-size:.9rem}
.tourney-name{flex:1;font-weight:700;font-size:.9rem;color:#f8fafc}
.tourney-xp{font-size:.85rem;color:#a855f7;font-weight:700}
.tourney-reward{text-align:center;padding:8px;color:#ffc857;font-weight:700;font-size:.9rem}
.dungeon-list{display:flex;flex-direction:column;gap:8px;margin:10px 0}
.dungeon-row{display:flex;align-items:center;gap:10px;padding:10px 14px;background:rgba(255,255,255,.05);border-radius:14px;border:1px solid rgba(255,255,255,.06)}
.dungeon-cleared{border-color:rgba(45,198,83,.3);opacity:.6}
.dungeon-locked{opacity:.4}
.dungeon-info{flex:1;text-align:left}
.dungeon-name{font-weight:800;font-size:.95rem;color:#f8fafc}
.dungeon-desc{font-size:.75rem;color:#94a3b8}
.dungeon-reward{font-size:.7rem;color:#ffc857;font-weight:700}
.gacha-wheel-container{position:relative;width:300px;height:300px;margin:14px auto}
.gacha-wheel{width:300px;height:300px;border-radius:50%;background:conic-gradient(#6c5ce7 0deg 36deg,#2dc653 36deg 72deg,#ff6b6b 72deg 108deg,#ffc857 108deg 144deg,#00d2ff 144deg 180deg,#a855f7 180deg 216deg,#22c55e 216deg 252deg,#ef4444 252deg 288deg,#3b82f6 288deg 324deg,#f59e0b 324deg 360deg);display:flex;align-items:center;justify-content:center;border:4px solid rgba(255,255,255,.2);box-shadow:0 0 30px rgba(108,92,231,.3),inset 0 0 20px rgba(0,0,0,.3);transition:transform 3s cubic-bezier(.25, .1, .25, 1)}
.gacha-slice{position:absolute;font-size:1rem;font-weight:900;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.gacha-pointer{position:absolute;top:-18px;left:50%;transform:translateX(-50%);font-size:2rem;color:#ffc857;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5));z-index:5}
.daily-challenge-card{background:rgba(255,255,255,.06);border-radius:16px;padding:16px;border:1px solid rgba(255,255,255,.08);margin:10px 0;text-align:center}
.dc-done{border-color:rgba(45,198,83,.4);background:rgba(45,198,83,.08)}
.dc-icon{font-size:2.5rem;margin-bottom:6px}
.dc-desc{font-size:1rem;font-weight:800;color:#f8fafc;margin-bottom:8px}
.dc-progress-bar{height:8px;background:rgba(255,255,255,.1);border-radius:4px;overflow:hidden;margin:8px 0}
.dc-progress-fill{height:100%;background:linear-gradient(90deg,#ffc857,#ff6b6b);border-radius:4px;transition:width .5s}
.dc-progress-text{font-size:.85rem;color:#94a3b8;font-weight:700}
.dc-reward{text-align:center;margin-top:8px;color:#ffc857;font-weight:700;font-size:.9rem}
.vs-cinematic-overlay{position:fixed;inset:0;z-index:10000;display:flex;overflow:hidden;background:#000;pointer-events:auto;transition:opacity .5s}
.vs-cinematic-overlay.fade-out{opacity:0;pointer-events:none}
.vs-half{position:relative;width:50%;height:100%;display:flex;align-items:center;justify-content:center}
.vs-left{clip-path:polygon(0 0,100% 0,85% 100%,0 100%)}
.vs-right{clip-path:polygon(15% 0,100% 0,100% 100%,0 100%);margin-left:-15%;width:65%}
.vs-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.8;z-index:1}
.vs-bg-blue{background:linear-gradient(135deg,#00d2ff,#3a7bd5)}
.vs-bg-red{background:linear-gradient(135deg,#ff6b6b,#c0392b)}
.vs-avatar{position:relative;z-index:2;font-size:15rem;filter:drop-shadow(0 20px 40px rgba(0,0,0,.8));text-shadow:0 10px 30px rgba(0,0,0,.5)}
.vs-avatar-left{animation:.5s cubic-bezier(.1,.9,.2,1) forwards vsSlideLeft}
.vs-avatar-right{animation:.5s cubic-bezier(.1,.9,.2,1) forwards vsSlideRight}
.vs-name{position:absolute;bottom:10%;z-index:3;font-family:Outfit;font-size:3rem;font-weight:900;color:#fff;text-transform:uppercase;text-shadow:0 5px 15px rgba(0,0,0,.8)}
.vs-name-left{left:10%;animation:.6s cubic-bezier(.1,.9,.2,1) .2s both vsTextUp}
.vs-name-right{right:10%;text-align:right;animation:.6s cubic-bezier(.1,.9,.2,1) .3s both vsTextUp}
.vs-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(5);z-index:4;font-family:Outfit;font-weight:900;font-size:8rem;color:#ffc857;font-style:italic;background:linear-gradient(180deg,#fff6d3,#ffc857,#f39c12);-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 15px 30px rgba(0,0,0,.8));animation:.6s cubic-bezier(.3,1.5,.6,1) .4s both vsSlam}
.vs-flash{position:absolute;inset:0;background:#fff;z-index:5;opacity:1;pointer-events:none;animation:.8s ease-out forwards vsFlashOut}
@keyframes vsSlideLeft{0%{transform:translateX(-100%) scale(.8) rotate(-15deg)}
100%{transform:translateX(0) scale(1) rotate(0)}
}
@keyframes vsSlideRight{0%{transform:translateX(100%) scale(.8) rotate(15deg)}
100%{transform:translateX(0) scale(1) rotate(0)}
}
@keyframes vsTextUp{0%{opacity:0;transform:translateY(50px)}
100%{opacity:1;transform:translateY(0)}
}
@keyframes vsSlam{0%{transform:translate(-50%,-50%) scale(5);opacity:0}
100%{transform:translate(-50%,-50%) scale(1);opacity:1}
}
@keyframes vsFlashOut{0%{opacity:1}
100%{opacity:0}
}
@keyframes vsSmashPlayer{0%{transform:translateX(0) scale(1) rotate(0)}
100%{transform:translateX(25vw) scale(2) rotate(15deg);z-index:100}
}
@keyframes vsSmashMonster{0%{transform:translateX(0) scale(1) rotate(0)}
100%{transform:translateX(-25vw) scale(2) rotate(-15deg);z-index:100}
}
@keyframes vsGetSmashedRight{0%{transform:translateX(0) scale(1) rotate(0);filter:none;opacity:1}
20%{transform:translateX(5vw) scale(1.8) rotate(20deg);filter:brightness(2) drop-shadow(0 0 20px red);opacity:1}
100%{transform:translateX(100vw) scale(.5) rotate(180deg);opacity:0}
}
@keyframes vsGetSmashedLeft{0%{transform:translateX(0) scale(1) rotate(0);filter:none;opacity:1}
20%{transform:translateX(-5vw) scale(1.8) rotate(-20deg);filter:brightness(2) drop-shadow(0 0 20px red);opacity:1}
100%{transform:translateX(-100vw) scale(.5) rotate(-180deg);opacity:0}
}
.zone-select-ring{position:fixed;transform:translate(-50%,-50%);z-index:200;background:rgba(10,10,30,.95);border:2px solid rgba(108,92,231,.4);border-radius:20px;padding:16px 24px;text-align:center;box-shadow:0 10px 40px rgba(0,0,0,.6),0 0 30px rgba(108,92,231,.15);animation:.3s zsrIn}
@keyframes zsrIn{from{opacity:0;transform:translate(-50%,-50%) scale(.8)}
to{opacity:1;transform:translate(-50%,-50%) scale(1)}
}
.zsr-title{font-size:1.1rem;font-weight:900;color:#f8fafc;margin-bottom:10px}
.zsr-actions{display:flex;gap:8px}
.zi-stats{display:flex;flex-direction:column;gap:6px;margin:10px 0}
.zi-row{display:flex;justify-content:space-between;padding:6px 10px;background:rgba(255,255,255,.04);border-radius:8px;font-size:.85rem;color:#94a3b8}
.zi-row b{color:#f8fafc}
.diff-ribbon{position:absolute;top:-4px;right:-8px;padding:2px 8px;border-radius:6px;font-size:.55rem;font-weight:900;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.5);z-index:10;transform:rotate(8deg)}
.zone-entry-banner{position:fixed;top:80px;left:50%;transform:translateX(-50%);z-index:300;padding:14px 40px;background:rgba(10,10,30,.9);border:1px solid rgba(108,92,231,.3);border-radius:16px;font-size:1.4rem;font-weight:900;color:#f8fafc;box-shadow:0 10px 40px rgba(0,0,0,.5);transition:.5s;animation:.5s bannerSlideIn}
.zeb-icon{font-size:1.8rem;margin-right:10px}
.zeb-text{letter-spacing:4px}
@keyframes bannerSlideIn{from{opacity:0;transform:translateX(-50%) translateY(-30px)}
to{opacity:1;transform:translateX(-50%) translateY(0)}
}
.turn-indicator{position:absolute;top:50%;left:0;transform:translateY(-50%);z-index:50;width:100%;text-align:center;padding:12px;font-size:1.4rem;font-weight:900;pointer-events:none;animation:.4s turnSlideIn;transition:.5s}
.turn-player{background:rgba(45,198,83,.15);color:#2dc653;text-shadow:0 0 20px rgba(45,198,83,.5)}
.turn-enemy{background:rgba(255,107,107,.15);color:#ff6b6b;text-shadow:0 0 20px rgba(255,107,107,.5)}
@keyframes turnSlideIn{from{transform:translateY(-50%) translateX(-100%)}
to{transform:translateY(-50%) translateX(0)}
}
.monster-reaction{position:absolute;top:-20px;right:-10px;font-size:2rem;z-index:20;animation:1.2s forwards reactionPop}
@keyframes reactionPop{0%{opacity:0;transform:scale(0)}
30%{opacity:1;transform:scale(1.4)}
60%{transform:scale(1)}
100%{opacity:0;transform:translateY(-20px) scale(.8)}
}
@keyframes cameraShake{0%,100%{transform:translateX(0)}
10%{transform:translateX(-5px) translateY(3px)}
20%{transform:translateX(5px) translateY(-3px)}
30%{transform:translateX(-4px) translateY(2px)}
40%{transform:translateX(4px) translateY(-2px)}
50%{transform:translateX(-3px)}
60%{transform:translateX(3px)}
70%{transform:translateX(-2px)}
80%{transform:translateX(2px)}
90%{transform:translateX(-1px)}
}
.spell-flash{position:absolute;top:0;right:0;bottom:0;left:0;z-index:40;pointer-events:none;animation:.4s forwards spellFlashAnim}
@keyframes spellFlashAnim{0%{opacity:.8}
100%{opacity:0}
}
.sfx-hidden{display:none!important}
#sfx-screen-flash{position:fixed;inset:0;pointer-events:none;z-index:9998;opacity:0;transition:opacity 80ms}
#sfx-zone-cinematic{position:fixed;inset:0;z-index:9990;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;background:radial-gradient(ellipse at center,rgba(var(--sfx-zone-rgb,108,92,231),.7) 0,rgba(10,10,26,.95) 100%)}
#sfx-zone-cinematic .sfx-zone-icon{font-size:5rem;line-height:1;filter:drop-shadow(0 0 30px var(--sfx-zone-color, #6C5CE7));animation:.6s cubic-bezier(.34,1.56,.64,1) forwards sfx-icon-spin}
#sfx-zone-cinematic .sfx-zone-name{font-family:Outfit,sans-serif;font-weight:900;font-size:2.8rem;letter-spacing:.08em;color:#fff;text-transform:uppercase;text-shadow:0 0 40px var(--sfx-zone-color,#6c5ce7);margin-top:16px;animation:.5s cubic-bezier(.34,1.56,.64,1) .2s both sfx-name-slide}
.sfx-zone-in{animation:.4s forwards sfx-cin-in}
.sfx-zone-out{animation:.5s forwards sfx-cin-out}
@keyframes sfx-cin-in{from{opacity:0;transform:scale(1.1)}
to{opacity:1;transform:scale(1)}
}
@keyframes sfx-cin-out{from{opacity:1}
to{opacity:0;transform:scale(.95)}
}
@keyframes sfx-icon-spin{from{transform:scale(0) rotate(-180deg)}
to{transform:scale(1) rotate(0)}
}
@keyframes sfx-name-slide{from{opacity:0;transform:translateY(20px)}
to{opacity:1;transform:translateY(0)}
}
#sfx-levelup-badge{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:9995;pointer-events:none;text-align:center;background:rgba(10,10,30,.92);border:2px solid #ffc857;border-radius:24px;padding:20px 40px;box-shadow:0 0 60px rgba(255,200,87,.5),0 0 120px rgba(168,85,247,.3)}
#sfx-levelup-badge .sfx-lv-label{font-family:Outfit,sans-serif;font-weight:700;font-size:.85rem;letter-spacing:.2em;color:#ffc857;text-transform:uppercase}
#sfx-levelup-badge .sfx-lv-num{font-family:Outfit,sans-serif;font-weight:900;font-size:5rem;line-height:1;color:#ffc857;text-shadow:0 0 30px #ffc857}
#sfx-levelup-badge .sfx-lv-sub{font-family:Outfit,sans-serif;font-weight:900;font-size:1.5rem;color:#a855f7;letter-spacing:.15em}
.sfx-popin{animation:.5s cubic-bezier(.34,1.56,.64,1) forwards sfx-badge-in}
.sfx-fadeout{animation:.5s forwards sfx-badge-out}
@keyframes sfx-badge-in{from{opacity:0;transform:translate(-50%,-50%) scale(.5)}
to{opacity:1;transform:translate(-50%,-50%) scale(1)}
}
@keyframes sfx-badge-out{from{opacity:1}
to{opacity:0;transform:translate(-50%,-60%)}
}
#sfx-combo{position:fixed;top:80px;right:260px;z-index:9991;pointer-events:none;text-align:center;background:rgba(10,10,30,.88);border:1px solid rgba(168,85,247,.4);border-radius:16px;padding:8px 20px;box-shadow:0 0 20px rgba(168,85,247,.3)}
#sfx-combo .sfx-combo-num{font-family:Outfit,sans-serif;font-weight:900;font-size:2.5rem;line-height:1;background:linear-gradient(135deg,#a855f7,#00d2ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
#sfx-combo .sfx-combo-label{font-family:Outfit,sans-serif;font-weight:700;font-size:.7rem;letter-spacing:.15em;color:#a855f7;text-transform:uppercase}
.sfx-combo-bump{animation:.3s cubic-bezier(.34,1.56,.64,1) forwards sfx-bump}
@keyframes sfx-bump{0%,100%{transform:scale(1)}
50%{transform:scale(1.3)}
}
.wow-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;width:100%}
.wow-card{background:rgba(20,15,40,.5);border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:24px;box-shadow:0 15px 40px rgba(0,0,0,.5),inset 0 1px 1px rgba(255,255,255,.2);transition:transform .3s cubic-bezier(.175, .885, .32, 1.275),box-shadow .3s,border-color .3s;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.wow-card:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 25px 50px rgba(0,0,0,.7),inset 0 0 40px rgba(157,78,221,.25);border-color:rgba(157,78,221,.6);z-index:2}
.wow-card-icon{font-size:3.5rem;line-height:1;margin-bottom:8px;filter:drop-shadow(0 10px 15px rgba(0,0,0,.5));transition:transform .4s}
.wow-card:hover .wow-card-icon{transform:translateY(-8px)}
.wow-card-title{font-family:Outfit,sans-serif;font-weight:900;font-size:1.3rem;background:linear-gradient(135deg,#f8fafc,#94a3b8);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin:0}
.wow-card-title.highlight{background:linear-gradient(135deg,#9d4edd,#00f5ff);-webkit-background-clip:text;background-clip:text}
.wow-card-desc{font-size:.9rem;color:var(--text-secondary,#94a3b8);line-height:1.5;margin:0}
.wow-btn{margin-top:auto;padding:12px 24px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:#f8fafc;font-size:.95rem;font-weight:800;cursor:pointer;transition:.2s cubic-bezier(.34, 1.56, .64, 1);box-shadow:0 4px 12px rgba(0,0,0,.3)}
.wow-btn:hover{background:linear-gradient(135deg,rgba(157,78,221,.2),rgba(0,245,255,.15));border-color:rgba(157,78,221,.5);box-shadow:0 8px 24px rgba(157,78,221,.4);transform:translateY(-2px) scale(1.05)}
.wow-btn:active{transform:scale(.95)}
.wow-btn.wow-btn-primary{background:linear-gradient(135deg,#9d4edd,#00f5ff);border:none;color:#fff;box-shadow:0 8px 30px rgba(157,78,221,.5)}
.wow-btn.wow-btn-primary:hover{box-shadow:0 14px 40px rgba(157,78,221,.7)}
.wow-card-meta{background:rgba(0,0,0,.3);border-radius:12px;padding:4px 12px;font-size:.75rem;font-weight:700;color:rgba(255,255,255,.6);margin-top:4px;box-shadow:inset 0 2px 4px rgba(0,0,0,.5)}
.wow-btn.wow-btn-danger{background:rgba(255,107,107,.1);border-color:rgba(255,107,107,.3);color:#ff6b6b}
.wow-btn.wow-btn-danger:hover{background:rgba(255,107,107,.2);border-color:#ff6b6b;box-shadow:0 8px 24px rgba(255,107,107,.3)}
@keyframes shake{0%,100%{transform:translateX(0)}
25%{transform:translateX(-5px)}
75%{transform:translateX(5px)}
}
@keyframes fadeUp{from{opacity:1;transform:translateY(0)}
to{opacity:0;transform:translateY(-30px)}
}
@keyframes spinWorld{from{transform:rotate(0)}
to{transform:rotate(360deg)}
}
.hit-anim{animation:.3s shake}
.attack-anim{animation:1s cubic-bezier(.25,1,.5,1) playerClash}
@keyframes playerClash{0%,100%{transform:translateX(0) scale(1) rotate(0)}
15%,55%{transform:translateX(35px) scale(1.05) rotate(4deg)}
}
.monster-attack-anim{animation:1s cubic-bezier(.25,1,.5,1) monsterClash}
@keyframes monsterClash{0%,100%{transform:translateX(0) scale(1) rotate(0)}
15%,55%{transform:translateX(-35px) scale(1.05) rotate(-4deg)}
}
.heal-anim{box-shadow:0 0 20px var(--success);transition:box-shadow .3s}
.miss-anim{opacity:.4;transition:opacity .3s}
.screen-shake{animation:.4s shake}
.dance-anim{animation:.2s 3 shake}
.bighead-anim{transform:scale(1.5);transition:transform .3s}
.rainbow-anim{filter:hue-rotate(90deg);transition:filter .3s}
.spin-world{animation:3s linear spinWorld}
.float-up{animation:1.5s forwards fadeUp}
#star-portal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9998;background:#000;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s}
#star-portal-overlay.active{opacity:1;pointer-events:all}
.star-portal-text{font-size:2rem;font-weight:900;color:var(--accent2)}
#dialogue-box{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);width:70%;max-width:600px;padding:15px 20px;background:var(--glass);border:1px solid var(--border);border-radius:14px;font-size:.95rem;cursor:pointer;z-index:20}
#adventure-topic-select{position:absolute;top:15px;left:50%;transform:translateX(-50%);padding:8px 16px;border-radius:10px;z-index:20;background:var(--glass);border:1px solid var(--border);color:var(--text);font-size:.9rem;font-weight:600}
@keyframes lesson-keyword-pulse{0%,100%{box-shadow:0 0 8px rgba(255,255,255,.1);border-color:rgba(255,255,255,.15)}
50%{box-shadow:0 0 15px rgba(245,158,11,.4);border-color:rgba(245,158,11,.5);color:#fed7aa}
}
@keyframes lesson-stagger-pop{0%{opacity:0;transform:scale(.5) translateY(10px)}
70%{opacity:1;transform:scale(1.2) translateY(-2px)}
100%{opacity:1;transform:scale(1) translateY(0)}
}
@keyframes lesson-draw-line{0%{max-width:0%;border-right-color:#00d2ff}
99%{max-width:100%;border-right-color:#00d2ff}
100%{max-width:100%;border-right-color:transparent}
}
#sfx-cinematic-levelup{position:fixed;inset:0;z-index:10000;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;animation:.5s forwards cinLvIn;pointer-events:none}
#sfx-cinematic-levelup .sfx-levelup-text{font-family:Outfit,sans-serif;font-weight:900;font-size:4rem;color:#ffc857;letter-spacing:.2em;text-transform:uppercase;opacity:0;transform:translateY(-50px);animation:.8s cubic-bezier(.175,.885,.32,1.275) .2s forwards cinTextDrop}
#sfx-cinematic-levelup .sfx-levelup-number-container{position:relative;margin-top:40px;width:200px;height:200px;display:flex;align-items:center;justify-content:center}
#sfx-cinematic-levelup .sfx-levelup-number{position:absolute;font-family:Outfit,sans-serif;font-weight:900;font-size:8rem;line-height:1;color:#f8fafc;text-shadow:0 0 40px rgba(168,85,247,.8)}
.old-level{opacity:0;transform:scale(.5);animation:.8s cubic-bezier(.175,.885,.32,1.275) .8s forwards cinOldLevelIn}
.new-level{opacity:0;transform:scale(3);filter:blur(20px)}
.phase-glow .old-level{animation:1s ease-in forwards cinShakeGlow}
.phase-explode .old-level{display:none}
.phase-explode .new-level{animation:.5s cubic-bezier(.175,.885,.32,1.275) forwards cinNewLevelSlam}
.phase-explode#sfx-cinematic-levelup{background:radial-gradient(circle at center,rgba(168,85,247,.4) 0,#000 70%)}
.phase-fadeout{animation:1s forwards cinFadeOut!important}
@keyframes cinLvIn{from{opacity:0}
to{opacity:1}
}
@keyframes cinTextDrop{from{opacity:0;transform:translateY(-50px)}
to{opacity:1;transform:translateY(0)}
}
@keyframes cinOldLevelIn{from{opacity:0;transform:scale(.5)}
to{opacity:1;transform:scale(1)}
}
@keyframes cinShakeGlow{0%{transform:scale(1) translateX(0);filter:brightness(1) drop-shadow(0 0 20px #A855F7)}
20%{transform:scale(1.1) translateX(-5px);filter:brightness(1.5) drop-shadow(0 0 40px #A855F7)}
40%{transform:scale(1.1) translateX(5px);filter:brightness(2) drop-shadow(0 0 60px #fff)}
60%{transform:scale(1.2) translateX(-5px);filter:brightness(2.5) drop-shadow(0 0 80px #fff)}
80%{transform:scale(1.2) translateX(5px);filter:brightness(3) drop-shadow(0 0 100px #fff)}
100%{transform:scale(1.3) translateX(0);filter:brightness(5) drop-shadow(0 0 150px #fff);opacity:1}
}
@keyframes cinNewLevelSlam{0%{opacity:0;transform:scale(3);filter:blur(20px);color:#fff}
50%{opacity:1;transform:scale(1.2);filter:blur(5px);color:#fff;text-shadow:0 0 100px #fff}
100%{opacity:1;transform:scale(1.5);filter:blur(0);color:#ffc857;text-shadow:0 0 50px #ffc857,0 0 100px #a855f7}
}
@keyframes cinFadeOut{from{opacity:1}
to{opacity:0}
}
.shop-tabs{display:flex;gap:0;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:24px;padding-bottom:0}
.shop-tabs::-webkit-scrollbar{display:none}
.shop-tab{display:flex;align-items:center;gap:6px;padding:12px 20px;border:none;background:0 0;color:var(--text-secondary);font-weight:700;font-size:.88rem;cursor:pointer;white-space:nowrap;border-bottom:2px solid transparent;transition:.2s;font-family:Outfit,sans-serif}
.shop-tab:hover{color:var(--text-primary)}
.shop-tab.active{color:var(--text-primary);border-bottom-color:var(--accent-primary)}
.shop-tab-icon{font-size:1.1rem}
.shop-premium-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.shop-product-card{background:rgba(12,12,32,.4);border:1px solid rgba(255,255,255,.05);border-radius:20px;padding:22px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;position:relative;overflow:hidden;transition:transform .4s cubic-bezier(.34,1.56,.64,1),box-shadow .4s,border-color .4s,background .4s;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 8px 30px rgba(0,0,0,.5);z-index:1}
.shop-product-card::after{content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);transform:skewX(-15deg);transition:left .6s;pointer-events:none;z-index:-1}
.shop-product-card:hover::after{left:160%}
.shop-product-card:hover{transform:translateY(-8px) scale(1.03);border-color:transparent;background:rgba(15,15,40,.7);box-shadow:0 25px 70px rgba(0,0,0,.7),0 0 0 1px rgba(108,92,231,.5),0 10px 40px rgba(108,92,231,.2),inset 0 0 60px rgba(255,255,255,.03)}
.shop-product-card.best-value{border-color:rgba(255,200,87,.4);box-shadow:0 0 30px rgba(255,200,87,.1)}
.shop-product-card.best-value:hover{border-color:rgba(255,200,87,.7)}
.prod-badge{position:absolute;top:12px;right:12px;padding:3px 10px;border-radius:8px;font-size:.7rem;font-weight:900;letter-spacing:.5px}
.badge-best{background:rgba(255,200,87,.2);color:#ffc857;border:1px solid rgba(255,200,87,.4)}
.badge-new{background:rgba(45,198,83,.2);color:#2dc653;border:1px solid rgba(45,198,83,.4)}
.badge-hot{background:rgba(255,107,107,.2);color:#ff6b6b;border:1px solid rgba(255,107,107,.4)}
.badge-lim{background:rgba(168,85,247,.2);color:#a855f7;border:1px solid rgba(168,85,247,.4)}
.prod-icon{font-size:3.5rem;line-height:1;filter:drop-shadow(0 0 14px rgba(108,92,231,.4));transition:transform .4s cubic-bezier(.34, 1.56, .64, 1)}
.shop-product-card:hover .prod-icon{transform:scale(1.15) translateY(-4px) rotate(-6deg)}
.prod-name{font-family:Outfit,sans-serif;font-size:1rem;font-weight:900;color:var(--text-primary)}
.prod-desc{font-size:.8rem;color:var(--text-secondary);line-height:1.4}
.prod-amount{font-family:Outfit,sans-serif;font-size:1.6rem;font-weight:900;color:var(--accent-warning)}
.prod-price{font-size:1.15rem;font-weight:900;color:var(--text-primary)}
.prod-price-old{font-size:.85rem;color:var(--text-muted);text-decoration:line-through}
.btn-buy{width:100%;padding:11px;border-radius:12px;border:none;cursor:pointer;font-weight:800;font-size:.9rem;font-family:Outfit,sans-serif;background:linear-gradient(135deg,var(--accent-primary),#8b5cf6);color:#fff;transition:.2s;margin-top:4px}
.btn-buy:hover{transform:scale(1.03);box-shadow:0 8px 24px rgba(108,92,231,.4)}
.btn-buy.gold{background:linear-gradient(135deg,#d97706,#ffc857)}
.btn-buy.green{background:linear-gradient(135deg,#16a34a,#2dc653)}
.btn-buy.premium{background:linear-gradient(135deg,#7c3aed,#a855f7)}
.sub-card-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-bottom:24px}
.sub-card{border-radius:24px;padding:28px 24px;border:1px solid var(--glass-border);background:rgba(18,18,42,.9);position:relative;overflow:hidden;transition:transform .2s}
.sub-card:hover{transform:translateY(-4px)}
.sub-card-pro{border-color:rgba(0,210,255,.3)}
.sub-card-premium{border-color:rgba(255,200,87,.4);background:rgba(255,200,87,.04)}
.sub-card-glow{position:absolute;top:-40px;right:-40px;width:120px;height:120px;border-radius:50%;pointer-events:none}
.sub-card-pro .sub-card-glow{background:radial-gradient(circle,rgba(0,210,255,.15) 0,transparent 70%)}
.sub-card-premium .sub-card-glow{background:radial-gradient(circle,rgba(255,200,87,.2) 0,transparent 70%)}
.sub-tier{font-size:.85rem;font-weight:800;letter-spacing:2px;text-transform:uppercase;margin-bottom:6px}
.sub-card-pro .sub-tier{color:var(--accent-secondary)}
.sub-card-premium .sub-tier{color:var(--accent-warning)}
.sub-name{font-family:Outfit,sans-serif;font-size:1.5rem;font-weight:900;margin-bottom:4px}
.sub-tagline{color:var(--text-secondary);font-size:.85rem;margin-bottom:16px}
.sub-price-row{display:flex;align-items:baseline;gap:6px;margin-bottom:4px}
.sub-price-main{font-family:Outfit,sans-serif;font-size:2.2rem;font-weight:900}
.sub-price-period{color:var(--text-secondary);font-size:.9rem}
.sub-annual{font-size:.8rem;color:var(--accent-success);font-weight:700;margin-bottom:18px}
.sub-features{list-style:none;display:flex;flex-direction:column;gap:8px;margin-bottom:20px}
.sub-features li{display:flex;align-items:center;gap:8px;font-size:.88rem;font-weight:600}
.sub-features li::before{content:'✅';font-size:.8rem}
#shop-checkout-modal{position:fixed;inset:0;z-index:500;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.8)}
#shop-checkout-modal.hidden{display:none}
.checkout-box{background:rgba(12,12,28,.98);border:1px solid rgba(255,255,255,.1);border-radius:24px;padding:32px;width:100%;max-width:440px;box-shadow:0 40px 80px rgba(0,0,0,.8);animation:.4s cubic-bezier(.175,.885,.32,1.275) bounceIn}
@keyframes bounceIn{from{transform:scale(.8);opacity:0}
to{transform:scale(1);opacity:1}
}
.checkout-product{display:flex;align-items:center;gap:16px;margin-bottom:20px}
.checkout-prod-icon{font-size:3rem}
.checkout-prod-name{font-family:Outfit,sans-serif;font-size:1.2rem;font-weight:900}
.checkout-prod-desc{color:var(--text-secondary);font-size:.85rem}
.checkout-price-row{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid rgba(255,255,255,.06);margin-bottom:20px}
.checkout-total{font-family:Outfit,sans-serif;font-size:1.5rem;font-weight:900;color:var(--accent-warning)}
.checkout-methods{display:flex;gap:10px;margin-bottom:16px}
.pay-method-btn{flex:1;padding:10px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:var(--text-primary);font-weight:700;cursor:pointer;transition:.2s;font-size:.9rem}
.pay-method-btn:hover{background:rgba(255,255,255,.12);border-color:var(--accent-primary)}
.pay-method-btn.selected{background:rgba(108,92,231,.2);border-color:var(--accent-primary)}
.btn-checkout-pay{width:100%;padding:14px;background:linear-gradient(135deg,#6c5ce7,#8b5cf6);color:#fff;border:none;border-radius:14px;font-size:1.1rem;font-weight:900;cursor:pointer;font-family:Outfit,sans-serif;transition:.2s;box-shadow:0 8px 30px rgba(108,92,231,.4)}
.btn-checkout-pay:hover{transform:scale(1.02)}
.checkout-secure{text-align:center;color:var(--text-muted);font-size:.78rem;margin-top:10px}
.upgrade-modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:6000;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.85);animation:.25s fadeIn}
.upgrade-modal-card{background:linear-gradient(160deg,#12122a 0,#1a1a3a 100%);border:2px solid rgba(108,92,231,.5);border-radius:28px;padding:32px 28px;width:min(480px,94vw);text-align:center;box-shadow:0 0 60px rgba(108,92,231,.3),0 20px 60px rgba(0,0,0,.6);animation:.5s cubic-bezier(.15,1.4,.5,1) forwards slamIn}
@keyframes slamIn{from{transform:scale(.5);opacity:0}
to{transform:scale(1);opacity:1}
}
.upgrade-modal-header{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:6px}
.upgrade-modal-header h2{font-size:2.6rem;font-weight:900;font-family:Outfit,sans-serif;background:linear-gradient(135deg,#ffc857,#a855f7,#00d2ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:2px}
.upgrade-sparkle{font-size:2rem;animation:1.5s ease-in-out infinite alternate sparkSpin}
@keyframes sparkSpin{from{transform:scale(1) rotate(-10deg)}
to{transform:scale(1.3) rotate(10deg)}
}
.upgrade-pts-remaining{font-size:1rem;color:#94a3b8;margin-bottom:22px;font-weight:700;letter-spacing:.5px}
.upgrade-pts-remaining strong{color:#ffc857;font-size:1.4rem}
.upgrade-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:24px}
.upgrade-block{background:rgba(255,255,255,.04);border:2px solid var(--uclr,#6c5ce7);border-radius:18px;padding:18px 14px;cursor:pointer;transition:.2s;display:flex;flex-direction:column;align-items:center;gap:6px;font-family:Outfit,sans-serif;color:#f8fafc;position:relative;overflow:hidden}
.upgrade-block::before{content:'';position:absolute;inset:0;background:var(--uclr,#6c5ce7);opacity:0;transition:opacity .2s}
.upgrade-block:hover::before{opacity:.12}
.upgrade-block:hover{transform:scale(1.04);box-shadow:0 0 20px var(--uclr,#6c5ce7)}
.upgrade-block:active{transform:scale(.96)}
.upgrade-block.upgrade-flash{animation:.4s upgradeFlash}
@keyframes upgradeFlash{0%{background:var(--uclr);opacity:.8}
100%{background:rgba(255,255,255,.04);opacity:1}
}
.upgrade-icon{font-size:2.4rem}
.upgrade-name{font-size:.95rem;font-weight:900;text-transform:uppercase;letter-spacing:1px}
.upgrade-desc{font-size:.8rem;color:#94a3b8;font-weight:600}
.upgrade-count{position:absolute;top:8px;right:10px;font-size:.75rem;font-weight:900;color:var(--uclr);background:rgba(0,0,0,.4);padding:2px 6px;border-radius:10px}
.upgrade-done-btn{width:100%;padding:14px;border-radius:16px;font-size:1.1rem;font-weight:900;font-family:Outfit,sans-serif;background:linear-gradient(135deg,#2dc653,#16a34a);border:none;color:#fff;cursor:pointer;transition:.2s;letter-spacing:1px}
.upgrade-done-btn:hover:not(:disabled){transform:scale(1.03);box-shadow:0 0 20px rgba(45,198,83,.4)}
.upgrade-done-btn:disabled{opacity:.3;cursor:not-allowed}
#hub-screen{display:flex;flex-direction:column;height:100%;overflow:hidden;position:relative;background:#050508}
.hub-asymmetrical-layout{display:flex;width:100%;height:100%;position:relative;z-index:1}
.hub-asymmetrical-layout::before{content:'';position:absolute;inset:0;background:linear-gradient(rgba(245,158,11,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(245,158,11,.06) 1px,transparent 1px);background-size:52px 52px;transform:perspective(560px) rotateX(58deg) translateY(70px) scale(3);opacity:.55;pointer-events:none;z-index:-1}
.hub-asymmetrical-layout::after{content:'';position:absolute;inset:-50%;background:radial-gradient(circle at 65% 40%,rgba(245,158,11,.08),transparent 50%),radial-gradient(circle at 25% 70%,rgba(234,88,12,.05),transparent 40%);pointer-events:none;z-index:-2}
.hub-nav-panel{flex:0 0 420px;padding:44px 32px;display:flex;flex-direction:column;justify-content:center;gap:8px;z-index:10;position:relative;background:rgba(4,4,14,.82);border-right:1px solid rgba(245,158,11,.08);box-shadow:20px 0 60px rgba(0,0,0,.6)}
.hub-nav-label{font-size:.6rem;font-weight:900;letter-spacing:5px;color:rgba(245,158,11,.45);text-transform:uppercase;margin-bottom:2px}
.hub-nav-header{font-size:.7rem;font-weight:800;color:#f59e0b;letter-spacing:4px;text-transform:uppercase;text-shadow:0 0 12px rgba(245,158,11,.45);margin-bottom:20px;position:relative;display:inline-block}
.hub-nav-header::after{content:'';position:absolute;bottom:-8px;left:0;width:32px;height:2px;background:linear-gradient(90deg,#f59e0b,transparent);box-shadow:0 0 8px rgba(245,158,11,.6)}
.hub-nav-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;width:100%}
.hub-card{background:rgba(12,12,32,.4);border:1px solid rgba(255,255,255,.05);border-radius:16px;padding:16px 12px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;cursor:pointer;position:relative;overflow:hidden;transition:transform .4s cubic-bezier(.34, 1.56, .64, 1),box-shadow .4s,border-color .4s,background .4s;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 8px 30px rgba(0,0,0,.5);z-index:1}
.hub-card::after{content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);transform:skewX(-15deg);transition:left .6s;pointer-events:none;z-index:-1}
.hub-card:hover::after{left:160%}
.hub-card:hover{transform:translateY(-8px) scale(1.03);border-color:transparent;background:rgba(15,15,40,.7);box-shadow:0 25px 70px rgba(0,0,0,.7),0 0 0 1px var(--card-color,rgba(255,255,255,.2)),0 10px 40px var(--card-glow,rgba(0,0,0,.1)),inset 0 0 60px rgba(255,255,255,.03)}
.hub-card:active{transform:translateY(2px) scale(.97);box-shadow:0 5px 15px rgba(0,0,0,.5)}
.hub-card-icon{font-size:2.2rem;margin-bottom:8px;filter:drop-shadow(0 0 20px var(--card-glow, rgba(255,255,255,.2)));transition:transform .4s cubic-bezier(.34, 1.56, .64, 1)}
.hub-card:hover .hub-card-icon{transform:scale(1.2) translateY(-4px) rotate(-6deg)}
.hub-card-title{color:#f8fafc;font-size:1.05rem;font-family:Outfit,sans-serif;font-weight:900;margin-bottom:4px;text-shadow:0 2px 10px rgba(0,0,0,.6)}
.hub-card-desc{color:#94a3b8;font-size:.7rem;line-height:1.3;transition:color .3s}
.hub-card:hover .hub-card-desc{color:#e2e8f0}
@keyframes urgentPulse{0%,100%{border-color:rgba(255,255,255,.05);box-shadow:none}
50%{border-color:#fbbf24;box-shadow:0 0 20px rgba(251,191,36,.4)}
}
.pulse-urgent{animation:2s ease-in-out infinite urgentPulse}
.hub-hero-panel{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}
.hub-hero-panel::before{content:'';position:absolute;inset:0;background:radial-gradient(1.5px 1.5px at 16% 22%,rgba(245,158,11,.55),transparent),radial-gradient(1px 1px at 44% 68%,rgba(255,255,255,.3),transparent),radial-gradient(2px 2px at 68% 16%,rgba(234,88,12,.4),transparent),radial-gradient(1px 1px at 88% 80%,rgba(255,255,255,.2),transparent);background-size:230px 230px;opacity:.5;pointer-events:none}
.hub-hero-ambient{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:540px;height:540px;background:radial-gradient(circle,rgba(245,158,11,.16) 0,transparent 65%);border-radius:50%;pointer-events:none;mix-blend-mode:screen}
.hub-hero-ambient::after{content:'';position:absolute;top:90px;left:90px;right:90px;bottom:90px;background:radial-gradient(circle,rgba(234,88,12,.12) 0,transparent 60%);border-radius:50%}
.hologram-pedestal{position:absolute;width:380px;height:100px;bottom:22px;left:50%;transform:translateX(-50%);pointer-events:none;perspective:1000px;z-index:1}
.hologram-base-glow{position:absolute;inset:0;border-radius:50%;background:radial-gradient(ellipse at center,rgba(168,85,247,.4) 0,rgba(168,85,247,.05) 50%,transparent 70%);box-shadow:0 0 60px 20px rgba(168,85,247,.2);transform:rotateX(75deg)}
.hologram-runes{position:absolute;inset:-20px;border-radius:50%;border:2px dashed rgba(56,189,248,.3);border-top-color:rgba(168,85,247,.8);border-bottom-color:rgba(56,189,248,.8);transform:rotateX(75deg) rotateZ(0)}
.hologram-core{position:absolute;width:140px;height:140px;top:50%;left:50%;margin-top:-70px;margin-left:-70px;border-radius:50%;background:#a855f7;filter:blur(40px);opacity:.5;transform:rotateX(75deg)}
.hologram-beam{position:absolute;bottom:50%;left:50%;width:260px;height:600px;margin-left:-130px;background:linear-gradient(to top,rgba(168,85,247,.15) 0,rgba(56,189,248,.05) 50%,transparent 100%);clip-path:polygon(20% 100%,80% 100%,100% 0,0 0);z-index:0}
@keyframes pulseBase{0%{transform:rotateX(75deg) scale(.9);opacity:.7}
100%{transform:rotateX(75deg) scale(1.1);opacity:1}
}
@keyframes rotateRunes{0%{transform:rotateX(75deg) rotateZ(0)}
100%{transform:rotateX(75deg) rotateZ(360deg)}
}
@keyframes pulseCore{0%{opacity:.3;transform:rotateX(75deg) scale(.8)}
100%{opacity:.6;transform:rotateX(75deg) scale(1.2)}
}
@keyframes shimmerBeam{0%{opacity:.5;height:500px}
100%{opacity:.8;height:700px}
}
.hub-avatar-hologram{position:relative;z-index:99;transform:translateY(-10px);width:380px;height:380px;display:flex;align-items:center;justify-content:center}
.hub-avatar-hologram canvas,.hub-avatar-hologram img,.hub-avatar-img{width:100%;height:100%;object-fit:contain;transform:translateZ(0);-webkit-transform:translateZ(0);image-rendering:pixelated;outline:0!important;border:none!important;box-shadow:none!important;-webkit-tap-highlight-color:transparent}
@keyframes avatarBob{0%,100%{transform:translateY(0)}
50%{transform:translateY(-15px)}
}
.hub-avatar-hologram::after{content:'';position:absolute;bottom:45px;left:50%;transform:translateX(-50%) rotateX(70deg);width:220px;height:80px;background:radial-gradient(ellipse,rgba(245,158,11,.45) 0,transparent 70%);box-shadow:0 0 50px rgba(245,158,11,.3);z-index:-1;border-radius:50%}
.hub-hero-details{margin-top:40px;padding:24px 44px;border-radius:26px;text-align:center;min-width:340px;z-index:3;background:rgba(4,4,16,.72);border:1px solid rgba(245,158,11,.16);box-shadow:0 24px 60px rgba(0,0,0,.55),inset 0 0 28px rgba(245,158,11,.03);animation:.65s cubic-bezier(.1,.9,.2,1) both slideUp}
@keyframes slideUp{from{opacity:0;transform:translateY(28px)}
to{opacity:1;transform:translateY(0)}
}
.hub-hero-details::before{content:'';position:absolute;top:0;left:16px;right:16px;height:1px;background:linear-gradient(90deg,transparent,rgba(245,158,11,.25),transparent);border-radius:99px}
.hero-name{font-size:2.4rem;font-family:Outfit,sans-serif;font-weight:900;-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:2px}
.hero-class-label{font-size:.8rem;font-weight:800;letter-spacing:4px;color:#f59e0b;text-transform:uppercase;margin-bottom:20px;text-shadow:0 0 10px rgba(245,158,11,.35)}
.hub-xp-container{display:flex;flex-direction:column;gap:8px}
.hub-xp-labels{display:flex;justify-content:space-between;font-size:.72rem;font-weight:800;color:rgba(255,255,255,.5);letter-spacing:2px;text-transform:uppercase}
.hub-xp-track{width:100%;height:9px;background:rgba(0,0,0,.55);border-radius:99px;overflow:hidden;box-shadow:inset 0 2px 6px rgba(0,0,0,.8),0 0 0 1px rgba(245,158,11,.1)}
.hub-xp-fill{height:100%;background:linear-gradient(90deg,#ea580c,#f59e0b,#fcd34d);box-shadow:0 0 18px rgba(245,158,11,.55);border-radius:99px;transition:width 1.4s cubic-bezier(.34,1.56,.64,1)}
.hub-stat-badges{display:flex;gap:10px;justify-content:center;margin-top:18px;flex-wrap:wrap}
.hub-stat-badge{display:flex;flex-direction:column;align-items:center;gap:2px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:14px;padding:10px 16px;min-width:64px;transition:.25s cubic-bezier(.34,1.56,.64,1);cursor:default}
.hub-stat-badge:hover{transform:translateY(-4px) scale(1.06);border-color:rgba(245,158,11,.35);box-shadow:0 10px 24px rgba(245,158,11,.12);background:rgba(245,158,11,.06)}
.hub-stat-icon{font-size:1.1rem}
.hub-stat-val{font-size:1.1rem;font-weight:900;color:#fff;line-height:1}
.hub-stat-lbl{font-size:.6rem;font-weight:800;color:rgba(255,255,255,.35);letter-spacing:1.5px;text-transform:uppercase}
.hub-stat-streak .hub-stat-val{color:#fb923c;text-shadow:0 0 10px rgba(251,146,60,.5)}
.hub-stat-streak{border-color:rgba(251,146,60,.2)}
@media (max-width:900px){.hub-asymmetrical-layout{flex-direction:column;overflow-y:auto;overflow-x:hidden}
.hub-nav-panel{order:1;flex:none;width:100%;padding:20px 14px;border-top:1px solid rgba(245,158,11,.08);border-right:none;gap:16px}
.hub-nav-grid{grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.hub-hero-panel{order:-1;flex:none;height:auto;min-height:auto;padding-top:24px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;overflow:visible}
.hub-avatar-hologram{font-size:7rem;width:280px;height:280px}
.hologram-pedestal{width:280px;height:86px;bottom:12px}
.hologram-beam{width:180px;height:450px;margin-left:-90px}
.hub-avatar-hologram::after{width:160px;height:60px;bottom:30px}
.hub-avatar-ring-outer{width:200px;height:200px}
.hub-hero-details{min-width:90%;margin-top:24px;padding:18px 24px}
.hub-card-title{font-size:1rem}
.hub-card-icon{font-size:2.2rem}
}
.hub-activities{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:28px}
.hub-activity-card{background:var(--bg2);border-radius:var(--radius-lg);overflow:hidden;cursor:pointer;transition:.22s;border:var(--panel-border);position:relative;display:flex;flex-direction:column;box-shadow:var(--shadow-card)}
.hub-activity-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-lg)}
.hub-activity-card:active{transform:translateY(4px);box-shadow:none}
.hub-activity-banner{height:70px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;position:relative;overflow:hidden}
.hub-activity-banner::after{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.08'%3E%3Ccircle cx='20' cy='20' r='8'/%3E%3C/g%3E%3C/svg%3E");pointer-events:none}
.hub-activity-banner-icon{font-size:2.4rem;filter:drop-shadow(0 4px 8px rgba(0,0,0,.3));position:relative;z-index:1;animation:4s ease-in-out infinite cardIconPulse}
@keyframes cardIconPulse{0%,100%{transform:scale(1)}
50%{transform:scale(1.08)}
}
.hub-activity-badge{font-size:.7rem;font-weight:800;background:rgba(255,255,255,.25);border-radius:20px;padding:4px 10px;color:#fff;position:relative;z-index:1;letter-spacing:.5px;text-transform:uppercase}
.hub-activity-body{padding:16px;flex:1}
.hub-activity-title{font-family:Outfit,sans-serif;font-size:1rem;font-weight:800;color:#fff;margin-bottom:4px}
.hub-activity-desc{font-size:.8rem;color:rgba(255,255,255,.5);line-height:1.4;font-weight:500;margin-bottom:12px}
.hub-activity-goto{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;font-weight:700;border-radius:20px;padding:6px 14px;transition:.2s;color:#fff}
.hub-activity-card.card-adventure .hub-activity-banner{background:linear-gradient(120deg,#059669,#10b981)}
.hub-activity-card.card-adventure .hub-activity-goto{background:rgba(16,185,129,.2)}
.hub-activity-card.card-adventure .hub-activity-goto:hover{background:rgba(16,185,129,.4)}
.hub-activity-card.card-pvp .hub-activity-banner{background:linear-gradient(120deg,#7c3aed,#a855f7)}
.hub-activity-card.card-pvp .hub-activity-goto{background:rgba(168,85,247,.2)}
.hub-activity-card.card-pvp .hub-activity-goto:hover{background:rgba(168,85,247,.4)}
.hub-activity-card.card-dailyquest .hub-activity-banner{background:linear-gradient(120deg,#d97706,#f59e0b)}
.hub-activity-card.card-dailyquest .hub-activity-goto{background:rgba(245,158,11,.2)}
.hub-activity-card.card-dailyquest .hub-activity-goto:hover{background:rgba(245,158,11,.4)}
.hub-activity-card.card-minigames .hub-activity-banner{background:linear-gradient(120deg,#db2777,#ec4899)}
.hub-activity-card.card-minigames .hub-activity-goto{background:rgba(236,72,153,.2)}
.hub-activity-card.card-minigames .hub-activity-goto:hover{background:rgba(236,72,153,.4)}
.hub-right-col{display:flex;flex-direction:column;gap:20px}
.hub-skills-card{background:var(--bg2);border:var(--panel-border);border-radius:var(--radius-lg);padding:18px;box-shadow:var(--shadow-card)}
.hub-skill-item{margin-bottom:14px}
.hub-skill-item:last-child{margin-bottom:0}
.hub-skill-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.hub-skill-name{font-size:.85rem;font-weight:700;color:rgba(255,255,255,.85);display:flex;align-items:center;gap:6px}
.hub-skill-pct{font-size:.8rem;font-weight:800;color:rgba(255,255,255,.5)}
.hub-skill-bar{height:8px;background:rgba(255,255,255,.06);border-radius:20px;overflow:hidden}
.hub-skill-fill{height:100%;border-radius:20px;transition:width 1.2s}
.hub-howto-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:28px}
.hub-howto-card{background:var(--bg2);border:3px solid #000;border-radius:16px;padding:16px 12px;text-align:center;transition:.2s;box-shadow:0 4px 0 #000}
.hub-howto-card:hover{transform:translateY(-2px);box-shadow:0 6px 0 #000}
.hub-howto-icon{font-size:1.8rem;margin-bottom:8px}
.hub-howto-title{font-family:Outfit,sans-serif;font-size:.82rem;font-weight:800;color:#fff;margin-bottom:4px}
.hub-howto-desc{font-size:.72rem;color:rgba(255,255,255,.45);line-height:1.4;font-weight:500}
.hub-quest-widget{display:flex;flex-direction:column;gap:8px}
.hub-quest-row{background:rgba(10,10,24,.4);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:12px 14px;display:flex;align-items:center;gap:12px;transition:.4s cubic-bezier(.34, 1.56, .64, 1);box-shadow:0 4px 15px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.05);cursor:pointer}
.hub-quest-row:hover{background:rgba(108,92,231,.15);border-color:rgba(108,92,231,.4);transform:translateY(-4px) scale(1.02);box-shadow:0 15px 30px rgba(108,92,231,.2),inset 0 0 20px rgba(108,92,231,.15)}
.hub-quest-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.hub-quest-dot.active{background:#00d2ff;box-shadow:0 0 12px rgba(0,210,255,.8),inset 0 0 4px #fff;animation:2s ease-in-out infinite pulseDot}
@keyframes pulseDot{0%,100%{filter:brightness(1) drop-shadow(0 0 4px #00D2FF)}
50%{filter:brightness(1.3) drop-shadow(0 0 12px #00D2FF)}
}
.hub-quest-dot.done{background:#2dc653;box-shadow:0 0 10px rgba(45,198,83,.5)}
.hub-quest-dot.locked{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2)}
.hub-quest-info{flex:1;min-width:0}
.hub-quest-name{font-size:.85rem;font-weight:700;color:rgba(255,255,255,.9);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hub-quest-sub{font-size:.72rem;color:rgba(255,255,255,.4);margin-top:1px;font-weight:500}
.hub-quest-coins{font-size:.78rem;font-weight:800;color:#ffc857;flex-shrink:0}
.hub-news-card{background:rgba(10,10,30,.5);border:1px solid rgba(0,210,255,.3);border-radius:20px;padding:20px;box-shadow:0 15px 40px rgba(0,210,255,.15),inset 0 0 30px rgba(108,92,231,.1);position:relative;overflow:hidden}
.hub-news-card::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,transparent 40%,rgba(0,210,255,.05) 50%,transparent 60%);pointer-events:none}
.hub-news-tag{display:inline-block;font-size:.68rem;font-weight:800;background:#6c5ce7;color:#fff;border-radius:20px;padding:3px 10px;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}
.hub-news-title{font-family:Outfit,sans-serif;font-size:1.1rem;font-weight:900;color:#fff;background:linear-gradient(135deg,#fff,#00d2ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 2px 4px rgba(0,210,255,.4));margin-bottom:8px;position:relative;z-index:2}
.hub-news-body{font-size:.8rem;color:rgba(255,255,255,.55);line-height:1.5}
.hub-world-mini{background:rgba(10,10,25,.7);border:1px solid rgba(255,255,255,.08);border-radius:20px;box-shadow:0 15px 40px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.05);overflow:hidden}
.hub-world-mini-banner{background:linear-gradient(120deg,rgba(15,23,42,.8),rgba(30,27,75,.8));border-bottom:1px solid rgba(255,255,255,.1);padding:16px 20px;display:flex;align-items:center;justify-content:space-between}
.hub-world-title{font-family:Outfit,sans-serif;font-size:.9rem;font-weight:800;color:#fff}
.hub-zone-list{padding:10px;display:flex;flex-direction:column;gap:4px}
.hub-zone-row{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:14px;border:1px solid transparent;transition:.3s cubic-bezier(.34, 1.56, .64, 1);cursor:pointer}
.hub-zone-row:hover{background:rgba(108,92,231,.15);border-color:rgba(108,92,231,.3);transform:translateX(4px);box-shadow:inset 0 0 15px rgba(108,92,231,.1)}
.hub-zone-icon{font-size:1rem;flex-shrink:0}
.hub-zone-name{flex:1;font-size:.8rem;font-weight:600;color:rgba(255,255,255,.75)}
.hub-zone-status{font-size:.72rem;font-weight:700;padding:2px 8px;border-radius:20px}
.hub-zone-status.unlocked{background:rgba(45,198,83,.2);color:#2dc653}
.hub-zone-status.locked{background:rgba(255,255,255,.06);color:rgba(255,255,255,.35)}
.hub-zone-status.current{background:rgba(108,92,231,.25);color:#a78bfa}
@media (max-width:900px){.hub-body{grid-template-columns:1fr}
.hub-right-col{order:-1}
.hub-activities,.hub-howto-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){#class-cards-container{grid-template-columns:repeat(2,1fr)}
.hub-banner{flex-direction:column;align-items:flex-start}
.hub-banner-character{display:none}
.hub-activities{grid-template-columns:1fr}
}
@keyframes hubIdleCycle{0%{background-position:0 0}
100%{background-position:-512px 0}
}
.diag-container{max-width:640px;margin:0 auto;padding:20px 0;animation:.3s fadeIn}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}
to{opacity:1}
}
.diag-header{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.diag-icon{font-size:2.5rem;width:56px;height:56px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.06);border-radius:16px;flex-shrink:0}
.diag-title{font-family:Outfit,sans-serif;font-size:1.2rem;font-weight:900;color:var(--text-primary,#f8fafc)}
.diag-domain{font-size:.85rem;font-weight:700}
.diag-progress-wrap{margin-left:auto;text-align:right;flex-shrink:0}
.diag-progress-bar{width:120px;height:8px;background:rgba(255,255,255,.06);border-radius:20px;overflow:hidden;margin-bottom:4px}
.diag-progress-fill{height:100%;border-radius:20px;transition:width .4s}
.diag-progress-text{font-size:.72rem;color:var(--text-muted,#64748b);font-weight:600}
.diag-standard-tag{font-size:.72rem;color:var(--text-secondary,#94a3b8);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:20px;padding:4px 12px;display:inline-block;margin-bottom:16px;font-weight:600}
.diag-question-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:28px 24px;text-align:center;margin-bottom:20px}
.diag-question-grade{font-size:.7rem;font-weight:700;color:var(--accent-xp,#a855f7);text-transform:uppercase;letter-spacing:1px;margin-bottom:12px}
.diag-question-text{font-family:Outfit,sans-serif;font-size:1.6rem;font-weight:900;color:#fff;line-height:1.4}
.diag-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px}
.diag-option{background:rgba(255,255,255,.06);border:2px solid rgba(255,255,255,.08);border-radius:14px;padding:16px;color:#fff;font-family:Outfit,sans-serif;font-size:1.2rem;font-weight:800;cursor:pointer;transition:.2s;text-align:center}
.diag-option:hover{background:rgba(99,102,241,.2);border-color:rgba(99,102,241,.5);transform:scale(1.03)}
.diag-option:active{transform:scale(.97)}
.diag-input{width:100%;grid-column:span 2;background:rgba(255,255,255,.06);border:2px solid rgba(255,255,255,.08);border-radius:14px;padding:16px;color:#fff;font-size:1.3rem;font-weight:800;font-family:Outfit,sans-serif;text-align:center;outline:0}
.diag-input:focus{border-color:rgba(99,102,241,.5)}
.diag-submit-btn{grid-column:span 2;background:linear-gradient(135deg,#6c5ce7,#00d2ff);border:none;border-radius:14px;padding:14px;color:#fff;font-weight:800;font-size:1rem;cursor:pointer;transition:.2s}
.diag-footer{text-align:center}
.diag-domain-dots{display:flex;justify-content:center;gap:8px}
.diag-dot{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1rem;background:rgba(255,255,255,.06);border:2px solid rgba(255,255,255,.08);transition:.3s}
.diag-dot.done{opacity:.7;border-color:transparent}
.diag-dot.active{border-color:#fff;box-shadow:0 0 12px rgba(255,255,255,.2)}
.diag-results-banner{text-align:center;margin-bottom:24px}
.diag-results-icon{font-size:3rem;margin-bottom:8px}
.diag-results-title{font-family:Outfit,sans-serif;font-size:1.5rem;font-weight:900;color:#fff}
.diag-results-sub{font-size:.9rem;color:var(--text-secondary,#94a3b8)}
.diag-overall{display:flex;align-items:center;justify-content:center;gap:20px;margin-bottom:24px}
.diag-overall-grade{text-align:center;background:linear-gradient(135deg,rgba(99,102,241,.2),rgba(168,85,247,.2));border:2px solid rgba(99,102,241,.4);border-radius:20px;padding:20px 32px}
.diag-overall-number{font-family:Outfit,sans-serif;font-size:3rem;font-weight:900;color:#a5b4fc;line-height:1}
.diag-overall-label{font-size:.75rem;color:var(--text-secondary,#94a3b8);font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-top:4px}
.diag-overall-time{font-size:.85rem;color:var(--text-muted,#64748b);font-weight:600}
.diag-domain-results{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.diag-domain-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);border-radius:16px;padding:16px}
.diag-domain-card-header{display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:.82rem;margin-bottom:10px}
.diag-domain-grade{font-family:Outfit,sans-serif;font-weight:900;font-size:.85rem}
.diag-domain-bar{width:100%;height:8px;background:rgba(255,255,255,.06);border-radius:20px;overflow:hidden;margin-bottom:6px}
.diag-domain-bar-fill{height:100%;border-radius:20px;transition:width .6s}
.diag-domain-stats{font-size:.72rem;color:var(--text-muted,#64748b);font-weight:600}
.minigame-container{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--bg-primary,#0a0a1a);z-index:100;display:none;overflow:hidden}
#dashCanvas,#tdCanvas,#treeCanvas{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100vw;height:100vh;object-fit:contain;background:0 0}
#slimeCanvas{position:absolute!important;top:0!important;left:0!important;width:100vw!important;height:100vh!important;max-width:none!important;max-height:none!important}
#dash-hud,#statue-hud,.mini-hud{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;font-family:Outfit,sans-serif;color:#fff;z-index:110;padding:15px 20px;background:rgba(10,10,26,.95);border-bottom:2px solid rgba(108,92,231,.6);box-shadow:0 4px 15px rgba(0,0,0,.5)}
#statue-hearts,#statue-progress,.dash-hp,.dash-wave-counter,.td-stat{font-size:24px;font-weight:700}
#dash-boss-hp{color:var(--accent-danger);font-size:24px;font-weight:700}
#dash-input-area,#statue-input-area,#td-math-panel,#tree-math-panel{position:absolute;bottom:40px;left:50%;transform:translateX(-50%);z-index:110;width:400px;text-align:center}
#td-expr,#tree-expr,#tree-instruction{color:#fff;background:rgba(0,0,0,.8);border:2px solid var(--accent-primary);border-radius:12px;padding:10px;margin-bottom:10px;font-family:Outfit,sans-serif;font-size:24px;font-weight:700}
#dash-input,#statue-input,#td-input,#tree-input{width:100%;padding:15px 25px;font-size:32px;font-family:Outfit,sans-serif;font-weight:700;text-align:center;border-radius:20px;border:2px solid var(--accent-primary);background:rgba(0,0,0,.8);color:#fff;outline:0;transition:.2s;box-shadow:var(--shadow-glow)}
#dash-input:focus,#statue-input:focus,#td-input:focus,#tree-input:focus{box-shadow:0 0 30px rgba(108,92,231,.6);border-color:var(--accent-secondary)}
#dash-leave-btn,#statue-leave-btn,#td-leave-btn,#tree-leave-btn{position:absolute;bottom:20px;right:20px;background:var(--accent-danger);color:#fff;padding:10px 20px;border-radius:8px;font-family:Outfit,sans-serif;font-weight:800;cursor:pointer;z-index:110;transition:transform .2s}
#dash-leave-btn:hover,#statue-leave-btn:hover,#td-controls button:hover,#td-leave-btn:hover,#tree-leave-btn:hover{transform:scale(1.05)}
#td-controls{position:absolute;bottom:20px;left:20px;z-index:110;display:flex;flex-direction:column;gap:10px}
#td-controls button{background:var(--accent-success);color:#fff;font-family:Outfit,sans-serif;font-size:18px;font-weight:700;border:none;padding:15px 20px;border-radius:12px;cursor:pointer;box-shadow:0 4px 15px rgba(0,0,0,.5);transition:transform .1s}
.magic-door{font-size:80px;transition:.3s;text-shadow:0 0 20px rgba(255,100,50,.5)}
#statue-bg{position:absolute;top:0;left:0;width:100%;height:100%;background:url('/images/map/crystal_cave_bg.jpg') center/cover no-repeat;opacity:.3;z-index:1}
#statue-character{position:absolute;top:30%;left:50%;transform:translate(-50%,-50%);font-size:150px;z-index:5;text-shadow:0 0 50px rgba(0,255,255,.5);transition:transform .2s}
#statue-dialogue{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(10,10,26,.95);border:2px solid var(--glass-border);padding:30px 50px;border-radius:20px;text-align:center;color:#fff;z-index:10;min-width:400px;box-shadow:inset 0 0 20px rgba(0,0,0,.5)}
#statue-dialogue p{font-family:Outfit,sans-serif;font-size:20px;color:var(--text-secondary);margin-bottom:20px;letter-spacing:2px}
#statue-expr{font-family:Outfit,sans-serif;font-size:64px;font-weight:900;color:var(--accent-secondary);text-shadow:0 0 20px rgba(0,210,255,.5)}
.shake-anim{animation:.4s cubic-bezier(.36,.07,.19,.97) both minigameShake}
@keyframes minigameShake{10%,90%{transform:translate3d(-1px,0,0)}
20%,80%{transform:translate3d(2px,0,0)}
30%,50%,70%{transform:translate3d(-4px,0,0)}
40%,60%{transform:translate3d(4px,0,0)}
}
.hidden{display:none!important}
.practice-container{max-width:640px;margin:0 auto;padding:16px 0}
.practice-header{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.practice-back{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:8px 14px;color:var(--text-secondary,#94a3b8);font-weight:700;font-size:.82rem;cursor:pointer;transition:.2s;flex-shrink:0}
.practice-back:hover{background:rgba(255,255,255,.1);color:#fff}
.practice-title{font-family:Outfit,sans-serif;font-size:1.2rem;font-weight:900;color:#fff}
.practice-sub{font-size:.78rem;color:var(--text-secondary,#94a3b8)}
.practice-grade-pick{display:flex;align-items:center;gap:10px;margin-bottom:16px;font-size:.85rem;color:var(--text-secondary,#94a3b8);font-weight:600}
.practice-grade-pick select{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:8px 12px;color:#fff;font-size:.85rem;font-weight:700;outline:0}
.practice-topics{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.practice-topic-btn{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:16px;text-align:left;cursor:pointer;transition:.2s;color:#fff}
.practice-topic-btn:hover{background:rgba(99,102,241,.15);border-color:rgba(99,102,241,.4);transform:translateY(-2px)}
.practice-topic-name{font-weight:700;font-size:.88rem;margin-bottom:4px}
.practice-topic-std{font-size:.7rem;color:var(--accent-xp,#a855f7);font-weight:600}
.practice-score-strip{display:flex;gap:12px;justify-content:center;margin-bottom:16px}
.practice-score-item{font-size:.82rem;font-weight:700;color:var(--text-secondary,#94a3b8);padding:4px 10px;border-radius:20px;background:rgba(255,255,255,.04)}
.practice-score-item.correct{color:#6ee7b7}
.practice-score-item.wrong{color:#fca5a5}
.practice-score-item.total{color:#a5b4fc}
.practice-question-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:32px 24px;text-align:center;margin-bottom:16px}
.practice-q-text{font-family:Outfit,sans-serif;font-size:1.8rem;font-weight:900;color:#fff}
.practice-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.practice-option{background:rgba(255,255,255,.06);border:2px solid rgba(255,255,255,.08);border-radius:14px;padding:18px;color:#fff;font-family:Outfit,sans-serif;font-size:1.3rem;font-weight:800;cursor:pointer;transition:.2s;text-align:center}
.practice-option:hover{background:rgba(99,102,241,.15);border-color:rgba(99,102,241,.4);transform:scale(1.03)}
.practice-option:active{transform:scale(.97)}
.practice-option.practice-correct{background:rgba(16,185,129,.25);border-color:#10b981}
.practice-option.practice-wrong{background:rgba(239,68,68,.2);border-color:#ef4444}
.practice-feedback{text-align:center;min-height:40px}
.practice-fb-correct{color:#6ee7b7;font-weight:700;font-size:.9rem;animation:.3s fadeIn}
.practice-fb-wrong{color:#fca5a5;font-weight:700;font-size:.9rem;animation:.3s fadeIn}
.hint-btn-wrap{text-align:center;margin:10px 0}
.hint-btn{background:rgba(245,158,11,.15);border:1px solid rgba(245,158,11,.3);border-radius:10px;padding:8px 18px;color:#fcd34d;font-weight:700;font-size:.82rem;cursor:pointer;transition:.2s}
.hint-btn:hover{background:rgba(245,158,11,.25)}
.hint-card{background:rgba(255,255,255,.06);border:1px solid rgba(245,158,11,.2);border-radius:14px;padding:14px 18px;text-align:left;animation:.3s fadeIn}
.hint-header{font-weight:800;color:#fcd34d;font-size:.85rem;margin-bottom:6px}
.hint-standard{font-size:.72rem;color:var(--accent-xp,#a855f7);font-weight:600;margin-bottom:6px}
.hint-explanation{font-size:.85rem;color:#fff;line-height:1.5}
.hint-link{display:block;font-size:.78rem;color:#60a5fa;margin-top:8px;text-decoration:none;font-weight:600}
.worked-question{font-family:Outfit,sans-serif;font-size:1.3rem;font-weight:900;color:#fff;text-align:center;margin-bottom:16px;padding:16px;background:rgba(255,255,255,.04);border-radius:12px}
.worked-steps{margin-bottom:12px}
.worked-step{display:flex;align-items:center;gap:12px;padding:10px 14px;margin-bottom:6px;background:rgba(255,255,255,.04);border-radius:10px;font-size:.88rem;color:#e2e8f0}
.worked-step-num{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#8b5cf6);display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;font-size:.8rem;flex-shrink:0}
.worked-standard{font-size:.72rem;color:var(--accent-xp,#a855f7);font-weight:600;text-align:center}
.celebration-overlay{position:fixed;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;z-index:9999;pointer-events:none;opacity:0;transition:opacity .3s}
.celebration-overlay.show{opacity:1}
.celebration-card{background:rgba(15,15,26,.95);border:2px solid rgba(255,255,255,.1);border-radius:24px;padding:32px 40px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.6);animation:.5s cubic-bezier(.34,1.56,.64,1) celebBounce}
@keyframes celebBounce{0%{transform:scale(.5);opacity:0}
100%{transform:scale(1);opacity:1}
}
.celebration-icon{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:2.5rem;margin:0 auto 12px}
.celebration-title{font-family:Outfit,sans-serif;font-size:1.5rem;font-weight:900;color:#fff;margin-bottom:6px}
.celebration-msg{font-size:.9rem;color:var(--text-secondary,#94a3b8);line-height:1.5}
.celebration-float{position:fixed;top:40%;left:50%;transform:translateX(-50%);font-family:Outfit,sans-serif;font-size:1.8rem;font-weight:900;pointer-events:none;z-index:10000;animation:2s ease-out forwards floatUp;text-shadow:0 2px 8px rgba(0,0,0,.5)}
@keyframes floatUp{0%{opacity:1;transform:translateX(-50%) translateY(0)}
100%{opacity:0;transform:translateX(-50%) translateY(-100px)}
}
.progress-container{max-width:680px;margin:0 auto;padding:16px 0}
.progress-section-title{font-family:Outfit,sans-serif;font-size:1rem;font-weight:900;color:#fff;margin:24px 0 12px}
.progress-diag-prompt{display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,rgba(124,58,237,.15),rgba(168,85,247,.1));border:1px solid rgba(124,58,237,.3);border-radius:16px;padding:16px 20px;cursor:pointer;transition:.2s;margin-bottom:8px;font-size:.9rem;color:#fff}
.progress-diag-prompt:hover{border-color:rgba(124,58,237,.6);transform:translateY(-2px)}
.progress-diag-prompt span:first-child{font-size:1.8rem}
.progress-diag-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:18px 20px;margin-bottom:8px}
.progress-diag-title{font-weight:800;font-size:.9rem;color:#fff;margin-bottom:4px}
.progress-diag-grade{font-family:Outfit,sans-serif;font-weight:900;font-size:1.1rem;color:#a5b4fc;margin-bottom:10px}
.progress-diag-domains{display:flex;flex-direction:column;gap:6px}
.progress-diag-domain{display:flex;align-items:center;gap:8px;font-size:.82rem;color:#e2e8f0;padding:6px 10px;background:rgba(255,255,255,.03);border-radius:8px}
.progress-diag-date{font-size:.72rem;color:var(--text-muted,#64748b);margin-top:8px}
.progress-skills{display:grid;grid-template-columns:1fr;gap:8px}
.progress-skill-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:14px 16px;transition:.2s}
.progress-skill-card:hover{border-color:rgba(255,255,255,.12)}
.progress-skill-card.mastered{border-left:3px solid #10b981}
.progress-skill-card.approaching{border-left:3px solid #f59e0b}
.progress-skill-card.below{border-left:3px solid #ef4444}
.progress-skill-top{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.progress-skill-status{font-size:1rem}
.progress-skill-info{flex:1;min-width:0}
.progress-skill-name{font-weight:700;font-size:.88rem;color:#fff}
.progress-skill-std{font-size:.68rem;color:var(--accent-xp,#a855f7);font-weight:600}
.progress-skill-pct{font-family:Outfit,sans-serif;font-weight:900;font-size:1.1rem;color:#fff}
.progress-skill-bar{width:100%;height:6px;background:rgba(255,255,255,.06);border-radius:20px;overflow:hidden;margin-bottom:4px}
.progress-skill-bar-fill{height:100%;border-radius:20px;transition:width .5s}
.progress-skill-bar-fill.mastered{background:#10b981}
.progress-skill-bar-fill.approaching{background:#f59e0b}
.progress-skill-bar-fill.below{background:#ef4444}
.progress-skill-meta{font-size:.72rem;color:var(--text-muted,#64748b);font-weight:600}
.progress-stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.progress-stat-box{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.07);border-radius:14px;padding:14px;text-align:center}
.progress-stat-val{font-family:Outfit,sans-serif;font-size:1.4rem;font-weight:900;color:#fff}
.progress-stat-lbl{font-size:.68rem;color:var(--text-muted,#64748b);font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.live-container{max-width:640px;margin:0 auto;padding:16px 0}
.live-join-card{text-align:center;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:40px 24px;margin-top:16px}
.live-game-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.live-game-q-num{font-family:Outfit,sans-serif;font-weight:900;font-size:.9rem;color:var(--text-secondary,#94a3b8)}
.live-game-score{font-weight:800;font-size:.9rem;color:#fcd34d}
.live-game-timer{font-family:Outfit,sans-serif;font-size:1.8rem;font-weight:900;color:#fff;width:56px;height:56px;display:flex;align-items:center;justify-content:center;background:rgba(239,68,68,.2);border:2px solid rgba(239,68,68,.4);border-radius:50%}
.live-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.live-option{border:none;border-radius:14px;padding:24px 16px;color:#fff;font-family:Outfit,sans-serif;font-size:1.4rem;font-weight:900;cursor:pointer;transition:.15s;text-align:center;text-shadow:0 2px 4px rgba(0,0,0,.3)}
.live-option:hover{transform:scale(1.04);filter:brightness(1.1)}
.live-option:active{transform:scale(.96)}
.live-feedback{text-align:center;padding:40px 32px;border-radius:24px;animation:.4s cubic-bezier(.34,1.56,.64,1) celebBounce}
.live-fb-correct{background:rgba(16,185,129,.15);border:2px solid rgba(16,185,129,.3)}
.live-fb-wrong{background:rgba(239,68,68,.15);border:2px solid rgba(239,68,68,.3)}
.live-results{text-align:center;padding:40px 24px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:24px;margin-top:20px}
.live-results-score{font-family:Outfit,sans-serif;font-size:2.5rem;font-weight:900;color:#fcd34d;text-shadow:0 0 20px rgba(252,211,77,.3)}
.shop-wallet{display:flex;justify-content:center;gap:20px;margin-bottom:12px;font-weight:800;font-size:.95rem;color:#fff}
.shop-owned{opacity:.6}
.a11y-high-contrast{--bg-primary:#000!important;--bg-secondary:#111!important;--text-primary:#fff!important;--text-secondary:#ddd!important;--text-muted:#bbb!important}
.a11y-high-contrast *{border-color:rgba(255,255,255,.3)!important}
.a11y-high-contrast .card,.a11y-high-contrast .hub-card,.a11y-high-contrast .modal-box{border:2px solid #fff!important;background:#111!important}
.a11y-colorblind{--accent-success:#3b82f6!important;--accent-danger:#f97316!important}
.a11y-dyslexia,.a11y-dyslexia *{font-family:'Comic Neue',OpenDyslexic,cursive,sans-serif!important;letter-spacing:.05em!important;word-spacing:0.1em!important;line-height:1.8!important}
#auth-modal,#forgot-password-modal{background-color:var(--bg-primary,#0a0a1a)!important;background-image:radial-gradient(circle at 50% -20%,#1a1a3a,transparent 50%),radial-gradient(circle at 100% 80%,rgba(108,92,231,.15),transparent 40%)!important;z-index:9999!important}
@keyframes authGlowPulse{0%,100%{opacity:.6;transform:scale(.9)}
50%{opacity:1;transform:scale(1.1)}
}
@keyframes authCardIn{from{opacity:0;transform:translateY(32px) scale(.95)}
to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes authIconFloat{0%,100%{transform:translateY(0) scale(1)}
50%{transform:translateY(-8px) scale(1.08)}
}
.auth-modal-card{width:90%;max-width:420px;background:rgba(5,5,18,.92);border:1px solid rgba(245,158,11,.18);border-radius:28px;box-shadow:0 40px 100px rgba(0,0,0,.8),0 0 0 1px rgba(245,158,11,.06),inset 0 0 60px rgba(245,158,11,.03);overflow:hidden;animation:.35s cubic-bezier(.25,1,.5,1) both authCardIn;position:relative}
.auth-modal-card::before{content:'';position:absolute;top:0;left:20px;right:20px;height:1px;background:linear-gradient(90deg,transparent,rgba(245,158,11,.3),transparent)}
.auth-modal-header{position:relative;padding:40px 32px 28px;text-align:center;background:linear-gradient(180deg,rgba(245,158,11,.09) 0,transparent 100%);border-bottom:1px solid rgba(255,255,255,.05);overflow:hidden}
.auth-logo-glow{position:absolute;top:-30px;left:50%;transform:translateX(-50%);width:200px;height:200px;background:radial-gradient(circle,rgba(245,158,11,.18),transparent 65%);animation:4s ease-in-out infinite authGlowPulse;pointer-events:none}
.auth-logo-icon{font-size:3.6rem;animation:5s ease-in-out infinite authIconFloat;position:relative;z-index:1;filter:drop-shadow(0 6px 20px rgba(245,158,11,.45));margin-bottom:10px}
.auth-modal-title{font-size:2rem;font-family:Outfit,sans-serif;font-weight:900;background:linear-gradient(135deg,#fff 30%,#f59e0b);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin:0 0 4px;line-height:1;filter:drop-shadow(0 0 16px rgba(245,158,11,.25))}
.auth-modal-sub{font-size:.82rem;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:rgba(245,158,11,.55);margin:0}
.auth-modal-body{padding:28px 32px 32px;display:flex;flex-direction:column;gap:12px}
.auth-input{width:100%;padding:14px 18px;background:rgba(255,255,255,.04);border:1.5px solid rgba(255,255,255,.08);border-radius:14px;color:#f8fafc;font-size:.95rem;font-family:Inter,sans-serif;transition:border-color .2s,box-shadow .2s,background .2s;box-sizing:border-box}
.auth-input:focus{outline:0;border-color:rgba(245,158,11,.55);background:rgba(245,158,11,.04);box-shadow:0 0 0 3px rgba(245,158,11,.1),0 0 18px rgba(245,158,11,.15)}
.auth-input::placeholder{color:rgba(255,255,255,.25)}
.auth-role-label{font-size:.72rem;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.4);margin:4px 0 8px}
.auth-role-row{display:flex;gap:8px;margin-bottom:4px}
.auth-role-btn{flex:1;padding:10px 6px;background:rgba(255,255,255,.03);border:1.5px solid rgba(255,255,255,.08);border-radius:12px;color:rgba(255,255,255,.6);font-size:.8rem;font-weight:700;cursor:pointer;transition:.3s cubic-bezier(.25, 1, .5, 1)}
.auth-role-btn:hover{background:rgba(245,158,11,.08);border-color:rgba(245,158,11,.3);color:#f59e0b;transform:scale(1.04)}
.auth-role-btn.selected{background:rgba(245,158,11,.14);border-color:rgba(245,158,11,.5);color:#f59e0b;box-shadow:0 0 16px rgba(245,158,11,.2)}
.auth-hint{font-size:.72rem;color:rgba(255,255,255,.3);text-align:center;margin:-4px 0 4px}
.auth-submit-btn{width:100%;padding:16px;background:linear-gradient(135deg,#ea580c,#f59e0b);border:none;border-radius:16px;color:#fff;font-size:1rem;font-weight:900;font-family:Outfit,sans-serif;letter-spacing:.5px;cursor:pointer;box-shadow:0 10px 30px rgba(245,158,11,.3),inset 0 1px 0 rgba(255,255,255,.2);transition:filter .2s,box-shadow .2s,transform .15s;position:relative;overflow:hidden}
.auth-submit-btn::before{content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);transition:left .4s}
.auth-submit-btn:hover::before{left:160%}
.auth-submit-btn:hover{filter:brightness(1.12);box-shadow:0 0 32px rgba(245,158,11,.5),inset 0 1px 0 rgba(255,255,255,.2)}
.auth-submit-btn:active{transform:scale(.97)}
.auth-links{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;font-size:.8rem;color:rgba(255,255,255,.35)}
.auth-link-small{color:rgba(255,255,255,.35);text-decoration:underline;text-decoration-color:rgba(255,255,255,.15);transition:color .2s}
.auth-link-small:hover{color:rgba(255,255,255,.7)}
.auth-sep{color:rgba(255,255,255,.2)}
.auth-link-accent{color:#f59e0b;font-weight:800;text-decoration:none;transition:text-shadow .2s}
.auth-link-accent:hover{text-shadow:0 0 12px rgba(245,158,11,.6)}
.auth-cancel-btn{width:100%;padding:12px;background:0 0;border:1px solid rgba(255,255,255,.07);border-radius:14px;color:rgba(255,255,255,.3);font-size:.85rem;font-weight:700;cursor:pointer;transition:.2s}
.auth-cancel-btn:hover{border-color:rgba(255,255,255,.18);color:rgba(255,255,255,.6)}
#daily-reward-modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10000;background:rgba(0,0,0,.75);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s}
#daily-reward-modal.dr-show{opacity:1}
.dr-box{background:linear-gradient(135deg,#1a1a3e 0,#12122a 100%);border:1px solid rgba(108,92,231,.5);border-radius:24px;padding:32px 28px;max-width:420px;width:90%;text-align:center;box-shadow:0 0 40px rgba(108,92,231,.4);animation:.4s cubic-bezier(.34,1.56,.64,1) bounceIn}
.dr-title{font-size:1.6rem;font-weight:900;background:linear-gradient(90deg,#ffc857,#ff6b6b);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:4px}
.dr-subtitle{color:var(--text-secondary);font-size:.9rem;margin-bottom:20px}
#dr-days{display:flex;gap:8px;justify-content:center;margin-bottom:24px;flex-wrap:wrap}
.dr-day{display:flex;flex-direction:column;align-items:center;padding:8px 10px;border-radius:12px;min-width:48px;gap:4px;transition:transform .2s}
.dr-day-num{font-size:.65rem;color:var(--text-muted);font-weight:700}
.dr-day-reward{font-size:.7rem}
.dr-day-done{background:rgba(45,198,83,.15);border:1px solid #2dc653}
.dr-day-current{background:rgba(108,92,231,.25);border:2px solid #6c5ce7;transform:scale(1.1)}
.dr-day-locked{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1)}
.dr-reward-box{background:rgba(255,200,87,.08);border:1px solid rgba(255,200,87,.3);border-radius:16px;padding:16px;margin-bottom:20px}
.dr-reward-label{color:#ffc857;font-weight:700;font-size:1rem;margin-bottom:8px}
.dr-coins{font-size:1.4rem;font-weight:900;color:#ffc857}
.dr-gems{font-size:1.1rem;color:#a855f7;font-weight:700;margin-top:4px}
.dr-gems:empty{display:none}
.dr-claim-btn{background:linear-gradient(135deg,#6c5ce7,#a855f7);color:#fff;border:none;border-radius:14px;padding:14px 32px;font-size:1rem;font-weight:700;cursor:pointer;width:100%;transition:transform .2s,box-shadow .2s;box-shadow:0 4px 20px rgba(108,92,231,.4)}
.dr-claim-btn:hover{transform:scale(1.03);box-shadow:0 6px 28px rgba(108,92,231,.6)}
#tutorial-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9000;background:rgba(0,0,0,.6);pointer-events:all}
#tutorial-card{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);z-index:9001;background:rgba(15,15,35,.98);border:1px solid var(--accent-primary);border-radius:16px;padding:14px 18px;width:320px;max-width:calc(100vw - 32px);box-shadow:0 -4px 32px rgba(108,92,231,.5);animation:.3s cubic-bezier(.34,1.56,.64,1) slideUpCard}
@keyframes slideUpCard{from{transform:translateX(-50%) translateY(20px);opacity:0}
to{transform:translateX(-50%) translateY(0);opacity:1}
}
#tutorial-arrow{position:fixed;z-index:9002;font-size:1.6rem;animation:.8s ease-in-out infinite alternate bounceArrow;pointer-events:none;filter:drop-shadow(0 0 8px rgba(108,92,231,.9))}
@keyframes bounceArrow{from{transform:translateY(0)}
to{transform:translateY(-8px)}
}
.tut-step-label{font-size:.62rem;color:var(--text-muted);margin-bottom:4px}
#tut-title{font-size:.85rem;font-weight:800;color:#fff;margin-bottom:4px}
#tut-text{font-size:.75rem;color:var(--text-secondary);line-height:1.4;margin-bottom:10px}
.tut-actions{display:flex;gap:8px}
.tut-next-btn{flex:1;background:linear-gradient(135deg,#6c5ce7,#a855f7);color:#fff;border:none;border-radius:8px;padding:7px 10px;font-size:.8rem;font-weight:700;cursor:pointer;transition:transform .2s}
.tut-next-btn:hover{transform:scale(1.04)}
.tut-skip-btn{background:rgba(255,255,255,.06);color:var(--text-muted);border:1px solid var(--glass-border);border-radius:8px;padding:7px 10px;font-size:.72rem;cursor:pointer;transition:background .2s}
.tut-skip-btn:hover{background:rgba(255,255,255,.12)}
.tut-spotlit{position:relative;z-index:9005;box-shadow:0 0 0 4px var(--accent-primary),0 0 0 9000px rgba(0,0,0,.6)!important;border-radius:12px}
#story-panel{background:var(--bg-glass);border:1px solid var(--glass-border);border-radius:16px;margin:8px;overflow:hidden}
.story-panel-header{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;cursor:pointer;font-weight:700;font-size:.85rem;color:#ffc857}
.story-item{padding:10px 14px;border-bottom:1px solid var(--glass-border);transition:background .2s}
.story-item:last-child{border-bottom:none}
.story-item.story-done{opacity:.6}
.story-item.story-locked{opacity:.4}
.story-header{display:flex;align-items:flex-start;gap:10px;margin-bottom:6px}
.story-icon{font-size:1.2rem}
.story-info{display:flex;flex-direction:column;gap:2px}
.story-title{font-size:.85rem;font-weight:700;color:#f8fafc}
.story-desc{font-size:.72rem;color:var(--text-secondary)}
#achievements-screen{padding:20px;background:var(--bg-primary);overflow-y:auto;height:100%}
.ach-screen-header{font-size:1.6rem;font-weight:900;background:linear-gradient(90deg,#6c5ce7,#00d2ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:20px}
#achievements-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.ach-card{background:var(--bg-glass);border:1px solid var(--glass-border);border-radius:16px;padding:16px;display:flex;gap:14px;align-items:flex-start;transition:transform .2s,border-color .2s}
.ach-card:hover{transform:translateY(-2px);border-color:rgba(108,92,231,.4)}
.ach-card.ach-done{border-color:rgba(45,198,83,.5);background:rgba(45,198,83,.08);box-shadow:0 0 16px rgba(45,198,83,.15)}
.ach-icon{font-size:2rem}
.ach-info{flex:1;min-width:0}
.ach-title{font-size:.9rem;font-weight:800;color:#f8fafc;margin-bottom:2px}
.ach-desc{font-size:.75rem;color:var(--text-secondary);margin-bottom:8px}
.ach-bar-bg{height:4px;background:rgba(255,255,255,.08);border-radius:4px;margin-bottom:4px}
.ach-bar-fill{height:100%;background:linear-gradient(90deg,#6c5ce7,#00d2ff);border-radius:4px;transition:width .5s}
.ach-meta{display:flex;justify-content:space-between;font-size:.72rem}
.ach-meta span:first-child{color:var(--text-secondary)}
.ach-reward{color:#ffc857;font-weight:700}
.gender-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px 32px;background:rgba(255,255,255,.05);border:2px solid rgba(255,255,255,.1);border-radius:18px;cursor:pointer;transition:.2s;color:#f8fafc;font-family:Outfit,sans-serif;min-width:120px}
.gender-card:hover{background:rgba(108,92,231,.15);border-color:rgba(108,92,231,.4);transform:scale(1.05)}
.gender-card-active{background:rgba(108,92,231,.25);border-color:#6c5ce7;box-shadow:0 0 20px rgba(108,92,231,.4);transform:scale(1.05)}
.gender-label{font-size:1rem;font-weight:800}
.lang-grid{display:grid;grid-template-columns:repeat(3,1fr);max-height:340px;padding:4px 2px;scrollbar-width:thin;scrollbar-color:rgba(108,92,231,0.4) transparent}
.lang-grid::-webkit-scrollbar{width:6px}
.lang-grid::-webkit-scrollbar-track{background:0 0}
.lang-grid::-webkit-scrollbar-thumb{background:rgba(108,92,231,.4);border-radius:4px}
.lang-btn{display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--text-primary);font-family:Outfit,sans-serif;min-height:72px}
.lang-btn:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(108,92,231,.3)}
.lang-btn-active{background:rgba(108,92,231,.25)!important;border-color:#6c5ce7!important;box-shadow:0 0 0 2px rgba(108,92,231,.4),0 4px 16px rgba(108,92,231,.3)!important}
.lang-name{text-align:center;color:var(--text-primary)}
.lang-search-row{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.05);border:1px solid var(--glass-border);border-radius:12px;padding:8px 14px;margin-bottom:14px;transition:border-color .2s}
.lang-search-row:focus-within{border-color:var(--accent-primary);box-shadow:0 0 0 2px rgba(108,92,231,.2)}
.lang-search-icon{font-size:1.1rem;flex-shrink:0;opacity:.7}
.lang-search-row .game-input{background:0 0;border:none;box-shadow:none;padding:0;font-size:.95rem;flex:1}
.lang-search-row .game-input:focus{outline:0;box-shadow:none;border:none}
.lang-native{color:var(--text-muted);text-align:center;color:var(--text-muted);display:block;margin-top:2px}
.lang-selected-display{display:flex;align-items:center;justify-content:center;gap:10px;background:rgba(108,92,231,.12);border:1px solid rgba(108,92,231,.3);border-radius:12px;padding:10px 18px;margin-top:10px;font-size:1rem;font-weight:700;color:var(--text-primary);animation:.3s fadeIn}
.lang-selected-display #lang-selected-flag{font-size:1.4rem}
.settings-lang-row{display:flex;align-items:center;gap:10px;justify-content:space-between;margin-bottom:8px}
.settings-lang-current{font-size:.95rem;font-weight:800;color:var(--text-primary);background:rgba(255,255,255,.06);border:1px solid var(--glass-border);border-radius:10px;padding:8px 14px;flex:1}
.settings-lang-search{background:rgba(255,255,255,.03);border:1px solid var(--glass-border);border-radius:14px;padding:12px;animation:.2s fadeIn}
@keyframes fadeIn{from{opacity:0;transform:translateY(-4px)}
to{opacity:1;transform:translateY(0)}
}
.onboarding-content{max-width:580px;padding:28px 32px}
.onboarding-steps{display:flex;align-items:center;justify-content:center;gap:0;margin-bottom:24px}
.onboarding-step{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.07);border:2px solid rgba(255,255,255,.12);color:var(--text-muted);font-size:.85rem;font-weight:900;display:flex;align-items:center;justify-content:center;transition:.3s;flex-shrink:0}
.onboarding-step.active{background:linear-gradient(135deg,#6c5ce7,#a855f7);border-color:#6c5ce7;color:#fff;box-shadow:0 0 16px rgba(108,92,231,.5)}
.onboarding-step-line{flex:1;height:2px;background:rgba(255,255,255,.1);max-width:60px}
.ob-step{animation:.25s fadeIn}
.ob-step.hidden{display:none}
body::before{content:'';position:fixed;inset:0;background:radial-gradient(ellipse at 15% 50%,rgba(108,92,231,.08) 0,transparent 55%),radial-gradient(ellipse at 85% 20%,rgba(0,210,255,.06) 0,transparent 45%),radial-gradient(ellipse at 50% 80%,rgba(168,85,247,.05) 0,transparent 50%);pointer-events:none;z-index:0}
.logo-icon{filter:drop-shadow(0 0 16px rgba(108,92,231,.8)) drop-shadow(0 0 32px rgba(0,210,255,.4))}
.logo-text span:first-child{background:linear-gradient(135deg,#f8fafc,#c4b5fd);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.logo-accent{-webkit-background-clip:text;-webkit-text-fill-color:transparent}
#hero-screen{background:radial-gradient(ellipse at 50% 30%,rgba(108,92,231,.18) 0,transparent 60%),radial-gradient(ellipse at 80% 70%,rgba(0,210,255,.08) 0,transparent 50%),linear-gradient(180deg,#050510 0,#0a0a1a 100%)}
.hero-avatar{font-size:7rem;filter:drop-shadow(0 0 30px rgba(108,92,231,.7)) drop-shadow(0 0 60px rgba(0,210,255,.4));animation:3s ease-in-out infinite heroFloat,4s ease-in-out infinite alternate heroGlow}
@keyframes heroGlow{from{filter:drop-shadow(0 0 20px rgba(108,92,231,.6)) drop-shadow(0 0 40px rgba(0,210,255,.3))}
to{filter:drop-shadow(0 0 40px rgba(168,85,247,.9)) drop-shadow(0 0 70px rgba(0,210,255,.6))}
}
#hero-play-btn,.hero-play-btn{background:linear-gradient(135deg,#6c5ce7 0,#8b5cf6 40%,#00d2ff 100%);box-shadow:0 0 30px rgba(108,92,231,.5),0 0 60px rgba(108,92,231,.2),inset 0 1px 0 rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.15);font-size:1.4rem;padding:20px 60px;border-radius:24px;transition:.25s cubic-bezier(.4, 0, .2, 1);letter-spacing:1px}
#hero-play-btn:hover,.hero-play-btn:hover{transform:scale(1.07) translateY(-2px);box-shadow:0 0 50px rgba(108,92,231,.7),0 0 100px rgba(108,92,231,.3),0 20px 40px rgba(0,0,0,.4)}
.title-lg{background:linear-gradient(90deg,#f8fafc 0,#a855f7 40%,#00d2ff 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-size:3.5rem}
.glass,.glass-card,.glass-panel{background:rgba(14,14,32,.88);border:1px solid rgba(108,92,231,.15);box-shadow:0 4px 24px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.05);transition:box-shadow .25s,transform .25s,border-color .25s}
.glass-card:hover{box-shadow:0 12px 40px rgba(0,0,0,.5),0 0 0 1px rgba(108,92,231,.3),inset 0 1px 0 rgba(255,255,255,.08)}
.btn-primary,button.btn-primary{background:linear-gradient(135deg,#6c5ce7,#8b5cf6);box-shadow:0 4px 20px rgba(108,92,231,.4),inset 0 1px 0 rgba(255,255,255,.2);border-radius:16px;font-weight:800;letter-spacing:.3px;position:relative;overflow:hidden;transition:.2s cubic-bezier(.4, 0, .2, 1)}
.btn-primary:hover,button.btn-primary:hover{transform:scale(1.04) translateY(-2px);box-shadow:0 8px 32px rgba(108,92,231,.6),inset 0 1px 0 rgba(255,255,255,.25)}
.btn-primary:active{transform:scale(.97)}
.btn-ghost{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);transition:.2s;border-radius:14px}
.btn-ghost:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2);transform:scale(1.03)}
#hud-hp,#hud-xp{transition:width .5s cubic-bezier(.4, 0, .2, 1);position:relative}
.progress-fill,.xp-bar-fill,[class*=xp-fill]{background:linear-gradient(90deg,#7c3aed,#a855f7,#c084fc);box-shadow:0 0 8px rgba(168,85,247,.5);position:relative}
#question-timer,.bq-timer-fill{background:linear-gradient(90deg,#6c5ce7,#00d2ff,#a855f7,#6c5ce7);background-size:300% 100%;animation:2s linear infinite timerFlow}
@keyframes timerFlow{0%{background-position:0 50%}
100%{background-position:200% 50%}
}
.modal-box,.modal-content{background:rgba(8,8,22,.96);box-shadow:0 0 0 1px rgba(108,92,231,.1),0 30px 80px rgba(0,0,0,.8)}
.game-select,input,select{background:rgba(255,255,255,.05);border:1px solid rgba(108,92,231,.2);transition:.2s}
.game-select:focus,input:focus,select:focus{border-color:rgba(108,92,231,.6);box-shadow:0 0 0 3px rgba(108,92,231,.15);outline:0}
.funny-toast,.toast{background:rgba(10,10,26,.95);border:1px solid rgba(108,92,231,.3);box-shadow:0 8px 30px rgba(0,0,0,.5),0 0 20px rgba(108,92,231,.1);font-weight:700;border-radius:16px}
.map-node{transition:.25s cubic-bezier(.4, 0, .2, 1);position:relative}
.map-node:hover{transform:scale(1.15) translateY(-4px);z-index:5}
.section-title{background:linear-gradient(135deg,#f8fafc 0,#c4b5fd 50%,#00d2ff 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.streak-display.streak-active::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,200,87,.15),transparent);animation:1s infinite streakShine}
@keyframes streakShine{from{transform:translateX(-100%)}
to{transform:translateX(100%)}
}
#adventure-screen,.adventure-area{background:radial-gradient(ellipse at 30% 30%,rgba(45,198,83,.05) 0,transparent 50%),radial-gradient(ellipse at 70% 70%,rgba(108,92,231,.06) 0,transparent 45%),linear-gradient(180deg,#050510 0,#080820 100%)}
@keyframes wowGlow{0%,100%{opacity:.7}
50%{opacity:1}
}
@keyframes wowPulse{0%,100%{transform:scale(1)}
50%{transform:scale(1.03)}
}
@keyframes screenSnap{0%{opacity:0;transform:scale(.99)}
100%{opacity:1;transform:scale(1)}
}
*{scrollbar-width:thin;scrollbar-color:rgba(139,92,246,0.4) transparent}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:0 0}
::-webkit-scrollbar-thumb{background:rgba(139,92,246,.4);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:rgba(6,182,212,.8)}
.glass-card,.shop-glass-card{position:relative;border-radius:20px!important;background:linear-gradient(145deg,rgba(40,35,60,.6),rgba(15,15,30,.8))!important;border:1px solid rgba(255,255,255,.08)!important;border-top:1px solid rgba(255,255,255,.15)!important;box-shadow:0 15px 35px rgba(0,0,0,.5),inset 0 1px 1px rgba(255,255,255,.2)!important;transition:.3s cubic-bezier(.25, 1, .5, 1)!important}
.glass-card:hover,.shop-glass-card:hover{transform:translateY(-4px)!important;border-color:rgba(0,245,255,.5)!important;box-shadow:0 25px 50px rgba(0,0,0,.6),0 0 25px rgba(0,245,255,.2),inset 0 1px 1px rgba(255,255,255,.3)!important}
.screen-padded{background:radial-gradient(circle at 50% 10%,rgba(157,78,221,.15),transparent 70%)!important}
.screen-hero-title,.section-title,.shop-mega-title{background-image:linear-gradient(130deg,#fff 20%,#00f5ff 100%)!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;filter:drop-shadow(0 4px 10px rgba(0, 245, 255, .4))}
.hero-name,.logo-accent,.title-gradient{background:linear-gradient(135deg,#fff 20%,#9d4edd 100%)!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important;filter:drop-shadow(0 2px 8px rgba(157, 78, 221, .3))}
.btn-primary,.hero-play-btn{background:linear-gradient(135deg,#7c3aed,#9d4edd)!important;box-shadow:0 6px 20px rgba(124,58,237,.4),inset 0 1px 1px rgba(255,255,255,.3)!important;border-radius:14px!important;border:1px solid rgba(255,255,255,.2)!important;transition:.3s cubic-bezier(.25, 1, .5, 1)!important}
.btn-primary:hover,.hero-play-btn:hover{transform:translateY(-2px) scale(1.03)!important;background:linear-gradient(135deg,#6d28d9,#8b5cf6)!important;box-shadow:0 12px 30px rgba(124,58,237,.6),inset 0 2px 2px rgba(255,255,255,.4)!important}
.btn-primary:active,.hero-play-btn:active{transform:translateY(1px) scale(.96)!important}
input,select,textarea{background:rgba(10,10,20,.6)!important;border:1px solid rgba(255,255,255,.1)!important;border-radius:12px!important;color:#f8fafc!important;padding:12px 16px!important;transition:.2s!important}
input:focus,select:focus,textarea:focus{outline:0!important;border-color:#06b6d4!important;background:rgba(15,15,30,.8)!important;box-shadow:0 0 0 2px rgba(6,182,212,.2),0 4px 15px rgba(6,182,212,.1)!important}
input::placeholder,textarea::placeholder{color:rgba(255,255,255,.3)!important}
.funny-toast,.toast-notification{background:rgba(10,10,20,.95)!important;border:1px solid rgba(139,92,246,.4)!important;box-shadow:0 15px 35px rgba(0,0,0,.6),0 0 20px rgba(139,92,246,.2)!important;border-radius:16px!important;font-weight:600!important}
.modal-backdrop,.modal-overlay{background:rgba(5,5,10,.8)!important}
.modal-box,.modal-card,.modal-content{background:linear-gradient(160deg,rgba(20,20,35,.95),rgba(10,10,20,.98))!important;border:1px solid rgba(255,255,255,.08)!important;border-top:1px solid rgba(255,255,255,.15)!important;border-radius:20px!important;box-shadow:0 30px 60px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.05)!important}
.btn-spatial-buy{background:rgba(6,182,212,.1)!important;border-color:rgba(6,182,212,.2)!important;color:#06b6d4!important;border-radius:12px!important}
.btn-spatial-buy:hover:not(:disabled){background:rgba(6,182,212,.2)!important;box-shadow:0 0 15px rgba(6,182,212,.3)!important}
.profile-avatar{border-color:rgba(139,92,246,.4)!important}
.profile-avatar:hover{border-color:#8b5cf6!important;box-shadow:0 10px 25px rgba(139,92,246,.4),inset 0 0 15px rgba(139,92,246,.2)!important}
.map-node.node-current .node-icon{box-shadow:0 10px 20px rgba(0,0,0,.5),0 0 20px rgba(139,92,246,.5),inset 0 0 15px rgba(139,92,246,.3)!important;border-color:#8b5cf6!important;animation:2s ease-in-out infinite wowGlow}
.map-node.node-unlocked:hover .node-icon{transform:scale(1.1)}
.hero-avatar,.hud-avatar-ring .hud-avatar,.profile-avatar{transition:transform .3s cubic-bezier(.25, 1, .5, 1)!important}
.hero-avatar:hover,.profile-avatar:hover{transform:translateY(-5px) scale(1.08)!important;filter:drop-shadow(0 15px 25px rgba(0,0,0,.5)) drop-shadow(0 0 15px rgba(139, 92, 246, .4))!important}
#battle-result-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:800;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.7);animation:.3s fadeIn}
#battle-result-overlay.hidden{display:none}
.battle-result-card{width:min(480px,94vw);border-radius:28px;padding:36px 28px;text-align:center;position:relative;overflow:hidden;animation:.45s cubic-bezier(.34,1.56,.64,1) bounceIn}
.battle-result-card::before{content:'';position:absolute;top:0;right:0;bottom:0;left:0;background:inherit;opacity:.08;border-radius:inherit;pointer-events:none}
.result-victory{background:linear-gradient(145deg,#12122a,#1a2a1a);border:1.5px solid rgba(45,198,83,.5);box-shadow:0 0 60px rgba(45,198,83,.25)}
.result-defeat{background:linear-gradient(145deg,#12122a,#2a1212);border:1.5px solid rgba(255,107,107,.5);box-shadow:0 0 60px rgba(255,107,107,.2)}
.result-emoji{font-size:4.5rem;margin-bottom:8px}
.result-title{font-size:2rem;font-weight:900;margin-bottom:6px}
.result-subtitle{font-size:.85rem;color:var(--text-secondary);margin-bottom:20px;font-style:italic}
.result-rewards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px}
.result-reward-box{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:12px 6px;display:flex;flex-direction:column;align-items:center;gap:4px}
.rrb-icon{font-size:1.4rem}
.rrb-val{font-size:1.1rem;font-weight:900;color:var(--text-primary)}
.rrb-label{font-size:.6rem;color:var(--text-muted);font-weight:700;text-transform:uppercase}
.result-streak-bar{background:rgba(255,255,255,.05);border:1px solid rgba(255,165,0,.3);border-radius:12px;padding:10px 14px;margin-bottom:16px;font-size:.85rem;font-weight:700;color:#ffc857}
.result-buttons{display:flex;gap:10px;position:relative;z-index:2}
.result-buttons .btn{flex:1;cursor:pointer}
@keyframes bounceIn{0%{transform:scale(.7) translateY(40px);opacity:0}
60%{transform:scale(1.05) translateY(-5px);opacity:1}
100%{transform:scale(1) translateY(0)}
}
#daily-streak-widget{position:fixed;top:14px;right:16px;z-index:250;background:rgba(10,10,26,.9);border:1px solid rgba(255,165,0,.4);border-radius:20px;padding:8px 14px;display:flex;align-items:center;gap:8px;cursor:pointer;transition:.2s;box-shadow:0 4px 20px rgba(0,0,0,.3)}
#daily-streak-widget:hover{border-color:rgba(255,165,0,.7);transform:scale(1.03)}
.dsw-icon{font-size:1.3rem}
.dsw-count{font-size:1.1rem;font-weight:900;color:#ffc857}
.dsw-label{font-size:.6rem;color:var(--text-muted);font-weight:700;text-transform:uppercase}
#lang-modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:900;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center}
#lang-modal.hidden{display:none}
.lang-modal-box{width:min(520px,96vw);max-height:85vh;background:linear-gradient(145deg,#12122a,#0a0a1a);border:1px solid rgba(108,92,231,.3);border-radius:24px;padding:20px;display:flex;flex-direction:column;box-shadow:0 0 60px rgba(108,92,231,.25);animation:.35s cubic-bezier(.34,1.56,.64,1) bounceIn}
.lang-modal-title{font-size:1.1rem;font-weight:900;text-align:center;margin-bottom:12px}
.lang-search-wrap{position:relative;margin-bottom:12px}
.lang-search-wrap input{width:100%;padding:10px 14px 10px 36px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:12px;color:var(--text-primary);font-size:.9rem;outline:0;box-sizing:border-box}
.lang-search-wrap input:focus{border-color:rgba(108,92,231,.6)}
.lang-search-wrap::before{content:'🔍';position:absolute;left:10px;top:50%;transform:translateY(-50%);font-size:.9rem}
.lang-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;overflow-y:auto;padding-right:4px;scrollbar-width:thin;scrollbar-color:rgba(108,92,231,0.4) transparent}
.lang-btn{display:flex;align-items:center;gap:8px;padding:9px 10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:10px;cursor:pointer;transition:.18s;text-align:left}
.lang-btn:hover{background:rgba(108,92,231,.15);border-color:rgba(108,92,231,.4);transform:scale(1.02)}
.lang-btn.lang-btn-active{background:rgba(108,92,231,.25)!important;border-color:#6c5ce7!important;box-shadow:0 0 0 2px rgba(108,92,231,.3)}
.lang-flag{line-height:1;font-size:1.2rem;flex-shrink:0}
.lang-name{font-size:.72rem;font-weight:700;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lang-native{font-size:.6rem;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lang-modal-footer{display:flex;gap:10px;margin-top:12px}
.lang-modal-footer .btn{flex:1}
.global-back-btn{display:none;width:auto;padding:0 12px;font-weight:800;font-size:1rem;cursor:pointer}
.quest-panel-close-btn{background:0 0;border:none;color:#94a3b8;cursor:pointer;font-size:1.6rem;padding:12px;line-height:1;transition:transform .2s}
.quest-panel-close-btn:hover{transform:scale(1.1);color:#ff6b6b}
.badge-horde{background:linear-gradient(45deg,#ef4444,#f97316);color:#fff;padding:2px 6px;border-radius:8px;font-size:.75rem;font-weight:800;margin-left:8px;box-shadow:0 0 8px rgba(239,68,68,.6);text-transform:uppercase;vertical-align:middle}
.battle-center-hologram{display:flex;gap:20px;align-items:stretch;justify-content:center}
.drawing-pad-wrapper{width:400px;flex-shrink:0;display:flex;flex-direction:column;margin:0}
.drawing-pad-toolbar{padding:12px;display:flex;flex-direction:column;gap:8px;justify-content:center;align-items:center}
.qte-bar-bg{margin-top:5px;background:rgba(0,0,0,.5);border-radius:10px;height:10px;overflow:hidden;width:100%;box-shadow:inset 0 0 5px rgba(0,0,0,.8);position:relative}
.qte-bar-fill{height:100%;width:0%;background:linear-gradient(90deg,#ff4d4d,#ff9e00);filter:drop-shadow(0 0 5px #ff4d4d);transition:width .3s ease-out}
.qte-close-btn{position:absolute;top:10px;right:20px;font-size:3.5rem;cursor:pointer;filter:drop-shadow(0 5px 10px rgba(0,0,0,.5));transition:transform .2s;z-index:50}
.retreat-btn{position:absolute!important;top:20px!important;right:20px!important;left:auto!important;z-index:1000!important;font-family:Outfit,sans-serif;font-weight:900;font-size:1.1rem;padding:12px 24px;border-radius:12px;background:rgba(239,68,68,.15)!important;color:#fca5a5!important;border:1px solid rgba(239,68,68,.5)!important;cursor:pointer;box-shadow:0 4px 15px rgba(239,68,68,.2);transition:.2s cubic-bezier(.34, 1.56, .64, 1);display:inline-flex;align-items:center;gap:8px;backdrop-filter:blur(8px)}
.retreat-btn:hover{transform:scale(1.05);box-shadow:0 0 20px rgba(239,68,68,.5);background:rgba(239,68,68,.25)!important;color:#fff!important}
.retreat-btn:active{transform:scale(.95)}
.hud-retreat{position:static!important;margin:0!important}
.minigame-container h1{margin-top:50px!important}
.minigame-container canvas{max-width:95vw;max-height:50vh;height:auto;object-fit:contain}
@media (max-width:768px){.retreat-btn{padding:8px 16px!important;font-size:.9rem!important;top:20px!important;right:20px!important;left:auto!important}
.minigame-container h1{font-size:28px!important;margin-top:40px!important}
.minigame-container div[style*="top:50%"]{width:90vw!important;padding:15px!important}
.minigame-container div[style*="font-size:48px"],.minigame-container div[style*="font-size:52px"]{font-size:32px!important}
#game-hud{height:56px;padding:0 10px;gap:6px}
#game-stage{padding-top:56px}
.hud-profile{gap:6px!important}
.hud-avatar-ring{width:34px;height:34px;font-size:1.1rem}
#global-hud-avatar{width:60px;height:60px}
.hud-name{font-size:.82rem;max-width:80px}
.hud-level{font-size:.65rem}
.hud-xp-track{width:55px;height:5px}
.hud-resources{gap:6px!important}
.hud-pill{padding:4px 8px;font-size:.78rem;border-radius:10px;gap:4px}
.hud-actions{gap:6px!important;right:8px!important;top:10px!important}
.hud-btn{width:36px;height:36px;font-size:1rem;border-radius:10px}
#global-back-btn{font-size:.75rem;padding:6px 10px;min-width:auto}
.screen-padded{padding:16px 12px}
.screen-hero{padding:16px;margin-bottom:16px;gap:14px;border-radius:14px;flex-wrap:wrap}
.screen-hero-icon{font-size:2.5rem}
.screen-hero-title{font-size:1.4rem!important}
.screen-hero-sub{font-size:.85rem}
.screen-hero-badge{padding:6px 12px;font-size:.75rem}
.modal-content{width:94vw;max-width:94vw;padding:20px 16px;border-radius:18px;max-height:90vh;overflow-y:auto}
.modal-content h2{font-size:1.25rem;margin-bottom:14px}
.bq-options button,.btn-primary,.btn-secondary,.hub-card,.light-answer-btn,.shop-item,button,input[type=number],input[type=password],input[type=text],select{min-height:44px}
.glass-card{padding:16px;border-radius:14px}
.section-title{font-size:1.3rem!important}
.title-lg{font-size:2rem!important}
.screen{-webkit-overflow-scrolling:touch}
#big-announcement{font-size:1.4rem;height:100px}
#result-title{font-size:2rem}
#result-rewards{font-size:1.1rem}
.result-rewards-grid{grid-template-columns:1fr!important;gap:8px!important}
#daily-streak-widget{top:60px!important;right:8px!important}
}
@media (max-width:400px){#game-hud{padding:0 6px}
.hud-name{max-width:60px;font-size:.72rem}
.hud-user{display:none}
.hud-pill{padding:3px 6px;font-size:.7rem}
.modal-content{padding:16px 12px}
.modal-content h2{font-size:1.1rem}
.bq-question{font-size:1.1rem!important}
.screen-hero{padding:12px 10px}
.screen-hero-icon{font-size:2rem}
.screen-hero-title{font-size:1.2rem!important}
}
@supports (padding-top:env(safe-area-inset-top)){@media (max-width:768px){#game-hud{padding-top:env(safe-area-inset-top);height:calc(56px + env(safe-area-inset-top))}
#game-stage{padding-top:calc(56px + env(safe-area-inset-top))}
}
}
@media (max-height:500px) and (max-width:900px){#game-hud{height:44px}
#game-stage{padding-top:44px}
.modal-content{max-height:92vh}
}
@media (max-width:768px){.hub-nav-panel{padding:16px 12px}
.hub-nav-grid{grid-template-columns:repeat(2,1fr);gap:8px}
.hub-card{padding:12px 8px;border-radius:12px}
.hub-card-icon{font-size:1.8rem;margin-bottom:6px}
.hub-card-title{font-size:.88rem}
.hub-card-desc{font-size:.65rem}
.hub-hero-details{min-width:auto;width:90%;padding:16px 18px;margin-top:16px}
.hero-name{font-size:1.6rem}
.hero-class-label{font-size:.7rem;letter-spacing:2px}
.hub-stat-badges{gap:6px;margin-top:12px}
.hub-stat-badge{padding:8px 10px;min-width:50px;border-radius:10px}
.hub-stat-val{font-size:.95rem}
.hub-stat-lbl{font-size:.55rem}
.hub-activities{grid-template-columns:1fr;gap:10px}
.hub-activity-banner{height:56px;padding:0 14px}
.hub-activity-banner-icon{font-size:1.8rem}
.hub-activity-body{padding:12px}
.hub-activity-title{font-size:.9rem}
.hub-activity-desc{font-size:.75rem;margin-bottom:8px}
.hub-howto-grid{grid-template-columns:repeat(2,1fr);gap:8px}
.hub-howto-card{padding:10px 8px}
.hub-howto-icon{font-size:1.4rem;margin-bottom:4px}
.hub-howto-title{font-size:.75rem}
.hub-howto-desc{font-size:.65rem}
}
@media (max-width:400px){.hub-nav-panel{padding:10px 8px}
.hub-card-title{font-size:.8rem}
.hub-card-icon{font-size:1.5rem}
.hero-name{font-size:1.3rem}
.hub-avatar-hologram{width:200px;height:200px}
}
@media (max-width:768px){.shop-header{padding:16px 14px 12px!important}
.shop-spatial-content{padding:16px 14px!important}
.shop-mega-title{font-size:1.6rem!important}
.shop-glass-card{min-height:200px}
.shop-grid{grid-template-columns:1fr!important;gap:10px!important}
.shop-scrollable{height:200px}
.shop-premium-grid{grid-template-columns:1fr!important}
.checkout-box{padding:20px 16px!important;max-width:94vw!important}
.zone-hero-header{padding:14px 12px!important;gap:12px!important;flex-wrap:wrap}
.zone-hero-icon{font-size:2.5rem!important}
.zone-hero-btns{width:100%}
.zone-hero-btns button{padding:10px 16px!important;font-size:.85rem!important}
.zone-locations-list{padding:14px 10px 60px!important}
.zone-loc-card{width:100%!important;max-width:100%!important;min-width:0!important}
.auth-modal-card{width:94vw!important;max-width:94vw!important}
.auth-modal-header{padding:24px 16px 16px!important}
.auth-modal-body{padding:16px!important}
.auth-modal-title{font-size:1.5rem!important}
.onboarding-content{max-width:94vw;padding:20px 14px;max-height:88vh;overflow-y:auto}
.onboarding-steps{gap:6px}
.onboarding-step{width:28px;height:28px;font-size:.75rem}
.onboarding-wizard-card{padding:12px!important}
.gender-picker-row{flex-direction:column;align-items:center;gap:12px}
.gender-card{width:100%!important;max-width:280px}
.gender-card img{height:160px!important;max-height:160px!important}
.gender-icon{font-size:2.2rem}
.lang-grid{grid-template-columns:repeat(2,1fr)!important}
.diagnostic-container,.practice-container{padding:12px!important}
.diagnostic-question-text,.practice-question-text{font-size:1.1rem!important}
.diagnostic-options,.practice-options{grid-template-columns:1fr!important;gap:8px!important}
.diagnostic-option-btn,.practice-option-btn{min-height:48px!important;font-size:1rem!important;padding:12px!important}
.practice-q-text{font-size:1.3rem!important}
.practice-option{font-size:1rem!important;padding:14px!important}
.celebration-card{padding:20px 16px!important}
.diag-container{max-width:100%!important;padding:12px!important}
.diag-overall-number{font-size:2rem!important}
.diag-domain-results{grid-template-columns:1fr!important}
.profile-header{flex-direction:column;text-align:center;gap:12px}
.progress-grid{grid-template-columns:1fr!important}
.quest-card{padding:12px!important}
.bp-track{gap:6px}
.bp-node{min-width:48px}
.dialogue-box-fixed{width:90%;bottom:3%;padding:14px}
.encounter-modal-card{max-width:92vw;padding:20px 16px}
.encounter-emoji{font-size:3rem}
.encounter-name{font-size:1.2rem}
.encounter-btns{flex-direction:column;gap:8px}
.enc-run-btn-style,.encounter-btn-lg{width:100%;padding:12px 20px;font-size:1rem}
.drawing-pad-wrapper{width:100%!important;max-width:100%!important}
.bm-card{width:180px!important}
.bm-carousel{height:180px!important}
.mission-objective-banner{padding:8px 14px!important;gap:8px!important}
.mission-title{font-size:.9rem!important}
.mission-desc{font-size:.8rem!important}
.adv-action-panel{top:70px;left:8px;gap:4px}
.chat-container{width:100%!important;max-width:100%!important}
.easter-eggs-grid{max-width:100%;gap:8px}
}
@media (max-width:400px){.onboarding-content{padding:14px 10px}
}