/* ---------------------------------------------------------------------------
   Compact pass (owner's audit, 2026-10-01). Loaded last, so it wins.
   Rules: compact, consistent spacing, the club's dark, no white boxes,
   no huge text, numbers you can read.
--------------------------------------------------------------------------- */

/* --- 1. numbers: the pixel face draws 6 like 8 -----------------------------
   Every digit in a table (and in the OVR badges) comes from Rubik, with
   even widths so columns line up; the letters keep the pixel face. The
   trick: a font that only holds the digits, put in front of the display
   face wherever a table is. */
@font-face {
  font-family: 'FBNum'; font-style: normal; font-weight: 100 1000; font-display: swap;
  src: url(../assets/fonts/rubik-700.woff2) format('woff2');
  unicode-range: U+0024-0025, U+002B-002E, U+0030-0039, U+00B7, U+2013, U+2212;
  size-adjust: 74%;
}
table, .ovr, .gp-ovr, .num, .tp-ovr, .ovr-b, .pb-ovr, .rm-num, .dr-ovr,
.sb-r, .sl-r, .po-g, .rm-kv, .cd-m, .fo-tile, .fo-big, .uiask .r, .hd-rec, .hd-rec2, .rm-pip,
.fo-rs-nums, .cd-g, .last .score, .tile .v, .st-row, .po-seed, .rc-rec, .cv-fact .v, .fo-sk-r .v {
  --disp: 'FBNum', 'Jersey 15', 'Rubik', system-ui, sans-serif;
  --sans: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}
table td, table th, .ovr, .gp-ovr, .num { font-variant-numeric: tabular-nums; font-synthesis: none; }

/* --- the sub-menu: dark chips, the gold one is where you are --------------- */
.sub { background: var(--win-2); color: #fff; }
.sub:hover { background: var(--win-3); color: #fff; }
.sub.on, .sub.on:hover { background: var(--gold); color: var(--ink); }
.sub .sub-n { box-shadow: none; }

/* --- 5. a phone held sideways: header and sub-menu in ~70px, not ~120 ----- */
@media (orientation: landscape) and (max-height: 520px) {
  #hdr { margin: 4px 6px 0; padding: 2px 6px; gap: 6px; }
  .hd-logo { width: 28px; height: 28px; }
  .hd-img, .hd-img[src*="data/logos/"] { width: 24px; height: 24px; }
  .hd-name { font-size: 15px; }
  .hd-rec { font-size: 20px; }
  .hd-ph { font-size: 12px; }
  .hd-go .cbtn { padding: 4px 8px 3px; font-size: 12px; }
  .hd-go .cbtn.hd-sim { padding: 3px 6px 2px; font-size: 11px; }
  /* one row that scrolls sideways, never two */
  #subs { flex-wrap: nowrap !important; overflow-x: auto !important; overflow-y: hidden; margin: 0 6px; padding: 3px 0 1px; gap: 2px; }
  .sub { margin: 2px 3px; padding: 3px 7px 2px; font-size: 9.5px; box-shadow: var(--frame-2); }
  #app > main { padding-top: 4px !important; }
}

/* --- no white boxes ---------------------------------------------------------
   A card, a row, a tile inside a window was solid white with ink words
   (room.css --card). Now it is the club's dark one step up from the window,
   with white words; under your finger one step more. What is chosen stays
   gold with ink words (the gold cursor), set explicitly below because the
   old rules wrote var(--card-ink) on it. */
:root { --card: var(--win-2); --card-ink: #fff; --card-line: var(--rule); --card-hov: var(--win-3); }
tbody tr:nth-child(even) { --card: var(--zebra); }
tr.me { --card-ink: var(--on-tm); }
.rm-opt.sel, .rm-opt.on, .rm-tile.sel, .rm-tile.on {
  background: var(--gold); color: var(--ink); --soft: var(--ink); --txt-2: var(--ink); --txt-3: var(--ink); }
.rm-opt::before, .rm-pt.rm-tile::before { background-image: var(--cur); }
.rm-opt.sel::before, .rm-opt.on::before, .rm-tile.sel::before { background-image: var(--cur-ink); }
/* a touch screen keeps :hover on whatever was tapped last: only a real
   pointer lights a choice it is over, so a pop-up never shows two lit */
@media (hover: none) {
  .rm-opt:hover:not(.sel):not(.on) { background: var(--card); color: var(--card-ink); }
  .rm-opt:hover:not(.sel):not(.on)::before { visibility: hidden; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .cbtn.hd-next { min-height: 0 !important; padding-top: 4px; padding-bottom: 3px; }
  .cbtn.hd-next small { display: none; }
  .hd-go .cbtn { min-height: 0; }
  /* table rows a little tighter: more of the list on the screen */
  .rm-tbl td { padding-top: 4px; padding-bottom: 4px; }
  .rm-tbl th { padding-top: 5px; padding-bottom: 4px; }
  .rm-tbl td .rm-fc.s32, .rm-tbl td .rm-fc.s36 { width: 26px; height: 26px; }
}

/* --- 9. Team > Lineup: the whole formation on one screen ------------------- */
@media (orientation: landscape) and (max-height: 520px) {
  .lu-field.main { height: 330px; }
  .lu-field.main.off { height: 290px; }
  .lu-field.main .lu-tok.lu-ab { padding-bottom: 12px; }
  .lu-field.main .lu-face { width: 36px; height: 34px; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ink); }
  .lu-field.main .lu-face .pxface { left: 2px; }
  .lu-field.main .lu-face .f64 { display: none; }
  .lu-field.main .lu-face .f32 { display: block; }
  .lu-field.main .lu-slot { font-size: 10px; line-height: 13px; padding: 0 3px; margin-bottom: -3px; border-width: 1px; }
  .lu-field.main .lu-face .ovr { right: auto; left: 50%; bottom: -13px; transform: translateX(-50%); min-width: 24px; padding: 0 3px; font-size: 14px; border-width: 2px; }
  .lu-field.main .lu-nm { margin-top: 15px; max-width: 100%; padding: 0 3px; font-size: 10px; line-height: 12px; }
  .lu-field.main .lu-bk { margin-top: 3px; max-width: 100%; gap: 2px; padding: 0 3px 0 0; font-size: 10px; line-height: 12px; }
  .lu-num { font-size: 20px; }
  .lu-eztxt { font-size: 26px; }
  .lu-packs { margin: -6px 0 6px; }
  .lu-field.main .lu-face .lu-hp { top: 1px; left: 2px; right: 2px; height: 4px; padding: 0; box-shadow: none; }
}

/* --- 11. the badge catalog in the house style: square windows, the
   display face on names, Rubik 700+ for reading, no stripes, no pills --- */
.pbc-intro { font: 700 12.5px/1.45 var(--sans); color: var(--soft); }
.pbc-k { border-radius: 0; border: 0; box-shadow: var(--frame-2); margin: 0 3px; padding: 1px 6px; font: 800 11px/1.5 var(--sans); }
.pbc-nav { gap: 4px; }
.pbc-nav a { border-radius: 0; border: 0; margin: 2px; padding: 4px 9px 3px; background: var(--win-2); box-shadow: var(--frame-2); font: 900 11px/1 var(--sans); letter-spacing: .04em; }
.pbc-nav a:hover { background: var(--gold); color: var(--ink); }
.pbc-card { border-radius: 0; border: 0; margin: 3px; box-shadow: var(--frame); padding: 8px 10px; gap: 6px; }
.pbc-card .pbv-nm b { font: 400 21px/1 var(--disp); letter-spacing: .4px; text-transform: uppercase; }
.pbc-card .pbv-nm span { font: 900 10px/1.2 var(--sans); letter-spacing: .06em; color: var(--gold); }
.pbc-card .pbv-does { font: 700 12.5px/1.35 var(--sans); }
.pbc-t, .pbc-t.pbc-lg { border-radius: 0; border-left: 0; background: var(--win); grid-template-columns: 84px 1fr; }
.pbc-tn { font: 900 10.5px/1.25 var(--sans); letter-spacing: .04em; text-transform: uppercase; }
.pbc-tx { font: 700 12px/1.3 var(--sans); }
.pbc-tm { font: 800 10.5px/1.3 var(--sans); opacity: 1; color: var(--soft); }
.pbc-sg { border-radius: 0; border: 0; box-shadow: var(--frame-2); margin: 2px; }
.pbc-res, .pbc-bar, .pbc-bar button, .pbc-bar i.on { border-radius: 0; }
.pbv-card { border-radius: 0; border: 0; border-top: 4px solid var(--pbc, #5a6675); margin: 3px; box-shadow: var(--frame); }

/* --- 14. expiring deals: small cards, three across, the same on every
   page that lists them (Extensions, Re-sign) ------------------------------ */
.fo-grid.fo-rs { grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 6px; }
.fo-rs .fo-card { gap: 4px; padding: 6px 8px; }
.fo-rs .fo-card .top { gap: 7px; }
.fo-rs .fo-card .top .rm-fc { width: 36px; height: 36px; }
.fo-rs .fo-card .nm { font-size: 19px; }
.fo-rs .fo-chip { padding: 3px 5px 2px; font-size: 9.5px; margin: 1px; }
.fo-rs .fo-rs-nums { gap: 3px; }
.fo-rs .fo-rs-nums > div { margin: 2px; padding: 3px 5px; }
.fo-rs .fo-rs-nums span { font-size: 8.5px; }
.fo-rs .fo-rs-nums b { margin-top: 2px; font: 700 13px/1.1 var(--sans); font-variant-numeric: tabular-nums; }
.fo-rs .fo-card .fo-step { font-size: 9px; }
.fo-rs .fo-card .ft { padding-top: 2px; }
.fo-chip.hid, .fo-chip.white { background: var(--win-3); color: #fff; }

/* --- 2. free agency: the Negotiate / Offer buttons always on screen ------- */
.fo-ctt td.x { position: sticky; right: 0; z-index: 1; }
.fo-ctt .logos { flex-wrap: wrap; max-width: 76px; gap: 2px; }
.fo-ctt .logos img.logo { width: 20px; height: 20px; }
@media (orientation: landscape) and (max-height: 520px) {
  .fo-fa .fo-ctt th:nth-child(7), .fo-fa .fo-ctt td[data-l="Last club"] { display: none; }
  .fo-ctt td.x .rm-btn { display: block; width: 100%; margin: 2px 0; }
}

/* --- 6. a pixel padlock (was an emoji) ------------------------------------- */
.px-lock { display: inline-block; width: 10px; height: 12px; margin: 0 6px -1px 0; flex: none; vertical-align: baseline;
  background: currentColor; image-rendering: pixelated;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 10' shape-rendering='crispEdges'%3E%3Cpath d='M2 0h4v1H2zM1 1h1v3H1zM6 1h1v3H6zM0 4h8v6H0z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 10' shape-rendering='crispEdges'%3E%3Cpath d='M2 0h4v1H2zM1 1h1v3H1zM6 1h1v3H6zM0 4h8v6H0z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.cbtn.hd-next .px-lock { display: inline-block; }
.cbtn.hd-next.hd-lock { flex-direction: row; align-items: center; }

/* --- 3. every pop-up fits a phone held sideways (390px tall): the window
   is never taller than the screen, its body scrolls inside, and its
   buttons stay pinned at the foot where you can always reach them -------- */
@media (orientation: landscape) and (max-height: 520px) {
  .co-modal { place-items: center; padding: 6px 8px; overflow: hidden; }
  .co-modal > .rm-win.box, .rm-shade > .rm-win, .ua-box, .uiask > section {
    max-height: calc(100vh - 12px); max-height: calc(100dvh - 12px); margin: 0;
    display: flex; flex-direction: column; min-height: 0; }
  .co-modal > .rm-win.box > .rm-tb { flex: none; padding-top: 4px; padding-bottom: 3px; }
  .co-modal > .rm-win.box > .rm-tb h2 { font-size: 20px; }
  .co-modal > .rm-win.box > .rm-wb { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    padding: 8px 10px 0; display: flex; flex-direction: column; }
  .co-modal > .rm-win.box > .rm-wb > * { flex: none; }
  /* the button row: pinned to the window's foot */
  .co-modal .lg-btns, .co-modal .rm-wb > .rm-acts, .co-modal .rm-wb > .co-acts {
    position: sticky; bottom: 0; z-index: 2; margin: auto -10px 0; padding: 6px 10px 2px;
    background: var(--win); border-top: 2px solid var(--rule); }
  .co-modal .lg-btns .rm-btn { padding-top: 6px; padding-bottom: 5px; font-size: 15px; }
  .co-modal .lg-p { margin: 0 0 6px; font-size: 12px; }
  .co-modal .lg-list { max-height: none; gap: 4px; margin-bottom: 6px; }
  .co-modal .lg-row { padding: 5px 8px; }
  /* How do you want to play? — the four ways two by two, small */
  .gd-mode .gd-modes-l { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px; }
  .gd-mode .rm-opt { margin: 2px; padding: 6px 8px 5px 26px; font-size: 16px; flex-direction: column; align-items: flex-start; gap: 2px; }
  .gd-mode .rm-opt span { font: 800 10px/1.25 var(--sans); text-transform: none; letter-spacing: 0; }
  .gd-mode .rm-opt::before { left: 7px; }
  .gd-mode .gd-kit { margin: 0 0 4px; }
  .gd-mode .gd-mo-p { margin: 4px 0 6px; font-size: 11px; }
}

/* --- 8. Home > This week: one style for every row; a finished one is the
   same dark row with a green tick and dimmed words, not a grey block ----- */
.home-today .today-j { font-size: 13px; }
.home-today .today-j.done, .home-today .today-j.done:hover { background: var(--card); color: var(--soft); }
.home-today .today-j.done .today-ck { background: var(--green); color: #fff; }
@media (orientation: landscape) and (max-height: 520px) {
  .home-today .rm-list { gap: 4px; }
  .home-today .today-j { padding-top: 6px; padding-bottom: 6px; font-size: 12px; }
}

/* --- Home messages: dark cards like every other card ---------------------- */
.adv-m { background: var(--card); color: #fff; }
.adv-row:hover { background: var(--win-3); }
.adv-say.him .bub { color: #fff; }
.adv-from-t small { color: var(--gold); }
.adv-log { scrollbar-color: var(--rule) var(--win-2); }
@media (orientation: landscape) and (max-height: 520px) {
  .adv-row .adv-hl { font-size: 12.5px; }
  .adv-ic { width: 36px; height: 36px; } .adv-ic svg { width: 24px; height: 24px; }
  .adv-ic.big { width: 56px; height: 56px; } .adv-ic.big svg { width: 48px; height: 48px; }
  .adv-say .bub { font-size: 13px; }
}

/* --- Storylines inbox and talks: dark cards and speech, like the rest ----- */
.cv-card { background: var(--card); color: #fff; }
.cv-card:hover { background: var(--win-3); }
.cv-say .bub { background: var(--win-2); color: #fff; }
@media (orientation: landscape) and (max-height: 520px) {
  .cv-cn { font-size: 19px; }
  .cv-cards { gap: 6px; }
}

/* --- 4. the front door and the new-franchise steps: dark choices, small
   words, and the ? clear of the window ------------------------------------ */
.bt-tog, .bt-pick .v button, .bt-pick button { background: var(--win-3); color: #fff; }
.bt-tog.on { background: var(--gold); color: var(--ink); }
.bt-m:first-child::before { animation: none; visibility: hidden; }
.bt-m:hover::before, .bt-m:focus-visible::before { visibility: visible; }
@media (orientation: landscape) and (max-height: 520px) {
  .bt-m { padding-top: 8px; padding-bottom: 7px; }
  .bt-m b { font-size: 20px; }
  .bt-m span { font-size: 11px; margin-top: 2px; }
  .bt-m.sm b { font-size: 17px; }
  .bt-card > .bt-h, .bt-h { font-size: 20px; }
  .bt-make .bt-card > .bt-h:first-child { font-size: 22px; }
  .bt-make .bt-input { font-size: 16px; padding: 7px 10px; }
  .bt-make .bt-b, .bt-job .bt-b { font-size: 15px; padding: 6px 12px 5px; }
  .bt-s2 .bt-kind b { font-size: 16px; }
  .bt-s2 .bt-kind span { font-size: 10.5px; }
  .bt-pick .v b { font-size: 14px; }
  .bt-tog { font-size: 14px; }
  .bt-play { font-size: 24px; }
  /* the ? sits in the corner above the window, never on it */
  body:not(.ph-drill) > .hq-btn, .bt ~ .hq-btn, .hq-btn { top: 4px; right: calc(env(safe-area-inset-right, 0px) + 6px); width: 28px; height: 28px; font-size: 16px; }
  .bt.bt-make { padding-top: 0; }
  .bt-make > .bt-card { margin-top: 2px; }
}

/* --- 8. Home > Playoffs: a short line, your seed, the next game when known */
.hn-po { margin: 0 0 6px; font: 400 22px/1.1 var(--disp); text-transform: uppercase; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hn-po-s { margin: 0 0 6px; font: 700 12px/1.35 var(--sans); color: var(--soft); }

/* --- no huge text on a phone held sideways: the big display words that
   were 40-90px come down to a size that still leads the window ----------- */
@media (orientation: landscape) and (max-height: 520px) {
  .aw-card.big .aw-name, .cs-man .nm, .cv-nm, .fo-th .nm, .gp-sl-t, .gr-arch .n, .tv-ask, .ob-bhead h1,
  .soon h1, .disp.big, .hn-big, .po-champ b, #board:not(:has(> .rm-page)) .po-champ b, .med-vac b, .tp-kv b,
  .ps-money > .ps-count b, .pf2-k b, .pf2-mood b, .pf-ob b, .pf-rat .pf2-k b, .tr-lv b, .gs.pl-big, .cp-rec,
  .fo-big .v, .fo .cap-over, .pl-grade b, .gf-ban b, .gd-res, .vs-card h1 { font-size: 28px; }
  .hn-vs, .gd-at { font-size: 24px; }
  .rc-hof-big { min-width: 44px; height: 44px; font-size: 28px; }
  .gd-fpts, .tv-score b { font-size: 40px; }
  :is(#app, #overlay) .bx-pts, .bx-pts { font-size: 44px; }
  :is(#app, #overlay) .bx-nick, :is(#app, #overlay) .bx-st { font-size: 26px; }
  .aw-mono.s96 { width: 64px; height: 64px; font-size: 32px; }
}

/* the drill-in Back: the dark of every other control, not a white box */
@media (orientation: landscape) and (max-height: 520px) {
  body.ph-drill #phBack { background: var(--win-2); color: #fff; box-shadow: var(--frame), 0 5px 0 0 var(--ink); width: 64px; height: 48px; font-size: 16px; }
  body.ph-drill #app > main { padding-left: 80px !important; }
}