/* 13 Run. Everything here is prefixed tr- and lives inside the dark product screen. */
.tr-screen { padding: 0; }
.tr-grid { display: grid; grid-template-columns: 286px minmax(0, 1fr) 316px; height: 760px; min-height: 0; }
body.dk-embed .tr-grid { height: calc(100vh - 98px); min-height: 700px; }
.dk-stage:fullscreen .tr-grid { height: calc(100vh - 98px); }

.tr-rail { padding: 16px 16px 14px; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.tr-rail-l { border-right: 1px solid var(--s-line); }
.tr-rail-r { border-left: 1px solid var(--s-line); }
.tr-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; min-height: 18px; }
.tr-h2 { margin-top: 16px; }
.tr-h-note { font-size: 11px; color: var(--s-dim); }
.tr-link { appearance: none; border: 0; background: none; color: var(--you); font: 700 11.5px Inter, sans-serif; cursor: pointer; padding: 0; }
.tr-empty { font-size: 12px; color: var(--s-faint); line-height: 1.45; }

/* today's games */
.tr-games { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tr-g { position: relative; background: var(--s-panel); border: 1px solid var(--s-line); border-radius: 8px; padding: 5px 7px 5px 8px; font: 600 11px 'IBM Plex Mono', monospace; color: var(--s-dim); transition: border-color .3s, background .3s; }
.tr-g-row { display: grid; grid-template-columns: 3px 30px 1fr auto; gap: 6px; align-items: center; line-height: 17px; }
.tr-g-row i { height: 12px; border-radius: 1px; }
.tr-g-row b { color: var(--s-text); font-weight: 600; }
.tr-g-row s { text-decoration: none; text-align: right; color: var(--s-text); font-size: 12.5px; min-width: 16px; }
.tr-g-row s.mk { color: var(--you); }
.tr-g-st { position: absolute; right: 7px; top: -1px; transform: translateY(-50%); background: var(--s-bg); padding: 0 4px; font-size: 9.5px; color: var(--s-faint); letter-spacing: .04em; }
.tr-g.live { border-color: rgba(255, 69, 69, .45); }
.tr-g.live .tr-g-st { color: var(--hot); }
.tr-g.final .tr-g-st { color: var(--s-text); }
.tr-g.final .tr-g-row.lose { opacity: .55; }
.tr-g.marked { border-color: color-mix(in srgb, var(--you) 70%, transparent); }
.tr-g.pop s { animation: trPop .5s; }
.tr-g.off { opacity: .4; }
@keyframes trPop { 35% { color: var(--you); transform: scale(1.25); } }

/* new marks list */
.tr-marks { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 0; }
.tr-mk { display: grid; grid-template-columns: 3px 36px 1fr auto; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--s-line); font-size: 12px; color: var(--s-dim); animation: trIn .45s cubic-bezier(.2, .9, .3, 1.1); }
.tr-mk i { height: 18px; border-radius: 2px; }
.tr-mk b { color: var(--s-text); font-weight: 700; }
.tr-mk em { font: 600 12px 'IBM Plex Mono', monospace; font-style: normal; color: var(--you); background: color-mix(in srgb, var(--you) 14%, transparent); border-radius: 5px; padding: 1px 7px; }
.tr-mk.mine span { color: var(--s-text); }
@keyframes trIn { from { opacity: 0; transform: translateY(8px); } }

/* board */
.tr-main { min-width: 0; min-height: 0; display: flex; flex-direction: column; padding: 14px 18px 12px; }
.tr-main-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.tr-main-h b { font-size: 15px; font-weight: 800; letter-spacing: -.01em; margin-right: 10px; }
.tr-sub { font-size: 12px; color: var(--s-dim); }
.tr-main-ctl { display: flex; gap: 8px; flex: none; }
.tr-main-ctl .s-btn { min-width: 132px; }
.tr-board-wrap { flex: 1; min-height: 0; overflow: hidden; }
.tr-board { height: 100%; display: flex; flex-direction: column; }
.tr-rows { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.tr-row { display: grid; grid-template-columns: 22px 3px 34px minmax(0, 1fr) auto 34px 30px; gap: 8px; align-items: center; flex: 1 1 0; min-height: 19px; max-height: 26px; padding: 0 6px 0 4px; border-radius: 5px; font-size: 12px; cursor: pointer; }
.tr-rows .tr-row:hover { background: rgba(255, 255, 255, .035); }
.tr-row .rk { font: 600 11px 'IBM Plex Mono', monospace; color: var(--s-faint); text-align: right; }
.tr-row i { height: 13px; border-radius: 1px; }
.tr-row .ab { font-weight: 800; font-size: 12px; letter-spacing: .02em; }
.tr-row .nm { color: var(--s-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11.5px; }
.tr-row .nm em { font-style: normal; color: var(--s-faint); }
.tr-row .mk, .tr-row .gp { font: 600 12px 'IBM Plex Mono', monospace; text-align: right; }
.tr-row .gp { color: var(--s-dim); font-weight: 500; }
.tr-cells { display: flex; gap: 3px; }
.tr-c { width: 23px; height: 16px; border-radius: 3px; display: flex; align-items: center; justify-content: center; font: 600 9.5px 'IBM Plex Mono', monospace; color: #d9dce4; background: transparent; box-shadow: inset 0 0 0 1px #343946; transition: background .4s, color .4s; }
.tr-c.hit { background: #262a33; color: #6a7080; box-shadow: none; }
.tr-c.need { color: var(--you); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--you) 60%, transparent); }
.tr-c.today { background: var(--you); color: var(--you-ink); box-shadow: none; animation: trCell .7s cubic-bezier(.2, .9, .3, 1.3); }
@keyframes trCell { 0% { transform: scale(.4); } 60% { transform: scale(1.25); } }
.tr-row.me { background: color-mix(in srgb, var(--you) 11%, transparent); box-shadow: inset 3px 0 0 var(--you); }
.tr-row.me .ab, .tr-row.me .nm { color: var(--you); }
.tr-row.sel { outline: 1px solid rgba(255, 255, 255, .28); }
.tr-row.lead .rk { color: var(--s-text); }
.tr-row.done .mk { color: var(--up); }
.tr-row.done { background: color-mix(in srgb, var(--up) 10%, transparent); }
.tr-head, .tr-foot { cursor: default; flex: none; min-height: 22px; color: var(--s-faint); font: 600 9.5px 'IBM Plex Mono', monospace; letter-spacing: .06em; text-transform: uppercase; }
.tr-head { border-bottom: 1px solid var(--s-line); margin-bottom: 3px; padding-bottom: 2px; }
.tr-foot { border-top: 1px solid var(--s-line); margin-top: 3px; padding-top: 3px; }
.tr-head .tr-c, .tr-foot .tr-c { box-shadow: none; background: none; font-size: 9.5px; }
.tr-head .tr-c { color: var(--s-dim); font-size: 10.5px; }
.tr-foot .tr-c { color: var(--s-dim); }
.tr-foot .tr-c.low { color: var(--you); }
.tr-head span, .tr-foot span { text-align: right; }
.tr-head .nm, .tr-foot .nm { text-align: left; color: var(--s-faint); font-size: 9.5px; }

/* your team card */
.tr-you { background: var(--s-panel); border: 1px solid var(--s-line); border-radius: 12px; padding: 12px 12px 12px; }
.tr-you-top { display: grid; grid-template-columns: 4px 1fr auto; gap: 10px; align-items: center; }
.tr-you-top i { height: 34px; border-radius: 2px; }
.tr-you-top b { display: block; font-size: 15px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }
.tr-you-top small { display: block; font-size: 11.5px; color: var(--s-dim); }
.tr-you-n { text-align: right; }
.tr-you-n b { font-size: 30px; font-weight: 800; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.tr-you-n b span { font-size: 14px; color: var(--s-faint); font-weight: 700; margin-left: 2px; }
.tr-you-need { font-size: 12px; color: var(--s-dim); margin: 9px 0 9px; }
.tr-you-need b { color: var(--you); font-family: 'IBM Plex Mono', monospace; font-weight: 600; }
.tr-you-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.tr-yb { border-radius: 6px; padding: 4px 0 3px; text-align: center; box-shadow: inset 0 0 0 1px var(--s-line); }
.tr-yb b { display: block; font: 600 14px 'IBM Plex Mono', monospace; color: #d9dce4; line-height: 1.2; }
.tr-yb small { display: block; font: 500 9px 'IBM Plex Mono', monospace; color: var(--s-faint); }
.tr-yb.hit { background: #262a33; box-shadow: none; }
.tr-yb.hit b { color: #9aa0ae; }
.tr-yb.hit small { color: var(--s-dim); }
.tr-yb.need { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--you) 60%, transparent); }
.tr-yb.need b { color: var(--you); }
.tr-yb.today { background: var(--you); }
.tr-yb.today b, .tr-yb.today small { color: var(--you-ink); }
.tr-bar { height: 5px; border-radius: 3px; background: var(--s-line); margin-top: 10px; overflow: hidden; }
.tr-bar span { display: block; height: 100%; background: var(--you); border-radius: 3px; transition: width .6s; }

.tr-pot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tr-pot .s-stat { background: var(--s-panel); border: 1px solid var(--s-line); border-radius: 10px; padding: 8px 10px; }
.tr-pot .s-stat b { font-size: 20px; }
.tr-leader { margin-top: 8px; padding: 9px 11px; border-radius: 10px; border: 1px solid var(--s-line); font-size: 12px; color: var(--s-dim); line-height: 1.45; }
.tr-leader b { color: var(--s-text); }
.tr-leader .g { color: var(--up); font-weight: 700; }
.tr-leader.win { border-color: color-mix(in srgb, var(--up) 55%, transparent); background: color-mix(in srgb, var(--up) 8%, transparent); }

/* distribution */
.tr-dist { display: grid; grid-template-columns: repeat(15, 1fr); gap: 3px; align-items: end; height: 80px; flex: none; }
.tr-dist div { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 3px; }
.tr-dist span { width: 100%; background: #3a3f4c; border-radius: 2px 2px 0 0; min-height: 2px; transition: height .5s; }
.tr-dist small { font: 600 9px 'IBM Plex Mono', monospace; color: var(--s-faint); }
.tr-dist div.hi span { background: var(--you); }
.tr-dist div.hi small { color: var(--you); }
.tr-dist div.over span { background: transparent; box-shadow: inset 0 0 0 1px var(--s-line); }
.tr-dist-note { font-size: 11.5px; color: var(--s-dim); margin-top: 8px; line-height: 1.45; }
.tr-dist-note b { color: var(--s-text); font-family: 'IBM Plex Mono', monospace; font-weight: 600; }

/* ---------- smaller screens ---------- */
@media (max-width: 1240px) {
  .tr-grid { grid-template-columns: 250px minmax(0, 1fr) 280px; }
  .tr-c { width: 20px; }
  .tr-row .nm { display: none; }
  .tr-row { grid-template-columns: 22px 3px 34px minmax(0, 1fr) 30px 26px; }
  .tr-cells { justify-content: flex-end; }
}
@media (max-width: 1060px) {
  .tr-grid { grid-template-columns: minmax(0, 1fr) 300px; height: auto; }
  .tr-rail-l { grid-column: 1 / -1; order: 3; border-right: 0; border-top: 1px solid var(--s-line); }
  .tr-games { grid-template-columns: repeat(4, 1fr); }
  .tr-main { height: 720px; }
  .tr-rail-r { height: auto; }
  .tr-marks { max-height: 200px; }
}
@media (max-width: 760px) {
  .tr-grid { display: flex; flex-direction: column; height: auto; }
  .tr-main { order: 1; height: auto; padding: 14px 12px; }
  .tr-rail-r { order: 2; height: auto; border-left: 0; border-top: 1px solid var(--s-line); }
  .tr-rail-l { order: 3; }
  .tr-main-h { flex-direction: column; align-items: stretch; }
  .tr-main-ctl .s-btn { flex: 1; min-width: 0; }
  .tr-sub { display: block; margin-top: 2px; }
  .tr-board-wrap { overflow-x: auto; }
  .tr-board { min-width: 0; }
  .tr-rows .tr-row { flex: none; height: 22px; }
  .tr-row { grid-template-columns: 16px 3px 30px minmax(0, 1fr) 22px; gap: 5px; padding: 0 2px; }
  .tr-row .gp { display: none; }
  .tr-c { width: 16px; height: 15px; font-size: 8.5px; }
  .tr-cells { gap: 2px; }
  .tr-games { grid-template-columns: 1fr 1fr; }
  .tr-dist { height: 80px; }
}

.tr-rules { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--s-line); font-size: 11.5px; color: var(--s-dim); line-height: 1.5; }
.tr-rules div { display: grid; grid-template-columns: 66px 1fr; gap: 8px; padding: 2px 0; }
.tr-rules b { color: var(--s-text); font-weight: 600; }
.tr-head .gp, .tr-foot .gp { font: inherit; color: inherit; }
.dk-stage:fullscreen .tr-row, body.dk-embed .tr-row { max-height: 34px; }
.dk-stage:fullscreen .tr-c { width: 26px; height: 19px; font-size: 10.5px; }