:root {
	--ink: #e9eef7;
	--muted: #a6b2c9;
	--chrome: #0f1828;
	--chrome-2: #121a2e;
	--accent: #6ea8fe;
	--line: #27314c;
	--radius: 14px;
}

* {
	box-sizing: border-box;
}
html,
body {
	height: 100%;
}

#root {
	height: 100vh;
	width: 100vw;
	display: flex;
	align-items: stretch;
	justify-content: stretch;
}

.player-shell {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	border-radius: 12px;
	overflow: clip;
	background: linear-gradient(180deg, #0e1526, #0a1020 60%, #070c18);
	color: var(--ink);
	border: 1px solid var(--line);
}

.player-bar {
	display: flex;
	align-items: center;
	height: 44px;
	padding: 0 14px;
	background: linear-gradient(180deg, var(--chrome), var(--chrome-2));
	border-bottom: 1px solid var(--line);
	letter-spacing: 0.3px;
	font-weight: 600;
}

.player-bar--bottom {
	height: 58px;
	border-top: 1px solid var(--line);
	border-bottom: 0;
	margin-top: auto;
}

.player-stage {
	position: relative;
	flex: 1 1 auto;
	display: grid;
	place-items: center;
	background: #0d1526;
	overflow: hidden;
}

.gradient-layer {
	position: absolute;
	inset: 0;
	background: radial-gradient(40% 30% at 70% 10%, rgba(110, 168, 254, 0.35), transparent 60%),
		radial-gradient(50% 30% at 20% 90%, rgba(110, 254, 206, 0.22), transparent 60%),
		radial-gradient(90% 80% at 50% 40%, rgba(85, 97, 255, 0.18), transparent 70%);
	pointer-events: none;
}

.poster {
	width: min(100%, 960px);
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 10px;
	outline: 1px solid #202744;
	filter: saturate(0.9) contrast(1.05) brightness(1.05);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.big-play {
	position: absolute;
	display: grid;
	place-items: center;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.55);
	backdrop-filter: blur(4px);
	border: 1px solid #2a3352;
	font-size: 30px;
	cursor: pointer;
	user-select: none;
}

.controls {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
}

.btn {
	height: 36px;
	min-width: 36px;
	border: 1px solid #283456;
	border-radius: 10px;
	background: #141c33;
	color: var(--ink);
	cursor: pointer;
}

.btn:hover {
	border-color: var(--accent);
}

.progress {
	flex: 1 1 auto;
	height: 6px;
	border-radius: 999px;
	background: #1b2340;
	border: 1px solid #283456;
	position: relative;
}

.progress .dot {
	position: absolute;
	top: 50%;
	left: 36%;
	transform: translate(-50%, -50%);
	width: 14px;
	height: 14px;
	border-radius: 999px;
	background: var(--accent);
	box-shadow: 0 0 18px rgba(110, 168, 254, 0.8);
}

.spacer {
	margin-left: auto;
}

.ad-slot {
	position: absolute;
	right: 14px;
	bottom: 16px;
	width: 320px;
	height: 50px;
	display: grid;
	place-items: center;
	font-size: 12px;
	color: var(--muted);
	background: rgba(8, 12, 24, 0.65);
	border: 1px dashed #304060;
	border-radius: 8px;
	backdrop-filter: blur(4px);
}