/* Riconosci Truppe — stili specifici */

/* ---- Accenti pannelli (coerenti col Time Calculator) ------------------- */
.wg-panel--t1 {
  background: linear-gradient(180deg, #f7edd3, #f1e3c3);
  border-left: 8px solid var(--wg-gold);
}
.wg-panel--t1 .wg-panel-title { color: #9c6b13; border-bottom-color: var(--wg-gold); }

/* ---- Blocchi coordinate / tempo (come Time Calculator) ----------------- */
.wg-coord-block {
  border: 1px dashed var(--wg-leather);
  border-radius: 8px;
  padding: 0.75rem 1rem 1rem;
  margin: 0 0 1rem;
}
.wg-coord-block legend {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--wg-wood);
  padding: 0 0.5rem;
  font-size: 1rem;
}

/* ---- Riquadro risultato ------------------------------------------------ */
.wg-travel-result {
  margin-top: 0.5rem;
  padding: 1rem 1.25rem;
  background: var(--surface-2);
  border: 2px solid var(--wg-gold);
  border-radius: 8px;
}
.wg-travel-result__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.25rem 0;
}
.wg-travel-result__row + .wg-travel-result__row { border-top: 1px dashed rgba(123,74,43,.35); }

/* Riga "Velocità truppe" evidenziata */
.wg-speed-row {
  background: rgba(217, 164, 65, .16);
  border: 1px solid rgba(217, 164, 65, .5);
  border-radius: 6px;
  padding: .5rem .75rem !important;
  margin-top: .35rem;
}
.wg-speed-row > span:first-child {
  color: #9c6b13;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.wg-speed-row strong { font-size: 1.6rem; color: var(--wg-blood); }

/* ---- Caption sopra le card di match ------------------------------------ */
.wg-match-caption {
  margin: 1rem 0 .5rem;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-size: .9rem;
  color: var(--wg-green);
}
.wg-match-caption.is-loose { color: var(--wg-blood); }

/* ---- Card truppe identificate ------------------------------------------ */
.tp-match-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.75rem;
}
.tp-match-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: #fffaf0;
  border: 2px solid var(--wg-gold);
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
  box-shadow: var(--shadow);
}
.tp-match-card__body { display: flex; flex-direction: column; gap: 0.15rem; flex: 1 1 auto; min-width: 0; }
.tp-match-card__body strong { font-size: 1.05rem; color: var(--wg-wood); }

.tp-sub { font-size: 0.78rem; color: var(--text-soft); text-transform: uppercase; letter-spacing: .5px; }

.tp-speed-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 54px;
  padding: 0.3rem 0.4rem;
  background: linear-gradient(180deg, var(--wg-wood-light), var(--wg-wood));
  color: var(--wg-gold);
  border-radius: 6px;
  border: 1px solid var(--wg-gold);
  line-height: 1;
}
.tp-speed-badge span { font-size: 1.3rem; font-weight: 700; }
.tp-speed-badge small { font-size: 0.6rem; color: var(--wg-sand-dark); }

/* ---- Icone truppa (immagine gioco o emoji di ripiego) ------------------ */
.tp-icon {
  width: 120px;
  height: 120px;
  flex: 0 0 auto;
  object-fit: contain;
  border: 2px solid var(--wg-leather);
  border-radius: 6px;
  background: var(--surface-2);
  image-rendering: pixelated;
}
.tp-icon--emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 4.2rem;
}