/* ==========================================================================
   Fantasy Football — new UI (scoped reskin)
   --------------------------------------------------------------------------
   Ported verbatim from the designer's new-UI reference. Every rule is scoped
   under `.fnt` so it never touches the shared header-cro-v2 / redesign-cro-v2
   / Bootstrap styles (and vice versa). The ref's own logo/menubar block is
   intentionally dropped — the page uses the real site header partial.
   Fonts are served from /static/fonts/ (same-origin, CSP font-src 'self').
   ========================================================================== */

@font-face{font-family:'Barlow Condensed';font-style:italic;font-weight:800;font-display:swap;src:url(/static/fonts/barlow-condensed-italic-800.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:italic;font-weight:900;font-display:swap;src:url(/static/fonts/barlow-condensed-italic-900.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url(/static/fonts/barlow-condensed-700.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:800;font-display:swap;src:url(/static/fonts/barlow-condensed-800.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:900;font-display:swap;src:url(/static/fonts/barlow-condensed-900.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/inter-400.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(/static/fonts/inter-400.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(/static/fonts/inter-400.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(/static/fonts/inter-400.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url(/static/fonts/inter-400.woff2) format('woff2')}

/* ============ TOKENS — light football theme ============ */
:root{
  --fnt-bg:#F4F6FB; --fnt-surface:#FFFFFF;
  --fnt-line:#E6E9F2; --fnt-line-2:#D8DDEA;
  --fnt-ink:#131B2E; --fnt-muted:#5A6478; --fnt-muted-2:#8A92A8;
  --fnt-pink:#FF0080; --fnt-pink-2:#F9448C; --fnt-pink-deep:#D70570;
  --fnt-green:#00B361; --fnt-green-b:#00D97D; --fnt-green-deep:#078B4D; --fnt-teal:#04C4A2;
  --fnt-navy:#0E1526; --fnt-gold:#F5A623; --fnt-gold-deep:#B97E0A; --fnt-red:#D92D20;
  --fnt-font-d:'Barlow Condensed',sans-serif; --fnt-font-b:'Inter',system-ui,sans-serif;
  --fnt-shadow:0 14px 40px rgba(19,27,46,.08);
  --fnt-shadow-pop:0 20px 50px rgba(19,27,46,.14);
}

/* Local aliases so the ported rules below read exactly like the reference
   (--bg, --pink, --font-b …) while resolving to the namespaced tokens. */
.fnt{
  --bg:var(--fnt-bg); --surface:var(--fnt-surface);
  --line:var(--fnt-line); --line-2:var(--fnt-line-2);
  --ink:var(--fnt-ink); --muted:var(--fnt-muted); --muted-2:var(--fnt-muted-2);
  --pink:var(--fnt-pink); --pink-2:var(--fnt-pink-2); --pink-deep:var(--fnt-pink-deep);
  --green:var(--fnt-green); --green-b:var(--fnt-green-b); --green-deep:var(--fnt-green-deep); --teal:var(--fnt-teal);
  --navy:var(--fnt-navy); --gold:var(--fnt-gold); --gold-deep:var(--fnt-gold-deep); --red:var(--fnt-red);
  --font-d:var(--fnt-font-d); --font-b:var(--fnt-font-b);
  --shadow:var(--fnt-shadow); --shadow-pop:var(--fnt-shadow-pop);
  color-scheme:light;
  background:var(--bg);color:var(--ink);font:400 16px/1.6 var(--font-b);
  font-variant-numeric:tabular-nums;-webkit-text-size-adjust:100%;
}
body.fantasy-v2{background:var(--fnt-bg)}
.fnt *{margin:0;padding:0;box-sizing:border-box}
.fnt img,.fnt svg{display:block}
.fnt a{color:inherit;text-decoration:none}
.fnt button,.fnt input,.fnt select,.fnt textarea{font-family:inherit}
.fnt button{cursor:pointer;touch-action:manipulation}
.fnt :focus-visible{outline:3px solid var(--pink);outline-offset:2px;border-radius:8px}
/* view headings get programmatic focus on navigation — don't show an outline box */
.fnt h2[tabindex="-1"]:focus,.fnt h2[tabindex="-1"]:focus-visible{outline:none}
.fnt ::selection{background:var(--pink);color:#fff}
.fnt .wrap{max-width:1240px;margin:0 auto;padding:0 24px}
.fnt [hidden]{display:none!important}

/* Hide the shared lobby top bars (pink quiz/spin tiles + daily-rewards hub,
   plus the promo banner + flash-offer bar) on the fantasy page only —
   body.fantasy-v2 is set only on this page. body.fantasy-rules-page is the
   landing-themed /fantasy/rules/ page, which cannot carry fantasy-v2 (its
   background would override the landing theme's). */
body.fantasy-v2 .dailyRewardsHub-compat,
body.fantasy-v2 #dailyRewardsHub,
body.fantasy-v2 #promoBanner,
body.fantasy-v2 #flashOfferBar,
body.fantasy-rules-page .dailyRewardsHub-compat,
body.fantasy-rules-page #dailyRewardsHub,
body.fantasy-rules-page #promoBanner,
body.fantasy-rules-page #flashOfferBar{display:none!important}
/* Tighten the gap before the shared site footer on the fantasy page. */
body.fantasy-v2 footer.site-footer{margin-top:0}

/* ============ FANTASY HUB ============
   Ported from the designer's "Choose your fantasy game" reference. Every
   selector keeps the page-local `fh-` prefix (or sits under `.fh`) so the
   ref's generic names never collide with the Bootstrap / games.css /
   redesign-cro-v2 rules this page also loads. The ref's own header, footer
   and :root token block are dropped: the page uses the real site header
   partial and the --fnt-* tokens above. */
.fh{--fh-tilt:-10deg;--fh-pitch-a:#12B263;--fh-pitch-b:#0DA058;--fh-mown:#EDF3EF;--fh-ease:cubic-bezier(.2,.7,.2,1);
  position:relative;color:var(--fnt-ink);font-family:var(--fnt-font-b);font-variant-numeric:tabular-nums;
  background:repeating-linear-gradient(calc(90deg - var(--fh-tilt)),var(--fh-mown) 0 120px,var(--fnt-bg) 120px 240px)}
.fh-wrap{width:min(1120px,100%);margin:0 auto;padding:0 24px}
/* own the [hidden] rule: .fh-meta dd small{display:flex} would otherwise show the empty countdown row without Bootstrap's reboot */
.fh [hidden]{display:none!important}

/* --- the hero --- */
/* The copy is centred in this box, so the height sets the space above the
   eyebrow: at 1520px the old clamp stood the hero at 456px and left 125px of
   white above it. Trimmed (29 Oct 2026) to put the headline nearer the top. */
.fh-hero{position:relative;height:clamp(345px,26vw,430px);overflow:hidden;background:#fff;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 48px),0 100%)}
.fh-hero-art{position:absolute;inset:0}
.fh-hero-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 22%;animation:fh-settle 2.2s var(--fh-ease) both}
/* keeps a white reading zone on the left whatever the viewport */
.fh-hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.9) 28%,rgba(255,255,255,.62) 42%,rgba(255,255,255,0) 57%)}
.fh-hero-copy{position:relative;z-index:2;display:flex;height:100%;flex-direction:column;justify-content:center;padding-bottom:44px}
.fh-eyebrow{display:inline-flex;align-items:center;gap:12px;margin:0 0 14px;color:var(--fnt-pink-deep);font:800 12.5px/1 var(--fnt-font-b);letter-spacing:3px;text-transform:uppercase}
.fh-eyebrow::before{content:"";width:26px;height:12px;background:var(--fnt-pink-deep);transform:skewX(var(--fh-tilt))}
.fh h1{display:flex;margin:0;flex-direction:column;color:var(--fnt-navy);font:italic 900 clamp(52px,6vw,88px)/.9 var(--fnt-font-d);letter-spacing:-.5px;text-transform:uppercase}
.fh h1 .fh-t2{color:transparent;-webkit-text-stroke:2px var(--fnt-navy);padding-right:.08em}
.fh-intro{margin:18px 0 0;max-width:520px;color:var(--fnt-muted);font-size:17px}

/* --- the game tickets --- */
.fh-fixtures{position:relative;z-index:2;padding:0 0 110px}
/* Negative margin pulls the ticket up into the hero's clipped bottom edge; it
   is what sets the gap under "Build a team...". -64px left 105px there at
   1520px, which read as a hole between the intro and the card. */
.fh-grid{display:grid;grid-template-columns:1fr;gap:20px;margin-top:-76px}
.fh-card{position:relative;display:grid;grid-template-columns:minmax(300px,42%) 1fr;overflow:hidden;
  border-radius:20px;background:var(--fnt-surface);box-shadow:var(--fnt-shadow);color:inherit;
  transition:transform .5s var(--fh-ease),box-shadow .5s var(--fh-ease)}
.fh-card--live:hover{transform:translateY(-6px);box-shadow:var(--fnt-shadow-pop)}

/* the key-art panel */
.fh-pitch{position:relative;min-height:240px;overflow:hidden;background:#0d1c32}
.fh-pitch img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 80%;transition:transform .9s var(--fh-ease)}
.fh-card--live:hover .fh-pitch img{transform:scale(1.04)}

/* status tag - a slanted broadcast lower-third */
.fh-status{position:absolute;z-index:2;top:18px;left:18px;display:inline-flex;align-items:center;gap:9px;height:32px;padding:0 15px;
  border-radius:4px;background:var(--fnt-line);color:var(--fnt-muted);font:800 12px/1 var(--fnt-font-b);letter-spacing:2.2px;
  text-transform:uppercase;transform:skewX(var(--fh-tilt))}
.fh-status>*{transform:skewX(calc(var(--fh-tilt) * -1))}
.fh-live{background:#fff;color:var(--fnt-green-deep);box-shadow:0 6px 18px rgba(5,59,35,.28)}
.fh-live i{position:relative;width:9px;height:9px;border-radius:50%;background:var(--fnt-green)}
.fh-live i::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--fnt-green);opacity:0;animation:fh-ping 1.8s var(--fh-ease) infinite}
@keyframes fh-ping{0%{transform:scale(.4);opacity:.9}70%{transform:scale(1.15);opacity:0}100%{opacity:0}}

.fh-card-main{display:flex;min-width:0;flex-direction:column}
.fh-card-body{padding:30px 34px 22px}
.fh-card h2{margin:0;color:var(--fnt-navy);font:italic 900 40px/1 var(--fnt-font-d);letter-spacing:-.2px;text-transform:uppercase}
.fh-card-body>p{margin:10px 0 0;max-width:520px;color:var(--fnt-muted);font-size:16px}

/* the stub - entry details under a perforation */
/* the font shorthand resets font-variant-numeric, so the ticking deadline rows re-declare tabular-nums */
.fh-stub{margin-top:auto;padding:20px 34px 30px;border-top:2px dashed var(--fnt-line-2)}
.fh-meta{display:grid;grid-template-columns:auto 1fr;gap:16px 36px;margin:0 0 20px}
.fh-meta dt{margin-bottom:7px;color:var(--fnt-muted-2);font:700 11px/1 var(--fnt-font-b);letter-spacing:2px;text-transform:uppercase;white-space:nowrap}
.fh-meta dd{margin:0;color:var(--fnt-navy);font:800 19px/1.2 var(--fnt-font-b);white-space:nowrap;font-variant-numeric:tabular-nums}
.fh-meta dd small{display:flex;align-items:center;gap:6px;margin-top:6px;color:var(--fnt-green-deep);font:700 12px/1 var(--fnt-font-b);letter-spacing:.3px;font-variant-numeric:tabular-nums}
.fh-meta dd small i{width:6px;height:6px;border-radius:50%;background:var(--fnt-green);box-shadow:0 0 0 3px rgba(0,179,97,.18)}

/* entries - how many players are in this gameweek, to show the activity */
.fh-entries{display:flex;align-items:center;gap:10px}
.fh-crowd{display:inline-flex;flex-shrink:0}
.fh-crowd i{width:26px;height:26px;margin-left:-9px;border-radius:50%;border:2px solid #fff;
  box-shadow:0 2px 6px rgba(14,21,38,.14);
  background:var(--fnt-navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Ccircle cx='12' cy='9' r='4'/%3E%3Cpath d='M4.5 21c1.1-3.6 4-5.6 7.5-5.6s6.4 2 7.5 5.6z'/%3E%3C/svg%3E") center/16px no-repeat}
.fh-crowd i:first-child{margin-left:0}
.fh-crowd i:nth-child(2){background-color:var(--fnt-pink)}
.fh-crowd i:nth-child(3){background-color:var(--fnt-green)}
.fh-entries em{font-style:normal;font-weight:600;color:var(--fnt-muted)}

/* the whistle - Play now */
.fh-cta{display:flex;align-items:center;justify-content:center;height:60px;margin:0;padding:0 24px;border-radius:14px;
  background:linear-gradient(135deg,var(--fnt-pink-2),var(--fnt-pink));color:#fff;text-decoration:none;
  box-shadow:0 10px 26px rgba(255,0,128,.3);transition:background .25s,transform .3s var(--fh-ease),box-shadow .3s var(--fh-ease)}
.fh-cta-label{display:inline-flex;align-items:center;gap:12px;font:italic 800 22px/1 var(--fnt-font-d);letter-spacing:1.6px;text-transform:uppercase}
.fh-cta-label svg{display:block;width:24px;height:24px;transition:transform .35s var(--fh-ease)}
.fh-cta:hover{background:linear-gradient(135deg,var(--fnt-pink-2),var(--fnt-pink-deep));color:#fff;transform:translateY(-2px);box-shadow:0 14px 32px rgba(255,0,128,.4)}
.fh-cta:hover .fh-cta-label svg{transform:translateX(6px)}
.fh-cta:active{transform:none;filter:brightness(.95)}

/* --- one load sequence --- */
/* backwards, not both: a forwards fill would pin transform:none and kill the card's hover lift */
.fh-reveal{animation:fh-rise .7s var(--fh-ease) backwards;animation-delay:calc(var(--fh-i,0) * 70ms)}
.fh h1 .fh-reveal{animation-name:fh-slide}
@keyframes fh-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes fh-slide{from{opacity:0;transform:translateX(-36px)}to{opacity:1;transform:none}}
@keyframes fh-settle{from{transform:scale(1.045)}to{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){
  .fh-reveal,.fh h1 .fh-reveal{animation:none}
  .fh-hero-art img{animation:none;transform:none}
  .fh-live i::after{animation:none}
  .fh-card,.fh-pitch,.fh-pitch img,.fh-cta,.fh-cta-label svg{transition:none}
}
/* Trimmed 29 Oct 2026, 69px -> 57px: the bar carries only the back link now
   that Scoring rules moved to the hero, so it needed less room around it. The
   crumb's own 16px margin-bottom is half the bar's height, hence the override
   here rather than only touching the padding -- it is scoped to this bar so
   the "All groups" crumb inside the Groups view keeps its spacing. */
.fnt .fantasy-backlink{padding-top:10px}
.fnt .fantasy-backlink .crumb{display:inline-flex;margin-bottom:10px}
.fnt .lb-note{display:block;width:100%;color:var(--muted);font-size:13px}
@media (max-width:1100px){.fh-card{grid-template-columns:minmax(260px,40%) 1fr}}
@media (max-width:900px){
  .fh-hero{display:flex;height:auto;flex-direction:column;background:transparent;clip-path:none}
  .fh-hero::before{display:none}
  .fh-hero-copy{order:1;height:auto;padding:38px 20px 22px;background:#fff}
  .fh-hero-art{order:2;position:relative;height:clamp(230px,46vw,340px);clip-path:polygon(0 0,100% 0,100% calc(100% - 34px),0 100%)}
  .fh-hero-art img{object-position:60% 50%;animation:none}
  .fh h1{font-size:clamp(50px,13vw,76px)}
  .fh-intro{margin-top:16px;font-size:16px}
  .fh-fixtures{padding-bottom:72px}
  .fh-grid{grid-template-columns:1fr;margin-top:-56px}
  .fh-card{grid-template-columns:1fr}
  .fh-pitch{min-height:0;height:auto;aspect-ratio:1}
  .fh-pitch img{object-position:50% 50%}
  .fh-card-body{padding:22px 20px 18px}
  .fh-card h2{font-size:34px}
  .fh-stub{padding:18px 20px 22px}
  .fh-meta{grid-template-columns:1fr;gap:14px}
  .fh-meta dd{white-space:normal}
  .fh-cta-label{font-size:20px}
}
@media (max-width:420px){
  .fh h1{font-size:clamp(44px,14vw,56px)}
  .fh-meta{gap:14px 24px}
}

/* Light, slim scrollbars for the fantasy scroll areas (dropdown panel, lists) */
.fnt .dd-panel,.fnt .arm-list,.fnt .bubbles,.fnt .fantasy-chat-list,.fnt .add-sheet{scrollbar-width:thin;scrollbar-color:#D8DDEA transparent}
.fnt .dd-panel::-webkit-scrollbar,.fnt .arm-list::-webkit-scrollbar,.fnt .bubbles::-webkit-scrollbar,.fnt .fantasy-chat-list::-webkit-scrollbar,.fnt .add-sheet::-webkit-scrollbar{width:10px;height:10px}
.fnt .dd-panel::-webkit-scrollbar-thumb,.fnt .arm-list::-webkit-scrollbar-thumb,.fnt .bubbles::-webkit-scrollbar-thumb,.fnt .fantasy-chat-list::-webkit-scrollbar-thumb,.fnt .add-sheet::-webkit-scrollbar-thumb{background:#D8DDEA;border-radius:8px;border:2px solid transparent;background-clip:content-box}
.fnt .dd-panel::-webkit-scrollbar-thumb:hover,.fnt .arm-list::-webkit-scrollbar-thumb:hover,.fnt .bubbles::-webkit-scrollbar-thumb:hover,.fnt .fantasy-chat-list::-webkit-scrollbar-thumb:hover,.fnt .add-sheet::-webkit-scrollbar-thumb:hover{background:#C9D2E3}
.fnt .dd-panel::-webkit-scrollbar-track,.fnt .arm-list::-webkit-scrollbar-track,.fnt .bubbles::-webkit-scrollbar-track,.fnt .fantasy-chat-list::-webkit-scrollbar-track,.fnt .add-sheet::-webkit-scrollbar-track{background:transparent}
/* disabled dropdown options (locked / not-current gameweeks) — muted text,
   but the state icon keeps its own colour (green tick / lock). */
.fnt .dd-opt[disabled]{color:var(--muted-2);cursor:not-allowed}
.fnt .dd-opt[disabled]:hover{background:transparent}
.fnt .dd-opt .dd-state{width:16px;height:16px;margin-left:auto;flex:none}
.fnt .dd-opt .dd-state.done{color:var(--gold-deep)}
.fnt .dd-opt .dd-state.lock{color:var(--muted-2)}

/* ============ APP SHELL ============ */
/* z-index MUST stay below the New-UI layout header's 30 (new_ui_layout.css).
   That header is position:sticky with z-index:30, so it opens a stacking
   context: its avatar dropdown (.user-menu, z-index:50) can only rise above
   the header's own children, never above page furniture that outranks the
   header itself. At 90 this bar painted over the open dropdown and swallowed
   the clicks on Profile / Stats / Logout. Site chrome outranks page
   furniture; raise this above 30 and those links stop working again. */
.fnt .appbar{position:sticky;top:53px;z-index:20;background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.fnt .appbar-in{display:flex;align-items:center;gap:4px;height:56px}
.fnt .ab-tab{display:inline-flex;align-items:center;gap:8px;padding:0 16px;height:56px;
  font:600 15px/1 var(--font-b);color:var(--muted);border-bottom:3px solid transparent;
  border-top:3px solid transparent;transition:color .15s}
.fnt .ab-tab .ic{width:19px;height:19px}
.fnt .ab-tab:hover{color:var(--ink)}
.fnt .ab-tab.on{color:var(--pink-deep);border-bottom-color:var(--pink)}
.fnt .ab-spacer{flex:1}
.fnt .ab-tab .lk,.fnt .tb-item .lk{width:14px;height:14px;opacity:.5;display:none}
.fnt .ab-tab.locked,.fnt .tb-item.locked{opacity:.45;cursor:not-allowed}
.fnt .ab-tab.locked .lk,.fnt .tb-item.locked .lk{display:block}
.fnt .ab-tab.bonus{margin-left:8px;height:38px;align-self:center;padding:0 15px;border-radius:11px;
  background:linear-gradient(120deg,var(--green),var(--green-deep));color:#fff;
  border-top-color:transparent;border-bottom-color:transparent;box-shadow:0 6px 16px rgba(0,179,97,.28)}
.fnt .ab-tab.bonus:hover,.fnt .ab-tab.bonus.on{color:#fff;border-bottom-color:transparent}
.fnt .ab-tab.bonus .ic{color:#fff}
.fnt .ab-tab.bonus .ab-bonus-ic{width:16px;height:16px;color:#FFE08A;margin-left:1px}
.fnt .tb-item.bonus{color:var(--pink-deep)}
.fnt .tb-item.bonus.on{background:rgba(255,0,128,.1)}
.fnt .tb-item .lk{position:absolute;top:4px;right:50%;margin-right:-16px}
.fnt .tb-item{position:relative}
/* progress stepper */
.fnt .stepper{list-style:none;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px 16px;box-shadow:var(--shadow)}
.fnt .step{display:flex;align-items:center;gap:9px;font:700 13px/1.2 var(--font-b);color:var(--muted-2)}
.fnt .step i{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:var(--line);color:var(--muted);font:900 12px/1 var(--font-b);font-style:normal}
.fnt .step i .ic{width:14px;height:14px}
.fnt .step.now{color:var(--ink)}
.fnt .step.now i{background:linear-gradient(140deg,var(--pink),var(--pink-deep));color:#fff;
  box-shadow:0 0 0 4px rgba(255,0,128,.15)}
.fnt .step.done{color:var(--green-deep)}
.fnt .step.done i{background:var(--green);color:#fff}
.fnt .step-line{flex:1;min-width:18px;height:2px;border-radius:2px;background:var(--line-2)}
.fnt .step-line.done{background:var(--green)}
.fnt .hcard .h-step{margin-left:auto;font:900 9.5px/1 var(--font-b);letter-spacing:.9px;text-transform:uppercase;
  border-radius:99px;padding:5px 9px;background:var(--bg);color:var(--muted-2);border:1px solid var(--line);flex:none}
.fnt .hcard .h-step.now{background:rgba(255,0,128,.1);color:var(--pink-deep);border-color:rgba(255,0,128,.3)}
.fnt .hcard .h-step.done{background:rgba(0,179,97,.12);color:var(--green-deep);border-color:rgba(0,179,97,.32)}
.fnt .hcard .h-step .h-trophy{width:15px;height:15px;display:block;color:var(--gold-deep)}
.fnt .hcard.is-locked{opacity:.72}
.fnt .bonus-card{border-color:rgba(255,0,128,.32);box-shadow:0 10px 30px rgba(255,0,128,.1)}
.fnt .lock-note{display:flex;align-items:center;gap:8px;font:600 12.5px/1.4 var(--font-b);color:var(--muted-2)}
.fnt .lock-note .ic{width:14px;height:14px;flex:none}
.fnt .pf-locked{display:flex;gap:9px;align-items:flex-start;background:var(--bg);border:1px solid var(--line);
  border-radius:12px;padding:11px 13px;font:600 12.5px/1.45 var(--font-b);color:var(--muted)}
.fnt .pf-locked .ic{width:15px;height:15px;flex:none;margin-top:1px;color:var(--muted-2)}
.fnt .ab-profile{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line-2);
  background:#fff;border-radius:999px;padding:6px 14px 6px 6px;font:600 13.5px/1 var(--font-b);
  color:var(--ink);min-height:44px;transition:border-color .15s,box-shadow .15s}
.fnt .ab-profile:hover{border-color:var(--pink);box-shadow:0 4px 14px rgba(255,0,128,.12)}
.fnt .ab-ava{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--green-deep),var(--teal));color:#fff;
  font:800 12px/1 var(--font-b);letter-spacing:.4px}
.fnt main{min-height:60vh}
.fnt .view{padding:30px 0 64px;animation:fntViewIn .24s ease-out}
/* the full-bleed home hero sits flush under the site header, above the menu bar */
.fnt #homeHero .home-hero{border-top:0}
/* tighter gap between the menu bar and the Home cards */
.fnt #view-home{padding-top:12px}
@keyframes fntViewIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.fnt .view-head{display:flex;align-items:end;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:20px}
.fnt .view-head h2{font:italic 800 clamp(30px,4vw,42px)/1 var(--font-d);text-transform:uppercase;letter-spacing:.5px}
.fnt .view-head h2 .tint{color:var(--green-deep);font-style:italic}
.fnt .view-head .sub{color:var(--muted);font-size:14.5px;margin-top:6px;max-width:56ch}
.fnt .vh-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.fnt .crumb{display:inline-flex;align-items:center;gap:7px;font:600 13.5px/1 var(--font-b);
  color:var(--muted);margin-bottom:16px;padding:9px 14px 9px 10px;border:1px solid var(--line);
  border-radius:999px;background:#fff;transition:color .15s,border-color .15s}
.fnt .crumb:hover{color:var(--pink-deep);border-color:var(--pink)}
.fnt .crumb .ic{width:15px;height:15px}
/* bottom tab bar (mobile) */
.fnt .tabbar{position:fixed;left:0;right:0;bottom:0;z-index:110;display:none;
  background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-top:1px solid var(--line-2);box-shadow:0 -8px 30px rgba(19,27,46,.08);
  padding:6px 8px calc(6px + env(safe-area-inset-bottom))}
.fnt .tabbar-in{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;max-width:560px;margin:0 auto}
.fnt .tb-item{display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 4px 6px;
  border-radius:12px;font:600 11px/1 var(--font-b);color:var(--muted-2);min-height:48px;
  transition:color .15s,background .15s}
.fnt .tb-item .ic{width:22px;height:22px}
.fnt .tb-item.on{color:var(--pink-deep);background:rgba(255,0,128,.07)}
.fnt .tb-item:active{transform:scale(.96)}
/* ============ PRIMITIVES ============ */
.fnt .card{background:var(--surface);border:1px solid var(--line);border-radius:20px;
  padding:22px;box-shadow:var(--shadow)}
.fnt .card h3{font:italic 800 21px/1.1 var(--font-d);text-transform:uppercase;letter-spacing:.4px;margin-bottom:4px}
.fnt .card .note{color:var(--muted);font-size:13.5px}
.fnt .g-2{display:grid;grid-template-columns:1.25fr .85fr;gap:18px;align-items:start}
.fnt .stack{display:grid;gap:18px}
.fnt .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;
  border-radius:13px;padding:13px 20px;font:700 14.5px/1 var(--font-b);min-height:46px;
  transition:transform .12s,box-shadow .15s,background .15s,color .15s,border-color .15s}
.fnt .btn .ic{width:17px;height:17px}
.fnt .btn:active{transform:scale(.97)}
.fnt .btn[disabled]{opacity:.45;cursor:not-allowed;transform:none!important;box-shadow:none!important}
.fnt .btn-p{background:linear-gradient(120deg,var(--pink),var(--pink-deep));color:#fff;
  box-shadow:0 10px 26px rgba(255,0,128,.3)}
.fnt .btn-p:hover:not([disabled]){box-shadow:0 14px 32px rgba(255,0,128,.4)}
.fnt .btn-g{background:linear-gradient(120deg,var(--green),var(--green-deep));color:#fff;
  box-shadow:0 10px 26px rgba(0,179,97,.26)}
.fnt .btn-o{background:#fff;color:var(--ink);border:1.5px solid var(--line-2)}
.fnt .btn-o:hover:not([disabled]){border-color:var(--pink);color:var(--pink-deep)}
.fnt .btn-t{background:transparent;color:var(--muted);border:1.5px solid transparent}
.fnt .btn-t:hover{color:var(--red)}
.fnt .btn-sm{padding:9px 14px;min-height:38px;font-size:13px;border-radius:10px}
.fnt .fld{display:grid;gap:6px;font:600 13px/1.2 var(--font-b);color:var(--ink)}
.fnt .fld .help{font-weight:400;color:var(--muted-2);font-size:12.5px}
.fnt .in{width:100%;border:1.5px solid var(--line-2);border-radius:12px;background:#fff;
  padding:12px 14px;font:500 15px/1.3 var(--font-b);color:var(--ink);min-height:46px;
  transition:border-color .15s,box-shadow .15s}
.fnt .in:focus{outline:none;border-color:var(--pink);box-shadow:0 0 0 4px rgba(255,0,128,.11)}
.fnt .in:disabled,.fnt .in[readonly]{background:var(--surface);color:var(--muted);cursor:not-allowed;opacity:.85}
.fnt .in::placeholder{color:var(--muted-2)}
.fnt select.in{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235A6478' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
/* ---- designed dropdown (native select kept for value + change events) ---- */
.fnt .dd{position:relative;min-width:0}
.fnt .dd-native{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;margin:0;padding:0;border:0;clip:rect(0 0 0 0)}
.fnt .dd-btn{display:flex;align-items:center;gap:10px;width:100%;min-height:46px;padding:10px 12px 10px 14px;
  border:1.5px solid var(--line-2);border-radius:12px;background:#fff;color:var(--ink);
  font:600 14.5px/1.2 var(--font-b);text-align:left;
  transition:border-color .15s,box-shadow .15s,background .15s}
.fnt .dd-btn:hover{border-color:var(--muted-2)}
.fnt .dd.open .dd-btn{border-color:var(--pink);box-shadow:0 0 0 4px rgba(255,0,128,.11)}
.fnt .dd-lbl{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fnt .dd-btn .dd-chev{width:15px;height:15px;color:var(--muted);flex:none;transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.fnt .dd.open .dd-btn .dd-chev{transform:rotate(180deg);color:var(--pink-deep)}
.fnt .dd-panel{position:absolute;z-index:70;top:calc(100% + 6px);left:0;right:0;min-width:100%;
  background:#fff;border:1px solid var(--line);border-radius:15px;box-shadow:var(--shadow-pop);
  padding:6px;max-height:302px;overflow:auto;overscroll-behavior:contain;
  animation:fntDdIn .16s cubic-bezier(.2,.8,.2,1)}
.fnt .dd-panel.up{top:auto;bottom:calc(100% + 6px)}
@keyframes fntDdIn{from{opacity:0;transform:translateY(-7px) scale(.985)}to{opacity:1;transform:none}}
.fnt .dd-opt{display:flex;align-items:center;gap:11px;width:100%;padding:10px 12px;border:none;
  border-radius:10px;background:transparent;text-align:left;min-height:46px;
  font:600 14px/1.25 var(--font-b);color:var(--ink);transition:background .12s}
.fnt .dd-opt:hover,.fnt .dd-opt.active{background:var(--bg)}
.fnt .dd-opt[aria-selected="true"]{color:var(--pink-deep);background:rgba(255,0,128,.06)}
.fnt .dd-opt .dd-tick{width:16px;height:16px;margin-left:auto;flex:none;opacity:0;color:var(--pink)}
.fnt .dd-opt[aria-selected="true"] .dd-tick{opacity:1}
.fnt .dd-swatch{width:18px;height:18px;border-radius:6px;flex:none;
  border:1px solid rgba(19,27,46,.16);background:linear-gradient(135deg,var(--c1,#ccc) 0 50%,var(--c2,#eee) 50% 100%)}
.fnt .dd-opt .dd-txt{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fnt .seg{display:inline-flex;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:4px;gap:2px;flex-wrap:wrap}
.fnt .seg button{border:none;background:transparent;border-radius:9px;padding:9px 15px;
  font:600 13px/1 var(--font-b);color:var(--muted);min-height:44px;transition:background .15s,color .15s}
.fnt .seg button.on{background:#fff;color:var(--pink-deep);box-shadow:0 2px 8px rgba(19,27,46,.1)}
.fnt .chip{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:8px 14px;font:600 13px/1.2 var(--font-b);color:var(--ink)}
.fnt .chip .ic{width:15px;height:15px;color:var(--green-deep)}
.fnt .chip b{font-weight:800}
.fnt .pill-live{display:inline-flex;align-items:center;gap:7px;background:rgba(0,217,125,.13);
  border:1px solid rgba(0,179,97,.35);color:var(--green-deep);border-radius:999px;
  padding:7px 13px;font:700 12px/1 var(--font-b);letter-spacing:.6px;text-transform:uppercase}
.fnt .pill-live i{width:8px;height:8px;border-radius:50%;background:var(--green-b);animation:fntPulse 1.6s infinite}
@keyframes fntPulse{0%,100%{opacity:1}50%{opacity:.35}}
.fnt .banner{display:flex;gap:11px;align-items:flex-start;border-radius:14px;padding:14px 16px;
  font-size:14px;line-height:1.5;margin:0 0 16px}
.fnt .banner .ic{width:19px;height:19px;flex:none;margin-top:1px}
.fnt .banner ul{margin:2px 0 0 18px}
.fnt .banner.ok{background:rgba(0,179,97,.09);border:1px solid rgba(0,179,97,.3);color:var(--green-deep)}
.fnt .banner.bad{background:rgba(217,45,32,.07);border:1px solid rgba(217,45,32,.3);color:var(--red)}
.fnt .banner.warn{background:rgba(245,166,35,.1);border:1px solid rgba(245,166,35,.4);color:var(--gold-deep)}
.fnt .banner.info{background:var(--bg);border:1px solid var(--line);color:var(--ink)}
.fnt .metric{background:var(--bg);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.fnt .metric span{display:block;font:700 11px/1 var(--font-b);letter-spacing:.8px;text-transform:uppercase;color:var(--muted-2);margin-bottom:6px}
.fnt .metric b{font:800 17px/1.2 var(--font-b);color:var(--ink)}
.fnt .metric.miss{border-color:rgba(245,166,35,.55);background:rgba(245,166,35,.09)}
.fnt .metric.miss b{color:var(--gold-deep)}
.fnt .avatar-i{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none;
  background:linear-gradient(135deg,var(--navy),#22304F);color:#fff;font:800 13px/1 var(--font-b);letter-spacing:.5px}
.fnt .empty{border:1.5px dashed var(--line-2);border-radius:18px;padding:34px 22px;text-align:center;background:#fff}
.fnt .empty .ic{width:34px;height:34px;color:var(--muted-2);margin:0 auto 10px}
.fnt .empty b{display:block;font:700 16px/1.3 var(--font-b);margin-bottom:4px}
.fnt .empty p{color:var(--muted);font-size:13.5px;margin-bottom:16px}
.fnt .empty .btn{margin:0 6px}
/* ============ HOME ============ */
.fnt .home-hero{background:linear-gradient(160deg,var(--navy) 0%,#152647 55%,#0F3D2E 100%);
  color:#fff;padding:44px 0 40px;position:relative;overflow:hidden;border-bottom:4px solid var(--green)}
.fnt .home-hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(520px 220px at 85% 0%,rgba(0,217,125,.22),transparent 65%),
             radial-gradient(420px 200px at 5% 100%,rgba(255,0,128,.16),transparent 60%)}
.fnt .hh-in{position:relative;z-index:1}
.fnt .hh-eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.fnt .hh-eyebrow em{font:italic 800 13px/1 var(--font-d);letter-spacing:2.5px;text-transform:uppercase;color:var(--green-b)}
.fnt .home-hero h2{font:italic 900 clamp(40px,6vw,68px)/0.95 var(--font-d);text-transform:uppercase;letter-spacing:.5px}
.fnt .home-hero h2 .tint{color:var(--green-b);font-style:italic}
.fnt .hh-lede{color:#B9C4DC;font-size:15.5px;max-width:58ch;margin:12px 0 20px}
.fnt .hh-chips{display:flex;gap:10px;flex-wrap:wrap}
.fnt .hh-chips .chip{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#fff}
.fnt .hh-chips .chip .ic{color:var(--green-b)}
.fnt .hh-chips .chip b{color:#fff;font-variant-numeric:tabular-nums}
/* Scoring rules sits in the chip row but is a control, not a fact, so it is
   filled rather than outlined -- and is not a .chip, which keeps the compact
   phone hero (which hides every chip after the first) from swallowing it. */
.fnt .hh-chips .hh-rules{display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  background:var(--green-b);border:1px solid var(--green-b);color:var(--navy);
  border-radius:999px;padding:8px 15px;font:800 13px/1 var(--font-b);
  transition:filter .16s ease,transform .16s ease}
.fnt .hh-chips .hh-rules .ic{width:15px;height:15px;color:var(--navy)}
.fnt .hh-chips .hh-rules:hover{filter:brightness(1.07);transform:translateY(-1px)}
.fnt .hh-chips .hh-rules:focus-visible{outline:3px solid #fff;outline-offset:2px}
.fnt .home-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin:26px 0 10px}
.fnt .hcard{position:relative;display:flex;flex-direction:column;gap:12px;min-height:172px}
.fnt .hcard .h-top{display:flex;align-items:center;gap:12px}
.fnt .hcard .h-ic{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;flex:none;color:#fff}
.fnt .hcard .h-ic .ic{width:21px;height:21px}
.fnt .hcard .h-body{flex:1}
.fnt .hcard .h-foot{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.fnt .hcard .name-form{display:grid;gap:9px}
.fnt .hcard .h-foot .btn{min-height:44px}
/* Home card CTAs: green outline + green text; fill green with white text on hover */
.fnt .hcard .h-foot .btn{background:#fff;color:var(--green-deep);border:1.5px solid var(--green);box-shadow:none}
.fnt .hcard .h-foot .btn:hover:not([disabled]){background:linear-gradient(120deg,var(--green),var(--green-deep));color:#fff;border-color:var(--green-deep)}
.fnt .hcard .name-form .in{min-height:44px}
.fnt .fld-err{font:600 12.5px/1.4 var(--font-b);color:var(--red)}
.fnt .h-rows{display:grid;gap:7px}
.fnt .h-row{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;color:var(--muted);
  border-bottom:1px dashed var(--line);padding-bottom:7px}
.fnt .h-row b{color:var(--ink);font-weight:700}
.fnt .h-row:last-child{border-bottom:none;padding-bottom:0}
.fnt .activity{list-style:none;display:grid;gap:10px;margin:14px 0 0}
.fnt .activity li{display:flex;align-items:center;gap:13px;background:#fff;border:1px solid var(--line);
  border-radius:15px;padding:13px 16px}
.fnt .act-ic{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;flex:none;color:#fff}
.fnt .act-ic .ic{width:17px;height:17px}
.fnt .activity .a-t{flex:1;font-size:14px}
.fnt .activity .a-t b{font-weight:700}
.fnt .activity time{color:var(--muted-2);font-size:12.5px;flex:none}
.fnt .sec-h{display:flex;align-items:center;justify-content:space-between;margin-top:30px}
.fnt .sec-h h3{font:italic 800 22px/1 var(--font-d);text-transform:uppercase;letter-spacing:.5px}
/* ============ TEAM BUILDER ============ */
.fnt .sb-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:18px;align-items:start}
.fnt .kit{width:26px;height:24px;flex:none}
.fnt .ppr{font:800 14px/1 var(--font-b);color:var(--ink);background:var(--bg);border:1px solid var(--line);
  border-radius:9px;padding:8px 10px;flex:none;min-width:52px;text-align:center}
.fnt .more-row{text-align:center;color:var(--muted-2);font-size:12.5px;padding:12px}
.fnt .add-sheet{position:fixed;inset:0;z-index:1195;background:var(--bg);overflow:auto;
  overscroll-behavior:contain;transform:translateY(3%);opacity:0;
  transition:transform .26s cubic-bezier(.2,.8,.2,1),opacity .2s}
.fnt .add-sheet.open{transform:none;opacity:1}
.fnt .ap-head{position:sticky;top:0;z-index:5;background:rgba(255,255,255,.95);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.fnt .ap-head-in{max-width:880px;margin:0 auto;display:flex;align-items:center;gap:14px;padding:12px 16px}
.fnt .ap-head h3{font:italic 800 22px/1 var(--font-d);text-transform:uppercase;letter-spacing:.8px;flex:1}
.fnt .ap-ctx{font:600 13px/1.3 var(--font-b);color:var(--muted);text-align:right}
.fnt .ap-ctx b{color:var(--green-deep);font-weight:800}
.fnt .ap-wrap{max-width:880px;margin:0 auto;padding:18px 16px 46px;display:grid;gap:16px}
.fnt .ap-b-row{display:flex;justify-content:space-between;font:700 11px/1 var(--font-b);
  letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.fnt .ap-track{position:relative;height:34px;border-radius:999px;background:#E3E8F2;overflow:hidden}
.fnt .ap-track i{position:absolute;inset:0 auto 0 0;width:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--green-b),var(--teal));transition:width .4s cubic-bezier(.2,.8,.2,1)}
.fnt .ap-track b{position:absolute;inset:0;display:grid;place-items:center;font:800 14px/1 var(--font-b);
  color:#fff;text-shadow:0 1px 4px rgba(7,60,40,.45);font-variant-numeric:tabular-nums}
.fnt .ap-controls{display:grid;grid-template-columns:1.5fr 1fr;gap:10px}
.fnt .ap-sort{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.fnt #apSort button,.fnt #apScope button{min-height:36px;padding:7px 14px}
.fnt .ap-count{font:600 12.5px/1 var(--font-b);color:var(--muted-2);margin-left:auto}
.fnt .ap-card{padding:18px 18px 8px}
.fnt .ap-card h3{margin-bottom:10px}
.fnt .ap-elsewhere{margin:0 0 10px;font-size:13px}
.fnt .ap-elsewhere-go{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.fnt .ap-hrow,.fnt .ap-row{display:grid;grid-template-columns:30px minmax(0,1fr) 96px 44px;
  gap:10px;align-items:center}
.fnt .ap-hrow{font:700 10.5px/1 var(--font-b);letter-spacing:1px;text-transform:uppercase;
  color:var(--muted-2);padding:4px 2px 10px}
.fnt .ap-hrow .ap-num,.fnt .ap-row .ap-num{text-align:right}
.fnt .ap-row{padding:11px 2px;border-top:1px solid var(--line)}
.fnt .ap-row .ap-n{min-width:0}
.fnt .ap-row .ap-n b{display:block;font:700 14px/1.25 var(--font-b);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fnt .ap-row .ap-n span{font-size:11.5px;color:var(--muted-2)}
.fnt .ap-row .ap-n .why{color:var(--red);font-weight:600}
.fnt .ap-row .ap-pts{font:800 13.5px/1 var(--font-b);color:var(--green-deep)}
.fnt .ap-row .ap-price{font:800 13.5px/1 var(--font-b)}
.fnt .ap-row .ap-sel{font:600 12.5px/1 var(--font-b);color:var(--muted)}
.fnt .ap-add{width:40px;height:40px;border-radius:50%;border:1.8px solid var(--green);color:var(--green-deep);
  background:rgba(0,179,97,.07);display:grid;place-items:center;justify-self:end;
  transition:transform .12s,background .15s,color .15s}
.fnt .ap-add .ic{width:17px;height:17px}
.fnt .ap-add:hover:not([disabled]){background:var(--green);color:#fff}
.fnt .ap-add:active{transform:scale(.92)}
.fnt .ap-add[disabled]{border-color:var(--line-2);color:var(--muted-2);background:var(--bg);cursor:not-allowed}
.fnt .ap-row.dim .ap-n b,.fnt .ap-row.dim .ap-pts,.fnt .ap-row.dim .ap-price{color:var(--muted-2)}
.fnt .budget-panel{background:linear-gradient(135deg,var(--navy),#1B2C50);border-radius:20px;color:#fff;
  padding:20px 22px;box-shadow:var(--shadow)}
.fnt .bp-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.fnt .bp-top b{font:800 26px/1 var(--font-b);font-variant-numeric:tabular-nums}
.fnt .bp-top span{color:#9FB0CE;font-size:13px}
.fnt .bp-bar{height:10px;border-radius:99px;background:rgba(255,255,255,.14);margin:13px 0 12px;overflow:hidden}
.fnt .bp-bar i{display:block;height:100%;border-radius:99px;width:0;
  background:linear-gradient(90deg,var(--green-b),var(--teal));transition:width .5s cubic-bezier(.2,.8,.2,1)}
.fnt .bp-bar i.hot{background:linear-gradient(90deg,var(--gold),#FF6B4A)}
.fnt .bp-pills{display:flex;gap:7px;flex-wrap:wrap}
.fnt .bp-pills .pill{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);
  border-radius:999px;padding:6px 11px;font:700 11.5px/1 var(--font-b);color:#CFE9DC}
.fnt .bp-pills .pill.done{background:rgba(0,217,125,.2);border-color:rgba(0,217,125,.45);color:#8CF5C3}
.fnt .squad-card{padding:0;overflow:hidden}
.fnt .pitch-top{display:flex;justify-content:space-between;align-items:center;gap:12px;
  background:linear-gradient(90deg,var(--green-deep),var(--teal));color:#fff;padding:12px 18px}
.fnt .pitch-top em{font:italic 800 15px/1 var(--font-d);letter-spacing:1.8px;text-transform:uppercase}
.fnt .pitch-top b{font:800 12.5px/1 var(--font-b);letter-spacing:1px;text-transform:uppercase;font-variant-numeric:tabular-nums}
.fnt .pitch{position:relative;background:linear-gradient(180deg,#3AB169 0%,#1E8A4A 100%);overflow:hidden;
  padding:30px 12px 34px}
.fnt .pitch::before{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.055) 0 30px,rgba(255,255,255,0) 30px 60px)}
.fnt .pitch-lines{position:absolute;inset:0;width:100%;height:100%;opacity:.55;pointer-events:none}
.fnt .p-rows{position:relative;display:grid;gap:24px}
.fnt .p-row{display:flex;justify-content:center;gap:10px}
.fnt .slot{position:relative;flex:1 1 0;min-width:38px;max-width:94px;border-radius:13px;padding:11px 5px 9px;
  display:grid;justify-items:center;gap:5px;color:#fff;cursor:pointer;
  border:1.5px dashed rgba(255,255,255,.55);background:rgba(7,53,30,.32);
  transition:transform .12s,background .15s,border-color .15s}
.fnt .slot:hover{background:rgba(7,53,30,.5);border-color:#fff}
.fnt .slot:active{transform:scale(.94)}
.fnt .slot .ic{width:20px;height:20px;opacity:.95}
.fnt .slot em{font:800 10.5px/1 var(--font-b);letter-spacing:1.2px;font-style:normal}
.fnt .slot.filled{border:1.5px solid rgba(255,255,255,.3);background:rgba(9,44,27,.3);padding:8px 4px 6px;gap:4px}
.fnt .slot.filled:hover{background:rgba(9,44,27,.5)}
.fnt .slot .kit{width:30px;height:27px}
.fnt .plate{max-width:100%;background:#fff;color:var(--ink);font:700 10.5px/1.2 var(--font-b);
  border-radius:6px;padding:3px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fnt .plate2{background:var(--navy);color:#fff;font:800 9.5px/1 var(--font-b);border-radius:6px;padding:3px 6px}
/* armband slots: their own colour so they read at a glance */
.fnt .slot.filled.is-cap{background:linear-gradient(165deg,rgba(245,166,35,.96),rgba(196,120,6,.96));
  border:2px solid #FFD979;box-shadow:0 0 0 3px rgba(245,166,35,.28),0 10px 22px rgba(120,72,0,.45)}
.fnt .slot.filled.is-cap:hover{background:linear-gradient(165deg,rgba(255,183,60,.98),rgba(214,133,8,.98))}
.fnt .slot.filled.is-cap .plate{background:#FFF6E0;color:#5A3D00}
.fnt .slot.filled.is-cap .plate2{background:#5A3D00;color:#FFE9B0}
.fnt .slot.filled.is-vc{background:linear-gradient(165deg,rgba(150,163,187,.96),rgba(90,105,136,.96));
  border:2px solid #E2E8F4;box-shadow:0 0 0 3px rgba(180,192,214,.3),0 10px 22px rgba(30,42,68,.4)}
.fnt .slot.filled.is-vc:hover{background:linear-gradient(165deg,rgba(168,180,201,.98),rgba(104,120,152,.98))}
.fnt .slot.filled.is-vc .plate{background:#F2F5FB;color:#25304A}
.fnt .slot.filled.is-vc .plate2{background:#25304A;color:#DCE3F0}
/* badge breaks out of the card so it is impossible to miss */
.fnt .badge{position:absolute;top:-11px;right:-10px;min-width:28px;height:28px;padding:0 5px;
  border-radius:999px;z-index:3;display:grid;place-items:center;
  font:900 12px/1 var(--font-b);letter-spacing:.3px;border:2.5px solid #fff;
  box-shadow:0 4px 12px rgba(14,21,38,.45);animation:fntBadgePop .28s cubic-bezier(.2,1.5,.4,1)}
@keyframes fntBadgePop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
/* provider says the player is ruled out (injury / suspension) */
.fnt .tag-out{position:absolute;top:-9px;left:-8px;z-index:3;padding:4px 6px;border-radius:999px;
  background:var(--red);color:#fff;font:900 9.5px/1 var(--font-b);letter-spacing:.4px;border:2px solid #fff;
  box-shadow:0 3px 10px rgba(14,21,38,.35);white-space:nowrap;max-width:calc(100% + 16px);overflow:hidden;text-overflow:ellipsis}
.fnt .slot.filled.is-out{opacity:.82}
.fnt .mp-out{margin:10px 0 4px}
.fnt .badge.c{background:linear-gradient(150deg,#FFD979,var(--gold));color:#3A2A00}
.fnt .badge.v{background:linear-gradient(150deg,#F2F5FB,#C2CBDC);color:#25304A;font-size:10.5px}
/* legend under the pitch */
.fnt .pitch-key{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;padding:12px 16px 0}
.fnt .pitch-key span{display:inline-flex;align-items:center;gap:7px;font:600 12px/1 var(--font-b);color:var(--muted)}
.fnt .pitch-key i{width:15px;height:15px;border-radius:5px;display:inline-block;flex:none}
.fnt .pitch-key i.k-cap{background:linear-gradient(150deg,#FFD979,var(--gold));border:1px solid var(--gold-deep)}
.fnt .pitch-key i.k-vc{background:linear-gradient(150deg,#F2F5FB,#C2CBDC);border:1px solid #AEB7C9}
.fnt .pitch-key i.k-bench{background:rgba(9,44,27,.35);border:1.5px solid rgba(120,140,160,.6)}
.fnt .slot.bench{opacity:.62}
.fnt .slot.bench::after{content:"BENCH";position:absolute;top:-7px;left:-5px;background:rgba(14,21,38,.92);
  color:#fff;font:800 8px/1 var(--font-b);letter-spacing:.8px;padding:3px 6px;border-radius:6px}
.fnt .pitch-actions{display:flex;gap:10px;padding:14px 18px 18px}
.fnt .pitch-actions .btn{flex:1}
.fnt .squad-card .sb-summary{padding:0 18px}
.fnt .sb-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:14px 0 0}
.fnt .mp-head{display:flex;align-items:center;gap:13px;background:#fff;border:1px solid var(--line);
  border-radius:15px;padding:13px 15px}
.fnt .mp-head .kit{width:34px;height:31px}
.fnt .mp-head .n{flex:1;min-width:0}
.fnt .mp-head .n b{display:block;font:800 16px/1.25 var(--font-b)}
.fnt .mp-head .n span{font-size:12.5px;color:var(--muted)}
.fnt .mp-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.fnt .arm-status{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.fnt .lu-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  font:italic 800 13px/1 var(--font-d);letter-spacing:1.4px;text-transform:uppercase;
  color:var(--muted-2);margin:14px 0 6px 2px}
.fnt .lu-h:first-child{margin-top:0}
.fnt .lu-h span{font:700 10.5px/1 var(--font-b);letter-spacing:.4px;text-transform:none;color:var(--green-deep)}
.fnt .arm-row.is-xi{border-color:var(--green);background:rgba(0,179,97,.08)}
.fnt .arm-btn.xi{min-width:66px}
.fnt .arm-btn.xi.on{background:linear-gradient(150deg,var(--green-b),var(--green));border-color:var(--green-deep);color:#04321F}
.fnt #luSuggest{margin-right:auto}
.fnt .slot.in-xi{border-color:rgba(0,217,125,.95);box-shadow:0 0 0 2px rgba(0,217,125,.35)}
/* dugout strip under the pitch: the 4 (or, mid-edit, more) non-starters */
.fnt .pitch-bench{background:linear-gradient(180deg,#123F27,#0C2E1C);padding:12px 12px 14px;
  border-top:2px solid rgba(255,255,255,.14)}
.fnt .pb-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0 4px 10px}
.fnt .pb-head em{font:italic 800 12.5px/1 var(--font-d);letter-spacing:1.6px;text-transform:uppercase;color:#CFE9DC;
  white-space:nowrap}
.fnt .pb-head span{font:600 11px/1.3 var(--font-b);color:#9FC7B0;text-align:right}
.fnt .pb-list{display:flex;justify-content:center;gap:10px}
.fnt .pb-list .slot{flex:1 1 0}
.fnt .pb-list .slot.bench::after{display:none}
/* team strength metric: score, bar and a word label on one line */
.fnt .metric-strength{grid-column:1/-1}
.fnt .ms-row{display:flex;align-items:center;gap:10px}
.fnt .ms-row b{min-width:28px;font-variant-numeric:tabular-nums}
.fnt .ms-bar{flex:1;height:9px;border-radius:99px;background:rgba(14,21,38,.1);overflow:hidden;display:block}
.fnt .ms-bar u{display:block;height:100%;width:0;border-radius:99px;text-decoration:none;
  background:linear-gradient(90deg,var(--green-b),var(--teal));transition:width .5s cubic-bezier(.2,.8,.2,1)}
.fnt .ms-bar u.low{background:linear-gradient(90deg,#FF6B4A,var(--gold))}
.fnt .ms-bar u.mid{background:linear-gradient(90deg,var(--gold),var(--green-b))}
.fnt .ms-row small{font:700 11.5px/1 var(--font-b);color:var(--muted);white-space:nowrap}
.fnt .arm-list{display:grid;gap:6px;max-height:46dvh;overflow:auto;padding:2px 2px 2px 0;overscroll-behavior:contain}
.fnt .arm-row{display:flex;align-items:center;gap:10px;background:#fff;border:1.5px solid var(--line);
  border-radius:13px;padding:8px 10px;transition:border-color .15s,background .15s}
.fnt .arm-row.is-cap{border-color:var(--gold);background:rgba(245,166,35,.11)}
.fnt .arm-row.is-vc{border-color:#AEB7C9;background:rgba(174,183,201,.16)}
.fnt .arm-row .a-n{flex:1;min-width:0}
.fnt .arm-row .a-n b{display:block;font:700 14px/1.25 var(--font-b);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fnt .arm-row .a-n span{font-size:11.5px;color:var(--muted-2)}
.fnt .arm-btn{border:1.5px solid var(--line-2);background:#fff;border-radius:10px;min-width:48px;min-height:46px;
  font:900 12.5px/1 var(--font-b);color:var(--muted);flex:none;transition:background .13s,border-color .13s,color .13s,transform .12s}
.fnt .arm-btn:hover{border-color:var(--muted-2);color:var(--ink)}
.fnt .arm-btn:active{transform:scale(.93)}
.fnt .arm-btn.cap.on{background:linear-gradient(150deg,#FFD979,var(--gold));border-color:var(--gold-deep);color:#3A2A00}
.fnt .arm-btn.vc.on{background:linear-gradient(150deg,#F2F5FB,#C2CBDC);border-color:#AEB7C9;color:#25304A}
.fnt #sbNudge{flex-wrap:wrap;align-items:center}
.fnt #sbNudge .btn{margin-left:auto;flex:none}
.fnt .mp-grid .btn{width:100%}
.fnt .btn-danger{background:#fff;color:var(--red);border:1.5px solid rgba(217,45,32,.4)}
.fnt .btn-danger:hover:not([disabled]){border-color:var(--red);background:rgba(217,45,32,.05)}
.fnt .lock-chip{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:9px 14px;font:700 12.5px/1 var(--font-b);color:var(--gold-deep)}
.fnt .lock-chip .ic{width:15px;height:15px}
.fnt .sb-mobile{position:fixed;left:10px;right:10px;bottom:calc(72px + env(safe-area-inset-bottom));z-index:105;
  display:none;align-items:center;gap:12px;background:var(--navy);color:#fff;border-radius:16px;
  padding:11px 12px 11px 18px;box-shadow:0 16px 40px rgba(14,21,38,.4)}
.fnt .sb-mobile .m-t{flex:1;font:700 13.5px/1.3 var(--font-b)}
.fnt .sb-mobile .m-t span{display:block;font:500 11.5px/1.2 var(--font-b);color:#9FB0CE}
/* ============ LEAGUES ============ */
.fnt .lg-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.fnt .lg-card{display:flex;align-items:center;gap:14px;text-align:left;background:#fff;
  border:1px solid var(--line);border-radius:18px;padding:16px 18px;box-shadow:var(--shadow);
  transition:border-color .15s,transform .15s,box-shadow .15s;width:100%}
.fnt .lg-card:hover{border-color:var(--pink);transform:translateY(-2px);box-shadow:var(--shadow-pop)}
.fnt .lg-card .l-n{flex:1;min-width:0}
.fnt .lg-card .l-n b{display:block;font:700 15.5px/1.3 var(--font-b);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fnt .lg-card .l-n span{font-size:12.5px;color:var(--muted-2)}
.fnt .lg-card .ic{width:17px;height:17px;color:var(--muted-2);flex:none}
.fnt .gd-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.fnt .gd-head .avatar-i{width:56px;height:56px;border-radius:16px;font-size:17px}
.fnt .gd-head h2{font:italic 800 clamp(26px,3.5vw,36px)/1 var(--font-d);text-transform:uppercase}
.fnt .gd-head .g-meta{color:var(--muted);font-size:13.5px;margin-top:4px}
.fnt .code-chip{display:inline-flex;align-items:center;gap:9px;background:var(--bg);border:1.5px dashed var(--line-2);
  border-radius:12px;padding:9px 9px 9px 15px;font:800 15px/1 var(--font-b);letter-spacing:2.5px;color:var(--navy)}
.fnt .code-chip small{font:600 10.5px/1 var(--font-b);letter-spacing:.8px;color:var(--muted-2);text-transform:uppercase}
.fnt .code-chip .btn-sm{letter-spacing:0}
.fnt .gd-tabs{margin:20px 0 16px}
.fnt .rank-row,.fnt .mem-row{display:flex;align-items:center;gap:13px;background:#fff;border:1px solid var(--line);
  border-radius:13px;padding:11px 15px;margin-bottom:7px}
.fnt .rank-row .r-pos{font:800 14px/1 var(--font-b);color:var(--muted-2);min-width:26px}
.fnt .rank-row.top .r-pos{color:var(--gold-deep)}
.fnt .rank-row .r-n,.fnt .mem-row .m-n{flex:1;font:700 14px/1.3 var(--font-b)}
.fnt .rank-row .r-pts{font:800 14px/1 var(--font-b);color:var(--green-deep)}
.fnt button.rank-row{width:100%;text-align:left;font:inherit;color:inherit;cursor:pointer}
.fnt button.rank-row:hover{border-color:var(--green);background:rgba(0,179,97,.05)}
.fnt button.rank-row:disabled{cursor:progress;opacity:.7}
.fnt .rank-row .r-n small{font:700 10.5px/1 var(--font-b);color:var(--muted-2);text-transform:uppercase;letter-spacing:.6px;margin-left:6px}
.fnt .rank-head{font:700 12px/1.4 var(--font-b);color:var(--muted-2);margin:0 0 10px}
/* global leaderboard tab */
.fnt .rank-row.me{border-color:var(--pink);background:rgba(255,0,128,.05)}
.fnt .rank-row.me .r-n{color:var(--pink-deep)}
.fnt .rank-row.pinned{margin-top:2px}
.fnt .lb-gap{margin:14px 0 8px;text-align:center}
.fnt .lb-summary{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.fnt .lb-me{margin-bottom:14px;padding:14px 18px}
.fnt .lb-me-in{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.fnt .lb-me-k{font:700 11px/1 var(--font-b);letter-spacing:.8px;text-transform:uppercase;color:var(--muted-2)}
.fnt .lb-me-rank{font:italic 800 26px/1 var(--font-d);color:var(--pink-deep)}
.fnt .lb-me-rank small{font:700 10.5px/1 var(--font-b);color:var(--muted-2);text-transform:uppercase;letter-spacing:.6px;margin-left:6px;font-style:normal}
.fnt .lb-me-pts{font:600 13.5px/1.3 var(--font-b);color:var(--muted)}
.fnt .mt-pts{font:800 14px/1 var(--font-b);color:var(--green-deep);min-width:40px;text-align:right}
.fnt .mt-tag{display:inline-block;vertical-align:middle;font:800 10px/1 var(--font-b);padding:3px 5px;border-radius:7px;margin-left:2px}
.fnt .mt-tag.c{background:linear-gradient(150deg,#FFD979,var(--gold));color:#3A2A00}
.fnt .mt-tag.v{background:linear-gradient(150deg,#F2F5FB,#C2CBDC);color:#25304A}
.fnt .mp-sell{display:block;margin:8px 2px 12px;font:700 12.5px/1.35 var(--font-b);color:var(--muted)}
.fnt .bubbles{display:grid;gap:9px;max-height:340px;overflow:auto;padding:4px 2px;margin-bottom:12px}
.fnt .bubble{max-width:78%;border-radius:15px;padding:10px 14px;font-size:14px;line-height:1.45;
  background:var(--bg);border:1px solid var(--line);justify-self:start}
.fnt .bubble.me{background:linear-gradient(120deg,var(--green),var(--green-deep));color:#fff;
  border:none;justify-self:end}
.fnt .bubble small{display:block;font:700 10.5px/1 var(--font-b);letter-spacing:.6px;text-transform:uppercase;
  opacity:.65;margin-bottom:4px}
.fnt .composer{display:flex;gap:9px}
.fnt .composer .in{flex:1}
.fnt .fantasy-pot-list{display:block}
.fnt .pot-card{border:1px solid var(--line);border-radius:16px;padding:16px 18px;background:#fff;margin-bottom:10px}
.fnt .pot-card .p-top{display:flex;justify-content:space-between;gap:10px;font:700 14.5px/1.3 var(--font-b)}
.fnt .pot-card .p-top span{color:var(--muted);font-weight:500;font-size:13px}
.fnt .split-bar{display:flex;height:14px;border-radius:99px;overflow:hidden;margin-top:11px;gap:2px}
.fnt .split-bar i{display:block;height:100%;background:var(--green);opacity:.95}
.fnt .split-bar i:nth-child(1){background:var(--gold)}
.fnt .split-bar i:nth-child(2){background:var(--teal)}
.fnt .split-bar i:nth-child(3){background:var(--green)}
.fnt .split-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:9px}
.fnt .split-tags span{font:700 11.5px/1 var(--font-b);color:var(--muted);background:var(--bg);
  border:1px solid var(--line);border-radius:99px;padding:5px 10px}
/* enriched pot card */
.fnt .pot-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:11px}
.fnt .pot-title{font:italic 800 19px/1.1 var(--font-d);text-transform:uppercase;letter-spacing:.4px;display:block}
.fnt .pot-badges{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px}
.fnt .pot-badge{font:800 10px/1 var(--font-b);letter-spacing:.6px;text-transform:uppercase;border-radius:99px;
  padding:5px 9px;background:var(--bg);color:var(--muted);border:1px solid var(--line)}
.fnt .pot-badge.open{background:rgba(0,179,97,.12);color:var(--green-deep);border-color:rgba(0,179,97,.3)}
.fnt .pot-badge.locked{background:rgba(245,166,35,.12);color:var(--gold-deep);border-color:rgba(245,166,35,.35)}
.fnt .pot-badge.settled{background:rgba(255,0,128,.1);color:var(--pink-deep);border-color:rgba(255,0,128,.28)}
.fnt .pot-badge.refunded{background:rgba(217,45,32,.08);color:var(--red);border-color:rgba(217,45,32,.28)}
.fnt .pot-id{font:600 11.5px/1.4 var(--font-b);color:var(--muted-2);word-break:break-all;text-align:right;max-width:55%;flex:none}
.fnt .pot-meta{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.fnt .pot-chip{background:var(--bg);border:1px solid var(--line);border-radius:99px;padding:7px 12px;
  font:600 12.5px/1.2 var(--font-b);color:var(--muted)}
.fnt .pot-chip b{color:var(--ink);font-weight:800}
.fnt .pot-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:13px}
.fnt .pot-ledger{margin-top:14px;padding-top:13px;border-top:1px solid var(--line)}
.fnt .pot-ledger-title{font:800 11px/1 var(--font-b);letter-spacing:.8px;text-transform:uppercase;color:var(--muted-2);margin-bottom:9px}
.fnt .pot-ledger-empty{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:12px 14px;
  font:600 13px/1.3 var(--font-b);color:var(--muted)}
.fnt .pot-ledger-row{display:flex;justify-content:space-between;gap:10px;background:var(--bg);border:1px solid var(--line);
  border-radius:12px;padding:10px 13px;margin-bottom:7px;font:600 13px/1.3 var(--font-b);color:var(--muted)}
.fnt .pot-ledger-row b{color:var(--ink);font-weight:800}
/* ============ COMPETE ============ */
.fnt .comp-hero{background:linear-gradient(150deg,var(--navy) 0%,#14264A 60%,#0F3D2E 100%);color:#fff;
  border-radius:22px;padding:26px;box-shadow:var(--shadow-pop);position:relative;overflow:hidden}
.fnt .comp-hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(420px 200px at 90% 0%,rgba(0,217,125,.25),transparent 60%)}
.fnt .comp-hero>*{position:relative;z-index:1}
.fnt .comp-hero .c-ey{font:italic 800 12px/1 var(--font-d);letter-spacing:2.2px;text-transform:uppercase;color:var(--green-b);margin-bottom:8px}
.fnt .comp-hero h3{font:italic 900 clamp(26px,3.4vw,38px)/1 var(--font-d);text-transform:uppercase;color:#fff}
.fnt .comp-meta{display:flex;gap:9px;flex-wrap:wrap;margin:14px 0 18px}
.fnt .comp-meta .chip{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:#E7EDF9}
.fnt .comp-meta .chip b{color:#fff}
.fnt .pay-table{display:grid;gap:7px;margin:0 0 20px}
.fnt .pay-row{display:grid;grid-template-columns:44px 1fr 52px;align-items:center;gap:11px;font:700 12.5px/1 var(--font-b)}
.fnt .pay-row .p-r{color:#9FB0CE}
.fnt .pay-row.first .p-r,.fnt .pay-row.first .p-v{color:var(--gold)}
.fnt .pay-row .p-v{text-align:right;color:#E7EDF9;font-variant-numeric:tabular-nums}
.fnt .pay-track{height:9px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden}
.fnt .pay-fill{display:block;height:100%;border-radius:99px;width:0;
  background:linear-gradient(90deg,var(--green-b),var(--teal));transition:width .7s cubic-bezier(.2,.8,.2,1)}
.fnt .pay-row.first .pay-fill{background:linear-gradient(90deg,var(--gold),#FFD979)}
.fnt .receipt{border:1px solid rgba(0,179,97,.35);background:rgba(0,179,97,.06);border-radius:16px;padding:16px 18px}
.fnt .receipt .r-h{display:flex;align-items:center;gap:9px;font:800 15px/1 var(--font-b);color:var(--green-deep);margin-bottom:10px}
.fnt .receipt .r-h .ic{width:18px;height:18px}
.fnt .r-rows{display:grid;gap:6px}
.fnt .r-row{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;color:var(--muted)}
.fnt .r-row b{color:var(--ink);font-weight:700;text-align:right}
/* ============ DRAWER + MODALS ============ */
.fnt .veil{position:fixed;inset:0;z-index:1180;background:rgba(14,21,38,.55);opacity:0;transition:opacity .2s}
.fnt .veil.open{opacity:1}
.fnt .drawer{position:fixed;top:0;right:0;bottom:0;z-index:1190;width:min(430px,94vw);background:var(--bg);
  box-shadow:-24px 0 60px rgba(14,21,38,.3);transform:translateX(102%);transition:transform .26s cubic-bezier(.2,.8,.2,1);
  display:flex;flex-direction:column;overflow:auto;padding:22px 22px calc(22px + env(safe-area-inset-bottom))}
.fnt .drawer.open{transform:none}
.fnt .d-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.fnt .d-head h3{font:italic 800 24px/1 var(--font-d);text-transform:uppercase;letter-spacing:.5px}
.fnt .x-btn{width:42px;height:42px;border-radius:12px;border:1px solid var(--line-2);background:#fff;
  display:grid;place-items:center;color:var(--muted);transition:color .15s,border-color .15s}
.fnt .x-btn:hover{color:var(--red);border-color:var(--red)}
.fnt .x-btn .ic{width:17px;height:17px}
.fnt .id-card{background:linear-gradient(135deg,var(--green-deep),var(--teal));border-radius:18px;color:#fff;
  padding:20px;display:flex;gap:15px;align-items:center;margin-bottom:18px;box-shadow:0 14px 34px rgba(4,140,110,.3)}
.fnt .id-ava{width:56px;height:56px;border-radius:16px;background:rgba(255,255,255,.18);
  display:grid;place-items:center;font:800 19px/1 var(--font-b);letter-spacing:1px;flex:none}
.fnt .id-card .i-n{flex:1;min-width:0}
.fnt .id-card .i-n b{display:block;font:800 18px/1.25 var(--font-b);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fnt .id-card .i-n span{font-size:12.5px;opacity:.85}
.fnt .vis-pill{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.16);
  border-radius:99px;padding:5px 11px;font:700 11px/1 var(--font-b);margin-top:8px}
.fnt .vis-pill .ic{width:13px;height:13px}
.fnt .switch-row{display:flex;align-items:center;justify-content:space-between;gap:14px;background:#fff;
  border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.fnt .switch-row .s-t b{display:block;font:700 14px/1.3 var(--font-b)}
.fnt .switch-row .s-t span{font-size:12.5px;color:var(--muted)}
.fnt .switch{position:relative;width:52px;height:30px;flex:none}
.fnt .switch input{position:absolute;inset:0;opacity:0;cursor:pointer;z-index:1;margin:0}
.fnt .switch i{position:absolute;inset:0;border-radius:99px;background:var(--line-2);transition:background .18s}
.fnt .switch i::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;
  background:#fff;box-shadow:0 2px 6px rgba(19,27,46,.25);transition:transform .18s}
.fnt .switch input:checked+i{background:var(--green)}
.fnt .switch input:checked+i::after{transform:translateX(22px)}
.fnt .switch input:focus-visible+i{outline:3px solid var(--pink);outline-offset:2px}
.fnt .modal{position:fixed;inset:0;z-index:1200;display:grid;place-items:center;padding:18px;
  background:rgba(14,21,38,.55);opacity:0;transition:opacity .2s}
.fnt .modal.open{opacity:1}
.fnt .m-card{width:min(480px,100%);background:var(--bg);border-radius:22px;box-shadow:var(--shadow-pop);
  padding:24px;max-height:calc(100dvh - 40px);overflow:auto;
  transform:translateY(14px) scale(.97);transition:transform .22s cubic-bezier(.2,.8,.2,1)}
.fnt .modal.open .m-card{transform:none}
.fnt .m-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.fnt .m-head h3{font:italic 800 24px/1 var(--font-d);text-transform:uppercase;letter-spacing:.5px}
.fnt .m-sub{color:var(--muted);font-size:13.5px;margin-bottom:16px}
.fnt .m-body{display:grid;gap:14px}
.fnt .m-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}
.fnt .m-rows{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;display:grid;gap:8px}
/* A reading dialog rather than a prompt: the scoring rules include a five-column
   table, which 480px cannot hold. .m-card already scrolls (max-height + overflow). */
.fnt .m-card.m-wide{width:min(760px,100%)}
/* The card takes programmatic focus when the dialog has no other target. */
.fnt .m-card[tabindex="-1"]:focus{outline:none}
/* The rules dialog is the one modal long enough to scroll every time it opens,
   and its point tables scroll sideways on a phone, so both get the slim light
   scrollbar the fantasy dropdowns and lists already use (see the shared block
   near the top of this file) instead of the browser default. The track is
   inset from the card's 22px corners so the thumb does not ride the rounding.
   .rules-body is unscoped for the same reason the rest of it is: the page at
   /fantasy/rules/ renders that copy outside .fnt. */
/* The thumb is a step darker than the shared list scrollbars: those sit on
   white, this sits on the card's own --bg (#F4F6FB), where #D8DDEA all but
   disappears. The track is tinted for the same reason, so the bar reads as a
   deliberate part of the dialog rather than a stray line. */
/* Firefox only. Chrome 121+ IGNORES every ::-webkit-scrollbar rule below the
   moment scrollbar-width or scrollbar-color is set on the same element, so
   declaring both unconditionally would quietly give Chrome the stock OS bar,
   arrows and all. @supports selector(::-webkit-scrollbar) is false exactly
   where the webkit rules do nothing, which is where these are wanted. */
@supports not selector(::-webkit-scrollbar){
  .fnt .m-card.m-wide,.rules-body table{scrollbar-width:thin;scrollbar-color:#B6C0D4 #E8ECF5}
}
.fnt .m-card.m-wide::-webkit-scrollbar,
.rules-body table::-webkit-scrollbar{width:12px;height:12px}
.fnt .m-card.m-wide::-webkit-scrollbar-track,
.rules-body table::-webkit-scrollbar-track{background:#E8ECF5;border-radius:8px;
  border:3px solid transparent;background-clip:content-box}
.fnt .m-card.m-wide::-webkit-scrollbar-thumb,
.rules-body table::-webkit-scrollbar-thumb{background:#B6C0D4;border-radius:8px;
  border:3px solid transparent;background-clip:content-box;
  transition:background .16s ease}
.fnt .m-card.m-wide::-webkit-scrollbar-thumb:hover,
.rules-body table::-webkit-scrollbar-thumb:hover{background:#95A1BA}
.fnt .m-card.m-wide::-webkit-scrollbar-thumb:active,
.rules-body table::-webkit-scrollbar-thumb:active{background:var(--green-deep)}
/* Keep the vertical thumb clear of the card's 22px rounding. A sideways table
   bar has no room for the same inset, so it is left flush. */
.fnt .m-card.m-wide::-webkit-scrollbar-track{margin:16px 0}
/* The shared scoring copy (templates/fantasy_scoring_rules_body.html) renders
   in TWO themes: the #mRules modal here under .fnt, and the landing-themed
   /fantasy/rules/ page, which loads this file for these rules alone. So the
   selector is deliberately NOT scoped under .fnt — it only uses tokens both
   themes declare (--ink, --muted, --line, --bg, --green-b, --font-b/d), which
   is what lets one stylesheet dress the copy in both places. Keep it that way:
   scope it, or reach for a token only one theme has, and the page loses its
   tables. */
.rules-body{font-size:14.5px;line-height:1.6;color:var(--ink)}
.rules-body h2{font:italic 800 20px/1.1 var(--font-d);text-transform:uppercase;
  letter-spacing:.4px;margin:4px 0 10px}
.rules-body h3{font:800 15px/1.3 var(--font-b);margin:22px 0 8px;color:var(--ink)}
.rules-body p{margin:0 0 10px}
.rules-body ul{margin:0 0 12px;padding-left:20px}
.rules-body li{margin-bottom:6px}
.rules-body table{width:100%;margin:0 0 16px;background:#fff;border:1px solid var(--line);
  border-radius:12px;border-collapse:separate;border-spacing:0;overflow:hidden;font-size:13.5px}
.rules-body th,.rules-body td{padding:8px 12px;text-align:left;
  border-bottom:1px solid var(--line)}
.rules-body th{background:var(--bg);font:800 12px/1.3 var(--font-b);
  text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.rules-body tr:last-child td{border-bottom:none}
.rules-body td+td,.rules-body th+th{font-variant-numeric:tabular-nums}
.rules-body blockquote{border-left:4px solid var(--green-b);background:var(--bg);
  border-radius:0 12px 12px 0;padding:10px 14px;margin:12px 0;font-weight:700}
@media (max-width:560px){
  /* Five columns do not fit a phone; let the widest tables scroll sideways
     rather than squeezing the point values into unreadable columns. */
  .rules-body table{display:block;overflow-x:auto;white-space:nowrap}
}
.fnt .m-rows .r-row{font-size:14px}
/* ============ TOAST / LICENCE ============ */
.fnt .toast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));transform:translate(-50%,16px);
  z-index:1300;background:var(--navy);color:#fff;border-radius:13px;padding:13px 20px;
  font:600 14px/1.4 var(--font-b);box-shadow:0 18px 44px rgba(14,21,38,.4);opacity:0;
  transition:opacity .2s,transform .2s;max-width:min(480px,92vw);text-align:center;pointer-events:none}
.fnt .toast.show{opacity:1;transform:translate(-50%,0)}
.fnt .licence{border-top:1px solid var(--line);padding:16px 0 16px;color:var(--muted-2);
  font-size:12px;text-align:center}
/* ============ RESPONSIVE ============ */
@media (max-width:1000px){
  .fnt .g-2,.fnt .sb-grid,.fnt .home-grid{grid-template-columns:1fr}
  .fnt .ap-controls{grid-template-columns:1fr}
  .fnt .sb-mobile{display:flex}
  /* the sticky #sbMobile bar carries Review & save here, so drop the
     duplicate from the pitch row (the row is .pitch-actions, not .sb-actions) */
  .fnt .pitch-actions .btn-p{display:none}
}
@media (max-width:860px){
  /* Game menu as a horizontal bar directly under the site header. It is
     static (not sticky) so it can never hide behind the taller, sticky
     mobile header — it stays selectable. The bottom tab bar is dropped. */
  .fnt .appbar{display:block;position:static;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .fnt .appbar-in{min-width:max-content;padding:0 10px}
  .fnt .ab-spacer,.fnt .ab-profile{display:none}
  .fnt .ab-tab{padding:0 9px;gap:6px;font:600 13.5px/1 var(--font-b)}
  .fnt .ab-tab.bonus em{display:none}
  .fnt .tabbar{display:none}
  .fnt main{padding-bottom:0}
  .fnt .sb-mobile{bottom:calc(12px + env(safe-area-inset-bottom))}
  .fnt .lg-grid{grid-template-columns:1fr}
  .fnt .view{padding:22px 0 44px}
}
@media (max-width:640px){
  .fnt .wrap{padding:0 16px}
  .fnt .card{padding:18px;border-radius:17px}
  .fnt .sb-summary{grid-template-columns:repeat(2,1fr)}
  .fnt .home-hero{padding:34px 0 30px}
  .fnt .view-head h2{font-size:29px}
  .fnt .stepper{gap:6px;padding:11px 13px}
  .fnt .step span{display:none}
  .fnt .step.now span{display:inline}
  .fnt .p-row{gap:7px;padding:0 9px}
  .fnt .p-rows{gap:20px}
  .fnt .pb-list{gap:7px}
  .fnt .pb-head{flex-direction:column;gap:4px}
  .fnt .pb-head span{text-align:left}
  .fnt .slot em{font-size:9.5px;letter-spacing:.8px}
  .fnt .plate{font-size:9.5px;padding:3px 4px}
  .fnt .plate2{font-size:9px}
  .fnt .badge{min-width:25px;height:25px;font-size:11px;top:-9px;right:-8px}
  .fnt .badge.v{font-size:9.5px}
  .fnt .ap-hrow,.fnt .ap-row{grid-template-columns:28px minmax(0,1fr) 84px 40px}
  .fnt .m-actions{flex-direction:column-reverse}
  .fnt .m-actions .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .fnt *,.fnt *::before,.fnt *::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* Live deadline countdown: tabular digits so the ticking seconds never
   jitter, and an amber tint in the final hour. */
.fnt .chip b,.fnt .lock-chip span{font-variant-numeric:tabular-nums}
.fnt .chip.soon,.fnt .lock-chip.soon{border-color:rgba(245,166,35,.5);color:var(--gold-deep)}
.fnt .chip.soon .ic,.fnt .lock-chip.soon .ic{color:var(--gold-deep)}
.fnt .lock-chip.ft-chip .ic{color:var(--pink-deep)}
.fnt .lock-chip.ft-chip.hit{border-color:rgba(245,166,35,.5);color:var(--gold-deep)}
/* Pot setup: what the pot covers, shown as a read-only line instead of raw ids. */
.fnt .pot-covers{margin:6px 0 0;font-weight:700;color:var(--ink)}
/* A pot that was just created: a short green pulse after it scrolls into view. */
.fnt .pot-card.pot-new{outline:2px solid var(--green);outline-offset:2px;animation:fntPotNew 2.4s ease-out}
@keyframes fntPotNew{0%{box-shadow:0 0 0 0 rgba(0,179,97,.55)}40%{box-shadow:0 0 0 10px rgba(0,179,97,.18)}100%{box-shadow:0 0 0 0 rgba(0,179,97,0)}}
@media (prefers-reduced-motion:reduce){.fnt .pot-card.pot-new{animation:none;box-shadow:0 0 0 4px rgba(0,179,97,.25)}}

/* ============ P8 — frontend polish ============ */
/* UX10: the My Team gameweek picker as a static label when only the open
   gameweek is listed. */
.fnt .gw-static{display:flex;align-items:center;min-height:46px;padding:10px 14px;border:1.5px solid var(--line-2);
  border-radius:12px;background:#fff;color:var(--ink);font:600 14.5px/1.2 var(--font-b);white-space:nowrap}
/* X4: Groups keeps its green accent but is only filled when it is the current route. */
.fnt .ab-tab.bonus{background:transparent;color:var(--green-deep);border:1.5px solid rgba(0,179,97,.45);box-shadow:none}
.fnt .ab-tab.bonus .ic{color:var(--green-deep)}
.fnt .ab-tab.bonus:hover{color:var(--green-deep);border-color:var(--green);border-bottom-color:var(--green)}
.fnt .ab-tab.bonus.on{background:linear-gradient(120deg,var(--green),var(--green-deep));color:#fff;
  border-color:transparent;box-shadow:0 6px 16px rgba(0,179,97,.28)}
.fnt .ab-tab.bonus.on .ic{color:#fff}
.fnt .ab-tab.bonus .ab-bonus-ic{color:var(--gold-deep)}
.fnt .ab-tab.bonus.on .ab-bonus-ic{color:#FFE08A}
/* X9: "Entered" reads at WCAG AA (#0B5A36 on #E7F6EE is about 7.4:1) with a check icon. */
.fnt .btn.is-entered,.fnt .btn.is-entered[disabled]{opacity:1;background:#E7F6EE;color:#0B5A36;
  border:1.5px solid #0B5A36;box-shadow:none;cursor:default}
.fnt .btn.is-entered .ic{width:18px;height:18px}
@media (max-width:860px){
  /* UX4: edge fades and scroll-snap on the horizontally scrolling tab bar. */
  .fnt .appbar{scroll-snap-type:x proximity;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%)}
  .fnt .ab-tab{scroll-snap-align:center}
}
@media (max-width:640px){
  /* UX4: after the first visit the phone hero collapses to one line. */
  .fnt #homeHero.hh-compact .home-hero{padding:14px 0 12px}
  .fnt #homeHero.hh-compact .hh-eyebrow,
  .fnt #homeHero.hh-compact .hh-lede,
  .fnt #homeHero.hh-compact .hh-chips .chip:not(:first-child){display:none}
  .fnt #homeHero.hh-compact .hh-in{display:flex;align-items:center;gap:10px;min-width:0}
  .fnt #homeHero.hh-compact h2{flex:1;min-width:0;font-size:22px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .fnt #homeHero.hh-compact .hh-chips{flex:none}
  .fnt #homeHero.hh-compact .hh-chips .chip{padding:6px 10px;font-size:12px}
  /* UX3 fallback: lift the Zendesk launcher above the sticky bar. The
     fnt-zd-raise class is set only by fantasy.js. */
  body.fnt-zd-raise iframe#launcher,
  body.fnt-zd-raise iframe[title="Button to launch messaging window"]{bottom:calc(84px + env(safe-area-inset-bottom))!important}
}