/*
 * Solar Explorer V2 — Asteroid Challenge Stylesheet
 * The canvas mini-game overlay shown during belt crossings.
 * Most rendering is done on the canvas itself; this CSS handles
 * the overlay container, HUD bar, intro/result screens, and animations.
 */

/* ── Overlay container ───────────────────────────────────────────────────── */

.se-asteroid-overlay {
	position:        absolute;
	inset:           0;
	z-index:         40;
	background:      #020812;
	display:         flex;
	flex-direction:  column;
	align-items:     stretch;
	overflow:        hidden;
	animation:       se-ast-in .35s ease forwards;
}

@keyframes se-ast-in  { from{opacity:0} to{opacity:1} }
@keyframes se-ast-out { from{opacity:1} to{opacity:0} }

/* ── HUD bar (timer, fuel canisters) ─────────────────────────────────────── */

.se-asteroid-overlay > div:first-child {
	flex-shrink:     0;
	height:          36px;
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	padding:         0 16px;
	background:      rgba(2,8,18,.85);
	border-bottom:   1px solid rgba(77,184,255,.12);
	font-family:     var(--se-font-display);
	font-size:       11px;
	letter-spacing:  .1em;
	color:           #4db8ff;
}

/* ── Canvas ──────────────────────────────────────────────────────────────── */

.se-asteroid-overlay canvas {
	display:       block;
	flex:          1;
	width:         100%;
	touch-action:  none;
	cursor:        none;
	image-rendering: pixelated; /* crisp on Kindle Fire */
}

/* ── Intro / result screens ──────────────────────────────────────────────── */

.se-asteroid-overlay > div[style*="position:absolute"] {
	animation: se-ast-in .3s ease forwards;
}

/* Countdown number animation */
@keyframes se-ast-count { 
	0%   { transform: scale(1.4); opacity: 0; }
	20%  { transform: scale(1);   opacity: 1; }
	80%  { transform: scale(1);   opacity: 1; }
	100% { transform: scale(0.7); opacity: 0; }
}

/* ── Responsive: smaller HUD on mobile ──────────────────────────────────── */

@media screen and (max-width: 479px) {
	.se-asteroid-overlay > div:first-child {
		font-size:   10px;
		padding:     0 10px;
		height:      32px;
	}
}

/* ── Reduced motion: skip intro animation ───────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.se-asteroid-overlay { animation: none; }
}
[data-reduced-motion="true"] .se-asteroid-overlay { animation: none !important; }