:root { color-scheme: dark; font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; background: #191724; color: #e0def4; }
* { box-sizing: border-box; }
html, body, main { width: 100%; height: 100%; margin: 0; overflow: hidden; }
#game { width: 100%; height: 100%; display: block; background: #191724; outline: none; }
#loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(ellipse at 50% 65%, #2a2441, #191724 68%); padding: 24px; text-align: center; }
#loading[hidden] { display: none; }
.mark { color: #9ccfd8; border: 1px solid #524f67; width: 52px; height: 52px; display: grid; place-items: center; transform: rotate(-12deg); font-size: 28px; }
h1 { font-size: clamp(28px, 6vw, 60px); letter-spacing: .12em; margin: 28px 0 12px; }
p { line-height: 1.6; max-width: 44em; }
.note { font-size: 12px; color: #908caa; margin-top: 28px; }
progress { width: min(320px, 72vw); height: 5px; appearance: none; border: none; background: #26233a; color: #9ccfd8; }
progress::-webkit-progress-bar { background: #26233a; }
progress::-webkit-progress-value { background: #9ccfd8; }
progress::-moz-progress-bar { background: #9ccfd8; }
button { font: inherit; color: #e0def4; background: #26233a; border: 1px solid #6e6a86; border-radius: 6px; padding: 10px 18px; cursor: pointer; }
button:hover, button:focus-visible { border-color: #9ccfd8; outline: 2px solid #9ccfd8; outline-offset: 3px; }
#fullscreen { position: absolute; right: 14px; top: 14px; font-size: 24px; padding: 3px 9px; opacity: .6; }
#fullscreen:hover, #fullscreen:focus-visible { opacity: 1; }
#diagnostics { position: absolute; bottom: 0; left: 0; background: #191724ee; padding: 10px; max-height: 40%; overflow: auto; width: 90%; font-size: 11px; }
#diagnostic-log { white-space: pre-wrap; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto; } }