/* Steam 社区欢迎页 · 电脑端页面模块（日间小清新）
 * 页头页脚是站点自己的（LS.header / LS.footer），中间这一整块归本模块，选择器都收在模块根类下。
 * 配色「晴天游戏厅」：主色跟随站点后台的「电脑端主颜色」「电脑端主颜色hover」（--ls-primary / --ls-primary-hover），
 * 底色是主色调的近白，天空蓝、蜜桃、阳光黄做点缀；
 * 细节动画：漂浮的小图形（跟着鼠标错开）、幻灯片轮播、数字滚动、标签慢慢横移、悬停上浮与按压回弹。
 */
@font-face {
  font-family: "WL Big Shoulders";
  src: url("fonts/big-shoulders-display-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* ================= 全站统一背景（开始） =================
 * 欢迎页模块往所有电脑端页面的 pc.global.body_end_html 槽里放一个 .playerclub-site-bg，
 * 宿主因此在每一页都加载这份样式。下面这几条覆盖程序默认的灰色背景（body #f5f6f7），
 * 全站电脑端页面（含欢迎页、圈子聚合页）都用这一套：主色调的浅底 + 三团柔和色块 + 一层很淡的点阵。
 * 颜色全部取自站点后台「电脑端主颜色」「电脑端主颜色hover」（--ls-primary、--ls-primary-hover、--ls-primary-rgb），
 * 改了主色，全站背景跟着变。只用 rgba 与透明度叠色，不依赖 color-mix，老一些的浏览器也一样。
 * 后台「全站统一背景」关掉时槽里不放东西，这份样式就不会出现在别的页面上。
 */
html body {
  background-color: #fff;
  background-image: linear-gradient(rgba(var(--ls-primary-rgb, 31, 174, 134), .055), rgba(var(--ls-primary-rgb, 31, 174, 134), .055));
}
.playerclub-site-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(40% 50% at 0% 100%, rgba(var(--ls-primary-rgb, 31, 174, 134), .10), transparent 70%),
    radial-gradient(36% 40% at 38% 0%, rgba(var(--ls-primary-rgb, 31, 174, 134), .11), transparent 70%),
    linear-gradient(180deg, rgba(var(--ls-primary-rgb, 31, 174, 134), .085) 0%, rgba(var(--ls-primary-rgb, 31, 174, 134), .055) 55%, rgba(var(--ls-primary-rgb, 31, 174, 134), .04) 100%),
    #fff;
}
/* 右上角那团用 hover 色：它没有 RGB 变量，整团画成实色、再整体调透明度 */
.playerclub-site-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(42% 52% at 96% 0%, var(--ls-primary-hover, #17936f), transparent 70%);
  opacity: .15;
}
.playerclub-site-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: radial-gradient(rgba(29, 43, 54, .07) 1.2px, transparent 1.3px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 85%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 85%);
}
/* ================= 全站统一背景（结束） ================= */

.playerclub-pc-page-welcome {
  --pc-bg: #f4f9f7;
  --pc-surface: #ffffff;
  --pc-ink: #1d2b36;
  --pc-sub: #5d6d7a;
  --pc-faint: #93a1ad;
  --pc-line: #e1eae7;
  /* 主色跟随站点：后台「电脑端主颜色」「电脑端主颜色hover」由程序输出为 --ls-primary、--ls-primary-hover（另有 --ls-primary-rgb）。
   * 括号里是取不到站点变量时（如本地预览）的后备色。用法与程序自带页面一致：
   * 主色按钮、选中态用 --pc-main，悬停时换 --pc-main-hover；平时是中性色、悬停才变主色的文字图标用 --pc-main；浅底用主色加透明度。 */
  --pc-main: var(--ls-primary, #1fae86);
  --pc-main-hover: var(--ls-primary-hover, #17936f);
  --pc-main-rgb: var(--ls-primary-rgb, 31, 174, 134);
  --pc-main-soft: rgba(var(--pc-main-rgb), .14);
  /* 同样的浅主色铺在白底上，压在图片或彩色底上面时用它，才不会透出底下的颜色 */
  --pc-main-soft-solid: linear-gradient(var(--pc-main-soft), var(--pc-main-soft)), #fff;
  --pc-sky: #4b9df2;
  --pc-sky-soft: #e1eefd;
  --pc-peach: #ff8a65;
  --pc-peach-soft: #ffe8df;
  --pc-sun: #ffc23d;
  --pc-sun-soft: #fff3cf;
  --pc-shadow: 0 1px 4px rgba(29, 43, 54, .05), 0 8px 19px rgba(29, 43, 54, .07);
  --pc-shadow-lift: 0 4px 8px rgba(29, 43, 54, .06), 0 16px 29px rgba(var(--pc-main-rgb), .14);
  --pc-display: "WL Big Shoulders", "Bahnschrift", "DIN Alternate", "Arial Narrow", sans-serif;
  --pc-cjk: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  --pc-spring: cubic-bezier(.34, 1.56, .64, 1);
  --pc-ease: cubic-bezier(.2, .8, .2, 1);
  --cf-autoplay: 6s;

  container-type: inline-size;
  position: relative;
  display: block;
  overflow: hidden;
  background: transparent;
  color: var(--pc-ink);
  font-family: var(--pc-cjk);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  isolation: isolate;
}
.playerclub-pc-page-welcome *,
.playerclub-pc-page-welcome *::before,
.playerclub-pc-page-welcome *::after { box-sizing: border-box; }
.playerclub-pc-page-welcome a { color: inherit; text-decoration: none; }
.playerclub-pc-page-welcome button { font: inherit; color: inherit; }
.playerclub-pc-page-welcome h1,
.playerclub-pc-page-welcome h2,
.playerclub-pc-page-welcome h3,
.playerclub-pc-page-welcome p { margin: 0; }
.playerclub-pc-page-welcome :focus-visible {
  outline: 2px solid var(--pc-main);
  outline-offset: 3px;
  border-radius: 8px;
}
.playerclub-pc-page-welcome .wl-wrap {
  position: relative;
  max-width: 1240px;
  margin: 0 auto;
  padding-left: 32px;
  padding-right: 32px;
}

/* ================= 漂浮的小图形 ================= */
.playerclub-pc-page-welcome .wl-deco {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.playerclub-pc-page-welcome .wl-deco i {
  position: absolute;
  display: block;
  translate: calc(var(--px, 0) * var(--depth, 10px)) calc(var(--py, 0) * var(--depth, 10px));
  transition: translate .6s var(--pc-ease);
  animation: wl-float var(--dur, 9s) ease-in-out infinite alternate;
}
.playerclub-pc-page-welcome .dk-ring { --depth: 18px; --dur: 8s; top: 14%; left: 44%; width: 46px; height: 46px; border: 6px solid var(--pc-main); border-radius: 50%; opacity: .35; }
.playerclub-pc-page-welcome .dk-square { --depth: -14px; --dur: 11s; top: 70%; left: 3%; width: 34px; height: 34px; border-radius: 9px; background: var(--pc-sky); opacity: .22; rotate: 18deg; }
.playerclub-pc-page-welcome .dk-pad {
  /* 十字键 */
  --depth: 24px;
  --dur: 10s;
  top: 9%;
  right: 4%;
  width: 40px;
  height: 40px;
  background:
    linear-gradient(var(--pc-peach), var(--pc-peach)) center / 14px 100% no-repeat,
    linear-gradient(var(--pc-peach), var(--pc-peach)) center / 100% 14px no-repeat;
  border-radius: 4px;
  opacity: .4;
}
.playerclub-pc-page-welcome .dk-plus {
  --depth: -20px;
  --dur: 7s;
  bottom: 12%;
  left: 40%;
  width: 22px;
  height: 22px;
  background:
    linear-gradient(var(--pc-sun), var(--pc-sun)) center / 6px 100% no-repeat,
    linear-gradient(var(--pc-sun), var(--pc-sun)) center / 100% 6px no-repeat;
  opacity: .8;
}
.playerclub-pc-page-welcome .dk-dot { --depth: 30px; --dur: 6s; top: 30%; left: 2%; width: 14px; height: 14px; border-radius: 50%; background: var(--pc-peach); opacity: .45; }
.playerclub-pc-page-welcome .dk-tri {
  --depth: -26px;
  --dur: 12s;
  bottom: 8%;
  right: 3%;
  width: 0;
  height: 0;
  border-left: 18px solid transparent;
  border-right: 18px solid transparent;
  border-bottom: 30px solid var(--pc-main);
  opacity: .25;
}
.playerclub-pc-page-welcome .dk-pill { --depth: 12px; --dur: 9.5s; top: 54%; left: 47%; width: 54px; height: 18px; border-radius: 999px; background: var(--pc-sky); opacity: .18; rotate: -24deg; }
@keyframes wl-float {
  from { transform: translateY(-8px) rotate(-6deg); }
  to { transform: translateY(10px) rotate(8deg); }
}

/* ================= 主视觉 ================= */
.playerclub-pc-page-welcome .wl-hero {
  --px: 0;
  --py: 0;
  position: relative;
  padding: 60px 0 46px;
}
/* 主视觉右侧随幻灯片淡淡染上当前那款游戏的颜色；四周渐隐，底下仍是全站统一背景。
 * 模糊、提亮和椭圆渐隐都由脚本画进画布（见 module.js 的 paintBackdrop），这里不要再加 filter 或 mask-image：
 * 带遮罩的元素在淡入淡出时会临时建合成层，遮罩没画好的那一帧整张图会铺满主视觉，左侧文字区闪色块（1.3.4 及以前）。 */
.playerclub-pc-page-welcome .wl-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.playerclub-pc-page-welcome .wl-hero-bg canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.playerclub-pc-page-welcome .wl-hero-bg canvas.is-on { opacity: .16; }
.playerclub-pc-page-welcome .wl-hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(320px, 4fr) minmax(0, 7fr);
  gap: 64px;
  align-items: center;
}
.playerclub-pc-page-welcome .wl-hero-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
}
.playerclub-pc-page-welcome .wl-h1 {
  font-size: clamp(34px, 4.4cqw, 56px);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: .01em;
  color: var(--pc-ink);
  text-wrap: balance;
}
.playerclub-pc-page-welcome .wl-intro {
  max-width: 30em;
  font-size: 16px;
  line-height: 1.8;
  color: var(--pc-sub);
}
.playerclub-pc-page-welcome .wl-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.playerclub-pc-page-welcome .wl-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 22px;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 800;
  overflow: hidden;
  cursor: pointer;
  transition: transform .35s var(--pc-spring), background .2s ease, box-shadow .25s ease, border-color .2s ease, color .2s ease;
}
.playerclub-pc-page-welcome .wl-btn svg { width: 19px; height: 19px; flex-shrink: 0; transition: transform .3s var(--pc-spring); }
.playerclub-pc-page-welcome .wl-btn:hover { transform: translateY(-2px); }
.playerclub-pc-page-welcome .wl-btn:active { transform: translateY(0) scale(.96); transition-duration: .12s; }
.playerclub-pc-page-welcome .wl-btn-main {
  border: 0;
  background: var(--pc-main);
  color: #fff;
  box-shadow: 0 5px 13px rgba(var(--pc-main-rgb), .3), inset 0 -2px 0 rgba(0, 0, 0, .08);
}
.playerclub-pc-page-welcome .wl-btn-main:hover { background: var(--pc-main-hover); box-shadow: 0 8px 17px rgba(var(--pc-main-rgb), .38), inset 0 -2px 0 rgba(0, 0, 0, .08); }
.playerclub-pc-page-welcome .wl-btn-main:hover svg { transform: translateX(4px); }
.playerclub-pc-page-welcome .wl-btn-ghost {
  border: 1px solid var(--pc-line);
  background: var(--pc-surface);
  color: var(--pc-ink);
  box-shadow: 0 3px 8px rgba(29, 43, 54, .06);
}
.playerclub-pc-page-welcome .wl-btn-ghost svg { color: var(--pc-sky); }
.playerclub-pc-page-welcome .wl-btn-ghost:hover { border-color: #cfe1f7; background: #f8fbff; }
.playerclub-pc-page-welcome .wl-btn-ghost:hover svg { transform: rotate(-20deg) scale(1.1); }
.playerclub-pc-page-welcome .wl-login {
  padding: 0;
  border: 0;
  background: none;
  font-size: 14px;
  color: var(--pc-sub);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(93, 109, 122, .35);
  text-underline-offset: 4px;
  transition: color .2s ease, text-decoration-color .2s ease;
}
.playerclub-pc-page-welcome .wl-login:hover { color: var(--pc-main); text-decoration-color: var(--pc-main); }

.playerclub-pc-page-welcome .wl-online {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 34px;
  font-size: 14px;
  color: var(--pc-sub);
}
.playerclub-pc-page-welcome .wl-online[hidden] { display: none; }
.playerclub-pc-page-welcome .wl-faces { display: flex; }
.playerclub-pc-page-welcome .wl-face-item { display: block; margin-left: -9px; border-radius: 50%; }
.playerclub-pc-page-welcome .wl-face-item:first-child { margin-left: 0; }
/* 刚上线的人从小弹进来 */
.playerclub-pc-page-welcome .wl-face-item.is-new { animation: wl-face-in .55s var(--pc-spring) both; }
.playerclub-pc-page-welcome .wl-face-item.is-new:nth-child(2) { animation-delay: .05s; }
.playerclub-pc-page-welcome .wl-face-item.is-new:nth-child(3) { animation-delay: .1s; }
.playerclub-pc-page-welcome .wl-face-item.is-new:nth-child(4) { animation-delay: .15s; }
.playerclub-pc-page-welcome .wl-face-item.is-new:nth-child(5) { animation-delay: .2s; }
.playerclub-pc-page-welcome .wl-face-item.is-new:nth-child(6) { animation-delay: .25s; }
@keyframes wl-face-in { from { opacity: 0; transform: scale(.3) translateY(6px); } to { opacity: 1; transform: none; } }
.playerclub-pc-page-welcome .wl-face {
  display: block;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: var(--pc-line);
  object-fit: cover;
  box-shadow: 0 1px 4px rgba(29, 43, 54, .12);
  transition: transform .3s var(--pc-spring);
}
.playerclub-pc-page-welcome .wl-face:hover { transform: translateY(-4px) scale(1.08); }
.playerclub-pc-page-welcome .wl-online b { display: inline-block; color: var(--pc-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
/* 在线人数变了：数字弹一下、闪一下主色 */
.playerclub-pc-page-welcome .wl-online b.is-bump,
.playerclub-pc-page-welcome .wl-stat-num.is-bump { animation: wl-bump .7s var(--pc-spring); }
.playerclub-pc-page-welcome .wl-stat-num.is-bump { transform-origin: left 60%; }
@keyframes wl-bump {
  0% { transform: scale(1); }
  35% { transform: scale(1.3); color: var(--pc-main); }
  100% { transform: scale(1); }
}
.playerclub-pc-page-welcome .wl-pulse {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pc-main);
  flex-shrink: 0;
}
.playerclub-pc-page-welcome .wl-pulse::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--pc-main);
  opacity: 0;
  animation: wl-pulse 2.2s ease-out infinite;
}
@keyframes wl-pulse { 0% { transform: scale(.5); opacity: .8; } 100% { transform: scale(1.8); opacity: 0; } }

/* 主视觉的入场：文字逐行升起、幻灯片从下方浮上 */
.playerclub-pc-page-welcome .wl-hero-text > * { animation: wl-rise .7s var(--pc-ease) both; }
.playerclub-pc-page-welcome .wl-hero-text > :nth-child(2) { animation-delay: .08s; }
.playerclub-pc-page-welcome .wl-hero-text > :nth-child(3) { animation-delay: .16s; }
.playerclub-pc-page-welcome .wl-hero-text > :nth-child(4) { animation-delay: .24s; }
.playerclub-pc-page-welcome .wl-hero-text > :nth-child(5) { animation-delay: .32s; }
@keyframes wl-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.playerclub-pc-page-welcome .wl-show-col { animation: wl-place .8s .12s var(--pc-ease) both; }
@keyframes wl-place { from { opacity: 0; transform: translateY(40px) scale(.97); } to { opacity: 1; transform: none; } }

/* ================= 幻灯片：中间主题 + 两侧倾斜小图，旋转轮播 ================= */
.playerclub-pc-page-welcome .wl-show-col {
  container-type: inline-size;
  min-width: 0;
}
.playerclub-pc-page-welcome .cf {
  --cf-w: min(64cqw, 600px);
  --cf-shift: 4cqw;
  position: relative;
}
.playerclub-pc-page-welcome .cf-stage {
  position: relative;
  height: calc(var(--cf-w) * .625 + 36px);
  perspective: 1100px;
  perspective-origin: 50% 40%;
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}
.playerclub-pc-page-welcome .cf-stage::after {
  /* 落在地上的一团柔影 */
  content: "";
  position: absolute;
  left: calc(50% + var(--cf-shift));
  bottom: 0;
  width: calc(var(--cf-w) * .9);
  height: 26px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(31, 90, 76, .22), transparent);
  pointer-events: none;
}
.playerclub-pc-page-welcome .cf-slide {
  --x: 0%;
  --z: 0px;
  --ry: 0deg;
  --s: 1;
  --o: 1;
  --dim: 0;
  --tx: 0deg;
  --ty: 0deg;
  position: absolute;
  top: 8px;
  left: calc(50% + var(--cf-shift));
  width: var(--cf-w);
  aspect-ratio: 16 / 10;
  margin-left: calc(var(--cf-w) / -2);
  border-radius: 18px;
  overflow: hidden;
  background: #dfe9e6;
  opacity: var(--o);
  transform: translateX(var(--x)) translateZ(var(--z)) rotateY(calc(var(--ry) + var(--ty))) rotateX(var(--tx)) scale(var(--s));
  transition: transform .85s cubic-bezier(.22, .8, .2, 1), opacity .6s ease, box-shadow .5s ease;
  box-shadow: 0 12px 24px rgba(29, 43, 54, .14);
  cursor: pointer;
  will-change: transform;
  -webkit-tap-highlight-color: transparent;
}
.playerclub-pc-page-welcome .cf-slide.is-tilting { transition: transform .2s ease-out, opacity .6s ease, box-shadow .5s ease; }
.playerclub-pc-page-welcome .cf-slide.is-center {
  cursor: default;
  box-shadow: 0 17px 33px rgba(29, 43, 54, .2), 0 11px 47px -13px color-mix(in srgb, var(--cf-c, var(--pc-main)) 70%, transparent);
}
.playerclub-pc-page-welcome .cf-slide::after {
  /* 两侧的小图蒙一层白纱，悬停时掀开一点 */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  background: linear-gradient(rgba(var(--pc-main-rgb), .06), rgba(var(--pc-main-rgb), .06)), #fff;
  opacity: var(--dim);
  transition: opacity .6s ease;
  pointer-events: none;
}
.playerclub-pc-page-welcome .cf-slide.is-side:hover::after { opacity: .12; }
.playerclub-pc-page-welcome .cf-stage.is-rolling .cf-slide { transition-duration: .26s, .22s, .3s; }

.playerclub-pc-page-welcome .cf-art {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(90% 120% at 18% 12%, color-mix(in srgb, var(--cf-c, var(--pc-main)) 50%, transparent) 0%, transparent 60%),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, .25) 0 2px, transparent 2px 12px),
    linear-gradient(135deg, color-mix(in srgb, var(--cf-c, var(--pc-main)) 40%, #f4f9f7) 0%, color-mix(in srgb, var(--cf-c, var(--pc-main)) 70%, #1d2b36) 100%);
}
.playerclub-pc-page-welcome .cf-art-mark {
  position: absolute;
  right: -2%;
  bottom: 30%;
  max-width: 100%;
  overflow: hidden;
  font-family: var(--pc-display);
  font-weight: 800;
  font-size: clamp(80px, 22cqw, 150px);
  line-height: .82;
  white-space: nowrap;
  color: rgba(255, 255, 255, .22);
  pointer-events: none;
}
.playerclub-pc-page-welcome .cf-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity .5s ease;
  pointer-events: none;
}
.playerclub-pc-page-welcome .cf-slide.is-loaded .cf-img { opacity: 1; }
.playerclub-pc-page-welcome .cf-slide.is-noimg .cf-img { display: none; }
.playerclub-pc-page-welcome .cf-slide.is-center .cf-img { animation: cf-kenburns calc(var(--cf-autoplay, 6s) + 4s) ease-out forwards; }
.playerclub-pc-page-welcome.is-paused .cf-slide.is-center .cf-img { animation-play-state: paused; }
@keyframes cf-kenburns { from { transform: scale(1.02); } to { transform: scale(1.09) translate(-1%, -1%); } }
.playerclub-pc-page-welcome .cf-shade {
  /* 图上的字要读得清，底部仍压一层渐暗 */
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, rgba(16, 28, 36, .82) 0%, rgba(16, 28, 36, .42) 34%, rgba(16, 28, 36, 0) 62%),
    linear-gradient(90deg, rgba(16, 28, 36, .28) 0%, transparent 50%);
}
.playerclub-pc-page-welcome .cf-glare {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(520px circle at var(--gx, 50%) var(--gy, 30%), rgba(255, 255, 255, .28), transparent 45%);
  mix-blend-mode: soft-light;
  transition: opacity .3s ease;
  pointer-events: none;
}
.playerclub-pc-page-welcome .cf-slide.is-tilting .cf-glare { opacity: 1; }
.playerclub-pc-page-welcome .cf-mini {
  position: absolute;
  left: 14px;
  bottom: 12px;
  z-index: 7;
  max-width: calc(100% - 28px);
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .9);
  font-size: 13px;
  font-weight: 800;
  color: var(--pc-ink);
  box-shadow: 0 3px 8px rgba(29, 43, 54, .12);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .4s ease, transform .4s var(--pc-ease);
  pointer-events: none;
}
.playerclub-pc-page-welcome .cf-slide.is-side .cf-mini { opacity: 1; transform: none; }
.playerclub-pc-page-welcome .cf-store {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: var(--pc-ink);
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 3px 8px rgba(29, 43, 54, .12);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility 0s linear .3s, background .2s ease, transform .3s var(--pc-spring);
}
.playerclub-pc-page-welcome .cf-store svg { width: 13px; height: 13px; }
.playerclub-pc-page-welcome .cf-store:hover { background: #fff; transform: translateY(-2px); }
.playerclub-pc-page-welcome .cf-slide.is-center .cf-store { opacity: 1; visibility: visible; transition: opacity .3s ease .35s, visibility 0s, background .2s ease, transform .3s var(--pc-spring); }
.playerclub-pc-page-welcome .cf-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 0 clamp(18px, 4cqw, 28px) clamp(16px, 3.6cqw, 24px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity .3s ease, transform .5s var(--pc-ease), visibility 0s linear .3s;
}
.playerclub-pc-page-welcome .cf-slide.is-center .cf-body {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .45s ease .3s, transform .6s var(--pc-ease) .3s, visibility 0s;
}
.playerclub-pc-page-welcome .cf-stage.is-rolling .cf-body,
.playerclub-pc-page-welcome .cf-stage.is-rolling .cf-store { opacity: 0; transition-delay: 0s; }
.playerclub-pc-page-welcome .cf-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.playerclub-pc-page-welcome .cf-tag {
  padding: 1px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--pc-ink);
  background: rgba(255, 255, 255, .86);
}
.playerclub-pc-page-welcome .cf-name {
  font-size: clamp(22px, 5.2cqw, 34px);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: .02em;
  color: #fff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .35);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.playerclub-pc-page-welcome .cf-name-en {
  margin-top: 2px;
  font-family: var(--pc-display);
  font-weight: 800;
  font-size: clamp(14px, 2.8cqw, 18px);
  letter-spacing: .05em;
  color: color-mix(in srgb, var(--cf-c, var(--pc-main)) 35%, #ffffff);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.playerclub-pc-page-welcome .cf-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.playerclub-pc-page-welcome .cf-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 16px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 800;
  overflow: hidden;
  transition: transform .35s var(--pc-spring), background .2s ease, box-shadow .2s ease;
}
.playerclub-pc-page-welcome .cf-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.playerclub-pc-page-welcome .cf-btn:hover { transform: translateY(-2px); }
.playerclub-pc-page-welcome .cf-btn:active { transform: scale(.95); transition-duration: .12s; }
.playerclub-pc-page-welcome .cf-btn-forum { background: var(--pc-main); color: #fff; box-shadow: 0 4px 11px rgba(var(--pc-main-rgb), .4); }
.playerclub-pc-page-welcome .cf-btn-forum:hover { background: var(--pc-main-hover); }
.playerclub-pc-page-welcome .cf-btn-mod { background: rgba(255, 255, 255, .92); color: var(--pc-ink); }
.playerclub-pc-page-welcome .cf-btn-mod svg { color: var(--pc-sky); }
.playerclub-pc-page-welcome .cf-btn-mod:hover { background: #fff; }
.playerclub-pc-page-welcome .cf-ripple {
  position: absolute;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: currentColor;
  opacity: .3;
  pointer-events: none;
  animation: cf-ripple .6s ease-out forwards;
}
@keyframes cf-ripple { to { transform: scale(30); opacity: 0; } }

/* 下面一行：左右切换、圆点（当前那颗里走自动轮播的进度）、随便挑一款 */
.playerclub-pc-page-welcome .cf-ctrl {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 38px;
  margin-top: 8px;
}
.playerclub-pc-page-welcome .cf-nav { grid-column: 2; display: flex; align-items: center; gap: 12px; min-width: 0; transform: translateX(var(--cf-shift)); }
.playerclub-pc-page-welcome .cf-arrow {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--pc-surface);
  color: var(--pc-ink);
  box-shadow: 0 3px 8px rgba(29, 43, 54, .1);
  cursor: pointer;
  transition: transform .35s var(--pc-spring), color .2s ease, box-shadow .2s ease;
}
.playerclub-pc-page-welcome .cf-arrow:hover { color: var(--pc-main); box-shadow: 0 5px 12px rgba(var(--pc-main-rgb), .22); }
.playerclub-pc-page-welcome [data-cf-dir="-1"]:hover { transform: translateX(-3px); }
.playerclub-pc-page-welcome [data-cf-dir="1"]:hover { transform: translateX(3px); }
.playerclub-pc-page-welcome .cf-arrow:active { transform: scale(.9); transition-duration: .1s; }
.playerclub-pc-page-welcome .cf-arrow svg { width: 18px; height: 18px; }
.playerclub-pc-page-welcome .cf-dots { display: flex; align-items: center; gap: 8px; min-width: 0; }
.playerclub-pc-page-welcome .cf-dot {
  position: relative;
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #cbdbd6;
  overflow: hidden;
  cursor: pointer;
  transition: width .45s var(--pc-ease), background .2s ease, transform .3s var(--pc-spring);
}
.playerclub-pc-page-welcome .cf-dot::before { content: ""; position: absolute; inset: -9px -4px; }
.playerclub-pc-page-welcome .cf-dot:hover { background: rgba(var(--pc-main-rgb), .5); transform: scale(1.25); }
.playerclub-pc-page-welcome .cf-dot.is-on { width: 36px; background: var(--pc-main-soft-solid); transform: none; }
.playerclub-pc-page-welcome .cf-dot-fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--pc-main);
  transform-origin: 0 50%;
  transform: scaleX(0);
}
.playerclub-pc-page-welcome .cf-dot.is-on .cf-dot-fill { transform: scaleX(1); }
.playerclub-pc-page-welcome.is-autoplay .cf-dot.is-on .cf-dot-fill { animation: cf-fill var(--cf-autoplay, 6s) linear forwards; }
.playerclub-pc-page-welcome.is-paused .cf-dot.is-on .cf-dot-fill { animation-play-state: paused; }
@keyframes cf-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.playerclub-pc-page-welcome .cf-pick { position: relative; grid-column: 3; display: flex; align-items: center; justify-content: flex-end; min-width: 0; }
/* 「就它了」浮动提示：从骰子按钮上方弹出的小气泡，不占这一行的位置，几秒后自己收起 */
.playerclub-pc-page-welcome .cf-note {
  position: absolute;
  right: 0;
  bottom: calc(100% + 12px);
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 320px;
  padding: 9px 14px;
  border-radius: 14px;
  background: var(--pc-surface);
  box-shadow: 0 3px 8px rgba(29, 43, 54, .08), 0 9px 21px rgba(29, 43, 54, .12);
  font-size: 14px;
  color: var(--pc-sub);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px) scale(.9);
  transform-origin: 85% 100%;
  transition: opacity .25s ease, transform .45s var(--pc-spring);
}
.playerclub-pc-page-welcome .cf-note::before {
  content: "🎲";
  font-size: 15px;
  line-height: 1;
}
.playerclub-pc-page-welcome .cf-note::after {
  /* 指向骰子按钮的小尖角 */
  content: "";
  position: absolute;
  right: 28px;
  bottom: -6px;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  background: var(--pc-surface);
  transform: rotate(45deg);
  box-shadow: 3px 3px 5px rgba(29, 43, 54, .06);
}
.playerclub-pc-page-welcome .cf-note.is-on { opacity: 1; transform: none; }
.playerclub-pc-page-welcome .cf-note b {
  overflow: hidden;
  text-overflow: ellipsis;
  color: #e2683f;
  font-weight: 800;
}
.playerclub-pc-page-welcome .cf-dice {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 15px 0 12px;
  border: 0;
  border-radius: 999px;
  background: var(--pc-peach-soft);
  color: #e2683f;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .2s ease, transform .35s var(--pc-spring), box-shadow .2s ease;
}
.playerclub-pc-page-welcome .cf-dice:hover { background: #ffdccf; transform: translateY(-2px); box-shadow: 0 5px 11px rgba(255, 138, 101, .25); }
.playerclub-pc-page-welcome .cf-dice:hover svg { transform: rotate(90deg); }
.playerclub-pc-page-welcome .cf-dice:active { transform: scale(.94); transition-duration: .1s; }
.playerclub-pc-page-welcome .cf-dice svg { width: 18px; height: 18px; transition: transform .45s var(--pc-spring); }
.playerclub-pc-page-welcome .cf-dice.is-rolling svg { animation: cf-dice-spin .45s linear infinite; }
.playerclub-pc-page-welcome .cf-dice[disabled] { cursor: progress; }
@keyframes cf-dice-spin { to { transform: rotate(360deg); } }
.playerclub-pc-page-welcome .cf-confetti { position: absolute; inset: 0; z-index: 20; pointer-events: none; }

/* 主视觉叠成上下两段时这一栏很宽，旁边没有文字要躲，不再往右挪 */
@container (min-width: 760px) {
  .playerclub-pc-page-welcome .cf { --cf-shift: 0px; }
}

/* ================= 社区数据 ================= */
.playerclub-pc-page-welcome .wl-stats { padding: 6px 0 4px; }
.playerclub-pc-page-welcome .wl-stats-grid {
  display: grid;
  grid-template-columns: repeat(var(--wl-stat-cols, 3), minmax(0, 1fr));
  gap: 16px;
}
.playerclub-pc-page-welcome .wl-stat {
  --dot: var(--pc-main);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 22px 24px 20px;
  border-radius: 18px;
  background: var(--pc-surface);
  box-shadow: var(--pc-shadow);
  overflow: hidden;
  transition: transform .4s var(--pc-spring), box-shadow .3s ease;
}
.playerclub-pc-page-welcome .wl-stat:nth-child(4n+2) { --dot: var(--pc-sky); }
.playerclub-pc-page-welcome .wl-stat:nth-child(4n+3) { --dot: var(--pc-peach); }
.playerclub-pc-page-welcome .wl-stat:nth-child(4n+4) { --dot: var(--pc-sun); }
.playerclub-pc-page-welcome .wl-stat::after {
  /* 右上角一团对应颜色的光斑 */
  content: "";
  position: absolute;
  right: -30px;
  top: -30px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--dot) 18%, transparent);
  transition: transform .6s var(--pc-ease);
}
.playerclub-pc-page-welcome .wl-stat:hover { transform: translateY(-4px); box-shadow: var(--pc-shadow-lift); }
.playerclub-pc-page-welcome .wl-stat:hover::after { transform: scale(1.35); }
.playerclub-pc-page-welcome .wl-stat-num {
  position: relative;
  z-index: 1;
  font-family: var(--pc-display);
  font-weight: 800;
  font-size: 50px;
  line-height: 1;
  color: var(--pc-ink);
  font-variant-numeric: tabular-nums;
}
.playerclub-pc-page-welcome .wl-stat-num small { font-size: .5em; color: var(--dot); margin-left: 2px; }
.playerclub-pc-page-welcome .wl-stat-label {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  color: var(--pc-sub);
}
.playerclub-pc-page-welcome .wl-stat-label::before { content: ""; width: 8px; height: 8px; border-radius: 3px; background: var(--dot); }

/* ================= 讨论与模组 ================= */
.playerclub-pc-page-welcome .wl-section { padding: 52px 0 8px; }
.playerclub-pc-page-welcome .wl-board {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 28px;
}
.playerclub-pc-page-welcome .wl-col {
  min-width: 0;
  padding: 22px 22px 14px;
  border-radius: 20px;
  background: var(--pc-surface);
  box-shadow: var(--pc-shadow);
}
.playerclub-pc-page-welcome .wl-sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 10px;
  margin-bottom: 4px;
}
.playerclub-pc-page-welcome .wl-h2 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 21px;
  font-weight: 900;
  color: var(--pc-ink);
}
.playerclub-pc-page-welcome .wl-h2::before {
  content: "";
  width: 10px;
  height: 22px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--pc-main), var(--pc-sky));
}
.playerclub-pc-page-welcome .wl-col + .wl-col .wl-h2::before { background: linear-gradient(180deg, var(--pc-peach), var(--pc-sun)); }
.playerclub-pc-page-welcome .wl-more {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 14px;
  color: var(--pc-sub);
  white-space: nowrap;
  transition: color .2s ease;
}
.playerclub-pc-page-welcome .wl-more::after { content: "›"; font-size: 18px; line-height: 1; transition: transform .3s var(--pc-spring); }
.playerclub-pc-page-welcome .wl-more:hover { color: var(--pc-main); }
.playerclub-pc-page-welcome .wl-more:hover::after { transform: translateX(3px); }

.playerclub-pc-page-welcome .sh-rows { margin: 0; padding: 0; list-style: none; }
.playerclub-pc-page-welcome .sh-row-link {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 11px 10px 11px 4px;
  border-radius: 12px;
  overflow: hidden;
  transition: background .2s ease, transform .35s var(--pc-spring);
}
.playerclub-pc-page-welcome .sh-row-link::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(var(--pc-main-rgb), .10), transparent);
  transform: translateX(-120%);
  pointer-events: none;
}
.playerclub-pc-page-welcome .sh-row-link:hover { background: rgba(var(--pc-main-rgb), .06); transform: translateX(4px); }
.playerclub-pc-page-welcome .sh-row-link:hover::before { animation: sh-sweep .7s ease-out; }
@keyframes sh-sweep { to { transform: translateX(320%); } }
.playerclub-pc-page-welcome .sh-rank {
  font-family: var(--pc-display);
  font-weight: 800;
  font-size: 28px;
  line-height: 1;
  text-align: center;
  color: #c5d2ce;
  transition: transform .35s var(--pc-spring), color .2s ease;
}
.playerclub-pc-page-welcome li:nth-child(1) .sh-rank.is-top { color: var(--pc-peach); }
.playerclub-pc-page-welcome li:nth-child(2) .sh-rank.is-top { color: var(--pc-sun); }
.playerclub-pc-page-welcome li:nth-child(3) .sh-rank.is-top { color: var(--pc-sky); }
.playerclub-pc-page-welcome .sh-row-link:hover .sh-rank { transform: scale(1.2) rotate(-8deg); color: var(--pc-main); }
.playerclub-pc-page-welcome .sh-row-title {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--pc-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color .2s ease;
}
.playerclub-pc-page-welcome .sh-row-link:hover .sh-row-title { color: var(--pc-main); }
.playerclub-pc-page-welcome .sh-row-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  font-size: 13px;
  color: var(--pc-faint);
  white-space: nowrap;
  overflow: hidden;
}
.playerclub-pc-page-welcome .sh-who { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--pc-sub); }
.playerclub-pc-page-welcome .sh-ava { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; background: var(--pc-line); flex-shrink: 0; }
.playerclub-pc-page-welcome .sh-board { padding: 0 8px; border-radius: 999px; background: var(--pc-main-soft); color: var(--pc-main); font-size: 12px; line-height: 20px; }
.playerclub-pc-page-welcome .sh-heat { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font-size: 13px; color: var(--pc-sub); }
.playerclub-pc-page-welcome .sh-heat-num { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
.playerclub-pc-page-welcome .sh-heat-num svg { width: 14px; height: 14px; color: var(--pc-faint); }
.playerclub-pc-page-welcome .sh-meter { display: flex; gap: 2px; }
.playerclub-pc-page-welcome .sh-meter i { width: 7px; height: 7px; border-radius: 2px; background: #e4ece9; transition: transform .3s var(--pc-spring); }
.playerclub-pc-page-welcome .sh-meter i.is-on { background: var(--pc-peach); }
.playerclub-pc-page-welcome .sh-meter i.is-on:nth-child(-n+2) { background: var(--pc-sun); }
.playerclub-pc-page-welcome .sh-row-link:hover .sh-meter i.is-on { transform: translateY(-2px); }
.playerclub-pc-page-welcome .sh-row-link:hover .sh-meter i.is-on:nth-child(2) { transition-delay: .04s; }
.playerclub-pc-page-welcome .sh-row-link:hover .sh-meter i.is-on:nth-child(3) { transition-delay: .08s; }
.playerclub-pc-page-welcome .sh-row-link:hover .sh-meter i.is-on:nth-child(4) { transition-delay: .12s; }
.playerclub-pc-page-welcome .sh-row-link:hover .sh-meter i.is-on:nth-child(5) { transition-delay: .16s; }

.playerclub-pc-page-welcome .sh-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 8px 0;
}
.playerclub-pc-page-welcome .sh-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  background: var(--pc-surface);
  box-shadow: 0 0 0 1px var(--pc-line);
  overflow: hidden;
  transition: transform .45s var(--pc-spring), box-shadow .3s ease;
}
.playerclub-pc-page-welcome .sh-tile:hover { transform: translateY(-6px) rotate(-.6deg); box-shadow: var(--pc-shadow-lift); }
.playerclub-pc-page-welcome .sh-tile-img { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #e6efec; }
.playerclub-pc-page-welcome .sh-tile-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--pc-ease); }
.playerclub-pc-page-welcome .sh-tile:hover .sh-tile-img img { transform: scale(1.08); }
.playerclub-pc-page-welcome .sh-tile-tag {
  position: absolute;
  left: 8px;
  top: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  color: #1867c0;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 1px 5px rgba(29, 43, 54, .12);
}
.playerclub-pc-page-welcome .sh-tile-body { display: flex; flex-direction: column; gap: 6px; padding: 10px 11px 11px; flex: 1; }
.playerclub-pc-page-welcome .sh-tile-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.8em;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--pc-ink);
}
.playerclub-pc-page-welcome .sh-tile-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--pc-faint); white-space: nowrap; }
.playerclub-pc-page-welcome .sh-tile-meta .sh-who { flex: 1; }
.playerclub-pc-page-welcome .sh-stats { display: inline-flex; gap: 10px; flex-shrink: 0; }
.playerclub-pc-page-welcome .sh-stats span { display: inline-flex; align-items: center; gap: 3px; }
.playerclub-pc-page-welcome .sh-stats span:first-child svg { color: var(--pc-peach); }
.playerclub-pc-page-welcome .sh-stats svg { width: 13px; height: 13px; transition: transform .35s var(--pc-spring); }
.playerclub-pc-page-welcome .sh-tile:hover .sh-stats span:first-child svg { transform: scale(1.3); }

.playerclub-pc-page-welcome .sh-skel-row,
.playerclub-pc-page-welcome .sh-skel-tile {
  border-radius: 12px;
  background: linear-gradient(100deg, #eef4f2 30%, #f8fbfa 50%, #eef4f2 70%) 0 0 / 300% 100%;
  animation: sh-shimmer 1.4s linear infinite;
}
.playerclub-pc-page-welcome .sh-skel-row { height: 56px; margin: 8px 0; }
.playerclub-pc-page-welcome .sh-skel-tile { aspect-ratio: 4 / 3.4; }
@keyframes sh-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
.playerclub-pc-page-welcome .sh-empty { padding: 30px 0 24px; text-align: center; font-size: 14px; color: var(--pc-sub); }
.playerclub-pc-page-welcome .sh-empty button {
  margin-left: 8px;
  padding: 3px 12px;
  border: 0;
  border-radius: 999px;
  background: var(--pc-main-soft);
  color: var(--pc-main);
  cursor: pointer;
  transition: transform .3s var(--pc-spring);
}
.playerclub-pc-page-welcome .sh-empty button:hover { transform: translateY(-2px); }

/* ================= 新人三步 ================= */
.playerclub-pc-page-welcome .wl-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--wl-step-cols, 3), minmax(0, 1fr));
  gap: 20px;
  padding-top: 14px;
}
.playerclub-pc-page-welcome .wl-steps::before {
  /* 串起几步的那条虚线 */
  content: "";
  position: absolute;
  top: 64px;
  left: 40px;
  right: 40px;
  border-top: 2px dashed rgba(var(--pc-main-rgb), .32);
  pointer-events: none;
}
.playerclub-pc-page-welcome .wl-step {
  --tone: var(--pc-main);
  --tone-soft: var(--pc-main-soft);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 24px 22px 22px;
  border-radius: 20px;
  background: var(--pc-surface);
  box-shadow: var(--pc-shadow);
  transition: transform .45s var(--pc-spring), box-shadow .3s ease;
}
.playerclub-pc-page-welcome .wl-step:nth-child(3n+2) { --tone: var(--pc-sky); --tone-soft: var(--pc-sky-soft); }
.playerclub-pc-page-welcome .wl-step:nth-child(3n+3) { --tone: var(--pc-peach); --tone-soft: var(--pc-peach-soft); }
.playerclub-pc-page-welcome .wl-step:hover { transform: translateY(-6px); box-shadow: var(--pc-shadow-lift); }
.playerclub-pc-page-welcome .wl-step-no {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--tone-soft);
  font-family: var(--pc-display);
  font-weight: 800;
  font-size: 30px;
  line-height: 1;
  color: var(--tone);
  transition: transform .45s var(--pc-spring), background .2s ease, color .2s ease;
}
.playerclub-pc-page-welcome .wl-step:hover .wl-step-no { transform: rotate(-10deg) scale(1.1); background: var(--tone); color: #fff; }
.playerclub-pc-page-welcome .wl-step h3 { margin-top: 4px; font-size: 18px; font-weight: 900; color: var(--pc-ink); }
.playerclub-pc-page-welcome .wl-step p { max-width: 24em; font-size: 14px; line-height: 1.75; color: var(--pc-sub); }
.playerclub-pc-page-welcome .wl-step-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 14px;
  font-weight: 800;
  color: var(--tone);
  cursor: pointer;
}
.playerclub-pc-page-welcome .wl-step-link::after { content: "›"; font-size: 18px; line-height: 1; transition: transform .3s var(--pc-spring); }
.playerclub-pc-page-welcome .wl-step-link:hover::after { transform: translateX(4px); }

/* ================= 标签栏：两份首尾相接，慢慢横向滚动，鼠标停上去就停 ================= */
.playerclub-pc-page-welcome .wl-rail-band { padding: 44px 0 0; }
.playerclub-pc-page-welcome .sh-rail {
  position: relative;
  padding: 10px 0 14px;
  overflow: hidden;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
}
.playerclub-pc-page-welcome .sh-rail::-webkit-scrollbar { display: none; }
.playerclub-pc-page-welcome .sh-rail:empty { display: none; }
.playerclub-pc-page-welcome .sh-rail-track { display: flex; width: max-content; animation: sh-marquee var(--sh-rail-dur, 48s) linear infinite; will-change: transform; }
.playerclub-pc-page-welcome .sh-rail-group { display: flex; flex-shrink: 0; gap: 12px; padding-right: 12px; }
.playerclub-pc-page-welcome .sh-rail:hover .sh-rail-track { animation-play-state: paused; }
@keyframes sh-marquee { to { transform: translateX(-50%); } }
.playerclub-pc-page-welcome .sh-chip {
  --tone: var(--pc-main);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: var(--pc-ink);
  background: var(--pc-surface);
  box-shadow: 0 1px 5px rgba(29, 43, 54, .06);
  transition: color .2s ease, transform .35s var(--pc-spring), box-shadow .25s ease;
}
.playerclub-pc-page-welcome .sh-chip:nth-child(4n+2) { --tone: var(--pc-sky); }
.playerclub-pc-page-welcome .sh-chip:nth-child(4n+3) { --tone: var(--pc-peach); }
.playerclub-pc-page-welcome .sh-chip:nth-child(4n+4) { --tone: #e0a400; }
.playerclub-pc-page-welcome .sh-chip::before { content: "#"; margin-right: 3px; font-weight: 800; color: var(--tone); }
.playerclub-pc-page-welcome .sh-chip:hover { transform: translateY(-3px) rotate(-2deg); box-shadow: 0 5px 12px rgba(29, 43, 54, .1); color: var(--tone); }

/* ================= 结尾 ================= */
.playerclub-pc-page-welcome .wl-cta { padding: 48px 0 56px; }
.playerclub-pc-page-welcome .wl-cta-box {
  --px: 0;
  --py: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 42px 46px;
  border-radius: 26px;
  overflow: hidden;
  background:
    radial-gradient(60% 140% at 100% 0%, rgba(255, 194, 61, .28), transparent 60%),
    radial-gradient(50% 120% at 0% 100%, rgba(75, 157, 242, .18), transparent 60%),
    linear-gradient(120deg, rgba(var(--pc-main-rgb), .16) 0%, rgba(75, 157, 242, .14) 100%),
    #fff;
  box-shadow: var(--pc-shadow);
}
.playerclub-pc-page-welcome .wl-cta-box .wl-deco { z-index: 0; }
.playerclub-pc-page-welcome .wl-cta-box .dk-ring { top: 18%; left: 52%; }
.playerclub-pc-page-welcome .wl-cta-box .dk-pill { top: 64%; left: 60%; }
.playerclub-pc-page-welcome .wl-cta-box .dk-plus { bottom: 18%; left: 44%; }
.playerclub-pc-page-welcome .wl-cta-box .dk-dot { top: 20%; left: 70%; }
.playerclub-pc-page-welcome .wl-cta-copy { position: relative; z-index: 1; }
.playerclub-pc-page-welcome .wl-cta-title { font-size: 28px; font-weight: 900; color: var(--pc-ink); text-wrap: balance; }
.playerclub-pc-page-welcome .wl-cta-text { margin-top: 6px; font-size: 15px; color: var(--pc-sub); }
.playerclub-pc-page-welcome .wl-cta-box .wl-btn { position: relative; z-index: 1; flex-shrink: 0; animation: wl-nudge 3.6s ease-in-out infinite; }
.playerclub-pc-page-welcome .wl-cta-box .wl-btn:hover { animation-play-state: paused; }
@keyframes wl-nudge {
  0%, 82%, 100% { translate: 0 0; }
  88% { translate: 0 -4px; }
  94% { translate: 0 1px; }
}

/* ================= 较窄的电脑窗口 ================= */
@container (max-width: 1080px) {
  .playerclub-pc-page-welcome .wl-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .playerclub-pc-page-welcome .wl-hero-text { max-width: 640px; }
  .playerclub-pc-page-welcome .wl-board { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .playerclub-pc-page-welcome .sh-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 动画不受系统「减少动态效果」设置影响，始终播放 */

/* 站点页脚自带 48px 上留白，接在本页下面会断开一截，这里收掉 */
.playerclub-pc-page-welcome + .ls-footer,
body:has(> .playerclub-pc-page-welcome) > .ls-footer { padding-top: 0; }