:root {
  font-family: Avenir, Helvetica, Arial, sans-serif;

  --form:  300px;
  --half:  150px;
  --size:   60px;
  --pad:     8px;
  --top:   calc((var(--half) - var(--size)) / 2 - var(--pad));
  --left:  calc((var(--form) - var(--size)) / 2 - var(--pad));
  --end:    10px;
  --gap:     4px;
  --line:    1px;

  --white: #fff;
  --light: #ddd;
  --dark:  #222;
  --btn:   #060;
  --bg:    #030;
  --red:   #f33;
  --lava:  #600;
  --deep:  #300;
  --brdr:  #fff6; /* button-color-agnostic border color */

  --time:   10s;
}

/* Place main in the center */
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--light);
  background-color: var(--dark);
}

/* Style both the Start and Play Again buttons */
button,
.button {
  border: var(--line) outset var(--brdr);
  border-radius: var(--pad);
  padding: var(--pad);
  cursor: pointer;
  background-color: var(--btn);
}

button {
  --bg: var(--deep);
  background-color: transparent;
  color: inherit;
}

button:hover,
.button:hover {
  color: var(--white);
}

button:hover:active,
.button:hover:active {
  border-style: inset;
  background-color: var(--bg);
}

/* Make form the default size for an iframe */
form {
  position: relative;
  width: var(--form);
  height: var(--half);
  border: var(--line) solid var(--white);
  border-radius: var(--pad);
  box-sizing: border-box;
  overflow: hidden;
}

/* Take the checkbox out of the flow of the page
 * and show it in front of the .lava younger sibling
 * so that it will be a safe place for the mouse.
 */
input {
  position: absolute;
  z-index: 2;
}

/* Fill the form element with .lava */
.lava {
  position: absolute;
  width: 100%;
  height: 100%;
  background: var(--bg); /* <<< No eruption yet */

  /* Style the "You Lost" span and the link... */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  
  p {
    font-size: var(--size);
    margin: 0;
    color: var(--red);
  }

  /* ... but hide them and make them inactive */
  * {
    opacity: 0;
    pointer-events: none;
  }
}

/* Place a round Start button in the center with an invisible
 * .blocker in front of it. Move them both in front of the lava.
 */
.blocker,
.start {
  position: absolute;
  z-index: 1;
  top: var(--top);
  left: var(--left);
  width: var(--size);
  height: var(--size);
  line-height: var(--size);
  border-radius: var(--size);
  text-align: center;
}
.start::after {
  content: "Start";
}
/* Make the .blocker invisible and inactive at the start */
.blocker {
  opacity: 0;
  pointer-events: none;
}

/* When the game starts, shrink both the .start button
 * and the .blocker, and move them together towards 
 * the input element in the top left corner.
 */
 label:has(:checked) {
  .start,
  & ~ .blocker {
    top: var(--gap);
    left: var(--gap);
    width: var(--end);
    height: var(--end);
    padding: 0px;
    font-size: 0px;
    line-height: var(--end);
    transition: all var(--time);
  }
}

input:checked ~ .start::after {
  content: "Panic!";
}


/* When the game starts, make the .lava active */
label:has(input:checked) {
  & ~ .lava {
    background-color: var(--lava);

    &:hover {
      z-index:2;

      * {
        opacity: 1;
        pointer-events: all;
      }
    }
  }

  /* Prevent .start button from toggling the input */
  & ~ .blocker {
    pointer-events: all;
  }
}

/* Show the GitHub logo */
a.github {
  width: 0;
  height: 0;

  img {
    position: absolute;
    right: 3px;
    bottom: 3px;
    z-index: 3;
    width: 32px;
    height: 32px;
    filter: grayscale(1);
    opacity: 0.25;

    &:hover {
      opacity: 1;
    }
  }
}