:root {
    --bg: #090b0d;
    --bg-soft: #111418;
    --panel: #15191d;
    --panel-light: #1c2126;
    --border: #493a24;
    --border-light: #806238;
    --gold: #c99a4b;
    --gold-light: #e2bc72;
    --text: #d9d5cc;
    --text-soft: #918b82;
    --green: #65b96f;
    --red: #c65353;
}

* {
    box-sizing: border-box;
}

html {
    margin: 0;
    padding: 0;
    background: var(--bg);
}

body {
    margin: 0;
    padding: 0;
    background:
        radial-gradient(circle at top, #25201a 0, #0c0e10 420px, #090b0d 900px);
    color: var(--text);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 15px;
    line-height: 1.6;
}

a {
    color: var(--gold-light);
    text-decoration: none;
    transition: 0.2s ease;
}

a:hover {
    color: #fff0c2;
}

.topbar {
    position: relative;
    z-index: 20;
    min-height: 82px;
    background:
        linear-gradient(180deg, rgba(26,28,30,.98), rgba(10,12,14,.98));
    border-bottom: 1px solid var(--border-light);
    box-shadow: 0 4px 20px rgba(0,0,0,.65);
}

.topbar-inner {
    width: min(1380px, calc(100% - 50px));
    min-height: 82px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 34px;
}

.brand {
    display: flex;
    flex-direction: column;
    min-width: 225px;
    line-height: 1;
}

.brand-main {
    color: var(--gold-light);
    font-size: 29px;
    font-weight: 700;
    letter-spacing: 4px;
    text-shadow: 0 2px 8px #000;
}

.brand-sub {
    margin-top: 8px;
    color: #81745f;
    font-size: 10px;
    letter-spacing: 3px;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
}

.main-nav a {
    padding: 28px 16px 26px;
    color: #b9b4ab;
    font-family: Arial, sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 2px solid transparent;
}

.main-nav a:hover {
    color: var(--gold-light);
    border-bottom-color: var(--gold);
    background: rgba(255,255,255,.025);
}

.top-actions {
    display: flex;
    gap: 9px;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    font-family: Arial, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    cursor: pointer;
    transition: .2s ease;
}

.btn-small {
    min-height: 38px;
    padding: 0 15px;
    font-size: 11px;
}

.btn-large {
    min-height: 50px;
    padding: 0 24px;
    font-size: 12px;
}

.btn-gold {
    color: #17130d;
    background: linear-gradient(180deg, #e3bd72, #a9772f);
    border-color: #e0b66b;
    box-shadow: inset 0 1px rgba(255,255,255,.28), 0 3px 12px rgba(0,0,0,.35);
}

.btn-gold:hover {
    color: #090705;
    background: linear-gradient(180deg, #f0ce8e, #bd8737);
}

.btn-dark {
    color: #d4cec4;
    background: #171a1d;
    border-color: #3d4145;
}

.btn-dark:hover {
    color: #fff;
    border-color: #70614b;
}

.btn-outline {
    color: #e3d4ba;
    background: rgba(5,6,7,.58);
    border-color: #7f6744;
}

.btn-outline:hover {
    color: #fff;
    background: rgba(63,50,32,.6);
    border-color: var(--gold-light);
}

.hero {
    position: relative;
    min-height: 500px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background:
        radial-gradient(circle at 50% 25%, rgba(122,82,37,.24), transparent 34%),
        linear-gradient(180deg, rgba(15,16,17,.15), rgba(7,8,9,.95)),
        linear-gradient(135deg, #171a1b, #2a2017 50%, #0c0e0f);
    border-bottom: 1px solid #4d3b25;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .28;
    background:
        repeating-linear-gradient(
            90deg,
            rgba(255,255,255,.018) 0,
            rgba(255,255,255,.018) 1px,
            transparent 1px,
            transparent 8px
        );
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(0,0,0,.72), transparent 30%, transparent 70%, rgba(0,0,0,.72)),
        linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.72));
}

.hero-content {
    position: relative;
    z-index: 2;
    width: min(900px, calc(100% - 40px));
    padding: 72px 20px;
}

.eyebrow {
    margin-bottom: 14px;
    color: #bca47c;
    font-family: Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 4px;
}

.hero h1 {
    margin: 0;
    color: #e5c17b;
    font-size: clamp(54px, 8vw, 105px);
    line-height: .95;
    letter-spacing: 9px;
    text-shadow:
        0 2px 0 #60461f,
        0 5px 18px #000,
        0 0 40px rgba(194,139,63,.18);
}

.hero-subtitle {
    margin: 24px auto 0;
    color: #c4bdb1;
    font-family: Arial, sans-serif;
    font-size: 14px;
    letter-spacing: 1px;
}

.hero-buttons {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
}

.server-pill {
    width: fit-content;
    margin: 28px auto 0;
    padding: 8px 14px;
    border: 1px solid #3a3e42;
    border-radius: 999px;
    background: rgba(8,10,11,.72);
    color: #bab5ad;
    font-family: Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
}

.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 8px;
    border-radius: 50%;
    background: #666;
}

.server-pill.online .status-dot {
    background: var(--green);
    box-shadow: 0 0 9px rgba(101,185,111,.75);
}

.server-pill.offline .status-dot {
    background: var(--red);
    box-shadow: 0 0 9px rgba(198,83,83,.7);
}

.page-shell {
    width: min(1380px, calc(100% - 50px));
    margin: 0 auto;
    padding: 34px 0 60px;
}

.quick-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    margin-bottom: 24px;
}

.panel,
.content-card {
    background:
        linear-gradient(180deg, rgba(29,33,37,.98), rgba(17,20,23,.98));
    border: 1px solid var(--border);
    box-shadow:
        inset 0 1px rgba(255,255,255,.025),
        0 8px 25px rgba(0,0,0,.28);
}

.panel {
    padding: 22px;
}

.panel-title,
.content-header {
    color: var(--gold-light);
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.panel-title {
    margin-bottom: 18px;
    padding-bottom: 11px;
    border-bottom: 1px solid #3b3328;
}

.status-main {
    margin-bottom: 16px;
    font-family: Arial, sans-serif;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 2px;
}

.online-text {
    color: var(--green);
}

.offline-text {
    color: var(--red);
}

.status-row {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 9px 0;
    border-bottom: 1px solid rgba(255,255,255,.045);
    color: #969088;
    font-family: Arial, sans-serif;
    font-size: 12px;
}

.status-row:last-child {
    border-bottom: 0;
}

.status-row strong {
    color: #d7d1c7;
    text-align: right;
}

.links-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-content: start;
    column-gap: 18px;
}

.links-panel .panel-title {
    grid-column: 1 / -1;
}

.links-panel a {
    padding: 10px 12px;
    margin-bottom: 8px;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.045);
    color: #c3bdb3;
    font-family: Arial, sans-serif;
    font-size: 12px;
}

.links-panel a:hover {
    color: var(--gold-light);
    border-color: #665033;
    background: rgba(201,154,75,.06);
}

.content-grid {
    display: grid;
    grid-template-columns: 255px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

.sidebar {
    min-width: 0;
}

.sidebar-link {
    display: block;
    padding: 11px 12px;
    margin-bottom: 5px;
    color: #bcb5aa;
    background: rgba(255,255,255,.018);
    border-left: 2px solid #383129;
    font-family: Arial, sans-serif;
    font-size: 12px;
}

.sidebar-link:hover {
    color: var(--gold-light);
    border-left-color: var(--gold);
    background: rgba(201,154,75,.06);
}

.gold-link {
    color: var(--gold-light);
}

.main-content {
    min-width: 0;
}

.content-header {
    padding: 15px 18px;
    background:
        linear-gradient(180deg, #211d18, #151719);
    border: 1px solid var(--border);
    border-bottom: 0;
}

.content-card {
    min-height: 400px;
    padding: 26px;
    overflow-x: auto;
}

.content-card h1,
.content-card h2,
.content-card h3 {
    color: var(--gold-light);
}

.content-card table {
    max-width: 100%;
}

.content-card input,
.content-card select,
.content-card textarea {
    max-width: 100%;
    padding: 8px 10px;
    color: #ddd7cd;
    background: #0f1214;
    border: 1px solid #4a4339;
}

.content-card input[type="submit"],
.content-card button {
    padding: 9px 14px;
    color: #17130d;
    background: linear-gradient(180deg, #e3bd72, #a9772f);
    border: 1px solid #d1a359;
    font-weight: 700;
    cursor: pointer;
}

.site-footer {
    padding: 38px 25px;
    text-align: center;
    background: #070809;
    border-top: 1px solid var(--border);
    color: #777168;
}

.footer-brand {
    color: var(--gold-light);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 4px;
}

.footer-text {
    margin-top: 6px;
    font-family: Arial, sans-serif;
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.footer-copy {
    margin-top: 15px;
    font-family: Arial, sans-serif;
    font-size: 10px;
    color: #5f5b55;
}

@media (max-width: 900px) {
    .topbar-inner {
        width: calc(100% - 30px);
        flex-wrap: wrap;
        padding: 14px 0;
        gap: 12px;
    }

    .brand {
        flex: 1;
    }

    .main-nav {
        order: 3;
        width: 100%;
        overflow-x: auto;
    }

    .main-nav a {
        padding: 12px 11px;
        white-space: nowrap;
    }

    .hero {
        min-height: 420px;
    }

    .quick-grid,
    .content-grid {
        grid-template-columns: 1fr;
    }

    .page-shell {
        width: calc(100% - 30px);
    }
}

@media (max-width: 600px) {
    .top-actions {
        width: 100%;
    }

    .top-actions .btn {
        flex: 1;
    }

    .hero-content {
        padding: 55px 10px;
    }

    .hero h1 {
        font-size: 48px;
        letter-spacing: 4px;
    }

    .hero-subtitle {
        font-size: 12px;
    }

    .hero-buttons {
        flex-direction: column;
    }

    .hero-buttons .btn {
        width: 100%;
    }

    .quick-grid {
        gap: 14px;
    }

    .links-panel {
        grid-template-columns: 1fr;
    }

    .content-card {
        padding: 15px;
    }
}

.news-card {
    margin-bottom: 24px;
    background: linear-gradient(180deg, rgba(24,28,32,.98), rgba(15,18,21,.98));
    border: 1px solid #4c3d29;
    box-shadow: 0 8px 24px rgba(0,0,0,.25);
}

.news-card-header {
    padding: 18px 20px 14px;
    border-bottom: 1px solid #3a3127;
    background: linear-gradient(180deg, rgba(48,40,29,.65), rgba(24,27,30,.95));
}

.news-meta {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 8px;
    color: #8f877c;
    font-family: Arial, sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.news-title {
    margin: 0;
    color: var(--gold-light);
    font-size: 24px;
    line-height: 1.25;
}

.news-content {
    padding: 20px;
    color: #d0cbc2;
}

.news-content p:first-child {
    margin-top: 0;
}

.news-content p:last-child {
    margin-bottom: 0;
}

.news-footer {
    padding: 12px 20px;
    text-align: right;
    border-top: 1px solid rgba(255,255,255,.05);
    background: rgba(0,0,0,.16);
}

.news-footer a {
    font-family: Arial, sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .8px;
}

@media (max-width: 600px) {
    .news-meta {
        flex-direction: column;
        gap: 4px;
    }

    .news-title {
        font-size: 20px;
    }

    .news-content {
        padding: 16px;
    }
}

.hero {
    background:
        linear-gradient(90deg, rgba(5,7,9,.92) 0%, rgba(5,7,9,.58) 42%, rgba(5,7,9,.28) 70%, rgba(5,7,9,.72) 100%),
        linear-gradient(0deg, #090b0d 0%, transparent 38%),
        url("images/gunzara-hero.png") center 48% / cover no-repeat;
}

.hero {
    min-height: 600px;
    background-size: cover;
    background-position: center center;
}

.hero {
    background-position: center 42%;
}

.subpage-hero {
    width: min(1180px, calc(100% - 30px));
    margin: 26px auto 0;
    padding: 34px 28px;
    border: 1px solid #4b3a26;
    background:
        linear-gradient(90deg, rgba(6,8,10,.92), rgba(18,20,23,.78)),
        url("images/gunzara-hero.png") center 38% / cover no-repeat;
    box-shadow: 0 10px 30px rgba(0,0,0,.28);
}

.subpage-hero h1 {
    margin: 0;
    color: var(--gold-light);
    font-size: 34px;
    letter-spacing: 3px;
    text-transform: uppercase;
    text-shadow: 0 3px 12px #000;
}

@media (max-width: 600px) {
    .subpage-hero {
        padding: 24px 18px;
    }

    .subpage-hero h1 {
        font-size: 26px;
        letter-spacing: 2px;
    }
}

.reference-header {
    position: relative;
    z-index: 20;
    background:
        linear-gradient(180deg, rgba(16,17,19,.98), rgba(8,9,11,.98));
    border-bottom: 1px solid #4a3822;
    box-shadow: 0 6px 24px rgba(0,0,0,.45);
}

.reference-header-inner {
    width: min(1500px, calc(100% - 36px));
    min-height: 84px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 250px 1fr auto;
    align-items: center;
    gap: 24px;
}

.reference-header .brand {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    text-decoration: none;
}

.reference-header .brand-main {
    color: #d2aa66;
    font-size: 31px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 4px;
    text-shadow: 0 2px 10px #000;
}

.reference-header .brand-sub {
    margin-top: 6px;
    color: #77716a;
    font-family: Arial, sans-serif;
    font-size: 9px;
    letter-spacing: 3px;
}

.reference-nav {
    display: flex;
    align-items: stretch;
    justify-content: center;
    height: 84px;
}

.reference-nav a {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 14px;
    color: #a7a29a;
    font-family: Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .9px;
    text-transform: uppercase;
    text-decoration: none;
    transition: color .2s ease, background .2s ease;
}

.reference-nav a:hover {
    color: #e0bd7a;
    background: rgba(255,255,255,.025);
}

.reference-nav a::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 0;
    height: 2px;
    background: #c99a50;
    transform: scaleX(0);
    transition: transform .2s ease;
}

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

.reference-actions {
    display: flex;
    align-items: center;
    gap: 9px;
}

.login-btn {
    min-width: 92px;
}

.header-icon-btn,
.header-lang-btn {
    height: 36px;
    min-width: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #3b3833;
    background: #101214;
    color: #8d8880;
    font-size: 12px;
    text-decoration: none;
    cursor: pointer;
}

.header-icon-btn:hover,
.header-lang-btn:hover {
    border-color: #6b5534;
    color: #d7b475;
}

.header-lang-btn {
    padding: 0 11px;
    font-family: Arial, sans-serif;
    text-transform: uppercase;
}

@media (max-width: 1200px) {
    .reference-header-inner {
        grid-template-columns: 220px 1fr auto;
        gap: 14px;
    }

    .reference-nav a {
        padding: 0 9px;
        font-size: 10px;
    }
}

@media (max-width: 950px) {
    .reference-header-inner {
        display: flex;
        flex-wrap: wrap;
        padding: 14px 0;
    }

    .reference-nav {
        order: 3;
        width: 100%;
        height: auto;
        overflow-x: auto;
        justify-content: flex-start;
    }

    .reference-nav a {
        min-height: 44px;
        white-space: nowrap;
    }

    .reference-actions {
        margin-left: auto;
    }
}

.reference-header-inner {
    width: calc(100% - 40px);
    max-width: 1600px;
    grid-template-columns: 220px minmax(0, 1fr) auto;
    gap: 12px;
}

.reference-nav a {
    padding-left: 10px;
    padding-right: 10px;
}

.reference-actions {
    white-space: nowrap;
}

body {
    overflow-x: hidden;
}

.feature-strip {
    width: min(1450px, calc(100% - 40px));
    margin: -1px auto 18px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.feature-card {
    min-height: 118px;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 20px 22px;
    text-decoration: none;
    border: 1px solid #4a3925;
    background:
        linear-gradient(180deg, rgba(27,29,31,.98), rgba(13,15,17,.98));
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.02),
        0 8px 24px rgba(0,0,0,.28);
    transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.feature-card:hover {
    transform: translateY(-2px);
    border-color: #8c6634;
    background:
        linear-gradient(180deg, rgba(34,31,27,.98), rgba(15,16,18,.98));
}

.feature-icon {
    flex: 0 0 58px;
    width: 58px;
    height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #6c5332;
    background: radial-gradient(circle at 50% 35%, #3b3023, #151719 70%);
    color: #d7ad68;
    font-size: 27px;
    text-shadow: 0 2px 8px #000;
    box-shadow: inset 0 0 18px rgba(201,154,80,.08);
}

.feature-copy {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.feature-copy strong {
    color: #e0bd7a;
    font-size: 16px;
    line-height: 1.15;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.feature-copy small {
    color: #a39d94;
    font-family: Arial, sans-serif;
    font-size: 12px;
    line-height: 1.45;
}

@media (max-width: 1100px) {
    .feature-strip {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 650px) {
    .feature-strip {
        grid-template-columns: 1fr;
        width: calc(100% - 30px);
    }

    .feature-card {
        min-height: 100px;
    }
}

.home-dashboard {
    width: min(1450px, calc(100% - 40px));
    margin: 18px auto 35px;
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr) 300px;
    gap: 18px;
    align-items: start;
}

.home-column,
.home-center {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

.dashboard-panel {
    overflow: hidden;
    border: 1px solid #493923;
    background: linear-gradient(180deg, #17191b, #0d0f11);
    box-shadow: 0 8px 25px rgba(0,0,0,.3);
}

.dashboard-panel .panel-title {
    padding: 13px 16px;
    border-bottom: 1px solid #493923;
    background: linear-gradient(180deg, #24211c, #151719);
    color: #d9b46f;
    font-size: 14px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.dashboard-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #493923;
    background: linear-gradient(180deg, #24211c, #151719);
}

.dashboard-heading .panel-title {
    border: 0;
    background: none;
}

.dashboard-heading > a {
    padding: 0 16px;
    color: #8d806d;
    font: 10px Arial, sans-serif;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.dashboard-button {
    display: block;
    margin: 15px;
    padding: 12px 10px;
    text-align: center;
    border: 1px solid #8b6637;
    background: linear-gradient(180deg, #c99a50, #8d632e);
    color: #120e09;
    font: 700 11px Arial, sans-serif;
    letter-spacing: 1px;
    text-decoration: none;
}

.dashboard-button-small {
    margin-top: 12px;
    padding: 10px;
}

.useful-panel a {
    display: block;
    padding: 11px 15px;
    border-bottom: 1px solid rgba(255,255,255,.045);
    color: #aaa298;
    font: 11px Arial, sans-serif;
    text-decoration: none;
}

.useful-panel a:hover {
    color: #dfbb76;
    background: rgba(201,154,80,.06);
}

.home-news-content {
    padding: 16px;
}

.home-news-content .news-card:last-child {
    margin-bottom: 0;
}

.world-banner {
    min-height: 185px;
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 30px;
    border: 1px solid #493923;
    background:
        linear-gradient(90deg, rgba(5,7,9,.88), rgba(5,7,9,.25)),
        url("images/gunzara-hero.png") center 67% / cover no-repeat;
    text-decoration: none;
    box-shadow: 0 8px 25px rgba(0,0,0,.3);
}

.world-banner-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.world-banner strong {
    color: #e1bd77;
    font-size: 28px;
    line-height: 1.05;
    letter-spacing: 1px;
    text-shadow: 0 3px 12px #000;
}

.world-banner span {
    color: #b2aba0;
    font: 10px Arial, sans-serif;
    letter-spacing: 1.4px;
}

.ranking-head,
.ranking-row {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 52px;
    align-items: center;
    gap: 7px;
    padding: 9px 12px;
    font-family: Arial, sans-serif;
}

.ranking-head {
    color: #716c65;
    font-size: 9px;
    text-transform: uppercase;
}

.ranking-row {
    min-height: 38px;
    border-top: 1px solid rgba(255,255,255,.045);
    color: #aaa39a;
    font-size: 11px;
}

.ranking-row b {
    color: #c99a50;
}

.ranking-row span:last-child,
.ranking-head span:last-child {
    text-align: right;
}

@media (max-width: 1100px) {
    .home-dashboard {
        grid-template-columns: 230px minmax(0, 1fr);
    }

    .home-right {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 750px) {
    .home-dashboard {
        width: calc(100% - 30px);
        grid-template-columns: 1fr;
    }

    .home-right {
        grid-column: auto;
        display: flex;
    }

    .world-banner strong {
        font-size: 22px;
    }
}

.footer-stats {
    width: min(1450px, calc(100% - 40px));
    margin: 12px auto 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border: 1px solid #493923;
    background: linear-gradient(180deg, #151719, #0c0e10);
}

.footer-stat {
    min-height: 92px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-right: 1px solid #34291d;
}

.footer-stat:last-child {
    border-right: 0;
}

.footer-stat strong {
    color: #ddb972;
    font-size: 20px;
    letter-spacing: .6px;
}

.footer-stat span {
    color: #777168;
    font: 10px Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.reference-footer {
    margin-top: 0;
    border-top: 1px solid #4a3823;
    background:
        linear-gradient(180deg, rgba(15,16,18,.98), rgba(5,6,7,.99));
}

.footer-main {
    width: min(1450px, calc(100% - 40px));
    margin: 0 auto;
    min-height: 150px;
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr) 60px;
    align-items: center;
    gap: 30px;
}

.footer-logo {
    display: inline-flex;
    flex-direction: column;
    text-decoration: none;
}

.footer-logo-main {
    color: #dfb566;
    font-size: 31px;
    font-weight: 700;
    letter-spacing: 3px;
    line-height: 1;
}

.footer-logo-sub {
    margin-top: 7px;
    color: #665e53;
    font: 8px Arial, sans-serif;
    letter-spacing: 3px;
}

.footer-center {
    text-align: center;
}

.footer-text {
    color: #878077;
    font-size: 12px;
    margin-bottom: 15px;
}

.footer-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 22px;
}

.footer-links a {
    color: #a49a8d;
    font: 10px Arial, sans-serif;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .7px;
}

.footer-links a:hover {
    color: #ddb972;
}

.footer-backtop {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: end;
    border: 1px solid #5f472c;
    color: #d8ad63;
    text-decoration: none;
    font-size: 18px;
    background: #121416;
}

.footer-bottom {
    min-height: 54px;
    padding: 0 20px;
    border-top: 1px solid #26221c;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    color: #5f5a53;
    font: 9px Arial, sans-serif;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.footer-powered {
    text-align: right;
}

.footer-powered a {
    color: #8e7b60;
}

@media (max-width: 800px) {
    .footer-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-stat:nth-child(2) {
        border-right: 0;
    }

    .footer-stat:nth-child(-n+2) {
        border-bottom: 1px solid #34291d;
    }

    .footer-main {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 28px 0;
        gap: 22px;
    }

    .footer-logo {
        align-items: center;
    }

    .footer-backtop {
        justify-self: center;
    }

    .footer-bottom {
        flex-direction: column;
        justify-content: center;
        text-align: center;
        padding: 14px 20px;
    }

    .footer-powered {
        text-align: center;
    }
}


/* HOME spacing correction */
.home-page-shell {
    padding-bottom: 16px;
}

.home-page-shell .home-dashboard {
    margin-bottom: 0;
}

.home-page-shell + .footer-stats {
    margin-top: 0;
}

/* Align HOME dashboard columns */
.home-dashboard {
    align-items: stretch;
}

.home-left,
.home-center,
.home-right {
    height: 100%;
}

.home-center .world-banner {
    flex: 1 1 auto;
    min-height: 260px;
}

.home-right .ranking-panel:last-child {
    flex: 1 1 auto;
}

/* Reference hero */
.reference-hero-content {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.hero-kicker {
    margin-bottom: 14px;
    color: #d2a95f;
    font: 700 12px Arial, sans-serif;
    letter-spacing: 4px;
    text-transform: uppercase;
    text-shadow: 0 2px 8px #000;
}

.hero-logo-text {
    margin: 0;
    color: #e7bd68;
    font-size: clamp(72px, 8vw, 138px);
    line-height: .9;
    letter-spacing: 2px;
    text-shadow:
        0 4px 0 #6b431a,
        0 8px 18px rgba(0,0,0,.85);
}

.hero-edition {
    margin-top: 12px;
    color: #c89f5a;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 5px;
    text-transform: uppercase;
}

.hero-tagline {
    margin-top: 18px;
    color: #f0d59a;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    text-shadow: 0 3px 12px #000;
}

.hero-description {
    max-width: 650px;
    margin: 14px auto 0;
    color: #bdb6ab;
    font-family: Arial, sans-serif;
    font-size: 14px;
    line-height: 1.6;
}

.reference-hero-buttons {
    margin-top: 24px;
}

.hero-world-line {
    margin-top: 20px;
    color: #8f887f;
    font: 10px Arial, sans-serif;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.reference-hero-content .server-pill {
    margin-top: 16px;
}

@media (max-width: 800px) {
    .hero-logo-text {
        font-size: clamp(52px, 15vw, 90px);
    }

    .hero-tagline {
        font-size: 18px;
        letter-spacing: 2px;
    }

    .hero-edition {
        font-size: 11px;
        letter-spacing: 3px;
    }

    .hero-description {
        font-size: 12px;
        padding: 0 16px;
    }
}

/* Final desktop hero proportions */
@media (min-width: 901px) {
    .hero {
        min-height: 540px;
    }

    .reference-hero-content {
        transform: translateY(-8px);
    }
}


/* =========================================================
   GUNZARA REFERENCE 1:1 — DESKTOP PASS
   HEADER + HERO + FEATURE CARDS
   ========================================================= */

@media (min-width: 901px) {

    /* ---------- HEADER ---------- */

    .reference-header {
        height: 76px;
        min-height: 76px;
        border-bottom: 1px solid #8a5526;
        background:
            linear-gradient(180deg, #0c1013 0%, #090c0e 100%);
    }

    .reference-header-inner {
        width: calc(100% - 64px);
        max-width: 1460px;
        height: 76px;
        margin: 0 auto;
        padding: 0;
        display: grid;
        grid-template-columns: 260px minmax(0, 1fr) auto;
        gap: 18px;
        align-items: center;
    }

    .brand {
        height: 76px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        text-decoration: none;
    }

    .brand-main {
        color: #e7bd73;
        font-family: Georgia, "Times New Roman", serif;
        font-size: 32px;
        font-weight: 700;
        line-height: .92;
        letter-spacing: 2px;
        text-shadow:
            0 2px 0 #5b3418,
            0 3px 8px rgba(0,0,0,.95);
    }

    .brand-sub {
        margin-top: 6px;
        color: #b28a57;
        font: 8px Arial, sans-serif;
        letter-spacing: 2.6px;
    }

    .reference-nav {
        height: 76px;
        display: flex;
        align-items: stretch;
        justify-content: center;
        gap: 0;
    }

    .reference-nav a {
        position: relative;
        height: 76px;
        padding: 0 13px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #d0cbc3;
        font: 700 10px Arial, sans-serif;
        letter-spacing: .45px;
        text-transform: uppercase;
        text-decoration: none;
        border: 0;
        background: transparent;
    }

    .reference-nav a:first-child {
        background:
            linear-gradient(180deg, rgba(174,111,43,.05), rgba(174,111,43,.13));
    }

    .reference-nav a:first-child::after {
        content: "";
        position: absolute;
        left: 18px;
        right: 18px;
        bottom: 0;
        height: 2px;
        background: #d58b34;
        box-shadow: 0 0 9px rgba(213,139,52,.75);
    }

    .reference-nav a:hover {
        color: #e6ba70;
        background: rgba(201,145,70,.05);
    }

    .reference-actions {
        height: 76px;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .login-btn {
        min-width: 92px;
        height: 40px;
        padding: 0 17px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #9a612a;
        color: #e8bd72;
        background: rgba(22,20,17,.7);
        font: 700 10px Arial, sans-serif;
        letter-spacing: .5px;
        text-transform: uppercase;
    }

    .header-icon-btn,
    .header-lang-btn {
        width: 42px;
        height: 40px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #393630;
        background: #101316;
        color: #aa9b87;
        font: 11px Arial, sans-serif;
    }

    .header-lang-btn {
        width: 58px;
    }


    /* ---------- HERO ---------- */

    .hero {
        min-height: 500px;
        height: 500px;
        border-bottom: 1px solid #72471f;
        background-size: cover;
        background-position: center 42%;
        overflow: hidden;
    }

    .hero-overlay {
        background:
            linear-gradient(90deg,
                rgba(0,0,0,.52) 0%,
                rgba(0,0,0,.13) 28%,
                rgba(0,0,0,.10) 70%,
                rgba(0,0,0,.48) 100%
            ),
            linear-gradient(180deg,
                rgba(0,0,0,.12) 0%,
                rgba(0,0,0,.02) 55%,
                rgba(0,0,0,.58) 100%
            );
    }

    .reference-hero-content {
        max-width: 760px;
        transform: translateY(-4px);
    }

    .hero-kicker {
        display: none;
    }

    .hero-logo-text {
        margin: 0;
        color: #e9b85e;
        font-family: Georgia, "Times New Roman", serif;
        font-size: 104px;
        font-weight: 700;
        line-height: .88;
        letter-spacing: -1px;
        text-shadow:
            0 2px 0 #3b1d0d,
            0 4px 0 #8b4e1d,
            0 6px 16px rgba(0,0,0,.9);
    }

    .hero-edition {
        margin-top: 12px;
        color: #ebd2a0;
        font-family: Georgia, "Times New Roman", serif;
        font-size: 23px;
        font-weight: 400;
        letter-spacing: 4px;
        text-transform: uppercase;
        text-shadow: 0 2px 8px #000;
    }

    .hero-tagline {
        margin-top: 20px;
        color: #ead7ad;
        font-family: Georgia, "Times New Roman", serif;
        font-size: 20px;
        font-weight: 400;
        letter-spacing: 4px;
        text-transform: uppercase;
        text-shadow: 0 2px 8px #000;
    }

    /* reference does not contain these elements in hero */
    .reference-hero-content .hero-description,
    .reference-hero-content .server-pill {
        display: none;
    }

    .reference-hero-buttons {
        margin-top: 28px;
        display: flex;
        justify-content: center;
        gap: 12px;
    }

    .reference-hero-buttons .btn {
        min-width: 215px;
        height: 50px;
        padding: 0 26px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font: 700 12px Arial, sans-serif;
        letter-spacing: .3px;
        text-transform: uppercase;
    }

    .reference-hero-buttons .btn-gold {
        border: 1px solid #ec9c31;
        background:
            linear-gradient(180deg, #b92719 0%, #86130e 100%);
        color: #ffe0a0;
        box-shadow:
            inset 0 0 15px rgba(255,184,66,.18),
            0 0 15px rgba(171,43,24,.35);
    }

    .reference-hero-buttons .btn-outline {
        border: 1px solid #b2702c;
        background: rgba(9,13,16,.82);
        color: #efd39a;
    }

    .hero-world-line {
        margin-top: 19px;
        color: #d2b57f;
        font-family: Georgia, "Times New Roman", serif;
        font-size: 11px;
        letter-spacing: 2px;
        text-transform: uppercase;
    }


    /* ---------- FEATURE CARDS ---------- */

    .feature-strip {
        width: calc(100% - 64px);
        max-width: 1460px;
        margin: 14px auto;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 14px;
    }

    .feature-card {
        min-height: 116px;
        padding: 17px 18px;
        gap: 18px;
        border: 1px solid #4b3825;
        background:
            linear-gradient(145deg, rgba(25,29,31,.99), rgba(12,16,18,.99));
        box-shadow:
            inset 0 0 0 1px rgba(255,255,255,.015),
            inset 0 0 35px rgba(83,60,37,.08),
            0 5px 14px rgba(0,0,0,.38);
    }

    .feature-icon {
        flex: 0 0 58px;
        width: 58px;
        height: 58px;
        border: 1px solid #6a4828;
        background:
            radial-gradient(circle at 50% 38%, #33271b 0%, #131719 72%);
        color: #e5b76b;
        font-size: 25px;
        box-shadow:
            inset 0 0 18px rgba(215,149,65,.09),
            0 2px 10px rgba(0,0,0,.45);
    }

    .feature-copy {
        gap: 8px;
    }

    .feature-copy strong {
        color: #e6bd77;
        font-family: Georgia, "Times New Roman", serif;
        font-size: 15px;
        font-weight: 700;
        line-height: 1.12;
        letter-spacing: .1px;
    }

    .feature-copy small {
        color: #c4beb5;
        font: 11px/1.45 Arial, sans-serif;
    }
}

/* Fix active HOME tab */
@media (min-width: 901px) {
    .reference-nav a:first-child {
        background: transparent !important;
    }

    .reference-nav a:first-child::after {
        left: 22px;
        right: 22px;
        bottom: 0;
        height: 2px;
        background: #d58b34;
        box-shadow: 0 0 8px rgba(213,139,52,.75);
    }
}