/* 烧心杯 UI 组件库 · 设计令牌
   风格来源：TapTap“聚光灯 GameJam”海报（黑底、金色光束、青色点缀）
           + 赛事奖金/参赛选手素材（暖黑底、金属金银铜、细金边切角框、◇ 标题条、金环头像）
   所有组件只用这里的变量，换肤只改这个文件 */
:root {
  /* 底色：暖黑，带一点棕 */
  --sx-bg: #0c0a08;
  --sx-bg-2: #15110d;
  --sx-surface: #1b1612;
  --sx-surface-2: #241d17;
  --sx-surface-3: #2e251d;
  --sx-line: rgba(230, 196, 138, .18);
  --sx-line-strong: rgba(230, 196, 138, .45);

  /* 金属色：每种三段，亮-中-暗，用于渐变和描边 */
  --sx-gold-1: #fff1c9;
  --sx-gold-2: #e6c48a;
  --sx-gold-3: #b88a4a;
  --sx-gold-4: #6e4b22;
  --sx-silver-1: #f4f6fa;
  --sx-silver-2: #b9c1cf;
  --sx-silver-3: #6f7889;
  --sx-bronze-1: #ffd9bf;
  --sx-bronze-2: #d39a76;
  --sx-bronze-3: #8a5338;

  /* 光束黄（海报）与状态色 */
  --sx-beam: #ffd73e;
  --sx-beam-2: #fdd000;
  --sx-cyan: #1fd8c4;
  --sx-blue: #4cc2ff;
  --sx-green: #72f5ac;
  --sx-red: #ff4a4a;
  --sx-gem-red: #e0323a;
  --sx-gem-blue: #3a8fe0;
  /* 火焰：白热 → 光束黄 → 琥珀金 → 暗铜 → 焦褐，只用于首页大标题
     收在金色系内，不用橙红，和暖黑 + 金属金的整体风格一致 */
  --sx-fire-1: #fff8e2;
  --sx-fire-2: #ffd73e;
  --sx-fire-3: #e9a83c;
  --sx-fire-4: #a0621f;
  --sx-fire-5: #2a1a08;

  --sx-text: #f6efe4;
  --sx-text-2: #c9bba6;
  --sx-text-3: #8c7f6d;
  --sx-on-gold: #2a1a08;

  --sx-grad-gold: linear-gradient(180deg, var(--sx-gold-1) 0%, var(--sx-gold-2) 45%, var(--sx-gold-3) 100%);
  --sx-grad-silver: linear-gradient(180deg, var(--sx-silver-1) 0%, var(--sx-silver-2) 50%, var(--sx-silver-3) 100%);
  --sx-grad-bronze: linear-gradient(180deg, var(--sx-bronze-1) 0%, var(--sx-bronze-2) 50%, var(--sx-bronze-3) 100%);
  --sx-grad-text: linear-gradient(180deg, #ffffff 0%, #fff4dc 55%, #e6c48a 100%);

  /* 字体 */
  --sx-font: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', 'Source Han Sans SC', sans-serif;
  --sx-font-num: 'Anton', 'Impact', 'Noto Sans SC', sans-serif;

  /* 尺寸 */
  --sx-r-sm: 6px;
  --sx-r: 10px;
  --sx-r-lg: 16px;
  --sx-cut: 14px;            /* 切角大小 */
  --sx-gap: 16px;
  --sx-topbar-h: 56px;

  /* 动效：统一的时长和曲线，交互体感一致 */
  --sx-ease: cubic-bezier(.2, .8, .2, 1);
  --sx-ease-back: cubic-bezier(.34, 1.56, .64, 1);
  --sx-t-fast: 120ms;
  --sx-t: 220ms;
  --sx-t-slow: 420ms;

  --sx-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  --sx-glow-gold: 0 0 0 1px rgba(230, 196, 138, .5), 0 0 24px rgba(230, 196, 138, .25);
  --sx-glow-beam: 0 0 30px rgba(255, 215, 62, .45);
  --sx-focus: 0 0 0 2px var(--sx-bg), 0 0 0 4px var(--sx-beam);
}

@font-face { font-family: 'Anton'; src: url('../vendor/anton/anton-latin-400-normal.woff2') format('woff2'); font-display: swap; }

.sx-root, .sx-root * { box-sizing: border-box; }
.sx-root { background: var(--sx-bg); color: var(--sx-text); font-family: var(--sx-font); line-height: 1.6; -webkit-font-smoothing: antialiased; }
.sx-root [hidden] { display: none !important; }
.sx-num { font-family: var(--sx-font-num); letter-spacing: .02em; font-weight: 400; }
.sx-muted { color: var(--sx-text-3); }
.sx-gold-text { background: var(--sx-grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sx-root :focus-visible { outline: none; box-shadow: var(--sx-focus); }

@media (prefers-reduced-motion: reduce) {
  .sx-root *, .sx-root *::before, .sx-root *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}

/* 烧心杯 UI · 按钮 / 顶部栏 / 返回 / 图标
   依赖 tokens.css；只用令牌变量，半透明一律 color-mix 基于令牌色 */

.sx-icon { display: inline-block; flex-shrink: 0; vertical-align: middle; }

/* ---------- 按钮基础 ---------- */
.sx-btn {
  --_h: 44px; --_px: 20px; --_fs: 15px; --_fg: var(--sx-text);
  --_cut: 10px;
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--_h); min-width: 40px; padding: 0 var(--_px);
  font: 700 var(--_fs)/1 var(--sx-font); letter-spacing: .04em; white-space: nowrap;
  color: var(--_fg); text-decoration: none;
  background: var(--sx-surface-2);
  border: 1px solid var(--sx-line); border-radius: var(--sx-r-sm);
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: transform var(--sx-t) var(--sx-ease-back), filter var(--sx-t) var(--sx-ease),
    box-shadow var(--sx-t) var(--sx-ease), background-color var(--sx-t) var(--sx-ease),
    border-color var(--sx-t) var(--sx-ease), color var(--sx-t) var(--sx-ease);
}
.sx-btn:hover { filter: brightness(1.1); transform: translateY(-1px); border-color: var(--sx-line-strong); }
/* 按下用更快的时长，手感更“脆” */
.sx-btn:active { transform: scale(.96); filter: brightness(.92); transition-duration: var(--sx-t-fast); }
.sx-btn:focus-visible { outline: none; box-shadow: var(--sx-focus); }
.sx-btn__icon { display: inline-flex; }
.sx-btn__icon > svg { width: 1.2em; height: 1.2em; }

/* 尺寸：sm 也保持 40 高，满足最小点击区域 */
.sx-btn--sm { --_h: 40px; --_px: 14px; --_fs: 13px; gap: 6px; }
.sx-btn--md { --_h: 44px; --_px: 20px; --_fs: 15px; }
.sx-btn--lg { --_h: 54px; --_px: 30px; --_fs: 17px; --_cut: 14px; gap: 10px; border-radius: var(--sx-r); }
.sx-btn--block { display: flex; width: 100%; }

/* ---------- 变体 ---------- */
.sx-btn--gold {
  --_fg: var(--sx-on-gold);
  background: var(--sx-grad-gold);
  border-color: color-mix(in srgb, var(--sx-gold-4) 70%, transparent);
  text-shadow: 0 1px 0 color-mix(in srgb, var(--sx-gold-1) 60%, transparent);
  box-shadow: inset 0 1px 0 var(--sx-gold-1),
    inset 0 0 0 1px color-mix(in srgb, var(--sx-gold-1) 35%, transparent),
    inset 0 -2px 0 color-mix(in srgb, var(--sx-gold-4) 45%, transparent),
    0 4px 16px color-mix(in srgb, var(--sx-gold-3) 22%, transparent);
}
.sx-btn--gold:hover { border-color: var(--sx-gold-3); box-shadow: inset 0 1px 0 var(--sx-gold-1), inset 0 0 0 1px color-mix(in srgb, var(--sx-gold-1) 45%, transparent), var(--sx-glow-gold); }

.sx-btn--beam {
  --_fg: var(--sx-on-gold);
  background: linear-gradient(180deg, var(--sx-beam) 0%, var(--sx-beam-2) 100%);
  border-color: var(--sx-beam-2);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--sx-gold-1) 80%, transparent), 0 6px 22px color-mix(in srgb, var(--sx-beam) 28%, transparent);
}
.sx-btn--beam:hover { border-color: var(--sx-beam); box-shadow: inset 0 1px 0 var(--sx-gold-1), var(--sx-glow-beam); }
/* 扫光：斜向高光条，hover 时扫过一次 */
.sx-btn--beam::after {
  content: ''; position: absolute; z-index: -1; top: -20%; bottom: -20%; left: -40%; width: 30%;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--sx-gold-1) 75%, transparent), transparent);
  transform: translateX(-120%) skewX(-20deg); pointer-events: none;
}
.sx-btn--beam:hover::after { animation: sx-sweep 900ms var(--sx-ease) both; }
@keyframes sx-sweep { to { transform: translateX(560%) skewX(-20deg); } }

.sx-btn--ghost { --_fg: var(--sx-gold-2); background: transparent; border-color: var(--sx-line-strong); }
.sx-btn--ghost:hover { --_fg: var(--sx-gold-1); border-color: var(--sx-gold-2); background: color-mix(in srgb, var(--sx-gold-2) 10%, transparent); }

.sx-btn--text { --_fg: var(--sx-gold-2); --_px: 10px; background: transparent; border-color: transparent; }
.sx-btn--text:hover { --_fg: var(--sx-gold-1); border-color: transparent; background: color-mix(in srgb, var(--sx-gold-2) 8%, transparent); transform: none; }

.sx-btn--danger {
  --_fg: color-mix(in srgb, var(--sx-red) 70%, var(--sx-text));
  background: color-mix(in srgb, var(--sx-red) 14%, transparent);
  border-color: color-mix(in srgb, var(--sx-red) 55%, transparent);
}
.sx-btn--danger:hover { --_fg: var(--sx-text); background: var(--sx-red); border-color: var(--sx-red); }

/* ---------- 圆形图标按钮 ---------- */
.sx-btn--icon { --_fg: var(--sx-gold-2); width: var(--_h); padding: 0; border-radius: 50%; }
.sx-btn--icon:hover { --_fg: var(--sx-gold-1); }
.sx-btn--icon .sx-btn__icon > svg, .sx-btn--icon > svg { width: 20px; height: 20px; }
.sx-btn--icon.sx-btn--gold, .sx-btn--icon.sx-btn--beam { --_fg: var(--sx-on-gold); }

/* ---------- 切角：clip-path 切左上/右下，::before 用 evenodd 画 1px 内框 ---------- */
.sx-btn--cut {
  border-radius: 0; border-color: transparent;
  clip-path: polygon(var(--_cut) 0, 100% 0, 100% calc(100% - var(--_cut)), calc(100% - var(--_cut)) 100%, 0 100%, 0 var(--_cut));
}
.sx-btn--cut::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--_frame, var(--sx-line-strong));
  clip-path: polygon(evenodd,
    var(--_cut) 0, 100% 0, 100% calc(100% - var(--_cut)), calc(100% - var(--_cut)) 100%, 0 100%, 0 var(--_cut),
    calc(var(--_cut) + .5px) 1px, calc(100% - 1px) 1px, calc(100% - 1px) calc(100% - var(--_cut) - .5px),
    calc(100% - var(--_cut) - .5px) calc(100% - 1px), 1px calc(100% - 1px), 1px calc(var(--_cut) + .5px));
  transition: background-color var(--sx-t) var(--sx-ease);
}
.sx-btn--cut:hover { border-color: transparent; }
.sx-btn--cut.sx-btn--ghost:hover { --_frame: var(--sx-gold-2); }
.sx-btn--cut.sx-btn--gold { --_frame: color-mix(in srgb, var(--sx-gold-4) 80%, transparent); box-shadow: inset 0 1px 0 var(--sx-gold-1); }
.sx-btn--cut.sx-btn--beam { --_frame: var(--sx-beam-2); box-shadow: none; }
/* clip-path 会裁掉外发光，所以切角按钮 hover 改用亮度表达 */
.sx-btn--cut.sx-btn--gold:hover, .sx-btn--cut.sx-btn--beam:hover { box-shadow: inset 0 1px 0 var(--sx-gold-1); filter: brightness(1.14); }
.sx-btn--cut.sx-btn--danger { --_frame: color-mix(in srgb, var(--sx-red) 55%, transparent); }
.sx-btn--cut:focus-visible { clip-path: none; }

/* ---------- 状态 ---------- */
.sx-btn:disabled, .sx-btn.is-disabled, .sx-btn[aria-disabled="true"] {
  cursor: not-allowed; opacity: .42; filter: saturate(.4); transform: none; box-shadow: none; pointer-events: none;
}
/* loading：文字与图标透明化保留宽度，转圈用 SVG 蒙版 + 前景色 */
.sx-btn.is-loading { color: transparent; text-shadow: none; pointer-events: none; cursor: progress; }
.sx-btn.is-loading::after {
  content: ''; position: absolute; z-index: 1; inset: 0; margin: auto; left: 0; width: 1.25em; height: 1.25em;
  background: var(--_fg); transform: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23000' stroke-opacity='.25' stroke-width='3'/%3E%3Cpath d='M12 3a9 9 0 0 1 9 9' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%23000' stroke-opacity='.25' stroke-width='3'/%3E%3Cpath d='M12 3a9 9 0 0 1 9 9' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: sx-spin 700ms linear infinite;
}
@keyframes sx-spin { to { transform: rotate(360deg); } }

/* ---------- 涟漪（SXUI.ripple 插入） ---------- */
.sx-ripple {
  position: absolute; z-index: 0; border-radius: 50%; pointer-events: none;
  background: currentColor; opacity: .28; transform: scale(0);
  animation: sx-ripple 560ms var(--sx-ease) forwards;
}
.sx-btn--gold .sx-ripple, .sx-btn--beam .sx-ripple { background: var(--sx-gold-1); opacity: .5; }
@keyframes sx-ripple { to { transform: scale(1); opacity: 0; } }

/* ---------- 按钮组：相邻按钮拼接，只保留外侧圆角 ---------- */
.sx-btn-group { display: inline-flex; align-items: stretch; }
.sx-btn-group > .sx-btn:not(:first-child) { margin-left: -1px; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.sx-btn-group > .sx-btn:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.sx-btn-group > .sx-btn:hover, .sx-btn-group > .sx-btn:focus-visible { z-index: 1; }
.sx-btn-group > .sx-btn.is-active { --_fg: var(--sx-on-gold); background: var(--sx-grad-gold); border-color: var(--sx-gold-3); }
.sx-btn-group--spaced { gap: 10px; flex-wrap: wrap; }
.sx-btn-group--spaced > .sx-btn { margin-left: 0 !important; border-radius: var(--sx-r-sm) !important; }

/* ---------- 返回按钮 ---------- */
.sx-back {
  display: inline-flex; align-items: center; gap: 4px;
  height: 40px; min-width: 40px; padding: 0 12px 0 6px;
  font: 600 14px/1 var(--sx-font); letter-spacing: .06em; color: var(--sx-gold-2);
  background: transparent; border: 1px solid transparent; border-radius: var(--sx-r-sm);
  cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: transparent;
  transition: color var(--sx-t) var(--sx-ease), background-color var(--sx-t) var(--sx-ease),
    border-color var(--sx-t) var(--sx-ease), transform var(--sx-t-fast) var(--sx-ease);
}
.sx-back__arrow { width: 26px; height: 26px; transition: transform var(--sx-t) var(--sx-ease-back); }
.sx-back__arrow .sx-back__ring { opacity: .35; transition: opacity var(--sx-t) var(--sx-ease); }
.sx-back:hover { color: var(--sx-gold-1); background: color-mix(in srgb, var(--sx-gold-2) 8%, transparent); border-color: var(--sx-line); }
.sx-back:hover .sx-back__arrow { transform: translateX(-3px); }
.sx-back:hover .sx-back__ring { opacity: .8; }
.sx-back:active { transform: scale(.96); filter: brightness(.9); }
.sx-back:focus-visible { outline: none; box-shadow: var(--sx-focus); }
.sx-back:disabled { opacity: .42; cursor: not-allowed; pointer-events: none; }
.sx-back--icon { padding: 0; width: 40px; justify-content: center; }

/* ---------- 顶部栏 ---------- */
.sx-topbar {
  position: sticky; top: 0; z-index: 50;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr) minmax(0, 1fr); align-items: center; gap: 8px;
  height: calc(var(--sx-topbar-h) + 8px); padding: 0 16px;
  background: color-mix(in srgb, var(--sx-bg) 72%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  transition: box-shadow var(--sx-t) var(--sx-ease), background-color var(--sx-t) var(--sx-ease);
}
/* 底部金线：中间亮两端淡 */
.sx-topbar::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, var(--sx-line-strong) 25%, var(--sx-gold-2) 50%, var(--sx-line-strong) 75%, transparent 100%);
}
.sx-topbar.is-scrolled { background: color-mix(in srgb, var(--sx-bg) 90%, transparent); box-shadow: var(--sx-shadow); }
.sx-topbar__left, .sx-topbar__right { display: flex; align-items: center; gap: 6px; min-width: 0; }
.sx-topbar__right { justify-content: flex-end; }
.sx-topbar__title {
  margin: 0; min-width: 0; text-align: center;
  font: 800 18px/1.2 var(--sx-font); letter-spacing: .08em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: var(--sx-grad-text); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sx-topbar__brand { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; min-width: 0; color: var(--sx-gold-2); text-decoration: none; font-weight: 800; letter-spacing: .1em; white-space: nowrap; }
.sx-topbar__brand > span { overflow: hidden; text-overflow: ellipsis; }
.sx-topbar__brand-mark { width: 10px; height: 10px; flex-shrink: 0; transform: rotate(45deg); border: 1.5px solid var(--sx-gold-2); box-shadow: inset 0 0 0 2px var(--sx-bg), inset 0 0 0 5px var(--sx-gold-3); }

@media (max-width: 640px) {
  .sx-topbar { height: var(--sx-topbar-h); padding: 0 8px; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); }
  .sx-topbar__title { font-size: 16px; letter-spacing: .04em; }
  .sx-topbar .sx-back__text { display: none; }
  .sx-topbar .sx-back { padding: 0; width: 40px; justify-content: center; }
  .sx-btn--lg { --_h: 50px; --_px: 24px; --_fs: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .sx-btn:hover, .sx-back:hover .sx-back__arrow { transform: none; }
  .sx-btn--beam:hover::after { animation: none; }
}

/* 烧心杯 UI · 控件：标签页 / 分段 / 表单 / 徽章 / 直播标记 / 金环头像 / 倒计时 / Toast / 弹窗 / 骨架屏 / 空状态 */

/* ---------- 标签页 ---------- */
.sx-tabs { position: relative; display: flex; gap: 4px; border-bottom: 1px solid var(--sx-line); overflow-x: auto; scrollbar-width: none; }
.sx-tabs::-webkit-scrollbar { display: none; }
.sx-tabs__item { position: relative; flex: none; min-height: 44px; padding: 0 16px; border: 0; background: none; color: var(--sx-text-3); font: inherit; font-weight: 600; font-size: 15px; white-space: nowrap; cursor: pointer; border-radius: var(--sx-r-sm) var(--sx-r-sm) 0 0; transition: color var(--sx-t) var(--sx-ease), transform var(--sx-t-fast) var(--sx-ease), filter var(--sx-t-fast); }
.sx-tabs__item:hover { color: var(--sx-text-2); }
.sx-tabs__item:active { transform: scale(.96); filter: brightness(1.2); }
.sx-tabs__item.is-active { color: var(--sx-text); }
.sx-tabs__item:disabled, .sx-tabs__item[aria-disabled="true"] { opacity: .4; cursor: not-allowed; transform: none; }
.sx-tabs__item .sx-live { position: absolute; top: 9px; right: 5px; width: 6px; height: 6px; }
.sx-tabs__bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; border-radius: 3px 3px 0 0; background: var(--sx-grad-gold); box-shadow: var(--sx-glow-gold); pointer-events: none; transition: transform var(--sx-t-slow) var(--sx-ease), width var(--sx-t-slow) var(--sx-ease); }

/* ---------- 分段控件 ---------- */
.sx-seg { position: relative; display: inline-flex; padding: 4px; border-radius: 999px; background: var(--sx-bg-2); border: 1px solid var(--sx-line); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.sx-seg__item { position: relative; z-index: 1; flex: none; min-height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: none; color: var(--sx-text-2); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: color var(--sx-t) var(--sx-ease), transform var(--sx-t-fast) var(--sx-ease); }
.sx-seg__item:hover { color: var(--sx-text); }
.sx-seg__item:active { transform: scale(.96); }
.sx-seg__item.is-active { color: var(--sx-on-gold); }
.sx-seg__item:disabled { opacity: .4; cursor: not-allowed; }
.sx-seg__thumb { position: absolute; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 999px; background: var(--sx-grad-gold); box-shadow: 0 2px 10px color-mix(in srgb, var(--sx-bg) 50%, transparent); pointer-events: none; transition: transform var(--sx-t-slow) var(--sx-ease-back), width var(--sx-t-slow) var(--sx-ease); }
.is-init .sx-tabs__bar, .is-init .sx-seg__thumb { transition: none; }

/* ---------- 表单 ---------- */
.sx-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sx-field__label { font-size: 13px; font-weight: 600; color: var(--sx-text-2); }
.sx-field__hint { font-size: 12px; color: var(--sx-text-3); }
.sx-field__error { font-size: 12px; color: var(--sx-red); }
.sx-input, .sx-select select { width: 100%; min-height: 44px; padding: 0 14px; border: 1px solid var(--sx-line); border-radius: var(--sx-r); background: var(--sx-bg-2); color: var(--sx-text); font: inherit; font-size: 15px; outline: none; transition: border-color var(--sx-t) var(--sx-ease), box-shadow var(--sx-t) var(--sx-ease), background var(--sx-t); }
textarea.sx-input { padding: 10px 14px; min-height: 96px; resize: vertical; }
.sx-input::placeholder { color: var(--sx-text-3); }
.sx-input:hover, .sx-select select:hover { border-color: var(--sx-line-strong); }
.sx-root .sx-input:focus, .sx-root .sx-select select:focus { border-color: var(--sx-gold-2); box-shadow: var(--sx-glow-gold); background: var(--sx-surface); }
.sx-input:disabled, .sx-select select:disabled { opacity: .45; cursor: not-allowed; }
.sx-field.is-error .sx-input, .sx-field.is-error .sx-select select { border-color: var(--sx-red); }
.sx-field.is-error .sx-field__label { color: var(--sx-red); }
.sx-select { position: relative; display: block; }
.sx-select select { appearance: none; -webkit-appearance: none; padding-right: 42px; cursor: pointer; }
.sx-select select option { background: var(--sx-surface); color: var(--sx-text); }
/* 下拉箭头用 SVG 做遮罩，颜色仍走令牌 */
.sx-select::after { content: ''; position: absolute; right: 14px; top: 50%; width: 14px; height: 14px; margin-top: -7px; background: var(--sx-gold-2); pointer-events: none; transition: transform var(--sx-t) var(--sx-ease);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 5l4.5 4.5L11.5 5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 5l4.5 4.5L11.5 5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.sx-select:focus-within::after { transform: rotate(180deg); }

.sx-switch { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 40px; cursor: pointer; user-select: none; color: var(--sx-text-2); font-size: 14px; }
.sx-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.sx-switch__track { position: relative; flex: none; width: 46px; height: 26px; border-radius: 999px; background: var(--sx-surface-3); border: 1px solid var(--sx-line-strong); transition: background var(--sx-t) var(--sx-ease), border-color var(--sx-t), box-shadow var(--sx-t); }
.sx-switch__track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 999px; background: var(--sx-text-2); box-shadow: 0 2px 6px color-mix(in srgb, var(--sx-bg) 60%, transparent); transition: transform var(--sx-t-slow) var(--sx-ease-back), width var(--sx-t) var(--sx-ease), background var(--sx-t); }
.sx-switch:hover .sx-switch__track { border-color: var(--sx-gold-3); }
.sx-switch:active .sx-switch__track::after { width: 26px; }
.sx-switch input:checked + .sx-switch__track { background: var(--sx-grad-gold); border-color: var(--sx-gold-2); }
.sx-switch input:checked + .sx-switch__track::after { transform: translateX(20px); background: var(--sx-on-gold); }
.sx-switch:active input:checked + .sx-switch__track::after { transform: translateX(14px); }
.sx-switch input:checked ~ .sx-switch__label { color: var(--sx-text); }
.sx-switch input:focus-visible + .sx-switch__track { box-shadow: var(--sx-focus); }
.sx-switch input:disabled ~ * { opacity: .45; }
.sx-switch:has(input:disabled) { cursor: not-allowed; }

/* ---------- 徽章 / 直播标记 ---------- */
.sx-badge { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border: 1px solid transparent; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1; white-space: nowrap; vertical-align: middle; color: var(--sx-text-2); background: var(--sx-surface-3); }
.sx-badge--q { color: var(--sx-cyan); background: color-mix(in srgb, var(--sx-cyan) 12%, transparent); border-color: color-mix(in srgb, var(--sx-cyan) 45%, transparent); }
.sx-badge--live { color: var(--sx-text); background: var(--sx-red); }
.sx-badge--live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: sx-dot-pulse 1.4s ease-out infinite; }
.sx-badge--pending { color: var(--sx-text-2); background: var(--sx-surface-2); border-color: var(--sx-line); }
.sx-badge--tie { color: var(--sx-gold-2); background: color-mix(in srgb, var(--sx-gold-4) 45%, transparent); border-color: var(--sx-gold-4); }
.sx-badge--out { color: var(--sx-text-3); background: transparent; border-color: var(--sx-text-3); }
.sx-badge--gold { color: var(--sx-on-gold); background: var(--sx-grad-gold); box-shadow: inset 0 1px 0 var(--sx-gold-1), inset 0 -1px 0 var(--sx-gold-4); }
.sx-live { position: relative; display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--sx-red); vertical-align: middle; }
.sx-live::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: sx-ping 1.6s var(--sx-ease) infinite; }
@keyframes sx-ping { from { transform: scale(1); opacity: .75; } to { transform: scale(3); opacity: 0; } }
@keyframes sx-dot-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 80%, transparent); } 100% { box-shadow: 0 0 0 6px transparent; } }

/* ---------- 金环头像 ---------- */
.sx-avatar { --av: 64px; position: relative; display: inline-block; flex: none; width: var(--av); height: var(--av); vertical-align: middle; }
.sx-avatar--sm { --av: 40px; }
.sx-avatar--md { --av: 64px; }
.sx-avatar--lg { --av: 96px; }
.sx-avatar--xl { --av: 128px; }
.sx-avatar__img, .sx-avatar__fallback { position: absolute; inset: 10%; border-radius: 50%; overflow: hidden; }
.sx-avatar__img { background: var(--sx-surface-3); }
.sx-avatar__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: filter var(--sx-t) var(--sx-ease); }
.sx-avatar__fallback { display: none; place-items: center; background: var(--sx-grad-gold); color: var(--sx-on-gold); font-weight: 800; font-size: calc(var(--av) * .34); line-height: 1; }
.sx-avatar.is-error .sx-avatar__img { display: none; }
.sx-avatar.is-error .sx-avatar__fallback { display: grid; }
.sx-avatar__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; filter: drop-shadow(0 2px 3px color-mix(in srgb, var(--sx-bg) 70%, transparent)); }
.sx-avatar.is-offline .sx-avatar__img img { filter: saturate(.35) brightness(.85); }
.sx-avatar.is-live::before { content: ''; position: absolute; inset: -5%; border-radius: 50%; box-shadow: 0 0 0 2px var(--sx-cyan), 0 0 calc(var(--av) * .18) color-mix(in srgb, var(--sx-cyan) 70%, transparent); animation: sx-breathe 2.2s ease-in-out infinite; }
.sx-avatar__tag { position: absolute; right: -6%; bottom: 0; z-index: 2; display: none; align-items: center; gap: 3px; padding: 2px 6px; border-radius: 999px; border: 2px solid var(--sx-bg); background: var(--sx-red); color: var(--sx-text); font-size: 10px; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.sx-avatar.is-live .sx-avatar__tag { display: inline-flex; }
.sx-avatar--lg .sx-avatar__tag, .sx-avatar--xl .sx-avatar__tag { font-size: 12px; padding: 2px 8px; }
/* 40px 太小放不下文字，退化成红点 */
.sx-avatar--sm .sx-avatar__tag { width: 12px; height: 12px; padding: 0; font-size: 0; right: 0; }
@keyframes sx-breathe { 0%, 100% { opacity: .45; transform: scale(.98); } 50% { opacity: 1; transform: scale(1.03); } }

/* ---------- 倒计时 ---------- */
.sx-countdown { --cd: 34px; display: inline-flex; align-items: flex-start; gap: 8px; font-size: var(--cd); }
.sx-countdown--sm { --cd: 22px; }
.sx-countdown__unit { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.sx-countdown__digits { display: flex; gap: 3px; }
.sx-countdown__sep { height: 1.3em; display: flex; align-items: center; color: var(--sx-gold-3); font-family: var(--sx-font-num); font-size: .7em; }
.sx-countdown__label { font-size: 12px; color: var(--sx-text-3); letter-spacing: .2em; padding-left: .2em; }
.sx-countdown--sm .sx-countdown__label { font-size: 11px; }
.sx-flip { position: relative; width: .78em; height: 1.3em; border: 1px solid var(--sx-line); border-radius: var(--sx-r-sm); background: linear-gradient(180deg, var(--sx-surface-3) 0 50%, var(--sx-surface-2) 50% 100%); overflow: hidden; perspective: 160px; font-family: var(--sx-font-num); color: var(--sx-gold-1); }
.sx-flip::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--sx-bg); opacity: .7; z-index: 2; }
.sx-flip__n { position: absolute; inset: 0; display: grid; place-items: center; line-height: 1; backface-visibility: hidden; }
.sx-flip__n.is-in { animation: sx-flip-in var(--sx-t-slow) var(--sx-ease) both; }
.sx-flip__n.is-out { animation: sx-flip-out var(--sx-t-slow) var(--sx-ease) both; }
.sx-countdown.is-ended .sx-flip { color: var(--sx-text-3); }
@keyframes sx-flip-in { from { transform: translateY(-60%) rotateX(80deg); opacity: 0; } }
@keyframes sx-flip-out { to { transform: translateY(60%) rotateX(-80deg); opacity: 0; } }
@media (max-width: 400px) { .sx-countdown { --cd: 28px; gap: 6px; } }

/* ---------- Toast ---------- */
.sx-toast-stack { position: fixed; top: 16px; left: 50%; z-index: 1100; display: flex; flex-direction: column; align-items: center; gap: 8px; width: max-content; max-width: calc(100vw - 32px); transform: translateX(-50%); pointer-events: none; }
.sx-toast { box-sizing: border-box; display: flex; align-items: center; gap: 10px; max-width: 100%; min-height: 44px; padding: 10px 16px; border: 1px solid var(--sx-line-strong); border-radius: var(--sx-r); background: var(--sx-surface-2); box-shadow: var(--sx-shadow); color: var(--sx-text); font-family: var(--sx-font); font-size: 14px; line-height: 1.4; pointer-events: auto; cursor: pointer; animation: sx-toast-in var(--sx-t-slow) var(--sx-ease-back) both; transition: opacity var(--sx-t) var(--sx-ease), transform var(--sx-t) var(--sx-ease), margin var(--sx-t) var(--sx-ease); }
.sx-toast svg { flex: none; }
.sx-toast--ok { border-color: color-mix(in srgb, var(--sx-cyan) 50%, transparent); }
.sx-toast--ok svg { color: var(--sx-cyan); }
.sx-toast--error { border-color: color-mix(in srgb, var(--sx-red) 60%, transparent); }
.sx-toast--error svg { color: var(--sx-red); }
.sx-toast--info svg { color: var(--sx-gold-2); }
.sx-toast.is-leaving { opacity: 0; transform: translateY(-10px) scale(.96); }
@keyframes sx-toast-in { from { opacity: 0; transform: translateY(-24px) scale(.96); } }

/* ---------- 确认弹窗 ---------- */
.sx-modal { --cut: var(--sx-cut); position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px; background: color-mix(in srgb, var(--sx-bg) 72%, transparent); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; transition: opacity var(--sx-t) var(--sx-ease); font-family: var(--sx-font); }
.sx-modal.is-open { opacity: 1; }
/* 外层金色渐变 + 内层面板，两层 clip-path 叠出带切角的 1px 金边 */
.sx-modal__panel { width: min(420px, 100%); padding: 1px; background: linear-gradient(160deg, var(--sx-gold-1), var(--sx-gold-3) 40%, var(--sx-gold-4) 70%, var(--sx-gold-2)); clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); filter: drop-shadow(var(--sx-shadow)); transform: scale(.9) translateY(8px); transition: transform var(--sx-t-slow) var(--sx-ease-back); }
.sx-modal.is-open .sx-modal__panel { transform: none; }
.sx-modal__body { position: relative; padding: 26px 24px 20px; background: linear-gradient(180deg, var(--sx-surface-2), var(--sx-surface)); clip-path: polygon(calc(var(--cut) - .5px) 0, 100% 0, 100% calc(100% - var(--cut) + .5px), calc(100% - var(--cut) + .5px) 100%, 0 100%, 0 calc(var(--cut) - .5px)); }
.sx-modal__body::before { content: ''; position: absolute; top: 6px; left: 6px; width: 28px; height: 28px; background: repeating-linear-gradient(135deg, var(--sx-gold-2) 0 1px, transparent 1px 5px); opacity: .15; clip-path: polygon(0 0, 100% 0, 0 100%); }
.sx-modal__title { margin: 0 0 8px; display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 800; background: var(--sx-grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sx-modal__title svg { color: var(--sx-red); flex: none; }
.sx-modal__msg { margin: 0; color: var(--sx-text-2); font-size: 14px; line-height: 1.7; white-space: pre-line; }
.sx-modal__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.sx-modal__actions .sx-btn { min-width: 96px; min-height: 40px; }
.sx-modal--danger .sx-modal__panel { background: linear-gradient(160deg, var(--sx-red), var(--sx-gold-4) 55%, var(--sx-gold-3)); }
.sx-modal--danger .sx-modal__ok { background: var(--sx-red); color: var(--sx-text); border-color: var(--sx-red); }

/* ---------- 骨架屏 / 空状态 ---------- */
.sx-skeleton { position: relative; display: block; overflow: hidden; height: 14px; border-radius: var(--sx-r-sm); background: var(--sx-surface-2); }
.sx-skeleton::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--sx-gold-2) 12%, transparent), transparent); animation: sx-shimmer 1.5s ease-in-out infinite; }
.sx-skeleton--title { height: 22px; width: 50%; }
.sx-skeleton--text { height: 12px; }
.sx-skeleton--circle { border-radius: 50%; width: 64px; height: 64px; }
.sx-skeleton--block { height: 120px; border-radius: var(--sx-r); }
@keyframes sx-shimmer { to { transform: translateX(100%); } }
.sx-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 36px 16px; text-align: center; }
.sx-empty__art { width: 120px; height: 96px; color: var(--sx-gold-3); margin-bottom: 8px; }
.sx-empty__title { margin: 0; font-size: 15px; font-weight: 700; color: var(--sx-text-2); }
.sx-empty__desc { margin: 0; font-size: 13px; color: var(--sx-text-3); max-width: 28em; }
.sx-empty__action { margin-top: 10px; }

/* 循环动画在减少动效时直接关掉，否则 1ms 循环会变成闪烁 */
@media (prefers-reduced-motion: reduce) {
  .sx-live::after, .sx-badge--live::before, .sx-avatar.is-live::before, .sx-skeleton::after { animation: none !important; }
  .sx-avatar.is-live::before { opacity: .8; }
}

/* 烧心杯 UI · 内页组件样式：页面布局 / 标题条 / 切角面板 / 勋章与领奖台 / 选手墙 / 排行榜 / 晋级流程 */

/* ---------- 内页布局 ---------- */
.sx-page { max-width: 1100px; margin: 0 auto; padding: calc(var(--sx-topbar-h) + 32px) 20px 80px; display: flex; flex-direction: column; gap: 64px; }
.sx-section { position: relative; display: flex; flex-direction: column; gap: 28px; }
@media (max-width: 600px) { .sx-page { padding: calc(var(--sx-topbar-h) + 20px) 14px 56px; gap: 44px; } .sx-section { gap: 20px; } }

/* ---------- 标题条：横条从中间展开，文字随后淡入 ---------- */
.sx-title { position: relative; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0 18px; margin: 0; padding: 8px 0; min-height: 52px; text-align: center; }
.sx-title__bar { position: absolute; left: 50%; top: 8px; height: 44px; width: min(460px, 92%); transform: translateX(-50%) scaleX(0); transform-origin: center;
  background: linear-gradient(90deg, transparent, var(--sx-surface-2) 22%, var(--sx-surface-2) 78%, transparent); transition: transform var(--sx-t-slow) var(--sx-ease); }
.sx-title__text { position: relative; font-size: clamp(22px, 3.2vw, 30px); font-weight: 900; letter-spacing: .12em; line-height: 44px; background: var(--sx-grad-text); -webkit-background-clip: text; background-clip: text; color: transparent;
  opacity: 0; transform: translateY(6px); transition: opacity var(--sx-t-slow) var(--sx-ease) 120ms, transform var(--sx-t-slow) var(--sx-ease) 120ms; }
.sx-title__dia { position: relative; width: 11px; height: 11px; color: var(--sx-gold-2); opacity: 0; transition: opacity var(--sx-t) var(--sx-ease) 260ms; }
.sx-title__en { flex-basis: 100%; position: relative; margin-top: 4px; font-family: var(--sx-font-num); font-size: 12px; letter-spacing: .32em; color: var(--sx-text-3); opacity: 0; transition: opacity var(--sx-t-slow) var(--sx-ease) 300ms; }
.sx-title.is-in .sx-title__bar { transform: translateX(-50%) scaleX(1); }
.sx-title.is-in .sx-title__text { opacity: 1; transform: none; }
.sx-title.is-in .sx-title__dia, .sx-title.is-in .sx-title__en { opacity: 1; }

/* ---------- 切角金边面板：背景用 clip-path 切角，描边由 JS 生成的 SVG 绘制保证连续 ---------- */
.sx-panel { --sx-panel-cut: 22px; --c: var(--sx-panel-cut); position: relative; padding: 36px clamp(16px, 4vw, 48px); isolation: isolate;
  background: linear-gradient(180deg, color-mix(in srgb, var(--sx-surface-2) 82%, transparent), color-mix(in srgb, var(--sx-bg-2) 88%, transparent));
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
.sx-panel__frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; overflow: visible; }
.sx-panel__edge { fill: none; stroke: var(--sx-gold-3); stroke-width: 1.5; }
.sx-panel__deco { fill: none; stroke: var(--sx-gold-2); stroke-width: 2; stroke-linecap: square; }
.sx-panel__deco--2 { stroke-opacity: .55; stroke-width: 1.5; }
.sx-panel__deco--3 { stroke-opacity: .25; stroke-width: 1; }
.sx-panel--gold .sx-panel__edge { stroke: var(--sx-gold-2); stroke-width: 2; filter: drop-shadow(0 0 4px var(--sx-gold-3)); }
.sx-panel--gold .sx-panel__deco { stroke: var(--sx-gold-1); }
.sx-panel--flat .sx-panel__deco { display: none; }
.sx-panel--flat .sx-panel__edge { stroke: var(--sx-line-strong); }
@media (max-width: 600px) { .sx-panel { --sx-panel-cut: 16px; padding: 24px 12px; } }

/* ---------- 奖金勋章：SVG 主体 + HTML 文字叠加，字号用容器单位随勋章宽度缩放 ---------- */
.sx-medal { position: relative; width: var(--sx-medal-w, 200px); aspect-ratio: 200 / 384; container-type: inline-size; user-select: none;
  transition: transform var(--sx-t-slow) var(--sx-ease), filter var(--sx-t-slow) var(--sx-ease); filter: drop-shadow(0 14px 24px color-mix(in srgb, var(--sx-bg) 75%, transparent)); }
.sx-medal__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sx-medal__rank { font-family: var(--sx-font-num); font-size: 22px; }
.sx-medal__label { position: absolute; left: 0; right: 0; top: 33.3%; transform: translateY(-50%); text-align: center; font-size: 19cqw; font-weight: 900; line-height: 1; letter-spacing: .02em;
  background: var(--sx-grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 0 var(--sx-bg)); }
.sx-medal__label--long { font-size: 14cqw; }
.sx-medal__plate { position: absolute; left: 10%; right: 10%; top: 63%; text-align: center; line-height: 1.1; }
.sx-medal__cap { font-size: 8.5cqw; font-weight: 800; color: var(--sx-text); letter-spacing: .06em; opacity: .92; }
.sx-medal__amount { margin-top: 2.5cqw; white-space: nowrap; filter: drop-shadow(0 2px 2px var(--sx-bg)); }
.sx-medal__amount .sx-num { font-size: 20cqw; line-height: 1; background: var(--sx-grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sx-medal__amount i { font-style: normal; font-weight: 800; font-size: 7.5cqw; margin-left: 1cqw; color: var(--sx-text); }
.sx-medal--silver .sx-medal__amount .sx-num, .sx-medal--steel .sx-medal__amount .sx-num { background: var(--sx-grad-silver); -webkit-background-clip: text; background-clip: text; }
.sx-medal--bronze .sx-medal__amount .sx-num { background: var(--sx-grad-bronze); -webkit-background-clip: text; background-clip: text; }
.sx-medal__sheen { transform: translateX(0); transition: transform 0s; }
.sx-medal:hover { transform: translateY(-8px); filter: drop-shadow(0 22px 30px color-mix(in srgb, var(--sx-bg) 85%, transparent)) brightness(1.06); }
.sx-medal:hover .sx-medal__sheen { transform: translateX(330px); transition: transform 900ms var(--sx-ease); }

/* ---------- 领奖台：视觉顺序 2-1-3-4，冠军居中抬高 ---------- */
.sx-podium { position: relative; padding: 24px 0 8px; overflow: hidden; }
.sx-podium__list { position: relative; display: flex; justify-content: center; align-items: flex-end; gap: clamp(12px, 3vw, 40px); padding-top: 40px; }
.sx-podium__item { opacity: 0; transform: translateY(24px); transition: opacity var(--sx-t-slow) var(--sx-ease), transform var(--sx-t-slow) var(--sx-ease); }
.sx-podium.is-in .sx-podium__item { opacity: 1; transform: none; }
.sx-podium__item--r1 { order: 2; --sx-medal-w: 236px; margin-bottom: 48px; transition-delay: 0ms; }
.sx-podium__item--r2 { order: 1; --sx-medal-w: 200px; transition-delay: 120ms; }
.sx-podium__item--r3 { order: 3; --sx-medal-w: 200px; transition-delay: 200ms; }
.sx-podium__item--r4 { order: 4; --sx-medal-w: 168px; transition-delay: 280ms; }
.sx-ghost-text { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); font-family: var(--sx-font-num); font-size: clamp(72px, 13.6vw, 184px); line-height: 1; letter-spacing: .04em;
  color: var(--sx-text); opacity: .05; white-space: nowrap; pointer-events: none; }
.sx-podium__coins { position: absolute; inset: 0; pointer-events: none; }
.sx-podium__coin { position: absolute; opacity: .15; animation: sx-coin-float 7s ease-in-out infinite; }
.sx-podium__coin svg { display: block; animation: sx-coin-spin 4.5s linear infinite; }
@keyframes sx-coin-float { 0%, 100% { transform: translateY(0) rotate(-12deg); } 50% { transform: translateY(-16px) rotate(10deg); } }
@keyframes sx-coin-spin { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.25); } }
@media (max-width: 900px) and (min-width: 601px) {
  .sx-podium__item--r1 { --sx-medal-w: 200px; } .sx-podium__item--r2, .sx-podium__item--r3 { --sx-medal-w: 170px; } .sx-podium__item--r4 { --sx-medal-w: 146px; }
}
/* 手机：冠军独占一行，其余两两一行 */
@media (max-width: 600px) {
  .sx-podium__list { display: grid; grid-template-columns: 1fr 1fr; justify-items: center; gap: 28px 12px; padding-top: 16px; }
  .sx-podium__item--r1 { grid-column: 1 / -1; order: 0; margin: 0; --sx-medal-w: min(210px, 56vw); }
  .sx-podium__item--r2 { order: 1; } .sx-podium__item--r3 { order: 2; } .sx-podium__item--r4 { order: 3; grid-column: 1 / -1; }
  .sx-podium__item--r2, .sx-podium__item--r3 { --sx-medal-w: min(160px, 42vw); } .sx-podium__item--r4 { --sx-medal-w: min(140px, 38vw); }
  .sx-ghost-text { top: 18%; }
}

/* ---------- 奖杯：位图 + 光芒 + 轮廓扫光 ---------- */
.sx-trophy { --sx-trophy-h: 280px; position: relative; display: inline-flex; justify-content: center; height: var(--sx-trophy-h); aspect-ratio: 320 / 760; isolation: isolate; }
.sx-trophy__body { position: relative; z-index: 2; display: block; height: 100%; transition: transform var(--sx-t-slow) var(--sx-ease-back), filter var(--sx-t-slow); filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .6)); }
.sx-trophy__body img { display: block; height: 100%; width: auto; user-select: none; }
/* 扫光只落在奖杯本体上：用奖杯图做遮罩 */
.sx-trophy__sheen { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 247, 220, .85) 50%, transparent 62%) no-repeat; background-size: 250% 100%; background-position: 150% 0;
  -webkit-mask: var(--sx-trophy-src) center / 100% 100% no-repeat; mask: var(--sx-trophy-src) center / 100% 100% no-repeat;
  animation: sx-trophy-sheen 5.5s var(--sx-ease) infinite 1.2s; }
.sx-trophy__glow { position: absolute; z-index: 1; left: 50%; top: 34%; width: 230%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--sx-beam) 38%, transparent), color-mix(in srgb, var(--sx-gold-3) 14%, transparent) 55%, transparent);
  transition: opacity var(--sx-t-slow); opacity: .75; }
.sx-trophy__rays { display: none; }
.sx-trophy--rays .sx-trophy__rays { display: block; position: absolute; z-index: 0; left: 50%; top: 34%; width: 340%; aspect-ratio: 1; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--sx-beam) 22%, transparent) 0deg 5deg, transparent 5deg 18deg);
  -webkit-mask: radial-gradient(closest-side, #000 18%, transparent 72%); mask: radial-gradient(closest-side, #000 18%, transparent 72%);
  transform: translate(-50%, -50%); animation: sx-trophy-spin 40s linear infinite; opacity: .7; transition: opacity var(--sx-t-slow); }
.sx-trophy--float .sx-trophy__body { animation: sx-trophy-float 4.8s ease-in-out infinite; }
.sx-trophy:hover .sx-trophy__body { transform: translateY(-6px) scale(1.04); filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .6)) brightness(1.08); }
.sx-trophy:hover .sx-trophy__glow, .sx-trophy:hover .sx-trophy__rays { opacity: 1; }
.sx-trophy:hover .sx-trophy__sheen { animation: sx-trophy-sheen 900ms var(--sx-ease) 1; }
@keyframes sx-trophy-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes sx-trophy-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes sx-trophy-sheen { 0% { background-position: 150% 0; } 22%, 100% { background-position: -50% 0; } }

/* 领奖台上的奖杯：站在冠军勋章上方，底座压在皇冠后面 */
.sx-podium__item--r1 { display: flex; flex-direction: column; align-items: center; }
.sx-podium__trophy { position: relative; z-index: 0; margin-bottom: -18px; opacity: 0; transform: translateY(30px) scale(.9); transition: opacity 700ms var(--sx-ease), transform 900ms var(--sx-ease-back); transition-delay: 380ms; }
.sx-podium__trophy + .sx-medal { position: relative; z-index: 1; }
.sx-podium.is-in .sx-podium__trophy { opacity: 1; transform: none; }
@media (max-width: 900px) { .sx-podium__trophy .sx-trophy { --sx-trophy-h: 230px; } }
@media (max-width: 600px) { .sx-podium__trophy .sx-trophy { --sx-trophy-h: min(210px, 52vw); } }

/* ---------- 选手墙 ---------- */
.sx-wall { display: flex; flex-direction: column; gap: 24px; }
.sx-wall__bar { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.sx-wall__filter { min-height: 40px; min-width: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--sx-line-strong); background: transparent; color: var(--sx-text-2); font: inherit; font-size: 14px; cursor: pointer;
  transition: background var(--sx-t) var(--sx-ease), color var(--sx-t) var(--sx-ease), transform var(--sx-t-fast) var(--sx-ease), filter var(--sx-t-fast); }
.sx-wall__filter:hover { color: var(--sx-text); border-color: var(--sx-gold-2); }
.sx-wall__filter:active { transform: scale(.96); filter: brightness(1.15); }
.sx-wall__filter[aria-pressed="true"] { background: var(--sx-grad-gold); color: var(--sx-on-gold); border-color: transparent; font-weight: 700; }
.sx-wall__filter .sx-num { margin-left: 4px; }
.sx-wall__grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 24px 12px; }
.sx-wall__group + .sx-wall__group { margin-top: 8px; }
.sx-wall__team { display: flex; align-items: baseline; gap: 10px; margin: 0 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--sx-line); font-size: 16px; color: var(--sx-gold-2); }
.sx-wall__team small { font-size: 12px; color: var(--sx-text-3); }
.sx-wall__empty { text-align: center; color: var(--sx-text-3); padding: 32px 0; margin: 0; }
.sx-wall__item { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; color: var(--sx-text); text-decoration: none; border-radius: var(--sx-r); padding: 4px 0;
  transition: transform var(--sx-t) var(--sx-ease-back), filter var(--sx-t-fast); }
a.sx-wall__item:hover { transform: translateY(-4px); }
a.sx-wall__item:hover .sx-wall__ring { filter: drop-shadow(0 0 6px var(--sx-gold-3)); }
a.sx-wall__item:active { transform: scale(.96); filter: brightness(1.15); }
.sx-wall__item.is-disabled { cursor: not-allowed; filter: grayscale(.85); opacity: .55; }
.sx-wall__avatar { position: relative; width: 100%; max-width: 104px; aspect-ratio: 1; border-radius: 50%; }
.sx-wall__avatar img, .sx-wall__avatar b { position: absolute; inset: 8%; width: 84%; height: 84%; border-radius: 50%; object-fit: cover; background: var(--sx-surface-3); }
.sx-wall__avatar b { display: grid; place-items: center; font-size: clamp(16px, 3vw, 28px); color: var(--sx-gold-2); font-weight: 800; }
.sx-wall__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transition: filter var(--sx-t); }
.sx-wall__item.is-live .sx-wall__avatar::before { content: ""; position: absolute; inset: -3px; border-radius: 50%; box-shadow: 0 0 0 2px var(--sx-cyan), 0 0 16px var(--sx-cyan); animation: sx-breathe 2.2s ease-in-out infinite; }
.sx-wall__tag { position: absolute; left: 50%; bottom: -4px; transform: translateX(-50%); padding: 0 8px; border-radius: 999px; background: var(--sx-cyan); color: var(--sx-bg); font-size: 11px; font-weight: 800; line-height: 18px; white-space: nowrap; }
.sx-wall__name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 600; }
.sx-wall__heat { display: inline-flex; align-items: center; gap: 3px; margin-top: -4px; padding: 2px 9px 2px 7px; border-radius: 999px; white-space: nowrap;
  background: linear-gradient(180deg, var(--sx-fire-2), var(--sx-fire-3)); color: var(--sx-fire-5); box-shadow: 0 0 0 1px var(--sx-fire-4), 0 0 12px rgba(255, 170, 40, .45); }
.sx-wall__heat svg { width: 13px; height: 13px; color: #c2410c; }
.sx-wall__heat b { font-size: 13px; font-weight: 800; line-height: 16px; }
@keyframes sx-breathe { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@media (max-width: 900px) { .sx-wall__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 600px) { .sx-wall__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 8px; } .sx-wall__name { font-size: 12px; } .sx-wall__heat { padding: 1px 6px 1px 5px; } .sx-wall__heat b { font-size: 11px; } .sx-wall__heat svg { width: 11px; height: 11px; } .sx-wall__tag { font-size: 10px; padding: 0 5px; line-height: 16px; } }

/* ---------- 排行榜：行式列表，FLIP 由 JS 设置 transform ---------- */
.sx-rank { display: flex; flex-direction: column; gap: 8px; }
.sx-rank__row { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr) auto 84px; align-items: center; gap: 12px; min-height: 56px; padding: 8px 16px; border-radius: var(--sx-r);
  background: var(--sx-surface); border: 1px solid var(--sx-line); transition: transform var(--sx-t-slow) var(--sx-ease), border-color var(--sx-t), background var(--sx-t); }
.sx-rank__row:hover { background: var(--sx-surface-2); border-color: var(--sx-line-strong); }
.sx-rank__row.is-q { border-color: color-mix(in srgb, var(--sx-cyan) 35%, transparent); }
.sx-rank__row.is-q::before { content: ""; position: absolute; left: -1px; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--sx-cyan); }
.sx-rank__row.is-pending { opacity: .62; }
.sx-rank.is-in .sx-rank__row.is-enter { animation: sx-rank-in var(--sx-t-slow) var(--sx-ease) both; animation-delay: calc(var(--i, 0) * 60ms); }
.sx-rank:not(.is-in) .sx-rank__row.is-enter { opacity: 0; }
.sx-rank__row.is-flash { animation: sx-rank-flash 1.2s var(--sx-ease); }
@keyframes sx-rank-in { from { opacity: 0; transform: translateY(14px); } }
@keyframes sx-rank-flash { 0% { background: color-mix(in srgb, var(--sx-gold-2) 40%, var(--sx-surface)); border-color: var(--sx-gold-1); box-shadow: var(--sx-glow-gold); } 100% { background: var(--sx-surface); } }
.sx-rank__pos { display: flex; justify-content: center; }
.sx-rank__chip { display: grid; place-items: center; width: 34px; height: 34px; font-size: 18px; color: var(--sx-on-gold); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.sx-rank__chip--gold { background: var(--sx-grad-gold); }
.sx-rank__chip--silver { background: var(--sx-grad-silver); }
.sx-rank__chip--bronze { background: var(--sx-grad-bronze); }
.sx-rank__no { font-size: 20px; color: var(--sx-text-2); }
.sx-rank__team { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.sx-rank__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-size: 16px; }
.sx-rank__members { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; font-size: 13px; color: var(--sx-text-2); }
.sx-rank__res { font-size: 13px; color: var(--sx-text-2); white-space: nowrap; text-align: right; }
.sx-rank__res b { font-size: 18px; margin-left: 4px; color: var(--sx-text); }
.sx-rank__res.is-clear, .sx-rank__res.is-clear b { color: var(--sx-cyan); }
.sx-rank__badge { display: flex; justify-content: flex-end; }
@media (max-width: 600px) {
  .sx-rank__row { grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 2px 10px; padding: 8px 12px; }
  .sx-rank__pos { grid-row: 1 / 3; }
  .sx-rank__team { grid-column: 2; flex-wrap: wrap; gap: 2px 8px; }
  .sx-rank__res { grid-column: 2; grid-row: 2; text-align: left; }
  .sx-rank__badge { grid-column: 3; grid-row: 1 / 3; }
  .sx-rank__chip { width: 30px; height: 30px; font-size: 16px; }
}

/* ---------- 晋级流程：三栏，复活赛栏下移，让初赛连线从其上方空白处穿过 ---------- */
.sx-flow { position: relative; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: clamp(32px, 7vw, 96px); align-items: start; }
.sx-flow__lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.sx-flow__path { fill: none; stroke: var(--sx-gold-2); stroke-width: 1.5; stroke-dasharray: 6 6; animation: sx-flow-dash 1.2s linear infinite; }
.sx-flow__path.is-tbd { stroke: var(--sx-line-strong); }
.sx-flow__dot { fill: var(--sx-gold-2); }
@keyframes sx-flow-dash { to { stroke-dashoffset: -24; } }
.sx-flow__col { position: relative; z-index: 1; padding: 16px; border-radius: var(--sx-r); background: var(--sx-surface); border: 1px solid var(--sx-line); }
.sx-flow__col--rep { margin-top: 150px; }
.sx-flow__col--final { border-color: var(--sx-line-strong); box-shadow: var(--sx-glow-gold); }
.sx-flow__h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 0 12px; font-size: 18px; font-weight: 800; color: var(--sx-gold-1); }
.sx-flow__h small { font-size: 12px; font-weight: 400; color: var(--sx-text-3); }
.sx-flow__seed { margin: -4px 0 12px; font-size: 12px; color: var(--sx-text-3); }
.sx-flow__seed b { font-weight: 700; color: var(--sx-text); font-variant-numeric: tabular-nums; letter-spacing: .02em; user-select: all; }
.sx-flow__seed b.is-tbd { font-weight: 400; color: var(--sx-text-3); user-select: auto; }
.sx-flow__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sx-flow__seat { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 0 12px; border-radius: var(--sx-r-sm); background: var(--sx-surface-2); border: 1px solid var(--sx-line); }
.sx-flow__seat:not(.is-tbd) { border-color: color-mix(in srgb, var(--sx-cyan) 40%, transparent); }
.sx-flow__pl { font-size: 12px; color: var(--sx-text-3); white-space: nowrap; }
.sx-flow__tn { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-flow__seat.is-tbd .sx-flow__tn { color: var(--sx-text-3); font-weight: 400; }
.sx-flow__note { margin: 12px 0 0; font-size: 12px; color: var(--sx-text-3); }
.sx-flow__note::after { content: " →"; }
.sx-flow__col--final .sx-flow__seat:nth-child(3) { margin-top: 72px; }
@media (max-width: 720px) {
  .sx-flow { grid-template-columns: 1fr; gap: 36px; }
  .sx-flow__lines { display: none; }
  .sx-flow__col--rep { margin-top: 0; }
  .sx-flow__col--final .sx-flow__seat:nth-child(3) { margin-top: 0; }
  .sx-flow__col + .sx-flow__col::before { content: ""; position: absolute; left: 50%; top: -36px; height: 36px; border-left: 2px dashed var(--sx-gold-3); animation: sx-flow-v 1.2s linear infinite; }
  .sx-flow__note::after { content: " ↓"; }
}
@keyframes sx-flow-v { 50% { opacity: .35; } }

/* 烧心杯 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; }
}

/* 预览页（首页 + 内页）的页面级排版；组件样式都在 /ui/ 里 */
body { margin: 0; }
.pv-entry { position: relative; z-index: 2; margin-top: -40px; }
.pv-home { padding-top: 24px; }
.pv-note { margin: 16px 0 0; text-align: center; color: var(--sx-text-3); font-size: 13px; }
.pv-notice { margin: 16px 0 0; padding: 8px 14px; border-left: 3px solid var(--sx-beam); background: color-mix(in srgb, var(--sx-beam) 10%, transparent); color: var(--sx-text); max-width: 520px; }
.pv-start { position: relative; margin: 10px 0 0; padding: 4px 14px; border-radius: 99px; background: color-mix(in srgb, var(--sx-red) 85%, transparent); color: #fff; font-size: clamp(15px, 1.6vw, 22px); font-weight: 900; letter-spacing: .1em; white-space: nowrap; text-shadow: 0 1px 2px rgba(0,0,0,.5); box-shadow: 0 4px 14px rgba(0,0,0,.45); }
.pv-tagline { display: flex; align-items: center; gap: .6em; margin: 10px 0 0; color: var(--sx-gold-1); font-size: clamp(14px, 1.4vw, 19px); font-weight: 800; letter-spacing: .12em; white-space: nowrap; text-shadow: 0 2px 8px var(--sx-bg); }
.pv-tagline[hidden] { display: none; }
.pv-tagline::before, .pv-tagline::after { content: ''; width: 2em; height: 2px; background: linear-gradient(90deg, transparent, var(--sx-gold-2)); }
.pv-tagline::after { background: linear-gradient(270deg, transparent, var(--sx-gold-2)); }
.pv-livecount { margin-left: 8px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; background: var(--sx-red); color: var(--sx-text); font-size: 14px; line-height: 22px; text-align: center; }
.pv-tip { margin: 0 0 12px; padding: 10px 14px; border-radius: var(--sx-r); background: color-mix(in srgb, var(--sx-gold-2) 12%, transparent); color: var(--sx-gold-1); font-size: 14px; }
.pv-panel-in { padding: 28px 24px 32px; }

/* 赛程卡 */
.pv-stages { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sx-gap); }
.pv-stage { position: relative; display: flex; gap: 14px; padding: 20px 18px; color: inherit; text-decoration: none; transition: transform var(--sx-t) var(--sx-ease), box-shadow var(--sx-t); }
.pv-stage:hover { transform: translateY(-3px); }
.pv-stage:active { transform: scale(.98); }
.pv-stage.is-live { box-shadow: var(--sx-glow-gold); }
.pv-stage.is-done { opacity: .7; }
.pv-stage__no { font-size: 40px; line-height: 1; color: var(--sx-gold-2); }
.pv-stage__main { display: grid; gap: 6px; flex: 1; min-width: 0; }
.pv-stage__name { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 18px; }
.pv-stage__name svg { color: var(--sx-gold-2); }
.pv-stage__time { display: flex; align-items: center; gap: 6px; color: var(--sx-cyan); font-size: 14px; }
.pv-stage__desc { color: var(--sx-text-3); font-size: 13px; }
.pv-stage__go { align-self: center; color: var(--sx-gold-3); transition: transform var(--sx-t) var(--sx-ease); }
.pv-stage:hover .pv-stage__go { transform: translateX(4px); color: var(--sx-gold-1); }

/* 排行榜 */
.pv-rank-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
#rankList .sx-rank__row { cursor: pointer; }

/* 最终名次 */
.pv-standings { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 24px; }
.pv-standing { display: grid; gap: 4px; align-content: end; justify-items: center; padding: 16px; text-align: center; border-radius: var(--sx-r-lg); background: var(--sx-surface); box-shadow: inset 0 0 0 1px var(--sx-line); color: inherit; text-decoration: none; transition: transform var(--sx-t) var(--sx-ease); }
.pv-standing:hover { transform: translateY(-3px); }
.pv-standing b { font-size: 20px; }
.pv-standing .sx-num { font-size: 22px; color: var(--sx-gold-2); }
.pv-standing__label { font-size: 13px; color: var(--sx-text-3); font-weight: 700; }
/* 冠军卡：深底金框，奖杯放在名字上方（金底会把金色奖杯吃掉） */
.pv-standing--1 { position: relative; overflow: hidden; background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--sx-gold-3) 30%, var(--sx-surface)), var(--sx-surface) 70%); box-shadow: var(--sx-glow-gold); }
.pv-standing--1 .pv-standing__label { color: var(--sx-gold-1); }
.pv-standing--1 b { background: var(--sx-grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 22px; }
.pv-standing .sx-trophy { margin-bottom: 4px; }
.pv-standing:hover .sx-trophy__body { transform: translateY(-4px) scale(1.05); }
/* 银/铜/钛奖杯背后的光晕换成各自颜色 */
.pv-standing--2 .sx-trophy__glow { filter: grayscale(1) brightness(1.1); }
.pv-standing--3 .sx-trophy__glow { filter: hue-rotate(-18deg) saturate(.9); }
.pv-standing--4 .sx-trophy__glow { filter: grayscale(1) brightness(.7); }
/* 决赛未结束的占位卡：不能点，队伍名用灰字 */
.pv-standing.is-pending:hover { transform: none; }
.pv-standing.is-pending b { font-size: 18px; color: var(--sx-text-3); -webkit-text-fill-color: var(--sx-text-3); letter-spacing: .1em; }

/* 个人奖项：领奖台下方的横排奖项卡，FMVP 金、其余银 */
.pv-awards { margin-top: 40px; }
.pv-awards__title { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0 0 18px; font-size: 20px; font-weight: 900; letter-spacing: .2em; color: var(--sx-gold-1); }
.pv-awards__title::before, .pv-awards__title::after { content: ''; width: 64px; height: 2px; background: linear-gradient(90deg, transparent, var(--sx-gold-3)); }
.pv-awards__title::after { transform: scaleX(-1); }
.pv-awards__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 420px)); justify-content: center; gap: var(--sx-gap); }
.pv-award {
  --c1: var(--sx-silver-1); --c2: var(--sx-silver-2); --c3: var(--sx-silver-3); --grad: var(--sx-grad-silver);
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: var(--sx-r-lg);
  background: radial-gradient(90% 120% at 0% 50%, color-mix(in srgb, var(--c3) 22%, var(--sx-surface)), var(--sx-surface) 70%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c2) 45%, transparent);
  transition: transform var(--sx-t) var(--sx-ease), box-shadow var(--sx-t);
}
.pv-award.is-gold { --c1: var(--sx-gold-1); --c2: var(--sx-gold-2); --c3: var(--sx-gold-3); --grad: var(--sx-grad-gold); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c2) 60%, transparent), var(--sx-glow-gold); }
.pv-award:hover { transform: translateY(-3px); }
/* 光泽扫过 */
.pv-award::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 35%, color-mix(in srgb, var(--c1) 16%, transparent) 50%, transparent 65%); transform: translateX(-120%); }
.pv-award:hover::after { transform: translateX(120%); transition: transform .7s var(--sx-ease); }
/* 六边形徽章：外圈金属渐变，内圈深底，奖项名用金属字 */
.pv-award__badge { flex: none; display: grid; place-items: center; width: 72px; height: 80px; background: var(--grad); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); filter: drop-shadow(0 4px 10px color-mix(in srgb, var(--sx-bg) 70%, transparent)); }
.pv-award__badge b { display: grid; place-items: center; width: 60px; height: 68px; clip-path: inherit; background: radial-gradient(circle at 50% 30%, var(--sx-surface-3), var(--sx-bg)); font-family: var(--sx-font-num); font-size: 17px; letter-spacing: .02em; color: var(--c1); }
.pv-award__main { flex: 1; min-width: 0; }
.pv-award__name { display: flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 900; letter-spacing: .04em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pv-award__count { padding: 1px 8px; border-radius: 99px; font-size: 12px; font-weight: 700; letter-spacing: 0; color: var(--c1); -webkit-text-fill-color: var(--c1); background: color-mix(in srgb, var(--c3) 22%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c2) 40%, transparent); }
.pv-award__desc { margin: 6px 0 0; font-size: 13px; color: var(--sx-text-2); }
.pv-award__prize { flex: none; display: grid; justify-items: end; }
.pv-award__prize small { font-size: 12px; color: var(--sx-text-3); }
.pv-award__prize .sx-num { font-size: 30px; line-height: 1.1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* 获奖选手：卡片底部单独一行，头像 + 昵称 + 队伍，点了进直播间 */
.pv-award { flex-wrap: wrap; }
.pv-award__who { flex: 1 0 100%; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; padding-top: 12px; border-top: 1px dashed color-mix(in srgb, var(--c2) 35%, transparent); }
.pv-award__who > small { font-size: 12px; color: var(--sx-text-3); }
.pv-award__winner { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; }
a.pv-award__winner:hover .pv-award__wname b { color: var(--c1); }
.pv-award__wname { display: grid; line-height: 1.25; }
.pv-award__wname b { font-size: 15px; color: var(--sx-text); transition: color var(--sx-t); }
.pv-award__wname small { font-size: 12px; color: var(--sx-text-3); }
.pv-award__pending { font-size: 13px; color: var(--sx-text-3); }
@media (max-width: 420px) {
  .pv-awards__list { grid-template-columns: 1fr; }
  .pv-award { gap: 12px; padding: 14px; }
  .pv-award__badge { width: 56px; height: 62px; }
  .pv-award__badge b { width: 46px; height: 52px; font-size: 14px; }
  .pv-award__prize .sx-num { font-size: 24px; }
}

/* 规则 */
.pv-rules { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sx-gap); }
.pv-rule { padding: 20px 22px; }
.pv-rule h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 17px; color: var(--sx-gold-2); }
.pv-rule ol { margin: 0; padding-left: 20px; color: var(--sx-text-2); }
.pv-rule li { margin: 4px 0; }
.pv-rule li b { color: var(--sx-text); }
.pv-rule p { margin: 8px 0 0; color: var(--sx-text-2); }
.pv-rule.is-warn h3 { color: var(--sx-red); }
.pv-modes { display: flex; flex-wrap: wrap; gap: 8px; }
.pv-modes span { padding: 4px 12px; border-radius: 99px; background: color-mix(in srgb, var(--sx-cyan) 12%, transparent); color: var(--sx-cyan); font-size: 14px; }

.pv-foot { padding: 32px 20px 48px; text-align: center; color: var(--sx-text-3); font-size: 13px; border-top: 1px solid var(--sx-line); margin-top: 48px; }
.pv-conn { margin-left: 10px; }
.pv-conn.is-ok { color: var(--sx-green); }
.pv-conn.is-bad { color: var(--sx-red); }
/* 实时连接验证码弹窗 */
.pv-captcha__row { display: flex; gap: 10px; align-items: center; margin-top: 16px; flex-wrap: wrap; }
.pv-captcha__img { flex: none; padding: 0; border: 0; border-radius: var(--sx-r-sm, 6px); overflow: hidden; cursor: pointer; background: #eee; line-height: 0; }
.pv-captcha__img img { display: block; width: 132px; height: 48px; }
.pv-captcha__input { flex: 1; min-width: 120px; height: 48px; padding: 0 14px; border-radius: var(--sx-r-sm, 6px); border: 1px solid var(--sx-line-strong); background: var(--sx-bg); color: var(--sx-text); font: 700 22px/1 var(--sx-font-num); letter-spacing: .3em; }
.pv-captcha__input:focus { outline: 2px solid var(--sx-gold-2); outline-offset: 1px; }
.pv-captcha__input::placeholder { font: 400 15px/1 var(--sx-font); letter-spacing: normal; color: var(--sx-text-3); }
.pv-captcha__err { min-height: 1.4em; margin: 8px 0 0; color: var(--sx-red); font-size: 13px; }

/* ---------- 内页 ---------- */
.sx-view__page > .sx-topbar { position: sticky; top: 0; z-index: 5; }
.pv-inner { padding-top: 24px; padding-bottom: 64px; }
.pv-eyebrow { margin: 0; font-size: 12px; letter-spacing: .2em; color: var(--sx-gold-3); }
.pv-h3 { margin: 0 0 14px; font-size: 18px; font-weight: 800; }
.pv-h3 small { font-weight: 400; font-size: 13px; margin-left: 6px; }
.pv-team-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 8px 0 20px; border-bottom: 1px solid var(--sx-line); }
.pv-team-name { margin: 4px 0 0; font-size: clamp(30px, 6vw, 48px); line-height: 1.1; font-weight: 900; background: var(--sx-grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pv-team-id { display: flex; align-items: flex-end; gap: 16px; min-width: 0; }
.pv-team-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.pv-members { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.pv-member { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--sx-r-lg); background: var(--sx-surface); box-shadow: inset 0 0 0 1px var(--sx-line); }
.pv-member.is-live { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sx-cyan) 50%, transparent); }
.pv-member__info { flex: 1; min-width: 0; display: grid; }
.pv-member__info b { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-member__info small { color: var(--sx-text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-member.is-live small { color: var(--sx-cyan); }
.pv-stage-list { padding: 4px 0; }
.pv-stage-row { display: flex; align-items: center; gap: 14px; padding: 14px 18px; color: inherit; text-decoration: none; border-bottom: 1px solid var(--sx-line); transition: background var(--sx-t-fast); }
.pv-stage-row:last-child { border-bottom: 0; }
.pv-stage-row:hover { background: var(--sx-surface-2); }
.pv-stage-row > svg { margin-left: auto; color: var(--sx-gold-3); flex: none; }
.pv-stage-row__name { width: 64px; font-weight: 800; }
.pv-stage-row__res { font-family: var(--sx-font-num); font-size: 20px; }
.pv-stage-row__res.is-clear { color: var(--sx-green); }
.pv-stage-row__rank { color: var(--sx-text-3); font-size: 13px; }
.pv-stage-row__rank b { color: var(--sx-text); font-size: 18px; }
.pv-stage-info { display: flex; gap: 32px; padding: 22px 24px; flex-wrap: wrap; align-items: flex-start; }
.pv-stage-time { margin: 4px 0 0; font-size: 18px; color: var(--sx-cyan); font-weight: 700; }
.pv-stage-desc { flex: 1; min-width: 240px; }
.pv-stage-desc p { margin: 0 0 4px; }
.pv-live-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px 16px; }
.pv-live-card { display: grid; gap: 8px; min-width: 0; color: inherit; text-decoration: none; transition: transform var(--sx-t) var(--sx-ease); }
.pv-live-card:hover { transform: translateY(-3px); }
.pv-live-card:active { transform: scale(.98); }
.pv-live-card__cover { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: var(--sx-r-lg); overflow: hidden; background: var(--sx-surface); box-shadow: inset 0 0 0 1px var(--sx-line); transition: box-shadow var(--sx-t); }
.pv-live-card:hover .pv-live-card__cover { box-shadow: var(--sx-glow-gold); }
.pv-live-card__shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s var(--sx-ease); }
.pv-live-card:hover .pv-live-card__shot { transform: scale(1.04); }
.pv-live-card__fallback { position: absolute; inset: 0 0 24px; display: none; place-items: center; }
.pv-live-card.is-nocover .pv-live-card__shot { display: none; }
.pv-live-card.is-nocover .pv-live-card__fallback { display: grid; }
.pv-live-card__team { position: absolute; top: 10px; left: 10px; max-width: calc(100% - 20px); padding: 3px 10px; border-radius: 8px; background: var(--sx-red); color: #fff; font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-live-card__bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 28px 12px 10px; background: linear-gradient(transparent, rgba(0, 0, 0, .75)); color: #fff; }
.pv-live-card__who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pv-live-card__who b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.pv-live-card__face { flex: none; width: 30px; height: 30px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--sx-surface-3); box-shadow: 0 0 0 2px rgba(255, 255, 255, .85); }
.pv-live-card__face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pv-live-card__face b { font-size: 14px; }
.pv-live-card__heat { flex: none; display: flex; align-items: center; gap: 4px; font-size: 15px; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.pv-live-card__heat svg { width: 16px; height: 16px; }
.pv-live-card__title { font-size: 16px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-live-card__cate { margin-top: -6px; color: var(--sx-text-3); font-size: 13px; }

@media (max-width: 860px) {
  .pv-stages, .pv-rules { grid-template-columns: 1fr; }
  .pv-standings { grid-template-columns: repeat(2, 1fr); }
  .pv-panel-in { padding: 22px 12px 24px; }
  .pv-entry { margin-top: -24px; }
  .pv-foot { padding-bottom: 96px; } /* 手机底部 Tab 栏占位 */
  .pv-stage-row { flex-wrap: wrap; gap: 6px 12px; }
}