/* ── Player Comparison — 8-axis Spider Chart (Screen 4) ─────────────────────── */
/* Background inherited from .stub-screen (var(--bg)) so it matches the rest of
   the app across league themes — don't hardcode a darker color here. */

.cmp-wrap {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 18px 16px 40px;
  box-sizing: border-box;
  color: #e9eef7;
  position: relative;
}

.cmp-head { text-align: center; margin-bottom: 14px; }
.cmp-title {
  font-family: "Anton", "Heebo", sans-serif;
  font-size: 26px;
  letter-spacing: 0.5px;
  margin: 0;
  color: #f4f7fc;
}
.cmp-sub { font-size: 13.5px; color: #aab4c6; margin: 5px 0 0; }
.cmp-framing {
  font-size: 12.5px; color: #97a3b8; margin: 8px auto 0; max-width: 460px;
  line-height: 1.5;
}
/* Reset sits in the top corner of the panel (RTL: top-right) — out of the way,
   not stealing focus from the chart. */
/* Was positioned absolutely and landed ON the heading: the title occupied
   106–299px across a phone and this button 281–359, an 18px overlap sitting
   exactly on the first letter, so the screen read "שוואת שחקנים". It shares
   the row now — they divide the width instead of fighting for it, at every
   screen size. */
.cmp-reset-row { margin-inline-start: auto; }
.cmp-reset {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(110,168,224,0.12); color: #d6e4f6;
  border: 1.5px solid rgba(110,168,224,0.55); border-radius: 9px;
  padding: 6px 14px; font-size: 13.5px; font-weight: 600; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.cmp-reset:hover { background: rgba(110,168,224,0.22); border-color: #6ea8e0; }
.cmp-reset.hidden { display: none; }
.cmp-empty-state { text-align: center; padding: 46px 16px; color: #97a3b8; }
.cmp-empty-ic { font-size: 38px; margin-bottom: 10px; opacity: 0.9; }
.cmp-empty-state p { font-size: 14.5px; line-height: 1.5; margin: 0; }
.cmp-title-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  /* The title stays centred; the reset button is pushed to the end by its own
     auto margin, so an empty slot on the other side is not needed. */
  padding-inline-start: 0;
}
.cmp-help-btn {
  background: none; border: none; color: #6ea8e0; cursor: pointer;
  padding: 2px; display: inline-flex; align-items: center; line-height: 0;
}
.cmp-help-btn:hover { color: #9cc6f0; }
.cmp-help {
  text-align: start; background: rgba(255,255,255,0.05);
  border: 1px solid rgba(110,168,224,0.25); border-radius: 10px;
  padding: 12px 16px; margin: 11px auto 0; max-width: 470px;
}
.cmp-help-h { font-size: 15px; font-weight: 700; color: #e3e9f3; margin-bottom: 7px; }
.cmp-help ul { margin: 0; padding-inline-start: 18px; }
.cmp-help li { font-size: 13px; color: #b3bccd; line-height: 1.6; margin-bottom: 4px; }

/* ── Pickers ── */
.cmp-pickers {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.cmp-vs {
  font-family: "Anton", sans-serif;
  font-size: 16px;
  color: #5a6a85;
  letter-spacing: 1px;
}
.cmp-pick {
  position: relative;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border: 1.5px solid var(--cmp-c, #2a3550);
  border-radius: 14px;
  padding: 12px 8px 10px;
  cursor: pointer;
  min-height: 124px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: border-color .15s, transform .1s;
  box-shadow: 0 0 0 0 transparent;
}
.cmp-pick:active { transform: scale(0.98); }
.cmp-pick:hover { box-shadow: 0 0 14px -2px var(--cmp-c); }
/* Was #6f7d94, which is 3.24 on the empty slot's own panel — and this is the
   label telling a first-time reader what the slot is FOR, so it is the last
   text on the screen that should be hard to read. Opened until it clears 4.5
   there. The light theme already overrides it further down. */
.cmp-pick-empty { color: #8a96a8; font-size: 13.5px; font-weight: 500; }
.cmp-pick-photo {
  width: 64px; height: 64px;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 50% 35%, rgba(255,255,255,0.12), rgba(255,255,255,0.02));
  border: 2px solid var(--cmp-c, #2a3550);
  display: flex; align-items: flex-end; justify-content: center;
  box-shadow: 0 0 16px -4px var(--cmp-c);
}
.cmp-pick-photo img { width: 100%; height: auto; object-fit: cover; margin-bottom: -2px; }
.cmp-pick-photo .cmp-silhouette { font-size: 28px; line-height: 1; margin-bottom: 6px; }
.cmp-pick-name {
  font-weight: 700; font-size: 14px; text-align: center; line-height: 1.15;
  color: #f1f5fb;
}
.cmp-pick-meta { font-size: 11.5px; color: #8a97ad; }

/* ── Legend ── */
.cmp-legend {
  display: flex; justify-content: center; gap: 18px; flex-wrap: wrap;
  margin: 4px 0 10px;
}
.cmp-leg-item { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
.cmp-leg-dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }

/* ── Chart ── */
.cmp-chart { display: flex; justify-content: center; margin: 2px 0 16px; }
.cmp-svg { width: 100%; max-width: var(--app-max-width); height: auto; }
.cmp-axis-lbl {
  fill: #d4dcea;
  font-size: 11.5px;
  font-weight: 700;
  font-family: "Heebo", "Inter", sans-serif;
}

/* ── Axis table ── */
.cmp-table {
  display: flex; flex-direction: column; gap: 9px;
  margin-top: 6px;
}
.cmp-axis-row {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 10px;
  padding: 8px 10px;
}
.cmp-axis-head {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  margin-bottom: 6px; cursor: pointer;
}
.cmp-axis-name { font-size: 12px; font-weight: 700; color: #c7d1e0; text-align: center; }
.cmp-axis-i {
  width: 17px; height: 17px; border-radius: 50%; flex: 0 0 auto;
  border: 1.5px solid #6ea8e0; color: #6ea8e0;
  font-size: 11px; font-weight: 700; font-style: italic;
  display: inline-flex; align-items: center; justify-content: center; line-height: 1;
}
.cmp-axis-head:hover .cmp-axis-i { color: #9cc6f0; border-color: #9cc6f0; }
.cmp-axis-desc {
  font-size: 12.5px; color: #aeb9cd; text-align: center;
  margin: 0 0 8px; line-height: 1.45;
}
.cmp-axis-cells { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cmp-cell { display: flex; flex-direction: column; gap: 3px; }
.cmp-bar-wrap {
  height: 7px; border-radius: 4px;
  background: rgba(255,255,255,0.07);
  overflow: hidden;
}
.cmp-bar { height: 100%; border-radius: 4px; transition: width .4s ease; }
.cmp-cell-vals { display: flex; align-items: baseline; gap: 6px; }
.cmp-pctn { font-size: 16px; font-weight: 800; font-family: "Barlow Condensed", sans-serif; }
.cmp-rawn { font-size: 11.5px; color: #8a97ad; }
.cmp-tag { font-size: 11px; font-weight: 600; }
.cmp-low { color: #f59e0b; margin-inline-start: 3px; cursor: help; }
/* Defensive volume under the rate — deliberately quiet, it's context for the
   number above it, not a number competing with it. */
.cmp-vol { font-size: 10.5px; color: #7d8698; opacity: .85; margin-top: 1px; }
html[data-theme="light"] .cmp-vol { color: var(--muted); }

/* Single-player view: one column */
.cmp-axis-cells:has(.cmp-cell:only-child) { grid-template-columns: 1fr; }

.cmp-loading, .cmp-empty { text-align: center; color: #7a879d; padding: 30px 0; font-size: 14px; }
.cmp-warn {
  text-align: center; color: #f59e0b; font-size: 12px;
  background: rgba(245,158,11,0.08); border-radius: 8px; padding: 6px; margin-bottom: 8px;
}

/* ── AI analysis (button-triggered) ── */
.cmp-ai { margin-top: 18px; text-align: center; }
.cmp-ai-btn {
  font-family: "Heebo", sans-serif;
  font-size: 13.5px; font-weight: 700;
  color: var(--text, #fff);
  background: var(--bg-card2, rgba(255,255,255,0.06));
  border: 1px solid var(--border, rgba(255,255,255,0.12));
  border-radius: 10px;
  padding: 9px 18px;
  cursor: pointer;
  transition: background 0.2s;
}
.cmp-ai-btn:hover:not(:disabled) { background: rgba(255,255,255,0.1); }
.cmp-ai-btn:disabled { opacity: 0.6; cursor: default; }
html[data-theme="light"] .cmp-ai-btn:hover:not(:disabled) { background: rgba(0,0,0,0.06); }

.cmp-ai-result {
  margin-top: 12px;
  text-align: start;
  background: var(--bg-card, rgba(255,255,255,0.04));
  border: 1px solid var(--border, rgba(255,255,255,0.1));
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text, #e8ecf3);
}
.cmp-ai-loading { color: #8a97ad; font-style: italic; }
.cmp-ai-error { color: #f87171; }

/* ── Picker modal ── */
.cmp-modal {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(5,8,16,0.78);
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
}
.cmp-modal.hidden { display: none; }
.cmp-modal-card {
  background: #121829;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  width: 100%; max-width: 420px;
  max-height: 78vh;
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 60px -12px rgba(0,0,0,0.7);
}
.cmp-modal-head { display: flex; gap: 8px; padding: 12px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.cmp-search {
  flex: 1;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 10px 12px;
  color: #eef2f9; font-size: 14px;
  outline: none;
}
.cmp-search:focus { border-color: #3b9eff; }
.cmp-modal-close {
  background: rgba(255,255,255,0.06); border: none; color: #cdd6e6;
  width: 40px; border-radius: 10px; font-size: 16px; cursor: pointer;
}
.cmp-modal-list { overflow-y: auto; padding: 6px; }
.cmp-row {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: start;
  background: transparent; border: none;
  padding: 8px 10px; border-radius: 10px; cursor: pointer;
  color: #e7ecf5;
}
.cmp-row:hover { background: rgba(255,255,255,0.05); }
.cmp-row.taken { opacity: 0.4; }
.cmp-row-photo {
  width: 34px; height: 34px; border-radius: 50%; overflow: hidden;
  background: rgba(255,255,255,0.08); flex: 0 0 auto;
  display: flex; align-items: flex-end; justify-content: center;
}
.cmp-row-photo img { width: 100%; height: auto; }
.cmp-row-photo .cmp-silhouette { font-size: 16px; line-height: 1; margin-bottom: 2px; }
.cmp-row-name { flex: 1; font-weight: 600; font-size: 14px; }
.cmp-row-meta { font-size: 11.5px; color: #8a97ad; }

/* ════════════════════════════════════════════════════════════════════════
   LIGHT THEME (additive). Compare hardcodes light text for the dark canvas;
   pin text to the themed dark tones and flip white-alpha surfaces. The spider
   grid/spokes are inline SVG presentation attrs — CSS `stroke` overrides them.
   Player polygon fills/strokes (team colors) and the player-colored % numbers
   are left as-is on purpose.
   ════════════════════════════════════════════════════════════════════════ */
html[data-theme="light"] .cmp-wrap   { color: var(--text); }
html[data-theme="light"] .cmp-title  { color: var(--text); }
html[data-theme="light"] .cmp-sub,
html[data-theme="light"] .cmp-framing,
html[data-theme="light"] .cmp-empty-state { color: var(--muted); }

/* Text color intentionally NOT var(--accent1) — a favorited team's color can
   itself be pale/light (yellow, light gold...), which reads as barely
   visible against this light canvas. --text is guaranteed dark/readable
   regardless of which team's colors are active; only the border/background
   tint follows the accent for brand consistency. */
html[data-theme="light"] .cmp-reset {
  background: var(--bg-card2); color: var(--text);
  border-color: var(--accent1); border-width: 2px;
  font-weight: 700;
}
html[data-theme="light"] .cmp-reset:hover { background: rgba(var(--accent1-rgb, 29,66,138), 0.12); }

html[data-theme="light"] .cmp-help   { background: rgba(20,26,40,0.03); border-color: var(--border); }
html[data-theme="light"] .cmp-help-h { color: var(--text); }
html[data-theme="light"] .cmp-help li { color: var(--muted); }

html[data-theme="light"] .cmp-pick       { background: var(--bg-card); }
html[data-theme="light"] .cmp-pick-name  { color: var(--text); }
html[data-theme="light"] .cmp-pick-meta,
html[data-theme="light"] .cmp-pick-empty { color: var(--muted); }

/* Spider chart grid rings (fill=none), spokes (<line>), axis labels */
html[data-theme="light"] .cmp-svg polygon[fill="none"] { stroke: rgba(20,26,40,0.13); }
html[data-theme="light"] .cmp-svg line  { stroke: rgba(20,26,40,0.12); }
html[data-theme="light"] .cmp-axis-lbl  { fill: var(--text); }

html[data-theme="light"] .cmp-axis-row  { background: rgba(20,26,40,0.025); border-color: var(--border); }
html[data-theme="light"] .cmp-axis-name { color: var(--text); }
html[data-theme="light"] .cmp-axis-desc { color: var(--muted); }
html[data-theme="light"] .cmp-bar-wrap  { background: rgba(20,26,40,0.08); }
html[data-theme="light"] .cmp-rawn      { color: var(--muted); }

html[data-theme="light"] .cmp-modal-card  { background: var(--bg-card); border-color: var(--border); }
html[data-theme="light"] .cmp-modal-head  { border-bottom-color: var(--border); }
html[data-theme="light"] .cmp-search      { background: var(--bg-card2); color: var(--text); border-color: var(--border); }
html[data-theme="light"] .cmp-modal-close { background: rgba(20,26,40,0.05); color: var(--text); }
html[data-theme="light"] .cmp-row         { color: var(--text); }
html[data-theme="light"] .cmp-row:hover   { background: rgba(20,26,40,0.05); }
html[data-theme="light"] .cmp-row-meta    { color: var(--muted); }
html[data-theme="light"] .cmp-loading,
html[data-theme="light"] .cmp-empty       { color: var(--muted); }

/* An axis with no number: a hollow bar and a dash, never a zero. A zero here
   would read as "worst in the league at this", which is a claim we can't make. */
.cmp-bar--none {
  width: 100%;
  background: repeating-linear-gradient(90deg,
    var(--border, rgba(0,0,0,.12)) 0 4px, transparent 4px 8px);
  opacity: .6;
}
.cmp-pctn--none { color: var(--text-secondary, #999); font-weight: 700; }
.cmp-cell--nodata .cmp-rawn { color: var(--text-secondary, #999); font-style: italic; }

/* Dark theme: "מול" between the two players sat at 2.84:1. */
html[data-theme="dark"] .cmp-vs { color: #8894a7; }

/* ── Heart of the floor (effort measures, side by side) ───────────────── */
.cmp-hustle {
  margin-top: 22px;
}
.cmp-hustle-title {
  font-size: 16px;
  font-weight: 800;
  margin: 0 0 2px;
  color: var(--text);
}
.cmp-hustle-sub,
.cmp-hustle-note {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.cmp-hustle-sub { margin-bottom: 8px; }
.cmp-hustle-note { margin-top: 6px; font-size: 11px; }