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

:root
{
	--v1-scale: .9;
	--v1-rotateZ: 0deg;
	--v1-rotateY: 0deg;
	--v1-rotateX: 0deg;
	--v1-x: 0;
	--v1-y: -6px;
	--v1-z: 0px;
	--v1-fade-alpha: 0;
	--v1-fade-deg: 180deg;

	--v2-scale: 1.1;
	--v2-rotateZ: -20deg;
	--v2-rotateY: 0deg;
	--v2-rotateX: 38deg;
	--v2-x: 12px;
	--v2-y: -124px;
	--v2-z: 0px;
	--v2-fade-alpha: .844;
	--v2-fade-deg: 200deg;
	
	--v3-scale: 1.4;
	--v3-rotateZ: 32deg;
	--v3-rotateY: 0deg;
	--v3-rotateX: 62deg;
	--v3-x: -116px;
	--v3-y: -244px;
	--v3-z: -40px;
	--v3-fade-alpha: 1;
	--v3-fade-deg: 148deg;
	
	--v4-scale: 1.2;
	--v4-rotateZ: 22deg;
	--v4-rotateY: 0deg;
	--v4-rotateX: 46deg;
	--v4-x: -4px;
	--v4-y: -150px;
	--v4-z: 0px;
	--v4-fade-alpha: 1;
	--v4-fade-deg: 158deg;

	--default-scale: --v2-scale;
	--default-rotateZ: --v2-rotateZ;
	--default-rotateY: --v2-rotateY;
	--default-rotateX: --v2-rotateX;
	--default-x: --v2-x;
	--default-y: --v2-y;
	--default-fade-alpha: --v2-fade-alpha;
	--default-fade-deg: --v2-fade-deg;

	--grid-w: 600px;
	--grid-l: 600px;
	--wall-height: 37px;
	--line-width: 1px;
	--grid-space: 10px;

	--grid-color: 226,217,236;
	--floor-color: 31,71,94;
	--fade-color: 0,0,0;
	--wall-color: 16,25,56;
	
	--grid-width: calc(var(--grid-w) + (var(--line-width) * 7));
	--grid-depth: calc(var(--grid-l) + (var(--line-width) * 7));
	
	--col-blu: 0,136,203;
	--col-org: 255,103,0;
	--col-red: 255,44,0;
	--col-yel: 255,178,0;
}


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




/* ==========================================================================
   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; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; cursor: url(/tron/img/cursor2.svg) 18 18, auto; }
body											{ font-family: 'terminal', monospace; }

::-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-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; color: #85c441; }
a:hover											{ color: #999; }



/* ==========================================================================
   the grid
   ========================================================================== */

/* body::after				{ content: ''; display: block; position: absolute; z-index: 1000; top: 0; left: 0; width: 100%; height: 100%; mix-blend-mode: color-burn; opacity: .25; background: url(/tron/img/aperture.png); background-size: 224px 256px; pointer-events: none; } */

main 					{ perspective: 100vw; width: 100vw; height: 100vh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: center; }

div.video-wrap			{ position: fixed; right: 0; bottom: 0; width: 100vw; height: 100vh; opacity: 1; transition: opacity 1s; background: #000; }
.video-wrap::after		{ content: ''; display: block; position: absolute; z-index: 1000; top: 0; left: 0; width: 100%; height: 100%; mix-blend-mode: multiply; opacity: 1; background: url(/tron/img/aperture.png); background-size: 224px 256px; pointer-events: none; }
.bg-video				{ min-width: 100%; min-height: 100%; opacity: .25; }
.video-wrap.remove		{ display: none; }

div.gamegrid 			{ opacity: 0; width: var(--grid-width); height: var(--grid-depth); overflow: visible; transform: rotateX(0) rotateY(0) rotateZ(0) scale3d(.1, .1, .1) translate3d(0,0,0); will-change: transform; transform-origin: 50% 50% 0px; position: absolute; z-index: 1; }
.zoom div.gamegrid		{ opacity: 1; transition: opacity 6s ease 2s, transform 8s ease 2s; transform-style: preserve-3d; transform: rotateX(var(--v1-rotateX)) rotateY(var(--v1-rotateY)) rotateZ(var(--v1-rotateZ)) scale3d(var(--v1-scale), var(--v1-scale), var(--v1-scale)) translate3d(var(--v1-x),var(--v1-y),0); }
.zoom div.gamegrid.v1	{ transition: transform 2s ease 0s; transform: rotateX(var(--v1-rotateX)) rotateY(var(--v1-rotateY)) rotateZ(var(--v1-rotateZ)) scale3d(var(--v1-scale), var(--v1-scale), var(--v1-scale)) translate3d(var(--v1-x),var(--v1-y),var(--v1-z)); }
.zoom div.gamegrid.v2	{ transition: transform 2s ease 0s; transform: rotateX(var(--v2-rotateX)) rotateY(var(--v2-rotateY)) rotateZ(var(--v2-rotateZ)) scale3d(var(--v2-scale), var(--v2-scale), var(--v2-scale)) translate3d(var(--v2-x),var(--v2-y),var(--v2-z)); }
.zoom div.gamegrid.v3	{ transition: transform 2s ease 0s; transform: rotateX(var(--v3-rotateX)) rotateY(var(--v3-rotateY)) rotateZ(var(--v3-rotateZ)) scale3d(var(--v3-scale), var(--v3-scale), var(--v3-scale)) translate3d(var(--v3-x),var(--v3-y),var(--v3-z)); }
.zoom div.gamegrid.v4	{ transition: transform 2s ease 0s; transform: rotateX(var(--v4-rotateX)) rotateY(var(--v4-rotateY)) rotateZ(var(--v4-rotateZ)) scale3d(var(--v4-scale), var(--v4-scale), var(--v4-scale)) translate3d(var(--v4-x),var(--v4-y),var(--v4-z)); }
.zoom div.gamegrid.v1.hide	{ transition: transform 2s, opacity 1s; transform: rotateX(var(--v1-rotateX)) rotateY(var(--v1-rotateY)) rotateZ(var(--v1-rotateZ)) scale3d(.5,.5,.5) translate3d(var(--v1-x),var(--v1-y),-1px); opacity: .1; }

div.floor				{ display: block; width: var(--grid-width); height: var(--grid-depth); position: absolute; background-color: rgba(var(--floor-color),1); }
div.grid		 		{ display: block; width: var(--grid-width); height: var(--grid-depth); border: calc(var(--line-width) * 3) rgba(var(--floor-color)) solid; position: absolute; background-size: var(--grid-space) var(--grid-space), var(--grid-space) var(--grid-space); background-position: 0 0, 0 0; background-image: linear-gradient(rgba(var(--grid-color),.5) var(--line-width), transparent var(--line-width)), linear-gradient(90deg, rgba(var(--grid-color),.5) var(--line-width), transparent var(--line-width)); }
div.fade 				{ display: block; width: var(--grid-width); height: var(--grid-depth); position: absolute; background-image: linear-gradient(var(--default-fade-deg), rgba(var(--fade-color),1) 0, rgba(var(--fade-color),0) 50%); opacity: var(--default-fade-alpha); transition: transform 8s ease 2s, opacity 2s ease 0s; /* mix-blend-mode: overlay; */ }

.v1 div.fade 			{ background-image: linear-gradient(var(--v1-fade-deg), rgba(var(--fade-color),1) 0, rgba(var(--fade-color),0) 50%); opacity: var(--v1-fade-alpha); }
.v2 div.fade 			{ background-image: linear-gradient(var(--v2-fade-deg), rgba(var(--fade-color),1) 0, rgba(var(--fade-color),0) 50%); opacity: var(--v2-fade-alpha); }
.v3 div.fade 			{ background-image: linear-gradient(var(--v3-fade-deg), rgba(var(--fade-color),1) 0, rgba(var(--fade-color),0) 50%); opacity: var(--v3-fade-alpha); }
.v4 div.fade 			{ background-image: linear-gradient(var(--default-fade-deg), rgba(var(--fade-color),1) 0, rgba(var(--fade-color),0) 50%); opacity: var(--default-fade-alpha); }

div.wall				{ position: absolute; border-bottom: 1px rgb(var(--wall-color)) solid; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
div.wall-n				{ transform: rotateX(-90deg) translate3d(0, 0, calc(var(--wall-height) * -1)); transform-origin: bottom center 0; width: var(--grid-width); height: var(--wall-height); background: rgba(var(--wall-color), 1) url(/tron/img/wall.svg) 0 0 repeat-x; background-size: auto calc(var(--wall-height) - 1px); }
div.wall-e				{ transform: rotateZ(90deg) rotateX(-90deg) translate3d(calc(var(--wall-height) * -1), 0, calc((var(--grid-width) * -1))); transform-origin: bottom left 0; width: var(--grid-depth); height: var(--wall-height); background: rgba(var(--wall-color), 1) url(/tron/img/wall.svg) 0 0 repeat-x; background-size: auto calc(var(--wall-height) - 1px); }
div.wall-s				{ transform: rotateX(90deg) rotateZ(180deg) translate3d(1px, calc(var(--wall-height) * -1), calc(var(--grid-depth) * -1)); transform-origin: top center 0; width: var(--grid-width); height: var(--wall-height); background: rgba(var(--wall-color), 1) url(/tron/img/wall.svg) 0 0 repeat-x; background-size: auto calc(var(--wall-height) - 1px); }
div.wall-w				{ transform: rotateZ(-90deg) rotateX(-90deg) translate3d(calc((var(--grid-depth) * -.5) + var(--wall-height) + .5px), 0, calc((var(--grid-depth) * -.5) - .5px)); transform-origin: bottom center 0; width: var(--grid-depth); height: var(--wall-height); background: rgba(var(--wall-color), 1) url(/tron/img/wall.svg) 0 0 repeat-x; background-size: auto calc(var(--wall-height) - 1px); }

canvas.game 			{ image-rendering: optimizeSpeed; image-rendering: -moz-crisp-edges; image-rendering: -o-crisp-edges; image-rendering: -webkit-optimize-contrast; image-rendering: pixelated; image-rendering: optimize-contrast; -ms-interpolation-mode: nearest-neighbor; display: block; width: var(--grid-width); height: var(--grid-depth); position: absolute; top: 0; left: 0; opacity: 1; transition: opacity .25s; }
canvas.game.hidePath	{ opacity: 0; filter: brightness(2); }


figure.logo				{ position: absolute; z-index: 10; width: 780px; height: 212px; transform-style: preserve-3d; transform: translate(0, 0) scale3d(.5,.5,.5); transition: opacity 1s; opacity: 1; will-change: transform; }
.prezoom figure.logo	{ width: 3120px; height: 848px; transform: translate(0, 0) scale3d(.125,.125,.125); }
.prezoom.zoom figure.logo { transform: /* translate(-144%, -386%) */ translate(-36%, -96.5%) scale3d(3,3,3); opacity: 0; transition: transform 4s ease-in, opacity 1s ease 3s; }
.logo svg				{ image-rendering: crisp-edges; width: 100%; height: 100%; transform: rotate(0); transform-origin: 62% 50%; transition: transform 3.75s ease-in; /*will-change: transform, opacity;*/ }
.zoom .logo svg			{ transform: rotate(-90deg); }
.logo svg g.gradient, .logo svg g.highlights { opacity: 1; transition: opacity 2s ease-in;/* transition: opacity 1s ease 2s; */ }
.zoom .logo svg g.gradient, .zoom .logo svg g.highlights { opacity: 0; /* animation: flicker 3s linear .75s; animation-fill-mode: forwards; */ }

main::before, main::after { content: ''; display: block; position: absolute; z-index: 1; background-color: #82b840; transform-origin: 53.3% 50%; transition: transform .5s; opacity: .25; }
main::before			{ left: 0; top: 50%; height: 1px; width: 100vw; transform: scaleX(1); }
main::after				{ left: calc(50vw + 47px); top: 0; width: 1px; height: 100vh; transform: scaleY(1); }

div.instructions			{ transition: opacity 1s; opacity: 1; width: 100%; max-width: 38em; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transform-origin: 50% 50%; }
div.hiscores				{ transition: opacity 1s; opacity: 1; color: rgb(var(--col-blu)); width: 100%; max-width: 38em; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transform-origin: 50% 50%; }
.zoom div.instructions, .zoom div.hiscores { transform: rotate(45deg) scale3d(6,6,6); opacity: 0; transition: transform 3s ease-in, opacity 2s ease 1s; }

.instructions p 			{ color: rgb(var(--col-blu)); line-height: 2; padding: 0 2em; text-align: justify; margin-bottom: 2em; }

.hiscores div.row		{ display: flex; width: 100%; justify-content: space-between; padding: .5em 2em; }
.hiscores div.row:first-child { padding-bottom: 2em; }
.hiscores div.num		{ width: 5em; text-align: left; }
.hiscores div.name		{ flex: 1; text-align: left; }	
.hiscores div.score		{ width: 6em; text-align: left; }
.hiscores div.rnd		{ width: 3em; text-align: right; }
.hiscores div.plyr		{ width: 6em; text-align: right; }

div.keyboard				{ transition: opacity 1s; opacity: 1; color: rgb(var(--col-blu)); width: 100%; max-width: 22.5em; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transform-origin: 50% 50%; display: flex; flex-direction: column; justify-content: center; align-items: center; display: none; }

.keyboard div.newname	{ position: absolute; top: -3em; left: 50%; transform: translateX(-50%); }

.keyboard ol				{ display: flex; flex-wrap: wrap; width: 100%; }
.keyboard ol	:hover		{ cursor: url(/tron/img/cursor.svg) 4 4, auto; }
.keyboard li				{ width: 2.5em; height: 2.5em; display: flex; justify-content: center; align-items: center; position: relative; transition: color .25s; }
.keyboard li svg			{ width: 40px; height: 40px; position: absolute; left: 0; top: -2px; }
.keyboard li svg g		{ fill: rgb(var(--col-blu)); transition: fill .25s; }
.keyboard li:hover svg g, .keyboard li.on svg g { fill: rgb(255,255,255); }
.keyboard li:hover, .keyboard li.on { color: rgb(255,255,255); }
.keyboard figure.letterbox { width: 36px; height: 36px; display: block; position: absolute; top: 1px; left: 2px; opacity: 1; transition: transform .25s, opacity .5s; pointer-events: none; }
.keyboard figure.letterbox.on { opacity: 1; }
.keyboard .letterbox svg { width: 100%; height: 100%; pointer-events: none; }
.keyboard .letterbox g, .keyboard .letterbox path { pointer-events: none; }


div.message-wrap			{ position: fixed; z-index: 10; bottom: 0; left: 0; width: 100%; height: 0x; overflow: visible; }
div.message				{ position: relative; width: 100%; transform: translateY(1em); transition: transform .25s cubic-bezier(0.64, 0.57, 0.67, 1.53); color: rgb(0,136,203);/* #82b840 */; text-align: center; line-height: 1.5; font-size: 1em; text-transform: uppercase; letter-spacing: .1em; padding: .5em 0 1.5em; background: rgba(1,2,3,.5); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.message .enemy			{ color: rgb(var(--col-blu)); }
.message .player			{ color: rgb(var(--col-yel)); }
.message .ram			{ color: rgb(var(--col-org)); }
.message .tron			{ color: rgb(var(--col-red)); }
.message .flynn			{ color: rgb(var(--col-yel)); }
div.message.hide 		{ transform: translateY(3.5em); }
.message div.enemy, 	.message div.player { position: absolute; top: 0; padding: .5em 1em 1.5em; }
.message div.enemy 		{ left: 0; }
.message div.player 		{ right: 0; }

div.points-wrap			{ position: fixed; z-index: 10; top: 0; left: 0; width: 100%; height: 0x; overflow: visible; }
div.points				{ position: relative; width: 100%; transform: translateY(-1em); transition: transform .25s cubic-bezier(0.64, 0.57, 0.67, 1.53); color: rgb(240,240,240); text-align: center; line-height: 1.5; font-size: 1em; text-transform: uppercase; letter-spacing: .1em; padding: 1.5em 0 .5em; background: rgba(12,24,36,0); /* -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); */ }
div.points-wrap div.hide { transform: translateY(-3.5em); }
.points-wrap div.round, 	.points-wrap div.fps { position: absolute; top: 0; line-height: 1.5; font-size: 1em; text-transform: uppercase; letter-spacing: .1em; padding: 1.5em 1em .5em; transform: translateY(-1em); transition: transform .25s cubic-bezier(0.64, 0.57, 0.67, 1.53); }
.points-wrap div.round 	{ left: 0; color: rgb(160,160,160); text-align: left; }
.points-wrap div.fps 	{ right: 0; color: rgb(80,80,80); text-align: right; }

div.gameover				{ opacity: 1; position: absolute; bottom: 3em; left: 0; width: 100%; color: rgb(0,136,203); text-align: center; font-size: 1em; text-transform: uppercase; letter-spacing: .1em; transition: opacity .25s; }
div.gameover.hide		{ opacity: 0; }

nav						{ position: absolute; top: 0; left: 0; z-index: 100; font-family: 'Operator-Mono'; font-weight: 100; }
nav button				{ color: rgba(255,255,255,.2); padding: .5em 1em; background: rgba(255,255,255,.1); /* cursor: pointer; */ }
nav button:hover			{ color: rgba(255,255,255,.4); background: rgba(255,255,255,.2); }

/* svg.cursor02				{ position: fixed; top: 0; left: 0; z-index: 9999999; width: 36px; height: 36px; pointer-events: none; will-change: transform; } */

pre						{ display: none; position: fixed; z-index: 11; top: 0; right: 0; color: #999; line-height: 1.5; font-size: .75em; padding: 1em; background: rgba(0,0,0,.5); }
pre.debug				{ display: block; }



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

@media only screen and (min-width: 48em) /* 768px */
{
	
}