/* ThreeFour War playable game — deltas over the shared pyramid-game.css base. */

/* A player's row of cards (stud style, left-to-right). */
.tfw-cards { display: flex; gap: 3px; justify-content: center; flex-wrap: nowrap; margin-top: 4px; min-height: 56px; }

/* Running total tag under a seat (green for a 3-card hand, blue once it's four). */
.tfw-total { margin-top: 5px; font-size: 11px; font-weight: 800; border-radius: 6px;
    padding: 2px 9px; display: inline-block; background: #e7f0ea; color: #15663f; }
.tfw-total.four { background: #dfe6ff; color: #33409a; }

/* What each player declared (shown at showdown) so the high/low grouping is verifiable. */
.declare-tag { margin-top: 4px; font-size: 10px; font-weight: 900; letter-spacing: .05em;
    border-radius: 6px; padding: 2px 9px; display: inline-block; }
.declare-tag.high { background: #fbe9c9; color: #8a5a12; }
.declare-tag.low { background: #e6edf2; color: #34607f; }

/* The two dummy piles flanking the pot in the middle. */
.dummies { display: flex; align-items: flex-start; justify-content: center; gap: 18px; flex-wrap: wrap; }
.dummy { display: flex; flex-direction: column; align-items: center; gap: 5px;
    background: #00000026; border: 1px solid #ffffff16; border-radius: 12px; padding: 8px 12px; }
.dummy .dlabel { font-size: 10.5px; font-weight: 800; letter-spacing: .02em; color: #cfe3da; text-transform: uppercase; }
.dummy .dcards { display: flex; gap: 3px; }
.dummy .dtotal { font-size: 11px; font-weight: 800; border-radius: 6px; padding: 2px 9px;
    background: #e7f0ea; color: #15663f; }
.dummy .dtotal.four { background: #dfe6ff; color: #33409a; }

/* Status badge colors (the base .badge + .win + .fold live in pyramid-game.css). */
.badge.bet { background: #fbe9c9; color: #8a5a12; }
.badge.call { background: #e0efe6; color: #15663f; }
.badge.check { background: #e6edf2; color: #34607f; }
.badge.peek { background: #ece6f6; color: #6b3fa0; }

/* The center column holds the dummies + pot, then the narration. */
.center .pot { margin: 2px 0; }
/* The lower-left deck + flying-deal animation are shared (see pyramid-game.css). */

/* Overlay note line (carry / re-ante info). */
.overlay .note { font-size: 14px; color: #cfe3da; margin: 4px 0 14px; }

/* Result panel: a lighter backdrop and a narrower panel. The "study the board"
   minimize + floating "show result" button are shared (see pyramid-game.css). */
.overlay { background: radial-gradient(ellipse at center, rgba(7,40,30,.45), rgba(7,40,30,.72)); }
.result { max-width: 440px; }

/* Topbar actions + the round-by-round recap panel. */
.topbar-actions { display: flex; gap: 4px; align-items: center; }
.recap {
    position: fixed; top: 52px; right: 12px; width: 320px; max-height: 70vh; z-index: 40;
    display: flex; flex-direction: column;
    background: #0e3f31f2; border: 1px solid var(--gold-dark); border-radius: 12px;
    box-shadow: 0 10px 28px #0008; overflow: hidden;
}
.recap-head { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em;
    color: var(--gold); padding: 9px 13px; border-bottom: 1px solid #ffffff1f; }
.recap-log { overflow-y: auto; padding: 6px 10px 10px; }
.recap-log .rline { font-size: 12px; line-height: 1.5; color: #d7e7df; padding: 1px 0; }
.recap-log .rline.sub { padding-left: 12px; color: #bcd4ca; }
.recap-log .rline.deal { margin-top: 7px; font-weight: 800; color: var(--gold); }
.recap-log .rline.deal:first-child { margin-top: 0; }
/* Suit-color cards in the recap so e.g. 2♦ / K♥ read red, matching the table. */
.recap-log .rs-red { color: #e2574b; font-weight: 700; }

@media (max-width: 720px) {
    .recap { right: 6px; left: 6px; width: auto; }
}

/* ---- Dealer button + table animations ---- */

/* A poker-style dealer button pinned to the dealing seat's corner. */
.seat { position: relative; }
.dealer-chip {
    position: absolute; top: -9px; right: -9px; z-index: 6;
    width: 27px; height: 27px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 900; color: #7a5a14; letter-spacing: .02em;
    background: radial-gradient(circle at 36% 30%, #ffffff, #f3ecd6 55%, #dccfa0 100%);
    border: 2px dashed #b8993f;
    box-shadow: 0 2px 5px #0007, inset 0 0 0 1px #fff8;
    animation: tfw-chip-drop .42s cubic-bezier(.2,1.3,.5,1) both;
}
.seat.hero .dealer-chip { top: -10px; right: -10px; }

@keyframes tfw-chip-drop {
    0%   { opacity: 0; transform: translateY(-20px) scale(.5) rotate(-25deg); }
    70%  { transform: translateY(2px) scale(1.12) rotate(4deg); }
    100% { opacity: 1; transform: none; }
}

/* (Cards now fly in from the center deck — see card-deal.js.) */

/* The seat to act gently pulses so it's obvious whose turn it is. */
.seat.current { animation: tfw-current-pulse 1.5s ease-in-out infinite; }
@keyframes tfw-current-pulse {
    0%, 100% { box-shadow: 0 0 0 2px var(--gold), 0 0 14px #e7c46340; }
    50%      { box-shadow: 0 0 0 2px var(--gold), 0 0 26px #e7c463aa; }
}

/* Status badges (bets, peeks, declarations) pop in. */
.seat-foot .badge { animation: tfw-pop .24s ease-out both; }
@keyframes tfw-pop {
    0%   { opacity: 0; transform: scale(.55) translateY(4px); }
    100% { opacity: 1; transform: none; }
}

/* A winner's seat gives a quick celebratory bounce. */
.seat.winner { animation: tfw-win-pop .55s ease-in-out 2; }
@keyframes tfw-win-pop {
    0%, 100% { transform: none; }
    35%      { transform: scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
    .dealer-chip, .seat.current, .seat-foot .badge, .seat.winner { animation: none; }
}