/* ===== Tokens ===== */
:root{
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);

  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-5:1.25rem; --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem;
  --space-12:3rem; --space-16:4rem;

  --font-display:'Clash Display','Satoshi',system-ui,sans-serif;
  --font-body:'Satoshi',system-ui,-apple-system,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;

  --radius:14px;
  --radius-sm:9px;
}

/* Dark (default) — broadcast analysis desk */
:root, [data-theme="dark"]{
  --bg:            oklch(0.18 0.014 160);
  --bg-2:          oklch(0.22 0.016 160);
  --surface:       oklch(0.245 0.017 162);
  --surface-2:     oklch(0.285 0.018 162);
  --border:        oklch(0.36 0.02 162);
  --text:          oklch(0.96 0.008 150);
  --text-muted:    oklch(0.75 0.014 155);
  --text-faint:    oklch(0.62 0.014 155);

  --accent:        oklch(0.80 0.19 145);
  --accent-ink:    oklch(0.20 0.05 150);
  --blue:          oklch(0.72 0.15 245);
  --red:           oklch(0.66 0.21 25);
  --amber:         oklch(0.82 0.16 78);

  --turf-a:        oklch(0.34 0.055 152);
  --turf-b:        oklch(0.28 0.048 152);
  --stripe:        oklch(1 0 0 / 0.035);
  --line:          oklch(0.95 0.01 150 / 0.72);
  --goal:          oklch(0.98 0 0 / 0.9);
  --zone:          oklch(0.66 0.21 25);
  --flag-a:        oklch(0.85 0.19 90);
  --flag-b:        oklch(0.62 0.22 28);
  --shadow: 0 1px 2px rgb(0 0 0 / .4), 0 12px 34px rgb(0 0 0 / .32);
}

[data-theme="light"]{
  --bg:            oklch(0.965 0.01 150);
  --bg-2:          oklch(0.985 0.006 150);
  --surface:       oklch(1 0 0);
  --surface-2:     oklch(0.965 0.008 150);
  --border:        oklch(0.88 0.012 150);
  --text:          oklch(0.24 0.02 155);
  --text-muted:    oklch(0.46 0.018 155);
  --text-faint:    oklch(0.58 0.016 155);

  --accent:        oklch(0.58 0.15 150);
  --accent-ink:    oklch(0.99 0 0);
  --blue:          oklch(0.52 0.17 250);
  --red:           oklch(0.55 0.21 27);
  --amber:         oklch(0.66 0.15 70);

  --turf-a:        oklch(0.62 0.10 150);
  --turf-b:        oklch(0.55 0.095 150);
  --stripe:        oklch(1 0 0 / 0.07);
  --line:          oklch(1 0 0 / 0.92);
  --goal:          oklch(1 0 0);
  --zone:          oklch(0.55 0.21 27);
  --flag-a:        oklch(0.82 0.18 92);
  --flag-b:        oklch(0.56 0.22 29);
  --shadow: 0 1px 2px rgb(20 40 30 / .07), 0 10px 30px rgb(20 40 30 / .09);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:
    radial-gradient(1100px 600px at 80% -10%, color-mix(in oklab, var(--accent) 9%, transparent), transparent 60%),
    var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:var(--text-base);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  min-height:100dvh;
}
a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-color:color-mix(in oklab,var(--accent) 60%,transparent)}
a:hover{text-decoration-color:var(--accent)}

/* ===== Topbar ===== */
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
  padding:var(--space-4) clamp(var(--space-4),3vw,var(--space-10));
  border-bottom:1px solid var(--border);
  background:color-mix(in oklab,var(--bg) 82%, transparent);
  backdrop-filter:blur(10px);
  position:sticky;top:0;z-index:20;
}
.brand{display:flex;align-items:center;gap:var(--space-3)}
.logo{width:30px;height:30px;color:var(--accent);flex:none}
.brand-text{display:flex;flex-direction:column;line-height:1.15}
.brand-name{font-family:var(--font-display);font-weight:700;font-size:var(--text-lg);letter-spacing:-0.01em}
.brand-sub{font-size:var(--text-xs);color:var(--text-faint);letter-spacing:.04em;text-transform:uppercase}
.icon-btn{
  display:grid;place-items:center;width:38px;height:38px;border-radius:10px;
  border:1px solid var(--border);background:var(--surface);color:var(--text-muted);cursor:pointer;
  transition:color .18s ease, border-color .18s ease, transform .18s ease;
}
.icon-btn:hover{color:var(--text);border-color:color-mix(in oklab,var(--accent) 50%,var(--border));transform:translateY(-1px)}

/* ===== Layout ===== */
.shell{
  display:grid;
  grid-template-columns:minmax(0,1.62fr) minmax(330px,0.95fr);
  gap:var(--space-6);
  padding:var(--space-6) clamp(var(--space-4),3vw,var(--space-10)) var(--space-10);
  max-width:1560px;margin:0 auto;align-items:start;
}
@media (max-width:1080px){ .shell{grid-template-columns:1fr} }

.pitch-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:var(--space-5);box-shadow:var(--shadow);
  position:sticky;top:86px;
}
@media (max-width:1080px){ .pitch-card{position:static} }

.page-title{
  font-family:var(--font-display);font-weight:600;font-size:var(--text-xl);
  letter-spacing:-0.02em;margin:0 0 var(--space-2);line-height:1.1;
}
.lede{margin:0 0 var(--space-4);color:var(--text-muted);font-size:var(--text-sm);max-width:62ch}
.lede strong{color:var(--text);font-weight:600}

.pitch-wrap{position:relative;border-radius:var(--radius-sm);overflow:hidden;background:var(--turf-b)}
#pitch{display:block;width:100%;height:auto;touch-action:none;user-select:none}
.pitch-label,.line-label{
  font-family:var(--font-mono);font-size:1.9px;fill:var(--line);letter-spacing:.12px;
}
.line-label{fill:var(--red);font-size:2px;font-weight:600}
.line-label.amber{fill:var(--amber)}

.freeze-tag{
  font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.04em;
  background:color-mix(in oklab,var(--amber) 16%,var(--surface));
  color:var(--text-muted);border:1px solid color-mix(in oklab,var(--amber) 45%,var(--border));
  padding:8px 12px;border-radius:99px;animation:fadeIn .25s ease both;white-space:nowrap;
}
.freeze-tag[hidden]{display:none}
@keyframes fadeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* ===== Players ===== */
.player{cursor:grab}
.player.dragging{cursor:grabbing}
.player circle.body{stroke-width:0.34}
.player .glyph{
  font-family:var(--font-mono);font-size:2.1px;font-weight:600;
  text-anchor:middle;dominant-baseline:central;pointer-events:none;
}
.player .halo{fill:none;stroke-width:0.5;opacity:0}
.player.selected .halo{opacity:1;stroke-dasharray:1.2 .9;animation:spin 9s linear infinite;transform-box:fill-box;transform-origin:center}
@keyframes spin{to{transform:rotate(360deg)}}
.tag{font-family:var(--font-mono);font-size:1.8px;font-weight:600;text-anchor:middle;pointer-events:none}
.player .grabring{fill:transparent;stroke:oklch(1 0 0 / .0);stroke-width:2.4}
.player:hover circle.body{filter:brightness(1.12)}

/* ===== Toolbar / controls ===== */
.pitch-toolbar{
  display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:flex-end;justify-content:space-between;
  margin-top:var(--space-4);
}
.tool-group{display:flex;gap:var(--space-2);align-items:center;flex-wrap:wrap}
.tool-label{
  font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.09em;color:var(--text-faint);
  font-family:var(--font-mono);margin-right:var(--space-1);
}
.chips{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.chip{
  font-family:var(--font-body);font-size:var(--text-xs);font-weight:500;
  padding:6px 11px;border-radius:99px;border:1px solid var(--border);
  background:var(--surface-2);color:var(--text-muted);cursor:pointer;
  transition:all .16s ease;white-space:nowrap;
}
.chip:hover{color:var(--text);border-color:color-mix(in oklab,var(--accent) 45%,var(--border))}
.chip[aria-pressed="true"]{
  background:color-mix(in oklab,var(--accent) 20%,var(--surface));
  border-color:var(--accent);color:var(--text);font-weight:700;
}
.btn{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--font-body);
  font-size:var(--text-sm);font-weight:700;padding:10px 16px;border-radius:10px;
  border:1px solid transparent;cursor:pointer;transition:all .16s ease;
}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{filter:brightness(1.07);transform:translateY(-1px)}
.btn-primary:disabled{opacity:.45;cursor:not-allowed;transform:none;filter:none}
.btn-ghost{background:var(--surface-2);color:var(--text-muted);border-color:var(--border)}
.btn-ghost:hover{color:var(--text)}
.btn:focus-visible,.chip:focus-visible,.icon-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ===== Panel ===== */
.panel{display:flex;flex-direction:column;gap:var(--space-4);min-width:0}
.card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:var(--space-5);box-shadow:var(--shadow);
}
.card-title{
  font-family:var(--font-body);font-weight:700;font-size:var(--text-sm);
  margin:0 0 var(--space-1);letter-spacing:.01em;
}
.card-title.mt{margin-top:var(--space-5)}
.card-note{margin:0 0 var(--space-3);font-size:var(--text-xs);color:var(--text-faint);line-height:1.5}
.eyebrow{
  font-family:var(--font-mono);font-size:var(--text-xs);text-transform:uppercase;
  letter-spacing:.1em;color:var(--text-faint);display:block;margin-bottom:2px;
}

/* Verdict */
.verdict-card{border-left:4px solid var(--border);transition:border-color .3s ease}
.verdict-card[data-state="offence"]{border-left-color:var(--red);background:
  linear-gradient(100deg,color-mix(in oklab,var(--red) 11%,transparent),transparent 62%),var(--surface)}
.verdict-card[data-state="clear"]{border-left-color:var(--accent);background:
  linear-gradient(100deg,color-mix(in oklab,var(--accent) 12%,transparent),transparent 62%),var(--surface)}
.verdict-head{display:flex;gap:var(--space-4);align-items:center}
.verdict-flag{width:40px;flex:none;color:var(--text-faint);opacity:.32;transition:opacity .3s ease,color .3s ease}
.verdict-flag .flag-cloth{transform-origin:9px 9px;transform:rotate(-90deg) scale(.6);opacity:0;transition:none}
.verdict-card[data-state="offence"] .verdict-flag{opacity:1;color:var(--text)}
.verdict-card[data-state="offence"] .flag-cloth{animation:raise .55s cubic-bezier(.2,.9,.3,1.3) forwards}
.verdict-card[data-state="clear"] .verdict-flag{opacity:.22}
@keyframes raise{
  0%{transform:rotate(-90deg) scale(.6);opacity:0}
  60%{transform:rotate(8deg) scale(1.04);opacity:1}
  100%{transform:rotate(0) scale(1);opacity:1}
}
.verdict-title{font-family:var(--font-display);font-weight:600;font-size:var(--text-lg);margin:0;letter-spacing:-0.01em;line-height:1.15}
.verdict-sub{margin:var(--space-3) 0 0;font-size:var(--text-sm);color:var(--text-muted)}
.reasons{list-style:none;margin:var(--space-4) 0 0;padding:0;display:flex;flex-direction:column;gap:var(--space-2)}
.reasons li{
  position:relative;padding-left:var(--space-5);font-size:var(--text-sm);color:var(--text-muted);
  animation:slideIn .3s ease both;
}
.reasons li:nth-child(2){animation-delay:.06s}
.reasons li:nth-child(3){animation-delay:.12s}
.reasons li:nth-child(4){animation-delay:.18s}
.reasons li:nth-child(5){animation-delay:.24s}
.reasons li::before{
  content:"";position:absolute;left:var(--space-2);top:.62em;width:5px;height:5px;border-radius:2px;
  background:var(--text-faint);
}
.reasons li.bad::before{background:var(--red)}
.reasons li.good::before{background:var(--accent)}
.reasons li strong{color:var(--text);font-weight:700}
.reasons li code{font-family:var(--font-mono);font-size:.9em;color:var(--text)}
@keyframes slideIn{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}

/* Status list */
.status-list{display:flex;flex-direction:column;gap:var(--space-2)}
.status-row{
  display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);
  border-radius:var(--radius-sm);background:var(--surface-2);border:1px solid var(--border);
}
.dot{width:12px;height:12px;border-radius:50%;flex:none;border:1.5px solid oklch(1 0 0 / .35)}
.status-name{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:600;flex:none;width:3.2em}
.status-role{font-size:var(--text-xs);color:var(--text-faint);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.badge{
  font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  padding:3px 8px;border-radius:99px;flex:none;
}
.badge.on{background:color-mix(in oklab,var(--accent) 22%,transparent);color:var(--accent)}
.badge.off{background:color-mix(in oklab,var(--red) 24%,transparent);color:var(--red)}
.badge.neutral{background:var(--surface);color:var(--text-faint);border:1px solid var(--border)}

.metrics{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-2);margin-top:var(--space-3)}
.metric{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:var(--space-2) var(--space-3)}
.metric-k{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--text-faint);font-family:var(--font-mono)}
.metric-v{font-family:var(--font-mono);font-size:var(--text-sm);font-weight:600;color:var(--text)}

/* Involvement */
.involve-list{display:flex;flex-direction:column;gap:var(--space-3)}
.involve-row{border:1px solid var(--border);border-radius:var(--radius-sm);padding:var(--space-3);background:var(--surface-2)}
.involve-row.flagged{border-color:color-mix(in oklab,var(--red) 55%,var(--border))}
.involve-head{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-2)}
.involve-head .status-name{width:auto}
.empty{font-size:var(--text-xs);color:var(--text-faint);font-style:italic;padding:var(--space-2) 0}

/* Switch */
.switch{display:flex;gap:var(--space-3);align-items:flex-start;margin-top:var(--space-5);cursor:pointer}
.switch input{position:absolute;opacity:0;width:0;height:0}
.switch-box{
  width:38px;height:22px;border-radius:99px;background:var(--surface-2);border:1px solid var(--border);
  position:relative;flex:none;transition:background .18s ease,border-color .18s ease;margin-top:2px;
}
.switch-box::after{
  content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;
  background:var(--text-faint);transition:transform .18s ease,background .18s ease;
}
.switch input:checked + .switch-box{background:color-mix(in oklab,var(--accent) 32%,var(--surface));border-color:var(--accent)}
.switch input:checked + .switch-box::after{transform:translateX(16px);background:var(--accent)}
.switch input:focus-visible + .switch-box{outline:2px solid var(--accent);outline-offset:2px}
.switch span strong{display:block;font-size:var(--text-sm);font-weight:600}
.switch span em{display:block;font-size:var(--text-xs);color:var(--text-faint);font-style:normal;line-height:1.45}

/* Rules */
.rule-list{margin:var(--space-2) 0 0;padding-left:var(--space-5);display:flex;flex-direction:column;gap:var(--space-2)}
.rule-list li{font-size:var(--text-sm);color:var(--text-muted)}
.rule-list strong{color:var(--text)}
.rule-list em{font-style:normal;font-weight:600;color:var(--text)}
.src{margin:var(--space-4) 0 0;font-size:var(--text-xs);color:var(--text-faint)}

.foot{
  border-top:1px solid var(--border);padding:var(--space-5) clamp(var(--space-4),3vw,var(--space-10));
  font-size:var(--text-xs);color:var(--text-faint);text-align:center;
}

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

/* Keep the pitch big enough to drag on small screens */
@media (max-width:680px){
  .pitch-card,.panel-col,.card{min-width:0}
  .pitch-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
  #pitch{min-width:560px}
  .pitch-card{padding:var(--space-4)}
  .metrics{grid-template-columns:1fr}
  .pitch-toolbar{gap:var(--space-3)}
}


/* ===== Phase 2 — rebound ===== */
.phase-pill{
  display:inline-block;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-faint);border:1px solid var(--border);
  background:var(--surface-2);padding:2px 8px;border-radius:99px;margin-bottom:var(--space-2);
}
.phase-pill.solid{
  background:color-mix(in oklab,var(--accent) 22%,var(--surface));
  border-color:color-mix(in oklab,var(--accent) 55%,var(--border));color:var(--text);
  margin-bottom:0;
}
.phase-pill[hidden]{display:none}
.phase-head{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-1)}
.phase-head .card-title{margin:0}
.phase2-btn{margin-top:var(--space-4)}
.phase2-btn[hidden]{display:none}
.phase2-card[hidden]{display:none}
.phase2-card{border-top:3px solid color-mix(in oklab,var(--accent) 60%,var(--border))}
.phase2-actions{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-top:var(--space-5)}

/* ghosts — positions at the freeze frame */
.ghost{pointer-events:none;opacity:.9}
.ghost.dim{opacity:.28}
.ghost-glyph{
  font-family:var(--font-mono);font-size:2.1px;font-weight:600;
  text-anchor:middle;dominant-baseline:central;
}
.ghost-tag{
  font-family:var(--font-mono);font-size:1.7px;font-weight:700;text-anchor:middle;
  paint-order:stroke;stroke:oklch(0.28 0.045 150 / .78);stroke-width:.55px;stroke-linejoin:round;
}

/* draggable ball in phase 2 */
.ball-handle{cursor:grab}
.ball-handle.dragging{cursor:grabbing}
.ball-handle circle:nth-child(2){animation:ballPulse 1.8s ease-in-out infinite}
@keyframes ballPulse{0%,100%{opacity:.35;r:2.1}50%{opacity:.95;r:2.9}}

/* phase-1 controls step back while phase 2 is live */
body[data-phase="two"] #setupCard{opacity:.45;pointer-events:none;filter:saturate(.6)}


/* ===== Rebound scenario library ===== */
.tool-group-stack{display:block}
.tool-group-stack .tool-label{display:block;margin:0 0 var(--space-2)}
.tool-label em{font-style:normal;opacity:.6;text-transform:none;letter-spacing:.02em}
.chip-scenario{display:inline-flex;align-items:center;gap:.5em}
.chip-expect{
  font-family:var(--font-mono);font-size:9.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;padding:1px 5px;border-radius:4px;line-height:1.5;
}
.chip-expect.off{background:color-mix(in oklab,var(--red) 20%,transparent);color:var(--red)}
.chip-expect.on{background:color-mix(in oklab,var(--accent) 20%,transparent);color:var(--accent)}
.chip[aria-pressed="true"] .chip-expect.off{background:color-mix(in oklab,var(--red) 30%,transparent)}
.chip[aria-pressed="true"] .chip-expect.on{background:color-mix(in oklab,var(--accent) 30%,transparent)}

.scenario-hint{
  margin:var(--space-3) 0 0;font-size:13.5px;line-height:1.55;color:var(--text-muted);
  border-left:2px solid color-mix(in oklab,var(--accent) 55%,var(--border));
  padding:var(--space-1) 0 var(--space-1) var(--space-3);
}
.scenario-hint[hidden]{display:none}
.scenario-note{
  margin:0 0 var(--space-3);font-size:13.5px;line-height:1.55;color:var(--text-muted);
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:var(--space-3);
}
.scenario-note[hidden]{display:none}

.btn-secondary{
  background:color-mix(in oklab,var(--accent) 14%,var(--surface));
  border:1px solid color-mix(in oklab,var(--accent) 42%,var(--border));
  color:var(--text);
}
.btn-secondary:hover:not(:disabled){background:color-mix(in oklab,var(--accent) 22%,var(--surface))}
.btn-secondary:disabled{opacity:.42;cursor:not-allowed}