/* ═══ CAREER ══════════════════════════════════════════════════════════════════
   Ten seasons, one club. Everything here is themed off the same variables as
   the rest of the site, so light mode needs no overrides of its own. */

/* ── intro / rules ────────────────────────────────────────────────────────── */
.cr-intro { margin-bottom: 16px; }
.cr-intro-title { font-size: 1.25rem; font-weight: 900; text-align: center; margin-bottom: 8px; }
.cr-intro-text { font-size: 0.92rem; color: var(--dim); text-align: center; line-height: 1.7; margin-bottom: 12px; }
.cr-intro-text strong { color: var(--text); }
.cr-rules { list-style: none; display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.cr-rules li {
  font-size: 0.85rem; color: var(--dim); line-height: 1.55;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 9px; padding: 9px 11px;
}
.cr-rules strong { color: var(--text); }

.cr-club-input { width: 150px; flex: none; text-align: right; }
.cr-select { width: 150px; flex: none; }
.cr-len-note { font-size: 12px; color: var(--dim); text-align: center; margin: 10px 0 12px; line-height: 1.6; }
.cr-len-note strong { color: var(--accent); }
.cr-best { text-align: center; font-size: 12px; color: var(--dim); margin-top: 14px; }

/* ── run header ───────────────────────────────────────────────────────────── */
.cr-header {
  background: linear-gradient(160deg, var(--panel) 0%, var(--surface) 100%);
  border: 1px solid var(--border); border-radius: 14px;
  padding: 14px 16px; margin-bottom: 14px; text-align: center;
}
.cr-club { font-size: 1.3rem; font-weight: 900; color: var(--accent); letter-spacing: .5px; }
.cr-meta {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
  font-size: 12px; color: var(--dim); margin-top: 5px;
}
.cr-share-btn {
  margin-top: 11px; width: 100%; padding: 7px 0;
  background: var(--surface2); color: var(--text);
  border: 1px solid var(--border); border-radius: 9px;
  font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.cr-share-btn:active { transform: translateY(1px); }
.cr-bar { height: 5px; background: var(--surface2); border-radius: 4px; margin-top: 11px; overflow: hidden; }
.cr-bar-fill { height: 100%; background: linear-gradient(90deg, var(--accent2), var(--accent)); border-radius: 4px; transition: width .4s ease; }

/* ── next season card ─────────────────────────────────────────────────────── */
.cr-next-card { text-align: center; }
.cr-next-label { font-size: 10px; letter-spacing: 3px; color: var(--dim); text-transform: uppercase; }
.cr-next-season { font-size: 1.9rem; font-weight: 900; color: var(--text); margin: 2px 0 4px; }
.cr-next-sub { font-size: 11.5px; color: var(--dim); line-height: 1.5; }
.cr-next-kept { font-size: 12px; color: #22c55e; font-weight: 700; margin-top: 8px; }

/* ── the manager of the dynasty ───────────────────────────────────────────── */
.cr-coach-card { text-align: center; }
.cr-coach-name { font-size: 1.25rem; font-weight: 800; color: var(--text); margin: 3px 0 5px; }
.cr-coach-style { font-size: 12px; color: var(--dim); line-height: 1.65; }
.cr-coach-settle { font-size: 11.5px; color: var(--accent); font-weight: 700; margin-top: 7px; }
.cr-coach-tenure { font-size: 11.5px; color: var(--dim); font-weight: 600; margin-top: 7px; }
.cr-sack { margin-top: 12px; }

/* ── history ──────────────────────────────────────────────────────────────── */
.cr-table { display: flex; flex-direction: column; gap: 6px; }
.cr-row .lb-name { font-weight: 700; }

/* ── transfer window ──────────────────────────────────────────────────────── */
.cr-season-done {
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 12px; font-size: 13px; color: var(--dim); text-align: center; margin-bottom: 14px;
}
.cr-season-done strong { color: var(--text); }
.cr-tw-title { margin-top: 4px; }
.cr-tw-note { margin-bottom: 10px; font-size: 0.85rem; line-height: 1.6; }
.cr-tw-note strong { color: var(--accent); }

.cr-keep-count { text-align: center; font-size: 12px; font-weight: 800; color: var(--dim); margin-bottom: 10px; }
.cr-keep-count.full { color: #22c55e; }

.cr-players { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
.cr-p {
  display: block; position: relative;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 12px 10px 40px; cursor: pointer; transition: border-color .15s, opacity .15s;
}
.cr-p:hover { border-color: var(--accent2); }
.cr-keep-box {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; accent-color: #22c55e; cursor: pointer;
}
.cr-p-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cr-p-slot {
  font-size: 10px; font-weight: 900; color: var(--dim);
  background: var(--surface2); border-radius: 5px; padding: 2px 6px; min-width: 34px; text-align: center;
}
.cr-p-name { font-size: 0.92rem; font-weight: 700; color: var(--text); flex: 1; min-width: 0; }
.cr-p-ovr { font-size: 12px; color: var(--dim); white-space: nowrap; }
.cr-p-ovr strong { color: var(--text); font-size: 13px; }
.cr-p-sub { font-size: 11px; color: var(--dim); margin-top: 4px; display: flex; gap: 8px; flex-wrap: wrap; }

.cr-up   { color: #22c55e; font-weight: 800; }
.cr-down { color: #f85149; font-weight: 800; }
.cr-flat { color: var(--dim); font-weight: 800; }
.cr-move { color: var(--accent); font-weight: 700; }
.cr-poschange { color: #f59e0b; font-weight: 700; }

.cr-p-kept { border-color: #22c55e; background: #22c55e12; }
.cr-p-blocked { opacity: .45; cursor: not-allowed; }
.cr-p-blocked:hover { border-color: var(--border); }
.cr-p-gone { opacity: .5; cursor: default; padding-left: 12px; }
.cr-p-gone:hover { border-color: var(--border); }

/* ── the end of a run ─────────────────────────────────────────────────────── */
.cr-over { border-radius: 14px; padding: 18px 16px; text-align: center; margin-bottom: 16px; border: 1px solid var(--border); }
.cr-over-dead { background: #f8514912; border-color: #f8514955; }
.cr-over-done { background: #22c55e12; border-color: #22c55e55; }
.cr-over-title { font-size: 1.35rem; font-weight: 900; color: var(--text); }
.cr-over-sub { font-size: 0.87rem; color: var(--dim); margin-top: 6px; line-height: 1.6; }
.cr-over-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 16px; }
.cr-over-stats > div { display: flex; flex-direction: column; gap: 2px; font-size: 10px; color: var(--dim); }
.cr-over-stats span { font-size: 1.25rem; font-weight: 900; color: var(--text); }

/* ── the button on the results screen ─────────────────────────────────────── */
.btn-career-next.cr-btn-dead {
  background: #f85149; border-color: #f85149; color: #fff;
}

/* ── the way in, on the setup screen ──────────────────────────────────────── */
.setup-mode-card {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: right;
  background: linear-gradient(135deg, #ffd7000f, var(--surface) 60%);
  border: 1px solid var(--accent2); border-radius: 12px;
  padding: 13px 14px; margin-bottom: 18px; cursor: pointer;
  font-family: inherit; color: var(--text); transition: border-color .15s, transform .1s;
}
.setup-mode-card:hover { border-color: var(--accent); }
.setup-mode-card:active { transform: scale(.99); }

/* כרטיס שקיים כדי להיקרא ולא כדי להילחץ. עמום מספיק שלא ייקרא כזמין, ברור
   מספיק שייקרא בכלל — ובלי חץ, כי אין לאן ללכת. */
.setup-mode-card.smc-soon { opacity: .5; cursor: default; }
.setup-mode-card.smc-soon:hover { border-color: var(--border); }
.setup-mode-card.smc-soon:active { transform: none; }
.smc-new.smc-new-soon { background: var(--border); color: var(--dim); }
.smc-icon { font-size: 1.7rem; line-height: 1; }
.smc-body { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.smc-title { font-size: 1rem; font-weight: 800; display: flex; align-items: center; gap: 6px; }
.smc-new {
  font-size: 9px; font-weight: 900; color: var(--accent-ink); background: var(--accent);
  border-radius: 5px; padding: 2px 5px; letter-spacing: .5px;
}
.smc-sub { font-size: 0.78rem; color: var(--dim); line-height: 1.5; }
.smc-arrow { color: var(--accent2); font-size: 1.1rem; }
.smc-active { border-color: #22c55e; background: linear-gradient(135deg, #22c55e14, var(--surface) 60%); }
.smc-active .smc-arrow { color: #22c55e; }
/* a league or duel draft locks the setup screen — career is not on offer there */
.league-locked .setup-mode-card { display: none; }

/* ── the dynasty board ────────────────────────────────────────────────────── */
.cr-board-hint { font-size: 11px; color: var(--dim); margin: 2px 0 8px; line-height: 1.5; }
.cr-board-note { font-size: 12px; color: #22c55e; font-weight: 700; min-height: 16px; }
.cr-board-club { display: block; font-size: 11px; color: var(--dim); font-weight: 400; }

/* ── the one share prompt, at the end of a dynasty ────────────────────────── */
.cr-share-box { text-align: center; max-width: 340px; }
.cr-sp-strip { font-size: 1.15rem; letter-spacing: 1px; margin: 10px 0 6px; white-space: nowrap; }
.cr-sp-sub { font-size: 12.5px; color: var(--dim); margin-bottom: 14px; }
.cr-sp-later {
  display: block; width: 100%; margin-top: 8px; padding: 8px 0;
  background: none; border: none; color: var(--dim);
  font-family: inherit; font-size: 12.5px; cursor: pointer;
}

/* ── sandbox (admin only) ─────────────────────────────────────────────────── */
.cr-admin {
  margin-top: 22px; padding: 11px 12px;
  background: #7c3aed10; border: 1px dashed #7c3aed66; border-radius: 10px;
}
.cr-admin-title { font-size: 12px; font-weight: 800; color: #a78bfa; margin-bottom: 8px; }
.cr-admin-title span { font-weight: 400; color: var(--dim); }
.cr-admin-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.cr-admin-btn {
  flex: 1 1 auto; padding: 7px 10px; font-family: inherit; font-size: 11.5px; font-weight: 700;
  background: var(--surface2); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px; cursor: pointer;
}
.cr-admin-btn:hover { border-color: #a78bfa; }
.cr-admin-note { font-size: 11px; color: var(--dim); margin-top: 4px; line-height: 1.5; }
.cr-sp-warn { font-size: 11.5px; color: var(--dim); line-height: 1.5; margin: 0 0 12px; }
.cr-sp-mute {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 11.5px; color: var(--dim); margin-top: 10px; cursor: pointer;
}
.cr-sp-mute input { accent-color: var(--accent); cursor: pointer; }
.cr-chem { display: block; font-size: 11px; font-weight: 700; color: #22d3ee; margin-top: 4px; }
.cr-p-chem { border-color: #22d3ee55; }

/* ── ארון התארים ─────────────────────────────────────────────────────────────
   Five floating icons in a row read as a stat strip, not as a cabinet. What
   makes it a cabinet is that each trophy STANDS on something and is mirrored in
   it — so there is a lit shelf, a ledge under it, and a flipped fading copy of
   every trophy below the line. Shelves you have not filled keep their silhouette
   rather than emptying, because the gap is half of what a cabinet says. */
.cr-cabinet {
  background:
    radial-gradient(120% 80% at 50% 0%, #ffd7001a 0%, transparent 62%),
    linear-gradient(180deg, #161c28 0%, #10141d 100%);
  border: 1px solid #2f374a; border-radius: 14px;
  padding: 14px 6px 10px; margin-bottom: 14px;
  box-shadow: inset 0 1px 0 #ffffff10, 0 6px 18px #0006;
}
.cr-hon-row { display: flex; justify-content: space-around; align-items: flex-end; gap: 2px; }
.cr-hon { display: flex; flex-direction: column; align-items: center; flex: 1; min-width: 0; }

/* the trophy, and its reflection in the shelf */
.cr-hon-stand { position: relative; display: flex; flex-direction: column; align-items: center; }
.cr-hon-art { line-height: 0; filter: drop-shadow(0 2px 3px #0009); }
.cr-hon-mirror {
  line-height: 0; margin-top: 1px; opacity: .2;
  transform: scaleY(-1);
  -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 78%);
  mask-image: linear-gradient(to top, transparent 0%, #000 78%);
  height: 15px; overflow: hidden; pointer-events: none;
}
.cr-hon-empty .cr-hon-art { filter: none; opacity: .5; }
.cr-hon-empty .cr-hon-mirror { opacity: .08; }

/* the ledge each row of trophies stands on */
.cr-hon-row::after { content: none; }
.cr-cabinet .cr-hon-row {
  border-bottom: 1px solid #ffffff14;
  box-shadow: 0 1px 0 #0008;
  padding-bottom: 2px;
}

.cr-hon-n {
  font-size: .8rem; font-weight: 900; color: #0f1218;
  background: linear-gradient(180deg, #FFE27A, #E8A33D);
  border-radius: 9px; padding: 0 7px; margin-top: 7px;
  box-shadow: 0 1px 2px #0007;
}
.cr-hon-empty .cr-hon-n {
  color: var(--dim); background: none; box-shadow: none; font-weight: 700;
}
.cr-hon-l {
  font-size: .62rem; color: var(--dim); text-align: center; margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.cr-hon-sub {
  text-align: center; font-size: .78rem; color: var(--dim);
  margin-top: 10px; padding-top: 9px; border-top: 1px solid #2b3242;
}
.cr-hon-sub b { color: var(--accent); }

/* the one line that says the rows do something */
.cr-hint {
  font-size: .7rem; color: var(--dim); text-align: center;
  margin: -4px 0 7px; opacity: .85;
}

/* trophies riding on a season row, and where a cup run ended */
.cr-row-tro { display: inline-flex; align-items: center; gap: 1px; vertical-align: -4px; margin-inline-start: 3px; }
.cr-row-cup { color: var(--dim); }
.cr-row-xi { cursor: pointer; }
.cr-row-xi:hover { background: #1b2233; }
.cr-row-open {
  display: inline-block; font-size: .64rem; font-weight: 800;
  color: var(--accent); background: #ffd70014; border: 1px solid #ffd70038;
  border-radius: 7px; padding: 1px 7px; margin-top: 4px; white-space: nowrap;
}
.cr-row-xi:hover .cr-row-open { background: #ffd7002a; }

/* the XI that played a given season */
.cr-xi-wrap {
  position: fixed; inset: 0; background: #000a; z-index: 120;
  display: none; align-items: center; justify-content: center; padding: 16px;
}
.cr-xi-box {
  background: var(--surface); border: 1px solid #2b3242; border-radius: 14px;
  padding: 14px; width: 100%; max-width: 380px; max-height: 82vh; overflow-y: auto;
}
.cr-xi-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; }
.cr-xi-head > span:first-child { font-weight: 900; color: #fff; font-size: 1rem; }
.cr-xi-meta { font-size: 0.75rem; color: var(--dim); }
.cr-xi-tro { display: flex; gap: 4px; align-items: center; margin-bottom: 8px; min-height: 22px; }
.cr-xi-none { font-size: 0.72rem; color: var(--dim); }
.cr-xi-list { display: flex; flex-direction: column; gap: 3px; margin-bottom: 12px; }
.cr-xi-row {
  display: grid; grid-template-columns: 40px 1fr auto 30px; gap: 6px;
  align-items: center; padding: 5px 7px; border-radius: 7px; background: var(--surface2);
  font-size: 0.8rem;
}
.cr-xi-pos { font-size: 0.62rem; font-weight: 800; color: var(--dim); }
.cr-xi-name { color: #fff; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-xi-club { font-size: 0.66rem; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-xi-ovr { font-weight: 900; color: var(--accent); text-align: center; }

/* ── קריירות קודמות ──────────────────────────────────────────────────────── */
.cr-past-sum {
  text-align: center; font-size: 0.78rem; color: var(--dim);
  margin: -4px 0 8px;
}
.cr-past-sum b { color: var(--accent); }
.cr-past-row { cursor: pointer; }
.cr-past-row:hover { background: #1b2233; }
.cr-past-tro { display: inline-flex; align-items: center; gap: 1px; vertical-align: -3px; margin-inline-start: 4px; }
.cr-past-tro i { font-style: normal; font-size: 0.62rem; font-weight: 800; color: var(--accent); margin-inline-end: 3px; }
.cr-past-none { font-style: normal; font-size: 0.66rem; color: var(--dim); }
.cr-past-box { max-width: 420px; }
.cr-past-box .cr-cabinet { margin-bottom: 10px; }
.cr-past-box .section-label { margin-top: 10px; }
/* an XI opened from inside a past career has to sit on top of it */
.cr-xi-top { z-index: 130; }

/* a section that says it exists before it has anything in it — the alternative
   is a feature nobody finds until they have already used it */
.cr-past-empty {
  font-size: .76rem; color: var(--dim); line-height: 1.65;
  background: var(--surface2); border: 1px dashed #333c50;
  border-radius: 10px; padding: 11px 13px; margin-bottom: 14px;
}

/* ── the dynasty over time ───────────────────────────────────────────────────
   A table of seasons tells you what happened one row at a time; it does not
   show the ARC. One column per season, its height the finishing position, with
   the silverware marked above it — so a decade reads in one glance. */
.cr-tl {
  display: flex; align-items: flex-end; gap: 3px;
  background: var(--surface2); border: 1px solid #2b3242; border-radius: 12px;
  padding: 10px 8px 8px; margin-bottom: 14px;
}
.cr-tl-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.cr-tl-tro { height: 15px; display: flex; align-items: flex-end; gap: 1px; }
.cr-tl-bar {
  width: 100%; max-width: 26px; border-radius: 4px 4px 2px 2px;
  background: linear-gradient(180deg, #3c4459, #2b3242);
  position: relative;
}
.cr-tl-rank {
  font-size: .62rem; font-weight: 900; color: #fff;
  position: absolute; top: 2px; left: 0; right: 0; text-align: center;
}
.cr-tl-yr { font-size: .55rem; color: var(--dim); white-space: nowrap; }
.cr-tl-clubs { font-size: .55rem; color: var(--dim); opacity: .8; }
.cr-tl-legend {
  font-size: .68rem; color: var(--dim); text-align: center;
  margin: -8px 0 12px;
}

/* ── the winter window, per season ───────────────────────────────────────────
   The most interesting thing that happens to a squad all year used to leave no
   trace: the archive kept the XI that finished and the swap that produced it
   was invisible. Both futures are simulated from one seed, so this can also say
   what the door you did not open would have finished on. */
.cr-jan {
  background: #12161f; border: 1px solid #2b3242; border-inline-start: 3px solid #4a5570;
  border-radius: 9px; padding: 9px 11px; margin-bottom: 9px;
}
.cr-jan-took { border-inline-start-color: #7aa2ff; background: #131a26; }
.cr-jan-h { font-size: .72rem; font-weight: 800; color: #9fb4d9; margin-bottom: 5px; }
.cr-jan-swap { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: .82rem; }
.cr-jan-out { color: var(--dim); text-decoration: line-through; }
.cr-jan-out b, .cr-jan-in b { font-weight: 900; }
.cr-jan-in { color: #fff; font-weight: 700; }
.cr-jan-in b { color: var(--accent); }
.cr-jan-arrow { color: #7aa2ff; font-weight: 900; }
.cr-jan-sub { font-size: .68rem; color: var(--dim); margin-top: 4px; line-height: 1.5; }
.cr-jan-sub b { color: #fff; }
.cr-jan-verdict { font-size: .7rem; font-weight: 800; margin-top: 6px; color: var(--dim); }
.cr-jan-verdict.good { color: #6bd47f; }
.cr-jan-verdict.bad  { color: #e07a7a; }
.cr-row-jan { margin-inline-start: 4px; opacity: .8; }

/* which clubs the eleven was built from, not just how many */
.cr-xi-clubs { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-bottom: 9px; }
.cr-xi-clubs i { font-style: normal; font-size: .66rem; color: var(--dim); margin-inline-end: 2px; }
.cr-xi-clubchip {
  font-size: .64rem; color: var(--dim); background: var(--surface2);
  border: 1px solid #2b3242; border-radius: 7px; padding: 1px 6px;
}
.cr-xi-clubchip b { color: #fff; font-weight: 800; }

/* the man the window brought in */
.cr-xi-new { background: #16233a; border: 1px solid #2f4468; }
.cr-xi-tag {
  font-style: normal; font-size: .58rem; font-weight: 800; color: #0f1218;
  background: #7aa2ff; border-radius: 5px; padding: 0 4px; margin-inline-start: 4px;
}

/* a numbered dynasty, so a list of them reads as a shelf of runs */
.cr-past-no {
  width: 22px; flex-shrink: 0; text-align: center;
  font-size: .74rem; font-weight: 900; color: var(--accent);
  background: #ffd7001a; border: 1px solid #ffd70033; border-radius: 6px;
}
.cr-past-row .lb-name b { color: #fff; font-weight: 900; }