:root {
  --page-background: white;
  --over-background: #e0e0e0;
  --link-inactive: #989898;
  --link-active: #2d2d2d;
  --boost-color: rgb(var(--boost-color-values));
}
:root.classic {
  --player-color: #37c537;
  --boost-color-values: 255, 137, 58;
  --target-color: #fb4d4d;
  --empty-color: #fff1f1;
}
:root.blue {
  --player-color: #ff692e;
  --boost-color-values: 57, 200, 129;
  --target-color: #6963dd;
  --empty-color: #f0f7ff;
}
:root.pink {
  --target-color: #a171d1;
  --boost-color-values: 255, 80, 255;
  --player-color: #32ffea;
  --empty-color: #f5e9f5;
}
:root.camouflage {
  --target-color: #7acdb2;
  --boost-color-values: 32, 186, 255;
  --player-color: #fac06a;
  --empty-color: #ddf4ea;
}
:root.reddish {
  --player-color: #f1c40f;
  --boost-color-values: 255, 50, 100;
  --target-color: #df776e;
  --empty-color: #cfc6c5;
}
:root.gold {
  --player-color: #2dee84;
  --boost-color-values: 255, 215, 0;
  --target-color: #d2b582;
  --empty-color: #bbb4a7;
}

@media (prefers-color-scheme: dark) {
  :root {
    --page-background: #121212;
    --link-inactive: #626262;
    --link-active: #dcdcdc;
    --over-background: #242424;
    color-scheme: dark;
  }
  :root.classic {
    --player-color: #1fdc1f;
    --boost-color-values: 227, 137, 58;
    --target-color: #ff1313;
    --empty-color: #200808;
  }
  :root.blue {
    --player-color: #e36432;
    --boost-color-values: 57, 181, 129;
    --target-color: #6762ba;
    --empty-color: #081320;
  }
  :root.pink {
    --target-color: #7324c2;
    --boost-color-values: 255, 0, 255;
    --player-color: #23dfcc;
    --empty-color: #200820 ;
  }
  :root.camouflage {
    --target-color: #128a64;
    --boost-color-values: 32, 186, 233;
    --player-color: #d4aa6c;
    --empty-color: #111716 ;
  }
  :root.reddish {
    --player-color: #f1c40f;
    --boost-color-values: 255, 61, 70;
    --target-color: #bd645c;
    --empty-color: #210d0a;
  }
  :root.gold {
    --player-color: #25d072;
    --boost-color-values: 255, 215, 0;
    --target-color: #988460;
    --empty-color: #17140f;
  }
}
body {
  margin: 0;
  background: var(--page-background);
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

nav {
  display: flex;
  align-items: center;
  height: 80px;
  gap: 12px;
}

.game-modes {
  display: none;
  position: absolute;
  left: 0;
}

.game-mode-link {
  position: relative;
}
.game-mode-link:hover, .game-mode-link:focus, .game-mode-link:focus-within {
  cursor: pointer;
  color: currentColor;
}
.game-mode-link:hover .game-modes, .game-mode-link:focus .game-modes, .game-mode-link:focus-within .game-modes {
  padding: 5px;
  display: revert;
}

a.non-distract, .non-distract a, .non-distract .game-mode-link {
  color: var(--link-inactive);
  text-decoration: none;
}
a.non-distract:hover, a.non-distract:focus, .non-distract a:hover, .non-distract a:focus, .non-distract .game-mode-link:hover, .non-distract .game-mode-link:focus {
  color: currentColor;
  text-decoration: revert;
}

@media (max-width: 842px) {
  .game-modes {
    z-index: 10;
    top: 50px;
    padding: 10px !important;
    background: var(--over-background);
    border-radius: 10px;
  }
  .game-modes a {
    color: currentColor;
  }
}
#theme-switcher {
  padding: 5px;
  aspect-ratio: 1/1;
  border: 4px solid var(--link-inactive);
  border-radius: 10px;
  transition: background 0.1s;
  margin-left: auto;
  margin-right: 0.67em;
}
#theme-switcher svg {
  height: 30px;
  vertical-align: middle;
  stroke-width: 0.8;
  stroke: var(--link-inactive);
}
#theme-switcher:hover {
  background: var(--link-inactive);
}

.incremental-game {
  overflow: initial;
  transition: filter 0.9s;
}
.incremental-game .circle {
  fill: var(--empty-color);
  stroke: var(--over-background);
  stroke-width: 1.5;
}
.incremental-game .circle.loosing {
  animation: loosing 0.2s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
}
.incremental-game .circle.shake {
  animation: shake 0.5s;
  animation-iteration-count: infinite;
}
.incremental-game .arc {
  stroke: var(--boost-color);
  stroke-width: 1.8;
  opacity: 0.6;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.1s, stroke-width 0.1s, opacity 0.2s;
  transform-origin: center;
  transform: rotate(-90deg);
}

.score-container {
  position: absolute;
  width: 100%;
  text-align: center;
  top: 50%;
  transform: translate(0, -50%);
}
.score-container * {
  margin: 0;
}
.score-container #score {
  font-size: 3rem;
}
.score-container #streak {
  font-size: 1.2rem;
}
.score-container #streak.loosing {
  animation: shake 0.5s;
  animation-iteration-count: infinite;
}

@keyframes loosing {
  from {
    stroke: var(--over-background);
  }
  to {
    stroke: var(--loosing-color);
  }
}
@keyframes shake {
  0% {
    transform: translate(0.5px, 0.5px) rotate(0deg);
  }
  10% {
    transform: translate(-0.5px, -1px) rotate(-1deg);
  }
  20% {
    transform: translate(-1.5px, 0px) rotate(1deg);
  }
  30% {
    transform: translate(1.5px, 1px) rotate(0deg);
  }
  40% {
    transform: translate(0.5px, -0.5px) rotate(1deg);
  }
  50% {
    transform: translate(-0.5px, 1px) rotate(-1deg);
  }
  60% {
    transform: translate(-1.5px, 0.5px) rotate(0deg);
  }
  70% {
    transform: translate(1.5px, 0.5px) rotate(-1deg);
  }
  80% {
    transform: translate(-0.5px, -0.5px) rotate(1deg);
  }
  90% {
    transform: translate(0.5px, 1px) rotate(0deg);
  }
  100% {
    transform: translate(0.5px, -1px) rotate(-1deg);
  }
}
nav {
  position: absolute;
  width: 100%;
}

main {
  display: flex;
  height: 100vh;
  height: 100dvh;
  justify-content: center;
  align-items: center;
}

footer {
  position: absolute;
  bottom: 0;
  margin: 0.67em;
}

.game-container {
  width: 100%;
  max-width: 400px;
  pointer-events: none;
  margin: 10px;
}

.highscore {
  position: absolute;
  top: 0;
}

:root.new-highscore {
  --new-highscore-animation: new-highscore-light;
}
@media (prefers-color-scheme: dark) {
  :root.new-highscore {
    --new-highscore-animation: new-highscore-dark;
  }
}
:root.new-highscore .highscore {
  animation: var(--new-highscore-animation) 0.21s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
:root.new-highscore #score {
  animation: var(--new-highscore-animation) 0.21s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

#game {
  position: relative;
}

#touch-area {
  position: fixed;
  width: calc(95% - 40px);
  height: calc(95% - 40px);
  bottom: 10%;
  inset: 0;
  margin: auto auto;
}

@media (max-device-width: 842px) {
  .highscore {
    top: 50px;
  }
}
@media (max-device-height: 600px) {
  .highscore {
    position: revert;
  }
}
@media (min-device-aspect-ratio: 1/1) {
  .game-container {
    width: revert;
    height: 100%;
    max-height: 400px;
    aspect-ratio: 1/1;
  }
}
@keyframes new-highscore-dark {
  from {
    color: currentColor;
  }
  to {
    color: #3454cc;
  }
}
@keyframes new-highscore-light {
  from {
    color: currentColor;
  }
  to {
    color: #8997cb;
  }
}

/*# sourceMappingURL=index.css.map */