.font-pixel-variable {
  font-variation-settings: 'wght' var(--pixel-weight);
}

.pixel {
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  cursor: default;
  position: relative;
  transition: background-color 0.6s ease, opacity 0.6s ease;
}

.dimmed {
  opacity: 0.15;
}

.cursor {
  transform: scale(1.2);
  z-index: 2;
}

.cursor::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--active-cursor-color, #ffffff);
  box-shadow: 0 0 4px var(--active-cursor-color, #ffffff);
}

.guessed::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--guessed-color);
  z-index: 1;
}

@keyframes pixel-lock-flash {
  0% { transform: scale(2); box-shadow: 0 0 6px var(--guessed-color); }
  50% { transform: scale(0.6); }
  100% { transform: scale(1); }
}

.guessed.just-locked {
  animation: pixel-lock-flash 0.35s steps(3);
  z-index: 3;
}

.game-active #home-header {
  display: none;
}

.game-active #game-header {
  display: flex;
}

.game-active #target-label {
  height: auto;
  min-height: 0;
}

.game-active #game-container {
  gap: 0;
}

.game-active .gauge-wrapper {
  display: flex;
  margin: 24px 0 45px 0;
}

.game-active #btn-start {
  display: none;
}

.game-active #difficulty {
  display: none;
}

.game-active #dpad {
  display: grid;
  gap: 6px;
  margin-top: -8px;
}

.game-active #controls {
  height: auto;
  justify-content: flex-start;
  margin-top: -12px;
}

.gauge-wrapper {
  display: none;
}


.game-active.game-ended #dpad,
.game-active.game-ended .crosshair-mark-btn {
  display: none;
}

body.game-active {
  overflow: hidden;
}

body.results-view #target-label {
  min-height: auto;
}

body.results-view .gauge-wrapper {
  margin-top: 64px;
  margin-bottom: 0;
}

@media (min-width: 768px) {
  body.results-view #map-wrapper {
    animation: mapResultsSlide 0.35s ease both;
  }

  body.results-view #desktop-results {
    margin-top: 162px;
  }
}

@keyframes mapResultsSlide {
  from { transform: translateY(-18px); opacity: 0.8; }
  to { transform: translateY(0); opacity: 1; }
}

@media (max-width: 767px) {
  body.game-active {
    row-gap: 36px;
    padding-top: 64px;
  }
}

.mode-day {
  background-color: rgb(139, 216, 224);
}

.mode-night {
  background-color: rgb(14, 22, 33);
}

@media (min-width: 768px) {
  .pixel {
    cursor: pointer;
  }

  .pixel.colored:hover {
    transform: scale(1.2);
    z-index: 1;
  }

  .pixel.colored:hover::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--active-cursor-color, #ffffff);
    box-shadow: 0 0 4px var(--active-cursor-color, #ffffff);
  }

  .game-active #dpad {
    display: none;
  }

  .game-active #target-label {
    grid-row: 1 / 9;
    margin-top: -300px;
  }



  .game-active .crosshair-mark-btn {
    display: none;
  }

  .game-active .gauge-wrapper {
    grid-column: 2;
    grid-row: 9;
    justify-self: center;
    align-self: center;
    margin: 24px 0 0 -150px;
  }
}