@import"https://fonts.googleapis.com/css2?family=MedievalSharp&family=Cinzel:wght@400;700;900&family=Inter:wght@300;400;600;700&display=swap";:root{--bg-darkest: #0a0a0f;--bg-dark: #12121c;--bg-medium: #1a1a2e;--bg-card: #16213e;--bg-card-hover: #1e2d50;--primary: #9b59b6;--primary-glow: #c084fc;--primary-dark: #6b21a8;--secondary: #f59e0b;--secondary-glow: #fbbf24;--accent-red: #ef4444;--accent-green: #22c55e;--accent-blue: #3b82f6;--accent-ice: #67e8f9;--accent-fire: #f97316;--accent-poison: #a3e635;--text-primary: #f1f5f9;--text-secondary: #94a3b8;--text-muted: #64748b;--text-gold: #fbbf24;--rarity-common: #9ca3af;--rarity-rare: #3b82f6;--rarity-epic: #a855f7;--rarity-legendary: #f59e0b;--glow-purple: 0 0 20px rgba(155, 89, 182, .5);--glow-gold: 0 0 20px rgba(245, 158, 11, .5);--glow-red: 0 0 15px rgba(239, 68, 68, .4);--shadow-dark: 0 4px 20px rgba(0, 0, 0, .6);--font-title: "Cinzel", "MedievalSharp", serif;--font-body: "Inter", sans-serif;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--border-radius: 8px;--border-radius-lg: 16px;--border-radius-round: 50%;--transition-fast: .15s ease;--transition-normal: .3s ease;--transition-slow: .5s ease}*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{width:100%;height:100%;overflow:hidden;background:var(--bg-darkest);font-family:var(--font-body);color:var(--text-primary);touch-action:none;user-select:none;-webkit-user-select:none;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}#game-canvas{position:fixed;top:0;left:0;width:100%;height:100%;display:block}#ui-overlay{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:10}#ui-overlay>*{pointer-events:auto}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-20px)}}@keyframes titleGlow{0%,to{text-shadow:0 0 30px rgba(245,158,11,.6),0 2px 10px rgba(0,0,0,.8)}50%{text-shadow:0 0 50px rgba(245,158,11,.9),0 0 80px rgba(155,89,182,.4),0 2px 10px rgba(0,0,0,.8)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes slideInFromLeft{0%{opacity:0;transform:translate(-40px)}to{opacity:1;transform:translate(0)}}@keyframes slideInFromRight{0%{opacity:0;transform:translate(40px)}to{opacity:1;transform:translate(0)}}@keyframes slideInFromBottom{0%{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}@keyframes shimmer{0%{background-position:-200% center}to{background-position:200% center}}@keyframes bounceIn{0%{transform:scale(.5);opacity:0}50%{transform:scale(1.1)}70%{transform:scale(.95)}to{transform:scale(1);opacity:1}}@keyframes countUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes glowPulse{0%,to{box-shadow:0 0 10px currentColor}50%{box-shadow:0 0 25px currentColor,0 0 40px currentColor}}@keyframes hpBarDanger{0%,to{opacity:1}50%{opacity:.6}}@keyframes rarityShine{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes floatUp{0%{transform:translateY(0)}50%{transform:translateY(-6px)}to{transform:translateY(0)}}@keyframes screenTransitionIn{0%{opacity:0;transform:scale(.96);filter:blur(4px)}to{opacity:1;transform:scale(1);filter:blur(0px)}}@keyframes cardReveal{0%{opacity:0;transform:translateY(30px) rotateX(10deg)}to{opacity:1;transform:translateY(0) rotateX(0)}}.btn{font-family:var(--font-title);font-size:18px;font-weight:700;padding:12px 32px;border:2px solid var(--primary);border-radius:var(--border-radius);background:linear-gradient(135deg,var(--primary-dark),var(--primary));color:var(--text-primary);cursor:pointer;transition:all .2s ease;text-transform:uppercase;letter-spacing:2px;box-shadow:var(--glow-purple);position:relative;overflow:hidden}.btn:after{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(45deg,transparent 30%,rgba(255,255,255,.08) 50%,transparent 70%);transform:rotate(45deg);transition:all .4s ease;opacity:0}.btn:hover:after,.btn:active:after{opacity:1;animation:shimmer 1.5s ease infinite}.btn:hover,.btn:active{background:linear-gradient(135deg,var(--primary),var(--primary-glow));transform:scale(1.05) translateY(-1px);box-shadow:0 0 30px #9b59b6b3,0 8px 20px #0006}.btn:active{transform:scale(.98);box-shadow:0 0 20px #9b59b680,0 2px 8px #0006}.btn-gold{border-color:var(--secondary);background:linear-gradient(135deg,#92400e,var(--secondary));box-shadow:var(--glow-gold)}.btn-gold:hover,.btn-gold:active{background:linear-gradient(135deg,var(--secondary),var(--secondary-glow));box-shadow:0 0 30px #f59e0bb3,0 8px 20px #0006}.btn-gold:active{transform:scale(.98);box-shadow:0 0 20px #f59e0b80}.screen-enter{animation:screenTransitionIn .5s cubic-bezier(.2,.8,.3,1) forwards}.screen-exit{animation:fadeOut .3s ease forwards}.title-screen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,var(--bg-medium) 0%,var(--bg-darkest) 70%);gap:var(--spacing-lg);z-index:100;animation:screenTransitionIn .6s ease}.title-screen h1{font-family:var(--font-title);font-size:clamp(28px,6vw,48px);font-weight:900;color:var(--text-gold);text-shadow:0 0 30px rgba(245,158,11,.6),0 2px 10px rgba(0,0,0,.8);text-align:center;text-transform:uppercase;letter-spacing:4px;animation:titleGlow 3s ease-in-out infinite,bounceIn .8s ease .2s both}.title-screen .subtitle{font-size:clamp(12px,3vw,16px);color:var(--text-secondary);letter-spacing:6px;text-transform:uppercase;animation:fadeIn .8s ease .1s both}.title-screen .btn{animation:fadeIn 1s ease .5s both,pulse 2s ease-in-out 1.5s infinite}.title-screen .btn:nth-child(2){animation-delay:.6s,1.6s}.title-screen .btn:nth-child(3){animation-delay:.7s,1.7s}.hero-select{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,var(--bg-medium) 0%,var(--bg-darkest) 70%);gap:var(--spacing-lg);padding:var(--spacing-lg);z-index:100;animation:screenTransitionIn .5s ease}.hero-select h2{font-family:var(--font-title);font-size:clamp(20px,5vw,32px);color:var(--text-gold);text-transform:uppercase;letter-spacing:3px;animation:fadeIn .5s ease both}.hero-cards{display:flex;gap:var(--spacing-md);flex-wrap:wrap;justify-content:center;max-width:600px}.hero-card{width:160px;padding:var(--spacing-md);background:var(--bg-card);border:2px solid var(--primary-dark);border-radius:var(--border-radius-lg);cursor:pointer;transition:all .3s cubic-bezier(.2,.8,.3,1);display:flex;flex-direction:column;align-items:center;gap:var(--spacing-sm);animation:cardReveal .5s ease both;position:relative;overflow:hidden}.hero-card:nth-child(1){animation-delay:.1s}.hero-card:nth-child(2){animation-delay:.2s}.hero-card:nth-child(3){animation-delay:.3s}.hero-card:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(155,89,182,.08),transparent);transition:left .5s ease}.hero-card:hover:before{left:100%}.hero-card:hover,.hero-card.selected{border-color:var(--primary-glow);box-shadow:var(--glow-purple),0 12px 30px #00000080;transform:translateY(-8px) scale(1.02);background:var(--bg-card-hover)}.hero-card.selected{box-shadow:0 0 30px #9b59b699,0 0 60px #9b59b633}.hero-card .hero-icon{width:90px;height:90px;border-radius:var(--border-radius-round);background:radial-gradient(circle,var(--bg-medium) 0%,var(--bg-dark) 100%);border:2px solid var(--primary);display:flex;align-items:center;justify-content:center;transition:all .3s ease;box-shadow:0 0 15px #9b59b633}.hero-card.selected .hero-icon{border-color:var(--primary-glow);box-shadow:0 0 25px #c084fc66;animation:glowPulse 2s ease-in-out infinite;color:var(--primary-glow)}.hero-card .hero-icon canvas{border-radius:var(--border-radius-round)}.hero-card h3{font-family:var(--font-title);font-size:14px;color:var(--text-primary);text-align:center;transition:color .2s ease}.hero-card.selected h3{color:var(--primary-glow)}.hero-card .hero-desc{font-size:11px;color:var(--text-secondary);text-align:center;line-height:1.4}.hero-card .hero-stats{font-size:10px;color:var(--text-muted);width:100%}.hero-card .hero-stats div{display:flex;justify-content:space-between;margin:2px 0;padding:2px 4px;border-radius:4px;transition:background .2s ease}.hero-card:hover .hero-stats div{background:#9b59b60d}.game-hud{position:absolute;inset:0;pointer-events:none;z-index:20}.hud-top{position:absolute;top:0;left:0;right:0;padding:var(--spacing-sm) var(--spacing-md);padding-top:calc(var(--spacing-sm) + env(safe-area-inset-top,0px));display:flex;align-items:flex-start;justify-content:space-between;pointer-events:auto}.hud-bars{display:flex;flex-direction:column;gap:4px;flex:1;max-width:220px}.hud-bar{height:18px;background:#000000b3;border-radius:9px;border:1px solid rgba(255,255,255,.1);overflow:hidden;position:relative;backdrop-filter:blur(4px)}.hud-bar .bar-fill{height:100%;border-radius:9px;transition:width .5s cubic-bezier(.4,0,.2,1);position:relative}.hud-bar .bar-fill:after{content:"";position:absolute;top:0;left:0;right:0;height:50%;background:linear-gradient(180deg,rgba(255,255,255,.2) 0%,transparent 100%);border-radius:9px 9px 0 0}.hud-bar .bar-text{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;text-shadow:0 1px 3px rgba(0,0,0,.9);letter-spacing:.5px}.hp-bar .bar-fill{background:linear-gradient(90deg,#dc2626,#ef4444,#f87171);box-shadow:inset 0 -2px 4px #0000004d}.hp-bar.danger .bar-fill{animation:hpBarDanger .5s ease-in-out infinite}.exp-bar .bar-fill{background:linear-gradient(90deg,#7c3aed,#a78bfa,#c4b5fd);box-shadow:inset 0 -2px 4px #0000004d}.boss-hp-bar{position:absolute;bottom:80px;left:50%;transform:translate(-50%);width:min(80%,400px);pointer-events:none;animation:slideInFromBottom .5s ease}.boss-hp-bar .boss-name{font-family:var(--font-title);font-size:14px;color:var(--accent-red);text-align:center;margin-bottom:4px;text-shadow:0 0 10px rgba(239,68,68,.5);letter-spacing:2px}.boss-hp-bar .hud-bar{height:12px;border-color:#ef444466}.boss-hp-bar .bar-fill{background:linear-gradient(90deg,#991b1b,#ef4444,#fca5a5)}.hud-stage-info{text-align:right;font-family:var(--font-title);animation:slideInFromRight .3s ease}.hud-stage-info .chapter{font-size:14px;color:var(--text-gold);text-shadow:0 0 8px rgba(245,158,11,.3)}.hud-stage-info .stage{font-size:11px;color:var(--text-secondary)}.hud-stage-info .wave{font-size:10px;color:var(--text-muted)}.hud-minimap{position:absolute;top:var(--spacing-sm);right:var(--spacing-md);pointer-events:auto}.hud-minimap canvas{border:1px solid rgba(155,89,182,.4);border-radius:6px;background:#0009;backdrop-filter:blur(4px);box-shadow:0 0 12px #9b59b626}.hud-pause-btn{position:absolute;top:var(--spacing-sm);right:var(--spacing-md);margin-top:88px;width:40px;height:40px;background:#0009;border:1px solid rgba(255,255,255,.15);border-radius:var(--border-radius-round);display:flex;align-items:center;justify-content:center;cursor:pointer;pointer-events:auto;font-size:18px;color:var(--text-secondary);transition:all .2s ease;backdrop-filter:blur(4px)}.hud-pause-btn:hover{background:#9b59b64d;border-color:var(--primary);transform:scale(1.1);box-shadow:var(--glow-purple)}.hud-pause-btn:active{transform:scale(.95)}.skill-select-modal{position:absolute;inset:0;background:#000000e0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--spacing-lg);z-index:50;animation:screenTransitionIn .4s ease;backdrop-filter:blur(8px)}.skill-select-modal h2{font-family:var(--font-title);font-size:28px;color:var(--text-gold);text-transform:uppercase;letter-spacing:4px;text-shadow:0 0 20px rgba(245,158,11,.5);animation:titleGlow 2s ease-in-out infinite,bounceIn .6s ease both}.skill-cards{display:flex;gap:var(--spacing-md);flex-wrap:wrap;justify-content:center}.skill-card{width:150px;padding:var(--spacing-md);background:linear-gradient(180deg,var(--bg-card) 0%,rgba(22,33,62,.8) 100%);border:2px solid var(--primary-dark);border-radius:var(--border-radius-lg);cursor:pointer;transition:all .3s cubic-bezier(.2,.8,.3,1);display:flex;flex-direction:column;align-items:center;gap:var(--spacing-sm);text-align:center;animation:cardReveal .4s ease both;position:relative;overflow:hidden}.skill-card:nth-child(1){animation-delay:.1s}.skill-card:nth-child(2){animation-delay:.2s}.skill-card:nth-child(3){animation-delay:.3s}.skill-card:before{content:"";position:absolute;inset:-2px;background:conic-gradient(from 0deg,transparent 0%,var(--primary-glow) 25%,transparent 50%,var(--primary-glow) 75%,transparent 100%);border-radius:var(--border-radius-lg);z-index:-1;opacity:0;transition:opacity .3s ease}.skill-card:hover:before{opacity:.5;animation:spin 3s linear infinite}.skill-card:hover{border-color:var(--primary-glow);box-shadow:0 0 30px #9b59b699,0 15px 30px #00000080;transform:translateY(-8px) scale(1.05)}.skill-card:active{transform:translateY(-2px) scale(.98)}.skill-card[data-rarity=epic]{border-color:var(--rarity-epic)}.skill-card[data-rarity=legendary]{border-color:var(--rarity-legendary);background:linear-gradient(180deg,rgba(146,64,14,.3) 0%,var(--bg-card) 40%,rgba(245,158,11,.1) 100%)}.skill-card[data-rarity=legendary]:after{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(245,158,11,.15),transparent);animation:shimmer 2s ease-in-out infinite}.skill-card .skill-icon{width:60px;height:60px;border-radius:var(--border-radius);display:flex;align-items:center;justify-content:center;font-size:30px;background:radial-gradient(circle,var(--bg-medium) 0%,var(--bg-dark) 100%);border:1px solid var(--primary);transition:all .3s ease;box-shadow:0 0 10px #9b59b626}.skill-card:hover .skill-icon{transform:scale(1.1);box-shadow:0 0 20px #9b59b666}.skill-card h3{font-family:var(--font-title);font-size:13px;color:var(--text-primary)}.skill-card .skill-desc{font-size:11px;color:var(--text-secondary);line-height:1.4}.equipment-screen{position:absolute;inset:0;background:radial-gradient(ellipse at top,var(--bg-medium) 0%,var(--bg-darkest) 60%);display:flex;flex-direction:column;align-items:center;padding:var(--spacing-lg);gap:var(--spacing-md);z-index:100;overflow-y:auto;animation:screenTransitionIn .5s ease}.equipment-screen h2{font-family:var(--font-title);font-size:24px;color:var(--text-gold);text-transform:uppercase;animation:fadeIn .4s ease both}.equipment-slots{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--spacing-md);width:100%;max-width:400px}.equip-slot{background:linear-gradient(145deg,var(--bg-card) 0%,rgba(22,33,62,.6) 100%);border:2px solid var(--primary-dark);border-radius:var(--border-radius-lg);padding:var(--spacing-md);display:flex;flex-direction:column;align-items:center;gap:var(--spacing-sm);cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden;animation:cardReveal .4s ease both}.equip-slot:nth-child(1){animation-delay:.1s}.equip-slot:nth-child(2){animation-delay:.15s}.equip-slot:nth-child(3){animation-delay:.2s}.equip-slot:nth-child(4){animation-delay:.25s}.equip-slot:hover{border-color:var(--primary);box-shadow:var(--glow-purple);transform:translateY(-4px)}.equip-slot .slot-icon{width:52px;height:52px;border-radius:var(--border-radius);background:radial-gradient(circle,var(--bg-medium) 0%,var(--bg-dark) 100%);border:1px solid var(--primary-dark);display:flex;align-items:center;justify-content:center;font-size:26px;transition:all .3s ease}.equip-slot:hover .slot-icon{transform:scale(1.1);box-shadow:0 0 15px #9b59b64d}.equip-slot .slot-label{font-size:11px;color:var(--text-secondary);text-transform:uppercase;letter-spacing:1px}.equip-slot .slot-name{font-family:var(--font-title);font-size:13px;color:var(--text-primary)}.equip-slot[data-rarity=common]{border-color:var(--rarity-common)}.equip-slot[data-rarity=rare]{border-color:var(--rarity-rare);box-shadow:0 0 10px #3b82f633}.equip-slot[data-rarity=epic]{border-color:var(--rarity-epic);box-shadow:0 0 15px #a855f740}.equip-slot[data-rarity=epic]:after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,transparent 40%,rgba(168,85,247,.08) 50%,transparent 60%);background-size:200% 200%;animation:shimmer 3s ease infinite;pointer-events:none}.equip-slot[data-rarity=legendary]{border-color:var(--rarity-legendary);box-shadow:0 0 20px #f59e0b4d}.equip-slot[data-rarity=legendary]:after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,transparent 30%,rgba(245,158,11,.1) 50%,transparent 70%);background-size:200% 200%;animation:shimmer 2s ease infinite;pointer-events:none}.result-screen{position:absolute;inset:0;background:#000000eb;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--spacing-lg);z-index:100;animation:screenTransitionIn .5s ease;backdrop-filter:blur(6px)}.result-screen h2{font-family:var(--font-title);font-size:clamp(24px,6vw,40px);text-transform:uppercase;letter-spacing:4px;animation:bounceIn .6s ease both}.result-screen h2.victory{color:var(--text-gold);text-shadow:0 0 30px rgba(245,158,11,.6),0 0 60px rgba(245,158,11,.3)}.result-screen h2.defeat{color:var(--accent-red);text-shadow:0 0 30px rgba(239,68,68,.6),0 0 60px rgba(239,68,68,.3)}.result-rank{font-family:var(--font-title);font-size:64px;font-weight:900;animation:bounceIn .8s ease .3s both;text-shadow:0 0 40px currentColor}.result-rank.rank-s{color:#fbbf24}.result-rank.rank-a{color:#c084fc}.result-rank.rank-b{color:#3b82f6}.result-rank.rank-c{color:#9ca3af}.result-stats{display:flex;flex-direction:column;gap:var(--spacing-sm);background:linear-gradient(145deg,var(--bg-card) 0%,rgba(22,33,62,.8) 100%);padding:var(--spacing-lg);border-radius:var(--border-radius-lg);border:1px solid rgba(155,89,182,.3);min-width:260px;animation:slideInFromBottom .5s ease .2s both;box-shadow:var(--shadow-dark)}.result-stats .stat-row{display:flex;justify-content:space-between;font-size:14px;padding:4px 0;border-bottom:1px solid rgba(255,255,255,.05);animation:countUp .3s ease both}.result-stats .stat-row:nth-child(1){animation-delay:.4s}.result-stats .stat-row:nth-child(2){animation-delay:.55s}.result-stats .stat-row:nth-child(3){animation-delay:.7s}.result-stats .stat-row:nth-child(4){animation-delay:.85s}.result-stats .stat-row:nth-child(5){animation-delay:1s}.result-stats .stat-row:last-child{border-bottom:none}.result-stats .stat-row .label{color:var(--text-secondary)}.result-stats .stat-row .value{color:var(--text-primary);font-weight:600;font-family:var(--font-title)}.result-buttons{display:flex;gap:var(--spacing-md);flex-wrap:wrap;justify-content:center;animation:fadeIn .5s ease 1.2s both}.ranking-screen{position:absolute;inset:0;background:radial-gradient(ellipse at top,var(--bg-medium) 0%,var(--bg-darkest) 60%);display:flex;flex-direction:column;align-items:center;padding:var(--spacing-lg);gap:var(--spacing-md);z-index:100;overflow-y:auto;animation:screenTransitionIn .5s ease}.ranking-screen h2{font-family:var(--font-title);font-size:24px;color:var(--text-gold);text-transform:uppercase}.ranking-tabs{display:flex;gap:var(--spacing-sm)}.ranking-tab{padding:var(--spacing-sm) var(--spacing-md);background:var(--bg-card);border:1px solid var(--primary-dark);border-radius:var(--border-radius);cursor:pointer;font-size:13px;color:var(--text-secondary);transition:all .2s ease}.ranking-tab:hover{border-color:var(--primary);color:var(--text-primary)}.ranking-tab.active{background:var(--primary-dark);border-color:var(--primary);color:var(--text-primary);box-shadow:0 0 10px #9b59b64d}.ranking-list{width:100%;max-width:400px;display:flex;flex-direction:column;gap:var(--spacing-xs)}.ranking-entry{display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-sm) var(--spacing-md);background:var(--bg-card);border-radius:var(--border-radius);border:1px solid transparent;transition:all .2s ease;animation:slideInFromLeft .3s ease both}.ranking-entry:nth-child(n){animation-delay:calc(.05s * var(--rank-index, 0))}.ranking-entry:hover{background:var(--bg-card-hover);transform:translate(4px)}.ranking-entry:nth-child(1){border-color:#fbbf24;background:linear-gradient(90deg,rgba(251,191,36,.1) 0%,var(--bg-card) 30%)}.ranking-entry:nth-child(2){border-color:#94a3b8;background:linear-gradient(90deg,rgba(148,163,184,.08) 0%,var(--bg-card) 30%)}.ranking-entry:nth-child(3){border-color:#cd7f32;background:linear-gradient(90deg,rgba(205,127,50,.08) 0%,var(--bg-card) 30%)}.ranking-entry .rank{font-family:var(--font-title);font-size:18px;font-weight:700;width:30px;text-align:center;color:var(--text-gold)}.ranking-entry .rank-info{flex:1}.ranking-entry .rank-info .name{font-size:14px;font-weight:600}.ranking-entry .rank-info .detail{font-size:11px;color:var(--text-secondary)}.ranking-entry .score{font-family:var(--font-title);font-size:16px;color:var(--text-gold)}.loading-screen{position:absolute;inset:0;background:var(--bg-darkest);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--spacing-md);z-index:200}.loading-spinner{width:40px;height:40px;border:3px solid var(--bg-medium);border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite}.loading-text{font-family:var(--font-title);font-size:14px;color:var(--text-secondary);letter-spacing:3px}.virtual-joystick{position:absolute;bottom:60px;left:40px;pointer-events:auto;z-index:30}.minimap-overlay{position:absolute;top:50px;right:12px;pointer-events:auto;z-index:25;display:flex;flex-direction:column;align-items:flex-end;gap:4px}.minimap-label{font-family:var(--font-title);font-size:10px;color:var(--text-muted);letter-spacing:2px;text-transform:uppercase}.minimap-canvas{border:1px solid rgba(155,89,182,.4);border-radius:6px;box-shadow:0 0 12px #9b59b633,inset 0 0 20px #00000080}.damage-log-overlay{position:absolute;bottom:80px;left:12px;width:220px;max-height:200px;pointer-events:none;z-index:25}.damage-log-label{font-family:var(--font-title);font-size:10px;color:var(--text-muted);letter-spacing:1px;margin-bottom:4px}.damage-log-entries{display:flex;flex-direction:column;gap:2px;overflow-y:auto;max-height:160px;scrollbar-width:none}.damage-log-entries::-webkit-scrollbar{display:none}.damage-log-entry{font-size:11px;font-weight:500;padding:2px 6px;background:#00000080;border-radius:3px;border-left:2px solid currentColor;text-shadow:0 1px 2px rgba(0,0,0,.8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;animation:damageLogSlideIn .3s ease both}@keyframes damageLogSlideIn{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}.settings-screen{position:absolute;inset:0;background:#000000eb;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--spacing-lg);z-index:100;animation:screenTransitionIn .4s ease;backdrop-filter:blur(6px)}.settings-screen h2{font-family:var(--font-title);font-size:28px;color:var(--text-gold);text-transform:uppercase;letter-spacing:4px;text-shadow:0 0 20px rgba(245,158,11,.5)}.settings-box{display:flex;flex-direction:column;gap:var(--spacing-md);width:100%;max-width:380px;padding:var(--spacing-lg);background:linear-gradient(145deg,var(--bg-card) 0%,rgba(22,33,62,.8) 100%);border:1px solid rgba(155,89,182,.3);border-radius:var(--border-radius-lg);box-shadow:var(--shadow-dark)}.settings-row{display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-md)}.settings-row-vertical{flex-direction:column;align-items:stretch;gap:var(--spacing-sm)}.settings-label{font-size:14px;font-weight:600;color:var(--text-primary);white-space:nowrap}.settings-slider-wrap{display:flex;align-items:center;gap:var(--spacing-sm);flex:1;max-width:180px}.settings-slider{-webkit-appearance:none;appearance:none;width:100%;height:6px;background:var(--bg-medium);border-radius:3px;outline:none}.settings-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;background:var(--primary-glow);border-radius:50%;cursor:pointer;box-shadow:0 0 10px #c084fc80;transition:transform .2s ease,box-shadow .2s ease}.settings-slider::-webkit-slider-thumb:hover{transform:scale(1.25);box-shadow:0 0 15px #c084fcb3}.settings-slider::-moz-range-thumb{width:20px;height:20px;background:var(--primary-glow);border-radius:50%;cursor:pointer;border:none;box-shadow:0 0 10px #c084fc80}.settings-value{font-size:12px;color:var(--text-secondary);min-width:36px;text-align:right}.settings-toggle{width:48px;height:24px;background:var(--bg-medium);border-radius:12px;border:1px solid rgba(255,255,255,.1);cursor:pointer;position:relative;transition:all .3s ease}.settings-toggle.active{background:var(--primary);border-color:var(--primary-glow);box-shadow:0 0 10px #9b59b666}.toggle-knob{position:absolute;top:2px;left:2px;width:18px;height:18px;background:var(--text-primary);border-radius:50%;transition:transform .3s cubic-bezier(.4,0,.2,1)}.settings-toggle.active .toggle-knob{transform:translate(24px)}.difficulty-buttons{display:flex;gap:var(--spacing-sm)}.difficulty-btn{flex:1;padding:var(--spacing-sm) var(--spacing-md);text-align:center;font-family:var(--font-title);font-size:13px;font-weight:700;color:var(--text-secondary);background:var(--bg-medium);border:1px solid rgba(255,255,255,.1);border-radius:var(--border-radius);cursor:pointer;transition:all .3s ease;letter-spacing:1px}.difficulty-btn:hover{border-color:var(--diff-color, var(--primary));color:var(--text-primary);transform:translateY(-2px)}.difficulty-btn.selected{background:linear-gradient(135deg,#0000004d,#0000001a);border-color:var(--diff-color, var(--primary));color:var(--diff-color, var(--primary));box-shadow:0 0 12px color-mix(in srgb,var(--diff-color, var(--primary)) 40%,transparent)}.tutorial-overlay{position:absolute;inset:0;background:#000000e0;display:flex;align-items:center;justify-content:center;z-index:150;animation:screenTransitionIn .5s ease;backdrop-filter:blur(6px)}.tutorial-content{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-lg);padding:var(--spacing-xl);max-width:400px;width:90%}.tutorial-title{font-family:var(--font-title);font-size:32px;color:var(--text-gold);text-transform:uppercase;letter-spacing:4px;text-shadow:0 0 30px rgba(245,158,11,.6);animation:titleGlow 3s ease-in-out infinite}.tutorial-steps-container{width:100%;position:relative;min-height:150px}.tutorial-step{display:none;flex-direction:column;align-items:center;gap:var(--spacing-md);padding:var(--spacing-lg);background:linear-gradient(145deg,var(--bg-card) 0%,rgba(22,33,62,.8) 100%);border:1px solid rgba(155,89,182,.3);border-radius:var(--border-radius-lg);animation:cardReveal .4s ease}.tutorial-step.active{display:flex}.tutorial-step-icon{font-size:48px;animation:floatUp 3s ease-in-out infinite}.tutorial-step-title{font-family:var(--font-title);font-size:20px;font-weight:700;color:var(--primary-glow);text-transform:uppercase;letter-spacing:2px}.tutorial-step-desc{font-size:14px;color:var(--text-secondary);text-align:center;line-height:1.6}.tutorial-dots{display:flex;gap:8px}.tutorial-dot{width:10px;height:10px;border-radius:50%;background:var(--bg-medium);border:1px solid rgba(255,255,255,.2);transition:all .3s ease}.tutorial-dot.active{background:var(--primary-glow);border-color:var(--primary-glow);box-shadow:0 0 10px #c084fc99;transform:scale(1.2)}.tutorial-buttons{display:flex;gap:var(--spacing-md)}.tutorial-skip{font-size:13px!important;padding:8px 20px!important;opacity:.7;transition:opacity .2s ease}.tutorial-skip:hover{opacity:1}.tutorial-next{font-size:14px!important;padding:10px 28px!important}@media(max-width:480px){:root{--spacing-sm: 6px;--spacing-md: 12px;--spacing-lg: 18px;--spacing-xl: 24px}.hero-cards{flex-direction:column;align-items:center}.hero-card{width:90%;max-width:280px;flex-direction:row;padding:var(--spacing-sm) var(--spacing-md)}.hero-card .hero-icon{width:64px;height:64px;flex-shrink:0}.skill-cards{flex-direction:column;align-items:center}.skill-card{width:85%;max-width:300px;flex-direction:row;gap:var(--spacing-md);text-align:left}.skill-card .skill-icon{flex-shrink:0}.equipment-slots{grid-template-columns:1fr}.equip-slot{flex-direction:row;gap:var(--spacing-md)}.hud-bars{max-width:45%}.btn{font-size:14px;padding:10px 24px}.title-screen h1{font-size:clamp(22px,8vw,36px)}.result-stats{min-width:auto;width:90%;max-width:300px}.settings-box{max-width:90%}.virtual-joystick{bottom:40px;left:20px}.damage-log-overlay{width:160px;bottom:60px}.damage-log-entry{font-size:9px}}@media(min-width:481px)and (max-width:768px){.hero-card{width:140px}.skill-card{width:130px}}@media(max-height:480px)and (orientation:landscape){.title-screen{gap:var(--spacing-sm)}.title-screen h1{font-size:24px}.hero-select{padding:var(--spacing-sm);gap:var(--spacing-sm)}.hero-card .hero-icon{width:56px;height:56px}.skill-select-modal{gap:var(--spacing-sm)}.skill-card .skill-icon{width:40px;height:40px;font-size:20px}.result-rank{font-size:48px}.settings-box{padding:var(--spacing-md);max-height:70vh;overflow-y:auto}.tutorial-step-icon{font-size:32px}}@media(hover:none)and (pointer:coarse){.btn{min-height:44px;min-width:44px}.hud-pause-btn{width:44px;height:44px}.ranking-tab{min-height:36px;padding:8px 16px}.hero-card:hover{transform:none;box-shadow:var(--glow-purple)}.hero-card.selected{transform:translateY(-4px)}}@media(prefers-color-scheme:dark){:root{color-scheme:dark}}.hero-preview-area{display:flex;align-items:center;gap:var(--spacing-lg);padding:var(--spacing-md);background:linear-gradient(145deg,var(--bg-card) 0%,rgba(22,33,62,.6) 100%);border:1px solid rgba(155,89,182,.2);border-radius:var(--border-radius-lg);animation:fadeIn .5s ease both;box-shadow:var(--shadow-dark)}.hero-preview-canvas{border-radius:var(--border-radius);background:radial-gradient(circle,#1a1a2ecc,#0a0a0fe6);border:1px solid rgba(155,89,182,.3);box-shadow:0 0 20px #9b59b61a}.hero-stats-panel{display:flex;flex-direction:column;gap:var(--spacing-sm);min-width:180px}.hero-stats-title{font-family:var(--font-title);font-size:20px;color:var(--primary-glow);letter-spacing:1px;transition:color .3s ease}.hero-stats-desc{font-size:12px;color:var(--text-secondary);line-height:1.5;margin-bottom:var(--spacing-xs)}.stat-bar-row{display:flex;align-items:center;gap:var(--spacing-sm)}.stat-bar-label{font-family:var(--font-title);font-size:10px;color:var(--text-muted);width:36px;letter-spacing:1px}.stat-bar-bg{flex:1;height:8px;background:#00000080;border-radius:4px;overflow:hidden;border:1px solid rgba(255,255,255,.05)}.stat-bar-fill{height:100%;border-radius:4px;transition:width .5s cubic-bezier(.4,0,.2,1)}.stat-bar-value{font-size:11px;color:var(--text-primary);font-weight:600;min-width:28px;text-align:right}.hero-special{font-size:12px;color:var(--text-gold);font-weight:600;margin-top:var(--spacing-xs);padding:var(--spacing-xs) var(--spacing-sm);background:#f59e0b14;border-radius:var(--border-radius);border:1px solid rgba(245,158,11,.15);transition:all .3s ease}.equip-main-area{display:flex;gap:var(--spacing-lg);align-items:flex-start;width:100%;max-width:600px}.equip-detail-panel{flex:1;min-width:180px;padding:var(--spacing-lg);background:linear-gradient(145deg,var(--bg-card) 0%,rgba(22,33,62,.6) 100%);border:1px solid rgba(155,89,182,.2);border-radius:var(--border-radius-lg);display:flex;flex-direction:column;gap:var(--spacing-sm)}.equip-detail-title{font-family:var(--font-title);font-size:18px;color:var(--text-primary);letter-spacing:1px}.equip-detail-rarity{font-family:var(--font-title);font-size:12px;letter-spacing:2px;text-transform:uppercase}.equip-detail-slot{font-size:12px;color:var(--text-secondary)}.equip-detail-desc{font-size:13px;color:var(--text-muted);line-height:1.5}.equip-detail-stats{display:flex;flex-direction:column;gap:4px;margin-top:var(--spacing-xs)}.equip-stat{display:flex;justify-content:space-between;font-size:13px;padding:3px 0;border-bottom:1px solid rgba(255,255,255,.05)}.equip-stat span:first-child{color:var(--text-secondary)}.equip-special{font-size:12px;color:var(--text-gold);font-weight:600;padding:var(--spacing-xs) 0}.equip-slot.active{border-color:var(--primary-glow);box-shadow:0 0 20px #c084fc66;transform:translateY(-4px)}.equip-slot-glow{position:absolute;inset:-2px;border-radius:var(--border-radius-lg);opacity:0;transition:opacity .3s ease;pointer-events:none}.equip-slot.active .equip-slot-glow{opacity:1;background:conic-gradient(from 0deg,transparent 0%,var(--primary-glow) 25%,transparent 50%,var(--primary-glow) 75%,transparent 100%);animation:spin 4s linear infinite;z-index:-1}.slot-rarity-badge{font-size:9px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:2px 6px;border:1px solid currentColor;border-radius:4px}@keyframes equipChange{0%{transform:scale(1)}30%{transform:scale(1.08);box-shadow:0 0 25px #f59e0b99}to{transform:scale(1)}}@media(max-width:480px){.hero-preview-area{flex-direction:column;align-items:center}.hero-preview-canvas{width:120px;height:140px}.hero-stats-panel{min-width:auto;width:100%}.equip-main-area{flex-direction:column}.equip-detail-panel{min-width:auto;width:100%}}@media(max-height:480px)and (orientation:landscape){.hero-preview-area{padding:var(--spacing-sm)}.hero-preview-canvas{width:100px;height:120px}.hero-stats-panel{min-width:150px}}