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

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

/* A card of the current wild rank glows gold with a small ✦ marker. */
.card.wild { box-shadow: 0 0 0 2px var(--gold), 0 0 12px #e7c46399; }
.card.wild::before {
    content: "✦"; position: absolute; top: 1px; left: 3px; z-index: 3;
    font-size: 10px; color: var(--gold-dark); font-weight: 900;
}

/* ---- Center: community board, dice/wild banner, pots ---- */
.center { display: flex; flex-direction: column; align-items: center; }
.center .pot { margin: 4px 0 2px; }

.wild-banner {
    display: flex; align-items: center; gap: 10px; justify-content: center;
    background: #0e3f31cc; border: 2px solid var(--gold-dark); border-radius: 12px;
    padding: 6px 14px; margin-bottom: 6px; box-shadow: inset 0 0 16px #0006;
}
.wild-banner .dice { display: inline-flex; gap: 6px; font-size: 30px; line-height: 1; color: #fff; }
.wild-banner .dice .die { display: inline-block; animation: ls-diceroll .78s cubic-bezier(.2, .9, .3, 1.1) both; }
.wild-banner .dice .die:nth-child(2) { animation-delay: .09s; }
.wild-banner .dice.seven { color: var(--gold); text-shadow: 0 0 14px #e7c463cc; }
.wild-banner .dice.doubles { color: #7fd4a8; text-shadow: 0 0 12px #7fd4a888; }
.wild-banner .dice.pending .die { opacity: .5; animation: ls-dicewait 1.4s ease-in-out infinite; }
.wild-banner .dice.pending .die:nth-child(2) { animation-delay: .2s; }
.wild-banner .wild-name { font-size: 13px; font-weight: 900; color: var(--gold); text-transform: uppercase; letter-spacing: .04em; }
.wild-banner .wild-name b { font-size: 15px; }

/* Dice tumbling onto the felt, then settling. */
@keyframes ls-diceroll {
    0%   { transform: translateY(-48px) rotate(-140deg) scale(.5); opacity: 0; }
    35%  { transform: translateY(4px) rotate(22deg) scale(1.18); opacity: 1; }
    55%  { transform: translateY(-12px) rotate(-12deg) scale(1); }
    72%  { transform: translateY(3px) rotate(7deg); }
    88%  { transform: translateY(-3px) rotate(-3deg); }
    100% { transform: none; }
}
@keyframes ls-dicewait {
    0%, 100% { transform: translateY(0) rotate(-4deg); }
    50%      { transform: translateY(-4px) rotate(4deg); }
}
@media (prefers-reduced-motion: reduce) {
    .wild-banner .dice .die { animation: none; }
}

.community { display: flex; gap: 5px; justify-content: center; min-height: 66px; margin-bottom: 4px; }
.community .slot {
    width: 40px; height: 58px; border-radius: 7px;
    border: 2px dashed #ffffff2e; background: #ffffff0f;
}

.pots { display: flex; gap: 12px; align-items: center; margin: 3px 0; }
.sidepot { font-size: 14px; color: #f4e6c4; }
.sidepot b { color: var(--gold); font-size: 16px; }
.sidepot .owner { font-size: 11px; color: #cfe0d6; display: block; text-align: center; }

/* ---- 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.reroll { background: #efe0f5; color: #6a2a86; }

/* The best-hand label under each seat at showdown. */
.ls-hand { margin-top: 5px; font-size: 11px; font-weight: 800; border-radius: 6px;
    padding: 2px 9px; display: inline-block; background: #e7f0ea; color: #15663f; }
.ls-hand.win { background: #fbe9c9; color: #8a5a12; }
.seat:not(.hero) .ls-hand { margin-top: 10px; }

/* Result panel. */
.overlay { background: radial-gradient(ellipse at center, rgba(7,40,30,.45), rgba(7,40,30,.72)); }
.result { max-width: 480px; }
.result .sidewin { color: var(--gold-dark); font-weight: 800; }

/* ---- Topbar actions + round-by-round recap (self-contained; not shared from bullseye-game.css). ---- */
.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 (self-contained). ---- */
.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: ls-chip-drop .42s cubic-bezier(.2,1.3,.5,1) both;
}
.seat.hero .dealer-chip { top: -10px; right: -10px; }
@keyframes ls-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: ls-current-pulse 1.5s ease-in-out infinite; }
@keyframes ls-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: ls-pop .24s ease-out both; }
@keyframes ls-pop {
    0%   { opacity: 0; transform: scale(.55) translateY(4px); }
    100% { opacity: 1; transform: none; }
}

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