style.css

/* Vars */

:root {
  --bg: #222222;
  --text: #cccccc;

  --red: #d06060;
  --orange: #f48d72;
  --brown: #af6339;
  --yellow: #f0cd62;
  --greelow: #bde246;
  --green: #6ead54;
  --cyan: #2eb4bf;
  --blue: #4e83e6;
  --purple: #8d75cd;
  --pink: #ec78a4;
  --white: #cdcecf;
  --shadow: rgba(0, 0, 0, 0.6);

  --font:
    -apple-system,
    blinkmacsystemfont,
    segoe ui,
    roboto,
    oxygen-sans,
    ubuntu,
    cantarell,
    helvetica neue,
    sans-serif;

  --font-l: 3.2rem;
  --font-m: 2rem;
  --font-s: 1.2rem;
  --font-xs: 0.72rem;
}


/* Reset */

* {
  box-sizing: border-box;
  animation-timing-function: ease-out;
  transition-timing-function: ease-out;
}

html,
body {
  padding: 0;
  margin: 0;
}

html {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.3;
  font-weight: bold;
  touch-action: none;
}

p {
  margin: 0;
}

a {
  text-decoration: none;
  color: var(--red);
  transition: transform 200ms;
}

@media (hover: hover) {
  a:hover {
    transform: scale(110%);
  }
}

button {
  font-size: inherit;
  font-family: inherit;
  font-weight: inherit;
  color: inherit;
  text-shadow: inherit;
  background: none;
  box-shadow: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

svg text {
  fill: currentColor;
  user-select: none;
}


/* Game */

#gameView {
  display: block;
  margin: 0 auto;
  max-width: 100vw;
  max-height: 100vh;
}
#gameView.-gameOver {
  animation: 3800ms gameOverBlur;
  animation-fill-mode: both
}

@keyframes gameOverBlur {
  to {
    filter: blur(0.1rem) grayscale(50%) opacity(50%);
  }
}

.gameContainer {
  font-size: var(--font-m);
}

.gamePiece {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 200ms;
}

.gamePiece:active {
  transform: scale(90%);
}

@media (hover: hover) {
  .gamePiece:not(:active, .-held):hover {
    transform: scale(110%);
  }
}

.gamePiece.-red circle {
  fill: var(--red);
}
.gamePiece.-yellow circle {
  fill: var(--yellow);
}
.gamePiece.-greelow circle {
  fill: var(--greelow);
}
.gamePiece.-orange circle {
  fill: var(--orange);
}
.gamePiece.-brown circle {
  fill: var(--brown);
}
.gamePiece.-green circle {
  fill: var(--green);
}
.gamePiece.-cyan circle {
  fill: var(--cyan);
}
.gamePiece.-blue circle {
  fill: var(--blue);
}
.gamePiece.-purple circle {
  fill: var(--purple);
}
.gamePiece.-pink circle {
  fill: var(--pink);
}
.gamePiece.-white circle {
  fill: var(--white);
}
.gamePiece text {
  fill: #000;
  opacity: 0.33;
  pointer-events: none;
}

.gameScore {
  margin-left: var(--font-s);
}

.gameOverScreen {
  position: fixed;
  inset: 0;
  padding-top: 8rem;
  animation: 2300ms floatIn;
}
.gameOverScreen_text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--font-xs);
  text-align: center;
  text-shadow: 0 0.1em 0.05em var(--shadow);
  user-select: none;
}
.gameOverScreen_title {
  font-size: var(--font-l);
}
.gameOverScreen button {
  animation: 2300ms floatIn;
  animation-fill-mode: backwards;
  animation-delay: 500ms;
  transition: transform 200ms;
}
@media (hover: hover) {
  .gameOverScreen button:hover {
    transform: scale(110%);
  }
}
.gameOverScreen_congrats {
  margin-top: var(--font-m);
  display: flex;
  flex-direction: column;
  gap: var(--font-xs);
  border: 0.1rem solid;
  border-radius: var(--font-m);
  padding: var(--font-s) var(--font-m);
  box-shadow: 0 0.1em 0.05em var(--shadow);
  background-color: var(--shadow);
  font-size: var(--font-s);
  text-align: justify;
  color: var(--yellow);
  animation: 2300ms floatIn;
  animation-fill-mode: backwards;
  animation-delay: 800ms;
}

@keyframes floatIn {
  from {
    opacity: 0;
    transform: translateY(var(--font-s));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}