*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#0b0d0a;font-family:"Courier New",monospace;color:#c8ffcc;touch-action:none;-webkit-user-select:none;user-select:none}
#c{position:fixed;inset:0;width:100%;height:100%;display:block}
#hud{position:fixed;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:calc(8px + env(safe-area-inset-top)) 10px 8px;pointer-events:none;gap:8px;flex-wrap:wrap}
#title{font-weight:bold;font-size:18px;letter-spacing:2px;color:#f2c230;text-shadow:0 1px 3px #000}#upd{font-size:11px;color:#9fdca6;letter-spacing:0;display:block}
#btns{display:flex;gap:6px;pointer-events:auto}
button{font:bold 13px "Courier New",monospace;background:#1d2419e6;color:#7dff8a;border:2px solid #f2c230;border-radius:8px;padding:8px 11px;cursor:pointer}
button.on{background:#f2c230;color:#111}
#skip{position:fixed;right:14px;bottom:calc(18px + env(safe-area-inset-bottom));font-size:15px;z-index:5}
#joy{position:fixed;left:22px;bottom:calc(26px + env(safe-area-inset-bottom));width:120px;height:120px;border-radius:50%;background:#0008;border:2px solid #f2c23088;touch-action:none}
#knob{position:absolute;left:40px;top:40px;width:40px;height:40px;border-radius:50%;background:#f2c230cc}
#info{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom));width:min(92vw,420px);background:#0b1a0ef0;border:2px solid #7dff8a;border-radius:10px;padding:12px 34px 12px 14px;font-size:13px;line-height:1.4}
#iname{color:#f2c230;font-size:16px}#irole{color:#9fdca6}#istatus{margin-top:6px;color:#c8ffcc}
#iclose{position:absolute;right:6px;top:6px;padding:2px 8px;border-width:1px}
#tip{position:fixed;left:0;right:0;bottom:calc(6px + env(safe-area-inset-bottom));text-align:center;font-size:11px;color:#9fdca6aa;pointer-events:none}
#err{position:fixed;left:8px;top:70px;background:#400;color:#fff;padding:6px;font-size:11px;max-width:90vw}
.lbl{position:fixed;transform:translate(-50%,-100%);font:bold 11px "Courier New",monospace;color:#fff;background:#000a;padding:1px 5px;border-radius:4px;pointer-events:none;white-space:nowrap}