styles.less

@hitbox-size: 50px;
@game-height: 400px;
@game-length-easy: 45s;
@game-length-med: 30s;
@game-length-hard: 20s;

body, html {
  height: 100%;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}
* {
  box-sizing: border-box;
}

.warningBanner {
  background-color: red;
  text-align: center;
  padding: 15px;
  height:80px;
}

@media only screen 
  and (min-device-width : 320px) 
  and (max-device-width : 480px){ 
  .warningBanner { display: none;}
}

.maxStreakBoard {
  position: absolute;
  top: 225px;
  right: 95px;
}

.difficultySelectButtons {
  display: none;
  flex-direction: column;
}

// Use these to debug the start buttons
// .b1 {
//   background-color: red;
// }
// .b2 {
//   background-color: blue;
// }
// .b3 {
//   background-color: green;
// }
// .b4 {
//   background-color: purple;
// }

.levelSelectButtons .playButton {
  margin-left: -80px;
  width: 80px;
  position: absolute;
  left: 190px;
}

// We debliberately don't animate the "bottom" button so that it is always visible underneath
// to prevent any flashing of text
// .levelSelectButtons .playButton[for="level-1"] {
//   .toggleAnimationMixin(0s);
// }
.levelSelectButtons .playButton[for="level-2"] {
  animation: toggleVisible 2s steps(1, end) 0.5s infinite;
  opacity: 0;
  pointer-events: none;
}
.levelSelectButtons .playButton[for="level-3"] {
  animation: toggleVisible 2s steps(1, end) 1s infinite;
  opacity: 0;
  pointer-events: none;
}
.levelSelectButtons .playButton[for="level-4"] {
  animation: toggleVisible 2s steps(1, end) 1.5s infinite;
  opacity: 0;
  pointer-events: none;
}

.app {
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 0 10px;
}

.startScreen, .gameOverScreen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  position: absolute;
  width: 100%;
}

input[type="reset"] {
  background: none;
  color: inherit;
  width: initial;
  // We explicitly do not touch border and padding to make it easier to override them
  // border: none;
  // padding: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit;
  margin-top: 30px;
}
input[type="radio"] {
  display: none;
}


#debug:target ~ input[type="radio"]{
  display: block;

  &::after {
    content: attr(name) " | " attr(id);
    display: inline-block;
    width: 200px;
    margin-left: 20px;
  }
}

.startScreen, .playingScreen, .gameOverScreen {
  display: none;
}
.gameOverScreen {
  pointer-events: none;
}
.startScreen {
  padding: 10px;
}
#start:checked ~ #game .startScreen {
  display: flex;
}

#start:checked ~ input[name="game-state-level"]:checked {
  ~ #game .levelSelectButtons {
    display: none;
  }
  ~ #game .difficultySelectButtons {
    display: flex;
  }
}

#playing-hard:checked {
  .playingMixin(@game-length-hard)
}
#playing-med:checked {
  .playingMixin(@game-length-med)
}
#playing-easy:checked {
  .playingMixin(@game-length-easy)
}

.playingMixin(@game-length) {
  ~ #game .gameOverScreen {
    display: flex;
    opacity: 0;
    animation: show 0.1s linear @game-length forwards;
  }
  ~ #game .playingScreen {
    display: block;
    // wait @game-length time before playing the hide animation
    animation: hide 0.1s linear @game-length forwards;

    .level .hitbox {
      animation: playing @game-length linear;
    }

    .maxStreakBoard  {
      animation: hide 0.1s linear @game-length reverse both;
    }
  }
}


#game {
  border: 1px solid black;
  min-height: 400px;
  min-width: 300px;
  background-color: goldenrod;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  counter-reset: score streak;
}

.playingScreen {
  .scoreBoard::after {
    display: block;
    content: "Score: " counter(score);
    position: absolute;
    top: 10px;
    left: 10px;
  }
  .streakBoard::after {
    display: block;
    content: "Streak: " counter(streak) "x";
    position: absolute;
    top: 10px;
    right: 30px;
  }
  .hitbox {
    -moz-appearance: none;
    -webkit-appearance: none;
    -webkit-touch-callout: none;
    -moz-user-select: none;
    user-select: none;
    outline: none;
    height: @hitbox-size;
    width: @hitbox-size;
    position: absolute;
    display: none; // We will override when selecting the level
    /* Icon from: https://material.io/tools/icons/?search=note&icon=music_note&style=baseline */
    background: url('data:image/svg xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" focusable="false" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/></svg>');
    background-size: contain;

    &:checked {
      counter-increment: score;
      pointer-events: none;
      
      &::before  {
        animation: hitAnim 0.3s !important;
        height: 100%;
        width: 100%;
        display: block;
        background-image: url('data:image/svg xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" focusable="false" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/></svg>');
        // background-size: contain;
        background-repeat: space;
        content: '';
      }
    }
  }
}

#level-1:checked ~ #game .level1 { display: initial; }
#level-2:checked ~ #game .level2 { display: initial; }
#level-3:checked ~ #game .level3 { display: initial; }
#level-4:checked ~ #game .level4 { display: initial; }

.level1 .hitbox:first-of-type:checked,
.level2 .hitbox:first-of-type:checked,
.level3 .hitbox:first-of-type:checked,
.level4 .hitbox:first-of-type:checked,
.hitbox:not(:checked)   .hitbox:checked {
  counter-reset: streak;
  counter-increment: score streak;
}
.hitbox:checked   .hitbox:checked {
  counter-increment: score streak;
}

.gameOverScreen {
  #game-over-score::after {
    display: block;
    content: "Score: " counter(score);
  }
}

.clickGuard {
  background-color: transparent;
  position: absolute;
  height: calc(@game-height - @hitbox-size);
  width: 100%;
  z-index: 100;
}


.col1 {
  left: 30px;
}
.col2 {
  left: 90px;
}
.col3 {
  left: 150px;
}
.col4 {
  left: 210px;
}

.hitboxIndicator {
  height: @hitbox-size;
  width: @hitbox-size;

  position: absolute;
  outline: 1px solid;
  bottom: 5px;
  pointer-events: none;

  &::after {

  }
}

.playButton {
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-bottom: 10px;
  width: 80px;
  text-align: center;
  pointer-events: all;

  &:hover {
    animation: menuHover 0.3s forwards;
  }
}
@keyframes playing {
  0%   { transform: translateY(-100px); }
  100% { transform: translateY(9500px); }
}


@keyframes hitAnim {
  0% { 
    transform: translateY(0) scale(1); 
    opacity: 1; 
  }
  100% { 
    transform: translateY(-100px) scale(2); 
    opacity: 0.3; 
  }
}

@keyframes hide {
  0% { color: rgba(0, 0, 0, 1) }
  // Very hacky, but this lets us click through the clickGuard when gameOver
  100% { color: rgba(0, 0, 0, 0); pointer-events: none; }
}

@keyframes show {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes menuHover {
  0% { transform: scale(1); }
  100% { transform: scale(1.25); }
}

@keyframes toggleVisible {
  0% { opacity: 1; pointer-events: initial; }
  33% { opacity: 0; pointer-events: none; }
  66% { opacity: 0; pointer-events: none; }
}