/* ============================================================
   命运骰（赌场里那台三颗骰子的台）
   ------------------------------------------------------------
   外壳沿用巫师幸运轮那一套（.wizard-slot* 那几个类：余额条、档位、
   按钮、结果格、历史条），这一份只补这台自己的两样：
     · 押法的小牌（.fate-chip / .fate-totals）
     · 三颗骰子与它们的转动（.fate-die / .fate-tray）
   ============================================================ */

/* ── 押什么：一节小标题 + 一排小牌 ── */
.fate-sec-cap {
  margin: var(--sp-3) 0 4px;
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  color: var(--ws-dim, #a99bc4);
}
.fate-sec-cap.sub { margin-top: var(--sp-2); }
.fate-bets { display: block; }
.fate-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.fate-totals { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 5px; }

.fate-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 62px;
  padding: 6px 10px 7px;
  font-family: var(--font-body);
  color: var(--ws-dim, #a99bc4);
  background: linear-gradient(180deg, rgba(34, 20, 55, 0.9), rgba(20, 12, 34, 0.92));
  border: 1px solid rgba(86, 52, 125, 0.7);
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.16s ease, color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}
.fate-totals .fate-chip { min-width: 0; padding: 5px 2px 6px; }
.fate-chip:hover:not(:disabled) { color: var(--ws-gold-hi, #ffe5a0); border-color: rgba(228, 188, 101, 0.62); }
.fate-chip.is-on {
  color: #2a1b08;
  background: linear-gradient(180deg, var(--ws-gold-hi, #ffe5a0), var(--ws-gold, #e4bc65));
  border-color: var(--ws-gold-hi, #ffe5a0);
  box-shadow: 0 0 0 1px rgba(255, 229, 160, 0.5), 0 0 18px rgba(228, 188, 101, 0.42);
  transform: translateY(-2px);
}
.fate-chip.is-on .fate-chip-sub { color: rgba(42, 27, 8, 0.72); }
.fate-chip:disabled { cursor: not-allowed; }
.fate-chip.is-locked:not(.is-on) { opacity: 0.45; }
.fate-chip-lb { font-size: var(--fs-s); letter-spacing: 0.06em; }
.fate-totals .fate-chip-lb { font-size: var(--fs-xs); }
.fate-chip-sub { font-size: 10px; letter-spacing: 0.04em; color: rgba(169, 155, 196, 0.8); }

/* ── 三颗骰子 ── */
.fate-tray {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  margin: var(--sp-3) auto var(--sp-2);
  padding: var(--sp-4) var(--sp-3);
  border: 1px solid rgba(228, 188, 101, 0.34);
  border-radius: 10px;
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(86, 52, 125, 0.4), transparent 66%),
    linear-gradient(180deg, #1d1233, #140c25 92%);
  box-shadow: inset 0 0 26px rgba(0, 0, 0, 0.6), 0 6px 18px rgba(0, 0, 0, 0.45);
}

/* 一颗骰子：米白骰面 + 九个格子里点几颗黑点（纯 CSS，没有图） */
.fate-die {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 3px;
  width: 62px;
  height: 62px;
  padding: 7px;
  border-radius: 12px;
  background:
    radial-gradient(70% 60% at 32% 18%, rgba(255, 255, 255, 0.9), transparent 62%),
    linear-gradient(160deg, #f7f1e4, #d8c9ab 92%);
  border: 1px solid rgba(96, 66, 24, 0.5);
  box-shadow:
    0 5px 14px rgba(0, 0, 0, 0.55),
    inset 0 -3px 6px rgba(120, 92, 44, 0.28),
    inset 0 2px 0 rgba(255, 255, 255, 0.75);
}
.fate-die i {
  border-radius: 50%;
  background: #2b1d3a;
  box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.28), 0 1px 2px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity 0.08s linear;
}
.fate-die i.on { opacity: 1; }

/* 转起来：整颗骰子在晃、在翻 */
@keyframes fateTumble {
  0%   { transform: translateY(0) rotate(0deg) scale(1); }
  25%  { transform: translateY(-9px) rotate(-14deg) scale(1.06); }
  50%  { transform: translateY(2px) rotate(9deg) scale(0.97); }
  75%  { transform: translateY(-5px) rotate(-6deg) scale(1.03); }
  100% { transform: translateY(0) rotate(0deg) scale(1); }
}
.fate-die.rolling { animation: fateTumble 360ms ease-in-out infinite; }

/* 停稳那一下：弹一弹 */
@keyframes fateSettle {
  0% { transform: scale(0.9); }
  45% { transform: scale(1.12); }
  100% { transform: scale(1); }
}
.fate-die.settled { animation: fateSettle 420ms cubic-bezier(0.16, 1, 0.3, 1); }

@media (max-width: 560px) {
  .fate-die { width: 52px; height: 52px; padding: 6px; gap: 2px; }
  .fate-tray { gap: var(--sp-3); padding: var(--sp-2); margin: var(--sp-2) auto var(--sp-1); }
  /* 十六个点数挤成 6 列（3 行）——4 列要占 4 行，底下那颗【掷骰】会被托盘顶出屏幕 */
  .fate-totals { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
  .fate-totals .fate-chip { padding: 4px 1px 5px; }
  .fate-chip { min-width: 52px; padding: 5px 8px 6px; }
  .fate-sec-cap { margin: var(--sp-2) 0 3px; }
  .fate-chip-lb { font-size: var(--fs-xs); }
  .fate-totals .fate-chip-lb { font-size: 11px; }
  .fate-chip-sub { font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .fate-die.rolling, .fate-die.settled { animation: none; }
  .fate-die i { transition: none; }
  .fate-chip { transition: none; }
}

/* 规则纸里那两栏表比别处的多一列（概率 / 返还率），收窄一点 */
.sheet .wizard-slot-rule-row.fate,
.sheet .wizard-slot-rule-head.fate { grid-template-columns: 1fr 52px 62px 62px; }