/* Home (Asteroids splash) variant of the shell. Tokens and header/footer come from tokens.css / shell.css. */
/* The play area is <main>: the canvas fills it, below the header and above the footer, behind the masthead */
#asteroids { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.shell-home #main { z-index: 1; }
/* the solid block in the game: shots, ships, saucers and rocks bounce off it */
.splash-masthead { width: fit-content; margin: 0 auto; text-align: center; }
.splash-logo { font-family: var(--gc-font-arcade); color: var(--gc-yellow); font-size: clamp(25px, 6vw, 56px); line-height: 1.3; margin: 12px 0; text-shadow: var(--gc-glow-yellow); }
.splash-kicker { font-family: var(--gc-font-arcade); font-size: clamp(10px, 1.6vw, 14px); letter-spacing: 3px; color: var(--gc-cyan); margin: 0; }
.splash-credit { font-size: var(--gc-fs-md); margin: 0; }
.splash-pitch { text-align: center; font-size: var(--gc-fs-lg); margin: 0; padding: 0 var(--gc-gutter); }
/* very short windows scroll rather than squash */
@media (max-height: 560px) {
	body.shell-home { height: auto; min-height: 100dvh; overflow-y: auto; }
	body.shell-home #main { overflow: visible; gap: 32px; padding: 24px 0; }
}
#sound-toggle {
	position: fixed; right: 16px; bottom: 14px; z-index: 2;
	font: 10px/1 var(--gc-font-arcade); letter-spacing: .18em; color: rgba(104, 234, 255, .75);
	background: transparent; border: 1px solid rgba(104, 234, 255, .35); border-radius: 3px;
	padding: 7px 9px; cursor: pointer;
}
#sound-toggle:hover, #sound-toggle:focus-visible { color: var(--gc-text); border-color: rgba(104, 234, 255, .8); }
#sound-toggle[aria-pressed="true"] { color: var(--gc-text); }
@media (max-width: 575.98px) { #sound-toggle { bottom: 64px; } }   /* clear of the footer links */