* { box-sizing: border-box; }
html { color-scheme: dark; background: #111214; color: #ececef; font: 15px/1.5 system-ui, sans-serif; }
body { margin: 0; }
a { color: #a3cff4; text-underline-offset: .2em; }
a:focus-visible { outline: 2px solid #a3cff4; outline-offset: 4px; }
.game-page { min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.game-page main { width: min(800px, 100vw, calc((100svh - 6rem) * 4 / 3)); }
#game { position: relative; width: 100%; aspect-ratio: 4 / 3; background: #111214; }
ruffle-player { display: block; width: 100%; height: 100%; }
#startup { position: absolute; inset: 0; z-index: 1; display: grid; place-content: center; justify-items: center; gap: .7rem; background: #111214; }
#startup[hidden] { display: none; }
#startup img { image-rendering: pixelated; }
#startup strong { font-size: 2rem; color: #f0c160; }
#startup span { color: #bbbcc3; }
footer { max-width: 800px; padding: .7rem 1rem; text-align: center; font-size: .8rem; color: #bbbcc3; }
footer p { margin: 0 0 .35rem; }
footer strong { font-weight: 500; }
nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem 1.4rem; }
.notice { padding: .7rem; color: #ffcfa1; }
.screen-reader { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.about-page main { max-width: 760px; margin: 3rem auto; padding: 0 1.25rem; }
h1 { font-size: 2rem; }
h2 { margin-top: 2rem; font-size: 1.3rem; }
ul { padding-left: 1.4rem; }
li { margin: .4rem 0; overflow-wrap: anywhere; }
@media (max-width: 480px) { footer { font-size: .75rem; } .about-page main { margin-top: 1.5rem; } }