:root {
    --te-gold: #d4af37;
    --te-gold-soft: #f3e1a6;
    --te-surface: rgba(11, 11, 14, 0.82);
    --te-surface-soft: rgba(255,255,255,0.03);
    --te-border: rgba(212,175,55,0.18);
    --te-text: #e6ebf3;
    --te-muted: #9ea6b5;
    --te-shadow: 0 18px 42px rgba(0,0,0,0.24);
    --te-radius: 24px;
}

.site-nav-rail,
.topbar,
.top-nav,
.intro-topbar {
    border: 1px solid var(--te-border) !important;
    background: rgba(6, 6, 8, 0.72) !important;
    border-radius: 22px !important;
    backdrop-filter: blur(14px);
    box-shadow: var(--te-shadow);
}

.site-nav-links,
.nav,
.nav-links,
.intro-top-links {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.site-nav-links a,
.nav a,
.nav-btn,
.intro-top-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    background: rgba(255,255,255,0.03) !important;
    color: #d7dde7 !important;
    text-decoration: none !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    transition: 0.22s ease !important;
}

.site-nav-links a:hover,
.site-nav-links a.active,
.nav a:hover,
.nav a.active,
.nav-btn:hover,
.nav-btn.active,
.intro-top-links a:hover,
.intro-top-links a.active {
    background: var(--te-gold) !important;
    color: #050505 !important;
    border-color: transparent !important;
    transform: translateY(-1px);
}

.site-nav-brand strong,
.brand-copy strong,
.brand-mini-copy strong,
.intro-brand-link strong {
    font-family: 'Cinzel', serif;
    color: var(--te-gold-soft) !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
}

.site-nav-brand span,
.brand-copy span,
.brand-mini-copy span,
.intro-brand-link span {
    color: var(--te-muted) !important;
    text-transform: uppercase;
    letter-spacing: 0.22em;
}

.btn,
.btn-elite,
.btn-primary,
.btn-secondary,
.btn-download,
.btn-register,
.closing a,
.cta-stack a,
.fair-cta a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    min-height: 50px;
    padding: 14px 22px !important;
    border-radius: 999px !important;
    clip-path: none !important;
    font-family: 'Cinzel', serif !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    transition: 0.22s ease !important;
    box-shadow: none !important;
}

.btn-enter,
.btn-primary,
.btn-register,
.btn-gold,
.closing a,
.cta-stack a:first-child,
.fair-cta a:first-child {
    background: linear-gradient(135deg, #f1d37c, #c19021) !important;
    color: #0f1013 !important;
    border: 1px solid transparent !important;
}

.btn-sec,
.btn-secondary,
.btn-download,
.btn-mirror,
.btn-elite,
.cta-stack a:last-child,
.fair-cta a:last-child {
    background: rgba(255,255,255,0.03) !important;
    color: var(--te-text) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
}

.btn-elite.btn-gold {
    background: linear-gradient(135deg, #f1d37c, #c19021) !important;
    color: #0f1013 !important;
    border: 1px solid transparent !important;
}

.btn-forum {
    background: rgba(255,255,255,0.03) !important;
    color: var(--te-text) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
}

.btn:hover,
.btn-elite:hover,
.btn-primary:hover,
.btn-secondary:hover,
.btn-download:hover,
.btn-register:hover,
.closing a:hover,
.cta-stack a:hover,
.fair-cta a:hover {
    transform: translateY(-1px) !important;
    filter: brightness(1.04);
}

.hero-copy,
.hero-panel,
.section-card,
.pillar,
.timeline-card,
.cta-panel,
.hero,
.notice,
.rule-card,
.ladder,
.closing,
.download-box,
.trust-card,
.sys-req-box,
.register-card,
.message,
.trust-grid article,
.elite-panel {
    border-radius: var(--te-radius) !important;
    box-shadow: var(--te-shadow) !important;
}

.hero-panel,
.fact,
.signal,
.timeline-card,
.pillar,
.rule-card,
.ladder,
.closing,
.trust-card,
.trust-pill,
.promise-card,
.signal-card-home,
.fair-card {
    border-color: rgba(255,255,255,0.06) !important;
}

@media (max-width: 767px) {
    .site-nav-rail,
    .topbar,
    .top-nav,
    .intro-topbar {
        border-radius: 18px !important;
    }

    .site-nav-links,
    .nav,
    .nav-links,
    .intro-top-links {
        width: 100%;
        justify-content: flex-start;
    }

    .btn,
    .btn-elite,
    .btn-primary,
    .btn-secondary,
    .btn-download,
    .btn-register,
    .closing a,
    .cta-stack a,
    .fair-cta a {
        width: 100%;
    }
}

/* Mobile responsive hardening - 20260418
   Visual layer only: keeps PHP, forms, routes and database flows untouched. */
html {
    -webkit-text-size-adjust: 100%;
}

img,
svg,
video,
iframe,
canvas {
    max-width: 100%;
}

@media (max-width: 1024px) {
    body {
        overflow-x: hidden;
    }

    .shell,
    .page-shell,
    .register-shell,
    .intro-container,
    .container {
        max-width: calc(100% - 22px) !important;
    }

    .hero,
    .drop-hero,
    .server-hero,
    .register-card,
    .fair-play-grid,
    .showcase-grid,
    .showcase-grid.equal,
    .system-spotlight-grid,
    .bounty-strip,
    .ladder-wrap,
    .drop-console-grid,
    .req-grid,
    .rules-grid,
    .grid-3,
    .grid-4,
    .grid-5,
    .systems-grid,
    .server-route-map,
    .story-grid-4,
    .story-grid-3,
    .story-grid-auto,
    .realm-grid,
    .promise-grid,
    .signal-grid-home,
    .hero-proof-row {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .hero,
    .drop-hero,
    .server-hero,
    .register-card,
    .fair-play-grid,
    .showcase-grid,
    .showcase-grid.equal,
    .system-spotlight-grid,
    .bounty-strip,
    .ladder-wrap,
    .drop-console-grid {
        grid-template-columns: 1fr !important;
    }

    .card-visual {
        min-height: 520px !important;
    }

    .custom-table,
    .rank-table {
        min-width: 620px;
    }

    .download-box,
    .elite-panel,
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 900px) {
    .site-nav-rail,
    .topbar,
    .top-nav,
    .intro-topbar {
        width: calc(100% - 20px) !important;
        align-items: flex-start !important;
        flex-direction: column !important;
        gap: 12px !important;
        padding: 12px !important;
    }

    .site-nav-brand,
    .brand,
    .intro-brand-link {
        min-width: 0;
        width: 100%;
    }

    .site-nav-brand img,
    .brand img,
    .intro-brand-link img {
        width: 40px !important;
        height: 40px !important;
        flex: 0 0 auto;
    }

    .site-nav-links,
    .nav,
    .nav-links,
    .intro-top-links {
        width: 100% !important;
        max-width: 100%;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 2px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .site-nav-links::-webkit-scrollbar,
    .nav::-webkit-scrollbar,
    .nav-links::-webkit-scrollbar,
    .intro-top-links::-webkit-scrollbar {
        display: none;
    }

    .site-nav-links a,
    .nav a,
    .nav-btn,
    .intro-top-links a {
        flex: 0 0 auto;
        min-height: 40px;
        padding: 9px 12px !important;
        font-size: 10px !important;
        letter-spacing: 0.1em !important;
        white-space: nowrap;
    }

    .hero-copy,
    .page-hero,
    .hero-panel,
    .section-card,
    .timeline-card,
    .info-card,
    .cta-card,
    .home-story-card,
    .showcase-card,
    .showcase-panel,
    .system-spotlight-card,
    .system-spotlight-note,
    .bounty-strip,
    .rule-card,
    .ladder,
    .closing,
    .download-box,
    .trust-card,
    .sys-req-box,
    .register-card,
    .elite-panel {
        border-radius: 20px !important;
    }

    .hero-copy,
    .page-hero,
    .hero-panel,
    .section-card,
    .home-story-card,
    .download-box,
    .sys-req-box,
    .card-form,
    .card-visual {
        padding: 24px !important;
    }

    .hero-copy h1,
    .page-hero h1,
    .brand-wordmark-main,
    .intro-brand-main {
        font-size: clamp(2.35rem, 9vw, 4rem) !important;
        line-height: 1.02 !important;
    }

    .brand-wordmark-top,
    .intro-brand-top {
        letter-spacing: 0.42em !important;
        margin-left: 0.42em !important;
    }

    .input-row,
    .trust-strip,
    .detail-note-grid,
    .bio-panel-metrics {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 680px) {
    body {
        min-width: 0;
    }

    .shell,
    .page-shell,
    .register-shell,
    .intro-container,
    .container {
        width: calc(100% - 16px) !important;
        max-width: calc(100% - 16px) !important;
    }

    .intro-container {
        padding-top: 178px !important;
        padding-bottom: 28px !important;
    }

    .hero,
    .drop-hero,
    .server-hero,
    .register-card,
    .fair-play-grid,
    .showcase-grid,
    .showcase-grid.equal,
    .system-spotlight-grid,
    .bounty-strip,
    .ladder-wrap,
    .drop-console-grid,
    .req-grid,
    .trust-grid,
    .rules-grid,
    .grid-3,
    .grid-4,
    .grid-5,
    .systems-grid,
    .server-route-map,
    .story-grid-4,
    .story-grid-3,
    .story-grid-auto,
    .realm-grid,
    .promise-grid,
    .signal-grid-home,
    .hero-proof-row,
    .intro-signal-row,
    .visit-counter {
        grid-template-columns: 1fr !important;
    }

    .site-nav-rail,
    .topbar,
    .top-nav,
    .intro-topbar {
        width: calc(100% - 16px) !important;
        border-radius: 16px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .site-nav-links,
    .nav,
    .nav-links,
    .intro-top-links {
        display: flex !important;
        flex-wrap: wrap !important;
        overflow: visible !important;
        gap: 8px !important;
    }

    .site-nav-links a,
    .nav a,
    .nav-btn,
    .intro-top-links a {
        flex: 1 1 calc(50% - 8px) !important;
        min-width: 0;
        white-space: nowrap;
    }

    .brand-copy strong,
    .site-nav-brand strong,
    .intro-brand-link strong {
        font-size: clamp(0.95rem, 5vw, 1.18rem) !important;
        letter-spacing: 0.08em !important;
    }

    .brand-copy span,
    .site-nav-brand span,
    .intro-brand-link span {
        font-size: 0.62rem !important;
        letter-spacing: 0.12em !important;
    }

    .hero-copy,
    .page-hero,
    .hero-panel,
    .section-card,
    .home-story-card,
    .showcase-card,
    .showcase-panel,
    .system-spotlight-card,
    .system-spotlight-note,
    .bounty-strip,
    .rule-card,
    .ladder,
    .closing,
    .download-box,
    .trust-card,
    .sys-req-box,
    .register-card,
    .message,
    .elite-panel,
    .card-form,
    .card-visual {
        padding: 18px !important;
        border-radius: 18px !important;
        min-width: 0;
    }

    .hero-copy h1,
    .page-hero h1,
    .drop-guide-page h1,
    .visual-copy h1,
    .form-header h1,
    .section-head h2,
    .console-head h2 {
        font-size: clamp(1.3rem, 5.2vw, 1.6rem) !important;
        line-height: 1.16 !important;
        letter-spacing: -0.02em !important;
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: break-word;
        hyphens: auto;
        white-space: normal !important;
    }

    .hero-copy p,
    .page-hero p,
    .drop-guide-page .hero-copy p,
    .visual-copy p,
    .form-header p,
    .trust-card p,
    .rule-list li,
    .showcase-copy p,
    .system-spotlight-copy p,
    .story-card p,
    .fair-card p {
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: break-word;
        font-size: 0.94rem !important;
        line-height: 1.72 !important;
    }

    .intro-brand-mark {
        width: 82px !important;
        height: 82px !important;
    }

    .intro-brand-main,
    .brand-wordmark-main {
        font-size: clamp(2rem, 12vw, 3rem) !important;
        letter-spacing: 0.08em !important;
        margin-left: 0 !important;
    }

    .intro-brand-top,
    .brand-wordmark-top {
        font-size: clamp(0.82rem, 4vw, 1rem) !important;
        letter-spacing: 0.24em !important;
        margin-left: 0.24em !important;
    }

    .subtitle,
    .eyebrow,
    .section-pill,
    .visual-badge {
        max-width: 100%;
        font-size: 0.64rem !important;
        line-height: 1.35 !important;
        letter-spacing: 0.08em !important;
        white-space: normal !important;
        flex-wrap: wrap !important;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .feature-box {
        flex: 1 1 100% !important;
        min-width: 0;
    }

    .action-area,
    .hero-actions,
    .cta-strip,
    .fair-cta,
    .bounty-actions,
    .te-login-modal-links,
    .compose-actions {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .btn,
    .btn-elite,
    .btn-primary,
    .btn-secondary,
    .btn-download,
    .btn-register,
    .closing a,
    .cta-stack a,
    .fair-cta a,
    .bounty-actions a,
    .hero-actions a,
    .action-area a,
    .action-area button {
        width: 100% !important;
        min-height: 46px;
        padding: 12px 16px !important;
        font-size: 13px !important;
        text-align: center;
    }

    input,
    select,
    textarea {
        min-width: 0;
        font-size: 16px !important;
    }

    .input-row {
        display: grid !important;
        grid-template-columns: 1fr !important;
    }

    .card-visual {
        min-height: 320px !important;
        border-right: 0 !important;
        border-bottom: 1px solid rgba(255,255,255,0.08);
    }

    .register-card {
        overflow: visible !important;
    }

    .rank-table,
    .custom-table {
        min-width: 560px;
    }

    .event-item {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }

    .modal-dialog,
    .te-login-modal-dialog {
        width: auto !important;
        max-width: none !important;
        margin: 10px !important;
    }

    .modal-content,
    .te-login-modal-content,
    .modal-box {
        max-height: calc(100dvh - 20px);
        overflow-y: auto;
        border-radius: 18px !important;
    }
}

@media (max-width: 420px) {
    .site-nav-links a,
    .nav a,
    .nav-btn,
    .intro-top-links a {
        font-size: 9px !important;
        padding: 8px 10px !important;
    }

    .brand-copy span,
    .site-nav-brand span,
    .intro-brand-link span {
        display: none !important;
    }

    .hero-copy h1,
    .page-hero h1,
    .drop-guide-page h1,
    .visual-copy h1,
    .form-header h1 {
        font-size: clamp(1.25rem, 5.8vw, 1.48rem) !important;
        line-height: 1.16 !important;
        letter-spacing: -0.02em !important;
    }
}