/* Possession Battle — an editorial layer, intentionally isolated for easy iteration. */
:root { --pb-orange: #ef9955; --pb-paper: #f1eee8; --pb-muted: #a4adb7; --pb-rule: #323941; --pb-positive: #83bd99; --pb-negative: #db8d86; }
body::before { background: #101419; }
body::after { opacity: .08; }
.arena { opacity: .16; }
.wrap { max-width: 1180px; padding-top: 36px; }
.site-footer { display: block; max-width: 1180px; margin: 0 auto; padding: 28px 24px 24px; border-top: 1px solid var(--pb-rule); color: #8f99a6; }
.footer-main { display: flex; align-items: center; gap: 28px; padding-bottom: 20px; }
.footer-brand { display: inline-flex; align-items: center; flex-shrink: 0; gap: 10px; color: #d9dee5; text-decoration: none; font: 700 1.1rem/1.3 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.footer-brand img { width: 40px; height: 40px; object-fit: contain; }
.footer-main p { max-width: 600px; margin: 0; color: #a4adb7; font: 400 .78rem/1.7 var(--font); }
.footer-details { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 24px; padding-top: 14px; border-top: 1px solid #262e37; font: 400 .66rem/1.6 var(--font); }
.site-footer .footer-note { margin: 8px 0 0; font: 400 .64rem/1.6 var(--font); }
@media (max-width: 700px) { .site-footer { padding: 24px 18px; } .footer-main { flex-direction: column; align-items: flex-start; gap: 12px; } .footer-details { flex-direction: column; } }
.editorial-kicker, .section-index { font: 600 .68rem/1.5 var(--font); text-transform: uppercase; letter-spacing: .15em; color: var(--pb-orange); }
.section-index { display: block; margin-bottom: 10px; }
.editorial-kicker { display: flex; align-items: center; gap: 10px; }
.editorial-kicker::before { content: ''; width: 20px; height: 1px; background: var(--pb-orange); flex: none; }
.team-identifier { color: var(--team-accent); font-weight: 800; letter-spacing: .04em; }
.edition { color: var(--pb-muted); font-size: .64rem; letter-spacing: .04em; }
.team-opening { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; align-items: start; padding-bottom: 44px; }
.team-story { display: block; padding-top: 6px; }
.team-story h1, .league-intro h1 { font: 800 clamp(3.4rem, 6.2vw, 5.2rem)/.98 var(--display); letter-spacing: -.025em; margin: 24px 0 20px; color: var(--pb-paper); text-transform: uppercase; }
.team-story h1 em, .league-intro h1 em { color: var(--pb-orange); font-style: normal; }
.team-story h1 em { color: var(--team-accent); }
.story-deck { max-width: 440px; font: 400 1rem/1.65 var(--font); color: #c3c9cf; margin: 0 0 26px; }
.story-deck strong { font-weight: 700; color: var(--pb-paper); }
.story-numbers { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; padding: 20px 0; border-top: 1px solid var(--pb-rule); border-bottom: 1px solid var(--pb-rule); }
.rating-signature { display: flex; flex-direction: column; align-items: flex-start; position: relative; }
.signature-kicker { display: flex; align-items: center; gap: 7px; font: 500 .68rem/1.4 var(--font); color: #c3c9cf; }
.signature-kicker > span { color: var(--pb-orange); font: 800 .85rem/1 var(--display); letter-spacing: -.04em; padding: 4px 5px; border: 1px solid #7e5b40; border-radius: 0; }
.rating-signature > strong { font: 800 5rem/.95 var(--display); letter-spacing: -.035em; color: var(--pb-paper); margin: 10px 0 6px; }
.rating-signature > small { font: 400 .65rem/1.5 var(--font); color: var(--pb-muted); }
.signature-kicker .rating-help { flex-basis: 17px; height: 17px; width: 17px; font-size: .6rem; }
.rating-signature > small .rating-help { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; margin-left: 4px; font-size: .6rem; vertical-align: middle; }
.story-context { display: grid; gap: 20px; border-left: 1px solid var(--pb-rule); padding-left: 26px; }
.story-context > div { display: flex; flex-direction: column; gap: 5px; }
.story-context strong { font: 600 1.5rem/1 var(--font); letter-spacing: -.04em; color: var(--pb-paper); font-variant-numeric: tabular-nums; }
.story-context span { font: 400 .67rem/1.5 var(--font); color: var(--pb-muted); }
.story-context .edge-positive { color: var(--pb-positive); }
.story-context .edge-negative { color: var(--pb-negative); }
.edition-note { margin: 12px 0 0; color: var(--pb-muted); font: 400 .68rem/1.5 var(--font); }
.latest-wrap { min-width: 0; padding-top: 6px; }
.latest-wrap .takeaway-game { padding: 22px; border: 1px solid var(--pb-rule); background: #161c23; border-radius: 4px; box-shadow: none; }
.latest-wrap .takeaway-game:hover { border-color: var(--pb-rule); background: #161c23; }
.latest-wrap .takeaway-game::before { display: none; }
.latest-wrap .tg-score { font-size: 2rem; }
.latest-wrap .tg-rating b { font-family: var(--display); font-size: 2.6rem; }
.latest-wrap .tg-stat { font-size: .8rem; }
.latest-wrap .tg-status.won { color: var(--pb-positive); }
.latest-wrap .tg-status.lost { color: var(--pb-negative); }
.latest-wrap .tg-stats-head { margin-top: 18px; }
/* Open, numbered sections rather than a stack of nested panels. */
body[data-team] #app > .section.band { background: none; border: 0; border-top: 1px solid var(--pb-rule); padding: 32px 0 0; margin: 0 0 42px; border-radius: 0; }
body[data-team] #app > .section.band::before { display: none; }
.band-head { margin-bottom: 24px; }
.band-head h2 { font: 700 clamp(1.9rem, 3vw, 2.5rem)/1.05 var(--display); color: var(--pb-paper); text-transform: uppercase; letter-spacing: 0; }
.band-head p { font-size: .85rem; margin-top: 10px; max-width: 540px; }
body[data-team] .colcard { padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
.colcard::before { display: none; }
.colgrid { gap: 0; }
body[data-team] .colgrid .colgroup { border: 0; border-right: 1px solid var(--pb-rule); border-bottom: 1px solid var(--pb-rule); border-radius: 0; background: none; box-shadow: none; padding: 18px 20px; }
body[data-team] .colgrid .colgroup:hover { background: rgba(255,255,255,.015); transform: none; box-shadow: none; }
.colgrid .col-name { font: 600 .8rem/1.4 var(--font); color: #cbd1d6; text-transform: none; letter-spacing: 0; text-align: center; }
.colgrid .col-name:has(.stat-rank) { height: auto; min-height: 3.8em; overflow: visible; }
.stat-rank { display: block; margin: 5px auto 0; padding: 3px 6px; border: 0; border-radius: 3px; background: none; color: #a7b1be; font: 500 .65rem/1.4 var(--font); cursor: pointer; text-decoration: underline; text-decoration-color: #46515f; text-underline-offset: 3px; }
.stat-rank:hover { color: #f0c68b; background: rgb(240 198 139 / .06); }
.stat-rank:focus-visible { outline: 2px solid #e0b686; outline-offset: 2px; }
.stat-rank-dialog { max-width: 620px; }
.stat-rank-dialog .battle-dialog-content { scrollbar-width: thin; scrollbar-color: #56606d transparent; }
.stat-ranking-note { margin: 0 0 18px; color: #a7b1be; font: 400 .75rem/1.7 var(--font); }
.stat-ranking-table { width: 100%; border-collapse: collapse; font: 500 .82rem/1.4 var(--font); font-variant-numeric: tabular-nums; }
.stat-ranking-table th, .stat-ranking-table td { padding: 10px 8px; border-bottom: 1px solid #343c46; text-align: right; }
.stat-ranking-table thead { color: #98a4b4; font-size: .65rem; text-transform: uppercase; letter-spacing: .06em; }
.stat-ranking-table th:nth-child(2), .stat-ranking-table tbody th { text-align: left; }
.stat-ranking-table tbody td:first-child { color: #98a4b4; }
.stat-ranking-table .stat-ranking-current { background: rgb(224 172 128 / .1); }
.stat-ranking-table .stat-ranking-current td:first-child { color: #e6bd76; }
.stat-ranking-table tbody td:last-child { color: #eeeae3; font-weight: 700; }
@media (max-width: 480px) {
  .stat-rank-dialog .battle-dialog-content { padding: 12px; }
  .stat-ranking-table { table-layout: fixed; font-size: .75rem; }
  .stat-ranking-table th, .stat-ranking-table td { padding: 10px 4px; }
  .stat-ranking-table thead th:nth-child(1) { width: 12%; }
  .stat-ranking-table thead th:nth-child(2) { width: 50%; }
  .stat-ranking-table thead th:nth-child(3) { width: 16%; }
  .stat-ranking-table thead th:nth-child(4) { width: 22%; }
  .stat-ranking-table .battle-result-team { gap: 6px; font-size: .75rem; overflow-wrap: anywhere; }
  .stat-ranking-table .battle-result-team .team-badge { width: 28px; height: 28px; flex-basis: 28px; font-size: .8rem; }
}
.colgrid .col-lead { font: 700 1.65rem/1.1 var(--display); }
body[data-team] .colgrid .col-lead.pos { color: var(--pb-positive); }
body[data-team] .colgrid .col-lead.neg { color: var(--pb-negative); }
.colgrid .col-badge, .colgrid .col-badge.won, .colgrid .col-badge.lost { background: none; color: var(--pb-muted); font-size: .62rem; font-weight: 500; border: 0; border-radius: 0; padding: 5px 0 0; text-transform: none; letter-spacing: 0; }
.colgrid .cols { height: 110px; }
.colgrid .col { border-radius: 2px 2px 0 0; background-image: none; box-shadow: none; }
.colgrid .col::before, .colgrid .col::after { display: none; }
.colgrid .col-val { font: 600 .85rem/1.2 var(--font); }
.ppp-strip { grid-template-areas: "label nums"; border-radius: 4px; background: #151b21; border-color: var(--pb-rule); margin-bottom: 24px; }
@media (max-width: 640px) { .ppp-strip { grid-template-areas: "label" "nums"; } }
.ppp-nums b { font-size: 1.4rem; }
.ppp-net.pos b, body[data-team] .ppp-net.pos b { color: var(--pb-positive); }
.ppp-net.neg b, body[data-team] .ppp-net.neg b { color: var(--pb-negative); }
/* Charts: signed area, dates, readable labels and generous point targets. */
.margin-card { border: 0; border-bottom: 1px solid var(--pb-rule); border-radius: 0; background: none; box-shadow: none; }
.margin-card::before { display: none; }
.margin-card .sm-head { padding: 16px 0 0; }
.margin-card h3 { font: 600 .85rem/1.35 var(--font); letter-spacing: 0; text-transform: none; }
.margin-card h3::before { display: none; }
.margin-card .sm-now { font: 800 2.4rem/1 var(--display); background: none; padding: 0; display: inline-flex; gap: 3px; align-items: baseline; }
.sm-now small { font: 400 .65rem/1 var(--font); }
body[data-team] .margin-card .sm-now.pos { color: var(--pb-positive); }
body[data-team] .margin-card .sm-now.neg { color: var(--pb-negative); }
.margin-card .sm-sub { padding: 7px 0 10px; font-size: .68rem; color: var(--pb-muted); }
.margin-card svg { height: 170px; padding: 0; overflow: visible; }
.margin-card svg path.area-positive { fill: var(--pb-positive); opacity: .13; }
.margin-card svg path.area-negative { fill: var(--pb-negative); opacity: .16; }
.margin-card svg path.line-positive { stroke: var(--pb-positive); stroke-width: 2; }
.margin-card svg path.line-negative { stroke: var(--pb-negative); stroke-width: 2; }
.margin-card svg circle.dot-positive { fill: #11171d; stroke: var(--pb-positive); }
.margin-card svg circle.dot-negative { fill: #11171d; stroke: var(--pb-negative); }
.margin-card svg circle.chart-hit { fill: transparent; stroke: none; pointer-events: all; }
.margin-card svg .zero { stroke: #8a949e; stroke-width: 1; opacity: .8; }
.margin-card svg a:focus-visible { outline: none; }
.margin-card svg a:focus-visible circle:not(.chart-hit) { stroke: var(--pb-orange); stroke-width: 4; }
#trends .grid-3 { column-gap: 34px; row-gap: 16px; }
#trends .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#trends .grid-2 > .card { min-width: 0; }
#trends .scorechart { width: 100%; max-width: 100%; }
#trends .grid-2 > .card { border-radius: 4px; box-shadow: none; background: #151b21; }
.log { border-radius: 4px; box-shadow: none; }
.log .log-rating { color: var(--pb-orange); font-family: var(--display); font-size: 1.3rem; }
/* A single league table and one editorial feature. */
.league-opening { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; padding: 6px 0 40px; }
.league-intro h1 { font-size: clamp(4.2rem, 7.5vw, 6.6rem); margin: 20px 0; }
.league-intro p { color: #c3c9cf; font: 400 1rem/1.6 var(--font); }
.league-edition { display: block; color: var(--pb-muted); font: 500 .65rem/1.5 var(--font); text-transform: uppercase; letter-spacing: .15em; margin-top: 24px; }
.league-feature { display: block; text-decoration: none; border-top: 1px solid var(--pb-rule); border-bottom: 1px solid var(--pb-rule); padding: 22px 0; align-self: center; }
.league-feature .editorial-kicker { justify-content: space-between; }
.league-feature .editorial-kicker::before { display: none; }
.league-feature h2 { font: 700 2.6rem/1.05 var(--display); text-transform: uppercase; color: var(--pb-paper); margin: 20px 0 12px; }
.league-feature > p { color: color-mix(in srgb, var(--team-accent) 70%, white); font: 600 .8rem/1.4 var(--font); margin: 0; }
.feature-bottom { display: flex; justify-content: space-between; gap: 24px; align-items: flex-end; margin-top: 22px; }
.league-feature .rating-signature > strong { font-size: 3.5rem; }
.league-feature:hover h2 { color: var(--pb-orange); }
.feature-edge { display: flex; align-items: center; gap: 9px; margin-bottom: 4px; }
.feature-edge b { font: 700 1.6rem/1 var(--display); color: var(--pb-positive); }
.feature-edge small { font: 400 .65rem/1.5 var(--font); color: var(--pb-muted); }
.league-list-title { display: flex; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--pb-rule); padding-bottom: 14px; align-items: baseline; }
.league-list-title .section-index { margin: 0; }
.league-list-title > span:last-child { color: var(--pb-muted); font: 400 .7rem/1.4 var(--font); }
.league-list { list-style: none; padding: 0; margin: 0; }
.league-list li { margin: 0; }
.league-list .tier-row { display: grid; grid-template-columns: 36px 42px minmax(0, 1fr) 110px 90px 20px; gap: 20px; padding: 5px 12px; border: 0; border-bottom: 1px solid #252d35; border-radius: 0; min-height: 64px; text-decoration: none; }
.league-list .tier-row:hover, .league-list .tier-row:focus-visible { background: #191f26; outline: none; }
.league-list .tier-row:focus-visible { box-shadow: inset 3px 0 var(--pb-orange); }
.league-list .t-rank { font: 500 .9rem/1 var(--font); color: #8e99a5; }
.club-mark { display: grid; place-items: center; color: var(--team-accent); font: 800 1rem/1 var(--display); height: 34px; border-left: 2px solid var(--team-accent); }
.league-list .t-team strong { font-size: 1.1rem; color: var(--pb-paper); font-weight: 600; }
.league-list .t-team small { font-size: .85rem; color: #b9c3ce; margin-top: 6px; line-height: 1.45; }
.league-edge { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.league-edge b { font: 500 1rem/1 var(--font); color: #c7cdd3; font-variant-numeric: tabular-nums; }
.league-edge small { font: 400 .6rem/1 var(--font); color: var(--pb-muted); }
.league-list .t-rating strong { font: 700 2rem/1 var(--display); color: var(--pb-paper); }
.league-list .t-rating small { font: 500 .58rem/1 var(--font); color: var(--pb-orange); text-transform: uppercase; letter-spacing: .08em; margin-top: 6px; }
.row-arrow { color: var(--pb-muted); text-align: right; }
.league-list .tier-row:hover .row-arrow { color: var(--pb-orange); }
/* Consistent rating typography in the detailed game view as well. */
.tile-rating .val, body[data-team] .tile-rating .val { font-family: var(--display); color: var(--pb-paper); }
.tile-rating .eyebrow { color: var(--pb-orange); }
.tile-rating { border-top: 2px solid var(--pb-orange); }
@media (max-width: 900px) {
  .team-opening { gap: 28px; grid-template-columns: 1fr 1fr; }
  .team-story h1 { font-size: 3.3rem; }
  .story-numbers { gap: 14px; }
  .story-context { padding-left: 14px; }
  .signature-kicker { font-size: .6rem; }
  .latest-wrap .takeaway-game { padding: 18px; }
  .league-opening { gap: 36px; }
}
@media (max-width: 700px) {
  .team-opening { grid-template-columns: 1fr; gap: 28px; padding-bottom: 32px; }
  .wrap { padding: 24px 18px 50px; }
  .team-story h1 { font-size: clamp(3.3rem, 12vw, 4.5rem); margin: 20px 0 16px; }
  .editorial-kicker { flex-wrap: wrap; gap: 7px; font-size: .62rem; }
  .edition { margin-left: auto; font-size: .6rem; }
  .story-deck { font-size: .9rem; line-height: 1.6; margin-bottom: 20px; }
  .story-numbers { grid-template-columns: 1fr 1fr; padding: 18px 0; gap: 24px; }
  .rating-signature > strong { font-size: 4.6rem; }
  .signature-kicker { font-size: .65rem; }
  .story-context { padding-left: 24px; }
  .latest-wrap { padding: 0; }
  .latest-wrap .tg-stat { font-size: .78rem; }
  body[data-team] #app > .section.band { padding-top: 24px; }
  #trends .grid-3 { grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 20px; }
  #trends .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .margin-card h3 { font-size: .75rem; }
  .margin-card .sm-now { font-size: 2rem; }
  .margin-card .sm-sub { font-size: .6rem; }
  .margin-card svg { height: 130px; }
  body[data-team] .colgrid .colgroup { padding: 16px 12px; }
  .league-opening { grid-template-columns: 1fr; gap: 18px; padding: 0 0 24px; }
  .league-intro h1 { font-size: 2.85rem; margin: 12px 0; }
  .league-intro h1 br { display: none; }
  .league-intro h1 em { margin-left: .15em; }
  .league-intro p { font-size: .9rem; margin-bottom: 0; }
  .league-edition { margin-top: 12px; }
  .league-feature { padding: 14px 0; }
  .league-feature h2 { font-size: 1.7rem; margin: 12px 0 8px; }
  .feature-bottom { margin-top: 14px; }
  .league-feature .rating-signature > strong { font-size: 2.8rem; margin: 7px 0 3px; }
  .league-list .tier-row { grid-template-columns: 26px minmax(0,1fr) 60px; gap: 12px; padding: 16px 0; min-height: 80px; }
  .club-mark, .league-edge, .row-arrow { display: none; }
  .league-list .t-team { border-left: 2px solid var(--team-accent); padding-left: 12px; }
  .league-list .t-team strong { font-size: .9rem; }
  .league-list .t-team small { font-size: .65rem; }
  .league-list .t-rating strong { font-size: 1.9rem; }
}
@media (max-width: 380px) {
  .edition { display: block; width: 100%; padding-left: 30px; }
  .story-context { padding-left: 14px; }
  .story-numbers { gap: 14px; }
  .signature-kicker { font-size: .6rem; }
  #trends .grid-3 { grid-template-columns: 1fr; }
  .margin-card svg { height: 160px; }
  .margin-card .sm-sub { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) { .league-feature, .league-list .tier-row { transition: none; } }

/* Values lead; dates sit in their own footer, with bright, solid game points. */
.margin-card .sm-head { min-height: 54px; }
.margin-card svg { margin-top: 12px; }
.margin-card svg circle.dot-positive { fill: #c2f5d2; stroke: #83d3a0; stroke-width: 2.5; }
.margin-card svg circle.dot-negative { fill: #ffd0ca; stroke: #ed9690; stroke-width: 2.5; }
.margin-card svg circle:not(.chart-hit):hover { r: 7; stroke-width: 3; }
.margin-card svg circle.chart-hit:hover { r: 9; }
.chart-dates { position: relative; width: 100%; height: 30px; margin: 8px 0 6px; border-top: 1px solid #28313a; color: #c2cbd5; font: 500 .7rem/1.5 var(--font); }
.chart-dates span { position: absolute; top: 8px; transform: translateX(-50%); white-space: nowrap; }
@media (max-width: 700px) { .chart-dates { font-size: .6rem; } }

.margin-card svg circle:not(.chart-hit) { vector-effect: non-scaling-stroke; stroke-width: 2; }

/* Team opening: the numbers are the headline. */
.team-opening { align-items: center; gap: 48px; }
.team-story h1.team-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 22px; font: 600 1rem/1.4 var(--font); letter-spacing: .025em; color: var(--pb-paper); text-transform: none; }
.team-heading::before { display: none; }
.team-heading .team-identifier { font: 800 .8rem/1 var(--display); border-left: 2px solid var(--team-accent); padding-left: 10px; }
.team-story .story-numbers { padding: 26px 0; }
.team-story .rating-signature { align-items: center; justify-content: center; min-width: 0; text-align: center; }
.team-story .rating-signature > strong { font-size: 7rem; line-height: 1.05; letter-spacing: .012em; margin: 0 0 12px; }
.team-story .rating-signature > small { line-height: 1.7; }
.team-story .rating-signature { align-self: stretch; justify-content: center; }
.team-story .rating-signature > strong:only-child { margin-bottom: 0; }
.team-league-rank { color: #b7c0ca; font: 600 .72rem/1.5 var(--font); letter-spacing: .02em; }
.team-story .story-context { display: flex; flex-direction: column; justify-content: space-between; align-self: stretch; }
.team-story .rating-signature > small, .team-story .story-context > div:last-child > span { display: flex; align-items: center; gap: 6px; font: 400 .65rem/1.7 var(--font); }
.team-story .rating-help { box-sizing: border-box; width: 17px; height: 17px; flex: 0 0 17px; margin: 0; padding: 0; background: none; font: 600 .6rem/1 var(--font); cursor: pointer; }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .team-story .rating-signature > strong { background: linear-gradient(110deg, #e0e4dd 0%, #f1eee8 42%, #fff 49%, color-mix(in srgb, var(--team-accent) 18%, #f1eee8) 56%, #e0e4dd 100%); background-size: 260% 100%; background-position: 100% 50%; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: winning-stat-shine 2.2s ease-out .2s both; }
  @media (prefers-reduced-motion: reduce) { .team-story .rating-signature > strong { animation: none; background: none; -webkit-text-fill-color: currentColor; } }
}
.team-story .story-context strong { font-size: 1.9rem; }
@media (min-width: 901px) {
  .team-opening { grid-template-columns: minmax(0, 1fr); align-items: start; padding-bottom: 28px; }
  .team-story > .ppp-strip { margin: 24px 0 0; grid-template-columns: minmax(0, 1fr); grid-template-areas: "label" "nums"; gap: 14px; }
  .team-story > .ppp-strip .ppp-nums { justify-content: space-between; }
}
body[data-team] .site-header.unified-header { gap: 24px; padding-top: 14px; padding-bottom: 14px; }
.brand-lockup strong { font-size: 1.85rem; }
.brand-lockup small { letter-spacing: .08em; }
.pb-emblem { width: 44px; height: 44px; flex-basis: 44px; }
.pb-emblem { background: transparent; border-radius: 0; overflow: visible; }
.pb-emblem img { position: static; width: 100%; height: 100%; max-width: 100%; object-fit: contain; transform: none; }
body[data-team] .unified-header .team-select select { border-radius: 4px; }
@media (max-width: 800px) {
  body[data-team] .site-header.unified-header { gap: 10px 16px; padding-top: 12px; padding-bottom: 8px; }
  .brand-lockup strong { font-size: 1.6rem; }
  .pb-emblem { width: 38px; height: 38px; flex-basis: 38px; }
}
@media (max-width: 700px) {
  .team-opening { gap: 24px; }
  .team-story h1.team-heading { font-size: .9rem; margin-bottom: 16px; }
  .team-story .story-numbers { padding: 22px 0; }
  .team-story .rating-signature > strong { font-size: 5.5rem; }
  .team-story .story-context strong { font-size: 1.7rem; }
}

/* The featured story opens the league page directly. */
.league-opening { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 0; }
.league-opening .league-feature { margin: 0; border-top: 0; padding-top: 0; }

/* Give each club an anchor and each rating a shape, with a quiet alternating rhythm. */
.league-list .tier-row { --row-base: #101419; --gradient-strength: var(--rating-strength); background-color: var(--row-base); background-image: linear-gradient(90deg, color-mix(in srgb, var(--team-accent) var(--gradient-strength), transparent) 0%, color-mix(in srgb, var(--team-accent) var(--gradient-strength), transparent) var(--rating-core), color-mix(in srgb, var(--team-accent) var(--rating-edge-strength), transparent) var(--rating-fill), transparent var(--rating-tail)); padding-left: 14px; padding-right: 14px; }
.league-list li:nth-child(even) .tier-row { --row-base: #11171d; }
.league-list .club-mark { display: grid; height: 38px; border: 1px solid color-mix(in srgb, var(--team-accent) 50%, #303943); border-radius: 5px; background: color-mix(in srgb, var(--team-accent) 13%, #141a21); color: color-mix(in srgb, var(--team-accent) 70%, white); font-size: 1.05rem; }
.league-list .club-mark, .team-badge { position: relative; overflow: hidden; background: linear-gradient(145deg, color-mix(in srgb, var(--badge-primary) 17%, #141a21), #141a21); border-color: color-mix(in srgb, var(--badge-primary) 55%, #48515c); box-shadow: inset 0 1px 0 rgb(255 255 255 / .08); }
.league-list .club-mark > span, .team-badge > span { position: relative; z-index: 1; text-shadow: 0 1px 3px #080b10; }
.league-list .tier-row[href="?team=det#/"] .club-mark, .team-badge[data-team="det"] { border-color: #1d42ba; }
.league-list .club-mark::after, .team-badge::after { content: ''; position: absolute; right: 0; bottom: 0; width: 21px; height: 19px; background: linear-gradient(135deg, transparent 0% 25%, var(--badge-primary) 25% 43%, var(--badge-secondary) 43% 61%, var(--badge-third) 61% 79%, transparent 79%); opacity: .95; pointer-events: none; }
.league-list .t-rating { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; box-sizing: border-box; min-width: 88px; width: 88px; padding: 4px 7px; border: 1px solid #3a424c; border-radius: 5px; background: #1b222b; text-align: center; }
.league-list .rating-track { height: 5px; margin-top: 4px; visibility: hidden; }
.rating-track { display: block; position: relative; width: 100%; height: 7px; border-radius: 2px; background: #3b4550; margin-top: 8px; overflow: hidden; }
.rating-track::after { content: ''; position: absolute; top: 0; left: 50%; width: 2px; height: 100%; background: rgba(255,255,255,.7); }
.rating-track i { display: block; height: 100%; background: color-mix(in srgb, var(--team-accent) 70%, white); }
.league-list .t-rating small { margin-top: 4px; font-size: .53rem; color: #b7c1cc; line-height: 1; letter-spacing: .1em; }
.league-list .tier-row:hover, .league-list li:nth-child(even) .tier-row:hover, .league-list .tier-row:focus-visible { --row-base: #19212a; --gradient-strength: calc(var(--rating-strength) + 4%); }
@media (max-width: 700px) {
  .league-list .tier-row { grid-template-columns: 22px 34px minmax(0, 1fr) 88px; gap: 10px; padding: 12px 10px; }
  .league-list .club-mark { height: 34px; font-size: .9rem; }
  .league-list .t-team { border: 0; padding-left: 0; }
  .league-list .t-team strong { font-size: 1rem; white-space: normal; line-height: 1.3; }
  .league-list .t-team small { font-size: .8rem; color: #b9c3ce; line-height: 1.45; }
  .league-list .t-rank { font-size: .9rem; }
}

/* Aggregate opponents use a neutral ink, leaving team colors to actual clubs. */
body[data-team]:not(.neutral-shell) .ppp-side b { color: #f5f4f0; }
body[data-team]:not(.neutral-shell) .colgrid .col.opp,
body[data-team]:not(.neutral-shell) .bar.opp .fill,
body[data-team]:not(.neutral-shell) .rate-row .fill.opp,
body[data-team]:not(.neutral-shell) .legend .l-opp::before,
body[data-team]:not(.neutral-shell) .bullet .bullet-opp { background: #d4dbe3; box-shadow: none; }


.tg-score-team { display: inline-flex; flex-direction: column; align-items: center; gap: 5px; }
.latest-wrap .tg-score-team > b { color: #f5f4f0; }
.latest-wrap .tg-badge { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--res); border-radius: 4px; background: color-mix(in srgb, var(--res) 16%, transparent); color: var(--res); font: 800 1.1rem/1 var(--font); transform: translateY(-7px); }
.latest-wrap .takeaway-game.win { --res: #80d899; }
.latest-wrap .takeaway-game.loss { --res: #f08787; }
.tg-score-team small { font: 600 .58rem/1 var(--font); letter-spacing: .09em; color: var(--text-2); }

/* Readable ranking metadata at a glance. */
.league-list .t-rating small { font-size: .62rem; }
.league-list .club-mark { font-size: 1.1rem; }
.league-edge small { font-size: .72rem; }
@media (max-width: 700px) { .league-list .tier-row { min-height: 100px; } .league-list .club-mark { font-size: 1rem; } .league-list .t-rating strong { font-size: 2.1rem; } }
.rating-formula { margin-bottom: 16px; }
.rating-formula dl { margin: 0 0 16px; }
.rating-formula dl > div { padding: 14px 0; border-bottom: 1px solid var(--pb-rule); }
.rating-formula dt { font-size: .75rem; font-weight: 600; color: var(--text-2); margin-bottom: 7px; }
.rating-formula dd { margin: 0; font-size: clamp(1rem, 2.5vw, 1.2rem); font-weight: 600; line-height: 1.6; }
.pb-equation { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin: 18px 0 8px; padding: 20px 0; border-top: 1px solid var(--pb-rule); border-bottom: 1px solid var(--pb-rule); font-size: clamp(1.15rem, 3.5vw, 1.7rem); font-weight: 600; line-height: 1.5; color: var(--pb-paper); }
.pb-equation strong { color: #eab581; white-space: nowrap; }
.rating-formula p:last-child { margin-bottom: 0; }
.latest-wrap .tg-stats-head { align-items: center; padding-top: 18px; }
.tg-battle-title { font: 700 1.15rem/1.2 var(--display); text-transform: uppercase; letter-spacing: .035em; color: var(--pb-paper); }
.tg-battle-count { display: inline-flex; align-items: baseline; gap: 5px; color: var(--pb-paper); white-space: nowrap; }
.tg-battle-count > strong { font: 700 .95rem/1.4 var(--font); font-variant-numeric: tabular-nums; }
.tg-battle-count > span { color: var(--pb-muted); font: 400 .8rem/1.4 var(--font); }
.tg-battle-track { display: grid; grid-template-columns: repeat(8, 1fr); gap: 5px; margin: 12px 0 10px; }
.tg-battle-track i { height: 5px; border-radius: 2px; background: #59616b; }
.tg-battle-track .won { background: var(--pb-positive); }
.tg-battle-track .lost { background: var(--pb-negative); }
.tg-battle-track .pending { opacity: .4; }
.latest-wrap .tg-edges { gap: 0 20px; }
.latest-wrap .tg-stat { justify-content: flex-start; gap: 9px; min-height: 58px; padding: 12px 0; border-bottom: 1px solid rgba(164,173,183,.1); font-size: .92rem; line-height: 1.4; font-weight: 600; color: #e0e3e7; }
.latest-wrap .tg-status { order: -1; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 25px; height: 25px; border-radius: 50%; background: rgba(164,173,183,.07); font-size: 1.05rem; }
.latest-wrap .tg-stat-name { flex: 1; min-width: 0; }
.latest-wrap .tg-stat-margin { flex: 0 0 auto; margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; }
.latest-wrap .tg-stat-margin.won { color: var(--pb-positive); }
.latest-wrap .tg-stat-margin.lost { color: var(--pb-negative); }
@media (max-width: 380px) { .latest-wrap .tg-edges { column-gap: 12px; } .latest-wrap .tg-stat { font-size: .88rem; gap: 7px; } }
.league-outcomes { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--pb-rule); }
.league-outcomes h2 { font: 700 clamp(1.7rem, 4vw, 2.2rem)/1.1 var(--display); margin: 12px 0; color: var(--pb-paper); }
.outcomes-intro { font-size: .9rem; line-height: 1.6; color: var(--pb-muted); margin: 0 0 18px; }
.outcomes-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.outcomes-table thead th { padding: 10px 14px; color: var(--pb-muted); font-size: .72rem; text-align: left; font-weight: 600; }
.outcomes-table thead th:nth-child(3) { width: 33%; }
.outcomes-table tbody th, .outcomes-table tbody td { padding: 17px 14px; border-top: 1px solid var(--pb-rule); text-align: left; }
.outcome-band { --band-color: #db8d86; }
.outcome-band.band-1 { --band-color: #c3a19d; }
.outcome-band.band-2 { --band-color: #a4adb7; background: rgba(164,173,183,.04); }
.outcome-band.band-3 { --band-color: #a1bbaa; }
.outcome-band.band-4 { --band-color: #83bd99; }
.outcomes-table tbody th { font: 700 1.35rem/1.2 var(--display); color: var(--band-color); }
.outcome-record { font-weight: 600; font-size: 1.05rem; color: var(--pb-paper); font-variant-numeric: tabular-nums; }
.outcome-rate b { font-size: 1.15rem; color: var(--pb-paper); font-variant-numeric: tabular-nums; }
.outcome-sample { font-size: .88rem; color: var(--pb-muted); }
.outcome-sample span { display: block; font-size: .7rem; margin-top: 3px; }
.outcome-meter { height: 6px; background: #343c46; margin-top: 8px; border-radius: 2px; overflow: hidden; }
.outcome-meter i { display: block; height: 100%; background: var(--band-color); }
.outcomes-note { font-size: .78rem; line-height: 1.6; color: var(--pb-muted); margin: 14px 0 0; max-width: 720px; }
@media (max-width: 520px) { .outcomes-table thead th { padding: 10px 6px; font-size: .68rem; } .outcomes-table tbody th, .outcomes-table tbody td { padding: 16px 6px; } .outcomes-table tbody th { font-size: 1.2rem; } .outcome-record { font-size: .95rem; } .outcome-rate b { font-size: 1.05rem; } .outcome-sample span { font-size: .62rem; } }
.league-metrics { display: contents; }
@media (max-width: 700px) {
  .league-list .tier-row { grid-template-columns: 22px 38px minmax(0, 1fr); gap: 3px 10px; padding: 5px 12px; min-height: 0; }
  .league-list .t-rank, .league-list .club-mark, .league-list .t-team { grid-row: 1; }
  .league-list .t-team { grid-column: 3; }
  .league-list .t-team strong { font-size: 1.1rem; }
  .league-list .league-metrics { display: grid; grid-template-columns: 1fr 1fr; grid-column: 1 / -1; gap: 12px; padding-top: 3px; border-top: 1px solid rgba(164,173,183,.14); }
  .league-list .t-rating, .league-list .league-edge { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; min-width: 0; width: auto; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; text-align: center; gap: 0; }
  .league-list .league-edge { flex-direction: row; justify-content: center; align-items: center; gap: 8px; border-right: 1px solid rgba(164,173,183,.14); }
  .league-list .league-edge b, .league-list .t-rating strong { font: 700 2.1rem/1 var(--display); color: var(--pb-paper); }
  .league-list .league-edge small, .league-list .t-rating small { font: 500 .65rem/1.3 var(--font); color: #b7c1cc; letter-spacing: .04em; text-transform: uppercase; }
  .league-list .league-edge small { margin-top: 0; max-width: 94px; text-align: left; }
  .league-list .t-rating { display: grid; grid-template-columns: auto auto; justify-content: center; align-items: center; column-gap: 8px; }
  .league-list .t-rating strong { grid-column: 1; grid-row: 1; }
  .league-list .t-rating small { grid-column: 2; grid-row: 1; margin: 0; text-align: left; }
  .league-list .rating-track { grid-column: 1 / -1; grid-row: 2; width: 100%; height: 4px; margin-top: 4px; }
}
.league-list .t-team strong { color: #c6cdd6; font-weight: 500; }
.league-list .t-team small { color: #94a2b2; font-size: 1rem; font-weight: 500; line-height: 1.4; margin-top: 6px; font-variant-numeric: tabular-nums; }
.league-list .t-rank { color: #7f8a96; }
.league-list .t-rating strong { color: var(--team-accent); }
.league-list .league-edge b { color: #929fad; font-size: .9rem; font-weight: 500; }
.league-list .league-edge small { font-size: .65rem; }
.league-list .t-rating small, .league-list .league-edge small { color: #8f9ba9; }
@media (max-width: 700px) {
  .league-list .tier-row { grid-template-columns: 22px 38px minmax(0, 1fr) auto; align-items: center; }
  .league-list .t-team { display: contents; }
  .league-list .t-team strong { grid-column: 3; grid-row: 1; align-self: center; }
  .league-list .t-team small { grid-column: 4; grid-row: 1; align-self: center; margin: 0; max-width: 86px; text-align: right; }
}
@media (max-width: 420px) {
  .league-list .league-edge { flex-direction: column; gap: 4px; }
  .league-list .league-edge small { max-width: none; text-align: center; }
  .league-list .t-rating { grid-template-columns: 1fr; justify-items: center; }
  .league-list .t-rating small { grid-column: 1; grid-row: 3; margin-top: 4px; text-align: center; }
  .league-list .rating-track { grid-column: 1; width: 74px; }
}
.league-list .t-team strong { font-size: 1.02rem; }
.league-list .t-team small { font-size: .92rem; }
.league-list .t-rating strong { font-size: 1.9rem; }
@media (max-width: 700px) {
  .league-list .league-edge b, .league-list .t-rating strong { font-size: 1.95rem; }
  .league-list .league-edge b { font-size: 1.5rem; }
  .league-list .league-edge small { font-size: .6rem; }
}
/* Reserve the existing rating footprint; enlarge only its visible numeral. */
.league-list .tier-row { position: relative; }
.league-list .t-rating { position: relative; border-color: transparent; background: none; }
.league-list .t-rating strong { visibility: hidden; }
.league-list .t-rating::after { content: attr(data-rating); position: absolute; inset: -7px 0 9px; display: flex; align-items: center; justify-content: center; color: var(--team-accent); font: 700 2.6rem/1 var(--display); font-variant-numeric: tabular-nums; pointer-events: none; }
@media (max-width: 700px) {
  .league-list .league-metrics { position: static; border-top-color: transparent; }
  .league-list .league-edge { border-right-color: transparent; }
  .league-list .t-rating { position: static; }
  .league-list .t-rating::after { inset: 0 12px 0 calc(50% + 6px); font-size: 2.8rem; }
}
@media (max-width: 420px) {
  .league-list .league-metrics { position: relative; }
  .league-list .t-rating::after { inset: 0 0 10px 50%; }
}
body[data-team] .unified-header .team-select select {
  min-height: 48px;
  padding: 12px 32px 12px 14px;
  font-size: 1rem;
  font-weight: 600;
  color: #eef0f3;
  background: color-mix(in srgb, var(--selector-accent, #ef9955) 18%, #151a21);
  border: 1px solid color-mix(in srgb, var(--selector-accent, #ef9955) 65%, #3a414b);
  border-left: 4px solid var(--selector-accent, #ef9955);
  border-radius: 7px;
  cursor: pointer;
}
body[data-team] .unified-header .team-select select:focus-visible { outline: 2px solid var(--selector-accent, #ef9955); outline-offset: 3px; }
.team-select select option, .team-select select optgroup { background: #1d222a; color: #eef0f3; }
@media (max-width: 700px) {
  body[data-team] .unified-header .team-select { grid-column: 2; grid-row: 2; }
  body[data-team] .site-header.unified-header .site-nav { grid-column: 1; }
  body[data-team] .unified-header .team-select select { min-height: 52px; font-size: 1rem; }
}
.team-picker-trigger { width: 100%; min-height: 48px; padding: 12px 32px 12px 12px; text-align: left; position: relative; font: 600 .9rem/1.4 var(--font); color: #eef0f3; background: #1d222a; border: 1px solid #9c7254; border-radius: 6px; cursor: pointer; box-shadow: 0 0 12px rgb(239 153 85 / .14), inset 0 0 5px rgb(239 153 85 / .04); }
.team-picker-trigger:hover, .team-picker-trigger:focus-visible { box-shadow: 0 0 16px rgb(239 153 85 / .23), inset 0 0 5px rgb(239 153 85 / .06); }
.team-picker-trigger::after { content: '⌄'; position: absolute; right: 14px; top: 50%; transform: translateY(-60%); font-size: 1.3rem; }
.team-picker-trigger:focus-visible { outline: 2px solid var(--selector-accent, #ef9955); outline-offset: 3px; }
body[data-team] .site-header.unified-header .site-nav a.active[data-route="home"] { position: relative; }
body[data-team] .site-header.unified-header .site-nav a.active[data-route="home"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; border-radius: 2px; background: #ef9955; box-shadow: 0 0 6px rgb(239 153 85 / .65), 0 0 12px rgb(239 153 85 / .2); pointer-events: none; }
.team-picker-dialog { width: min(1000px, calc(100vw - 32px)); max-width: 1000px; max-height: calc(100dvh - 40px); margin: auto; box-sizing: border-box; padding: 0; border: 1px solid #434b56; border-radius: 10px; color: #eef0f3; background: rgb(23 29 37 / .96); backdrop-filter: blur(16px); box-shadow: 0 24px 80px rgb(0 0 0 / .45); }
.team-picker-dialog::backdrop { background: #05080dc9; }
.team-picker-body { display: flex; flex-direction: column; max-height: calc(100dvh - 42px); padding: 20px; box-sizing: border-box; }
.team-picker-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.team-picker-head h2 { margin: 0; font: 700 1.65rem/1.2 var(--display); }
.team-picker-close { min-width: 44px; min-height: 44px; border: 1px solid #414b58; border-radius: 6px; background: #242d39; color: #eef0f3; font-size: 1.5rem; cursor: pointer; }
.team-picker-results { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 16px; align-content: start; overflow-y: auto; overscroll-behavior: contain; min-height: 0; padding: 3px; }
.team-picker-results { scrollbar-width: thin; scrollbar-color: #56606d transparent; scrollbar-gutter: stable; }
.team-picker-results::-webkit-scrollbar { width: 8px; }
.team-picker-results::-webkit-scrollbar-track { background: transparent; }
.team-picker-results::-webkit-scrollbar-thumb { background: #56606d; border: 2px solid #171d25; border-radius: 10px; }
.team-picker-results::-webkit-scrollbar-thumb:hover { background: #a78a68; }
.team-picker-dialog { overflow: hidden; }
body:has(.team-picker-dialog[open]) { overflow: hidden; }
.team-picker-group { min-width: 0; }
.team-picker-division { margin: 0 0 10px; color: #a4adb7; font: 600 .68rem/1.4 var(--font); text-transform: uppercase; letter-spacing: .1em; }
.team-picker-choices { display: grid; gap: 6px; }
.team-picker-choice { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; min-height: 52px; padding: 8px 10px; margin: 0; border: 1px solid color-mix(in srgb, var(--choice-color) 25%, #303945); border-left: 3px solid var(--choice-color); border-radius: 5px; background: color-mix(in srgb, var(--choice-color) 7%, #171d25); color: #eef0f3; text-align: left; font: 600 .85rem/1.3 var(--font); cursor: pointer; }
.team-picker-selected { margin-left: auto; color: var(--choice-color); }
.team-picker-badge { display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 34px; color: color-mix(in srgb, var(--choice-color) 70%, white); border: 1px solid color-mix(in srgb, var(--badge-primary) 55%, #48515c); border-radius: 5px; font: 800 1rem/1 var(--display); }
.team-picker-choice:hover, .team-picker-choice:focus-visible, .team-picker-choice[aria-current] { background: color-mix(in srgb, var(--choice-color) 20%, #171d25); outline-color: var(--choice-color); }
@media (max-width: 760px) { .team-picker-results { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .team-picker-body { padding: 14px; } .team-picker-results { gap: 20px 10px; } .team-picker-choice { gap: 7px; padding: 8px 6px; font-size: .78rem; } .team-picker-badge { flex-basis: 32px; width: 32px; height: 32px; font-size: .9rem; } .team-picker-selected { font-size: .7rem; } }
@media (max-width: 700px) { .team-picker-trigger { min-height: 52px; } }
.editorial-rankings > .league-opening { margin: 36px 0 0; }
.tg-game-metrics { margin-left: auto; padding-left: 14px; border-left: 1px solid #39414a; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; flex-shrink: 0; }
.tg-game-metrics .tg-rating { padding: 0; border: 0; margin: 0; }
.tg-game-edge { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.tg-game-edge b { font: 700 1.4rem/1 var(--display); color: var(--pb-paper); }
.tg-game-edge .edge-positive { color: var(--pb-positive); }
.tg-game-edge .edge-negative { color: var(--pb-negative); }
.tg-game-edge small { color: var(--pb-muted); font-size: .6rem; line-height: 1.3; }
@media (max-width: 380px) { .latest-wrap .tg-main { gap: 8px; } .latest-wrap .tg-score { font-size: 1.7rem; } .tg-game-metrics { padding-left: 10px; } }

/* Latest game: the opportunity margin leads, with the rating as context. */
.latest-wrap .tg-game-edge b { font-size: clamp(2.8rem, 5vw, 3.8rem); letter-spacing: .01em; }
.latest-wrap .tg-game-edge small { max-width: 180px; font-size: .75rem; line-height: 1.5; text-align: right; }
.latest-wrap .tg-main { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; margin-top: 14px; }
.tg-score-line { display: flex; align-items: center; gap: 12px; }
.latest-wrap .tg-scoreboard .tg-game-edge { display: flex; flex-direction: row; align-items: baseline; justify-content: flex-start; gap: 6px; margin-top: 10px; white-space: nowrap; }
.latest-wrap .tg-scoreboard .tg-game-edge b { font: 700 1.1rem/1.3 var(--font); letter-spacing: 0; }
.latest-wrap .tg-scoreboard .tg-game-edge small { font: 400 .7rem/1.4 var(--font); text-align: left; }
.latest-wrap .tg-game-metrics { gap: 0; padding-left: 16px; border: 0; margin: 0; }
.latest-wrap .tg-game-metrics .tg-rating { gap: 3px; }
.latest-wrap .tg-game-metrics .tg-rating { position: relative; isolation: isolate; }
.latest-wrap .tg-game-metrics .tg-rating::before { content: ''; position: absolute; z-index: -1; inset: -12px -10px -10px -22px; pointer-events: none; border-radius: 4px; background: linear-gradient(125deg, transparent 24%, rgb(232 177 102 / .09) 24.5%, rgb(232 177 102 / .09) 38%, transparent 38.5%), linear-gradient(125deg, transparent 44%, rgb(232 177 102 / .055) 44.5%, rgb(232 177 102 / .055) 58%, transparent 58.5%), radial-gradient(ellipse at 75% 40%, rgb(232 177 102 / .12), transparent 70%); }
.latest-wrap .tg-game-metrics .tg-rating b { font: 700 clamp(2.8rem, 5vw, 3.6rem)/1 var(--display); letter-spacing: 0; color: var(--pb-orange); text-shadow: none; }
.latest-wrap .tg-rating b small { font: 400 .75rem/1.3 var(--font); color: var(--pb-muted); letter-spacing: 0; }
.latest-wrap .tg-game-metrics .tg-rating > small { margin: 0; font: 400 .68rem/1.4 var(--font); letter-spacing: 0; text-transform: none; }
.tg-season-context { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 12px; color: var(--pb-muted); font: 400 .7rem/1.5 var(--font); }
.tg-season-context > span + span { padding-left: 12px; border-left: 1px solid var(--pb-rule); }
.tg-season-context strong { color: var(--pb-paper); font-variant-numeric: tabular-nums; }
.latest-wrap .tg-stats-head { align-items: baseline; flex-wrap: wrap; gap: 6px 16px; }
.latest-wrap .tg-battle-count { display: inline-flex; align-items: center; gap: 7px; white-space: normal; color: var(--pb-muted); font: 400 .75rem/1.5 var(--font); }
.latest-wrap .tg-battle-count > span:not(.team-badge) { font: inherit; }
.latest-wrap .tg-battle-count .team-badge, .latest-wrap .tg-when .team-badge { display: grid; place-items: center; width: 29px; height: 27px; flex: 0 0 29px; border: 1px solid color-mix(in srgb, var(--badge-primary) 55%, #48515c); border-radius: 4px; color: color-mix(in srgb, var(--choice-color) 70%, white); font: 800 .8rem/1 var(--display); }
.latest-wrap .tg-battle-count .team-badge::after, .latest-wrap .tg-when .team-badge::after { width: 16px; height: 15px; }
.latest-wrap .tg-battle-count .team-badge[data-team="det"], .latest-wrap .tg-when .team-badge[data-team="det"] { border-color: #1d42ba; }
.latest-wrap .tg-when { display: inline-flex; align-items: center; justify-content: flex-end; gap: 7px; white-space: nowrap; }
.latest-wrap .tg-when > span:first-child { margin-right: 3px; }
.latest-wrap .tg-top { align-items: center; }
.latest-wrap .tg-latest-card { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 24px; }
.latest-wrap .tg-latest-card > .tg-top { grid-column: 1; grid-row: 1; justify-content: center; gap: 12px; }
.latest-wrap .tg-latest-card > .tg-main { display: contents; }
.tg-latest-card .tg-scoreboard { grid-column: 1; grid-row: 2; margin-top: 14px; }
.tg-latest-card .tg-score-line { justify-content: center; }
.latest-wrap .tg-latest-card .tg-scoreboard .tg-game-edge { justify-content: center; }
.tg-latest-card .tg-score, .tg-latest-card .tg-game-edge b, .tg-latest-card .tg-frame { font-variant-numeric: tabular-nums; }
.latest-wrap .tg-latest-card .tg-game-metrics { grid-column: 2; grid-row: 1 / span 2; align-self: center; justify-self: end; padding: 0; }
.latest-wrap .tg-latest-card .tg-rating { align-items: center; text-align: center; }
.latest-wrap .tg-latest-card .tg-rating b { font-size: clamp(4rem, 7vw, 6rem); line-height: .95; }
.latest-wrap .tg-latest-card .tg-rating b small { display: block; margin-top: 5px; font-size: .65rem; }
.latest-wrap .tg-latest-card .tg-rating > small { font-size: .68rem; }
.tg-latest-card > .tg-stats-head, .tg-latest-card > .tg-battle-track, .tg-latest-card > .tg-edges { grid-column: 1 / -1; }
@media (max-width: 640px) {
  .latest-wrap .tg-latest-card { column-gap: 14px; }
  .latest-wrap .tg-latest-card .tg-rating b { font-size: 4rem; }
}
@media (max-width: 380px) {
  .latest-wrap .tg-latest-card { column-gap: 8px; }
  .latest-wrap .tg-latest-card > .tg-top { gap: 7px; }
  .latest-wrap .tg-latest-card .tg-rating b { font-size: 3.4rem; }
  .latest-wrap .tg-latest-card .tg-rating > small { font-size: .6rem; }
}
@media (max-width: 380px) {
  .latest-wrap .tg-top { gap: 8px; }
  .latest-wrap .tg-when { gap: 4px; font-size: .7rem; }
  .latest-wrap .tg-when .team-badge { width: 24px; height: 24px; flex-basis: 24px; font-size: .7rem; }
}
.latest-wrap .tg-battle-count strong { color: var(--pb-paper); font-weight: 600; }
.tg-battle-track { gap: 5px; margin: 6px 0; }
.tg-battle-track button { position: relative; height: 28px; min-width: 0; padding: 0; border: 0; border-radius: 3px; background: transparent; cursor: pointer; }
.tg-battle-track button::after { content: ''; position: absolute; inset: 11px 0; border-radius: 2px; background: #59616b; }
.tg-battle-track button.won, .tg-battle-track button.lost { background: transparent; }
.tg-battle-track button.won::after { background: var(--pb-positive); }
.tg-battle-track button.lost::after { background: var(--pb-negative); }
.tg-battle-track button[aria-pressed="true"], .tg-battle-track button:focus-visible { outline: 1px solid var(--pb-paper); outline-offset: 1px; }
.latest-wrap .tg-stat { min-height: 64px; gap: 8px; padding: 9px 4px; border-radius: 3px; }
.latest-wrap .tg-stat-active { background: #29323c; box-shadow: inset 2px 0 #d8bd94; }
.latest-wrap .tg-stat-name strong { display: block; color: #f5f6f8; font: 700 .94rem/1.35 var(--font); letter-spacing: .005em; text-shadow: 0 1px 3px rgb(0 0 0 / .3); }
.latest-wrap .tg-stat-highlight-gain { background: color-mix(in srgb, var(--pb-positive) 5%, transparent); }
.latest-wrap .tg-stat-highlight-loss { background: color-mix(in srgb, var(--pb-negative) 5%, transparent); }
.latest-wrap .tg-stat-name .tg-stat-callout { color: var(--pb-positive); font-size: .6rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.latest-wrap .tg-stat-name .tg-stat-callout.loss { color: var(--pb-negative); }
.latest-wrap .tg-stat-name small, .latest-wrap .tg-stat-margin small { display: block; margin-top: 3px; color: #b7c1cc; font: 400 .75rem/1.35 var(--font); white-space: normal; }
.latest-wrap .tg-stat-margin { flex: 0 0 145px; max-width: 45%; text-align: right; }
.latest-wrap .tg-stat-margin b { font: 700 1rem/1.4 var(--font); }
.latest-wrap .tg-stat-margin .tg-stat-beneficiary { display: inline-flex; align-items: center; gap: 4px; }
.tg-stat-beneficiary .team-badge, .col-outcome .team-badge { display: inline-grid; place-items: center; width: 23px; height: 21px; flex: 0 0 23px; border: 1px solid color-mix(in srgb, var(--badge-primary) 55%, #48515c); border-radius: 3px; color: color-mix(in srgb, var(--choice-color) 70%, white); font: 800 .65rem/1 var(--display); }
.tg-stat-beneficiary .team-badge::after, .col-outcome .team-badge::after { width: 13px; height: 12px; }
.tg-stat-beneficiary .team-badge[data-team="det"], .col-outcome .team-badge[data-team="det"] { border-color: #1d42ba; }
.col-outcome { gap: 5px; }
.adv-tag { display: inline-block; padding: 2px 1px; color: #9ea9b6; font: 500 .55rem/1.2 var(--font); letter-spacing: .05em; }
.latest-wrap .tg-date-frame { flex-direction: column; gap: 2px; padding-block: 5px; }
.tg-date-frame > small { color: #aeb8c5; font: 500 .5rem/1 var(--font); letter-spacing: .08em; }
@media (max-width: 640px) {
  .latest-wrap .tg-main { flex-wrap: wrap; }
  .latest-wrap .tg-game-metrics { padding: 0; margin: 0; }
  .latest-wrap .tg-game-edge { align-items: flex-end; }
  .latest-wrap .tg-game-edge small { text-align: right; }
  .latest-wrap .tg-edges { column-gap: 14px; }
  .latest-wrap .tg-stat { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto; gap: 5px; min-height: 0; padding: 10px 4px; align-content: stretch; font-size: .84rem; }
  .latest-wrap .tg-status { grid-column: 1; grid-row: 1; width: 18px; height: 18px; font-size: .85rem; }
  .latest-wrap .tg-stat-name { grid-column: 1; grid-row: 1; }
  .latest-wrap .tg-stat-name strong { font-size: .9rem; }
  .latest-wrap .tg-stat-name small { margin-top: 2px; font-size: .7rem; line-height: 1.3; }
  .latest-wrap .tg-stat-name .tg-stat-callout { margin-top: 3px; font-size: .625rem; }
  .latest-wrap .tg-stat-margin { grid-column: 1 / -1; grid-row: 2; display: flex; align-items: center; justify-content: space-between; gap: 5px; margin: 0; max-width: none; text-align: left; }
  .latest-wrap .tg-stat-margin b { flex-shrink: 0; font-size: .9rem; }
  .latest-wrap .tg-stat-margin small { margin: 0; font-size: .7rem; line-height: 1.3; }
  .latest-wrap .tg-stat-margin .tg-stat-beneficiary { flex-shrink: 0; }
}
@media (max-width: 380px) {
  .latest-wrap .tg-main { gap: 8px; }
  .tg-score-line { gap: 7px; }
  .latest-wrap .tg-game-edge b { font-size: 2.5rem; }
  .latest-wrap .tg-game-edge small { font-size: .65rem; }
  .latest-wrap .tg-game-metrics .tg-rating b { font-size: 2.5rem; }
}
.margin-card .sm-explanation { margin: 8px 0 14px; color: #c2cbd5; font: 500 .88rem/1.5 var(--font); }
.pb-scale-note { margin: 18px 0; padding-left: 16px; border-left: 2px solid #ad805b; }
.pb-scale-note h4 { font-size: 1rem; color: #eab581; margin: 0 0 12px; }
.pb-scale-note p { font-size: .9rem; line-height: 1.6; color: #b7c1cc; margin: 0 0 10px; }
.pb-scale-note strong { color: var(--pb-paper); font-weight: 600; }
.ppp-takeaway { text-wrap: balance; }
.col-outcome { position: relative; --outcome-rule: #59636f; display: flex; align-items: center; justify-content: flex-start; min-height: 22px; box-sizing: border-box; margin-bottom: 14px; padding: 7px 0 0; border-radius: 0; border-top: 2px solid transparent; background: none; color: #a4adb7; font: 500 .67rem/1.3 var(--font); text-align: left; }
.col-outcome::before { content: ''; position: absolute; top: -2px; left: 0; width: 50%; height: 2px; background: var(--outcome-rule); }
.colgroup.won .col-outcome { color: color-mix(in srgb, var(--team-accent, #a4adb7) 60%, #cbd1d6); background: none; --outcome-rule: var(--team-accent, #a4adb7); }
.colgroup.lost .col-outcome { color: #a4adb7; background: none; --outcome-rule: #7d8895; }
body[data-team] .colgrid .col-lead.pos { color: color-mix(in srgb, var(--team-accent, #a4adb7) 70%, white); }
body[data-team] .colgrid .col-lead.neg { color: #d8dde5; }
body[data-team] .colgrid .colgroup { grid-template-rows: auto minmax(2.5em, auto) auto auto; }
.colgrid .col-badge { font-size: .75rem; }
body[data-team] .site-header.unified-header { align-items: center; background: linear-gradient(90deg, rgba(22,25,31,.62), rgba(22,25,31,.72)), url('headerbackground.jfif') right center / cover no-repeat, #16191f; }
body[data-team] .site-header.unified-header .site-nav { align-items: center; justify-content: flex-start; }
body[data-team] .site-header.unified-header .site-nav a { display: inline-flex; align-items: center; min-height: 48px; box-sizing: border-box; }
body[data-team] .unified-header .team-select { align-self: center; }
@media (max-width: 800px) { body[data-team] .site-header.unified-header { gap: 10px 16px; padding-left: 14px; padding-right: 14px; padding-bottom: 12px; } .brand-lockup small { font-size: .58rem; letter-spacing: .09em; } }
body[data-team] .site-header.unified-header { row-gap: 10px; }
.header-update-note { grid-column: 1 / -1; grid-row: 2; margin: 0; color: #a4adb7; font: 400 .72rem/1.5 var(--font); text-wrap: balance; }
@media (max-width: 800px) { .header-update-note { grid-row: 3; } }
.log-head { line-height: 1.5; letter-spacing: .06em; }
.log-head > :nth-child(5) { padding-right: 8px; }
.log-head > :nth-child(6) { padding-left: 8px; border-left: 1px solid var(--pb-rule); }
@keyframes winning-stat-shine { from { background-position: 100% 50%; } to { background-position: 0% 50%; } }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  body[data-team] .colgrid .colgroup.won .col-lead {
    --stat-shine-color: color-mix(in srgb, var(--team-accent, #a4adb7) 70%, white);
    background-image: linear-gradient(110deg, var(--stat-shine-color) 0%, var(--stat-shine-color) 42%, #fff 49%, var(--stat-shine-color) 56%, var(--stat-shine-color) 100%);
    background-size: 260% 100%;
    background-position: 100% 50%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    transition: filter .2s ease;
  }
  body[data-team] .colgrid .colgroup.won.in .col-lead { animation: winning-stat-shine 2.2s ease-out .15s both; }
  @media (hover: hover) { body[data-team] .colgrid .colgroup.won:hover .col-lead { filter: brightness(1.15); } }
  @media (prefers-reduced-motion: reduce) {
    body[data-team] .colgrid .colgroup.won .col-lead { background: none; color: var(--stat-shine-color); -webkit-text-fill-color: currentColor; animation: none; transition: none; filter: none; }
    body[data-team] .colgrid .colgroup.won.in .col-lead { animation: none; }
  }
}
.colgrid .cols { height: 150px; }
.colgrid .colwrap { height: auto; flex-shrink: 0; }
.colgrid .col-plot { display: flex; align-items: flex-end; position: relative; width: 100%; height: 110px; flex: 0 0 110px; }
.colgrid .col-plot .col { flex-shrink: 0; }
.colgrid .colgroup .col-plot .col-val { position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); margin: 0; white-space: nowrap; }
.colgrid .col.lose { opacity: 1; }
body[data-team] .colgrid .col.bos.lose { background: color-mix(in srgb, var(--team-accent, #a4adb7) 35%, #151a21); }
body[data-team] .colgrid .col.opp.lose { background: #555a64; }
.colgrid .colwrap:has(.col.lose) .col-val { color: #aeb7c3; }

/* Matchup lab */
body[data-team] .site-header.unified-header .site-nav a.battle-nav { color: #f18b80; font: italic 800 1.22rem/1 var(--display); text-transform: uppercase; letter-spacing: .07em; text-shadow: 0 1px 0 #291518; transition: color .18s ease, text-shadow .18s ease; }
body[data-team] .site-header.unified-header .site-nav a.battle-nav:hover,
body[data-team] .site-header.unified-header .site-nav a.battle-nav:focus-visible { color: #ffc1b5; text-shadow: 0 0 12px rgb(239 104 104 / .35); }
body[data-team] .site-header.unified-header .site-nav a.battle-nav.active { border-bottom-color: #f18b80; }
@media (prefers-reduced-motion: reduce) { body[data-team] .site-header.unified-header .site-nav a.battle-nav { transition: none; } }
body[data-team] .site-header.unified-header .site-nav a.nav-help { min-width: 44px; justify-content: center; }
.nav-help-icon { display: inline-flex; align-items: center; justify-content: center; width: 21px; height: 21px; border: 1.5px solid currentColor; border-radius: 50%; font: 600 .8rem/1 var(--font); box-sizing: border-box; }
.battle-page { max-width: 1080px; margin: 48px auto 72px; color: var(--pb-paper, #f4f2ed); }
.battle-opening { max-width: 760px; margin-bottom: 32px; }
.battle-opening .editorial-kicker, .battle-outcome .editorial-kicker { color: #ef9955; letter-spacing: .16em; font-size: .75rem; }
.battle-opening h1 { margin: 18px 0; font: 800 clamp(2.6rem, 6vw, 4.6rem)/1.04 var(--display); letter-spacing: -.025em; }
.battle-opening h1 span { color: #ef9955; }
.battle-opening > p:last-child { max-width: 600px; color: #b8c1cb; font-size: 1rem; line-height: 1.7; }
.battle-arena { border: 1px solid #48505c; background: linear-gradient(120deg, #222832, #171c24); padding: 32px; }
.battle-matchup { display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); align-items: center; gap: 20px; }
.battle-team-slot { display: grid; min-width: 0; gap: 14px; }
.battle-team-slot > span { color: #ef9955; font: 700 .72rem var(--font); letter-spacing: .15em; }
.battle-team-slot select { width: 100%; min-height: 58px; padding: 12px 36px 12px 14px; border: 1px solid #697383; border-radius: 4px; background: #111720; color: #fff; font: 600 1rem var(--font); color-scheme: dark; }
.battle-team-slot small { color: #9ba7b6; font-size: .62rem; letter-spacing: .12em; }
.battle-vs { text-align: center; color: #9da7b4; font: 800 1.6rem var(--display); }
.battle-actions { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 30px; padding-top: 24px; border-top: 1px solid #414955; }
.battle-actions strong { font-size: .95rem; }
.battle-actions p { margin: 7px 0 0; color: #acb7c4; font-size: .8rem; line-height: 1.5; }
.battle-run { display: inline-flex; justify-content: space-between; align-items: center; gap: 36px; min-height: 52px; padding: 14px 24px; border: 1px solid #ef9955; border-radius: 4px; background: #ef9955; color: #141820; font: 800 1rem var(--font); cursor: pointer; white-space: nowrap; }
.battle-run:hover { background: #ffb477; }
.battle-run:focus-visible, .battle-team-slot select:focus-visible, .battle-method summary:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.battle-error { margin: 20px 0 0; color: #ffc1bc; line-height: 1.6; }
.battle-outcome { margin-top: 34px; border-top: 3px solid #ef9955; background: #1c222b; padding: 32px; }
.battle-outcome h2 { font: 800 clamp(2rem, 5vw, 3.4rem)/1.1 var(--display); margin: 16px 0; }
.battle-takeaway { color: #c8d0da; font-size: 1rem; line-height: 1.6; text-align: center; }
.possession-callout { margin: 22px 0; padding: 14px 8px; text-align: center; background: radial-gradient(ellipse at center, color-mix(in srgb, var(--edge-color) 8%, transparent), transparent 72%); }
.possession-callout-label { display: block; color: #9fa9b7; font: 600 .65rem/1.5 var(--font); text-transform: uppercase; letter-spacing: .09em; }
.possession-callout-value { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin: 5px 0; color: var(--edge-color); }
.possession-callout-value > span { font: 600 1rem/1.3 var(--font); }
.possession-callout-value > strong { font: 800 2.6rem/1.1 var(--display); font-variant-numeric: tabular-nums; }
.possession-callout-unit { display: block; color: #bbc4d0; font: 400 .75rem/1.5 var(--font); overflow-wrap: break-word; }
.battle-shares { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 16px; align-items: center; margin-top: 32px; }
.battle-shares > div { display: grid; gap: 8px; }
.battle-shares > div:last-child { text-align: right; }
.battle-shares > div > span { color: #d0d7df; font-size: .85rem; }
.battle-shares strong { font: 800 clamp(2.6rem, 6vw, 4rem)/1 var(--display); }
.battle-shares strong small { font-size: .5em; }
.battle-result-team { display: flex; align-items: center; gap: 10px; min-width: 0; color: #d0d7df; font-size: .85rem; line-height: 1.4; }
.battle-shares > div:last-child .battle-result-team { justify-content: flex-end; }
.battle-result-team .team-badge, .team-heading .team-badge { display: grid; place-items: center; width: 38px; height: 34px; flex: 0 0 38px; border: 1px solid color-mix(in srgb, var(--badge-primary) 55%, #48515c); color: color-mix(in srgb, var(--choice-color) 70%, white); border-radius: 5px; font: 800 1rem/1 var(--display); }
.battle-result-team .team-badge[data-team="det"], .team-heading .team-badge[data-team="det"] { border-color: #1d42ba; }
.battle-share-label { color: #aab5c2; font-size: .65rem; line-height: 1.8; text-align: center; letter-spacing: .08em; }
.battle-meter { display: flex; height: 12px; margin: 20px 0; background: var(--battle-right); border: 1px solid #aab5c2; overflow: hidden; border-radius: 2px; }
.battle-meter > span { background: var(--battle-left); border-right: 2px solid #fff; box-sizing: border-box; }
.battle-sample { color: #bec7d2; font-size: .76rem; line-height: 1.9; }
.battle-limit { color: #e2c4a6; border-left: 2px solid #b48355; padding-left: 14px; margin: 20px 0 28px; font-size: .8rem; line-height: 1.7; }
.battle-breakdown { margin-top: 28px; padding-top: 24px; border-top: 1px solid #414955; }
.battle-breakdown h3 { margin: 0; font: 700 1.5rem var(--display); }
.battle-breakdown p { color: #aeb9c8; font-size: .8rem; line-height: 1.7; }
.battle-table { width: 100%; border-collapse: collapse; margin: 18px 0 4px; font-size: .85rem; }
.battle-table th, .battle-table td { padding: 16px 10px; border-bottom: 1px solid #414955; text-align: right; }
.battle-table th:first-child { text-align: left; padding-left: 0; }
.battle-table tbody th { color: #bbc5d2; font-weight: 500; line-height: 1.5; }
.battle-table thead { font-size: .7rem; letter-spacing: .06em; color: #d1d9e3; }
.battle-table td { width: 22%; font: 700 1.25rem var(--display); font-variant-numeric: tabular-nums; }
.battle-indicator-info { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; margin: -8px 0 -8px 2px; border: 0; background: transparent; color: #aab5c2; vertical-align: middle; cursor: pointer; }
.battle-indicator-info > span { display: grid; place-items: center; width: 20px; height: 20px; border: 1px solid currentColor; border-radius: 50%; font: 600 .75rem/1 var(--font); }
.battle-indicator-info:hover { color: #f0c779; }
.battle-indicator-help { max-width: 560px; }
.battle-indicator-help .battle-dialog-content { padding-bottom: 24px; }
.battle-indicator-help p, .battle-indicator-help dd { color: #bbc4d0; font: 400 .85rem/1.7 var(--font); }
.battle-indicator-help p:first-child { margin-top: 0; }
.battle-indicator-help dl { margin: 22px 0; }
.battle-indicator-help dt { padding-top: 16px; margin-top: 16px; border-top: 1px solid #343c48; color: #eeece6; font: 700 1.2rem/1.3 var(--display); }
.battle-indicator-help dd { margin: 6px 0 0; }
.battle-indicator-help .battle-help-note { color: #98a4b4; font-size: .75rem; }
.opportunity-examples { padding-left: 20px; margin: 12px 0; }
.opportunity-examples li { padding-left: 3px; margin: 10px 0; }
.opportunity-examples strong { color: #eeece6; }
#opportunity-help .battle-dialog-content { padding: 20px 24px 24px; }
#opportunity-help dl { margin: 0; }
#opportunity-help dt:first-child { margin-top: 0; padding-top: 0; padding-right: 36px; border-top: 0; }
#opportunity-help dt { font: 700 1rem/1.5 var(--font); letter-spacing: .01em; }
#opportunity-help dd, #opportunity-help dd p { color: #d0d7df; font-size: .92rem; line-height: 1.8; }
#opportunity-help dd { margin-top: 10px; }
#opportunity-help .opportunity-examples li { margin-block: 14px; }
#opportunity-help-close { position: absolute; top: 5px; right: 8px; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; background: none; color: #c5cbd3; font-size: 1.6rem; cursor: pointer; }
.battle-table th small { display: block; margin-top: 3px; color: #8f99a8; font: 400 .66rem/1.4 var(--font); }
.battle-table .battle-stat-left { --stat-color: var(--battle-left); color: var(--stat-color); }
.battle-table .battle-stat-right { --stat-color: var(--battle-right); color: var(--stat-color); }
.battle-table td > span { display: inline-block; padding: 5px 8px; border-radius: 3px; }
.battle-table .battle-stat-edge > span { background: color-mix(in srgb, var(--stat-color) 14%, transparent); box-shadow: inset 0 -2px color-mix(in srgb, var(--stat-color) 65%, transparent); }
.battle-primary-indicator { background: linear-gradient(90deg, color-mix(in srgb, var(--battle-left) 6%, transparent), color-mix(in srgb, var(--battle-right) 6%, transparent)); }
.battle-primary-indicator th:first-child { padding-left: 10px; color: #eeece6; }
.battle-primary-indicator td { font-size: 1.6rem; }
.battle-breakdown .battle-indicators-note { margin: 8px 0 0; font-size: .72rem; line-height: 1.6; }
.battle-method { margin-top: 28px; padding: 24px 0; border-top: 1px solid #414955; border-bottom: 1px solid #414955; }
.battle-method summary { color: #e8c3a2; cursor: pointer; font-size: .9rem; }
.battle-method p { max-width: 850px; color: #aeb9c8; font-size: .85rem; line-height: 1.8; }
.battle-dialog { width: min(860px, calc(100vw - 32px)); max-width: 860px; max-height: calc(100dvh - 32px); padding: 0; border: 1px solid #49505a; border-radius: 6px; background: #1c222b; color: #f1eee8; box-sizing: border-box; }
.battle-dialog[open] { display: flex; flex-direction: column; }
.battle-dialog::backdrop { background: rgb(0 0 0 / .7); }
.battle-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 24px; border-bottom: 1px solid #414955; flex-shrink: 0; }
.battle-dialog-head h2 { margin: 0; font: 700 1.5rem var(--display); text-transform: none; }
.battle-dialog-head h2:focus { outline: none; }
.battle-showing-result > .battle-dialog-head { justify-content: flex-end; padding-top: 4px; padding-bottom: 0; border-bottom: 0; }
.battle-showing-result > .battle-dialog-head h2 { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.battle-showing-result > .battle-dialog-content { padding-top: 0; }
.battle-showing-result .possession-callout { margin: 0 0 16px; padding-top: 4px; padding-bottom: 8px; }
.battle-showing-result .battle-shares { margin-top: 20px; }
.battle-showing-result .battle-breakdown { margin-top: 18px; padding-top: 8px; }
.battle-showing-result .battle-table { margin-top: 8px; margin-bottom: 0; }
.battle-showing-result .battle-table tbody tr:last-child > * { border-bottom: 0; }
.battle-dialog-head button { border: 0; background: none; color: #c5cbd3; min-width: 44px; min-height: 44px; font-size: 1.7rem; cursor: pointer; }
.battle-dialog-content { overflow-y: auto; padding: 20px 24px; min-height: 0; overscroll-behavior: contain; }
.battle-picked { color: #aeb9c8; margin: 0 0 18px; font-size: .9rem; line-height: 1.5; }
.battle-team-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.battle-team-grid button { display: flex; align-items: center; gap: 12px; min-width: 0; text-align: left; min-height: 54px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--choice-color) 45%, #424b57); border-left: 3px solid var(--choice-color); border-radius: 3px; background: linear-gradient(115deg, color-mix(in srgb, var(--choice-color) 20%, #202731), color-mix(in srgb, var(--choice-color) 5%, #202731)); color: #f1eee8; font: 500 .82rem/1.4 var(--font); cursor: pointer; }
.battle-team-grid button > span { min-width: 34px; color: color-mix(in srgb, var(--choice-color) 70%, white); font: 700 .72rem var(--font); }
.battle-team-grid button > .team-badge { display: grid; place-items: center; width: 38px; min-width: 38px; height: 34px; flex-shrink: 0; border: 1px solid color-mix(in srgb, var(--badge-primary) 55%, #48515c); border-radius: 5px; font: 800 1rem/1 var(--display); }
.battle-team-grid button > .team-badge[data-team="det"] { border-color: #1d42ba; }
.battle-team-grid button:hover:not(:disabled), .battle-team-grid button:focus-visible { background: color-mix(in srgb, var(--choice-color) 25%, #202731); border-color: var(--choice-color); }
.battle-team-grid button:disabled { opacity: .3; cursor: default; }
.battle-dialog button:focus-visible { outline: 2px solid #e3b28b; outline-offset: 2px; }
.battle-dialog-footer { padding: 14px 24px; border-top: 1px solid #414955; flex-shrink: 0; }
.battle-dialog-footer p { color: #9da8b6; font: 400 .72rem/1.5 var(--font); margin: 0; }
.battle-dialog-footer > div:not([hidden]) { display: flex; gap: 8px; margin-top: 12px; }
.battle-dialog-footer button { min-height: 42px; padding: 9px 14px; border: 1px solid #56606d; border-radius: 3px; background: #272e38; color: #f1eee8; font: 600 .8rem var(--font); cursor: pointer; }
.battle-dialog-footer #battle-rerun { background: #e0ac80; color: #16191f; border-color: #e0ac80; }
.battle-dialog .battle-outcome { background: none; border: 0; padding: 0; margin: 0; }
.battle-result-card .tg-latest-card { margin: 0; }
.tg-dual-result .tg-scoreboard { grid-column: 1 / -1; grid-row: 1; justify-self: center; margin-top: 0; }
.latest-wrap .tg-dual-result .tg-dual-metrics { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 12px 20px; margin-top: 18px; }
.tg-team-metrics { display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 0; }
.tg-metric-team { display: flex; align-items: center; gap: 7px; margin-bottom: 12px; color: var(--pb-paper); font: 600 .78rem/1.3 var(--font); }
.tg-metric-team .team-badge { display: grid; place-items: center; width: 29px; height: 27px; border: 1px solid color-mix(in srgb, var(--badge-primary) 55%, #48515c); border-radius: 3px; color: color-mix(in srgb, var(--choice-color) 70%, white); font: 800 .8rem/1 var(--display); }
.tg-metric-team .team-badge[data-team="det"] { border-color: #1d42ba; }
.tg-team-opportunities { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.tg-team-opportunities b { font: 700 1.2rem/1.2 var(--font); font-variant-numeric: tabular-nums; }
.tg-team-opportunities small { color: #b7c1cc; font: 400 .65rem/1.35 var(--font); }
.tg-team-opportunities .edge-positive { color: var(--pb-positive); }
.tg-team-opportunities .edge-negative { color: var(--pb-negative); }
.tg-dual-simulation { grid-column: 1 / -1; color: #efc57e; text-align: center; font: 600 .58rem/1.3 var(--font); letter-spacing: .06em; text-transform: uppercase; }
.battle-model-summary { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; color: #b7c1cc; font: 400 .7rem/1.5 var(--font); }
.battle-model-summary > div, .battle-model-summary > div > span { display: flex; align-items: center; gap: 8px; }
.battle-model-summary > div { gap: 18px; }
.battle-model-summary .team-badge { display: grid; place-items: center; width: 27px; height: 25px; border: 1px solid color-mix(in srgb, var(--badge-primary) 55%, #48515c); border-radius: 3px; color: color-mix(in srgb, var(--choice-color) 70%, white); font: 800 .75rem/1 var(--display); }
.battle-model-summary .team-badge[data-team="det"] { border-color: #1d42ba; }
.battle-model-summary strong { color: var(--pb-paper); font-variant-numeric: tabular-nums; }
.tg-latest-card .tg-stat { position: relative; overflow: hidden; isolation: isolate; padding-inline: 10px; background: linear-gradient(100deg, color-mix(in srgb, var(--stat-team-color, #8792a0) 4%, transparent), color-mix(in srgb, var(--stat-team-color, #8792a0) 18%, transparent)); border-bottom-color: color-mix(in srgb, var(--stat-team-color, #8792a0) 25%, #303640); }
.tg-latest-card .tg-stat-name, .tg-latest-card .tg-stat-margin > b { position: relative; z-index: 1; }
.tg-latest-card .tg-stat .tg-stat-margin { color: #eef1f4; }
.tg-latest-card .tg-stat .tg-stat-margin > b { color: var(--pb-orange); font: 700 1.45rem/1.05 var(--display); letter-spacing: .01em; }
.tg-latest-card .tg-stat .tg-stat-name .tg-stat-callout { color: color-mix(in srgb, var(--stat-team-color, #8792a0) 55%, #f0f3f6); }
.tg-latest-card .tg-stat-margin .tg-stat-beneficiary:has(.team-badge) { position: absolute; inset: 0; display: block; margin: 0; pointer-events: none; }
.tg-latest-card .tg-stat-beneficiary .team-badge { position: absolute; right: -15px; top: -8px; width: auto; height: calc(100% + 16px); aspect-ratio: 1; border-width: 2px; border-radius: 8px; font-size: 3.3rem; opacity: .24; transform: rotate(-8deg); mask-image: linear-gradient(90deg, transparent, #000 35%); }
.tg-latest-card .tg-stat-beneficiary .team-badge::after { width: 62%; height: 58%; }
.tg-latest-card .tg-stat-active { box-shadow: inset 2px 0 color-mix(in srgb, var(--stat-team-color, #8792a0) 60%, white); }
.battle-dialog .battle-outcome h2 { text-transform: none; font-size: 2.2rem; }
.battle-dialog .battle-shares strong { font-size: 2.8rem; }
.battle-data-details { margin: 0 0 24px; font-size: .8rem; color: #acb7c4; }
.battle-data-details summary { cursor: pointer; padding: 4px 0; }
.battle-loading { padding: 30px 0 36px; text-align: center; }
.battle-loading > p { color: #aeb9c8; font-size: .85rem; }
.battle-loading .battle-shares { margin: 0 0 28px; text-align: left; }
.battle-loading .battle-shares strong { font-variant-numeric: tabular-nums; }
.battle-loading progress { display: block; width: 100%; height: 6px; border: 0; border-radius: 0; background: #39414c; accent-color: #d6aa82; }
.battle-loading progress::-webkit-progress-bar { background: #39414c; }
.battle-loading progress::-webkit-progress-value { background: #d6aa82; }
.battle-loading progress::-moz-progress-bar { background: #d6aa82; }
.battle-loading #battle-progress-count { font-size: .75rem; font-variant-numeric: tabular-nums; }
/* One result and one upcoming matchup; touch, buttons, and arrow keys share the same track. */
.game-carousel { min-width: 0; }
.game-carousel-track { display: flex; width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; border-radius: 4px; }
.game-carousel-track::-webkit-scrollbar { display: none; }
.game-carousel-track:focus-visible { outline: 2px solid #c5a17e; outline-offset: 4px; }
.game-carousel-slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; box-sizing: border-box; }
.game-carousel-swipe { display: none; }
@media (max-width: 700px) {
  .game-carousel-slide { position: relative; }
  .game-carousel-swipe { position: absolute; z-index: 2; right: 1px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 26px; height: 48px; padding: 0; border: 1px solid rgb(229 184 113 / .25); border-right: 0; border-radius: 16px 0 0 16px; background: linear-gradient(90deg, rgb(22 28 35 / .7), #262b31); color: #e6bd76; font: 400 1.8rem/1 var(--font); cursor: pointer; }
  .game-carousel-swipe:focus-visible { outline: 2px solid #e6bd76; outline-offset: -3px; }
}
.game-carousel-slide .takeaway-game { height: 100%; box-sizing: border-box; margin: 0; }
.game-carousel-slide:first-child .takeaway-game { height: auto; }
.game-carousel-slide .next-game-card { display: flex; flex-direction: column; overflow: hidden; }
.game-carousel-slide .next-game-card.has-result { padding: 0; border: 0; background: transparent; }
.next-game-card.has-result > .tg-top, .next-game-card.has-result > .next-game-date, .next-game-card.has-result > .next-game-matchup, .next-game-card.has-result > .next-game-opponent { display: none; }
.next-game-card.has-result .next-game-prediction { display: block; padding: 0; margin: 0; }
.next-game-card.has-result .tg-latest-card { height: auto; min-height: 100%; }
.latest-wrap .tg-rating > .tg-simulation-tag { color: #efc57e; font: 600 .58rem/1.3 var(--font); text-transform: uppercase; letter-spacing: .06em; }
.next-game-card.has-result .is-battling { opacity: .55; pointer-events: none; }
.game-carousel-nav #next-game-run { display: inline-block; margin: 0; min-height: 44px; padding: 12px 16px; }
.game-carousel-nav [hidden] { display: none !important; }
.next-game-card > .tg-top, .next-game-card > .next-game-date, .next-game-card > .next-game-matchup, .next-game-card > .next-game-opponent, .next-game-card > .next-game-run { flex-shrink: 0; }
.next-game-card .next-game-date { margin: 10px 0 6px; font-size: .75rem; }
.next-game-card .next-game-matchup { margin: 6px 0; font-size: 2rem; }
.next-game-card .next-game-opponent { margin: 4px 0 12px; font-size: .8rem; }
.next-game-card .next-game-prediction { display: grid; grid-template-rows: auto minmax(54px, 1fr) auto; flex: 1; min-height: 0; padding-top: 10px; overflow: auto; }
.next-game-card .next-game-scoreline { gap: 8px 14px; padding-bottom: 8px; }
.next-game-card .next-game-scoreline .log-rating, .next-game-card .next-game-scoreline .log-extra { font-size: 1.25rem; }
.next-game-card .next-game-columns { width: 100%; min-height: 0; margin: 8px auto 6px; padding-top: 26px; }
.next-game-card .next-game-column { min-height: 0; }
.next-game-card .next-game-column-plot { height: auto; min-height: 0; flex: 1; }
.next-game-card .next-game-column-bar strong { font-size: 1.6rem; }
.next-game-card .possession-callout { margin: 6px 0 0; padding: 4px; }
.next-game-card .possession-callout-value { margin: 3px 0; gap: 8px; }
.next-game-card .possession-callout-value > strong { font-size: 1.7rem; }
.next-game-card .possession-callout-value > span { font-size: .85rem; }
.next-game-card .possession-callout-unit { font-size: .65rem; }
.next-game-card > .next-game-run { min-height: 42px; margin-top: 12px; padding-block: 9px; }
body[data-team]:not(.neutral-shell) .score-marks .on { color: #83bd99; filter: none; }
body[data-team]:not(.neutral-shell) .score-marks .off { color: #db8d86; }
body[data-team]:not(.neutral-shell) .score-marks .tie { color: #bdad83; }
body[data-team]:not(.neutral-shell) .score-marks .pend { color: #58626e; opacity: 1; }
.game-carousel-nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.game-carousel-nav button { min-height: 44px; border: 1px solid #3c4550; border-radius: 3px; padding: 10px 15px; background: #171d25; color: #aeb9c7; cursor: pointer; font: 500 .78rem var(--font); }
.game-carousel-nav button[aria-pressed="true"] { color: #f1eee8; border-color: #707b88; }
.game-carousel-nav button:hover { color: #fff; background: #252e39; }
.game-carousel-nav button.game-carousel-cta { background: #e4ad7c; border-color: #e4ad7c; color: #16191f; font-weight: 700; }
.game-carousel-nav button.game-carousel-cta:hover { background: #f0be93; border-color: #f0be93; }
.game-carousel-cta[data-sim-prompt="true"] { animation: next-game-invite 4.5s ease-in-out infinite; }
.game-carousel-cta[data-sim-prompt="true"]:hover, .game-carousel-cta[data-sim-prompt="true"]:focus-visible { animation: none; }
@keyframes next-game-invite { 0%, 78%, 100% { transform: translateY(0); } 84% { transform: translateY(-4px); } 89% { transform: translateY(0); } 93% { transform: translateY(-2px); } 97% { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .game-carousel-cta[data-sim-prompt="true"] { animation: none; } }
.game-carousel-nav button:focus-visible, .next-game-run:focus-visible { outline: 2px solid #c5a17e; outline-offset: 3px; }
.next-game-date { color: #b1bdca; margin: 22px 0 12px; font-size: .8rem; line-height: 1.5; }
.next-game-matchup { display: flex; align-items: center; gap: 18px; margin: 12px 0 6px; font: 800 2.7rem/1 var(--display); }
.next-game-matchup small { font: 500 .85rem var(--font); color: #9da8b6; }
.next-game-opponent { color: #c2cbd5; font-size: .9rem; margin: 12px 0 22px; }
.next-game-prediction { border-top: 1px solid #39414b; padding-top: 18px; min-height: 170px; }
.next-game-prediction > p:first-child { margin-top: 0; }
.next-game-prediction p { color: #b6c1ce; font-size: .82rem; line-height: 1.6; }
.next-game-prediction .next-game-pick { color: #f1eee8; font: 700 1.5rem/1.2 var(--display); }
.next-game-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; max-width: 270px; margin: 36px auto 12px; padding-top: 30px; }
.next-game-column { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.next-game-column-plot { display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 130px; border-bottom: 1px solid #53606d; }
.next-game-column-bar { position: relative; width: 64px; max-width: 100%; height: var(--column-share); background: linear-gradient(0deg, color-mix(in srgb, var(--column-color) 65%, #171d25), var(--column-color)); border-top: 1px solid color-mix(in srgb, var(--column-color) 70%, white); box-sizing: border-box; animation: prediction-column-grow .5s ease-out both; }
.next-game-column-bar strong { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); color: var(--column-color); white-space: nowrap; font: 800 2.1rem/1 var(--display); font-variant-numeric: tabular-nums; }
.next-game-column-bar strong small { font-size: .5em; }
.next-game-column > span { margin-top: 10px; color: #c2cbd5; font: 600 .72rem var(--font); letter-spacing: .06em; }
.next-game-reason { text-align: center; }
.battle-takeaway, .next-game-reason { max-width: 100%; min-width: 0; white-space: normal; overflow-wrap: break-word; overflow-x: visible; }
@keyframes prediction-column-grow { from { height: 0; } to { height: var(--column-share); } }
@media (prefers-reduced-motion: reduce) { .next-game-column-bar { animation: none; } }
.next-game-prediction .next-game-basis { color: #929fac; font-size: .68rem; }
.next-game-run { display: block; margin: 20px auto 0; min-width: 148px; min-height: 46px; padding: 12px 22px; border: 1px solid #efbd91; border-radius: 4px; background: linear-gradient(135deg, #f1c59d, #d99b66); color: #171b22; font: 700 .85rem var(--font); cursor: pointer; box-shadow: inset 0 1px 0 rgb(255 255 255 / .3), 0 3px 12px rgb(0 0 0 / .18); }
.next-game-run:hover { background: linear-gradient(135deg, #ffdab8, #e6ac7c); }
.next-game-run:disabled { cursor: wait; opacity: .6; }
.log-row.log-upcoming { padding-block: 14px; background: linear-gradient(100deg, rgb(224 172 128 / .11), rgb(224 172 128 / .025)); box-shadow: inset 3px 0 #d8ad72; }
.log-upcoming .log-date small { display: block; margin: 0 0 4px; color: #e3c28a; font-size: .6rem; letter-spacing: .04em; white-space: nowrap; }
.log-upcoming-matchup { display: flex; align-items: center; gap: 9px; font-size: .85rem; }
.log-upcoming-matchup > span { color: #939cab; font-size: .75rem; }
.game-log-head { align-items: center; justify-content: space-between; gap: 12px; }
.log-row[hidden] { display: none; }
.log-pagination { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.log-pagination > span { color: var(--pb-muted); font: 400 .72rem/1.5 var(--font); }
.log-pagination > div:not([hidden]) { display: flex; gap: 8px; }
.log-pagination button { min-height: 40px; padding: 9px 12px; border: 1px solid #424b56; border-radius: 3px; background: #171d25; color: #d0d7df; font: 500 .75rem/1.4 var(--font); cursor: pointer; }
.log-pagination button:hover { background: #242d37; border-color: #74808f; }
.log-pagination button:focus-visible { outline: 2px solid #e0b686; outline-offset: 3px; }
.game-log-head .game-log-sim { display: inline-block; margin: 0; width: 150px; min-width: 150px; min-height: 40px; padding: 9px 10px; font-size: .75rem; white-space: nowrap; }
.log-sim-result { display: contents; }
.log-sim-score { display: flex; flex-direction: column; justify-content: center; gap: 4px; height: 52px; }
.log-sim-label { color: #d8bd94; font: 600 .6rem/1.4 var(--font); text-transform: uppercase; letter-spacing: .06em; }
.log-upcoming .log-date, .log-upcoming .log-sim-score { position: relative; line-height: 20px; }
.log-upcoming .log-date small, .log-upcoming .log-sim-label { position: absolute; left: 0; margin: 0; bottom: calc(50% + 14px); white-space: nowrap; }
.log-upcoming .log-date small { bottom: calc(100% + 4px); }
.log-sim-score .sim-win { color: #80d899; }
.log-sim-score .sim-loss { color: #f08787; }
.next-game-scoreline { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid #343d48; text-align: left; }
.next-game-scoreline .log-sim-score { height: auto; font-size: 1.05rem; }
.next-game-scoreline .log-rating, .next-game-scoreline .log-extra { font: 700 1.45rem/1.2 var(--display); font-variant-numeric: tabular-nums; text-align: right; }
.next-game-scoreline .log-rating { color: #e6bd76; }
.next-game-scoreline .log-rating::before, .next-game-scoreline .log-extra::before { display: block; margin-bottom: 6px; color: #9da8b6; font: 500 .6rem/1.4 var(--font); }
.next-game-scoreline .log-rating::before { content: 'Rating'; }
.next-game-scoreline .log-extra::before { content: 'Opportunities'; }
.next-game-scoreline .log-edges { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 8px; }
@media (max-width: 640px) { .log-sim-result .log-edges { grid-column: 1 / -1; display: flex; align-items: center; justify-content: flex-end; gap: 8px; height: 16px; } }
.simulation-dots { display: inline-flex; gap: 4px; margin-left: 4px; vertical-align: middle; }
.simulation-dots i { width: 4px; height: 4px; border-radius: 50%; background: #d8ad72; animation: simulation-dot 1s ease-in-out infinite; }
.simulation-dots i:nth-child(2) { animation-delay: .15s; }
.simulation-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes simulation-dot { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .simulation-dots i { animation: none; } }
.next-game-run, .battle-dialog-footer #battle-rerun { position: relative; overflow: hidden; isolation: isolate; }
.next-game-run::after, .battle-dialog-footer #battle-rerun::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 25%, rgb(255 255 255 / .12) 40%, rgb(255 255 255 / .55) 50%, rgb(255 255 255 / .12) 60%, transparent 75%); transform: translateX(-140%); }
.next-game-run:not(:disabled)::after, .battle-dialog-footer #battle-rerun:not(:disabled)::after { animation: team-choice-shine 1.1s ease-out .2s both; }
.next-game-run:hover:not(:disabled)::after, .next-game-run:focus-visible::after, .battle-dialog-footer #battle-rerun:hover:not(:disabled)::after, .battle-dialog-footer #battle-rerun:focus-visible::after { animation: team-choice-hover-shine .7s ease-out both; }
@media (prefers-reduced-motion: reduce) { .next-game-run::after, .battle-dialog-footer #battle-rerun::after { display: none; animation: none !important; } }
.next-game-source { color: #8e9ba9; font-size: .64rem; line-height: 1.6; margin: 14px 0 0; }
.next-game-source a { color: #aab7c5; }
.next-game-empty p { color: #aab7c5; font-size: .9rem; line-height: 1.6; }
body:has(.battle-dialog[open]) { overflow: hidden; }
/* Team colors carry the interaction; the shine makes one pass, then rests. */
.battle-team-grid button, .team-picker-choice { position: relative; overflow: hidden; isolation: isolate; transition: background-color .18s, border-color .18s, box-shadow .18s; }
.battle-team-grid button::after, .team-picker-choice::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 25%, rgb(255 255 255 / .03) 38%, rgb(255 255 255 / .17) 49%, rgb(255 255 255 / .03) 60%, transparent 73%); transform: translateX(-140%); }
.battle-team-grid button:not(:disabled) { animation: team-choice-enter .24s ease-out var(--entry-delay, 0ms) backwards; }
.battle-team-grid button:not(:disabled)::after { animation: team-choice-shine .85s ease-out calc(var(--entry-delay, 0ms) + .15s) both; }
.battle-team-grid button:hover:not(:disabled), .battle-team-grid button:focus-visible, .team-picker-choice:hover, .team-picker-choice:focus-visible { box-shadow: inset 0 1px 0 rgb(255 255 255 / .1), 0 0 14px color-mix(in srgb, var(--choice-color) 14%, transparent); }
.battle-team-grid button:hover:not(:disabled)::after, .battle-team-grid button:focus-visible::after, .team-picker-choice:hover::after, .team-picker-choice:focus-visible::after { animation: team-choice-hover-shine .65s ease-out both; }
.battle-team-grid button:active:not(:disabled), .team-picker-choice:active { filter: brightness(1.15); }
.battle-dialog .battle-outcome { animation: battle-result-enter .22s ease-out; }
@keyframes team-choice-enter { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes team-choice-shine { from { transform: translateX(-140%); } to { transform: translateX(140%); } }
@keyframes team-choice-hover-shine { from { transform: translateX(-140%); } to { transform: translateX(140%); } }
@keyframes battle-result-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .battle-team-grid button, .team-picker-choice, .battle-dialog .battle-outcome { animation: none !important; transition: none; }
  .battle-team-grid button::after, .team-picker-choice::after { display: none; animation: none !important; }
}
@media (max-width: 640px) {
  .battle-dialog { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); }
  .battle-dialog-head, .battle-dialog-footer { padding: 12px 16px; }
  .battle-dialog-content { padding: 16px; }
  .battle-team-grid button { flex-direction: column; align-items: flex-start; gap: 4px; padding: 8px; font-size: .76rem; overflow-wrap: anywhere; }
  .battle-page { margin-top: 28px; }
  .battle-arena, .battle-outcome { padding: 22px 16px; }
  .battle-matchup { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .battle-vs { font-size: 1.2rem; }
  .battle-team-slot { gap: 10px; }
  .battle-team-slot small { display: none; }
  .battle-actions { flex-direction: column; align-items: stretch; gap: 18px; }
  .battle-shares { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .battle-share-label { grid-column: 1 / -1; grid-row: 2; }
  .battle-table { font-size: .75rem; }
  .battle-table th, .battle-table td { padding: 14px 6px; }
}

/* Share artwork has its own fixed canvas; this dialog only scales the preview. */
.tg-share-actions { grid-column: 1 / -1; display: flex; justify-content: center; margin-top: 16px; width: 100%; }
.tg-share-actions .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: min(100%, 260px); padding: 12px 24px; min-height: 46px; font-size: .94rem; font-weight: 750; color: #1a1711; background: #d8b571; border: 1px solid #e9c98c; border-radius: 6px; box-shadow: 0 3px 12px #0003; }
.tg-share-actions .btn:hover { background: #e7c589; color: #1a1711; border-color: #f1d8a9; }
.tg-share-actions .btn svg { width: 20px; height: 20px; flex: 0 0 20px; }
.share-dialog { width: min(650px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 20px; color: #f1eee8; background: #171d26; border: 1px solid #424b58; border-radius: 10px; overflow: auto; scrollbar-width: thin; scrollbar-color: #8f784e #171d26; }
.share-dialog::backdrop { background: #06090dd9; backdrop-filter: blur(5px); }
.share-preview { text-align: center; }
.share-preview img { display: block; width: 100%; max-width: 540px; height: auto; margin: 0 auto; border: 1px solid #35404c; }
.share-preview img:not([src]) { display: none; }
.share-status { color: #c3ccda; margin: 10px 0 0; font-size: .85rem; }
.share-status:empty { display: none; }
.share-dialog footer { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: 540px; margin: 16px auto 0; }
.share-dialog footer .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 10px 8px; font-size: .8rem; white-space: nowrap; }
.share-dialog footer svg { width: 19px; height: 19px; flex: 0 0 19px; }
.share-dialog button:disabled { opacity: .5; cursor: wait; }
.share-dialog [hidden] { display: none !important; }
.share-link-note { margin: 12px 0; color: #b8c5d6; font-size: .8rem; line-height: 1.5; }
.share-link-fallback { width: 100%; box-sizing: border-box; padding: 10px; margin-bottom: 16px; color: #f1eee8; background: #111720; border: 1px solid #47505d; }

@media (max-width: 430px) { .share-dialog footer { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Keep desktop margins beneath their labels, clear of the team watermark. */
@media (min-width: 641px) {
  .latest-wrap .tg-latest-card .tg-stat { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto; align-items: stretch; gap: 6px; min-height: 88px; padding-block: 10px; box-sizing: border-box; }
  .latest-wrap .tg-latest-card .tg-stat-name { grid-column: 1; grid-row: 1; }
  .latest-wrap .tg-latest-card .tg-stat-margin { grid-column: 1; grid-row: 2; display: block; margin: 0; max-width: none; text-align: left; }
}