.match-recap { height:100%; overflow:auto; padding:0 4px 12px 0; }
.recap-toolbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; font-size:12px; }
.recap-hero { display:flex; align-items:center; gap:20px; min-height:134px; padding:16px 24px; background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--orange); border-radius:8px 8px 0 0; overflow:hidden; }
.recap-portrait { height:104px; width:104px; object-fit:cover; object-position:top; border-radius:7px; background:var(--panel-2); }
.recap-identity h2 { margin:3px 0 5px; font-size:30px; letter-spacing:-.025em; }
.recap-identity p { margin:0; font-size:13px; }
.recap-placement { margin-left:auto; display:grid; text-align:right; flex:none; }
.recap-placement strong { font-size:54px; line-height:1; letter-spacing:-.05em; font-variant-numeric:tabular-nums; }
.recap-placement span { margin-top:6px; color:var(--muted); font-size:12px; }
.recap-hero.is-win { border-left-color:var(--gold); }
.recap-hero.is-win .recap-placement strong { color:var(--gold); }
.recap-stats { margin:0 0 22px; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); background:#1a1d23; border:1px solid var(--line); border-top:0; border-radius:0 0 8px 8px; }
.recap-stats > div { padding:15px 20px; }
.recap-stats > div + div { border-left:1px solid var(--line); }
.recap-stats dt { color:var(--muted); font-size:var(--hd-text-micro); }
.recap-stats dd { margin:4px 0 0; font-size:26px; font-weight:700; font-variant-numeric:tabular-nums; }
.recap-columns { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(245px,1fr); gap:24px; }
.recap-columns h3 { margin:0 0 12px; font-size:15px; }
.recap-clips { border-left:1px solid var(--line); padding-left:22px; }
.recap-clips > .button { margin-top:10px; }
.recap-clips > .recap-clip { margin-top:0; margin-bottom:8px; }
.recap-clip.button { height:auto; width:100%; display:grid; grid-template-columns:28px minmax(0,1fr); gap:3px 8px; padding:14px; text-align:left; white-space:normal; }
.recap-clip .recap-play { grid-row:span 2; color:var(--orange); align-self:center; }
.recap-clip strong { font-size:13px; }
.recap-clip .muted { font-size:var(--hd-text-micro); font-weight:400; }
.recap-track { position:relative; height:56px; margin:0 12px; background:linear-gradient(transparent 27px,var(--line) 27px,var(--line) 30px,transparent 30px); }
.moment-pin.button { position:absolute; top:16px; transform:translateX(-50%); width:25px; height:25px; padding:0; background:var(--panel); border-color:currentColor; border-radius:50%; }
.moment-pin[aria-pressed=true] { outline:2px solid var(--ink); outline-offset:3px; }
.knock { color:var(--amber)!important; }.kill { color:var(--green)!important; }.assist { color:var(--blue)!important; }.death { color:var(--red)!important; }.recovery { color:var(--blue)!important; }.neutral { color:var(--muted)!important; }
.timeline-scale { display:flex; justify-content:space-between; color:var(--quiet); font:var(--hd-text-micro) var(--mono); }
.recap-selected { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; min-height:60px; margin:15px 0 10px; padding:12px; background:var(--panel); border:1px solid var(--line); border-radius:6px; font-size:12px; }
.recap-event-list { max-height:245px; overflow:auto; }
.recap-event.button { height:auto; min-height:40px; width:100%; display:flex; gap:12px; align-items:center; padding:9px 12px; border:0; border-bottom:1px solid var(--line-2); border-radius:0; background:transparent; text-align:left; }
.recap-event time { color:var(--muted); font:var(--hd-text-micro) var(--mono); min-width:40px; }
.recap-event strong { color:var(--ink); }.recap-event .muted { font-size:var(--hd-text-micro); font-weight:400; }
.recap-event.is-selected { background:var(--panel-2); box-shadow:inset 2px 0 var(--orange); }
.event-symbol { width:16px; text-align:center; }
.recap-all { margin-top:16px; color:var(--muted); font-size:12px; }.recap-all summary { cursor:pointer; padding:8px 0; }
.recap-log { display:flex; gap:18px; padding:7px 0; border-top:1px solid var(--line-2); }.recap-log time { font-family:var(--mono); min-width:40px; }
.recap-notice { padding:10px 12px; border-left:2px solid var(--amber); color:var(--muted); background:var(--panel); font-size:12px; }

.clip-trimmer { border:1px solid var(--line); border-radius:7px; padding:12px 15px; background:var(--panel); min-width:0; }
.trim-heading { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 16px; }.trim-heading h3 { margin:0; font-size:13px; }.trim-heading .muted { font-size:var(--hd-text-micro); }
.trim-summary { display:block; margin:9px 0 14px; font:12px var(--mono); color:var(--ink); }
.trim-track { height:42px; position:relative; margin:0 9px 8px; border:1px solid var(--line); border-radius:4px; background:repeating-linear-gradient(90deg,#171a20 0,#171a20 19px,#292e38 20px); cursor:crosshair; touch-action:none; }
.trim-selection { position:absolute; top:0; bottom:0; border-block:2px solid var(--orange); background:#ff541f22; }
.trim-handle { position:absolute; top:-3px; bottom:-3px; width:16px; padding:0; transform:translateX(-50%); border:0; border-radius:3px; background:var(--orange); color:#15171c; cursor:ew-resize; touch-action:none; z-index:3; font-size:12px; font-weight:900; }
.trim-handle:focus-visible { outline:2px solid var(--ink); outline-offset:3px; }
.trim-playhead { position:absolute; top:-5px; bottom:-5px; width:2px; background:var(--ink); pointer-events:none; z-index:2; }
.trim-playhead::before { content:''; position:absolute; top:-3px; left:-3px; width:8px; height:8px; background:var(--ink); transform:rotate(45deg); }
.trim-events { position:relative; height:41px; margin:3px 9px 0; }
.trim-marker.button { position:absolute; transform:translateX(-50%); height:20px; width:22px; padding:0; border:0; border-radius:3px; background:var(--cut); font-size:15px; }.trim-marker.outside { opacity:.35; }
.trim-transport { display:flex; align-items:center; gap:12px; }.trim-current { font:var(--hd-text-micro) var(--mono); min-width:52px; }.trim-seek { width:100%; height:14px; accent-color:var(--ink); cursor:pointer; }
.trim-hint { font-size:var(--hd-text-micro); color:var(--muted); margin:7px 0; }

@media(max-width:1000px) { .recap-columns { grid-template-columns:minmax(0,1fr); gap:20px; }.recap-clips { padding:0; border:0; }.recap-stats > div { padding:12px; }.recap-hero { padding:14px; gap:14px; }.recap-portrait { width:76px; height:90px; }.recap-placement strong { font-size:44px; } }
@media(max-height:800px) {.recap-hero { min-height:105px; }.recap-portrait { height:80px; width:80px; }.recap-stats { margin-bottom:16px; }.recap-stats dd { font-size:22px; } }

/* Keep the picture dominant; editing tools share one compact timeline. */
.review-layout { grid-template-columns:190px minmax(0,1fr); }

.clip-trimmer { padding:9px 12px; }
.trim-heading { justify-content:space-between; margin-bottom:10px; }
.trim-summary { margin:0; font-size:var(--hd-text-micro); }
.trim-track { height:34px; margin-bottom:5px; }
.trim-events { position:absolute; inset:0; height:auto; margin:0; pointer-events:none; z-index:2; }
.trim-marker.button { pointer-events:auto; background:#14161b; height:22px; width:24px; }
.trim-handle { z-index:4; }
.trim-playhead { z-index:3; }
.trim-seek { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.trim-track:has(.trim-seek:focus-visible) { outline:2px solid var(--ink); outline-offset:3px; }
.trim-transport { margin-top:7px; }
.trim-transport .button { height:27px; padding:0 10px; font-size:var(--hd-text-micro); }
.trim-transport .button:nth-last-child(2) { margin-left:auto; }

.trim-transport .button { flex-shrink:0; }
.trim-transport .trim-current { margin-right:8px; }
.trim-selected-event:empty { display:none; }
.review-fields textarea { height:34px; padding:7px 9px; }
.review-actions { flex-wrap:wrap; }

@media(max-width:1000px) { .review-layout { grid-template-columns:160px minmax(0,1fr); } }

/* Exact horizontal positions; nearby events stack instead of overlapping. */
.recap-track { background:none; border-bottom:1px solid var(--line); }
.moment-pin.button { border:0; border-radius:4px; height:22px; width:22px; background:var(--panel-2); font-size:13px; }
.moment-pin[aria-pressed=true] { outline:1px solid var(--ink); outline-offset:2px; }
.trim-track { background:#16191e; border:0; border-radius:3px; }
.trim-selection { border-block-width:1px; background:#ff541f15; }
.trim-handle { width:10px; font-size:0; border-radius:2px; }
.trim-handle::after { content:''; position:absolute; inset:10px 4px; background:#14161b; }
.trim-marker.button { width:20px; height:20px; border-radius:3px; background:transparent; font-size:13px; }
.trim-marker.button:hover,.trim-marker[aria-pressed=true] { background:var(--panel-2); outline:1px solid currentColor; }
.trim-selected-event { color:var(--muted); font-size:var(--hd-text-micro); }
.trim-sync { font-size:var(--hd-text-micro); color:var(--muted); margin-top:7px; }
.trim-sync summary { cursor:pointer; width:fit-content; }
.trim-sync p { margin:8px 0; }
.trim-sync .button { height:27px; font-size:var(--hd-text-micro); margin-right:6px; }
.trim-sync-status { display:inline-block; margin-top:5px; }

.moment-pin::after { content:""; position:absolute; top:100%; left:50%; width:1px; height:var(--stem,12px); background:currentColor; opacity:.3; pointer-events:none; }

.match-recap > .recap-clips { border:0; padding:0; max-width:760px; }