/* ==========================================================================
   秋泽吉数 · 网页前端 · C 流视图专属视觉（刮刮乐 / 命盘 / 广告 / 音乐）
   --------------------------------------------------------------------------
   新建文件（C 流写入域）。只放这四个视图的专属视觉。
   纪律：
     1. 全部取值走 design-tokens.css 令牌，本文件不出现任何硬编码色值
     2. 类名统一 vm- 前缀，避免撞名
     3. 间距严格 4px 阶梯（--sp-*）；阴影只用 --shadow-*；圆角嵌套递减
     4. 单一主题：无 data-theme / 暗色分支
   交接说明：八字排盘表的新结构（.vm-ming-table 一族）与音乐卡卡片化
   骨架（#musicCard）在 index.html 静态区，由 BASE 流挂类；样式已按
   目标结构备好。
   ========================================================================== */

/* ==========================================================================
   A. 刮刮乐（#view-ggl 作用域）
   ========================================================================== */

/* 票种选择卡片（由 ggl.js 动态生成 .ggl-ticket → 改为 vm-ticket） */
.vm-tickets{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: var(--sp-2);
}
.vm-ticket{
  cursor: pointer;
  min-width: 0;
  padding: var(--sp-3);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  background: var(--card);
  text-align: center;
  transition: border-color var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
  user-select: none;
  -webkit-user-select: none;
}
.vm-ticket:hover{ border-color: var(--brand-line); box-shadow: var(--shadow-xs); }
.vm-ticket:active{ transform: scale(.985); }
.vm-ticket b{
  display: block;
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--ink);
  line-height: var(--lh-snug);
}
.vm-ticket small{
  display: block;
  margin-top: var(--sp-1);
  font-size: var(--fs-xs);
  color: var(--dim);
  line-height: var(--lh-snug);
}
.vm-ticket.on{
  background: var(--brand-soft);
  border-color: var(--brand-line);
  box-shadow: var(--shadow-sm);
}
.vm-ticket.on b{ color: var(--brand-ink); }
.vm-ticket.on small{ color: var(--brand); }

/* 刮卡票面：自定义涂层纹理底，圆角嵌套（外层卡 r-xl + 内边距 sp-4 → 内层 r-inset-lg） */
.vm-ticket-card{
  position: relative;
  overflow: hidden;
  padding: var(--sp-4);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-xl);
  background: var(--bg-2);
  box-shadow: var(--shadow-sm);
}
.vm-ticket-card .vm-tc-body{ position: relative; z-index: 1; }
.vm-ticket-card.win-card{ border-color: var(--gold); box-shadow: var(--shadow-md); }
.vm-ticket-card.lose-card{ border-color: var(--line-soft); }

.vm-tc-issuer{
  font-size: var(--fs-xs);
  color: var(--dim-2);
  letter-spacing: var(--ls-wide);
}
.vm-tc-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-1);
}
.vm-tc-head b{
  font-size: var(--text-heading-size);
  font-weight: var(--text-heading-weight);
  color: var(--brand);
  letter-spacing: var(--ls-wide);
}
.vm-tc-head span{ font-size: var(--fs-xs); color: var(--dim); }
.vm-tc-rule{
  margin-top: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-left: 2px solid var(--brand-line);
  border-radius: 0 var(--r-xs) var(--r-xs) 0;
  background: var(--brand-softer);
  font-size: var(--fs-sm);
  color: var(--dim);
  line-height: var(--lh);
}
.vm-zone-title{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--brand-ink);
  letter-spacing: var(--ls-wide);
}
.vm-zone-title small{ font-size: var(--fs-xs); font-weight: var(--fw-normal); color: var(--dim-2); }

.vm-winzone{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}
.vm-grid{
  display: grid;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}

/* 刮格：圆形刮开单元，银层由 canvas 覆盖（ggl.js 生成） */
.vm-cell{
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--r-full);
  background: var(--card);
  box-shadow: var(--shadow-inset);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.vm-cell::after{
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--r-full);
  background: var(--grad-sheen);
  pointer-events: none;
  z-index: 2;
}
.vm-cell .sym{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xl);
  font-weight: var(--fw-heavy);
  color: var(--brand);
  opacity: 0;
  transform: scale(.4) rotate(-12deg);
  transition: opacity var(--dur-slow) var(--ease-decelerate),
              transform var(--dur-slow) var(--ease-decelerate);
  pointer-events: none;
  z-index: 4;
}
.vm-cell .prize{
  position: absolute;
  left: 0; right: 0;
  bottom: calc(0px - var(--sp-4));
  text-align: center;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--gold-ink);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  white-space: nowrap;
  z-index: 4;
}
.vm-cell.revealed::after{ display: none; }
.vm-cell.revealed .sym{ opacity: 1; transform: scale(1) rotate(0); }
.vm-cell.win{
  border: 2px solid var(--gold);
  background: var(--gold-soft);
  box-shadow: var(--shadow-sm);
}
.vm-cell.win-hint{ background: var(--brand-softer); }

/* 中奖结果条（#gglPrize：className 由 JS 直接设置） */
.vm-prize{
  display: block;
  margin-top: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-lg);
  text-align: center;
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  line-height: var(--lh-snug);
  background: var(--bg-sunk);
  border: 1px solid var(--line-soft);
  color: var(--dim);
}
.vm-prize.win{
  background: var(--gold-soft);
  border-color: var(--gold);
  color: var(--gold-ink);
  box-shadow: var(--shadow-sm);
}

/* 中奖粒子（结构不变，token 化配色） */
.vm-burst{ position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.vm-burst .spark{
  position: absolute;
  width: 11px; height: 11px;
  border-radius: var(--r-full);
  background: radial-gradient(circle, var(--gold) 20%, var(--orange) 70%);
  box-shadow: 0 0 10px var(--brand-ring);
  animation: sparkFly .95s ease-out forwards;
}
.vm-burst .spark.sad{
  width: 9px; height: 9px;
  background: radial-gradient(circle, var(--dim-2), var(--dim));
  box-shadow: none;
  animation: sparkFall 1.15s ease-in forwards;
}

/* 战绩条 */
.vm-stat-line{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--dim);
}
.vm-stat-line b{ color: var(--brand); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   B. 命盘（#view-ming 作用域）
   ========================================================================== */

/* 宜忌提示框：括住 #rYiJiVal 的静态 .yi 容器 */
.vm-yi{
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--sp-2);
  margin: var(--sp-3) 0;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  background: var(--brand-softer);
  font-size: var(--fs-sm);
  color: var(--dim);
  line-height: var(--lh);
}
.vm-yi b{ color: var(--brand-ink); font-weight: var(--fw-bold); letter-spacing: var(--ls-wide); }

/* 宜忌值标签（JS 直接设置 #rYiJiVal 的 className 为这些类） */
.vm-tag{
  display: inline-flex;
  align-items: center;
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
}
.vm-tag-y{ background: var(--green-soft);  color: var(--green-ink); }
.vm-tag-j{ background: var(--red-soft);    color: var(--red-ink); }
.vm-tag-p{ background: var(--bg-sunk);     color: var(--dim); }

/* 八字四柱排盘表（新结构由 BASE 挂入 #mingResult；样式先备） */
table.vm-ming-table{ font-size: var(--fs-md); }
.vm-pillars{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-2);
}
.vm-pillar{
  padding: var(--sp-3) var(--sp-1);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  background: var(--card);
  text-align: center;
}
.vm-pillar-k{
  font-size: var(--fs-xs);
  color: var(--dim-2);
  letter-spacing: var(--ls-wide);
}
/* 五行天干地支珠子：配色全部走语义色令牌 */
.vm-bead{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--sp-9);
  height: var(--sp-9);
  border-radius: var(--r-full);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: 1;
}
.vm-pillar .vm-bead{ margin-top: var(--sp-2); }
.vm-bead-wx-木{ background: var(--green-soft);  color: var(--green-ink); }
.vm-bead-wx-火{ background: var(--red-soft);    color: var(--red-ink); }
.vm-bead-wx-土{ background: var(--gold-soft);   color: var(--gold-ink); }
.vm-bead-wx-金{ background: var(--orange-soft); color: var(--orange-ink); }
.vm-bead-wx-水{ background: var(--blue-soft);   color: var(--blue-ink); }
.vm-bead-wx-卦{ background: var(--purple-soft); color: var(--purple-ink); }

/* 命盘解读行 */
.vm-read{
  font-size: var(--fs-sm);
  color: var(--dim);
  line-height: var(--lh-loose);
}
.vm-read + .vm-read{ margin-top: var(--sp-2); }
.vm-read b{ color: var(--brand-ink); font-weight: var(--fw-bold); }

/* 幸运池数字珠 */
.vm-luck-pool{
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}
.vm-luck{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--sp-8);
  height: var(--sp-8);
  border-radius: var(--r-full);
  background: var(--grad-brand);
  color: var(--ink-invert);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  box-shadow: var(--shadow-xs);
}

/* ==========================================================================
   C. 广告位（renderAds 动态渲染）
   ========================================================================== */
.vm-ad-wrap{ display: flex; flex-direction: column; gap: var(--sp-3); }
.vm-ad{
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-soft);
  background: var(--card);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition: box-shadow var(--dur) var(--ease-decelerate),
              transform var(--dur) var(--ease-decelerate),
              border-color var(--dur-fast) var(--ease-standard);
}
.vm-ad:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--brand-line);
}
.vm-ad:active{ transform: scale(.99); }
.vm-ad img{
  display: block;
  width: 100%;
  border-radius: var(--r-inset-sm);
}
.vm-ad-tag{
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-2);
  padding: 0 var(--sp-2);
  height: 18px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--r-xs);
  background: var(--overlay);
  color: var(--ink-invert);
  font-size: var(--fs-2xs);
  line-height: 1;
  pointer-events: none;
}

/* ==========================================================================
   D. 音乐播放器（静态骨架 #musicCard 卡片化 + 交互修复）
   ========================================================================== */
.vm-player{
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
}
.vm-player-icon{
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--sp-10);
  height: var(--sp-10);
  flex: none;
  border-radius: var(--r-lg);
  background: var(--grad-brand);
  color: var(--ink-invert);
  box-shadow: var(--shadow-brand);
}
.vm-player-icon svg{
  width: var(--sp-5);
  height: var(--sp-5);
  fill: currentColor;
}
.vm-player-meta{ flex: 1 1 auto; min-width: 0; }
.vm-player-name{
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--ink-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vm-player-sub{
  margin-top: var(--sp-1);
  font-size: var(--fs-sm);
  color: var(--dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ==========================================================================
   E. 无障碍：尊重 prefers-reduced-motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  .vm-ticket, .vm-ticket-card, .vm-cell, .vm-cell .sym,
  .vm-ad, .vm-prize{
    transition:none !important;
  }
  .vm-burst .spark, .vm-burst .spark.sad{
    animation: none !important;
  }
}