<div id="game">
  <div id="timer">
    <div id="bar"></div>
  </div>
  <div id="instructions">
    <div class="msg">
      <h1>Pop(over) the Balloons</h1>
      You have 2 minutes to pop as many balloons as possible. But it's not as simple as it sounds. Some
      balloons
      create more balloons and some balloons pop other balloons.
      <a class="btn" href="#game">Go!</a>
    </div>
  </div>
  <details open id="root1">
    <summary class="balloon r4 c5">🎈</summary>
    <button class="balloon r2 c2" popovertarget="pop1" popovertargetaction="show">🎈</button>
    <details open>
      <summary class="balloon r6 c6">🎈</summary>
      <button class="balloon r1 c4" popovertarget="pop5" popovertargetaction="show">🎈</button>
    </details>
    <button class="balloon r1 c5" popovertarget="pop3" popovertargetaction="show">🎈</button>
    <details open>
      <summary class="balloon r2 c6">🎈</summary>
      <button class="balloon r7 c3" popovertarget="pop4" popovertargetaction="show">🎈</button>
      <button class="balloon r3 c4" popovertarget="pop1" popovertargetaction="hide">🎈</button>
    </details>
  </details>
  <details open id="root2">
    <summary class="balloon r4 c6">🎈</summary>
    <button class="balloon r3 c7" popovertarget="pop2" popovertargetaction="show">🎈</button>
    <details open>
      <summary class="balloon r2 c3">🎈</summary>
      <button class="balloon r6 c1" popovertarget="pop1" popovertargetaction="show">🎈</button>
    </details>
    <button class="balloon r5 c4" popovertarget="pop4" popovertargetaction="show">🎈</button>
    <details open>
      <summary class="balloon r7 c7">🎈</summary>
      <button class="balloon r5 c2" popovertarget="pop1" popovertargetaction="show">🎈</button>
      <button class="balloon r3 c1" popovertarget="pop2" popovertargetaction="hide">🎈</button>
    </details>
  </details>
  <div id="pop1" popover="manual">
    <button class="balloon r4 c2" popovertarget="pop1" popovertargetaction="hide">🎈</button>
  </div>
  <dialog id="pop2" popover="manual">
    <button class="balloon r3 c3" popovertarget="pop2" popovertargetaction="hide">🎈</button>
    <button class="balloon r1 c1" popovertarget="pop4" popovertargetaction="hide">🎈</button>
  </dialog>
  <div id="pop3" popover="manual">
    <button class="balloon r5 c5" popovertarget="pop4" popovertargetaction="hide">🎈</button>
    <button class="balloon r6 c2" popovertarget="pop3" popovertargetaction="hide">🎈</button>
  </div>
  <div id="pop4" popover="manual">
    <button class="balloon r7 c2" popovertarget="pop4" popovertargetaction="hide">🎈</button>
    <button class="balloon r6 c5" popovertarget="pop2" popovertargetaction="hide">🎈</button>
  </div>
  <div id="pop5" popover="manual">
    <button class="balloon r4 c7" popovertarget="pop4" popovertargetaction="hide">🎈</button>
    <button class="balloon r5 c3" popovertarget="pop5" popovertargetaction="hide">🎈</button>
  </div>
  <div id="congrats">
    <div class="msg">
      You popped them all!<br>
      <a class="btn" href="">Play Again!</a>
    </div>
  </div>
  <div id="fail">
    <div class="msg">
      Unlike Pokemon, you didn't pop 'em all...<br>
      Refresh your browser to try again.<br>
      <a class="btn" href="">Play Again!</a>
    </div>
  </div>
</div>
body {
  margin: 0;
  background-color: lightskyblue;
}

details,
div {
  inset: unset;
  overflow: visible;
  border: none;
  background-color: transparent;
  padding: 0;
}

.r1 {
  --row: 1;
}

.r2 {
  --row: 2;
}

.r3 {
  --row: 3;
}

.r4 {
  --row: 4;
}

.r5 {
  --row: 5;
}

.r6 {
  --row: 6;
}

.r7 {
  --row: 7;
}

.c1 {
  --col: 1;
}

.c2 {
  --col: 2;
}

.c3 {
  --col: 3;
}

.c4 {
  --col: 4;
}

.c5 {
  --col: 5;
}

.c6 {
  --col: 6;
}

.c7 {
  --col: 7;
}

.balloon {
  position: absolute;
  display: block;
  font-size: 4em;
  border: none;
  background-color: transparent;
  padding: 0;
  margin: 0;
  height: 1em;
  width: 1em;
  top: calc(12.5vh * (var(--row) + 1) - 12.5vh);
  left: calc(12.5vw * (var(--col) + 1) - 12.5vw);
  list-style-type: none;
  cursor: pointer;
  text-align: center;
  user-select: none;
  scale: 1;
}

.balloon:active {
  scale: 0.7;
  transition: 0.5s;
}

details summary::-webkit-details-marker {
  display: none;
}

#root1:not([open]),
#root2:not([open]) {
  display: none;
}

#congrats,
#fail,
#instructions {
  display: none;
  align-items: center;
  justify-content: center;
  inset: 0;
  position: absolute;
  background-color: hsla(0, 0%, 0%, 0.5);
}

#fail {
  display: flex;
  opacity: 0;
  z-index: -1;
}

#game:target #fail {
  animation: 0.5s fadein forwards 60s;
}

#game:target #bar {
  animation: 60s timebar forwards;
}

#game:target #instructions {
  display: none;
}

#instructions {
  display: flex;
  z-index: 10;
}

@keyframes fadein {
  0% {
    opacity: 0;
    z-index: -1;
  }

  100% {
    opacity: 1;
    z-index: 10;
  }
}

.msg {
  background-color: #e60b0b;
  color: #fff;
  padding: 1em;
  border-radius: 0.5em;
  border: 0.25em solid #760b0b;
  overflow: hidden;
  max-width: 20em;
}

#congrats .msg .btn,
#fail .msg .btn {
  float: none;
  display: block;
}

.msg h1 {
  margin-top: 0;
}

#game:has(#root1:not([open])):has(#root2:not([open])) #congrats {
  display: flex;
}

#game:has(#root1:not([open])):has(#root2:not([open])) #fail,
#game:has(#root1:not([open])):has(#root2:not([open])) #bar {
  display: none;
}

#game:has(#root1:not([open])):has(:popover-open):has(#root2:not([open])):has(:popover-open)
  #fail {
  display: flex;
}

#game:has(#root1:not([open])):has(:popover-open):has(#root2:not([open])):has(:popover-open)
  #bar {
  display: block;
}

#game:has(#root1:not([open])):has(:popover-open):has(#root2:not([open])):has(:popover-open)
  #congrats {
  display: none;
}

.btn {
  float: right;
  background-color: white;
  color: #e60b0b;
  text-decoration: none;
  padding: 0.25em 0.5em;
  margin-top: 0.5em;
  text-align: center;
  border-radius: 0.5em;
}

#timer {
  width: 100vw;
  height: 1em;
}

#bar {
  background-color: #e60b0b;
  width: 100vw;
  height: 1em;
  transform-origin: right;
}

@keyframes timebar {
  0% {
    scale: 1 1;
  }

  100% {
    scale: 0 1;
  }
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.