/* ============================================================
   心跳游走球（赌场里那口井：往下掉、随时骑扫把飞走）
   ------------------------------------------------------------
   外壳沿用巫师幸运轮那一套（.wizard-slot 的紫金面板、余额条、按钮、
   结果格、历史条），这一份只补这口井自己的东西：
     · 下注那一栏（.hb-bet / .hb-step / .hb-b）
     · 那口井与下落动线（.hb-stage / .hb-lines / .hb-streaks / .hb-faller）
     · 三套动画：下坠、被砸（.is-hit）、骑扫把飞走（.is-escape）
     · 读数与那根进度（.hb-hud / .hb-gauge）
     · 结算纸上公布高度线的那一块（.hb-reveal）

   配色沿用 .wizard-slot 里那几个变量（--ws-*），不另起一套。
   ============================================================ */

.hb-panel { max-width: 560px; }
.hb-brief { margin: var(--sp-2) 0 0; font-size: var(--fs-s); line-height: 1.75; color: var(--ws-dim); }

/* ── 下注那一栏 ── */
.hb-bet {
  margin: var(--sp-3) 0 var(--sp-2);
  padding: var(--sp-3) var(--sp-3) var(--sp-2);
  text-align: center;
  border: 1px solid rgba(228, 188, 101, 0.34);
  border-radius: 10px;
  background:
    radial-gradient(90% 62% at 50% 0%, rgba(86, 52, 125, 0.34), transparent 72%),
    linear-gradient(180deg, rgba(33, 20, 54, 0.9), rgba(15, 9, 27, 0.94));
  box-shadow: inset 0 1px 0 rgba(255, 229, 160, 0.08), inset 0 0 26px rgba(0, 0, 0, 0.5);
}
.hb-bet-cap { display: block; font-size: var(--fs-xs); letter-spacing: 0.2em; color: var(--ws-dim); }
.hb-step { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 8px 0 7px; }
.hb-bet-n {
  min-width: 118px;
  font-family: var(--font-hand);
  font-size: var(--fs-xl);
  line-height: 1.2;
  color: var(--ws-gold-hi);
  text-shadow: 0 0 16px rgba(228, 188, 101, 0.3), 0 2px 3px rgba(0, 0, 0, 0.9);
  font-variant-numeric: tabular-nums;
}
.hb-b {
  width: 38px; height: 32px;
  padding: 0;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  color: var(--ws-dim);
  background: linear-gradient(180deg, rgba(38, 23, 62, 0.9), rgba(18, 11, 32, 0.94));
  border: 1px solid rgba(228, 188, 101, 0.42);
  border-radius: 6px;
  cursor: pointer;
  transition: color 0.14s ease, background 0.14s ease, border-color 0.14s ease, transform 0.12s ease;
}
.hb-b:hover { color: var(--ws-gold-hi); border-color: var(--ws-gold-hi); background: linear-gradient(180deg, rgba(58, 36, 92, 0.94), rgba(24, 14, 42, 0.96)); }
.hb-b:active { transform: translateY(1px); }
.hb-bet-have { display: block; font-size: var(--fs-xs); color: var(--ws-dim); }
.hb-hint { margin: var(--sp-2) 0 0; text-align: center; font-size: var(--fs-xs); line-height: 1.7; color: var(--ws-dim); }

/* 主按钮（买定离手 / 骑上扫把飞走）比别处宽一点：这两下是这个玩法唯一的动作 */
.btn.wizard-slot-go.hb-go,
.btn.wizard-slot-go.hb-escape { min-width: 240px; }
.btn.wizard-slot-go.hb-escape {
  background: linear-gradient(180deg, #ffeeb8, #e9bf63 58%, #a9761f);
  box-shadow: 0 3px 0 rgba(90, 62, 20, 0.55), 0 10px 22px rgba(0, 0, 0, 0.5), 0 0 26px rgba(228, 188, 101, 0.28);
  letter-spacing: 0.12em;
}
.btn.wizard-slot-go.hb-escape.is-locked { filter: saturate(0.5) brightness(0.72); }

/* ── 那口井 ── */
.hb-stage {
  position: relative;
  overflow: hidden;
  height: clamp(210px, 42vh, 300px);
  margin: var(--sp-3) 0 var(--sp-2);
  border: 1px solid rgba(228, 188, 101, 0.34);
  border-radius: 12px;
  background:
    radial-gradient(70% 46% at 50% 34%, rgba(86, 52, 125, 0.34), transparent 68%),
    linear-gradient(180deg, #0a0616, #17102c 44%, #06030e);
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.78), inset 0 14px 26px rgba(0, 0, 0, 0.6);
  transition: box-shadow 0.3s ease;
}
/* 井壁两边那一线微光，让人看出这是个竖着的筒 */
.hb-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(228, 188, 101, 0.14) 0 1px, transparent 1px) 8% 0 / 1px 100% no-repeat,
    linear-gradient(90deg, rgba(228, 188, 101, 0.14) 0 1px, transparent 1px) 92% 0 / 1px 100% no-repeat;
}
/* 四角压暗（vignette）；被砸那一下会转成暗红 */
.hb-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(88% 70% at 50% 44%, transparent 40%, rgba(4, 2, 10, 0.9) 100%);
  transition: background 0.22s ease;
}

/* 下坠的动线：一层往上跑的水平线（人往下掉，世界往上走）。
 * ⚠️ 这里的快慢要跟下落速度对上（FALL_PER_SEC，data/bludger.js）：
 *    15 米/秒 ≈ 每 0.28 秒掠过一条线（10 米/秒 时是 0.42 秒）——
 *    改速度就顺手改这三个时长，不然井里的世界跑得比人慢。 */
.hb-lines {
  position: absolute;
  left: 0; right: 0; top: -50%; bottom: -50%;
  background: repeating-linear-gradient(180deg,
    rgba(228, 188, 101, 0.15) 0 2px,
    transparent 2px 44px);
}
@keyframes hbFall { to { background-position-y: -44px; } }
.hb-stage.is-falling .hb-lines { animation: hbFall 0.28s linear infinite; }

/* 几条掠过的风线（比背景线快、长短不一，看着才有速度） */
.hb-streaks { position: absolute; inset: 0; pointer-events: none; }
.hb-streak {
  position: absolute;
  top: 30%;
  width: 2px;
  height: 62px;
  border-radius: 2px;
  background: linear-gradient(180deg, transparent, rgba(255, 229, 160, 0.32));
  opacity: 0;
}
@keyframes hbStreak {
  0%   { transform: translateY(120px); opacity: 0; }
  22%  { opacity: 0.9; }
  100% { transform: translateY(-320px); opacity: 0; }
}
.hb-stage.is-falling .hb-streak { animation: hbStreak 0.6s linear infinite; }
.hb-streak.s0 { left: 16%; height: 54px; animation-delay: 0s; }
.hb-streak.s1 { left: 30%; height: 78px; animation-delay: 0.22s; }
.hb-streak.s2 { left: 44%; height: 46px; animation-delay: 0.44s; }
.hb-streak.s3 { left: 58%; height: 84px; animation-delay: 0.12s; }
.hb-streak.s4 { left: 72%; height: 58px; animation-delay: 0.36s; }
.hb-streak.s5 { left: 86%; height: 70px; animation-delay: 0.58s; }

/* ── 掉下去的那个人 ── */
.hb-faller {
  position: absolute;
  left: 50%;
  top: 32%;
  z-index: 3;
  transform: translate(-50%, -50%);
}
.hb-wizard {
  display: block;
  font-size: 46px;
  line-height: 1;
  filter: drop-shadow(0 0 12px rgba(255, 229, 160, 0.5)) drop-shadow(0 8px 10px rgba(0, 0, 0, 0.75));
  animation: hbSway 2.4s ease-in-out infinite;
}
@keyframes hbSway {
  0%, 100% { transform: rotate(-3.5deg); }
  50% { transform: rotate(3.5deg); }
}
/* 身后那道光（拖在头顶上面：人是往下掉的） */
.hb-trail {
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 12px;
  height: 86px;
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  border-radius: 6px;
  background: linear-gradient(180deg, transparent, rgba(255, 229, 160, 0.42) 76%, rgba(255, 229, 160, 0.72));
  filter: blur(2px);
}
.hb-stage.is-falling .hb-trail { animation: hbTrailPulse 0.48s ease-in-out infinite; }
@keyframes hbTrailPulse {
  0%, 100% { transform: translateX(-50%) scaleY(0.82); opacity: 0.62; }
  50% { transform: translateX(-50%) scaleY(1.12); opacity: 0.95; }
}
/* 扫把：平时收着，飞走那一下才抽出来踩在脚下 */
.hb-broom {
  position: absolute;
  left: 50%;
  top: 74%;
  font-size: 30px;
  line-height: 1;
  transform: translateX(-50%) rotate(-16deg);
  opacity: 0;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.7));
}

/* ── 游走球（平时藏着；砸中那一下才冲进来） ── */
.hb-ball {
  position: absolute;
  left: 50%;
  top: 32%;
  z-index: 4;
  width: 52px;
  height: 52px;
  margin: -26px 0 0 -26px;
  opacity: 0;
}
.hb-ball-core {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 26%, rgba(210, 210, 226, 0.5), transparent 42%),
    radial-gradient(circle at 36% 32%, #6e6e80, #33333f 46%, #08080f 88%);
  box-shadow:
    0 0 26px rgba(0, 0, 0, 0.85),
    inset -4px -6px 10px rgba(0, 0, 0, 0.8),
    inset 0 2px 3px rgba(255, 255, 255, 0.16);
}
/* 球上那几颗铆钉 */
.hb-ball-core::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 26% 62%, #14141c 0 3px, transparent 3.5px),
    radial-gradient(circle at 68% 32%, #14141c 0 3px, transparent 3.5px),
    radial-gradient(circle at 62% 72%, #14141c 0 2.5px, transparent 3px);
}
@keyframes hbSlam {
  0%   { transform: translateY(-160px) scale(0.5) rotate(-34deg); opacity: 0; }
  26%  { opacity: 1; }
  62%  { transform: translateY(0) scale(1.2) rotate(9deg); }
  78%  { transform: translateY(0) scale(0.93) rotate(-4deg); }
  100% { transform: none; opacity: 1; }
}
.hb-stage.is-hit .hb-ball { animation: hbSlam 560ms cubic-bezier(0.2, 0.9, 0.25, 1) both; opacity: 1; }
/* 撞上那一下向外的冲击环 */
.hb-impact {
  position: absolute;
  left: 50%;
  top: 32%;
  z-index: 3;
  width: 22px; height: 22px;
  margin: -11px 0 0 -11px;
  border: 2px solid rgba(255, 229, 160, 0.9);
  border-radius: 50%;
  opacity: 0;
}
@keyframes hbImpact {
  0%   { transform: scale(0.3); opacity: 0; }
  26%  { opacity: 1; }
  100% { transform: scale(7.2); opacity: 0; }
}
.hb-stage.is-hit .hb-impact { animation: hbImpact 620ms ease-out both; }
/* 整口井跟着挨了一下 */
@keyframes hbShake {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  14%  { transform: translate3d(-6px, 3px, 0) rotate(-0.5deg); }
  32%  { transform: translate3d(7px, -3px, 0) rotate(0.5deg); }
  52%  { transform: translate3d(-5px, -2px, 0) rotate(-0.35deg); }
  74%  { transform: translate3d(4px, 2px, 0) rotate(0.25deg); }
}
.hb-stage.is-hit { animation: hbShake 620ms cubic-bezier(0.36, 0.07, 0.19, 0.97); }
.hb-stage.is-hit::after { background: radial-gradient(88% 70% at 50% 44%, rgba(120, 26, 22, 0.42) 12%, rgba(8, 2, 4, 0.94) 100%); }
/* 被砸中之后那个人就不在了 */
.hb-wizard.is-out { opacity: 0; }

/* ── 骑扫把飞走 ── */
@keyframes hbFlyUp {
  0%   { transform: translate(-50%, -50%); opacity: 1; }
  16%  { transform: translate(-50%, -50%) translateY(12px); }
  100% { transform: translate(-50%, -50%) translateY(-300px) rotate(-13deg) scale(0.5); opacity: 0; }
}
.hb-stage.is-escape .hb-faller { animation: hbFlyUp 760ms cubic-bezier(0.32, 0.72, 0.2, 1) both; }
.hb-stage.is-escape .hb-wizard { animation: none; }
.hb-stage.is-escape .hb-trail { height: 170px; opacity: 1; }
@keyframes hbBroomPop {
  0%   { transform: translateX(-50%) rotate(-16deg) scale(0.4); opacity: 0; }
  60%  { transform: translateX(-50%) rotate(-16deg) scale(1.15); opacity: 1; }
  100% { transform: translateX(-50%) rotate(-16deg) scale(1); opacity: 1; }
}
.hb-stage.is-escape .hb-broom { animation: hbBroomPop 380ms cubic-bezier(0.34, 1.56, 0.64, 1) both; opacity: 1; }
/* 往上去的时候上面亮起来（井口那点光） */
.hb-stage.is-escape { box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.7), inset 0 46px 60px rgba(255, 229, 160, 0.16); }
.hb-stage.is-escape .hb-lines { animation: none; }
.hb-stage.is-escape .hb-streak { animation: none; opacity: 0; }

/* ── 读数：已下坠 / 当前倍率 / 现在飞走能拿回 ── */
.hb-hud { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); margin: var(--sp-3) 0 2px; }
.hb-hud-cell { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.hb-hud-k { font-size: var(--fs-xs); letter-spacing: 0.12em; color: var(--ws-dim); text-align: center; }
.hb-hud-v {
  font-family: var(--font-hand);
  font-size: var(--fs-l);
  line-height: 1.15;
  color: var(--ws-text);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.hb-hud-v.big { font-size: var(--fs-xl); color: var(--ws-gold-hi); text-shadow: 0 0 16px rgba(228, 188, 101, 0.34); }
/* 到回本线之后，倍率那格换成金色——「再往下就是赚的了」 */
.hb-hud-v.is-over { color: var(--ws-gold-hi); text-shadow: 0 0 14px rgba(228, 188, 101, 0.34); }

/* ── 那根进度：0 ~ 2500 米，4% 处是回本线 ── */
.hb-gauge {
  position: relative;
  height: 10px;
  margin: var(--sp-2) 0 var(--sp-4);
  border: 1px solid rgba(228, 188, 101, 0.28);
  border-radius: 999px;
  background: rgba(6, 3, 14, 0.72);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.7);
}
.hb-gauge-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #6a4ba0, var(--ws-gold) 58%, #ff9b5a);
  box-shadow: 0 0 14px rgba(228, 188, 101, 0.42);
  transition: width 0.12s linear;
}
.hb-gauge-tick { position: absolute; left: 4%; top: -4px; bottom: -4px; width: 2px; background: rgba(255, 229, 160, 0.85); box-shadow: 0 0 8px rgba(255, 229, 160, 0.6); }
.hb-gauge-tick i { position: absolute; inset: 0; }
.hb-gauge-tick em {
  position: absolute;
  left: 6px;
  top: 16px;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 9px;
  letter-spacing: 0.06em;
  white-space: nowrap;
  color: rgba(255, 229, 160, 0.66);
}
.hb-live {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  color: #ffd98a;
}
.hb-live::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #ffd98a;
  box-shadow: 0 0 10px rgba(255, 217, 138, 0.8);
  animation: hbPulse 1.1s ease-in-out infinite;
}
@keyframes hbPulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
.hb-warn { margin: var(--sp-1) 0 0; text-align: center; font-size: var(--fs-xs); line-height: 1.7; color: var(--ws-dim); }

/* ── 最近几局：落点 / 高度线 / 这一局的账 ── */
.hb-log-row {
  display: grid;
  grid-template-columns: 44px 1fr 1fr auto;
  align-items: center;
  gap: var(--sp-2);
  padding: 1px 0 1px 5px;
  border-left: 2px solid transparent;
  font-size: var(--fs-xs);
  line-height: 1.55;
}
.hb-log-row.win { border-left-color: var(--ws-gold); background: rgba(228, 188, 101, 0.06); }
.hb-log-kind { color: var(--ws-dim); }
.hb-log-row.win .hb-log-kind { color: var(--ws-gold-hi); }
.hb-log-at { color: var(--ws-text); font-variant-numeric: tabular-nums; }
.hb-log-line { color: var(--ws-dim); font-variant-numeric: tabular-nums; }
.hb-log-net { font-family: var(--font-hand); text-align: right; white-space: nowrap; }
.hb-log-net.up { color: var(--ws-gold-hi); }
.hb-log-net.down { color: #d6a3a0; }

/* ── 结算纸上公布高度线的那一块 ── */
.hb-reveal {
  margin: var(--sp-3) 0 0;
  padding: var(--sp-3);
  text-align: center;
  border: 1px solid rgba(228, 188, 101, 0.34);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(33, 20, 54, 0.72), rgba(15, 9, 27, 0.82));
}
.hb-reveal-cap { display: block; font-size: var(--fs-xs); letter-spacing: 0.2em; color: var(--ws-dim); }
.hb-reveal-n {
  display: block;
  margin: 2px 0 6px;
  font-family: var(--font-hand);
  font-size: clamp(26px, 7vw, 34px);
  line-height: 1.15;
  color: var(--ws-gold-hi);
  text-shadow: 0 0 20px rgba(228, 188, 101, 0.34);
  font-variant-numeric: tabular-nums;
}
.hb-reveal-note { display: block; font-size: var(--fs-xs); line-height: 1.7; color: var(--ws-dim); }

/* 规则纸里那张表只有三列 */
.sheet .wizard-slot-rule-head.hb,
.sheet .wizard-slot-rule-row.hb { grid-template-columns: 1fr 62px 1fr; }

/* ── 窄屏 ── */
@media (max-width: 560px) {
  .hb-stage { height: clamp(190px, 38vh, 250px); }
  .hb-wizard { font-size: 40px; }
  .hb-bet-n { min-width: 96px; }
  .btn.wizard-slot-go.hb-go,
  .btn.wizard-slot-go.hb-escape { min-width: 0; width: 100%; }
  .hb-hud-v { font-size: var(--fs-m); }
  .hb-hud-v.big { font-size: var(--fs-l); }
  .hb-log-row { grid-template-columns: 38px 1fr auto; gap: 4px; }
  .hb-log-line { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hb-stage.is-falling .hb-lines,
  .hb-stage.is-falling .hb-streak,
  .hb-stage.is-falling .hb-trail,
  .hb-wizard,
  .hb-live::before { animation: none; }
  /* 被砸 / 飞走这两下还是要有结果：把动画时长压到 0，直接落在终态 */
  .hb-stage.is-hit,
  .hb-stage.is-hit .hb-ball,
  .hb-stage.is-hit .hb-impact,
  .hb-stage.is-escape .hb-faller,
  .hb-stage.is-escape .hb-broom { animation-duration: 1ms; }
  .hb-gauge-fill { transition: none; }
}