/* ==========================================================================
   秋泽吉数 · view-roll 视图专属视觉（vr- 前缀，防与共享层撞名）
   --------------------------------------------------------------------------
   站点专属：摇号号码球 / 走势图格子 / 运势卡等"非共享"视觉。
   全部取值走 design-tokens.css 令牌，禁止裸色值 / 硬编码字号。
   ========================================================================== */

/* ==========================================================================
   1. 号码球（vr-tile · vr-num · vr-ord）
   --------------------------------------------------------------------------
   用共享层不存在的视觉：双色球/大乐透的圆形球体、渐变、阴影。
   vr-tile = 容器；vr-num = 数字区；vr-ord = 序号标签。
   修饰态：.rolling（摇号动画中）、.gold（特号）、.red/.blue（红蓝球）。
   ========================================================================== */
.vr-tile{
  position:relative;
  display:inline-flex;flex-direction:column;align-items:center;gap:var(--sp-1);
  width:64px;height:64px;
  border-radius:var(--r-full);
  background:var(--grad-brand);
  box-shadow:var(--shadow-md);
  color:var(--ink-invert);
  user-select:none;
}
.vr-num{
  font-family:"Noto Serif SC",serif;
  font-size:var(--fs-2xl);font-weight:var(--fw-heavy);
  line-height:1;
  letter-spacing:var(--ls-tight);
}
.vr-ord{
  font-size:var(--fs-xs);
  color:var(--ink-invert);
  opacity:.78;
  line-height:1;
}
/* 特号（金色） */
.vr-tile.gold{
  background:var(--grad-sheen), var(--gold-soft);
  color:var(--gold-ink);
  box-shadow:var(--shadow-md), inset 0 0 0 1px var(--gold);
}
.vr-tile.gold .vr-ord{ color:var(--gold-ink); }
/* 双色球·红球 */
.vr-tile.red{
  background:linear-gradient(135deg, var(--red), color-mix(in srgb, var(--red) 82%, var(--ink-strong)));
  color:var(--ink-invert);
  box-shadow:var(--shadow-md);
}
.vr-tile.red .vr-ord{ color:var(--ink-invert); }
/* 双色球·蓝球 */
.vr-tile.blue{
  background:linear-gradient(135deg, var(--blue), color-mix(in srgb, var(--blue) 82%, var(--ink-strong)));
  color:var(--ink-invert);
  box-shadow:var(--shadow-md);
}
.vr-tile.blue .vr-ord{ color:var(--ink-invert); }
/* 摇号动画（滚动中） */
.vr-tile.rolling{ /* 落盘 fx-shake 在共享 motion.css（dsh-fx-shake），此处仅保留令牌感 */ }

/* 球之间的 + 分隔符 */
.vr-sep{
  display:inline-flex;align-items:center;justify-content:center;
  width:var(--sp-8);height:var(--sp-8);
  border-radius:var(--r-full);
  background:var(--brand-softer);
  color:var(--brand);
  font-size:var(--fs-xl);font-weight:var(--fw-bold);
  box-shadow:var(--shadow-sm);
}

/* ==========================================================================
   2. 走势图格子（vr-trend-cell / vr-trend-row 用于 calc/geo 类网格）
   ========================================================================== */
.vr-trend-cell{
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--r-sm);
  background:var(--card);
  border:1px solid var(--line-soft);
  font-variant-numeric:tabular-nums;
  color:var(--ink);
}
.vr-trend-cell.vr-hot{ background:var(--brand-soft); color:var(--brand-ink); font-weight:var(--fw-bold); }
.vr-trend-cell.vr-miss{ color:var(--dim-2); }

/* ==========================================================================
   3. 每日运势卡（vr-fortune-* ）
   ========================================================================== */
.vr-fortune-card{ /* 在 dsh-card 之上仅补专属视觉：顶部渐变条 */ position:relative;overflow:hidden; }
.vr-fortune-card::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--grad-brand);
}
.vr-fortune-stats{ gap:var(--sp-5); }
.vr-yi-row,.vr-ji-row{ margin-top:var(--sp-3); }

/* ==========================================================================
   4. 历史开奖列表（保留既有 ID，只补 vr- 专用项）
   ========================================================================== */
.vr-his-empty{ padding:var(--sp-5); text-align:center; color:var(--dim); font-size:var(--fs-md); }

/* ==========================================================================
   5. 走势/分析视图容器（trend chart 容器间距）
   ========================================================================== */
.vr-chart-wrap{ padding:var(--sp-3) 0; }