/* ---------------------------------------------------------------------------
   A phone held sideways (the iPhone app is landscape only): the menu is a
   column down the left side, the header one slim row across the top, and
   the page takes the rest (owner, 2026-09-26). Everything above 520px tall
   is untouched.

   iOS WebKit note: no :has() with :empty or other structural pseudo-classes
   here — one such rule broke the whole layout on a real iPhone. Plain
   classes and attribute selectors only.
--------------------------------------------------------------------------- */
/* the drill-in Back button (src/phone.js) exists only for the phone below */
#phBack { display: none; }

@media (orientation: landscape) and (max-height: 520px) {
  #app {
    display: grid; height: 100vh; height: 100dvh;
    grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr);
    padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px);
  }

  /* --- the menu: a slim column, a pixel icon over each short word -------------
     (the owner's model: Football Head Coach 27). The icon is a mask, so it
     takes the word's colour: white, gold on the page you are on. */
  #tabs {
    grid-column: 1; grid-row: 1 / -1; flex-direction: column; align-items: stretch; gap: 3px;
    width: 126px; box-sizing: border-box; margin: 6px 0 6px 6px; padding: 4px; overflow-y: auto; overflow-x: hidden;
  }
  .tab {
    flex: 1 1 0; min-height: 44px; max-height: 64px;
    flex-direction: column; justify-content: center; align-items: center; gap: 4px;
    padding: 5px 4px 4px; font-size: 16px; letter-spacing: .3px; white-space: nowrap; text-align: center;
  }
  .tab::before {
    position: static; flex: none; margin: 0; width: 22px; height: 22px; visibility: visible; animation: none;
    background: currentColor; image-rendering: pixelated;
    -webkit-mask: var(--ic) center / 100% 100% no-repeat; mask: var(--ic) center / 100% 100% no-repeat;
  }
  .tab.on::before, .tab:hover::before { animation: none; }
  .tab.on { text-shadow: none; }
  .tab.on::before { filter: drop-shadow(2px 2px 0 var(--ink)); }
  .tab.db { margin-left: 0; margin-top: auto; }
  /* the counts sit on the icon's corner */
  .tab .tab-sp, .tab .tab-miss { position: absolute; top: 3px; right: 5px; margin: 0; min-width: 18px; height: 16px; padding: 0 4px; font-size: 10px; }
  .tab .tab-miss { left: 5px; right: auto; }
  .tab[href="#home"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' shape-rendering='crispEdges'%3E%3Crect x='6' y='0' width='2' height='1'/%3E%3Crect x='5' y='1' width='4' height='1'/%3E%3Crect x='4' y='2' width='6' height='1'/%3E%3Crect x='11' y='2' width='2' height='1'/%3E%3Crect x='3' y='3' width='8' height='1'/%3E%3Crect x='2' y='4' width='10' height='1'/%3E%3Crect x='1' y='5' width='12' height='1'/%3E%3Crect x='0' y='6' width='14' height='1'/%3E%3Crect x='2' y='7' width='10' height='1'/%3E%3Crect x='2' y='8' width='3' height='1'/%3E%3Crect x='9' y='8' width='3' height='1'/%3E%3Crect x='2' y='9' width='3' height='1'/%3E%3Crect x='9' y='9' width='3' height='1'/%3E%3Crect x='2' y='10' width='3' height='1'/%3E%3Crect x='9' y='10' width='3' height='1'/%3E%3Crect x='2' y='11' width='3' height='1'/%3E%3Crect x='9' y='11' width='3' height='1'/%3E%3Crect x='2' y='12' width='10' height='1'/%3E%3C/svg%3E"); }
  .tab[href="#team"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' shape-rendering='crispEdges'%3E%3Crect x='3' y='0' width='3' height='1'/%3E%3Crect x='8' y='0' width='3' height='1'/%3E%3Crect x='1' y='1' width='5' height='1'/%3E%3Crect x='8' y='1' width='5' height='1'/%3E%3Crect x='0' y='2' width='6' height='1'/%3E%3Crect x='8' y='2' width='6' height='1'/%3E%3Crect x='0' y='3' width='14' height='1'/%3E%3Crect x='0' y='4' width='14' height='1'/%3E%3Crect x='0' y='5' width='3' height='1'/%3E%3Crect x='4' y='5' width='6' height='1'/%3E%3Crect x='11' y='5' width='3' height='1'/%3E%3Crect x='4' y='6' width='6' height='1'/%3E%3Crect x='4' y='7' width='1' height='1'/%3E%3Crect x='9' y='7' width='1' height='1'/%3E%3Crect x='4' y='8' width='4' height='1'/%3E%3Crect x='9' y='8' width='1' height='1'/%3E%3Crect x='4' y='9' width='3' height='1'/%3E%3Crect x='8' y='9' width='2' height='1'/%3E%3Crect x='4' y='10' width='3' height='1'/%3E%3Crect x='8' y='10' width='2' height='1'/%3E%3Crect x='4' y='11' width='6' height='1'/%3E%3Crect x='4' y='12' width='6' height='1'/%3E%3C/svg%3E"); }
  .tab[href="#coach"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' shape-rendering='crispEdges'%3E%3Crect x='3' y='3' width='10' height='1'/%3E%3Crect x='2' y='4' width='11' height='1'/%3E%3Crect x='1' y='5' width='4' height='1'/%3E%3Crect x='8' y='5' width='5' height='1'/%3E%3Crect x='0' y='6' width='4' height='1'/%3E%3Crect x='6' y='6' width='1' height='1'/%3E%3Crect x='9' y='6' width='4' height='1'/%3E%3Crect x='0' y='7' width='3' height='1'/%3E%3Crect x='5' y='7' width='3' height='1'/%3E%3Crect x='10' y='7' width='3' height='1'/%3E%3Crect x='0' y='8' width='3' height='1'/%3E%3Crect x='4' y='8' width='5' height='1'/%3E%3Crect x='10' y='8' width='1' height='1'/%3E%3Crect x='0' y='9' width='3' height='1'/%3E%3Crect x='5' y='9' width='3' height='1'/%3E%3Crect x='10' y='9' width='1' height='1'/%3E%3Crect x='0' y='10' width='4' height='1'/%3E%3Crect x='6' y='10' width='1' height='1'/%3E%3Crect x='9' y='10' width='2' height='1'/%3E%3Crect x='1' y='11' width='4' height='1'/%3E%3Crect x='8' y='11' width='2' height='1'/%3E%3Crect x='2' y='12' width='7' height='1'/%3E%3C/svg%3E"); }
  .tab[href="#dev"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' shape-rendering='crispEdges'%3E%3Crect x='10' y='0' width='3' height='1'/%3E%3Crect x='9' y='1' width='4' height='1'/%3E%3Crect x='8' y='2' width='5' height='1'/%3E%3Crect x='10' y='3' width='3' height='1'/%3E%3Crect x='9' y='4' width='2' height='1'/%3E%3Crect x='12' y='4' width='1' height='1'/%3E%3Crect x='8' y='5' width='2' height='1'/%3E%3Crect x='2' y='6' width='2' height='1'/%3E%3Crect x='7' y='6' width='2' height='1'/%3E%3Crect x='2' y='7' width='3' height='1'/%3E%3Crect x='6' y='7' width='2' height='1'/%3E%3Crect x='3' y='8' width='4' height='1'/%3E%3Crect x='4' y='9' width='2' height='1'/%3E%3Crect x='0' y='10' width='2' height='1'/%3E%3Crect x='7' y='10' width='2' height='1'/%3E%3Crect x='11' y='10' width='2' height='1'/%3E%3Crect x='0' y='11' width='2' height='1'/%3E%3Crect x='4' y='11' width='2' height='1'/%3E%3Crect x='7' y='11' width='2' height='1'/%3E%3Crect x='11' y='11' width='2' height='1'/%3E%3Crect x='0' y='12' width='2' height='1'/%3E%3Crect x='4' y='12' width='2' height='1'/%3E%3Crect x='7' y='12' width='2' height='1'/%3E%3Crect x='11' y='12' width='2' height='1'/%3E%3Crect x='0' y='13' width='14' height='1'/%3E%3C/svg%3E"); }
  .tab[href="#league"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' shape-rendering='crispEdges'%3E%3Crect x='1' y='0' width='12' height='1'/%3E%3Crect x='0' y='1' width='1' height='1'/%3E%3Crect x='2' y='1' width='10' height='1'/%3E%3Crect x='13' y='1' width='1' height='1'/%3E%3Crect x='0' y='2' width='1' height='1'/%3E%3Crect x='2' y='2' width='10' height='1'/%3E%3Crect x='13' y='2' width='1' height='1'/%3E%3Crect x='0' y='3' width='1' height='1'/%3E%3Crect x='2' y='3' width='10' height='1'/%3E%3Crect x='13' y='3' width='1' height='1'/%3E%3Crect x='1' y='4' width='1' height='1'/%3E%3Crect x='3' y='4' width='8' height='1'/%3E%3Crect x='12' y='4' width='1' height='1'/%3E%3Crect x='3' y='5' width='8' height='1'/%3E%3Crect x='4' y='6' width='6' height='1'/%3E%3Crect x='5' y='7' width='4' height='1'/%3E%3Crect x='6' y='8' width='2' height='1'/%3E%3Crect x='6' y='9' width='2' height='1'/%3E%3Crect x='5' y='10' width='4' height='1'/%3E%3Crect x='4' y='11' width='6' height='1'/%3E%3Crect x='3' y='12' width='8' height='1'/%3E%3C/svg%3E"); }
  .tab[href="#office"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' shape-rendering='crispEdges'%3E%3Crect x='5' y='0' width='4' height='1'/%3E%3Crect x='4' y='1' width='1' height='1'/%3E%3Crect x='9' y='1' width='1' height='1'/%3E%3Crect x='1' y='2' width='12' height='1'/%3E%3Crect x='0' y='3' width='14' height='1'/%3E%3Crect x='0' y='4' width='14' height='1'/%3E%3Crect x='0' y='5' width='14' height='1'/%3E%3Crect x='0' y='6' width='6' height='1'/%3E%3Crect x='8' y='6' width='6' height='1'/%3E%3Crect x='6' y='7' width='2' height='1'/%3E%3Crect x='0' y='8' width='6' height='1'/%3E%3Crect x='8' y='8' width='6' height='1'/%3E%3Crect x='0' y='9' width='14' height='1'/%3E%3Crect x='0' y='10' width='14' height='1'/%3E%3Crect x='0' y='11' width='14' height='1'/%3E%3Crect x='1' y='12' width='12' height='1'/%3E%3C/svg%3E"); }
  .tab[href="#offseason"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' shape-rendering='crispEdges'%3E%3Crect x='2' y='0' width='2' height='1'/%3E%3Crect x='10' y='0' width='2' height='1'/%3E%3Crect x='0' y='1' width='14' height='1'/%3E%3Crect x='0' y='2' width='14' height='1'/%3E%3Crect x='0' y='3' width='1' height='1'/%3E%3Crect x='13' y='3' width='1' height='1'/%3E%3Crect x='0' y='4' width='1' height='1'/%3E%3Crect x='2' y='4' width='2' height='1'/%3E%3Crect x='5' y='4' width='2' height='1'/%3E%3Crect x='8' y='4' width='2' height='1'/%3E%3Crect x='11' y='4' width='1' height='1'/%3E%3Crect x='13' y='4' width='1' height='1'/%3E%3Crect x='0' y='5' width='1' height='1'/%3E%3Crect x='2' y='5' width='2' height='1'/%3E%3Crect x='5' y='5' width='2' height='1'/%3E%3Crect x='8' y='5' width='2' height='1'/%3E%3Crect x='13' y='5' width='1' height='1'/%3E%3Crect x='0' y='6' width='1' height='1'/%3E%3Crect x='13' y='6' width='1' height='1'/%3E%3Crect x='0' y='7' width='1' height='1'/%3E%3Crect x='2' y='7' width='2' height='1'/%3E%3Crect x='5' y='7' width='2' height='1'/%3E%3Crect x='8' y='7' width='2' height='1'/%3E%3Crect x='11' y='7' width='1' height='1'/%3E%3Crect x='13' y='7' width='1' height='1'/%3E%3Crect x='0' y='8' width='1' height='1'/%3E%3Crect x='2' y='8' width='2' height='1'/%3E%3Crect x='5' y='8' width='2' height='1'/%3E%3Crect x='8' y='8' width='2' height='1'/%3E%3Crect x='13' y='8' width='1' height='1'/%3E%3Crect x='0' y='9' width='1' height='1'/%3E%3Crect x='13' y='9' width='1' height='1'/%3E%3Crect x='0' y='10' width='1' height='1'/%3E%3Crect x='2' y='10' width='2' height='1'/%3E%3Crect x='5' y='10' width='2' height='1'/%3E%3Crect x='13' y='10' width='1' height='1'/%3E%3Crect x='0' y='11' width='1' height='1'/%3E%3Crect x='2' y='11' width='2' height='1'/%3E%3Crect x='5' y='11' width='2' height='1'/%3E%3Crect x='13' y='11' width='1' height='1'/%3E%3Crect x='0' y='12' width='14' height='1'/%3E%3C/svg%3E"); }
  .tab[href="#db"] { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' shape-rendering='crispEdges'%3E%3Crect x='3' y='0' width='8' height='1'/%3E%3Crect x='1' y='1' width='12' height='1'/%3E%3Crect x='0' y='2' width='14' height='1'/%3E%3Crect x='1' y='3' width='12' height='1'/%3E%3Crect x='0' y='4' width='1' height='1'/%3E%3Crect x='13' y='4' width='1' height='1'/%3E%3Crect x='0' y='5' width='14' height='1'/%3E%3Crect x='1' y='6' width='12' height='1'/%3E%3Crect x='0' y='7' width='1' height='1'/%3E%3Crect x='13' y='7' width='1' height='1'/%3E%3Crect x='0' y='8' width='14' height='1'/%3E%3Crect x='1' y='9' width='12' height='1'/%3E%3Crect x='0' y='10' width='1' height='1'/%3E%3Crect x='13' y='10' width='1' height='1'/%3E%3Crect x='0' y='11' width='14' height='1'/%3E%3Crect x='1' y='12' width='12' height='1'/%3E%3Crect x='3' y='13' width='8' height='1'/%3E%3C/svg%3E"); }

  /* --- the header: one row — crest, club, record, the day, the buttons ------- */
  #hdr {
    grid-column: 2; grid-row: 1; width: auto; margin: 6px 6px 0; padding: 4px 8px;
    flex-wrap: nowrap; gap: 8px; align-items: center;
  }
  .hd-logo { width: 34px; height: 34px; padding: 1px; flex: none; }
  .hd-img, .hd-img[src*="data/logos/"] { width: 30px; height: 30px; }
  .hd-name { font-size: 17px; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 170px; }
  .hd-sub { font-size: 9px; margin-top: 2px; }
  .hd-rec { font-size: 26px; }
  .hd-phase { max-width: 150px; gap: 1px; }
  .hd-ph { font-size: 13px; }
  .hd-phase .cb-what { font-size: 9px; }
  #hdr .hq-btn, #hdr::before, #hdr::after { display: none !important; }
  #hdr .hd-row { flex-wrap: nowrap; }
  #hdr .hd-phase { flex: 0 1 auto; max-width: 150px; }
  .hd-go, #hdr .hd-go { order: 0; flex: none; margin-left: auto; gap: 4px; display: flex; }
  #hdr .hd-go .cbtn.hd-next { flex: none; }
  .hd-go .cbtn { padding: 6px 9px 5px; font-size: 13px; min-height: 0; }
  .hd-go .cbtn small, .hd-go .cbtn .sub-l { font-size: 8px; }
  #hdr .hd-ahead { top: calc(100% + 6px); right: 0; left: auto; }
  /* a narrow phone: the club by its nickname, the phase in full, and the sims'
     words on two lines so the club block is never cut to "BUF…" */
  .hd-loc { display: none; }
  .hd-id { flex: 0 1 auto; min-width: 64px; }
  .hd-name { max-width: none; }
  #hdr .hd-phase { flex: none; max-width: none; }
  .hd-ph { white-space: nowrap; }
  .hd-go .cbtn.hd-sim { white-space: normal; width: 66px; padding: 4px 6px 3px; font-size: 12px; line-height: 1.05; }
  #hdr .hd-go .cbtn.hd-next { max-width: 132px; white-space: normal; line-height: 1.05; }

  /* --- the sub-menu under the header, the page under that ------------------- */
  #subs { grid-column: 2; grid-row: 2; width: auto; margin: 0 6px; padding: 6px 0 0; gap: 4px; }
  .sub { padding: 4px 8px 3px; font-size: 10px; }
  /* no padding at the foot: a bar pinned to the bottom (Back, Next, Take
     the job) must sit on the screen's edge, not 40px above it — the room to
     scroll past the last window is a spacer instead */
  #app > main { grid-column: 2; grid-row: 3; min-height: 0; padding: 8px 8px 0 !important; }
  #app > main::after { content: ''; display: block; height: 32px; }
  /* the page is laid out as on a small laptop, then drawn a little smaller */
  #app > main > * { zoom: .8; }
  /* in a live game the menu is hidden: the field takes the whole width */
  body:has(.gd-live) #app { grid-template-columns: minmax(0, 1fr); }
  body:has(.gd-live) #hdr, body:has(.gd-live) #subs, body:has(.gd-live) #app > main { grid-column: 1; }

  /* --- windows side by side, never one full-width box after another ----------
     room.css folds every page into one column under 1100px wide, which on a
     phone held sideways stacks wide boxes into a long scroll. The page is
     laid out 955px wide here (the .8 zoom), so the laptop's twelve columns
     come back: windows sit beside each other at their own widths. */
  .rm-page, .rm-stack, .rm-row { gap: 14px; }
  .rm-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
  .rm-c3 { grid-column: span 3; } .rm-c4 { grid-column: span 4; } .rm-c5 { grid-column: span 5; } .rm-c6 { grid-column: span 6; }
  .rm-c7 { grid-column: span 7; } .rm-c8 { grid-column: span 8; } .rm-c9 { grid-column: span 9; } .rm-c12 { grid-column: 1 / -1; }
  .rm-grid > .rm-stack { display: grid; }
  /* a third of this width is too thin for a card with a face and words in
     it: the narrow column takes five twelfths, its partner seven */
  .rm-grid > .rm-c4 { grid-column: span 5; } .rm-grid > .rm-c8 { grid-column: span 7; }
  .rm-o1, .rm-o2, .rm-o3, .rm-o4, .rm-o5, .rm-o6, .rm-o7, .rm-o8 { order: 0; }
  .rm-row { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  /* the player page: its two columns side by side, as on a laptop */
  .pf-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  /* slimmer title bars and window padding: more of the page on the screen */
  .rm-tb { min-height: 0; padding-top: 5px; padding-bottom: 4px; }
  .rm-tb h1, .rm-tb h2, .rm-tb h3 { font-size: 24px; }
  .rm-wb { padding: 10px 12px; }


  /* ============================================================================
     HOME — a few big tiles that fill the screen (owner's model): the main
     window (Today, or the game on game day) a tall column on the left, the
     small one over the storylines and goals in the middle, the messages a
     tall column on the right. Each tile scrolls inside itself if it has to;
     the page does not. The league cards wait under them.
     The height is the screen less the header, the sub-menu and a gap (110px), in the
     page's own .8-zoomed pixels.
  ============================================================================ */
  .home-grid.hg-rows {
    height: calc((100vh - 110px) * 1.25); height: calc((100dvh - 110px) * 1.25);
    min-height: 330px;
    grid-template-columns: none; grid-template-rows: fit-content(62%) minmax(0, 1fr);
    grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 12px; align-items: stretch;
  }
  .home-grid.hg-rows > .hg-cell { display: contents; }
  .home-grid.hg-rows > .hg-cell > .rm-win {
    height: auto; min-height: 0; min-width: 0; margin: 0; overflow: hidden;
    display: flex; flex-direction: column;
  }
  .home-grid.hg-rows > .hg-cell > .rm-win > .rm-wb { flex: 1 1 0; min-height: 0; overflow-y: auto; overflow-x: hidden; }
  .home-grid.hg-rows .rm-win.rm-o1 { order: 1; grid-row: span 2; }
  .home-grid.hg-rows .rm-win.rm-o2 { order: 2; grid-row: span 1; }
  /* the small top tile is as tall as what it holds (at most 62% of the
     column, then it scrolls); the one under it takes the rest */
  .home-grid.hg-rows .rm-win.rm-o2 > .rm-wb { flex: 1 1 auto; }
  /* on game day Today is the small tile: its picture of the stadium stays on
     the Game day page */
  .home-today.rm-o2 .rm-stage { display: none; }
  .home-grid.hg-rows .rm-win.rm-o4 { order: 3; grid-row: span 1; }
  /* with no small tile above it (camp: no next game yet) the storylines tile
     is the top one, sized to what it holds — a zero flex-basis sized it to
     its title bar and cut "No stories yet" in half */
  .home-grid.hg-rows .rm-win.rm-o4 > .rm-wb { flex: 1 1 auto; }
  /* the messages: a closed message's badge over his name, the name in full */
  .adv-row .adv-rt { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .adv-row .adv-hl { display: block; -webkit-line-clamp: unset; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word; font-size: 14px; }
  .adv-row { gap: 8px; }
  .adv-rowb { gap: 8px; }
  .home-grid.hg-rows .rm-win.rm-o3 { order: 4; grid-row: span 2; }
  /* Today: the jobs a little tighter, the gold button at the foot */
  .home-today .rm-list { gap: 6px; }
  .home-today .today-j { padding-top: 8px; padding-bottom: 8px; }
  /* a job's badge drops under its name when the tile is narrow (the SE),
     never past the tile's edge */
  .home-today .rm-list { grid-template-columns: minmax(0, 1fr); }
  .home-today .today-j { flex-wrap: wrap; row-gap: 4px; min-width: 0; padding-left: 26px; }
  .home-today .rm-wb > [data-go] { margin-top: auto; }
  /* the next game: the two plates, the kick-off, the buttons — nothing else */
  .home-next .rm-wb { padding-top: 8px; padding-bottom: 8px; }
  .home-next .hn-tp { padding: 6px 8px; }
  .home-next .hn-ng { gap: 8px; }
  .home-next.sm .hn-meta { margin-top: 4px; }
  .home-next.sm .hn-go { margin-top: 6px; }
  /* last week's result is on the Schedule and in Scores: not on this tile */
  .home-next.sm .hn-last { display: none; }
  /* the tiles' title bars carry the name and one chip: the date and the
     day are already in the header */
  .home-grid.hg-rows .rm-tb .rm-meta { display: none; }
  /* game day: the game is the tall tile — each club a plate with its crest
     over its name and record, Sim and Play under them. The key matchup and
     last week's result wait on the Game day page. */
  .home-next .hn-tp, .home-next .hn-tp.r { flex-direction: column; justify-content: center; text-align: center; gap: 4px; padding: 8px 4px; }
  .home-next .hn-tp .t { width: auto; min-width: 0; max-width: 100%; }
  .home-next .hn-tp .t1 { font-size: 18px; white-space: normal; overflow-wrap: anywhere; }
  .home-next .hn-tp .t2 { font-size: 16px; }
  .home-next .hn-tp .t3 { display: none; }
  .home-next .hn-tp .rm-crest { width: 52px; height: 52px; }
  .home-next .hn-tp .rm-crest img { width: 44px; height: 44px; }
  .home-next .hn-vs { font-size: 20px; }
  .home-next.rm-o1 .hn-km, .home-next.rm-o1 .hn-last { display: none; }
  .home-next.rm-o1 .hn-go { display: grid; gap: 8px; margin-top: 10px; }
  .home-next.rm-o1 .hn-go .rm-btn { width: 100%; justify-content: center; margin: 0; }
  /* the storylines tile: the strip of cards, one after another */
  .home-sl .rm-wb { padding-top: 6px; }
  /* the strip is swiped by hand on a phone: no Latest row with arrows */
  /* no second tile (camp, the offseason): two columns — Today over the
     storylines, the messages beside them — so the storylines get the rest of
     the column instead of a sliver (owner, 2026-09-26) */
  .home-grid.hg-rows.hg-solo { grid-auto-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .home-grid.hg-rows.hg-solo .rm-win.rm-o1 { grid-row: span 1; }
  .home-grid.hg-rows.hg-solo .rm-win.rm-o1 > .rm-wb { flex: 1 1 auto; }
  .home-sl .sl-head { display: none; }
  /* the coaching staff: each man's card in one column (name over his bars),
     so a name is never squeezed to a letter a line beside them */
  .co-card { grid-template-columns: minmax(0, 1fr); padding-left: 12px; }
  .co-card.rm-pt::before { display: none; }
  .co-card .nm b { font-size: 22px; }
  /* the Storylines inbox: the column is narrow here, so Talk takes its own
     row under the card instead of sitting on top of the badges */
  .cv-card { grid-template-columns: auto minmax(0, 1fr); }
  .cv-card .cv-talk { grid-column: 1 / -1; display: flex; justify-content: center; width: calc(100% - 6px); }
  .cv-cn { font-size: 22px; overflow-wrap: break-word; }
  /* Storylines -> Goals: a goal card stacks (the laptop's four columns
     do not fit this width): face | name, what, progress; then the practice
     board, the stakes and the button, each across the card */
  .gl-row { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "f who" "f what" "f meter" "pv pv" "stake stake" "act act";
    gap: 6px 10px; padding: 10px; }
  .gl-row.rm-pt::before { display: none; }
  .gl-nm { font-size: 22px; width: 100%; }
  .gl-due { margin-left: 0; padding-left: 0; }
  .gl-what { font-size: 14px; }
  .gl-stake { justify-content: flex-start; }
  .gl-act { justify-self: start; }
  .cv-mediaw .rm-tb h2 { font-size: 20px; }
  .home-sl .hg-list { max-height: none; }
  /* the league cards under the tiles: side by side */
  .home-cards { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-top: 2px; }


  /* ============================================================================
     A PAGE YOU DRILL INTO — its own screen, with Back (src/phone.js)
     A player, a conversation, a club, one injured man, the camp report, the
     Film Room: the menu column, the header and the sub-menu step aside, and
     Back sits in the top-left corner, clear of the camera cutout. It goes
     back exactly where you came from (owner: "I couldn't go back").
  ============================================================================ */
  body.ph-drill #app { grid-template-columns: minmax(0, 1fr); }
  body.ph-drill #tabs, body.ph-drill #hdr, body.ph-drill #subs, body.ph-drill #calbar { display: none !important; }
  body.ph-drill #app > main { grid-column: 1; grid-row: 1 / -1; padding: 8px 8px 0 92px !important; }
  body.ph-drill #phBack {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    position: fixed; z-index: 70; top: 8px; left: calc(env(safe-area-inset-left, 0px) + 8px);
    width: 76px; height: 58px; margin: 0; padding: 4px 0 3px; cursor: pointer; border: 0; border-radius: 0;
    background: #fff; color: var(--ink); box-shadow: var(--frame), 0 5px 0 0 var(--ink), inset 0 -4px 0 0 var(--steel);
    font: 400 19px/1 var(--disp); letter-spacing: .6px; text-transform: uppercase;
  }
  body.ph-drill #phBack:active { transform: translateY(3px); box-shadow: var(--frame), 0 2px 0 0 var(--ink), inset 0 -3px 0 0 var(--steel); }
  /* a pixel arrow pointing back */
  #phBack i {
    display: block; width: 20px; height: 16px; background: currentColor; image-rendering: pixelated;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8' shape-rendering='crispEdges'%3E%3Crect x='3' y='0' width='1' height='1'/%3E%3Crect x='2' y='1' width='2' height='1'/%3E%3Crect x='1' y='2' width='2' height='1'/%3E%3Crect x='0' y='3' width='10' height='2'/%3E%3Crect x='1' y='5' width='2' height='1'/%3E%3Crect x='2' y='6' width='2' height='1'/%3E%3Crect x='3' y='7' width='1' height='1'/%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 10 8' shape-rendering='crispEdges'%3E%3Crect x='3' y='0' width='1' height='1'/%3E%3Crect x='2' y='1' width='2' height='1'/%3E%3Crect x='1' y='2' width='2' height='1'/%3E%3Crect x='0' y='3' width='10' height='2'/%3E%3Crect x='1' y='5' width='2' height='1'/%3E%3Crect x='2' y='6' width='2' height='1'/%3E%3Crect x='3' y='7' width='1' height='1'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  }
  #phBack b { font-weight: 400; }

  /* ============================================================================
     THE NEW FRANCHISE — every step on one screen (owner, 2026-09-26)
  ============================================================================ */
  /* the logo and the steps share one slim row, clear of the ? in the corner */
  .bt.bt-make { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 10px; padding: 0 0 8px; max-width: none; }
  .bt-make > .bt-card { grid-column: 1 / -1; }
  .bt-mark.small { margin: 0; }
  .bt-mark.small .bt-logo { font-size: 22px; gap: 6px; padding: 5px 9px 4px; margin: 3px; }
  .bt-mark.small .bt-logo .w2 { padding: 2px 6px 1px; margin: 0; box-shadow: var(--frame-2); }
  .bt-make .bt-rail { justify-content: flex-start; flex-wrap: nowrap; gap: 4px; margin: 0; padding-right: 54px; }
  .bt-make .bt-step { font-size: 15px; padding: 4px 8px 3px; gap: 5px; }
  .bt-make .bt-step em { display: inline; font-size: 9.5px; }
  /* the step's window: a slim title bar, the choices, then the buttons */
  .bt-make .bt-card { padding: 10px 14px 0; }
  .bt-make .bt-card > .bt-h:first-child { margin: -10px -14px 10px; padding: 6px 14px 5px; min-height: 0; font-size: 24px; }
  .bt-make .bt-input { max-width: 460px; padding: 9px 12px; font-size: 20px; }
  /* Back and Next are pinned to the bottom of the screen on every step, so
     neither is ever below the fold (owner: "I can't see the Back buttons") */
  .bt-make .bt-nav {
    position: sticky; bottom: 0; z-index: 6; margin: 10px -14px 0; padding: 6px 12px 6px;
    background: var(--win); border-top: 3px solid var(--ink); align-items: center;
  }
  .bt-make .bt-b, .bt-job .bt-b { font-size: 19px; padding: 7px 14px 6px; margin: 3px 3px 7px; }

  /* your face: the picture on the left, every choice in a grid on the right,
     Back / Surprise me / Next in one row under them */
  .bt-s1 .bt-roll { display: none; }
  .bt-s1 .bt-nav .bt-roll2 { display: inline-flex; }
  .bt-face { grid-template-columns: 150px minmax(0, 1fr); gap: 14px; }
  .bt-fp { padding: 6px; }
  .bt-picks { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
  .bt-pick { gap: 4px; padding: 6px 8px 7px; }
  .bt-pick .v { grid-template-columns: 26px minmax(0, 1fr) 26px; gap: 4px; }
  .bt-pick .v b { font-size: 17px; }
  .bt-tog { padding: 4px 10px 3px; font-size: 17px; }

  /* the kind of coach: the two choices side by side, small tiles */
  .bt-s2 .bt-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px; }
  .bt-s2 .bt-card > .bt-h, .bt-s2 .bt-nav { grid-column: 1 / -1; }
  .bt-s2 .bt-choice + .bt-choice { margin-top: 0; }
  .bt-s2 .bt-kinds { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .bt-s2 .bt-kinds.bt-diffs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bt-s2 .bt-choice.bt-diff { grid-column: 1 / -1; }
  .bt-s2 .bt-kind { padding: 10px 8px 10px; }
  .bt-s2 .bt-kind b { font-size: 21px; }
  .bt-s2 .bt-kind span { font-size: 11.5px; line-height: 1.3; margin-top: 3px; }
  .bt-s2 .bt-art { width: 40px; height: 40px; margin-bottom: 2px; }
  .bt-s2 .bt-kind.on::before { left: 6px; top: 8px; width: 11px; height: 17px; }

  /* your club: a long list, so it scrolls — the cards are small, the sort
     buttons ride the top and Back the bottom */
  .bt-s3 .ob-head { position: sticky; top: 0; z-index: 6; margin: 0 -14px 8px; padding: 4px 14px 6px; background: var(--win); border-bottom: 3px solid var(--ink); }
  .bt-s3 .ob-sort { font-size: 17px; padding: 5px 10px 4px; }
  .bt-s3 .ob-grid { grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 8px; }
  .bt-s3 .ob-top { padding: 5px 7px; gap: 7px; }
  .bt-s3 .ob-logo { width: 34px; height: 34px; margin: 1px; }
  .bt-s3 .ob-logo img { width: 26px; height: 26px; }
  .bt-s3 .ob-nm b { font-size: 18px; }
  .bt-s3 .ob-nm i { font-size: 9.5px; }
  .bt-s3 .ob-body { padding: 5px 8px 0; gap: 2px; }
  .bt-s3 .ob-line { font-size: 11px; }
  .bt-s3 .ob-line span { font-size: 9.5px; }
  .bt-s3 .ob-best { margin-top: 3px; padding-top: 4px; gap: 5px; }
  .bt-s3 .ob-best .ob-face { width: 24px; height: 24px; }
  .bt-s3 .ob-best b { font-size: 11px; }
  .bt-s3 .ob-best i { font-size: 9px; }
  .bt-s3 .ob-best em { font-size: 21px; }
  .bt-s3 .ob-v { margin: 5px -8px 0; padding: 3px; font-size: 10px; }

  /* the briefing: two pages (the club and the owner, then the roster), with
     Back / Take the job / Next pinned under them */
  .bt-job { padding: 0 44px 0 0; }
  .ob-brief { gap: 10px; padding: 0 14px 0; }
  .ob-bhead { margin: 0 -14px; padding: 7px 14px 6px; gap: 12px; }
  .ob-blogo { width: 48px; height: 48px; padding: 5px; }
  .ob-bkick { font-size: 10px; }
  .ob-bhead h1 { font-size: 32px; margin: 2px 0 4px; }
  .ob-bv { font-size: 10.5px; padding: 3px 8px 2px; }
  .ob-pg { display: grid; gap: 10px; align-content: start; }
  .ob-brief .ob-pg[data-obpg="2"] { display: none; }
  .ob-brief.ob-p2 .ob-pg[data-obpg="2"] { display: grid; }
  .ob-brief.ob-p2 .ob-pg[data-obpg="1"] { display: none; }
  .ob-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .ob-tile { padding: 6px 10px 7px; gap: 1px; }
  .ob-tile b { font-size: 30px; }
  .ob-owner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 12px; padding: 8px 12px; align-items: center; }
  .ob-opix { width: 84px; height: 84px; }
  .ob-oname b { font-size: 27px; }
  .ob-goals { gap: 4px; }
  .ob-goal { padding: 5px 10px 6px; gap: 1px; }
  .ob-goal b { font-size: 13px; line-height: 1.25; }
  .ob-two { gap: 14px; }
  .ob-two > div { gap: 5px; }
  .ob-unit { min-height: 0; padding: 6px 10px; }
  .ob-bar {
    position: sticky; bottom: 0; z-index: 6; display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin: 0 -14px; padding: 6px 14px max(2px, env(safe-area-inset-bottom, 0px)); background: var(--win); border-top: 3px solid var(--ink);
  }
  .ob-pgb { display: inline-flex; min-width: 96px; }
  .ob-brief .ob-bar [data-obpg-back] { visibility: hidden; }
  .ob-brief.ob-p2 .ob-bar [data-obpg-back] { visibility: visible; }
  .ob-brief.ob-p2 .ob-bar [data-obpg-next] { visibility: hidden; }
  .ob-take { justify-self: auto; margin: 3px 3px 8px; padding: 9px 22px 8px 42px; font-size: 27px; }
  .ob-take::before { left: 15px; width: 11px; height: 17px; margin-top: -9px; }


  /* ============================================================================
     DEVELOPMENT → TRAINING — the practice report
     The page shows the top six men and a gold button; the whole list is its
     own screen (#dev/training/report, src/training_view.js reportPage). The
     rows are slimmer: the rank, the face, the name over one line of why, the
     grade, what he earned.
  ============================================================================ */
  .tr-pboard .dr-row.ph-x, .tr-pboard .tr-more { display: none; }
  .tr-fullb { display: flex; justify-content: center; margin: 8px 9px 10px; font-size: 20px; }
  .tr-repage .tr-pboard .tr-fullb { display: none; }
  .tr-pboard .dr-hd, .tr-pboard .dr-row { grid-template-columns: 34px 52px minmax(0, 1fr) 0 64px 150px; }
  .tr-pboard .dr-hd > * { padding: 6px 8px 5px; }
  .tr-pboard .dr-row > .pl { font-size: 20px; }
  .tr-pboard .dr-row > .dr-face { margin: 4px 2px 4px 4px; }
  .tr-pboard .dr-row > .who { padding: 4px 8px; gap: 2px; }
  .tr-pboard .dr-row .who > span:not(.nmrow) {
    font-size: 11px; line-height: 1.25;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  }
  .tr-pboard .dr-row > .mdc { padding: 4px 2px; gap: 3px; }
  .tr-pboard .dr-row .md { width: 34px; height: 34px; font-size: 24px; }
  .tr-pboard .dr-row > .rw { grid-template-columns: minmax(0, 1fr) 34px; gap: 6px; padding: 4px 8px; }
  .tr-pboard .dr-board-h b { font-size: 22px; }
  .tr-pboard .gs-legend { margin: 2px 4px 6px; }
  .tr-pboard .gs-step { padding: 3px 6px 2px 3px; font-size: 9.5px; }
  .tr-pboard .gs-step b { font-size: 15px; }
  /* the full report's own screen: the rows get the whole width, so the why
     line is read in full */
  .tr-repage .tr-pboard .dr-row .who > span:not(.nmrow) { -webkit-line-clamp: 3; }
  .tr-repage .rm-tb .rm-end { gap: 8px; }
  /* its own screen has Back in the corner: no second way back in the title bar */
  body.ph-drill .tr-repage .tr-back { display: none; }
  /* the week beside the day: the day's name on one line where it can */
  .tr-wk { gap: 6px; padding: 8px 8px 7px 10px; }
  .tr-wk.rm-pt { padding-left: 26px; }
  .tr-wk-t b { font-size: 18px; }
  .tr-wk-t small { font-size: 11px; }
  .tr-wk .rm-bd { flex: none; }
  /* Friday's rooms four to a row ("WR / TE" was cut), the dial's words smaller */
  .tr-rooms { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
  .tr-room b { font-size: 20px; }
  .tr-lv span { font-size: 9px; letter-spacing: .03em; overflow-wrap: anywhere; }
  /* who practises: the health bar and its badges wrap under each other */
  .cd-row .hp .cd-bar { width: 72px; }


  /* ============================================================================
     TEAM → INJURIES — one hurt man a tile on two lines: his face down the
     left; his name and his badges, then the plan button; under them what it
     is and when he is back. On a laptop the five sit on one line, which on
     a phone squeezed his name into a column one letter wide.
  ============================================================================ */
  .med-top, .med-row { grid-template-columns: 56px minmax(0, 1fr) minmax(150px, auto); gap: 6px 12px; }
  .med-top > .med-face, .med-row > .med-face { grid-row: 1 / 3; align-self: center; }
  .med-top > .inj-id, .med-row > .inj-id { grid-column: 2; grid-row: 1; }
  .med-top > .mp-btn { grid-column: 3; grid-row: 1; justify-self: stretch; align-self: center; }
  .med-top > .inj-what, .med-row > .inj-what { grid-column: 2; grid-row: 2; }
  .med-top > .inj-back, .med-row > .inj-back { grid-column: 3; grid-row: 2; }
  /* a name breaks between its words, never inside one */
  .inj-id .nmrow a, .inj-id .nmrow b { overflow-wrap: normal; word-break: normal; }
  .inj-id .nmrow b { font-size: 20px; }
  .inj-what > b, .inj-back > b { font-size: 13px; }
  .med-card { padding: 7px 9px; }
  /* the trainer's name over two lines rather than cut short */
  .med-tid > b { white-space: normal; font-size: 24px; line-height: 1; }
  .med-tfx b { font-size: 20px; }


  /* ============================================================================
     COACHING → STAFF — each man's tile is his face and name on top, his
     bars or his job under them. Side by side (the laptop's way) left his
     name a column one letter wide.
  ============================================================================ */
  .co-card { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 8px 10px 8px 28px; }
  .co-card.vac { padding-left: 10px; }
  .co-card .nm b { font-size: 22px; overflow-wrap: normal; }
  .co-bar { grid-template-columns: 96px minmax(0, 1fr) 30px; }


  /* ============================================================================
     COACHING → STORYLINES — the inbox column a little wider, and each talk
     card his face and name over a full-width Talk button (the button sat on
     top of his badges).
  ============================================================================ */
  .cv-front > .rm-grid > .rm-c8 { grid-column: span 7; }
  .cv-front > .rm-grid > .rm-c4 { grid-column: span 5; }
  .cv-card { grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; }
  .cv-card .cv-talk { grid-column: 1 / -1; display: flex; justify-content: center; width: calc(100% - 6px); }
  .cv-cn { font-size: 22px; overflow-wrap: normal; }


  /* ============================================================================
     NAMES ARE READ IN FULL — a player's name in a table or on a tile wraps
     onto a second line instead of being cut to "Dalto…". break-word (not
     anywhere) keeps a column from being squeezed to one letter.
  ============================================================================ */
  /* every table in a window: column heads may take two lines, the cells a
     little tighter — so a wide table fits the window instead of running
     off its right edge */
  .rm-tbl th, .xsort th.xs-h { white-space: normal; line-height: 1.15; padding: 6px 6px 5px; }
  .rm-tbl td { padding: 6px; }
  /* a window's title takes a second line rather than "WHO PRACTI…" */
  .rm-tb { flex-wrap: wrap; row-gap: 4px; }
  .rm-tb h1, .rm-tb h2, .rm-tb h3 { white-space: normal; text-overflow: clip; overflow-wrap: break-word; }
  .rm-tbl a.plink, .rm-tbl a.cp-plink, .tp-nm, .ps-who .nm a.plink, .ps-nml a.plink, .cv-tn, .cd-row .nm a,
  .tr-sr .n b, .tr-inj .n b, .dr-row .who a, .sl-nm, .sl-seed .nm {
    white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word;
  }


  /* ============================================================================
     TEAM → SCHEDULE — the preseason beside the season had room for "CA…";
     the two columns share the width more evenly
  ============================================================================ */
  .rm-page.tp > .rm-grid > .rm-c8 { grid-column: span 7; }
  .rm-page.tp > .rm-grid > .rm-c4 { grid-column: span 5; }
  /* the iPhone SE's side column: the name needs the crest's room */
  @container tpsch (max-width: 300px) {
    .tp-opp .rm-crest { display: none; }
    .tp-opp { padding-left: 6px; padding-right: 4px; }
    .tp-gm { grid-template-columns: 22px 16px minmax(0, 1fr) 62px; gap: 4px; padding-left: 20px; padding-right: 4px; }
    .tp-ha { font-size: 14px; }
    .tp-on b { font-size: 17px; }
    .tp-res { gap: 3px; }
    .tp-res b { font-size: 17px; }
    .tp-res .res { width: 18px; height: 18px; font-size: 14px; }
  }


  /* ============================================================================
     TEAM → TEAM STATS — the tables two to a row: tighter cells and smaller
     numbers so a name fits beside six columns
  ============================================================================ */
  .tp-st th, .tp-st td { padding-left: 5px; padding-right: 5px; }
  .tp-st .tp-pl { gap: 6px; }
  .tp-st .tp-nm { font-size: 17px; }
  .tp-st td.big { font-size: 20px; }
  .tp-st td.n:not(.big) { font-size: 17px; }


  /* ============================================================================
     TEAM → PRACTICE SQUAD — names wrap on the tiles, the labels under the
     bar wrap too; the two boards below each take the full width (the
     second's six columns ran off the edge in a five-twelfths column)
  ============================================================================ */
  .ps-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
  .ps-who .nm a.plink { font-size: 19px; }
  .ps-lbl { flex-wrap: wrap; }
  .ps-sect.rm-c7, .ps-sect.rm-c5 { grid-column: 1 / -1; }


  /* ============================================================================
     LEAGUE → STANDINGS — the two conferences side by side leave each table
     ~420px: the club, the record and the margin; win % and the streak wait
     for the one-list League view, which has the width for them. The name
     had ~20px and ran under the record.
  ============================================================================ */
  .st-div { --st-cols: 24px 34px minmax(0, 1fr) 58px 52px; }
  .st-div .st-c2 { display: none; }
  .st-head, .st-row { gap: 7px; padding-left: 28px; padding-right: 8px; }
  .st-row::before { left: 6px; }
  .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; min-width: 0; }
  .st-crest { width: 34px; height: 34px; }
  .st-logo { width: 30px; height: 30px; }
  .st-league .st-div { --st-cols: 24px 34px minmax(0, 1fr) 70px 60px 64px 84px; }
  .st-league .st-div .st-c2 { display: block; }


  /* LEAGUE → CLUBS — a conference's four divisions one under another, so
     each club tile has the width for "Buccaneers" (two to a row cut every
     name to "BUC…") */
  .cp-ix-divs { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .cp-ix-tile { padding-left: 26px; gap: 8px; }
  .cp-ix-tile .rm-crest { width: 36px; height: 36px; }
  .cp-ix-nm i { font-size: 21px; }


  /* LEAGUE → SALARY CAP — every deal: the two buttons one over the other,
     the money a size smaller, so the last column is on the screen */
  .fo-ctt td.x { white-space: normal; width: 1%; }
  .fo-ctt td.x .rm-btn { display: flex; justify-content: center; }
  .fo-ctt td.c b, .fo-ctt td.big { font-size: 20px; }
  .fo-ctt td.d { font-size: 18px; }
  .fo-row .rm-bd { white-space: normal; max-width: calc(100% - 4px); }

  /* FRONT OFFICE → CONTRACTS, NEGOTIATIONS, FRANCHISE TAG — the list is a
     seven-column table: it takes the whole width (in two-thirds it ran off
     the window's right edge), and the side windows sit two abreast under it */
  .fo-ct > .rm-grid > .rm-c8, .fo-talks > .rm-grid > .rm-c8, .fo-tag > .rm-grid > .rm-c8,
  .fo-ct > .rm-grid > .rm-c4, .fo-talks > .rm-grid > .rm-c4, .fo-tag > .rm-grid > .rm-c4 { grid-column: 1 / -1; }
  .fo-ct > .rm-grid > .rm-c4, .fo-talks > .rm-grid > .rm-c4, .fo-tag > .rm-grid > .rm-c4 {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start;
  }

  /* FRONT OFFICE → SCOUTING — the big board's columns give up their
     laptop minimum widths (draft_view.js injects them) so Scout stays on
     the screen; the roster-needs title keeps its name */
  #app .dv-scout td, #app .dv-scout th { padding: 5px 5px; }
  #app .dv-scout .dv-c-sure, #app .dv-scout .dv-c-act { min-width: 0; }
  #app .dv-scout .dv-c-know { min-width: 0; max-width: 120px; }
  #app .dv-scout .dv-c-act .dv-b { padding: 5px 7px; font-size: 15px; }
  #app .dv-scout .dv-c-need .rm-bd, #app .dv-scout .dv-c-need .dv-need { white-space: normal; }
  .dv-needw .rm-tb { flex-wrap: wrap; row-gap: 4px; }
  .dv-needw .rm-tb .rm-end { flex-wrap: wrap; }

  /* FRONT OFFICE → OWNER AND FINANCES — the money tiles in the side column
     one under another when two abreast would cut "$550M" */
  .fo-own .fo-tiles { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important; }   /* over its inline two columns */

  /* DATABASE — the eight divisions two to a row (four to a row cut the
     tables); the reference tables' heads wrap and a long address breaks */
  .db-div.rm-c3 { grid-column: span 6; }
  .co .co-tw thead th { white-space: normal; line-height: 1.15; }
  .co .co-tw td { padding: 6px; font-size: 12.5px; white-space: normal; }   /* style.css: every tbody td is nowrap */
  .co .co-tw code { overflow-wrap: anywhere; }
  /* the coaching numbers' eleven-column matrix: small type so it fits */
  .cdb-sec .rm-tbl td { padding: 4px; font-size: 11px; white-space: normal; }
  .cdb-sec .rm-tbl th { padding: 5px 4px 4px; font-size: 9.5px; letter-spacing: .04em; }

  /* TEAM → LINEUP — a name chip on the field is as wide as the name (at a
     size smaller) rather than cut to "CUSHENBERR" */
  .lu-field.main .lu-nm { max-width: none; overflow: visible; text-overflow: clip; white-space: nowrap; font-size: 9.5px; letter-spacing: -.3px; }

  /* COACHING → SCHEME — the formation fits its window (it was drawn 912px
     wide and slid sideways, the wide receivers off the edges): smaller faces */
  .co-pic { min-width: 0; padding: 10px 4px; }
  .co-pm { height: 70px; gap: 8px; }
  .co-pm .f, .co-pm .f img.pxface { width: 40px; height: 40px; }
  .co-pm .n { font-size: 9px; padding: 2px 2px 1px; }
  .co-pfit { right: -6px; font-size: 12px; }

  /* THE BOX SCORE (a sheet over the page) — drawn a little smaller like the
     pages under it, so "Texans" is not cut to "TEXA…"; its tabs wrap onto a
     second row instead of sliding off the right edge */
  #overlay .bx-sheet { zoom: .8; }
  :is(#app, #overlay) .bx-tabs { flex-wrap: wrap; overflow: visible; }
  :is(#app, #overlay) .bx-tabs button { font-size: 17px; padding: 6px 10px 4px; }
  :is(#app, #overlay) .bx-nick { font-size: 32px; }
  :is(#app, #overlay) .bx-pts { font-size: 70px; }

  /* LEAGUE → SCORES — the games two or three to a row on any phone (the
     portrait rule under 760px wide put one huge card on each row) */
  .sl-sb { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}

/* the iPhone SE and the like: the page is only ~650px wide at the .8 zoom,
   so the report row puts what he earned on a line under his name */
@media (orientation: landscape) and (max-height: 520px) and (max-width: 720px) {
  .tr-page:not(.tr-repage) .tr-pboard .dr-hd { display: none; }
  .tr-page:not(.tr-repage) .tr-pboard .dr-row { grid-template-columns: 30px 50px minmax(0, 1fr) 0 60px; }
  .tr-page:not(.tr-repage) .tr-pboard .dr-row > .mdc { grid-column: 5; grid-row: 1; }
  .tr-page:not(.tr-repage) .tr-pboard .dr-row > .rw { grid-column: 3 / -1; grid-row: 2; border-left: 0; padding: 0 10px 8px 8px; }
  /* the report's own screen is wide enough for the one-line row */
  .tr-repage .tr-pboard .dr-hd { display: grid; }
  .tr-repage .tr-pboard .dr-hd, .tr-repage .tr-pboard .dr-row { grid-template-columns: 34px 52px minmax(0, 1fr) 0 64px 150px; }
  .tr-repage .tr-pboard .dr-row > .mdc { grid-column: 5; grid-row: 1; }
  .tr-repage .tr-pboard .dr-row > .rw { grid-column: 6; grid-row: 1; border-left: 2px solid var(--card-line); padding: 4px 8px; }
  /* contract and trade talks: the side column's chips wrap and its money
     tiles' numbers are a size smaller, so "~$6.0M" stays in its tile */
  .fo-chip { white-space: normal; max-width: calc(100% - 4px); letter-spacing: .03em; }
  .fo-terms .c span { white-space: normal; overflow: visible; text-overflow: clip; letter-spacing: .03em; line-height: 1.1; }
  .fo-talkroom .fo-tiles .fo-tile .v, .tt .fo-tiles .fo-tile .v { font-size: 24px; }
  .fo-talkroom .fo-tiles .fo-tile .k, .tt .fo-tiles .fo-tile .k { white-space: normal; }
  /* the box score's player tables, two clubs side by side: tighter cells */
  :is(#app, #overlay) .bxs .bx-pt td, :is(#app, #overlay) .bxs .bx-pt thead th { padding: 5px 3px; }
  :is(#app, #overlay) .bx-pt { font-size: 12px; }
  :is(#app, #overlay) .bx-pt .bx-nm { max-width: 96px; white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.15; }
  :is(#app, #overlay) .bx-pt .bx-pl { gap: 4px; }
  :is(#app, #overlay) .bx-pt .bx-fb { display: none; }
  /* a badge's name under its icon: a size smaller so "Breakthrough" is one word */
  .skt-nm { font-size: 9px; letter-spacing: 0; padding: 3px 3px 2px; }
  /* home messages: a smaller face and Talk so the badge and name have the row */
  .adv-talk .rm-fc, .adv-talk .rm-fc img.pxface { width: 36px; height: 36px; }
  .adv-row .adv-q.rm-btn { font-size: 13px; padding: 4px 5px 3px; }
  .adv-row .adv-hl { font-size: 13px; }
  .adv-tk .rm-bd { white-space: normal; }
  /* game day: the two clubs side by side again (the portrait rule under
     760px stacked them into one long column) */
  .gd-match { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; }
  .gd-at { margin: 24px 0 0; font-size: 30px; }
  .gd-team.r .gd-plate { flex-direction: row-reverse; text-align: right; }
  .gd-tname { font-size: 20px; }
  .gd-fs { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; }
  .gd-res { order: 0; font-size: 40px; }
  .gd-ft.r { flex-direction: row-reverse; }
  .gd-ft.r .gd-fpts { margin-left: 0; margin-right: auto; }
  .gd-fpts { font-size: 44px; }
  .lg-cols, .xp-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  /* training: the side column (the week, who practises) a little wider */
  .tr-page > .rm-grid > .rm-c8 { grid-column: span 7; }
  .tr-page > .rm-grid > .rm-c4 { grid-column: span 5; }
  /* lineup: the tokens are narrower here — a long name takes two lines */
  .lu-field.main .lu-nm { white-space: normal; max-width: 118%; letter-spacing: 0; font-size: 9px; line-height: 10px; padding: 1px 2px 0; }
  /* the scheme's formation: sixteen lanes in ~600px */
  .co-pm .f, .co-pm .f img.pxface { width: 32px; height: 32px; }
  .co-pm { height: 62px; gap: 9px; }
  .co-pfit { right: -9px; bottom: -8px; min-width: 18px; font-size: 11px; }
  /* standings: a smaller crest and name in the ~320px conference table */
  .st-div { --st-cols: 22px 30px minmax(0, 1fr) 50px 46px; }
  .st-crest { width: 30px; height: 30px; }
  .st-logo { width: 26px; height: 26px; }
  .st-nm b { font-size: 12px; }
  .st-rec { font-size: 21px; }
  /* scouting's big board: a prospect a card — rank, who, grade, how sure,
     your roster on one line; what is known and the button under them */
  #app .dv-scout thead { display: none; }
  #app .dv-scout table, #app .dv-scout tbody { display: block; width: 100%; }
  #app .dv-scout tr { display: grid; grid-template-columns: 34px minmax(0, 1.7fr) repeat(3, minmax(0, 1fr)); align-items: center; border-top: 3px solid var(--ink); }
  #app .dv-scout tbody tr:first-child { border-top: 0; }
  #app .dv-scout td { display: block; width: auto; min-width: 0 !important; max-width: none; border: 0 !important; padding: 4px 6px; text-align: left !important; background: none; }
  #app .dv-scout td.dv-c-n { text-align: center !important; }
  #app .dv-scout td[data-l]::before { content: attr(data-l); display: block; margin-bottom: 3px; font: 900 9px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
  #app .dv-scout .dv-c-know { grid-column: 2 / 5; }
  #app .dv-scout .dv-c-act { grid-column: 5; }
}

/* the smallest phones held sideways (iPhone SE, mini): the header's buttons
   take a row of their own under the club, so nothing is cut off the edge */
@media (orientation: landscape) and (max-height: 520px) and (max-width: 740px) {
  #hdr, #hdr .hd-row { flex-wrap: wrap; row-gap: 4px; }
  #hdr .hd-go, .hd-go { order: 5; flex: 1 1 100%; margin-left: 0; }
  .hd-go .cbtn.hd-sim { width: auto; flex: 1 1 0; white-space: nowrap; }
  #hdr .hd-go .cbtn.hd-next { flex: 1.4 1 0; max-width: none; white-space: nowrap; }
}


/* ============================================================================
   THE HEADER, SIDEWAYS (owner, 2026-09-26): small type; the record right
   beside the club's name; the date and the phase under it (the division
   place is on the standings); the week's days sliding in the middle, as on
   a laptop; the buttons at the end. One grid, so nothing is cut to "…".
============================================================================ */
@media (orientation: landscape) and (max-height: 520px) {
  #hdr {
    display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "logo id strip go" "logo ph strip go"; column-gap: 8px; row-gap: 0; align-items: center; padding: 4px 6px;
  }
  #hdr .hd-row { display: contents; }
  #hdr .hd-logo { grid-area: logo; align-self: center; }
  #hdr .hd-id { grid-area: id; align-self: end; min-width: 0; }
  #hdr .hd-name { font-size: 16px; max-width: none; display: flex; align-items: baseline; gap: 6px; }
  #hdr .hd-loc { display: none; }
  #hdr .hd-rec2 { display: inline; font: 400 16px/1 var(--disp); color: var(--gold); }
  #hdr .hd-sub, #hdr .hd-rec { display: none; }
  #hdr .hd-phase { grid-area: ph; align-self: start; display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: baseline; gap: 5px; max-width: none; flex: none; }
  #hdr .hd-ph { font-size: 10px; letter-spacing: .04em; opacity: .85; }
  #hdr .hd-phase .cb-what { font-size: 10px; white-space: nowrap; }
  #hdr .hd-phase .cb-what::after { content: ' ·'; }
  #hdr .hd-go { grid-area: go; margin-left: 0; }
  /* the days: slim chips, the day's picture small */
  #hdr #calbar { display: contents !important; }
  #hdr .cb-wrap { grid-area: strip; order: 0; flex: none; min-width: 0; margin: 0; padding-top: 7px; align-self: stretch; display: block !important; }
  #hdr .cb-track { gap: 4px; padding: 2px 0; }
  #hdr .cb-d { width: 92px; height: 34px; grid-template-columns: 30px minmax(0, 1fr); gap: 4px; padding: 2px 4px 2px 2px; }
  #hdr .cb-pic { width: 30px; height: 26px; }
  #hdr .cb-opp { left: 14px; top: 12px; width: 18px; height: 18px; padding: 1px; }
  #hdr .cb-tx b { font-size: 14px; }
  #hdr .cb-d em { font-size: 7.5px; -webkit-line-clamp: 1; }
  #hdr .cb-pin { transform: scale(.6); transform-origin: 50% 0; }
}
/* the smallest phones: the buttons on a row of their own under the rest */
@media (orientation: landscape) and (max-height: 520px) and (max-width: 740px) {
  #hdr { grid-template-columns: auto auto minmax(0, 1fr); grid-template-areas: "logo id strip" "logo ph strip" "go go go"; row-gap: 4px; }
}
/* one row (wider phones): the day's name is on its chip in the slider, so
   Next day drops its second line and the slider gets the room */
@media (orientation: landscape) and (max-height: 520px) and (min-width: 741px) {
  #hdr .hd-go .cbtn.hd-next small, #hdr .hd-go .cbtn.hd-next .sub-l { display: none; }
  #hdr .hd-go .cbtn.hd-next { max-width: 92px; }
}

/* ============================================================================
   GAME DAY, SIDEWAYS (owner, 2026-09-26): the game is the whole screen — no
   club bar, no sub-menu; one slim scoreboard strip pinned on top; the field
   fills the rest; the call window sits inside the field, under the strip,
   never over it. (The page is drawn at .8 zoom: heights are x1.25.)
============================================================================ */
@media (orientation: landscape) and (max-height: 520px) {
  body.in-game #hdr, body.in-game #subs, body.in-game #calbar { display: none !important; }
  body.in-game #app { grid-template-rows: minmax(0, 1fr); }
  body.in-game #app > main { grid-row: 1 / -1; padding-top: 4px !important; }
  body.in-game #app > main::after { height: 8px; }
  .gd-top { z-index: 30; margin: 0 0 4px; border-width: 1px; }
  .gd-top .sb-team { gap: 5px; padding: 1px 6px; }
  .gd-top .sb-lg.rm-crest { width: 24px; height: 24px; margin: 1px; }
  .gd-top .sb-lg.rm-crest img { width: 20px; height: 20px; }
  .gd-top .sb-ab { font-size: 17px; padding-top: 1px; }
  .gd-top .sb-pts { font-size: 26px; padding-top: 2px; }
  .gd-top .sb-poss { width: 13px; height: 8px; }
  .gd-top .sb-to i { width: 8px; height: 4px; }
  .gd-top .sb-mid { min-width: 96px; padding: 1px 8px; }
  .gd-top .sb-q { font-size: 18px; padding-top: 1px; }
  .gd-top .gd-sit { gap: 2px 8px; padding: 1px 4px 0 8px; }
  .gd-top .sit-poss { font-size: 9px; padding: 2px 5px 1px; }
  .gd-top .sit-big { font-size: 20px; padding-top: 1px; }
  .gd-top .ctl-b.rm-btn { margin: 2px; font-size: 14px; padding: 4px 8px 3px; }
  .gd-top .ctl-gear.rm-btn { padding: 3px 5px; }
  .gd-top .ctl-wait { font-size: 16px; }
  /* the field: everything under the strip */
  .gd-field-wrap { margin: 0 0 4px; }
  .gd-field { height: calc((100vh - 64px) * 1.25); height: calc((100dvh - 64px) * 1.25); min-height: 240px; }
  /* the field and the latest play side by side, both on the one screen
     (owner: "the sim field is too big, I can't see the latest play — it
     makes me scroll down"); the game's numbers stay below, for a scroll */
  body.in-game .gd:has(> .gd-field-wrap) { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); column-gap: 6px; align-items: start; }
  body.in-game .gd:has(> .gd-field-wrap) > * { grid-column: 1 / -1; }
  body.in-game .gd > .gd-top { grid-row: 1; }
  body.in-game .gd > .gd-field-wrap { grid-column: 1; grid-row: 2; }
  body.in-game .gd > .gd-mid { grid-column: 2; grid-row: 2; margin: 0; max-height: calc((100vh - 64px) * 1.25); max-height: calc((100dvh - 64px) * 1.25); overflow-y: auto; }
  .gd-call { inset: 6px; }
  .gd-call > .gd-dec { max-width: none; }
}
/* a smaller phone: the scoreboard takes two lines, the field gives them room */
@media (orientation: landscape) and (max-height: 520px) and (max-width: 700px) {
  .gd-field { height: calc((100vh - 92px) * 1.25); height: calc((100dvh - 92px) * 1.25); }
  body.in-game .gd > .gd-mid { max-height: calc((100vh - 92px) * 1.25); max-height: calc((100dvh - 92px) * 1.25); }
  .gd-call .dec-q { font-size: 18px; margin-bottom: 4px; }
  .gd-call .dec-opts { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 3px; }
}

/* a drilled-in page has the phone's own Back in the corner: the page's
   own Back button would be a second one (owner: "double back buttons") */
@media (orientation: landscape) and (max-height: 520px) {
  body.ph-drill .pf-back, body.ph-drill .pg-back { display: none !important; }
}