/* ==========================================================
   MQ26 LEADERBOARD
========================================================== */

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

body{
    background:#f7f4eb;
}

.mq26-leaderboard{

    max-width:1300px;
    margin:40px auto;
    padding:20px;

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

}

/* ==========================================================
   HEADER
========================================================== */

.mq26-header{

    text-align:center;
    margin-bottom:60px;

}

.mq26-header h1{

    font-size:40px;
    color:#9b6b00;
    font-weight:700;
    letter-spacing:1px;

}

.mq26-subtitle{

    margin-top:12px;
    color:#666;
    font-size:22px;

}

.mq26-updated{

    display:inline-flex;
    align-items:center;
    gap:12px;

    margin-top:30px;

    background:#fff;

    padding:15px 28px;

    border-radius:50px;

    box-shadow:0 10px 25px rgba(0,0,0,.08);

    font-size:13px;

}

.mq26-live-dot{

    width:12px;
    height:12px;

    background:#c60000;

    border-radius:50%;

    animation:pulse 2s infinite;

}

@keyframes pulse{

0%{
transform:scale(1);
opacity:1;
}

50%{
transform:scale(1.4);
opacity:.4;
}

100%{
transform:scale(1);
opacity:1;
}

}

/* ==========================================================
   PODIUM
========================================================== */

.mq26-podium{

    display:flex;

    justify-content:center;

    align-items:stretch;

    gap:30px;

    margin:60px 0;

    flex-wrap:wrap;

}

/* winner cards */

.winner-card{

    width:320px;

    border-radius:24px;

    padding:30px;

    text-align:center;

    position:relative;

    overflow:hidden;

    box-shadow:0 18px 40px rgba(0,0,0,.12);

    transition:.35s;

    opacity:0;

    transform:translateY(60px);
    
    display:flex;
    flex-direction:column;
    justify-content:center;
    
    min-height:340px;

}

.winner-card.show{

    opacity:1;

    transform:translateY(0);

}

.winner-card:hover{

    transform:translateY(-8px);

}

/* ==========================================================
   GOLD
========================================================== */

.gold{
    background:linear-gradient(
        180deg,
        #ffe082,
        #ffd54f,
        #ffc107
    );
}

.gold::before{

    content:"";
    
    position:absolute;
    
    top:0;
    left:-160px;
    
    width:100px;
    height:100%;
    
    background:rgba(255,255,255,.45);
    
    transform:skewX(-25deg);
    
    animation:shimmer 4s infinite;

}


/* ==========================================================
   SILVER
========================================================== */

.silver{
    background:linear-gradient(
    180deg,
    #fafafa,
    #e2e2e2
    );
}

.silver::before{

    content:"";
    
    position:absolute;
    
    top:0;
    left:-160px;
    
    width:100px;
    height:100%;
    
    background:rgba(255,255,255,.45);
    
    transform:skewX(-25deg);
    
    animation:shimmer 4s infinite;

}

/* ==========================================================
   BRONZE
========================================================== */

.bronze{
    background:linear-gradient(
    180deg,
    #dca46d,
    #b87333
    );
}

.bronze::before{

    content:"";
    
    position:absolute;
    
    top:0;
    left:-160px;
    
    width:100px;
    height:100%;
    
    background:rgba(255,255,255,.45);
    
    transform:skewX(-25deg);
    
    animation:shimmer 4s infinite;

}


/* shimmer */

@keyframes shimmer{

0%{
left:-160px;
}

100%{
left:500px;
}

}

/* ==========================================================
   CONTENT
========================================================== */

.emoji{

font-size:60px;

}

.title{

margin-top:18px;

font-size:24px;

font-weight:700;

}

.winner-name{

margin-top:30px;

font-size:30px;

font-weight:700;

color:#333;

word-break:break-word;

}

.winner-id{

margin-top:10px;

font-size:20px;

letter-spacing:1px;

color:#555;

}

/* ==========================================================
   TABLE
========================================================== */

.mq26-consolation{

background:#fff;

border-radius:24px;

padding:35px;

box-shadow:0 15px 35px rgba(0,0,0,.08);

}

.mq26-consolation h2{

text-align:center;

margin-bottom:25px;

color:#9b6b00;

font-size:30px;

}

table{

width:100%;

border-collapse:collapse;

}

thead th{

background:#c79b2f;

color:#fff;

padding:18px;

font-size:18px;

text-align:center;

}

tbody td{

padding:18px;

border-bottom:1px solid #ececec;

text-align:center;

}

tbody tr:nth-child(even){

background:#faf7ef;

}

tbody tr:hover{

background:#fff5cf;

}

/* ==========================================================
   MOBILE
========================================================== */

@media(max-width:1000px){

.mq26-podium{

flex-direction:column;

align-items:center;

}

.gold{

transform:none;

}

.winner-card{

width:100%;
max-width:420px;

}

.mq26-header h1{

font-size:40px;

}

.mq26-subtitle{

font-size:18px;

}

}

@media(max-width:600px){

.mq26-header h1{

font-size:25px;

}

.mq26-consolation{

padding:20px;

overflow-x:auto;

}

table{

min-width:500px;

}

}