* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: radial-gradient(ellipse at top, #1a3d2e 0%, #0b1f16 100%);
  color: #f1e9d2;
  min-height: 100vh;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 24px;
  background: rgba(0,0,0,0.35);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.brand {
  font-weight: 700;
  letter-spacing: 0.05em;
  font-size: 18px;
  color: #f5d67a;
}
.topbar-right {
  display: flex;
  align-items: center;
  gap: 14px;
}
.topbar-btn {
  background: rgba(245, 214, 122, 0.12);
  border: 1px solid rgba(245, 214, 122, 0.4);
  color: #f5d67a;
  padding: 7px 14px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  font-family: inherit;
}
.topbar-btn:hover {
  background: rgba(245, 214, 122, 0.22);
  color: #fff0bf;
}
@media (max-width: 640px) {
  .balance-inline .balance-amount { font-size: 20px; }
  .balance-inline .balance-label { font-size: 9px; }
  .balance-inline { left: 12px; }
}
@media (max-width: 480px) {
  /* On very narrow screens, stop absolute-positioning — put balance above
     the chips so it doesn't overlap them. */
  .balance-inline {
    position: static;
    transform: none;
    flex-basis: 100%;
    margin-bottom: 6px;
  }
  .bets-area { flex-wrap: wrap; }
}

/* --- Rules modal --------------------------------------------------------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal.hidden { display: none; }
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(3px);
  animation: modalFadeIn 0.2s ease-out forwards;
}
.modal-panel {
  position: relative;
  width: min(760px, 92vw);
  max-height: 88vh;
  overflow-y: auto;
  background: linear-gradient(180deg, #1a3d2e 0%, #0f271d 100%);
  border: 2px solid rgba(245, 214, 122, 0.5);
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7);
  padding: 28px 34px 32px;
  color: #f1e9d2;
  font-size: 14px;
  line-height: 1.55;
  animation: modalSlideIn 0.25s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}
@keyframes modalFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes modalSlideIn {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-close {
  position: absolute;
  top: 10px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(245, 214, 122, 0.4);
  background: rgba(0, 0, 0, 0.35);
  color: #f5d67a;
  font-size: 22px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-close:hover {
  background: rgba(245, 214, 122, 0.2);
  color: #fff0bf;
}

.modal-panel h2 {
  margin: 0 0 18px;
  font-size: 22px;
  color: #f5d67a;
  letter-spacing: 0.02em;
  border-bottom: 1px dashed rgba(245, 214, 122, 0.35);
  padding-bottom: 10px;
}
.modal-panel section { margin-bottom: 22px; }
.modal-panel section:last-child { margin-bottom: 0; }
.modal-panel h3 {
  margin: 0 0 8px;
  font-size: 13px;
  color: #f5d67a;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.modal-panel p { margin: 0 0 8px; }
.modal-panel ul, .modal-panel ol {
  margin: 0 0 4px;
  padding-left: 20px;
}
.modal-panel li { margin-bottom: 4px; }
.modal-panel .note {
  margin-top: 8px;
  font-size: 12px;
  font-style: italic;
  color: rgba(241, 233, 210, 0.7);
}
.paytable-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 20px;
}
.paytable-list li { list-style: none; padding: 3px 0; }
.paytable-list strong { color: #f5d67a; font-variant-numeric: tabular-nums; }

.rules-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  font-size: 13px;
}
.rules-table th, .rules-table td {
  border: 1px solid rgba(245, 214, 122, 0.22);
  padding: 6px 10px;
  text-align: left;
}
.rules-table th {
  background: rgba(245, 214, 122, 0.1);
  color: #f5d67a;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
}
.rules-table td.win  { color: #7ef5a0; font-weight: 600; }
.rules-table td.lose { color: #ff7a7a; font-weight: 600; }
.rules-table td.push { color: #f5d67a; font-weight: 600; }

@media (max-width: 640px) {
  .topbar { padding: 8px 12px; }
  .topbar-right { gap: 8px; }
  .topbar-btn { padding: 6px 9px; font-size: 10px; }
  .bankroll { font-size: 13px; }
  .modal-panel { padding: 22px 18px 24px; font-size: 13px; }
  .modal-panel h2 { font-size: 18px; }
  .paytable-list { grid-template-columns: 1fr; }
}

.game-layout {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 16px;
  max-width: 1440px;
  margin: 20px auto;
  padding: 0 16px;
}

.side-panel {
  flex: 0 0 220px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;
  top: 14px;
}

.pt-card {
  background: rgba(0, 0, 0, 0.38);
  border: 1px solid rgba(245, 214, 122, 0.25);
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 12.5px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}
.pt-card h3 {
  margin: 0 0 8px;
  font-size: 12px;
  color: #f5d67a;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-align: center;
  border-bottom: 1px solid rgba(245, 214, 122, 0.25);
  padding-bottom: 6px;
}
.pt-card ul {
  margin: 0;
  padding-left: 16px;
  line-height: 1.65;
}

.table {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 1000px;
  padding: 24px 30px 28px;
  background: radial-gradient(ellipse at center, #1e5b3f 0%, #123624 70%, #0a1f14 100%);
  border: 6px solid #4a2b16;
  border-radius: 200px / 60px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6), inset 0 0 80px rgba(0,0,0,0.4);
  display: grid;
  grid-template-rows: auto auto auto auto auto auto auto;
  gap: 18px;
}

/* Player area is a 3-column row: left paytable | player cards | right paytable.
   This replaces the old bottom-corner absolute positioning, eliminating the
   big wasted vertical gap that used to be reserved for the overlays. The
   middle column has a min-width so it holds space for the player cards
   even before they're dealt. */
.player-area {
  display: grid;
  grid-template-columns: 190px minmax(320px, 1fr) 190px;
  align-items: center;
  gap: 24px;
  justify-content: center;
}
.player-cards-col {
  text-align: center;
  min-width: 0;
}
.player-area .paytable-overlay.pt-play  { justify-self: end; }
.player-area .paytable-overlay.pt-trips { justify-self: start; }

/* --- Felt-integrated paytables ------------------------------------------
   Printed directly onto the felt as gold-on-green text (no box), flanking
   the player-cards column. A subtle text-shadow keeps them legible without
   adding a visible container so they feel like ink on the felt.
*/
.paytable-overlay {
  width: 190px;
  font-size: 12px;
  color: rgba(241, 233, 210, 0.9);
  pointer-events: none;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}
.paytable-overlay h3 {
  margin: 0 0 6px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #f5d67a;
  text-align: center;
  padding-bottom: 4px;
  border-bottom: 1px dashed rgba(245, 214, 122, 0.28);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}
.paytable-overlay ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.paytable-overlay li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 2px 0;
  line-height: 1.35;
}
.paytable-overlay li span {
  opacity: 0.92;
}
.paytable-overlay li strong {
  color: #f5d67a;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}
.paytable-overlay li.pt-bonus {
  margin-top: 3px;
  padding-top: 4px;
  border-top: 1px dashed rgba(245, 214, 122, 0.28);
}
.paytable-overlay li.pt-bonus span,
.paytable-overlay li.pt-bonus strong {
  color: #f5d67a;
  text-shadow: 0 0 6px rgba(245, 214, 122, 0.4),
               0 1px 3px rgba(0, 0, 0, 0.7);
}

@media (max-width: 1100px) {
  .game-layout { flex-direction: column; align-items: center; }
  .side-panel {
    flex: 0 0 auto;
    width: 100%;
    max-width: 960px;
    flex-direction: row;
    flex-wrap: wrap;
    position: static;
  }
  .side-panel .pt-card { flex: 1 1 220px; }
  .paytable-overlay { width: 150px; font-size: 11px; }
  .paytable-overlay li strong { font-size: 11px; }
  .player-area { gap: 16px; }
}

/* On narrow screens the 3-column player area doesn't fit side-by-side.
   Collapse to a single column: paytables stack below the player cards,
   rendered as translucent cards so they're readable without the felt glow. */
@media (max-width: 820px) {
  .player-area {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .player-area .paytable-overlay.pt-play,
  .player-area .paytable-overlay.pt-trips {
    justify-self: center;
  }
  .paytable-overlay {
    width: auto;
    max-width: 360px;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.38);
    border: 1px solid rgba(245, 214, 122, 0.3);
    border-radius: 10px;
    font-size: 12px;
    text-shadow: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
    pointer-events: auto;
  }
  .paytable-overlay h3 { text-shadow: none; }
  .paytable-overlay li strong { font-size: 12px; }
}

.label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: rgba(245,214,122,0.8);
  margin-bottom: 6px;
  text-align: center;
}

.dealer-area, .community-area, .player-area {
  text-align: center;
}

.cards {
  display: flex;
  justify-content: center;
  gap: 12px;
  min-height: 190px;
  perspective: 1600px;
}

.card {
  width: 130px;
  height: 182px;
  position: relative;
  user-select: none;
  transform-style: preserve-3d;
}

/* Dealing entrance: slide in from the top-center "deck" position */
@keyframes cardDeal {
  0% {
    transform: translate(-45%, -130%) rotate(-16deg) scale(0.78);
    opacity: 0;
  }
  55% { opacity: 1; }
  100% {
    transform: translate(0, 0) rotate(0) scale(1);
    opacity: 1;
  }
}
.card.dealing { animation: cardDeal 0.55s cubic-bezier(0.2, 0.8, 0.25, 1); }

/* Flipper holds the front and back faces in a 3D pair */
.flipper {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.75s cubic-bezier(0.2, 0.8, 0.25, 1);
}
.card.face-down .flipper { transform: rotateY(180deg); }

.face {
  position: absolute;
  inset: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 10px;
  overflow: hidden;
  box-shadow:
    0 5px 14px rgba(0,0,0,0.55),
    0 1px 3px rgba(0,0,0,0.45);
}
.face.back { transform: rotateY(180deg); }

.face > svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ----- Golden Joker card styling ------------------------------------------
   A card tagged .golden gets:
     - an animated gold border / box-shadow pulse
     - a semi-transparent gold tint over the front face
     - a traveling diagonal shimmer that sweeps across the face
   Together they make the card visibly "alive" as a wildcard.
*/
.card.golden .face.front {
  box-shadow:
    0 5px 14px rgba(0, 0, 0, 0.55),
    0 0 0 2px #f5d67a,
    0 0 18px 4px rgba(245, 214, 122, 0.85);
  animation: goldPulse 2s ease-in-out infinite;
}
@keyframes goldPulse {
  0%, 100% {
    box-shadow:
      0 5px 14px rgba(0, 0, 0, 0.55),
      0 0 0 2px #f5d67a,
      0 0 14px 3px rgba(245, 214, 122, 0.7);
  }
  50% {
    box-shadow:
      0 5px 14px rgba(0, 0, 0, 0.55),
      0 0 0 2px #ffe899,
      0 0 26px 8px rgba(255, 215, 100, 1);
  }
}

.face.front.golden-face {
  position: relative;
}
/* The gold card artwork is already warm — no extra tint overlay needed.
   Only the traveling shimmer sits above it. */

/* The shimmer — a diagonal band of highlight that sweeps across the card. */
.gold-shimmer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  border-radius: inherit;
}
.gold-shimmer::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -60%;
  width: 60%;
  height: 200%;
  background: linear-gradient(115deg,
    transparent 0%,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0) 70%,
    transparent 100%);
  transform: rotate(0deg);
  animation: goldShimmer 2.4s ease-in-out infinite;
}
@keyframes goldShimmer {
  0%   { left: -60%; opacity: 0; }
  25%  { opacity: 1; }
  60%  { left: 110%; opacity: 1; }
  100% { left: 110%; opacity: 0; }
}

/* Joker substitution overlay: sits on top of the golden card and alternates
   between invisible (showing the joker beneath) and fully visible (showing
   the card the wildcard "became" at showdown). */
.joker-sub-overlay {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  animation: jokerSubAlternate 2.4s ease-in-out infinite;
  /* Warm gold glow around the substitution card so it still reads as the
     magical wildcard rather than a normal card on top of a joker. */
  box-shadow:
    inset 0 0 0 2px rgba(245, 214, 122, 0.85),
    inset 0 0 14px rgba(245, 214, 122, 0.35);
}
.joker-sub-overlay svg {
  display: block;
  width: 100%;
  height: 100%;
}
@keyframes jokerSubAlternate {
  0%, 30%   { opacity: 0; }
  45%, 75%  { opacity: 1; }
  90%, 100% { opacity: 0; }
}

/* Gold-tinted label wherever we want to call out the feature in the UI. */
.gold-text {
  color: #f5d67a;
  text-shadow: 0 0 6px rgba(245, 214, 122, 0.5);
}

/* ----- Winning-hand card highlights ---------------------------------------
   Cards that are part of the winning side's best 5-card hand lift forward
   with a modest scale + translateY and a stronger drop shadow. Cards NOT
   part of the winning hand fade back with reduced opacity so the contrast
   is clear without requiring big scale values that would clip neighbours.

   The dim is gated on .cards:has() a used card so it only applies after
   showdown, not during normal dealing.
*/
.card.used-by-player,
.card.used-by-dealer {
  transform: scale(1.07) translateY(-18px);
  z-index: 10;
  transition:
    transform 0.45s cubic-bezier(0.2, 0.8, 0.3, 1.15),
    opacity 0.4s ease;
}
.card.used-by-player .face.front,
.card.used-by-dealer .face.front {
  box-shadow:
    0 18px 32px rgba(0, 0, 0, 0.8),
    0 5px 12px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(245, 214, 122, 0.45);
}
/* Fade unused cards in any row that has at least one used card. Uses :has()
   which is well-supported in modern browsers. */
.cards:has(.card.used-by-player, .card.used-by-dealer)
  .card:not(.used-by-player):not(.used-by-dealer) {
  opacity: 0.35;
  filter: saturate(0.6);
  transition: opacity 0.4s ease, filter 0.4s ease;
}

.hand-name {
  margin-top: 8px;
  min-height: 20px;
  font-style: italic;
  color: #f5d67a;
  font-size: 14px;
}

.bets-area {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 24px;
  padding: 14px 0;
  border-top: 1px dashed rgba(245,214,122,0.25);
  border-bottom: 1px dashed rgba(245,214,122,0.25);
}

/* Balance shown inline with the bets row, absolutely positioned on the
   left so the chip row stays centred. */
.balance-inline {
  position: absolute;
  left: 28px;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
}
.balance-inline .balance-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(245, 214, 122, 0.7);
  margin-bottom: 2px;
}
.balance-inline .balance-amount {
  font-size: 26px;
  font-weight: 700;
  color: #f5d67a;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-shadow:
    0 0 10px rgba(245, 214, 122, 0.4),
    0 2px 4px rgba(0, 0, 0, 0.5);
}
.bet-spot {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 80px;
}
.bet-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(245,214,122,0.7);
  margin-bottom: 6px;
}
.chips {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #333 0%, #111 70%);
  border: 3px dashed rgba(245,214,122,0.4);
  color: #f5d67a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  position: relative;
  overflow: visible;
}
.chips.active {
  background: radial-gradient(circle at 30% 30%, #c51a1a 0%, #7a0e0e 70%);
  border-color: #fdfdfb;
  border-style: solid;
  box-shadow: 0 0 12px rgba(245,214,122,0.4);
  color: #fff;
}

/* Per-bet accent colors: Trips = purple, Golden Joker = gold */
#bet-trips {
  border-color: rgba(183, 94, 220, 0.5);
  color: #e8c4ff;
}
#bet-trips.active {
  background: radial-gradient(circle at 30% 30%, #c874e6 0%, #4a1170 75%);
  border-color: #f1d9ff;
  box-shadow: 0 0 14px rgba(183, 94, 220, 0.55);
  color: #fff;
}

#bet-gj {
  border-color: rgba(245, 214, 122, 0.55);
  color: #f5d67a;
}
#bet-gj.active {
  background: radial-gradient(circle at 30% 30%, #ffe899 0%, #8b6914 75%);
  border-color: #fff6d5;
  box-shadow: 0 0 16px rgba(245, 214, 122, 0.7);
  color: #2a1a05;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* ----- Win-chip animation -------------------------------------------------
   When the player wins on a bet spot, a stack of coloured chips drops in
   from above and settles onto the spot. Each chip's --stack-offset (0..N)
   raises it a few px so the stack feels piled, and its animation-delay is
   staggered so they land in sequence.
*/
.win-chip {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ff3a3a 0%, #7a0e0e 75%);
  border: 3px dashed rgba(255, 255, 255, 0.55);
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.6),
    inset 0 0 0 4px rgba(255, 255, 255, 0.08),
    inset 0 -4px 6px rgba(0, 0, 0, 0.25);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%);
  animation: chipDropIn 0.55s cubic-bezier(0.2, 0.7, 0.25, 1.1) forwards;
}
.win-chip.chip-play  { background: radial-gradient(circle at 30% 30%, #ff5252 0%, #6a0c0c 75%); }
.win-chip.chip-trips {
  background: radial-gradient(circle at 30% 30%, #d87aee 0%, #3c0d5a 75%);
  border-color: rgba(255, 235, 255, 0.7);
}
.win-chip.chip-gold {
  background: radial-gradient(circle at 30% 30%, #fff1a8 0%, #8b6914 75%);
  border-color: rgba(255, 250, 220, 0.8);
}

@keyframes chipDropIn {
  0% {
    transform: translate(calc(-50% - 18px), -210%) scale(0.55) rotate(-35deg);
    opacity: 0;
  }
  55% { opacity: 1; }
  80% {
    transform: translate(-50%, calc(-50% - var(--stack-offset, 0) * 4px + 3px)) scale(1.04) rotate(2deg);
  }
  100% {
    transform: translate(-50%, calc(-50% - var(--stack-offset, 0) * 4px)) scale(1) rotate(0);
    opacity: 1;
  }
}

.status-area { text-align: center; }
.status { font-size: 16px; color: #f1e9d2; min-height: 22px; }
.result {
  margin-top: 6px;
  font-weight: 700;
  font-size: 18px;
  min-height: 26px;
}
.result.win { color: #7ef5a0; }
.result.lose { color: #ff7a7a; }
.result.push { color: #f5d67a; }

/* ----- Result breakdown panel --------------------------------------------
   Shown at showdown. Lists each component of the hand separately (Main Game
   bets, Trips bonus, Golden Joker) with wager, outcome pill, and net result.
*/
.result-breakdown {
  margin: 10px auto 0;
  max-width: 460px;
  padding: 12px 18px 14px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(245, 214, 122, 0.3);
  border-radius: 10px;
  text-align: left;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}
.result-breakdown.hidden { display: none; }
.rb-header {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: #f5d67a;
  padding: 4px 0 6px;
  margin: 0 0 8px;
  border-bottom: 1px dashed rgba(245, 214, 122, 0.3);
  background: none;
  border-left: none;
  border-right: none;
  border-top: none;
  cursor: pointer;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 700;
  font-family: inherit;
}
.rb-header:hover { color: #fff0bf; }
.rb-chevron {
  display: inline-block;
  font-size: 10px;
  transition: transform 0.22s ease;
  color: rgba(245, 214, 122, 0.75);
}
.result-breakdown.collapsed .rb-chevron { transform: rotate(-90deg); }
.result-breakdown.collapsed .rb-header {
  border-bottom: none;
  padding-bottom: 2px;
  margin-bottom: 0;
}
.result-breakdown.collapsed .rb-section,
.result-breakdown.collapsed .rb-total { display: none; }
.result-breakdown.collapsed { padding-bottom: 8px; }
.rb-section { margin-bottom: 8px; }
.rb-section:last-of-type { margin-bottom: 0; }
.rb-section-title {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(245, 214, 122, 0.75);
  margin: 2px 0 4px;
}
.rb-line {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 10px;
  align-items: center;
  padding: 4px 0;
  font-size: 13px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.rb-line:first-child { border-top: none; }
.rb-name { color: #f1e9d2; font-weight: 600; }
.rb-wager {
  color: rgba(241, 233, 210, 0.55);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.rb-outcome {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 9px;
  border-radius: 10px;
  text-transform: uppercase;
  white-space: nowrap;
}
.rb-outcome.win  { background: rgba(126, 245, 160, 0.16); color: #7ef5a0; }
.rb-outcome.lose { background: rgba(255, 122, 122, 0.16); color: #ff7a7a; }
.rb-outcome.push { background: rgba(245, 214, 122, 0.16); color: #f5d67a; }
.rb-net {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 54px;
  text-align: right;
}
.rb-net.win  { color: #7ef5a0; }
.rb-net.lose { color: #ff7a7a; }
.rb-net.push { color: rgba(245, 214, 122, 0.7); }
.rb-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(245, 214, 122, 0.35);
  font-weight: 700;
  color: #f1e9d2;
}
.rb-total-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}
.rb-total-amount {
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}
.rb-total-amount.win  { color: #7ef5a0; }
.rb-total-amount.lose { color: #ff7a7a; }
.rb-total-amount.push { color: #f5d67a; }

@media (max-width: 640px) {
  .result-breakdown { padding: 10px 12px; }
  .rb-line { grid-template-columns: 1fr auto auto; gap: 8px; font-size: 12px; }
  .rb-wager { display: none; }
  .rb-outcome { font-size: 9px; padding: 1px 7px; }
  .rb-total-amount { font-size: 15px; }
}

.controls { text-align: center; }
.control-group {
  display: inline-flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.control-group.hidden { display: none; }

.bet-input { display: flex; flex-direction: column; align-items: center; }
.bet-input label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(245,214,122,0.7);
  margin-bottom: 4px;
}
.stepper {
  display: flex;
  align-items: center;
  gap: 8px;
}
.stepper span {
  min-width: 60px;
  text-align: center;
  font-weight: 700;
  font-size: 16px;
  color: #f5d67a;
}
.stepper button {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: #1e5b3f;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}
.stepper button:hover { background: #2a7a54; }

.toggle {
  padding: 8px 18px;
  border-radius: 16px;
  border: 2px solid rgba(245, 214, 122, 0.4);
  background: #1a4d34;
  color: #f1e9d2;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.toggle:hover { background: #235e40; }
.toggle[data-on="true"] {
  background: linear-gradient(180deg, #f5d67a 0%, #c9a23f 100%);
  color: #2a1a05;
  border-color: #fffadf;
  box-shadow: 0 0 12px rgba(245, 214, 122, 0.6);
}

button.primary, button.action {
  padding: 12px 22px;
  border: none;
  border-radius: 8px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.1s, background 0.15s;
}
button.primary {
  background: linear-gradient(180deg, #f5d67a 0%, #c9a23f 100%);
  color: #2a1a05;
}
button.primary:hover { transform: translateY(-1px); }
button.action {
  background: linear-gradient(180deg, #2a7a54 0%, #1a4d34 100%);
  color: #fff;
}
button.action:hover { background: linear-gradient(180deg, #34946a 0%, #1e5b3f 100%); }
button.action.danger {
  background: linear-gradient(180deg, #a82222 0%, #6a1212 100%);
}
button.action.danger:hover { background: linear-gradient(180deg, #c82a2a 0%, #821616 100%); }
button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none !important;
}

/* --- Responsive breakpoints ---------------------------------------------- */

/* Small desktop / large tablet: slightly smaller cards */
@media (max-width: 1100px) {
  .card { width: 112px; height: 157px; }
  .cards { min-height: 164px; gap: 10px; }
  .table { border-radius: 160px / 50px; padding: 20px; }
}

/* Tablet */
@media (max-width: 800px) {
  .card { width: 92px; height: 129px; }
  .cards { min-height: 135px; gap: 8px; }
  .table { padding: 18px; gap: 14px; }
  .dealer-area .cards, .player-area .cards { min-height: 129px; }
}

/* Phone landscape / small tablet */
@media (max-width: 640px) {
  .topbar { padding: 10px 16px; }
  .brand { font-size: 15px; }
  .bankroll { font-size: 14px; }
  .game-layout { padding: 0 8px; gap: 10px; margin: 10px auto; }
  .table { padding: 14px 12px; border-radius: 120px / 40px; gap: 12px; }

  .card { width: 80px; height: 112px; }
  .cards { min-height: 118px; gap: 6px; }

  .label { font-size: 10px; margin-bottom: 4px; }
  .hand-name { font-size: 12px; margin-top: 6px; }

  .bets-area { gap: 8px; flex-wrap: wrap; padding: 10px 0; }
  .bet-spot { min-width: 56px; }
  .bet-label { font-size: 9px; margin-bottom: 4px; }
  .chips { width: 52px; height: 52px; font-size: 11px; border-width: 2px; }

  .status { font-size: 14px; }
  .result { font-size: 16px; }

  .control-group { gap: 8px; }
  button.primary, button.action {
    padding: 10px 16px;
    font-size: 12px;
  }
  .stepper span { min-width: 50px; font-size: 14px; }
  .stepper button { width: 30px; height: 30px; }
  .toggle { padding: 7px 14px; font-size: 12px; }

  .pt-card { font-size: 12px; padding: 12px 14px; }
  .pt-card h3 { font-size: 11px; }
  .side-panel { gap: 10px; }
}

/* Phone portrait — iPhone-sized viewports */
@media (max-width: 480px) {
  .topbar { padding: 8px 12px; }
  .brand { font-size: 13px; letter-spacing: 0.03em; }
  .bankroll { font-size: 13px; }
  .table { padding: 10px 8px; border-radius: 90px / 32px; gap: 10px; }

  .card { width: 62px; height: 87px; }
  .cards { min-height: 93px; gap: 4px; }

  .bets-area { gap: 6px; padding: 8px 0; }
  .bet-spot { min-width: 48px; }
  .chips { width: 44px; height: 44px; font-size: 10px; }
  .bet-label { font-size: 8px; }

  .label { font-size: 9px; letter-spacing: 0.1em; }
  .hand-name { font-size: 11px; }

  .status { font-size: 12px; }
  .result { font-size: 14px; }

  button.primary, button.action {
    padding: 9px 12px;
    font-size: 11px;
    letter-spacing: 0.03em;
  }
  .control-group { gap: 6px; }
  .stepper span { min-width: 42px; font-size: 13px; }
}

/* Very small phones */
@media (max-width: 380px) {
  .card { width: 54px; height: 75px; }
  .cards { min-height: 81px; gap: 3px; }
  .table { padding: 8px 6px; }
  button.primary, button.action { padding: 8px 10px; font-size: 10px; }
  .chips { width: 40px; height: 40px; font-size: 9px; }
  .bet-spot { min-width: 42px; }
}