@import"https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600;700&display=swap";:root{--bg-deep: #05060f;--bg-surface: #0a0c1a;--bg-card: rgba(14, 16, 30, .85);--bg-glass: rgba(255, 255, 255, .04);--bg-glass-hover: rgba(255, 255, 255, .08);--primary: #7c6aff;--primary-glow: rgba(124, 106, 255, .25);--accent-pink: #ff6bcd;--accent-cyan: #4de8ff;--accent-gold: #ffd84d;--accent-red: #ff4d6a;--accent-green: #4dff91;--text: #f0f0ff;--text-dim: #8a8aaa;--text-muted: #555577;--border: rgba(255, 255, 255, .06);--border-active: rgba(124, 106, 255, .3);--grad-main: linear-gradient(135deg, #7c6aff 0%, #ff6bcd 100%);--grad-gold: linear-gradient(135deg, #ffd84d 0%, #ff8c42 100%);--grad-battle: linear-gradient(135deg, #ff4d6a 0%, #ff6bcd 100%);--grad-surface: linear-gradient(180deg, rgba(124, 106, 255, .06) 0%, transparent 100%);--shadow-sm: 0 4px 12px rgba(0,0,0,.3);--shadow-md: 0 8px 30px rgba(0,0,0,.4);--shadow-lg: 0 16px 60px rgba(0,0,0,.5);--shadow-glow: 0 0 40px var(--primary-glow);--radius-sm: 12px;--radius-md: 20px;--radius-lg: 28px;--radius-xl: 36px;--font-heading: "Outfit", sans-serif;--font-body: "Inter", "Outfit", sans-serif;--ease-out-expo: cubic-bezier(.16, 1, .3, 1);--ease-bounce: cubic-bezier(.34, 1.56, .64, 1)}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html,body{width:100%;height:100%;overflow:hidden;font-family:var(--font-body);background:var(--bg-deep);color:var(--text)}#app{width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative;transition:opacity .4s var(--ease-out-expo)}#app.fade-out{opacity:0;transform:scale(.98)}button{font-family:var(--font-body);cursor:pointer;border:none;outline:none}.loading-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:2rem}.loading-crystal{width:80px;height:80px;position:relative;animation:crystalSpin 2s ease-in-out infinite}.crystal-shape{width:100%;height:100%;background:var(--grad-main);clip-path:polygon(50% 0%,100% 38%,82% 100%,18% 100%,0% 38%);animation:crystalPulse 1.5s ease-in-out infinite alternate}.crystal-glow{position:absolute;top:-20px;right:-20px;bottom:-20px;left:-20px;background:var(--grad-main);clip-path:polygon(50% 0%,100% 38%,82% 100%,18% 100%,0% 38%);filter:blur(20px);opacity:.4;animation:crystalPulse 1.5s ease-in-out infinite alternate}.loading-title{font-family:var(--font-heading);font-size:2.5rem;font-weight:900;background:var(--grad-main);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.loading-sub{color:var(--text-dim);font-weight:500}.loading-bar{width:200px;height:4px;background:var(--bg-glass);border-radius:4px;overflow:hidden}.loading-bar-fill{width:0%;height:100%;background:var(--grad-main);border-radius:4px;animation:loadFill 2s var(--ease-out-expo) forwards}@keyframes crystalSpin{0%,to{transform:rotate(0)}50%{transform:rotate(180deg)}}@keyframes crystalPulse{0%{transform:scale(.9);opacity:.8}to{transform:scale(1.1);opacity:1}}@keyframes loadFill{to{width:100%}}.lobby-container{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;overflow-y:auto;overflow-x:hidden;position:relative;opacity:0;transform:translateY(20px);transition:all .6s var(--ease-out-expo)}.lobby-container.visible{opacity:1;transform:translateY(0)}.lobby-bg{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0;overflow:hidden}.floating-crystal{position:absolute;width:40px;height:40px;opacity:.12;animation:floatCrystal 20s ease-in-out infinite}.floating-crystal:before{content:"";display:block;width:100%;height:100%;clip-path:polygon(50% 0%,100% 38%,82% 100%,18% 100%,0% 38%)}.c1{top:10%;left:5%;animation-delay:0s}.c1:before{background:#f36}.c2{top:30%;right:10%;animation-delay:-3s;width:50px;height:50px}.c2:before{background:#36f}.c3{bottom:20%;left:15%;animation-delay:-7s;width:30px;height:30px}.c3:before{background:#3f6}.c4{top:60%;right:20%;animation-delay:-11s;width:35px;height:35px}.c4:before{background:#fc0}.c5{top:15%;right:30%;animation-delay:-5s;width:25px;height:25px}.c5:before{background:#c3f}.c6{bottom:30%;left:40%;animation-delay:-15s;width:45px;height:45px}.c6:before{background:#6ff}@keyframes floatCrystal{0%,to{transform:translateY(0) rotate(0)}25%{transform:translateY(-30px) rotate(45deg)}50%{transform:translateY(10px) rotate(90deg)}75%{transform:translateY(-15px) rotate(135deg)}}.lobby-content{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;padding:3rem 1.5rem;max-width:560px;width:100%;gap:2rem}.lobby-logo{text-align:center;margin-bottom:.5rem}.logo-icon{display:flex;justify-content:center;gap:.5rem;margin-bottom:1rem}.logo-gem{font-size:2.2rem;animation:gemBounce 2s ease-in-out infinite}.logo-gem.g1{animation-delay:0s}.logo-gem.g2{animation-delay:.15s}.logo-gem.g3{animation-delay:.3s}@keyframes gemBounce{0%,to{transform:translateY(0) scale(1)}50%{transform:translateY(-8px) scale(1.1)}}.game-title{font-family:var(--font-heading);font-size:3.5rem;font-weight:900;letter-spacing:-.04em;line-height:1;color:#fff}.title-accent{background:var(--grad-main);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.game-tagline{color:var(--text-dim);font-size:1.1rem;font-weight:600;margin-top:.5rem;letter-spacing:.15em;text-transform:uppercase}.player-card{display:flex;align-items:center;gap:1rem;background:var(--bg-card);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1rem 1.5rem;width:100%;box-shadow:var(--shadow-sm)}.player-avatar{width:48px;height:48px;border-radius:50%;border:2px solid var(--primary);box-shadow:0 0 12px var(--primary-glow)}.player-info{display:flex;flex-direction:column}.player-name{font-weight:800;font-size:1.1rem}.player-rank{color:var(--text-dim);font-size:.8rem;font-weight:600}.player-rank i{color:var(--primary);margin-right:4px}.mode-grid{width:100%;display:flex;flex-direction:column;gap:1rem}.mode-card{display:flex;align-items:center;gap:1.2rem;width:100%;padding:1.2rem 1.5rem;background:var(--bg-card);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--border);border-radius:var(--radius-lg);color:var(--text);transition:all .3s var(--ease-out-expo);position:relative;overflow:hidden}.mode-card:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:var(--grad-surface);opacity:0;transition:opacity .3s}.mode-card:hover{border-color:var(--border-active);transform:translateY(-3px);box-shadow:var(--shadow-md),var(--shadow-glow)}.mode-card:hover:before{opacity:1}.mode-card:active{transform:translateY(0) scale(.98)}.mode-card.featured{border-color:#ff6bcd33}.mode-card.featured:hover{border-color:#ff6bcd66;box-shadow:var(--shadow-md),0 0 40px #ff6bcd26}.mode-badge{position:absolute;top:-1px;right:16px;background:var(--grad-battle);color:#fff;font-size:.6rem;font-weight:900;padding:3px 10px;border-radius:0 0 8px 8px;letter-spacing:.1em}.mode-icon{width:52px;height:52px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0;position:relative;z-index:1}.mode-icon.solo{background:linear-gradient(135deg,#7c6aff26,#4de8ff26);color:var(--accent-cyan)}.mode-icon.battle{background:linear-gradient(135deg,#ff4d6a26,#ff6bcd26);color:var(--accent-pink)}.mode-info{flex-grow:1;text-align:left;position:relative;z-index:1}.mode-name{display:block;font-weight:800;font-size:1.05rem;margin-bottom:2px}.mode-desc{display:block;font-size:.8rem;color:var(--text-dim);font-weight:500}.mode-arrow{color:var(--text-muted);font-size:.9rem;transition:transform .3s;position:relative;z-index:1}.mode-card:hover .mode-arrow{transform:translate(4px);color:var(--primary)}.how-to-play{width:100%;padding:1.5rem;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.how-to-play h3{font-family:var(--font-heading);font-size:1rem;font-weight:800;margin-bottom:1rem;color:var(--text-dim)}.how-to-play h3 i{margin-right:6px;color:var(--primary)}.tips-grid{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}.tip{display:flex;align-items:center;gap:.6rem;font-size:.78rem;color:var(--text-dim);font-weight:500}.tip-icon{font-size:1.1rem;flex-shrink:0}.lobby-footer{position:relative;z-index:1;padding:1.5rem;font-size:.7rem;color:var(--text-muted);text-align:center}.game-wrapper{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;padding:.5rem;gap:.5rem;opacity:0;transform:scale(.95);transition:all .5s var(--ease-out-expo);overflow:hidden}.game-wrapper.visible{opacity:1;transform:scale(1)}.battle-header{width:100%;max-width:560px;display:flex;align-items:center;gap:.5rem;padding:.6rem 1rem;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.fighter{flex:1;display:flex;align-items:center;gap:.6rem}.bot-fighter{flex-direction:row-reverse}.fighter-avatar{width:32px;height:32px;border-radius:50%;border:2px solid var(--primary);flex-shrink:0}.bot-avatar{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--accent-red),var(--accent-pink));font-size:1rem;border-color:var(--accent-red)}.fighter-info{flex-grow:1;min-width:0}.fighter-info.right{text-align:right}.fighter-name{font-weight:800;font-size:.75rem;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hp-bar-container{height:8px;background:#ffffff0f;border-radius:10px;overflow:hidden;margin-top:3px}.hp-bar{height:100%;border-radius:10px;transition:width .4s var(--ease-out-expo)}.player-hp{background:linear-gradient(90deg,var(--accent-green),var(--accent-cyan))}.bot-hp{background:linear-gradient(90deg,var(--accent-pink),var(--accent-red))}.vs-badge{display:flex;flex-direction:column;align-items:center;font-size:1rem;flex-shrink:0}.vs-text{font-family:var(--font-heading);font-weight:900;font-size:.6rem;color:var(--text-dim);letter-spacing:.1em}.game-hud{width:100%;max-width:560px;display:flex;align-items:center;justify-content:space-between;padding:.5rem 1rem;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.hud-left,.hud-right{display:flex;align-items:center;gap:1rem}.hud-item{display:flex;align-items:center;gap:.4rem;font-weight:800;font-size:1rem}.hud-item i{font-size:.8rem}.score-item{color:var(--accent-gold)}.level-item{position:relative}.level-label{font-size:.6rem;color:var(--text-dim);font-weight:900}.xp-bar{position:absolute;bottom:-4px;left:0;width:100%;height:3px;background:#ffffff0f;border-radius:3px;overflow:hidden}.xp-bar-fill{height:100%;background:var(--grad-main);border-radius:3px;transition:width .3s}.hud-center{position:absolute;left:50%;transform:translate(-50%)}.hud-combo{font-family:var(--font-heading);font-weight:900;font-size:1.2rem;transition:all .2s var(--ease-bounce)}.hud-combo.great{color:var(--accent-cyan);transform:scale(1.1)}.hud-combo.epic{color:var(--accent-gold);transform:scale(1.2);text-shadow:0 0 20px var(--accent-gold)}.hud-combo.legendary{color:var(--accent-pink);transform:scale(1.3);text-shadow:0 0 30px var(--accent-pink)}.time-item i{color:var(--accent-cyan)}#hud-time.urgent{color:var(--accent-red);animation:urgentPulse .5s ease-in-out infinite alternate}@keyframes urgentPulse{0%{opacity:1;transform:scale(1)}to{opacity:.6;transform:scale(1.05)}}.hud-btn{width:32px;height:32px;border-radius:50%;background:var(--bg-glass);border:1px solid var(--border);color:var(--text-dim);display:flex;align-items:center;justify-content:center;font-size:.8rem;transition:all .2s}.hud-btn:hover{background:var(--bg-glass-hover);color:#fff}.game-area{position:relative;flex:1;display:flex;align-items:center;justify-content:center;min-height:0}#game-canvas{border-radius:var(--radius-lg);box-shadow:var(--shadow-lg),var(--shadow-glow);cursor:pointer;touch-action:none;max-width:100%;max-height:100%}#overlay-canvas{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:10}.combo-popup{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.5);opacity:0;pointer-events:none;z-index:20;display:flex;flex-direction:column;align-items:center;text-align:center;transition:none}.combo-popup.animate{animation:comboBlast 1s var(--ease-out-expo) forwards}.combo-text{font-family:var(--font-heading);font-weight:900;font-size:1.8rem;text-shadow:0 2px 20px rgba(0,0,0,.5);white-space:nowrap}.combo-text.great{color:var(--accent-cyan);font-size:1.5rem}.combo-text.epic{color:var(--accent-gold);font-size:2rem}.combo-text.legendary{color:var(--accent-pink);font-size:2.5rem}.combo-points{font-family:var(--font-heading);font-weight:800;font-size:1.2rem;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.5)}.combo-points.small{font-size:.9rem;color:var(--text-dim)}@keyframes comboBlast{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}20%{opacity:1;transform:translate(-50%,-50%) scale(1.2)}40%{transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,calc(-50% - 60px)) scale(.8)}}.attack-effect{position:absolute;top:30%;right:5%;background:var(--accent-red);color:#fff;font-family:var(--font-heading);font-weight:900;font-size:1rem;padding:.4rem .8rem;border-radius:var(--radius-sm);opacity:0;pointer-events:none;z-index:20;box-shadow:0 0 20px #ff4d6a80}.attack-effect.animate{animation:attackSlide 1.5s var(--ease-out-expo) forwards}@keyframes attackSlide{0%{opacity:0;transform:translate(-20px) scale(.8)}20%{opacity:1;transform:translate(0) scale(1.1)}50%{opacity:1;transform:translate(10px) scale(1)}to{opacity:0;transform:translate(40px) scale(.7)}}.level-up-effect{position:absolute;top:15%;left:50%;transform:translate(-50%) scale(.5);background:var(--grad-gold);color:#1a1100;font-family:var(--font-heading);font-weight:900;font-size:1.1rem;padding:.5rem 1.5rem;border-radius:var(--radius-xl);opacity:0;pointer-events:none;z-index:20;box-shadow:0 0 30px #ffd84d66;white-space:nowrap}.level-up-effect.animate{animation:levelUpPop 2s var(--ease-bounce) forwards}@keyframes levelUpPop{0%{opacity:0;transform:translate(-50%) scale(.5)}15%{opacity:1;transform:translate(-50%) scale(1.15)}30%{transform:translate(-50%) scale(1)}80%{opacity:1}to{opacity:0;transform:translate(-50%) translateY(-30px) scale(.9)}}.game-over-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:100;display:flex;align-items:center;justify-content:center;background:#05060f00;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px);opacity:0;transition:all .6s var(--ease-out-expo)}.game-over-overlay.visible{opacity:1;background:#05060fd9;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}.game-over{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.game-over-content{max-width:480px;width:100%;padding:2rem;text-align:center;display:flex;flex-direction:column;align-items:center;gap:1.5rem;animation:gameOverSlide .8s var(--ease-out-expo) .2s both}@keyframes gameOverSlide{0%{opacity:0;transform:translateY(30px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.go-title{font-family:var(--font-heading);font-size:3rem;font-weight:900;letter-spacing:-.03em}.victory .go-title{color:var(--accent-gold);text-shadow:0 0 40px rgba(255,216,77,.3)}.defeat .go-title{color:var(--accent-red)}.draw .go-title{color:var(--accent-cyan)}.complete .go-title{color:var(--primary)}.go-subtitle{color:var(--text-dim);font-size:1rem;font-weight:500;margin-top:-.5rem}.grade-container{display:flex;align-items:center;justify-content:center}.grade{font-family:var(--font-heading);font-weight:900;font-size:4rem;width:90px;height:90px;display:flex;align-items:center;justify-content:center;border-radius:24px;border:3px solid;animation:gradeReveal .5s var(--ease-bounce) .6s both}@keyframes gradeReveal{0%{transform:scale(0) rotate(-15deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}.grade-s{color:var(--accent-gold);border-color:var(--accent-gold);background:linear-gradient(135deg,#ffd84d1a,#ff8c421a);box-shadow:0 0 40px #ffd84d33;text-shadow:0 0 20px var(--accent-gold)}.grade-a{color:var(--accent-pink);border-color:var(--accent-pink);background:#ff6bcd14;box-shadow:0 0 30px #ff6bcd26}.grade-b{color:var(--accent-cyan);border-color:var(--accent-cyan);background:#4de8ff14}.grade-c{color:var(--primary);border-color:var(--primary);background:#7c6aff14}.grade-d{color:var(--text-dim);border-color:var(--text-muted);background:#ffffff08}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;width:100%}.stat-item{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);padding:1rem .5rem;display:flex;flex-direction:column;align-items:center;gap:.3rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.stat-value{font-family:var(--font-heading);font-weight:900;font-size:1.3rem;color:#fff}.stat-label{font-size:.65rem;color:var(--text-dim);font-weight:600}.stat-label i{margin-right:3px}.go-actions{display:flex;gap:.8rem;width:100%}.go-btn{flex:1;padding:1rem;border-radius:var(--radius-md);font-weight:800;font-size:.95rem;transition:all .3s var(--ease-out-expo);display:flex;align-items:center;justify-content:center;gap:.5rem}.go-btn.primary{background:var(--grad-main);color:#fff;box-shadow:0 4px 20px var(--primary-glow)}.go-btn.primary:hover{transform:translateY(-3px);box-shadow:0 8px 30px var(--primary-glow)}.go-btn.secondary{background:var(--bg-glass);border:1px solid var(--border);color:var(--text-dim)}.go-btn.secondary:hover{background:var(--bg-glass-hover);color:#fff;transform:translateY(-3px)}@media (max-height: 700px){.game-hud{padding:.3rem .8rem}.battle-header{padding:.4rem .8rem}.hud-item{font-size:.85rem}.game-title{font-size:2.5rem}}@media (max-width: 480px){.tips-grid{grid-template-columns:1fr}.stats-grid{grid-template-columns:repeat(2,1fr)}.game-title{font-size:2.8rem}.lobby-content{padding:2rem 1rem}}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#fff3}.frenzy-item{display:flex;flex-direction:column;min-width:80px}.frenzy-label{font-size:.6rem;color:var(--text-dim);font-weight:900;margin-bottom:2px}.frenzy-bar{width:100%;height:4px;background:#ffffff0f;border-radius:4px;overflow:hidden;position:relative}.frenzy-bar-fill{height:100%;width:0%;background:var(--grad-gold);border-radius:4px;transition:width .3s cubic-bezier(.16,1,.3,1)}.frenzy-bar.active .frenzy-bar-fill{background:var(--grad-battle);animation:frenzyBarFlash .3s infinite alternate}@keyframes frenzyBarFlash{0%{filter:brightness(1)}to{filter:brightness(1.5)}}.frenzy-activation{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.5);z-index:100;font-family:var(--font-heading);font-size:3rem;font-weight:900;color:#fa0;text-shadow:0 0 30px #ff5500,0 0 60px rgba(255,0,0,.5);white-space:nowrap;pointer-events:none;animation:frenzyTextBlast 2s cubic-bezier(.16,1,.3,1) forwards}@keyframes frenzyTextBlast{0%{transform:translate(-50%,-50%) scale(.5);opacity:0;filter:blur(10px)}20%{transform:translate(-50%,-50%) scale(1.1);opacity:1;filter:blur(0)}80%{transform:translate(-50%,-50%) scale(1);opacity:1}to{transform:translate(-50%,-150%) scale(.8);opacity:0;filter:blur(5px)}}.shake-container{transition:transform .05s}