/* ============================================================
   RobinArena · 射击链游外壳验证原型
   视觉规范：赛博工业风 / 深色终端 / 青蓝主色 + 琥珀代币色
   金融数值遵循中国市场习惯：涨=红 跌=绿
   ============================================================ */

:root {
  /* 底色层次 */
  --bg-void:    #070A12;
  --bg-deep:    #0A0E17;
  --bg-panel:   #111827;
  --bg-raise:   #161F31;
  --bg-hover:   #1D2941;

  /* 描边 */
  --line:       #1F2B42;
  --line-hi:    #2C3B58;

  /* 主色 */
  --cyan:       #35E0FF;
  --cyan-dim:   #0C9BC8;
  --cyan-glow:  rgba(53, 224, 255, 0.15);

  /* 功能色 */
  --amber:      #FFC53D;   /* 代币 / 收益 */
  --violet:     #8B5CF6;   /* 稀有度 */
  --up:         #EF4444;   /* 涨 · 中国市场习惯 */
  --down:       #22C55E;   /* 跌 · 中国市场习惯 */
  --danger:     #EF4444;
  --ok:         #22C55E;

  /* 文本 */
  --tx-1: #E8EDF7;
  --tx-2: #94A3B8;
  --tx-3: #5A6782;

  /* #125 游戏语料色：与 scene.js _initScene 调色板逐值对齐（勿单点漂移）
     sky_top #05070E · 地平线 #16233F · sky_bot #0A1020；主色 --cyan 0x35E0FF /
     --amber 0xFFC53D / --violet 0x8B5CF6 已在顶部对齐游戏 */
  --game-sky-top: #05070E;
  --game-sky-mid: #16233F;
  --game-sky-bot: #0A1020;
  --game-metal:   #0B1322;   /* 地板蓝金属基色 */
  --game-player:  #FFE4B5;   /* 玩家补光暖白（脸部提亮） */
  --neon-red:     #FF3A2A;   /* boss 主色 */
  --boss-gold:    #FFD24A;   /* boss 色环金 */
  --metal-steel:  #8FA6C4;   /* 金属高光钢蓝 */

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;

  --sidebar-w: 220px;
  --topbar-h: 60px;
  --nav-h: 58px;   /* 移动端底部导航高度 */
  /* v130: brand-mark 高度驱动变量（宽 = 高 × 1.19，与图片 248×209 实际包围盒一致，避免方框留白）。
     桌面侧栏 60px 顶栏 → 48px mark（上下各 6px 留白）；收窄为 72px icon rail → 40px mark。
     `.sf-brand`/`.veil-logo` 全部跟随；移动端 `.brand` 隐藏，footer 仍由 760/560 断点收缩。 */
  --mark-h: 48px;

  --font-display: 'Rajdhani', 'Chakra Petch', system-ui, 'Microsoft YaHei', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', 'Microsoft YaHei', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', Consolas, 'Microsoft YaHei', monospace;
}

/* ============================================================
   UI 模板：CYBERCORE CSS
   来源 github.com/sebyx07/cybercore-css · MIT · 纯 CSS 零依赖
   ------------------------------------------------------------
   套模原理：模板的全部规则都写在 @layer 内，而本文件的规则是"未分层"的。
   按 CSS 级联层规范，未分层声明的优先级高于任何分层声明，
   所以 —— 我们不需要 !important，也不需要提高特异性，
   所有布局 / 响应式 / 组件语义仍然由本文件说了算，
   模板只在"我们没有定义的地方"补上它的视觉（切角、流光、角标、辉光）。
   这是零风险套模的关键。
   ============================================================ */

:root {
  /* 主色：模板青 -> 我们的 #35E0FF */
  --cyber-cyan-500: #35E0FF;
  --cyber-cyan-600: #0EA5C6;
  --cyber-cyan-700: #0C9BC8;
  --cyber-cyan-900: #0B4F60;
  /* 洋红：模板的"危险"色 -> 对齐我们的 danger */
  --cyber-magenta-500: #EF4444;
  --cyber-magenta-700: #B91C1C;
  /* 黄：模板的"警告"色 -> 对齐我们的代币琥珀 */
  --cyber-yellow-500: #FFC53D;
  --cyber-yellow-700: #B45309;
  /* 绿：模板的"成功"色 -> 对齐中国市场习惯的"跌" */
  --cyber-green-500: #22C55E;
  --cyber-green-700: #15803D;
  --cyber-green-900: #14532D;

  /* 模板底色对齐我们的深空蓝层次 */
  --color-bg-primary:   #070A12;
  --color-bg-secondary: #0F1626;
  --color-bg-tertiary:  #141C2E;
  --color-bg-elevated:  #1A2438;
  --color-border-default: #1F2B42;
  --color-text-primary:   #E8EDF7;
  --color-text-secondary: #94A3B8;
  --color-text-muted:     #5A6782;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  overscroll-behavior: none;
  background: var(--bg-void);
  color: var(--tx-1);
  font-family: var(--font-body);
  font-size: 14px;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

button, input, select { font-family: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
a { color: var(--cyan); text-decoration: none; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-hi); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--cyan-dim); }

/* ---------- 布局骨架 ----------
   100dvh：移动端浏览器地址栏收起/展开时不会跳动；老浏览器回退 100vh */
#app { display: flex; height: 100vh; height: 100dvh; }

.sidebar {
  width: var(--sidebar-w);
  background: var(--bg-deep);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.brand {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 18px;
  border-bottom: 1px solid var(--line);
}
.brand-mark {
  /* v130: 容器宽高比跟随图片真实包围盒（1.19:1），由 --mark-h 单一驱动，断点只改 --mark-h。
     替换原 84×84 固定方框——旧值在 60px 顶栏里上下各溢出 12px，在 72px icon rail 里横向溢出 12px。 */
  width: calc(var(--mark-h) * 1.19);
  height: var(--mark-h);
  background: transparent;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: 11px; font-weight: 700; color: #04202A;
  overflow: hidden; flex-shrink: 0;
}
.brand-mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* v128: new logo carries the RobinArena wordmark inside the image (RA badge mark),
   so the duplicate HTML wordmark is hidden — only the tagline span shows. */
.brand-txt b { display: none; }
.brand-txt { line-height: 1.15; }
.brand-txt span { display: block; font-size: 10px; color: var(--tx-3); letter-spacing: 2px; }

.nav { padding: 14px 10px; flex: 1; overflow-y: auto; }
.nav-group-label {
  font-size: 10px; letter-spacing: 1.5px; color: var(--tx-3);
  padding: 12px 8px 6px; text-transform: uppercase;
}
.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: var(--r-md);
  color: var(--tx-2); font-size: 13.5px; width: 100%;
  text-align: left; transition: all .14s ease;
  position: relative;
}
.nav-item:hover { background: var(--bg-panel); color: var(--tx-1); }
.nav-item.active { background: var(--bg-raise); color: var(--cyan); }
.nav-item.active::before {
  content: ''; position: absolute; left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 18px; background: var(--cyan); border-radius: 0 3px 3px 0;
}
.nav-item .ico { width: 18px; height: 18px; flex-shrink: 0; opacity: .9; }
.nav-item .badge {
  margin-left: auto; font-size: 10px; padding: 2px 6px;
  border-radius: 20px; background: var(--bg-hover); color: var(--tx-3);
}
.nav-item.active .badge { background: var(--cyan-glow); color: var(--cyan); }

.sidebar-foot {
  padding: 12px; border-top: 1px solid var(--line);
  font-size: 11px; color: var(--tx-3); line-height: 1.6;
}

/* ---------- 主区 ---------- */
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.topbar {
  height: var(--topbar-h);
  background: var(--bg-deep);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 16px;
  padding: 0 20px; flex-shrink: 0;
}
.page-title { font-family: var(--font-display); font-size: 15px; letter-spacing: 1px; }
.page-sub { font-size: 11.5px; color: var(--tx-3); margin-left: 2px; }

.balance-chip {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-panel); border: 1px solid var(--line);
  padding: 7px 14px; border-radius: 40px;
}
.balance-chip .coin {
  width: 18px; height: 18px; border-radius: 50%;
  background: linear-gradient(135deg, #F7C948, var(--amber));
  display: grid; place-items: center;
  font-size: 10px; font-weight: 700; color: #3B2500;
}
.balance-chip .num {
  font-family: var(--font-mono); font-size: 15px; font-weight: 600; color: var(--amber);
}
.balance-chip .unit { font-size: 11px; color: var(--tx-3); }

.mode-switch {
  display: flex; background: var(--bg-panel);
  border: 1px solid var(--line); border-radius: 40px; padding: 3px;
}
.mode-switch button {
  padding: 5px 15px; border-radius: 40px;
  font-size: 12px; color: var(--tx-3); transition: all .15s;
}
.mode-switch button.on { background: var(--cyan); color: #04202A; font-weight: 600; }

.wallet-btn {
  display: flex; align-items: center; gap: 7px;
  background: var(--bg-raise); border: 1px solid var(--line-hi);
  padding: 8px 15px; border-radius: var(--r-md);
  font-size: 12.5px; transition: all .15s;
}
.wallet-btn:hover { border-color: var(--cyan); color: var(--cyan); }
.dot-live {
  width: 7px; height: 7px; border-radius: 50%; background: var(--ok);
  box-shadow: 0 0 0 3px rgba(34,197,94,.15);
}

.view-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; }
.view { display: none; padding: 24px; animation: fade .22s ease; }
.view.on { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- 通用卡片 ---------- */
.card {
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 20px;
}
.card-h {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.card-h h3 {
  font-size: 14px; font-weight: 600; letter-spacing: .3px;
  display: flex; align-items: center; gap: 8px;
}
.card-h .hint { font-size: 11.5px; color: var(--tx-3); }

.grid { display: grid; gap: 18px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-side { grid-template-columns: minmax(0, 1fr) 340px; }
@media (max-width: 1180px) {
  .g3, .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-side { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 统计块 ---------- */
.stat {
  background: var(--bg-panel); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 16px 18px;
  position: relative; overflow: hidden;
}
.stat::after {
  content: ''; position: absolute; right: -20px; top: -20px;
  width: 70px; height: 70px; border-radius: 50%;
  background: var(--cyan-glow);
}
.stat .k { font-size: 11.5px; color: var(--tx-3); margin-bottom: 8px; letter-spacing: .5px; }
.stat .v {
  font-family: var(--font-mono); font-size: 23px; font-weight: 600;
  letter-spacing: -.5px; line-height: 1;
}
.stat .d { font-size: 11.5px; margin-top: 7px; display: flex; align-items: center; gap: 5px; }
.up   { color: var(--up); }
.down { color: var(--down); }
.flat { color: var(--tx-3); }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 22px; border-radius: var(--r-md);
  font-size: 13.5px; font-weight: 600; letter-spacing: .3px;
  transition: all .15s ease; border: 1px solid transparent;
}
.btn-pri { background: var(--cyan); color: #04202A; }
.btn-pri:hover { background: #67E8F9; transform: translateY(-1px); }
.btn-ghost { background: var(--bg-raise); border-color: var(--line-hi); color: var(--tx-1); }
.btn-ghost:hover { border-color: var(--cyan); color: var(--cyan); }
.btn-amber { background: var(--amber); color: #3B2500; }
.btn-amber:hover { background: #FBBF24; transform: translateY(-1px); }
.btn-danger { background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.4); color: var(--danger); }
.btn-sm { padding: 7px 14px; font-size: 12px; }
.btn-lg { padding: 15px 34px; font-size: 15px; }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }

/* ---------- 进度条 ---------- */
.bar { height: 6px; background: var(--bg-hover); border-radius: 6px; overflow: hidden; }
.bar > i {
  display: block; height: 100%; border-radius: 6px;
  background: linear-gradient(90deg, var(--cyan-dim), var(--cyan));
  transition: width .5s cubic-bezier(.4,0,.2,1);
}
.bar.amber > i { background: linear-gradient(90deg, #B45309, var(--amber)); }
.bar.danger > i { background: linear-gradient(90deg, #991B1B, var(--danger)); }

/* ---------- 表格 ---------- */
.tbl { width: 100%; max-width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th {
  text-align: left; padding: 10px 12px; font-size: 11px;
  color: var(--tx-3); font-weight: 500; letter-spacing: .8px;
  border-bottom: 1px solid var(--line); text-transform: uppercase;
}
.tbl td { padding: 12px; border-bottom: 1px solid var(--line); }
.tbl tbody tr:hover { background: var(--bg-raise); }
.tbl .mono { font-family: var(--font-mono); }
.tbl .num-r { text-align: right; }

/* ---------- 标签 ---------- */
.tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 20px;
  font-size: 11px; font-weight: 500;
}
.tag-cyan   { background: var(--cyan-glow); color: var(--cyan); }
.tag-amber  { background: rgba(255,197,61,.14); color: var(--amber); }
.tag-violet { background: rgba(139,92,246,.14); color: var(--violet); }
.tag-red    { background: rgba(239,68,68,.13); color: var(--danger); }
.tag-green  { background: rgba(34,197,94,.13); color: var(--ok); }
.tag-gray   { background: var(--bg-hover); color: var(--tx-3); }

/* 稀有度色阶 */
.r-common   { color: #94A3B8; }
.r-rare     { color: #38BDF8; }
.r-epic     { color: #A78BFA; }
.r-legend   { color: #FFC53D; }

/* ============================================================
   首页
   ============================================================ */
.hero {
  background:
    radial-gradient(900px 380px at 78% 8%, rgba(53,224,255,.13), transparent 62%),
    radial-gradient(700px 320px at 12% 92%, rgba(139,92,246,.10), transparent 60%),
    var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 34px 36px;
  position: relative; overflow: hidden;
}
.hero::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(53,224,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(53,224,255,.045) 1px, transparent 1px);
  background-size: 44px 44px;
  pointer-events: none;
}
.hero-in { position: relative; display: flex; align-items: center; gap: 40px; }
.hero-txt { flex: 1; }
.hero-txt .eyebrow {
  font-family: var(--font-mono); font-size: 11px; color: var(--cyan);
  letter-spacing: 3px; margin-bottom: 12px;
}
.hero-txt h1 {
  font-family: var(--font-display); font-size: 34px; font-weight: 700;
  line-height: 1.15; letter-spacing: .5px; margin-bottom: 12px;
}
.hero-txt h1 em { font-style: normal; color: var(--cyan); }
.hero-txt p { color: var(--tx-2); font-size: 13.5px; line-height: 1.75; max-width: 520px; }
.hero-cta { display: flex; gap: 12px; margin-top: 22px; }

.hero-vis { width: 260px; flex-shrink: 0; }
.orbit {
  width: 260px; height: 260px; position: relative;
  margin: 0 auto;
}
.orbit-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid var(--line-hi);
}
.orbit-ring.r2 { inset: 34px; border-color: var(--cyan-dim); border-style: dashed; }
.orbit-ring.r3 { inset: 68px; border-color: var(--line-hi); }
.orbit-core {
  position: absolute; inset: 92px; border-radius: 50%;
  background: #0A0E17;
  display: grid; place-items: center;
  overflow: hidden;
  box-shadow: 0 0 40px rgba(53,224,255,.35);
  animation: pulseCore 3.2s ease-in-out infinite;
}
@keyframes pulseCore {
  0%,100% { transform: scale(1); box-shadow: 0 0 34px rgba(53,224,255,.3); }
  50%     { transform: scale(1.045); box-shadow: 0 0 52px rgba(53,224,255,.5); }
}
.orbit-node {
  position: absolute; width: 11px; height: 11px; border-radius: 50%;
  background: var(--amber); box-shadow: 0 0 12px rgba(255,197,61,.7);
}
.orbit-node:nth-child(1) { top: -5px; left: 50%; margin-left: -5.5px; }
.orbit-node:nth-child(2) { bottom: 16px; right: 26px; background: var(--violet); box-shadow: 0 0 12px rgba(139,92,246,.7); }
.orbit-node:nth-child(3) { top: 50%; left: 26px; background: var(--cyan); box-shadow: 0 0 12px rgba(53,224,255,.7); }

/* 模式选择卡 */
.mode-card {
  background: var(--bg-panel); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 22px;
  transition: all .2s ease; cursor: pointer; position: relative; overflow: hidden;
}
.mode-card:hover { border-color: var(--line-hi); transform: translateY(-2px); }
.mode-card.sel { border-color: var(--cyan); box-shadow: 0 0 0 1px var(--cyan), 0 12px 34px rgba(53,224,255,.13); }
.mode-card .mc-ico {
  width: 44px; height: 44px; border-radius: var(--r-md);
  display: grid; place-items: center; margin-bottom: 14px;
  background: var(--bg-raise);
}
.mode-card h4 { font-size: 15px; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
.mode-card p { font-size: 12.5px; color: var(--tx-3); line-height: 1.7; min-height: 42px; }
.mode-meta {
  display: flex; gap: 16px; margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--line);
}
.mode-meta div { flex: 1; min-width: 0; }
.mode-meta .mk { font-size: 10.5px; color: var(--tx-3); margin-bottom: 4px; }
.mode-meta .mv { font-family: var(--font-mono); font-size: 14px; font-weight: 600; }
.mode-card .ribbon {
  position: absolute; top: 14px; right: -30px;
  background: var(--cyan); color: #04202A;
  font-size: 10px; font-weight: 700; letter-spacing: 1px;
  padding: 4px 34px; transform: rotate(38deg);
}

/* ============================================================
   3D 竞技场
   ============================================================ */
#view-arena { padding: 0; height: 100%; }
.arena-wrap {
  position: relative;
  height: calc(100vh - var(--topbar-h));
  /* #125：与游戏 sky_bot 对齐，GL 就绪前的底色不再突兀 */
  background: var(--game-sky-bot);
  overflow: hidden;
}
#scene-canvas { display: block; width: 100%; height: 100%; }

/* 加载遮罩 */
.scene-loading {
  position: absolute; inset: 0; z-index: 40;
  background: var(--bg-void);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 18px;
  transition: opacity .5s ease;
}
.scene-loading.gone { opacity: 0; pointer-events: none; }
.load-ring {
  width: 52px; height: 52px; border-radius: 50%;
  border: 2px solid var(--line); border-top-color: var(--cyan);
  animation: spin .85s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.load-txt { font-family: var(--font-mono); font-size: 12px; color: var(--tx-2); letter-spacing: 2px; }

/* HUD 层 */
.hud { position: absolute; inset: 0; pointer-events: none; z-index: 10; }
.hud > * { pointer-events: auto; }

/* 顶部波次条 */
.hud-top {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; justify-content: center; padding-top: 18px;
}
.wave-chip {
  background: rgba(10,14,23,.82);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line-hi);
  border-radius: 40px;
  display: flex; align-items: center; gap: 22px;
  padding: 9px 26px;
}
.wave-chip .wc-item { text-align: center; }
.wave-chip .wk-sub { font-size: 7.5px; letter-spacing: .8px; color: var(--tx-3); opacity: .65; margin-top: 1px; }
.wave-chip .wk { font-size: 9.5px; color: var(--tx-3); letter-spacing: 1.6px; }
.wave-chip .wv { font-family: var(--font-mono); font-size: 17px; font-weight: 600; line-height: 1.3; }
.wave-chip .wv.cy { color: var(--cyan); }
.wave-chip .wv.am { color: var(--amber); }
.wave-chip .wsep { width: 1px; height: 26px; background: var(--line-hi); }

/* 击杀信息流：v140 · 移到左上避开右侧 SESSION PnL 卡片（之前 top:74 right:22 与 earn-float top:282 在纵向延伸区重叠） */
.killfeed {
  position: absolute; top: 60px; left: 24px; right: auto;
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
}
.kill-item {
  background: rgba(10,14,23,.8);
  border: 1px solid var(--line-hi);
  border-left: 2px solid var(--cyan);
  padding: 6px 13px; border-radius: var(--r-sm);
  font-size: 12px; font-family: var(--font-mono);
  display: flex; align-items: center; gap: 9px;
  animation: killIn .3s ease;
}
.kill-item .kp { color: var(--amber); }
@keyframes killIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }

/* 左下：生命 / 护甲 / 经济余量
   v140：z-index 提到 35（高于 milestone 29 / vignette 28 / kill-flash 27），
   受击或击杀闪屏时 vital 数字与进度条必须仍清晰可读——这是玩家最需要看血量的瞬间。 */
.hud-bl { position: absolute; left: 24px; bottom: 24px; width: 260px; z-index: 35; }
.vital { margin-bottom: 12px; position: relative; }
.vital-top {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 5px; position: relative; z-index: 2;
}
.vital-top .vname { font-size: 10px; letter-spacing: 1.6px; color: var(--tx-3);
  text-shadow: 0 1px 2px rgba(0,0,0,.85), 0 0 4px rgba(0,0,0,.6); }
.vital-top .vnum { font-family: var(--font-mono); font-size: 14px; font-weight: 600;
  text-shadow: 0 1px 2px rgba(0,0,0,.9), 0 0 6px rgba(0,0,0,.65); }
.vital-bar { height: 7px; background: rgba(255,255,255,.07); border-radius: 4px; overflow: hidden; }
.vital-bar > i { display: block; height: 100%; border-radius: 4px; transition: width .25s ease; }
.hp > i   { background: linear-gradient(90deg, #B91C1C, #EF4444); }
.ar > i   { background: linear-gradient(90deg, #0C9BC8, #35E0FF); }
.st > i   { background: linear-gradient(90deg, #A16207, #FFC53D); }

/* 右下：弹药 / 武器 */
.hud-br {
  position: absolute; right: 24px; bottom: 24px;
  text-align: right;
}
.ammo-box {
  background: rgba(10,14,23,.8);
  border: 1px solid var(--line-hi);
  border-radius: var(--r-md);
  padding: 12px 20px;
}
.weapon-name {
  font-size: 10.5px; letter-spacing: 2px; color: var(--tx-3); margin-bottom: 3px;
}
.ammo-num {
  font-family: var(--font-display); font-size: 36px; font-weight: 700; line-height: 1;
  letter-spacing: -1px;
}
.ammo-num .mag { color: var(--tx-1); }
.ammo-num .sep { color: var(--tx-3); font-size: 22px; margin: 0 3px; }
.ammo-num .res { color: var(--tx-3); font-size: 22px; }
.reload-tip { font-size: 10.5px; color: var(--tx-3); margin-top: 6px; letter-spacing: .5px; }
.reload-tip.warn { color: var(--amber); }

/* 准星 */
.crosshair {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 34px; height: 34px;
  pointer-events: none;
  transition: transform 90ms ease-out;
}
.crosshair span {
  position: absolute; background: #E6F8FF;
  box-shadow: 0 0 5px rgba(0,0,0,.95), 0 0 6px rgba(53,224,255,.6);
}
/* 四向短线：稍长、加粗，命中时变红并向外扩张 */
.crosshair span:nth-child(1) { left: 50%; top: 0;    width: 2px; height: 10px; margin-left: -1px; }
.crosshair span:nth-child(2) { left: 50%; bottom: 0; width: 2px; height: 10px; margin-left: -1px; }
.crosshair span:nth-child(3) { top: 50%; left: 0;    height: 2px; width: 10px; margin-top: -1px; }
.crosshair span:nth-child(4) { top: 50%; right: 0;   height: 2px; width: 10px; margin-top: -1px; }
.crosshair .cdot {
  left: 50%; top: 50%; width: 3px; height: 3px;
  margin: -1.5px 0 0 -1.5px; background: #E6F8FF;
  box-shadow: 0 0 5px rgba(0,0,0,.95), 0 0 8px rgba(53,224,255,.85);
  border-radius: 1px;
}
/* 待机态：呼吸动效，让准星"活着" */
.crosshair.idle { animation: crossBreath 1.4s ease-in-out infinite; }
@keyframes crossBreath {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, -50%) scale(1.07); }
}
/* 命中态：变红、轻微扩张、对角短线外推，强化"打中了"的视觉爆点 */
.crosshair.hit { transform: translate(-50%, -50%) scale(1.18); }
.crosshair.hit span,
.crosshair.hit .cdot { background: var(--danger); box-shadow: 0 0 6px rgba(0,0,0,.95), 0 0 12px rgba(239,68,68,.9); }
.crosshair.hit span:nth-child(1) { transform: translateY(-3px); }
.crosshair.hit span:nth-child(2) { transform: translateY( 3px); }
.crosshair.hit span:nth-child(3) { transform: translateX(-3px); }
.crosshair.hit span:nth-child(4) { transform: translateX( 3px); }
.crosshair.hit .cdot { transform: scale(1.6); }

/* ---- 受击全屏 vignette：替代原来 180ms 阴影 ---- */
.hurt-vignette {
  position: absolute; inset: 0; z-index: 28; pointer-events: none;
  background: radial-gradient(ellipse at center,
    rgba(239,68,68,0) 38%, rgba(239,68,68,.55) 78%, rgba(239,68,68,.78) 100%);
  opacity: 0;
  animation: hurtPulse 380ms ease-out forwards;
}
@keyframes hurtPulse {
  0%   { opacity: 0; }
  18%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ---- 受击方向指示：环形红条绕屏幕中心旋转指向伤害来源 ---- */
/* 0°=正前(屏幕上方) · 90°=右 · 180°=正后(屏幕下方)；--ang 由 onHurt 写入 */
.dmg-dir {
  position: absolute; left: 50%; top: 50%;
  width: 0; height: 0; z-index: 28; pointer-events: none;
  transform: rotate(var(--ang, 0deg));
  animation: dmgDirFade 700ms ease-out forwards;
}
.dmg-dir i {
  position: absolute; left: -34px; top: -158px;
  width: 68px; height: 18px;
  background: linear-gradient(to top, rgba(239,68,68,.95), rgba(239,68,68,.25));
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  filter: drop-shadow(0 0 6px rgba(239,68,68,.8));
}
@keyframes dmgDirFade {
  0%   { opacity: 0; }
  15%  { opacity: 1; }
  70%  { opacity: .9; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .dmg-dir { animation: none; opacity: .9; }
}

/* ---- 击杀爆发：屏幕短暂暖色亮闪 ---- */
.kill-flash {
  position: absolute; inset: 0; z-index: 27; pointer-events: none;
  background: radial-gradient(ellipse at center,
    rgba(255,197,61,.28) 0%, rgba(255,197,61,.08) 45%, rgba(255,197,61,0) 75%);
  opacity: 0;
  animation: killFlash 320ms ease-out forwards;
}
@keyframes killFlash {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  100% { opacity: 0; }
}

/* ---- 低血警示：HP<30% 时心跳红边 ---- */
body.low-hp .arena-wrap {
  box-shadow: inset 0 0 0 2px rgba(239,68,68,.65);
  animation: lowHpPulse 1.2s ease-in-out infinite;
}
@keyframes lowHpPulse {
  0%, 100% { box-shadow: inset 0 0 0 2px rgba(239,68,68,.4); }
  50%      { box-shadow: inset 0 0 0 4px rgba(239,68,68,.85), inset 0 0 80px rgba(239,68,68,.18); }
}
@media (prefers-reduced-motion: reduce) {
  body.low-hp .arena-wrap { animation: none; }
}

/* ---- 结算技巧评语 ---- */
.res-tip {
  display: none;
  margin: 13px 0 4px;
  padding: 9px 13px;
  background: rgba(53, 224, 255, .07);
  border: 1px solid var(--line-hi);
  border-left: 2px solid var(--cyan);
  border-radius: var(--r-sm);
  font-size: 12px;
  line-height: 1.7;
  color: var(--tx-2);
}

/* ---- 首杀里程碑：屏幕上 1/3 处大字提示
   v140：z-index 29 → 28（与受击 vignette 同层）——原 29 高于 vignette 28，
   受击瞬间 amber 大字会压在红色危险信号之上，玩家第一眼看到的是"成就"而非"危险"。 ---- */
.milestone {
  position: absolute; left: 50%; top: 30%;
  transform: translate(-50%, -50%);
  z-index: 28; pointer-events: none;
  text-align: center;
  animation: milestonePop 1.8s ease-out forwards;
}
.milestone .ms-t {
  font-family: var(--font-display);
  font-size: 30px; font-weight: 800; letter-spacing: 3px;
  color: var(--amber);
  text-shadow: 0 0 18px rgba(255,197,61,.75), 0 0 46px rgba(255,197,61,.4);
}
.milestone .ms-s {
  margin-top: 5px;
  font-size: 12px; letter-spacing: 2px;
  color: rgba(230,248,255,.85);
  text-shadow: 0 0 10px rgba(0,0,0,.9);
}
@keyframes milestonePop {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.7); }
  12%  { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
  25%  { transform: translate(-50%, -50%) scale(1); }
  78%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -60%) scale(1); }
}
@media (max-width: 760px) {
  .milestone .ms-t { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .milestone { animation: none; opacity: 0; }
}

/* ---- 战斗开始 3-2-1-GO 倒计时 ---- */
#countdown-overlay {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 29; pointer-events: none;
  font-family: var(--font-display);
  font-size: 128px; font-weight: 800; letter-spacing: 2px;
  color: #E6F8FF;
  text-shadow: 0 0 24px rgba(53,224,255,.7), 0 0 60px rgba(53,224,255,.35);
  opacity: 0;
}
#countdown-overlay.go {
  /* v140：GO 字号 128→84 + opacity 0.9——128px 大字在 0.6s pop 期间挡视野前 50%，
     开打瞬间玩家应立刻看到正前方敌人位置，而非被 GO 大字压场。 */
  font-size: 84px;
  color: var(--amber);
  text-shadow: 0 0 22px rgba(255,197,61,.8), 0 0 50px rgba(255,197,61,.35);
  opacity: 0.92;
}
#countdown-overlay.show {
  animation: countdownPop 600ms ease-out;
}
@keyframes countdownPop {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.6); }
  20%  { opacity: 1; transform: translate(-50%, -50%) scale(1.25); }
  60%  { opacity: 1; transform: translate(-50%, -50%) scale(1.0); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.0); }
}
@media (max-width: 760px) {
  #countdown-overlay { font-size: 88px; }
}

/* v140a：此旧"避让右侧 minimap"覆盖已移除——v140 起 killfeed 移左上（top:60 left:24），
   遗留顶层 .killfeed{top:280} 会让其悬在左中 280px 处，桌面端计算值实为 280 而非 60 */

/* 小地图 */
.minimap {
  position: absolute; right: 24px; top: 96px;
  width: 168px; height: 168px;
  background: rgba(7,10,18,.78);
  border: 1px solid var(--line-hi);
  border-radius: var(--r-md);
  overflow: hidden;
}
.minimap canvas { width: 100%; height: 100%; display: block; }
.minimap-label {
  position: absolute; top: 7px; left: 9px;
  font-size: 9px; letter-spacing: 1.6px; color: var(--tx-3);
}

/* 收益浮窗（右侧实时 RB 跳动） */
.earn-float {
  position: absolute; right: 24px; top: 282px;
  background: rgba(10,14,23,.8);
  border: 1px solid var(--line-hi);
  border-radius: var(--r-md);
  padding: 12px 16px; min-width: 168px;
}
.earn-float .el { font-size: 9.5px; letter-spacing: 1.6px; color: var(--tx-3); margin-bottom: 6px; }
.earn-float .ev {
  font-family: var(--font-mono); font-size: 25px; font-weight: 700; color: var(--amber);
  line-height: 1;
}
.earn-float .es { font-size: 11px; color: var(--tx-3); margin-top: 7px; }
.earn-float .es b { color: var(--tx-2); font-family: var(--font-mono); }

/* 准星下的命中飘字 */
.dmg-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.dmg-num {
  position: absolute;
  font-family: var(--font-display); font-size: 19px; font-weight: 700;
  color: var(--amber); text-shadow: 0 2px 8px rgba(0,0,0,.9);
  animation: dmgFloat .85s ease-out forwards;
}
@keyframes dmgFloat {
  0%   { opacity: 0; transform: translate(-50%, 0) scale(.7); }
  18%  { opacity: 1; transform: translate(-50%, -14px) scale(1.12); }
  100% { opacity: 0; transform: translate(-50%, -54px) scale(.95); }
}

/* 入场遮罩（点击开始） */
.enter-veil {
  position: absolute; inset: 0; z-index: 30;
  background: rgba(5,8,16,.9);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 20px;
  backdrop-filter: blur(3px);
}
/* v130: LOGO 入场遮罩 logo 响应式——视口缩放跟 8×8 缩略小屏；过宽 88px 封顶避免桌面霸屏。 */
.enter-veil h2 {
  font-family: var(--font-display); font-size: 26px; letter-spacing: 2px;
}
.veil-logo {
  width: clamp(56px, 11vw, 88px);
  aspect-ratio: 1;
  border-radius: 14px;
  box-shadow: 0 0 34px rgba(255,197,61,.28), 0 0 12px rgba(53,224,255,.18);
}
.veil-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* 入场遮罩设置行：音量 / 灵敏度 */
.veil-settings {
  display: flex; gap: 28px; margin-top: 14px; padding: 12px 18px;
  background: rgba(10,14,23,.6); border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.veil-settings label {
  display: flex; align-items: center; gap: 10px;
  font-size: 11px; letter-spacing: .12em; color: var(--tx-3);
  text-transform: uppercase;
}
.veil-settings input[type="range"] {
  width: 110px; accent-color: #35E0FF; cursor: pointer;
}
.veil-settings .mono { color: var(--cyan); font-size: 11.5px; min-width: 30px; }
.enter-veil .keys {
  display: flex; gap: 26px; margin-top: 6px;
}
.enter-veil .keycap { text-align: center; }
.enter-veil .kc {
  display: inline-block; min-width: 38px; padding: 8px 12px;
  background: var(--bg-raise); border: 1px solid var(--line-hi);
  border-bottom-width: 3px; border-radius: var(--r-sm);
  font-family: var(--font-mono); font-size: 12px; margin-bottom: 7px;
}
.enter-veil .kk { font-size: 11px; color: var(--tx-3); }

/* 结算面板 */
.result-veil {
  position: absolute; inset: 0; z-index: 35;
  background: rgba(5,8,16,.93);
  display: none; align-items: center; justify-content: center;
  backdrop-filter: blur(6px);
}
.result-veil.on { display: flex; }
.result-card {
  width: 460px; background: var(--bg-panel);
  border: 1px solid var(--line-hi); border-radius: var(--r-lg);
  padding: 30px; animation: resIn .35s cubic-bezier(.2,.8,.3,1);
}
@keyframes resIn { from { opacity: 0; transform: scale(.94) translateY(14px); } to { opacity: 1; transform: none; } }
.result-card .rgrade {
  font-family: var(--font-display); font-size: 60px; font-weight: 700;
  text-align: center; line-height: 1; margin-bottom: 6px;
}
.result-card .rsub { text-align: center; font-size: 12px; color: var(--tx-3); margin-bottom: 24px; letter-spacing: 2px; }
.result-rows { margin-bottom: 22px; }
.result-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.result-row:last-child { border-bottom: none; }
.result-row .rr-k { color: var(--tx-2); }
.result-row .rr-v { font-family: var(--font-mono); font-weight: 600; }
.result-row.total { border-top: 1px solid var(--line-hi); padding-top: 15px; margin-top: 5px; }
.result-row.total .rr-k { color: var(--tx-1); font-size: 14px; font-weight: 600; }
.result-row.total .rr-v { font-size: 21px; color: var(--amber); }
.result-actions { display: flex; gap: 12px; }

/* 顶部小提示 · v140：锁定鼠标后隐藏（战斗中无意义，且遮挡左上视野） */
.hud-tip {
  position: absolute; left: 24px; top: 20px;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--tx-3); letter-spacing: 1px;
}
body.locked .hud-tip { display: none; }

/* ============================================================
   资产面板
   ============================================================ */
.vault-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; margin-bottom: 18px;
}
.balance-big {
  background:
    radial-gradient(600px 200px at 88% 0%, rgba(255,197,61,.13), transparent 60%),
    var(--bg-panel);
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px 28px;
}
.balance-big .bl { font-size: 11.5px; color: var(--tx-3); letter-spacing: 1px; margin-bottom: 10px; }
.balance-big .bv {
  font-family: var(--font-display); font-size: 46px; font-weight: 700;
  color: var(--amber); line-height: 1; letter-spacing: -1px;
}
.balance-big .bv small { font-size: 20px; color: var(--tx-3); margin-left: 8px; letter-spacing: 0; }
.balance-big .bsub { display: flex; gap: 26px; margin-top: 18px; }
.balance-big .bsub div { }
.balance-big .bsub .sk { font-size: 11px; color: var(--tx-3); margin-bottom: 4px; }
.balance-big .bsub .sv { font-family: var(--font-mono); font-size: 15px; font-weight: 600; }
.balance-big .bsub .sv-eth { display: inline-flex; align-items: center; gap: 6px; }
.balance-big .bsub .sv-eth .eth-ico { width: 11px; height: 18px; flex: none; }

.item-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 14px; }
.inv-item {
  background: var(--bg-raise); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 14px;
  transition: all .16s ease; cursor: pointer; position: relative;
}
.inv-item:hover { border-color: var(--cyan); transform: translateY(-2px); }
.inv-thumb {
  height: 88px; border-radius: var(--r-sm); margin-bottom: 11px;
  display: grid; place-items: center; position: relative; overflow: hidden;
  background: linear-gradient(150deg, #1A2438, #0D1420);
}
.inv-thumb::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 120%, rgba(53,224,255,.16), transparent 65%);
}
.inv-thumb svg { position: relative; z-index: 1; }
.inv-name { font-size: 12.5px; font-weight: 600; margin-bottom: 5px; }
.inv-meta { display: flex; justify-content: space-between; align-items: center; }
.inv-rar { font-size: 10.5px; font-weight: 600; letter-spacing: .5px; }
.inv-lv {
  font-family: var(--font-mono); font-size: 11px; color: var(--cyan);
  background: var(--cyan-glow); padding: 2px 7px; border-radius: 4px;
}
.inv-dur { margin-top: 9px; }
.inv-dur .dk { display: flex; justify-content: space-between; font-size: 10px; color: var(--tx-3); margin-bottom: 4px; }

/* ============================================================
   任务面板
   ============================================================ */
.mission-row {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 0; border-bottom: 1px solid var(--line);
}
.mission-row:last-child { border-bottom: none; }
.mission-ico {
  width: 42px; height: 42px; border-radius: var(--r-md);
  background: var(--bg-raise); display: grid; place-items: center; flex-shrink: 0;
}
.mission-body { flex: 1; min-width: 0; }
.mission-body .mt { font-size: 13.5px; font-weight: 600; margin-bottom: 4px; }
.mission-body .md { font-size: 11.5px; color: var(--tx-3); margin-bottom: 9px; }
.mission-prog { display: flex; align-items: center; gap: 11px; }
.mission-prog .bar { flex: 1; }
.mission-prog .pn {
  font-family: var(--font-mono); font-size: 11.5px; color: var(--tx-2);
  min-width: 52px; text-align: right;
}
.mission-claim { flex-shrink: 0; }

/* 产出上限仪表 */
.cap-gauge { text-align: center; padding: 8px 0 4px; }
.gauge-ring { position: relative; width: 190px; height: 190px; margin: 0 auto 12px; }
.gauge-ring svg { transform: rotate(-90deg); }
.gauge-ring .gtxt {
  position: absolute; inset: 0; display: flex;
  flex-direction: column; align-items: center; justify-content: center;
}
.gauge-ring .gv {
  font-family: var(--font-display); font-size: 33px; font-weight: 700; line-height: 1;
}
.gauge-ring .gk { font-size: 10.5px; color: var(--tx-3); letter-spacing: 1.4px; margin-top: 6px; }

/* 衰减曲线（防刷可视化） */
.decay-legend { display: flex; gap: 16px; font-size: 11px; color: var(--tx-3); margin-top: 12px; }
.decay-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; }

/* ============================================================
   交易面板
   ============================================================ */
.tier-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.tier-card {
  background: var(--bg-raise); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 20px; cursor: pointer;
  transition: all .18s ease; position: relative;
}
.tier-card:hover { border-color: var(--line-hi); transform: translateY(-2px); }
.tier-card.sel { border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber), 0 10px 30px rgba(255,197,61,.12); }
/* 待开放档位：置灰 + SOON 徽章 */
.tier-card.locked { opacity: .55; cursor: not-allowed; }
.tier-card.locked:hover { border-color: var(--line); transform: none; }
.tier-card.locked .tv { color: var(--tx-3); }
.tier-card .tsoon {
  position: absolute; top: 12px; left: 12px;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 1.5px;
  color: var(--cyan); border: 1px solid rgba(53,224,255,.4);
  border-radius: 4px; padding: 2px 6px;
}
.tier-card .tn { font-size: 11px; letter-spacing: 1.5px; color: var(--tx-3); margin-bottom: 9px; }
.tier-card .tv {
  font-family: var(--font-display); font-size: 26px; font-weight: 700; color: var(--amber);
  line-height: 1; margin-bottom: 4px;
}
.tier-card .tv small { font-size: 13px; color: var(--tx-3); }
.tier-card .tm { font-size: 11.5px; color: var(--tx-2); margin-top: 11px; line-height: 1.7; }
.tier-card .tcheck {
  position: absolute; top: 12px; right: 12px;
  width: 17px; height: 17px; border-radius: 50%;
  border: 1px solid var(--line-hi); display: grid; place-items: center;
}
.tier-card.sel .tcheck { background: var(--amber); border-color: var(--amber); }

.payout-table { width: 100%; }
.payout-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 90px 100px 82px;
  align-items: center; gap: 10px;
  padding: 11px 0; border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.payout-row.head { font-size: 10.5px; color: var(--tx-3); letter-spacing: 1.2px; border-bottom-color: var(--line-hi); }
.payout-row .pr-range { display: flex; align-items: center; gap: 9px; }
.payout-row .pr-seg { flex: 1; height: 5px; background: var(--bg-hover); border-radius: 3px; overflow: hidden; }
.payout-row .pr-seg > i { display: block; height: 100%; background: var(--cyan-dim); border-radius: 3px; }
.payout-row.hot .pr-seg > i { background: var(--amber); }

.ev-banner {
  display: flex; align-items: center; gap: 14px;
  background: rgba(53,224,255,.06); border: 1px solid rgba(53,224,255,.22);
  border-radius: var(--r-md); padding: 14px 18px; margin-top: 18px;
}
.ev-banner .ev-ico { width: 34px; height: 34px; border-radius: 50%; background: var(--cyan-glow); display: grid; place-items: center; flex-shrink: 0; }
.ev-banner .ev-t { font-size: 13px; font-weight: 600; margin-bottom: 3px; }
.ev-banner .ev-d { font-size: 11.5px; color: var(--tx-3); line-height: 1.6; }

/* 订单簿 */
.orderbook { font-family: var(--font-mono); font-size: 12px; }
.ob-row {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 7px 10px; border-radius: 4px; position: relative;
}
.ob-row .fill {
  position: absolute; right: 0; top: 0; bottom: 0;
  background: rgba(239,68,68,.09); border-radius: 4px;
}
.ob-row.bid .fill { background: rgba(34,197,94,.09); }
.ob-row span { position: relative; }
.ob-row .num-r { text-align: right; }

/* ============================================================
   数据看板（v146e 太空主题：chart-box 天体观测窗风）
   ============================================================ */
.chart-box { position: relative; }
/* canvas 本身已是深空底（app.js drawSpaceBackdrop 绘制），CSS 负责
   给画布做"观测窗"外框：圆角 + 内侧青光扫描边 + 底部余晖 */
.chart-box canvas {
  width: 100%; display: block;
  border-radius: 10px;
  box-shadow:
    inset 0 0 0 1px rgba(53,224,255,.16),
    inset 0 0 26px rgba(53,224,255,.05),
    0 0 14px rgba(53,224,255,.05);
}
/* 顶部悬浮微光：模拟舱窗玻璃反光条 */
.chart-box::after {
  content: ''; position: absolute; inset: 0; border-radius: 10px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 26%);
}
.chart-legend { display: flex; gap: 20px; font-size: 11.5px; color: var(--tx-3); margin-top: 14px; flex-wrap: wrap; }
.chart-legend span { display: flex; align-items: center; gap: 6px; }
/* 图例色块：能量光点（发光圆芯，色即 currentColor 由内联 background 提供） */
.chart-legend i {
  width: 8px; height: 8px; border-radius: 50%;
  box-shadow: 0 0 8px rgba(53,224,255,.35);
}

.health-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.health-cell {
  background: var(--bg-raise); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 15px 17px;
}
.health-cell .hk { font-size: 11px; color: var(--tx-3); margin-bottom: 8px; }
.health-cell .hv { font-family: var(--font-mono); font-size: 19px; font-weight: 600; margin-bottom: 3px; }
.health-cell .hs { font-size: 10.5px; color: var(--tx-3); }

.alert-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 13px 0; border-bottom: 1px solid var(--line);
}
.alert-row:last-child { border-bottom: none; }
.alert-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; }
.alert-dot.warn { background: var(--amber); }
.alert-dot.crit { background: var(--danger); }
.alert-dot.info { background: var(--cyan); }
.alert-body { flex: 1; min-width: 0; }
.alert-body .at { font-size: 13px; font-weight: 600; margin-bottom: 3px; }
.alert-body .ad { font-size: 11.5px; color: var(--tx-3); line-height: 1.6; }

/* 简模式隐藏代币相关元素 */
body.simple .token-el { display: none !important; }

/* 提示气泡 */
.toast-wrap {
  position: fixed; top: 74px; left: 50%; transform: translateX(-50%);
  z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: center;
  pointer-events: none;
}
.toast {
  background: var(--bg-raise); border: 1px solid var(--line-hi);
  border-left: 3px solid var(--cyan);
  border-radius: var(--r-md); padding: 11px 20px;
  font-size: 13px; box-shadow: 0 12px 34px rgba(0,0,0,.5);
  animation: toastIn .3s ease;
}
.toast.amber { border-left-color: var(--amber); }
.toast.red   { border-left-color: var(--danger); }
@keyframes toastIn { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }

/* ============================================================
   触控操作层（移动端射击必备）
   仅在 body.is-touch 时启用，桌面端完全不出现
   ============================================================ */
.touch-ui { display: none; }
body.is-touch .touch-ui { display: block; }
body.is-touch .keys { display: none; }
/* 特异性必须高过 `.enter-veil .keys { display:flex }`(0-2-0)，
   否则桌面端触控键位提示会漏出来 */
.enter-veil .keys.keys-touch,
.keys.keys-touch { display: none; }
body.is-touch .enter-veil .keys.keys-touch,
body.is-touch .keys.keys-touch { display: flex; }

/* 右半屏：拖动转视角（不吃点击，避免误触） */
.t-look {
  position: absolute; right: 0; top: 0; width: 52%; bottom: 0;
  z-index: 12; touch-action: none;
}
/* 左半屏下方：虚拟摇杆 */
.t-stick {
  position: absolute; left: 20px; bottom: 26px;
  width: 116px; height: 116px; border-radius: 50%;
  background: rgba(10,14,23,.40);
  border: 1px solid var(--line-hi);
  z-index: 14; touch-action: none;
}
.t-stick-knob {
  position: absolute; left: 50%; top: 50%;
  width: 50px; height: 50px; margin: -25px 0 0 -25px;
  border-radius: 50%;
  background: rgba(53,224,255,.28);
  border: 1px solid var(--cyan);
  box-shadow: 0 0 16px rgba(53,224,255,.26);
  will-change: transform;
}
/* 动作键 */
.t-actions {
  position: absolute; right: 18px; bottom: 24px; z-index: 14;
  display: flex; align-items: flex-end; gap: 12px;
}
.t-side { display: flex; flex-direction: column; gap: 12px; }
.t-btn {
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(10,14,23,.62);
  border: 1px solid var(--line-hi);
  color: var(--tx-1); font-size: 12.5px; font-weight: 600;
  display: grid; place-items: center;
  touch-action: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  transition: background .1s, border-color .1s;
}
.t-btn:active { background: rgba(53,224,255,.24); border-color: var(--cyan); }
.t-fire {
  width: 86px; height: 86px; font-size: 14px;
  background: rgba(239,68,68,.20);
  border-color: rgba(239,68,68,.52);
  color: #FCA5A5;
}
.t-fire:active { background: rgba(239,68,68,.42); border-color: var(--danger); }

/* 触控模式下把 HUD 抬到控制区之上，避免互相遮挡 */
body.is-touch .hud-bl { left: 14px; bottom: 152px; width: min(220px, 42vw); }
body.is-touch .hud-br { right: 14px; bottom: 152px; }
body.is-touch .ammo-num { font-size: 26px; }
body.is-touch .ammo-box { padding: 9px 14px; }
body.is-touch .vital { margin-bottom: 8px; }
body.is-touch .earn-float { display: none; }
body.is-touch .hud-tip { display: none; }
/* 顶部波次条底部约在 70px，小地图必须让到 80px 以下才不打架 */
body.is-touch .minimap { width: 104px; height: 104px; top: 82px; right: 12px; }
body.is-touch .killfeed { top: 58px; right: 12px; }
body.is-touch .kill-item { font-size: 11px; padding: 5px 10px; }

/* ============================================================
   响应式适配体系
   断点：1180 / 980 / 900 / 760 / 560
   另含：横屏矮屏、触控设备、降低动效偏好
   ============================================================ */

/* ---------- 1180px：小桌面 / 平板横屏，网格降列 ---------- */
@media (max-width: 1180px) {
  .g3, .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-side { grid-template-columns: minmax(0, 1fr); }
  .health-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vault-hero { grid-template-columns: minmax(0, 1fr); }
  .hero-txt h1 { font-size: 30px; }
  .hero { padding: 28px 28px; }
}

/* ---------- 980px：侧栏收窄为图标导轨 ---------- */
@media (max-width: 980px) {
  :root { --sidebar-w: 72px; --topbar-h: 56px; --mark-h: 40px; }

  .brand { padding: 0; justify-content: center; }
  .brand-txt { display: none; }
  .nav { padding: 10px 8px; }
  .nav-group-label { display: none; }
  .nav-item { justify-content: center; padding: 12px 0; gap: 0; }
  .nav-item span:not(.badge) { display: none; }
  .nav-item .badge {
    position: absolute; top: 5px; right: 8px; margin: 0;
    padding: 1px 4px; font-size: 9px; line-height: 13px;
  }
  .sidebar-foot { display: none; }

  .view { padding: 18px; }
  .hero { padding: 24px 22px; }
  .card { padding: 18px; }
  .wallet-btn .mono { display: none; }
  .wallet-btn { padding: 8px 11px; }
}

/* ---------- 900px 或 横屏手机：侧栏改为底部 Tab 栏 ---------- */
@media (max-width: 900px), (max-height: 520px) and (orientation: landscape) {
  :root { --topbar-h: 54px; --nav-h: 58px; }

  #app { flex-direction: column; }

  .sidebar {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    width: 100%; height: auto; min-height: var(--nav-h);
    border-right: none; border-top: 1px solid var(--line);
    flex-direction: row; z-index: 120;
    background: rgba(10,14,23,.97);
    backdrop-filter: blur(12px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .brand, .sidebar-foot, .nav-group-label { display: none; }

  .nav { display: flex; flex-direction: row; padding: 0; flex: 1; overflow: visible; }
  .nav-item {
    flex: 1; flex-direction: column; gap: 3px;
    justify-content: center; align-items: center;
    padding: 0 2px; border-radius: 0; min-width: 0;
    font-size: 10px; line-height: 1.2;
  }
  .nav-item .ico { width: 18px; height: 18px; }
  .nav-item span:not(.badge) {
    display: block; font-size: 9px; letter-spacing: -0.1px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 100%;
  }
  .nav-item .badge {
    position: absolute; top: 4px; left: 50%; margin-left: 5px;
    font-size: 9px; padding: 0 4px; line-height: 14px;
  }
  .nav-item.active { background: transparent; color: var(--cyan); }
  .nav-item.active::before {
    left: 50%; top: auto; bottom: 0; transform: translateX(-50%);
    width: 22px; height: 2px; border-radius: 2px 2px 0 0;
  }

  /* 内容区为底部导航让位 */
  .view { padding: 14px 14px calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + 18px); }
  #view-arena { padding: 0; }
  .view-scroll { -webkit-overflow-scrolling: touch; }

  /* 顶栏紧凑化 */
  .topbar { padding: 0 12px; gap: 10px; }
  .page-sub { display: none; }
  .page-title { font-size: 14px; }
  .balance-chip { padding: 5px 10px; gap: 6px; }
  .balance-chip .num { font-size: 13px; }
  .balance-chip .coin { width: 15px; height: 15px; font-size: 9px; }
  .wallet-btn { display: none; }
  .mode-switch button { padding: 4px 10px; font-size: 11px; }

  /* 网格统一单列，档位卡 4 档收两列（2×2） */
  .g2, .g3, .g4, .health-grid, .g-side, .vault-hero { grid-template-columns: minmax(0, 1fr); }
  .grid { gap: 14px; }
  .tier-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

  .card { padding: 16px; border-radius: var(--r-md); }
  .hero { padding: 22px 18px; border-radius: var(--r-md); }
  .hero-in { flex-direction: column; align-items: stretch; gap: 18px; }
  .hero-txt h1 { font-size: 25px; }
  .hero-txt p { font-size: 13px; max-width: none; }
  .hero-cta { flex-direction: column; gap: 10px; }
  .hero-cta .btn { width: 100%; }
  .btn-lg { padding: 13px 22px; font-size: 14px; }

  .stat { padding: 14px 15px; }
  .stat .v { font-size: 21px; }

  .balance-big { padding: 20px; }
  .balance-big .bv { font-size: 36px; }
  .balance-big .bsub { flex-wrap: wrap; gap: 14px 18px; }
  .balance-big .bsub > div { min-width: 42%; }

  .item-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 11px; }
  .mode-card p { min-height: 0; }
  .mode-meta { gap: 10px; }

  /* 表格改为横向滚动，避免撑破卡片 */
  .tbl { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tbl > thead, .tbl > tbody { display: table; width: 100%; min-width: 520px; }

  .payout-row { grid-template-columns: minmax(0, 1fr) 64px 76px 60px; gap: 6px; font-size: 12px; padding: 10px 0; }

  .result-card { width: 100%; max-width: none; margin: 0 12px; padding: 22px 20px; }
  .result-card .rgrade { font-size: 48px; }

  .toast-wrap { top: 62px; left: 14px; right: 14px; width: auto; transform: none; }
  .toast { width: 100%; text-align: center; font-size: 12.5px; }

  /* 竞技场为底部导航让出高度 */
  .arena-wrap {
    height: calc(100vh - var(--topbar-h) - var(--nav-h) - env(safe-area-inset-bottom, 0px));
    height: calc(100dvh - var(--topbar-h) - var(--nav-h) - env(safe-area-inset-bottom, 0px));
  }
}

/* ---------- 760px：手机横屏 / 小平板，进一步压缩 ---------- */
@media (max-width: 760px) {
  .topbar { gap: 8px; }
  .page-title { font-size: 13px; }
  .balance-chip .unit { display: none; }
  .mode-switch button { padding: 4px 8px; font-size: 10.5px; }
  .view { padding: 12px 12px calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + 16px); }
  .card { padding: 14px; }
  .chart-legend { gap: 12px; font-size: 11px; }
  .ev-banner { padding: 12px 14px; gap: 10px; }
  .ev-banner .ev-d { font-size: 11px; }
  .mission-row { gap: 12px; }
  .mission-ico { width: 36px; height: 36px; }
  .decay-legend { flex-wrap: wrap; gap: 10px; }
}

/* ---------- 560px：手机竖屏 ---------- */
@media (max-width: 560px) {
  :root { --nav-h: 56px; }

  .grid { gap: 12px; }
  .card { padding: 14px; }
  .hero { padding: 18px 15px; }
  .hero-txt h1 { font-size: 22px; }
  .hero-txt p { font-size: 12.5px; }
  .hero-txt .eyebrow { font-size: 10px; letter-spacing: 2px; }

  /* 轨道图等比缩小（svg 无 viewBox，需同步改 inset） */
  .hero-vis { width: 190px; margin: 0 auto; }
  .orbit { width: 190px; height: 190px; }
  .orbit-ring.r2 { inset: 24px; }
  .orbit-ring.r3 { inset: 50px; }
  .orbit-core { inset: 68px; font-size: 15px; }
.orbit-core img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }

  .stat .v { font-size: 19px; }
  .stat .k { font-size: 11px; }
  /* topbar 压缩：Buy 按钮收窄去图标，360px 宽手机不换行不溢出 */
  .topbar .js-buy { padding: 6px 9px; font-size: 11px; }
  .topbar .js-buy svg { display: none; }
  .balance-big .bv { font-size: 30px; }
  .balance-big .bv small { font-size: 15px; }

  .tier-grid { grid-template-columns: minmax(0, 1fr); }
  .tier-card { padding: 15px; }
  .tier-card .tv { font-size: 23px; }

  .payout-row { grid-template-columns: minmax(0, 1fr) 56px 66px; gap: 5px; font-size: 11.5px; }
  .payout-row .pr-ev { display: none; }

  .item-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .btn { padding: 10px 16px; font-size: 13px; }
  .toast { font-size: 12px; padding: 9px 14px; }
  .mode-meta { gap: 8px; }
  .mode-meta .mv { font-size: 13px; }

  .enter-veil h2 { font-size: 20px; }
  .enter-veil .keys { gap: 14px; flex-wrap: wrap; justify-content: center; }
  .result-card .rgrade { font-size: 40px; }
  .result-card .rsub { font-size: 11px; }
  .result-actions { flex-direction: column; }

  /* 触控控件随屏缩小 */
  .t-stick { width: 100px; height: 100px; left: 14px; bottom: 108px; }
  .t-stick-knob { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
  .t-actions { right: 14px; bottom: 108px; gap: 10px; }
  .t-side { gap: 10px; }
  .t-btn { width: 56px; height: 56px; font-size: 12px; }
  .t-fire { width: 74px; height: 74px; font-size: 13px; }
  body.is-touch .minimap { width: 92px; height: 92px; top: 96px; right: 10px; }
  body.is-touch .hud-bl { bottom: 226px; width: min(190px, 46vw); }
  body.is-touch .hud-br { bottom: 226px; }

  /* 调试浮标会压住底部导航 */
  #mod-test { display: none !important; }
}

/* ---------- 横屏矮屏：手机横放打游戏的主要场景 ---------- */
@media (max-height: 520px) and (orientation: landscape) {
  :root { --topbar-h: 48px; }

  .view { padding: 12px 14px calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + 12px); }
  .hero { padding: 16px 20px; }
  .hero-txt h1 { font-size: 22px; }
  .hero-in { flex-direction: row; align-items: center; gap: 24px; }
  .hero-vis { display: none; }
  .hero-cta { flex-direction: row; }

  .wave-chip { gap: 14px; padding: 6px 16px; }
  .wave-chip .wv { font-size: 14px; }
  .wave-chip .wsep { height: 20px; }
  .hud-top { padding-top: 10px; }
  .killfeed { top: 52px; right: 14px; }
  .minimap { width: 108px; height: 108px; top: 58px; right: 14px; }
  .earn-float { display: none; }
  .hud-bl { bottom: 14px; left: 14px; width: 200px; }
  .hud-br { bottom: 14px; right: 14px; }
  .ammo-num { font-size: 26px; }
  .vital { margin-bottom: 7px; }

  .result-card { padding: 18px; margin: 0 12px; }
  .result-card .rgrade { font-size: 34px; }
  .result-card .rsub { margin-bottom: 14px; }
  .result-rows { margin-bottom: 14px; }
  .result-row { padding: 7px 0; }
  .result-actions { flex-direction: row; }

  .toast-wrap { top: 54px; }

  /* 触控控件在矮屏下贴底居中排布 */
  .t-stick { width: 96px; height: 96px; left: 16px; bottom: 16px; }
  .t-stick-knob { width: 42px; height: 42px; margin: -21px 0 0 -21px; }
  .t-actions { right: 16px; bottom: 16px; gap: 10px; }
  .t-btn { width: 54px; height: 54px; font-size: 11.5px; }
  .t-fire { width: 72px; height: 72px; font-size: 13px; }
  body.is-touch .hud-bl { bottom: 122px; width: min(200px, 30vw); }
  body.is-touch .hud-br { bottom: 122px; }
  body.is-touch .minimap { top: 52px; width: 92px; height: 92px; }
  body.is-touch .ammo-num { font-size: 22px; }
}

/* ---------- 触控设备：加大点击热区，去掉 hover 依赖 ---------- */
@media (hover: none) and (pointer: coarse) {
  .nav-item { padding: 11px 12px; }
  .btn { min-height: 40px; }
  .btn-sm { min-height: 34px; }
  .mode-card:hover, .inv-item:hover, .tier-card:hover { transform: none; }
  .tier-card:active { border-color: var(--amber); }
  .inv-item:active { border-color: var(--cyan); }
  .mode-card:active { border-color: var(--cyan); }
}

/* ---------- 尊重系统「减少动效」偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .view { animation: none; }
}

/* ============================================================
   模板套用交接点（CYBERCORE）
   每一条都是"把某个组件的视觉交给模板"的开关。
   交接方式一律是：我们的规则主动让位，模板的声明自然生效。
   ============================================================ */

/* ---- 卡片 / HUD 面板 ----
   采用模板的斜切角 + 对角光标。切角与圆角互相冲突，故把圆角归零。
   我们只接管"切角尺寸 / 角标尺寸 / 强调色"三件事，其余交给模板。 */
.card.cyber-card,
.minimap.cyber-card,
.ammo-box.cyber-card,
.inv-item.cyber-card,
.tier-card.cyber-card,
.result-card.cyber-card { border-radius: 0; }

/* 模板切角固定 20px，小面板上过大，压到 10px */
.minimap.cyber-card,
.ammo-box.cyber-card,
.inv-item.cyber-card,
.tier-card.cyber-card {
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px,
                     100% 100%, 10px 100%, 0 calc(100% - 10px));
}

/* 模板角标 30px 是为大卡片设计的，HUD 上缩到 12px */
.minimap.cyber-card::before,   .minimap.cyber-card::after,
.ammo-box.cyber-card::before,  .ammo-box.cyber-card::after,
.inv-item.cyber-card::before,  .inv-item.cyber-card::after,
.tier-card.cyber-card::before, .tier-card.cyber-card::after {
  width: 12px; height: 12px;
}

/* 强调色：不同职能的面板用不同的角标色 */
.ammo-box.cyber-card  { --card-accent: var(--amber); }
.tier-card.cyber-card { --card-accent: var(--amber); }
.minimap.cyber-card   { --card-accent: var(--cyan); }

/* clip-path 会把 box-shadow 一起裁掉，
   所以凡是"带切角 + 用外发光表达选中态"的卡片，选中态必须改用底色 + 描边 */
.tier-card.sel.cyber-card {
  box-shadow: none;
  border-color: var(--amber);
  background: rgba(255, 197, 61, .09);
}
.tier-card.sel.cyber-card::before,
.tier-card.sel.cyber-card::after { border-width: 2px; }

/* 两个例外必须手动纠偏：
   1) .minimap 自带 overflow:hidden 会把模板的四角光标裁掉 ——
      切角本来就由 clip-path 负责裁剪，overflow 可以放心让出去；
   2) .cyber-card 自带 padding，minimap 是固定尺寸画布容器，多一圈内边距会缩水。 */
.minimap.cyber-card { overflow: visible; padding: 0; }

/* 表格头：让出下边框，采用模板的 2px 主色下划线 */
.tbl.cyber-table th { border-bottom: 2px solid var(--cyan); }

/* ---- 进度条 ----
   只通过模板的 --progress-color 传色，
   渐变 / 辉光 / 斜纹流光全部交给模板，我们用 :not() 让出 background */
.bar.cyber-progress          { --progress-color: var(--cyan); }
.bar.cyber-progress.amber    { --progress-color: var(--amber); }
.bar.cyber-progress.danger   { --progress-color: var(--danger); }

.vital-bar.cyber-progress    { --progress-color: var(--cyan); }
.vital-bar.hp.cyber-progress { --progress-color: #EF4444; }
.vital-bar.ar.cyber-progress { --progress-color: #35E0FF; }
.vital-bar.st.cyber-progress { --progress-color: #FFC53D; }

.bar > i:not(.cyber-progress__bar) { background: linear-gradient(90deg, var(--cyan-dim), var(--cyan)); }
.hp  > i:not(.cyber-progress__bar) { background: linear-gradient(90deg, #B91C1C, #EF4444); }
.ar  > i:not(.cyber-progress__bar) { background: linear-gradient(90deg, #0C9BC8, #35E0FF); }
.st  > i:not(.cyber-progress__bar) { background: linear-gradient(90deg, #A16207, #FFC53D); }

/* 模板的斜纹默认是 0.5s 无限循环动画。
   移动端同屏进度条多，逐帧重绘会掉帧，故触控端只保留静态渐变与辉光 */
body.is-touch .cyber-progress__bar::before { animation: none; }

/* ---- 按钮 ----
   配色语义保留我们自己的（青=主操作 / 琥珀=代币 / 红=危险 / 灰=次要），
   形状与字重采用模板的非对称切角，交互采用模板的横向扫光填充。
   --btn-color 同时决定扫光颜色与 hover 文字色，必须逐变体对齐，
   否则会出现"琥珀按钮被青色扫光"这类串色。 */
.btn.cyber-btn {
  border-radius: var(--radius-cyber);
  font-weight: 700;
  letter-spacing: .06em;
}
.btn-pri.cyber-btn    { --btn-color: var(--cyan); }
.btn-amber.cyber-btn  { --btn-color: var(--amber); }
.btn-danger.cyber-btn { --btn-color: var(--danger); }
.btn-ghost.cyber-btn  { --btn-color: var(--cyan); }

/* 模板 hover 时把文字统一刷成近黑，深色底的 ghost / danger 会看不清，逐个纠正 */
.btn-ghost.cyber-btn:hover  { color: #04202A; }
.btn-danger.cyber-btn:hover { color: #FFFFFF; }

/* 禁用态不允许触发扫光 */
.btn.cyber-btn:disabled::before { transform: translateX(-101%); }

/* ---- 标签 ----
   语义色由我们的 .tag-* 经 currentColor 传给模板，
   描边 + 胶囊形状 + 字重字距采用模板，底色用 currentColor 混色统一。
   这样新增任何 .tag-* 变体都自动继承模板外观，不需要再改这里。 */
.tag.cyber-badge {
  padding: 3px 10px;
  border: 1px solid currentColor;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, .05);
  background: color-mix(in srgb, currentColor 15%, transparent);
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .05em;
  line-height: 1.5;
}
.tag.cyber-badge.tag-gray { background: rgba(255, 255, 255, .05); }

/* 竞技场 CRT 扫描线。
   必须 pointer-events:none，且 z-index 低于进入遮罩(30)与加载遮罩(40) */
.arena-wrap::after {
  content: '';
  position: absolute; inset: 0;
  z-index: 26;
  pointer-events: none;
  background: repeating-linear-gradient(0deg,
    rgba(0, 0, 0, .18) 0 1px,
    transparent 1px 3px);
  opacity: .55;
}
@media (prefers-reduced-motion: reduce) {
  .arena-wrap::after { opacity: .3; }
}

/* ============================================================
   2026-08-31 · 网站补全：Whitepaper / FAQ / Roadmap / Footer
   ============================================================ */

/* ---- How It Works 三步卡 ---- */
.how-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.how-step {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 20px;
  background: rgba(255, 255, 255, .02);
  display: grid;
  grid-template-columns: 72px 150px 1fr;
  align-items: baseline;
  gap: 18px;
}
.how-step .hs-n {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 900;
  color: var(--cyan);
  opacity: .55;
  line-height: 1;
}
.how-step h4 { margin: 0; font-size: 14.5px; }
.how-step p { margin: 0; font-size: 12.5px; color: var(--tx-2); line-height: 1.75; }

/* 三步卡内部三列固定宽度（72px+150px+间距）的最小内容宽度在 560px 以下
   超出容器（min-width:auto 会把 1fr 轨道撑到 366px）——堆叠为单列 */
@media (max-width: 560px) {
  .how-step { grid-template-columns: 1fr; gap: 8px; }
}

/* ---- Hero 数据条：真实校准数字 ---- */
.hero-stats {
  display: flex; margin-top: 22px;
  border-top: 1px solid var(--line);
}
.hero-stats > div {
  flex: 1; padding: 14px 6px 0 16px;
  border-left: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 2px;
}
.hero-stats > div:first-child { border-left: none; padding-left: 0; }
.hero-stats b {
  font-family: var(--font-display); font-size: 21px; font-weight: 700;
  color: var(--cyan); line-height: 1.1;
}
.hero-stats span { font-size: 10.5px; letter-spacing: .08em; color: var(--tx-3); text-transform: uppercase; }

/* ---- Home 代币条（Buy $RB） ---- */
.token-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  flex-wrap: wrap;
}
.token-strip .ts-l { display: flex; gap: 16px; align-items: flex-start; min-width: 260px; flex: 1; }
.token-strip .ts-mark {
  flex: none;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--cyan), #6366F1);
  color: #06121C;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 17px;
}
.token-strip .ts-r { display: flex; flex-direction: column; gap: 9px; align-items: stretch; min-width: 180px; }
.token-strip .ts-r .btn { width: 100%; }
.token-strip .ts-ca { font-size: 11px; color: var(--tx-3); text-align: center; letter-spacing: .04em; }

/* ---- Whitepaper ---- */
.wp-hero h2 { font-size: 24px; }

.p2e-flow {
  display: flex;
  align-items: stretch;
  gap: 8px;
  flex-wrap: wrap;
}
.p2e-node {
  flex: 1;
  min-width: 96px;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 8px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.6;
  background: rgba(255, 255, 255, .03);
}
.p2e-node small { font-family: var(--font-body); font-weight: 400; font-size: 10.5px; color: var(--tx-3); }
.p2e-node.src { border-color: rgba(53, 224, 255, .45); }
.p2e-node.sink { border-color: rgba(239, 68, 68, .45); }
.p2e-arrow { align-self: center; color: var(--tx-3); font-size: 15px; }

/* ---- Roadmap 时间线 ---- */
.roadmap { position: relative; padding-left: 22px; }
.roadmap::before {
  content: '';
  position: absolute;
  left: 5px; top: 8px; bottom: 8px;
  width: 2px;
  background: var(--line);
}
.rm-item { position: relative; padding: 0 0 18px 12px; }
.rm-item:last-child { padding-bottom: 2px; }
.rm-dot {
  position: absolute;
  left: -22px; top: 4px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #1F2B42;
  border: 2px solid var(--tx-3);
}
.rm-item.done .rm-dot { background: var(--ok); border-color: var(--ok); }
.rm-item.now .rm-dot { background: var(--amber); border-color: var(--amber); box-shadow: 0 0 0 4px rgba(255, 197, 61, .18); }
.rm-item b { display: block; font-size: 13px; margin-bottom: 3px; }
.rm-item.now b { color: var(--amber); }
.rm-item span { font-size: 11.5px; color: var(--tx-3); line-height: 1.7; display: block; }

/* ---- FAQ 手风琴 ---- */
.faq { display: grid; gap: 10px; }
.faq-item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .02);
  overflow: hidden;
}
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: none;
  border: 0;
  color: var(--tx-1);
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.faq-q:hover { background: rgba(53, 224, 255, .05); }
.faq-ico {
  flex: none;
  font-family: var(--font-display);
  color: var(--cyan);
  font-size: 16px;
  transition: transform .25s;
}
.faq-item.open .faq-ico { transform: rotate(45deg); }
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}
.faq-item.open .faq-a { max-height: 480px; }
.faq-a p { margin: 0; padding: 0 16px 15px; font-size: 12.5px; color: var(--tx-2); line-height: 1.85; }

/* ---- Footer ---- */
.site-foot {
  margin-top: 26px;
  border-top: 1px solid var(--line);
  padding: 26px 2px 18px;
}
.sf-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 22px;
  margin-bottom: 22px;
}
.sf-brand { display: flex; gap: 12px; align-items: flex-start; }
/* v130: footer mark 跟随 --mark-h（语义同 sidebar），HTML 不再写 inline 尺寸 */
.sf-brand .brand-mark { flex-shrink: 0; }
/* v128: footer wordmark carried by the new logo image — hide the duplicate text node. */
.sf-brand b { display: none; }
.sf-brand p { margin: 5px 0 0; font-size: 11.5px; color: var(--tx-3); line-height: 1.6; }
.sf-h {
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--tx-3);
  margin-bottom: 10px;
}
.sf-col button, .sf-col span, .sf-col a {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 4px 0;
  color: var(--tx-2);
  font-family: var(--font-body);
  font-size: 12.5px;
  cursor: pointer;
  text-decoration: none;
}
.sf-col button:hover, .sf-col a:hover { color: var(--cyan); }
.sf-col span.link-disabled { color: var(--tx-3); cursor: not-allowed; }
.sf-ca { font-size: 11px; color: var(--tx-3); letter-spacing: .04em; }
.sf-foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  padding-top: 14px;
  font-size: 11px;
  color: var(--tx-3);
  line-height: 1.7;
}

/* ---- 移动端适配 ---- */
@media (max-width: 900px) {
  /* 底部 Tab 保持 6 个核心入口；白皮书经首页 CTA / Footer 进入 */
  .nav-item[data-view="whitepaper"] { display: none; }
  .how-grid { grid-template-columns: 1fr; }
  .sf-grid { grid-template-columns: 1fr 1fr; }
  .p2e-arrow { display: none; }
  .p2e-node { min-width: 44%; }
}
@media (max-width: 560px) {
  .sf-grid { grid-template-columns: 1fr; }
  .token-strip .ts-r { width: 100%; }
  .hero-stats { flex-wrap: wrap; gap: 12px 18px; }
  .hero-stats > div { flex: 1 1 40%; border-left: none; padding-left: 0; }
}

/* ============================================================
   2026-08-31 · 第二轮：UI 细致化 + BUG 修复
   ============================================================ */

/* BUG 修复：竞技场内 toast 避让顶部波次条（HUD 占 top 18~68px，
   toast fixed top:74px 会与波次条视觉重叠，下移到波次条之下） */
body.in-arena .toast-wrap { top: 150px; }

/* BUG 修复 (#102-BUG-4)：竞技场内隐藏 site-foot（footer 是 home 页面的，
   竞技场需要沉浸式全屏 3D 体验） */
body.in-arena .site-foot { display: none; }

/* kill-item 精英击杀紫色标识 */
.kill-item.elite span:first-child { color: #A78BFA; }

/* 进入遮罩敌人类型图例 */
.enemy-legend {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 11.5px;
  color: var(--tx-2);
  margin-top: 4px;
}
.enemy-legend span { display: inline-flex; align-items: center; gap: 6px; }
.enemy-legend i {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
}

/* ============================================================
   2026-08-31 · 第三轮：品牌收尾 + 去 AI 化 + 支付产出比例表
   ============================================================ */

/* 详细支付产出比例表（紧凑版 · 单档）
   五列：Grade / Score / × / Payout / Net */
.tbl.cyber-table.ratio-tbl { font-size: 11px; }
.tbl.cyber-table.ratio-tbl thead th {
  font-size: 10.5px; letter-spacing: 1px; padding: 6px 8px;
  color: var(--tx-3); font-weight: 500;
}
.tbl.cyber-table.ratio-tbl tbody td {
  padding: 6px 8px; border-color: var(--line);
}
.tbl.cyber-table.ratio-tbl tbody tr:hover { background: rgba(53,224,255,0.04); }

/* 全档对比表（宽 · 横向可滚）
   10 列：Score / % / × + 4 档 × (risk, net) */
.tbl.cyber-table.ratio-all { font-size: 11.5px; min-width: 720px; }
.tbl.cyber-table.ratio-all thead th {
  font-size: 10.5px; letter-spacing: 1px; padding: 8px 6px;
  color: var(--tx-3); font-weight: 500; white-space: nowrap;
}
.tbl.cyber-table.ratio-all tbody td {
  padding: 7px 6px; border-color: var(--line); white-space: nowrap;
}
.tbl.cyber-table.ratio-all tbody tr:hover { background: rgba(53,224,255,0.04); }



/* 去掉"AI 风"梯度英雄图，用 LOGO 直立呈现（#98 改为动态伏特金库核心） */
.hero-vis-clean {
  display: flex; align-items: center; justify-content: center;
  position: relative;
  width: 320px; height: 320px; flex-shrink: 0;
  min-height: 280px;
}
.hero-vis-clean::before {
  content: ""; position: absolute; inset: 12% 18%;
  background: radial-gradient(circle, rgba(255,197,61,0.10) 0%, transparent 70%);
  pointer-events: none;
}
/* v22：移除 .hero-vis-clean img 幽灵规则（v128 时代裸 LOGO img 残留，v98 起被 .vault-core 包裹后
   这条规则 descendant 选择器仍命中 .vault-core > img，特异性 (0,1,1) 盖死 .vc-logo (0,1,0) →
   桌面尺寸实为 220、单色金。删除后 .vc-logo 独家控制样式。） */
@media (max-width: 980px) {
  .hero-vis-clean { min-height: 220px; }
}

/* 进入遮罩内 staked 模式专属信息条（替代之前的"简短描述"行） */
.veil-staked-info {
  display: flex; gap: 16px; flex-wrap: wrap; justify-content: center;
  background: rgba(255,197,61,0.06);
  border: 1px solid rgba(255,197,61,0.25);
  border-radius: 4px;
  padding: 10px 18px;
  font-size: 12px;
  color: var(--tx-2);
  line-height: 1.7;
  margin: 0;
}
.veil-staked-info b { color: var(--amber); font-family: var(--font-mono); font-weight: 600; }
.veil-staked-info .vsi-sep { color: var(--tx-3); }

/* #104 · 动态门槛条（GATE MODEL · D1 持有质押 / D2 三段式 ε=3 / D5 四档） */
.veil-gate {
  width: 100%; max-width: 560px;
  background: rgba(56,189,248,0.05);
  border: 1px solid rgba(56,189,248,0.22);
  border-radius: 4px;
  padding: 10px 16px;
  font-size: 12px;
  color: var(--tx-2);
  line-height: 1.7;
  box-sizing: border-box;
}
.veil-gate .vg-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; justify-content: center; }
.veil-gate .vg-name b { color: var(--cyan); font-family: var(--font-mono); font-weight: 600; }
.veil-gate .vg-req b { color: var(--tx-1); font-family: var(--font-mono); font-weight: 600; }
.veil-gate .vg-req .mono { color: var(--cyan); }
.veil-gate .vg-status { margin-left: auto; font-family: var(--font-mono); font-weight: 700; font-size: 11px; letter-spacing: .08em; }
.veil-gate .vg-bar { height: 4px; background: rgba(255,255,255,0.08); border-radius: 2px; margin: 8px 0; overflow: hidden; }
.veil-gate .vg-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--cyan), #38bdf8); transition: width .3s; }
.veil-gate .vg-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; align-items: center; }
.veil-gate .vg-chips { display: inline-flex; gap: 4px; }
.veil-gate .vg-chip {
  border: 1px solid var(--line); background: transparent; color: var(--tx-3);
  font-family: var(--font-mono); font-size: 10.5px; padding: 2px 8px; border-radius: 3px; cursor: pointer;
}
.veil-gate .vg-chip:hover { border-color: var(--cyan); color: var(--tx-1); }
.veil-gate .vg-chip.on { border-color: var(--cyan); color: var(--cyan); background: rgba(56,189,248,0.12); }
.veil-gate .vg-topup { font-size: 11px; padding: 3px 10px; }
.veil-gate .vg-note { text-align: center; font-size: 10.5px; color: var(--tx-3); margin-top: 6px; font-family: var(--font-mono); }
/* v135：闸门 LOCKED 时的"Try Free Arena"逃生按钮（cyan 链接样式，区别于主操作） */
.vg-free-link {
  display: none;       /* 默认隐藏；renderGateBar 在 staked+LOCKED 时显示（block + fit-content 居中） */
  width: fit-content;
  margin: 6px auto 0;
  padding: 6px 14px;
  border: 1px dashed rgba(56,189,248,0.5);
  background: rgba(56,189,248,0.08);
  color: var(--cyan);
  font-family: var(--font-mono);
  font-size: 11px;
  border-radius: 4px;
  cursor: pointer;
  letter-spacing: .3px;
  transition: all .18s ease;
}
.vg-free-link:hover { background: rgba(56,189,248,0.18); border-style: solid; }
.free-pill {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border: 1px solid rgba(74,222,128,0.5);
  background: rgba(74,222,128,0.10);
  color: #4ade80;
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: .5px;
  vertical-align: 2px;
}
/* v146a：hero "✓ Free Forever" pill 已按用户要求移除 —— .hero-cta .free-pill 特化规则删除（基类保留供 veil note 用） */
/* v135：Home 顶部 Free-First Banner（"Season 0 is Free to Play" 强可见入口） */
.free-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  margin: 12px 20px 0;
  background: linear-gradient(90deg, rgba(74,222,128,0.10), rgba(56,189,248,0.06));
  border: 1px solid rgba(74,222,128,0.35);
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--tx-1);
}
.free-banner .fb-icon {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: rgba(74,222,128,0.20); color: #4ade80; font-size: 13px;
}
.free-banner .fb-msg { flex: 1; }
.free-banner .fb-msg b { color: #4ade80; }
.free-banner .fb-cta {
  border: 1px solid var(--cyan); color: var(--cyan);
  background: rgba(56,189,248,0.10);
  padding: 5px 12px; border-radius: 4px; font-size: 11.5px;
  font-family: var(--font-mono); letter-spacing: .3px;
  cursor: pointer; transition: all .18s ease;
}
.free-banner .fb-cta:hover { background: rgba(56,189,248,0.22); }
@media (max-width: 560px) {
  .free-banner { margin: 10px 12px 0; font-size: 11.5px; padding: 8px 10px; }
  .free-banner .fb-cta { padding: 4px 9px; font-size: 10.5px; }
}
@media (max-width: 560px) {
  .veil-gate .vg-status { margin-left: 0; }
  .veil-gate .vg-actions { flex-direction: column; }
}

/* ============ RobinArena rebrand: token & chain icons ============ */
/* ETH official gem logo (Ethereum Foundation mark, monochrome) */
.eth-ico {
  width: 11px; height: 18px;
  display: inline-block;
  vertical-align: -3px;
  margin-right: 4px;
  color: var(--cyan);
}
.eth-ico-xs {
  width: 9px; height: 14px;
  vertical-align: -2px;
  margin-right: 2px;
  color: var(--amber);
}
/* VOLT bolt */
.volt-ico {
  width: 14px; height: 14px;
  display: inline-block;
  vertical-align: -2px;
  color: currentColor;
}
.balance-chip .coin svg {
  width: 12px; height: 12px;
  color: #3B2500;
}
.ts-mark svg {
  width: 20px; height: 20px;
  color: #06121C;
}
.wc-item .wk { display: inline-flex; align-items: center; }

/* ============================================================
   排版打磨 v11（出厂增量）：焦点/选中/数字对齐/按压反馈/长串兜底
   ============================================================ */

/* 选中文本：深色主题下不用默认蓝底 */
::selection { background: rgba(53, 224, 255, .30); color: var(--tx-1); }

/* 键盘可达性：全局焦点环（终端风格 cyan） */
:focus-visible { outline: 2px solid rgba(53, 224, 255, .65); outline-offset: 2px; border-radius: 4px; }

/* 长数字 / 长 hint 兜底断行：金额、地址、比值列不撑破容器 */
.tbl td, .balance-chip, .sv, .stat .v, .card-h .hint, .hero-txt p {
  overflow-wrap: anywhere;
}

/* 按钮按压反馈（桌面 hover 有上浮，按下回弹） */
.btn:active { transform: translateY(0) scale(.98); }

/* 卡片变框过渡平滑 */
.card { transition: border-color .18s ease, box-shadow .18s ease; }

/* 数字等宽：金额/统计列避免宽度跳动（mono 天然等宽，Rajdhani 经 tnum 对齐） */
.stat .v, .balance-big .bv, .balance-big .bsub .sv, .tbl .num-r, .wave-chip .wv {
  font-variant-numeric: tabular-nums;
}

/* 表格数值列统一等宽字体，与表头/数据对齐 */
.tbl .num-r { font-family: var(--font-mono); }

/* 横向滚动表格容器：移动端右侧渐变提示可滑动（左列 Score band 不淡出，保持可读） */
.tbl-scroll {
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.tbl-scroll::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 28px;
  background: linear-gradient(90deg, transparent 0, var(--bg-panel) 100%);
  pointer-events: none;
  z-index: 1;
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
}

/* ratio-all 首列 sticky：横向滚动时锁定 Score band（宽表移动端黄金标准）。
   只粘 thead 第一行 th（Score band, rowspan=2）+ tbody 首列（F~A 得分带），
   不粘第二行表头的 "risk"（那是 Trial 档列头，不是锚点）。
   背景必须不透明（bg-panel），否则滚过来的行会透出来；z-index 2 盖过内容、低于 topbar。 */
.tbl.cyber-table.ratio-all thead tr:first-child th:first-child,
.tbl.cyber-table.ratio-all tbody td:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--bg-panel);
  box-shadow: 1px 0 0 var(--line);
}
.tbl.cyber-table.ratio-all tbody tr:hover td:first-child {
  background: var(--bg-raise);
}

/* ratio-all 已有 .tbl-scroll 滚动容器，移动端无需 .tbl 的 display:block 转换
   （该转换会让 thead/tbody 变独立 display:table，sticky table-cell 定位失效）。
   保持原生 table 布局 → td:first-child sticky left 相对 .tbl-scroll 正常锁定。 */
@media (max-width: 900px) {
  .tbl.cyber-table.ratio-all {
    display: table;
    overflow-x: visible;
  }
}

/* ---------- 结算卡 · 技能拆解（score = acc×0.5 + hs×0.3 + surv×0.2） ----------
   feedback channel：玩家必须看到"表现如何组成 score、离 break-even 差多少"，
   才能把技术与盈亏建立因果。gauge 上的 BE 75% 刻度即押注场技能门槛。 */
.res-skill {
  margin: 18px 0 4px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}
.sb-h {
  display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px;
  font-family: var(--font-display); font-size: 11px; letter-spacing: 1.5px;
  color: var(--tx-2); margin-bottom: 10px;
}
.sb-f { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0; color: var(--tx-3); }
.sb-bars { display: grid; gap: 6px; }
.sb-bar { display: grid; grid-template-columns: 52px 1fr 34px; align-items: center; gap: 8px; font-size: 10.5px; }
.sb-k { color: var(--tx-2); font-family: var(--font-mono); letter-spacing: 1px; }
.sb-k em { font-style: normal; color: var(--tx-3); font-size: 9px; }
.sb-track { height: 5px; background: var(--bg-raise); border-radius: 3px; overflow: hidden; }
.sb-fill { height: 100%; border-radius: 3px; transition: width .5s cubic-bezier(.2,.8,.3,1); }
.sb-v { font-family: var(--font-mono); text-align: right; }
.sb-gauge { margin: 12px 0 6px; }
.sb-gtrack {
  position: relative; height: 8px;
  background: linear-gradient(90deg, rgba(100,116,139,.25), rgba(53,224,255,.18), rgba(255,197,61,.25));
  border-radius: 4px; margin: 0 2px 18px;
}
.sb-gscore { position: absolute; top: -3px; transform: translateX(-50%); z-index: 2; display: grid; justify-items: center; }
.sb-gdot {
  width: 12px; height: 12px; border-radius: 50%;
  background: #fff; border: 2px solid var(--bg-panel);
  box-shadow: 0 0 6px rgba(255,255,255,.6);
}
.sb-gval {
  margin-top: 4px; font-family: var(--font-mono); font-size: 10px;
  color: var(--tx-1); background: var(--bg-raise); padding: 1px 5px; border-radius: 3px;
  white-space: nowrap;
}
.sb-gbe { position: absolute; top: -3px; transform: translateX(-50%); z-index: 1; }
.sb-gbev {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 1px;
  color: var(--amber); border-top: 2px solid var(--amber);
  padding-top: 3px; white-space: nowrap;
}
.sb-vd {
  margin-top: 10px; padding: 8px 10px; border-radius: 4px;
  font-size: 11.5px; line-height: 1.6;
}
.sb-vd.sb-win { background: rgba(34,197,94,.08); border: 1px solid rgba(34,197,94,.25); color: var(--ok); }
.sb-vd.sb-lose { background: rgba(244,63,94,.07); border: 1px solid rgba(244,63,94,.22); color: var(--tx-2); }
.sb-cmp .rr-k { color: var(--tx-3); font-size: 11px; }
@media (max-width: 560px) {
  .sb-h { font-size: 10px; }
  .sb-f { font-size: 8.5px; }
  .sb-bar { grid-template-columns: 46px 1fr 30px; gap: 6px; font-size: 10px; }
  .sb-vd { font-size: 10.5px; padding: 7px 9px; }
}

/* ============================================================
   经济模型 v13：Staked Tier Economics + Economy Loop
   ============================================================ */

/* —— 4 档 tier 经济卡（Dashboard）—— */
.tier-econ { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 900px) { .tier-econ { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .tier-econ { grid-template-columns: minmax(0, 1fr); } }

.te-card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg-panel);
  padding: 14px 14px 12px;
}
.te-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--te-accent, var(--cyan));
  opacity: .7;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.te-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.te-name { font-family: var(--font-display); font-size: 15px; letter-spacing: 1.5px; color: var(--tx-1); }
.te-badge { font-size: 9px; letter-spacing: 1px; padding: 2px 6px; border-radius: 3px; border: 1px solid; font-family: var(--font-mono); }
.te-badge.live   { color: var(--ok);     border-color: var(--ok); }
.te-badge.soon   { color: var(--amber);  border-color: var(--amber); }
.te-badge.locked { color: var(--danger); border-color: var(--danger); }
.te-row { display: flex; justify-content: space-between; font-size: 11.5px; line-height: 2.05; color: var(--tx-2); }
.te-row .mono { color: var(--tx-1); }
.te-be {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 11px; margin-top: 10px; padding-top: 9px;
  border-top: 1px dashed var(--line);
}
.te-be .be-label { color: var(--tx-3); font-size: 10px; letter-spacing: .6px; }
.te-be .be-val { color: var(--amber); font-weight: 600; font-family: var(--font-mono); }
.te-ev { display: flex; justify-content: space-between; font-size: 11px; margin-top: 6px; }
.te-ev .ev-label { color: var(--tx-3); }
.te-gate {
  font-size: 10px; color: var(--tx-3); margin-top: 9px; line-height: 1.65;
  border-top: 1px solid var(--line); padding-top: 8px;
}
.te-gate b { color: var(--tx-2); font-weight: 600; }

/* —— 经济闭环图（Dashboard）—— */
.econ-loop { width: 100%; }
.econ-loop svg { width: 100%; height: auto; display: block; }
.el-note { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 11px; color: var(--tx-3); }
.el-note span b { color: var(--tx-2); }

/* —— trade 宽表滚动状态指示器（B）—— */
.scroll-pos {
  position: absolute; top: 7px; right: 34px; z-index: 3;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .8px;
  color: var(--tx-3); background: rgba(10, 14, 20, .6);
  border: 1px solid var(--line); border-radius: 4px; padding: 3px 7px;
  opacity: 0; pointer-events: none; transition: opacity .18s;
  white-space: nowrap;
}
.tbl-scroll.has-scroll .scroll-pos { opacity: 1; }

/* —— 列 hover 高亮（C）：悬停表头 → 整列提亮，覆盖行 hover 背景 —— */
.tbl tbody td.col-hover { background: var(--bg-raise); }
.tbl.cyber-table.ratio-all tbody td:first-child.col-hover,
.tbl.cyber-table.ratio-tbl  tbody td:first-child.col-hover { background: var(--bg-raise); }


/* ============ v14: honest-claim hero + THE LOOP + honest annotations ============ */
/* A1 — Hero 一句话主张（aksara 式）：amber 左边条 + display 大字，绑定 break-even 0.80 */
.hero-claim {
  display: flex; align-items: center; gap: 14px;
  margin: 18px 0 22px; padding: 13px 18px;
  border: 1px solid var(--line-hi); border-left: 3px solid var(--amber);
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(255,197,61,.09), transparent 62%);
}
.hc-tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.6px; color: var(--amber); white-space: nowrap; }
.hc-line { font-family: var(--font-display); font-size: 26px; font-weight: 700; color: var(--tx-1); line-height: 1.15; letter-spacing: .4px; }
.hc-line b { color: var(--amber); font-size: 30px; }

/* A2 — THE LOOP 四步叙事（aksara 式）：数字-标题-一句话-微数徽章 */
.the-loop { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tl-step {
  position: relative; padding: 16px 14px 14px;
  border: 1px solid var(--line); border-radius: 10px;
  background: rgba(255,255,255,.02);
}
.tl-step::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--cyan), transparent 70%); }
.tl-step:last-child::before { background: linear-gradient(90deg, var(--amber), transparent 70%); }
.tl-num { font-family: var(--font-display); font-size: 30px; font-weight: 700; color: var(--cyan); line-height: 1; margin-bottom: 8px; }
.tl-step:last-child .tl-num { color: var(--amber); }
.tl-title { font-family: var(--font-display); font-size: 12.5px; font-weight: 700; letter-spacing: 2.2px; color: var(--tx-1); margin-bottom: 6px; }
.tl-desc { font-size: 12px; color: var(--tx-2); line-height: 1.65; margin-bottom: 10px; min-height: 40px; }
.tl-meta { font-size: 10.5px; color: var(--tx-3); letter-spacing: .4px; border-top: 1px dashed var(--line); padding-top: 8px; }

/* A4 — 诚实披露行（goobs 式）：tier 是标签不是实体 */
.te-disclose { margin-top: 14px; padding: 10px 12px; border-top: 1px dashed var(--line); font-size: 10.5px; color: var(--tx-3); letter-spacing: .3px; line-height: 1.7; }

/* v129 — 白皮书转交出口：机制讲完，把想算账的人送走 */
.home-handoff {
  display: flex; align-items: baseline; justify-content: center; gap: 8px; flex-wrap: wrap;
  margin: 0 0 8px; padding: 12px 16px; text-align: center;
  font-size: 12px; color: var(--tx-3); line-height: 1.7;
}
.home-handoff button, .wp-handoff {
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: var(--font-display); font-size: 12px; font-weight: 700;
  letter-spacing: 1px; color: var(--cyan); text-transform: uppercase;
  border-bottom: 1px solid rgba(53, 224, 255, .35); transition: border-color .15s, color .15s;
}
.home-handoff button:hover, .wp-handoff:hover { color: var(--tx-1); border-bottom-color: var(--cyan); }
.wp-handoff { font-size: 11px; }

@media (max-width: 900px) { .the-loop { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .the-loop { grid-template-columns: 1fr; }
  .hero-claim { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* ============================================================
   #98 UI 重塑：「VOLT 能量库」视觉语言（2026-08-31）
   ------------------------------------------------------------
   电光青 #35E0FF（信息/界面）· 高纯金 #FFC53D（收益/能量）
   Hero 静态 LOGO → 动态「伏特金库核心」· 全局能量感增强
   约束：--bg-panel #111827 不变（回归 sticky 断言锁定）
   ============================================================ */

/* ---------- Hero：伏特金库核心 ---------- */
/* 旧容器保留 class，内部换新场景；关掉旧径向背景 */
.hero-vis-clean::before { display: none; }

.vault-core {
  position: relative;
  width: 300px; height: 300px;
  flex-shrink: 0;
  margin: 0 auto;
}

/* 旋转能量环 */
.vc-ring {
  position: absolute; border-radius: 50%;
  pointer-events: none;
}
.vc-ring-1 {
  inset: 0;
  border: 1px solid rgba(53,224,255,.35);
  border-top-color: rgba(53,224,255,.95);
  animation: vcSpin 9s linear infinite;
}
.vc-ring-2 {
  inset: 26px;
  border: 1px dashed rgba(255,197,61,.45);
  animation: vcSpinRev 14s linear infinite;
}
.vc-ring-3 {
  inset: 52px;
  border: 1px solid rgba(139,92,246,.30);
  border-bottom-color: rgba(139,92,246,.85);
  animation: vcSpin 6s linear infinite;
}

/* 金色刻度圈 */
.vc-ticks {
  position: absolute; inset: 11px; border-radius: 50%;
  background-image:
    repeating-conic-gradient(rgba(255,197,61,.55) 0deg 1.5deg, transparent 1.5deg 11.25deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px), #000 calc(100% - 2px), transparent calc(100% - 1px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px), #000 calc(100% - 2px), transparent calc(100% - 1px));
  opacity: .8;
  animation: vcSpinRev 24s linear infinite;
}

/* 底部金库光池 */
.vc-halo {
  position: absolute; left: 50%; bottom: 6%;
  transform: translateX(-50%);
  width: 190px; height: 46px;
  background: radial-gradient(ellipse, rgba(255,197,61,.28) 0%, rgba(255,197,61,.06) 55%, transparent 75%);
  filter: blur(2px);
  pointer-events: none;
}

/* 菱形核心（呼应 RobinArena 徽记）*/
.vc-core {
  position: absolute; inset: 92px;
  background:
    radial-gradient(circle at 34% 28%, rgba(53,224,255,.28), transparent 46%),
    linear-gradient(135deg, #0E2A3A 0%, #0A1B2C 55%, #14273F 100%);
  border: 1px solid rgba(53,224,255,.55);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  display: grid; place-items: center;
  box-shadow: 0 0 42px rgba(53,224,255,.28), inset 0 0 34px rgba(53,224,255,.10);
  animation: vcCorePulse 3.2s ease-in-out infinite;
  z-index: 2;
}
.vc-core::after {
  content: ''; position: absolute; inset: 7px;
  border: 1px solid rgba(255,197,61,.28);
  clip-path: inherit;
}
/* #141 · hero 中央 LOGO 图标（替代原 vc-bolt 闪电 · 桌面 72×72 = 与 h1 字号 38-54px 视觉对齐） */
.vc-logo {
  width: 72px; height: 72px;
  object-fit: contain;
  filter:
    drop-shadow(0 0 12px rgba(53,224,255,.55))
    drop-shadow(0 0 26px rgba(139,92,246,.35))
    drop-shadow(0 0 8px rgba(255,197,61,.30));
  z-index: 1;
  pointer-events: none;
  user-select: none;
}
@keyframes vcCorePulse {
  0%, 100% { box-shadow: 0 0 34px rgba(53,224,255,.22), inset 0 0 30px rgba(53,224,255,.08); }
  50%      { box-shadow: 0 0 58px rgba(53,224,255,.42), inset 0 0 44px rgba(53,224,255,.16); }
}

/* 漂浮能量粒子 */
.vc-p {
  position: absolute; width: 5px; height: 5px; border-radius: 50%;
  pointer-events: none; z-index: 3;
  animation: vcFloat 5s ease-in-out infinite;
}
.vc-p.p1 { left: 14%; top: 18%; background: #35E0FF; box-shadow: 0 0 8px rgba(53,224,255,.9); animation-delay: 0s; }
.vc-p.p2 { left: 82%; top: 26%; background: #FFC53D; box-shadow: 0 0 8px rgba(255,197,61,.9); animation-delay: .9s; }
.vc-p.p3 { left: 24%; top: 76%; background: #8B5CF6; box-shadow: 0 0 8px rgba(139,92,246,.9); animation-delay: 1.7s; }
.vc-p.p4 { left: 74%; top: 74%; background: #35E0FF; box-shadow: 0 0 8px rgba(53,224,255,.9); animation-delay: 2.5s; }
.vc-p.p5 { left: 50%; top: 6%;  background: #FFC53D; box-shadow: 0 0 8px rgba(255,197,61,.9); animation-delay: 3.2s; }
@keyframes vcFloat {
  0%, 100% { transform: translate(0, 0) scale(1);   opacity: .85; }
  50%      { transform: translate(0, -14px) scale(1.35); opacity: 1; }
}

/* 扫描光束：核心上下的青色扫掠 */
.vc-scan {
  position: absolute; left: 50%; top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(53,224,255,.55), transparent);
  transform: translateX(-50%);
  opacity: 0;
  animation: vcScan 4.5s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes vcScan {
  0%, 8%   { opacity: 0; transform: translateX(-50%) translateY(-60%); }
  45%      { opacity: .8; transform: translateX(-50%) translateY(0); }
  70%, 100%{ opacity: 0; transform: translateX(-50%) translateY(60%); }
}
@keyframes vcSpin   { to { transform: rotate(360deg); } }
@keyframes vcSpinRev{ to { transform: rotate(-360deg); } }

/* Hero 文字层级强化 */
.hero-txt h1 {
  font-size: clamp(38px, 4.2vw, 54px);
  letter-spacing: .5px;
  text-shadow: 0 2px 24px rgba(53,224,255,.16);
}
.hero-txt h1 em {
  background: linear-gradient(92deg, #35E0FF 10%, #7DF3FF 50%, #FFC53D 110%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  text-shadow: none;
}
.hero-txt .eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  border: 1px solid rgba(53,224,255,.28);
  border-radius: 40px;
  background: rgba(53,224,255,.06);
  letter-spacing: 2.5px;
}
.hero-txt .eyebrow::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: #35E0FF; box-shadow: 0 0 8px rgba(53,224,255,.9);
  animation: vcBlink 2s steps(2) infinite;
}
@keyframes vcBlink { 50% { opacity: .3; } }
.hero-txt p { max-width: 560px; }
.hero-cta .btn-pri { box-shadow: 0 6px 26px rgba(53,224,255,.28); }

/* ---------- 全局能量感增强 ---------- */

/* 主区背景：极淡工业网格 + 顶部青色天光 */
.main {
  background:
    radial-gradient(1200px 420px at 82% -6%, rgba(53,224,255,.07), transparent 62%),
    radial-gradient(900px 360px at 8% 108%, rgba(255,197,61,.05), transparent 60%);
}
.view-scroll {
  background-image:
    linear-gradient(rgba(53,224,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(53,224,255,.028) 1px, transparent 1px);
  background-size: 52px 52px;
}

/* 卡片：hover 能量边框 + 顶部 2px 能量条 */
.card { position: relative; }
.card::before {
  content: ''; position: absolute; top: 0; left: 18px; right: 18px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(53,224,255,.38), rgba(255,197,61,.30), transparent);
  opacity: 0; transition: opacity .22s ease;
}
.card:hover { border-color: var(--line-hi); box-shadow: 0 8px 30px rgba(0,0,0,.30); }
.card:hover::before { opacity: 1; }

/* 主按钮：通电微光 */
.btn-pri {
  box-shadow: 0 0 0 1px rgba(53,224,255,.25), 0 4px 20px rgba(53,224,255,.22);
}
.btn-pri:hover { box-shadow: 0 0 0 1px rgba(53,224,255,.4), 0 6px 30px rgba(53,224,255,.36); }
.btn-amber {
  box-shadow: 0 0 0 1px rgba(255,197,61,.22), 0 4px 18px rgba(255,197,61,.18);
}

/* 侧边栏：品牌仪式感 + 激活项强化 */
.brand-txt b {
  font-size: 15px;
  background: linear-gradient(92deg, #E8EDF7 20%, #35E0FF 90%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.brand-txt span { color: var(--amber); letter-spacing: 2.2px; }
.nav-item.active {
  background: linear-gradient(90deg, rgba(53,224,255,.12), rgba(53,224,255,.03));
}
.nav-item.active::before { width: 3px; box-shadow: 0 0 10px rgba(53,224,255,.8); }

/* 统计块：数值 + 金色刻线 */
.stat::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, transparent, rgba(255,197,61,.55), transparent);
  opacity: 0; transition: opacity .2s;
}
.stat:hover::before { opacity: 1; }

/* 表格表头：青色细分隔线 */
.tbl th { color: var(--tx-2); }

/* 平衡芯片：金色描边强化代币感 */
.balance-chip { border-color: rgba(255,197,61,.35); }

/* 进度条能量尾光 */
.bar > i { box-shadow: 0 0 10px rgba(53,224,255,.4); }

/* 数字等宽保持 + 关键收益数值呼吸（仅主页 hero-stats） */
.hero-stats b { color: var(--cyan); }

/* 减小动效偏好：降级所有新增动画 */
@media (prefers-reduced-motion: reduce) {
  .vc-ring, .vc-ticks, .vc-core, .vc-p, .vc-scan,
  .hero-txt .eyebrow::before { animation: none; }
  .vc-p { opacity: .8; }
  .vc-scan { opacity: .25; }
}

/* 响应式：核心缩放 */
@media (max-width: 980px) {
  .vault-core { width: 230px; height: 230px; }
  .vc-core { inset: 70px; }
  .vc-logo { width: 56px; height: 56px; }
}
@media (max-width: 760px) {
  .vault-core { width: 190px; height: 190px; }
  .vc-core { inset: 58px; }
  .vc-logo { width: 44px; height: 44px; }
}

/* ============================================================
   #101 深空氛围层（第二轮 UI 重塑）
   目标：去掉"纯底色"观感 —— 深空渐变基座 + 星云光斑漂移 +
   噪点颗粒 + Canvas 星野（github.com/CRISvsGAME/starfield · MIT）
   ------------------------------------------------------------
   层序（从下到上）：
   body 背景渐变（基座）→ body::before 星云光斑（z0）→
   #bg-stars 星野 canvas（z1）→ #app 内容（z2）→ body::after 噪点（z3）
   ============================================================ */

/* 基座：#125 复刻游戏天穹（scene.js sky ShaderMaterial 同源三色）。
   顶 = 夜空 #05070E → 40% 处地平线城市蓝带 #16233F → 底 = 地面反光 #0A1020；
   附带两盏灯带色辉光：顶青（0x35E0FF）/ 底琥珀（0xFFC53D），紫色残留已清（旧 rgba(58,28,96,.42)） */
body {
  background:
    radial-gradient(1300px 620px at 78% -10%, rgba(53, 224, 255, .15), transparent 60%),
    radial-gradient(880px 540px at 10% 110%, rgba(255, 197, 61, .10), transparent 58%),
    radial-gradient(1400px 820px at 50% 42%, rgba(22, 35, 63, .55), transparent 72%),
    linear-gradient(180deg, var(--game-sky-top) 0%, var(--game-sky-mid) 40%, var(--game-sky-bot) 74%);
}

/* 星云辉光层：顶青(城市灯) + 地平线蓝 + 底部琥珀(地面反光) 缓慢漂移；紫团已清 */
body::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(560px 360px at 78% 10%, rgba(53, 224, 255, .12), transparent 65%),
    radial-gradient(500px 340px at 12% 92%, rgba(255, 197, 61, .06), transparent 65%),
    radial-gradient(900px 420px at 50% 46%, rgba(22, 35, 63, .55), transparent 72%);
  filter: blur(30px);
  animation: nebulaDrift 26s ease-in-out infinite alternate;
}
@keyframes nebulaDrift {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to   { transform: translate3d(2%, 2%, 0) scale(1.08); }
}

/* 星野画布：固定全屏，位于内容之下；压透明度让天穹渐变主导 */
#bg-stars {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 1; pointer-events: none;
  opacity: .6;
  filter: saturate(1.15) brightness(1.05);
}

/* ============================================================
   #125 游戏语料背景层（第二轮视觉大改 · 与 scene.js 取景同源）
   复刻竞技场一眼可认的元素：透视金属地板网格 / 青+琥珀霓虹灯带 /
   中央高台青色环 / 底部体积雾。纯 CSS 无 JS、无图片。
   层序（从下到上）：body 天穹渐变 → body::before(z0) → #bg-stars(z1)
   → .game-bg 地板/灯带/环/雾(z2) → #app 内容(z3) → body::after 噪点
   ============================================================ */
.game-bg {
  position: fixed; inset: 0; z-index: 2; overflow: hidden; pointer-events: none;
}

/* 透视金属地板：44% 以下，rotateX 网格自动向地平线收拢 */
.gb-floor {
  position: absolute; left: -18%; right: -18%; top: 44%; bottom: -16%;
  overflow: hidden;
  background:
    radial-gradient(900px 320px at 22% 26%, rgba(53, 224, 255, .12), transparent 72%),
    radial-gradient(820px 300px at 80% 40%, rgba(255, 197, 61, .09), transparent 72%),
    linear-gradient(180deg, #101B30 0%, var(--game-metal) 52%, #070D1A 100%);
}
/* 地平线接缝渐隐：把地板远缘融进天穹蓝带 */
.gb-floor::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 90px;
  background: linear-gradient(180deg, rgba(10, 16, 32, .92), rgba(10, 16, 32, 0));
}
.gb-floor-grid {
  position: absolute; left: 0; right: 0; top: -6%; bottom: -34%;
  background-image:
    linear-gradient(90deg, rgba(53, 224, 255, .10) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 88px 88px, 88px 88px;
  transform: perspective(430px) rotateX(58deg);
  transform-origin: 50% 0%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 100%);
}

/* 霓虹灯带：青主灯(全场) + 琥珀副灯(偏右)，悬挂在地平线接缝上 */
.gb-neon-a {
  position: absolute; left: 4%; right: 4%; top: 44.3%; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(53, 224, 255, .85) 16%, rgba(53, 224, 255, .32) 50%, rgba(53, 224, 255, .85) 84%, transparent);
  box-shadow: 0 0 16px rgba(53, 224, 255, .75), 0 0 64px rgba(53, 224, 255, .35);
  opacity: .85;
}
.gb-neon-b {
  position: absolute; right: 12%; top: 43.0%; width: 36%; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 197, 61, .95) 58%, transparent);
  box-shadow: 0 0 13px rgba(255, 197, 61, .65), 0 0 48px rgba(255, 197, 61, .3);
  opacity: .8;
}

/* 中央高台青色环（0x35E0FF）：视平线下方的透视椭圆 */
.gb-ring {
  position: absolute; left: 50%; top: 55%;
  width: min(58vw, 640px); height: 12.5vh;
  transform: translate(-50%, -50%);
  border: 2.5px solid rgba(53, 224, 255, .8);
  border-radius: 50%;
  box-shadow: 0 0 16px rgba(53, 224, 255, .45), inset 0 0 24px rgba(53, 224, 255, .22);
  opacity: .8;
}
.gb-ring::after {
  content: ''; position: absolute; left: 16%; right: 16%; top: 38%; bottom: 38%;
  border: 1px solid rgba(53, 224, 255, .35); border-radius: 50%;
}

/* 底部体积雾：压暗最底缘，与游戏 FogExp2 的"远界消隐"呼应 */
.gb-fog {
  position: absolute; left: 0; right: 0; top: 76%; bottom: 0;
  background: linear-gradient(180deg, transparent, rgba(7, 11, 22, .45) 58%, rgba(5, 7, 14, .9) 100%);
}

/* 内容提升一层，确保在地板/灯带之上 */
#app { position: relative; z-index: 3; }

/* 胶片噪点颗粒：全屏 4% 覆盖，电影感去"纯色" */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 3; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
  background-size: 140px 140px;
  opacity: .045; mix-blend-mode: overlay;
}

/* 主区光斑：顶青 / 底琥珀 / 中部地平线蓝——与游戏灯带同源，紫斑已清 */
.main {
  background:
    radial-gradient(1300px 520px at 82% -8%, rgba(53, 224, 255, .10), transparent 62%),
    radial-gradient(1000px 440px at 8% 112%, rgba(255, 197, 61, .07), transparent 60%),
    radial-gradient(900px 480px at 30% 42%, rgba(22, 35, 63, .40), transparent 65%);
}

/* 侧栏 / 顶栏：#125 金属霓虹底——深钢蓝渐变 + 顶部青光（呼应游戏蓝金属板），
   半透明让天穹/星野微微透出 */
.sidebar, .topbar {
  background:
    radial-gradient(560px 220px at 50% -20%, rgba(53, 224, 255, .10), transparent 72%),
    linear-gradient(180deg, rgba(13, 20, 38, .9), rgba(7, 11, 22, .86));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
/* 内部霓虹切边：侧栏右缘青光 / 顶栏下缘琥珀微光 */
.sidebar { box-shadow: inset -1px 0 0 rgba(53, 224, 255, .10); }
.topbar { box-shadow: inset 0 -1px 0 rgba(255, 197, 61, .08); }

/* ---- Hero 区增强 ---- */
.hero { box-shadow: 0 0 0 1px rgba(53, 224, 255, .06), 0 22px 60px rgba(0, 0, 0, .35); }
/* 底部地平线能量带：3px 青→金双色 + 双层辉光（呼应游戏霓虹灯带） */
.hero::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, transparent 2%, rgba(53, 224, 255, .9) 30%, rgba(255, 255, 255, .45) 50%, rgba(255, 197, 61, .9) 72%, transparent 98%);
  box-shadow: 0 0 22px rgba(53, 224, 255, .5), 0 0 44px rgba(255, 197, 61, .22);
}
/* 标题关键词呼吸辉光 */
.hero-txt h1 em {
  text-shadow: 0 0 14px rgba(53, 224, 255, .45), 0 0 38px rgba(53, 224, 255, .20);
  animation: emGlow 3.4s ease-in-out infinite;
}
@keyframes emGlow {
  0%, 100% { text-shadow: 0 0 14px rgba(53, 224, 255, .45), 0 0 38px rgba(53, 224, 255, .20); }
  50%      { text-shadow: 0 0 24px rgba(53, 224, 255, .72), 0 0 56px rgba(53, 224, 255, .32); }
}
/* 金库核心：柔和外发光 */
.vault-core { filter: drop-shadow(0 0 26px rgba(53, 224, 255, .22)); }

/* ---- 卡片：hover 斜向扫光 ---- */
.card {
  clip-path: inset(0 round var(--r-lg));   /* 只裁绘制区域，不影响内部 sticky 滚动 */
}
.card::after {
  content: ''; position: absolute; top: -20%; bottom: -20%; left: -70%; width: 46%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .05), transparent);
  transform: skewX(-18deg); pointer-events: none;
  transition: left .7s cubic-bezier(.2, .7, .3, 1);
}
.card:hover::after { left: 125%; }

/* ---- 主按钮：通电呼吸光晕 ---- */
.btn-pri { animation: btnPulse 3.2s ease-in-out infinite; }
.btn-pri:hover { animation: none; }
@keyframes btnPulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(53, 224, 255, .25), 0 4px 20px rgba(53, 224, 255, .22); }
  50%      { box-shadow: 0 0 0 1px rgba(53, 224, 255, .42), 0 6px 30px rgba(53, 224, 255, .38); }
}

/* ---- 减小动效偏好：降级 #101 全部新动画 ---- */
@media (prefers-reduced-motion: reduce) {
  body::before, .hero-txt h1 em, .btn-pri { animation: none; }
  body::before { transform: none; }
  .card::after { display: none; }
  /* #125：背景层同样降级（现无自身动画，纯保险） */
  .game-bg, .game-bg * { animation: none; }
}

/* ============================================================
   #139 v126 · Home 视图收窄：hero + 4 格快速入口（qt-grid）
   Home 不再无限滚动——深度内容各自归位（Arena/Vault/Missions/
   Economy），首页只保留 hero 与 4 个功能入口瓦片。
   ------------------------------------------------------------
   复用 .grid.g4 网格；每瓦片 = 图标行 + 标题 + 一句话 + mono 徽章。
   ============================================================ */
.qt-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.qtile {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 6px; text-align: left;
  padding: 16px 16px 14px;
  background: var(--bg-panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  cursor: pointer;
  color: var(--tx-1);
  font: inherit;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
  position: relative; overflow: hidden;
}
.qtile:hover { border-color: var(--line-hi); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,.28); }
.qtile .qt-top { width: 100%; display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.qtile .qt-top .ico { width: 20px; height: 20px; }
.qtile .qt-arrow { font-family: var(--font-mono); font-size: 15px; color: var(--tx-3); transition: color .18s ease, transform .18s ease; }
.qtile:hover .qt-arrow { color: var(--cyan); transform: translateX(3px); }
.qtile .qt-t { font-family: var(--font-display); font-size: 15px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; }
.qtile .qt-p { margin: 0; font-size: 12px; color: var(--tx-3); line-height: 1.65; min-height: 40px; }
.qtile .qt-badge {
  margin-top: 4px; padding: 3px 10px;
  font-size: 10.5px; color: var(--tx-2); letter-spacing: .03em;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--bg-raise);
  white-space: nowrap;
}
@media (max-width: 900px) { .qt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .qt-grid { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================
   #97 v135 · Buy $RAR 预购模态（modal-veil 固定盖层 + buy-modal 卡）
   盖层 z-index 150：压过 scene-loading(40)/enter-veil(30)/result-veil(35)，
   低于 toast-wrap(200) 保证提示仍可见。模态全屏点击(Esc/遮罩)可关。
   ============================================================ */
.modal-veil {
  position: fixed; inset: 0; z-index: 150;
  display: flex; align-items: center; justify-content: center;
  background: rgba(4, 7, 14, .82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 20px;
}
.modal-veil[hidden] { display: none; }
.buy-modal {
  position: relative;
  width: min(480px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 26px 26px 22px;
  text-align: center;
  animation: resIn .28s cubic-bezier(.2, .8, .3, 1);
}
.buy-x {
  position: absolute; top: 10px; right: 12px;
  background: none; border: 0; color: var(--tx-3);
  font-size: 17px; line-height: 1; cursor: pointer; padding: 8px;
}
.buy-x:hover { color: var(--tx-1); }
.buy-icon {
  width: 58px; height: 58px; margin: 4px auto 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(255,197,61,.16), rgba(255,197,61,.05));
  border: 1px solid rgba(255,197,61,.4);
  color: var(--amber);
  box-shadow: 0 0 26px rgba(255,197,61,.18);
}
.buy-icon .volt-ico { width: 30px; height: 30px; }
.buy-eyebrow {
  margin-top: 14px;
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: .18em; color: var(--cyan); text-transform: uppercase;
}
.buy-modal h3 {
  font-family: var(--font-display); font-size: 22px; font-weight: 700;
  margin: 8px 0 10px; color: var(--tx-1); letter-spacing: .5px;
}
.buy-lead { margin: 0 auto 14px; max-width: 400px; font-size: 13px; color: var(--tx-2); line-height: 1.8; }
.buy-lead b { color: var(--amber); }
.buy-facts {
  list-style: none; margin: 0 0 14px; padding: 0;
  text-align: left;
}
.buy-facts li {
  position: relative; padding: 9px 0 9px 26px;
  font-size: 12.5px; color: var(--tx-2); line-height: 1.7;
  border-top: 1px solid var(--line);
}
.buy-facts li:first-child { border-top: 0; }
.buy-facts li::before {
  content: ''; position: absolute; left: 6px; top: 15px;
  width: 7px; height: 7px; transform: rotate(45deg);
  background: var(--cyan); box-shadow: 0 0 8px rgba(53,224,255,.6);
}
.buy-facts li b { color: var(--tx-1); }
.buy-note {
  margin: 0 0 16px; font-size: 10.5px; letter-spacing: .04em;
  color: var(--tx-3);
}
.buy-actions .btn { width: 100%; }
@media (max-width: 560px) {
  .buy-modal { padding: 22px 18px 18px; }
  .buy-modal h3 { font-size: 19px; }
}

/* ============================================================
   v143 · Rankings / 身份绑定层（BUILD #26）
   - 顶栏钱包绑定态 / Rankings 榜 / Season Pack 卡
   ============================================================ */
.wallet-btn.bound { border-color: var(--cyan); color: var(--cyan); }
.wallet-btn.bound .dot-live { background: var(--cyan); box-shadow: 0 0 6px var(--cyan); }

/* ---- Rankings：我的排位卡 ---- */
.rk-me-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.rk-id { font-family: var(--font-mono); font-size: 15px; font-weight: 600; color: var(--tx-3); letter-spacing: .02em; }
.rk-id.bound { color: var(--cyan); }
.rk-id-sub { font-size: 11px; color: var(--tx-3); margin-top: 3px; }
.rk-rank-big { font-family: var(--font-mono); font-size: 30px; font-weight: 700; color: var(--amber); }
.rk-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
.rk-stats > div { background: var(--bg-raise, rgba(255,255,255,.03)); border: 1px solid var(--line); border-radius: 8px; padding: 9px 4px; text-align: center; }
.rk-stats b { display: block; font-family: var(--font-mono); font-size: 17px; color: var(--tx-1); }
.rk-stats span { font-size: 10px; letter-spacing: .08em; color: var(--tx-3); text-transform: uppercase; }
.rk-elig { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 12px; }

/* ---- Rankings：榜表 ---- */
.rank-pos { font-family: var(--font-mono); font-size: 14px; color: var(--tx-2); }
.rank-pos.rk-top { font-size: 17px; }
.rank-chip { font-family: var(--font-mono); font-size: 12.5px; color: var(--tx-3); background: rgba(148,163,184,.08); border: 1px solid var(--line); padding: 2px 8px; border-radius: 20px; }
.rank-chip.bound { color: var(--cyan); border-color: rgba(53,224,255,.35); background: rgba(53,224,255,.06); }
.rk-you { font-size: 9.5px; font-weight: 700; letter-spacing: .1em; color: var(--amber); border: 1px solid var(--amber); padding: 1px 6px; border-radius: 3px; vertical-align: 2px; }
.rk-claim { font-size: 9.5px; letter-spacing: .06em; color: var(--ok); border: 1px solid rgba(34,197,94,.5); padding: 1px 6px; border-radius: 3px; vertical-align: 2px; }
tr.rk-me td { background: rgba(53,224,255,.05); }
tr.rk-me td:first-child { box-shadow: inset 2px 0 0 var(--cyan); }

/* ---- Rankings：奖励规则 ---- */
.rank-rules { list-style: none; margin: 0; padding: 0; }
.rank-rules li { font-size: 12.5px; color: var(--tx-2); line-height: 1.8; padding: 9px 0 9px 18px; position: relative; border-bottom: 1px solid var(--line); }
.rank-rules li:last-child { border-bottom: 0; }
.rank-rules li::before { content: '◆'; position: absolute; left: 0; top: 9px; color: var(--cyan); font-size: 9px; }
.rank-rules .mono { color: var(--tx-1); }

/* ============================================================
   v144 · MODE GATE（模式门三选一）+ 托管身份角标
   mode-veil 复用 .modal-veil（fixed z150 盖层）；本块只做卡内排版与三卡语义色。
   ============================================================ */
.mode-gate {
  position: relative;
  width: min(940px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 26px 28px 22px;
  text-align: left;
  animation: resIn .28s cubic-bezier(.2, .8, .3, 1);
}
.mg-eyebrow { font-size: 10.5px; letter-spacing: .22em; color: var(--cyan); margin-bottom: 8px; }
.mode-gate h3 { font-size: clamp(20px, 2.6vw, 27px); margin: 0 0 8px; color: var(--tx-1); font-family: var(--font-display); text-transform: uppercase; letter-spacing: .02em; }
.mg-lead { font-size: 12.5px; color: var(--tx-2); line-height: 1.7; margin: 0 0 14px; max-width: 720px; }
.mg-chip-row { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.mg-lbl { font-size: 10.5px; letter-spacing: .14em; color: var(--tx-3); text-transform: uppercase; }
#mode-veil .rank-chip { font-size: 13px; padding: 3px 12px; }
.rank-chip.emb { color: var(--amber); border-color: rgba(245,166,35,.45); background: rgba(245,166,35,.08); }
.rk-id.emb { color: var(--amber); }

.mg-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.mg-card {
  display: flex; flex-direction: column; gap: 8px; text-align: left;
  background: rgba(255,255,255,.025); border: 1px solid var(--line); border-radius: 10px;
  padding: 15px 14px 13px; cursor: pointer; color: inherit; font: inherit;
  transition: border-color .18s, transform .18s, box-shadow .18s, background .18s;
  position: relative;
}
.mg-card:hover { transform: translateY(-1px); background: rgba(255,255,255,.045); }
.mg-card:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; }
.mg-free:hover { border-color: rgba(34,197,94,.55); }
.mg-staked:hover { border-color: rgba(245,166,35,.6); }
.mg-embedded:hover { border-color: rgba(53,224,255,.55); }
.mg-card.mg-def { border-color: var(--amber); box-shadow: 0 0 0 1px rgba(245,166,35,.35), 0 0 22px rgba(245,166,35,.10); }
.mg-top { display: flex; align-items: center; gap: 8px; }
.mg-num {
  font-family: var(--font-mono); font-size: 10.5px; color: #0a0f1a;
  background: var(--tx-3); border-radius: 4px; padding: 1px 6px; font-weight: 700;
}
.mg-staked .mg-num { background: var(--amber); }
.mg-free .mg-num { background: var(--ok); }
.mg-embedded .mg-num { background: var(--cyan); }
.mg-name { font-family: var(--font-display); font-size: 14.5px; font-weight: 700; color: var(--tx-1); letter-spacing: .01em; }
.mg-flag { margin-left: auto; font-size: 8.5px; letter-spacing: .12em; color: var(--tx-3); border: 1px solid var(--line); padding: 2px 6px; border-radius: 3px; white-space: nowrap; }
.mg-free .mg-flag { color: var(--ok); border-color: rgba(34,197,94,.4); }
.mg-staked .mg-flag { color: var(--amber); border-color: rgba(245,166,35,.45); }
.mg-embedded .mg-flag { color: var(--cyan); border-color: rgba(53,224,255,.4); }
.mg-sub { font-size: 12px; color: var(--tx-2); line-height: 1.65; }
.mg-sub b { color: var(--tx-1); }
.mg-note { font-size: 10.5px; color: var(--tx-3); line-height: 1.6; margin-top: auto; border-top: 1px dashed var(--line); padding-top: 8px; }
.mg-note b { color: var(--cyan); }

.mg-tools { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.mg-tool {
  font-size: 11px; color: var(--tx-2); background: transparent;
  border: 1px dashed var(--line-hi, var(--line)); border-radius: 6px;
  padding: 5px 11px; cursor: pointer; transition: color .15s, border-color .15s;
}
.mg-tool:hover { color: var(--cyan); border-color: rgba(53,224,255,.45); }
.mg-foot { font-size: 10px; color: var(--tx-3); line-height: 1.6; margin: 0; border-top: 1px solid var(--line); padding-top: 11px; }

@media (max-width: 900px) {
  .mg-cards { grid-template-columns: minmax(0, 1fr); }
  .mode-gate { padding: 22px 18px 18px; }
}