@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&family=Lora:ital,wght@0,400..700;1,400..700&display=swap');

.primary-color {
    background-color: #1b4332;
    min-height: 650px;
    padding-bottom: 2rem;
}

.alternative-color {
    background-color: #a8263b;
}

.secondary-color {
    background-color: #d4af37;
}

.primary-font {
    color: #f8f0e3;
}

h1 {
    font-family: "Cinzel";
    text-align: center;
    font-size: 2.5rem;
    padding-top: 5%;
     color: #f8f0e3;
}

h2 {
    font-family: "Cinzel";
    font-size: 1.7rem;
    text-align: center;
    color: #f8f0e3;
}

p {
    font-family: "Lora", serif;
    font-size: 1.2rem;
    color: #f8f0e3;
}

ul {
    font-family: "Lora", serif;
    font-size: 1.2rem;
    color: #f8f0e3;
    list-style-type: none;   
}

button {
    font-family: "Cinzel", serif;
    padding: 0.6rem 1.2rem;
    font-size: 1rem;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    margin-bottom: 5%;
    margin-left: 2%;
    background-color: #d4af37;
    color: #2b2b2b;
}

button:disabled {
  opacity: 70%;
  cursor: not-allowed;
}

input {
    font-family: "Lora", serif;
    font-size: 1.5rem;
    border-radius: 2px;
    margin-bottom: 5%;
    width: 50%;
}

.inputWrapper {
    text-align: center;
}

.output {
    font-family: "Lora", serif;
    color: #a8263b;
    font-size: 1.2rem;
}

.outputWrapper {
  display: flex;
  justify-content: center;
}

.resetOutput {
    font-size: 2rem;
    font-weight: bold;
    color: #a8263b;
    text-align: center;
}

.btnWrapper {
  display: flex;
  justify-content: center;
  margin: 7% 10%;
}

.specialBtn {
    padding: 2rem 2rem;
    color: #2b2b2b;
    font-weight: bold;
    box-shadow: 0 0 10px #ffd700, 0 0 20px #ffd700, 0 0 30px #ffd700;
    animation: shine 1.5s infinite alternate;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.failureBtn {
    padding: 2rem 2rem;
    color: #f8f0e3; 
    font-weight: bold;
    background-color: #a8263b; 
    box-shadow: 0 0 10px #a8263b, 0 0 20px #a8263b, 0 0 30px #a8263b;
    animation: fail-shine 1.5s infinite alternate;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.phaseRounds, 
.phaseStart,
.phaseTrick {
    margin: 0% 5%;
}

.startBtn {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 5%;
}

.addScore {
    width: 100%;
    text-align: center;
}

.resetBtn {
  display: flex;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: bold;
  margin: 2% 4%;
}

button:active {
  background-color:  #ffd700; 
  transform: translateY(1px);
}

.currentPlayer {
    color: #ffd700;
    font-weight: bold;
    font-size: 1.6rem;
    padding: 0.0rem 0.4rem;
}

.score {
    padding: 0.0rem 0.4rem;
     text-align: right;
}

.currentPlayer:hover {
    color: #c5a028;
}

.winningPhrase {
    margin: 0, 10%;
    width: 100%;
    text-align: center;
}

.highlightScore {
    color: #ffd700;
    font-weight: bold;
    transition: all 0.3s ease;
    display: inline-block; 
    transform: scale(1.4); 
    
}

.current:active {
    color: #ffd700;
    font-weight: bold;
    border: solid;
    padding: 0.3rem 0.6rem;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin: 7% 10%;
}

.dealer, 
.gameOver {
    color: #a8263b;
}

.chip {
    width: 20px;
    height: 20px;
}

.chip-wrapper {
  width: 20px; 
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.player-row {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0.5rem auto;
  max-width: 320px;        
  padding: 0.5rem 1rem;     
  border-radius: 12px;      
  background-color: rgba(0, 0, 0, 0.25); 
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); 
  cursor: pointer;
}

.player-name {
  text-align: left;
}

.player-info {
  display: flex;
  justify-content: space-between; 
  flex: 1; 
  padding-left: 0.3rem;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s ease; 
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}

/* ===============================
   MEDIA QUERIES
=================================*/

/* Tablet */
@media screen and (min-width: 768px), (max-width: 1023px) and (orientation: landscape) {

}

/* Desktop */
@media (min-width: 1024px) {
button:hover {
    background-color: #c5a028;
    font-weight: bold;
}

input {
    width: 25%;
    margin-bottom: 2%;
}

.current:hover {
    font-weight: bold;
    color: #ffd700;
}

button:active {
  background-color:  #ffd700; 
  transform: translateY(1px);
}

.btnWrapper {
  display: flex;
  justify-content: center;
  margin: 2% 10%;
}

  .grid-container {
  grid-template-columns: repeat(3, 1fr);
 margin: 2% 25%;
}
}