.watch-viewer,.watch-edge{--watch-ink:var(--impact-ink,#171719);--watch-red:var(--impact-red,#b8212c);--watch-video-gap:16px;font-family:Inter,Arial,sans-serif;z-index:10000;box-sizing:border-box}
.watch-viewer[hidden],.watch-edge[hidden],.watch-poster[hidden]{display:none!important}
.watch-viewer{position:fixed;inset:0 0 0 auto;width:100%;height:100dvh;border-left:1px solid #171719;display:flex;flex-direction:column;background:var(--impact-page,#f5f5f5);color:var(--watch-ink);box-shadow:-12px 0 45px #211d1b40;transform-origin:right center}
.watch-header{display:flex;justify-content:space-between;gap:12px;padding:12px 24px;background:var(--impact-halftone),var(--watch-ink);color:white;border-top:4px solid var(--watch-red)}
.watch-header h2{font:800 clamp(22px,3vw,30px)/1.1 var(--impact-display,'Barlow Condensed',sans-serif);text-transform:uppercase;margin:5px 0}
.watch-header p{margin:0;color:#e1d7d1;font-size:12px}.watch-eyebrow{display:flex;gap:10px;align-items:center;font-size:10px;font-weight:800;letter-spacing:.1em}.watch-eyebrow b{background:var(--watch-red);padding:3px 6px}
.watch-controls{display:flex;gap:6px;align-items:flex-start;flex-shrink:0}.watch-control-wrap{position:relative}.watch-control{width:38px;height:38px;background:transparent;border:1px solid #ffffff60;color:white;border-radius:3px;cursor:pointer;font:25px/1 Arial,sans-serif}.watch-control:hover,.watch-handle:hover{background:#a81925}
.watch-tip{display:none;position:absolute;right:0;top:calc(100% + 8px);padding:8px 10px;background:#f3f3f5;color:#171719;border:1px solid #c9c9cf;border-radius:4px;box-shadow:0 4px 12px #0003;white-space:nowrap;font-size:11px;pointer-events:none;z-index:4}.watch-control-wrap:has(> .watch-control:is(:hover,:focus-visible)) .watch-tip{display:block}
.watch-scroll{overflow-y:auto;overscroll-behavior:contain;min-height:0;padding:12px 24px 24px}.watch-handle{position:absolute;right:100%;top:50%;transform:translateY(-50%);width:26px;height:56px;border:0;border-radius:6px 0 0 6px;background:var(--watch-red);color:white;font-size:25px;cursor:pointer}

.watch-matchup {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  position: relative;
  isolation: isolate;
  border-bottom: 3px solid var(--watch-red);
}
.watch-home {
  --watch-tint: var(--impact-neutral-200, #ededee);
  --watch-wash: var(--watch-tint);
}
.watch-away {
  --watch-tint: var(--impact-white, #fff);
  --watch-wash: var(--watch-tint);
}
.watch-player {
  position: relative;
  min-width: 0;
  height: clamp(140px,24dvh,185px);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background: radial-gradient(rgba(23,23,25,.1) 1px,transparent 1px) 0 0 / 5px 5px, var(--watch-tint);
  color: var(--watch-ink);
  overflow: hidden;
}
.watch-player-copy {
  width: 54%;
  min-width: 0;
  padding: 10px var(--watch-vs-clearance, 48px) 10px 4px;
  box-sizing: border-box;
  text-align: left;
  z-index: 1;
}
.watch-player strong {
  display: block;
  min-width: 0;
  font: italic 800 36px/1.05 var(--impact-display, 'Barlow Condensed', sans-serif);
  letter-spacing: .012em;
  text-transform: uppercase;
}
.watch-player strong span { display: block; white-space: nowrap; }
.watch-player strong.watch-pair { font-size: 28px; }
.watch-player strong.is-wrapping span { white-space: normal; overflow-wrap: anywhere; }
.watch-player small {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  margin-bottom: 7px;
  font-size: 11px;
  font-weight: 600;
  color: #4c4c51;
}
.watch-player small img { width: 18px; height: 12px; object-fit: cover; }
.watch-player.watch-away { justify-content: flex-start; }
.watch-away .watch-player-copy { text-align: right; padding: 10px 4px 10px var(--watch-vs-clearance, 48px); }
.watch-away .watch-player-copy small { justify-content: flex-end; }
.watch-art { position: absolute; bottom: 0; left: 0; width: 46%; height: 100%; z-index: 2; pointer-events: none; }
.watch-away .watch-art { left: auto; right: 0; }
.watch-art > * {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}
.watch-vs {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-8deg);
  font: italic 800 64px/1 var(--impact-display, 'Barlow Condensed', sans-serif);
  z-index: 2;
  pointer-events: none;
}
.watch-video-frame {
  margin-top: var(--watch-video-gap);
  padding: 4px;
  border: 1px solid var(--watch-ink);
  background: var(--watch-ink);
  box-shadow: 0 3px 10px #17171926;
}
.watch-viewer.is-mini .watch-video-frame {
  margin-top: 0;
  padding: 0;
  border: 0;
  box-shadow: none;
}
.watch-video{position:relative;width:100%;aspect-ratio:16/9;background:#1b1818}.watch-video iframe,.watch-poster{position:absolute;inset:0;width:100%;height:100%;border:0}.watch-poster{padding:0;background:#1b1818;cursor:pointer}.watch-poster img{width:100%;height:100%;object-fit:cover}.watch-poster>span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--watch-red);color:white;border-radius:8px;padding:8px 25px;font-size:25px}.watch-poster:hover>span{background:#db2635}
.watch-history{margin-top:20px}.watch-history summary{padding:14px 0;border-top:1px solid #dcdce0;font:600 14px/1.4 var(--impact-ui,Inter,Arial,sans-serif);cursor:pointer}.watch-records{margin-top:var(--watch-video-gap);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}.watch-record{min-width:0;background:var(--watch-wash);border:1px solid #e4ded7;display:flex;flex-direction:column}.watch-record dl{display:grid;grid-template-columns:1fr 1fr;margin:0;background:var(--watch-tint)}.watch-record dl>div{padding:10px}.watch-record dt{font-size:9px;font-weight:800;text-transform:uppercase;color:#665a53}.watch-record dd{font-size:20px;font-weight:700;margin:4px 0 0}.watch-recent{font-size:12px;padding:8px 16px;flex:1}.watch-recent ol{list-style:none;margin:0;padding:0}.watch-recent li{display:grid;grid-template-columns:21px minmax(0,1fr) auto;gap:7px;align-items:center;padding:9px 0;border-bottom:1px solid #e4ded7}.watch-recent li b{font-size:12px}.watch-recent small{display:block;color:#665a53;font-size:10px;margin-top:3px}.watch-outcome{display:grid;place-items:center;width:21px;height:21px;color:white}.watch-outcome.is-win{background:#266047}.watch-outcome.is-loss{background:var(--watch-red)}.watch-record .article-player-profile-link{display:flex;justify-content:space-between;gap:5px;align-items:center;background:var(--watch-tint);padding:12px;font-size:12px}.watch-profile-arrow{color:var(--watch-red);font-size:24px}
.watch-edge {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  background: var(--watch-ink);
  border-left: 4px solid var(--watch-red);
  border-radius: 6px 0 0 6px;
  overflow: hidden;
  box-shadow: 0 5px 24px #0004;
}
.watch-edge button {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  color: white;
  background: none;
  cursor: pointer;
}
.watch-open { position: relative; height: 88px; }
.watch-open > span:not(.watch-chevron) {
  position: absolute;
  left: 50%;
  top: 53px;
  transform: translate(-50%, -50%) rotate(90deg);
  white-space: nowrap;
  font: 800 11px Inter, Arial, sans-serif;
  letter-spacing: .12em;
}
.watch-edge .watch-open > .watch-chevron-left {
  position: absolute;
  top: 12px;
  left: 50%;
  margin: 0;
  transform: translateX(-50%) rotate(-135deg);
}
.watch-dismiss { height: 23px; font-size: 19px; border-top: 1px solid #ffffff32 !important; }
.watch-edge button:hover { background: #a81925; }
.watch-viewer.is-mini{inset:auto max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) auto;width:min(392px,calc(100vw - 24px));height:auto;border-radius:6px;box-shadow:0 10px 34px #211d1b59}.watch-viewer.is-mini .watch-header{padding:8px 10px;align-items:center;border-radius:6px 6px 0 0}.watch-viewer.is-mini h2{font-size:16px;margin:0}.watch-viewer.is-mini :is(.watch-eyebrow,.watch-header p,.watch-matchup,.watch-records,.watch-history,.watch-handle){display:none}.watch-viewer.is-mini .watch-scroll{padding:0;overflow:hidden;border-radius:0 0 6px 6px}
.watch-viewer :focus-visible,.watch-edge :focus-visible{outline:3px solid #d23541;outline-offset:-3px}

.watch-chevron {
  display: block;
  width: 9px;
  height: 9px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  flex: none;
}
.watch-chevron-right { transform: rotate(45deg); margin-left: -4px; }
.watch-chevron-left { transform: rotate(-135deg); margin-left: 4px; }
.watch-handle { display: grid; place-items: center; }
.watch-result-card { min-width: 0; background: var(--watch-wash); border-top: 1px solid #dcdce0; }
.watch-results { margin-top: 0; }
@media(max-width:580px) {
  .watch-header { padding: 12px; gap: 5px; }
  .watch-scroll { padding: 12px 9px 18px; }
  .watch-control { width: 34px; height: 34px; }
  .watch-controls { gap: 4px; }
  .watch-player { height: 145px; }
  .watch-player-copy { width: 65%; padding: 8px var(--watch-vs-clearance, 36px) 8px 5px; }
  .watch-away .watch-player-copy { padding: 8px 5px 8px var(--watch-vs-clearance, 36px); }
  .watch-player small { font-size: 10px; }
  .watch-player strong { font-size: 28px; }
  .watch-player strong.watch-pair { font-size: 22px; }
  .watch-art { width: 35%; }
  .watch-vs { top: 50%; font-size: 46px; }
  .watch-records { gap: 24px; }
  .watch-record dl>div { padding: 8px 5px; }
  .watch-recent { padding: 8px; }
  .watch-recent li { grid-template-columns: 17px minmax(0,1fr) auto; gap: 4px; }
  .watch-recent li b { font-size: 10px; }
  .watch-outcome { width: 17px; height: 17px; }
  .watch-record .article-player-profile-link { font-size: 11px; padding: 8px; }
  .watch-viewer.is-mini { right: 8px; bottom: 8px; width: min(320px,calc(100vw - 16px)); }
}

.watch-control:has(svg) { display: grid; place-items: center; padding: 0; }
.watch-control svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* A persistent outer document owns the YouTube iframe while public pages browse. */
body.watch-browsing { overflow: hidden; }
/* Preserve page height and footer geometry so Google's privacy shortcut does
   not see the document collapse when the browsing frame becomes visible. */
body.watch-browsing > .page-shell { visibility: hidden; pointer-events: none; }
body.watch-browsing > :is(#aiIllustrationDisclosureTooltip, #pongbot-promotion-root, .match-ranking-overlay, .result-confirmation-popover) { display: none !important; }
.watch-browse-frame { position: fixed; inset: 0; width: 100%; height: 100dvh; border: 0; background: var(--impact-page,#f5f5f5); z-index: 9999; }

.watch-record-identity {
  display: grid;
  grid-template-columns: 48px minmax(0,1fr);
  gap: 10px;
  align-items: center;
  padding: 8px 12px 0;
  background: var(--watch-tint);
  border-bottom: 1px solid #dcdce0;
}
.watch-record-portrait { width: 48px; height: 60px; }
.watch-record-portrait > * { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.watch-record-identity h3 {
  margin: 0 0 4px;
  font: 700 16px/1.25 var(--impact-ui,Inter,Arial,sans-serif);
  color: var(--watch-ink);
  overflow-wrap: anywhere;
}
@media(max-width:580px) {
  .watch-record-identity { grid-template-columns: 34px minmax(0,1fr); gap: 6px; padding: 6px 7px 0; }
  .watch-record-portrait { width: 34px; height: 46px; }
  .watch-record-identity h3 { font-size: 13px; }
}

.watch-record-copy { min-width: 0; padding-bottom: 8px; }
.watch-record-country {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  font: 500 11px/1.3 var(--impact-ui,Inter,Arial,sans-serif);
  color: #4c4c51;
  overflow-wrap: anywhere;
}
.watch-record-country img { width: 18px; height: 12px; object-fit: cover; flex: none; }
@media(max-width:580px) {
  .watch-record-country { font-size: 10px; gap: 4px; }
}

/* Keep the column surfaces consistent, including the shared news-card footer. */
body.impact-site .watch-record .article-player-profile-link {
  background: var(--watch-tint);
  border-top-color: #dcdce0;
}
body.impact-site .watch-record .article-player-profile-link:is(:hover, :focus-visible) {
  background: var(--watch-tint);
  color: var(--watch-red);
}

/* Chinese names use the site's UI font without synthetic condensed italics. */
.watch-viewer:lang(zh-CN) .watch-player strong {
  font-family: var(--impact-ui,Inter,Arial,sans-serif);
  font-style: normal;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .02em;
}
.watch-edge:lang(zh-CN) .watch-open > span:not(.watch-chevron) {
  writing-mode: vertical-rl;
  transform: translate(-50%, -50%);
  letter-spacing: .18em;
}

@media(width < 1280px) {
  .watch-handle { display: none; }
}

:root { --watch-page-width: 640px; }

/* A true narrower viewport lets the site reflow beside the full viewer. */
@media(min-width:1280px) {
  body.watch-browsing.watch-full > .watch-browse-frame {
    width: var(--watch-page-width);
  }
  .watch-viewer:not(.is-mini) {
    width: calc(100% - var(--watch-page-width));
  }
}

.watch-page-loading {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  justify-items: center;
  align-items: start;
  padding-top: 20px;
  pointer-events: none;
  background: transparent;
  color: #4c4c51;
  font: 500 14px/1.4 var(--impact-ui,Inter,Arial,sans-serif);
}
.watch-page-loading[hidden] { display: none !important; }
.watch-page-loading-indicator {
  padding: 10px 16px;
  border: 1px solid #d8d8da;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 3px 14px #0002;
  visibility: hidden;
  animation: ball-loading-reveal 0s 250ms forwards;
}
@media(min-width:1280px) {
  body.watch-browsing.watch-full > .watch-page-loading {
    width: var(--watch-page-width);
  }
}

/* Lay out the prepared document at split width without exposing it. */
.watch-browse-frame.watch-browse-preload {
  width: var(--watch-page-width);
  visibility: hidden;
  pointer-events: none;
}