:root { color-scheme: dark; font-family: system-ui, sans-serif; color: #e4eff4; background: #081522; }
* { box-sizing: border-box; }
body { margin: 0; }
a { color: #a5e8e0; text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; font-weight: 650; cursor: pointer; color: #071c25; background: #62dace; border: 1px solid #a5eee6; border-radius: .5rem; padding: .65rem 1.1rem; }
button:disabled { cursor: default; opacity: .5; }
button:hover:not(:disabled) { background: #a5eee6; }
:focus-visible { outline: 3px solid #ffd077; outline-offset: 4px; }
.toolbar { max-width: 1600px; margin: auto; padding: .8rem 1.25rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.brand { color: #eef8f9; font-size: 1.2rem; font-weight: 700; }
.brand span { color: #e5bc72; font-weight: 500; margin-left: .75rem; }
nav { display: flex; align-items: center; gap: 1.25rem; }
main { max-width: 1600px; margin: auto; padding: 0 1.25rem 1rem; }
#player { position: relative; width: min(100%, calc((100dvh - 180px) * 16 / 9)); margin: auto; aspect-ratio: 16 / 9; background: #04090f; border: 1px solid #375363; border-radius: .75rem; overflow: hidden; }
#unity-canvas { display: block; width: 100%; height: 100%; }
.overlay { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(ellipse at top, #153a4c, #06101d 75%); overflow-y: auto; }
.start-card { max-width: 36rem; text-align: center; padding: 1.5rem; }
h1 { color: #f0ca83; font-family: Georgia, serif; font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 500; letter-spacing: .12em; margin: .5rem 0 1rem; }
p { line-height: 1.5; }
.eyebrow { font-size: .875rem; letter-spacing: .1em; color: #8cdbd4; }
.hint, .footnote { font-size: .875rem; color: #adbfca; }
#status { min-height: 3rem; }
progress { display: block; width: 100%; height: .7rem; accent-color: #62dace; margin: 1.25rem 0; }
.notice { max-width: 1000px; margin: 1rem auto .5rem; font-size: .875rem; line-height: 1.5; padding-left: 1rem; border-left: 2px solid #62dace; color: #c4d5df; }
.footnote { max-width: 1000px; margin: .5rem auto; }
[hidden] { display: none !important; }
#player:fullscreen { width: 100vw; height: 100dvh; border: 0; border-radius: 0; display: grid; place-items: center; }
#player:fullscreen #unity-canvas { width: min(100vw, calc(100dvh * 16 / 9)); height: min(100dvh, calc(100vw * 9 / 16)); }
@media (max-width: 720px) { .toolbar { flex-wrap: wrap; } main { padding: 0 .5rem 1rem; } #player { width: 100%; min-height: 390px; } .start-card { padding: 1rem; } nav { font-size: .875rem; } }