/* Specialized styles for ranking category pages */
@font-face {
    font-family: 'Vipnagorgialla';
    src: url('../../assets/fonts/Vipnagorgialla.otf') format('opentype');
    font-display: swap;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: #f8fafc;
}

.font-vipnagorgialla {
    font-family: 'Vipnagorgialla', sans-serif;
}

.glass-header {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 2px solid rgba(242, 13, 13, 0.1);
}

.animate-fade-in {
    animation: fadeIn 0.8s ease-out forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Participant Card Style: Ground Texture & Topography */
.participant-card {
    position: relative;
    /*background-color: #fdfbfb;*/
    /* Sand White */
    border: 1px solid #e2e8f0;
    border-radius: 2rem;
    padding: 1.75rem;
    overflow: hidden;
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.participant-card:hover {
    transform: translateY(-8px);
    border-color: #f20d0d66;
    box-shadow: 0 40px 80px -20px rgba(15, 23, 42, 0.15);
}

/* One Pattern to Rule them All: Visible Tracks */
.participant-card-pattern {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: url('../img/safari_pattern.png');
    background-size: 100%;
    /* Scale to see the tracks */
    background-position: left;
    opacity: 0.25;
    /* More visible */
    mix-blend-mode: multiply;
    z-index: 1;
}

/* REMOVED ::before/::after that caused rectangular artifacts */

/* Mega Card (Leader) Styles */
.leader-card {
    position: relative;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    border-radius: 3rem;
    padding: 3rem;
    overflow: hidden;
    box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.3);
    color: white;
}

.leader-card-pattern {
    position: absolute;
    inset: 0;
    opacity: 0.25;
    pointer-events: none;
    background-image: url('../../safari_pattern.png');
    background-size: cover;
    mix-blend-mode: overlay;
}

.leader-card .text-slate-900 {
    color: white;
}

.leader-card .text-slate-400 {
    color: #94a3b8;
}

.leader-card .bg-slate-100 {
    background: rgba(255, 255, 255, 0.1);
}

.leader-card .border-slate-200 {
    border-color: rgba(255, 255, 255, 0.1);
}

/* Pos Badge Podium (1, 2, 3) */
.pos-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 5rem;
    height: 4rem;
    border-radius: 1.25rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    font-weight: 900;
    color: #f20d0d;
    font-size: 1.5rem;
    font-family: 'Vipnagorgialla', sans-serif;
    font-style: italic;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
}

/* Pos Badge Standard (Rank 4+) - More rectangular and smaller font */
.pos-badge-standard {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 5rem;
    /* Rectangular: width > height potentially? Or just smaller */
    padding: 0.5rem 0;
    /* Let's try 4rem width and 3rem height to be rectangular */
    height: 3rem;
    border-radius: 1rem;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    font-weight: 900;
    color: #f20d0d;
    font-size: 1.25rem;
    /* Smaller font */
    font-family: 'Vipnagorgialla', sans-serif;
    font-style: italic;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.vehicle-info {
    border-top: 1px solid rgba(15, 23, 42, 0.06);
    padding-top: 1.25rem;
    margin-top: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.vehicle-info .stat-group {
    display: flex;
    flex-direction: column;
}

.vehicle-info .stat-label {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 0.25rem;
    color: #94a3b8;
}

.vehicle-info .stat-value {
    font-size: 1.25rem;
    font-weight: 900;
    color: #0f172a;
    line-height: 1;
}

.vehicle-info .stat-value.primary {
    color: #f20d0d;
    font-size: 1.5rem;
}

.vehicle-info .stat-unit {
    font-size: 0.75rem;
    font-weight: 700;
    margin-left: 0.125rem;
}