/* Heavenfall site-wide typography contract.
   This file intentionally loads last so legacy page-specific declarations
   cannot produce a different type system on each route. */
:root {
    --font-heading: 'Cinzel', Georgia, serif;
    --font-body: 'Pretendard', Arial, sans-serif;
    --font-ui: 'Pretendard', Arial, sans-serif;
    --type-body-size: 15px;
    --type-body-line: 1.6;
}

html,
body {
    font-family: var(--font-body) !important;
    font-size: var(--type-body-size);
    line-height: var(--type-body-line);
    font-synthesis: none;
}

body,
p,
li,
dd,
dt,
td,
th,
label,
input,
select,
textarea,
button {
    font-family: var(--font-body) !important;
}

button,
input,
select,
textarea {
    font-size: 14px;
    line-height: 1.4;
}

h1,
h2,
h3,
h4,
h5,
h6,
.page-title,
.login-title h2,
.news-section-heading h2,
.is-hero-title,
.nw-hero-content h1,
.ns-hero-content h1,
.ac-hero-name,
.ac-char-name,
.rk-hero h1,
.hf-status-title h1 {
    font-family: var(--font-heading) !important;
    font-weight: 700;
    line-height: 1.16;
    font-synthesis: none;
}

/* Small editorial labels retain the game's serif identity. */
.eyebrow,
.nw-eyebrow,
.nw-side-tag,
.nw-card-tag,
.nw-tag,
.ns-recent-tag,
.is-category,
.ac-section-label,
.hf-drawer-kicker,
.hf-drawer-panel-copy small,
.rk-kicker,
.dl-eyebrow,
.dl-label {
    font-family: var(--font-heading) !important;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* Navigation and controls are interface text, not display typography. */
.hero-menu a,
.mobile-nav a,
.footer-menu a,
.hf-drawer-links a,
.hf-drawer-logout button,
.hf-account-mobile-dock a,
.modal-hf button,
.modal-hf input,
.modal-hf label,
.rk-tab,
.rk-search,
.rk-page-btn,
.is-cat-btn,
.is-sort,
.is-search,
.is-buy-btn,
.is-details-btn,
.dl-button,
.admin-nav a,
.admin-action-btn {
    font-family: var(--font-ui) !important;
    font-weight: 600;
    letter-spacing: .035em;
}

/* Tables and data use predictable numerals and readable UI type. */
.rk-table,
.admin-table,
.is-grid,
.ac-table,
.hf-home-rank-table {
    font-family: var(--font-body) !important;
    font-variant-numeric: tabular-nums;
}

.rk-table th,
.admin-table th,
.ac-table th {
    font-family: var(--font-ui) !important;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* Drawer and authentication surfaces must match every route. */
.hf-account-drawer,
.hf-account-drawer button,
.hf-account-drawer a,
.hf-account-drawer span,
.modal-hf,
.modal-hf p,
.modal-hf a,
.rules-content {
    font-family: var(--font-body) !important;
}

.hf-drawer-profile-name,
.hf-drawer-coins strong,
.login-title h2 {
    font-family: var(--font-heading) !important;
}

.discord-float,
.discord-float span {
    font-family: var(--font-ui) !important;
    font-weight: 700;
    letter-spacing: .06em;
}

@media (max-width: 768px) {
    :root { --type-body-size: 14px; }
    button,
    input,
    select,
    textarea { font-size: 16px; }
}

/* One responsive navigation contract. Older styles used three overlapping
   breakpoints, making the mobile login CTA collapse from full width to 110px
   as the viewport became wider and leaving the burger at only 24x16px. */
@media (max-width: 1100px) {
    .menu20-fixed .menu-btn {
        display: flex !important;
        width: 48px !important;
        height: 48px !important;
        flex: 0 0 48px !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        padding: 10px !important;
    }

    .menu20-fixed .menu-btn span {
        width: 28px !important;
        height: 3px !important;
        flex: 0 0 3px !important;
    }

    .mobile-nav ul li.hf-guest-only {
        width: 100% !important;
    }

    .mobile-nav .hf-guest-only button,
    .mobile-nav .hf-guest-only > button,
    .mobile-nav .hf-login-link {
        width: 100% !important;
        min-width: 0 !important;
        height: 48px !important;
        min-height: 48px !important;
        padding: 0 20px !important;
        font-size: 14px !important;
    }
}