/* Sezioni di scagnozzi e stanze e, su mobile, schede richiudibili e filtri rapidi.
   Fa parte degli stili del gioco: fragments/game-styles.html li include
   in ordine dopo game.css. */

/* Pagina degli scagnozzi divisa per categoria (docs/scagnozzi-requisiti.md,
   5.3). Il colore della categoria e' sempre accompagnato da icona e nome. */
.category-picchiatori { --category-color: var(--category-picchiatori); }
.category-tiratori { --category-color: var(--category-tiratori); }
.category-guardie { --category-color: var(--category-guardie); }
.category-supporto { --category-color: var(--category-supporto); }
.category-speciali { --category-color: var(--category-speciali); }

.category-badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .1rem .5rem;
    border-radius: var(--radius-pill);
    border: 1px solid var(--category-color);
    color: var(--category-color);
    font-size: .72rem;
    font-weight: 700;
    white-space: nowrap;
}

.tier-badge {
    display: inline-flex;
    align-items: center;
    padding: .1rem .5rem;
    border-radius: var(--radius-pill);
    background: rgba(230, 223, 210, 0.08);
    color: var(--text-soft);
    font-size: .72rem;
    font-weight: 600;
    white-space: nowrap;
}

.game-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: .35rem;
}

.game-card[class*="category-"] {
    border-top: 3px solid var(--category-color);
}

.game-card[class*="category-"] .game-card-icon {
    color: var(--category-color);
}

.henchman-filters {
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
    padding-bottom: var(--space-1);
    margin-bottom: var(--space-3);
    -webkit-overflow-scrolling: touch;
}

.henchman-filters .btn {
    flex: 0 0 auto;
}

.henchman-section + .henchman-section {
    margin-top: var(--space-5);
}

.henchman-section-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .25rem var(--space-3);
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--category-color);
}

.henchman-section-title {
    margin: 0;
    font-size: 1.05rem;
    color: var(--category-color);
}

.henchman-section-count {
    color: var(--text-strong);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.henchman-section-description {
    flex-basis: 100%;
    margin: 0;
    font-size: .82rem;
    color: var(--text-soft);
}

/* Stanze divise tra produzione e magazzino, come le sezioni degli scagnozzi. */
.room-category-production { --category-color: var(--room-production); }
.room-category-storage { --category-color: var(--room-storage); }

.room-section + .room-section {
    margin-top: var(--space-5);
}

.room-section-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .25rem var(--space-3);
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--category-color);
}

.room-section-title {
    margin: 0;
    font-size: 1.05rem;
    color: var(--category-color);
}

.room-section-description {
    flex-basis: 100%;
    margin: 0;
    font-size: .82rem;
    color: var(--text-soft);
}

.room-section .game-card {
    border-top: 3px solid var(--category-color);
}

.room-section .game-card-icon {
    color: var(--category-color);
}

/* Mobile: schede chiuse con nome, livello, costi e azione; si aprono e
   chiudono toccandole ovunque (static/js/game-ui.js, bindCollapsibleCards). Filtri rapidi
   di stanze e tecnologie (setupCardFilters). Da PC non cambia nulla. */
@media (max-width: 991.98px) {
    .game-card-grid {
        gap: var(--space-2);
    }

    .game-card[data-collapsible-card]:hover {
        transform: none;
    }

    .game-card[data-collapsible-card] {
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .game-card[data-collapsible-card] [data-card-toggle] {
        align-items: center;
        padding: var(--space-2) var(--space-3);
    }

    .game-card[data-collapsible-card] [data-card-toggle]:focus-visible {
        outline: 2px solid var(--aged-gold);
        outline-offset: -2px;
        border-radius: var(--radius-md);
    }

    .game-card[data-collapsible-card]:not(.is-expanded) .card-details {
        display: none;
    }

    /* Scagnozzo chiuso: statistiche in una riga, solo icona e valore
       (l'etichetta resta per i lettori di schermo). */
    .game-card[data-collapsible-card]:not(.is-expanded) .unit-stats {
        display: flex;
        justify-content: space-between;
        gap: var(--space-2);
    }

    .game-card[data-collapsible-card]:not(.is-expanded) .unit-stats > div {
        gap: .3rem;
    }

    .game-card[data-collapsible-card]:not(.is-expanded) .unit-stats dt span {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .game-card[data-collapsible-card] .game-card-body {
        padding-bottom: var(--space-2);
    }

    .game-card[data-collapsible-card] .game-card-footer {
        padding: var(--space-2) var(--space-3);
    }

    .is-filtered-out {
        display: none !important;
    }

    /* Riquadri della Famiglia (bindCollapsiblePanels): chiusi resta solo
       l'intestazione con titolo e riepilogo. */
    [data-collapsible-panel] [data-panel-toggle] {
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    [data-collapsible-panel] [data-panel-toggle]:focus-visible {
        outline: 2px solid var(--aged-gold);
        outline-offset: -2px;
    }

    [data-collapsible-panel]:not(.is-expanded) > :not([data-panel-toggle]) {
        display: none;
    }

    [data-collapsible-panel]:not(.is-expanded) > [data-panel-toggle] {
        border-bottom: 0;
    }
}

/* Intestazione dei riquadri: titolo a sinistra, riepilogo a destra (solo
   su mobile, da PC il contenuto e' sempre visibile). */
.panel-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.panel-summary {
    margin-left: auto;
    font-size: .8rem;
    color: var(--bs-secondary-color);
    text-align: right;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .15rem .6rem;
}

@media (min-width: 992px) {
    .panel-summary {
        display: none;
    }
}

.unlock-tree-node[class*="category-"] {
    border-left: 4px solid var(--category-color);
}