.runner-modal-bg {
    position: fixed;
    left: 0; top: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.6);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.animation-container {
    position: relative;
    width: 560px;
    height: 560px;
    overflow: hidden;
}

.element {
    position: absolute;
}

/* 배경 원형들 */
.bg-circle {
    width: 128px;
    height: 128px;
    border: 4px solid #e5e7eb;
    border-radius: 50%;
    opacity: 0.3;
}

.bg-circle-0 {
    top: 100px;
    animation: bgCircle0 4s linear infinite;
}

.bg-circle-1 {
    top: 350px;
    animation: bgCircle1 4s linear infinite 2s;
}

@keyframes bgCircle0 {
    0% { transform: translateX(600px); }
    100% { transform: translateX(-150px); }
}

@keyframes bgCircle1 {
    0% { transform: translateX(600px); }
    100% { transform: translateX(-150px); }
}

/* 속도선들 */
.speed-line {
    height: 4px;
    width: 128px;
    background: #22d3ee;
    border-radius: 9999px;
    opacity: 0.4;
}

.speed-line-0 { top: 180px; animation: speedLine 1.2s linear infinite; }
.speed-line-1 { top: 240px; animation: speedLine 1.2s linear infinite 0.3s; }
.speed-line-2 { top: 300px; animation: speedLine 1.2s linear infinite 0.6s; }
.speed-line-3 { top: 360px; animation: speedLine 1.2s linear infinite 0.9s; }

@keyframes speedLine {
    0% { transform: translateX(600px); }
    100% { transform: translateX(-120px); }
}

/* 땅 라인들 */
.ground-line {
    bottom: 64px;
    width: 112px;
    height: 2px;
    background: #d1d5db;
    border-radius: 9999px;
    opacity: 0.5;
}

.ground-line-0 { animation: groundLine 1.5s linear infinite; }
.ground-line-1 { animation: groundLine 1.5s linear infinite 0.3s; }
.ground-line-2 { animation: groundLine 1.5s linear infinite 0.6s; }
.ground-line-3 { animation: groundLine 1.5s linear infinite 0.9s; }
.ground-line-4 { animation: groundLine 1.5s linear infinite 1.2s; }

@keyframes groundLine {
    0% { transform: translateX(580px); }
    100% { transform: translateX(-100px); }
}

/* 파티클들 */
.particle {
    width: 16px;
    height: 16px;
    background: #fde047;
    border-radius: 50%;
    opacity: 0.4;
}

.particle-0 { top: 80px; animation: particle 2.5s linear infinite; }
.particle-1 { top: 180px; animation: particle 2.5s linear infinite 0.833s; }
.particle-2 { top: 280px; animation: particle 2.5s linear infinite 1.666s; }

@keyframes particle {
    0% { transform: translateX(580px); }
    100% { transform: translateX(-80px); }
}

/* 메인 캐릭터 */
.character-wrapper {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.character {
    animation: characterBounce 0.6s ease-in-out infinite;
}

.character img {
    /* width: 560px;
    height: 560px; */
    width: 280px;
    aspect-ratio: 1/1;
    object-fit: contain;
}

@keyframes characterBounce {
    0% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-16px) rotate(-1.5deg); }
    50% { transform: translateY(0) rotate(0deg); }
    75% { transform: translateY(-10px) rotate(1deg); }
    100% { transform: translateY(0) rotate(0deg); }
}

/* 그림자 */
.shadow {
    position: absolute;
    bottom: -24px;
    left: 50%;
    transform: translateX(-50%);
    width: 176px;
    height: 20px;
    background: #6b7280;
    border-radius: 50%;
    filter: blur(16px);
    animation: shadowPulse 0.6s ease-in-out infinite;
}

@keyframes shadowPulse {
    0% { transform: translateX(-50%) scale(1); opacity: 0.25; }
    25% { transform: translateX(-50%) scale(0.8); opacity: 0.15; }
    50% { transform: translateX(-50%) scale(1); opacity: 0.25; }
    75% { transform: translateX(-50%) scale(0.85); opacity: 0.18; }
    100% { transform: translateX(-50%) scale(1); opacity: 0.25; }
}

/* 먼지 효과 */
.dust {
    left: 180px;
    bottom: 100px;
    width: 24px;
    height: 24px;
    background: #d1d5db;
    border-radius: 50%;
    filter: blur(4px);
    opacity: 0.6;
}

.dust-0 { animation: dust 1s ease-out infinite; }
.dust-1 { animation: dust 1s ease-out infinite 0.33s; }
.dust-2 { animation: dust 1s ease-out infinite 0.66s; }

@keyframes dust {
    0% {
        opacity: 0;
        transform: translate(-20px, 0) scale(0.5);
    }
    25% {
        opacity: 0.3;
        transform: translate(-60px, -5px) scale(1.2);
    }
    50% {
        opacity: 0.18;
        transform: translate(-90px, -8px) scale(1.6);
    }
    100% {
        opacity: 0;
        transform: translate(-120px, -10px) scale(1.8);
    }
}

/* 전방 속도선 */
.front-speed {
    left: 400px;
    height: 2px;
    width: 96px;
    background: #67e8f9;
    border-radius: 9999px;
    transform-origin: left;
}

.front-speed-0 { top: 240px; animation: frontSpeed 0.7s ease-out infinite; }
.front-speed-1 { top: 280px; animation: frontSpeed 0.7s ease-out infinite 0.18s; }
.front-speed-2 { top: 320px; animation: frontSpeed 0.7s ease-out infinite 0.36s; }

@keyframes frontSpeed {
    0% {
        opacity: 0;
        transform: scaleX(0) translateX(0);
    }
    30% {
        opacity: 0.7;
        transform: scaleX(1) translateX(0);
    }
    60% {
        opacity: 0.4;
        transform: scaleX(1) translateX(-70px);
    }
    100% {
        opacity: 0;
        transform: scaleX(1) translateX(-140px);
    }
}

/* 작은 사각형들 */
.square {
    width: 32px;
    height: 32px;
    border: 2px solid #f9a8d4;
    opacity: 0.3;
}

.square-0 { top: 120px; animation: square0 3.5s linear infinite; }
.square-1 { top: 400px; animation: square1 3.5s linear infinite 1.75s; }

@keyframes square0 {
    0% { transform: translateX(600px) rotate(0deg); }
    100% { transform: translateX(-100px) rotate(180deg); }
}

@keyframes square1 {
    0% { transform: translateX(600px) rotate(0deg); }
    100% { transform: translateX(-100px) rotate(180deg); }
}

/* 작은 라인들 */
.small-line {
    bottom: 128px;
    width: 48px;
    height: 2px;
    background: #9ca3af;
    border-radius: 9999px;
    opacity: 0.4;
}

.small-line-0 { animation: smallLine 1s linear infinite; }
.small-line-1 { animation: smallLine 1s linear infinite 0.25s; }
.small-line-2 { animation: smallLine 1s linear infinite 0.5s; }
.small-line-3 { animation: smallLine 1s linear infinite 0.75s; }

@keyframes smallLine {
    0% { transform: translateX(600px); }
    100% { transform: translateX(-80px); }
}

/* 원형 링 효과 */
.energy-ring {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 500px;
    border: 2px solid #67e8f9;
    border-radius: 50%;
    pointer-events: none;
    animation: energyRing 2s ease-out infinite;
}

@keyframes energyRing {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.2;
    }
    70% {
        transform: translate(-50%, -50%) scale(1.4);
        opacity: 0.1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.6);
        opacity: 0;
    }
}