:root { color-scheme: dark; font-family: system-ui, sans-serif; background: #120927; color: #fff5dc; }
* { box-sizing: border-box; }
html, body, main { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { overscroll-behavior: none; }
main { position: fixed; inset: 0; }
canvas { display: block; width: 100%; height: 100%; touch-action: manipulation; }
#controls { position: fixed; bottom: max(24px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 7px; border: 1px solid #fff2; border-radius: 999px; background: #160d20dd; box-shadow: 0 4px 28px #10051c55; backdrop-filter: blur(16px); transition: opacity .65s ease; white-space: nowrap; }
.name { padding: 0 12px 0 16px; font-size: 14px; letter-spacing: .06em; }
button { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 0; border-radius: 999px; padding: 10px; background: transparent; color: inherit; font: inherit; font-size: 14px; cursor: pointer; }
button:last-child { padding-inline: 12px 17px; }
button:hover { background: #fff2; }
button:focus-visible { outline: 2px solid #fddc5e; outline-offset: 2px; }
button:disabled { opacity: .45; cursor: wait; }
svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
body.quiet { cursor: none; }
body.quiet #controls { opacity: 0; pointer-events: none; }
body.quiet #controls:focus-within { opacity: 1; pointer-events: auto; }
#notice { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: min(440px, calc(100% - 40px)); padding: 18px 24px; border-radius: 16px; background: #160d20ed; font-size: 16px; line-height: 1.5; text-align: center; }
[hidden] { display: none !important; }
noscript { position: fixed; inset: 35% 20px auto; text-align: center; padding: 24px; background: #160d20; }
@media (max-width: 480px) { #controls { bottom: max(18px, env(safe-area-inset-bottom)); } }
@media (prefers-reduced-motion: reduce) { #controls { transition: none; } }