:root { --bg: #0d0f1a; --text: #eef; --accent: #ff9d3b; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: system-ui, -apple-system, "Malgun Gothic", sans-serif; overflow: hidden; overscroll-behavior: none; -webkit-text-size-adjust: 100%; }
#game { position: fixed; inset: 0; width: 100%; height: 100%; }
#overlay { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; text-align: center; background: radial-gradient(circle at 50% 30%, #1b2150, var(--bg) 70%); }
#overlay[hidden] { display: none; }
#overlay h1 { margin: 6px 0 0; font-size: clamp(1.4rem, 5vw, 2rem); letter-spacing: .04em; color: #ffd23f; text-shadow: 0 3px 0 #b8326a; }
#overlay p { margin: 4px 0; }
.small { font-size: .82rem; opacity: .7; }
.logo { image-rendering: pixelated; }
progress { width: min(70vw, 340px); height: 14px; accent-color: var(--accent); }
button { font: inherit; color: #1a0e00; background: var(--accent); border: 0; border-radius: 10px; padding: 10px 22px; font-weight: 700; cursor: pointer; }
button[hidden] { display: none; }
#foot { position: fixed; left: 0; right: 0; bottom: 4px; z-index: 60; text-align: center; font-size: .72rem; pointer-events: none; }
#foot a { pointer-events: auto; color: #9db0ff; opacity: .7; text-decoration: none; }
body.playing #foot { display: none; }
#overlay.ready { background: transparent; pointer-events: none; justify-content: flex-start; padding-top: 14vh; }
#overlay.ready progress, #overlay.ready .small { display: none; }