/* Survivor. Everything game-specific is prefixed .sv- and lives inside the dark stage. */
.dk-stage-wrap { padding: 0 20px; }
.sv-stage .dk-screen { padding: 14px 18px 16px; }

/* ---------- week strip ---------- */
.sv-strip { display: grid; grid-template-columns: repeat(18, minmax(0, 1fr)); gap: 6px; margin-bottom: 14px; }
.sv-wk { appearance: none; display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 6px 7px 5px; border-radius: 8px; border: 1px solid var(--s-line); background: var(--s-panel); color: var(--s-dim); font: 600 10.5px 'IBM Plex Mono', monospace; text-align: left; cursor: default; transition: border-color .2s, background .2s; }
.sv-wk-h { display: flex; justify-content: space-between; font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--s-faint); }
.sv-wk-t { display: flex; align-items: center; justify-content: space-between; gap: 4px; min-height: 16px; padding-left: 6px; box-shadow: inset 3px 0 0 var(--tc, transparent); color: var(--s-text); white-space: nowrap; overflow: hidden; }
.sv-wk-t b { font-weight: 600; }
.sv-wk-t em { font-style: normal; font-size: 9.5px; color: var(--s-dim); }
.sv-wk-n { font-size: 9.5px; color: var(--s-faint); min-height: 13px; }
.sv-wk.won, .sv-wk.lost, .sv-wk.past { cursor: pointer; }
.sv-wk.won:hover, .sv-wk.lost:hover, .sv-wk.past:hover { border-color: #3d4352; }
.sv-wk.won { border-color: rgba(53,227,154,.35); }
.sv-wk.lost { border-color: rgba(255,90,110,.5); }
.sv-wk.cur { border-color: var(--you); background: color-mix(in srgb, var(--you) 8%, var(--s-panel)); }
.sv-wk.cur .sv-wk-h { color: var(--you); }
.sv-wk.fut { opacity: .5; }
.sv-wk.view { outline: 2px solid var(--s-text); outline-offset: 1px; }
.sv-dimt { color: var(--s-faint); }
.sv-gold { color: var(--you); }

/* ---------- main ---------- */
.sv-main { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.sv-slate { position: relative; min-width: 0; }
.sv-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 12px; }
.sv-head-l { min-width: 0; }
.sv-head h3 { display: flex; align-items: center; gap: 10px; font-size: 21px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.sv-tag { font: 600 10.5px 'IBM Plex Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--s-dim); border: 1px solid var(--s-line); border-radius: 6px; padding: 2px 7px; }
.sv-head p { font-size: 13px; color: var(--s-dim); margin-top: 3px; max-width: 620px; line-height: 1.45; }
.sv-act { display: flex; align-items: center; gap: 12px; flex: none; }
.sv-pick { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-size: 12px; text-align: right; }
.sv-chip { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px 4px 8px; border-radius: 7px; background: var(--s-panel2); box-shadow: inset 3px 0 0 var(--tc); font-size: 13px; font-weight: 600; }
.sv-chip b { font-weight: 800; }
.sv-auto { appearance: none; border: 0; background: none; color: var(--you); font: 700 12px Inter, sans-serif; cursor: pointer; padding: 0; }
.sv-auto:hover { text-decoration: underline; }
.sv-out { color: var(--down); font-weight: 800; font-size: 13px; }
#svPlay { min-width: 148px; }

/* pool bar */
.sv-pool { margin-bottom: 10px; }
.sv-pool-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 6px; font-size: 12px; color: var(--s-dim); }
.sv-pool-h > span:last-child { font: 500 11.5px 'IBM Plex Mono', monospace; text-align: right; }
.sv-poolbar { display: flex; gap: 2px; height: 26px; border-radius: 7px; overflow: hidden; background: var(--s-panel); }
.sv-seg { display: flex; align-items: center; justify-content: center; min-width: 0; background: var(--tc); font: 600 11px 'IBM Plex Mono', monospace; white-space: nowrap; overflow: hidden; transition: flex-grow .6s cubic-bezier(.2,.9,.3,1), opacity .3s; }
.sv-seg.other { background: var(--s-panel2); color: var(--s-dim); }
.sv-seg.mine { box-shadow: inset 0 -3px 0 var(--you); }
.sv-seg.lost { opacity: .35; background-image: repeating-linear-gradient(135deg, rgba(0,0,0,.45) 0 3px, transparent 3px 7px); text-decoration: line-through; }

.sv-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-bottom: 8px; font-size: 11px; color: var(--s-dim); }
.sv-legend span { display: inline-flex; align-items: center; gap: 6px; }
.sv-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.lg-mine { box-shadow: inset 3px 0 0 var(--you); background: color-mix(in srgb, var(--you) 18%, transparent); }

/* game cards */
.sv-games { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.sv-g { background: var(--s-panel); border: 1px solid var(--s-line); border-radius: 11px; padding: 8px 9px 9px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sv-g-h { display: flex; justify-content: space-between; gap: 6px; font: 600 10px 'IBM Plex Mono', monospace; color: var(--s-dim); margin-bottom: 2px; white-space: nowrap; }
.sv-g-h .st { color: var(--s-text); }
.sv-g.upset { border-color: rgba(255,90,110,.45); }
.sv-g.upset .st { color: var(--down); }
.sv-g.flip { animation: svflip .45s cubic-bezier(.2,.9,.3,1.1); }
@keyframes svflip { from { opacity: .2; transform: translateY(6px) scale(.98); } }
.sv-t { appearance: none; display: grid; grid-template-columns: 3px 34px minmax(0, 1fr) auto auto 42px; align-items: center; gap: 6px; width: 100%; padding: 5px 6px 5px 0; border: 0; border-radius: 6px; background: transparent; color: var(--s-text); font: 600 13px Inter, sans-serif; text-align: left; cursor: pointer; transition: background .15s; }
.sv-t:not(:disabled):hover { background: var(--s-panel2); }
.sv-t:disabled { cursor: default; }
.sv-t i { height: 18px; border-radius: 2px; background: var(--tc); }
.sv-t b { font-weight: 800; letter-spacing: .02em; }
.sv-t .c { color: var(--s-dim); font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sv-t em { font: 500 10px 'IBM Plex Mono', monospace; font-style: normal; color: var(--s-faint); }
.sv-t .pl { font: 600 10.5px 'IBM Plex Mono', monospace; color: var(--s-dim); text-align: right; white-space: nowrap; }
.sv-t .v { font: 600 16px 'IBM Plex Mono', monospace; text-align: right; font-variant-numeric: tabular-nums; }
.sv-t .v small { font-size: 10px; font-weight: 600; color: var(--down); letter-spacing: .04em; text-transform: uppercase; }
.sv-t.mine { background: color-mix(in srgb, var(--you) 16%, transparent); box-shadow: inset 3px 0 0 var(--you); }
.sv-t.mine .v { color: var(--you); }
.sv-t.used { opacity: .42; }
.sv-t.used b, .sv-t.used .c { text-decoration: line-through; text-decoration-color: rgba(238,240,244,.45); }
.sv-g.final .sv-t.lost { opacity: .5; }
.sv-g.final .sv-t.lost .pl { opacity: 1; }
.sv-g.final .sv-t.mine.won .v { color: var(--up); }
.sv-g.final .sv-t.mine.lost { opacity: 1; background: color-mix(in srgb, var(--down) 16%, transparent); box-shadow: inset 3px 0 0 var(--down); }
.sv-g.final .sv-t.mine.lost .v { color: var(--down); }
.sv-g-bar { display: flex; gap: 2px; height: 3px; border-radius: 2px; overflow: hidden; margin-top: 4px; }
.sv-g-bar i { display: block; height: 100%; }
.sv-g-bar i:last-child { flex: 1; }
.sv-g.final .sv-g-bar { opacity: .35; }
.sv-play2 { display: none; }

/* season over */
.sv-over { margin-bottom: 14px; padding: 18px 22px; border-radius: 12px; border: 1px solid var(--you); background: color-mix(in srgb, var(--you) 7%, var(--s-panel)); }
.sv-over h4 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin: 6px 0 6px; }
.sv-over p { font-size: 14px; color: var(--s-dim); }
.sv-over-b { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

/* ---------- rail ---------- */
.sv-rail { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.sv-you { padding: 12px 14px; border: 1px solid var(--s-line); border-radius: 12px; background: var(--s-panel); }
.sv-big { font-size: 44px; font-weight: 900; letter-spacing: -.04em; line-height: 1.05; margin-top: 4px; font-variant-numeric: tabular-nums; }
.sv-big small { font-size: 15px; font-weight: 700; color: var(--s-dim); margin-left: 6px; letter-spacing: 0; }
.sv-big.alive { color: var(--up); }
.sv-big.out { color: var(--down); }
.sv-sub { font-size: 12.5px; color: var(--s-dim); margin: 2px 0 10px; min-height: 18px; }
.sv-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sv-stats .s-stat { padding: 8px 10px; border-radius: 9px; background: var(--s-panel2); }
.sv-stats .s-stat b { font-size: 20px; display: inline; }
.sv-stats .s-stat span { font-size: 11px; color: var(--s-faint); margin-left: 4px; }
.sv-rail-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.sv-rail-h > span:last-child { font: 500 10.5px 'IBM Plex Mono', monospace; color: var(--s-faint); }
.sv-chart { padding: 12px 14px 8px; border: 1px solid var(--s-line); border-radius: 12px; background: var(--s-panel); }
.sv-chart-box { position: relative; }
.sv-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.sv-chart .gl { stroke: var(--s-line); stroke-width: 1; }
.sv-chart .ax { fill: var(--s-faint); font: 500 9.5px 'IBM Plex Mono', monospace; }
.sv-chart .ln { fill: none; stroke: var(--you); stroke-width: 2; stroke-linejoin: round; }
.sv-chart .ar { fill: color-mix(in srgb, var(--you) 9%, transparent); }
.sv-chart .ko { fill: var(--down); stroke: var(--s-panel); stroke-width: 2; }
.sv-chart .end { fill: var(--you); stroke: var(--s-panel); stroke-width: 2; }
.sv-chart .cx { stroke: var(--s-dim); stroke-width: 1; stroke-dasharray: 2 3; }
.sv-chart .hit { fill: transparent; cursor: crosshair; }
.sv-tip { position: absolute; top: -6px; transform: translate(-50%, -100%); z-index: 3; display: flex; flex-direction: column; gap: 1px; min-width: 130px; padding: 7px 10px; border-radius: 8px; background: #22262f; border: 1px solid #333846; font-size: 11.5px; color: var(--s-dim); pointer-events: none; white-space: nowrap; box-shadow: 0 10px 24px rgba(0,0,0,.4); }
.sv-tip[hidden] { display: none; }
.sv-tip b { color: var(--s-text); font-size: 12px; }
.sv-tip em { font-style: normal; }
.sv-hist { padding: 12px 14px; border: 1px solid var(--s-line); border-radius: 12px; background: var(--s-panel); min-height: 0; }
.sv-ko { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; margin-bottom: 8px; border-radius: 9px; background: color-mix(in srgb, var(--down) 10%, var(--s-panel2)); box-shadow: inset 3px 0 0 var(--down); font-size: 12px; color: var(--s-dim); }
.sv-ko[hidden] { display: none; }
.sv-ko b { color: var(--s-text); font-size: 13px; font-weight: 700; }
.sv-ko .s-label { font-size: 10px; }
.sv-hist-list { max-height: 182px; overflow-y: auto; padding-bottom: 10px; -webkit-mask-image: linear-gradient(#000 calc(100% - 22px), transparent); mask-image: linear-gradient(#000 calc(100% - 22px), transparent); scrollbar-width: thin; scrollbar-color: var(--s-line) transparent; }
.sv-h { appearance: none; display: grid; grid-template-columns: 40px minmax(0, 1fr) 54px; align-items: center; gap: 8px; width: 100%; padding: 6px 0; border: 0; border-top: 1px solid var(--s-line); background: none; color: var(--s-text); font: 500 12px Inter, sans-serif; text-align: left; cursor: pointer; }
.sv-h:first-child { border-top: 0; }
.sv-h:hover .w { color: var(--s-text); }
.sv-h .w { font: 600 10.5px 'IBM Plex Mono', monospace; color: var(--s-dim); text-transform: uppercase; }
.sv-h .tops { display: flex; gap: 10px; min-width: 0; }
.sv-h-t { display: inline-flex; align-items: center; gap: 5px; padding-left: 6px; box-shadow: inset 3px 0 0 var(--tc); font: 500 11.5px 'IBM Plex Mono', monospace; color: var(--s-dim); white-space: nowrap; }
.sv-h-t b { color: var(--s-text); font-weight: 600; }
.sv-h-t.lost b { color: var(--down); text-decoration: line-through; }
.sv-h .o { font: 600 11px 'IBM Plex Mono', monospace; text-align: right; color: var(--s-faint); }
.sv-h.big { background: linear-gradient(90deg, rgba(255,90,110,.08), transparent 70%); }
.sv-h.view .w { color: var(--you); }
.sv-empty { font-size: 12.5px; color: var(--s-faint); padding: 4px 0; }

/* ---------- classic: the light printed look (market stays dark) ---------- */
.dk-stage.sv-classic {
  --s-bg: #f5f2ea; --s-panel: #fffdf8; --s-panel2: #ede9df; --s-line: #d8d3c6; --s-text: #141310; --s-dim: #4d4a42; --s-faint: #8a867c;
  --you: #c77800; --you-ink: #ffffff; --up: #1e8a55; --down: #c43345;
  box-shadow: 0 40px 90px -40px rgba(20,19,16,.35), 0 0 0 1px #d8d3c6;
}
.sv-classic .s-feed { background: #ede9df; }
.sv-classic .s-btn:disabled { opacity: 1; background: #e6e0d3; color: #8a867c; }
.sv-classic .s-btn.ghost:hover, .sv-classic .sv-wk.won:hover, .sv-classic .sv-wk.lost:hover, .sv-classic .sv-wk.past:hover { border-color: #b9b3a5; }
.sv-classic .sv-g, .sv-classic .sv-you, .sv-classic .sv-chart, .sv-classic .sv-hist, .sv-classic .sv-wk { box-shadow: 0 1px 0 rgba(20,19,16,.04); }
.sv-classic .sv-wk.won { border-color: rgba(30,138,85,.45); }
.sv-classic .sv-wk.lost { border-color: rgba(196,51,69,.5); }
.sv-classic .sv-wk.cur .sv-wk-h, .sv-classic .sv-gold, .sv-classic .sv-auto, .sv-classic .sv-t.mine .v, .sv-classic .sv-h.view .w { color: #8f5700; }
.sv-classic .sv-wk.fut { opacity: .6; }
.sv-classic .sv-t.used b, .sv-classic .sv-t.used .c { text-decoration-color: rgba(20,19,16,.45); }
.sv-classic .sv-t.mine { background: rgba(199,120,0,.12); }
.sv-classic .sv-g.upset { border-color: rgba(196,51,69,.45); }
.sv-classic .sv-g.final .sv-t.mine.lost { background: rgba(196,51,69,.1); }
.sv-classic .sv-seg.lost { opacity: .45; background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.55) 0 3px, transparent 3px 7px); }
.sv-classic .sv-poolbar { box-shadow: inset 0 0 0 1px var(--s-line); }
.sv-classic .sv-big.alive { color: var(--up); }
.sv-classic .sv-chart .ln { stroke: #141310; }
.sv-classic .sv-chart .ar { fill: rgba(20,19,16,.06); }
.sv-classic .sv-chart .end { fill: #141310; }
.sv-classic .sv-tip { background: #ffffff; border-color: var(--s-line); color: var(--s-dim); box-shadow: 0 14px 34px rgba(20,19,16,.16); }
.sv-classic .sv-ko { background: rgba(196,51,69,.07); }
.sv-classic .sv-h.big { background: linear-gradient(90deg, rgba(196,51,69,.07), transparent 70%); }
.sv-classic .sv-over { background: #fff8ea; }
.sv-classic .s-banner { box-shadow: 0 14px 40px rgba(20,19,16,.22); }
body.dk-embed:has(.sv-classic) { background: #f5f2ea; }

/* embed: keep the feed on the bottom edge */
body.dk-embed .sv-stage { display: flex; flex-direction: column; }
body.dk-embed .sv-stage .dk-screen { flex: 1; }

/* TV wall */
.dk-stage:fullscreen .dk-screen { padding: 22px 28px; }
.dk-stage:fullscreen .sv-main { grid-template-columns: minmax(0, 1fr) 360px; }
.dk-stage:fullscreen .sv-t { padding-top: 8px; padding-bottom: 8px; font-size: 15px; }
.dk-stage:fullscreen .sv-hist-list { max-height: 320px; }

/* ---------- smaller screens ---------- */
@media (max-width: 1260px) {
  .sv-t em { display: none; }
  .sv-t { grid-template-columns: 3px 32px minmax(0, 1fr) auto 40px; }
}
@media (max-width: 1100px) {
  .sv-main { grid-template-columns: 1fr; }
  .sv-rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sv-strip { grid-template-columns: repeat(18, 64px); overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
}
@media (max-width: 900px) {
  .sv-games { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sv-rail { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .dk-stage-wrap { padding: 0; }
  .sv-stage .dk-screen { padding: 12px; }
  .sv-head { flex-direction: column; align-items: stretch; }
  .sv-act { justify-content: space-between; }
  .sv-pick { align-items: flex-start; text-align: left; }
  .sv-legend span:not(:first-child) { display: none; }
  .sv-games { gap: 6px; }
  .sv-g { padding: 7px 7px 8px; }
  .sv-t { grid-template-columns: 3px 30px minmax(0, 1fr) 34px; gap: 5px; font-size: 12.5px; }
  .sv-t .c { display: none; }
  .sv-t .v { font-size: 14px; }
  .sv-g-h { font-size: 9px; }
  .sv-g-h .st { display: none; }
  .sv-play2 { display: flex; width: 100%; margin-top: 10px; }
  .sv-big { font-size: 38px; }
}