:root { color-scheme: dark; --key-size: clamp(42px, 11vmin, 58px); }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #000; }
#game { position: fixed; inset: 0; touch-action: none; }
#stage-code-input { position: fixed; left: 50%; bottom: 0; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; }
ruffle-player { width: 100%; height: 100%; }
#status { position: fixed; top: max(12px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); margin: 0; padding: 8px 14px; background: #111c; border-radius: 8px; font: 14px system-ui; text-align: center; }
.control-group { position: fixed; z-index: 2; touch-action: none; user-select: none; }
#dpad { left: max(14px, env(safe-area-inset-left)); bottom: max(14px, env(safe-area-inset-bottom)); display: grid; grid-template: repeat(2, var(--key-size)) / repeat(3, var(--key-size)); gap: 8px; }
#space { right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); }
button { width: var(--key-size); height: var(--key-size); padding: 0; border: 1px solid #fff8; border-radius: 12px; background: #0003; color: #fff; font: 18px system-ui; opacity: .68; touch-action: none; -webkit-tap-highlight-color: transparent; cursor: pointer; }
button.pressed { opacity: .95; background: #2229; }
#space button { width: calc(var(--key-size) * 2); font-size: 15px; }
.up { grid-area: 1 / 2; }
.left { grid-area: 2 / 1; }
.down { grid-area: 2 / 2; }
.right { grid-area: 2 / 3; }