/* Width-driven phone and tablet reflow. Desktop rules remain in the original stylesheets. */

.notebook-mobile-toggle[hidden] {
    display: none !important;
}

@media (min-width: 1100px) {
    .core-control-hub {
        grid-template-columns: minmax(280px, 0.88fr) minmax(380px, 1.12fr);
        grid-template-areas:
            "hero sidecar"
            "progress sidecar"
            "audio sidecar";
        align-items: start;
    }

    .core-control-hub > .header { display: contents; }
    .header-primary { grid-area: hero; min-width: 0; }
    .header-progression { grid-area: progress; min-width: 0; }

    .header-utilities {
        grid-area: audio;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
        gap: 6px;
        width: min(100%, 460px);
        min-width: 0;
    }
    .header-utility-row { width: 100%; max-width: 460px; margin: 0; }
    .audio-player { max-width: 460px; padding: 6px 9px; gap: 3px 7px; grid-template-columns: minmax(0, 1fr) 52px; grid-template-rows: auto auto auto; }
    .audio-player-controls { min-height: 30px; }
    .audio-player-button { min-width: 36px; min-height: 36px; padding: 5px; }
    .audio-track-details { font-size: .63rem; }
    .music-player-companion { width: 52px; height: 67px; grid-row: 1 / 4; }
    .music-player-companion img { width: 48px; height: 64px; }
    .audio-controls {
        grid-column: 1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px 9px;
        width: 100%;
        max-width: 460px;
        margin: 0;
    }
    .header-utilities > .help-button { grid-column: 1; justify-self: start; min-height: 34px; }
}

@media (min-width: 600px) and (max-width: 1099px) {
    .game-container {
        width: min(100%, 1100px);
        padding: clamp(12px, 2vw, 20px);
    }

    .notebook-nav-strip {
        display: block;
        overflow: visible;
        padding: 8px 10px 10px;
    }

    .notebook-tabs {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 132px), 1fr));
        gap: 6px;
        width: 100%;
        max-width: none;
        overflow: visible;
    }

    .notebook-tab {
        min-width: 0;
        min-height: 46px;
        padding: 8px 10px;
        border: 1px solid #d0d2bf;
        border-radius: 11px;
        line-height: 1.15;
        white-space: normal;
    }

    .notebook-nav-strip .offline-summary {
        width: 100%;
        min-width: 0;
        max-width: none;
        margin: 8px 0 0;
    }

    .notebook-mobile-toggle {
        display: none !important;
    }

    .core-control-hub {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "hero hero"
            "actions metrics"
            "progress progress"
            "care care"
            "visitor visitor"
            "audio audio";
        align-items: start;
        gap: clamp(12px, 2vw, 18px);
    }

    .core-control-hub > .header,
    .core-control-hub > .dashboard-sidecar,
    .core-control-hub .action-spa-deck {
        display: contents;
    }

    .header-primary {
        grid-area: hero;
        min-width: 0;
        width: 100%;
    }

    .header-primary .capy-container {
        width: min(100%, 760px);
        height: clamp(170px, 24vw, 250px);
    }

    .header-primary .header-title-row {
        width: min(100%, 760px);
    }

    .action-zone {
        grid-area: actions;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-content: start;
        margin: 0;
        padding: clamp(10px, 1.6vw, 16px);
        border: 1px solid #d4d8c5;
        border-radius: 18px;
        background: #edf0e4;
    }

    .action-zone #grazeBtn,
    .action-zone .graze-explainer {
        grid-column: 1 / -1;
    }

    .action-zone .btn {
        min-height: 50px;
        padding: 8px 9px;
        font-size: clamp(0.9rem, 1.55vw, 1rem);
        overflow-wrap: anywhere;
    }

    .core-metrics {
        grid-area: metrics;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-content: start;
        gap: 8px;
    }

    .stats-panel {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, max(6rem, calc(50% - 3px))), 1fr));
        gap: 6px;
        margin: 0;
        padding: 8px;
    }

    .stat-row {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        min-width: 0;
        gap: 3px;
        margin: 0;
        padding: 8px;
        border: 1px solid #dfe0cf;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.42);
    }

    .stat-row:last-child {
        grid-column: 1 / -1;
        padding-bottom: 8px;
        border-bottom: 1px solid #dfe0cf;
    }

    .stat-label { font-size: clamp(0.77rem, 1.35vw, 0.88rem); }
    .stat-subtitle { font-size: 0.67rem; }
    .biomass-display { font-size: clamp(1.05rem, 2vw, 1.35rem); }
    .manual-rate-value { text-align: left; }
    .manual-rate-value strong { font-size: 0.82rem; }
    .manual-rate-value small { font-size: 0.65rem; }

    .header-progression {
        grid-area: progress;
        min-width: 0;
        width: 100%;
    }

    .perk-panel {
        grid-area: care;
        min-width: 0;
        padding: 12px;
    }

    .perk-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .perk-button { min-height: 88px; }

    .riverbank-visitor-zone { grid-area: visitor; min-width: 0; }

    .header-utilities {
        grid-area: audio;
        display: grid;
        gap: 8px;
        min-width: 0;
        width: 100%;
    }

    .audio-controls {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        max-width: none;
    }

    .audio-player-button,
    .help-button,
    .restoration-shortcut button,
    .project-card button,
    .grove-node button,
    .event-claim-button,
    .wetland-switcher button {
        min-height: 44px;
    }

    #openGroveBtn,
    #openSaveBackupBtn,
    #hardResetBtn {
        min-height: 44px;
    }

    @media (max-width: 799px) {
        .core-control-hub {
            grid-template-columns: minmax(0, 1fr);
            grid-template-areas:
                "hero"
                "actions"
                "metrics"
                "progress"
                "care"
                "visitor"
                "audio";
        }

        .action-zone,
        .core-metrics,
        .header-progression,
        .perk-panel,
        .header-utilities {
            width: min(100%, 680px);
            margin-inline: auto;
        }

        .riverbank-visitor-zone {
            grid-area: visitor;
            width: min(100%, 680px);
            min-width: 0;
            margin-inline: auto;
        }
    }
}

@media (min-width: 600px) and (max-width: 1099px) and (max-height: 500px) {
    .core-control-hub {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "hero actions"
            "metrics metrics"
            "progress progress"
            "care care"
            "visitor visitor"
            "audio audio";
        align-items: start;
    }

    .header-primary .capy-container {
        height: clamp(112px, 32vh, 150px);
    }

    .action-zone {
        align-self: center;
        margin-top: 8px;
    }

    .core-metrics {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 599px) {
    body {
        padding: max(8px, env(safe-area-inset-top))
            max(8px, env(safe-area-inset-right))
            max(8px, env(safe-area-inset-bottom))
            max(8px, env(safe-area-inset-left));
    }

    .game-container {
        width: 100%;
        padding: clamp(8px, 2.8vw, 12px);
        border-radius: 16px;
    }

    .notebook-nav-sticky {
        margin: 0;
        padding-top: 6px;
    }

    .notebook-nav-strip {
        position: relative;
        display: block;
        overflow: visible;
        padding: 6px 6px 0;
    }

    .notebook-tabs {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-auto-rows: minmax(48px, auto);
        gap: 5px;
        width: 100%;
        max-width: none;
        overflow: visible;
    }

    .notebook-tab {
        min-width: 0;
        min-height: 48px;
        padding: 6px 4px;
        border: 1px solid #d0d2bf;
        border-radius: 10px;
        font-size: clamp(0.72rem, 3.05vw, 0.84rem);
        line-height: 1.12;
        white-space: normal;
        overflow-wrap: anywhere;
        touch-action: manipulation;
    }

    .notebook-mobile-toggle {
        position: absolute;
        z-index: 2;
        top: 6px;
        right: 6px;
        left: calc(75% + 3px);
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 0;
        min-height: 48px;
        padding: 6px 4px;
        border: 1px solid #b9c6ab;
        border-radius: 10px;
        background: #e5ead7;
        color: #435b3c;
        font: 700 0.76rem/1.1 system-ui, sans-serif;
        text-align: center;
        touch-action: manipulation;
    }

    .notebook-mobile-toggle:focus-visible {
        outline: 3px solid #2f6f8f;
        outline-offset: 2px;
    }

    .notebook-tab:nth-child(1) { grid-column: 1; grid-row: 1; }
    .notebook-tab:nth-child(2) { grid-column: 2; grid-row: 1; }
    .notebook-tab:nth-child(3) { grid-column: 3; grid-row: 1; }
    .notebook-tab:nth-child(4) { grid-column: 1 / 3; grid-row: 2; }
    .notebook-tab:nth-child(5) { grid-column: 3 / 5; grid-row: 2; }
    .notebook-tab:nth-child(6) { grid-column: 1 / 3; grid-row: 3; }
    .notebook-tab:nth-child(7) { grid-column: 3 / 5; grid-row: 3; }
    .notebook-tab:nth-child(8) { grid-column: 1 / 3; grid-row: 4; }

    .notebook-nav-strip .offline-summary {
        width: 100%;
        min-width: 0;
        max-width: none;
        margin: 6px 0 0;
    }

    .core-control-hub {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "hero"
            "actions"
            "metrics"
            "progress"
            "care"
            "visitor"
            "audio";
        gap: 10px;
        padding: clamp(9px, 2.8vw, 13px);
        border-radius: 16px;
    }

    .core-control-hub > .header,
    .core-control-hub > .dashboard-sidecar,
    .core-control-hub .action-spa-deck {
        display: contents;
    }

    .header-primary {
        grid-area: hero;
        min-width: 0;
        width: 100%;
    }

    .header-primary .capy-container {
        width: min(100%, 680px);
        height: clamp(138px, 38vw, 220px);
        margin-bottom: 4px;
        border-radius: 15px;
    }

    .header-primary .header-title-row {
        width: min(100%, 680px);
    }

    .header-primary .header-title-row h1 {
        font-size: clamp(1.4rem, 5.1vw, 1.85rem);
        line-height: 1.1;
    }

    .header-primary .capy-feed-hint {
        margin-bottom: 5px;
        font-size: 0.76rem;
    }

    .header-primary .season-label { margin: 4px 0 5px; }
    .header-primary .season-effect { margin: 0 0 4px; }
    .header-primary .chapter-label { margin: 4px 0 0; }

    .action-zone {
        grid-area: actions;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-content: start;
        gap: 7px;
        margin: 0;
        padding: 9px;
        border: 1px solid #d4d8c5;
        border-radius: 15px;
        background: #edf0e4;
    }

    .action-zone #grazeBtn,
    .action-zone .graze-explainer {
        grid-column: 1 / -1;
    }

    .action-zone .btn {
        width: 100%;
        min-width: 0;
        min-height: 52px;
        padding: 8px 7px;
        font-size: clamp(0.9rem, 3.8vw, 1.02rem);
        line-height: 1.15;
        overflow-wrap: anywhere;
        touch-action: manipulation;
    }

    .graze-explainer {
        margin: -2px 2px 1px;
        font-size: 0.76rem;
    }

    .action-spa-deck.is-yuzu-active > .action-zone {
        border-color: #e8c54e;
        background: #fff7d7;
    }

    .action-spa-deck.is-snooze-active > .action-zone {
        border-color: #14243b;
        background: #213453;
        color: #fff;
    }

    .core-metrics {
        grid-area: metrics;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-content: start;
        gap: 8px;
        min-width: 0;
    }

    .stats-panel {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, max(6rem, calc(50% - 3px))), 1fr));
        gap: 6px;
        margin: 0;
        padding: 7px;
    }

    .stat-row {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        min-width: 0;
        gap: 3px;
        margin: 0;
        padding: 8px;
        border: 1px solid #dfe0cf;
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.42);
    }

    .stat-row:last-child {
        grid-column: 1 / -1;
        padding-bottom: 8px;
        border-bottom: 1px solid #dfe0cf;
    }

    .stat-label { font-size: clamp(0.76rem, 3.3vw, 0.86rem); line-height: 1.2; }
    .stat-subtitle { display: none; }
    .biomass-display { font-size: clamp(1.05rem, 4.6vw, 1.35rem); }
    .stat-row > span:last-child { font-size: 1rem; }
    .manual-rate-value { display: flex; flex-wrap: wrap; gap: 2px 7px; text-align: left; }
    .manual-rate-value strong { font-size: 0.82rem; white-space: normal; }
    .manual-rate-value small { font-size: 0.7rem; white-space: normal; }

    .hazard-container {
        padding: 10px;
    }

    .hazard-label {
        font-size: 0.84rem;
    }

    .header-progression {
        grid-area: progress;
        min-width: 0;
        width: 100%;
    }

    .milestone-card { grid-template-columns: minmax(0, 1fr); }
    .milestone-action-button { width: 100%; min-height: 44px; }

    .restoration-shortcut {
        align-items: center;
        min-width: 0;
    }

    .perk-panel {
        grid-area: care;
        min-width: 0;
        padding: 10px;
        border-radius: 14px;
    }

    .perk-button { min-height: 78px; }

    .riverbank-visitor-zone { grid-area: visitor; min-width: 0; }

    .header-utilities {
        grid-area: audio;
        display: grid;
        gap: 8px;
        min-width: 0;
        width: 100%;
    }

    .audio-controls {
        grid-template-columns: minmax(0, 1fr);
        width: 100%;
        max-width: none;
        gap: 7px;
    }

    .audio-player-button {
        min-width: 44px;
    }

    .volume-control { min-height: 48px; }
    .volume-control input[type="range"] { min-height: 36px; }
    #openGroveBtn,
    #openSaveBackupBtn,
    #hardResetBtn {
        min-height: 44px;
    }

    .audio-player-button,
    .help-button,
    .restoration-shortcut button,
    .project-card button,
    .grove-node button,
    .event-claim-button,
    .wetland-switcher button {
        min-height: 44px;
        touch-action: manipulation;
    }

    .notebook-page { min-width: 0; }
    .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .shop-item, .project-card, .grove-node { min-width: 0; }

    @media (max-width: 380px) {
        .notebook-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .notebook-tab:nth-child(1) { grid-column: 1; grid-row: 1; }
        .notebook-tab:nth-child(2) { grid-column: 2; grid-row: 1; }
        .notebook-tab:nth-child(3) { grid-column: 1; grid-row: 2; }
        .notebook-tab:nth-child(4) { grid-column: 1; grid-row: 3; }
        .notebook-tab:nth-child(5) { grid-column: 2; grid-row: 3; }
        .notebook-tab:nth-child(6) { grid-column: 1; grid-row: 4; }
        .notebook-tab:nth-child(7) { grid-column: 2; grid-row: 4; }
        .notebook-tab:nth-child(8) { grid-column: 1; grid-row: 5; }

        .notebook-mobile-toggle {
            top: 59px;
            right: 6px;
            left: calc(50% + 3px);
        }

        .audio-player-controls {
            display: grid;
            grid-template-columns: repeat(3, 44px);
            justify-content: start;
        }

        .audio-track-name {
            grid-column: 1 / -1;
            width: 100%;
            padding: 0;
            text-overflow: ellipsis;
        }

        .restoration-shortcut {
            align-items: stretch;
            flex-direction: column;
        }

        .restoration-shortcut button { width: 100%; }
    }
}

/* Keep enlarged metrics text inside its panel without changing the wider hub. */
.core-metrics .hazard-label { flex-wrap: wrap; gap: 4px 8px; }