.client {
  border-width: 3px;
  border-style: solid;
  border-color: #fff #808080 #808080 #fff;
  padding: 6px;
}

#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;
}
#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;
}

#restart {
  background: #000;
  z-index: 200;
}
#restart .starting {
  color: #fff;
  font-family: monospace;
  font-size: 16px;
  padding: 2px;
}
#restart .startup {
  opacity: 0;
}
#restart .clouds {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
#restart .logo {
  position: absolute;
  left: 160px;
  top: 72px;
  width: 320px;
  height: 280px;
}
#restart sup {
  font-size: 8px;
}
#restart h2, #restart h3 {
  font-family: Arial, sans-serif;
}
#restart h2 {
  position: absolute;
  font-size: 42px;
  left: 108px;
  bottom: 80px;
  color: white;
  letter-spacing: 1.2px;
  line-height: 1ex;
  z-index: 1;
}
#restart h2 em {
  display: block;
  text-indent: 22px;
  font-size: 74px;
  font-weight: 900;
  color: #000;
  letter-spacing: -6px;
  line-height: 1ex;
}
#restart h2 sup {
  vertical-align: 42px;
}
#restart h2 strong {
  display: inline-block;
  transform: scaleX(1.2);
  margin-left: -10px;
  color: #fff;
  font-weight: normal;
}
#restart h3 {
  position: absolute;
  right: 0;
  font-style: italic;
  font-weight: bold;
  font-size: 38px;
  line-height: 40px;
  z-index: 1;
  letter-spacing: -2px;
  margin-right: 0.5ex;
}
#restart h3 sup {
  margin-left: 4px;
}
#restart .bar {
  position: absolute;
  overflow: hidden;
  bottom: 0;
  width: 200%;
  height: 14px;
  background: linear-gradient(90deg, #47b, #bcd 19%, #bcd 31%, #47b 50%, #bcd 69%, #bcd 81%, #47b);
  -webkit-animation: barz 2s linear infinite;
          animation: barz 2s linear infinite;
}

#restart:target {
  -webkit-animation: booting 0.5s 7s 1 forwards;
          animation: booting 0.5s 7s 1 forwards;
}
#restart:target header {
  -webkit-animation: booting 0.5s 3s 1 forwards;
          animation: booting 0.5s 3s 1 forwards;
}
#restart:target .startup {
  -webkit-animation: startup-logo 7s linear 1 forwards;
          animation: startup-logo 7s linear 1 forwards;
}

@-webkit-keyframes booting {
  from {
    transform: none;
  }
  to {
    transform: scale(0.0001);
  }
}

@keyframes booting {
  from {
    transform: none;
  }
  to {
    transform: scale(0.0001);
  }
}
@-webkit-keyframes startup-logo {
  0%, 22% {
    opacity: 0;
  }
  25%, 90% {
    opacity: 1;
  }
  96%, 100% {
    opacity: 0;
  }
}
@keyframes startup-logo {
  0%, 22% {
    opacity: 0;
  }
  25%, 90% {
    opacity: 1;
  }
  96%, 100% {
    opacity: 0;
  }
}
@-webkit-keyframes barz {
  from {
    margin-left: 0;
  }
  to {
    margin-left: -100%;
  }
}
@keyframes barz {
  from {
    margin-left: 0;
  }
  to {
    margin-left: -100%;
  }
}
#fore-mine:checked ~ #taskbar #task-mine, #fore-ie:checked ~ #taskbar #task-ie, #fore-notepad:checked ~ #taskbar #task-notepad {
  background: rgba(255, 255, 255, 0.67);
  font-weight: bold;
}

#open-mine:checked ~ #app-mine, #open-ie:checked ~ #app-ie, #open-notepad:checked ~ #app-notepad {
  visibility: visible;
}

#open-mine:checked ~ #taskbar #task-mine, #open-ie:checked ~ #taskbar #task-ie, #open-notepad:checked ~ #taskbar #task-notepad {
  display: flex;
}

#fore-mine:checked ~ #app-mine, #fore-ie:checked ~ #app-ie, #fore-notepad:checked ~ #app-notepad {
  z-index: 3;
}
#fore-mine:checked ~ #app-mine h2, #fore-ie:checked ~ #app-ie h2, #fore-notepad:checked ~ #app-notepad h2 {
  color: #fff;
  background: #000080;
}