body {
  touch-action: manipulation;
}
@font-face {
  font-family: "LCD";
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/lcda.ttf) format('truetype');
}
#minesweeper {
  position: relative;
  box-sizing: content-box;
  margin: 10px auto;
  padding-right: 22px;
  background: linear-gradient(to bottom, #ece9d8 0%, #ece9d8 24px, #c0c0c0 25px, #c0c0c0 100%);
}
#minesweeper * {
  box-sizing: content-box;
}
#minesweeper::before {
  content: '';
  position: absolute;
  left: -3px;
  top: -4px;
  width: calc(100% + 6px);
  height: calc(100% + 8px);
  border-radius: 4px;
  background: radial-gradient(ellipse at center, #166aee 0%, #53cbf1 50%, #166aee 100%);
  z-index: -1;
}
#minesweeper div.menu {
  display: inline;
  position: relative;
}
#minesweeper div.menu span {
  line-height: 24px;
  font-size: 16px;
  padding: 3px 9px;
  -webkit-user-select: none;
  cursor: default;
}
#minesweeper div.menu span:hover {
  background-color: #316ac5;
  color: white;
}
#minesweeper div.menu span.on {
  background-color: #316ac5;
  color: white;
}
#minesweeper div.menu ul {
  display: none;
  position: absolute;
  top: 5px;
  padding: 2px;
  border: 1px solid #aca899;
  background-color: white;
  z-index: 2;
}
#minesweeper div.menu ul li {
  list-style: none;
  width: 75px;
  padding-left: 30px;
  line-height: 24px;
  cursor: default;
}
#minesweeper div.menu ul li:hover {
  background-color: #316ac5;
  color: white;
}
#minesweeper div.menu ul li.current::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  margin-left: -24px;
  background-size: 20px 20px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAMAAAC7IEhfAAABPlBMVEUAAAC9vb3MzMyenp6rq6sXFxcbGxs1NTUsLCxHR0dHR0d6enqXl5e9vb3GxsbCwsKzs7OysrJDQ0MoKChgYGB1dXWlpaWioqKqqqqgoKCbm5vJycmsrKzLy8u3t7c5OTkxMTEQEBASEhJFRUUnJycYGBgREREiIiI8PDw0NDRmZmZYWFg+Pj5XV1dQUFBmZmZwcHB6enpbW1tGRkZCQkJ5eXmTk5N2dnYsLCxUVFRzc3ODg4M7OzuLi4tVVVVra2uJiYlCQkJ8fHxzc3OWlpZ2dnZdXV1ycnI5OTl1dXWVlZWioqJpaWmurq6SkpKDg4NWVlZsbGx/f3+/v7+jo6OIiIi4uLjKysq7u7vS0tKEhISxsbGenp7Hx8ehoaGUlJTb29tycnKQkJAAAAAFBQUICAgnJycREREODg4iIiKbqchsAAAAY3RSTlMAAwZhJP778ufaynVKRhgTDAHr6MWxgnNcPjYoHg8O+/r49vHx8e7r5+HZ2NfS0M/KyMXEwb+7u7u6ubaxrKuqoaGemZSRkI6BgH55eXNxcGpnXVtZVExLQj8/MjAuKiMeGAst+WL6AAABLUlEQVQ4y72T13LCMBBFBTZgA46pIUAgvffee++991wX8v8/ECce3rB9ZzKT8yBpR2ekWWlX/DfX6hHlhSdxQ4lvEbWJEhO4oLxKpueVEotGjktlBi2U2GplQ5R4hi1BMW3eUp5Wi3M37yFBee+xqEyJEsa5m3NIco/YG0tR4jY209T3Ddt33ruPy8X68sqc8kzlY/8LS/VgEYde3nkWgKK7gdxtlRtryXm0jxkwmt3wEnPhxuJEbUOuKsDob6qVIdPrEV8kZ9gFItpP9Gz3+zbVfQTIO3NoHcfCj/QCoDhH6W2dJeHLiZuOhBHhj54BnGpdRSG442Fr5WjfZ5AoW8DOKdZEEKE8EOsyiXYudQBQmUqMAzgQBAUD0SdGTA1gMCwYVgxJUDzMVsVf+AYT+C7EoeK+WwAAAABJRU5ErkJggg==);
}
#minesweeper div.menu ul a.gap {
  display: block;
  width: 98%;
  height: 0;
  border-top: 1px solid #aca899;
  margin: 2px 0;
}
#minesweeper div.main-game {
  padding: 5px;
  border-left: 4px solid white;
  border-top: 4px solid white;
  width: calc(100% + 8px);
}
#minesweeper div.main-game div.digital-wrapper {
  position: relative;
  padding: 6px;
  margin-bottom: 8px;
  border-left: 3px solid #808080;
  border-top: 3px solid #808080;
  border-bottom: 3px solid white;
  border-right: 3px solid white;
  overflow: hidden;
}
#minesweeper div.main-game div.digital-wrapper span {
  font-size: 32px;
  height: 24px;
  line-height: 0.95;
  padding-left: 2px;
  letter-spacing: 1px;
  font-family: "LCD", sans-serif;
  color: red;
  background-color: black;
  border-left: 2px solid #808080;
  border-top: 2px solid #808080;
  border-bottom: 2px solid white;
  border-right: 2px solid white;
}
#minesweeper div.main-game div.digital-wrapper span:first-child {
  float: left;
}
#minesweeper div.main-game div.digital-wrapper span:last-child {
  float: right;
}
#minesweeper div.main-game div.digital-wrapper span::before {
  position: absolute;
  content: '888';
  height: 24px;
  color: rgba(255, 0, 0, 0.35);
}
#minesweeper div.main-game div.digital-wrapper div {
  position: absolute;
  display: inline-block;
  width: 25px;
  height: 25px;
  left: 50%;
  margin-top: -1px;
  margin-left: -14px;
  border-left: 2px solid white;
  border-top: 2px solid white;
  border-bottom: 2px solid #808080;
  border-right: 2px solid #808080;
  outline: 1px solid #808080;
  background-size: 33px 33px;
  background-position: 50%;
}
#minesweeper div.main-game div.digital-wrapper div:active {
  background-position: 40% 40%;
  border-left: 2px solid #808080;
  border-top: 2px solid #808080;
  border-bottom: 2px solid white;
  border-right: 2px solid white;
}
#minesweeper div.main-game div.digital-wrapper div.normal {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEIAAABCAgMAAACeOuh7AAAACVBMVEUAAAD//wAAAACtw4WAAAAAAXRSTlMAQObYZgAAAGlJREFUOMvd0sEJwCAMBdDi0f3iwRGcokt0BCH9U9ZPvQkJuYn/5gMhIf86KQlQR/IrUhCU1IVRS8YfptwRyTLTTMEjrUeE800RNeTPPlL5rCHh7rwXd7ekAAMD4l9wbYIvfuvW9vpydj62IJZM+4otwwAAAABJRU5ErkJggg==);
}
#minesweeper div.main-game div.digital-wrapper div.click {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEIAAABCBAMAAAAReh3bAAAAD1BMVEUAAAAAAAD//wAAAACAgQDjp1+qAAAAAnRSTlMA91VKqocAAACJSURBVEjH7dTBCYAwDAXQQBdwhh8HKH4n0O4/k5IeAl7USrCH/ksuD1JSEhn5PYmWD4JcYCFzlEiER3OLSNbBCSMET1C4bgDmwnJWNgnWgajVCEHg+g5weisueSZyz8Km9U3MO6FriRJSu2v92wpE3gvvEiJ8X3xiSrkVAbt/I9quVNw9dTHSfw7T93FNWiuaWQAAAABJRU5ErkJggg==);
}
#minesweeper div.main-game div.digital-wrapper div.failed {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEIAAABCAgMAAACeOuh7AAAACVBMVEUAAAD//wAAAACtw4WAAAAAAXRSTlMAQObYZgAAAGdJREFUOMvd0sEJgDAMhWHpsfu9HLKBTuESjlBoMqUGBU8lPC9C/+MHhdBkmani3hOpBoiTUhqizokBkexjqVA5sCo2ThATtrHENM8rdErufhNxN0Ky33hFcaWE5Bvkb+PjHeYXPncnl5KUyFrE83cAAAAASUVORK5CYII=);
}
#minesweeper div.main-game div.digital-wrapper div.win {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEIAAABCAgMAAACeOuh7AAAADFBMVEUAAAD//wAAAACAgQCZQI+xAAAAAXRSTlMAQObYZgAAAHhJREFUOMvd0rENgCAUhGFD6SjucxRMYFhCl8DahkSucRr3Mc9oieYSK/7y6+Bd11KO3GQZCuA5v4lLsEZNCq78Wpced0GTSCvVxWVPMpAFmyIlXrLkuhATE+J+BEUynn4W+x+7V0bo3sTbOwX5vqC+DWF12p7b7gRcj6S7Xmc6CgAAAABJRU5ErkJggg==);
}
#minesweeper div.main-game canvas {
  display: block;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  cursor: default;
  border-left: 4px solid #808080;
  border-top: 4px solid #808080;
  border-bottom: 4px solid white;
  border-right: 4px solid white;
}
#minesweeper .custom-level {
  display: none;
  position: absolute;
  width: 180px;
  left: 50%;
  top: 50%;
  margin-left: -102px;
  margin-top: -80px;
  padding: 10px;
  font-size: 14px;
  background-color: #ece9d8;
  border: 2px solid #0055e5;
  border-radius: 5px;
  z-index: 1;
}
#minesweeper .custom-level p {
  width: 100px;
  margin: 10px 0;
  line-height: 24px;
  font-size: 14px;
}
#minesweeper .custom-level p input {
  float: right;
  width: 38px;
  padding: 1px;
  margin-left: 10px;
  font-size: 14px;
  border: 1px solid #7f9db9;
}
#minesweeper .custom-level div {
  position: absolute;
  left: 130px;
  top: 40px;
}
#minesweeper .custom-level div:last-child {
  top: 75px;
}
/* for mobile screen */
@media screen and (max-width: 600px) {
  #minesweeper {
    margin: 0 auto;
  }
}
/* for all versions of IE */
@media screen\0 {
  .digital-wrapper span {
    line-height: 0.8;
  }
}