*, *::before, *::after {
  font: inherit;
  margin: 0;
  padding: 0;
  outline: 0;
  box-sizing: border-box;
}

div::before,
div::after,
label::before,
label::after {
  content: "";
  position: absolute;
}

li {
  list-style: none;
}

textarea {
  resize: none;
}

input[type=checkbox],
input[type=radio] {
  display: none;
}

#app-ie header, form h2, #startmenu .item, #notify, #start {
  display: flex;
  align-items: center;
}

#dead a, body {
  display: flex;
  align-items: center;
  justify-content: center;
}

#wormsweeper body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding: 0;
  margin: 0;
  font-size: 12px;
  line-height: 1;
  font-family: "MS Sans Serif", Roboto, sans-serif;
  height: 100vh;
  overflow: hidden;
}


#restart .startup, #restart, #dead a{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  cursor: none;
}

#dead {
  line-height: 480px;
  z-index: 200;
  cursor: none;
}
form {
  position: absolute;
    top: 0px;
    left: 0px;
  z-index: 2;
  border-width: 1px;
  border-style: solid;
  border-color: #c0c0c0 #000 #000 #c0c0c0;
  padding: 3px;
  color: #000;
  background: #c0c0c0;
}
form::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-width: 1px;
  border-style: solid;
  border-color: #fff #808080 #808080 #fff;
  pointer-events: none;
}
form h2 .label {
  flex: 1;
  margin: 2px;
}
form .btn {
  background: #c0c0c0;
  position: relative;
  height: 14px;
  width: 16px;
  border-width: 1px;
  border-style: solid;
  border-color: #fff #000 #000 #fff;
}
form .btn::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-width: 1px;
  border-style: solid;
  border-color: #e0e0e0 #808080 #808080 #e0e0e0;
}
form .btn:hover:active {
  border-color: #000 #fff #fff #000;
}
form .btn:hover:active::after {
  border-color: #808080 #e0e0e0 #e0e0e0 #808080;
}
form .min,
form .max {
  margin: 2px 0;
}
form .close {
  margin: 2px;
}
form .min::after {
  background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='16'%3E%3Cpath d='M5 10h6v2H5z'/%3E%3C/svg%3E") no-repeat center center;
}
form .max::after {
  background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='16'%3E%3Cpath d='M4 4v8h9V4H4zm1 2h7v5H5V6z'/%3E%3C/svg%3E") no-repeat center center;
}
form .close::after {
  background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 16' width='9' height='8'%3E%3Cpath d='M0 1l7 7-7 7h4l5-5 5 5h4l-7-7 7-7h-4L9 6 4 1z'/%3E%3C/svg%3E") no-repeat center center;
}

#app-mine {
  padding: 2px;
  left: 0px;
  bottom: 0px;
    box-sizing: border-box;
    width: 155px;
    height: 197px;
}
#app-mine header {
  display: flex;
  flex-wrap: wrap;
  border-width: 2px;
  border-style: solid;
  border-color: #808080 #fff #fff #808080;
  padding: 4px 7px 4px 5px;
  margin-bottom: 6px;
  justify-content: space-between;
}
#app-mine .client {
  border-width: 3px;
  border-style: solid;
  border-color: #fff #808080 #808080 #fff;
  padding: 6px;
    height: 195px;
    width: 152px;
    position: absolute;
    top: 0px;
    left: 0px;
}
#app-mine header .init,
#app-mine header .won,
#app-mine header .lose {
  display: none;
}

.number {
  background: #000;
  border-width: 1px;
  border-style: solid;
  border-color: #808080 #fff #fff #808080;
  height: 25px;
}
.number i {
  width: 10px;
  display: inline-block;
  height: 21px;
  margin: 1px 2px 1px 1px;
  border-style: solid;
  border-width: 3px;
  border-radius: 2px;
  position: relative;
}
.number i::before {
  position: absolute;
  content: "";
  border-radius: 2px;
}
.number .num-0 {
  border-color: #f00;
}
.number .num-1 {
  border-color: #800000 #f00 #800000 #800000;
}
.number .num-3 {
  border-color: #f00 #f00 #f00 #800000;
}
.number .num-3::before {
  left: -1px;
  top: 6px;
  width: 8px;
  border-top: 3px solid #f00;
}
.number .num-6 {
  border-color: #f00 #800000 #f00 #f00;
}
.number .num-6::before {
  left: -3px;
  bottom: -3px;
  width: 10px;
  height: 12px;
  border-style: solid;
  border-width: 3px;
  border-color: #f00 #f00 transparent transparent;
}

.btn.face {
  font-size: 15px;
  width: auto;
  height: auto;
  line-height: 22px;
  min-width: 24px;
  text-align: center;
}

.minefield {
  display: none;
  flex-wrap: wrap;
  border-width: 3px;
  border-style: solid;
  border-color: #808080 #fff #fff #808080;
  width: 134px;
}
.minefield li, .minefield .btn {
  width: 16px;
  height: 16px;
  text-align: center;
  font: inherit;
}
.minefield li {
  border-width: 1px;
  border-style: dotted;
  border-color: transparent #808080 #808080 transparent;
  font-weight: bold;
  line-height: 14px;
}
.minefield li.hit {
  background-color: #f00;
}
.minefield li.num-8 {
  color: #000;
}

#m37:checked ~ header .won {
  display: block;
}

#m0:checked ~ header .init {
  display: block;
}
#m0:checked ~ #mf-0 {
  display: flex;
}

#m1:checked ~ #mf-1 {
  display: flex;
}
#m1:checked ~ header .n {
  display: block;
}
#m1:checked ~ header .lose {
  display: block;
}

#m2:checked ~ #mf-2 {
  display: flex;
}
#m2:checked ~ header .n {
  display: block;
}
#m2:checked ~ header .lose {
  display: block;
}

#m3:checked ~ #mf-3 {
  display: flex;
}
#m3:checked ~ header .n {
  display: block;
}
#m3:checked ~ header .lose {
  display: block;
}

#m4:checked ~ #mf-4 {
  display: flex;
}
#m4:checked ~ header .n {
  display: block;
}
#m4:checked ~ header .lose {
  display: block;
}

#m5:checked ~ #mf-5 {
  display: flex;
}
#m5:checked ~ header .n {
  display: block;
}
#m5:checked ~ header .lose {
  display: block;
}

#m6:checked ~ #mf-6 {
  display: flex;
}
#m6:checked ~ header .n {
  display: block;
}
#m6:checked ~ header .lose {
  display: block;
}

#m7:checked ~ #mf-7 {
  display: flex;
}
#m7:checked ~ header .n {
  display: block;
}
#m7:checked ~ header .lose {
  display: block;
}

#m8:checked ~ #mf-8 {
  display: flex;
}
#m8:checked ~ header .n {
  display: block;
}
#m8:checked ~ header .lose {
  display: block;
}

#m9:checked ~ #mf-9 {
  display: flex;
}
#m9:checked ~ header .n {
  display: block;
}
#m9:checked ~ header .lose {
  display: block;
}

#m10:checked ~ #mf-10 {
  display: flex;
}
#m10:checked ~ header .n {
  display: block;
}
#m10:checked ~ header .lose {
  display: block;
}

#m11:checked ~ #mf-11 {
  display: flex;
}
#m11:checked ~ header .n {
  display: block;
}
#m11:checked ~ header .lose {
  display: block;
}

#m12:checked ~ #mf-12 {
  display: flex;
}
#m12:checked ~ header .n {
  display: block;
}
#m12:checked ~ header .lose {
  display: block;
}

#m13:checked ~ #mf-13 {
  display: flex;
}
#m13:checked ~ header .n {
  display: block;
}
#m13:checked ~ header .lose {
  display: block;
}

#m14:checked ~ #mf-14 {
  display: flex;
}
#m14:checked ~ header .n {
  display: block;
}
#m14:checked ~ header .lose {
  display: block;
}

#m15:checked ~ #mf-15 {
  display: flex;
}
#m15:checked ~ header .n {
  display: block;
}
#m15:checked ~ header .lose {
  display: block;
}

#m16:checked ~ #mf-16 {
  display: flex;
}
#m16:checked ~ header .n {
  display: block;
}
#m16:checked ~ header .lose {
  display: block;
}

#m17:checked ~ #mf-17 {
  display: flex;
}
#m17:checked ~ header .n {
  display: block;
}
#m17:checked ~ header .lose {
  display: block;
}

#m18:checked ~ #mf-18 {
  display: flex;
}
#m18:checked ~ header .n {
  display: block;
}
#m18:checked ~ header .lose {
  display: block;
}

#m19:checked ~ #mf-19 {
  display: flex;
}
#m19:checked ~ header .n {
  display: block;
}
#m19:checked ~ header .lose {
  display: block;
}

#m20:checked ~ #mf-20 {
  display: flex;
}
#m20:checked ~ header .n {
  display: block;
}
#m20:checked ~ header .lose {
  display: block;
}

#m21:checked ~ #mf-21 {
  display: flex;
}
#m21:checked ~ header .n {
  display: block;
}
#m21:checked ~ header .lose {
  display: block;
}

#m22:checked ~ #mf-22 {
  display: flex;
}
#m22:checked ~ header .n {
  display: block;
}
#m22:checked ~ header .lose {
  display: block;
}

#m23:checked ~ #mf-23 {
  display: flex;
}
#m23:checked ~ header .n {
  display: block;
}
#m23:checked ~ header .lose {
  display: block;
}

#m24:checked ~ #mf-24 {
  display: flex;
}
#m24:checked ~ header .n {
  display: block;
}
#m24:checked ~ header .lose {
  display: block;
}

#m25:checked ~ #mf-25 {
  display: flex;
}
#m25:checked ~ header .n {
  display: block;
}
#m25:checked ~ header .lose {
  display: block;
}

#m26:checked ~ #mf-26 {
  display: flex;
}
#m26:checked ~ header .n {
  display: block;
}
#m26:checked ~ header .lose {
  display: block;
}

#m27:checked ~ #mf-27 {
  display: flex;
}
#m27:checked ~ header .n {
  display: block;
}
#m27:checked ~ header .lose {
  display: block;
}

#m28:checked ~ #mf-28 {
  display: flex;
}
#m28:checked ~ header .n {
  display: block;
}
#m28:checked ~ header .lose {
  display: block;
}

#m29:checked ~ #mf-29 {
  display: flex;
}
#m29:checked ~ header .n {
  display: block;
}
#m29:checked ~ header .lose {
  display: block;
}

#m30:checked ~ #mf-30 {
  display: flex;
}
#m30:checked ~ header .n {
  display: block;
}
#m30:checked ~ header .lose {
  display: block;
}

#m31:checked ~ #mf-31 {
  display: flex;
}
#m31:checked ~ header .n {
  display: block;
}
#m31:checked ~ header .lose {
  display: block;
}

#m32:checked ~ #mf-32 {
  display: flex;
}
#m32:checked ~ header .n {
  display: block;
}
#m32:checked ~ header .lose {
  display: block;
}

#m33:checked ~ #mf-33 {
  display: flex;
}
#m33:checked ~ header .n {
  display: block;
}
#m33:checked ~ header .lose {
  display: block;
}

#m34:checked ~ #mf-34 {
  display: flex;
}
#m34:checked ~ header .n {
  display: block;
}
#m34:checked ~ header .lose {
  display: block;
}

#m35:checked ~ #mf-35 {
  display: flex;
}
#m35:checked ~ header .n {
  display: block;
}
#m35:checked ~ header .lose {
  display: block;
}

#m36:checked ~ #mf-36 {
  display: flex;
}
#m36:checked ~ header .n {
  display: block;
}
#m36:checked ~ header .lose {
  display: block;
}

#m37:checked ~ #mf-37 {
  display: flex;
}
#m37:checked ~ header .n {
  display: block;
}
#m37:checked ~ header .won {
  display: block;
}

#m38:checked ~ #mf-38 {
  display: flex;
}
#m38:checked ~ header .n {
  display: block;
}
#m38:checked ~ header .lose {
  display: block;
}

#m39:checked ~ #mf-39 {
  display: flex;
}
#m39:checked ~ header .n {
  display: block;
}
#m39:checked ~ header .lose {
  display: block;
}

#m40:checked ~ #mf-40 {
  display: flex;
}
#m40:checked ~ header .n {
  display: block;
}
#m40:checked ~ header .lose {
  display: block;
}

#m41:checked ~ #mf-41 {
  display: flex;
}
#m41:checked ~ header .n {
  display: block;
}
#m41:checked ~ header .lose {
  display: block;
}

#m42:checked ~ #mf-42 {
  display: flex;
}
#m42:checked ~ header .n {
  display: block;
}
#m42:checked ~ header .lose {
  display: block;
}

#m43:checked ~ #mf-43 {
  display: flex;
}
#m43:checked ~ header .n {
  display: block;
}
#m43:checked ~ header .lose {
  display: block;
}

#m44:checked ~ #mf-44 {
  display: flex;
}
#m44:checked ~ header .n {
  display: block;
}
#m44:checked ~ header .lose {
  display: block;
}

#m45:checked ~ #mf-45 {
  display: flex;
}
#m45:checked ~ header .n {
  display: block;
}
#m45:checked ~ header .lose {
  display: block;
}

#m46:checked ~ #mf-46 {
  display: flex;
}
#m46:checked ~ header .n {
  display: block;
}
#m46:checked ~ header .lose {
  display: block;
}

#m47:checked ~ #mf-47 {
  display: flex;
}
#m47:checked ~ header .n {
  display: block;
}
#m47:checked ~ header .lose {
  display: block;
}

#m48:checked ~ #mf-48 {
  display: flex;
}
#m48:checked ~ header .n {
  display: block;
}
#m48:checked ~ header .lose {
  display: block;
}

#m49:checked ~ #mf-49 {
  display: flex;
}
#m49:checked ~ header .n {
  display: block;
}
#m49:checked ~ header .lose {
  display: block;
}

#m50:checked ~ #mf-50 {
  display: flex;
}
#m50:checked ~ header .n {
  display: block;
}
#m50:checked ~ header .lose {
  display: block;
}

#m51:checked ~ #mf-51 {
  display: flex;
}
#m51:checked ~ header .n {
  display: block;
}
#m51:checked ~ header .lose {
  display: block;
}

#m52:checked ~ #mf-52 {
  display: flex;
}
#m52:checked ~ header .n {
  display: block;
}
#m52:checked ~ header .lose {
  display: block;
}

#m53:checked ~ #mf-53 {
  display: flex;
}
#m53:checked ~ header .n {
  display: block;
}
#m53:checked ~ header .lose {
  display: block;
}

#m54:checked ~ #mf-54 {
  display: flex;
}
#m54:checked ~ header .n {
  display: block;
}
#m54:checked ~ header .lose {
  display: block;
}

#m55:checked ~ #mf-55 {
  display: flex;
}
#m55:checked ~ header .n {
  display: block;
}
#m55:checked ~ header .lose {
  display: block;
}

#m56:checked ~ #mf-56 {
  display: flex;
}
#m56:checked ~ header .n {
  display: block;
}
#m56:checked ~ header .lose {
  display: block;
}

#m57:checked ~ #mf-57 {
  display: flex;
}
#m57:checked ~ header .n {
  display: block;
}
#m57:checked ~ header .lose {
  display: block;
}

#m58:checked ~ #mf-58 {
  display: flex;
}
#m58:checked ~ header .n {
  display: block;
}
#m58:checked ~ header .lose {
  display: block;
}

#m59:checked ~ #mf-59 {
  display: flex;
}
#m59:checked ~ header .n {
  display: block;
}
#m59:checked ~ header .lose {
  display: block;
}

#m60:checked ~ #mf-60 {
  display: flex;
}
#m60:checked ~ header .n {
  display: block;
}
#m60:checked ~ header .lose {
  display: block;
}

#m61:checked ~ #mf-61 {
  display: flex;
}
#m61:checked ~ header .n {
  display: block;
}
#m61:checked ~ header .lose {
  display: block;
}

#m62:checked ~ #mf-62 {
  display: flex;
}
#m62:checked ~ header .n {
  display: block;
}
#m62:checked ~ header .lose {
  display: block;
}

#m63:checked ~ #mf-63 {
  display: flex;
}
#m63:checked ~ header .n {
  display: block;
}
#m63:checked ~ header .lose {
  display: block;
}

#m64:checked ~ #mf-64 {
  display: flex;
}
#m64:checked ~ header .n {
  display: block;
}
#m64:checked ~ header .lose {
  display: block;
}

.minefield:not(.flags) li:not(.safe) {
  background-image: url("worm.png");
    background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

.minefield.flags li:not(.num-8) {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 32 32'%3E%3Cpath d='M16 12v8c0 4 0 4-4 4v2h10v-2c-4 0-4 0-4-4v-8z'/%3E%3Cpath fill='red' d='M8 6h10v8H8z'/%3E%3Cpath d='M18 6L8 14h10z' fill='maroon'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center center;
}

.btn.face {
  background-repeat: repeat;
  background-position: center;
  font-size: 0;
  color: transparent;
}

.face.init {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8' fill='yellow' stroke='black'/%3E%3Cellipse cx='9' cy='9.5' rx='1' ry='1.5'/%3E%3Cellipse cx='15' cy='9.5' rx='1' ry='1.5'/%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' d='M8 14c1.5 3 6.5 3 8 0'/%3E%3C/svg%3E");
}

.face.won {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8' fill='yellow' stroke='black'/%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' d='M4.5 10.5C8 8 16 8 19.5 10.5'/%3E%3Cpath d='M8.5 7.5C10 7.5 12 7.5 12 9c0 2-2 3-3.5 3-1 0-2-1.5-2-2.5 0-1.5 1-2 2-2zM15.5 7.5C14 7.5 12 7.5 12 9c0 2 2 3 3.5 3 1 0 2-1.5 2-2.5 0-1.5-1-2-2-2z'/%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' d='M8.5 14c1.5 3 5.5 3 7 0'/%3E%3C/svg%3E");
}

.face.lose {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8' fill='yellow' stroke='black'/%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' d='M8.5 16c1.5-2.5 5.5-2.5 7 0'/%3E%3Cpath fill='none' stroke='black' stroke-linejoin='round' d='M7 8l3 3zm7 0l3 3zM10 8l-3 3zm7 0l-3 3z'/%3E%3C/svg%3E");
}