/* Fantasy hub — design v3, reference-grounded (Mobbin trails 2026-08-04, sheets in
   evidence/fantasy-1b/mobbin-references/):
   MODULES (v2, ruled good — unchanged): header type ← FotMob league identity block ·
   standings ← Strava club table + Life Reset ranked rows + Duolingo zone divider ·
   trophy wall ← Strava Trophy Case (object carries the color) + Quizlet earned/greyed ·
   matchups ← Fixtured post-match score hero + FotMob finals rows · status chip
   ← F1 Fantasy deadline chip.
   CANVAS + DESKTOP (v3, MCP trail): page ground = shop midnight as full-bleed page
   chrome ← FotMob league/team pages (identity color owns the viewport top; Real
   Madrid table runs the whole page on the dark canvas) + Uxcel Leagues desktop
   (full dark ground, elevated content deliberately placed) · desktop = wide main
   column + narrow sticky rail on one shared ground ← Duolingo web leaderboard +
   Revolut Business home. Flat midnight — no gradient, no glow (v1 rejection).
   Gold = honors only, and gold appears ONLY inside the white sheets. */

/* Full-bleed breakout: the midnight ground owns the viewport width (FotMob
   page chrome) even though the component renders inside the template column. */
.sf-fantasy-hub { background: var(--sf-midnight, #0A0E17); padding-bottom: 2.5rem;
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  /* Eat the template section's page padding (40px mobile / 100px ≥768) so the
     midnight chrome meets the site nav and footer flush. */
  margin-top: -40px; margin-bottom: -40px; }
@media (min-width: 768px) {
  .sf-fantasy-hub { margin-top: -100px; margin-bottom: -100px; }
}
.sf-fantasy-hub .sf-container { max-width: 760px; margin: 0 auto; padding: 0; display: flex; flex-direction: column; }
.sf-fantasy-hub, .sf-fantasy-hub * { box-sizing: border-box; }

/* Mobile: wrappers dissolve; ruled order restored via flex order
   (ident → wall → standings → matchups → join → attribution) */
.sf-fh-grid, .sf-fh-main, .sf-fh-rail { display: contents; }
.sf-fh-ident { order: 0; }
.sf-fh-wall { order: 1; }
.sf-fh-roomsec { order: 2; }
.sf-fh-race { order: 3; }
.sf-fh-standings { order: 4; }
.sf-fh-matchups { order: 5; }
.sf-fh-join { order: 6; }
.sf-fh-attr { order: 7; }

/* ── 1d trophy room: the ONE dark sheet — a museum stage on the canvas
   (Fey dark-stage object treatment). The objects are the honors; they carry
   the only gold. ── */
.sf-fh-roomsec { background: #0D1119; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 2px 10px rgba(0,0,0,.35); }
#sf-fh-room { display: grid; gap: .8rem; }
@media (min-width: 700px) { #sf-fh-room { grid-template-columns: 1fr 1fr; } }
.sf-fh-stagewrap { min-width: 0; }
.sf-fh-stage { position: relative; height: 320px; border-radius: 12px;
  background: radial-gradient(ellipse 70% 55% at 50% 42%, #1A2030 0%, #0D1119 70%);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  touch-action: none; }
.sf-fh-stage canvas { display: block; }
.sf-fh-stage-static { padding: 1rem; }
.sf-fh-stagelabel { margin: .5rem 0 0; text-align: center; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #7E8698; }
.sf-fh-draghint { margin: .7rem 0 0; text-align: center; font-size: .7rem; color: #5A6478; }
.sf-fh-racenote { margin: .6rem 0 0; font-size: .72rem; color: var(--sf-text-secondary); background: var(--sf-warm); border-radius: 8px; padding: .5rem .7rem; }

/* ── League identity — type sits directly on the canvas (FotMob page chrome) ── */
.sf-fh-ident { color: #fff; padding: 1.6rem 1.1rem 1.25rem; }
.sf-fh-ident .sf-fh-shop { font-size: .68rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--sf-light, #5B9BFF); }
.sf-fh-ident h1 { font-family: var(--sf-font-heading); font-size: 1.75rem; font-weight: 800; margin: .2rem 0 .55rem; line-height: 1.1; }
.sf-fh-chip { display: inline-flex; align-items: center; gap: .4rem; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: .28rem .75rem; font-size: .74rem; color: #C7CFDE; }
.sf-fh-chip b { color: #fff; font-weight: 600; }

/* ── Sections: white sheets placed on the midnight ground ── */
.sf-fh-sec { background: #fff; margin-top: .8rem; padding: 1rem 1.1rem 1.15rem; box-shadow: 0 2px 10px rgba(0,0,0,.35); }
.sf-fh-eyebrow { font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sf-text-muted, #8E95A3); margin: 0 0 .15rem; }
.sf-fh-sec h2 { font-family: var(--sf-font-heading); font-size: 1.2rem; font-weight: 700; margin: 0 0 .75rem; color: var(--sf-text, #0A0E17); }
.sf-fh-empty { color: var(--sf-text-secondary, #5A6070); font-size: .9rem; margin: 0; }

/* ── Trophy wall (Strava Trophy Case + year grouping): the YEAR is the visual
   unit — one row per year, trophy + bowl grouped beside a bold year label.
   Repeat-holder chips carry the streak story (v3.1, approved re-look). ── */
.sf-fh-year { display: flex; gap: .9rem; padding: .7rem 0; border-top: 1px solid var(--sf-border-light, #F0F1F3); }
.sf-fh-year:first-of-type { border-top: 0; }
.sf-fh-yearlabel { flex: none; width: 54px; font-family: var(--sf-font-heading); font-weight: 800; font-size: 1.08rem; color: var(--sf-text); padding-top: .2rem; font-variant-numeric: tabular-nums; }
.sf-fh-yearhonors { flex: 1; min-width: 0; display: grid; gap: .5rem; }
@media (min-width: 700px) { .sf-fh-yearhonors { grid-template-columns: 1fr 1fr; gap: .5rem .9rem; } }
.sf-fh-honor { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.sf-fh-medal.sf-sm { width: 34px; height: 34px; font-size: .85rem; }
.sf-fh-again { display: inline-block; margin-left: .4rem; font-size: .6rem; font-weight: 700; letter-spacing: .04em; border-radius: 999px; padding: .07rem .45rem; vertical-align: middle; background: var(--sf-warm); color: var(--sf-text-secondary); border: 1px solid var(--sf-border); white-space: nowrap; }
.sf-fh-again-bowl { background: #FDEDED; color: #B3261E; border-color: #F2C4C0; }
/* Repeat champion (ruling 2026-08-04): black pill, gold stroke — the stroke is
   the honor; the fill never competes with the medallions. */
.sf-fh-champx { display: inline-block; margin-left: .4rem; font-size: .6rem; font-weight: 700; letter-spacing: .04em; border-radius: 999px; padding: .07rem .5rem; vertical-align: middle; background: var(--sf-midnight, #0A0E17); color: #F6E3A6; border: 1.5px solid #D9B44A; white-space: nowrap; }

/* League rings rows (unchanged v2 pattern) */
.sf-fh-wall .sf-fh-yearrow { display: flex; align-items: center; gap: .85rem; padding: .6rem 0; border-top: 1px solid var(--sf-border-light, #F0F1F3); }
.sf-fh-wall .sf-fh-yearrow:first-of-type { border-top: 0; }
.sf-fh-medalwrap { flex: none; width: 50px; display: flex; flex-direction: column; align-items: center; gap: .18rem; }
.sf-fh-medal { width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center;
  font-size: 1.05rem; line-height: 1;
  background: radial-gradient(circle at 32% 28%, #F6E3A6, #D9B44A 58%, #A87F22);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.35), 0 1px 3px rgba(10,14,23,.25); }
.sf-fh-medal.sf-bowl { background: radial-gradient(circle at 32% 28%, #E8D7C4, #B99B72 58%, #8A6B43); }
.sf-fh-medalyear { font-size: .62rem; font-weight: 700; letter-spacing: .06em; color: var(--sf-text-muted); font-variant-numeric: tabular-nums; }
.sf-fh-honor-name { font-weight: 700; font-size: .95rem; color: var(--sf-text); line-height: 1.2; }
.sf-fh-honor-meta { font-size: .74rem; color: var(--sf-text-muted); font-variant-numeric: tabular-nums; }
.sf-fh-honor-lg { font-size: .72rem; color: var(--sf-text-secondary); }
.sf-fh-wall-note { margin-top: .6rem; font-size: .74rem; color: var(--sf-text-secondary); background: var(--sf-warm); border-radius: 8px; padding: .5rem .7rem; }
.sf-fh-wall-note b { color: var(--sf-text); }
.sf-fh-slot { opacity: .38; filter: grayscale(1); } /* Quizlet unearned state (future/empty years) */

/* ── Standings (Strava/Life Reset): dense hairline rows, medals top-3 only ── */
.sf-fh-lghead { display: flex; align-items: baseline; gap: .5rem; margin: 0 0 .35rem; }
.sf-fh-lghead .sf-fh-lgmeta { margin-left: auto; color: var(--sf-text-muted); font-size: .72rem; }
.sf-fh-cols { display: flex; gap: .6rem; font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sf-text-muted); padding: .3rem 0 .25rem; border-bottom: 1px solid var(--sf-border); }
.sf-fh-cols .c-rk { width: 26px; }
.sf-fh-cols .c-tm { flex: 1; }
.sf-fh-cols .c-n  { width: 52px; text-align: right; }
.sf-fh-trow { display: flex; align-items: center; gap: .6rem; padding: .42rem 0; border-top: 1px solid var(--sf-border-light, #F0F1F3); }
.sf-fh-trow:first-of-type { border-top: 0; }
.sf-fh-rk { width: 26px; flex: none; text-align: center; font-family: var(--sf-font-heading); font-weight: 700; font-size: .8rem; color: var(--sf-text-muted); }
.sf-fh-rk.m1, .sf-fh-rk.m2, .sf-fh-rk.m3 { border-radius: 50%; width: 24px; height: 24px; line-height: 24px; font-size: .72rem; }
.sf-fh-rk.m1 { background: radial-gradient(circle at 35% 30%, #F6E3A6, #D9B44A); color: #5C4708; }
.sf-fh-rk.m2 { background: radial-gradient(circle at 35% 30%, #F0F3F7, #B9C2CE); color: #3C4552; }
.sf-fh-rk.m3 { background: radial-gradient(circle at 35% 30%, #EBD0B5, #C08A55); color: #4A2F14; }
.sf-fh-tteam { flex: 1; min-width: 0; display: flex; align-items: center; gap: .5rem; }
.sf-fh-tteam img { width: 26px; height: 26px; border-radius: 50%; flex: none; }
.sf-fh-tname { font-weight: 600; font-size: .87rem; line-height: 1.15; color: var(--sf-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-fh-tmgr { font-size: .7rem; color: var(--sf-text-muted); line-height: 1.1; }
.sf-fh-tnum { width: 52px; flex: none; text-align: right; font-variant-numeric: tabular-nums; font-size: .82rem; color: var(--sf-text); }
.sf-fh-tnum small { display: block; font-size: .66rem; color: var(--sf-text-muted); }
/* Duolingo zone divider → the playoff line */
.sf-fh-playoffline { display: flex; align-items: center; gap: .6rem; padding: .3rem 0; color: var(--sf-blue, #2D6BE4); font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.sf-fh-playoffline::before, .sf-fh-playoffline::after { content: ''; flex: 1; border-top: 1.5px dashed var(--sf-blue, #2D6BE4); opacity: .5; }
.sf-fh-exh { display: inline-block; font-size: .64rem; font-weight: 700; color: var(--sf-text-secondary); background: var(--sf-warm); border: 1px solid var(--sf-border); border-radius: 999px; padding: .08rem .5rem; vertical-align: middle; }

/* ── Matchups: Fixtured score card + FotMob final rows ── */
.sf-fh-weeknav { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .7rem; }
.sf-fh-weeknav a { font-size: .74rem; padding: .22rem .68rem; border-radius: 999px; border: 1px solid var(--sf-border); color: var(--sf-text-secondary); text-decoration: none; }
.sf-fh-weeknav a.sf-on { background: var(--sf-midnight); border-color: var(--sf-midnight); color: #fff; }
.sf-fh-mcard { border: 1px solid var(--sf-border-light); border-radius: 12px; padding: .8rem .75rem .7rem; margin-bottom: .55rem; }
.sf-fh-mgrid { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .5rem; }
.sf-fh-mside { text-align: center; min-width: 0; }
.sf-fh-mside img { width: 34px; height: 34px; border-radius: 50%; }
.sf-fh-mside .n { font-size: .76rem; font-weight: 600; line-height: 1.15; margin-top: .25rem; color: var(--sf-text); }
.sf-fh-mscore { font-family: var(--sf-font-heading); font-weight: 800; font-size: 1.45rem; font-variant-numeric: tabular-nums; color: var(--sf-text); white-space: nowrap; }
.sf-fh-mscore .sep { color: var(--sf-text-muted); font-weight: 400; padding: 0 .18rem; }
.sf-fh-mstatus { text-align: center; font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sf-text-muted); margin-top: .1rem; }
.sf-fh-mwin { color: var(--sf-text); }
.sf-fh-mlose { color: var(--sf-text-muted); }
.sf-fh-mhead { font-size: .8rem; font-weight: 600; color: var(--sf-text-secondary); text-align: center; margin-top: .55rem; line-height: 1.35; }
.sf-fh-mlink { display: block; text-align: center; font-size: .72rem; margin-top: .3rem; }

/* ── Join + attribution ── */
.sf-fh-join p { font-size: .9rem; color: var(--sf-text-secondary); margin: 0 0 .6rem; }
.sf-fh-btn { display: inline-block; background: var(--sf-blue, #2D6BE4); color: #fff; text-decoration: none; border-radius: 10px; padding: .6rem 1.1rem; font-weight: 600; font-size: .9rem; }
.sf-fh-attr { text-align: center; color: #7E8698; font-size: .72rem; padding: 1.1rem 1rem 0; }
.sf-fh-attr a { color: inherit; text-decoration: underline; }

@media (min-width: 700px) {
  .sf-fantasy-hub .sf-container { padding: 0 1rem; }
  .sf-fh-ident { padding-left: .1rem; padding-right: .1rem; }
  .sf-fh-sec { border-radius: 14px; }
}

/* ── Desktop ≥1024 (Duolingo leaderboard / Revolut home): identity spans the
   canvas, then wide main column (wall → matchups → join) + sticky standings rail ── */
@media (min-width: 1024px) {
  .sf-fantasy-hub .sf-container { max-width: 1120px; }
  .sf-fh-ident { display: flex; align-items: flex-end; gap: 1rem; padding-top: 2.3rem; padding-bottom: 1.5rem; }
  .sf-fh-ident h1 { font-size: 2.3rem; margin-bottom: 0; }
  .sf-fh-chip { margin-left: auto; margin-bottom: .35rem; flex: none; }
  .sf-fh-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 0 1.25rem; align-items: start; }
  .sf-fh-main, .sf-fh-rail { display: block; min-width: 0; }
  .sf-fh-rail { position: sticky; top: 1.25rem; }
  .sf-fh-main .sf-fh-sec:first-child, .sf-fh-rail .sf-fh-sec:first-child { margin-top: 0; }
  .sf-fh-sec { padding: 1.25rem 1.35rem 1.35rem; }
}

/* ── Paid/free tier (v1.3.593, ruled 2026-08-05) — no gold: gold stays honors-only ── */
.sf-fh-tier { display: inline-block; margin-left: .5rem; font-size: .64rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; border-radius: 999px; padding: .08rem .5rem; vertical-align: middle; }
.sf-fh-tier-paid { color: #1a7f4e; background: rgba(26, 127, 78, .1); border: 1px solid rgba(26, 127, 78, .35); }
.sf-fh-tier-free { color: var(--sf-text-secondary); background: var(--sf-warm); border: 1px solid var(--sf-border); }
.sf-fh-lghead .sf-fh-tier { margin-left: .35rem; }
.sf-fh-stakes { margin: .1rem 0 .6rem; font-size: .78rem; color: var(--sf-text-secondary); }
.sf-fh-seatnote { margin: 0 0 .6rem; font-size: .74rem; line-height: 1.45; color: var(--sf-text-secondary); background: var(--sf-warm); border-radius: 8px; padding: .5rem .7rem; }