/* css/hunter/mobile-final-fixes.css */

/*
 * The site switcher already identifies this page, so the repeated Hunter title
 * wastes vertical space on every viewport. Keep the shared frame symmetric and
 * let desktop layouts fill the remaining viewport instead of using a fixed
 * 100svh offset.
 */
.hunter-page .hunter-top-bar {
    display: none !important;
}

.hunter-page .site-mode-tabs {
    box-sizing: border-box;
}

@media (min-width: 769px) {
    body.hunter-page {
        margin: 0;
        height: 100svh;
        min-height: 100svh;
        overflow: hidden;
    }

    .hunter-page .container {
        height: 100svh;
        min-height: 100svh;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        box-sizing: border-box;
        padding: 8px;
    }

    .hunter-page .site-mode-tabs {
        flex: 0 0 auto;
    }

    .hunter-page .hunter-preview-card {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        padding-bottom: 5px;
    }

    .hunter-page .hunter-game-shell {
        flex: 1 1 auto;
        min-height: 0;
        height: auto;
    }

    .hunter-page .hunter-partner-room.active {
        min-height: 100%;
    }
}

/* Keep the desktop hero horizontal without crushing player text near 820px. */
@media (min-width: 769px) and (max-width: 1024px) {
    .hunter-page .hunter-base-hero {
        grid-template-columns: minmax(0, .95fr) minmax(300px, 1.05fr);
    }

    .hunter-page .hunter-base-character-card {
        display: grid;
        grid-template-columns: 96px minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr) auto;
        gap: 8px 10px;
        padding: 12px;
    }

    .hunter-page .hunter-base-character-avatar {
        grid-column: 1;
        grid-row: 1 / span 2;
        width: 96px;
        height: auto;
        min-height: 190px;
        align-self: stretch;
    }

    .hunter-page .hunter-base-character-avatar .hunter-player-avatar {
        width: 90px;
        height: 100%;
        max-height: 200px;
    }

    .hunter-page .hunter-base-character-card .hunter-player-info {
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
        align-self: center;
    }

    .hunter-page .hunter-base-character-card .hunter-player-desc {
        font-size: 11px;
        line-height: 1.35;
    }

    .hunter-page .hunter-base-player-actions {
        grid-column: 2;
        grid-row: 2;
        width: 100%;
        align-self: end;
        align-items: stretch;
    }

    .hunter-page .hunter-base-player-actions .hunter-coin-box {
        padding: 6px 8px;
        font-size: 11px;
        text-align: center;
    }
}

/* =========================
   Final pre-split mobile layout fix v7
   - separate base status strip from the player card
   - keep memory reset timer inside the header on narrow screens
========================= */
@media (max-width: 768px) {
    .hunter-page .hunter-game-view[data-hunter-view="base"].active .hunter-base-hero {
        grid-template-rows: 34px 104px !important;
        gap: 9px !important;
    }

    .hunter-page .hunter-game-view[data-hunter-view="base"].active .hunter-base-hero-copy {
        position: relative;
        z-index: 3;
    }

    .hunter-page .hunter-game-view[data-hunter-view="base"].active .hunter-base-status-strip {
        align-items: stretch;
    }

    .hunter-page .hunter-game-view[data-hunter-view="base"].active .hunter-base-status-item {
        min-height: 0;
        box-sizing: border-box;
    }

    .hunter-page .hunter-game-view[data-hunter-view="base"].active .hunter-base-character-card {
        position: relative;
        z-index: 2;
        align-self: start;
        height: 104px !important;
        margin-top: 0 !important;
    }

    .hunter-page .hunter-game-view[data-hunter-view="base"].active .hunter-base-character-avatar {
        height: 104px !important;
    }

    .hunter-page .hunter-game-view[data-hunter-view="base"].active .hunter-base-character-avatar .hunter-player-avatar {
        height: 100px !important;
    }

    .hunter-page .hunter-explore-room .hunter-memory-header {
        grid-template-columns: minmax(0, 1fr) 82px !important;
        align-items: center;
        gap: 8px !important;
        overflow: hidden;
    }

    .hunter-page .hunter-explore-room .hunter-memory-header > div:first-child {
        min-width: 0;
    }

    .hunter-page .hunter-explore-room .hunter-memory-header h3,
    .hunter-page .hunter-explore-room .hunter-memory-desc {
        min-width: 0;
        max-width: 100%;
    }

    .hunter-page .hunter-explore-room .hunter-memory-timer-box {
        width: 82px !important;
        min-width: 0;
        max-width: 82px;
        box-sizing: border-box;
        padding: 6px 4px !important;
        border-radius: 13px !important;
        justify-self: end;
    }

    .hunter-page .hunter-explore-room .hunter-memory-timer-label {
        font-size: 9px !important;
        line-height: 1.1;
    }

    .hunter-page .hunter-explore-room .hunter-memory-timer-value {
        font-size: 14px !important;
        line-height: 1.1;
        letter-spacing: -.03em;
        white-space: nowrap;
    }
}

@media (max-width: 420px) {
    .hunter-page .hunter-game-view[data-hunter-view="base"].active .hunter-base-hero {
        grid-template-rows: 32px 96px !important;
        gap: 8px !important;
    }

    .hunter-page .hunter-game-view[data-hunter-view="base"].active .hunter-base-character-card {
        height: 96px !important;
    }

    .hunter-page .hunter-game-view[data-hunter-view="base"].active .hunter-base-character-avatar {
        height: 96px !important;
    }

    .hunter-page .hunter-game-view[data-hunter-view="base"].active .hunter-base-character-avatar .hunter-player-avatar {
        height: 92px !important;
    }

    .hunter-page .hunter-explore-room .hunter-memory-header {
        grid-template-columns: minmax(0, 1fr) 74px !important;
        gap: 7px !important;
    }

    .hunter-page .hunter-explore-room .hunter-memory-timer-box {
        width: 74px !important;
        max-width: 74px;
        padding: 5px 3px !important;
    }

    .hunter-page .hunter-explore-room .hunter-memory-timer-label {
        font-size: 8px !important;
    }

    .hunter-page .hunter-explore-room .hunter-memory-timer-value {
        font-size: 12px !important;
    }
}

/* =========================
   Base status bar layout fix v9
   - hunterDailyResetCountdown reused the global blue chip style and made a pill inside the top status pill
   - keep the base top status as two compact rows without nested chip overflow
========================= */
@media (max-width: 768px) {
    .hunter-page .hunter-game-view[data-hunter-view="base"].active .hunter-base-hero {
        grid-template-rows: 36px 104px !important;
        gap: 10px !important;
    }

    .hunter-page .hunter-game-view[data-hunter-view="base"].active .hunter-base-hero-copy {
        padding: 4px !important;
        overflow: visible;
    }

    .hunter-page .hunter-game-view[data-hunter-view="base"].active .hunter-base-status-strip {
        height: 36px;
        grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr) !important;
        gap: 6px !important;
    }

    .hunter-page .hunter-game-view[data-hunter-view="base"].active .hunter-base-status-item {
        height: 36px;
        min-width: 0;
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 6px;
        padding: 0 9px !important;
        border-radius: 14px !important;
        overflow: hidden;
        box-sizing: border-box;
    }

    .hunter-page .hunter-game-view[data-hunter-view="base"].active .hunter-base-status-item span {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 10px !important;
        line-height: 1;
    }

    .hunter-page .hunter-game-view[data-hunter-view="base"].active .hunter-base-status-item strong {
        flex: 0 0 auto;
        max-width: 62%;
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        text-align: right;
        font-size: 12px !important;
        line-height: 1;
    }

    .hunter-page .hunter-game-view[data-hunter-view="base"].active .hunter-base-status-item .hunter-daily-reset-countdown {
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        padding: 0 !important;
        color: #fff7d6 !important;
        font-size: 12px !important;
        line-height: 1 !important;
        letter-spacing: 0;
    }
}

@media (max-width: 420px) {
    .hunter-page .hunter-game-view[data-hunter-view="base"].active .hunter-base-hero {
        grid-template-rows: 34px 96px !important;
        gap: 9px !important;
    }

    .hunter-page .hunter-game-view[data-hunter-view="base"].active .hunter-base-status-strip {
        height: 34px;
        grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr) !important;
        gap: 5px !important;
    }

    .hunter-page .hunter-game-view[data-hunter-view="base"].active .hunter-base-status-item {
        height: 34px;
        padding: 0 7px !important;
        border-radius: 13px !important;
    }

    .hunter-page .hunter-game-view[data-hunter-view="base"].active .hunter-base-status-item span {
        font-size: 9px !important;
    }

    .hunter-page .hunter-game-view[data-hunter-view="base"].active .hunter-base-status-item strong,
    .hunter-page .hunter-game-view[data-hunter-view="base"].active .hunter-base-status-item .hunter-daily-reset-countdown {
        font-size: 11px !important;
    }
}

/*
 * The mobile account action lives beside the UID in the player card.
 * Remove the duplicated page heading so Safari's short viewport starts the
 * game room immediately below the site switcher.
 */
@media (max-width: 768px) {
    .hunter-page .hunter-top-bar {
        display: none !important;
    }

    .hunter-page .hunter-player-account-row {
        gap: 4px;
        margin: -1px 0 4px;
    }

    .hunter-page .hunter-player-account-row .hunter-player-uid-row {
        gap: 4px;
        margin: 0;
        font-size: 9px;
    }

    .hunter-page .hunter-player-account-row .hunter-player-uid-row button {
        padding: 2px 5px;
        font-size: 9px;
        line-height: 1;
    }

    .hunter-page .hunter-player-account-row .hunter-player-line-btn {
        width: auto;
        min-width: 0;
        padding: 3px 6px;
        font-size: 9px;
        line-height: 1;
        box-shadow: 0 2px 6px rgba(6, 199, 85, .20);
    }

    .hunter-page .hunter-player-account-row .hunter-player-line-btn.is-bound {
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .14),
            0 2px 5px rgba(15, 23, 42, .16);
    }
}

@media (max-width: 360px) {
    .hunter-page .hunter-player-account-row {
        gap: 3px;
    }

    .hunter-page .hunter-player-account-row .hunter-player-uid-row {
        gap: 3px;
    }

    .hunter-page .hunter-player-account-row .hunter-player-uid-row > span:first-child {
        display: none;
    }

    .hunter-page #hunterPlayerUidCopyBtn {
        padding: 2px 4px;
        font-size: 0;
    }

    .hunter-page #hunterPlayerUidCopyBtn::after {
        content: "複";
        font-size: 8px;
    }

    .hunter-page .hunter-player-account-row .hunter-player-line-btn {
        padding-inline: 4px;
        font-size: 8px;
    }
}

/* Give the taller mobile game room a little more horizontal breathing room. */
@media (max-width: 768px) {
    .hunter-page .container {
        padding-inline: 4px;
    }

    .hunter-page .site-mode-tabs {
        box-sizing: border-box;
    }

    .hunter-page .hunter-preview-card {
        padding-inline: 5px;
    }
}

/*
 * Base and Rank still carry older 100dvh offset heights. On touch devices and
 * device emulation those fixed heights can end before the shared app shell,
 * pulling the bottom navigation upward. Let both views consume the same flex
 * track as the other tabs while preserving their own internal overflow rules.
 */
@media (max-width: 768px) {
    .hunter-page .hunter-game-views:has(.hunter-game-view[data-hunter-view="base"].active),
    .hunter-page .hunter-game-views:has(.hunter-game-view[data-hunter-view="gloves"].active) {
        flex: 1 1 0;
        height: auto;
        min-height: 0;
        max-height: none;
    }
}

/*
 * A narrow desktop window uses the mobile card layout but still has a precise
 * mouse pointer. Keep the touch-device vertical layout untouched while letting the
 * desktop flex shell reclaim the removed header space.
 */
@media (max-width: 768px) and (hover: hover) and (pointer: fine) {
    body.hunter-page {
        margin: 0;
        min-height: 100svh;
    }

    .hunter-page .site-mode-tabs {
        padding: 4px;
        border-radius: 18px;
    }

    .hunter-page .site-mode-tab {
        padding: 11px 14px;
        border-radius: 14px;
        font-size: 14px;
    }

    .hunter-page .hunter-game-views:has(.hunter-game-view[data-hunter-view="base"].active),
    .hunter-page .hunter-game-views:not(:has(.hunter-game-view[data-hunter-view="base"].active)) {
        flex: 1 1 0;
        height: auto;
    }

    .hunter-page .hunter-partner-room.active {
        min-height: 100%;
    }
}