/* ---------------------------------------------------------------------------
   FBGM 27 — game look. Loaded after style.css and room.css, and re-themes
   the older screens onto the room kit.

   "In the room" (the owner's pick, 2026-09-24): every screen stands in a
   room of the club (src/room.js paints it behind everything), and the
   interface floats on it as solid retro windows — 3px ink frame with cut
   pixel corners, a white inner ring, a navy body, a title bar in the club's
   colour. Jersey 15 for headings and numbers, Rubik 700+ for everything you
   read, the franchise's own colours through --tm / --tm-2, a gold cursor on
   whatever is selected. The furniture is room.css; this file dresses the
   shell (header, menu, sub-menu), Home, and the older classes (.card,
   .cbtn, tables, tiles) so old markup inherits the look.
   House rules: solid colour only (never a pale tint), no emoji, no
   left-edge stripes, nothing at regular weight.
--------------------------------------------------------------------------- */
:root {
  --tm: #1e63d6; --on-tm: #fff; --tm-2: #ffd23f; --on-tm-2: #0d1b2a;
  --ink: #0d1b2a;
  --turf: #1f7a3a; --turf-2: #23863f;
  --gold-btn: #ffd34d;
  --grayed: #6b7280;

  /* the old palette, remapped onto the room's navy windows (room.css) */
  --bg: #0f1e38; --bg-2: #0f1e38; --bg-3: #172a4b;
  --line: #0d1b2a; --line-soft: #2a3f66;
  --txt: #ffffff; --txt-2: #c5d2e3; --txt-3: #9fb4d3;
  --accent: var(--tm); --accent-2: var(--tm);
  --good: #16a34a; --bad: #e11d48;

  --sans: 'Rubik', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --disp: 'Jersey 15', 'Rubik', system-ui, sans-serif;
  --mono: 'Rubik', ui-monospace, monospace;
}

body { background: var(--night); color: var(--txt); font-weight: 700; }
a { color: inherit; }

/* --- frame ----------------------------------------------------------------- */
#app { display: flex; flex-direction: column; height: 100vh; }
main {
  flex: 1; overflow-y: auto; overflow-x: hidden; padding: 0 18px 60px;
  background: none; scrollbar-color: var(--rule) var(--night);
}
/* The board: an older screen is one big window. A screen built from many
   windows (wrapped in .rm-page) lets the board step aside, so its windows
   float on the room. */
#board {
  max-width: 1320px; margin: 0 auto; min-height: 300px;
  background: var(--win); color: #fff; border: 2px solid #fff; border-radius: 0;
  box-shadow: var(--frame), var(--drop); padding: 18px 20px;
}
#board:has(> .rm-page) { background: none; border: 0; box-shadow: none; padding: 0; min-height: 0; }
/* an older screen's first heading becomes the window's title bar */
#board > .head:first-child { margin: -18px -20px 16px; }
#board > .head:first-child > h1:first-child {
  padding: 8px 20px 6px; background: var(--tm); color: var(--on-tm); border-bottom: 3px solid var(--ink);
  box-shadow: inset 0 3px 0 0 var(--tm-hi), inset 0 -3px 0 0 var(--tm-dk);
  font: 400 32px/1 var(--disp); letter-spacing: .6px; text-transform: uppercase; text-shadow: 2px 2px 0 var(--tm-sh);
}
#board > .head:first-child > :not(h1) { padding-left: 20px; padding-right: 20px; }
.disp { font-family: var(--disp); font-weight: 400; letter-spacing: 0.5px; line-height: 1; }
.disp.big { font-size: 44px; margin-bottom: 6px; }
.lede { font-size: 13px; font-weight: 700; color: var(--txt-2); }
.small { margin-top: 8px; font-size: 11.5px; font-weight: 800; color: var(--txt-3); }

/* --- header ---------------------------------------------------------------- */
/* One window in the club's colour: the crest, the club, the record, where in
   the year you are, the buttons; and under them the week as picture cards
   (#calbar, src/calendar_view.js, lives inside it). */
#hdr {
  position: relative; flex: none; display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap;
  width: min(1320px, calc(100% - 36px)); margin: 12px auto 0; padding: 10px 14px 12px;
  background: var(--tm); color: var(--on-tm);
  border: 2px solid #fff; box-shadow: var(--frame), var(--drop);
}
/* the club row: crest, club, record, phase, buttons — one line on a laptop
   (it shrinks the club block rather than wrap); the week is the next row */
.hd-row { flex: 1 1 100%; min-width: 0; display: flex; align-items: center; gap: 8px 14px; flex-wrap: nowrap; }
.hd-logo {
  width: 70px; height: 70px; flex: none; display: grid; place-items: center; margin: 3px;
  background: #fff; box-shadow: var(--frame);
}
.hd-img { width: 64px; height: 64px; object-fit: contain; }
.hd-id { min-width: 0; flex: 0 1 auto; }
.hd-name {
  font-family: var(--disp); font-size: 35px; line-height: 0.9; letter-spacing: 0.6px; text-transform: uppercase;
  white-space: nowrap; text-shadow: 3px 3px 0 var(--tm-sh); overflow: hidden; text-overflow: ellipsis;
  padding: 0 3px 3px 0; margin-bottom: -3px;   /* room for the shadow inside the clip */
}
.hd-sub { margin-top: 4px; font: 900 12px/1.1 var(--sans); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hd-cap { display: inline-block; margin-left: 6px; padding: 2px 6px 1px; background: var(--red); color: #fff; text-decoration: none; box-shadow: var(--frame-2); }
.hd-rec { font-family: var(--disp); font-size: 54px; line-height: .9; margin-left: 2px; flex: none; color: var(--tm-acc); text-shadow: 3px 3px 0 var(--tm-sh); }
.hd-go { position: relative; margin-left: auto; display: flex; gap: 6px; align-items: center; flex-wrap: nowrap; flex: none; }
.hd-go .cbtn { padding-left: 14px; padding-right: 14px; white-space: nowrap; }
/* the gold button: what it does, and the day's name small under it */
.cbtn.hd-next { flex-direction: column; justify-content: center; gap: 3px; min-height: 48px; padding-top: 6px; padding-bottom: 5px; }
.cbtn.hd-next small { font: 900 10.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; }

/* Sim ahead: the choices, under the button that asked — a small window */
.hd-ahead {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 40;
  display: grid; gap: 4px; padding: 6px; min-width: 250px;
  background: var(--win); border: 2px solid #fff; box-shadow: var(--frame), var(--drop);
}
.hd-ahead button {
  position: relative; text-align: left; padding: 9px 12px 8px 30px; cursor: pointer; border: 0;
  background: var(--card); color: var(--card-ink); box-shadow: var(--frame); margin: 3px;
  font: 400 20px/1 var(--disp); letter-spacing: .5px; text-transform: uppercase; --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink);
}
.hd-ahead button::before {
  content: ''; position: absolute; left: 8px; top: 50%; width: 14px; height: 22px; margin-top: -11px;
  background: var(--cur) center / 100% 100% no-repeat; image-rendering: pixelated; visibility: hidden;
}
.hd-ahead button:hover, .hd-ahead button:focus-visible { background: var(--card-hov); color: var(--card-ink); }
.hd-ahead button:hover::before, .hd-ahead button:focus-visible::before { visibility: visible; }
/* skill points waiting on your own tree */
.tab-sp { display: inline-grid; place-items: center; min-width: 22px; height: 20px; margin-left: 2px; padding: 0 5px;
  background: var(--gold); color: var(--ink); box-shadow: 0 0 0 2px #000; font: 900 11px/1 var(--sans); text-shadow: none; }
/* the same number on the sub-menu chip of the page it belongs to (Game.alerts):
   gold is waiting on you, red holds the clock */
.sub-n { display: inline-grid; place-items: center; min-width: 18px; height: 17px; margin: -2px 0 -2px 2px; padding: 0 4px;
  background: var(--gold); color: var(--ink); box-shadow: 0 0 0 2px #000; font: 900 10.5px/1 var(--sans); letter-spacing: 0; }
.tab-sp.red, .sub-n.red { background: var(--red); color: #fff; }
/* Menu is a button like the two beside it, in white */
.cbtn.hd-new { background: #fff; color: var(--ink); }
.cbtn.hd-new:hover { background: var(--gold); }

/* chunky buttons — the room's button (room.css .rm-btn) on the old class:
   an ink frame with cut corners, a thick ink foot and a lip inside */
.cbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; cursor: pointer; text-decoration: none;
  padding: 8px 16px 7px; border: 3px solid var(--ink); border-bottom-width: 6px; border-radius: 0; clip-path: var(--notch);
  background: #fff; color: var(--ink); box-shadow: inset 0 -4px 0 0 var(--steel);
  font-family: var(--disp); font-weight: 400; font-size: 22px; line-height: 1; letter-spacing: 0.6px; text-transform: uppercase;
}
.cbtn:hover { background: var(--gold); color: var(--ink); box-shadow: inset 0 -4px 0 0 var(--gold-dk); }
.cbtn:active { transform: translateY(2px); border-bottom-width: 4px; }
.cbtn:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--gold), inset 0 -4px 0 0 var(--steel); }
.cbtn:disabled { cursor: progress; }
.cbtn.gold { background: var(--gold); color: var(--ink); box-shadow: inset 0 -4px 0 0 var(--gold-dk); }
.cbtn.gold:hover { background: var(--gold-hi); }
.cbtn.ink { background: var(--ink-2); color: #fff; box-shadow: inset 0 -4px 0 0 #0a1424; }
.cbtn.ink:hover { background: var(--gold); color: var(--ink); box-shadow: inset 0 -4px 0 0 var(--gold-dk); }
.cbtn.tm { background: var(--tm); color: var(--on-tm); box-shadow: inset 0 -4px 0 0 var(--tm-dk); text-shadow: 2px 2px 0 var(--tm-sh); }
.cbtn.tm:hover { background: var(--gold); color: var(--ink); text-shadow: none; box-shadow: inset 0 -4px 0 0 var(--gold-dk); }
.cbtn.gray, .cbtn.gray:hover { background: var(--grayed); color: #fff; box-shadow: inset 0 -4px 0 0 #4b5563; }
.cbtn.sm { font-size: 18px; padding: 6px 12px 5px; }

/* --- the menu ----------------------------------------------------------------- */
/* An ink window; the page you are on sits in the club's colour with gold
   words and the gold cursor in front of it. */
#tabs[hidden] { display: none !important; }
#tabs {
  display: flex; flex: none; align-items: stretch; gap: 2px; overflow-x: auto; scrollbar-width: none;
  width: min(1320px, calc(100% - 36px)); margin: 14px auto 0; padding: 4px 6px;
  background: var(--ink); border: 2px solid #fff; box-shadow: var(--frame), var(--drop);
}
#tabs::-webkit-scrollbar { display: none; }
.tab {
  position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 5px 28px;
  color: #fff; text-decoration: none; white-space: nowrap; border-radius: 0;
  font-family: var(--disp); font-size: 25px; line-height: 1; letter-spacing: 0.6px; text-transform: uppercase;
}
.tab::before {
  content: ''; position: absolute; left: 8px; top: 50%; width: 14px; height: 22px; margin-top: -11px;
  background: var(--cur) center / 100% 100% no-repeat; image-rendering: pixelated; visibility: hidden;
}
.tab:hover { background: #1b2c47; color: var(--gold); }
.tab:hover::before { visibility: visible; }
.tab.on { background: var(--tm); color: var(--gold); text-shadow: 2px 2px 0 var(--ink); box-shadow: inset 0 0 0 2px #000; }
.tab.on::before { visibility: visible; animation: rm-bob .7s steps(2, jump-none) infinite; }
.tab.db { margin-left: auto; }
.tab-miss {
  min-width: 22px; height: 20px; padding: 0 5px; display: grid; place-items: center;
  background: var(--grayed); color: #fff; box-shadow: 0 0 0 2px #000; font: 900 11px/1 var(--sans); text-shadow: none;
}

/* the sub-menu: white chips hanging under the menu, on the room itself */
#subs {
  display: flex; flex: none; gap: 6px; overflow-x: auto; scrollbar-width: none;
  width: min(1320px, calc(100% - 36px)); margin: 0 auto; padding: 10px 0 2px;
  background: none; border: 0;
}
#subs::-webkit-scrollbar { display: none; }
#subs[hidden] { display: none; }
.sub {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; text-decoration: none; flex: none;
  margin: 3px; padding: 6px 12px 5px; border: 0; border-radius: 0; box-shadow: var(--frame);
  font: 900 12.5px/1 var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--ink); background: #fff;
}
.sub:hover { background: var(--gold); color: var(--ink); }
.sub.on { background: var(--gold); color: var(--ink); }
.sub.lock { background: var(--grayed); color: #fff; }
.sub.lock.on { box-shadow: var(--frame), inset 0 0 0 2px var(--gold); }

/* the exclamation mark every unbuilt thing carries */
.bang {
  display: inline-grid; place-items: center; flex: none;
  width: 22px; height: 22px; border-radius: 0; box-shadow: 0 0 0 2px #000;
  background: var(--grayed); color: #fff; font: 900 14px/1 var(--sans);
}
.bang.sm { width: 16px; height: 16px; font-size: 11px; }
.bang.inv { background: #fff; color: var(--grayed); }

/* --- not built yet ----------------------------------------------------------- */
.soon {
  background: #4b5563; color: #fff; box-shadow: var(--frame); margin: 3px;
  padding: 36px 24px 30px; text-align: center;
}
.soon-bang {
  width: 96px; height: 96px; margin: 0 auto 14px;
  display: grid; place-items: center; background: #fff; color: var(--grayed);
  box-shadow: var(--frame); font: 900 64px/1 var(--sans);
}
.soon h1 { font-size: 48px; text-transform: uppercase; }
.soon-tag { margin-top: 6px; font: 900 12px var(--sans); letter-spacing: 1px; text-transform: uppercase; }
.soon-cols {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px;
  max-width: 820px; margin: 22px auto 0; text-align: left;
}
.soon-cols > div { background: var(--card); box-shadow: var(--frame); margin: 3px; padding: 12px 14px; color: var(--card-ink); --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink); }
.soon-cols h4 { font-family: var(--disp); font-size: 22px; font-weight: 400; margin-bottom: 6px; }
.soon-cols li { margin: 4px 0 4px 18px; font-size: 13.5px; font-weight: 700; }

.lock-strip {
  display: flex; align-items: center; gap: 10px; margin: 3px 3px 14px;
  background: var(--grayed); color: #fff; box-shadow: var(--frame);
  padding: 9px 12px; font-size: 13px; font-weight: 800;
}

/* --- cards: the older boxes are windows now ------------------------------------ */
.dash { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.dash.three { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.card {
  position: relative; min-width: 0; margin: 3px;
  background: var(--win); color: #fff; border: 2px solid #fff; border-radius: 0;
  box-shadow: var(--frame), var(--drop); padding: 12px 14px;
  text-align: left; font: inherit;
}
/* a card's first heading is its title bar, in the club's colour */
.card > h3.disp:first-child, .card > h2.disp:first-child {
  display: flex; align-items: center; gap: 10px; min-height: 40px; margin: -12px -14px 12px; padding: 7px 12px 5px;
  background: var(--tm); color: var(--on-tm); border-bottom: 3px solid var(--ink);
  box-shadow: inset 0 3px 0 0 var(--tm-hi), inset 0 -3px 0 0 var(--tm-dk);
  font-size: 27px; letter-spacing: .6px; text-transform: uppercase; text-shadow: 2px 2px 0 var(--tm-sh);
}
.card.span { grid-column: 1 / -1; }
.card.click { cursor: pointer; }
.card.click:hover { background: var(--card-hov); color: var(--card-ink); }
.card.click:hover .small, .card.click:hover .lg-opp { color: #fff; }
.card.gray { background: #4b5563; color: #fff; }
.card.gray .lede, .card.gray .kick { color: #fff; }
.card h3.disp { font-size: 25px; margin-bottom: 8px; text-transform: uppercase; }
.card h2.disp { font-size: 36px; display: flex; align-items: center; gap: 10px; text-transform: uppercase; }
.kick { font: 900 11px var(--sans); letter-spacing: 1px; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
.next { display: grid; gap: 10px; }
.match { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 5px; margin: 3px;
  box-shadow: var(--frame);
  font-family: var(--disp); font-size: 34px; line-height: 1;
}
.chip .logo { width: 30px; height: 30px; }
.vs { font-family: var(--disp); font-size: 26px; color: var(--gold); }
.opp-rec { font-weight: 800; font-size: 13px; color: var(--txt-2); }
.next-go { display: flex; gap: 10px; flex-wrap: wrap; }

.last { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.score { font-size: 44px; }
.lg-opp { display: flex; align-items: center; gap: 5px; font-weight: 800; color: var(--txt-2); }
.res {
  display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 0;
  font-family: var(--disp); font-size: 22px; color: #fff; border: 0; box-shadow: 0 0 0 2px #000;
}
td .res { width: 24px; height: 24px; font-size: 18px; }
.res.W { background: var(--good); } .res.L { background: var(--bad); } .res.T { background: #4b5563; }

.drow { display: flex; align-items: center; gap: 8px; padding: 5px 7px; font-weight: 800; }
.drow b { flex: 1; }
.drow span { font: 800 14px var(--sans); }
.drow.me { background: var(--tm); color: var(--on-tm); box-shadow: 0 0 0 2px #000; }

.todo {
  display: flex; align-items: center; gap: 7px; margin: 3px 3px 6px; padding: 6px 9px;
  font-size: 12.5px; font-weight: 800; color: #fff; text-decoration: none; box-shadow: var(--frame-2);
}
.todo.red { background: var(--bad); }
.todo.gray { background: var(--grayed); }

.ldr { display: flex; align-items: baseline; gap: 8px; padding: 5px 0; border-bottom: 2px solid var(--rule); }
.ldr:last-child { border-bottom: 0; }
.ldr .k { width: 96px; flex: none; font: 900 10.5px var(--sans); letter-spacing: 0.6px; text-transform: uppercase; color: var(--gold); }
.ldr b { margin-left: auto; font-family: var(--disp); font-size: 22px; font-weight: 400; }

.news { padding: 5px 0; border-bottom: 2px solid var(--rule); font-size: 12.5px; font-weight: 700; }
.news:last-child { border-bottom: 0; }

.cal { display: flex; flex-wrap: wrap; gap: 6px; }
.cal-p {
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; margin: 2px;
  box-shadow: var(--frame-2); font: 800 12px var(--sans); background: var(--card); color: var(--card-ink); --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink);
}
.cal-p.done { background: var(--ink); color: #fff; }
.cal-p.lock { background: var(--grayed); color: #fff; }
.cal-p.now { background: var(--tm); color: var(--on-tm); outline: 3px solid var(--gold); }

.dslot { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 2px solid var(--rule); }
.dslot:last-child { border-bottom: 0; }
.slot {
  width: 42px; flex: none; text-align: center; padding: 3px 0;
  background: var(--ink); color: #fff; font: 800 11px var(--sans); box-shadow: 0 0 0 2px #000;
}
.dslot a { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dpos { font: 800 11px var(--sans); color: var(--txt-3); }

/* --- roster pills ------------------------------------------------------------ */
.pills { display: flex; gap: 5px; flex-wrap: wrap; }
.pillb {
  padding: 6px 11px 5px; margin: 3px; border: 0; border-radius: 0; cursor: pointer; box-shadow: var(--frame);
  background: var(--card); color: var(--card-ink); font: 900 12px var(--sans); letter-spacing: .04em; text-transform: uppercase; --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink);
}
.pillb:hover { background: var(--card-hov); color: var(--card-ink); }
.pillb.on { background: var(--gold); color: var(--ink); }
tr.grp td {
  background: var(--ink); color: var(--gold); font-family: var(--disp); font-size: 20px; letter-spacing: 0.5px;
  text-transform: uppercase; padding: 6px 11px;
}

/* --- team picker ------------------------------------------------------------- */
.pickg { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 16px; }
.pickb {
  display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 12px 8px 10px; margin: 3px;
  border: 0; border-radius: 0; box-shadow: var(--frame), 0 6px 0 0 var(--ink); cursor: pointer; font-family: var(--sans);
}
.pickb:active { transform: translateY(3px); }
.pickl { width: 58px; height: 58px; display: grid; place-items: center; background: #fff; box-shadow: var(--frame); margin-bottom: 4px; }
.pickl img { width: 42px; height: 42px; object-fit: contain; }
.pickb b { font-family: var(--disp); font-weight: 400; font-size: 22px; line-height: 1; }
.pickb span { font-weight: 800; font-size: 12px; }

/* --- re-skinning the older screens ---------------------------------------------- */
/* Pixel corners everywhere: nothing in the room is rounded (a round thing is
   drawn as pixels — a face, a mood, a crest — never a CSS curve). */
#app *, #overlay *, .uiask *, .rc-wrap *, #gsearch *, .hq-pop *, .ud-m, .ud-m * { border-radius: 0 !important; }
.panel { background: var(--card); border: 0; border-radius: 0; box-shadow: var(--frame); margin: 3px; color: var(--card-ink); --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink); }
.panel h4, .panel h5 { color: var(--card-ink); font-weight: 900; }
.head h1, .sheet-head h2 { font-family: var(--disp); font-weight: 400; font-size: 34px; letter-spacing: 0.5px; text-transform: uppercase; }
/* tables: gold heads on ink, column lines, every other row a shade deeper */
.tw { border: 0; border-radius: 0; margin: 3px; 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); }
.div-card, .wk, .sheet { border: 2px solid #fff; border-radius: 0; box-shadow: var(--frame), var(--drop); background: var(--win); }
thead th {
  background: var(--ink); color: var(--gold); border-bottom: 0; border-right: 2px solid var(--rule);
  font: 900 10.5px/1 var(--sans); letter-spacing: .08em;
}
thead th:last-child { border-right: 0; }
tbody td { border-bottom: 2px solid var(--rule); font-weight: 700; color: inherit; }
tbody td:not(:last-child) { border-right: 2px solid var(--rule); }
tbody tr:nth-child(even) td { background: var(--card); color: var(--card-ink); --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink); }
.div-card h3, .wk h3 { background: var(--ink); color: var(--gold); border-bottom: 0; }
.tile { border: 0; border-radius: 0; margin: 3px; 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); }
.tile .k { color: var(--card-ink); font-weight: 900; }
.tile .v { font-family: var(--disp); font-weight: 400; font-size: 36px; }
.tile .s { color: var(--soft); font-weight: 800; }
.tile.bad { background: var(--bad); color: #fff; }
.tile.bad .k, .tile.bad .s { color: #fff; }
tbody tr.mine td, .team-row.mine { background: var(--tm); color: var(--on-tm); }
tbody tr.mine td .sub, tbody tr.mine a.plink, .team-row.mine .nm, .team-row.mine .rc { color: var(--on-tm) !important; }
tbody tr.clickable:hover td { background: var(--card-hov); color: var(--card-ink); }
tbody tr.clickable:hover td b, tbody tr.clickable:hover td a { color: var(--card-ink); }
.seg { border: 0; border-radius: 0; box-shadow: var(--frame); background: var(--ink); margin-left: 3px; }
.seg button { border-radius: 0; font-weight: 900; color: #fff; background: none; }
.seg button:hover { background: var(--card-hov); color: var(--card-ink); }
.seg button.on { background: var(--gold); color: var(--ink); }
.btn { border: 0; border-radius: 0; box-shadow: var(--frame-2); margin: 2px; font-weight: 900; background: var(--card); color: var(--card-ink); cursor: pointer; --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink); }
.btn:hover { background: var(--gold); color: var(--ink); }
.btn.primary { background: var(--tm); color: var(--on-tm); }
.pill { border: 0; border-radius: 0; box-shadow: var(--frame-2); margin: 2px; font-weight: 900; background: var(--ink); color: #fff; }
.pill.acc { background: var(--tm); color: var(--on-tm); }
.pill.warn { background: var(--bad); color: #fff; }
.pill.ok { background: var(--good); color: #fff; }
.nav-item.on, .more:hover, .back:hover, .po-n.div { color: var(--on-tm); }
.sb-g { border: 0; box-shadow: var(--frame); margin: 3px; }
.sb-g.mine { box-shadow: var(--frame), inset 0 0 0 3px var(--tm); }
.sb-r.w b { color: #22c55e; }
.note { background: var(--card); border: 0; border-radius: 0; box-shadow: var(--frame); margin: 3px 3px 14px; color: var(--card-ink); --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink); }
.ovr { border: 0; border-radius: 0; box-shadow: 0 0 0 2px var(--ink); }
.spin { border-color: var(--rule); border-top-color: var(--gold); }
#overlay { background: rgba(7, 13, 28, 0.84); }
.sheet-head { background: var(--tm); color: var(--on-tm); border-bottom: 3px solid var(--ink);
  box-shadow: inset 0 3px 0 0 var(--tm-hi), inset 0 -3px 0 0 var(--tm-dk); }
.sheet-head h2 { text-shadow: 2px 2px 0 var(--tm-sh); }
.sheet-head .meta { color: var(--on-tm); }
.x { border: 0; border-radius: 0; box-shadow: var(--frame-2); color: var(--ink); background: #fff; }
.x:hover { background: var(--red); color: #fff; }
.sect h4 { color: var(--gold); font-weight: 900; }
.kv > div, .attr { border: 0; border-radius: 0; box-shadow: var(--frame-2); margin: 2px; background: var(--card); color: var(--card-ink); --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink); }
.attr .ab { background: var(--ink); }
.po-champ { border: 0; box-shadow: var(--frame); }
.po-seeds, .po-bye { border: 0; box-shadow: var(--frame); }
.po-tbd { border: 2px dashed var(--soft); color: var(--txt-2); }
.ss-log { display: none; }
.back { background: #fff; color: var(--ink); border: 0; border-radius: 0; box-shadow: var(--frame); margin: 3px 3px 14px; }
.back:hover { background: var(--gold); color: var(--ink); }
.empty { color: var(--txt-2); font-weight: 800; }
/* fields: a night-navy box with a white ring, gold when you are in it */
input[type=search], input[type=text], input[type=number], textarea, select {
  background: var(--night); color: #fff; border: 0; border-radius: 0;
  box-shadow: var(--frame), inset 0 0 0 2px #fff; font-weight: 800;
}
input[type=search]:focus, input[type=text]:focus, input[type=number]:focus, textarea:focus, select:focus { box-shadow: var(--frame), inset 0 0 0 2px var(--gold); }
/* the player page hero: solid team colour, never a fade to white */
.pf-hero { background: var(--team); border: 0; border-radius: 0; box-shadow: var(--frame); }
.pf-hero, .pf-hero h1, .pf-sub, .pf-vital { color: #fff; }

@media (max-width: 720px) {
  #board { padding: 14px 12px; }
  #board > .head:first-child { margin: -14px -12px 14px; }
  #board > .head:first-child > h1:first-child { padding: 7px 12px 5px; font-size: 26px; }
  #board > .head:first-child > :not(h1) { padding-left: 12px; padding-right: 12px; }
  main { padding: 0 10px 50px; }
  .tab.db { margin-left: 0; }
}
.sub.lock .bang, .cal-p.lock .bang { background: #fff; color: var(--grayed); }
.trait { border-width: 3px; }
.trait.mixed .t-l { color: var(--gold); }
.trait.mixed { border-color: var(--gold); }

/* --- pixel faces --------------------------------------------------------------- */
.pxface { image-rendering: pixelated; image-rendering: crisp-edges; display: block; }
.pxface.big { width: 160px; height: 160px; }
.lab { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.lab-f { text-align: center; font: 800 11px var(--sans); }
.lab-bg { background: var(--win-2); display: grid; place-items: end center; height: 172px; box-shadow: var(--frame); margin: 3px 3px 4px; overflow: hidden; }

/* pixel logos: keep the pixels hard when scaled up */
img[src*="data/logos/"] { image-rendering: pixelated; image-rendering: crisp-edges; }
/* W / L / T badges: the pixel face sits off-centre in a box, so these use the
   plain font, which centres exactly */
.res { font: 900 15px/1 var(--sans) !important; padding-top: 1px; }
td .res { font-size: 12px !important; }
/* pixel logos are drawn on a 128 grid: show them at 32 / 64 (a clean 1/4 or 1/2) */
img.logo[src*="data/logos/"] { width: 32px; height: 32px; }
.hd-img[src*="data/logos/"], .pickl img[src*="data/logos/"], .po-champ img[src*="data/logos/"] { width: 64px; height: 64px; }
.chip img[src*="data/logos/"], .box-sc img[src*="data/logos/"] { width: 32px; height: 32px; }
.pickl { width: 72px; height: 72px; }
/* coach faces in the database list: 64px faces shown at 1x, never blurred */
.pxface.cface { width: 64px; height: 64px; box-shadow: var(--frame-2); margin: 2px; background: var(--tm); }
/* face lab photo check: photo and pixel face side by side */
.pcheck { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 10px; }
.pc { display: grid; grid-template-columns: 1fr 128px; gap: 6px; align-items: end; box-shadow: var(--frame); margin: 3px; padding: 6px; background: var(--win-2); }
.pc-photo { width: 100%; height: 128px; object-fit: cover; object-position: center 20%; }
.pxface.pc-face { width: 128px; height: 128px; }
.pc span { grid-column: 1 / -1; font: 800 11px var(--sans); text-align: center; }

/* schedule: every game's bar is the opponent's colour, logo on a white tile */
.sched tr.opp td { background: var(--oc); color: var(--on-oc); border-bottom: 3px solid var(--ink); }
.sched tr.opp td b { color: var(--on-oc); }
.sched tr.opp:hover td { filter: brightness(1.08); }
.sched .opp-logo { display: inline-grid; place-items: center; width: 38px; height: 38px; vertical-align: middle;
  background: #fff; box-shadow: var(--frame-2); margin: 2px 8px 2px 2px; }
.sched tr.opp .res { box-shadow: 0 0 0 2px var(--ink); }
.sched tr.opp .lede { color: var(--on-oc); }

/* roster: every column header sorts */
.rsort th[data-sort] { cursor: pointer; user-select: none; white-space: nowrap; }
.rsort th[data-sort]:hover { color: var(--gold-hi); }
.rsort th.on { color: var(--gold); }
/* schedule headers in our own team colour, not navy */
.sched thead th, .sched tr.grp td { background: var(--tm); color: var(--on-tm); }
.sched tr.grp td { border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); }
/* roster column headers in our team colour too */
.rsort thead th { background: var(--tm); color: var(--on-tm); }
.rsort th[data-sort]:hover, .rsort th.on { color: var(--on-tm); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 4px; }
/* schedule: solid column lines between week, home/away, opponent and result */
.sched th:not(:last-child), .sched tr.opp td:not(:last-child) { border-right: 3px solid var(--ink); }

/* player page: our 128px pixel face, never the ESPN photo; shown at 1x so it stays sharp */
.pf-pix { flex: none; width: 134px; height: 134px; box-sizing: border-box; background: #fff;
  box-shadow: var(--frame); margin: 3px; overflow: hidden; display: grid; place-items: end center; }
.pf-pix .pxface { width: 128px; height: 128px; display: block; }
@media (max-width: 520px) { .pf-pix { width: 70px; height: 70px; } .pf-pix .pxface { width: 64px; height: 64px; } }

/* rookie badge: a small solid "R" after a first-year player's name (src/ux_enhance.js) */
/* gold on ink: it has to read on a navy row, a team-coloured card and a dark bar */
.rk { display: inline-block; margin-left: 5px; padding: 0 4px; border-radius: 0; vertical-align: 1px;
  background: var(--gold); color: var(--ink); border: 0; box-shadow: 0 0 0 2px var(--ink); font: 900 10px/13px var(--sans); letter-spacing: 0; }
.lu-nm .rk { margin-left: 2px; padding: 0 2px; font-size: 10px; line-height: 11px; box-shadow: 0 0 0 1px var(--ink); }

/* any list table: click a column header to sort it */
.xsort th.xs-h { cursor: pointer; user-select: none; white-space: nowrap; }
.xsort th.xs-h:hover, .xsort th.xs-h.on { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 4px; }
.xsort th.xs-h[data-dir="-1"]::after { content: ' \25BC'; }
.xsort th.xs-h[data-dir="1"]::after { content: ' \25B2'; }
/* database lists and sheets: pixel faces at 1x, never ESPN photos */
.who img.pxface { width: 32px; height: 32px; border-radius: 0; background: var(--tm); box-shadow: var(--frame-2); margin: 2px; object-fit: fill; }
.face-px { flex: none; display: grid; place-items: end center; width: 70px; height: 70px; background: var(--tm); box-shadow: var(--frame); margin: 3px; overflow: hidden; }
.face-px .pxface { width: 64px; height: 64px; }
/* your team in the division standings: team colour AND the ink ring it has everywhere else */
.team-row.mine { box-shadow: inset 0 0 0 3px var(--ink); }

/* --- Injuries: your club only, one card per player ------------------------ */
.inj-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.inj-h { margin: 18px 0 0; font-size: 28px; }
.inj-card { display: grid; grid-template-columns: 56px minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: 12px; align-items: center;
  background: var(--card); color: var(--card-ink); box-shadow: var(--frame); margin: 3px; padding: 8px 12px; text-decoration: none; --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink); }
.inj-card:hover { background: var(--card-hov); color: var(--card-ink); }
.inj-face { width: 52px; height: 52px; display: grid; place-items: end center; background: var(--tm); box-shadow: var(--frame-2); margin: 2px; overflow: hidden; }
.inj-face .pxface { width: 48px; height: 48px; }
.inj-id, .inj-what, .inj-back { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.inj-id b { font: 900 16px/1.2 var(--sans); }
.inj-id span { font: 800 12px var(--sans); color: var(--soft); }
.inj-what b, .inj-back b { font: 800 14px/1.2 var(--sans); }
.inj-sev { align-self: start; font: 900 10px/1 var(--sans); text-transform: uppercase; letter-spacing: .6px; color: #fff;
  box-shadow: var(--frame-2); margin: 2px; padding: 3px 6px; background: #d97706; }
.inj-sev.s-minor { background: #1f9d45; } .inj-sev.s-moderate { background: #d97706; }
.inj-sev.s-major { background: #e0262b; } .inj-sev.s-season { background: var(--ink); }
.inj-bar { height: 12px; background: #e0262b; box-shadow: 0 0 0 2px #000; overflow: hidden; }
.inj-bar i { display: block; height: 100%; background: #22c55e; }
@media (max-width: 640px) {
  .inj-card { grid-template-columns: 56px 1fr; }
  .inj-what, .inj-back { grid-column: 2; }
}

/* --- player page: practice log ------------------------------------------- */
.pl-sum { display: grid; grid-template-columns: auto 1fr; gap: 10px; margin-bottom: 10px; }
.pl-grade { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 96px;
  box-shadow: var(--frame); margin: 3px; padding: 6px 10px; color: #fff; }
.pl-grade b { font: 400 44px/1 var(--disp); }
.pl-grade span { font: 800 11px var(--sans); text-align: center; }
.a5 { background: var(--a-5); color: #fff; } .a4 { background: var(--a-4); color: #fff; } .a3 { background: var(--a-3); color: var(--ink); }
.a2 { background: var(--a-2); color: #fff; } .a1 { background: var(--a-1); color: #fff; }
.pl-verdict { box-shadow: var(--frame); margin: 3px; padding: 8px 12px; display: flex; flex-direction: column; gap: 3px; }
.pl-verdict b { font: 400 24px/1 var(--disp); letter-spacing: .5px; }
.pl-verdict span { font: 700 13px/1.35 var(--sans); }
.v-good { background: var(--a-4); color: #fff; } .v-bad { background: var(--bad); color: #fff; }
.v-warn { background: var(--gold); color: var(--ink); } .v-mid { background: var(--card); color: var(--card-ink); --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink); }
.pl-eff { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 3px 3px 10px; padding: 7px 10px; 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); }
.pl-eff .k { font: 900 10.5px var(--sans); letter-spacing: 1px; text-transform: uppercase; color: var(--gold); }
.pl-eff .pl-n { font: 400 24px/1 var(--disp); }
.pl-eff .pl-w { font: 800 12.5px var(--sans); color: var(--txt-2); }
.pl-why { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 10px; }
.pl-why > div { box-shadow: var(--frame-2); margin: 2px; padding: 6px 8px; display: flex; flex-direction: column; gap: 2px; background: var(--card); color: var(--card-ink); --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink); }
.pl-why .k { font: 900 10px var(--sans); text-transform: uppercase; letter-spacing: .5px; color: var(--gold); }
.pl-n { font: 900 18px/1 var(--sans); }
.pl-n.up { color: #22c55e; } .pl-n.dn { color: #ff5a78; }
.pl-tw { max-height: 320px; overflow-y: auto; }
.pl-tw .pl-n { font-size: 14px; }
.pl-chip { display: inline-block; font: 900 12px/1 var(--sans); box-shadow: 0 0 0 2px var(--ink); padding: 3px 6px; }
.pl-hurt { font: 900 10px/1 var(--sans); text-transform: uppercase; background: var(--bad); color: #fff; box-shadow: 0 0 0 2px var(--ink); padding: 2px 5px; }
@media (max-width: 520px) { .pl-sum { grid-template-columns: 1fr; } .pl-why { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pl-tw thead th { background: var(--tm); color: var(--on-tm); }

/* --- News as stories: a picture per item --------------------------------- */
.news-card { display: flex; flex-direction: column; gap: 10px; }
.news-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.news-head h3 { margin: 0; font-size: 30px; }
.nitem { display: grid; grid-template-columns: 92px 1fr auto; gap: 10px; align-items: center;
  padding: 9px 10px; border-bottom: 2px solid var(--rule); background: var(--card); font: 700 14px/1.35 var(--sans); color: var(--card-ink); --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink); }
.nitem:last-child { border-bottom: 0; }
.nitem.mine { background: var(--tm); color: var(--on-tm); }
.ntag { justify-self: start; font: 900 10px/1 var(--sans); text-transform: uppercase; letter-spacing: .6px;
  padding: 4px 6px; box-shadow: 0 0 0 2px var(--ink); background: var(--ink); color: #fff; white-space: nowrap; }
.ntag.t-trade { background: #7b2ff7; } .ntag.t-sign { background: #1f9d45; } .ntag.t-cut { background: #e0262b; }
.ntag.t-injury { background: #b3121a; } .ntag.t-coach { background: #d97706; } .ntag.t-growth { background: #1e63d6; }
.ntag.t-practice { background: #3a3f49; } .ntag.t-playoff { background: var(--gold); color: var(--ink); } .ntag.t-game { background: var(--ink); }
.nwhen { font: 900 11px var(--sans); white-space: nowrap; color: var(--soft); }
@media (max-width: 480px) { .nitem { grid-template-columns: 1fr auto; } .ntag { grid-column: 1 / -1; } }
.news-list { display: flex; flex-direction: row; gap: 12px; overflow-x: auto; overflow-y: hidden; max-height: none;
  scroll-snap-type: x mandatory; padding: 4px 4px 10px; border: 0; }
.nstory, .nstory.lead { flex: 0 0 290px; scroll-snap-align: start; display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px;
  min-height: 0; height: 150px; align-items: start; text-decoration: none;
  background: var(--card); color: var(--card-ink); box-shadow: var(--frame); margin: 3px; padding: 10px; --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink); }
.nstory:hover { background: var(--card-hov); color: var(--card-ink); }
.nstory.lead { flex-basis: 380px; grid-template-columns: 128px minmax(0, 1fr); }
.nstory.mine { background: var(--tm); color: var(--on-tm); }
.npic, .npic.big { width: 72px; height: 72px; box-shadow: var(--frame-2); overflow: hidden; display: grid; place-items: end center; }
.npic.big { width: 128px; height: 128px; }
.npic .pxface { width: 64px; height: 64px; display: block; }
.npic.big .pxface { width: 128px; height: 128px; }
.npic-logo { width: 64px; height: 64px; align-self: center; image-rendering: pixelated; }
.npic-k { align-self: center; font: 400 22px/1 var(--disp); color: #fff; text-align: center; padding: 4px; }
.nbody { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.nmeta { display: flex; align-items: center; gap: 8px; }
.ntext { font: 800 13px/1.35 var(--sans); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.nstory.lead .ntext { font: 400 22px/1.1 var(--disp); letter-spacing: .5px; -webkit-line-clamp: 4; }
.slide-b { font: 900 13px/1 var(--sans); background: var(--ink); color: #fff; border: 0; box-shadow: var(--frame-2); margin: 2px; padding: 6px 10px; cursor: pointer; }
.slide-b:hover { background: var(--gold); color: var(--ink); }
@media (max-width: 520px) { .nstory, .nstory.lead { flex-basis: 84%; } }

/* --- Training: player grids for the last practice and each logged practice --- */
.tl-pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; margin-top: 10px; }
.tl-pc { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 4px 10px; align-items: center;
  background: var(--card); color: var(--card-ink); box-shadow: var(--frame); margin: 3px; padding: 7px 9px; text-decoration: none; --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink); }
.tl-pc:hover { background: var(--card-hov); color: var(--card-ink); }
.tl-pc-face { grid-row: 1 / span 2; width: 52px; height: 52px; display: grid; place-items: end center; box-shadow: var(--frame-2); margin: 2px; overflow: hidden; background: var(--tm); }
.tl-pc-face .pxface { width: 48px; height: 48px; }
.tl-pc-id { display: flex; flex-direction: column; min-width: 0; }
.tl-pc-id b { font: 900 14px/1.2 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-pc-id small { font: 800 11px var(--sans); color: var(--soft); }
.tl-pc .tl-grade { justify-self: end; }
.tl-pc-why { grid-column: 2 / -1; display: flex; gap: 8px; flex-wrap: wrap; font: 800 11px var(--sans); }
.tl-pc-why i { font-style: normal; }
.tl-pc-why .up { color: #22c55e; } .tl-pc-why .dn { color: #ff5a78; }
.tl-pc-why .hurt { background: var(--bad); color: #fff; padding: 0 5px; }
.tl-plog { display: flex; flex-direction: column; gap: 8px; }
.tl-pl { box-shadow: var(--frame); margin: 3px; background: var(--card); padding: 0 10px; color: var(--card-ink); --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink); }
.tl-pl > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 0; font: 800 14px var(--sans); }
.tl-pl > summary::-webkit-details-marker { display: none; }
.tl-pl > summary .wk { font: 400 22px/1 var(--disp); min-width: 70px; }
.tl-pl > summary .pn { flex: 1; }
.tl-pl > summary .open { font: 900 11px var(--sans); text-transform: uppercase; background: #fff; color: var(--ink); box-shadow: 0 0 0 2px var(--ink); padding: 4px 8px; }
.tl-pl[open] > summary .open { background: var(--gold); color: var(--ink); }
.tl-pl[open] { padding-bottom: 10px; }
.gr-h4 small { font: 800 12px var(--sans); color: var(--soft); margin-left: 6px; }
.tl-pc .tl-grade, .tl-pl > summary .tl-grade { width: auto; min-width: 30px; padding: 3px 7px; white-space: nowrap; }

/* August form, from the preseason book */
.cd-pre { white-space: nowrap; }
.cd-snaps { display: block; font: 800 10.5px var(--sans); color: var(--txt-3); }

/* Storylines: your club's lines sit above the league's and carry your colour */
.lg-row.us { background: var(--tm); color: var(--on-tm); }
.lg-row.us .lg-when, .lg-row.us .lg-tag { color: var(--on-tm); }
a.lg-row { text-decoration: none; color: inherit; }

/* Database → What's missing: the game's own progress sheet */
.ms-h { font-size: 26px; margin: 18px 0 8px; }
.ms-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.ms-card { display: block; padding: 12px 14px; text-decoration: none; color: var(--card-ink); background: var(--card); box-shadow: var(--frame); margin: 3px; --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink); }
a.ms-card:hover { background: var(--card-hov); color: var(--card-ink); }
.ms-top { display: flex; align-items: center; gap: 8px; }
.ms-top b { font: 800 15px var(--sans); }
.ms-chip { margin-left: auto; flex: none; padding: 3px 8px; color: #fff; font: 900 10.5px var(--sans); text-transform: uppercase; letter-spacing: 0.5px; box-shadow: 0 0 0 2px var(--ink); }
.ms-chip.soon { background: #e11d48; }
.ms-chip.rough { background: #a87400; }
.ms-where { display: block; margin-top: 3px; font: 900 11px var(--sans); color: var(--card-ink); text-transform: uppercase; letter-spacing: 0.5px; }
.ms-card ul { margin: 8px 0 0; padding-left: 18px; }
.ms-card li, .ms-card p { font: 700 12.5px var(--sans); color: var(--txt-2); margin: 0 0 3px; }
.ms-needs { margin-top: 8px; padding-top: 8px; border-top: 2px solid var(--rule); font: 700 11.5px var(--sans); color: var(--txt-3); }
.ms-needs b { color: inherit; }
.soon a.cbtn { display: inline-flex; margin-top: 14px; text-decoration: none; }

/* --- where in the year you are, on the top bar ---------------------------- */
/* The phase in big letters — "PRESEASON · WEEK 2", "TRAINING CAMP", "WEEK 7"
   — the one place it is said, and the date small under it (.cb-what,
   calendar.css). Painted by the calendar view. One line, always. */
.hd-phase { flex: 0 1 auto; display: grid; gap: 4px; justify-items: start; align-content: center; max-width: 300px; min-width: 0; }
.hd-ph {
  font-family: var(--disp); font-weight: 400; font-size: 28px; line-height: 0.95; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--on-tm); text-shadow: 2px 2px 0 var(--tm-sh);
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* the offseason stays gold, as a box so it reads on any club's colour */
.hd-ph.off { padding: 3px 8px 1px; margin: 2px; background: var(--gold); color: var(--ink); text-shadow: none; box-shadow: var(--frame-2); }
/* The busy state while the clock runs: solid grey, never a faded gold. */
#hdr .hd-go .cbtn:disabled { background: var(--grayed); color: #fff; box-shadow: inset 0 -4px 0 0 #4b5563; cursor: progress; }

/* --- the header on a laptop: one row of club and buttons, the week under it -- */
/* Down to 1024 the club, the record, the phase and the four buttons stay on
   one row: the sizes step down, the club keeps only its nickname, the cap
   warning drops under the division line, and the club block is the one
   thing allowed to give (it ends in "…" before anything wraps). */
@media (max-width: 1360px) and (min-width: 721px) {
  #hdr, .hd-row { gap: 8px 11px; }
  .hd-name { font-size: 30px; }
  .hd-rec { font-size: 46px; }
  .hd-ph { font-size: 25px; }
  .hd-go .cbtn { font-size: 20px; padding-left: 11px; padding-right: 11px; }
}
/* the tight row: at 1024-1240 always, and at any laptop width when the row
   does not fit as it is (game.js fitHeader adds #hdr.hd-tight — a long club
   name, a long button, a long phase) */
@media (max-width: 1240px) and (min-width: 1024px) {
  #hdr { padding-left: 12px; padding-right: 12px; }
  #hdr, .hd-row { gap: 8px 9px; }
  .hd-loc { display: none; }
  .hd-name { font-size: 28px; }
  #hdr .hd-cap { display: table; margin: 4px 0 0; }
  .hd-rec { font-size: 42px; }
  .hd-ph { font-size: 23px; }
  .hd-phase { max-width: 190px; }
  .cb-what { font-size: 11px; }
  .hd-go { gap: 5px; }
  .hd-go .cbtn { font-size: 18px; padding-left: 9px; padding-right: 9px; }
  .cbtn.hd-next { min-height: 46px; }
  .cbtn.hd-next small { font-size: 9.5px; letter-spacing: .06em; }
  .hd-go .cbtn.hd-next { white-space: normal; max-width: 176px; text-align: center; }
}
@media (min-width: 1024px) {
  #hdr.hd-tight, #hdr.hd-tight .hd-row { gap: 8px 9px; }
  #hdr.hd-tight .hd-loc { display: none; }
  #hdr.hd-tight .hd-name { font-size: 28px; }
  #hdr.hd-tight .hd-cap { display: table; margin: 4px 0 0; }
  #hdr.hd-tight .hd-rec { font-size: 42px; }
  #hdr.hd-tight .hd-ph { font-size: 23px; }
  #hdr.hd-tight .hd-go { gap: 5px; }
  #hdr.hd-tight .hd-go .cbtn { font-size: 18px; padding-left: 9px; padding-right: 9px; }
  #hdr.hd-tight .cbtn.hd-next small { font-size: 9.5px; letter-spacing: .06em; }
  #hdr.hd-tight .hd-go .cbtn.hd-next { white-space: normal; max-width: 176px; text-align: center; }
}
/* Under 1024: two clean rows — the club, the record and where in the year
   you are; then the buttons across the whole width, the gold one widest —
   and the week under them */
@media (max-width: 1023px) and (min-width: 721px) {
  .hd-row { flex-wrap: wrap; }
  .hd-phase { flex: 1 1 0; max-width: none; }
  .hd-go { order: 10; flex: 1 1 100%; margin-left: 0; }
  .hd-go .cbtn.hd-next { flex: 1 1 auto; }
}
/* the menu and its chips: on a laptop every tab and every chip is in view —
   the tabs step down in size, the chips wrap to a second row rather than
   hide off the edge (phones scroll them sideways) */
@media (max-width: 1240px) and (min-width: 721px) {
  .tab { padding: 7px 10px 5px 24px; font-size: 22px; }
  .tab::before { left: 6px; }
}
@media (max-width: 1023px) and (min-width: 721px) {
  #tabs { gap: 0; padding: 4px 4px; }
  .tab { padding: 6px 7px 4px 21px; font-size: 19px; gap: 5px; }
  .tab::before { left: 4px; width: 12px; height: 19px; margin-top: -10px; }
}
@media (min-width: 721px) {
  #subs { flex-wrap: wrap; overflow: visible; gap: 2px 6px; }
}

/* --- the phone header ------------------------------------------------------ */
/* Four short rows: the club and its record; where in the year you are, with
   Menu and the ?; the gold button and Sim ahead; the week as picture cards.
   The button group opens up (display: contents) so its buttons can sit on
   different rows. Once you scroll into a page everything but the gold row
   folds away (.hd-min, set by game.js) — back at the top, it returns. */
@media (max-width: 720px) {
  #hdr { width: calc(100% - 20px); margin-top: 8px; padding: 8px 9px 9px; gap: 6px 8px; }
  #hdr::before, #hdr::after { content: ''; flex: 0 0 100%; height: 0; }
  #hdr::before { order: 4; }
  #hdr::after { order: 9; }
  #hdr.hd-front::before, #hdr.hd-front::after { display: none; }
  .hd-row, .hd-go { display: contents; }
  .hd-logo { order: 1; width: 46px; height: 46px; }
  .hd-img[src*="data/logos/"], .hd-img { width: 32px; height: 32px; }
  .hd-id { order: 2; flex: 1 1 0; min-width: 0; }
  .hd-name { font-size: 25px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 2px 2px 0 var(--tm-sh); }
  .hd-sub { margin-top: 2px; font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #hdr .hd-cap { display: table; margin: 3px 0 0; }
  .hd-rec { order: 3; font-size: 40px; margin-left: 0; }
  .hd-phase { order: 5; flex: 1 1 auto; max-width: none; gap: 2px; }
  .hd-ph { font-size: 22px; }
  .hd-ph.off { padding: 2px 6px 0; }
  .cb-what { font-size: 10.5px; letter-spacing: .6px; }
  .hd-go .hd-new { order: 6; }
  .hd-go .hq-btn { order: 7; }
  .hd-go .cbtn { font-size: 18px; padding: 7px 10px 6px; }
  .hd-go [data-go="week"] { order: 10; flex: 1 1 auto; justify-content: center; min-height: 44px; }
  .hd-go [data-ahead] { order: 11; flex: none; min-height: 44px; }
  /* the Sim ahead list drops from the header's own corner */
  #hdr .hd-ahead { top: calc(100% + 8px); right: 8px; left: 8px; min-width: 0; }

  /* scrolled into a page: the gold row and the tabs, nothing else */
  #hdr.hd-min .hd-logo, #hdr.hd-min .hd-id, #hdr.hd-min .hd-rec,
  #hdr.hd-min .hd-new, #hdr.hd-min .hq-btn, #hdr.hd-min .hd-phase,
  #hdr.hd-min .cb-wrap, #hdr.hd-min::before, #hdr.hd-min::after { display: none; }

  /* in a live game the locked buttons give their row back */
  body.in-game #hdr .hd-go button { display: none; }

  #tabs { width: calc(100% - 20px); margin-top: 12px; padding: 3px 4px; }
  .tab { padding: 6px 10px 4px 24px; font-size: 21px; }
  .tab::before { left: 5px; }
  #subs { width: calc(100% - 20px); padding: 8px 0 0; gap: 4px; }
  .sub { padding: 5px 10px 4px; }
}

/* --- the once-a-year jobs, while their week is open ----------------------- */
.jobs-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 11px; }
.jobs-h h3 { margin: 0; }
.jobs-sub { font: 900 10.5px var(--sans); letter-spacing: 1px; text-transform: uppercase; color: var(--gold); }
.jobs-l { display: grid; grid-template-columns: repeat(auto-fit, minmax(226px, 1fr)); gap: 10px; }
.jobs-j { display: block; padding: 10px 12px; margin: 3px; background: var(--card); text-decoration: none; box-shadow: var(--frame); color: var(--card-ink); --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink); }
.jobs-j:hover { background: var(--card-hov); color: var(--card-ink); }
.jobs-j b { display: block; font-family: var(--disp); font-weight: 400; font-size: 21px; line-height: 1; text-transform: uppercase; color: inherit; }
.jobs-j span { display: block; margin-top: 5px; font: 700 12px/1.4 var(--sans); color: var(--txt-2); }

/* ============================================================================
   HOME — the locker room. Next game (with the key matchup) and your messages
   on the left, today and the storylines on the right, the league under them.
   Every block is a window from the kit (room.css .rm-win / .rm-tb / .rm-wb).
============================================================================ */
.home-grid { align-items: start; }
.home .rm-tb .rm-end.wrap { flex-wrap: wrap; justify-content: flex-end; }

/* --- next game ------------------------------------------------------------- */
.hn-ng { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 14px; align-items: center; }
.hn-tp {
  display: flex; align-items: center; gap: 12px; min-width: 0; margin: 3px; padding: 10px 12px;
  background: var(--c); color: var(--on, #fff); box-shadow: var(--frame);
}
.hn-tp.r { flex-direction: row-reverse; text-align: right; }
.hn-tp .rm-crest { width: 70px; height: 70px; }
.hn-tp .rm-crest img { width: 64px; height: 64px; }
.hn-tp .t { min-width: 0; }
.hn-tp .t1 { font: 400 30px/.9 var(--disp); letter-spacing: .4px; text-transform: uppercase; text-shadow: 2px 2px 0 var(--sh, var(--ink)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hn-tp .t2 { margin-top: 2px; font: 400 26px/1 var(--disp); color: var(--acc, var(--gold)); text-shadow: 2px 2px 0 var(--sh, var(--ink)); }
.hn-tp .t3 { margin-top: 4px; font: 900 10.5px/1.1 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.hn-vs { font: 400 40px/1 var(--disp); color: var(--gold); text-shadow: 3px 3px 0 var(--ink); text-transform: uppercase; }
/* the key matchup: the two men it turns on, face to face */
.hn-km {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: center;
  margin: 14px 3px 3px; padding: 10px 12px; background: var(--card); box-shadow: var(--frame); color: var(--card-ink); --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink);
}
.hn-km .hk { display: flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; color: inherit; }
.hn-km .hk.r { flex-direction: row-reverse; text-align: right; }
.hn-km .hk:hover .nm { color: inherit; text-decoration: underline; }
.hn-km .nm { font: 400 22px/1 var(--disp); letter-spacing: .4px; text-transform: uppercase; }
.hn-km .ps { margin-top: 2px; font: 900 10.5px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--card-ink); }
.hn-km .mid { text-align: center; font: 900 10.5px/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.hn-km .mid b { display: block; font: 400 22px/1 var(--disp); letter-spacing: .4px; color: var(--card-ink); }
.hn-go { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; }
.hn-last { display: flex; align-items: center; gap: 8px; margin-left: auto; font: 900 12px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; }
.hn-last .res { width: 24px; height: 24px; }
/* no game this week: the stage of the year, big */
.hn-big { font: 400 44px/1 var(--disp); text-transform: uppercase; }

/* --- today ------------------------------------------------------------------- */
.home-today .rm-list { margin-bottom: 12px; }
.home-today .rm-opt .rm-bd { margin-left: auto; }
.home-today .today-go { margin: 0; }
/* what the club is doing on a day with nothing of yours on it (game.js
   teamDay): the same rows as the jobs, the ones with no page are plain */
.home-today .today-j.info { cursor: default; }
.home-today .today-j.info::before { visibility: hidden !important; }
.home-today .today-j.info:hover { background: var(--card); color: var(--card-ink); }

/* the header's two sims beside Next day (owner, 2026-09-26) */
.hd-go .cbtn.hd-sim { font-size: 19px; }
@media (max-width: 1360px) and (min-width: 721px) { .hd-go .cbtn.hd-sim { font-size: 17px; padding-left: 9px; padding-right: 9px; } }
@media (max-width: 720px) {
  .hd-go .cbtn.hd-sim { order: 11; flex: 1 1 0; min-height: 44px; font-size: 16px; padding-left: 6px; padding-right: 6px; }
  .hd-go .cbtn.hd-play { order: 10; }
}
/* a landscape phone: the same size as the buttons beside them (phone.css) */
@media (orientation: landscape) and (max-height: 520px) {
  #hdr .hd-go .cbtn.hd-sim { font-size: 13px; padding: 6px 9px 5px; }
}

/* --- the storylines, in preview ------------------------------------------------ */
.home-sl .rm-tb h2 { flex: none; }
.hg-list { display: grid; gap: 6px; }
.hg {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "f t" "f p";
  gap: 5px 10px; align-items: center; margin: 3px; padding: 8px 10px; text-decoration: none;
  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);
}
.hg:hover { background: var(--card-hov); color: var(--card-ink); }
.hg > .rm-fc, .hg > .hg-logo { grid-area: f; align-self: start; }
.hg-logo { width: 44px; height: 44px; display: grid; place-items: center; background: #fff; box-shadow: var(--frame-2); margin: 2px; }
.hg-logo .logo { width: 32px; height: 32px; }
.hg-t { grid-area: t; display: grid; min-width: 0; gap: 3px; }
.hg-top { display: flex; align-items: center; gap: 6px; min-width: 0; }
.hg-top .rm-bd { margin-left: auto; }
.hg-t b { font: 400 21px/1 var(--disp); letter-spacing: .4px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.hg-t small { font: 800 13px/1.3 var(--sans); }
.hg-prog { grid-area: p; display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.hg-prog .rm-bar { max-width: 220px; }
.hg-prog b { font: 400 19px/1 var(--disp); color: var(--card-ink); white-space: nowrap; }
.hg-prog .gl-st { border: 0; border-radius: 0; box-shadow: 0 0 0 2px var(--ink); margin: 2px; font: 900 10.5px/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: #fff; }
/* the latest lines, as a strip you slide through */
.sl-head { display: flex; align-items: center; gap: 10px; }
.sl-arrows { margin-left: auto; display: flex; gap: 6px; }
.sl-a {
  width: 30px; height: 30px; cursor: pointer; font: 400 24px/1 var(--disp); padding: 0; margin: 3px;
  background: #fff; color: var(--ink); border: 0; box-shadow: var(--frame);
}
.sl-a:hover { background: var(--gold); }
.sl-a:active { transform: translateY(2px); }
.sl-strip { display: flex; gap: 10px; padding: 3px 3px 6px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.sl-strip::-webkit-scrollbar { display: none; }
.sl-card {
  flex: 0 0 290px; scroll-snap-align: start; display: flex; overflow: hidden; margin: 3px;
  text-decoration: none; color: var(--card-ink); background: var(--card); box-shadow: var(--frame); --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink);
}
a.sl-card:hover { background: var(--card-hov); color: var(--card-ink); }
.sl-card.us { background: var(--card); box-shadow: var(--frame), inset 0 0 0 3px var(--tm); }
.sl-pic { flex: 0 0 84px; display: grid; place-items: end center; border-right: 3px solid var(--ink); overflow: hidden; }
.pxface.sl-face { width: 84px; height: 84px; }
.sl-logo { width: 64px; height: 64px; object-fit: contain; align-self: center; }
.sl-body { padding: 8px 10px; display: grid; align-content: start; gap: 6px; min-width: 0; }
.sl-meta { display: flex; align-items: center; gap: 6px; }
.sl-tag { padding: 3px 7px 2px; background: var(--gold); color: var(--ink); box-shadow: 0 0 0 2px var(--ink); font: 900 10px/1 var(--sans); text-transform: uppercase; letter-spacing: .08em; }
.sl-when { font: 900 10.5px var(--sans); color: var(--soft); text-transform: uppercase; letter-spacing: .06em; }
.sl-body p { margin: 0; font: 800 13px/1.35 var(--sans); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.sl-none { margin: 3px; font: 800 13px/1.45 var(--sans); color: var(--txt-2); }
.rc-how { padding: 3px 7px 2px; box-shadow: 0 0 0 2px var(--ink); background: #fff; color: var(--ink); font: 900 10px var(--sans); text-transform: uppercase; letter-spacing: .5px; white-space: nowrap; }
.rc-how.good { background: var(--good); color: #fff; }
.rc-how.bad { background: var(--bad); color: #fff; }
@media (max-width: 620px) { .sl-card { flex-basis: 84%; } }

/* --- the league under it: the division, leaders, talks ----------------------------- */
.home-cards { align-items: start; }
.hd-tbl .tm-cell { display: flex; align-items: center; gap: 8px; }
.hd-tbl .tm-cell img { width: 26px; height: 26px; background: #fff; box-shadow: 0 0 0 2px #000; padding: 1px; }
.ll-list { display: grid; gap: 4px; }
.ll {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; margin: 3px;
  padding: 5px 10px 5px 5px; text-decoration: none; color: var(--card-ink); background: var(--card); box-shadow: var(--frame); --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink);
}
a.ll:hover { background: var(--card-hov); color: var(--card-ink); }
.ll.mine { background: var(--tm); color: var(--on-tm); }
.ll .rm-fc { margin: 2px; }
.ll-t { display: grid; min-width: 0; line-height: 1.1; gap: 3px; }
.ll-t .k { font: 900 10px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--card-ink); }
.ll.mine .ll-t .k { color: var(--tm-acc); }
.ll-t b { font: 400 20px/1 var(--disp); letter-spacing: .4px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ll-t small { font: 900 10px/1 var(--sans); letter-spacing: .06em; color: var(--soft); }
.ll i { font: 400 30px/1 var(--disp); font-style: normal; }
.ll.mine i { text-shadow: 2px 2px 0 var(--tm-sh); }
.ll-more { margin-top: 8px; }
/* nobody yet: solid, never faded (no opacity, no pale fill) */
.ll-face-empty { width: 36px; height: 36px; margin: 2px; box-shadow: var(--frame-2); background: var(--grayed); }
.ll-note { margin: 4px 0 0; font: 800 11.5px var(--sans); color: var(--txt-3); }
.ll.rc .rc-how { justify-self: end; }
.ll-card h3 small { font: 900 11px var(--sans); color: var(--soft); margin-left: 6px; }

/* the game you just played, when there is no next one on the board */
.next.final .match { align-items: center; }
.next.final .fin { font: 400 26px/1 var(--disp); margin-left: 8px; }
.next.final .res { flex: none; }
.count-pill { font: 900 14px/1 var(--sans); background: var(--bad); color: #fff; box-shadow: 0 0 0 2px var(--ink); padding: 4px 8px 3px; }
.count-pill.calm { background: var(--gold); color: var(--ink); }
.sl-title { color: inherit; text-decoration: none; }
.sl-title:hover h2 { color: var(--gold); }
.todo-card h3 { font-size: 30px; display: flex; align-items: center; gap: 8px; }
.todo-card .todo { font-size: 14px; padding: 10px 12px; }

/* --- the Home messages past the first five ---------------------------------
   One bar at the end of the messages: three faces, "+N more", and where they
   wait (the Storylines page). Solid ink, a gold word. */
.adv-more {
  display: flex; align-items: center; gap: 12px; margin: 10px 3px 3px; padding: 8px 12px; text-decoration: none;
  background: var(--card); color: var(--card-ink); box-shadow: var(--frame);
}
.adv-more:hover { background: var(--card-hov); color: var(--card-ink); }
.adv-more-f { display: inline-flex; }
.adv-more-f .adv-face { width: 36px; height: 36px; display: block; background: var(--tm); box-shadow: var(--frame-2); margin: 2px; }
.adv-more-f .adv-face + .adv-face { margin-left: -6px; }
.adv-more b { margin-left: 4px; font: 400 22px/1 var(--disp); letter-spacing: .5px; text-transform: uppercase; white-space: nowrap; }
.adv-more b i { font-style: normal; color: var(--card-ink); }
.adv-more-to { margin-left: auto; padding: 5px 9px 4px; background: var(--gold); color: var(--ink); box-shadow: var(--frame);
  font: 400 16px/1 var(--disp); letter-spacing: .5px; text-transform: uppercase; }
.adv-more:hover .adv-more-to { background: #fff; }

@media (max-width: 760px) {
  .hn-ng { gap: 4px; }
  .hn-vs { text-align: center; font-size: 28px; }
  .hn-tp, .hn-tp.r { flex-direction: column; text-align: center; gap: 6px; padding: 10px 4px; }
  .hn-tp .rm-crest { width: 58px; height: 58px; }
  .hn-tp .rm-crest img { width: 32px; height: 32px; }
  .hn-tp .t1 { font-size: 24px; white-space: normal; }
  .hn-tp .t3 { font-size: 9.5px; }
  .hn-km { gap: 4px; padding: 10px 6px; }
  .hn-km .hk, .hn-km .hk.r { flex-direction: column; text-align: center; gap: 4px; }
  .hn-km .nm { font-size: 18px; }
  .hn-km .mid { font-size: 9.5px; }
  .hn-km .mid b { font-size: 18px; }
  .hn-last { margin-left: 0; width: 100%; }
  .hn-big { font-size: 34px; }
  .hg { grid-template-areas: "f t" "p p"; }
  .adv-more b { font-size: 18px; }
}

/* Not game day: Today is the main window (the room's picture is its band),
   and the next game is a small grey window at the top right */
.home-today.main .rm-list { margin-top: 4px; }
.home-today.main .rm-opt { font-size: 15px; }
.home-next.sm .hn-ng { gap: 6px; }
.home-next.sm .hn-tp { flex-direction: column; text-align: center; gap: 4px; padding: 8px 4px; }
.home-next.sm .hn-tp .rm-crest { width: 44px; height: 44px; }
.home-next.sm .hn-tp .rm-crest img { width: 36px; height: 36px; }
.home-next.sm .hn-tp .t1 { font-size: 18px; white-space: normal; }
.home-next.sm .hn-tp .t2 { font-size: 16px; }
.home-next.sm .hn-tp .t3 { display: none; }
.home-next.sm .hn-vs { font-size: 22px; text-align: center; }
.home-next.sm .hn-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; margin-top: 8px; }
.home-next.sm .hn-go { margin-top: 10px; }
.home-next.sm .hn-last { margin-left: 0; width: 100%; }
.home-next.dim .hn-ng, .home-next.dim .rm-tb { filter: grayscale(.85); }

/* Home in rows (owner, 2026-09-26): each pair of windows is one height, and
   the cards under them are one height too */
#subs { padding-bottom: 14px; }
.home-grid.hg-rows { align-items: stretch; }
.hg-cell { display: grid; min-width: 0; }
.hg-cell > .rm-win { height: 100%; display: flex; flex-direction: column; }
.hg-cell > .rm-win > .rm-wb { flex: 1; }
.home-today .rm-wb { display: flex; flex-direction: column; }
.home-today .rm-wb > [data-go] { margin-top: auto; }
.home-cards { align-items: stretch; }
.home-cards > .rm-win { display: flex; flex-direction: column; }
.home-cards > .rm-win > .rm-wb { flex: 1; }

/* every goal on Home, scrolling inside the window when there are many */
.home-sl .hg-list { max-height: 420px; overflow-y: auto; }

/* every page: a clear gap between the menu (or its sub-menu) and the first
   window — the windows never touch the bar (owner, 2026-09-26) */
#subs { padding-bottom: 0; }
#app main { padding-top: 18px !important; }
@media (max-width: 720px) { #app main { padding-top: 12px !important; } }

/* --- Home → Settings (src/settings_view.js): one row per setting, a switch -- */
.set-page { max-width: 820px; }
.set-row { display: flex; align-items: center; gap: 16px; margin: 3px 3px 10px; padding: 10px 12px; background: var(--card); color: var(--card-ink); box-shadow: var(--frame); }
.set-t { flex: 1; min-width: 0; display: grid; gap: 4px; }
.set-t b { font: 400 22px/1 var(--disp); letter-spacing: .4px; text-transform: uppercase; }
.set-t span { font: 800 13px/1.35 var(--sans); }
.set-sw { flex: none; display: inline-flex; align-items: center; gap: 8px; margin: 3px; padding: 5px 10px 5px 5px; cursor: pointer; border: 0;
  background: var(--ink-2); color: #fff; box-shadow: var(--frame); font: 400 18px/1 var(--disp); text-transform: uppercase; }
.set-sw i { width: 38px; height: 20px; background: #6b7280; box-shadow: inset 0 0 0 2px var(--ink); position: relative; }
.set-sw i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; background: #fff; transition: left .12s; }
.set-sw.on { background: var(--green); }
.set-sw.on i { background: var(--gold); }
.set-sw.on i::after { left: 21px; }
.set-sw em { font-style: normal; min-width: 30px; }
.set-seg { flex: none; display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.set-opt { margin: 3px; padding: 6px 10px 5px; cursor: pointer; border: 0; background: #fff; color: var(--ink); box-shadow: var(--frame);
  font: 400 17px/1 var(--disp); text-transform: uppercase; }
.set-opt.on { background: var(--gold); }

/* Recent talks, stacked: face | about · whole name · how it went */
.home-talks .ll.rc { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
.home-talks .ll.rc .ll-t { gap: 4px; justify-items: start; }
.home-talks .ll.rc .ll-t .k { font-size: 9.5px; line-height: 1.15; }
.home-talks .ll.rc .ll-t b { font-size: 17px; line-height: 1.05; white-space: normal; overflow: visible; overflow-wrap: break-word; }
.home-talks .ll.rc .rc-how { font-size: 9.5px; padding: 3px 6px 2px; }
.home-talks .ll.rc .rc-how { justify-self: start; }

/* the record beside the club's name: the phone's slim header only (phone.css) */
.hd-rec2 { display: none; }

/* a shared league with friends (src/league.js) */
.lg-code .lg-link { width: 100%; margin-top: 6px; font-size: 12px; text-transform: none; }
.lg-fr .set-t span { font-weight: 700; }
.lg-wait .lg-p, .lg-join .lg-p { margin: 0 0 8px; font: 700 14px/1.4 var(--sans); }
.lg-list { display: grid; gap: 6px; margin-bottom: 12px; }
.lg-row { display: grid; grid-template-columns: 56px 1fr auto; gap: 8px; align-items: center; padding: 8px 10px; background: var(--card); color: var(--card-ink); box-shadow: var(--frame); }
.lg-row em { font: 800 11px var(--sans); text-transform: uppercase; opacity: .7; font-style: normal; }
.lg-btns { display: flex; gap: 8px; justify-content: flex-end; }
.hd-go .lg-ready { display: grid; line-height: 1.1; }
.hd-go .lg-ready small { font-size: 10px; font-weight: 700; opacity: .8; }

/* a head-to-head league game (src/league.js): the board, and your turn */
.lg-h2h-ov { position: fixed; inset: 0; z-index: 70; display: grid; grid-template-rows: auto 1fr; background: #0b1a2c; color: #fff; }
.lg-h2h-ov[hidden] { display: none; }
.lg-h2h-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 8px 12px; background: #06101c; font: 800 14px var(--sans); }
.lg-h2h-top b { font-size: 16px; }
.lg-h2h-top span { opacity: .85; }
.lg-h2h-top [data-ffme] { margin-left: auto; }
.lg-h2h-body { display: grid; align-content: center; justify-items: center; gap: 12px; padding: 12px 16px; overflow-y: auto; text-align: center; }
.lg-h2h-msg { font: 800 20px/1.3 var(--sans); }
.lg-h2h-lines p { margin: 3px 0; font: 700 13px/1.4 var(--sans); opacity: .85; }
.lg-h2h-call { width: min(760px, 100%); }
.lg-h2h-call h2 { margin: 0 0 10px; font: 800 18px var(--sans); }
.lg-h2h-calls { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 10px; }
.lg-h2h .lg-btns { grid-column: 1 / -1; flex-wrap: wrap; }
.lg-row.lg-h2h { grid-template-columns: 1fr auto; }
.hd-menu-l { display: grid; gap: 10px; }
.hd-menu-l .rm-btn { width: 100%; }