/*
 * Solar Explorer V2 — Browser Compatibility Stylesheet
 * Safari, Firefox, older Edge, Kindle Fire Silk patches.
 * Loaded last — overrides where browsers behave differently.
 */

/* ── Safari: roundRect not supported on canvas (no CSS fix needed)
   Safari: gap in flex requires -webkit prefix for older versions ───────── */

@supports not (gap: 4px) {
	.se-hud { margin-gap: 2px; }
	.se-planet-selector__btns > * + * { margin-left: 4px; }
	.se-quiz__options > * + * { margin-top: 6px; }
	.se-moon-list > * + * { margin-top: 4px; }
}

/* ── Safari: SVG filter drop-shadow on transform causes compositing glitch */

@supports (-webkit-appearance: none) and (not (-moz-appearance: none)) {
	.se-planet { will-change: opacity; }
}

/* ── Firefox: scrollbar styling (uses non-standard -moz- properties) ─────── */

@-moz-document url-prefix() {
	.se-planet-panel { scrollbar-width: thin; scrollbar-color: var(--se-border) transparent; }
	.se-planet-selector { scrollbar-width: none; }
}

/* ── Safari: sticky position inside overflow:hidden needs -webkit ─────────── */

.se-planet-panel__header {
	-webkit-position: sticky;
	position:         sticky;
}

/* ── Older Edge (pre-Chromium): CSS custom properties in animations ────────── */

@supports not (animation-name: se-blink) {
	.se-hud__value--danger { color: #e05252; }
}

/* ── Kindle Fire Silk: touch target sizes and animation performance ─────────── */

@media screen and (max-width: 800px) and (-webkit-min-device-pixel-ratio: 1) {
	/* Silk browser on Kindle Fire — reduce animation complexity */
	.se-starfield { transition: none; will-change: auto; }
	.se-planet { filter: none; } /* drop-shadow is expensive on Silk */
	.se-planet--orbiting { filter: none; }
	.se-loading__icon { animation: none; }
}

/* ── min() / max() / clamp() fallbacks for older browsers ────────────────── */

@supports not (width: min(340px, 88%)) {
	.se-planet-panel { width: 300px; max-width: 88%; }
}

/* ── CSS grid gap fallback ───────────────────────────────────────────────── */

@supports not (gap: 8px) {
	.se-badges > * + * { margin-top: 8px; }
}

/* ── inset shorthand fallback ────────────────────────────────────────────── */

@supports not (inset: 0) {
	.se-loading       { top: 0; right: 0; bottom: 0; left: 0; }
	.se-game          { top: 0; right: 0; bottom: 0; left: 0; }
	.se-cockpit       { top: 0; right: 0; bottom: 0; left: 0; }
	.se-cockpit__frame{ top: 0; right: 0; bottom: 0; left: 0; }
	.se-cockpit__viewport { top: 0; right: 0; bottom: 0; left: 0; }
	.se-planet-scene  { top: 0; right: 0; bottom: 0; left: 0; }
	.se-effects-layer { top: 0; right: 0; bottom: 0; left: 0; }
	.se-warp          { top: 0; right: 0; bottom: 0; left: 0; }
	.se-orbital-ring  { top: 0; right: 0; bottom: 0; left: 0; }
}

/* ── aspect-ratio fallback (used nowhere currently but future-proofed) ────── */

/* ── Safari < 15: backdrop-filter may not work ───────────────────────────── */

@supports not (backdrop-filter: blur(1px)) {
	.se-planet-panel { background: var(--se-bg-panel); }
}

/* ── Ensure SVGs inside the game inherit currentColor properly ───────────── */

.se-game-wrapper svg { overflow: visible; }
.se-game-wrapper svg text { font-family: var(--se-font-display); }

/* ── Print: hide entire game wrapper ─────────────────────────────────────── */

@media print {
	.se-game-wrapper { display: none !important; }
}