* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

body {
	background-color: #111;
	padding: 1em;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

#graph {
	position: relative;
	outline: 1px solid #333;
	width: calc(100vw - 2em);
	height: calc(100vh - 2em);
	overflow: hidden;
	background: #050505;
}

canvas {
	background: radial-gradient(circle at center, #111 0%, #050505 55%, #000 100%);
	height: 100%;
	width: 100%;
	display: block;
	touch-action: none;
}

#fieldCircle {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	border: 1px solid rgba(210, 210, 210, 0.35);
	border-radius: 50%;
	pointer-events: none;
}

#viewGizmo {
	position: absolute;
	right: 0.75rem;
	bottom: 3.6rem;
	width: 215px;
	padding: 0.45rem;
	background: rgba(0, 0, 0, 0.68);
	border: 1px solid rgba(255, 255, 255, 0.18);
	color: #ddd;
	font-size: 11px;
	line-height: 1.3;
	z-index: 2;
}

#viewGizmo canvas {
	display: block;
	width: 110px;
	height: 110px;
	margin: 0 auto;
	cursor: grab;
	touch-action: none;
}

#viewGizmo .gizmo-readout {
	position: relative;
	margin-top: 0.3rem;
}

#viewGizmo .gizmo-angles {
	white-space: pre;
}

#viewGizmo .copy-button {
	top: 0;
	right: 0;
}

#viewGizmo .gizmo-buttons {
	display: flex;
	gap: 0.3rem;
	margin-top: 0.35rem;
}

#viewGizmo .gizmo-buttons button {
	flex: 1;
	padding: 0.15rem 0.3rem;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: #ddd;
	font: inherit;
	cursor: pointer;
}

#viewsPanel {
	position: absolute;
	left: 0.75rem;
	bottom: 6rem;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	z-index: 2;
}

#viewsPanel button {
	padding: 0.2rem 0.5rem;
	background: rgba(0, 0, 0, 0.68);
	border: 1px solid rgba(255, 255, 255, 0.18);
	color: #ddd;
	font: inherit;
	font-size: 11px;
	text-align: left;
	white-space: pre;
	cursor: pointer;
}

#viewsPanel button:hover {
	border-color: rgba(255, 255, 255, 0.45);
}

#viewsPanel .copy-button {
	position: static;
	align-self: flex-start;
	padding: 0 0.2rem;
	background: none;
	border: none;
	color: #777;
}

#scaleBar {
	position: absolute;
	left: 0.75rem;
	bottom: 3.6rem;
	color: #ddd;
	font-size: 12px;
	pointer-events: none;
}

#scaleBarLine {
	height: 6px;
	border: 1px solid rgba(230, 230, 230, 0.8);
	border-top: none;
	margin-bottom: 0.25rem;
}

.copy-button {
	position: absolute;
	padding: 0 0.2rem;
	background: none;
	border: none;
	color: #777;
	font: inherit;
	font-size: 13px;
	line-height: 1.2;
	cursor: pointer;
	pointer-events: auto;
}

.copy-button:hover {
	color: #ddd;
}

.copy-button.copied {
	color: #7fdc8a;
}

#hud .copy-button {
	top: 0.35rem;
	right: 0.35rem;
}

#objectPanel .panel-title {
	position: relative;
	padding-right: 1.5rem;
}

#objectPanel .panel-title .copy-button {
	top: 0;
	right: 0;
}

#hud {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	padding: 0.75rem 1.9rem 0.75rem 0.9rem;
	background: rgba(0, 0, 0, 0.68);
	border: 1px solid rgba(255,255,255,0.18);
	color: #eee;
	font-size: 12px;
	line-height: 1.35;
	white-space: pre;
	pointer-events: none;
}


#objectPanel {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	width: min(460px, calc(100vw - 2rem));
	max-height: calc(100vh - 7rem - 215px);
	overflow: auto;
	padding: 0.6rem;
	background: rgba(0, 0, 0, 0.68);
	border: 1px solid rgba(255,255,255,0.18);
	color: #eee;
	font-size: 12px;
	line-height: 1.35;
}

#objectPanel .panel-title {
	font-weight: 700;
	margin-bottom: 0.45rem;
}

#objectPanel details {
	border-top: 1px solid rgba(255,255,255,0.14);
	padding: 0.35rem 0;
}

#objectPanel summary {
	cursor: pointer;
	list-style: none;
	display: grid;
	grid-template-columns: 1rem 1rem 1fr auto;
	gap: 0.45rem;
	align-items: center;
}

#objectPanel summary::-webkit-details-marker {
	display: none;
}

#objectPanel summary::marker {
	content: "";
}

#objectPanel .object-name::before {
	content: "▸ ";
	color: #aaa;
}

#objectPanel details[open] .object-name::before {
	content: "▾ ";
}

#objectPanel .object-toggle {
	margin: 0;
	cursor: pointer;
	accent-color: #aaa;
}

#objectPanel details.disabled > summary .swatch,
#objectPanel details.disabled > summary .object-name,
#objectPanel details.disabled > summary .object-distance,
#objectPanel details.disabled > table {
	opacity: 0.35;
}

#objectPanel .swatch {
	width: 0.75rem;
	height: 0.75rem;
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,0.55);
}

#objectPanel .object-name {
	font-weight: 700;
}

#objectPanel .object-distance {
	color: #ddd;
}

#objectPanel table {
	width: 100%;
	border-collapse: collapse;
	margin-top: 0.35rem;
}

#objectPanel td {
	padding: 0.12rem 0;
	vertical-align: top;
}

#objectPanel tr.section th {
	text-align: left;
	font-weight: 700;
	color: #fff;
	padding: 0.45rem 0 0.12rem;
	border-bottom: 1px solid rgba(255,255,255,0.1);
}

#objectPanel td:first-child {
	color: #aaa;
	width: 48%;
	padding-right: 0.5rem;
}


#fastForwardPanel {
	position: absolute;
	left: 50%;
	bottom: 1rem;
	transform: translateX(-50%);
	width: min(560px, calc(100vw - 2rem));
	padding: 0.75rem 0.9rem;
	background: rgba(0, 0, 0, 0.78);
	border: 1px solid rgba(255,255,255,0.22);
	color: #eee;
	font-size: 12px;
	line-height: 1.35;
	z-index: 4;
}

#fastForwardTitle {
	font-weight: 700;
	margin-bottom: 0.35rem;
}

#fastForwardBar {
	height: 0.55rem;
	background: rgba(255,255,255,0.12);
	border: 1px solid rgba(255,255,255,0.18);
	margin-top: 0.45rem;
	overflow: hidden;
}

#fastForwardFill {
	height: 100%;	
	width: 0%;
	background: rgba(255,255,255,0.72);
}


#controlsPanel {
	position: absolute;
	left: 0.75rem;
	right: 0.75rem;
	bottom: 0.75rem;
	max-height: 42vh;
	overflow: auto;
	padding: 0.55rem 0.7rem;
	background: rgba(0, 0, 0, 0.72);
	border: 1px solid rgba(255,255,255,0.18);
	color: #eee;
	font-size: 12px;
	line-height: 1.35;
	z-index: 3;
}

#controlsPanel summary {
	cursor: pointer;
	font-weight: 700;
}

#controlsPanel .controls-grid {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 0.18rem 0.8rem;
	margin-top: 0.45rem;
}

#controlsPanel .controls-grid span:nth-child(odd) {
	color: #fff;
	font-weight: 700;
}

#controlsPanel .controls-grid span:nth-child(even) {
	color: #ddd;
}


/* Écran d'accueil : paroi en carbone, hublot à anneau riveté, vitre. */
#graph.splash-active #hud,
#graph.splash-active #objectPanel,
#graph.splash-active #controlsPanel,
#graph.splash-active #viewGizmo,
#graph.splash-active #viewsPanel,
#graph.splash-active #scaleBar,
#graph.splash-active #fieldCircle,
#graph.splash-active #fastForwardPanel {
	opacity: 0;
	visibility: hidden;
}

#hud, #objectPanel, #controlsPanel, #viewGizmo, #viewsPanel, #scaleBar, #fieldCircle {
	transition: opacity 0.7s ease;
}

#splash {
	position: absolute;
	inset: 0;
	z-index: 10;
	transform-origin: 50% 50%;
	--r: 300px;
	--rim: 30px;
}

#splash .splash-wall {
	position: absolute;
	inset: 0;
	/* Plaques d'acier brossé de 420 × 280 px : ombre portée du hublot, rivets, joints, reflet par plaque, brossage, teinte. */
	background:
		radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.55) calc(var(--r) + var(--rim)), rgba(0, 0, 0, 0) calc(var(--r) + var(--rim) * 1.5), rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.6) 100%),
		radial-gradient(circle at 50% 14px, #dfe3e8 0, #8d949c 1.8px, #2a2e33 3.2px, rgba(0, 0, 0, 0) 3.8px) 0 0 / 35px 280px,
		radial-gradient(circle at 14px 50%, #dfe3e8 0, #8d949c 1.8px, #2a2e33 3.2px, rgba(0, 0, 0, 0) 3.8px) 0 0 / 420px 35px,
		linear-gradient(to bottom, rgba(0, 0, 0, 0.75) 0 2px, rgba(255, 255, 255, 0.1) 2px 3px, rgba(0, 0, 0, 0) 3px) 0 0 / 100% 280px,
		linear-gradient(to right, rgba(0, 0, 0, 0.75) 0 2px, rgba(255, 255, 255, 0.08) 2px 3px, rgba(0, 0, 0, 0) 3px) 0 0 / 420px 100%,
		linear-gradient(135deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, 0.18)) 0 0 / 420px 280px,
		repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0 1px, rgba(255, 255, 255, 0) 1px 3px),
		linear-gradient(160deg, #474c54 0%, #2c3036 55%, #1c1f23 100%);
	-webkit-mask: radial-gradient(circle at 50% 50%, transparent var(--r), #000 calc(var(--r) + 1px));
	mask: radial-gradient(circle at 50% 50%, transparent var(--r), #000 calc(var(--r) + 1px));
}

#splash .splash-rim {
	position: absolute;
	left: 50%;
	top: 50%;
	width: calc(2 * (var(--r) + var(--rim)));
	height: calc(2 * (var(--r) + var(--rim)));
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background:
		radial-gradient(circle, rgba(0, 0, 0, 0.55) var(--r), rgba(0, 0, 0, 0) calc(var(--r) + var(--rim) * 0.35), rgba(0, 0, 0, 0) calc(var(--r) + var(--rim) * 0.8), rgba(0, 0, 0, 0.6) calc(var(--r) + var(--rim))),
		conic-gradient(from 25deg, #4a515b, #eceff3, #383d45, #b9bfc7, #1f2328, #d6dbe1, #434a53, #f5f7f9, #4a515b);
	-webkit-mask: radial-gradient(circle, transparent var(--r), #000 calc(var(--r) + 1px));
	mask: radial-gradient(circle, transparent var(--r), #000 calc(var(--r) + 1px));
	box-shadow: 0 0 calc(var(--rim) * 1.2) rgba(0, 0, 0, 0.9);
}

#splash .splash-glass {
	position: absolute;
	left: 50%;
	top: 50%;
	width: calc(2 * var(--r));
	height: calc(2 * var(--r));
	transform: translate(-50%, -50%);
	border-radius: 50%;
	cursor: pointer;
	background:
		linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 28%, rgba(255, 255, 255, 0) 72%, rgba(170, 210, 255, 0.05) 100%),
		radial-gradient(ellipse 45% 20% at 32% 22%, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0));
	box-shadow: inset 0 0 calc(var(--rim) * 1.8) rgba(0, 0, 0, 0.95), inset 0 0 3px rgba(0, 0, 0, 1);
}

#splash .splash-bolt {
	position: absolute;
	left: 50%;
	top: 50%;
	width: calc(var(--rim) * 0.2);
	height: calc(var(--rim) * 0.2);
	border-radius: 50%;
	transform: translate(-50%, -50%) rotate(var(--angle)) translate(calc(var(--r) + var(--rim) * 0.56));
	background: radial-gradient(circle at 35% 30%, #f4f5f7 0%, #9aa1ab 35%, #3b4047 75%, #16181b 100%);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* Texte en bas de la vitre, à l'échelle du hublot ; padding-left compense l'espacement après la dernière lettre. */
#splash .splash-enter {
	position: absolute;
	left: 50%;
	top: calc(50% + var(--r) * 0.74);
	transform: translate(-50%, -50%);
	padding: 0 0 0 0.35em;
	background: none;
	border: 0;
	color: #fff;
	font: inherit;
	font-size: clamp(20px, calc(var(--r) * 0.09), 60px);
	font-weight: 300;
	letter-spacing: 0.35em;
	text-transform: uppercase;
	white-space: nowrap;
	text-shadow: 0 0 0.3em rgba(170, 210, 255, 0.35);
	cursor: pointer;
	transition: text-shadow 0.3s ease;
}

#splash .splash-glass:hover ~ .splash-enter,
#splash .splash-enter:hover {
	text-shadow: 0 0 0.1em rgba(255, 255, 255, 0.7), 0 0 0.6em rgba(170, 210, 255, 0.6);
}

#splash .splash-enter:focus {
	outline: none;
}

/* Sortie : éclat du texte, flare horizontal et halo derrière les lettres (z-index -1 dans le contexte créé par transform). */
#splash .splash-enter::before,
#splash .splash-enter::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: -1;
	opacity: 0;
	pointer-events: none;
}

#splash .splash-enter::before {
	width: 14em;
	height: max(2px, 0.06em);
	background: linear-gradient(90deg, rgba(120, 170, 255, 0), rgba(170, 210, 255, 0.9) 35%, #fff 50%, rgba(170, 210, 255, 0.9) 65%, rgba(120, 170, 255, 0));
	box-shadow: 0 0 0.3em rgba(170, 210, 255, 0.8);
	transform: translate(-50%, -50%) scaleX(0);
}

#splash .splash-enter::after {
	width: 4em;
	height: 4em;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.85) 0%, rgba(170, 210, 255, 0.35) 30%, rgba(120, 170, 255, 0) 70%);
	transform: translate(-50%, -50%) scale(0.2);
}

#splash.leaving .splash-glass,
#splash.leaving .splash-enter {
	cursor: default;
	pointer-events: none;
}

#splash.leaving .splash-enter {
	animation: splash-enter-burst 0.9s ease-out forwards;
}

#splash.leaving .splash-enter::before {
	animation: splash-enter-flare 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

#splash.leaving .splash-enter::after {
	animation: splash-enter-bloom 0.9s ease-out forwards;
}

@keyframes splash-enter-burst {
	12% {
		color: #fff;
		text-shadow: 0 0 0.05em #fff, 0 0 0.25em #fff, 0 0 0.7em rgba(170, 210, 255, 0.95), 0 0 1.8em rgba(110, 160, 255, 0.8);
	}
	100% {
		color: rgba(255, 255, 255, 0);
		letter-spacing: 1em;
		padding-left: 1em;
		text-shadow: 0 0 0.05em rgba(255, 255, 255, 0), 0 0 0.25em rgba(255, 255, 255, 0), 0 0 0.7em rgba(170, 210, 255, 0), 0 0 1.8em rgba(110, 160, 255, 0);
	}
}

@keyframes splash-enter-flare {
	15% { opacity: 1; }
	100% { opacity: 0; transform: translate(-50%, -50%) scaleX(1); }
}

@keyframes splash-enter-bloom {
	15% { opacity: 1; }
	100% { opacity: 0; transform: translate(-50%, -50%) scale(3); }
}