@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@200;300;400;500;600;700;800;900&display=swap');

/* ================= RESET ================= */
*{
    box-sizing:border-box;
    margin:0;
    padding:0;
    font-family:'Kanit',sans-serif;
}

body{
    background:linear-gradient(180deg,#f4f6f9,#e9edf3);
    color:#37353E;
}

/* ================= CONTAINER ================= */
.container{
    max-width:95%;
    margin:40px auto;
    padding:30px;
    background:#fff;
    border-radius:20px;
    box-shadow:0 10px 25px rgba(0,0,0,.1);
}

@media (max-width:768px){
    .container{
        max-width:100%;
        margin:20px auto;
        padding:20px;
    }
}

/* ================= TITLE ================= */
.title{
    text-align:center;
    font-size:48px;   /* เดิม 32px */
    font-weight:700;
}

.subtitle{
    text-align:center;
    margin-top:10px;
    font-size:22px;   /* เดิม 16px */
    font-weight:500;
    margin-bottom: 50px;
}


/* ================= TAB ================= */
.tab-menu{
    display:flex;
    justify-content:center;
    gap:10px;
    margin-top:20px;
}
.tab-menu button{
    padding:14px 28px;
    border-radius:24px;
    border:none;
    background:#faf8f1;
    cursor:pointer;
    font-size:20px;   /* เดิม 16px */
    font-weight:600;
    box-shadow:0 4px 10px rgba(0,0,0,.1);
}
.tab-menu button.active{
    background:#547792;
    color:#fff;
}
.total-player-text{
    text-align:center;
    margin:20px 0;
    font-size:22px;
    font-weight:600;
}

/* ================= CONTENT ================= */
.content{
    display:flex;
    gap:20px;
    margin-top:25px;
}
@media (max-width:1200px){
    .content{ flex-direction:column; }
}

.section{
    flex:1;
    background:#fff;
    border-radius:12px;
    padding:20px;
}
.section-title{
    text-align:center;
    margin-bottom:20px;
    font-size:28px;   /* เดิม 22px */
    font-weight:700;
}

/* =================================================
PLAYER LIST
================================================= */
.player-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:18px;
}

.player-card{
    background:#fff;
    border-radius:18px;
    padding:26px 30px;              /* ใหญ่ขึ้น */
    display:flex;
    align-items:center;
    gap:22px;
    box-shadow:0 10px 22px rgba(0,0,0,.15);
}

/* รูปผู้แข่งขัน */
.player-card img{
    width:120px;                    /* เดิม 90px */
    height:120px;
    object-fit:cover;
    border-radius:16px;
}

/* ชื่อผู้แข่งขัน */
.player-card h3{
    font-size:26px;                 /* เดิม ~18px */
    font-weight:800;
    line-height:1.2;
}

/* รหัส IPSC */
.player-card p{
    font-size:20px;                 /* เดิม ~15px */
    font-weight:600;
    opacity:.85;
}

/* ================= GRID ระยะห่าง ================= */
.player-grid{
    gap:26px;                       /* ช่องห่างมากขึ้น */
}

@media (min-width:992px){
    .player-grid{
        grid-template-columns:repeat(2,1fr);
        max-width:1200px;
        margin:0 auto;
    }
}

@media (min-width:1400px){
    .player-grid{
        grid-template-columns:repeat(3,1fr);
        max-width:1400px;
    }
}

@media (max-width:576px){
    .player-card{
        padding:18px;
        gap:14px;
    }

    .player-card img{
        width:80px;
        height:80px;
    }

    .player-card h3{
        font-size:20px;
    }

    .player-card p{
        font-size:16px;
    }
}

/* =================================================
RANKING
================================================= */
#rankingSection{
    width:100%;
    margin:0 auto;
}

/* ================= SCOREBOARD ================= */
.scoreboard{
    display:grid;
    grid-template-columns:1fr 2fr;
    gap:30px;
}

@media (max-width:992px){
    .scoreboard{
        grid-template-columns:1fr;
    }
}

/* ================= RUNNING BOX ================= */
#runningBox{
    display:flex;
    justify-content:center;
    margin-bottom:20px;
}

/* ================= RANKING CARD ================= */
.ranking-card{
    display:flex;
    align-items:center;
    gap:20px;
    background:#fff;
    border-radius:18px;
    padding:22px 28px;
    width:100%;
    margin:0 auto 18px;
    max-width:1100px;
    box-shadow:0 8px 18px rgba(0,0,0,.12);
}

.ranking-card img{
    width:96px;
    height:96px;
    object-fit:cover;
    border-radius:14px;
}

.rank{
    min-width:90px;
    text-align:center;
    font-size:3.2rem;
    font-weight:900;
}

/* ================= STATUS ================= */
.ranking-card.running{
    color: #333;
    border-left:10px solid #e63946;
}
.ranking-card.next{
    border-left:10px solid #f4c430;
    opacity:.9;
}
.ranking-card.dq{
    background:#D25353;
}

/* ================= TEXT ================= */
.ranking-card h3{
    font-size:1.4rem;
    font-weight:700;
    line-height:1.25;
    word-break:break-word;
}
.ranking-card p{
    font-size:1.2rem;
}

/* ================= RANK 1–3 ================= */
.ranking-card.rank-1,
.ranking-card.rank-2,
.ranking-card.rank-3{
    max-width:1200px;
}

.ranking-card.rank-1{
    background:linear-gradient(135deg,#FFD700,#FFB700);
    color:#4a3700;
}
.ranking-card.rank-2{
    background:linear-gradient(135deg,#E0E0E0,#BDBDBD);
    color:#333;
}
.ranking-card.rank-3{
    background:linear-gradient(135deg,#D7A86E,#B87333);
    color:#3b2500;
}

/* ================= RANK 4+ ================= */
.ranking-card.rank-normal{
    background:#f4f4f4;
    min-height:90px;
}
.ranking-card.rank-normal .rank{
    font-size:2.2rem;
    opacity:.6;
}

/* ================= PODIUM ================= */
.podium{
    display:flex;
    justify-content:center;
    align-items:flex-end;
    gap:26px;
    margin-bottom:30px;
}

.podium-item{
    position:relative;
    width:220px;              /* เดิม 170px */
    padding:24px 18px;
    text-align:center;
    border-radius:22px 22px 0 0;
    box-shadow:0 12px 26px rgba(0,0,0,.2);
}

.podium-item img{
    width:110px;             /* เดิม 80px */
    height:110px;
    border-radius:50%;
    margin-bottom:14px;
    box-shadow:0 2px 3px rgba(0,0,0,.25);
}

.podium-item h3{
    font-size:16px;
    font-weight:600;
}
.podium-item p{
    font-size:15px;
    font-weight:700;
}

/* PODIUM HEIGHT + COLOR */
.podium-1{
    height: 320px;
    order:2;
    background:linear-gradient(135deg,#FFD700,#FFB700);
}
.podium-2{
    height: 270px;
    order:1;
    background:linear-gradient(135deg,#E0E0E0,#BDBDBD);
}
.podium-3{
    height: 245px;
    order:3;
    background:linear-gradient(135deg,#D7A86E,#B87333);
}

/* ================= RANK NUMBER (1–3) ================= */
/* พื้นฐานวงเลข */
.podium-item::before{
    content:attr(data-rank);
    position:absolute;
    top:-18px;
    left:-18px;
    width:70px;
    height:70px;
    border-radius:18px;
    font-size:3rem;
    font-weight:900;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 6px 16px rgba(0,0,0,.35);
}

.podium-1::before{ color:#4a3700; opacity: 85%;}
.podium-2::before{ color:#333; opacity: 82%;}
.podium-3::before{ color:#3b2500; opacity: 80%;}

/* 🥇 อันดับ 1 */
.podium-1::before{
    background:#FFD700;   /* ทอง */
    color:#4a3700;
}

/* 🥈 อันดับ 2 */
.podium-2::before{
    background:#C0C0C0;   /* เงิน */
    color:#333;
}

/* 🥉 อันดับ 3 */
.podium-3::before{
    background:#CD7F32;   /* ทองแดง */
    color:#3b2500;
}

/* ================= MOBILE ================= */
@media (max-width:576px){
    .ranking-card{
        flex-direction:column;
        text-align:center;
        padding:18px;
        max-width:95%;
    }

    .ranking-card img{
        width:72px;
        height:72px;
    }

    .rank{
        min-width:auto;
        font-size:2.6rem;
    }

    .podium{
        flex-direction:column;
        gap:36px; 
    }

    .podium-item{
        width:100%;
        height:auto;
    }

    .podium-item img{
        width:90px;
        height:90px;
    }

    .podium-item h3{
        font-size:20px;
    }

    .podium-item p{
        font-size:18px;
    }
}

/* ================= ADMIN BTN ================= */
.admin-btn{
    position:fixed;
    right:25px;
    bottom:25px;
    padding:12px 22px;
    border-radius:30px;
    background:#547792;
    color:#fff;
    text-decoration:none;
    font-weight:500;
    box-shadow:0 5px 15px rgba(0,0,0,.25);
}
/* ================= PODIUM TITLE ================= */
.podium-title{
    text-align:center;
    font-size:22px;
    font-weight:700;
    margin-bottom:30px;
    color:#37353E;

}
.podium-item h3{
    font-size:24px;          /* เดิม 22px */
    font-weight:800;
    line-height:1.2;
}

.podium-item p{
    font-size:22px;          /* เดิม 20px */
    font-weight:900;
}

.panel-title{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:26px;
    margin:10px 0 16px;
}

/* 🔴 LIVE */
.panel-title.live::before{
    content:"";
    width:14px;
    height:14px;
    border-radius:50%;
    background:#e63946;
    box-shadow:0 0 0 4px rgba(230,57,70,.25);
    animation:pulse 1.2s infinite;
}

/* 🟡 NEXT */
.panel-title.next::before{
    content:"";
    width:14px;
    height:14px;
    border-radius:50%;
    background:#f4c430;
    box-shadow:0 0 0 4px rgba(244,196,48,.25);
}

/* animation live */
@keyframes pulse{
    0%{ box-shadow:0 0 0 0 rgba(230,57,70,.6); }
    100%{ box-shadow:0 0 0 10px rgba(230,57,70,0); }
}

.left-panel{
    background:#f9fafb;
    padding:20px;
    border-radius:20px;
    box-shadow:inset 0 0 0 2px #eee;
}
/* ================= PODIUM TITLE ================= */
.panel-title.podium{
    justify-content:center;
    font-weight:900;
    margin-bottom:26px;
    color:#37353E;
}

/* 🔵 DOT สำหรับอันดับการแข่งขัน */
.panel-title.podium::before{
    content:"";
    width:14px;
    height:14px;
    border-radius:50%;
    background:#547792;
    box-shadow:0 0 0 4px rgba(84,119,146,.25);
}
.panel-title.podium::after{
    content:"";
    flex:1;
    height:2px;
    margin-left:14px;
    background:linear-gradient(
        to right,
        rgba(84,119,146,.6),
        rgba(84,119,146,0)
    );
}
@media (min-width:1200px){
    .panel-title.podium{
        font-size:26px;   /* เท่ากับ LIVE / NEXT */
    }
}

.live-time{
    font-size:1.8rem;
    font-weight:900;
    margin-top:6px;
    letter-spacing:1px;
}

.ranking-card.running .live-time{
    text-shadow:0 2px 2px rgba(0,0,0,.4);
}

.panel-title.live,
.panel-title.next,
.panel-title.podium{
    font-size:26px;
    font-weight:600;
}
.ranking-card.next{
    padding:14px 20px;
    gap:14px;
}

.ranking-card.next img{
    width:72px;
    height:72px;
}

.ranking-card.next h3{
    font-size:1.2rem;
}

.ranking-card.next p{
    font-size:1rem;
}
/* ================= TOTAL PLAYERS TITLE ================= */
/* ================= TOTAL PLAYERS CENTER LINE ================= */
.panel-title.total{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:20px;
    font-size:22px;
    font-weight:500;
    color:#37353E;
    margin:30px 0;
    text-align:center;
}

/* เส้นซ้าย */
.panel-title.total::before,
.panel-title.total::after{
    content:"";
    flex:1;
    height:3px;
    border-radius:2px;
    background:linear-gradient(
        to right,
        rgba(42,157,143,.0),
        rgba(42,157,143,.6),
        rgba(42,157,143,.0)
    );
}

/* ================= MOBILE ================= */
@media (max-width:576px){
    .panel-title.total{
        font-size:20px;
        gap:14px;
    }
}

/* ================= FOOTER EVENT STYLE ================= */
.footer{
    margin-top:80px;
    border-top:5px solid #547792;
    font-family:'Segoe UI',sans-serif;
}

.footer-inner{
    max-width:1300px;
    margin:auto;
    padding:50px 20px 30px;
    text-align:center;
}

/* TITLE WITH LINES */
.footer-title{
    display:flex;
    align-items:center;
    gap:20px;
    margin-bottom:30px;
}

.footer-title span{
    flex:1;
    height:3px;
    background:linear-gradient(to right,transparent,#547792,transparent);
}

.footer-title h2{
    font-size:30px;
    font-weight:900;
    letter-spacing:3px;
    color:#547792;
}

/* LOGOS */
.footer-logos{
    display:flex;
    justify-content:center;
    gap:60px;
    margin:40px 0;
}

.footer-logos img{
    height:140px;
    object-fit:contain;
    filter:drop-shadow(0 10px 20px rgba(0,0,0,.25));
    transition:.3s;
}

.footer-logos img:hover{
    transform:scale(1.05);
}

/* TEXT */
.footer-text h3{
    font-size:26px;
    font-weight:800;
    margin-bottom:10px;
}

.footer-text p{
    font-size:19px;
    line-height:1.7;
    color:#444;
}

/* STUDENTS */
.footer-students{
    margin-top:40px;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:20px;
}

.student-card{
    background:#fff;
    padding:20px;
    border-radius:18px;
    box-shadow:0 8px 20px rgba(0,0,0,.12);
    position:relative;
}

.student-card span{
    position:absolute;
    top:-15px;
    left:20px;
    background:#547792;
    color:#fff;
    font-weight:900;
    padding:8px 14px;
    border-radius:12px;
}

.student-card p{
    font-size:18px;
    font-weight:700;
    margin-top:20px;
}

.student-card small{
    font-size:15px;
    color:#666;
}

/* BOTTOM */
.footer-bottom{
    margin-top:50px;
    background:#547792;
    color:#fff;
    padding:16px;
    font-size:15px;
    font-weight:600;
    text-align:center;
}

/* ================= RESPONSIVE ================= */
@media(max-width:768px){
    .footer-logos{
        gap:30px;
    }

    .footer-logos img{
        height:110px;
    }

    .footer-title h2{
        font-size:24px;
    }
}