/* =========================================================
   WHERE EMBERS REMAIN – MUSIC PLAYER
   ========================================================= */

.storm-music-button {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 32px;
	height: 32px;

	padding: 0;

	background: transparent;
	border: 0;

	font-family: Georgia, "Times New Roman", serif;
	font-size: 15px;

	color: #b9aaa0;

	cursor: pointer;

	transition:
		color .2s ease,
		transform .2s ease;
}

.storm-music-button:hover {
	color: #d8b49b;

	transform: scale(1.08);
}


/* =========================================================
   PLAYER
   ========================================================= */

.storm-music-player {
	position: absolute;

	top: 70px;
	right: 25px;

	z-index: 1000;

	width: 330px;

	padding: 16px;

	box-sizing: border-box;

	background:
		linear-gradient(
			135deg,
			rgba(41,38,39,.98),
			rgba(31,29,30,.98)
		);

	border: 1px solid rgba(154,129,105,.24);

	box-shadow:
		0 15px 40px rgba(0,0,0,.45);

	opacity: 0;
	visibility: hidden;

	transform: translateY(-8px);

	transition:
		opacity .25s ease,
		transform .25s ease,
		visibility .25s ease;
}


/* geöffnet */

.storm-music-player.open {
	opacity: 1;
	visibility: visible;

	transform: translateY(0);
}


/* =========================================================
   KOPF
   ========================================================= */

.storm-music-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;

	gap: 15px;
}

.storm-music-head span {
	display: block;

	font-family: Georgia, "Times New Roman", serif;
	font-size: 17px;
	font-style: italic;

	color: #d8b49b;
}

.storm-music-head small {
	display: block;

	margin-top: 3px;

	font-size: 7px;
	letter-spacing: 1px;
	text-transform: uppercase;

	color: #817976;
}


/* schließen */

.storm-music-close {
	padding: 0;

	background: transparent;
	border: 0;

	font-family: Georgia, serif;
	font-size: 17px;

	color: #817976;

	cursor: pointer;
}

.storm-music-close:hover {
	color: #c77854;
}


/* =========================================================
   ORNAMENT
   ========================================================= */

.storm-music-line {
	display: flex;
	align-items: center;

	gap: 7px;

	margin: 11px 0 14px;
}

.storm-music-line span {
	flex: 1;

	height: 1px;

	background: rgba(154,129,105,.20);
}

.storm-music-line i {
	display: block;

	width: 5px;
	height: 5px;

	background: #c77854;

	transform: rotate(45deg);
}


/* =========================================================
   SPOTIFY
   ========================================================= */

.storm-music-player iframe {
	display: block;

	width: 100%;

	border: 0;
	border-radius: 4px;
}