/* css/hunter/mobile-base.css */

/* =========================
   Mobile room-style base dashboard override
   - keeps real DOM buttons
   - no long vertical card list on base view
   - optional background image path: /assets/hunter/base/base_room.png
========================= */

@media (max-width: 768px) {
    .hunter-page .hunter-game-views:has(.hunter-game-view[data-hunter-view="base"].active) {
        overflow: hidden;
        padding: 6px;
    }

    .hunter-page .hunter-game-view[data-hunter-view="base"].active {
        height: 100%;
        min-height: 0;
    }

    .hunter-page .hunter-base-stage {
        height: 100%;
        min-height: 0;
        margin: 0;
        padding: 9px;

        display: grid;
        grid-template-rows: auto auto minmax(0, 1fr);
        gap: 7px;

        border-radius: 20px;

        background:
            linear-gradient(180deg, rgba(26, 18, 10, .1), rgba(26, 18, 10, .28)),
            url("/assets/hunter/base/base_room.png") center / cover no-repeat,
            radial-gradient(circle at 16% 17%, rgba(253, 224, 171, .7), transparent 28%),
            radial-gradient(circle at 82% 78%, rgba(251, 146, 60, .28), transparent 30%),
            linear-gradient(135deg, #3f230f, #7c3f16 46%, #24130a);
    }

    .hunter-page .hunter-base-stage::before {
        background:
            linear-gradient(90deg, rgba(255, 251, 235, .1), transparent 24%, transparent 76%, rgba(67, 20, 7, .16)),
            radial-gradient(ellipse at 50% 100%, rgba(36, 19, 10, .46), transparent 58%);
    }

    .hunter-page .hunter-base-stage::after {
        width: 132px;
        height: 132px;
        right: -46px;
        bottom: -42px;
        opacity: .58;
    }

    .hunter-page .hunter-base-hero {
        display: grid;
        grid-template-columns: 1fr;
        gap: 7px;
        margin: 0;
        min-height: 0;
    }

    .hunter-page .hunter-base-hero-copy {
        min-height: 0;
        padding: 9px 11px;
        border-radius: 18px;
        text-align: center;
        background:
            linear-gradient(180deg, rgba(17, 24, 39, .82), rgba(67, 20, 7, .72)),
            radial-gradient(circle at top, rgba(251, 191, 36, .28), transparent 55%);
    }

    .hunter-page .hunter-base-hero-copy::after,
    .hunter-page .hunter-base-kicker,
    .hunter-page .hunter-base-tagline {
        display: none;
    }

    .hunter-page .hunter-base-title {
        max-width: none;
        margin-bottom: 7px;
        font-size: clamp(24px, 8vw, 34px);
        line-height: 1.05;
    }

    .hunter-page .hunter-base-status-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px;
        margin-top: 0;
    }

    .hunter-page .hunter-base-status-item {
        display: grid;
        gap: 1px;
        padding: 5px 7px;
        border-radius: 12px;
        background: rgba(255, 247, 237, .14);
    }

    .hunter-page .hunter-base-status-item span {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 9px;
    }

    .hunter-page .hunter-base-status-item strong {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        text-align: center;
        font-size: 11px;
    }

    .hunter-page .hunter-base-character-card {
        position: relative;
        min-height: 0;
        height: 116px;
        margin: 0;
        padding: 8px;
        display: grid;
        grid-template-columns: 88px minmax(0, 1fr) auto;
        grid-template-areas: "avatar info actions";
        gap: 8px;
        align-items: center;
        border-radius: 18px;
        background: rgba(255, 251, 235, .82);
        backdrop-filter: blur(8px);
    }

    .hunter-page .hunter-base-character-avatar {
        grid-area: avatar;
        width: 88px;
        height: 116px;
        margin-top: -12px;
        border-radius: 17px;
        background:
            radial-gradient(ellipse at 50% 74%, rgba(251, 191, 36, .28), transparent 56%),
            rgba(255, 251, 235, .46);
    }

    .hunter-page .hunter-base-character-avatar .hunter-player-avatar {
        width: 86px;
        height: 112px;
        object-fit: contain;
        image-rendering: auto;
    }

    .hunter-page .hunter-base-character-card .hunter-player-info {
        grid-area: info;
        min-width: 0;
    }

    .hunter-page .hunter-base-character-card .hunter-player-label,
    .hunter-page .hunter-base-character-card .hunter-player-desc {
        display: none;
    }

    .hunter-page .hunter-base-character-card .hunter-player-title {
        font-size: 15px;
        line-height: 1.1;
    }

    .hunter-page .hunter-base-character-card .hunter-rank-line {
        margin-top: 3px;
        font-size: 10px;
    }

    .hunter-page .hunter-base-character-card .hunter-glove-icon-wrap {
        width: 36px;
        height: 36px;
        border-radius: 12px;
    }

    .hunter-page .hunter-base-character-card .hunter-exp-block {
        margin-top: 5px;
    }

    .hunter-page .hunter-base-character-card .hunter-exp-header {
        margin-bottom: 3px;
        font-size: 10px;
    }

    .hunter-page .hunter-base-character-card .hunter-exp-track {
        height: 7px;
    }

    .hunter-page .hunter-base-player-actions {
        grid-area: actions;
        align-self: stretch;
        width: auto;
        min-width: 62px;
    }

    .hunter-page .hunter-base-player-actions .hunter-coin-box {
        height: 100%;
        width: 62px;
        padding: 6px 4px;
        display: grid;
        place-items: center;
        text-align: center;
        font-size: 10px;
        line-height: 1.25;
    }

    .hunter-page .hunter-base-player-actions .hunter-coin-box strong {
        font-size: 15px;
    }

    .hunter-page .hunter-base-companion-box {
        position: absolute;
        z-index: 4;
        top: 218px;
        left: 104px;
        right: 12px;
        min-height: 0;
        margin: 0;
        padding: 8px 10px;
        border-radius: 18px;
        background: rgba(255, 251, 235, .9);
        box-shadow: 0 8px 18px rgba(67, 20, 7, .16);
    }

    .hunter-page .hunter-base-companion-box .hunter-dialogue-avatar {
        width: 44px;
        height: 44px;
    }

    .hunter-page .hunter-base-companion-box .hunter-dialogue-name {
        font-size: 12px;
    }

    .hunter-page .hunter-base-companion-box .hunter-dialogue-text {
        display: -webkit-box;
        overflow: hidden;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        font-size: 11px;
        line-height: 1.45;
    }

    .hunter-page .hunter-base-dashboard {
        align-self: end;
        min-height: 0;
        margin-top: 58px;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: minmax(58px, 1fr);
        gap: 7px;
    }

    .hunter-page .hunter-base-quick-card,
    .hunter-page .hunter-base-quick-card-free {
        min-height: 0;
        height: auto;
        grid-column: auto;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "main meta";
        gap: 5px;
        align-items: center;
        padding: 7px;
        border-radius: 16px;
        border-width: 1px;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .82),
            0 2px 0 rgba(146, 64, 14, .32),
            0 8px 14px rgba(67, 20, 7, .13);
    }

    .hunter-page .hunter-base-quick-card::after {
        inset: 5px;
        border-radius: 12px;
    }

    .hunter-page .hunter-base-quick-main {
        gap: 7px;
    }

    .hunter-page .hunter-base-quick-icon {
        width: 36px;
        height: 36px;
        border-radius: 12px;
        font-size: 20px;
    }

    .hunter-page .hunter-base-quick-copy {
        gap: 1px;
    }

    .hunter-page .hunter-base-quick-copy strong {
        font-size: 14px;
        line-height: 1.1;
    }

    .hunter-page .hunter-base-quick-copy small {
        display: none;
    }

    .hunter-page .hunter-base-quick-card .hunter-checkin-status-tag,
    .hunter-page .hunter-base-quick-card .hunter-daily-task-progress,
    .hunter-page .hunter-base-card-pill {
        max-width: 70px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        padding: 4px 6px;
        font-size: 9px;
    }

    .hunter-page .hunter-base-card-action {
        position: absolute;
        inset: 0;
        z-index: 3;
        width: 100%;
        min-width: 0;
        opacity: 0;
    }

    .hunter-page .hunter-base-quick-card-checkin .hunter-base-quick-main {
        pointer-events: none;
    }

    .hunter-page .hunter-base-quick-card-free {
        position: absolute;
        right: 10px;
        bottom: 10px;
        z-index: 5;
        width: 94px;
        height: 42px;
        padding: 6px 8px;
        border-radius: 999px;
        background: rgba(255, 251, 235, .92);
    }

    .hunter-page .hunter-base-quick-card-free .hunter-base-quick-main {
        justify-content: center;
    }

    .hunter-page .hunter-base-quick-card-free .hunter-base-quick-icon,
    .hunter-page .hunter-base-quick-card-free .hunter-base-card-pill {
        display: none;
    }

    .hunter-page .hunter-base-quick-card-free .hunter-base-quick-copy strong {
        font-size: 11px;
        line-height: 1;
    }

    .hunter-page .hunter-base-panel-stack {
        position: absolute;
        inset: 62px 10px 58px;
        z-index: 20;
        margin: 0;
        pointer-events: none;
    }

    .hunter-page .hunter-base-panel {
        max-height: 100%;
        overflow: auto;
        padding: 10px;
        border-radius: 18px;
        background: rgba(255, 251, 235, .96);
        box-shadow: 0 18px 40px rgba(17, 24, 39, .28);
        pointer-events: auto;
    }
}

@media (max-width: 420px) {
    .hunter-page .hunter-game-views:has(.hunter-game-view[data-hunter-view="base"].active) {
        padding: 5px;
    }

    .hunter-page .hunter-base-stage {
        padding: 8px;
        gap: 6px;
    }

    .hunter-page .hunter-base-title {
        font-size: 25px;
    }

    .hunter-page .hunter-base-status-item span {
        font-size: 8px;
    }

    .hunter-page .hunter-base-status-item strong {
        font-size: 10px;
    }

    .hunter-page .hunter-base-character-card {
        height: 108px;
        grid-template-columns: 76px minmax(0, 1fr) 54px;
        gap: 6px;
    }

    .hunter-page .hunter-base-character-avatar {
        width: 76px;
        height: 108px;
    }

    .hunter-page .hunter-base-character-avatar .hunter-player-avatar {
        width: 74px;
        height: 106px;
    }

    .hunter-page .hunter-base-player-actions .hunter-coin-box {
        width: 54px;
        font-size: 9px;
    }

    .hunter-page .hunter-base-player-actions .hunter-coin-box strong {
        font-size: 13px;
    }

    .hunter-page .hunter-base-companion-box {
        top: 202px;
        left: 90px;
        right: 10px;
    }

    .hunter-page .hunter-base-dashboard {
        margin-top: 50px;
        gap: 6px;
        grid-auto-rows: minmax(54px, 1fr);
    }

    .hunter-page .hunter-base-quick-card,
    .hunter-page .hunter-base-quick-card-free {
        padding: 6px;
        border-radius: 14px;
    }

    .hunter-page .hunter-base-quick-icon {
        width: 32px;
        height: 32px;
        font-size: 18px;
    }

    .hunter-page .hunter-base-quick-copy strong {
        font-size: 13px;
    }

    .hunter-page .hunter-base-quick-card .hunter-checkin-status-tag,
    .hunter-page .hunter-base-quick-card .hunter-daily-task-progress,
    .hunter-page .hunter-base-card-pill {
        max-width: 58px;
        padding: 3px 5px;
        font-size: 8px;
    }
}

/* =========================
   Mobile base board trim
   - remove cross-tab route prompts from base
   - keep only base-owned panels on the room screen
   - avoid long list / vertical scroll feeling
========================= */

@media (max-width: 768px) {
    .hunter-page .hunter-game-views:has(.hunter-game-view[data-hunter-view="base"].active) {
        height: calc(100dvh - 184px);
        min-height: 590px;
        max-height: 760px;
        overflow: hidden;
    }

    .hunter-page .hunter-game-view[data-hunter-view="base"].active {
        height: 100%;
        overflow: hidden;
    }

    .hunter-page .hunter-base-stage {
        height: 100%;
        overflow: hidden;
        grid-template-rows: auto 46px minmax(0, 1fr);
        gap: 6px;
        padding: 8px;
    }

    .hunter-page .hunter-base-title,
    .hunter-page .hunter-base-kicker,
    .hunter-page .hunter-base-tagline,
    .hunter-page .hunter-base-hero-copy::after {
        display: none !important;
    }

    .hunter-page .hunter-base-hero {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 36px 112px;
        gap: 6px;
        margin: 0;
        min-height: 0;
    }

    .hunter-page .hunter-base-hero-copy {
        min-height: 0;
        padding: 5px;
        border-radius: 14px;
    }

    .hunter-page .hunter-base-status-strip {
        height: 100%;
        margin: 0;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px;
    }

    .hunter-page .hunter-base-status-item {
        min-width: 0;
        padding: 4px 6px;
        border-radius: 11px;
    }

    .hunter-page .hunter-base-status-item span,
    .hunter-page .hunter-base-status-item strong {
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .hunter-page .hunter-base-character-card {
        height: 112px;
        grid-template-columns: 82px minmax(0, 1fr) 58px;
        gap: 7px;
        padding: 7px;
        border-radius: 17px;
    }

    .hunter-page .hunter-base-character-avatar {
        width: 82px;
        height: 112px;
        margin-top: -10px;
    }

    .hunter-page .hunter-base-character-avatar .hunter-player-avatar {
        width: 80px;
        height: 108px;
    }

    .hunter-page .hunter-base-character-card .hunter-player-title {
        font-size: 14px;
    }

    .hunter-page .hunter-base-character-card .hunter-rank-line {
        font-size: 10px;
    }

    .hunter-page .hunter-base-character-card .hunter-exp-header {
        font-size: 10px;
    }

    .hunter-page .hunter-base-player-actions .hunter-coin-box {
        width: 58px;
        padding: 5px 3px;
        font-size: 9px;
    }

    .hunter-page .hunter-base-player-actions .hunter-coin-box strong {
        font-size: 14px;
    }

    .hunter-page .hunter-base-companion-box {
        position: static;
        z-index: auto;
        min-height: 0;
        margin: 0;
        padding: 6px 8px;
        border-radius: 16px;
    }

    .hunter-page .hunter-base-companion-box .hunter-dialogue-avatar {
        width: 34px;
        height: 34px;
    }

    .hunter-page .hunter-base-companion-box .hunter-dialogue-name {
        font-size: 11px;
    }

    .hunter-page .hunter-base-companion-box .hunter-dialogue-text {
        -webkit-line-clamp: 1;
        font-size: 10px;
        line-height: 1.35;
    }

    .hunter-page .hunter-base-quick-card-route {
        display: none !important;
    }

    .hunter-page .hunter-base-dashboard {
        align-self: stretch;
        margin-top: 0;
        min-height: 0;
        height: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(2, minmax(62px, 1fr));
        grid-auto-rows: 0;
        gap: 7px;
        overflow: visible;
        padding-bottom: 48px;
    }

    .hunter-page .hunter-base-quick-card:not(.hunter-base-quick-card-free) {
        min-height: 0;
        height: auto;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas:
            "main"
            "meta";
        align-content: center;
        justify-items: stretch;
        gap: 4px;
        padding: 7px;
        border-radius: 16px;
    }

    .hunter-page .hunter-base-quick-card:not(.hunter-base-quick-card-free) .hunter-base-quick-main {
        justify-content: flex-start;
        gap: 7px;
    }

    .hunter-page .hunter-base-quick-card:not(.hunter-base-quick-card-free) .hunter-base-quick-icon {
        width: 34px;
        height: 34px;
        border-radius: 11px;
        font-size: 18px;
    }

    .hunter-page .hunter-base-quick-card:not(.hunter-base-quick-card-free) .hunter-base-quick-copy strong {
        font-size: 13px;
        line-height: 1.1;
    }

    .hunter-page .hunter-base-quick-card:not(.hunter-base-quick-card-free) .hunter-base-quick-copy small {
        display: none;
    }

    .hunter-page .hunter-base-quick-card:not(.hunter-base-quick-card-free) .hunter-checkin-status-tag,
    .hunter-page .hunter-base-quick-card:not(.hunter-base-quick-card-free) .hunter-daily-task-progress,
    .hunter-page .hunter-base-quick-card:not(.hunter-base-quick-card-free) .hunter-base-card-pill {
        justify-self: start;
        max-width: 100%;
        padding: 3px 6px;
        font-size: 9px;
    }

    .hunter-page .hunter-base-quick-card-free {
        position: absolute;
        right: 9px;
        bottom: 9px;
        z-index: 5;
        width: 92px;
        height: 38px;
        min-height: 0;
        padding: 5px 8px;
        border-radius: 999px;
    }

    .hunter-page .hunter-base-quick-card-free .hunter-base-quick-copy strong {
        font-size: 11px;
    }

    .hunter-page .hunter-base-panel-stack {
        inset: 48px 9px 54px;
    }
}

@media (max-width: 420px) {
    .hunter-page .hunter-game-views:has(.hunter-game-view[data-hunter-view="base"].active) {
        height: calc(100dvh - 176px);
        min-height: 560px;
    }

    .hunter-page .hunter-base-stage {
        padding: 7px;
        gap: 5px;
        grid-template-rows: auto 42px minmax(0, 1fr);
    }

    .hunter-page .hunter-base-hero {
        grid-template-rows: 32px 104px;
        gap: 5px;
    }

    .hunter-page .hunter-base-character-card {
        height: 104px;
        grid-template-columns: 72px minmax(0, 1fr) 52px;
        gap: 6px;
    }

    .hunter-page .hunter-base-character-avatar {
        width: 72px;
        height: 104px;
    }

    .hunter-page .hunter-base-character-avatar .hunter-player-avatar {
        width: 70px;
        height: 100px;
    }

    .hunter-page .hunter-base-dashboard {
        gap: 6px;
        grid-template-rows: repeat(2, minmax(56px, 1fr));
        padding-bottom: 44px;
    }

    .hunter-page .hunter-base-quick-card:not(.hunter-base-quick-card-free) .hunter-base-quick-icon {
        width: 30px;
        height: 30px;
        font-size: 16px;
    }

    .hunter-page .hunter-base-quick-card:not(.hunter-base-quick-card-free) .hunter-base-quick-copy strong {
        font-size: 12px;
    }

    .hunter-page .hunter-base-quick-card:not(.hunter-base-quick-card-free) .hunter-checkin-status-tag,
    .hunter-page .hunter-base-quick-card:not(.hunter-base-quick-card-free) .hunter-daily-task-progress,
    .hunter-page .hunter-base-quick-card:not(.hunter-base-quick-card-free) .hunter-base-card-pill {
        font-size: 8px;
    }
}

/* =========================
   Mobile base room polish: smaller action buttons
   Goal: keep base as a single-screen game room and reveal more background.
========================= */
@media (max-width: 768px) {
    .hunter-page .hunter-game-views:has(.hunter-game-view[data-hunter-view="base"].active) {
        min-height: 520px;
        max-height: none;
    }

    .hunter-page .hunter-base-stage {
        grid-template-rows: auto 38px minmax(0, 1fr);
        gap: 5px;
        padding: 7px;
    }

    .hunter-page .hunter-base-hero {
        grid-template-rows: 28px 98px;
        gap: 5px;
    }

    .hunter-page .hunter-base-hero-copy {
        padding: 4px;
        border-radius: 13px;
        background: rgba(17, 24, 39, .54);
    }

    .hunter-page .hunter-base-status-strip {
        gap: 4px;
    }

    .hunter-page .hunter-base-status-item {
        padding: 3px 5px;
        border-radius: 10px;
    }

    .hunter-page .hunter-base-status-item span {
        font-size: 8px;
    }

    .hunter-page .hunter-base-status-item strong {
        font-size: 9px;
    }

    .hunter-page .hunter-base-character-card {
        height: 98px;
        grid-template-columns: 68px minmax(0, 1fr) 52px;
        gap: 6px;
        padding: 6px;
        border-radius: 15px;
        background: rgba(255, 251, 235, .76);
    }

    .hunter-page .hunter-base-character-avatar {
        width: 68px;
        height: 98px;
        margin-top: -8px;
    }

    .hunter-page .hunter-base-character-avatar .hunter-player-avatar {
        width: 66px;
        height: 94px;
    }

    .hunter-page .hunter-base-character-card .hunter-player-title {
        font-size: 13px;
    }

    .hunter-page .hunter-base-character-card .hunter-rank-line,
    .hunter-page .hunter-base-character-card .hunter-exp-header {
        font-size: 9px;
    }

    .hunter-page .hunter-base-character-card .hunter-exp-track {
        height: 6px;
    }

    .hunter-page .hunter-base-character-card .hunter-glove-icon-wrap {
        width: 30px;
        height: 30px;
        border-radius: 10px;
    }

    .hunter-page .hunter-base-player-actions .hunter-coin-box {
        width: 52px;
        padding: 4px 3px;
        font-size: 8px;
        background: rgba(255, 251, 235, .72);
    }

    .hunter-page .hunter-base-player-actions .hunter-coin-box strong {
        font-size: 12px;
    }

    .hunter-page .hunter-base-companion-box {
        padding: 5px 7px;
        border-radius: 14px;
        background: rgba(255, 251, 235, .82);
    }

    .hunter-page .hunter-base-companion-box .hunter-dialogue-avatar {
        width: 30px;
        height: 30px;
    }

    .hunter-page .hunter-base-companion-box .hunter-dialogue-name {
        font-size: 10px;
    }

    .hunter-page .hunter-base-companion-box .hunter-dialogue-text {
        font-size: 9px;
        line-height: 1.3;
    }

    .hunter-page .hunter-base-dashboard {
        align-self: end;
        height: auto;
        min-height: 0;
        grid-template-rows: repeat(2, 46px);
        gap: 6px;
        padding-bottom: 38px;
    }

    .hunter-page .hunter-base-quick-card:not(.hunter-base-quick-card-free) {
        min-height: 0;
        height: 46px;
        padding: 5px 6px;
        border-radius: 13px;
        background: rgba(255, 251, 235, .78);
    }

    .hunter-page .hunter-base-quick-card:not(.hunter-base-quick-card-free)::after {
        inset: 4px;
        border-radius: 10px;
    }

    .hunter-page .hunter-base-quick-card:not(.hunter-base-quick-card-free) .hunter-base-quick-main {
        gap: 5px;
    }

    .hunter-page .hunter-base-quick-card:not(.hunter-base-quick-card-free) .hunter-base-quick-icon {
        width: 27px;
        height: 27px;
        border-radius: 9px;
        font-size: 15px;
    }

    .hunter-page .hunter-base-quick-card:not(.hunter-base-quick-card-free) .hunter-base-quick-copy strong {
        font-size: 11px;
        line-height: 1.05;
    }

    .hunter-page .hunter-base-quick-card:not(.hunter-base-quick-card-free) .hunter-checkin-status-tag,
    .hunter-page .hunter-base-quick-card:not(.hunter-base-quick-card-free) .hunter-daily-task-progress,
    .hunter-page .hunter-base-quick-card:not(.hunter-base-quick-card-free) .hunter-base-card-pill {
        max-width: 56px;
        padding: 2px 5px;
        font-size: 7px;
    }

    .hunter-page .hunter-base-quick-card-free {
        width: 78px;
        height: 32px;
        right: 8px;
        bottom: 8px;
        padding: 4px 7px;
        background: rgba(255, 251, 235, .82);
    }

    .hunter-page .hunter-base-quick-card-free .hunter-base-quick-copy strong {
        font-size: 10px;
    }
}

@media (max-width: 420px) {
    .hunter-page .hunter-game-views:has(.hunter-game-view[data-hunter-view="base"].active) {
        min-height: 500px;
    }

    .hunter-page .hunter-base-stage {
        grid-template-rows: auto 34px minmax(0, 1fr);
        gap: 4px;
        padding: 6px;
    }

    .hunter-page .hunter-base-hero {
        grid-template-rows: 26px 92px;
        gap: 4px;
    }

    .hunter-page .hunter-base-character-card {
        height: 92px;
        grid-template-columns: 62px minmax(0, 1fr) 46px;
        gap: 5px;
        padding: 5px;
    }

    .hunter-page .hunter-base-character-avatar {
        width: 62px;
        height: 92px;
    }

    .hunter-page .hunter-base-character-avatar .hunter-player-avatar {
        width: 60px;
        height: 88px;
    }

    .hunter-page .hunter-base-dashboard {
        grid-template-rows: repeat(2, 42px);
        gap: 5px;
        padding-bottom: 34px;
    }

    .hunter-page .hunter-base-quick-card:not(.hunter-base-quick-card-free) {
        height: 42px;
        padding: 4px 5px;
    }

    .hunter-page .hunter-base-quick-card:not(.hunter-base-quick-card-free) .hunter-base-quick-icon {
        width: 24px;
        height: 24px;
        font-size: 13px;
    }

    .hunter-page .hunter-base-quick-card:not(.hunter-base-quick-card-free) .hunter-base-quick-copy strong {
        font-size: 10px;
    }

    .hunter-page .hunter-base-quick-card:not(.hunter-base-quick-card-free) .hunter-checkin-status-tag,
    .hunter-page .hunter-base-quick-card:not(.hunter-base-quick-card-free) .hunter-daily-task-progress,
    .hunter-page .hunter-base-quick-card:not(.hunter-base-quick-card-free) .hunter-base-card-pill {
        max-width: 48px;
        font-size: 7px;
    }
}

/* =========================
   Mobile base readability fix
   - keep the 80-point room layout
   - fix expanded panel contrast / overflow
   - make reset text readable
========================= */
@media (max-width: 768px) {
    .hunter-page .hunter-base-status-strip {
        grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
    }

    .hunter-page .hunter-base-status-item {
        background: rgba(33, 25, 21, .66);
        border-color: rgba(255, 226, 153, .36);
    }

    .hunter-page .hunter-base-status-item span {
        color: rgba(255, 248, 220, .78);
    }

    .hunter-page .hunter-base-status-item strong {
        color: #fff7d6;
        font-size: 10px;
        letter-spacing: 0;
    }

    .hunter-page .hunter-base-panel-stack {
        inset: 48px 9px 58px;
        z-index: 80;
        overflow: hidden;
        border-radius: 20px;
        pointer-events: none;
    }

    .hunter-page .hunter-base-panel {
        position: absolute;
        inset: 0;
        max-height: none;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 14px 14px 18px;
        border-radius: 20px;

        color: #4a1f0f;
        background:
            linear-gradient(180deg, rgba(255, 251, 235, .985), rgba(255, 244, 214, .98));
        border: 2px solid rgba(245, 196, 92, .88);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .96),
            0 18px 44px rgba(35, 18, 8, .46);
        backdrop-filter: blur(6px);
        pointer-events: auto;
    }

    .hunter-page .hunter-base-panel-head {
        position: sticky;
        top: -14px;
        z-index: 2;
        margin: -14px -14px 10px;
        padding: 14px;
        background: rgba(255, 251, 235, .98);
        border-bottom: 1px solid rgba(245, 196, 92, .42);
    }

    .hunter-page .hunter-base-panel-head h3 {
        color: #4a1f0f;
        text-shadow: none;
    }

    .hunter-page .hunter-base-panel-close {
        color: #7c2d12;
        background: #fff3c4;
        border: 1px solid rgba(245, 158, 11, .32);
        box-shadow: 0 2px 0 rgba(146, 64, 14, .18);
    }

    .hunter-page .hunter-base-panel .hunter-task-item,
    .hunter-page .hunter-base-panel .hunter-checkin-streak-card,
    .hunter-page .hunter-base-panel .hunter-daily-task-board,
    .hunter-page .hunter-base-panel .hunter-rank-advancement-card,
    .hunter-page .hunter-base-panel .hunter-preview-feed {
        color: #4a1f0f;
        background: rgba(255, 255, 255, .56);
        border-color: rgba(245, 196, 92, .38);
    }

    .hunter-page .hunter-base-panel .hunter-task-title,
    .hunter-page .hunter-base-panel .hunter-task-name,
    .hunter-page .hunter-base-panel .hunter-task-desc,
    .hunter-page .hunter-base-panel .hunter-task-bonus,
    .hunter-page .hunter-base-panel .hunter-task-reward,
    .hunter-page .hunter-base-panel .hunter-task-progress,
    .hunter-page .hunter-base-panel .hunter-rank-line,
    .hunter-page .hunter-base-panel p,
    .hunter-page .hunter-base-panel small,
    .hunter-page .hunter-base-panel span,
    .hunter-page .hunter-base-panel strong {
        color: #4a1f0f;
        text-shadow: none;
    }

    .hunter-page .hunter-base-panel .hunter-task-reward,
    .hunter-page .hunter-base-panel .hunter-task-bonus {
        color: #7c2d12;
        font-weight: 900;
    }

    .hunter-page .hunter-base-panel .hunter-task-progress-bar,
    .hunter-page .hunter-base-panel .hunter-task-progress-track {
        background: rgba(124, 45, 18, .18);
    }

    .hunter-page .hunter-base-panel .hunter-task-progress-fill,
    .hunter-page .hunter-base-panel .hunter-task-progress-value {
        background: linear-gradient(90deg, #f59e0b, #facc15);
    }
}

@media (max-width: 420px) {
    .hunter-page .hunter-base-status-item strong {
        font-size: 9px;
    }

    .hunter-page .hunter-base-panel-stack {
        inset: 44px 8px 54px;
    }

    .hunter-page .hunter-base-panel {
        padding: 12px 12px 16px;
    }

    .hunter-page .hunter-base-panel-head {
        top: -12px;
        margin: -12px -12px 10px;
        padding: 12px;
    }
}


/* =========================
   Mobile base task contrast fix
   - make daily task status / reward text readable on light cards
========================= */
@media (max-width: 768px) {
    .hunter-page .hunter-base-quick-card .hunter-daily-task-progress,
    .hunter-page .hunter-base-quick-card .hunter-checkin-status-tag,
    .hunter-page .hunter-base-quick-card .hunter-base-card-pill {
        color: #7c2d12;
        background: rgba(255, 243, 196, 0.96);
        border: 1px solid rgba(245, 158, 11, 0.38);
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
        font-weight: 900;
    }

    .hunter-page .hunter-base-panel .hunter-daily-task-progress,
    .hunter-page .hunter-base-panel .hunter-task-reward,
    .hunter-page .hunter-base-panel .hunter-task-bonus,
    .hunter-page .hunter-base-panel .hunter-task-bonus-text span,
    .hunter-page .hunter-base-panel .hunter-task-title-row strong,
    .hunter-page .hunter-base-panel .hunter-task-check {
        color: #7c2d12;
    }

    .hunter-page .hunter-base-panel .hunter-task-desc,
    .hunter-page .hunter-base-panel .hunter-task-empty,
    .hunter-page .hunter-base-panel .hunter-task-bonus-text {
        color: #5b3721;
    }

    .hunter-page .hunter-base-panel .hunter-task-progress-track {
        background: rgba(124, 45, 18, 0.14);
    }

    .hunter-page .hunter-base-panel .hunter-task-progress-bar {
        background: linear-gradient(90deg, #d97706, #facc15);
    }
}


/* =========================
   Base room mobile re-layout v2
   - do not let the four base buttons fill the whole room
   - keep more stage background visible like a real mobile game home screen
   - float compact shortcuts near the bottom
========================= */
@media (max-width: 768px) {
    .hunter-page .hunter-base-stage {
        padding-bottom: 168px;
    }

    .hunter-page .hunter-base-dashboard {
        position: absolute;
        left: 10px;
        right: 10px;
        bottom: 58px;
        z-index: 6;

        height: auto;
        min-height: 0;
        padding: 0;
        margin: 0;

        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(2, 78px);
        gap: 8px;
        align-content: end;
    }

    .hunter-page .hunter-base-quick-card:not(.hunter-base-quick-card-free) {
        height: 78px;
        min-height: 78px;
        padding: 8px 10px;
        border-radius: 18px;
        background:
            linear-gradient(180deg, rgba(255, 252, 242, .76), rgba(255, 247, 237, .64)),
            radial-gradient(circle at top left, rgba(251, 191, 36, .12), transparent 38%);
        border: 1px solid rgba(245, 196, 92, .58);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .92),
            0 10px 18px rgba(35, 18, 8, .18);
        backdrop-filter: blur(8px);
    }

    .hunter-page .hunter-base-quick-card:not(.hunter-base-quick-card-free)::after {
        inset: 5px;
        border-radius: 14px;
        border-color: rgba(255, 255, 255, .56);
    }

    .hunter-page .hunter-base-quick-card:not(.hunter-base-quick-card-free) .hunter-base-quick-main {
        align-items: flex-start;
        gap: 8px;
    }

    .hunter-page .hunter-base-quick-card:not(.hunter-base-quick-card-free) .hunter-base-quick-icon {
        width: 36px;
        height: 36px;
        border-radius: 12px;
        font-size: 19px;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .92), 0 3px 8px rgba(146, 64, 14, .12);
    }

    .hunter-page .hunter-base-quick-copy {
        gap: 4px;
    }

    .hunter-page .hunter-base-quick-card:not(.hunter-base-quick-card-free) .hunter-base-quick-copy strong {
        font-size: 14px;
        line-height: 1.1;
        color: #4a1f0f;
    }

    .hunter-page .hunter-base-quick-card:not(.hunter-base-quick-card-free) .hunter-base-quick-copy small {
        display: block;
        font-size: 10px;
        line-height: 1.2;
        color: rgba(74, 31, 15, .74);
    }

    .hunter-page .hunter-base-quick-card:not(.hunter-base-quick-card-free) .hunter-checkin-status-tag,
    .hunter-page .hunter-base-quick-card:not(.hunter-base-quick-card-free) .hunter-daily-task-progress,
    .hunter-page .hunter-base-quick-card:not(.hunter-base-quick-card-free) .hunter-base-card-pill {
        align-self: end;
        justify-self: start;
        max-width: none;
        padding: 3px 7px;
        border-radius: 999px;
        background: rgba(255, 244, 214, .92);
        color: #7c2d12;
        font-size: 9px;
        font-weight: 900;
    }

    .hunter-page .hunter-base-card-action {
        display: none;
    }

    .hunter-page .hunter-base-quick-card-free {
        right: 10px;
        bottom: 12px;
        width: auto;
        min-width: 88px;
        height: 34px;
        padding: 4px 10px;
        border-radius: 999px;
        background: rgba(255, 251, 235, .84);
        border: 1px solid rgba(245, 196, 92, .52);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .92),
            0 8px 16px rgba(35, 18, 8, .16);
        backdrop-filter: blur(8px);
    }

    .hunter-page .hunter-base-quick-card-free .hunter-base-quick-main {
        gap: 6px;
    }

    .hunter-page .hunter-base-quick-card-free .hunter-base-quick-icon {
        width: 20px;
        height: 20px;
        border-radius: 999px;
        font-size: 12px;
    }

    .hunter-page .hunter-base-quick-card-free .hunter-base-quick-copy strong {
        font-size: 11px;
        color: #4a1f0f;
    }

    .hunter-page .hunter-base-quick-card-free .hunter-base-quick-copy small,
    .hunter-page .hunter-base-quick-card-free .hunter-base-card-pill {
        display: none;
    }

    .hunter-page .hunter-base-panel-stack {
        inset: 46px 10px 112px;
    }
}

@media (max-width: 420px) {
    .hunter-page .hunter-base-stage {
        padding-bottom: 154px;
    }

    .hunter-page .hunter-base-dashboard {
        left: 8px;
        right: 8px;
        bottom: 56px;
        grid-template-rows: repeat(2, 70px);
        gap: 7px;
    }

    .hunter-page .hunter-base-quick-card:not(.hunter-base-quick-card-free) {
        height: 70px;
        min-height: 70px;
        padding: 7px 8px;
        border-radius: 16px;
    }

    .hunter-page .hunter-base-quick-card:not(.hunter-base-quick-card-free) .hunter-base-quick-icon {
        width: 32px;
        height: 32px;
        font-size: 17px;
    }

    .hunter-page .hunter-base-quick-card:not(.hunter-base-quick-card-free) .hunter-base-quick-copy strong {
        font-size: 12px;
    }

    .hunter-page .hunter-base-quick-card:not(.hunter-base-quick-card-free) .hunter-base-quick-copy small {
        font-size: 9px;
    }

    .hunter-page .hunter-base-quick-card:not(.hunter-base-quick-card-free) .hunter-checkin-status-tag,
    .hunter-page .hunter-base-quick-card:not(.hunter-base-quick-card-free) .hunter-daily-task-progress,
    .hunter-page .hunter-base-quick-card:not(.hunter-base-quick-card-free) .hunter-base-card-pill {
        font-size: 8px;
        padding: 2px 6px;
    }

    .hunter-page .hunter-base-quick-card-free {
        bottom: 10px;
        min-width: 82px;
        height: 32px;
    }

    .hunter-page .hunter-base-panel-stack {
        inset: 44px 8px 106px;
    }
}


/* =========================
   Base room mobile re-layout v3
   - cap tall mobile/desktop responsive height to avoid stretched room
   - keep feedback chip independent from the 2x2 shortcut grid
   - avoid reset label duplication when an older cached minified JS is still present
========================= */
@media (max-width: 768px) {
    .hunter-page .hunter-game-views:has(.hunter-game-view[data-hunter-view="base"].active) {
        height: calc(100dvh - 176px);
        min-height: 0;
        max-height: 760px;
        overflow: hidden;
    }

    .hunter-page .hunter-game-view[data-hunter-view="base"].active,
    .hunter-page .hunter-base-stage {
        min-height: 0;
    }

    .hunter-page .hunter-base-stage {
        padding-bottom: 162px;
    }

    .hunter-page .hunter-base-dashboard {
        left: 10px;
        right: 10px;
        bottom: 58px;
        grid-template-rows: repeat(2, 72px);
        gap: 8px;
    }

    .hunter-page .hunter-base-quick-card:not(.hunter-base-quick-card-free) {
        height: 72px;
        min-height: 72px;
        padding: 7px 9px;
    }

    .hunter-page .hunter-base-quick-card-free {
        position: absolute;
        right: 12px;
        bottom: 12px;
        z-index: 8;
        width: auto;
        min-width: 88px;
        height: 34px;
    }

    .hunter-page .hunter-base-panel-stack {
        inset: 44px 10px 112px;
    }
}

@media (max-width: 420px) {
    .hunter-page .hunter-game-views:has(.hunter-game-view[data-hunter-view="base"].active) {
        height: calc(100dvh - 166px);
        min-height: 0;
        max-height: 680px;
    }

    .hunter-page .hunter-base-stage {
        padding-bottom: 146px;
    }

    .hunter-page .hunter-base-dashboard {
        left: 8px;
        right: 8px;
        bottom: 52px;
        grid-template-rows: repeat(2, 64px);
        gap: 7px;
    }

    .hunter-page .hunter-base-quick-card:not(.hunter-base-quick-card-free) {
        height: 64px;
        min-height: 64px;
        padding: 6px 8px;
    }

    .hunter-page .hunter-base-quick-card-free {
        right: 10px;
        bottom: 10px;
        min-width: 82px;
        height: 32px;
    }

    .hunter-page .hunter-base-panel-stack {
        inset: 42px 8px 102px;
    }
}