:root {
  --felt-deep: #071a14;
  --felt: #0d2f24;
  --felt-lit: #164536;
  --gold: #e0c36a;
  --gold-dim: #b8963a;
  --cream: #f3ead7;
  --ink: #12211c;
  --card: #fffaf2;
  --red: #c62828;
  --black: #1a1a1a;
  --danger: #ff5a4a;
  --rail: #3a2414;
  --shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  font-family: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  color: var(--cream);
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(224, 195, 106, 0.12), transparent 50%),
    linear-gradient(180deg, #06130f 0%, var(--felt-deep) 40%, #05110d 100%);
  min-height: 100vh;
}

.felt-glow {
  pointer-events: none;
  position: fixed;
  inset: 12vh 8vw auto;
  height: 50vh;
  background: radial-gradient(ellipse, rgba(22, 90, 68, 0.45), transparent 70%);
  filter: blur(10px);
}

h1,
h2 {
  font-family: "EB Garamond", "Times New Roman", Georgia, serif;
  margin: 0;
}

.topbar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 28px 8px;
  max-width: 1180px;
  margin: 0 auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.brand-mark {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, #1f5c46, #0c2b22);
  border: 1px solid rgba(224, 195, 106, 0.45);
  color: var(--gold);
  font-size: 26px;
}

.brand h1 {
  font-size: 30px;
  letter-spacing: 0.03em;
  line-height: 1;
}

.brand p {
  margin: 2px 0 0;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.7;
}

.chip-stack {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(224, 195, 106, 0.25);
  padding: 8px 14px;
  border-radius: 999px;
}

.chip-disc {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background:
    repeating-conic-gradient(#fff 0 12deg, transparent 12deg 24deg),
    radial-gradient(circle at 50% 50%, #c62828 58%, #fff 59% 68%, #c62828 69%);
  box-shadow: inset 0 0 0 2px #8b1d1d;
}

.chip-label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.65;
}

.chip-stack strong {
  font-size: 20px;
  color: var(--gold);
}

.table {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 12px auto 32px;
  padding: 22px;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: 22px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 30%),
    linear-gradient(160deg, var(--felt-lit), var(--felt) 55%, #0a261d);
  border: 10px solid #5c3a1f;
  border-radius: 28px;
  box-shadow: var(--shadow), inset 0 0 0 2px rgba(224, 195, 106, 0.28), inset 0 0 80px rgba(0, 0, 0, 0.25);
}

.board-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.board-meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  opacity: 0.9;
}

.board {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  aspect-ratio: 5 / 5.4;
}

.cell {
  position: relative;
  border: 0;
  padding: 0;
  background: none;
  perspective: 800px;
  cursor: pointer;
  min-height: 0;
}

.cell:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.cell-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.45s ease;
}

.cell.revealed .cell-inner {
  transform: rotateY(180deg);
}

.cell-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: 10px;
  overflow: hidden;
}

.cell-back {
  background:
    linear-gradient(135deg, rgba(224, 195, 106, 0.18), transparent 40%),
    repeating-linear-gradient(45deg, #6f1d1d 0 6px, #4a1010 6px 12px);
  border: 2px solid #3d0f0f;
  box-shadow: inset 0 0 0 4px #8b2a2a;
}

.cell-back::after {
  content: "♠";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(224, 195, 106, 0.55);
  font-size: 28px;
}

.cell-front {
  transform: rotateY(180deg);
  background: var(--card);
  color: var(--ink);
  border: 1px solid #d7cbb3;
  box-shadow: inset 0 0 0 3px #fff;
}

.playing-card {
  height: 100%;
  padding: 6px 7px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.playing-card.red {
  color: var(--red);
}

.playing-card.black {
  color: var(--black);
}

.card-corner {
  font-weight: 700;
  line-height: 1.05;
  font-size: clamp(12px, 2.1vw, 16px);
}

.card-corner small {
  display: block;
  font-size: 0.95em;
}

.card-pip {
  text-align: center;
  font-size: clamp(22px, 4.5vw, 36px);
  line-height: 1;
}

.card-corner.br {
  align-self: flex-end;
  transform: rotate(180deg);
}

.mine-card {
  height: 100%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 30%, #5a1a16, #1b0a08);
  color: #ffd0c8;
}

.mine-card span {
  font-size: 28px;
}

.adj {
  position: absolute;
  top: 5px;
  right: 5px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  background: rgba(7, 26, 20, 0.88);
  color: #fff;
  z-index: 2;
}

.adj.n1 { color: #7eb6ff; }
.adj.n2 { color: #7dff9a; }
.adj.n3 { color: #ff8a80; }
.adj.n4 { color: #b39ddb; }
.adj.n5 { color: #ffcc80; }
.adj.n6 { color: #80deea; }
.adj.n7 { color: #f8bbd0; }
.adj.n8 { color: #eee; }

.flag-mark {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  font-size: 26px;
  z-index: 3;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
  pointer-events: none;
}

.cell.flagged:not(.revealed) .flag-mark,
.cell.flag-correct .flag-mark,
.cell.flag-wrong .flag-mark {
  display: grid;
}

.cell.flagged:not(.revealed) .cell-back {
  filter: brightness(0.72);
}

.cell.flag-correct .flag-mark {
  color: #7dff9a;
}

.cell.flag-correct .cell-front {
  box-shadow: 0 0 0 3px #3d9a62;
}

.cell.flag-wrong .flag-mark {
  color: var(--danger);
}

.cell.flag-wrong:not(.revealed) .cell-back {
  box-shadow: inset 0 0 0 3px var(--danger);
  filter: brightness(0.8);
}

.cell.exploded .cell-front {
  box-shadow: 0 0 0 3px var(--danger), inset 0 0 20px rgba(255, 80, 60, 0.5);
}

.board-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

button,
select {
  font-family: inherit;
}

.primary-btn,
.secondary-btn,
.gold-btn,
.ghost-btn {
  border: 0;
  cursor: pointer;
  border-radius: 10px;
  padding: 11px 16px;
  font-weight: 600;
  font-size: 14px;
}

.primary-btn {
  background: var(--cream);
  color: var(--ink);
}

.secondary-btn {
  background: rgba(0, 0, 0, 0.28);
  color: var(--cream);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.secondary-btn[aria-pressed="true"] {
  background: #7a1f1f;
  border-color: #c62828;
}

.gold-btn {
  background: linear-gradient(180deg, #f0d78c, var(--gold-dim));
  color: #2a1d06;
}

.gold-btn:disabled,
.primary-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.ghost-btn {
  background: transparent;
  color: var(--cream);
  border: 1px solid rgba(243, 234, 215, 0.25);
}

a.ghost-btn {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.side-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hand-panel,
.setup-panel,
.paytable,
.help-card {
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 14px;
}

.panel-head h2,
.paytable h2,
.help-card h2 {
  font-size: 26px;
}

#hand-rank {
  margin: 4px 0 12px;
  color: var(--gold);
  min-height: 1.3em;
}

.hand-slots {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.hand-slot {
  background: rgba(255, 255, 255, 0.04);
  border: 1px dashed rgba(243, 234, 215, 0.2);
  border-radius: 8px;
  min-height: 92px;
  overflow: hidden;
}

.hand-slot.filled {
  border-style: solid;
  border-color: rgba(224, 195, 106, 0.35);
  background: var(--card);
}

.hand-slot .playing-card {
  min-height: 92px;
}

.hand-slot.used {
  outline: 2px solid var(--gold);
}

.payout-preview {
  margin: 12px 0 0;
  font-weight: 600;
}

.setup-panel {
  display: grid;
  gap: 16px;
}

.mode-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}

.mode-grid button {
  min-height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: #0b1f19;
  color: var(--cream);
  font-weight: 600;
  cursor: pointer;
}

.mode-grid button[aria-pressed="true"] {
  border-color: var(--gold);
  box-shadow: inset 0 0 0 1px var(--gold);
  color: var(--gold);
}

.duel-hud {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.duel-hud[hidden] {
  display: none;
}

.duel-seat {
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 10px 12px;
}

.duel-seat strong,
.duel-seat span,
.duel-seat small {
  display: block;
}

.duel-seat span {
  color: var(--gold);
  font-weight: 600;
}

.duel-seat small {
  opacity: 0.75;
  margin-top: 2px;
}

.duel-seat.active {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold);
}

.duel-seat.busted {
  opacity: 0.55;
}

.duel-pot {
  grid-column: 1 / -1;
  margin: 0;
  text-align: center;
  color: var(--gold);
}

.user-row[aria-pressed="true"] {
  border-color: var(--gold);
  box-shadow: inset 0 0 0 1px var(--gold);
}

.setup-block h2 {
  font-size: 24px;
  margin-bottom: 10px;
}

.setup-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.setup-head h2 {
  margin: 0;
}

.bet-now {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bet-now strong {
  min-width: 64px;
  text-align: center;
  font-size: 26px;
  color: var(--gold);
  font-family: "EB Garamond", Georgia, serif;
}

.bet-now button {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(224, 195, 106, 0.35);
  border-radius: 8px;
  background: #0b1f19;
  color: var(--cream);
  font-size: 20px;
  cursor: pointer;
}

.bet-presets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.chip-btn {
  position: relative;
  height: 44px;
  border: 2px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.18);
}

.chip-btn[data-amount="10"] { background: #8d8d8d; color: #111; }
.chip-btn[data-amount="25"] { background: #c62828; }
.chip-btn[data-amount="50"] { background: #1565c0; }
.chip-btn[data-amount="100"] { background: #1b5e20; }
.chip-btn[data-amount="250"] { background: #e65100; }
.chip-btn[data-amount="500"] { background: #6a1b9a; }

.chip-btn[aria-pressed="true"] {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.chip-btn:disabled,
.bet-now button:disabled,
.bet-extras button:disabled,
.diff-card:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

.bet-extras {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}

.diff-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.diff-card {
  text-align: left;
  background: #0b1f19;
  color: var(--cream);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 10px 8px;
  cursor: pointer;
}

.diff-card[aria-checked="true"] {
  border-color: var(--gold);
  box-shadow: inset 0 0 0 1px var(--gold);
}

.diff-card strong {
  display: block;
  font-size: 14px;
}

.diff-card span {
  display: block;
  font-size: 12px;
  opacity: 0.78;
  margin-top: 3px;
}

.diff-card em {
  display: block;
  margin-top: 6px;
  font-style: normal;
  color: var(--gold);
  font-weight: 700;
}

.paytable ul {
  list-style: none;
  margin: 10px 0;
  padding: 0;
  display: grid;
  gap: 5px;
}

.paytable li {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding-bottom: 4px;
}

.pay-note {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  opacity: 0.72;
}

.help-panel {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: rgba(0, 0, 0, 0.55);
  display: grid;
  place-items: center;
  padding: 20px;
}

.help-panel[hidden] {
  display: none;
}

.help-card {
  max-width: 520px;
  background: #102820;
}

.help-card ol {
  padding-left: 18px;
  line-height: 1.55;
}

.result-banner {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 15;
  background: #101c18;
  border: 1px solid var(--gold);
  color: var(--cream);
  padding: 12px 18px;
  border-radius: 999px;
  box-shadow: var(--shadow);
  font-weight: 600;
}

.result-banner.bad {
  border-color: var(--danger);
}

.board.locked .cell {
  cursor: default;
}

.gamble-overlay {
  position: fixed;
  inset: 0;
  z-index: 24;
  background: rgba(0, 0, 0, 0.62);
  display: grid;
  place-items: center;
  padding: 20px;
}

.gamble-overlay[hidden] {
  display: none;
}

.gamble-shell {
  width: min(560px, 100%);
  background: #102820;
  border: 1px solid rgba(224, 195, 106, 0.35);
  border-radius: 20px;
  padding: 20px;
  box-shadow: var(--shadow);
}

.gamble-shell h2 {
  font-size: 30px;
  margin: 0 0 8px;
}

.gamble-kicker {
  margin: 0;
  color: var(--gold);
  font-weight: 600;
}

.gamble-pot {
  margin: 4px 0 16px;
  font-size: 15px;
}

.gamble-pot strong {
  color: var(--gold);
  font-size: 22px;
}

.gamble-copy {
  margin: 0 0 14px;
  opacity: 0.82;
}

.gamble-doors {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.gamble-doors button {
  display: grid;
  gap: 4px;
  justify-items: center;
  background: #0b1f19;
  color: var(--cream);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 14px 8px;
  cursor: pointer;
}

.gamble-doors button span {
  font-size: 26px;
  color: #e07070;
}

.gamble-doors button small {
  opacity: 0.7;
  font-size: 11px;
  text-align: center;
}

.gamble-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.reels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 10px 0 16px;
}

.reel {
  height: 88px;
  display: grid;
  place-items: center;
  font-size: 44px;
  background: #081611;
  border: 2px solid rgba(224, 195, 106, 0.3);
  border-radius: 12px;
}

.mini-hand {
  display: flex;
  gap: 6px;
  min-height: 72px;
  margin-bottom: 10px;
}

.mini-card {
  width: 52px;
  height: 72px;
  border-radius: 8px;
  background: var(--card);
  color: var(--black);
  display: grid;
  place-items: center;
  font-weight: 700;
  box-shadow: inset 0 0 0 2px #fff;
}

.mini-card.red { color: var(--red); }
.mini-card i { font-style: normal; }
.mini-card.back {
  background: repeating-linear-gradient(45deg, #6f1d1d 0 6px, #4a1010 6px 12px);
  color: var(--gold);
}

.wheel-stage {
  position: relative;
  width: 220px;
  height: 220px;
  margin: 8px auto 16px;
}

.wheel {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 8px solid #3a2414;
  background: conic-gradient(
    #0b7a2d 0 2.7%,
    #b71c1c 2.7% 5.4%,
    #111 5.4% 8.1%,
    #b71c1c 8.1% 10.8%,
    #111 10.8% 13.5%,
    #b71c1c 13.5% 16.2%,
    #111 16.2% 18.9%,
    #b71c1c 18.9% 21.6%,
    #111 21.6% 24.3%,
    #b71c1c 24.3% 27%,
    #111 27% 29.7%,
    #b71c1c 29.7% 32.4%,
    #111 32.4% 35.1%,
    #b71c1c 35.1% 37.8%,
    #111 37.8% 40.5%,
    #b71c1c 40.5% 43.2%,
    #111 43.2% 45.9%,
    #b71c1c 45.9% 48.6%,
    #111 48.6% 51.3%,
    #b71c1c 51.3% 54%,
    #111 54% 56.7%,
    #b71c1c 56.7% 59.4%,
    #111 59.4% 62.1%,
    #b71c1c 62.1% 64.8%,
    #111 64.8% 67.5%,
    #b71c1c 67.5% 70.2%,
    #111 70.2% 72.9%,
    #b71c1c 72.9% 75.6%,
    #111 75.6% 78.3%,
    #b71c1c 78.3% 81%,
    #111 81% 83.7%,
    #b71c1c 83.7% 86.4%,
    #111 86.4% 89.1%,
    #b71c1c 89.1% 91.8%,
    #111 91.8% 94.5%,
    #b71c1c 94.5% 97.2%,
    #111 97.2% 100%
  );
  box-shadow: inset 0 0 0 10px rgba(224, 195, 106, 0.2);
}

.wheel-pointer {
  position: absolute;
  top: -8px;
  left: 50%;
  z-index: 2;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 18px solid var(--gold);
  transform: translateX(-50%);
}

#roulette-number {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 42px;
  font-family: "EB Garamond", Georgia, serif;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}

#roulette-number[data-color="red"] { color: #ff8a80; }
#roulette-number[data-color="black"] { color: #fff; }
#roulette-number[data-color="green"] { color: #80e27e; }

.roulette-red,
.roulette-black {
  border: 0;
  border-radius: 10px;
  padding: 11px 18px;
  font-weight: 700;
  cursor: pointer;
  color: #fff;
}

.roulette-red { background: #c62828; }
.roulette-black { background: #111; }

#gamble-collect,
#gamble-take {
  width: 100%;
  margin-top: 4px;
}

@media (max-width: 860px) {
  .table {
    grid-template-columns: 1fr;
    border-width: 7px;
    padding: 14px;
  }

  .topbar {
    flex-wrap: wrap;
    padding: 16px 16px 0;
  }

  .board {
    aspect-ratio: 5 / 5.6;
  }

  .hand-slot,
  .hand-slot .playing-card {
    min-height: 84px;
  }

  .diff-card span {
    font-size: 11px;
  }

  .gamble-doors {
    grid-template-columns: 1fr;
  }
}