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

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

/* The Target comes from a SEPARATE (second) deck — a red back and warm frame set it apart from your
   own blue-backed deck. */
.card.alt-deck { background: linear-gradient(160deg, #fff7f0, #f4e2d4); border-color: #d3a074; }
.card.alt-deck.facedown {
    background:
        repeating-linear-gradient(45deg, transparent, transparent 5px, #ffffff14 5px, #ffffff14 10px),
        linear-gradient(160deg, #a83240, #7a1c27);
    border-color: #ffffff40;
}

/* Showdown: the five cards that actually made the hand (a player's best-five under the Target, and the
   Target's own best five) are OUTLINED in a high-contrast electric-blue ring; player hands also nudge
   toward the middle so it's clear at a glance which cards were played. The ring is a thin dark separator
   hugging the card, a bold bright band, and a glow — so it reads on both the felt and the card faces. */
.be-cards .card { transition: transform .2s ease, box-shadow .2s ease; }
.be-cards .card.played { --ring: #37d6ff; --glow: #37d6ffcc;   /* live contender = electric blue */
    transform: translateY(-10px); z-index: 2; position: relative;
    box-shadow: 0 0 0 1px #0a1a2b, 0 0 0 3px var(--ring), 0 0 11px var(--glow), 0 7px 13px #00000040; }
/* Opponents sit at the top of the table — their played cards nudge DOWN (toward the middle) instead. */
.be-cards .card.played.nudge-down { transform: translateY(10px);
    box-shadow: 0 0 0 1px #0a1a2b, 0 0 0 3px var(--ring), 0 0 11px var(--glow), 0 -7px 13px #00000040; }
/* The Target sits in the middle already — outline its played cards but DON'T nudge them. */
.be-cards .card.played.alt-deck { transform: none;
    box-shadow: 0 0 0 1px #0a1a2b, 0 0 0 3px var(--ring), 0 0 11px var(--glow); }
/* A busted player's five overshooting cards ring RED (the game's bust color) — "here's what busted".
   Only the ring color swaps; the nudge and directional shadows above stay exactly as they are. */
.be-cards .card.played.played-bust { --ring: #ff5a4d; --glow: #ff5a4dcc; }

/* The best-hand label under each seat at showdown (closest-without-going-over). */
.be-hand { margin-top: 5px; font-size: 11px; font-weight: 800; border-radius: 6px;
    padding: 2px 9px; display: inline-block; background: #e7f0ea; color: #15663f; }
.be-hand.win { background: #fbe9c9; color: #8a5a12; }
.be-hand.over { background: #f6dcd8; color: #a5372b; }
/* Opponents (top seats) nudge their played cards DOWN — toward this chip — so give it extra clearance
   below the cards to avoid overlap. The hero (bottom) nudges up, away from its chip, so it needs none. */
.seat:not(.hero) .be-hand { margin-top: 16px; }

/* The Target in the middle of the table. */
.target { display: flex; flex-direction: column; align-items: center; gap: 4px;
    background: #0e3f31cc; border: 2px solid var(--gold-dark); border-radius: 14px;
    padding: 8px 14px 10px; margin-bottom: 4px; box-shadow: inset 0 0 18px #0006; }
.target.revealed { border-color: var(--gold); box-shadow: 0 0 22px #e7c46355, inset 0 0 18px #0006; }
.target-label { font-size: 12px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; color: var(--gold); }
.target .be-cards { min-height: 62px; }
.target-hand { font-size: 12px; font-weight: 800; color: #d7e7df; text-align: center; }
.target.revealed .target-hand { color: var(--gold); }

.center { display: flex; flex-direction: column; align-items: center; }
.center .pot { margin: 4px 0 2px; }

/* Status badge colors (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.pass { background: #e6edf2; color: #55606b; }
.badge.bust { background: #f4c9c2; color: #8f2a1e; }

/* Result panel: a lighter backdrop and a narrower panel. */
.overlay { background: radial-gradient(ellipse at center, rgba(7,40,30,.45), rgba(7,40,30,.72)); }
.result { max-width: 460px; }

/* 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; }
.recap-log .rs-red { color: #e2574b; font-weight: 700; }

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

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

.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: be-chip-drop .42s cubic-bezier(.2,1.3,.5,1) both;
}
.seat.hero .dealer-chip { top: -10px; right: -10px; }

@keyframes be-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; }
}

.seat.current { animation: be-current-pulse 1.5s ease-in-out infinite; }
@keyframes be-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; }
}

.seat-foot .badge { animation: be-pop .24s ease-out both; }
@keyframes be-pop {
    0%   { opacity: 0; transform: scale(.55) translateY(4px); }
    100% { opacity: 1; transform: none; }
}

.seat.winner { animation: be-win-pop .55s ease-in-out 2; }
@keyframes be-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; }
}