/* ==========================================================================
   leagues_board.css (1611, owner 10 Nov 2026): the ONE sheet of the Leagues board (Find a League, My Leagues, the public /leagues page) and of
   Edit listing. Ported line for line from the approved mock (mockups/leagues_compact_2026-11-10/leagues.css) onto the kit's tokens; the kit's own
   shell, tabs, buttons, cards and rows are NOT redrawn here (spec page_specs/40_leagues_board_component.md section 6).
   Type 14/16/20/24/32/48; gaps 8/12/16/24; 44 px taps; --k-radius tiles, calc(var(--k-radius) - 2px) controls; one border per card.
   Motion: transform and opacity only; the rows of MOTION_CATALOGUE_2026-11-10.md are marked in comments. Press, ripple and the 1.01 pop-out are
   kit_tap.js and kit_pop.css (rows 1 and 2); the tile carries the hooks, never a copy.
   Prefixes: fh- (board), rc- (the compact tile), fx- (the look's light layers), lg- (the page), ed-/op/sw (Edit listing).
   ========================================================================== */

/* ---------- fonts: the 32 letter styles of the 1151 catalogue, all self-hosted under /fonts/look (SIL OFL, see LICENCES.txt there) ---------- */
@font-face{font-family:"FL Kanit";font-style:italic;font-weight:800;font-display:swap;src:url(/fonts/look/kanit-800italic-latin.woff2) format("woff2")}
@font-face{font-family:"FL Bebas";font-weight:400;font-display:swap;src:url(/fonts/look/bebas-neue-400-latin.woff2) format("woff2")}
@font-face{font-family:"FL Alfa";font-weight:400;font-display:swap;src:url(/fonts/look/alfa-slab-one-400-latin.woff2) format("woff2")}
@font-face{font-family:"FL Public";font-weight:100 900;font-display:swap;src:url(/fonts/look/public-sans-variable.woff2) format("woff2")}
@font-face{font-family:"FL Stencil";font-weight:400;font-display:swap;src:url(/fonts/look/saira-stencil-one-400-latin.woff2) format("woff2")}
@font-face{font-family:"FL Fredoka";font-weight:300 700;font-display:swap;src:url(/fonts/look/fredoka-600-latin.woff2) format("woff2")}
@font-face{font-family:"FL Playfair";font-weight:800;font-display:swap;src:url(/fonts/look/playfair-display-800-latin.woff2) format("woff2")}
@font-face{font-family:"FL Teko";font-weight:600;font-display:swap;src:url(/fonts/look/teko-600-latin.woff2) format("woff2")}
@font-face{font-family:"FL Anton";font-weight:400;font-display:swap;src:url(/fonts/look/anton-400-latin.woff2) format("woff2")}
@font-face{font-family:"FL Oswald";font-weight:700;font-display:swap;src:url(/fonts/look/oswald-700-latin.woff2) format("woff2")}
@font-face{font-family:"FL BlackOps";font-weight:400;font-display:swap;src:url(/fonts/look/black-ops-one-400-latin.woff2) format("woff2")}
@font-face{font-family:"FL Russo";font-weight:400;font-display:swap;src:url(/fonts/look/russo-one-400-latin.woff2) format("woff2")}
@font-face{font-family:"FL Bungee";font-weight:400;font-display:swap;src:url(/fonts/look/bungee-400-latin.woff2) format("woff2")}
@font-face{font-family:"FL Staatliches";font-weight:400;font-display:swap;src:url(/fonts/look/staatliches-400-latin.woff2) format("woff2")}
@font-face{font-family:"FL ArchivoBlack";font-weight:400;font-display:swap;src:url(/fonts/look/archivo-black-400-latin.woff2) format("woff2")}
@font-face{font-family:"FL BigShoulders";font-weight:900;font-display:swap;src:url(/fonts/look/big-shoulders-900-latin.woff2) format("woff2")}
@font-face{font-family:"FL Graduate";font-weight:400;font-display:swap;src:url(/fonts/look/graduate-400-latin.woff2) format("woff2")}
@font-face{font-family:"FL Stardos";font-weight:700;font-display:swap;src:url(/fonts/look/stardos-stencil-700-latin.woff2) format("woff2")}
@font-face{font-family:"FL Righteous";font-weight:400;font-display:swap;src:url(/fonts/look/righteous-400-latin.woff2) format("woff2")}
@font-face{font-family:"FL Orbitron";font-weight:900;font-display:swap;src:url(/fonts/look/orbitron-900-latin.woff2) format("woff2")}
@font-face{font-family:"FL Bangers";font-weight:400;font-display:swap;src:url(/fonts/look/bangers-400-latin.woff2) format("woff2")}
@font-face{font-family:"FL Lilita";font-weight:400;font-display:swap;src:url(/fonts/look/lilita-one-400-latin.woff2) format("woff2")}
@font-face{font-family:"FL Marker";font-weight:400;font-display:swap;src:url(/fonts/look/permanent-marker-400-latin.woff2) format("woff2")}
@font-face{font-family:"FL Pacifico";font-weight:400;font-display:swap;src:url(/fonts/look/pacifico-400-latin.woff2) format("woff2")}
@font-face{font-family:"FL Abril";font-weight:400;font-display:swap;src:url(/fonts/look/abril-fatface-400-latin.woff2) format("woff2")}
@font-face{font-family:"FL Cinzel";font-weight:900;font-display:swap;src:url(/fonts/look/cinzel-900-latin.woff2) format("woff2")}
@font-face{font-family:"FL Rye";font-weight:400;font-display:swap;src:url(/fonts/look/rye-400-latin.woff2) format("woff2")}
@font-face{font-family:"FL PressStart";font-weight:400;font-display:swap;src:url(/fonts/look/press-start-2p-400-latin.woff2) format("woff2")}
@font-face{font-family:"FL Racing";font-weight:400;font-display:swap;src:url(/fonts/look/racing-sans-one-400-latin.woff2) format("woff2")}
@font-face{font-family:"FL Holtwood";font-weight:400;font-display:swap;src:url(/fonts/look/holtwood-one-sc-400-latin.woff2) format("woff2")}
@font-face{font-family:"FL Bowlby";font-weight:400;font-display:swap;src:url(/fonts/look/bowlby-one-400-latin.woff2) format("woff2")}
@font-face{font-family:"FL Passion";font-weight:900;font-display:swap;src:url(/fonts/look/passion-one-900-latin.woff2) format("woff2")}

/* ---------- tokens: the kit declares the colours; the board adds the few it lacks, and the Featured look's own variables ---------- */
.lg, .rc, .ed, .fh-sheet, .lg-perks {
  --color-k-border-strong: color-mix(in srgb, var(--color-k-text) 28%, transparent);
  --color-k-surface-3: color-mix(in srgb, var(--color-k-text) 10%, var(--color-k-surface-2));
  --gold-hi: #f6c453; --gold-glow: #ffb612; --out: cubic-bezier(.2, .8, .2, 1);
  --lv-slow: 1;
}
/* the Featured look: a scheme sets --fa/--fb, a letter style sets the --name-* vars, the strength sets --fi */
.rc, .ed { --fa: var(--gold-hi); --fb: #a9660a; --fhi: #fff1c2; --fon: #1b1203; --name-font: var(--font-k-display); --name-style: italic; --name-weight: 800; --name-space: .01em; --name-color: #fff; --name-case: uppercase; --fi: 1; }
@media (prefers-reduced-motion: reduce) { .lg, .rc, .ed { --lv-slow: 2.2; } }
[hidden] { display: none !important; }
.lg { display: flex; flex-direction: column; gap: var(--k-space-md); }
.lg-report { margin: 0; font: 500 var(--text-14)/1.4 var(--font-k-body); color: var(--color-k-muted); }
.lg-report a { color: var(--color-k-text); text-decoration: underline; text-underline-offset: 3px; }
.lg-more { display: flex; flex-wrap: wrap; gap: var(--k-space-xs); }
.lg-more .k-btn { flex: 1 1 160px; }
/* the public page head (44): the title and one line */
.pb-head { display: flex; flex-direction: column; gap: 4px; }
.pb-head h1 { margin: 0; font: 800 italic var(--text-32)/1.05 var(--font-k-display); text-transform: uppercase; }
.pb-head p { margin: 0; font: 500 var(--text-16)/1.4 var(--font-k-body); color: var(--color-k-muted); }
.lg-fold { margin: 0; grid-column: 1 / -1; align-self: start; height: auto; }
.lg-fold a { color: var(--color-k-text); text-decoration: underline; text-underline-offset: 3px; }
.fh-empty .k-btn { margin-top: var(--k-space-sm); }

.fh-panel{display:flex;flex-direction:column;gap:var(--k-space-md)}
/* section heads: a slanted tab, gold for Featured, green for the rest; the note is its own line under the title on the phone */
.fh-sec{display:flex;flex-wrap:wrap;align-items:center;gap:4px var(--k-space-sm);min-height:32px}
.fh-sec h2{display:inline-flex;align-items:center;gap:10px;margin:0;font:700 var(--text-20)/1 var(--font-k-heading)}
.fh-sec h2 i{display:inline-block;width:14px;height:22px;background:var(--color-k-brand);clip-path:polygon(30% 0,100% 0,70% 100%,0 100%)}
.fh-sec--gold h2 i{background:linear-gradient(135deg,#f6c453,#d4860e)}
.fh-sec small{flex-basis:100%;padding-left:24px;font:600 var(--text-14)/1.3 var(--font-k-heading);color:var(--color-k-muted)}
#all{scroll-margin-top:72px}
.fh-count{margin:0;font:600 var(--text-14)/1.3 var(--font-k-heading);color:var(--color-k-muted)}
.fh-count b{color:var(--color-k-text)}

/* the lists: featured first, then all, both plain vertical lists (no swipe strip anywhere) */
.fh-list{display:flex;flex-direction:column;gap:var(--k-space-sm)}
.fh-empty{display:none;padding:var(--k-space-lg) var(--k-space-md);border:1px dashed var(--color-k-border-strong);border-radius:var(--k-radius);text-align:center;color:var(--color-k-muted)}
.fh-empty b{display:block;color:var(--color-k-text);font:700 var(--text-16)/1.3 var(--font-k-heading)}
.fh-list.is-empty .fh-empty{display:block}
.fh-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--k-space-sm);padding:var(--k-space-md);border:1px solid var(--color-k-border);border-radius:var(--k-radius);background:var(--color-k-panel)}
.fh-foot p{margin:0;flex:1 1 220px;font:500 var(--text-16)/1.4 var(--font-k-body);color:var(--color-k-muted)}
.fh-foot p b{color:var(--color-k-text)}
.k-btn svg{flex:none}

/* crest tiles (monogram or picture), open-team crests, badges */
.crest{--sz:48px;flex:none;position:relative;display:grid;place-items:center;width:var(--sz);height:var(--sz);border-radius:var(--k-radius);color:#fff;border:1px solid color-mix(in srgb,var(--lc) 60%,var(--color-k-border));background:linear-gradient(150deg,color-mix(in srgb,var(--lc) 62%,var(--color-k-surface-2)),color-mix(in srgb,var(--lc) 22%,var(--color-k-surface-2)));box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);overflow:hidden}
.crest b{font:800 italic var(--fs,var(--text-20))/1 var(--font-k-display);letter-spacing:.01em;text-transform:uppercase;text-shadow:0 1px 6px rgba(0,0,0,.35)}
.crest img{width:72%;height:72%;object-fit:contain}
.crest--img{background:radial-gradient(90% 90% at 50% 0%,color-mix(in srgb,var(--lc) 22%,var(--color-k-surface-2)),var(--color-k-surface-2))}
.ocs{display:inline-flex;align-items:center;gap:4px}
.ocs img{width:24px;height:24px;object-fit:contain}
.ocs .ocs-n{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 6px;border-radius:999px;background:var(--color-k-surface-3);font:700 var(--text-14)/1 var(--font-k-heading);color:var(--color-k-text)}

/* ==========================================================================
   THE COMPACT TILE (the owner's pick, 1606 Regular B): the crest on its colour-wash band, the name at 20, two fact lines, the buttons.
   A FEATURED league's tile swaps the wash for its banner strip (pan + shine + gold tag + gold border) and wears its commissioner's letters.
   Same markup, one family: .rc / .rc.is-feat
   ========================================================================== */
.rc{--lc:var(--color-k-brand);position:relative;display:flex;flex-direction:column;border:1px solid var(--color-k-border);border-radius:var(--k-radius);background:var(--color-k-surface);color:var(--color-k-text);overflow:hidden}
/* the Featured league name on the league page (spec 45): the same four look attributes, one rule beside the tile's */
.lg-name{font-family:var(--name-font);font-style:var(--name-style);font-weight:var(--name-weight);letter-spacing:var(--name-space);text-transform:var(--name-case);color:var(--name-color);text-shadow:0 2px 12px rgba(0,0,0,.6)}
html[data-motion="on"] .bc-pic-img.lg-pan{animation:fc-pan calc(20s * var(--lv-slow,1)) ease-in-out infinite alternate}
.rc-link{position:absolute;inset:0;z-index:1;border-radius:inherit}
.rc-link:focus-visible{outline:3px solid var(--color-k-brand);outline-offset:-3px}
.rc-top{position:relative;height:64px;background:linear-gradient(100deg,color-mix(in srgb,var(--lc) 55%,var(--color-k-surface)),color-mix(in srgb,var(--lc) 18%,var(--color-k-surface)) 60%,var(--color-k-surface))}
.rc-top::before{content:"";position:absolute;inset:0;background:radial-gradient(circle,color-mix(in srgb,var(--lc) 60%,transparent) 1px,transparent 1.5px) 0 0/12px 12px;opacity:.35;-webkit-mask-image:linear-gradient(90deg,#000 20%,transparent 80%);mask-image:linear-gradient(90deg,#000 20%,transparent 80%)}
.rc .crest{--sz:56px;--fs:var(--text-20);position:absolute;left:var(--k-space-md);bottom:-20px;z-index:3;box-shadow:0 8px 20px rgba(0,0,0,.45)}
.rc-side{position:absolute;right:var(--k-space-md);bottom:var(--k-space-sm);z-index:3;display:flex;align-items:center;gap:8px}
.rc-body{display:flex;flex-direction:column;flex:1 1 auto;gap:4px;padding:28px var(--k-space-md) 0}
.rc-name{margin:0;font:700 var(--text-20)/1.15 var(--font-k-heading);color:var(--color-k-text);overflow-wrap:normal;word-break:normal;hyphens:manual;text-wrap:balance}
.rc-line{margin:0;font:600 var(--text-14)/1.4 var(--font-k-body);color:var(--color-k-muted)}
.rc-line i{font-style:normal;color:var(--color-k-border-strong);padding:0 3px}
.rc-line em{font-style:normal;color:var(--color-k-text)}
.rc-acts{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:var(--k-space-xs);margin-top:auto;padding:var(--k-space-sm) var(--k-space-md) var(--k-space-md)}
.rc-acts .k-btn{min-height:44px}
.rc-acts .k-btn--primary{flex:1 1 120px}
.rc-ring{position:absolute;inset:-1px;z-index:4;border-radius:inherit;border:2px solid var(--color-k-brand);opacity:0;pointer-events:none}
/* the Bump button (new): secondary beside the primary; once pressed it is the kit's disabled button with the countdown, full row */
.bump{flex:0 0 auto;gap:6px}
.rc--run .rc-acts .k-btn--secondary:not(.bump){flex:1 1 120px}
.rc--run .bump{flex:1 1 100%}
.bump .bump-wait{display:none}
.rc.is-bumped .bump{flex:1 1 100%}
.rc.is-bumped .bump .bump-t,.rc.is-bumped .bump .i-up{display:none}
.rc.is-bumped .bump .bump-wait{display:inline}
.rc.is-bumped .bump .i-clock{display:block}
.bump .i-clock{display:none}
/* the "Bumped 4m ago" line, for everyone */
.rc-bumped{display:none;align-items:center;gap:6px;margin:2px 0 0;font:700 var(--text-14)/1.3 var(--font-k-heading);color:var(--color-k-brand)}
.rc-bumped svg{flex:none}
.rc.is-bumped .rc-bumped{display:flex}
html[data-motion="on"] .rc.just-bumped .rc-ring{animation:rc-ring 1.2s var(--k-ease)}
@keyframes rc-ring{0%{opacity:0}20%{opacity:1}100%{opacity:0}}
.rc.is-moving{z-index:6;transition:transform 360ms var(--out)}
.rc.is-shifting{transition:transform 360ms var(--out)}

/* ---- the FEATURED tile: the banner strip on top, the gold border that breathes (row 16 C), the pan (16 B), the shine (16 A) ---- */
.rc.is-feat{isolation:isolate;border:2px solid color-mix(in srgb,var(--gold-glow) 70%,var(--color-k-border));background:#0c0f14;color:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.6),0 14px 36px -18px #000}
.rc.is-feat::after{content:"";position:absolute;inset:-2px;z-index:5;border-radius:inherit;pointer-events:none;border:2px solid var(--fa);box-shadow:inset 0 0 14px color-mix(in srgb,var(--fa) 30%,transparent),0 0 22px color-mix(in srgb,var(--fa) 60%,transparent);opacity:calc(.35 * var(--fi))}
html[data-motion="on"] .rc.is-feat::after{animation:fc-glow calc(3s * var(--lv-slow)) ease-in-out infinite}
@keyframes fc-glow{0%,100%{opacity:calc(.3 * var(--fi))}50%{opacity:calc(.9 * var(--fi))}}
/* 11 Nov picture read: the strip no longer clips its own children (the crest hangs 20 px below it and was cut in half); the picture, the sweep and the effect layers each clip themselves, the pool below */
.rc.is-feat .rc-top{height:120px;background:#0b0e13;overflow:visible}
.rc.is-feat .rc-top::before{display:none}
.rc-pic{position:absolute;inset:0;overflow:hidden}
.rc-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 40%);transform-origin:30% 45%}
html[data-motion="on"] .rc-pic img{animation:fc-pan calc(20s * var(--lv-slow)) ease-in-out infinite alternate}
@keyframes fc-pan{from{transform:scale(1.04)}to{transform:scale(1.18) translate(-4%,-3%)}}
.rc-pic::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.28),transparent 32%,transparent 55%,rgba(8,11,16,.9) 100%)}
.rc-sweep{position:absolute;inset:0;z-index:2;overflow:hidden;pointer-events:none}
.rc-sweep i{position:absolute;top:-20%;bottom:-20%;left:0;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,calc(.3 * var(--fi))) 50%,transparent);transform:translateX(-140%) skewX(-18deg)}
html[data-motion="on"] .rc-sweep i{animation:fc-sw calc(22s * var(--lv-slow)) ease-in-out infinite}
@keyframes fc-sw{0%{transform:translateX(-140%) skewX(-18deg)}30%,100%{transform:translateX(330%) skewX(-18deg)}}
.rc-tags{position:absolute;left:-2px;top:12px;z-index:4;display:flex;align-items:center;gap:6px}
.rc-tag{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 14px 0 12px;background:linear-gradient(135deg,var(--fa),var(--fb));color:var(--fon,#1b1203);font:700 var(--text-14)/1 var(--font-k-heading);letter-spacing:.04em;text-transform:uppercase;clip-path:polygon(0 0,100% 0,calc(100% - 8px) 100%,0 100%);white-space:nowrap}
.rc-tag svg{flex:none}
.rc-ctag{display:inline-flex;align-items:center;height:28px;padding:0 10px;border-radius:999px;border:1px solid rgba(255,255,255,.3);background:rgba(8,11,16,.6);color:#fff;font:700 var(--text-14)/1 var(--font-k-heading);white-space:nowrap;backdrop-filter:blur(6px)}
.rc-ctag:empty{display:none}
.rc.is-feat .crest{box-shadow:inset 2px 2px 0 rgba(255,255,255,.34),0 12px 28px rgba(0,0,0,.5),0 0 40px color-mix(in srgb,var(--fa) 55%,transparent)}
html[data-motion="on"] .rc.is-feat .crest{animation:fc-settle 320ms var(--k-ease) 120ms backwards}
@keyframes fc-settle{from{transform:scale(1.06)}to{transform:scale(1)}}
.rc-pool{--pool-clip:90px;clip-path:inset(0 0 var(--pool-clip) 0);position:absolute;left:-60px;bottom:-90px;z-index:1;width:220px;height:220px;pointer-events:none;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--fa) 70%,#fff) 0,color-mix(in srgb,var(--fa) 38%,transparent) 34%,transparent 68%);opacity:calc(.5 * var(--fi))}
.rc.is-feat .rc-side .ocs{padding:4px 6px;border-radius:999px;background:rgba(8,11,16,.6);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(6px)}
.rc.is-feat .rc-side .ocs{height:32px}
.rc.is-feat .rc-name{font-family:var(--name-font);font-style:var(--name-style);font-weight:var(--name-weight);letter-spacing:var(--name-space);text-transform:var(--name-case);color:var(--name-color);line-height:1.1;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.rc.is-feat .rc-line{color:rgba(243,246,250,.86)}
.rc.is-feat .rc-line i{color:rgba(243,246,250,.45)}
.rc.is-feat .rc-line em{color:#fff}
.rc.is-feat .rc-bumped{color:#8fe08f}
.rc.is-feat .k-btn--secondary{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.3);color:#fff}
/* what sits on a tile is not a control: taps go to the tile link, only the buttons answer themselves */
.rc-top,.rc-body{pointer-events:none}
.rc-acts,.rc-acts *{pointer-events:auto}
.rc.fx-rest::after,.rc.fx-rest .rc-pic img,.rc.fx-rest .rc-sweep i,.rc.fx-rest .fx i,.rc.fx-rest .fx::before,.rc.fx-rest .fx::after,.rc.fx-rest .fx b::after,.rc.fx-rest .tk{animation-play-state:paused!important}

/* row 7: rise in, once, 40 ms apart: the kit's keyframe and numbers (k-rise), played on the tile, the section head, the perks card and the foot */
html[data-motion="on"] .lg [data-rise], html[data-motion="on"] .lg-perks[data-rise] { animation: k-rise 320ms var(--out) backwards; animation-delay: calc(min(var(--i, 0), 8) * 40ms); }

/* ==========================================================================
   THE LOOK (the 1151 catalogue): colours (13 sets), letters (32), strength (3) as variables; the lights (15) as layers.
   One gear: the Find tiles, the My Leagues tiles and the Edit preview all read the same data-scheme / data-font / data-str / data-fx.
   ========================================================================== */
[data-str="low"]{--fi:.55}[data-str="medium"]{--fi:1}[data-str="high"]{--fi:1.6}
[data-scheme="league"]{--fa:var(--lc);--fb:color-mix(in srgb,var(--lc) 52%,#06090e);--fhi:color-mix(in srgb,var(--lc) 38%,#fff);--fon:#fff}
[data-scheme="team"]{--fa:var(--lc);--fb:color-mix(in srgb,var(--lc) 45%,#fff);--fhi:color-mix(in srgb,var(--lc) 36%,#fff);--fon:#fff}
[data-scheme="custom"]{--fa:var(--cu-a,#ff6a1a);--fb:var(--cu-b,#1a3a9a);--fhi:color-mix(in srgb,var(--fa) 36%,#fff);--fon:var(--cu-on,#0b0e13)}
[data-scheme="picture"]{--fa:var(--pic-a,#8fa8c8);--fb:var(--pic-b,#2a3a52);--fhi:color-mix(in srgb,var(--fa) 36%,#fff);--fon:var(--pic-on,#0b0e13)}
[data-scheme="night"]{--fa:#8fa8c8;--fb:#2a3a52;--fhi:#e6eefb;--fon:#0b0e13}
[data-scheme="daylight"]{--fa:#8fd0ff;--fb:#3b7fc4;--fhi:#fff;--fon:#06182a}
[data-scheme="gold"]{--fa:#f6c453;--fb:#a9660a;--fhi:#fff1c2;--fon:#1b1203}
[data-scheme="amber"]{--fa:#ffb347;--fb:#d9480f;--fhi:#ffe6b8;--fon:#1f1004}
[data-scheme="turf"]{--fa:#3ddc6a;--fb:#0e7a3a;--fhi:#d6ffe0;--fon:#06210f}
[data-scheme="royal"]{--fa:#4c86f0;--fb:#1a3a9a;--fhi:#d8e6ff;--fon:#fff}
[data-scheme="crimson"]{--fa:#ec3a58;--fb:#7a1022;--fhi:#ffd0d8;--fon:#fff}
[data-scheme="ice"]{--fa:#66d9ff;--fb:#1c7fb5;--fhi:#e8fbff;--fon:#04202e}
/* letters: the 32 styles of the 1151 catalogue, each its own self-hosted face */
[data-font="broadcast"]{--name-font:"FL Kanit",Kanit,"Barlow Semi Condensed",sans-serif;--name-weight:800;--name-style:italic;--name-case:uppercase;--name-space:.005em}
[data-font="sideline"]{--name-font:"FL Bebas","Bebas Neue",Impact,sans-serif;--name-weight:400;--name-style:normal;--name-case:uppercase;--name-space:.03em}
[data-font="slab"]{--name-font:"FL Alfa","Alfa Slab One",Rockwell,Georgia,serif;--name-weight:400;--name-style:normal;--name-case:none;--name-space:.005em}
[data-font="clean"]{--name-font:"FL Public","Public Sans",Arial,sans-serif;--name-weight:800;--name-style:normal;--name-case:none;--name-space:-.01em}
[data-font="stencil"]{--name-font:"FL Stencil","Saira Stencil One",Impact,sans-serif;--name-weight:400;--name-style:normal;--name-case:uppercase;--name-space:.02em}
[data-font="rounded"]{--name-font:"FL Fredoka",Fredoka,"Arial Rounded MT Bold",sans-serif;--name-weight:600;--name-style:normal;--name-case:none;--name-space:.005em}
[data-font="trophy"]{--name-font:"FL Playfair","Playfair Display",Georgia,serif;--name-weight:800;--name-style:normal;--name-case:uppercase;--name-space:.04em}
[data-font="scoreboard"]{--name-font:"FL Teko",Teko,"Arial Narrow",sans-serif;--name-weight:600;--name-style:normal;--name-case:uppercase;--name-space:.03em}
[data-font="anton"]{--name-font:"FL Anton",Anton,Impact,sans-serif;--name-weight:400;--name-style:normal;--name-case:uppercase;--name-space:.02em}
[data-font="headline"]{--name-font:"FL Oswald",Oswald,Impact,sans-serif;--name-weight:700;--name-style:normal;--name-case:uppercase;--name-space:.02em}
[data-font="bootcamp"]{--name-font:"FL BlackOps","Black Ops One",Impact,sans-serif;--name-weight:400;--name-style:normal;--name-case:uppercase;--name-space:.02em}
[data-font="dash"]{--name-font:"FL Russo","Russo One",Impact,sans-serif;--name-weight:400;--name-style:normal;--name-case:uppercase;--name-space:.01em}
[data-font="signage"]{--name-font:"FL Bungee",Bungee,Impact,sans-serif;--name-weight:400;--name-style:normal;--name-case:uppercase;--name-space:0}
[data-font="tickets"]{--name-font:"FL Staatliches",Staatliches,Impact,sans-serif;--name-weight:400;--name-style:normal;--name-case:uppercase;--name-space:.04em}
[data-font="block"]{--name-font:"FL ArchivoBlack","Archivo Black",Impact,sans-serif;--name-weight:400;--name-style:normal;--name-case:uppercase;--name-space:0}
[data-font="shoulders"]{--name-font:"FL BigShoulders","Big Shoulders Display",Impact,sans-serif;--name-weight:900;--name-style:normal;--name-case:uppercase;--name-space:.02em}
[data-font="college"]{--name-font:"FL Graduate",Graduate,Rockwell,Georgia,serif;--name-weight:400;--name-style:normal;--name-case:uppercase;--name-space:.03em}
[data-font="crate"]{--name-font:"FL Stardos","Stardos Stencil",Georgia,serif;--name-weight:700;--name-style:normal;--name-case:uppercase;--name-space:.03em}
[data-font="retro"]{--name-font:"FL Righteous",Righteous,"Arial Rounded MT Bold",sans-serif;--name-weight:400;--name-style:normal;--name-case:uppercase;--name-space:.03em}
[data-font="spaceage"]{--name-font:"FL Orbitron",Orbitron,"Segoe UI",sans-serif;--name-weight:900;--name-style:normal;--name-case:uppercase;--name-space:.02em}
[data-font="comic"]{--name-font:"FL Bangers",Bangers,Impact,sans-serif;--name-weight:400;--name-style:normal;--name-case:uppercase;--name-space:.04em}
[data-font="cartoon"]{--name-font:"FL Lilita","Lilita One","Arial Rounded MT Bold",sans-serif;--name-weight:400;--name-style:normal;--name-case:none;--name-space:.01em}
[data-font="marker"]{--name-font:"FL Marker","Permanent Marker",cursive;--name-weight:400;--name-style:normal;--name-case:none;--name-space:0}
[data-font="script"]{--name-font:"FL Pacifico",Pacifico,cursive;--name-weight:400;--name-style:normal;--name-case:none;--name-space:0}
[data-font="magazine"]{--name-font:"FL Abril","Abril Fatface",Georgia,serif;--name-weight:400;--name-style:normal;--name-case:none;--name-space:0}
[data-font="roman"]{--name-font:"FL Cinzel",Cinzel,Georgia,serif;--name-weight:900;--name-style:normal;--name-case:uppercase;--name-space:.03em}
[data-font="westwind"]{--name-font:"FL Rye",Rye,Georgia,serif;--name-weight:400;--name-style:normal;--name-case:uppercase;--name-space:.02em}
[data-font="arcade"]{--name-font:"FL PressStart","Press Start 2P",monospace;--name-weight:400;--name-style:normal;--name-case:uppercase;--name-space:0}
[data-font="racing"]{--name-font:"FL Racing","Racing Sans One",Impact,sans-serif;--name-weight:400;--name-style:normal;--name-case:uppercase;--name-space:.02em}
[data-font="poster"]{--name-font:"FL Holtwood","Holtwood One SC",Georgia,serif;--name-weight:400;--name-style:normal;--name-case:uppercase;--name-space:0}
[data-font="chunky"]{--name-font:"FL Bowlby","Bowlby One",Impact,sans-serif;--name-weight:400;--name-style:normal;--name-case:uppercase;--name-space:0}
[data-font="peprally"]{--name-font:"FL Passion","Passion One",Impact,sans-serif;--name-weight:900;--name-style:normal;--name-case:uppercase;--name-space:.02em}
/* the arcade pixels and the heavy poster faces read wide at 20; they keep 20 (the floor) and may take two lines */

/* ---- the lights: every layer transform + opacity only, off unless the tile's data-fx names it ---- */
.fx{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden;display:none;mix-blend-mode:screen}
.fx i,.fx b{position:absolute;display:block}
[data-fx~="sheen"] .fx--sheen,[data-fx~="glint"] .fx--glint,[data-fx~="pulse"] .fx--pulse,[data-fx~="ribbon"] .fx--ribbon,[data-fx~="ticker"] .fx--ticker,
[data-fx~="grain"] .fx--grain,[data-fx~="wash"] .fx--wash,[data-fx~="vignette"] .fx--vignette,[data-fx~="confetti"] .fx--confetti,[data-fx~="scan"] .fx--scan,
[data-fx~="edge"] .fx--edge,[data-fx~="leak"] .fx--leak,[data-fx~="foil"] .fx--foil,[data-fx~="motes"] .fx--motes{display:block}
/* Shine: a soft highlight that rests top right and a bloom that drifts (no band, no line) */
.fx--sheen i.r{inset:0;opacity:calc(.8 * var(--fi));background:radial-gradient(ellipse 52% 92% at 78% 8%,color-mix(in srgb,#fff 72%,var(--fhi)) 0,color-mix(in srgb,var(--fhi) 66%,transparent) 26%,color-mix(in srgb,var(--fa) 30%,transparent) 56%,transparent 82%),linear-gradient(180deg,color-mix(in srgb,var(--fhi) 30%,transparent) 0,transparent 46%)}
.fx--sheen i.b{width:70%;height:130%;left:26%;top:-30%;opacity:calc(.7 * var(--fi));background:radial-gradient(ellipse 50% 50% at 50% 50%,color-mix(in srgb,#fff 62%,var(--fhi)) 0,color-mix(in srgb,var(--fhi) 44%,transparent) 36%,transparent 72%);transform:translate(-12%,0) scale(.94)}
html[data-motion="on"] .fx--sheen i.b{animation:fx-sheen calc(13s * var(--lv-slow)) ease-in-out infinite alternate}
@keyframes fx-sheen{from{transform:translate(-16%,4%) scale(.92);opacity:calc(.34 * var(--fi))}to{transform:translate(22%,-3%) scale(1.08);opacity:calc(.74 * var(--fi))}}
/* Sparkle: stars on the bright side, bigger ones flash in turn */
.fx--glint i{width:18px;height:18px;background:radial-gradient(circle,#fff 0 12%,transparent 14%),conic-gradient(from 0deg,transparent 0 23%,#fff 25%,transparent 27% 48%,#fff 50%,transparent 52% 73%,#fff 75%,transparent 77% 98%,#fff 100%);opacity:calc(.55 * var(--fi));transform:scale(.5)}
.fx--glint i:nth-child(1){right:14%;top:18%}.fx--glint i:nth-child(2){right:30%;top:48%;width:12px;height:12px}.fx--glint i:nth-child(3){right:8%;top:56%;width:14px;height:14px}
html[data-motion="on"] .fx--glint i{animation:fx-star calc(5.2s * var(--lv-slow)) ease-in-out infinite}
html[data-motion="on"] .fx--glint i:nth-child(2){animation-delay:1.7s}html[data-motion="on"] .fx--glint i:nth-child(3){animation-delay:3.3s}
@keyframes fx-star{0%,60%,100%{opacity:calc(.5 * var(--fi));transform:scale(.5) rotate(0)}68%{opacity:calc(1 * var(--fi));transform:scale(1.1) rotate(20deg)}78%{opacity:calc(.6 * var(--fi));transform:scale(.8) rotate(40deg)}}
/* Glow: a warm lamp that breathes */
.fx--pulse i{width:80%;aspect-ratio:1;right:-20%;top:-50%;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--fhi) 86%,#fff) 0,color-mix(in srgb,var(--fa) 35%,transparent) 30%,transparent 68%);opacity:calc(.5 * var(--fi))}
html[data-motion="on"] .fx--pulse i{animation:fx-breathe calc(6s * var(--lv-slow)) ease-in-out infinite}
@keyframes fx-breathe{0%,100%{opacity:calc(.4 * var(--fi));transform:scale(.96)}50%{opacity:calc(.8 * var(--fi));transform:scale(1.06)}}
/* Corner Ribbon: one short word on a sash, top right, one shine pass */
.fx--ribbon{mix-blend-mode:normal;overflow:hidden}
.fx--ribbon b{top:18px;right:-40px;width:150px;overflow:hidden;text-align:center;transform:rotate(45deg);background:linear-gradient(180deg,color-mix(in srgb,var(--fhi) 55%,var(--fa)) 0,var(--fa) 52%,color-mix(in srgb,var(--fb) 55%,var(--fa)) 100%);color:var(--fon,#0b0e13);font:700 var(--text-14)/24px var(--font-k-heading);letter-spacing:.1em;text-transform:uppercase;box-shadow:0 2px 10px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.35)}
.fx--ribbon b::after{content:"";position:absolute;top:0;bottom:0;left:0;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.7),transparent);transform:translateX(-120%) skewX(-18deg)}
html[data-motion="on"] .fx--ribbon b::after{animation:fx-rib calc(5.2s * var(--lv-slow)) ease-in-out infinite}
@keyframes fx-rib{0%,45%{transform:translateX(-120%) skewX(-18deg)}100%{transform:translateX(340%) skewX(-18deg)}}
/* News Strip: the league's own facts run along the top edge of the picture; the tags drop under it */
.fx--ticker{mix-blend-mode:normal;inset:0 0 auto 0;height:26px;display:none;align-items:center;background:linear-gradient(90deg,color-mix(in srgb,var(--fb) 78%,#05080c),color-mix(in srgb,var(--fa) 24%,#05080c));border-bottom:1px solid color-mix(in srgb,var(--fhi) 24%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 12px),transparent);mask-image:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 12px),transparent)}
[data-fx~="ticker"] .fx--ticker{display:flex}
.fx--ticker .tk{display:flex;flex:none;width:max-content}
html[data-motion="on"] .fx--ticker .tk{animation:fx-tk calc(30s * var(--lv-slow)) linear infinite}
.fx--ticker .tk span{display:inline-flex;align-items:center;gap:8px;padding:0 18px;font:700 var(--text-14)/1 var(--font-k-heading);letter-spacing:.06em;text-transform:uppercase;color:rgba(243,246,250,.92);white-space:nowrap}
.fx--ticker .tk span::before{content:"";width:6px;height:6px;border-radius:1px;background:var(--fa);transform:skewX(-18deg)}
@keyframes fx-tk{to{transform:translateX(-50%)}}
[data-fx~="ticker"] .rc-tags{top:34px}
[data-fx~="ticker"] .fx--ribbon b{top:40px}
/* Slow Zoom: the banner eases in further */
html[data-motion="on"] [data-fx~="drift"] .rc-pic img{animation-name:fx-drift;animation-duration:calc(28s * var(--lv-slow))}
@keyframes fx-drift{from{transform:scale(1.08) translate(-1.2%,0)}to{transform:scale(1.22) translate(1.6%,-1.4%)}}
/* Film Look: fine grain, three slow jumps */
.fx--grain i{inset:-12%;opacity:calc(.26 * var(--fi));background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:180px 180px}
html[data-motion="on"] .fx--grain i{animation:fx-grain 2.4s steps(1) infinite}
@keyframes fx-grain{0%{transform:translate(0,0)}25%{transform:translate(-4%,3%)}50%{transform:translate(3%,-5%)}75%{transform:translate(-2%,-3%)}}
/* Team Colours: the two colours tint the picture and slowly trade places */
.fx--wash{mix-blend-mode:color;opacity:calc(.55 * var(--fi))}
.fx--wash i{inset:0;background:linear-gradient(115deg,var(--fa) 0,color-mix(in srgb,var(--fa) 40%,var(--fb)) 55%,var(--fb) 100%)}
.fx--wash i.b{background:linear-gradient(295deg,var(--fa) 0,color-mix(in srgb,var(--fa) 40%,var(--fb)) 55%,var(--fb) 100%);opacity:0}
html[data-motion="on"] .fx--wash i.b{animation:fx-washb calc(14s * var(--lv-slow)) ease-in-out infinite alternate}
@keyframes fx-washb{from{opacity:0}to{opacity:1}}
/* Spotlight: soft dark edges and one pool of light that drifts */
.fx--vignette{mix-blend-mode:normal}
.fx--vignette i.v{inset:0;opacity:calc(.8 * var(--fi));background:radial-gradient(ellipse 78% 105% at 70% 38%,transparent 30%,rgba(3,5,9,.38) 70%,rgba(3,5,9,.72) 100%)}
.fx--vignette i.p{left:40%;top:-45%;width:60%;height:170%;opacity:calc(.74 * var(--fi));mix-blend-mode:screen;background:radial-gradient(ellipse 50% 50% at 50% 50%,color-mix(in srgb,var(--fhi) 46%,transparent) 0,color-mix(in srgb,var(--fa) 20%,transparent) 42%,transparent 72%)}
html[data-motion="on"] .fx--vignette i.p{animation:fx-pool calc(18s * var(--lv-slow)) ease-in-out infinite alternate}
@keyframes fx-pool{from{transform:translate(-14%,2%) scale(.96)}to{transform:translate(18%,-3%) scale(1.06)}}
/* Confetti: a quiet scatter at rest; it pops on a tap (the script bursts it) */
.fx--confetti{mix-blend-mode:normal}
.fx--confetti i{width:6px;height:10px;border-radius:1px;opacity:.8}
.fx--confetti i.p1{background:var(--fa)}.fx--confetti i.p2{background:var(--fhi)}.fx--confetti i.p3{background:color-mix(in srgb,var(--fb) 55%,#fff)}.fx--confetti i.p4{background:#fff;width:7px;height:7px;border-radius:50%}
.fx--confetti i:nth-child(1){left:8%;top:14%;transform:rotate(24deg)}.fx--confetti i:nth-child(2){left:17%;top:30%;transform:rotate(-35deg)}.fx--confetti i:nth-child(3){left:29%;top:12%;transform:rotate(60deg)}.fx--confetti i:nth-child(4){left:41%;top:24%}
.fx--confetti i:nth-child(5){left:53%;top:9%;transform:rotate(-50deg)}.fx--confetti i:nth-child(6){left:62%;top:31%;transform:rotate(30deg)}.fx--confetti i:nth-child(7){left:71%;top:15%;transform:rotate(-20deg)}.fx--confetti i:nth-child(8){left:79%;top:7%}
.fx--confetti i:nth-child(9){left:88%;top:25%;transform:rotate(-60deg)}.fx--confetti i:nth-child(10){left:94%;top:12%;transform:rotate(15deg)}.fx--confetti i:nth-child(11){left:58%;top:46%;transform:rotate(70deg)}.fx--confetti i:nth-child(12){left:76%;top:40%}
.fx--confetti i.fly{animation:none}
/* Big Screen: a dark dot grid and a pool of lit dots that drifts (dots, never lines) */
.fx--scan{mix-blend-mode:normal}
.fx--scan i.g{inset:0;opacity:calc(.5 * var(--fi));background:radial-gradient(circle,rgba(0,0,0,.55) 0 1px,transparent 1.6px) 0 0/4px 4px}
.fx--scan i.l{top:0;bottom:0;left:0;width:240%;opacity:calc(.95 * var(--fi));mix-blend-mode:screen;background:radial-gradient(circle,color-mix(in srgb,#fff 55%,var(--fhi)) 0 1.2px,transparent 1.9px) 0 0/4px 4px;-webkit-mask-image:radial-gradient(ellipse 24% 80% at 50% 42%,#000 0,rgba(0,0,0,.55) 55%,transparent 100%);mask-image:radial-gradient(ellipse 24% 80% at 50% 42%,#000 0,rgba(0,0,0,.55) 55%,transparent 100%);transform:translateX(-30%)}
html[data-motion="on"] .fx--scan i.l{animation:fx-scan calc(11s * var(--lv-slow)) ease-in-out infinite alternate}
@keyframes fx-scan{from{transform:translateX(-38%)}to{transform:translateX(-4%)}}
/* Glowing Edge: a light runs round the whole tile's frame (this layer sits on the article, not the picture) */
.fx--edge{mix-blend-mode:normal;inset:-2px;z-index:6;border-radius:inherit;padding:4px;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.fx--edge i{left:50%;top:50%;width:260%;aspect-ratio:1;margin:-130% 0 0 -130%;background:conic-gradient(from 0deg,transparent 0 70%,var(--fa) 84%,#fff 90%,transparent 96%);opacity:calc(.9 * var(--fi))}
html[data-motion="on"] .fx--edge i{animation:fx-spin calc(6s * var(--lv-slow)) linear infinite}
@keyframes fx-spin{to{transform:rotate(360deg)}}
/* Golden Hour: a warm bloom at the lamp and a few soft out-of-focus discs */
.fx--leak i{inset:0}
.fx--leak i::before{content:"";position:absolute;left:36%;top:-62%;width:96%;height:170%;opacity:calc(.8 * var(--fi));background:radial-gradient(ellipse closest-side,color-mix(in srgb,#fff0d0 80%,var(--fhi)) 0,color-mix(in srgb,var(--fhi) 68%,transparent) 22%,color-mix(in srgb,var(--fa) 44%,transparent) 50%,transparent 100%);transform:translate(-4%,0) scale(.96)}
.fx--leak i::after{content:"";position:absolute;inset:-4%;opacity:calc(.8 * var(--fi));--bk:color-mix(in srgb,#fff 36%,var(--fhi));background:radial-gradient(circle closest-side,color-mix(in srgb,var(--bk) 62%,transparent) 0,color-mix(in srgb,var(--bk) 34%,transparent) 76%,transparent 100%) 66% 14%/56px 56px no-repeat,radial-gradient(circle closest-side,color-mix(in srgb,var(--bk) 48%,transparent) 0,color-mix(in srgb,var(--bk) 26%,transparent) 76%,transparent 100%) 83% 38%/36px 36px no-repeat,radial-gradient(circle closest-side,color-mix(in srgb,var(--bk) 56%,transparent) 0,color-mix(in srgb,var(--bk) 30%,transparent) 76%,transparent 100%) 94% 12%/44px 44px no-repeat,radial-gradient(circle closest-side,color-mix(in srgb,var(--bk) 44%,transparent) 0,color-mix(in srgb,var(--bk) 22%,transparent) 76%,transparent 100%) 76% 66%/46px 46px no-repeat,radial-gradient(circle closest-side,color-mix(in srgb,var(--bk) 36%,transparent) 0,color-mix(in srgb,var(--bk) 18%,transparent) 76%,transparent 100%) 90% 74%/30px 30px no-repeat}
html[data-motion="on"] .fx--leak i::before{animation:fx-gold calc(17s * var(--lv-slow)) ease-in-out infinite alternate}
html[data-motion="on"] .fx--leak i::after{animation:fx-bokeh calc(23s * var(--lv-slow)) ease-in-out infinite alternate}
@keyframes fx-gold{from{transform:translate(-6%,2%) scale(.94);opacity:calc(.5 * var(--fi))}to{transform:translate(8%,-2%) scale(1.06);opacity:calc(.74 * var(--fi))}}
@keyframes fx-bokeh{from{transform:translate(-2.5%,2%)}to{transform:translate(2.5%,-2%)}}
/* Foil Card: four colour clouds that trade places on the picture's bright side, a few specks inside them */
.fx--foil{-webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 34%,#000 60%,#000 100%);mask-image:linear-gradient(90deg,transparent 0,transparent 34%,#000 60%,#000 100%)}
.fx--foil i{left:30%;top:-30%;width:80%;height:160%;opacity:calc(.9 * var(--fi));background:radial-gradient(ellipse 46% 56% at 14% 36%,color-mix(in srgb,#00e5ff 92%,var(--fa)) 0,color-mix(in srgb,#00e5ff 36%,transparent) 52%,transparent 76%),radial-gradient(ellipse 44% 58% at 40% 74%,color-mix(in srgb,#ff3fc4 92%,var(--fhi)) 0,color-mix(in srgb,#ff3fc4 34%,transparent) 52%,transparent 76%),radial-gradient(ellipse 44% 56% at 64% 26%,color-mix(in srgb,#ffe040 92%,var(--fb)) 0,color-mix(in srgb,#ffe040 30%,transparent) 52%,transparent 76%),radial-gradient(ellipse 42% 54% at 88% 62%,color-mix(in srgb,#3ad4ff 92%,var(--fa)) 0,color-mix(in srgb,#3ad4ff 34%,transparent) 52%,transparent 76%)}
.fx--foil i::after{content:"";position:absolute;inset:0;opacity:.34;background:radial-gradient(circle,#fff 0 .8px,transparent 1.4px) 3px 2px/37px 41px,radial-gradient(circle,#fff 0 .7px,transparent 1.3px) 17px 23px/53px 47px}
html[data-motion="on"] .fx--foil i{animation:fx-foil calc(18s * var(--lv-slow)) ease-in-out infinite alternate}
@keyframes fx-foil{from{transform:translate(-8%,2%) rotate(-3deg) scale(1)}to{transform:translate(10%,-3%) rotate(3deg) scale(1.1)}}
/* Floating Dust: a few uneven specks rising through the light */
.fx--motes i{width:5px;height:5px;border-radius:50%;background:#fff;box-shadow:0 0 6px 2px color-mix(in srgb,var(--fa) 70%,#fff);opacity:0;bottom:10%}
.fx--motes i:nth-child(1){left:58%}.fx--motes i:nth-child(2){left:70%;width:3px;height:3px}.fx--motes i:nth-child(3){left:84%;width:4px;height:4px}.fx--motes i:nth-child(4){left:92%;width:3px;height:3px}.fx--motes i:nth-child(5){left:48%;width:4px;height:4px}
html[data-motion="on"] .fx--motes i{animation:fx-dust calc(8s * var(--lv-slow)) linear infinite}
html[data-motion="on"] .fx--motes i:nth-child(2){animation-delay:2.6s;animation-duration:calc(10s * var(--lv-slow))}html[data-motion="on"] .fx--motes i:nth-child(3){animation-delay:5s;animation-duration:calc(9s * var(--lv-slow))}
html[data-motion="on"] .fx--motes i:nth-child(4){animation-delay:1.2s;animation-duration:calc(11s * var(--lv-slow))}html[data-motion="on"] .fx--motes i:nth-child(5){animation-delay:6.4s}
@keyframes fx-dust{0%{transform:translateY(0);opacity:0}15%{opacity:calc(.9 * var(--fi))}85%{opacity:calc(.6 * var(--fi))}100%{transform:translateY(-140px) translateX(14px);opacity:0}}

/* ==========================================================================
   SEARCH + FILTERS (the 1606 Search A: the field + a Filters sheet on the phone; the chips inline on the desktop)
   ========================================================================== */
.fh-search{display:flex;flex-direction:column;gap:var(--k-space-sm)}
.fh-srow{display:flex;gap:var(--k-space-xs)}
.fh-field{position:relative;flex:1;min-width:0}
.fh-field svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--color-k-muted);pointer-events:none}
.fh-in{appearance:none;-webkit-appearance:none;width:100%;height:44px;padding:0 44px 0 40px;border:1px solid var(--color-k-border-strong);border-radius:calc(var(--k-radius) - 2px);background:var(--color-k-panel);color:var(--color-k-text);font:600 var(--text-16)/1 var(--font-k-body)}
.fh-in::placeholder{color:var(--color-k-muted)}
.fh-in:focus{outline:3px solid var(--color-k-brand);outline-offset:0;border-color:transparent}
.fh-x{position:absolute;right:0;top:0;display:none;width:44px;height:44px;border:0;background:none;color:var(--color-k-muted);border-radius:calc(var(--k-radius) - 2px)}
.fh-field.has-text .fh-x{display:grid;place-items:center}
.fh-fbtn{position:relative;display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 14px;border:1px solid var(--color-k-border-strong);border-radius:calc(var(--k-radius) - 2px);background:var(--color-k-panel);color:var(--color-k-text);font:700 var(--text-16)/1 var(--font-k-heading);white-space:nowrap}
.fh-fbtn .fh-fn{display:none;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--color-k-brand);color:var(--color-k-brand-on);font:700 var(--text-14)/22px var(--font-k-heading);text-align:center}
.fh-fbtn.has-n .fh-fn{display:inline-block}
.fh-fbtn.has-n{border-color:var(--color-k-brand)}
.fh-pills{display:flex;flex-wrap:wrap;gap:8px}
.fh-pills:empty{display:none}
/* 11 Nov WCL sweep (P-01): scoped to the board filter pills. The homepage bottom bar is nav.pill.fh-pill and this sheet loads after home_on.css, so the bare .fh-pill rule drew the phone bar on a computer too. */
.fh-pills .fh-pill{display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 4px 0 12px;border:1px solid color-mix(in srgb,var(--color-k-brand) 60%,var(--color-k-border));border-radius:999px;background:color-mix(in srgb,var(--color-k-brand) 14%,var(--color-k-surface));color:var(--color-k-text);font:600 var(--text-14)/1 var(--font-k-heading)}
.fh-pills .fh-pill b{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;color:var(--color-k-text)}
.fh-pills .fh-pill.fh-pill--clear{border-color:var(--color-k-border-strong);background:var(--color-k-panel);padding:0 14px}
.fh-chips{display:flex;flex-wrap:wrap;gap:8px}
.fh-chip{display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 14px;border:1px solid var(--color-k-border-strong);border-radius:999px;background:var(--color-k-panel);color:var(--color-k-text);font:600 var(--text-14)/1 var(--font-k-heading);white-space:nowrap;transition:background-color 120ms var(--k-ease),border-color 120ms var(--k-ease)}
.fh-chip[aria-pressed="true"]{background:color-mix(in srgb,var(--color-k-brand) 18%,var(--color-k-surface));border-color:var(--color-k-brand);color:var(--color-k-text)}
.fh-chip[aria-pressed="true"]::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--color-k-brand)}
.fh-sel{position:relative;display:inline-flex;align-items:center;height:44px;border:1px solid var(--color-k-border-strong);border-radius:999px;background:var(--color-k-panel)}
.fh-sel select{appearance:none;height:42px;padding:0 36px 0 14px;border:0;border-radius:999px;background:transparent;color:var(--color-k-text);font:600 var(--text-16)/1 var(--font-k-heading)}
.fh-sel svg{position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--color-k-muted)}
.fh-clear{height:44px;padding:0 14px;border:0;border-radius:999px;background:none;color:var(--color-k-muted);font:700 var(--text-14)/1 var(--font-k-heading);text-decoration:underline;text-underline-offset:3px}
.fh-inline{display:none}
.fh-sheet{position:fixed;inset:0;z-index:540;display:none}
.fh-sheet.is-open{display:block}
.fh-sheet-bg{position:absolute;inset:0;background:rgba(0,0,0,.55);opacity:0;transition:opacity 240ms var(--k-ease)}
.fh-sheet.is-open .fh-sheet-bg{opacity:1}
.fh-sheet-p{position:absolute;left:0;right:0;bottom:0;max-height:88vh;display:flex;flex-direction:column;background:var(--color-k-panel);border:1px solid var(--color-k-border-strong);border-bottom:0;border-radius:var(--k-radius) var(--k-radius) 0 0;transform:translateY(100%);transition:transform 280ms var(--out);padding-bottom:env(safe-area-inset-bottom,0px)}
.fh-sheet.is-open .fh-sheet-p{transform:none}
.fh-sheet-h{position:relative;display:flex;align-items:center;justify-content:space-between;gap:var(--k-space-sm);padding:var(--k-space-sm) var(--k-space-sm) var(--k-space-sm) var(--k-space-md);border-bottom:1px solid var(--color-k-border)}
.fh-sheet-h b{font:700 var(--text-20)/1 var(--font-k-heading)}
.fh-sheet-h::before{content:"";position:absolute;left:50%;top:6px;width:40px;height:4px;margin-left:-20px;border-radius:2px;background:var(--color-k-border-strong)}
.fh-ico{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:calc(var(--k-radius) - 2px);background:none;color:var(--color-k-text)}
.fh-sheet-b{overflow:auto;padding:var(--k-space-md);display:flex;flex-direction:column;gap:var(--k-space-md)}
.fh-grp{display:flex;flex-direction:column;gap:var(--k-space-xs)}
.fh-grp>b{font:700 var(--text-16)/1 var(--font-k-heading)}
.fh-grp>small{font:500 var(--text-14)/1.3 var(--font-k-body);color:var(--color-k-muted)}
.fh-sheet-f{display:flex;gap:var(--k-space-xs);padding:var(--k-space-sm) var(--k-space-md) var(--k-space-md);border-top:1px solid var(--color-k-border);background:var(--color-k-panel)}
.fh-sheet-f .k-btn--primary{flex:1}
/* the shimmer while results change (row 11) */
.fh-skel{display:none;flex-direction:column;gap:var(--k-space-sm)}
.fh-list.is-loading .fh-skel{display:flex}
.fh-list.is-loading>.rc{display:none}
.fh-skel>div{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:10px;min-height:88px;padding:var(--k-space-md);border:1px solid var(--color-k-border);border-radius:var(--k-radius);background:var(--color-k-surface)}
.fh-skel i{display:block;height:14px;border-radius:6px;background:color-mix(in srgb,var(--color-k-text) 9%,transparent)}
.fh-skel i:nth-child(1){width:46%;height:18px}.fh-skel i:nth-child(2){width:72%}
.fh-skel>div::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(100deg,transparent 15%,rgba(255,255,255,.1) 50%,transparent 85%);animation:fh-sh 1.4s ease-in-out infinite}
@keyframes fh-sh{to{transform:translateX(100%)}}

/* ==========================================================================
   MY LEAGUES: the add-on perks card (1455) between the two lists, the slow light sweep with a glint (row 18)
   ========================================================================== */
.lg-perks{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--k-radius);padding:1px;background:linear-gradient(135deg,color-mix(in srgb,var(--color-k-gold) 80%,#fff),color-mix(in srgb,var(--color-k-gold) 40%,var(--color-k-border)) 40%,color-mix(in srgb,var(--color-k-gold) 85%,#fff))}
.lg-perks-in{position:relative;display:flex;flex-direction:column;gap:var(--k-space-md);border-radius:calc(var(--k-radius) - 1px);padding:var(--k-space-md);background:linear-gradient(135deg,color-mix(in srgb,var(--color-k-gold) 16%,#0c0f14),#0c0f14 55%);color:#fff;overflow:hidden}
.lg-perks-sweep{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.lg-perks-sweep i{position:absolute;top:-40%;bottom:-40%;left:-20%;width:16%;background:linear-gradient(100deg,transparent,rgba(255,224,150,.3),transparent);transform:skewX(-18deg) translateX(-300%);animation:lg-psw 8s ease-in-out infinite}
@keyframes lg-psw{0%,72%{transform:skewX(-18deg) translateX(-300%)}92%,100%{transform:skewX(-18deg) translateX(900%)}}
.lg-perks-h,.lg-perks-l,.lg-perks-f{position:relative;z-index:1}
.lg-perks-h{display:flex;flex-direction:column;align-items:flex-start;gap:var(--k-space-xs)}
.lg-perks-tab{display:inline-flex;align-items:center;height:28px;padding:0 14px 0 12px;background:var(--color-k-gold);color:#1b1203;font:700 var(--text-14)/1 var(--font-k-heading);letter-spacing:.04em;text-transform:uppercase;clip-path:polygon(0 0,100% 0,calc(100% - 8px) 100%,0 100%)}
.lg-perks-h h3{margin:0;font:800 italic var(--text-24)/1.05 var(--font-k-display);text-transform:uppercase}
.lg-perks-h p{margin:0;font:500 var(--text-16)/1.4 var(--font-k-body);color:rgba(243,246,250,.82);text-wrap:pretty}
.lg-perks-l{display:flex;flex-direction:column;gap:var(--k-space-xs);margin:0;padding:0;list-style:none}
.lg-perks-l li{display:flex;align-items:flex-start;gap:10px;font:500 var(--text-16)/1.35 var(--font-k-body)}
.lg-perks-l svg{flex:none;margin-top:3px;color:var(--color-k-gold)}
.lg-perks-f{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--k-space-sm);padding-top:var(--k-space-sm);border-top:1px solid color-mix(in srgb,var(--color-k-gold) 40%,rgba(255,255,255,.2))}
.lg-perks-f b{font:700 var(--text-16)/1.2 var(--font-k-heading);color:#ffd978}

/* ==========================================================================
   EDIT LISTING (spec 43): the head, the pinned preview, the option cards, the swatches, the banner. The rows, cards, hints, (i), examples, inputs,
   choices, segmented control, status rows and notices are the kit's own parts (+kCard, +kRow, +kInfo, +kExample, +kText, +kTickGroup, +kRadioGroup,
   +kSegmented, +kStatusRow, +kNotice, +kBtnSet); only what the kit has no part for stays here.
   ========================================================================== */
.ed{display:flex;flex-direction:column;gap:var(--k-space-md)}
.ed-head{display:flex;flex-direction:column;gap:4px}
.ed-head h1{margin:0;font:800 italic var(--text-32)/1.05 var(--font-k-display);text-transform:uppercase}
.ed-head p{margin:0;font:500 var(--text-16)/1.4 var(--font-k-body);color:var(--color-k-muted)}
.ed-head p b{color:var(--color-k-text)}
/* the live preview: pinned under the brand row on the phone as the top of the real card; both whole cards in a sheet */
.ed-prev{position:sticky;top:56px;z-index:25;display:flex;flex-direction:column;gap:var(--k-space-xs);margin:0 calc(var(--k-space-md) * -1);padding:var(--k-space-sm) var(--k-space-md);background:var(--color-k-bg);border-bottom:1px solid var(--color-k-border)}
.ed-prev-h{display:flex;align-items:center;justify-content:space-between;gap:var(--k-space-sm)}
.ed-prev-h b{font:700 var(--text-14)/1.3 var(--font-k-heading);color:var(--color-k-muted)}
.ed-prev-h b em{font-style:normal;color:var(--color-k-text)}
.ed-prev-h .k-btn{min-height:44px;padding:0 12px;font-size:var(--text-14)}
.ed-prev-full{display:none}
/* 1783 (owner 12 Nov): on a phone the preview sits in the normal flow; pinned it covered a third of the screen over the text while he typed. The desktop side preview below stays sticky. */
@media (max-width:640px){.ed-prev{position:static;margin:0;padding:var(--k-space-sm) var(--k-space-md);border:1px solid var(--color-k-border);border-radius:var(--k-radius-md,12px)}}
.rc.is-live .rc-top{height:88px}
.rc.is-live .rc-acts,.rc.is-live .rc-line+.rc-line,.rc.is-live .rc-bumped{display:none}
.rc.is-live .rc-body{padding-bottom:var(--k-space-sm)}
.rc.is-live .rc-link{display:none}
.rc.is-live .rc-pool{bottom:-120px;--pool-clip:120px}
.ed-pv{display:flex;flex-direction:column;gap:var(--k-space-xs)}
.ed-pv>b{font:700 var(--text-14)/1.3 var(--font-k-heading);color:var(--color-k-muted)}
.ed-pv .rc-link{display:none}
/* the option cards: ready-made looks, lights, letters, colours */
.op-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px}
/* 1328 (HUNT2 phone H1): the look options sit under their label at the card's whole width, not in the 280 / 360 px control column, so a league name never stacks one word per line.
   The grid itself gives one column on a phone and two or three only when every cell is at least 160 px wide. */
.k-card.ed-look .k-row:not(.k-grid > .k-row) > .k-row-head{flex:1 1 100%}
.k-card.ed-look .k-row:not(.k-grid > .k-row) > .k-row-head ~ .k-row-control{flex:1 1 100%;margin-left:0;max-width:100%;justify-content:flex-start}
.ed-look .k-row-control>.op-grid,.ed-look .k-row-control>.ed-cats{flex:1 1 100%;min-width:0}
/* HUNT2 phone M1: a count or a link beside an input wraps under it instead of squeezing the input */
.ed .k-row-control{flex-wrap:wrap}
.ed .k-row-control>input{flex:1 1 100%}
.lg-quiet{display:inline-flex;align-items:center;min-height:44px}
.op-grid--1{grid-template-columns:minmax(0,1fr)}
.op{position:relative;display:flex;flex-direction:column;justify-content:center;gap:4px;min-height:44px;padding:10px 12px;border:1px solid var(--color-k-border);border-radius:calc(var(--k-radius) - 2px);background:var(--color-k-panel);color:var(--color-k-text);cursor:pointer;transition:border-color 120ms var(--k-ease),box-shadow 120ms var(--k-ease)}
.op input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.op b{font:700 var(--text-16)/1.2 var(--font-k-heading);overflow-wrap:normal}
.op small{font:500 var(--text-14)/1.3 var(--font-k-body);color:var(--color-k-muted)}
.op:has(input:checked){border-color:var(--color-k-brand);box-shadow:0 0 0 2px color-mix(in srgb,var(--color-k-brand) 35%,transparent);background:color-mix(in srgb,var(--color-k-brand) 8%,var(--color-k-panel))}
.op:has(input:disabled){opacity:.5;pointer-events:none}
.op--font b{font-family:var(--name-font);font-weight:var(--name-weight);font-style:var(--name-style);text-transform:var(--name-case);letter-spacing:var(--name-space);font-size:var(--text-20);line-height:1.15}
.op--look b::before{content:"";display:inline-block;width:14px;height:14px;margin-right:6px;border-radius:3px;vertical-align:-1px;background:linear-gradient(135deg,var(--fa),var(--fb))}
.op--scheme i{display:block;height:12px;border-radius:6px;background:linear-gradient(90deg,var(--fa),var(--fb));border:1px solid rgba(255,255,255,.14)}
.op--scheme[data-scheme="custom"] i{background:linear-gradient(90deg,var(--cu-a,#ff6a1a),var(--cu-b,#1a3a9a))}
.op--scheme[data-scheme="picture"] i{background:linear-gradient(90deg,var(--pic-a,#8fa8c8),var(--pic-b,#2a3a52))}
.op--scheme[data-scheme="team"] i,.op--scheme[data-scheme="league"] i{background:linear-gradient(90deg,var(--fa),var(--fb))}
.ed-two{display:flex;gap:var(--k-space-sm);align-items:center}
.ed-two label{display:flex;align-items:center;gap:8px;font:600 var(--text-14)/1 var(--font-k-heading)}
.ed-two input[type="color"]{width:44px;height:44px;padding:0;border:1px solid var(--color-k-border-strong);border-radius:calc(var(--k-radius) - 2px);background:var(--color-k-panel);cursor:pointer}
.sw-grid{display:flex;flex-wrap:wrap;gap:8px}
.sw{position:relative;display:block;width:44px;height:44px;border-radius:var(--k-radius);border:2px solid var(--color-k-border);background:var(--color-k-panel);cursor:pointer}
.sw input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.sw i{position:absolute;inset:3px;border-radius:8px;background:var(--c)}
.sw--default i{background:repeating-linear-gradient(45deg,var(--color-k-surface-2) 0 6px,var(--color-k-surface-3) 6px 12px)}
.sw:has(input:checked){border-color:var(--color-k-text);box-shadow:0 0 0 2px var(--color-k-bg),0 0 0 4px var(--color-k-brand)}
.sw.is-low::after{content:"";position:absolute;right:-3px;bottom:-3px;width:14px;height:14px;border-radius:50%;background:var(--k-amber);border:2px solid var(--color-k-bg)}
.sw-name{margin:0;font:600 var(--text-14)/1.3 var(--font-k-heading);color:var(--color-k-muted)}
.sw-name b{color:var(--color-k-text)}
.ed-banner{position:relative;aspect-ratio:16/5;border-radius:calc(var(--k-radius) - 2px);overflow:hidden;border:1px solid var(--color-k-border);background:#0b0e13}
.ed-banner img{width:100%;height:100%;object-fit:cover}
.ed-banner small{position:absolute;left:8px;bottom:8px;padding:4px 8px;border-radius:999px;background:rgba(8,11,16,.7);color:#fff;font:600 var(--text-14)/1 var(--font-k-heading)}
.k-file input{position:absolute;width:1px;height:1px;opacity:0}
.k-file{position:relative;cursor:pointer}
.ed-cats{display:flex;flex-wrap:wrap;gap:8px}
.ed-quiet{display:flex;flex-wrap:wrap;gap:var(--k-space-sm);align-items:center;justify-content:space-between}
.ed-danger{color:var(--color-k-danger);font:600 var(--text-14)/1 var(--font-k-heading);text-decoration:underline;text-underline-offset:3px;min-height:44px;display:inline-flex;align-items:center;background:none;border:0;padding:0}

/* ==========================================================================
   DESKTOP (1024 and up): the two lists three across, the filters inline, the hover bar, Edit listing as two columns
   ========================================================================== */
@media (min-width:1024px){
  .fh-sec small{flex-basis:auto;padding-left:0;margin-left:auto}
  /* 11 Nov WCL sweep: every card in a row is the same height (the shorter Featured card stood out beside its neighbours); the buttons sit on the card's bottom edge */
  .fh-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--k-space-md);align-items:stretch}
  .fh-list>.rc{height:100%}
  .fh-empty,.fh-skel,.fh-foot{grid-column:1/-1}
  .rc.is-feat .rc-top{height:150px}
  .fh-search .fh-srow{max-width:640px}
  .fh-fbtn,.fh-pills{display:none}
  .fh-inline{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
  .fh-sheet{display:none!important}
  /* hover pop-out, halved (1478): the border takes the league colour, a 3 px left bar, a soft shadow, scale 1.01 (row 2) */
  .rc{transition:border-color 160ms var(--k-ease),box-shadow 160ms var(--k-ease)}
  .rc::before{content:"";position:absolute;inset:0;z-index:4;border-radius:inherit;pointer-events:none;box-shadow:inset 3px 0 0 transparent;transition:box-shadow 160ms var(--k-ease)}
  .rc:hover,.rc:has(:focus-visible){border-color:color-mix(in srgb,var(--lc) 70%,var(--color-k-border));box-shadow:0 6px 14px -8px #000}
  .rc:hover::before{box-shadow:inset 3px 0 0 var(--lc)}
  .rc.is-feat:hover{border-color:color-mix(in srgb,var(--gold-glow) 70%,var(--color-k-border))}
  .rc.is-feat:hover::before{box-shadow:inset 3px 0 0 var(--fa)}
  .lg-perks-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--k-space-md) var(--k-space-lg);align-items:center;padding:var(--k-space-lg)}
  .lg-perks-f{grid-column:1/-1}
  .lg-perks-h h3{font-size:var(--text-32)}
  /* Edit listing: the options left, the preview right (both whole cards, sticky) */
  .ed{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:var(--k-space-lg);align-items:start}
  .ed-head{grid-column:1/-1}
  .ed-prev{grid-column:2;grid-row:2/span 20;top:80px;margin:0;padding:0;background:none;border:0;gap:var(--k-space-md)}
  .ed-prev-h .k-btn,.ed-prev-mini{display:none}
  .ed-prev-full{display:flex;flex-direction:column;gap:var(--k-space-md)}
  .ed-col{grid-column:1;display:flex;flex-direction:column;gap:var(--k-space-md)}
  .op-grid--1{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
}

/* 11 Nov picture read (spec 41 section 2): My Leagues / Find a League are TWO TABS on the phone as on the desktop. The strip is the kit's one +kSubTabs; its phone switcher
   (a dropdown that opens a sheet) is for long lists, so on this strip only the underlined row stays and the switcher and its sheet are not drawn. */
@media (max-width:639px){
  .k-subtabs:has(#lg-tabs-sheet) .k-subtabs-nav{display:flex;flex-wrap:nowrap;column-gap:0;border-bottom:1px solid var(--color-k-border)}
  /* 1687 (owner 11 Nov: the "Find a League" count was cut off at the right): the two tabs share the row by what each needs (flex auto, not two equal halves), the icon is not drawn
     on the phone, the count never shrinks and nothing is cut (the board's rule: no ellipsis anywhere). Icon + "Find a League" + "215" needed about 180 px in a 144 to 179 px half. */
  .k-subtabs:has(#lg-tabs-sheet) .k-subtab{flex:1 1 auto;min-width:0;min-height:48px;justify-content:center;padding:0 4px}
  .k-subtabs:has(#lg-tabs-sheet) .k-subtab-ic{display:none}
  .k-subtabs:has(#lg-tabs-sheet) .k-subtab-n{flex:none;margin-inline-start:8px}
  .k-subtabs:has(#lg-tabs-sheet) .k-subtabs-switcher,.k-subtabs:has(#lg-tabs-sheet) #lg-tabs-sheet{display:none}
}
@media (max-width:359px){
  .k-subtabs:has(#lg-tabs-sheet) .k-subtab{font-size:var(--text-14)}
}