*{margin:0;padding:0;box-sizing:border-box}body{overflow:hidden;background:#000;font-family:MedievalSharp,cursive;color:#e0d5c0;user-select:none}#game-container{width:100vw;height:100vh;position:relative}#game-canvas{width:100%;height:100%;display:block}#login-screen{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 30%,#140f05b3,#000000eb);display:flex;align-items:center;justify-content:center;z-index:100;cursor:default;overflow-y:auto}#login-content{display:flex;flex-direction:column;align-items:center;max-width:440px;width:100%;padding:30px 20px}#logo-wrap{position:relative;width:140px;height:140px;margin-bottom:10px}#sword-logo{width:140px;height:140px;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 0 20px rgba(212,168,37,.5));animation:logo-float 3s ease-in-out infinite;position:relative;z-index:2}#logo-glow{position:absolute;inset:-30px;background:radial-gradient(circle,rgba(212,168,37,.25) 0%,transparent 70%);border-radius:50%;animation:glow-pulse 3s ease-in-out infinite;z-index:1}@keyframes logo-float{0%,to{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-10px) rotate(2deg)}}@keyframes glow-pulse{0%,to{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.15)}}#game-title{font-size:52px;color:#d4a825;margin-bottom:2px;text-shadow:0 0 40px rgba(212,168,37,.6),0 0 80px rgba(212,168,37,.2),0 2px 4px rgba(0,0,0,.9);letter-spacing:6px;text-align:center}#token-tag{font-family:Courier New,monospace;font-size:22px;color:#c8a030;letter-spacing:4px;margin-bottom:4px;text-shadow:0 0 15px rgba(200,160,48,.4);font-weight:700}#hero-line{font-size:14px;color:#c8beaa80;font-family:Arial,sans-serif;margin-bottom:28px;letter-spacing:.5px;text-align:center}#login-box{background:linear-gradient(145deg,#1a1209e6,#2a1f10e6);border:1px solid rgba(139,105,20,.5);border-radius:14px;padding:28px 30px;text-align:center;width:100%;box-shadow:0 0 60px #8b691426,0 20px 60px #00000080,inset 0 1px #ffffff0a;backdrop-filter:blur(12px)}.input-group{margin-bottom:14px;text-align:left}.input-label{display:block;font-size:11px;color:#c8beaa80;font-family:Arial,sans-serif;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:5px}#name-input,#wallet-input{width:100%;padding:12px 14px;background:#00000080;border:1px solid rgba(90,74,42,.5);border-radius:8px;color:#e0d5c0;font-family:Arial,sans-serif;font-size:15px;outline:none;transition:all .2s}#name-input{font-family:MedievalSharp,cursive;font-size:18px}#wallet-input{font-size:12px;letter-spacing:.3px;color:#c8beaacc}#name-input:focus,#wallet-input:focus{border-color:#d4a825;box-shadow:0 0 12px #d4a82533}#name-input::placeholder,#wallet-input::placeholder{color:#8c826e66}.select-label{font-size:11px;color:#c8beaa80;text-align:left;margin-bottom:8px;font-family:Arial,sans-serif;text-transform:uppercase;letter-spacing:1.5px}#class-select{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:20px}.class-btn{padding:12px 6px 10px;background:#0006;border:2px solid rgba(90,74,42,.4);border-radius:10px;color:#e0d5c0;font-family:MedievalSharp,cursive;cursor:pointer;transition:all .2s;display:flex;flex-direction:column;align-items:center;gap:6px}.class-btn:hover{border-color:#8b6914b3;background:#8b691414}.class-btn.selected{border-color:#d4a825;background:#d4a8251f;box-shadow:0 0 20px #d4a82526}.class-name{font-size:13px;color:#d4a825}.class-icon{width:42px;height:42px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:4px}.class-icon svg{width:100%;height:100%}.warrior-icon{background:radial-gradient(circle,#5a759059,#3a557080)}.ninja-icon{background:radial-gradient(circle,#3a3a5e59,#1a1a2e80)}.shaman-icon{background:radial-gradient(circle,#6a8a5a59,#4a6a4080)}.sura-icon{background:radial-gradient(circle,#5a286859,#2a083880)}#play-btn{width:100%;padding:15px;background:linear-gradient(180deg,#a07a18,#6b5020);border:2px solid #d4a825;border-radius:10px;color:#fff;font-family:MedievalSharp,cursive;font-size:22px;cursor:pointer;transition:all .25s;text-shadow:0 1px 3px rgba(0,0,0,.7);letter-spacing:3px;position:relative;overflow:hidden}#play-btn:after{content:"";position:absolute;inset:-2px;border-radius:10px;background:linear-gradient(45deg,transparent 30%,rgba(255,255,255,.1) 50%,transparent 70%);animation:btn-shine 3s infinite}@keyframes btn-shine{0%{transform:translate(-100%)}to{transform:translate(100%)}}#play-btn:hover{background:linear-gradient(180deg,#b88a20,#7b6028);box-shadow:0 0 35px #d4a82566,0 0 80px #d4a8251a;transform:translateY(-1px)}#play-btn:active{transform:translateY(1px);box-shadow:0 0 15px #d4a8254d}#login-footer{margin-top:16px;text-align:center}#player-count{font-size:12px;color:#c8beaa4d;font-family:Arial,sans-serif;letter-spacing:.5px}#hud{position:absolute;inset:0;pointer-events:none;z-index:10}#hud>*{pointer-events:auto}#player-bars{position:absolute;bottom:80px;left:20px;width:230px}#level-display{font-size:20px;color:#d4a825;margin-bottom:6px;text-shadow:0 0 8px rgba(212,168,37,.3),1px 1px 2px #000}.bar-container{margin-bottom:4px}.bar{height:20px;border-radius:4px;position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.12);background:#00000080}.hp-bar{background:#500000b3}.mp-bar{background:#000050b3}.xp-bar{background:#503c00b3}.bar-fill{height:100%;transition:width .3s ease;width:100%;border-radius:3px}.hp-bar .bar-fill{background:linear-gradient(180deg,#e83030,#8b1a1a);box-shadow:inset 0 1px #ffffff26}.mp-bar .bar-fill{background:linear-gradient(180deg,#3050e8,#1a1a8b);box-shadow:inset 0 1px #ffffff26}.xp-bar .bar-fill{background:linear-gradient(180deg,#e8c830,#8b7a1a);box-shadow:inset 0 1px #ffffff26}.bar-text{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:11px;color:#fff;text-shadow:1px 1px 2px #000;font-family:Arial,sans-serif;font-weight:700}#target-frame{position:absolute;top:20px;left:50%;transform:translate(-50%);background:#000000bf;border:1px solid rgba(255,60,60,.4);border-radius:8px;padding:10px 16px;min-width:200px;backdrop-filter:blur(4px)}#target-info{display:flex;align-items:baseline;gap:8px;margin-bottom:4px}#target-name{font-size:16px;color:#ff6050}#target-level{font-size:12px;color:#aaa;font-family:Arial,sans-serif}.target-hp{height:16px}#quest-panel-container{position:absolute;top:80px;left:16px;width:220px;max-height:360px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#5a4a2a transparent}.panel-title{font-size:16px;color:#d4a825;margin-bottom:8px;text-shadow:0 0 6px rgba(212,168,37,.3),1px 1px 2px #000;border-bottom:1px solid rgba(212,168,37,.2);padding-bottom:4px}.quest-item{background:#0000008c;border:1px solid rgba(90,74,42,.4);border-radius:6px;padding:8px 10px;margin-bottom:6px;backdrop-filter:blur(2px);transition:border-color .2s}.quest-item:hover{border-color:#d4a82580}.quest-item.quest-complete{border-color:#44c84466;opacity:.7}.quest-header{display:flex;align-items:center;gap:6px;margin-bottom:2px}.quest-title{font-size:13px;color:#e0d5c0}.quest-check{color:#4c4;font-size:14px}.quest-desc{font-size:10px;color:#8a7a5a;font-family:Arial,sans-serif;margin-bottom:4px}.quest-progress{display:flex;align-items:center;gap:6px}.quest-progress-bar{flex:1;height:6px;background:#0006;border-radius:3px;overflow:hidden}.quest-progress-fill{height:100%;background:linear-gradient(90deg,#d4a825,#e8c830);border-radius:3px;transition:width .3s}.quest-complete .quest-progress-fill{background:linear-gradient(90deg,#4a4,#6c6)}.quest-progress-text{font-size:10px;color:#aaa;font-family:Arial,sans-serif;min-width:30px;text-align:right}#skill-bar{position:absolute;bottom:20px;left:50%;transform:translate(-50%);display:flex;gap:6px;background:#0006;padding:6px 10px;border-radius:8px;border:1px solid rgba(90,74,42,.3);backdrop-filter:blur(4px)}.skill-slot{width:50px;height:50px;background:#0009;border:2px solid #4a3a2a;border-radius:6px;position:relative;cursor:pointer;transition:all .15s}.skill-slot:hover{border-color:#d4a825;box-shadow:0 0 10px #d4a8254d;transform:translateY(-2px)}.skill-key{position:absolute;top:2px;left:4px;font-size:10px;color:#c8beaab3;font-family:Arial,sans-serif;font-weight:700;z-index:2;text-shadow:0 1px 2px #000}.skill-icon{width:100%;height:100%;border-radius:4px;background-size:cover;background-position:center}.cooldown-overlay{position:absolute;inset:0;background:#000000a6;border-radius:4px;display:none;align-items:center;justify-content:center;font-size:16px;color:#fff;font-family:Arial,sans-serif;font-weight:700;text-shadow:0 1px 3px #000}.skill-tooltip{display:none;position:absolute;bottom:58px;left:50%;transform:translate(-50%);background:#000000e6;border:1px solid #5a4a2a;border-radius:4px;padding:4px 10px;font-size:11px;font-family:Arial,sans-serif;color:#e0d5c0;white-space:nowrap;z-index:50;backdrop-filter:blur(4px)}.skill-slot:hover .skill-tooltip{display:block}#controls-hint{position:absolute;bottom:82px;left:50%;transform:translate(-50%);font-size:11px;font-family:Arial,sans-serif;color:#c8beaa59;pointer-events:none;white-space:nowrap}#minimap-container{position:absolute;top:20px;right:20px;border:2px solid rgba(90,74,42,.5);border-radius:8px;overflow:hidden;background:#0006;box-shadow:0 2px 10px #0006}#minimap{display:block}#inventory-panel{position:absolute;right:20px;top:190px;width:280px;background:#000000b3;border:1px solid rgba(90,74,42,.5);border-radius:8px;padding:12px;backdrop-filter:blur(4px);display:block}#yang-bar{position:absolute;right:20px;top:520px;width:280px;background:#000000b3;border:1px solid rgba(212,168,37,.4);border-radius:8px;padding:8px 14px;backdrop-filter:blur(4px);display:flex;align-items:center;gap:8px}.yang-icon{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;background:linear-gradient(145deg,#d4a825,#8b6914);border-radius:50%;font-family:Arial,sans-serif;font-weight:700;font-size:16px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.5);flex-shrink:0}#yang-amount{font-size:18px;color:#d4a825;font-family:Arial,sans-serif;font-weight:700;text-shadow:0 0 6px rgba(212,168,37,.3);flex:1}.yang-label{font-size:11px;color:#8a7a5a;font-family:Arial,sans-serif;text-transform:uppercase;letter-spacing:1px}.inv-header{font-size:16px;color:#d4a825;margin-bottom:10px;text-shadow:0 0 6px rgba(212,168,37,.3);border-bottom:1px solid rgba(212,168,37,.2);padding-bottom:6px}.inv-key{display:none}.inv-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}.inv-slot{width:60px;height:60px;background:#1e190f99;border:1px solid rgba(80,70,50,.4);border-radius:4px;display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer;transition:border-color .15s}.inv-slot:hover{border-color:#d4a82580}.inv-slot.empty{cursor:default}.inv-slot.rarity-common{border-color:#96969666}.inv-slot.rarity-uncommon{border-color:#50c85080}.inv-slot.rarity-rare{border-color:#3c78ff80}.inv-slot.rarity-epic{border-color:#b43cff80;box-shadow:0 0 6px #b43cff33}.inv-icon{display:flex;align-items:center;justify-content:center}.inv-icon img{image-rendering:pixelated}.inv-count{position:absolute;bottom:2px;right:4px;font-size:11px;color:#fff;font-family:Arial,sans-serif;font-weight:700;text-shadow:0 1px 2px #000}#chat-container{position:absolute;bottom:20px;right:20px;width:300px}#chat-messages{height:140px;overflow-y:auto;padding:8px;background:#00000080;border:1px solid rgba(90,74,42,.3);border-radius:6px 6px 0 0;font-size:12px;font-family:Arial,sans-serif;scrollbar-width:thin;scrollbar-color:#5a4a2a transparent;backdrop-filter:blur(2px)}#chat-messages .chat-msg{margin-bottom:3px;word-wrap:break-word;line-height:1.4}#chat-messages .chat-name{color:#d4a825;font-weight:700}#chat-messages .chat-system{color:#7a9a6a;font-style:italic}#chat-input{width:100%;padding:8px 10px;background:#000000a6;border:1px solid rgba(90,74,42,.3);border-top:none;border-radius:0 0 6px 6px;color:#e0d5c0;font-size:12px;font-family:Arial,sans-serif;outline:none;cursor:text}#chat-input:focus{border-color:#d4a825;cursor:text}#notifications{position:absolute;top:40%;left:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:none}.notification{font-size:26px;color:#d4a825;text-shadow:0 0 15px rgba(212,168,37,.5),0 0 30px rgba(212,168,37,.2),2px 2px 4px #000;animation:notif-fade 2.5s forwards;margin-bottom:4px}@keyframes notif-fade{0%{opacity:0;transform:translateY(20px) scale(.8)}12%{opacity:1;transform:translateY(0) scale(1.05)}18%{transform:scale(1)}70%{opacity:1}to{opacity:0;transform:translateY(-40px)}}#esc-menu{position:absolute;inset:0;z-index:200}#esc-menu-backdrop{position:absolute;inset:0;background:#0009;backdrop-filter:blur(4px)}#esc-menu-panel{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:linear-gradient(145deg,#1a1209f2,#2a1f10f2);border:1px solid rgba(139,105,20,.5);border-radius:14px;padding:30px 36px;min-width:320px;box-shadow:0 0 60px #000000b3,0 0 30px #8b691426}.esc-title{font-size:28px;color:#d4a825;text-align:center;margin-bottom:24px;text-shadow:0 0 20px rgba(212,168,37,.4);letter-spacing:3px}.esc-section{margin-bottom:16px}.esc-label{display:block;font-size:12px;color:#c8beaa99;font-family:Arial,sans-serif;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:6px}.esc-slider-row{display:flex;align-items:center;gap:12px}.esc-slider{flex:1;-webkit-appearance:none;appearance:none;height:6px;background:#5a4a2a66;border-radius:3px;outline:none;cursor:pointer}.esc-slider::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#d4a825;cursor:pointer;box-shadow:0 0 8px #d4a82566}.esc-val{font-size:13px;color:#d4a825;font-family:Arial,sans-serif;min-width:36px;text-align:right}.esc-divider{height:1px;background:#8b69144d;margin:20px 0}.esc-btn{display:block;width:100%;padding:12px;background:#5a4a2a4d;border:1px solid rgba(139,105,20,.4);border-radius:8px;color:#e0d5c0;font-family:MedievalSharp,cursive;font-size:16px;cursor:pointer;transition:all .2s;margin-bottom:8px}.esc-btn:hover{background:#8b691433;border-color:#d4a825}.esc-btn-primary{background:#d4a82526;border-color:#d4a825;color:#d4a825}.esc-btn-primary:hover{background:#d4a8254d;box-shadow:0 0 15px #d4a82533}.esc-btn-danger{color:#c54;border-color:#cc55444d}.esc-btn-danger:hover{background:#cc554426;border-color:#c54}.damage-number{position:absolute;font-family:Arial,sans-serif;font-weight:700;font-size:18px;color:#f44;text-shadow:1px 1px 2px #000,-1px -1px 2px #000,0 0 4px rgba(0,0,0,.5);pointer-events:none;animation:dmg-float 1s forwards;z-index:20}.damage-number.heal{color:#4f4}.damage-number.crit{font-size:26px;color:#fa0}@keyframes dmg-float{0%{opacity:1;transform:translateY(0) scale(1.2)}10%{transform:translateY(-5px) scale(1)}to{opacity:0;transform:translateY(-70px)}}