:root {
  --felt: #0b6b3a;
  --felt-dark: #075029;
  --gold: #f4c542;
  --card-bg: #fdfdf7;
  --card-red: #c0392b;
  --card-black: #1b1b1b;
  --ink: #f5f5f0;
  --shadow: rgba(0, 0, 0, 0.35);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: radial-gradient(circle at 50% 0%, #128a4c 0%, var(--felt) 45%, var(--felt-dark) 100%);
}

#root {
  min-height: 100vh;
}

.table {
  max-width: 880px;
  margin: 0 auto;
  padding: 1rem 1rem 2.5rem;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ---- Top bar ---- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid rgba(255, 255, 255, 0.12);
}
.topbar__title {
  margin: 0;
  font-size: 1.6rem;
  letter-spacing: 0.04em;
  color: var(--gold);
  text-shadow: 0 2px 6px var(--shadow);
}
.topbar__stats {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.stat {
  font-size: 1rem;
  opacity: 0.9;
}
.stat strong {
  color: var(--gold);
  font-size: 1.15rem;
}
.link {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: var(--ink);
  border-radius: 999px;
  padding: 0.25rem 0.8rem;
  cursor: pointer;
  font-size: 0.85rem;
}
.link:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* ---- Felt / play area ---- */
.felt {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 0;
}
.felt__zone {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
  min-height: 150px;
  align-items: center;
}
.placeholder {
  opacity: 0.4;
  font-size: 1.1rem;
  font-style: italic;
}

/* ---- Hands ---- */
.hand {
  background: rgba(0, 0, 0, 0.15);
  border: 2px solid transparent;
  border-radius: 14px;
  padding: 0.6rem 0.9rem 0.9rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.hand--active {
  border-color: var(--gold);
  box-shadow: 0 0 18px rgba(244, 197, 66, 0.4);
}
.hand--win,
.hand--blackjack {
  border-color: #2ecc71;
}
.hand--lose {
  border-color: #e74c3c;
  opacity: 0.85;
}
.hand--push {
  border-color: #bdc3c7;
}
.hand__header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}
.hand__total {
  background: rgba(0, 0, 0, 0.4);
  border-radius: 999px;
  padding: 0.05rem 0.55rem;
  font-weight: 700;
  color: var(--gold);
}
.hand__badge {
  margin-left: auto;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 0.15rem 0.5rem;
  border-radius: 6px;
}
.hand__badge--win,
.hand__badge--blackjack {
  background: #2ecc71;
  color: #04361b;
}
.hand__badge--lose {
  background: #e74c3c;
  color: #fff;
}
.hand__badge--push {
  background: #bdc3c7;
  color: #2c3e50;
}
.hand__cards {
  display: flex;
  gap: 0.5rem;
}

/* ---- Cards ---- */
.card {
  position: relative;
  width: 72px;
  height: 100px;
  background: var(--card-bg);
  color: var(--card-black);
  border-radius: 9px;
  box-shadow: 0 4px 10px var(--shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  animation: deal 0.25s ease-out;
}
.card--red {
  color: var(--card-red);
}
.card__pip {
  font-size: 2rem;
}
.card__corner {
  position: absolute;
  font-size: 0.8rem;
  line-height: 0.85;
  text-align: center;
}
.card__corner--tl {
  top: 5px;
  left: 6px;
}
.card__corner--br {
  bottom: 5px;
  right: 6px;
  transform: rotate(180deg);
}
.card--back {
  background: repeating-linear-gradient(45deg, #7b1f2b, #7b1f2b 6px, #9b2a38 6px, #9b2a38 12px);
  border: 3px solid var(--card-bg);
}
@keyframes deal {
  from {
    transform: translateY(-14px) rotate(-4deg);
    opacity: 0;
  }
}

/* ---- Message ---- */
.message {
  text-align: center;
  font-size: 1.15rem;
  min-height: 1.6rem;
  font-weight: 600;
  text-shadow: 0 2px 4px var(--shadow);
}
.message--settled {
  color: var(--gold);
  font-size: 1.3rem;
}

/* ---- Actions / betting ---- */
.actions {
  padding-top: 1rem;
  border-top: 2px solid rgba(255, 255, 255, 0.12);
  min-height: 90px;
}
.controls {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}
.btn {
  background: #1f2d3d;
  color: var(--ink);
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-radius: 10px;
  padding: 0.7rem 1.4rem;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  min-width: 96px;
  transition: transform 0.08s, background 0.15s, opacity 0.15s;
}
.btn:hover:not(:disabled) {
  background: #2c3e50;
  transform: translateY(-2px);
}
.btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.btn--primary {
  background: var(--gold);
  color: #3a2c00;
  border-color: #d4a92f;
}
.btn--primary:hover:not(:disabled) {
  background: #ffd34d;
}

.betbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.betbar__chips {
  display: flex;
  gap: 0.5rem;
}
.chip {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 3px dashed rgba(255, 255, 255, 0.7);
  background: #c0392b;
  color: #fff;
  font-weight: 800;
  cursor: pointer;
  font-size: 0.85rem;
}
.chip:hover:not(:disabled) {
  transform: scale(1.06);
}
.chip:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.chip--clear {
  background: #34495e;
  border-style: solid;
}
.betbar__bet {
  font-size: 1.1rem;
}
.betbar__bet strong {
  color: var(--gold);
  font-size: 1.3rem;
}
.broke {
  text-align: center;
  color: #ffd34d;
  margin: 0.75rem 0 0;
}

@media (max-width: 560px) {
  .card {
    width: 58px;
    height: 82px;
  }
  .card__pip {
    font-size: 1.5rem;
  }
  .topbar__title {
    font-size: 1.25rem;
  }
}