/* Readable story typography for the Hunter archive. */

body.hunter-page {
    --hunter-reading-title-size: 17px;
    --hunter-reading-font-size: 18px;
    --hunter-ui-8-size: 8px;
    --hunter-ui-9-size: 9px;
    --hunter-ui-10-size: 10px;
    --hunter-ui-11-size: 11px;
    --hunter-ui-12-size: 12px;
    --hunter-ui-13-size: 13px;
    --hunter-base-free-slot: 104px;
}

body.hunter-page[data-site-text-size="medium"] {
    --hunter-reading-title-size: 20px;
    --hunter-reading-font-size: 21px;
    --hunter-ui-8-size: 9.2px;
    --hunter-ui-9-size: 10.35px;
    --hunter-ui-10-size: 11.5px;
    --hunter-ui-11-size: 12.65px;
    --hunter-ui-12-size: 13.8px;
    --hunter-ui-13-size: 14.95px;
    --hunter-base-free-slot: 104px;
}

body.hunter-page[data-site-text-size="large"] {
    --hunter-reading-title-size: 23px;
    --hunter-reading-font-size: 24px;
    --hunter-ui-8-size: 10.4px;
    --hunter-ui-9-size: 11.7px;
    --hunter-ui-10-size: 13px;
    --hunter-ui-11-size: 14.3px;
    --hunter-ui-12-size: 15.6px;
    --hunter-ui-13-size: 16.9px;
    --hunter-base-free-slot: 112px;
}

body.hunter-page[data-site-text-size="xlarge"] {
    --hunter-reading-title-size: 26px;
    --hunter-reading-font-size: 27px;
    --hunter-ui-8-size: 12px;
    --hunter-ui-9-size: 13.5px;
    --hunter-ui-10-size: 15px;
    --hunter-ui-11-size: 16.5px;
    --hunter-ui-12-size: 18px;
    --hunter-ui-13-size: 19.5px;
    --hunter-base-free-slot: 120px;
}

body.hunter-page[data-site-text-size="xxlarge"] {
    --hunter-reading-title-size: 29px;
    --hunter-reading-font-size: 30px;
    --hunter-ui-8-size: 13.6px;
    --hunter-ui-9-size: 15.3px;
    --hunter-ui-10-size: 17px;
    --hunter-ui-11-size: 18.7px;
    --hunter-ui-12-size: 20.4px;
    --hunter-ui-13-size: 22.1px;
    --hunter-base-free-slot: 132px;
}

/* The reading area has explicit sizes so it remains predictable on every browser. */
.hunter-page .hunter-archive-book {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Text rendered through CSS pseudo-elements must follow the same setting too. */
.hunter-page .hunter-memory-card-tile.is-auto-revealed .hunter-memory-card-front::after,
.hunter-page #hunterPlayerUidCopyBtn::after {
    font-size: var(--hunter-ui-8-size) !important;
}

.hunter-page .hunter-game-card.hunter-explore-list-mode .hunter-explore-room .hunter-explore-game-entry--quiz::before,
.hunter-page .hunter-explore-room:not(.is-playing-explore-game) .hunter-explore-game-entry--quiz::before {
    font-size: var(--hunter-ui-10-size) !important;
}

.hunter-page .hunter-lore-card summary::after,
.hunter-page .hunter-character-card.selected .hunter-character-name::after,
.hunter-page .hunter-compact-details summary::after,
.hunter-page .hunter-base-section summary::after,
.hunter-page .hunter-quiz-question-box.is-masked::after {
    font-size: var(--hunter-ui-11-size) !important;
}

.hunter-page .hunter-lottery-proof-card summary::after,
.hunter-page .hunter-lottery-voucher-guide-card summary::after {
    font-size: var(--hunter-ui-10-size) !important;
}

.hunter-page .hunter-archive-book .hunter-lore-card summary::after {
    font-size: var(--hunter-ui-12-size) !important;
}

.hunter-page .hunter-explore-room .hunter-explore-game-entry.hunter-explore-game-entry--lottery-formal.is-internal-open::after,
.hunter-page .hunter-explore-room .hunter-explore-game-entry.hunter-explore-game-entry--lottery-formal.is-public-open::after,
.hunter-page .hunter-game-card.hunter-explore-list-mode .hunter-explore-room .hunter-explore-game-entry.hunter-explore-game-entry--lottery-formal.is-internal-open::after,
.hunter-page .hunter-game-card.hunter-explore-list-mode .hunter-explore-room .hunter-explore-game-entry.hunter-explore-game-entry--lottery-formal.is-public-open::after,
.hunter-page .hunter-explore-room .hunter-explore-game-entry.hunter-explore-game-entry--build-house::before,
.hunter-page .hunter-game-card.hunter-explore-list-mode .hunter-explore-room .hunter-explore-game-entry.hunter-explore-game-entry--build-house::before,
.hunter-page .hunter-explore-room .hunter-explore-game-entry.hunter-explore-game-entry--build-house::after,
.hunter-page .hunter-game-card.hunter-explore-list-mode .hunter-explore-room .hunter-explore-game-entry.hunter-explore-game-entry--build-house::after {
    font-size: var(--hunter-ui-11-size) !important;
}

.hunter-page .hunter-mine-log-details:not([open]) .hunter-mine-log-toggle,
.hunter-page .hunter-mine-log-details[open] .hunter-mine-log-toggle::after {
    font-size: var(--hunter-ui-13-size) !important;
}

.hunter-page .hunter-mine-log-details[open] .hunter-mine-log-toggle {
    font-size: 0 !important;
}

@media (max-width: 768px) {
    .hunter-page .hunter-game-card.hunter-explore-list-mode .hunter-explore-room .hunter-explore-game-entry--quiz::before,
    .hunter-page .hunter-explore-room:not(.is-playing-explore-game) .hunter-explore-game-entry--quiz::before {
        font-size: var(--hunter-ui-9-size) !important;
    }

    .hunter-page .hunter-explore-room .hunter-explore-game-entry.hunter-explore-game-entry--lottery-formal.is-internal-open::after,
    .hunter-page .hunter-explore-room .hunter-explore-game-entry.hunter-explore-game-entry--lottery-formal.is-public-open::after,
    .hunter-page .hunter-game-card.hunter-explore-list-mode .hunter-explore-room .hunter-explore-game-entry.hunter-explore-game-entry--lottery-formal.is-internal-open::after,
    .hunter-page .hunter-game-card.hunter-explore-list-mode .hunter-explore-room .hunter-explore-game-entry.hunter-explore-game-entry--lottery-formal.is-public-open::after,
    .hunter-page .hunter-explore-room .hunter-explore-game-entry.hunter-explore-game-entry--build-house::before,
    .hunter-page .hunter-game-card.hunter-explore-list-mode .hunter-explore-room .hunter-explore-game-entry.hunter-explore-game-entry--build-house::before,
    .hunter-page .hunter-explore-room .hunter-explore-game-entry.hunter-explore-game-entry--build-house::after,
    .hunter-page .hunter-game-card.hunter-explore-list-mode .hunter-explore-room .hunter-explore-game-entry.hunter-explore-game-entry--build-house::after {
        font-size: var(--hunter-ui-10-size) !important;
    }

    .hunter-page .hunter-mine-log-details:not([open]) .hunter-mine-log-toggle,
    .hunter-page .hunter-mine-log-details[open] .hunter-mine-log-toggle::before {
        font-size: var(--hunter-ui-11-size) !important;
    }

    .hunter-page .hunter-mine-log-details[open] .hunter-mine-log-toggle::after {
        content: none !important;
    }
}

.hunter-page .hunter-archive-book .hunter-lore-card summary {
    flex-wrap: wrap;
    padding: 15px 17px;

    font-size: var(--hunter-reading-title-size);
    line-height: 1.45;
}

.hunter-page .hunter-archive-book .hunter-lore-card summary::after {
    font-size: 12px;
}

.hunter-page .hunter-archive-book .hunter-lore-content {
    padding: 2px 18px 20px;
}

.hunter-page .hunter-archive-book .hunter-lore-content p {
    width: 100%;
    max-width: 44em;
    margin: 0 auto 1em;

    color: #5b250f;
    font-size: var(--hunter-reading-font-size);
    font-weight: 700;
    line-height: 1.9;

    overflow-wrap: anywhere;
    text-wrap: pretty;
}

.hunter-page .hunter-archive-book .hunter-lore-content p:last-child {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    body.hunter-page {
        --hunter-reading-title-size: 16px;
        --hunter-reading-font-size: 17px;
    }

    body.hunter-page[data-site-text-size="medium"] {
        --hunter-reading-title-size: 19px;
        --hunter-reading-font-size: 20px;
    }

    body.hunter-page[data-site-text-size="large"] {
        --hunter-reading-title-size: 22px;
        --hunter-reading-font-size: 23px;
    }

    body.hunter-page[data-site-text-size="xlarge"] {
        --hunter-reading-title-size: 24px;
        --hunter-reading-font-size: 26px;
    }

    body.hunter-page[data-site-text-size="xxlarge"] {
        --hunter-reading-title-size: 27px;
        --hunter-reading-font-size: 29px;
    }

    .hunter-page .hunter-archive-book .hunter-lore-card summary {
        padding: 14px;
    }

    .hunter-page .hunter-archive-book .hunter-lore-content {
        padding: 2px 14px 18px;
    }
}

/* Larger text needs a reflowable game board instead of the compact fixed-height lobby. */
@media (max-width: 768px) {
    body.hunter-page[data-site-text-size]:not([data-site-text-size="standard"]) .hunter-game-views:has(.hunter-game-view[data-hunter-view="base"].active) {
        height: calc(100dvh - 184px) !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
    }

    body.hunter-page[data-site-text-size]:not([data-site-text-size="standard"]) .hunter-game-view[data-hunter-view="base"].active {
        height: 100% !important;
        min-height: 100% !important;
        overflow: visible !important;
    }

    body.hunter-page[data-site-text-size]:not([data-site-text-size="standard"]) .hunter-base-stage {
        height: 100% !important;
        min-height: 100% !important;
        overflow: visible !important;
        grid-template-rows: auto auto minmax(max-content, 1fr) !important;
        gap: 10px !important;
        padding-bottom: 10px !important;
    }

    body.hunter-page[data-site-text-size]:not([data-site-text-size="standard"]) .hunter-base-hero {
        grid-template-rows: auto auto !important;
        gap: 10px !important;
    }

    body.hunter-page[data-site-text-size]:not([data-site-text-size="standard"]) .hunter-base-hero-copy,
    body.hunter-page[data-site-text-size]:not([data-site-text-size="standard"]) .hunter-base-status-strip,
    body.hunter-page[data-site-text-size]:not([data-site-text-size="standard"]) .hunter-base-status-item {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    body.hunter-page[data-site-text-size]:not([data-site-text-size="standard"]) .hunter-base-status-item {
        min-height: 44px !important;
        flex-wrap: wrap;
        padding-block: 8px !important;
    }

    body.hunter-page[data-site-text-size]:not([data-site-text-size="standard"]) .hunter-base-status-item span,
    body.hunter-page[data-site-text-size]:not([data-site-text-size="standard"]) .hunter-base-status-item strong {
        max-width: 100% !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    body.hunter-page[data-site-text-size]:not([data-site-text-size="standard"]) .hunter-base-character-card {
        height: auto !important;
        min-height: 132px !important;
        overflow: visible !important;
        align-items: center !important;
        padding-block: 10px !important;
    }

    body.hunter-page[data-site-text-size]:not([data-site-text-size="standard"]) .hunter-base-character-card .hunter-player-info,
    body.hunter-page[data-site-text-size]:not([data-site-text-size="standard"]) .hunter-base-character-card .hunter-exp-block {
        min-width: 0 !important;
        overflow: visible !important;
    }

    body.hunter-page[data-site-text-size]:not([data-site-text-size="standard"]) .hunter-base-character-card .hunter-player-title,
    body.hunter-page[data-site-text-size]:not([data-site-text-size="standard"]) .hunter-base-character-card .hunter-player-desc,
    body.hunter-page[data-site-text-size]:not([data-site-text-size="standard"]) .hunter-player-account-row,
    body.hunter-page[data-site-text-size]:not([data-site-text-size="standard"]) .hunter-player-uid-row {
        white-space: normal !important;
        overflow-wrap: anywhere;
    }

    body.hunter-page[data-site-text-size]:not([data-site-text-size="standard"]) .hunter-base-companion-box {
        height: auto !important;
        min-height: 72px !important;
        overflow: visible !important;
        align-items: flex-start !important;
    }

    body.hunter-page[data-site-text-size]:not([data-site-text-size="standard"]) .hunter-base-companion-box .hunter-dialogue-text,
    body.hunter-page[data-site-text-size]:not([data-site-text-size="standard"]) .hunter-partner-room .hunter-pet-desc,
    body.hunter-page[data-site-text-size]:not([data-site-text-size="standard"]) .hunter-mailbox-message-copy small {
        display: block !important;
        overflow: visible !important;
        -webkit-line-clamp: unset !important;
    }

    body.hunter-page[data-site-text-size]:not([data-site-text-size="standard"]) .hunter-base-dashboard,
    body.hunter-page[data-site-text-size]:not([data-site-text-size="standard"]) .hunter-base-storage-row {
        align-items: stretch;
    }

    body.hunter-page[data-site-text-size]:not([data-site-text-size="standard"]) .hunter-base-quick-card:not(.hunter-base-quick-card-free),
    body.hunter-page[data-site-text-size]:not([data-site-text-size="standard"]) .hunter-base-storage-card {
        height: auto !important;
        min-height: 96px !important;
        overflow: visible !important;
    }

    body.hunter-page[data-site-text-size]:not([data-site-text-size="standard"]) .hunter-base-quick-copy strong,
    body.hunter-page[data-site-text-size]:not([data-site-text-size="standard"]) .hunter-base-quick-copy small,
    body.hunter-page[data-site-text-size]:not([data-site-text-size="standard"]) .hunter-base-storage-copy strong,
    body.hunter-page[data-site-text-size]:not([data-site-text-size="standard"]) .hunter-base-storage-copy small {
        overflow: visible !important;
        white-space: normal !important;
        text-overflow: clip !important;
        overflow-wrap: anywhere;
    }

    body.hunter-page[data-site-text-size]:not([data-site-text-size="standard"]) .hunter-explore-room:not(.is-playing-explore-game) .hunter-explore-game-entry,
    body.hunter-page[data-site-text-size]:not([data-site-text-size="standard"]) .hunter-game-card.hunter-explore-list-mode .hunter-explore-room .hunter-explore-game-entry {
        height: auto !important;
        min-height: 92px !important;
    }

    body.hunter-page[data-site-text-size]:not([data-site-text-size="standard"]) .hunter-pet-card-featured,
    body.hunter-page[data-site-text-size]:not([data-site-text-size="standard"]) .hunter-partner-chain,
    body.hunter-page[data-site-text-size]:not([data-site-text-size="standard"]) .hunter-mailbox-panel,
    body.hunter-page[data-site-text-size]:not([data-site-text-size="standard"]) .hunter-mailbox-message,
    body.hunter-page[data-site-text-size]:not([data-site-text-size="standard"]) .hunter-inventory-panel {
        height: auto !important;
        overflow: visible !important;
    }
}

@media (max-width: 768px) {
    body.hunter-page[data-site-text-size]:not([data-site-text-size="standard"]) .hunter-base-storage-row {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body.hunter-page[data-site-text-size]:not([data-site-text-size="standard"]) .hunter-base-dashboard {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body.hunter-page[data-site-text-size]:not([data-site-text-size="standard"]) .hunter-base-dashboard.is-rank-removed {
        position: relative !important;
        inset: auto !important;
        align-self: end !important;
        width: 100% !important;
        grid-template-areas:
            "checkin daily"
            "log log" !important;
        grid-template-rows: repeat(2, minmax(96px, auto)) !important;
        height: auto !important;
        gap: 8px !important;
    }

    body.hunter-page[data-site-text-size]:not([data-site-text-size="standard"]) .hunter-base-dashboard.is-rank-removed [data-hunter-base-card="checkin"],
    body.hunter-page[data-site-text-size]:not([data-site-text-size="standard"]) .hunter-base-dashboard.is-rank-removed [data-hunter-base-card="daily"],
    body.hunter-page[data-site-text-size]:not([data-site-text-size="standard"]) .hunter-base-dashboard.is-rank-removed [data-hunter-base-card="log"] {
        position: static !important;
        inset: auto !important;
        width: auto !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 96px !important;
        margin: 0 !important;
        grid-column: auto !important;
    }

    body.hunter-page[data-site-text-size]:not([data-site-text-size="standard"]) .hunter-base-dashboard.is-rank-removed [data-hunter-base-card="checkin"] { grid-area: checkin !important; }
    body.hunter-page[data-site-text-size]:not([data-site-text-size="standard"]) .hunter-base-dashboard.is-rank-removed [data-hunter-base-card="daily"] { grid-area: daily !important; }
    body.hunter-page[data-site-text-size]:not([data-site-text-size="standard"]) .hunter-base-dashboard.is-rank-removed [data-hunter-base-card="log"] {
        grid-area: log !important;
        margin-right: var(--hunter-base-free-slot) !important;
    }

    body.hunter-page[data-site-text-size]:not([data-site-text-size="standard"]) .hunter-base-dashboard.is-rank-removed .hunter-base-quick-card-free {
        position: absolute !important;
        inset: auto 0 0 auto !important;
        width: calc(var(--hunter-base-free-slot) - 8px) !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 34px !important;
        margin: 0 !important;
        padding: 4px 10px !important;
        grid-column: auto !important;
        border-radius: 999px !important;
    }

    body.hunter-page:is([data-site-text-size="xlarge"], [data-site-text-size="xxlarge"]) .hunter-partner-room .hunter-pet-card-featured {
        grid-template-columns: 88px minmax(0, 1fr) !important;
    }

    body.hunter-page:is([data-site-text-size="xlarge"], [data-site-text-size="xxlarge"]) .hunter-mailbox-message {
        grid-template-columns: auto minmax(0, 1fr) !important;
    }

    body.hunter-page:is([data-site-text-size="xlarge"], [data-site-text-size="xxlarge"]) .hunter-mailbox-message em {
        grid-column: 2;
        justify-self: start;
        text-align: left;
        white-space: normal !important;
    }

    body.hunter-page:is([data-site-text-size="xlarge"], [data-site-text-size="xxlarge"]) .hunter-bottom-nav-btn {
        min-height: 68px !important;
    }
}

@media (max-width: 420px) {
    body.hunter-page[data-site-text-size]:not([data-site-text-size="standard"]) .hunter-base-dashboard.is-rank-removed {
        gap: 7px !important;
    }

    body.hunter-page[data-site-text-size]:not([data-site-text-size="standard"]) .hunter-base-dashboard.is-rank-removed .hunter-base-quick-card-free {
        padding-inline: 9px !important;
    }
}

/* The final compact-mobile rules use a more specific fixed 36px status row.
   Large text must win that override so the status value can wrap and push the
   player card down instead of painting over it. */
@media (max-width: 768px) {
    body.hunter-page[data-site-text-size]:not([data-site-text-size="standard"])
    .hunter-game-view[data-hunter-view="base"].active .hunter-base-hero {
        grid-template-rows: auto auto !important;
        gap: 10px !important;
    }

    body.hunter-page[data-site-text-size]:not([data-site-text-size="standard"])
    .hunter-game-view[data-hunter-view="base"].active .hunter-base-hero-copy {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    body.hunter-page[data-site-text-size]:not([data-site-text-size="standard"])
    .hunter-game-view[data-hunter-view="base"].active .hunter-base-status-strip {
        height: auto !important;
        min-height: 0 !important;
        align-items: stretch !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body.hunter-page[data-site-text-size]:not([data-site-text-size="standard"])
    .hunter-game-view[data-hunter-view="base"].active .hunter-base-status-item {
        height: auto !important;
        min-height: 56px !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        align-content: center !important;
        align-items: start !important;
        gap: 4px !important;
        padding: 8px 10px !important;
        overflow: visible !important;
    }

    body.hunter-page[data-site-text-size]:not([data-site-text-size="standard"])
    .hunter-game-view[data-hunter-view="base"].active .hunter-base-status-item span,
    body.hunter-page[data-site-text-size]:not([data-site-text-size="standard"])
    .hunter-game-view[data-hunter-view="base"].active .hunter-base-status-item strong {
        max-width: 100% !important;
        overflow: visible !important;
        overflow-wrap: anywhere !important;
        text-overflow: clip !important;
        white-space: normal !important;
        text-align: left !important;
        line-height: 1.25 !important;
    }
}

@media (max-width: 420px) {
    body.hunter-page[data-site-text-size]:not([data-site-text-size="standard"])
    .hunter-game-view[data-hunter-view="base"].active .hunter-base-status-item {
        min-height: 52px !important;
        padding-inline: 8px !important;
    }
}