/* =====================================================================================
   gi.css — Holy Family Tigers GameImpact, visual layer
   Ported 2026-09-28 06:47 MDT from Rocky Mtn Fantasy College Football (rockymtnfantasy.com).
   Craig: "I want the website to look similar to RMF CFB fantasy site, only utilizing the HF
   and Tigers logos." This is a COPY of RMF's CSS, not a redesign.

   SOURCES (Spartan_www/RockyMtnFantasy/, md5 at port time)
     S1  Content/Snippets/custom-fantasy-skin-cfb.html    a2b11b78561c9fbd640042e7c5e24ef2
     S2  Content/Snippets/custom-fantasy-css.html         68b55ca4bc6b552f2864603c243bb53e
     S3  Content/Pages/fantasy/cfb/index.html             2c69619745e11d7a27ec90dec3420c02
     S4  Content/Pages/fantasy/cfb/players.html           369e4f1806e4b0d5ea6aff4a378a3878
     S5  Content/Snippets/custom-fcfb-core.html (markup)  6962ccbafbb72a3ca66009e448dd78bb
   Every block names the source lines it came from. Declarations are RMF's own, in RMF's
   order. The long RMF comments are condensed to a pointer; the reasoning lives there.

   CLASS NAMES. RMF's shared sheet lists every chrome selector twice, `.fwc-X, .fcfb-X`, one
   per game (S2:18-23, its "prefix bridge"), and says a new game adds its own prefix there.
   This port does exactly that with ONE prefix, `gi-`: .gi-nav .gi-brand .gi-logo-link
   .gi-logo .gi-menu-btn .gi-wrap .gi-foot .gi-foot-logo, and table.gi for table.fcfb.
   Every other class (.panel .ph .meta .nl .nl-dd .dd-menu .right .scorebar .sbar-in .scard
   .srow .st .wkg .linfo .pf .posbtns .tscroll .btn ...) and every page id (#nav #scorebar
   #wkPanel #infoPanel #playersTable) keeps its RMF name.

   DIFFERENCES from RMF are numbered D1..D28 in DESIGN-PORT.md and tagged [Dn] where they
   land. Anything not tagged is RMF's rule, byte for byte apart from the prefix.
   No underlines on any link or hover (house rule) — see [D19].
   ===================================================================================== */


/* ---------- 1. SKIN TOKENS — S1:20-274, only the tokens a ported rule reads ---------- */
:root {
  /* S1:22-25 app theme — light body, dark chrome */
  --bg:#eef0f4; --panel:#ffffff; --panel-2:#f1f3f7; --panel-3:#e4e8ef;
  --line:#d9dde5; --text:#1c1f26; --muted:#697080;
  --accent:#0b66c3; --green:#0a8a4d; --warn:#b96e00; --danger:#c0392b;
  --gold:#a97f00;
  /* S1:41 CFP trophy gold accent */
  --neon:#dfae35; --neon-dim:#b8862b; --on-bg:#e3e6ed;
  /* S1:51 black-to-charcoal chrome */
  --chrome:#3c4248; --chrome2:#0e161b;
  /* S1:66 — read only by the refresh glyph's hover (S2:368) */
  --commish:#9ce32e;

  /* S1:70-82 GRAPHICS — the page backdrop */
  --skin-page-bg:#0e161b;
  --skin-page-grad-a:#3c4248;
  --skin-page-grad-b:#161f24;
  /* [D3] HF's own page photo — the one holyfamilytigers.com/ already paints behind its home
     page (body:before, /img/all/HFsoftball-champs25.jpg, 2800x841). Replaces RMF's Folsom Field.
     No resize params: at 1440x900 `cover` needs ~3000px of width, so the original is used.
     HF has no separate phone crop, so -sm points at the same file (S1:79 kept as the hook). */
  --skin-wall-image:url('/img/all/HFsoftball-champs25.jpg');
  --skin-wall-image-sm:url('/img/all/HFsoftball-champs25.jpg');
  --skin-wall-tint-a:rgba(14,22,27,0.62);
  --skin-wall-tint-b:rgba(14,22,27,0.80);
  --skin-logo-tile:#161f24;

  /* S1:85-99 NAV BAR */
  --chrome-link:#c9ced4;
  --chrome-link-hover:#fff;
  --chrome-menu-on-bg:#dfae35;
  --chrome-menu-on-text:#20160a;
  --tab-on-text:#fff;
  /* S1:111-112 */
  --row-on-tint:#FFFFDE;
  --row-on-tint-hi:#FEFF9E;
  /* S1:127 */
  --pill-text:#fff;

  /* S1:163-166 functional UI (the two soft tints the standings/week chips read) */
  --tx-add-soft:#eafbf1;
  --tx-drop-soft:#fbeeec;
  --btn-gold-text:#222;
  /* S1:167-190 score ribbon */
  --sb-st:#5d6675;
  --sb-live-bg:#FEFFA6; --sb-live-line:#e6c200;
  --sb-live-sel-bg:#ffea61;
  --sb-done-bg:#ced3db; --sb-done-line:#d4d9e0;
  --sb-cur-bg:#dbeafe; --sb-cur-line:#60a5fa;

  /* S1:211-264 PANEL HEADER BANDS — CFP trophy gold plate */
  --ph-band-text:#fff;
  --ph-band-meta:#fff;
  --ph-band-edge:rgba(255,226,150,.34);
  --ph-band-top:rgba(255,244,208,.26);
  --ph-metal:linear-gradient(96deg,
      #e8c169 0%,   #cf9a30 8%,   #b8862b 20%,  #9c6f22 33%,  #7a5518 45%,
      #533a10 58%,  #32220a 70%,  #1a1104 82%,  #0a0701 92%,  #030200 100%);
  /* [D4] same plate file (md5 832b0db96dd442085502884cccd2bd98), new home on this site */
  --ph-sheet:url("/files/gameimpact/bg-gold-cfp.jpg");
  --ph-sheet-w:1400px;
  --ph-fade:linear-gradient(96deg,
      rgba(34,18,2,0) 0%,    rgba(34,18,2,0) 42%,   rgba(34,18,2,.12) 62%,
      rgba(34,18,2,.25) 82%, rgba(34,18,2,.36) 100%);
  --ph-plate:var(--ph-fade), var(--ph-sheet), var(--ph-metal);
  --ph-flare1:radial-gradient(150% 360% at 4% -95%,
      rgba(255,246,214,.34) 0%, rgba(255,230,168,.13) 34%, rgba(255,230,168,0) 66%);
  --ph-flare2:radial-gradient(165% 340% at 11% -95%,
      rgba(255,246,214,.34) 0%, rgba(255,230,168,.13) 34%, rgba(255,230,168,0) 66%);
  --ph-flare3:radial-gradient(155% 380% at 19% -95%,
      rgba(255,246,214,.34) 0%, rgba(255,230,168,.13) 34%, rgba(255,230,168,0) 66%);
  --ph-flare4:radial-gradient(175% 330% at 2% -95%,
      rgba(255,246,214,.34) 0%, rgba(255,230,168,.13) 34%, rgba(255,230,168,0) 66%);
  --ph-flare5:radial-gradient(145% 370% at 15% -95%,
      rgba(255,246,214,.34) 0%, rgba(255,230,168,.13) 34%, rgba(255,230,168,0) 66%);
  --ph-flare6:radial-gradient(160% 350% at 24% -95%,
      rgba(255,246,214,.34) 0%, rgba(255,230,168,.13) 34%, rgba(255,230,168,0) 66%);
}


/* ---------- 2. PAGE BASE + BACKDROP — S2:25-33, S2:42-52 ---------- */
* { box-sizing:border-box; -webkit-text-size-adjust:100%; }
html, body { width:100%; min-height:100%; }
body { margin:0; padding:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  background:var(--bg); color:var(--text); font-size:14px; }
a { color:var(--accent); text-decoration:none; }
html { background:var(--skin-page-bg) linear-gradient(165deg,var(--skin-page-grad-a) 0%,var(--skin-page-grad-b) 48%,var(--skin-page-bg) 100%) !important;
  background-attachment:fixed !important; min-height:100%;
  touch-action:pan-x pan-y; }
html::before {
  content:''; position:fixed; top:0; left:0; width:100vw; height:100vh;
  background-color:transparent;
  background-image:linear-gradient(var(--skin-wall-tint-a), var(--skin-wall-tint-b)), var(--skin-wall-image);
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center center;
  pointer-events:none;
  z-index:-2;
}
body { background:transparent !important; min-height:100vh; touch-action:pan-x pan-y; }
/* [D1] S2:53-64 (the Treepl template shell override: #wrapper, .billboard, .bgOverlay ...)
   is not ported — these pages use "Don't Use Template", so none of those elements exist. */

/* [D2] THE BASE RMF'S TEMPLATE SUPPLIES, MEASURED. The fantasy sheet never paints alone on RMF:
   it sits on the site template (ID Fonts -> Adobe Fonts kit ele8pxe), Bootstrap 5.1.3's reboot
   and the SST estate sheet, and those decide the face, size, weight and leading of anything the
   sheet leaves unsized. Measured headless on the live /fantasy/cfb/index + /players, 2026-09-28
   (tools/probe-base.mjs): body `urbane-rounded, Arial, Helvetica, sans-serif` 19.36px / 300 /
   line-height 1.3; buttons and inputs inherit that face; a text input renders 22px. These
   pages load none of those layers, so exactly those values are stated here and nothing else.
   Same specificity as the body rule above, later wins. shell.html loads the same font kit. */
body { font-family:'urbane-rounded', Arial, Helvetica, sans-serif; font-size:19.36px; font-weight:300; line-height:1.3; }
/* Bootstrap 5.1.3 reboot, verbatim — why RMF's buttons and inputs are in urbane-rounded */
button, input, optgroup, select, textarea { margin:0; font-family:inherit; font-size:inherit; line-height:inherit; }

/* [D5] THE BAND ABOVE THE BAR. On RMF this is the template's own `.nav-gap` spacer, measured a
   flat 50px at every width (S2:171-174); `.right` is positioned into it at top:-50px. There is
   no template here, so shell.html carries the spacer and this gives it the measured height. */
.gi-navgap { height:50px; }


/* ---------- 3. APP NAV — S2:78-201 ---------- */
.gi-nav{ background:linear-gradient(180deg,var(--chrome),var(--chrome2)); border-bottom:2px solid var(--neon-dim);
  position:sticky; top:0; z-index:50; }
.gi-nav .nav-in{ max-width:1800px; width:100%; margin:0 auto; padding:0 clamp(10px,1.6vw,28px);
  display:flex; align-items:center; gap:4px; flex-wrap:wrap; position:relative; }
.gi-brand{ display:flex; align-items:center; gap:8px; padding:8px 10px 8px 0; margin-right:8px; }
.gi-brand .gi-logo-link{ display:block; line-height:0; }
.gi-brand .gi-logo{ height:44px; width:auto; display:block; }
.gi-nav .links{ display:flex; gap:2px; flex-wrap:wrap; }
.gi-nav a.nl{ color:var(--chrome-link); padding:14px 12px; font-size:13px; font-weight:600; }
.gi-nav a.nl:hover{ color:var(--chrome-link-hover); }
/* S2:110-112 active page = solid gold block, text reversed out in the chrome */
.gi-nav a.nl.on{ color:var(--chrome); background:var(--neon); }
.gi-nav a.nl.on:hover{ color:var(--chrome); }
/* S2:120-162 dropdown (RMF: Teams / WEEK; here: Games) */
.gi-nav .nl-dd{ position:relative; display:inline-block; }
.gi-nav .nl-dd > a.nl{ display:block; }
.gi-nav .nl-dd .caret{ font-size:9px; opacity:.65; margin-left:3px; }
.gi-nav .dd-menu{ display:none; position:absolute; top:100%; left:0; min-width:210px; background:var(--panel);
  border:1px solid var(--line); border-radius:8px; box-shadow:0 12px 32px rgba(0,0,0,.35); padding:6px 0; z-index:70; }
.gi-nav .nl-dd.open .dd-menu{ display:block; }
/* S2:151-154 hover opens it too — desktop fine pointers only */
@media (min-width:821px) and (hover:hover) and (pointer:fine){
  .gi-nav .nl-dd:hover > .dd-menu{ display:block; }
  .gi-nav .nl-dd:hover > a.nl{ color:var(--chrome-link-hover); }
}
.gi-nav .nl-dd.open > a.nl{ color:var(--chrome-link-hover); }
.gi-nav .dd-menu a{ display:block; padding:9px 18px; font-size:13px; font-weight:500; color:var(--text); white-space:nowrap; }
.gi-nav .dd-menu a:hover{ background:var(--panel-2); }
.gi-nav .dd-menu a.on{ background:var(--chrome-menu-on-bg); color:var(--chrome-menu-on-text); }
/* [D12] S2:128-130 — a season has 24+ games, RMF's Teams menu had 17 rows. The menu scrolls
   inside itself instead of running off the bottom of a laptop screen. Desktop only: in the
   burger drawer (≤820) the menu is in-flow and the DRAWER scrolls it (D25). */
@media (min-width:821px){
  .gi-nav .dd-menu{ max-height:calc(100vh - 140px); overflow-y:auto; overscroll-behavior:contain; }
}
/* [D26] RMF has 7 tabs; this bar has 10 (Total and Roster added). Between 821 and 899 the ten no
   longer fit beside the logo at RMF's 12px sides, so the logo sat alone on a first row and the bar
   grew 62 -> 111px (measured 2026-09-28: 84 logo + 759 tabs against 795 available at 821). RMF's own
   phone-tier side padding (S2:597-601, 8px) is used across that band only; the bar height is RMF's. */
@media (min-width:821px) and (max-width:899px){
  .gi-nav a.nl{ padding:14px 8px; }
}
/* [D28] S2:193-201 .nav-auth — RMF's link in the band above the bar (its account link). Here it is
   the one way to the Sync page (how to keep stats current), which has no tab. */
.gi-nav .nav-auth{ color:var(--neon); font-size:12px; font-weight:600; letter-spacing:.4px; white-space:nowrap; }
.gi-nav .nav-auth:hover{ color:var(--chrome-link-hover); }
.gi-nav .nav-auth .fas{ font-size:11px; }
/* the page you are on: the hover color, held (RMF gives .nav-auth no active state; its tabs have one) */
.gi-nav .nav-auth.on{ color:var(--chrome-link-hover); }
/* S2:163-164 + S2:186-188 the right-hand row lives in the band above the bar */
.gi-nav .right{ margin-left:auto; display:flex; align-items:center; gap:8px; padding:8px 0; }
.gi-nav .nav-in .right{ position:absolute; left:0; right:0; top:-50px; height:50px;
  width:auto; margin:0; padding:0 clamp(10px,1.6vw,28px);
  justify-content:flex-end; align-items:center; }
@media (max-width:700px){
  .gi-nav .right{ margin-left:0; width:100%; justify-content:flex-start; padding-top:0; }
  /* S2:234 centered in the band on a phone */
  .gi-nav .nav-in .right{ justify-content:center; }
  /* S2:253 the bar sticks on a phone — the stick lives on #nav, the bar's wrapper */
  #nav:has(.gi-nav) { position:sticky; top:0; z-index:50; }
}
/* S2:264-293 mobile hamburger */
.gi-nav .gi-menu-btn{ display:none; margin-left:auto; align-items:center; justify-content:center;
  width:44px; height:44px; padding:0 !important; background:transparent !important; border:none !important;
  box-shadow:none !important; cursor:pointer; }
.gi-nav .gi-menu-btn .bars{ position:relative; }
.gi-nav .gi-menu-btn .bars,
.gi-nav .gi-menu-btn .bars::before,
.gi-nav .gi-menu-btn .bars::after{
  display:block; width:26px; height:3px; border-radius:2px; background:var(--neon);
  transition:transform .18s ease, top .18s ease, background .12s ease; }
.gi-nav .gi-menu-btn .bars::before,
.gi-nav .gi-menu-btn .bars::after{ content:""; position:absolute; left:0; }
.gi-nav .gi-menu-btn .bars::before{ top:-8px; }
.gi-nav .gi-menu-btn .bars::after{ top:8px; }
.gi-nav.menu-open .gi-menu-btn .bars{ background:transparent; }
.gi-nav.menu-open .gi-menu-btn .bars::before{ top:0; transform:rotate(45deg); }
.gi-nav.menu-open .gi-menu-btn .bars::after{ top:0; transform:rotate(-45deg); }
/* S2:295-323 links collapse into a full-width drawer under the bar */
@media (max-width:820px){
  .gi-nav .gi-menu-btn{ display:inline-flex; }
  .gi-nav .right{ width:100%; margin-left:0; justify-content:flex-start; }
  .gi-nav .links{ display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; flex-wrap:nowrap; gap:0; padding:6px 0; z-index:60;
    background:linear-gradient(180deg,var(--chrome),var(--chrome2));
    border-bottom:2px solid var(--neon-dim); box-shadow:0 16px 32px rgba(0,0,0,.42); }
  .gi-nav.menu-open .links{ display:flex; }
  .gi-nav .links a.nl{ padding:14px 24px; font-size:15px; }
  .gi-nav .links .nl-dd{ display:block; }
  .gi-nav .links .nl-dd > a.nl{ padding:14px 24px; }
  .gi-nav .links .nl-dd .dd-menu{ position:static; min-width:0; margin:0; padding:0; border:none;
    border-radius:0; box-shadow:none; background:rgba(255,255,255,.05); }
  .gi-nav .links .nl-dd .dd-menu a{ color:var(--chrome-link); padding:12px 38px; font-size:14px; }
  .gi-nav .links .nl-dd .dd-menu a:hover{ background:rgba(255,255,255,.08); color:var(--chrome-link-hover); }
  .gi-nav .links .nl-dd .dd-menu a.on{ background:var(--chrome-menu-on-bg); color:var(--chrome-menu-on-text); }
  /* [D25] RMF's drawer (S2:295-323) has no height cap. With the Games section open it holds 34 rows
     (~1500px), and at <=700 the bar is sticky (#nav, below), so the drawer is pinned and the page
     scrolls BEHIND it: games 8-24 could not be reached at 390x844. The drawer scrolls inside itself
     instead, capped to the window below the bar (120px = the 50px band + the bar, with room to spare
     while the band is still on screen). No overscroll seal: at its end the scroll hands on to the page. */
  .gi-nav .links{ max-height:calc(100vh - 120px); max-height:calc(100dvh - 120px); overflow-y:auto; -webkit-overflow-scrolling:touch; }
}
/* S2:324-389 the sync chip (feed status + refresh) and the refresh glyph beside it */
.sync-chip { display:inline-flex; align-items:center; gap:5px; padding:5px 10px; border-radius:12px;
  font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; border:1px solid var(--line); }
button.sync-chip { -webkit-appearance:none; appearance:none; background:none; margin:0;
  font-family:inherit; line-height:inherit; cursor:pointer; }
.gi-nav .pbx-refresh.pbx-sched-minibar-refresh {
  appearance:none; border:0; background:none;
  color:rgba(255,255,255,.72);
  font-size:18px;
  line-height:1;
  width:auto; height:auto;
  padding:0; margin:0;
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; flex:0 0 auto;
  transition:color .12s;
}
.gi-nav #syncStatus:hover + .pbx-refresh.pbx-sched-minibar-refresh,
.gi-nav .pbx-refresh.pbx-sched-minibar-refresh:hover { color:var(--commish); }
@keyframes pb2-busy-spin { to { transform:rotate(360deg); } }
.gi-nav .pbx-refresh.pbx-sched-minibar-refresh.pbx-spinning {
  animation:pb2-busy-spin .85s linear infinite; }
@media (prefers-reduced-motion:reduce) {
  .gi-nav .pbx-refresh.pbx-sched-minibar-refresh.pbx-spinning { animation-duration:2.4s; }
}
.sync-chip::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
/* [D27] RMF's chip is transparent over its dark stadium wall. HF's wall photo (D3) is bright where
   the band sits (chain-link fence): the green text measured 1.43-1.70:1 at 390 and 1.58:1 at 1024.
   The chip is filled with the wall's own base color (--skin-page-bg, the dark the photo is scrimmed
   toward), opaque, so it reads the same over any part of the photo at every width: 4.1:1, the level
   RMF's chip has on its own wall. Border, text and dot are RMF's. (An 80% scrim fill still let the
   bright fence through: 3.5:1, tools/verify-review-fixes.mjs.) */
.gi-nav .sync-chip { background:var(--skin-page-bg); }
.sync-syncing { color:var(--warn); border-color:var(--warn); }
.sync-live { color:var(--green); border-color:var(--green); }
.sync-offline { color:var(--danger); border-color:var(--danger); }
.sync-live::before { animation:fwcpulse 2s infinite; }
@keyframes fwcpulse { 0%,100%{opacity:1} 50%{opacity:.3} }


/* ---------- 4. LOADER — S2:390-412 + S1:557 (the HF mark pulses while data loads) ---------- */
@keyframes ldPulse { 0%,100%{ transform:scale(.98); } 50%{ transform:scale(1.05); } }
@keyframes ldDots { 0%{content:''} 25%{content:'.'} 50%{content:'..'} 75%,100%{content:'...'} }
@keyframes ldFade { from{ opacity:0; } to{ opacity:1; } }
.ld-wrap { padding:26px 16px 28px; text-align:center;
  background:radial-gradient(closest-side, rgba(255,255,255,.82), rgba(255,255,255,0) 80%);
  animation:ldFade .2s ease both; transition:opacity .2s ease; }
.ld-wrap.ld-fixed { position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); z-index:40;
  pointer-events:none; }
.ld-wrap.ld-out { opacity:0; }
.ld-grid { display:flex; flex-wrap:wrap; gap:20px; justify-content:center; align-items:center; }
.ld-logo { width:100px; height:100px; display:flex; align-items:center; justify-content:center;
  animation:ldPulse 1.25s ease-in-out infinite; }
.ld-logo img { max-width:100%; max-height:100%; object-fit:contain; }
.ld-logo.spartan { background:var(--skin-logo-tile); border-radius:16px; padding:14px; box-sizing:border-box; }
.ld-logo .ld-init { font-size:26px; font-weight:800; letter-spacing:1px; color:var(--muted); }
.ld-text { margin-top:18px; font-size:8px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); }
.ld-text::after { content:'...'; display:inline-block; width:1.6em; text-align:left; animation:ldDots 1.4s steps(1,end) infinite; }
/* S1:557 no glow behind the loader on this skin */
.ld-wrap.ld-wrap { background:none; }


/* ---------- 5. SHARED COMPONENTS — S2:414-450 ---------- */
.gi-wrap{ max-width:1800px; width:100%; margin:0 auto; padding:14px clamp(10px,1.6vw,28px) 80px; }
.panel { background:var(--panel); border:1px solid var(--line); border-radius:8px; }
.panel .ph { padding:10px 12px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:8px;
  font-size:12px; font-weight:700; color:var(--muted); letter-spacing:1px; text-transform:uppercase; }
.panel .ph .meta { margin-left:auto; font-weight:500; font-size:11px; text-transform:none; letter-spacing:0; }
.pbody { padding:10px 12px; }
table.gi { width:100%; border-collapse:collapse; }
table.gi th, table.gi td { padding:8px; text-align:left; border-bottom:1px solid var(--line); font-size:13px; }
table.gi th { background:var(--panel-2); color:var(--muted); font-size:11px; letter-spacing:.5px;
  text-transform:uppercase; font-weight:500; user-select:none; white-space:nowrap; }
table.gi th.sortable { cursor:pointer; }
table.gi th.sortable:hover { color:var(--text); }
table.gi th.s-asc::after { content:" ▲"; color:var(--accent); }
table.gi th.s-desc::after { content:" ▼"; color:var(--accent); }
table.gi td.num, table.gi th.num { text-align:right; font-variant-numeric:tabular-nums; }
table.gi tr:last-child td { border-bottom:none; }
table.gi th:first-child, table.gi td:first-child { padding-left:22px !important; }
table.gi th:last-child, table.gi td:last-child { padding-right:24px !important; }
table.gi tbody tr:hover td { background:var(--panel-2); }
/* S2:485-487 shared jersey card */
.jerseyno { display:inline-block; min-width:20px; padding:0 4px; box-sizing:border-box; text-align:center;
  font-size:10px; font-weight:500; border-radius:4px; line-height:16px; vertical-align:middle;
  border:1px solid rgba(0,0,0,.18); font-variant-numeric:tabular-nums; }
/* S2:501-504 a team's mark (35px, one place) */
.tmark { display:inline-flex; align-items:center; justify-content:center; width:35px; height:35px;
  font-size:12px; font-weight:700; vertical-align:middle; }
.tmark.has-img { width:35px; height:35px; }
.tmark img { width:100%; height:100%; object-fit:contain; display:block; }
/* S2:505-515 buttons + chip */
.btn { background:var(--panel-2); color:var(--text); border:1px solid var(--line); padding:7px 14px;
  border-radius:6px; font-size:13px; font-weight:600; cursor:pointer; }
.btn:hover { border-color:var(--accent); }
.btn.primary { background:var(--green); border-color:var(--green); color:var(--pill-text); }
.btn.primary:hover { filter:brightness(1.1); }
.btn.danger:hover { border-color:var(--danger); color:var(--danger); }
.btn.gold { background:var(--gold); border-color:var(--gold); color:var(--btn-gold-text); }
.btn:disabled { opacity:.35; cursor:not-allowed; }
.btn-sm { padding:4px 10px; font-size:11px; border-radius:12px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; }
.chip { display:inline-block; padding:3px 8px; border-radius:4px; background:var(--panel-2); color:var(--accent);
  font-size:11px; font-weight:500; letter-spacing:.5px; }
/* S2:529-533 */
.muted { color:var(--muted); } .green { color:var(--green); } .gold { color:var(--gold); } .danger { color:var(--danger); }
.tabs { display:flex; gap:4px; border-bottom:1px solid rgba(255,255,255,.22); padding:0 8px; }
.tabs .tab { padding:10px 14px; font-size:13px; font-weight:600; color:var(--on-bg); cursor:pointer;
  border-bottom:3px solid transparent; background:none; border-top:none; border-left:none; border-right:none; }
.tabs .tab.on { color:var(--tab-on-text); border-bottom-color:var(--neon); }
/* S2:534-541 + S1:580 modal */
.wmodal-bg { position:fixed; inset:0; background:rgba(0,0,0,.72); display:none; align-items:center;
  justify-content:center; z-index:100; padding:16px; }
.wmodal-bg.open { display:flex; }
.wmodal { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:20px;
  max-width:420px; width:100%; }
.wmodal h3 { margin:0 0 10px; font-size:16px; }
.wmodal-actions { display:flex; gap:10px; margin-top:16px; }
.wmodal-actions .btn { flex:1; }
.wmodal-bg.wmodal-bg { background:rgba(0,0,0,.88); }
/* S2:546-549 */
input[type=text], input[type=number], input[type=password], select, textarea {
  background:var(--panel-2); color:var(--text); border:1px solid var(--line); border-radius:4px;
  padding:6px 9px; font-size:13px; font-family:inherit; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--accent); }


/* ---------- 6. SCORE RIBBON — S2:550-596 (+ S1:398-410, S1:517-518) ---------- */
.scorebar { background:rgba(0,0,0,.18); border-bottom:1px solid rgba(255,255,255,.14); }
.scorebar .sbar-in { max-width:1800px; width:100%; margin:0 auto; padding:10px clamp(10px,1.6vw,28px);
  display:flex; gap:8px; overflow-x:auto; -webkit-overflow-scrolling:touch;
  -webkit-mask-image:linear-gradient(to right, rgba(0,0,0,0) 0, rgba(0,0,0,1) 72px, rgba(0,0,0,1) calc(100% - 72px), rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(to right, rgba(0,0,0,0) 0, rgba(0,0,0,1) 72px, rgba(0,0,0,1) calc(100% - 72px), rgba(0,0,0,0) 100%); }
.scorebar .sbar-in.at-start {
  -webkit-mask-image:linear-gradient(to right, rgba(0,0,0,1) calc(100% - 72px), rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(to right, rgba(0,0,0,1) calc(100% - 72px), rgba(0,0,0,0) 100%); }
.scorebar .sbar-in.at-end {
  -webkit-mask-image:linear-gradient(to right, rgba(0,0,0,0) 0, rgba(0,0,0,1) 72px);
  mask-image:linear-gradient(to right, rgba(0,0,0,0) 0, rgba(0,0,0,1) 72px); }
.scorebar .sbar-in.at-start.at-end { -webkit-mask-image:none; mask-image:none; }
.scard { min-width:148px; flex:0 0 auto; background:var(--panel) !important; border:1px solid var(--line);
  border-radius:6px; padding:7px 9px; font-size:12px; color:var(--text) !important; }
.scard .srow { display:flex; flex-wrap:nowrap; justify-content:space-between; align-items:center; gap:6px; padding:3px 0; }
.scard .st { color:var(--sb-st); font-size:10px; text-transform:uppercase; letter-spacing:.5px;
  display:flex; justify-content:space-between; margin-bottom:3px; gap:10px; }
.scard .st .live { color:var(--green); font-weight:800; }
.scard.live { background:var(--sb-live-bg) !important; border-color:var(--sb-live-line); }
.scard.done { background:var(--sb-done-bg) !important; border-color:var(--sb-done-line); }
.sbar-in.sb-smooth { scroll-behavior:smooth; }
.scard b.sc { font-variant-numeric:tabular-nums; }
/* S1:398-410 the chip for the game this page is showing (the game page sets .cur) */
.scard.cur { box-shadow:inset 0 0 0 2px var(--sb-cur-line); }
.scard.cur:not(.live):not(.done) { background:var(--sb-cur-bg) !important; border-color:var(--sb-cur-line); }
.scard.cur.live { background:var(--sb-live-sel-bg) !important; }
/* S1:517-518 chip header: date · time left, the right-hand label right */
.scard .st .sb-when { font-weight:500; }
.scard .st .sb-tv { font-weight:600; opacity:.8; white-space:nowrap; }
/* S2:597-601 */
@media (max-width:700px){
  .gi-wrap{ padding:10px 8px 60px; }
  .gi-nav a.nl{ padding:12px 8px; font-size:12px; } }


/* ---------- 7. SHELL NEUTRALIZER — S2:612-631 (it is also what gives buttons + inputs
   their rendered RMF size, so it is kept even though there is no Bootstrap shell here) ---------- */
.btn { padding:7px 14px !important; margin:0 !important; text-transform:none !important; box-shadow:none !important;
  font-size:13px !important; line-height:1.4 !important; border-radius:6px !important; display:inline-flex !important;
  align-items:center !important; justify-content:center; gap:4px; letter-spacing:0 !important; white-space:nowrap; }
.btn-sm { padding:4px 10px !important; font-size:11px !important; border-radius:12px !important;
  letter-spacing:.5px !important; text-transform:uppercase !important; }
.btn-xxs { padding:3px 9px !important; font-size:10px !important; font-weight:400 !important;
  text-transform:none !important; letter-spacing:0 !important; }
input[type=text], input[type=number], input[type=password], select {
  height:44px !important; min-height:0 !important; max-height:44px !important; line-height:1.3 !important;
  margin:0 !important; padding:5px 6px !important; border:1px solid var(--line) !important;
  background:var(--panel) !important; color:var(--text) !important; box-shadow:none !important;
  font-size:18px !important; font-family:inherit !important; box-sizing:border-box !important;
  border-radius:4px !important; display:inline-block !important; }
/* [D2] a text input renders 22px on RMF (the SST estate sheet's 1.25rem !important on a 17.6px
   root beats the 18px above there). Stated after it, same weight, so it wins on order here. */
input[type=text] { font-size:22px !important; }
textarea { margin:0 !important; padding:6px 9px !important; border:1px solid var(--line) !important;
  background:var(--panel) !important; color:var(--text) !important; box-shadow:none !important;
  font-size:13px !important; box-sizing:border-box !important; border-radius:4px !important; }
input[type=checkbox] { opacity:1 !important; position:static !important; pointer-events:auto !important;
  width:15px !important; height:15px !important; margin:0 4px 0 0 !important; appearance:auto !important; -webkit-appearance:checkbox !important; }
label { margin:0 !important; font-weight:inherit; }
h1,h2,h3 { letter-spacing:0; }
/* S2:634-641 font-weight diet [D17: selector list trimmed to the classes this site emits] */
b, strong { font-weight:600; }
.pname, .scard b.sc { font-weight:500 !important; }
.panel .ph { font-weight:600; }
.btn-sm { font-weight:700 !important; }


/* ---------- 8. GOLD WINDOW HEADERS — S1:290-343, S1:369-372 ---------- */
.panel .ph {
  color:var(--ph-band-text) !important;
  border:none !important;
  background-color:#1b1204;
  background-image:var(--ph-flare1), var(--ph-plate);
  background-repeat:no-repeat;
  background-size:100% 100%, 100% 100%, max(var(--ph-sheet-w), 100%) 100%, 100% 100%;
  box-shadow:inset 0 1px 0 var(--ph-band-top), inset 0 -1px 0 var(--ph-band-edge);
  text-shadow:none;
}
.panel .ph { margin:-1px -1px 0 -1px; border-radius:8px 8px 0 0; }
.panel .ph .meta { color:var(--ph-band-meta) !important; text-shadow:none; }
/* facet pickers — only where the key light lands changes */
.panel .ph.ph-b1, .panel .ph.ph-cband1 { background-image:var(--ph-flare1), var(--ph-plate); }
.panel .ph.ph-b2, .panel .ph.ph-cband2 { background-image:var(--ph-flare2), var(--ph-plate); }
.panel .ph.ph-b3, .panel .ph.ph-xi      { background-image:var(--ph-flare3), var(--ph-plate); }
.panel .ph.ph-b4, .panel .ph.ph-bench   { background-image:var(--ph-flare4), var(--ph-plate); }
.panel .ph.ph-b5, .panel .ph.ph-sched   { background-image:var(--ph-flare5), var(--ph-plate); }
.panel .ph.ph-b6, .panel .ph.ph-pool    { background-image:var(--ph-flare6), var(--ph-plate); }
/* S1:369-372 narrow headers take the smaller plate scale */
.panel { container-type:inline-size; }
@container (max-width: 700px) {
  .panel .ph { --ph-sheet-w:640px; }
}
/* S1:538 no rim on the windows */
.panel.panel { border:none; }
/* S1:543-545 a phone takes the phone crop of the wall */
@media (max-width:900px){
  :root { --skin-wall-image:var(--skin-wall-image-sm); }
}


/* ---------- 9. FOOTER — S1:599-616 (markup: S5:4990-5009) ---------- */
.gi-foot { background:linear-gradient(180deg,var(--chrome),var(--chrome2));
  border-top:2px solid var(--neon-dim); margin-top:28px;
  position:sticky; top:100vh; }
.gi-foot .foot-in { max-width:1400px; margin:0 auto; padding:18px 16px;
  display:flex; align-items:center; justify-content:center; }
.gi-foot .foot-logo-link { display:block; line-height:0; }
.gi-foot .gi-foot-logo { max-width:200px; width:100%; height:auto; display:block; }


/* ---------- 10. HOME LAYOUT — S3:13-36, S3:52-62 (main column + 320px rail) ---------- */
.home-grid { display:grid; grid-template-columns: 1fr 320px; gap:14px; align-items:start; }
@media (max-width:1280px){
  .home-grid { display:flex; flex-direction:column; gap:14px; align-items:stretch;
               grid-template-columns:1fr; }
  .home-rail { display:contents; }
  .home-grid > div { order:2; }
  #wkPanel   { order:1; margin-top:0 !important; }
  #infoPanel { order:3; margin-top:0 !important; }
}
@media (max-width:640px){ .home-rail { grid-template-columns:1fr; } }
.home-grid > div { min-width:0; }
@media (max-width:640px){
  .home-grid { display:flex; flex-direction:column; gap:14px; align-items:stretch; }
  .home-grid > div, .home-rail { display:contents; }
  .home-grid .panel { margin-top:0 !important; }
  #wkPanel { order:1; } #standPanel { order:2; } #infoPanel { order:5; }
}
/* S3:394-399 week chips + empty state */
.wk-strip { display:flex; gap:4px; flex-wrap:nowrap; }
.wk-chip { font-size:12px; padding:2px 7px; border-radius:4px; background:var(--panel-3); color:var(--muted);
  font-variant-numeric:tabular-nums; }
.wk-chip.w { background:var(--tx-add-soft); color:var(--green); font-weight:700; }
.wk-chip.l { background:var(--tx-drop-soft); color:var(--danger); }
.hist-empty { padding:26px 22px; text-align:center; color:var(--muted); font-size:14px; }

/* S3:401-486 rail: This Week — the rail form of the card [D14: the ≤1280 head-to-head form,
   S3:579-744, is not ported; the rail form is used at every width] */
.wkg { display:block; position:relative; color:inherit; text-decoration:none; border:1px solid var(--line);
  border-radius:8px; padding:8px 10px; margin-bottom:8px; background:var(--panel); }
.wkg:hover { border-color:var(--green); }
.wkg:hover .nm { color:var(--green); }
.wkg:hover .wr:not(.lead) b { color:var(--green); }
.wkg:nth-child(even) { background:var(--panel-2); }
.wkg.mine, .wkg.mine:nth-child(even) { background:var(--row-on-tint); }
.wkg.mine:hover { background:var(--row-on-tint-hi); }
.wkg .wr { display:flex; justify-content:flex-start; align-items:center; gap:8px; padding:3px 0; font-size:14px; }
.wkg .nm { color:var(--muted); }
.wkg .wr b { font-variant-numeric:tabular-nums; font-size:15px; color:var(--muted); }
.wkg .wr.lead b { color:var(--gold); }
.wkg .wr .nm { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:0 1 auto;
  min-width:0; font-weight:700; }
.wkg .wr .rec { flex:0 0 auto; font-size:12px; color:var(--muted);
  font-variant-numeric:tabular-nums; white-space:nowrap; }
.wk-final { position:absolute; right:60px; top:50%; transform:translateY(-50%);
  font-size:15px; font-weight:300; line-height:1; pointer-events:none;
  color:color-mix(in srgb, var(--muted) 50%, transparent); }
.wkg .wr .rec:last-of-type { margin-right:auto; }
.wk-cap { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:1px; margin-bottom:8px; }

/* S3:748-756 rail: League Info as a real table */
table.linfo { width:100%; border-collapse:collapse; }
table.linfo th, table.linfo td { padding:7px 14px; font-size:13px; border-bottom:1px solid var(--line);
  text-align:left; vertical-align:middle; }
table.linfo th { color:var(--muted); font-weight:500; text-transform:uppercase; font-size:10.5px;
  letter-spacing:.6px; white-space:nowrap; width:1px; background:none; }
table.linfo td { text-align:right; font-weight:400; color:var(--text); font-variant-numeric:tabular-nums; }
table.linfo tr:last-child th, table.linfo tr:last-child td { border-bottom:none; }
.linfo-name { padding:10px 14px 8px; font-size:15px; font-weight:700; }
/* [D15] the LAST 5 chips sit right-aligned in a League Info value cell (S3 shows them in a
   standings column, centered); only the alignment is stated here. */
table.linfo td .wk-strip { justify-content:flex-end; }


/* ---------- 11. PLAYER TABLE + FILTER ROW — S4:19-85, S4:399-425 ---------- */
.pf { display:flex; gap:8px; padding:8px 10px; border-bottom:1px solid var(--line); align-items:center; flex-wrap:wrap; }
.pf input[type=text]{ width:180px; }
.pf #posBtns { margin-right:10px; }
/* S4:39-45 row hover — subtle blue, opaque */
#playersTable { --row-hover:#e4eef8; }
#playersTable tbody tr:hover td,
#playersTable tbody tr:hover td:nth-child(1),
#playersTable tbody tr:hover td:nth-child(2),
#playersTable tbody tr:hover td:nth-child(3),
#playersTable tbody tr:hover td:nth-child(4) { background:var(--row-hover) !important; }
/* S4:58-64 the segmented group side-scrolls instead of running past the panel edge */
.pf .posbtns { min-width:0; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.pf .posbtns::-webkit-scrollbar { display:none; }
.pf .posbtns button { flex:0 0 auto; }
.pf .fsel { display:flex; align-items:center; gap:8px; flex:0 1 auto; min-width:0; flex-wrap:wrap; }
@media (max-width:560px){ .pf .fsel { flex:1 1 100%; flex-wrap:nowrap; } }
/* S4:71-75 SEARCH / CLEAR toggle label [D19: its hover underline dropped] */
.q-toggle { font-size:12px; font-weight:400; letter-spacing:.6px; color:var(--muted); user-select:none;
  align-self:center; cursor:default; }
.q-toggle.clear { cursor:pointer; color:var(--accent); }
.pname { font-weight:500; font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#playersTable td { vertical-align:middle; }
#playersTable td.num { font-size:15px; }
/* S4:399-415 segmented single-select group: attached buttons, light-gray resting, blue active */
.posbtns { display:flex; gap:3px; align-items:center; }
.posbtns button { background:#e8ebef; border:1px solid var(--line); color:var(--muted); font-size:12px;
  font-weight:700; height:44px; padding:0 13px; border-radius:6px; cursor:pointer; line-height:1;
  display:inline-flex; align-items:center; margin:0 !important; }
.posbtns { gap:0; }
.posbtns button { border-radius:0; margin-left:-1px; }
.posbtns button:first-child { border-radius:6px 0 0 6px; margin-left:0; }
.posbtns button:last-child { border-radius:0 6px 6px 0; }
.posbtns button.on { background:var(--accent); border-color:var(--accent); color:#fff; position:relative; z-index:1; }
@media (max-width:560px){
  .posbtns button { padding:0 7px; font-size:11px; }
}
/* S4:424-426 */
.tscroll { overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; }
.gi-wrap .panel { min-width:0; }
@media (max-width:880px){ body { overflow-x:hidden; } }
/* S4:471 first column (RMF: rank; here: jersey) centered */
#playersTable th:nth-child(1), #playersTable td:nth-child(1) { text-align:center !important; }