*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#e8c991;font-family:system-ui,sans-serif;color:#3b2924}#game{position:absolute;inset:0}canvas{display:block}header{position:absolute;top:24px;left:28px;pointer-events:none}header span{font-size:11px;letter-spacing:4px;font-weight:800;color:#943f30}h1{margin:4px 0;font-size:28px}p{margin:0;font-size:13px}aside{position:absolute;right:24px;top:26px;display:flex;gap:8px}button{border:1px solid #56362b33;border-radius:8px;background:#fff0d9e8;padding:10px 14px;color:#56362b;cursor:pointer;font-weight:600}footer{position:absolute;bottom:20px;left:28px;font-size:12px;background:#fff0d9cc;padding:8px 12px;border-radius:6px;pointer-events:none}#joystick{position:absolute;bottom:65px;left:28px;width:110px;height:110px;border-radius:50%;border:2px solid #63423655;background:#fff0d933;touch-action:none;-webkit-user-select:none;user-select:none}#stick{position:absolute;width:44px;height:44px;left:31px;top:31px;border-radius:50%;background:#7c4433aa;pointer-events:none}#error{position:absolute;top:45%;left:10%;right:10%;padding:20px;background:#fff0d9;border-radius:10px}@media(max-width:600px){header{top:16px;left:18px}h1{font-size:22px}aside{top:100px;right:16px;flex-direction:column}footer{left:18px;right:18px;font-size:10px}#joystick{left:18px}}#actions{position:absolute;right:24px;bottom:65px;display:flex;flex-wrap:wrap;gap:8px;max-width:500px;justify-content:flex-end}@media(max-width:600px){#actions{right:16px;bottom:70px;max-width:200px}#actions button{font-size:11px;padding:10px}aside{top:85px}}button:disabled{opacity:.45;cursor:default}button:focus-visible{outline:3px solid #bf633c;outline-offset:3px}button[aria-pressed=true]{background:#713c2d;color:#fff1d9;border-color:#713c2d}header{padding:12px 16px;background:#fff0d9d9;border:1px solid #56362b22;border-radius:12px;top:16px;left:16px}h1{font-size:22px}#stats{font-size:12px}.bars{display:flex;gap:6px;margin-top:8px}.bars meter,.bars progress{width:110px;height:10px;accent-color:#bd543c}#xp{accent-color:#d89b23}#notice{height:20px;margin-top:7px;font-weight:600;color:#943f30}#equipment{position:absolute;right:24px;bottom:122px;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;max-width:340px}#equipment button{font-size:12px;padding:9px 11px}#panel{position:absolute;inset:0;background:#30201966;display:grid;place-items:center;padding:20px;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:10}#panel[hidden]{display:none}.card{width:min(520px,100%);background:#fff0dc;border:2px solid #9b6140;border-radius:18px;padding:28px;box-shadow:0 20px 70px #31201955}.card h2{margin:0 0 14px;font-size:25px}.card p{line-height:1.7;margin-bottom:22px}.card button{display:block;width:100%;margin-top:10px;background:#79402f;color:#fff0dc;text-align:left;line-height:1.6}#error{z-index:20}@media(max-width:600px){header{top:10px;left:10px;right:10px;padding:10px 12px}header span{font-size:9px}h1{font-size:19px}#stats{font-size:10px}aside{top:152px;right:12px;flex-direction:row}aside button{font-size:11px;padding:8px}#equipment{bottom:185px;right:12px;max-width:180px}#equipment button{font-size:10px;padding:8px;min-height:40px}footer{font-size:9px}#actions{bottom:75px;right:12px;max-width:180px}#actions button{min-height:44px}.card{padding:20px}.card h2{font-size:21px}}