html,
body{
    margin:0;
    padding:0;
    width:100%;
    height:100%;
    overflow:hidden;

    font-family: "Segoe UI", sans-serif;

    background:
        linear-gradient(
            rgba(0,0,0,0.65),
            rgba(0,0,0,0.75)
        ),
        url('/pharmo/img/bg-stage.webp');

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

    color:#fff;
}

/* FULLSCREEN WRAPPER */
.board-wrapper{
    width:100vw;
    height:100vh;

    display:flex;
    flex-direction:column;

    padding:2vh 2vw;
}

/* =========================================
HEADER (COMPACT)
========================================= */

.board-header{
    flex-shrink:0;

    text-align:center;

    padding:4px 0 2px;

    margin-bottom:0;

    line-height:1.1;
}

.board-title{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    font-size:clamp(1.3rem, 2.4vw, 2.4rem);

    font-weight:700;
    letter-spacing:.5px;

    color:#E8EDF2;

    margin-bottom:2px;
}

/* logo */
.board-title img{
    height:clamp(30px, 3.8vw, 52px);

    width:auto;

    object-fit:contain;
}

.board-subtitle{
    font-size:clamp(.72rem, 1vw, 1rem);

    opacity:.9;

    color:#FFEF91;

    letter-spacing:.4px;

    margin:0;
}
/* GRID */
.board-grid{
    flex:1;

    display:grid;

    grid-template-columns:
        1.2fr
        1fr
        1fr;

    gap:1.5vw;

    min-height:0;
}

/* GLASS CARD */
.glass-card{
    width:100%;
    height:100%;	
	
    background: rgba(255,255,255,0.08);

    backdrop-filter: blur(12px);

    border:1px solid rgba(255,255,255,0.15);

    border-radius:24px;

    padding:1.5rem;

    overflow:hidden;

    display:flex;
    flex-direction:column;
}

/* CARD TITLE */
.card-title-board{
    font-size:clamp(.95rem, 1.5vw, 1.35rem);

    font-weight:700;

    margin-bottom:.75rem;

    line-height:1.1;

    color:#ffd54f;
}

/* LEADER ITEMS */
.leader-title{
    font-size:1.4rem;
    font-weight:700;
    margin-bottom:20px;
}

.leader-item{
    display:flex;
    align-items:flex-start;
    gap:16px;

    padding:14px 0;

    border-bottom:1px solid rgba(255,255,255,.08);
}

.leader-item:last-child{
    border-bottom:none;
}

.leader-rank{
    width:60px;
    min-width:60px;

    text-align:center;

    font-size:1.2rem;
    font-weight:700;
}

.leader-content{
    flex:1;
}

.leader-name{
    font-size:1.05rem;
    font-weight:700;
}

.leader-sub{
    color:#cfcfcf;
    margin-top:4px;
}

.leader-points{
    margin-top:8px;
    display:inline-block;

    background:#ffffff22;

    padding:6px 12px;

    border-radius:50px;

    font-size:.9rem;
}

/* RECENT RESULTS */
.results-scroll{
    flex:1;
    overflow:hidden;
    position:relative;
}

.results-inner{
    animation: scrollUp 30s linear infinite;
}

.result-box{
    margin-bottom:18px;

    padding:14px;

    border-radius:16px;

    background:rgba(255,255,255,0.05);
}

.result-title{
    font-weight:700;
    margin-bottom:10px;
}

/* =========================================
STYLES
========================================= */

.main-slider{
    flex:1;
    position:relative;
    overflow:hidden;
    min-height:0;	
}

.screen-slide{
    width:100%;
    height:100%;

    position:absolute;
    inset:0;

    opacity:0;
    visibility:hidden;

    transition:opacity .8s ease;

    padding:10px;

    display:flex;
    align-items:stretch;
    justify-content:center;
}

.active-slide{
    opacity:1;
    visibility:visible;
    z-index:5;
}

.carousel,
.carousel-inner,
.carousel-item{
    height:100%;
}

.carousel-item{
    transition: transform .6s ease-in-out;
}

.section-header{
    font-size:2rem;
    font-weight:700;
    margin-bottom:28px;
}

.leader-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
}

.leader-box{
    background:rgba(255,255,255,.06);
    border-radius:20px;
    padding:22px;
}

.dual-grid{
    width:100%;
    height:100%;

    display:grid;
    grid-template-columns:1.2fr .8fr;
    gap:24px;
}

.event-title{
    font-size:1.3rem;
    font-weight:700;
    margin-bottom:30px;
}

.result-row{
    display:flex;
    gap:18px;
    margin-bottom:26px;
	border-bottom: 1px solid rgba(255,255,255,.08);
}

.result-pos{
    width:50px;
    min-width:50px;
    font-size:1.4rem;
}

.result-content{
    flex:1;
}

.winner-line{
    margin-bottom:14px;
}

.participant-text{
    color:#d7d7d7;
    font-size:.95rem;
}

.full-height-card{
    display:flex;
    flex-direction:column;
}

/* =========================================
EVENT RESULT TABLE DESIGN
========================================= */

.table{
    --bs-table-bg: transparent !important;
    --bs-table-color: #fff !important;
    --bs-table-border-color: rgba(255,255,255,.08);

    color:#fff;
    margin-bottom:0;
    border-color:rgba(255,255,255,.08);
}

/* HEADER */
.table thead th{
    position:sticky;
    top:0;
    z-index:5;

    background:
        linear-gradient(
            180deg,
            rgba(40,40,40,.95),
            rgba(22,22,22,.95)
        ) !important;

    color:#ffd54f;

    font-size:1rem;
    font-weight:700;
    letter-spacing:.5px;

    padding:16px 18px;

    border-bottom:1px solid rgba(255,255,255,.12);

    backdrop-filter:blur(12px);
}

/* BODY CELLS */
.table tbody td{
    background:rgba(255,255,255,.035) !important;

    padding:16px 18px;

    vertical-align:top;

    border-color:rgba(255,255,255,.06);

    transition:all .25s ease;
}

/* ALTERNATE ROW */
.table tbody tr:nth-child(even) td{
    background:rgba(255,255,255,.055) !important;
}

/* HOVER EFFECT */
.table tbody tr:hover td{
    background:rgba(255,255,255,.09) !important;
}

/* EVENT COLUMN */
.event-cell{
    background:
        linear-gradient(
            135deg,
            rgba(255,213,79,.12),
            rgba(255,255,255,.02)
        ) !important;

    border-right:1px solid rgba(255,255,255,.08);
}

/* CATEGORY COLUMN */
.category-cell{
    background:rgba(255,255,255,.04) !important;
    text-align:center;
}

/* WINNER COLUMN */
.table tbody td strong{
    color:#fff;
    font-weight:700;
}

/* PARTICIPANT TEXT */
.table .text-muted{
    color:#d8d8d8 !important;
    line-height:1.5;
}

/* TABLE OUTER LOOK */
.table-scroll{
    flex:1;
    overflow:hidden;

    border-radius:18px;

    background:rgba(0,0,0,.18);

    border:1px solid rgba(255,255,255,.08);

    position:relative;
}

.table-scroll > table{
    margin-bottom:0;
}
#scrollBoard{
    height:100%;
}
/* BADGES */
.badge{
    font-size:.78rem;
    font-weight:600;

    padding:8px 12px;

    border-radius:50px;
}

/* MALE */
.bg-primary{
    background:
        linear-gradient(
            135deg,
            #1976d2,
            #42a5f5
        ) !important;
}

/* FEMALE */
.bg-danger{
    background:
        linear-gradient(
            135deg,
            #d81b60,
            #ff4d8d
        ) !important;
}

/* DEFAULT */
.bg-secondary{
    background:
        linear-gradient(
            135deg,
            #616161,
            #9e9e9e
        ) !important;
}

.table-scroll{
    flex:1;
    overflow:hidden;
}

.result-table{
    width:100%;
    border-collapse:collapse;
    color:#fff;
}

.result-table thead th{
    position:sticky;
    top:0;
    z-index:2;

    background:rgba(20,20,20,.95);
    backdrop-filter:blur(10px);
}

.result-table th{
    background:rgba(255,255,255,.12);
    padding:16px;
    font-size:1rem;
}

.result-table td{
    padding:14px 16px;
    border-bottom:1px solid rgba(255,255,255,.08);
}

.table-event{
    font-weight:600;
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
/* =========================================
FOOTER (THIN)
========================================= */

.footer{
    flex-shrink:0;

    padding:1px 0 0;

    margin-top:2px;

    line-height:1;

    opacity:.9;
}

.footer .credits{
    text-align:center;

    font-size:clamp(.55rem, .7vw, .72rem);

    color:#FFEF91;

    margin:0;

    padding:0;
}

.footer .credits a{
    color:#ffffff;

    text-decoration:none;
}

/* RESPONSIVE */
@media(max-width:1200px){

    .leader-grid{
        grid-template-columns:1fr;
    }

    .dual-grid{
        grid-template-columns:1fr;
    }

}

@media(max-width:992px){

    .board-grid{
        grid-template-columns:1fr;
    }

    body{
        overflow:auto;
    }

    .board-wrapper{
        height:auto;
    }
}

@keyframes scrollUp{

    0%{
        transform:translateY(0);
    }

    100%{
        transform:translateY(-50%);
    }
}