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

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

/* During the hero's draw, a card marked to throw lifts and rings red so the choice is obvious. */
.df-cards .card { transition: transform .16s ease, box-shadow .16s ease; }
.df-cards .card.discard {
    transform: translateY(-10px) rotate(-3deg);
    box-shadow: 0 0 0 1px #2a0a0a, 0 0 0 3px #ff5a4d, 0 0 11px #ff5a4dcc, 0 7px 13px #00000040;
}
.df-cards .card.discard::after {
    content: "✕"; position: absolute; top: -9px; right: -6px;
    width: 18px; height: 18px; border-radius: 50%; z-index: 3;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 900; color: #fff; background: #e2483b;
    box-shadow: 0 1px 3px #0007;
}
.df-cards .card.grab { cursor: pointer; }

/* Showdown: the cards that actually played (the best legal subset) are outlined in electric blue and
   nudged toward the middle so it's clear which cards made the hand. */
.df-cards .card.played { --ring: #37d6ff; --glow: #37d6ffcc;
    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 — nudge their played cards DOWN toward the middle instead. */
.df-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 best-hand label under each seat at showdown. */
.df-hand { margin-top: 5px; font-size: 11px; font-weight: 800; border-radius: 6px;
    padding: 2px 9px; display: inline-block; background: #e7f0ea; color: #15663f; }
.df-hand.win { background: #fbe9c9; color: #8a5a12; }
.seat:not(.hero) .df-hand { margin-top: 16px; }

.center { display: flex; flex-direction: column; align-items: center; }
.center .pot { margin: 6px 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; }

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

@keyframes df-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: df-current-pulse 1.5s ease-in-out infinite; }
@keyframes df-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: df-pop .24s ease-out both; }
@keyframes df-pop {
    0%   { opacity: 0; transform: scale(.55) translateY(4px); }
    100% { opacity: 1; transform: none; }
}

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