:root {
  --primary-clr-1: hsl(0, 46%, 49%);
  --neutral-clr-1: hsl(240, 8%, 9%);
  --neutral-clr-2: hsl(220, 4%, 16%);

  --white-clr: hsl(0, 0%, 100%);
  --black-clr: hsl(0, 0%, 0%);

  --border-radius: 0.8rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  border: 0;
  padding: 0;
}

button {
  font: inherit;
}

:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 2px var(--black-clr), 0 0 0 4px var(--white-clr);
}

html {
  font-size: 62.5%;
}

body {
  font: 1.8rem/1.5 'Doto', sans-serif;
  background: url('/images/noise-bg.avif') top left/200px 200px,
    var(--neutral-clr-1);
  color: var(--white-clr);
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1.6rem;
}

/* UTILITIES */
.opened-dice {
  background: hsl(0, 0%, 100%) center/cover no-repeat;
  border-radius: var(--border-radius);
  box-shadow: 0 0 14px 8px hsl(0 0% 0% / 0.2), 0 0 12px 4px hsl(0 0% 0% / 0.1);
}

/* BUTTON */
.btn {
  background-color: var(--white-clr);
  color: var(--primary-clr-1);
  padding: 0.8rem 1.6rem;
  border-radius: 100vw;
  cursor: pointer;
  transition: transform 0.25s linear;
  width: max-content;
  font-weight: bold;
}

.btn:active {
  transform: scale(0.9);
}

/* GAME BOARD */
.game-board {
  border: 4px solid var(--neutral-clr-2);
  width: min(100%, 120rem);
  border-radius: var(--border-radius);
  position: relative;
}

/* PLAYER */
.player--active {
  background: var(--neutral-clr-2) url('/images/noise-bg.avif') top left / 200px
    200px;
}

.player--win {
  background-color: hsl(33, 100%, 50%);
}

.player {
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
}

.player:first-child {
  padding-bottom: 12.8rem;
}

.player:last-child {
  padding-top: 12.8rem;
}

.player__title {
  font-size: 3.2rem;
  text-transform: uppercase;
  font-weight: normal;
}

.player__total-score {
  font-size: 4.2rem;
  color: var(--primary-clr-1);
}

.player__current-score {
  background: var(--primary-clr-1) url('/images/noise-bg.avif') center/cover
    no-repeat;
  font-size: 2.8rem;
  line-height: 8rem;
  width: 8rem;
  text-align: center;
  border-radius: var(--border-radius);
}

.player--active
  > :is(.player__title, .player__total-score, .player__current-score) {
  font-weight: bold;
}

/* PLAY */
.play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
  background: hsla(0, 0%, 100%, 0.1) url('/images/noise-bg.avif') top left/200px
    200px;
  backdrop-filter: blur(6px) contrast(0.9) grayscale(20%);
  border-radius: var(--border-radius);
}

.play__reset-btn {
  background-color: transparent;
  font-size: 3.2rem;
  cursor: pointer;
  border-radius: var(--border-radius);
  transition: transform 0.25s linear;
}

.play__reset-btn:active {
  transform: scale(0.9);
}

.play__dice {
  width: 8rem;
  aspect-ratio: 1;
  transition: background 0.25s linear;
}

.play__btn-wrapper {
  display: flex;
  gap: 1.6rem;
}

@media (min-width: 64rem) {
  .game-board {
    display: flex;
  }

  .player {
    flex: 1;
    padding: 12.8rem 1.6rem;
    gap: 3.2rem;
  }

  .player__title {
    font-size: 4rem;
    max-width: 19.2rem;
    text-align: center;
  }

  .player__total-score {
    font-size: 6rem;
  }

  .play {
    gap: 12.8rem;
  }

  .play__dice {
    width: 10rem;
  }
}