:root{
    --bg:#0c0f12;
    --panel:#171b21;
    --panel-light:#212731;

    --orange:#ff6b00;
    --yellow:#ffc400;

    --text:#ffffff;
    --muted:#a0a7b4;

    --gold:#FFD700;
    --silver:#C0C0C0;
    --bronze:#CD7F32;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    font-family:'Inter',sans-serif;

    background:
        linear-gradient(
            rgba(0,0,0,.80),
            rgba(0,0,0,.90)
        ),
        url("background.png") no-repeat fixed;

    background-size:cover;
    background-position:center;

    color:white;

    width:100vw;
    height:100vh;

    overflow:hidden;

    display:flex;
    flex-direction:column;
}

.overlay{
    position:fixed;
    inset:0;

    background:
        radial-gradient(circle at top right,
        rgba(255,107,0,.15),
        transparent 35%);

    pointer-events:none;
}

.header{

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:10px 60px;

    background:rgba(15,15,15,.75);

    backdrop-filter:blur(10px);

    border-bottom:2px solid rgba(255,107,0,.3);
}

.brand{
    display:flex;
    align-items:center;
    gap:25px;
}

.logo{
    height:90px;
    width:auto;
}

.event-info h1{
    font-size:52px;
    font-weight:900;
    letter-spacing:2px;
}

.event-info span{
    color:var(--orange);
    font-size:22px;
    font-weight:700;
}

.live-box{

    display:flex;
    align-items:center;
    gap:10px;

    font-size:28px;
    font-weight:800;

    color:#00ff66;
}

.live-dot{

    width:16px;
    height:16px;

    border-radius:50%;

    background:#00ff66;

    animation:pulse 1.5s infinite;
}

@keyframes pulse{
    0%{
        opacity:1;
    }

    50%{
        opacity:.3;
    }

    100%{
        opacity:1;
    }
}

.leaderboard{

    flex:1;

    padding:35px 60px;

    display:flex;
    flex-direction:column;

    gap:18px;
}

.entry{

    display:flex;
    align-items:center;
    padding:5px 15px;
    background:rgba(20,20,20,1);
    backdrop-filter:blur(8px);
    border-radius:18px;
    border-left:8px solid #444;
    animation:slideIn .4s ease;
}

.first{
    border-left-color:var(--gold);
}

.second{
    border-left-color:var(--silver);
}

.third{
    border-left-color:var(--bronze);
}

.position{
    width:80px;
    font-size:48px;
    font-weight:900;
    text-align:center;
}

.details{
    margin-left:20px;
}

.driver{
    font-size:42px;
    font-weight:900;
    letter-spacing:1px;
}

.vehicle{
    margin-top:4px;
    font-size:22px;
    color:var(--muted);
}

.score_icon{
    margin-left:auto;
    font-size:64px;
    font-weight:900;
}
.score{
    /* margin-left:auto; */
    font-size:64px;
    font-weight:900;
    color:var(--orange);
    min-width: 275px;
}

footer{
    height:40px;
    padding:0 60px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:#101215;
    border-top:1px solid rgba(255,255,255,.08);
    font-size:20px;
    font-weight:700;
}

.footer-left{
    color:var(--muted);
}

.footer-right{
    color:var(--orange);
}

@keyframes slideIn{

    from{
        opacity:0;
        transform:translateX(50px);
    }

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