:root{
	
	--perspective: 100px;
	
	/*--headerHeight: 60px;*/
	
	--audioPlayerHeight: 0px;
	
	/*theme one*/
	
	--headerColour: #000;
	--headerDarker: #933;
	
	--menuColour: #f9f;
	--menuDarker: #939;
	
	/*final*/
	/* ------------------------------------------------------------------------- */
	
	/*--headerColour: #f99;
	--headerDarker: #933;*/
	
	--sidebarBackground:/*#f9f*/ #b4f url('/images/assets/background/marble.gif');
	--sidebarBackgroundBlend:multiply;
	--sidebarBackgroundSize:64px 64px;
	
	--engravingLight: #fff;
	--engravingDark: #333;
	
	--menuOptionBackground: linear-gradient(#999, #fff, #333);
	
	/*--menuColour: #f9f;
	--menuDarker: #939;*/
	
	--blurbBackground: #f99;
	--blurbTextColour: #111;
	
	--playerBackground: #406;
	
	--buttonBackground: linear-gradient(var(--buttonColourLight), var(--buttonColourDark));
	
	--buttonColourLight: #999;
	--buttonColourDark: #333;
	
	--screenBackground: #ccf;
	--screenMid: #66c;
	--screenDarker: #339;
	
	--buttonsActive: #9ff;
	--buttonsInactive: #9cc;
	
	/* 13/9/2023 Desktop stuff */
	
	--sidebarHiddenWidth:0px;
	
	--classicRes:1440px;
	
	--menuFontSize:27px;
	
	--headerPadding: 8px;
	
	--audioPadding: 4px;
	
	--goopFilter: hue-rotate(290deg) contrast(100%) saturate(300%) brightness(70%) drop-shadow(0 0 4px #b016a0) opacity(95%);
	
}

[data-theme="dark"] {
	
	--sidebarBackground:#333 url('/images/assets/background/marble.gif');
	
	--menuColour: #333;
	--menuDarker: #999;
	
	--playerBackground: #262;
	--footerDarker: #999;
	
	--blurbBackground: linear-gradient(#fff, #999, #333, #666);
	--blurbTextColour: #999;
	
	--screenBackground: #9f9;
	--screenMid: #393;
	--screenDarker: #060;
	
	
	--backgroundBlend: color-burn;
	
	--goopFilter: hue-rotate(80deg) contrast(95%) saturate(300%) brightness(200%) drop-shadow(0 0 4px #297407) opacity(95%);
}

[data-theme="smoke"] {
	
	--sidebarBackground:url("/images/assets/background/零.gif");
	--sidebarBackgroundSize:64px 64px;
	
	--menuColour:	#393333cc; 
	--menuDarker:	#3f1515; 
	
	
	--engravingLight: #fc6;
	--engravingDark: #963;
	
	--blurbBackground: #611;
	--blurbTextColour: #f99;
	
	--screenBackground: #fc6;
	--screenMid: #f96;
	--screenDarker: #963;
	
	--menuOptionBackground: linear-gradient(#999, #fff, #333);
	
	--playerBackground: #393333cc;
	--footerDarker: #c9c0c0c0;
	
	--goopFilter: hue-rotate(0deg) contrast(100%) saturate(100%) brightness(100%) drop-shadow(0 0 4px #2b0a2d) opacity(95%);
	
}



[data-theme="tower"] {
	
	--headerColour: #ffffff99;
	--headerDarker: #ffffff00;
	
	--sidebarBackground:linear-gradient(90deg, #ccc, #999), url("/images/assets/background/noise.gif");
	--sidebarBackgroundSize:100%, 64px 64px;
	
	--menuColour:	#aaa;
	--menuDarker:	#333;
	
	--menuOptionBackground: linear-gradient(90deg, #888, #666, #444);
	
	--blurbBackground: linear-gradient(90deg, #eef, #99f, #66c);
	
	--playerBackground: linear-gradient(90deg, #333, #666, #333) ;
	
	--screenBackground: #ccf;
	--screenMid: #66c;
	--screenDarker: #339;
	
}

/*@media screen and (orientation: portrait) {*/
/*	Mobile style UI */
@media screen and (max-width: 1080px) {
	
	:root{
		--headerHeight: 60px;
		--sidebarWidth: 90px;
		--sidebarHiddenWidth: calc( 0px - var(--sidebarWidth) );
		
		--audioPlayerHeight: 56px;
	
		--pageCrop: 0px;
		
		--blurbIconPosition: top 4px left 4px;
	}
	
	header{
		width: 100%;
	}
	
	#menuButton{
		height: 140px;
	}
	
	#menu {
		background: none;
		overflow:hidden;
		width:0;
	}
	
	#menuInner{
		position: fixed;
		top:0px;
		right:0;
	/*	background: black;*/
		height: 120vh;
	/*	width: var(--sidebarWidth);*/
		width: 100%;
		overflow: hidden;
		transition: backdrop-filter 0.2s,
					-webkit-backdrop-filter 0.2s;
	}
	
	#menu.showing #menuInner{
		backdrop-filter: blur(1px) brightness(0.8);
		-webkit-backdrop-filter: blur(1px) brightness(0.8);
	}
	
	#menuInner{
		pointer-events: none;
	}
	.showing #menuInner,
	#menuInnerInner{
		pointer-events: initial;
	}
	
/*	#bonusCards{
		position: absolute;
		z-index: 100;
		bottom: calc( 24vh - 24px );
		left: -8px;
		width: 500px;
		height: 300px;
	}*/
	
/*	#billboard img{
		background: url('/images/assets/background/check.gif');
	}
	#billboard{
		position: absolute;
		width:	min(	calc( ( 100vw - var(--sidebarWidth) ) - 16px ),
						360px );
		min-height:	360px;
		bottom: calc( 20vh + 8px );
		left: 8px;
	}
	#billboard p{
		color: #ccc;
		text-shadow: 0 1px 1px #333;
		padding-bottom: 2px;
	}
	
	
	#billboard a,
	#billboard img{
		max-width: 100%;
		vertical-align: middle;
	}*/
	
	#menuInnerInner{
		
	}
	
	#menuInnerInner,
	#menu.hidden #menuInnerInner{
		position:absolute;
		top:0;
		height:100%;
		right: var(--sidebarHiddenWidth);
		width: var(--sidebarWidth);
	}
	
	#menu.showing #menuInnerInner{
		right: 0;
	}
	
	
	
	#menu #bumperContainer{
		height:160px;
		padding: 20px 0;
		display: flex;
		/*background-color: green;*/
		
		align-items: center;
		justify-content: center;
	}
	
	#bumper{
		transform: rotateZ(90deg);
		border-color:	var(--engravingLight)
						var(--engravingLight)
						var(--engravingDark)
						var(--engravingDark);
	}
	
	#bumper{
		height: 50px;
	}

	#blurb{
		line-height:-0.5em;
		font-size:	12px;
	}
	
	#themeRadio{
		display:none;
	}
	
	menu.hiding{
		right: var(--sidebarHiddenWidth);
	}
	
	menu nav ul li p{
		margin:0px;
		transform-origin:center center;
		transform: scaleY(2);
	}
	
	#blurb{
		line-height:8px;
		flex-shrink:1;
		overflow-y:auto;
		overflow-x:hidden;
		padding:	58px var(--headerPadding) 18px var(--headerPadding);
		margin:		4px;
		
		background-position: top 4px left 4px, center center;
	}
	
	#blurb img{
		display: none;
	}

	#themeSelect{
		text-align: left;
		display: inline-block;
	}
	
	#themeSelect fieldset{
			border: none;
			padding: 0px;
			margin: 0px;
	}
	
	#themeselect fieldset legend{
			display: none;
	}
	
	#themeRadio{
		display:none;
		
	}

	#audioBar{
		
		color: var(--footerDarker);
		background-color: var(--playerBackground);
		bottom: calc( 0px - var(--audioPlayerHeight) );
		height: var(--audioPlayerHeight);
		display: none;
		width: calc( 100% - ( 2 * var(--headerPadding) ) );
		margin: 0px var(--headerPadding);
		overflow: hidden;
		
		position:fixed;
		left: 0px;
		
		flex-direction: row;
		
		box-sizing:border-box;
		
		border-radius: 4px 4px 0px 0px;
	}
	
	.audioButton{
		min-height: calc(var(--audioPlayerHeight) - 8px);
	}

	#screen{
		height: calc( var(--audioPlayerHeight) - var(--audioPadding) * 2 );
	}
	
	#controls{
		flex-direction:column;
	}
	
	#mp3Player canvas{
		display: none;
	}

}

/*@media screen and (orientation: landscape) {*/
@media screen and (min-width:1080px) {
	
	:root{
		
		--headerHeight: calc( 102px );
		--sidebarWidth: max( calc(100vw - var(--classicRes) ), calc( 320px + ( 2 * var(--headerPadding) + 4px ) ) );
		
		--pageCrop: max( calc(100vw - var(--classicRes) ), calc( 320px + ( 2 * var(--headerPadding) ) + 4px ) );
		
		--blurbIconPosition: bottom 6px right 4px; 
	}
	
	header{
		width:calc( 100% - var(--sidebarWidth) );
	}
	
	#menuButton{
		display: none;
	}
	
	#menu{
		position: fixed;
	}
	
	#menuInner{
		background: none;
	}
	
	#bonusCards{
		position: absolute;
		bottom: 0;
		right: 0;
	}
	
/*	#billboard{
		display: none;
	}*/
	
	menu #bumperContainer{
		height:calc( var(--headerHeight) + ( 2 * var(--headerPadding) ) );
		box-sizing: border-box;
		padding: var(--headerPadding);
	}
	
	#bumper{
		border-color:	var(--engravingDark)
						var(--engravingLight)
						var(--engravingLight)
						var(--engravingDark);
		nborder-color:#fcf var(--menuDarker) var(--menuDarker) #fcf;
	}
	
	menu.hiding{
		right:0px;
	}

	menu nav ul li p{
		margin: 0px 4px;
		transform-origin: left 50%;
		transform: scaleY(2) scaleX(3);
		font-size: /*1.5vw;*/20pt;
		text-stroke: 0.2px var(--engravingLight);
		-webkit-text-stroke: 0.2px var(--engravingLight);
	}
	
	#blurb{
		position:relative;
		overflow:hidden;
		font-family: sans-serif;
		font-size:12px;
		
		margin:var(--headerPadding);
		padding:var(--headerPadding);
		
		background-position: bottom 4px right 4px, center center;
	}
	
	#blurb img{
		display:none;
		position: absolute;
		height:110%;
		top:-5%;
		right:-10%;
	}
	
	#themeDropdown{
		display: none;
	}
	
	#themeSelect ul li{
		display:inline;
	}
	
	#themeSelect fieldset{
		padding: 2px 4px 2px 4px;
	}
	
	#themeSelect ul li input{
		margin:2px;
	}
	
	#audioBar.mobile{
		display:none;
	}
	
	#audioBar{
		flex-direction:column;
		margin: var(--headerPadding);
		border-radius: 4px;
	}
	
	#controls{
		flex-direction:row;
	}
	
}

/* ------------------------------------------------------------------------------------------------- */
/*                    Overall                                                                        */
/* ------------------------------------------------------------------------------------------------- */

/* Testing AJAX stuff, probably should get it's own zone eventually... */
.imported.overlay{
	position:fixed;
	z-index: 900;
	top:0;
	left:0;
	width:100vw;
	height:100vh;
}

body{
	margin:0px;
	/*min-height:100%;*/
}

main{
	
/*	position:relative;*/
	max-width:calc( 100% - var(--pageCrop) );
}

.italic{
	font-style: italic;
	position: relative;
/*	top: 3px;*/
}

/*#hud{
	position: fixed;
	width: 100vw;
	height: 100vh;
	height: -webkit-fill-available;
	overflow: hidden;
	z-index: 1000000;
	pointer-events: none;
}*/

.mobileHUD,
menu{
	pointer-events: initial;
	
}

.mobileHUD{
	position:fixed;
	width:calc(100% - 10px);
	box-shadow: 2px 2px 0px #000;
	display: flex;
	margin-left:4px;
	margin-right:6px;
}

header{
	color:var(--headerDarker);
	
	box-sizing: border-box;
	
	height: calc( var(--headerHeight) + 10px );
	
	perspective: var(--perspective);
	
/*	position:inherit;*/
	position: fixed;
	pointer-events: none;
}

header div:first-child,
footer h3{
	flex-grow:1;
	margin:initial;
	
	/*transform: scaleY(2);*/
}

header div:first-child h1{
	margin: unset;
	position: relative;
}

header div:first-child img{
	height:100%;
	position:absolute;
}

/*#title{
	
	position:relative;
	z-index: 10;
	
	pointer-events:none;
	font-size: calc( var(--headerHeight) / 2 );
	white-space: nowrap;
	overflow:hidden;
	
	display: flex;
    align-items: center;
    justify-content: center;
}*/

/*#title::before {
	display:none;
	
	background: radial-gradient(rgba(200,100,255,0.5), rgba(200,100,255,1));
	background-size:90vw;
	border: 4px #ccf inset;
	position: absolute;
	width: calc(100% - ( 2 * var(--headerPadding) ) );
	height: 100%;
	content: "";
	top: -4px;
	left: var(--headerPadding);
	box-sizing: border-box;
}*/

/*#title>h1{
	perspective:var(--perspective);
	transform:scale(1.2);
	margin: 0px;
}

#crisis, #realms{
	
	display: inline-block;
	background-clip: text;
	-webkit-background-clip: text;
}

#crisis {
	
	transform-origin:right center;
	transform: scaleY(1.5) rotateX(-15deg) rotateY(5deg);
}

#title img{display:none;
}

#realms {
	margin-left: 0px;
	transform-origin:left center;
	transform: scaleY(1.5) rotateX(15deg) rotateY(-5deg);
}

header img{
	height:100%;
}*/

#menuButton{
	pointer-events:initial;
	outline: 1px solid red;
	flex-grow: 1;
	
	z-index:1000000;
	
	/*silly bit*/
	width:86px;
	background:url("/images/assets/ui/target.gif") center top no-repeat;
	background-size:96px;
	
	mask-image: url("/images/assets/ui/targetMask.gif");
	mask-size: 96px;
	mask-position: center top;
	mask-repeat: no-repeat;
	mask-composite: subtract;
	-webkit-mask-image: url("/images/assets/ui/targetMask.gif");
	-webkit-mask-size: 96px;
	-webkit-mask-position: center top;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-composite: subtract;
	
	/*even sillier*/
	position: absolute;
	top: 0px;
	right: -32px;
	
	transform-origin: center top;
}

/*-----------------------------------------------------------------
                                          menu stuff...
-------------------------------------------------------------------*/

menu,
#menuInnerInner{
	background: var(--sidebarBackground);
	background-blend-mode: var(--sidebarBackgroundBlend);
	background-size: var(--sidebarBackgroundSize);
}

menu{
	/*position:fixed;*/
	position: absolute;
	box-sizing: border-box;
	margin:0px;
	padding:0px;
	/*padding-top: 40px;*/
	right:	var(--sidebarHiddenWidth);
	width:	var(--sidebarWidth);
	top:	0px;
	
/*	height: 100vh;*/	
	height:100%;
	min-height:	100vh;
	
	font-size: 10px;
}

menu #bumperContainer{
	width:100%;
}

#bumper{
	
	border-style: solid;
	border-width: 2px;
	
/*	border:2px inset;
	position: relative;
	left: 50px;
	top: -50px;
	transform-origin: center left;
*/
	
}

menu img{
}

menu a{
	background-image: var(--menuDarker);
}

menu ul{
	padding: 0px;
}	

menu nav ul{
	border-top: 1px solid var(--engravingDark);
	border-bottom: 1px solid var(--engravingLight);
}

menu nav ul li{
	padding-left: 2px;
	list-style: none;
	border-top: 1px solid var(--engravingLight); /*#fff;*/
	border-bottom: 1px solid var(--engravingDark); /*#333;*/
	font-size: 20px;
	overflow:hidden;
}

#blurb{
		background:url("/mobhome/platforms.png") no-repeat var(--blurbIconPosition), var(--blurbBackground);
		/*background-size-y: 110%, 100%;*/
		background-blend-mode:soft-light;
		
		color: var(--blurbTextColour);
}

#blurb p{
	font-size: 10px;
	margin-bottom:2px;
}

.sidebarOption{
	
	background: var(--menuOptionBackground);
    background-clip: border-box;
	color: transparent;
	display: inline-block;
	background-clip: text;
	-webkit-background-clip: text;
}

#themeSelect{
	line-height:8px;
	text-align: left;
	display: inline-block;
}

#themeSelect ul{
	list-style: none;
}


#themeSelect {
	margin-top:4px;
}

#themeSelect legend{
	border-color: var(--engravingLight);
	  position: relative;
	  bottom: 2px;
}


	/* ---------------------------AUdio BitSZ---------------*/
	

#audioBar{
	background: var(--playerBackground);
	box-shadow: inset 0px 0px 8px var(--menuColour);
	display: flex;
	gap: var(--audioPadding);
	padding: var(--audioPadding);
}

#controls>*,
#screen{
	border-radius: 2px;
	font-family:serif;
}

#controls{
	display: flex;
	gap:4px;
}

.audioButton{
	background: var(--buttonBackground);
	border: 2px outset;
	border-color: var(--screenBackground) var(--screenMid) var(--screenMid) var(--screenBackground);
	box-sizing: border-box;
	flex-basis: 0;
	flex-grow:1;
	gap:20px;
	padding:10px 0;
	
	overflow: hidden;
}

.audioButton:active p{
	text-shadow: 0 -1px 0 var(--screenDarker);
	color: var(--screenMid);}
}

.audioButton:disabled{
	border-color: var(--screenDarker);
/*	border-color: var(--screenMid) var(--screenDarker) var(--screenDarker) var(--screenMid);*/
}

.audioButton p{
	position: relative;
	top: 2px;
	text-shadow: 0 -1px 0 var(--screenMid);
	color: var(--screenBackground);
	font-style: italic;
/*	transform: scaleX(1.6) scaleY(3.4);*/
	font-size: larger;
	font-family:sans-serif;
	font-weight: bold;
	letter-spacing: -0.1em;
}

.audioButton.flashing{
	border-style: solid;
}

.audioButton.flashing,
.audioButton.flashing p{
	animation: buttonFlash;
	animation-duration: 1.2s;
	animation-iteration-count:infinite;
	animation-timing-function: step-end;
}

.audioButton:disabled p{
	
	text-shadow: 0 -0.5px 0 var(--screenDarker);
	color: var(--screenDarker);
}

.audioButton:disabled,
.audioButton:active,
#playPause.inset{
	border-style: inset;
}



.audioButton:hover:not(:disabled){
	background-image: linear-gradient( var(--buttonColourDark), var(--buttonColourLight) );
}

#screen{
	
	background-color:var(--screenBackground);
	box-shadow: inset 0px 0px 4px var(--screenDarker);
	text-shadow: 0px 0px 2px var(--screenDarker);
	padding:4px;
	flex-grow:1;
	-webkit-font-smoothing : none;
	font-smooth: never;
	font-family:"ＭＳ Ｐゴシック", "Hiragino Mincho ProN W3", monospace;
	font-size:16px;
	font-shadow: #333, 0px, 0px, 4px;
	
}

#progress,
#playlist{
	color: var(--screenDarker);
}


#playlist ul:first-child{
	text-decoration:underline;
}



#progress{
	display:flex;
	flex-direction:row;
	width: 100%;
	margin: 0px;
}
	
#progressBar{
	box-shadow: 0px 0px 1px var(--screenDarker), inset 0px 0px 1px var(--screenDarker);

	flex-grow:1;
	border: 1px solid var(--screenDarker);
	box-sizing:border-box;
/*	-webkit-appearance: none;  /* Override default CSS styles */
	appearance: none;
	height: 16px; /* Specified height */
	background: none; /* Grey background */
	outline: none; /* Remove outline */
/*	opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
/*	-webkit-transition: .2s; /* 0.2 seconds transition on hover */
/*	transition: opacity .2s;*/
}

#progressBar::-webkit-slider-thumb,
#progressBar::-moz-range-thumb {
	-webkit-appearance: none;
	appearance: none;
	border-radius:0px;
	width: 0px;
	height: calc(100% + 4px);
	background: var(--screenDarker);
	border-color:var(--screenDarker);
	box-shadow: 0px 0px 1px var(--screenDarker);
}

#progressBar::-moz-range-progress,
#progressBar::-ms-fill-lower{
	height:100%;
	background-color: var(--screenMid);
}

#playlist ul{
	list-style:none;
}

.trackname{
	
}

header,
menu{
	z-index:1000;
}
#widgetZone{
	transition: opacity 0s linear 0.1s;
	counter-reset: line-number 10;
}
#widgetZone >*{
	opacity: 1;
	counter-increment: line-number 2;
	transition: opacity 0s linear calc( 0.1s * counter(line-number) );
}
#widgetZone:nth-child(1){
	
}
.hidden #widgetZone >*,
.hiding #widgetZone >*{
	opacity: 0;
}

.overlayPage{
	position: fixed;
	z-index: 900;
	width: 100%;
	top: 0;
}


/* --------------------------------------------------------------------------

					Animation

-------------------------------------------------------------------------- */

/*----------------------- Side mobile menu pops out like this. */
menu,
#menuInnerInner{		  /*Property	Duration	Timing-function					Delay		*/
	transition: right 		0.15s		cubic-bezier(.17,.84,.44,1)		0s			;
}

/*menu.hiding{
	right: calc( 0px - var(--sidebarWidth) );
}*/

menu.showing{
	right: 0px;
}

/*----------------------- Header hiding when user scrolls down. */
header{
	perspective: 250px;
	transition: top			0.15s		cubic-bezier(.17,.84,.44,1)		0s			,
				width			0.15s		cubic-bezier(.17,.84,.44,1)		0s			,
				height			0.15s		cubic-bezier(.17,.84,.44,1)		0s			,
				margin-left	0.15s		cubic-bezier(.17,.84,.44,1)		0s			;
				
}

header.hiding{
	top: -84px;
/*	top: calc( 0px - ( var(--headerHeight) + ( 2 * var(--headerPadding) ) ) );*/
}

header.showing{
/*	top: -2px;*/
	top:0px;
}

/*----------------------- Wee bit for the shootemup target.*/

#menuButton{
	transition: top			0.15s		cubic-bezier(.17,.84,.44,1)		0s			;
}

header.hiding #menuButton{
	top: 32px;
	opacity: 0.8;
}

header.showing #menuButton{
	top: 0px;
}

/*------------------------ Slight sideways bump for header and footer when the menu is shown. */

/*#audioBar{
	transition: margin-left	0.15s		cubic-bezier(.17,.84,.44,1)		0s			;
}*/


main{
	transition:	width	0.15s		cubic-bezier(.17,.84,.44,1)		0s			;
}


/*------------- For postInfo...
*/

#postInfo.hiding{
	animation: 			01.0s cubic-bezier(.17,.84,.44,1) 0s 1 forwards 			infoOut;
	-webkit-animation: 	01.0s cubic-bezier(.17,.84,.44,1) 0s 1 forwards 	infoOut;
}

#postInfo.showing{
	animation: 			01.0s cubic-bezier(.17,.84,.44,1) 0s 1 backwards 		infoIn;
	-webkit-animation: 	01.0s cubic-bezier(.17,.84,.44,1) 0s 1 backwards infoIn;
}

@keyframes infoOut{
	from {	transform: translateY(0px	);}
	to {	transform: translateY(200px	);}
}

@keyframes infoIn{
	from {	transform: translateY(200px	);}
	to {	transform: translateY(0px	);}
}

/*-------------------------- audio player intro
*/
#audioBar.showing{
	animation: 			00.15s cubic-bezier(.17,.84,.44,1) 0s 1 forwards audioIn;
	-webkit-animation: 	00.15s cubic-bezier(.17,.84,.44,1) 0s 1 forwards audioIn;
}

@keyframes audioIn{
	from {	bottom: calc( 0px - var(--audioPlayerHeight) ) ;}
	to {	bottom: 0px ;}
}

/* shootemup */

#menuButton.hiding{
	animation: 			00.5s cubic-bezier(.19,1,.22,1) 0s 1 forwards 	swingDown;
	-webkit-animation: 	00.5s cubic-bezier(.19,1,.22,1) 0s 1 forwards 	swingDown;
}

#menuButton.showing{
	animation: 			00.5s cubic-bezier(.18,.89,.32,1.28) 0s 1 forwards 	swingUp;
	-webkit-animation: 	00.5s cubic-bezier(.18,.89,.32,1.28) 0s 1 forwards	swingUp;
}

@keyframes swingDown{
	from {	transform: rotateX(-80deg);
			right: 0px;}
	to {	transform: rotateX(0deg);
			right: 0px;}
}

@keyframes swingUp{
	from {	transform: rotateX(0deg);
			right: 0px;}
	to {	transform: rotateX(-80deg);
			right: 0px;}
}

@keyframes buttonFlash{
	0%,100%{text-shadow: 0 -1px 0 var(--screenDarker);
			color: var(--screenMid);
			border-color: var(--screenBackground) var(--screenMid) var(--screenMid) var(--screenBackground);}
	50%	{	text-shadow: 0 -1px 0 var(--screenMid);
			color: var(--screenBackground);
			border-color: var(--screenBackground);}
}

@keyframes buttonFlashAdvance{
	0%,80%,90%,100%{text-shadow: 0 -1px 0 var(--screenDarker);
			color: var(--screenMid);
			border-color: var(--screenBackground) var(--screenMid) var(--screenMid) var(--screenBackground);}
	85%,95%	{	text-shadow: 0 -1px 0 var(--screenMid);
			color: var(--screenBackground);
			border-color: var(--screenBackground);}
}

/*	Experimental new audio player. */
/*	Remove old media player. */
#MediaPlayer{
	display: none;
	
}
#MediaPlayer canvas{
	opacity: 0;
}
#MediaPlayer{
/*	outline: blue 1px dashed;*/
}
/*	New media player. */
#mp3Player{
	pointer-events: none;
	position: fixed;
/*	bottom: 4px;
	right: 4px;*/
	bottom: -356px;
	right: -42px;
	width: 600px;
	max-width: calc( 100vw + 26px );
	height: 320px;
	z-index: 1001;
	
/*	outline: 1px red dashed;*/
	transition: bottom 0.2s;
}
#mp3Player.active{
	bottom: -36px;
}
#mp3Case{
	pointer-events: initial;
	position: absolute;
	top: 110px;
	width: 540px;
	max-height: 160px;
	max-width: calc( 100% - 42px);
	background: url('/images/assets/mp3/mp3.gif');
	background-blend-mode: multiply;
	display: flex;
	flex-direction: column;
	padding-top: 20px;
	gap: 6px;
}
#mp3Screen{
	height: 90px;
	background: url('/images/assets/mp3/loadingscreen.gif');
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 2px;
	box-sizing: border-box;
	font-family: monospace;
}
#mp3Screen #playlist{
	flex-grow: 1;
}

#mp3Screen #progressBar{
	height: 8px;
}

#mp3Screen::after{
	content: "";
	width: 100%;
	height:100%;
	background: url('/images/assets/mp3/mp3screen.gif');
	position:absolute;
	top: 0;
	left: 0;
	pointer-events: none;
	opacity: 1;
	transition: opacity 0.4s steps( 3, jump-start );
}
#mp3Screen:hover::after{
	opacity: 0;
}
#mp3Player:has(#mp3Screen:hover) canvas{
	opacity: 0.2;
}
#mp3Buttons{
	list-style: none;
	padding: 0 11px;
	display: flex;
	gap: 7px;
}
#mp3Buttons button{
	width: 52px;
	height: 44px;
	
	border-radius: initial;
	border: none;
	background: none;
	background-image: url('/images/assets/mp3/spritesheets/buttons.gif');
	position:relative;
	top: 1px;
}
#mp3Buttons li{
	opacity: 0;
}
#mp3Play.active{
	background-position-x: calc( ( 312px / 6 ) * 3 * -1);
}
#mp3Back{
	background-position-x: calc( ( 312px / 6 ) * -1);
}
#mp3Back.active{
	background-position-x: calc( ( 312px / 6 ) * 4 * -1);
}
#mp3Skip{
	background-position-x: calc( ( 312px / 6 ) * 2 * -1);
}
#mp3Skip.active{
	background-position-x: calc( ( 312px / 6 ) * 5 * -1);
}
#mp3Play:hover,
#mp3Back:hover,
#mp3Skip:hover{
	background-position-y: calc( ( 132px / 3 ) * 1 );
}
#mp3Play:active,
#mp3Back:active,
#mp3Skip:active{
	background-position-y: calc( ( 132px / 3 ) * 2 );
}

#mp3Player canvas{
	position: absolute;
	right: 0;
	opacity: 1;
	transition: opacity 0.4s steps( 6, jump-start ),
				filter 0.4s;
	filter: var(--goopFilter);
}