/* EAMON.WORLD */
/* orrery.css: layout and presentation for the Great Eldur orrery */

/* ================================== */
/* Variables                          */
/* ================================== */
:root {
	--active:			rgba(164,48,48,1);
	--activeLow:		rgba(82,24,24,1);
	--activeHigh:		rgba(246,96,96,1);
}

/* ================================== */
/* Interface, stage                   */
/* ================================== */
#orreryRoot {
	background: #000;
	width: 100%;
	height: calc(100vh);
	overflow: hidden;
	position: relative;
}
.orrery.container {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	width: 100%;
	min-height: 70vh;
	box-sizing: border-box;
}
#orreryStage {
	position: relative;
	width: 100%;
	min-height: 640px;
	overflow: hidden;
	background:
		radial-gradient(circle at center, rgba(255, 255, 255, 0.035) 0%, rgba(255, 255, 255, 0.01) 28%, rgba(0, 0, 0, 0) 70%),
		linear-gradient(180deg, rgba(10, 16, 26, 0.96) 0%, rgba(5, 10, 18, 0.98) 100%);
}
#orreryMask {
	position: absolute;
	inset: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(7, 12, 20, 0.82);
	backdrop-filter: blur(2px);
	transition: opacity 180ms ease;
}
#orreryMask h2 {
	margin: 0;
	font-size: 1.1rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	opacity: 0.92;
}
#orreryRoot.is-ready #orreryMask {
	opacity: 0;
	pointer-events: none;
}
#orreryRoot.is-error #orreryMask {
	opacity: 1;
	pointer-events: auto;
}
#orreryRoot.is-error #orreryMask h2 {
	color: #ffb3b3;
}

/* Controls ——————————————————————————*/
#orreryControls {
	color: #eee;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	padding: 0.5rem 3rem 0 1rem;
	
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99;
}
#orreryStatus {
}
#orreryStatus h3 {
	display: inline-block;
	padding: 0 0.5rem;
}
#orreryStatus h3 span {
	display: inline-block;
}
.orrery-era::after ,
.orrery-day::after {
	content: "·";
	opacity: 0.25;
	padding-left: 0.25rem;
}

#orreryTimeLabel {
	white-space: nowrap;
}
#orreryTitle h2 {
	margin: 0;
	font-size: 1.35rem;
	line-height: 1.2;
}
#orreryPlayback {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem 0.5rem;
}
#orreryControls label {
	font-size: 0.9rem;
	opacity: 0.9;
	text-transform: none;
}
#orreryControls button,
#orreryControls select {
	padding: 0.25rem 0.6rem;
	font: inherit;
	border-radius: 0.35rem;
	border: 1px solid rgba(255, 255, 255, 0.16);
	background: rgba(32, 32, 32, 0.75);
	color: inherit;
	width: auto;
}
#orreryControls button {
	cursor: pointer;
}
#orreryControls button:hover,
#orreryControls select:hover {
	background: rgba(255, 255, 255, 0.1);
}
#orreryControls button:focus,
#orreryControls select:focus {
	outline: 2px solid rgba(180, 210, 255, 0.35);
	outline-offset: 1px;
}
#orreryControls select option {
	background: rgba(32, 32, 32, 0.75);
}

/* ================================== */
/* SVG elements                       */
/* ================================== */
.orrery-svg {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 640px;
}
.orrery-body[data-slug],
.orrery-label[data-slug],
.orrery-ring[data-slug],
.orrery-ringlet[data-slug] {
	cursor: pointer;
}

/* Starfield —————————————————————————*/
.orrery-starfield {
	pointer-events: none;
}

.orrery-starfield-layer {
	pointer-events: none;
}

.orrery-starfield-layer--far,
.orrery-starfield-layer--mid,
.orrery-starfield-layer--near {
	pointer-events: none;
}
.orrery-starfield-layer--near circle {
	filter: blur(0.2px);
}

/* Features ——————————————————————————*/
.orrery-feature--dust_torus {
	pointer-events: none;
}
.orrery-body-rings,
.orrery-ring,
.orrery-ringlet {
	pointer-events: none;
}

/* Orbits ————————————————————————————*/
.orrery-orbit {
	fill: none;
	stroke: rgba(255, 255, 255, 0.18);
	stroke-width: 1.1;
	vector-effect: non-scaling-stroke;
}

.orrery-orbit--star {
	stroke: rgba(255, 245, 220, 0.15);
}
.orrery-orbit--planet {
	stroke: rgba(170, 210, 255, 0.18);
}
.orrery-orbit--trojan {
	stroke: rgba(220, 160, 255, 0);
	stroke-dasharray: 4 4;
}
.orrery-orbit--moon {
	stroke: rgba(220, 230, 255, 0.24);
	stroke-width: 0.9;
}

.orrery-trail {
	pointer-events: none;
	mix-blend-mode: screen;
}

/* Bodies ————————————————————————————*/
.orrery-body-disc {
	stroke: rgba(255, 255, 255, 0.1);
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}
.orrery-body--star .orrery-body-disc {
	stroke: rgba(255, 245, 220, 0.55);
	filter: drop-shadow(0 0 8px rgba(255, 226, 140, 0.9));
}
.orrery-body--planet .orrery-body-disc {
	filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.08));
}
.orrery-body--trojan .orrery-body-disc {
	filter: drop-shadow(0 0 4px rgba(220, 160, 255, 0.12));
}

/* Labels ————————————————————————————*/
.orrery-label {
	font-family: "Almendra SC";
	font-weight: 700;
	shape-rendering: crispedges;
	font-size: 1.25rem;
	line-height: 1;
	fill: rgba(255, 255, 255, 0.92);
	paint-order: stroke;
	stroke: rgba(8, 12, 20, 0.9);
	stroke-width: 3px;
	stroke-linejoin: round;
	user-select: none;
}

/* Lighting and shading ——————————————*/
.orrery-body-shade {
	pointer-events: none;
}
.orrery-body--star .orrery-body-shade {
	display: none;
}
.orrery-star-glow {
	filter: blur(20px);
	pointer-events: none;
}

/* Zodiac ————————————————————————————*/
.orrery-zodiac-overlay {
	pointer-events: none;
}
.orrery-zodiac-ring {
	fill: none;
	stroke: rgba(255, 255, 255, 0.08);
	stroke-width: 1;
	stroke-dasharray: 2 6;
}
.orrery-zodiac-boundary {
	stroke: rgba(255, 255, 255, 0.10);
	stroke-width: 1;
	stroke-dasharray: 3 7;
}
.orrery-zodiac-label {
	fill: rgba(255, 255, 255, 0.28);
	font-size: 13px;
	text-anchor: middle;
	dominant-baseline: middle;
	letter-spacing: 0.04em;
	pointer-events: auto;
}
.orrery-zodiac-label[data-slug] {
	cursor: pointer;
}
.orrery-zodiac-symbol {
	fill: rgba(255, 255, 255, 0.22);
}
.orrery-zodiac-name {
	fill: rgba(255, 255, 255, 0.30);
}

/* ================================== */
/* @media rules                       */
/* ================================== */
@media (max-width: 900px) {
	#orreryStage,
	.orrery-svg {
		min-height: 520px;
	}

	#orreryTitle h2 {
		font-size: 1.2rem;
	}

	.orrery-label {
		font-size: 13px;
	}
}

@media (max-width: 640px) {
	#orreryControls {
		flex-direction: column;
		align-items: flex-start;
	}

	#orreryStage,
	.orrery-svg {
		height: 100%;
		min-height: 420px;
	}

	.orrery-label {
		font-size: 12px;
	}
}