/* ─────────────────────────────────────────────────────────────────────────
   Football Intelligence — DEMO Simulator page
   Faza 5.11, redesign v2.

   Reuses design tokens. Single accent. Mobile <600px: tables → card stack.
   ───────────────────────────────────────────────────────────────────────── */

.sim-page {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.sim-page__header { padding: var(--space-2) 0; }
.sim-page__header h1 { margin: 0 0 4px; }
.sim-page__header p  { margin: 0; }

/* === Summary card ====================================================== */

.sim-summary { display: flex; flex-direction: column; gap: 14px; }
.sim-summary__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.sim-summary__head h2 { margin: 0; }
.sim-summary__grid {
  display: grid;
  /* minmax(0, 1fr) lets columns shrink when content (€2434.20 at 1.4rem
     extrabold) is intrinsically wider than the fraction — without min:0
     the grid would honour content width and overflow the parent. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-2);
}
@media (max-width: 700px) {
  .sim-summary__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.sim-summary__cell {
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  min-width: 0;
  overflow: hidden;
}
.sim-summary__val {
  font-weight: var(--weight-extrabold);
  color: var(--text-primary);
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  /* Karol QA rev3: rev2 still clipped "€2434.20" to "€2434.2c" at ~375px.
     Drop the floor to 0.78rem (~14px at 18px html base) and pull the vw
     coefficient down so the value fits inside narrower cells. Desktop max
     stays at 1.4rem. */
  font-size: clamp(0.78rem, 3.0vw, 1.4rem);
  letter-spacing: -0.01em;
}
.sim-summary__val--accent { color: var(--accent); }
.sim-summary__pnl--pos    { color: var(--accent); }
.sim-summary__pnl--neg    { color: #ef4444; }

/* === Picks table ======================================================= */

.sim-picks h3 { margin: 0 0 var(--space-2); }
.sim-picks__scroll {
  overflow-x: auto;
  scrollbar-width: thin;
}
.sim-picks__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.88rem;
}
.sim-picks__table th {
  text-align: left;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding: 10px 12px;
  border-bottom: 1px solid var(--divider);
  white-space: nowrap;
}
.sim-picks__th-num { text-align: right; }
.sim-picks__table td {
  padding: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  vertical-align: top;
}
.sim-picks__table tbody tr:last-child td { border-bottom: none; }

.sim-row__match { min-width: 200px; }
.sim-row__teams {
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}
.sim-row__teams--link {
  cursor: pointer;
  transition: color var(--duration-fast) var(--easing-out);
}
.sim-row__teams--link:hover { color: var(--accent); }
.sim-row__badge {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex-shrink: 0;
}
/* F5.15-fix: fallback colored disc gdy badge URL puste lub broken */
.sim-row__badge--disc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  font-size: 0.62rem;
  font-weight: var(--weight-extrabold);
  letter-spacing: 0.02em;
}
.sim-row__meta { margin-top: 2px; }

/* F5.11-fix: Reset + Manual pick actions w summary header */
.sim-summary__actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* F5.11-fix: Manual pick modal */
.sim-modal {
  position: fixed;
  inset: 0;
  background: rgba(11, 17, 24, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2);
  z-index: 200;
  animation: sim-modal-in 0.2s ease-out;
}
@keyframes sim-modal-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.sim-modal__card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  width: 100%;
  max-width: 540px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.7);
  animation: sim-modal-card-in 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes sim-modal-card-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .sim-modal, .sim-modal__card { animation: none; }
}
.sim-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2);
  border-bottom: 1px solid var(--divider);
}
.sim-modal__head h2 { margin: 0; }
.sim-modal__close {
  background: transparent;
  border: none;
  color: var(--text-tertiary);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  transition: background-color var(--duration-fast) var(--easing-out);
}
.sim-modal__close:hover { background: var(--surface-2); color: var(--text-primary); }
.sim-modal__form {
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sim-modal__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 500px) {
  .sim-modal__row { grid-template-columns: 1fr; }
}
.sim-modal__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.78rem;
}
.sim-modal__field span {
  color: var(--text-tertiary);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
}
.sim-modal__field input,
.sim-modal__field select {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  padding: 8px 10px;
  font: inherit;
  font-size: 0.9rem;
}
.sim-modal__field input:focus,
.sim-modal__field select:focus {
  border-color: var(--accent);
  outline: none;
}
.sim-modal__hint {
  margin: 0;
  padding: 8px 12px;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  line-height: 1.5;
}
.sim-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: var(--space-1);
  border-top: 1px solid var(--divider);
}

/* F5.18 (owner QA): condense the PICK cell so bet-type + odds + stake no
   longer wrap awkwardly downward. Market name on one line (truncates if very
   long), odds + stake on a single tight mono line that never wraps. */
.sim-row__pick {
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  max-width: 220px;
}
.sim-row__pick-market {
  display: block;
  font-weight: var(--weight-semibold);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sim-row__pick-meta {
  display: block;
  margin-top: 2px;
  font-size: 0.78rem;
  color: var(--text-tertiary);
  white-space: nowrap;
  font-feature-settings: 'tnum' on;
}
.sim-row__pick-sep { opacity: 0.55; padding: 0 1px; }

.sim-row__outcome-cell { text-align: center; }

.sim-row__outcome {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--text-tertiary);
  white-space: nowrap;
}
.sim-row__outcome--won {
  background: var(--accent-soft);
  color: var(--accent);
}
.sim-row__outcome--lost {
  background: rgba(239, 68, 68, 0.08);
  color: #ef4444;
}
.sim-row__outcome--void,
.sim-row__outcome--cancelled {
  background: var(--surface-3);
}
.sim-row__outcome--pending {
  background: var(--surface-3);
  color: var(--text-secondary);
}

.sim-row__pnl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sim-row__pnl--pos { color: var(--accent); font-weight: var(--weight-bold); }
.sim-row__pnl--neg { color: #ef4444; font-weight: var(--weight-bold); }

/* F5.18 (owner QA: "Cancel jest dziwnie podświetlony — usuń to"): the old
   sticky-right pinned column needed an opaque backdrop, which read as a weird
   highlight box behind Cancel on desktop. Mobile now uses card layout (the
   table is display:none <=767px), so the desktop table never needs a pinned
   column — plain transparent cell, no backdrop. */
.sim-row__action {
  text-align: right;
  padding-left: 20px;
}
/* Cancel: clean quiet destructive control — no glow, no shadow halo.
   Muted text only; hover darkens slightly without a red bloom. */
.sim-row__cancel {
  font-size: 0.72rem;
  padding: 5px 12px;
  min-height: 0;
  background: transparent;
  border-color: rgba(255, 255, 255, 0.10);
  color: var(--text-tertiary);
  box-shadow: none;
}
.sim-row__cancel:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--text-secondary);
  box-shadow: none;
}

/* === Error state ======================================================= */

.sim-error {
  text-align: center;
  padding: var(--space-3) var(--space-2);
}
.sim-error h2 { margin: 0 0 6px; }
.sim-error p  { margin: 0 0 var(--space-2); }

/* === Legal footer ====================================================== */

.sim-page__legal {
  text-align: center;
  padding: var(--space-2) 0;
  border-top: 1px solid var(--divider);
  line-height: 1.6;
}

/* === Mobile ============================================================ */

@media (max-width: 600px) {
  .sim-picks__table { font-size: 0.78rem; }
  .sim-picks__table th,
  .sim-picks__table td { padding: 8px; }
  .sim-row__match { min-width: 150px; }
  .sim-summary__val { font-size: 1.15rem; }
}

/* === Mobile card layout for pending picks (<=767px) ===================
   On mobile the wide table forces horizontal scroll — replace each row
   with a self-contained card so every field is visible without scrolling.
   The table is hidden and a sibling card list is shown instead.
   Desktop (768px+): card list hidden, table shown as normal.
   ======================================================================= */

/* Card list container — shown only on mobile */
.sim-picks__cards {
  display: none;
  flex-direction: column;
  gap: 10px;
}

@media (max-width: 767px) {
  /* Hide the scrollable table wrapper, show card list instead */
  .sim-picks--pending .sim-picks__scroll { display: none; }
  .sim-picks--pending .sim-picks__cards  { display: flex; }
}

/* Individual pick card */
.sim-pick-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Top row: teams + outcome badge */
.sim-pick-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.sim-pick-card__teams {
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  font-size: 0.92rem;
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  text-decoration: none;
}
.sim-pick-card__teams:hover { color: var(--accent); }

/* Middle row: market, odds, stake */
.sim-pick-card__pick {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.sim-pick-card__market {
  font-weight: var(--weight-semibold);
  font-size: 0.88rem;
  color: var(--text-primary);
}
.sim-pick-card__odds-stake {
  font-size: 0.78rem;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Meta row: league, date */
.sim-pick-card__meta {
  font-size: 0.74rem;
  color: var(--text-tertiary);
}

/* Bottom row: P/L + cancel */
.sim-pick-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 8px;
}
.sim-pick-card__pnl {
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
  white-space: nowrap;
}


/* === Match picker modal (F5.16-tweak) =================================== */

.sim-modal__card--wide { max-width: 640px; }

.sim-picker__search {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px var(--space-2);
  border-bottom: 1px solid var(--divider);
  background: var(--surface-2);
}
.sim-picker__search-input {
  flex: 1;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  padding: 8px 12px;
  font: inherit;
  font-size: 0.9rem;
}
.sim-picker__search-input:focus { outline: none; border-color: var(--accent); }

.sim-picker__list {
  max-height: 480px;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* F5.17.c-fix v3 Karol QA "nic nie widać": dropped the fanart bg/overlay
   layers in the picker (they buried the text). Clean flex-column rows on a
   solid surface — crests + names + meta, fully readable. */
.sim-picker__row {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
  padding: 11px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--text-primary);
  transition: border-color var(--duration-fast) var(--easing-out),
              background-color var(--duration-fast) var(--easing-out);
}
.sim-picker__row:hover { border-color: rgba(0, 229, 160, 0.35); background: var(--surface-3); }
.sim-picker__row-meta {
  font-size: 0.74rem;
}
.sim-picker__valuetag {
  align-self: flex-start;
  font-size: 0.7rem;
  font-weight: var(--weight-extrabold);
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent);
  white-space: nowrap;
}
.sim-picker__empty {
  padding: 24px;
  text-align: center;
}

/* Detail step */
.sim-picker__detail {
  padding: 16px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.sim-picker__detail-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sim-picker__detail-head h3 { margin: 0; letter-spacing: -0.01em; }
/* F5.17.c-fix: crests flank the "Home vs Away" title instead of stacking. */
.sim-picker__detail-teams {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sim-picker__detail-teams h3 { flex: 1 1 auto; min-width: 0; }
.sim-picker__detail-crest {
  width: 34px;
  height: 34px;
  object-fit: contain;
  flex: 0 0 auto;
}
.sim-picker__detail-crest.sim-picker__crest--fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-3);
  color: var(--text-primary);
  border-radius: 50%;
  font-size: 14px;
  font-weight: 700;
}
.sim-picker__back {
  align-self: flex-start;
  background: transparent;
  border: none;
  color: var(--text-tertiary);
  font: inherit;
  font-size: 0.78rem;
  padding: 4px 0;
  cursor: pointer;
}
.sim-picker__back:hover { color: var(--accent); }

.sim-picker__field-label {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-weight: var(--weight-bold);
  margin-bottom: 8px;
}

.sim-picker__market-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
}
.sim-picker__market-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  color: var(--text-primary);
  text-align: left;
  transition: border-color var(--duration-fast) var(--easing-out),
              background-color var(--duration-fast) var(--easing-out);
}
.sim-picker__market-btn:hover { border-color: rgba(0, 229, 160, 0.4); }
.sim-picker__market-btn.is-active {
  border-color: var(--accent);
  background: rgba(0, 229, 160, 0.06);
}
.sim-picker__market-name {
  font-size: 0.86rem;
  font-weight: var(--weight-semibold);
}
.sim-picker__market-odds {
  font-size: 0.95rem;
  font-weight: var(--weight-bold);
  color: var(--accent);
  font-feature-settings: 'tnum' on;
}

.sim-picker__stake-input {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  padding: 10px 12px;
  font: inherit;
  font-size: 1.05rem;
  font-weight: var(--weight-semibold);
}
.sim-picker__stake-input:focus { outline: none; border-color: var(--accent); }

.sim-picker__stake-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.sim-picker__stake-pill {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  color: var(--text-secondary);
  padding: 4px 10px;
  font: inherit;
  font-size: 0.74rem;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--easing-out),
              color var(--duration-fast) var(--easing-out);
}
.sim-picker__stake-pill:hover {
  background: var(--accent-soft);
  color: var(--accent);
}

.sim-picker__summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.sim-picker__summary > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sim-picker__summary strong {
  font-size: 1rem;
  color: var(--text-primary);
  font-feature-settings: 'tnum' on;
}

.sim-picker__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: var(--space-2);
  border-top: 1px solid var(--divider);
}

@media (max-width: 600px) {
  .sim-picker__summary { grid-template-columns: 1fr 1fr; }
  .sim-picker__summary > div:nth-child(3) { grid-column: 1 / -1; }
}


/* ─────────────────────────────────────────────────────────────────────────
   Faza 5.17.c-fix — DEMO atmospheric background + Pick-a-match crests
   Karol QA:
     "Tło zakładki DEMO też powinno przedstawiać jakiegoś piłkarza
      popularnego."
     "Pick a mecz powinien również zawierać banere drużyn (godła) oraz
      w tle zaciągnięte obrazy po API."

   Bg uses stadium-03 from the bundled pool (atmospheric, no faces).
   Drop a player-themed file into static/img/stadiums/demo-bg.jpg and
   swap the background-image url() here when an asset lands.
   ───────────────────────────────────────────────────────────────────────── */

.sim-page {
  position: relative;
  isolation: isolate;
}
.sim-page__bg {
  position: absolute;
  inset: 0;
  background-image: url("/static/img/stadiums/stadium-03.jpg");
  background-size: cover;
  background-position: center;
  filter: brightness(0.30) saturate(0.7);
  opacity: 0.55;
  z-index: 0;
  pointer-events: none;
}
.sim-page__overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(0,229,160,0.06) 0%, transparent 70%),
    linear-gradient(180deg, rgba(6, 10, 15, 0.62) 0%, rgba(6, 10, 15, 0.92) 100%);
  z-index: 1;
  pointer-events: none;
}
.sim-page__inner {
  position: relative;
  z-index: 2;
}

/* Pick-a-match row — crests + names (fanart bg removed; killed readability) */
.sim-picker__row-teams {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  min-width: 0;
  font-size: 0.92rem;
  font-weight: 600;
}
.sim-picker__row-teams strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sim-picker__row-teams .text-tertiary { flex: 0 0 auto; }
.sim-picker__crest {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex-shrink: 0;
}
.sim-picker__crest--fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-3);
  color: var(--text-primary);
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
}


/* ─────────────────────────────────────────────────────────────────────────
   Faza 5.17.c-fix (§D) — DEMO visual polish
   Glass cards over the atmospheric bg, stat tiles with a balance glow,
   de-Excel'd pick rows. (Live-watch drawer deferred — needs a backend
   /api/live/scores bulk endpoint.)
   ───────────────────────────────────────────────────────────────────────── */

/* Glass cards so the .sim-page__bg shows through */
.sim-page .sim-summary.card,
.sim-page .sim-picks.card {
  background: rgba(10, 14, 18, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
}

.sim-summary__head { align-items: center; }

/* Stat tiles — bigger, glassy, balance tile gets a brand glow */
.sim-summary__cell {
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sim-summary__cell:first-child {
  background:
    linear-gradient(180deg, rgba(0, 229, 160, 0.10), rgba(0, 229, 160, 0)) ,
    rgba(255, 255, 255, 0.02);
  border-color: rgba(0, 229, 160, 0.25);
  box-shadow: 0 0 26px rgba(0, 229, 160, 0.10);
}
.sim-summary__val {
  /* Karol 2026-06-05 mobile fix: this later rule was clobbering the responsive
     clamp (and the <=600px override) with a fixed 1.7rem, so the longest amounts
     ("€2434.20" / "+€759.14") overflowed and clipped to "€2434.2(" on narrow
     phones. Scale the figure with the viewport so it always fits the cell. */
  font-size: clamp(0.95rem, 4.2vw, 1.7rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

/* Pick rows — kill the spreadsheet look: row tint + rounded hover */
.sim-picks__table tbody tr { transition: background 150ms ease; }
.sim-picks__table tbody tr:hover td { background: rgba(255, 255, 255, 0.025); }
/* Keep the pinned action cell opaque on hover (translucent tint over a solid
   base) so scrolled cells never bleed under the Cancel control. */
.sim-picks__table tbody tr:hover .sim-row__action {
  background:
    linear-gradient(90deg, transparent, rgba(13, 18, 24, 0.96) 16px),
    rgba(255, 255, 255, 0.025),
    rgba(13, 18, 24, 0.96);
}
.sim-picks__table td { border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.sim-row__outcome {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}
.sim-row__outcome--pending   { background: rgba(255,255,255,0.08); color: var(--text-secondary); }
.sim-row__outcome--won       { background: rgba(0,229,160,0.15); color: var(--accent); }
.sim-row__outcome--lost      { background: rgba(255,90,90,0.15); color: #ff7a7a; }
.sim-row__outcome--cancelled,
.sim-row__outcome--void      { background: rgba(255,255,255,0.05); color: var(--text-tertiary); }

/* DEMO value-pick recommendation (PRO) + free-tier PRO hint (Karol 2026-06-06) */
.sim-picker__rec {
  color: var(--accent);
  font-weight: 700;
  font-size: 11px;
  margin-left: 4px;
}
.sim-picker__pro-hint {
  color: var(--accent);
  text-decoration: none;
}
.sim-picker__pro-hint:hover { text-decoration: underline; }
/* Kelly quick-pill — accent so it stands out; click fills the suggested stake. */
.sim-picker__stake-pill--kelly {
  background: var(--accent);
  color: var(--accent-fg, #04130d);
  border-color: var(--accent);
  font-weight: 700;
}
.sim-picker__stake-pill--kelly:hover {
  background: var(--accent-strong, var(--accent));
  border-color: var(--accent-strong, var(--accent));
}
/* Value market flagged in the grid (visible without selecting) — Karol 2026-06-06 */
.sim-picker__market-btn--value {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
}
.sim-picker__market-value {
  color: var(--accent);
  font-weight: 700;
  font-size: 11px;
  margin-left: 4px;
}