:root {
    --sf-bg: #0A0A0A;
    --sf-bg-secondary: #111111;
    --sf-card: #171717;
    --sf-card-hover: #1D1D1D;

    --sf-text: #F5F5F5;
    --sf-text-muted: #9A9A9A;

    --sf-red: #B32635;
    --sf-red-light: #D43A4A;

    --sf-yellow: #D6A83F;

    --sf-border: #2A2A2A;

    --sf-success: #4CAF70;
    --sf-warning: #D6A83F;
    --sf-danger: #D43A4A;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background: #080b12;
    color: #ffffff;
    line-height: 1.6;
}




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

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;

    height: 75px;

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

    padding: 0 6%;

    background: rgba(8, 11, 18, 0.92);

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

    backdrop-filter: blur(10px);

    z-index: 1000;
}

.logo {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 1px;
}

.logo span {
    color: #d7a83e;
}

.navbar nav {
    display: flex;
    gap: 30px;
}

.navbar nav a {
    color: #d4d7df;
    text-decoration: none;
    font-size: 14px;
    transition: 0.3s;
}

.navbar nav a:hover {
    color: #d7a83e;
}

.discord-button {
    padding: 10px 18px;

    background: #5865f2;

    color: white;

    text-decoration: none;

    border-radius: 6px;

    font-size: 14px;
}


/* =========================
   HERO
========================= */

.hero {
    min-height: 100vh;

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

    text-align: center;

    padding: 120px 20px 80px;

    background:
        radial-gradient(
            circle at center,
            rgba(215, 168, 62, 0.12),
            transparent 45%
        ),
        #080b12;
}

.hero-content {
    max-width: 850px;
}

.small-title {
    color: #d7a83e;

    font-size: 14px;

    font-weight: bold;

    letter-spacing: 4px;

    margin-bottom: 20px;
}

.hero h1 {
    font-size: clamp(55px, 10vw, 110px);

    line-height: 1;

    letter-spacing: -4px;

    margin-bottom: 25px;
}

.hero h1 span {
    color: #d7a83e;
}

.hero-text {
    font-size: 20px;

    color: #aeb3c0;

    margin-bottom: 35px;
}

.hero-buttons {
    display: flex;

    justify-content: center;

    gap: 15px;

    flex-wrap: wrap;
}

.primary-button,
.secondary-button {
    display: inline-block;

    padding: 13px 24px;

    border-radius: 6px;

    text-decoration: none;

    font-weight: bold;

    transition: 0.3s;
}

.primary-button {
    background: #d7a83e;

    color: #080b12;
}

.primary-button:hover {
    transform: translateY(-2px);
}

.secondary-button {
    border: 1px solid #414653;

    color: white;
}

.secondary-button:hover {
    border-color: #d7a83e;

    color: #d7a83e;
}


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

.section {
    padding: 100px 7%;
}

.dark-section {
    background: #0d111a;
}

.section-title {
    text-align: center;

    margin-bottom: 55px;
}

.section-title p {
    color: #d7a83e;

    font-size: 13px;

    font-weight: bold;

    letter-spacing: 3px;
}

.section-title h2 {
    font-size: 42px;

    margin-top: 8px;
}


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

.info-grid {
    display: grid;

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

    gap: 25px;

    max-width: 1100px;

    margin: auto;
}

.info-card {
    background: #111620;

    border: 1px solid #202633;

    padding: 35px;

    border-radius: 10px;

    transition: 0.3s;
}

.info-card:hover {
    transform: translateY(-5px);

    border-color: #d7a83e;
}

.icon {
    font-size: 35px;

    margin-bottom: 20px;
}

.info-card h3 {
    margin-bottom: 10px;
}

.info-card p {
    color: #949aa8;

    font-size: 15px;
}


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

.event-grid {
    max-width: 1000px;

    margin: auto;

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 20px;
}

.event-card {
    display: flex;

    gap: 20px;

    align-items: center;

    background: #111620;

    border: 1px solid #202633;

    padding: 25px;

    border-radius: 10px;
}

.event-icon {
    font-size: 40px;
}

.event-card p {
    color: #949aa8;

    font-size: 14px;
}


/* =========================
   GUIDES
========================= */

.guide-grid {
    max-width: 1100px;

    margin: auto;

    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 20px;
}

.guide-card {
    padding: 30px;

    background: #111620;

    border: 1px solid #202633;

    border-radius: 10px;

    color: white;

    text-decoration: none;

    transition: 0.3s;
}

.guide-card:hover {
    transform: translateY(-5px);

    border-color: #d7a83e;
}

.guide-card span {
    font-size: 32px;
}

.guide-card h3 {
    margin: 15px 0 8px;
}

.guide-card p {
    color: #949aa8;

    font-size: 14px;
}


/* =========================
   DISCORD
========================= */

.discord-section {
    text-align: center;

    padding: 100px 20px;

    background:
        radial-gradient(
            circle,
            rgba(88, 101, 242, 0.15),
            transparent 55%
        ),
        #0d111a;
}

.discord-section h2 {
    font-size: 40px;

    margin-bottom: 10px;
}

.discord-section p {
    color: #949aa8;

    margin-bottom: 30px;
}


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

footer {
    padding: 45px 7%;

    text-align: center;

    background: #06080d;
}

footer p {
    color: #777d8b;

    margin-top: 8px;
}

.copyright {
    font-size: 13px;
}

/* =========================
   INNER PAGE HERO
========================= */

.page-hero {
    padding: 160px 20px 90px;

    text-align: center;

    background:
        radial-gradient(
            circle at center,
            rgba(215, 168, 62, 0.12),
            transparent 50%
        ),
        #080b12;
}

.page-hero h1 {
    font-size: clamp(45px, 8vw, 80px);

    line-height: 1;

    margin: 15px 0 20px;
}

.page-hero h1 span {
    color: #d7a83e;
}

.page-hero p:last-child {
    color: #949aa8;

    font-size: 18px;
}

/* =========================
   ALLIANCES
========================= */

.alliance-search {
    max-width: 700px;

    margin: 0 auto 40px;
}

.alliance-search input {
    width: 100%;

    padding: 15px 18px;

    background: #111620;

    border: 1px solid #2a303d;

    border-radius: 7px;

    color: white;

    font-size: 15px;

    outline: none;
}

.alliance-search input:focus {
    border-color: #d7a83e;
}

.alliance-search input::placeholder {
    color: #777d8b;
}


.alliance-grid {
    max-width: 1000px;

    margin: auto;

    display: flex;

    flex-direction: column;

    gap: 15px;
}


.alliance-card {
    display: grid;

    grid-template-columns: 70px 1fr auto;

    align-items: center;

    gap: 25px;

    padding: 22px 25px;

    background: #111620;

    border: 1px solid #202633;

    border-radius: 9px;

    transition: 0.3s;
}

.alliance-card:hover {
    border-color: #d7a83e;

    transform: translateX(3px);
}


.alliance-rank {
    font-size: 22px;

    font-weight: bold;

    color: #d7a83e;

    text-align: center;
}


.alliance-info h3 {
    margin-bottom: 4px;

    font-size: 18px;
}

.alliance-info p {
    color: #858b98;

    font-size: 13px;
}

.alliance-info strong {
    color: #d7a83e;
}


.alliance-stats {
    display: flex;

    gap: 35px;
}

.alliance-stats div {
    text-align: right;
}

.alliance-stats span {
    display: block;

    color: #777d8b;

    font-size: 11px;

    text-transform: uppercase;
}

.alliance-stats strong {
    display: block;

    margin-top: 3px;

    font-size: 15px;
}


/* =========================
   KINGDOM INFORMATION
========================= */

.info-grid {
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.info-card {
    background: #111620;
    border: 1px solid #202633;
    border-radius: 9px;
    padding: 25px;
    text-align: center;
}

.info-card span {
    display: block;
    color: #777d8b;
    font-size: 12px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.info-card strong {
    display: block;
    color: #d7a83e;
    font-size: 20px;
}


/* Mobile */

@media (max-width: 768px) {

    .info-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


@media (max-width: 480px) {

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

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

@media (max-width: 800px) {

    .navbar {
        padding: 0 20px;
    }

    .navbar nav {
        display: none;
    }

    .hero h1 {
        letter-spacing: -2px;
    }

    .info-grid,
    .event-grid,
    .guide-grid {
        grid-template-columns: 1fr;
    }

    .section {
        padding: 75px 20px;
    }

}

/* =========================
   KINGDOM PAGE FIX
========================= */

.section {
    padding: 80px 20px;
}

.section-title {
    max-width: 1000px;
    margin: 0 auto 40px;
    text-align: center;
}

.section-title h2 {
    font-size: 36px;
    margin-top: 10px;
}

.section-label {
    color: #d7a83e;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.card-grid {
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.card {
    background: #111620;
    border: 1px solid #202633;
    border-radius: 9px;
    padding: 30px;
}

.card h3 {
    margin-bottom: 12px;
    color: #ffffff;
}

.card p {
    color: #858b98;
    line-height: 1.7;
}


/* =========================
   KINGDOM INFORMATION
========================= */

.info-grid {
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.info-card {
    background: #111620;
    border: 1px solid #202633;
    border-radius: 9px;
    padding: 25px;
    text-align: center;
}

.info-card span {
    display: block;
    color: #777d8b;
    font-size: 12px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.info-card strong {
    display: block;
    color: #d7a83e;
    font-size: 20px;
}


.nav-links {
    display: flex;
    gap: 30px;
}

.nav-links a {
    color: #d4d7df;
    text-decoration: none;
    font-size: 14px;
    transition: 0.3s;
}

.nav-links a:hover {
    color: #d7a83e;
}

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

@media (max-width: 768px) {

    .section {
        padding: 60px 20px;
    }

    .section-title h2 {
        font-size: 30px;
    }

    .info-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

}


@media (max-width: 480px) {

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

}

/* REDEEM BOX */

.redeem-box {
    max-width: 700px;
    margin: 80px auto 0;
    padding: 35px;

    background: #111620;
    border: 1px solid #202633;
    border-radius: 9px;
}

.redeem-form {
    display: flex;
    gap: 12px;
    margin-top: 25px;
}

.redeem-form input {
    flex: 1;

    padding: 13px 16px;

    background: #080b12;
    border: 1px solid #2a303d;
    border-radius: 6px;

    color: white;
    font-size: 14px;
    outline: none;
}

.redeem-form input:focus {
    border-color: #d7a83e;
}

.redeem-form input::placeholder {
    color: #777d8b;
}

.redeem-form button {
    padding: 13px 20px;

    background: #d7a83e;
    color: #080b12;

    border: none;
    border-radius: 6px;

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

    cursor: pointer;
}

.redeem-form button:hover {
    opacity: 0.9;
}

#redeemMessage {
    margin-top: 15px;
    color: #858b98;
    font-size: 13px;
}


/* MOBILE */

@media (max-width: 800px) {

    .redeem-box {
        padding: 25px 20px;
        margin-top: 60px;
    }

    .redeem-form {
        flex-direction: column;
    }

    .redeem-form button {
        width: 100%;
    }

}



/* =========================
   GIFT CODES PAGE
========================= */

.gift-code-grid {
    max-width: 900px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}


/* GIFT CODE CARD */

.gift-code-card {
    position: relative;

    padding: 26px 28px;

    background:
        linear-gradient(
            145deg,
            #151a24,
            #0e121a
        );

    border: 1px solid #252c38;
    border-radius: 10px;

    transition: 0.3s;
}

.gift-code-card:hover {
    border-color: #d7a83e;
    transform: translateY(-3px);
}


/* CARD LABEL */

.gift-code-card span {
    display: block;

    color: #777d8b;

    font-size: 10px;
    font-weight: bold;

    letter-spacing: 1.5px;
}


/* CODE */

.gift-code-card strong {
    display: block;

    margin-top: 8px;

    color: #d7a83e;

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

    letter-spacing: 1px;
}


/* EXPIRY */

.gift-code-card p {
    margin-top: 5px;

    color: #858b98;

    font-size: 13px;
}


/* COPY BUTTON */

.copy-code {
    margin-top: 18px;

    width: 100%;

    padding: 11px 15px;

    background: #d7a83e;
    color: #080b12;

    border: none;
    border-radius: 6px;

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

    cursor: pointer;

    transition: 0.25s;
}

.copy-code:hover {
    background: #e4b951;
    transform: translateY(-1px);
}


/* LOADING */

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

    text-align: center;

    padding: 40px 20px;

    color: #858b98;
}


/* =========================
   REDEEM SECTION
========================= */

.redeem-box {
    max-width: 900px;

    margin: 80px auto 0;
    padding: 40px;

    background:
        linear-gradient(
            145deg,
            #121720,
            #0d1118
        );

    border: 1px solid #252c38;
    border-radius: 10px;
}


/* REDEEM FORM */

.redeem-form {
    max-width: 650px;

    display: flex;

    margin: 25px auto 0;

    gap: 10px;
}


/* PLAYER ID INPUT */

.redeem-form input {
    flex: 1;

    min-width: 0;

    padding: 13px 16px;

    background: #080b12;

    border: 1px solid #2a303d;
    border-radius: 6px;

    color: white;

    font-size: 14px;

    outline: none;
}

.redeem-form input:focus {
    border-color: #d7a83e;
}

.redeem-form input::placeholder {
    color: #777d8b;
}


/* CONTINUE BUTTON */

.redeem-form button {
    padding: 13px 22px;

    background: #d7a83e;
    color: #080b12;

    border: none;
    border-radius: 6px;

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

    cursor: pointer;

    transition: 0.25s;
}

.redeem-form button:hover {
    background: #e4b951;
    transform: translateY(-1px);
}


/* MESSAGE */

#redeemMessage {
    max-width: 650px;

    margin: 12px auto 0;

    color: #858b98;

    font-size: 13px;
}


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

@media (max-width: 800px) {

    .gift-code-grid {
        grid-template-columns: 1fr;
    }

    .redeem-box {
        margin-top: 60px;
        padding: 30px 20px;
    }

    .redeem-form {
        flex-direction: column;
    }

    .redeem-form button {
        width: 100%;
    }

}




.alliance-grid {
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.alliance-card {
    display: grid;
    grid-template-columns: 50px 1fr auto;
    align-items: center;
    gap: 16px;
    padding: 22px;
    background: linear-gradient(145deg, #151a24, #0e121a);
    border: 1px solid #252c38;
    border-radius: 10px;
    transition: 0.3s;
}

.alliance-card:hover {
    border-color: #d7a83e;
    transform: translateY(-2px);
}

.alliance-rank {
    color: #777d8b;
    font-size: 14px;
    font-weight: 700;
}

.alliance-tag {
    color: #d7a83e;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
}

.alliance-info h3 {
    margin: 5px 0;
    color: #ffffff;
    font-size: 16px;
}

.alliance-info p {
    margin: 0;
    color: #777d8b;
    font-size: 12px;
}

.alliance-stats {
    text-align: right;
}

.alliance-stats strong {
    display: block;
    color: #d7a83e;
    font-size: 18px;
}

.alliance-stats span {
    display: block;
    margin-top: 4px;
    color: #777d8b;
    font-size: 11px;
}

.alliance-loading {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px 20px;
    color: #858b98;
}

@media (max-width: 800px) {

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

    .alliance-card {
        grid-template-columns: 40px 1fr;
    }

    .alliance-stats {
        grid-column: 2;
        text-align: left;
    }
}


/* =========================
   ALLIANCE DETAILS
========================= */

.alliance-detail-box {
    max-width: 1000px;
    margin: 0 auto 60px;

    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.alliance-detail-stat {
    padding: 24px;

    background: linear-gradient(
        145deg,
        #151a24,
        #0e121a
    );

    border: 1px solid #252c38;
    border-radius: 10px;
}

.alliance-detail-stat span {
    display: block;

    color: #777d8b;

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

    letter-spacing: 1.5px;
}

.alliance-detail-stat strong {
    display: block;

    margin-top: 8px;

    color: #d7a83e;

    font-size: 20px;
}


/* MEMBERS */

.alliance-members-section {
    max-width: 1000px;
    margin: 0 auto;
}

.member-list {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 12px;
}

.member-card {
    display: grid;

    grid-template-columns: 45px 1fr auto;

    align-items: center;

    gap: 14px;

    padding: 18px;

    background: linear-gradient(
        145deg,
        #151a24,
        #0e121a
    );

    border: 1px solid #252c38;

    border-radius: 8px;

    transition: 0.3s;
}

.member-card:hover {
    border-color: #d7a83e;

    transform: translateY(-2px);
}

.member-rank {
    color: #777d8b;

    font-size: 13px;

    font-weight: 700;
}

.member-info h3 {
    margin: 0;

    color: #ffffff;

    font-size: 14px;
}

.member-info p {
    margin-top: 5px;

    color: #777d8b;

    font-size: 11px;
}

.member-stats {
    text-align: right;
}

.member-stats strong {
    display: block;

    color: #d7a83e;

    font-size: 15px;
}

.member-stats span {
    display: block;

    margin-top: 3px;

    color: #777d8b;

    font-size: 10px;
}


/* MOBILE */

@media (max-width: 800px) {

    .alliance-detail-box {
        grid-template-columns: repeat(2, 1fr);
    }

    .member-list {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 500px) {

    .alliance-detail-box {
        grid-template-columns: 1fr 1fr;
    }

    .member-card {
        grid-template-columns: 35px 1fr;
    }

    .member-stats {
        grid-column: 2;
        text-align: left;
    }

}


/* =========================
   ALLIANCE PAGE HEADER
========================= */

.alliance-page-header {
    max-width: 1000px;
    margin: 0 auto 60px;
    padding: 60px 20px 20px;

    text-align: center;
}

.alliance-page-header .section-label {
    margin-bottom: 15px;
}

.alliance-page-header #allianceName {
    margin: 0;

    color: #ffffff;

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

    line-height: 1.1;
    letter-spacing: 1px;
}

.alliance-page-header #allianceTag {
    margin: 12px 0 0;

    color: #d7a83e;

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

    letter-spacing: 3px;
}


@media (max-width: 800px) {

    .alliance-page-header {
        padding-top: 40px;
        margin-bottom: 40px;
    }

    .alliance-page-header #allianceName {
        font-size: 38px;
    }

}


/* =========================
   MEMBER ROSTER
========================= */

.member-list {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 12px;
}


.member-card {
    display: grid;

    grid-template-columns: 52px 1fr auto;

    align-items: center;

    gap: 14px;

    padding: 16px;

    background: linear-gradient(
        145deg,
        #151a24,
        #0e121a
    );

    border: 1px solid #252c38;

    border-radius: 10px;

    transition: 0.3s;
}


.member-card:hover {
    border-color: #d7a83e;

    transform: translateY(-2px);
}


/* AVATAR */

.member-avatar {
    width: 52px;
    height: 52px;

    border-radius: 8px;

    overflow: hidden;

    background: #080b12;

    border: 1px solid #303744;
}


.member-avatar img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


.member-avatar-placeholder {
    width: 100%;
    height: 100%;

    display: flex;

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

    color: #777d8b;

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


/* NAME */

.member-name-row {
    display: flex;

    align-items: center;

    gap: 8px;

    flex-wrap: wrap;
}


.member-info h3 {
    margin: 0;

    color: #ffffff;

    font-size: 14px;

    font-weight: 700;
}


.member-info p {
    margin: 6px 0 0;

    color: #777d8b;

    font-size: 10px;
}


/* RANK */

.member-rank-label {
    padding: 3px 6px;

    background: rgba(215, 168, 62, 0.1);

    border: 1px solid rgba(
        215,
        168,
        62,
        0.25
    );

    border-radius: 4px;

    color: #d7a83e;

    font-size: 9px;

    font-weight: 700;
}


/* STATS */

.member-stats {
    text-align: right;

    min-width: 90px;
}


.member-stats strong {
    display: block;

    color: #d7a83e;

    font-size: 15px;

    font-weight: 700;
}


.member-stats span {
    display: block;

    margin-top: 3px;

    color: #777d8b;

    font-size: 9px;
}


.member-online {
    color: #55c878 !important;
}


.member-offline {
    color: #777d8b !important;
}


/* MOBILE */

@media (max-width: 800px) {

    .member-list {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 500px) {

    .member-card {
        grid-template-columns: 45px 1fr;
    }


    .member-avatar {
        width: 45px;
        height: 45px;
    }


    .member-stats {
        grid-column: 2;

        text-align: left;

        display: flex;

        gap: 10px;

        flex-wrap: wrap;

        margin-top: 4px;
    }


    .member-stats strong {
        width: 100%;
    }

}


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

.player-page-header {
    max-width: 1000px;
    margin: 0 auto 50px;
    padding: 50px 20px 20px;
    text-align: center;
}

.player-avatar {
    width: 90px;
    height: 90px;
    margin: 20px auto;
    border-radius: 12px;
    overflow: hidden;
    background: #080b12;
    border: 1px solid #303744;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #777d8b;
    font-size: 28px;
    font-weight: 700;
}

.player-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.player-page-header h1 {
    margin: 0;
    color: #ffffff;
    font-size: 40px;
}

.player-page-header p:last-child {
    margin-top: 10px;
    color: #d7a83e;
    font-size: 14px;
    font-weight: 700;
}

.player-detail-box {
    max-width: 1000px;
    margin: 0 auto 60px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.player-detail-stat {
    padding: 22px;
    background: linear-gradient(
        145deg,
        #151a24,
        #0e121a
    );
    border: 1px solid #252c38;
    border-radius: 10px;
}

.player-detail-stat span {
    display: block;
    color: #777d8b;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.player-detail-stat strong {
    display: block;
    margin-top: 8px;
    color: #d7a83e;
    font-size: 19px;
}

.player-info-section {
    max-width: 1000px;
    margin: 0 auto;
}

.player-info-card {
    margin-top: 20px;
    padding: 10px 22px;
    background: linear-gradient(
        145deg,
        #151a24,
        #0e121a
    );
    border: 1px solid #252c38;
    border-radius: 10px;
}

.player-info-row {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 15px 0;
    border-bottom: 1px solid #252c38;
}

.player-info-row:last-child {
    border-bottom: none;
}

.player-info-row span {
    color: #777d8b;
    font-size: 12px;
}

.player-info-row strong {
    color: #ffffff;
    font-size: 12px;
    text-align: right;
}

@media (max-width: 800px) {

    .player-detail-box {
        grid-template-columns: repeat(2, 1fr);
        padding: 0 20px;
    }

}

@media (max-width: 500px) {

    .player-page-header h1 {
        font-size: 32px;
    }

    .player-detail-box {
        grid-template-columns: 1fr 1fr;
    }

}

/* =========================
   PLAYER HEROES
========================= */

.player-heroes-section {
    max-width: 1000px;
    margin: 60px auto 0;
}

.hero-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-top: 20px;
}

.hero-card {
    display: grid;
    grid-template-columns: 70px 1fr;
    gap: 16px;
    align-items: center;
    padding: 18px;
    background: linear-gradient(
        145deg,
        #151a24,
        #0e121a
    );
    border: 1px solid #252c38;
    border-radius: 10px;
    transition: 0.3s;
}

.hero-card:hover {
    border-color: #d7a83e;
    transform: translateY(-2px);
}

.hero-icon {
    width: 70px;
    height: 70px;
    border-radius: 10px;
    overflow: hidden;
    background: #080b12;
    border: 1px solid #303744;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #777d8b;
    font-weight: 700;
}

.hero-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.hero-name-row h3 {
    margin: 0;
    color: #ffffff;
    font-size: 16px;
}

.hero-name-row span {
    color: #d7a83e;
    font-size: 10px;
    font-weight: 700;
}

.hero-main > p {
    margin: 5px 0 10px;
    color: #777d8b;
    font-size: 11px;
}

.hero-stats {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.hero-stats span {
    color: #a1a6b1;
    font-size: 10px;
}

@media (max-width: 800px) {

    .hero-list {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 500px) {

    .hero-card {
        grid-template-columns: 55px 1fr;
    }

    .hero-icon {
        width: 55px;
        height: 55px;
    }

}

/* =========================
   PLAYER RANKINGS
========================= */

.player-rankings-section {
    max-width: 1000px;
    margin: 60px auto 0;
}

.player-rankings {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 20px;
}

.player-ranking-card {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 20px;
    padding: 18px 20px;
    background: linear-gradient(
        145deg,
        #151a24,
        #0e121a
    );
    border: 1px solid #252c38;
    border-radius: 10px;
}

.ranking-name {
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
}

.ranking-value {
    color: #a1a6b1;
    font-size: 12px;
}

.ranking-position {
    min-width: 45px;
    text-align: right;
    color: #d7a83e;
    font-size: 15px;
    font-weight: 700;
}

@media (max-width: 800px) {

    .player-rankings {
        grid-template-columns: 1fr;
    }

}


.back-button {
    display: block;
    width: fit-content;
    margin: 30px auto 0;
    padding: 10px 16px;

    color: #777d8b;
    text-decoration: none;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;

    border: 1px solid #252c38;
    border-radius: 6px;

    transition: 0.25s;
}

.back-button:hover {
    color: #d7a83e;
    border-color: #d7a83e;
}

.player-alliance-link {
    color: #d7a83e;
    text-decoration: none;
}

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




.back-button {
    display: block;
    width: fit-content;
    margin: 30px 0 0;
    padding: 10px 16px;
    color: #777d8b;
    text-decoration: none;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    border: 1px solid #252c38;
    border-radius: 6px;
    transition: 0.25s;
}

.back-button:hover {
    color: #d7a83e;
    border-color: #d7a83e;
}


.player-search-box {
    max-width: 700px;
    margin: 20px auto 0;
    display: flex;
    gap: 10px;
}

.player-search-box input {
    flex: 1;
    min-width: 0;
    padding: 13px 16px;
    background: #080b12;
    border: 1px solid #2a303d;
    border-radius: 6px;
    color: #ffffff;
    font-size: 14px;
    outline: none;
}

.player-search-box input:focus {
    border-color: #d7a83e;
}

.player-search-box input::placeholder {
    color: #777d8b;
}

.player-search-box button {
    padding: 13px 22px;
    background: #d7a83e;
    color: #080b12;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.25s;
}

.player-search-box button:hover {
    background: #e4b951;
    transform: translateY(-1px);
}

#playerSearchMessage {
    max-width: 700px;
    margin: 15px auto 30px;
    padding: 18px 20px;
    background: linear-gradient(
        145deg,
        #151a24,
        #0e121a
    );
    border: 1px solid #252c38;
    border-radius: 10px;
    color: #858b98;
    font-size: 13px;
    text-align: center;
}

#playerSearchMessage strong {
    color: #ffffff;
    font-size: 16px;
}

.player-open-button {
    padding: 9px 18px;
    background: transparent;
    color: #d7a83e;
    border: 1px solid #d7a83e;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.25s;
}

.player-open-button:hover {
    background: #d7a83e;
    color: #080b12;
}

@media (max-width: 600px) {

    .player-search-box {
        flex-direction: column;
    }

    .player-search-box button {
        width: 100%;
    }

}

.player-search-result {
    display: grid;
    grid-template-columns: 55px 1fr auto;
    align-items: center;
    gap: 15px;
    text-align: left;
}

.player-search-avatar {
    width: 55px;
    height: 55px;
    border-radius: 8px;
    overflow: hidden;
    background: #080b12;
    border: 1px solid #303744;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #777d8b;
    font-weight: 700;
}

.player-search-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.player-search-info h3 {
    margin: 0;
    color: #ffffff;
    font-size: 15px;
}

.player-search-info p {
    margin: 4px 0;
    color: #d7a83e;
    font-size: 11px;
    font-weight: 700;
}

.player-search-stats {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.player-search-stats span {
    color: #858b98;
    font-size: 10px;
}

@media (max-width: 600px) {

    .player-search-result {
        grid-template-columns: 50px 1fr;
    }

    .player-search-avatar {
        width: 50px;
        height: 50px;
    }

    .player-open-button {
        grid-column: 2;
        width: fit-content;
    }

}

.member-controls {
    max-width: 1000px;
    margin: 0 auto 20px;
    display: flex;
    justify-content: flex-end;
}

.member-controls select {
    padding: 10px 14px;
    background: #151a24;
    border: 1px solid #252c38;
    border-radius: 6px;
    color: #d4d7df;
    font-size: 12px;
    outline: none;
    cursor: pointer;
}

.member-controls select:focus {
    border-color: #d7a83e;
}

.member-controls select option {
    background: #151a24;
    color: #ffffff;
}

@media (max-width: 600px) {

    .member-controls {
        justify-content: stretch;
    }

    .member-controls select {
        width: 100%;
    }

}

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

.page-header {
    max-width: 1000px;
    margin: 0 auto 60px;
    padding: 60px 20px 20px;
    text-align: center;
}

.page-header .section-label {
    margin-bottom: 15px;
}

.page-header h1 {
    margin: 0;
    color: #ffffff;
    font-size: 52px;
    font-weight: 800;
    line-height: 1.1;
}

.page-header p:last-child {
    margin-top: 12px;
    color: #777d8b;
    font-size: 14px;
}

.events-section {
    max-width: 1000px;
    margin: 0 auto;
}

.event-list {
    display: grid;
    gap: 14px;
}

.event-card {
    display: grid;
    grid-template-columns: 100px 1fr auto;
    align-items: center;
    gap: 20px;
    padding: 20px;
    background: linear-gradient(
        145deg,
        #151a24,
        #0e121a
    );
    border: 1px solid #252c38;
    border-radius: 10px;
    transition: 0.3s;
}

.event-card:hover {
    border-color: #d7a83e;
    transform: translateY(-2px);
}

.event-date {
    text-align: center;
    padding: 12px;
    background: #080b12;
    border: 1px solid #252c38;
    border-radius: 8px;
}

.event-date span {
    display: block;
    color: #777d8b;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
}

.event-date strong {
    display: block;
    margin-top: 5px;
    color: #d7a83e;
    font-size: 14px;
}

.event-info h3 {
    margin: 0;
    color: #ffffff;
    font-size: 16px;
}

.event-info p {
    margin: 7px 0 0;
    color: #777d8b;
    font-size: 12px;
}

.event-status {
    padding: 6px 10px;
    border: 1px solid rgba(
        215,
        168,
        62,
        0.3
    );
    border-radius: 5px;
    color: #d7a83e;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
}

@media (max-width: 600px) {

    .page-header {
        padding-top: 40px;
        margin-bottom: 40px;
    }

    .page-header h1 {
        font-size: 38px;
    }

    .event-card {
        grid-template-columns: 70px 1fr;
        gap: 14px;
    }

    .event-status {
        grid-column: 2;
        width: fit-content;
    }

}

/* =========================
   EVENT FILTERS
========================= */

.event-filters {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 0 auto 25px;
    flex-wrap: wrap;
}

.event-filter {
    padding: 9px 16px;
    background: #151a24;
    border: 1px solid #252c38;
    border-radius: 6px;
    color: #777d8b;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
    transition: 0.25s;
}

.event-filter:hover {
    color: #d7a83e;
    border-color: #d7a83e;
}

.event-filter.active {
    background: #d7a83e;
    border-color: #d7a83e;
    color: #080b12;
}

@media (max-width: 500px) {

    .event-filters {
        gap: 6px;
    }

    .event-filter {
        flex: 1;
        padding: 9px 10px;
    }

}

/* =========================
   EVENT DETAILS BUTTON
========================= */

.event-details-button {
    display: inline-block;
    width: fit-content;
    padding: 8px 12px;
    border: 1px solid #252c38;
    border-radius: 5px;
    color: #777d8b;
    text-decoration: none;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.8px;
    transition: 0.25s;
}

.event-details-button:hover {
    color: #d7a83e;
    border-color: #d7a83e;
}

@media (max-width: 600px) {

    .event-details-button {
        grid-column: 2;
    }

}

/* =========================
   EVENT DETAILS PAGE
========================= */

.event-detail-content {
    max-width: 800px;
    margin: 0 auto 60px;
}

.event-detail-card {
    padding: 30px;
    background: linear-gradient(
        145deg,
        #151a24,
        #0e121a
    );
    border: 1px solid #252c38;
    border-radius: 10px;
}

.event-detail-card h2 {
    margin: 0 0 15px;
    color: #ffffff;
    font-size: 24px;
}

.event-detail-card h3 {
    margin: 30px 0 10px;
    color: #d7a83e;
    font-size: 15px;
}

.event-detail-card p {
    margin: 0;
    color: #858b98;
    font-size: 13px;
    line-height: 1.8;
}

@media (max-width: 600px) {

    .event-detail-card {
        padding: 22px;
    }

    .event-detail-card h2 {
        font-size: 20px;
    }

}

/* =========================
   EVENT INFO GRID
========================= */

.event-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin: 25px 0;
}

.event-info-item {
    padding: 16px;
    background: #080b12;
    border: 1px solid #252c38;
    border-radius: 8px;
}

.event-info-item span {
    display: block;
    color: #777d8b;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
}

.event-info-item strong {
    display: block;
    margin-top: 7px;
    color: #d7a83e;
    font-size: 13px;
}

@media (max-width: 500px) {

    .event-info-grid {
        grid-template-columns: 1fr;
    }

}

/* =========================
   EVENT SCHEDULE
========================= */

.event-schedule {
    margin-top: 30px;
}

.event-schedule h3 {
    margin-bottom: 14px;
}

.schedule-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 13px 15px;
    border-bottom: 1px solid #252c38;
}

.schedule-row:first-of-type {
    border-top: 1px solid #252c38;
}

.schedule-row span {
    color: #777d8b;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
}

.schedule-row strong {
    color: #d7a83e;
    font-size: 12px;
    text-align: right;
}

@media (max-width: 500px) {

    .schedule-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

    .schedule-row strong {
        text-align: left;
    }

}

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

.mobile-menu-button {
    display: none;
    padding: 8px 11px;
    background: transparent;
    border: 1px solid #252c38;
    border-radius: 6px;
    color: #d7a83e;
    font-size: 20px;
    cursor: pointer;
}

@media (max-width: 800px) {

    .navbar {
        position: relative;
    }

    .mobile-menu-button {
        display: block;
        margin-left: auto;
    }

    .navbar nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        padding: 15px 20px;
        background: #0e121a;
        border-top: 1px solid #252c38;
        border-bottom: 1px solid #252c38;
        z-index: 1000;
    }

    .navbar nav.mobile-menu-open {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .navbar nav a {
        display: block;
        padding: 13px 0;
        border-bottom: 1px solid #252c38;
    }

    .navbar nav a:last-child {
        border-bottom: none;
    }

    .discord-button {
        display: none;
    }

}

/* ========================================
   BEAR TRAP EVENT
   ======================================== */

.bear-section-header {
    margin-top: 40px;
    margin-bottom: 20px;

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

    gap: 20px;
}

.bear-section-header h3 {
    margin-top: 5px;
}

.bear-timezone {
    color: #888e9b;
    font-size: 13px;
}


/* Accordion */

.bear-accordion {
    width: 100%;
    margin-top: 20px;
}

.bear-item {
    background: #111318;

    border: 1px solid #292d36;
    border-radius: 12px;

    margin-bottom: 12px;

    overflow: hidden;

    transition: border-color 0.3s ease;
}

.bear-item:hover {
    border-color: #d7a83e;
}


/* Alliance button */

.bear-header {
    width: 100%;

    border: none;

    background: transparent;

    color: #ffffff;

    padding: 20px;

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

    cursor: pointer;

    text-align: left;
}

.bear-alliance-name {
    display: flex;
    align-items: center;

    gap: 12px;
}

.bear-alliance-name strong {
    font-size: 17px;
}

.bear-alliance-name span {
    color: #d7a83e;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1px;
}

.bear-arrow {
    color: #d7a83e;

    font-size: 22px;

    font-weight: 400;
}


/* Accordion content */

.bear-content {
    display: none;

    grid-template-columns: repeat(2, 1fr);

    gap: 15px;

    padding: 0 20px 20px;
}

.bear-content.open {
    display: grid;
}


/* Bear cards */

.bear-event-card {
    background: #181b21;

    border: 1px solid #292d36;

    border-radius: 10px;

    padding: 18px;

    display: flex;
    align-items: center;

    gap: 15px;
}

.bear-event-icon {
    font-size: 28px;

    width: 50px;
    height: 50px;

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

    background: #20242b;

    border-radius: 10px;
}

.bear-event-info {
    display: flex;

    flex-direction: column;

    gap: 4px;
}

.bear-event-info span {
    color: #d7a83e;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1px;
}

.bear-event-info strong {
    color: #ffffff;

    font-size: 18px;
}

.bear-event-info small {
    color: #888e9b;

    font-size: 13px;
}


/* Mobile */

@media (max-width: 600px) {

    .bear-section-header {
        align-items: flex-start;

        flex-direction: column;
    }

    .bear-content.open {
        grid-template-columns: 1fr;
    }

    .bear-header {
        padding: 17px;
    }

    .bear-event-card {
        padding: 15px;
    }

}

/* Bear Trap event icon */

.event-icon-bear {
   font-size: 24px!important;
}

/* ========================================
   BEAR TRAP SCHEDULE CARD
   ======================================== */

/* ========================================
   BEAR SCHEDULE CARD
   ======================================== */

.bear-schedule-card {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 28px;
    position: relative;
    overflow: hidden;

    text-decoration: none;
    color: inherit;

    cursor: pointer;

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

.bear-schedule-card:hover {
    transform: translateY(-3px);
    border-color: #d7a83e;
}

.bear-schedule-card .event-icon {
    flex-shrink: 0;

    width: 70px;
    height: 70px;

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

    font-size: 42px;

    background: #181b21;
    border: 1px solid #292d36;
    border-radius: 14px;
}

.bear-schedule-content {
    flex: 1;
}

.bear-schedule-content .section-label {
    margin-bottom: 6px;
}

.bear-schedule-content h3 {
    margin: 0 0 8px;
    font-size: 24px;
}

.bear-schedule-content p:not(.section-label) {
    margin: 0 0 18px;
    color: #888e9b;
    line-height: 1.6;
}

.bear-view-link {
    color: #d7a83e;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
}


/* Mobile */

@media (max-width: 600px) {

    .bear-schedule-card {
        align-items: flex-start;
        gap: 16px;
        padding: 20px;
    }

    .bear-schedule-card .event-icon {
        width: 55px;
        height: 55px;
        font-size: 32px;
    }

    .bear-schedule-content h3 {
        font-size: 20px;
    }

}

.logo img {
    height: 45px;
    width: auto;
    display: block;
}

@media (max-width: 600px) {
    .logo img {
        height: 45px;
    }
}



/* ===== Kingdom 1202 — theme ===== */

/* ========================================
   ADMIN DASHBOARD
======================================== */
/* ========================================
   ADMIN DASHBOARD
======================================== */

.admin-card {
    max-width: 900px;
    margin: 0 auto 30px;
    padding: 30px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
}

.admin-card h2 {
    font-family: var(--font-display);
    margin: 0 0 10px;
    color: var(--text);
}

.admin-card > p {
    color: var(--text-muted);
    margin-bottom: 25px;
}

.admin-card form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}


/* ---- Form fields ---- */

.admin-card input[type="text"],
.admin-card input[type="email"],
.admin-card input[type="password"],
.admin-card input[type="datetime-local"],
.admin-card select,
.admin-card textarea {
    width: 100%;
    padding: 13px 15px;
    background: #10121a;
    color: #eae6da;
    border: 1px solid #2c3044;
    border-radius: 5px;
    font-family: var(--font-body);
    font-size: 15px;
    outline: none;
    box-sizing: border-box;
}

.admin-card input::placeholder,
.admin-card textarea::placeholder {
    color: #777484;
}

.admin-card input:focus,
.admin-card select:focus,
.admin-card textarea:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 2px rgba(201, 162, 39, 0.10);
}


/* ---- Select dropdown ---- */

.admin-card select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;

    background-color: #10121a;

    background-image:
        linear-gradient(45deg, transparent 50%, #c9a227 50%),
        linear-gradient(135deg, #c9a227 50%, transparent 50%);

    background-position:
        calc(100% - 20px) 19px,
        calc(100% - 14px) 19px;

    background-size:
        6px 6px,
        6px 6px;

    background-repeat: no-repeat;

    padding-right: 45px;
}

.admin-card select option {
    background: #171a26;
    color: #eae6da;
}


/* ---- Textarea ---- */

.admin-card textarea {
    resize: vertical;
    min-height: 180px;
    line-height: 1.6;
}


/* ---- Date field ---- */

.admin-card input[type="datetime-local"] {
    color-scheme: dark;
    cursor: pointer;
}

.admin-card input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(75%) sepia(40%) saturate(600%);
    cursor: pointer;
}


/* ---- Labels ---- */

.admin-card label {
    color: var(--text-muted);
    font-size: 14px;
}


/* ---- Checkboxes ---- */

.admin-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text) !important;
    cursor: pointer;
}

.admin-checkbox input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;

    width: 18px;
    height: 18px;

    margin: 0;

    background: #10121a;
    border: 1px solid #2c3044;
    border-radius: 3px;

    cursor: pointer;
    position: relative;
}

.admin-checkbox input[type="checkbox"]:checked {
    background: var(--gold);
    border-color: var(--gold);
}

.admin-checkbox input[type="checkbox"]:checked::after {
    content: "✓";

    position: absolute;

    left: 50%;
    top: 50%;

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

    color: #10121a;
    font-size: 13px;
    font-weight: 800;
}


/* ---- Buttons ---- */

.admin-card .primary-button {
    align-self: flex-start;
    cursor: pointer;
    border: none;
}

.admin-header {
    max-width: 900px;
    margin: 0 auto 25px;

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

.admin-header h2 {
    margin: 0;
    font-family: var(--font-display);
}


/* ---- Messages ---- */

#loginMessage,
#announcementMessage {
    margin-top: 15px;
    color: var(--gold-bright);
}


/* ---- Dashboard ---- */

#dashboardSection {
    padding-bottom: 60px;
}

.page-content {
    max-width: 1180px;
    margin: 0 auto;
    padding: 80px 30px;
}

.page-header {
    text-align: center;
    margin-bottom: 50px;
}

.page-header h1 {
    font-family: var(--font-display);
    font-size: 42px;
    margin: 10px 0;
}

.page-header p:not(.section-label) {
    color: var(--text-muted);
}

/* ========================================
   ADMIN ANNOUNCEMENT LIST
======================================== */

.admin-announcement-item {
    padding: 22px;
    margin-bottom: 15px;

    background: #10121a;
    border: 1px solid var(--line);
    border-radius: 6px;
}

.admin-announcement-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.admin-announcement-category {
    display: inline-block;

    color: var(--gold-bright);

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;

    margin-bottom: 6px;
}

.admin-announcement-item h3 {
    margin: 0;

    font-family: var(--font-display);
    font-size: 20px;
    color: var(--text);
}

.admin-announcement-status {
    padding: 5px 9px;

    border: 1px solid var(--line);
    border-radius: 3px;

    color: var(--gold-bright);

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
}

.admin-announcement-content {
    margin: 15px 0;

    color: var(--text-muted);
    white-space: pre-line;
}

.admin-announcement-meta {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;

    color: #777484;
    font-size: 12px;
}


/* ========================================
   KINGDOM NOTICE BOARD
======================================== */

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

.announcement-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 24px;

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

.announcement-card:hover {
    transform: translateY(-4px);
    border-color: var(--gold);
    box-shadow: 0 14px 30px rgba(0,0,0,.35);
}

.announcement-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}

.announcement-category {
    color: var(--gold-bright);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.announcement-pinned {
    color: var(--crimson-bright);
    font-size: 10px;
    font-weight: 700;
}

.announcement-card h3 {
    font-family: var(--font-display);
    font-size: 20px;
    margin: 0 0 10px;
    color: var(--text);
}

.announcement-card p {
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.7;
    margin: 0 0 18px;

    white-space: pre-line;
}

.announcement-date {
    color: #777484;
    font-size: 12px;
    border-top: 1px solid var(--line);
    padding-top: 12px;
}

.announcement-loading {
    color: var(--text-muted);
}

/* ========================================
   ANNOUNCEMENT ACTIONS
======================================== */

.admin-announcement-actions {
    display: flex;
    gap: 10px;
    margin-top: 18px;
    padding-top: 15px;
    border-top: 1px solid var(--line);
}

.announcement-edit-button,
.announcement-delete-button {
    padding: 8px 14px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
    cursor: pointer;
}

.announcement-edit-button {
    background: transparent;
    color: var(--gold-bright);
    border: 1px solid var(--gold);
}

.announcement-edit-button:hover {
    background: rgba(201, 162, 39, .12);
}

.announcement-delete-button {
    background: transparent;
    color: var(--crimson-bright);
    border: 1px solid var(--crimson);
}

.announcement-delete-button:hover {
    background: rgba(143, 38, 54, .12);
}

.announcement-loading {
    color: var(--text-muted);
    text-align: center;
    padding: 40px 20px;
    grid-column: 1 / -1;
}

.admin-footer-link {
    display: inline-block;
    margin-top: 10px;
    color: var(--text-muted);
    font-size: 12px;
    text-decoration: none;
    transition: color 0.2s ease;
}

.admin-footer-link:hover {
    color: var(--gold-bright);
}


/* ========================================
   KINGDOM NOTICE BOARD
======================================== */

.notice-board {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 360px 1fr;
    min-height: 430px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 10px;
    overflow: hidden;
}


/* ========================================
   NOTICE LIST
======================================== */

.notice-list {
    background: #10121a;
    border-right: 1px solid var(--line);
    overflow-y: auto;
}


.notice-list-item {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    position: relative;
    padding: 18px 22px;
    background: transparent;
    color: var(--text);
    border: none;
    border-bottom: 1px solid var(--line);
    text-align: left;
    cursor: pointer;
    transition:
        background .2s ease,
        border-color .2s ease;
}


.notice-list-item:hover {
    background: #171a26;
}


.notice-list-item.active {
    background: #1c1f2e;
    border-left: 3px solid var(--gold);
    padding-left: 19px;
}


.notice-list-category {
    color: var(--gold-bright);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}


.notice-list-title {
    color: var(--text);
    font-size: 15px;
    line-height: 1.4;
}


.notice-list-date {
    color: #777484;
    font-size: 11px;
}


.notice-list-pinned {
    position: absolute;
    top: 17px;
    right: 18px;
    font-size: 14px;
}


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

.notice-content {
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}


.notice-content-top {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}


.notice-content h3 {
    font-family: var(--font-display);
    font-size: 28px;
    line-height: 1.3;
    margin: 0 0 20px;
    color: var(--text);
}


.notice-full-content {
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.8;
    white-space: pre-line;
    margin: 0 0 25px;
}


.notice-placeholder {
    text-align: center;
    color: var(--text-muted);
}


.notice-placeholder span {
    display: block;
    font-size: 42px;
    margin-bottom: 15px;
}


.notice-placeholder h3 {
    font-family: var(--font-display);
    color: var(--text);
    font-size: 22px;
    margin-bottom: 8px;
}


.notice-placeholder p {
    color: var(--text-muted);
    margin: 0;
}


.announcement-empty {
    width: 100%;
    padding: 40px 20px;
    text-align: center;
    color: var(--text-muted);
}

.kingdom-info-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;

    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}

.kingdom-info-grid .info-card {
    min-width: 0;
}

/* Mobile */
@media (max-width: 768px) {

    .kingdom-info-grid {
        grid-template-columns: 1fr;
        width: 100%;
        max-width: 100%;
    }

}


@media (max-width: 768px) {

    .notice-board {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 100%;
        min-height: auto;
    }

    .notice-list {
        width: 100%;
        max-height: 260px;
        overflow-y: auto;
        border-right: none;
        border-bottom: 1px solid var(--line);
    }

    .notice-list-item {
        padding: 16px 18px;
    }

    .notice-content {
        width: 100%;
        padding: 28px 20px;
        min-height: 300px;
    }

    .notice-content h3 {
        font-size: 22px;
    }

    .notice-full-content {
        font-size: 14px;
        line-height: 1.7;
    }

}
@media (max-width: 768px) {

    .notice-list-item.active {
        border-left: 3px solid var(--gold);
        background: var(--panel);
    }

}

/* Simple Admin List */

.admin-simple-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
}

.admin-simple-list-item:last-child {
    border-bottom: none;
}

.admin-simple-list-title {
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}

.admin-simple-list-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.admin-simple-list-actions button {
    padding: 7px 12px;
    font-size: 11px;
    font-weight: 700;
    border: 1px solid var(--line);
    background: var(--bg-alt);
    color: var(--text);
    cursor: pointer;
    border-radius: 4px;
}

.admin-simple-list-actions button:hover {
    border-color: var(--gold);
    color: var(--gold-bright);
}

/* Admin Logout Button */

#logoutButton {
    padding: 8px 14px !important;
    background: #171a26 !important;
    border: 1px solid #2c3044 !important;
    color: #eae6da !important;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease !important;
}

#logoutButton:hover {
    background: #8f2636 !important;
    border-color: #b23347 !important;
    color: #ffffff !important;
}

/* Admin Action Buttons */

.guide-edit-button,
.announcement-edit-button {
    padding: 7px 12px;
    background: var(--bg-alt);
    border: 1px solid var(--line);
    color: var(--text-muted);
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.guide-edit-button:hover,
.announcement-edit-button:hover {
    background: rgba(201, 162, 39, 0.12);
    border-color: var(--gold);
    color: var(--gold-bright);
}








/* =========================================================
   GUIDES
   ========================================================= */

/* Guide Cards */

.guide-card {
    display: block;
    padding: 0;
    overflow: hidden;
    text-decoration: none;
    color: var(--text);
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.guide-card:hover {
    transform: translateY(-4px);
    border-color: var(--gold);
}

.guide-card-image {
    width: 100%;
    height: 190px;
    overflow: hidden;
    background: var(--bg-alt);
}

.guide-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.guide-card-content {
    padding: 20px;
}

.guide-card-category {
    margin: 0 0 8px;
    color: var(--gold-bright);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.guide-card h3 {
    margin: 0 0 10px;
    color: var(--text);
    font-family: var(--font-display);
    font-size: 20px;
    line-height: 1.3;
}

.guide-card-excerpt {
    margin: 0 0 18px;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.6;
}

.guide-card-meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: var(--text-muted);
    font-size: 11px;
    border-top: 1px solid var(--line);
    padding-top: 12px;
}


/* Single Guide */

.guide-single {
    max-width: 900px;
    margin: 0 auto;
}

.guide-back-link {
    display: inline-block;
    margin-bottom: 30px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 13px;
    transition: color 0.2s ease;
}

.guide-back-link:hover {
    color: var(--gold-bright);
}

.guide-article {
    width: 100%;
}

.guide-article-title {
    margin: 0 0 15px;
    color: var(--text);
    font-family: var(--font-display);
    font-size: clamp(32px, 5vw, 52px);
    line-height: 1.15;
}

.guide-article-excerpt {
    margin: 0 0 18px;
    color: var(--text-muted);
    font-size: 16px;
    line-height: 1.7;
}

.guide-article-meta {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
    color: var(--text-muted);
    font-size: 12px;
}

.guide-article-image {
    width: 100%;
    margin-bottom: 35px;
    overflow: hidden;
}

.guide-article-image img {
    width: 100%;
    height: auto;
    display: block;
}

.guide-article-content {
    color: var(--text);
    font-size: 15px;
    line-height: 1.8;
}

.guide-article-content p {
    margin: 0 0 20px;
}

.guide-article-content h2 {
    margin: 35px 0 15px;
    color: var(--text);
    font-family: var(--font-display);
}

.guide-article-content h3 {
    margin: 28px 0 12px;
    color: var(--text);
    font-family: var(--font-display);
}

.guide-article-content ul,
.guide-article-content ol {
    margin: 0 0 20px;
    padding-left: 25px;
}

.guide-article-content li {
    margin-bottom: 8px;
}

.guide-article-content a {
    color: var(--gold-bright);
}

.guide-article-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 25px 0;
}

.guide-card-meta {
    font-size: 10px !important;
    color: var(--text-muted);
}

.guide-card-meta span {
    font-size: 10px !important;
}
/* Mobile */

@media (max-width: 700px) {

    .guide-card-image {
        height: 180px;
    }

    .guide-card-meta {
        flex-direction: column;
        gap: 5px;
    }

    .guide-article-title {
        font-size: 32px;
    }

    .guide-article-meta {
        flex-direction: column;
        gap: 6px;
    }

}

/* ================================
   GOVERNOR GEAR
================================ */

.gear-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 25px;
    flex-wrap: wrap;
}

.gear-tab {
    padding: 12px 24px;
    border: 1px solid var(--line);
    background: var(--panel);
    color: var(--text-muted);
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 14px;
    transition: 0.2s ease;
}

.gear-tab:hover {
    color: var(--text);
    border-color: var(--gold);
}

.gear-tab.active {
    background: var(--gold);
    color: #111;
    border-color: var(--gold);
}

.gear-preview {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 35px;
}

.gear-preview-card {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px;
    background: var(--panel);
    border: 1px solid var(--line);
    transition: 0.2s ease;
}

.gear-preview-card img {
    width: 80px;
    height: 80px;
    object-fit: contain;
}

.gear-preview-card span {
    display: block;
    color: var(--gold-bright);
    font-size: 11px;
    letter-spacing: 1.5px;
    margin-bottom: 5px;
}

.gear-preview-card strong {
    color: var(--text);
    font-size: 16px;
}

.gear-preview-card:not(.active) {
    opacity: 0.55;
}

.gear-preview-card.active {
    border-color: var(--gold);
    opacity: 1;
}

.gear-table-wrapper {
    width: 100%;
    overflow-x: auto;
}

.gear-table {
    width: 100%;
    min-width: 900px;
    border-collapse: collapse;
    background: var(--panel);
}

.gear-table th,
.gear-table td {
    padding: 14px 12px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    white-space: nowrap;
}

.gear-table th {
    color: var(--gold-bright);
    font-size: 12px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.gear-table td {
    color: var(--text);
    font-size: 14px;
}

.gear-table tr:hover td {
    background: var(--bg-alt);
}

@media (max-width: 800px) {

    .gear-preview {
        grid-template-columns: 1fr;
    }

    .gear-preview-card {
        padding: 14px;
    }

    .gear-preview-card img {
        width: 65px;
        height: 65px;
    }

}
.guide-article-content {
    white-space: pre-line;
}


/* =========================================================
   GUIDE EDITOR
   ========================================================= */

.guide-editor {
    width: 100%;
    border: 1px solid var(--line);
    background: var(--panel);
}

.guide-editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px;
    border-bottom: 1px solid var(--line);
    background: var(--bg-alt);
}

.guide-editor-toolbar button {
    border: 1px solid var(--line);
    background: var(--panel);
    color: var(--text);
    padding: 7px 11px;
    cursor: pointer;
    font-size: 12px;
}

.guide-editor-toolbar button:hover {
    background: var(--gold);
    color: #000;
}

.guide-editor-content {
    min-height: 350px;
    padding: 18px;
    outline: none;
    color: var(--text);
    font-size: 15px;
    line-height: 1.7;
}

.guide-editor-content:empty::before {
    content: attr(data-placeholder);
    color: var(--text-muted);
    pointer-events: none;
}

.guide-editor-content h2 {
    margin: 25px 0 12px;
    font-size: 24px;
}

.guide-editor-content h3 {
    margin: 20px 0 10px;
    font-size: 19px;
}

.guide-editor-content ul,
.guide-editor-content ol {
    padding-left: 25px;
    margin: 12px 0;
}

.guide-editor-content a {
    color: var(--gold-bright);
}

/* Guide Editor - Admin */
/* =========================================================
   GUIDE EDITOR - ADMIN
   ========================================================= */

.admin-card .guide-editor {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #2c3044 !important;
    background: #171a26 !important;
    border-radius: 4px;
    overflow: hidden;
}

.admin-card .guide-editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 10px;
    border-bottom: 1px solid #2c3044 !important;
    background: #1c1f2e !important;
}

.admin-card .guide-editor-toolbar button {
    width: auto !important;
    min-width: 40px !important;
    height: auto !important;
    padding: 7px 11px !important;
    margin: 0 !important;

    border: 1px solid #2c3044 !important;
    border-radius: 3px;

    background: #171a26 !important;
    color: #eae6da !important;

    cursor: pointer;
    font-family: var(--font-body);
    font-size: 12px;
    line-height: 1.2;
}

.admin-card .guide-editor-toolbar button:hover {
    background: #c9a227 !important;
    border-color: #e3bc4a !important;
    color: #10121a !important;
}

.admin-card .guide-editor-content {
    width: 100%;
    min-height: 350px;
    box-sizing: border-box;

    padding: 18px;

    border: none !important;
    outline: none;

    background: #171a26 !important;
    color: #eae6da !important;

    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.7;
    text-align: left;
}

.admin-card .guide-editor-content:focus {
    outline: none;
}

.admin-card .guide-editor-content:empty::before {
    content: attr(data-placeholder);
    color: #9a97a8;
}

.admin-card .guide-editor-content h2 {
    margin: 25px 0 12px;
    color: #eae6da;
    font-family: var(--font-display);
    font-size: 24px;
}

.admin-card .guide-editor-content h3 {
    margin: 20px 0 10px;
    color: #eae6da;
    font-family: var(--font-display);
    font-size: 19px;
}

.admin-card .guide-editor-content p {
    margin: 0 0 15px;
}

.admin-card .guide-editor-content ul,
.admin-card .guide-editor-content ol {
    margin: 10px 0 15px;
    padding-left: 25px;
}

.admin-card .guide-editor-content li {
    margin-bottom: 6px;
}

.admin-card .guide-editor-content a {
    color: #e3bc4a;
}


/* Guide Back Button */

/* Guide Back Button */

.guide-single .guide-back-link,
.guide-article .guide-back-link {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;

    margin-bottom: 30px;
    padding: 9px 16px;

    border: 1px solid #2c3044 !important;
    border-radius: 4px;

    background: #171a26 !important;
    color: #eae6da !important;

    text-decoration: none !important;
    font-size: 13px;
    font-weight: 600;

    transition: all 0.2s ease;
}

.guide-single .guide-back-link:hover,
.guide-article .guide-back-link:hover {
    background: #c9a227 !important;
    border-color: #e3bc4a !important;
    color: #10121a !important;

    transform: translateX(-2px);
}





/* Kingdom 1202 color overrides */

body {
    background: var(--sf-bg);
    color: var(--sf-text);
}

.card,
.admin-card,
.guide-card {
    background: var(--sf-card);
    border-color: var(--sf-border);
}

.card:hover,
.guide-card:hover {
    background: var(--sf-card-hover);
    border-color: var(--sf-red);
}

.section-label {
    color: var(--sf-yellow);
}

.primary-button {
    background: var(--sf-red);
    color: #FFFFFF;
}

.primary-button:hover {
    background: var(--sf-red-light);
    color: #FFFFFF;
}

/* Keep normal links from inheriting button colors */
a {
    color: inherit;
}

a:hover {
    color: inherit;
}

/* Navigation */
.nav-links a:hover {
    color: var(--sf-red-light);
}

/* Discord button */
.discord-button {
    color: #FFFFFF;
}

.discord-button:hover {
    color: #FFFFFF;
}


/* =========================
   KINGDOM 1202 NAVBAR
   ========================= */


/* Discord button */

.discord-button {
    background: #B32635;
    color: #FFFFFF !important;
    border: 1px solid #B32635;
    padding: 9px 16px !important;
    border-radius: 5px;
    font-weight: 700 !important;
    transition: all 0.2s ease;
}

.discord-button:hover {
    background: #D43A4A !important;
    border-color: #D43A4A;
    color: #FFFFFF !important;
    transform: translateY(-1px);
}

/* Remove underline from Discord */

.discord-button::after {
    display: none !important;
}




 /* ==============================
    KINGDOM 1202 - DYNAMIC NAV
    ============================== */

/* ==============================
   KINGDOM 1202 NAVIGATION
   ============================== */

/* =========================================
   KINGDOM 1202 - NAVIGATION
   ========================================= */

.navbar {
    position: sticky;
    top: 0;
    z-index: 1000;

    width: 100%;

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

    padding: 14px 5%;

    background: rgba(10, 10, 10, 0.96);
    border-bottom: 1px solid #242424;

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}


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

.navbar .logo {
    display: flex;
    align-items: center;
}

.navbar .logo img {
    display: block;
    width: auto;
    height: 42px;

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

.navbar .logo img:hover {
    transform: scale(1.04);

    filter:
        drop-shadow(0 0 8px rgba(179, 38, 53, 0.35));
}


/* =========================================
   DESKTOP NAV
   ========================================= */

#siteNav {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 4px;

    margin-left: auto;
    margin-right: 25px;
}

#siteNav a {
    position: relative;

    display: inline-flex;
    align-items: center;

    padding: 11px 13px;

    color: #9A9A9A;

    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;

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

    text-decoration: none;

    border-radius: 4px;

    transition:
        color 0.25s ease,
        background 0.25s ease,
        transform 0.25s ease;
}


/* Hover background */

#siteNav a:hover {
    color: #FFFFFF;

    background: rgba(179, 38, 53, 0.09);

    transform: translateY(-2px);
}


/* Animated red underline */

#siteNav a::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: 4px;

    width: 0;
    height: 2px;

    background: #B32635;

    transform: translateX(-50%);

    box-shadow:
        0 0 6px rgba(179, 38, 53, 0.7);

    transition:
        width 0.3s ease;
}


#siteNav a:hover::after {
    width: 60%;
}


/* Active page */

#siteNav a.active {
    color: #FFFFFF;

    background: rgba(179, 38, 53, 0.12);
}


#siteNav a.active::after {
    width: 60%;
}


/* =========================================
   NAV ACTIONS
   ========================================= */

.nav-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}


/* Discord */

.nav-actions .discord-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 9px 17px;

    background: #B32635;
    color: #FFFFFF !important;

    border: 1px solid #B32635;
    border-radius: 5px;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;

    text-decoration: none;

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


.nav-actions .discord-button:hover {
    background: #D43A4A;
    border-color: #D43A4A;

    color: #FFFFFF !important;

    transform: translateY(-2px);

    box-shadow:
        0 6px 18px rgba(179, 38, 53, 0.25);
}


/* =========================================
   MOBILE MENU BUTTON
   ========================================= */

.mobile-menu-button {
    display: none;

    width: 42px;
    height: 42px;

    padding: 0;

    background: #151515;

    border: 1px solid #303030;
    border-radius: 5px;

    cursor: pointer;

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

    gap: 5px;

    transition:
        background 0.25s ease,
        border-color 0.25s ease;
}


.mobile-menu-button span {
    display: block;

    width: 19px;
    height: 2px;

    background: #FFFFFF;

    transition:
        transform 0.25s ease,
        opacity 0.25s ease;
}


.mobile-menu-button:hover {
    background: #B32635;
    border-color: #B32635;
}


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

@media (max-width: 850px) {

    .navbar {
        padding: 12px 20px;
    }


    .navbar .logo img {
        height: 38px;
    }


    /* Hide desktop navigation */

    #siteNav {
        display: none;

        position: absolute;

        top: 100%;
        left: 0;
        right: 0;

        margin: 0;

        padding: 12px 20px 18px;

        flex-direction: column;
        align-items: stretch;

        gap: 4px;

        background: rgba(10, 10, 10, 0.98);

        border-bottom: 1px solid #292929;

        box-shadow:
            0 12px 30px rgba(0, 0, 0, 0.35);
    }


    /* Open mobile menu */

    #siteNav.mobile-open {
        display: flex;
    }


    #siteNav a {
        width: 100%;

        padding: 13px 15px;

        font-size: 12px;

        justify-content: flex-start;

        border-radius: 4px;
    }


    #siteNav a::after {
        left: 15px;
        bottom: 7px;

        transform: none;
    }


    #siteNav a:hover::after,
    #siteNav a.active::after {
        width: 35px;
    }


    #siteNav a:hover {
        transform: translateX(4px);
    }


    /* Discord stays hidden on mobile */

    .nav-actions .discord-button {
        display: none;
    }


    /* Show hamburger */

    .mobile-menu-button {
        display: flex;
    }

}


/* =========================================
   HAMBURGER → X
   ========================================= */

.mobile-menu-button.open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.mobile-menu-button.open span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-button.open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}


/* =========================================================
   KINGDOM 1202 — PREMIUM NAVBAR OVERRIDE
   Add this at the VERY BOTTOM of styles.css
========================================================= */

.navbar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    min-height: 76px;
    padding: 0 28px;
    background: rgba(10, 10, 10, 0.96);
    border-bottom: 1px solid #2a2a2a;
    z-index: 1000;
}

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

.navbar .logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.navbar .logo img {
    display: block;
    max-height: 48px;
    width: auto;
}

/* =========================
   DESKTOP NAVIGATION
========================= */

.navbar nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-left: auto;
}

.navbar nav a {
    position: relative;
    display: flex;
    align-items: center;
    height: 76px;
    padding: 0 15px;

    color: #d8d8d8;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-decoration: none;

    transition:
        color 0.25s ease,
        text-shadow 0.25s ease;
}

/* Animated underline */

.navbar nav a::after {
    content: "";
    position: absolute;
    left: 15px;
    right: 15px;
    bottom: 0;

    height: 2px;
    background: #b32635;

    transform: scaleX(0);
    transform-origin: center;

    box-shadow: 0 0 8px rgba(179, 38, 53, 0.65);

    transition: transform 0.25s ease;
}

.navbar nav a:hover {
    color: #ffffff;
    text-shadow: 0 0 10px rgba(212, 58, 74, 0.35);
}

.navbar nav a:hover::after {
    transform: scaleX(1);
}

/* Active page */

.navbar nav a.active {
    color: #ffffff;
}

.navbar nav a.active::after {
    transform: scaleX(1);
}

/* =========================
   NAV ACTIONS
========================= */

.navbar .nav-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

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

.navbar .discord-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 92px;
    height: 38px;
    padding: 0 18px;

    background: #b32635;
    border: 1px solid #d43a4a;
    border-radius: 5px;

    color: #ffffff;
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-decoration: none;

    box-shadow: 0 0 0 rgba(179, 38, 53, 0);

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

.navbar .discord-button:hover {
    background: #d43a4a;
    border-color: #d43a4a;
    color: #ffffff;

    box-shadow:
        0 0 14px rgba(179, 38, 53, 0.45);

    transform: translateY(-1px);
}

/* =========================
   HAMBURGER
========================= */

.mobile-menu-button {
    display: none;

    width: 42px;
    height: 42px;
    padding: 0;

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

    background: #171717;
    border: 1px solid #2a2a2a;
    border-radius: 5px;

    color: #ffffff;
    font-size: 24px;
    line-height: 1;

    cursor: pointer;

    transition:
        border-color 0.25s ease,
        background 0.25s ease,
        color 0.25s ease;
}

.mobile-menu-button:hover {
    background: #1d1d1d;
    border-color: #b32635;
    color: #ffffff;
}

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

@media (max-width: 850px) {

    .navbar {
        min-height: 68px;
        padding: 0 18px;
        gap: 15px;
    }

    .navbar .logo img {
        max-height: 42px;
    }

    .navbar .nav-actions {
        margin-left: auto;
    }

    /* Show hamburger */

    .mobile-menu-button {
        display: flex;
    }

    /* Hide desktop navigation */

    .navbar nav {
        display: none;
    }

    /* Open mobile navigation */

    .navbar nav.mobile-menu-open {
        position: absolute;

        top: 100%;
        left: 0;
        right: 0;

        display: flex;
        flex-direction: column;
        align-items: stretch;

        padding: 10px 18px 18px;

        background: rgba(10, 10, 10, 0.98);
        border-bottom: 1px solid #2a2a2a;

        box-shadow:
            0 12px 25px rgba(0, 0, 0, 0.45);
    }

    .navbar nav.mobile-menu-open a {
        display: flex;
        align-items: center;

        width: 100%;
        height: 48px;
        padding: 0 14px;

        border-bottom: 1px solid #202020;

        font-size: 13px;
    }

    .navbar nav.mobile-menu-open a:last-child {
        border-bottom: none;
    }

    .navbar nav.mobile-menu-open a::after {
        display: none;
    }

    .navbar nav.mobile-menu-open a:hover {
        background: #171717;
        color: #ffffff;
        text-shadow: none;
    }

    .navbar nav.mobile-menu-open a.active {
        color: #d43a4a;
        background: #171717;
    }

    /* Discord stays visible */

    .navbar .discord-button {
        min-width: 82px;
        height: 36px;
        padding: 0 14px;
        font-size: 11px;
    }
}

/* =========================
   SMALL PHONES
========================= */

@media (max-width: 520px) {

    .navbar {
        padding: 0 14px;
    }

    .navbar .logo img {
        max-height: 38px;
        max-width: 150px;
    }

    .navbar .discord-button {
        display: none;
    }

    .mobile-menu-button {
        width: 40px;
        height: 40px;
    }
}

/* =========================================================
   MOBILE MENU — FINAL OVERRIDE
========================================================= */

@media (max-width: 850px) {

    /* Hide menu by default */
    .navbar nav {
        display: none !important;
    }

    /* Show menu when JS adds mobile-menu-open */
    .navbar nav.mobile-menu-open {
        display: flex !important;

        position: absolute;
        top: 100%;
        left: 0;
        right: 0;

        flex-direction: column;
        align-items: stretch;

        padding: 10px 18px 18px;

        background: #0a0a0a;
        border-bottom: 1px solid #2a2a2a;

        box-shadow: 0 12px 25px rgba(0, 0, 0, 0.5);

        z-index: 9999;
    }

    .navbar nav.mobile-menu-open a {
        display: flex !important;

        width: 100%;
        height: 48px;

        align-items: center;

        padding: 0 14px;

        color: #d8d8d8;

        border-bottom: 1px solid #202020;

        text-decoration: none;
    }

    .navbar nav.mobile-menu-open a:hover {
        background: #171717;
        color: #ffffff;
    }

    .navbar nav.mobile-menu-open a.active {
        color: #d43a4a;
    }

    .mobile-menu-button {
        display: flex !important;
        position: relative;
        z-index: 10000;
    }
}

/* =========================
   CENTER DESKTOP NAV
========================= */

@media (min-width: 851px) {
    .navbar {
        position: relative;
    }

    .navbar nav {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        margin-left: 0;
    }
}

/* =========================================================
   NAVBAR — CENTERED CONTENT WIDTH
========================================================= */

@media (min-width: 851px) {

    .navbar {
        padding-left: 40px;
        padding-right: 40px;
    }

    .navbar .logo {
        margin-left: 30px;
    }

    .navbar .nav-actions {
        margin-right: 30px;
    }

    .navbar nav {
        left: 50%;
        transform: translateX(-50%);
    }
}


/* Secondary Button */
.secondary-button {
    color: #ffffff !important;
    border: 1px solid #b32635 !important;
    background: transparent;
}

.secondary-button:hover {
    color: #ffffff !important;
    border-color: #d43a4a !important;
    background: rgba(179, 38, 53, 0.12);
}

/* Red Accent Text */
.guide-single .guide-back-link,
.guide-article .guide-back-link {
    display: inline-flex;
    align-items: center;

    padding: 8px 14px !important;

    background: #171a26 !important;
    border: 1px solid #2c3044 !important;
    color: #eae6da !important;

    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;

    border-radius: 4px;
    cursor: pointer;

    text-decoration: none;

    transition: all 0.2s ease !important;
}

.guide-single .guide-back-link:hover,
.guide-article .guide-back-link:hover{
    background: #8f2636 !important;
    border-color: #b23347 !important;
    color: #ffffff !important;
}

.logo span {
    color: #b23347;
}

.back-button {
    
    
    padding: 8px 14px !important;

    background: #171a26 !important;
    border: 1px solid #2c3044 !important;
    color: #eae6da !important;

    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;

    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    margin: 0px 0px 0px 85px;
    transition: all 0.2s ease !important;
}

.back-button:hover {
    background: #8f2636 !important;
    border-color: #b23347 !important;
    color: #ffffff !important;
}

@media (max-width: 850px) {
    .back-button {
        margin: 0 0 30px -20px;
    }
}