/* ---------------------------------------------------------------------------
   League → Standings (src/standings_view.js), in the room.

   The page stands in the stadium (src/room.js). A window with the three ways
   to read the table, then one window per conference with its title bar in
   the conference's colour (or one window for all 32). The rows are the
   kit's table: gold heads on ink, column lines, zebra rows, your club in its
   colour with the gold cursor.

   The rest of the League tab that src/season.js draws (Scores, Playoffs,
   Leaders, History) is dressed at the bottom of this file.

   House rules: solid colour only, 3px ink frames, Jersey 15 for records and
   numbers, Rubik 700+ for everything read, no emoji, no stripes down a side.
--------------------------------------------------------------------------- */

/* --- the top window: the three ways to read it ---------------------------- */
.st-bar {
  display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap;
}
.st-bar .rm-tabs { margin: 0; }
.st-key {
  display: inline-flex; align-items: center; gap: 6px; margin-left: auto;
  font: 900 10.5px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--soft);
}
.st-key b { font-weight: 900; margin-right: 8px; }
.st-key b:last-child { margin-right: 0; }

/* --- the conference windows ----------------------------------------------- */
.st-confs { align-items: start; }
.st-conf .rm-wb > .rm-sec:first-child { margin-top: 2px; }
.st-dn-h { margin-top: 18px; }

/* --- one table (a grid of buttons, so every row is one tap) ------------------ */
.st-div {
  --st-cols: 28px 38px minmax(0, 1fr) 70px 60px 64px 78px;
  margin: 3px 3px 6px; box-shadow: var(--frame); background: var(--card); color: var(--card-ink); --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink);
}
.st-head, .st-row {
  display: grid; grid-template-columns: var(--st-cols); gap: 10px;
  align-items: center; text-align: left;
}
.st-head {
  padding: 7px 10px 6px 34px; background: var(--ink); color: var(--gold);
  font: 900 10.5px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase;
}
.st-head .st-n, .st-head .st-rec { text-align: right; font: inherit; }
.st-head .st-strk, .st-head .st-nm { font: inherit; }
.st-head .st-strk { text-align: left; }
/* column lines down the gaps, from the record across — each cell draws its
   own 2px line in the gap to its left */
.st-head > *, .st-row > * { position: relative; }
.st-head > :nth-child(n+4)::before, .st-row > :nth-child(n+4)::before {
  content: ''; position: absolute; left: -6px; top: -12px; bottom: -12px; width: 2px;
  background: var(--rule); pointer-events: none;
}
.st-head > :nth-child(n+4)::before { top: -7px; bottom: -6px; }

.st-row {
  position: relative; width: 100%; min-height: 46px; padding: 5px 10px 5px 34px; margin: 0; cursor: pointer;
  background: var(--card); color: var(--card-ink); border: 0; border-top: 2px solid var(--card-line);
  font-family: var(--sans); --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink);
}
.st-row:nth-child(odd) { background: var(--card); color: var(--card-ink); --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink); }
.st-row:hover, .st-row:focus-visible { background: var(--card-hov); outline: none; color: var(--card-ink); }
.st-row.mine, .st-row.mine:hover { background: var(--tm); color: var(--on-tm); }
.st-row.mine > :nth-child(n+4)::before { background: var(--tm-dk); }
/* the gold cursor: on the row you point at, and bobbing on your own club */
.st-row::before {
  content: ''; position: absolute; left: 9px; top: 50%; width: 14px; height: 22px; margin-top: -11px;
  background: var(--cur) center / 100% 100% no-repeat; image-rendering: pixelated; visibility: hidden;
}
.st-row:hover::before, .st-row:focus-visible::before, .st-row.mine::before { visibility: visible; }
.st-row.mine::before { animation: rm-bob .7s steps(2, jump-none) infinite; }
@media (prefers-reduced-motion: reduce) { .st-row.mine::before { animation: none; } }

/* seed / place */
.st-seed, .st-place {
  display: grid; place-items: center; width: 26px; height: 26px;
  font: 400 20px/1 var(--disp);
}
.st-seed { margin: 2px; box-shadow: var(--frame-2); }
.st-seed.win { background: var(--gold); color: var(--ink); }
.st-seed.wc { background: var(--sky); color: var(--ink); }
.st-place { color: var(--soft); }
.st-row.mine .st-place { color: inherit; }
.st-key .st-seed { width: 22px; height: 22px; font-size: 17px; }

/* the club's crest on white, 32px */
.st-crest {
  display: grid; place-items: center; width: 36px; height: 36px; margin: 2px 0;
  background: #fff; box-shadow: var(--frame-2);
}
.st-logo { width: 32px; height: 32px; object-fit: contain; display: block; }

.st-nm { min-width: 0; display: flex; align-items: center; gap: 8px; line-height: 1.15; }
/* a long name takes a second line rather than being cut off */
.st-nm b { font: 800 14.5px/1.15 var(--sans); overflow-wrap: break-word; }
/* a chip, only when there is something to say */
.st-tag {
  flex: none; padding: 4px 7px 3px; margin: 2px; box-shadow: var(--frame-2);
  background: var(--sky); color: var(--ink);
  font: 900 10px/1 var(--sans); font-style: normal; text-transform: uppercase; letter-spacing: .08em;
}
.st-tag.bye { background: var(--gold); }
.st-tag.div { background: var(--green); color: #fff; }
.st-tag.gone { background: var(--red); color: #fff; }

.st-rec { font: 400 26px/1 var(--disp); text-align: right; letter-spacing: .5px; }
.st-n {
  text-align: right; font: 800 13px var(--sans); font-variant-numeric: tabular-nums;
}
.st-up { color: var(--good); }
.st-dn { color: var(--bad); }
.st-ev { color: var(--soft); }
.st-strk { font: 900 11.5px var(--sans); white-space: nowrap; text-transform: uppercase; letter-spacing: .04em; }
.st-row.mine .st-n, .st-row.mine .st-up, .st-row.mine .st-dn, .st-row.mine .st-ev { color: var(--on-tm); }

/* a club that can no longer get in */
.st-outrow .st-nm b { color: var(--txt-3); }
.st-outrow.mine .st-nm b, .st-outrow:hover .st-nm b { color: inherit; }

/* the line between in and out, in the conference view */
.st-cut {
  display: flex; align-items: center; gap: 10px; padding: 6px 10px 5px 34px;
  background: var(--ink); color: var(--gold); border-top: 2px solid var(--rule);
  font: 900 10.5px/1 var(--sans); text-transform: uppercase; letter-spacing: .1em;
}
.st-cut::after { content: ''; flex: 1; height: 3px; background: var(--gold); }

/* the whole league in one list: a wide window, so the numbers get room */
.st-league .st-div { margin-bottom: 3px; }
@media (min-width: 1101px) {
  .st-league .st-div { --st-cols: 28px 38px minmax(0, 1fr) 110px 96px 96px 120px; }
  .st-league .st-head > :nth-child(n+4)::before, .st-league .st-row > :nth-child(n+4)::before { left: -6px; }
  .st-league .st-n, .st-league .st-rec, .st-league .st-head .st-n, .st-league .st-head .st-rec { text-align: center; }
  .st-league .st-strk { padding-left: 10px; }
}

/* --- narrower ------------------------------------------------------------------ */
@media (max-width: 1240px) {
  .st-div { --st-cols: 26px 38px minmax(0, 1fr) 64px 54px 58px 70px; }
  .st-head, .st-row { gap: 8px; }
  .st-head > :nth-child(n+4)::before, .st-row > :nth-child(n+4)::before { left: -5px; }
  .st-tag { display: none; }
  .st-row .st-tag.gone, .st-row .st-tag.bye { display: inline-block; }
}
@media (max-width: 1100px) {
  .st-tag { display: inline-block; }
}
@media (max-width: 560px) {
  .st-div { --st-cols: 24px 34px minmax(0, 1fr) 56px 50px; }
  .st-c2 { display: none; }
  .st-head, .st-row { gap: 7px; padding-left: 8px; padding-right: 8px; }
  .st-cut { padding-left: 8px; }
  .st-row { min-height: 42px; }
  .st-row::before { display: none; }
  .st-head > :nth-child(n+4)::before, .st-row > :nth-child(n+4)::before { left: -4.5px; }
  .st-rec { font-size: 23px; }
  .st-nm { gap: 5px; }
  .st-nm b { font-size: 13px; }
  .st-tag, .st-row .st-tag.gone, .st-row .st-tag.bye { display: none; }
  .st-seed, .st-place { width: 22px; height: 22px; font-size: 17px; }
  .st-crest { width: 34px; height: 34px; }
  .st-key { margin-left: 0; }
}

/* ===========================================================================
   The rest of the League tab (src/season.js) — Scores, Playoffs, Leaders,
   History. Their markup is season.js's; this dresses it in the room: the
   games are tiles, the bracket is tiles with the round on a gold label, the
   leaders' filters are the kit's tabs.
=========================================================================== */
/* src/season.js now draws these four pages as windows of its own (.rm-page,
   dressed in src/teamlife.css). Everything below dresses only the old markup,
   so it steps aside whenever the board holds a page in the room. */
/* Its new windows still carry the old class names (po-champ, po-seeds,
   po-conf, po-seed), and the old base look in style.css / game.css reaches
   them through those: give them back the kit's window, and keep your own
   club's name readable on its own colour. */
#board .rm-win.po-champ, #board .rm-win.po-seeds, #board .rm-win.po-conf {
  display: block; padding: 0; margin: 3px; border: 2px solid #fff; border-radius: 0;
  background: var(--win); color: #fff; box-shadow: var(--frame), var(--drop);
}
#board .rm-win .po-seed { border-bottom: 0; }
#board .po-seed.mine .nm, #board .po-seed.mine .nm a { color: var(--on-tm); }
/* the week picker and the count */
#board:not(:has(> .rm-page)) > .bar:first-child, #board:not(:has(> .rm-page)) > .head + .bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px;
}
#board:not(:has(> .rm-page)) > .bar .pill { margin-left: auto; padding: 5px 9px 4px; background: var(--gold); color: var(--ink); font: 900 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; }

/* Scores: one tile per game */
#board:not(:has(> .rm-page)) .sb { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
#board:not(:has(> .rm-page)) .sb-g {
  display: flex; flex-direction: column; justify-content: flex-start; width: auto; margin: 3px; padding: 8px 10px 8px; 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);
}
#board:not(:has(> .rm-page)) .sb-g:hover { background: var(--card-hov); color: var(--card-ink); }
#board:not(:has(> .rm-page)) .sb-g.mine { background: var(--tm); color: var(--on-tm); box-shadow: var(--frame); }
#board:not(:has(> .rm-page)) .sb-g:disabled { cursor: default; }
#board:not(:has(> .rm-page)) .sb-g:disabled:hover { background: var(--card); color: var(--card-ink); }
#board:not(:has(> .rm-page)) .sb-r { gap: 9px; padding: 4px 0; color: var(--soft); font: 900 13px/1 var(--sans); letter-spacing: .04em; }
#board:not(:has(> .rm-page)) .sb-r + .sb-r { border-top: 2px solid var(--card-line); }
#board:not(:has(> .rm-page)) .sb-g.mine .sb-r { color: var(--on-tm); }
#board:not(:has(> .rm-page)) .sb-g.mine .sb-r + .sb-r { border-top-color: var(--tm-dk); }
#board:not(:has(> .rm-page)) .sb-r img.logo {
  width: 32px; height: 32px; padding: 2px; object-fit: contain; flex: none;
  background: #fff; box-shadow: var(--frame-2); margin: 2px;
}
#board:not(:has(> .rm-page)) .sb-r .cp-tgo { cursor: pointer; }
#board:not(:has(> .rm-page)) .sb-r .cp-tgo:hover { color: inherit; text-decoration: underline; }
#board:not(:has(> .rm-page)) .sb-r b { margin-left: auto; font: 400 30px/1 var(--disp); color: inherit; }
#board:not(:has(> .rm-page)) .sb-r.w { color: var(--card-ink); }
#board:not(:has(> .rm-page)) .sb-r.w b { color: var(--ink); background: var(--gold); box-shadow: 0 0 0 3px var(--gold), 0 0 0 5px var(--ink); }
#board:not(:has(> .rm-page)) .sb-g.mine .sb-r.w, #board:not(:has(> .rm-page)) .sb-g.mine .sb-r.w b { color: var(--on-tm); }
#board:not(:has(> .rm-page)) .sb-r.out { color: var(--txt-3); }
#board:not(:has(> .rm-page)) .sb-inj {
  display: inline-block; align-self: flex-start; margin-top: 6px; padding: 4px 7px 3px; background: var(--red); color: #fff;
  box-shadow: var(--frame-2); font: 900 10px/1 var(--sans); letter-spacing: .08em;
}

/* Playoffs: the picture, then the bracket */
#board:not(:has(> .rm-page)) .po-grid { gap: 16px; }
#board:not(:has(> .rm-page)) .po-seeds { padding: 0; margin: 3px; background: var(--card); box-shadow: var(--frame); overflow: hidden; color: var(--card-ink); --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink); }
#board:not(:has(> .rm-page)) .po-seeds h3, #board:not(:has(> .rm-page)) .po-conf > h3 {
  margin: 0; padding: 7px 12px 5px; background: var(--ink); color: var(--gold);
  font: 400 26px/1 var(--disp); letter-spacing: .6px; text-transform: uppercase;
}
#board:not(:has(> .rm-page)) .po-conf > h3 { margin: 0 3px 10px; box-shadow: var(--frame); }
#board:not(:has(> .rm-page)) .po-seed { gap: 10px; padding: 7px 12px; border-bottom: 0; border-top: 2px solid var(--card-line); color: var(--card-ink); }
#board:not(:has(> .rm-page)) .po-seed:nth-child(odd) { background: var(--card); color: var(--card-ink); --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink); }
#board:not(:has(> .rm-page)) .po-seed.mine { background: var(--tm); color: var(--on-tm); }
#board:not(:has(> .rm-page)) .po-seed.mine .nm, #board:not(:has(> .rm-page)) .po-seed.mine .nm a { color: var(--on-tm); }
#board:not(:has(> .rm-page)) .po-seed .nm a { color: inherit; text-decoration: none; }
#board:not(:has(> .rm-page)) .po-seed .rc { font: 400 22px/1 var(--disp); }
#board:not(:has(> .rm-page)) .po-n {
  width: 26px; height: 26px; margin: 2px; background: var(--sky); color: var(--ink);
  box-shadow: var(--frame-2); font: 400 19px/1 var(--disp);
}
#board:not(:has(> .rm-page)) .po-n.div { background: var(--gold); color: var(--ink); }
#board:not(:has(> .rm-page)) .po-tag { color: var(--soft); font-weight: 900; }
#board:not(:has(> .rm-page)) .po-seed.mine .po-tag { color: var(--on-tm); }
#board:not(:has(> .rm-page)) .po-seed img.logo, #board:not(:has(> .rm-page)) .po-bye img.logo {
  width: 32px; height: 32px; padding: 2px; background: #fff; box-shadow: var(--frame-2); margin: 2px; object-fit: contain;
}
#board:not(:has(> .rm-page)) .po-conf { margin-bottom: 20px; }
#board:not(:has(> .rm-page)) .po-col h4 {
  align-self: flex-start; margin: 0 3px; padding: 5px 9px 4px; background: var(--gold); color: var(--ink);
  box-shadow: var(--frame-2); font: 900 10.5px/1 var(--sans); letter-spacing: .08em;
}
#board:not(:has(> .rm-page)) .po-sd { width: 18px; font: 400 18px/1 var(--disp); color: var(--soft); }
#board:not(:has(> .rm-page)) .po-next {
  display: inline-block; align-self: flex-start; margin-top: 6px; padding: 4px 7px 3px; background: var(--gold); color: var(--ink);
  box-shadow: var(--frame-2); font: 900 10px/1 var(--sans); letter-spacing: .08em;
}
#board:not(:has(> .rm-page)) .po-tbd { margin: 3px; padding: 14px 10px; border: 0; background: var(--ink); color: var(--soft); box-shadow: var(--frame); font: 900 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
#board:not(:has(> .rm-page)) .po-bye { margin: 3px; padding: 8px 10px; 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); }
#board:not(:has(> .rm-page)) .po-bye b a { color: inherit; text-decoration: none; }
#board:not(:has(> .rm-page)) .po-bye span { margin-left: auto; font: 900 10px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--card-ink); }
#board:not(:has(> .rm-page)) .po-champ {
  display: flex; align-items: center; gap: 16px; margin: 3px 3px 18px; padding: 14px 16px;
  background: var(--gold); color: var(--ink); box-shadow: var(--frame);
}
#board:not(:has(> .rm-page)) .po-champ img.logo { padding: 4px; background: #fff; box-shadow: var(--frame); }
#board:not(:has(> .rm-page)) .po-champ .k { font: 900 11px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
#board:not(:has(> .rm-page)) .po-champ b { display: block; margin: 4px 0; font: 400 40px/1 var(--disp); text-transform: uppercase; letter-spacing: .5px; }
#board:not(:has(> .rm-page)) .po-champ b a { color: var(--ink); text-decoration: none; }
#board:not(:has(> .rm-page)) .po-champ span { font: 800 13px var(--sans); }

/* Leaders: the board picker as tabs, the player's line under his name */
#board:not(:has(> .rm-page)) > .bar .seg { display: flex; flex-wrap: wrap; gap: 4px; padding: 0; margin: 0; background: none; box-shadow: none; }
#board:not(:has(> .rm-page)) > .bar .seg button {
  margin: 3px; padding: 7px 12px 5px; background: var(--card); color: var(--card-ink); box-shadow: var(--frame);
  font: 400 20px/1 var(--disp); letter-spacing: .5px; text-transform: uppercase; cursor: pointer; --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink);
}
#board:not(:has(> .rm-page)) > .bar .seg button:hover { background: var(--card-hov); color: var(--card-ink); }
#board:not(:has(> .rm-page)) > .bar .seg button.on { background: var(--gold); color: var(--ink); }
#board:not(:has(> .rm-page)) .tw td .plink { color: inherit; font-weight: 800; text-decoration: none; }
#board:not(:has(> .rm-page)) .tw td .plink:hover { color: inherit; text-decoration: underline; }
#board:not(:has(> .rm-page)) .tw td .plink ~ .sub {
  display: block; margin: 3px 0 0; padding: 0; background: none; box-shadow: none; color: var(--soft);
  font: 900 10.5px/1.2 var(--sans); letter-spacing: .06em;
}
#board:not(:has(> .rm-page)) .tw td .plink ~ .sub .cp-tlink { color: var(--card-ink); text-decoration: none; }
#board:not(:has(> .rm-page)) .tw tr.mine td .plink, #board:not(:has(> .rm-page)) .tw tr.mine td .plink ~ .sub, #board:not(:has(> .rm-page)) .tw tr.mine td .cp-tlink { color: var(--on-tm); }
#board:not(:has(> .rm-page)) .tw .grade { display: inline-block; min-width: 40px; padding: 3px 5px 2px; box-shadow: var(--frame-2); text-align: center; font: 900 12.5px var(--sans); }

/* History: the champion's crest on white, beside his name */
#board:not(:has(> .rm-page)) .sect .tw td img.logo {
  display: inline-block; vertical-align: middle; width: 32px; height: 32px; padding: 2px; margin: 2px 8px 2px 2px;
  object-fit: contain; background: #fff; box-shadow: var(--frame-2);
}
#board:not(:has(> .rm-page)) .sect .tw td b .cp-tlink { color: inherit; text-decoration: none; }
#board:not(:has(> .rm-page)) .sect .tw td.num { font: 400 22px/1 var(--disp); }

@media (max-width: 560px) {
  #board:not(:has(> .rm-page)) .sb { grid-template-columns: minmax(0, 1fr); }
  #board:not(:has(> .rm-page)) > .bar .seg button { font-size: 17px; padding: 6px 9px 4px; }
  #board:not(:has(> .rm-page)) .po-cols { grid-template-columns: minmax(0, 1fr); }
  #board:not(:has(> .rm-page)) .po-champ b { font-size: 30px; }
}