*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;height:100%;overflow:hidden;background:#1b1b1b;font-family:system-ui,sans-serif;color:#fff;touch-action:none}
#c{position:fixed;inset:0;width:100%;height:100%}
#hud{position:fixed;top:0;left:0;right:0;padding:env(safe-area-inset-top) 8px 4px;background:linear-gradient(#000c,#0000);pointer-events:none}
#hud *{pointer-events:auto}#top{display:flex;gap:10px;align-items:center;font-size:14px}#top span{background:#0008;padding:3px 8px;border-radius:9px}
#gear{margin-left:auto;width:46px;height:46px;font-size:22px;border-radius:12px;border:0;background:#ffd100;color:#000}
#bars{display:flex;gap:6px;margin-top:4px}.bar{flex:1;font-size:11px;background:#0009;border-radius:8px;padding:2px 5px}.bar i{display:block;height:6px;border-radius:3px;margin-top:2px}
#obj{font-size:12px;margin-top:4px;background:#0009;border-radius:8px;padding:3px 8px;display:inline-block}
#pad{position:fixed;left:12px;bottom:calc(14px + env(safe-area-inset-bottom));display:grid;grid-template:repeat(3,62px)/repeat(3,62px);gap:4px}
#pad button{border:0;border-radius:16px;background:#fff8;font-size:24px}#pad [data-d=u]{grid-area:1/2}#pad [data-d=l]{grid-area:2/1}#pad [data-d=r]{grid-area:2/3}#pad [data-d=d]{grid-area:3/2}
#act{position:fixed;right:14px;bottom:calc(30px + env(safe-area-inset-bottom));min-width:120px;height:72px;border:0;border-radius:36px;background:#d62718;color:#fff;font-size:18px;font-weight:700;padding:0 18px}
#toast{position:fixed;left:50%;top:30%;transform:translateX(-50%);background:#000d;padding:10px 16px;border-radius:14px;max-width:86%;text-align:center;opacity:0;transition:.3s;pointer-events:none}#toast.on{opacity:1}
#modal{position:fixed;inset:0;background:#000a;display:flex;align-items:flex-end;justify-content:center;padding:0}
#modal[hidden],#act[hidden]{display:none}
#card{background:#fffaf0;color:#222;width:100%;max-width:520px;max-height:88vh;overflow:auto;border-radius:22px 22px 0 0;padding:16px 16px calc(16px + env(safe-area-inset-bottom));border-top:8px solid;border-image:linear-gradient(90deg,#0b6b3a 25%,#ffd100 25% 50%,#d62718 50% 75%,#111 75%) 1}
#card h2{margin:0 0 6px}#card p{margin:4px 0 10px;font-size:15px}
#card button,#card input,#card textarea{width:100%;min-height:52px;margin:4px 0;border-radius:12px;border:2px solid #0b6b3a;font-size:16px;padding:8px;text-align:left;background:#fff;color:#111}
#card button small{display:block;color:#555;font-weight:400}#card button{font-weight:700}#card button.p{background:#0b6b3a;color:#fff;text-align:center}#card button.p small{color:#cfe}
#card button:disabled{opacity:.45}.sw{display:flex;gap:6px}.sw button{min-height:46px;text-align:center;padding:0}.sw .on{outline:4px solid #d62718}
#card textarea{height:90px;font-size:11px}
#joy{position:fixed;left:16px;bottom:calc(18px + env(safe-area-inset-bottom));width:130px;height:130px;border-radius:50%;background:#fff5;border:3px solid #fff9;touch-action:none}#knob{position:absolute;left:35px;top:35px;width:60px;height:60px;border-radius:50%;background:#fffd;pointer-events:none}#modal.in{background:transparent;pointer-events:none}#modal.in #card{pointer-events:auto;max-height:52vh}