/* 單場賽事頁 B「比分主舞台」：比分 → 拆解／三幕 → 完整事件 ｜ 人物／數據／接下來 → 陣容（收合）。
   只用品牌 CIS 變數；紅色只用在主舞台左側 3px 強調線（brand-cis 4.1 第 4 項）。 */

.wr { --wr-gap: 16px; --wr-radius: 10px; }
.wr .wr-card { margin-top: 0; padding: 16px 18px 18px; border: 1px solid var(--line); border-radius: var(--wr-radius); background: var(--panel); min-width: 0; }
.wr .wr-card > .block-head { margin: -2px 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.wr .wr-card > .block-head .muted { color: var(--muted); }
.wr .wr-card .match-panel { background: var(--bg); }
.wr > :is(.summary, .pre-match, .wr-grid, .wr-form, .wr-meetings, .wr-next, .wr-rosters, .wr-recap) { margin-top: var(--wr-gap); }

/* ---------- 1. 比分主舞台 ---------- */
.wr .wr-stage { position: relative; margin: 20px 0 0; padding: 0; overflow: hidden; background: var(--panel); border-radius: var(--wr-radius); }
.wr .wr-stage::before { content: ""; position: absolute; left: 0; top: 0; width: 3px; height: 72px; background: var(--red); }
.wr .wr-kicker { display: flex; justify-content: space-between; align-items: center; gap: 8px 16px; flex-wrap: wrap; padding: 16px 24px 0; }
.wr .wr-kicker .match-competition { justify-content: flex-start; gap: 8px; font-weight: 700; }
.wr .wr-kicker .match-competition a { color: var(--gold); }
.wr .wr-kicker .match-time { margin: 0; text-align: right; }
.wr .wr-kicker .match-time time { color: var(--text); font-weight: 700; }
.wr .match-title { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wr .match-duel { padding: 18px 24px 22px; max-width: 760px; margin: 0 auto; }
.wr .duel-team { font-size: 22px; gap: 8px; }
.wr .duel-team .badge { width: 88px; height: 88px; }
.wr .duel-team small { font-size: 13px; }
.wr .duel-score strong { font-size: clamp(48px, 7vw, 88px); letter-spacing: .01em; }
.wr .duel-score .match-status { align-self: center; padding: 3px 14px; font-size: 13px; font-weight: 700; border-color: var(--gold); }
.wr .duel-score .duel-vs { color: var(--muted); font-size: clamp(32px, 5vw, 52px); }

.wr .wr-insights { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1.2fr) minmax(0, 1fr); margin: 0; border-top: 1px solid var(--line); }
.wr .wr-insights:empty { display: none; }
.wr .wr-insight { padding: 14px 24px 16px; min-width: 0; }
.wr .wr-insight + .wr-insight { border-left: 1px solid var(--line); }
.wr .wr-insight dt { color: var(--muted); font-size: 12px; font-weight: 700; margin-bottom: 4px; }
.wr .wr-insight dd { margin: 0; color: var(--text); font-size: 15px; font-weight: 700; line-height: 1.55; overflow-wrap: anywhere; }
.wr .wr-insight.is-lead dd { font-size: 16px; }
.wr .wr-insights:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
.wr .wr-insights:has(> :nth-child(2):last-child) { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
.wr .wr-stage .feature-callout { margin: 0; padding: 0 24px 16px; }

/* ---------- 版面：桌機兩欄（主欄＝比分怎麼來；右欄＝誰、數據、接下來） ---------- */
.wr .wr-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--wr-gap); align-items: start; }
.wr .wr-main, .wr .wr-side { display: flex; flex-direction: column; gap: var(--wr-gap); min-width: 0; }
.wr .wr-grid.is-single, .wr .wr-grid:not(:has(> .wr-side > *)) { grid-template-columns: minmax(0, 1fr); }
.wr .wr-grid.is-single .wr-main:not(:has(> :not([hidden]))) { display: none; }
.wr .wr-grid.is-single .wr-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }

/* ---------- 2. 比分拆解 ---------- */
.wr .wr-breakdown .table-scroll { margin: 0; }
.wr .wr-breakdown .linescore { width: 100%; }
/* 足球半場、NBA 四節欄位少，手機不必卡內左右滑；MLB 逐局維持 site.css 的 560px 讓表格在卡內捲動 */
.wr:is(.wr-football, .wr-basketball) .wr-breakdown .linescore { min-width: 0; }
.wr .wr-breakdown .linescore :is(th, td) { padding: 10px 8px; text-align: center; font-variant-numeric: tabular-nums; }
.wr .wr-breakdown .linescore .c-team { text-align: left; }
.wr .wr-breakdown .linescore td:last-child, .wr .wr-breakdown .wr-total { color: var(--gold); font-weight: 800; font-size: 17px; }

/* ---------- 3. 決勝三幕 ---------- */
.wr .wr-act-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; list-style: none; margin: 0; padding: 0; }
.wr .wr-act { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); min-width: 0; }
.wr .wr-act-mark { color: var(--gold); font: 700 22px/1.1 var(--font-num, inherit); }
.wr .wr-act b { color: var(--text); font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
.wr .wr-act > span:last-child { color: var(--muted); font-size: 13px; line-height: 1.5; }

/* ---------- 4. 完整比賽事件 ---------- */
.wr .wr-events { list-style: none; margin: 0; padding: 0; }
.wr .wr-event { display: grid; grid-template-columns: 64px auto minmax(0, 1fr); align-items: center; gap: 10px; padding: 8px 0 8px 10px; border-bottom: 1px solid var(--line); border-left: 3px solid transparent; }
.wr .wr-event:last-child { border-bottom: 0; }
.wr .wr-event.is-goal, .wr .wr-event.is-key { border-left-color: var(--gold); background: var(--panel-2); }
.wr .wr-event time { color: var(--gold); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wr .wr-event-main { display: flex; flex-direction: column; min-width: 0; }
.wr .wr-event-main b { color: var(--text); font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
.wr .wr-event-main small { color: var(--muted); font-size: 12px; line-height: 1.5; }
.wr .wr-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 52px; padding: 2px 8px; border: 1px solid var(--line); border-radius: 99px; color: var(--muted); font-size: 12px; font-weight: 700; white-space: nowrap; }
.wr .wr-chip:is(.chip-goal, .chip-key, .chip-run) { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); }
/* 牌卡：用卡片形狀的小色塊表示，文字維持高對比白字 */
.wr .wr-chip:is(.chip-yellow, .chip-red) { color: var(--text); }
.wr .wr-chip:is(.chip-yellow, .chip-red)::before { content: ""; width: 7px; height: 10px; margin-right: 5px; border-radius: 1px; background: #ffd24a; }
.wr .wr-chip.chip-red::before { background: #ff5d65; }

/* ---------- 右欄：關鍵人物 ---------- */
.wr .wr-people-list { list-style: none; margin: 0; padding: 0; }
.wr .wr-people-list li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.wr .wr-people-list li:last-child { border-bottom: 0; }
.wr .wr-rank { color: var(--gold); font: 700 20px/1 var(--font-num, inherit); }
.wr .wr-person { display: flex; flex-direction: column; min-width: 0; }
.wr .wr-person b { color: var(--text); font-size: 15px; overflow-wrap: anywhere; }
.wr .wr-person small { color: var(--muted); font-size: 12px; line-height: 1.5; }
.wr .wr-people-list strong { color: var(--gold); font: 700 20px/1 var(--font-num, inherit); white-space: nowrap; }

/* ---------- 兩隊數據對照 ---------- */
.wr .wr-stats .match-comparisons { max-width: none; }
.wr .wr-stats .comparison { margin: 0 0 12px; }
.wr .wr-stats .comparison:last-child { margin-bottom: 0; }
.wr .wr-stats .comparison > div:first-child { margin-bottom: 5px; }
.wr .wr-stats .comparison > div:first-child span { color: var(--muted); font-size: 13px; }
.wr .wr-stats .comparison b { font-variant-numeric: tabular-nums; }
.wr .wr-stats .comparison-bar { height: 6px; }

/* ---------- 排名近況、交手、前後賽程：全寬兩欄（卡片矮而寬） ---------- */
.wr :is(.wr-next, .wr-form) .match-columns { gap: 10px; }
.wr :is(.wr-next, .wr-form) .match-panel { padding: 12px 14px; }
.wr .wr-next .match-panel h3 { font-size: 15px; margin-bottom: 4px; }
.wr .wr-next .match-panel h4 { margin: 10px 0 6px; }
.wr .wr-meetings .match-empty, .wr .wr-next .match-empty { padding: 6px 0 0; }

/* ---------- 陣容總覽：先發直接看，替補收合 ---------- */
.wr .wr-rosters .match-panel h3 { font-size: 16px; }
.wr .wr-rosters .roster-list li { padding: 6px 0; }
.wr .wr-rosters .roster-list em { color: var(--muted); font-size: 12px; font-style: normal; white-space: nowrap; }
.wr .wr-rosters .roster-list b { min-width: 0; overflow-wrap: anywhere; }
.wr .wr-rosters .jersey { min-width: 26px; color: var(--gold); font-variant-numeric: tabular-nums; text-align: right; }
.wr .wr-more { margin-top: 12px; border: 1px solid var(--line); border-radius: 8px; }
.wr .wr-more > summary { cursor: pointer; padding: 10px 12px; color: var(--text); font-size: 14px; font-weight: 700; list-style-position: inside; }
.wr .wr-more > summary:hover { color: var(--gold-hover, var(--gold)); }
.wr .wr-more > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 8px; }
.wr .wr-more[open] > summary { border-bottom: 1px solid var(--line); }
.wr .wr-more .roster-list { padding: 0 12px 6px; }

.wr .wr-recap .summary { margin: 0; border: 0; padding: 0; background: none; }

/* ---------- 平板與手機：單欄，依重要性重排 ---------- */
@media (max-width: 1023px) {
  .wr .wr-grid, .wr .wr-grid.is-single { display: flex; flex-direction: column; align-items: stretch; }
  .wr .wr-main, .wr .wr-side, .wr .wr-grid.is-single .wr-side { display: contents; }
  /* 卡片改成直接的 flex 子項；固定寬度，避免逐局表（min-width 560px）把卡片撐出手機畫面 */
  .wr .wr-grid > * > .wr-card { width: 100%; max-width: 100%; box-sizing: border-box; margin-inline: 0; }
  .wr .wr-breakdown { order: 1; }
  .wr .wr-acts { order: 2; }
  .wr .wr-people { order: 3; }
  .wr .wr-stats { order: 4; }
  .wr .wr-timeline { order: 5; }
}
@media (max-width: 720px) {
  .wr .wr-kicker { padding: 14px 14px 0; }
  .wr .wr-kicker .match-time { text-align: left; font-size: 12px; }
  .wr .match-duel { padding: 12px 10px 16px; }
  .wr .duel-team { font-size: 16px; }
  .wr .duel-team .badge { width: 56px; height: 56px; }
  .wr .duel-score strong { font-size: clamp(38px, 12vw, 52px); }
  .wr .wr-insights, .wr .wr-insights:has(> :only-child), .wr .wr-insights:has(> :nth-child(2):last-child) { grid-template-columns: minmax(0, 1fr); }
  .wr .wr-insight { padding: 12px 14px; }
  .wr .wr-insight + .wr-insight { border-left: 0; border-top: 1px solid var(--line); }
  .wr .wr-card { padding: 14px 12px; }
  .wr .wr-act-list { grid-template-columns: minmax(0, 1fr); }
  .wr .wr-act { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 10px; }
  .wr .wr-act-mark { font-size: 18px; }
  .wr .wr-act > span:last-child { flex-basis: 100%; }
  .wr .wr-event { grid-template-columns: 50px auto minmax(0, 1fr); gap: 8px; padding-left: 6px; }
  .wr .wr-chip { min-width: 0; }
  .wr :is(.wr-next, .wr-form, .wr-rosters) .match-columns { grid-template-columns: minmax(0, 1fr); }
  .wr .wr-rosters .roster-list li { flex-wrap: wrap; row-gap: 0; }
  .wr .wr-rosters .roster-list em { order: 5; flex-basis: 100%; padding-left: 36px; white-space: normal; }
}