/* Compact symbols leave room for readable values and the unit illustration. */
:is(.game-table .shop-card,.game-table .team-card,.battle-team .card) .card-stats{
  container:card-stat-strip / inline-size;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  column-gap:4px;
  width:100%;
  min-height:40px;
}
:is(.game-table .shop-card,.game-table .team-card,.battle-team .card) .card-stats .stat{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:1px 4px;
  min-width:0;
}
:is(.game-table .shop-card,.game-table .team-card,.battle-team .card) .card-stats .health-stat{
  justify-content:flex-end;
  flex-wrap:wrap-reverse;
}
:is(.game-table .shop-card,.game-table .team-card,.battle-team .card) .card-stats .stat>svg{
  display:block;
  width:24px;
  height:24px;
  flex:0 0 24px;
}
:is(.game-table .shop-card,.game-table .team-card,.battle-team .card) .card-stats .stat-value{
  line-height:1.2;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
:is(.game-table .shop-card,.game-table .team-card,.battle-team .card) .card-stats .ability-icons{
  justify-content:center;
  flex-wrap:wrap;
  gap:2px;
  max-width:36px;
}
/* A slim ability column leaves room for horizontal icon/value pairs. */
@container card-stat-strip (max-width:170px){
  :is(.game-table .shop-card,.game-table .team-card,.battle-team .card) .card-stats .ability-icons{
    flex-direction:column;
    align-items:center;
    max-width:18px;
  }
}
/* Only narrow strips stack by default; longer values wrap whenever necessary. */
@container card-stat-strip (max-width:128px){
  :is(.game-table .shop-card,.game-table .team-card,.battle-team .card) .card-stats .stat{
    flex-direction:column;
    flex-wrap:nowrap;
    align-items:flex-start;
    gap:1px;
  }
  :is(.game-table .shop-card,.game-table .team-card,.battle-team .card) .card-stats .health-stat{
    flex-direction:column-reverse;
    align-items:flex-end;
  }
}