/*
 * Solar Explorer V2 — Responsive Stylesheet
 * Breakpoint adjustments for all screen sizes and orientations.
 */

/* ── Mobile small (< 480px) ─────────────────────────────────────────────── */

@media screen and (max-width: 479px) {
	.se-game-wrapper { --se-game-height: 480px; min-height: 380px; }

	.se-hud { height: 42px; padding: 0 6px; gap: 0; }
	.se-hud__panel { padding: 0 7px; min-width: 58px; }
	.se-hud__value { font-size: 13px; }
	.se-hud__label { font-size: 7px; }
	.se-hud__panel--speed { display: none; } /* hide speed on tiny screens */
	.se-hud__btn  { width: 30px; height: 30px; }

	.se-planet-selector { padding: 4px 6px; gap: 4px; }
	.se-planet-selector__label { display: none; }
	.se-planet-selector__btn { padding: 4px 7px; font-size: 9px; min-height: 28px; }
	.se-planet-selector__dot { width: 6px; height: 6px; }

	.se-planet-panel { width: 100%; border-left: none; border-top: 1px solid var(--se-border); top: auto; height: 65%; bottom: 28px; }
	.se-planet-panel__close { min-height: 48px; }

	.se-nav-map { width: 170px; bottom: 32px; right: 6px; }

	.se-quiz__card { padding: 12px; }
	.se-quiz__question { font-size: 13px; }
	.se-quiz__option { padding: 7px 10px; font-size: 12px; min-height: 40px; }

	.se-badge-toast__inner { min-width: 180px; max-width: 240px; }
}

/* ── Mobile (480–599px) ─────────────────────────────────────────────────── */

@media screen and (min-width: 480px) and (max-width: 599px) {
	.se-hud__panel--speed { display: none; }
	.se-planet-selector__label { display: none; }
	.se-planet-selector__btn { font-size: 10px; padding: 5px 8px; }
	.se-planet-panel { width: min(320px, 92%); }
}

/* ── Tablet (600–767px) ──────────────────────────────────────────────────── */

@media screen and (min-width: 600px) and (max-width: 767px) {
	.se-planet-selector__btn { font-size: 10px; }
	.se-planet-panel { width: min(330px, 80%); }
}

/* ── Tablet landscape / small desktop (768–1023px) ───────────────────────── */

@media screen and (min-width: 768px) and (max-width: 1023px) {
	/* Cockpit frame is shown — viewport inset applied via cockpit.css */
	.se-planet-selector__label { display: flex; }
}

/* ── Desktop large (≥ 1440px) ───────────────────────────────────────────── */

@media screen and (min-width: 1440px) {
	.se-game-wrapper { --se-game-height: 680px; }
	.se-hud__panel { min-width: 90px; }
	.se-hud__value { font-size: 16px; }
	.se-planet-panel { width: 360px; }
}

/* ── Portrait orientation (tall and narrow) ──────────────────────────────── */

@media screen and (orientation: portrait) and (max-width: 767px) {
	.se-game-wrapper { --se-game-height: 580px; }
	.se-planet-panel {
		/* On portrait mobile, panel rises from bottom as a sheet */
		width:  100%;
		height: 62%;
		top:    auto;
		bottom: 28px;
		border-left: none;
		border-top: 1px solid var(--se-border);
		transform: translateY(100%);
		opacity:   0;
	}
	.se-planet-panel--open { transform: translateY(0); opacity: 1; }
	.se-planet-panel__close {
		width: calc(100% + 36px);
		margin: -16px -18px 14px;
	}
	.se-nav-map { bottom: 30px; right: 8px; }
}

/* ── Landscape orientation (short and wide) ──────────────────────────────── */

@media screen and (orientation: landscape) and (max-height: 500px) {
	.se-game-wrapper { --se-game-height: 100vh; min-height: 320px; }
	.se-hud { height: 38px; }
	.se-planet-selector { padding: 3px 8px; }
	.se-planet-selector__btn { min-height: 26px; padding: 3px 7px; font-size: 9px; }
	.se-footer { height: 22px; }
	.se-footer__text { font-size: 8px; }
	.se-planet-panel { bottom: 22px; }
}

/* ── Kindle Fire / Android tablet specific ───────────────────────────────── */

@media screen and (min-width: 600px) and (max-width: 800px) and (min-height: 900px) {
	/* Kindle Fire HD in portrait — tall narrow viewport */
	.se-game-wrapper { --se-game-height: 560px; }
	.se-planet-selector__btn { min-height: 36px; font-size: 11px; }
	.se-hud__btn { width: 38px; height: 38px; }
}

/* ── Touch device enhancements ───────────────────────────────────────────── */

[data-touch="true"] .se-planet-selector__btn { min-height: 36px; }
[data-touch="true"] .se-hud__btn             { width: 38px; height: 38px; }
[data-touch="true"] .se-quiz__option         { min-height: 48px; }
[data-touch="true"] .se-moon-item            { min-height: 48px; }
[data-touch="true"] .se-planet-panel__close  { min-height: 52px; }

/* ── High contrast mode ──────────────────────────────────────────────────── */

[data-high-contrast="true"] .se-game-wrapper {
	--se-border:         rgba(77,184,255,.4);
	--se-text-secondary: #b0d4ee;
	--se-text-muted:     #5a8aaa;
}

[data-high-contrast="true"] .se-hud__btn     { border-color: var(--se-accent-dim); }
[data-high-contrast="true"] .se-quiz__option { border-color: rgba(77,184,255,.3);  }