/* ========================================
   GLOBAL
   ======================================== */

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


body {
    min-height: 100vh;

    background:
        linear-gradient(
            rgba(5, 7, 12, 0.25),
            rgba(5, 7, 12, 0.45)
        ),
        url("../images/ambessa-wallpaper.jpg");

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

    color: #ffffff;

    font-family:
        Arial,
        Helvetica,
        sans-serif;
}

/* ========================================
   PAGE WALLPAPERS
   ======================================== */

/* EVENTS */

.events-body {
    background-image:
        linear-gradient(
            rgba(5, 7, 12, 0.25),
            rgba(5, 7, 12, 0.45)
        ),
        url("../images/ambessa-wallpaper.jpg");
}


/* STREAMERS */

.streamers-body {
    background-image:
        linear-gradient(
            rgba(5, 7, 12, 0.25),
            rgba(5, 7, 12, 0.45)
        ),
        url("../images/ambessa-wallpaper.jpg");
}


/* COACHING */

.coaching-body {
    background-image:
        linear-gradient(
            rgba(5, 7, 12, 0.25),
            rgba(5, 7, 12, 0.45)
        ),
        url("../images/ambessa-wallpaper.jpg");
}


/* ========================================
   NAVBAR
   ======================================== */

.navbar {
    height: 72px;

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

    position: relative;
    z-index: 100;

    padding: 0 40px;

    background:
        linear-gradient(
            180deg,
            rgba(12, 17, 25, 0.78) 0%,
            rgba(8, 13, 21, 0.72) 100%
        );

    border-bottom:
        1px solid
        rgba(210, 45, 55, 0.75);

    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);

    box-shadow:
        0 6px 22px rgba(0, 0, 0, 0.25),
        inset 0 -1px 0 rgba(255, 75, 85, 0.08);

    filter:
    drop-shadow(
        0 3px 5px
        rgba(210, 25, 35, 0.10)
    );
}

.navbar::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -1px;

    width: 100%;
    height: 3px;

    pointer-events: none;

    background:
        radial-gradient(
            ellipse 150px 3px at 50% 50%,
            rgba(255, 255, 255, 1) 0%,
            rgba(255, 120, 125, 0.95) 8%,
            rgba(235, 45, 55, 0.85) 28%,
            rgba(190, 20, 30, 0.42) 55%,
            transparent 78%
        );
}


.logo {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 2px;
}


nav {
    position: relative;

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

    gap: 35px;

    width: 500px;
    padding-right: 60px;
}


nav a {
    color: #8b91a1;

    text-decoration: none;

    font-size: 14px;
    font-weight: 600;

    transition: 0.2s;
}


nav a:hover {
    color: #ffffff;
}


nav a.active {
    color: #ffffff;
}



/* ========================================
   COUNTDOWN
   ======================================== */

.countdown {
    position: absolute;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 4px;

    white-space: nowrap;
}


/* EVENT ENDS IN */

.countdown-label {
    color: #858b9b;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 1.8px;

    line-height: 1;

    text-align: center;
}


/* 36 | 05 | 15 | 04 */

.countdown-time {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 12px;
}


/* EACH NUMBER + LABEL */

.countdown-unit {
    min-width: 42px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


/* LARGE NUMBERS */

.countdown-number {
    color: #ffffff;

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

    line-height: 1;

    letter-spacing: 0.5px;

    font-variant-numeric: tabular-nums;

    text-shadow:
        0 0 10px rgba(225, 45, 55, 0.18);
}


/* DAYS / HOURS / MINUTES / SECONDS */

.countdown-unit-label {
    margin-top: 3px;

    color: #737989;

    font-size: 6px;
    font-weight: 700;

    letter-spacing: 0.8px;

    line-height: 1;

    text-align: center;
}


/* VERTICAL SEPARATORS */

.countdown-divider {
    width: 1px;
    height: 25px;

    background:
        linear-gradient(
            180deg,
            transparent 0%,
            rgba(180, 75, 80, 0.18) 15%,
            rgba(220, 75, 80, 0.48) 50%,
            rgba(180, 75, 80, 0.18) 85%,
            transparent 100%
        );
}



/* ========================================
   HOME PAGE
   ======================================== */

.home {
    min-height: calc(100vh - 72px);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


.home h1 {
    font-size: 42px;

    letter-spacing: 2px;

    margin-bottom: 12px;
}


.home p {
    color: #777e8f;

    font-size: 15px;
}



/* ========================================
   EVENTS PAGE
   ======================================== */

.events-page {
    width: 100%;

    padding-top: 0px;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 64px;
}


.page-heading {
    margin-bottom: 35px;
}


.page-heading h1 {
    font-size: 30px;

    letter-spacing: 1px;

    margin-bottom: 8px;
}


.page-heading p {
    color: #747b8c;

    font-size: 14px;
}



/* ========================================
   LEADERBOARD GRID
   ======================================== */

.leaderboards {
    width: min(1650px, calc(100% - 50px));

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 24px;

    align-items: start;
}



/* ========================================
   BASE LEADERBOARD CARD
   ======================================== */

.leaderboard-card {
    width: 100%;
    min-width: 0;

    position: relative;

    background:
        linear-gradient(
            180deg,
            rgba(12, 17, 25, 0.78) 0%,
            rgba(8, 13, 21, 0.72) 100%
        );

    border:
        1px solid
        rgba(150, 160, 180, 0.32);

    border-radius: 24px;

    overflow: hidden;

    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);

    box-shadow:
        0 18px 45px
        rgba(0, 0, 0, 0.42),

        inset 0 1px 0
        rgba(255, 255, 255, 0.05);
}



/* ========================================
   COLORED CARD EDGES
   ======================================== */

/* AMBESSA GAMES */

.ambessa-card {
    border-color:
        rgba(226, 166, 63, 0.72);

    box-shadow:
        0 0 14px
        rgba(226, 166, 63, 0.10),

        0 18px 45px
        rgba(0, 0, 0, 0.42),

        inset 0 0 18px
        rgba(226, 166, 63, 0.025);
}


/* HIGHEST LP */

.lp-card {
    border-color:
        rgba(105, 181, 255, 0.78);

    box-shadow:
        0 0 15px
        rgba(80, 158, 255, 0.12),

        0 18px 45px
        rgba(0, 0, 0, 0.42),

        inset 0 0 18px
        rgba(90, 150, 255, 0.03);
}


/* LP GAINED */

.gained-card {
    border-color:
        rgba(76, 218, 167, 0.76);

    box-shadow:
        0 0 15px
        rgba(76, 218, 167, 0.11),

        0 18px 45px
        rgba(0, 0, 0, 0.42),

        inset 0 0 18px
        rgba(76, 218, 167, 0.03);
}



/* ========================================
   EDGE GLINTS
   ======================================== */

.leaderboard-card::before {
    content: "";

    position: absolute;
    inset: 0;

    border-radius: 24px;

    pointer-events: none;

    z-index: 20;
}



/* ========================================
   AMBESSA GAMES - GOLD GLINTS
   ======================================== */

.ambessa-card::before {
    background:

        radial-gradient(
            ellipse 45px 4px at 72% 0%,
            rgba(255, 255, 255, 1) 0%,
            rgba(255, 235, 180, 0.95) 10%,
            rgba(235, 175, 65, 0.65) 35%,
            transparent 75%
        ),

        radial-gradient(
            ellipse 4px 42px at 0% 28%,
            rgba(255, 255, 255, 0.95) 0%,
            rgba(255, 225, 155, 0.85) 12%,
            rgba(225, 165, 55, 0.55) 38%,
            transparent 75%
        ),

        radial-gradient(
            ellipse 38px 4px at 88% 100%,
            rgba(255, 255, 255, 0.90) 0%,
            rgba(255, 225, 160, 0.80) 12%,
            rgba(225, 165, 55, 0.45) 40%,
            transparent 75%
        );
}



/* ========================================
   HIGHEST LP - BLUE GLINTS
   ======================================== */

.lp-card::before {
    background:

        radial-gradient(
            ellipse 45px 4px at 78% 0%,
            rgba(255, 255, 255, 1) 0%,
            rgba(205, 235, 255, 0.95) 10%,
            rgba(85, 170, 255, 0.70) 35%,
            transparent 75%
        ),

        radial-gradient(
            ellipse 4px 42px at 0% 35%,
            rgba(255, 255, 255, 0.95) 0%,
            rgba(190, 225, 255, 0.85) 12%,
            rgba(75, 160, 255, 0.55) 38%,
            transparent 75%
        ),

        radial-gradient(
            ellipse 38px 4px at 84% 100%,
            rgba(255, 255, 255, 0.90) 0%,
            rgba(195, 230, 255, 0.80) 12%,
            rgba(75, 160, 255, 0.50) 40%,
            transparent 75%
        );
}



/* ========================================
   LP GAINED - GREEN GLINTS
   ======================================== */

.gained-card::before {
    background:

        radial-gradient(
            ellipse 45px 4px at 84% 0%,
            rgba(255, 255, 255, 1) 0%,
            rgba(205, 255, 230, 0.95) 10%,
            rgba(65, 225, 160, 0.70) 35%,
            transparent 75%
        ),

        radial-gradient(
            ellipse 4px 42px at 0% 42%,
            rgba(255, 255, 255, 0.95) 0%,
            rgba(195, 255, 225, 0.85) 12%,
            rgba(55, 215, 150, 0.55) 38%,
            transparent 75%
        ),

        radial-gradient(
            ellipse 38px 4px at 90% 100%,
            rgba(255, 255, 255, 0.90) 0%,
            rgba(195, 255, 225, 0.80) 12%,
            rgba(55, 215, 150, 0.50) 40%,
            transparent 75%
        );
}

/* REMOVE CARD EDGE GLINTS */

.ambessa-card::before,
.lp-card::before,
.gained-card::before {
    background: none;
}

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

.leaderboard-title {
    height: 120px;

    position: relative;

    display: flex;
    align-items: center;

    padding: 0;

    border-bottom:
        1px solid
        rgba(100, 110, 130, 0.22);

    overflow: hidden;
}


/* ========================================
   AMBESSA HEADER CHARACTER
   ======================================== */

.ambessa-header-art {
    position: absolute;

    left: -150px;
    bottom: -185px;

    width: 520px;
    height: auto;

    object-fit: contain;

    z-index: 2;

    pointer-events: none;

    filter:
        drop-shadow(
            0 8px 12px
            rgba(0, 0, 0, 0.8)
        );
}

/* LEFT COLUMN - AMBESSA GAMES CUTOUT */

.ambessa-games-art {
    left: auto;
    right: -10px;
    bottom: -70px;
    width: 185px;
}

/* RIGHT COLUMN - LP GAINED CUTOUT */

.ambessa-gained-art {
    left: auto;
    right: -10px;
    bottom: -120px;
    width: 220px;
}


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

.leaderboard-heading-text {
    position: absolute;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    width: max-content;

    text-align: center;

    z-index: 5;
}


.leaderboard-title h2 {
    margin: 0;

    color: #ffffff;

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

    text-transform: uppercase;

    letter-spacing: 1.4px;

    line-height: 1;

    text-align: center;

    white-space: nowrap;

    text-shadow:
    0 3px 3px rgba(0, 0, 0, 1),
    0 0 6px rgba(0, 0, 0, 1),
    0 0 14px rgba(0, 0, 0, 0.9);
}


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

.leaderboard-subtitle {
    display: block;

    margin: 0;

    color: #8b93a3;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 1.2px;

    line-height: 1;

    text-transform: uppercase;

    text-align: center;

    white-space: nowrap;

    text-shadow:
    0 2px 3px rgba(0, 0, 0, 1),
    0 0 6px rgba(0, 0, 0, 1),
    0 0 10px rgba(0, 0, 0, 0.9);
}



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

.table-header {
    display: grid;

    grid-template-columns:
        20px
        minmax(130px, 1fr)
        106px
        62px
        84px;

    column-gap: 8px;
    align-items: center;

    height: 42px;

    padding: 0 14px;

    color: #b7bfce;

    font-size: 8px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 0.45px;

    border-bottom:
        1px solid
        rgba(100, 110, 130, 0.18);
}

/* HEADER PILLS */

.table-header span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: calc(100% - 6px);
    height: 20px;

    justify-self: center;

    padding: 0 7px;

    border-radius: 10px;

    background:
        linear-gradient(
            180deg,
            rgba(29, 35, 48, 0.95),
            rgba(18, 23, 34, 0.95)
        );

    border:
        1px solid
        rgba(110, 125, 150, 0.32);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 2px 6px rgba(0, 0, 0, 0.20);

    color: #aeb6c5;

    white-space: nowrap;
}


/* AMBESSA GAMES - GOLD HEADER PILLS */

.ambessa-card .table-header span {
    background:
        linear-gradient(
            180deg,
            rgba(55, 43, 22, 0.92),
            rgba(31, 27, 20, 0.92)
        );

    border-color:
        rgba(226, 166, 63, 0.48);

    color: #d8c69e;
}


/* HIGHEST LP - BLUE HEADER PILLS */

.lp-card .table-header span {
    background:
        linear-gradient(
            180deg,
            rgba(20, 45, 68, 0.92),
            rgba(16, 30, 45, 0.92)
        );

    border-color:
        rgba(80, 158, 255, 0.48);

    color: #b9d7ef;
}


/* LP GAINED - GREEN HEADER PILLS */

.gained-card .table-header span {
    background:
        linear-gradient(
            180deg,
            rgba(17, 55, 47, 0.92),
            rgba(14, 35, 31, 0.92)
        );

    border-color:
        rgba(76, 218, 167, 0.48);

    color: #b6dfd0;
}


/* SMALL # HEADER PILL */

.table-header span:first-child {
    width: 20px;
    padding: 0;
    border-radius: 10px;
}


.table-header span:nth-child(2),
.table-header span:nth-child(3),
.table-header span:nth-child(4),
.table-header span:nth-child(5) {
    text-align: center;
}



/* ========================================
   PLAYER ROW
   ======================================== */

.player-row {
    display: grid;

    grid-template-columns:
        20px
        minmax(130px, 1fr)
        96px
        66px
        96px;

    column-gap: 5px;
    align-items: center;

    min-height: 56px;

    margin: 7px 8px;
    padding: 0 6px;

    border-radius: 14px;

    background:
        linear-gradient(
            90deg,
            rgba(35, 39, 54, 0.72) 0%,
            rgba(24, 29, 41, 0.68) 100%
        );

    border: 1px solid rgba(130, 140, 160, 0.10);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.025),
        0 3px 10px rgba(0, 0, 0, 0.16);

    transition:
        background 0.15s ease,
        transform 0.15s ease;
}

.player-row:hover {
    background:
        linear-gradient(
            90deg,
            rgba(45, 49, 65, 0.82) 0%,
            rgba(31, 36, 49, 0.78) 100%
        );

    transform: translateY(-1px);
}



/* ========================================
   POSITION
   ======================================== */

.player-position {
    color: #666e80;

    font-size: 11px;
    font-weight: bold;
}



/* ========================================
   PLAYER NAME
   ======================================== */

.player-name {
    display: flex;
    align-items: center;

    gap: 6px;

    min-width: 0;

    font-size: 12px;
    font-weight: 600;
}


.player-icon {
    width: 40px;
    height: 40px;

    object-fit: cover;

    flex-shrink: 0;

    border-radius: 5px;

    border:
        1px solid
        rgba(140, 150, 170, 0.22);

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


.player-name-text {
    min-width: 0;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;

    line-height: 1.15;

    overflow: hidden;
}


.player-game-name {
    display: block;

    width: 100%;

    color: #ffffff;

    font-size: 12px;
    font-weight: 600;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.player-tag {
    display: block;

    width: 100%;

    margin-top: 3px;
    margin-left: 0;

    color: #697286;

    font-size: 9px;
    font-weight: 600;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}



/* ========================================
   PLAYER VALUE
   ======================================== */

.player-value {
    text-align: center;

    font-size: 11px;
    font-weight: bold;
}



/* ========================================
   HIGHEST LP VALUE
   ======================================== */

#lp-list .player-value {
    text-align: center;
    line-height: 1.15;
}


.rank-title,
.rank-lp {
    display: block;

    text-align: center;

    white-space: nowrap;
}



/* ========================================
   WINRATE
   ======================================== */

.player-winrate {
    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 0;

    padding-left: 2px;
    padding-right: 2px;
}


.winrate-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 0;
    width: fit-content;
    height: 25px;

    padding: 0 7px;

    border-radius: 6px;

    color: #ffffff;

    font-size: 13px;
    font-weight: 700;

    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.06);
}



/* ========================================
   WINRATE COLORS
   ======================================== */

.winrate-gray {
    background:
        rgba(100, 108, 122, 0.16);

    border:
        1px solid
        rgba(145, 153, 168, 0.42);

    box-shadow:
        inset 0 0 8px
        rgba(150, 160, 175, 0.04);
}


.winrate-blue {
    background:
        rgba(0, 125, 185, 0.18);

    border:
        1px solid
        rgba(30, 175, 235, 0.70);

    box-shadow:
        inset 0 0 8px
        rgba(20, 165, 230, 0.08),

        0 0 7px
        rgba(20, 165, 230, 0.08);
}


.winrate-purple {
    background:
        rgba(125, 45, 180, 0.20);

    border:
        1px solid
        rgba(180, 75, 225, 0.72);

    box-shadow:
        inset 0 0 8px
        rgba(175, 70, 225, 0.08),

        0 0 7px
        rgba(175, 70, 225, 0.08);
}


.winrate-gold {
    background:
        rgba(165, 105, 20, 0.20);

    border:
        1px solid
        rgba(220, 155, 45, 0.72);

    box-shadow:
        inset 0 0 8px
        rgba(220, 155, 45, 0.08),

        0 0 7px
        rgba(220, 155, 45, 0.08);
}


.winrate-red {
    background:
        rgba(165, 35, 45, 0.20);

    border:
        1px solid
        rgba(225, 65, 75, 0.75);

    box-shadow:
        inset 0 0 8px
        rgba(225, 65, 75, 0.08),

        0 0 7px
        rgba(225, 65, 75, 0.08);
}



/* ========================================
   MOST PLAYED
   ======================================== */

.most-played {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 3px;

    min-width: 0;
}


.champion-icon {
    width: 30px;
    height: 30px;

    object-fit: cover;

    flex-shrink: 0;

    border-radius: 4px;

    border:
        1px solid
        rgba(140, 150, 170, 0.30);

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


.champion-placeholder {
    width: 24px;
    height: 24px;

    flex-shrink: 0;

    border-radius: 4px;

    border:
        1px solid
        rgba(120, 130, 150, 0.18);

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



/* ========================================
   LOADING
   ======================================== */

.loading {
    min-height: 58px;

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

    color: #646b7b;

    font-size: 12px;
}



/* ========================================
   RESPONSIVE - TABLET / SMALL DESKTOP
   ======================================== */

@media (max-width: 1200px) {

    .leaderboards {
        width:
            min(
                900px,
                calc(100% - 48px)
            );

        grid-template-columns: 1fr;

        gap: 24px;
    }


    .leaderboard-card {
        width: 100%;

        max-width: 480px;

        justify-self: center;
    }


    .table-header,
    .player-row {
        grid-template-columns:
            28px
            minmax(135px, 1fr)
            72px
            64px
            96px;

        column-gap: 7px;

        padding-left: 18px;
        padding-right: 18px;
    }


    .player-row {
        min-height: 66px;
    }


    .player-icon {
        width: 30px;
        height: 30px;
    }


    .player-game-name {
        font-size: 15px;
    }


    .player-tag {
        font-size: 11px;
    }


    .player-value {
        font-size: 13px;
    }


    .champion-icon,
    .champion-placeholder {
        width: 27px;
        height: 27px;
    }


    .most-played {
        gap: 4px;
    }

}



/* ========================================
   TABLET
   ======================================== */

@media (max-width: 900px) {

    .countdown {
        display: none;
    }


    .events-page {
        padding-top: 40px;
    }

}



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

@media (max-width: 600px) {

    .navbar {
        padding: 0 20px;
    }


    nav {
        gap: 15px;
    }


    .logo {
        font-size: 14px;
    }


    .events-page {
        padding:
            30px
            15px;
    }


    .leaderboards {
        width: 100%;
    }


    .leaderboard-card {
        width: 100%;

        border-radius: 18px;
    }


    .leaderboard-card::before {
        border-radius: 18px;
    }


    .leaderboard-title {
        height: 76px;

        padding:
            0
            16px;
    }



    .leaderboard-title h2 {
        font-size: 15px;
    }


    .table-header,
    .player-row {
        grid-template-columns:
            20px
            minmax(100px, 1fr)
            54px
            50px
            76px;

        column-gap: 3px;

        padding-left: 8px;
        padding-right: 8px;
    }


    .table-header {
        font-size: 7px;

        letter-spacing: 0.2px;
    }


    .player-row {
        min-height: 62px;
    }


    .player-name {
        gap: 5px;
    }


    .player-game-name {
        font-size: 11px;
    }


    .player-tag {
        font-size: 9px;
    }


    .player-icon {
        width: 26px;
        height: 26px;
    }


    .player-value {
        font-size: 10px;
    }


    .winrate-pill {
        min-width: 37px;
        height: 24px;

        padding:
            0
            4px;

        font-size: 9px;
    }


    .champion-icon,
    .champion-placeholder {
        width: 22px;
        height: 22px;
    }


    .most-played {
        gap: 2px;
    }

}

/* =========================================
   RANK ICONS
========================================= */

/* =========================================
   RANK ICONS
========================================= */

#lp-list .player-value.rank-value {
    display: grid;

    grid-template-columns:
        36px
    15px
    48px;

    align-items: center;
    justify-content: center;

    column-gap: 2px;

    width: 100%;
    white-space: nowrap;
}


/* RANK ICON */

#lp-list .player-value.rank-value > .rank-icon {
    grid-column: 1;

    width: 36px;
    height: 36px;

    object-fit: contain;
    display: block;

    justify-self: center;
}


/* DIVISION + LP CONTAINER */

#lp-list .player-value.rank-value > .rank-text-group {
    display: contents;
}


/* I / II / III / IV */

#lp-list .player-value.rank-value .rank-division {
    grid-column: 2;

    justify-self: start;

    font-size: 10px;
    font-weight: 800;
    line-height: 1;

    white-space: nowrap;
}


/* LP */

#lp-list .player-value.rank-value .rank-lp {
    grid-column: 3;

    justify-self: start;

    margin: 7px;

    color: #ffffff;

    font-size: 12px;
    font-weight: 700;
    line-height: 1;

    white-space: nowrap;
}

#lp-list .rank-iron {
    color: #8d9298;
}

#lp-list .rank-bronze {
    color: #c17b4a;
}

#lp-list .rank-silver {
    color: #b9cbd4;
}

#lp-list .rank-gold {
    color: #e7b94f;
}

#lp-list .rank-platinum {
    color: #55c7c4;
}

#lp-list .rank-emerald {
    color: #43d98b;
}

#lp-list .rank-diamond {
    color: #4fa9ff;
}

/* =========================================
   SIDE LEADERBOARD RANK ICONS
========================================= */

#games-list .side-rank-value,
#gained-list .side-rank-value {
    display: grid;

    grid-template-columns:
        24px
        48px;

    align-items: center;
    justify-content: center;

    column-gap: 10px;

    width: 100%;

    white-space: nowrap;
}


/* RANK ICON */

#games-list .side-rank-value .rank-icon,
#gained-list .side-rank-value .rank-icon {
    width: 36px;
    height: 36px;

    object-fit: contain;
    display: block;

    justify-self: center;
}


/* NUMBER */

#games-list .side-rank-number,
#gained-list .side-rank-number {
    justify-self: start;

    color: #ffffff;

    font-size: 11px;
    font-weight: 700;

    line-height: 1;

    white-space: nowrap;
}

/* =========================================
   PLAYER PROFILE LINKS
   ========================================= */

.player-profile-link {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.player-profile-link:hover {
    text-decoration: underline;
}

/* =========================================
   AMBESSA MAINS LP RACE LOGO
   ========================================= */

.event-logo {
    position: relative;
    z-index: 50;

    width: 100%;
    height: 160px;

    margin: 0 auto 18px;

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

    overflow: visible;
    pointer-events: none;
}

.event-logo img {
    display: block;

    width: 500px;
    max-width: 42vw;
    height: auto;

    object-fit: contain;

    position: relative;
    z-index: 51;

    filter:
        drop-shadow(0 6px 12px rgba(0, 0, 0, 0.75))
        drop-shadow(0 0 8px rgba(190, 20, 30, 0.20));
}

/* =========================
   DISCORD NAV BUTTON
========================= */

.discord-button {
    position: absolute;

    right: 0;
    top: 50%;

    transform: translateY(-50%);

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

    padding: 0;
    margin: 0;

    text-decoration: none;
}

.discord-button img {
    display: block;

    width: 125px;
    height: auto;

    transition:
        transform 0.2s ease,
        filter 0.2s ease;
}

.discord-button:hover img {
    transform: scale(1.06);
    filter: brightness(1.15);
}

.discord-button:active img {
    transform: scale(0.97);
}

/* =========================================
   MIDDLE COLUMN — NORMAL RANKS
   ========================================= */

#lp-list .player-value.rank-value {
    grid-template-columns: 36px 12px 48px;
    column-gap: 0;
}

#lp-list .player-value.rank-value .rank-lp {
    margin: 0;
}


/* =========================================
   HIGHEST LP — RANK / LP SPACING
   ========================================= */

/* Keep ALL rank emblems in exactly the same position */
#lp-list .player-value.rank-value {
    display: grid;
    grid-template-columns: 36px 16px 48px;
    align-items: center;
    justify-content: center;
    column-gap: 0;
}

/* Rank emblem */
#lp-list .player-value.rank-value .rank-icon {
    grid-column: 1;
    justify-self: center;
}

/* Diamond and below:
   division sits after emblem */
#lp-list .player-value.rank-value .rank-division {
    grid-column: 2;
    justify-self: start;
}

/* Diamond and below:
   give LP MORE separation from emblem */
#lp-list .player-value.rank-value .rank-lp {
    grid-column: 3;
    justify-self: start;
    margin-left: 4px;
}


/* =========================================
   MASTER+ ONLY
   ========================================= */

/* Do NOT move the emblem.
   Move only the LP into the division column. */
#lp-list .player-value.rank-value.master-rank .rank-lp,
#lp-list .player-value.rank-value.grandmaster-rank .rank-lp,
#lp-list .player-value.rank-value.challenger-rank .rank-lp {
    grid-column: 2 / 4;
    justify-self: start;
    margin-left: 15px;
}

/* =========================================
   SIDE COLUMN VALUES
   ========================================= */

#games-list .side-number-value,
#gained-list .side-number-value {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;

    color: #ffffff;

    font-size: 11px;
    font-weight: 700;
    line-height: 1;

    white-space: nowrap;
}


/* =========================================
   LP GAINED COLORS
   ========================================= */

#gained-list .lp-gain-positive {
    color: #39e58c;
}

#gained-list .lp-gain-negative {
    color: #ff4d5e;
}

#gained-list .lp-gain-zero {
    color: #ffffff;
}

/* =========================================
   HEADER + ROW COLUMN ALIGNMENT
   ========================================= */

/* Header and rows use identical column widths */
.table-header,
.player-row {
    grid-template-columns:
        20px
        minmax(130px, 1fr)
        96px
        66px
        96px;

    column-gap: 5px;
}


/* Rows have 8px outer margin + 6px padding = 14px */
.table-header {
    padding-left: 14px;
    padding-right: 14px;
}

.player-row {
    padding-left: 6px;
    padding-right: 6px;
}


/* =========================================
   CENTER HEADER PILLS IN THEIR COLUMNS
   ========================================= */

.table-header > span {
    justify-self: center;
}


/* =========================================
   CENTER ONLY GAMES / LP DATA
   ========================================= */

.player-row > .player-value {
    justify-self: center;
    text-align: center;
}

/* ========================================
   STREAMERS + COACHING CENTER CONTENT
   ======================================== */

.coming-soon-page {
    min-height: calc(100vh - 72px);

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

    text-align: center;
}

.coming-soon-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.coming-soon-content h1 {
    margin: 0 0 10px;

    color: #ffffff;

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

    letter-spacing: 2px;
}

.coming-soon-content p {
    margin: 0;

    color: #b7bfce;

    font-size: 18px;
    font-weight: 500;
}