/* 烧心杯 UI · 主页面入口：主视觉 sx-hero / 导航 sx-nav / 入口卡 sx-entry / 视口动画 / 路由页面 */

/* ============ 主视觉 ============ */
.sx-hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100svh; display: flex; align-items: flex-end;
  padding: calc(var(--sx-topbar-h) + 24px) 0 clamp(72px, 12vh, 120px);
  background:
    radial-gradient(120% 70% at 0% 70%, color-mix(in srgb, var(--sx-gold-4) 22%, transparent), transparent 60%),
    linear-gradient(180deg, var(--sx-bg) 0%, var(--sx-bg-2) 70%, var(--sx-bg) 100%);
}
/* 底部渐隐到页面底色，和下方板块无缝衔接 */
.sx-hero::after { content: ''; position: absolute; inset: auto 0 0; height: 28%; z-index: 1; pointer-events: none; background: linear-gradient(180deg, transparent, var(--sx-bg)); }

.sx-hero__art { position: absolute; inset: 0; z-index: -2; opacity: 0; transition: opacity .6s var(--sx-ease); }
.sx-hero.has-art .sx-hero__art { opacity: 1; }
.sx-hero__art picture { display: contents; }
.sx-hero__art img { width: 100%; height: 100%; object-fit: cover; object-position: right center; display: block; }
/* 暖黑压暗：左→右、下→上，保证左下文字区可读 */
.sx-hero__art::after { content: ''; position: absolute; inset: 0; background:
  linear-gradient(90deg, var(--sx-bg) 0%, color-mix(in srgb, var(--sx-bg) 75%, transparent) 28%, transparent 58%),
  linear-gradient(0deg, var(--sx-bg) 0%, color-mix(in srgb, var(--sx-bg) 70%, transparent) 30%, transparent 62%),
  linear-gradient(180deg, color-mix(in srgb, var(--sx-bg) 70%, transparent) 0%, transparent 14%); }
@media (max-width: 760px) {
  .sx-hero__art img { object-position: center top; }
  .sx-hero__art::after { background: linear-gradient(0deg, var(--sx-bg) 0%, var(--sx-bg) 18%, color-mix(in srgb, var(--sx-bg) 70%, transparent) 50%, transparent 78%); }
}

/* 光束层：视差只作用在外层，进场动画在内层，避免 transform 互相覆盖 */
.sx-hero__fx { position: absolute; inset: -4%; z-index: -1; pointer-events: none; transform: translate3d(calc(var(--mx, 0) * 18px), calc(var(--my, 0) * 12px), 0); transition: transform .8s var(--sx-ease); }
.sx-hero__beam { position: absolute; inset: 0; transform-origin: 0% 90%; transition: opacity .6s var(--sx-ease); }
/* 有主视觉图时图里已有光束，CSS 光束降为补充光，避免两道光叠在一起 */
.sx-hero.has-art .sx-hero__beam { opacity: .3; }
.sx-hero.has-art .sx-hero__beam > i:nth-child(2) { display: none; }
.sx-hero__beam > i { position: absolute; inset: 0; display: block; }
/* 宽光幕：几何与 entry.js 的 BEAM 常量一致，光尘才会落在光束里 */
.sx-hero__beam > i:nth-child(1) {
  clip-path: polygon(0 88%, 100% -14%, 100% 50%);
  background: linear-gradient(100deg, color-mix(in srgb, var(--sx-beam) 55%, transparent) 0%, color-mix(in srgb, var(--sx-beam-2) 22%, transparent) 45%, color-mix(in srgb, var(--sx-gold-3) 6%, transparent) 100%);
  animation: sx-breathe 6s ease-in-out infinite;
}
/* 光芯 + 放射细纹（海报里的 rays） */
.sx-hero__beam > i:nth-child(2) {
  clip-path: polygon(0 89%, 100% 6%, 100% 30%);
  background:
    repeating-linear-gradient(152deg, transparent 0 46px, color-mix(in srgb, var(--sx-gold-1) 10%, transparent) 46px 48px),
    linear-gradient(100deg, color-mix(in srgb, var(--sx-gold-1) 90%, transparent) 0%, color-mix(in srgb, var(--sx-beam) 55%, transparent) 30%, color-mix(in srgb, var(--sx-beam-2) 12%, transparent) 100%);
  animation: sx-breathe 6s ease-in-out -3s infinite;
}
/* 柔光晕：沿光束轴的长椭圆，径向渐变自带模糊边，不用 filter（filter 会被 clip-path 裁硬） */
.sx-hero__beam > i:nth-child(3) {
  inset: auto -10% 12% 0; height: 50%; transform-origin: 0 100%; transform: rotate(-24deg) translateY(20%);
  background: radial-gradient(50% 50% at 30% 60%, color-mix(in srgb, var(--sx-beam) 30%, transparent), transparent 70%);
  animation: sx-breathe 6s ease-in-out -1.5s infinite;
}
/* 光源热点 */
.sx-hero__beam > i:nth-child(4) { inset: auto auto 12% -6%; width: 26%; aspect-ratio: 1; transform: translateY(50%); background: radial-gradient(closest-side, color-mix(in srgb, var(--sx-gold-1) 85%, transparent), color-mix(in srgb, var(--sx-beam) 30%, transparent) 40%, transparent); }
.sx-hero__dust { position: absolute; inset: 0; width: 100%; height: 100%; }

/* 左栏单列：游戏 LOGO → 奖杯 + 大标题徽标组 → 奖金/状态 → 按钮；右侧留给主视觉图。
   所有尺寸都从 --fs（大标题字号）推出，按视口宽高取小值，矮屏时整组一起缩，按钮不会被挤出首屏 */
.sx-hero__inner {
  --fs: clamp(64px, min(7.2vw, 12.5svh), 136px);
  position: relative; z-index: 2; width: min(1200px, 100% - 48px); margin: 0 auto;
  display: flex; flex-direction: column; align-items: flex-start;
}
.sx-hero__logo {
  display: block; height: clamp(84px, 15svh, 168px); width: auto; max-width: 100%; margin: 0 0 calc(var(--fs) * .46) -.5%;
  pointer-events: none; user-select: none; filter: drop-shadow(0 12px 20px color-mix(in srgb, var(--sx-bg) 80%, transparent));
  transform: translate3d(calc(var(--mx, 0) * 10px), calc(var(--my, 0) * 6px), 0); transition: transform .8s var(--sx-ease);
}
/* 有 LOGO 后小字游戏名就多余了 */
.sx-hero__logo ~ .sx-hero__game { display: none; }
.sx-hero.is-in .sx-hero__logo { animation: sx-logo-in .7s var(--sx-ease-back) .1s both; }
@keyframes sx-logo-in { from { opacity: 0; translate: 0 24px; scale: .92; } }
.sx-hero__game { margin: 0 0 8px; font-size: 14px; font-weight: 700; letter-spacing: .5em; color: var(--sx-gold-2); text-shadow: 0 1px 6px var(--sx-bg); }

/* 徽标组：奖杯与“标题 + 副标”横排，像赛事 LOGO 一样作为整屏唯一焦点 */
.sx-hero__lockup { display: flex; align-items: center; gap: calc(var(--fs) * .14); }
/* 奖杯高度约等于标题两行（标题 + 副标），用负外边距抵消上下的透明留白，不撑高整组 */
.sx-hero__trophy { position: relative; z-index: 0; flex: none; margin-block: calc(var(--fs) * -.32); transform: translate3d(calc(var(--mx, 0) * 14px), calc(var(--my, 0) * 9px), 0); transition: transform .8s var(--sx-ease); }
.sx-hero__trophy .sx-trophy { --sx-trophy-h: calc(var(--fs) * 2.2); }
/* 放射光线在横排里会扫到标题上，压低存在感 */
.sx-hero__trophy .sx-trophy__rays { opacity: .4; }
.sx-hero.is-in .sx-hero__trophy .sx-trophy { animation: sx-trophy-in .9s var(--sx-ease-back) .15s both; }
@keyframes sx-trophy-in { from { opacity: 0; transform: translateY(40px) scale(.85); } }
.sx-hero__name { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.sx-hero__game, .sx-hero__title { position: relative; z-index: 1; }
.sx-hero__title {
  margin: 0; font-weight: 900; line-height: 1; font-size: var(--fs); letter-spacing: .02em; color: var(--sx-fire-2);
  /* 轻微右倾，让字有冲劲 */
  transform: translate3d(calc(var(--mx, 0) * -8px), calc(var(--my, 0) * -5px), 0) skewX(-7deg); transition: transform .8s var(--sx-ease);
}
/* 火焰层：同一段文字放在字后面，向上拉长的光晕 + SVG 噪声扭曲成火舌（滤镜由 entry.js 注入） */
.sx-hero__title::before {
  content: attr(aria-label); position: absolute; inset: 0; z-index: -1; pointer-events: none; white-space: nowrap;
  color: var(--sx-fire-2); transform-origin: 50% 100%;
  /* 阴影逐层上移、变暗、变虚：越往上火越淡；再经滤镜撕成一条条火舌 */
  text-shadow: 0 -.04em .02em var(--sx-fire-1), 0 -.1em .05em var(--sx-fire-2), 0 -.18em .08em var(--sx-fire-3), 0 -.28em .12em color-mix(in srgb, var(--sx-fire-3) 75%, transparent), 0 -.4em .18em color-mix(in srgb, var(--sx-fire-4) 55%, transparent);
  filter: url(#sx-fire);
  animation: sx-flame 1.6s ease-in-out infinite alternate;
}
/* 热光：字背后的橙色辉光，同时把奖杯底座压暗一点，标题更突出 */
.sx-hero__title::after {
  content: ''; position: absolute; inset: -18% -12% -10%; z-index: -2; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 60%, color-mix(in srgb, var(--sx-fire-4) 40%, transparent), color-mix(in srgb, var(--sx-bg) 35%, transparent) 60%, transparent 75%);
  animation: sx-breathe 2.4s ease-in-out infinite;
}
.sx-hero__char {
  display: inline-block; color: transparent;
  /* 字面：顶部白热，向下渐暗 */
  background: linear-gradient(180deg, var(--sx-fire-1) 8%, var(--sx-fire-2) 38%, var(--sx-fire-3) 66%, var(--sx-fire-4) 100%);
  -webkit-background-clip: text; background-clip: text;
  /* 描边不用 text-stroke：雅黑笔画轮廓互相重叠，text-stroke 会把字内部的重叠线也描出来。
     改用四向零模糊投影只描外轮廓，再叠侧面厚度和落地阴影 */
  filter: drop-shadow(.014em 0 0 var(--sx-fire-5)) drop-shadow(-.014em 0 0 var(--sx-fire-5)) drop-shadow(0 .014em 0 var(--sx-fire-5)) drop-shadow(0 -.014em 0 var(--sx-fire-5))
    drop-shadow(0 .03em 0 var(--sx-fire-4)) drop-shadow(0 .02em 0 var(--sx-fire-5)) drop-shadow(0 .06em .1em color-mix(in srgb, var(--sx-bg) 85%, transparent));
}
/* 图片字标：火焰、描边、倾斜都画在图里，关掉文字火焰层和斜切；宽高比 1080:510 */
.sx-hero__title.has-wordmark { transform: translate3d(calc(var(--mx, 0) * -8px), calc(var(--my, 0) * -5px), 0); line-height: 0; }
.sx-hero__title.has-wordmark::before { content: none; }
.sx-hero__wordmark { display: block; height: 1.7em; width: auto; max-width: 100%; margin: -.42em 0 -.12em; pointer-events: none; user-select: none; }
.sx-hero.is-in .sx-hero__wordmark { animation: sx-char-in .6s var(--sx-ease-back) .25s both; }
@keyframes sx-flame { 0% { transform: scaleY(1); opacity: .85; } 40% { transform: scaleY(1.06) skewX(1deg); opacity: 1; } 100% { transform: scaleY(1.02) skewX(-1deg); opacity: .9; } }
/* 副标：左侧一段金线引出，和大标题左缘对齐 */
.sx-hero__sub { display: flex; align-items: center; gap: .6em; margin: calc(var(--fs) * .16) 0 0; font-size: clamp(16px, calc(var(--fs) * .2), 26px); font-weight: 800; letter-spacing: .28em; color: var(--sx-gold-1); text-shadow: 0 2px 8px var(--sx-bg); }
.sx-hero__sub::before { content: ''; width: 2.2em; height: 2px; background: linear-gradient(90deg, transparent, var(--sx-gold-2)); }
.sx-hero__sub::after { content: ''; width: 2.2em; height: 2px; background: linear-gradient(270deg, transparent, var(--sx-gold-2)); }
.sx-hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: calc(var(--fs) * .56); }

.sx-hero__prize {
  position: relative; overflow: hidden; display: inline-flex; align-items: baseline; gap: 10px;
  padding: 8px 22px 8px 18px; border-radius: 999px; color: var(--sx-on-gold); background: var(--sx-grad-gold);
  box-shadow: inset 0 1px 0 var(--sx-gold-1), inset 0 -2px 0 var(--sx-gold-4), var(--sx-glow-gold);
}
.sx-hero__prize-label { font-size: 13px; font-weight: 800; letter-spacing: .1em; }
.sx-hero__prize-num { font-family: var(--sx-font-num); font-size: 30px; line-height: 1.1; letter-spacing: .02em; }
.sx-hero__prize-cur { font-family: var(--sx-font-num); font-size: 18px; }
.sx-hero__prize::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, color-mix(in srgb, var(--sx-gold-1) 80%, transparent) 50%, transparent 65%); transform: translateX(-110%); animation: sx-shine 1s var(--sx-ease) 1.1s both; }

.sx-hero__status { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; font-size: 14px; color: var(--sx-text-2); }
.sx-hero__status b { color: var(--sx-text); font-weight: 700; }
.sx-hero__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sx-cyan); box-shadow: 0 0 0 0 var(--sx-cyan); animation: sx-pulse 1.6s ease-out infinite; }
.sx-hero__status.is-live b { color: var(--sx-cyan); }
.sx-hero__cd { display: inline-flex; align-items: baseline; gap: 4px; }
.sx-hero__cd span { font-family: var(--sx-font-num); font-size: 22px; color: var(--sx-text); min-width: 1.4em; padding: 0 4px; text-align: center; border-radius: var(--sx-r-sm); background: var(--sx-surface-2); box-shadow: inset 0 0 0 1px var(--sx-line); font-variant-numeric: tabular-nums; }
.sx-hero__cd small { font-size: 12px; color: var(--sx-text-3); margin-right: 4px; }
.sx-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: calc(var(--fs) * .26); }
/* 地图种子：按钮下方竖排时间轴，左侧圆点串成一条线，右侧胶囊写阶段和种子 */
.sx-hero__seeds { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 20px; padding-left: 22px; }
.sx-hero__seeds[hidden] { display: none; }
/* 竖线穿过所有圆点，首尾各收在圆点中心 */
.sx-hero__seeds::before { content: ''; position: absolute; left: 6px; top: 15px; bottom: 15px; width: 1px; background: linear-gradient(180deg, var(--sx-gold-2), color-mix(in srgb, var(--sx-gold-3) 30%, transparent)); }
.sx-hero__seeds-label, .sx-hero__seed { position: relative; display: inline-flex; align-items: baseline; gap: 10px; min-height: 30px; padding: 5px 14px; border-radius: 999px; box-sizing: border-box;
  background: color-mix(in srgb, var(--sx-bg) 62%, transparent); box-shadow: inset 0 0 0 1px var(--sx-line); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
/* 圆点：默认空心，有种子实心金，进行中实心青 */
.sx-hero__seeds-label::before, .sx-hero__seed::before { content: ''; position: absolute; left: -22px; top: 50%; width: 9px; height: 9px; margin-top: -6px; border-radius: 50%;
  background: var(--sx-bg); box-shadow: 0 0 0 1.5px var(--sx-gold-3); }
.sx-hero__seeds-label { font-size: 12px; font-weight: 800; letter-spacing: .16em; color: var(--sx-gold-1); background: color-mix(in srgb, var(--sx-gold-3) 18%, var(--sx-bg)); }
.sx-hero__seeds-label::before { background: var(--sx-gold-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sx-gold-2) 25%, transparent); }
.sx-hero__seed small { font-size: 12px; color: var(--sx-text-2); white-space: nowrap; }
.sx-hero__seed b { font-family: var(--sx-font-num); font-weight: 400; font-size: 17px; line-height: 1.2; letter-spacing: .04em; color: var(--sx-gold-1); font-variant-numeric: tabular-nums; user-select: all; }
.sx-hero__seed b.is-tbd { font-family: inherit; font-size: 13px; color: var(--sx-text-3); opacity: .75; user-select: auto; }
.sx-hero__seed:has(b:not(.is-tbd))::before { background: var(--sx-gold-2); }
.sx-hero__seed.is-live { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sx-cyan) 55%, transparent); }
.sx-hero__seed.is-live small { color: var(--sx-cyan); }
.sx-hero__seed.is-live::before { background: var(--sx-cyan); box-shadow: 0 0 0 1.5px var(--sx-cyan); animation: sx-pulse 1.6s ease-out infinite; }
/* PC：整屏主视觉、内容垂直居中；底部留出入口卡上浮的位置。超高屏封顶，避免标题和入口卡离得太远 */
@media (min-width: 761px) {
  .sx-hero { min-height: clamp(600px, 100svh, 1000px); align-items: center; padding: calc(var(--sx-topbar-h) + 24px) 0 clamp(80px, 12svh, 140px); }
  /* 左下：游戏 LOGO 放大作主角，下面接奖金和按钮；右上：奖杯竖立、标题压在杯座上，两组错位呼应 */
  .sx-hero__inner { --fs: clamp(64px, min(6.8vw, 13svh), 150px); }
  .sx-hero__logo { width: min(46%, 52svh); height: auto; margin: 0 0 8px -1%; }
  .sx-hero__meta { margin-top: 20px; }
  .sx-hero__actions { margin-top: 18px; }
  /* 脱离文档流放进右半区，左栏高度只由 LOGO 和按钮决定；右组单独取更大的 --fs，几乎占满右半区高度 */
  .sx-hero__lockup { --fs: clamp(80px, min(11vw, 20svh, (min(1200px, 100vw - 48px) / 2 - 24px) / 3.2), 180px); position: absolute; left: 50%; right: 0; top: 50%; transform: translateY(-54%); flex-direction: column; gap: 0; }
  /* 右半区压在插画最亮最杂的位置，垫一团暗色晕把奖杯和标题从背景里托出来 */
  .sx-hero__lockup::before { content: ''; position: absolute; z-index: -1; left: 50%; top: 55%; width: calc(var(--fs) * 6); aspect-ratio: 1.3; transform: translate(-50%, -50%); pointer-events: none;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--sx-bg) 72%, transparent), color-mix(in srgb, var(--sx-bg) 35%, transparent) 60%, transparent); }
  .sx-hero__trophy { margin: 0 0 calc(var(--fs) * -.78); }
  .sx-hero__trophy .sx-trophy { --sx-trophy-h: calc(var(--fs) * 2.5); }
  .sx-hero__trophy .sx-trophy__rays { opacity: .7; }
  .sx-hero__name { align-items: center; white-space: nowrap; }
  .sx-hero__sub { margin-left: 0; font-size: clamp(18px, calc(var(--fs) * .2), 34px); }
}
/* 宽屏：地图种子移到 LOGO 右侧、奖杯左侧的空档，偏 LOGO 上半部，避开下方标题火焰；窄一点的屏放不下，留在按钮下方 */
@media (min-width: 1200px) {
  .sx-hero__inner { container-type: inline-size; }
  .sx-hero__logo { --logo-w: min(46cqw, 52svh); width: var(--logo-w); }
  .sx-hero__seeds { --logo-w: min(46cqw, 52svh); position: absolute; left: calc(var(--logo-w) - 1cqw); top: calc(var(--logo-w) * .3); translate: 0 -50%; margin: 0; gap: 10px; padding-left: 30px; }
  /* 空档里单独成块，放大到能和两侧 LOGO、奖杯抗衡 */
  .sx-hero__seeds::before { left: 7px; top: 22px; bottom: 22px; width: 2px; }
  .sx-hero__seeds-label, .sx-hero__seed { min-width: 176px; min-height: 44px; padding: 9px 20px; gap: 14px; align-items: center; }
  .sx-hero__seeds-label::before, .sx-hero__seed::before { left: -30px; width: 13px; height: 13px; margin-top: -8.5px; box-shadow: 0 0 0 2px var(--sx-gold-3); }
  .sx-hero__seeds-label { font-size: 15px; justify-content: center; }
  .sx-hero__seeds-label::before { box-shadow: 0 0 0 4px color-mix(in srgb, var(--sx-gold-2) 25%, transparent); }
  .sx-hero__seed small { font-size: 15px; }
  .sx-hero__seed b { font-size: 22px; }
  .sx-hero__seed b.is-tbd { font-size: 15px; }
  .sx-hero__seed.is-live::before { box-shadow: 0 0 0 2px var(--sx-cyan); }
}
/* 手机：整组居中，竖图上半部是场景，文字压在下半部暗区 */
@media (max-width: 760px) {
  .sx-hero__inner { --fs: clamp(60px, 19vw, 88px); align-items: center; text-align: center; }
  .sx-hero__logo { width: min(62vw, 250px); height: auto; margin-bottom: calc(var(--fs) * .4); }
  .sx-hero__meta, .sx-hero__actions { justify-content: center; align-self: stretch; }
  /* 手机整组居中，时间轴整体居中、内部仍左对齐 */
  .sx-hero__seeds { align-self: center; margin-top: 18px; }
}

.sx-hero__scroll { position: absolute; z-index: 3; left: 50%; bottom: 18px; width: 44px; height: 44px; margin-left: -22px; display: grid; place-items: center; border: 0; background: none; color: var(--sx-gold-2); cursor: pointer; border-radius: 50%; opacity: .75; transition: opacity var(--sx-t), transform var(--sx-t-fast); }
.sx-hero__scroll:hover { opacity: 1; }
.sx-hero__scroll:active { transform: scale(.96); }
.sx-hero__scroll svg { animation: sx-bob 1.8s ease-in-out infinite; }

/* 进场编排：光束扫入 0-.55s → 逐字弹入 .25s 起 → 其余 .6s 起淡入上移，全部 ≤1.2s */
.sx-hero.is-in .sx-hero__beam { animation: sx-beam-in .55s var(--sx-ease) both; }
/* 火焰在字落定后再窜起来；backwards 只管延迟期，结束后交还给闪烁动画 */
.sx-hero.is-in .sx-hero__title::before { animation: sx-flame 1.6s ease-in-out infinite alternate, sx-flame-in .7s var(--sx-ease) .55s backwards; }
@keyframes sx-flame-in { from { opacity: 0; transform: scaleY(.3); } }
.sx-hero.is-in .sx-hero__char { animation: sx-char-in .42s var(--sx-ease-back) both; animation-delay: calc(.25s + var(--i, 0) * 70ms); }
.sx-hero.is-in .sx-hero__game, .sx-hero.is-in .sx-hero__sub, .sx-hero.is-in .sx-hero__meta, .sx-hero.is-in .sx-hero__seeds, .sx-hero.is-in .sx-hero__actions, .sx-hero.is-in .sx-hero__scroll { animation: sx-rise .45s var(--sx-ease) both; }
.sx-hero.is-in .sx-hero__game { animation-delay: .15s; }
.sx-hero.is-in .sx-hero__sub { animation-delay: .55s; }
.sx-hero.is-in .sx-hero__meta { animation-delay: .65s; }
.sx-hero.is-in .sx-hero__seeds { animation-delay: .78s; }
.sx-hero.is-in .sx-hero__actions { animation-delay: .72s; }
.sx-hero.is-in .sx-hero__scroll { animation-delay: .75s; }

@keyframes sx-beam-in { from { opacity: 0; transform: translate(-18%, 14%) scaleX(.2); } }
@keyframes sx-char-in { from { opacity: 0; transform: translateY(45%) scale(.55); } to { opacity: 1; transform: none; } }
@keyframes sx-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes sx-breathe { 0%, 100% { opacity: .82; } 50% { opacity: 1; } }
@keyframes sx-shine { to { transform: translateX(110%); } }
@keyframes sx-bob { 0%, 100% { transform: translateY(-3px); } 50% { transform: translateY(5px); } }
@keyframes sx-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sx-cyan) 60%, transparent); } 100% { box-shadow: 0 0 0 10px transparent; } }

/* ============ 导航 ============ */
.sx-nav { position: fixed; z-index: 40; inset: 0 0 auto; height: var(--sx-topbar-h); transition: opacity var(--sx-t); }
/* 毛玻璃放在伪元素上：backdrop-filter 会让 fixed 子元素（手机 Tab 栏）失去视口定位 */
.sx-nav::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity var(--sx-t); background: color-mix(in srgb, var(--sx-bg) 78%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--sx-line); }
.sx-nav.is-solid::before { opacity: 1; }
.sx-nav__in { height: 100%; width: min(1200px, 100% - 32px); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.sx-nav__brand { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; font-weight: 900; font-size: 18px; letter-spacing: .08em; color: var(--sx-text); text-decoration: none; }
.sx-nav__brand::before { content: ''; width: 10px; height: 10px; transform: rotate(45deg); background: var(--sx-grad-gold); }
.sx-nav__links { position: relative; display: flex; gap: 4px; }
.sx-nav__link { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 0; border-radius: var(--sx-r-sm); background: none; color: var(--sx-text-2); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; text-decoration: none; transition: color var(--sx-t), background var(--sx-t), transform var(--sx-t-fast), filter var(--sx-t-fast); }
.sx-nav__link:hover { color: var(--sx-text); background: color-mix(in srgb, var(--sx-gold-2) 8%, transparent); }
.sx-nav__link:active { transform: scale(.96); filter: brightness(1.2); }
.sx-nav__link[aria-disabled='true'] { opacity: .4; pointer-events: none; }
.sx-nav__link.is-active { color: var(--sx-gold-1); }
.sx-nav__icon { display: none; }
.sx-nav__icon svg { display: block; width: 22px; height: 22px; }
.sx-nav__bar { position: absolute; left: 0; bottom: -7px; height: 2px; width: var(--w, 0); border-radius: 2px; background: var(--sx-grad-gold); box-shadow: var(--sx-glow-beam); transform: translateX(var(--x, 0)); opacity: 0; transition: transform var(--sx-t-slow) var(--sx-ease), width var(--sx-t-slow) var(--sx-ease), opacity var(--sx-t); }
.sx-nav__bar.is-on { opacity: 1; }

@media (max-width: 720px) {
  .sx-nav__links { position: fixed; inset: auto 0 0; z-index: 41; gap: 0; justify-content: space-around; height: calc(60px + env(safe-area-inset-bottom)); padding: 0 4px env(safe-area-inset-bottom); background: color-mix(in srgb, var(--sx-bg) 92%, transparent); border-top: 1px solid var(--sx-line); }
  .sx-nav__link { flex: 1; flex-direction: column; justify-content: center; gap: 2px; min-height: 56px; padding: 0 2px; font-size: 11px; }
  .sx-nav__link:hover { background: none; }
  .sx-nav__icon { display: block; transition: transform var(--sx-t) var(--sx-ease-back); }
  .sx-nav__link.is-active .sx-nav__icon { transform: translateY(-2px); }
  .sx-nav__bar { top: -1px; bottom: auto; width: 24px; transform: translateX(calc(var(--x, 0px) + var(--w, 0px) / 2 - 12px)); }
  .sx-has-tabbar body { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
  .sx-hero { min-height: 88svh; padding-bottom: 72px; }
  .sx-hero__game { letter-spacing: .35em; font-size: 12px; }
  .sx-hero__prize-num { font-size: 26px; }
  .sx-hero__actions > * { flex: 1 1 140px; }
}
.sx-in-view .sx-nav { opacity: 0; pointer-events: none; }

/* ============ 入口卡 ============ */
.sx-entry { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sx-gap); width: min(1200px, 100% - 32px); margin: 0 auto; }
.sx-entry__card {
  position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 14px;
  min-height: 88px; padding: 18px 18px; border-radius: var(--sx-r); text-align: left; color: var(--sx-text); text-decoration: none; font: inherit; cursor: pointer;
  border: 1px solid var(--sx-line-strong); background: linear-gradient(160deg, var(--sx-surface-2), var(--sx-surface) 60%);
  transition: transform var(--sx-t-fast), border-color var(--sx-t), box-shadow var(--sx-t), filter var(--sx-t-fast);
}
/* 光泽扫过：hover 时一条斜向高光从左划到右 */
.sx-entry__card::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 30%, color-mix(in srgb, var(--sx-gold-1) 14%, transparent) 50%, transparent 70%); transform: translateX(-120%); }
.sx-entry__card:hover { border-color: var(--sx-gold-2); box-shadow: var(--sx-glow-gold); }
.sx-entry__card:hover::before { transform: translateX(120%); transition: transform .7s var(--sx-ease); }
.sx-entry__card:active { transform: scale(.96); filter: brightness(1.15); }
.sx-entry__card:disabled, .sx-entry__card[aria-disabled='true'] { opacity: .45; pointer-events: none; filter: grayscale(.6); }
.sx-entry__icon { grid-row: span 2; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; color: var(--sx-gold-1); background: color-mix(in srgb, var(--sx-gold-3) 18%, transparent); box-shadow: inset 0 0 0 1px var(--sx-line-strong); transition: transform var(--sx-t) var(--sx-ease-back); }
.sx-entry__icon svg { width: 22px; height: 22px; display: block; }
.sx-entry__title { font-size: 16px; font-weight: 800; letter-spacing: .04em; }
.sx-entry__desc { grid-column: 2; font-size: 12px; color: var(--sx-text-3); }
.sx-entry__arrow { grid-row: 1 / span 2; grid-column: 3; color: var(--sx-gold-3); transition: transform var(--sx-t) var(--sx-ease), color var(--sx-t); }
.sx-entry__arrow svg { display: block; width: 18px; height: 18px; }
.sx-entry__card:hover .sx-entry__icon { transform: translateY(-3px) rotate(-6deg); }
.sx-entry__card:hover .sx-entry__arrow { transform: translateX(4px); color: var(--sx-gold-1); }
@media (max-width: 900px) { .sx-entry { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) {
  .sx-entry { gap: 10px; }
  .sx-entry__card { grid-template-columns: 1fr auto; padding: 14px; min-height: 96px; gap: 8px; }
  .sx-entry__icon { grid-row: auto; width: 36px; height: 36px; }
  .sx-entry__title { grid-column: 1; font-size: 15px; }
  .sx-entry__desc { display: none; }
  .sx-entry__arrow { grid-row: 1; grid-column: 2; align-self: start; }
}

/* ============ 进入视口 ============ */
/* 只在 JS 生效后隐藏，避免脚本失败时内容永远不可见 */
.sx-js [data-reveal], .sx-js [data-reveal-stagger] > * { opacity: 0; transform: translateY(24px); transition: opacity .6s var(--sx-ease), transform .6s var(--sx-ease); transition-delay: calc(var(--sx-i, 0) * 70ms); }
.sx-js [data-reveal].is-revealed, .sx-js [data-reveal-stagger].is-revealed > * { opacity: 1; transform: none; }

/* ============ 路由页面 ============ */
.sx-home { transition: transform var(--sx-t-slow) var(--sx-ease), filter var(--sx-t-slow) var(--sx-ease); }
.sx-home.is-behind { transform: translateX(-6%); filter: brightness(.45); }
.sx-in-view, .sx-in-view body { overflow: hidden; }
.sx-view__page { position: fixed; inset: 0; z-index: 60; overflow-y: auto; overscroll-behavior: contain; background: var(--sx-bg); outline: none; box-shadow: -20px 0 50px color-mix(in srgb, var(--sx-bg) 70%, transparent); }
.sx-view__page.is-enter { animation: sx-page-in var(--sx-t-slow) var(--sx-ease) both; }
.sx-view__page.is-leave { animation: sx-page-out var(--sx-t-slow) var(--sx-ease) both; pointer-events: none; }
.sx-view__page.is-under { animation: sx-page-under var(--sx-t-slow) var(--sx-ease) both; }
@keyframes sx-page-in { from { transform: translateX(100%); } to { transform: none; } }
@keyframes sx-page-out { from { transform: none; } to { transform: translateX(100%); } }
@keyframes sx-page-under { from { transform: translateX(-6%); filter: brightness(.45); } to { transform: none; filter: none; } }

@media (prefers-reduced-motion: reduce) {
  .sx-hero__fx { transform: none; }
  .sx-hero__title { transform: skewX(-7deg); }
  .sx-hero__title.has-wordmark { transform: none; }
  .sx-hero__beam > i, .sx-hero__scroll svg, .sx-hero__dot, .sx-hero__title::before, .sx-hero__title::after { animation: none !important; }
  .sx-home.is-behind { transform: none; }
  .sx-js [data-reveal], .sx-js [data-reveal-stagger] > * { transform: none; }
}