/* npc screens (trainer battles, gym leader). Base styles live in ../style.css */

/* A team shown as a row of small sprite chips */
.npc-team { gap: 6px; margin-top: 6px; }
.mon-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--bg); border-radius: 999px; padding: 3px 10px 3px 3px;
  font-weight: 600; font-size: 14px; white-space: nowrap;
}
.mon-chip .sprite.sm { width: 32px; height: 32px; }
.tile .mon-chip { background: #fff; border: 1px solid var(--border); }
.tile.selected .mon-chip { border-color: transparent; }

.gym-head h2 { font-size: 18px; }
.gym-head .type { vertical-align: middle; }

/* 1v1 / 2v2 / 3v3 */
.vs-label { font-size: 22px; font-weight: 800; color: var(--accent); letter-spacing: 1px; }

/* Difficulty buttons */
.diff-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.diff-grid .tile { text-align: center; padding: 16px 10px; }
.diff-grid .lvl { font-size: 24px; font-weight: 800; margin: 4px 0; }
.diff-grid .done { color: var(--ok); font-weight: 700; font-size: 13px; margin-top: 6px; }

/* Gym member list with a Give badge button per row */
.member-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--border); }
.member-row:first-child { border-top: none; }
.member-row .info { flex: 1; min-width: 0; }
.member-row button { white-space: nowrap; }

/* Big stacked choices ("What next?", One at a time / Group battle) */
.after { display: grid; gap: 10px; margin-top: 10px; }
.after .btn { text-align: center; }