/* The at-bat's breather and reteach cards, and the end of a game's "New cards
   earned" (stage 2, plan B, task 6). They shared a stylesheet with a screen
   that has left the page; these did not leave. Linked from index.html where
   that stylesheet was, so the cascade is what it was. Ported from v1's
   #breather / #reteach cards (game/index.html 923-935, 4314-4353). */

/* ---- the breather and the reteach card, in the at-bat ---- */
.atbat-breather { margin-top: 1rem; background: var(--color-surface-3); border: 2px solid var(--color-blue); border-radius: var(--radius-lg);
  padding: 16px; display: grid; gap: .6rem; }
.atbat-breather[hidden] { display: none; }
.atbat-breather p { margin: 0; }
.atbat-breather .eyebrow { font-family: var(--display); font-size: var(--fs-label); letter-spacing: var(--tracking-label); color: var(--color-blue-text); text-transform: uppercase; }
.atbat-breather[data-card="reteach"] { border-color: var(--gold); }
.atbat-breather[data-card="reteach"] .eyebrow { color: var(--gold); }
.atbat-breather .reteach-text, .coach-read .reteach-text { font-size: var(--fs-body-lg); line-height: var(--lh-body); }
.coach-read { margin-top: 1rem; border-top: 1px solid var(--color-line, #3a3f34); padding-top: .8rem; }
.atbat-breather .atbat-row { margin-top: var(--space-2); gap: var(--space-3); }
.atbat-breather > p:not(.eyebrow) { font-size: var(--fs-body-lg); }

/* ---- the end of a game: New cards earned ---- */
.final-news { margin: 0 auto 1.25rem; max-width: 640px; }
.final-news[hidden] { display: none; }
.final-news .eyebrow { margin: 0 0 .6rem; font-family: var(--display); font-size: var(--fs-label); letter-spacing: .14em; color: var(--gold); text-transform: uppercase; }
.final-news .news-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; max-width: none; }
.final-news .news-cards > * { flex: 0 0 min(170px, 44vw); }
.final-news .newcard-note { margin: .6rem 0 0; color: var(--muted); font-size: .9rem; }
.atbat-breather .btn { font-size: var(--fs-body); padding-inline: var(--space-5); white-space: nowrap; min-height: 52px; }