:root { color-scheme: dark; background: #02030a; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; min-height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; background: #02030a; }
body { font-family: system-ui, "Segoe UI", sans-serif; user-select: none; -webkit-user-select: none; }
#app { position: fixed; inset: 0; width: 100vw; height: 100vh; display: grid; place-items: center; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
#game { display: block; width: min(100vw, calc(100vh * 16 / 9)); height: min(100vh, calc(100vw * 9 / 16)); max-width: 100%; max-height: 100%; background: #05060f; touch-action: none; -webkit-tap-highlight-color: transparent; }
#rotate { position: fixed; inset: 0; z-index: 20; display: none; place-items: center; align-content: center; gap: 1rem; background: radial-gradient(circle, #112044 0, #05060f 62%); color: #dff3ff; letter-spacing: .16em; text-align: center; }
#rotate .rotate-icon { color: #00f0ff; font-size: 4rem; text-shadow: 0 0 20px #00f0ff; }
#rotate strong { font-size: clamp(1rem, 6vw, 2rem); }
#rotate span { color: #7d91ac; font-size: .8rem; }
#update-toast { position: fixed; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); z-index: 30; transform: translateX(-50%); border: 1px solid #00f0ff; border-radius: 3px; padding: 12px 18px; color: #dff3ff; background: #071528ee; box-shadow: 0 0 18px #00f0ff66; font: 700 12px system-ui; letter-spacing: .12em; touch-action: manipulation; }
@media (orientation: portrait) { #rotate { display: grid; } }
@supports (height: 100dvh) {
  #app { width: 100dvw; height: 100dvh; }
  #game { width: min(100dvw, calc(100dvh * 16 / 9)); height: min(100dvh, calc(100dvw * 9 / 16)); }
}