/* ATDARK - BXH ĐUA TOP REF */

.ref-race-card{
    position:relative;
    overflow:hidden;
    padding:18px;
    border:1px solid rgba(24,245,219,.25);
    background:
        radial-gradient(circle at 85% 0,rgba(147,51,234,.22),transparent 38%),
        radial-gradient(circle at 8% 100%,rgba(0,238,214,.16),transparent 42%),
        linear-gradient(155deg,rgba(5,22,24,.97),rgba(4,10,16,.98));
}

.ref-race-card::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(120deg,transparent,rgba(255,255,255,.025),transparent);
}

.ref-race-head,
.ref-race-prizes,
.ref-race-my-position,
.ref-race-podium,
.ref-race-bottom-list,
.ref-race-actions,
.ref-race-last-season,
.ref-race-my-awards{
    position:relative;
    z-index:1;
}

.ref-race-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    margin-bottom:14px;
}

.ref-race-title{
    display:flex;
    align-items:center;
    gap:11px;
    min-width:0;
}

.ref-race-title>span{
    display:grid;
    width:46px;
    height:46px;
    flex:0 0 46px;
    place-items:center;
    border-radius:15px;
    color:#061314;
    background:linear-gradient(135deg,#ffe56d,#ff9d2e);
    box-shadow:0 10px 28px rgba(255,171,39,.2);
}

.ref-race-title svg{
    width:24px;
    height:24px;
}

.ref-race-title small{
    display:block;
    margin-bottom:3px;
    color:#71f3df;
    font-size:10px;
    font-weight:900;
    letter-spacing:.13em;
}

.ref-race-title h3{
    margin:0;
    color:#f5ffff;
    font-size:19px;
}

.ref-race-season-badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    min-height:34px;
    padding:0 11px;
    border:1px solid rgba(127,90,240,.38);
    border-radius:999px;
    color:#dfd4ff;
    background:rgba(103,58,183,.16);
    font-size:11px;
    font-weight:900;
    white-space:nowrap;
}

.ref-race-season-meta{
    margin:0 0 14px;
    color:#93aeb1;
    font-size:12px;
    line-height:1.65;
}

.ref-race-prizes{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:7px;
    margin-bottom:15px;
}

.ref-race-prize{
    min-width:0;
    padding:10px 6px;
    border:1px solid rgba(117,181,185,.16);
    border-radius:13px;
    text-align:center;
    background:rgba(3,15,18,.72);
}

.ref-race-prize b{
    display:block;
    margin-bottom:4px;
    color:#f6ffff;
    font-size:11px;
}

.ref-race-prize span{
    display:block;
    overflow:hidden;
    color:#62ead6;
    font-size:10px;
    font-weight:800;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.ref-race-prize.rank-1{
    border-color:rgba(255,211,76,.34);
    background:rgba(255,185,41,.08);
}

.ref-race-prize.rank-2{
    border-color:rgba(207,227,237,.28);
}

.ref-race-prize.rank-3{
    border-color:rgba(214,132,70,.28);
}

.ref-race-my-position{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:16px;
    padding:12px 13px;
    border:1px solid rgba(0,238,214,.22);
    border-radius:15px;
    background:rgba(0,238,214,.055);
}

.ref-race-my-position small{
    display:block;
    margin-bottom:3px;
    color:#8ea9ad;
    font-size:10px;
    font-weight:800;
    letter-spacing:.08em;
}

.ref-race-my-position strong{
    color:#ecffff;
    font-size:14px;
}

.ref-race-my-position b{
    color:#35f1d1;
    font-size:20px;
}

.ref-race-podium{
    display:grid;
    grid-template-columns:1fr 1.08fr 1fr;
    align-items:end;
    gap:8px;
    margin:3px 0 10px;
}

.ref-race-podium-item{
    min-width:0;
    padding:13px 8px 11px;
    border:1px solid rgba(117,181,185,.16);
    border-radius:17px;
    text-align:center;
    background:linear-gradient(180deg,rgba(12,33,36,.9),rgba(3,12,15,.95));
}

.ref-race-podium-item.rank-1{
    min-height:156px;
    border-color:rgba(255,214,68,.4);
    background:
        radial-gradient(circle at 50% 0,rgba(255,203,61,.18),transparent 45%),
        linear-gradient(180deg,rgba(33,30,14,.94),rgba(7,14,15,.98));
}

.ref-race-podium-item.rank-2{
    min-height:136px;
}

.ref-race-podium-item.rank-3{
    min-height:124px;
}

.ref-race-medal{
    display:grid;
    width:38px;
    height:38px;
    margin:0 auto 8px;
    place-items:center;
    border-radius:50%;
    color:#071314;
    background:#dfe9ee;
    font-size:15px;
    font-weight:950;
}

.rank-1 .ref-race-medal{
    background:linear-gradient(135deg,#fff08a,#ffae28);
    box-shadow:0 8px 24px rgba(255,187,35,.2);
}

.rank-3 .ref-race-medal{
    background:linear-gradient(135deg,#edb17e,#b96633);
}

.ref-race-podium-item strong{
    display:block;
    overflow:hidden;
    margin-bottom:4px;
    color:#f4ffff;
    font-size:12px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.ref-race-podium-item small{
    display:block;
    overflow:hidden;
    margin-bottom:9px;
    color:#809a9e;
    font-size:9px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.ref-race-podium-item b{
    color:#43efd4;
    font-size:14px;
}

.ref-race-bottom-list{
    display:grid;
    gap:8px;
    margin-bottom:12px;
}

.ref-race-row{
    display:grid;
    grid-template-columns:38px minmax(0,1fr) auto;
    align-items:center;
    gap:10px;
    padding:11px;
    border:1px solid rgba(117,181,185,.14);
    border-radius:14px;
    background:rgba(3,13,16,.75);
}

.ref-race-row>span{
    display:grid;
    width:34px;
    height:34px;
    place-items:center;
    border-radius:11px;
    color:#9cf7e8;
    background:rgba(0,238,214,.08);
    font-size:12px;
    font-weight:950;
}

.ref-race-row strong{
    display:block;
    overflow:hidden;
    color:#eaffff;
    font-size:12px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.ref-race-row small{
    display:block;
    overflow:hidden;
    margin-top:3px;
    color:#718c91;
    font-size:9px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.ref-race-row b{
    color:#50ebd4;
    font-size:12px;
    white-space:nowrap;
}

.ref-race-actions{
    display:flex;
    justify-content:center;
    margin-top:13px;
}

.ref-race-refresh{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    min-height:38px;
    padding:0 15px;
    border:1px solid rgba(0,238,214,.3);
    border-radius:12px;
    color:#72f5e0;
    background:rgba(0,238,214,.07);
    font:inherit;
    font-size:11px;
    font-weight:900;
}

.ref-race-refresh:disabled{
    opacity:.55;
}

.ref-race-refresh svg{
    width:16px;
    height:16px;
}

.ref-race-empty{
    grid-column:1/-1;
    padding:22px 12px;
    color:#82999d;
    text-align:center;
    font-size:12px;
}

.ref-race-last-season,
.ref-race-my-awards{
    margin-top:15px;
    padding-top:14px;
    border-top:1px solid rgba(117,181,185,.13);
}

.ref-race-subtitle{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:9px;
}

.ref-race-subtitle strong{
    color:#dffffa;
    font-size:12px;
}

.ref-race-subtitle span{
    color:#768e92;
    font-size:10px;
}

.ref-race-history-list{
    display:grid;
    gap:7px;
}

.ref-race-history-item{
    display:grid;
    grid-template-columns:34px minmax(0,1fr) auto;
    align-items:center;
    gap:9px;
    padding:9px 10px;
    border-radius:12px;
    background:rgba(255,255,255,.025);
}

.ref-race-history-item>span{
    color:#ffd564;
    font-size:11px;
    font-weight:950;
}

.ref-race-history-item strong{
    display:block;
    overflow:hidden;
    color:#e8ffff;
    font-size:11px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.ref-race-history-item small{
    display:block;
    margin-top:2px;
    color:#71898d;
    font-size:9px;
}

.ref-race-history-item b{
    color:#55e9d3;
    font-size:10px;
    text-align:right;
}

.ref-race-gift-code{
    display:block;
    margin-top:4px;
    color:#ffe977;
    font-family:monospace;
    font-size:11px;
    letter-spacing:.06em;
}

@media(max-width:430px){
    .ref-race-card{
        padding:15px 12px
    }

    .ref-race-prizes{
        grid-template-columns:repeat(3,minmax(0,1fr))
    }

    .ref-race-prize:nth-child(4),
    .ref-race-prize:nth-child(5){
        grid-column:span 1
    }

    .ref-race-podium{
        gap:5px
    }

    .ref-race-podium-item{
        padding-left:5px;
        padding-right:5px
    }
}