/* ==========================================================================
   Desktop Template (pc-*) — design tokens + component styles
   Every value below was measured from the reference site rendered at
   1440×900 (see docs/desktop-spec.md); class names follow
   docs/desktop-markup-contract.md. Fixed px throughout (no rem scale).
   All selectors are scoped by a pc- class; the tokens live on body.pc-body.
   Re-skin by editing the --pc-* tokens.
   ========================================================================== */

/* ==========================================================================
   1. TOKENS (scoped to body.pc-body so the sheet never leaks into other pages)
   ========================================================================== */
.pc-body {
  /* ---- colour ---- */
  --pc-bg: #f7fbff;
  --pc-surface: #ffffff;
  --pc-primary: #32c5ff;
  --pc-primary-hover: #5bd1ff;
  --pc-primary-deep: #1b91ff;
  --pc-primary-light: #25e1fe;
  --pc-primary-pale: #d8ecff;
  --pc-accent-blue: #28b7f0;
  --pc-text: #000000;
  --pc-text-1: #333333;
  --pc-text-2: #666666;
  --pc-text-3: #999999;
  --pc-text-footer: #c7c7c7;
  --pc-red: #fe356a;
  --pc-line: #d8d8d8;
  --pc-line-soft: #dfedf1;
  --pc-footer-line: #404040;
  --pc-dark-a: #030303;
  --pc-dark-b: #393939;
  --pc-cta-text: #626669;
  --pc-pill-line: #4abbe7;
  --pc-aside-line: #c9e5f0;
  --pc-aside-bg: #fdfeff;
  --pc-disabled: #c7c7c7;
  --pc-focus: #1b91ff;

  /* ---- match panel palette (spec §3.5) ---- */
  --pc-match-card: #edf5fd;
  --pc-match-score: #ff4657;
  --pc-match-team: #303442;
  --pc-match-time: #7981a4;
  --pc-match-chat: #f5f5fa;
  --pc-match-grid: #e4eaff;
  --pc-match-link: #1da2ff;
  --pc-match-line: #33c5ff;
  --pc-match-video: #0b1424;

  /* ---- gradients ---- */
  --pc-grad-btn: linear-gradient(to left, #25e1fe, #1b91ff);
  --pc-grad-btn-h: linear-gradient(90deg, #1b91ff, #25e1fe);
  --pc-grad-dark: linear-gradient(to right, #030303, #393939);
  --pc-grad-aside: linear-gradient(#e6f7ff -1%, #feffff 39%, #f3fbff 91%, #d0e8f3);
  --pc-grad-divider: linear-gradient(to left, rgba(50, 197, 255, 0), #bbbbbb);
  --pc-grad-ghost: linear-gradient(180deg, rgba(27, 145, 255, 0.4), #f7fbff);

  /* ---- shadows ---- */
  --pc-shadow-btn: 0 2px 8px 0 rgba(60, 160, 255, 0.47);
  --pc-shadow-card: 0 11px 12px 0 rgba(19, 70, 118, 0.1);
  --pc-shadow-card-h: 0 16px 24px 0 rgba(19, 70, 118, 0.16);
  --pc-shadow-nav: 0 2px 12px 0 rgba(19, 70, 118, 0.1);
  --pc-shadow-nav-h: 0 4px 16px 0 rgba(19, 70, 118, 0.18);
  --pc-shadow-menu: 0 12px 15px 0 rgba(95, 95, 95, 0.12);
  --pc-shadow-dl: 0 9px 9px 0 rgba(19, 70, 118, 0.1);
  --pc-shadow-dialog: 0 1px 3px 0 rgba(0, 0, 0, 0.3);
  --pc-shadow-match: 0 8px 16px 0 rgba(0, 73, 127, 0.1);
  --pc-shadow-match-h: 0 12px 22px 0 rgba(0, 73, 127, 0.18);
  --pc-shadow-pill: 0 2px 6px 0 #c6e2ff;
  --pc-shadow-aside: 0 2px 10px 0 rgba(19, 70, 118, 0.12);

  /* ---- metrics ---- */
  --pc-topbar-h: 50px;
  --pc-navbar-h: 60px;
  --pc-header-h: 110px;
  --pc-container: 1200px;
  --pc-bleed-max: 1920px;

  /* ---- type ---- */
  --pc-font: "PingFang TC", "PingFang SC", "Noto Sans TC", "Microsoft JhengHei", system-ui, sans-serif;
  --pc-font-num: "DIN Alternate", "Bahnschrift", "Arial Narrow", Impact, var(--pc-font);

  margin: 0;
  min-width: 1004px; /* floor for a forced ?view=pc; 1004 = 1024 (redirect threshold) − the reserved scrollbar gutter, so a 1024px window never scrolls sideways */
  background: var(--pc-bg);
  color: var(--pc-text-2);
  font-family: var(--pc-font);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   2. RESET (element resets wrapped in :where() so every pc- class outranks them)
   ========================================================================== */
.pc-body :where(*),
.pc-body :where(*)::before,
.pc-body :where(*)::after {
  box-sizing: border-box; /* pseudo-elements are not valid inside :where(), so they get their own selectors */
}
.pc-body :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dd, figure, blockquote) {
  margin: 0;
  padding: 0;
}
.pc-body :where(ul, ol) {
  list-style: none;
}
.pc-body :where(h1, h2, h3, h4, h5, h6) {
  font-size: inherit;
  font-weight: inherit;
}
.pc-body :where(img) {
  display: block;
  max-width: 100%;
  height: auto; /* width/height attributes still give the aspect ratio, so scaled images keep it */
  border: 0;
}
.pc-body :where(svg) {
  display: inline-block;
  flex-shrink: 0;
  vertical-align: middle;
}
.pc-body :where(a) {
  color: inherit;
  text-decoration: none;
}
.pc-body :where(button) {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font: inherit;
  line-height: inherit;
  text-align: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.pc-body :where(input, select, textarea) {
  margin: 0;
  color: inherit;
  font: inherit;
}
.pc-body :where(b, strong) {
  font-weight: 700;
}
.pc-body :where(small) {
  font-size: 80%;
}
.pc-body :where(article, section, aside, header, footer, nav, main) {
  display: block;
}
.pc-body [hidden] {
  display: none !important;
}

/* Page scrollbar in the theme's language, same approach as theme.css: scoped with :has() so it
   only applies to pages that host the desktop template. The gutter is always reserved so short
   and long pages centre identically. */
html:has(.pc-body) {
  background: #f7fbff;
  scrollbar-gutter: stable;
}
/* 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(.pc-body) {
    scrollbar-width: thin;
    scrollbar-color: #5bd1ff transparent;
  }
}
@media (hover: hover) and (pointer: fine) {
  html:has(.pc-body)::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  html:has(.pc-body)::-webkit-scrollbar-track {
    background: transparent;
  }
  html:has(.pc-body)::-webkit-scrollbar-thumb {
    border: 1px solid transparent;
    border-radius: 5000px;
    background: linear-gradient(#25e1fe, #1b91ff) padding-box;
  }
  html:has(.pc-body)::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(#5bd1ff, #1b91ff) padding-box;
  }
}

/* Page skeleton */
.pc-main {
  padding-top: var(--pc-header-h); /* room for the fixed 110px header */
}

/* ==========================================================================
   3.1 HEADER — fixed 110px = topbar 50 + navbar 60
   ========================================================================== */
.pc-header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1999;
  min-width: 1004px; /* same floor as .pc-body: the fixed header must not outgrow the layout viewport */
}

/* Topbar */
.pc-topbar {
  height: var(--pc-topbar-h);
  background: var(--pc-grad-dark);
  color: var(--pc-text-3);
  font-size: 12px;
  line-height: 30px;
}
.pc-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--pc-topbar-h);
}
.pc-topbar__links {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  padding-left: 12px;
}
.pc-topbar__link {
  margin-right: 20px;
  color: var(--pc-text-3);
  font-size: 12px;
  white-space: nowrap;
  transition: color 0.2s;
}
.pc-topbar__actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  padding-right: 12px;
}
.pc-topbar__actions .pc-btn + .pc-btn {
  margin-left: 10px;
}

/* Ticker (topbar announcement; .pc-notice reuses the __viewport/__track/__item classes).
   The JS clones the items once, so translateX(-50%) is a seamless loop. */
.pc-ticker {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  max-width: 410px;
  min-width: 0;
  margin: 0 20px;
  color: var(--pc-text-3);
  font-size: 12px;
}
.pc-ticker > svg {
  width: 16px;
  height: 16px;
  margin-right: 6px;
}
.pc-ticker__viewport {
  flex: 1 1 auto;
  min-width: 0;
  height: 20px;
  overflow: hidden;
  line-height: 20px;
}
.pc-ticker__track {
  display: flex;
  width: max-content;
  white-space: nowrap;
  animation: pc-marquee 30s linear infinite;
  will-change: transform;
}
.pc-ticker__item {
  flex: 0 0 auto;
  margin-right: 100px;
}
/* Pause / play toggle (WCAG 2.2.2: hover alone cannot stop the marquee for keyboard or touch users).
   Two icons: the play icon shows only while paused (aria-pressed="true"); .pc-hero__pause shares the rule. */
.pc-ticker__pause {
  display: flex;
  flex: 0 0 16px;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: 6px;
  border-radius: 3px;
  color: inherit;
  opacity: 0.7;
  transition: opacity 0.2s, color 0.2s;
}
.pc-ticker__pause svg {
  width: 12px;
  height: 12px;
}
.pc-ticker__pause svg + svg,
.pc-hero__pause svg + svg,
.pc-ticker__pause[aria-pressed="true"] svg:first-child,
.pc-hero__pause[aria-pressed="true"] svg:first-child {
  display: none;
}
.pc-ticker__pause[aria-pressed="true"] svg + svg,
.pc-hero__pause[aria-pressed="true"] svg + svg {
  display: inline-block;
}
.pc-ticker--paused .pc-ticker__track {
  animation-play-state: paused;
}

/* Navbar */
.pc-navbar {
  position: relative; /* the mega panel anchors here */
  height: var(--pc-navbar-h);
  background: var(--pc-surface);
  box-shadow: var(--pc-shadow-nav);
  line-height: 60px;
  transition: box-shadow 0.2s;
}
.pc-header--scrolled .pc-navbar {
  box-shadow: var(--pc-shadow-nav-h);
}
.pc-navbar__inner {
  display: flex;
  align-items: center;
  height: var(--pc-navbar-h);
  overflow: hidden;
}
.pc-logo {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  height: 60px;
  margin-right: 24px;
}
.pc-logo img {
  width: 114px;
  height: 32px;
}
.pc-nav {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  height: 60px;
}
.pc-nav__main,
.pc-nav__side {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  height: 60px;
}
.pc-nav__item {
  position: relative;
  height: 60px;
  padding: 0 10px;
}
.pc-nav__main > .pc-nav__item {
  min-width: 60px;
}
/* The 120px activity pill sits at the LEFT end of the right-hand group (spec §3.1). */
.pc-nav__side > .pc-nav__item:has(> .pc-nav__promo) {
  order: -1;
}
.pc-nav__link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  color: var(--pc-text-2);
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  transition: color 0.2s;
}
.pc-nav__link::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 16px;
  left: 0;
  height: 2px;
  background: var(--pc-primary);
  opacity: 0;
  transition: opacity 0.2s;
}
.pc-nav__link--active,
.pc-nav__item--open > .pc-nav__link,
.pc-nav__link:focus-visible {
  color: var(--pc-primary);
}
.pc-nav__link--active::before,
.pc-nav__item--open > .pc-nav__link::before {
  opacity: 1;
}
.pc-nav__link:focus-visible {
  outline-offset: -3px; /* the navbar inner clips at 60px */
}
.pc-nav__caret {
  width: 8px;
  height: 6px;
  margin-left: 4px;
  stroke-width: 4; /* the 24-unit lucide chevron is drawn at 25%: keep it legible */
  transition: transform 0.2s;
}
.pc-nav__item--open .pc-nav__caret {
  transform: rotate(180deg);
}
.pc-nav__promo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 120px;
  height: 60px;
  transition: transform 0.2s;
}
.pc-nav__promo > img,
.pc-nav__promo > svg {
  max-width: 120px;
  max-height: 40px;
}

/* Mega menu: absolute inside .pc-navbar, hidden until .pc-mega--open */
.pc-mega {
  position: absolute;
  top: var(--pc-navbar-h);
  right: 0;
  left: 0;
  z-index: 99;
  display: none;
  height: 301px;
  border-top: 1px solid var(--pc-line);
  background: var(--pc-surface);
  box-shadow: var(--pc-shadow-menu);
  line-height: normal;
}
.pc-mega--open {
  display: block;
}
.pc-mega__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 300px;
}
.pc-mega__head {
  flex: 0 0 250px;
  align-self: flex-start;
  width: 250px;
  padding-top: 70px;
}
.pc-mega__type {
  display: block;
  margin-bottom: 5px;
  color: var(--pc-primary-pale);
  font-family: var(--pc-font-num);
  font-size: 30px;
  font-weight: 700;
  line-height: 35px;
  text-transform: uppercase;
}
.pc-mega__title {
  display: block;
  color: var(--pc-text-1);
  font-size: 14px;
  line-height: 26px;
}
.pc-mega__big {
  display: block;
  color: var(--pc-primary);
  font-family: var(--pc-font-num);
  font-size: 70px;
  font-weight: 700;
  line-height: 83px;
}
.pc-mega__big small {
  font-size: 40px;
  font-weight: inherit;
}
.pc-mega__rail {
  position: relative;
  display: flex;
  flex: 0 0 790px;
  align-items: center;
  width: 790px;
  height: 300px;
}
.pc-mega__track {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  margin: -4px 30px -24px; /* the negative margins cancel the padding in layout, as on .pc-match__track */
  padding: 4px 0 24px; /* overflow-x clips vertically too: room for the 2px hover lift and the 0 11px 12px hover shadow (23px below the card) */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.pc-mega__track::-webkit-scrollbar {
  display: none;
}
.pc-mega__card {
  flex: 0 0 150px;
  width: 150px;
  margin-right: 36px;
  padding-bottom: 8px;
  border-radius: 4px;
  scroll-snap-align: start;
  text-align: center;
  transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.pc-mega__card:last-child {
  margin-right: 0;
}
.pc-mega__card img {
  width: 150px;
  height: 163px;
  border-radius: 4px;
  object-fit: cover;
}
.pc-mega__label {
  display: block;
  margin-top: 15px;
  overflow: hidden;
  color: var(--pc-text-2);
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: color 0.2s;
}
.pc-mega__arrow {
  position: absolute;
  top: 50%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 58px;
  border-radius: 4px;
  background: var(--pc-surface);
  color: var(--pc-text-3);
  transform: translateY(-50%);
  transition: color 0.2s, background-color 0.2s, opacity 0.2s;
}
.pc-mega__arrow--l {
  left: 0;
}
.pc-mega__arrow--r {
  right: 0;
}
.pc-mega__arrow svg {
  width: 20px;
  height: 20px;
}
.pc-mega__arrow:disabled {
  opacity: 0.3;
  cursor: default;
}
.pc-mega__dl {
  flex: 0 0 131px;
  width: 131px;
  text-align: center;
}
.pc-mega__qr {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 104px;
  height: 104px;
  margin: 0 auto;
  padding: 5px;
  border: 1px solid var(--pc-primary);
  border-radius: 4px;
  background: var(--pc-surface);
}
.pc-mega__qr > img,
.pc-mega__qr > svg {
  width: 100%;
  height: 100%;
}
.pc-mega__dltitle {
  display: block;
  margin: 10px 0 2px;
  color: var(--pc-text-1);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}
.pc-mega__dldesc {
  display: block;
  color: var(--pc-text-2);
  font-size: 12px;
  line-height: 17px;
}

/* ==========================================================================
   3.2 HERO — full bleed × 600, fade carousel
   ========================================================================== */
.pc-hero {
  position: relative;
  height: 600px;
  background: #dfeefb;
}
.pc-hero__slide {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  overflow: hidden;
  opacity: 0;
  visibility: hidden; /* inactive slides leave the tab order once the fade has finished */
  transition: opacity 0.5s, visibility 0s 0.5s;
  pointer-events: none;
}
.pc-hero__slide--active {
  z-index: 1;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s, visibility 0s;
  pointer-events: auto;
}
.pc-hero__img {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1920px;
  max-width: none;
  height: 600px;
  transform: translateX(-50%);
}
.pc-hero__dots {
  position: absolute;
  right: 0;
  bottom: 10px; /* li padding 12 puts the bars 22px above the edge */
  left: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
}
.pc-hero__dots > li {
  padding: 12px 4px;
}
.pc-hero__dot {
  display: block;
  width: 20px;
  height: 6px;
  border-radius: 3px;
  background: var(--pc-primary);
  opacity: 0.48;
  transition: width 0.3s, opacity 0.3s;
}
.pc-hero__dot--active {
  width: 60px;
  opacity: 1;
}
/* Autoplay pause / play toggle (WCAG 2.2.2), right of the centred 208px dot row (5 × 28 + 68), at bar-centre height. */
.pc-hero__pause {
  position: absolute;
  bottom: 12px;
  left: calc(50% + 112px);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.15);
  color: var(--pc-primary);
  transition: background-color 0.2s;
}
.pc-hero__pause svg {
  width: 14px;
  height: 14px;
}

/* ==========================================================================
   3.3 SECTION + TITLE (h2 + ghost word + optional "more" link)
   ========================================================================== */
.pc-section {
  position: relative;
  width: 1200px;
  width: min(1200px, calc(100% - 40px));
  margin: 70px auto 0;
}
.pc-section--tight {
  margin-top: 50px;
}
.pc-main > .pc-section:last-child {
  margin-bottom: 70px;
}
.pc-title {
  position: relative;
  margin-bottom: 26px;
  text-align: center;
}
/* Promo cards and feature columns sit 40px under their title (spec §3.3). */
.pc-title + .pc-promos,
.pc-title + .pc-features {
  margin-top: 14px;
}
.pc-title__text {
  position: relative;
  z-index: 1;
  color: var(--pc-text);
  font-size: 36px;
  font-weight: 700;
  line-height: 50px;
}
.pc-title__ghost {
  position: absolute;
  top: 25px;
  left: 50%;
  z-index: 0;
  color: #d8ecff;
  font-family: var(--pc-font-num);
  font-size: 50px;
  font-weight: 700;
  line-height: 37px;
  letter-spacing: -2.5px;
  white-space: nowrap;
  text-transform: uppercase;
  transform: translateX(-50%);
  opacity: 0.35;
  pointer-events: none;
  user-select: none;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .pc-title__ghost {
    color: transparent;
    background: var(--pc-grad-ghost);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: 0.21;
  }
}
.pc-title__more {
  position: absolute;
  top: 26px;
  right: 15px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  color: var(--pc-text-2);
  font-size: 14px;
  line-height: 20px;
  transition: color 0.2s;
}
.pc-title__more svg {
  width: 6px;
  height: 6px;
  margin-left: 4px;
  stroke-width: 5;
}

/* ==========================================================================
   3.4 MATCH PANEL (.pc-match: pills + card rail + detail with chat)
   ========================================================================== */
.pc-match {
  position: relative;
  padding: 15px;
  background: var(--pc-bg);
}
.pc-match__tabs {
  display: flex;
  justify-content: center;
  padding: 12px 0;
}
.pc-match__tabs > * + * {
  margin-left: 45px;
}
.pc-match__rail {
  position: relative;
  padding: 12px 0;
}
/* overflow-x:auto forces overflow-y to clip, so the track is padded (and pulled back with
   negative margins) to keep the card shadows and the hover lift visible. */
.pc-match__track {
  display: flex;
  margin: -4px -4px -28px;
  padding: 4px 4px 28px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 4px; /* snapport = the padded content box, so the first card rests at scrollLeft 0 (desktop.js steps from 0) */
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.pc-match__track::-webkit-scrollbar {
  display: none;
}
.pc-match__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-top: -18px;
  border-radius: 50%;
  background: var(--pc-surface);
  box-shadow: 0 2px 8px 0 rgba(0, 73, 127, 0.15);
  color: var(--pc-text-1);
  transition: color 0.2s, box-shadow 0.2s, opacity 0.2s;
}
.pc-match__arrow--l {
  left: -18px;
}
.pc-match__arrow--r {
  right: -18px;
}
.pc-match__arrow svg {
  width: 18px;
  height: 18px;
}
.pc-match__arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

/* Match card 320×112 */
.pc-mcard {
  position: relative;
  flex: 0 0 320px;
  width: 320px;
  height: 112px;
  margin-right: 12px;
  padding: 6px 6px 12px;
  border-radius: 12px;
  background: var(--pc-match-card);
  box-shadow: var(--pc-shadow-match);
  scroll-snap-align: start;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}
.pc-mcard:last-child {
  margin-right: 0;
}
.pc-mcard--active {
  box-shadow: 0 0 0 1px var(--pc-primary), var(--pc-shadow-match); /* ring instead of a border keeps the 308px inner width */
}
.pc-mcard__head {
  position: relative;
  height: 33px;
  padding: 6px 90px;
}
.pc-mcard__host {
  position: absolute;
  top: 4px;
  left: 0;
  display: flex;
  align-items: center;
  max-width: 88px;
  height: 24px;
  padding: 0 8px 0 35px;
  border-radius: 15px;
  background: var(--pc-surface);
  color: var(--pc-match-team);
  font-size: 12px;
  line-height: 24px;
  white-space: nowrap;
}
.pc-mcard__host img {
  position: absolute;
  top: -2px;
  left: -1px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
}
.pc-mcard__host span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.pc-mcard__league {
  display: block;
  overflow: hidden;
  color: var(--pc-match-team);
  font-size: 14px;
  line-height: 21px;
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pc-mcard__head .pc-live {
  position: absolute;
  top: 10px;
  right: 0;
}
.pc-mcard__body {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  height: 61px;
}
.pc-mcard__team {
  display: flex;
  flex: 0 0 94px;
  flex-direction: column;
  align-items: center;
  width: 94px;
  min-width: 0;
}
.pc-mcard__team img {
  width: 30px;
  height: 30px;
  margin-bottom: 12px;
  border-radius: 50%;
}
.pc-mcard__name {
  max-width: 100%;
  overflow: hidden;
  color: var(--pc-match-team);
  font-size: 14px;
  line-height: 19px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pc-mcard__score {
  display: flex;
  flex: 0 0 120px;
  flex-direction: column;
  align-items: center;
  width: 120px;
  color: var(--pc-match-score);
  font-family: var(--pc-font-num);
  font-size: 20px;
  font-weight: 900;
  line-height: 40px;
  white-space: nowrap;
}
.pc-mcard__time {
  color: var(--pc-match-time);
  font-family: var(--pc-font);
  font-size: 12px;
  font-weight: 400;
  line-height: 17px;
}

/* pc/live.html "更多直播": linked match cards in a wrapping grid, three per container row
   (plain a.pc-mcard, not the selectable rail; the percentage basis keeps it fluid below 1260). */
.pc-livegrid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
}
.pc-livegrid > .pc-mcard {
  flex: 0 0 calc((100% - 40px) / 3);
  width: auto;
  margin-right: 0;
}

/* Match detail 1200×650 */
.pc-match__detail {
  position: relative;
  display: flex;
  height: 650px;
  margin-top: 32px;
  border-radius: 0 0 16px 16px;
  background: var(--pc-surface);
}
.pc-btn.pc-match__more {
  position: absolute;
  top: -20px;
  right: 0;
  z-index: 1;
  width: 123px;
  height: 40px;
  border-radius: 2px;
  background: var(--pc-grad-btn-h);
  box-shadow: var(--pc-shadow-pill);
  font-size: 18px;
  font-weight: 500;
}
.pc-match__left {
  flex: 0 0 860px;
  width: 860px;
  min-width: 0;
  padding: 10px 20px;
}
.pc-match__title {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 46px;
}
.pc-match__tname {
  overflow: hidden;
  color: var(--pc-match-team);
  font-size: 20px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pc-match__title img {
  width: 45px;
  height: 45px;
  margin: 0 12px;
  border-radius: 50%;
}
.pc-match__bigscore {
  margin: 0 12px;
  color: var(--pc-match-score);
  font-family: var(--pc-font-num);
  font-size: 40px;
  font-weight: 900;
  line-height: 46px;
  white-space: nowrap;
}
.pc-match__video {
  position: relative;
  width: 820px;
  height: 464px;
  margin: 10px 0;
  border-radius: 20px;
  overflow: hidden;
  background: var(--pc-match-video);
}
.pc-match__video > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pc-match__play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin: -36px 0 0 -36px;
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  transition: background-color 0.2s, transform 0.2s;
}
.pc-match__play svg {
  width: 32px;
  height: 32px;
  margin-left: 4px;
  fill: currentColor; /* solid triangle instead of the stroked lucide outline */
}
.pc-match__hint {
  position: absolute;
  bottom: 14px;
  left: 16px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 12px;
  line-height: 18px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.pc-match__stats {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 100px;
}
.pc-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pc-stat__label {
  margin-bottom: 6px;
  color: var(--pc-match-time);
  font-size: 12px;
  font-weight: 500;
  line-height: 17px;
}
.pc-stat__box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 216px;
  height: 44px;
  border: 1px solid var(--pc-match-grid);
  border-radius: 8px;
  color: var(--pc-match-team);
  font-family: var(--pc-font-num);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}
.pc-stat__box::before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 50%;
  width: 1px;
  background: var(--pc-match-grid);
}
.pc-stat__box > * {
  flex: 1 1 0;
  text-align: center;
}
.pc-btn.pc-match__cta {
  width: 140px;
  height: 36px;
  border-radius: 2px;
  background: var(--pc-grad-btn-h);
  font-size: 14px;
}

/* Chat 320 wide */
.pc-chat {
  display: flex;
  flex: 0 0 320px;
  flex-direction: column;
  width: 320px;
  margin: 20px 20px 20px 0;
  padding: 12px;
  border-radius: 12px;
  background: var(--pc-match-chat);
}
.pc-chat__list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #cfd6e6 transparent;
}
.pc-chat__msg {
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 21px;
  overflow-wrap: anywhere;
}
.pc-chat__user {
  margin-right: 6px;
  color: rgba(33, 33, 33, 0.4);
}
.pc-chat__text {
  color: var(--pc-match-team);
}
.pc-chat__send {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  height: 36px;
  margin-top: 12px;
}
.pc-chat__input {
  position: relative;
  display: flex;
  flex: 0 0 240px;
  align-items: center;
  width: 240px;
  height: 36px;
  padding: 0 40px 0 10px;
  border-radius: 18px;
  overflow: hidden;
  background: var(--pc-surface);
  color: var(--pc-text-3);
  font-size: 12px;
  white-space: nowrap;
}
.pc-chat__input a {
  margin-left: 3px;
  color: var(--pc-match-link);
}
/* The send icon overlaps the pill's right padding: 240 + 36 + gap would not fit the 296px chat. */
.pc-chat__sendbtn {
  display: flex;
  flex: 0 0 30px;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-left: -35px;
  border-radius: 50%;
  color: var(--pc-match-link);
  transition: background-color 0.2s;
}
.pc-chat__sendbtn svg {
  width: 18px;
  height: 18px;
}
.pc-chat__emoji {
  display: flex;
  flex: 0 0 36px;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-left: auto;
  border-radius: 50%;
  color: var(--pc-match-time);
  transition: color 0.2s, background-color 0.2s;
}
.pc-chat__emoji svg {
  width: 22px;
  height: 22px;
}

/* ==========================================================================
   3.5 RECOMMEND POSTERS — 5 × 234×270
   ========================================================================== */
.pc-posters {
  display: flex;
  margin-bottom: 29px;
}
.pc-poster {
  position: relative;
  display: block;
  flex: 0 0 234px;
  width: 234px;
  height: 270px;
  margin-right: 5px;
  border-radius: 4px;
  overflow: hidden;
  background: #dfeefb;
  transition: transform 0.2s, box-shadow 0.2s;
}
.pc-poster:last-child {
  margin-right: 0;
}
.pc-poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pc-poster__label {
  position: absolute;
  top: 197px;
  right: 0;
  left: 0;
  padding: 0 10px;
  overflow: hidden;
  color: #fff;
  font-size: 21px;
  font-weight: 600;
  line-height: 37.8px;
  text-align: center;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

/* ==========================================================================
   3.6 ANNOUNCEMENT LINE — full width × 20, reuses .pc-ticker__* inner classes
   ========================================================================== */
.pc-notice {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 20px;
  color: var(--pc-text-2);
  font-size: 14px;
}
.pc-notice > svg {
  width: 18px;
  height: 18px;
  margin-right: 6px;
  color: var(--pc-primary);
}
.pc-notice .pc-ticker__viewport {
  flex: 0 1 450px;
  width: 450px;
  height: 20px;
  font-size: 14px;
  line-height: 20px;
}

/* ==========================================================================
   3.7 COMMUNITY CTA — full bleed × 161
   ========================================================================== */
.pc-band {
  position: relative;
  width: 100%;
  max-width: var(--pc-bleed-max);
  margin: 0 auto;
  overflow: hidden;
}
.pc-cta {
  z-index: 0; /* own stacking context so the z-index:-1 art stays inside the band */
  height: 161px;
  margin: 80px auto 160px;
  padding-top: 8px;
  text-align: center;
}
.pc-cta__bg {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: 830px;
  max-width: none;
  height: 150px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.pc-cta__title {
  margin-bottom: 26px;
  color: var(--pc-text);
  font-size: 26px;
  font-weight: 700;
  line-height: 30px;
}
.pc-cta__text {
  color: var(--pc-cta-text);
  font-size: 16px;
  font-weight: 700;
  line-height: 17.6px;
}
.pc-btn.pc-cta__btn {
  width: 324px;
  height: 35px;
  margin-top: 22px;
  font-size: 16px;
  letter-spacing: -1px;
}
.pc-btn.pc-cta__btn svg {
  width: 25px;
  height: 25px;
  margin-left: 6px;
}

/* ==========================================================================
   3.8 APP DOWNLOAD — full bleed × 494
   ========================================================================== */
.pc-app {
  height: 494px;
  margin: 120px auto 92px;
  background: url("../img/pc/app-bg.svg") center / 100% 100% no-repeat;
  overflow: visible; /* the badge pokes 43px above the band into its top margin */
}
.pc-app__box {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 43px 20px 0;
}
.pc-app__badge {
  position: absolute;
  top: -43px;
  left: 50%;
  z-index: 1;
  width: 199px;
  height: 65px;
  transform: translateX(-50%);
  text-align: center;
}
.pc-app__ribbon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 199px;
  height: 37px;
  transform: translate(-50%, -50%);
}
.pc-app__h {
  position: relative;
  color: var(--pc-text);
  font-size: 36px;
  font-weight: 600;
  line-height: 65px;
  white-space: nowrap;
}
.pc-app__left {
  flex: 0 0 507px;
  width: 507px;
  min-width: 0;
}
.pc-app__mock {
  width: 507px;
  height: 447px;
}
.pc-app__right {
  flex: 0 0 647px;
  width: 647px;
  min-width: 0;
  margin-left: 39px;
}
.pc-app__tabs {
  display: flex;
}
.pc-app__panel {
  padding: 37px 0 30px;
}
.pc-app__title {
  padding-bottom: 6px;
  color: var(--pc-accent-blue);
  font-size: 24px;
  font-weight: 600;
  line-height: 26px;
}
.pc-app__sub {
  color: var(--pc-text);
  font-size: 16px;
  line-height: 26px;
}
.pc-app__desc {
  padding: 10px 0 40px;
  color: var(--pc-text-2);
  font-size: 14px;
  line-height: 22px;
}
.pc-app__tips {
  display: flex;
  align-items: flex-start;
}
.pc-app__list {
  flex: 1 1 auto;
  min-width: 0;
}
.pc-app__tip {
  display: flex;
  align-items: flex-start;
  color: var(--pc-text);
  font-size: 14px;
  line-height: 23px;
}
.pc-app__tip + .pc-app__tip {
  margin-top: 5px;
}
.pc-dot {
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  margin: 8px 8px 0 0;
  border-radius: 50%;
  background: var(--pc-primary);
}
.pc-app__cards {
  display: flex;
  flex: 0 0 auto;
  align-items: flex-start;
}
.pc-dlcard {
  display: flex;
  flex: 0 0 180px;
  flex-direction: column;
  align-items: center;
  width: 180px;
  height: 180px;
  padding: 16px 35px;
  border: 2px solid var(--pc-line-soft);
  border-radius: 5.6px;
  background: var(--pc-surface);
  box-shadow: var(--pc-shadow-dl);
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s;
}
.pc-dlcard:first-child {
  margin-left: 18px;
}
.pc-dlcard + .pc-dlcard {
  margin-left: 66px;
}
.pc-dlcard > img,
.pc-dlcard > svg {
  width: 65px;
  height: 65px;
}
.pc-dlcard__info {
  margin: 3px 0 4px;
  color: var(--pc-text-2);
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
}
.pc-btn.pc-dlcard__btn {
  flex: 0 0 auto;
  width: 110px;
  height: 36px;
}

/* ==========================================================================
   3.9 PROMO CARDS — home 576×308, list page 585×308
   ========================================================================== */
.pc-promos {
  display: flex;
  justify-content: space-between;
}
.pc-promo {
  position: relative; /* the button offsets (281/232) are measured from the card, not the body */
  display: flex;
  flex: 0 0 auto;
  width: 576px;
  height: 308px;
  padding: 25px;
  border-radius: 4px;
  background: var(--pc-surface);
  box-shadow: var(--pc-shadow-card);
  transition: transform 0.2s, box-shadow 0.2s;
}
.pc-promo__img {
  flex: 0 0 226px;
  width: 226px;
  height: 258px;
  border-radius: 4px;
  object-fit: cover;
}
.pc-promo__body {
  position: static;
  flex: 0 0 300px;
  width: 300px;
  min-width: 0;
  padding: 10px 0 10px 30px;
}
.pc-promo__body .pc-status {
  margin-bottom: 15px;
}
.pc-promo__title {
  max-width: 272px;
  margin-bottom: 18px;
  overflow: hidden;
  color: var(--pc-text);
  font-size: 24px;
  font-weight: 600;
  line-height: 30px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pc-promo__time {
  margin-bottom: 10px;
  color: var(--pc-text-2);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.5px;
}
.pc-promo__scope {
  display: -webkit-box;
  max-height: 66px;
  overflow: hidden;
  color: var(--pc-text-2);
  font-size: 14px;
  line-height: 22px;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.pc-btn.pc-promo__btn {
  position: absolute;
  top: 232px;
  left: 281px;
  width: 110px;
  height: 36px;
  padding: 9px 27px 7px;
}
/* List-page variant */
.pc-promo--wide {
  width: 585px;
  margin-bottom: 40px;
}
.pc-promo--wide .pc-promo__body {
  flex: 1 1 auto;
  width: auto;
  margin-left: 30px;
  padding: 0;
}
.pc-promo--wide .pc-status {
  margin: 10px 0 15px;
}
.pc-promo--wide .pc-promo__title {
  max-width: 274px;
  margin-bottom: 15px;
  line-height: 43px;
}
.pc-promo--wide .pc-promo__time {
  margin-bottom: 0;
  line-height: 25px;
}
.pc-promo--wide .pc-promo__scope {
  margin-top: 10px;
}
.pc-promo--wide .pc-btn.pc-promo__btn {
  top: 237px;
}

/* ==========================================================================
   3.10 SPONSOR BAND — 1920×401 scaled to the viewport
   ========================================================================== */
.pc-sponsor {
  margin-top: 70px;
}
.pc-sponsor > a {
  display: block;
}
.pc-sponsor img {
  width: 100%;
  height: auto;
}

/* ==========================================================================
   3.11 FEATURES — 3 × 400×493 on feature-bg.svg
   ========================================================================== */
.pc-features {
  display: flex;
  justify-content: space-between;
}
.pc-feature {
  position: relative;
  flex: 0 0 400px;
  width: 400px;
  height: 493px;
  padding-top: 91px;
  border-radius: 4px;
  background: url("../img/pc/feature-bg.svg") center top / 100% auto no-repeat;
  text-align: center;
}
.pc-feature__title {
  position: absolute;
  top: 9px;
  right: 0;
  left: 0;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 44px;
  text-align: center;
}
.pc-feature__avatar {
  display: block;
  width: 138px;
  height: 138px;
  margin: 0 auto;
  border-radius: 50%;
}
.pc-feature__avatar + .pc-feature__row {
  margin-top: 26px;
}
.pc-feature__k {
  margin-bottom: 2px;
  color: var(--pc-primary);
  font-size: 14px;
  line-height: 25px;
}
.pc-feature__v {
  margin-bottom: 16px;
  padding: 0 30px;
  color: var(--pc-text-2);
  font-size: 14px;
  line-height: 25px;
}
.pc-feature__stats {
  margin-top: 38px;
  padding-left: 125px;
  text-align: left;
}
.pc-feature__stats > li {
  display: flex;
  align-items: baseline;
  height: 65px;
  white-space: nowrap;
}
.pc-feature__num {
  margin-right: 17px;
  color: var(--pc-primary);
  font-family: var(--pc-font-num);
  font-size: 36px;
  font-weight: 600;
  line-height: 65px;
}
.pc-feature__num small,
.pc-feature__num + small {
  margin-left: 2px;
  color: var(--pc-primary);
  font-size: 16px;
  font-weight: inherit;
}
.pc-feature__num + small {
  margin: 0 17px 0 -15px;
  font-family: var(--pc-font-num);
  font-weight: 600;
}
.pc-feature__txt {
  color: var(--pc-text-2);
  font-size: 14px;
  line-height: 65px;
}

/* ==========================================================================
   3.12 FOOTER — 289 tall dark gradient
   ========================================================================== */
.pc-footer {
  min-height: 289px;
  padding-bottom: 33px;
  background: var(--pc-grad-dark);
  color: var(--pc-text-footer);
  text-align: center;
}
.pc-footer__media {
  height: 66px;
  border-bottom: 1px solid var(--pc-footer-line);
}
.pc-footer__mediainner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 800px;
  height: 66px;
  margin: 0 auto;
}
.pc-footer__mlabel {
  color: var(--pc-text-2);
  font-size: 12px;
  white-space: nowrap;
}
.pc-footer__micon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 30px;
  margin: 0 27px;
  color: var(--pc-text-3);
  transition: color 0.2s, transform 0.2s;
}
.pc-footer__micon svg {
  width: 28px;
  height: 28px;
}
.pc-btn.pc-footer__mbtn {
  width: 127px;
  height: 38px;
  margin-left: 25px;
  font-size: 14px;
  font-weight: 500;
}
/* 11 partner marks: 120 + 10 × 93 = 1050, centred on the viewport (spec margin 40 192 at 1432). */
.pc-footer__logos {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 1050px;
  max-width: calc(100% - 40px);
  margin: 40px auto 0;
}
.pc-footer__logo {
  display: flex;
  flex: 0 0 93px;
  align-items: center;
  justify-content: center;
  width: 93px;
  height: 50px;
  opacity: 0.85;
  transition: opacity 0.2s;
}
.pc-footer__logo:first-child {
  flex-basis: 120px;
  width: 120px;
}
.pc-footer__logo img {
  width: 100%;
  height: auto;
}
.pc-footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 24px;
}
.pc-footer__links a {
  padding: 0 33px;
  color: var(--pc-text-footer);
  font-size: 12px;
  line-height: 17px;
  white-space: nowrap;
  transition: color 0.2s;
}
.pc-footer__copy {
  margin-top: 24px;
  color: var(--pc-text-3);
  font-size: 12px;
  line-height: 17px;
}

/* ==========================================================================
   3.13 ASIDE — fixed right tool rail, 56 wide
   ========================================================================== */
.pc-aside {
  position: fixed;
  top: 38%;
  right: 30px;
  z-index: 999;
  width: 56px;
}
.pc-aside__main {
  border-radius: 3px;
  overflow: hidden;
  background: var(--pc-aside-bg);
  box-shadow: var(--pc-shadow-aside);
}
.pc-aside__item,
.pc-aside__toggle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  padding: 14px 0;
  color: var(--pc-text-2);
  transition: background-color 0.2s, color 0.2s;
}
.pc-aside__main > * + * {
  border-top: 1px solid rgba(216, 216, 216, 0.6);
}
.pc-aside__item svg,
.pc-aside__toggle svg {
  width: 28px;
  height: 28px;
}
/* Toggle with two icons (x / chevron): the second one shows only while collapsed. */
.pc-aside__toggle svg + svg {
  display: none;
}
.pc-aside--collapsed .pc-aside__toggle svg + svg {
  display: inline-block;
}
.pc-aside--collapsed .pc-aside__toggle svg:first-child:not(:last-child) {
  display: none;
}
.pc-aside--collapsed .pc-aside__main > .pc-aside__item {
  display: none;
}
.pc-aside--collapsed .pc-aside__main > .pc-aside__toggle {
  border-top: 0;
}
.pc-aside__extra {
  margin-top: 20px;
}
.pc-aside__item.pc-aside__item--extra {
  width: 56px;
  height: 58px;
  padding: 10px 0 6px;
  border: 1px solid var(--pc-aside-line);
  border-radius: 8px;
  background: var(--pc-grad-aside);
  color: var(--pc-text-2);
  font-size: 10px;
  font-weight: 500;
  line-height: 14px;
}
.pc-aside__item--extra svg {
  width: 28px;
  height: 21px;
  margin-bottom: 4px;
}

/* ==========================================================================
   3.14 LOGIN DIALOG — fixed overlay, 460 wide box
   ========================================================================== */
.pc-dialog {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3000;
  padding: 15vh 0; /* the box sits 15vh down (spec: margin-top 135px at 900); the wrapper, not the box, scrolls on short viewports */
  overflow-y: auto;
}
.pc-dialog__mask {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
}
.pc-dialog__box {
  position: relative;
  z-index: 1;
  width: 460px;
  margin: 0 auto;
  padding: 54px 0 17px; /* 20 + 24 close button + 10 = the title bar */
  border-radius: 4px;
  background: var(--pc-surface);
  box-shadow: var(--pc-shadow-dialog);
  color: var(--pc-text-1);
  font-size: 14px;
  line-height: 20px;
  text-align: center;
}
.pc-dialog--open .pc-dialog__box {
  animation: pc-dialog-in 0.2s ease-out;
}
.pc-dialog__close {
  position: absolute;
  top: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  color: var(--pc-text-3);
  opacity: 0.6;
  transition: opacity 0.2s, background-color 0.2s;
}
.pc-dialog__close svg {
  width: 16px;
  height: 16px;
}
.pc-dialog__logo {
  display: block;
  width: 110px;
  height: 31px;
  margin: 5px auto 17px; /* content padding 25 − logo margin −20 */
}
.pc-dialog__divider,
.pc-dialog__forgot {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 17px;
}
.pc-dialog__divider > :not(.pc-dialog__line),
.pc-dialog__forgot > :not(.pc-dialog__line) {
  margin: 0 19px;
  opacity: 0.7;
  white-space: nowrap;
}
.pc-dialog__line {
  flex: 0 0 122px;
  width: 122px;
  height: 1px;
  background: var(--pc-grad-divider);
}
.pc-dialog__line:last-child {
  transform: scaleX(-1); /* mirror so both hairlines fade away from the text */
}
.pc-dialog__partners {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 8px 40px 12px;
}
.pc-dialog__partner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: 3.5px 5.5px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e6f7ff, #cfe6ff);
  color: var(--pc-primary-deep);
}
.pc-dialog__partner:nth-child(3n + 2) {
  background: linear-gradient(135deg, #fff1f4, #ffd9e2);
  color: var(--pc-red);
}
.pc-dialog__partner:nth-child(3n) {
  background: linear-gradient(135deg, #eefbf2, #cdeedb);
  color: #2fb574;
}
.pc-dialog__partner svg {
  width: 16px;
  height: 16px;
}
.pc-dialog__partner img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
}

/* Login / register switch 220×40 */
.pc-seg {
  display: flex;
  width: 220px;
  height: 40px;
  margin: 12px auto 16px;
  border: 1px solid rgba(204, 204, 204, 0.5);
  border-radius: 27px;
  background: var(--pc-surface);
}
.pc-seg__btn {
  display: inline-flex;
  flex: 0 0 109px;
  align-items: center;
  justify-content: center;
  width: 109px;
  height: 38px;
  border-radius: 27px;
  color: var(--pc-text);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.27px;
  white-space: nowrap;
  opacity: 0.4;
  transition: background-color 0.2s, color 0.2s, opacity 0.2s;
}
.pc-seg__btn--active,
.pc-seg__btn[aria-selected="true"] {
  background: var(--pc-primary);
  color: #fff;
  opacity: 1;
}

/* Login-method tabs 2 × 182×51 */
.pc-methods {
  display: flex;
  padding: 0 48px 32px;
}
.pc-method {
  display: flex;
  flex: 0 0 182px;
  align-items: center;
  justify-content: center;
  width: 182px;
  height: 51px;
  padding: 15px 10px;
  border-bottom: 2px solid rgba(153, 153, 153, 0.4);
  color: var(--pc-text-3);
  font-size: 16px;
  font-weight: 700;
  line-height: 19px;
  white-space: nowrap;
  transition: color 0.2s, border-color 0.2s;
}
.pc-method svg {
  width: 19px;
  height: 19px;
  margin-right: 6px;
}
.pc-method--active,
.pc-method[aria-selected="true"] {
  border-bottom-color: var(--pc-primary);
  color: var(--pc-primary);
}

/* Form */
.pc-form {
  padding: 0 48px;
  text-align: left;
}
.pc-field {
  position: relative;
  display: flex;
  align-items: center;
  width: 364px;
  height: 42px;
  margin-bottom: 18px;
  border: 1px solid #cccccc;
  border-radius: 6px;
  background: var(--pc-surface);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.pc-field:focus-within {
  border-color: var(--pc-primary);
  box-shadow: 0 0 0 2px rgba(50, 197, 255, 0.15);
}
.pc-field__pre {
  position: relative;
  display: flex;
  flex: 0 0 40px;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--pc-text-3);
}
.pc-field__pre::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 0;
  width: 1px;
  height: 24px;
  background: var(--pc-line);
}
.pc-field__pre svg {
  width: 20px;
  height: 20px;
}
.pc-field input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: 40px;
  padding: 0 15px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--pc-text-1);
  font-size: 14px;
  line-height: 40px;
}
.pc-field input::placeholder {
  color: var(--pc-text-3);
  opacity: 1;
}
/* Edge draws its own reveal eye inside password fields; the template already has one. */
.pc-field input::-ms-reveal,
.pc-field input::-ms-clear {
  display: none;
}
.pc-field__eye {
  display: flex;
  flex: 0 0 40px;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--pc-text-3);
  transition: color 0.2s;
}
.pc-field__eye svg {
  width: 18px;
  height: 18px;
}
.pc-field .pc-btn--tiny {
  flex: 0 0 auto;
  margin-right: 10px;
}
.pc-check {
  display: flex;
  align-items: center;
  margin-bottom: 18px;
  color: var(--pc-text-2);
  font-size: 12px;
  line-height: 17px;
  cursor: pointer;
}
.pc-check input {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  margin: 0 6px 0 0;
  accent-color: var(--pc-primary);
  cursor: pointer;
}
.pc-form .pc-btn--block {
  padding: 13px 20px;
  line-height: 20px;
}
.pc-form .pc-btn--ghost.pc-btn--block {
  height: 40px;
  padding: 0 20px;
}
.pc-dialog__forgot {
  margin: 24px 0 12px;
}
.pc-dialog__forgot .pc-dialog__line {
  flex-basis: 128px;
  width: 128px;
}
.pc-dialog__foot {
  margin-top: 10px;
  padding-top: 17px;
  border-top: 1px solid var(--pc-line);
}
.pc-dialog__foot a {
  display: inline-flex;
  align-items: center;
  color: var(--pc-text-3);
  font-size: 14px;
  line-height: 25px;
  transition: color 0.2s;
}
.pc-dialog__foot svg {
  width: 25px;
  height: 25px;
  margin-right: 8px;
  color: var(--pc-primary);
}
.pc-dialog__tips {
  margin-top: 16px;
  padding: 0 48px;
  color: var(--pc-text-3);
  font-size: 12px;
  line-height: 17px;
}

/* ==========================================================================
   3.15 PROMO LIST PAGE (pc/promo.html)
   ========================================================================== */
.pc-listhero {
  position: relative;
  height: 460px;
  margin-bottom: 50px;
  background: #dfeefb;
}
.pc-listhero img {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1920px;
  max-width: none;
  height: 460px;
  transform: translateX(-50%);
}
.pc-list {
  padding: 54px 0;
}
.pc-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.pc-list__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 50px;
}
.pc-list__empty {
  width: 100%;
  padding: 60px 0;
  color: var(--pc-text-3);
  font-size: 14px;
  text-align: center;
}

/* ==========================================================================
   4. UTILITIES
   ========================================================================== */
.pc-container {
  width: 1200px;
  width: min(1200px, calc(100% - 40px));
  margin: 0 auto;
}
.pc-bleed {
  width: 100%;
  max-width: var(--pc-bleed-max);
  margin: 0 auto;
  overflow: hidden;
}

/* Buttons */
.pc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: var(--pc-primary);
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s, filter 0.2s, opacity 0.2s, transform 0.2s;
}
.pc-btn--tiny {
  min-width: 60px;
  height: 20px;
  padding: 0 8px;
  border-radius: 3px;
  background: var(--pc-primary);
  box-shadow: var(--pc-shadow-btn);
  font-size: 10px;
  font-weight: 500;
}
.pc-btn--grad {
  border-radius: 4px;
  background: var(--pc-grad-btn);
  box-shadow: var(--pc-shadow-btn);
  color: #fff;
  font-size: 14px;
}
.pc-btn--pill {
  border: 1px solid var(--pc-pill-line);
  border-radius: 20px;
}
.pc-btn--ghost {
  border: 1px solid rgba(153, 153, 153, 0.4);
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  color: var(--pc-text-2);
  font-size: 12px;
  font-weight: 500;
}
.pc-btn--ghost svg {
  width: 14px;
  height: 14px;
  margin-right: 6px;
}
.pc-btn--block {
  width: 100%;
}
.pc-btn:disabled,
.pc-btn[aria-disabled="true"] {
  background: var(--pc-disabled);
  box-shadow: none;
  color: #fff;
  cursor: not-allowed;
  filter: none;
}
.pc-btn--ghost:disabled {
  border-color: var(--pc-disabled);
  background: transparent;
  color: var(--pc-disabled);
}

/* Status tag 70×23 */
.pc-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 70px;
  height: 23px;
  padding: 3px 7px;
  border-radius: 3px;
  background: var(--pc-red);
  color: #fff;
  font-size: 12px;
  line-height: 17px;
  letter-spacing: 0.43px;
  white-space: nowrap;
}
.pc-status--soon {
  background: var(--pc-primary);
}
.pc-status--end {
  background: var(--pc-disabled);
}

/* Match category pill 150×36 */
.pc-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 36px;
  border: 1px solid var(--pc-match-line);
  border-radius: 2px;
  background: var(--pc-surface);
  box-shadow: var(--pc-shadow-pill);
  color: var(--pc-text);
  font-size: 14px;
  white-space: nowrap;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.pc-pill--active,
.pc-pill[aria-selected="true"] {
  border-color: transparent;
  background: var(--pc-grad-btn-h);
  color: #fff;
}

/* App download tab 152×35 */
.pc-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 152px;
  height: 35px;
  margin-right: 13px;
  padding: 7px 0;
  border: 1px solid var(--pc-primary);
  border-radius: 3px;
  background: transparent;
  color: var(--pc-primary);
  font-size: 14px;
  font-weight: 500;
  line-height: 19px;
  white-space: nowrap;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.pc-tab:last-child {
  margin-right: 0;
}
.pc-tab--active,
.pc-tab[aria-selected="true"] {
  padding: 8px 0;
  border-color: transparent;
  background: var(--pc-grad-btn);
  color: #fff;
}

/* Promo-list filter button 106×42 */
.pc-fbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 106px;
  height: 42px;
  margin: 0 10px;
  padding: 12px 20px;
  border: 1px solid var(--pc-primary);
  border-radius: 4px;
  background: transparent;
  color: var(--pc-primary);
  font-size: 16px;
  font-weight: 500;
  line-height: 18px;
  white-space: nowrap;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.pc-fbtn--active,
.pc-fbtn[aria-selected="true"] {
  border-color: transparent;
  background: var(--pc-grad-btn);
  box-shadow: var(--pc-shadow-btn);
  color: #fff;
}

/* LIVE badge 18×12: draws its own three white bars, so leave the element empty
   (or give it only a .pc-sr-only label). */
.pc-live {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 12px;
  border-radius: 2px;
  background: var(--pc-match-score);
  font-size: 0;
  vertical-align: middle;
}
.pc-live::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 4px;
  width: 10px;
  height: 8px;
  background:
    linear-gradient(#fff, #fff) 0 100% / 2px 5px no-repeat,
    linear-gradient(#fff, #fff) 4px 100% / 2px 8px no-repeat,
    linear-gradient(#fff, #fff) 8px 100% / 2px 4px no-repeat;
}

/* Misc */
.pc-num {
  font-family: var(--pc-font-num);
}
.pc-noscroll {
  overflow: hidden; /* scrollbar-gutter: stable on html keeps the layout width */
}
.pc-hide-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.pc-hide-scrollbar::-webkit-scrollbar {
  display: none;
}
.pc-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Focus ring (keyboard only) */
.pc-body :where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--pc-focus);
  outline-offset: 2px;
}
.pc-topbar :where(a, button):focus-visible,
.pc-footer :where(a, button):focus-visible,
.pc-match__play:focus-visible,
.pc-hero__dot:focus-visible,
.pc-hero__pause:focus-visible {
  outline-color: #fff;
}
.pc-mcard:focus-visible,
.pc-poster:focus-visible {
  outline-offset: 0;
}

/* ==========================================================================
   5. HOVER (real pointers only)
   ========================================================================== */
@media (hover: hover) {
  .pc-topbar__link:hover {
    color: #fff;
  }
  .pc-ticker:hover .pc-ticker__track,
  .pc-notice:hover .pc-ticker__track {
    animation-play-state: paused;
  }
  .pc-ticker__pause:hover {
    opacity: 1;
  }
  .pc-hero__pause:hover {
    background: #fff;
  }
  .pc-nav__link:hover {
    color: var(--pc-primary);
  }
  .pc-nav__link:hover::before {
    opacity: 1;
  }
  .pc-nav__promo:hover {
    transform: translateY(-1px);
  }
  .pc-mega__card:hover {
    background: var(--pc-bg);
    box-shadow: var(--pc-shadow-card);
    transform: translateY(-2px);
  }
  .pc-mega__card:hover .pc-mega__label {
    color: var(--pc-primary);
  }
  .pc-mega__arrow:hover:not(:disabled) {
    background: var(--pc-bg);
    color: var(--pc-primary);
  }
  .pc-title__more:hover {
    color: var(--pc-primary);
  }
  .pc-match__arrow:hover:not(:disabled) {
    box-shadow: 0 4px 12px 0 rgba(0, 73, 127, 0.22);
    color: var(--pc-primary);
  }
  .pc-mcard:hover {
    box-shadow: var(--pc-shadow-match-h);
    transform: translateY(-2px);
  }
  .pc-mcard--active:hover {
    box-shadow: 0 0 0 1px var(--pc-primary), var(--pc-shadow-match-h);
  }
  .pc-match__play:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.05);
  }
  .pc-chat__sendbtn:hover,
  .pc-chat__emoji:hover {
    background: rgba(29, 162, 255, 0.1);
  }
  .pc-chat__emoji:hover {
    color: var(--pc-match-link);
  }
  .pc-poster:hover {
    box-shadow: var(--pc-shadow-card-h);
    transform: translateY(-2px);
  }
  .pc-dlcard:hover {
    box-shadow: 0 14px 18px 0 rgba(19, 70, 118, 0.16);
    transform: translateY(-2px);
  }
  .pc-promo:hover {
    box-shadow: var(--pc-shadow-card-h);
    transform: translateY(-2px);
  }
  .pc-footer__micon:hover {
    color: #fff;
    transform: translateY(-1px);
  }
  .pc-footer__logo:hover {
    opacity: 1;
  }
  .pc-footer__links a:hover {
    color: #fff;
  }
  .pc-aside__item:hover,
  .pc-aside__toggle:hover {
    background: var(--pc-bg);
    color: var(--pc-primary);
  }
  .pc-aside__item.pc-aside__item--extra:hover {
    color: var(--pc-primary);
  }
  .pc-dialog__close:hover {
    background: var(--pc-bg);
    opacity: 1;
  }
  .pc-field__eye:hover {
    color: var(--pc-text-1);
  }
  .pc-dialog__foot a:hover {
    color: var(--pc-primary);
  }
  .pc-seg__btn:not(.pc-seg__btn--active):hover {
    opacity: 0.7;
  }
  .pc-method:not(.pc-method--active):hover {
    color: var(--pc-text-1);
  }

  /* Buttons: solid → lighter, tiny → gradient, gradient → brighter */
  .pc-btn:hover {
    background-color: var(--pc-primary-hover);
  }
  .pc-btn--tiny:hover {
    background: var(--pc-grad-btn);
  }
  .pc-btn--grad:hover {
    filter: brightness(1.06);
  }
  .pc-btn--ghost:hover {
    border-color: var(--pc-text-3);
    background: transparent;
    color: var(--pc-text-1);
  }
  .pc-btn:disabled:hover,
  .pc-btn[aria-disabled="true"]:hover {
    background: var(--pc-disabled);
    filter: none;
  }
  .pc-btn--ghost:disabled:hover {
    background: transparent;
  }
  .pc-pill:not(.pc-pill--active):hover {
    border-color: var(--pc-primary);
    color: var(--pc-primary);
  }
  .pc-tab:not(.pc-tab--active):hover,
  .pc-fbtn:not(.pc-fbtn--active):hover {
    background: rgba(50, 197, 255, 0.08);
  }
}

/* ==========================================================================
   6. MOTION
   ========================================================================== */
@keyframes pc-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@keyframes pc-dialog-in {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pc-body *,
  .pc-body *::before,
  .pc-body *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  .pc-ticker__track {
    animation: none;
  }
}

/* ==========================================================================
   7. RESPONSIVE 1024–1240: fluid container, grids scale, rails scroll.
   1260 rather than 1240 because the reserved scrollbar gutter already makes
   the layout viewport narrower than the media-query width.
   ========================================================================== */
@media (max-width: 1260px) {
  .pc-container,
  .pc-section {
    width: calc(100% - 40px);
  }

  /* header */
  .pc-logo {
    margin-right: 16px;
  }
  .pc-nav__side > .pc-nav__item {
    padding: 0 6px;
  }
  .pc-mega__rail {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    margin: 0 20px;
  }

  /* match panel */
  .pc-match__detail {
    height: auto;
    min-height: 0;
  }
  .pc-match__left {
    flex: 1 1 0;
    width: auto;
  }
  .pc-match__video {
    width: 100%;
    height: auto;
    aspect-ratio: 820 / 464;
  }
  .pc-match__stats {
    justify-content: space-between;
  }
  .pc-stat {
    flex: 1 1 0;
    min-width: 0;
    margin: 0 4px;
  }
  .pc-stat__box {
    width: 100%;
    min-width: 0;
  }
  .pc-btn.pc-match__cta {
    flex: 0 0 auto;
    width: 120px;
    margin-left: 4px;
  }

  /* posters */
  .pc-poster {
    flex: 1 1 0;
    width: auto;
    height: auto;
    aspect-ratio: 234 / 270;
  }
  .pc-poster__label {
    top: 73%;
  }

  /* app band */
  .pc-app__left {
    flex: 0 1 507px;
  }
  .pc-app__mock {
    width: 100%;
    height: auto;
  }
  .pc-app__right {
    flex: 1 1 0;
    width: auto;
    min-width: 480px;
    margin-left: 24px;
  }
  .pc-app__tabs .pc-tab {
    flex: 1 1 0;
    width: auto;
    margin-right: 8px;
  }
  .pc-app__tabs .pc-tab:last-child {
    margin-right: 0;
  }
  .pc-dlcard + .pc-dlcard {
    margin-left: 20px;
  }

  /* promos */
  .pc-promos .pc-promo {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
  }
  .pc-promos .pc-promo + .pc-promo {
    margin-left: 30px;
  }
  .pc-promo__body {
    flex: 1 1 auto;
    width: auto;
  }
  .pc-promo__title {
    max-width: 100%;
  }
  .pc-list__grid .pc-promo {
    flex: 0 0 calc(50% - 15px);
    width: auto;
    min-width: 0;
  }

  /* features: stretch the art to the column so the 60px header band keeps its height */
  .pc-feature {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    background-size: 100% 100%;
  }
  .pc-feature + .pc-feature {
    margin-left: 20px;
  }
  .pc-feature__stats {
    padding-left: 80px;
  }

  /* footer */
  .pc-footer__logos {
    width: auto;
  }
  .pc-footer__logo {
    flex: 0 1 93px;
    min-width: 0;
    margin: 0 4px;
  }
  .pc-footer__logo:first-child {
    flex: 0 1 120px;
  }
  .pc-footer__links a {
    padding: 0 20px;
  }

  /* aside */
  .pc-aside {
    right: 8px;
  }
}
/* Safari < 15 has no aspect-ratio: keep the fluid posters and video from collapsing. */
@supports not (aspect-ratio: 1 / 1) {
  @media (max-width: 1260px) {
    .pc-poster {
      height: 250px;
    }
    .pc-match__video {
      height: 400px;
    }
  }
}