body { font-family: 'Inter', sans-serif; background-color: #f1f5f9; }
.card { background-color: white; padding: 1.5rem; border-radius: 0.75rem; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); }
.racer-list-move { transition: transform 0.5s ease; }
.handle { cursor: grab; }
.handle:active { cursor: grabbing; }
.sortable-ghost { opacity: 0.4; background: #f0f0f0; }
[v-cloak] { display: none; }

/* --- 스플래시 화면 스타일 --- */
#splash-screen {
    font-family: 'Inter', sans-serif;
}
.splash-fade-out {
    opacity: 0;
}

/* --- 로딩 애니메이션 스타일 --- */
@keyframes snail-loader-move {
    from { left: -20%; }
    to { left: 100%; }
}
.animate-snail-loader {
    position: absolute;
    animation: snail-loader-move 2.5s linear infinite;
}

/* 폭죽 효과 */
.confetti-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1000;
    overflow: hidden;
}

.confetti-burst {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ff6b6b;
    animation: confetti-burst 2s ease-out forwards;
}

.confetti-burst:nth-child(odd) {
    background: #4ecdc4;
}

.confetti-burst:nth-child(3n) {
    background: #45b7d1;
}

.confetti-burst:nth-child(4n) {
    background: #f9ca24;
}

.confetti-burst:nth-child(5n) {
    background: #f0932b;
}

.confetti-burst:nth-child(6n) {
    background: #eb4d4b;
}

.confetti-burst:nth-child(7n) {
    background: #6c5ce7;
}

.confetti-burst:nth-child(8n) {
    background: #a55eea;
}

.confetti-burst:nth-child(9n) {
    background: #26de81;
}

@keyframes confetti-burst {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translate(var(--random-x), var(--random-y)) scale(0);
        opacity: 0;
    }
}

/* 달팽이 이미지 스타일 */
.snail-icon {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    background-image: url('/icon/snail.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
}

/* 흙바닥 느낌의 트랙 배경 스타일 (단일 색상) */
.race-track-base {
    background-color: #fef3c7;
    background-image: 
        radial-gradient(circle at 20% 20%, rgba(139, 69, 19, 0.08) 2px, transparent 2px),
        radial-gradient(circle at 60% 60%, rgba(160, 82, 45, 0.06) 1px, transparent 1px),
        radial-gradient(circle at 80% 30%, rgba(139, 69, 19, 0.05) 1.5px, transparent 1.5px);
    background-size: 30px 30px, 30px 30px, 30px 30px;
    box-shadow: inset 0 1px 3px rgba(139, 69, 19, 0.15);
}

/* 순위별 트랙 배경 (모두 동일한 기본 색상) */
.race-track-1st,
.race-track-2nd,
.race-track-3rd,
.race-track-gift,
.race-track-watched {
    background-color: #fef3c7;
    background-image: 
        radial-gradient(circle at 20% 20%, rgba(139, 69, 19, 0.08) 2px, transparent 2px),
        radial-gradient(circle at 60% 60%, rgba(160, 82, 45, 0.06) 1px, transparent 1px),
        radial-gradient(circle at 80% 30%, rgba(139, 69, 19, 0.05) 1.5px, transparent 1.5px);
    background-size: 30px 30px, 30px 30px, 30px 30px;
    box-shadow: inset 0 1px 3px rgba(139, 69, 19, 0.15);
}

/* 기본 진행바 색상 (커스텀 갈색) */
.progress-default {
    background: #E3B786;
}

/* 순위별 진행바 색상 (Tailwind 색상) */
.progress-1st {
    background: #fecaca; /* red-200 */
}

.progress-2nd {
    background: #fed7aa; /* orange-200 */
}

.progress-3rd {
    background: #fef08a; /* yellow-200 */
}

/* 선물 진행바 색상 */
.progress-gift {
    background: #bbf7d0; /* green-200 */
}

/* 관찰 모드 진행바 (색상 강도 한 단계 높임) */
.progress-watched {
    background: #D4A574; /* 기본 색상보다 진한 갈색 */
}

.progress-watched-1st {
    background: #fca5a5; /* red-300 */
}

.progress-watched-2nd {
    background: #fdba74; /* orange-300 */
}

.progress-watched-3rd {
    background: #fde047; /* yellow-300 */
}

.progress-watched-gift {
    background: #86efac; /* green-300 */
}

/* 경기 탭 진행 중 점멸 표시 */
.race-tab-active i,
.race-tab-active span {
    animation: race-blink 1.5s ease-in-out infinite;
}

@keyframes race-blink {
    0%, 100% {
        color: inherit;
    }
    50% {
        color: #ef4444; /* red-500 */
    }
}

/* 툴팁 스타일 */
.tooltip-container {
    position: relative;
    display: inline-block;
}

.tooltip {
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #1f2937; /* gray-800 */
    color: white;
    text-align: center;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 0.875rem;
    white-space: nowrap;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    pointer-events: none;
}

.tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #1f2937 transparent transparent transparent;
}

.tooltip-container:hover .tooltip {
    opacity: 1;
    visibility: visible;
}