/* ==========================================================================
   Prime Time — homepage (index.html). Layout and components for the hero,
   the week's slate, the table, power rankings, the wire strip, final scores,
   the Hammer of Glory strip and the record book. Shared tokens, chrome and
   base components (pills, buttons, cards, odds bars, cut line) come from
   assets/prime.css. Everything here is scoped under .ph or uses the ph- prefix.
   Secondary text is held at 14px and above.
   ========================================================================== */

.ph { padding-bottom: 0; }
.ph [hidden] { display: none !important; }
body.pt .ph a.pt-card:hover { color: var(--pt-tx); }
body.pt .ph a.pt-btn-ac, body.pt .ph a.pt-btn-ac:hover { color: var(--pt-ink); }
.ph button.pt-btn { font-family: inherit; background: transparent; color: var(--pt-tx); cursor: pointer; }
.ph button.pt-btn-ghost:hover { border-color: var(--pt-line-2); }

/* ---------- vertical rhythm ----------
   The shared reset in prime.css (body.pt :where(h1,h2,h3,h4,p,...) { margin: 0 },
   specificity 0,1,1) outranks any single-class margin on those tags, so every
   margin the design calls for on a heading or paragraph is set here under .ph
   (0,2,0). If the shared reset is later lowered to specificity 0, these still
   hold. */
.ph .ph-h1 { margin-top: 28px; }
.ph .ph-dek { margin-top: 28px; }
.ph .ph-who-sub { margin-top: 6px; }
.ph .ph-live-list { margin-top: 14px; }
.ph .ph-lg-state { margin: 4px 0 2px; }
.ph .ph-bye { margin-top: 14px; }
.ph .ph-champ-name { margin-top: 10px; }
.ph .ph-champ-sub { margin-top: 8px; }
.ph .ph-g-label { margin-bottom: 8px; }
.ph .ph-g-foot { margin-top: 10px; }
.ph .ph-p-blurb { margin-top: 4px; }
.ph .ph-p-odds { margin-top: 6px; }
.ph .ph-post-foot { margin-top: auto; }
.ph .pt-sec-title { margin-top: 10px; }
.ph .ph-bg-label { margin-bottom: 6px; }
.ph .ph-res-tag { margin-bottom: 2px; }
body.pt .pt-foot-meta { margin-top: 12px; }

/* ---------- shared-layer stopgaps ----------
   Two rules in prime.css reach past what a component asks for: the skip link's
   colour is overridden by body.pt a (so it reads as ghost text on volt), and
   body.pt :focus-visible forces a 6px radius on pills, chips and cards. Both are
   corrected here for this page. */
body.pt a.pt-skip, body.pt a.pt-skip:hover, body.pt a.pt-skip:focus { color: var(--pt-ink); }
body.pt .pt-skip:focus-visible { border-radius: 8px; }
body.pt .pt-btn:focus-visible, body.pt .pt-chip:focus-visible, body.pt .pt-pill:focus-visible, body.pt .pt-menu-btn:focus-visible { border-radius: 999px; }
body.pt .pt-card:focus-visible { border-radius: var(--pt-radius); }
body.pt .pt-brand span { white-space: nowrap; }

/* ---------- loading + empty + error ---------- */
.ph-boot .ph-hero { padding-top: 72px; }
.ph-sk-pill { height: 32px; width: 220px; min-height: 0; border-radius: 999px; }
.ph-sk-h1 { height: 260px; margin-top: 28px; }
.ph-sk-dek { height: 84px; margin-top: 28px; max-width: 440px; }
.ph-sk-card { height: 560px; }
.ph-noscript { margin-top: 72px; display: grid; gap: 16px; }
.ph-noscript-h { font-size: 72px; }
.ph-noscript-links { display: flex; gap: 8px 24px; flex-wrap: wrap; font-weight: 700; }
.ph-noscript-links a { min-height: 44px; display: inline-flex; align-items: center; color: var(--pt-ac); }
.ph-note { padding: 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; }
.ph-note p { color: var(--pt-tx2); max-width: 60ch; }
.ph-note-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.ph-note b { color: var(--pt-tx); }
.ph-note--hero { margin-top: 72px; }
.ph-note--tight { margin-top: 0; }

/* ---------- hero ---------- */
.ph-hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: center; padding-top: 72px; }
.ph-hero > * { min-width: 0; }
/* Two-column hero: the headline sits at the top and stays in view while a tall live scoreboard scrolls past. */
@media (min-width: 1101px) { .ph-hero > :first-child { align-self: start; position: sticky; top: 32px; } }
.ph-pills { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.ph-h1 { font-size: 118px; overflow-wrap: anywhere; }
.ph-h1--m { font-size: 96px; }
.ph-h1--s { font-size: 78px; }
.ph-dek { font-size: 21px; line-height: 1.5; color: var(--pt-tx2); max-width: 36ch; }
.ph-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 36px; }
.ph-card-head { display: flex; justify-content: space-between; align-items: center; gap: 4px 12px; padding: 22px 24px 0; flex-wrap: wrap; }
.ph-card-head .pt-chip { min-height: 44px; padding: 0 16px; }

/* game of the week */
.ph-duo { display: grid; grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr); gap: 14px 12px; align-items: start; padding: 22px 24px 0; }
.ph-duo > * { min-width: 0; }
.ph-duo .ph-vs { align-self: center; }
.ph-portrait { width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: 14px; object-fit: cover; object-position: center 20%; display: block; background: var(--pt-s2); }
.ph-portrait-initial { display: grid; place-items: center; font-family: var(--pt-display); font-stretch: 68%; font-weight: 800; font-size: 72px; color: var(--pt-tx2); }
.ph-vs { font-size: 34px; color: var(--pt-tx3); text-align: center; }
.ph-who { font-size: 46px; overflow-wrap: anywhere; }
.ph-who-sub { font-size: 15px; color: var(--pt-tx3); line-height: 1.4; }
.ph-who-sub .pt-n { color: var(--pt-tx2); white-space: nowrap; }
.ph-sub-team { overflow-wrap: anywhere; }
.ph-stakes { padding: 24px; display: flex; flex-direction: column; gap: 18px; }
.ph-stake-top { display: flex; justify-content: space-between; gap: 4px 12px; font-size: 15px; color: var(--pt-tx2); margin-bottom: 8px; flex-wrap: wrap; }
.ph-stake-top b { color: var(--pt-tx); font-weight: 700; }
.ph-track { position: relative; height: 10px; border-radius: 5px; background: var(--pt-s2); overflow: hidden; }
.ph-fill { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w, 0%); border-radius: 5px; background: var(--pt-ac); }
.ph-fill--loss { background: var(--pt-loss); }
.ph-series { border-top: 1px solid var(--pt-line); padding: 16px 24px 18px; font-size: 15px; color: var(--pt-tx2); }
.ph-series small { display: block; font-size: 14px; color: var(--pt-tx3); margin-top: 2px; }

/* live scoreboard */
.ph-live { overflow: hidden; padding-bottom: 8px; }
.ph-lg { padding: 10px 24px; border-top: 1px solid var(--pt-line); }
.ph-lg-state { font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pt-tx3); }
.ph-lg-state.is-live { color: var(--pt-ac); }
.ph-lg-row { display: flex; align-items: center; gap: 12px; min-height: 52px; }
.ph-lg-name { flex: 1; min-width: 0; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--pt-tx2); }
.ph-lg-pts { font-size: 28px; color: var(--pt-tx2); }
.ph-lg-row.is-lead .ph-lg-name, .ph-lg-row.is-lead .ph-lg-pts { color: var(--pt-ac); }
.ph-lg-row.is-trail .ph-lg-name, .ph-lg-row.is-trail .ph-lg-pts { color: var(--pt-tx3); }
.ph-live-foot { padding: 14px 24px 8px; border-top: 1px solid var(--pt-line); font-size: 14px; color: var(--pt-tx3); }

/* bracket */
.ph-bracket { display: grid; grid-template-columns: repeat(var(--rounds, 3), minmax(0, 1fr)); gap: 24px 16px; align-items: start; }
.ph-bracket--stack { grid-template-columns: minmax(0, 1fr); padding: 20px 24px 24px; gap: 22px; }
.ph-round > .pt-eb { margin-bottom: 10px; }
.ph-games { display: grid; gap: 12px; }
.ph-bg-label, .ph-res-tag { font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pt-tx3); }
.ph-bg-label.is-title, .ph-res-tag.is-title { color: var(--pt-ac); }
.ph-bg { border: 1px solid var(--pt-line); border-radius: 12px; background: var(--pt-s2); overflow: hidden; }
.ph-bs { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; font-weight: 600; }
.ph-bs + .ph-bs { border-top: 1px solid var(--pt-line); }
.ph-bs-seed { width: 18px; color: var(--pt-tx3); font-size: 15px; flex: none; }
.ph-bs-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-bs-pts { font-size: 18px; color: var(--pt-tx2); }
.ph-bs.is-win .ph-bs-name, .ph-bs.is-win .ph-bs-pts { color: var(--pt-ac); }
.ph-bs.is-lose { color: var(--pt-tx3); }
.ph-bs.is-lose .ph-bs-pts { color: var(--pt-tx3); }
.ph-bs.is-open .ph-bs-name { color: var(--pt-tx3); font-weight: 400; }
.ph-bye { font-size: 15px; color: var(--pt-tx2); }
.ph-bye b { color: var(--pt-tx); }
.ph-bracket-card { padding-bottom: 0; }
.ph-bracket-card .ph-bracket--stack { padding-top: 18px; }
.ph .ph-bracket-card .ph-bye { margin: 0; padding: 0 24px 22px; }
.ph-bracket-wrap { padding: 28px; }

/* champion */
.ph-champ { overflow: hidden; }
.ph-champ .ph-portrait { border-radius: 0; aspect-ratio: 4 / 3; object-position: center 18%; }
.ph-champ-body { padding: 22px 24px 26px; }
.ph-champ-name { font-size: 54px; overflow-wrap: anywhere; }
.ph-champ-sub { color: var(--pt-tx2); }
.ph-champ-sub .pt-n { color: var(--pt-tx); }

/* the ten, for the quiet weeks */
.ph-faces { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; padding: 22px 24px 24px; }
.ph-face { display: block; text-align: center; font-size: 15px; font-weight: 700; min-height: 44px; }
.ph-face .ph-portrait { border-radius: 12px; margin-bottom: 8px; }

/* ---------- slate ---------- */
.ph-slate { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 16px; margin-top: 64px; }
.ph .ph-game { padding: 18px 20px 20px; }
.ph-g-label { font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pt-tx3); }
.ph-g-row { display: flex; align-items: center; gap: 12px; min-height: 48px; }
.ph-g-name { font-weight: 700; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-g-rec { font-size: 18px; color: var(--pt-tx2); }
.ph-g-foot { font-size: 14px; color: var(--pt-tx3); line-height: 1.45; }
.ph-g-foot .pt-n { color: var(--pt-tx2); }
.ph-g-foot { text-wrap: balance; }

/* ---------- the table + power rankings ---------- */
.ph-split { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 24px; align-items: start; }
.ph-cols { display: grid; grid-template-columns: 40px minmax(0, 1fr) 72px 84px 56px 172px; gap: 16px; align-items: center; padding: 0 24px; }
.ph-cols > * { min-width: 0; }
.ph-h-short { display: none; }
.ph-rk { font-size: 24px; color: var(--pt-tx3); }
.ph-rec { font-size: 26px; white-space: nowrap; }
.ph-pf { font-size: 17px; color: var(--pt-tx2); }
.ph-streak { font-size: 14px; font-weight: 700; color: var(--pt-tx2); }
.ph-streak.is-w { color: var(--pt-tx); }
.ph-av-32 { width: 32px; height: 32px; font-size: 15px; }
.ph-av-40 { width: 40px; height: 40px; font-size: 18px; }
.ph-av-44 { width: 44px; height: 44px; font-size: 20px; }
.ph-boss-txt { min-width: 0; display: block; }
.ph .pt-boss { min-height: 56px; }
.ph .pt-boss-n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph .pt-boss-t { font-size: 14px; }
.ph-status { font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pt-tx2); }
.ph-status.is-in { color: var(--pt-ac); }
.ph-status.is-champ { color: var(--pt-ink); background: var(--pt-ac); border-radius: 999px; padding: 4px 12px; justify-self: start; }
.ph-power { padding: 8px 0; }
.ph-power-head { padding: 20px 24px 8px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ph .pt-more { white-space: nowrap; }
.ph-power-title { font-size: 32px; }
.ph-prow { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 18px 24px; border-bottom: 1px solid var(--pt-line); }
.ph-prow:last-child { border-bottom: 0; }
.ph-p-rk { font-size: 40px; line-height: .9; }
.ph-p-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ph-p-name { font-weight: 700; font-size: 18px; display: inline-block; padding: 8px 0; margin: -8px 0; }
.ph-p-move { font-size: 14px; }
.ph-p-blurb { font-size: 16px; color: var(--pt-tx2); line-height: 1.45; }
.ph-p-odds { font-size: 14px; color: var(--pt-tx3); }
.ph-p-odds .pt-n { color: var(--pt-tx2); white-space: nowrap; }
.ph-empty { padding: 28px 24px; color: var(--pt-tx2); font-size: 16px; }

/* ---------- the wire ---------- */
.ph-byline { font-size: 15px; color: var(--pt-tx3); display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0 12px; }
.ph-byline b { color: var(--pt-tx2); }
.ph-byline .pt-more { font-size: 15px; white-space: nowrap; }
.ph-wire { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.ph .ph-post { padding: 28px; display: flex; flex-direction: column; gap: 14px; min-height: 300px; }
.ph-post:hover { border-color: var(--pt-line-2); }
.ph-post-tag { font-size: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--pt-ac); }
.ph-post-h { font-size: 40px; overflow-wrap: anywhere; }
.ph-post-h--sm { font-size: 30px; }
.ph-post-dek { font-size: 16px; color: var(--pt-tx2); line-height: 1.5; }
.ph-post-foot { font-size: 14px; color: var(--pt-tx3); display: flex; justify-content: space-between; gap: 12px; }
.ph-post-foot span:last-child { color: var(--pt-tx2); font-weight: 700; }

/* ---------- final scores ---------- */
.ph-results { display: grid; grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)); gap: 16px; }
.ph .ph-res { padding: 18px 20px; }
.ph-res-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; font-weight: 600; }
.ph-res-row > span:first-child { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-res-row .pt-n { font-size: 24px; }
.ph-res-row.is-lose { color: var(--pt-tx3); }
.ph-res-row.is-win { color: var(--pt-ac); }
.ph-res-row.is-tie { color: var(--pt-tx2); }

/* ---------- hammer of glory ---------- */
.ph-hammer { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 10px; }
.ph .ph-yr { padding: 16px 14px 18px; display: flex; flex-direction: column; gap: 12px; min-height: 150px; }
.ph-yr-n { font-size: 30px; color: var(--pt-tx3); line-height: 1; }
.ph-yr-c { font-weight: 700; font-size: 16px; line-height: 1.25; overflow-wrap: anywhere; }
.ph-yr-t { font-size: 14px; color: var(--pt-tx3); line-height: 1.35; overflow-wrap: anywhere; }
.ph .ph-yr--now { border-style: dashed; border-color: var(--pt-ac); }
.ph-yr--now .ph-yr-n { color: var(--pt-ac); }

/* ---------- record book ---------- */
.ph-records { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ph-rec-card { padding: 28px; display: flex; flex-direction: column; gap: 10px; }
.ph-rec-n { font-size: 72px; line-height: .9; white-space: nowrap; display: flex; align-items: flex-end; height: 65px; }
.ph-records--long .ph-rec-n { font-size: 60px; height: 54px; }
.ph-rec-l { font-weight: 700; font-size: 16px; }
.ph-rec-s { font-size: 15px; color: var(--pt-tx3); line-height: 1.45; }
.ph-rec-s b { color: var(--pt-tx2); font-weight: 600; }

/* ---------- responsive ---------- */
@media (max-width: 1279px) {
  .ph-split { grid-template-columns: minmax(0, 1fr); }
  .ph-records { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ph-records--long .ph-rec-n { font-size: 72px; height: 65px; }
}
@media (max-width: 1100px) {
  .ph-hero { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .ph-h1 { font-size: 92px; }
  .ph-h1--m { font-size: 80px; }
  .ph-h1--s { font-size: 68px; }
  .ph-slate { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ph .ph-post { min-height: 0; }
  .ph-results { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ph-hammer { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .ph-bracket { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ph-duo .ph-portrait { aspect-ratio: 16 / 10; }
  .ph-byline { justify-content: flex-start; }
  .ph-wire { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ph-wire > :first-child { grid-column: 1 / -1; }
}
/* Tablet and large phone: rows that do not fill a row take the room that is left,
   so a short last row never leaves a hole. */
@media (min-width: 641px) and (max-width: 1100px) {
  .ph-slate > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .ph-results > * { grid-column: span 2; }
  .ph-results > :last-child:nth-child(3n + 2), .ph-results > :nth-last-child(2):nth-child(3n + 1) { grid-column: span 3; }
  .ph-results > :last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
}
@media (min-width: 641px) and (max-width: 780px) {
  .ph-records--long .ph-rec-n { font-size: 56px; height: 50px; }
}
/* The table keeps its boss column readable: PF and streak drop out below 900. */
@media (max-width: 900px) {
  .ph-cols { grid-template-columns: 40px minmax(0, 1fr) 72px 172px; }
  .ph-pf, .ph-streak, .ph-c-pf, .ph-c-streak { display: none; }
}
@media (max-width: 640px) {
  .ph-boot .ph-hero, .ph-hero { padding-top: 36px; gap: 32px; }
  .ph-note--hero { margin-top: 36px; }
  .ph-sk-h1 { height: 180px; }
  .ph-sk-card { height: 420px; }
  .ph-h1 { font-size: 58px; }
  .ph-h1--m { font-size: 54px; }
  .ph-h1--s { font-size: 46px; }
  .ph-dek { font-size: 18px; }
  .ph-ctas { margin-top: 28px; }
  .ph-slate { grid-template-columns: minmax(0, 1fr); margin-top: 40px; }
  .ph-sub-team { display: block; }
  .ph-sub-sep { display: none; }
  .ph-who { font-size: 32px; }
  .ph-vs { font-size: 24px; }
  .ph-duo { grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1fr); padding: 18px 18px 0; }
  .ph-duo .ph-portrait { aspect-ratio: 1 / 1; }
  .ph-wire { grid-template-columns: minmax(0, 1fr); }
  .ph-card-head { padding: 18px 18px 0; }
  .ph-stakes { padding: 18px; }
  .ph-series { padding: 14px 18px 16px; }
  .ph-lg { padding: 8px 18px; }
  .ph-live-foot { padding: 12px 18px 6px; }
  .ph-lg-pts { font-size: 26px; }
  .ph-bracket--stack { padding: 16px 18px 20px; }
  .ph-bracket-wrap { padding: 20px 18px; }
  .ph-bracket-card .ph-bye { padding: 0 18px 18px; }
  .ph-bracket { grid-template-columns: minmax(0, 1fr); }
  .ph-champ-body { padding: 20px 18px 22px; }
  .ph-champ-name { font-size: 44px; }
  .ph-faces { padding: 18px; gap: 10px; }
  .ph-cols { grid-template-columns: 24px minmax(0, 1fr) 50px 80px; gap: 8px; padding: 0 16px; }
  .ph .pt-boss { gap: 10px; }
  .ph .pt-boss .pt-av { width: 36px; height: 36px; font-size: 16px; }
  .ph-pf, .ph-streak, .ph-c-pf, .ph-c-streak { display: none; }
  .ph-h-long { display: none; }
  .ph-h-short { display: inline; }
  .ph-status { letter-spacing: .04em; }
  .ph-status.is-champ { background: none; color: var(--pt-ac); padding: 0; }
  .ph-rec { font-size: 20px; }
  .ph .pt-odds { gap: 6px; }
  .ph .pt-odds-n { width: 34px; font-size: 16px; }
  .ph-prow { padding: 16px; }
  .ph-power-head { padding: 18px 16px 8px; }
  .ph-power-title { font-size: 28px; }
  .ph .ph-post { padding: 22px; }
  .ph-post-h { font-size: 34px; }
  .ph-post-h--sm { font-size: 28px; }
  .ph-results { grid-template-columns: minmax(0, 1fr); }
  .ph-hammer { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ph-records { grid-template-columns: minmax(0, 1fr); }
  .ph-records .ph-rec-n { font-size: 60px; height: 54px; }
  .ph-rec-card { padding: 24px; }
  .ph-noscript-h { font-size: 52px; }
}
@media (max-width: 400px) {
  .ph-by-sep { display: none; }
  .ph-byline { gap: 0 16px; }
  .ph-h1 { font-size: 50px; }
  .ph-h1--m { font-size: 46px; }
  .ph-h1--s { font-size: 40px; }
  .ph-ctas .pt-btn { flex: 1 1 100%; }
  .ph-champ-name { font-size: 38px; }
}
@media (max-width: 380px) {
  .ph-cols { grid-template-columns: 24px minmax(0, 1fr) 52px 48px; gap: 8px; padding: 0 14px; }
  .ph-rows--status .ph-cols { grid-template-columns: 24px minmax(0, 1fr) 52px 72px; }
  .ph .pt-odds .pt-track { display: none; }
  .ph .pt-odds { justify-content: flex-end; }
  .ph .pt-odds-n { width: auto; }
  .ph .pt-boss { gap: 10px; }
  .ph .pt-boss .pt-av { width: 36px; height: 36px; font-size: 16px; }
  .ph-rk { font-size: 20px; }
  .ph-rec { font-size: 18px; }
}
@media (max-width: 340px) {
  .ph-power-title { font-size: 24px; }
  body.pt .pt-brand { font-size: 15px; gap: 8px; }
  body.pt .pt-mark { width: 34px; height: 34px; }
  body.pt .pt-menu-btn { padding: 0 14px; }
}
/* Ten tiles in three columns leave a hole: the 2026 tile takes the last row. */
@media (min-width: 361px) and (max-width: 640px) {
  .ph .ph-yr--now { grid-column: 1 / -1; min-height: 0; }
}
@media (max-width: 360px) {
  .ph-faces { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ph-hammer { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ph-who { font-size: 28px; }
}

/* ---------- live scores + projections ---------- */
.ph .ph-live-foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; }
.ph .ph-live-t { color: var(--pt-tx2); font-weight: 600; }
.ph .ph-live-t time { font-variant-numeric: tabular-nums; }
.ph .ph-live-warn { color: var(--pt-tx); font-weight: 700; }
.ph .ph-live-warn::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 2px; background: var(--pt-ac); transform: rotate(45deg); }
.ph .ph-live-note { flex-basis: 100%; }
.ph .ph-duo-pj { margin-top: -4px; font-size: 15px; line-height: 1.4; color: var(--pt-tx2); }
.ph .ph-duo-pj b { color: var(--pt-tx); font-weight: 700; }
.ph .ph-pj-a, .ph .ph-pj-b { white-space: nowrap; }
.ph .ph-g-row--proj { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; column-gap: 12px; row-gap: 0; align-items: center; min-height: 0; padding-top: 6px; }
.ph .ph-g-row--proj .ph-g-name { flex: none; }
.ph .ph-g-row--proj > :first-child { grid-row: 1 / span 2; }
.ph .ph-g-proj { grid-column: 2 / -1; font-size: 14px; line-height: 1.35; color: var(--pt-tx2); margin: -4px 0 2px; }
.ph .ph-g-proj b { color: var(--pt-tx); font-weight: 700; }
@media (max-width: 640px) {
  .ph .ph-duo-pj .ph-pj-b { display: block; }
  .ph .ph-duo-pj .ph-pj-sep { display: none; }
}
/* Refresh scores while a refresh is under way: aria-disabled keeps keyboard focus
   on the button, so it needs its own muted look. */
.ph .pt-chip[aria-disabled="true"] { opacity: .6; cursor: progress; }

/* ---------- franchise marks (assets/team-kits.js crests) ----------
   Crests are 10:11 plates; the markup carries width and height, so nothing
   moves while they load. Never on volt. */
.ph .ph-crest { display: block; flex: none; height: auto; aspect-ratio: 10 / 11; object-fit: contain; }
/* The micro-crest sprite the build puts at the top of #ph: symbols only, never drawn. */
.ph > .ph-sprite { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.ph .pt-boss .ph-crest { width: 36px; }
.ph .ph-g-row .ph-crest, .ph .ph-lg-row .ph-crest { width: 32px; }
.ph .ph-g-row--proj > .ph-crest { justify-self: center; }
.ph .ph-sub-team .ph-crest { display: inline-block; width: 20px; margin: 0 7px 0 0; vertical-align: -5px; }
.ph .ph-res-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ph .ph-res-who .ph-crest { width: 24px; }
.ph .ph-res-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) {
  .ph .pt-boss .ph-crest { width: 32px; }
}

/* ---------- league tools: This Week in League History, Record Watch ----------
   The widget bodies are styled by assets/fbi-tools.css; the page owns the head. */
.ph .ph-tool-sec .fbi-tool { min-width: 0; }