/* Every override is scoped to the non-CTF recap. Shared CTF tokens stay unchanged. */
.mode-match-page { min-width: 0; }
.mode-match-page .mode-match-context { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 20px; padding:12px 16px; border:1px solid var(--portal-line); border-radius:8px; color:var(--portal-muted); font-size:.85rem; }
.mode-match-page .mode-match-context a { font-weight:800; padding:8px 0; min-height:44px; display:flex; align-items:center; }
.mode-match-page .mode-scope-note { font-size:.8rem; color:var(--portal-muted); margin:0 0 12px; }
.mode-match-page .mode-timeline :is(button,select,summary) { min-height:44px; }
.mode-match-page .mode-timeline :is(button,select,a,summary,[tabindex]):focus-visible { outline:2px solid var(--timeline-allies-soft); outline-offset:3px; }
.mode-match-page .round-timeline-toolbar { grid-template-columns: auto minmax(180px,1fr) auto; }
.mode-match-page .round-timeline-player-focus { min-width:0; }
.mode-match-page .round-timeline-player-focus select { min-width:0; max-width:100%; }
.mode-match-page .mode-timeline select { background:#0b1627; color:var(--timeline-text); border:1px solid var(--timeline-line); border-radius:4px; padding:6px 28px 6px 10px; font-size:.8rem; }
.mode-match-page .round-timeline-zoom { flex-wrap:wrap; }
.mode-match-page .round-timeline-summary { max-width:360px; flex-wrap:wrap; }
.mode-match-page .mode-progression-label { display:block; width:100%; text-align:right; font-size:.72rem; }
.mode-match-page .round-score-summary-pill { max-width:100%; overflow-wrap:anywhere; }
.mode-match-page .mode-stage { padding:0 12px 14px; min-height:0; overflow:visible; touch-action:pan-y; cursor:grab; }
.mode-match-page .mode-stage.is-dragging { cursor:grabbing; }
.mode-match-page .mode-ruler { position:relative; height:32px; margin:0 22px; padding:0; border:0; }
.mode-match-page .mode-ruler span { position:absolute; top:6px; transform:translateX(-50%); font-size:.7rem; white-space:nowrap; }
.mode-match-page .mode-ruler span:first-child { transform:none; }
.mode-match-page .mode-ruler span:last-child { transform:translateX(-100%); }
.mode-match-page .mode-field { display:grid; gap:6px; }
.mode-match-page .mode-lane { --mode-tone:var(--timeline-neutral); position:relative; padding:22px 22px 0; border-bottom:1px solid var(--timeline-line-soft); min-height:106px; }
.mode-match-page .mode-lane.is-allies { --mode-tone:var(--timeline-allies); }
.mode-match-page .mode-lane.is-axis { --mode-tone:var(--timeline-axis); }
.mode-match-page .mode-lane-label { position:absolute; top:4px; left:5px; font-size:.72rem; font-weight:850; color:var(--mode-tone); letter-spacing:.03em; text-transform:uppercase; pointer-events:none; }
.mode-match-page .mode-lane-track { position:relative; height:82px; }
.mode-match-page .mode-lane:has([data-mode-lane="context"]) { min-height:80px; }
.mode-match-page .mode-band-shade { position:absolute; inset-block:0; background:linear-gradient(180deg,rgba(255,255,255,.025),transparent); border-left:1px solid rgba(255,255,255,.07); pointer-events:none; }
.mode-match-page .mode-band-shade.is-warmup { background:repeating-linear-gradient(135deg,transparent,transparent 5px,rgba(175,186,203,.045) 5px,rgba(175,186,203,.045) 7px); }
.mode-match-page .mode-round-bands { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.mode-match-page .mode-round-band { background:var(--timeline-panel); color:var(--timeline-muted); border:1px solid var(--timeline-line); border-radius:4px; font-weight:800; font-size:.72rem; padding:7px 12px; min-width:44px; }
.mode-match-page .mode-round-band:hover,.mode-match-page .mode-round-band.is-active { color:var(--timeline-allies-soft); border-color:var(--timeline-allies); }
.mode-match-page .mode-round-band.is-warmup { border-style:dashed; }
.mode-match-page .mode-round-band:disabled { opacity:.7; cursor:default; }
.mode-match-page .mode-halftime { color:var(--timeline-muted); font-size:.68rem; text-transform:uppercase; font-weight:850; padding:0 5px; }
.mode-match-page .mode-gap { position:absolute; top:0; bottom:0; display:grid; place-items:center; font-size:.65rem; color:var(--timeline-muted); background:repeating-linear-gradient(135deg,rgba(175,186,203,.08),rgba(175,186,203,.08) 2px,transparent 2px,transparent 6px); pointer-events:none; }
.mode-match-page .mode-marker { position:absolute; top:50%; transform:translate(-50%,-50%); width:44px; height:44px; border-radius:5px; border:1px solid var(--mode-tone); background:#0b1627; color:var(--mode-tone); display:grid; place-items:center; padding:0; box-shadow:0 2px 10px rgba(0,0,0,.55); z-index:3; }
.mode-match-page .mode-marker img { width:25px; height:25px; pointer-events:none; }
.mode-match-page .mode-marker:hover,.mode-match-page .mode-marker.is-selected,.mode-match-page .mode-marker.is-focused { outline:2px solid var(--mode-tone); outline-offset:2px; z-index:5; background:#1b293c; }
.mode-match-page .mode-marker.is-cluster { border-style:dashed; }
.mode-match-page .mode-cluster-count { position:absolute; bottom:-8px; right:-4px; border:1px solid var(--timeline-line); background:#0b1627; color:var(--timeline-text); border-radius:4px; padding:1px 3px; font-size:.67rem; line-height:1.2; font-weight:900; pointer-events:none; }
.mode-match-page .mode-lane:has(.mode-interval) .mode-lane-track { height:116px; }
.mode-match-page .mode-lane:has(.mode-interval) .mode-marker { top:41px; }
.mode-match-page .mode-interval { position:absolute; top:66px; height:44px; border:0; background:none; z-index:2; padding:0; pointer-events:none; }
.mode-match-page .mode-interval::after { content:""; position:absolute; inset:14px 0; border:1px solid var(--mode-tone); border-radius:3px; background:color-mix(in srgb,var(--mode-tone) 18%,transparent); }
.mode-match-page .mode-interval.is-incomplete::after { border-right:3px dashed var(--mode-tone); opacity:.65; }
.mode-match-page .mode-break-note,.mode-match-page .mode-untimed { margin-top:10px; font-size:.75rem; color:var(--timeline-muted); overflow-wrap:anywhere; }
.mode-match-page .mode-untimed-link { background:var(--timeline-panel); color:var(--timeline-muted); border:1px solid var(--timeline-line); border-radius:4px; padding:8px 12px; font-size:.75rem; margin-top:8px; }
.mode-match-page .mode-density { position:absolute; inset:5px 0; pointer-events:none; }
.mode-match-page .mode-density i { position:absolute; bottom:0; background:var(--timeline-neutral-dim); }
.mode-match-page .round-overview-track { touch-action:pan-y; min-height:54px; }
.mode-match-page .round-key-moment-list,.mode-match-page .round-event-feed-list { max-height:360px; overflow:auto; overscroll-behavior:contain; }
.mode-match-page :is(.round-key-moment-list,.round-event-feed-list) button { min-height:64px; overflow-wrap:anywhere; }
.mode-match-page .is-dimmed { opacity:.38; }
.mode-match-page .mode-untimed-heading { color:var(--timeline-muted); font-size:.75rem; text-transform:uppercase; padding:12px 0 4px; }
.mode-match-page .mode-pagination { display:flex; flex-wrap:wrap; gap:8px; justify-content:space-between; align-items:center; margin-top:12px; border-top:1px solid var(--timeline-line-soft); padding-top:12px; font-size:.72rem; }
.mode-match-page .mode-pagination button,.mode-match-page .mode-error button,.mode-match-page .mode-popover button { color:var(--timeline-text); background:var(--timeline-panel); border:1px solid var(--timeline-line); border-radius:4px; padding:6px 12px; font-weight:800; font-size:.75rem; }
.mode-match-page .mode-pagination button:disabled { opacity:.4; }
.mode-match-page .mode-loading { font-size:.75rem; color:var(--timeline-muted); }
.mode-match-page .mode-error { border:1px solid var(--timeline-axis); border-radius:4px; padding:12px; font-size:.8rem; }
.mode-match-page .mode-popover { position:fixed; background:#0b1627; color:var(--timeline-text); border:1px solid var(--timeline-allies); box-shadow:0 16px 50px rgba(0,0,0,.6); border-radius:8px; padding:14px; z-index:1060; overflow:auto; }
.mode-match-page .mode-popover-heading { display:flex; gap:8px; align-items:center; font-size:.72rem; color:var(--timeline-muted); }
.mode-match-page .mode-popover-heading img { width:26px; height:26px; }
.mode-match-page .mode-popover-heading button { margin-left:auto; width:44px; height:44px; padding:0; font-size:1.4rem; flex-shrink:0; }
.mode-match-page .mode-popover h3 { font-size:1rem; margin:10px 0; overflow-wrap:anywhere; }
.mode-match-page .mode-popover p { font-size:.8rem; line-height:1.5; margin:6px 0; overflow-wrap:anywhere; }
.mode-match-page .mode-popover a { color:var(--timeline-allies-soft); }
.mode-match-page [data-mode-selection-anchor] { outline:2px solid var(--timeline-allies-soft); outline-offset:2px; }
.mode-match-page .mode-evidence { border:1px solid var(--portal-line); border-radius:8px; }
.mode-match-page .mode-evidence summary { padding:12px 16px; font-weight:800; min-height:44px; cursor:pointer; }
.mode-match-page .mode-evidence>div { padding:4px 16px 16px; font-size:.8rem; color:var(--portal-muted); }
.mode-match-page .mode-round-links { display:flex; flex-wrap:wrap; gap:8px 20px; }
.mode-match-page .mode-round-links a { min-height:44px; display:flex; align-items:center; }
.mode-match-page .mode-copy-fallback { width:100%; max-width:260px; color:#111; }
.mode-match-page .mode-progress-chart { border:1px solid var(--timeline-line-soft); border-radius:4px; padding:10px 14px 4px; background:rgba(11,22,39,.6); }
.mode-match-page .mode-progress-chart>div { display:flex; flex-wrap:wrap; gap:4px 20px; justify-content:space-between; font-size:.72rem; }
.mode-match-page .mode-progress-chart svg { display:block; width:100%; height:72px; overflow:visible; }
.mode-match-page [hidden] { display:none !important; }
@media (min-width:821px) {
    .mode-match-page .round-timeline-legend-disclosure>summary { display:none; }
}
@media (max-width:1199px) {
    .mode-match-page .round-timeline-toolbar { grid-template-columns:1fr 1fr; }
    .mode-match-page .round-timeline-zoom { grid-column:1/-1; justify-content:flex-end; }
}
@media (max-width:767px) {
    .mode-match-page .round-timeline-toolbar { grid-template-columns:1fr; }
    .mode-match-page .round-timeline-player-focus { flex-wrap:wrap; }
    .mode-match-page .round-timeline-zoom { grid-column:auto; justify-content:flex-start; }
    .mode-match-page .round-timeline-heading { grid-template-columns:1fr; }
    .mode-match-page .round-timeline-summary { justify-content:flex-start; max-width:none; }
    .mode-match-page .mode-progression-label { text-align:left; }
    .mode-match-page .round-timeline-support-grid { grid-template-columns:1fr; }
    .mode-match-page .mode-stage { padding-inline:4px; }
    .mode-match-page .mode-round-band { padding-inline:8px; }
    .mode-match-page .mode-lane { padding-inline:22px; }
    .mode-match-page .mode-ruler { margin-inline:22px; }
    .mode-match-page .round-timeline-range-summary { align-items:flex-start; }
    .mode-match-page :is(.round-key-moment-list,.round-event-feed-list) button { grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto auto; max-height:none; }
    .mode-match-page :is(.round-key-moment-list,.round-event-feed-list) button>span { grid-column:1; grid-row:1; }
    .mode-match-page :is(.round-key-moment-list,.round-event-feed-list) strong { grid-column:1; grid-row:2; }
    .mode-match-page :is(.round-key-moment-list,.round-event-feed-list) small { grid-column:1; grid-row:3; text-align:left; white-space:normal; }
}
@media (max-width:680px) {
    .mode-match-page .round-scoreboard-data { width:100%; min-width:0; }
    .mode-match-page .round-scoreboard-data :is(tbody,tr,td) { min-width:0; max-width:100%; }
    .mode-match-page .round-scoreboard-data tbody tr>td { width:auto; }
    .mode-match-page .round-player-identity { min-width:0; width:100%; overflow-wrap:anywhere; }
    .mode-match-page .round-player-identity :is(a,small) { white-space:normal; }
}
@media (max-width:359px) {
    .mode-match-page .round-timeline-panel { padding:12px; }
    .mode-match-page .round-timeline-player-focus label { flex-basis:100%; }
    .mode-match-page .round-timeline-player-focus select { width:100%; }
    .mode-match-page .round-timeline-zoom { gap:6px; }
}