:root{ --bg:#07070c; --panel:#10111b; --line:#262a40; --fg:#ecebf3; --muted:#9a9ab2; --hot:#ffd59a; --red:#ff5d73; color-scheme:dark }
*{box-sizing:border-box}
html,body{margin:0; overflow-x:hidden; background:var(--bg); color:var(--fg); font:15px/1.7 "DotGothic16",system-ui,sans-serif}
main{max-width:1180px; margin:0 auto; padding:16px 16px 40px; display:grid; gap:12px}
header h1{margin:0; font:400 clamp(16px,2.6vw,24px)/1.4 "Press Start 2P",monospace; color:var(--hot); letter-spacing:2px}
header h1 small{display:block; margin-top:6px; font:15px "DotGothic16",sans-serif; color:var(--muted); letter-spacing:0}
.screen{position:relative; aspect-ratio:16/9; width:100%; background:#000; border-radius:6px; overflow:hidden; box-shadow:0 0 0 1px var(--line), 0 20px 60px rgba(0,0,0,.5)}
.screen canvas{display:block; width:100%; height:100%; image-rendering:pixelated}
.pause{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; background:rgba(0,0,0,.6)}
.pause[hidden]{display:none}
.pause p{margin:0 0 8px; font:28px "Press Start 2P",monospace; color:#fff}
.pause button{font:18px "DotGothic16",sans-serif; min-width:200px; padding:10px 18px; border-radius:6px; border:1px solid #6b4aa8; background:#1d1530; color:#fff; cursor:pointer}
.subbar{min-height:62px; background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:8px 14px}
.subbar p{margin:0}
#sub{font-size:18px}
#hint{font-size:13px; color:var(--muted)}
.pad{display:none; align-items:center; justify-content:space-between; gap:12px; user-select:none; -webkit-user-select:none; touch-action:none}
.pad button{font:16px "Press Start 2P",monospace; color:#fff; background:#1a1b29; border:1px solid #3a3d58; border-radius:10px; touch-action:none}
.pad button.on{background:#3a2f60}
.dpad{display:grid; grid-template-columns:repeat(3,56px); grid-template-rows:repeat(3,56px)}
.dpad [data-k=up]{grid-column:2; grid-row:1} .dpad [data-k=left]{grid-column:1; grid-row:2} .dpad [data-k=right]{grid-column:3; grid-row:2} .dpad [data-k=down]{grid-column:2; grid-row:3}
.ab{display:flex; gap:14px; align-items:center}
.ab button{width:72px; height:72px; border-radius:50%; font-size:20px}
.ab .a{background:#5a1f2c; border-color:#ff5d73; transform:translateY(-16px)}
.st{padding:10px 12px; font-size:10px !important}
@media (pointer:coarse){ .pad{display:flex} }
.info{display:grid; grid-template-columns:1.3fr 1fr; gap:14px}
.info>div{background:var(--panel); border:1px solid var(--line); border-radius:6px; padding:14px 18px}
.info h2{margin:0 0 8px; font-size:17px; color:var(--hot)}
.info h2:not(:first-child){margin-top:14px}
.info ol{margin:0; padding-left:1.3em; display:grid; gap:6px}
.info b{color:#fff}
table{border-collapse:collapse; width:100%}
th,td{text-align:left; padding:3px 6px; border-bottom:1px solid var(--line); font-weight:400}
th{color:var(--muted); white-space:nowrap}
label{display:flex; align-items:center; gap:10px; margin:6px 0; flex-wrap:wrap}
label input[type=range]{flex:1; min-width:140px}
label.cb{gap:8px}
.note{margin:0; font-size:13px; color:var(--muted)}
footer{font-size:13px; color:var(--muted)}
@media (max-width:760px){ .info{grid-template-columns:1fr} main{padding:8px 8px 32px} #sub{font-size:16px}
  .dpad{grid-template-columns:repeat(3,46px); grid-template-rows:repeat(3,46px)} .ab{gap:10px} .ab button{width:58px; height:58px; font-size:16px} .ab .a{transform:translateY(-12px)} .pad{gap:6px} .st{padding:8px 6px} }