:root {
	--bg: #000000;
	--panel: rgba(14, 14, 14, 0.84);
	--panel-border: #db88c0;
	--ink: #f4d8e9;
	--muted: #d1a7c4;
	--accent-pink: #db88c0;
	--accent-lilac: #9f7fd2;
	--accent-cyan: #4fc4db;
	--shadow: rgba(219, 136, 192, 0.24);
	--timer: #9f7fd2;
	--timer-shadow: rgba(47, 54, 55, 0.32);
	--overlay: rgba(31, 35, 36, 0.82);
	--player-panel: rgba(244, 237, 213, 0.92);
	--player-panel-border: rgba(63, 69, 70, 0.28);
	--player-panel-text: #353c3d;
}

body {
	margin: 0;
	min-height: 100vh;
	background: var(--bg);
	font-family: monospace;
}

.launcher-page,
.control-page {
	color: var(--ink);
	display: flex;
	align-items: center;
	justify-content: center;
}

.player-page {
	color: var(--timer);
	overflow: hidden;
}

.panel {
	background: var(--panel);
	box-shadow: 0 20px 50px var(--shadow);
}

.launcher-page .panel {
	width: min(460px, calc(100vw - 32px));
	padding: 28px;
	border: 4px solid var(--panel-border);
	text-align: center;
}

.control-page .panel {
	width: min(560px, calc(100vw - 32px));
	border: 4px solid var(--panel-border);
	padding: 24px;
}

.launcher-page h1,
.control-page h1 {
	margin: 0 0 8px;
	font-size: 1.8rem;
	letter-spacing: 2px;
	color: var(--ink);
}

.launcher-page h1 {
	margin-bottom: 10px;
}

.launcher-page p,
.control-page p {
	margin: 0 0 18px;
	line-height: 1.5;
	color: var(--muted);
}

.launcher-page p {
	margin-bottom: 24px;
	line-height: 1.6;
}

.actions {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

.launcher-page a,
.control-page button {
	display: block;
	padding: 12px 16px;
	border: 1px solid rgba(63, 69, 70, 0.26);
	background: var(--accent-lilac);
	color: #f8f3e3;
	font: inherit;
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 10px 22px rgba(79, 83, 84, 0.18);
}

.launcher-page a {
	padding: 14px 18px;
}

.launcher-page a:hover,
.control-page button:hover:enabled {
	filter: brightness(1.04);
}

.control-page button:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.buttonGrid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}

.buttonSection {
	display: grid;
	gap: 24px;
}

.controlActions {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	padding-top: 6px;
}

#status {
	margin-bottom: 16px;
	min-height: 24px;
	color: var(--muted);
}

#screen {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	text-align: center;
}

#timer {
	font-size: clamp(8rem, 18vw, 16rem);
	color: var(--timer);
	text-shadow: 0 0 28px var(--timer-shadow);
}

#audioUnlock {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: var(--overlay);
	z-index: 20;
}

#audioUnlock[hidden] {
	display: none;
}

#audioUnlock button {
	border: 1px solid var(--player-panel-border);
	background: var(--player-panel);
	color: var(--player-panel-text);
	font: inherit;
	font-size: 1.1rem;
	letter-spacing: 0.08em;
	padding: 18px 24px;
	cursor: pointer;
	box-shadow: 0 20px 50px rgba(39, 44, 45, 0.28);
}

#videoOverlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: #111415;
	display: none;
	justify-content: center;
	align-items: center;
	z-index: 10;
}

video {
	width: 100vw;
	height: 100vh;
	object-fit: cover;
}

@media (max-width: 560px) {
	.actions,
	.buttonGrid,
	.controlActions {
		grid-template-columns: 1fr;
	}

	.control-page .panel {
		width: calc(100vw - 24px);
		padding: 20px;
	}
}