:root{
	--radioBodyBackground: white;
	--radioScreenTextColor: #6ee76e;
	--edgeSpacing: 8px;
	--edgeOffsetRight: 132px; 
	--edgeOffsetBottom: 64px;
	
	--radioScreenText: 8pt;
	--radioScreenTextLarge: 12pt;
	
	--radioBorderWidth: 4px;
	--radioFilter: drop-shadow(0 0 4px red);
}

[data-theme="basic"] {
	--radioScreenTextColor: #2b4a5c;
	#{}
	#audioControls{
		padding: 0 4px;
		border-radius: 6px;
		overflow-x: clip;
		background:/*radial gradient(#395, #643),url('/images/assets/background/noise.gif'),*/ linear-gradient(#fce, #c9f 12px, #c9f calc(100% - 12px), #327), url('/images/assets/background/noise.gif');
		background-position: top 70%, center, center;
	}
	#audioControls .buttons button{
		border-radius: 120px;
	}
	#audioControls .screen{
		border-radius: 12px;
		box-shadow: 0 0 4px 2px #2b4a5c inset;
		background: /*#afbbc2;*/
		linear-gradient(90deg, #042335 2px, white 6px,aliceblue 20px, aliceblue calc(100% - 8px),#2b4a5c calc(100% - 2px)), #afbbc2;
		text-shadow: 0 0 2px #2b4a5c;
		margin: var(--radioBorderWidth) -8px 0;
		padding: 0 8px;
	}
}

[data-theme="dark"] {
	--radioBodyBackground: #333;
	--radioScreenTextColor: #6ee76e;
	--radioFilter: drop-shadow(0 0 4px red) hue-rotate(-90deg) brightness(6) invert();
	
	#audioControls{
		border-radius: 4px;
		corner-shape: bevel;
	}
	#audioControls .screen{
		/*	executive */
		box-shadow: 0 0 2px 1px #0f140b inset;
		background: #293320;
		text-shadow: 0 0 2px #4c8d54;
	}
}

[data-theme="smoke"] {
	--radioBodyBackground: #421;
	--radioScreenTextColor: #241b13;
	#{}
	#audioControls{
		border-radius: 8px;
	}
	#audioControls .screen{
		background: url('/images/assets/background/noise.gif'), #ffbf00;
		background-blend-mode: multiply;
		box-shadow: 0 0 6px #421 inset, 0 0 2px #ffbf0033;
		text-shadow: 0 1px 2px #421;
		border-radius: 4px;
		margin: var(--radioBorderWidth) var(--radioBorderWidth) 0;
		
		mask: 
		url('/warez/crisisradio/bearbutton.png') no-repeat,
		linear-gradient(#000 0 0); /* we need this extra layer for mask-composite */
		mask-position: bottom 50%;
		mask-composite: exclude;
	    mask-position: calc(100% - 4px) calc(100% + 20px);
	}
	#audioControls .buttons button{
		width: 72px;
		height: 20pt;
		
	/*	mask-image: url('/warez/crisisradio/bearbutton.png');
		mask-size: 100% 100%;
		border: none;
		background: radial-gradient(#FEBE00, #421 120%);
		background-position: 55% top;*/
		position: relative;
		color: transparent;
		background: url('/warez/crisisradio/bearbutton.png');
		background-size: 100% 100%;
		border: none;
		filter: drop-shadow(0 2px 0.5px #322);
	}
	#audioControls .buttons button::after{
		content:'';
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: 100%;
		height: 100%;
		mask-image: url('/warez/crisisradio/bearbutton.png');
		mask-size: 100% 100%;
		background: radial-gradient(#FEBE00, #421 120%);
	}
	
	#audioControls .duration{
		width: calc( 100% - 100px );
	}
}

[data-theme="tower"] {
	--radioBodyBackground: #777;
}

*, html{
	scroll-behavior: smooth !important;
}

#mp4Player{
	pointer-events: none;
	position: fixed;
	z-index: 1000;
	bottom: var(--edgeSpacing);
	right: var(--edgeSpacing);
	width: 540px;
	height: 160px;
	transition: width 0.8s,
				right 0.2s,
				bottom 0.2s;
}

#mp4Player canvas{
	position: absolute;
	bottom:-50px;
	right:-60px;
	
	pointer-events: none;
	
	filter: var(--radioFilter);
	transition: opacity 0.4s;
}

#mp4Player:has(#audioControls:hover) canvas{
	opacity: 0.2;
}

#audioControls{
	bottom: 0;
	right: 0;
	width: 540px;
	max-width: 100%;
	
	display: flex;
	flex-direction: column;
	gap: 2px;
	
	pointer-events: initial;
	position: absolute;
	background: #f99;
	
	/*bottom: 4px;
	right: 	calc( var(--pageCrop) + 4px );*/
	font-family: sans-serif;
	padding: 0;
	box-shadow: 2px 2px 4px #3336;
	
	box-sizing: border-box;
	
	background: url('/images/assets/background/noise.gif'), #333;
	background-blend-mode: multiply;
	
	background: var(--radioBodyBackground);
}

#audioControls:not(:has(ol#tracklist li)){
	bottom: -180px;
}

#audioControls .screen{
	list-style: none;
	margin: 0;
	margin-top: var(--radioBorderWidth);
	padding: 0 4px;
	position: relative;
	overflow-y: auto;
	color: var(--radioScreenTextColor);
/*	line-height: 1;
	width: calc(100% - 7px);
	left: -0.5px;*/
	
}
/*#tracklist::after{
	content: "";
	display: block;
	width: 100%;
	height:min(90px, 100%);
	position: absolute;
	top: 0;
	left: 0;
	box-shadow: 0 0 2px 1px gray inset;
}*/

#mp4Player .main{
	display: flex;
	flex-direction: row;
}
#mp4Player .art{
/*	width: 120px;*/
	overflow: hidden;
}
#mp4Player .art button{
	display: none;
}
#audioControls .screen ol{
	flex-grow: 1;
	padding: 0;
	margin: 0;
	list-style: none;
	height: 96px;
	overflow-y: auto;
	
/*	display: flex;
	flex-direction: column;
	justify-content: end;*/
}

#mp4Player .tracklist{
	overflow-x: clip;
}

#mp4Player .tracklist li{
	transition: font-size 0.2s;
	white-space: nowrap;
}

#mp4Player .tracklist li:not(.playing){
	font-size: var(--radioScreenText);
}

#mp4Player .screen .duration *{
	padding: 0;
	margin: 0;
}
#mp4Player .screen input[type=range]{
	width: 100%;
	height: 4px;
	border: 1px solid var(--radioScreenTextColor);
	background: transparent;
}

#mp4Player .screen input[type=range]::-webkit-slider-thumb,
#mp4Player .screen input[type=range]::-moz-range-thumb {
	-webkit-appearance: none;
	border-radius: 0;
	height: inherit;
	color: red;
	background: var(--radioScreenTextColor);
	border: none;
}

#audioControls .duration{
	display: flex;
	flex-direction: row;
	font-size: var(--radioScreenText);
	align-items: center;
	gap: 2px;
}

#mp4Player .tracklist .playing{
	font-weight: bold;
	font-size: var(--radioScreenTextLarge);
}

#audioControls .buttons{
	padding-left: 4px;
	margin-bottom: -2px;
	display: flex;
	flex-direction: row;
	gap: 2px;
	
	/*	basic */
	padding: 0 4px;
}
#audioControls button{
	border-radius: 0;
	border-width: 1px;
	background: #fdd;
	background: #444;
	color: #ccc;
	font-family: sans-serif;
	padding: 2px;
	
	/*	basic */
	padding: 2px 6px;
}

.error{
	opacity: 0.5;
}

@media screen and (max-width:720px) {
	:root{
		--edgeSpacing: 0px;
		--radioScreenText: 8pt;
		--radioScreenTextLarge: 12pt;
		--radioBorderWidth: 2px;
	}
	#mp4Player,
	#mp4Player #audioControls{
		width:calc(100% + var(--edgeOffsetRight));
		width:100%;
	}
	#mp4Player #audioControls{
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
	}
	#mp4Player canvas{
		display: none;
	}
	#mp4Player .playing{
		
	}
	
	#mp4Player .buttons{
		margin-bottom: 2px;
		height: calc( 14pt + 8px );
		transition: height: 0.2s;
	}
	#audioControls .buttons button{
		font-size: 14pt;
		height: 100%;
		width: 20%;
		margin: 4px 4px 4px 0;
		overflow: hidden;
		transition: margin 0.2s;
	}
	#mp4Player .screen ol{
		height: calc( var(--radioScreenTextLarge) + var(--radioScreenText) );
		height: 60px;
		transition: height 0.2s;
	}
	
	#mp4Player .duration p{
		transition: width 0.2s,
					opacity 0.2s,
					font-size 0.2s;
	}
	#mp4Player.minimized .duration p{
		overflow: hidden;
		color: transparent;
		font-size: 0pt;
	}
	#mp4Player.minimized .buttons button{
		margin: 0;
		font-size: 0pt;
	}
	#mp4Player.minimized .buttons{
		height: 0;
	}
	#mp4Player.minimized .art{
	/*	width: 40px;*/
	}
	#mp4Player.minimized .art button{
		
		display: initial;
		height: 100%;
		margin: 0;
		border: none;
		padding: 0; /*4px;*/
		background: transparent;
	}
	#mp4Player.minimized .art button p{	
		width: 36px;
		height: 100%;
		white-space: nowrap;
		color: transparent;
		background: var(--radioScreenTextColor);
		mask-image: url('/images/assets/radio/PlayPause.png' );
		mask-size: 80px 80%;
		mask-repeat: no-repeat;
		mask-position: left center;
		
		transition: mask-position 0.2s;
	}
	#mp4Player.minimized .art button.playing p{
		mask-position: right center;
	}
	#mp4Player.minimized .art button p{
		
	}
	#mp4Player.minimized .screen ol{
		height: calc( var(--radioScreenText) + 2px );
		height: 100%;
	}
	#mp4Player.minimized .screen li:not(.playing){
		height: 0;
		font-size: 0;
	}
	#mp4Player.minimized .tracklist,
	#mp4Player.minimized .tracklist .playing{
		font-size: 12pt;
		padding: 2pt 0;
	}
	#mp4Player.minimized .screen input[type=range]{
		display: none;
	}
}