/* WS-I — local career ledger, daily challenge, leaderboard and run history. */
/* z-index 205: above the title screen (200, WS-L) so the ledger opened FROM the
   title lands on top of it; below the settings panel (210). */
#leaderboardSlot { position: relative; z-index: 205; }

.career-eyebrow,
.career-stat > span,
.leader-row span,
.daily-card__date > span,
.career-section__head span,
.career-foot {
  font: 700 9px/1.3 var(--mono); letter-spacing: .13em; text-transform: uppercase;
}

.career-backdrop {
  position: fixed; inset: 0; z-index: 205; display: grid; place-items: center;
  padding: 26px; pointer-events: auto;
  background: radial-gradient(900px 520px at 50% 35%, #153b214f, transparent 72%), #020503ed;
  backdrop-filter: blur(10px);
}
.career-panel {
  width: min(1080px, 100%); max-height: calc(100vh - 52px); overflow-y: auto;
  padding: 28px; border: 1px solid #415146; border-radius: 16px;
  background: linear-gradient(155deg, #172019, #0b100d 70%);
  box-shadow: 0 34px 100px #000e, inset 0 1px #ffffff0c;
  animation: career-in .22s cubic-bezier(.2, .9, .3, 1.08);
}
.career-head {
  display: flex; justify-content: space-between; gap: 24px; align-items: start;
  padding-bottom: 20px; border-bottom: 1px solid #354239;
}
.career-eyebrow { color: var(--accent); }
.career-head h2 { margin: 5px 0 5px; font-size: clamp(30px, 5vw, 52px); line-height: 1; letter-spacing: -.05em; }
.career-head p { margin: 0; color: var(--muted); }
.career-close { width: 38px; height: 38px; padding: 0; font-size: 24px; line-height: 1; }

.career-lifetime {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 18px;
}
.career-stat {
  min-width: 0; padding: 13px; border: 1px solid var(--line); border-radius: 9px;
  background: #ffffff05;
}
.career-stat > span { color: var(--muted); }
.career-stat > strong { display: block; margin: 6px 0 2px; color: var(--text); font: 800 18px/1.1 var(--mono); overflow-wrap: anywhere; }
.career-stat > small { color: #748178; font-size: 9px; }

.daily-card {
  display: grid; grid-template-columns: 180px minmax(240px, 1fr) auto; gap: 18px; align-items: center;
  margin-top: 10px; padding: 15px 16px; border: 1px solid #876727; border-radius: 10px;
  background: linear-gradient(100deg, #f5a62316, transparent 72%);
}
.daily-card.is-active { border-color: var(--accent); background: linear-gradient(100deg, #53fc1815, transparent 72%); }
.daily-card__date > span { display: block; color: var(--gamble); }
.daily-card.is-active .daily-card__date > span { color: var(--accent); }
.daily-card__date > strong { display: block; margin-top: 4px; font: 800 16px/1.1 var(--mono); }
.daily-card__date > small,
.daily-card__copy > small { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; }
.daily-card__copy > strong { color: #e1ebe4; }
.daily-card__action {
  padding: 9px 12px; border: 1px solid currentColor; border-radius: 8px;
  color: var(--accent); font-size: 11px; font-weight: 800; text-decoration: none; white-space: nowrap;
}
.daily-card__action:hover { color: #07130a; background: var(--accent); }

.career-columns { display: grid; grid-template-columns: 1.35fr 1fr; gap: 12px; margin-top: 16px; }
.career-section {
  min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 11px;
  background: #ffffff04;
}
.career-section__head { display: flex; justify-content: space-between; gap: 18px; align-items: end; margin-bottom: 10px; }
.career-section__head span { color: var(--accent); }
.career-section__head h3 { margin: 2px 0 0; font-size: 18px; }
.career-section__head > small { color: var(--muted); font-size: 9px; text-align: right; }
.leader-table,
.history-list { display: grid; gap: 6px; }
.leader-row {
  display: grid; grid-template-columns: 32px minmax(92px, 1fr) repeat(4, minmax(58px, auto));
  gap: 10px; align-items: center; min-width: 0; padding: 9px 10px;
  border: 1px solid #ffffff0a; border-radius: 7px; background: #070b08aa;
}
.leader-row.is-best { border-color: #53fc1848; background: linear-gradient(90deg, #53fc180b, #070b08aa); }
.leader-rank { color: var(--accent); font: 850 14px/1 var(--mono); }
.leader-run strong,
.leader-run small,
.leader-row > div > span,
.leader-row > div > strong { display: block; }
.leader-run strong { color: #dbe7de; font: 800 10px/1.2 var(--mono); }
.leader-run small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.leader-row > div > span { color: #68756c; }
.leader-row > div > strong { margin-top: 2px; color: #d4e0d7; font: 700 10px/1.2 var(--mono); }

.history-row {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  padding: 9px 10px; border: 1px solid #ffffff0a; border-radius: 7px; background: #070b08aa;
}
.history-row__badge {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 6px;
  color: #aebbb2; background: #29322c; font: 850 11px/1 var(--mono);
}
.history-row__badge.daily { color: #111609; background: var(--gamble); }
.history-row__main strong,
.history-row__main small,
.history-row__score strong,
.history-row__score small { display: block; }
.history-row__main strong { color: #d7e2da; font: 750 10px/1.2 var(--mono); }
.history-row__main small { margin-top: 3px; color: var(--muted); font-size: 8px; overflow-wrap: anywhere; }
.history-row__score { text-align: right; }
.history-row__score strong { color: var(--accent); font: 800 12px/1 var(--mono); }
.history-row__score small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.career-empty { padding: 28px 18px; color: var(--muted); text-align: center; font-size: 11px; }
.career-foot {
  display: flex; justify-content: space-between; gap: 18px; margin-top: 16px; padding-top: 13px;
  align-items: center; border-top: 1px solid var(--line); color: var(--muted);
}
.career-foot__save { display: flex; align-items: center; gap: 12px; }
.career-reset {
  padding: 6px 9px; border: 1px solid #ff4d4d66; border-radius: 6px;
  color: #ff8c8c; background: #ff4d4d0a; font: 750 9px/1 var(--mono);
  letter-spacing: .04em; text-transform: uppercase; cursor: pointer;
}
.career-reset:hover { color: #160505; background: var(--bad); border-color: var(--bad); }
.career-reset:focus-visible { outline: 2px solid var(--bad); outline-offset: 2px; }
.career-foot strong { color: var(--accent); }

@keyframes career-in { from { opacity: 0; transform: translateY(10px) scale(.988); } }

@media (max-width: 820px) {
  .career-backdrop { padding: 12px; }
  .career-panel { max-height: calc(100vh - 24px); padding: 22px 18px; }
  .career-lifetime { grid-template-columns: repeat(2, 1fr); }
  .career-stat:last-child { grid-column: 1 / -1; }
  .daily-card { grid-template-columns: 1fr; gap: 10px; }
  .daily-card__action { text-align: center; }
  .career-columns { grid-template-columns: 1fr; }
  .leader-row { grid-template-columns: 30px 1fr repeat(2, auto); }
  .leader-row > div:nth-child(5),
  .leader-row > div:nth-child(6) { display: none; }
  .career-foot { align-items: flex-start; }
  .career-foot__save { align-items: flex-start; flex-direction: column; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .career-panel { animation: none; }
}