:root{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:#e7e4cd;background:#171714;font-size:16px;color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;overflow:hidden}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;border:1px solid #9d9b7f;background:#d3c273;color:#171714;padding:14px 20px;cursor:pointer;border-radius:0}
button:disabled{background:#625f4b;color:#e7e4cd;cursor:wait}
button:focus-visible,a:focus-visible{outline:2px solid #fff;outline-offset:5px}
a{color:#b9b69c;font-size:13px}
[hidden]{display:none!important}
#stage{height:100dvh;width:100vw;display:grid;place-items:center;position:relative;background:#090a08}
#canvas{display:block;max-width:100%;max-height:100%;width:min(100vw,160dvh);height:auto;aspect-ratio:8/5;outline:none;image-rendering:pixelated;touch-action:none}
#launcher{position:absolute;inset:0;background:#171714;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;text-align:center;gap:12px}
h1{font-size:48px;letter-spacing:-3px;margin:0 0 12px}
p{line-height:1.6;margin:0}
.controls{color:#b9b69c;margin:12px 0}
#status{font-size:13px;max-width:580px;min-height:22px;margin:8px 0}
#restart{position:absolute;right:16px;top:16px;padding:9px 12px;font-size:13px;background:#171714;color:#e7e4cd}
#finish{position:absolute;right:16px;top:62px;padding:9px 12px;font-size:13px;background:#171714;color:#e7e4cd}
#dev-badge{position:absolute;bottom:16px;left:16px;padding:4px 8px;background:#171714;font-size:12px}
#outside-canvas{display:block;width:100%;height:100%;outline:none;touch-action:none}
.outside #hud{background:#171714b0;padding:4px 8px}
#hud{position:absolute;left:16px;top:max(16px,env(safe-area-inset-top));pointer-events:none;text-shadow:1px 1px #090a08,-1px -1px #090a08}
#health,#equipment,#group{font-size:13px}
#reticle{position:absolute;left:50%;top:50%;width:3px;height:3px;background:#e7e4cd;outline:1px solid #171714;transform:translate(-50%,-50%);pointer-events:none}
#held-wrench{position:absolute;left:58%;bottom:8%;height:clamp(88px,24vh,180px);width:auto;image-rendering:pixelated;pointer-events:none;transform:rotate(-18deg);transform-origin:bottom center}
#held-wrench.charging{transform:translateY(14px) rotate(12deg)}
#held-wrench.working{animation:ratchet .32s ease-in-out infinite alternate}
@keyframes ratchet{from{transform:rotate(-35deg)}to{transform:rotate(5deg)}}
#prompt,#message{position:absolute;left:50%;transform:translateX(-50%);text-align:center;background:#171714;padding:4px 9px;pointer-events:none;max-width:90vw;width:max-content}
#prompt{top:62%;font-size:16px}
#message{bottom:24px;font-size:13px}
#result{position:absolute;top:20%;left:0;right:0;text-align:center;background:#171714;padding:16px}
#touch{position:absolute;bottom:max(16px,env(safe-area-inset-bottom));left:16px;right:16px;display:flex;justify-content:space-between;align-items:end;pointer-events:none}
#touch button{pointer-events:auto;touch-action:none;min-width:48px;min-height:48px;padding:8px;background:#24251e;color:#e7e4cd;font-size:16px;user-select:none;-webkit-user-select:none}
.move-pad{display:grid;grid-template-columns:repeat(3,48px);gap:4px}
.move-pad button:first-child{grid-column:2}
.move-pad button:nth-child(2){grid-column:1}
.action-pad{display:grid;grid-template-columns:repeat(3,auto);gap:4px}
@media (pointer:coarse){#hud{max-width:calc(100vw - 112px)}.controls{font-size:13px}#restart{top:max(12px,env(safe-area-inset-top))}#message{top:140px;bottom:auto}#prompt{top:52%}#dev-badge{top:108px;bottom:auto}.outside #dev-badge{top:76px}}
@media (pointer:coarse) and (max-width:560px){.action-pad{grid-template-columns:repeat(2,72px)}#touch .action-pad button{font-size:13px}h1{margin-bottom:0}#launcher{gap:6px}.controls{margin:6px 0}}