*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;background:#0a0e1a;font-family:Trebuchet MS,Segoe UI,sans-serif}#game{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#141e3c8c,#050812eb);z-index:10}.overlay.hidden,#hud.hidden{display:none}.menu-card{text-align:center;padding:48px 56px;border:2px solid #c9a227;border-radius:12px;background:linear-gradient(180deg,#101628f2,#080c18f2);box-shadow:0 0 60px #c9a22740,inset 0 0 30px #0009}.menu-card h1{color:#f0d060;letter-spacing:8px;font-size:42px;text-shadow:0 2px 0 #7a5c10,0 0 24px rgba(240,208,96,.5)}.tagline{color:#9fb4d8;margin:10px 0 28px;font-style:italic}#name-input{display:block;width:280px;margin:0 auto 16px;padding:12px 16px;font-size:18px;text-align:center;color:#f5efdc;background:#00000080;border:1px solid #5a6b8c;border-radius:6px;outline:none}#name-input:focus{border-color:#c9a227}.btn-row{display:flex;gap:10px;width:280px;margin:0 auto 12px}.mode-btn{flex:1;padding:13px 8px;font-size:15px;font-weight:700;letter-spacing:2px;color:#1a1206;background:linear-gradient(180deg,#f0d060,#c9a227);border:1px solid #7a5c10;border-radius:6px;cursor:pointer;transition:transform .08s,box-shadow .2s}.mode-btn:hover{box-shadow:0 0 24px #f0d06099;transform:translateY(-1px)}.mode-btn:disabled{opacity:.5;cursor:wait}#code-input{width:90px;padding:12px 8px;font-size:16px;letter-spacing:3px;text-align:center;text-transform:uppercase;color:#f5efdc;background:#00000080;border:1px solid #5a6b8c;border-radius:6px;outline:none}#code-input:focus{border-color:#c9a227}.hint{margin-top:22px;color:#6e80a3;font-size:13px}.status{margin-top:10px;color:#e07050;font-size:13px;min-height:16px}#hud{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:5}#conn-badge{position:absolute;top:14px;right:16px;padding:5px 12px;font-size:12px;letter-spacing:2px;color:#cfe3ff;background:#0a1020a6;border:1px solid #3d4f75;border-radius:20px}.nameplate{position:absolute;transform:translate(-50%,-100%);color:#fff;font-size:13px;font-weight:700;text-shadow:0 1px 3px #000,0 0 8px rgba(0,0,0,.8);white-space:nowrap;pointer-events:none}#level-badge{position:absolute;top:14px;left:16px;width:34px;height:34px;line-height:34px;text-align:center;font-weight:700;font-size:16px;color:#f0d060;background:#0a1020bf;border:2px solid #c9a227;border-radius:50%}#bottom-bar{position:absolute;bottom:18px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:8px}.bars{width:340px;display:flex;flex-direction:column;gap:4px}.bar{position:relative;height:16px;background:#0000008c;border:1px solid #3d4f75;border-radius:4px;overflow:hidden}.bar span{position:absolute;top:0;right:0;bottom:0;left:0;text-align:center;font-size:11px;font-weight:700;line-height:16px;color:#fff;text-shadow:0 1px 2px #000}.bar>div{height:100%;width:100%;transition:width .15s}#hp-fill{background:linear-gradient(180deg,#6fdc5a,#2f9e2a)}.hp-bar.hurt #hp-fill{background:linear-gradient(180deg,#e05a4a,#9e2a2a)}#energy-fill{background:linear-gradient(180deg,#5ac8f0,#2a6a9e)}.xp-bar{height:6px}#xp-fill{background:linear-gradient(180deg,#c880ff,#7a40b0)}#action-bar{display:flex;gap:8px}.slot{position:relative;width:56px;height:56px;border:2px solid #5a6b8c;border-radius:8px;background:#0a1020bf;display:flex;align-items:center;justify-content:center;font-size:26px;-webkit-user-select:none;user-select:none}.slot .key{position:absolute;top:2px;left:5px;font-size:11px;font-weight:700;color:#9fb4d8}.slot .cd{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:6px;background:#000000b8;display:none;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:#fff}.slot.oncd .cd{display:flex}.slot.noenergy{border-color:#7a3030}.dmg-number{position:absolute;transform:translate(-50%,-50%);font-size:20px;font-weight:700;color:#fff;text-shadow:0 2px 4px #000;pointer-events:none;animation:dmg-float .9s ease-out forwards}.dmg-number.crit{color:#f0d060;font-size:28px}.dmg-number.heal{color:#6fdc5a}@keyframes dmg-float{0%{opacity:1;margin-top:0}to{opacity:0;margin-top:-60px}}.mob-plate{position:absolute;transform:translate(-50%,-100%);width:64px;pointer-events:none}.mob-plate .mob-name{text-align:center;font-size:11px;color:#ffb0a0;text-shadow:0 1px 2px #000}.mob-plate .mob-hp{height:5px;background:#0009;border-radius:3px;overflow:hidden}.mob-plate .mob-hp>div{height:100%;background:#e05a4a}#death-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#28000073}#death-overlay.hidden{display:none}#death-overlay h2{color:#ff6a5a;font-size:44px;letter-spacing:6px;text-shadow:0 2px 12px #000}#death-overlay p{color:#ffd0c8;margin-top:10px}#levelup-toast{position:absolute;top:30%;left:50%;transform:translate(-50%);font-size:40px;font-weight:700;letter-spacing:6px;color:#f0d060;text-shadow:0 0 24px rgba(240,208,96,.9),0 2px 4px #000;animation:levelup 2s ease-out forwards;pointer-events:none}#levelup-toast.hidden{display:none;animation:none}@keyframes levelup{0%{opacity:0;transform:translate(-50%) scale(.6)}15%{opacity:1;transform:translate(-50%) scale(1.15)}30%{transform:translate(-50%) scale(1)}80%{opacity:1}to{opacity:0}}