/**
 * Arena Betting Display
 *
 * Bet displays, chip stacks, and chip animations for the Training Arena.
 * Includes PNG chip stack assets and per-seat bet positioning.
 *
 * Specificity: Uses direct class selectors (0,1,0) - no !important needed
 */

/* ============================================
   BET DISPLAYS - Per-player chip stacks
   ============================================ */

.bet-display {
    position: absolute;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    opacity: 0;
    transform: scale(0.9) translateZ(0);
    transition: opacity 0.15s var(--ease-out), transform 0.2s var(--ease-out);
    z-index: var(--z-bet-chips);
}

.bet-display.visible {
    opacity: 1;
    transform: scale(1) translateZ(0);
}

/* Per-seat bet positions - oval ring between seats and pot */
.bet-display.bet-seat-0 {
    bottom: 14%;
    left: 50%;
    transform: translateX(-50%);
}  /* Hero - bottom center */

.bet-display.bet-seat-1 {
    bottom: 22%;
    left: 11%;
}  /* Bottom-left */

.bet-display.bet-seat-2 {
    top: 22%;
    left: 11%;
}  /* Top-left */

.bet-display.bet-seat-3 {
    top: 14%;
    left: 50%;
    transform: translateX(-50%);
}  /* Top center */

.bet-display.bet-seat-4 {
    top: 22%;
    right: 11%;
    left: auto;
    flex-direction: row-reverse;
}  /* Top-right */

.bet-display.bet-seat-5 {
    bottom: 22%;
    right: 11%;
    left: auto;
    flex-direction: row-reverse;
}  /* Bottom-right */

/* 9-max additional bet positions (seats 6-8) */
.bet-display.bet-seat-6 {
    top: 36%;
    right: 9%;
    left: auto;
    flex-direction: row-reverse;
}  /* Right side, between seat-4 and seat-5 */

.bet-display.bet-seat-7 {
    top: 36%;
    left: 9%;
}  /* Left side, between seat-2 and seat-1 */

.bet-display.bet-seat-8 {
    top: 14%;
    left: 66%;
    transform: translateX(-50%);
}  /* Top, offset right from center */

/* Hero chip stack - slightly smaller for cleaner look */
.bet-display.bet-seat-0 .chip-bundle-img,
.bet-display.bet-seat-0 .seat-chip-bundle-img {
    width: 32px;
    max-height: 50px;
}

/* ============================================
   BET AMOUNT LABEL
   ============================================ */

.bet-amount {
    font-family: var(--font-family-mono);
    font-size: 13px;
    font-weight: var(--font-weight-bold);
    color: #fff;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.85),
        0 0 6px rgba(0, 0, 0, 0.5);
    white-space: nowrap;
}

/* ============================================
   PNG CHIP STACKS - Clustered Pile Layout
   ============================================ */

/* Cluster container for seat bets - absolutely positioned children */
.chip-stack {
    position: relative;
    display: block;
    width: 56px;
    height: 48px;
    min-height: 48px;
}

/* PNG chip bundle image */
.chip-bundle-img,
.seat-chip-bundle-img {
    display: block;
    width: 36px;
    height: auto;
    max-height: 56px;
    object-fit: contain;
    filter: drop-shadow(0 3px 4px rgba(0,0,0,0.55)) var(--chip-desaturation);
}

/* Individual stack in cluster - absolutely positioned with CSS vars */
.chip-stack-visual,
.seat-chip-stack-visual {
    position: absolute;
    bottom: 0;
    left: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform:
        translateX(-50%)
        translateX(var(--x, 0px))
        translateY(var(--y, 0px))
        scale(var(--scale, 1))
        rotate(var(--rot, 0deg));
    transform-origin: bottom center;
    z-index: var(--z, 1);
    animation: chipStackAppear 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Stack count indicator (x3, x5, etc.) */
.chip-stack-count,
.seat-chip-stack-count {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    color: rgba(255,255,255,0.95);
    text-shadow: 0 1px 2px rgba(0,0,0,0.9);
    margin-top: 2px;
    background: rgba(0,0,0,0.5);
    padding: 1px var(--space-1);
    border-radius: 3px;
}

/* ============================================
   POT CHIP STACK - Larger cluster
   ============================================ */

/* Center pot display - larger cluster container */
.pot-chip-stack {
    position: relative;
    display: block;
    width: 110px;
    height: 90px;
    min-height: 90px;
}

.pot-chip-stack .chip-bundle-img {
    width: 48px;
    max-height: 84px;
}

/* ============================================
   FLYING CHIPS - Animated chips from seat to pot
   ============================================ */

/* Flying chip animation - GPU accelerated for smooth performance */
.flying-chip {
    position: absolute;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px dashed rgba(255,255,255,0.6);
    z-index: var(--z-popover);
    pointer-events: none;
    box-shadow:
        0 2px 6px rgba(0,0,0,0.5),
        inset 0 2px 4px rgba(255,255,255,0.3);
    will-change: transform, opacity, left, top;
    transform: translateZ(0);
    backface-visibility: hidden;
    animation: chipSpin 0.4s linear, chipShadowGrow 0.4s ease-in;
}

@keyframes chipShadowGrow {
    0%   { box-shadow: 0 2px 6px rgba(0,0,0,0.3), inset 0 2px 4px rgba(255,255,255,0.3); }
    50%  { box-shadow: 0 6px 16px rgba(0,0,0,0.5), inset 0 2px 4px rgba(255,255,255,0.3); }
    100% { box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 2px 4px rgba(255,255,255,0.3); }
}

/* Flying chip color variants with enhanced gradients */
.flying-chip.red {
    background: radial-gradient(circle at 30% 30%, #ef5350, #c62828);
    border-color: rgba(255, 200, 200, 0.5);
}
.flying-chip.blue {
    background: radial-gradient(circle at 30% 30%, #42a5f5, #1565c0);
    border-color: rgba(200, 220, 255, 0.5);
}
.flying-chip.green {
    background: radial-gradient(circle at 30% 30%, #66bb6a, #2e7d32);
    border-color: rgba(200, 255, 200, 0.5);
}
.flying-chip.black {
    background: radial-gradient(circle at 30% 30%, #555, #2a2a2a);
    border-color: rgba(200, 200, 200, 0.4);
}
.flying-chip.gold {
    background: radial-gradient(circle at 30% 30%, #ffca28, #ff8f00);
    border-color: rgba(255, 240, 200, 0.6);
    box-shadow:
        0 2px 8px rgba(255, 180, 0, 0.5),
        inset 0 2px 4px rgba(255, 255, 255, 0.4);
}

/* Chip spawn animation - pop out with scale */
@keyframes chipSpawn {
    0% { transform: scale(0) translateZ(0); opacity: 0; }
    50% { transform: scale(1.2) translateZ(0); opacity: 1; }
    100% { transform: scale(1) translateZ(0); opacity: 1; }
}

/* Chip spin animation during flight */
@keyframes chipSpin {
    0% { transform: rotate(0deg) scale(1) translateZ(0); }
    100% { transform: rotate(360deg) scale(1) translateZ(0); }
}

/* Chip land animation - settle into pot */
@keyframes chipLand {
    0% { transform: scale(1) translateZ(0); opacity: 1; }
    50% { transform: scale(1.1) translateZ(0); opacity: 0.8; }
    100% { transform: scale(0) translateZ(0); opacity: 0; }
}

/* ============================================
   CHIP ANIMATIONS
   chipStackAppear animation defined in base/animations.css
   chipFlyToPot animation defined in base/animations.css
   ============================================ */