:root{--ink: #eef0f4;--muted: #a8afbb;--panel: rgba(18, 20, 25, .72);--accent: #e0574f;--safe-t: env(safe-area-inset-top, 0px);--safe-r: env(safe-area-inset-right, 0px);--safe-b: env(safe-area-inset-bottom, 0px);--safe-l: env(safe-area-inset-left, 0px);color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#151619;color:var(--ink);font-family:DM Sans,system-ui,sans-serif;overscroll-behavior:none;-webkit-text-size-adjust:100%}body{-webkit-tap-highlight-color:transparent}#view{position:fixed;inset:0;width:100%;height:100%;display:block;outline:none;touch-action:none}#loading{position:fixed;inset:0;display:grid;place-items:center;background:radial-gradient(circle at 50% 35%,#2a2230,#121317 70%);transition:opacity .6s;z-index:5;padding:calc(16px + var(--safe-t)) calc(16px + var(--safe-r)) calc(16px + var(--safe-b)) calc(16px + var(--safe-l))}#loading.hidden{opacity:0;pointer-events:none}.card{width:min(520px,100%)}h1{font-weight:600;font-size:30px;margin:0 0 8px;letter-spacing:-.02em}h1 span{color:var(--muted);font-weight:400}.sub{color:var(--muted);line-height:1.5;margin:0 0 22px;font-size:14px}.track{height:6px;border-radius:3px;background:#ffffff14;overflow:hidden}#bar{height:100%;width:0;background:linear-gradient(90deg,#d0574e,#f0a25a);transition:width .2s}#stage{color:var(--muted);font-size:13px;margin-top:10px;font-variant-numeric:tabular-nums}.tip{display:none;color:#7d8492;font-size:12px;line-height:1.45;margin:14px 0 0}#hud{position:fixed;inset:0;pointer-events:none;z-index:3}#status{position:absolute;top:calc(12px + var(--safe-t));left:calc(12px + var(--safe-l));padding:7px 11px;background:var(--panel);border-radius:8px;font-size:12px;color:var(--muted);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-variant-numeric:tabular-nums;max-width:calc(100% - 24px - var(--safe-l) - var(--safe-r))}#help{position:absolute;bottom:calc(12px + var(--safe-b));left:calc(12px + var(--safe-l));padding:9px 12px;background:var(--panel);border-radius:8px;font-size:12.5px;line-height:1.65;color:var(--muted);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);max-width:calc(100% - 24px - var(--safe-l) - var(--safe-r))}#help b{color:var(--ink);font-weight:600}#error{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);background:#2a1416;border:1px solid #6b2b2e;color:#ffd8d6;padding:16px 20px;border-radius:10px;max-width:min(560px,calc(100% - 32px));z-index:10;line-height:1.5}#touch{display:none}body.is-touch #touch{display:block;position:absolute;inset:0;pointer-events:none}#lookpad{position:absolute;inset:0 0 0 38%;pointer-events:auto;touch-action:none;z-index:1}#stick{--stick: clamp(104px, 27vmin, 156px);position:absolute;left:calc(var(--safe-l) + clamp(10px,2vmin,22px));bottom:calc(var(--safe-b) + clamp(10px,2vmin,22px));width:var(--stick);height:var(--stick);border-radius:50%;pointer-events:auto;touch-action:none;z-index:3;background:radial-gradient(circle at 50% 42%,#ffffff1c,#ffffff0d 62%,#ffffff05);border:1px solid rgba(255,255,255,.18);box-shadow:inset 0 2px 22px #00000059,0 6px 22px #0000004d}#stickcross{position:absolute;inset:22%;border-radius:50%;border:1px dashed rgba(255,255,255,.12)}#knob{position:absolute;left:50%;top:50%;width:42%;height:42%;margin:-21% 0 0 -21%;border-radius:50%;background:radial-gradient(circle at 38% 32%,#fff,#ffffff9e 48%,#fff6);box-shadow:0 3px 14px #00000073,inset 0 -2px 6px #00000026;will-change:transform}#stick.active{border-color:#ffffff57;background:radial-gradient(circle at 50% 42%,#ffffff29,#ffffff12 62%,#ffffff08)}#actions{--btn: clamp(50px, 12.5vmin, 74px);--gap: clamp(8px, 1.5vmin, 14px);position:absolute;right:calc(var(--safe-r) + clamp(10px,2vmin,22px));bottom:calc(var(--safe-b) + clamp(10px,2vmin,22px));display:grid;grid-template-columns:var(--btn) var(--btn) calc(var(--btn) * 1.24);grid-template-rows:var(--btn) var(--btn);gap:var(--gap);align-items:center;justify-items:center;pointer-events:auto;z-index:3}.tbtn{width:var(--btn);height:var(--btn);border-radius:50%;border:1px solid rgba(255,255,255,.2);background:#14161c94;color:var(--ink);font:600 clamp(12px,3.4vmin,16px)/1 "DM Sans",system-ui,sans-serif;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;transition:transform .08s ease,background .12s ease,border-color .12s ease;display:grid;place-items:center;padding:0}.tbtn[data-act=run]{grid-area:1 / 1}.tbtn[data-act=interact]{grid-area:1 / 2}.tbtn[data-act=crouch]{grid-area:2 / 1}.tbtn[data-act=aim]{grid-area:2 / 2}.tbtn.jump{grid-area:1 / 3 / span 2 / 3;width:calc(var(--btn) * 1.24);height:calc(var(--btn) * 1.24);font-size:clamp(22px,6vmin,30px);background:#e0574f47;border-color:#e0574f80}.tbtn.pressed{transform:scale(.93);background:#ffffff38}.tbtn.jump.pressed{background:#e0574f8c}.tbtn.on{background:#e0574fcc;border-color:#ffffff73;color:#fff}#menuBtn{position:absolute;top:calc(var(--safe-t) + 10px);right:calc(var(--safe-r) + 12px);width:44px;height:44px;border-radius:13px;border:1px solid rgba(255,255,255,.18);background:#14161c9e;color:var(--ink);font-size:18px;line-height:1;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;z-index:4;display:grid;place-items:center}#menuBtn.pressed{background:#fff3}#sheet{position:absolute;left:0;right:0;bottom:0;z-index:6;pointer-events:auto;padding:12px calc(14px + var(--safe-r)) calc(12px + var(--safe-b)) calc(14px + var(--safe-l));background:#0f1014f0;border-top:1px solid rgba(255,255,255,.09);border-radius:18px 18px 0 0;box-shadow:0 -18px 50px #00000073;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);max-height:76vh;overflow-y:auto;-webkit-overflow-scrolling:touch;transform:translateY(101%);transition:transform .26s cubic-bezier(.2,.8,.2,1);visibility:hidden}#sheet.open{transform:none;visibility:visible}.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:10px;position:sticky;top:-12px;background:inherit;padding-top:6px;z-index:1}.sheet-head b{font-size:15px;font-weight:600}.sheet-body section{padding:10px 0 4px;border-top:1px solid rgba(255,255,255,.06)}.sheet-body section:first-child{border-top:0}.sheet-body h3{margin:2px 0 10px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#848b99}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:7px}.row{display:flex;flex-wrap:wrap;gap:7px}.chip{font:500 13px/1 DM Sans,system-ui,sans-serif;color:var(--ink);padding:11px 13px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:#ffffff0f;text-align:left;touch-action:manipulation;user-select:none;-webkit-user-select:none}.chip.pressed{background:#ffffff29}.chip.on{background:#e0574fd1;border-color:#fff6;color:#fff}.chip.subtle{background:#ffffff1a;padding:9px 12px;font-size:12.5px}#hint p{margin:0 0 8px;font-size:12.5px;line-height:1.55;color:var(--muted)}#hint b{color:var(--ink)}#toast{position:absolute;left:50%;top:calc(var(--safe-t) + 14px);transform:translate(-50%,-8px);padding:8px 14px;border-radius:10px;background:#14161ce0;border:1px solid rgba(255,255,255,.12);font-size:12.5px;color:var(--ink);opacity:0;transition:opacity .18s,transform .18s;pointer-events:none;z-index:7;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);max-width:calc(100% - 32px);text-align:center}#toast.show{opacity:1;transform:translate(-50%)}body.is-touch #status{font-size:11px;padding:6px 9px;top:calc(var(--safe-t) + 10px);left:calc(var(--safe-l) + 10px);max-width:calc(100% - 76px)}body.is-touch #help{display:none}body.is-touch #help.show{display:block;left:calc(var(--safe-l) + 8px);right:calc(var(--safe-r) + 8px);bottom:calc(var(--safe-b) + 8px);max-width:none;max-height:58vh;overflow-y:auto;font-size:12px;line-height:1.55;z-index:6;background:#0f1014f2;border:1px solid rgba(255,255,255,.1);-webkit-overflow-scrolling:touch}body.is-touch .tip{display:block}@media(pointer:coarse){#help{display:none}}@media(max-height:520px)and (orientation:landscape){body.is-touch #stick{--stick: clamp(88px, 22vh, 118px)}#actions{--btn: clamp(42px, 11vh, 58px);--gap: 7px}body.is-touch #status{font-size:10.5px}#sheet{max-height:92vh;border-radius:0;width:min(420px,62%);inset:0 auto 0 0;padding-top:calc(10px + var(--safe-t))}#sheet.open{transform:none}#sheet:not(.open){transform:translate(-101%)}}@media(max-width:420px){.grid{grid-template-columns:repeat(auto-fill,minmax(92px,1fr))}h1{font-size:24px}.sub{font-size:13px}}