/*
	style.css
*/
body {
	font-family: arial, sans-serif;
}

#page {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}
#menu {
	position: relative;
	width: fit-content;
	border: 1px solid pink;
	float: right;
}
#menuactivator {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	top: 1rem;
	right: 20rem;
	border: 1px solid #aaa;
  font-family: "Black Ops One", system-ui;
  font-weight: 400;
  font-style: normal;
	font-size: 2rem;
	background-color: #111;
	color: #fff;
	cursor: pointer;
	border-radius: 8px;
	box-shadow: 4px 4px 12px #999;
	
}
#menucontent {
	display: none;
}

.menutoggle {
	display: block !important;
	background: #abc;
	padding: 1rem;
	color: #333;
}

#pageTitle {
  font-family: "Black Ops One", system-ui;
  font-weight: 400;
  font-style: normal;
	font-size: 2rem;
}
#gameinfo, #debug {
	max-width: calc(40rem + 0px);
	border: 1px solid #ccc;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem;

}

#minecounterWrapper {
	
  font-family: "Black Ops One", system-ui;
  font-weight: 400;
  font-style: normal;
	font-size: 2rem;
  text-align: center;
	width: 40rem;
}
#debug {
	margin: 1rem 0;
	background: #eee;
}
#grid {
	position: relative;
	width: fit-content;
}

#grid-overlay {
	position: absolute;
	inset: 0;
	scale: 100%;
	z-index: 10;
	background: rgba(0,0,0,0.7);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-weight: bold;
	font-size: 8rem;
}

.gridrow {
	display: flex;
}
.gridSquare {
	font-family: courier, monospace;
	display: flex;
	height: 2rem;
	width: 2rem;
	border: 1px solid #aaf;
	margin: 0;
	cursor: pointer;
	align-items: center;
	justify-content: center
	
}

.unopened {
	background-color: #aaccff;
	font-size:0;
}

.opened {
	background-color: #fff;
	font-size: 1rem;
}

.identified {
	background-color: #f99;
}

.color0 {
	color: #fff;
}
.color1 {
	color: #000;
}

.color2 {
	color: #4926f7;
}

.color3 {
	color: #b226f7;
}

.color4 {
	color: #f924f2;
}

.color5 {
	color: #fe20bb;
}

.color6 {
	color: #fb2388;
}

.color7 {
	color: #fe2048;
}
.color8 {
	color: #fe2f20;
}

@keyframes explode {
  0%   { background: #000;    opacity: 0.3 }
  5%   { background: #fff700; scale: 1.05 }
  15%  { background: #ff9500; scale: 1.15 }
  25%  { background: #ff4500; scale: 1.20 }
  35%  { background: #cc0000; scale: 1.18 }
  55%  { background: #ff2200; scale: 1.08 }
  80%  { background: #441100; scale: 1.01 }
  100% { background: #fff;    scale: 1.00 }
}

.exploding {
  animation: explode 0.8s ease-out forwards;
}

.success {
	background-color: darkgreen;
}
.miss {
	background-color: blue;
}

.fail {
	background-color: darkred;
}


    @keyframes win-bg {
      0%   { background-color: transparent; transform: scale(1); }
      10%  { background-color: #c0dd97;     transform: scale(1.08); }
      25%  { background-color: #63991f;     transform: scale(1.12); }
      50%  { background-color: #97c459;     transform: scale(1.08); }
      75%  { background-color: #c0dd97;     transform: scale(1.03); }
      100% { background-color: transparent; transform: scale(1); }
    }

    @keyframes win-particles-fade {
      0%   { opacity: 1; }
      100% { opacity: 0; }
    }

    .win {
      animation: win-bg 0.9s ease-out forwards;
      position: relative; /* needed so the canvas can be positioned inside */
    }
	
#checkgame {
	visibility: hidden;
	margin: 1rem;
	background-color: #22ff22;
	padding: 1rem;
	border-radius: 1rem;
	cursor:pointer;
}

#checkgame:hover {
	text-shadow: -1px 1px 5px #990;
	background-color: #00aa00;
}

@keyframes newlevel {
	0% 	{ scale: 200%; }
	30%	{ scale: 100%; }
	70% { scale: 100%; }
	100%{ scale: 0%; }
}

.startlevel {
	animation: newlevel 3s;
}