:root{--action-size:74px}
*{box-sizing:border-box;font-family:monospace;color:#e8f7ef}
body{margin:0;background:#071218;height:100vh;overflow:hidden}
canvas{display:block;margin:0 auto;border-radius:6px;position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;background:#001}
.overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.6);z-index:9999}
.hidden{display:none!important}
.panel{background:#0b2b22;padding:14px;border-radius:8px}
.modal{width:520px;max-width:94%}
#controls{position:fixed;left:12px;bottom:12px;display:flex;gap:14px;align-items:center;z-index:60;pointer-events:none}
#joystick{width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,0.03);border:2px solid rgba(255,255,255,0.04);position:relative;pointer-events:auto}
#stick{width:60px;height:60px;border-radius:50%;background:#9ad9b5;position:absolute;left:30px;top:30px}
#actions{display:flex;flex-direction:column;gap:10px;margin-left:8px;pointer-events:auto;position:fixed;right:12px;bottom:12px;z-index:70}
.big{width:var(--action-size);height:var(--action-size);border-radius:12px;font-size:26px;border:none;background:#7a2f2f;color:#fff}
.small{padding:6px 8px;border-radius:6px;background:#274d39;border:none;color:#fff}
#side{position:fixed;right:12px;top:12px;width:320px;z-index:40}
.hud{padding:12px}
#hpBarWrap,#manaBarWrap{width:200px;height:14px;background:#022;border-radius:6px;display:inline-block;margin-left:8px;vertical-align:middle}
#hpBar{height:100%;width:100%;background:#d9534f;border-radius:6px}
#manaBar{height:100%;width:100%;background:#f39c12;border-radius:6px}
#progressWrap{width:360px;height:16px;background:#063;border-radius:8px;overflow:hidden}
#progressBar{width:0;height:100%;background:#6fbf8b;transition:width 180ms}
#progressText{margin-top:6px;color:#cfeedd}
#bottomBar{position:fixed;left:50%;transform:translateX(-50%);bottom:8px;display:flex;gap:12px;align-items:center;z-index:70;background:rgba(2,8,6,0.55);padding:6px 10px;border-radius:10px}
.counter{color:#ffec61;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,0.9);font-size:16px}
.toast{position:fixed;left:50%;transform:translateX(-50%);top:12px;background:rgba(0,0,0,0.8);color:#fff;padding:8px 12px;border-radius:8px;z-index:12000;display:none;box-shadow:0 4px 12px rgba(0,0,0,0.6)}
#settingsPanel{position:fixed;left:12px;top:12px;z-index:11000;min-width:260px}
#shopContent div{color:#ffec61;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,0.9);margin-bottom:8px}
#shopContent button{margin-left:8px;background:#3b6e4f;color:#fff;padding:6px 8px;border-radius:6px;border:none}
@media(max-width:720px){ #side{display:none} canvas{width:100% !important;height:calc(100vw*9/16) !important;} }