/* The tournament screen, the breather and the end of a game (stage 2, plan B,
   task 6). Linked from index.html; only this screen's own rules go here.
   Ported from v1's .round/.trophy/.tabbtn (game/index.html 1165-1176) and
   its #breather / #reteach cards (923-935, 4314-4353). */

/* ---- the tournament screen ---- */
.tourney { --good: #6FCF7A; --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  max-width: 640px; margin: 0 auto; }
.tourney h1 { font-family: var(--display); font-weight: 400; font-size: 28px; margin: .6rem 0 .2rem; text-align: center; }
.tourney-sub { margin: 0 0 1rem; text-align: center; font: 700 13px/1.2 var(--mono); letter-spacing: .14em; color: var(--gold); }
.tourney-pick { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 .8rem; }
.tourney-pick .lbl { flex-basis: 100%; margin: 0; font-family: var(--display); font-size: 10px; letter-spacing: .2em; color: var(--muted); }
.tourney-pick .tabbtn { flex: 1 1 10rem; padding: .55rem .8rem; font-size: .95rem; background: #1b1e19; color: var(--chalk);
  border: 2px solid var(--line); overflow-wrap: anywhere; }
.tourney-pick .tabbtn[aria-selected="true"] { border-color: var(--gold); color: var(--gold); }
.tourney-note { margin: 0 0 .6rem; color: var(--muted); font-size: .95rem; }
.tourney-gate { margin: 0 0 .8rem; padding: .6rem .8rem; border-radius: 10px; border: 2px solid var(--warn); color: var(--warn); }
.tourney-rounds { display: grid; gap: 10px; }
.tourney .round { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 14px;
  border-radius: 14px; border: 2px solid transparent; background: rgba(255, 255, 255, .07); color: var(--chalk); font-weight: 400; }
.tourney .round .grow { flex: 1; min-width: 0; }
.tourney .round h3 { margin: 0 0 4px; font-size: 19px; line-height: 1.15; }
.tourney .round .meta { font-size: 13px; line-height: 1.35; color: var(--muted); overflow-wrap: anywhere; }
.tourney .round.open { border-color: var(--gold); }
.tourney .round:disabled { opacity: .45; }
.tourney .trophy { flex: none; padding: 5px 9px; border-radius: 8px; font: 800 12px/1 var(--mono); letter-spacing: .08em;
  border: 2px solid var(--line); color: var(--muted); }
.tourney .trophy.open { border-color: var(--gold); color: var(--gold); }
.tourney .trophy.won { border-color: var(--good); color: var(--good); }
.tourney-msg { color: var(--warn); }
.tourney-foot { margin-top: 1.25rem; }

/* ---- the breather and the reteach card, in the at-bat ---- */
.atbat-breather { margin-top: 1rem; background: #1b1e19; border: 2px solid var(--blue); border-radius: 10px;
  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: 11px; letter-spacing: .14em; color: var(--blue); 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 { font-size: 1.1rem; line-height: 1.5; }
.atbat-breather .atbat-row { margin-top: .4rem; }

/* ---- 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: 12px; 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; }