/* Game-specific styles */
#divWin,
#divLose,
#divEnd {
  width: 100%;
  display: none;
  z-index: 2000;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#winName,
#winGameName,
#loseName,
#loseGameName {
  z-index: 2100;
  position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  font-size: 2.5rem;
  font-family: 'Roboto', sans-serif;
}

#winGameName {
  font-size: 1.5rem;
}

#theWin {
  width: 487px;
  position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}

#theLose {
  font-size: 16rem;
  color: white;
  position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  --fa-secondary-opacity: 1.0;
  --fa-primary-color: white;
  --fa-secondary-color: #cc0000;
}



/* Game board elements */
.cardGames {
  width: 249px;
  height: 385px;
}

.cardShowing {
  @extend .card-base;
  width: 79px !important;
  height: 119px !important;
  border-width: 5px !important;
  border-radius: var(--border-radius-md) !important;
}

.cardShowingP {
  @extend .card-base;
  width: 39px !important;
  height: 59px !important;
  border-width: 3px !important;
  border-radius: var(--border-radius-sm) !important;
  float: left !important;
}

/* Game UI elements */
.GameCode {
  font-size: 1.6rem;
  margin-top: -5px;
  font-family: 'Roboto', sans-serif;
  white-space: nowrap;
}

#bigGameCode {
  font-size: 1.6rem;
  text-align: center;
  font-family: 'Roboto', sans-serif;
}

.nombre {
  text-align: center;
  font-size: 1.6rem;
  font-family: 'Roboto', sans-serif;
  height: 25px !important;
  text-transform: capitalize;
}

/* Game animations */
.blinking {
  animation: blinkingText 1.7s infinite;
}

@keyframes blinkingText {
  0% { color: lightsteelblue; }
  49% { color: lightsteelblue; }
  60% { color: white; }
  99% { color: white; }
  100% { color: lightsteelblue; }
}