/* =====================================
   RESET
===================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Segoe UI", Arial, sans-serif;
}


/* =====================================
   BODY
===================================== */

body {
    background: #0b0b0b;
    color: white;
    line-height: 1.7;

    /* Space for fixed navbar */
    padding-top: 70px;
}


/* =====================================
   TOP NAVIGATION
===================================== */

.top-nav {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 70px;

    display: flex;

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

    padding: 0 6%;

    background: rgba(5, 5, 5, 0.95);

    border-bottom: 1px solid rgba(212, 175, 55, 0.15);

    backdrop-filter: blur(14px);

    z-index: 1000;
}


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

.top-nav .logo {
    display: flex;

    align-items: center;

    gap: 10px;

    color: white;

    text-decoration: none;

    font-size: 16px;

    font-weight: bold;

    letter-spacing: 1px;

    white-space: nowrap;
}

.top-nav .logo span {
    color: #d4af37;
    font-size: 25px;
}


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

.top-nav-links {
    display: flex;

    align-items: center;

    gap: 5px;

    list-style: none;
}

.top-nav-links a {
    position: relative;

    display: inline-block;

    padding: 9px 14px;

    color: #999;

    text-decoration: none;

    font-size: 14px;

    font-weight: 600;

    border-radius: 8px;

    transition:
        color 0.2s ease,
        background 0.2s ease;
}

.top-nav-links a:hover {
    color: white;

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


/* =====================================
   ACTIVE NAVIGATION
===================================== */

.top-nav-links a.active {
    color: #d4af37;

    background: rgba(212, 175, 55, 0.08);
}

.top-nav-links a.active::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: 3px;

    width: 18px;
    height: 2px;

    transform: translateX(-50%);

    background: #d4af37;

    border-radius: 10px;
}


/* =====================================
   NAVBAR ACTION BUTTON
===================================== */

.top-nav .nav-action {
    margin-left: 8px;

    padding: 9px 17px;

    background: #d4af37;

    color: #050505;

    border-radius: 8px;

    text-decoration: none;

    font-size: 14px;

    font-weight: bold;

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}

.top-nav .nav-action:hover {
    background: white;

    color: black;

    transform: translateY(-2px);

    box-shadow:
        0 5px 20px rgba(212, 175, 55, 0.2);
}


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

header {
    min-height: 70vh;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    padding: 40px;

    background:
        linear-gradient(
            rgba(0, 0, 0, 0.75),
            rgba(0, 0, 0, 0.95)
        ),
        url("https://images.unsplash.com/photo-1560174038-da43ac74f01b");

    background-size: cover;

    background-position: center;
}

header h1 {
    font-size: 65px;

    color: #d4af37;

    margin-bottom: 20px;
}

header p {
    font-size: 25px;

    max-width: 700px;
}


/* =====================================
   BUTTONS
===================================== */

.button {
    display: inline-block;

    margin-top: 20px;

    padding: 15px 35px;

    background: #d4af37;

    color: black;

    text-decoration: none;

    font-weight: bold;

    border-radius: 10px;

    transition: 0.2s;
}

.button:hover {
    background: white;

    transform: translateY(-2px);
}


/* =====================================
   SECTIONS
===================================== */

section {
    padding: 70px 15%;

    text-align: center;
}

h2 {
    color: #d4af37;

    font-size: 38px;

    margin-bottom: 25px;
}

p {
    margin-bottom: 18px;
}


/* =====================================
   CARDS
===================================== */

.card {
    background: #181818;

    padding: 35px;

    border-radius: 20px;

    border: 1px solid #333;
}


/* =====================================
   LISTS
===================================== */

ul {
    list-style: none;
}

li {
    margin: 15px;

    font-size: 20px;
}


/* =====================================
   TEAM MEMBERS
===================================== */

.members {
    display: flex;

    justify-content: center;

    gap: 40px;

    flex-wrap: wrap;

    margin-top: 40px;
}

.member {
    background: #222;

    padding: 30px;

    width: 230px;

    border-radius: 15px;
}

.member h3 {
    color: #d4af37;
}


/* =====================================
   STUDY LINKS
===================================== */

.study-link {
    color: #d4af37;

    text-decoration: none;

    font-weight: bold;
}

.study-link:hover {
    color: white;
}


/* =====================================
   CHALLENGE BUTTON
===================================== */

button {
    padding: 12px 25px;

    background: #d4af37;

    color: black;

    border: none;

    border-radius: 10px;

    font-weight: bold;

    cursor: pointer;
}

button:hover {
    background: white;
}


/* =====================================
   FOOTER
===================================== */

footer {
    background: #050505;

    padding: 35px;

    text-align: center;

    color: #aaa;
}


/* =====================================
   MEMBERS PAGE
===================================== */

.members-page {
    min-height: 100vh;

    padding-top: 50px;

    padding-bottom: 60px;
}


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

.members-header {
    text-align: center;

    padding: 20px 20px 45px;
}

.members-header h1 {
    margin-bottom: 20px;
}

.members-header p {
    margin-bottom: 25px;
}


/* =====================================
   MEMBERS SECTION
===================================== */

.members-section {
    padding: 30px 8% 50px;

    text-align: center;
}

.members-section h2 {
    margin-top: 0;

    margin-bottom: 20px;
}


/* =====================================
   MEMBERS COUNT
===================================== */

.members-count {
    display: flex;

    justify-content: center;

    align-items: baseline;

    gap: 8px;

    margin: 10px 0 5px;
}

#member-count {
    color: #d4af37;

    font-size: 42px;

    font-weight: bold;
}

.count-label {
    color: #aaa;

    font-size: 18px;
}


/* =====================================
   LAST UPDATE
===================================== */

.last-update {
    text-align: center;

    color: #777;

    font-size: 13px;

    margin-bottom: 30px;
}


/* =====================================
   MEMBERS GRID
===================================== */

#members {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(220px, 1fr)
        );

    gap: 20px;

    max-width: 1100px;

    margin: 0 auto;

    width: 100%;
}


/* =====================================
   MEMBER CARD
===================================== */

.member-card {
    display: flex;

    align-items: center;

    gap: 15px;

    background: #181818;

    border: 1px solid #333;

    border-radius: 15px;

    padding: 15px;

    text-decoration: none;

    color: white;

    text-align: left;

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


/* =====================================
   MEMBER CARD HOVER
===================================== */

.member-card:hover {
    background: #222;

    transform: translateY(-4px);

    border-color: #d4af37;

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.4);
}


/* =====================================
   MEMBER AVATAR
===================================== */

.member-avatar {
    width: 55px;

    height: 55px;

    min-width: 55px;

    border-radius: 50%;

    object-fit: cover;

    border: 2px solid #d4af37;

    background: #0b0b0b;
}


/* =====================================
   MEMBER NAME
===================================== */

.member-name {
    color: #d4af37;

    font-size: 18px;

    font-weight: bold;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;
}


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

.loading {
    font-size: 20px;

    color: #aaa;

    text-align: center;

    grid-column: 1 / -1;
}


/* =====================================
   MORE MEMBERS
===================================== */

.more-members {
    padding: 30px 20px 60px;

    text-align: center;
}

.more-members h2 {
    margin: 0;
}


/* =====================================
   MEMBERS FOOTER
===================================== */

.members-page footer {
    margin-top: 0;

    padding: 40px 20px;
}

.members-page footer h2 {
    margin-top: 0;

    margin-bottom: 20px;
}


/* =====================================
   TOURNAMENTS
===================================== */

.tournament-card {
    margin-bottom: 25px;
}

.tournament-card h3 {
    color: #d4af37;

    font-size: 25px;

    margin-bottom: 15px;
}

.tournament-card p {
    margin: 8px 0;
}

.tournament-status {
    font-weight: bold;
}

.status-current {
    color: #4caf50;
}

.status-upcoming {
    color: #4da6ff;
}

.status-finished {
    color: #d4af37;
}

section > h3 {
    color: #aaa;

    font-size: 24px;

    margin-top: 30px;

    margin-bottom: 20px;
}

.empty-card {
    opacity: 0.8;
}


/* =====================================
   OLD NAVIGATION
===================================== */

.navigation {
    display: flex;

    flex-direction: row;

    justify-content: center;

    align-items: center;

    gap: 12px;

    margin-top: 20px;

    flex-wrap: wrap;
}

.navigation .button {
    margin-top: 0;
}


/* =====================================
   MEMBERS LIST
===================================== */

.members-list {
    max-width: 900px;

    margin: auto;
}

.members-list li {
    background: #181818;

    margin: 10px 0;

    padding: 12px 20px;

    border-radius: 10px;

    border: 1px solid #333;

    text-align: left;
}

.members-list li:hover {
    background: #222;
}


/* =====================================
   BOTS PAGE
===================================== */

.bots-section {
    max-width: 1200px;

    margin: 0 auto;
}

.bots-section .members {
    gap: 35px;
}

.bots-section .member {
    width: 260px;

    min-height: 220px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    background: #181818;

    border: 1px solid #333;

    border-radius: 18px;

    padding: 30px;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.bots-section .member:hover {
    transform: translateY(-6px);

    border-color: #d4af37;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.4);
}

.bots-section .member h3 {
    margin-bottom: 10px;
}

.bots-section .member p {
    color: #aaa;
}


/* =====================================
   SACRIFICES OF THE WEEK
===================================== */

.sacrifices-header {
    min-height: 60vh;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    padding: 50px 20px;

    position: relative;

    background:
        linear-gradient(
            rgba(5, 5, 5, 0.70),
            rgba(5, 5, 5, 0.96)
        ),
        url("https://images.unsplash.com/photo-1586165368502-1bad197a6461");

    background-size: cover;

    background-position: center;
}


/* =====================================
   SACRIFICES HEADER CONTENT
===================================== */

.sacrifices-header .header-content {
    max-width: 900px;
}

.club-badge {
    width: 80px;

    height: 80px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto 20px;

    border: 2px solid #d4af37;

    border-radius: 50%;

    background: rgba(212, 175, 55, 0.08);

    color: #d4af37;

    font-size: 42px;

    box-shadow:
        0 0 30px rgba(212, 175, 55, 0.12);
}

.eyebrow {
    color: #d4af37;

    font-size: 13px !important;

    font-weight: bold;

    letter-spacing: 4px;

    text-transform: uppercase;

    margin-bottom: 10px !important;
}

.sacrifices-header h1 {
    margin: 0 0 20px;

    color: #d4af37;

    font-size: clamp(42px, 7vw, 76px);

    line-height: 1.05;

    letter-spacing: 2px;

    text-shadow:
        0 5px 25px rgba(0, 0, 0, 0.7);
}

.sacrifices-header h1 span {
    display: block;

    color: white;
}

.header-description {
    max-width: 700px;

    margin: 0 auto 30px;

    color: #d0d0d0;

    font-size: 20px !important;
}


/* =====================================
   SACRIFICES NAVIGATION
===================================== */

.sacrifices-header .navigation {
    margin-top: 25px;

    display: flex;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

    gap: 12px;
}

.sacrifices-header .navigation .button {
    margin: 0;

    padding: 15px 35px;

    background: #d4af37;

    border: none;

    color: black;

    border-radius: 10px;

    font-weight: bold;

    text-decoration: none;

    transition: 0.2s;
}

.sacrifices-header .navigation .button:hover {
    background: white;

    color: black;

    transform: translateY(-2px);
}


/* =====================================
   SACRIFICES MAIN PAGE
===================================== */

.sacrifices-page {
    max-width: 1200px;

    margin: 0 auto;

    padding: 90px 25px;
}


/* =====================================
   SECTION HEADING
===================================== */

.section-heading {
    max-width: 800px;

    margin: 0 auto 55px;

    text-align: center;
}

.section-label {
    margin-bottom: 10px;

    color: #d4af37;

    font-size: 13px;

    font-weight: bold;

    letter-spacing: 3px;

    text-transform: uppercase;
}

.section-heading h2 {
    margin-bottom: 15px;

    font-size: clamp(32px, 5vw, 48px);
}

.sacrifices-intro {
    max-width: 700px;

    margin: 0 auto;

    color: #999;

    font-size: 17px;
}


/* =====================================
   SACRIFICES GRID
===================================== */

#sacrifices {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(320px, 1fr)
        );

    gap: 25px;

    width: 100%;
}


/* =====================================
   SACRIFICE CARD
===================================== */

.sacrifice-card {
    position: relative;

    display: flex;

    min-height: 260px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #1b1b1b,
            #101010
        );

    border: 1px solid #2d2d2d;

    border-radius: 20px;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.25);

    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.sacrifice-card:hover {
    transform: translateY(-7px);

    border-color: #d4af37;

    box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.5),
        0 0 25px rgba(212, 175, 55, 0.08);
}


/* =====================================
   SACRIFICE CARD RANK
===================================== */

.sacrifice-rank {
    width: 100px;

    min-width: 100px;

    display: flex;

    justify-content: center;

    align-items: center;

    background:
        linear-gradient(
            180deg,
            #171717,
            #0c0c0c
        );

    border-right: 1px solid #292929;

    color: #d4af37;

    font-size: 34px;

    font-weight: bold;
}


/* =====================================
   SACRIFICE CARD CONTENT
===================================== */

.sacrifice-content {
    flex: 1;

    padding: 30px;
}

.sacrifice-title {
    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 8px;
}

.sacrifice-title span {
    font-size: 24px;
}

.sacrifice-title h3 {
    margin: 0;

    color: #d4af37;

    font-size: 24px;
}

.sacrifice-players {
    margin-bottom: 18px;

    color: #888;

    font-size: 14px;
}

.sacrifice-players strong {
    color: #eee;
}


/* =====================================
   SACRIFICED MOVE
===================================== */

.sacrifice-move {
    display: inline-flex;

    align-items: center;

    padding: 9px 18px;

    margin-bottom: 18px;

    background: #080808;

    border: 1px solid rgba(212, 175, 55, 0.55);

    border-radius: 9px;

    color: #d4af37;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 26px;

    font-weight: bold;

    box-shadow:
        inset 0 0 15px rgba(212, 175, 55, 0.04);
}


/* =====================================
   SACRIFICE DESCRIPTION
===================================== */

.sacrifice-description {
    max-width: 800px;

    margin-bottom: 15px;

    color: #c5c5c5;

    font-size: 15px;
}


/* =====================================
   SACRIFICE INFO TAGS
===================================== */

.sacrifice-info {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 20px;
}

.sacrifice-info span {
    padding: 6px 10px;

    background: #222;

    border: 1px solid #333;

    border-radius: 7px;

    color: #999;

    font-size: 12px;
}


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

.loading-card {
    grid-column: 1 / -1;

    justify-content: center;

    align-items: center;

    min-height: 180px;

    text-align: center;

    color: #999;
}

.loading-card:hover {
    transform: none;

    border-color: #2d2d2d;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.25);
}


/* =====================================
   SACRIFICE CTA
===================================== */

.sacrifice-cta {
    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 35px;

    margin-top: 80px;

    padding: 40px;

    text-align: left;

    background:
        linear-gradient(
            135deg,
            #181818,
            #101010
        );

    border: 1px solid #333;

    border-radius: 22px;
}


/* =====================================
   SACRIFICE CTA BUTTON
===================================== */

.cta-button {
    flex-shrink: 0;

    display: inline-block;

    padding: 15px 35px;

    background: #d4af37;

    color: black;

    text-decoration: none;

    border-radius: 10px;

    font-weight: bold;

    transition: 0.2s;
}

.cta-button:hover {
    background: white;

    color: black;

    transform: translateY(-2px);
}


/* =====================================
   SACRIFICES FOOTER
===================================== */

.sacrifices-page + footer {
    border-top: 1px solid #181818;
}

.footer-symbol {
    margin-bottom: 10px;

    color: #d4af37;

    font-size: 40px;
}

footer h2 {
    margin-bottom: 10px;
}

.footer-small {
    color: #555;

    font-size: 13px;
}


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

@media (max-width: 700px) {

    body {
        padding-top: 65px;
    }


    /* NAVBAR */

    .top-nav {
        height: auto;

        min-height: 65px;

        padding: 10px 20px;

        flex-wrap: wrap;

        gap: 8px;
    }

    .top-nav .logo {
        font-size: 14px;
    }

    .top-nav-links {
        width: 100%;

        justify-content: center;

        overflow-x: auto;

        padding-bottom: 3px;

        gap: 2px;
    }

    .top-nav-links a {
        padding: 8px 10px;

        font-size: 13px;

        white-space: nowrap;
    }

    .top-nav .nav-action {
        display: none;
    }


    /* HEADER */

    header h1 {
        font-size: 40px;
    }

    header p {
        font-size: 20px;
    }

    section {
        padding: 40px 20px;
    }

    h2 {
        font-size: 30px;
    }

    .button {
        padding: 12px 25px;
    }


    /* NAVIGATION */

    .navigation {
        flex-direction: column;

        width: 100%;
    }

    .navigation .button {
        width: 100%;

        max-width: 300px;

        text-align: center;
    }


    /* MEMBERS */

    .members-page {
        padding-top: 25px;
    }

    .members-header {
        padding-bottom: 35px;
    }

    .members-section {
        padding-left: 20px;

        padding-right: 20px;
    }

    #members {
        grid-template-columns: 1fr;
    }

    .member-card {
        padding: 13px;
    }

    .member-avatar {
        width: 48px;

        height: 48px;

        min-width: 48px;
    }

    .member-name {
        font-size: 16px;
    }

    #member-count {
        font-size: 36px;
    }


    /* SACRIFICES HEADER */

    .sacrifices-header {
        min-height: auto;

        padding:
            70px
            20px
            45px;
    }

    .club-badge {
        width: 65px;

        height: 65px;

        font-size: 34px;
    }

    .sacrifices-header h1 {
        font-size: 40px;

        letter-spacing: 1px;
    }

    .header-description {
        font-size: 17px !important;
    }


    /* SACRIFICES NAVIGATION */

    .sacrifices-header .navigation {
        width: 100%;

        flex-direction: column;
    }

    .sacrifices-header .navigation .button {
        width: 100%;

        max-width: 320px;

        text-align: center;
    }


    /* SACRIFICES PAGE */

    .sacrifices-page {
        padding:
            60px
            18px;
    }

    #sacrifices {
        grid-template-columns: 1fr;
    }


    /* SACRIFICE CARD */

    .sacrifice-card {
        flex-direction: column;
    }

    .sacrifice-rank {
        width: 100%;

        min-width: 0;

        padding: 15px;

        border-right: none;

        border-bottom: 1px solid #292929;

        font-size: 25px;
    }

    .sacrifice-content {
        padding: 23px;
    }

    .sacrifice-title h3 {
        font-size: 20px;
    }

    .sacrifice-move {
        font-size: 22px;
    }

    .sacrifice-info {
        flex-direction: column;
    }


    /* CTA */

    .sacrifice-cta {
        flex-direction: column;

        align-items: flex-start;

        padding: 28px;

        margin-top: 55px;
    }

    .cta-button {
        width: 100%;

        text-align: center;
    }
}