body {
	margin:0px;
	padding:0px;
	text-align:center;
	font-family: 'Barlow Condensed', sans-serif;
	color:#FFF;
	font-weight:300;
	font-size:18px;
	text-transform:uppercase;
	background:#000;
	cursor:url('./images/cursor-target.png') 16 16, auto;
}
* {
	box-sizing:border-box;
}
a, a:link, a:visited, a:active { color:#2e73ff; text-decoration:none; transition:all .3s; cursor:url('./images/cursor-target.png') 16 16, auto; }
a:active {transition:none!important;}
a:hover { text-decoration:none; }
img {border:none;}
h1, h2, h3, h4, h5, h6 {font-weight:300; margin:0px; padding:0px 0px; }

a img {
	transition:all .3s;
	opacity:1;
}
a:hover img {
	opacity:.6;
}
.tooltip-image {
	display:block;
	height:466px;
	width:350px;
	border:none;
	background-size:cover;
	background-repeat:no-repeat;
	background-position:0 0;
	padding:0;
	border:0;
	border-radius:0;
}
h2 {
	font-size:45px;
	font-weight:300;
	margin-top:0;
	margin-bottom:10px;
}
h3 {
	font-size:28px;
	font-weight:900;
	margin-top:0;
}
.clearfix:after {
	content: "";
	display: table;
	clear: both;
}
ol li {
	margin-bottom:20px;
}
a#start-game {
	margin-top:20px;
	margin-left:29px;
}
a.pulse-button {
	position:relative;
	display:inline-block;
	padding:10px 24px;
	color:#18f183;
	background:rgba(24,241,131,.08);
	font-size:30px;
	border:1px solid rgba(24,241,131,.2);
	animation: pulsebutton 1s infinite;
}
a.pulse-button:hover {
	/*animation: pulsegreenhover .3s 1;*/
	animation:none;
	opacity:1;
	background-color: rgba(24,241,131,1);
	box-shadow: 0 0 10px #18f183, 0 0 40px #18f183, 0 0 10px #18f183;
	color:#000;
	border:1px solid rgba(24,241,131,1);
}
a.pulse-button:active {
	opacity:.3;
}
@keyframes pulsegreen {
	0% { background-color: rgba(24,241,131,.08); box-shadow: 0 0 9px rgba(24,241,131,.1); border:1px solid rgba(24,241,131,.2); }
	50% { background-color: rgba(24,241,131,.15); box-shadow: 0 0 20px rgba(24,241,131,.3); border:1px solid rgba(24,241,131,.4); }
	100% { background-color: rgba(24,241,131,.08); box-shadow: 0 0 9px rgba(24,241,131,.1); border:1px solid rgba(24,241,131,.2); }
}
@keyframes pulsegreenhover {
	0% { background-color: rgba(24,241,131,.08); box-shadow: 0 0 9px rgba(24,241,131,.1); color:#18f183; }
	100% { background-color: rgba(24,241,131,1); box-shadow: 0 0 10px #18f183, 0 0 40px #18f183, 0 0 10px #18f183; color:#000; border:1px solid rgba(24,241,131,1); }
}
@keyframes pulsebutton {
	0%, 100% { opacity:1; }
	50% { opacity:.65; }
}
a.pulse-button.red {
	color:rgba(218,19,74,1);
	border-color:rgba(218,19,74,.3);
	background:rgba(218,19,74,.12);
	/*animation: pulsered 1s infinite;*/
}
a.pulse-button.red:hover {
	/*animation: pulseredhover .3s 1;*/
	background-color: rgba(218,19,74,1); 
	box-shadow: 0 0 10px rgba(218,19,74,1), 0 0 40px rgba(218,19,74,1), 0 0 10px rgba(218,19,74,1); 
	color:#000; 
	border-color:rgba(218,19,74,1);
}
a.pulse-button.red:active {
	opacity:.3;
}
@keyframes pulsered {
	0% { background-color: rgba(218,19,74,.12); box-shadow: 0 0 9px rgba(218,19,74,.1); border-color:rgba(218,19,74,.3); }
	50% { background-color: rgba(218,19,74,.2); box-shadow: 0 0 20px rgba(218,19,74,.3); border-color:rgba(218,19,74,.5); }
	100% { background-color: rgba(218,19,74,.12); box-shadow: 0 0 9px rgba(218,19,74,.1); border-color:rgba(218,19,74,.3); }
}
@keyframes pulseredhover {
	0% { background-color: rgba(218,19,74,.12); box-shadow: 0 0 9px rgba(218,19,74,.1); color:rgba(218,19,74,1); }
	100% { background-color: rgba(218,19,74,1); box-shadow: 0 0 10px rgba(218,19,74,1), 0 0 40px rgba(218,19,74,1), 0 0 10px rgba(218,19,74,1); color:#000; border-color:rgba(218,19,74,1); }
}
a.pulse-button.blue {
	color:rgba(76,64,255,1);
	border-color:rgba(76,64,255,.3);
	background:rgba(76,64,255,.12);
	/*animation: pulseblue 1s infinite;*/
}
a.pulse-button.blue:hover {
	/*animation: pulsebluehover .3s 1;*/
	background-color: rgba(76,64,255,1); 
	box-shadow: 0 0 10px rgba(76,64,255,1), 0 0 40px rgba(76,64,255,1), 0 0 10px rgba(76,64,255,1); 
	color:#000; 
	border-color:rgba(76,64,255,1);
}
a.pulse-button.blue:active {
	opacity:.3;
}
@keyframes pulseblue {
	0% { background-color: rgba(76,64,255,.12); box-shadow: 0 0 9px rgba(76,64,255,.1); border-color:rgba(76,64,255,.3); }
	50% { background-color: rgba(76,64,255,.2); box-shadow: 0 0 20px rgba(76,64,255,.3); border-color:rgba(76,64,255,.5); }
	100% { background-color: rgba(76,64,255,.12); box-shadow: 0 0 9px rgba(76,64,255,.1); border-color:rgba(76,64,255,.3); }
}
@keyframes pulsebluehover {
	0% { background-color: rgba(76,64,255,.12); box-shadow: 0 0 9px rgba(76,64,255,.1); color:rgba(76,64,255,1); }
	100% { background-color: rgba(76,64,255,1); box-shadow: 0 0 10px rgba(76,64,255,1), 0 0 40px rgba(76,64,255,1), 0 0 10px rgba(76,64,255,1); color:#000; border-color:rgba(76,64,255,1); }
}

a.glow-button {
	position:relative;
	display:inline-block;
	padding:12px 24px;
	color:#18f183;
	background:rgba(0,0,0,0);
	font-size:26px;
	overflow:hidden;
	border:1px solid rgba(24,241,131,.2);
}
a.glow-button svg, a.pulse-button svg{
	height:32px;
	width:auto;
	fill:#18f183;
	transition:all .3s;
}
a.glow-button.large, a.pulse-button.large {
	padding:25px 50px;
	font-size:35px;
}
a.glow-button.small, a#show-playfield {
	padding:6px 20px;
	height:39px;
	font-size:20px;
}
a.glow-button:hover {
	color:#000;
	background:#18f183;
	box-shadow: 0 0 10px #18f183, 0 0 40px #18f183, 0 0 10px #18f183;
}
a.glow-button:hover svg, a.pulse-button:hover svg {
	fill:#000;
}
a.glow-button:active {
	opacity:.3;
}
a#show-playfield {
	position:fixed;
	display:inline-block;
	top:0;
	right:0;
	padding:6px 10px;
}
body.event a#show-playfield {
	right:155px;
}
a#show-playfield svg {
	fill:#FFF;
	height:28px;
	width:auto;
}
a#show-playfield:hover svg {
	fill:#18f183;
}
a.glow-button span {
	position: absolute;
	display: block;
}
/*
a.glow-button span:nth-child(1) {
	top:0;
	left: -100%;
	width:100%;
	height:2px;
	background: linear-gradient(90deg, transparent, #18f183);
	animation: outline1 2s infinite;
}
a.glow-button span:nth-child(3) {
	bottom: 0;
	right:-100%;
	width:100%;
	height:2px;
	background:linear-gradient(270deg, transparent, #18f183);
	animation: outline3 2s infinite;
}
a.glow-button span:nth-child(2) {
	top: -100%;
	right:0;
	width:2px;
	height:100%;
	background:linear-gradient(180deg, transparent, #18f183);
	animation: outline2 2s infinite;
}
a.glow-button span:nth-child(4) {
	bottom: -100%;
	left:0;
	width:2px;
	height:100%;
	background:linear-gradient(360deg, transparent, #18f183);
	animation: outline4 2s infinite;
} 
*/
a.glow-button.red {
	color:rgba(218,19,74,1);
	border-color:rgba(218,19,74,.5);
}
a.glow-button.red:hover {
	color:rgba(0,0,0,1);
	background:rgba(218,19,74,1);
	box-shadow: 0 0 10px rgba(218,19,74,1), 0 0 40px rgba(218,19,74,1), 0 0 10px rgba(218,19,74,1);
}
a.glow-button.red:active {
	opacity:.3;
}
/*
a.glow-button.red span:nth-child(1) {
	background: linear-gradient(90deg, transparent, rgba(218,19,74,1));
}
a.glow-button.red span:nth-child(3) {
	background:linear-gradient(270deg, transparent, rgba(218,19,74,1));
}
a.glow-button.red span:nth-child(2) {
	background:linear-gradient(180deg, transparent, rgba(218,19,74,1));
}
a.glow-button.red span:nth-child(4) {
	background:linear-gradient(360deg, transparent, rgba(218,19,74,1));
}
@keyframes outline1 {
	0%, 50.1% {left:-100%;}
	50%, 100% {left:100%;}
}
@keyframes outline2 {
	0%, 50.1% {top:-100%;}
	50%, 100% {top:100%;}
}
@keyframes outline3 {
	0%, 50.1% {right:-100%;}
	50%, 100% {right:100%;}
}
@keyframes outline4 {
	0%, 50.1% {bottom:-100%;}
	50%, 100% {bottom:100%;}
}
*/

/* splash */
#splash,
#game-loading {
	position:fixed;
	top:0;
	left:0;
	height:100vh;
	width:100vw;
	background:#000;
	z-index:9999999;
	opacity:1;
	transition:all 1.5s;
}
#game-loading {
	transition:none;
	z-index:999999999;
}
#open-game {
	position:absolute;
	top:50%;
	margin-top:-50px;
	left:50%;
	margin-left:-90px;
	padding:0 40px;
}
#open-game svg {
	width:100px;
	height:auto;
}
#open-game svg path {
	fill:#FFF;
}
#splash.hidden,
#game-loading.hidden {
	top:-200vh;
}
.game-loading-bar {
	position:absolute;
	left:50%;
	top:50%;
	height:3px;
	width:80%;
	margin-top:-1px;
	margin-left:-40%;
	border-radius:2px;
	background:rgba(8,49,28,1);
}
.game-loading-progress {
	position:absolute;
	top:0;
	height:3px;
	width:0;
	left:0;
	background:rgba(24,241,131,1);
	/*transition:2s ease-in-out;*/
}
.game-loading-progress .glow {
    width:150px;
    max-width:100%;
    height:100%;
    float:right;
}
.game-loading-progress .glow::before,
.game-loading-progress .glow::after {
	content:'';
	display:block;
	position:relative;
	border-radius:0px 2px 2px 0px;
}
.game-loading-progress .glow::before {
	background:transparent;
	height:100%;
	box-shadow:0px 0px 35px 2px rgba(24,241,131,.7), 0px 0px 25px 1px rgba(24,241,131,.8), 0px 0px 15px 0 rgba(24,241,131,1), 0 0 7px 0 rgba(24,241,131,1);
	z-index:-5;
}
.game-loading-progress .glow::after {
	background: linear-gradient(to right, #000 0%, transparent 100%);
	height: calc(100% + 40px + 40px);
	width: calc(100% + 40px);
	top: -40px;
	left: -40px;
	z-index: -3;
}

/* tutorial */
#tutorial-overlay {
	position:fixed;
	top:0;
	left:0;
	width:100vw;
	height:100vh;
	z-index:999999;
	background:rgba(2, 13, 23, .6);
	display:none;
}
#tutorial-overlay #close-tutorial {
	position:fixed;
	bottom:20px;
	right:20px;
	width:140px;
	color:#FFF;
	border-color:#FFF;
	background:rgba(255,255,255,.08);
	animation:none;
	padding:13px 45px 15px 20px;
}
#tutorial-overlay #close-tutorial svg.close-tutorial-svg {
	transform:rotate(90deg);
	width:40px;
	height:auto;
	position:absolute;
	top:12px;
	right:20px;
}
#tutorial-overlay #close-tutorial svg.close-tutorial-svg path {
	fill:#FFF;
	transition:all .15s;
}
#tutorial-overlay #close-tutorial:hover {
	background:#FFF;
	color:rgba(2, 13, 23,1);
	box-shadow: 0 0 10px #FFF, 0 0 40px #FFF, 0 0 10px #FFF;
}
#tutorial-overlay #close-tutorial:hover svg.close-tutorial-svg path {
	fill:rgba(2, 13, 23,1);;
}
body.show-tutorial #tutorial-overlay {
	display:block;
}
#tutorial-overlay .step {
	position:fixed;
	z-index:9999999;
	opacity:0;
	z-index:0;
	transition:all .3s;
}
#tutorial-overlay .step.shown {
	opacity:1;
	z-index:999;
}
#tutorial-overlay .step .text {
	font-size:30px;
	display:block;
}
#tutorial-overlay .step svg.arrow {
	width:100px;
	height:auto;
	fill:#FFF;
	position:absolute;
}
#tutorial-overlay a.pulse-button.next-button {
	position:absolute;
	z-index:999;
	border-color:#FFF;
	color:#FFF;
	background:rgba(255,255,255,.08);
}
#tutorial-overlay a.pulse-button.next-button:hover {
	background:#FFF;
	color:rgba(2, 13, 23,1);
	box-shadow: 0 0 10px #FFF, 0 0 40px #FFF, 0 0 10px #FFF;
}
#step1 {
	bottom:280px;
	left:50%;
	margin-left:-160px;
}
#step1 svg.arrow {
	transform:rotate(-10deg);
	top:45px;
	left:100px;
}
#step1 a.pulse-button.next-button {
	top:52px;
	right:45px;
}

#step2 {
	top:142px;
	left:200px;
	width:300px;
}
#step2 svg.arrow {
	transform:rotate(167deg);
	top:-110px;
	left:100px;
}
#step2 a.pulse-button.next-button {
	top:-71px;
	right:3px;
}

#step3 {
	bottom: 192px;
    left: 35px;
    width: 300px;
}
#step3 svg.arrow {
	transform: rotate(-32deg);
    top: 78px;
    left: 175px;
}
#step3 a.pulse-button.next-button {
	top: 84px;
    right: 125px;
}

#step4 {
	top: 97px;
    left: 167px;
    width: 300px;
}
#step4 svg.arrow {
	transform: rotate(70deg);
    top: 27px;
    left: -32px;
}
#step4 a.pulse-button.next-button {
	top: 77px;
    right: 97px;
}

#step5 {
	top: 300px;
    left: 145px;
    width: 250px;
}
#step5 svg.arrow {
	transform: rotate(260deg);
    top: 5px;
    right: -83px;
}
#step5 a.pulse-button.next-button {
	top: 118px;
    right: 73px;
}

#step6 {
	bottom: 241px;
    right: 19px;
}
#step6 svg.arrow {
	transform: rotate(-32deg);
    top: 39px;
    right: -14px;
}
#step6 a.pulse-button.next-button {
	top: 49px;
    width: 165px;
    right: 87px;
}

/* overlay */

body.overlay-shown #overlay {
	top:0;
	opacity:1;
}
body.instructions-shown .overlay-instructions {
	display:block;
}
body.playfield-shown .overlay-playfield {
	display:block;
}
body.playfield-shown #footer a.rules {
	opacity:0;
}
body.no-splash #playername {
	display:none;
}
body.no-splash #start-game {
	display:none;
}
body.no-splash #player-toggles {
	display:none;
}
body.no-splash a.pulse-button.rules, body.no-splash a.pulse-button#new-game {
	display:block;
}
body.no-splash .switch-wrapper {
	float: none;
    position: relative;
    top: -35px;
    left: 159px;
}
a.pulse-button.rules, a.pulse-button#new-game {
	display:none;
	text-align:center;
}
a.pulse-button#new-game {
	margin-top:20px;
}
.overlay-controls {
	display:none;
	margin-top:30px;
}
#overlay {
	position:absolute;
	z-index:99;
	background:rgba(0, 0, 0,.8);
	top:-100vh;
	left:0;
	width:100%;
	height:100%;
	opacity:0;
	transition:opacity .2s;
}
.overlay-inner {
	position:relative;
	overflow:hidden;
	top:10%;
	left:10%;
	height:80%;
	width:80%;
	background:rgba(2, 13, 23,1);
	border:1px solid rgba(7, 44, 80, 1);
	box-shadow: 0px 0px 70px 30px rgba(0, 0, 0,1);
	text-align:left;
}
.overlay-instructions {
	display:none;
	position:relative;
	height:100%;
}
.overlay-left {
	float:left;
	width:550px;
	height:100%;
	padding:30px 10px 20px 40px;
	position:relative;
	overflow:auto;
	z-index:2;
}
.overlay-left img.logo {
	display:block;
	width:318px;
}
.overlay-right {
	float:left:
	width:calc(100% - 550px);
	height:100%;
	position:relative;
}
.overlay-rules {
	height:100%;
	overflow:auto;
	position:relative;
	padding:45px 35px 40px 0;
}
.overlay-instructions a.glow-button {
	position:relative;
	top:20px;
	left:30px;
}
.input-wrapper {
	float:left;
}
input[type="text"] {
	background:rgba(2, 13, 23,1);
	color:#18f183;
	font-family: 'Barlow Condensed', sans-serif;
	font-size:26px;
	display:block;
	text-transform:uppercase;
	font-weight:100;
	border:1px solid rgba(24,241,131,1);
	padding:25px 25px;
	margin:10px 0 0 30px;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #18f183;
}
::-moz-placeholder { /* Firefox 19+ */
  color: #18f183;
}
:-ms-input-placeholder { /* IE 10+ */
  color: #18f183;
}
:-moz-placeholder { /* Firefox 18- */
  color: #18f183;
}
*:focus {
    outline: none;
}
.switch-wrapper {
	float:left;
	position:absolute;
	top:27px;
	right:15px;
	width:175px;
}
.switch-wrapper svg {
	fill:rgba(15,117,156,1);
	width:24px;
	height:auto;
}
.switch-item {
	position:relative;
	height:50px;
}
.switch-wrapper .icon-on {
	position:absolute;
	top:38px;
	left:90px;
}
.overlay-playfield {
	display:none;
	position:relative;
	height:100%;
	padding:20px 20px;
	text-align:center;
	overflow:auto;
}
#overlay-hide {
	position:absolute;
	top:0;
	right:0;
	padding:10px 10px;
}
#overlay-hide svg {
	fill:#FFF;
	height:28px;
	width:auto;
	transition:all .3s;
}
#overlay-hide:hover svg {
	fill:#18f183;
}
.playfield .card.event {
	animation: cardpunch 10s ease-in-out 1;
	transform:scale(.6) rotate(-5deg);
}
@keyframes cardpunch {
	0%, 2% {transform:scale(.6) rotate(-5deg);}
	3% {transform:scale(1.3) rotate(-3deg);}
	5% {transform:scale(1) rotate(-2deg);}
	23% {transform:scale(1.05) rotate(2deg);}
	50% {transform:scale(.95) rotate(-2deg);}
	75% {transform:scale(1.05) rotate(2deg);}
	100%{transform:scale(.95) rotate(-2deg);}
}


/* layout */
body #game-inner,
body h1,
body #footer .roundlog .label,
body #footer .toggle-logs,
body #footer .rules {
	background:#0e907e;
	/*animation: colorchange 6s linear infinite;*/
}
body.event #game-inner,
body.event h1,
body.event #footer .roundlog .label,
body.event #footer .toggle-logs,
body.event #footer .rules,
body.event #current-event {
	background:rgba(219,255,38,1);
	/*animation: colorchangeevent 6s linear infinite;*/
}
body.battle-phase #game-inner,
body.battle-phase h1,
body.battle-phase #footer .roundlog .label,
body.battle-phase #footer .toggle-logs,
body.battle-phase #footer .rules {
	background:#da134a;
	/*animation: colorchangebattle 6s linear infinite;*/
}
body.emp #game-inner,
body.emp h1,
body.emp #footer .roundlog .label,
body.emp #footer .toggle-logs,
body.emp #footer .rules,
body.emp #current-event {
	background:#000;
	/*animation: colorchangegameover 6s linear infinite;*/
}
body.game-over #game-inner,
body.game-over h1,
body.game-over #footer .roundlog .label,
body.game-over #footer .toggle-logs,
body.game-over #footer .rules {
	background:#441ddc;
	/*animation: colorchangegameover 6s linear infinite;*/
}
@keyframes colorchange {
	0%, 100% {background:#0e907e;}
	25% {background:#06d046;}
	50% {background:#0aabbd;}
	75% {background:#00a75b;}
}
@keyframes colorchangebattle {
	0%, 100% {background:#da134a;}
	25% {background:#bd0368;}
	50% {background:#e20606;}
	75% {background:#d706e2;}
}
@keyframes colorchangegameover {
	0%, 100% {background:#1432d0;}
	25% {background:#0e64d4;}
	50% {background:#5d1fec;}
	75% {background:#0e86d0;}
}
@keyframes colorchangeevent {
	0%, 100% {background:#e1f300;}
	25% {background:#b6ff2d;}
	50% {background:#ffb11c;}
	75% {background:#b8dc4f;}
}

#game-outer {
	background:#0b5977;
	width:100vw;
	height:100vh;
	position:relative;
	opacity:0;
	transition:opacity 2s;
	overflow:hidden;
}
#game-outer.shown {
	opacity:1;
}

#game-inner {
	position:absolute;
	top:40px;
	left:0;
	width:100vw;
	height:calc(100vh - 38px);
	padding:8px 8px;
	transition:height .3s;
}
body.show-footer #game-inner {
	height:calc(100vh - 150px);
}
#game-inner-wrapper {
	position:absolute;
	position:relative;
	z-index:2;
	top:1px;
	left:0;
	width:100%;
	overflow:auto;
	height:calc(100% - 4px);
	background:#000;
}
#game-bg {
	position:absolute;
	height:100%;
	width:100%;
	background-repeat:no-repeat;
	background-position:center bottom;
	background-size:cover;
	opacity:.3;
}

h1 {
	color:#FFF;
	padding:5px 10px 0 10px;
	display:inline-block;
	height:40px;
	position:absolute;
	left:0;
	top:0;
}
h1 svg {
	width:222px;
	height:auto;
}
#message {
	position:absolute;
	z-index:1;
	left:255px;
	top:2px;
	font-size:25px;
	width:calc(100vw - 330px);
	text-align:left;
	font-weight:bold;
	text-shadow: 2px 2px #000;
}
#message span {
	color:#18f183;
}
body.event #current-event {
	display:block;
}
#current-event {
	display:none;
	position:absolute;
	z-index:1;
	right:0;
	top:0;
	padding:2px 10px;
	text-shadow: 2px 2px rgba(0,0,0,1);
	background:rgba(219,255,38,1);
	font-weight:bold;
	color:#FFF;
	font-size:30px;
}
#current-event span {
	transform:scale(1);
	color:#FFF;
	display:block;
	animation: currentevent 1s linear infinite;
}
@keyframes currentevent {
	0%, 100% {transform:scale(1);color:#FFF;text-shadow: 2px 2px rgba(0,0,0,1);}
	50% {transform:scale(1.05);color:#000;text-shadow: 2px 2px rgba(255,255,255,1);}
}
#controls {
	position:absolute;
	z-index:9999;
	text-align:center;
	width:100%;
	left:0;
	bottom:0;
	opacity:0;
	background:rgba(0,0,0,.6);
}
#controls a.pulse-button {
	background:rgba(2, 13, 23,1);
	width:100%;
}
#controls a.pulse-button:hover {
	background:#18f183;
}
#controls a.pulse-button.red:hover {
	background:rgba(218,19,74,1);
}
#controls a.pulse-button.blue:hover {
	background:rgba(76,64,255,1);
}
#footer {
	height:120px;
	width:100%;
	position:absolute;
	bottom:-111px;
	left:0;
	transition:bottom .3s;
}
#footer .toggle-logs,
#footer .rules {
	width:41px;
	height:39px;
	padding:3px 5px 0 5px;
	color:#FFF;
	position:absolute;
	z-index:999;
	left:3;
	top:-36px;
	border-top-right-radius:3px;
	border-top-left-radius:3px;
	transition:top .3s;
}
#footer .rules {
	left:auto;
	height:42px;
	width:42px;
	top:-75px;
	padding:7px 5px 0 8px;
	right:3px;
	opacity:0;
}
#footer .rules.shown {
	opacity:1;
}
#footer .toggle-logs svg,
#footer .rules svg {
	width:100%;
	height:auto;
}
#footer .toggle-logs svg {
	width:116%;
	margin-left:-8%;
	height:auto;
	margin-top:-2px;
	transition:all .4s;
}
#footer .toggle-logs svg path,
#footer .rules svg path {
	fill:#FFF;
	transition:all .3s;
}
#footer .toggle-logs:hover svg path,
#footer .rules:hover svg path {
	fill:#000;
}
body.show-footer #footer {
	bottom:0;
}
body.show-footer #footer .toggle-logs {
	top:-34px;
}
body.show-footer #footer .toggle-logs svg {
	transform:rotate(180deg);
}
body.show-footer #footer .rules {
	top:-77px;
}
#footer .roundlog {
	position:absolute;
	bottom:0;
	height:120px;
	width:450px;
	padding:5px 8px 5px 25px;
	text-transform:uppercase;
	font-size:14px;
	text-align:left;
}
#footer .roundlog .label {
	transform: rotate(-90deg);
    transform-origin: center center;
    float: left;
    position: absolute;
    top: 51px;
    text-align: center;
    left: -51px;
    width: 120px;
    height: 17px;
    font-size:13px;
    color:#FFF;
}
#footer .roundlog-text {
	overflow:auto;
	position:absolute;
	top:0;
	padding-top:15px;
	height:120px;
	width:423px;
}
#footer .roundlog.buildlog {
	left:0;
}
#footer .roundlog.battlelog {
	left:449px;
}
#footer .copyright {
	font-size:11px;
	text-align:right;
	position:absolute;
	right:0;
	bottom:0;
	height:80px;
	width:130px;
	padding:5px 8px 5px 8px;
	color:#a4eeff;
}
#footer a.buy-game {
	display:block;
	padding-bottom:5px;
	color:#18f183;
	font-size:15px;
	font-weight:bold;
}
#footer a.buy-game {
	padding-bottom:7px;
}
#footer a.buy-game:hover {
	color:#FFF;
}
.inner {
	margin:0px auto;
	width:100%;
	height:100%;
	position:relative;
}
.playfield {
	margin:20px auto;
	text-align:center;
}
.playfield .card {
	width:200px;
	height:266px;
}
.action-alert {
	position:fixed;
	z-index:999999999;
	width:250px;
	text-align:center;
	height:auto;
	font-size:40px;
	font-weight:bold;
	line-height:40px;
	color:#FFF;
	text-shadow: 4px 4px #000;
	opacity:1;
	/*transform:scale(0);*/
	/*animation: actionalert 4s ease-in-out 0s 1;*/
	pointer-events:none;
}
.action-alert.huge {
	font-size:80px;
	line-height:74px;
	color:#FFF;
	text-shadow: 2px 2px #FF393D, 6px 6px #000, 8px 8px 15px #FF393D, 8px 8px 35px #FF393D, 8px 8px 55px #FF393D;
}
.action-alert.small {
	font-size:18px;
	line-height:18px;
	width:130px;
	margin-left:-30px;
	text-shadow: 2px 2px #000;
}
@keyframes actionalert {
	0% {opacity:1;margin-top:50px;transform:scale(0);}
	5%, 15% {opacity:1;margin-top:30px;transform:scale(1.3);}
	100% {opacity:0;margin-top:-10px;transform:scale(1.2);}
}


/* players */

.overlay-emp {
	top:-200vh;
	position:absolute;
	opacity:0;
	left:0;
	width:100%;
	height:100%;
	z-index:999;
	background:rgba(0,0,0,.9);
	transition:opacity 1.5s ease-out;
}
.overlay-emp a.pulse-button {
	position:absolute;
	z-index:9;
	top:50%;
	left:50%;
	margin-left:-50px;
	margin-top:-50px;
}
body.emp .overlay-emp {
	top:0;
	opacity:1;
}
.players {
	transition:all .3s;
	position:relative;
	height:100%;
}
.player {
	height:100%;
	overflow:hidden;
	position:relative;
	border-right:1px solid rgba(24,231,131,.2);
	float:left;
	text-align:center;
}
.player:last-child {
	border-right:none;
}
.player-inner {	
	position:relative;
	overflow:auto;
	height:100%;
	padding-bottom:160px;
	padding-top:30px;
}
.player-name {
	position:fixed;
	top:49px;
	z-index:9;
	text-align:center;
}
.player-name span {
	padding:3px 5px;
	display:inline-block;
	text-shadow:2px 2px #000, 0 0 10px #000;
}
.player.myturn .player-name span {
	background:rgba(24,231,131,.8);
	color:#FFF;
}
.dealer-button {
	opacity:0;
	z-index:9;
	transition:all .3s;
	position:fixed;
	top:55px;
	margin-left:8px;
	font-weight:700;
	font-size:12px;
	text-align:center;
	background:deeppink;
	color:#FFF;
	border-radius:3px;
	padding:2px 5px;
	box-shadow: 2px 2px 0 rgba(0,0,0,1);
}
.player.dealer .dealer-button {
	opacity:1;
}
.player .points {
	position:absolute;
	top:0;
	right:10px;
	font-size: 25px;
    line-height: 26px;
    font-weight: 900;
    padding: 0 12px;
	text-shadow: 2px 2px #FF393D;
}
.playercards {
	width:calc(100% - 1px);
	padding:7px 7px;
	position:relative;
	text-align:left;
}
.dice-results {
	position:absolute;
	width:100%;
	left:0;
	bottom:-200px;
	height:200px;
	z-index:9;
	transition:all .3s;
	border-top:1px solid rgba(24,231,131,.2);
	background:rgba(0,0,0,.6);
	padding:10px 10px;
	overflow:auto;
}
.dice-results.shown {
	bottom:57px;
}
.dice-results h4 {
	font-size:20px;
	margin-bottom:10px;
}
.dice-results .melee-attack {
	width:50%;
	float:left;
	text-align:left;
	padding-left:10px;
}
.dice-results .melee-defend {
	width:50%;
	float:right;
	text-align:right;
	padding-right:10px;
}
.dice-results .card-wrapper {
	width:100%;
}
.dice-results .attack-card,
.dice-results .defend-card {
    margin-bottom: 5px;
    padding: 5px;
    border: 1px solid rgba(255,255,255,.5);
    display: inline-block;
    min-height: 52px;
    min-width: 52px;
}
.dice-results .die {
	width:36px;
	height:36px;
	float:left;
	margin:2px 2px;
	background-size:cover!important;
	opacity:.3;
}
.dice-results .die.die-used {
	opacity:1;
}
.dice-results .melee-defend .die {
	float:right;
}
.dice-results .die0 {
	background:url('./images/die0.svg') no-repeat 0 0;
}
.dice-results .die1 {
	background:url('./images/die1.svg') no-repeat 0 0;
}
.dice-results .die2 {
	background:url('./images/die2.svg') no-repeat 0 0;
}
.dice-results .die3 {
	background:url('./images/die3.svg') no-repeat 0 0;
}
.dice-results .die4 {
	background:url('./images/die4.svg') no-repeat 0 0;
}
.dice-results .die5 {
	background:url('./images/die5.svg') no-repeat 0 0;
}
.dice-results .die6 {
	background:url('./images/die6.svg') no-repeat 0 0;
}


/* cards */

.card {
	width:70px;
	height:93px;
	text-align:center;
	padding:8px 2px 0 2px;
	margin:2px;
	opacity:1;
	display:inline-block;
	position:relative;
	top:0;
	font-size:13px;
	line-height:13px;
	color:#FFF;
	font-weight:300;
	vertical-align:top;
	transition:all .3s;
	border:1px solid transparent;
	background-size:cover;
	background-repeat:no-repeat;
	background-position:0 0;
}
.card span.darken {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	display:block;
	background:rgba(0,0,0,.7);
	opacity:0;
	transition:all .3s;
}
.card.earthquake span.darken {
	opacity:0!important;
}
.card .drawnby {
	position:absolute;
	z-index:3;
	top:0;
	left:0;
	height:100%;
	width:100%;
	display:block;
	text-align:center;
	background:rgba(0,0,0,.9);
	padding-top:115px;
}
.card .drawnby span {
	font-size:13px;
	color:#FFF;
	background:#000;
	display:inline-block;
	padding:7px 11px;
	border:1px solid rgba(19, 104, 187, 1);
	border-radius:3px;
}
.card.clickable {
	cursor:url('./images/cursor-clickable.png') 16 16, auto;
}
.upgrade-slot.clickable {
	cursor:url('./images/cursor-clickable.png') 16 16, auto;
	border:1px solid #FFF !important;
}
.upgrade-slot .card.primed {
	border:1px solid #FFF;
}
.card.selected {
	border:1px solid #FFF;
}
.card.swap {
	border:1px solid #FFF;
}
.card.clickable:not(.expended):not(.drawn):hover {
	border:1px solid #FFF;
}
.card.drawn {
	cursor:not-allowed!important;
}
.card.mechanizing {
	border:1px solid #FFF;
}
.card.using-mechanic {
	border: 1px solid rgba(41,136,255,1);
    box-shadow: 0 0 10px rgba(41,136,255,.2), 0 0 30px rgba(41,136,255,.6), 0 0 10px rgba(41,136,255,.2);
}
.card.using-mechanic span.darken {
	opacity:1;
	background:rgba(41,136,255,.5);
}
.card.using-mechanic span.darken:before {
	background: rgba(0,0,0,1);
    padding: 7px 11px;
    display: inline-block;
    margin-top: 53px;
    border: 1px solid rgba(41,136,255,1);
    border-radius: 3px;
    content: '+1';
    font-weight:900;
    font-size:20px;
}
.player .card.powerup {
	
}
.player .card.powerup span.darken {
	opacity:1;
}
.player .card.powerup.active {
	border: 1px solid rgba(255,132,41,1);
    box-shadow: 0 0 20px rgba(255,132,41,.4), 0 0 40px rgba(255,132,41,.6), 0 0 20px rgba(255,132,41,.4);
}
.player .card.powerup.active span.darken,
.player .card.powerup.brown_out.selected span.darken,
.player .card.powerup.after_shock.selected span.darken,
.player .card.selected span.darken {
	opacity:0;
}
.player .card.powerup.deactivated span.darken {
	opacity:1;
	background: rgba(255,0,0,.4);
    border: 1px solid rgba(255,0,0,.8);
    box-shadow: 0 0 20px rgba(255,0,0,.3), 0 0 40px rgba(255,0,0,.5), 0 0 20px rgba(255,0,0,.3);
}
.player .card.powerup.deactivated {
	transform: scale(.95) rotate(-11deg);
}
.player .card.trap {
	
}
.player .card.trap.active {
	
}
.playercards .topcards {
	margin-bottom:10px;
}
.playercards .topcards .card {
	margin:0 1px 2px 1px;
	float:right;
}
.playercards .topcards .ammo-slot, 
.playercards .topcards .reserve-slot {
	position:relative;
	float:left;
	width:70px;
	height:93px;
	margin:0 1px 2px 1px;
	padding-top:36px;
	font-size:12px;
	text-align:center;
	color:#FFF;
}
.playercards .topcards .ammo-slot {
	background:rgba(244,52,255,.1);
	border:1px solid rgba(244,52,255,.6);
}
.playercards .topcards .reserve-slot {
	background:rgba(41,136,255,.1);
	border:1px solid rgba(41,136,255,.6);
}
.playercards .topcards .ammo-slot .card,
.playercards .topcards .reserve-slot .card {
	position:absolute;
	top:-2px;
	left:-2px;
	width:72px;
	height:95px;
	float:none;
	margin:0;
}
.playercards .topcards .card.clickable:not(.active) span.darken {
	animation: pulsewhite 1.5s infinite;
	background-color: rgba(0,0,0,.7);
	opacity:1;
}
.playercards .topcards .card.clickable:hover span.darken {
	
}
@keyframes pulsewhite {
	0%, 100% { opacity:1; }
	50% { opacity:.5; }
}

/* lizards */

.lizard-card-image {
	position: relative;
    top: -5px;
    left: 0;
    z-index: 99;
    width: 100%;
    height: 100%;
}
.playercards .card.lizard {
	height:240px;
	width:180px;
	margin:160px 123px 150px 0;
}
.playercards .card.lizard > span.darken:before {
	background: #000;
	border:1px solid ;
    padding: 7px 11px;
    display: inline-block;
    margin-top: 110px;
    border:1px solid rgba(19, 104, 187, 1);
    border-radius: 3px;
}
.playercards .card.lizard.used,
.playercards .card.lizard.skipped {
	transform: rotate(-15deg);
}
.playercards .card.lizard.stunned {
	border:1px solid rgba(255,0,0,.9);
	box-shadow: 0 0 20px rgba(255,0,0,.4), 0 0 100px rgba(255,0,0,.6), 0 0 20px rgba(255,0,0,.4);
}
.playercards .card.lizard.cloaked:not(.used) {
	border:1px dashed rgba(255,255,255,.3);
}

.playercards .card.lizard.skipped > span.darken,
.playercards .card.lizard.cloaked > span.darken,
.playercards .card.lizard.stunned > span.darken,
.playercards .card.lizard.attacking > span.darken,
.playercards .card.lizard.revived > span.darken {
	opacity:1;
	background:rgba(0,0,0,.9);
}
.playercards .card.lizard.used > span.darken {
	opacity:1;
	background:transparent;
}
.playercards .card.lizard.stunned > span.darken {
	opacity:1;
	background:rgba(255,0,0,.6);
}
.playercards .card.lizard.attacking > span.darken {
	opacity:1;
	background:rgba(24,241,131,.4);
}
.playercards .card.lizard.revived:not(.used):not(.stunned) > span.darken {
	opacity:1;
	background:rgba(255,132,41,.5);
}
.playercards .card.lizard.revived.attacking:not(.used):not(.stunned) > span.darken {
	opacity:1;
	background:linear-gradient(140deg, rgba(255,132,41,.5) 0%, rgba(24,241,131,.4) 100%);
}
.playercards .card.lizard.skipped > span.darken:before {
	content: 'Skipped';
}
.playercards .card.lizard.cloaked > span.darken:before {
	content: 'Cloaked';
	border:1px dashed rgba(255,255,255,.3);
}
.playercards .card.lizard.used:not(.stunned) > span.darken:before {
	content: 'Used';
	box-shadow: 0px 0px 40px 30px rgb(19 104 187);
}
.playercards .card.lizard.stunned > span.darken:before {
	content: 'Stunned';
	border:1px solid red;
}
.playercards .card.lizard.attacking > span.darken:before {
	content: 'Ready';
	border:1px solid rgba(24,241,131,1);
}
.playercards .card.lizard.revived:not(.used):not(.stunned) > span.darken:before {
	content: 'Revived';
	border:1px solid rgba(255,132,41,1);
}
.playercards .card.lizard.revived.attacking:not(.used):not(.stunned) > span.darken:before {
	content: 'Revived & Ready';
	border:1px solid rgba(255,132,41,1);
}

.playercards .card.lizard.attacking {
	border-color:rgba(24,241,131,1);
	box-shadow: 0 0 20px rgba(24,241,131,.6), 0 0 100px rgba(24,241,131,1), 0 0 20px rgba(24,241,131,.6);
}
.playercards .card.lizard.revived:not(.used):not(.stunned) {
	border-color:rgba(255,132,41,1);
	box-shadow: 0 0 10px rgba(255,132,41,.6), 0 0 40px rgba(255,132,41,.6), 0 0 10px rgba(255,132,41,.6);
}
.playercards .card.lizard.attacking.revived:not(.used):not(.stunned)  {
	border-color:rgba(24,241,131,1);
}

.upgrade-slot {
	display:none;
}
.playercards .upgrade-group {
	position:absolute;
}
.playercards .upgrade-group-attack {
	top:-165px;
	left:-7px;
}
.playercards .upgrade-group-defense {
	left:205px;
	top:-10px;
}
.playercards .upgrade-group-speed {
	bottom:-157px;
	left:-7px;
}
.playercards .card.lizard .upgrade-slot {
	width:105px;
	height:140px;
	position:absolute;
	padding:60px 10px 0;
	display:inline-block;
	vertical-align:top;
	font-size:12px;
	text-align:center;
	color:#FFF;
	text-indent:-99999px;
}
.playercards .card.lizard .upgrade-slot:nth-child(1) {
	z-index:7;
	left:103px;
	text-indent:0px;
}
.playercards .card.lizard .upgrade-slot:nth-child(2) {
	z-index:6;
	left:82px;
}
.playercards .card.lizard .upgrade-slot:nth-child(3) {
	z-index:5;
	left:61px;
}
.playercards .card.lizard .upgrade-slot:nth-child(4) {
	z-index:4;
	left:40px;
}
.playercards .card.lizard .upgrade-slot:nth-child(5) {
	z-index:3;
	left:19px;
}
.playercards .card.lizard .upgrade-slot:nth-child(6) {
	z-index:2;
	left:-1px;
}

.playercards .card.lizard .attack-slot:nth-child(1) {
	top:45px;
}
.playercards .card.lizard .attack-slot:nth-child(2) {
	top:38px;
}
.playercards .card.lizard .attack-slot:nth-child(3) {
	top:31px;
}
.playercards .card.lizard .attack-slot:nth-child(4) {
	top:24px;
}
.playercards .card.lizard .attack-slot:nth-child(5) {
	top:17px;
}
.playercards .card.lizard .attack-slot:nth-child(6) {
	top:10px;
}
.playercards .card.lizard .attack-slot:nth-child(7) {
	top:3px;
}
.playercards .card.lizard .defense-slot:nth-child(1) {
	top:92px;
	left:-32px;
}
.playercards .card.lizard .defense-slot:nth-child(2) {
	top:71px;
	left:-25px;
}
.playercards .card.lizard .defense-slot:nth-child(3) {
	top:50px;
	left:-18px;
}
.playercards .card.lizard .defense-slot:nth-child(4) {
	top:29px;
	left:-11px;
}
.playercards .card.lizard .defense-slot:nth-child(5) {
	top:8px;
	left:-4px;
}
.playercards .card.lizard .defense-slot:nth-child(6) {
	top:-13px;
	left:3px;
}
.playercards .card.lizard .defense-slot:nth-child(7) {
	top:-34px;
	left:10px;
}
.playercards .card.lizard .speed-slot:nth-child(1) {
	bottom:30px;
}
.playercards .card.lizard .speed-slot:nth-child(2) {
	bottom:23px;
}
.playercards .card.lizard .speed-slot:nth-child(3) {
	bottom:16px;
}
.playercards .card.lizard .speed-slot:nth-child(4) {
	bottom:9px;
}
.playercards .card.lizard .speed-slot:nth-child(5) {
	bottom:2px;
}
.playercards .card.lizard .speed-slot:nth-child(6) {
	bottom:-5px;
}
.playercards .card.lizard .speed-slot:nth-child(7) {
	bottom:-12px;
}

.playercards .card.lizard .attack-slot {
	border:1px solid rgba(255,57,61,.6);
	background:rgba(138,29,31,.2);
	transition:all .3s;
}
.playercards .card.lizard .defense-slot {
	border:1px solid rgba(255,218,47,.6);
	background:rgba(184,158,39,.2);
	transition:all .3s;
}
.playercards .card.lizard .speed-slot {
	border:1px solid rgba(56,187,61,.6);
	background:rgba(45,124,48,.2);
	transition:all .3s;
}
.playercards .card.lizard .attack-slot.upgrading,
.playercards .card.lizard .defense-slot.upgrading,
.playercards .card.lizard .speed-slot.upgrading,
.playercards .card.lizard .attack-slot.upgrading .card,
.playercards .card.lizard .defense-slot.upgrading .card,
.playercards .card.lizard .speed-slot.upgrading .card,
.playercards .card.lizard.cloaking {
	border:1px solid #FFF;
}
.playercards .card.lizard .attack-slot.upgrading:hover,
.playercards .card.lizard .attack-slot .card.primed:not(.selected):hover,
.playercards .card.lizard .attack-slot.clickable:hover {
	border:1px solid rgba(255,57,61,1);
	background:rgba(138,29,31,.6);
}
.playercards .card.lizard .defense-slot.upgrading:hover,
.playercards .card.lizard .defense-slot .card.primed:not(.selected):hover,
.playercards .card.lizard .defense-slot.clickable:hover {
	border:1px solid rgba(255,218,47,1);
	background:rgba(184,158,39,.6);
}
.playercards .card.lizard .speed-slot.upgrading:hover,
.playercards .card.lizard .speed-slot .card.primed:not(.selected):hover,
.playercards .card.lizard .speed-slot.clickable:hover {
	border:1px solid rgba(56,187,61,1);
	background:rgba(45,124,48,.6);
}
.playercards .card.lizard .upgrade-slot .card {
	width:107px;
	height:142px;
	margin:0;
	padding:0;
	position:absolute;
	top:-2px;
	left:-2px;
}
.player.npc .lizard.clickable {
	cursor:url('./images/cursor-attack.png') 16 16, auto;
}


/* card images */

/* keep lizards first so they can get overridden later */
.card.gila_monster, .tooltip-image.gila_monster {
	background-image:url('./images/Gila Monster.svg');
}
.card.iguana, .tooltip-image.iguana {
	background-image:url('./images/Iguana.svg');
}
.card.gecko, .tooltip-image.gecko {
	background-image:url('./images/Gecko.svg');
}
.card.tree_crocodile, .tooltip-image.tree_crocodile {
	background-image:url('./images/Tree Crocodile.svg');
}
.card.nile_monitor, .tooltip-image.nile_monitor {
	background-image:url('./images/Nile Monitor.svg');
}
.card.komodo_dragon, .tooltip-image.komodo_dragon {
	background-image:url('./images/Komodo Dragon.svg');
}
.card.chameleon, .tooltip-image.chameleon{
	background-image:url('./images/Chameleon.svg');
}

.card.energy_1, .tooltip-image.energy_1{
	background-image:url('./images/Energy I.svg');
}
.card.energy_2, .tooltip-image.energy_2 {
	background-image:url('./images/Energy II.svg');
}
.card.energy_3, .tooltip-image.energy_3 {
	background-image:url('./images/Energy III.svg');
}
.card.shield_1, .tooltip-image.shield_1 {
	background-image:url('./images/Shield I.svg');
}
.card.shield_2, .tooltip-image.shield_2 {
	background-image:url('./images/Shield II.svg');
}
.card.shield_3, .tooltip-image.shield_3 {
	background-image:url('./images/Shield III.svg');
}
.card.laser_1, .tooltip-image.laser_1 {
	background-image:url('./images/Laser I.svg');
}
.card.laser_2, .tooltip-image.laser_2 {
	background-image:url('./images/Laser II.svg');
}
.card.laser_3, .tooltip-image.laser_3 {
	background-image:url('./images/Laser III.svg');
}
.card.booster_1, .tooltip-image.booster_1 {
	background-image:url('./images/Booster I.svg');
}
.card.booster_2, .tooltip-image.booster_2 {
	background-image:url('./images/Booster II.svg');
}
.card.booster_3, .tooltip-image.booster_3 {
	background-image:url('./images/Booster III.svg');
}

.card.nerf, .tooltip-image.nerf {
	background-image:url('./images/Nerf.svg');
}
.card.turbo, .tooltip-image.turbo {
	background-image:url('./images/Turbo.svg');
}
.card.black_out, .tooltip-image.black_out {
	background-image:url('./images/Black Out.svg');
}
.card.auto_emp, .tooltip-image.auto_emp {
	background-image:url('./images/Auto EMP.svg');
}
.card.earthquake, .tooltip-image.earthquake {
	background-image:url('./images/Earthquake.svg');
}
.card.frenzy, .tooltip-image.frenzy {
	background-image:url('./images/Frenzy.svg');
}
.card.brown_out, .tooltip-image.brown_out {
	background-image:url('./images/Brown Out.svg');
}
.card.after_shock, .tooltip-image.after_shock {
	background-image:url('./images/After Shock.svg');
}
.card.maximum_power, .tooltip-image.maximum_power {
	background-image:url('./images/Maximum Power.svg');
}
.card.sticky_fingers, .tooltip-image.sticky_fingers {
	background-image:url('./images/Sticky Fingers.svg');
}
.card.multishot, .tooltip-image.multishot {
	background-image:url('./images/Multishot.svg');
}
.card.mechanic, .tooltip-image.mechanic {
	background-image:url('./images/Mechanic.svg');
}
.card.force_field, .tooltip-image.force_field {
	background-image:url('./images/Force Field.svg');
}
.card.overdrive, .tooltip-image.overdrive {
	background-image:url('./images/Overdrive.svg');
}
.card.super_scope, .tooltip-image.super_scope {
	background-image:url('./images/Super Scope.svg');
}
.card.nuclear_reactor, .tooltip-image.nuclear_reactor {
	background-image:url('./images/Nuclear Reactor.svg');
}
.card.mechanic, .tooltip-image.mechanic {
	background-image:url('./images/Mechanic.svg');
}
.card.emp, .tooltip-image.emp {
	background-image:url('./images/EMP.svg');
}
.card.fatality, .tooltip-image.fatality {
	background-image:url('./images/Fatality.svg');
}
.card.resilience, .tooltip-image.resilience {
	background-image:url('./images/Resilience.svg');
}
.card.cloaking_device, .tooltip-image.cloaking_device {
	background-image:url('./images/Cloaking Device.svg');
}
.card.upgrade_slot, .tooltip-image.upgrade_slot {
	background-image:url('./images/Upgrade Slot.svg');
}


/* debug */

.gameinfo {
	display:none;
	position:fixed;
	z-index:99999;
	top:0;
	bottom:0;
	left:-300px;
	width:300px;
	height:100vh;
	overflow:auto;
	transition:all .3s;
	scrollbar-color: #193c61 #031727;
}
::-webkit-scrollbar {
    height: 10px;
    width: 10px;
    background: #031727;
}

::-webkit-scrollbar-thumb {
    background: #193c61;
    -webkit-border-radius: 1ex;
    -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
}

::-webkit-scrollbar-corner {
    background: #031727;
}
/*.gameinfo::-webkit-scrollbar { width: 0 !important }
.gameinfo { overflow: -moz-scrollbars-none; }
.gameinfo { -ms-overflow-style: none; }*/
.gameinfo.open {
	left:0;
}
.gameinfo-background {
	position:fixed;
	z-index:99999;
	background:rgba(0,0,0,.85);
	border-right:1px solid #222;
	width:300px;
	height:100%;
	top:0;
	left:-300px;
	transition:all .3s;
}
.gameinfo-background.open {
	left:0;
}
.gameinfo .gameinfo-panel {
	position:absolute;
	z-index:2;
	transition:all .3s;
	width:290px;
	height:100%;
	font-size:13px;
	font-weight:300;
	text-align:left;
	color:rgba(255,36,96,1);
}
.gameinfo .toggle-button {
	position:fixed;
	overflow:hidden;
	width:30px;
	height:100px;
	background:rgba(0,0,0,.9);
	border:1px solid #222;
	border-top:none;
	left:-1px;
	color:rgba(255,36,96,1);;
	padding:5px 10px;
	text-align:center;
	text-transform:uppercase;
	transition:all .3s;
}
.gameinfo .toggle-button div {
	transform: rotate(-90deg);
	transform-origin: center center;
	float: left;
    position: relative;
    top: -5px;
    left: 0%;
    margin-left: -4px;
    width: 100px;
    height: 100px;
}
.gameinfo .toggle-button:hover {
	color:#FFF;
}
.gameinfo .gameinfo-panel-inner {
	opacity:0;
	width:290px;
	min-height:100%;
	padding:10px 0 10px 10px;
	transition:all .3s;
}
.gameinfo.open .toggle-button {
	left:299px;
}
.gameinfo .gameinfo-panel.open .gameinfo-panel-inner {
	opacity:1;
}
.gameinfo .gameinfo-panel.open .toggle-button {
	border-left-color:#000;
	color:#FFF;
}
.cards-wrapper .toggle-button {
	top:100px;
}
.game-object-wrapper .toggle-button {
	top:200px;
}
.transactions-wrapper .toggle-button {
	top:300px;
}
.build-activity-wrapper .toggle-button {
	top:400px;
}
.battle-activity-wrapper .toggle-button {
	top:500px;
}
body.activity-log .gameinfo {
	display:block;
}


/* custom switches */
label > * {
  transform: translateZ(0) scale(1, 1);
}
.switch > * {
  cursor:url('./images/cursor-target.png') 16 16, auto;
}
.switch {
  position: absolute;
  top: 30px;
  left: 10px;
  width: 70px;
  height: 40px;
  background: #063040;
  box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 1);
  border-radius: 40px;
}
.switch .toggle--handler {
  background: linear-gradient(to bottom, rgba(24,241,131,1), rgba(20,189,103,1));
  width: 28px;
  height: 28px;
  display: block;
  box-shadow: 0px 0 24px rgba(24,241,131,.5);
  border-radius: 28px;
  margin: 6px;
  position: relative;
  z-index: 2;
  /*transition: all 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);*/
  transition: all 200ms ease-in-out;
  transform: translateX(30px);
}
.switch.disabled .toggle--handler {
	cursor:not-allowed!important;
}
.switch .toggle--handler:after {
  content: "";
  position: absolute;
  border-radius: 28px;
  background: linear-gradient(to bottom, rgba(15,117,156,1), rgba(11,92,123,1));
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: all 200ms;
}
.switch .toggle--handler:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  border-radius: 60px;
  background-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>assets/icons/cross</title><g fill="none" fill-rule="evenodd"><path d="M0 0h24v24H0z"/><path d="M0 0h24v24H0z"/><path d="M13.414 11.96l6.546-6.546L18.545 4 12 10.545 5.455 4 4.04 5.414l6.546 6.546-6.89 6.89 1.414 1.413 6.89-6.89 6.89 6.89 1.414-1.414-6.89-6.89z" fill="#FFF"/></g></svg>');
  transition: all 200ms;
  transform: translate(-50%, -50%) rotate(180deg);
}
.switch:after {
  content: "";
  position: absolute;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 36px;
  height: 2px;
  background: rgba(11,89,119,.3);
  pointer-events: none;
}
.switch input {
  position: absolute;
  left: -999em;
}
.switch input:checked + .toggle .toggle--handler {
  transform: translateX(0);
  background: linear-gradient(to bottom, rgba(15,117,156,1), rgba(11,92,123,1));
  box-shadow:none;
}
.switch input:checked + .toggle .toggle--handler:after {
  opacity: 1;
}
.switch input:checked + .toggle .toggle--handler:before {
  background-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>assets/icons/cross copy</title><g fill="none" fill-rule="evenodd"><path d="M0 0h24v24H0z"/><path d="M0 0h24v24H0z"/><path fill="#FFF" d="M8.293 16.707l.707.707.707-.707 11-11-1.414-1.414-11 11h1.414l-4-4-1.414 1.414z"/></g></svg>');
  z-index: 5;
  transform: translate(-50%, -50%) rotate(0deg);
}
.debug .switch .toggle--handler {
	background:linear-gradient(to bottom, rgba(241,24,94,1), rgba(191,15,62,1));
	box-shadow:0px 0 24px rgba(241, 24, 103, 0.73);
}



/**
 * PowerTip
 * https://stevenbenner.github.io/jquery-powertip/
 *
 * Stylesheet for the dark monochrome theme.
 */

#powerTip {
	cursor:url('./images/cursor-target.png') 16 16, auto;
	background-color: #424242;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 2px 1px rgba(255, 255, 255, 0.2) inset, 0 -2px 2px #323232 inset;
	border: 1px solid #000000;
	border-radius: 6px;
	color: #ffffff;
	display: none;
	padding: 10px;
	position: absolute;
	white-space: nowrap;
	z-index: 2147483647;
}
#powerTip.noborder {
	box-shadow:none;
	border:none;
	border-radius:none;
	padding:0;
}
#powerTip:before {
	content: attr(class) " ";
	position: absolute;
	height: 0;
	width: 0;
	text-indent: 100%;
	overflow: hidden;
}
#powerTip.n:before, #powerTip.s:before {
	border-right: 5px solid transparent;
	border-left: 5px solid transparent;
	left: 50%;
	margin-left: -5px;
}
#powerTip.e:before, #powerTip.w:before {
	border-bottom: 5px solid transparent;
	border-top: 5px solid transparent;
	margin-top: -5px;
	top: 50%;
}
#powerTip.n:before,
#powerTip.ne:before, #powerTip.nw:before {
	bottom: -10px;
}
#powerTip.n:before,
#powerTip.ne:before, #powerTip.nw:before ,
#powerTip.nw-alt:before, #powerTip.ne-alt:before {
	border-top-color: inherit;
	border-top-style: solid;
	border-top-width: 10px;
}
#powerTip.e:before {
	border-right-color: inherit;
	border-right-style: solid;
	border-right-width: 10px;
	left: -10px;
}
#powerTip.s:before,
#powerTip.se:before, #powerTip.sw:before {
	top: -10px;
}
#powerTip.s:before,
#powerTip.se:before, #powerTip.sw:before ,
#powerTip.sw-alt:before, #powerTip.se-alt:before {
	border-bottom-color: inherit;
	border-bottom-style: solid;
	border-bottom-width: 10px;
}
#powerTip.w:before {
	border-left-color: inherit;
	border-left-style: solid;
	border-left-width: 10px;
	right: -10px;
}
#powerTip.ne:before, #powerTip.se:before {
	border-right: 10px solid transparent;
	border-left: 0;
	left: 10px;
}
#powerTip.nw:before, #powerTip.sw:before {
	border-left: 10px solid transparent;
	border-right: 0;
	right: 10px;
}
#powerTip.nw-alt:before, #powerTip.ne-alt:before,
#powerTip.sw-alt:before, #powerTip.se-alt:before {
	bottom: -10px;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	left: 10px;
}
#powerTip.ne-alt:before {
	left: auto;
	right: 10px;
}
#powerTip.sw-alt:before, #powerTip.se-alt:before {
	border-top: none;
	bottom: auto;
	top: -10px;
}
#powerTip.se-alt:before {
	left: auto;
	right: 10px;
}