*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:linear-gradient(135deg,#0a0a1a,#1a1a2e,#16213e);color:#e0e0e0;user-select:none;-webkit-user-select:none}#class-select{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:100;background:linear-gradient(135deg,#0a0a1a,#1a1a2e,#16213e)}#class-select h1{font-size:2.4rem;margin-bottom:2.5rem;background:linear-gradient(90deg,#f8d56c,#f0a040);-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none}.class-buttons{display:flex;gap:1.5rem;flex-wrap:wrap;justify-content:center}.class-btn{background:#ffffff0f;border:2px solid rgba(255,255,255,.12);border-radius:16px;padding:2rem 2.5rem;cursor:pointer;transition:all .25s;display:flex;flex-direction:column;align-items:center;gap:.5rem;color:#e0e0e0;min-width:150px}.class-btn:hover,.class-btn:active{background:#ffffff1f;border-color:#f8d56c;transform:translateY(-4px);box-shadow:0 8px 30px #f8d56c26}.class-icon{font-size:3rem}.class-name{font-size:1.3rem;font-weight:700}.class-weapon{font-size:.85rem;opacity:.6}#game-screen{position:fixed;top:0;right:0;bottom:0;left:0}#game-canvas{display:block;width:100%;height:100%;position:absolute;top:0;right:0;bottom:0;left:0;z-index:0}#top-bar{position:absolute;top:0;left:0;right:0;z-index:10;display:flex;justify-content:space-between;align-items:flex-start;padding:1rem 1.5rem;background:linear-gradient(180deg,rgba(0,0,0,.5) 0%,transparent 100%)}#top-left{display:flex;flex-direction:column;gap:2px}#class-label{font-size:1.1rem;opacity:.7;text-transform:uppercase;letter-spacing:2px}#weapon-type{font-size:.85rem;opacity:.5;text-transform:uppercase;letter-spacing:1px}#element-badges{display:flex;gap:4px;margin-top:4px}.badge{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:6px;font-size:.9rem}.badge-water{background:#4488ff40;border:1px solid rgba(68,136,255,.5)}.badge-fire{background:#ff662240;border:1px solid rgba(255,102,34,.5)}.badge-aura{background:#88ccff40;border:1px solid rgba(136,204,255,.5)}#level-label{font-size:1.6rem;font-weight:700;color:#f8d56c}#progress-wrap{position:absolute;bottom:140px;left:50%;transform:translate(-50%);z-index:10;text-align:center;width:min(320px,85vw)}#progress-bar{width:100%;height:18px;border-radius:9px;background:#ffffff14;border:1px solid rgba(255,255,255,.12);overflow:hidden}#progress-fill{height:100%;width:0%;background:linear-gradient(90deg,#f0a040,#f8d56c);border-radius:9px;transition:width .15s ease}#progress-text{margin-top:6px;font-size:.95rem;opacity:.7}#stats-panel{position:absolute;bottom:0;left:0;right:0;z-index:10;display:flex;justify-content:center;gap:1.2rem;padding:1.2rem 1rem 1.8rem;background:linear-gradient(0deg,rgba(0,0,0,.55) 0%,transparent 100%);flex-wrap:wrap}.stat{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:55px}.stat-name{font-size:.7rem;text-transform:uppercase;letter-spacing:1px;opacity:.5}.stat-val{font-size:1.3rem;font-weight:700;color:#fff}#float-container{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:20}.float-num{position:absolute;font-weight:800;font-size:1.4rem;color:#f8d56c;text-shadow:0 0 6px rgba(248,213,108,.6);animation:floatUp .9s ease-out forwards;pointer-events:none}@keyframes floatUp{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-60px) scale(.6)}}.level-up-flash{position:absolute;font-size:2rem;font-weight:900;color:#fff;text-shadow:0 0 20px #f8d56c,0 0 40px #f0a040;animation:levelPop 1.2s ease-out forwards;pointer-events:none;left:50%;top:35%;transform:translate(-50%,-50%)}@keyframes levelPop{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}20%{opacity:1;transform:translate(-50%,-50%) scale(1.3)}50%{transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-50%) scale(.8) translateY(-30px)}}#card-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#000000bf;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;transition:opacity .4s ease}#card-overlay.visible{opacity:1}#card-overlay.fade-out{opacity:0;transition:opacity .35s ease}.card-title{font-size:2rem;font-weight:900;letter-spacing:6px;background:linear-gradient(90deg,#f8d56c,#f0a040,#f8d56c);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:.3rem;animation:titleGlow 2s ease-in-out infinite alternate}@keyframes titleGlow{0%{filter:brightness(1)}to{filter:brightness(1.3)}}.card-subtitle{font-size:.95rem;opacity:.7;margin-bottom:2rem}.card-container{display:flex;gap:1.2rem;flex-wrap:wrap;justify-content:center;padding:0 1rem}.upgrade-card{position:relative;width:180px;min-height:250px;border-radius:16px;cursor:pointer;transition:all .3s ease;animation:cardSlideIn .5s ease-out backwards}.upgrade-card:nth-child(1){animation-delay:.1s}.upgrade-card:nth-child(2){animation-delay:.25s}.upgrade-card:nth-child(3){animation-delay:.4s}@keyframes cardSlideIn{0%{opacity:0;transform:translateY(40px) scale(.8)}to{opacity:1;transform:translateY(0) scale(1)}}.card-glow{position:absolute;top:-2px;right:-2px;bottom:-2px;left:-2px;border-radius:18px;background:linear-gradient(135deg,#f8d56c4d,#f0a0401a,#f8d56c4d);z-index:-1;opacity:0;transition:opacity .3s}.card-inner{position:relative;width:100%;height:100%;border-radius:16px;padding:1.5rem 1rem;display:flex;flex-direction:column;align-items:center;gap:.6rem;background:linear-gradient(145deg,#1e1e3cf2,#141428fa);border:1.5px solid rgba(255,255,255,.1);overflow:hidden}.card-inner:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(135deg,transparent 40%,rgba(255,255,255,.04) 45%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.04) 55%,transparent 60%);transition:transform .5s;pointer-events:none}.upgrade-card:hover .card-inner:before{transform:translate(20%,20%)}.upgrade-card:hover{transform:translateY(-8px) scale(1.05)}.upgrade-card:hover .card-glow{opacity:1}.upgrade-card:hover .card-inner{border-color:#f8d56c80;box-shadow:0 10px 40px #f8d56c26,0 0 20px #f8d56c14}.upgrade-card.selected{transform:translateY(-12px) scale(1.1);z-index:10}.upgrade-card.selected .card-glow{opacity:1}.upgrade-card.selected .card-inner{border-color:#f8d56c;box-shadow:0 0 30px #f8d56c66,0 15px 50px #f8d56c33}.upgrade-card.not-selected{opacity:.3;transform:scale(.9);pointer-events:none;transition:all .4s ease}.card-icon{font-size:3rem;filter:drop-shadow(0 2px 8px rgba(0,0,0,.3));margin-bottom:.2rem}.card-name{font-size:1rem;font-weight:800;text-align:center;color:#f8d56c}.card-desc{font-size:.8rem;opacity:.6;text-align:center}.card-detail{font-size:.75rem;opacity:.8;text-align:center;padding:.4rem .6rem;background:#ffffff0d;border-radius:8px;margin-top:auto;color:#acf}@media(max-width:600px){.upgrade-card{width:140px;min-height:210px}.card-icon{font-size:2.4rem}.card-name{font-size:.85rem}.card-title{font-size:1.4rem;letter-spacing:4px}.card-container{gap:.6rem}.stat-val{font-size:1.1rem}#stats-panel{gap:.8rem}}