body.soundcloud-popout {
	box-sizing: border-box;
	min-width: 320px;
	min-height: 100dvh;
	margin: 0;
	overflow-x: hidden;
	background: #030303;
}

body.soundcloud-popout *,
body.soundcloud-popout *::before,
body.soundcloud-popout *::after { box-sizing: inherit; }

.popout-player {
	width: min(760px, calc(100% - 2rem));
	min-height: 100dvh;
	margin: 0 auto;
	padding: clamp(1.25rem, 5vh, 3.5rem) 0 clamp(1rem, 4vh, 2rem);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.popout-heading h1 {
	position: relative;
	z-index: 1;
	margin: .75rem 0 clamp(1rem, 3vh, 2rem);
	color: #fff;
	font-size: clamp(1.35rem, 4vw, 2.4rem);
	letter-spacing: clamp(2px, .8vw, 4px);
	line-height: 1.1;
	word-break: break-word;
	text-shadow: 0 0 24px rgba(255, 0, 0, .22);
}

.popout-title-wrap { position: relative; }

.dj-name {
	position: absolute;
	top: .1rem;
	left: -.15rem;
	max-width: 100%;
	color: rgba(255, 32, 32, .18);
	font-size: clamp(2.7rem, 9vw, 5.8rem);
	font-weight: bold;
	letter-spacing: 6px;
	line-height: .85;
	white-space: nowrap;
	overflow: hidden;
	text-shadow: 0 0 24px rgba(255, 0, 0, .16);
	transform: translateY(-.15rem);
}

.player-frame {
	position: relative;
	margin-top: clamp(1.1rem, 2.6vh, 1.6rem);
	min-height: clamp(100px, 20vh, 166px);
	border: 1px solid rgba(255, 32, 32, .7);
	background: #080808;
	box-shadow: inset 0 0 35px rgba(255, 0, 0, .08), 0 0 30px rgba(255, 0, 0, .14);
}

#sc-iframe {
	display: block;
	width: 100%;
	height: clamp(100px, 20vh, 166px);
	border: 0;
}

.player-status {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: rgba(255, 255, 255, .62);
	font-size: .72rem;
	letter-spacing: 2px;
	pointer-events: none;
	transition: opacity .25s ease;
}

.player-frame.is-ready .player-status { opacity: 0; }

.popout-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) repeat(2, minmax(120px, auto));
	align-items: end;
	gap: clamp(.75rem, 2vw, 1.25rem);
	margin-top: clamp(.75rem, 2vh, 1.25rem);
}

.popout-text,
.player-note {
	margin: 0;
	color: rgba(255, 255, 255, .68);
	font-size: .82rem;
	line-height: 1.6;
}

.mix-picker,
.volume-control {
	display: grid;
	gap: .45rem;
	color: #ff2020;
	font-size: .58rem;
	letter-spacing: 2px;
}

select,
input[type="range"] { accent-color: #ff2020; }

select {
	width: 100%;
	min-width: 0;
	padding: .55rem .65rem;
	border: 1px solid rgba(255, 32, 32, .62);
	background: #100303;
	color: #fff;
	font: inherit;
	font-size: .7rem;
}

input[type="range"] { width: min(130px, 100%); cursor: pointer; }
.player-note { margin-top: clamp(.65rem, 2vh, 1rem); color: rgba(255, 255, 255, .38); font-size: .68rem; }

@media (max-width: 600px) {
	.popout-player { width: min(100% - 1.25rem, 760px); }
	.popout-row { grid-template-columns: 1fr 1fr; gap: 1rem; }
	.popout-text { grid-column: 1 / -1; }
	.volume-control { justify-items: end; }
	input[type="range"] { width: 100%; }
}

html.is-embed,
html.is-embed body.soundcloud-popout {
	min-height: 0;
	height: 100%;
	overflow: hidden;
}

html.is-embed .popout-player {
	width: 100%;
	min-height: 0;
	height: 100%;
	padding: .15rem .1rem .25rem;
	justify-content: flex-start;
}

html.is-embed .popout-heading,
html.is-embed .popout-text { display: none; }

html.is-embed .player-frame { margin-top: 0; }

html.is-embed .popout-row {
	grid-template-columns: 1fr 1fr;
	margin-top: .75rem;
}

html.is-embed .volume-control { justify-items: end; }

html.is-embed input[type="range"] { width: 100%; }

@media (max-height: 520px) {
	.popout-player { justify-content: flex-start; padding-top: 1rem; }
	.popout-heading h1 { margin-bottom: .75rem; }
	.player-frame,
	#sc-iframe { height: 100px; min-height: 100px; }
	.player-frame { margin-top: .8rem; }
	.popout-row { margin-top: .75rem; }
}