block overriding the main
// bg/text/border/from/to/ring hkpl-* utility classes. Falls back silently when the params
// are absent — production behaviour is unchanged.
(function _previewColorOverride(){
  try {
    const p = new URLSearchParams(location.search);
    const theme  = p.get('theme');
    const accent = p.get('accent');
    const isHex = v => /^#[0-9a-fA-F]{6}$/.test(v || '');
    if (!isHex(theme) && !isHex(accent)) return;
    // derive a darker shade for hover/700 and a lighter tint for 50 backgrounds
    const darken = (hex, pct) => '#' + hex.replace(/^#/,'').match(/.{2}/g).map(h => Math.max(0, parseInt(h,16) - Math.round(255*pct)).toString(16).padStart(2,'0')).join('');
    const lighten = (hex, pct) => '#' + hex.replace(/^#/,'').match(/.{2}/g).map(h => Math.min(255, parseInt(h,16) + Math.round((255-parseInt(h,16))*pct)).toString(16).padStart(2,'0')).join('');
    const css = [];
    if (isHex(theme)) {
      const t = theme, t600 = darken(t, .04), t700 = darken(t, .10), t50 = lighten(t, .90), t100 = lighten(t, .80);
      css.push(`.bg-hkpl-500{background-color:${t} !important}`);
      css.push(`.bg-hkpl-600{background-color:${t600} !important}`);
      css.push(`.bg-hkpl-700{background-color:${t700} !important}`);
      css.push(`.bg-hkpl-50{background-color:${t50} !important}`);
      css.push(`.bg-hkpl-100{background-color:${t100} !important}`);
      css.push(`.text-hkpl-500{color:${t} !important}`);
      css.push(`.text-hkpl-600{color:${t600} !important}`);
      css.push(`.text-hkpl-700{color:${t700} !important}`);
      css.push(`.text-hkpl-300{color:${lighten(t,.45)} !important}`);
      css.push(`.text-hkpl-400{color:${lighten(t,.20)} !important}`);
      css.push(`.border-hkpl-500{border-color:${t} !important}`);
      css.push(`.from-hkpl-500{--tw-gradient-from:${t} !important}`);
      css.push(`.to-hkpl-700{--tw-gradient-to:${t700} !important}`);
      css.push(`.ring-hkpl-500{--tw-ring-color:${t} !important}`);
      css.push(`meta[name="theme-color"]{content:"${t}"}`);
      const m = document.querySelector('meta[name="theme-color"]'); if (m) m.setAttribute('content', t);
    }
    if (isHex(accent)) css.push(`.text-amber-500,.bg-amber-500{color:${accent} !important;background-color:${accent} !important}`);
    const style = document.createElement('style');
    style.id = '_preview-color-override';
    style.textContent = css.join('\n');
    document.head.appendChild(style);
  } catch (_) { /* preview override is best-effort — never break the public page */ }
})();
</script>
<style>
@import url('/css/fonts-local.css');
body{font-family:'Albert Sans','Noto Sans TC',sans-serif} html[lang^="zh"] body{font-family:'Noto Sans TC',sans-serif}
.font-display{font-family:'Akshar',sans-serif}
.skew{transform:skewX(-12deg)} .skew>*{transform:skewX(12deg);display:inline-block}
.tab-active{background:var(--brand) !important;color:white !important}
.bg-hero{position:relative;overflow:hidden;background:linear-gradient(120deg,color-mix(in srgb, var(--brand-700), transparent 20%) 0%,color-mix(in srgb, var(--brand), transparent 28%) 42%,color-mix(in srgb, var(--c-0a2e1a), transparent 12%) 100%),url('/cdn/gcs/images/home_banner.jpg');background-size:cover;background-position:center center}
.bg-hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1px);background-size:18px 18px;opacity:.5}
.bg-hero::after{content:"";position:absolute;right:-80px;top:-80px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(150,255,120,.20),transparent 70%)}
.bg-hero>*{position:relative;z-index:1}
.hero-pill{background:var(--p9dff5b,#9dff5b);color:var(--p0a2e1a,#0a2e1a)}
.hero-rule{height:4px;width:56px;background:var(--p9dff5b,#9dff5b);border-radius:2px}
/* STANDINGS-FIT-V1 (2026-07-31, operator "fit the viewport, no side-scroll"): on phones show the essentials
   (# · Team · P · W · L · Pts) and hide the secondary stat columns (GW/GL/Game%/Match%) so the table fits with
   no horizontal scroll. Full detail returns on tablet/desktop. */
@media (max-width:640px){
  .stand-tbl{min-width:0 !important}
  .stand-tbl .col-sec{display:none}
  .stand-tbl th, .stand-tbl td{padding-left:.4rem !important; padding-right:.4rem !important}
}
/* TABLE-EDGE-FIX-V1 (2026-09-06): right-edge stat columns were clipped at phone widths with no scroll
   affordance. Make the ranked table horizontally reachable, keep #/Team sticky, add an edge-fade hint. */
.tbl-fade{position:relative}
.tbl-fade::after{content:"";position:absolute;top:0;right:0;bottom:0;width:22px;pointer-events:none;background:linear-gradient(to right,transparent,var(--card,#fff));z-index:4}
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media (max-width:640px){
  .tbl-scroll .stand-tbl{min-width:0 !important}/*FIGURES-VISIBLE-REVERT 2026-09-06: today TABLE-EDGE-FIX-V1 set 560px which pushed P/W/L/Pts off-screen, contradicting the operator STANDINGS-FIT-V1 fit-no-scroll design. Back to fit; team name truncates via shell rules.*/
  .tbl-scroll .stand-tbl thead th:nth-child(1),.tbl-scroll .stand-tbl tbody td:nth-child(1){position:sticky;left:0;z-index:3;box-sizing:border-box;width:38px;min-width:38px;max-width:38px;padding-left:6px !important;padding-right:4px !important}
  .tbl-scroll .stand-tbl thead th:nth-child(2),.tbl-scroll .stand-tbl tbody td:nth-child(2){position:sticky;left:38px;z-index:3}
  .tbl-scroll .stand-tbl thead th:nth-child(1),.tbl-scroll .stand-tbl thead th:nth-child(2){background:var(--ink,#0a2e1a)}
  .tbl-scroll .stand-tbl tbody td:nth-child(1),.tbl-scroll .stand-tbl tbody td:nth-child(2){background:var(--card,#fff)}
}


/* ---- next style block ---- */

.dt-scroll::-webkit-scrollbar{display:none}

/* ---- next style block ---- */

[data-module="social_games"],[data-module="tournament"],[data-module="open_play"]{display:none!important}#hkpl-sh .sh-modes{display:none!important}#hkpl-sh nav.desktop > [data-module="league"][data-module="league"]{display:flex!important}

/* ---- next style block ---- */

.hkpl-tabwrap{position:relative;min-width:0;max-width:100%}.hkpl-tabwrap::before,.hkpl-tabwrap::after{content:"";position:absolute;top:0;bottom:0;width:26px;pointer-events:none;opacity:0;transition:opacity .18s ease;z-index:2}.hkpl-tabwrap::before{left:0;background:linear-gradient(to right,var(--ground,#f6f8f4),transparent)}.hkpl-tabwrap::after{right:0;background:linear-gradient(to left,var(--ground,#f6f8f4),transparent)}.hkpl-tabwrap.can-left::before{opacity:1}.hkpl-tabwrap.can-right::after{opacity:1}.hkpl-tabscroll{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:none}.hkpl-tabscroll::-webkit-scrollbar{display:none}

/* ---- next style block ---- */


  /* MODE-SWITCHER-V1: the four products live in their own colour-coded bar, NOT in the league menu. */
  #hkpl-sh nav.desktop > [data-module] { display: none !important; }   /* shown in the mode bar instead */
  #hkpl-sh .sh-modes { border-top: 1px solid #eef1f0; background: #fbfcfb; }
  #hkpl-sh .sh-modes-in { max-width: 1280px; margin: 0 auto; padding: 8px 16px; display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  #hkpl-sh .sh-modes-in::-webkit-scrollbar { display: none; }
  /* TAP-44 (2026-08-05, with NAV-GRID-V1): these chips measured 75x32 / 82x35 — under the 44px floor.
     min-height lifts them without changing the pill look. */
  #hkpl-sh a.sh-mode { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; min-height: 44px; padding: 7px 15px; border-radius: 999px;
    border: 1.5px solid var(--mc); color: color-mix(in srgb, var(--mc) 85%, #000); background: #fff; font-size: 12.5px; font-weight: 800; letter-spacing: .02em;
    text-decoration: none; white-space: nowrap; transition: transform .12s ease, box-shadow .12s ease, background .12s ease; }
  #hkpl-sh a.sh-mode .ic { display: inline-flex; align-items: center; line-height: 0; }
  #hkpl-sh a.sh-mode .ic svg { width: 17px; height: 17px; display: block; }
  #hkpl-sh a.sh-mode:hover { transform: translateY(-1px); box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--mc) 55%, transparent); }
  #hkpl-sh a.sh-mode.on { background: var(--mc); color: #fff; box-shadow: 0 4px 14px -5px color-mix(in srgb, var(--mc) 70%, transparent); }
  @media (max-width: 640px) { #hkpl-sh .sh-modes-in { padding: 7px 12px; gap: 6px; } #hkpl-sh a.sh-mode { min-height: 44px; padding: 6px 12px; font-size: 12px; } }
  #hkpl-sh, #hkpl-sh * { box-sizing: border-box; }
  #hkpl-sh { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,0.96); backdrop-filter: blur(8px);
            border-bottom: 1px solid #f3f4f6; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang HK', 'Microsoft YaHei', Roboto, sans-serif; }
  /* HEADER-ALIGN-V2 (2026-07-11, Vincent "logo far-left + centred nav looks broken / misaligned"): group
     the logo and nav together on the left as one cohesive unit, and push the controls to the right with an
     auto margin. No more floating gap between the wordmark and the menu. */
  #hkpl-sh .inner { max-width: 1280px; margin: 0 auto; padding: 0 16px; display: flex; align-items: center; justify-content: flex-start; height: 64px; }
  #hkpl-sh .logo { display: flex; align-items: center; gap: 12px; flex-shrink: 0; text-decoration: none; }
  #hkpl-sh .logo img { height: 40px; width: auto; display: block; }
  #hkpl-sh nav.desktop { display: flex; align-items: center; gap: 4px; margin-left: 32px; }
  #hkpl-sh .rhs { margin-left: auto; } /* HEADER-NAV-RHS-GAP-V1 */ #hkpl-sh .desktop{margin-right:26px}
  #hkpl-sh nav.desktop a { padding: 8px 14px; font-size: 13px; font-weight: 600; color: #374151; text-decoration: none; text-transform: uppercase; letter-spacing: 0.04em; border-radius: 6px; white-space: nowrap; }
  #hkpl-sh nav.desktop a:hover { color: var(--brand,#008034); }
  /* PORTAL-ENTRANCE-V1: the signed-in user's own portal link — a filled brand pill so the entrance is obvious. */
  /* PORTAL-BTN-POLISH-V1 (2026-08-06, operator: "make the my-team button more professional"). It was a
     solid green blob sitting beside four quiet outline pills — loud, and out of step with its own row.
     Now it speaks the same pill language as the mode toggle and the text-size control, and stays the only
     control in brand INK, so it is still plainly the way into your portal. */
  /* PORTAL-BTN-SMALLER-V1 (2026-08-07, committee yh2km5 "make the my profile button on the top smaller").
     Measured 125px — the widest control in the row, next to neighbours of 44-49px. It inherited the page
     font size (so a reader on Large text made it wider still) while every other control in .rhs pins its
     own 11-13px. Pinning 12px and trimming the box takes it to roughly the size of the sign-in chip.
     Nothing is hidden: same label, same brand ink, same >=32px target, still the only inked control. */
  #hkpl-sh a.sh-portal { display: inline-flex; align-items: center; justify-content: center; gap: 4px;
    height: 34px; align-self: center; flex: 0 0 auto;   /* centred, not stretched — the stretch is what
    made a short word into an egg once the pill radius was applied to a full-height box */
    background: var(--brand-50,#ecfdf5); color: var(--brand-strong,#006c2c);
    border: 1px solid color-mix(in srgb, var(--brand,#008034) 30%, transparent);
    border-radius: 8px;                                 /* a button corner, not a pill */
    padding: 0 10px; margin-right: 4px; white-space: nowrap; line-height: 1;
    font-size: 12px; font-weight: 700; letter-spacing: .01em; transition: background .12s, border-color .12s; }
  #hkpl-sh a.sh-portal::after { content: ''; width: 5px; height: 5px; border-right: 2px solid currentColor;
    border-top: 2px solid currentColor; transform: rotate(45deg); opacity: .5; margin-left: 1px; }
  #hkpl-sh a.sh-portal:hover { background: var(--brand-100,#d1fae5);
    border-color: color-mix(in srgb, var(--brand,#008034) 55%, transparent); }
  #hkpl-sh a.sh-portal:active { transform: scale(0.97); }
  #hkpl-sh nav.desktop a.sh-portal:hover { background: var(--brand-strong,#006c2c); color: #fff; }
  #hkpl-mobile nav a.sh-portal { color: var(--brand-strong,#006c2c); font-weight: 800; }
  #hkpl-sh nav.desktop a.active { color: var(--brand-strong,#006c2c); }
  /* REGISTER-CTA-V1 (2026-08-02, committee: highlight Register — it is the key CTA): filled accent so it reads as a button, not a plain link. */
  #hkpl-sh nav.desktop a[href="/register.html"] { background: var(--brand,#008034); color: #fff; }
  #hkpl-sh nav.desktop a[href="/register.html"]:hover { background: var(--brand-strong,#006c2c); color: #fff; }
  #hkpl-mobile nav a[href="/register.html"] { color: var(--brand-strong,#006c2c); font-weight: 800; }
  #hkpl-sh .dd { position: relative; display: flex; align-items: center; }
  /* NAV-TITLE-NOT-A-LINK-V1: an <a> without href defaults to a text caret. It is still a control. */
  #hkpl-sh .dd .dd-lbl { cursor: pointer; }
  /* A11Y-0 (2026-08-05): the ▾ was a CSS pseudo-element on the parent LINK, so the only way to reach a
     dropdown was to hover it with a mouse. It is now a real <button> — 44px tall, focusable, aria-expanded. */
  #hkpl-sh .dd .dd-t { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 44px;
    margin-left: -8px; padding: 0 4px; background: transparent; border: 0; color: inherit; cursor: pointer; }
  #hkpl-sh .dd .dd-t svg { width: 13px; height: 13px; opacity: .65; display: block; transition: transform .15s; }
  #hkpl-sh .dd .dd-t:hover svg { opacity: 1; }
  #hkpl-sh .dd.open .dd-t svg { transform: rotate(180deg); opacity: 1; }
  /* NAV-GRID-V1 (2026-08-05): DESKTOP DECISION — the top nav bar stays (it is compact, familiar and every
     parent still links straight to its own page); what changes is the DROPDOWN, which becomes a small
     mega-panel built from the SAME icon tiles as the mobile drawer (3-up, icon over label). One visual
     language across both breakpoints, zero IA change, and each row of the old text list becomes a real
     >=44px target. Below 1180px the bar is already replaced by the drawer, which is now the grid itself. */
  #hkpl-sh .dd .panel { position: absolute; top: 100%; left: 0; width: 336px; background: #fff; border: 1px solid #f3f4f6; border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,0.10); padding: 10px; display: none; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 6px; z-index: 41; }
  /* A11Y-0: open on CLICK everywhere (.open), and additionally on hover ONLY on devices that really hover.
     Unqualified :hover on a touch screen is what made the panel un-openable by tap. */
  #hkpl-sh .dd.open .panel { display: grid; }
  #hkpl-sh .dd .panel a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 76px; padding: 10px 6px; border-radius: 10px; font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0; color: #374151; text-align: center; }
  #hkpl-sh .dd .panel a .ic { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; color: var(--brand-strong,#006c2c); }
  #hkpl-sh .dd .panel a .ic svg { width: 22px; height: 22px; display: block; }
  #hkpl-sh .dd .panel a .lb { line-height: 1.25; max-height: 2.5em; overflow: hidden; }
  #hkpl-sh .dd .panel a:hover { background: var(--brand-50,#ecfdf5); color: var(--brand-strong,#006c2c); }
  #hkpl-sh .rhs { display: flex; align-items: center; gap: 8px; }
  #hkpl-sh .lang { position: relative; }
  #hkpl-sh .lang > button { min-height: 44px; background: transparent; border: 0; padding: 6px 10px; font-size: 13px; font-weight: 700; color: #374151; cursor: pointer; display: flex; align-items: center; gap: 4px; }
  #hkpl-sh .lang .panel { position: absolute; top: 100%; right: 0; min-width: 180px; background: #fff; border: 1px solid #f3f4f6; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.08); padding: 4px 0; display: none; z-index: 41; }
  /* A11Y-0 / LANG-TOUCH-FIX (2026-08-05): the language panel was hover-only — PROVEN un-openable by tap on
     /register.html + /contact.html (aria-expanded stayed null, zero options shown). Click-driven now. */
  #hkpl-sh .lang.open .panel { display: block; }
  #hkpl-sh .lang .panel button { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 44px; padding: 8px 14px; background: transparent; border: 0; font-size: 13px; color: #374151; cursor: pointer; text-align: left; }
  #hkpl-sh .lang .panel button:hover { background: var(--brand-50,#ecfdf5); }
  /* FONT-ZOOM-V1 (2026-05-22): accessibility pill ported from kaka site.
     Tap = cycle Standard → Large → X-Large → XX-Large → wrap. */
  #hkpl-sh .fs-pill { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; background: #faf8f5; border: 1px solid #e5d9c4; border-radius: 14px; color: #7a4e1c; cursor: pointer; font-family: inherit; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
  /* HEADER-COMPACT-V2 (2026-07-31, operator "keep text-size + language, just smaller"): on phones the text-size
     pill stays but shrinks to icon-only (drop the size-name label) so it stops eating header width. */
  @media (max-width: 640px) { #hkpl-sh .fs-pill { padding: 5px 7px; } #hkpl-sh .fs-pill .hkpl-fs-label { display: none; } }
  #hkpl-sh .fs-pill:active { transform: scale(0.94); background: #fff8ec; }
  #hkpl-sh .fs-pill svg { width: 14px; height: 14px; }
  /* SIMPLE-MODE-V1 (2026-08-03): labelled 簡易⇄進階 toggle. Brand-tinted pill, min 40px hit area (the
     shared a11y-tap sheet already lifts .sh-switch/.fs-pill; this control is styled inline). It shows the
     CURRENT mode name bold + the mode it flips to, muted, so the reader always sees where they are and
     where the tap goes. Token-safe (brand vars), never touches light/dark tokens. */
  #hkpl-sh .sh-simple-toggle { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 12px;
    background: var(--brand-50,#ecfdf5); border: 1px solid color-mix(in srgb, var(--brand,#008034) 30%, transparent);
    border-radius: 999px; color: var(--brand-strong,#006c2c); cursor: pointer; font-family: inherit; font-size: 13px;
    font-weight: 800; letter-spacing: .02em; white-space: nowrap; }
  #hkpl-sh .sh-simple-toggle .sh-simple-ic { display: inline-flex; line-height: 0; }
  #hkpl-sh .sh-simple-toggle .sh-simple-ic svg { width: 15px; height: 15px; display: block; }
  #hkpl-sh .sh-simple-toggle .sh-simple-swap { opacity: .5; font-weight: 700; }
  #hkpl-sh .sh-simple-toggle .sh-simple-alt { opacity: .6; font-weight: 700; }
  #hkpl-sh .sh-simple-toggle:hover { background: var(--brand-100,#d1fae5); }
  #hkpl-sh .sh-simple-toggle:active { transform: scale(0.96); }
  @media (max-width: 640px) { #hkpl-sh .sh-simple-toggle { padding: 6px 10px; gap: 4px; font-size: 12px; }
    #hkpl-sh .sh-simple-toggle .sh-simple-alt { display: none; } }
  /* TEXT-SIZE-DROPDOWN-V1 (2026-08-02, committee cmsbtscew "make text-size a dropdown like language — cycling
     means many taps to undo a mis-tap"): the pill is now the trigger for a pick-list of the 4 sizes. */
  #hkpl-sh .fs-dd { position: relative; }
  #hkpl-sh .fs-dd .fs-caret { font-size: 9px; opacity: 0.7; }
  #hkpl-sh .fs-dd .panel { position: absolute; top: 100%; right: 0; min-width: 190px; background: #fff; border: 1px solid #f3f4f6; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.08); padding: 4px 0; display: none; z-index: 42; }
  #hkpl-sh .fs-dd:hover .panel, #hkpl-sh .fs-dd.open .panel { display: block; }
  #hkpl-sh .fs-dd .panel button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 14px; background: transparent; border: 0; font-size: 13px; font-weight: 600; color: #374151; cursor: pointer; text-align: left; text-transform: none; letter-spacing: 0; }
  #hkpl-sh .fs-dd .panel button:hover { background: var(--brand-50,#ecfdf5); }
  #hkpl-sh .fs-dd .panel button[aria-checked="true"] { color: var(--brand-strong,#006c2c); }
  #hkpl-sh .fs-dd .panel button[aria-checked="true"]::after { content: '✓'; margin-left: auto; font-weight: 800; }
  #hkpl-sh .fs-dd .panel .fs-demo { font-weight: 800; width: 26px; text-align: center; color: #7a4e1c; }
  /* DARK-MODE-TOGGLE-V1 (2026-08-02, committee cmsaeq378/cms9snyxs): per-user light/dark switch in the top
     banner, same pill vocabulary as the text-size control. Sun when in dark (tap → light), moon when in light. */
  #hkpl-sh .dm-pill { /* dark toggle VISIBLE 2026-09-05: dark theme complete + L6-verified fleet-wide (incl. authenticated pages) */ } /* DARK-DEFERRED-2026-08-04: toggle hidden until the dark theme is production-ready */
  #hkpl-sh .dm-pill { display: inline-flex; align-items: center; justify-content: center; padding: 5px 8px; background: #faf8f5; border: 1px solid #e5d9c4; border-radius: 14px; color: #7a4e1c; cursor: pointer; font-family: inherit; }
  #hkpl-sh .dm-pill:active { transform: scale(0.94); background: #fff8ec; }
  #hkpl-sh .dm-pill svg { width: 15px; height: 15px; display: block; }
  #hkpl-sh .dm-pill .dm-sun { display: none; }
  #hkpl-sh .dm-pill.is-dark .dm-sun { display: block; }
  #hkpl-sh .dm-pill.is-dark .dm-moon { display: none; }
  html[data-template="midnight"] #hkpl-sh .dm-pill, html[data-template="arena"] #hkpl-sh .dm-pill, html[data-theme="dark"] #hkpl-sh .dm-pill { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.22); color: #fbbf24; }
  #hkpl-sh .rules-cta { padding: 8px 16px; background: var(--brand,#008034); color: #fff; text-decoration: none; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; border-radius: 4px; }
  #hkpl-sh .rules-cta:hover { background: var(--brand-strong,#006c2c); }
  #hkpl-sh .signin-btn { padding: 8px 16px; border: 2px solid var(--brand,#008034); color: var(--brand,#008034); text-decoration: none; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; border-radius: 4px; }
  #hkpl-sh .signin-btn:hover { background: var(--brand,#008034); color: #fff; }
  /* AUTH-STATE-V1 (2026-07-06, committee UAT "the button still says Sign In after I've signed in"):
     when signed in, the sign-in button becomes a filled "Signed in as <name>" account link. Lower-case
     the name (not the label) so long names stay legible + truncated. */
  #hkpl-sh .signin-btn.authed { background: var(--brand,#008034); color: #fff; display: inline-flex; align-items: center; gap: 6px; max-width: 220px; }
  #hkpl-sh .signin-btn.authed:hover { background: var(--brand-strong,#006c2c); }
  #hkpl-sh .signin-btn.authed .sh-who { text-transform: none; letter-spacing: 0; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sh-signout { margin-left: 6px; padding: 7px 12px; border: 1px solid #d1d5db; background: #fff; color: #4b5563; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; border-radius: 4px; cursor: pointer; }
  .sh-signout:hover { border-color: var(--brand,#008034); color: var(--brand,#008034); }
  .sh-signout:disabled { opacity: .5; cursor: default; }
  #hkpl-mobile .actions .sh-signout { margin-left: 0; margin-top: 8px; width: 100%; }
  /* HEADER-NOTIF-BELL-V1 (2026-08-03): the real notification inbox (badge + panel + mark-all-read) lived
     ONLY on app.html, so on schedule/standings/team/results a signed-in user had no way to see "N new
     updates". This puts the SAME bell (same /api/v1/notifications endpoints) into the shared header so it
     rides on every page that includes it. DEDUPE: injected by hydrateAuth() only when the page has no
     pre-existing #notif-bell (app.html owns its own) AND the user is signed in. Token-safe surfaces. */
  #hkpl-sh .sh-notif { position: relative; margin-left: 4px; }
  #hkpl-sh .sh-notif .sh-notif-btn { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0; background: transparent; border: 1px solid #d1d5db; border-radius: 8px; color: #4b5563; cursor: pointer; }
  #hkpl-sh .sh-notif .sh-notif-btn:hover { border-color: var(--brand,#008034); color: var(--brand,#008034); }
  #hkpl-sh .sh-notif .sh-notif-btn svg { width: 22px; height: 22px; display: block; }
  #hkpl-sh .sh-notif .sh-notif-badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--c-ef4444,#ef4444); color: #fff; font-size: 10px; font-weight: 700; display: none; align-items: center; justify-content: center; line-height: 18px; box-sizing: border-box; }
  #hkpl-sh .sh-notif .sh-notif-panel { position: fixed; top: 64px; right: 12px; z-index: 42; width: 320px; max-width: 92vw; background: var(--surface,#fff); border: 1px solid var(--line,#e5e7eb); border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.16); overflow: hidden; }
  #hkpl-sh .sh-notif .sh-notif-panel[hidden] { display: none; }
  #hkpl-sh .sh-notif .sh-notif-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--c-f1f1f3,#f1f1f3); }
  #hkpl-sh .sh-notif .sh-notif-head b { font-weight: 700; font-size: 14px; color: var(--c-1f1f23,#1f1f23); }
  #hkpl-sh .sh-notif .sh-notif-head button { font-size: 12px; font-weight: 700; color: var(--c-0a7d3c,#0a7d3c); background: none; border: none; cursor: pointer; padding: 4px; }
  #hkpl-sh .sh-notif .sh-notif-list { max-height: 380px; overflow-y: auto; }
  #hkpl-sh .sh-notif .sh-notif-list a { display: block; padding: 10px 14px; border-bottom: 1px solid var(--c-f1f1f3,#f6f6f7); text-decoration: none; color: inherit; }
  #hkpl-sh .sh-notif .sh-notif-list .sh-notif-t { font-size: 13px; font-weight: 700; color: var(--c-1f1f23,#1f1f23); }
  #hkpl-sh .sh-notif .sh-notif-list .sh-notif-b { font-size: 12px; color: var(--muted,#6b7280); margin-top: 2px; }
  #hkpl-sh .sh-notif .sh-notif-empty { padding: 30px 16px; text-align: center; font-size: 13px; color: var(--muted-2,#6b7280); }
  #hkpl-sh .sh-notif .sh-notif-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--c-10b981,#10b981); margin-right: 6px; }
  #hkpl-mobile .actions .signin-btn.authed { background: var(--brand,#008034); color: #fff; border-color: var(--brand,#008034); }
  /* LINKED-ROLES-V1 (2026-07-06): "Switch view" control for people the admin granted extra roles. One
     login, several roles — this dropdown lists each and POSTs switch-account, then navigates to dest.
     Hidden by default (rendered empty); only shown when /auth/my-accounts returns >1 account. */
  #hkpl-sh .sh-switch { position: relative; }
  #hkpl-sh .sh-switch > button { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; background: #faf8f5; border: 1px solid #e5d9c4; border-radius: 14px; color: #7a4e1c; cursor: pointer; font-family: inherit; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
  #hkpl-sh .sh-switch > button:hover { background: #fff8ec; }
  #hkpl-sh .sh-switch > button svg { width: 13px; height: 13px; }
  #hkpl-sh .sh-switch .panel { position: absolute; top: 100%; right: 0; min-width: 200px; background: #fff; border: 1px solid #f3f4f6; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.10); padding: 5px 0; display: none; z-index: 41; margin-top: 4px; }
  #hkpl-sh .sh-switch:hover .panel, #hkpl-sh .sh-switch.open .panel { display: block; }
  #hkpl-sh .sh-switch .panel .sh-head { padding: 6px 14px 4px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted,#6b7280); }
  #hkpl-sh .sh-switch .panel button.sh-acct { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 8px 14px; background: transparent; border: 0; font-size: 13px; font-weight: 600; color: #374151; cursor: pointer; text-align: left; }
  #hkpl-sh .sh-switch .panel button.sh-acct:hover { background: var(--brand-50,#ecfdf5); color: var(--brand-strong,#006c2c); }
  #hkpl-sh .sh-switch .panel button.sh-acct[disabled] { cursor: default; color: var(--brand-strong,#006c2c); background: #f3faf5; }
  #hkpl-sh .sh-switch .panel button.sh-acct .sh-cur { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--brand,#008034); }
  #hkpl-sh .hamburger { display: none; background: transparent; border: 0; padding: 6px; cursor: pointer; color: #374151; }
  /* A11Y-4 (2026-08-05): explicit focus-visible ring inside the header — the 0-specificity global ring was
     overridden by header rules on the most-used controls (nav links, pills, hamburger). */
  #hkpl-sh a:focus-visible, #hkpl-sh button:focus-visible, #hkpl-sh [role="button"]:focus-visible, #hkpl-sh .fs-pill:focus-visible, #hkpl-sh .hamburger:focus-visible { outline: 2px solid var(--focus,#008034); outline-offset: 2px; border-radius: 6px; }
  #hkpl-sh .hamburger svg { display: block; width: 24px; height: 24px; }
  /* CHROME-NO-TEXT-SELECT-V1 (2026-08-07, report oqebsp "why there is a cursor in the league button"):
     every control here was user-select:auto, so the LABEL inside a button was selectable text — a
     click-drag put a caret and a highlight inside the button. Navigation chrome should not behave like
     a paragraph. Page CONTENT is untouched: people still need to copy names, scores and ids. */
  #hkpl-sh a, #hkpl-sh button, #hkpl-sh [role="button"], #hkpl-sh .fs-pill,
  a.sh-mode, .sh-modes a, .sh-modes button, .sh-tile, .sh-sec-h {
    -webkit-user-select: none; user-select: none;
  }
  /* HAMBURGER-LABEL-V1 (2026-08-07, report 4xnfwp "the toolbar disappears when you minimize"): below the
     1180 breakpoint the named links collapse into this icon, and the mobile tab bar does not appear
     until 640 — so between them a bare menu was the only sign the menu had moved. Name it. Phones (<=640)
     keep the icon alone; they have the bottom bar. */
  #hkpl-sh .hamburger { gap: 7px; align-items: center; font: inherit; font-size: 14px; font-weight: 700; }
  #hkpl-sh .hamburger .hb-lbl { display: none; }
  @media (min-width: 641px) { #hkpl-sh .hamburger .hb-lbl { display: inline; } }
  #hkpl-mobile { display: none; position: fixed; top: 64px; left: 0; right: 0; bottom: 0; background: #fff; z-index: 39; overflow-y: auto; border-top: 1px solid #f3f4f6;
    /* NAV-GRID-V1 (2026-08-05): the fixed cookie bar + mobile tab bar overlay the bottom of this scroll
       container; without this pad the LAST tiles (Help / Rules) sat under them and could not be tapped. */
    padding-bottom: calc(150px + env(safe-area-inset-bottom, 0px)); }
  #hkpl-mobile.open { display: block; }
  /* NAV-GRID-V1 (2026-08-05, operator "modern apps like taobao … a grid by section, an svg then text, group by
     group"): supersedes MOBILE-MENU-POLISH-V1's vertical pill list. Section heading + 4-up icon tiles.
     ⚠ font-zoom.js's a11y sheet forces "#hkpl-mobile nav a { display:flex !important; align-items:center
     !important; min-height:48px !important }" — the tile is therefore a flex COLUMN (icon over label), which
     rides that !important instead of fighting it, and inherits the 48px floor for free. */
  #hkpl-mobile nav { display: block; padding: 8px 12px 18px; max-width: 760px; margin: 0 auto; }
  #hkpl-mobile .sh-sec { padding: 4px 0 12px; border-bottom: 1px solid #f1f5f4; }
  #hkpl-mobile .sh-sec:last-child { border-bottom: 0; }
  #hkpl-mobile .sh-sec-h { display: flex; align-items: center; gap: 4px; min-height: 44px; padding: 6px 4px;
    font-size: 14px; font-weight: 800; letter-spacing: .02em; color: #0a0e0c; text-decoration: none; }
  #hkpl-mobile a.sh-sec-h:hover, #hkpl-mobile a.sh-sec-h:active { color: var(--brand-strong,#006c2c); }
  #hkpl-mobile .sh-sec-h .sh-chev { width: 15px; height: 15px; opacity: .4; flex: 0 0 auto; }
  #hkpl-mobile .sh-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  @media (min-width: 560px) { #hkpl-mobile .sh-grid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); } }
  #hkpl-mobile nav a.sh-tile { flex-direction: column; justify-content: center; gap: 7px; min-height: 78px;
    padding: 11px 5px; border-radius: 12px; background: #f8faf9; border: 1px solid #eef2f0; color: #0a0e0c;
    text-align: center; text-decoration: none; transition: background .12s, border-color .12s, color .12s; }
  #hkpl-mobile nav a.sh-tile .ic { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex: 0 0 auto; color: var(--brand-strong,#006c2c); }
  #hkpl-mobile nav a.sh-tile .ic svg { width: 24px; height: 24px; display: block; }
  #hkpl-mobile nav a.sh-tile .lb { font-size: 12px; line-height: 1.25; font-weight: 600; max-height: 2.5em; overflow: hidden; word-break: break-word; }
  #hkpl-mobile nav a.sh-tile:hover, #hkpl-mobile nav a.sh-tile:active { background: var(--brand-50,#ecfdf5); border-color: var(--brand,#008034); color: var(--brand-strong,#006c2c); }
  #hkpl-mobile nav a.sh-tile.active { background: var(--brand-50,#ecfdf5); border-color: var(--brand,#008034); color: var(--brand-strong,#006c2c); font-weight: 800; }
  #hkpl-mobile nav a.sh-tile.active .ic { color: var(--brand,#008034); }
  /* Register is the key CTA — it keeps its brand accent inside the grid (was a green row in the old list). */
  #hkpl-mobile nav a.sh-tile[href="/register.html"] { background: var(--brand-50,#ecfdf5); border-color: var(--brand,#008034); color: var(--brand-strong,#006c2c); font-weight: 800; }
  /* PORTAL-ENTRANCE: the signed-in user's own portal link is injected into this slot — a full-width brand row
     above the grid, so the entrance is the first thing in the drawer (was a text row inside the list). */
  #hkpl-mobile .sh-portal-slot:empty { display: none; }
  #hkpl-mobile nav a.sh-portal { display: flex; align-items: center; gap: 9px; min-height: 52px; padding: 12px 14px;
    margin: 2px 0 12px; border-radius: 12px; background: var(--brand,#008034); color: #fff; font-size: 14.5px;
    font-weight: 800; text-decoration: none; }
  #hkpl-mobile nav a.sh-portal svg { width: 20px; height: 20px; flex: 0 0 auto; }
  #hkpl-mobile .actions { padding: 14px; margin-top: 6px; border-top: 1px solid #f1f5f4; display: flex; flex-direction: column; gap: 10px; }
  #hkpl-mobile .actions a { padding: 14px 16px; text-align: center; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; border-radius: 10px; text-decoration: none; }
  #hkpl-mobile .actions .rules-cta { background: var(--brand,#008034); color: #fff; }
  #hkpl-mobile .actions .signin-btn { border: 2px solid var(--brand,#008034); color: var(--brand,#008034); }
  /* LINKED-ROLES-V1 (2026-07-06): mobile "Switch view" — a labelled list of the person's roles. */
  #hkpl-mobile .sh-switch-m { border: 1px solid #e5d9c4; background: #faf8f5; border-radius: 8px; overflow: hidden; margin-bottom: 4px; }
  #hkpl-mobile .sh-switch-m .sh-head { padding: 8px 14px 6px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: #7a4e1c; }
  #hkpl-mobile .sh-switch-m button.sh-acct { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 11px 14px; background: #fff; border: 0; border-top: 1px solid #f0ece3; font-size: 14px; font-weight: 600; color: #374151; text-align: left; text-transform: none; letter-spacing: 0; cursor: pointer; }
  #hkpl-mobile .sh-switch-m button.sh-acct[disabled] { color: var(--brand-strong,#006c2c); background: #f3faf5; cursor: default; }
  #hkpl-mobile .sh-switch-m button.sh-acct .sh-cur { font-size: 10px; font-weight: 800; text-transform: uppercase; color: var(--brand,#008034); }
  /* NAV-OVERFLOW-FIX-V1 (2026-07-10, auto-QA #zuoo1n/#e6alr5): raised 1023→1180 so the full desktop nav
     (Standings · Help · Rules & Regulation · About + text-size + lang + Sign-in) only shows when there's
     genuinely room. Below 1180 it collapses to the clean hamburger menu instead of the nowrap items
     overlapping / clipping ("REGULATION" cut off, HELP over Standings) at medium-desktop widths. */
  /* NAV-NO-HAMBURGER-ON-DESKTOP-V1 (2026-08-06, committee u6k48a — the menu circled in red at 1920px).
     The drawer and the desktop bar carry the same destinations at that width: 24 vs 23, the single
     difference being /app.html, which is on the header already as the .sh-portal pill. A menu button
     next to a full menu is noise, so it goes wherever the desktop nav is shown. Below 1181px the
     desktop nav is hidden and the menu is the only route — it stays there, untouched. */
  @media (min-width: 1440px) {
    /* NOTE the leading html: js/font-zoom.js injects, LATER, a 48px tap-target rule that includes
       "#hkpl-sh .hamburger { display: inline-flex !important }". Equal specificity + equal importance
       means the later sheet wins, so a plain "#hkpl-sh .hamburger" here loses and the menu stays on
       screen. One extra element in the selector settles it without another !important war. The same
       font-zoom rule is what made committee slvqm2's module switch appear to do nothing. */
    html #hkpl-sh .hamburger { display: none !important; }
  }
  @media (max-width: 1439px) {
    /* MOBILE-HEADER-RHS-FIX-V1 (2026-07-14, dry-run Round 3): the authed action row (Signed in as <name> · Sign
       out) overflowed the header on phones. It's already in the hamburger menu, so hide it here once the
       hamburger shows. The anonymous "Sign In" button (not .authed) stays. */
    #hkpl-sh .rhs .signin-btn.authed, #hkpl-sh .rhs .sh-signout, #hkpl-sh .rhs .sh-switch { display: none; }
    #hkpl-sh nav.desktop { display: none; }
    #hkpl-sh .rules-cta { display: none; }
    #hkpl-sh .hamburger { display: block; }
    /* HEADER-NOTIF-BELL-V1 (2026-08-03): the authed account chip + portal link + sign-out are ALL
       duplicated inside the hamburger drawer on mobile (injectPortalLink adds .sh-portal to #hkpl-mobile
       nav; the account chip + sign-out live in .actions). The pre-existing MOBILE-HEADER-RHS-FIX rule
       above tried to hide the authed chip but a later base rule leaked display back in, so the phone
       header already overflowed (~585px in a 390px viewport) BEFORE this change. Adding the notif bell
       (the mobile notification surface — it must ride every page) needs the ~212px of already-hidden-by-
       intent chip+portal to actually collapse. This higher-specificity rule wins reliably so the RHS on
       phones is: bell · hamburger · text-size · dark-mode · language (the by-design HEADER-COMPACT-V2 set)
       with NO horizontal overflow. Signed-out "Sign In" (not .authed) is untouched. */
    #hkpl-sh .rhs > .signin-btn.authed,
    #hkpl-sh .rhs > .sh-signout,
    #hkpl-sh .rhs > .sh-portal { display: none !important; }
    /* HEADER-NOTIF-BELL-V1 (2026-08-03): with the account chip + portal collapsed to the hamburger, the
       phone RHS is 5 icon controls (bell · hamburger · text-size · dark-mode · language). At exactly 390px
       the default 8px inter-item gap tipped this 21px past the edge once the 48px bell joined. Tighten the
       gap on phones (icons stay ≥48px tap targets) and drop the bell's own left margin so the row fits with
       margin to spare — no horizontal overflow. Desktop spacing (gap:8px) is unchanged. */
    #hkpl-sh .rhs { gap: 3px; } @media(max-width:1280px){#hkpl-sh .fs-dd,#hkpl-sh .dm-pill{display:none!important}}
    #hkpl-sh .rhs .sh-notif { margin-left: 0; }
  }
  /* MOBILE-RHS-OVERFLOW-FIX-V3 (2026-08-03): the SIMPLE-MODE-V1 labelled 簡易⇄進階 toggle (~77px) and the
     signed-OUT "Sign In" button were added to the RHS after the 1180px collapse rule above was written, so
     on phones the RHS spilled ~77px past the viewport (measured scrollWidth=467 in a 390px viewport) on
     EVERY page. The header comment above claimed "5 icon controls" but reality was 6+ full-width ones.
     Fix, ≤640px (phones): (1) keep the mode toggle COMPACT — a distinct layout icon + the CURRENT mode
     name (簡易/進階), never the menu glyph (it collided with the menu); still switchable here AND from the in-page landing
     toggle + hamburger; (2) fold the signed-OUT "Sign In" into the hamburger drawer (it already renders
     there, .actions > .signin-btn) so the RHS row is: mode · hamburger · text-size · dark · language and
     fits with margin to spare. Token-safe, additive; desktop (>640px) unchanged. */
  /* HEADER-FITS-390-V1 (2026-08-06, THE_LIST W5): the row fitted 390px with nothing to spare —
     16px padding + 86px logo + 288px of controls. Every page except home ALSO carries the ‹ back
     button (33px), so the row ran to 423px and the document with it, which is why the tab bar, the
     cookie banner and the bug FAB all measured 423 in a 390 viewport. Rather than hide a fourth
     control (three previous fixes did exactly that, and each held only until the next control was
     added), buy the pixels back AND give the row somewhere to give. */
  /* HEADER-FITS-1280-V1 (2026-08-06, THE_LIST W5 desktop half): logo + 439px nav + 725px of controls
     overran 1280 by 88px on every page carrying the back button. Between 641px and 1400px the two
     labelled controls keep their icon and drop their word. Both stay reachable: the mode toggle is
     also in the drawer and on the landing page; the text-size dropdown still opens and still ticks
     the active size. */
  /* HEADER-FITS-EVERY-DESKTOP-V1 (2026-08-07): the rules below used to stop at max-width:1400px, which
     duplicated — and contradicted — the fact that .inner is capped at max-width:1280px. Above roughly
     1312px the row has no more room than it had at 1400px, so switching the compact controls OFF at
     1401px simply overflowed. Measured signed-in on /schedule.html: at 1400 the .inner scrollWidth is
     1280 == clientWidth (fits); at 1401 it is 1402 vs 1280, and the document scrollWidth ran 1463 in a
     1401 viewport, 1482 in 1440 and 1402-wide content in 1920 — a sideways scrollbar on every page at
     every desktop size. Dropping the upper bound is the fix: >1400 now renders exactly as 1400 did. */
  @media (min-width: 641px) {
    #hkpl-sh .rhs > .sh-simple-toggle .sh-simple-lbl,
    #hkpl-sh .rhs > .sh-simple-toggle .sh-simple-alt,
    #hkpl-sh .rhs > .sh-simple-toggle .sh-simple-swap { display: none; }
    #hkpl-sh .rhs > .sh-simple-toggle { min-width: 44px; justify-content: center; padding: 6px 10px; }
    #hkpl-sh .fs-dd .hkpl-fs-label, #hkpl-sh .fs-dd .fs-caret { display: none; }
    #hkpl-sh .fs-dd .fs-pill { min-width: 44px; justify-content: center; }
    #hkpl-sh .rhs .signin-btn.authed .sh-who { max-width: 130px; }
    #hkpl-sh nav.desktop { min-width: 0; }
  }
  /* HEADER-FITS-360-V1 (2026-08-06): below 420px the mode toggle keeps its icon and drops its word
     (83px -> 48px). It is the widest control in the row and the only one reachable two other ways —
     the in-page landing toggle and the hamburger drawer — so nothing becomes unreachable. Tap target
     unchanged at 44px+. */
  @media (max-width: 420px) {
    #hkpl-sh .rhs > .sh-simple-toggle { padding: 6px 0; min-width: 48px; justify-content: center; }
    #hkpl-sh .rhs > .sh-simple-toggle .sh-simple-ic { display: inline-flex !important; }
    #hkpl-sh .rhs > .sh-simple-toggle .sh-simple-lbl { display: none; }
  }
  @media (max-width: 640px) {
    #hkpl-sh .inner { padding: 0 6px; min-width: 0; }
    #hkpl-sh .logo { flex-shrink: 1; min-width: 44px; overflow: hidden; }
    #hkpl-sh .rhs { min-width: 0; flex-shrink: 1; }
    #hkpl-sh .logo img { height: 30px; max-width: 100%; }
  }
  @media (max-width: 640px) {
    #hkpl-sh .rhs > .sh-simple-toggle { padding: 7px 11px; gap: 0; }
    #hkpl-sh .rhs > .sh-simple-toggle .sh-simple-ic,
    #hkpl-sh .rhs > .sh-simple-toggle .sh-simple-swap,
    #hkpl-sh .rhs > .sh-simple-toggle .sh-simple-alt { display: none; }
    #hkpl-sh .rhs > .signin-btn { display: none !important; }
  }
  /* SITE-FOOTER-V1 (2026-07-04, committee #130 "top nav and footer are not consistent"): one canonical
     footer built from the SAME NAV as the header, so the two can never drift apart again. */
  #hkpl-sf { background:#0a0e0c; color:#cbd5d1; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang HK','Microsoft YaHei',Roboto,sans-serif; margin-top:48px; }
  #hkpl-sf .fwrap { max-width:1280px; margin:0 auto; padding:40px 16px 26px; display:grid; grid-template-columns:1.5fr 1fr 1fr 1.4fr 1fr; gap:28px; }
  #hkpl-sf ul.two { column-count:2; column-gap:22px; }
  #hkpl-sf ul.two li { break-inside:avoid; }
  #hkpl-sf .brand { font-weight:800; font-size:18px; color:#fff; letter-spacing:.01em; }
  #hkpl-sf .sh-tagline { font-size:12.5px; line-height:1.6; color:#9aa5a1; margin-top:10px; max-width:34ch; background:none; border-radius:0; padding:0; text-transform:none; letter-spacing:normal; font-weight:400; display:block; }
  #hkpl-sf h4 { font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.12em; color:#7e8b86; margin:0 0 12px; }
  #hkpl-sf ul { list-style:none; margin:0; padding:0; }
  #hkpl-sf li { margin:0 0 8px; }
  #hkpl-sf a { color:#cbd5d1; text-decoration:none; font-size:13px; }
  #hkpl-sf a:hover { color:#5bd08a; }
  #hkpl-sf .fbot { border-top:1px solid #1c2320; }
  #hkpl-sf .fbot .in { max-width:1280px; margin:0 auto; padding:16px; font-size:12px; color:#7e8b86; display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; }
  @media (max-width:900px){ #hkpl-sf .fwrap { grid-template-columns:1fr 1fr 1fr; gap:22px; } }
  /* SITE-FOOTER-MOBILE-V3 (2026-07-13, Vincent "mobile footer wastes vertical space — more columns, use horizontal
     space"): on phones keep the 4 link groups in 2 columns (never a single tall stack), brand spans full width,
     the 2-subcol list collapses to 1 (too cramped in a narrow col), and padding/margins tighten. */
  @media (max-width:560px){
    #hkpl-sf { margin-top:32px; }
    /* CSS multi-column packs the category blocks to balance height (no grid row-alignment whitespace). */
    #hkpl-sf .fwrap { display:block; column-count:2; column-gap:24px; padding:26px 18px 18px; }
    #hkpl-sf .fwrap > .fbrand { column-span:all; margin-bottom:20px; }
    #hkpl-sf .fwrap > div { break-inside:avoid; -webkit-column-break-inside:avoid; margin:0 0 18px; }
    #hkpl-sf ul.two { column-count:1; }
    #hkpl-sf .sh-tagline { max-width:none; margin-top:6px; }
    #hkpl-sf h4 { margin-bottom:8px; }
    #hkpl-sf li { margin-bottom:6px; }
  }

  /* DARK-THEME-V1 (2026-08-03): the header/nav above hard-codes light surfaces. Re-skin them for the DARK
   * templates ONLY (every light rule above is untouched → light stays byte-identical). Brand-filled links
   * (Register / portal / rules-cta / active mode pill) keep their green. The footer is already dark. */
  html:is([data-template="midnight"],[data-template="arena"],[data-theme="dark"]) #hkpl-sh { background: color-mix(in srgb, var(--surface) 92%, transparent); border-bottom-color: var(--line); }
  html:is([data-template="midnight"],[data-template="arena"],[data-theme="dark"]) #hkpl-sh .sh-modes { background: var(--surface-2); border-top-color: var(--line); }
  html:is([data-template="midnight"],[data-template="arena"],[data-theme="dark"]) #hkpl-sh a.sh-mode { background: var(--card); }
  html:is([data-template="midnight"],[data-template="arena"],[data-theme="dark"]) #hkpl-sh nav.desktop a,
  html:is([data-template="midnight"],[data-template="arena"],[data-theme="dark"]) #hkpl-sh .lang > button,
  html:is([data-template="midnight"],[data-template="arena"],[data-theme="dark"]) #hkpl-sh .hamburger { color: var(--ink); }
  html:is([data-template="midnight"],[data-template="arena"],[data-theme="dark"]) #hkpl-sh .dd .panel,
  html:is([data-template="midnight"],[data-template="arena"],[data-theme="dark"]) #hkpl-sh .lang .panel,
  html:is([data-template="midnight"],[data-template="arena"],[data-theme="dark"]) #hkpl-sh .fs-dd .panel,
  html:is([data-template="midnight"],[data-template="arena"],[data-theme="dark"]) #hkpl-sh .sh-switch .panel { background: var(--card); border-color: var(--line); }
  html:is([data-template="midnight"],[data-template="arena"],[data-theme="dark"]) #hkpl-sh .dd .panel a,
  html:is([data-template="midnight"],[data-template="arena"],[data-theme="dark"]) #hkpl-sh .lang .panel button,
  html:is([data-template="midnight"],[data-template="arena"],[data-theme="dark"]) #hkpl-sh .fs-dd .panel button,
  html:is([data-template="midnight"],[data-template="arena"],[data-theme="dark"]) #hkpl-sh .sh-switch .panel button.sh-acct { color: var(--ink); }
  html:is([data-template="midnight"],[data-template="arena"],[data-theme="dark"]) #hkpl-sh .fs-pill { background: var(--surface-2); border-color: var(--line); color: var(--muted); }
  html:is([data-template="midnight"],[data-template="arena"],[data-theme="dark"]) #hkpl-sh .fs-dd .panel .fs-demo { color: var(--muted); }
  html:is([data-template="midnight"],[data-template="arena"],[data-theme="dark"]) #hkpl-mobile { background: var(--surface); border-top-color: var(--line); }
  html:is([data-template="midnight"],[data-template="arena"],[data-theme="dark"]) #hkpl-mobile nav a { color: var(--ink); }
  html:is([data-template="midnight"],[data-template="arena"],[data-theme="dark"]) #hkpl-mobile nav a.sub,
  html:is([data-template="midnight"],[data-template="arena"],[data-theme="dark"]) #hkpl-mobile nav .group { color: var(--muted); }
  /* NAV-GRID-V1: dark skin for the grid surfaces. */
  html:is([data-template="midnight"],[data-template="arena"],[data-theme="dark"]) #hkpl-mobile .sh-sec { border-bottom-color: var(--line); }
  html:is([data-template="midnight"],[data-template="arena"],[data-theme="dark"]) #hkpl-mobile .sh-sec-h { color: var(--ink); }
  html:is([data-template="midnight"],[data-template="arena"],[data-theme="dark"]) #hkpl-mobile nav a.sh-tile { background: var(--surface-2); border-color: var(--line); color: var(--ink); }
  html:is([data-template="midnight"],[data-template="arena"],[data-theme="dark"]) #hkpl-sh .dd .panel a .ic,
  html:is([data-template="midnight"],[data-template="arena"],[data-theme="dark"]) #hkpl-mobile nav a.sh-tile .ic { color: var(--brand,#008034); }
  html:is([data-template="midnight"],[data-template="arena"],[data-theme="dark"]) #hkpl-mobile .actions { border-top-color: var(--line); }
  html:is([data-template="midnight"],[data-template="arena"],[data-theme="dark"]) #hkpl-mobile .sh-switch-m { background: var(--surface-2); border-color: var(--line); }
  html:is([data-template="midnight"],[data-template="arena"],[data-theme="dark"]) #hkpl-mobile .sh-switch-m .sh-head { color: var(--muted); }
  html:is([data-template="midnight"],[data-template="arena"],[data-theme="dark"]) #hkpl-mobile .sh-switch-m button.sh-acct { background: var(--card); color: var(--ink); border-top-color: var(--line); }
  

/* ---- next style block ---- */

#league-nav .lnav{display:flex;gap:6px;flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;margin:0 auto 10px;max-width:760px;scrollbar-width:none;-webkit-overflow-scrolling:touch}@media(min-width:640px){#league-nav .lnav{justify-content:center;flex-wrap:wrap;overflow:visible}}#league-nav .lnav::-webkit-scrollbar{display:none}#league-nav a{flex:0 0 auto;padding:6px 13px;font-size:13px;font-weight:700;border-radius:999px;border:1px solid var(--line,#e5e7eb);background:var(--surface,#fff);color:var(--muted,#6b7280);text-decoration:none;white-space:nowrap;transition:all .12s}#league-nav a:hover{border-color:var(--brand);color:var(--brand)}#league-nav a.on{background:var(--brand);color:#fff;border-color:var(--brand)}

/* ---- next style block ---- */

#season-picker{max-width:760px;margin:0 auto 8px}#season-picker .sp-wrap{display:flex;gap:6px;flex-wrap:wrap;align-items:center;justify-content:center}#season-picker .sp-lbl{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted,#6b7280);margin-right:2px}#season-picker .sp-pill{flex:0 0 auto;padding:6px 14px;font-size:13px;font-weight:700;border-radius:999px;border:1px solid var(--line,#e5e7eb);background:var(--surface,#fff);color:var(--muted,#6b7280);cursor:pointer;transition:all .12s}#season-picker .sp-pill:hover{border-color:var(--brand);color:var(--brand)}#season-picker .sp-pill.on{background:var(--brand);color:#fff;border-color:var(--brand)}

/* ---- next style block ---- */


    /* BUG-WIDGET-MOBILE-NAV-V1: on mobile, the fixed bottom nav covered the rightmost bug-report button.
       Lift the widget above the nav band on small screens. */
    /* FEEDBACK-PILL-V1 (2026-05-27): non-techie testers missed the icon-only circle.
       New default = pill with text "Send feedback" always visible. */
    /* FAB-STACK-V1 (2026-07-11): the public chat FAB lives at bottom:18/right:18 (56px circle). The bug
       pill used to sit at bottom:20 on the SAME corner and covered it, so the chat button was unclickable.
       Stack the bug pill above the chat FAB (56 + 12 gap = ~86px) so both are always reachable. */
    .hkpl-bug-fab {
      position: fixed; bottom: 86px; right: 20px; z-index: 9998;
      background: var(--brand, #00913a); color: white; border: none;
      min-width: 52px; height: 52px; border-radius: 28px;
      padding: 0 18px 0 14px;
      box-shadow: 0 8px 24px rgba(0,145,58,0.35);
      display: flex; align-items: center; justify-content: center; gap: 8px;
      cursor: pointer; transition: transform .15s, box-shadow .15s;
      touch-action: none;   /* DRAGGABLE-FAB-V1: a touch-drag moves the button instead of scrolling the page */
      font: 700 14px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang HK", "Microsoft YaHei", sans-serif;
    }
    .hkpl-bug-fab.hkpl-dragging { transition: none; cursor: grabbing; box-shadow: 0 12px 30px rgba(0,145,58,0.5); transform: scale(1.06); }
    /* FAB-ICON-ONLY-MOBILE-V1 (2026-07-15 visual UAT): the wide "Send feedback" pill covered right-aligned
       data on mobile (standings row #1 PTS, team recent-match opponents). Collapse to a 46px icon-only
       circle in the corner so it stops overlapping content; label stays on desktop. */
    @media (max-width: 768px) {
      .hkpl-bug-fab { bottom: 84px; right: 14px; width: 46px; min-width: 46px; height: 46px; padding: 0; justify-content: center; }
      .hkpl-bug-fab .hkpl-bug-label-inline { display: none; }
      .hkpl-bug-fab svg { width: 20px; height: 20px; }
    }
    .hkpl-bug-fab:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(0,145,58,0.5); }
    .hkpl-bug-fab svg { width: 22px; height: 22px; flex-shrink: 0; }
    .hkpl-bug-fab .hkpl-bug-label-inline { white-space: nowrap; }
    /* Hidden — replaced by the inline label above. Kept so legacy refs don't break. */
    .hkpl-bug-label { display: none; }
    /* DRAGGABLE-PANEL-V1 (2026-06-03): testers said the report panel covered the very screen they were
       trying to describe. Drop the dark/blur full-screen backdrop and make it click-THROUGH so the page
       behind stays readable + usable; the panel itself is a draggable floating card (drag by its header). */
    .hkpl-bug-backdrop {
      position: fixed; inset: 0; background: transparent; z-index: 9999;
      display: none; align-items: flex-start; justify-content: center; padding: 16px;
      pointer-events: none;
    }
    .hkpl-bug-backdrop.open { display: flex; }
    .hkpl-bug-modal {
      background: white; border-radius: 16px; max-width: 540px; width: 100%;
      max-height: 92vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.45), 0 0 0 1px rgba(0,0,0,0.08);
      font-family: 'Albert Sans', -apple-system, BlinkMacSystemFont, sans-serif;
      pointer-events: auto; margin-top: 4vh;
    }
    .hkpl-bug-modal .hd { cursor: move; user-select: none; -webkit-user-select: none; }
    .hkpl-bug-modal .hd::before { content: '⠿ drag to move — the screen behind stays visible'; display:block; font-size:10px; color:#9ca3af; font-weight:600; margin-bottom:6px; letter-spacing:.02em; }
    .hkpl-bug-modal h3 { font-family: Georgia, serif; font-size: 22px; font-weight: 700; margin: 0 0 4px; color: #0a0e0c; }
    .hkpl-bug-modal .sub { color: #6b7280; font-size: 13px; margin-bottom: 18px; }
    .hkpl-bug-modal .hd { padding: 22px 24px 8px; }
    .hkpl-bug-modal .bd { padding: 8px 24px 16px; }
    .hkpl-bug-modal .ft { padding: 12px 24px 22px; display: flex; gap: 10px; align-items: center; }
    .hkpl-bug-modal label { display: block; font-size: 11px; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: .05em; margin: 12px 0 4px; }
    .hkpl-bug-modal textarea, .hkpl-bug-modal input[type="text"] {
      width: 100%; border: 1px solid #d1d5db; border-radius: 8px; padding: 10px 12px;
      font-size: 14px; font-family: inherit; box-sizing: border-box; resize: vertical;
    }
    .hkpl-bug-modal textarea:focus, .hkpl-bug-modal input:focus { outline: none; border-color: var(--brand); }
    .hkpl-bug-modal .btn-primary {
      background: var(--brand); color: white; border: none; padding: 10px 20px;
      border-radius: 8px; font-weight: 700; font-size: 14px; cursor: pointer;
    }
    .hkpl-bug-modal .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
    .hkpl-bug-modal .btn-secondary {
      background: white; color: #4b5563; border: 1px solid #d1d5db; padding: 10px 16px;
      border-radius: 8px; font-weight: 600; font-size: 14px; cursor: pointer;
    }
    .hkpl-bug-modal .btn-add {
      background: #f3f4f6; border: 1px dashed #9ca3af; color: #4b5563; padding: 6px 12px;
      border-radius: 6px; font-size: 12px; cursor: pointer; font-weight: 600;
    }
    .hkpl-bug-modal .ctx-pill {
      display: inline-block; font-family: 'JetBrains Mono', monospace;
      font-size: 10px; background: #f3f4f6; color: #6b7280;
      padding: 3px 8px; border-radius: 4px; margin: 0 4px 4px 0;
    }
    .hkpl-bug-modal .img-thumb {
      position: relative; display: inline-block; margin: 4px 6px 4px 0;
    }
    .hkpl-bug-modal .img-thumb img { width: 72px; height: 72px; object-fit: cover; border-radius: 6px; border: 1px solid #d1d5db; }
    .hkpl-bug-modal .img-thumb .rm {
      position: absolute; top: -6px; right: -6px;
      width: 20px; height: 20px; background: #ef4444; color: white;
      border-radius: 50%; font-size: 12px; line-height: 18px; text-align: center;
      cursor: pointer; border: 2px solid white;
    }
    .hkpl-bug-modal .rec-btn { background: #ef4444; color: white; border: none; padding: 8px 14px; border-radius: 6px; font-size: 12px; cursor: pointer; font-weight: 600; }
    .hkpl-bug-modal .rec-btn.recording { background: #b91c1c; animation: hkpl-pulse 1s infinite; }
    @keyframes hkpl-pulse { 50% { opacity: 0.6; } }
    .hkpl-bug-modal .toast { padding: 10px 14px; border-radius: 6px; font-size: 13px; }
    .hkpl-bug-modal .toast.ok { background: #d1fae5; color: #065f46; }
    .hkpl-bug-modal .toast.err { background: #fee2e2; color: #991b1b; }
    .hkpl-bug-modal .close { float: right; font-size: 22px; color: #9ca3af; background: none; border: none; cursor: pointer; line-height: 1; }
  

/* ---- next style block ---- */

body.hkpl-set-open .hkpl-bug-fab{display:none!important}

/* ---- next style block ---- */


    .hkpl-lang-panel { display: none !important; }
    .hkpl-lang-panel.is-open { display: block !important; }
  

/* ---- next style block ---- */

#hkpl-tabbar{display:none}@media(max-width:640px){body{padding-bottom:calc(56px + env(safe-area-inset-bottom))!important}#hkpl-tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:45;background:#fff;border-top:1px solid #edf0ef;box-shadow:0 -1px 10px rgba(0,0,0,.05);padding-bottom:env(safe-area-inset-bottom);transition:transform .18s ease}#hkpl-tabbar .tb{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:7px 0 6px;font-size:10px;font-weight:700;color:#5b6660;text-decoration:none;background:none;border:0;cursor:pointer;white-space:nowrap;-webkit-tap-highlight-color:transparent}#hkpl-tabbar .tb svg{width:23px;height:23px}#hkpl-tabbar .tb.on{color:var(--brand,#008034)}#hkpl-chat-fab,#hkpl-bug-fab,#hkpl-help-fab,#hw-fab,.cmdk-hint{bottom:calc(70px + env(safe-area-inset-bottom))!important}#hkpl-cookie-banner{bottom:calc(56px + env(safe-area-inset-bottom) + 10px)!important}html.hkpl-kb #hkpl-tabbar{transform:translateY(110%)}html.hkpl-kb body{padding-bottom:0!important}#sh-notif-toast,#hkpl-sub-toast,#hkpl-toast{bottom:calc(56px + env(safe-area-inset-bottom,0px) + 14px)!important}html:is([data-template="midnight"],[data-template="arena"],[data-theme="dark"]) #hkpl-tabbar{background:var(--surface);border-top-color:var(--line)}html:is([data-template="midnight"],[data-template="arena"],[data-theme="dark"]) #hkpl-tabbar .tb{color:var(--muted)}html:is([data-template="midnight"],[data-template="arena"],[data-theme="dark"]) #hkpl-tabbar .tb.on{color:var(--brand,#008034)}}

/* ---- next style block ---- */

@keyframes hkplSpin { to { transform: rotate(360deg); } }

/* ---- next style block ---- */

#hkpl-back{display:inline-flex;align-items:center;gap:5px;cursor:pointer;font-family:inherit;font-size:13px;font-weight:700;color:var(--brand,#008034);background:var(--card,#fff);border:1px solid var(--line,#e5e7eb);border-radius:999px;padding:7px 13px 7px 10px;line-height:1;white-space:nowrap;text-decoration:none;box-shadow:0 1px 2px rgba(0,0,0,.04);transition:background .12s,transform .12s;}#hkpl-back:hover{background:var(--brand-50,#ecfdf5);}#hkpl-back:active{transform:scale(.95);}#hkpl-back .bk-x{font-size:16px;line-height:1;margin-top:-1px;}#hkpl-back.floating{position:fixed;top:calc(10px + var(--uat-bar-h, 0px));left:10px;z-index:39;}@media(max-width:640px){#hkpl-back .bk-t{display:none;}#hkpl-back{padding:8px 11px;}#hkpl-back.floating{top:calc(8px + var(--uat-bar-h, 0px));left:8px;}}

/* ---- next style block ---- */


      /* Shared header + app-portal icon controls: comfortable >=48px hit area */
      #hkpl-sh .fs-pill,
      #hkpl-sh .dm-pill,
      #hkpl-sh .lang > button,
      #hkpl-sh .hamburger,
      #hkpl-sh .signin-btn,
      #hkpl-sh .sh-switch > button,
      #hkpl-fs-pill,
      [data-app-zoom],
      .lang-pill,
      #notif-bell,
      #app-search-btn {
        min-height: 48px !important;
        min-width: 48px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
      }
      /* Mobile bottom tab bar + primary nav rows — full-height tap rows */
      #hkpl-tabbar a, #hkpl-tabbar button,
      #hkpl-mobile nav a,
      #hkpl-sh nav.desktop a { min-height: 48px !important; }
      #hkpl-mobile nav a, #hkpl-sh nav.desktop a { display: flex !important; align-items: center !important; }
      /* Segmented pill groups (range/division tabs) — the pills themselves, not the strip */
      .range-btn, .div-tab { min-height: 48px !important; display: inline-flex !important; align-items: center !important; }
    

/* ---- next style block ---- */

.hkpl-toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 20px);transform:translateX(-50%) translateY(20px);background:var(--ink,#0a0e0c);color:#fff;padding:12px 16px;border-radius:var(--r-pill,999px);font:600 14px/1 var(--font-body,sans-serif);display:flex;align-items:center;gap:14px;box-shadow:var(--shadow-lg,0 18px 40px -16px rgba(0,0,0,.4));z-index:9999;opacity:0;pointer-events:auto;transition:opacity .22s var(--ease-out,ease),transform .28s var(--ease-spring,cubic-bezier(.2,.8,.2,1)))}.hkpl-toast.in{opacity:1;transform:translateX(-50%) translateY(0)}.hkpl-toast button{background:transparent;border:0;color:var(--accent,#9dff5b);font-weight:800;cursor:pointer;font-size:14px;padding:4px 6px}.hkpl-sheet-bg{position:fixed;inset:0;background:rgba(10,14,12,.45);z-index:9998;opacity:0;transition:opacity .2s;display:flex;align-items:flex-end;justify-content:center}.hkpl-sheet-bg.in{opacity:1}.hkpl-sheet{background:var(--surface,#fff);color:var(--ink,#0a0e0c);width:100%;max-width:560px;border-radius:var(--r-lg,14px) var(--r-lg,14px) 0 0;padding:8px 18px calc(env(safe-area-inset-bottom,0px) + 18px);transform:translateY(100%);transition:transform .3s var(--ease-spring,cubic-bezier(.2,.8,.2,1));max-height:86vh;overflow:auto;touch-action:pan-y}.hkpl-sheet-bg.in .hkpl-sheet{transform:translateY(0)}.hkpl-sheet .grip{width:38px;height:4px;border-radius:2px;background:var(--line-strong,#d1d5db);margin:6px auto 12px}.hkpl-drag-ghost{opacity:.4} .hkpl-drag-over{box-shadow:inset 0 0 0 2px var(--brand,#00913a)}

/* ---- next style block ---- */

.hkpl-press{transform:scale(.97)!important;transition:transform .09s var(--ease-out,ease)!important}@keyframes hkpl-shim{100%{background-position:-200% 0}}.hkpl-skeleton{background:linear-gradient(90deg,var(--line,#e5e7eb) 25%,var(--bg,#f9fafb) 37%,var(--line,#e5e7eb) 63%);background-size:200% 100%;animation:hkpl-shim 1.2s linear infinite;border-radius:var(--r-sm,6px);color:transparent!important}

/* ---- next style block ---- */

.cmdk-hint{position:fixed;left:16px;bottom:16px;z-index:900;display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:var(--r-pill,999px);background:var(--surface,#fff);color:var(--muted-strong,#4b5563);border:1px solid var(--line,#e5e7eb);box-shadow:var(--shadow-md,0 6px 18px -8px rgba(0,0,0,.18));cursor:pointer;font:600 12px/1 var(--font-body,system-ui);transition:transform var(--dur-fast,120ms) var(--ease-out),box-shadow var(--dur-fast,120ms)}.cmdk-hint:hover{transform:translateY(-1px);box-shadow:var(--shadow-lg,0 18px 40px -16px rgba(0,0,0,.28))}.cmdk-hint kbd{font:700 11px/1 var(--font-mono,ui-monospace);background:var(--bg,#f3f4f6);border:1px solid var(--line,#e5e7eb);border-radius:5px;padding:3px 5px;color:var(--ink,#111)}@media(max-width:640px){.cmdk-hint kbd{display:none}}.cmdk-back{position:fixed;inset:0;z-index:2147483001;background:rgba(10,14,12,.45);backdrop-filter:blur(3px);display:flex;align-items:flex-start;justify-content:center;padding:12vh 16px 16px;opacity:0;transition:opacity var(--dur,200ms) var(--ease-out)}.cmdk-back.on{opacity:1}.cmdk-panel{width:100%;max-width:560px;background:var(--surface,#fff);color:var(--ink,#0a0e0c);border:1px solid var(--line,#e5e7eb);border-radius:var(--r-lg,14px);box-shadow:var(--shadow-lg,0 24px 60px -18px rgba(0,0,0,.4));overflow:hidden;transform:translateY(-8px) scale(.985);transition:transform var(--dur,200ms) var(--ease-out)}.cmdk-back.on .cmdk-panel{transform:none}.cmdk-in{width:100%;border:0;outline:0;background:transparent;color:var(--ink,#0a0e0c);font:500 17px/1.2 var(--font-body,system-ui);padding:18px 18px 16px;border-bottom:1px solid var(--line,#eee)}.cmdk-in::placeholder{color:var(--muted,#9aa5a0)}.cmdk-list{max-height:52vh;overflow-y:auto;padding:6px}.cmdk-grp{font:800 10px/1 var(--font-body);letter-spacing:.09em;text-transform:uppercase;color:var(--muted,#9aa5a0);padding:12px 12px 6px}.cmdk-item{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:var(--r-md,10px);cursor:pointer;color:var(--ink,#0a0e0c);font:600 14px/1.2 var(--font-body)}.cmdk-item .ico{width:22px;text-align:center;font-size:15px;flex:0 0 auto}.cmdk-item .sub{margin-left:auto;font:600 11px/1 var(--font-body);color:var(--muted,#9aa5a0)}.cmdk-item[aria-selected="true"]{background:var(--brand-soft,#e6f4ec);color:var(--brand-strong,#006c2c)}.cmdk-item[aria-selected="true"] .sub{color:var(--brand,#00913a)}.cmdk-empty{padding:26px 16px;text-align:center;color:var(--muted,#9aa5a0);font:500 14px/1.4 var(--font-body)}.cmdk-foot{display:flex;gap:14px;padding:9px 14px;border-top:1px solid var(--line,#eee);font:600 11px/1 var(--font-body);color:var(--muted,#9aa5a0)}.cmdk-foot kbd{font-family:var(--font-mono,ui-monospace);background:var(--bg,#f3f4f6);border:1px solid var(--line,#e5e7eb);border-radius:4px;padding:2px 5px;color:var(--muted-strong,#4b5563)}

/* ---- next style block ---- */

.hkpl-simple #hkpl-footer,.hkpl-simple footer.site-footer,.hkpl-simple .marketing-footer,.hkpl-simple .hkpl-hero-fx { display: none !important; }.hkpl-simple .sponsors, .hkpl-simple #sponsors, .hkpl-simple .sponsor-strip {  order: 999 !important; margin-top: 28px !important; opacity: .85 !important; }.hkpl-simple .hkpl-action-btn,.hkpl-simple .btn-primary,.hkpl-simple #hkpl-mobile a.sh-portal {  min-height: 56px !important; }.hkpl-simple #hkpl-sh .signin-btn { min-height: 48px !important; }.hkpl-simple #hkpl-sh a.sh-portal { min-height: 44px !important; height: 44px !important; }

/* ---- next style block ---- */


    #hkpl-chat-fab {
      position: fixed; bottom: 18px; right: 18px; z-index: 9998;
      width: 56px; height: 56px; border-radius: 50%; border: 0;
      background: #00913a; color: white; cursor: pointer;
      box-shadow: 0 4px 14px rgba(0,0,0,.2); display: flex;
      align-items: center; justify-content: center;
      transition: transform .15s ease, box-shadow .15s ease;
      touch-action: none;   /* DRAGGABLE-FAB-V1: let a touch-drag move the button instead of scrolling the page */
    }
    #hkpl-chat-fab:hover { transform: scale(1.06); box-shadow: 0 6px 20px rgba(0,0,0,.25); }
    #hkpl-chat-fab.hkpl-dragging { transition: none; cursor: grabbing; box-shadow: 0 10px 26px rgba(0,0,0,.32); transform: scale(1.08); }
    #hkpl-chat-fab svg { width: 26px; height: 26px; }
    #hkpl-chat-panel {
      position: fixed; bottom: 86px; right: 18px; z-index: 9998;
      width: 360px; max-width: calc(100vw - 36px); height: 520px;
      max-height: calc(100vh - 110px);
      background: var(--card,#fff); border-radius: 14px;
      box-shadow: 0 10px 40px rgba(0,0,0,.18);
      display: none; flex-direction: column; overflow: hidden;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    }
    #hkpl-chat-panel.open { display: flex; animation: hkplChatPop .18s ease-out; }
    @keyframes hkplChatPop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
    .hkpl-chat-hdr {
      background: #00913a; color: white; padding: 12px 14px;
      display: flex; align-items: center; justify-content: space-between;
    }
    .hkpl-chat-hdr-title { font-weight: 700; font-size: 14px; }
    .hkpl-chat-hdr-sub { font-size: 11px; opacity: .85; margin-top: 2px; }
    .hkpl-chat-close { background: transparent; color: white; border: 0; cursor: pointer; font-size: 18px; padding: 0 4px; line-height: 1; }
    .hkpl-chat-log { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: var(--bg,#fafafa); }
    .hkpl-chat-msg { padding: 9px 12px; border-radius: 14px; font-size: 13px; line-height: 1.5; max-width: 85%; white-space: pre-wrap; word-wrap: break-word; }
    .hkpl-chat-msg.user { background: #00913a; color: white; align-self: flex-end; border-bottom-right-radius: 4px; }
    .hkpl-chat-msg.bot { background: var(--surface,#fff); color: var(--ink,#1f2937); border: 1px solid var(--line,#e5e7eb); align-self: flex-start; border-bottom-left-radius: 4px; }
    .hkpl-chat-msg.err { background: var(--err-bg,#fef2f2); color: var(--err-strong,#b91c1c); border: 1px solid var(--err-line,#fecaca); }
    .hkpl-chat-meta { font-size: 10px; color: var(--muted,#9ca3af); margin-top: 4px; }
    .hkpl-chat-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 8px; }
    .hkpl-chat-chip { background: var(--bg,#f3f4f6); border: 1px solid var(--line,#e5e7eb); color: var(--muted-strong,#374151); font-size: 11px; padding: 6px 10px; border-radius: 999px; cursor: pointer; }
    .hkpl-chat-chip:hover { background: var(--line,#e5e7eb); }
    .hkpl-chat-form { display: flex; gap: 6px; padding: 10px; border-top: 1px solid var(--line,#e5e7eb); background: var(--surface,#fff); }
    .hkpl-chat-input { flex: 1; padding: 9px 12px; border: 1px solid var(--line-strong,#d1d5db); border-radius: 10px; font: inherit; font-size: 13px; outline: none; background: var(--surface,#fff); color: var(--field-ink,#111827); }
    .hkpl-chat-input:focus { border-color: #00913a; }
    .hkpl-chat-send { background: #00913a; color: white; border: 0; border-radius: 10px; padding: 0 14px; font-weight: 600; cursor: pointer; font-size: 13px; }
    .hkpl-chat-send:disabled { background: var(--muted,#9ca3af); cursor: not-allowed; }
    .hkpl-chat-typing { display: inline-flex; gap: 3px; align-items: center; }
    .hkpl-chat-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--muted,#9ca3af); animation: hkplTyping 1.4s infinite ease-in-out; }
    .hkpl-chat-typing span:nth-child(2) { animation-delay: .2s; }
    .hkpl-chat-typing span:nth-child(3) { animation-delay: .4s; }
    @keyframes hkplTyping { 0%, 60%, 100% { opacity: .3; } 30% { opacity: 1; } }
    /* MOBILE-CHAT-V1 (2026-07-31, operator "fit the screen like a normal chat app; keyboard + typing"):
       on phones the panel becomes a full-screen sheet with keyboard-aware height (dvh) so the input
       stays above the on-screen keyboard, messages scroll, and iOS doesn't zoom on focus. */
    @media (max-width: 640px) {
      #hkpl-chat-panel {
        top: 0; right: 0; bottom: 0; left: 0;
        width: 100%; max-width: 100%;
        height: 100vh; height: 100dvh; max-height: 100dvh;
        border-radius: 0; box-shadow: none;
      }
      #hkpl-chat-panel.open { animation: none; }
      .hkpl-chat-hdr { padding-top: calc(12px + env(safe-area-inset-top)); }
      .hkpl-chat-msg { font-size: 15px; max-width: 88%; }
      .hkpl-chat-input { font-size: 16px; }              /* >=16px prevents iOS zoom-on-focus */
      .hkpl-chat-form { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
    }
  

/* ---- next style block ---- */

@media (max-width:639px){#qa-switch-bar:not([data-moved]){bottom:84px !important}}#qa-switch-bar.qasb-collapsed{padding:0!important;left:auto;background:transparent;box-shadow:none}#qa-switch-bar.qasb-collapsed .qasb-full{display:none!important}#qa-switch-bar.qasb-collapsed #qasb-handle{cursor:grab;width:46px;height:46px;border-radius:999px;background:#0a2818;box-shadow:0 4px 18px rgba(0,0,0,.30);display:flex;align-items:center;justify-content:center;opacity:1;gap:0}#qa-switch-bar.qasb-collapsed #qasb-handle svg{width:22px;height:22px}

/* ---- next style block ---- */


    .stand-tbl tbody tr.zone-promote{background:rgba(16,185,129,.07)}
    .stand-tbl tbody tr.zone-relegate{background:rgba(239,68,68,.07)}
    .zbadge{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;border-radius:4px;font-size:11px;font-weight:900;margin-left:6px;line-height:1;padding:0 3px;vertical-align:middle}
    .zbadge-up{background:var(--ok-bg);color:var(--c-047857)}
    .zbadge-down{background:var(--err-bg);color:var(--err-strong)}
    .stand-tbl .stat-start{border-left:1px solid rgba(255,255,255,.22)}
    .stand-tbl tbody .stat-start{border-left:1px solid var(--line-strong);background:var(--surface-2)}
    .stand-tbl tbody .stat-cell{background:var(--surface-2);font-variant-numeric:tabular-nums}
    .stand-tbl tbody .pts-cell{border-left:2px solid var(--brand);background:var(--brand-soft);font-variant-numeric:tabular-nums}
    .stand-tbl thead .pts-cell{border-left:2px solid var(--c-34d399);background:transparent}
    /* STANDINGS-WOW-V1 (2026-07-01): podium accents + hover elevation. Purely presentational,
       driven by row index (rank) that already exists — no new data. */
    .stand-tbl tbody tr{transition:background-color .15s ease, box-shadow .15s ease}
    .stand-tbl tbody tr:hover{box-shadow:inset 0 0 0 9999px color-mix(in srgb, var(--brand), transparent 97%)}
    .stand-tbl tbody tr td:first-child{position:relative}
    .stand-tbl tbody tr.rank-podium td:first-child::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px}
    .stand-tbl tbody tr.rank-1 td:first-child::before{background:var(--c-eab308)}
    .stand-tbl tbody tr.rank-2 td:first-child::before{background:var(--c-94a3b8)}
    .stand-tbl tbody tr.rank-3 td:first-child::before{background:var(--c-c2853f)}
    .stand-tbl tbody tr.rank-1{background:linear-gradient(90deg,rgba(234,179,8,.08),color-mix(in srgb, var(--brand), transparent 96%))}
    .stand-tbl tbody tr.rank-1:hover{box-shadow:inset 0 0 0 9999px rgba(234,179,8,.05)}
    .medal{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:9999px;font-size:11px;font-weight:800;line-height:1;flex-shrink:0}
    .medal-1{background:var(--warn-bg);color:var(--c-a16207)}
    .medal-2{background:var(--c-f1f5f9);color:var(--c-475569)}
    .medal-3{background:var(--c-f6e8db);color:var(--c-a86e3c)}
    @media (max-width:640px){
      .stand-tbl thead th,.stand-tbl tbody td{padding-top:.5rem;padding-bottom:.5rem}
      .stand-tbl thead .stat-start,.stand-tbl thead th,.stand-tbl tbody .stat-cell{padding-left:.4rem;padding-right:.4rem}
      /* STANDINGS-MOBILE-COLS-V1 (2026-07-10): at phone width the 9-col table needed horizontal scroll, so
         Pts (the column that matters most) sat off-screen. Hide the 3 secondary stats (GW/GL/Win%) and drop the
         min-width so #, Team, P, W, L and Pts all fit on screen without scrolling. */
      .stand-tbl{min-width:0!important}
      .stand-tbl .col-sec{display:none}
    }
    @media (prefers-reduced-motion:reduce){.stand-tbl tbody tr{transition:none}}
    /* FORM-GUIDE-V1 (2026-07-12): last-5 W/L dots + win-streak flame under the team name */
    .fg-wrap{display:inline-flex;align-items:center;gap:3px;line-height:1;margin-left:8px;vertical-align:middle}
    .fg-dot{width:9px;height:9px;border-radius:50%;display:inline-block}
    .fg-dot.fg-w{background:var(--brand,#00913a)}
    .fg-dot.fg-l{background:var(--err-strong,#dc2626)}
    .fg-streak{display:inline-flex;align-items:center;padding:1px 6px;border-radius:999px;background:var(--brand,#00913a);color:#fff;font-size:10px;font-weight:800;line-height:1.4;margin-left:3px}
  

/* ---- next style block ---- */

 block above. Rank-1 keeps the trophy so the leader still reads as champion.
        const _podiumCls = i < 3 ? ` rank-podium rank-${i+1}` : '';
        // RANK-ICON-CONSISTENT-V1 (2026-07-16, committee #3): rank 1 was a trophy SVG while 2 & 3 were numbers
        // — inconsistent icons + different widths. Show the NUMBER for all top-3 in the gold/silver/bronze chip.
        const _rankInner = i < 3 ? `<span class="medal medal-${i+1}">${i+1}</span>` : `${i+1}`;
        const _z = _zoneOf(i);
        const _zCls = _z === 'promote' ? ' zone-promote' : _z === 'relegate' ? ' zone-relegate' : '';
        const _zBadge = _z === 'promote' ? '<span class="zbadge zbadge-up" title="Promotion — moves up a division">↑</span>'
          : _z === 'relegate' ? '<span class="zbadge zbadge-down" title="Relegation — moves down a division">↓</span>' : '';
        // MY-SCOPE-V1 (2026-08-03): highlight the signed-in user's own team row + a "你的隊伍" chip.
        const _mine = _myTeamIds && _myTeamIds.has(r.team_id || r.id);
        const _mineStyle = _mine ? ` style="${window.MyScope ? MyScope.rowStyleVars : ''}"` : '';
        const _mineChip = _mine && window.MyScope ? MyScope.CHIP_HTML : '';
        return `<tr class="${i<3?'bg-hkpl-50/40':''}${_podiumCls}${_zCls}${_mine?' myscope-row':''} hover:bg-gray-50 text-base"${_mineStyle}>
        <td class="px-4 py-3 font-display font-bold text-lg ${i===0?'text-hkpl-500':i<3?'text-hkpl-700':'text-gray-400'}"><span class="inline-flex items-center gap-1.5">${_rankInner}</span></td>
        <td class="px-4 py-3 font-bold text-ink text-base"><span style="display:flex;flex-direction:column;gap:2px;min-width:0"><span style="display:inline-flex;align-items:center;gap:var(--space-2)">${(r.team_logo_url || r.club_logo_url) ? `<img src="${esc(r.team_logo_url || r.club_logo_url)}" alt="" data-name="${esc(r.name)}" data-size="28" style="width:28px;height:28px;border-radius:6px;object-fit:cover;flex-shrink:0;background:var(--pf3f4f6,#f3f4f6)" loading="lazy" onerror="window.TeamLogo&&window.TeamLogo.fail(this)">` : (window.TeamLogo ? window.TeamLogo.placeholderHtml(r.name, 28) : '<span style="display:inline-block;width:28px;height:28px;border-radius:4px;background:var(--c-f3f4f6);border:1px solid var(--line);flex-shrink:0"></span>')}<a href="/team.html?team=${encodeURIComponent(r.team_id||r.id||'')}" class="hover:text-hkpl-600 hover:underline">${esc(r.name)}</a>${_zBadge}${_mineChip}</span>${renderFormDots(_currentTeamForm[r.team_id||r.id])}${(window.StandingsExplain ? window.StandingsExplain.tiebreakNote(r, { tiedAbove: i>0 && Number(rows[i-1].points)===Number(r.points) }) : "")}</span></td>
        <td class="stat-start stat-cell px-3 py-3 text-center">${r.matches}</td>
        <td class="stat-cell px-3 py-3 text-center text-hkpl-500 font-bold">${r.w}</td>
        <td class="stat-cell px-3 py-3 text-center text-gray-500">${r.l}</td>
        <td class="col-sec stat-cell px-3 py-3 text-center">${r.gw}</td>
        <td class="col-sec stat-cell px-3 py-3 text-center">${r.gl}</td>
        <td class="col-sec stat-cell px-3 py-3 text-center text-gray-500">${gamePct}</td>
        <td class="col-sec stat-cell px-3 py-3 text-center text-gray-500">${winPct}</td>
        <td class="pts-cell px-4 py-3 text-right font-display font-black text-lg">${r.points}</td>
      </tr>`;}).join('')}
    </tbody>
  </table></div></div>` + ((_promote || _relegate) ? `<div class="px-4 py-3 text-xs flex flex-wrap gap-x-5 gap-y-1 border-t border-gray-100 bg-gray-50 text-gray-600">${_promote?`<span><span class="zbadge zbadge-up">↑</span> Promotion — top ${_promote} move up a division next season</span>`:''}${_relegate?`<span><span class="zbadge zbadge-down">↓</span> Relegation — bottom ${_relegate} move down</span>`:''}</div>` : '');
}

function renderGroupControl(payload) {
  if (!payload?.is_grouped || !payload.groups?.length) return '';
  const btn = (key, label, active) =>
    `<button data-view="${esc(key)}" class="group-tab whitespace-nowrap px-5 py-2 text-xs font-bold uppercase tracking-wide ${active ? 'bg-hkpl-500 text-white' : 'bg-white text-hkpl-500 hover:bg-hkpl-50'} border-r border-hkpl-200 last:border-r-0">${esc(label)}</button>`;
  const items = [btn('all', 'All groups', _currentView === 'all'), btn('combined', 'Combined', _currentView === 'combined')]
    .concat(payload.groups.map(g => btn('group:' + g.label, (window.StandingsExplain ? window.StandingsExplain.groupLabel(g.label) : String(g.label)), _currentView === 'group:' + g.label))); // GROUP-DEDUP-V1: don't prepend 'Group' if the label already has it
  return `<div class="px-4 py-3 bg-gray-50 border-b border-gray-200 flex flex-wrap items-center justify-center gap-2">
    <span class="text-xs uppercase tracking-widest text-gray-500 font-bold mr-2">View:</span>
    <div class="inline-flex border border-hkpl-200 rounded overflow-hidden" id="group-tabs">${items.join('')}</div>
  </div>`;
}

function rerender() {
  const root = document.getElementById('standings');
  const payload = _currentDivPayload;
  if (!payload) { root.innerHTML = '<div class="text-center text-gray-500 py-12">No data.</div>'; return; }
  // STACKED-GROUPS-V1 (2026-07-28, RunPlay study): "All groups" renders every group's table at once, each
  // under its own header — glanceable, no clicking between groups. Combined + per-group tabs still focus one.
  // Additive: shows MORE, never less.
  let _tablesHtml;
  if (_currentView === 'all' && payload.is_grouped) {
    _tablesHtml = payload.groups.map(g => {
      const gl = (window.StandingsExplain ? window.StandingsExplain.groupLabel(g.label) : String(g.label));
      return '<div class="px-4 pt-4 pb-1"><span class="inline-block bg-hkpl-600 text-white text-xs font-bold uppercase tracking-widest px-4 py-1.5 rounded">' + esc(gl) + '</span></div>' + renderStandingsTable(g.rows, null);
    }).join('');
  } else {
    let rows;
    if (_currentView === 'combined' || !payload.is_grouped) {
      rows = payload.combined || [];
    } else {
      const gLabel = _currentView.startsWith('group:') ? _currentView.slice(6) : null;
      const g = payload.groups.find(x => String(x.label) === String(gLabel));
      rows = g ? g.rows : (payload.combined || []);
    }
    const _isCombinedView = (_currentView === 'combined' || !payload.is_grouped);
    const _zones = _isCombinedView ? { promote: payload.promote_count || 0, relegate: payload.relegate_count || 0 } : null;
    _tablesHtml = renderStandingsTable(rows, _zones);
  }
  const _progNote = (window.StandingsExplain ? window.StandingsExplain.progressNote(payload.match_progress) : "");
  root.innerHTML = `<style>
    .stand-tbl tbody tr.zone-promote{background:rgba(16,185,129,.07)}
    .stand-tbl tbody tr.zone-relegate{background:rgba(239,68,68,.07)}
    .zbadge{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;border-radius:4px;font-size:11px;font-weight:900;margin-left:6px;line-height:1;padding:0 3px;vertical-align:middle}
    .zbadge-up{background:var(--ok-bg);color:var(--c-047857)}
    .zbadge-down{background:var(--err-bg);color:var(--err-strong)}
    .stand-tbl .stat-start{border-left:1px solid rgba(255,255,255,.22)}
    .stand-tbl tbody .stat-start{border-left:1px solid var(--line-strong);background:var(--surface-2)}
    .stand-tbl tbody .stat-cell{background:var(--surface-2);font-variant-numeric:tabular-nums}
    .stand-tbl tbody .pts-cell{border-left:2px solid var(--brand);background:var(--brand-soft);font-variant-numeric:tabular-nums}
    .stand-tbl thead .pts-cell{border-left:2px solid var(--c-34d399);background:transparent}
    /* STANDINGS-WOW-V1 (2026-07-01): podium accents + hover elevation. Purely presentational,
       driven by row index (rank) that already exists — no new data. */
    .stand-tbl tbody tr{transition:background-color .15s ease, box-shadow .15s ease}
    .stand-tbl tbody tr:hover{box-shadow:inset 0 0 0 9999px color-mix(in srgb, var(--brand), transparent 97%)}
    .stand-tbl tbody tr td:first-child{position:relative}
    .stand-tbl tbody tr.rank-podium td:first-child::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px}
    .stand-tbl tbody tr.rank-1 td:first-child::before{background:var(--c-eab308)}
    .stand-tbl tbody tr.rank-2 td:first-child::before{background:var(--c-94a3b8)}
    .stand-tbl tbody tr.rank-3 td:first-child::before{background:var(--c-c2853f)}
    .stand-tbl tbody tr.rank-1{background:linear-gradient(90deg,rgba(234,179,8,.08),color-mix(in srgb, var(--brand), transparent 96%))}
    .stand-tbl tbody tr.rank-1:hover{box-shadow:inset 0 0 0 9999px rgba(234,179,8,.05)}
    .medal{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:9999px;font-size:11px;font-weight:800;line-height:1;flex-shrink:0}
    .medal-1{background:var(--warn-bg);color:var(--c-a16207)}
    .medal-2{background:var(--c-f1f5f9);color:var(--c-475569)}
    .medal-3{background:var(--c-f6e8db);color:var(--c-a86e3c)}
    @media (max-width:640px){
      .stand-tbl thead th,.stand-tbl tbody td{padding-top:.5rem;padding-bottom:.5rem}
      .stand-tbl thead .stat-start,.stand-tbl thead th,.stand-tbl tbody .stat-cell{padding-left:.4rem;padding-right:.4rem}
      /* STANDINGS-MOBILE-COLS-V1 (2026-07-10): at phone width the 9-col table needed horizontal scroll, so
         Pts (the column that matters most) sat off-screen. Hide the 3 secondary stats (GW/GL/Win%) and drop the
         min-width so #, Team, P, W, L and Pts all fit on screen without scrolling. */
      .stand-tbl{min-width:0!important}
      .stand-tbl .col-sec{display:none}
    }
    @media (prefers-reduced-motion:reduce){.stand-tbl tbody tr{transition:none}}
    /* FORM-GUIDE-V1 (2026-07-12): last-5 W/L dots + win-streak flame under the team name */
    .fg-wrap{display:inline-flex;align-items:center;gap:3px;line-height:1;margin-left:8px;vertical-align:middle}
    .fg-dot{width:9px;height:9px;border-radius:50%;display:inline-block}
    .fg-dot.fg-w{background:var(--brand,#00913a)}
    .fg-dot.fg-l{background:var(--err-strong,#dc2626)}
    .fg-streak{display:inline-flex;align-items:center;padding:1px 6px;border-radius:999px;background:var(--brand,#00913a);color:#fff;font-size:10px;font-weight:800;line-height:1.4;margin-left:3px}