/*
 * components/wallet-fx.css
 * --------------------------------------------------------------------
 * Animation de gain sur `#wallet-display` (cf. wallet-fx.js).
 * Declenchee pendant ~1.2s a chaque hausse de wallet.
 *
 * Effets :
 *  - bounce scale sur le conteneur (#wallet-display.wallet-fx-pulse)
 *  - glow dore pulse intense
 *  - texte .value qui brille
 *  - particules dorees (pseudo-elements)
 *  - indicateur "+XXX" flottant (.wallet-fx-delta)
 *
 * Compatible avec `.wallet-floating` (mode chat replie).
 * --------------------------------------------------------------------
 */

/* === Container pulse (bounce + glow) ================================ */
#wallet-display.wallet-fx-pulse {
    animation: walletFxContainerBounce 0.65s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 100045;
}

@keyframes walletFxContainerBounce {
    0% {
        transform: scale(1);
        box-shadow:
            0 0 0 0 rgba(255, 210, 90, 0),
            inset 0 0 0 rgba(255, 235, 160, 0);
    }
    25% {
        transform: scale(1.12);
        box-shadow:
            0 0 28px 8px rgba(255, 210, 90, 0.55),
            0 0 60px 16px rgba(201, 162, 39, 0.35),
            inset 0 0 18px rgba(255, 235, 160, 0.25);
    }
    50% {
        transform: scale(0.97);
        box-shadow:
            0 0 18px 4px rgba(255, 210, 90, 0.40),
            0 0 40px 10px rgba(201, 162, 39, 0.25),
            inset 0 0 12px rgba(255, 235, 160, 0.15);
    }
    75% {
        transform: scale(1.04);
        box-shadow:
            0 0 12px 2px rgba(255, 210, 90, 0.30),
            0 0 24px 6px rgba(201, 162, 39, 0.18),
            inset 0 0 6px rgba(255, 235, 160, 0.10);
    }
    100% {
        transform: scale(1);
        box-shadow:
            0 0 0 0 rgba(255, 210, 90, 0),
            inset 0 0 0 rgba(255, 235, 160, 0);
    }
}

/* === Valeur texte (shine) =========================================== */
#wallet-display .value.wallet-fx-pulse {
    animation: walletFxValueShine 0.9s ease-out;
}

@keyframes walletFxValueShine {
    0% {
        color: #f5e6c8;
        transform: scale(1);
        text-shadow:
            0 0 1px rgba(0, 0, 0, 0.95),
            0 1px 2px rgba(0, 0, 0, 0.9),
            0 2px 6px rgba(0, 0, 0, 0.75),
            0 0 14px rgba(201, 162, 39, 0.45);
    }
    20% {
        color: #fffae0;
        transform: scale(1.15);
        text-shadow:
            0 0 1px rgba(0, 0, 0, 0.9),
            0 1px 2px rgba(0, 0, 0, 0.8),
            0 0 24px rgba(255, 235, 160, 1),
            0 0 48px rgba(255, 210, 90, 0.9),
            0 0 72px rgba(201, 162, 39, 0.6);
    }
    50% {
        color: #fff8d0;
        transform: scale(1.02);
        text-shadow:
            0 0 1px rgba(0, 0, 0, 0.92),
            0 1px 2px rgba(0, 0, 0, 0.85),
            0 0 16px rgba(255, 235, 160, 0.8),
            0 0 32px rgba(255, 210, 90, 0.5);
    }
    100% {
        color: #f5e6c8;
        transform: scale(1);
        text-shadow:
            0 0 1px rgba(0, 0, 0, 0.95),
            0 1px 2px rgba(0, 0, 0, 0.9),
            0 2px 6px rgba(0, 0, 0, 0.75),
            0 0 14px rgba(201, 162, 39, 0.45);
    }
}

/* === Indicateur delta flottant (+XXX) =============================== */
.wallet-fx-delta {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    font-family: 'Noto Serif JP', 'Noto Sans JP', serif;
    font-size: 22px;
    font-weight: 700;
    color: #ffe878;
    text-shadow:
        0 0 2px rgba(0, 0, 0, 0.9),
        0 2px 4px rgba(0, 0, 0, 0.7),
        0 0 16px rgba(255, 210, 90, 0.8),
        0 0 32px rgba(201, 162, 39, 0.5);
    white-space: nowrap;
    z-index: 100050;
    animation: walletFxDeltaFloat 1.3s ease-out forwards;
}

@keyframes walletFxDeltaFloat {
    0% {
        opacity: 0;
        transform: translate(-50%, -30%) scale(0.6);
    }
    15% {
        opacity: 1;
        transform: translate(-50%, -60%) scale(1.15);
    }
    35% {
        opacity: 1;
        transform: translate(-50%, -90%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -140%) scale(0.85);
    }
}

/* === Particule volante "+XXX ¥" / "-XXX ¥" ========================== */
/* Style calqué sur `.cho-bet-delta-fly` dans room_chohan.html — même police,
 * même z-index, mêmes ombres. Toute la trajectoire est gérée par
 * `node.animate()` côté JS (3 keyframes en parabole). */
.wallet-fx-fly-particle {
    position: fixed;
    pointer-events: none;
    z-index: 100100;
    font-family: 'Noto Serif JP', 'Noto Sans JP', serif;
    font-weight: 700;
    font-size: clamp(16px, 2.6vw, 22px);
    color: #ffe1a8;
    text-shadow:
        0 1px 4px rgba(0, 0, 0, 0.78),
        0 0 12px rgba(255, 200, 110, 0.7);
    transform: translate(-50%, -50%);
    will-change: transform, opacity;
    user-select: none;
    white-space: nowrap;
}
.wallet-fx-fly-particle.is-minus {
    color: #ffb6ad;
    text-shadow:
        0 1px 4px rgba(0, 0, 0, 0.78),
        0 0 12px rgba(255, 100, 90, 0.7);
}

/* === Variante PERTE (rouge) ========================================= */
/* Container : bounce rouge plus discret que le gain (le joueur perd, on
 * ne célèbre pas — juste un feedback clair que l'argent a quitté). */
#wallet-display.wallet-fx-pulse-loss {
    animation: walletFxContainerBounceLoss 0.6s cubic-bezier(0.34, 1.4, 0.64, 1);
    z-index: 100045;
}

@keyframes walletFxContainerBounceLoss {
    0% {
        transform: scale(1);
        box-shadow:
            0 0 0 0 rgba(255, 90, 90, 0),
            inset 0 0 0 rgba(255, 120, 120, 0);
    }
    25% {
        transform: scale(1.06);
        box-shadow:
            0 0 24px 6px rgba(255, 90, 90, 0.45),
            0 0 48px 12px rgba(200, 50, 50, 0.30),
            inset 0 0 14px rgba(255, 120, 120, 0.22);
    }
    55% {
        transform: scale(0.98);
        box-shadow:
            0 0 14px 3px rgba(255, 90, 90, 0.30),
            0 0 30px 8px rgba(200, 50, 50, 0.20),
            inset 0 0 8px rgba(255, 120, 120, 0.12);
    }
    100% {
        transform: scale(1);
        box-shadow:
            0 0 0 0 rgba(255, 90, 90, 0),
            inset 0 0 0 rgba(255, 120, 120, 0);
    }
}

/* Valeur texte : flash rouge sombre, contraste fort sans saturer. */
#wallet-display .value.wallet-fx-pulse-loss {
    animation: walletFxValueShineLoss 0.85s ease-out;
}

@keyframes walletFxValueShineLoss {
    0% {
        color: #f5e6c8;
        transform: scale(1);
        text-shadow:
            0 0 1px rgba(0, 0, 0, 0.95),
            0 1px 2px rgba(0, 0, 0, 0.9),
            0 2px 6px rgba(0, 0, 0, 0.75),
            0 0 14px rgba(201, 162, 39, 0.45);
    }
    22% {
        color: #ffb8b0;
        transform: scale(1.08);
        text-shadow:
            0 0 1px rgba(0, 0, 0, 0.9),
            0 1px 2px rgba(0, 0, 0, 0.8),
            0 0 18px rgba(255, 150, 130, 0.95),
            0 0 36px rgba(220, 80, 70, 0.7);
    }
    55% {
        color: #ffd5cf;
        transform: scale(1);
        text-shadow:
            0 0 1px rgba(0, 0, 0, 0.92),
            0 1px 2px rgba(0, 0, 0, 0.85),
            0 0 14px rgba(255, 130, 120, 0.6);
    }
    100% {
        color: #f5e6c8;
        transform: scale(1);
        text-shadow:
            0 0 1px rgba(0, 0, 0, 0.95),
            0 1px 2px rgba(0, 0, 0, 0.9),
            0 2px 6px rgba(0, 0, 0, 0.75),
            0 0 14px rgba(201, 162, 39, 0.45);
    }
}

/* Indicateur delta perte : descend (vs monte pour le gain), rouge. */
.wallet-fx-delta.is-minus {
    color: #ff8a85;
    text-shadow:
        0 0 2px rgba(0, 0, 0, 0.9),
        0 2px 4px rgba(0, 0, 0, 0.7),
        0 0 16px rgba(255, 100, 90, 0.8),
        0 0 32px rgba(200, 50, 50, 0.5);
    animation: walletFxDeltaSink 1.3s ease-out forwards;
}

@keyframes walletFxDeltaSink {
    0% {
        opacity: 0;
        transform: translate(-50%, -70%) scale(0.6);
    }
    15% {
        opacity: 1;
        transform: translate(-50%, -40%) scale(1.15);
    }
    35% {
        opacity: 1;
        transform: translate(-50%, -10%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, 40%) scale(0.85);
    }
}

/* === Particules dorees (sparkles) =================================== */
.wallet-fx-sparkle {
    position: absolute;
    width: 8px;
    height: 8px;
    background: radial-gradient(circle, #fff8d0 0%, #ffd84a 40%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 100048;
    animation: walletFxSparkle 0.9s ease-out forwards;
}

@keyframes walletFxSparkle {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
    100% {
        opacity: 0;
        transform: var(--sparkle-end, translate(30px, -40px)) scale(0.3);
    }
}

/* Variantes de trajectoire (appliquees via JS) */
.wallet-fx-sparkle.s1 { --sparkle-end: translate(-35px, -50px); }
.wallet-fx-sparkle.s2 { --sparkle-end: translate(40px, -45px); }
.wallet-fx-sparkle.s3 { --sparkle-end: translate(-20px, -65px); }
.wallet-fx-sparkle.s4 { --sparkle-end: translate(25px, -60px); }
.wallet-fx-sparkle.s5 { --sparkle-end: translate(-50px, -30px); }
.wallet-fx-sparkle.s6 { --sparkle-end: translate(55px, -35px); }
.wallet-fx-sparkle.s7 { --sparkle-end: translate(0px, -75px); }
.wallet-fx-sparkle.s8 { --sparkle-end: translate(-15px, -55px); }

/* === Reduced motion ================================================= */
@media (prefers-reduced-motion: reduce) {
    #wallet-display.wallet-fx-pulse,
    #wallet-display.wallet-fx-pulse-loss {
        animation: none;
    }
    #wallet-display.wallet-fx-pulse {
        box-shadow: 0 0 18px 4px rgba(255, 210, 90, 0.45);
    }
    #wallet-display.wallet-fx-pulse-loss {
        box-shadow: 0 0 18px 4px rgba(255, 90, 90, 0.45);
    }
    #wallet-display .value.wallet-fx-pulse,
    #wallet-display .value.wallet-fx-pulse-loss {
        animation: none;
        filter: brightness(1.25);
    }
    .wallet-fx-delta:not(.is-minus) {
        animation: walletFxDeltaFadeOnly 1s ease-out forwards;
    }
    .wallet-fx-delta.is-minus {
        animation: walletFxDeltaFadeOnlyDown 1s ease-out forwards;
    }
    @keyframes walletFxDeltaFadeOnly {
        0% { opacity: 0; transform: translate(-50%, -50%); }
        20% { opacity: 1; transform: translate(-50%, -70%); }
        100% { opacity: 0; transform: translate(-50%, -90%); }
    }
    @keyframes walletFxDeltaFadeOnlyDown {
        0% { opacity: 0; transform: translate(-50%, -50%); }
        20% { opacity: 1; transform: translate(-50%, -30%); }
        100% { opacity: 0; transform: translate(-50%, -10%); }
    }
    .wallet-fx-sparkle {
        display: none;
    }
}