*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#183e38;color:#fff5d9;font-family:system-ui,sans-serif}main{position:relative;margin:auto;width:min(100vw,480px);height:100dvh;max-height:960px;overflow:hidden;background:#668554}canvas{display:block;width:100%;height:100%;touch-action:none}header{position:absolute;inset:max(10px,env(safe-area-inset-top)) 12px auto;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 12px;border-radius:18px;background:#173f3bed;font-weight:800}button{font:800 15px system-ui;border:0;border-radius:14px;min-height:48px;padding:10px 20px;background:#f5cf7e;color:#173f3b;cursor:pointer;touch-action:manipulation}button:disabled{background:#50786f;color:#d5dfc8;cursor:default}#pause{padding:5px 13px;min-width:48px;background:#315e55;color:#fff5d9}aside{position:absolute;top:82px;left:8px;right:8px;text-align:center;font-size:12px;font-weight:750;text-shadow:0 2px 3px #173f3b}footer{position:absolute;bottom:max(12px,env(safe-area-inset-bottom));left:15px;right:15px}#big{width:100%;box-shadow:0 5px 0 #153f36}section{position:absolute;inset:19% 7% auto;background:#173f3bf8;border:2px solid #769278;border-radius:26px;padding:25px;text-align:center;box-shadow:0 14px 40px #082c3a55}section[hidden]{display:none}h1{font-size:38px;line-height:1.05;margin:14px 0;color:#f5cf7e}p{font-size:14px;line-height:1.5}small{font-size:10px;letter-spacing:2px}#start{width:100%;margin-top:10px}@media(max-height:620px){section{inset:16% 6% auto;padding:17px}h1{font-size:30px}p{font-size:13px}aside{top:78px;font-size:11px}}

main.overlay header,main.overlay aside,main.overlay footer{display:none}main.overlay canvas{opacity:.24}main.overlay{background:#173f3b}

/* Reused sound preference: compact, explicit on/off control; touch target remains48px. */
header{font-size:14px;gap:6px;padding:7px 10px}#pause{width:54px;min-width:54px;padding:5px 8px}#sound{font-size:0;width:48px;min-width:48px;padding:4px;background:#315e55;color:#fff5d9}#sound::after{content:'♪ off';font-size:11px}#sound[aria-pressed="true"]::after{content:'♪ on'}.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}
/* Sound remains reachable on menu/pause/result without restoring the gameplay HUD. */
main.overlay #sound{position:fixed;right:max(12px,calc((100vw - 480px)/2 + 12px));top:max(10px,env(safe-area-inset-top))}main.overlay header{display:block;background:none;padding:0;pointer-events:none}main.overlay header #squad,main.overlay header #time,main.overlay header #pause{display:none}main.overlay #sound{pointer-events:auto}

/* Course HUD: four compact controls remain readable at320px. */
header{gap:6px;padding:7px 9px;font-size:12px}#time{white-space:nowrap;font-variant-numeric:tabular-nums}#sound{padding:5px 7px;font-size:0;min-width:48px;flex-shrink:0;white-space:nowrap}#pause{font-size:12px;padding:5px 8px}

#run-mark{min-width:64px;text-align:right;line-height:1.2}#score{display:block;color:#f5cf7e;font-size:16px;font-variant-numeric:tabular-nums}#time{display:block;font-size:10px;color:#d5dfc8}.run-record{font-weight:800;color:#f5cf7e;font-size:13px;line-height:1.5}main.overlay header #run-mark{display:none}