*{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;background:#05050a;color:#e6faff;font-family:Courier New,monospace;touch-action:none}#game-canvas{display:block;width:100vw;height:100vh}#hud{position:fixed;top:16px;left:16px;z-index:10;padding:10px 14px;background:#05050f8c;border:1px solid #00eaff;border-radius:4px;box-shadow:0 0 12px #00eaff59;pointer-events:none}#hud-title{font-size:14px;font-weight:700;color:#00eaff;letter-spacing:2px}#hud-hint{font-size:12px;color:#b8f4ff;margin-top:4px}#hud-scene{font-size:12px;color:#ff00c8;margin-top:4px;letter-spacing:1px}#hud-level{font-size:12px;color:#fc0;margin-top:4px;letter-spacing:1px}#hud-exp{font-size:11px;color:#8df;margin-top:2px}#hud-hp{font-size:12px;color:#0f8;margin-top:4px;letter-spacing:1px;font-weight:700}#hud-floor{position:fixed;top:16px;right:24px;z-index:10;font-size:48px;font-weight:700;font-family:Courier New,monospace;color:#00eaff;text-shadow:0 0 10px #00eaff,0 0 20px #00eaff,0 0 40px #0088cc,0 0 60px #005588;pointer-events:none}#death-overlay{display:none;position:fixed;inset:0;z-index:100;justify-content:center;align-items:center;background:#140000d9}.death-box{text-align:center;padding:40px 50px;background:#1e0505f2;border:2px solid #ff2244;border-radius:12px;box-shadow:0 0 40px #ff224480}.death-title{font-size:40px;font-weight:700;color:#f24;text-shadow:0 0 30px #ff2244;margin-bottom:8px}.death-subtitle{font-size:18px;color:#f89;margin-bottom:24px}.death-btn{display:block;width:100%;padding:16px 32px;margin:12px 0;border:none;border-radius:8px;font-family:Courier New,monospace;font-size:20px;font-weight:700;cursor:pointer;background:#f36;color:#fff;box-shadow:0 0 20px #ff336680;transition:transform .1s,box-shadow .1s}.death-btn:active{transform:scale(.96)}#levelup-overlay{display:none;position:fixed;inset:0;z-index:100;justify-content:center;align-items:center;background:#0009}.levelup-box{text-align:center;padding:30px 40px;background:#0a0a1ef2;border:2px solid #ffcc00;border-radius:12px;box-shadow:0 0 40px #fc06}.levelup-title{font-size:36px;font-weight:700;color:#fc0;text-shadow:0 0 20px #ffcc00;margin-bottom:8px}.levelup-subtitle{font-size:16px;color:#b8f4ff;margin-bottom:20px}.levelup-choices{display:flex;gap:16px;justify-content:center}.levelup-btn{padding:18px 24px;border:none;border-radius:8px;font-family:Courier New,monospace;font-size:18px;font-weight:700;color:#fff;cursor:pointer;transition:transform .1s,box-shadow .1s;box-shadow:0 0 15px #fff3}.levelup-btn:active{transform:scale(.94)}.levelup-btn:hover{box-shadow:0 0 25px #ffffff80}#fade-overlay{display:none;position:fixed;inset:0;z-index:90;background:#000;opacity:0;pointer-events:none}.mobile-only{display:none}@media (pointer: coarse),(max-width: 768px){.mobile-only{display:block}}#joystick-container{position:fixed;left:28px;bottom:28px;z-index:30;pointer-events:none;user-select:none;-webkit-user-select:none;touch-action:none}#joystick-base{position:relative;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle at 50% 50%,#001e328c,#05050fa6);border:2px solid #00eaff;box-shadow:0 0 18px #00eaff73,inset 0 0 18px #00eaff40;pointer-events:auto;touch-action:none}#joystick-knob{position:absolute;top:50%;left:50%;width:60px;height:60px;border-radius:50%;background:#ffffff59;border:2px solid rgba(255,255,255,.8);box-shadow:0 0 12px #fff9;transform:translate(-50%,-50%);pointer-events:none;transition:transform .08s ease-out}#action-buttons{position:fixed;right:24px;bottom:28px;z-index:30;display:none;gap:16px;align-items:flex-end;user-select:none;-webkit-user-select:none;touch-action:none}@media (pointer: coarse),(max-width: 768px){#action-buttons{display:flex}}#action-buttons button{width:80px;height:80px;border-radius:50%;font-family:Courier New,monospace;font-size:32px;font-weight:700;cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent;transition:transform .08s,box-shadow .08s,background .08s}#btn-attack{border:3px solid #ff3366;background:#ff336647;color:#f57;box-shadow:0 0 18px #ff33668c,inset 0 0 12px #f366}#btn-attack:active{transform:scale(.92);background:#ff33668c;box-shadow:0 0 28px #ff3366e6,inset 0 0 18px #ff3366b3}#btn-dodge{width:64px;height:64px;font-size:26px;border:3px solid #ffcc00;background:#ffcc0038;color:#fd4;box-shadow:0 0 14px #ffcc0080,inset 0 0 10px #ffcc0059}#btn-dodge:active{transform:scale(.92);background:#ffcc0080;box-shadow:0 0 24px #ffcc00d9,inset 0 0 16px #fc09}#skill-slots{position:fixed;left:50%;bottom:28px;transform:translate(-50%);z-index:30;display:flex;gap:14px;user-select:none;-webkit-user-select:none;touch-action:none}.skill-slot{position:relative;width:72px;height:72px;border-radius:50%;border:3px solid #00eaff;background:#05050f8c;color:#00eaff;font-family:Courier New,monospace;font-weight:700;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .08s,box-shadow .08s,background .08s;overflow:hidden;display:flex;align-items:center;justify-content:center}.skill-slot:active{transform:scale(.94)}.skill-slot .skill-label{font-size:30px;letter-spacing:1px;z-index:2;pointer-events:none;text-shadow:0 0 6px currentColor}.skill-slot .skill-hotkey{position:absolute;top:-3px;right:-3px;width:22px;height:22px;border-radius:50%;background:#000000d9;border:1px solid currentColor;color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:3}.skill-slot .skill-cooldown-arc{position:absolute;inset:0;border-radius:50%;background:transparent;pointer-events:none;z-index:1}.skill-slot .skill-cooldown-text{position:absolute;bottom:4px;left:0;right:0;text-align:center;font-size:11px;color:#fff;text-shadow:0 0 4px #000;pointer-events:none;z-index:4}.skill-slot.on-cooldown{filter:grayscale(.6) brightness(.75)}.skill-slot.flash-cast{animation:skill-cast-flash .35s ease-out}.skill-slot.flash-blocked{animation:skill-blocked-shake .35s ease-out}@keyframes skill-cast-flash{0%{transform:scale(1);box-shadow:0 0 0 0 currentColor}40%{transform:scale(1.18);box-shadow:0 0 30px currentColor,inset 0 0 18px currentColor}to{transform:scale(1)}}@keyframes skill-blocked-shake{0%,to{transform:translate(0)}20%{transform:translate(-4px)}40%{transform:translate(4px)}60%{transform:translate(-3px)}80%{transform:translate(3px)}}@media (pointer: coarse),(max-width: 768px){#skill-slots{bottom:120px;gap:12px}.skill-slot{width:64px;height:64px}.skill-slot .skill-label{font-size:26px}}