<form class="game">

  <fieldset class="level_1">
    <label for="step_1" style="--top: 0; --left: 0;" class="start"></label>
    <input type="checkbox" id="step_1">
    <label for="step_2" style="--top: 0; --left: 1;"></label>
    <input type="checkbox" id="step_2">
    <label for="step_3" style="--top: 0; --left: 2;"></label>
    <input type="checkbox" id="step_3">
    <label for="step_4" style="--top: 1; --left: 2;"></label>
    <input type="checkbox" id="step_4">
    <label for="step_5" style="--top: 2; --left: 2;"></label>
    <input type="checkbox" id="step_5">
    <label for="step_6" class="branch" style="--top: 2; --left: 3;">
      <input type="reset" id="step_7">
      <label for="step_7" style="--top: 1; --left: 0;" class="death"></label>
      <label for="step_8" style="--top: 0; --left: 1;"></label>
      <input type="checkbox" id="step_8">
      <label for="step_9" style="--top: 0; --left: 2;"></label>
      <input type="checkbox" id="step_9">
      <label for="step_10" class="branch" style="--top: -1; --left: 2;">
        <input type="reset" id="step_11">
        <label for="step_11" style="--top: -1; --left: 0;" class="death"></label>
        <label for="step_12" style="--top: 0; --left: 1;"></label>
        <input type="checkbox" id="step_12">
        <label for="step_13" style="--top: 0; --left: 2;"></label>
        <input type="checkbox" id="step_13">
        <label for="step_14" style="--top: 1; --left: 2;"></label>
        <input type="checkbox" id="step_14">
        <label for="step_15" class="branch" style="--top: 2; --left: 2;">
          <input type="reset" id="step_16">
          <label for="step_16" style="--top: 1; --left: 0;" class="death"></label>
          <label for="step_17" style="--top: 0; --left: 1;"></label>
          <input type="checkbox" id="step_17">
          <label for="step_18" style="--top: 0; --left: 2;"></label>
          <input type="checkbox" id="step_18">
          <label for="step_19" class="win" style="--top: 1; --left: 2;"></label>
          <input type="checkbox" id="step_19">
          <div class="end winner">
            <h1>You Win!</h1>
            <input class="visible" type="reset" value="Again?">
          </div>
        </label>
        <input type="checkbox" id="step_15">
      </label>
      <input type="checkbox" id="step_10">
    </label>
    <input type="checkbox" id="step_6">
  </fieldset>

</form>
:root {
  --cell: 5vw;
  --cellborder: 0.5vw;
  --width: 10;
  --height: 5;
  --border: calc(var(--cellborder) * 2);
}


body {
  margin: 15px;
}
h1 {
  margin: var(--border);
}

.game {
  position: relative;
  width: calc((var(--cell) + var(--border)) * var(--width));
  height: calc((var(--cell) + var(--border)) * var(--height));
  background: #ccc;
  display: block;
  outline: var(--cellborder) solid #999;
  border: var(--cellborder) solid #ccc;
  margin: 0 auto;
  overflow: hidden;
}

.game fieldset {
  height: calc(100% - (var(--border) * 2));
}

.game label {
  display: block;
  position: absolute;
  width: var(--cell);
  height: var(--cell);
  background: #aaa;
  cursor: pointer;
  border: var(--cellborder) outset #ddd;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  top: calc(var(--top) * (var(--cell) + var(--border)));
  left: calc(var(--left) * (var(--cell) + var(--border)));
  --left: 0;
  --top: 0;
}

.game label label {
  margin-top: calc(-1 * var(--cellborder));
  margin-left: calc(-1 * var(--cellborder));
}

.game label::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: black;
  left: 0;
  top: 0;
  opacity: 0;
  -webkit-transform: scale(0);
  transform: scale(0);
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  border-radius: 100%;
}
.game label:hover::before {
  opacity: 1;
  -webkit-transform: scale(0.65);
  transform: scale(0.65);
}

.game label.branch::before {
  background: green;
  -webkit-transform:scale(0.5) rotate(45deg);
  transform:scale(0.5) rotate(45deg);
  border-radius: 0;
  opacity: 1;
}

.game .start {
  background: green;
  border-color: forestgreen;
}
/*.game .death {
  background: maroon;
  border-color: darkred;
}*/
.game .win {
  background: darkorange;
  border-color: orange;
}

.game input:not(.visible) {
  position: absolute;
  width: 0;
  height: 0;
  margin: 0;
  visibility: hidden;
  appearance: none;
  pointer-events: none;
  opacity: 0;
}

.game input[type="checkbox"]:not(:checked) ~ label,
.game input[type="checkbox"]:not(:checked) + .end {
  opacity: 0;
  pointer-events: none;
  -webkit-transform: scale(0);
  transform: scale(0);
}


.game .end {
  position: fixed;
  top: 15px;
  left: calc(50% - ((var(--width) * 0.5) * var(--cell) + var(--cellborder) * var(--width) + var(--cellborder)));
  z-index: 9;
  text-align: center;
  width: calc((var(--cell) * var(--width)) + (var(--width) * var(--border)) + var(--border));
  height: calc((var(--cell) * var(--height)) + (var(--height) * var(--border)) + var(--border));
  background: black;
  color: white;
  display: grid;
  align-content: center;
  cursor: default;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.game .end input {
  display: block;
  max-width: max-content;
  margin: 0 auto;
  appearance: none;
  border: 1px solid white;
  color: white;
  background: black;
  padding: var(--cellborder) var(--border);
  cursor: pointer;
}
.game .end input:hover {
  background: white;
  color: black;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.