/**
 * The fantasy-baskets pages (/play). Layout only — every colour, border and
 * font comes from tokens.css, and every object (panel, btn, tag, kicker,
 * table) is the shared one from components.css.
 */

/* The container convention from pages.css (.creator-page): the page's own
   padding on the shared gutter and a max-width, left-aligned — no auto
   margin, and no second container class whose padding would depend on
   stylesheet order. */
.play-page { padding: 48px var(--gutter) 64px; max-width: 980px; }
.play-page h1 { font-size: 44px; line-height: 1.02; letter-spacing: -0.015em; margin: 0 0 10px; }
.play-page h2 { font-size: 22px; line-height: 1.1; margin: 0 0 12px; }
.play-page .page-head p { max-width: 640px; }
.play-cta { margin-top: 18px; }

/* hub ------------------------------------------------------------------ */
.play-leagues { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 24px; }
.play-league-card { padding: 22px; }
.play-league-rule { font-size: 20px; margin: 4px 0 6px; }
.play-league-period, .play-league-squad { margin: 0 0 6px; font-size: 12px; }
.play-league-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }

.play-signin, .play-account { padding: 22px; }
.play-signin-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.play-signin-note { margin: 12px 0 0; color: var(--color-accent-700); }
.play-handle-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.play-handle-label { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-body-2); }
.play-handle-input { border: var(--border); background: transparent; color: var(--color-text); padding: 7px 10px; min-width: 200px; }
.play-handle-hint, .play-handle-status { font-size: 12px; margin: 8px 0 0; }
.play-identities { list-style: none; padding: 0; margin: 16px 0 0; border-top: var(--border); }
.play-identities li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: var(--border); }
.play-identity-kind { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
.play-streaks { list-style: none; padding: 0; margin: 16px 0 0; display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; }
.play-signout { margin: 16px 0 0; }
.play-own-link { margin-top: 18px; font-size: 13px; }

/* draft ---------------------------------------------------------------- */
.play-cap {
  position: sticky; top: 0; z-index: 3;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  border: var(--border); background: var(--color-bg);
  padding: 12px 14px; margin-bottom: 8px;
}
.play-cap-over { color: var(--color-negative); }
.play-lock-line { margin: 0 0 22px; font-size: 12px; }
.play-draft-status { margin: 0 0 18px; }
.play-tier { margin-bottom: 22px; }
.play-assets { list-style: none; padding: 0; margin: 8px 0 0; }
.play-asset { border-bottom: var(--border); padding: 8px 0; }
.play-asset-row { display: flex; align-items: center; gap: 12px; }
.play-asset-tier, .play-asset-score { font-size: 12px; color: var(--color-body-2); }
.play-asset-score { margin-left: auto; }
.play-asset-more > summary { cursor: pointer; font-size: 11px; padding: 4px 0; }
.play-asset-more p { margin: 2px 0; font-size: 12px; }
.play-undraftable { padding: 18px 20px; }
.play-undraftable-list { list-style: none; padding: 0; margin: 8px 0 0; font-size: 12px; }
.play-undraftable-list li { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: var(--border); }

/* league, player ------------------------------------------------------- */
.play-standings { padding: 18px 20px; margin-bottom: 20px; }
.play-standings-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.play-provisional, .play-void-banner { margin: 0 0 10px; font-size: 12px; }
.play-void-banner { border: var(--border); padding: 9px 11px; color: var(--color-body-1); }
.play-table tbody tr.is-void td { color: var(--color-muted); }
.play-grid { letter-spacing: 0.06em; }
.play-foot { margin-top: 18px; display: flex; align-items: center; gap: 8px; font-size: 12px; }
.play-results { padding: 18px 20px; margin: 20px 0; }
.play-share-cell { text-align: right; white-space: nowrap; }
.play-squads { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.play-squad { padding: 18px 20px; }
.play-squad-picks { list-style: none; padding: 0; margin: 8px 0 0; font-size: 12px; }
.play-squad-picks li { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: var(--border); }

/* the draft page's "Your squad" row: a pick the cap cannot count is marked,
   said why, and carries its own way off the board. */
.play-squad-warn { margin: 8px 0 0; font-size: 12px; color: var(--color-negative); }
.play-squad-list { list-style: none; padding: 0; margin: 8px 0 0; font-size: 12px; }
.play-squad-pick { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 0; border-bottom: var(--border); }
.play-squad-pick.is-blocked { color: var(--color-negative); }
.play-squad-note { font-size: 11px; }
.play-unpick { margin-left: auto; }

/* batch it (a player's own locked squad, spec §9) ----------------------- */
.play-batch-it { padding: 18px 20px; margin: 20px 0; }
.play-batch-it-line { margin: 8px 0 0; font-size: 15px; max-width: 640px; }
.play-batch-it-picks { margin: 6px 0 0; font-size: 12px; letter-spacing: 0.04em; }
.play-batch-it-gone { margin: 8px 0 0; font-size: 12px; }
.play-batch-it-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.play-batch-it-note { margin: 8px 0 0; font-size: 12px; }
.play-batch-it-status { margin: 6px 0 0; font-size: 12px; min-height: 1em; }

/* rules ---------------------------------------------------------------- */
.play-rule-block { padding: 20px; margin-bottom: 16px; }
.play-formula { font-size: 15px; margin: 6px 0; }
.play-rule-list { list-style: none; padding: 0; margin: 8px 0 0; font-size: 13px; }
.play-rule-list li { padding: 5px 0; border-bottom: var(--border); }
.play-flag { color: var(--color-accent-700); }

.play-closed { padding: 40px; }

/* duels ---------------------------------------------------------------- */
/* The duel page's own section wrapper: narrower than a league page, because
   the whole page is two handles and one verdict. */
.play-duel { max-width: 720px; }
.play-duels { padding: 18px 20px; margin: 20px 0; }
.play-duel-record { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 8px 0 0; font-size: 14px; }
.play-duel-badge { color: var(--color-accent-700); }
.play-duel-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
.play-duel-note { margin: 8px 0 0; font-size: 12px; min-height: 1em; }
/* The fallback when the clipboard refused: the link, to select by hand. */
.play-duel-link { display: block; width: 100%; margin: 8px 0 0; border: var(--border); background: transparent; color: var(--color-text); padding: 7px 10px; font-size: 12px; }
.play-duel-link[hidden] { display: none; }
.play-duel-list { list-style: none; padding: 0; margin: 14px 0 0; font-size: 12px; }
.play-duel-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: var(--border); }
.play-duel-outcome { text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-body-2); }
.play-duel-state, .play-duel-result { padding: 18px 20px; margin-bottom: 16px; }
.play-duel-line { margin: 8px 0 0; font-size: 16px; }
.play-duel-sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 10px 0 0; }
.play-duel-side { display: flex; flex-direction: column; gap: 4px; border: var(--border); padding: 12px 14px; }
.play-duel-handle { font-size: 14px; }
.play-duel-return { font-size: 24px; }
.play-duel-verdict { margin: 14px 0 0; font-size: 18px; }
.play-duel-card { display: block; width: 100%; height: auto; margin-top: 14px; border: var(--border); }
.play-duel-foot { margin-top: 18px; font-size: 12px; }

@media (max-width: 720px) {
  .play-leagues, .play-squads, .play-duel-sides { grid-template-columns: minmax(0, 1fr); }
  .play-page h1 { font-size: 32px; }
  .play-cap { gap: 10px; }
}