/* ==========================================================================
   custom properties
   ========================================================================== */

:root
{	
	--col-blu: 0,153,255;
	--col-org: 255,120,0;
	--col-red: 255,44,0;
	--col-yel: 255,243,0;
	--col-grn: 104,174,23;
	--col-wht: 255,255,255;
	
	--cell-x: 20px;               /* horizontal cell size */
	--cell-y: var(--cell-x);      /* vertical cell size */
	--line-width: 1px;            /* grid line thickness */
	--pad-x: 10px;                 /* optional horizontal padding around board */
	--pad-y: 10px;                 /* optional vertical padding around board */
	--grid-rgb: 226,217,236;      /* grid color (R,G,B) */

	--floor-color: 28,48,74; //31,71,94; 
	--fade-color: 0,0,0;
	
	--wall-color: 8,12,28; //16,25,56;
	--wall-height: 50px;
	
	--grid-width: calc(100vw - (2 * var(--cell-x)));
	--grid-height: calc(100dvh - (2 * var(--cell-y)));
	
	--grid-w: calc( round(down, var(--grid-width) - 2 * var(--pad-x), var(--cell-x)) + var(--line-width) );
	--grid-h: calc( round(down, var(--grid-height) - 2 * var(--pad-y), var(--cell-y)) + var(--line-width) );
	
	--scanline-size: 12px;
}


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

@font-face 										{ font-family: 'Russell-Square'; src: local('RussellSquare'), url('fnt/russel_square-webfont.woff2') format('woff2'); font-weight: normal; font-style: normal; }
@font-face 										{ font-family: 'Terminal'; src: url('fnt/ehs.woff2') format('woff2'); font-weight: 500; font-style: normal; }


/* ==========================================================================
   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; }
table											{ border-collapse: collapse; border-spacing: 0; }
*												{ margin: 0; padding: 0; -webkit-user-select: none; user-select: none; }
*, *:before, *:after 							{ -moz-box-sizing: border-box; box-sizing: border-box; }

html 											{ font-size: 1em; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

canvas, img, svg, video 						{ vertical-align: middle; }

canvas 											{ position: absolute; inset: 0; }


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

@keyframes spawn-fade
{
	0% 			{ filter: brightness(10); }
	20% 		{ filter: brightness(10); }
	100% 		{ filter: brightness(1); }
}

@keyframes crash-flash 
{
   0% 			{ filter: brightness(10); opacity: 1; }
   25% 			{ filter: brightness(10); opacity: 1; }
   100% 		{ filter: brightness(1); opacity: 0; }
}

@keyframes laser
{
	0% 			{ background: rgba(225,255,255,0); opacity: 1; }
	10% 		{ background: rgba(255,255,255,1); }
	20% 		{ background: #98d2ff }
	100% 		{ background: #000; }
}

@keyframes blink
{
	0% 			{ opacity: 1; }
	50% 		{ opacity: 1; }
	51% 		{ opacity: 0; }
	100% 		{ opacity: 0; }
}

@keyframes bit-float
{
	0%, 100%	{ transform: translateY(0%) }
	50% 		{ transform: translateY(-15%) }
}

@keyframes bit-pulse
{
	0%, 100% 	{ transform: scale(1) }
	50% 		{ transform: scale(1.2) }
}

@keyframes bit-morph-in
{
	0% 			{ opacity: 0; transform: scale(0.5); }
	33% 		{ opacity: 1; transform: scale(1.3); }
	40% 		{ opacity: 1; transform: scale(1.3); }
	100% 		{ opacity: 0; transform: scale(0.7); }
}

@keyframes bit-morph-out
{
	0% 			{ opacity: 1; transform: scale(1.0); }
	39% 		{ opacity: 1; transform: scale(1.0); }
	40% 		{ opacity: 0; transform: scale(0.5); }
	41% 		{ opacity: 1; transform: scale(0.5); }
	100% 		{ opacity: 1; transform: scale(1.0); }
}

@keyframes marquee-glow 
{
   0% 			{ opacity: .75; filter: brightness(1) drop-shadow(0 0 0 rgba(110,190,69,0)); }
   20% 			{ opacity: 1; filter: brightness(1.25) drop-shadow(0 0 16px rgba(110,190,69,1)); }
   100% 		{ opacity: .75; filter: brightness(1) drop-shadow(0 0 0 rgba(110,190,69,0)); }
}


/* ==========================================================================
   universal styles
   ========================================================================== */

html, body 										{ overscroll-behavior: none; }
body											{ background: linear-gradient(rgba(12,24,36,1) 0, rgba(1,2,3,.5) 100%); transition: background 10s; color: rgb(var(--col-grn)); text-transform: uppercase; cursor: url(/tron/img/cursor2.svg) 18 18, auto; }
body *:not(.logo-container).show				{ opacity: 1; }

main 											{ perspective: max(100vw,100dvh); /*background-color: #000; background-image: linear-gradient(rgba(12,24,36,.75) 0, rgba(1,2,3,.5) 100%); perspective: 100vw; */ width: 100%; height: 100%; overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; }

p.game-over, p.you-win, div.message, .the_grid div.score { text-shadow: 1px 1px 1px rgb(var(--floor-color)), -1px 1px 1px rgb(var(--floor-color)), -1px -1px 1px rgb(var(--floor-color)), 1px -1px 1px rgb(var(--floor-color)); }

/* ==========================================================================
   arcade
   ========================================================================== */

div.arcade 										{ position: absolute; z-index: 1; inset: 0; display: grid; place-items: center; background: #000 url(/tron/img/tron-arcade-bg.svg) no-repeat 50% 50%; background-size: 120em 80em; box-shadow: inset 0 0 max(20dvh,20vw) rgba(0,0,0,1), inset 0 0 max(10dvh,10vw) rgba(0,0,0,1), inset 0 0 max(5vh,5vw) rgba(0,0,0,1); }
div.arcade::before 								{ content: ''; position: absolute; z-index: 200; inset: 0; background: #000; opacity: .8; }
div.arcade::after 								{ content: ''; position: absolute; z-index: 100; inset: 50% 0 0; background: linear-gradient(to top, rgba(0,0,0,.75), rgba(0,0,0,0)); }

div.game 										{ width: 50em; height: 37.5em; position: relative; z-index: 100; mask-image: url(/tron/img/arcade-screen-mask.svg); mask-repeat: no-repeat; mask-size: contain; mask-position: center; }
figure.marquee 									{ display: block; width: 40.625em; height: 8.75em; position: absolute; top: calc(50% - 460px); left: 50%; transform: translateX(-50%); opacity: .75; }
.marquee.flash 									{ animation: marquee-glow 1s ease forwards; }
div.game::after 								{ content: ''; display: block; position: absolute; inset: 0; background: url(/tron/img/arcade-screen-border.svg) no-repeat 50% 50%; background-size: contain; }
div.screen 										{ position: absolute; inset: 0; background: #222; box-shadow: inset 0 0 .5em rgba(9,0,0,.75), inset 0 0 4em rgba(9,0,0,.5); border-radius: 1em; overflow: hidden; }
div.screen::after 								{ content: ''; display: block; position: absolute; inset: 0; background: url(../img/arcade-scanlines.svg) repeat 0 2px; background-size: var(--scanline-size, 12px) var(--scanline-size, 12px); }
div.glow 										{ position: absolute; inset: 0; background: radial-gradient(at 33% 70%, rgba(0, 153, 255, 1) 0%, rgba(0, 153, 255, 1) 20%, rgba(0, 153, 255, 0) 60%); opacity: .1; mix-blend-mode: screen; }

canvas.spawning 								{ animation: spawn-fade .5s ease-out forwards; }
canvas.crashed									{ animation: crash-flash .5s ease-out forwards; }

div.arcade.on::before							{ opacity: 0; transition: opacity 2s; }
.on div.game::before 							{ opacity: 1; transition: opacity 1s; }
.on div.screen 									{ background: #0f0f0f; transition: background 2s; }

p.click-to-start 								{ position: absolute; z-index: 300; display: flex; top: calc(50% - .5em); left: 50%; width: fit-content; font-family: 'Terminal'; color: rgba(255,255,255,.5); transform: translate(-50%, 0); text-align: left; font-variant-numeric: tabular-nums lining-nums; letter-spacing: .05em; font-size: 1.25em; pointer-events: none; white-space: nowrap; }
.click-to-start em 								{ font-style: normal; animation: blink 1s linear infinite; }
.loaded p.click-to-start.hide 					{ opacity: 0; }
.loaded p.click-to-start 						{ opacity: 1; }

p.game-over 									{ display: none; position: absolute; z-index: 3; inset: 0; place-items: center; text-align: center; font-family: 'Terminal'; color: rgb(255,255,255); font-size: 1.5em; letter-spacing: .1em; }
p.game-over.show 								{ display: grid; }
p.you-win 										{ display: none; position: absolute; z-index: 3; inset: 0; place-items: center; text-align: center; font-family: 'Terminal'; color: rgb(255,255,255); font-size: 1.5em; letter-spacing: .1em; }
p.you-win.show 									{ display: grid; }

@media only screen and (max-width: 50em) /* 800*/
{
	div.arcade 									{ font-size: 1.6875vw; background-position: 50% 0; }
	div.game 									{ position: absolute; top: 21.5em; left: 50%; transform: translateX(-50%); }
	figure.marquee 								{ top: 11em; }

}


/* ==========================================================================
   intro + attract mode
   ========================================================================== */

div.intro-attract 								{ font-family: 'Russell-Square'; position: absolute; z-index: 2; inset: 0; background: rgba(0,0,0,1); display: grid; place-items: center; opacity: 0; }
div.intro-attract.laser 						{ animation: laser .5s ease-out forwards; }
div.intro-attract.show 							{ display: grid; }

div.intro 										{ position: absolute; z-index: 100; inset: 0; text-align: center; padding-inline: 4vw; pointer-events: none; font-size: clamp(.6875em, 2vw, 1em); }
.intro h1, .intro h2 							{ position: absolute; opacity: 0; display: block; width: calc(100% - 8vw); top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; transition: opacity 1s; font-size: 1.25em; line-height: 1.2; pointer-events: none; }
.intro em 										{ display: block; width: 100%; font-size: 3em; line-height: 1; }
   
div.video-bg									{ position: absolute; z-index: 0; inset: 0; display: grid; place-items: center; opacity: 0; transition: opacity 2s; pointer-events: none; }
div.video-bg::after								{ content: ''; display: block; position: absolute; z-index: 1000; inset: 0; mix-blend-mode: multiply; opacity: 1; background: rgba(0,0,0,.5) url(../img/aperture.svg); background-size: 60px 60px; pointer-events: none; }
div.video-bg.show 								{ opacity: 1; }
.video-bg video									{ width: 101%; height: 101%; object-fit: cover; object-position: 50% 50%; opacity: 1; }

div.video-transition							{ position: absolute; z-index: 0; inset: 0; display: grid; place-items: center; opacity: 0; pointer-events: none; }
div.video-transition.show 						{ opacity: 1; transition: opacity 0s; }
.video-transition div							{ position: relative; z-index: 1; width: 780px; height: 212px; opacity: 0; transform: scale3d(.75,.75,.75); transition: opacity .5s; will-change: transform; flex: 0 0 auto; }
.video-transition.show div 						{ opacity: 1; }
div.logo-container								{ position: absolute; z-index: 1; inset: 0; display: grid; place-items: center; pointer-events: none; }
figure.logo										{ position: relative; z-index: 2; width: 780px; height: 212px; opacity: 0; transform: scale3d(.75,.75,.75); transition: opacity .5s; will-change: transform; flex: 0 0 auto; }
.logo-container.show figure.logo 				{ opacity: 1; }

div.logo-container::before, div.logo-container::after { content: ''; display: block; position: absolute; z-index: 1; background-color: rgb(var(--col-grn)); transform-origin: 53.3% 50%; transition: transform .5s ease .5s; opacity: .333; }
div.logo-container::before, .zoom div.logo-container.show::before { left: 0; top: 50%; height: 1px; width: 100vw; transform: scaleX(0); }
div.logo-container::after, .zoom div.logo-container.show::after { left: calc(50vw + (0.1205128205 * 780px * .75)); top: 0; width: 1px; height: 100dvh; transform: scaleY(0); }
div.logo-container.show::before 				{ transform: scaleX(1); transition: transform .5s; }
div.logo-container.show::after 					{ transform: scaleY(1); transition: transform .5s; }

.logo svg										{ image-rendering: crisp-edges; width: 100%; height: 100%; transform: rotate(0); transform-origin: 50% 50%; transition: transform 5s; }
.video-transition video							{ 								width: 100%; height: 100%; transform: rotate(0); transform-origin: 50% 50%; transition: transform 5s, mask-size 6.25s; object-fit: cover; object-position: 50% 50%; mix-blend-mode: lighten; mask-image: url(/tron/img/mask-video-intro.svg); mask-repeat: no-repeat; mask-size: 100% 100%; mask-position: center;  }
.logo svg g.gradient, .logo svg g.highlights 	{ opacity: 1; transition: opacity 2s ease-in; }

.prezoom .logo-container, .zoom .logo-container { opacity: 0; }
.prezoom .logo-container.show, .zoom .logo-container.show { opacity: 1; }
.prezoom figure.logo							{ position: absolute; width: 3120px; height: auto; transform: translate(0, 0) scale3d(.1875,.1875,.1875); }
.prezoom .video-transition div					{ position: absolute; width: 3120px; height: 848px; transform: translate(0, 0) scale3d(.1875,.1875,.1875); }
.prezoom.zoom figure.logo 						{ transform: translate(0, 120%) scale3d(10,10,10); opacity: 0; transition: transform 6.25s ease-in, opacity 2s ease 4.25s; }
.prezoom.zoom .video-transition div 			{ transform: translate(0, 120%) scale3d(10,10,10); opacity: 0; transition: transform 6.25s ease-in, opacity 2s ease 6.5s; }

.zoom .video-transition video 					{ transform: scale(.5) rotate(-90deg); mask-size: 200% 200%; }

.zoom .logo svg									{ transform: rotate(-90deg); }						
.zoom .logo svg g.gradient, .zoom .logo svg g.highlights { opacity: 0; }

.zoom div.instructions, .zoom div.highscores 	{ transform: rotate(-45deg) scale3d(6,6,6); opacity: 0; transition: transform 3s ease-in, opacity 2s ease 1s; }



div.instructions								{ position: absolute; top: 50%; left: 50%; opacity: 0; font-size: 1.25em; transition: opacity 1s; width: 100%; max-width: 34em; transform: translate(-50%, -50%); pointer-events: none; }
.instructions p 								{ line-height: 2; padding: 0 2em; text-align: justify; margin-bottom: 2em; }

div.highscores									{ position: absolute; top: 50%; left: 50%; opacity: 0; font-size: 1.25em; transition: opacity 0s ease 1.5s; width: 100%; max-width: 38em; transform: translate(-50%, -50%); pointer-events: none; }
div.highscores.show 							{ transition: opacity 1s; }
.highscores div.row								{ display: flex; width: 100%; justify-content: space-between; padding: .5em 2em; transform: translateY(1em); opacity: 0; }
.highscores.show div.row 						{ transform: translateY(0); opacity: 1; }
.highscores div.row:nth-child(1) 				{ transition: all .375s ease 0s; padding-bottom: 2em; }
.highscores div.row:nth-child(2) 				{ transition: all .375s ease 0.1s; }
.highscores div.row:nth-child(3) 				{ transition: all .375s ease 0.2s; }
.highscores div.row:nth-child(4) 				{ transition: all .375s ease 0.3s; }
.highscores div.row:nth-child(5) 				{ transition: all .375s ease 0.4s; }
.highscores div.row:nth-child(6) 				{ transition: all .375s ease 0.5s; }
.highscores div.row:nth-child(7) 				{ transition: all .375s ease 0.6s; }
.highscores div.row:nth-child(8) 				{ transition: all .375s ease 0.7s; }
.highscores div.row:nth-child(9) 				{ transition: all .375s ease 0.8s; }
.highscores div.row:nth-child(10) 				{ transition: all .375s ease 0.9s; }
.highscores div.row:nth-child(11) 				{ transition: all .375s ease 1.0s; }
.highscores div.num								{ width: 5em; text-align: left; }
.highscores div.name							{ flex: 1; text-align: left; }	
.highscores div.score							{ width: 6em; text-align: left; }
.highscores div.lvl								{ width: 3em; text-align: right; }
.highscores div.plyr							{ width: 6em; text-align: right; }

.zoom div.instructions, .zoom div.highscores 	{ transform: rotate(-45deg) scale3d(6,6,6); opacity: 0; transition: transform 3s ease-in, opacity 2s ease 1s; }

div.name-entry									{ font-size: 2em; opacity: 0; pointer-events: none; transition: opacity 1s; color: rgb(var(--col-grn)); width: 100%; max-width: 22.5em; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transform-origin: 50% 50%; flex-direction: column; justify-content: center; align-items: center; }
div.name-entry.show 							{ display: flex; opacity: 1; pointer-events: all; }
.name-entry div.name							{ position: absolute; top: -3em; left: 50%; transform: translateX(-50%); white-space: nowrap; }
.name-entry ol									{ display: flex; justify-content: center; flex-wrap: wrap; width: 100%; }
.name-entry ol:hover							{ /*cursor: url(/tron/img/cursor.svg) 4 4, auto;*/ }
.name-entry li									{ width: 2.5em; height: 2.5em; display: flex; justify-content: center; align-items: center; position: relative; transition: color .25s; }
.name-entry li span 							{ font-size: .75em; pointer-events: none; }
.name-entry li svg								{ width: 100%; height: 100%; position: absolute; left: 0; top: -.125em; pointer-events: none; }
.name-entry li svg g							{ fill: rgb(var(--col-grn)); transition: fill .25s; }
.name-entry li:hover svg g, .name-entry li.on svg g { fill: rgb(255,255,255); }
.name-entry li:hover, .name-entry li.on 		{ color: rgb(255,255,255); }
.name-entry figure.highlight 					{ width: 2.25em; height: 2.25em; display: none; position: absolute; top: .0625em; left: .125em; opacity: 0; transition: transform .25s, opacity .5s; pointer-events: none; }
.name-entry figure.highlight.on 				{ opacity: 1; }
.name-entry .highlight svg 						{ width: 100%; height: 100%; pointer-events: none; }
.name-entry .highlight g, .name-entry .highlight path { pointer-events: none; }


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

div.the-grid  									{ position: absolute; z-index: 3; opacity: 0; box-sizing: content-box; inline-size: var(--grid-w); block-size: var(--grid-h); overflow: visible; transform: rotateZ(30deg) scale3d(.25, .25, .25); will-change: transform; transform-origin: 50% 50% 0px; pointer-events: none; transition: all 0s; }
div.the-grid.show								{ display: grid; transition: opacity 4s, transform 6s; transform: rotateZ(0) scale3d(1, 1, 1); }
div.the-grid.show.hide 							{ opacity: 0; transition: opacity 1s; }

div.floor										{ position: absolute; z-index: 1; inset: 0; background-color: rgba(var(--floor-color),1); pointer-events: none; }
div.grid		 								{ position: absolute; z-index: 2; inset: 0; perspective: max(200vw,200dvh); border-inline: var(--pad-x) rgb(var(--floor-color)) solid; border-block: var(--pad-y) rgb(var(--floor-color)) solid; background-image: linear-gradient(to right, rgba(var(--grid-rgb),.5) var(--line-width), transparent 0), linear-gradient(to bottom, rgba(var(--grid-rgb),.5) var(--line-width), transparent 0); background-size: var(--cell-x) 100%, 100% var(--cell-y); background-position: 0 0; background-repeat: repeat; opacity: 1; pointer-events: none; }
div.shading 									{ position: absolute; z-index: 10; inset: 0; box-shadow: inset 0 0 max(10vw,10dvh) rgba(0,0,0,1); background-image: linear-gradient(200deg, rgba(0,0,0,1) 0, rgba(0,0,0,0) 50%); opacity: .75; pointer-events: none; }

div.wall										{ position: absolute; border-top: 1px rgba(var(--grid-rgb),1) solid; border-bottom: 1px rgba(var(--grid-rgb),.5) solid; transform-style: preserve-3d; backface-visibility: hidden; background: rgba(var(--wall-color), 1) url(../img/wall.svg) 50% 50% repeat-x; background-size: auto calc(var(--wall-height) - 1px); /*filter: brightness(2);*/ }
div.wall-n										{ transform-origin: 50% 100%; transform: rotateX(-90deg) scaleY(1) translate3d(0, 0, 0); width: var(--grid-w); height: var(--wall-height); left: calc(var(--pad-x) * -1); top: calc(var(--pad-y) * -1 - var(--wall-height)); }
div.wall-s										{ transform-origin: 50% 0; transform: rotateX(90deg) scaleY(-1) translate3d(0, calc(var(--wall-height) * -1), 0); width: var(--grid-w); height: var(--wall-height); left: calc(var(--pad-x) * -1); bottom: calc(var(--pad-y) * -1 - var(--wall-height)); }
div.wall-e										{ transform-origin: 0 100%; transform: translateX(var(--grid-w)) rotate(90deg) rotateX(-90deg); width: var(--grid-h); height: var(--wall-height); left: calc(var(--pad-x) * -1); top: calc((var(--wall-height) + var(--pad-y)) * -1); }
div.wall-w										{ transform-origin: 0 100%; transform: rotate(-90deg) translateX(-100%) rotateX(-90deg); width: var(--grid-h); height: var(--wall-height); left: calc(var(--pad-x) * -1); top: calc((var(--wall-height) + var(--pad-y)) * -1); }

canvas.rez 										{ z-index: 3; }
canvas.derez 									{ z-index: 4; }
canvas.user-trail 								{ z-index: 5; }
canvas.program-trail 							{ z-index: 6; }
canvas.user-cycle 								{ z-index: 7; }
canvas.program-cycle 							{ z-index: 8; }
canvas.spawning 								{ animation: spawn-fade .5s ease-out forwards; }
canvas.crashed									{ animation: crash-flash .5s ease-out forwards; }

.the-grid div.score 							{ position: absolute; z-index: 20; inset: 0; display: flex; align-items: flex-start; justify-content: center; opacity: .667; padding-top: .825em; font-family: 'Terminal'; color: rgba(255,255,255,.25); letter-spacing: .1em; font-size: 1.5em; pointer-events: none; white-space: nowrap; }
.the-grid.flynn div.score 						{ color: rgba(var(--col-yel),1); }
.the-grid.tron div.score 						{ color: rgba(var(--col-org),1); }
.the-grid.ram div.score 						{ color: rgba(var(--col-red),1); }
.the-grid div.score.hide 						{ opacity: 0; transition: opacity 2s; }

div.message 									{ position: absolute; z-index: 500; display: none; inset: 0; align-items: center; justify-content: center; font-family: 'Terminal'; color: rgba(255,255,255,1); letter-spacing: .05em; font-size: 1.25em; pointer-events: none; white-space: nowrap; }
.message.show 									{ display: flex; opacity: 1; }
.message.show.hide 								{ opacity: 0; transform: translate(-50%, 1em); transition: opacity 1s, transform 1s; }
.message em 									{ font-style: normal; animation: blink 1s linear infinite; }


/* ==========================================================================
   bit cursor
   ========================================================================== */

figure.bit										{ display: none; width: 4em; height: auto; aspect-ratio: 1; position: absolute; z-index: 1000; left: -2em; top: -4em; pointer-events: none; cursor: none; }
figure.bit div 									{ position: absolute; inset: 0; }
figure.bit img									{ position: absolute; inset: 0; opacity: 0; transition: opacity 0.25s ease-out; }

figure.bit:not(.yes):not(.no) img.bit-default 	{ opacity: 1; }		
figure.bit.yes img.bit-yes						{ opacity: 1; }
figure.bit.no img.bit-no						{ opacity: 1; }

/* at-rest float and pulse animations */
figure.bit div.float 							{ animation: bit-float 2s ease-in-out infinite; }
figure.bit div.pulse 							{ animation: bit-pulse 1.5s ease-in-out infinite; }

/* state morph animations */
figure.bit.yes img.bit-yes, figure.bit.no img.bit-no { animation: bit-morph-in 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards; }
figure.bit.yes img.bit-default, figure.bit.no img.bit-default { animation: bit-morph-out 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards; }


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

@media (any-hover: none) or (any-pointer: coarse)
{	

}

@media only screen and (max-width: 40em) /* 640 */
{
	:root
	{
		--cell-x: 16px;
		--pad-x: 8px;
		--pad-y: 8px;

		--wall-height: 40px;
		
		--grid-width: calc(100vw - var(--cell-x));
		--grid-height: calc(95dvh - var(--cell-y));
	}
	
	html, body									{ overscroll-behavior: none; }
	body, main 									{ position: fixed; }
	
	div.logo-container::after, .zoom div.logo-container.show::after { left: calc(50vw + (0.1205128205 * 390px * .75)); top: 0;}
	figure.logo									{ width: 390px; height: 106px; transform: translate(0, 0) scale3d(.75,.75,.75); }
	.prezoom figure.logo						{ width: 1560px; transform: translate(0, 0) scale3d(.1875,.1875,.1875); }
	
	div.instructions							{ font-size: 1em; }

	div.highscores								{ font-size: 1em; }
	.highscores div.score						{ width: 5em; text-align: right; }
	.highscores div.lvl							{ display: none; }
	.highscores div.plyr						{ display: none; }
	
	div.name-entry 								{ font-size: 1.125em; }
}