/* ---------------------------------------------------------------------------
   Training, Position battles, and the two mood cards on Development.
   All classes `tl-`. (Most of these pages now draw their own windows; what
   is left here is dressed for the room: navy tiles, ink frames, no white.)
   House rules: solid colour only, ink outlines, nothing at regular weight,
   no emoji, no left-edge stripes. Works down to phone width.
--------------------------------------------------------------------------- */
.tl-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 4px 0 10px; }
.tl-h h3 { font-family: var(--disp); font-weight: 400; font-size: 28px; line-height: 1; text-transform: uppercase; }
.tl-h .tl-sub { font: 800 12.5px var(--sans); color: var(--soft); }

/* plan picker ------------------------------------------------------------- */
.tl-focus { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.tl-fb { text-align: left; cursor: pointer; padding: 9px 11px 8px; background: var(--card); color: var(--card-ink);
  border: 0; box-shadow: var(--frame), 0 6px 0 0 var(--ink); font: 600 12px/1.35 var(--sans); --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink); }
.tl-fb b { display: block; font-family: var(--disp); font-weight: 400; font-size: 22px; line-height: 1; text-transform: uppercase; margin-bottom: 4px; }
.tl-fb .who { display: block; margin-top: 5px; font: 800 10.5px var(--sans); letter-spacing: .5px; text-transform: uppercase; color: var(--txt-3); }
.tl-fb:hover { background: var(--ink); color: #fff; }
.tl-fb:hover .who { color: #fff; }
.tl-fb.on { background: var(--tm); color: var(--on-tm); }
.tl-fb.on .who { color: var(--on-tm); }
.tl-fb:active { transform: translateY(2px); border-bottom-width: 4px; }
.tl-int { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.tl-ib { cursor: pointer; padding: 10px 12px 8px; border: 0; box-shadow: var(--frame), 0 6px 0 0 var(--ink);
  background: var(--card); color: var(--card-ink); text-align: left; font: 600 12px/1.35 var(--sans); --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink); }
.tl-ib b { display: block; font-family: var(--disp); font-weight: 400; font-size: 26px; line-height: 1; text-transform: uppercase; }
.tl-ib .fx { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.tl-ib.on.light { background: #0284c7; color: #fff; }
.tl-ib.on.normal { background: var(--tm); color: var(--on-tm); }
.tl-ib.on.hard { background: var(--bad); color: #fff; }
.tl-ib:hover:not(.on) { background: var(--ink); color: #fff; }
.tl-ib:active { transform: translateY(2px); border-bottom-width: 4px; }

/* chips --------------------------------------------------------------------- */
.tl-chip { display: inline-block; padding: 2px 7px; margin: 1px 3px 1px 0; border: 2px solid var(--ink); border-radius: 0;
  font: 800 11px/1.3 var(--sans); color: #fff; background: var(--ink); white-space: nowrap; }
.tl-chip.up { background: var(--good); } .tl-chip.down { background: var(--bad); }
.tl-chip.tm { background: var(--tm); color: var(--on-tm); }
.tl-chip.gray { background: var(--grayed); }
.tl-chip.gold { background: var(--gold-btn); color: var(--ink); }
.tl-chip.blue { background: #2563eb; }
.tl-grade { display: inline-grid; place-items: center; width: 30px; height: 26px; border: 2px solid var(--ink); border-radius: 0;
  font-family: var(--disp); font-size: 20px; line-height: 1; color: #fff; }
.tl-grade.A { background: #15803d; } .tl-grade.B { background: #2563eb; } .tl-grade.C { background: #6b7280; }
.tl-grade.D { background: #ea580c; } .tl-grade.F { background: #e11d48; }

/* bars ----------------------------------------------------------------------- */
.tl-bar { position: relative; height: 14px; min-width: 70px; background: var(--card); border: 2px solid var(--ink); border-radius: 0; overflow: hidden; color: var(--card-ink); --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink); }
.tl-bar > i { position: absolute; left: 0; top: 0; bottom: 0; }

/* people ------------------------------------------------------------------------ */
.tl-who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tl-who .pxface { width: 32px; height: 32px; border: 2px solid var(--ink); border-radius: 0; background: var(--tm); flex: none; }
.tl-who .nm { min-width: 0; font-weight: 800; }
.tl-who .nm small { display: block; font: 800 11px var(--sans); color: var(--txt-3); }
.tl-sort th { cursor: pointer; user-select: none; }
.tl-sort th.on { background: var(--tm); color: var(--on-tm); }
.tl-tw td { vertical-align: middle; font-weight: 600; }

.tl-log th, .tl-log td { padding: 6px 7px; }
.tl-log, .tl-tw { overflow-x: auto; }
.tl-more summary { cursor: pointer; font: 800 12px var(--sans); letter-spacing: .8px; text-transform: uppercase;
  padding: 7px 12px; margin-bottom: 8px; display: inline-block; border: 0; box-shadow: var(--frame);
  background: var(--ink); color: #fff; }
.tl-more[open] summary { background: var(--tm); color: var(--on-tm); }

/* beats / storyline feed ----------------------------------------------------------- */
.tl-feed { display: grid; gap: 8px; }
.tl-beat { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 0; box-shadow: var(--frame); background: var(--card); font: 700 13px/1.4 var(--sans); color: var(--card-ink); --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink); }
.tl-beat .pxface { width: 48px; height: 48px; border: 2px solid var(--ink); border-radius: 0; background: var(--tm); flex: none; }
.tl-beat .tag { flex: none; }
.tl-beat.up { background: #15803d; color: #fff; }
.tl-beat.down, .tl-beat.hurt { background: #e11d48; color: #fff; }
.tl-beat.live { background: var(--bad); color: #fff; }
.tl-beat.win { background: var(--tm); color: var(--on-tm); }
.tl-beat.held { background: var(--ink); color: #fff; }
.tl-beat .when { font: 800 10.5px var(--sans); letter-spacing: .6px; text-transform: uppercase; opacity: .9; display: block; }

/* the happiest and unhappiest man — now on Coaching → Development ----------------- */
.tl-people { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.tl-pcard { display: flex; gap: 10px; align-items: center; padding: 10px; border: 0; box-shadow: var(--frame); color: #fff; }
.tl-pcard .pxface { width: 64px; height: 64px; border: 0; box-shadow: var(--frame); background: var(--win-2); flex: none; }
.tl-pcard .k { font: 800 10.5px var(--sans); letter-spacing: .8px; text-transform: uppercase; }
.tl-pcard .v { font-family: var(--disp); font-size: 26px; line-height: 1; }
.tl-pcard a { color: inherit; font-weight: 800; }
.tl-pcard .s { font: 700 12px var(--sans); }

/* battles ----------------------------------------------------------------------------- */
.tl-battles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tl-bt { border: 0; box-shadow: var(--frame); background: var(--card); overflow: hidden; color: var(--card-ink); --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink); }
.tl-bt-h { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--ink); color: #fff; }
.tl-bt-h b { font-family: var(--disp); font-weight: 400; font-size: 24px; line-height: 1; text-transform: uppercase; flex: 1; min-width: 0; }
.tl-bt.live .tl-bt-h { background: #e11d48; }
/* status chip: Building (ink) / Heating up (gold) / Live (red) / On hold (grey) */
.tl-bt-st { flex: none; padding: 3px 8px; border: 2px solid #fff; border-radius: 0; font: 900 10.5px var(--sans); letter-spacing: .8px; text-transform: uppercase; background: var(--ink); color: #fff; }
.tl-bt.hot .tl-bt-st { background: #ffd34d; color: var(--ink); }
.tl-bt.live .tl-bt-st { background: #e11d48; color: #fff; }
.tl-bt.hold .tl-bt-st { background: var(--grayed); color: #fff; }

/* tug of war: starter | bar | challenger */
.tl-tug { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 14px 12px 10px; }
.tl-man { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; width: 92px; }
.pxface.tl-tug-f { width: 64px; height: 64px; border: 0; box-shadow: var(--frame); background: var(--tm); }
.tl-man a { font: 800 12.5px/1.15 var(--sans); color: inherit; overflow-wrap: anywhere; }
.tl-man .meta { display: inline-flex; align-items: center; gap: 4px; font: 800 11px var(--sans); color: var(--txt-2); }
.tl-tug-bar { position: relative; height: 26px; background: var(--card); border: 0; box-shadow: var(--frame); overflow: hidden; color: var(--card-ink); --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink); }
.tl-tug-bar > i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #ffd34d; transition: width .9s ease-out; }
.tl-tug-bar.play > i { width: var(--w, 0%); }
.tl-bt.live .tl-tug-bar > i { background: #e11d48; }
.tl-tug-bar .mk { position: absolute; top: 0; bottom: 0; width: 3px; background: var(--ink); }

.tl-bt-line { padding: 0 12px 12px; font: 700 13px/1.4 var(--sans); color: inherit; }
.tl-bt-f { display: flex; gap: 8px; flex-wrap: wrap; padding: 10px 12px; border-top: 3px solid var(--ink); }
.tl-bt-f .cbtn { font-size: 17px; padding: 6px 11px 5px; }

.tl-bt-empty { padding: 16px 14px; border: 0; box-shadow: var(--frame); background: var(--card); font: 700 14px/1.4 var(--sans); color: var(--card-ink); --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink); }
.tl-watch { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-top: 12px; }
.tl-watch .k { font: 900 10.5px var(--sans); letter-spacing: .8px; text-transform: uppercase; color: var(--gold); margin-right: 4px; }
.tl-bt .tl-watch .k { color: var(--card-ink); }

@media (max-width: 720px) {
  .tl-battles { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .tl-int { grid-template-columns: 1fr; }
  .tl-focus { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ===========================================================================
   Team › Roster, Schedule, Team stats (src/season.js roster / schedule /
   teamStats) — in the room: windows on the locker room (src/room.css).
   All classes tp-.
=========================================================================== */
.tp .rm-tbl td { vertical-align: middle; }
.tp .ovr { display: inline-grid; place-items: center; min-width: 36px; height: 30px; padding: 0 4px; margin: 2px;
  font: 400 22px/1 var(--disp); letter-spacing: .3px; box-shadow: var(--frame-2); }
/* who: the face, the name in the display face, his tags */
.tp-pl { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tp-pn { display: grid; gap: 3px; min-width: 0; }
.tp-nm { font: 400 21px/1 var(--disp); letter-spacing: .4px; text-transform: uppercase; color: inherit; text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.tp-nm:hover { color: inherit; text-decoration: underline; }
.tp-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 0 2px; margin-left: -2px; }
.tp-tags .rm-bd { padding: 3px 5px 2px; font-size: 9.5px; }
/* the name and the rookie R (src/ux_enhance.js puts it after the link) on one line */
.tp-nml { display: flex; align-items: center; gap: 5px; min-width: 0; }
.tp-nml .rk { margin-left: 0; flex: none; }

/* the roster: sortable heads, the one it is sorted by in white */
.tp-rt th[data-sort] { cursor: pointer; user-select: none; }
/* ink heads like every table in the room (game.css paints .rsort heads in the club colour) */
.tp-rt thead th { background: var(--ink); color: var(--gold); }
.tp-rt th[data-sort]:hover, .tp-rt th.on { color: #fff; text-decoration: none; }
.tp-arr { font-style: normal; margin-left: 4px; color: var(--gold); }
.tp-rt .tp-tags { display: none; }
.tp-rt td.tp-aav b { font: 400 22px/1 var(--disp); letter-spacing: .4px; }
.tp-rt td.tp-age, .tp-rt td.tp-exp, .tp-rt td.tp-thru { font: 400 20px/1 var(--disp); letter-spacing: .4px; }
.tp-rt td.tp-status { width: 1%; white-space: nowrap; }
.tp-rt td.tp-status:empty { padding: 0; }
.tp-rt td.tp-pos { width: 1%; }
/* a phone has no column heads to tap: the same sort from one dropdown */
.tp-sortm { display: none; }

/* the schedule: one row a game, the other club on its own colours. The
   columns are fixed so every plate lines up; a narrow window (the side
   column, a phone) drops the button words and the row itself opens it. */
.tp-sch { gap: 4px; container: tpsch / inline-size; }
.tp-gm {
  position: relative; display: grid; grid-template-columns: 44px 30px minmax(0, 1fr) 112px 112px; align-items: center; gap: 10px;
  width: calc(100% - 6px); margin: 3px; padding: 6px 10px 6px 30px; border: 0; text-align: left; font: inherit;
  background: var(--card); color: var(--card-ink); box-shadow: var(--frame); --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink);
}
button.tp-gm { cursor: pointer; }
button.tp-gm:hover { background: var(--card-hov); color: var(--card-ink); }
.tp-gm.next { background: var(--card-hov); box-shadow: var(--frame), inset 0 0 0 3px var(--gold); color: var(--card-ink); }
.tp-wk { display: grid; justify-items: center; font: 400 26px/.9 var(--disp); color: inherit; }
.tp-wk small { font: 900 9.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: inherit; }
.tp-wk.po { font-size: 15px; line-height: 1; text-align: center; text-transform: uppercase; }
.tp-ha { font: 400 20px/1 var(--disp); text-transform: uppercase; color: inherit; }
.tp-opp { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 3px 12px 3px 3px;
  background: var(--tm); color: var(--on-tm); box-shadow: var(--frame-2); margin: 2px; }
.tp-opp .rm-crest { width: 40px; height: 40px; margin: 3px; box-shadow: var(--frame-2); }
.tp-on { display: grid; gap: 2px; min-width: 0; }
/* tradetalk.css has its own .tp-on (a flex row, loaded later): on a
   schedule plate the city stays over the nickname, never run into it */
.tp-opp .tp-on { display: grid; flex-wrap: nowrap; align-items: stretch; margin-top: 0; min-height: 0; }
.tp-on small { font: 900 10px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-on b { font: 400 24px/1 var(--disp); letter-spacing: .4px; text-transform: uppercase;
  text-shadow: 2px 2px 0 var(--tm-sh); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-opp.tp-bye { background: var(--ink-2); color: #fff; padding: 13px 12px; }
.tp-opp.tp-bye b { text-shadow: none; }
.tp-gm.bye { background: var(--card); }
.tp-gm.bye .tp-wk { color: var(--soft); }
.tp-res { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.tp-res b { font: 400 24px/1 var(--disp); letter-spacing: .4px; }
.tp-res .res { width: 28px; height: 28px; font-size: 20px; }
/* a game still to come: the day it is played, at the right edge */
.tp-when, .tp-gm.bye .tp-res { grid-column: 4 / -1; justify-self: end; }
.tp-when b { font: 900 11.5px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--soft); }
.tp-gm.next .tp-when b { color: inherit; }
.tp-box { pointer-events: none; justify-self: end; }
button.tp-gm:hover .tp-box { background: var(--gold); color: var(--ink); box-shadow: var(--frame), 0 5px 0 0 var(--ink), inset 0 -4px 0 0 var(--gold-dk); }
@container tpsch (max-width: 620px) {
  .tp-gm { grid-template-columns: 34px 20px minmax(0, 1fr) 80px; gap: 6px; padding: 5px 8px 5px 26px; }
  .tp-res { justify-self: end; }
  .tp-gm.rm-pt::before { left: 6px; }
  .tp-when, .tp-gm.bye .tp-res { grid-column: 4; }
  .tp-box { display: none; }
  .tp-wk { font-size: 22px; }
  .tp-ha { font-size: 17px; }
  .tp-opp { gap: 6px; padding-right: 8px; }
  .tp-opp .rm-crest { width: 34px; height: 34px; }
  .tp-on b { font-size: 20px; }
  .tp-on small { font-size: 9px; }
  .tp-res { gap: 5px; }
  .tp-res b { font-size: 20px; }
  .tp-res .res { width: 22px; height: 22px; font-size: 16px; }
  .tp-when { flex-direction: column; align-items: flex-end; gap: 3px; }
  .tp-when b { font-size: 10px; }
}
/* a phone: the week and the result give the plate the room a name needs
   (Commanders, Buccaneers) */
@container tpsch (max-width: 380px) {
  .tp-gm { grid-template-columns: 26px 18px minmax(0, 1fr) 72px; gap: 5px; padding: 5px 6px 5px 22px; }
  .tp-gm.rm-pt::before { left: 4px; }
  .tp-opp { gap: 5px; padding-right: 6px; }
  .tp-opp .rm-crest { margin: 2px; }
  .tp-on b { font-size: 18px; }
}

/* team stats: the season's four numbers, then a window a table */
.tp-kv { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tp-kv > div:first-child b { color: var(--card-ink); }
.tp-kv b { font-size: 40px; }
.tp-none { margin-top: 12px; }
.tp-st td.big { font: 400 24px/1 var(--disp); color: var(--card-ink); letter-spacing: .4px; }
.tp-st td.n:not(.big) { font: 400 20px/1 var(--disp); letter-spacing: .4px; }

@media (max-width: 760px) {
  .tp-kv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tp-kv b { font-size: 32px; }
  .tp-nm { font-size: 19px; white-space: normal; }
  /* the roster: each row a small card — who and his rating on top, the
     numbers labelled under him, an injury last */
  .tp-rt, .tp-rt tbody { display: block; }
  .tp-rt thead { display: none; }
  .tp-rt tr {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    grid-template-areas: "p p p o" "a e m y"; background: var(--card); border-top: 3px solid var(--ink); color: var(--card-ink); --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink);
  }
  .tp-rt tbody tr:first-child { border-top: 0; }
  .tp-rt tbody tr:nth-child(even) { background: var(--card); color: var(--card-ink); --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink); }
  .tp-rt tbody td, .tp-rt tbody tr:nth-child(even) td, .tp-rt tbody tr.hov:hover td { background: none; border: 0; }
  .tp-rt tbody tr.hov:hover { background: var(--card-hov); color: var(--card-ink); }
  .tp-rt td { padding: 4px 10px 8px; }
  .tp-rt td.tp-pos, .tp-rt td.tp-status { display: none; }
  .tp-rt td.tp-name { grid-area: p; padding: 10px 10px 4px; }
  .tp-rt td.tp-ovr { grid-area: o; padding: 10px 10px 4px; justify-self: end; }
  .tp-rt td.tp-age { grid-area: a; text-align: left; }
  .tp-rt td.tp-exp { grid-area: e; text-align: left; }
  .tp-rt td.tp-aav { grid-area: m; text-align: left; }
  .tp-rt td.tp-thru { grid-area: y; text-align: right; }
  .tp-rt td[data-l]::before { content: attr(data-l); display: block; margin-bottom: 4px;
    font: 900 9.5px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--card-ink); }
  .tp-rt .tp-tags { display: flex; }
  .tp-rt td.tp-aav b { font-size: 20px; }
  .tp-sortm { display: flex; align-items: center; gap: 8px; margin: 0 3px 10px; }
  .tp-sortm > span { font: 900 10px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
  /* a stats table: the man across the top of his card, his numbers
     labelled in a row under him */
  .tp-st, .tp-st tbody { display: block; }
  .tp-st thead { display: none; }
  .tp-st tbody tr { display: flex; flex-wrap: wrap; background: var(--card); border-top: 3px solid var(--ink); color: var(--card-ink); --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink); }
  .tp-st tbody td { flex: 1 1 0; min-width: 0; }
  .tp-st tbody tr:first-child { border-top: 0; }
  .tp-st tbody tr:nth-child(even) { background: var(--card); color: var(--card-ink); --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink); }
  .tp-st tbody td, .tp-st tbody tr:nth-child(even) td { background: none; border: 0; padding: 4px 6px 8px; }
  .tp-st td.tp-name { flex: 0 0 100%; padding: 10px 10px 4px; }
  .tp-st td[data-l]::before { content: attr(data-l); display: block; margin-bottom: 5px;
    font: 900 9.5px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--card-ink); }
  .tp-st .tp-nm { font-size: 19px; }
}

/* ===========================================================================
   League › Scores, Playoffs, Leaders, History (src/season.js) — windows on
   the stadium. All classes sl-; the old hooks (.sb-g, .po-g, .cp-tgo) stay.
=========================================================================== */
.rm-tbl tr.me .tp-nm { color: var(--on-tm); }
.sl-pick select { max-width: 220px; }
/* a game: two rows, a crest and a name each, the winner's score in gold */
.sl-sb { display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: 8px; }
.sl-g.sb-g { position: relative; display: grid; gap: 4px; align-content: start; width: auto; margin: 3px; padding: 8px 10px 8px 30px;
  border: 0; text-align: left; font: inherit; cursor: pointer; background: var(--card); color: var(--card-ink); box-shadow: var(--frame); --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink); }
.sl-g.sb-g:hover { background: var(--card-hov); color: var(--card-ink); }
.sl-g.sb-g.mine { box-shadow: var(--frame), inset 0 0 0 3px var(--tm); }
.sl-g.sb-g:disabled { cursor: default; }
.sl-g.rm-pt::before { top: 30px; }
.sl-r.sb-r { display: flex; align-items: center; gap: 9px; padding: 0; color: var(--card-ink); }
.sl-r .rm-crest { width: 36px; height: 36px; margin: 2px; box-shadow: var(--frame-2); }
.sl-nm { flex: 1; min-width: 0; font: 400 21px/1 var(--disp); letter-spacing: .4px; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-r.sb-r b { margin-left: auto; font: 400 28px/1 var(--disp); letter-spacing: .4px; color: var(--card-ink); }
.sl-r.sb-r.w { color: var(--card-ink); }
/* the winner's score: a gold chip on the white card */
.sl-r.sb-r.w b { color: var(--ink); background: var(--gold); box-shadow: 0 0 0 3px var(--gold), 0 0 0 5px var(--ink); }
.sl-r.out .sl-nm { color: var(--card-ink); }
.sl-inj { justify-self: start; margin-top: 4px; }
.sl-sd { width: 16px; flex: none; text-align: center; font: 400 18px/1 var(--disp); color: inherit; }

/* the playoff picture: a seed a row, on the club's own colours */
.sl-seed { display: flex; align-items: center; gap: 9px; margin: 3px; padding: 3px 12px 3px 6px;
  background: var(--tm); color: var(--on-tm); box-shadow: var(--frame); }
.sl-seed.mine { box-shadow: var(--frame), inset 0 0 0 3px var(--gold); }
.sl-seed .rm-crest { width: 36px; height: 36px; box-shadow: var(--frame-2); }
.sl-seed .nm { flex: 1; min-width: 0; font: 400 22px/1 var(--disp); letter-spacing: .4px; text-transform: uppercase;
  text-shadow: 2px 2px 0 var(--tm-sh); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-seed .rc { font: 400 22px/1 var(--disp); letter-spacing: .4px; text-shadow: 2px 2px 0 var(--tm-sh); }
.sl-n { width: 30px; height: 30px; flex: none; display: grid; place-items: center; background: var(--ink); color: #fff;
  font: 400 22px/1 var(--disp); box-shadow: 0 0 0 2px #000; }
.sl-n.div { background: var(--gold); color: var(--ink); }
/* the bracket: three rounds a conference */
.sl-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.sl-cols.one { grid-template-columns: minmax(0, 340px); }
.sl-col { display: grid; gap: 6px; align-content: start; }
.sl-col .rm-sec { margin: 0 3px 4px; }
.sl-tbd { text-align: center; }
.sl-bye { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 3px; padding: 6px 10px 6px 6px;
  background: var(--tm); color: var(--on-tm); box-shadow: var(--frame); }
.sl-bye .rm-crest { width: 36px; height: 36px; box-shadow: var(--frame-2); }
.sl-bye b { flex: 1; font: 400 21px/1 var(--disp); text-transform: uppercase; text-shadow: 2px 2px 0 var(--tm-sh); }
.sl-champ { display: flex; align-items: center; gap: 16px; background: var(--tm); color: var(--on-tm); }
.sl-champ b { display: block; font: 400 38px/1 var(--disp); text-transform: uppercase; text-shadow: 3px 3px 0 var(--tm-sh); }
.sl-champ span { font: 800 14px/1.3 var(--sans); }
.rm-crest.sl-big { width: 84px; height: 84px; }
.rm-crest.sl-big img { width: 64px; height: 64px; }

/* leaders and past seasons */
.sl-lead td.n:not(.big) { font: 400 20px/1 var(--disp); letter-spacing: .4px; }
.sl-lead td.big { color: var(--card-ink); }
.sl-lead .tp-tags .sl-tm { text-decoration: none; }
.sl-lead .tp-tags .sl-tm:hover { background: var(--gold); color: var(--ink); }
.sl-club { display: inline-flex; align-items: center; gap: 8px; }
.sl-club .rm-crest { width: 36px; height: 36px; box-shadow: var(--frame-2); }
.sl-club b { font: 400 21px/1 var(--disp); text-transform: uppercase; }

@media (max-width: 760px) {
  .sl-sb { grid-template-columns: minmax(0, 1fr); }
  .sl-cols { grid-template-columns: minmax(0, 1fr); }
  .sl-cols.one { grid-template-columns: minmax(0, 1fr); }
  .sl-champ b { font-size: 28px; }
  .rm-crest.sl-big { width: 72px; height: 72px; }
  .sl-pick select { max-width: 160px; }
  /* the playoff picture: room for Buccaneers next to its badge */
  .sl-seed { gap: 7px; padding-right: 8px; }
  .sl-seed .nm { font-size: 19px; }
  .sl-seed .rm-bd { padding: 3px 5px 2px; font-size: 9.5px; }
  /* leaders: each man a small card — the rank and who across the top, his
     numbers labelled under him, five to a row */
  .sl-lead, .sl-lead tbody { display: block; }
  .sl-lead thead { display: none; }
  .sl-lead tbody tr { display: flex; flex-wrap: wrap; align-items: center; background: var(--card); border-top: 3px solid var(--ink); color: var(--card-ink); --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink); }
  .sl-lead tbody tr:first-child { border-top: 0; }
  .sl-lead tbody tr:nth-child(even) { background: var(--card); color: var(--card-ink); --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink); }
  .sl-lead tbody tr.me { background: var(--tm); }
  .sl-lead tbody td, .sl-lead tbody tr:nth-child(even) td, .sl-lead tbody tr.me td { background: none; border: 0; padding: 4px 6px 8px; }
  .sl-lead td.sl-rk { flex: 0 0 38px; padding: 10px 0 4px 10px; text-align: left; }
  .sl-lead td.tp-name { flex: 1 0 calc(100% - 38px); min-width: 0; padding: 10px 10px 4px 4px; }
  .sl-lead td[data-l] { flex: 0 0 20%; min-width: 0; }
  .sl-lead td[data-l]::before { content: attr(data-l); display: block; margin-bottom: 5px;
    font: 900 9.5px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--card-ink); }
  .sl-lead tr.me td[data-l]::before { color: var(--tm-acc); }
}