.obr-player {
	--obr-bg: #1A1B1E;
	--obr-surface-2: #2C2D31;
	--obr-amber: #F5A623;
	--obr-text: #F4F1EA;
	--obr-text-dim: #9A9B9F;
	--obr-line: #38393D;

	box-sizing: border-box;
	background: var(--obr-bg);
	border-radius: 14px;
	padding: 16px;
	border: 1px solid #000;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
	max-width: 640px;
	margin: 24px auto;

	display: grid;
	grid-template-columns: 72px 1fr auto;
	grid-template-areas:
		"art eyebrow eyebrow"
		"art ticker  ticker"
		"art progress progress";
	column-gap: 16px;
	row-gap: 6px;
	align-items: center;
}
.obr-player * { box-sizing: border-box; }

/* Controls (play button) sit inline with the eyebrow row on desktop via order,
   handled through the grid areas below rather than floats, so no JS is needed
   to reflow at each breakpoint. */
.obr-player {
	grid-template-areas:
		"art eyebrow controls"
		"art ticker  controls"
		"art progress progress";
}
.obr-controls { grid-area: controls; align-self: center; justify-self: end; }

/* ---- Art / equalizer ---- */
.obr-art {
	width: 72px;
	height: 72px;
	border-radius: 10px;
	background: linear-gradient(160deg, var(--obr-surface-2), var(--obr-bg));
	border: 1px solid var(--obr-line);
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}
.obr-cover {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.obr-eq {
	display: flex;
	align-items: flex-end;
	gap: 4px;
	height: 34px;
	position: relative;
	z-index: 1;
}
.obr-eq--overlay {
	position: absolute;
	bottom: 8px;
	left: 0; right: 0;
	justify-content: center;
	height: 20px;
}
.obr-eq span {
	display: block;
	width: 5px;
	border-radius: 2px;
	background: var(--obr-amber);
	animation: obr-bounce 1.1s ease-in-out infinite;
	animation-play-state: paused;
	opacity: 0.55;
}
.obr-eq span:nth-child(1) { height: 35%; animation-delay: -0.9s; }
.obr-eq span:nth-child(2) { height: 65%; animation-delay: -0.5s; }
.obr-eq span:nth-child(3) { height: 100%; animation-delay: -1.2s; }
.obr-eq span:nth-child(4) { height: 55%; animation-delay: -0.2s; }
.obr-eq span:nth-child(5) { height: 30%; animation-delay: -0.7s; }
.obr-player.is-playing .obr-eq span { animation-play-state: running; opacity: 1; }
@keyframes obr-bounce {
	0%, 100% { transform: scaleY(0.35); }
	50% { transform: scaleY(1); }
}

/* ---- Eyebrow row (station + sponsor badge) ---- */
.obr-eyebrow-row {
	grid-area: eyebrow;
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}
.obr-eyebrow {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--obr-amber);
	display: flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
	flex: 0 0 auto;
}
.obr-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--obr-text-dim); display: inline-block; }
.obr-player.is-playing .obr-dot {
	background: #E24A3F;
	animation: obr-pulse 1.6s ease-out infinite;
}
@keyframes obr-pulse {
	0% { box-shadow: 0 0 0 0 rgba(226, 74, 63, 0.55); }
	70% { box-shadow: 0 0 0 6px rgba(226, 74, 63, 0); }
	100% { box-shadow: 0 0 0 0 rgba(226, 74, 63, 0); }
}
.obr-sponsor-badge {
	font-size: 10.5px;
	font-weight: 600;
	color: var(--obr-bg);
	background: var(--obr-amber);
	padding: 2px 8px;
	border-radius: 20px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
	text-decoration: none;
	display: inline-block;
}
a.obr-sponsor-badge {
	cursor: pointer;
	transition: background 0.15s ease, transform 0.15s ease;
}
a.obr-sponsor-badge:hover {
	background: #FFB33E;
}
a.obr-sponsor-badge:active {
	transform: scale(0.97);
}
/* Small arrow cue so a clickable badge reads differently from the plain-text one */
a.obr-sponsor-badge::after {
	content: "›";
	margin-left: 4px;
	font-weight: 700;
}

/* ---- Ticker ---- */
.obr-ticker-wrap {
	grid-area: ticker;
	overflow: hidden;
	white-space: nowrap;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
}
.obr-ticker {
	display: inline-block;
	font-size: 15.5px;
	font-weight: 600;
	color: var(--obr-text);
}
.obr-ticker .artist { color: var(--obr-text-dim); font-weight: 400; }
.obr-ticker.obr-scroll { padding-left: 100%; animation: obr-marquee 14s linear infinite; }
.obr-ticker-wrap:hover .obr-ticker.obr-scroll { animation-play-state: paused; }
@keyframes obr-marquee {
	0% { transform: translateX(0); }
	100% { transform: translateX(-100%); }
}

/* ---- Progress row ---- */
.obr-progress-row {
	grid-area: progress;
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}
.obr-time {
	font-size: 10.5px;
	color: var(--obr-text-dim);
	font-variant-numeric: tabular-nums;
	flex: 0 0 auto;
	width: 32px;
}
.obr-time--end { text-align: right; }
.obr-progress {
	-webkit-appearance: none;
	appearance: none;
	flex: 1 1 auto;
	min-width: 40px;
	height: 4px;
	border-radius: 2px;
	background: var(--obr-line);
	outline: none;
	cursor: pointer;
}
.obr-progress::-webkit-slider-runnable-track {
	height: 4px; border-radius: 2px;
	background: linear-gradient(to right, var(--obr-amber) var(--pct, 0%), var(--obr-line) 0);
}
.obr-progress::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 12px; height: 12px; border-radius: 50%;
	background: var(--obr-amber);
	box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.18);
	cursor: pointer;
	margin-top: -4px;
}
.obr-progress::-moz-range-thumb {
	width: 12px; height: 12px; border-radius: 50%; border: none;
	background: var(--obr-amber);
	cursor: pointer;
}

/* ---- Play button + volume ---- */
.obr-controls { display: flex; align-items: center; gap: 10px; }
.obr-play {
	width: 44px; height: 44px; border-radius: 50%;
	border: none;
	background: var(--obr-amber);
	color: var(--obr-bg);
	font-size: 15px;
	display: flex; align-items: center; justify-content: center;
	cursor: pointer;
	transition: transform 0.15s ease, background 0.15s ease;
	flex: 0 0 auto;
}
.obr-play:hover { background: #FFB33E; transform: scale(1.05); }
.obr-play:active { transform: scale(0.96); }

.obr-vol { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.obr-vol-icon { width: 16px; height: 16px; overflow: visible; }
.obr-vol-speaker { fill: var(--obr-text-dim); }
.obr-vol-wave { stroke: var(--obr-text-dim); opacity: 0; transition: opacity 0.12s ease; }
.obr-vol-mute-line { stroke: var(--obr-text-dim); opacity: 0; transition: opacity 0.12s ease; }

/* Volume states, toggled by JS on .obr-vol via data-level="muted|low|high" */
.obr-vol[data-level="low"] .obr-vol-wave-1 { opacity: 1; }
.obr-vol[data-level="high"] .obr-vol-wave-1,
.obr-vol[data-level="high"] .obr-vol-wave-2 { opacity: 1; }
.obr-vol[data-level="muted"] .obr-vol-mute-line { opacity: 1; }
.obr-vol[data-level="muted"] .obr-vol-speaker { fill: #6C6D70; }
.obr-vol-range {
	-webkit-appearance: none; appearance: none;
	width: 54px; height: 3px; border-radius: 2px;
	background: var(--obr-line);
	outline: none; cursor: pointer;
}
.obr-vol-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 9px; height: 9px; border-radius: 50%;
	background: var(--obr-text-dim);
	cursor: pointer;
}

/* =========================================================
   RESPONSIVE BREAKPOINTS
   Tablet: hide volume, tighten spacing.
   Phone: play button moves up next to the station/sponsor
   row, progress bar becomes its own full-width row so it's
   still comfortable to tap/drag, ticker gets a touch bigger
   for readability.
   ========================================================= */

/* Tablet */
@media (max-width: 768px) {
	.obr-player { max-width: 100%; }
	.obr-vol { display: none; }
}

/* Phone */
@media (max-width: 520px) {
	.obr-player {
		grid-template-columns: 56px 1fr auto;
		grid-template-areas:
			"art eyebrow controls"
			"art ticker  controls"
			"progress progress progress";
		padding: 12px;
		column-gap: 12px;
		row-gap: 8px;
	}
	.obr-art { width: 56px; height: 56px; }
	.obr-eq { height: 26px; }
	.obr-ticker { font-size: 14.5px; }
	.obr-sponsor-badge { font-size: 9.5px; padding: 2px 6px; }
	.obr-play { width: 40px; height: 40px; font-size: 13px; }
	.obr-time { width: 28px; font-size: 10px; }
}

/* Very narrow (small phones) — drop the sponsor badge text down
   rather than truncating it into nothing. */
@media (max-width: 360px) {
	.obr-eyebrow-row { flex-wrap: wrap; row-gap: 4px; }
}