/* Add your own CSS here, in order to:

1. Show the Score as a number
2. Show an emoji whose expression changes as the Score increases
   (Hint — you can use this set of emojis, if you like:
    "😔" "🙁" "😕" "😒" "😌" "🙂" "😀" "😄" "😁" "😊" "😞"
   )
3. Create a timer to show the Time since the player clicked on
   the .start .button. Note that you will have to count more
   than 10 seconds... but players should finish the game (or
   get bored with it) in less than 100 seconds
4. Stop the timer when the player moves the mouse off the path
   or when they click on the .finish .button.

Have fun!

*/


@counter-style mood {
  system: cyclic;
  symbols: 
  "😔" "🙁" "😕" "😒" "😌" "🙂" "😀" "😄" "😁" "😊" "😞" ;
  suffix: "";
}

@counter-style seconds {
  system: cyclic;
  symbols: "\00A0second" "\00A0seconds";
  suffix: "";
}

@counter-style tens {
  system: cyclic;
  symbols: "1" "2" "3" "4" "5" "6" "7" "8" "9" "";
  suffix: "";
}


form {
  counter-reset:
    tokens 0
    available 0
  ;
}


p#mood::after {
  content: counter(tokens, mood);
}

form:has(.finish :checked),
form:has(.start :checked) {
  div.tokens {
    label {
      counter-increment: available;
    }

    input:checked {
      counter-increment: tokens;
    }
  }
}

p#score::after {
  content: counter(tokens);
  margin-left: var(--gap);
}

/* Run a timer up to 99s when .start input is :checked
 * Pause this timer when .finish input is :checked
 */
body:not(:has(.off:checked)) {
  animation: units 10s step-end forwards 10;
}
/* Use a different element for each animation */
form:not(:has(.off:checked)) {
  animation: tens 100s step-end forwards;
}
/* Stop both animations if #message:hover is applicable.
 * Also check for .finish :checked since :hover doesn't
 * work on touch screens.
 */

:has(#message:hover),
form:has(.finish :checked),
body:has(.finish :checked)  {
  animation-play-state: paused;
}


p#timer::after {
  content: counter(tens, tens) counter(units);
  margin-left: var(--gap);
  font-family:'Courier New', Courier, monospace
}


/* By default, assume the player failed */
#message .time::after {
  content: "after " counter(tens, tens) counter(units) counter(second, seconds) "!";
}
/* .finish will only be :checked if the player did not fail */
form:has(.finish :checked) #message {
  .time::after {
    content: "in " counter(tens, tens) counter(units) " " counter(second, seconds);
  }
  .tokens {
    display: block;
    span::before {
      content: counter(tokens);
    }
    span::after {
      content: counter(available);
    }
  }
}

@keyframes units {
    0% { counter-increment: units 0 second 0; }
   10% { counter-increment: units 1 second 1; }
   20% { counter-increment: units 2 second 2; }
   30% { counter-increment: units 3; }
   40% { counter-increment: units 4; }
   50% { counter-increment: units 5; }
   60% { counter-increment: units 6; }
   70% { counter-increment: units 7; }
   80% { counter-increment: units 8; }
   90% { counter-increment: units 9; }
  100% { counter-increment: units 0; }
}

@keyframes tens {
    0% { counter-increment: tens 0; }
   10% { counter-increment: tens 1; }
   20% { counter-increment: tens 2; }
   30% { counter-increment: tens 3; }
   40% { counter-increment: tens 4; }
   50% { counter-increment: tens 5; }
   60% { counter-increment: tens 6; }
   70% { counter-increment: tens 7; }
   80% { counter-increment: tens 8; }
   90% { counter-increment: tens 9; }
  100% { counter-increment: tens 0; }
};