/* ==========================================================================
   variables
   ========================================================================== */

:root
{
	--clr-bkg: #141516;
	
	--clr-mp01: #1ab74f;
	--clr-mp02: #0d9800;
	--clr-mp03: #00de51;
	--clr-mp04: #009700;
	--clr-mp05: #118cb0;
	--clr-mp06: #2107dc;
	--clr-mp07: #ffe744;
	--clr-mp08: #0097ae;
	--clr-mp09: #0000ff;
	--clr-mp10: #c100ae;
	--clr-mp11: #c10000;
	--clr-mp12: #845100;
	--clr-mp13: #3e3700;
	--clr-mp14: #c1c8c8;
	--clr-mp15: #0021ff;
	--clr-mp16: #ffffff;
	--clr-mp17: #000000;

	--offset: 0;
	--max_width: 100%;
	--line-thickness: 1px;
	--color: rgba(255, 255, 255, .125);
	--media-query: 'base';
	
	--repeating-width: calc(100% / var(--columns));
	--column-width: calc((100% / var(--columns)) - var(--gutter));
	--background-width: calc(100% + var(--gutter));
	
	--background-columns: repeating-linear-gradient( to right, var(--color), var(--color) var(--line-thickness), transparent var(--line-thickness), transparent calc(var(--column-width) - var(--line-thickness)), var(--color) calc(var(--column-width) - var(--line-thickness)), var(--color) var(--column-width), transparent var(--column-width), transparent var(--repeating-width) );
	--background-baseline: repeating-linear-gradient( to bottom, var(--color), var(--color) 1px, transparent 1px, transparent var(--baseline) );
}



/* ==========================================================================
   fonts
   ========================================================================== */

@font-face 										{ font-family: 'Operator-Mono'; src: local('Operator Mono Bold'), url('/css/fnt/OperatorMono-Bold.woff') format('woff'); font-weight: 900; font-style: normal; }
@font-face 										{ font-family: 'Operator-Mono'; src: local('Operator Mono Bold Italic'), url('/css/fnt/OperatorMono-BoldItalic.woff') format('woff'); font-weight: 900; font-style: italic; }
@font-face 										{ font-family: 'Operator-Mono'; src: local('Operator Mono Extra Light'), url('/css/fnt/OperatorMono-XLight.woff') format('woff'); font-weight: 100; font-style: normal; }
@font-face 										{ font-family: 'Operator-Mono'; src: local('Operator Mono Extra Light Italic'), url('/css/fnt/OperatorMono-XLightItalic.woff') format('woff'); font-weight: 100; font-style: italic; }
@font-face 										{ font-family: 'Operator-Mono'; src: local('Operator Mono Light'), url('/css/fnt/OperatorMono-Light.woff') format('woff'); font-weight: 300; font-style: normal; }
@font-face 										{ font-family: 'Operator-Mono'; src: local('Operator Mono Light Italic'), url('/css/fnt/OperatorMono-LightItalic.woff') format('woff'); font-weight: 300; font-style: italic; }
@font-face 										{ font-family: 'Operator-Mono'; src: local('Operator Mono Book'), url('/css/fnt/OperatorMono-Book.woff') format('woff'); font-weight: 500; font-style: normal; }
@font-face 										{ font-family: 'Operator-Mono'; src: local('Operator Mono Book Italic'), url('/css/fnt/OperatorMono-BookItalic.woff') format('woff'); font-weight: 500; font-style: italic; }
@font-face 										{ font-family: 'Operator-Mono'; src: local('Operator Mono Medium'), url('/css/fnt/OperatorMono-Medium.woff') format('woff'); font-weight: 700; font-style: normal; }
@font-face 										{ font-family: 'Operator-Mono'; src: local('Operator Mono Medium Italic'), url('/css/fnt/OperatorMono-MediumItalic.woff') format('woff'); font-weight: 700; font-style: italic; }



/* ==========================================================================
   animations
   ========================================================================== */

@keyframes pulse								{ 0% { transform: rotate(0deg); } 75% { transform: rotate(90deg); } 100% { transform: rotate(90deg); } }



/* ==========================================================================
   normalize/reset
   ========================================================================== */

div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video { border: 0; font-size: 100%; font: inherit; vertical-align: baseline; margin: 0; padding: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
main,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display: block; }
ol, ul	 										{ list-style: none; }
blockquote, q 									{ quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: none; }
table											{ border-collapse: collapse; border-spacing: 0; }
*												{ margin: 0; padding: 0; }
*, *:before, *:after 							{ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

html 											{ font-size: 1em; }

::-moz-selection 								{ background: #b3d4fc; text-shadow: none; }
::selection 									{ background: #b3d4fc; text-shadow: none; }

hr 												{ display: block; height: 1px; border: 0; background: #ccc; margin: 0 auto; padding: 0; }

audio, canvas, iframe, img, svg, video 			{ vertical-align: middle; }
fieldset 										{ border: 0; margin: 0; padding: 0; }
textarea 										{ resize: vertical; }
input, textarea, button, select					{ -moz-appearance: none; -webkit-appearance: none; appearance: none; border-radius: 0; }

button, input[type=submit]						{ margin: 0; padding: 0; border: 0; background: transparent; font-family: inherit; font-size: 1em; cursor: pointer; outline: none; overflow: visible; }
button::-moz-focus-inner						{ padding: 0; border: 0; }

sup, sub										{ height: 0; line-height: 1; vertical-align: baseline; _vertical-align: bottom; position: relative; font-size: .5em; }
sup												{ bottom: 1.5ex; }
sub												{ top: .5ex; }

a												{ text-decoration: none; color: inherit; }



/* ==========================================================================
   opinionated defaults
   ========================================================================== */

html 											{ background: #eee; color: #ddd; line-height: 1; }
::-moz-selection 								{ background: #336699; color: #eee; text-shadow: none; }
::selection 									{ background: #336699; color: #eee; text-shadow: none; }

p												{ margin-bottom: 1em; }

a, button										{ transition: all .25s; }



/* ==========================================================================
   custom styles
   ========================================================================== */

body											{ background: var(--clr-bkg); width: 100vw; min-height: 100dvh; }
body.game										{ overflow: hidden; font-family: 'Operator-Mono', monospace; }
body.off 										{ cursor: pointer; }

main											{ min-height: 100vh; }
.game main										{ min-height: initial; height: 100vh; height: calc(var(--vh, 1vh) * 100); } /* might be able to get rid of this with height: 100%? */

div.cabinet										{ font-size: 2em; cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%203%203%22%3E%3Crect%20fill%3D%22none%22%20stroke%3D%22rgba%28255%2C255%2C0%2C1%29%22%20x%3D%220.5%22%20y%3D%220.5%22%20width%3D%222%22%20height%3D%222%22%2F%3E%3C%2Fsvg%3E%0A"), crosshair; width: 100%; height: 100%; position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; will-change: transform; transform-style: preserve-3d; transform: perspective(1000px) }
body.ready div.cabinet::after 					{ opacity: 1; }

div.bezel										{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; transform: translateZ(50px); z-index: 10; pointer-events: none; }

div.screen										{ position: absolute; transform: translateZ(0); z-index: 5; opacity: 0; transition: opacity .5s; }
.screen > div.wrapper 							{ position: relative; width: 100%; height: 100%; }
.loaded div.screen 								{ opacity: 1; }
.mbm div.screen:after							{ content: ''; display: block; position: absolute; z-index: 6; top: 0; left: 0; width: 100%; height: 100%; background: url(/img/aperture.png); mix-blend-mode: screen; opacity: .1; pointer-events: none; }
.game div.screen								{ background: #0e0e15; border: min(2vw,2vh) #000 solid; }
.game div.screen.crt::after						{ content: ''; display: block; width: 100%; height: 100%; position: absolute; z-index: 100; pointer-events: none; top: 0; left: 0; background: url(/_common/img/aperture5.png); mix-blend-mode: multiply; background-size: 48px 48px; opacity: .25; }
.game div.screen.crt::before					{ content: ''; display: block; width: 100%; height: 100%; position: absolute; z-index: 100; pointer-events: none; top: 0; left: 0; background: url(/_common/img/aperture5b.png); mix-blend-mode: overlay; background-size: 48px 48px; opacity: .5; }

.game canvas  									{ opacity: 0; width: 100%; height: 100%; transition: opacity .25s; -ms-interpolation-mode: nearest-neighbor; image-rendering: -webkit-optimize-contrast; image-rendering: -webkit-crisp-edges; image-rendering: -moz-crisp-edges; image-rendering: -o-crisp-edges; image-rendering: pixelated; }
.game.ready canvas 								{ opacity: 1; }
.game.paused canvas 							{ opacity: .5; }

.debug .screen div.wrapper::after 				{ opacity: 1; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin-right: auto; margin-left: auto; width: 100%; height: 100%; content: ''; background-image: var(--background-columns), var(--background-baseline); background-size: var(--background-width) 100%; background-position: -.5px -.5px; z-index: 1000; pointer-events: none; }



/* ==========================================================================
   minis
   ========================================================================== */

.game.moonpatrol div.bezel						{ background: url(/moonpatrol/img/bezel.png) no-repeat 50% 50%; background-size: 26.625em 22.9375em; transform: translateZ(1.5625em); }
.game.moonpatrol div.screen						{ width: 20em; height: 19.25em; background: #000 url(/moonpatrol/img/scr01.png) no-repeat 0 0; background-size: 100% auto; box-shadow: inset 0 0 .25em rgba(0,0,0,.75); border: 2.5em rgba(0,0,0,1) solid; }

.game.donkeykong div.bezel						{ background: url(/donkeykong/img/bezel.png) no-repeat 50% calc(50% - .25em); background-size: 23.4375em 22.3125em; }
.game.donkeykong div.screen						{ width: 19em; height: 19.75em; background: #000 url(/donkeykong/img/scr01.png) no-repeat 0 0; background-size: 100% auto; box-shadow: inset 0 0 .375em rgba(0,0,0,1); border: 2.5em rgba(0,0,0,1) solid; border-top-width: 1.25em; transform: translateY(.625em); }

.game.spaceinvaders div.bezel					{ background: url(/spaceinvaders/img/bezel.png) no-repeat 50% calc(50% - 1.75em); background-size: 30.9375em 32em; }
.game.spaceinvaders div.screen					{ width: 14em; height: 16em; background: rgba(177,209,205,0) url(/spaceinvaders/img/scr01.png) no-repeat 0 0; background-size: 100% auto; }
.game.spaceinvaders div.moon					{ width: 21.875em; height: 16em; background: url(/spaceinvaders/img/moon.png) no-repeat 50% 100%; background-size: 21.875em auto; position: absolute; transform: translateZ(-1.25em) translateY(2em); z-index: 2; opacity: .5; }
.game.spaceinvaders div.space					{ width: 21.875em; height: 18.75em; background: rgba(177,209,205,1) url(/spaceinvaders/img/space.jpg) no-repeat 50% 0; background-size: 21.875em auto; position: absolute; transform: translateZ(-1.875em) translateY(.75em); z-index: 1; opacity: .25; }
:not(.mbm) .game.spaceinvaders div.screen		{ background-color: rgba(177,209,205,.05); }

.game.asteroids div.bezel						{ background: url(/asteroids/img/bezel.png) no-repeat 50% calc(50% + .875em); background-size: 23.125em 17.75em; transform: translateZ(2.5em); }
.game.asteroids div.screen						{ width: 23.5em; height: 16.5em; background: #0f0f0f url(/asteroids/img/scr01.png) no-repeat 0 0; background-size: 20em 15em; box-shadow: inset 0 0 .375em rgba(0,0,0,1); border-color: rgba(10,10,10,1); border-style: solid; border-width: .75em 2em; }
.game.asteroids div.screen:after				{ content: none; }

.game.congobongo div.bezel						{ background: url(/congobongo/img/bezel.png) no-repeat 50% 50%; background-size: 24.875em 22.3125em; transform: translateZ(1.5625em); }
.game.congobongo div.screen						{ width: 14.5em; height: 18.5em; background: #000 url(/congobongo/img/scr01.png) no-repeat 0 0; background-size: 100% auto; box-shadow: inset 0 0 .375em rgba(0,0,0,1); border-color: rgba(10,10,10,1); border-style: solid; border-width: 1.25em .25em; }



/* ==========================================================================
   instructions
   ========================================================================== */

.screen aside               					{ font-size: min(2.75vw,2.75dvh); display: none; position: absolute; z-index: 10000; top: 0; left: 0; width: 100%; height: 100%; padding: .5em; background: rgba(0,0,0,.8); -webkit-backdrop-filter: blur(4px); color: #eee; font-family: 'Operator-Mono'; white-space: pre; }
.screen aside.show          					{ display: block; }



/* ==========================================================================
   specifics
   ========================================================================== */

.donkeykongjr div.wrapper, .donkeykongjr canvas	{ aspect-ratio: 224 / 256; }

.pacman div.wrapper, .pacman canvas				{ aspect-ratio: 224 / 288; }

.mspacman div.wrapper, .mspacman canvas 		{ aspect-ratio: 224 / 288; }

.frogger div.wrapper, .frogger canvas 			{ aspect-ratio: 224 / 256; }



/* ==========================================================================
   preloader - todo: move to head?
   ========================================================================== */

.preloader 										{ position: fixed; width: 46.42857143%; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; display: flex; flex-wrap: nowrap; transition: opacity .25s; }
.ready .preloader 								{ opacity: 0; }

.preloader div 									{ width: 28%; height: auto; aspect-ratio: 1; animation-name: pulse; animation-duration: 1.5s; animation-iteration-count: infinite; animation-direction: normal; animation-timing-function: ease-in-out; }
.preloader div:nth-child(1) 					{ animation-delay: 0s; }
.preloader div:nth-child(2) 					{ animation-delay: .1s; }
.preloader div:nth-child(3) 					{ animation-delay: .2s; }
.preloader div:nth-child(4) 					{ animation-delay: .3s; }
.preloader div:nth-child(5) 					{ animation-delay: .4s; }
.preloader div:nth-child(6) 					{ animation-delay: .5s; }
.preloader div:nth-child(7) 					{ animation-delay: .6s; }
.preloader div:nth-child(8) 					{ animation-delay: .7s; }
.preloader div:nth-child(9) 					{ animation-delay: .8s; }
.preloader div:nth-child(10) 					{ animation-delay: .9s; }
.preloader div:nth-child(11) 					{ animation-delay:  1s; }
.preloader div:nth-child(12) 					{ animation-delay: 1.1s; }
.preloader div:nth-child(13) 					{ animation-delay: 1.2s; }

.screen img 									{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: auto; image-rendering: pixelated; transition: opacity .25s; pointer-events: none; }
.ready .screen img 								{ opacity: 0; }


/* ==========================================================================
   media queries
   ========================================================================== */

@media only screen and (max-width: 64em) /* 1024px */
{	
	html 										{ height: -webkit-fill-available; }
	body.game, .game main 						{ width: 100vw; min-height: 100vh; min-height: -webkit-fill-available; }
	div.cabinet 								{ font-size: 1em; }
}

@media only screen and (max-width: 198em) /* 768px */ /* todo: rework this to be 100% responsive to size of container? not sure crispiness holds up... */
{
	.game div.screen.crt::after					{ background-size: 24px 24px; opacity: .5; }
	.game div.screen.crt::before				{ background-size: 24px 24px; opacity: .5; }
}

@media (max-aspect-ratio: 224/256) /* portrait */
{
	.game.donkeykongjr canvas, .game.frogger canvas { height: auto; }

	.game.donkeykongjr div.bezel.on				{ background: url(/donkeykongjunior/img/bezel-mobile-portrait-color.png) no-repeat 50% 50%; background-size: 100% auto; transform: none; }
	.game.donkeykongjr div.screen				{ width: 100vw; height: auto; }
	
	.game.frogger div.bezel.on					{ background: url(/frogger/img/bezel-portrait.png) no-repeat 50% 50%; background-size: 100% auto; transform: none; }
	.game.frogger div.screen					{ width: 100vw; height: auto; }
}

@media (max-aspect-ratio: 224/288) /* portrait */
{
	.game.pacman canvas, .game.mspacman canvas { height: auto; }

	.game.pacman div.bezel.on					{ /*background: url(/frogger/img/bezel-portrait.png) no-repeat 50% 50%; background-size: 100% auto;*/ transform: none; }
	.game.pacman div.screen						{ width: 100vw; height: auto; }
	
	.game.mspacman div.bezel.on					{ /*background: url(/frogger/img/bezel-portrait.png) no-repeat 50% 50%; background-size: 100% auto;*/ transform: none; }
	.game.mspacman div.screen					{ width: 100vw; height: auto; }
}

@media (min-aspect-ratio: 224/256) /* landscape */
{	
	.game.donkeykongjr canvas, .game.frogger canvas { width: auto; }

	.game.donkeykongjr div.bezel.on				{ background: url(/donkeykongjunior/img/bezel-mobile-landscape-color.png) no-repeat 50% 50%; background-size: auto 100%; transform: none; }
	.game.donkeykongjr div.screen				{ width: auto; height: 100dvh; }
	
	.game.frogger div.bezel.on					{ background: url(/frogger/img/bezel-landscape.png) no-repeat 50% 50%; background-size: auto 100%; transform: none; }
	.game.frogger div.screen					{ width: auto; height: 100dvh; }
}

@media (min-aspect-ratio: 224/288) /* landscape */
{
	.game.pacman canvas, .game.mspacman canvas { width: auto; }

	.game.pacman div.bezel.on					{ /*background: url(/frogger/img/bezel-landscape.png) no-repeat 50% 50%; background-size: auto 100%;*/ transform: none; }
	.game.pacman div.screen						{ width: auto; height: 100dvh; }
	
	.game.mspacman div.bezel.on					{ /*background: url(/frogger/img/bezel-landscape.png) no-repeat 50% 50%; background-size: auto 100%;*/ transform: none; }
	.game.mspacman div.screen					{ width: auto; height: 100dvh; }
}