*{box-sizing:border-box}body{margin:0;background:#081b29;color:#e9f5f6;font-family:Arial,sans-serif;background-image:radial-gradient(ellipse at 45% 35%,#163c4b 0,transparent 65%);min-height:100vh}main{max-width:1360px;margin:auto;padding:26px 40px}header{display:flex;align-items:center;justify-content:space-between;margin-bottom:35px}.brand{display:flex;align-items:center;gap:12px;color:#e9f5f6;text-decoration:none;font-size:13px;font-weight:800;letter-spacing:2px}.brand small{font-size:9px;color:#75939f;border-left:1px solid #35505d;padding-left:12px;letter-spacing:1.6px}.version{font-size:10px;letter-spacing:1.7px;color:#8ba8b3;display:flex;gap:10px;align-items:center}.version i,.bottom i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#75e7c2}.version b{padding:6px;border:1px solid #34515e;border-radius:5px}.heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.eyebrow{font-size:10px;letter-spacing:3px;font-weight:bold;color:#73dec7;margin:0 0 12px}h1{font-size:30px;margin:0;letter-spacing:-1px}h1 em{font-style:normal;color:#ffe06e}.tag{border:1px solid #34515e;border-radius:20px;padding:10px 14px;font-size:10px;letter-spacing:1.5px;color:#a4bbc4}.game{position:relative;aspect-ratio:16/9;width:100%;max-width:1280px;border-radius:14px;overflow:hidden;border:1px solid #426477;box-shadow:0 24px 70px #0007;background:#12435b}canvas{display:block;width:100%;height:100%}.overlay{position:absolute;inset:0;display:flex;align-items:center;background:linear-gradient(90deg,#04212bef 0,#04212bc9 37%,#04212b22 80%);padding:6%}.overlay.hidden{display:none}.card{max-width:470px}h2{font-size:clamp(24px,4vw,58px);line-height:1.04;letter-spacing:-2px;color:#fff4c3;margin:20px 0}.card>p:not(.eyebrow){max-width:380px;color:#c0dae1;font-size:15px;line-height:1.7}.card button{margin:15px 0 18px;background:#ffdb56;border:0;border-radius:8px;padding:18px 24px;font-size:16px;font-weight:bold;color:#132c35;cursor:pointer;box-shadow:0 5px 0 #b38b24}.card button:hover{background:#ffe789}.card button span{margin-left:25px}.card small{display:block;font-size:11px;color:#94b4bf}.pause{position:absolute;right:18px;top:18px;border:1px solid #ffffff33;border-radius:8px;background:#09263bcc;color:white;width:38px;height:38px;cursor:pointer}footer{display:flex;justify-content:space-between;align-items:center;padding:20px 0;border-bottom:1px solid #28434f}footer>div{display:flex;align-items:center;gap:6px}kbd{border:1px solid #3b5663;background:#142f3c;border-radius:5px;padding:6px 8px;font:11px Arial;color:#d6e9ee}footer span{font-size:11px;color:#8fabb7;margin:0 14px 0 3px}footer button{color:#a9c0ca;border:0;background:transparent;font-size:12px;cursor:pointer}.bottom{display:flex;justify-content:space-between;font-size:10px;color:#688794;padding-top:17px;letter-spacing:.5px}.bottom i{margin-right:7px}.touch{display:none;position:absolute;bottom:12px;left:14px;right:14px;gap:10px;pointer-events:none}.touch button{pointer-events:auto;touch-action:none;width:50px;height:44px;background:#082737b0;border:1px solid #a0eff080;border-radius:9px;color:white;font-size:20px}.touch button:nth-child(3){margin-left:auto}@media(pointer:coarse){.touch{display:flex}}@media(max-width:700px){main{padding:18px 12px}header{margin-bottom:25px}.brand small,.version,.tag,.bottom span:last-child{display:none}h1{font-size:23px}.heading{margin-bottom:17px}footer{align-items:flex-start;gap:15px}footer>div{flex-wrap:wrap}footer span{margin-right:4px}.card>p:not(.eyebrow){font-size:11px;line-height:1.4;max-width:270px}.card button{padding:10px 16px;font-size:12px;margin:3px 0 10px}.card small{font-size:9px}h2{margin:8px 0}.eyebrow{font-size:8px;margin-bottom:5px}.pause{top:8px;right:8px;width:30px;height:30px}.card{max-width:75%}}
/* Visual edition 02. Gameplay canvas remains exactly 1280 × 720. */
body{background-color:#061323;background-image:radial-gradient(ellipse at 50% 30%,#193e54 0,transparent 68%)}
.game{border:2px solid #536e86;box-shadow:0 0 0 5px #112839,0 28px 90px #0008}
.overlay{background:linear-gradient(90deg,#061c32f5 0%,#071e32df 32%,#081d3260 58%,#051e3020 100%)}
.card h2{text-shadow:0 4px 0 #1a3448,0 8px 25px #02152899;color:#fff3b1}
.card button{background:linear-gradient(#ffe781,#f6c747);border:1px solid #fff0a3;box-shadow:0 5px 0 #a27a26,0 10px 30px #0005}
.pause{background:#102342ec;border-color:#889bbb;top:2.6%;right:1.4%;width:3%;height:auto;aspect-ratio:1;font-size:clamp(9px,1.2vw,16px);padding:0}

#audio-controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 0;color:#a9cbd2;font:12px Arial}#audio-controls button{background:#17384b;color:#e7f5ef;border:1px solid #527584;border-radius:7px;padding:9px;cursor:pointer}#audio-controls label{display:flex;align-items:center;gap:7px}#audio-controls input{width:85px;accent-color:#6bddda}#audio-status{color:#ffdc91}

#music-quick{position:absolute;right:1.4%;top:10%;width:4%;min-width:28px;aspect-ratio:1;background:linear-gradient(#24466e,#101d3b);border:2px solid #96cde4;border-radius:10px;color:#ffe788;font-weight:bold;cursor:pointer;z-index:3;padding:0}#music-quick[aria-pressed=false]{color:#adc1cd}

/* Delivery HUD matches the warm black plates and large pause control. */
.pause{top:3.3%;right:1.8%;width:4.7%;border:2px solid #d3c4b7;border-radius:12px;background:#211d1de8;font-size:clamp(16px,2.5vw,34px);z-index:3}
#music-quick{top:13.5%;right:2%;width:3.5%;background:#211d1de8;border:1px solid #a58b76;color:#ffc17d}

/* All HUD controls use the same canvas-relative spacing. */
.pause{top:4.4444%;right:1.875%;width:4.375%;min-width:0;border-radius:10px;border-width:1.5px;background:#201c1de8;border-color:#bfa38b;display:flex;align-items:center;justify-content:center;line-height:1}
#music-quick{top:15.5556%;right:2.34375%;width:3.4375%;min-width:0;aspect-ratio:1;border-radius:50%;font-size:clamp(10px,1.2vw,18px);background:#201c1de8;border-color:#74605a}

/* Raised metal edge, inset face and soft cast shadow. */
.pause{background:linear-gradient(145deg,#625952 0%,#302a27 32%,#171412 75%,#302721 100%);border-color:#c5b19d;box-shadow:inset 0 2px 1px #fff5,inset 0 -3px 2px #000b,0 4px 7px #0009;color:#fff5e9;text-shadow:0 2px 2px #000}
#music-quick{background:linear-gradient(145deg,#4b423a,#201b18 65%);box-shadow:inset 0 1px 1px #fff3,0 3px 5px #0007;border-color:#9d826b}

/* Thin charcoal plates follow the reference; dimensionality stays on icons. */
.pause{background:linear-gradient(#302c29f5,#211e1cf5);border:1.5px solid #c3bbb4;box-shadow:0 3px 6px #0006; border-radius:12px}