/* Center panel: half court, shot markers, callout, shot-quality blocks. */

.center { position: relative; display: flex; flex-direction: column; min-height: 0; min-width: 0; padding: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.court-wrap { position: relative; flex: 1; min-height: 0; width: 100%; }
.court { display: block; width: 100%; height: 100%; }
.court-floor { fill: var(--court); }
.court-paint { fill: var(--court-paint); }
.court .line { fill: none; stroke: var(--court-line); stroke-width: 1.5px; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.court .dashed { stroke-dasharray: 6 6; }
.court .hash { stroke-width: 1px; }
.court .rim { stroke: var(--ink-2); stroke-width: 1.5px; }
.court .board { stroke: var(--ink-2); stroke-width: 2.5px; }

.shot { stroke-width: 1.6px; vector-effect: non-scaling-stroke; }
.shot.side-away { stroke: var(--away); }
.shot.side-home { stroke: var(--home); }
.shot.missed { fill: none; }
.shot.made { stroke: var(--court); stroke-width: 1.2px; }
.shot.made.side-away { fill: var(--away); }
.shot.made.side-home { fill: var(--home); }
.pulse { fill: none; stroke-width: 2px; vector-effect: non-scaling-stroke; animation: pulse 1.1s ease-out infinite; }
.pulse.side-away { stroke: var(--away); }
.pulse.side-home { stroke: var(--home); }
.pulse[hidden] { display: none; }
@keyframes pulse { 0% { r: 7; opacity: 1; } 100% { r: 22; opacity: 0; } }

.callout-layer { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
.callout {
  position: absolute;
  min-width: 156px;
  max-width: 210px;
  padding: 8px 11px 9px;
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--away);
  border-radius: var(--radius);
  background: var(--panel-3);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  transform: translate(14px, -50%);
  animation: co-in 200ms var(--ease);
}
.callout.side-home { border-left-color: var(--home); }
.callout.flip { transform: translate(-14px, -50%); }
.callout.leaving { animation: co-out 240ms var(--ease) forwards; }
.co-name { font-family: var(--font-cond); font-stretch: 75%; font-weight: 800; font-size: 18px; line-height: 1.1; text-transform: uppercase; }
.co-shot { margin-top: 2px; font-size: 12px; color: var(--ink-2); }
.co-prob { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-top: 6px; }
.co-prob b { font-family: var(--font-cond); font-stretch: 75%; font-weight: 700; font-size: 16px; }
.co-result { margin-top: 5px; font-family: var(--font-cond); font-stretch: 75%; font-weight: 800; font-size: 15px; letter-spacing: 0.08em; opacity: 0; transform: translateY(4px); transition: opacity 180ms var(--ease), transform 180ms var(--ease); }
.callout.made .co-result, .callout.miss .co-result { opacity: 1; transform: none; }
.callout.made .co-result { color: var(--good); }
.callout.miss .co-result { color: var(--ink-3); }
@keyframes co-in { from { opacity: 0; scale: 0.96; } }
@keyframes co-out { to { opacity: 0; scale: 0.96; } }

/* Legend for the shot markers, upper-left corner of the court panel */

.court-legend { position: absolute; left: 12px; top: 12px; display: flex; flex-direction: column; gap: 5px; padding: 8px 10px; background: var(--panel-2); border-radius: var(--radius); font-size: 11px; color: var(--ink-2); }
.court-legend .k { margin-bottom: 1px; }
.court-legend span { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.court-legend i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.court-legend .lg-made { background: var(--ink-2); }
.court-legend .lg-miss { border: 1.6px solid var(--ink-2); }
.court-legend .lg-away { background: var(--away); border-radius: 2px; }
.court-legend .lg-home { background: var(--home); border-radius: 2px; }

/* Shot quality: one block per team in the lower corners of the court panel */

.sq-row { display: contents; }
.sq { position: absolute; bottom: 12px; width: 150px; display: flex; flex-direction: column; gap: 7px; padding: 9px 11px 10px; background: var(--panel-2); border-radius: var(--radius); border-left: 3px solid var(--away); }
.sq-away { left: 12px; }
.sq-home { right: 12px; border-left: 0; border-right: 3px solid var(--home); align-items: flex-end; text-align: right; }
.sq-head { display: flex; flex-direction: column; gap: 2px; }
.sq-tri { font-family: var(--font-cond); font-stretch: 75%; font-weight: 800; font-size: 16px; line-height: 1; }
.sq-count { font-size: 11px; color: var(--ink-3); }
.sq-count:empty { display: none; }
.sq-vals { display: flex; flex-direction: column; gap: 5px; }
.sq-home .sq-vals { align-items: flex-end; }
.sq-val { display: flex; align-items: baseline; gap: 6px; }
.sq-val b { font-family: var(--font-cond); font-stretch: 75%; font-weight: 700; font-size: 18px; line-height: 1; }
.sq-diff { font-size: 13px; color: var(--ink-2); }
.sq-diff[data-sign="pos"] { color: var(--good); }
.sq-diff[data-sign="neg"] { color: var(--serious); }
.sq-diff:empty { display: none; }