:root{color-scheme:dark;font-family:system-ui,sans-serif;color:#e6f6fa;background:#102c36}*{box-sizing:border-box}html,body,#game{margin:0;width:100%;height:100%;overflow:hidden}#game{position:fixed;inset:0;background:#102c36}button,select,input{font:inherit}button{min-height:46px;border:1px solid #edc434;color:#f0d55f;background:#123440e8;border-radius:8px;padding:10px 18px;cursor:pointer;touch-action:none}button:focus-visible,select:focus-visible{outline:3px solid white;outline-offset:3px}button:active,button.active{background:#edc434;color:#132b31}button:disabled{opacity:.55;cursor:wait}[hidden]{display:none!important}canvas{display:block;width:100%;height:100%;outline:none;touch-action:none}.sheet{position:absolute;inset:0;display:grid;place-items:center;background:#0a232ba8;overflow:auto;padding:24px}.sheet section{width:min(440px,100%);padding:28px;background:#09212ef2;border:2px solid #d7b938;border-radius:12px;box-shadow:0 20px 80px #0008}.eyebrow{font-size:12px;letter-spacing:.14em;color:#aed2dc}h1{font-size:clamp(32px,6vw,52px);letter-spacing:.06em;margin:12px 0;color:#ffdc4b}p{line-height:1.5}.primary{width:100%;font-weight:800;font-size:20px;background:#ffd03b;color:#112b34}.sheet label{display:grid;grid-template-columns:1fr 1.4fr;gap:12px;align-items:center;margin:14px 0;font-size:14px}select{min-width:0;padding:10px;background:#1c424f;color:white;border:1px solid #467485;border-radius:5px}#controls{color:#b8d3d8;font-size:14px}#error{color:#ffb6a8;overflow-wrap:anywhere}progress{width:100%;accent-color:#ffd03b;height:14px;margin-bottom:20px}#toolbar{position:absolute;top:max(10px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));display:flex;gap:8px;align-items:center}#toolbar button{font-size:20px;width:46px;padding:6px}#fps{font-size:12px;color:#c5e1e4}#touch{position:absolute;inset:0;pointer-events:none;touch-action:none;user-select:none;-webkit-user-select:none}#look-zone{position:absolute;inset:0 0 0 38%;pointer-events:auto;touch-action:none}#stick{position:absolute;left:max(24px,env(safe-area-inset-left));bottom:max(28px,env(safe-area-inset-bottom));width:136px;height:136px;border:2px solid #d9c76688;border-radius:50%;background:#0a283466;pointer-events:auto;touch-action:none}#knob{display:block;position:absolute;left:42px;top:42px;width:48px;height:48px;border:2px solid #ffdc63;border-radius:50%;background:#73a5b477}.actions{position:absolute;right:max(14px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(3,64px);gap:8px;align-items:end}.actions button{min-height:58px;padding:6px;font-size:11px;font-weight:800;pointer-events:auto}.actions #jump,.actions #fire{min-height:70px;border-width:2px}.actions #fire{background:#92521ddd}.utility{position:absolute;top:max(14px,env(safe-area-inset-top));left:128px;display:flex;gap:8px}.utility button{pointer-events:auto;min-height:44px;font-size:11px;padding:8px 12px}#rotate{position:absolute;inset:0;background:#102c36;display:grid;place-items:center;text-align:center;padding:40px;font-size:22px;color:#ffe17b;z-index:5}@media(max-height:520px){.sheet{padding:12px}.sheet section{padding:18px;width:min(560px,95%)}.eyebrow{margin:0}h1{font-size:30px;margin:6px 0}#controls{margin:8px 0;font-size:12px}#options{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}#options label{margin:8px 0}#options button{font-size:12px}.actions{grid-template-columns:repeat(3,58px);gap:6px}.actions button{min-height:48px}.actions #jump,.actions #fire{min-height:56px}#stick{width:120px;height:120px}#knob{left:34px;top:34px}}
/* Keep touch targets fixed when contextual actions appear or disappear. */
.actions{
 grid-template-areas:"interact boost down" "secondary jump fire";
 grid-template-rows:58px 70px;
}
.actions #interact{grid-area:interact}
.actions #boost{grid-area:boost}
.actions #down{grid-area:down}
/* Wrench and airbrake are mutually exclusive on foot and in the ship. */
.actions #melee,.actions #brake{grid-area:secondary}
.actions #jump{grid-area:jump}
.actions #fire{grid-area:fire}
@media(max-height:520px){.actions{grid-template-rows:48px 56px}}