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

/* =========================
   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;
    }
}