:root {
  color-scheme: dark;
  font-family: Arial, Helvetica, sans-serif;
  background: #13251c;
  color: #f4f0df;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 50% 30%, rgba(45, 120, 76, 0.55), transparent 42%),
    #101813;
}

button,
a {
  font: inherit;
}

.app-shell {
  width: min(1120px, 100%);
  margin: 0 auto;
  padding: 20px;
}

.topbar,
.scoreboard,
.seat-header,
.controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.topbar {
  margin-bottom: 18px;
}

.eyebrow,
h1,
h2,
p {
  margin: 0;
}

.eyebrow {
  color: #c9b36a;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
}

h2 {
  font-size: 1rem;
}

.text-button,
.controls button {
  border: 1px solid rgba(244, 240, 223, 0.24);
  border-radius: 8px;
  background: #f0d06b;
  color: #15130c;
  cursor: pointer;
  padding: 10px 14px;
  text-decoration: none;
}

.text-button {
  background: rgba(244, 240, 223, 0.1);
  color: #f4f0df;
}

.table {
  display: grid;
  gap: 16px;
  min-height: calc(100vh - 125px);
  border: 12px solid #684429;
  border-radius: 28px;
  background: #1f6f47;
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.08), 0 24px 60px rgba(0, 0, 0, 0.35);
  padding: 20px;
}

.scoreboard {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  text-align: center;
}

.scoreboard div,
.status-panel {
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.2);
  padding: 12px;
}

.scoreboard span,
.seat-header p,
#ruleText {
  color: #d6d2bf;
  font-size: 0.9rem;
}

.scoreboard strong {
  display: block;
  font-size: 1.35rem;
}

.scoreboard div:nth-child(2) {
  display: none;
}

.seat {
  display: grid;
  gap: 10px;
}

.cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(54px, 1fr));
  gap: 10px;
  min-height: 136px;
}

.card {
  position: relative;
  display: block;
  min-height: 132px;
  border: 2px solid #f5f0dc;
  border-radius: 8px;
  background: #fbf8ea;
  color: #111;
  font-size: 1rem;
  font-weight: 800;
  box-shadow: 0 8px 0 rgba(0, 0, 0, 0.2);
  overflow: hidden;
  padding: 10px 8px;
}

.card:nth-child(2n) {
  transform: translateY(8px);
}

.card:disabled {
  cursor: default;
  opacity: 1;
}

.card-back {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.28) 0 10%, transparent 11%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.18) 0 4px, transparent 4px 12px),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.16) 0 4px, transparent 4px 12px),
    #6b3fb1;
  color: #fff;
}

.card-back span {
  width: 38%;
  aspect-ratio: 1;
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  background: radial-gradient(circle, #eadcff 0 34%, #8d5ad8 35% 58%, transparent 59%);
}

.card.selected {
  outline: 4px solid #f0d06b;
  transform: translateY(-8px);
}

.red-suit {
  color: #c7242e;
}

.black-suit {
  color: #111;
}

.card-corner {
  position: absolute;
  display: grid;
  justify-items: center;
  gap: 0;
  font-size: clamp(0.74rem, 1.8vw, 1rem);
  line-height: 0.9;
  z-index: 2;
}

.card-corner.top-left {
  left: 7px;
  top: 7px;
}

.card-corner.bottom-right {
  right: 7px;
  bottom: 7px;
  transform: rotate(180deg);
}

.pip-grid {
  position: absolute;
  inset: 24px 22px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, 1fr);
  align-items: center;
  justify-items: center;
  font-size: clamp(1rem, 3vw, 1.8rem);
  line-height: 1;
}

.pip {
  display: block;
}

.pip-grid-1 .pip:nth-child(1) {
  grid-column: 2;
  grid-row: 2 / span 2;
}

.pip-grid-2 .pip:nth-child(1) {
  grid-column: 2;
  grid-row: 1;
}

.pip-grid-2 .pip:nth-child(2) {
  grid-column: 2;
  grid-row: 4;
  transform: rotate(180deg);
}

.pip-grid-3 .pip:nth-child(1) {
  grid-column: 2;
  grid-row: 1;
}

.pip-grid-3 .pip:nth-child(2) {
  grid-column: 2;
  grid-row: 2 / span 2;
}

.pip-grid-3 .pip:nth-child(3) {
  grid-column: 2;
  grid-row: 4;
  transform: rotate(180deg);
}

.pip-grid-4 .pip:nth-child(1),
.pip-grid-5 .pip:nth-child(1),
.pip-grid-6 .pip:nth-child(1),
.pip-grid-7 .pip:nth-child(1),
.pip-grid-8 .pip:nth-child(1),
.pip-grid-9 .pip:nth-child(1),
.pip-grid-10 .pip:nth-child(1) {
  grid-column: 1;
  grid-row: 1;
}

.pip-grid-4 .pip:nth-child(2),
.pip-grid-5 .pip:nth-child(2),
.pip-grid-6 .pip:nth-child(2),
.pip-grid-7 .pip:nth-child(2),
.pip-grid-8 .pip:nth-child(2),
.pip-grid-9 .pip:nth-child(2),
.pip-grid-10 .pip:nth-child(2) {
  grid-column: 3;
  grid-row: 1;
}

.pip-grid-4 .pip:nth-child(3),
.pip-grid-5 .pip:nth-child(3),
.pip-grid-6 .pip:nth-child(3),
.pip-grid-7 .pip:nth-child(3),
.pip-grid-8 .pip:nth-child(3),
.pip-grid-9 .pip:nth-child(3),
.pip-grid-10 .pip:nth-child(3) {
  grid-column: 1;
  grid-row: 4;
  transform: rotate(180deg);
}

.pip-grid-4 .pip:nth-child(4),
.pip-grid-5 .pip:nth-child(4),
.pip-grid-6 .pip:nth-child(4),
.pip-grid-7 .pip:nth-child(4),
.pip-grid-8 .pip:nth-child(4),
.pip-grid-9 .pip:nth-child(4),
.pip-grid-10 .pip:nth-child(4) {
  grid-column: 3;
  grid-row: 4;
  transform: rotate(180deg);
}

.pip-grid-5 .pip:nth-child(5),
.pip-grid-7 .pip:nth-child(5),
.pip-grid-9 .pip:nth-child(5) {
  grid-column: 2;
  grid-row: 2 / span 2;
}

.pip-grid-6 .pip:nth-child(5),
.pip-grid-7 .pip:nth-child(6),
.pip-grid-8 .pip:nth-child(5),
.pip-grid-9 .pip:nth-child(6),
.pip-grid-10 .pip:nth-child(5) {
  grid-column: 1;
  grid-row: 2 / span 1;
}

.pip-grid-6 .pip:nth-child(6),
.pip-grid-7 .pip:nth-child(7),
.pip-grid-8 .pip:nth-child(6),
.pip-grid-9 .pip:nth-child(7),
.pip-grid-10 .pip:nth-child(6) {
  grid-column: 3;
  grid-row: 3;
  transform: rotate(180deg);
}

.pip-grid-8 .pip:nth-child(7),
.pip-grid-10 .pip:nth-child(7) {
  grid-column: 3;
  grid-row: 2;
}

.pip-grid-8 .pip:nth-child(8),
.pip-grid-10 .pip:nth-child(8) {
  grid-column: 1;
  grid-row: 3;
  transform: rotate(180deg);
}

.pip-grid-9 .pip:nth-child(8),
.pip-grid-10 .pip:nth-child(9) {
  grid-column: 2;
  grid-row: 1;
}

.pip-grid-9 .pip:nth-child(9),
.pip-grid-10 .pip:nth-child(10) {
  grid-column: 2;
  grid-row: 4;
  transform: rotate(180deg);
}

.face-card {
  position: absolute;
  inset: 28px 24px;
  display: grid;
  place-items: center;
}

.face-rank {
  font-size: clamp(2rem, 6vw, 4.3rem);
  line-height: 0.86;
}

.face-suit {
  font-size: clamp(1.3rem, 4vw, 2.5rem);
  line-height: 1;
}

.table-center {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(220px, 320px);
  gap: 16px;
  align-items: stretch;
}

.pot-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(110px, max-content) minmax(130px, 1fr);
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 140px;
  border: 2px solid rgba(244, 240, 223, 0.15);
  border-radius: 8px;
  background:
    radial-gradient(circle at 42% 50%, rgba(240, 208, 107, 0.18), transparent 46%),
    rgba(0, 0, 0, 0.16);
  overflow: hidden;
}

.pot-copy {
  text-align: right;
}

.pot-copy span {
  display: block;
  color: #d6d2bf;
  font-size: 0.86rem;
  text-transform: uppercase;
}

.pot-copy strong {
  display: block;
  font-size: clamp(2rem, 6vw, 3.5rem);
  line-height: 1;
}

.chip-stack {
  position: relative;
  min-height: 82px;
  min-width: 150px;
}

.chip {
  position: absolute;
  left: calc(44px + var(--chip-x));
  bottom: calc(24px + var(--chip-y));
  width: 42px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.72);
  border-radius: 999px;
  background: #d64f45;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.18), inset 0 -3px 0 rgba(0, 0, 0, 0.18);
}

.chip::after {
  content: "";
  position: absolute;
  inset: 3px 10px;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.48);
}

.chip-2 {
  background: #f0d06b;
}

.chip-3 {
  background: #397fd2;
}

.chip-4 {
  background: #f4f0df;
}

.chips-bet .chip,
.chips-raise .chip {
  animation: chipToPot 500ms ease-out both;
  animation-delay: var(--chip-delay);
}

.chips-raise .chip {
  animation-name: chipRaiseToPot;
}

.card-deal {
  animation: dealCard 500ms ease-out both;
}

.card-draw {
  animation: drawCard 500ms ease-out both;
}

.status-panel {
  display: grid;
  align-content: center;
  gap: 6px;
  text-align: left;
}

#statusText {
  font-size: 1.25rem;
  font-weight: 700;
}

.controls {
  justify-content: center;
  flex-wrap: wrap;
}

.controls button:disabled,
.text-button:disabled {
  cursor: not-allowed;
  filter: grayscale(0.9);
  opacity: 0.45;
}

.test-shell {
  display: grid;
  gap: 16px;
}

.test-results {
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.24);
  padding: 16px;
}

.test-results li {
  margin: 8px 0;
}

.pass strong {
  color: #9ff0aa;
}

.fail strong {
  color: #ff9a8a;
}

@keyframes dealCard {
  from {
    opacity: 0;
    transform: translateY(-72vh) rotate(-6deg) scale(0.92);
  }

  to {
    opacity: 1;
    transform: translateY(0) rotate(0) scale(1);
  }
}

@keyframes drawCard {
  0% {
    opacity: 0;
    transform: translateY(-72vh) rotate(7deg) scale(0.92);
  }

  65% {
    opacity: 1;
    transform: translateY(8px) rotate(-1deg) scale(1);
  }

  100% {
    transform: translateX(0) rotate(0);
  }
}

@keyframes chipToPot {
  from {
    opacity: 0;
    transform: translateY(70vh) scale(0.72);
  }

  to {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
}

@keyframes chipRaiseToPot {
  from {
    opacity: 0;
    transform: translateY(-58vh) scale(0.72);
  }

  to {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
}

@media (max-width: 720px) {
  .app-shell {
    padding: 12px;
  }

  .topbar,
  .seat-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .table {
    border-width: 8px;
    border-radius: 18px;
    min-height: auto;
    padding: 12px;
  }

  .cards {
    gap: 6px;
  }

  .card {
    min-height: 96px;
  }

  .table-center {
    grid-template-columns: 1fr;
  }

  .pot-stage {
    grid-template-columns: 1fr;
    gap: 8px;
    text-align: center;
  }

  .pot-copy {
    text-align: center;
  }
}