body {
  font-family: sans-serif;
  background-image: url("./Images/Background.jpg");
  color: #eee;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  overflow: hidden; 
}

.game-table {
  width: 90vw;
  max-width: 1300px;
  aspect-ratio: 16 / 9; 
  background-color: #006400;
  border-width: clamp(10px, 1.5vw, 20px);
  border-style: solid;
  border-color: #5c3317;
  border-radius: clamp(50px, 8vw, 150px);
  padding: clamp(1rem, 2.5vw, 2.5rem);

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  box-sizing: border-box;
}

.dealer-area,
.player-area {
  height: 35%;
}

.hand {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  gap: clamp(5px, 1vw, 15px);
  min-height: clamp(100px, 15vh, 180px); 
}

h2 {
  text-align: center;
  margin: 0 0 10px 0;
  text-shadow: 1px 1px 2px black;
  font-size: clamp(1.1rem, 2vw, 1.8rem);
}

.info-area {
  text-align: center;
}
#game-message {
  font-weight: bold;
  min-height: 25px;
  font-size: clamp(1rem, 1.5vw, 1.4rem);
}
.bet-display {
  color: #ffd700;
  font-size: clamp(0.9rem, 1.3vw, 1.3rem);
}

.controls-area,
.game-controls-area {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(8px, 1.2vw, 15px);
  padding: clamp(0.5rem, 1.5vw, 1rem);
}

.controls-area {
  background-color: rgba(0, 0, 0, 0.2);
  padding: clamp(0.5rem, 1.5vw, 1rem);
  border-radius: 0 0 clamp(40px, 7vw, 120px) clamp(40px, 7vw, 120px);
}

.player-wallet {
  font-size: clamp(1rem, 1.5vw, 1.5rem);
}

.card {
  box-sizing: border-box;
  width: clamp(60px, 8vw, 110px); 
  aspect-ratio: 5 / 7;
  border: 1px solid black;
  border-radius: clamp(5px, 0.8vw, 10px);
  padding: clamp(4px, 1vw, 10px);
  position: relative;
  background-color: white;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  color: black;
}

.value {
  font-weight: bold;
  line-height: 1;
  font-size: clamp(20px, 4vw, 52px); /
}

.symbol {
  position: absolute;
  font-size: clamp(12px, 2.2vw, 28px); 
}

.symbol-up {
  top: clamp(3px, 0.5vw, 8px);
  left: clamp(4px, 0.8vw, 10px);
}

.symbol-down {
  bottom: clamp(3px, 0.5vw, 8px);
  right: clamp(4px, 0.8vw, 10px);
  transform: rotate(180deg);
}

.kier,
.karo {
  color: red;
}
.pik,
.trefl {
  color: black;
}

.card.face-down {
  background-color: #8d0606;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(0, 0, 0, 0.2),
    rgba(0, 0, 0, 0.2) 5px,
    transparent 5px,
    transparent 10px
  );
}

.face-down .value,
.face-down .symbol {
  display: none;
}

.chip-button,
.action-button {
  padding: clamp(8px, 1.5vh, 12px) clamp(15px, 2.5vw, 25px); 
  font-size: clamp(0.9rem, 1.5vw, 1.1rem); 
  font-weight: bold;
  border: 2px solid #ccc;
  border-radius: 30px; 
  cursor: pointer;
  transition: background-color 0.2s, transform 0.2s;
}

.chip-button {
  background-color: #d32f2f;
  color: white;
}
.chip-button:hover {
  background-color: #f44336;
  transform: scale(1.05);
}
.action-button {
  background-color: #fdd835;
  color: #333;
}
.action-button:hover {
  background-color: #ffeb3b;
  transform: scale(1.05);
}

.locked {
  background-color: #5a6268;
  color: #a0a0a0;
  cursor: not-allowed;
  box-shadow: none;
  border-color: #444;
}

.action-button.locked:hover,
.chip-button.locked:hover {
  background-color: #5a6268;
  transform: none;
}

.hidden {
  display: none !important;
}

@media (max-aspect-ratio: 1/1) {
  .game-table {
    aspect-ratio: 9 / 16;
  }
}