/* Canvas and DOM controls share one proportional 4:3 playfield. */
body{display:grid;place-items:center}
#stage{width:min(100vw,calc(100vh * 4 / 3));height:min(100vh,75vw);aspect-ratio:4/3;container-type:inline-size;font-size:14px}
@supports(height:100dvh){#stage{width:min(100vw,calc(100dvh * 4 / 3));height:min(100dvh,75vw)}}
canvas{width:100%;height:100%;object-fit:contain;touch-action:none}
#overlay{padding:24px 30px;align-items:flex-start;overflow-y:auto;overscroll-behavior:contain}
.panel{width:74%;max-width:560px;flex-shrink:0}
.logo{font-size:64px;margin:0 0 12px}.subtitle{font-size:13px;margin-bottom:18px}.eyebrow{font-size:11px;margin-bottom:12px}
.copy{font-size:15px;line-height:1.5;margin:12px 0}.fine{font-size:11px;line-height:1.6}
h2{font-size:40px;margin:12px 0 16px}.buttons{gap:8px;margin:18px 0 12px}button{padding:11px 15px}
.chapterlist{gap:6px;margin-top:12px}.chapterlist button{padding:8px 12px}
#hud{padding:16px 18px 0}.hudleft{width:calc(100% - 215px);max-width:370px}.hudleft b{font-size:11px;letter-spacing:.1em}
.hudleft span{font-size:19px;margin:7px 0}.hudleft small{font-size:10px}.hudright{right:16px;top:14px;gap:5px}
#hud button{font-size:10px;padding:9px 11px}#quality{min-width:40px}#quality[aria-pressed=true]{border-color:#d5bf86;color:#f6dc9c}
#gameHelp{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);width:max-content;max-width:94%;display:flex;flex-direction:column;align-items:center;gap:4px}
#objective{position:static;left:auto;bottom:auto;transform:none;width:auto;max-width:100%;font-size:11px;line-height:1.35;padding:7px 10px}
#controlHelp{color:#fff;background:#090f20c9;padding:5px 9px;border-radius:3px;text-align:center;font-size:11px;line-height:1.4;letter-spacing:.02em}
#touch{bottom:12px;left:12px;right:12px}.move,.actions{gap:6px}
#touch button{width:54px;height:52px;font-size:10px}#touch .actions button:last-child{width:62px}
#stage:has(#touch:not([hidden])) #gameHelp{bottom:76px}
#rotate{display:none}
@container(max-width:600px){
 #overlay{padding:16px 20px}.panel{width:100%;max-width:none}.logo{font-size:44px;margin-bottom:8px}.subtitle{font-size:11px;margin-bottom:10px}.eyebrow{font-size:10px;margin-bottom:8px}
 .copy{font-size:13px;line-height:1.4;margin:8px 0}.fine{font-size:10px;line-height:1.4}h2{font-size:30px;margin:8px 0 12px}
 .buttons{margin:12px 0 8px}button{padding:8px 11px}.chapterlist button{padding:6px 9px}.chapterlist{margin-top:9px}
 #hud{padding:10px 12px 0}.hudleft{width:calc(100% - 172px)}.hudleft b{font-size:10px;letter-spacing:.04em}.hudleft span{font-size:15px;letter-spacing:3px;margin:5px 0}.hudleft small{display:none}.meter{width:112px}
 .hudright{right:10px;top:9px;gap:4px}#hud button{font-size:9px;padding:8px}#quality{min-width:32px}
 #touch{bottom:10px;left:9px;right:9px}#touch button{width:46px;height:44px;font-size:9px}#touch .actions button:last-child{width:52px}.move,.actions{gap:4px}
 #stage:has(#touch:not([hidden])) #gameHelp{bottom:62px}#objective{font-size:10px;padding:5px 8px;max-width:100%}#controlHelp{font-size:10px;padding:4px 7px}
 .mix-controls{gap:16px;font-size:11px}.mix-controls input{max-width:130px}
}
@container(max-width:430px){
 #overlay{padding:12px 14px}.logo{font-size:38px}.copy{font-size:12px}.fine{font-size:9px}.eyebrow{font-size:9px}.buttons{gap:6px}.chapterlist{gap:4px}
 #touch button{width:43px}#touch .actions button:last-child{width:49px}#objective{font-size:9px;line-height:1.25}#controlHelp{font-size:9px;line-height:1.3}
}