*{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}#left-panel{position:absolute;top:0;left:0;bottom:0;width:22vw;z-index:10;background:linear-gradient(135deg,#0a0a1ee0,#141432eb);border-right:1px solid rgba(248,213,108,.15);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);overflow-y:auto;padding:1.2rem 1rem;display:flex;flex-direction:column;gap:.1rem;scrollbar-width:thin;scrollbar-color:rgba(248,213,108,.3) transparent}#left-panel::-webkit-scrollbar{width:4px}#left-panel::-webkit-scrollbar-thumb{background:#f8d56c4d;border-radius:2px}.panel-header{padding-bottom:.8rem;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:.4rem}.panel-title{font-size:1.4rem;font-weight:800;background:linear-gradient(90deg,#f8d56c,#f0a040);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.panel-subtitle{font-size:.8rem;opacity:.5;text-transform:uppercase;letter-spacing:2px;margin-top:2px}.panel-section{padding:.5rem 0;border-bottom:1px solid rgba(255,255,255,.05)}.section-title{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:2px;opacity:.4;margin-bottom:.4rem;color:#f8d56c}.panel-stat{display:flex;justify-content:space-between;align-items:center;padding:.2rem 0}.panel-stat-label{font-size:.8rem;opacity:.7}.panel-stat-value{font-size:.95rem;font-weight:700;color:#fff}.panel-element-list,.panel-resist-list{display:flex;flex-wrap:wrap;gap:.4rem}.panel-elem-tag{display:inline-flex;align-items:center;gap:3px;padding:.2rem .5rem;border-radius:6px;font-size:.75rem;font-weight:600}.panel-elem-tag.water{background:#48f3;border:1px solid rgba(68,136,255,.4);color:#8bf}.panel-elem-tag.fire{background:#f623;border:1px solid rgba(255,102,34,.4);color:#f96}.panel-elem-tag.lightning{background:#ffe63233;border:1px solid rgba(255,230,50,.4);color:#ffe644}.panel-elem-tag.poison{background:#50c85033;border:1px solid rgba(80,200,80,.4);color:#6d6}.panel-elem-tag.dark{background:#8c50c833;border:1px solid rgba(140,80,200,.4);color:#b8e}.panel-resist-tag{display:inline-flex;align-items:center;gap:3px;padding:.2rem .5rem;border-radius:6px;font-size:.72rem;font-weight:600;background:#ffffff0f;border:1px solid rgba(255,255,255,.1)}.panel-aura-status .panel-aura-active{color:#8cf;font-size:.85rem;font-weight:600}.panel-sword-status{display:flex;flex-direction:column;gap:.2rem}.panel-sword-info{font-size:.85rem;font-weight:600;color:#8cf}.panel-sword-next{font-size:.75rem;opacity:.7}.panel-hammer-status{display:flex;flex-direction:column;gap:.2rem}.panel-hammer-info{font-size:.85rem;font-weight:600;color:#f8d56c}.panel-hammer-points{font-size:.75rem;opacity:.7}.panel-upgrade-list{display:flex;flex-direction:column;gap:.25rem}.panel-upgrade-item{font-size:.75rem;opacity:.8;padding:.2rem .4rem;background:#ffffff0a;border-radius:4px;border-left:2px solid rgba(248,213,108,.4)}.panel-none{font-size:.75rem;opacity:.35;font-style:italic}#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}#left-panel{width:45vw;padding:.8rem .6rem}.panel-title{font-size:1.1rem}.panel-stat-value{font-size:.85rem}}#speed-toggle{position:fixed;top:12px;right:16px;z-index:200;padding:6px 16px;font-family:inherit;font-size:1rem;font-weight:800;letter-spacing:1.5px;color:#aaa;background:#3c3c3c99;border:2px solid #555;border-radius:8px;cursor:pointer;-webkit-user-select:none;user-select:none;transition:all .2s ease;text-shadow:none;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}#speed-toggle:hover{background:#505050cc;border-color:#888;color:#ddd}#speed-toggle:active{transform:scale(.93)}#speed-toggle.active{color:#f33;background:#ff00002e;border-color:#f33;text-shadow:0 0 8px rgba(255,50,50,.6);animation:speed-pulse .8s ease-in-out infinite alternate}#speed-toggle.active:hover{background:#ff00004d}@keyframes speed-pulse{0%{opacity:.85;transform:scale(1)}to{opacity:1;transform:scale(1.05)}}#hammer-upgrade-toggle{position:fixed;top:12px;right:80px;z-index:200;padding:6px 12px;font-family:inherit;font-size:1rem;font-weight:800;color:#aaa;background:#3c3c3c99;border:2px solid #555;border-radius:8px;cursor:pointer;-webkit-user-select:none;user-select:none;transition:all .2s ease;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}#hammer-upgrade-toggle:hover{background:#505050cc;border-color:#f8d56c;color:#f8d56c}#hammer-upgrade-toggle:active{transform:scale(.93)}#hammer-upgrade-toggle.disabled,#hammer-upgrade-toggle:disabled{opacity:.3;cursor:not-allowed;border-color:#444;color:#666}#hammer-upgrade-toggle.disabled:hover,#hammer-upgrade-toggle:disabled:hover{background:#3c3c3c99;border-color:#444;color:#666}#auto-toggle{position:fixed;top:12px;right:148px;z-index:200;padding:6px 14px;font-family:inherit;font-size:.85rem;font-weight:800;letter-spacing:1px;color:#888;background:#3c3c3c99;border:2px solid #555;border-radius:8px;cursor:pointer;-webkit-user-select:none;user-select:none;transition:all .2s ease;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}#auto-toggle:hover{background:#505050cc;border-color:#888;color:#ddd}#auto-toggle:active{transform:scale(.93)}#auto-toggle.active{color:#4f8;background:#00c8502e;border-color:#4f8;text-shadow:0 0 8px rgba(68,255,136,.6);animation:auto-pulse 1.2s ease-in-out infinite alternate}#auto-toggle.active:hover{background:#00c8504d}@keyframes auto-pulse{0%{opacity:.85;transform:scale(1)}to{opacity:1;transform:scale(1.05)}}.panel-elem-detail{font-size:.75rem;padding:.15rem 0;opacity:.85;color:#cce0ff}