/* Nabham report design foundation */
:root {
  color-scheme: light;

  /* Surfaces */
  --color-page: #f4f6f5;
  --color-panel: #ffffff;
  --color-panel-muted: #eef2f0;
  --color-panel-strong: #18231f;

  /* Text */
  --color-text-primary: #17211e;
  --color-text-secondary: #64706c;
  --color-text-muted: #8a9490;
  --color-text-inverse: #f8faf9;

  /* Player identity */
  --color-player-t1: #148565;
  --color-player-t1-soft: #dff3ec;
  --color-player-t2: #d45755;
  --color-player-t2-soft: #fae8e7;

  /* Analytical states */
  --color-positive: #23804f;
  --color-positive-soft: #e2f3e9;
  --color-negative: #c74643;
  --color-negative-soft: #f9e6e5;
  --color-neutral: #697570;
  --color-neutral-soft: #e8edeb;

  /* Placement-frequency intensity (Shot Placement only) -- deliberately
     independent of player identity color and of the loss/occupancy
     heat tones used elsewhere. */
  --color-placement-intensity: #c98a3e;

  /* Borders and focus */
  --color-border: #dce3e0;
  --color-border-strong: #c6d0cc;
  --color-focus: #237fbd;
  --border-width: 1px;

  /* Editorial accent + chapter identity (reused from existing chart palette) */
  --color-editorial-red: #a52d36;
  --color-editorial-red-soft: #efadb2;
  --color-court-green: #176b58;
  --color-court-green-deep: #0f4a3c;
  --color-court-green-line: #27695b;

  /* Typography */
  --font-sans:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  --font-display:
    "Roboto Condensed", "Arial Narrow", "Helvetica Neue", var(--font-sans);
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --font-size-report-title: clamp(2.5rem, 5vw, 5rem);
  --font-size-section-title: clamp(1.35rem, 2.2vw, 2rem);
  --font-size-metric: clamp(2.25rem, 4vw, 4rem);
  --font-size-body: 1rem;
  --font-size-caption: 0.8125rem;
  --font-size-label: 0.6875rem;
  --line-height-tight: 1.05;
  --line-height-heading: 1.2;
  --line-height-body: 1.65;
  --letter-spacing-tight: -0.04em;
  --letter-spacing-label: 0.14em;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --page-padding-inline: clamp(1.25rem, 4vw, 4rem);
  --page-padding-block: clamp(2rem, 5vw, 5rem);
  --panel-padding: clamp(1rem, 2.5vw, 2rem);
  --layout-gap: clamp(1rem, 2vw, 1.5rem);

  /* Shape and elevation */
  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-lg: 1.25rem;
  --radius-pill: 999px;
  --shadow-subtle: 0 1px 2px rgb(20 42 34 / 5%), 0 10px 30px rgb(20 42 34 / 6%);
  --shadow-raised: 0 16px 48px rgb(20 42 34 / 10%);

  /* Layout */
  --content-max-width: 96rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--color-page);
  font-family: var(--font-sans);
  color: var(--color-text-primary);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}

.report-chapter,
.module-caption__title {
  scroll-margin-top: 6.5rem;
}

body {
  min-width: 20rem;
  min-height: 100vh;
  margin: 0;
  background: var(--color-page);
  overflow-x: hidden;
}

button,
input,
select,
textarea {
  font: inherit;
}

:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--color-focus) 45%, transparent);
  outline-offset: 3px;
}

.report-container {
  width: min(100%, var(--content-max-width));
  margin-inline: auto;
  padding-inline: var(--page-padding-inline);
}

/* Type levels */
.text-report-title,
.text-section-title,
.text-metric,
.text-body,
.text-caption,
.text-label {
  margin-block: 0;
}

.text-report-title {
  max-width: 12ch;
  margin-top: var(--space-3);
  font-size: var(--font-size-report-title);
  font-weight: 760;
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
}

.text-section-title {
  font-size: var(--font-size-section-title);
  font-weight: 720;
  line-height: var(--line-height-heading);
  letter-spacing: -0.025em;
}

.text-metric {
  margin-top: var(--space-5);
  font-size: var(--font-size-metric);
  font-weight: 760;
  line-height: 1;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
}

.text-body {
  max-width: 62ch;
  margin-top: var(--space-4);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}

.text-caption {
  margin-top: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
  line-height: 1.5;
}

.text-label {
  color: var(--color-text-secondary);
  font-size: var(--font-size-label);
  font-weight: 750;
  line-height: 1.4;
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
}

.text-secondary {
  color: var(--color-text-secondary);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.text-positive {
  color: var(--color-positive);
}

.text-negative {
  color: var(--color-negative);
}

.text-neutral {
  color: var(--color-neutral);
}

/* Report shell */
.masthead {
  position: relative;
  z-index: 20;
  border-bottom: var(--border-width) solid rgb(255 255 255 / 10%);
  background: var(--color-panel-strong);
  color: var(--color-text-inverse);
}

.masthead__inner {
  display: flex;
  min-height: 3.4rem;
  align-items: center;
  justify-content: space-between;
  gap: var(--layout-gap);
}

.masthead__brand {
  font-family: var(--font-display);
  font-stretch: condensed;
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.masthead__doctype {
  color: rgb(255 255 255 / 62%);
  font-size: var(--font-size-label);
  font-weight: 750;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Persistent match score strip: hidden until the hero has scrolled away */
.score-strip {
  position: sticky;
  top: 0;
  z-index: 19;
  overflow: hidden;
  max-height: 0;
  border-bottom: 1px solid rgb(255 255 255 / 0%);
  background: var(--color-panel-strong);
  opacity: 0;
  transition:
    max-height 320ms ease,
    opacity 260ms ease,
    border-color 320ms ease;
}

.score-strip.is-visible {
  max-height: 3.4rem;
  border-bottom-color: rgb(255 255 255 / 10%);
  opacity: 1;
}

.score-strip__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
  min-height: 2.9rem;
  color: var(--color-text-inverse);
}

.score-strip__player {
  overflow: hidden;
  color: var(--strip-player-color, var(--color-text-inverse));
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.score-strip__player--t1 {
  --strip-player-color: var(--color-player-t1);
  text-align: right;
}
.score-strip__player--t2 {
  --strip-player-color: var(--color-player-t2);
  text-align: left;
}

.score-strip__score {
  font-family: var(--font-mono);
  font-size: 1.15rem;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}

.score-strip__score--t1 {
  color: var(--color-player-t1);
}
.score-strip__score--t2 {
  color: var(--color-player-t2);
}

.score-strip__label {
  color: rgb(255 255 255 / 48%);
  font-size: 0.52rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Hero: the match itself, not the product */
.hero {
  position: relative;
  overflow: hidden;
  min-height: clamp(34rem, 76vh, 56rem);
  display: flex;
  align-items: center;
  padding-block: clamp(3rem, 6vw, 5rem);
  color: var(--color-text-inverse);
  background:
    radial-gradient(120% 140% at 15% -10%, #223530 0%, transparent 55%),
    linear-gradient(165deg, #182420 0%, #101917 62%, #0d1513 100%);
}

.hero__field {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(
      to bottom,
      transparent 0,
      transparent calc(50% - 1px),
      rgb(255 255 255 / 8%) calc(50% - 1px),
      rgb(255 255 255 / 8%) calc(50% + 1px),
      transparent calc(50% + 1px)
    ),
    linear-gradient(
      to right,
      rgb(255 255 255 / 6%) 0,
      rgb(255 255 255 / 6%) 1px,
      transparent 1px
    ),
    linear-gradient(
      to right,
      rgb(255 255 255 / 6%) 0,
      rgb(255 255 255 / 6%) 1px,
      transparent 1px
    ),
    linear-gradient(
      to right,
      rgb(255 255 255 / 6%) 0,
      rgb(255 255 255 / 6%) 1px,
      transparent 1px
    );
  background-repeat: no-repeat;
  background-position:
    0 0,
    8% 0,
    50% 0,
    92% 0;
  background-size:
    100% 100%,
    1px 100%,
    1px 100%,
    1px 100%;
}

.hero__field::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  content: "";
  background: linear-gradient(
    to right,
    transparent,
    var(--color-editorial-red) 12%,
    var(--color-editorial-red) 88%,
    transparent
  );
  opacity: 0.55;
}

.hero__inner {
  position: relative;
  z-index: 1;
}

.hero__brandline {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.hero__brand {
  font-family: var(--font-display);
  font-stretch: condensed;
  font-size: 0.95rem;
  font-weight: 850;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.hero__doctype {
  color: rgb(255 255 255 / 55%);
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.hero__mode {
  margin: clamp(1.75rem, 4vw, 3rem) 0 0;
  color: rgb(255 255 255 / 62%);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.35em;
  text-align: center;
  text-transform: uppercase;
}

.hero__result {
  margin: clamp(1.25rem, 3vw, 2rem) 0 0;
  color: var(--color-text-inverse);
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3.2vw, 2.1rem);
  font-stretch: condensed;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-align: center;
  text-transform: uppercase;
}

.hero__scoreboard {
  width: min(100%, 58rem);
  margin: clamp(1.25rem, 3vw, 2rem) auto 0;
  overflow-x: auto;
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: var(--radius-sm);
  background: rgb(8 17 14 / 72%);
  box-shadow: 0 1rem 3rem rgb(0 0 0 / 24%);
}

.hero-scoreboard {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  color: var(--color-text-inverse);
}

.hero-scoreboard th,
.hero-scoreboard td {
  padding: clamp(0.7rem, 1.8vw, 1rem);
  border-bottom: 1px solid rgb(255 255 255 / 12%);
}

.hero-scoreboard thead th {
  color: rgb(255 255 255 / 52%);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-align: center;
  text-transform: uppercase;
}

.hero-scoreboard thead th:first-child {
  width: 52%;
  text-align: left;
}

.hero-scoreboard tbody tr:last-child > * {
  border-bottom: 0;
}

.hero-scoreboard__row {
  --scoreboard-player-color: var(--color-neutral);
  background: rgb(255 255 255 / 3%);
}

.hero-scoreboard__row--t1 {
  --scoreboard-player-color: var(--color-player-t1);
}

.hero-scoreboard__row--t2 {
  --scoreboard-player-color: var(--color-player-t2);
}

.hero-scoreboard__row--winner {
  background: linear-gradient(
    90deg,
    rgb(255 255 255 / 12%),
    rgb(255 255 255 / 5%)
  );
}

.hero-scoreboard__player {
  display: flex;
  min-width: 15rem;
  gap: 0.7rem;
  align-items: center;
  font-family: var(--font-display);
  font-size: clamp(1rem, 2.3vw, 1.35rem);
  font-stretch: condensed;
  font-weight: 800;
  letter-spacing: 0.015em;
  text-align: left;
  text-transform: uppercase;
}

.hero-scoreboard__marker {
  width: 0.28rem;
  height: 1.8rem;
  flex: 0 0 auto;
  border-radius: var(--radius-pill);
  background: var(--scoreboard-player-color);
}

.hero-scoreboard__winner {
  margin-left: auto;
  padding: 0.3rem 0.55rem;
  border: 1px solid rgb(255 255 255 / 35%);
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 12%);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 0.58rem;
  font-weight: 850;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hero-scoreboard__set-score {
  color: rgb(255 255 255 / 66%);
  font-family: var(--font-mono);
  font-size: clamp(1.15rem, 2.7vw, 1.7rem);
  font-weight: 750;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.hero-scoreboard__set-score--won {
  color: #fff;
  background: rgb(255 255 255 / 10%);
}

.hero__score-label {
  margin: clamp(0.75rem, 2vw, 1.25rem) 0 0;
  color: rgb(255 255 255 / 52%);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-align: center;
  text-transform: uppercase;
}

.hero__rule {
  width: min(100%, 44rem);
  height: 1px;
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  border: 0;
  background: rgb(255 255 255 / 14%);
}

.hero__facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem clamp(1.5rem, 4vw, 3rem);
  margin-top: clamp(1.25rem, 3vw, 2rem);
  color: rgb(255 255 255 / 68%);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
}

.hero__facts strong {
  margin-right: 0.4em;
  color: var(--color-text-inverse);
  font-family: var(--font-mono);
}

.report-content {
  padding-block: var(--space-6);
}

.report-section {
  display: grid;
  grid-template-columns: 3.5rem minmax(12rem, 17rem) minmax(0, 1fr);
  gap: var(--layout-gap);
  align-items: start;
  padding-block: var(--space-7);
  border-top: var(--border-width) solid var(--color-border);
}

.report-section:first-child {
  border-top: 0;
  padding-top: 0;
}

.report-section__number {
  margin: 0;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--font-size-caption);
  font-variant-numeric: tabular-nums;
}

.report-section__heading .text-caption {
  margin-top: var(--space-2);
}

.report-section__placeholder {
  min-height: 12rem;
  border: var(--border-width) dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-panel-muted) 58%, transparent);
}

.report-section__placeholder--components {
  min-height: 0;
  padding: var(--panel-padding);
  border-style: solid;
  background: var(--color-panel);
  box-shadow: var(--shadow-subtle);
}

.report-section__placeholder--chart {
  min-height: 0;
  padding: var(--panel-padding);
  border-style: solid;
  background: var(--color-panel);
  box-shadow: var(--shadow-subtle);
}

.chart-placeholder {
  width: 100%;
  height: clamp(12rem, 24vw, 18rem);
  min-height: 12rem;
}

/* Shared court SVG integration */
.court-svg {
  position: relative;
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

.court-svg__canvas {
  display: block;
  width: 100%;
  height: auto;
  max-height: 100%;
}

.court-svg__zone-highlights,
.court-svg__shots,
.court-svg__players,
.court-svg__errors {
  pointer-events: none;
}

.court-svg__canvas .analytical-zone {
  vector-effect: non-scaling-stroke;
}

/* Match Summary */
.report-section__module {
  min-width: 0;
}

.match-summary__panel {
  display: grid;
  gap: var(--space-5);
  padding: var(--panel-padding);
  overflow: hidden;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 50% 0%, rgb(20 133 101 / 8%), transparent 40%),
    var(--color-panel);
  box-shadow: var(--shadow-subtle);
}

.match-summary__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.match-summary__scoreboard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: var(--space-4);
}

.match-summary__player {
  position: relative;
  min-width: 0;
  padding: var(--space-5);
  overflow: hidden;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: rgb(255 255 255 / 82%);
}

.match-summary__player::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0.25rem;
  content: "";
  background: var(--color-neutral);
}

.match-summary__player--t1::before {
  background: var(--color-player-t1);
}

.match-summary__player--t2::before {
  background: var(--color-player-t2);
}

.match-summary__points,
.match-summary__points-label,
.match-summary__supporting,
.match-summary__game-label,
.match-summary__games-heading h3 {
  margin: 0;
}

.match-summary__points {
  margin-top: var(--space-5);
  font-size: clamp(3rem, 6vw, 5.75rem);
  font-weight: 780;
  line-height: 0.85;
  letter-spacing: -0.07em;
  font-variant-numeric: tabular-nums;
}

.match-summary__player--t1 .match-summary__points {
  color: var(--color-player-t1);
}

.match-summary__player--t2 .match-summary__points {
  color: var(--color-player-t2);
}

.match-summary__points-label {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--font-size-label);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.match-summary__supporting {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--color-border);
}

.match-summary__supporting div {
  display: grid;
  gap: var(--space-1);
}

.match-summary__supporting dt {
  color: var(--color-text-muted);
  font-size: var(--font-size-label);
}

.match-summary__supporting dd {
  margin: 0;
  font-size: 1rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.match-summary__versus {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--space-2);
  width: 5rem;
  color: var(--color-text-muted);
  text-align: center;
}

.match-summary__versus span {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  place-items: center;
  border: var(--border-width) solid var(--color-border-strong);
  border-radius: 50%;
  background: var(--color-panel);
  font-family: var(--font-mono);
  font-size: var(--font-size-caption);
  font-weight: 800;
}

.match-summary__versus small {
  max-width: 7ch;
  font-size: var(--font-size-label);
  line-height: 1.35;
}

.match-summary__games {
  display: grid;
  gap: var(--space-3);
  padding-top: var(--space-5);
  border-top: var(--border-width) solid var(--color-border);
}

.match-summary__games-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.match-summary__games-heading h3 {
  font-size: 0.9375rem;
}

.match-summary__games-heading span {
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--font-size-label);
}

.match-summary__game-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.match-summary__game {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-panel-muted);
}

.match-summary__game-label {
  color: var(--color-text-secondary);
  font-size: var(--font-size-label);
  font-weight: 750;
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
}

.match-summary__game-score {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  font-family: var(--font-mono);
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.match-summary__game-player--t1 {
  color: var(--color-player-t1);
}

.match-summary__game-player--t2 {
  color: var(--color-player-t2);
}

/* Shared presentation components */
.ui-section-header {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}

.ui-section-header__number {
  padding-top: 0.25em;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--font-size-caption);
}

.ui-section-header__title,
.ui-section-header__description,
.ui-metric-block__label,
.ui-metric-block__value,
.ui-metric-block__detail,
.ui-data-note__title,
.ui-data-note__text {
  margin: 0;
}

.ui-section-header__title {
  font-size: 1.125rem;
  line-height: var(--line-height-heading);
}

.ui-section-header__description {
  margin-top: var(--space-1);
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
  line-height: 1.5;
}

.ui-player-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.ui-player-label__marker {
  width: 0.625rem;
  height: 2rem;
  flex: 0 0 auto;
  border-radius: var(--radius-pill);
  background: var(--color-neutral);
}

.ui-player-label--t1 .ui-player-label__marker {
  background: var(--color-player-t1);
}

.ui-player-label--t2 .ui-player-label__marker {
  background: var(--color-player-t2);
}

.ui-player-label__identity {
  display: grid;
  min-width: 0;
}

.ui-player-label__name {
  overflow: hidden;
  font-size: 0.9375rem;
  font-weight: 720;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-player-label__id {
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--font-size-label);
}

.ui-metric-block {
  min-width: 0;
  padding-left: var(--space-4);
  border-left: 3px solid var(--color-neutral);
}

.ui-metric-block--positive {
  border-color: var(--color-positive);
}

.ui-metric-block--negative {
  border-color: var(--color-negative);
}

.ui-metric-block__label {
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
}

.ui-metric-block__value {
  margin-top: var(--space-1);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 760;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.ui-metric-block__detail {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--font-size-label);
}

.ui-sample-badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.625rem;
  padding-inline: var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-neutral-soft);
  color: var(--color-neutral);
  font-size: var(--font-size-label);
  font-weight: 750;
}

.ui-sample-badge--positive {
  background: var(--color-positive-soft);
  color: var(--color-positive);
}

.ui-sample-badge--negative {
  background: var(--color-negative-soft);
  color: var(--color-negative);
}

.ui-sample-badge--t1 {
  background: var(--color-player-t1-soft);
  color: var(--color-player-t1);
}

.ui-sample-badge--t2 {
  background: var(--color-player-t2-soft);
  color: var(--color-player-t2);
}

.ui-data-note {
  padding: var(--space-4);
  border-left: 3px solid var(--color-border-strong);
  background: var(--color-panel-muted);
}

.ui-data-note__title {
  font-size: var(--font-size-caption);
  font-weight: 750;
}

.ui-data-note__text {
  margin-top: var(--space-1);
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
  line-height: 1.5;
}

/* Placeholder-only arrangement for component verification */
.component-preview {
  display: grid;
  gap: var(--space-6);
}

.component-preview__players,
.component-preview__metrics,
.component-preview__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--layout-gap);
}

.component-preview__players > *,
.component-preview__metrics > * {
  flex: 1 1 10rem;
}

.report-footer {
  margin-top: var(--space-8);
  color: var(--color-text-inverse);
  background: var(--color-panel-strong);
}

.report-footer__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-5);
  min-height: 8rem;
  padding-block: var(--space-6);
  align-items: center;
}

.report-footer__brand-name {
  margin: 0;
  font-family: var(--font-display);
  font-stretch: condensed;
  font-size: clamp(1.6rem, 3vw, 2.35rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.report-footer__brand-tag {
  margin: 0.25rem 0 0;
  color: rgb(255 255 255 / 55%);
  font-size: var(--font-size-label);
  font-weight: 750;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.report-footer__meta {
  text-align: right;
}

.report-footer__meta p {
  margin: 0;
  color: rgb(255 255 255 / 55%);
  font-size: var(--font-size-caption);
}

.report-footer__meta p + p {
  margin-top: 0.3rem;
  color: rgb(255 255 255 / 40%);
  font-family: var(--font-mono);
  font-size: var(--font-size-label);
  letter-spacing: 0.06em;
}

/* Tablet: 640px–1023px */
@media (max-width: 63.9375rem) {
  :root {
    --page-padding-inline: clamp(1.5rem, 5vw, 3rem);
    --page-padding-block: clamp(2.5rem, 6vw, 4rem);
    --panel-padding: 1.5rem;
    --layout-gap: 1.25rem;
  }

  .report-section {
    grid-template-columns: 2.5rem minmax(10rem, 14rem) minmax(0, 1fr);
  }

  .report-section__placeholder {
    min-height: 10rem;
  }

  .report-section__placeholder--components {
    padding: var(--panel-padding);
  }

  .report-section__placeholder--chart {
    padding: var(--space-3);
  }

  .match-summary__scoreboard {
    grid-template-columns: minmax(0, 1fr) 3rem minmax(0, 1fr);
    gap: var(--space-3);
  }

  .match-summary__versus {
    width: 3rem;
  }
}

/* Mobile: below 640px */
@media (max-width: 39.9375rem) {
  :root {
    --font-size-report-title: clamp(2.25rem, 13vw, 3.25rem);
    --font-size-section-title: 1.25rem;
    --font-size-metric: 2.5rem;
    --font-size-body: 0.9375rem;
    --page-padding-inline: 1.25rem;
    --page-padding-block: 2rem;
    --panel-padding: 1rem;
    --layout-gap: 1rem;
    --radius-lg: 1rem;
  }

  .masthead__inner {
    min-height: 2.9rem;
  }

  .masthead__doctype {
    display: none;
  }

  .hero {
    min-height: auto;
    padding-block: var(--space-7);
  }

  .hero__scoreboard {
    overflow-x: visible;
  }

  .hero-scoreboard {
    min-width: 100%;
    table-layout: fixed;
  }

  .hero-scoreboard th,
  .hero-scoreboard td {
    padding: 0.65rem 0.25rem;
  }

  .hero-scoreboard thead th {
    font-size: 0.5rem;
    letter-spacing: 0.08em;
  }

  .hero-scoreboard thead th:first-child {
    width: 48%;
  }

  .hero-scoreboard__player {
    min-width: 0;
    gap: 0.4rem;
    font-size: 0.82rem;
  }

  .hero-scoreboard__marker {
    width: 0.2rem;
    height: 1.5rem;
  }

  .hero-scoreboard__winner {
    padding: 0.22rem 0.38rem;
    font-size: 0.48rem;
    letter-spacing: 0.08em;
  }

  .hero-scoreboard__set-score {
    font-size: 1rem;
  }

  .match-summary__scoreboard {
    grid-template-columns: 1fr;
  }

  .match-summary__versus {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
  }

  .match-summary__versus small {
    max-width: none;
  }

  .match-summary__game-list {
    grid-template-columns: 1fr;
  }

  .match-summary__games-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .report-content {
    padding-block: var(--space-5);
  }

  .report-section {
    grid-template-columns: 2rem minmax(0, 1fr);
    padding-block: var(--space-6);
  }

  .report-section__placeholder {
    grid-column: 1 / -1;
    min-height: 8rem;
    margin-top: var(--space-2);
  }

  .report-section__module {
    grid-column: 1 / -1;
    margin-top: var(--space-2);
  }

  .report-footer {
    margin-top: var(--space-7);
  }

  .report-footer__inner {
    min-height: 7rem;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-3);
  }

  .report-footer__meta {
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Complete Step 7 report — tournament editorial layout */
.report-story {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(5rem, 9vw, 8rem);
}

.report-chapter {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

/* Full-width chapter interstitial: a visual chapter separator, not a card */
.chapter-interstitial {
  position: relative;
  overflow: hidden;
  display: flex;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  align-items: center;
  min-height: clamp(220px, 26vw, 360px);
  padding-block: clamp(2rem, 5vw, 3.5rem);
  color: var(--color-text-inverse);
}

.chapter-interstitial--charcoal {
  background: linear-gradient(155deg, #1b2723 0%, #131c19 60%, #101715 100%);
}

.chapter-interstitial--green {
  background: linear-gradient(
    155deg,
    var(--color-court-green) 0%,
    var(--color-court-green-deep) 75%
  );
}

.chapter-interstitial__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1.25rem, 4vw, 3rem);
  align-items: baseline;
}

.report-module {
  padding-block: clamp(2.75rem, 5vw, 4rem);
  border-top: 1px solid var(--color-border);
}

.chapter-interstitial + .report-module {
  border-top: 0;
}

/* Match Rhythm uses one editorial grid and one heading scale throughout. */
#chapter-rhythm .report-module--rhythm {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-block: clamp(2.25rem, 4vw, 3.25rem);
}

#chapter-rhythm .report-module--rhythm .module-caption {
  max-width: 62ch;
  margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}

.chapter-interstitial__field {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(
      to right,
      rgb(255 255 255 / 7%) 0,
      rgb(255 255 255 / 7%) 1px,
      transparent 1px
    ),
    linear-gradient(
      to right,
      rgb(255 255 255 / 7%) 0,
      rgb(255 255 255 / 7%) 1px,
      transparent 1px
    ),
    linear-gradient(
      to bottom,
      rgb(255 255 255 / 7%) 0,
      rgb(255 255 255 / 7%) 1px,
      transparent 1px
    );
  background-repeat: no-repeat;
  background-position:
    6% 0,
    94% 0,
    0 50%;
  background-size:
    1px 100%,
    1px 100%,
    100% 1px;
}

.chapter-interstitial__number {
  font-family: var(--font-display);
  font-stretch: condensed;
  font-size: clamp(2.75rem, 7vw, 5.5rem);
  font-weight: 800;
  line-height: 0.85;
  color: rgb(255 255 255 / 30%);
  font-variant-numeric: tabular-nums;
}

.chapter-interstitial__name {
  margin: 0;
  font-family: var(--font-display);
  font-stretch: condensed;
  font-size: clamp(2.25rem, 5.5vw, 4.25rem);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.chapter-interstitial__tagline {
  margin: 0.5rem 0 0;
  color: rgb(255 255 255 / 78%);
  font-size: clamp(0.95rem, 1.6vw, 1.2rem);
  font-weight: 650;
  letter-spacing: 0.01em;
}

.chapter-interstitial__desc {
  max-width: 48ch;
  margin: 0.65rem 0 0;
  color: rgb(255 255 255 / 50%);
  font-size: var(--font-size-caption);
  line-height: 1.5;
}

.report-module--supporting {
  max-width: 54rem;
  margin-inline: auto;
  padding-block: clamp(2.25rem, 4vw, 3.25rem);
}

.module-caption {
  display: grid;
  gap: 0.4rem;
  max-width: 62ch;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.report-module--hero .module-caption {
  max-width: 70ch;
  margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}

.module-caption__eyebrow {
  display: flex;
  gap: 0.45em;
  align-items: baseline;
  margin: 0;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--font-size-label);
  font-weight: 800;
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
}

.module-caption__index {
  color: var(--color-editorial-red);
}

.module-caption__divider {
  color: var(--color-border-strong);
}

.module-caption__title {
  margin: 0;
  font-family: var(--font-display);
  font-stretch: condensed;
  font-weight: 750;
  line-height: 1.02;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
}

.report-module--hero .module-caption__title {
  font-size: clamp(1.9rem, 4vw, 3.1rem);
}

.report-module--supporting .module-caption__title {
  font-size: clamp(1.15rem, 1.9vw, 1.45rem);
}

.module-caption__subtitle {
  margin: 0;
  max-width: 56ch;
  color: var(--color-text-secondary);
  font-size: 0.92rem;
  line-height: 1.5;
}

.report-module--supporting .module-caption__subtitle {
  font-size: 0.82rem;
}

.report-module__body {
  min-width: 0;
}

.viz-kicker {
  color: var(--color-editorial-red);
  font-size: var(--font-size-label);
  font-weight: 820;
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
}

/* Editorial broadcast-moment data band: presentation only, existing facts */
.broadcast-moment {
  display: grid;
  gap: 0.35rem;
  padding-block: clamp(2.25rem, 5vw, 3.5rem);
  border-block: 1px solid var(--color-border);
  text-align: center;
}

.broadcast-moment__figures {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1.5rem, 5vw, 4rem);
}

.broadcast-moment__figure {
  display: grid;
  gap: 0.2rem;
}

.broadcast-moment__value {
  font-family: var(--font-display);
  font-stretch: condensed;
  font-size: clamp(2.5rem, 6vw, 4.25rem);
  font-weight: 800;
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
  color: var(--broadcast-value-color, var(--color-text-primary));
}

.broadcast-moment__name {
  color: var(--color-text-muted);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.broadcast-moment__label {
  margin: 0.5rem 0 0;
  color: var(--color-text-muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.broadcast-moment:empty {
  display: none;
}

/* Shell-level entrance motion: restrained fade/translate, gated by JS + prefers-reduced-motion */
.report-module {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 520ms ease,
    transform 520ms ease;
}

.report-module.is-in-view {
  opacity: 1;
  transform: none;
}

.no-js .report-module {
  opacity: 1;
  transform: none;
}

.hero__result,
.hero__scoreboard {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 460ms ease,
    transform 460ms ease;
}

.hero.is-revealed .hero__result,
.hero.is-revealed .hero__scoreboard {
  opacity: 1;
  transform: none;
}

.hero__scoreboard {
  transition-delay: 90ms;
}

.viz-empty {
  margin: 0;
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--font-size-caption);
}

.viz-chart {
  width: 100%;
  min-height: 22rem;
}

.viz-source-note {
  margin: var(--space-4) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--font-size-label);
  line-height: 1.5;
}

.viz-player-heading {
  display: flex;
  gap: var(--space-3);
  align-items: center;
}

.viz-player-heading__accent {
  width: 0.3rem;
  height: 2.5rem;
  flex: 0 0 auto;
  background: var(--color-neutral);
}

.viz-player-heading--t1 .viz-player-heading__accent {
  background: var(--color-player-t1);
}
.viz-player-heading--t2 .viz-player-heading__accent {
  background: var(--color-player-t2);
}
.viz-player-heading__name {
  margin: 0.2rem 0 0;
  font-size: 1.05rem;
  line-height: 1.1;
}

/* Charts and paired badminton views */
.rally-pulse-chart {
  min-height: 27rem;
}
.rally-pulse__streak {
  display: grid;
  grid-template-columns: minmax(8rem, 0.3fr) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: center;
  margin-top: var(--space-3);
  padding: 0.8rem var(--space-4);
  border-block: 1px solid var(--color-border-strong);
  background: var(--color-panel);
}
.rally-pulse__streak-label {
  color: var(--color-text-secondary);
  font-size: 0.61rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.rally-pulse__streak-players {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.rally-pulse__streak-player {
  --streak-player: var(--color-neutral);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 0.35rem;
  align-items: baseline;
  min-width: 0;
}
.rally-pulse__streak-player--t1 {
  --streak-player: var(--color-player-t1);
  padding-right: var(--space-4);
  border-right: 1px solid var(--color-border);
}
.rally-pulse__streak-player--t2 {
  --streak-player: var(--color-player-t2);
  padding-left: var(--space-4);
}
.rally-pulse__streak-player--right {
  grid-template-columns: auto auto minmax(0, 1fr);
  text-align: right;
}
.rally-pulse__streak-player--right .rally-pulse__streak-name {
  grid-column: 3;
  grid-row: 1;
}
.rally-pulse__streak-name {
  overflow: hidden;
  color: var(--streak-player);
  font-size: 0.68rem;
  font-weight: 780;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rally-pulse__streak-value {
  color: var(--streak-player);
  font-family: var(--font-mono);
  font-size: 1.25rem;
  line-height: 1;
}
.rally-pulse__streak-unit {
  color: var(--color-text-muted);
  font-size: 0.55rem;
  font-weight: 750;
  text-transform: uppercase;
}
.error-comparison {
  min-width: 0;
  border-top: 4px solid var(--color-editorial-red);
  border-bottom: 1px solid var(--color-border-strong);
  background: var(--color-panel);
}
.error-comparison__header {
  padding: var(--space-3) var(--space-5);
  color: var(--color-text-inverse);
  background: var(--color-panel-strong);
}
.error-comparison__title {
  display: grid;
  gap: 0.18rem;
  text-transform: uppercase;
}
.error-comparison__title > span {
  font-family: var(--font-display);
  font-stretch: condensed;
  font-size: clamp(0.9rem, 1.6vw, 1.2rem);
  font-weight: 850;
  letter-spacing: 0.07em;
}
.error-comparison__title small {
  color: rgb(255 255 255 / 55%);
  font-size: 0.56rem;
  font-weight: 750;
  letter-spacing: 0.1em;
}
.error-comparison__hero {
  display: grid;
  gap: var(--space-4);
  padding: clamp(1.25rem, 3vw, 2rem) clamp(1rem, 4vw, 3rem);
  border-bottom: 1px solid var(--color-border-strong);
  background: #f8f7f2;
}
.error-comparison__scoreline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 3.4rem minmax(0, 1fr);
  align-items: center;
}
.error-comparison__hero-player {
  display: grid;
  justify-items: end;
  min-width: 0;
  text-align: right;
}
.error-comparison__hero-player:last-child {
  justify-items: start;
  text-align: left;
}
.error-comparison__hero-player h3 {
  margin: 0 0 0.45rem;
  overflow: hidden;
  color: var(--hero-player-color);
  font-size: clamp(0.7rem, 1.35vw, 0.92rem);
  letter-spacing: 0.055em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.error-comparison__hero-player strong {
  color: var(--color-text-primary);
  font-family: var(--font-mono);
  font-size: clamp(3.2rem, 8vw, 5.2rem);
  font-weight: 900;
  letter-spacing: -0.055em;
  line-height: 0.82;
}
.error-comparison__hero-player span {
  margin-top: 0.55rem;
  color: var(--color-text-muted);
  font-size: 0.53rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.error-comparison__hero-player--t1 {
  --hero-player-color: var(--color-player-t1);
}
.error-comparison__hero-player--t2 {
  --hero-player-color: var(--color-player-t2);
}
.error-comparison__versus {
  display: grid;
  width: 2.3rem;
  height: 2.3rem;
  place-self: center;
  place-items: center;
  border: 1px solid var(--color-border-strong);
  border-radius: 50%;
  color: var(--color-text-muted);
  background: var(--color-panel);
  font-size: 0.55rem;
  font-weight: 900;
  letter-spacing: 0.07em;
}
.error-comparison__type-comparison {
  display: grid;
  width: min(100%, 31rem);
  margin-inline: auto;
  border-block: 1px solid var(--color-border-strong);
}
.error-comparison__type-row {
  display: grid;
  grid-template-columns: minmax(4rem, 1fr) 7rem minmax(4rem, 1fr);
  align-items: baseline;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--color-border);
}
.error-comparison__type-row:last-child {
  border-bottom: 0;
}
.error-comparison__type-row > span {
  color: var(--color-text-secondary);
  font-size: 0.58rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
}
.error-comparison__type-value {
  font-family: var(--font-mono);
  font-size: 1.25rem;
  line-height: 1;
}
.error-comparison__type-value:first-child {
  text-align: right;
}
.error-comparison__type-value:last-child {
  text-align: left;
}
.error-comparison__type-value--t1 {
  color: var(--color-player-t1);
}
.error-comparison__type-value--t2 {
  color: var(--color-player-t2);
}
.error-comparison__players {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.error-comparison__player {
  display: grid;
  align-content: start;
  min-width: 0;
  padding: clamp(1rem, 2.5vw, 1.6rem);
}
.error-comparison__player + .error-comparison__player {
  border-left: 1px solid var(--color-border-strong);
}
.error-comparison__player--t1 {
  --player-color: var(--color-player-t1);
}
.error-comparison__player--t2 {
  --player-color: var(--color-player-t2);
}
.error-comparison__court-heading {
  display: grid;
  grid-template-columns: 0.22rem minmax(0, 1fr) auto;
  gap: 0.55rem;
  align-items: center;
  width: min(100%, 19.5rem);
  margin-inline: auto;
}

.error-comparison__court-heading strong {
  overflow: hidden;
  color: var(--player-color);
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
  margin-top: -20px;
}
.error-comparison__court-heading span {
  font-size: 0.5rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-top: -18px;
}
.error-comparison__court-frame {
  position: relative;
  width: min(100%, 19.5rem);
  margin: var(--space-3) auto var(--space-2);
  overflow: visible;
}
.error-comparison__court {
  overflow: visible;
  background: #176b58;
  box-shadow: 0 0.35rem 0.8rem rgb(18 52 43 / 9%);
}
.error-comparison__court .court-svg__canvas {
  overflow: visible;
  filter: saturate(0.9);
}
.error-comparison__court .court-svg__errors {
  pointer-events: all;
}
.error-comparison__endpoint {
  cursor: help;
  opacity: 1;
  filter: saturate(1.5) contrast(1.15);
  transition:
    opacity 150ms ease,
    filter 150ms ease;
}
.error-comparison__endpoint--net {
  opacity: 1;
}
.error-comparison__endpoint--out {
  opacity: 1;
}
.error-comparison__endpoint--missed {
  --marker-missed-color: #94a3b8;
  opacity: 1;
}
.error-comparison__endpoint:hover,
.error-comparison__endpoint:focus {
  opacity: 1;
  outline: none;
  filter: drop-shadow(0 0 5px rgb(255 253 244 / 80%));
}
.error-comparison__player-anchor {
  opacity: 0.92;
  pointer-events: none;
  filter: drop-shadow(0 0.15rem 0.3rem rgb(0 0 0 / 25%));
}
.error-comparison__net-badge {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  display: flex;
  gap: 0.35rem;
  align-items: baseline;
  padding: 0.18rem 0.45rem;
  border-block: 1px solid rgb(255 255 255 / 55%);
  color: #fffdf4;
  background: rgb(20 66 55 / 70%);
  pointer-events: none;
  transform: translate(-50%, -50%);
}
.error-comparison__net-badge span {
  font-size: 0.44rem;
  font-weight: 850;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.error-comparison__net-badge strong {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1;
}
.error-comparison__split-section {
  width: min(100%, 19.5rem);
  margin: var(--space-2) auto 0;
}
.error-comparison__split-section + .error-comparison__split-section {
  margin-top: var(--space-3);
}
.error-comparison__split-title {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--color-text-muted);
  font-size: 0.5rem;
  font-weight: 820;
  letter-spacing: 0.09em;
  text-align: center;
  text-transform: uppercase;
}
.error-comparison__out-split {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  margin: 0 auto;
  border-block: 1px solid var(--color-border);
}
.error-comparison__out-split > span {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  align-items: center;
  padding: 0.5rem 0.35rem;
  color: var(--color-text-secondary);
  font-size: 0.5rem;
  font-weight: 820;
  letter-spacing: 0.05em;
  text-align: center;
  text-transform: uppercase;
}
.error-comparison__out-split > span + span {
  border-left: 1px solid var(--color-border);
}
.error-comparison__out-split strong {
  color: var(--color-editorial-red);
  font-family: var(--font-mono);
  font-size: 0.92rem;
}
.error-comparison__unavailable {
  grid-column: 1 / -1;
  justify-content: center !important;
  color: var(--color-text-muted) !important;
  text-transform: none !important;
}
.error-comparison__data-note {
  margin: 0;
  padding: var(--space-2) var(--space-5);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 0.5rem;
  line-height: 1.45;
  text-align: center;
}
.error-comparison-tooltip {
  position: absolute;
  z-index: 8;
  display: grid;
  min-width: 11rem;
  gap: 0.15rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: var(--radius-sm);
  color: var(--color-text-inverse);
  background: rgb(18 39 33 / 96%);
  box-shadow: 0 0.75rem 1.8rem rgb(9 34 27 / 24%);
  font-size: 0.65rem;
  line-height: 1.45;
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 0.8rem));
}
.error-comparison-tooltip[hidden] {
  display: none;
}
.error-comparison-tooltip.is-below {
  transform: translate(-50%, 0.8rem);
}
.error-comparison-tooltip__rally {
  margin-bottom: 0.12rem;
  color: #fffdf4;
  font-size: 0.73rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.error-comparison-tooltip small {
  margin-top: 0.15rem;
  color: rgb(255 255 255 / 56%);
  font-size: 0.54rem;
}
.shot-efficiency {
  position: relative;
  min-width: 0;
  border-top: 3px solid var(--color-panel-strong);
  border-bottom: 1px solid var(--color-border-strong);
  background: var(--color-panel);
}
.shot-efficiency__header,
.shot-efficiency__row {
  display: grid;
  grid-template-columns:
    minmax(6.8rem, 0.8fr) minmax(7rem, 1fr) minmax(9rem, 1.35fr)
    minmax(7rem, 1fr);
  gap: var(--space-3);
  align-items: center;
}
.shot-efficiency__header {
  min-height: 3.2rem;
  padding: 0.65rem var(--space-3);
  border-bottom: 1px solid var(--color-border-strong);
  background: var(--color-panel-strong);
}
.shot-efficiency__shot-heading,
.shot-efficiency__track-heading {
  color: rgb(255 255 255 / 52%);
  font-size: 0.52rem;
  font-weight: 820;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.shot-efficiency__track-heading {
  text-align: center;
}
.shot-efficiency__player-heading {
  overflow: hidden;
  color: var(--player-heading-color);
  font-size: 0.66rem;
  letter-spacing: 0.045em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.shot-efficiency__player-heading:nth-child(2) {
  text-align: right;
}
.shot-efficiency__player-heading--t1 {
  --player-heading-color: var(--color-player-t1);
}
.shot-efficiency__player-heading--t2 {
  --player-heading-color: var(--color-player-t2);
}
.shot-efficiency__rows {
  display: grid;
}
.shot-efficiency__row {
  min-height: 5.2rem;
  padding: 0.7rem var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.shot-efficiency__row:last-child {
  border-bottom: 0;
}
.shot-efficiency__row:hover {
  background: #f8f8f4;
}
.shot-efficiency__shot {
  margin: 0;
  font-size: clamp(0.72rem, 1vw, 0.86rem);
  letter-spacing: 0.035em;
  line-height: 1.15;
  text-transform: uppercase;
}
.shot-efficiency__result {
  display: grid;
  grid-template-columns: auto auto;
  gap: 0.1rem 0.5rem;
  align-items: baseline;
  min-width: 0;
  padding: 0.35rem 0.45rem;
  border: 1px solid transparent;
  color: var(--result-color);
  cursor: help;
}
.shot-efficiency__result--left {
  justify-content: end;
  text-align: right;
}
.shot-efficiency__result--right {
  justify-content: start;
  text-align: left;
}
.shot-efficiency__result--t1 {
  --result-color: var(--color-player-t1);
}
.shot-efficiency__result--t2 {
  --result-color: var(--color-player-t2);
}
.shot-efficiency__result:focus {
  border-color: var(--color-border-strong);
  outline: none;
  background: var(--color-panel-muted);
}
.shot-efficiency__count {
  font-family: var(--font-mono);
  font-size: clamp(1rem, 1.8vw, 1.35rem);
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}
.shot-efficiency__rate {
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  white-space: nowrap;
}
.shot-efficiency__low-sample {
  grid-column: 1 / -1;
  justify-self: end;
  padding: 0.12rem 0.28rem;
  border: 1px dashed var(--color-border-strong);
  color: var(--color-text-muted);
  background: repeating-linear-gradient(
    135deg,
    transparent 0 3px,
    rgb(126 137 131 / 8%) 3px 6px
  );
  font-size: 0.45rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.shot-efficiency__result--right .shot-efficiency__low-sample {
  justify-self: start;
}
.shot-efficiency__result.is-missing {
  grid-template-columns: auto;
  color: var(--color-text-muted);
}
.shot-efficiency__result.is-missing strong {
  font-family: var(--font-mono);
  font-size: 1.15rem;
}
.shot-efficiency__result.is-missing span {
  font-size: 0.52rem;
  font-weight: 750;
  text-transform: uppercase;
}
.shot-efficiency__track {
  position: relative;
  height: 2rem;
}
.shot-efficiency__track::before {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 2px;
  content: "";
  background: var(--color-border-strong);
  transform: translateY(-50%);
}
.shot-efficiency__track::after {
  position: absolute;
  top: calc(50% - 0.22rem);
  left: 50%;
  width: 1px;
  height: 0.44rem;
  content: "";
  background: var(--color-text-muted);
}
.shot-efficiency__range {
  position: absolute;
  top: 50%;
  height: 4px;
  background: #aab5ae;
  transform: translateY(-50%);
}
.shot-efficiency__marker {
  position: absolute;
  z-index: 2;
  width: 0.66rem;
  height: 0.66rem;
  border: 2px solid #fff;
  background: var(--marker-color);
  box-shadow: 0 0 0 1px rgb(26 49 41 / 20%);
}
.shot-efficiency__marker--t1 {
  --marker-color: var(--color-player-t1);
  top: 34%;
}
.shot-efficiency__marker--t2 {
  --marker-color: var(--color-player-t2);
  top: 66%;
}
.shot-efficiency__marker--circle {
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.shot-efficiency__marker--diamond {
  border-radius: 0.08rem;
  transform: translate(-50%, -50%) rotate(45deg);
}
.shot-efficiency__data-note {
  margin: 0;
  padding: var(--space-3);
  border-top: 1px solid var(--color-border-strong);
  color: var(--color-text-muted);
  font-size: 0.52rem;
  line-height: 1.5;
  text-align: center;
}
.shot-efficiency-tooltip {
  position: absolute;
  z-index: 8;
  display: grid;
  min-width: 12rem;
  gap: 0.15rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: var(--radius-sm);
  color: var(--color-text-inverse);
  background: rgb(18 39 33 / 96%);
  box-shadow: 0 0.75rem 1.8rem rgb(9 34 27 / 24%);
  font-size: 0.65rem;
  line-height: 1.45;
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 0.8rem));
}
.shot-efficiency-tooltip[hidden] {
  display: none;
}
.shot-efficiency-tooltip.is-below {
  transform: translate(-50%, 0.8rem);
}
.shot-efficiency-tooltip__shot {
  margin-bottom: 0.12rem;
  color: #fffdf4;
  font-size: 0.73rem;
  letter-spacing: 0.04em;
}
.court-pair,
.direction-pair,
.tendency-pair,
.pattern-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
}

.court-panel,
.direction-panel,
.tendency-panel,
.pattern-panel {
  min-width: 0;
  padding-top: var(--space-4);
  border-top: 2px solid var(--color-panel-strong);
}

.court-panel__court {
  height: clamp(32rem, 52vw, 43rem);
  margin-top: var(--space-4);
}

.court-panel__court--compact {
  height: clamp(27rem, 44vw, 36rem);
}
.court-panel__court .court-svg__canvas {
  margin-inline: auto;
}

.zone-outcomes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
}
.zone-outcome-panel {
  min-width: 0;
  padding-top: var(--space-4);
  border-top: 2px solid var(--color-panel-strong);
}
.zone-outcome__court {
  position: relative;
  max-width: 34rem;
  margin: var(--space-4) auto 0;
  overflow: visible;
  border: 0.3rem solid #27695b;
  border-radius: var(--radius-md);
  background: #176b58;
  box-shadow: 0 0.7rem 1.8rem rgb(16 55 45 / 10%);
}
.zone-outcome__court-svg {
  filter: saturate(0.92);
}
.zone-outcome__court-svg .zone-outcome__label {
  pointer-events: none;
  text-anchor: middle;
}
.zone-outcome__court-svg .zone-outcome__label--low {
  opacity: 0.55;
}
.zone-outcome__court-svg .zone-outcome__zone-code,
.zone-outcome__court-svg .zone-outcome__record,
.zone-outcome__court-svg .zone-outcome__net {
  fill: #fffaf0;
  paint-order: stroke;
  stroke: rgb(17 73 60 / 44%);
  stroke-linejoin: round;
}
.zone-outcome__court-svg .zone-outcome__zone-code {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 850;
  letter-spacing: 2px;
  stroke-width: 3px;
}
.zone-outcome__court-svg .zone-outcome__record {
  font-family: var(--font-mono);
  font-size: 50px;
  font-weight: 900;
  stroke-width: 5px;
}
.zone-outcome__court-svg .zone-outcome__net {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  stroke-width: 3px;
}
.zone-outcome__court-svg .analytical-zone:focus {
  outline: none;
  stroke: #fffaf0 !important;
  stroke-width: 4px !important;
}
.zone-outcome-tooltip {
  position: absolute;
  z-index: 8;
  display: grid;
  min-width: 10rem;
  gap: 0.15rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: var(--radius-sm);
  color: var(--color-text-inverse);
  background: rgb(18 39 33 / 96%);
  box-shadow: 0 0.75rem 1.8rem rgb(9 34 27 / 28%);
  font-size: 0.68rem;
  line-height: 1.45;
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 0.8rem));
}
.zone-outcome-tooltip[hidden] {
  display: none;
}
.zone-outcome-tooltip.is-below {
  transform: translate(-50%, 0.8rem);
}
.zone-outcome-tooltip__zone {
  margin-bottom: 0.18rem;
  color: #fffaf0;
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.zone-outcome-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-3);
  color: var(--color-text-secondary);
  font-size: 0.7rem;
  font-weight: 700;
}
.zone-outcome-legend__item {
  display: inline-flex;
  gap: 0.45rem;
  align-items: center;
}
.zone-outcome-legend__item i {
  width: 0.78rem;
  height: 0.78rem;
  border: 1px solid var(--color-border-strong);
  border-radius: 0.15rem;
  background: #f5f1e6;
}
.zone-outcome-legend__item--positive i {
  background: rgb(242 231 165 / 72%);
}
.zone-outcome-legend__item--neutral i {
  background: rgb(245 241 230 / 35%);
}
.zone-outcome-legend__item--negative i {
  background: rgb(223 133 125 / 68%);
}
.zone-outcome-legend__item--low i {
  opacity: 0.38;
  background: repeating-linear-gradient(
    135deg,
    #f5f1e6 0 2px,
    transparent 2px 4px
  );
}

.loss-context {
  display: grid;
  gap: var(--space-4);
}
.loss-context__toolbar {
  display: grid;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border-strong);
}
.loss-context__player-switch,
.loss-context__filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.loss-context__player-tab,
.loss-context__filter {
  position: relative;
  border: 0;
  color: var(--color-text-muted);
  background: transparent;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.loss-context__player-tab {
  padding: 0.65rem 0.85rem;
  font-size: var(--font-size-caption);
}
.loss-context__player-tab::after {
  position: absolute;
  inset: auto 0.85rem 0;
  height: 3px;
  content: "";
  background: transparent;
}
.loss-context__player-tab--t1.is-active::after {
  background: var(--color-player-t1);
}
.loss-context__player-tab--t2.is-active::after {
  background: var(--color-player-t2);
}
.loss-context__player-tab.is-active {
  color: var(--color-text-primary);
}
.loss-context__filter {
  padding: 0.48rem 0.72rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-panel);
  font-size: 0.59rem;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}
.loss-context__filter.is-active {
  border-color: var(--color-panel-strong);
  color: var(--color-text-inverse);
  background: var(--color-panel-strong);
}
.loss-context__player-tab:focus-visible,
.loss-context__filter:focus-visible,
.loss-context__cell:focus-visible,
.loss-context__rally:focus-visible {
  outline: 2px solid var(--color-panel-strong);
  outline-offset: 2px;
}
.loss-context__matrix {
  display: grid;
  gap: var(--space-2);
}
.loss-context__axis-title,
.loss-context__row-axis {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 0.61rem;
  font-weight: 850;
  letter-spacing: 0.085em;
  text-transform: uppercase;
}
.loss-context__axis-title {
  padding-left: 6rem;
  text-align: center;
}
.loss-context__row-axis {
  padding-left: 0.15rem;
}
.loss-context__matrix-scroll {
  overflow-x: auto;
  padding-bottom: 0.3rem;
  scrollbar-color: var(--color-border-strong) transparent;
}
.loss-context__matrix-grid {
  display: grid;
  min-width: 44rem;
  grid-template-columns: 5.5rem repeat(9, minmax(3.65rem, 1fr));
  gap: 3px;
  padding: 3px;
  border-radius: var(--radius-sm);
  background: var(--color-panel-muted);
}
.loss-context__corner,
.loss-context__column,
.loss-context__row-label {
  display: grid;
  min-width: 0;
  place-items: center;
  color: var(--color-text-inverse);
  background: var(--color-panel-strong);
  font-size: 0.61rem;
  font-weight: 850;
  letter-spacing: 0.085em;
  text-transform: uppercase;
}
.loss-context__corner {
  min-height: 3rem;
  padding: var(--space-2);
  text-align: left;
  white-space: pre-line;
}
.loss-context__column {
  min-height: 3rem;
}
.loss-context__row-label {
  color: var(--color-text-primary);
  background: #e9ece6;
}
.loss-context__cell {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 3.65rem;
  place-items: center;
  overflow: hidden;
  border: 0;
  border-radius: 0.18rem;
  color: var(--color-text-primary);
  background: var(--color-panel);
  font: inherit;
  cursor: pointer;
}
.loss-context__cell::before {
  position: absolute;
  inset: 0;
  content: "";
  background: #b97561;
  opacity: var(--cell-intensity);
  transition:
    opacity 180ms ease,
    transform 180ms ease;
}
.loss-context__cell:hover::before {
  transform: scale(0.92);
}
.loss-context__cell strong {
  position: relative;
  font-family: var(--font-mono);
  font-size: clamp(0.9rem, 1.5vw, 1.2rem);
  line-height: 1;
}
.loss-context__cell.is-zero::before {
  opacity: 0.018;
}
.loss-context__cell.is-zero strong {
  color: var(--color-text-muted);
  font-weight: 600;
}
.loss-context__cell.is-selected {
  z-index: 1;
  box-shadow:
    inset 0 0 0 2px var(--color-panel-strong),
    0 0 0 1px var(--color-panel);
}
.loss-context__evidence-note {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.61rem;
  line-height: 1.45;
}
.loss-context__detail {
  overflow: hidden;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-panel);
  box-shadow: var(--shadow-subtle);
}
.loss-context__detail-header {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4);
  color: var(--color-text-inverse);
  background: var(--color-panel-strong);
}
.loss-context__detail-heading h3 {
  margin: 0.2rem 0;
  font-size: clamp(1rem, 2vw, 1.35rem);
  letter-spacing: 0.035em;
  text-transform: uppercase;
}
.loss-context__detail-heading p {
  margin: 0;
  color: rgb(255 255 255 / 65%);
  font-size: 0.66rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.loss-context__eyebrow {
  color: var(--color-text-muted);
  font-size: 0.54rem;
  font-weight: 850;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.loss-context__detail-header .loss-context__eyebrow {
  color: rgb(255 255 255 / 52%);
}
.loss-context__rally-headline {
  display: grid;
  min-width: 7rem;
  justify-items: end;
  gap: 0.2rem;
  text-align: right;
  text-transform: uppercase;
}
.loss-context__rally-headline span {
  color: rgb(255 255 255 / 58%);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}
.loss-context__rally-headline strong {
  font-size: 0.82rem;
  letter-spacing: 0.04em;
}
.loss-context__detail-body {
  display: grid;
  grid-template-columns: minmax(15rem, 0.8fr) minmax(15rem, 1.2fr);
  min-height: 29rem;
}
.loss-context__court-panel {
  display: grid;
  place-items: center;
  padding: var(--space-4);
  background: #eef0eb;
}
.loss-context__court {
  width: min(100%, 22rem);
  filter: drop-shadow(0 0.75rem 1.15rem rgb(18 52 43 / 15%));
}
.loss-context__court .court-svg__canvas {
  max-height: 31rem;
  margin-inline: auto;
}
.loss-context__court-context {
  display: grid;
  align-content: center;
  gap: var(--space-3);
  padding: clamp(1rem, 3vw, 2rem);
  border-left: 1px solid var(--color-border);
}
.loss-context__frame {
  margin-top: -0.35rem;
  font-family: var(--font-mono);
  font-size: 1.15rem;
}
.loss-context__court-key {
  display: grid;
  grid-template-columns: 1rem minmax(0, 1fr);
  gap: 0.12rem 0.65rem;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--color-border);
}
.loss-context__court-key i {
  width: 0.85rem;
  height: 0.85rem;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--key-color);
  box-shadow: 0 0 0 1px rgb(18 52 43 / 20%);
}
.loss-context__court-key--t1 {
  --key-color: var(--color-player-t1);
}
.loss-context__court-key--t2 {
  --key-color: var(--color-player-t2);
}
.loss-context__court-key--error {
  --key-color: #d97732;
}
.loss-context__court-key--error i {
  border-radius: 0.15rem;
  transform: rotate(45deg);
}
.loss-context__court-key span {
  font-size: 0.72rem;
  font-weight: 850;
}
.loss-context__court-key small {
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 0.59rem;
  line-height: 1.45;
}
.loss-context__rallies {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.loss-context__detail-label {
  font-size: 0.67rem;
  letter-spacing: 0.025em;
}
.loss-context__rally-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.loss-context__rally {
  display: grid;
  gap: 0.08rem;
  min-width: 5.4rem;
  padding: 0.48rem 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  background: var(--color-panel);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.loss-context__rally.is-active {
  border-color: var(--color-panel-strong);
  color: var(--color-text-inverse);
  background: var(--color-panel-strong);
}
.loss-context__rally strong {
  font-size: 0.63rem;
}
.loss-context__rally small {
  color: var(--color-text-muted);
  font-size: 0.52rem;
  text-transform: uppercase;
}
.loss-context__rally.is-active small {
  color: rgb(255 255 255 / 58%);
}
.loss-context__empty-rallies {
  color: var(--color-text-muted);
  font-size: 0.67rem;
}

.direction-panel,
.tendency-panel,
.pattern-panel {
  display: grid;
  gap: var(--space-4);
}

.style-profile {
  position: relative;
  min-width: 0;
  border-top: 3px solid var(--color-panel-strong);
  border-bottom: 1px solid var(--color-border-strong);
  background: var(--color-panel);
}
.style-profile__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
  min-height: 3.2rem;
  padding: 0.65rem var(--space-3);
  border-bottom: 1px solid var(--color-border-strong);
  background: var(--color-panel-strong);
}
.style-profile__player {
  overflow: hidden;
  color: var(--player-heading-color);
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.style-profile__player--left {
  text-align: left;
}
.style-profile__player--right {
  text-align: right;
}
.style-profile__player--t1 {
  --player-heading-color: var(--color-player-t1);
}
.style-profile__player--t2 {
  --player-heading-color: var(--color-player-t2);
}
.style-profile__header-label {
  color: rgb(255 255 255 / 52%);
  font-size: 0.72rem;
  font-weight: 820;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
}
.style-profile__rows {
  display: grid;
}
.style-profile__row {
  padding: var(--space-4) var(--space-3) var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.style-profile__row:last-child {
  border-bottom: 0;
}
.style-profile__category {
  margin: 0;
  color: var(--color-text-primary);
  font-size: clamp(0.78rem, 1vw, 0.92rem);
  font-weight: 850;
  letter-spacing: 0.09em;
  text-align: center;
  text-transform: uppercase;
}
.style-profile__types {
  margin: 0.2rem 0 0;
  color: var(--color-text-muted);
  font-size: 0.64rem;
  letter-spacing: 0.015em;
  text-align: center;
}
.style-profile__bar {
  display: grid;
  grid-template-columns: minmax(6rem, 0.55fr) minmax(10rem, 1.4fr) minmax(
      6rem,
      0.55fr
    );
  gap: var(--space-3);
  align-items: center;
  margin-top: 0.85rem;
}
.style-profile__stat {
  display: grid;
  gap: 0.1rem;
  opacity: 0;
  transition: opacity 420ms ease 120ms;
}
.style-profile.is-visible .style-profile__stat {
  opacity: 1;
}
.style-profile__stat--left {
  justify-items: end;
  text-align: right;
}
.style-profile__stat--right {
  justify-items: start;
  text-align: left;
}
.style-profile__stat--t1 .style-profile__stat-pct {
  color: var(--color-player-t1);
}
.style-profile__stat--t2 .style-profile__stat-pct {
  color: var(--color-player-t2);
}
.style-profile__stat-pct {
  font-family: var(--font-mono);
  font-size: clamp(1rem, 1.6vw, 1.3rem);
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}
.style-profile__stat-count {
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  white-space: nowrap;
}
.style-profile__track {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 0.55rem;
}
.style-profile__tick {
  justify-self: center;
  width: 1px;
  height: 0.9rem;
  background: var(--color-border-strong);
}
.style-profile__fill {
  position: relative;
  height: 100%;
  width: 0;
  border-radius: 0.12rem;
  background: var(--fill-color);
  transition: width 620ms cubic-bezier(0.22, 1, 0.36, 1) 60ms;
}
.style-profile__fill--t1 {
  --fill-color: var(--color-player-t1);
  justify-self: end;
}
.style-profile__fill--t2 {
  --fill-color: var(--color-player-t2);
  justify-self: start;
}
.style-profile.is-visible .style-profile__fill {
  width: var(--fill-target);
}
.style-profile__note {
  margin: 0;
  padding: var(--space-3);
  border-top: 1px solid var(--color-border-strong);
  color: var(--color-text-muted);
  font-size: 0.7rem;
  line-height: 1.5;
  text-align: center;
}

@media (max-width: 39.9375rem) {
  .style-profile__bar {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "left right" "track track";
    row-gap: 0.5rem;
  }
  .style-profile__stat--left {
    grid-area: left;
  }
  .style-profile__stat--right {
    grid-area: right;
  }
  .style-profile__track {
    grid-area: track;
  }
}

.shot-direction-selection {
  display: grid;
  gap: var(--space-5);
  min-width: 0;
}
.shot-direction__overall,
.shot-selection {
  min-width: 0;
  overflow: hidden;
  border-top: 3px solid var(--color-panel-strong);
  border-bottom: 1px solid var(--color-border-strong);
  background: var(--color-panel);
}
.shot-direction__section-heading {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  align-items: baseline;
  padding: 0.72rem var(--space-4);
  color: var(--color-text-inverse);
  background: var(--color-panel-strong);
}
.shot-direction__section-heading strong {
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.shot-direction__section-heading span {
  color: rgb(255 255 255 / 54%);
  font-size: 0.55rem;
  font-weight: 750;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.shot-direction__rows {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.shot-direction__row {
  --direction-player: var(--color-neutral);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
  align-content: start;
  align-items: center;
  padding: clamp(1rem, 2vw, 1.35rem) var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.shot-direction__row + .shot-direction__row {
  border-left: 1px solid var(--color-border);
}
.shot-direction__row--t1 {
  --direction-player: var(--color-player-t1);
}
.shot-direction__row--t2 {
  --direction-player: var(--color-player-t2);
}
.shot-direction__player {
  overflow: hidden;
  color: var(--direction-player);
  font-size: clamp(0.72rem, 1.1vw, 0.88rem);
  letter-spacing: 0.045em;
  line-height: 1.25;
  text-overflow: ellipsis;
  text-transform: uppercase;
}
.shot-direction__values {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  color: var(--color-text-primary);
  font-family: var(--font-mono);
  font-size: clamp(0.7rem, 1.1vw, 0.82rem);
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}
.shot-direction__straight {
  color: #294a51;
}
.shot-direction__crosscourt {
  color: #8a672c;
  text-align: right;
}
.shot-direction__errors {
  min-width: 0;
  margin-top: 0.35rem;
}
.shot-direction__error-blocks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}
.shot-direction__error-block {
  min-width: 0;
  overflow-x: auto;
  padding: 0.55rem;
  border-radius: 0.4rem;
  background: var(--color-panel-muted);
}
.shot-direction__error-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
}
.shot-direction__error-table caption {
  padding: 0.2rem 0.3rem 0.55rem;
  color: var(--direction-player);
  font-weight: 850;
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
}
.shot-direction__error-table th,
.shot-direction__error-table td {
  padding: 0.4rem 0.3rem;
  border-bottom: 1px solid var(--color-border);
  text-align: right;
}
.shot-direction__error-table th:first-child {
  text-align: left;
}
.shot-direction__error-table thead,
.shot-direction__error-table tbody th {
  color: var(--color-text-muted);
  font-weight: 500;
}
.shot-direction__error-table abbr {
  text-decoration: none;
}
.shot-direction__error-table tfoot {
  font-weight: 800;
}
.shot-direction__error-table tfoot th,
.shot-direction__error-table tfoot td {
  border-bottom: 0;
}
.shot-direction__error-totals {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1rem;
  margin-top: 0.85rem;
  font-size: 0.68rem;
}
.shot-direction__error-totals > span {
  display: inline-flex;
  gap: 0.4rem;
  align-items: baseline;
  color: var(--color-text-muted);
}
.shot-direction__error-totals strong {
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
}
.shot-direction__error-note,
.shot-direction__legend {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.65rem;
  line-height: 1.5;
}
.shot-direction__legend {
  padding: 0.65rem var(--space-4);
}
@media (max-width: 55rem) {
  .shot-direction__rows {
    grid-template-columns: minmax(0, 1fr);
  }
  .shot-direction__row + .shot-direction__row {
    border-left: 0;
  }
}
.shot-direction__track {
  position: relative;
  height: 0.65rem;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    #365c62 0 var(--straight-share, 50%),
    #c09a54 var(--straight-share, 50%) 100%
  );
  box-shadow: inset 0 0 0 1px rgb(18 49 43 / 10%);
}
.shot-direction__track::after {
  position: absolute;
  inset: -0.2rem auto -0.2rem 50%;
  width: 1px;
  content: "";
  background: rgb(255 255 255 / 78%);
  box-shadow: 0 0 0 1px rgb(18 49 43 / 12%);
}
.shot-direction__marker {
  position: absolute;
  z-index: 2;
  top: 50%;
  width: 0.78rem;
  height: 0.78rem;
  border: 2px solid #fffdf4;
  border-radius: 50%;
  background: var(--direction-player);
  box-shadow: 0 0 0 1px rgb(18 49 43 / 22%);
  transform: translate(-50%, -50%);
}
.shot-direction__track.is-unavailable {
  background:
    repeating-linear-gradient(
      135deg,
      transparent 0 5px,
      rgb(112 126 119 / 10%) 5px 9px
    ),
    var(--color-panel-muted);
}
.shot-selection {
  display: grid;
}
.shot-selection__courts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3.5rem);
  padding: clamp(1.25rem, 3vw, 2.25rem);
}
.shot-selection__player {
  min-width: 0;
}
.shot-selection__frame {
  display: grid;
  justify-items: center;
  width: min(100%, 33rem);
  margin: var(--space-4) auto 0;
}
.shot-selection__edge {
  color: var(--color-text-muted);
  font-size: 0.5rem;
  font-weight: 850;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.shot-selection__edge--net {
  margin-bottom: 0.35rem;
}
.shot-selection__court {
  width: 100%;
  overflow: hidden;
  border: 0.28rem solid #275f53;
  background: #176b58;
  box-shadow: 0 0.55rem 1.25rem rgb(18 49 43 / 10%);
}
.shot-selection__court-svg {
  display: block;
  width: 100%;
  height: auto;
}
.shot-selection__depth-region {
  stroke: rgb(206 210 190 / 72%) !important;
  stroke-width: 2.5px !important;
  stroke-dasharray: none !important;
  cursor: default !important;
  outline: none;
}
.shot-selection__depth-region--front {
  fill: rgb(247 235 190 / 9%) !important;
}
.shot-selection__depth-region--mid {
  fill: rgb(199 216 198 / 8%) !important;
}
.shot-selection__depth-region--rear {
  fill: rgb(22 48 45 / 8%) !important;
}
.shot-selection__depth-region:hover,
.shot-selection__depth-region:focus {
  stroke: rgb(237 231 211 / 88%) !important;
  stroke-width: 3.5px !important;
}
.shot-selection__depth-region--front:hover,
.shot-selection__depth-region--front:focus {
  fill: rgb(247 235 190 / 13%) !important;
}
.shot-selection__depth-region--mid:hover,
.shot-selection__depth-region--mid:focus {
  fill: rgb(199 216 198 / 12%) !important;
}
.shot-selection__depth-region--rear:hover,
.shot-selection__depth-region--rear:focus {
  fill: rgb(22 48 45 / 13%) !important;
}
.shot-selection__origin-label {
  text-anchor: middle;
  pointer-events: none;
}
.shot-selection__origin-label text {
  paint-order: stroke fill;
  stroke: rgb(12 68 56 / 72%);
  stroke-width: 3px;
  stroke-linejoin: round;
}
.shot-selection__origin {
  fill: rgb(255 253 244 / 70%);
  font-size: 15px;
  font-weight: 850;
  letter-spacing: 3px;
}
.shot-selection__shot {
  fill: #fffdf4;
  font-family: var(--font-display);
  font-size: 31px;
  font-stretch: condensed;
  font-weight: 850;
  letter-spacing: 1px;
}
.shot-selection__frequency {
  fill: rgb(255 253 244 / 91%);
  font-size: 14px;
  font-weight: 700;
}
.shot-selection__sample {
  fill: rgb(255 253 244 / 68%);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 750;
}
.shot-selection__origin-label.is-insufficient .shot-selection__shot {
  fill: rgb(255 253 244 / 66%);
  font-size: 21px;
  letter-spacing: 1.5px;
}
.shot-selection__shot.is-unavailable {
  fill: rgb(255 253 244 / 55%);
  font-size: 22px;
}
.shot-direction-selection__note {
  margin: 0;
  padding: 0.72rem var(--space-4);
  border-left: 2px solid #91a59a;
  color: var(--color-text-muted);
  background: #f5f6f2;
  font-size: 0.58rem;
  line-height: 1.55;
}

.score-games {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  min-width: 0;
}
.score-game {
  width: 100%;
  min-width: 0;
  overflow: hidden;
  border-top: 3px solid var(--color-panel-strong);
  border-bottom: 1px solid var(--color-border-strong);
  background: var(--color-panel);
}
.score-game__heading {
  display: grid;
  grid-template-columns: minmax(8rem, 0.45fr) minmax(0, 1fr);
  align-items: stretch;
  min-height: 5.4rem;
  color: var(--color-text-inverse);
  background: var(--color-panel-strong);
}
.score-game__game {
  display: grid;
  align-content: center;
  gap: 0.2rem;
  padding: var(--space-3) var(--space-5);
  border-right: 1px solid rgb(255 255 255 / 14%);
}
.score-game__eyebrow {
  color: rgb(255 255 255 / 58%);
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.score-game__title {
  font-family: var(--font-display);
  font-stretch: condensed;
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  letter-spacing: 0.035em;
  text-transform: uppercase;
}
.score-game__scoreboard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-4);
  padding: 0.7rem var(--space-5);
}
.score-game__player {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  min-width: 0;
}
.score-game__player--t1 {
  justify-content: flex-end;
}
.score-game__player--t2 {
  justify-content: flex-start;
}
.score-game__player-name {
  overflow: hidden;
  color: rgb(255 255 255 / 84%);
  font-size: clamp(0.68rem, 1vw, 0.82rem);
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.score-game__score {
  font-family: var(--font-mono);
  font-size: clamp(1.8rem, 3vw, 2.55rem);
  line-height: 1;
}
.score-game__player--t1 .score-game__score {
  color: var(--color-player-t1);
}
.score-game__player--t2 .score-game__score {
  color: var(--color-player-t2);
}
.score-game__divider {
  color: rgb(255 255 255 / 34%);
  font-size: 1.2rem;
}
.score-progression-chart {
  min-height: 14.25rem;
  margin: 0.35rem 0.5rem 0.15rem;
}
.score-progression__explainer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border-block: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  font-size: var(--font-size-label);
}
.score-progression__explainer-title {
  color: var(--color-text-primary);
  font-size: var(--font-size-caption);
}
.score-progression__lead {
  display: inline-flex;
  gap: 0.45rem;
  align-items: center;
}
.score-progression__lead::before {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  content: "";
  background: var(--color-neutral);
}
.score-progression__lead--t1::before {
  background: var(--color-player-t1);
}
.score-progression__lead--t2::before {
  background: var(--color-player-t2);
}

.rally-length {
  display: grid;
  gap: var(--space-4);
}
.rally-duel {
  overflow: hidden;
  border-top: 3px solid var(--color-panel-strong);
  border-bottom: 1px solid var(--color-border-strong);
  background: var(--color-panel);
}
.rally-duel__header {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  align-items: center;
  padding: 0.7rem var(--space-4);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-panel-muted);
}
.rally-duel__title {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: baseline;
}
.rally-duel__title strong {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
}
.rally-duel__title span {
  color: var(--color-text-secondary);
  font-size: var(--font-size-caption);
  font-weight: 700;
}
.rally-duel__sample {
  padding: 0.32rem 0.62rem;
  border: 1px solid var(--color-border-strong);
  border-radius: 999px;
  color: var(--color-text-secondary);
  background: var(--color-panel);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.rally-duel__battle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2.2rem minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-4);
}
.rally-duel__player {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.1rem var(--space-3);
  align-items: end;
}
.rally-duel__player--right {
  text-align: right;
}
.rally-duel__player-name {
  overflow: hidden;
  color: var(--color-text-secondary);
  font-size: clamp(0.7rem, 1vw, 0.84rem);
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rally-duel__outcome {
  display: flex;
  gap: 0.35rem;
  align-items: baseline;
  grid-row: span 2;
}
.rally-duel__player--right .rally-duel__outcome {
  grid-column: 1;
  justify-self: start;
}
.rally-duel__player--right .rally-duel__player-name,
.rally-duel__player--right .rally-duel__percentage {
  grid-column: 2;
}
.rally-duel__wins {
  font-family: var(--font-mono);
  font-size: clamp(1.65rem, 3vw, 2.3rem);
  line-height: 0.9;
}
.rally-duel__player--t1 .rally-duel__wins {
  color: var(--color-player-t1);
}
.rally-duel__player--t2 .rally-duel__wins {
  color: var(--color-player-t2);
}
.rally-duel__wins-label {
  color: var(--color-text-primary);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}
.rally-duel__percentage {
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 0.68rem;
}
.rally-duel__versus {
  display: grid;
  width: 2.1rem;
  height: 2.1rem;
  place-items: center;
  border: 1px solid var(--color-border-strong);
  border-radius: 50%;
  color: var(--color-text-muted);
  background: var(--color-panel-muted);
  font-size: 0.56rem;
  font-weight: 850;
}
.rally-duel__strip {
  position: relative;
  display: flex;
  width: calc(100% - 2 * var(--space-4));
  height: 0.62rem;
  margin: 0 var(--space-4) var(--space-4);
  overflow: hidden;
  border-radius: 999px;
  background: var(--color-panel-muted);
  box-shadow: inset 0 0 0 1px rgb(20 42 34 / 8%);
}
.rally-duel__share {
  width: var(--share);
  height: 100%;
}
.rally-duel__share--t1 {
  background: var(--color-player-t1);
}
.rally-duel__share--t2 {
  background: var(--color-player-t2);
}
.rally-duel__midline {
  position: absolute;
  inset: -0.2rem auto -0.2rem 50%;
  width: 1px;
  background: var(--color-panel-strong);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 76%);
}

.tendency-row {
  position: relative;
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}
.tendency-row::after {
  position: absolute;
  inset: auto auto -1px 0;
  width: var(--tendency-share);
  height: 2px;
  content: "";
  background: var(--color-editorial-red);
}
.tendency-row__origin {
  color: var(--color-text-muted);
  font-size: var(--font-size-label);
  font-weight: 800;
  text-transform: uppercase;
}
.tendency-row__shot {
  font-size: 0.95rem;
}
.tendency-row__evidence {
  font-family: var(--font-mono);
  font-size: var(--font-size-label);
}
.tendency-row--insufficient {
  color: var(--color-text-muted);
}
.tendency-row--insufficient::after {
  background: var(--color-border-strong);
}

/* Rally pattern → loss: a broadcast-style sequence trail, chip-linked, ending in the outcome */
.pattern-trail {
  display: grid;
  gap: 0.75rem;
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.pattern-trail:last-child {
  border-bottom: 0;
}
.pattern-trail__header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
}
.pattern-trail__label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.pattern-trail__index {
  color: var(--color-editorial-red);
  font-size: var(--font-size-label);
  font-weight: 850;
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
}
.pattern-trail__count {
  padding: 0.1rem 0.48rem;
  border: 1px solid var(--color-border-strong);
  border-radius: 999px;
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 800;
}
.pattern-trail__meta {
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.02em;
}
.pattern-trail__chain {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.75rem 0.9rem;
}
.pattern-trail__node {
  position: relative;
  display: grid;
  gap: 0.2rem;
  min-width: 6.5rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--color-border-strong);
  border-top: 3px solid var(--node-color, var(--color-neutral));
  background: var(--color-panel);
}
.pattern-trail__node--t1 {
  --node-color: var(--color-player-t1);
}
.pattern-trail__node--t2 {
  --node-color: var(--color-player-t2);
}
.pattern-trail__node--reconstructed {
  border-right-style: dashed;
  border-bottom-style: dashed;
  border-left-style: dashed;
}
.pattern-trail__node--proxy {
  background: repeating-linear-gradient(
    135deg,
    transparent 0 5px,
    rgb(185 144 69 / 12%) 5px 9px
  );
}
.pattern-trail__node--linked::after {
  position: absolute;
  top: 50%;
  right: -0.68rem;
  color: var(--color-text-muted);
  font-size: 0.78rem;
  line-height: 1;
  content: "›";
  transform: translateY(-50%);
}
.pattern-trail__player {
  overflow: hidden;
  color: var(--color-text-muted);
  font-size: 0.54rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.pattern-trail__shot {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.15;
}
.pattern-trail__node--outcome {
  flex-basis: 100%;
  margin-top: 0.3rem;
  border-top-color: var(--color-editorial-red);
  background: var(--color-panel-strong);
}
.pattern-trail__node--outcome::before {
  position: absolute;
  top: -0.98rem;
  left: 0.55rem;
  color: var(--color-editorial-red);
  font-size: 0.85rem;
  line-height: 1;
  content: "↓";
}
.pattern-trail__node--outcome .pattern-trail__player {
  color: rgb(255 255 255 / 55%);
}
.pattern-trail__node--outcome .pattern-trail__shot {
  color: var(--color-text-inverse);
  text-transform: capitalize;
}

.court-positioning {
  display: grid;
  gap: var(--space-5);
}
.court-positioning__courts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
}
.court-positioning__player {
  min-width: 0;
  padding-top: var(--space-3);
  border-top: 2px solid var(--color-panel-strong);
}
.court-positioning__frame {
  display: grid;
  gap: 0.35rem;
  width: min(100%, 34rem);
  margin: var(--space-4) auto 0;
}
.court-positioning__court {
  overflow: hidden;
  border: 0.3rem solid #27695b;
  background: #176b58;
  box-shadow: 0 0.35rem 0.9rem rgb(16 55 45 / 9%);
}
.court-positioning__heat-legend {
  display: grid;
  gap: 0.2rem;
  width: min(100%, 34rem);
  margin: var(--space-3) auto 0;
}
.court-positioning__heat-legend-title {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}
.court-positioning__heat-legend-bar {
  height: 0.5rem;
  border-radius: 999px;
}
.court-positioning__heat-legend-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}
.court-positioning__court-svg {
  filter: saturate(1.05);
}
.court-positioning__court-svg [data-court-layer="players"] {
  filter: blur(2px) saturate(1.18) contrast(1.06);
}
.court-positioning__court-svg .court-positioning__heat-cell {
  pointer-events: none;
}
.court-positioning__court-svg .court-positioning__analytic-zone {
  fill: transparent !important;
  fill-opacity: 0 !important;
  stroke: rgb(180 194 179 / 68%) !important;
  stroke-width: 1.5px !important;
  stroke-dasharray: none !important;
  vector-effect: non-scaling-stroke;
}
.court-positioning__court-svg--has-heatmap .court-positioning__analytic-zone {
  stroke: rgb(180 194 179 / 38%) !important;
}
.court-positioning__court-svg .court-positioning__analytic-zone:hover,
.court-positioning__court-svg .court-positioning__analytic-zone:focus {
  fill: rgb(255 255 255 / 4%) !important;
  stroke: #ffd166 !important;
  outline: none;
}
.court-positioning__zone-label {
  color: #fffdf4;
  pointer-events: none;
  text-anchor: middle;
}
.court-positioning__zone-code,
.court-positioning__zone-percent {
  fill: #fffdf4;
  paint-order: stroke;
  stroke: rgb(17 73 60 / 54%);
  stroke-linejoin: round;
}
.court-positioning__zone-code {
  font-family: var(--font-sans);
  font-size: 19px;
  font-weight: 820;
  letter-spacing: 2px;
  stroke-width: 3px;
  opacity: 0.72;
}
.court-positioning__zone-percent {
  font-family: var(--font-mono);
  font-size: 26px;
  font-weight: 900;
  stroke-width: 4px;
}
.court-positioning__zone-label.is-prominent .court-positioning__zone-code {
  opacity: 0.94;
}
.court-positioning__edge {
  color: var(--color-text-muted);
  font-size: 0.53rem;
  font-weight: 50;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
}
.court-positioning__edge--net {
  color: var(--color-text-secondary);
  background-color: pink;
  font-size: small;
  font-weight: 800;
  font: bold;
}
.court-depth {
  display: grid;
  gap: var(--space-3);
  padding-block: var(--space-4);
  border-block: 1px solid var(--color-border-strong);
}
.court-depth__header {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  align-items: baseline;
}
.court-depth__header span {
  font-size: 0.72rem;
  font-weight: 880;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.court-depth__header small {
  color: var(--color-text-muted);
  font-size: 0.56rem;
}
.court-depth__rows {
  display: grid;
  gap: var(--space-3);
}
.court-depth__row {
  display: grid;
  grid-template-columns: minmax(8rem, 11rem) minmax(0, 1fr);
  gap: 0.35rem var(--space-4);
  align-items: center;
}
.court-depth__player {
  overflow: hidden;
  color: var(--depth-player-color);
  font-size: 0.67rem;
  letter-spacing: 0.025em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.court-depth__row--t1 {
  --depth-player-color: var(--color-player-t1);
}
.court-depth__row--t2 {
  --depth-player-color: var(--color-player-t2);
}
.court-depth__bar {
  display: flex;
  height: 0.68rem;
  overflow: hidden;
  background: var(--color-panel-muted);
  box-shadow: inset 0 0 0 1px rgb(20 42 34 / 7%);
}
.court-depth__segment {
  display: block;
  height: 100%;
}
.court-depth__segment--front {
  background: #d8c783;
}
.court-depth__segment--mid {
  background: #7fa078;
}
.court-depth__segment--rear {
  background: #456b5e;
}
.court-depth__values {
  display: grid;
  grid-column: 2;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.court-depth__values span {
  display: flex;
  gap: 0.35rem;
  align-items: baseline;
  color: var(--color-text-muted);
  font-size: 0.52rem;
  font-weight: 800;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}
.court-depth__values span:nth-child(2) {
  justify-content: center;
}
.court-depth__values span:last-child {
  justify-content: flex-end;
}
.court-depth__values b {
  color: var(--color-text-secondary);
  font-family: var(--font-mono);
  font-size: 0.59rem;
}
.court-positioning__data-note {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.51rem;
  line-height: 1.5;
  text-align: center;
}

/* Shot Placement -------------------------------------------------------- */
.shot-placement {
  display: grid;
  gap: var(--space-4);
}
.shot-placement__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border-strong);
}
.shot-placement__player-switch {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.shot-placement__player-tab {
  position: relative;
  padding: 0.65rem 0.85rem;
  border: 0;
  color: var(--color-text-muted);
  background: transparent;
  font: inherit;
  font-size: var(--font-size-caption);
  font-weight: 800;
  cursor: pointer;
}
.shot-placement__player-tab::after {
  position: absolute;
  inset: auto 0.85rem 0;
  height: 3px;
  content: "";
  background: transparent;
}
.shot-placement__player-tab--t1.is-active::after {
  background: var(--color-player-t1);
}
.shot-placement__player-tab--t2.is-active::after {
  background: var(--color-player-t2);
}
.shot-placement__player-tab.is-active {
  color: var(--color-text-primary);
}
.shot-placement__player-tab:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}
.shot-placement__coverage-note {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.58rem;
  letter-spacing: 0.02em;
}
.shot-placement__shot-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.shot-placement__shot-filter-tab {
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--color-border-strong);
  border-radius: 999px;
  color: var(--color-text-secondary);
  background: transparent;
  font: inherit;
  font-size: 0.65rem;
  font-weight: 750;
  cursor: pointer;
}
.shot-placement__shot-filter-tab.is-active {
  border-color: var(--color-editorial-red);
  color: var(--color-text-inverse);
  background: var(--color-editorial-red);
}
.shot-placement__shot-filter-tab.is-unavailable {
  color: var(--color-text-muted);
  border-color: var(--color-border);
  cursor: default;
  opacity: 0.55;
}
.shot-placement__shot-filter-tab--all {
  margin-right: 0.35rem;
  border-style: dashed;
}
.shot-placement__shot-filter-tab:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}
.shot-placement__matrix-empty {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.7rem;
}

.shot-placement__layout {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: start;
}

.shot-placement__matrix-panel {
  min-width: 0;
}
.shot-placement__axis-title {
  margin: 0 0 var(--space-2);
  color: var(--color-text-muted);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.shot-placement__matrix-scroll {
  overflow-x: auto;
  padding-bottom: 0.3rem;
  scrollbar-color: var(--color-border-strong) transparent;
}
.shot-placement__matrix-grid {
  display: grid;
  min-width: 30rem;
  grid-template-columns: 10.5rem repeat(6, minmax(3.1rem, 1fr));
  gap: 3px;
  padding: 3px;
  border-radius: var(--radius-sm);
  background: var(--color-panel-muted);
}
.shot-placement__corner,
.shot-placement__column {
  display: grid;
  min-width: 0;
  place-items: center;
  padding: var(--space-2);
  color: var(--color-text-inverse);
  background: var(--color-panel-strong);
  font-size: 0.61rem;
  font-weight: 850;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.shot-placement__corner {
  position: sticky;
  left: 0;
  z-index: 2;
  min-height: 2.75rem;
  text-align: left;
  white-space: normal;
}
.shot-placement__column {
  min-height: 2.75rem;
}
.shot-placement__row-label {
  position: sticky;
  left: 0;
  z-index: 1;
  display: grid;
  gap: 0.1rem;
  min-width: 0;
  padding: 0.55rem 0.7rem;
  border: 0;
  border-radius: 0.18rem;
  text-align: left;
  color: var(--color-text-primary);
  background: #e9ece6;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.shot-placement__row-shot {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}
.shot-placement__row-summary {
  color: var(--color-text-secondary);
  font-size: 0.55rem;
  font-weight: 650;
  letter-spacing: 0.01em;
}
.shot-placement__row-label.is-selected {
  background: var(--color-panel-strong);
  box-shadow: inset 0 0 0 2px var(--color-editorial-red);
}
.shot-placement__row-label.is-selected .shot-placement__row-shot {
  color: var(--color-text-inverse);
}
.shot-placement__row-label.is-selected .shot-placement__row-summary {
  color: rgb(248 250 249 / 72%);
}
.shot-placement__row-label.is-unavailable {
  color: var(--color-text-muted);
  cursor: default;
}
.shot-placement__row-label.is-unavailable .shot-placement__row-shot {
  color: var(--color-text-muted);
}
.shot-placement__row-label:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: -2px;
}
.shot-placement__cell {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 3.1rem;
  place-items: center;
  overflow: hidden;
  border-radius: 0.18rem;
  color: var(--color-text-primary);
  background: var(--color-panel);
  -webkit-tap-highlight-color: transparent;
}
.shot-placement__cell::before {
  position: absolute;
  inset: 0;
  content: "";
  background: var(--color-placement-intensity);
  opacity: var(--cell-intensity, 0);
  transition: opacity 180ms ease;
}
.shot-placement__cell strong {
  position: relative;
  font-family: var(--font-mono);
  font-size: clamp(0.82rem, 1.3vw, 1.05rem);
  line-height: 1;
}
.shot-placement__cell.is-zero strong {
  color: var(--color-text-muted);
  font-weight: 600;
}
.shot-placement__cell.is-selected-row {
  box-shadow: inset 0 0 0 1px rgb(24 35 31 / 14%);
}
.shot-placement__cell.is-unavailable {
  color: var(--color-text-muted);
  background: var(--color-panel-muted);
  font-size: 0.7rem;
}
.shot-placement__cell:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: -2px;
}

.shot-placement__court-panel {
  display: grid;
  gap: var(--space-3);
  min-width: 0;
}
.shot-placement__court-summary {
  display: grid;
  gap: 0.2rem;
}
.shot-placement__court-shot {
  margin: 0;
  font-family: var(--font-display);
  font-stretch: condensed;
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.shot-placement__court-count {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 0.72rem;
  font-weight: 650;
}
.shot-placement__court-provenance {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.61rem;
  font-weight: 700;
}
.shot-placement__court-top {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.61rem;
  letter-spacing: 0.01em;
}
.shot-placement__court-hint {
  margin: 0.15rem 0 0;
  color: var(--color-text-muted);
  font-size: 0.6rem;
  font-style: italic;
}
.shot-placement__frame {
  display: grid;
  gap: 0.35rem;
  width: min(100%, 28rem);
  margin-inline: auto;
}
.shot-placement__court {
  overflow: hidden;
  border: 0.3rem solid #27695b;
  background: #176b58;
  box-shadow: 0 0.35rem 0.9rem rgb(16 55 45 / 9%);
}
.shot-placement__edge {
  color: var(--color-text-muted);
  font-size: 0.53rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
}
.shot-placement__edge--net {
  color: var(--color-text-secondary);
}
.shot-placement__evidence-note {
  margin: 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 0.61rem;
  line-height: 1.55;
}
/* One dashed path separates zones without doubling shared rectangle edges. */
.shot-placement__court-svg .shot-placement__zone-dividers {
  fill: none;
  stroke: rgb(230 192 108 / 85%);
  stroke-width: 1.5px;
  stroke-dasharray: 7 6;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}
.shot-placement__court-svg .shot-placement__analytic-zone {
  fill: var(--color-placement-intensity) !important;
  fill-opacity: var(--placement-intensity, 0) !important;
  stroke: transparent !important;
  stroke-width: 1.5px !important;
  stroke-dasharray: 7 6 !important;
  vector-effect: non-scaling-stroke;
}
.shot-placement__court-svg .shot-placement__analytic-zone:focus {
  stroke: #ffd166 !important;
  outline: none;
}
.shot-placement__court-svg .shot-placement__analytic-zone.is-clickable:hover {
  stroke: #ffd166 !important;
}
.shot-placement__court-svg .shot-placement__analytic-zone.is-clickable {
  cursor: pointer;
}
.shot-placement__court-svg .shot-placement__analytic-zone.is-origin-selected {
  stroke: #ffd166 !important;
  stroke-width: 3px !important;
}
.shot-placement__court-svg .shot-placement__analytic-zone.is-origin-dimmed {
  fill-opacity: calc(var(--placement-intensity, 0) * 0.35) !important;
}
.shot-placement__zone-label {
  pointer-events: none;
  text-anchor: middle;
}
.shot-placement__zone-code,
.shot-placement__zone-count {
  fill: #fffdf4;
  paint-order: stroke;
  stroke: rgb(17 73 60 / 54%);
  stroke-linejoin: round;
}
.shot-placement__zone-code {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 2px;
  stroke-width: 3px;
  opacity: 0.78;
}
.shot-placement__zone-count {
  font-family: var(--font-mono);
  font-size: 27px;
  font-weight: 900;
  stroke-width: 4px;
}

.shot-placement-tooltip {
  position: absolute;
  z-index: 5;
  display: grid;
  gap: 0.2rem;
  min-width: 11rem;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius-sm);
  transform: translate(-50%, -100%) translateY(-14px);
  color: var(--color-text-inverse);
  background: var(--color-panel-strong);
  box-shadow: var(--shadow-raised);
  font-size: 0.64rem;
  line-height: 1.4;
  pointer-events: none;
}
.shot-placement-tooltip[hidden] {
  display: none;
}
.shot-placement-tooltip.is-below {
  transform: translate(-50%, 0) translateY(14px);
}
.shot-placement-tooltip__player {
  font-size: 0.68rem;
  font-weight: 800;
}
.shot-placement-tooltip__share {
  color: rgb(248 250 249 / 72%);
}
.shot-placement-tooltip__hint {
  margin-top: 0.15rem;
  color: rgb(248 250 249 / 60%);
  font-style: italic;
}
.shot-placement {
  position: relative;
}

@media (max-width: 39.9375rem) {
  .court-pair {
    grid-template-columns: 1fr;
  }
  .zone-outcomes {
    grid-template-columns: 1fr;
  }
  .zone-outcome__court {
    width: min(100%, 34rem);
  }
  .court-panel__court {
    height: 38rem;
  }
  .shot-placement__layout {
    grid-template-columns: 1fr;
  }
  .shot-placement__frame {
    width: min(100%, 30rem);
  }
}

@media (max-width: 39.9375rem) {
  .chapter-interstitial__inner {
    grid-template-columns: 1fr;
  }
  .chapter-interstitial__number {
    font-size: clamp(2rem, 9vw, 3rem);
  }
  .direction-pair,
  .tendency-pair,
  .pattern-pair {
    grid-template-columns: 1fr;
  }
  .court-panel__court,
  .court-panel__court--compact {
    height: min(38rem, 155vw);
  }
  .score-game__heading {
    grid-template-columns: 1fr;
  }
  .score-game__game {
    padding: var(--space-3) var(--space-4);
    border-right: 0;
    border-bottom: 1px solid rgb(255 255 255 / 14%);
  }
  .score-game__scoreboard {
    padding-inline: var(--space-4);
  }
  .score-progression-chart {
    min-height: 14rem;
    margin-inline: 0;
  }
  .score-progression__explainer {
    align-items: flex-start;
    flex-direction: column;
  }
  .rally-pulse__streak {
    grid-template-columns: 1fr;
  }
  .error-comparison__players {
    grid-template-columns: 1fr;
  }
  .error-comparison__player + .error-comparison__player {
    border-top: 1px solid var(--color-border-strong);
    border-left: 0;
  }
  .error-comparison__court-heading,
  .error-comparison__court-frame,
  .error-comparison__split-section {
    width: min(100%, 19.5rem);
  }
  .loss-context__axis-title {
    padding-left: 0;
    text-align: left;
  }
  .loss-context__detail-body {
    grid-template-columns: 1fr;
  }
  .loss-context__court-panel {
    min-height: 28rem;
  }
  .loss-context__court-context {
    border-top: 1px solid var(--color-border);
    border-left: 0;
  }
  .court-positioning__courts {
    grid-template-columns: 1fr;
  }
  .court-positioning__frame {
    width: min(100%, 34rem);
  }
  .shot-placement__matrix-grid {
    min-width: 27rem;
    grid-template-columns: 8.5rem repeat(6, minmax(2.85rem, 1fr));
  }
  .shot-placement__toolbar {
    flex-direction: column;
    align-items: flex-start;
  }
  .shot-outcomes__controls {
    flex-direction: column;
    align-items: stretch;
  }
  .shot-efficiency__header,
  .shot-efficiency__row {
    grid-template-columns: 5.5rem minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-2);
  }
  .shot-efficiency__track-heading {
    display: none;
  }
  .shot-efficiency__player-heading:last-child {
    grid-column: 3;
  }
  .shot-efficiency__row {
    min-height: 6.3rem;
  }
  .shot-efficiency__shot {
  }
  .shot-efficiency__result--left {
    grid-column: 2;
    grid-row: 1;
  }
  .shot-efficiency__result--right {
    grid-column: 3;
    grid-row: 1;
  }
  .shot-efficiency__track {
    grid-column: 2 / 4;
    grid-row: 2;
  }
  .shot-selection__courts {
    grid-template-columns: 1fr;
  }
  .shot-selection__frame {
    width: min(100%, 34rem);
  }
}

@media (max-width: 31.9375rem) {
  .shot-direction__section-heading {
    align-items: flex-start;
    flex-direction: column;
  }
  .shot-selection__courts {
    padding-inline: var(--space-3);
  }
  .tendency-row {
    grid-template-columns: 3.5rem minmax(0, 1fr);
  }
  .tendency-row__evidence {
    grid-column: 2;
  }
  .pattern-trail__chain {
    gap: 0.3rem 0.3rem;
  }
  .pattern-trail__node {
    min-width: 5.5rem;
    padding: 0.42rem 0.55rem;
  }
  .score-game__scoreboard {
    gap: var(--space-2);
  }
  .score-game__player {
    align-items: center;
    flex-direction: column;
    gap: 0.15rem;
  }
  .score-game__player--t2 {
    flex-direction: column-reverse;
  }
  .score-game__player-name {
    max-width: 8.5rem;
  }
  .score-progression-chart {
    min-height: 15rem;
  }
  .rally-duel__header {
    align-items: flex-start;
  }
  .rally-duel__battle {
    grid-template-columns: minmax(0, 1fr) 1.7rem minmax(0, 1fr);
    gap: var(--space-2);
    padding: var(--space-3);
  }
  .rally-duel__player {
    grid-template-columns: 1fr;
    gap: 0.2rem;
    align-items: start;
  }
  .rally-duel__player--right .rally-duel__outcome,
  .rally-duel__player--right .rally-duel__player-name,
  .rally-duel__player--right .rally-duel__percentage {
    grid-column: 1;
    grid-row: auto;
  }
  .rally-duel__player--right .rally-duel__outcome {
    justify-self: end;
  }
  .rally-duel__player--right .rally-duel__player-name {
    grid-row: 1;
  }
  .rally-duel__outcome {
    grid-row: auto;
  }
  .rally-duel__wins-label {
    font-size: 0.58rem;
  }
  .rally-duel__versus {
    width: 1.7rem;
    height: 1.7rem;
  }
  .rally-duel__strip {
    width: calc(100% - 2 * var(--space-3));
    margin: 0 var(--space-3) var(--space-3);
  }
  .rally-pulse__streak-player {
    grid-template-columns: 1fr auto;
  }
  .rally-pulse__streak-player--right {
    grid-template-columns: auto 1fr;
  }
  .rally-pulse__streak-player--right .rally-pulse__streak-name {
    grid-column: 2;
  }
  .rally-pulse__streak-unit {
    display: none;
  }
  .zone-outcome__court {
    border-width: 0.3rem;
  }
  .zone-outcome-legend {
    align-items: flex-start;
    flex-direction: column;
  }
  .error-comparison__header {
    padding: var(--space-3) var(--space-4);
  }
  .error-comparison__hero {
    padding-inline: var(--space-3);
  }
  .error-comparison__scoreline {
    grid-template-columns: minmax(0, 1fr) 2.7rem minmax(0, 1fr);
  }
  .error-comparison__hero-player strong {
    font-size: clamp(2.8rem, 16vw, 4rem);
  }
  .error-comparison__type-row {
    grid-template-columns: minmax(3rem, 1fr) 6rem minmax(3rem, 1fr);
  }
  .error-comparison__player {
    padding: var(--space-4);
  }
  .error-comparison__court-heading span {
    display: none;
  }
  .error-comparison__data-note {
    padding-inline: var(--space-3);
  }
  .loss-context__player-switch {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .loss-context__player-tab {
    padding-inline: var(--space-2);
    font-size: 0.66rem;
  }
  .loss-context__filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .loss-context__filter:first-child {
    grid-column: 1 / -1;
  }
  .loss-context__detail-header {
    align-items: flex-start;
    flex-direction: column;
  }
  .loss-context__rally-headline {
    justify-items: start;
    text-align: left;
  }
  .loss-context__court-panel {
    min-height: 23rem;
    padding: var(--space-3);
  }
  .loss-context__court-context,
  .loss-context__rallies {
    padding: var(--space-3);
  }
  .court-depth__header {
    align-items: flex-start;
    flex-direction: column;
  }
  .court-depth__row {
    grid-template-columns: 1fr;
  }
  .court-depth__values {
    grid-column: 1;
  }
  .shot-efficiency__header,
  .shot-efficiency__row {
    grid-template-columns: 4.5rem minmax(0, 1fr) minmax(0, 1fr);
    padding-inline: var(--space-2);
  }
  .shot-efficiency__player-heading {
    font-size: 0.56rem;
  }
  .shot-efficiency__result {
    padding-inline: 0.2rem;
  }
  .shot-efficiency__count {
    font-size: 0.92rem;
  }
  .shot-efficiency__rate {
    font-size: 0.56rem;
  }
}

/* Placement / Shot outcomes view switch -- the top-level choice, styled as a
   segmented control so it reads as more significant than the filters below it. */
.shot-outcomes__view-switch {
  display: inline-flex;
  gap: 0.15rem;
  margin-bottom: var(--space-4);
  padding: 0.2rem;
  border-radius: var(--radius-pill);
  background: var(--color-panel-muted);
}
.shot-outcomes__view-choice {
  padding: 0.45rem 1rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-text-secondary);
  font: inherit;
  font-size: 0.72rem;
  font-weight: 750;
  cursor: pointer;
}
.shot-outcomes__view-choice[aria-pressed="true"] {
  background: var(--color-panel-strong);
  color: var(--color-text-inverse);
}
.shot-outcomes__view-choice:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* Interactive shot outcomes share the existing court and six-zone overlay. */
.shot-outcomes__controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-5);
  align-items: flex-start;
  margin: 0 0 var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border-strong);
}
.shot-outcomes__filter {
  display: grid;
  gap: 0.3rem;
}
.shot-outcomes__filter-label {
  color: var(--color-text-muted);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.shot-outcomes__choices {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* Player: underline tabs colour-matched to the player, echoing shot-placement's player switch. */
.shot-outcomes__choice--player {
  padding: 0.4rem 0.15rem;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--color-text-muted);
  font-weight: 800;
}
.shot-outcomes__choice--player[aria-pressed="true"] {
  color: var(--color-text-primary);
}
.shot-outcomes__choice--player.shot-outcomes__choice--t1[aria-pressed="true"] {
  border-bottom-color: var(--color-player-t1);
}
.shot-outcomes__choice--player.shot-outcomes__choice--t2[aria-pressed="true"] {
  border-bottom-color: var(--color-player-t2);
}

/* Shot type: pill tabs, matching shot-placement's shot-type filter. */
.shot-outcomes__choice--shot-type {
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 0.65rem;
  font-weight: 750;
}
.shot-outcomes__choice--shot-type[aria-pressed="true"] {
  border-color: var(--color-editorial-red);
  background: var(--color-editorial-red);
  color: var(--color-text-inverse);
}
.shot-outcomes__choice--all {
  border-style: dashed;
}

/* Outcome: pill with a colour chip that previews the route/legend colour. */
.shot-outcomes__choice--outcome {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.32rem 0.7rem 0.32rem 0.55rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 0.65rem;
  font-weight: 750;
}
.shot-outcomes__choice--outcome::before {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  content: "";
  background: var(--outcome-color, var(--color-neutral));
  flex-shrink: 0;
}
.shot-outcomes__choice--outcome[aria-pressed="true"] {
  border-color: var(--outcome-color, var(--color-border-strong));
  background: var(--outcome-color, var(--color-panel-strong));
  color: var(--color-text-inverse);
}
.shot-outcomes__choice:focus-visible,
.shot-outcomes__route-button:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.shot-outcomes__layout {
  display: grid;
  grid-template-columns: minmax(16rem, 0.85fr) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}
.shot-outcomes__court-panel {
  min-width: 0;
}
.shot-outcomes__court-panel h4,
.shot-outcomes__details h4 {
  margin: 0 0 0.6rem;
  font-size: 0.85rem;
}
.shot-outcomes__court {
  width: min(100%, 25rem);
  margin-inline: auto;
}
.shot-outcomes__svg {
  overflow: visible;
}
.shot-outcomes__details {
  min-width: 0;
  padding: var(--panel-padding);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-panel-muted);
  box-shadow: var(--shadow-subtle);
  font-size: 0.8rem;
}
.shot-outcomes__stats,
.shot-outcomes__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-block: 0.85rem;
}
.shot-outcomes__stats span,
.shot-outcomes__legend span {
  padding: 0.25rem 0.55rem;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--outcome-color) 14%, var(--color-panel));
  color: var(--color-text-primary);
  font-size: 0.68rem;
  font-weight: 650;
}
.shot-outcomes__routes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-block: 0.85rem;
}

/* Route buttons are results of an origin-zone selection, not a filter -- kept visually secondary/smaller than the filter pills above. */
.shot-outcomes__route-button {
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-panel);
  color: var(--color-text-secondary);
  font: inherit;
  font-size: 0.66rem;
  font-weight: 650;
  cursor: pointer;
}
.shot-outcomes__route-button[aria-pressed="true"] {
  border-color: var(--color-panel-strong);
  background: var(--color-panel-strong);
  color: var(--color-text-inverse);
}
.shot-outcomes__note {
  font-size: 0.7rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}
.shot-outcomes__events {
  max-height: 24rem;
  overflow-y: auto;
  padding-left: 1.4rem;
}
.shot-outcomes__events li {
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--color-border);
}
.shot-outcomes__events li > * {
  display: block;
  margin-bottom: 0.25rem;
}
.shot-outcomes__events small {
  color: var(--color-text-muted);
}
.shot-outcomes__zone-label {
  fill: #fffdf4;
  font-size: 19px;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
}
.shot-outcomes__route {
  cursor: pointer;
  outline: none;
}
.shot-outcomes__route-hit {
  fill: none;
  stroke: transparent;
  stroke-width: 20px;
}
.shot-outcomes__route-line {
  vector-effect: non-scaling-stroke;
}
.shot-outcomes__route:hover .shot-outcomes__route-line,
.shot-outcomes__route:focus .shot-outcomes__route-line,
.shot-outcomes__route[aria-pressed="true"] .shot-outcomes__route-line {
  filter: drop-shadow(0 0 3px #fff);
}
.shot-outcomes__route-count {
  fill: white;
  stroke: #12372f;
  stroke-width: 5px;
  paint-order: stroke;
  text-anchor: middle;
  font-size: 23px;
  font-weight: 800;
}
.shot-outcomes__missed {
  font-size: 32px;
  font-weight: 800;
  text-anchor: middle;
  cursor: pointer;
}
@media (max-width: 48rem) {
  .shot-outcomes__layout {
    grid-template-columns: minmax(0, 1fr);
  }
}