/* ============================================
   Glass Shatter Effect v3 - Polished + Score
   ============================================
   1s synced animation with sound.
   Beautiful glow → crack → shatter → sparkle
   ============================================ */

/* === PHASE 1: GOLDEN GLOW (0–300ms) === */
.cell-glow-overlay {
    position: fixed;
    pointer-events: none;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Outfit', 'Noto Sans JP', sans-serif;
    font-weight: 700;
    animation: overlayGlow 0.45s ease-out forwards;
    border-radius: 2px;
}

@keyframes overlayGlow {
    0% {
        background: rgba(30, 41, 59, 0.9);
        box-shadow: none;
        transform: scale(1);
    }

    50% {
        background: rgba(251, 191, 36, 0.6);
        box-shadow: 0 0 25px rgba(251, 191, 36, 0.7), inset 0 0 20px rgba(255, 255, 255, 0.4);
        transform: scale(1.06);
    }

    100% {
        background: rgba(255, 255, 255, 0.85);
        box-shadow: 0 0 35px rgba(255, 255, 255, 0.6), 0 0 60px rgba(251, 191, 36, 0.3);
        transform: scale(1.08);
        color: #1e293b;
    }
}

/* === PHASE 2: CELL FRAGMENTS (300ms–1000ms) === */
.cell-fragment {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    will-change: transform, opacity;
    backface-visibility: hidden;
    overflow: hidden;
    border-radius: 1px;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.cell-fragment-inner {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Outfit', 'Noto Sans JP', sans-serif;
    font-weight: 700;
}

/* 各破片の飛散アニメーション（重力あり・0.7s） */
.cell-fragment.frag-tl {
    animation: fragTL 1.0s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.cell-fragment.frag-tr {
    animation: fragTR 1.0s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.cell-fragment.frag-bl {
    animation: fragBL 1.0s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.cell-fragment.frag-br {
    animation: fragBR 1.0s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.cell-fragment.frag-center {
    animation: fragC 0.95s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

@keyframes fragTL {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(1);
        opacity: 1;
    }

    20% {
        transform: translate(-12px, -18px) rotate(-8deg) scale(0.97);
        opacity: 1;
    }

    100% {
        transform: translate(-45px, 70px) rotate(-35deg) scale(0.15);
        opacity: 0;
    }
}

@keyframes fragTR {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(1);
        opacity: 1;
    }

    20% {
        transform: translate(14px, -20px) rotate(6deg) scale(0.97);
        opacity: 1;
    }

    100% {
        transform: translate(40px, 80px) rotate(40deg) scale(0.1);
        opacity: 0;
    }
}

@keyframes fragBL {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(1);
        opacity: 1;
    }

    20% {
        transform: translate(-10px, 5px) rotate(-5deg) scale(0.95);
        opacity: 1;
    }

    100% {
        transform: translate(-35px, 95px) rotate(-50deg) scale(0.1);
        opacity: 0;
    }
}

@keyframes fragBR {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(1);
        opacity: 1;
    }

    20% {
        transform: translate(12px, 8px) rotate(4deg) scale(0.95);
        opacity: 1;
    }

    100% {
        transform: translate(30px, 100px) rotate(35deg) scale(0.12);
        opacity: 0;
    }
}

@keyframes fragC {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(1);
        opacity: 1;
    }

    15% {
        transform: translate(0, -8px) rotate(2deg) scale(1);
        opacity: 1;
    }

    100% {
        transform: translate(3px, 85px) rotate(18deg) scale(0.2);
        opacity: 0;
    }
}

/* === SPARKS === */
.shatter-spark {
    position: fixed;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 10000;
    will-change: transform, opacity;
}

.shatter-spark.spark-gold {
    background: #fbbf24;
    box-shadow: 0 0 8px 3px rgba(251, 191, 36, 0.9);
}

.shatter-spark.spark-white {
    background: #ffffff;
    box-shadow: 0 0 8px 3px rgba(255, 255, 255, 0.9);
}

.shatter-spark.spark-emerald {
    background: #34d399;
    box-shadow: 0 0 8px 3px rgba(52, 211, 153, 0.9);
}

.shatter-spark.fly-1 {
    animation: sFly1 0.6s ease-out forwards;
}

.shatter-spark.fly-2 {
    animation: sFly2 0.55s ease-out forwards;
}

.shatter-spark.fly-3 {
    animation: sFly3 0.65s ease-out forwards;
}

.shatter-spark.fly-4 {
    animation: sFly4 0.5s ease-out forwards;
}

.shatter-spark.fly-5 {
    animation: sFly5 0.7s ease-out forwards;
}

.shatter-spark.fly-6 {
    animation: sFly6 0.6s ease-out forwards;
}

@keyframes sFly1 {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1
    }

    100% {
        transform: translate(-35px, -45px) scale(0);
        opacity: 0
    }
}

@keyframes sFly2 {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1
    }

    100% {
        transform: translate(40px, -30px) scale(0);
        opacity: 0
    }
}

@keyframes sFly3 {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1
    }

    100% {
        transform: translate(-28px, 35px) scale(0);
        opacity: 0
    }
}

@keyframes sFly4 {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1
    }

    100% {
        transform: translate(45px, 25px) scale(0);
        opacity: 0
    }
}

@keyframes sFly5 {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1
    }

    100% {
        transform: translate(-15px, -55px) scale(0);
        opacity: 0
    }
}

@keyframes sFly6 {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1
    }

    100% {
        transform: translate(20px, 50px) scale(0);
        opacity: 0
    }
}

/* === EXPANDING RING === */
.shatter-ring {
    position: fixed;
    border: 2px solid rgba(251, 191, 36, 0.7);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9998;
    animation: ringPulse 0.8s ease-out forwards;
}

@keyframes ringPulse {
    0% {
        transform: scale(0);
        opacity: 1;
        border-width: 3px;
    }

    50% {
        opacity: 0.7;
        border-width: 2px;
    }

    100% {
        transform: scale(4);
        opacity: 0;
        border-width: 1px;
    }
}

/* === SCORE POPUP (floating +points) === */
.score-popup {
    position: fixed;
    pointer-events: none;
    z-index: 10001;
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 1.4rem;
    color: #fbbf24;
    text-shadow: 0 0 10px rgba(251, 191, 36, 0.8), 0 2px 6px rgba(0, 0, 0, 0.6);
    animation: scoreFloat 1.2s ease-out forwards;
    white-space: nowrap;
}

.score-popup.bonus {
    font-size: 1.8rem;
    color: #34d399;
    text-shadow: 0 0 15px rgba(52, 211, 153, 0.8), 0 2px 8px rgba(0, 0, 0, 0.6);
}

.score-popup.streak {
    font-size: 1.1rem;
    color: #a78bfa;
    text-shadow: 0 0 10px rgba(167, 139, 250, 0.8), 0 2px 6px rgba(0, 0, 0, 0.6);
}

@keyframes scoreFloat {
    0% {
        transform: translateY(0) scale(0.5);
        opacity: 0;
    }

    15% {
        transform: translateY(-5px) scale(1.2);
        opacity: 1;
    }

    30% {
        transform: translateY(-15px) scale(1);
        opacity: 1;
    }

    100% {
        transform: translateY(-60px) scale(0.8);
        opacity: 0;
    }
}

/* === SCORE BAR (in game header) === */
.score-display {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.9rem;
}

.score-display .score-icon {
    font-size: 1rem;
}

.score-display .score-value {
    font-weight: 800;
    color: #fbbf24;
    font-family: 'Outfit', sans-serif;
    min-width: 40px;
    transition: transform 0.2s ease;
}

.score-display .score-value.score-bump {
    animation: scoreBump 0.3s ease-out;
}

@keyframes scoreBump {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.3);
        color: #34d399;
    }

    100% {
        transform: scale(1);
    }
}

/* === STREAK INDICATOR === */
.streak-indicator {
    position: fixed;
    top: 10px;
    right: 20px;
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: 12px;
    padding: 8px 16px;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    color: #fbbf24;
    font-size: 0.85rem;
    z-index: 100;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.streak-indicator.visible {
    opacity: 1;
    transform: translateY(0);
}

.streak-indicator .streak-fire {
    font-size: 1.1rem;
    margin-right: 4px;
}

.streak-indicator .streak-multiplier {
    color: #34d399;
    font-weight: 800;
}