/* =========================================================================
   Centova Stream - front-end player
   All rules scoped under .cs-deck so they don't leak into the theme.
   ========================================================================= */

.cs-deck {
	--cs-accent: #E60026;
	--cs-bg: #0b0b0f;
	--cs-panel: #121216;
	--cs-stage: #0e0e12;
	--cs-ring: #2a292e;
	--cs-arm: #9494a8;
	--cs-needle: #7df4ff;
	--cs-cyan: #7df4ff;
	--cs-text: #e7e7ef;
	--cs-muted: #7a7a8c;
	--cs-green: #37e07b;
	--cs-radius: 18px;

	box-sizing: border-box;
	width: 100%;
	max-width: 380px;
	margin: 0 auto;
	padding: 20px;
	background: var(--cs-bg);
	border: 1px solid #1d1d24;
	border-radius: var(--cs-radius);
	box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
	color: var(--cs-text);
	font-family: ui-monospace, "SFMono-Regular", "DM Mono", "Roboto Mono", Menlo, Consolas, monospace;
	-webkit-font-smoothing: antialiased;
}

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

.cs-deck--error {
	font-family: sans-serif;
	color: #ffb3b3;
	max-width: 100%;
	padding: 14px 18px;
}

/* ---- Top bar --------------------------------------------------------- */
.cs-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.cs-station {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #cfcfdb;
	font-weight: 600;
}

.cs-rec-dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--cs-accent);
	box-shadow: 0 0 10px var(--cs-accent);
}

.cs-live {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 9px;
	border-radius: 6px;
	background: rgba(55, 224, 123, .1);
	border: 1px solid rgba(55, 224, 123, .35);
	color: var(--cs-green);
	font-size: 10px;
	font-weight: 700;
	white-space: nowrap;
}

.cs-live-ico { display: inline-flex; line-height: 0; }
.cs-live-count { font-variant-numeric: tabular-nums; }
.cs-live.cs-live--err {
	background: rgba(230, 0, 38, .12);
	border-color: rgba(230, 0, 38, .4);
	color: #ff5a6e;
}
.cs-live.cs-live--idle {
	background: rgba(120, 120, 140, .1);
	border-color: rgba(120, 120, 140, .3);
	color: var(--cs-muted);
}
.cs-live.cs-live--on .cs-live-ico { animation: cs-pulse 1.4s ease-in-out infinite; }

@keyframes cs-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: .35; }
}

/* ---- Stage / vinyl --------------------------------------------------- */
.cs-stage {
	margin-top: 16px;
	padding: 22px;
	background: var(--cs-stage);
	border: 1px solid #17171d;
	border-radius: 14px;
}

.cs-vinyl-wrap {
	position: relative;
	width: 100%;
	max-width: 260px;
	margin: 0 auto;
	aspect-ratio: 1 / 1;
}

@supports not (aspect-ratio: 1 / 1) {
	.cs-vinyl-wrap { height: 0; padding-bottom: 100%; }
}

.cs-vinyl {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background:
		repeating-radial-gradient(circle at 50% 50%,
			#161619 0 2px,
			#0d0d10 2px 4px);
	box-shadow:
		inset 0 0 0 1px rgba(255, 255, 255, .03),
		inset 0 0 40px rgba(0, 0, 0, .8),
		0 10px 30px rgba(0, 0, 0, .6);
	display: flex;
	align-items: center;
	justify-content: center;
	animation: cs-spin 4s linear infinite;
	animation-play-state: paused;
	will-change: transform;
}

.cs-vinyl-grooves {
	position: absolute;
	inset: 6%;
	border-radius: 50%;
	background: repeating-radial-gradient(circle at 50% 50%,
		rgba(255, 255, 255, .04) 0 1px,
		transparent 1px 5px);
	pointer-events: none;
}

.cs-deck.is-playing .cs-vinyl { animation-play-state: running; }

@keyframes cs-spin {
	to { transform: rotate(360deg); }
}

/* Red glowing label in the middle of the record */
.cs-label {
	position: relative;
	width: 46%;
	height: 46%;
	border-radius: 50%;
	background: var(--cs-accent); /* fallback */
	background-image: radial-gradient(circle at 50% 40%,
		color-mix(in srgb, var(--cs-accent) 92%, #fff 8%),
		var(--cs-accent) 60%,
		color-mix(in srgb, var(--cs-accent) 70%, #000 30%));
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow:
		0 0 28px color-mix(in srgb, var(--cs-accent) 70%, transparent),
		inset 0 0 20px rgba(0, 0, 0, .35);
}

.cs-label-glow {
	position: absolute;
	inset: -18%;
	border-radius: 50%;
	background: radial-gradient(circle,
		color-mix(in srgb, var(--cs-accent) 45%, transparent) 0%,
		transparent 65%);
	opacity: .5;
	transition: opacity .4s ease;
	pointer-events: none;
}
.cs-deck.is-playing .cs-label-glow { opacity: 1; }

.cs-label-icon { line-height: 0; opacity: .95; }

.cs-hub {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 12px;
	margin: -6px 0 0 -6px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 6px rgba(255, 255, 255, .6);
	z-index: 3;
}

/* ---- Tonearm --------------------------------------------------------- */
.cs-tonearm {
	position: absolute;
	top: -4px;
	right: 4px;
	width: 10px;
	height: 56%;
	transform-origin: top right;
	transform: rotate(-20deg);            /* parked: off the disc */
	transition: transform .7s cubic-bezier(.65, 0, .35, 1);
	z-index: 4;
}
.cs-deck.is-playing .cs-tonearm {
	transform: rotate(14deg);             /* playing: needle rests on the disc */
}

/* pivot / mount screw */
.cs-tonearm::before {
	content: "";
	position: absolute;
	top: -5px;
	right: -3px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: radial-gradient(circle at 40% 35%, #c9c9d6, #6c6c7e);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}

.cs-arm-rod {
	position: absolute;
	top: 0;
	right: 3px;
	width: 4px;
	height: 100%;
	border-radius: 2px;
	background: linear-gradient(180deg, #b3b3c2, var(--cs-arm));
}

.cs-arm-needle {
	position: absolute;
	bottom: -4px;
	right: 1px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--cs-needle);
	box-shadow: 0 0 8px 2px color-mix(in srgb, var(--cs-needle) 80%, transparent);
}

/* ---- Now playing meta ----------------------------------------------- */
.cs-meta {
	margin-top: 18px;
	text-align: center;
}

.cs-now-spinning {
	display: inline-block;
	padding: 3px 9px;
	border-radius: 4px;
	background: #2a0a10; /* fallback */
	background: color-mix(in srgb, var(--cs-accent) 22%, #000 78%);
	color: #ff6b7e; /* fallback */
	color: color-mix(in srgb, var(--cs-accent) 60%, #fff 40%);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .18em;
}

.cs-track {
	margin: 10px 0 2px;
	font-family: "Oswald", "Archivo Narrow", system-ui, sans-serif;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: .01em;
	color: #fff;
}

.cs-artist {
	margin: 0;
	font-family: system-ui, sans-serif;
	font-size: 14px;
	font-weight: 600;
	color: var(--cs-cyan);
}

.cs-selector {
	margin: 6px 0 0;
	font-size: 10px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--cs-muted);
}

/* ---- VU meter -------------------------------------------------------- */
.cs-vu-panel {
	margin-top: 18px;
	padding: 14px;
	background: #0d0d11;
	border: 1px solid #17171d;
	border-radius: 12px;
}

.cs-vu-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 10px;
	letter-spacing: .12em;
	color: var(--cs-muted);
	margin-bottom: 10px;
}
.cs-format { color: var(--cs-cyan); }

.cs-vu {
	display: flex;
	align-items: flex-end;
	gap: 5px;
	height: 56px;
}

.cs-vu-bar {
	flex: 1;
	height: 16%;
	border-radius: 3px;
	background: var(--cs-cyan);
	transform-origin: bottom;
	animation: cs-vu-bounce 0.8s ease-in-out infinite alternate;
	animation-play-state: paused;
}

/* colour pattern across the bars, echoing the mockup */
.cs-vu-bar:nth-child(3n+1) { background: var(--cs-cyan); }
.cs-vu-bar:nth-child(3n+2) { background: var(--cs-green); }
.cs-vu-bar:nth-child(3n+3) { background: #f4b740; }
.cs-vu-bar:nth-child(4),
.cs-vu-bar:nth-child(8) { background: var(--cs-accent); }

/* stagger + vary the motion so it looks organic */
.cs-vu-bar:nth-child(1)  { animation-duration: .70s; animation-delay: -0.05s; }
.cs-vu-bar:nth-child(2)  { animation-duration: .54s; animation-delay: -0.22s; }
.cs-vu-bar:nth-child(3)  { animation-duration: .82s; animation-delay: -0.11s; }
.cs-vu-bar:nth-child(4)  { animation-duration: .48s; animation-delay: -0.31s; }
.cs-vu-bar:nth-child(5)  { animation-duration: .76s; animation-delay: -0.17s; }
.cs-vu-bar:nth-child(6)  { animation-duration: .60s; animation-delay: -0.26s; }
.cs-vu-bar:nth-child(7)  { animation-duration: .88s; animation-delay: -0.08s; }
.cs-vu-bar:nth-child(8)  { animation-duration: .52s; animation-delay: -0.19s; }
.cs-vu-bar:nth-child(9)  { animation-duration: .72s; animation-delay: -0.29s; }
.cs-vu-bar:nth-child(10) { animation-duration: .58s; animation-delay: -0.13s; }
.cs-vu-bar:nth-child(11) { animation-duration: .80s; animation-delay: -0.24s; }
.cs-vu-bar:nth-child(12) { animation-duration: .50s; animation-delay: -0.06s; }

.cs-deck.is-playing .cs-vu-bar { animation-play-state: running; }

@keyframes cs-vu-bounce {
	0%   { height: 18%; }
	100% { height: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.cs-vinyl,
	.cs-vu-bar,
	.cs-live.cs-live--on .cs-live-ico { animation: none !important; }
}

/* ---- Controls -------------------------------------------------------- */
.cs-controls {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 18px;
}

.cs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	cursor: pointer;
	color: #d4d4e0;
	background: #1a1a20;
	border-radius: 10px;
	width: 40px;
	height: 40px;
	padding: 0;
	transition: background .18s ease, color .18s ease, transform .1s ease;
	line-height: 0;
}
.cs-btn:hover { background: #24242c; color: #fff; }
.cs-btn:active { transform: scale(.94); }
.cs-btn:focus-visible { outline: 2px solid var(--cs-cyan); outline-offset: 2px; }

.cs-btn-play {
	width: 56px;
	height: 56px;
	border-radius: 14px;
	color: #fff;
	background: var(--cs-accent);
	box-shadow: 0 8px 22px color-mix(in srgb, var(--cs-accent) 45%, transparent);
	position: relative;
}
.cs-btn-play:hover {
	background: color-mix(in srgb, var(--cs-accent) 88%, #fff 12%);
	color: #fff;
}

.cs-spinner {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 3px solid rgba(255, 255, 255, .35);
	border-top-color: #fff;
	animation: cs-rotate .8s linear infinite;
}
@keyframes cs-rotate { to { transform: rotate(360deg); } }

.cs-volume {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-left: auto;
	flex: 1;
	min-width: 90px;
}

.cs-btn-mute {
	width: 34px;
	height: 34px;
	background: transparent;
}
.cs-btn-mute:hover { background: #1a1a20; }

.cs-vol-slider {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 4px;
	border-radius: 4px;
	background: #2a2a33;
	cursor: pointer;
}
.cs-vol-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--cs-accent) 60%, transparent);
}
.cs-vol-slider::-moz-range-thumb {
	width: 13px;
	height: 13px;
	border: none;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--cs-accent) 60%, transparent);
}

.cs-deck [hidden] { display: none !important; }