* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; background: #fff; }
body { overflow: hidden; }
main { min-height: 100%; min-height: 100svh; display: grid; place-items: center; padding: 16px; }
.player { width: min(1000px, 94vw, calc(88svh * 1457 / 1080)); aspect-ratio: 1457 / 1080; position: relative; }
canvas { display: block; width: 100%; height: 100%; touch-action: none; -webkit-tap-highlight-color: transparent; }
button { border: 0; background: transparent; cursor: pointer; padding: 0; -webkit-tap-highlight-color: transparent; }
.power, .enter, .arm-control { position: absolute; }
.power { left: 84.4%; top: 62.4%; width: 6.4%; height: 10%; min-width: 30px; min-height: 30px; }
.enter { left: 33%; top: 37%; width: 15%; height: 21%; border-radius: 50%; }
.enter:disabled { pointer-events: none; }
.arm-control { width: 7%; height: 9%; border-radius: 12px; pointer-events: none; transform: translate(-50%, -50%); }
button:focus-visible { outline: 2px solid #b54b31; outline-offset: 4px; }
.screen-reader { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 600px) { main { padding: 6px; } .player { width: min(98vw, calc(100vw - 12px), calc(90svh * 1457 / 1080)); } }

.volume-control { position:absolute; left:85%; top:37%; width:6%; height:23%; pointer-events:none; }