*,
*::before,
*::after {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	height: 100%;
	font-family: system-ui, -apple-system, sans-serif;
	background: #989898;
	color: #e8e8ec;
}

#app {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-height: 100%;
	padding: 1.5rem;
	gap: 1rem;
}

#canvas-container {
	width: min(100%, 960px);
	aspect-ratio: 16 / 10;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
}

#canvas-container canvas {
	display: block;
	width: 100%;
	height: 100%;
}

.animation-progress {
	width: min(100%, 960px);
	height: 12px;
	margin-top: -0.5rem;
	background: rgba(0, 0, 0, 0.35);
	border-radius: 6px;
	overflow: hidden;
	cursor: pointer;
}

.animation-progress-fill {
	width: 0%;
	height: 100%;
	background: #ffffff;
	transform-origin: left center;
	transition: none;
	pointer-events: none;
}

.controls {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
}

.controls-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
}

.action-btn {
	padding: 0.6rem 1.25rem;
	font-size: 1rem;
	border: none;
	border-radius: 6px;
	background: #4a90d9;
	color: #fff;
	cursor: pointer;
	transition: background 0.15s ease;
}

.action-btn:hover {
	background: #3a7bc0;
}

.action-btn:active {
	background: #2f6aa8;
}

.anim-btn {
	background: #3d8f5a;
}

.anim-btn:hover {
	background: #35804f;
}

.anim-btn:active {
	background: #2d6b42;
}

.anim-btn.active {
	background: #2d6b42;
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35);
}

.camera-btn {
	background: #5a6a7a;
}

.camera-btn:hover {
	background: #4a5a6a;
}

.camera-btn:active {
	background: #3d4a57;
}

.camera-btn.active {
	background: #2f6aa8;
}

.camera-btn:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.orbit-btn {
	background: #6a5a8a;
}

.orbit-btn:hover {
	background: #5a4a7a;
}

.orbit-btn:active,
.orbit-btn.active {
	background: #4a3a6a;
}

.ring-btn {
	background: #b59b1f;
}

.ring-btn:hover {
	background: #a08a1b;
}

.ring-btn:active {
	background: #8a7617;
}

.player-group-btn {
	color: #ffffff;
}

.player-group-btn[data-ui-color="#FF0051"] {
	background: #FF0051;
}

.player-group-btn[data-ui-color="#FF0051"]:hover {
	background: #e00048;
}

.player-group-btn[data-ui-color="#FF0051"]:active,
.player-group-btn[data-ui-color="#FF0051"].active {
	background: #c4003f;
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35);
}

.player-group-btn[data-ui-color="#2A4E9D"] {
	background: #2A4E9D;
}

.player-group-btn[data-ui-color="#2A4E9D"]:hover {
	background: #234289;
}

.player-group-btn[data-ui-color="#2A4E9D"]:active,
.player-group-btn[data-ui-color="#2A4E9D"].active {
	background: #1c3670;
	box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35);
}

.player-group-btn[data-ui-color="#F9FF00"] {
	background: #F9FF00;
	color: #1a1a1a;
}

.player-group-btn[data-ui-color="#F9FF00"]:hover {
	background: #e6eb00;
}

.player-group-btn[data-ui-color="#F9FF00"]:active,
.player-group-btn[data-ui-color="#F9FF00"].active {
	background: #d4d800;
	box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.25);
}