/* ============================================================
   fcp.css — Four Card Poker layout additions only.
   Everything visual (felt, gold trim, chips, cards, buttons,
   panels) is inherited from game.css. Betting-spot layout reuses
   the same pattern as tcp.css. This file adds what's genuinely
   new to this game: the dealer's single up-card among 5 face-down
   cards, the discarded (unused) 5th player card styling, and the
   4-button Fold/Raise-1x/2x/3x decision row.
   ============================================================ */

.tcp-spots-row{
  display:flex;
  gap:28px;
  justify-content:center;
  align-items:flex-start;
  margin-top:8px;
}

.spot-label{
  margin-top:4px;
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--gold);
  text-align:center;
}

#playCircle.filled{
  border-style:solid;
  border-color:var(--gold-bright);
}

.hand-rank-pill{
  margin-top:6px;
  font-family:'Fraunces', serif;
  font-size:13px;
  color:var(--gold-bright);
  text-align:center;
}

/* Dealer's up-card (revealed before the player's fold/raise decision)
   gets a gold outline to visually distinguish it from the 5 face-down
   cards beside it — the one piece of real information the player has
   before deciding. */
.fcp-dealer-row .card.up-card{
  outline:2px solid var(--gold-bright);
  outline-offset:2px;
}

/* The discarded 5th player card (the one NOT used in the best-4 hand)
   is dimmed and slightly shrunk rather than removed entirely — keeps
   it visible so the player can see what got left out, without it
   competing visually with the 4 cards that actually count. */
.fcp-player-row .card.discarded{
  opacity:.4;
  transform:scale(.92);
}

/* Fold + three raise sizes need to fit in one row without crowding
   out the felt — noticeably narrower than blackjack's action buttons,
   which only ever show up to 5 buttons with more breathing room. */
.fcp-play-actions{
  gap:8px;
}
.fcp-play-actions .action{
  padding:12px 10px;
  font-size:12px;
}
.btn-raise{
  background:linear-gradient(155deg,#2f6b52,#1c4534);
  color:#f3ead6;
  border:1px solid rgba(230,223,204,.25);
}

.fcp-last-hand{
  display:flex; flex-direction:row; align-items:center; gap:14px;
}
.fcp-last-hand .row{ padding:0; text-align:right; }
.fcp-last-hand .row + .row{
  border-top:none;
  border-left:1px solid rgba(224,185,94,.18);
  padding-left:14px;
}

/* Consolidated Min/Max + Balance + Dealer label + Last Win/Bet row —
   replaces what used to be three separate locations (header stats,
   a standalone Dealer pill, and a floating corner box) with one
   single horizontal strip, saving real vertical height. Actual
   dealer cards still render in their own row below this — cards
   need real space and were never meant to be inline with text. */
.fcp-info-row{
  display:flex; align-items:center; justify-content:center;
  gap:14px; flex-wrap:wrap;
  margin-bottom:10px;
}
.fcp-info-row .stat-box,
.fcp-info-row .last-hand-box{
  margin:0; /* these carry their own margin/positioning in their original
               contexts (header stat-box, floating last-hand-box) that
               isn't relevant now that they're plain flex children here */
}

@media (max-width:860px){
  .wordmark{ display:none; }
  .brand-cluster{ justify-content:flex-start; }
  /* On mobile, the turn-row pairing (buttons beside cards) needs room
     for 4 buttons instead of TCP's 2 — a touch narrower per-button
     than the shared game.css default keeps them legible without
     forcing the column too wide. */
  .turn-row.paired .fcp-play-actions{
    max-width:104px;
  }
  .turn-row.paired .fcp-play-actions .action{
    font-size:10px;
    padding:9px 6px;
  }

  /* Min/Max is reference info a player checks once, not something
     needed on-screen every second the way Balance/Dealer/Last Win-Bet
     are — dropping it here (it's still in the Rules panel) is what
     actually makes a genuine single line possible on a phone screen,
     rather than just shrinking everything until it's hard to read. */
  .fcp-minmax{ display:none; }
  .fcp-info-row{ gap:6px; }
  .fcp-info-row .balance-box{ padding:4px 6px; gap:5px; }
  .fcp-info-row .balance-box .chip-ico{ width:14px; height:14px; }
  .fcp-info-row .balance-box .val{ font-size:11px; }
  .fcp-info-row .balance-box label{ font-size:7px; }
  .fcp-info-row .seat-pill{ font-size:8px; padding:4px 9px; }
  .fcp-info-row .fcp-last-hand{ padding:4px 6px; gap:6px; }
  .fcp-info-row .fcp-last-hand .row + .row{ padding-left:6px; }
  .fcp-info-row .fcp-last-hand label{ font-size:7px; }
  .fcp-info-row .fcp-last-hand .val{ font-size:10px; }
}