/**
 * DME Radio Player — player.css
 * Variant C "Expandable Dock" — dark cyberpunk / neon UI.
 *
 * Styles the binding DOM CONTRACT selectors. All accent coloring derives from
 * the CSS custom property --dme-accent (set on #dme-radio-player by player.js
 * to the active station color). Default accent is neon cyan.
 *
 * Fonts (loaded via Google Fonts by the frontend enqueue):
 *   Orbitron        -> headings / station names / freq
 *   Share Tech Mono -> labels / mono / time
 *   Rajdhani        -> body / subtitles
 *
 * Fully responsive: non-essential bits collapse below 680px.
 */

/* ------------------------------------------------------------------ *
 * Design tokens
 * ------------------------------------------------------------------ */
#dme-radio-player {
	--dme-accent: #2ad4ef;               /* overridden inline by JS per station */
	--dme-bg: #05070f;
	--dme-bg-2: #090d1a;
	--dme-bg-3: #0e1424;
	--dme-line: rgba(42, 212, 239, 0.18);
	--dme-line-soft: rgba(255, 255, 255, 0.07);
	--dme-text: #e7f1ff;
	--dme-text-dim: #8aa0c0;
	--dme-text-mute: #58688a;
	--dme-dock-h: 70px;
	--dme-radius: 10px;
	--dme-glow: 0 0 18px rgba(42, 212, 239, 0.45);

	/* accent helpers built from --dme-accent via color-mix where supported */
	--dme-accent-soft: color-mix(in srgb, var(--dme-accent) 16%, transparent);
	--dme-accent-mid: color-mix(in srgb, var(--dme-accent) 38%, transparent);
	--dme-accent-glow: color-mix(in srgb, var(--dme-accent) 55%, transparent);
}

/* ------------------------------------------------------------------ *
 * Root container — fixed full-width bottom, above everything
 * ------------------------------------------------------------------ */
#dme-radio-player.dme-radio {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	z-index: 2147483000;          /* above Elementor / theme overlays */
	margin: 0;
	padding: 0;
	font-family: "Rajdhani", "Segoe UI", system-ui, sans-serif;
	font-size: 15px;
	line-height: 1.3;
	color: var(--dme-text);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	box-sizing: border-box;
	pointer-events: none;          /* children re-enable; lets page edges click through gaps */
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

#dme-radio-player[hidden] {
	display: none !important;
}

#dme-radio-player * {
	box-sizing: border-box;
}

#dme-radio-player .dme-dock,
#dme-radio-player .dme-panel {
	pointer-events: auto;
}

/* Set accent-derived line/glow once accent is known */
#dme-radio-player.dme-radio {
	--dme-line: color-mix(in srgb, var(--dme-accent) 22%, transparent);
	--dme-glow: 0 0 18px var(--dme-accent-glow);
}

/* ------------------------------------------------------------------ *
 * DOCK — the bottom bar (~70px)
 * ------------------------------------------------------------------ */
.dme-dock {
	position: relative;
	display: grid;
	grid-template-columns: minmax(190px, 1.1fr) minmax(280px, 1.6fr) minmax(170px, 0.9fr);
	align-items: center;
	gap: 18px;
	min-height: var(--dme-dock-h);
	padding: 13px 20px;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0) 40%),
		linear-gradient(180deg, var(--dme-bg-2), var(--dme-bg));
	border-top: 1px solid var(--dme-accent-mid);
	box-shadow:
		0 -1px 0 0 rgba(255, 255, 255, 0.04) inset,
		0 -10px 40px rgba(0, 0, 0, 0.55),
		0 -2px 22px var(--dme-accent-soft);
	backdrop-filter: blur(14px) saturate(140%);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
}

/* thin neon scanline strip along the very top of the dock */
.dme-dock::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -1px;
	height: 2px;
	background: linear-gradient(90deg,
		transparent,
		var(--dme-accent) 18%,
		var(--dme-accent) 82%,
		transparent);
	opacity: 0.85;
	filter: drop-shadow(0 0 6px var(--dme-accent));
	pointer-events: none;
}

/* ------------------------------------------------------------------ *
 * NOW PLAYING block (left)
 * ------------------------------------------------------------------ */
.dme-now {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 2px;
	min-width: 0;
}

.dme-now-title {
	font-family: "Orbitron", "Rajdhani", sans-serif;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.04em;
	color: var(--dme-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
	text-shadow: 0 0 10px var(--dme-accent-soft);
}

.dme-now-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.dme-now-station {
	font-family: "Share Tech Mono", "Consolas", monospace;
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--dme-accent);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.dme-now-freq {
	font-family: "Share Tech Mono", "Consolas", monospace;
	font-size: 11px;
	letter-spacing: 0.1em;
	color: var(--dme-text-mute);
	white-space: nowrap;
	padding-left: 8px;
	border-left: 1px solid var(--dme-line-soft);
	flex: none;
}

/* Equalizer bars — animate only while playing */
.dme-eq {
	display: inline-flex;
	align-items: flex-end;
	gap: 2px;
	width: 16px;
	height: 14px;
	margin-right: 8px;
	flex: none;
}

.dme-eq i {
	display: block;
	width: 3px;
	height: 30%;
	background: var(--dme-accent);
	box-shadow: 0 0 6px var(--dme-accent-glow);
	border-radius: 1px;
	opacity: 0.85;
}

#dme-radio-player.is-playing .dme-eq i {
	animation: dme-eq 0.9s ease-in-out infinite;
}

.dme-eq i:nth-child(1) { animation-delay: 0s; }
.dme-eq i:nth-child(2) { animation-delay: 0.18s; }
.dme-eq i:nth-child(3) { animation-delay: 0.36s; }
.dme-eq i:nth-child(4) { animation-delay: 0.12s; }

@keyframes dme-eq {
	0%, 100% { height: 25%; }
	50%      { height: 100%; }
}

/* ------------------------------------------------------------------ *
 * CENTER: transport controls + seek
 * ------------------------------------------------------------------ */
.dme-center {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 8px;
	min-width: 0;
}

.dme-controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

/* Generic icon button */
#dme-radio-player .dme-btn {
	-webkit-appearance: none;
	appearance: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	margin: 0;
	border: 1px solid var(--dme-line-soft);
	border-radius: 9px;
	background: linear-gradient(180deg, var(--dme-bg-3), var(--dme-bg-2));
	color: var(--dme-text-dim);
	cursor: pointer;
	font: inherit;
	line-height: 0;
	transition:
		color 0.18s ease,
		border-color 0.18s ease,
		background 0.18s ease,
		box-shadow 0.18s ease,
		transform 0.12s ease;
}

#dme-radio-player .dme-btn svg {
	width: 18px;
	height: 18px;
	display: block;
	fill: currentColor;
	stroke: none;
	pointer-events: none;
}

#dme-radio-player .dme-btn:hover {
	color: var(--dme-text);
	border-color: var(--dme-accent-mid);
	box-shadow: 0 0 0 1px var(--dme-accent-soft), 0 0 14px var(--dme-accent-soft);
}

#dme-radio-player .dme-btn:active {
	transform: translateY(1px) scale(0.97);
}

#dme-radio-player .dme-btn:focus-visible {
	outline: none;
	border-color: var(--dme-accent);
	box-shadow: 0 0 0 2px var(--dme-accent-glow);
}

/* "on" toggle state — shuffle / autoplay / repeat(all|one) */
#dme-radio-player .dme-btn.is-on,
#dme-radio-player [data-dme="repeat"][data-mode="all"],
#dme-radio-player [data-dme="repeat"][data-mode="one"] {
	color: var(--dme-accent);
	border-color: var(--dme-accent);
	background:
		linear-gradient(180deg, var(--dme-accent-soft), transparent),
		linear-gradient(180deg, var(--dme-bg-3), var(--dme-bg-2));
	box-shadow:
		0 0 0 1px var(--dme-accent-mid) inset,
		0 0 14px var(--dme-accent-soft);
	text-shadow: 0 0 8px var(--dme-accent-glow);
}

/* repeat "one" — show a small "1" badge */
#dme-radio-player [data-dme="repeat"] {
	position: relative;
}

#dme-radio-player [data-dme="repeat"][data-mode="one"]::after {
	content: "1";
	position: absolute;
	top: 3px;
	right: 4px;
	font-family: "Share Tech Mono", monospace;
	font-size: 9px;
	line-height: 1;
	color: var(--dme-bg);
	background: var(--dme-accent);
	border-radius: 50%;
	width: 11px;
	height: 11px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 6px var(--dme-accent-glow);
}

/* PLAY button — accent ring, the focal control */
#dme-radio-player [data-dme="play"] {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	border: 2px solid var(--dme-accent);
	color: var(--dme-accent);
	background:
		radial-gradient(circle at 50% 35%, var(--dme-accent-soft), transparent 70%),
		linear-gradient(180deg, var(--dme-bg-3), var(--dme-bg));
	box-shadow:
		0 0 0 1px var(--dme-accent-soft) inset,
		0 0 16px var(--dme-accent-soft),
		0 0 24px var(--dme-accent-soft);
}

#dme-radio-player [data-dme="play"] svg {
	width: 22px;
	height: 22px;
}

#dme-radio-player [data-dme="play"]:hover {
	color: #fff;
	box-shadow:
		0 0 0 1px var(--dme-accent) inset,
		0 0 22px var(--dme-accent-glow),
		0 0 40px var(--dme-accent-glow);
}

/* swap play / pause glyphs based on root .is-playing */
#dme-radio-player [data-dme="play"] .dme-ic-pause { display: none; }
#dme-radio-player [data-dme="play"] .dme-ic-play  { display: block; }
#dme-radio-player.is-playing [data-dme="play"] .dme-ic-pause { display: block; }
#dme-radio-player.is-playing [data-dme="play"] .dme-ic-play  { display: none; }

#dme-radio-player.is-playing [data-dme="play"] {
	animation: dme-pulse 2.4s ease-in-out infinite;
}

@keyframes dme-pulse {
	0%, 100% { box-shadow: 0 0 0 1px var(--dme-accent-soft) inset, 0 0 16px var(--dme-accent-soft), 0 0 24px var(--dme-accent-soft); }
	50%      { box-shadow: 0 0 0 1px var(--dme-accent-mid) inset, 0 0 22px var(--dme-accent-glow), 0 0 38px var(--dme-accent-glow); }
}

/* ------------------------------------------------------------------ *
 * SEEK bar + time
 * ------------------------------------------------------------------ */
.dme-progress {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
}

.dme-time-current,
.dme-time-total {
	font-family: "Share Tech Mono", "Consolas", monospace;
	font-size: 11px;
	letter-spacing: 0.06em;
	color: var(--dme-text-mute);
	flex: none;
	min-width: 38px;
	text-align: center;
}

.dme-time-current { color: var(--dme-text-dim); }

#dme-radio-player [data-dme="seek"] {
	position: relative;
	flex: 1 1 auto;
	height: 16px;
	display: flex;
	align-items: center;
	cursor: pointer;
	touch-action: none;
	user-select: none;
}

/* the visible track line */
#dme-radio-player [data-dme="seek"]::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	height: 4px;
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.09);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3) inset;
}

.dme-seek-fill {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	height: 4px;
	width: 0%;
	border-radius: 4px;
	background: linear-gradient(90deg,
		color-mix(in srgb, var(--dme-accent) 70%, #fff 0%),
		var(--dme-accent));
	box-shadow: 0 0 10px var(--dme-accent-glow);
	pointer-events: none;
}

.dme-seek-handle {
	position: absolute;
	top: 50%;
	left: 0%;
	transform: translate(-50%, -50%);
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--dme-accent);
	box-shadow: 0 0 10px var(--dme-accent-glow), 0 0 0 4px var(--dme-accent-soft);
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.15s ease, transform 0.08s ease;
}

#dme-radio-player [data-dme="seek"]:hover .dme-seek-handle,
#dme-radio-player [data-dme="seek"]:focus-visible .dme-seek-handle,
#dme-radio-player [data-dme="seek"].is-dragging .dme-seek-handle {
	opacity: 1;
}

#dme-radio-player [data-dme="seek"]:focus-visible {
	outline: none;
}

#dme-radio-player [data-dme="seek"]:focus-visible::before {
	box-shadow: 0 0 0 1px var(--dme-accent-mid) inset;
}

/* ------------------------------------------------------------------ *
 * RIGHT: extras — autoplay, volume, panel toggle
 * ------------------------------------------------------------------ */
.dme-right {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	min-width: 0;
}

.dme-volume {
	display: flex;
	align-items: center;
	gap: 8px;
}

.dme-volume .dme-vol-ic {
	width: 16px;
	height: 16px;
	color: var(--dme-text-mute);
	flex: none;
}

.dme-volume .dme-vol-ic svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
	display: block;
}

/* Range input — volume */
#dme-radio-player [data-dme="volume"] {
	-webkit-appearance: none;
	appearance: none;
	width: 86px;
	height: 16px;
	margin: 0;
	background: transparent;
	cursor: pointer;
}

#dme-radio-player [data-dme="volume"]:focus {
	outline: none;
}

/* WebKit track */
#dme-radio-player [data-dme="volume"]::-webkit-slider-runnable-track {
	height: 4px;
	border-radius: 4px;
	background:
		linear-gradient(90deg, var(--dme-accent), var(--dme-accent)) no-repeat,
		rgba(255, 255, 255, 0.09);
	/* fill width driven by --dme-vol-pct (set by JS), fallback 100% */
	background-size: var(--dme-vol-pct, 100%) 100%, 100% 100%;
	box-shadow: 0 0 8px var(--dme-accent-soft);
}

#dme-radio-player [data-dme="volume"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	margin-top: -4px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--dme-accent);
	box-shadow: 0 0 8px var(--dme-accent-glow);
}

#dme-radio-player [data-dme="volume"]:focus-visible::-webkit-slider-thumb {
	box-shadow: 0 0 0 4px var(--dme-accent-soft), 0 0 8px var(--dme-accent-glow);
}

/* Firefox track / progress / thumb */
#dme-radio-player [data-dme="volume"]::-moz-range-track {
	height: 4px;
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.09);
}

#dme-radio-player [data-dme="volume"]::-moz-range-progress {
	height: 4px;
	border-radius: 4px;
	background: var(--dme-accent);
	box-shadow: 0 0 8px var(--dme-accent-soft);
}

#dme-radio-player [data-dme="volume"]::-moz-range-thumb {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--dme-accent);
	box-shadow: 0 0 8px var(--dme-accent-glow);
}

/* Panel toggle handle */
#dme-radio-player [data-dme="toggle-panel"] {
	-webkit-appearance: none;
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 38px;
	padding: 0 14px;
	border: 1px solid var(--dme-accent-mid);
	border-radius: 9px;
	background: linear-gradient(180deg, var(--dme-bg-3), var(--dme-bg-2));
	color: var(--dme-accent);
	font-family: "Share Tech Mono", monospace;
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	cursor: pointer;
	white-space: nowrap;
	transition: box-shadow 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

#dme-radio-player [data-dme="toggle-panel"] svg {
	width: 14px;
	height: 14px;
	fill: currentColor;
	transition: transform 0.3s ease;
}

#dme-radio-player [data-dme="toggle-panel"]:hover {
	color: #fff;
	box-shadow: 0 0 14px var(--dme-accent-soft);
}

#dme-radio-player [data-dme="toggle-panel"]:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px var(--dme-accent-glow);
}

/* rotate chevron when panel open */
#dme-radio-player .dme-panel.is-open ~ .dme-dock [data-dme="toggle-panel"] svg,
#dme-radio-player.is-panel-open [data-dme="toggle-panel"] svg {
	transform: rotate(180deg);
}

/* ------------------------------------------------------------------ *
 * PANEL — expandable station browser, slides up above dock
 * ------------------------------------------------------------------ */
.dme-panel {
	position: relative;
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	background:
		linear-gradient(180deg, var(--dme-bg-2), var(--dme-bg));
	border-top: 1px solid var(--dme-line-soft);
	box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.5);
	transition:
		max-height 0.4s cubic-bezier(0.22, 1, 0.36, 1),
		opacity 0.3s ease,
		padding 0.4s ease;
	padding: 0 18px;
}

.dme-panel.is-open {
	max-height: 60vh;
	opacity: 1;
	padding: 18px;
	overflow-y: auto;
}

/* subtle grid texture behind stations */
.dme-panel::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(var(--dme-line-soft) 1px, transparent 1px),
		linear-gradient(90deg, var(--dme-line-soft) 1px, transparent 1px);
	background-size: 40px 40px;
	opacity: 0.35;
	pointer-events: none;
	mask-image: linear-gradient(180deg, transparent, #000 40%);
	-webkit-mask-image: linear-gradient(180deg, transparent, #000 40%);
}

.dme-panel-head {
	position: relative;
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 0 0 14px;
}

.dme-panel-title {
	font-family: "Orbitron", sans-serif;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--dme-text);
	text-shadow: 0 0 12px var(--dme-accent-soft);
}

.dme-panel-sub {
	font-family: "Share Tech Mono", monospace;
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--dme-text-mute);
}

/* Stations grid */
.dme-stations {
	position: relative;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 12px;
}

/* Station card (JS-injected) */
.dme-station {
	--dme-station-accent: var(--dme-accent);
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 14px 14px 14px 16px;
	border: 1px solid var(--dme-line-soft);
	border-left: 3px solid var(--dme-station-accent);
	border-radius: var(--dme-radius);
	background:
		linear-gradient(135deg,
			color-mix(in srgb, var(--dme-station-accent) 10%, transparent),
			transparent 60%),
		linear-gradient(180deg, var(--dme-bg-3), var(--dme-bg-2));
	cursor: pointer;
	overflow: hidden;
	transition:
		transform 0.18s ease,
		border-color 0.18s ease,
		box-shadow 0.2s ease,
		background 0.2s ease;
}

.dme-station:hover {
	transform: translateY(-2px);
	border-color: var(--dme-station-accent);
	box-shadow:
		0 6px 20px rgba(0, 0, 0, 0.45),
		0 0 18px color-mix(in srgb, var(--dme-station-accent) 30%, transparent);
}

.dme-station:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px var(--dme-station-accent);
}

/* active station highlight */
.dme-station.is-active {
	border-color: var(--dme-station-accent);
	background:
		linear-gradient(135deg,
			color-mix(in srgb, var(--dme-station-accent) 22%, transparent),
			transparent 70%),
		linear-gradient(180deg, var(--dme-bg-3), var(--dme-bg-2));
	box-shadow:
		0 0 0 1px var(--dme-station-accent) inset,
		0 0 22px color-mix(in srgb, var(--dme-station-accent) 35%, transparent);
}

.dme-station.is-active::after {
	content: "ON AIR";
	position: absolute;
	top: 10px;
	right: 10px;
	font-family: "Share Tech Mono", monospace;
	font-size: 8.5px;
	letter-spacing: 0.16em;
	color: var(--dme-bg);
	background: var(--dme-station-accent);
	padding: 2px 6px;
	border-radius: 4px;
	box-shadow: 0 0 10px color-mix(in srgb, var(--dme-station-accent) 55%, transparent);
}

.dme-station-freq {
	font-family: "Share Tech Mono", monospace;
	font-size: 11px;
	letter-spacing: 0.12em;
	color: var(--dme-station-accent);
	text-shadow: 0 0 8px color-mix(in srgb, var(--dme-station-accent) 50%, transparent);
}

.dme-station-name {
	font-family: "Orbitron", sans-serif;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.05em;
	color: var(--dme-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.dme-station-sub {
	font-family: "Rajdhani", sans-serif;
	font-size: 12px;
	letter-spacing: 0.04em;
	color: var(--dme-text-dim);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.dme-station-count {
	font-family: "Share Tech Mono", monospace;
	font-size: 10px;
	letter-spacing: 0.1em;
	color: var(--dme-text-mute);
	margin-top: 2px;
}

/* ------------------------------------------------------------------ *
 * Scrollbar (panel)
 * ------------------------------------------------------------------ */
.dme-panel.is-open::-webkit-scrollbar {
	width: 8px;
}
.dme-panel.is-open::-webkit-scrollbar-track {
	background: transparent;
}
.dme-panel.is-open::-webkit-scrollbar-thumb {
	background: var(--dme-accent-mid);
	border-radius: 8px;
}

/* ------------------------------------------------------------------ *
 * RESPONSIVE — collapse non-essential bits < 680px
 * ------------------------------------------------------------------ */
@media (max-width: 1024px) {
	.dme-dock {
		grid-template-columns: minmax(160px, 1fr) minmax(220px, 1.4fr) auto;
		gap: 12px;
	}
	#dme-radio-player [data-dme="volume"] { width: 64px; }
}

@media (max-width: 680px) {
	#dme-radio-player.dme-radio { font-size: 14px; }

	.dme-dock {
		grid-template-columns: 1fr auto;
		grid-template-areas:
			"now    right"
			"center center";
		gap: 8px 12px;
		padding: 8px 12px;
		min-height: auto;
	}

	.dme-now    { grid-area: now; }
	.dme-right  { grid-area: right; }
	.dme-center { grid-area: center; }

	/* hide non-essential extras */
	.dme-now-freq,
	.dme-volume,
	.dme-time-total,
	#dme-radio-player [data-dme="shuffle"],
	#dme-radio-player [data-dme="repeat"],
	.dme-eq {
		display: none;
	}

	#dme-radio-player [data-dme="toggle-panel"] {
		padding: 0 10px;
	}

	/* keep toggle label compact: hide its text, show only the chevron */
	#dme-radio-player [data-dme="toggle-panel"] .dme-toggle-label {
		display: none;
	}

	.dme-controls { gap: 8px; }

	#dme-radio-player .dme-btn { width: 36px; height: 36px; }
	#dme-radio-player [data-dme="play"] { width: 46px; height: 46px; }

	.dme-panel.is-open { max-height: 70vh; padding: 14px; }
	.dme-stations { grid-template-columns: 1fr 1fr; gap: 8px; }
	.dme-station { padding: 10px 10px 10px 12px; }
	.dme-station-sub { display: none; }
}

@media (max-width: 420px) {
	.dme-stations { grid-template-columns: 1fr; }
	.dme-now-title { font-size: 14px; }
}

/* ------------------------------------------------------------------ *
 * Accessibility / motion
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	#dme-radio-player.dme-radio,
	.dme-panel,
	#dme-radio-player .dme-btn,
	.dme-station,
	#dme-radio-player [data-dme="toggle-panel"] svg {
		transition: none !important;
	}
	#dme-radio-player.is-playing .dme-eq i,
	#dme-radio-player.is-playing [data-dme="play"] {
		animation: none !important;
	}
}

/* Hard reset against theme bleed for our buttons/inputs */
#dme-radio-player button,
#dme-radio-player input {
	font-family: inherit;
}

#dme-radio-player a {
	color: var(--dme-accent);
	text-decoration: none;
}

/* Keep the <audio> element invisible but present */
#dme-radio-audio {
	display: none !important;
}

/* ------------------------------------------------------------------ *
 * Tooltips — neon label above any control carrying [data-tip]
 * ------------------------------------------------------------------ */
#dme-radio-player [data-tip] {
	position: relative;
}
#dme-radio-player [data-tip]::after {
	content: attr(data-tip);
	position: absolute;
	left: 50%;
	bottom: calc(100% + 11px);
	transform: translateX(-50%) translateY(5px);
	padding: 5px 9px;
	background: linear-gradient(180deg, var(--dme-bg-3), var(--dme-bg-2));
	color: var(--dme-text);
	border: 1px solid var(--dme-accent-mid);
	border-radius: 7px;
	font-family: "Share Tech Mono", monospace;
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	z-index: 6;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55), 0 0 12px var(--dme-accent-soft);
	transition: opacity 0.16s ease, transform 0.16s ease;
}
/* little arrow */
#dme-radio-player [data-tip]::before {
	content: "";
	position: absolute;
	left: 50%;
	bottom: calc(100% + 6px);
	transform: translateX(-50%) translateY(5px);
	border: 5px solid transparent;
	border-top-color: var(--dme-accent-mid);
	opacity: 0;
	pointer-events: none;
	z-index: 6;
	transition: opacity 0.16s ease, transform 0.16s ease;
}
#dme-radio-player [data-tip]:hover::after,
#dme-radio-player [data-tip]:focus-visible::after,
#dme-radio-player [data-tip]:hover::before,
#dme-radio-player [data-tip]:focus-visible::before {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

/* ------------------------------------------------------------------ *
 * Minimize button + minimized launcher (FAB) with bounce
 * ------------------------------------------------------------------ */

/* The minimize button reads slightly dimmer than transport controls. */
#dme-radio-player .dme-btn-minimize svg {
	width: 16px;
	height: 16px;
}

/* Floating launcher — hidden until minimized. */
#dme-radio-player .dme-fab {
	display: none;
	position: fixed;
	right: 22px;
	bottom: 22px;
	width: 62px;
	height: 62px;
	padding: 0;
	border-radius: 50%;
	border: 1px solid var(--dme-accent);
	background:
		radial-gradient(circle at 34% 28%, var(--dme-accent-soft), transparent 70%),
		linear-gradient(180deg, var(--dme-bg-3), var(--dme-bg));
	color: var(--dme-accent);
	cursor: pointer;
	pointer-events: auto;
	align-items: center;
	justify-content: center;
	box-shadow:
		0 0 0 1px var(--dme-accent-soft) inset,
		0 12px 34px -10px var(--dme-accent-glow),
		0 0 20px var(--dme-accent-soft);
	-webkit-backdrop-filter: blur(10px) saturate(140%);
	backdrop-filter: blur(10px) saturate(140%);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}
#dme-radio-player .dme-fab:hover {
	transform: scale(1.06);
	box-shadow:
		0 0 0 1px var(--dme-accent) inset,
		0 14px 40px -8px var(--dme-accent-glow),
		0 0 30px var(--dme-accent-glow);
}
#dme-radio-player .dme-fab:active {
	transform: scale(0.95);
}
#dme-radio-player .dme-fab-glow {
	position: absolute;
	inset: -3px;
	border-radius: 50%;
	border: 1px solid var(--dme-accent-soft);
	opacity: 0.6;
	animation: dme-fab-pulse 2.4s ease-in-out infinite;
	pointer-events: none;
}
#dme-radio-player .dme-fab-eq {
	display: inline-flex; /* id+class specificity beats the mobile `.dme-eq{display:none}` */
	height: 20px;
	width: 22px;
	margin: 0;
	gap: 3px;
}
#dme-radio-player .dme-fab-eq i {
	width: 3px;
}

/* When minimized: hide the dock + panel, reveal & bounce in the FAB. */
#dme-radio-player.is-minimized .dme-dock,
#dme-radio-player.is-minimized .dme-panel {
	display: none !important;
}
#dme-radio-player.is-minimized .dme-fab {
	display: inline-flex;
	animation: dme-fab-in 0.5s cubic-bezier(0.18, 1.35, 0.4, 1) both;
}

/* Minimizing: the dock bounces up then collapses toward the corner. */
#dme-radio-player.is-minimizing .dme-dock {
	transform-origin: bottom right;
	animation: dme-dock-out 0.34s cubic-bezier(0.45, 0, 0.7, 1) both;
	pointer-events: none;
}
#dme-radio-player.is-minimizing .dme-panel {
	display: none !important;
}

/* Restoring: the dock springs back up. */
#dme-radio-player.is-restoring .dme-dock {
	animation: dme-dock-in 0.5s cubic-bezier(0.18, 1.25, 0.4, 1) both;
}

@keyframes dme-fab-in {
	0%   { transform: scale(0) translateY(26px); opacity: 0; }
	60%  { transform: scale(1.16) translateY(0); opacity: 1; }
	80%  { transform: scale(0.94); }
	100% { transform: scale(1); }
}
@keyframes dme-fab-pulse {
	0%, 100% { transform: scale(1);    opacity: 0.55; }
	50%      { transform: scale(1.12); opacity: 0; }
}
@keyframes dme-dock-out {
	0%   { transform: translateY(0) scale(1);        opacity: 1; }
	28%  { transform: translateY(-7px) scale(1.015); opacity: 1; }
	100% { transform: translateY(26px) scale(0.82);  opacity: 0; }
}
@keyframes dme-dock-in {
	0%   { transform: translateY(34px) scale(0.94); opacity: 0; }
	60%  { transform: translateY(-5px) scale(1.012); opacity: 1; }
	100% { transform: translateY(0) scale(1); }
}

@media (max-width: 680px) {
	#dme-radio-player .dme-fab { right: 14px; bottom: 14px; width: 54px; height: 54px; }
}
@media (prefers-reduced-motion: reduce) {
	#dme-radio-player.is-minimized .dme-fab,
	#dme-radio-player.is-minimizing .dme-dock,
	#dme-radio-player.is-restoring .dme-dock,
	#dme-radio-player .dme-fab-glow {
		animation: none !important;
	}
}