/* //////////////////// IMPORT //////////////////// */
@import url("https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap");

/* //////////////////// VARIABLES //////////////////// */
:root {
  --bg: radial-gradient(black 15%, transparent 16%) 0 0,
    radial-gradient(black 15%, transparent 16%) 8px 8px,
    radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%) 0 1px,
    radial-gradient(rgba(255, 255, 255, 0.1) 15%, transparent 20%) 8px 9px,
    linear-gradient(
      -90deg,
      rgba(0, 0, 0, 1) 0%,
      rgb(1, 24, 29) 50%,
      rgba(0, 0, 0, 1) 50%,
      rgba(0, 0, 0, 1) 100%
    );

  --linear-gradient-rgb: linear-gradient(
    45deg,
    #ff0000 0%,
    #ff9a00 10%,
    #d0de21 20%,
    #4fdc4a 30%,
    #3fdad8 40%,
    #2fc9e2 50%,
    #1c7fee 60%,
    #5f15f2 70%,
    #ba0cf8 80%,
    #fd07d9 90%,
    #ff0000 100%
  );
  --bx-shadow: 0.4rem 0.4rem 0.9rem #000, -0.4rem -0.4rem 0.9rem #9590c42a;

  --txt-shadow: 0.1rem 0.1rem 0.3rem rgb(0, 0, 0),
    -0.1rem -0.1rem 0.3rem #f8f7ff59;

  --txt-shadow-2: 0px 0px 5px rgba(253, 241, 13, 0.705),
    0px 0px 15px rgba(253, 241, 13, 0.568),
    0px 0px 25px rgba(253, 241, 13, 0.39);

  --txt-shadow-3: 0.2rem -0.2rem 0.2rem rgba(0, 0, 0, 0.531),
    -0.1rem -0.1rem 0.3rem #f8f7ff59;

  --color-orange: #d64444;
  --color-yellow: #fdf10d;
  --color-grey: #7e8d85;
  --color-light-grey: #f0ece7;
}
/* //////////////////// RESET CSS //////////////////// */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* //////////////////// BODY //////////////////// */
body {
  display: flex;
  align-items: center;
  font-family: "Lato", sans-serif;
  color: var(--color-light-grey);
  background-color: #000;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

main {
  min-height: 100vh;
  width: 100%;
  background: var(--bg);
  background-color: #282828;
  background-size: 6px 6px;
}

h1 {
  font-size: 3.5rem !important;
  letter-spacing: 0.4rem;
  word-spacing: 0.5rem;
  font-weight: 900;
  text-shadow: var(--txt-shadow-3);
  background: var(--linear-gradient-rgb) repeat 0% 0% / 400% 30%;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  animation: animBgH1 18s linear infinite;
}

@keyframes animBgH1 {
  0% {
    background-position: 0%;
  }
  100% {
    background-position: 400%;
  }
}

#wrapper-player-1,
#wrapper-player-2 {
  border-radius: 1.5rem;
  box-shadow: none;
}

#wrapper-player-1.player-active,
#wrapper-player-2.player-active {
  animation: 0.7s ease-in-out forwards animPlayerRound;
}

@keyframes animPlayerRound {
  100% {
    box-shadow: var(--bx-shadow);
  }
}

#new-game-action,
#roll-action,
#hold-action {
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--color-yellow);
  cursor: pointer;
  transition: text-shadow 0.3s ease-in-out;
  width: 13.5rem;
  border: 2px solid var(--color-orange);
  border-radius: 0.5rem;
  height: 3.75rem;
  box-shadow: var(--bx-shadow);
}
#new-game-action {
  max-width: 13.125rem;
}
#new-game-action:hover,
#new-game-action:focus,
#roll-action:hover,
#roll-action:focus,
#hold-action:hover,
#hold-action:focus {
  text-shadow: var(--txt-shadow-2);
}
#label-player-1,
#label-player-2 {
  color: var(--color-grey);
  font-size: 1.8rem;
  font-weight: 300;
}

#label-player-1.active,
#label-player-2.active {
  color: var(--color-yellow);
  animation: animActiveLabel 0.7s forwards cubic-bezier(0.17, 0.67, 0.52, 1.71);
}

@keyframes animActiveLabel {
  0% {
    opacity: 0;
    transform: translate(0, 2.8rem);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}

#score-player-1,
#score-player-2 {
  font-size: 3rem;
  color: var(--color-orange);
  font-weight: 300;
  text-shadow: var(--txt-shadow);
}

.current-wrapper {
  width: 7.8rem;
  min-height: 5.3rem;
  border-radius: 1.3rem;
  box-shadow: var(--bx-shadow);
}

.current-label {
  color: var(--color-grey);
}

#current-score-p1,
#current-score-p2 {
  font-size: 1.5rem;
  color: var(--color-grey);
  font-weight: 300;
  text-shadow: var(--txt-shadow);
}

#wrapper-player-1.player-active #current-score-p1,
#wrapper-player-2.player-active #current-score-p2 {
  color: var(--color-light-grey);
}

.bi {
  color: var(--color-orange);
}

/* //////////////////// DICE //////////////////// */
.dice-wrapper {
  width: 6.25rem;
  height: 6.25rem;
  border: 1px solid #ccc;
  margin: 5rem;
  perspective: 400px;
}

i[class*=" bi-dice"] {
  font-size: 6.25rem;
  filter: invert(59%) sepia(14%) saturate(239%) hue-rotate(95deg)
    brightness(10%) contrast(84%);
}

.dice {
  width: 6.25rem;
  height: 6.25rem;
  position: relative;
  transform-style: preserve-3d;
  transform: translateZ(-6.25rem);
  transition: transform 0.6s ease-in-out;
}

.dice__face {
  position: relative;
  border: 3px solid var(--color-light-grey);
  overflow: hidden;
  position: absolute;
  width: 6.25rem;
  height: 6.25rem;
  transition: box-shadow 0.35s ease-out;
}
.dice__face::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border: 4px solid rgba(117, 117, 117, 0.73);
  box-shadow: inset 5px 5px 9px #5a5a5a81, inset -5px -5px 9px #000000;
}

div[class*=" dice__face"] {
  background: var(--color-light-grey);
}

.dice__face--1 {
  transform: rotateY(0deg) translateZ(3.125rem);
}
.dice__face--2 {
  transform: rotateY(-90deg) translateZ(3.125rem);
}
.dice__face--3 {
  transform: rotateX(90deg) translateZ(3.125rem);
}
.dice__face--4 {
  transform: rotateX(-90deg) translateZ(3.125rem);
}
.dice__face--5 {
  transform: rotateY(90deg) translateZ(3.125rem);
}
.dice__face--6 {
  transform: rotateY(180deg) translateZ(3.125rem);
}

.dice.show-1 {
  transform: translateZ(-3.125rem) rotateY(0deg);
}
.dice.show-2 {
  transform: translateZ(-3.125rem) rotateY(90deg);
}
.dice.show-3 {
  transform: translateZ(-3.125rem) rotateX(-90deg);
}
.dice.show-4 {
  transform: translateZ(-3.125rem) rotateX(450deg);
}
.dice.show-5 {
  transform: translateZ(-3.125rem) rotateY(-90deg);
}
.dice.show-6 {
  transform: translateZ(-3.125rem) rotateY(-180deg);
}

/* //////////////////// MEDIA QUERY SCREEN //////////////////// */
/* Small devices (landscape phones, 576px and up) */
@media screen and (min-width: 568px) {
  #new-game-action,
  #roll-action,
  #hold-action {
    font-size: 1.5rem;
  }
  #label-player-1,
  #label-player-2 {
    font-size: 2rem;
  }
  .current-wrapper {
    width: 10rem;
  }
  #current-score-p1,
  #current-score-p2 {
    font-size: 2.5rem;
  }
}
/* Medium devices (tablets, 768px and up) */
@media screen and (min-width: 768px) {
  h1 {
    font-size: 3.8rem !important;
  }
  #label-player-1,
  #label-player-2 {
    font-size: 2.5rem;
  }
  #score-player-1,
  #score-player-2 {
    font-size: 4rem;
  }
}

/* Large devices (desktops, 992px and up) */
@media screen and (min-width: 992px) {
  #modal-title {
    transform: translate(-25rem, 0);
    animation: animTitleModal 1s forwards 1.2s
      cubic-bezier(0.17, 0.67, 0.78, 1.61);
  }
  @keyframes animTitleModal {
    to {
      transform: translate(0, 0);
    }
  }
}
/* //////////////////// MODAL + SCORES DISPLAY LEDS //////////////////// */
.modal-content {
  box-shadow: inset -3px -3px 9px rgba(125, 81, 177, 0.753),
    inset 3px 3px 9px rgba(202, 210, 223, 0.753);
}
.modal-content {
  background: var(--bg);
  background-color: #282828;
  background-size: 6px 6px;
  position: relative;
  border-radius: 1rem;
}
.modal-header {
  position: relative;
  overflow: hidden;
}
#modal-title {
  font-size: 1.3rem;
  position: relative;
  color: var(--color-yellow);
}

#modal-mess-player1 > p,
#modal-mess-player2 > p {
  color: var(--color-light-grey);
}
.modal-footer {
  border-top: none;
}

#modal-title,
#modal-mess-player1 > p,
#modal-mess-player2 > p,
.modal-footer .btn {
  font-weight: 400;
  letter-spacing: 2px;
}
.modal-footer .btn {
  font-size: 1.3rem;
  background-color: back;
  color: var(--color-yellow);
  box-shadow: var(--bx-shadow);
  border: 2px solid var(--color-orange);
  width: 13.5rem;
  border-radius: 0.5rem;
}
.modal-footer .btn:hover,
.modal-footer .btn:focus {
  font-weight: 900;
  text-shadow: var(--txt-shadow-2);
}
.block-leds-p1,
.block-leds-p2 {
  position: relative;
  width: 8.75rem/2;
  height: 8.75rem;
  animation: animBg 10s linear infinite;
  transform: rotateZ(-18deg);
}

@keyframes animBg {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}
.block-leds-p1 .led,
.block-leds-p2 .led {
  position: absolute;
  width: 0.375rem;
  height: 1.3rem;
  border-radius: 0.2em;
  background: #000;
  left: 50%;
  transform: rotate(calc(18deg * var(--i)));
  transform-origin: 0 4.375rem;
}

.block-leds-p1 .led.active,
.block-leds-p2 .led.active {
  animation: animLed 2s ease-in-out forwards;
  animation-delay: calc(0.05s * var(--i));
}

@keyframes animLed {
  0%,
  50% {
    background-color: #000;
    box-shadow: none;
  }
  50.1%,
  100% {
    background-color: #0f0;
    box-shadow: 0 0 3px #0f0, 0 0 12px #0f0, 0 0 15px #0f0;
  }
}

#modal-score-p1,
#modal-score-p2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(18deg);
  color: white;
  font-weight: 900;
  letter-spacing: 3px;
  animation: animScores 2s ease-in-out forwards;
}

@keyframes animScores {
  0%,
  50% {
    color: #000;
    text-shadow: none;
  }
  50.1%,
  100% {
    text-shadow: 0 0 3px #0f0, 0 0 12px #0f0;
  }
}

.bg-rgb::after {
  content: "";
  position: absolute;
  background: var(--linear-gradient-rgb) repeat 0% 0% / 560% 250%;
  inset: -10px;
  animation: animRgb 9s linear infinite;
  filter: blur(36px);
  border-radius: 1rem;
  z-index: -5;
}

@keyframes animRgb {
  0% {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}