*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#000;color:#bbb;font-family:monospace;overscroll-behavior:none}
button,input{font:inherit;touch-action:manipulation}button{color:inherit;user-select:none;-webkit-user-select:none;cursor:pointer}
button:focus-visible,canvas:focus-visible,.pad:focus-visible{outline:2px solid #fcfcfc;outline-offset:3px}
#console{position:relative;display:grid;grid-template-columns:1fr auto 1fr;grid-template-rows:1fr 38px;width:100%;height:100dvh;align-items:center;justify-items:center;padding:env(safe-area-inset-top) max(8px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(8px,env(safe-area-inset-left));gap:0 12px}
#screen{grid-column:2;grid-row:1;position:relative;height:min(calc(100dvh - 44px),720px);aspect-ratio:256/240;max-width:calc(100vw - 320px)}
canvas{display:block;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges;touch-action:none}
#screen-start{position:absolute;inset:0;background:transparent;border:0}#screen-start[hidden]{display:none}
.move-control{grid-column:1;grid-row:1;align-self:end;justify-self:center;width:min(100%,180px);min-width:144px;margin-bottom:12px}
.move-label{display:block;margin-bottom:7px;color:#aab7ae;text-align:center;font-size:11px}
.pad{width:100%;min-width:90px;height:174px;margin:0;padding:0;position:relative;background:#101613;border:1px solid #53645a;border-radius:14px;overflow:hidden;cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none}
.pad.tracking{background:#171f1a;border-color:#aabca9;cursor:grabbing}
.direction-cue{position:absolute;font:20px/1 monospace;color:#8b9e91;pointer-events:none;z-index:2}
.cue-up{left:50%;top:10px;transform:translateX(-50%)}.cue-down{left:50%;bottom:10px;transform:translateX(-50%)}.cue-left{left:10px;top:50%;transform:translateY(-50%)}.cue-right{right:10px;top:50%;transform:translateY(-50%)}
.pad[data-direction="up"] .cue-up,.pad[data-direction="down"] .cue-down,.pad[data-direction="left"] .cue-left,.pad[data-direction="right"] .cue-right{color:#f1f4de;font-weight:bold;text-shadow:0 0 8px #becd9d}
.drag-base{position:absolute;width:76px;height:76px;left:50%;top:50%;transform:translate(-50%,-50%);border:1px solid #566c5e;border-radius:50%;pointer-events:none;background:#ffffff03}
.drag-thumb{position:absolute;width:34px;height:34px;left:50%;top:50%;transform:translate(-50%,-50%);background:#3b5143;border:2px solid #97ae9c;border-radius:50%;pointer-events:none;box-shadow:0 2px 0 #0008}
.drag-thumb:after{content:'';position:absolute;inset:10px 8px;border-top:1px solid #bacdbb;border-bottom:1px solid #bacdbb}
.drag-vector{display:none;position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.drag-vector line{stroke:#9ab392;stroke-width:2}
.pad.tracking .drag-thumb{background:#586f57;border-color:#dfebcf}.pad.tracking .drag-vector{display:block}
.ab{grid-column:3;grid-row:1;display:flex;align-self:end;margin-bottom:56px;gap:16px;transform:rotate(-15deg)}
.ab button{width:62px;height:62px;border-radius:50%;border:2px solid #a1343f;background:#761b2a;color:#e7c1bc;font-size:24px;box-shadow:0 4px #2a1117;transform:rotate(15deg);position:relative;touch-action:none}
.ab span{display:block;font-size:9px;letter-spacing:1px;margin-top:2px}.ab button.pressed{filter:brightness(1.7);box-shadow:none}
.system{grid-column:2;grid-row:2;display:flex;gap:23px;align-self:start}.system button{border:0;border-radius:10px;background:#252525;font-size:9px;letter-spacing:1px;padding:4px 12px;position:relative}.system span{position:absolute;top:22px;left:0;right:0;font-size:8px;letter-spacing:0;color:#5f5f5f;white-space:nowrap}
nav{position:absolute;right:max(12px,env(safe-area-inset-right));top:10px;display:flex;align-items:center;gap:10px;z-index:4}nav button{background:#0008;border:1px solid #333;color:#999;font-size:10px;min-width:26px;height:26px}#fullscreen{font-size:18px}#label{display:none}
/* Fixed setting name; native checked state; position and text indicate state. */
.sound-control{display:inline-flex;align-items:center;gap:8px;min-width:124px;min-height:44px;padding:0 6px;cursor:pointer;touch-action:manipulation;border-radius:6px}.sound-control:hover{background:#161c19}#sound-label{font-size:12px;color:#e2e7dc;white-space:nowrap;flex-shrink:0}
.switch-ui{position:relative;display:block;width:56px;height:28px;flex:none}#sound{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;opacity:0;z-index:2;cursor:pointer}
.switch-track{position:absolute;inset:0;border:1px solid #89978e;border-radius:16px;background:#303632;pointer-events:none}.switch-thumb{position:absolute;left:3px;top:2px;width:22px;height:22px;border-radius:50%;background:#f2f3ec;transform:translateX(0)}#sound-value{position:absolute;right:6px;top:6px;font:bold 10px/14px monospace;color:#f2f3ec}
#sound:checked+.switch-track{background:#315b43;border-color:#a5c2ad}#sound:checked+.switch-track .switch-thumb{transform:translateX(26px)}#sound:checked+.switch-track #sound-value{left:7px;right:auto}#sound:focus-visible+.switch-track{outline:2px solid #fcfcfc;outline-offset:4px}
#instructions{position:absolute;z-index:8;left:50%;top:50%;transform:translate(-50%,-50%);padding:22px;background:#111;border:2px solid #888;max-width:92vw;max-height:90dvh;overflow:auto;width:380px;font:12px/2 monospace}#instructions[hidden]{display:none}#close-help{border:1px solid #999;background:#222;padding:6px 20px}body.help-open #screen-start{pointer-events:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(min-width:1050px){.ab{margin-right:20px}}
@media(orientation:portrait){#console{grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr 40px;padding-top:56px;gap:15px 10px;align-content:start}#screen{grid-area:1/1/2/3;height:auto;width:min(calc(100vw - 16px),calc((100dvh - 250px)*256/240));max-width:none}.move-control{grid-area:2/1;align-self:start;margin:4px 0 0}.ab{grid-area:2/2;align-self:start;margin:40px 0 0}.system{grid-area:3/1/4/3;align-self:center;margin-bottom:22px}nav{top:5px;left:12px;justify-content:flex-end}#label{display:block;margin-right:auto;font-size:9px;color:#888;order:-1}}
@media(orientation:landscape) and (max-height:550px){#console{grid-template-rows:1fr 30px;gap:0 8px}#screen{height:calc(100dvh - 32px);max-width:calc(100vw - 290px)}.pad{height:160px}.move-label{margin-bottom:5px}.ab{gap:12px;margin-bottom:36px}.ab button{width:56px;height:56px}.system{align-self:center}.system span{display:none}nav{gap:8px;top:8px}}
@media(orientation:landscape) and (max-width:680px){#screen{max-width:calc(100vw - 235px)}.pad{height:144px}.drag-base{width:66px;height:66px}.direction-cue{font-size:18px}.cue-up{top:7px}.cue-down{bottom:7px}.cue-left{left:7px}.cue-right{right:7px}.ab{gap:6px}.ab button{width:46px;height:46px}}
@media(orientation:landscape) and (max-width:740px){nav{right:8px;width:128px;flex-wrap:wrap;justify-content:flex-end;gap:6px}}
@media(orientation:portrait) and (max-width:360px){#label{display:none}}
@media(forced-colors:active){.switch-track,.drag-base,.drag-thumb{border-color:ButtonText}.switch-thumb{background:ButtonText}#sound:checked+.switch-track{background:Highlight}#sound-value{color:ButtonText}}

/* One fixed-center control: both dragging and the four visible buttons use its axes. */
button.direction-cue{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid #43564a;border-radius:8px;background:#17251c;color:#b7c9bb;pointer-events:auto;touch-action:none;cursor:pointer;z-index:2}
button.cue-up{top:0}button.cue-down{bottom:0}button.cue-left{left:0}button.cue-right{right:0}
.pad[data-direction="up"] .cue-up,.pad[data-direction="down"] .cue-down,.pad[data-direction="left"] .cue-left,.pad[data-direction="right"] .cue-right{background:#526844;color:#fffde8;border-color:#cbdbad;box-shadow:inset 0 0 0 1px #cbdbad;text-shadow:none}
.drag-base{width:74px;height:74px;background:#1c2b21}.drag-grip{position:absolute;left:calc(50% + var(--thumb-x,0px));top:calc(50% + var(--thumb-y,0px));width:48px;height:48px;transform:translate(-50%,-50%);z-index:3;cursor:grab;touch-action:none}.drag-grip .drag-thumb{left:50%;top:50%;width:36px;height:36px;pointer-events:none}.pad.tracking .drag-grip{cursor:grabbing}
.pad[aria-disabled="true"]{opacity:.45}.pad[aria-disabled="true"] button{cursor:default}
@media(orientation:landscape) and (max-width:740px){#screen{height:min(calc(100dvh - 32px),calc((100vw - 320px)*240/256));max-width:none}}

/* Gameplay controls are held/dragged, never text-selection or browser-callout targets. */
.move-control,.move-control *,.ab,.ab *{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}
.move-control{touch-action:none}