:root{color-scheme:dark;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;color:#b6c6c5;background:#121b23}*{box-sizing:border-box}body{margin:0;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;background:radial-gradient(ellipse at 50% 20%,#30404b 0,#17232d 52%,#101820 100%)}button{font:inherit;color:inherit;cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}button:focus-visible,canvas:focus-visible{outline:3px solid #f6c773;outline-offset:5px}.console{width:min(1060px,100%);padding:26px 32px 22px;background:linear-gradient(140deg,#33434b,#29363f 65%,#223039);border:1px solid #4a5c63;border-radius:30px;box-shadow:0 18px 0 #0c151c,0 28px 60px #050a0c80,inset 0 2px 0 #71818655}.topline,.bottomline{display:flex;align-items:center;justify-content:space-between;gap:12px}.brand{font-size:24px;font-weight:900;letter-spacing:3px;color:#dce7df}.brand i{font-size:13px;letter-spacing:2px;color:#efba65;font-style:normal}.edition{font-size:12px;letter-spacing:2px;color:#91a7ab}.machine{display:grid;grid-template-columns:1fr minmax(0,480px) 1fr;align-items:center;gap:30px;margin:25px 0 22px}.controls{display:flex;flex-direction:column;align-items:center;gap:22px}.control-title{font-size:12px;letter-spacing:3px;color:#9bb0b5}.dpad{width:138px;height:138px;display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);filter:drop-shadow(0 6px 0 #101b21)}.dpad>*{background:#132028;border:1px solid #405159}.pad-top{grid-area:1/2;border-radius:8px 8px 0 0;border-bottom:0}.pad-left{grid-area:2/1;border-radius:8px 0 0 8px;font-size:18px;border-right:0}.pad-center{grid-area:2/2;position:relative;border:0}.pad-center:after{content:'';position:absolute;inset:13px;border:2px solid #3e4f56;border-radius:50%}.pad-right{grid-area:2/3;border-radius:0 8px 8px 0;font-size:18px;border-left:0}.pad-bottom{grid-area:3/2;border-radius:0 0 8px 8px;border-top:0}.dpad button.active,.dpad button:active{background:#435964;color:#f2c879}.keyhint{font-size:12px;letter-spacing:1px;color:#9cafb4}.screen-unit{padding:15px 17px 12px;background:#111d24;border-radius:16px;border:1px solid #4d6167;box-shadow:inset 0 2px 9px #050c12}.screen-label,.screen-footer{display:flex;justify-content:space-between;font-size:10px;letter-spacing:1px;color:#9daaa6;padding-bottom:10px}.screen-label span:first-child{color:#e9bb67}.screen-frame{position:relative;line-height:0;background:#d49b54;border:4px solid #080f14;box-shadow:0 0 0 1px #56665e}canvas{width:100%;height:auto;aspect-ratio:256/224;image-rendering:pixelated;display:block;touch-action:none}.screen-footer{padding:10px 0 0}.signal{color:#e2b670}.action-buttons{display:flex;gap:18px;align-items:center;height:138px}.action{display:flex;flex-direction:column;align-items:center;gap:12px}.action button{width:65px;height:65px;border-radius:50%;font-size:26px;font-weight:bold;border:2px solid #ab7746;background:linear-gradient(145deg,#e4af63,#c48c47);color:#332b23;box-shadow:0 6px 0 #755330,0 9px 0 4px #17242c}.action.a{transform:translateY(-24px)}.action.b{transform:translateY(18px)}.action button.active,.action button:active{transform:translateY(4px);box-shadow:0 2px 0 #755330,0 5px 0 4px #17242c;background:#f6cd83}.action span{font-size:10px;letter-spacing:1px}.utility{display:flex;gap:18px}.utility button{font-size:12px;letter-spacing:1px;background:#1b2b34;border:1px solid #53656a;padding:10px 16px;border-radius:18px;box-shadow:0 3px 0 #101a20}.utility button:active{transform:translateY(2px)}.utility button span{color:#e6b66a}.rotate-hint{font-size:12px;color:#a2b4b6}.speaker{letter-spacing:3px;transform:rotate(-22deg);color:#111e26}.instruction{font-size:12px;color:#a8b7b8;letter-spacing:1px;text-align:center;margin:30px 0 0;line-height:1.8}.pause-overlay{position:absolute;inset:0;background:#16222ccc;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;line-height:1.5;color:#f3d49b}.pause-overlay[hidden]{display:none}.pause-overlay b{font-size:26px;letter-spacing:5px}.pause-overlay span{font-size:14px}
@media(max-width:720px) and (orientation:portrait){body{padding:16px 10px}.console{padding:18px 16px;border-radius:22px}.brand{font-size:20px}.edition{display:none}.machine{grid-template-columns:1fr 1fr;gap:24px 10px;margin:18px 0}.screen-unit{grid-column:1/-1;grid-row:1;width:min(100%,420px);justify-self:center}.controls{gap:12px}.dpad{width:120px;height:120px}.action-buttons{height:120px}.control-title,.keyhint{display:none}.bottomline{flex-wrap:wrap;justify-content:center}.rotate-hint{width:100%;text-align:center}.speaker{display:none}.instruction span{display:block}}
@media(orientation:landscape) and (max-height:600px){
 body{padding:max(6px,env(safe-area-inset-top)) max(6px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left));height:100dvh;min-height:0;overflow:hidden}
 .console{--screen-width:min(calc((100dvh - 50px - env(safe-area-inset-top) - env(safe-area-inset-bottom))*256/224 + 18px),calc(100vw - max(6px,env(safe-area-inset-left)) - max(6px,env(safe-area-inset-right)) - 330px));position:relative;width:100%;max-width:1060px;height:100%;padding:8px 12px;border-radius:20px}
 .topline{position:absolute;top:16px;left:18px;height:auto}.brand{font-size:16px;letter-spacing:2px}.brand i{font-size:10px}.edition{display:none}
 .machine{height:100%;grid-template-columns:minmax(134px,1fr) var(--screen-width) minmax(134px,1fr);gap:12px;margin:0}
 .screen-unit{width:100%;max-width:none;padding:4px;border-radius:10px}.screen-label,.screen-footer{display:none}
 .controls{height:100%;justify-content:center;gap:12px;padding:30px 0 58px}.control-title,.keyhint{display:none}
 .dpad{width:132px;height:132px}.action-buttons{height:132px;gap:18px}.action button{width:58px;height:58px}
 .bottomline,.utility{display:contents}.rotate-hint,.speaker,.instruction{display:none}
 .utility button{position:absolute;bottom:20px;min-height:40px;padding:8px 12px;font-size:12px}
 #sound{left:calc((100% - var(--screen-width) - 24px)/4 + 12px);transform:translateX(-50%)}
 #pause{right:calc((100% - var(--screen-width) - 24px)/4 + 12px);transform:translateX(50%)}
 #sound:active{transform:translate(-50%,2px)}#pause:active{transform:translate(50%,2px)}
}
@media(orientation:landscape) and (max-height:360px){.dpad{width:114px;height:114px}.action-buttons{height:114px}.action button{width:54px;height:54px}.utility button{bottom:12px}.topline{top:12px}}

/* Suppress iOS selection and long-press callouts throughout the play surface. */
.console,.console *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}.console{touch-action:none}.controls,.dpad,.action-buttons{touch-action:none}

/* Repeated taps on labels and margins must not zoom the play layout. */
html,body{touch-action:manipulation}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.pause-overlay b{font-size:clamp(16px,3vw,26px);letter-spacing:2px}

/* SELECT sits beside the action controls, away from the screen and START. */
.select-control{min-width:92px;min-height:40px;padding:9px 14px;border-radius:18px;border:1px solid #718078;background:#1b2b34;color:#edca8b;font-size:12px;letter-spacing:1px;box-shadow:0 3px 0 #101a20;touch-action:none}
.select-control.active,.select-control:active{background:#435964;transform:translateY(2px)}
@media(orientation:landscape) and (max-height:600px){.right.controls{gap:12px;padding-bottom:58px}.right .action-buttons{flex-shrink:0}.select-control{min-height:40px;margin-top:6px;flex-shrink:0}}
@media(orientation:landscape) and (max-height:360px){.right.controls{gap:8px;padding-top:16px;padding-bottom:44px}.select-control{margin-top:4px;min-height:36px}}