/* Shared compact-width Material 3 pass. Desktop page styles remain the source of truth. */
:root {
    --m3-compact-breakpoint: 600px;
    --m3-touch-target: 48px;
    --m3-radius: 8px;
    --m3-surface: #1f1f1f;
    --m3-surface-container: #252525;
    --m3-outline: #3a3a3a;
    --m3-primary: #ff9800;
    --dashboard-bg: #18191b;
    --dashboard-surface: #202124;
    --dashboard-surface-2: #25272b;
    --dashboard-outline: rgba(255,255,255,0.1);
    --dashboard-muted: #9aa0a6;
    --dashboard-text: #f1f3f4;
    --dashboard-accent: #ff9800;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

@media (min-width: 600px) {
    body {
        background: var(--dashboard-bg) !important;
        color: var(--dashboard-text);
    }

    .container {
        width: 100%;
        max-width: 1180px !important;
        margin: 0 auto !important;
    }

    .card,
    .summary-box,
    .detail-card,
    .rules-box,
    .priority-summary,
    .event-card,
    .calc-card,
    .menu-card,
    .tree-card,
    .hero-equip-cluster,
    .equip-card.expanded {
        background: linear-gradient(180deg, rgba(37,39,43,0.98), rgba(30,31,34,0.98)) !important;
        border-color: var(--dashboard-outline) !important;
        border-radius: var(--m3-radius) !important;
        box-shadow: 0 10px 28px rgba(0,0,0,0.22) !important;
    }

    input,
    select,
    textarea {
        border-radius: var(--m3-radius) !important;
        border-color: rgba(255,255,255,0.12) !important;
        background: rgba(0,0,0,0.2) !important;
    }

    input:focus,
    select:focus,
    textarea:focus {
        border-color: var(--dashboard-accent) !important;
        box-shadow: 0 0 0 3px rgba(255,152,0,0.16);
    }

    button,
    .filter-tab,
    .hero-filter-tab,
    .add-btn,
    .tab-btn,
    .btn-primary,
    .btn-submit {
        border-radius: var(--m3-radius) !important;
    }
}

@media (max-width: 599px) {
    * {
        box-sizing: border-box;
    }

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: clip;
    }

    body {
        min-width: 0;
        padding: 12px !important;
        font-size: 16px;
        line-height: 1.45;
    }

    .container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }

    h1 {
        margin-bottom: 20px !important;
        font-size: 1.2rem !important;
        line-height: 1.2;
        letter-spacing: 1.2px !important;
    }

    h2,
    .section-header h2,
    .card h2,
    .detail-card h2 {
        line-height: 1.25;
        letter-spacing: 1px !important;
    }

    button,
    input,
    select,
    textarea {
        font: inherit;
    }

    input,
    select,
    textarea {
        min-height: var(--m3-touch-target);
        padding: 12px 14px !important;
        border-radius: var(--m3-radius) !important;
        font-size: 16px !important;
    }

    input[type="checkbox"],
    input[type="radio"] {
        width: 24px !important;
        height: 24px !important;
        min-height: 24px;
        flex: 0 0 auto;
    }

    button,
    .btn-primary,
    .btn-submit,
    .btn-complete,
    .btn-reset,
    .np-close,
    .filter-tab,
    .hero-filter-tab,
    .add-btn,
    .tab-btn,
    .stage-tab,
    .prog-btn,
    .editor-btn,
    .action-btn,
    .max-btn,
    .step-btn,
    .summary-toggle,
    .expert-notice-toggle,
    .back-link,
    .event-card,
    .calc-card,
    .menu-card,
    .tree-card,
    .avail-item,
    .cluster-slot,
    .profile-toggle {
        min-height: var(--m3-touch-target);
    }

    .filter-tab,
    .hero-filter-tab,
    .add-btn,
    .tab-btn,
    .max-btn,
    .step-btn,
    .editor-btn,
    .action-btn,
    .btn-complete,
    .btn-reset,
    .np-close {
        padding: 10px 16px !important;
        border-radius: var(--m3-radius) !important;
    }

    .filter-bar,
    .formation-filter-bar,
    .hero-filter-bar,
    .avail-filter-bar,
    .add-bar,
    .tab-bar {
        display: flex;
        gap: 8px !important;
        overflow-x: auto;
        overflow-y: hidden;
        flex-wrap: nowrap !important;
        padding-bottom: 4px;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }

    .filter-bar::-webkit-scrollbar,
    .formation-filter-bar::-webkit-scrollbar,
    .hero-filter-bar::-webkit-scrollbar,
    .avail-filter-bar::-webkit-scrollbar,
    .add-bar::-webkit-scrollbar,
    .tab-bar::-webkit-scrollbar {
        display: none;
    }

    .filter-tab,
    .hero-filter-tab,
    .add-btn,
    .tab-btn {
        flex: 0 0 auto;
        scroll-snap-align: start;
        white-space: nowrap;
    }

    .tab-bar {
        border-radius: 12px !important;
    }

    .grid,
    .detail-grid,
    .stats-header,
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .inv-grid,
    .wh-grid,
    .hero-frag-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    #heroGrid.hub-grid,
    #equipGrid.equip-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    #hubGrid.hub-grid,
    .event-grid,
    .calc-grid,
    .grid {
        grid-template-columns: 1fr !important;
    }

    .card,
    .summary-box,
    .detail-card,
    .rules-box,
    .priority-summary,
    .balance-bar,
    .event-card,
    .calc-card,
    .menu-card,
    .book-card,
    .progress-card,
    .pri-tier,
    .inv-item,
    .wh-item,
    .tree-card,
    .hero-equip-cluster,
    .equip-card.expanded {
        border-radius: 10px !important;
    }

    .card,
    .detail-card,
    .rules-box,
    .priority-summary,
    .event-card,
    .calc-card,
    .menu-card {
        padding: 16px !important;
    }

    .summary-toggle,
    .expert-notice-toggle {
        gap: 12px;
        padding: 14px 16px !important;
    }

    .summary-body {
        padding: 0 14px 14px !important;
    }

    .summary-hint,
    .consume-hint {
        display: none !important;
    }

    .summary-row,
    .pri-tiers,
    .balance-bar,
    .bullet-input-wrap,
    .ld-input-row,
    .consume-toggle,
    .expert-notice-toggle,
    .expert-notice-toggle-left,
    .expert-notice-toggle-right {
        flex-wrap: wrap;
    }

    .book-card,
    .progress-card,
    .pri-tier {
        min-width: 0 !important;
        width: 100%;
    }

    .balance-bar {
        align-items: stretch !important;
        gap: 12px !important;
    }

    .balance-input-row,
    .card-input-row,
    .inv-input-row,
    .wh-input-row,
    .calc-input-row {
        align-items: stretch;
        gap: 8px !important;
    }

    .balance-input {
        width: 100% !important;
    }

    .summary-footer {
        align-items: flex-start !important;
        flex-direction: column;
        gap: 10px;
        padding: 16px !important;
    }

    .avail-item {
        align-items: flex-start !important;
        padding: 10px 12px !important;
        gap: 10px !important;
        font-size: 0.9rem !important;
    }

    .avail-item .avail-name,
    .avail-item .avail-detail {
        min-width: 0 !important;
        white-space: normal !important;
    }

    .back-link {
        padding: 0 8px;
    }

    .item-table,
    .ref-table,
    .ld-priority-table {
        min-width: 620px;
    }

    .card:has(.item-table),
    .card:has(.ref-table),
    .card:has(.ld-priority-table) {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .item-table td,
    .ref-table td,
    .ld-priority-table td {
        padding: 12px 10px !important;
    }

    .qty-input,
    .pri-select {
        min-width: 64px;
    }

    .tree-layout {
        overflow-x: auto;
        padding-bottom: 12px !important;
        -webkit-overflow-scrolling: touch;
    }

    .tree-tier {
        min-width: max-content;
        justify-content: flex-start !important;
    }

    .tree-node {
        min-width: 148px !important;
        min-height: 96px;
        padding: 14px 12px !important;
    }

    .tree-node .tn-name {
        font-size: 0.86rem !important;
    }

    .node-popup-overlay,
    .ee-popup-overlay,
    .eq-popup-overlay {
        align-items: flex-end !important;
        padding: 0 10px 10px;
    }

    .node-popup,
    .ee-popup,
    .eq-popup,
    .modal-box {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        max-height: min(86vh, 720px);
        overflow-y: auto;
        border-radius: 18px 18px 10px 10px !important;
        padding: 20px !important;
    }

    .np-pip {
        width: 40px !important;
        height: 40px !important;
    }

    .modal-btns {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .modal-btns button {
        min-height: var(--m3-touch-target);
    }

    .level-stepper,
    .prog-controls,
    .eq-popup-stepper,
    .ee-popup-controls,
    .editor-stepper {
        gap: 8px !important;
    }

    .level-stepper .level-input {
        width: 96px !important;
        padding: 8px !important;
    }

    .phase-box {
        min-height: 36px;
    }

    .hero-equip-cluster {
        grid-template-columns: 1fr !important;
        padding: 12px !important;
    }

    .cluster-slot-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .cluster-slot {
        min-height: 148px !important;
        padding: 10px !important;
    }

    .equip-expanded-layout {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 18px !important;
        padding: 14px !important;
    }

    .equip-expanded-info,
    .equip-expanded-editor {
        width: 100% !important;
        max-width: none !important;
    }

    .equip-editor-row,
    .equip-editor-actions {
        flex-wrap: wrap;
    }

    .editor-btn,
    .action-btn {
        flex: 1 1 64px;
    }

    .hero-card,
    .equip-card,
    .tree-card,
    .event-card,
    .calc-card,
    .menu-card {
        -webkit-tap-highlight-color: transparent;
    }

    html[data-page="black-market"] .tab-bar {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        overflow: visible !important;
        flex-wrap: initial !important;
        padding-bottom: 4px !important;
    }

    html[data-page="black-market"] .tab-btn {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        white-space: normal !important;
        scroll-snap-align: none;
    }
}

@media (min-width: 600px) and (max-width: 839px) {
    body {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    .container {
        max-width: 100% !important;
    }

    .grid,
    .detail-grid {
        grid-template-columns: 1fr !important;
    }

    .filter-tab,
    .hero-filter-tab,
    .add-btn,
    button,
    input,
    select,
    textarea {
        min-height: 44px;
    }
}