.live-radar-board {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(16rem, .8fr);
  gap: 1rem;
  align-items: start;
  margin-top: 1rem;
}
.live-radar { margin-bottom: 1.5rem; }
.live-radar-card { padding: 1.25rem; min-width: 0; }
.live-radar-card .live-card-heading { padding: 0 0 1rem; }
.live-radar-pitch, .live-radar-pressure { display: block; width: 100%; height: auto; }
.live-radar [hidden] { display: none !important; }
.live-radar-pitch { max-height: 20rem; }
.radar-pitch-surface {
  fill: color-mix(in srgb, var(--accent-teal) 30%, var(--bg-surface-raised));
  stroke: var(--border-default);
  stroke-width: .4;
}
.radar-pitch-stripes { fill: var(--accent-teal); opacity: .15; }
.radar-field-stage { position: relative; border-radius: 6px; background: var(--bg-surface-raised); overflow: hidden; }
.radar-ball-trail { fill: none; stroke: var(--brand-main); stroke-width: .8; stroke-linecap: round; stroke-linejoin: round; opacity: .7; }
.radar-ball-motion { transition: transform .9s linear; }
.radar-ball-halo { animation: radar-pulse 1.6s ease-out infinite; }
@keyframes radar-pulse { 0% { opacity: .35; } 70% { opacity: .05; } 100% { opacity: .2; } }
.live-radar-feed { max-height: 22rem; }
.live-radar-feed-heading { margin-top: .5rem; }
.live-timeline-event.live-event--side-home { border-left-color: var(--accent-sky); }
.live-timeline-event.live-event--side-away { border-left-color: var(--accent-teal); }
.radar-field-clock { position: absolute; top: .6rem; left: 50%; transform: translateX(-50%); display: grid; text-align: center; padding: .3rem .75rem; border-radius: 6px; background: var(--bg-surface-overlay); border: 1px solid var(--border-default); font-size: var(--font-caption); color: var(--text-caption); }
.radar-field-clock strong { font-size: var(--font-body); color: var(--text-primary); font-variant-numeric: tabular-nums; }
.radar-field-event { position: absolute; left: .75rem; right: .75rem; bottom: .6rem; display: grid; gap: .1rem; text-align: center; font-size: var(--font-caption); color: var(--text-caption); overflow-wrap: anywhere; }
.radar-field-event-label { font-size: var(--font-micro); letter-spacing: .07em; text-transform: uppercase; color: var(--text-caption); }
.radar-field-event span:last-child { color: var(--text-muted); }
.radar-pitch-lines { stroke: var(--text-muted); fill: none; stroke-width: .45; opacity: .8; }
.radar-pitch-spots { fill: var(--text-muted); }
.radar-ball { fill: var(--brand-main); stroke: var(--text-primary); stroke-width: .5; }
.radar-ball-halo { fill: var(--brand-main); opacity: .18; }
.live-radar-note, .live-radar-empty {
  color: var(--text-caption); font-size: var(--font-caption); line-height: 1.6; margin-top: .75rem;
}
.live-radar-empty { display: grid; place-items: center; text-align: center; min-height: 12rem; }
.live-radar-legend { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; font-size: var(--font-caption); color: var(--text-caption); }
.live-radar-legend span { display: inline-flex; align-items: center; gap: .45rem; overflow-wrap: anywhere; }
.live-radar-legend i { width: 1.25rem; height: 0; border-top: 3px solid; flex-shrink: 0; }
.radar-home-key { color: var(--accent-sky); }
.radar-away-key { color: var(--accent-teal); }
.radar-pressure-grid { stroke: var(--border-default); stroke-width: 1; }
.radar-pressure-label { fill: var(--text-primary); opacity: .8; font-size: 14px; font-variant-numeric: tabular-nums; }
.radar-pressure-bar-home { fill: var(--accent-sky); }
.radar-pressure-bar-away { fill: var(--accent-teal); }
.radar-pressure-zero { stroke: var(--text-muted); stroke-width: 1.2; }
.radar-marker { font-size: 14px; text-anchor: middle; fill: var(--text-primary); }
.radar-marker-yellow { fill: var(--brand-main); stroke: var(--text-primary); stroke-width: .5; }
.radar-marker-red { fill: var(--status-error); stroke: var(--text-primary); stroke-width: .5; }
.radar-marker-xg { fill: var(--text-primary); font-size: 12px; font-variant-numeric: tabular-nums; }
.radar-shot-home { stroke: var(--accent-sky); fill: var(--accent-sky); }
.radar-shot-away { stroke: var(--accent-teal); fill: var(--accent-teal); }
.radar-shot-unknown { stroke: var(--text-primary); fill: var(--text-primary); }
.radar-shot-ring { fill: none; stroke-width: 1.5; }
.radar-shot-fill { stroke: none; }
.radar-shot-stroke { fill: none; stroke-width: 1.5; stroke-linecap: round; }
.live-radar-symbols { display: flex; flex-wrap: wrap; gap: .45rem .9rem; margin: .35rem 0 0; padding: 0; list-style: none; font-size: var(--font-caption); color: var(--text-caption); }
.live-radar-symbols li { display: inline-flex; align-items: center; gap: .35rem; }
.live-radar-symbols svg { width: 1rem; height: 1rem; overflow: visible; }
.radar-xg { margin-left: .35rem; font-size: var(--font-caption); color: var(--text-caption); font-variant-numeric: tabular-nums; }
.live-radar-pressure [tabindex="0"]:focus { outline: 2px solid var(--brand-main); }
.live-radar[data-stale="true"] .live-radar-pitch,
.live-radar[data-stale="true"] .live-radar-pressure { opacity: .7; }
@media (max-width: 900px) {
  .live-radar-board { grid-template-columns: minmax(0, 1fr); }
  .live-radar-card { padding: 1rem; }
}
@media (max-width: 600px) {
  .live-radar-pressure .radar-pressure-label { font-size: 20px; }
  .live-radar-pressure .radar-marker { font-size: 22px; }
  .live-radar-pressure .radar-marker-yellow,
  .live-radar-pressure .radar-marker-red {
    transform-box: fill-box;
    transform-origin: center;
    transform: scale(1.4);
  }
}