:root { color-scheme: dark; font-family: system-ui, sans-serif; background: #101521; color: #edf2fa; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; }
.game { position: relative; width: min(100vw, 56.25vh); width: min(100vw, 56.25dvh); aspect-ratio: 9 / 16; container-type: inline-size; background: #182234; overflow: hidden; }
.game { cursor: default; }
.game button { cursor: pointer; }
.game[data-state="AIMING"], .game[data-state="AIMING"] *,
.game[data-state="PLAYING"], .game[data-state="PLAYING"] * { cursor: none; }
canvas { display: block; width: 100%; height: 100%; touch-action: none; user-select: none; -webkit-user-select: none; }
canvas:focus-visible { outline: 2px solid #b3dfff; outline-offset: -2px; }
.lives { position: absolute; top: 3%; left: 4%; color: #ff8094; font-size: clamp(12px, 5cqw, 28px); pointer-events: none; }
.overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; pointer-events: none; }
[hidden] { display: none !important; }
#result { margin: 0; font-size: 8cqw; font-weight: 700; }
button { pointer-events: auto; font: inherit; font-size: 5.5cqw; font-weight: 700; letter-spacing: .12em; padding: .65em 1.5em; border: 0; border-radius: 6px; background: #edf2fa; color: #182234; touch-action: manipulation; }
.hint { position: absolute; top: 45%; width: 100%; margin: 0; padding: 0 12px; text-align: center; font-size: 3.3cqw; line-height: 1.8; white-space: pre-line; pointer-events: none; color: #c6d4e8; }
.mute { position: absolute; left: 3%; bottom: 2%; z-index: 2; padding: .2em; border-radius: 4px; background: transparent; color: #edf2fa; font-size: clamp(18px, 6cqw, 32px); line-height: 1; letter-spacing: 0; }
.mute:focus-visible { outline: 2px solid #b3dfff; }