/* ==========================================================================
   H5 Mobile Template (mt-*) — design tokens + component styles
   Every value below was measured from a rendered reference H5 page at
   375×812 (see docs/sampling-spec.md). Re-skin by editing the --mt-* tokens.
   All selectors are scoped by an mt- class.
   ========================================================================== */

/* ==========================================================================
   PROPORTIONAL SCALING
   The whole UI scales with the viewport exactly like the sampled reference:
   1rem = 100 design px at a 375px-wide screen, so every measured value in
   docs/sampling-spec.md maps to (px / 100)rem below. The scale is clamped to
   320px..480px wide; beyond that the 3.75rem canvas is centred (tablet / desktop).
   Hairlines under 2px stay in px so borders remain crisp on every density.
   ========================================================================== */
html {
  font-size: 26.6667vw; /* fallback for engines without clamp() */
  font-size: clamp(85.3333px, 26.6667vw, 128px);
  -webkit-text-size-adjust: 100%; /* no iOS landscape inflation / Android font boosting */
  text-size-adjust: 100%;
}
@media (min-width: 480px) {
  html {
    font-size: 128px; /* same cap for engines without clamp() */
  }
}
/* Phone landscape: height is the scarce axis, so stop scaling by width. The canvas falls back
   to the measured 375px column and the fixed chrome to its design size. min-width + max-height
   instead of (orientation): an open keyboard makes old Android report landscape in portrait,
   but a portrait phone can never be 560px wide. */
@media (min-width: 560px) and (max-height: 480px) {
  html {
    font-size: 100px;
  }
}
body {
  margin: 0;
  font-size: 16px; /* anything outside the template keeps a normal text size */
}

.mt-root {
  /* ---- colour ---- */
  --mt-bg: #f2f3f7;
  --mt-surface: #ffffff;
  --mt-primary: #3590ec;
  --mt-primary-deep: #2670ca;
  --mt-primary-edge: #1b91ff;
  --mt-primary-soft: #e6eff6;
  --mt-text: #0b0d12;
  --mt-text-2: #526377;
  --mt-text-3: #97a4b0;
  --mt-text-strong: #3b434c;
  --mt-chip: #e3e6f1;
  --mt-track: #f0f3f8;
  --mt-line: #e9ecf2;
  --mt-accent-gold: #a4724a;
  --mt-live: #ff3b5c;
  --mt-video-bg: #111111;
  --mt-line-form: #e8ebed;
  --mt-check-off: #ebedf0;
  --mt-placeholder: #b4bdc5;

  /* ---- gradients ---- */
  --mt-grad-card: linear-gradient(#fff 2%, #fefefe 60%, #f3f3f7 95%, #fff);
  --mt-grad-section: linear-gradient(#f8f9ff, rgba(255, 255, 255, 0.88) 12%, rgba(255, 255, 255, 0)),
    linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
  --mt-grad-featured: linear-gradient(#f9fafd 2%, #eceef5 89%, #edf3fd);
  --mt-grad-btn: linear-gradient(#b8e3ff, #63aaff 49%, #5fa7ff 63%, #55a0ff 81%, #539fff 85%, #54a1ff 94%);
  --mt-grad-btn-2: linear-gradient(#eaf4ff, #eef3f9);
  --mt-grad-tab: linear-gradient(230deg, #659bf7 -28%, #9ee1ff 7%, #3590ec 106%),
    linear-gradient(116deg, #5898f4 10%, rgba(255, 255, 255, 0.44) 101%);
  --mt-grad-tag: linear-gradient(153deg, #90dfff 3%, #3e92ff 78%),
    linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.3));
  --mt-grad-gold: linear-gradient(117deg, #f7be65 23%, #ffe99e 104%, #dbad7a 100%);
  --mt-grad-league: linear-gradient(90deg, #5546f7, #e83ec8);
  --mt-grad-score: linear-gradient(#f9fafd 2%, #d3d9ed 89%, #edf3fd);
  --mt-grad-pill-fade: linear-gradient(90deg, rgba(255, 255, 255, 0.3), #fff);
  --mt-grad-header: linear-gradient(180deg, #4aa3f7 0%, #63b4fb 55%, #8fcbff 100%);
  --mt-header-edge: #8fcbff; /* = last stop of --mt-grad-header, used by the curved corners */
  --mt-grad-header-scrim: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.4) 50%, rgba(0, 0, 0, 0));
  --mt-grad-media-scrim: linear-gradient(rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.72));

  /* ---- shadows ---- */
  --mt-shadow-card: 0 .02rem .05rem 0 rgba(130, 137, 145, 0.15);
  --mt-shadow-feat: 0 1px .08rem 1px rgba(190, 200, 220, 0.55);
  --mt-shadow-video: 0 .02rem .1rem 0 rgba(0, 0, 0, 0.18);
  --mt-shadow-tabbar: 0 .03rem .2rem 0 rgba(0, 0, 0, 0.12);
  --mt-shadow-hair: 0 0 .02rem 0 rgba(0, 0, 0, 0.12);
  --mt-shadow-btn: 0 .04rem .05rem 0 rgba(0, 76, 149, 0.3), 0 .02rem 0 0 var(--mt-primary-edge),
    inset 0 -.02rem .02rem 0 rgba(121, 195, 255, 0.5);
  --mt-shadow-btn-2: inset 0 .04rem .04rem 0 rgba(255, 255, 255, 0.8);
  --mt-shadow-inset-hi: inset 0 1px 1px 0 rgba(255, 255, 255, 0.5);
  --mt-card-border: 1px solid #fff;
  --mt-btn-2-border: 1px solid #dfe9f3;

  /* ---- radii ---- */
  --mt-r-pill: 50rem;
  --mt-r-tabs: .34rem;
  --mt-r-tip: .23rem;
  --mt-r-section: .2rem;
  --mt-r-tab: .17rem;
  --mt-r-banner: .15rem;
  --mt-r-card: .13rem;
  --mt-r-live: .1rem;

  /* ---- metrics ---- */
  --mt-gutter: .12rem;
  --mt-header-h: .51rem;
  --mt-cats-top: .425rem;
  --mt-tabbar-h: .69rem;
  --mt-max-w: 3.75rem;

  /* ---- type ---- */
  --mt-font: "PingFang TC", "PingFang SC", "Noto Sans TC", -apple-system, BlinkMacSystemFont, "Helvetica Neue",
    "Segoe UI", Roboto, "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
  --mt-font-num: ui-rounded, "SF Pro Rounded", "Nunito", "Arial Rounded MT Bold", var(--mt-font);

  position: relative;
  width: 100%;
  max-width: var(--mt-max-w);
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  padding-bottom: calc(var(--mt-tabbar-h) + env(safe-area-inset-bottom, 0px));
  background: var(--mt-bg);
  color: var(--mt-text);
  font-family: var(--mt-font);
  font-size: .14rem;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

/* Page scrollbar in the theme's language: slim pill thumb in the primary gradient on a clear
   track. Scoped with :has() so it only applies to pages that actually host the template;
   touch browsers use overlay scrollbars and simply ignore it. The matching html background
   keeps iOS rubber-band overscroll from flashing white. */
html:has(.mt-stage) {
  background: #e7eaf1;
  scrollbar-gutter: stable; /* short and long pages centre identically on desktop */
}
html:has(.mt-stage[data-mt-theme="dark"]) {
  background: #07090d;
}
/* Standard properties only for engines WITHOUT the WebKit pseudo-elements (Firefox):
   Chromium 121+ drops every ::-webkit-scrollbar rule once these are set on the element. */
@supports not selector(::-webkit-scrollbar) {
  html:has(.mt-stage) {
    scrollbar-width: thin;
    scrollbar-color: #7db8f7 transparent;
  }
  html:has(.mt-stage[data-mt-theme="dark"]) {
    scrollbar-color: #2f6fb3 transparent;
  }
}
/* Custom WebKit scrollbar only where there is a real mouse: some Android browsers would
   otherwise turn it into a classic scrollbar that steals 10px of layout width. */
@media (hover: hover) and (pointer: fine) {
  html:has(.mt-stage)::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  html:has(.mt-stage)::-webkit-scrollbar-track {
    background: transparent;
  }
  html:has(.mt-stage)::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 5000px;
    background: linear-gradient(#b8e3ff, #63aaff 49%, #539fff) padding-box;
  }
  html:has(.mt-stage)::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(#9ed6ff, #3590ec) padding-box;
  }
  html:has(.mt-stage[data-mt-theme="dark"])::-webkit-scrollbar-thumb {
    background: linear-gradient(#3b7fc4, #24507f) padding-box;
  }
}

/* Full-width backdrop so the columns beside the 3.75rem (max 480px) canvas match the page colour
   (the site's <body> is black under html.dark). */
.mt-stage {
  min-height: 100vh;
  min-height: 100dvh;
  background: #e7eaf1;
}
.mt-stage[data-mt-theme="dark"] {
  background: #07090d;
}

/* Dark variant: same structure, tokens re-mapped. Opt-in via data-mt-theme="dark" —
   deliberately NOT tied to html.dark, because the site keeps that class on permanently
   and the sampled look is the light one. */
.mt-root[data-mt-theme="dark"] {
  --mt-bg: #0e1118;
  --mt-surface: #171b25;
  --mt-primary-soft: rgba(53, 144, 236, 0.18);
  --mt-text: #f2f5fa;
  --mt-text-2: #9aa9bb;
  --mt-text-3: #6d7a8a;
  --mt-text-strong: #dfe6ee;
  --mt-chip: #252b38;
  --mt-track: #1d2230;
  --mt-line: #242a37;
  --mt-accent-gold: #e0b184;
  --mt-line-form: #242a37;
  --mt-check-off: #2a3140;
  --mt-placeholder: #6d7a8a;
  --mt-grad-card: linear-gradient(#1a1f2b 2%, #181d28 60%, #141822 95%, #1a1f2b);
  --mt-grad-section: linear-gradient(#171b26, rgba(23, 27, 38, 0.88) 12%, rgba(23, 27, 38, 0)),
    linear-gradient(rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0));
  --mt-grad-featured: linear-gradient(#1b202c 2%, #161a24 89%, #1a2030);
  --mt-grad-btn-2: linear-gradient(#1d2737, #1a2230);
  --mt-grad-score: linear-gradient(#2a3142 2%, #1d2331 89%, #262d3d);
  --mt-grad-pill-fade: linear-gradient(90deg, rgba(23, 27, 37, 0.3), #171b25);
  --mt-grad-header: linear-gradient(180deg, #1b4f86 0%, #1f5c9b 55%, #24507f 100%);
  --mt-header-edge: #24507f;
  --mt-shadow-card: 0 .02rem .06rem 0 rgba(0, 0, 0, 0.35);
  --mt-shadow-feat: 0 1px .08rem 1px rgba(0, 0, 0, 0.4);
  --mt-shadow-tabbar: 0 -.02rem .2rem 0 rgba(0, 0, 0, 0.5);
  --mt-shadow-btn-2: inset 0 1px 1px 0 rgba(255, 255, 255, 0.06);
  --mt-card-border: 1px solid rgba(255, 255, 255, 0.06);
  --mt-btn-2-border: 1px solid rgba(255, 255, 255, 0.08);
}

.mt-root *,
.mt-root *::before,
.mt-root *::after {
  box-sizing: border-box;
}
.mt-root :where(a) {
  color: inherit;
  text-decoration: none;
}
.mt-root :where(button) {
  font: inherit;
  letter-spacing: inherit; /* UA sheets reset it on buttons; the rails carry the sampled tracking */
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.mt-root :where(img) {
  display: block;
  max-width: 100%;
}
.mt-num {
  font-family: var(--mt-font-num);
  font-weight: 700;
}
.mt-hide-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.mt-hide-scrollbar::-webkit-scrollbar {
  display: none;
}
.mt-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Header — transparent over the hero, fades to a blue gradient once scrolled.
   -------------------------------------------------------------------------- */
.mt-header {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 500;
  width: 100%;
  max-width: var(--mt-max-w);
  height: var(--mt-header-h);
  padding: .13rem .11rem .12rem;
  transform: translateX(-50%);
  color: #fff;
}
.mt-header__scrim,
.mt-header__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
}
.mt-header__scrim {
  height: 1.5rem;
  background: var(--mt-grad-header-scrim);
  transition: opacity 0.3s;
}
.mt-header__bg {
  height: var(--mt-header-h);
  background: var(--mt-grad-header);
  opacity: 0;
  transition: opacity 0.3s;
}
/* Inverted corners under the blue bar: the page reads as a rounded sheet sliding out from
   beneath it. They hang off the bar itself, so they fade in with it and move down with it
   when it extends under the docked category rail. 1px overlap hides any sub-pixel seam. */
.mt-header__bg::before,
.mt-header__bg::after {
  position: absolute;
  top: 100%;
  width: var(--mt-r-section);
  height: calc(var(--mt-r-section) + 1px);
  margin-top: -1px;
  content: "";
}
.mt-header__bg::before {
  left: 0;
  background: radial-gradient(circle at 100% 100%, transparent calc(var(--mt-r-section) - 0.5px), var(--mt-header-edge) var(--mt-r-section));
}
.mt-header__bg::after {
  right: 0;
  background: radial-gradient(circle at 0 100%, transparent calc(var(--mt-r-section) - 0.5px), var(--mt-header-edge) var(--mt-r-section));
}
.mt-header--solid .mt-header__bg {
  opacity: 1;
}
.mt-header--solid .mt-header__scrim {
  opacity: 0;
}
/* When the category tabs are docked the blue extends underneath them. */
.mt-header--docked .mt-header__bg {
  height: calc(var(--mt-cats-top) + .42rem);
}
/* Inner pages (no hero behind the header) start solid. */
.mt-header--static .mt-header__bg {
  opacity: 1;
}
.mt-header--static .mt-header__scrim {
  display: none;
}
.mt-header__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: .26rem;
}
.mt-header__logo {
  display: flex;
  align-items: center;
  gap: .06rem;
  height: .26rem;
  margin: 0 .05rem;
  font-size: .18rem;
  font-weight: 800;
  letter-spacing: .01rem;
  white-space: nowrap;
}
.mt-header__logo img {
  height: .26rem;
  width: auto;
}
.mt-header__actions {
  display: flex;
  align-items: center;
  gap: .15rem;
  margin-right: .05rem;
}
.mt-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: .26rem;
  height: .26rem;
  color: #fff;
  filter: drop-shadow(0 .02rem .03rem rgba(0, 0, 0, 0.12));
}
.mt-iconbtn svg {
  width: .22rem;
  height: .22rem;
}
.mt-header-spacer {
  height: var(--mt-header-h);
}

/* --------------------------------------------------------------------------
   Hero carousel — full-bleed 375×270 with progressive-width dots.
   -------------------------------------------------------------------------- */
.mt-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 375 / 270;
  overflow: hidden;
  background: #1b2a44;
}
.mt-hero__track {
  display: flex;
  height: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}
.mt-hero__slide {
  position: relative;
  flex: 0 0 100%;
  height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.mt-hero__slide img,
.mt-hero__fallback {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mt-hero__fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .06rem;
  padding-top: .4rem;
  background: radial-gradient(120% 90% at 50% 0%, #6cb8ff 0%, #2f7fe0 45%, #173a7a 100%);
  color: #fff;
  text-align: center;
}
.mt-hero__fallback strong {
  font-size: .22rem;
  font-weight: 800;
  letter-spacing: .02rem;
}
.mt-hero__fallback span {
  font-size: .12rem;
  letter-spacing: .01rem;
  opacity: 0.85;
}
.mt-hero__dots {
  position: absolute;
  right: 0;
  bottom: .05rem;
  left: 0;
  z-index: 10;
  display: flex;
  justify-content: center;
  gap: .08rem;
}
.mt-dot {
  width: .08rem;
  height: .08rem;
  border-radius: .5rem;
  background: rgba(255, 255, 255, 0.5);
  transition: width 0.3s, background-color 0.3s;
}
.mt-dot--near {
  width: .1rem;
  background: rgba(255, 255, 255, 0.66);
}
.mt-dot--active {
  width: .13rem;
  background: rgba(255, 255, 255, 0.84);
}

/* --------------------------------------------------------------------------
   Notice bar — gradient tag + vertical ticker.
   -------------------------------------------------------------------------- */
.mt-notice {
  display: flex;
  align-items: center;
  gap: .07rem;
  height: .42rem;
  padding: 0 .16rem;
  background: var(--mt-surface);
}
.mt-notice__tag {
  flex: none;
  min-width: .46rem;
  height: .23rem;
  padding: 0 .09rem;
  border: 1px solid transparent;
  border-radius: .15rem;
  background: var(--mt-grad-tag);
  box-shadow: inset 0 1px 0 0 rgba(83, 166, 255, 0.4);
  color: #fff;
  font-size: .12rem;
  font-weight: 600;
  line-height: .21rem;
  letter-spacing: .007rem;
  text-align: center;
  text-shadow: -1px 0 1px rgba(0, 110, 211, 0.48);
}
.mt-notice__viewport {
  position: relative;
  flex: 1;
  min-width: 0;
  height: .22rem;
  overflow: hidden;
}
.mt-notice__list {
  transition: transform 0.5s ease;
}
.mt-notice__item {
  display: block;
  height: .22rem;
  overflow: hidden;
  font-size: .14rem;
  line-height: .22rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mt-notice__more {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: .16rem;
  height: .16rem;
  border: 1.5px solid var(--mt-primary);
  border-radius: 50%;
  color: var(--mt-primary);
}
.mt-notice__more svg {
  width: .1rem;
  height: .1rem;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.mt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .04rem;
  padding: 0 .14rem;
  border-radius: var(--mt-r-pill);
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  transition: transform 0.12s, filter 0.12s;
  -webkit-user-select: none;
  user-select: none;
}
.mt-root .mt-btn:active {
  transform: translateY(1px);
  filter: brightness(0.97);
}
.mt-btn--sm {
  min-width: .9rem;
  height: .25rem;
  padding: 0 .09rem; /* measured: .05rem padding + .04rem text margin */
  font-size: .12rem;
  letter-spacing: .008rem;
}
.mt-btn--md {
  height: .37rem;
  font-size: .14rem;
  letter-spacing: .006rem;
}
.mt-btn--lg {
  height: .4rem;
  font-size: .14rem;
  letter-spacing: .007rem;
}
.mt-btn--block {
  display: flex;
  width: 100%;
}
.mt-root .mt-btn--primary {
  background: var(--mt-grad-btn);
  box-shadow: var(--mt-shadow-btn);
  color: #fff;
}
.mt-root .mt-btn--secondary {
  border: var(--mt-btn-2-border);
  background: var(--mt-grad-btn-2);
  box-shadow: var(--mt-shadow-btn-2);
  color: var(--mt-primary-deep);
}
.mt-root[data-mt-theme="dark"] .mt-btn--secondary {
  color: #8cc2ff;
}
.mt-root .mt-btn--soft {
  background: var(--mt-primary-soft);
  color: var(--mt-primary);
  letter-spacing: .006rem;
}
.mt-root .mt-btn--disabled,
.mt-root .mt-btn:disabled {
  background: var(--mt-chip);
  box-shadow: none;
  color: var(--mt-text-3);
  pointer-events: none;
}
.mt-btn__sub {
  font-size: .1rem;
  font-weight: 400;
  letter-spacing: .005rem;
}
.mt-btn svg {
  width: .12rem;
  height: .12rem;
}

/* --------------------------------------------------------------------------
   Login tip card
   -------------------------------------------------------------------------- */
.mt-logintip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .1rem;
  min-height: .49rem;
  margin: .12rem;
  padding: .07rem .15rem;
  border-radius: var(--mt-r-tip);
  background: var(--mt-grad-card);
}
.mt-logintip__main {
  display: flex;
  align-items: center;
  min-width: 0;
}
.mt-logintip__avatar {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: .35rem;
  height: .35rem;
  overflow: hidden;
  border-radius: 50%;
  background: linear-gradient(160deg, #cfeaff, #6db6ff);
  color: #fff;
}
.mt-logintip__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mt-logintip__avatar svg {
  width: .2rem;
  height: .2rem;
}
.mt-logintip__text {
  min-width: 0;
  margin-left: .1rem;
}
.mt-logintip__title {
  overflow: hidden;
  font-size: .12rem;
  font-weight: 500;
  line-height: .16rem;
  letter-spacing: .003rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mt-logintip__sub {
  overflow: hidden;
  color: var(--mt-text-2);
  font-size: .1rem;
  line-height: .15rem;
  letter-spacing: .0025rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Banner strip (349×80, r15)
   -------------------------------------------------------------------------- */
.mt-banner {
  position: relative;
  display: block;
  margin: .12rem .13rem;
  overflow: hidden;
  border-radius: var(--mt-r-banner);
  box-shadow: var(--mt-shadow-hair);
}
.mt-banner--strip {
  aspect-ratio: 349 / 80;
}
.mt-banner--wide {
  aspect-ratio: 349 / 130;
}
.mt-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mt-banner__fallback {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  padding: 0 .18rem;
  background: linear-gradient(100deg, #1d3d7c 0%, #2f7fe0 60%, #7cc4ff 100%);
  color: #fff;
}
.mt-banner__fallback strong {
  font-size: .2rem;
  font-weight: 800;
  letter-spacing: .03rem;
  text-shadow: 0 .02rem .06rem rgba(0, 0, 0, 0.25);
}
.mt-banner__fallback span {
  font-size: .11rem;
  letter-spacing: .01rem;
  opacity: 0.9;
}

/* --------------------------------------------------------------------------
   Section panel
   -------------------------------------------------------------------------- */
.mt-section {
  position: relative;
  margin-bottom: .08rem;
  padding: .14rem var(--mt-gutter) 0;
  border-radius: var(--mt-r-section);
  background: var(--mt-grad-section);
  scroll-margin-top: .92rem;
}
.mt-section--bleed {
  display: flow-root;
  margin-bottom: .16rem;
  padding: .12rem 0 0 var(--mt-gutter);
}
.mt-section__head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: .24rem;
  margin-bottom: .1rem;
}
.mt-section--bleed .mt-section__head {
  padding-right: var(--mt-gutter);
}
.mt-section__title {
  flex: none;
  margin: 0 .14rem 0 0;
  padding-left: .08rem;
  font-size: .18rem;
  font-weight: 700;
  line-height: .24rem;
}
/* Measured: the arrows float beside the title and never add to the head height (.26rem there). */
.mt-section__head:has(.mt-section__nav:not(.mt-section__nav--mouse)) {
  height: .26rem;
}
.mt-section__nav {
  position: absolute;
  top: 50%;
  right: var(--mt-gutter);
  display: flex;
  align-items: center;
  gap: .04rem;
  transform: translateY(-50%);
}
.mt-navbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: .28rem;
  height: .28rem;
  border-radius: 50%;
  color: var(--mt-primary);
}
.mt-navbtn svg {
  width: .2rem;
  height: .2rem;
  stroke-width: 2.4;
}
.mt-section__more {
  display: inline-flex;
  align-items: center;
  gap: .02rem;
  color: var(--mt-text-2);
  font-size: .12rem;
}
.mt-section__more svg {
  width: .14rem;
  height: .14rem;
}
.mt-section__empty {
  padding: .28rem 0 .32rem;
  color: var(--mt-text-3);
  font-size: .12rem;
  letter-spacing: .005rem;
  text-align: center;
}

/* Marquee track that sits next to a section title */
.mt-marquee {
  display: flex;
  flex: 1;
  align-items: center;
  min-width: 0;
  height: .29rem;
  padding: .03rem .05rem;
  border-radius: .14rem;
  background: var(--mt-track);
}
.mt-marquee__viewport {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.mt-marquee__track {
  display: inline-flex;
  width: max-content;
  animation: mt-marquee 18s linear infinite;
}
.mt-marquee__item {
  padding: .025rem .05rem;
  margin-right: .6rem;
  color: var(--mt-text-2);
  font-size: .12rem;
  font-weight: 400;
  letter-spacing: .0088rem;
  white-space: nowrap;
}
.mt-marquee__item b {
  color: var(--mt-primary);
  font-family: var(--mt-font-num);
}
.mt-marquee__arrow {
  display: inline-flex;
  flex: none;
  width: .16rem;
  height: .16rem;
  color: var(--mt-primary);
}
.mt-marquee__arrow svg {
  width: .16rem;
  height: .16rem;
}
@keyframes mt-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* --------------------------------------------------------------------------
   Live slider + live match card (338×270, r10)
   -------------------------------------------------------------------------- */
.mt-liveslider {
  display: flex;
  gap: .12rem;
  margin-bottom: -.12rem;
  padding: 0 var(--mt-gutter) .12rem .13rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scroll-padding-left: .13rem;
}
.mt-liveslider > * {
  flex: 0 0 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.mt-livecard {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--mt-r-live);
  background: var(--mt-video-bg);
  box-shadow: var(--mt-shadow-video);
}
.mt-livecard__league {
  display: flex;
  align-items: center;
  height: .24rem;
  padding: 0 .08rem;
  background: var(--mt-grad-league);
  color: #fff;
}
.mt-livecard__flame {
  display: inline-flex;
  flex: none;
  margin-right: .08rem;
  color: #ffd166;
}
.mt-livecard__flame svg {
  width: .15rem;
  height: .15rem;
  fill: currentColor;
}
.mt-livecard__leaguename {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: .13rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mt-livebadge {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: .025rem;
  color: #fff;
  font-size: .12rem;
  font-weight: 700;
  letter-spacing: .01rem;
}
.mt-livebadge svg {
  width: .14rem;
  height: .14rem;
}
.mt-livebadge--pulse svg {
  animation: mt-pulse 1.6s ease-in-out infinite;
}
@keyframes mt-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.45;
  }
}
.mt-livecard__panel {
  padding-top: .05rem;
  background: var(--mt-surface);
  color: var(--mt-text);
}
.mt-livecard__teams {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: .26rem;
  margin-bottom: .04rem;
  padding: 0 .08rem;
}
.mt-livecard__team {
  display: flex;
  flex: 1;
  align-items: center;
  gap: .04rem;
  min-width: 0;
  font-size: .12rem;
  font-weight: 600;
}
.mt-livecard__team--home {
  justify-content: flex-end;
  text-align: right;
}
.mt-livecard__teamname {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mt-livecard__teamlogo {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: .25rem;
  height: .25rem;
  overflow: hidden;
  border-radius: 50%;
  background: #f5f5f5;
  color: var(--mt-text-2);
  font-size: .11rem;
  font-weight: 700;
}
.mt-root[data-mt-theme="dark"] .mt-livecard__teamlogo {
  background: #262c3a;
}
.mt-livecard__teamlogo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.mt-livecard__title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: .13rem;
  font-weight: 700;
  letter-spacing: .004rem;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mt-score {
  flex: none;
  min-width: .51rem;
  margin: 0 .08rem;
  padding: 1px;
  border: 1px solid transparent;
  border-radius: .13rem;
  background: var(--mt-grad-score);
  box-shadow: var(--mt-shadow-inset-hi);
  color: var(--mt-text);
  font-family: var(--mt-font-num);
  font-size: .14rem;
  font-weight: 800;
  line-height: .18rem;
  letter-spacing: .01rem;
  text-align: center;
}
.mt-score > span {
  display: block;
  padding: .02rem .08rem;
}
.mt-livecard__info {
  display: flex;
  align-items: center;
  height: .26rem;
  border-top: 1px solid var(--mt-line);
}
.mt-livecard__infocell {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: .04rem;
  min-width: 0;
  padding: .04rem .06rem;
  overflow: hidden;
  font-size: .12rem;
  font-weight: 600;
  white-space: nowrap;
}
.mt-livecard__infocell + .mt-livecard__infocell {
  border-left: 1px solid var(--mt-line);
}
.mt-livecard__infocell--mid {
  letter-spacing: .01rem;
}
.mt-livecard__infocell svg {
  flex: none;
  width: .12rem;
  height: .12rem;
  color: var(--mt-primary);
}
.mt-livecard__video {
  position: relative;
  display: block;
  aspect-ratio: 338 / 185;
  overflow: hidden;
  background: #000;
}
.mt-livecard__video img,
.mt-livecard__video video,
.mt-livecard__video mux-player {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mt-livecard__poster {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(90% 120% at 50% 0%, #27406e, #0b1222);
  color: rgba(255, 255, 255, 0.35);
  font-size: .22rem;
  font-weight: 800;
  letter-spacing: .04rem;
}
.mt-livecard__ctrls {
  position: absolute;
  top: .07rem;
  z-index: 2;
  display: flex;
  gap: .05rem;
}
.mt-livecard__ctrls--l {
  left: .07rem;
}
.mt-livecard__ctrls--r {
  right: .07rem;
}
.mt-ctrl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: .22rem;
  height: .22rem;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
}
.mt-root .mt-ctrl {
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
}
.mt-ctrl svg {
  width: .13rem;
  height: .13rem;
}
.mt-livecard__label {
  position: absolute;
  bottom: .06rem;
  left: .07rem;
  z-index: 2;
  color: rgba(255, 255, 255, 0.9);
  font-size: .11rem;
  font-weight: 500;
  letter-spacing: .01rem;
  text-shadow: 0 1px .02rem rgba(0, 0, 0, 0.6);
}
.mt-livecard__viewers {
  position: absolute;
  right: .07rem;
  bottom: .06rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .03rem;
  padding: 1px .07rem;
  border-radius: var(--mt-r-pill);
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-family: var(--mt-font-num);
  font-size: .11rem;
}
.mt-livecard__viewers svg {
  width: .11rem;
  height: .11rem;
}
.mt-livecard__play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: .3rem;
  height: .3rem;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  opacity: 0.75;
  transform: translate(-50%, -50%);
}
.mt-livecard__play svg {
  width: .16rem;
  height: .16rem;
  fill: currentColor;
}

/* --------------------------------------------------------------------------
   Category tabs — pill rail that docks under the header.
   -------------------------------------------------------------------------- */
.mt-cats-slot {
  display: flow-root;
  margin-top: -.12rem;
  height: .66rem; /* 42 rail + 12 margin × 2: reserves space while the rail is fixed */
}
.mt-cats {
  display: flex;
  align-items: center;
  gap: .02rem;
  height: .42rem;
  margin: .12rem;
  padding: .07rem .09rem;
  overflow-x: auto;
  border: var(--mt-card-border);
  border-radius: var(--mt-r-tabs);
  background: var(--mt-grad-card);
  box-shadow: var(--mt-shadow-card);
  color: var(--mt-text-2);
  font-size: .13rem;
  font-weight: 600;
  letter-spacing: .007rem;
}
.mt-cats--docked {
  position: fixed;
  top: var(--mt-cats-top);
  left: 50%;
  z-index: 502;
  width: 100%;
  max-width: var(--mt-max-w);
  height: .4rem;
  margin: 0;
  border-color: transparent;
  background: none;
  box-shadow: none;
  color: #e6eff6;
  transform: translateX(-50%);
}
.mt-cats__item {
  display: inline-flex;
  flex: 1 0 auto;
  align-items: center;
  justify-content: center;
  min-width: .42rem;
  height: .26rem;
  padding: 0 .08rem;
  border-radius: var(--mt-r-tab);
  line-height: .26rem;
  white-space: nowrap;
}
.mt-root .mt-cats__item--active {
  padding: 0 .12rem 0 .08rem;
  background: var(--mt-grad-tab);
  box-shadow: var(--mt-shadow-inset-hi);
  color: #fff;
}
.mt-cats__icon {
  display: inline-flex;
  margin-right: .03rem;
}
.mt-cats__icon svg {
  width: .14rem;
  height: .14rem;
  fill: currentColor;
}

/* --------------------------------------------------------------------------
   Rank cards — horizontally scrolling posters (164×200)
   -------------------------------------------------------------------------- */
.mt-rank {
  display: flex;
  gap: .1rem;
  margin-bottom: -.12rem;
  padding-right: var(--mt-gutter);
  padding-bottom: .12rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
}
.mt-rankcard {
  position: relative;
  flex: 0 0 1.64rem;
  height: 2rem;
  overflow: hidden;
  border-radius: var(--mt-r-card);
  background: radial-gradient(100% 80% at 50% 0%, #3b6fc4, #14203c);
  box-shadow: var(--mt-shadow-card);
  color: #fff;
  scroll-snap-align: start;
}
.mt-rankcard__img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mt-rankcard::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--mt-grad-media-scrim);
  content: "";
}
.mt-rankcard__badge {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: .43rem;
  height: .33rem;
  border-radius: var(--mt-r-card) 0 .14rem 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(214, 222, 236, 0.86));
  color: #6b7a90;
  font-family: var(--mt-font-num);
  line-height: 1;
}
.mt-rankcard__badge b {
  font-size: .15rem;
  font-weight: 800;
}
.mt-rankcard__badge i {
  font-size: .07rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .006rem;
}
.mt-rankcard--top1 .mt-rankcard__badge {
  background: var(--mt-grad-gold);
  color: #fff;
}
.mt-rankcard__live {
  position: absolute;
  top: .08rem;
  right: .08rem;
  z-index: 2;
}
.mt-rankcard__body {
  position: absolute;
  right: .1rem;
  bottom: .1rem;
  left: .1rem;
  z-index: 2;
}
.mt-rankcard__title {
  display: -webkit-box;
  overflow: hidden;
  font-size: .15rem;
  font-weight: 800;
  line-height: .2rem;
  letter-spacing: .006rem;
  text-shadow: 0 1px .03rem rgba(0, 0, 0, 0.5);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.mt-rankcard__meta {
  display: inline-flex;
  align-items: center;
  gap: .04rem;
  margin-top: .06rem;
  padding: .02rem .09rem;
  border-radius: var(--mt-r-pill);
  background: rgba(255, 255, 255, 0.22);
  font-size: .1rem;
  letter-spacing: .005rem;
  -webkit-backdrop-filter: blur(.04rem);
  backdrop-filter: blur(.04rem);
}
.mt-rankcard__meta b {
  font-family: var(--mt-font-num);
  font-size: .12rem;
}

/* --------------------------------------------------------------------------
   Featured card (351×327)
   -------------------------------------------------------------------------- */
.mt-featured {
  position: relative;
  display: block;
  margin-top: .1rem;
  border-radius: .13rem .13rem .15rem .15rem;
  background: var(--mt-surface);
}
.mt-featured__inner {
  position: relative;
  padding: .14rem .13rem .17rem;
  border-radius: var(--mt-r-card);
  background: var(--mt-grad-featured);
  box-shadow: var(--mt-shadow-feat);
}
.mt-featured__info {
  display: flex;
  align-items: center;
  min-height: .55rem;
  padding-right: .44rem;
}
.mt-featured__icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: .54rem;
  height: .55rem;
  margin-right: .08rem;
  overflow: hidden;
  border-radius: .12rem;
  background: linear-gradient(160deg, #cfeaff, #5ea6ff);
  color: #fff;
}
.mt-featured__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mt-featured__icon svg {
  width: .28rem;
  height: .28rem;
}
.mt-featured__text {
  min-width: 0;
}
.mt-featured__name {
  overflow: hidden;
  font-size: .2rem;
  font-weight: 700;
  line-height: .29rem;
  letter-spacing: .011rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mt-featured__summary {
  overflow: hidden;
  color: var(--mt-text-2);
  font-size: .14rem;
  font-weight: 700;
  line-height: .2rem;
  letter-spacing: .007rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mt-featured__media {
  position: relative;
  aspect-ratio: 326 / 180;
  margin-top: .13rem;
  overflow: hidden;
  border-radius: var(--mt-r-card);
  background: radial-gradient(90% 120% at 50% 0%, #27406e, #0b1222);
}
.mt-featured__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mt-featured__mediatag {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 2;
  padding: .025rem .1rem;
  border-radius: 0 0 .13rem .13rem;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: .12rem;
  font-weight: 600;
  letter-spacing: .003rem;
  white-space: nowrap;
  transform: translateX(-50%);
}
.mt-featured__cta {
  margin-top: .11rem;
}
.mt-featured__flag {
  position: absolute;
  top: -.02rem;
  right: .09rem;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: .41rem;
  height: .69rem;
  padding: 0 .06rem .12rem;
  /* shape lives on ::before so the drop-shadow below is not clipped away with it */
  color: #fff;
  font-size: .1rem;
  font-weight: 600;
  line-height: .12rem;
  text-align: center;
  filter: drop-shadow(0 .02rem .03rem rgba(0, 0, 0, 0.12));
}

/* --------------------------------------------------------------------------
   2-col grid cards (170×166)
   -------------------------------------------------------------------------- */
.mt-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .12rem .11rem;
  margin-top: .12rem;
  padding-bottom: .12rem;
}
.mt-gridcard {
  position: relative;
  display: block;
  min-height: 1.66rem;
  padding: .37rem .12rem .12rem;
  overflow: hidden;
  border-radius: var(--mt-r-card);
  background: var(--mt-grad-featured);
  box-shadow: var(--mt-shadow-card);
}
.mt-gridcard__bg {
  position: absolute;
  top: 0;
  right: 0;
  width: 62%;
  height: 100%;
  object-fit: cover;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%);
  mask-image: linear-gradient(90deg, transparent, #000 45%);
}
.mt-gridcard__corner {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .03rem;
  min-width: .45rem;
  height: .27rem;
  padding: 0 .09rem;
  border-radius: var(--mt-r-card) 0 .14rem 0;
  background: var(--mt-primary-soft);
  color: var(--mt-primary);
  font-size: .1rem;
  font-weight: 700;
  letter-spacing: .005rem;
}
.mt-gridcard__corner svg {
  width: .12rem;
  height: .12rem;
}
.mt-gridcard__corner--live {
  background: linear-gradient(90deg, #ff5a7a, #ff3b5c);
  color: #fff;
}
.mt-gridcard__name {
  position: relative;
  z-index: 1;
  display: -webkit-box;
  max-width: 78%;
  overflow: hidden;
  font-size: .16rem;
  font-weight: 700;
  line-height: .24rem;
  letter-spacing: .0088rem;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.mt-gridcard__meta {
  position: relative;
  z-index: 1;
  color: var(--mt-text-2);
  font-size: .1rem;
  font-weight: 500;
  line-height: .15rem;
  letter-spacing: .0056rem;
}
.mt-tag-new {
  position: relative;
  z-index: 1;
  display: inline-block;
  min-width: .34rem;
  margin-top: .08rem;
  padding: .02rem .05rem;
  border-radius: .08rem;
  background: var(--mt-grad-gold);
  color: #fff;
  font-family: var(--mt-font-num);
  font-size: .1rem;
  font-weight: 700;
  line-height: .12rem;
  letter-spacing: .0017rem;
  text-align: center;
}
.mt-gridcard__pill {
  position: absolute;
  right: .1rem;
  bottom: .08rem;
  left: .1rem;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .03rem;
  height: .28rem;
  padding: .05rem .08rem .03rem;
  border-radius: var(--mt-r-pill);
  background: var(--mt-grad-pill-fade);
  color: var(--mt-text-strong);
  font-size: .13rem;
  font-weight: 500;
  line-height: .13rem;
  letter-spacing: .0035rem;
  white-space: nowrap;
}
.mt-gridcard__pill b {
  color: var(--mt-accent-gold);
  font-family: var(--mt-font-num);
  font-size: .18rem;
  font-weight: 700;
  line-height: .2rem;
}

/* --------------------------------------------------------------------------
   Generic cards, chips, status pills
   -------------------------------------------------------------------------- */
.mt-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--mt-r-card);
  background: var(--mt-surface);
  box-shadow: var(--mt-shadow-card);
}
.mt-card--pattern {
  border: var(--mt-card-border);
  background: var(--mt-grad-card);
}
.mt-chip {
  display: inline-block;
  flex: none;
  padding: .02rem .08rem;
  border-radius: var(--mt-r-pill);
  background: var(--mt-chip);
  color: var(--mt-text-2);
  font-size: .1rem;
  letter-spacing: .005rem;
  white-space: nowrap;
}
.mt-status {
  display: inline-block;
  padding: .03rem .075rem;
  border-radius: var(--mt-r-pill);
  background: var(--mt-grad-gold);
  color: #fff;
  font-size: .1rem;
  font-weight: 600;
  letter-spacing: .005rem;
}
.mt-status--blue {
  background: var(--mt-grad-tag);
}

/* --------------------------------------------------------------------------
   List page — fixed top filter tabs + image list cards (351×160)
   -------------------------------------------------------------------------- */
.mt-toptabs {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 400;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: var(--mt-max-w);
  height: .5rem;
  padding: 0 .12rem;
  overflow-x: auto;
  background: var(--mt-surface);
  color: var(--mt-text-2);
  font-size: .16rem;
  font-weight: 500;
  letter-spacing: .008rem;
  transform: translateX(-50%);
}
.mt-toptabs__item {
  flex: none;
  min-width: .6rem;
  padding: .03rem .13rem;
  border-radius: var(--mt-r-tabs);
  line-height: .21rem;
  text-align: center;
  white-space: nowrap;
}
.mt-root .mt-toptabs__item--active {
  background: var(--mt-grad-tab);
  box-shadow: var(--mt-shadow-inset-hi);
  color: #fff;
}
.mt-list {
  padding: .65rem .12rem .2rem;
}
.mt-listcard {
  position: relative;
  display: block;
  min-height: 1.6rem;
  margin-bottom: .12rem;
  overflow: hidden;
  border-radius: var(--mt-r-card);
  background: var(--mt-grad-card);
  box-shadow: var(--mt-shadow-card);
}
.mt-listcard__bg {
  position: absolute;
  top: 0;
  right: 0;
  width: 58%;
  height: 100%;
  object-fit: cover;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%);
  mask-image: linear-gradient(90deg, transparent, #000 40%);
}
.mt-listcard__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 1.6rem;
  padding: .1rem .15rem .15rem;
}
.mt-listcard__title {
  display: -webkit-box;
  max-width: 1.38rem;
  max-height: .44rem;
  margin: .1rem 0;
  overflow: hidden;
  font-size: .16rem;
  font-weight: 600;
  line-height: .24rem;
  letter-spacing: .0088rem;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.mt-listcard__tags {
  display: flex;
  gap: .03rem;
  margin-top: auto;
  overflow-x: auto;
}

/* --------------------------------------------------------------------------
   Me page
   -------------------------------------------------------------------------- */
.mt-me {
  padding: 0 .12rem .12rem;
  background: var(--mt-grad-header) top / 100% 1.25rem no-repeat;
}
.mt-me__user {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .08rem;
  padding: .12rem .1rem .02rem;
}
.mt-me__who {
  display: flex;
  align-items: center;
  min-width: 0;
}
.mt-me__avatar {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: .35rem;
  height: .35rem;
  overflow: hidden;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  color: #fff;
}
.mt-me__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mt-me__avatar svg {
  width: .2rem;
  height: .2rem;
}
.mt-me__name {
  margin: 0 .04rem 0 .1rem;
  overflow: hidden;
  color: #fff;
  font-size: .18rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mt-me__block {
  margin: .12rem 0;
}
.mt-quick {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: .13rem .12rem;
}
.mt-quick__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: .6rem;
}
.mt-quick__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: .4rem;
  height: .4rem;
  border-radius: .12rem;
  background: linear-gradient(160deg, #cfeaff, #5ea6ff);
  box-shadow: 0 .03rem .06rem rgba(53, 144, 236, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.6);
  color: #fff;
}
.mt-quick__icon--gold {
  background: linear-gradient(160deg, #ffe9b0, #f3a94a);
  box-shadow: 0 .03rem .06rem rgba(243, 169, 74, 0.28), inset 0 1px 1px rgba(255, 255, 255, 0.6);
}
.mt-quick__icon--violet {
  background: linear-gradient(160deg, #ddd2ff, #7c6bf5);
  box-shadow: 0 .03rem .06rem rgba(124, 107, 245, 0.28), inset 0 1px 1px rgba(255, 255, 255, 0.6);
}
.mt-quick__icon--rose {
  background: linear-gradient(160deg, #ffd3dc, #ff5a7a);
  box-shadow: 0 .03rem .06rem rgba(255, 90, 122, 0.28), inset 0 1px 1px rgba(255, 255, 255, 0.6);
}
.mt-quick__icon svg {
  width: .22rem;
  height: .22rem;
}
.mt-quick__label,
.mt-optgrid__label {
  margin-top: .02rem;
  color: var(--mt-text-2);
  font-size: .12rem;
  font-weight: 600;
  line-height: .18rem;
}
.mt-cardhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .13rem .12rem 0;
}
.mt-cardhead__title {
  font-size: .14rem;
  font-weight: 600;
}
.mt-cardhead__link {
  display: inline-flex;
  align-items: center;
  color: var(--mt-text-2);
  font-size: .12rem;
}
.mt-cardhead__link svg {
  width: .14rem;
  height: .14rem;
}
.mt-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .09rem;
  padding: .07rem .12rem .2rem; /* measured: task card is 136 tall */
}
.mt-duo__item {
  position: relative;
  display: flex;
  align-items: center;
  height: .74rem;
  padding: 0 .14rem;
  overflow: hidden;
  border-radius: .1rem;
  background: linear-gradient(120deg, #dff0ff, #b9dcff);
  color: #1d4f8f;
  font-size: .2rem;
  font-weight: 800;
  letter-spacing: .03rem;
}
.mt-duo__item--warm {
  background: linear-gradient(120deg, #fff1d8, #ffd9a3);
  color: #8a5a1c;
}
.mt-duo__item svg {
  position: absolute;
  right: .08rem;
  bottom: .06rem;
  width: .46rem;
  height: .46rem;
  opacity: 0.28;
}
.mt-optgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.mt-optgrid__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: .72rem;
  padding: 0 .02rem;
  text-align: center;
}
.mt-optgrid__item svg {
  width: .26rem;
  height: .26rem;
  color: var(--mt-primary);
  stroke-width: 1.6;
}
.mt-optgrid__label {
  margin-top: .04rem;
}
.mt-me__foot {
  padding: .14rem 0 .04rem;
  color: var(--mt-text-2);
  font-size: .12rem;
  text-align: center;
}
.mt-me__foot a {
  color: var(--mt-primary);
}

/* --------------------------------------------------------------------------
   Extra banner sizes measured on the home page (all 349 wide, r15)
   -------------------------------------------------------------------------- */
.mt-banner--social {
  aspect-ratio: 355 / 173;
  margin: 0 .1rem .04rem;
  box-shadow: none;
}
.mt-banner--sponsor {
  aspect-ratio: 349 / 134;
  margin: 0 .13rem .12rem;
}
.mt-banner--proxy {
  aspect-ratio: 349 / 100;
  margin: 0 .13rem .12rem;
}
.mt-partners {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .1rem;
  height: .36rem;
  color: var(--mt-text-3);
}
.mt-partners__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: .18rem;
  height: .18rem;
  border-radius: 50%;
  background: var(--mt-chip);
}

/* Blank state (pages that need sign-in show an empty canvas) */
.mt-blank {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .14rem;
  min-height: calc(100vh - var(--mt-tabbar-h) - env(safe-area-inset-bottom, 0px));
  min-height: calc(100dvh - var(--mt-tabbar-h) - env(safe-area-inset-bottom, 0px));
  padding: 0 .4rem;
  color: var(--mt-text-2);
  font-size: .13rem;
  letter-spacing: .005rem;
  text-align: center;
}
.mt-blank svg {
  width: .64rem;
  height: .64rem;
  color: var(--mt-text-3);
  stroke-width: 1.2;
}

/* --------------------------------------------------------------------------
   Auth page — hero 375×279, sheet overlaps it by .35rem (r20 top corners)
   -------------------------------------------------------------------------- */
.mt-root--auth {
  padding-bottom: 0;
  background: var(--mt-surface);
}
.mt-authbar {
  position: relative;
  top: .125rem;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: .35rem;
  margin-bottom: -.35rem;
  padding: 0 .12rem;
  color: #fff;
}
.mt-authbar svg {
  width: .2rem;
  height: .2rem;
  stroke-width: 2.6;
}
.mt-authhero {
  position: relative;
  aspect-ratio: 375 / 279;
  margin-bottom: -.35rem;
  overflow: hidden;
  background: radial-gradient(120% 90% at 50% 0%, #6cb8ff 0%, #2f7fe0 45%, #173a7a 100%);
}
.mt-authhero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mt-authhero__partners {
  position: absolute;
  top: 72.8%; /* 203 / 279 */
  right: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 .63rem;
}
.mt-authhero__partners span {
  width: .18rem;
  height: .18rem;
  margin: 0 .05rem .03rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
}
.mt-sheet {
  position: relative;
  z-index: 1;
  min-height: 5.34rem;
  border-radius: var(--mt-r-section) var(--mt-r-section) 0 0;
  background: var(--mt-surface);
}
/* Segmented control: 353×40 rail, 161×30 sliding thumb */
.mt-seg {
  position: relative;
  display: flex;
  align-items: center;
  height: .4rem;
  margin: 0 .11rem;
  overflow: hidden;
  border: var(--mt-card-border);
  border-radius: var(--mt-r-tabs);
  background: var(--mt-grad-card);
  box-shadow: var(--mt-shadow-card);
  color: var(--mt-text-2);
  font-size: .14rem;
  font-weight: 500;
  line-height: .14rem;
  letter-spacing: .0027rem;
}
.mt-sheet > .mt-seg {
  top: .12rem;
  margin-bottom: .12rem;
}
.mt-seg__thumb {
  position: absolute;
  top: .04rem;
  left: .08rem;
  width: calc(50% - .16rem);
  height: .3rem;
  border-radius: .15rem;
  background: var(--mt-grad-tab);
  box-shadow: var(--mt-shadow-inset-hi);
  transition: transform 0.25s ease;
}
.mt-seg[data-index="1"] .mt-seg__thumb {
  transform: translateX(calc(100% + .16rem));
}
.mt-seg__item {
  position: relative;
  z-index: 1;
  flex: 1;
  height: .38rem;
  line-height: .38rem;
  text-align: center;
  transition: color 0.25s;
}
.mt-root .mt-seg__item[aria-selected="true"] {
  color: #fff;
  font-weight: 600;
}
.mt-subtabs {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 .09rem;
  border-bottom: 1px solid var(--mt-line-form);
  color: var(--mt-text-2);
  font-size: .14rem;
  font-weight: 500;
  line-height: .16rem;
  letter-spacing: .004rem;
}
.mt-subtabs__item {
  padding: .15rem;
}
.mt-subtabs__item + .mt-subtabs__item {
  margin-left: .15rem;
}
.mt-root .mt-subtabs__item[aria-selected="true"] {
  color: var(--mt-primary);
  font-weight: 600;
}
.mt-form {
  padding: .12rem .24rem 0;
}
.mt-field {
  padding-bottom: .2rem;
}
.mt-field__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: .43rem;
  border-bottom: 1px solid var(--mt-line-form);
}
.mt-root .mt-field input {
  flex: 1;
  min-width: 0;
  height: .3rem;
  padding: 1px .02rem;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--mt-text);
  font: inherit;
  font-size: .14rem;
}
.mt-root .mt-field input::placeholder {
  color: var(--mt-placeholder);
}
.mt-field__row:focus-within {
  border-bottom-color: var(--mt-primary);
}
.mt-field__icon {
  display: inline-flex;
  flex: none;
  color: var(--mt-text-2);
}
.mt-field__icon svg {
  width: .18rem;
  height: .18rem;
}
.mt-check {
  display: flex;
  align-items: center;
  gap: .06rem;
  padding: .06rem 0 .1rem;
  font-size: .12rem;
  cursor: pointer;
}
.mt-root .mt-check input {
  width: .14rem;
  height: .14rem;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background: var(--mt-check-off);
  -webkit-appearance: none;
  appearance: none;
}
.mt-root .mt-check input:checked {
  background: var(--mt-primary) no-repeat center / .09rem
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.2l2.6 2.6L10 3.4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.mt-form__hint {
  margin-top: .2rem;
  color: var(--mt-text-2);
  font-size: .12rem;
  line-height: .14rem;
  letter-spacing: .004rem;
  text-align: center;
}
.mt-form__hint + .mt-btn {
  margin: .06rem 0 .18rem;
}
.mt-btn--lg svg {
  width: .14rem;
  height: .14rem;
}
.mt-authfoot {
  padding: 0 .12rem .22rem;
}
.mt-authfoot__links {
  display: flex;
  align-items: center;
  border-top: 1px solid var(--mt-line-form);
}
.mt-authfoot__link {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: .06rem;
  margin: .1rem 0;
  color: var(--mt-text-2);
  font-size: .12rem;
  line-height: .19rem;
}
.mt-authfoot__link + .mt-authfoot__link {
  border-left: 1px solid var(--mt-line-form);
}
.mt-authfoot__link svg {
  width: .14rem;
  height: .14rem;
  color: var(--mt-primary);
}
.mt-authfoot__tips {
  margin: .02rem 0;
  color: var(--mt-placeholder);
  font-size: .1rem;
  line-height: .12rem;
  letter-spacing: .0019rem;
  text-align: center;
}
.mt-root [hidden] {
  display: none !important;
}

/* --------------------------------------------------------------------------
   End of page + bottom tab bar
   -------------------------------------------------------------------------- */
.mt-end {
  padding: .04rem 0 .16rem;
  color: var(--mt-text-2);
  font-size: .13rem;
  font-weight: 500;
  letter-spacing: .006rem;
  text-align: center;
}
.mt-end__top {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: .36rem;
  height: .36rem;
  margin-bottom: .02rem;
  border-radius: 50%;
  background: var(--mt-grad-card);
  color: var(--mt-primary);
  filter: drop-shadow(0 .02rem .03rem rgba(0, 0, 0, 0.12));
}
.mt-end__top svg {
  width: .18rem;
  height: .18rem;
}
.mt-tabbar {
  position: fixed;
  bottom: 0;
  left: 50%;
  z-index: 300;
  display: flex;
  width: 100%;
  max-width: var(--mt-max-w);
  height: calc(var(--mt-tabbar-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: calc(.09rem + env(safe-area-inset-bottom, 0px));
  border-radius: var(--mt-r-section) var(--mt-r-section) 0 0;
  background: var(--mt-surface);
  box-shadow: var(--mt-shadow-tabbar);
  transform: translateX(-50%);
}
.mt-tabbar__item {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--mt-text-3);
  font-size: .1rem;
  line-height: .1rem;
}
.mt-tabbar__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: .26rem;
  margin-bottom: .04rem;
  opacity: 0.8;
}
.mt-tabbar__icon svg {
  width: .24rem;
  height: .24rem;
  stroke-width: 1.7;
}
.mt-tabbar__label {
  opacity: 0.8;
}
.mt-root .mt-tabbar__item--active {
  color: var(--mt-primary);
  font-weight: 600;
}
.mt-tabbar__item--active .mt-tabbar__icon {
  opacity: 1;
  filter: drop-shadow(.02rem .05rem .04rem rgba(0, 0, 0, 0.1));
}
.mt-tabbar__item--active .mt-tabbar__icon svg {
  fill: rgba(53, 144, 236, 0.18);
  stroke-width: 2;
}

/* Skeleton shimmer used while data loads */
.mt-skel {
  border-radius: var(--mt-r-card);
  background: linear-gradient(100deg, var(--mt-chip) 30%, var(--mt-track) 50%, var(--mt-chip) 70%) 0 0 / 200% 100%;
  animation: mt-skel 1.4s linear infinite;
}
@keyframes mt-skel {
  to {
    background-position: -200% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mt-marquee__track,
  .mt-livebadge--pulse svg,
  .mt-skel {
    animation: none;
  }
  .mt-hero__track,
  .mt-liveslider {
    scroll-behavior: auto;
  }
}

/* --------------------------------------------------------------------------
   Root box model + large-screen presentation
   -------------------------------------------------------------------------- */
/* ".mt-root *" does not match .mt-root itself: without this its min-height:100vh and the
   tab-bar padding add up, so every short page could scroll by exactly one tab-bar height. */
.mt-root {
  box-sizing: border-box;
}
/* Tablets and desktops see the phone canvas centred on a soft backdrop. The shadow makes it
   read as a deliberate device-width column instead of an unfinished wide page. */
@media (min-width: 520px) {
  .mt-stage {
    background: radial-gradient(120% 80% at 50% 0%, #f4f7fc 0%, #e7eaf1 55%, #dfe4ee 100%) top / 100% 100vh no-repeat #dfe4ee;
  }
  .mt-stage[data-mt-theme="dark"] {
    background: radial-gradient(120% 80% at 50% 0%, #10141d 0%, #07090d 60%) top / 100% 100vh no-repeat #07090d;
  }
  .mt-root {
    box-shadow: 0 0 0 1px rgba(23, 58, 122, 0.05), 0 .24rem .6rem -.12rem rgba(23, 58, 122, 0.22);
  }
}

/* --------------------------------------------------------------------------
   Audit fixes (cross-device behaviour)
   -------------------------------------------------------------------------- */
/* iOS zooms the page when a focused input is under 16px and never zooms back. iOS only, so
   the sampled .14rem stays untouched everywhere else. */
@supports (-webkit-touch-callout: none) {
  .mt-root .mt-field input {
    font-size: max(16px, .14rem);
  }
}
/* Slider arrows give feedback at the ends of the rail. */
.mt-navbtn:disabled {
  opacity: 0.35;
  cursor: default;
}
/* Arrows that exist only for a real mouse: a wheel cannot scroll a horizontal rail, touch can. */
.mt-section__nav--mouse {
  display: none;
}
@media (hover: hover) and (pointer: fine) {
  .mt-section__nav--mouse {
    display: flex;
  }
  .mt-dot {
    position: relative;
    cursor: pointer;
  }
  .mt-dot::after {
    position: absolute;
    top: -.08rem;
    right: -.04rem;
    bottom: -.08rem;
    left: -.04rem;
    content: "";
  }
}

/* --------------------------------------------------------------------------
   Accessibility + legacy-engine fixes
   -------------------------------------------------------------------------- */
/* Keyboard focus ring, drawn inset so overflow-clipping parents (hero, ticker, segmented
   control) cannot cut it off. px on purpose: it must not thin out with the rem scale.
   Engines without :focus-visible drop the rule and keep their default ring. */
.mt-root :where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--mt-primary-deep);
  outline-offset: -2px;
}
.mt-root :where(.mt-header, .mt-hero, .mt-cats--docked, .mt-authbar) :where(a, button):focus-visible,
.mt-root :where(.mt-rankcard):focus-visible {
  outline-color: #fff;
}
/* Safari 14 has no aspect-ratio and this box only holds absolutely positioned children,
   so without the spacer the live card's video area collapses to zero height. */
@supports not (aspect-ratio: 1 / 1) {
  .mt-livecard__video::before {
    display: block;
    padding-top: 54.734%; /* 185 / 338 */
    content: "";
  }
}
/* Hit areas: the icon keeps its measured size, the tappable box is 44px.
   px on purpose: fingers do not scale with the canvas. */
.mt-field__icon,
.mt-notice__more,
.mt-authbar a {
  position: relative;
}
.mt-authbar a {
  display: inline-flex;
}
.mt-field__icon::after,
.mt-notice__more::after,
.mt-authbar a::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
  content: "";
}
/* The muted grey is already low-contrast by design; do not fade the label further. */
.mt-tabbar__label {
  opacity: 1;
}
/* Notch / Dynamic Island: every top-anchored bar grows by the top inset (0 elsewhere). */
.mt-root {
  --mt-safe-top: env(safe-area-inset-top, 0px);
}
.mt-header {
  height: calc(var(--mt-header-h) + var(--mt-safe-top));
  padding-top: calc(.13rem + var(--mt-safe-top));
}
.mt-header__bg,
.mt-header-spacer {
  height: calc(var(--mt-header-h) + var(--mt-safe-top));
}
.mt-header--docked .mt-header__bg {
  height: calc(var(--mt-cats-top) + .42rem + var(--mt-safe-top));
}
.mt-cats--docked {
  top: calc(var(--mt-cats-top) + var(--mt-safe-top));
}
.mt-section {
  scroll-margin-top: calc(.92rem + var(--mt-safe-top));
}
.mt-toptabs {
  height: calc(.5rem + var(--mt-safe-top));
  padding-top: var(--mt-safe-top);
}
.mt-list {
  padding-top: calc(.65rem + var(--mt-safe-top));
}
.mt-authbar {
  top: calc(.125rem + var(--mt-safe-top));
}
.mt-me {
  padding-top: var(--mt-safe-top);
  background-size: 100% calc(1.25rem + var(--mt-safe-top));
}

/* --------------------------------------------------------------------------
   Layout audit fixes
   -------------------------------------------------------------------------- */
/* With the tracking restored the category pills are re-budgeted to their sampled sizes:
   26 text + 1.4 tracking + 14.6 padding = 42, active 7.3 + 17 icon + 27.4 + 11.3 = 63. */
.mt-cats__item {
  padding: 0 .073rem;
}
.mt-root .mt-cats__item--active {
  padding: 0 .113rem 0 .073rem;
}
/* Ten dots need 2.8rem but the padded row offers 2.49rem: keep them round and let the row
   overflow its content box evenly (still inside the hero's own clipping). */
.mt-authhero__partners span {
  flex: none;
}

/* --------------------------------------------------------------------------
   Cross-browser audit fixes
   -------------------------------------------------------------------------- */
/* Featured ribbon shape (the parent keeps the filter, this keeps the clip). */
.mt-featured__flag::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1; /* the flag is its own stacking context, so this only sits behind its text */
  background: var(--mt-grad-gold);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 84%, 0 100%);
  content: "";
}
/* A swipe on a rail that is already at its end must not become the browser's back gesture. */
.mt-hero__track,
.mt-liveslider,
.mt-rank,
.mt-cats,
.mt-toptabs,
.mt-listcard__tags {
  overscroll-behavior-x: contain;
}
/* Edge draws its own reveal eye inside password fields; the template already has one. */
.mt-root .mt-field input::-ms-reveal,
.mt-root .mt-field input::-ms-clear {
  display: none;
}
/* Safari 14.0 (iOS 14.0-14.4) supports gap in grid only. `inset` shipped together with flex
   gap in 14.1, so it is the probe (`@supports (gap: 1px)` is true in 14.0 because of grid). */
@supports not (inset: 0) {
  .mt-header__logo > * + * { margin-left: .06rem; }
  .mt-header__actions > * + * { margin-left: .15rem; }
  .mt-hero__dots > * + * { margin-left: .08rem; }
  .mt-notice > * + * { margin-left: .07rem; }
  .mt-logintip > * + * { margin-left: .1rem; }
  .mt-section__nav > * + * { margin-left: .04rem; }
  .mt-liveslider > * + * { margin-left: .12rem; }
  .mt-livecard__team > * + * { margin-left: .04rem; }
  .mt-livecard__ctrls > * + * { margin-left: .05rem; }
  .mt-cats > * + * { margin-left: .02rem; }
  .mt-rank > * + * { margin-left: .1rem; }
  .mt-listcard__tags > * + * { margin-left: .03rem; }
  .mt-me__user > * + * { margin-left: .08rem; }
  .mt-partners > * + * { margin-left: .1rem; }
  .mt-check > * + * { margin-left: .06rem; }
  .mt-authfoot__link > * + * { margin-left: .06rem; }
  .mt-blank > :not(.mt-sr-only) + * { margin-top: .14rem; }
}