/* ============================================================================
   HKPL SHELL: "wechat-mini"  (v4 — GPCL-mimic Chinese pickleball mini-program)

   Goal: each HKPL page type reads like GPCL 广州匹克球俱乐部城市联赛's equivalent
   — a real, polished Chinese pickleball WeChat mini-program ("the China standard").
   v4 keeps the whole v2 WeUI foundation (grey page, white cards, brand top bar,
   capsule, bottom tab bar, function-entry grid, search pill) and layers GPCL's
   page-type patterns on top: poster banner hero, underlined section headers,
   brand-tinted info-list cells, spacious list-item cells, brand chips, brand
   CTAs, and underline sub-tabs. Generous whitespace + hairlines, no heavy borders.

   Contract (unchanged from v2):
     - EVERYTHING scoped to html[data-shell="wechat-mini"].
     - Brand colour flows via var(--brand, #008034) so tenant themes stay
       white-labelled — NEVER hardcode GPCL yellow.
     - WeUI greys (#EDEDED page, white cards, 0.5px hairlines) are shell-local
       tokens with dark-mode equivalents.
     - Paint only (bg/color/radius/padding/margin/borders/pseudo-underlines) —
       the shell wraps EXISTING HKPL markup, so we can't restructure.
     - CONSERVATIVE selectors: no broad [class*="card"], main>div, or
       overflow:hidden (they broke content before). Explicit class targets +
       the existing narrowed set only.
   ========================================================================== */

/* SHARED premium-home components (tokens + component classes, namespaced
   .hkplc-*), reused by the mini HOME's scorebug + standings via window.HKPLC.*.
   Must precede all other rules (@import ordering). */
/* shell-components.css injected as a versioned <link> by _injShell (cache-bustable) */

/* --- Shell-local WeUI palette --------------------------------------------- */
/* Light-mode signature. These are intentionally shell-local (not the site's
   --surface/--bg) so the grey page + white cards survive regardless of what
   the tenant theme sets its generic surfaces to. */
html[data-shell="wechat-mini"] {
  --wm-page-bg: #ededed;      /* WeUI grey page — THE signature */
  --wm-card-bg: #ffffff;      /* white cell/card surface        */
  --wm-nav-bg: #ffffff;       /* white navigation bar           */
  --wm-tab-bg: #ffffff;       /* white tab bar                  */
  --wm-hairline: #e5e5e5;     /* 0.5px cell divider / borders   */
  --wm-ink: #171717;          /* primary text                   */
  --wm-secondary: #888888;    /* secondary / meta text          */
  --wm-inactive: #6b6b6b;     /* inactive tab (A11Y-A1: was #999 2.85:1 FAIL -> #6b6b6b 5.33:1 on white) */
  --wm-gap: 10px;             /* grey gap between card groups    */
  --wm-radius: 8px;           /* WeUI card radius                */
  --wm-nav-h: 44px;           /* WeChat nav bar height           */
  --wm-tab-h: 52px;           /* tab bar content height          */
  --wm-font: -apple-system, BlinkMacSystemFont, "PingFang SC",
             "Helvetica Neue", "Microsoft YaHei", "Segoe UI", sans-serif;
  /* GPCL v4: a soft brand tint for icon tiles / info-cell icons. Derived at
     use-sites via color-mix so it tracks any tenant brand; a static fallback
     is provided for engines without color-mix. */
  --wm-brand-tint: rgba(0, 128, 52, 0.10);
  --wm-brand-soft: rgba(0, 128, 52, 0.06);
}

/* Dark-mode equivalents (so dark isn't a white glare). Guard for both an
   explicit [data-theme="dark"] toggle and the OS setting when the site
   hasn't forced light. */
html[data-shell="wechat-mini"][data-theme="dark"] {
  --wm-page-bg: #111111;
  --wm-card-bg: #1e1e1e;
  --wm-nav-bg: #1c1c1c;
  --wm-tab-bg: #1c1c1c;
  --wm-hairline: #2c2c2c;
  --wm-ink: #ededed;
  --wm-secondary: #9a9a9a;
  --wm-inactive: #a8a8a8;     /* A11Y-A1: was #7a7a7a 3.97:1 FAIL -> #a8a8a8 7.17:1 on dark tab bar #1c1c1c */
  --wm-brand-tint: rgba(255, 255, 255, 0.08);
  --wm-brand-soft: rgba(255, 255, 255, 0.05);
}
/* DARK-OPT-IN-V7 (2026-09-06): removed OS-dark auto-follow (caused half-dark chaos under the
   shell). Dark is opt-in via the [data-theme="dark"] block above, matching the standard site. */

/* Prefer a live brand-derived tint where color-mix is supported (all current
   mobile WebViews). Falls back to the static rgba above otherwise. */
@supports (background: color-mix(in srgb, red 10%, white)) {
  html[data-shell="wechat-mini"] {
    --wm-brand-tint: color-mix(in srgb, var(--brand, #008034) 12%, transparent);
    --wm-brand-soft: color-mix(in srgb, var(--brand, #008034) 7%, transparent);
  }
  html[data-shell="wechat-mini"][data-theme="dark"] {
    --wm-brand-tint: color-mix(in srgb, var(--brand, #008034) 22%, transparent);
    --wm-brand-soft: color-mix(in srgb, var(--brand, #008034) 14%, transparent);
  }
}

/* --- Hide the default web chrome ------------------------------------------ */
html[data-shell="wechat-mini"] #site-header,
html[data-shell="wechat-mini"] #site-footer,
html[data-shell="wechat-mini"] #hkpl-sh,
html[data-shell="wechat-mini"] #hkpl-sf {
  display: none !important;
}

/* --- Phone frame: centered, grey WeUI page -------------------------------- */
html[data-shell="wechat-mini"] body {
  max-width: 480px;
  margin: 0 auto;
  padding-top: var(--wm-nav-h);
  padding-bottom: var(--wm-tab-h);
  /* THE signature: grey page so content floats as white cards. */
  background: var(--wm-page-bg) !important;
  color: var(--wm-ink);
  box-shadow: 0 0 0 1px var(--wm-hairline);
  min-height: 100vh;
  font-family: var(--wm-font);
  -webkit-tap-highlight-color: transparent;
}

/* ==========================================================================
   CONTENT -> WeUI white "cell/card" groups on the grey page.

   The shell wraps EXISTING HKPL markup, so we can't restructure it. Instead
   we give the common content containers the floating-white-card look:
   grey side gutter + white bg + 8px radius + a gap between blocks. Kept
   CONSERVATIVE: layout (display/flex/grid/width) is untouched; we only paint
   bg, round corners, and add breathing room. Text colour is nudged so it
   stays readable on white in both themes.
   ========================================================================== */

/* Side gutter: push content in from the grey page edges. Applied to the
   layout roots only, so inner elements don't get compounded padding. */
html[data-shell="wechat-mini"] main,
html[data-shell="wechat-mini"] .wrap,
html[data-shell="wechat-mini"] .container,
html[data-shell="wechat-mini"] .page,
html[data-shell="wechat-mini"] .content {
  background: transparent !important;
  box-sizing: border-box;
}

/* The card treatment — applied to the direct content blocks. */
/* NARROWED (2026-09-05): only explicit content-block classes get the card treatment — dropping the broad
   main>div / .wrap>div / [class*="card"] / overflow:hidden that risked card-izing layout divs + clipping
   dropdowns. Restraint > coverage (operator: mini-programs show less, not more). */
html[data-shell="wechat-mini"] main > section,
html[data-shell="wechat-mini"] main > article,
html[data-shell="wechat-mini"] .wrap > section,
html[data-shell="wechat-mini"] .wrap > article,
html[data-shell="wechat-mini"] .card,
html[data-shell="wechat-mini"] .blk-card,
html[data-shell="wechat-mini"] section.section {
  background: var(--wm-card-bg);
  border-radius: var(--wm-radius);
  margin: var(--wm-gap) var(--wm-gap) 0;
  border-color: var(--wm-hairline);
  box-shadow: none;
  box-sizing: border-box;
}

/* Give card groups internal breathing room only when they don't already
   carry their own padding-heavy content. A gentle default padding matches
   WeUI cells (16px h / 12px v) without fighting components that set their
   own; kept low-specificity so a component's own padding wins.
   v4: bumped to 16px v to match GPCL's roomier cards. */
html[data-shell="wechat-mini"] main > section,
html[data-shell="wechat-mini"] main > article,
html[data-shell="wechat-mini"] .wrap > section,
html[data-shell="wechat-mini"] .wrap > article,
html[data-shell="wechat-mini"] .card,
html[data-shell="wechat-mini"] .blk-card {
  padding: 16px 16px;
}

/* Bottom breathing room so the last card clears the tab bar comfortably. */
html[data-shell="wechat-mini"] main > *:last-child,
html[data-shell="wechat-mini"] .wrap > *:last-child {
  margin-bottom: var(--wm-gap);
}

/* WeUI hairline between direct rows inside a card group (list-cell feel). */
html[data-shell="wechat-mini"] .card > * + *,
html[data-shell="wechat-mini"] .blk-card > * + * {
  border-top: 0.5px solid var(--wm-hairline);
}

/* Secondary / meta text in the WeUI grey. */
html[data-shell="wechat-mini"] small,
html[data-shell="wechat-mini"] .muted,
html[data-shell="wechat-mini"] .meta,
html[data-shell="wechat-mini"] .subtitle,
html[data-shell="wechat-mini"] .secondary {
  color: var(--wm-secondary);
}

/* ==========================================================================
   TOP NAV BAR  (#wm-bar > .wm-title + .wm-capsule)
   Clean bar, 44px + top safe-area, centered title, 0.5px bottom rule.
   (Brand-coloured override applied in the GPCL section below.)
   ========================================================================== */
html[data-shell="wechat-mini"] #wm-bar {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 0 12px;
  height: var(--wm-nav-h);
  background: var(--wm-nav-bg);
  border-bottom: 0.5px solid var(--wm-hairline);
  font-family: var(--wm-font);
}

/* Centered page title — WeUI nav title: 17px / 600. */
html[data-shell="wechat-mini"] #wm-bar .wm-title {
  max-width: 58%;
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: var(--wm-ink);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

/* --- The signature WeChat CAPSULE (top-right) — kept from v1 --------------- */
html[data-shell="wechat-mini"] #wm-bar .wm-capsule {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  width: 87px;
  height: 32px;
  box-sizing: border-box;
  background: var(--wm-card-bg);
  border: 0.5px solid var(--wm-hairline);
  border-radius: 999px;
  box-shadow: 0 0 0.5px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

html[data-shell="wechat-mini"] #wm-bar .wm-cap-btn {
  flex: 1 1 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--wm-ink);
  -webkit-tap-highlight-color: transparent;
}
html[data-shell="wechat-mini"] #wm-bar .wm-cap-btn:active {
  background: rgba(0, 0, 0, 0.05);
}

html[data-shell="wechat-mini"] #wm-bar .wm-cap-div {
  flex: 0 0 auto;
  width: 0.5px;
  height: 18px;
  background: var(--wm-hairline);
  align-self: center;
}

html[data-shell="wechat-mini"] #wm-bar .wm-cap-dots {
  display: inline-flex;
  gap: 3px;
  align-items: center;
}
html[data-shell="wechat-mini"] #wm-bar .wm-cap-dots i {
  width: 3.5px;
  height: 3.5px;
  border-radius: 50%;
  background: var(--wm-ink);
  display: block;
}

html[data-shell="wechat-mini"] #wm-bar .wm-cap-target {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1.6px solid var(--wm-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
html[data-shell="wechat-mini"] #wm-bar .wm-cap-target::after {
  content: "";
  width: 3.5px;
  height: 3.5px;
  border-radius: 50%;
  background: var(--wm-ink);
}

/* ==========================================================================
   BOTTOM TAB BAR  (#wm-tabbar > a.wm-tab > .wm-tab-ico + .wm-tab-lbl)
   White, 0.5px top rule, 24px icon over 10px label, inactive #999,
   active in var(--brand).
   ========================================================================== */
html[data-shell="wechat-mini"] #wm-tabbar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  z-index: 2147483000;
  box-sizing: border-box;
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  height: calc(var(--wm-tab-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--wm-tab-bg);
  border-top: 0.5px solid var(--wm-hairline);
  font-family: var(--wm-font);
}

html[data-shell="wechat-mini"] #wm-tabbar .wm-tab {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 5px 2px 6px;
  text-decoration: none;
  color: var(--wm-inactive);
  background: transparent;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.12s ease;
}
html[data-shell="wechat-mini"] #wm-tabbar .wm-tab:active {
  background: rgba(0, 0, 0, 0.04);
}

/* WeUI tab icon ~24px */
html[data-shell="wechat-mini"] #wm-tabbar .wm-tab-ico {
  width: 24px;
  height: 24px;
  display: block;
  flex: 0 0 auto;
}
html[data-shell="wechat-mini"] #wm-tabbar .wm-tab-ico svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ~10px label */
html[data-shell="wechat-mini"] #wm-tabbar .wm-tab-lbl {
  font-size: 10px;
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* active tab -> accessible per-theme green.
   A11Y-A1 (WCAG): raw var(--brand,#008034) is 5.08:1 on the white tab bar (light, OK) but only
   3.36:1 on the dark tab bar #1c1c1c (FAIL). 10px labels get no large-text exception, so >=4.5:1
   is required. Light uses a darker green, dark a lighter green; both clear 4.5:1. */
html[data-shell="wechat-mini"] #wm-tabbar .wm-tab.is-active {
  color: #006b30; /* 6.68:1 on white */
}
html[data-shell="wechat-mini"] #wm-tabbar .wm-tab.is-active .wm-tab-lbl {
  font-weight: 500;
  color: #006b30; /* 6.68:1 on white */
}
html[data-shell="wechat-mini"][data-theme="dark"] #wm-tabbar .wm-tab.is-active,
html[data-shell="wechat-mini"][data-theme="dark"] #wm-tabbar .wm-tab.is-active .wm-tab-lbl {
  color: #46d17e; /* 8.67:1 on dark tab bar #1c1c1c */
}

/* ============================================================================
   GPCL v4 — match real Chinese pickleball mini-programs (GPCL 广州).

   Eight patterns, described-to-CSS from 3 real GPCL screenshots. All brand
   colour via var(--brand, #008034); paint-only; conservative selectors.
   ========================================================================== */

/* --- Existing base kept from v2/v3: brand-coloured top bar + capsule ------- */
html[data-shell="wechat-mini"] #wm-bar { background: var(--brand, #008034) !important; border-bottom: none !important; }
html[data-shell="wechat-mini"] #wm-bar .wm-title { color: #fff !important; }
html[data-shell="wechat-mini"] #wm-bar .wm-capsule { border-color: rgba(255,255,255,.55) !important; background: rgba(255,255,255,.14) !important; }
html[data-shell="wechat-mini"] #wm-bar .wm-cap-dots i { background: #fff !important; }
html[data-shell="wechat-mini"] #wm-bar .wm-cap-target { border-color: #fff !important; }
html[data-shell="wechat-mini"] #wm-bar .wm-cap-target::after { background: #fff !important; }
html[data-shell="wechat-mini"] #wm-bar .wm-cap-div { background: rgba(255,255,255,.4) !important; }

/* --- Search pill (rounded, floating on the grey page) — kept + polished ---- */
html[data-shell="wechat-mini"] .wm-search { display:flex; align-items:center; gap:8px; margin:12px 12px 10px; padding:10px 16px; background:#fff; border-radius:999px; color:#9a9a9a; font-size:14px; text-decoration:none; box-shadow:0 1px 2px rgba(0,0,0,.04); }
html[data-shell="wechat-mini"] .wm-search-ic { font-size:15px; }

/* --- Function-entry grid (功能入口宫格) — kept + polished ------------------- */
html[data-shell="wechat-mini"] .wm-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:4px 2px; background:#fff; border-radius:12px; margin:0 12px 12px; padding:18px 8px 10px; }
html[data-shell="wechat-mini"] .wm-grid-cell { display:flex; flex-direction:column; align-items:center; gap:8px; padding:6px 2px 12px; text-decoration:none; }
html[data-shell="wechat-mini"] .wm-grid-ic { width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:24px; line-height:1; background:var(--wm-brand-tint); color:var(--brand, #008034); }
html[data-shell="wechat-mini"] .wm-grid-lbl { font-size:12.5px; color:#333; text-align:center; }
html[data-shell="wechat-mini"][data-theme="dark"] .wm-search,
html[data-shell="wechat-mini"][data-theme="dark"] .wm-grid { background:#1e1e1e; }
html[data-shell="wechat-mini"][data-theme="dark"] .wm-grid-lbl { color:#ddd; }

/* ==========================================================================
   PATTERN 1 — POSTER BANNER HERO.
   GPCL pages open with a big full-width ROUNDED banner (event poster) right
   under the nav bar. Make HKPL's hero read as that banner: inset 12px, 12px
   radius, contained height, image cover, text overlaid. NOT a tall marketing
   section. Targets the common hero class names — guesses; iterate if missed.
   ========================================================================== */
html[data-shell="wechat-mini"] .page-hero,
html[data-shell="wechat-mini"] .bg-hero,
html[data-shell="wechat-mini"] .hero,
html[data-shell="wechat-mini"] .hero-banner,
html[data-shell="wechat-mini"] .banner,
html[data-shell="wechat-mini"] header.hero,
html[data-shell="wechat-mini"] section.hero {
  margin: 12px !important;
  border-radius: 12px !important;
  overflow: hidden;                 /* scoped to hero only — safe to clip a poster */
  min-height: 0 !important;
  height: auto !important;
  max-height: 170px;
  padding: 18px 16px !important;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;        /* GPCL overlays title near the lower edge */
  background-size: cover !important;
  background-position: center !important;
  position: relative;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
/* Any <img> the hero uses as its poster fills + covers the banner. */
html[data-shell="wechat-mini"] .page-hero > img,
html[data-shell="wechat-mini"] .bg-hero > img,
html[data-shell="wechat-mini"] .hero > img,
html[data-shell="wechat-mini"] .hero-banner > img,
html[data-shell="wechat-mini"] .banner > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
/* Legibility scrim + keep overlaid text above the image. */
html[data-shell="wechat-mini"] .page-hero::after,
html[data-shell="wechat-mini"] .bg-hero::after,
html[data-shell="wechat-mini"] .hero::after,
html[data-shell="wechat-mini"] .hero-banner::after,
html[data-shell="wechat-mini"] .banner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,.42), rgba(0,0,0,0) 55%);
}
html[data-shell="wechat-mini"] .page-hero > *:not(img),
html[data-shell="wechat-mini"] .bg-hero > *:not(img),
html[data-shell="wechat-mini"] .hero > *:not(img),
html[data-shell="wechat-mini"] .hero-banner > *:not(img),
html[data-shell="wechat-mini"] .banner > *:not(img) {
  position: relative;
  z-index: 2;
}
html[data-shell="wechat-mini"] .page-hero h1,
html[data-shell="wechat-mini"] .page-hero h2,
html[data-shell="wechat-mini"] .bg-hero h1,
html[data-shell="wechat-mini"] .bg-hero h2,
html[data-shell="wechat-mini"] .hero h1,
html[data-shell="wechat-mini"] .hero h2,
html[data-shell="wechat-mini"] .hero-banner h1,
html[data-shell="wechat-mini"] .banner h1 {
  color: #fff !important;
  margin: 0 0 4px !important;
  font-size: 19px;
  font-weight: 700;
  text-shadow: 0 1px 4px rgba(0,0,0,.35);
}
html[data-shell="wechat-mini"] .page-hero p,
html[data-shell="wechat-mini"] .bg-hero p,
html[data-shell="wechat-mini"] .hero p,
html[data-shell="wechat-mini"] .hero-banner p,
html[data-shell="wechat-mini"] .banner p {
  color: rgba(255,255,255,.9) !important;
  margin: 0 !important;
  font-size: 13px;
  text-shadow: 0 1px 3px rgba(0,0,0,.35);
}
/* Hero without a background image: fall back to a brand-colour banner so it
   still reads as a poster block rather than a blank grey box. */
html[data-shell="wechat-mini"] .page-hero:not([style*="background"]),
html[data-shell="wechat-mini"] .hero:not([style*="background"]),
html[data-shell="wechat-mini"] .hero-banner:not([style*="background"]) {
  background: linear-gradient(135deg, var(--brand, #008034), color-mix(in srgb, var(--brand, #008034) 70%, #000)) !important;
}

/* ==========================================================================
   PATTERN 2 — SECTION HEADERS.
   GPCL section titles (赛事信息 / 赛事规则): bold ~16px, left-aligned, with a
   SHORT brand-colour underline bar beneath the text + a grey gap above.
   ========================================================================== */
html[data-shell="wechat-mini"] section > h2,
html[data-shell="wechat-mini"] article > h2,
html[data-shell="wechat-mini"] .card > h2,
html[data-shell="wechat-mini"] .blk h2,
html[data-shell="wechat-mini"] .blk-card > h2,
html[data-shell="wechat-mini"] .section-title,
html[data-shell="wechat-mini"] .blk-title,
html[data-shell="wechat-mini"] h2.title {
  position: relative;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  text-align: left;
  color: var(--wm-ink);
  margin: 0 0 14px;
  padding-bottom: 8px;
}
html[data-shell="wechat-mini"] section > h2::after,
html[data-shell="wechat-mini"] article > h2::after,
html[data-shell="wechat-mini"] .card > h2::after,
html[data-shell="wechat-mini"] .blk h2::after,
html[data-shell="wechat-mini"] .blk-card > h2::after,
html[data-shell="wechat-mini"] .section-title::after,
html[data-shell="wechat-mini"] .blk-title::after,
html[data-shell="wechat-mini"] h2.title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 24px;
  height: 3px;
  border-radius: 2px;
  background: var(--brand, #008034);
}
/* When a section header is a direct child of a top-level card, the grey gap
   above already comes from the card margin; when it's a bare block on the
   page, add the gap so titles breathe like GPCL's. */
html[data-shell="wechat-mini"] main > h2,
html[data-shell="wechat-mini"] .wrap > h2,
html[data-shell="wechat-mini"] main > .section-title,
html[data-shell="wechat-mini"] .wrap > .section-title {
  margin: 18px 16px 10px;
  font-size: 16px;
  font-weight: 700;
  position: relative;
  padding-bottom: 8px;
}
html[data-shell="wechat-mini"] main > h2::after,
html[data-shell="wechat-mini"] .wrap > h2::after,
html[data-shell="wechat-mini"] main > .section-title::after,
html[data-shell="wechat-mini"] .wrap > .section-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 24px;
  height: 3px;
  border-radius: 2px;
  background: var(--brand, #008034);
}

/* ==========================================================================
   PATTERN 3 — INFO-LIST CELLS (GPCL 比赛项目 / 比赛地点).
   White card whose rows are: a BRAND-TINTED rounded icon (40px, brand @12%)
   + a grey label over a bold value. Generous padding.
   We can't inject icon elements, so we paint the label/value pairs and — where
   a row carries a leading icon element — tint it. Targets common def/info rows.
   ========================================================================== */
html[data-shell="wechat-mini"] .info-row,
html[data-shell="wechat-mini"] .meta-row,
html[data-shell="wechat-mini"] .detail-row,
html[data-shell="wechat-mini"] dl > div,
html[data-shell="wechat-mini"] .info-list > li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-top: 0.5px solid var(--wm-hairline);
  min-height: 44px;
  box-sizing: border-box;
}
html[data-shell="wechat-mini"] .info-row:first-child,
html[data-shell="wechat-mini"] .meta-row:first-child,
html[data-shell="wechat-mini"] .detail-row:first-child,
html[data-shell="wechat-mini"] dl > div:first-child,
html[data-shell="wechat-mini"] .info-list > li:first-child {
  border-top: 0;
}
/* The grey label (dt / .label) sits left, muted; the bold value (dd / .value)
   sits right or below, ink-strong. */
html[data-shell="wechat-mini"] .info-row .label,
html[data-shell="wechat-mini"] .meta-row .label,
html[data-shell="wechat-mini"] .detail-row .label,
html[data-shell="wechat-mini"] dl dt {
  color: var(--wm-secondary);
  font-size: 13px;
  font-weight: 400;
  flex: 0 0 auto;
}
html[data-shell="wechat-mini"] .info-row .value,
html[data-shell="wechat-mini"] .meta-row .value,
html[data-shell="wechat-mini"] .detail-row .value,
html[data-shell="wechat-mini"] dl dd {
  color: var(--wm-ink);
  font-size: 15px;
  font-weight: 600;
  margin: 0;
  margin-left: auto;         /* push value to the right, GPCL-style */
  text-align: right;
}
/* Leading icon on an info row -> brand-tinted rounded tile (40px). Only when
   the row actually carries an element flagged as an icon. */
html[data-shell="wechat-mini"] .info-row > .icon,
html[data-shell="wechat-mini"] .info-row > .ico,
html[data-shell="wechat-mini"] .meta-row > .icon,
html[data-shell="wechat-mini"] .detail-row > .icon,
html[data-shell="wechat-mini"] .info-row > i[class*="icon"] {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--wm-brand-tint);
  color: var(--brand, #008034);
  font-size: 18px;
}

/* ==========================================================================
   PATTERN 4 — LIST-ITEM CELLS (GPCL player rows / match cards).
   White rounded cards, GENEROUS padding (16-18px), clear gaps, strong
   hierarchy: leading icon/avatar + BOLD primary line + grey secondary line +
   large right-aligned brand value/score. Roomy, not dense.
   ========================================================================== */
html[data-shell="wechat-mini"] .list-row,
html[data-shell="wechat-mini"] .match-card,
html[data-shell="wechat-mini"] .player-row,
html[data-shell="wechat-mini"] .result-row,
html[data-shell="wechat-mini"] .standing-row,
html[data-shell="wechat-mini"] .fixture,
html[data-shell="wechat-mini"] .card > .row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 16px;
  background: var(--wm-card-bg);
  border-radius: var(--wm-radius);
  margin: 10px 12px 0;
  box-sizing: border-box;
  min-height: 60px;
  box-shadow: none;
}
/* When these rows are stacked as siblings inside one card, the card already
   supplies the surround — flatten the per-row card so they read as cells with
   a hairline between them (GPCL's grouped-list look). */
html[data-shell="wechat-mini"] .card > .row + .row,
html[data-shell="wechat-mini"] .list > .list-row + .list-row,
html[data-shell="wechat-mini"] .list > .player-row + .player-row {
  margin-top: 0;
  border-top: 0.5px solid var(--wm-hairline);
  border-radius: 0;
}
/* Leading avatar / rank / icon. */
html[data-shell="wechat-mini"] .list-row > .avatar,
html[data-shell="wechat-mini"] .player-row > .avatar,
html[data-shell="wechat-mini"] .list-row > .rank,
html[data-shell="wechat-mini"] .player-row > .rank,
html[data-shell="wechat-mini"] .match-card > .icon,
html[data-shell="wechat-mini"] .list-row > .ico {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--wm-brand-tint);
  color: var(--brand, #008034);
  font-weight: 700;
  font-size: 16px;
  overflow: hidden;
}
html[data-shell="wechat-mini"] .list-row > .avatar img,
html[data-shell="wechat-mini"] .player-row > .avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* BOLD primary line + grey secondary line — the middle text column. */
html[data-shell="wechat-mini"] .list-row .primary,
html[data-shell="wechat-mini"] .player-row .name,
html[data-shell="wechat-mini"] .match-card .primary,
html[data-shell="wechat-mini"] .list-row .title,
html[data-shell="wechat-mini"] .fixture .teams {
  font-size: 15px;
  font-weight: 600;
  color: var(--wm-ink);
  line-height: 1.3;
}
html[data-shell="wechat-mini"] .list-row .secondary,
html[data-shell="wechat-mini"] .player-row .sub,
html[data-shell="wechat-mini"] .match-card .secondary,
html[data-shell="wechat-mini"] .list-row .sub,
html[data-shell="wechat-mini"] .fixture .when {
  font-size: 12.5px;
  font-weight: 400;
  color: var(--wm-secondary);
  line-height: 1.3;
  margin-top: 3px;
}
/* Large right-aligned brand value / score. */
html[data-shell="wechat-mini"] .list-row > .value,
html[data-shell="wechat-mini"] .player-row > .value,
html[data-shell="wechat-mini"] .match-card > .score,
html[data-shell="wechat-mini"] .list-row > .score,
html[data-shell="wechat-mini"] .standing-row > .points {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: 20px;
  font-weight: 700;
  color: var(--brand, #008034);
  line-height: 1;
  text-align: right;
}

/* ==========================================================================
   PATTERN 5 — TAGS / CHIPS (GPCL 局1 / TIME / 弃权 tags).
   Small brand rounded chips, white text, ~11px. Style STATUS/label chips.
   ========================================================================== */
html[data-shell="wechat-mini"] .tag,
html[data-shell="wechat-mini"] .chip,
html[data-shell="wechat-mini"] .badge,
html[data-shell="wechat-mini"] .pill.status,
html[data-shell="wechat-mini"] .status-pill,
html[data-shell="wechat-mini"] .label-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--brand, #008034);
  color: #fff !important;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.02em;
  border: 0;
  vertical-align: middle;
  white-space: nowrap;
}
/* A soft (tinted) chip variant for non-primary tags — brand text on tint. */
html[data-shell="wechat-mini"] .tag.soft,
html[data-shell="wechat-mini"] .chip.soft,
html[data-shell="wechat-mini"] .badge.soft,
html[data-shell="wechat-mini"] .tag.is-muted {
  background: var(--wm-brand-tint);
  color: var(--brand, #008034) !important;
}

/* ==========================================================================
   PATTERN 6 — BUTTONS (GPCL 比赛实况 CTA).
   Full-ish, brand bg, white text, 8px radius, bold. Primary CTAs only.
   (Extends the v2 primary-button rule; keep it conservative — no bare .btn
   restyle that would repaint secondary/ghost buttons.)
   ========================================================================== */
html[data-shell="wechat-mini"] .btn-primary,
html[data-shell="wechat-mini"] button.primary,
html[data-shell="wechat-mini"] .button.primary,
html[data-shell="wechat-mini"] .btn.primary,
html[data-shell="wechat-mini"] [type="submit"].btn,
html[data-shell="wechat-mini"] .cta {
  background: var(--brand, #008034) !important;
  border: 0 !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-size: 15px;
  font-weight: 600;
  padding: 11px 18px;
  line-height: 1.3;
  box-shadow: none;
}
html[data-shell="wechat-mini"] .btn-primary:active,
html[data-shell="wechat-mini"] button.primary:active,
html[data-shell="wechat-mini"] .btn.primary:active,
html[data-shell="wechat-mini"] .cta:active {
  filter: brightness(0.94);
}
/* Full-width block CTA (GPCL's page-bottom buttons span the card). */
html[data-shell="wechat-mini"] .btn-primary.block,
html[data-shell="wechat-mini"] .btn-block.primary,
html[data-shell="wechat-mini"] .cta.block {
  display: block;
  width: 100%;
  text-align: center;
}

/* ==========================================================================
   PATTERN 7 — SUB-TABS (GPCL 四分之一决赛 / 半决赛 / 决赛).
   Underline tab row: inactive grey, active brand text + brand underline.
   Style horizontal tab/filter rows. Paint-only; layout untouched.
   ========================================================================== */
html[data-shell="wechat-mini"] .tabs,
html[data-shell="wechat-mini"] .filter-tabs,
html[data-shell="wechat-mini"] .seg,
html[data-shell="wechat-mini"] [role="tablist"],
html[data-shell="wechat-mini"] .subtabs {
  display: flex;
  align-items: stretch;
  gap: 4px;
  background: var(--wm-card-bg);
  border-bottom: 0.5px solid var(--wm-hairline);
  padding: 0 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
html[data-shell="wechat-mini"] .tabs > a,
html[data-shell="wechat-mini"] .tabs > button,
html[data-shell="wechat-mini"] .filter-tabs > a,
html[data-shell="wechat-mini"] .filter-tabs > button,
html[data-shell="wechat-mini"] .seg > *,
html[data-shell="wechat-mini"] [role="tablist"] > [role="tab"],
html[data-shell="wechat-mini"] .subtabs > * {
  position: relative;
  flex: 0 0 auto;
  padding: 12px 10px;
  background: transparent;
  border: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--wm-secondary);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
/* Active sub-tab -> brand text + short brand underline. Cover the common
   active markers HKPL uses: .active, .is-active, aria-selected, .current. */
html[data-shell="wechat-mini"] .tabs > .active,
html[data-shell="wechat-mini"] .tabs > .is-active,
html[data-shell="wechat-mini"] .tabs > [aria-selected="true"],
html[data-shell="wechat-mini"] .filter-tabs > .active,
html[data-shell="wechat-mini"] .filter-tabs > .is-active,
html[data-shell="wechat-mini"] .seg > .active,
html[data-shell="wechat-mini"] .seg > .is-active,
html[data-shell="wechat-mini"] [role="tablist"] > [role="tab"][aria-selected="true"],
html[data-shell="wechat-mini"] .subtabs > .active,
html[data-shell="wechat-mini"] .subtabs > .current {
  color: var(--brand, #008034);
  font-weight: 700;
}
html[data-shell="wechat-mini"] .tabs > .active::after,
html[data-shell="wechat-mini"] .tabs > .is-active::after,
html[data-shell="wechat-mini"] .tabs > [aria-selected="true"]::after,
html[data-shell="wechat-mini"] .filter-tabs > .active::after,
html[data-shell="wechat-mini"] .filter-tabs > .is-active::after,
html[data-shell="wechat-mini"] .seg > .active::after,
html[data-shell="wechat-mini"] .seg > .is-active::after,
html[data-shell="wechat-mini"] [role="tablist"] > [role="tab"][aria-selected="true"]::after,
html[data-shell="wechat-mini"] .subtabs > .active::after,
html[data-shell="wechat-mini"] .subtabs > .current::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 24px;
  height: 3px;
  border-radius: 2px;
  background: var(--brand, #008034);
}

/* ==========================================================================
   PATTERN 8 — WHITESPACE + TYPE.
   Generous spacing, secondary text #888, PingFang stack, big touch targets,
   few heavy borders. Most is applied inline above; a few global nudges here.
   ========================================================================== */
/* Strip heavy borders that fight the WeUI hairline-and-gap separation model,
   but ONLY on our own painted cells (not arbitrary content — conservative). */
html[data-shell="wechat-mini"] .list-row,
html[data-shell="wechat-mini"] .match-card,
html[data-shell="wechat-mini"] .player-row,
html[data-shell="wechat-mini"] .info-row,
html[data-shell="wechat-mini"] .meta-row {
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
}
/* Comfortable body line-height + tap targets on interactive cells. */
html[data-shell="wechat-mini"] .list-row,
html[data-shell="wechat-mini"] .player-row,
html[data-shell="wechat-mini"] .match-card,
html[data-shell="wechat-mini"] .info-row {
  line-height: 1.4;
}
/* Links inside cards inherit ink unless clearly a CTA — GPCL keeps body links
   quiet, not underlined-blue. */
html[data-shell="wechat-mini"] .card a:not(.btn):not(.btn-primary):not(.cta):not(.tag):not(.chip),
html[data-shell="wechat-mini"] .list-row a:not(.btn):not(.cta) {
  color: inherit;
  text-decoration: none;
}

html[data-shell="wechat-mini"] .wm-grid-ic svg { width:26px; height:26px; display:block; }

/* WECHAT-CONTENT-FIX (2026-09-05) */
/* ============================================================================
   HKPL SHELL: "wechat-mini" — CONTENT FIX (v5)
   Appended AFTER shell-wechat-mini.css (v4). Everything scoped to
   html[data-shell="wechat-mini"].

   WHY THIS FILE EXISTS
   --------------------
   v4 gave the page-chrome (grey WeUI page, white cards, brand top bar,
   capsule, function-icon grid home, bottom tabs) — those are GOOD and are
   left untouched. But its DATA-page rules targeted GUESSED class names
   (.standing-row, .player-row, .match-card, .info-row …) that do NOT exist
   in HKPL's real markup, so standings stayed a dense 700px web table and the
   schedule/results rows stayed raw.

   This file targets the REAL, live-inspected HKPL classes and paints them
   into GPCL-style spacious brand cells:
     STANDINGS  -> table.stand-tbl / tr.rank-podium / td.font-display+.medal /
                   td.text-ink(crest+a.hover:text-hkpl-600) / td.stat-cell /
                   td.col-sec / span.fg-dot.fg-w|.fg-l
     SCHED/RES  -> a.mcard-trigger / b.text-hkpl-600(win)+b.text-gray-400(loss)+
                   span.text-gray-300(sep) / per-game div.flex.items-center.gap-2
                   (span.uppercase.w-8 + span.flex-1.text-right + span.tabular-nums)
                   / span.font-mono.text-gray-500 (#id)

   RULES (unchanged from the shell contract)
   -----------------------------------------
   - Scoped to html[data-shell="wechat-mini"]; brand via var(--brand,#008034)
     (white-labelled — NEVER GPCL yellow).
   - Paint-only: bg / color / radius / padding / margin / borders / pseudo.
     No restructuring of the wrapped markup. (Table columns are HIDDEN, not
     re-laid-out — see the STANDINGS WIDTH DECISION below.)
   - Conservative selectors: explicit real class targets. The two generic
     Tailwind combos (game rows) are fenced behind :has() so only rows that
     actually carry a game-label are touched — no blanket .flex repaint.
   ========================================================================== */

/* Local aliases that fall back to the shell tokens set by v4 (and to sane
   literals if this file is ever loaded standalone). */
html[data-shell="wechat-mini"] {
  --wcf-brand:    var(--brand, #008034);
  --wcf-hairline: var(--wm-hairline, #e5e5e5);
  --wcf-ink:      var(--wm-ink, #171717);
  --wcf-sec:      var(--wm-secondary, #888888);
  --wcf-tint:     var(--wm-brand-tint, rgba(0, 128, 52, 0.10));
  --wcf-card:     var(--wm-card-bg, #ffffff);
  --wcf-radius:   var(--wm-radius, 8px);
}

/* ==========================================================================
   STANDINGS — table.stand-tbl

   STANDINGS WIDTH DECISION (the 700px overflow, handled explicitly):
   The table ships `min-w-[700px]`, which blows past the 480px phone frame.
   Fix is two-layered so data is never lost AND the common case fits with no
   scroll:
     1. Neutralise the forced width: min-width:0 + width:100% on the table, so
        it tries to fit the frame instead of forcing 700px.
     2. HIDE the site's own secondary-stat columns (`.col-sec`) on the narrow
        frame. `.col-sec` marks th AND td of a column, so hiding by that class
        keeps header/body alignment intact. What remains — rank, team, the
        primary stats, PTS, form — reads as a spacious ranked list.
     3. SAFETY NET: the wrapper wrapping the table is set overflow-x:auto via
        :has(), so if the remaining columns STILL exceed the frame on some
        device, the table scrolls horizontally rather than breaking the frame.
        Nothing is clipped-and-lost; worst case it's a scroll.
   Graceful degradation: on an old WebView without :has(), step 3 is skipped
   but steps 1+2 still make it (near-)fit. Nothing breaks.
   ========================================================================== */

/* (3) horizontal-scroll safety net on whatever element directly wraps the
   table. :has() is supported on all current iOS WKWebView / WeChat XWeb;
   where absent it simply no-ops (steps 1+2 carry the fit). */
html[data-shell="wechat-mini"] *:has(> table.stand-tbl) {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--wcf-radius);
}

/* (1) neutralise min-w-[700px] and let the table fit the frame */
html[data-shell="wechat-mini"] table.stand-tbl {
  /* TABLE-SCROLL-FIX (2026-09-06): was min-width:0!important;width:100%!important which crushed the
     columns into the frame and gave the :has() scroller nothing to scroll. Let the table size to
     content (col-sec already hidden below) so the wrapper scrolls, like webview-mobile. */
  border-collapse: collapse;
  background: var(--wcf-card);
  font-size: 13px;
  color: var(--wcf-ink);
}

/* (2) hide secondary columns on the narrow frame (th + td together) */
html[data-shell="wechat-mini"] table.stand-tbl .col-sec {
  display: none !important;
}

/* Comfortable row height + WeUI hairlines instead of a dense grid. */
html[data-shell="wechat-mini"] table.stand-tbl th,
html[data-shell="wechat-mini"] table.stand-tbl td {
  padding-top: 14px !important;
  padding-bottom: 14px !important;
  vertical-align: middle;
  border: 0;
  border-bottom: 0.5px solid var(--wcf-hairline);
}
html[data-shell="wechat-mini"] table.stand-tbl thead th {
  padding-top: 11px !important;
  padding-bottom: 11px !important;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--wcf-sec);
  background: transparent;
}
html[data-shell="wechat-mini"] table.stand-tbl tbody tr:last-child td {
  border-bottom: 0;
}

/* Rank cell (td.px-4.py-3.font-display) — compact centred rank. */
html[data-shell="wechat-mini"] table.stand-tbl td.font-display {
  width: 46px;
  text-align: center;
  font-weight: 700;
  color: var(--wcf-ink);
}

/* Podium medals (span.medal.medal-1|-2|-3) — small circular chip. Conventional
   gold/silver/bronze (podium colours are not brand-specific). */
html[data-shell="wechat-mini"] table.stand-tbl .medal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
}
html[data-shell="wechat-mini"] table.stand-tbl .medal-1 { background: #eab308; } /* gold   */
html[data-shell="wechat-mini"] table.stand-tbl .medal-2 { background: #9ca3af; } /* silver */
html[data-shell="wechat-mini"] table.stand-tbl .medal-3 { background: #b45309; } /* bronze */

/* Team cell (td.font-bold.text-ink) — crest + bold ink name. */
html[data-shell="wechat-mini"] table.stand-tbl td.text-ink {
  color: var(--wcf-ink);
  white-space: nowrap;
}
html[data-shell="wechat-mini"] table.stand-tbl td.text-ink img {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: middle;
  margin-right: 8px;
  border: 0.5px solid var(--wcf-hairline);
}
/* team-name link: GPCL keeps names quiet ink (not a coloured link).
   NB: `hover:text-hkpl-600` — the colon is CSS-escaped. */
html[data-shell="wechat-mini"] table.stand-tbl a.hover\:text-hkpl-600 {
  color: var(--wcf-ink) !important;
  font-weight: 700;
  text-decoration: none;
}

/* Primary stat cells (td.stat-cell) — centred, tabular, bold. */
html[data-shell="wechat-mini"] table.stand-tbl td.stat-cell {
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--wcf-ink);
  white-space: nowrap;
}
/* PTS emphasis — GPCL's big right-aligned brand number.
   ASSUMPTION (flagged): PTS is the final stat column, so the last stat-cell
   in DOM order is PTS. If a dedicated PTS class/column exists, retarget this
   rule to it — :last-of-type here matches only when the last <td> is a
   stat-cell, so it silently no-ops if the form column trails PTS. */
html[data-shell="wechat-mini"] table.stand-tbl td.stat-cell:last-of-type {
  color: var(--wcf-brand) !important;
  font-weight: 800;
  font-size: 15px;
}

/* Form dots (span.fg-dot.fg-w win / .fg-l loss) — small round result pips. */
html[data-shell="wechat-mini"] table.stand-tbl .fg-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin: 0 1px;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  vertical-align: middle;
  background: #c8ccd0; /* default / draw pip */
}
html[data-shell="wechat-mini"] table.stand-tbl .fg-dot.fg-w { background: var(--wcf-brand); }
html[data-shell="wechat-mini"] table.stand-tbl .fg-dot.fg-l { background: #d9636e; }
html[data-shell="wechat-mini"] table.stand-tbl .fg-dot.fg-d { background: #e0a83d; }

/* ==========================================================================
   SCHEDULE / RESULTS
   ========================================================================== */

/* Green day / division headers -> GPCL underlined section header.
   NOTE (flagged): the brief named these "green day/division headers" but did
   NOT give their class. Targeting the plausible semantic names + the likely
   green Tailwind banner utilities. If none match, these no-op — hand me the
   real header class and I'll wire it (v4 already styles h2/.section-title).
   Kept restrained: no blanket green-utility repaint. */
html[data-shell="wechat-mini"] .sched-day,
html[data-shell="wechat-mini"] .match-day,
html[data-shell="wechat-mini"] .day-header,
html[data-shell="wechat-mini"] .division-header,
html[data-shell="wechat-mini"] .round-header {
  position: relative;
  margin: 18px 12px 8px;
  padding: 0 0 8px;
  background: transparent !important;
  color: var(--wcf-ink) !important;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  border-radius: 0;
}
html[data-shell="wechat-mini"] .sched-day::after,
html[data-shell="wechat-mini"] .match-day::after,
html[data-shell="wechat-mini"] .day-header::after,
html[data-shell="wechat-mini"] .division-header::after,
html[data-shell="wechat-mini"] .round-header::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 24px;
  height: 3px;
  border-radius: 2px;
  background: var(--wcf-brand);
}

/* Player / team links that open a match card (a.mcard-trigger) —
   quiet bold ink, not a coloured link. */
html[data-shell="wechat-mini"] a.mcard-trigger {
  color: var(--wcf-ink) !important;
  font-weight: 600;
  text-decoration: none;
}
html[data-shell="wechat-mini"] a.mcard-trigger:active {
  opacity: 0.6;
}

/* Match top-line scores.
   winner b.text-hkpl-600 -> big brand number; loser b.text-gray-400 -> muted.
   Restricted to <b> so only score numbers are recoloured, not body text. */
html[data-shell="wechat-mini"] b.text-hkpl-600 {
  color: var(--wcf-brand) !important;
  font-weight: 800;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}
html[data-shell="wechat-mini"] b.text-gray-400 {
  color: var(--wcf-sec) !important;
  font-weight: 700;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}
/* Score separator (span.text-gray-300) — only the one sitting between two
   score <b>s (sibling-scoped so unrelated gray-300 spans are left alone). */
html[data-shell="wechat-mini"] b.text-hkpl-600 + span.text-gray-300,
html[data-shell="wechat-mini"] b.text-gray-400 + span.text-gray-300 {
  color: #cfcfcf !important;
  padding: 0 5px;
  font-weight: 400;
}

/* Per-game score rows (div.flex.items-center.gap-2).
   FENCED with :has() to only the flex rows that actually contain a game-label
   span — a generic .flex.items-center.gap-2 repaint would hit rows all over
   the app, so we require the distinctive leading game-label. On a WebView
   without :has() these rows keep their native spacing (no breakage). */
html[data-shell="wechat-mini"] div.flex.items-center.gap-2:has(> span.uppercase.w-8) {
  padding: 9px 4px;
  border-top: 0.5px solid var(--wcf-hairline);
}
/* game label (span.uppercase.text-gray-400.w-8) e.g. "G1" */
html[data-shell="wechat-mini"] span.uppercase.w-8.text-gray-400 {
  color: var(--wcf-sec) !important;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
}
/* side / player line (span.flex-1.text-right.text-gray-600) */
html[data-shell="wechat-mini"] span.flex-1.text-right.text-gray-600 {
  color: var(--wcf-ink) !important;
  font-size: 13px;
}
/* per-game score (span.shrink-0.tabular-nums.font-bold) */
html[data-shell="wechat-mini"] span.shrink-0.tabular-nums.font-bold {
  color: var(--wcf-ink) !important;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Match id (span.font-mono.text-gray-500, e.g. "#760") — de-emphasise, keep
   for support reference rather than hard-hiding. */
html[data-shell="wechat-mini"] span.font-mono.text-gray-500 {
  opacity: 0.4;
  font-size: 10px;
  letter-spacing: 0;
}

/* HKPL brand header on the WeChat mini-program home. */
html[data-shell="wechat-mini"] .wm-brand { display:flex; align-items:center; gap:10px; padding:14px 14px 2px; }
html[data-shell="wechat-mini"] .wm-brand-logo { width:38px; height:38px; object-fit:contain; border-radius:9px; }
html[data-shell="wechat-mini"] .wm-brand-name { display:flex; flex-direction:column; line-height:1.15; }
html[data-shell="wechat-mini"] .wm-brand-name b { font-size:18px; font-weight:800; letter-spacing:.02em; color:var(--wm-ink,#171717); }
html[data-shell="wechat-mini"] .wm-brand-name span { font-size:11px; color:var(--wm-secondary,#888); }

/* ===== v472: WeChat webview reality fix — in a real WeChat H5 webview, WeChat draws its OWN top chrome,
   so our simulated mini-program capsule (••• ◎) collides with it. Hide the fake capsule; keep the green
   title bar + grey/white cards + bottom tabBar (= clean mini-program-style page). Also honor the top
   safe-area so the bar sits below the status bar/notch. ===== */
html[data-shell="wechat-mini"] .wm-capsule { display:none !important; }




/* FIGURES-VISIBLE-COLS (2026-09-06): keep P/W/L/Pts visible on load; truncate the team name. */
html[data-shell="wechat-mini"] table.stand-tbl { min-width: 0; width: 100%; }
html[data-shell="wechat-mini"] table.stand-tbl td:nth-child(2),
html[data-shell="wechat-mini"] table.stand-tbl th:nth-child(2) { max-width: 42vw; }
html[data-shell="wechat-mini"] table.stand-tbl td:nth-child(2) > span { min-width: 0; }
html[data-shell="wechat-mini"] table.stand-tbl td:nth-child(2) a { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }

/* ==========================================================================
   NATIVE-FEEL SWEEP (2026-09-08) — stop the mini-program reading as "a website
   squeezed to phone width". Additive, scoped, idempotent. Verified against the
   live UAT DOM via CDP injection (home + Standings). See notes per block.
   ========================================================================== */

/* 1. WEB ARTIFACTS the shell forgot to hide (root of the double bottom tab bar
   and the floating gear over the green bar). #hkpl-tabbar = app.html's OWN
   bottom tab bar, which stacked UNDER our #wm-tabbar (two bars). .shell-tools-btn
   = the ⚙ launcher leaking top-right. #pw-nudge / #qa-switch-bar / .hkpl-bug-fab
   = web nudge form / debug bar / bug FAB — no place in a mini-program.
   L5-verified: #hkpl-tabbar was z45 under #wm-tabbar; gear was at (260,3). */
html[data-shell="wechat-mini"] #hkpl-tabbar,
html[data-shell="wechat-mini"] button.shell-tools-btn,
html[data-shell="wechat-mini"] .shell-tools-btn,
html[data-shell="wechat-mini"] #pw-nudge,
html[data-shell="wechat-mini"] #qa-switch-bar,
html[data-shell="wechat-mini"] button.hkpl-bug-fab,
html[data-shell="wechat-mini"] .hkpl-bug-fab {
  display: none !important;
}

/* 2. Content hosts on the AUTHENTICATED member home (app.html) that the card
   rule misses (they're #id divs, not main>section/article/.card): give them the
   white WeUI cell treatment on the grey page. Paint only — no overflow (keeps
   dropdowns), no layout change.
   NOTE (proof level L2, not visually verified by me): these hosts sit behind
   the sandbox login, which the fresh CDP tab does not auto-enter, so I styled
   them from the operator's DOM notes, not a screenshot. If #spine-host turns
   out to wrap MULTIPLE logical groups, prefer carding its children instead of
   the host — operator to eyeball on the authed home. */
html[data-shell="wechat-mini"] main > #team-identity-host,
html[data-shell="wechat-mini"] main > #spine-host,
html[data-shell="wechat-mini"] main > .quick-actions,
html[data-shell="wechat-mini"] main > [data-quick-actions] {
  background: var(--wm-card-bg) !important;
  border-radius: var(--wm-radius);
  margin: var(--wm-gap) var(--wm-gap) 0 !important;
  padding: 14px 16px;
  box-shadow: none;
  box-sizing: border-box;
}

/* 3. LOGGED-OUT home (section#hkpl-basic-landing + #live-ticker-bar sit at BODY
   level below the injected #wm-home grid — main is null on the landing, so the
   card rule never reaches them and they read as a full-bleed web scroll).
   Inset the black news ticker and round the hero band so they float as WeUI
   cells. We KEEP the landing's own px-5 gutter (don't zero it) so the inner
   buttons/stats/sponsors stay inset. L5-verified on the logged-out home. */
html[data-shell="wechat-mini"] #live-ticker-bar {
  margin: var(--wm-gap) var(--wm-gap) 0 !important;
  border-radius: var(--wm-radius);
  overflow: hidden;
  padding: 8px 12px !important;
}
html[data-shell="wechat-mini"] #hkpl-basic-landing > div:first-child {
  margin: var(--wm-gap) var(--wm-gap) 0 !important;
  border-radius: var(--wm-radius);
  overflow: hidden;
}

/* ==========================================================================
   APPROVED MINI-PROGRAM HOME (2026-09-08) — replicate mini_mockup.html.
   Adds: left-aligned brand bar on home, WeChat capsule (per approved design),
   poster banner + carousel dots, and the Upcoming / Standings data cards.
   Removes zoom + the last web clutter. Scoped to html[data-shell="wechat-mini"];
   brand via var(--brand,#0a9d63) — never hardcode a tenant brand.
   ========================================================================== */

/* Approved design shows the simulated WeChat capsule in the green bar
   (overrides the v472 hide). It reads as a mini-program even in the H5 webview. */
/* CAPSULE-WECHAT-HIDE-V2 (2026-09-09, shell UAT): show the simulated ··· ⊙ capsule for the mini-program
   look EXCEPT inside the real WeChat client, where WeChat draws its OWN native capsule in this corner and
   the two collide. shell-wechat-mini.js adds html.in-wechat when the UA is MicroMessenger; there this rule
   no longer applies, so the v472 hide (.wm-capsule{display:none!important}) wins. */
html[data-shell="wechat-mini"]:not(.in-wechat) #wm-bar .wm-capsule { display: flex !important; }

/* HOME: brand "HKPL" reads LEFT-aligned in the green bar (not a centred title). */
html[data-shell="wechat-mini"] #wm-bar.wm-bar-home { justify-content: flex-start; padding-left: 16px; }
html[data-shell="wechat-mini"] #wm-bar.wm-bar-home .wm-title {
  max-width: 62%; text-align: left; font-size: 19px; font-weight: 800; letter-spacing: .02em;
}

/* Brand logo sits on a white chip like the mockup. */
html[data-shell="wechat-mini"] .wm-brand-logo { background: #fff; }

/* --- (4) POSTER BANNER --------------------------------------------------- */
html[data-shell="wechat-mini"] .wm-banner {
  display: block; position: relative; overflow: hidden; text-decoration: none;
  margin: 12px 12px 0; padding: 18px 16px; border-radius: 16px; color: #fff;
  background: linear-gradient(135deg, var(--brand, #0a9d63), color-mix(in srgb, var(--brand, #0a9d63) 58%, #000));
  box-shadow: 0 6px 16px color-mix(in srgb, var(--brand, #0a9d63) 30%, transparent);
}
@supports not (background: color-mix(in srgb, red, white)) {
  html[data-shell="wechat-mini"] .wm-banner { background: linear-gradient(135deg, #0a9d63, #046b41); box-shadow: 0 6px 16px rgba(4,107,65,.28); }
}
html[data-shell="wechat-mini"] .wm-banner-blob {
  position: absolute; right: -24px; top: -24px; width: 130px; height: 130px;
  border-radius: 50%; background: rgba(255,255,255,.10); z-index: 0;
}
html[data-shell="wechat-mini"] .wm-banner > *:not(.wm-banner-blob) { position: relative; z-index: 1; }
html[data-shell="wechat-mini"] .wm-banner-tag {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 9px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  background: rgba(255,255,255,.22); padding: 3px 10px; border-radius: 999px;
}
html[data-shell="wechat-mini"] .wm-banner-dot { width: 6px; height: 6px; border-radius: 50%; background: #fff; display: inline-block; }
html[data-shell="wechat-mini"] .wm-banner-h3 { margin: 0 0 3px; font-size: 22px; font-weight: 800; color: #fff; }
/* FIX: pull the CTA up so it sits directly beneath the banner text with balanced padding
   (was a 13px gap on top of the banner's own bottom padding). */
html[data-shell="wechat-mini"] .wm-banner-p { margin: 0 0 8px; font-size: 13px; opacity: .92; color: #fff; }
html[data-shell="wechat-mini"] .wm-banner-cta {
  display: inline-flex; align-items: center; gap: 6px; background: #fff;
  color: color-mix(in srgb, var(--brand, #0a9d63) 70%, #000); font-weight: 800; font-size: 14px;
  padding: 9px 20px; border-radius: 999px;
}
@supports not (color: color-mix(in srgb, red, white)) {
  html[data-shell="wechat-mini"] .wm-banner-cta { color: #046b41; }
}

/* Carousel dots (decorative, matches the approved design). */
html[data-shell="wechat-mini"] .wm-dots { display: flex; gap: 4px; justify-content: center; margin: 8px 0 0; }
html[data-shell="wechat-mini"] .wm-dots .wm-dot { width: 6px; height: 6px; border-radius: 50%; background: #ccc; }
html[data-shell="wechat-mini"] .wm-dots .wm-dot.on { width: 14px; border-radius: 3px; background: var(--brand, #0a9d63); }

/* Nudge the function grid down so it clears the dots like the mockup. */
html[data-shell="wechat-mini"] #wm-home .wm-grid { margin-top: 12px; }

/* --- (FIX) MATCHES section — compact WeUI match cards (parity with desktop) ------ */
html[data-shell="wechat-mini"] .wm-matches { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
html[data-shell="wechat-mini"] .wm-mcard {
  background: var(--wm-card-bg, #fff); border-radius: 12px; padding: 11px 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,.05); text-decoration: none; color: var(--wm-ink, #111); display: block;
}
html[data-shell="wechat-mini"] .wm-mcard-meta { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--wm-secondary, #888); font-weight: 700; margin-bottom: 8px; }
html[data-shell="wechat-mini"] .wm-mcard-live { color: #ff3b30; font-weight: 800; display: inline-flex; align-items: center; gap: 4px; }
html[data-shell="wechat-mini"] .wm-mcard-live i { width: 6px; height: 6px; border-radius: 50%; background: #ff3b30; display: inline-block; }
html[data-shell="wechat-mini"] .wm-mteam { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
html[data-shell="wechat-mini"] .wm-mlg { width: 22px; height: 22px; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 900; font-size: 10px; flex: 0 0 auto; overflow: hidden; }
html[data-shell="wechat-mini"] .wm-mlg img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
html[data-shell="wechat-mini"] .wm-mnm { flex: 1; font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-shell="wechat-mini"] .wm-msc { font-weight: 900; font-size: 16px; font-variant-numeric: tabular-nums; flex: 0 0 auto; }

/* --- (6)(7) DATA CARDS (Upcoming / Standings) ---------------------------- */
html[data-shell="wechat-mini"] #wm-home .wm-card {
  background: var(--wm-card-bg, #fff); border-radius: 14px; margin: 12px 12px 0; overflow: hidden;
}
html[data-shell="wechat-mini"] .wm-card-hd {
  display: flex; align-items: center; justify-content: space-between; padding: 15px 16px 9px;
}
html[data-shell="wechat-mini"] .wm-card-hd b { font-size: 16px; font-weight: 700; color: var(--wm-ink, #171717); }
html[data-shell="wechat-mini"] .wm-card-more { font-size: 13px; color: var(--wm-secondary, #888); text-decoration: none; }
html[data-shell="wechat-mini"] .wm-card-bd { padding: 0 16px 8px; }
html[data-shell="wechat-mini"] .wm-empty { padding: 26px 8px; text-align: center; color: #aaa; font-size: 13px; }

/* Standings rows */
html[data-shell="wechat-mini"] .wm-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0; border-top: .5px solid var(--wm-hairline, #ececec); font-size: 14.5px;
}
html[data-shell="wechat-mini"] .wm-row:first-child { border-top: 0; }
html[data-shell="wechat-mini"] .wm-row-l { display: inline-flex; align-items: center; min-width: 0; }
html[data-shell="wechat-mini"] .wm-row-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--wm-ink, #171717); }
html[data-shell="wechat-mini"] .wm-row-pts { font-weight: 800; color: var(--wm-ink, #171717); font-variant-numeric: tabular-nums; padding-left: 10px; flex: 0 0 auto; }
html[data-shell="wechat-mini"] .wm-rk {
  width: 22px; height: 22px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 12px; margin-right: 11px; flex: 0 0 auto;
  background: var(--wm-brand-tint, rgba(10,157,99,.12)); color: var(--brand, #0a9d63);
}
html[data-shell="wechat-mini"] .wm-rk.g1 { background: #f0b90b22; color: #c08a00; }
html[data-shell="wechat-mini"] .wm-rk.g2 { background: #9aa7b422; color: #6b7684; }
html[data-shell="wechat-mini"] .wm-rk.g3 { background: #cd7f3222; color: #a4622a; }

/* Upcoming fixture rows */
html[data-shell="wechat-mini"] .wm-fx {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 0; border-top: .5px solid var(--wm-hairline, #ececec); font-size: 14px;
}
html[data-shell="wechat-mini"] .wm-fx:first-child { border-top: 0; }
html[data-shell="wechat-mini"] .wm-fx-teams { color: var(--wm-ink, #171717); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-shell="wechat-mini"] .wm-fx-when { color: var(--wm-secondary, #888); font-size: 12.5px; flex: 0 0 auto; }

/* --- Hide zoom controls (requirement 2a) + remaining web clutter --------- */
html[data-shell="wechat-mini"] #hkpl-fs-pill,
html[data-shell="wechat-mini"] .fs-pill,
html[data-shell="wechat-mini"] .hkpl-fs-label,
html[data-shell="wechat-mini"] #hkpl-basic-landing,
html[data-shell="wechat-mini"] #live-ticker-bar {
  display: none !important;
}

/* ==========================================================================
   MINI HOME (2026-09-08) — the APPROVED WeChat mini-program home
   (scratchpad/mini_mockup2.png), built by shell-wechat-mini.js (#wm-home) from
   the shared HKPLC.* builders. Scoped to html[data-shell="wechat-mini"].
   ========================================================================== */

/* When the mini home is active, suppress leaked web chrome (keep #hkpl-fs-pill).
   #hkpl-basic-landing is the standard home content, replaced by #wm-home. */
html[data-shell="wechat-mini"].wm-home-active #hkpl-basic-landing,
html[data-shell="wechat-mini"].wm-home-active #live-ticker-bar,
html[data-shell="wechat-mini"].wm-home-active #live-ticker2,
html[data-shell="wechat-mini"].wm-home-active #hkpl-tabbar,
html[data-shell="wechat-mini"].wm-home-active .shell-tools-btn,
html[data-shell="wechat-mini"].wm-home-active #pw-nudge,
html[data-shell="wechat-mini"].wm-home-active #qa-switch-bar,
html[data-shell="wechat-mini"].wm-home-active .hkpl-bug-fab {
  display: none !important;
}
html[data-shell="wechat-mini"].wm-home-active main { padding: 0 !important; margin: 0 !important; }
html[data-shell="wechat-mini"] #wm-home { padding: 0 0 14px; }

/* photo banner (poster) — pickleball court photo, green wash, lime CTA */
html[data-shell="wechat-mini"] .wm-banner {
  position: relative; display: block; height: 168px; margin: 0 12px 12px;
  border-radius: 16px; overflow: hidden; color: #fff; text-decoration: none;
  box-shadow: 0 8px 20px -8px rgba(4,45,27,.4);
}
html[data-shell="wechat-mini"] .wm-banner-bg {
  position: absolute; inset: 0;
  background-image: url('/cdn/gcs/images/home_banner.jpg');
  background-size: cover; background-position: center 30%; background-color: #0e5a3a;
}
html[data-shell="wechat-mini"] .wm-banner-ov {
  position: absolute; inset: 0;
  background: linear-gradient(115deg, rgba(5,61,36,.9) 8%, rgba(6,58,35,.55) 55%, rgba(10,160,101,.18) 100%);
}
html[data-shell="wechat-mini"] .wm-banner-in {
  position: absolute; inset: 0; padding: 16px 17px;
  display: flex; flex-direction: column; justify-content: center;
}
html[data-shell="wechat-mini"] .wm-banner-tag {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  font-size: 11px; font-weight: 800; letter-spacing: .05em; margin-bottom: 8px;
  background: rgba(255,255,255,.16); border: .5px solid rgba(255,255,255,.28);
  padding: 3px 10px; border-radius: 999px;
}
html[data-shell="wechat-mini"] .wm-banner-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--lime, #c6f24a); }
html[data-shell="wechat-mini"] .wm-banner-h { display: block; font-size: 23px; font-weight: 900; letter-spacing: -.02em; line-height: 1; }
html[data-shell="wechat-mini"] .wm-banner-p { display: block; font-size: 12.5px; opacity: .92; margin-top: 3px; }
html[data-shell="wechat-mini"] .wm-banner-cta {
  align-self: flex-start; margin-top: 11px; background: var(--lime, #c6f24a);
  color: var(--brand-d, #053d24); font-weight: 800; font-size: 13px;
  padding: 8px 16px; border-radius: 999px;
}

/* section visibility gate (until live data returns) */
html[data-shell="wechat-mini"] #wm-home .wm-sec-hidden { display: none; }

/* the shared scorebug + standings sit as white cards on the grey page; nudge the
   section header + card gutters to the mini's 12px rhythm. */
html[data-shell="wechat-mini"] #wm-home .hkplc-sh { margin: 16px 16px 9px; }
html[data-shell="wechat-mini"] #wm-home .hkplc-sh h2 { font-size: 17px; }
html[data-shell="wechat-mini"] #wm-home .hkplc-live { margin: 0 12px; border-radius: 16px; box-shadow: 0 2px 10px -4px rgba(4,45,27,.18); }
html[data-shell="wechat-mini"] #wm-home .wm-stand-wrap { padding: 0 12px; }
html[data-shell="wechat-mini"] #wm-home .hkplc-standings { border-radius: 16px; }
/* new enrichment cards (top players / clubs) share the standings rhythm */
html[data-shell="wechat-mini"] #wm-home .wm-card-wrap { padding: 0 12px; }
html[data-shell="wechat-mini"] #wm-home .hkplc-topplayers,
html[data-shell="wechat-mini"] #wm-home .hkplc-clubs { border-radius: 16px; }
/* media strip: match the mini 12px gutter */
html[data-shell="wechat-mini"] #wm-home .hkplc-media { padding: 2px 12px; }
html[data-shell="wechat-mini"] #wm-home #wm-announce .hkplc-announce { margin: 0 12px 12px; }