/* use for best-score-banner */
/* @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@900&display=swap"); */

.flash-red {
	/* note: can't use background-color because it won't override
			background (even if !important)
	*/
	background:red!important;
}
.flash-green {
	background:green!important;
}
.flash-warning {
	background:#FF6700!important;
}

body::after {
	/* cause images to load first 
	   Note: can have multiple url
	   content:url('path') url('path') url('path')
	   see also <link rel="preload"
	*/
   position:absolute; width:0; height:0; overflow:hidden; z-index:-1;
   content:url(../images/splash-fast-load.jpg);
}

:root {

	--Z_BODY:0;
	--Z_WRAPPER:2;
	--Z_BOARD:100;
	--Z_CUBE:125;
	--Z_MAIN_AD:150;

	--Z_SHOE:200;
	--Z_FLING:300;	/* needs 2 for every card in play */
	--Z_CLICKED:600;
	/* reserved to 10000 */
	--Z_CLICKED_MAX:10000;
	--Z_BULLET:10002;
	--Z_CARD_DISSOLVE:10650;
	--Z_JOKER_DISSOLVE:10655;
	--Z_DRAG:10670;
	--Z_BLAST_EFFECT:10675;
	--Z_MAIN_MENU_BACKGROUND:10700;
	--Z_SCOPE:10800;
 	--Z_COLORDROP:10900;
 	--Z_COPYRIGHT:101000;
  	--Z_SCORES:104000;
	--Z_SNIPER:104500;
	--Z_BIG_TIME:105000;
	--Z_CONTROLS:106500;
  	--Z-BEST_SCORE_BANNER:107000;
	--Z_MAIN_MENU:108000;
	--Z_LOADING:109000;
  	--Z_MODAL:16777271;
  	--Z_MAX:16777271;
	
	--MAGNIFY:1.5;
	
	
	--SHOE-COL:2%;
	--SHOE-ROW:2%;
	
	--fling-speed:200;
	--joker-speed:200;

}

* {
 	/* disable highlighting text/areas. */
	-webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -o-user-select: none;
    user-select: none;
	
	/* disable long-touch popup context menu in iOS */
	-webkit-touch-callout: none;
}

p, input {
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -o-user-select: text;
    user-select: text;
}

:root {

	--card-margin:4px;
	--card-width:35px;

	--left-pane-width:160px;
	--bottom-pane-height:200px;
	--playing-field-max-width:800px;
	--playing-field-max-height:500px;
	
	--playing-field-width:800px;
	--playing-field-height:500px;

	--playing-field-margin:8px;

	--test-color:transparent;
}



/*@media only screen and (max-width:920px){
	
	:root {
		--playing-field-width:calc(100vw - var(--left-pane-width) - 8px);
		--test-color:transparent;
	}
}
*/

:root {
	
	--card-margin:calc(var(--playing-field-width) * 0.005);
	--card-width:calc((var(--playing-field-width) - (var(--card-margin) * 16) ) / 9);
	--card-width:80px;
	--card-height:120px;

	--card-border-radius:calc(var(--card-width) * 0.15);
}


html, body {

  /*	overflow:hidden; */

}


body {
	/* 
		allow user to scroll on mobile devices
		this will cause the address bar to disappear.
		Note: this app uses #wrapper which is set to screen 
		innerHeight for the playing area
	*/
	
 	height: calc(100vh);
 	
 	padding-bottom: 0px; /* push your whole site same height upwards. */
 	
 	background-color:green;
 	background-color:var(--background-color);
    
    z-index: var(--Z_BODY);
    
    margin:0;
    -webkit-user-select: none;
    user-select: none;

}

#loading {
  	display:flex;
	background-color:darkgray;
    background-size:cover;
	background-image:url('../images/splash-fast-load.jpg');
}

#loading::before {
	
	content:'Loading...';
	box-sizing: border-box;

	--width:max(25vw, 200px);
	--fontpx:calc(var(--width) * 0.12);
	--padding:calc(var(--width) / 2 - var(--fontpx));
	--border:calc(var(--width) * 0.05);

	text-align:center;
	color:red;
	font-family: Arial, Helvetica, sans-serif;
  	font-weight: 900;
  	
  	line-height: 28px;
	font-size: 28px;
  	
  	line-height:var(--fontpx);
	font-size: var(--fontpx);


	
 	width:200px;
	height:200px;
	padding-top:84px;
	width:var(--width);
   	height:var(--width);
	padding-top:var(--padding);

	border: 10px  solid #f3f3f3;
  	border-top: 10px solid #3498db;
  	border: var(--border) solid #f3f3f3;
  	border-top: var(--border) solid #3498db;
  	border-radius: 50%;
  	animation: maf_spin-frames 2.5s ease 500; 
}

@keyframes maf_spin-frames {
  	0% { transform: rotate(0deg); }
  	100% { transform: rotate(360deg); }
}

/*	must have an overall wrapper with these properties
	to prevent mobile devices from showing overflow
	This is evident when cards are dragged off screen
	note: note overflow is ignored in the body and html on mobile devices
		if <meta name="viewport"> is used 
	https://stackoverflow.com/questions/14270084/overflow-xhidden-doesnt-prevent-content-from-overflowing-in-mobile-browsers
	
	Must also separate wrapper from body to prevent reload on screen drag in opera, etc.
	Can disable Chrome with overscroll-behavior: none;
*/




#wrapper {
	overscroll-behavior-y: none;
	position: absolute;
	z-index: var(--Z_WRAPPER);
	
	margin:0;
	border:0;
	width:100vw;
	height: 100vh; /* Fallback for browsers that do not support Custom Properties */
	/* set height = innerHeight */
  	height: calc(var(--vh, 1vh) * 100);
  	overflow:hidden;
}


#main {
	display:flex;
	flex-direction: row;
	flex-wrap: nowrap;
	background-color:green;
	background-color:var(--background-color);
	width:100%;
	height:100%;
}

#pre-ad-left {
	
	position:absolute;
	width:var(--left-pane-width);
 	height:100vh;
	background-color:darkgray;
	background-color:yellow;

	
}

#left-pane {

	display:block;
	width:var(--left-pane-width);
 	height:100vh;
	background-color:darkgray;
	background-color:red;
	background-image: url("../images/ad-default-left.png");
	background-size: contain;
	background-repeat: no-repeat;
    background-position: center;
	z-index:var(--Z_MAIN_AD);
}
#bottom-pane {

	display:none;
    position: fixed;
    bottom: 0;
	height:var(--bottom-pane-height);
	width:100%;
/*	background-color:darkgray;
	background-color:blue; */
	z-index:var(--Z_MAIN_AD);
	background-image: url("../images/ad-default-bottom.png");
	background-size: contain;
	background-repeat: no-repeat;
    background-position: center;
}

#poker-table {
	box-sizing: border-box;
	position:relative;

	width: calc(100% - var(--left-pane-width));
	height:100%;
	/* fill in background with something similar until
		background image can be loaded */
	-webkit-box-shadow: inset 0px 0px 40vw rgba(0,0,0,0.8);
	-moz-box-shadow: inset 0px 0px 40vw rgba(0,0,0,0.8);
	box-shadow: inset 0px 0px 40vw rgba(0,0,0,0.8);
	background-color:#0D3632;
	padding:0px;
	background-image: url("/backgrounds/board-green-2.jpg");
	background-size: cover;
}

@media only screen and (max-width:600px){
	
	#left-pane {
		
		display:none;
	}
	#bottom-pane {
		display:block;

	}
	
	#poker-table { 
		width: 100%;
		height:calc(100% - var(--bottom-pane-height));

	}
}
#playing-field {

	position: relative;
	box-sizing: border-box;
	width: var(--playing-field-width);
	height: var(--playing-field-height);
	padding: calc(0.02 * var(--playing-field-width));
	margin: auto;
	background-color: darkgreen;
	background-image: url("/backgrounds/board-green-2.jpg");
	background-size: cover;
	border-radius: calc(0.04 * var(--playing-field-width));
	box-shadow: inset 0px 0px 0vw 4px rgba(0,0,0,0.2), 0px 0px 3vw 19px rgba(0,0,0,0.8);
/*
	used https://convertio.co/ to convert png to icon.
	magenta background will automatically convert to transparent
*/


}



.cascades {

	display:flex;
	flex-direction: row;
	justify-content: space-between;
	
	width:100%;	
}

.cascade-cell {

	opacity:0;
}

p.close-button::before {
	position:absolute;
	
	right:0;
	top:0;
	content:"X";
	font: 2.5em Arial;
	font-weight: 900;
/*	color:#394f5c; */
	color: orange;
	text-shadow: 0 0 11px black, 0 0 11px black;
	transition-duration: 0.5s; 
	cursor:pointer;
	padding:2vw;
	margin:0;
	line-height:0.5

}

p.close-button:hover::before {
	transition-duration: 1.5s; 
	color: yellow;
	transform:scale(1.5);
}

#menu-container {
	perspective: calc(3 * 100vw);

    position: absolute;
	left: 0;
    top: 0;
	z-index: var(--Z_MAIN_MENU);
	box-sizing:content-box;
	width:100%;
	height:100%;
	
	display:none;
	
}

#menu {

    position: relative;
	box-sizing:content-box;
	width:100%;
	height:100%;
    left: 0;
    top: 0;

/*	Note: Can't use background, because backgrounds don't preload
	therefore will not show on the first transition
	background:url('../images/menu-background.jpg');
	background-size:cover;
*/	
}
#menu-background {
	opacity:0.7;
    position: fixed;
	box-sizing:content-box;


	width:100%;
	height:100%;

}
.menu-selections {
	position: relative;
	box-sizing: border-box;
	left:10%;
	top:50%;
	transform:translateY(-50%);
    width: 80%;
	max-height:95%;
	
	overflow-y: auto;
    overflow-x: hidden;

    background-color: rgba(0, 0, 0, 0.6);

    padding: 1em;
    border-radius: calc(0.03 * var(--playing-field-width));
	box-shadow: 14px 14px 8px 0px rgba(0, 0, 0, 0.2);
}


.menu-selections div {
	position: relative;
	box-sizing: border-box;
	text-indent: -2em;
	padding-left: 2.5em;
	margin-bottom:1.5vw;
	
	font: small-caps calc(var(--playing-field-width) * 0.045) Arial;
	line-height: 1.5;
	font-weight: 900;
	color: #5C7F93;
    text-shadow: 0 0 11px black, 0 0 11px black;
	
	transition-duration: 0.5s; 
	cursor:pointer;
	clear: both;

	border: 2px solid transparent;
    border-radius: 1em;
/*    text-align: center; */
	vertical-align: middle;
	border-radius: 1em;
}
.menu-selections div:first-of-type {
	/* make room for the close button */
	/* width:70%; */
}

.menu-selections div input {
	width:calc(var(--playing-field-width) * 0.03);
	height:calc(var(--playing-field-width) * 0.03);
}

@media screen and (max-width: 800px) {
	.menu-selections div {
		font-size: 22px;
	}
	p.close-button::before {
		font: 2.0em Arial;
		font-weight: 900;
	}
  
	.menu-selections div input {
		width:auto;
		height:auto;
	}
}
@media screen and (max-width: 450px) {
	.menu-selections div {
		font-size: 18px;
	}

	p.close-button::before {
		font: 1.5em Arial;
		font-weight: 900;
	}
	
	.menu-selections div input {
		width:auto;
		height:auto;
	}
}
.menu-selections div p:first-of-type {
	opacity:0.8;
	margin: 0;
    display: inline;
}
.menu-selections div:hover p:first-of-type {
	opacity:1;
}

.menu-selections div:not(#assist-container):hover {
	border: 2px solid #759ff3;
	box-shadow: -1px 0px 20px 19px #2a5ab9, -1px 0px 0px 2px white;

	background-color:black;
	color:yellow;
	transition-duration: 1.0s; 
}

.menu-selections div img {

	height:auto;
	width:3em;
	float:left;
	padding-right:0.25em;
	display:none;
}

#toggle-menu {

}
.menu-btn {
	text-align:center;
	vertical-align: middle;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.5em;
	padding: 0 1em 0 1em;
/*	overflow: hidden; */
	transition: 0.5s;
	transition-delay: 0.2s;
	background-color:#0d2f2e;
	color: white;
		
}

.menu-btn-gold {
	background-color: gold;
    color: black;
}
/*
@media (any-hover: hover) {
.menu-btn:hover {
	background-color:red;
	box-shadow: 0px 0px 5px 6px #e93304, 0 0 15px #0d2f2e;
}
}
@media (any-hover: none) {
.menu-btn:hover {
	animation:3s linear 1 menu-btn-hover;
}

}

@keyframes menu-btn-hover {

	0% { background-color:red; box-shadow: 0px 0px 5px 6px #e93304, 0 0 15px #0d2f2e;  }
  	100% { background-color:red; box-shadow: 0px 0px 5px 6px #e93304, 0 0 15px #0d2f2e; }
}

*/
p.close-button {
	
	margin: 0;
	
}


#best-score-banner {

	display: none;  /* block */
	position: absolute;
	left: 50%;
	bottom:calc(var(--playing-field-height) / 12 * 2);

	pointer-events:none;
	font-family: "Montserrat";
	font-size: calc(var(--playing-field-width) / 12);
	font-weight: 900;
	z-index: var(--Z-BEST_SCORE_BANNER);
	
	pointer-events: none;
	-webkit-user-select: none;
	user-select: none;
    
}


#scores, .status-controls {
	position:absolute;
	box-sizing: border-box;
	z-index:var(--Z_SCORES);

	display:flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content:center;
	
	background-color:rgba(0, 0, 0, 0.4);
	width:100%;
	margin:auto;
	padding:min(1em, 1%);
	padding-left:6px;
	padding-right:6px;
	pointer-events:none;
	border-radius:0.5em;
	font-size: calc(0.03 * var(--playing-field-width));
}

@media only screen and (max-height: 460px) {

	#scores { 
		position:absolute;
		top:0;
		left: 0;
		right: 0;
		margin:0;
		width:auto;
		
		border-radius:0;
	}
}

#scores div {

	margin-left: auto;
	pointer-events:auto;
	cursor:pointer;

}

#scores div:first-child {
	margin-left:0;
	margin-right:auto;
	display: inline;
}

#scores div:nth-child(2) {
	margin-left:0%;
	margin-right:auto;
	display: inline;
}

#scores div:nth-child(3) {
	margin-left:0%;
	margin-right:0;
	display: inline;
}

#scores div:nth-child(4) {
	display: inline;
}

@media only screen and (max-device-width: 460px) {

	#scores {
		padding-left:0;
		padding-right:0;
	}

	#scores span {
	
		font-size:1.25em; 
	}
}

#scores img {
	height:1.5em;
	padding:4px;
	margin: 0 1em;

}

#copyright {
	box-sizing: border-box;
	
	display:flex;
	flex-direction:row;
	justify-content:center;

	position:absolute;
	top:0.5em;
	left: 0; right: 0;
	z-index:var(--Z_COPYRIGHT);
	width:80%;
	height:2em;
	margin:auto;
	
	background-color:rgba(0, 0, 0, 0.4);
	color:rgba(211, 211, 211, 0.4);

	pointer-events:none;
	border-radius: 0.6em;
	
	padding-top: 0.5em;
    line-height: 1;
}

.menu {
	max-height: 100vh;
	max-width:80vw;
}

.menu div {
	box-sizing: border-box;
	background-color:#79CEFF;
	
	border: 1px solid green;
	border: 1px solid var(--background-color);
	box-shadow: inset 0px 0px 1em rgba(45,178,255,0.8);
	border-radius:0.5em;
	padding:min(1em, 1%);
	margin: 8px 1em;
	
	cursor:pointer;
	
	display: flex;
	align-items: center; /* align vertical */

}

.menu div:first-child {
	flex: 100%;
	margin-left:calc(100% - 2em);
	border-radius:50%!important;
	padding-left:1.5em;
	padding-right:1.5em;
	height:2em;
	text-align:center;
	font-size:0.8em;
	font-family: Arial, Helvetica, sans-serif;
}

.menu div:first-child:hover {
	background-color:red;
}

.menu div:not(:first-child) {
	flex: 33.333333%;
	
}

.menu div select {

	margin-left:8px;
}

.menu-button {
	border: 2px solid #656364;
	width:60%;

	background-color:#0F100E;
	color:white;
    border-radius: 1em;
    text-align: center;
	vertical-align: middle;
	border-radius: 1em;
}

.menu-button:hover {
	border: 2px solid #759ff3;
	box-shadow: -1px 0px 20px 19px #2a5ab9, -1px 0px 0px 2px white;

	background-color:black;
	color:white;

}

#bouncy-title {
	display: block;
	position: absolute;
	left: 50%;
	top:10%;
	font-family: "Montserrat";
	font-size: calc(100vw / 12);
	font-weight: 900;

}

#best-score-dlg div:first-child {
	position: absolute;
	display:flex;
	flex-direction: row;
	max-width:600px;

}

/* on small screens, move input to top when it has focus */
@media only screen and (max-height:450px){

	#entryxxxxx:focus-within {
	

	position:fixed;
	display:block;
	top:1px;
	left:2.5%;
	width:95%;
	margin-left:auto;
	margin-right:auto;
	border-width: 1px;
	border-style: solid;
	border-color: black;        
	font-size:1em;
	z-index:var(--Z_MAX);
	
	}

	#entry input:focus {
		font-size:1.5em;
	}

}


.card {
	box-sizing: content-box;
	position: absolute;
	padding:0;
	width:var(--card-width);
	height:auto;
	pointer-events:none;
	
/*	will-change: transform; */
        will-change: transform;
        transform: translate3d(0, 0, 0);
}

.joker {
	perspective: none!important;
}

.card .in-shoe {
	
}

.card-flash-container {
	
/* note: firefox (as of june 2023) can not handle changing z-index on an element with perspective
	will cause flashing (both mobile and desktop)
*/	
/*	perspective: calc(2 * var(--card-width)); */
	pointer-events:none;

}

.card-perspective {
	
/*	perspective:calc(2 * var(--card-width)); */
	perspective:calc(1.7 * var(--card-width));

}

.gold-cursor {
	cursor: url(../images/crosshair64-gold.cur) 32 32, crosshair;
}
.card .gold-card {
/*	background-color:#ffdc18!important;
	background-color:#ffff00!important; */
	box-shadow: inset 0px 0px calc(0.4 * var(--card-width)) calc(0.08 * var(--card-width)) rgba(255, 215, 0, .8) !important;
}
@media (any-hover: hover) {
	
	/* note: add cursors to maf_postLoadFiles */
	#playing-field {
		cursor: url(../images/crosshair64.cur) 32 32, crosshair;
	}
	
	:root {
		--card-cursor:url(../images/crosshair64-green2.cur);
	}

	.card .card-img:not(.in-shoe):hover {
		cursor: var(--card-cursor) 32 32, crosshair;
		outline: 4px solid green!important;
	}
}

.card img:first-child {
	box-sizing: content-box;

	width:100%;
	height:auto;
	outline: 4px solid rgba(0,0,0,0);

	border:2px solid black;
	border-radius: 0.4em;
 	border-radius:calc(0.10 * ((100vw - 150px - (8px * 8))/ 9));
	border-radius:var(--card-border-radius);
	box-shadow: 7px 8px 3px 1px rgba(0, 0, 0, .2);
	/* linear-gradient is slow to apply and 
		can cause flashing on animations where it is removed and reapplied 
	background: linear-gradient(#f3f1f1, #ebe1e1);
 */
	background:#f3f1f1;
	
	pointer-events:all;
	
/*	will-change: transform; */

}

.card-clicked-flash {
	animation: card-clicked-flash 0.1s linear;

}
@keyframes card-clicked-flash {
  	  0% { transform:scale3d(1, 1, 1); }
   	 50% { transform:scale3d(0.95, 0.95, 0.95); box-shadow: 0px 0px 20px 20px rgb(74 136 147 / 90%); }
 	100% { transform:scale3d(1, 1, 1); }
}

.sniper-card-flash {
	animation: sniper-card-flash 1s linear;

}
@keyframes sniper-card-flash {
  	  0% { transform:scale3d(1, 1, 1); }
   	 50% { transform:scale3d(0.95, 0.95, 0.95); box-shadow: 0px 0px 20px 20px rgb(0 255 0 / 90%), inset 0px 0px 20px 20px rgb(255 0 0 / 90%); }
 	100% { transform:scale3d(1, 1, 1); }
}

.gold-card-flash {
	animation: gold-card-flash 1s linear;

}
@keyframes gold-card-flash {
  	  0% { transform:scale3d(1, 1, 1); }
   	 50% { transform:scale3d(0.95, 0.95, 0.95); box-shadow: 0px 0px 20px 20px rgb(255 215 0 / 90%), inset 0px 0px 20px 20px rgb(255 215 0 / 90%); }
 	100% { transform:scale3d(1, 1, 1); }
}
.grenade-card-flash {
	animation: grenade-card-flash 0.5s linear;

}
@keyframes grenade-card-flash {
  	  0% { transform:scale3d(1, 1, 1); }
   	 50% { transform:scale3d(0.95, 0.95, 0.95); box-shadow: 0px 0px 20px 20px rgb(255 0 0 / 90%), inset 0px 0px 20px 20px rgb(255 0 0 / 90%); }
 	100% { transform:scale3d(1, 1, 1); }
}

.card-can-move {

	outline: 4px solid green!important;

}

@media (any-hover: none) {
	.card-can-move {
		outline: none;
	}
}

.card-clicked {

	outline: 4px solid red!important;
}


.btn {
	position: relative;
	top: 0;
	left: 0;
	width: 4em;
	height: 100%;
	margin: 0;
	display: flex;
	justify-content: center;
	align-items: center;
}
.btn span {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background: rgba(255, 255, 255, 0.05);
	box-shadow: 0 15px 15px rgba(0, 0, 0, 0.3);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 30px;
	padding: 10px;
	letter-spacing: 1px;
	overflow: hidden;
	transition: 0.5s;
}
.btn:hover span {
	letter-spacing: 3px;
	background-color:green;
}
.xbtn a::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 50%;
	height: 100%;
	background: linear-gradient(to left, rgba(255, 255, 255, 0.15), transparent);
	transform: skewX(45deg) translate(0);
	transition: 0.5s;
	filter: blur(0px);
}
.xbtn:hover span::before {
	transform: skewX(45deg) translate(200px);
}
.xbtn::before {
	content: "";
	position: absolute;
	left: 50%;
	transform: translatex(-50%);
	bottom: -5px;
	width: 30px;
	height: 10px;
	background: #f00;
	border-radius: 10px;
	transition: 0.5s;
	transition-delay: 0.5s;
}

.xbtn::before {
	content: "";
	position: absolute;
	left: 50%;
	transform: translatex(-50%);
	width: 80%;
	height: 150%;
	background: #0d2f2e;
	border-radius: 10px;
	transition: 0.5s;
	transition-delay: 0.5s;
}
.xbtn:hover::before /*lightup button*/ {
	bottom: 0;
	height: 50%;
	width: 80%;
	border-radius: 30px;
}

.xbtn::after {
	content: "";
	position: absolute;
	left: 50%;
	transform: translatex(-50%);
	width: 4em;
	height: 10px;
	background: #f00;
	border-radius: 10px;
	transition: 0.5s;
	transition-delay: 0.5s;
}
.xbtn:hover::after /*lightup button*/ {
	top: 0;
	height: 50%;
	width: 80%;
	border-radius: 30px;
}
.btn:nth-child(1)::before, /*chnage 1*/
.btn:nth-child(1)::after {
	background: #0d2f2e;
	box-shadow: 0 0 5px #0d2f2e, 0 0 15px #0d2f2e, 0 0 30px #0d2f2e,
		0 0 60px #0d2f2e;
}
.btn:nth-child(2)::before, /* 2*/
.btn:nth-child(2)::after {
	background: #2db2ff;
	box-shadow: 0 0 5px #2db2ff, 0 0 15px #2db2ff, 0 0 30px #2db2ff,
		0 0 60px #2db2ff;
}
.btn:nth-child(3)::before, /* 3*/
.btn:nth-child(3)::after {
	background: #1eff45;
	box-shadow: 0 0 5px #1eff45, 0 0 15px #1eff45, 0 0 30px #1eff45,
		0 0 60px #1eff45;
}

.colordrop-container {
	position: relative;
	/* background-color:rgba(0,0,0,0.6); */
	width: 100%;
	border-radius: calc(0.02 * var(--playing-field-width));
	background:none;
}
.colordrop-container .c {

	--color-drop-count:60;
	width: calc(1px * var(--color-drop-count) / 60);
	
	animation-iteration-count:5;
}

.joker-caught {
	
	pointer-events:none!important;
	animation-iteration-count:15;
  	animation:joker-caught-animation 0.2s linear 300;
	z-index:var(--Z_JOKER_DISSOLVE) !important;

}

@keyframes joker-caught-animation {
/*  	0% { transform: translate(10px, 0px) rotate(0deg); opacity:1 }
	33% { transform: translate(10px, 10px) rotate(15deg); }
  	66% { transform: translate(0px, 10px) rotate(-15deg); }
  	100% { transform: translate(-10px, 0px) rotate(0deg); opacity:1; }
	

	
	0% { transform: translate(10px, 0px) rotate(0deg); opacity:1 }
	33% { transform: translate(-10px, 0px) rotate(15deg); }
  	66% { transform: translate(10px, 0px) rotate(-15deg); }
  	100% { transform: translate(-10px, 0px) rotate(0deg); opacity:1; }
	
	*/	
	0% { transform: rotate(0deg) translate(10px, 0px); }
	33% { transform: rotate(15deg) translate(-10px, 0px); }
  	66% { transform: rotate(-15deg) translate(10px, 0px); }
  	100% { transform: rotate(0deg) translate(-10px, 0px); }
}
[id*='popup-container'] {

	position: relative;
	box-sizing: border-box;
	text-align: center;
	
	display: block;
	
	width: 100%;
	font-size: calc(0.06 * var(--playing-field-width));

	z-index: var(--Z_BIG_TIME);
	
    line-height: 0.8;
	pointer-events: all;

}

.popup-container * {
    pointer-events: inherit;
}

#popups {
	display: flex;
    flex-direction: column;
	justify-content: center;
    height: var(--playing-field-height);
	pointer-events: none;

}


#popup-container-grenade {
	position: absolute;
	bottom: 3%;
	opacity: 1;
	width: 100%;
	font-size: 0px;
	pointer-events: none;
}

/* #big-ammo, #big-remaining, #big-time, #big-best, #big-prize, #big-grenade { */
[id*='big-'] {

	position: relative;
	display: inline-block;
	box-sizing:border-box;

	line-height: 1;

    border: 1px solid;
	
    opacity: 1;
/*    z-index: -1; */
	background-color:rgba(0,0,0, 0.6);
    background-size: 100% 100%;
    background-repeat: no-repeat;
	padding: calc(0.02 * var(--playing-field-width)) calc(0.1 * var(--playing-field-width));
	padding-bottom: calc(0.02 * var(--playing-field-width));
    background-origin: content-box;
	font-family: "Montserrat";
	text-shadow: 0 0 11px black, 0 0 11px black, 0 0 11px black;
	color:red;
	font-weight: 900;
/*	font-size: calc(0.08 * var(--playing-field-width)); */
	border-radius: calc(0.02 * var(--playing-field-width));
	box-shadow: 6px 7px 2vw 6px rgba(0,0,0,0.8);
	
	cursor:default;
	width: 90%;
	min-height:calc(0.2 * var(--playing-field-height));
}

#big-ammo, #big-best {
	
	background-image: url(../images/ammo-1.png);

}

#big-time {
	background-image: url(../images/clock.png);

}

#big-grenade {
	font-size: calc(0.04 * var(--playing-field-width));
    padding: 0 0.5em;
    min-height: 1px;
	background-color: rgba(0,0,0, 0.3);
	pointer-events:none;
}

#big-time span:first-of-type, #big-ammo span:first-of-type, #big-remaining span:first-of-type, #big-best span:first-of-type {
    font-size: 80%;
	float:left;
	/* color:gray; */
}
#big-time span:last-of-type, #big-ammo span:last-of-type, #big-remaining span:last-of-type, #big-best span:last-of-type {
	float:right;
	/* color:gray; */
}
/*
#big-best span {
	font-size: 65%;
}
*/
#big-prize {
	font-size: calc(0.05 * var(--playing-field-width));
	line-height:normal;
	text-align: left;
}

#big-prize img {
	float:left;
	width:20%;
	height:auto;
	margin:5%;
}

#big-prize p {
    color: red;
    font-size: calc(0.04 * var(--playing-field-width));
    text-align: center;
	margin: 0;
    padding: 0;
}

#big-prize p:first-of-type {
    color: green;
    font-size: calc(0.03 * var(--playing-field-width));

}

#popup-container-prize {
	
	position: absolute;
	top:3%;
	opacity: 1;
	width:100%;
	font-size:0px;
}
#popup-container-prize #big-prize {

    font-size: calc(0.03 * var(--playing-field-width));
	pointer-events: none;
	width:90%;
}

#popup-container-game-over, #popup-container-game-status, #popup-container-social-media {
	position:absolute;
	pointer-events:all;
	width:100%;
	height:100%;
	cursor:default;
	background-color:rgba(0,0,0,0.85);
	top: 0;
	left:0;

}

#popup-container-game-over {
		background-color:rgba(0,0,0,0.4);
}
#big-game-over, #big-game-status {
	pointer-events:all;
	font-size: calc(0.04 * var(--playing-field-width));
	padding: calc(0.01 * var(--playing-field-width)) calc(0.05 * var(--playing-field-width));
	top: 45%;
	left:0;
    transform: translateY(-50%);
	max-width:calc(0.9 * var(--playing-field-width));

}

#big-game-over span, #big-game-status span {
    color: green;
}

#big-game-over p, #big-game-status p {
    margin:0;
}

	
#popup-container-game-status .status-controls {
	position: relative;
	z-index: auto;
	justify-content: space-evenly;
	margin-top: 1em;
		
}

.status-controls .menu-btn {
    margin: 0.5em auto;
	padding: 0.5em 1em;
	pointer-events: all;
}


.cube-red-card {

 	background-color:red!important;
	linear-gradient(90deg, #f12727, red)!important;
}

#cube-bonus {
	/* this is just a place holder - set by code */
	--cube-size:200px;

	width:var(--cube-size);
	height:var(--cube-size);
    position: absolute!important;
	
/*	left: 50%;
    bottom: 5%;
    transform: translate(-50%);
 */
	--xdeg:-35deg;
    --ydeg:45deg;

	text-align: center;
	text-decoration: none;

	transition: all 0.5s ease 0s;
    z-index: var(--Z_CUBE);
	filter: sepia(0.5);
	
	cursor:url(../images/crosshair64-green2.cur) 32 32, crosshair;

}
/* apply to hide the cube, but maintain its presence */
.cube-bonus-hidden {
	opacity:0;
	pointer-events:none;
}
.cube-clicked-valid {
	animation: cube-clicked-valid 0.6s ease;

}
@keyframes cube-clicked-valid {
  	  0% { transform:translate(2.5%, 2.5%) scale3d(1, 1, 1); }
   	 50% { transform:translate(-2.5%, -2.5%) scale3d(0.95, 0.95, 0.95); box-shadow: 0px 0px 20px 20px rgb(74 136 147 / 90%); }
 	100% { transform:translate(0%, 0%) scale3d(1, 1, 1); }
}

.cube-clicked-invalid {
	animation: cube-clicked-invalid 0.3s linear;

}
@keyframes cube-clicked-invalid {
  	  0% { transform:translate(2.5%, 2.5%) scale3d(1, 1, 1); }
   	 50% { transform:translate(-2.5%, -2.5%) scale3d(0.95, 0.95, 0.95); box-shadow: 0px 0px 20px 20px rgb(255 0 0 / 90%); }
 	100% { transform:translate(0%, 0%) scale3d(1, 1, 1); }
}

.cube-perform {
	animation: cube-perform 0.8s linear;

}
@keyframes cube-perform {
  	  0% { transform:translate(5%, 5%) scale3d(1, 1, 1); }
   	 50% { transform:translate(-5%, -5%) scale3d(0.95, 0.95, 0.95); box-shadow: 0px 0px 20px 20px rgb(0 255 0 / 90%); }
 	100% { transform:translate(0%, 0%) scale3d(1, 1, 1); }
}

#cube-bonus	.maf-cube-down img, #cube-bonus	.maf-cube-top img {
	
	width:80%;
	height:80%;
	transform: translate(0, 15%);
}
#cube-bonus .maf-cube-right img, #cube-bonus .maf-cube-back img {
	/* transform: translate(-40%, -72%); */
}

#cube-bonus .maf-cube-right div, #cube-bonus .maf-cube-back div {
	transform:rotate(180deg);
}

#cube-bonus .maf-cube-face {
	
	overflow:hidden;
	background-color: #f3f1f1;
	border:1px solid #5c0909;
	box-shadow: 0px 0px 20px 4px rgba(0,0,0,0.5);
	font-family: sans-serif;
	font-weight:700;
	font-size: calc(var(--cube-size) * 0.6);
	line-height: 1.5;
}



.maf-cube-face img {
/*	width: 160%;
    height: 350%; */
	background-color: #f3f1f1;
}

.maf-cube-face:not(.maf-cube-top):not(.maf-cube-down)  {	
	box-sizing: border-box;
    border-radius: 50%;
 /*   border: calc(0.08 * var(--cube-size)) solid wheat; 
	background-color:black;*/
	background: linear-gradient(90deg, #000, #2e2828);
	color: white;

}

.maf-cube-top, .maf-cube-down {
	
	border-radius: 10%;
}

#cube-bonus .maf-cube-up, #cube-bonus .maf-cube-down {
	/* cursor: help; */
}

@media (any-hover: hover) {
.maf-cube-face img:hover {
 /*   cursor: url(../images/crosshair32.png) 16 16, crosshair; */
	animation:3s ease maf-cube-face-img-hover;
}
@keyframes maf-cube-face-img-hover {

	25% { background-color: rgba(0, 255, 0, 0.8); }
}
.maf-cube-face:hover {

	animation:3s ease maf-cube-face-hover;
 /*   cursor: url(../images/crosshair32.png) 32 32, crosshair; */

}

@keyframes maf-cube-face-hover {

	50% { box-shadow: 0px 0px 20px 9px #1eff45; }
}

}


#cube-boundary-view {
	display:none;
	position:absolute;
	background-color:rgba(0, 0, 0, 0.4);
	pointer-events:none;
}

/* .temp-flash-green {
	
	animation-name:flash-green;
	animation-duration:150ms;
	animation-iteration-count:6;
}

@keyframes flash-green {
  	0% { background-color:white; }
  	100% { background-color:green; }

}
.temp-flash-red {
	
	animation-name:flash-red;
	animation-duration:150ms;
	animation-iteration-count:6;
}
@keyframes flash-red {
  	0% { background-color:white; }
  	100% { background-color:red; }

}
*/
.blast-effect {
	display: block;
	position: absolute;
    border-radius: 50%;
    z-index: var(--Z_BLAST_EFFECT);
	pointer-events: none;
}
.blast-effect-ani {
	animation-name: blast-effect; 
	animation-duration: 1s;
}
@keyframes blast-effect {
  	0% { transform: scale(0, 0);}
  	50% {
		transform: scale(1, 1);
		box-shadow: inset 0px 0px 8vw 10px #e93304, 0px 0px calc(0.05 * var(--playing-field-width)) 19px #e93304;
	}
  	100% { transform: scale(0, 0);}
}


#crosshair {
	width: 100%;
    height: 100%;


}


.maf_scope {
	position: absolute;
	box-sizing: border-box;
	border: 3px solid #000;
	border-radius: 50%;
	cursor: none;
	width: 200px;
	height: 200px;
	max-width:min(35vw, 35vh);
	max-height:min(35vw, 35vh);

	filter:sepia(0.5) brightness(0.4);
	left: 0;
    top: 0;
/*	z-index:var(--Z_SCOPE); */
}

.maf_scope_img {
	position:absolute;
	box-sizing: border-box;
	width:100%;
	height:100%;	
	filter:brightness(0.4);
}

	
.instr-msg-red {
	color: red;
    background-color: gray;
    border: 1px solid green;
    border-radius: 0.3em;
	font-size: 130%;
	line-height: 1.5;
	padding: 0 0.5em;
}

.instr-msg-black {
	color: black;
    background-color: gray;
    border: 1px solid green;
    border-radius: 0.3em;
	text-shadow: 0 0 black;
	font-size: 130%;
	line-height: 1.5;
	padding: 0 0.5em;
}

.instr-msg-button {
	color: red;
    background-color: white;
    border: 1px solid green;
    border-radius: 0.3em;
	font-size: 175%;
	line-height: 1.5;
	padding: 0.2em 0.5em;
	margin: 0.2em;
}

.instr-container {

	display: flex;
    align-items: center;
    justify-content: center;
	position:absolute;
	width:100%;
	top:25%;
    text-shadow: 0 0 0.1em black, 0 0 0.1em black, 0 0 0.1em black;
	
	z-index:var(--Z_BIG_TIME);
	pointer-events:none;
}


.instr {

	position: relative;
	
	display: flex;
	justify-content: center;
	align-items: center;

    border: 1px solid;
	
    opacity: 1;
    z-index: -1;
	background-color:rgba(0,0,0, 0.5);
 
	font-family: "Montserrat";
	color:red;
	font-weight: 900;
	border-radius: calc(0.02 * var(--playing-field-width));
	box-shadow: 6px 7px 2vw 6px rgba(0,0,0,0.8);
	
	pointer-events: auto;
	cursor: default;
	width: calc(0.85 * var(--playing-field-width));
    margin: auto;

	
	padding: calc(0.02 * var(--playing-field-width));
	
	cursor:pointer;
}

#table-block {
	position:absolute;
	width: 100%!important;
    height: 100%!important;
	pointer-events: all!important;
	z-index: var(--Z_MAX);
	display:none;
    left: 0;
    top: 0;
	cursor: wait;

/* 	background-color:rgba(255, 0, 0, 0.1); */

}

.instr-modal {
	background-color: rgba(0, 0, 0, 0.8);
    width: 100%!important;
    height: 100%!important;
    position: absolute!important;
    left: 0!important;
    top: 0!important;
	pointer-events: all!important;
}

.instr-img {
	float:left;
	width:25%;
	height:auto;
	padding: calc(0.02 * var(--playing-field-width));
    border-radius: calc(0.03 * var(--playing-field-width));
}

.instr-title {
	text-align:center;
	font-size:calc(0.04 * var(--playing-field-width));
	color:green;
	margin:0;
}

.instr-msg {
	text-align:center;
	font-size: calc(0.035 * var(--playing-field-width));
	color:red;
	margin:0;
}

#instr-landscape {
	
	z-index: var(--Z_MAX);
}

#instr-landscape .instr {
	background-color:gray;
}

#instr-landscape .instr-msg {
	font-size: calc(0.06 * var(--playing-field-width));
	color:red;
	min-height: calc(0.4 * var(--playing-field-height));
	background-color:gray;

}

.shadow-background {
	position: absolute;
	box-sizing: border-box;
	left:10%;
	top:50%;
	transform:translateY(-50%);
    width: 80%;
	max-height:95%;
	
	overflow-y: auto;
    overflow-x: hidden;

    background-color: rgba(0, 0, 0, 0.6);
	border:1px solid red;

    padding: 1em;
    border-radius: calc(0.03 * var(--playing-field-width));
	box-shadow: 14px 14px 8px 0px rgba(0, 0, 0, 0.2);
}

#buy-ammo-container {
    display: block;
	font-size: calc(0.06 * var(--playing-field-width));
    font-family: "Montserrat";
    text-shadow: 0 0 0.1em black, 0 0 0.1em black, 0 0 0.1em black;
    color: red;
    font-weight: 900;
}

#buy-ammo-container p:first-of-type {
    display: block;
	margin:0;
	font-size: calc(0.06 * var(--playing-field-width));
	text-align: center;
	position: relative;
    top: 0.5em;
}

#buy-ammo-container img:first-of-type {
	float:left;
	height:2em;
	padding-bottom: 0.5em;
}

#buy-ammo-selections {
    text-align: center;
    display: block;
    width: 100%;
    font-size: calc(0.05 * var(--playing-field-width));
}

#buy-ammo-selections div {	
	cursor: pointer;
	border: 1px solid black;
    border-radius: calc(0.03 * var(--playing-field-width));
	margin: 0 0 0.5em 0;
	background-color: wheat;
    padding: 0.2em 0.5em;
}

#sniper-container {
	position:absolute;
	bottom:0;
	width:calc(0.1 * var(--playing-field-width));
	z-index:var(--Z_SNIPER);
	pointer-events: none;
}

#sniper-container #sniper-animate {
	transition-duration: 0.1s;
}

#sniper-container #sniper-animate img {
	position: relative;
	width: 100%;
	pointer-events: all;
	filter: drop-shadow(4px 4px 2px black);
}

#sniper-container #sniper-ammo {
	position: absolute;
	left:30%;
	top:50%;
	transform:translate(-50%, -50%);
    line-height: 0;
    font-size: calc(0.04 * var(--playing-field-width));
    font-weight: 900;
	margin: auto;
	text-shadow: 0 0 10px white;
}

#sniper-bullet, .sniper-bullet {
	display:none;
	pointer-events:none;
	position:absolute;
	left: 0;
	top: 0;
	
	width: calc(0.02 * var(--playing-field-width));
	height: calc(0.02 * var(--playing-field-width));
	border-radius: 50%;
	background-color: #007F00;
	border: 1px solid black;
	z-index:var(--Z_BULLET);
	pointer-events: none;
}

.best {
	font-size: 125%;
	padding: 0.5em;
	animation: best 1s linear infinite;
	color: gold;
}

@keyframes best {
  50% {
    opacity: 0;
  }
}

.continue-game {
		
	color: red;
    background-color: white;
    border: 1px solid green;
    border-radius: 0.3em;
	font-size: 100%;
	line-height: 1.5;
	padding: 0.1em 0.3em;
	width: 80%;
    margin: auto!important;	
	animation: blinktext 2s ease infinite;
}

.continue-game::before {
	content: "continue game";
}

@keyframes blinktext {
	0% {
		color: rgba(255, 0, 0, 0);
		text-shadow: none;
	}
	25% {
		color: rgba(255, 0, 0, 1);
		text-shadow: 0 0 11px black, 0 0 11px black, 0 0 11px black;
	}
	75% {
		color: rgba(255, 0, 0, 1);
		text-shadow: 0 0 11px black, 0 0 11px black, 0 0 11px black;
	}
 	100% {
		color: rgba(255, 0, 0, 0);
		text-shadow: none;
	}
}
#popup-container-game-over input {
	font-size: calc(0.03 * var(--playing-field-width));
}

#popup-container-game-over #post {
		
    width: 90%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
	
	color: red;
    background-color: white;
    border: 1px solid green;
    border-radius: 0.3em;
	font-size: 80%;
	line-height: 1.5;
    margin: auto!important;	
	animation: blinktext 2s ease infinite;
}

#popup-container-game-over #post div:first-of-type {
		
    width: 35%;

}
#popup-container-game-over #post img {
		
	height: calc(0.06 * var(--playing-field-width));
}

#popup-container-social-media {
    top: 45%;
    transform: translateY(-50%);
    position: absolute;
}
	
#big-social-media {
		
    color: lightgray;
    background-color: black;
    border: 1px solid green;
    border-radius: 0.3em;
    font-size: 70%;
    line-height: 1.2;
    padding: 0.1em 2em;
    width: 80%;
	top: 35%;
}

.social-media::before {
	content: "share on ";
}

#post {
    cursor: pointer;
}