/* ============================================================
   结束拖延 — 深色主题与全套演出样式
   ============================================================ */

:root {
  --bg:            #0a0b10;
  --bg-soft:       #12141d;
  --panel:         #191c28;
  --border:        #262a3a;
  --text:          #e8eaf2;
  --text-dim:      #8a90a6;
  --text-faint:    #565c72;
  --accent:        #ffcb47;
  --accent-warm:   #ff8a3d;
  --accent-cool:   #4dd0e1;
  --radius:        14px;
  --shadow:        0 10px 40px rgba(0,0,0,.55);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; width: 100%; }

body {
  background:
    radial-gradient(1200px 700px at 50% -10%, #1b1f30 0%, transparent 60%),
    var(--bg);
  color: var(--text);
  font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  user-select: none;
}

button { font-family: inherit; color: inherit; cursor: pointer; border: none; background: none; }

#app {
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* ---------------- 顶部栏 ---------------- */

#topbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 26px;
  z-index: 10;
}

#app-title { font-size: 18px; font-weight: 600; letter-spacing: .18em; color: var(--text-dim); }

#top-actions { display: flex; align-items: center; gap: 8px; }

#launch-count { font-size: 13px; color: var(--text-faint); margin-right: 8px; letter-spacing: .06em; }

#mute-btn, #settings-btn {
  width: 40px; height: 40px; border-radius: 10px; font-size: 18px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background .18s ease, opacity .18s ease;
  opacity: .75;
}

#mute-btn:hover, #settings-btn:hover { background: var(--bg-soft); opacity: 1; }
#mute-btn.is-muted { opacity: .35; }

/* ---------------- 视图容器 ---------------- */

.view {
  position: absolute; inset: 0; display: none;
  flex-direction: column; align-items: center; justify-content: center;
  padding: 60px 24px 24px;
}

.view.active { display: flex; }

/* ---------------- 视图：选择方式 ---------------- */

.hint { font-size: 15px; color: var(--text-faint); letter-spacing: .16em; margin-bottom: 24px; }

#method-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  width: min(620px, 100%);
  margin-bottom: 20px;
}

@media (max-width: 500px) {
  #method-grid { grid-template-columns: repeat(2, 1fr); }
}

.method-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px 10px 18px; text-align: center;
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
  cursor: pointer;
}

.method-card:hover { transform: translateY(-3px); border-color: #3a4055; background: #1f2331; }

.method-card.selected {
  border-color: var(--accent); background: #241f14;
  box-shadow: 0 0 0 1px rgba(255,203,71,.28), 0 8px 26px rgba(255,203,71,.12);
}

.method-card .icon { font-size: 32px; display: block; margin-bottom: 10px; line-height: 1; }
.method-card .label { font-size: 14px; color: var(--text-dim); letter-spacing: .08em; }
.method-card.selected .label { color: var(--accent); font-weight: 600; }

/* ---------------- 视图：进行中 ---------------- */

#start-score-wrap { text-align: center; }

#start-score {
  font-size: clamp(96px, 20vw, 180px); font-weight: 200; line-height: 1;
  color: var(--accent); font-variant-numeric: tabular-nums;
  text-shadow: 0 0 60px rgba(255,203,71,.32);
}

#start-score-caption { margin-top: 16px; font-size: 13px; letter-spacing: .3em; color: var(--text-faint); }

.primary-btn {
  margin-top: 56px; padding: 18px 64px; border-radius: 999px;
  font-size: 17px; font-weight: 600; letter-spacing: .18em; color: #14100a;
  background: linear-gradient(140deg, var(--accent) 0%, var(--accent-warm) 100%);
  box-shadow: 0 8px 32px rgba(255,168,61,.30);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

.primary-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 42px rgba(255,168,61,.45); }
.primary-btn:active { transform: translateY(0); }
.primary-btn:disabled { filter: grayscale(1) brightness(.5); box-shadow: none; cursor: not-allowed; transform: none; }

/* ---------------- 视图：演出 ---------------- */

/* 演出视图：上半区揭晓数字，下半区展示物件，二者互不重叠 */
#view-stage {
  padding: 0; overflow: hidden;
  flex-direction: column; align-items: stretch; justify-content: flex-start;
}

/* 上半区：数字揭晓位。固定占比，物件永远不会侵占 */
#stage-result {
  order: 1;
  flex: 0 0 42%;
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(72px, 15vw, 150px); font-weight: 200; line-height: 1;
  color: var(--accent); font-variant-numeric: tabular-nums;
  text-shadow: 0 0 70px rgba(255,203,71,.45);
  opacity: 0; transform: scale(.6);
  transition: opacity .35s ease, transform .45s cubic-bezier(.2,1.5,.4,1);
  pointer-events: none; z-index: 30;
}

#stage-result.shown { opacity: 1; transform: scale(1); }

/* 下半区：物件演出区 */
#stage-host {
  order:2;
  flex: 1 1 auto; position: relative; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 10;
}

/* ---------------- 视图：总结 ---------------- */

#total-score {
  font-size: clamp(100px, 22vw, 210px); font-weight: 200; line-height: 1;
  color: var(--accent); font-variant-numeric: tabular-nums;
  text-shadow: 0 0 80px rgba(255,203,71,.40);
  animation: summary-in .55s cubic-bezier(.2,1.4,.4,1) both;
}

@keyframes summary-in {
  from { opacity: 0; transform: scale(.8); }
  to   { opacity: 1; transform: scale(1); }
}

#summary-caption {
  margin-top: 24px; font-size: 17px; letter-spacing: .32em; color: var(--text-dim);
  animation: summary-in .55s .12s cubic-bezier(.2,1.4,.4,1) both;
}

.link-btn {
  margin-top: 32px; font-size: 13px; letter-spacing: .16em; color: var(--text-faint);
  border-bottom: 1px solid transparent; padding-bottom: 2px;
  transition: color .18s ease, border-color .18s ease;
}

.link-btn:hover { color: var(--text-dim); border-bottom-color: var(--border); }

/* ---------------- 设置面板 ---------------- */

.mask {
  position: fixed; inset: 0; background: rgba(4,5,9,.75); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; z-index: 100;
}

.mask.hidden { display: none; }

#settings-panel {
  width: min(380px, calc(100% - 40px)); background: var(--panel);
  border: 1px solid var(--border); border-radius: 20px;
  padding: 30px 28px 24px; box-shadow: var(--shadow);
  animation: summary-in .28s ease both;
}

#settings-panel h2 { font-size: 16px; font-weight: 600; letter-spacing: .2em; color: var(--text-dim); margin-bottom: 24px; }

.field { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.field label { font-size: 14px; color: var(--text-dim); letter-spacing: .1em; }
.field input {
  width: 130px; padding: 10px 14px; background: var(--bg-soft);
  border: 1px solid var(--border); border-radius: 10px; color: var(--text);
  font-size: 16px; font-variant-numeric: tabular-nums; text-align: right; outline: none;
  transition: border-color .18s ease;
}
.field input:focus { border-color: var(--accent); }

.msg { min-height: 20px; font-size: 12px; color: var(--accent-cool); letter-spacing: .06em; margin: 4px 0 12px; }
.note { font-size: 12px; line-height: 1.8; color: var(--text-faint); margin-bottom: 24px; }

.panel-actions { display: flex; align-items: center; justify-content: space-between; }
.panel-actions .primary-btn { margin-top: 0; padding: 12px 36px; font-size: 14px; }
.panel-actions .link-btn { margin-top: 0; }

/* ============================================================
   7 种抽奖方式专属动画样式
   ============================================================ */

/* 1. 🎲 骰子 (Dice) */
.dice-container {
  width: 120px; height: 120px; perspective: 600px; position: relative;
}
.dice-cube {
  width: 100%; height: 100%; position: relative;
  transform-style: preserve-3d;
  transition: transform 1.8s cubic-bezier(.15,.85,.35,1.2);
}
.dice-cube.rolling {
  animation: dice-shake 0.4s infinite linear;
}
@keyframes dice-shake {
  0% { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
  25% { transform: rotateX(90deg) rotateY(180deg) rotateZ(45deg); }
  50% { transform: rotateX(180deg) rotateY(270deg) rotateZ(90deg); }
  75% { transform: rotateX(270deg) rotateY(360deg) rotateZ(135deg); }
  100% { transform: rotateX(360deg) rotateY(450deg) rotateZ(180deg); }
}
.dice-face {
  position: absolute; width: 120px; height: 120px; background: #232736;
  border: 2px solid var(--accent); border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  font-size: 44px; font-weight: bold; color: var(--accent);
  box-shadow: inset 0 0 15px rgba(255,203,71,.2);
}
.dice-face-1 { transform: translateZ(60px); }
.dice-face-2 { transform: rotateY(180deg) translateZ(60px); }
.dice-face-3 { transform: rotateY(90deg) translateZ(60px); }
.dice-face-4 { transform: rotateY(-90deg) translateZ(60px); }
.dice-face-5 { transform: rotateX(90deg) translateZ(60px); }
.dice-face-6 { transform: rotateX(-90deg) translateZ(60px); }

/* 2. 🎡 转盘 (Wheel) */
.wheel-container { position: relative; width: 280px; height: 280px; }
.wheel-canvas { width: 100%; height: 100%; border-radius: 50%; box-shadow: 0 0 40px rgba(0,0,0,.6), 0 0 0 6px var(--border); }
.wheel-pointer {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 14px solid transparent; border-right: 14px solid transparent;
  border-top: 24px solid var(--accent);
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.5)); z-index: 10;
}

/* 3. 🎁 宝箱 (Chest) — CSS 3D 立体（统一以箱体中心为原点拼面） */
.chest-container { position: relative; width: 280px; height: 300px; }

/* 奖励数字：从箱内升起 */
.chest-number {
  position: absolute; left: 0; right: 0; top: -6px;
  text-align: center; font-size: 66px; font-weight: 300; line-height: 1;
  color: var(--accent); font-variant-numeric: tabular-nums;
  text-shadow: 0 0 34px rgba(255,203,71,.75);
  opacity: 0; transform: translateY(52px) scale(.5);
  transition: opacity .35s ease, transform .6s cubic-bezier(.2,1.5,.4,1);
  z-index: 9; pointer-events: none;
}
.chest-number.shown { opacity: 1; transform: translateY(0) scale(1); }

/* 场景：透视与转角在此层完成 */
.chest-scene {
  position: absolute; left: 0; bottom: 0; width: 280px; height: 200px;
  perspective: 1000px;
  perspective-origin: 50% 45%;
}

/* 立体箱体：以自身中心为 3D 原点 */
.chest-3d {
  --w: 150px;   /* 箱宽 */
  --h: 96px;    /* 箱高 */
  --d: 104px;   /* 箱深 */
  --lid: 44px;  /* 盖高 */
  position: absolute; left: 50%; top: 50%;
  width: var(--w); height: var(--h);
  margin-left: calc(var(--w) / -2);
  margin-top: calc(var(--h) / -2);
  transform-style: preserve-3d;
  transform: rotateX(-14deg) rotateY(-24deg);
}

/* 共用基础：所有面从箱体中心出发 */
.chest-face {
  position: absolute; left: 50%; top: 50%;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

/* --- 箱身四面 --- */
.chest-front, .chest-back, .chest-left, .chest-right {
  width: var(--w); height: var(--h);
  margin-left: calc(var(--w) / -2); margin-top: calc(var(--h) / -2);
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.18) 0 2px, transparent 2px 22px),
    linear-gradient(180deg, #7a5528 0%, #4a3117 100%);
  border: 3px solid #c9933b;
  box-shadow: inset 0 12px 24px rgba(0,0,0,.6);
}

/* 前后面：沿 Z 轴平移半个深度 */
.chest-front { transform: translateZ(calc(var(--d) / 2)); }
.chest-back  { transform: rotateY(180deg) translateZ(calc(var(--d) / 2)); }

/* 左右面：旋转 90° 后沿新的 Z 轴平移半个宽度 */
.chest-left, .chest-right {
  width: var(--d);
  margin-left: calc(var(--d) / -2);
}
.chest-left  { transform: rotateY(-90deg) translateZ(calc(var(--w) / 2)); }
.chest-right { transform: rotateY(90deg)  translateZ(calc(var(--w) / 2)); }

/* 底面：向下 90°，平移到箱底 */
.chest-bottom {
  width: var(--w); height: var(--d);
  margin-left: calc(var(--w) / -2); margin-top: calc(var(--d) / -2);
  transform: rotateX(-90deg) translateZ(calc(var(--h) / 2));
  background: linear-gradient(180deg, #3a2610 0%, #241708 100%);
  border: 3px solid #a5761f;
}

/* --- 金属箍：贴在前面与两侧，比面略靠外以避免 z-fighting --- */
.chest-band {
  background: linear-gradient(90deg, #f7df94 0%, #c9933b 55%, #8a5f1f 100%);
  box-shadow: 0 0 8px rgba(0,0,0,.5);
}
.chest-band-front {
  width: 14px; height: var(--h);
  margin-left: -7px; margin-top: calc(var(--h) / -2);
  transform: translateZ(calc(var(--d) / 2 + 3px));
}
.chest-band-side-l {
  width: 14px; height: var(--h);
  margin-left: -7px; margin-top: calc(var(--h) / -2);
  transform: rotateY(-90deg) translateZ(calc(var(--w) / 2 + 3px));
}
.chest-band-side-r {
  width: 14px; height: var(--h);
  margin-left: -7px; margin-top: calc(var(--h) / -2);
  transform: rotateY(90deg) translateZ(calc(var(--w) / 2 + 3px));
}

/* --- 箱盖：以箱体顶面的后棱为轴向上翻开 ---
   组自身是一个有尺寸的盒，尺寸与箱体同宽同深，高为盖高；
   轴心放在组的后下棱（左右居中、高度底部、深度后端）。 */
.chest-lid3d {
  position: absolute; left: 50%; top: 50%;
  width: var(--w); height: var(--lid);
  margin-left: calc(var(--w) / -2);
  /* 组的底边贴着箱体顶面（y = -h/2） */
  margin-top: calc(0px - var(--h) / 2 - var(--lid));
  transform-style: preserve-3d;
  /* 轴心：组内的后下棱 —— 水平居中、纵向底部、Z 向后端 */
  transform-origin: 50% 100% calc(var(--d) / -2);
  transform: rotateX(0deg);
  transition: transform .95s cubic-bezier(.34,1.2,.5,1);
}
.chest-container.open .chest-lid3d {
  /* 绕后棱向后上方揀起；正角度才是向上，
     超过 90° 时盖子竖立略后仰，恰好敞开箱口 */
  transform: rotateX(95deg);
}

/* 盖子四面：以组中心为基准拼合 */
.lid-front, .lid-back, .lid-side-l, .lid-side-r {
  position: absolute; left: 50%; top: 50%;
  width: var(--w); height: var(--lid);
  margin-left: calc(var(--w) / -2); margin-top: calc(var(--lid) / -2);
  background: linear-gradient(180deg, #a97a35 0%, #7d5620 100%);
  border: 3px solid #f0c96a;
  backface-visibility: visible;
}
.lid-front { transform: translateZ(calc(var(--d) / 2)); }

/* 盖前面的两道金属箍，与箱身箍对齐，形成连续的包边 */
.lid-band-front-l, .lid-band-front-r {
  position: absolute; left: 50%; top: 50%;
  width: 14px; height: var(--lid);
  margin-top: calc(var(--lid) / -2);
  background: linear-gradient(90deg, #f7df94 0%, #c9933b 55%, #8a5f1f 100%);
  box-shadow: 0 0 6px rgba(0,0,0,.5);
  transform: translateZ(calc(var(--d) / 2 + 3px));
}
.lid-band-front-l { margin-left: calc(var(--w) / -2 + 26px - 7px); }
.lid-band-front-r { margin-left: calc(var(--w) / 2 - 26px - 7px); }
.lid-back  {
  transform: rotateY(180deg) translateZ(calc(var(--d) / 2));
}
.lid-side-l, .lid-side-r { width: var(--d); margin-left: calc(var(--d) / -2); }
.lid-side-l { transform: rotateY(-90deg) translateZ(calc(var(--w) / 2)); }
.lid-side-r { transform: rotateY(90deg)  translateZ(calc(var(--w) / 2)); }

/* 盖顶面（木板）：从盖子中心向上 90° */
.lid-top {
  position: absolute; left: 50%; top: 50%;
  width: var(--w); height: var(--d);
  margin-left: calc(var(--w) / -2); margin-top: calc(var(--d) / -2);
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.22) 0 2px, transparent 2px 24px),
    linear-gradient(180deg, #c9924a 0%, #9a6a26 100%);
  border: 3px solid #f0c96a;
  transform: translateY(calc(var(--lid) / -2)) rotateX(90deg);
  transform-origin: 50% 50%;
  backface-visibility: visible;
}

/* 盖内底面：盖子翻开后朝向观察者，把盖子封成实心木盒，避免出现「空壳」黑洞 */
.lid-bottom {
  position: absolute; left: 50%; top: 50%;
  width: var(--w); height: var(--d);
  margin-left: calc(var(--w) / -2); margin-top: calc(var(--d) / -2);
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.22) 0 2px, transparent 2px 24px),
    linear-gradient(180deg, #8a5f26 0%, #5c3d15 100%);
  border: 3px solid #c9933b;
  transform: translateY(calc(var(--lid) / 2)) rotateX(-90deg);
  backface-visibility: visible;
}

/* 锁扣：跟随前面，稍向外突出 */
.chest-lock {
  position: absolute; left: 50%; top: 50%; width: 30px; height: 30px;
  margin-left: -15px; margin-top: -15px;
  background: linear-gradient(180deg, #ffe08a 0%, #cf9a37 100%);
  border: 3px solid #8a5f1f; border-radius: 5px;
  box-shadow: 0 3px 8px rgba(0,0,0,.55);
  transform: translateZ(calc(var(--d) / 2 + 14px));
  z-index: 2;
}
.chest-lock::after {
  content: ""; position: absolute; left: 50%; top: 6px; width: 6px; height: 12px;
  margin-left: -3px; background: #4a3117; border-radius: 3px;
}

/* 箱内金光 */
.chest-inner-glow {
  position: absolute; left: 50%; top: 52px; width: 190px; height: 120px;
  margin-left: -95px; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255,225,130,.95) 0%, rgba(255,180,60,.35) 45%, transparent 72%);
  opacity: 0; transform: scale(.4); transition: opacity .5s ease, transform .6s ease;
  pointer-events: none; z-index: 1;
}
.chest-container.open .chest-inner-glow {
  opacity: 1; transform: scale(1.15);
  animation: chest-glow-pulse 1.1s infinite alternate;
}
@keyframes chest-glow-pulse { from { opacity: .7; } to { opacity: 1; } }

/* 开箱前的蓄力抖动（保持转角不变） */
.chest-container.shaking .chest-3d { animation: chest-shake .1s infinite alternate; }
@keyframes chest-shake {
  from { transform: rotateX(-14deg) rotateY(-24deg) translateX(-3px); }
  to   { transform: rotateX(-14deg) rotateY(-24deg) translateX(3px); }
}

/* 4. 📇 抽卡 (Card) */
.card-container { width: 140px; height: 200px; perspective: 800px; }
.card-inner {
  width: 100%; height: 100%; position: relative;
  transform-style: preserve-3d; transition: transform 0.9s cubic-bezier(.175,.885,.32,1.275);
}
.card-container.flipped .card-inner { transform: rotateY(180deg); }
.card-face {
  position: absolute; inset: 0; backface-visibility: hidden;
  border-radius: 16px; border: 2px solid var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.card-back {
  background: linear-gradient(135deg, #1b2032 0%, #0d101a 100%);
  box-shadow: inset 0 0 20px rgba(255,203,71,.15);
}
.card-back::after { content: "★"; font-size: 42px; color: var(--accent); opacity: .6; }
.card-front {
  background: linear-gradient(135deg, #2a2215 0%, #17120a 100%);
  transform: rotateY(180deg); font-size: 52px; font-weight: 300; color: var(--accent);
  box-shadow: 0 0 30px rgba(255,203,71,.3);
}

/* 5. 🎰 摇奖球机 (Ball Machine) */
.machine-container { width: 200px; height: 260px; position: relative; display: flex; flex-direction: column; align-items: center; }
.machine-dome {
  width: 180px; height: 180px; border-radius: 50%; border: 4px solid #3a425a;
  background: rgba(255,255,255,0.04); backdrop-filter: blur(2px);
  position: relative; overflow: hidden; box-shadow: inset 0 0 20px rgba(255,255,255,0.1);
}
.machine-ball {
  position: absolute; width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: bold; color: #111;
  box-shadow: inset -3px -3px 6px rgba(0,0,0,0.4);
}
.machine-base { width: 140px; height: 70px; background: #1c2030; border-radius: 0 0 16px 16px; border: 3px solid #3a425a; position: relative; }
.machine-chute {
  width: 46px; height: 46px; background: #121522; border: 2px solid var(--accent);
  border-radius: 50%; margin: 10px auto 0; display: flex; align-items: center; justify-content: center;
}

/* 6. 🪵 签筒抽签 (Fortune Stick) */
/* 容器比筒高，为签被摇出后向上抽出预留空间 */
.stick-container { width: 140px; height: 360px; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.stick-bucket {
  width: 120px; height: 160px; background: linear-gradient(180deg, #422d1b 0%, #281a0e 100%);
  border: 3px solid #7c5737; border-radius: 12px 12px 30px 30px; position: relative; z-index: 2;
  box-shadow: 0 10px 25px rgba(0,0,0,.6);
}
.stick-bucket.shaking { animation: bucket-shake 0.12s infinite alternate; }
@keyframes bucket-shake { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }

/* 签初始插在筒内，只露出顶端一小截 */
.bamboo-stick {
  position: absolute; left: 50%; bottom: 118px; z-index: 1;
  width: 26px; height: 150px; margin-left: -13px;
  background: linear-gradient(90deg, #e3c188 0%, #f0d9ab 45%, #c49d5d 100%);
  border-radius: 5px 5px 3px 3px;
  border: 1px solid #a87f45;
  display: flex; align-items: flex-start; justify-content: center; padding-top: 14px;
  box-shadow: 2px 2px 6px rgba(0,0,0,.35);
  transition: transform 0.75s cubic-bezier(.22,1.4,.4,1);
}

/* 摇出：整根签从筒中升起，并轻微倾斜以呈现「被抽出」的姿态 */
.bamboo-stick.drawn {
  transform: translateY(-190px) rotate(-6deg);
  z-index: 3;
}

/* 签面数字，初始是问号，揭晓后放大高亮 */
.stick-number {
  font-size: 26px; font-weight: 700; color: #6b4a1f;
  line-height: 1; opacity: 0; transform: scale(.5);
  transition: opacity .25s ease, transform .35s cubic-bezier(.2,1.5,.4,1), color .25s ease;
}
.stick-number.revealed {
  opacity: 1; transform: scale(1); color: #b8452f;
  text-shadow: 0 0 10px rgba(255,203,71,.6);
}

/* 7. 🥚 砸金蛋 (Golden Egg) */
.egg-container {
  position: relative;
  width: 220px; height: 240px;
  display: flex; align-items: center; justify-content: center;
}

/* 蛋体舞台：尺寸即蛋的尺寸，锤子、数字、闪光都以它为基准对齐 */
.egg-stage {
  position: relative;
  width: 120px; height: 160px;
  transition: transform .12s ease;
}

/* 落锤瞬间：整颗蛋震一下 */
.egg-stage.struck { animation: egg-struck .2s ease; }
@keyframes egg-struck {
  0%   { transform: translate(0, 0)       rotate(0deg); }
  30%  { transform: translate(-3px, 3px)  rotate(-1.5deg); }
  65%  { transform: translate(3px, -2px)  rotate(1.5deg); }
  100% { transform: translate(0, 0)       rotate(0deg); }
}

/* 蛋壳拆成上下两半：两半的尺寸 / 位置 / 渐变 / 圆角完全一致，
   只是用互补的 clip-path 沿同一条锯齿裂纹切开，合起来即完整的蛋 */
.egg-half {
  position: absolute; inset: 0;
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: radial-gradient(circle at 35% 30%, #fff2a3 0%, #ffd700 45%, #b8860b 92%);
  box-shadow: 0 14px 32px rgba(255,215,0,.30),
              inset -8px -10px 20px rgba(140,90,0,.45);
  transition: transform .65s cubic-bezier(.22,.72,.3,1), opacity .65s ease;
}
/* 上半：保留到裂纹线；下半：保留裂纹线以下。锯齿点位一一对应，无缝 */
.egg-top {
  clip-path: polygon(0 0, 100% 0, 100% 60%,
                     80% 50%, 60% 60%, 40% 50%, 20% 58%, 0 50%);
}
.egg-bottom {
  clip-path: polygon(0 50%, 20% 58%, 40% 50%, 60% 60%, 80% 50%, 100% 60%,
                     100% 100%, 0 100%);
}

/* 炸开：上半片甩向左上，下半片落向右下，中间让出数字的位置 */
.egg-stage.shattered .egg-top {
  transform: translate(-38px, -56px) rotate(-28deg);
  opacity: .8;
}
.egg-stage.shattered .egg-bottom {
  transform: translate(30px, 34px) rotate(18deg);
  opacity: .85;
}

/* 炸裂瞬间的白金色闪光 */
.egg-flash {
  position: absolute; left: 50%; top: 52%;
  width: 26px; height: 26px; margin: -13px 0 0 -13px;
  border-radius: 50%;
  background: radial-gradient(circle,
              rgba(255,250,220,.95) 0%,
              rgba(255,205,90,.55) 42%,
              transparent 72%);
  opacity: 0; transform: scale(.3);
  pointer-events: none; z-index: 5;
}
.egg-stage.shattered .egg-flash { animation: egg-flash .62s ease-out forwards; }
@keyframes egg-flash {
  0%   { opacity: 0; transform: scale(.3); }
  22%  { opacity: 1; transform: scale(3.6); }
  100% { opacity: 0; transform: scale(8.5); }
}

/* 奖励数字：从碎裂处升起放大 */
.egg-number {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 4; pointer-events: none;
  font-size: 68px; font-weight: 400; color: #fff6d8;
  font-variant-numeric: tabular-nums;
  opacity: 0; transform: scale(.4);
  text-shadow: 0 0 6px #b8860b, 0 0 18px rgba(255,180,60,.9),
               0 2px 4px rgba(80,40,0,.9);
  transition: opacity .3s ease, transform .55s cubic-bezier(.2,1.6,.4,1);
}
.egg-number.shown { opacity: 1; transform: scale(1); }

/* 锤子：停在蛋的右上方，落锤时以手柄为轴抡下去 */
.hammer {
  position: absolute; top: -6px; right: 4px;
  font-size: 52px; line-height: 1;
  transform-origin: 85% 95%;
  pointer-events: none; z-index: 10;
}
.hammer.swing { animation: hammer-swing .42s ease-in-out; }
@keyframes hammer-swing {
  0%   { transform: rotate(0deg)   translate(0, 0); }
  34%  { transform: rotate(-58deg) translate(-8px, -12px); }  /* 抬起 */
  60%  { transform: rotate(20deg)  translate(4px, 6px); }     /* 砸下 */
  82%  { transform: rotate(-6deg)  translate(0, 0); }         /* 回弹 */
  100% { transform: rotate(0deg)   translate(0, 0); }
}