纯CSS扫雷

下载代码

html

css

分享到微信朋友圈

html

<form>
  <input id='c1' type='checkbox'>
  <input id='f1' type='checkbox'>
  <input id='c2' type='checkbox'>
  <input id='f2' type='checkbox'>
  <input id='c3' type='checkbox'>
  <input id='f3' type='checkbox'>
  <input id='c4' type='checkbox'>
  <input id='f4' type='checkbox'>
  <input id='c5' type='checkbox'>
  <input id='f5' type='checkbox'>
  <input id='c6' type='checkbox'>
  <input id='f6' type='checkbox'>
  <input id='c7' type='checkbox'>
  <input id='f7' type='checkbox'>
  <input id='c8' type='checkbox'>
  <input id='f8' type='checkbox'>
  <input id='c9' type='checkbox'>
  <input id='f9' type='checkbox'>
  <input id='c10' type='checkbox'>
  <input id='f10' type='checkbox'>
  <input id='c11' type='checkbox'>
  <input id='f11' type='checkbox'>
  <input id='c12' type='checkbox'>
  <input id='f12' type='checkbox'>
  <input id='c13' type='checkbox'>
  <input id='f13' type='checkbox'>
  <input id='c14' type='checkbox'>
  <input id='f14' type='checkbox'>
  <input id='c15' type='checkbox'>
  <input id='f15' type='checkbox'>
  <input id='c16' type='checkbox'>
  <input id='f16' type='checkbox'>
  <input id='c17' type='checkbox'>
  <input id='f17' type='checkbox'>
  <input id='c18' type='checkbox'>
  <input id='f18' type='checkbox'>
  <input id='c19' type='checkbox'>
  <input id='f19' type='checkbox'>
  <input id='c20' type='checkbox'>
  <input id='f20' type='checkbox'>
  <input id='c21' type='checkbox'>
  <input id='f21' type='checkbox'>
  <input id='c22' type='checkbox'>
  <input id='f22' type='checkbox'>
  <input id='c23' type='checkbox'>
  <input id='f23' type='checkbox'>
  <input id='c24' type='checkbox'>
  <input id='f24' type='checkbox'>
  <input id='c25' type='checkbox'>
  <input id='f25' type='checkbox'>
  <input id='c26' type='checkbox'>
  <input id='f26' type='checkbox'>
  <input id='c27' type='checkbox'>
  <input id='f27' type='checkbox'>
  <input id='c28' type='checkbox'>
  <input id='f28' type='checkbox'>
  <input id='c29' type='checkbox'>
  <input id='f29' type='checkbox'>
  <input id='c30' type='checkbox'>
  <input id='f30' type='checkbox'>
  <input id='c31' type='checkbox'>
  <input id='f31' type='checkbox'>
  <input id='c32' type='checkbox'>
  <input id='f32' type='checkbox'>
  <input id='c33' type='checkbox'>
  <input id='f33' type='checkbox'>
  <input id='c34' type='checkbox'>
  <input id='f34' type='checkbox'>
  <input id='c35' type='checkbox'>
  <input id='f35' type='checkbox'>
  <input id='c36' type='checkbox'>
  <input id='f36' type='checkbox'>
  <input id='c37' type='checkbox'>
  <input id='f37' type='checkbox'>
  <input id='c38' type='checkbox'>
  <input id='f38' type='checkbox'>
  <input id='c39' type='checkbox'>
  <input id='f39' type='checkbox'>
  <input id='c40' type='checkbox'>
  <input id='f40' type='checkbox'>
  <input id='c41' type='checkbox'>
  <input id='f41' type='checkbox'>
  <input id='c42' type='checkbox'>
  <input id='f42' type='checkbox'>
  <input id='c43' type='checkbox'>
  <input id='f43' type='checkbox'>
  <input id='c44' type='checkbox'>
  <input id='f44' type='checkbox'>
  <input id='c45' type='checkbox'>
  <input id='f45' type='checkbox'>
  <input id='c46' type='checkbox'>
  <input id='f46' type='checkbox'>
  <input id='c47' type='checkbox'>
  <input id='f47' type='checkbox'>
  <input id='c48' type='checkbox'>
  <input id='f48' type='checkbox'>
  <input id='c49' type='checkbox'>
  <input id='f49' type='checkbox'>
  <input id='c50' type='checkbox'>
  <input id='f50' type='checkbox'>
  <input id='c51' type='checkbox'>
  <input id='f51' type='checkbox'>
  <input id='c52' type='checkbox'>
  <input id='f52' type='checkbox'>
  <input id='c53' type='checkbox'>
  <input id='f53' type='checkbox'>
  <input id='c54' type='checkbox'>
  <input id='f54' type='checkbox'>
  <input id='c55' type='checkbox'>
  <input id='f55' type='checkbox'>
  <input id='c56' type='checkbox'>
  <input id='f56' type='checkbox'>
  <input id='c57' type='checkbox'>
  <input id='f57' type='checkbox'>
  <input id='c58' type='checkbox'>
  <input id='f58' type='checkbox'>
  <input id='c59' type='checkbox'>
  <input id='f59' type='checkbox'>
  <input id='c60' type='checkbox'>
  <input id='f60' type='checkbox'>
  <input id='c61' type='checkbox'>
  <input id='f61' type='checkbox'>
  <input id='c62' type='checkbox'>
  <input id='f62' type='checkbox'>
  <input id='c63' type='checkbox'>
  <input id='f63' type='checkbox'>
  <input id='c64' type='checkbox'>
  <input id='f64' type='checkbox'>
  <input id='c65' type='checkbox'>
  <input id='f65' type='checkbox'>
  <input id='c66' type='checkbox'>
  <input id='f66' type='checkbox'>
  <input id='c67' type='checkbox'>
  <input id='f67' type='checkbox'>
  <input id='c68' type='checkbox'>
  <input id='f68' type='checkbox'>
  <input id='c69' type='checkbox'>
  <input id='f69' type='checkbox'>
  <input id='c70' type='checkbox'>
  <input id='f70' type='checkbox'>
  <input id='c71' type='checkbox'>
  <input id='f71' type='checkbox'>
  <input id='c72' type='checkbox'>
  <input id='f72' type='checkbox'>
  <input id='c73' type='checkbox'>
  <input id='f73' type='checkbox'>
  <input id='c74' type='checkbox'>
  <input id='f74' type='checkbox'>
  <input id='c75' type='checkbox'>
  <input id='f75' type='checkbox'>
  <input id='c76' type='checkbox'>
  <input id='f76' type='checkbox'>
  <input id='c77' type='checkbox'>
  <input id='f77' type='checkbox'>
  <input id='c78' type='checkbox'>
  <input id='f78' type='checkbox'>
  <input id='c79' type='checkbox'>
  <input id='f79' type='checkbox'>
  <input id='c80' type='checkbox'>
  <input id='f80' type='checkbox'>
  <input id='c81' type='checkbox'>
  <input id='f81' type='checkbox'>
  <input checked id='modeMine' name='mode' type='radio'>
  <input id='modeFlag' name='mode' type='radio'>
  <div class='actionSelector'>
    <label for='modeMine'>
      ?
    </label>
    <label for='modeFlag'>
      ??
    </label>
  </div>
  <div class='grid'>
    <label for='c1'></label>
    <label for='c2'></label>
    <label for='c3'></label>
    <label for='c4'></label>
    <label for='c5'></label>
    <label for='c6'></label>
    <label for='c7'></label>
    <label for='c8'></label>
    <label for='c9'></label>
    <label for='c10'></label>
    <label for='c11'></label>
    <label for='c12'></label>
    <label for='c13'></label>
    <label for='c14'></label>
    <label for='c15'></label>
    <label for='c16'></label>
    <label for='c17'></label>
    <label for='c18'></label>
    <label for='c19'></label>
    <label for='c20'></label>
    <label for='c21'></label>
    <label for='c22'></label>
    <label for='c23'></label>
    <label for='c24'></label>
    <label for='c25'></label>
    <label for='c26'></label>
    <label for='c27'></label>
    <label for='c28'></label>
    <label for='c29'></label>
    <label for='c30'></label>
    <label for='c31'></label>
    <label for='c32'></label>
    <label for='c33'></label>
    <label for='c34'></label>
    <label for='c35'></label>
    <label for='c36'></label>
    <label for='c37'></label>
    <label for='c38'></label>
    <label for='c39'></label>
    <label for='c40'></label>
    <label for='c41'></label>
    <label for='c42'></label>
    <label for='c43'></label>
    <label for='c44'></label>
    <label for='c45'></label>
    <label for='c46'></label>
    <label for='c47'></label>
    <label for='c48'></label>
    <label for='c49'></label>
    <label for='c50'></label>
    <label for='c51'></label>
    <label for='c52'></label>
    <label for='c53'></label>
    <label for='c54'></label>
    <label for='c55'></label>
    <label for='c56'></label>
    <label for='c57'></label>
    <label for='c58'></label>
    <label for='c59'></label>
    <label for='c60'></label>
    <label for='c61'></label>
    <label for='c62'></label>
    <label for='c63'></label>
    <label for='c64'></label>
    <label for='c65'></label>
    <label for='c66'></label>
    <label for='c67'></label>
    <label for='c68'></label>
    <label for='c69'></label>
    <label for='c70'></label>
    <label for='c71'></label>
    <label for='c72'></label>
    <label for='c73'></label>
    <label for='c74'></label>
    <label for='c75'></label>
    <label for='c76'></label>
    <label for='c77'></label>
    <label for='c78'></label>
    <label for='c79'></label>
    <label for='c80'></label>
    <label for='c81'></label>
    <div class='flags'>
      <label for='f1'></label>
      <label for='f2'></label>
      <label for='f3'></label>
      <label for='f4'></label>
      <label for='f5'></label>
      <label for='f6'></label>
      <label for='f7'></label>
      <label for='f8'></label>
      <label for='f9'></label>
      <label for='f10'></label>
      <label for='f11'></label>
      <label for='f12'></label>
      <label for='f13'></label>
      <label for='f14'></label>
      <label for='f15'></label>
      <label for='f16'></label>
      <label for='f17'></label>
      <label for='f18'></label>
      <label for='f19'></label>
      <label for='f20'></label>
      <label for='f21'></label>
      <label for='f22'></label>
      <label for='f23'></label>
      <label for='f24'></label>
      <label for='f25'></label>
      <label for='f26'></label>
      <label for='f27'></label>
      <label for='f28'></label>
      <label for='f29'></label>
      <label for='f30'></label>
      <label for='f31'></label>
      <label for='f32'></label>
      <label for='f33'></label>
      <label for='f34'></label>
      <label for='f35'></label>
      <label for='f36'></label>
      <label for='f37'></label>
      <label for='f38'></label>
      <label for='f39'></label>
      <label for='f40'></label>
      <label for='f41'></label>
      <label for='f42'></label>
      <label for='f43'></label>
      <label for='f44'></label>
      <label for='f45'></label>
      <label for='f46'></label>
      <label for='f47'></label>
      <label for='f48'></label>
      <label for='f49'></label>
      <label for='f50'></label>
      <label for='f51'></label>
      <label for='f52'></label>
      <label for='f53'></label>
      <label for='f54'></label>
      <label for='f55'></label>
      <label for='f56'></label>
      <label for='f57'></label>
      <label for='f58'></label>
      <label for='f59'></label>
      <label for='f60'></label>
      <label for='f61'></label>
      <label for='f62'></label>
      <label for='f63'></label>
      <label for='f64'></label>
      <label for='f65'></label>
      <label for='f66'></label>
      <label for='f67'></label>
      <label for='f68'></label>
      <label for='f69'></label>
      <label for='f70'></label>
      <label for='f71'></label>
      <label for='f72'></label>
      <label for='f73'></label>
      <label for='f74'></label>
      <label for='f75'></label>
      <label for='f76'></label>
      <label for='f77'></label>
      <label for='f78'></label>
      <label for='f79'></label>
      <label for='f80'></label>
      <label for='f81'></label>
    </div>
    <button class='error' tabindex='-1' type='reset'>
      Ooohhh ??
      <br>
      Click to try again
    </button>
    <button class='victory' tabindex='-1' type='reset'>
      ???????????
      <br>
      Click to restart
    </button>
  </div>
  <div class='infos'>
    <div class='counter'></div>
    <div class='timer'>
      <div class='digit'></div>
      <div class='digit'></div>
      <div class='digit'></div>
      <div class='separator'></div>
      <div class='digit'></div>
      <div class='digit'></div>
    </div>
  </div>
</form>

css

@charset "UTF-8";
@import "https://fonts.googleapis.com/css?family=Roboto+Mono:700";
body {
  min-height: 100vh;
  padding: 1px;
  box-sizing: border-box;
  background: teal url(http://core0.staticworld.net/images/article/2014/04/windows-xp-bliss-start-screen-100259803-orig.jpg) center/cover no-repeat;
  counter-reset: mines 10;
}

form {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
}

input {
  visibility: hidden;
  position: absolute;
  top: -99px;
  left: -99px;
}

input[id^="f"]:checked {
  counter-increment: mines -1;
}

.infos {
  order: 2;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  width: 216px;
}

.timer {
  font-family: "Roboto Sans", monospace;
  font-size: 0;
  background: #ccc;
  border: 1px solid #808080;
  height: 2.25rem;
  line-height: 2.25rem;
  padding: 0 .5rem;
}
.timer .separator {
  display: inline-block;
  vertical-align: middle;
  font-size: 1rem;
}
.timer .separator:before {
  content: ':';
}
@keyframes digit {
  from {
    top: 0;
  }
  to {
    top: -1000%;
  }
}
@keyframes digitTo6 {
  from {
    top: 0;
  }
  to {
    top: -600%;
  }
}
@keyframes extend {
  from {
    width: 0;
  }
  10%, to {
    width: auto;
  }
}
.timer .digit {
  display: inline-block;
  position: relative;
  overflow: hidden;
  vertical-align: middle;
  font-size: 1rem;
}
.timer .digit:before {
  content: '0';
  visibility: hidden;
}
.timer .digit:after {
  content: '0 \A 1 \A 2 \A 3 \A 4 \A 5 \A 6 \A 7 \A 8 \A 9';
  position: absolute;
  top: 0;
  left: 0;
  animation: digit 1s steps(10) infinite paused;
}
.timer .digit:nth-last-child(1):after {
  animation-duration: 10s;
}
.timer .digit:nth-last-child(2):after {
  content: '0 \A 1 \A 2 \A 3 \A 4 \A 5';
  animation-name: digitTo6;
  animation-timing-function: steps(6);
  animation-duration: 60s;
}
.timer .digit:nth-last-child(4):after {
  animation-duration: 600s;
}
.timer .digit:nth-last-child(5):after {
  animation-duration: 6000s;
}
.timer .digit:nth-last-child(6) {
  width: 0;
  animation: extend 60000s steps(1) infinite paused;
}
.timer .digit:nth-last-child(6):after {
  animation-duration: 60000s;
}

.counter {
  display: inline-block;
  border: 1px solid #808080;
  background: #ccc;
  padding: 0 .5rem;
  font-size: 1.25rem;
  font-family: "Roboto Sans", monospace;
  height: 2.25rem;
  line-height: 2.25rem;
}
.counter:before {
  content: '??';
  font-size: 1rem;
  margin-right: .5em;
}
.counter:after {
  content: counter(mines);
}

input[id^="c"]:checked ~ .infos .timer .digit, input[id^="c"]:checked ~ .infos .timer .digit:after {
  animation-play-state: running;
}

.actionSelector {
  order: 1;
  text-align: center;
  margin: 10px;
  cursor: default;
}
.actionSelector label {
  display: inline-block;
  position: relative;
  width: 1.8em;
  height: 1.8em;
  text-align: center;
  line-height: 1.8em;
  cursor: pointer;
}
.actionSelector label:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: scale(0);
  border-radius: 50%;
  background: rgba(210, 210, 210, 0.8);
  box-sizing: border-box;
  border: 1px solid #808080;
  transition: transform .3s, border-radius .3s;
  transition-timing-function: cubic-bezier(0.75, 1.75, 0.75, 0.75);
  z-index: -1;
}

#modeMine:checked ~ .actionSelector label[for="modeMine"],
#modeFlag:checked ~ .actionSelector label[for="modeFlag"] {
  cursor: default;
}
#modeMine:checked ~ .actionSelector label[for="modeMine"]:before,
#modeFlag:checked ~ .actionSelector label[for="modeFlag"]:before {
  transform: scale(1);
  border-radius: 2px;
}

.grid {
  order: 3;
  user-select: none;
  position: relative;
  margin: 10px auto;
  width: 9em;
  height: 9em;
  font-size: 24px;
  display: flex;
  flex-flow: row wrap;
  border: solid #808080;
  border-width: 1px 0 0 1px;
}
.grid label {
  display: block;
  position: relative;
  width: 1em;
  height: 1em;
  background: #c0c0c0;
  box-sizing: border-box;
  border: solid #808080;
  border-width: 0 1px 1px 0;
  flex: 0 0 11.11111%;
  overflow: hidden;
  cursor: pointer;
  pointer-events: none;
}
.grid label:before {
  content: '';
  font-size: .9rem;
  font-family: 'Roboto Mono', monospace;
  font-weight: bold;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.grid label:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background: #c0c0c0;
  border: 2px outset #ececec;
  font-size: .75rem;
  text-align: center;
  pointer-events: auto;
}
.grid label:active:after {
  background: #bdbdbd;
  border: solid #999;
  border-width: 2px 0 0 2px;
}
.grid .flags {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: row wrap;
  opacity: 0;
  visibility: hidden;
}
.grid .error, .grid .victory {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(10, 0, 0, 0.75);
  color: #fff;
  font-family: "Century Gothic",CenturyGothic,AppleGothic,sans-serif;
  border: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, visibility .3s;
}
.grid .victory {
  background: rgba(0, 10, 0, 0.75);
}

#modeFlag:checked ~ .grid .flags {
  visibility: visible;
}

#modeMine:checked ~ .grid:active ~ .infos .counter:before {
  content: '??' !important;
}

input[id^=f]:checked ~ .infos .counter:before {
  content: '??';
}

input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ .infos .counter:before {
  content: '??';
}

input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ .infos .counter:before {
  content: '??';
}

input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ .infos .counter:before {
  content: '??';
}

input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ input[id^=f]:checked ~ .infos .counter:before {
  content: '??';
}

.grid label:nth-child(2):before {
  content: "1";
  color: #0000ff;
}

.grid label:nth-child(3):before {
  content: '??';
  font-size: .75rem;
}

#c3:checked ~ .grid .error {
  opacity: 1;
  visibility: visible;
}
#c3:checked ~ .grid > label:after {
  visibility: hidden;
}
#c3:checked ~ .grid label:nth-child(3) {
  background-color: #f00;
}
#c3:checked ~ .grid:active ~ .infos .timer .digit, #c3:checked ~ .grid:active ~ .infos .timer .digit:after {
  animation: none;
}
#c3:checked ~ .infos .counter:before {
  content: '??' !important;
}
#c3:checked ~ .infos .timer .digit, #c3:checked ~ .infos .timer .digit:after {
  animation-play-state: paused;
}

.grid label:nth-child(4):before {
  content: "1";
  color: #0000ff;
}

.grid label:nth-child(5):before {
  content: "1";
  color: #0000ff;
}

.grid label:nth-child(6):before {
  content: "1";
  color: #0000ff;
}

.grid label:nth-child(7):before {
  content: "1";
  color: #0000ff;
}

.grid label:nth-child(8):before {
  content: "1";
  color: #0000ff;
}

.grid label:nth-child(9):before {
  content: '??';
  font-size: .75rem;
}

#c9:checked ~ .grid .error {
  opacity: 1;
  visibility: visible;
}
#c9:checked ~ .grid > label:after {
  visibility: hidden;
}
#c9:checked ~ .grid label:nth-child(9) {
  background-color: #f00;
}
#c9:checked ~ .grid:active ~ .infos .timer .digit, #c9:checked ~ .grid:active ~ .infos .timer .digit:after {
  animation: none;
}
#c9:checked ~ .infos .counter:before {
  content: '??' !important;
}
#c9:checked ~ .infos .timer .digit, #c9:checked ~ .infos .timer .digit:after {
  animation-play-state: paused;
}

.grid label:nth-child(11):before {
  content: "1";
  color: #0000ff;
}

.grid label:nth-child(12):before {
  content: "1";
  color: #0000ff;
}

.grid label:nth-child(13):before {
  content: "1";
  color: #0000ff;
}

.grid label:nth-child(14):before {
  content: "2";
  color: #008100;
}

.grid label:nth-child(15):before {
  content: '??';
  font-size: .75rem;
}

#c15:checked ~ .grid .error {
  opacity: 1;
  visibility: visible;
}
#c15:checked ~ .grid > label:after {
  visibility: hidden;
}
#c15:checked ~ .grid label:nth-child(15) {
  background-color: #f00;
}
#c15:checked ~ .grid:active ~ .infos .timer .digit, #c15:checked ~ .grid:active ~ .infos .timer .digit:after {
  animation: none;
}
#c15:checked ~ .infos .counter:before {
  content: '??' !important;
}
#c15:checked ~ .infos .timer .digit, #c15:checked ~ .infos .timer .digit:after {
  animation-play-state: paused;
}

.grid label:nth-child(16):before {
  content: "2";
  color: #008100;
}

.grid label:nth-child(17):before {
  content: "1";
  color: #0000ff;
}

.grid label:nth-child(18):before {
  content: "1";
  color: #0000ff;
}

.grid label:nth-child(19):before {
  content: "1";
  color: #0000ff;
}

.grid label:nth-child(20):before {
  content: "1";
  color: #0000ff;
}

.grid label:nth-child(21):before {
  content: "1";
  color: #0000ff;
}

.grid label:nth-child(23):before {
  content: "2";
  color: #008100;
}

.grid label:nth-child(24):before {
  content: '??';
  font-size: .75rem;
}

#c24:checked ~ .grid .error {
  opacity: 1;
  visibility: visible;
}
#c24:checked ~ .grid > label:after {
  visibility: hidden;
}
#c24:checked ~ .grid label:nth-child(24) {
  background-color: #f00;
}
#c24:checked ~ .grid:active ~ .infos .timer .digit, #c24:checked ~ .grid:active ~ .infos .timer .digit:after {
  animation: none;
}
#c24:checked ~ .infos .counter:before {
  content: '??' !important;
}
#c24:checked ~ .infos .timer .digit, #c24:checked ~ .infos .timer .digit:after {
  animation-play-state: paused;
}

.grid label:nth-child(25):before {
  content: "2";
  color: #008100;
}

.grid label:nth-child(28):before {
  content: "1";
  color: #0000ff;
}

.grid label:nth-child(29):before {
  content: '??';
  font-size: .75rem;
}

#c29:checked ~ .grid .error {
  opacity: 1;
  visibility: visible;
}
#c29:checked ~ .grid > label:after {
  visibility: hidden;
}
#c29:checked ~ .grid label:nth-child(29) {
  background-color: #f00;
}
#c29:checked ~ .grid:active ~ .infos .timer .digit, #c29:checked ~ .grid:active ~ .infos .timer .digit:after {
  animation: none;
}
#c29:checked ~ .infos .counter:before {
  content: '??' !important;
}
#c29:checked ~ .infos .timer .digit, #c29:checked ~ .infos .timer .digit:after {
  animation-play-state: paused;
}

.grid label:nth-child(30):before {
  content: "1";
  color: #0000ff;
}

.grid label:nth-child(31):before {
  content: "1";
  color: #0000ff;
}

.grid label:nth-child(32):before {
  content: "2";
  color: #008100;
}

.grid label:nth-child(33):before {
  content: "2";
  color: #008100;
}

.grid label:nth-child(34):before {
  content: "1";
  color: #0000ff;
}

.grid label:nth-child(37):before {
  content: "2";
  color: #008100;
}

.grid label:nth-child(38):before {
  content: "3";
  color: #ff1300;
}

.grid label:nth-child(39):before {
  content: "2";
  color: #008100;
}

.grid label:nth-child(40):before {
  content: "2";
  color: #008100;
}

.grid label:nth-child(41):before {
  content: '??';
  font-size: .75rem;
}

#c41:checked ~ .grid .error {
  opacity: 1;
  visibility: visible;
}
#c41:checked ~ .grid > label:after {
  visibility: hidden;
}
#c41:checked ~ .grid label:nth-child(41) {
  background-color: #f00;
}
#c41:checked ~ .grid:active ~ .infos .timer .digit, #c41:checked ~ .grid:active ~ .infos .timer .digit:after {
  animation: none;
}
#c41:checked ~ .infos .counter:before {
  content: '??' !important;
}
#c41:checked ~ .infos .timer .digit, #c41:checked ~ .infos .timer .digit:after {
  animation-play-state: paused;
}

.grid label:nth-child(42):before {
  content: "1";
  color: #0000ff;
}

.grid label:nth-child(46):before {
  content: '??';
  font-size: .75rem;
}

#c46:checked ~ .grid .error {
  opacity: 1;
  visibility: visible;
}
#c46:checked ~ .grid > label:after {
  visibility: hidden;
}
#c46:checked ~ .grid label:nth-child(46) {
  background-color: #f00;
}
#c46:checked ~ .grid:active ~ .infos .timer .digit, #c46:checked ~ .grid:active ~ .infos .timer .digit:after {
  animation: none;
}
#c46:checked ~ .infos .counter:before {
  content: '??' !important;
}
#c46:checked ~ .infos .timer .digit, #c46:checked ~ .infos .timer .digit:after {
  animation-play-state: paused;
}

.grid label:nth-child(47):before {
  content: "2";
  color: #008100;
}

.grid label:nth-child(48):before {
  content: '??';
  font-size: .75rem;
}

#c48:checked ~ .grid .error {
  opacity: 1;
  visibility: visible;
}
#c48:checked ~ .grid > label:after {
  visibility: hidden;
}
#c48:checked ~ .grid label:nth-child(48) {
  background-color: #f00;
}
#c48:checked ~ .grid:active ~ .infos .timer .digit, #c48:checked ~ .grid:active ~ .infos .timer .digit:after {
  animation: none;
}
#c48:checked ~ .infos .counter:before {
  content: '??' !important;
}
#c48:checked ~ .infos .timer .digit, #c48:checked ~ .infos .timer .digit:after {
  animation-play-state: paused;
}

.grid label:nth-child(49):before {
  content: "2";
  color: #008100;
}

.grid label:nth-child(50):before {
  content: "1";
  color: #0000ff;
}

.grid label:nth-child(51):before {
  content: "2";
  color: #008100;
}

.grid label:nth-child(52):before {
  content: "1";
  color: #0000ff;
}

.grid label:nth-child(53):before {
  content: "1";
  color: #0000ff;
}

.grid label:nth-child(55):before {
  content: "1";
  color: #0000ff;
}

.grid label:nth-child(56):before {
  content: "2";
  color: #008100;
}

.grid label:nth-child(57):before {
  content: "1";
  color: #0000ff;
}

.grid label:nth-child(58):before {
  content: "1";
  color: #0000ff;
}

.grid label:nth-child(60):before {
  content: "1";
  color: #0000ff;
}

.grid label:nth-child(61):before {
  content: '??';
  font-size: .75rem;
}

#c61:checked ~ .grid .error {
  opacity: 1;
  visibility: visible;
}
#c61:checked ~ .grid > label:after {
  visibility: hidden;
}
#c61:checked ~ .grid label:nth-child(61) {
  background-color: #f00;
}
#c61:checked ~ .grid:active ~ .infos .timer .digit, #c61:checked ~ .grid:active ~ .infos .timer .digit:after {
  animation: none;
}
#c61:checked ~ .infos .counter:before {
  content: '??' !important;
}
#c61:checked ~ .infos .timer .digit, #c61:checked ~ .infos .timer .digit:after {
  animation-play-state: paused;
}

.grid label:nth-child(62):before {
  content: "1";
  color: #0000ff;
}

.grid label:nth-child(67):before {
  content: "1";
  color: #0000ff;
}

.grid label:nth-child(68):before {
  content: "1";
  color: #0000ff;
}

.grid label:nth-child(69):before {
  content: "2";
  color: #008100;
}

.grid label:nth-child(70):before {
  content: "1";
  color: #0000ff;
}

.grid label:nth-child(71):before {
  content: "1";
  color: #0000ff;
}

.grid label:nth-child(76):before {
  content: "1";
  color: #0000ff;
}

.grid label:nth-child(77):before {
  content: '??';
  font-size: .75rem;
}

#c77:checked ~ .grid .error {
  opacity: 1;
  visibility: visible;
}
#c77:checked ~ .grid > label:after {
  visibility: hidden;
}
#c77:checked ~ .grid label:nth-child(77) {
  background-color: #f00;
}
#c77:checked ~ .grid:active ~ .infos .timer .digit, #c77:checked ~ .grid:active ~ .infos .timer .digit:after {
  animation: none;
}
#c77:checked ~ .infos .counter:before {
  content: '??' !important;
}
#c77:checked ~ .infos .timer .digit, #c77:checked ~ .infos .timer .digit:after {
  animation-play-state: paused;
}

.grid label:nth-child(78):before {
  content: "1";
  color: #0000ff;
}

#f1:not(:checked) ~ #f2:not(:checked) ~ #f3:checked ~ #f4:not(:checked) ~ #f5:not(:checked) ~ #f6:not(:checked) ~ #f7:not(:checked) ~ #f8:not(:checked) ~ #f9:checked ~ #f10:not(:checked) ~ #f11:not(:checked) ~ #f12:not(:checked) ~ #f13:not(:checked) ~ #f14:not(:checked) ~ #f15:checked ~ #f16:not(:checked) ~ #f17:not(:checked) ~ #f18:not(:checked) ~ #f19:not(:checked) ~ #f20:not(:checked) ~ #f21:not(:checked) ~ #f22:not(:checked) ~ #f23:not(:checked) ~ #f24:checked ~ #f25:not(:checked) ~ #f26:not(:checked) ~ #f27:not(:checked) ~ #f28:not(:checked) ~ #f29:checked ~ #f30:not(:checked) ~ #f31:not(:checked) ~ #f32:not(:checked) ~ #f33:not(:checked) ~ #f34:not(:checked) ~ #f35:not(:checked) ~ #f36:not(:checked) ~ #f37:not(:checked) ~ #f38:not(:checked) ~ #f39:not(:checked) ~ #f40:not(:checked) ~ #f41:checked ~ #f42:not(:checked) ~ #f43:not(:checked) ~ #f44:not(:checked) ~ #f45:not(:checked) ~ #f46:checked ~ #f47:not(:checked) ~ #f48:checked ~ #f49:not(:checked) ~ #f50:not(:checked) ~ #f51:not(:checked) ~ #f52:not(:checked) ~ #f53:not(:checked) ~ #f54:not(:checked) ~ #f55:not(:checked) ~ #f56:not(:checked) ~ #f57:not(:checked) ~ #f58:not(:checked) ~ #f59:not(:checked) ~ #f60:not(:checked) ~ #f61:checked ~ #f62:not(:checked) ~ #f63:not(:checked) ~ #f64:not(:checked) ~ #f65:not(:checked) ~ #f66:not(:checked) ~ #f67:not(:checked) ~ #f68:not(:checked) ~ #f69:not(:checked) ~ #f70:not(:checked) ~ #f71:not(:checked) ~ #f72:not(:checked) ~ #f73:not(:checked) ~ #f74:not(:checked) ~ #f75:not(:checked) ~ #f76:not(:checked) ~ #f77:checked ~ #f78:not(:checked) ~ #f79:not(:checked) ~ #f80:not(:checked) ~ #f81:not(:checked) ~ .grid > label:after {
  visibility: hidden;
}
#f1:not(:checked) ~ #f2:not(:checked) ~ #f3:checked ~ #f4:not(:checked) ~ #f5:not(:checked) ~ #f6:not(:checked) ~ #f7:not(:checked) ~ #f8:not(:checked) ~ #f9:checked ~ #f10:not(:checked) ~ #f11:not(:checked) ~ #f12:not(:checked) ~ #f13:not(:checked) ~ #f14:not(:checked) ~ #f15:checked ~ #f16:not(:checked) ~ #f17:not(:checked) ~ #f18:not(:checked) ~ #f19:not(:checked) ~ #f20:not(:checked) ~ #f21:not(:checked) ~ #f22:not(:checked) ~ #f23:not(:checked) ~ #f24:checked ~ #f25:not(:checked) ~ #f26:not(:checked) ~ #f27:not(:checked) ~ #f28:not(:checked) ~ #f29:checked ~ #f30:not(:checked) ~ #f31:not(:checked) ~ #f32:not(:checked) ~ #f33:not(:checked) ~ #f34:not(:checked) ~ #f35:not(:checked) ~ #f36:not(:checked) ~ #f37:not(:checked) ~ #f38:not(:checked) ~ #f39:not(:checked) ~ #f40:not(:checked) ~ #f41:checked ~ #f42:not(:checked) ~ #f43:not(:checked) ~ #f44:not(:checked) ~ #f45:not(:checked) ~ #f46:checked ~ #f47:not(:checked) ~ #f48:checked ~ #f49:not(:checked) ~ #f50:not(:checked) ~ #f51:not(:checked) ~ #f52:not(:checked) ~ #f53:not(:checked) ~ #f54:not(:checked) ~ #f55:not(:checked) ~ #f56:not(:checked) ~ #f57:not(:checked) ~ #f58:not(:checked) ~ #f59:not(:checked) ~ #f60:not(:checked) ~ #f61:checked ~ #f62:not(:checked) ~ #f63:not(:checked) ~ #f64:not(:checked) ~ #f65:not(:checked) ~ #f66:not(:checked) ~ #f67:not(:checked) ~ #f68:not(:checked) ~ #f69:not(:checked) ~ #f70:not(:checked) ~ #f71:not(:checked) ~ #f72:not(:checked) ~ #f73:not(:checked) ~ #f74:not(:checked) ~ #f75:not(:checked) ~ #f76:not(:checked) ~ #f77:checked ~ #f78:not(:checked) ~ #f79:not(:checked) ~ #f80:not(:checked) ~ #f81:not(:checked) ~ .grid .victory {
  opacity: 1;
  visibility: visible;
}
#f1:not(:checked) ~ #f2:not(:checked) ~ #f3:checked ~ #f4:not(:checked) ~ #f5:not(:checked) ~ #f6:not(:checked) ~ #f7:not(:checked) ~ #f8:not(:checked) ~ #f9:checked ~ #f10:not(:checked) ~ #f11:not(:checked) ~ #f12:not(:checked) ~ #f13:not(:checked) ~ #f14:not(:checked) ~ #f15:checked ~ #f16:not(:checked) ~ #f17:not(:checked) ~ #f18:not(:checked) ~ #f19:not(:checked) ~ #f20:not(:checked) ~ #f21:not(:checked) ~ #f22:not(:checked) ~ #f23:not(:checked) ~ #f24:checked ~ #f25:not(:checked) ~ #f26:not(:checked) ~ #f27:not(:checked) ~ #f28:not(:checked) ~ #f29:checked ~ #f30:not(:checked) ~ #f31:not(:checked) ~ #f32:not(:checked) ~ #f33:not(:checked) ~ #f34:not(:checked) ~ #f35:not(:checked) ~ #f36:not(:checked) ~ #f37:not(:checked) ~ #f38:not(:checked) ~ #f39:not(:checked) ~ #f40:not(:checked) ~ #f41:checked ~ #f42:not(:checked) ~ #f43:not(:checked) ~ #f44:not(:checked) ~ #f45:not(:checked) ~ #f46:checked ~ #f47:not(:checked) ~ #f48:checked ~ #f49:not(:checked) ~ #f50:not(:checked) ~ #f51:not(:checked) ~ #f52:not(:checked) ~ #f53:not(:checked) ~ #f54:not(:checked) ~ #f55:not(:checked) ~ #f56:not(:checked) ~ #f57:not(:checked) ~ #f58:not(:checked) ~ #f59:not(:checked) ~ #f60:not(:checked) ~ #f61:checked ~ #f62:not(:checked) ~ #f63:not(:checked) ~ #f64:not(:checked) ~ #f65:not(:checked) ~ #f66:not(:checked) ~ #f67:not(:checked) ~ #f68:not(:checked) ~ #f69:not(:checked) ~ #f70:not(:checked) ~ #f71:not(:checked) ~ #f72:not(:checked) ~ #f73:not(:checked) ~ #f74:not(:checked) ~ #f75:not(:checked) ~ #f76:not(:checked) ~ #f77:checked ~ #f78:not(:checked) ~ #f79:not(:checked) ~ #f80:not(:checked) ~ #f81:not(:checked) ~ .grid:active ~ .infos .timer .digit, #f1:not(:checked) ~ #f2:not(:checked) ~ #f3:checked ~ #f4:not(:checked) ~ #f5:not(:checked) ~ #f6:not(:checked) ~ #f7:not(:checked) ~ #f8:not(:checked) ~ #f9:checked ~ #f10:not(:checked) ~ #f11:not(:checked) ~ #f12:not(:checked) ~ #f13:not(:checked) ~ #f14:not(:checked) ~ #f15:checked ~ #f16:not(:checked) ~ #f17:not(:checked) ~ #f18:not(:checked) ~ #f19:not(:checked) ~ #f20:not(:checked) ~ #f21:not(:checked) ~ #f22:not(:checked) ~ #f23:not(:checked) ~ #f24:checked ~ #f25:not(:checked) ~ #f26:not(:checked) ~ #f27:not(:checked) ~ #f28:not(:checked) ~ #f29:checked ~ #f30:not(:checked) ~ #f31:not(:checked) ~ #f32:not(:checked) ~ #f33:not(:checked) ~ #f34:not(:checked) ~ #f35:not(:checked) ~ #f36:not(:checked) ~ #f37:not(:checked) ~ #f38:not(:checked) ~ #f39:not(:checked) ~ #f40:not(:checked) ~ #f41:checked ~ #f42:not(:checked) ~ #f43:not(:checked) ~ #f44:not(:checked) ~ #f45:not(:checked) ~ #f46:checked ~ #f47:not(:checked) ~ #f48:checked ~ #f49:not(:checked) ~ #f50:not(:checked) ~ #f51:not(:checked) ~ #f52:not(:checked) ~ #f53:not(:checked) ~ #f54:not(:checked) ~ #f55:not(:checked) ~ #f56:not(:checked) ~ #f57:not(:checked) ~ #f58:not(:checked) ~ #f59:not(:checked) ~ #f60:not(:checked) ~ #f61:checked ~ #f62:not(:checked) ~ #f63:not(:checked) ~ #f64:not(:checked) ~ #f65:not(:checked) ~ #f66:not(:checked) ~ #f67:not(:checked) ~ #f68:not(:checked) ~ #f69:not(:checked) ~ #f70:not(:checked) ~ #f71:not(:checked) ~ #f72:not(:checked) ~ #f73:not(:checked) ~ #f74:not(:checked) ~ #f75:not(:checked) ~ #f76:not(:checked) ~ #f77:checked ~ #f78:not(:checked) ~ #f79:not(:checked) ~ #f80:not(:checked) ~ #f81:not(:checked) ~ .grid:active ~ .infos .timer .digit:after {
  animation: none;
}

#f1:not(:checked) ~ #f2:not(:checked) ~ #f3:checked ~ #f4:not(:checked) ~ #f5:not(:checked) ~ #f6:not(:checked) ~ #f7:not(:checked) ~ #f8:not(:checked) ~ #f9:checked ~ #f10:not(:checked) ~ #f11:not(:checked) ~ #f12:not(:checked) ~ #f13:not(:checked) ~ #f14:not(:checked) ~ #f15:checked ~ #f16:not(:checked) ~ #f17:not(:checked) ~ #f18:not(:checked) ~ #f19:not(:checked) ~ #f20:not(:checked) ~ #f21:not(:checked) ~ #f22:not(:checked) ~ #f23:not(:checked) ~ #f24:checked ~ #f25:not(:checked) ~ #f26:not(:checked) ~ #f27:not(:checked) ~ #f28:not(:checked) ~ #f29:checked ~ #f30:not(:checked) ~ #f31:not(:checked) ~ #f32:not(:checked) ~ #f33:not(:checked) ~ #f34:not(:checked) ~ #f35:not(:checked) ~ #f36:not(:checked) ~ #f37:not(:checked) ~ #f38:not(:checked) ~ #f39:not(:checked) ~ #f40:not(:checked) ~ #f41:checked ~ #f42:not(:checked) ~ #f43:not(:checked) ~ #f44:not(:checked) ~ #f45:not(:checked) ~ #f46:checked ~ #f47:not(:checked) ~ #f48:checked ~ #f49:not(:checked) ~ #f50:not(:checked) ~ #f51:not(:checked) ~ #f52:not(:checked) ~ #f53:not(:checked) ~ #f54:not(:checked) ~ #f55:not(:checked) ~ #f56:not(:checked) ~ #f57:not(:checked) ~ #f58:not(:checked) ~ #f59:not(:checked) ~ #f60:not(:checked) ~ #f61:checked ~ #f62:not(:checked) ~ #f63:not(:checked) ~ #f64:not(:checked) ~ #f65:not(:checked) ~ #f66:not(:checked) ~ #f67:not(:checked) ~ #f68:not(:checked) ~ #f69:not(:checked) ~ #f70:not(:checked) ~ #f71:not(:checked) ~ #f72:not(:checked) ~ #f73:not(:checked) ~ #f74:not(:checked) ~ #f75:not(:checked) ~ #f76:not(:checked) ~ #f77:checked ~ #f78:not(:checked) ~ #f79:not(:checked) ~ #f80:not(:checked) ~ #f81:not(:checked) ~ .infos .counter:before {
  content: '??';
}
#f1:not(:checked) ~ #f2:not(:checked) ~ #f3:checked ~ #f4:not(:checked) ~ #f5:not(:checked) ~ #f6:not(:checked) ~ #f7:not(:checked) ~ #f8:not(:checked) ~ #f9:checked ~ #f10:not(:checked) ~ #f11:not(:checked) ~ #f12:not(:checked) ~ #f13:not(:checked) ~ #f14:not(:checked) ~ #f15:checked ~ #f16:not(:checked) ~ #f17:not(:checked) ~ #f18:not(:checked) ~ #f19:not(:checked) ~ #f20:not(:checked) ~ #f21:not(:checked) ~ #f22:not(:checked) ~ #f23:not(:checked) ~ #f24:checked ~ #f25:not(:checked) ~ #f26:not(:checked) ~ #f27:not(:checked) ~ #f28:not(:checked) ~ #f29:checked ~ #f30:not(:checked) ~ #f31:not(:checked) ~ #f32:not(:checked) ~ #f33:not(:checked) ~ #f34:not(:checked) ~ #f35:not(:checked) ~ #f36:not(:checked) ~ #f37:not(:checked) ~ #f38:not(:checked) ~ #f39:not(:checked) ~ #f40:not(:checked) ~ #f41:checked ~ #f42:not(:checked) ~ #f43:not(:checked) ~ #f44:not(:checked) ~ #f45:not(:checked) ~ #f46:checked ~ #f47:not(:checked) ~ #f48:checked ~ #f49:not(:checked) ~ #f50:not(:checked) ~ #f51:not(:checked) ~ #f52:not(:checked) ~ #f53:not(:checked) ~ #f54:not(:checked) ~ #f55:not(:checked) ~ #f56:not(:checked) ~ #f57:not(:checked) ~ #f58:not(:checked) ~ #f59:not(:checked) ~ #f60:not(:checked) ~ #f61:checked ~ #f62:not(:checked) ~ #f63:not(:checked) ~ #f64:not(:checked) ~ #f65:not(:checked) ~ #f66:not(:checked) ~ #f67:not(:checked) ~ #f68:not(:checked) ~ #f69:not(:checked) ~ #f70:not(:checked) ~ #f71:not(:checked) ~ #f72:not(:checked) ~ #f73:not(:checked) ~ #f74:not(:checked) ~ #f75:not(:checked) ~ #f76:not(:checked) ~ #f77:checked ~ #f78:not(:checked) ~ #f79:not(:checked) ~ #f80:not(:checked) ~ #f81:not(:checked) ~ .infos .timer .digit, #f1:not(:checked) ~ #f2:not(:checked) ~ #f3:checked ~ #f4:not(:checked) ~ #f5:not(:checked) ~ #f6:not(:checked) ~ #f7:not(:checked) ~ #f8:not(:checked) ~ #f9:checked ~ #f10:not(:checked) ~ #f11:not(:checked) ~ #f12:not(:checked) ~ #f13:not(:checked) ~ #f14:not(:checked) ~ #f15:checked ~ #f16:not(:checked) ~ #f17:not(:checked) ~ #f18:not(:checked) ~ #f19:not(:checked) ~ #f20:not(:checked) ~ #f21:not(:checked) ~ #f22:not(:checked) ~ #f23:not(:checked) ~ #f24:checked ~ #f25:not(:checked) ~ #f26:not(:checked) ~ #f27:not(:checked) ~ #f28:not(:checked) ~ #f29:checked ~ #f30:not(:checked) ~ #f31:not(:checked) ~ #f32:not(:checked) ~ #f33:not(:checked) ~ #f34:not(:checked) ~ #f35:not(:checked) ~ #f36:not(:checked) ~ #f37:not(:checked) ~ #f38:not(:checked) ~ #f39:not(:checked) ~ #f40:not(:checked) ~ #f41:checked ~ #f42:not(:checked) ~ #f43:not(:checked) ~ #f44:not(:checked) ~ #f45:not(:checked) ~ #f46:checked ~ #f47:not(:checked) ~ #f48:checked ~ #f49:not(:checked) ~ #f50:not(:checked) ~ #f51:not(:checked) ~ #f52:not(:checked) ~ #f53:not(:checked) ~ #f54:not(:checked) ~ #f55:not(:checked) ~ #f56:not(:checked) ~ #f57:not(:checked) ~ #f58:not(:checked) ~ #f59:not(:checked) ~ #f60:not(:checked) ~ #f61:checked ~ #f62:not(:checked) ~ #f63:not(:checked) ~ #f64:not(:checked) ~ #f65:not(:checked) ~ #f66:not(:checked) ~ #f67:not(:checked) ~ #f68:not(:checked) ~ #f69:not(:checked) ~ #f70:not(:checked) ~ #f71:not(:checked) ~ #f72:not(:checked) ~ #f73:not(:checked) ~ #f74:not(:checked) ~ #f75:not(:checked) ~ #f76:not(:checked) ~ #f77:checked ~ #f78:not(:checked) ~ #f79:not(:checked) ~ #f80:not(:checked) ~ #f81:not(:checked) ~ .infos .timer .digit:after {
  animation-play-state: paused;
}

#f1:checked ~ .grid label:nth-child(1):after {
  content: '??';
  pointer-events: none;
  visibility: visible !important;
}
#f1:checked ~ #modeFlag:checked ~ .grid .flags label:nth-child(1):after {
  pointer-events: auto;
}

#c1:checked ~ .grid label:nth-child(1):after, #c1:checked ~ .grid label:nth-child(10):after, #c1:checked ~ .grid label:nth-child(19):after, #c1:checked ~ .grid label:nth-child(2):after, #c1:checked ~ .grid label:nth-child(11):after, #c1:checked ~ .grid label:nth-child(20):after, #c1:checked ~ .grid label:nth-child(2):after, #c1:checked ~ .grid label:nth-child(11):after {
  pointer-events: none;
  visibility: hidden;
}

#c10:checked ~ .grid label:nth-child(1):after, #c10:checked ~ .grid label:nth-child(10):after, #c10:checked ~ .grid label:nth-child(19):after, #c10:checked ~ .grid label:nth-child(2):after, #c10:checked ~ .grid label:nth-child(11):after, #c10:checked ~ .grid label:nth-child(20):after, #c10:checked ~ .grid label:nth-child(2):after, #c10:checked ~ .grid label:nth-child(11):after {
  pointer-events: none;
  visibility: hidden;
}

#f2:checked ~ .grid label:nth-child(2):after {
  content: '??';
  pointer-events: none;
  visibility: visible !important;
}
#f2:checked ~ #modeFlag:checked ~ .grid .flags label:nth-child(2):after {
  pointer-events: auto;
}

#c2:checked ~ .grid label:nth-child(2):after {
  pointer-events: none;
  visibility: hidden;
}

#f3:checked ~ .grid label:nth-child(3):after {
  content: '??';
  pointer-events: none;
  visibility: visible !important;
}
#f3:checked ~ #modeFlag:checked ~ .grid .flags label:nth-child(3):after {
  pointer-events: auto;
}

#c3:checked ~ .grid label:nth-child(3):after {
  pointer-events: none;
  visibility: hidden;
}

#f4:checked ~ .grid label:nth-child(4):after {
  content: '??';
  pointer-events: none;
  visibility: visible !important;
}
#f4:checked ~ #modeFlag:checked ~ .grid .flags label:nth-child(4):after {
  pointer-events: auto;
}

#c4:checked ~ .grid label:nth-child(4):after {
  pointer-events: none;
  visibility: hidden;
}

#f5:checked ~ .grid label:nth-child(5):after {
  content: '??';
  pointer-events: none;
  visibility: visible !important;
}
#f5:checked ~ #modeFlag:checked ~ .grid .flags label:nth-child(5):after {
  pointer-events: auto;
}

#c5:checked ~ .grid label:nth-child(5):after {
  pointer-events: none;
  visibility: hidden;
}

#f6:checked ~ .grid label:nth-child(6):after {
  content: '??';
  pointer-events: none;
  visibility: visible !important;
}
#f6:checked ~ #modeFlag:checked ~ .grid .flags label:nth-child(6):after {
  pointer-events: auto;
}

#c6:checked ~ .grid label:nth-child(6):after {
  pointer-events: none;
  visibility: hidden;
}

#f7:checked ~ .grid label:nth-child(7):after {
  content: '??';
  pointer-events: none;
  visibility: visible !important;
}
#f7:checked ~ #modeFlag:checked ~ .grid .flags label:nth-child(7):after {
  pointer-events: auto;
}

#c7:checked ~ .grid label:nth-child(7):after {
  pointer-events: none;
  visibility: hidden;
}

#f8:checked ~ .grid label:nth-child(8):after {
  content: '??';
  pointer-events: none;
  visibility: visible !important;
}
#f8:checked ~ #modeFlag:checked ~ .grid .flags label:nth-child(8):after {
  pointer-events: auto;
}

#c8:checked ~ .grid label:nth-child(8):after {
  pointer-events: none;
  visibility: hidden;
}

#f9:checked ~ .grid label:nth-child(9):after {
  content: '??';
  pointer-events: none;
  visibility: visible !important;
}
#f9:checked ~ #modeFlag:checked ~ .grid .flags label:nth-child(9):after {
  pointer-events: auto;
}

#c9:checked ~ .grid label:nth-child(9):after {
  pointer-events: none;
  visibility: hidden;
}

#f10:checked ~ .grid label:nth-child(10):after {
  content: '??';
  pointer-events: none;
  visibility: visible !important;
}
#f10:checked ~ #modeFlag:checked ~ .grid .flags label:nth-child(10):after {
  pointer-events: auto;
}

#f11:checked ~ .grid label:nth-child(11):after {
  content: '??';
  pointer-events: none;
  visibility: visible !important;
}
#f11:checked ~ #modeFlag:checked ~ .grid .flags label:nth-child(11):after {
  pointer-events: auto;
}

#c11:checked ~ .grid label:nth-child(11):after {
  pointer-events: none;
  visibility: hidden;
}

#f12:checked ~ .grid label:nth-child(12):after {
  content: '??';
  pointer-events: none;
  visibility: visible !important;
}
#f12:checked ~ #modeFlag:checked ~ .grid .flags label:nth-child(12):after {
  pointer-events: auto;
}

#c12:checked ~ .grid label:nth-child(12):after {
  pointer-events: none;
  visibility: hidden;
}

#f13:checked ~ .grid label:nth-child(13):after {
  content: '??';
  pointer-events: none;
  visibility: visible !important;
}
#f13:checked ~ #modeFlag:checked ~ .grid .flags label:nth-child(13):after {
  pointer-events: auto;
}

#c13:checked ~ .grid label:nth-child(13):after {
  pointer-events: none;
  visibility: hidden;
}

#f14:checked ~ .grid label:nth-child(14):after {
  content: '??';
  pointer-events: none;
  visibility: visible !important;
}
#f14:checked ~ #modeFlag:checked ~ .grid .flags label:nth-child(14):after {
  pointer-events: auto;
}

#c14:checked ~ .grid label:nth-child(14):after {
  pointer-events: none;
  visibility: hidden;
}

#f15:checked ~ .grid label:nth-child(15):after {
  content: '??';
  pointer-events: none;
  visibility: visible !important;
}
#f15:checked ~ #modeFlag:checked ~ .grid .flags label:nth-child(15):after {
  pointer-events: auto;
}

#c15:checked ~ .grid label:nth-child(15):after {
  pointer-events: none;
  visibility: hidden;
}

#f16:checked ~ .grid label:nth-child(16):after {
  content: '??';
  pointer-events: none;
  visibility: visible !important;
}
#f16:checked ~ #modeFlag:checked ~ .grid .flags label:nth-child(16):after {
  pointer-events: auto;
}

#c16:checked ~ .grid label:nth-child(16):after {
  pointer-events: none;
  visibility: hidden;
}

#f17:checked ~ .grid label:nth-child(17):after {
  content: '??';
  pointer-events: none;
  visibility: visible !important;
}
#f17:checked ~ #modeFlag:checked ~ .grid .flags label:nth-child(17):after {
  pointer-events: auto;
}

#c17:checked ~ .grid label:nth-child(17):after {
  pointer-events: none;
  visibility: hidden;
}

#f18:checked ~ .grid label:nth-child(18):after {
  content: '??';
  pointer-events: none;
  visibility: visible !important;
}
#f18:checked ~ #modeFlag:checked ~ .grid .flags label:nth-child(18):after {
  pointer-events: auto;
}

#c18:checked ~ .grid label:nth-child(18):after {
  pointer-events: none;
  visibility: hidden;
}

#f19:checked ~ .grid label:nth-child(19):after {
  content: '??';
  pointer-events: none;
  visibility: visible !important;
}
#f19:checked ~ #modeFlag:checked ~ .grid .flags label:nth-child(19):after {
  pointer-events: auto;
}

#c19:checked ~ .grid label:nth-child(19):after {
  pointer-events: none;
  visibility: hidden;
}

#f20:checked ~ .grid label:nth-child(20):after {
  content: '??';
  pointer-events: none;
  visibility: visible !important;
}
#f20:checked ~ #modeFlag:checked ~ .grid .flags label:nth-child(20):after {
  pointer-events: auto;
}

#c20:checked ~ .grid label:nth-child(20):after {
  pointer-events: none;
  visibility: hidden;
}

#f21:checked ~ .grid label:nth-child(21):after {
  content: '??';
  pointer-events: none;
  visibility: visible !important;
}
#f21:checked ~ #modeFlag:checked ~ .grid .flags label:nth-child(21):after {
  pointer-events: auto;
}

#c21:checked ~ .grid label:nth-child(21):after {
  pointer-events: none;
  visibility: hidden;
}

#f22:checked ~ .grid label:nth-child(22):after {
  content: '??';
  pointer-events: none;
  visibility: visible !important;
}
#f22:checked ~ #modeFlag:checked ~ .grid .flags label:nth-child(22):after {
  pointer-events: auto;
}

#c22:checked ~ .grid label:nth-child(22):after, #c22:checked ~ .grid label:nth-child(12):after, #c22:checked ~ .grid label:nth-child(21):after, #c22:checked ~ .grid label:nth-child(30):after, #c22:checked ~ .grid label:nth-child(13):after, #c22:checked ~ .grid label:nth-child(31):after, #c22:checked ~ .grid label:nth-child(14):after, #c22:checked ~ .grid label:nth-child(23):after, #c22:checked ~ .grid label:nth-child(32):after {
  pointer-events: none;
  visibility: hidden;
}

#f23:checked ~ .grid label:nth-child(23):after {
  content: '??';
  pointer-events: none;
  visibility: visible !important;
}
#f23:checked ~ #modeFlag:checked ~ .grid .flags label:nth-child(23):after {
  pointer-events: auto;
}

#c23:checked ~ .grid label:nth-child(23):after {
  pointer-events: none;
  visibility: hidden;
}

#f24:checked ~ .grid label:nth-child(24):after {
  content: '??';
  pointer-events: none;
  visibility: visible !important;
}
#f24:checked ~ #modeFlag:checked ~ .grid .flags label:nth-child(24):after {
  pointer-events: auto;
}

#c24:checked ~ .grid label:nth-child(24):after {
  pointer-events: none;
  visibility: hidden;
}

#f25:checked ~ .grid label:nth-child(25):after {
  content: '??';
  pointer-events: none;
  visibility: visible !important;
}
#f25:checked ~ #modeFlag:checked ~ .grid .flags label:nth-child(25):after {
  pointer-events: auto;
}

#c25:checked ~ .grid label:nth-child(25):after {
  pointer-events: none;
  visibility: hidden;
}

#f26:checked ~ .grid label:nth-child(26):after {
  content: '??';
  pointer-events: none;
  visibility: visible !important;
}
#f26:checked ~ #modeFlag:checked ~ .grid .flags label:nth-child(26):after {
  pointer-events: auto;
}

#c26:checked ~ .grid label:nth-child(26):after, #c26:checked ~ .grid label:nth-child(16):after, #c26:checked ~ .grid label:nth-child(25):after, #c26:checked ~ .grid label:nth-child(34):after, #c26:checked ~ .grid label:nth-child(17):after, #c26:checked ~ .grid label:nth-child(35):after, #c26:checked ~ .grid label:nth-child(25):after, #c26:checked ~ .grid label:nth-child(34):after, #c26:checked ~ .grid label:nth-child(43):after, #c26:checked ~ .grid label:nth-child(33):after, #c26:checked ~ .grid label:nth-child(42):after, #c26:checked ~ .grid label:nth-child(51):after, #c26:checked ~ .grid label:nth-child(34):after, #c26:checked ~ .grid label:nth-child(52):after, #c26:checked ~ .grid label:nth-child(44):after, #c26:checked ~ .grid label:nth-child(34):after, #c26:checked ~ .grid label:nth-child(52):after, #c26:checked ~ .grid label:nth-child(53):after, #c26:checked ~ .grid label:nth-child(36):after, #c26:checked ~ .grid label:nth-child(27):after, #c26:checked ~ .grid label:nth-child(17):after, #c26:checked ~ .grid label:nth-child(18):after, #c26:checked ~ .grid label:nth-child(45):after, #c26:checked ~ .grid label:nth-child(53):after, #c26:checked ~ .grid label:nth-child(54):after, #c26:checked ~ .grid label:nth-child(53):after, #c26:checked ~ .grid label:nth-child(62):after, #c26:checked ~ .grid label:nth-child(63):after, #c26:checked ~ .grid label:nth-child(53):after, #c26:checked ~ .grid label:nth-child(62):after, #c26:checked ~ .grid label:nth-child(71):after, #c26:checked ~ .grid label:nth-child(72):after, #c26:checked ~ .grid label:nth-child(62):after, #c26:checked ~ .grid label:nth-child(71):after, #c26:checked ~ .grid label:nth-child(80):after, #c26:checked ~ .grid label:nth-child(70):after, #c26:checked ~ .grid label:nth-child(79):after, #c26:checked ~ .grid label:nth-child(69):after, #c26:checked ~ .grid label:nth-child(78):after, #c26:checked ~ .grid label:nth-child(70):after, #c26:checked ~ .grid label:nth-child(71):after, #c26:checked ~ .grid label:nth-child(71):after, #c26:checked ~ .grid label:nth-child(81):after, #c26:checked ~ .grid label:nth-child(71):after, #c26:checked ~ .grid label:nth-child(53):after, #c26:checked ~ .grid label:nth-child(18):after {
  pointer-events: none;
  visibility: hidden;
}

#c35:checked ~ .grid label:nth-child(26):after, #c35:checked ~ .grid label:nth-child(16):after, #c35:checked ~ .grid label:nth-child(25):after, #c35:checked ~ .grid label:nth-child(34):after, #c35:checked ~ .grid label:nth-child(17):after, #c35:checked ~ .grid label:nth-child(35):after, #c35:checked ~ .grid label:nth-child(25):after, #c35:checked ~ .grid label:nth-child(34):after, #c35:checked ~ .grid label:nth-child(43):after, #c35:checked ~ .grid label:nth-child(33):after, #c35:checked ~ .grid label:nth-child(42):after, #c35:checked ~ .grid label:nth-child(51):after, #c35:checked ~ .grid label:nth-child(34):after, #c35:checked ~ .grid label:nth-child(52):after, #c35:checked ~ .grid label:nth-child(44):after, #c35:checked ~ .grid label:nth-child(34):after, #c35:checked ~ .grid label:nth-child(52):after, #c35:checked ~ .grid label:nth-child(53):after, #c35:checked ~ .grid label:nth-child(36):after, #c35:checked ~ .grid label:nth-child(27):after, #c35:checked ~ .grid label:nth-child(17):after, #c35:checked ~ .grid label:nth-child(18):after, #c35:checked ~ .grid label:nth-child(45):after, #c35:checked ~ .grid label:nth-child(53):after, #c35:checked ~ .grid label:nth-child(54):after, #c35:checked ~ .grid label:nth-child(53):after, #c35:checked ~ .grid label:nth-child(62):after, #c35:checked ~ .grid label:nth-child(63):after, #c35:checked ~ .grid label:nth-child(53):after, #c35:checked ~ .grid label:nth-child(62):after, #c35:checked ~ .grid label:nth-child(71):after, #c35:checked ~ .grid label:nth-child(72):after, #c35:checked ~ .grid label:nth-child(62):after, #c35:checked ~ .grid label:nth-child(71):after, #c35:checked ~ .grid label:nth-child(80):after, #c35:checked ~ .grid label:nth-child(70):after, #c35:checked ~ .grid label:nth-child(79):after, #c35:checked ~ .grid label:nth-child(69):after, #c35:checked ~ .grid label:nth-child(78):after, #c35:checked ~ .grid label:nth-child(70):after, #c35:checked ~ .grid label:nth-child(71):after, #c35:checked ~ .grid label:nth-child(71):after, #c35:checked ~ .grid label:nth-child(81):after, #c35:checked ~ .grid label:nth-child(71):after, #c35:checked ~ .grid label:nth-child(53):after, #c35:checked ~ .grid label:nth-child(18):after {
  pointer-events: none;
  visibility: hidden;
}

#c43:checked ~ .grid label:nth-child(26):after, #c43:checked ~ .grid label:nth-child(16):after, #c43:checked ~ .grid label:nth-child(25):after, #c43:checked ~ .grid label:nth-child(34):after, #c43:checked ~ .grid label:nth-child(17):after, #c43:checked ~ .grid label:nth-child(35):after, #c43:checked ~ .grid label:nth-child(25):after, #c43:checked ~ .grid label:nth-child(34):after, #c43:checked ~ .grid label:nth-child(43):after, #c43:checked ~ .grid label:nth-child(33):after, #c43:checked ~ .grid label:nth-child(42):after, #c43:checked ~ .grid label:nth-child(51):after, #c43:checked ~ .grid label:nth-child(34):after, #c43:checked ~ .grid label:nth-child(52):after, #c43:checked ~ .grid label:nth-child(44):after, #c43:checked ~ .grid label:nth-child(34):after, #c43:checked ~ .grid label:nth-child(52):after, #c43:checked ~ .grid label:nth-child(53):after, #c43:checked ~ .grid label:nth-child(36):after, #c43:checked ~ .grid label:nth-child(27):after, #c43:checked ~ .grid label:nth-child(17):after, #c43:checked ~ .grid label:nth-child(18):after, #c43:checked ~ .grid label:nth-child(45):after, #c43:checked ~ .grid label:nth-child(53):after, #c43:checked ~ .grid label:nth-child(54):after, #c43:checked ~ .grid label:nth-child(53):after, #c43:checked ~ .grid label:nth-child(62):after, #c43:checked ~ .grid label:nth-child(63):after, #c43:checked ~ .grid label:nth-child(53):after, #c43:checked ~ .grid label:nth-child(62):after, #c43:checked ~ .grid label:nth-child(71):after, #c43:checked ~ .grid label:nth-child(72):after, #c43:checked ~ .grid label:nth-child(62):after, #c43:checked ~ .grid label:nth-child(71):after, #c43:checked ~ .grid label:nth-child(80):after, #c43:checked ~ .grid label:nth-child(70):after, #c43:checked ~ .grid label:nth-child(79):after, #c43:checked ~ .grid label:nth-child(69):after, #c43:checked ~ .grid label:nth-child(78):after, #c43:checked ~ .grid label:nth-child(70):after, #c43:checked ~ .grid label:nth-child(71):after, #c43:checked ~ .grid label:nth-child(71):after, #c43:checked ~ .grid label:nth-child(81):after, #c43:checked ~ .grid label:nth-child(71):after, #c43:checked ~ .grid label:nth-child(53):after, #c43:checked ~ .grid label:nth-child(18):after {
  pointer-events: none;
  visibility: hidden;
}

#c44:checked ~ .grid label:nth-child(26):after, #c44:checked ~ .grid label:nth-child(16):after, #c44:checked ~ .grid label:nth-child(25):after, #c44:checked ~ .grid label:nth-child(34):after, #c44:checked ~ .grid label:nth-child(17):after, #c44:checked ~ .grid label:nth-child(35):after, #c44:checked ~ .grid label:nth-child(25):after, #c44:checked ~ .grid label:nth-child(34):after, #c44:checked ~ .grid label:nth-child(43):after, #c44:checked ~ .grid label:nth-child(33):after, #c44:checked ~ .grid label:nth-child(42):after, #c44:checked ~ .grid label:nth-child(51):after, #c44:checked ~ .grid label:nth-child(34):after, #c44:checked ~ .grid label:nth-child(52):after, #c44:checked ~ .grid label:nth-child(44):after, #c44:checked ~ .grid label:nth-child(34):after, #c44:checked ~ .grid label:nth-child(52):after, #c44:checked ~ .grid label:nth-child(53):after, #c44:checked ~ .grid label:nth-child(36):after, #c44:checked ~ .grid label:nth-child(27):after, #c44:checked ~ .grid label:nth-child(17):after, #c44:checked ~ .grid label:nth-child(18):after, #c44:checked ~ .grid label:nth-child(45):after, #c44:checked ~ .grid label:nth-child(53):after, #c44:checked ~ .grid label:nth-child(54):after, #c44:checked ~ .grid label:nth-child(53):after, #c44:checked ~ .grid label:nth-child(62):after, #c44:checked ~ .grid label:nth-child(63):after, #c44:checked ~ .grid label:nth-child(53):after, #c44:checked ~ .grid label:nth-child(62):after, #c44:checked ~ .grid label:nth-child(71):after, #c44:checked ~ .grid label:nth-child(72):after, #c44:checked ~ .grid label:nth-child(62):after, #c44:checked ~ .grid label:nth-child(71):after, #c44:checked ~ .grid label:nth-child(80):after, #c44:checked ~ .grid label:nth-child(70):after, #c44:checked ~ .grid label:nth-child(79):after, #c44:checked ~ .grid label:nth-child(69):after, #c44:checked ~ .grid label:nth-child(78):after, #c44:checked ~ .grid label:nth-child(70):after, #c44:checked ~ .grid label:nth-child(71):after, #c44:checked ~ .grid label:nth-child(71):after, #c44:checked ~ .grid label:nth-child(81):after, #c44:checked ~ .grid label:nth-child(71):after, #c44:checked ~ .grid label:nth-child(53):after, #c44:checked ~ .grid label:nth-child(18):after {
  pointer-events: none;
  visibility: hidden;
}

#c36:checked ~ .grid label:nth-child(26):after, #c36:checked ~ .grid label:nth-child(16):after, #c36:checked ~ .grid label:nth-child(25):after, #c36:checked ~ .grid label:nth-child(34):after, #c36:checked ~ .grid label:nth-child(17):after, #c36:checked ~ .grid label:nth-child(35):after, #c36:checked ~ .grid label:nth-child(25):after, #c36:checked ~ .grid label:nth-child(34):after, #c36:checked ~ .grid label:nth-child(43):after, #c36:checked ~ .grid label:nth-child(33):after, #c36:checked ~ .grid label:nth-child(42):after, #c36:checked ~ .grid label:nth-child(51):after, #c36:checked ~ .grid label:nth-child(34):after, #c36:checked ~ .grid label:nth-child(52):after, #c36:checked ~ .grid label:nth-child(44):after, #c36:checked ~ .grid label:nth-child(34):after, #c36:checked ~ .grid label:nth-child(52):after, #c36:checked ~ .grid label:nth-child(53):after, #c36:checked ~ .grid label:nth-child(36):after, #c36:checked ~ .grid label:nth-child(27):after, #c36:checked ~ .grid label:nth-child(17):after, #c36:checked ~ .grid label:nth-child(18):after, #c36:checked ~ .grid label:nth-child(45):after, #c36:checked ~ .grid label:nth-child(53):after, #c36:checked ~ .grid label:nth-child(54):after, #c36:checked ~ .grid label:nth-child(53):after, #c36:checked ~ .grid label:nth-child(62):after, #c36:checked ~ .grid label:nth-child(63):after, #c36:checked ~ .grid label:nth-child(53):after, #c36:checked ~ .grid label:nth-child(62):after, #c36:checked ~ .grid label:nth-child(71):after, #c36:checked ~ .grid label:nth-child(72):after, #c36:checked ~ .grid label:nth-child(62):after, #c36:checked ~ .grid label:nth-child(71):after, #c36:checked ~ .grid label:nth-child(80):after, #c36:checked ~ .grid label:nth-child(70):after, #c36:checked ~ .grid label:nth-child(79):after, #c36:checked ~ .grid label:nth-child(69):after, #c36:checked ~ .grid label:nth-child(78):after, #c36:checked ~ .grid label:nth-child(70):after, #c36:checked ~ .grid label:nth-child(71):after, #c36:checked ~ .grid label:nth-child(71):after, #c36:checked ~ .grid label:nth-child(81):after, #c36:checked ~ .grid label:nth-child(71):after, #c36:checked ~ .grid label:nth-child(53):after, #c36:checked ~ .grid label:nth-child(18):after {
  pointer-events: none;
  visibility: hidden;
}

#c27:checked ~ .grid label:nth-child(26):after, #c27:checked ~ .grid label:nth-child(16):after, #c27:checked ~ .grid label:nth-child(25):after, #c27:checked ~ .grid label:nth-child(34):after, #c27:checked ~ .grid label:nth-child(17):after, #c27:checked ~ .grid label:nth-child(35):after, #c27:checked ~ .grid label:nth-child(25):after, #c27:checked ~ .grid label:nth-child(34):after, #c27:checked ~ .grid label:nth-child(43):after, #c27:checked ~ .grid label:nth-child(33):after, #c27:checked ~ .grid label:nth-child(42):after, #c27:checked ~ .grid label:nth-child(51):after, #c27:checked ~ .grid label:nth-child(34):after, #c27:checked ~ .grid label:nth-child(52):after, #c27:checked ~ .grid label:nth-child(44):after, #c27:checked ~ .grid label:nth-child(34):after, #c27:checked ~ .grid label:nth-child(52):after, #c27:checked ~ .grid label:nth-child(53):after, #c27:checked ~ .grid label:nth-child(36):after, #c27:checked ~ .grid label:nth-child(27):after, #c27:checked ~ .grid label:nth-child(17):after, #c27:checked ~ .grid label:nth-child(18):after, #c27:checked ~ .grid label:nth-child(45):after, #c27:checked ~ .grid label:nth-child(53):after, #c27:checked ~ .grid label:nth-child(54):after, #c27:checked ~ .grid label:nth-child(53):after, #c27:checked ~ .grid label:nth-child(62):after, #c27:checked ~ .grid label:nth-child(63):after, #c27:checked ~ .grid label:nth-child(53):after, #c27:checked ~ .grid label:nth-child(62):after, #c27:checked ~ .grid label:nth-child(71):after, #c27:checked ~ .grid label:nth-child(72):after, #c27:checked ~ .grid label:nth-child(62):after, #c27:checked ~ .grid label:nth-child(71):after, #c27:checked ~ .grid label:nth-child(80):after, #c27:checked ~ .grid label:nth-child(70):after, #c27:checked ~ .grid label:nth-child(79):after, #c27:checked ~ .grid label:nth-child(69):after, #c27:checked ~ .grid label:nth-child(78):after, #c27:checked ~ .grid label:nth-child(70):after, #c27:checked ~ .grid label:nth-child(71):after, #c27:checked ~ .grid label:nth-child(71):after, #c27:checked ~ .grid label:nth-child(81):after, #c27:checked ~ .grid label:nth-child(71):after, #c27:checked ~ .grid label:nth-child(53):after, #c27:checked ~ .grid label:nth-child(18):after {
  pointer-events: none;
  visibility: hidden;
}

#c45:checked ~ .grid label:nth-child(26):after, #c45:checked ~ .grid label:nth-child(16):after, #c45:checked ~ .grid label:nth-child(25):after, #c45:checked ~ .grid label:nth-child(34):after, #c45:checked ~ .grid label:nth-child(17):after, #c45:checked ~ .grid label:nth-child(35):after, #c45:checked ~ .grid label:nth-child(25):after, #c45:checked ~ .grid label:nth-child(34):after, #c45:checked ~ .grid label:nth-child(43):after, #c45:checked ~ .grid label:nth-child(33):after, #c45:checked ~ .grid label:nth-child(42):after, #c45:checked ~ .grid label:nth-child(51):after, #c45:checked ~ .grid label:nth-child(34):after, #c45:checked ~ .grid label:nth-child(52):after, #c45:checked ~ .grid label:nth-child(44):after, #c45:checked ~ .grid label:nth-child(34):after, #c45:checked ~ .grid label:nth-child(52):after, #c45:checked ~ .grid label:nth-child(53):after, #c45:checked ~ .grid label:nth-child(36):after, #c45:checked ~ .grid label:nth-child(27):after, #c45:checked ~ .grid label:nth-child(17):after, #c45:checked ~ .grid label:nth-child(18):after, #c45:checked ~ .grid label:nth-child(45):after, #c45:checked ~ .grid label:nth-child(53):after, #c45:checked ~ .grid label:nth-child(54):after, #c45:checked ~ .grid label:nth-child(53):after, #c45:checked ~ .grid label:nth-child(62):after, #c45:checked ~ .grid label:nth-child(63):after, #c45:checked ~ .grid label:nth-child(53):after, #c45:checked ~ .grid label:nth-child(62):after, #c45:checked ~ .grid label:nth-child(71):after, #c45:checked ~ .grid label:nth-child(72):after, #c45:checked ~ .grid label:nth-child(62):after, #c45:checked ~ .grid label:nth-child(71):after, #c45:checked ~ .grid label:nth-child(80):after, #c45:checked ~ .grid label:nth-child(70):after, #c45:checked ~ .grid label:nth-child(79):after, #c45:checked ~ .grid label:nth-child(69):after, #c45:checked ~ .grid label:nth-child(78):after, #c45:checked ~ .grid label:nth-child(70):after, #c45:checked ~ .grid label:nth-child(71):after, #c45:checked ~ .grid label:nth-child(71):after, #c45:checked ~ .grid label:nth-child(81):after, #c45:checked ~ .grid label:nth-child(71):after, #c45:checked ~ .grid label:nth-child(53):after, #c45:checked ~ .grid label:nth-child(18):after {
  pointer-events: none;
  visibility: hidden;
}

#c54:checked ~ .grid label:nth-child(26):after, #c54:checked ~ .grid label:nth-child(16):after, #c54:checked ~ .grid label:nth-child(25):after, #c54:checked ~ .grid label:nth-child(34):after, #c54:checked ~ .grid label:nth-child(17):after, #c54:checked ~ .grid label:nth-child(35):after, #c54:checked ~ .grid label:nth-child(25):after, #c54:checked ~ .grid label:nth-child(34):after, #c54:checked ~ .grid label:nth-child(43):after, #c54:checked ~ .grid label:nth-child(33):after, #c54:checked ~ .grid label:nth-child(42):after, #c54:checked ~ .grid label:nth-child(51):after, #c54:checked ~ .grid label:nth-child(34):after, #c54:checked ~ .grid label:nth-child(52):after, #c54:checked ~ .grid label:nth-child(44):after, #c54:checked ~ .grid label:nth-child(34):after, #c54:checked ~ .grid label:nth-child(52):after, #c54:checked ~ .grid label:nth-child(53):after, #c54:checked ~ .grid label:nth-child(36):after, #c54:checked ~ .grid label:nth-child(27):after, #c54:checked ~ .grid label:nth-child(17):after, #c54:checked ~ .grid label:nth-child(18):after, #c54:checked ~ .grid label:nth-child(45):after, #c54:checked ~ .grid label:nth-child(53):after, #c54:checked ~ .grid label:nth-child(54):after, #c54:checked ~ .grid label:nth-child(53):after, #c54:checked ~ .grid label:nth-child(62):after, #c54:checked ~ .grid label:nth-child(63):after, #c54:checked ~ .grid label:nth-child(53):after, #c54:checked ~ .grid label:nth-child(62):after, #c54:checked ~ .grid label:nth-child(71):after, #c54:checked ~ .grid label:nth-child(72):after, #c54:checked ~ .grid label:nth-child(62):after, #c54:checked ~ .grid label:nth-child(71):after, #c54:checked ~ .grid label:nth-child(80):after, #c54:checked ~ .grid label:nth-child(70):after, #c54:checked ~ .grid label:nth-child(79):after, #c54:checked ~ .grid label:nth-child(69):after, #c54:checked ~ .grid label:nth-child(78):after, #c54:checked ~ .grid label:nth-child(70):after, #c54:checked ~ .grid label:nth-child(71):after, #c54:checked ~ .grid label:nth-child(71):after, #c54:checked ~ .grid label:nth-child(81):after, #c54:checked ~ .grid label:nth-child(71):after, #c54:checked ~ .grid label:nth-child(53):after, #c54:checked ~ .grid label:nth-child(18):after {
  pointer-events: none;
  visibility: hidden;
}

#c63:checked ~ .grid label:nth-child(26):after, #c63:checked ~ .grid label:nth-child(16):after, #c63:checked ~ .grid label:nth-child(25):after, #c63:checked ~ .grid label:nth-child(34):after, #c63:checked ~ .grid label:nth-child(17):after, #c63:checked ~ .grid label:nth-child(35):after, #c63:checked ~ .grid label:nth-child(25):after, #c63:checked ~ .grid label:nth-child(34):after, #c63:checked ~ .grid label:nth-child(43):after, #c63:checked ~ .grid label:nth-child(33):after, #c63:checked ~ .grid label:nth-child(42):after, #c63:checked ~ .grid label:nth-child(51):after, #c63:checked ~ .grid label:nth-child(34):after, #c63:checked ~ .grid label:nth-child(52):after, #c63:checked ~ .grid label:nth-child(44):after, #c63:checked ~ .grid label:nth-child(34):after, #c63:checked ~ .grid label:nth-child(52):after, #c63:checked ~ .grid label:nth-child(53):after, #c63:checked ~ .grid label:nth-child(36):after, #c63:checked ~ .grid label:nth-child(27):after, #c63:checked ~ .grid label:nth-child(17):after, #c63:checked ~ .grid label:nth-child(18):after, #c63:checked ~ .grid label:nth-child(45):after, #c63:checked ~ .grid label:nth-child(53):after, #c63:checked ~ .grid label:nth-child(54):after, #c63:checked ~ .grid label:nth-child(53):after, #c63:checked ~ .grid label:nth-child(62):after, #c63:checked ~ .grid label:nth-child(63):after, #c63:checked ~ .grid label:nth-child(53):after, #c63:checked ~ .grid label:nth-child(62):after, #c63:checked ~ .grid label:nth-child(71):after, #c63:checked ~ .grid label:nth-child(72):after, #c63:checked ~ .grid label:nth-child(62):after, #c63:checked ~ .grid label:nth-child(71):after, #c63:checked ~ .grid label:nth-child(80):after, #c63:checked ~ .grid label:nth-child(70):after, #c63:checked ~ .grid label:nth-child(79):after, #c63:checked ~ .grid label:nth-child(69):after, #c63:checked ~ .grid label:nth-child(78):after, #c63:checked ~ .grid label:nth-child(70):after, #c63:checked ~ .grid label:nth-child(71):after, #c63:checked ~ .grid label:nth-child(71):after, #c63:checked ~ .grid label:nth-child(81):after, #c63:checked ~ .grid label:nth-child(71):after, #c63:checked ~ .grid label:nth-child(53):after, #c63:checked ~ .grid label:nth-child(18):after {
  pointer-events: none;
  visibility: hidden;
}

#c72:checked ~ .grid label:nth-child(26):after, #c72:checked ~ .grid label:nth-child(16):after, #c72:checked ~ .grid label:nth-child(25):after, #c72:checked ~ .grid label:nth-child(34):after, #c72:checked ~ .grid label:nth-child(17):after, #c72:checked ~ .grid label:nth-child(35):after, #c72:checked ~ .grid label:nth-child(25):after, #c72:checked ~ .grid label:nth-child(34):after, #c72:checked ~ .grid label:nth-child(43):after, #c72:checked ~ .grid label:nth-child(33):after, #c72:checked ~ .grid label:nth-child(42):after, #c72:checked ~ .grid label:nth-child(51):after, #c72:checked ~ .grid label:nth-child(34):after, #c72:checked ~ .grid label:nth-child(52):after, #c72:checked ~ .grid label:nth-child(44):after, #c72:checked ~ .grid label:nth-child(34):after, #c72:checked ~ .grid label:nth-child(52):after, #c72:checked ~ .grid label:nth-child(53):after, #c72:checked ~ .grid label:nth-child(36):after, #c72:checked ~ .grid label:nth-child(27):after, #c72:checked ~ .grid label:nth-child(17):after, #c72:checked ~ .grid label:nth-child(18):after, #c72:checked ~ .grid label:nth-child(45):after, #c72:checked ~ .grid label:nth-child(53):after, #c72:checked ~ .grid label:nth-child(54):after, #c72:checked ~ .grid label:nth-child(53):after, #c72:checked ~ .grid label:nth-child(62):after, #c72:checked ~ .grid label:nth-child(63):after, #c72:checked ~ .grid label:nth-child(53):after, #c72:checked ~ .grid label:nth-child(62):after, #c72:checked ~ .grid label:nth-child(71):after, #c72:checked ~ .grid label:nth-child(72):after, #c72:checked ~ .grid label:nth-child(62):after, #c72:checked ~ .grid label:nth-child(71):after, #c72:checked ~ .grid label:nth-child(80):after, #c72:checked ~ .grid label:nth-child(70):after, #c72:checked ~ .grid label:nth-child(79):after, #c72:checked ~ .grid label:nth-child(69):after, #c72:checked ~ .grid label:nth-child(78):after, #c72:checked ~ .grid label:nth-child(70):after, #c72:checked ~ .grid label:nth-child(71):after, #c72:checked ~ .grid label:nth-child(71):after, #c72:checked ~ .grid label:nth-child(81):after, #c72:checked ~ .grid label:nth-child(71):after, #c72:checked ~ .grid label:nth-child(53):after, #c72:checked ~ .grid label:nth-child(18):after {
  pointer-events: none;
  visibility: hidden;
}

#c80:checked ~ .grid label:nth-child(26):after, #c80:checked ~ .grid label:nth-child(16):after, #c80:checked ~ .grid label:nth-child(25):after, #c80:checked ~ .grid label:nth-child(34):after, #c80:checked ~ .grid label:nth-child(17):after, #c80:checked ~ .grid label:nth-child(35):after, #c80:checked ~ .grid label:nth-child(25):after, #c80:checked ~ .grid label:nth-child(34):after, #c80:checked ~ .grid label:nth-child(43):after, #c80:checked ~ .grid label:nth-child(33):after, #c80:checked ~ .grid label:nth-child(42):after, #c80:checked ~ .grid label:nth-child(51):after, #c80:checked ~ .grid label:nth-child(34):after, #c80:checked ~ .grid label:nth-child(52):after, #c80:checked ~ .grid label:nth-child(44):after, #c80:checked ~ .grid label:nth-child(34):after, #c80:checked ~ .grid label:nth-child(52):after, #c80:checked ~ .grid label:nth-child(53):after, #c80:checked ~ .grid label:nth-child(36):after, #c80:checked ~ .grid label:nth-child(27):after, #c80:checked ~ .grid label:nth-child(17):after, #c80:checked ~ .grid label:nth-child(18):after, #c80:checked ~ .grid label:nth-child(45):after, #c80:checked ~ .grid label:nth-child(53):after, #c80:checked ~ .grid label:nth-child(54):after, #c80:checked ~

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg