/* Whiteboard tab — counterfactual chemistry on real WC22 plays.
   Mobile-first, layered on top of site.css. Uses the same vars (--bg-elev,
   --text-dim, etc.) so the page reads as part of the same site. */

.whiteboard-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.9rem 1rem;
}

.play-picker {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex: 1 1 auto;
  min-width: 200px;
}

.play-picker select {
  background: var(--bg-elev-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.6rem;
  font: inherit;
  flex: 1 1 auto;
  max-width: 22rem;
}

.play-meta {
  flex: 1 1 100%;
  color: var(--text-dim);
  font-size: 0.92rem;
}

.play-actions {
  display: flex;
  gap: 0.5rem;
}

/* Two-column layout: pitch on the left, moves panel on the right. */
.whiteboard-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 1rem;
}

@media (min-width: 960px) {
  .whiteboard-layout {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  }
}

.whiteboard-stage {
  padding: 0.9rem;
}

.pitch-wrap {
  background: #0d4d2c;
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
}

#pitch {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 110 / 72;
}

/* Pitch primitives */
.pitch-bg { fill: #0d4d2c; }
.pitch-line { fill: none; stroke: #dceadb; stroke-width: 0.25; }
.pitch-spot { fill: #dceadb; }

/* Players — fill comes from inline style.fill driven by the play's home/away
   colors. No team-class fill rules here so the inline color always wins. */
.player-dot {
  stroke: white;
  stroke-width: 0.35;
  transition: opacity 220ms;
}
.player-dot.gk-ring {
  stroke: #ffd166;
  stroke-width: 0.4;
  fill: none;
}
.player-dot.shifted-from { opacity: 0.32; }
.player-dot.shifted-to {
  stroke: #ffd166;
  stroke-width: 0.45;
}
.player-group { pointer-events: auto; }

.player-label {
  font-family: var(--mono);
  font-size: 1.6px;
  font-weight: 600;
  fill: #ffffff;
  paint-order: stroke fill;
  stroke: rgba(0, 0, 0, 0.85);
  stroke-width: 0.45;
  text-anchor: middle;
  pointer-events: none;
}

.ball-dot {
  fill: #ffd166;
  stroke: white;
  stroke-width: 0.2;
}

.shift-arrow {
  stroke: #ffd166;
  stroke-width: 0.32;
  fill: none;
  stroke-dasharray: 0.7 0.5;
  opacity: 0.85;
}

/* Frame controls under the pitch */
.frame-controls {
  display: flex;
  gap: 0.65rem;
  align-items: center;
  margin-top: 0.75rem;
}
.scrub-wrap {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  min-height: 24px;
}
.scrub-wrap input[type="range"] {
  width: 100%;
  accent-color: var(--accent-green);
  position: relative;
  z-index: 2;
}
.scrub-wrap.focus-active input[type="range"]::-webkit-slider-runnable-track {
  background: rgba(255, 209, 102, 0.08);
}
.scrub-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.focus-band {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 8px;
  background: linear-gradient(90deg,
    rgba(255, 209, 102, 0.18),
    rgba(255, 209, 102, 0.32) 60%,
    rgba(255, 140, 90, 0.36));
  border: 1px solid rgba(255, 209, 102, 0.5);
  border-radius: 4px;
  display: none;
}
.scrub-wrap.focus-active .focus-band { display: block; }
.key-decision-marker {
  position: absolute;
  top: -10px;
  transform: translateX(-50%);
  width: 22px;
  height: 22px;
  padding: 0;
  background: transparent;
  border: none;
  color: #ffd166;
  font-size: 1.05rem;
  font-weight: 700;
  text-shadow: 0 0 4px rgba(0,0,0,0.7);
  cursor: pointer;
  pointer-events: auto;
  line-height: 1;
  z-index: 3;
}
.key-decision-marker:hover { color: #fff; transform: translateX(-50%) scale(1.15); }
.frame-counter { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Focus + linked-movement toggles */
.wb-toggles {
  display: flex;
  gap: 0.85rem;
  flex-wrap: wrap;
  align-items: center;
  flex: 1 1 100%;
  margin-top: 0.25rem;
}
.wb-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.86rem;
  color: var(--text-dim);
  cursor: pointer;
  user-select: none;
  padding: 0.18rem 0.55rem 0.18rem 0.4rem;
  border-radius: var(--radius-sm);
  background: var(--bg-elev);
  border: 1px solid var(--border);
}
.wb-toggle input { accent-color: #ffd166; margin: 0; }
.wb-toggle:hover { color: var(--text); border-color: #3a4554; }

/* Linked-movement teammate ripple visual */
.player-dot.ripple-to {
  stroke: rgba(255, 209, 102, 0.7);
  stroke-width: 0.35;
  filter: drop-shadow(0 0 1.5px rgba(255, 209, 102, 0.45));
}
.player-dot.freestyle-draggable {
  cursor: grab;
}
.player-dot.freestyle-draggable:hover {
  stroke: #ffd166;
  stroke-width: 0.55;
}

.prob-strip {
  margin-top: 0.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.2rem;
  align-items: center;
  font-family: var(--mono);
  font-size: 0.88rem;
  color: var(--text);
}
.prob-strip .swatch {
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  margin-right: 0.35rem;
  vertical-align: middle;
}
.prob-strip .swatch.score { background: #6dd58c; }
.prob-strip .swatch.concede { background: #e98074; }
.prob-strip .swatch.score-cf { background: #6dd58c; outline: 2px dashed #ffd166; outline-offset: 1px; }
.prob-strip .swatch.concede-cf { background: #e98074; outline: 2px dashed #ffd166; outline-offset: 1px; }

.delta-chart-wrap {
  margin-top: 0.75rem;
  background: var(--bg-elev-2);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.5rem 0.3rem;
}
#delta-chart {
  width: 100%;
  height: 180px;
  display: block;
}

/* Suggested moves panel */
.moves-panel { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.moves-title { margin: 0 0 0.25rem; font-size: 1.1rem; }
.moves-help { margin: 0 0 0.5rem; }

.move-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.8rem;
  cursor: pointer;
  transition: background 140ms, border-color 140ms;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.move-card:hover { background: var(--bg-elev-2); border-color: #3a4554; }
.move-card.active {
  background: var(--bg-elev-2);
  border-color: #ffd166;
  box-shadow: 0 0 0 1px rgba(255, 209, 102, 0.32);
}

.move-card .mech-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.78rem;
}
.move-card .mech-tag {
  display: inline-block;
  padding: 0.08rem 0.45rem;
  border-radius: 999px;
  background: rgba(106, 168, 255, 0.12);
  border: 1px solid rgba(106, 168, 255, 0.3);
  color: #9cc3ff;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  white-space: nowrap;
}
.move-card .mech-tag.no-mech {
  background: rgba(150, 160, 175, 0.08);
  border-color: rgba(150, 160, 175, 0.3);
  color: var(--text-dim);
}

.move-card .move-label {
  font-weight: 600;
  font-size: 0.98rem;
  line-height: 1.3;
}
.move-card .move-narrative {
  color: var(--text-dim);
  font-size: 0.85rem;
  line-height: 1.4;
}
.move-card .move-deltas {
  display: flex;
  gap: 0.55rem;
  flex-wrap: wrap;
  align-items: center;
  font-family: var(--mono);
  font-size: 0.82rem;
}
.move-card .delta-chip {
  padding: 0.1rem 0.5rem;
  border-radius: var(--radius-sm);
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}
.move-card .delta-chip.pos { color: #6dd58c; border-color: rgba(109, 213, 140, 0.25); }
.move-card .delta-chip.neg { color: #e98074; border-color: rgba(233, 128, 116, 0.25); }
.move-card .delta-chip.neutral { color: var(--text-dim); }