@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%}*{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}#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}.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)}.btn:hover,.btn:active{background:linear-gradient(135deg,var(--primary),var(--primary-glow));transform:scale(1.05);box-shadow:0 0 30px #9b59b6b3}.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}.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}.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}.title-screen .subtitle{font-size:clamp(12px,3vw,16px);color:var(--text-secondary);letter-spacing:6px;text-transform:uppercase}@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 fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.title-screen .btn{animation:fadeIn 1s ease .5s both,pulse 2s ease-in-out 1.5s infinite}.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}.hero-select h2{font-family:var(--font-title);font-size:clamp(20px,5vw,32px);color:var(--text-gold);text-transform:uppercase;letter-spacing:3px}.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 ease;display:flex;flex-direction:column;align-items:center;gap:var(--spacing-sm)}.hero-card:hover,.hero-card.selected{border-color:var(--primary-glow);box-shadow:var(--glow-purple);transform:translateY(-4px);background:var(--bg-card-hover)}.hero-card .hero-icon{width:80px;height:80px;border-radius:var(--border-radius-round);background:var(--bg-medium);border:2px solid var(--primary);display:flex;align-items:center;justify-content:center}.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}.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}.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);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:200px}.hud-bar{height:16px;background:#0009;border-radius:8px;border:1px solid rgba(255,255,255,.1);overflow:hidden;position:relative}.hud-bar .bar-fill{height:100%;border-radius:8px;transition:width .3s ease}.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 2px rgba(0,0,0,.8)}.hp-bar .bar-fill{background:linear-gradient(90deg,#dc2626,#ef4444)}.exp-bar .bar-fill{background:linear-gradient(90deg,#7c3aed,#a78bfa)}.hud-stage-info{text-align:right;font-family:var(--font-title)}.hud-stage-info .chapter{font-size:14px;color:var(--text-gold)}.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:4px;background:#00000080}.hud-pause-btn{position:absolute;top:var(--spacing-sm);right:var(--spacing-md);margin-top:80px;width:36px;height:36px;background:#00000080;border:1px solid rgba(255,255,255,.2);border-radius:var(--border-radius-round);display:flex;align-items:center;justify-content:center;cursor:pointer;pointer-events:auto;font-size:16px;color:var(--text-secondary);transition:all .2s}.hud-pause-btn:hover{background:#9b59b64d;border-color:var(--primary)}.skill-select-modal{position:absolute;inset:0;background:#000000d9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--spacing-lg);z-index:50;animation:fadeIn .3s ease}.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}.skill-cards{display:flex;gap:var(--spacing-md);flex-wrap:wrap;justify-content:center}.skill-card{width:140px;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 ease;display:flex;flex-direction:column;align-items:center;gap:var(--spacing-sm);text-align:center}.skill-card:hover{border-color:var(--primary-glow);box-shadow:0 0 30px #9b59b699;transform:translateY(-8px) scale(1.03)}.skill-card .skill-icon{width:56px;height:56px;border-radius:var(--border-radius);display:flex;align-items:center;justify-content:center;font-size:28px;background:var(--bg-medium);border:1px solid var(--primary)}.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:var(--bg-darkest);display:flex;flex-direction:column;align-items:center;padding:var(--spacing-lg);gap:var(--spacing-md);z-index:100;overflow-y:auto}.equipment-screen h2{font-family:var(--font-title);font-size:24px;color:var(--text-gold);text-transform:uppercase}.equipment-slots{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--spacing-md);width:100%;max-width:400px}.equip-slot{background:var(--bg-card);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 .2s ease}.equip-slot:hover{border-color:var(--primary);box-shadow:var(--glow-purple)}.equip-slot .slot-icon{width:48px;height:48px;border-radius:var(--border-radius);background:var(--bg-medium);border:1px solid var(--primary-dark);display:flex;align-items:center;justify-content:center;font-size:24px}.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)}.equip-slot[data-rarity=epic]{border-color:var(--rarity-epic)}.equip-slot[data-rarity=legendary]{border-color:var(--rarity-legendary);box-shadow:0 0 15px #f59e0b4d}.result-screen{position:absolute;inset:0;background:#000000e6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--spacing-lg);z-index:100;animation:fadeIn .5s ease}.result-screen h2{font-family:var(--font-title);font-size:clamp(24px,6vw,40px);text-transform:uppercase;letter-spacing:4px}.result-screen h2.victory{color:var(--text-gold);text-shadow:0 0 30px rgba(245,158,11,.6)}.result-screen h2.defeat{color:var(--accent-red);text-shadow:0 0 30px rgba(239,68,68,.6)}.result-stats{display:flex;flex-direction:column;gap:var(--spacing-sm);background:var(--bg-card);padding:var(--spacing-lg);border-radius:var(--border-radius-lg);border:1px solid rgba(155,89,182,.3);min-width:250px}.result-stats .stat-row{display:flex;justify-content:space-between;font-size:14px}.result-stats .stat-row .label{color:var(--text-secondary)}.result-stats .stat-row .value{color:var(--text-primary);font-weight:600}.result-buttons{display:flex;gap:var(--spacing-md);flex-wrap:wrap;justify-content:center}.ranking-screen{position:absolute;inset:0;background:var(--bg-darkest);display:flex;flex-direction:column;align-items:center;padding:var(--spacing-lg);gap:var(--spacing-md);z-index:100;overflow-y:auto}.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}.ranking-tab.active{background:var(--primary-dark);border-color:var(--primary);color:var(--text-primary)}.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}.ranking-entry:nth-child(1){border-color:#fbbf24}.ranking-entry:nth-child(2){border-color:#94a3b8}.ranking-entry:nth-child(3){border-color:#cd7f32}.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)}@keyframes spin{to{transform:rotate(360deg)}}.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}