/* Previously Sports — Stats Hub · stats-compare.css v20261015a
   Click-to-compare: popups, pickers, comparison views, takes. Bible tokens.
   v20261014d: .stc-rand matchup shuffler/share bar; bold subjects in takes.
   v20261014e: design elevation — crafted header bar, Share as a circular
   red call to action (James, 2026-10-14), gentle modal rise on render. */
body.stc-lock { overflow: hidden; }
.stc-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(24, 18, 12, 0.55);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 6vh 16px 16px; overflow-y: auto;
  animation: stc-fade 0.18s ease-out;
}
@keyframes stc-fade { from { opacity: 0; } to { opacity: 1; } }
.stc-modal {
  position: relative;
  background: #faf6ee; color: #221a12;
  border-radius: 14px; max-width: 520px; width: 100%;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
  border: 1px solid #e5dcc8;
  animation: stc-rise 0.22s ease-out;
}
@keyframes stc-rise {
  from { opacity: 0.35; transform: translateY(7px) scale(0.996); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.stc-modal.stc-wide { max-width: 760px; }
.stc-x {
  position: absolute; top: 10px; right: 12px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid #e0d5bd; background: #fff; color: #6b5f4b;
  font-size: 20px; line-height: 1; cursor: pointer;
}
.stc-x:hover { background: #f3ecdc; color: #221a12; }
.stc-body { padding: 26px 26px 22px; }
.stc-title { font-family: Fraunces, Georgia, serif; font-weight: 800; font-size: 24px; margin: 0 0 14px; }
.stc-kicker {
  text-transform: uppercase; letter-spacing: 0.14em; font-size: 11px;
  color: #b3541e; margin: 0 0 6px; font-weight: 700;
}
.stc-phead { display: flex; gap: 16px; align-items: center; margin-bottom: 18px; }
.stc-phead h3 { font-family: Fraunces, Georgia, serif; font-size: 28px; margin: 0 0 4px; font-weight: 800; }
.stc-sub { margin: 0; color: #6b5f4b; font-size: 14px; display: flex; align-items: center; gap: 6px; }
.stc-face {
  width: 84px; height: 84px; border-radius: 50%; object-fit: cover; flex: none;
  background: #efe8d6; border: 2px solid #e5dcc8;
}
.stc-face.stc-teamlogo { border-radius: 16px; object-fit: contain; padding: 8px; background: #fff; }
.stc-mini-logo { width: 18px; height: 18px; object-fit: contain; }
.stc-statgrid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 18px;
}
.stc-stat {
  background: #fff; border: 1px solid #ece3cd; border-radius: 10px;
  padding: 12px 4px 10px; text-align: center;
}
.stc-stat-v { display: block; font-weight: 800; font-size: 19px; font-variant-numeric: tabular-nums; }
.stc-stat-l { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: #8a7c64; margin-top: 2px; }
.stc-actions { display: flex; gap: 10px; margin-bottom: 10px; }
.stc-btn {
  flex: 1; padding: 13px; border: none; border-radius: 10px; cursor: pointer;
  background: #221a12; color: #faf6ee; font-weight: 800; font-size: 15px;
  letter-spacing: 0.02em;
}
.stc-btn:hover { background: #b3541e; }
.stc-note { font-size: 12px; color: #8a7c64; margin: 8px 0 0; }
.stc-note a { color: #b3541e; }
.stc-tops { display: grid; gap: 6px; margin-bottom: 14px; }
.stc-top {
  display: flex; gap: 10px; align-items: baseline;
  background: #fff; border: 1px solid #ece3cd; border-radius: 8px; padding: 8px 12px; font-size: 13px;
}
.stc-top-c { text-transform: uppercase; font-size: 10px; letter-spacing: 0.08em; color: #8a7c64; width: 52px; flex: none; }
.stc-top-n { font-weight: 700; flex: 1; }
.stc-top-v { font-variant-numeric: tabular-nums; font-weight: 800; }

/* picker */
.stc-search {
  width: 100%; padding: 12px 14px; border-radius: 10px; font-size: 15px;
  border: 1px solid #d9cdae; background: #fff; margin-bottom: 12px; box-sizing: border-box;
}
.stc-search:focus { outline: 2px solid #b3541e; border-color: #b3541e; }
.stc-list { max-height: 46vh; overflow-y: auto; display: grid; gap: 4px; padding-right: 4px; }
.stc-sec {
  text-transform: uppercase; letter-spacing: 0.12em; font-size: 11px; font-weight: 800;
  color: #b3541e; margin: 10px 2px 4px;
}
.stc-sec:first-child { margin-top: 0; }
.stc-item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: #fff; border: 1px solid #ece3cd; border-radius: 10px;
  padding: 8px 12px; cursor: pointer; text-align: left; font-size: 14px;
}
.stc-item:hover { border-color: #b3541e; background: #fffaf0; }
.stc-item img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; background: #efe8d6; flex: none; }
.stc-item-n { font-weight: 700; }
.stc-item-m { margin-left: auto; color: #8a7c64; font-size: 12px; white-space: nowrap; }

/* compare view */
.stc-versus { display: flex; align-items: center; justify-content: space-around; gap: 8px; margin: 6px 0 16px; }
.stc-dude { text-align: center; flex: 1; min-width: 0; }
.stc-dude .stc-dude-season { margin-top: 8px; max-width: 100%; font-size: 12px; }
.stc-dude img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; background: #efe8d6; border: 2px solid #e5dcc8; }
.stc-dude h4 { font-family: Fraunces, Georgia, serif; margin: 8px 0 2px; font-size: 17px; }
.stc-dude p { margin: 0; font-size: 12px; color: #8a7c64; }
.stc-vs { font-weight: 800; color: #b3541e; font-size: 13px; letter-spacing: 0.1em; }
.stc-table-wrap { overflow-x: auto; margin-bottom: 14px; }
.stc-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.stc-table th, .stc-table td { padding: 9px 10px; border-bottom: 1px solid #ece3cd; }
.stc-table thead th { font-size: 13px; }
.stc-table thead th:first-child { text-align: right; }
.stc-table thead th:last-child { text-align: left; }
.stc-table td:first-child { text-align: right; font-variant-numeric: tabular-nums; }
.stc-table td:last-child { text-align: left; font-variant-numeric: tabular-nums; }
.stc-statname { text-align: center !important; text-transform: uppercase; font-size: 11px; letter-spacing: 0.08em; color: #8a7c64; }
.stc-table td.stc-win { font-weight: 800; color: #b3541e; }
.stc-take {
  background: #fff; border: 1px solid #ece3cd; border-left: 4px solid #b3541e;
  border-radius: 0 10px 10px 0; padding: 14px 16px; margin-top: 4px;
}
.stc-take-k {
  text-transform: uppercase; letter-spacing: 0.14em; font-size: 11px;
  font-weight: 800; color: #b3541e; margin: 0 0 6px;
}
.stc-take p:last-child { margin: 0; font-size: 14px; line-height: 1.55; }
.stc-take strong { font-weight: 800; color: #221a12; }

/* matchup shuffler + share bar (2026-10-14; elevated v20261014e):
   quiet crafted ghost buttons for the shuffles; Share is the hero —
   a circular red call to action (James's ask, not a capsule). */
.stc-rand { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -2px 0 16px; }
.stc-rand-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 38px; padding: 0 14px; border-radius: 8px; cursor: pointer;
  border: 1px solid #ddd2ba; background: #fffdf7; color: #4a3f2f;
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.02em;
  box-shadow: 0 1px 2px rgba(34, 26, 18, 0.05);
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease,
              transform 0.1s ease, box-shadow 0.15s ease;
}
.stc-rand-btn:hover { border-color: #221a12; color: #221a12; background: #fff; }
.stc-rand-btn:active { transform: scale(0.96); }
.stc-rand-btn svg { flex: none; width: 14px; height: 14px; }
.stc-share-btn {
  margin-left: auto; width: 42px; height: 42px; padding: 0;
  border-radius: 50%; border: none; background: #C0391B; color: #fff;
  box-shadow: 0 3px 10px rgba(192, 57, 27, 0.35);
}
.stc-share-btn:hover {
  background: #a93215; border: none; color: #fff;
  transform: translateY(-1px); box-shadow: 0 5px 14px rgba(192, 57, 27, 0.4);
}
.stc-share-btn:active { transform: scale(0.93); }
.stc-share-btn svg { width: 17px; height: 17px; }
@media (max-width: 720px) {
  .stc-rand { gap: 7px; }
  .stc-rand-btn { height: 37px; padding: 0 11px; font-size: 12px; }
  .stc-share-btn { width: 42px; height: 42px; padding: 0; margin-left: auto; }
}

/* team popup enrichment (2026-10-12): record grid, leader rows with
   headshots, recent results — same Bible tokens as the rest of the hub */
.stc-statgrid.stc-g3 { grid-template-columns: repeat(3, 1fr); }
.stc-ctx { margin: -6px 0 10px; }
button.stc-lead {
  width: 100%; font: inherit; color: inherit; text-align: left;
  align-items: center; cursor: pointer;
}
button.stc-lead:hover { border-color: #b3541e; background: #fffaf0; }
.stc-lead-face {
  width: 34px; height: 34px; border-radius: 50%; object-fit: cover;
  background: #efe8d6; flex: none;
}
.stc-lead .stc-top-c { width: auto; min-width: 56px; }
.stc-lead-gp { color: #8a7c64; font-weight: 400; font-size: 11px; }
.stc-res { display: grid; gap: 6px; margin-bottom: 14px; }
.stc-res-row {
  display: flex; gap: 10px; align-items: baseline;
  background: #fff; border: 1px solid #ece3cd; border-radius: 8px;
  padding: 8px 12px; font-size: 13px;
}
.stc-res-w { font-weight: 800; width: 14px; flex: none; color: #1c7a37; }
.stc-res-w.stc-loss { color: #b3541e; }
.stc-res-m { flex: 1; font-weight: 600; }
.stc-res-d { color: #8a7c64; font-size: 12px; white-space: nowrap; }
.stc-res-post { color: #b3541e; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; }

/* clickable rows */
#stTable tr[data-pslug] td.st-pl, #stTeamsTable tr[data-tslug] td.st-pl { cursor: pointer; }
#stTable tr[data-pslug]:hover td, #stTeamsTable tr[data-tslug]:hover td { background: #f6efe0; }

@media (max-width: 720px) {
  .stc-overlay { padding: 3vh 10px 10px; }
  .stc-body { padding: 20px 16px 18px; }
  .stc-statgrid { grid-template-columns: repeat(3, 1fr); }
  .stc-phead h3 { font-size: 22px; }
  .stc-face { width: 64px; height: 64px; }
}

/* stat tiles -> category leaderboards (2026-10-14): live tiles are real
   buttons with an accent rank line + chevron cue; plain tiles (a category
   with no held leaders data) keep the original quiet treatment. Squared
   tags only — no pill shapes. */
button.stc-stat { font: inherit; color: inherit; width: 100%; }
.stc-stat-live { cursor: pointer; transition: border-color 0.12s, background 0.12s, transform 0.05s; }
.stc-stat-live:hover { border-color: #b3541e; background: #fffaf0; }
.stc-stat-live:active { transform: scale(0.97); background: #fdf1e3; }
.stc-stat-live:focus-visible { outline: 2px solid #b3541e; outline-offset: 1px; }
.stc-stat-r {
  display: block; margin-top: 5px; font-size: 10px; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase; color: #b3541e;
}
.stc-stat-arrow { font-size: 12px; }
.stc-back {
  background: none; border: none; padding: 0 0 10px; font: inherit;
  font-size: 13px; font-weight: 700; color: #b3541e; cursor: pointer;
}
.stc-back:hover { text-decoration: underline; }
.stc-board-t { font-family: Fraunces, Georgia, serif; font-size: 24px; font-weight: 800; margin: 0 0 4px; }
.stc-board-sub { margin: 0 0 14px; color: #6b5f4b; font-size: 13.5px; }
.stc-board { display: grid; gap: 5px; margin-bottom: 12px; }
.stc-brow {
  display: flex; align-items: center; gap: 11px; width: 100%;
  background: #fff; border: 1px solid #ece3cd; border-radius: 10px;
  padding: 7px 12px 7px 10px; cursor: pointer; font: inherit; color: inherit;
  text-align: left; transition: border-color 0.12s, background 0.12s;
}
.stc-brow:hover { border-color: #b3541e; background: #fffaf0; }
.stc-brow:active { background: #fdf1e3; }
.stc-brow:focus-visible { outline: 2px solid #b3541e; outline-offset: 1px; }
.stc-brow-r {
  width: 26px; flex: none; text-align: right; font-weight: 800;
  font-variant-numeric: tabular-nums; color: #8a7c64; font-size: 13px;
}
.stc-brow-face, .stc-brow-ini {
  width: 34px; height: 34px; border-radius: 50%; object-fit: cover;
  background: #efe8d6; flex: none;
}
.stc-brow-ini { display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: #6b5f4b; }
.stc-brow-id { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.stc-brow-n { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stc-brow-m { color: #8a7c64; font-size: 11.5px; }
.stc-brow-you {
  flex: none; background: #b3541e; color: #faf6ee; font-size: 9.5px;
  font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 3px 6px; border-radius: 4px;
}
.stc-brow-v { font-weight: 800; font-variant-numeric: tabular-nums; font-size: 15px; }
.stc-brow-me { background: #fdf3e7; border-color: #b3541e; box-shadow: inset 3px 0 0 #b3541e; }
.stc-brow-me .stc-brow-r { color: #b3541e; }
.stc-bdots { text-align: center; color: #8a7c64; letter-spacing: 0.3em; font-size: 12px; padding: 1px 0; }

/* ==========================================================================
   THE MASTHEAD PLATE — Compare box skin, Variant A (James's pick,
   2026-10-14; Canva design record: canva-compare-box-2026-10-14).
   Canva owns the plate furniture; every name, number, logo and verdict
   inside it is rendered live from hub data — nothing is baked.
   Tokens from the design artboards: ground #FAF6EE, frame #C9BCA0 /
   #E0D7C3, hairline #D9D0BE, ink #1B1712, trailer #A08F70, brick
   #C0391B, sand band #F2E9D7. Used by the Compare tab (stats.js) and
   the head-to-head popups (stats-compare.js, .cmp-plate--modal).
   ========================================================================== */
.cmp-plate {
  background: #FAF6EE; color: #1B1712;
  border: 1px solid #C9BCA0; padding: 10px;
  font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.cmp-plate-in { border: 1px solid #E0D7C3; padding: 54px 64px 46px; }
.cmp-mast { text-align: center; }
.cmp-mast-k {
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.34em;
  color: #7A6C55; text-transform: uppercase;
}
.cmp-mast-w {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-size: 52px; line-height: 1.05; letter-spacing: 0.13em; margin-top: 12px;
}
.cmp-mast-w .dot { color: #C0391B; }
.cmp-mast-div { display: flex; align-items: center; gap: 14px; margin: 20px 0 2px; }
.cmp-mast-div i { flex: 1; height: 1px; background: #D9D0BE; }
.cmp-mast-div span {
  width: 8px; height: 8px; background: #C0391B; transform: rotate(45deg); flex: none;
}
.cmp-plate-title {
  text-align: center; font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-size: 30px; line-height: 1.15; margin: 24px 0 0; overflow-wrap: break-word;
}
.cmp-plate-title .vs { font-style: italic; color: #C0391B; }
.cmp-versus {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: start; gap: 24px; margin-top: 30px;
}
.cmp-side { text-align: center; min-width: 0; }
.cmp-medal {
  position: relative; width: 132px; height: 132px; border-radius: 50%;
  border: 2px solid #C9BCA0; margin: 0 auto; overflow: hidden; background: #F2E9D7;
}
.cmp-medal-ini {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: 'Fraunces', Georgia, serif; font-size: 42px; color: #7A6C55;
}
.cmp-medal img {
  position: relative; width: 100%; height: 100%; object-fit: cover; display: block;
}
.cmp-medal.is-logo img { transform: scale(1.16); }
.cmp-name {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-size: 31px; line-height: 1.12; margin-top: 18px; overflow-wrap: break-word;
}
.cmp-sub { font-size: 13px; color: #6E6250; margin-top: 6px; overflow-wrap: break-word; }
.cmp-chip {
  display: inline-block; margin-top: 11px; max-width: 100%;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase;
  color: #7A6C55; border: 1px solid #C9BCA0; border-radius: 999px;
  padding: 6px 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cmp-side .stc-dude-season { margin-top: 10px; max-width: 100%; }
.cmp-vs {
  width: 64px; height: 64px; border-radius: 50%; border: 1.5px solid #C9BCA0;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Fraunces', Georgia, serif; font-style: italic; font-size: 23px;
  margin-top: 34px; flex: none;
}
.cmp-grid { margin-top: 32px; border-bottom: 1px solid #D9D0BE; }
.cmp-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 200px minmax(0, 1fr);
  align-items: center; padding: 17px 4px; border-top: 1px solid #D9D0BE;
}
.cmp-row:first-child { border-top: none; }
.cmp-val {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-size: 38px; line-height: 1.1; color: #1B1712; min-width: 0; overflow-wrap: break-word;
}
.cmp-val.a { text-align: right; }
.cmp-val.b { text-align: left; }
.cmp-val.lead { font-weight: 700; }
.cmp-val.trail { color: #A08F70; }
.cmp-val.txt { font-size: 22px; line-height: 1.25; }
.cmp-dart {
  display: inline-block; width: 9px; height: 9px; background: #C0391B;
  transform: rotate(45deg); vertical-align: middle;
}
.cmp-val.a .cmp-dart { margin-right: 13px; }
.cmp-val.b .cmp-dart { margin-left: 13px; }
.cmp-lab {
  text-align: center; font-size: 12.5px; font-weight: 600; letter-spacing: 0.2em;
  color: #6E6250; text-transform: uppercase; padding: 0 6px; overflow-wrap: break-word;
}
.cmp-sub2 {
  display: block; font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 11.5px; font-weight: 500; letter-spacing: 0.16em; color: #7A6C55;
  margin-top: 4px; text-transform: uppercase;
}
.cmp-band { background: #F2E9D7; margin-top: 36px; padding: 34px 48px; text-align: center; }
.cmp-band[hidden] { display: none; }
.cmp-band-k { font-size: 12.5px; font-weight: 700; letter-spacing: 0.34em; color: #C0391B; text-transform: uppercase; }
.cmp-band-pick {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  font-size: 44px; line-height: 1.08; margin-top: 10px; text-transform: uppercase;
  overflow-wrap: break-word;
}
.cmp-band-pick.long { font-size: 26px; text-transform: none; line-height: 1.25; }
.cmp-band-line {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif; font-style: italic;
  font-size: 19px; line-height: 1.55; color: #4A3F30; max-width: 820px; margin: 10px auto 0;
}
.cmp-foot {
  border-top: 1px solid #D9D0BE; margin-top: 32px; padding-top: 16px; text-align: center;
  font-size: 11px; font-weight: 500; letter-spacing: 0.28em; color: #9A8C72; text-transform: uppercase;
}
/* Head-to-head popup host: same plate, narrower measure. */
.cmp-plate--modal .cmp-plate-in { padding: 34px 30px 30px; }
.cmp-plate--modal .cmp-mast-w { font-size: 38px; }
.cmp-plate--modal .cmp-plate-title { font-size: 24px; margin-top: 18px; }
.cmp-plate--modal .cmp-medal { width: 104px; height: 104px; }
.cmp-plate--modal .cmp-medal-ini { font-size: 34px; }
.cmp-plate--modal .cmp-name { font-size: 24px; margin-top: 13px; }
.cmp-plate--modal .cmp-vs { width: 52px; height: 52px; font-size: 19px; margin-top: 26px; }
.cmp-plate--modal .cmp-row { grid-template-columns: minmax(0, 1fr) 148px minmax(0, 1fr); padding: 13px 2px; }
.cmp-plate--modal .cmp-val { font-size: 29px; }
.cmp-plate--modal .cmp-val.txt { font-size: 19px; }
.cmp-plate--modal .cmp-grid { margin-top: 24px; }
.cmp-plate--modal .cmp-band { margin-top: 26px; padding: 24px 22px; }
.cmp-plate--modal .cmp-band-pick { font-size: 32px; }
.cmp-plate--modal .cmp-band-pick.long { font-size: 22px; }
.cmp-plate--modal .cmp-band-line { font-size: 16.5px; }
.cmp-plate--modal .cmp-foot { margin-top: 24px; }
/* Phone pattern (design artboard: 390px). */
@media (max-width: 640px) {
  .cmp-plate { padding: 5px; }
  .cmp-plate-in { padding: 26px 20px 24px; }
  .cmp-mast-k { font-size: 10px; }
  .cmp-mast-w { font-size: 30px; margin-top: 8px; }
  .cmp-mast-div { margin: 14px 0 0; }
  .cmp-plate-title { font-size: 20px; margin-top: 16px; }
  .cmp-versus { gap: 10px; margin-top: 20px; }
  .cmp-medal { width: 84px; height: 84px; }
  .cmp-medal-ini { font-size: 28px; }
  .cmp-name { font-size: 19px; margin-top: 12px; }
  .cmp-sub { font-size: 11.5px; }
  .cmp-chip { font-size: 8.5px; letter-spacing: 0.13em; padding: 4px 8px; margin-top: 8px;
    white-space: normal; text-align: center; line-height: 1.55; border-radius: 12px; }
  .cmp-vs { width: 46px; height: 46px; font-size: 17px; margin-top: 19px; }
  .cmp-grid { margin-top: 18px; }
  .cmp-row { grid-template-columns: minmax(0, 1fr) 92px minmax(0, 1fr); padding: 12px 2px; }
  .cmp-val { font-size: 24px; }
  .cmp-val.txt { font-size: 16px; }
  .cmp-lab { font-size: 9.5px; letter-spacing: 0.14em; }
  .cmp-sub2 { font-size: 9px; }
  .cmp-band { margin-top: 24px; padding: 22px 16px; }
  .cmp-band-k { font-size: 10px; }
  .cmp-band-pick { font-size: 29px; }
  .cmp-band-pick.long { font-size: 20px; }
  .cmp-band-line { font-size: 15px; }
  .cmp-foot { margin-top: 22px; padding-top: 13px; font-size: 9.5px; }
  .cmp-plate--modal .cmp-plate-in { padding: 22px 14px 20px; }
  .cmp-plate--modal .cmp-mast-w { font-size: 27px; }
  .cmp-plate--modal .cmp-medal { width: 76px; height: 76px; }
  .cmp-plate--modal .cmp-vs { margin-top: 15px; }
}

/* ---------- full-universe overhaul (2026-10-15) ----------
   Frame tokens: the compare plate's frame color is a single variable —
   if the red-frame variant is picked, --stc-frame (and --stc-frame-in)
   flip and nothing else moves. */
:root{
  --stc-frame: #C9BCA0;
  --stc-frame-in: #E0D7C3;
}
.cmp-plate{ border-color: var(--stc-frame); }
.cmp-plate-in{ border-color: var(--stc-frame-in); }

/* Sleek shuffle: the boxed buttons become quiet ghost text with a red
   shuffle glyph and an underline sweep — no pills, no boxes. Share
   keeps its red circular call to action (James's earlier pick). */
.stc-rand{ gap: 20px; }
.stc-rand-btn:not(.stc-share-btn){
  height: auto; padding: 6px 1px; border: none; border-radius: 0;
  background: none; box-shadow: none; position: relative;
  font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: #4a3f2f;
}
.stc-rand-btn:not(.stc-share-btn) svg{ color: #C0391B; }
.stc-rand-btn:not(.stc-share-btn)::after{
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 2px; background: #C0391B; transition: right .18s ease;
}
.stc-rand-btn:not(.stc-share-btn):hover{ background: none; color: #221a12; }
.stc-rand-btn:not(.stc-share-btn):hover::after{ right: 0; }
.stc-rand-btn:not(.stc-share-btn):active{ transform: scale(.97); }
@media (max-width: 720px){
  .stc-rand{ gap: 16px; }
  .stc-rand-btn:not(.stc-share-btn){ height: auto; padding: 6px 1px; font-size: 11.5px; }
}

/* In-place swap: the modal body crossfades; the overlay never dies. */
.stc-body{ transition: opacity .18s ease, transform .18s ease; }
.stc-body.stc-swap-out{ opacity: 0; transform: translateY(5px); }
.stc-body.stc-swap-in{ animation: stc-swapin .24s ease both; }
@keyframes stc-swapin{
  from{ opacity: 0; transform: translateY(5px); }
  to{ opacity: 1; transform: none; }
}
.stc-overlay.stc-fadeout{ opacity: 0; transition: opacity .16s ease; }
@media (prefers-reduced-motion: reduce){
  .stc-body{ transition: none; }
  .stc-body.stc-swap-in{ animation: none; }
  .stc-rand-btn:not(.stc-share-btn)::after{ transition: none; }
}

/* Full-list board expansion + rank context line */
.stc-more{
  display: block; margin: 12px auto 2px; padding: 10px 18px;
  border: 1px solid #ddd2ba; border-radius: 10px; background: #fffdf7;
  color: #221a12; font-size: 13px; font-weight: 700; cursor: pointer;
  transition: border-color .15s ease, transform .1s ease;
}
.stc-more:hover{ border-color: #221a12; }
.stc-more:active{ transform: scale(.98); }
.stc-rankline{ margin: 14px 2px 0; }
.stc-rankline-p{ margin: 0 0 4px; font-size: 13.5px; line-height: 1.5; color: #4a3f2f; }

/* ================= drag-and-drop compare (James, 2026-10-15) ==============
   The two pick cards become drop slots; the pool panel sits under them.
   Tokens are the hub's own --st-* set (mapped to the desert theme), so
   the panel follows the surface's scheme exactly. Brick = #C0391B. */
.st-pick-card { position: relative; }
.st-pick-card.is-slot {
  min-height: 118px;
  border: 1.5px dashed rgba(var(--desert-ink-rgb), .28);
  background: transparent;
  box-shadow: none;
  justify-content: center;
  text-align: center;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.st-slot-empty { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 4px; }
.st-slot-plus {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px solid #C0391B; color: #C0391B;
  font-size: 21px; line-height: 31px; font-weight: 600;
  margin-bottom: 4px;
}
.st-slot-t { font-weight: 700; font-size: 15px; color: var(--st-text); }
.st-slot-s { font-size: 12px; color: var(--st-muted); }
.st-pick-card.is-filled { cursor: grab; }
.st-pick-card.is-filled:active { cursor: grabbing; }
.st-pick-card.is-filled select { cursor: pointer; }
.st-picker.is-drop .st-pick-card {
  border-color: #C0391B;
  background: var(--st-accent-soft);
  box-shadow: 0 0 0 3px rgba(192, 57, 27, .25);
}
.st-slot-clear {
  position: absolute; top: 6px; right: 6px; z-index: 2;
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--st-line); background: var(--st-card);
  color: var(--st-muted); font-size: 16px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.st-slot-clear:hover { color: #C0391B; border-color: #C0391B; }

.cmp-pool { max-width: 980px; margin: 0 auto 30px; }
.cmp-pool-head { margin-bottom: 12px; }
.cmp-pool-title {
  font-family: var(--st-serif); font-weight: 800; font-size: 24px;
  color: var(--st-text); margin: 0 0 10px;
}
.cmp-pool-title span {
  font-family: var(--st-sans); font-weight: 500; font-size: 13px;
  color: var(--st-muted); margin-left: 8px;
}
.cmp-pool-tools { display: flex; gap: 10px; align-items: stretch; }
.cmp-pool-search {
  flex: 1 1 auto; display: flex; align-items: center; gap: 8px;
  background: var(--st-card); border: 1px solid var(--st-line);
  border-radius: 12px; padding: 0 14px;
}
.cmp-pool-search .st-search-ic { color: var(--st-faint); font-size: 17px; }
.cmp-pool-search input {
  flex: 1 1 auto; min-width: 0; border: none; background: transparent;
  padding: 12px 0; font-size: 15px; color: var(--st-text);
  font-family: var(--st-sans); outline: none;
}
.cmp-pool-cat { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.cmp-pool-cat > span {
  font-size: 11px; font-weight: 700; letter-spacing: 1.6px;
  text-transform: uppercase; color: var(--st-muted);
}
.cmp-pool-cat .st-select { width: auto; min-width: 150px; }
.cmp-pool-hint { margin: 9px 2px 0; font-size: 13px; color: var(--st-muted); min-height: 17px; }

.cmp-pool-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  gap: 9px; overflow-y: auto; max-height: 480px; min-height: 300px;
  padding: 12px; border: 1px solid var(--st-line); border-radius: 16px;
  background: rgba(var(--desert-ink-rgb), .025);
  overscroll-behavior: contain; align-content: start;
}
.cmp-pool-sec {
  grid-column: 1 / -1;
  font-size: 11px; font-weight: 700; letter-spacing: 1.8px;
  text-transform: uppercase; color: var(--st-accent-deep);
  padding: 8px 2px 1px;
}
.cmp-pool-sec:first-child { padding-top: 0; }
.cmp-pool-none { grid-column: 1 / -1; color: var(--st-muted); font-size: 14px; padding: 18px 4px; margin: 0; }

.cmp-pcard {
  display: flex; align-items: center; gap: 11px; min-width: 0;
  background: var(--st-card); border: 1px solid var(--st-line);
  border-radius: 12px; padding: 9px 12px 9px 8px;
  cursor: pointer; user-select: none; -webkit-user-select: none;
  touch-action: pan-y; text-align: left;
  transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.cmp-pcard:hover { border-color: var(--st-accent); box-shadow: 0 4px 14px -8px rgba(var(--desert-ink-rgb), .35); }
.cmp-pcard:focus-visible { outline: 2px solid #C0391B; outline-offset: 2px; }
.cmp-pcard.is-armed { border-color: #C0391B; box-shadow: 0 0 0 3px rgba(192, 57, 27, .28); }
.cmp-pcard-grip {
  flex: 0 0 auto; color: var(--st-faint); font-size: 15px; line-height: 1;
  cursor: grab; touch-action: none; padding: 8px 2px;
}
.cmp-pcard-face {
  position: relative; flex: 0 0 auto; width: 46px; height: 46px;
  border-radius: 50%; background: var(--st-pressed);
  border: 1px solid var(--st-line-soft); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.cmp-pcard-face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cmp-pcard-ini { font-weight: 800; font-size: 15px; color: var(--st-muted); }
.cmp-pcard-id { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.cmp-pcard-name {
  font-weight: 700; font-size: 14.5px; color: var(--st-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cmp-pcard-badge {
  font-size: 9.5px; font-weight: 800; letter-spacing: .08em;
  background: #C0391B; color: #FAF6EE; border-radius: 4px;
  padding: 2px 5px; vertical-align: 2px; white-space: nowrap;
}
.cmp-pcard-meta {
  font-size: 12px; color: var(--st-muted); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cmp-pcard-stat { flex: 0 0 auto; text-align: right; }
.cmp-pcard-stat b {
  display: block; font-size: 17px; font-weight: 800;
  font-variant-numeric: tabular-nums; color: var(--st-text); line-height: 1.1;
}
.cmp-pcard-stat span { display: block; font-size: 10px; letter-spacing: .07em; color: var(--st-faint); text-transform: uppercase; margin-top: 1px; }

.cmp-pool-more {
  display: block; margin: 14px auto 0; background: none; border: none;
  color: var(--st-accent-deep); font-family: var(--st-sans);
  font-size: 12.5px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; cursor: pointer; padding: 8px 6px;
  border-bottom: 2px solid transparent;
}
.cmp-pool-more:hover { border-bottom-color: #C0391B; color: #C0391B; }
.cmp-pool-more[hidden] { display: none; }

.cmp-drag-src { opacity: .35; }
.cmp-drag-clone {
  position: fixed; z-index: 9500; pointer-events: none; margin: 0;
  box-shadow: 0 18px 44px -12px rgba(var(--desert-ink-rgb), .45);
  transform: rotate(-1.2deg) scale(1.02); opacity: .97;
}
div.cmp-drag-clone { position: fixed; }

@keyframes cmp-reveal-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
#cmpPlayersOut.cmp-reveal .cmp-plate,
#cmpPlayersOut.cmp-reveal #stPlayerBreakdownOut {
  animation: cmp-reveal-in .45s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  #cmpPlayersOut.cmp-reveal .cmp-plate,
  #cmpPlayersOut.cmp-reveal #stPlayerBreakdownOut { animation: none; }
  .cmp-pcard, .st-pick-card.is-slot { transition: none; }
}

@media (max-width: 720px) {
  .cmp-pool-tools { flex-wrap: wrap; }
  .cmp-pool-search { flex: 1 1 100%; }
  .cmp-pool-cat { flex: 1 1 auto; }
  .cmp-pool-cat .st-select { flex: 1 1 auto; }
  .cmp-pool-grid {
    grid-template-columns: 1fr 1fr;
    max-height: 58vh; min-height: 46vh;
    padding: 9px; gap: 8px;
  }
  .cmp-pcard {
    display: grid; column-gap: 7px; row-gap: 1px; align-items: center;
    grid-template-columns: auto auto 1fr;
    grid-template-areas: "grip face id" "grip face stat";
    padding: 8px 8px 8px 4px;
  }
  .cmp-pcard-grip { grid-area: grip; padding: 8px 0; font-size: 12px; }
  .cmp-pcard-face { grid-area: face; width: 36px; height: 36px; }
  .cmp-pcard-id { grid-area: id; }
  .cmp-pcard-stat { grid-area: stat; text-align: left; display: flex; gap: 6px; align-items: baseline; }
  .cmp-pcard-name { font-size: 13px; white-space: normal; line-height: 1.25; overflow: visible; }
  .cmp-pcard-meta { white-space: normal; line-height: 1.25; }
  .cmp-pcard-stat b { display: inline; font-size: 14px; }
  .cmp-pcard-stat span { display: inline; margin-top: 0; }
  .st-pick-card.is-slot { min-height: 104px; }
}

/* ================= compare layout v2 (James, 2026-10-15) ===============
   A and B shrink to a compact slots bar — side by side, sticky, always
   in reach while the pool scrolls — and the pool becomes the body of
   the view. UI copy is labels only. Tokens stay the hub's --st-* set;
   brick = #C0391B. Teams mode keeps the original picker layout. */

/* --- the slots bar (players mode only) --- */
#cmpPlayers .st-cmp-pickers {
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: start;
  position: sticky;
  top: 115px; /* measured height of the hub's own sticky sport/view bar */
  z-index: 55;
  isolation: isolate;
  padding: 10px 2px 11px;
  margin: 0 auto 16px;
}
/* Stuck-bar backing (overlap fix — James photo 2026-10-15): the bar is
   980px wide but the pool below it is 1132px, and the old background was
   translucent glass, so the pool's own header (title, search, category)
   slid under the bar half-covered while its flanks stayed visible at
   the same height as the A/B controls. A solid full-width backing makes
   the pool header pass cleanly behind the bar. At rest the band is the
   page-ground colour, so the resting layout is unchanged. */
#cmpPlayers .st-cmp-pickers::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: var(--st-bg);
  border-bottom: 1px solid var(--st-line);
  z-index: -1;
}
#cmpPlayers .st-picker { min-width: 0; }
#cmpPlayers .st-picker label {
  font-size: 10px; letter-spacing: 1.4px; margin-bottom: 5px;
}
#cmpPlayers .st-picker input {
  padding: 9px 11px; font-size: 14px; border-radius: 10px;
}
#cmpPlayers .st-swap {
  width: 34px; height: 34px; font-size: 15px;
  margin-top: 66px; transform: none;
}
#cmpPlayers .st-swap:hover { transform: none; }

/* mini-slots: empty and filled pick cards at bar size */
#cmpPlayers .st-pick-card {
  margin-top: 8px; padding: 7px 9px; min-height: 50px; border-radius: 12px;
}
#cmpPlayers .st-pick-card.is-filled { padding-right: 30px; }
#cmpPlayers .st-pick-id { gap: 9px; min-width: 0; flex: 1 1 auto; }
#cmpPlayers .st-pick-id > div { min-width: 0; }
#cmpPlayers .st-pick-id img { width: 34px; height: 34px; }
#cmpPlayers .st-pick-name {
  font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#cmpPlayers .st-pick-meta {
  font-size: 11px; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#cmpPlayers .st-season-pick {
  margin-top: 4px; padding: 3px 7px; font-size: 12px; border-radius: 9px;
}
#cmpPlayers .st-slot-clear { width: 22px; height: 22px; font-size: 14px; top: 4px; right: 4px; }
#cmpPlayersOut { scroll-margin-top: 262px; }

/* empty mini-slot: plus + one short line, nothing else */
.st-pick-card.is-slot { min-height: 50px; }
.st-slot-empty {
  flex-direction: row; align-items: center; justify-content: center;
  gap: 8px; padding: 2px 0; text-align: left;
}
.st-slot-plus {
  flex: 0 0 auto; width: 24px; height: 24px; font-size: 15px;
  line-height: 21px; margin-bottom: 0;
}
.st-slot-t { font-size: 13px; line-height: 1.15; }

/* --- the pool is the body now --- */
.cmp-pool { margin: 0 auto 22px; }
.cmp-pool-head { margin-bottom: 10px; }
.cmp-pool-title { font-size: 21px; margin: 0 0 9px; }
.cmp-pool-hint { display: none; }
.cmp-pool-grid { max-height: 600px; min-height: 320px; }

/* --- the grip is a real handle: full-height rail, never scrolls --- */
.cmp-pcard-grip {
  align-self: stretch; flex: 0 0 30px;
  display: flex; align-items: center; justify-content: center;
  margin: -9px 0 -9px -8px; padding: 0;
  border-right: 1px solid var(--st-line-soft);
  border-radius: 11px 0 0 11px;
  background: rgba(var(--desert-ink-rgb), .03);
  font-size: 16px; color: var(--st-muted);
  cursor: grab; touch-action: none;
}
.cmp-pcard:active .cmp-pcard-grip { cursor: grabbing; }

@media (max-width: 720px) {
  #cmpPlayers .st-cmp-pickers { top: 115px; }
  .cmp-pool-grid { max-height: calc(100dvh - 268px); min-height: 330px; }
  .cmp-pool-title { font-size: 19px; }
  .cmp-pcard {
    grid-template-columns: 30px auto 1fr;
    padding: 7px 8px 7px 3px; column-gap: 6px;
  }
  .cmp-pcard-grip { margin: -7px 0 -7px -3px; font-size: 13px; }
  .cmp-pcard-face { width: 32px; height: 32px; }
  .cmp-pcard-name { font-size: 12.5px; }
  .cmp-pcard-meta { font-size: 11px; }
  .cmp-pcard-stat b { font-size: 13px; }
}

/* --- layout v2.1: a filled slot is a drag surface, not a scroll start.
   The bar is slim and sticky; giving up scroll-from-the-card is the
   price of a swap drag that works on a real phone. --- */
#cmpPlayers .st-pick-card.is-filled { touch-action: none; }
/* ================= compare layout v3 (James, 2026-10-15) ==============
   The pool goes dense — compact roster rows, small photos, way more
   players per screen — and a completed comparison opens as a pop-up
   over the pool instead of rendering below it. Tokens stay the hub's
   --st-* set; brick = #C0391B; plate/modal grounds stay pinned light. */

/* --- dense pool: desktop / base --- */
.cmp-pool { max-width: 1140px; }
.cmp-pool-grid {
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  gap: 7px; padding: 10px; max-height: 640px;
}
.cmp-pcard { gap: 8px; padding: 6px 9px 6px 6px; border-radius: 10px; }
.cmp-pcard-grip { margin: -6px 0 -6px -6px; flex-basis: 26px; font-size: 14px; }
.cmp-pcard-face { width: 42px; height: 42px; }
.cmp-pcard-ini { font-size: 14px; }
.cmp-pcard-name { font-size: 13.5px; }
.cmp-pcard-meta { font-size: 11.5px; margin-top: 1px; }
.cmp-pcard-stat { line-height: 1.1; }
.cmp-pcard-stat b { font-size: 15.5px; line-height: 1.1; }
.cmp-pcard-stat span { font-size: 9.5px; }

/* --- the results pop-up --- */
.cmp-out-anchor { display: none; }
#cmpPlayersOut.cmp-parked, #cmpTeamsOut.cmp-parked { display: none; }
html.cmp-modal-lock { overflow: hidden; }
.cmp-modal-ov {
  position: fixed; inset: 0; z-index: 9200;
  background: rgba(24, 18, 12, .55);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 5vh 14px 14px; overflow-y: auto;
  animation: stc-fade .18s ease-out;
}
.cmp-modal-ov[hidden] { display: none; }
.cmp-modal {
  position: relative; width: 100%; max-width: 780px;
  background: #FAF6EE; color: #1B1712;
  border: 1px solid #C9BCA0; border-radius: 14px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .35);
  animation: stc-rise .22s ease-out;
}
.cmp-modal-body {
  padding: 18px; max-height: calc(100dvh - 10vh - 32px);
  overflow-y: auto; overscroll-behavior: contain;
}
.cmp-modal-x {
  position: absolute; top: 10px; right: 12px; z-index: 3;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid #E0D5BD; background: #fff; color: #6B5F4B;
  font-size: 21px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.cmp-modal-x:hover { color: #C0391B; border-color: #C0391B; }
.cmp-modal-body .cmp-plate { margin-top: 0; }
.cmp-modal-body #cmpPlayersOut, .cmp-modal-body #cmpTeamsOut { scroll-margin-top: 0; }

/* --- the Compare reopen button in the picker bars --- */
.cmp-openbtn {
  grid-column: 1 / -1; justify-self: center; margin-top: 2px;
  background: #C0391B; border: 1px solid #C0391B; color: #FAF6EE;
  font-family: var(--st-sans); font-size: 12.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 8px 24px; border-radius: 10px; cursor: pointer;
}
.cmp-openbtn:hover { background: #A93218; border-color: #A93218; }
.cmp-openbtn[hidden] { display: none; }

@media (max-width: 720px) {
  /* dense pool: two compact columns, single-line names */
  .cmp-pool-head { margin-bottom: 8px; }
  .cmp-pool-title { font-size: 19px; margin: 0 0 7px; }
  .cmp-pool-search input { padding: 9px 0; }
  .cmp-pool-tools { flex-wrap: nowrap; }
  .cmp-pool-search { flex: 1 1 auto; min-width: 0; }
  .cmp-pool-cat { flex: 0 0 auto; }
  .cmp-pool-cat select { max-width: 122px; }
  .cmp-pool-grid {
    grid-template-columns: 1fr 1fr;
    gap: 6px; padding: 8px;
    max-height: calc(100dvh - 250px); min-height: 140px;
  }
  .cmp-pcard {
    grid-template-columns: 24px auto 1fr;
    padding: 4px 7px 4px 3px; column-gap: 6px; row-gap: 0;
    border-radius: 9px;
  }
  .cmp-pcard-grip { margin: -4px 0 -4px -3px; flex-basis: 24px; font-size: 11px; }
  .cmp-pcard-face { width: 32px; height: 32px; }
  .cmp-pcard-ini { font-size: 12px; }
  .cmp-pcard-name {
    font-size: 12.5px; line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .cmp-pcard-badge { font-size: 8.5px; padding: 1px 4px; }
  .cmp-pcard-meta {
    font-size: 10.5px; line-height: 1.2; margin-top: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .cmp-pcard-stat { display: flex; gap: 5px; align-items: baseline; line-height: 1; }
  .cmp-pcard-stat b { font-size: 13.5px; line-height: 1.1; }
  .cmp-pcard-stat span {
    font-size: 9px; line-height: 1.1; margin-top: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
  }
  /* pop-up on a phone: near full-bleed sheet */
  .cmp-modal-ov { padding: 10px 8px; }
  .cmp-modal { border-radius: 12px; }
  .cmp-modal-body { padding: 12px; max-height: calc(100dvh - 44px); }
}

@media (prefers-reduced-motion: reduce) {
  .cmp-modal-ov, .cmp-modal { animation: none; }
}