/* Farmington Tigers — one stylesheet for every Tigers page.
 *
 * This file and farmington.js are served no-cache. That is not fussiness:
 * _headers caches /*.css and /*.js for an hour while HTML is no-cache, so a
 * deploy would otherwise serve NEW HTML against an OLD script and the site
 * would break for anyone who had loaded it in the past hour. The two override
 * blocks at the BOTTOM of _headers are what prevent that — Netlify serves the
 * last matching rule, so they have to stay below the wildcards.
 *
 * The orange is sampled from the Tigers logo itself (#F68220), not the lighter
 * #FFA500 the teams table carries. It clears 8:1 against black and only 2.6:1
 * against white, which decides how it is allowed to be used here: orange is a
 * surface and an accent, never body text on white. Anything sitting ON orange
 * is near-black; orange type only appears on the dark bar.
 */

:root{
  --ft-orange:#F68220;
  --ft-orange-dk:#D96B12;
  --ft-orange-soft:#FEF3E8;
  --ft-course-row:#FFFBEC;  /* the matches under a course heading */
  --ft-course-hover:#FDF4D8;
  --ft-black:#000;          /* the wordmark is a JPEG with black baked in, so
                               the header has to be the same black or the logo
                               reads as a visible rectangle */
  --ft-ink:#141414;
  --ft-ink-2:#4a4a4a;
  --ft-ink-3:#7a7a7a;
  --ft-line:#e4e4e4;
  --ft-line-2:#f2f2f2;
  --ft-bg:#f6f6f6;
  --ft-card:#fff;
  --ft-win:#1b7f3b;
  --ft-loss:#b3261e;
  --ft-radius:10px;
  --ft-shadow:0 1px 3px rgba(0,0,0,.08);
  --ft-shadow-lift:0 6px 18px rgba(0,0,0,.12);
  --ft-header-h:60px;

  /* Every surface colour the rules below use, named, so the phone theme under
     this block can swap them in one place instead of chasing literals. */
  --ft-accent:var(--ft-orange-dk);  /* orange as TEXT — the darker one on white */
  --ft-card-head:#fbfbfb;
  --ft-tray:#ececec;                 /* the recessed pill box */
  --ft-pill-on:var(--ft-card);
  --ft-pill-hover:rgba(255,255,255,.6);
  --ft-th:#ececec;                   /* table header row */
  --ft-row-hover:#fcfcfc;
  --ft-hover:#f3f3f3;                /* quiet and ghost buttons */
  --ft-field:#fff;                   /* inputs and the score-entry game list */
  --ft-us-hover:#fdecd9;
  --ft-bar:var(--ft-ink);            /* the dark bar over standings and schedule */
  --ft-streak-bg:#efefef;
  --ft-win-bg:rgba(27,127,59,.13);
  --ft-loss-bg:rgba(179,38,30,.13);
  --ft-err-bg:#fdf2f1;
  --ft-err-line:#f3c9c5;
}

/* ── Phone theme ──────────────────────────────────────────────────────────
   Dark on a phone, light on a desktop, whatever the OS is set to — the way
   Ball603 does it. The surfaces are Ball603's own mobile values (#0d0d0d page,
   #1e1e1e cards, #333 lines) so moving between the two sites on a phone does
   not flash from one black to another.

   760px, not Ball603's 768: this is where the Tigers layout already turns into
   the phone layout, and a desktop layout in phone colours for eight pixels is
   nobody's idea of a design.

   Two deliberate departures from Ball603's numbers, both for legibility:
     - muted text is #9a9a9a, not #707070. #707070 is 3.4:1 on a card and 3.1:1
       on a table header; #9a9a9a clears 4.5:1 on both.
     - orange as text is the logo orange. The darker #D96B12 exists to be
       readable on white, and on #1e1e1e it is the dimmer of the two.
   Anything already dark — header, ticker, drawer, banner — was built dark and
   does not appear here. */
@media (max-width:760px){
  :root{
    color-scheme:dark;               /* native selects, checkboxes, scrollbars */
    --ft-bg:#0d0d0d;
    --ft-card:#1e1e1e;
    --ft-ink:#fff;
    --ft-ink-2:#b0b0b0;
    --ft-ink-3:#9a9a9a;
    --ft-line:#333;
    --ft-line-2:#2a2a2a;
    --ft-orange-soft:#3d2a00;        /* Ball603's --brand-orange-dark */
    --ft-course-row:#241a02;         /* the same idea one step back from the heading */
    --ft-course-hover:#30230a;
    --ft-win:#8bd694;                /* the same pair the black bar already uses */
    --ft-loss:#f2938c;
    --ft-shadow:0 1px 3px rgba(0,0,0,.3);
    --ft-shadow-lift:0 6px 18px rgba(0,0,0,.5);

    --ft-accent:var(--ft-orange);
    --ft-card-head:#1a1a1a;
    --ft-tray:#262626;
    --ft-pill-on:#353535;
    --ft-pill-hover:rgba(255,255,255,.06);
    --ft-th:#262626;
    --ft-row-hover:#242424;
    --ft-hover:#2a2a2a;
    --ft-field:#141414;
    --ft-us-hover:#4a3300;
    --ft-bar:#000;                   /* ink turns white here, so the bar cannot follow it */
    --ft-streak-bg:#2a2a2a;
    --ft-win-bg:rgba(76,175,80,.2);
    --ft-loss-bg:rgba(244,67,54,.2);
    --ft-err-bg:#2b1412;
    --ft-err-line:#5c2621;
  }
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
/* The page itself never scrolls sideways. Anything too wide for a phone — and
   on this site that means tables — gets its own horizontal scroll rather than
   dragging the whole layout with it. */
html,body{overflow-x:hidden;max-width:100%}
body{
  margin:0;background:var(--ft-bg);color:var(--ft-ink);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:15px;line-height:1.45;
}
a{color:inherit}
img{max-width:100%}
h1,h2,h3,h4{letter-spacing:-.3px}

/* ── Header ───────────────────────────────────────────────────────────────
   Mirrors Ball603's: dark sticky bar, orange hairline underneath, logo left,
   nav beside it, socials right. */

.ft-header{
  background:var(--ft-black);position:sticky;top:0;z-index:1000;
  box-shadow:0 2px 8px rgba(0,0,0,.3);border-bottom:1px solid var(--ft-orange);
}
.ft-header-inner{
  display:flex;align-items:center;height:var(--ft-header-h);
  padding:0 20px;max-width:1400px;margin:0 auto;gap:8px;
}
.ft-logo{flex:none;margin-right:26px;display:flex;align-items:center}
.ft-logo img{height:48px;width:auto;max-width:230px;display:block}
.ft-logo-text{color:var(--ft-orange);font-weight:800;letter-spacing:.5px;font-size:16px}

.ft-nav{display:flex;align-items:center;height:100%;gap:2px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.ft-nav::-webkit-scrollbar{display:none}
.ft-navlink{
  color:rgba(255,255,255,.72);font-size:14px;font-weight:400;text-decoration:none;
  padding:0 15px;height:100%;display:flex;align-items:center;white-space:nowrap;
  border-bottom:3px solid transparent;transition:color .15s,border-color .15s;
}
.ft-navlink:hover{color:#fff}
.ft-navlink.on{color:#fff;border-bottom-color:var(--ft-orange)}

.ft-header-right{display:flex;align-items:center;gap:6px;flex:none}
/* Bare marks, no disc behind them. */
.ft-social{
  width:28px;height:28px;display:flex;align-items:center;justify-content:center;
  transition:opacity .15s;
}
.ft-social:hover{opacity:.7}
.ft-social svg{width:16px;height:16px;fill:rgba(255,255,255,.8)}
.ft-social:hover svg{fill:var(--ft-orange)}

/* Share and My Teams, in the order Ball603 has them: share, then the star,
   then the menu. Bare icons — no disc behind them. */
.ft-iconbtn{
  appearance:none;border:0;background:none;color:rgba(255,255,255,.8);
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;padding:0;transition:color .15s;
}
.ft-iconbtn svg{width:18px;height:18px}
/* Star plus wordmark. The label goes on a phone — see the mobile block — and
   the drawer carries it there instead. */
.ft-starbtn{width:auto;gap:7px;padding:0 8px}
.ft-starbtn-label{
  font-size:12px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;white-space:nowrap;
}
.ft-iconbtn:hover{color:var(--ft-orange)}
.ft-iconbtn.on{color:var(--ft-orange)}
.ft-iconbtn.ft-copied{color:var(--ft-orange)}
.ft-iconbtn.ft-copied::after{
  content:'Link copied';position:absolute;margin-top:56px;background:#222;color:#fff;
  font-size:11px;padding:5px 9px;border-radius:5px;white-space:nowrap;
}

/* The hamburger, to the right of the star. Hidden on a screen wide enough for
   the nav row; it and .ft-nav are never both on show. */
.ft-burger{
  display:none;appearance:none;border:0;background:none;width:32px;height:32px;
  cursor:pointer;padding:0;margin-left:2px;
  flex-direction:column;align-items:center;justify-content:center;gap:4px;
}
.ft-burger span{display:block;width:19px;height:2px;background:rgba(255,255,255,.85);border-radius:2px;transition:transform .2s,opacity .15s}
.ft-burger.on span{background:var(--ft-orange)}
.ft-burger.on span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.ft-burger.on span:nth-child(2){opacity:0}
.ft-burger.on span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}


/* Both side panels slide in from the right, the way Ball603's menu does. They
   are always in the DOM and moved off-screen, so opening one animates rather
   than appearing. */
.ft-drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(300px,84vw);z-index:1400;
  background:#0b0b0b;
  transform:translateX(100%);transition:transform .22s ease,visibility .22s;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  /* Off-screen is not the same as gone: a panel parked past the right edge
     still takes keyboard focus and still answers a screen reader, so somebody
     tabbing through the page would walk into a menu they never opened. */
  visibility:hidden;
}
.ft-drawer.on{visibility:visible;transform:translateX(0)}

.ft-veil-nav{
  position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1300;
  opacity:0;pointer-events:none;transition:opacity .22s;
}
.ft-veil-nav.on{opacity:1;pointer-events:auto}
body.ft-locked{overflow:hidden}

.ft-drawer-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:15px 18px;border-bottom:1px solid #1c1c1c;
  font-weight:800;font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:#8a8a8a;
}
.ft-drawer-close{
  appearance:none;border:0;background:none;color:inherit;font-size:24px;line-height:1;
  cursor:pointer;padding:0 2px;
}
.ft-drawer-close:hover{color:var(--ft-orange)}

.ft-drawerlink{
  display:block;width:100%;box-sizing:border-box;text-align:left;
  appearance:none;border:0;background:none;font-family:inherit;cursor:pointer;
  color:rgba(255,255,255,.8);text-decoration:none;
  font-size:15px;font-weight:400;padding:14px 20px;border-bottom:1px solid #1c1c1c;
}
/* My Teams at the foot of the drawer. The star's label lives here on a phone,
   where the bar itself has no room for it. */
.ft-drawerstar{display:flex;align-items:center;gap:10px;color:var(--ft-orange);border-top:1px solid #1c1c1c}
.ft-drawerstar .ft-star-icon{width:17px;height:17px;flex:none}
.ft-drawerlink:last-child{border-bottom:0}
/* The hidden attribute loses to any display rule, and .ft-drawerstar sets one —
   which left Install App on show in every menu, the installed app included. */
.ft-drawerlink[hidden]{display:none}
/* Set apart from the fan links above it: it is a tool, not a page to browse.
   Pinned to the foot of the panel rather than the foot of the list — the
   drawer is a column and this one row takes up all the slack above it — and
   dimmed right down, so it is there for the scorekeeper who knows to look and
   out of the way for everyone else. The padding clears the iPhone's home bar. */
.ft-drawer{display:flex;flex-direction:column}
.ft-drawer > *{flex:none}
.ft-drawer .ft-drawerscore{
  margin-top:auto;border-top:1px solid #1c1c1c;border-bottom:0;
  color:#666;font-size:13px;
  padding-bottom:calc(16px + env(safe-area-inset-bottom));
}
.ft-drawer .ft-drawerscore:hover{color:#999}
.ft-drawerlink.on{color:var(--ft-orange);box-shadow:inset 3px 0 0 var(--ft-orange)}

/* ── Pull to refresh ────────────────────────────────────────────────────── */
/* Parked just above the top of the screen and moved down by the drag. Only ever
   visible inside the installed app on iOS, which is the only place the gesture
   is missing — see setupPullToRefresh. */
.ft-pull{
  position:fixed;top:calc(var(--ft-header-h) - 34px);left:50%;
  transform:translate(-50%,0);
  width:34px;height:34px;border-radius:50%;
  background:var(--ft-card);color:var(--ft-orange);
  box-shadow:0 2px 10px rgba(0,0,0,.22);
  display:flex;align-items:center;justify-content:center;
  z-index:900;opacity:0;pointer-events:none;
}
.ft-pull svg{width:19px;height:19px;transform:rotate(var(--ft-pull-turn,0deg))}
/* The drag itself must track the finger exactly, so the transition is only on
   while it is springing back or settling into the spin. */
.ft-pull-easing{transition:transform .22s ease,opacity .22s ease}
.ft-pull-ready{color:var(--ft-accent)}
.ft-pull-busy svg{animation:ft-pull-spin .8s linear infinite;transform:none}
@keyframes ft-pull-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .ft-pull-busy svg{animation-duration:2.4s}
  .ft-pull-easing{transition:none}
}
/* Stops iOS rubber-banding the page behind the spinner mid-drag. Applied by the
   script, so it is never on where the gesture is not. */
body.ft-can-pull{overscroll-behavior-y:contain}

/* ── My Teams ───────────────────────────────────────────────────────────── */
/* A centred modal, the way Ball603 asks the same question: a short explanation,
   a search box, the list, and the two buttons that end it. Nothing is written
   until Save is pressed. */
.ft-modal-veil{
  position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:1500;
  opacity:0;pointer-events:none;transition:opacity .18s;
}
.ft-modal-veil.on{opacity:1;pointer-events:auto}
.ft-modal{
  position:fixed;z-index:1510;left:50%;top:50%;
  transform:translate(-50%,-50%) scale(.97);
  width:min(460px,calc(100vw - 28px));max-height:min(86vh,720px);
  background:var(--ft-card);border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.35);
  display:flex;flex-direction:column;overflow:hidden;
  /* Hidden rather than merely transparent: a dialog that is only invisible is
     still in the tab order, and somebody keyboarding down the page walks into
     a list of checkboxes with nothing to say why. */
  opacity:0;visibility:hidden;transition:opacity .18s,transform .18s,visibility .18s;
}
.ft-modal.on{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1)}

.ft-modal-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 18px;border-bottom:1px solid var(--ft-line);flex:none;
}
.ft-modal-star{display:flex;color:var(--ft-orange)}
.ft-modal-star .ft-star-icon{width:24px;height:24px;fill:var(--ft-orange)}
.ft-modal-close{
  appearance:none;border:0;background:none;color:var(--ft-ink-2);
  font-size:26px;line-height:1;cursor:pointer;padding:0 2px;
}
.ft-modal-close:hover{color:var(--ft-ink)}

.ft-modal-body{padding:16px 18px;overflow:auto;flex:1;min-height:0}
.ft-modal-intro{margin:0 0 16px;color:var(--ft-ink-2);font-size:14.5px;line-height:1.5}
.ft-modal-label{
  margin:0 0 8px;font-size:11px;font-weight:700;letter-spacing:1.1px;
  text-transform:uppercase;color:var(--ft-ink-3);
}

.ft-modal-search{position:relative;margin-bottom:12px}
.ft-modal-search svg{
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  width:17px;height:17px;color:var(--ft-ink-3);pointer-events:none;
}
.ft-modal-search input{
  width:100%;box-sizing:border-box;appearance:none;
  border:1px solid var(--ft-line);border-radius:10px;background:var(--ft-card);
  padding:12px 12px 12px 38px;font-size:15px;color:var(--ft-ink);font-family:inherit;
}
.ft-modal-search input:focus{outline:2px solid var(--ft-orange);outline-offset:-1px;border-color:var(--ft-orange)}

.ft-modal-list{
  border:1px solid var(--ft-line);border-radius:10px;
  max-height:46vh;overflow:auto;-webkit-overflow-scrolling:touch;
}
/* One heading per sport, sticky so you can still see which sport you are in
   after scrolling into a long list. */
.ft-mgroup[hidden]{display:none}
.ft-mgroup-head{
  position:sticky;top:0;z-index:1;
  display:flex;align-items:center;gap:8px;
  background:var(--ft-line-2);border-bottom:1px solid var(--ft-line);
  padding:8px 14px;font-size:11px;font-weight:700;letter-spacing:1px;
  text-transform:uppercase;color:var(--ft-ink-2);
}
.ft-mgroup-head span{font-size:14px;letter-spacing:0}

.ft-mrow{
  display:flex;align-items:center;gap:12px;padding:12px 14px 12px 20px;cursor:pointer;
  border-bottom:1px solid var(--ft-line-2);font-size:15px;color:var(--ft-ink);
}
.ft-mgroup:last-child .ft-mrow:last-child{border-bottom:0}
.ft-mrow:hover{background:var(--ft-line-2)}
.ft-mrow[hidden]{display:none}
.ft-mrow-name{flex:1;min-width:0}
/* A real checkbox, so it reads as one to a screen reader and to a thumb. */
.ft-mrow input{
  appearance:none;flex:none;width:22px;height:22px;margin:0;cursor:pointer;
  border:2px solid var(--ft-line);border-radius:6px;background:var(--ft-card);
  transition:background .15s,border-color .15s;
}
.ft-mrow input:checked{background:var(--ft-orange);border-color:var(--ft-orange)}
.ft-mrow input:checked::after{
  content:'';display:block;width:6px;height:11px;margin:1px auto 0;
  border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg);
}
.ft-mrow input:focus-visible{outline:2px solid var(--ft-orange);outline-offset:2px}
.ft-mrow-none{padding:18px}

.ft-modal-foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 18px;border-top:1px solid var(--ft-line);flex:none;
}
/* The shared button is full-width with a margin above it, which is right inside
   a form and wrong in a footer holding two. */
.ft-modal-foot .ft-btn{width:auto;margin-top:0}
/* Doubled up on .ft-btn deliberately: the shared button is defined further down
   this file, and a single class here would lose to it on source order alone. */
.ft-btn.ft-btn-quiet{background:transparent;color:var(--ft-ink-2);border:1px solid var(--ft-line)}
.ft-btn.ft-btn-quiet:hover{background:var(--ft-hover);color:var(--ft-ink)}
.ft-btn.ft-btn-go{background:var(--ft-orange);color:#fff}
.ft-btn.ft-btn-go:hover{background:var(--ft-orange-dk);color:#fff}
.ft-btn.ft-btn-wide{width:100%;margin-top:14px}

/* ── Adding the app ─────────────────────────────────────────────────────── */
/* The how-to sheet, on the same modal chassis as My Teams. */
.ft-howto-icon{width:42px;height:42px;border-radius:10px}
.ft-howto-title{margin:0 0 10px;font-size:18px}
.ft-howto-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
/* The number is a fixed disc; everything else is one run of text that wraps as
   a sentence. The share glyph sits INSIDE that text rather than beside it — as
   its own flex child it broke the line in two and left "Share button at the
   bottom of Safari" stranded under "Tap the". */
.ft-howto-steps li{
  display:flex;align-items:flex-start;gap:10px;
  font-size:15px;line-height:1.5;color:var(--ft-ink);
}
.ft-howto-num{
  flex:none;width:24px;height:24px;border-radius:50%;background:var(--ft-orange);color:#fff;
  font-size:13px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;
  margin-top:1px;
}
.ft-howto-text{flex:1;min-width:0}
.ft-howto-steps svg{
  width:18px;height:18px;color:var(--ft-orange);
  display:inline-block;vertical-align:-4px;margin:0 1px;
}
.ft-howto-foot{justify-content:flex-end}

/* The banner. Above everything but the panels, and out of the way of an iPhone's
   home indicator. */
.ft-install-banner{
  position:fixed;left:0;right:0;bottom:0;z-index:1450;
  display:flex;align-items:center;gap:13px;
  padding:13px 16px calc(13px + env(safe-area-inset-bottom));
  background:#111;border-top:1px solid var(--ft-orange);
  box-shadow:0 -6px 20px rgba(0,0,0,.35);
  animation:ft-banner-up .35s ease both .8s;
}
.ft-install-banner[hidden]{display:none}
@keyframes ft-banner-up{from{transform:translateY(100%)}to{transform:translateY(0)}}
/* Somebody who has asked not to be animated at is not asking for a slide-up. */
@media (prefers-reduced-motion:reduce){ .ft-install-banner{animation:none} }
.ft-install-banner img{width:42px;height:42px;border-radius:10px;flex:none;background:#fff}
.ft-install-copy{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.ft-install-copy b{color:#fff;font-size:14px}
.ft-install-copy span{color:rgba(255,255,255,.65);font-size:12.5px;line-height:1.35}
.ft-install-actions{display:flex;flex-direction:column;align-items:stretch;gap:5px;flex:none}
.ft-install-banner .ft-btn{width:auto;margin:0;padding:9px 16px;font-size:14px}
.ft-banner-dismiss{
  appearance:none;border:0;background:none;color:rgba(255,255,255,.55);
  font-size:12px;cursor:pointer;padding:2px;font-family:inherit;
}
.ft-banner-dismiss:hover{color:#fff}

/* The home page card: what has been chosen, and the button that changes it. */
.ft-favnote{margin:0 0 10px}
.ft-favchips{display:flex;flex-wrap:wrap;gap:7px}
.ft-favchip{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--ft-line-2);border-radius:999px;padding:7px 13px;
  font-size:13.5px;color:var(--ft-ink);
}
.ft-favchip::before{content:'\2605';color:var(--ft-orange);font-size:13px;line-height:1}
.ft-favempty{padding:6px 0 2px;text-align:left}
.ft-fav-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── Quick links (phone only) ─────────────────────────────────────────────
   SCHEDULE, STANDINGS and (room permitting) PHOTOS as small boxes under the
   ticker. Desktop has them in the header already, so this row never shows there. */
.ft-quick{display:none}
@media (max-width:760px){
  /* Four of them now, so the row is tighter than it was: smaller type, less
     letter-spacing and narrower boxes. Four at these sizes fit a 390px phone
     with room over; on anything narrower fitQuickLinks drops Photos. */
  .ft-quick{display:flex;flex-wrap:nowrap;justify-content:center;gap:5px;padding:12px 12px 2px;background:var(--ft-bg);overflow:hidden}
  .ft-quicklink{
    flex:none;display:flex;align-items:center;justify-content:center;min-height:34px;padding:0 9px;
    border:1px solid var(--ft-line);border-radius:6px;background:var(--ft-card);white-space:nowrap;
    color:#fff;text-decoration:none;font-weight:800;font-size:11px;letter-spacing:.6px;text-transform:uppercase;
  }
  .ft-quicklink[hidden]{display:none}
  .ft-quicklink:active{background:var(--ft-hover)}
}

/* ── Ticker ───────────────────────────────────────────────────────────────
   Under the header, the way Ball603 carries one. Only rendered at all when
   there is a game either side of today, so it is never a strip saying nothing
   is happening. */

.ft-ticker{background:#111;border-bottom:1px solid #262626}
.ft-ticker-inner{display:flex;align-items:stretch;max-width:1400px;margin:0 auto;min-width:0}

/* SCORES, as on the Ball603 home page: a solid orange block at the left end
   with the arrow tucked straight up against it. */
/* Turned on its side, reading bottom-to-top, in white — the block is narrow
   now, so the word runs up it rather than across. */
.ft-ticker-label{
  flex:none;display:flex;align-items:center;justify-content:center;
  padding:0;width:30px;background:var(--ft-orange);color:#fff;
}
.ft-ticker-label span{
  transform:rotate(-90deg);white-space:nowrap;
  font-weight:800;font-size:11px;line-height:1;letter-spacing:1.6px;text-transform:uppercase;
}

.ft-ticker-arrow{
  flex:none;appearance:none;border:0;border-right:1px solid #3a3a3a;background:#191919;
  color:#fff;width:30px;font-size:20px;line-height:1;cursor:pointer;padding:0;
  transition:background .15s,opacity .15s;
}
.ft-ticker-arrow:last-child{border-right:0;border-left:1px solid #3a3a3a}
.ft-ticker-arrow:hover:not(:disabled){background:var(--ft-orange);color:#111}
.ft-ticker-arrow:disabled{opacity:.3;cursor:default}
/* Everything already fits, so there is nothing to arrow through. */
.ft-ticker-fits .ft-ticker-arrow{display:none}

.ft-ticker-scroll{
  display:flex;gap:1px;overflow-x:auto;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;min-width:0;flex:1;
}
.ft-ticker-scroll::-webkit-scrollbar{display:none}
/* Holds the strip and, on a phone, the edge cues laid over it. */
.ft-ticker-scrollwrap{position:relative;display:flex;flex:1;min-width:0}
.ft-ticker-cue{display:none}

/* Twenty-six pixels taller than it started — ten, then another sixteen — and
   the divider lifted from #232323 so it actually reads as a line between
   scores. The height is the padding: the card is as tall as its two team rows
   plus whatever sits above and below them. */
.ft-tcard{
  flex:none;scroll-snap-align:start;display:flex;align-items:center;gap:14px;
  padding:21px 14px;min-width:210px;text-decoration:none;color:#fff;
  border-right:1px solid #3a3a3a;transition:background .15s;
}
.ft-tcard:hover{background:#1b1b1b}
/* The day down the card's left edge, read bottom to top — Ball603's ticker. */
.ft-tcard-day{
  flex:none;writing-mode:vertical-rl;transform:rotate(180deg);
  font-size:9px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;
  /* .4 came out at 3.82:1 on the ticker's #111 and failed the contrast check.
     .55 clears AA (about 5.5:1) and still reads as a quiet edge label. */
  color:rgba(255,255,255,.55);margin-right:-4px;
}
/* A chosen team's game. The orange rule underneath is what you catch scanning
   sideways; the star in the corner is what confirms it. Underneath rather than
   down the left edge: starred games sort to the front of the strip, so a left
   edge would sit flush against the orange SCORES block and never be seen. */
.ft-tcard[data-starred]{box-shadow:inset 0 -3px 0 var(--ft-orange)}
.ft-tcard-star{color:var(--ft-orange);font-size:11px;margin-right:4px;letter-spacing:0}
.ft-tcard-teams{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.ft-tcard-row{display:flex;align-items:center;gap:7px;font-size:12.5px;color:#cfcfcf;min-width:0}
.ft-tcard-row.win{color:#fff;font-weight:700}
.ft-tcard-row img{width:16px;height:16px;object-fit:contain;flex:none}
.ft-tcard-nologo{width:16px;height:16px;flex:none}
.ft-tcard-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ft-tcard-score{font-variant-numeric:tabular-nums;flex:none;margin-left:8px}
.ft-tcard-meet{font-size:12.5px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* The right-hand column: what it is, and underneath it when — small, orange
   and hard against the right edge. */
.ft-tcard-meta{
  display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:3px;
  flex:none;text-align:right;
}
.ft-tcard-sub{font-size:9.5px;letter-spacing:.5px;text-transform:uppercase;color:#7e7e7e;white-space:nowrap}
.ft-tcard-status{
  font-weight:700;font-size:9.5px;line-height:1;letter-spacing:1px;text-transform:uppercase;
  color:var(--ft-orange);white-space:nowrap;
}

/* ── Shell ────────────────────────────────────────────────────────────── */

.ft-wrap{max-width:1180px;margin:0 auto;padding:20px 20px 50px}
.ft-pagehead{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0 0 16px}
.ft-pagehead h1{margin:0;font-size:24px}
.ft-pagehead .ft-sub{color:var(--ft-ink-3);font-size:14px}

/* Home: news left, week and standings right. */
.ft-home{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(330px,1fr);gap:20px;align-items:start}

.ft-card{
  background:var(--ft-card);border:1px solid var(--ft-line);border-radius:var(--ft-radius);
  box-shadow:var(--ft-shadow);overflow:hidden;margin-bottom:20px;
}
.ft-card-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 16px;border-bottom:1px solid var(--ft-line);background:var(--ft-card-head);
}
.ft-card-head h2{margin:0;font-size:15px;text-transform:uppercase;letter-spacing:.7px}
.ft-card-head h2 .ft-accent{color:var(--ft-accent)}
.ft-card-head .ft-more{font-size:12.5px;font-weight:600;color:var(--ft-ink-3);text-decoration:none}
.ft-card-head .ft-more:hover{color:var(--ft-accent)}
.ft-card-body{padding:16px}
.ft-card-body.flush{padding:0}
/* A pill row inside a card body already has the body's padding around it; its
   own bottom margin would double the gap above the table underneath. */
.ft-card-body.ft-pillrow{margin-bottom:0}

/* ── Controls ─────────────────────────────────────────────────────────── */

.ft-controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:16px}
.ft-chip{
  appearance:none;border:1px solid var(--ft-line);background:var(--ft-card);color:var(--ft-ink-2);
  font-weight:600;font-size:13px;line-height:1;padding:8px 13px;border-radius:999px;cursor:pointer;transition:all .15s;
  display:inline-flex;align-items:center;gap:6px;
}
.ft-chip:hover{border-color:var(--ft-orange);color:var(--ft-ink)}
.ft-chip.on{background:var(--ft-orange);border-color:var(--ft-orange);color:#111}
.ft-chip-sm{font-size:12px;padding:6px 10px}

.ft-select{
  appearance:none;border:1px solid var(--ft-line);border-radius:8px;
  background:var(--ft-card) no-repeat right 10px center;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath fill='%237a7a7a' d='M0 0h11L5.5 7z'/%3E%3C/svg%3E");
  color:var(--ft-ink);font-weight:600;font-size:13.5px;line-height:1;padding:9px 30px 9px 11px;cursor:pointer;max-width:100%;
}
.ft-select:focus{outline:2px solid var(--ft-orange);outline-offset:1px}

/* Segmented pill box, matching the division tabs on the Ball603 standings page:
   one recessed tray, the active pill lifted out of it in white.
   It WRAPS rather than scrolls: a sport hidden off the end of a scrolling strip
   is a sport most people never find, so a row that will not fit becomes two. */
.ft-pills{
  display:inline-flex;flex-wrap:wrap;justify-content:center;gap:4px;padding:4px;
  background:var(--ft-tray);border-radius:10px;max-width:100%;
}
.ft-pill{
  appearance:none;border:0;background:transparent;color:var(--ft-ink-2);
  font-weight:500;font-size:13.5px;line-height:1;padding:9px 16px;border-radius:6px;cursor:pointer;
  white-space:nowrap;transition:all .2s;display:inline-flex;align-items:center;gap:6px;
}
.ft-pill:hover{color:var(--ft-ink);background:var(--ft-pill-hover)}
.ft-pill.on{background:var(--ft-pill-on);color:var(--ft-accent);box-shadow:0 1px 3px rgba(0,0,0,.1)}
.ft-pillrow{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px}
.ft-pillrow.ft-center{justify-content:center}

/* The schedule's own scrolling area. The page stays put — heading, pills and
   the black bar all where they were — and the list of games underneath them is
   what moves, opening at today with the season above it. The height is set in
   JS from whatever room is left below the pills; this is the floor and the
   before-JS fallback. */
/* max-height only, never a min: a five-game schedule should be five rows tall,
   not a tall box with white space under it. Sideways too, so a table wider than
   a phone scrolls inside the card instead of stretching the page. */
.ft-tablescroll{
  overflow:auto;max-height:60vh;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;
}
/* Pinned, so you always know which column is which however far down you are. */
.ft-tablescroll thead th{position:sticky;top:0;z-index:3}

/* The same sideways scroll for tables that do not need the vertical one — the
   standings and rosters, which are read in full rather than scrolled through. */
.ft-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}


/* ── Record / last / next strip ───────────────────────────────────────── */

.ft-summary{display:grid;grid-template-columns:auto 1fr 1fr;gap:1px;background:var(--ft-line);
  border:1px solid var(--ft-line);border-radius:var(--ft-radius);overflow:hidden;margin-bottom:20px}
.ft-summary > div{background:var(--ft-card);padding:13px 18px;min-width:0}
.ft-summary .ft-label{
  font-weight:700;font-size:10.5px;line-height:1;letter-spacing:.9px;text-transform:uppercase;color:var(--ft-ink-3);
  margin-bottom:5px;display:block;
}
.ft-summary .ft-big{font-size:26px;font-weight:800;letter-spacing:-.8px;line-height:1.05}
.ft-summary .ft-line{font-size:14px;line-height:1.35}
.ft-summary .ft-line .ft-when{color:var(--ft-ink-3);font-size:12.5px}
.ft-summary .ft-none{color:var(--ft-ink-3);font-size:13.5px;padding-top:3px}
.ft-summary-record{border-left:4px solid var(--ft-orange)}

/* ── Tables ───────────────────────────────────────────────────────────── */

.ft-table{width:100%;border-collapse:collapse;font-size:14px}
.ft-table th{
  text-align:left;font-weight:700;font-size:10.5px;line-height:1;letter-spacing:.8px;text-transform:uppercase;
  color:var(--ft-ink-3);padding:10px 12px;border-bottom:1px solid var(--ft-line);
  white-space:nowrap;background:var(--ft-th);
}
/* One line per row, everywhere. A cell that wraps makes neighbouring rows
   different heights and the whole table starts to look like a form. Anything
   too long is cut with an ellipsis, and the table scrolls sideways in its own
   box rather than making the page do it. */
.ft-table td{
  padding:10px 12px;border-bottom:1px solid var(--ft-line-2);vertical-align:middle;
  white-space:nowrap;
}
.ft-table td.grow{max-width:0;overflow:hidden;text-overflow:ellipsis}
.ft-table tbody tr:last-child td{border-bottom:0}
.ft-table tbody tr:hover td{background:var(--ft-row-hover)}
.ft-table .num{text-align:right;font-variant-numeric:tabular-nums;width:1%;white-space:nowrap}
.ft-table .ctr{text-align:center;width:1%;white-space:nowrap}
.ft-table .grow{width:100%}
.ft-table tr.ft-us td{background:var(--ft-orange-soft);font-weight:700}
.ft-table tr.ft-us:hover td{background:var(--ft-us-hover)}
.ft-table tr.ft-us td:first-child{box-shadow:inset 3px 0 0 var(--ft-orange)}

/* Grouped header, the way the Ball603 standings page reads. */
.ft-table thead tr.ft-group th{
  font-size:10px;letter-spacing:1px;padding:7px 12px;border-bottom:1px solid var(--ft-line);
  text-align:center;color:var(--ft-ink-3);
}
.ft-table thead tr.ft-group th.reg{color:var(--ft-accent)}
/* The # and Team cells span both header rows, so they must not inherit the
   centring the group labels above the number columns need. */
.ft-table thead tr.ft-group th.num{text-align:right}
.ft-table thead tr.ft-group th.grow{text-align:left}


.ft-logo-cell{display:flex;align-items:center;gap:9px;min-width:0}
.ft-logo-cell img{width:22px;height:22px;object-fit:contain;flex:none}
/* No underline: at a glance a schedule full of underlined opponents reads as a
   page of links rather than a list of games. The colour change on hover is
   enough to say it is clickable. */
.ft-teamlink{color:inherit;text-decoration:none}
.ft-teamlink:hover{color:var(--ft-accent);text-decoration:underline}

.ft-playoff-line td{border-bottom:2px solid var(--ft-orange) !important}
/* Group headings that have a shorter form for a phone. */
.ft-short{display:none}

/* The dark bar across the top of the standings card, as on Ball603: what you
   are looking at on the left, what it takes to qualify on the right. */
.ft-cardbar{
  background:var(--ft-bar);color:#fff;padding:15px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
}
.ft-cardbar h2{margin:0;font-size:17px;font-weight:700;letter-spacing:-.2px}
/* Two things on the right of the standings bar — the qualifying line and the
   season — held together so space-between keeps them as one group instead of
   pushing one to each end. */
.ft-barright{display:inline-flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:flex-end}
.ft-playoffline{
  font-size:13px;color:rgba(255,255,255,.82);display:inline-flex;align-items:center;gap:8px;
}
.ft-playoffline::before{
  content:'';width:8px;height:8px;border-radius:50%;background:#4caf50;flex:none;
}

/* Rank reads as the headline number of the row. */
.ft-rank{color:var(--ft-orange);font-weight:800}
/* The line under the last qualifying team. */
.ft-table tbody tr.ft-cut td{border-bottom:2px solid var(--ft-orange)}

/* A streak is the one cell people scan for, so it gets a badge rather than two
   plain characters. */
.ft-streak{
  display:inline-block;padding:4px 10px;border-radius:4px;font-weight:700;font-size:12px;
  background:var(--ft-streak-bg);color:var(--ft-ink-3);min-width:34px;text-align:center;
}
.ft-streak.win{background:var(--ft-win-bg);color:var(--ft-win)}
.ft-streak.loss{background:var(--ft-loss-bg);color:var(--ft-loss)}

/* Vertical rules where one group of columns ends and the next begins, so
   Regular Season / Postseason / Overall read as three blocks. */
.ft-table th.sep,.ft-table td.sep{border-left:2px solid rgba(190,190,190,.35)}

/* ── Schedule rows ────────────────────────────────────────────────────── */

.ft-sport-emoji{font-size:16px;line-height:1}
.ft-level{font-size:12.5px;color:var(--ft-ink-2);white-space:nowrap}
/* nowrap, so a long school name ellipses inside its cell rather than pushing
   the row onto a second line and leaving the table uneven. */
.ft-matchup{font-weight:600;display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:nowrap}
.ft-matchup .ft-teamlink,.ft-matchup > span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.ft-ha{color:var(--ft-ink-3);font-weight:600;font-size:12.5px;text-transform:uppercase}
.ft-ha.home{color:var(--ft-accent)}
.ft-oppimg{width:20px;height:20px;object-fit:contain;flex:none}
.ft-result{font-weight:700;white-space:nowrap}
.ft-result .W{color:var(--ft-win)}
.ft-result .L{color:var(--ft-loss)}
.ft-result .T{color:var(--ft-ink-3)}
.ft-manual{color:var(--ft-accent);font-size:11px;margin-left:3px}
/* Inline beside the time rather than under it: "4:00PM Postponed" on one line
   keeps every row the same height. */
.ft-status{color:var(--ft-loss);font-weight:700;font-size:12px;display:inline;margin-left:6px}
/* The venue used to be spelled out in the schedule's last column, which ate
   the width the date needed and pushed it onto two lines. The pin alone does
   the job — the popover it opens already carries the site, the sub-site and a
   directions link — so it costs one click from the people who want an address
   rather than a column from everybody. */
.ft-venue-cell{display:flex;align-items:center;justify-content:center}
.ft-pin{
  appearance:none;border:0;background:transparent;padding:4px 5px;cursor:pointer;
  font-size:15px;line-height:1;border-radius:6px;flex:none;
}
.ft-pin:hover{background:var(--ft-orange-soft)}
.ft-pin:focus-visible{outline:2px solid var(--ft-orange)}
/* One line: "Sat, Sep 17". The weekday is muted so the date still leads. */
.ft-datecell{font-size:13.5px;color:var(--ft-ink);white-space:nowrap}
.ft-datecell b{color:var(--ft-ink)}
.ft-dow{color:var(--ft-ink-3);font-size:13px}

/* ── This Week ────────────────────────────────────────────────────────── */

.ft-week-day{padding:11px 16px;border-bottom:1px solid var(--ft-line-2)}
.ft-week-day:last-child{border-bottom:0}
.ft-week-day h4{
  margin:0 0 7px;font-weight:700;font-size:10.5px;line-height:1;letter-spacing:.9px;text-transform:uppercase;color:var(--ft-ink-3);
}
.ft-week-day.today h4{color:var(--ft-accent)}
.ft-week-game{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:13.5px;min-width:0}
.ft-week-game .ft-week-opp{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ft-week-game .ft-week-time{color:var(--ft-ink-3);font-size:12.5px;white-space:nowrap}
.ft-week-team{font-size:11.5px;color:var(--ft-ink-3);display:block}

/* ── Golf course line ─────────────────────────────────────────────────── */
/* The course above a day's matches, on the schedule table and in Upcoming
   Events. Quiet enough to read as a caption over the rows below it rather than
   as a game of its own — on the table that means no row hover and no bottom
   rule, since it belongs to the rows underneath. */

.ft-table tr.ft-courserow td{
  padding:7px 12px 5px;border-bottom:0;
  font-size:11.5px;font-weight:700;letter-spacing:.3px;color:var(--ft-accent);
  background:var(--ft-orange-soft);
}
.ft-table tbody tr.ft-courserow:hover td{background:var(--ft-orange-soft)}
.ft-table tr.ft-courserow .ft-sport-emoji{font-size:13px;margin-right:2px}

/* The matches that heading covers, tinted a shade lighter than the heading
   itself: one round, one block, and the row where the tint stops is where the
   next round starts. */
.ft-table tbody tr.ft-coursegame td{background:var(--ft-course-row)}
.ft-table tbody tr.ft-coursegame:hover td{background:var(--ft-course-hover)}

/* "at", in the row's own quiet grey — it introduces the course without
   competing with it. */
.ft-course-at{font-weight:600;color:var(--ft-ink-3);margin-right:1px}

.ft-course{
  font-size:11.5px;font-weight:700;letter-spacing:.3px;color:var(--ft-accent);
  padding:4px 0 1px;
}
.ft-course .ft-sport-emoji{font-size:13px}
/* A hairline only when another sport's match sits above it, so the course
   reads as the start of the golf block rather than a note on the row before. */
.ft-week-game + .ft-course{margin-top:5px;padding-top:7px;border-top:1px solid var(--ft-line-2)}

/* ── Team pages ───────────────────────────────────────────────────────── */
/* One team, top to bottom: the black bar, Next Up and Last Time Out side by
   side, then the schedule, roster and standings. The three cards below are the
   same ones the schedule, rosters and standings pages draw, so the only new
   shapes here are the two game cards, the section headings and the index. */

.ft-barcard{margin-bottom:12px}
.ft-barcard .ft-cardbar{border-radius:var(--ft-radius)}

/* Two cards on a wide screen, stacked on a phone — the same breakpoint the
   rest of the site changes shape at. */
.ft-teamsplit{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
@media (max-width:760px){ .ft-teamsplit{grid-template-columns:1fr} }
.ft-halfcard{margin:0}

.ft-bigrow{display:flex;align-items:center;gap:10px;padding:13px 16px 4px;min-width:0}
.ft-bigopp{
  flex:1;min-width:0;display:flex;align-items:center;gap:8px;
  font-weight:700;font-size:16px;white-space:nowrap;overflow:hidden;
}
.ft-bigname{min-width:0;overflow:hidden;text-overflow:ellipsis}
.ft-bigopp img{width:24px;height:24px;object-fit:contain;flex:none}
.ft-bigresult{font-weight:800;font-size:16px;white-space:nowrap}
.ft-bigwhen{font-weight:700;font-size:15px;color:var(--ft-ink-2);white-space:nowrap}
.ft-bigmeta{padding:0 16px 13px;font-size:12.5px;color:var(--ft-ink-3)}
/* The bullet is styled for the black bar, where it sits on a dark background.
   Here it is on the card, so it takes the card's own quiet grey. */
.ft-bigmeta .ft-bardot{color:var(--ft-line);margin:0 6px;font-style:normal}
.ft-bigmeta .ft-course-at{color:inherit;font-weight:600}
.ft-status-inline{color:var(--ft-loss)}

/* The index: every team, grouped by sport, each row a link to its page. */
.ft-teamrows{display:flex;flex-direction:column}
.ft-teamrow{
  display:flex;align-items:center;gap:10px;min-width:0;
  padding:11px 16px;border-bottom:1px solid var(--ft-line-2);
  color:inherit;text-decoration:none;
}
.ft-teamrow:last-child{border-bottom:0}
.ft-teamrow:hover{background:var(--ft-row-hover)}
.ft-teamrow-name{flex:1;min-width:0;font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ft-teamrow-rec{font-weight:800;font-size:13.5px;white-space:nowrap;font-variant-numeric:tabular-nums}
.ft-teamrow-next{
  width:40%;max-width:210px;text-align:right;font-size:12.5px;color:var(--ft-ink-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
@media (max-width:520px){ .ft-teamrow-next{display:none} }

.ft-teamback{margin:18px 0 0;font-size:13px}
.ft-teamback a{color:var(--ft-accent);text-decoration:none;font-weight:600}

/* A team name that opens that team's page, wherever one is printed. */
.ft-teampagelink{color:inherit;text-decoration:none}
.ft-teampagelink:hover{color:var(--ft-accent)}

/* ── Rosters ──────────────────────────────────────────────────────────── */

.ft-coaches{font-size:13.5px;color:var(--ft-ink-2);padding:12px 16px;border-top:1px solid var(--ft-line-2)}
.ft-coaches b{color:var(--ft-ink)}

/* ── Venue popover ────────────────────────────────────────────────────── */

.ft-venue{
  position:fixed;z-index:1200;background:var(--ft-card);border:1px solid var(--ft-line);
  border-radius:11px;box-shadow:0 8px 28px rgba(0,0,0,.17);padding:13px 15px;
  max-width:280px;font-size:13.5px;display:none;
}
.ft-venue.on{display:block}
.ft-venue h4{margin:0 0 3px;font-size:14.5px}
.ft-venue p{margin:0;color:var(--ft-ink-3);font-size:13px}
.ft-venue a{
  display:inline-block;margin-top:9px;background:var(--ft-orange);color:#111;
  font-weight:700;font-size:13px;text-decoration:none;padding:7px 12px;border-radius:7px;
}
.ft-venue a:hover{background:var(--ft-orange-dk);color:#fff}
.ft-veil{position:fixed;inset:0;z-index:1100;display:none}
.ft-veil.on{display:block}

/* ── States ───────────────────────────────────────────────────────────── */

.ft-empty{padding:30px 18px;text-align:center;color:var(--ft-ink-3);font-size:14px}
.ft-loading{padding:34px;text-align:center;color:var(--ft-ink-3);font-size:14px}
.ft-note{font-size:12.5px;color:var(--ft-ink-3);margin:4px 2px 18px}

.ft-placeholder{
  padding:34px 22px;text-align:center;color:var(--ft-ink-3);font-size:14px;line-height:1.6;
  min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.ft-placeholder a{color:var(--ft-accent);font-weight:600}

/* ── Footer ───────────────────────────────────────────────────────────── */

.ft-footer{
  max-width:1180px;margin:0 auto;padding:26px 20px 34px;text-align:center;
  border-top:1px solid var(--ft-line);margin-top:10px;
}
.ft-powered{
  display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  font-weight:600;font-size:12px;line-height:1;letter-spacing:.8px;text-transform:uppercase;color:var(--ft-ink-3);
  transition:opacity .15s;
}
.ft-powered:hover{opacity:.7}
.ft-powered picture{display:block}
.ft-powered img{height:22px;width:auto;display:block}

/* ── Narrow screens ───────────────────────────────────────────────────── */
/* Desktop is the priority here; these rules exist so a phone is usable, not
   polished. */

@media (max-width:1000px){
  .ft-home{grid-template-columns:1fr}
}
@media (max-width:760px){
  /* The nav row goes; the hamburger takes its place, to the right of the
     socials. Never both. */
  .ft-nav{display:none}
  .ft-burger{display:flex}

  .ft-header-inner{padding:0 10px;gap:4px}
  .ft-logo{margin-right:0;flex:1;min-width:0}
  /* The wordmark is 600x159, so at 44px tall it wants 166px of width. Raising
     the height alone did nothing visible, because max-width was the binding
     constraint and the image was being held at 140. Both had to move. */
  .ft-logo img{height:44px;max-width:172px}
  /* The width for that comes out of the icons beside it: the bar itself stays
     60px and everything still fits across a 390px screen. */
  .ft-social{width:24px;height:24px}
  .ft-social svg{width:13px;height:13px}
  .ft-iconbtn{width:28px;height:28px}
  .ft-burger{width:28px;height:28px}
  .ft-starbtn-label{display:none}
  .ft-starbtn{padding:0}
  .ft-header-right{gap:3px}

  .ft-wrap{padding:12px 12px 40px}
  .ft-pagehead{margin-bottom:12px}
  .ft-pagehead h1{font-size:20px}

  /* Tighter pills, so a full row of sports fits in one or two lines rather than
     running off the side. */
  .ft-pills{gap:3px;padding:3px;border-radius:9px}
  .ft-pill{padding:8px 10px;font-size:12.5px;gap:4px}
  .ft-pill .ft-sport-emoji{font-size:13px}
  .ft-pillrow{gap:7px;margin-bottom:10px}

  .ft-summary{grid-template-columns:1fr}
  .ft-table{font-size:13px}
  .ft-table th,.ft-table td{padding:8px 9px}
  .ft-hide-sm{display:none}

  .ft-card{margin-bottom:14px}
  .ft-card-head{padding:11px 13px}
  .ft-card-head h2{font-size:13.5px;letter-spacing:.5px}
  .ft-card-body{padding:13px}
  /* Record, home, away, streak and now the season: five things on one bar. Held
     at desktop size they wrap to three lines and the bar eats a quarter of the
     screen before a single game is visible. */
  .ft-cardbar{padding:11px 13px;gap:8px}
  .ft-barstats{gap:7px;font-size:12px}
  .ft-barstats b{font-size:15px}

  /* A table this narrow has nowhere to put an ellipsis, so the match-up column
     is allowed its natural width and the table scrolls instead. */
  .ft-table td.grow{max-width:none}
  /* The standings table has five columns of numbers that need room whatever the
     screen. The schedule is down to three on a phone once the sport, level and
     location columns come off, and holding it to 520 would make a table that
     fits the screen scroll sideways anyway. Every cell is nowrap, so it still
     grows past the edge when the content genuinely needs it. */
  .ft-tablewrap .ft-table{min-width:520px}

  /* Except a team page's schedule, which is one section of a longer page. A
     table that scrolls sideways inside a page that already scrolls down is one
     scroll too many, so this one is made to fit: no 520 floor, the match-up
     allowed to ellipsis again, and the short columns on narrow padding. It can
     afford to — the sport, level, gender and location columns are all off on a
     phone, leaving date, match-up and time. */
  .ft-teamsched .ft-table{min-width:0}
  .ft-teamsched .ft-table td.grow{max-width:0}
  .ft-teamsched .ft-table th,.ft-teamsched .ft-table td{padding:9px 8px}
  .ft-teamsched .ft-table tr.ft-courserow td{padding:7px 8px 5px}

  /* Standings: every column exactly as wide as what is in it. The 520px floor
     above made the table wider than a phone before a single number was drawn,
     and the Team column soaked up all of the slack — so a four-column soccer
     table scrolled sideways with 300px of blank space after the names, while
     volleyball's wide headers squeezed the names instead. Now the table is its
     content's width; only when that is wider than the phone does it scroll, and
     it is never narrower than the card (Team takes whatever is left over). */
  .ft-standwrap .ft-table{min-width:100%;width:max-content}
  .ft-standwrap .ft-table td.grow,.ft-standwrap .ft-table th.grow{width:auto;max-width:none}
  .ft-standwrap .ft-table th,.ft-standwrap .ft-table td{padding:8px 7px}
  .ft-standwrap .ft-table th{letter-spacing:.3px}
  .ft-standwrap .ft-table thead tr.ft-group th{letter-spacing:.5px;padding:7px 7px}
  .ft-standwrap .ft-table td.num,.ft-standwrap .ft-table th.num{padding-left:10px;padding-right:4px}
  .ft-standwrap .ft-table tr td:last-child,.ft-standwrap .ft-table tr th:last-child{padding-right:10px}
  .ft-standwrap .ft-logo-cell{gap:7px}
  .ft-standwrap .ft-logo-cell img{width:20px;height:20px}
  /* A header one short number wide should not be wider than the number. */
  .ft-standwrap .ft-long{display:none}
  .ft-standwrap .ft-short{display:inline}

  /* The roster is the one table that can be made to fit a phone outright, so it
     is, rather than being handed a sideways scroll. It has at most four columns
     that matter — number, player, class, and then position or school — and
     everything here is about buying width for the player's name:

       no minimum width, so the table sizes to the screen instead of to 520px;
       narrow padding on the short columns, which need room for "SR" and not a
       character more; and the name allowed to ellipsis rather than forcing the
       whole table wider than the screen.

     Height is already gone by this point — it carries ft-hide-sm. */
  .ft-rosterwrap .ft-rostertable{min-width:0}
  .ft-rostertable th,.ft-rostertable td{padding:8px 5px;font-size:12.5px}
  .ft-rostertable th{font-size:9.5px;letter-spacing:.4px}
  .ft-rostertable .num{padding-left:9px;padding-right:4px}
  .ft-rostertable .tight{padding-left:4px;padding-right:4px}
  .ft-rostertable td.grow{max-width:0;overflow:hidden;text-overflow:ellipsis}
  .ft-rostertable tr td:last-child,
  .ft-rostertable tr th:last-child{padding-right:9px}

  /* "Tue, Sep 16" is a third wider than "Sep 16", and the weekday is the part
     nobody is reading. */
  .ft-dow{display:none}

  /* "at" and "vs" are grammar, not information. The opponent is what the eye
     is hunting for, so the connector drops a size below it. */
  .ft-ha{font-size:10.5px}

  .ft-ticker-label{padding:0 10px;font-size:10px;letter-spacing:1px}
  /* A fixed width well under the strip's, so the next score always peeks in
     from the right edge: you can see there is more without being told. Long
     team names ellipsize inside it instead of widening the card. */
  .ft-tcard{min-width:0;width:min(66vw,260px);padding:15px 12px;gap:10px}
  /* Swiping is the natural gesture here and the arrows only eat width. */
  .ft-ticker-arrow{display:none}
  /* In their place, a fade and a small chevron on whichever edge has more. */
  .ft-ticker-cue{
    display:flex;align-items:center;justify-content:center;position:absolute;top:0;bottom:0;width:30px;
    border:0;padding:0;margin:0;font-size:22px;line-height:1;color:rgba(255,255,255,.7);cursor:pointer;
    transition:opacity .2s;z-index:1;
  }
  .ft-ticker-cue-r{right:0;justify-content:flex-end;padding-right:6px;background:linear-gradient(to left,#111 30%,rgba(17,17,17,0))}
  .ft-ticker-cue-l{left:0;justify-content:flex-start;padding-left:6px;background:linear-gradient(to right,#111 30%,rgba(17,17,17,0))}
  .ft-ticker-atstart .ft-ticker-cue-l,
  .ft-ticker-atend .ft-ticker-cue-r,
  .ft-ticker-fits .ft-ticker-cue{opacity:0;pointer-events:none}
}

/* A phone held upright. The pills get one more squeeze so every sport is on
   screen without a sideways drag. */
@media (max-width:420px){
  .ft-pills{gap:3px;padding:3px}
  .ft-pill{padding:7px 7px;font-size:11.5px;gap:3px}
  .ft-pill .ft-sport-emoji{font-size:12px}
  /* The wordmark keeps its full 44px here too — it is the one thing on this bar
     somebody is actually looking at. The socials give up the width for it. */
  .ft-social{width:22px;height:22px}
}

/* ── Score entry ──────────────────────────────────────────────────────────
   The one page on this site that is a form rather than a table. It shares the
   header, footer, card and button language with everything else. */

.ft-wrap.ft-narrow{max-width:620px}
.ft-card.ft-pad{padding:18px}
.ft-step{display:none}
.ft-step.on{display:block}

.ft-card.ft-pad h2{margin:0 0 4px;font-size:18px}
.ft-hint{margin:0 0 15px;font-size:13.5px;color:var(--ft-ink-3)}

.ft-card.ft-pad label{
  display:block;font-weight:700;font-size:10.5px;line-height:1;letter-spacing:.8px;text-transform:uppercase;
  color:var(--ft-ink-3);margin-bottom:6px;
}
.ft-card.ft-pad input[type=password],
.ft-card.ft-pad input[type=number],
.ft-card.ft-pad select{
  width:100%;border:1px solid var(--ft-line);border-radius:8px;background:var(--ft-field);color:var(--ft-ink);
  font-weight:500;font-size:16px;line-height:1.2;padding:12px 13px;
}
.ft-card.ft-pad input:focus,
.ft-card.ft-pad select:focus{outline:2px solid var(--ft-orange);outline-offset:1px;border-color:var(--ft-orange)}

.ft-btn{
  appearance:none;border:0;border-radius:8px;background:var(--ft-orange);color:#111;
  font-weight:700;font-size:15px;line-height:1;padding:13px 18px;cursor:pointer;width:100%;margin-top:14px;
}
.ft-btn:hover{background:var(--ft-orange-dk);color:#fff}
.ft-btn:disabled{opacity:.55;cursor:default}
.ft-btn.ghost{background:transparent;color:var(--ft-ink-2);border:1px solid var(--ft-line);margin-top:8px}
.ft-btn.ghost:hover{background:var(--ft-hover);color:var(--ft-ink)}
.ft-btn.danger{background:transparent;color:var(--ft-loss);border:1px solid var(--ft-line)}
.ft-btn.danger:hover{background:var(--ft-err-bg)}

.ft-err{
  background:var(--ft-err-bg);border:1px solid var(--ft-err-line);color:var(--ft-loss);border-radius:8px;
  padding:10px 12px;font-size:13.5px;margin-top:12px;display:none;
}
.ft-err.on{display:block}

.ft-gamelist{margin-top:6px;border:1px solid var(--ft-line);border-radius:9px;overflow:hidden;background:var(--ft-field)}
.ft-gitem{
  display:block;width:100%;text-align:left;border:0;border-top:1px solid var(--ft-line);
  background:var(--ft-field);color:var(--ft-ink);padding:12px 14px;cursor:pointer;font:inherit;
}
.ft-gitem:first-child{border-top:0}
.ft-gitem:hover{background:var(--ft-orange-soft)}
.ft-gitem b{display:block;font-size:15px;font-weight:650;letter-spacing:-.2px}
.ft-gitem span{display:block;font-size:12.5px;color:var(--ft-ink-3);margin-top:2px}
.ft-gitem .ft-has{color:var(--ft-accent);font-weight:700}
.ft-gitem em{display:block;font-style:normal;font-size:12.5px;color:var(--ft-ink-3);margin-top:3px}
.ft-gitem em.ft-has{color:var(--ft-accent)}

/* Sport buttons, then a day at a time with arrows either side of the date —
   the order Ball603's own score page asks its questions in. */
.ft-sportgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px}
.ft-sportbtn{
  appearance:none;display:flex;align-items:center;gap:9px;justify-content:center;
  border:1px solid var(--ft-line);border-radius:10px;background:var(--ft-field);color:var(--ft-ink);
  font:inherit;font-weight:700;font-size:16px;padding:16px 12px;cursor:pointer;
}
.ft-sportbtn:hover{border-color:var(--ft-orange);background:var(--ft-orange-soft)}
.ft-sportbtn .ft-sport-emoji{font-size:20px}
.ft-linkbtn{appearance:none;border:0;background:none;padding:0 0 6px;font:inherit;font-size:13.5px;
  font-weight:600;color:var(--ft-accent);cursor:pointer}
.ft-daynav{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:4px 0 12px}
.ft-dayarrow{
  appearance:none;flex:none;width:44px;height:44px;border-radius:50%;
  border:1px solid var(--ft-line);background:var(--ft-field);color:var(--ft-orange);
  font-size:28px;line-height:1;cursor:pointer;padding:0 0 3px;
}
.ft-dayarrow:hover{border-color:var(--ft-orange)}
.ft-daylabel{text-align:center;min-width:0}
.ft-daylabel b{display:block;font-size:17px}
.ft-daylabel span{display:block;font-size:13.5px;color:var(--ft-ink-3);margin-top:2px}
.ft-jumps{display:flex;gap:8px}
.ft-jumps .ft-btn{flex:1}

.ft-scoregrid{display:grid;grid-template-columns:1fr 34px 1fr;gap:10px;align-items:end;margin-top:14px}
.ft-scoregrid .ft-vs{text-align:center;padding-bottom:13px;color:var(--ft-ink-3);font-weight:700;font-size:13px}
.ft-scoregrid input{text-align:center;font-size:30px;font-weight:700;padding:14px 6px}
.ft-side{
  font-weight:700;font-size:10.5px;line-height:1.3;letter-spacing:.6px;text-transform:uppercase;color:var(--ft-ink-3);
  margin-bottom:6px;min-height:2.6em;display:flex;align-items:flex-end;
}

.ft-done{text-align:center;padding:34px 18px}
.ft-done .ft-tick{font-size:42px;line-height:1}
.ft-done h2{margin:12px 0 4px}
.ft-done p{color:var(--ft-ink-3);font-size:14px;margin:0}
.ft-back{display:inline-block;margin-top:18px;font-size:13.5px;font-weight:600;color:var(--ft-accent);text-decoration:none}

.ft-tba{color:var(--ft-ink-3)}

/* ── Videos ───────────────────────────────────────────────────────────────
   The Ball603 video page's card, in Tigers colours. */

.ft-searchbar{display:flex;justify-content:center;margin-bottom:18px}
.ft-search{
  width:100%;max-width:440px;border:1px solid var(--ft-line);border-radius:999px;
  background:var(--ft-card) no-repeat 15px center;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' fill='none' stroke='%237a7a7a' stroke-width='2'%3E%3Ccircle cx='6.5' cy='6.5' r='5'/%3E%3Cpath d='M10.5 10.5l4 4'/%3E%3C/svg%3E");
  font-weight:500;font-size:14.5px;line-height:1;color:var(--ft-ink);padding:12px 16px 12px 38px;
}
.ft-search:focus{outline:2px solid var(--ft-orange);outline-offset:1px;border-color:var(--ft-orange)}

.ft-videogrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.ft-video{
  background:var(--ft-card);border:1px solid var(--ft-line);border-radius:var(--ft-radius);
  overflow:hidden;box-shadow:var(--ft-shadow);cursor:pointer;transition:transform .15s,box-shadow .15s;
  display:flex;flex-direction:column;
}
.ft-video:hover{transform:translateY(-2px);box-shadow:var(--ft-shadow-lift)}
.ft-video-thumb{position:relative;aspect-ratio:16/9;background:#111;overflow:hidden}
.ft-video-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s}
.ft-video:hover .ft-video-thumb img{transform:scale(1.04)}
.ft-video-play{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.18);opacity:0;transition:opacity .15s;
}
.ft-video:hover .ft-video-play{opacity:1}
.ft-video-play span{
  width:54px;height:54px;border-radius:50%;background:var(--ft-orange);color:#111;
  display:flex;align-items:center;justify-content:center;font-size:20px;padding-left:4px;
}
.ft-video-dur{
  position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.82);color:#fff;
  font-weight:600;font-size:11.5px;line-height:1;padding:4px 6px;border-radius:4px;z-index:2;
}

/* Shorts. The card keeps its 16:9 footprint so the grid stays even; the
   vertical thumbnail sits whole in the middle with a blurred, enlarged copy of
   itself filling the space either side, rather than two black bars. */
.ft-video-thumb.short .ft-video-blur{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:blur(18px) saturate(1.25);transform:scale(1.2);opacity:.55;
}
.ft-video-thumb.short .ft-video-main{position:relative;z-index:1;object-fit:contain}
.ft-video-badge{
  position:absolute;left:8px;top:8px;z-index:2;background:var(--ft-orange);color:#111;
  font-weight:700;font-size:10px;line-height:1;letter-spacing:.7px;padding:5px 7px;border-radius:4px;
}
.ft-video-body{padding:13px 15px 15px;flex:1;display:flex;flex-direction:column;gap:6px}
.ft-video-body h3{margin:0;font-size:14.5px;line-height:1.35;font-weight:650}
.ft-video-meta{font-size:12.5px;color:var(--ft-ink-3);display:flex;gap:12px;flex-wrap:wrap;margin-top:auto}

/* ── Fan stories ──────────────────────────────────────────────────────────
   Written in the Ball603 CMS with the same editor as a Ball603 article, so the
   body arrives as article HTML — headings, lists, links, blockquotes and the
   article-image divs — and is styled here to match the rest of the site. */

.ft-story{padding:0 0 20px;border-bottom:1px solid var(--ft-line-2);margin-bottom:20px}
.ft-story:last-child{border-bottom:0;padding-bottom:0;margin-bottom:0}
.ft-story > h3{margin:0 0 10px;font-size:20px;line-height:1.25;font-weight:750;letter-spacing:-.2px}
/* Never cropped. A portrait shot is shown whole and shrinks to fit the height
   cap rather than being cut to a shape it was not taken in. */
.ft-story-lead{
  max-width:100%;max-height:560px;width:auto;height:auto;
  border-radius:9px;display:block;margin:0 auto 14px;
}
.ft-story-body{font-size:15px;line-height:1.65;color:var(--ft-ink)}
.ft-story-body p{margin:0 0 13px}
.ft-story-body p:last-child{margin-bottom:0}
.ft-story-body h2,.ft-story-body h3{margin:20px 0 9px;font-size:17px;line-height:1.3;font-weight:700}
.ft-story-body ul,.ft-story-body ol{margin:0 0 13px;padding-left:22px}
.ft-story-body li{margin:0 0 5px}
.ft-story-body a{color:var(--ft-accent);text-decoration:underline}
.ft-story-body a:hover{color:var(--ft-orange)}
.ft-story-body blockquote{
  margin:14px 0;padding:2px 0 2px 14px;border-left:3px solid var(--ft-orange);
  color:var(--ft-ink-2);font-style:italic;
}
.ft-story-body img{max-width:100%;height:auto;border-radius:8px;display:block}

/* ── Images inside a story ────────────────────────────────────────────────
   The CMS wraps each one in div.article-image with a size- and an align-
   class. Size sets the WIDTH only and the height follows the picture, so an
   8x10 stays an 8x10 — nothing here crops or forces a shape. Left and right
   float, which is what makes the text run round them. */

.ft-story-body .article-image{margin:6px 0 14px;max-width:100%}
.ft-story-body .article-image img{width:100%;height:auto;display:block;border-radius:8px}
.ft-story-body .article-image .caption{
  font-size:12.5px;line-height:1.45;color:var(--ft-ink-3);margin-top:6px;
}

.ft-story-body .article-image.size-small{width:170px}
.ft-story-body .article-image.size-medium{width:300px}
.ft-story-body .article-image.size-large,
.ft-story-body .article-image.size-full{width:100%}

.ft-story-body .article-image.align-center{margin-left:auto;margin-right:auto;float:none}
.ft-story-body .article-image.align-center .caption{text-align:center}
.ft-story-body .article-image.align-left{float:left;margin:5px 20px 14px 0;clear:left}
.ft-story-body .article-image.align-right{float:right;margin:5px 0 14px 20px;clear:right}

/* A full-width picture has no room beside it for text to wrap into, so asking
   for it left or right narrows it to something text can actually sit next to
   rather than leaving a floated block with a one-word column down the side. */
.ft-story-body .article-image.size-large.align-left,
.ft-story-body .article-image.size-large.align-right,
.ft-story-body .article-image.size-full.align-left,
.ft-story-body .article-image.size-full.align-right{width:58%}

/* Floats do not add to their parent's height, so without this a short story
   ends up shorter than the picture beside it and the next one rides up. */
.ft-story-body::after{content:'';display:block;clear:both}

/* On a phone the column is too narrow to wrap round anything. Every image goes
   full width and the text stays above and below it. Same specificity as the
   rules above, and later in the file, so it wins without !important. */
@media (max-width:620px){
  .ft-story-body .article-image.size-small,
  .ft-story-body .article-image.size-medium,
  .ft-story-body .article-image.size-large.align-left,
  .ft-story-body .article-image.size-large.align-right,
  .ft-story-body .article-image.size-full.align-left,
  .ft-story-body .article-image.size-full.align-right{width:100%}
  .ft-story-body .article-image.align-left,
  .ft-story-body .article-image.align-right{float:none;margin:12px 0}
}

/* ── Photo galleries ──────────────────────────────────────────────────────
   Deliberately the same card as a video: same grid, same radius, same lift on
   hover. A gallery is a link out to SmugMug rather than a lightbox, so there is
   no play button and the whole card is the anchor. */

.ft-gallerygrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.ft-gallery{
  background:var(--ft-card);border:1px solid var(--ft-line);border-radius:var(--ft-radius);
  overflow:hidden;box-shadow:var(--ft-shadow);transition:transform .15s,box-shadow .15s;
  display:flex;flex-direction:column;text-decoration:none;color:inherit;
}
.ft-gallery:hover{transform:translateY(-2px);box-shadow:var(--ft-shadow-lift)}
.ft-gallery-thumb{position:relative;aspect-ratio:3/2;background:#111;overflow:hidden}
.ft-gallery-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s}
.ft-gallery:hover .ft-gallery-thumb img{transform:scale(1.04)}
.ft-gallery-sport{
  position:absolute;left:8px;top:8px;background:rgba(0,0,0,.82);color:#fff;
  font-weight:600;font-size:11.5px;line-height:1;padding:5px 8px;border-radius:5px;display:inline-flex;align-items:center;gap:4px;
}
.ft-gallery-body{padding:13px 15px 15px;flex:1;display:flex;flex-direction:column;gap:6px}
.ft-gallery-body h3{margin:0;font-size:14.5px;line-height:1.35;font-weight:650}
.ft-gallery-meta{font-size:12.5px;color:var(--ft-ink-3);display:flex;gap:12px;flex-wrap:wrap;margin-top:auto}

/* The video page sets this with a style attribute; the rule belongs here. */
.ft-center-text{text-align:center}

/* Lightbox */
.ft-lightbox{
  position:fixed;inset:0;z-index:1300;background:rgba(0,0,0,.9);
  display:none;align-items:center;justify-content:center;padding:24px;
}
.ft-lightbox.on{display:flex}
.ft-lightbox-inner{width:100%;max-width:960px}
.ft-lightbox iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:10px;display:block;background:#000}
/* A Short plays upright. Capped by height as well as width so a tall phone
   video cannot run off the top and bottom of a short laptop screen. */
.ft-lightbox.short .ft-lightbox-inner{max-width:min(400px, 52vh)}
.ft-lightbox.short iframe{aspect-ratio:9/16}
.ft-lightbox h3{color:#fff;font-size:16px;margin:14px 2px 0;font-weight:600}
.ft-lightbox-close{
  position:absolute;top:18px;right:22px;appearance:none;border:0;background:transparent;
  color:#fff;font-size:30px;line-height:1;cursor:pointer;padding:6px 10px;
}
.ft-lightbox-close:hover{color:var(--ft-orange)}

/* Home / away / streak under the record. The schedule page is the one place
   these can be shown for every sport, because they come from Farmington's own
   games rather than from every school's. */
.ft-splits{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:8px;font-size:12.5px;color:var(--ft-ink-3)}
.ft-splits b{color:var(--ft-ink);font-weight:700}

/* The record and splits, sitting on the right of the schedule's black bar. */
.ft-barstats{display:inline-flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:13px;color:rgba(255,255,255,.75)}
.ft-bardot{color:rgba(255,255,255,.35);font-style:normal;font-size:11px}
/* HOME and AWAY are labels, not part of the number, so they read as small caps
   beside it rather than competing with it. */
.ft-barstats em{font-style:normal;text-transform:uppercase;letter-spacing:.6px;font-size:11px;color:rgba(255,255,255,.6)}
.ft-barstats b{color:#fff;font-size:17px;font-weight:800;letter-spacing:-.3px}
.ft-barstats .ft-streak{background:rgba(255,255,255,.14);color:#fff}
.ft-barstats .ft-streak.win{background:rgba(76,175,80,.25);color:#8bd694}
.ft-barstats .ft-streak.loss{background:rgba(244,67,54,.25);color:#f2938c}