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