/* Panoramica, countdown e schede di stanze, tecnologie e scagnozzi: costi, rese, requisiti e caratteristiche.
   Fa parte degli stili del gioco: fragments/game-styles.html li include
   in ordine dopo game.css. */

/* Panoramica: indicatori principali. */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
    gap: var(--space-3);
}

.kpi-card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid rgba(194, 164, 109, 0.25);
    background: linear-gradient(135deg, rgba(194, 164, 109, 0.12), rgba(8, 9, 12, 0.5) 70%);
}

.kpi-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: rgba(194, 164, 109, 0.15);
    color: var(--aged-gold);
    font-size: 1.15rem;
}

.kpi-label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-soft);
}

.kpi-value {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--aged-gold-bright);
    font-variant-numeric: tabular-nums;
}

.kpi-sub {
    font-size: .72rem;
    color: var(--text-muted);
}

/* Countdown compatti (hh:mm:ss). */
.countdown,
[data-expansion-target],
[data-expedition-arrival-target] {
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--aged-gold-bright);
    white-space: nowrap;
}

/* Barre di avanzamento di upgrade e arruolamenti. */
.countdown-progress {
    --bs-progress-height: .35rem;
    min-width: 7rem;
}

.countdown-progress .progress-bar {
    width: 0;
    background: linear-gradient(90deg, #245146, var(--color-success));
    transition: width 1s linear;
}

/* Schede di stanze, tecnologie e scagnozzi (al posto delle tabelle). */
.game-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: var(--space-3);
}

.game-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: linear-gradient(160deg, rgba(194, 164, 109, 0.06), rgba(8, 9, 12, 0.55) 55%);
    transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.game-card:hover {
    border-color: rgba(194, 164, 109, 0.45);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

.game-card.is-locked {
    opacity: .78;
}

.game-card.is-upgrading {
    border-color: rgba(95, 191, 159, 0.5);
}

/* Scheda raggiunta da un collegamento (es. "Vai alla stanza" dell'albero):
   lampeggia e lascia la sottolineatura finche' ha il focus. */
.game-card:focus {
    outline: none;
}

.game-card:focus-visible,
.game-card.component-flash:focus {
    border-color: var(--aged-gold-bright);
    box-shadow: 0 0 0 2px var(--aged-gold);
}

.game-card.component-flash {
    animation: componentFlash 1.6s ease;
}

@keyframes componentFlash {
    0%, 40% {
        border-color: var(--aged-gold-bright);
        box-shadow: 0 0 0 4px var(--aged-gold-bright), 0 0 1.6rem rgba(245, 233, 208, .6);
    }
}

.game-card-header {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-3) var(--space-2);
}

.game-card-icon {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-sm);
    background: rgba(194, 164, 109, 0.12);
    color: var(--aged-gold);
    font-size: 1.1rem;
}

.game-card.is-locked .game-card-icon {
    background: rgba(230, 223, 210, 0.08);
    color: var(--text-muted);
}

.game-card-heading {
    flex: 1;
    min-width: 0;
}

.game-card-title {
    margin: 0;
    font-size: .98rem;
    font-weight: 700;
    color: var(--text-strong);
}

.game-card-description {
    margin: .15rem 0 0;
    font-size: .8rem;
    color: var(--text-soft);
}

.level-badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .15rem .55rem;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(194, 164, 109, 0.45);
    color: var(--aged-gold);
    font-size: .75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.game-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: 0 var(--space-3) var(--space-3);
}

.game-card-label {
    display: block;
    margin-bottom: .2rem;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
}

.game-card-meta {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin: 0;
    font-size: .8rem;
    color: var(--text-soft);
}

/* Etichetta a sinistra e tempo (clessidra) a destra sulla stessa riga. */
.game-card-label-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .15rem var(--space-2);
    margin-bottom: .2rem;
}

.game-card-label-row .game-card-label {
    margin-bottom: 0;
}

.game-card-footer {
    padding: var(--space-3);
    border-top: 1px solid rgba(194, 164, 109, 0.14);
}

.game-card-footer .btn .bi {
    margin-right: .25rem;
}

/* Costi per risorsa: in rosso quelli che la casa non copre. */
.cost-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.cost-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .15rem .55rem;
    border-radius: var(--radius-pill);
    background: rgba(194, 164, 109, 0.1);
    border: 1px solid rgba(194, 164, 109, 0.3);
    color: var(--aged-gold-bright);
    font-size: .78rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.cost-chip .bi {
    color: var(--aged-gold);
}

.cost-chip.is-short {
    background: rgba(125, 46, 69, 0.3);
    border-color: rgba(224, 112, 127, 0.6);
    color: #ffd6dd;
}

.cost-chip.is-short .bi {
    color: var(--color-danger);
}

/* Costo che manca: porta alla stanza che produce la risorsa. */
a.cost-chip.is-short {
    text-decoration: none;
    cursor: pointer;
}

a.cost-chip.is-short:hover,
a.cost-chip.is-short:focus-visible {
    border-color: #ffd6dd;
    background: rgba(125, 46, 69, 0.5);
}

/* Requisito mancante: porta alla scheda di cio' che serve. */
.requirement-link {
    text-decoration: underline dotted;
    text-underline-offset: 3px;
}

.requirement-link:hover,
.requirement-link:focus-visible {
    color: var(--aged-gold-bright) !important;
}

/* Quanto aggiunge il prossimo livello di una stanza. */
.yield-increment {
    color: var(--color-success);
}

/* Caratteristiche degli scagnozzi in una griglia compatta. */
.unit-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .3rem .75rem;
    margin: 0;
    font-size: .8rem;
}

.unit-stats > div {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
}

.unit-stats dt {
    display: flex;
    align-items: center;
    gap: .3rem;
    font-weight: 400;
    color: var(--text-soft);
}

.unit-stats dt .bi {
    color: var(--aged-gold);
}

.unit-stats dd {
    margin: 0;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.recruit-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.recruit-quantity {
    width: 5.5rem;
}