/* ============================================================
   apps/hanoi.html 样式 · 扁平 2D 紫罗兰木桌
   - 棋盘台面：纯渐变 + 木纹，无 perspective / rotateX
   - 立柱柱身：竖向渐变模拟圆柱光照；底座为扁平椭圆
   - 圆盘：胶囊形，在每根柱子的 flex(column-reverse) 容器内自然堆叠，
           稳态零 transform，彻底避免硬编码像素偏移
   - 入场 + 移动：JS 使用 Web Animations API + getBoundingClientRect 实测坐标
   - 主题：浅紫聚光灯背景 + 紫罗兰主色 + 4 色圆盘渐变
   ============================================================ */

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

:root {
  /* 紫罗兰主色 + 辅助 */
  --primary:        #6d28d9;
  --primary-soft:   #a78bfa;
  --primary-deep:   #4c1d95;
  --primary-darker: #2e1065;
  --primary-fade:   rgba(109, 40, 217, 0.10);

  /* 4 圆盘颜色（id 1=最小顶 / 4=最大底） */
  --disk-1-top:    #c4b5fd;
  --disk-1-mid:    #a78bfa;
  --disk-1-bot:    #6d28d9;
  --disk-1-side:   #5b21b6;

  --disk-2-top:    #bfdbfe;
  --disk-2-mid:    #93c5fd;
  --disk-2-bot:    #4a6cf7;
  --disk-2-side:   #1e40af;

  --disk-3-top:    #a5f3fc;
  --disk-3-mid:    #67e8f9;
  --disk-3-bot:    #22c1c3;
  --disk-3-side:   #0e7490;

  --disk-4-top:    #fed7aa;
  --disk-4-mid:    #fdba74;
  --disk-4-bot:    #ff9f43;
  --disk-4-side:   #c2410c;
  /* P0：盘 5/6 配色（5 盘玫粉、6 盘草绿） */
  --disk-5-top:    #fbcfe8;
  --disk-5-mid:    #f472b6;
  --disk-5-bot:    #db2777;
  --disk-5-side:   #9d174d;
  --disk-6-top:    #bbf7d0;
  --disk-6-mid:    #86efac;
  --disk-6-bot:    #16a34a;
  --disk-6-side:   #166534;

  /* 木质底座 */
  --wood-top:    #f5deb3;
  --wood-mid:    #d4a373;
  --wood-bot:    #8b5e3c;
  --wood-deep:   #5c3a21;

  /* 背景 · 聚光灯渐变 */
  --bg-page-1:   #f8f5ff;
  --bg-page-2:   #ede4ff;
  --bg-page-3:   #d8c8f0;

  /* 棋盘桌面（深色木） */
  --desk-top:    #4a3a5c;
  --desk-mid:    #3a2c4a;
  --desk-bot:    #2a1e38;
  --desk-edge:   #1f1530;

  /* 表面（工作台 + 卡片） */
  --surface:        #ffffff;
  --surface-soft:   rgba(255, 255, 255, 0.78);
  --surface-border: rgba(109, 40, 217, 0.10);

  /* 文字 */
  --text:        #2b2440;
  --text-soft:   #5b5478;
  --text-mute:   #8b85a3;

  /* 状态 */
  --success:     #10b981;
  --warn:        #f59e0b;
  --danger:      #ef4444;

  /* 阴影 */
  --shadow-card: 0 12px 36px rgba(76, 29, 149, 0.18);
  --shadow-deep: 0 24px 60px rgba(76, 29, 149, 0.28);

  /* 字体 */
  --font-body:   'Inter', -apple-system, BlinkMacSystemFont, 'PingFang SC',
                 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;

  /* 圆盘厚度（扁平 2D） */
  --disk-height-1: 18px;      /* 小盘薄一点 */
  --disk-height-2: 22px;
  --disk-height-3: 26px;
  --disk-height-4: 30px;      /* 大盘厚一点 */
  --disk-height-5: 32px;
  --disk-height-6: 34px;
}

body {
  background:
    /* 上方聚光 */
    radial-gradient(ellipse 70% 50% at 50% 5%, rgba(255, 255, 255, 0.55) 0%, transparent 55%),
    /* 紫色环境光 */
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(167, 139, 250, 0.32) 0%, transparent 65%),
    /* 渐变背景 */
    linear-gradient(180deg, var(--bg-page-1) 0%, var(--bg-page-2) 60%, var(--bg-page-3) 100%);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }

/* ============================================================
   布局
   ============================================================ */

.back-link-wrap {
  max-width: 1200px;
  width: 100%;
  margin: 12px auto 0;
  padding: 0 16px;
}
.back-link {
  display: inline-block;
  color: var(--text-soft);
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 8px;
  transition: background-color 0.18s ease;
}
.back-link:hover { background-color: var(--primary-fade); color: var(--primary); }

main {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 16px 16px 32px;
  flex: 1;
}

/* HERO */
.head { text-align: center; margin: 16px 0 24px; }
.head .eyebrow {
  font-size: 11px;
  letter-spacing: 0.32em;
  color: var(--primary);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.head h1 {
  font-size: clamp(28px, 4vw, 38px);
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.02em;
  margin-bottom: 8px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.head .sub {
  color: var(--text-soft);
  font-size: 14px;
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.6;
}

/* 棋盘 + 工作台 网格 */
.game-area {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 24px;
  align-items: start;
}
@media (max-width: 900px) {
  .game-area { grid-template-columns: 1fr; gap: 16px; }
}

/* ============================================================
   棋盘区 · 扁平 2D 舞台
   ============================================================ */

.board-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 245, 255, 0.95) 100%);
  border-radius: 18px;
  border: 1px solid var(--surface-border);
  box-shadow: var(--shadow-card);
  padding: 28px 24px 32px;
  position: relative;
}

.board-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--surface-border);
  flex-wrap: wrap;
  gap: 10px;
}
.board-head .l {
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--primary);
  text-transform: uppercase;
  font-weight: 600;
}
.board-head .info {
  font-size: 13px;
  color: var(--text-soft);
  font-variant-numeric: tabular-nums;
}
.board-head .info b { color: var(--text); font-weight: 700; }

/* P0：顶栏工具按钮组（与对标站顶栏风格一致） */
.board-head .board-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin-left: auto;
}
.board-head .tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  background: #fff;
  border: 1px solid var(--surface-border);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, transform .12s ease;
}
.board-head .tool-btn:hover {
  background: var(--primary-fade);
  border-color: var(--primary-soft);
}
.board-head .tool-btn:active { transform: translateY(1px); }
.board-head .tool-btn:disabled { opacity: .45; cursor: not-allowed; }
.board-head .tool-btn-primary {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-deep) 100%);
  color: #fff;
  border-color: transparent;
}
.board-head .tool-btn-primary:hover {
  filter: brightness(1.05);
  border-color: transparent;
}

/* P0：盘数选择器（参考对标站 puzzle.now/hanoi） */
.head .mode-picker {
  margin-top: 14px;
  display: inline-flex;
  gap: 6px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--surface-border);
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(15, 12, 41, 0.06);
}
.head .mode-picker button {
  appearance: none;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.head .mode-picker button:hover { background: var(--primary-fade); }
.head .mode-picker button.is-active {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-deep) 100%);
  color: #fff;
  border-color: transparent;
}
/* P2：柱数选择器 */
.head .peg-picker {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--surface-border);
  display: inline-flex;
  gap: 6px;
  align-items: center;
  position: relative;
}
.head .peg-picker::before {
  content: '↓';
  position: absolute;
  top: -4px;
  left: 18px;
  font-size: 11px;
  color: var(--primary);
  background: #fff;
  padding: 0 4px;
}
.head .peg-picker .picker-label { font-size: 12px; color: var(--text-soft); margin-right: 2px; }
.head .peg-picker button {
  appearance: none;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--primary);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--surface-border);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.head .peg-picker button:hover { background: var(--primary-fade); }
.head .peg-picker button.is-active {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-deep) 100%);
  color: #fff;
  border-color: transparent;
}
/* P2：4 柱模式（Frame-Stewart）—— 4 根柱并排，缩小间距 */
.board .peg.is-four-peg { width: clamp(58px, 9vw, 100px); }
.board .peg.is-four-peg .peg::before { width: 12px; }
.board .peg.is-four-peg .peg-base { width: clamp(60px, 9vw, 96px); }

/* P2：拖拽视觉 */
.disk.is-dragging { opacity: 0.5; cursor: grabbing; }
.disk[draggable="true"] { cursor: grab; }
.peg.is-drop-target { background-color: rgba(167, 139, 250, 0.20); box-shadow: 0 0 0 3px var(--primary-soft); border-radius: 6px; }

/* P2：教程 FAQ 区 */
.learn-section {
  max-width: 880px;
  margin: 28px auto 48px;
  padding: 24px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 245, 255, 0.96) 100%);
  border: 1px solid var(--surface-border);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
}
.learn-title { font-size: 16px; font-weight: 700; color: var(--primary); margin: 18px 0 10px; letter-spacing: 0.01em; }
.learn-title:first-child { margin-top: 0; }
.learn-steps, .learn-tips { padding-left: 22px; line-height: 1.7; color: var(--text); font-size: 14px; }
.learn-steps li, .learn-tips li { margin-bottom: 6px; }
.learn-faq { margin: 8px 0; border-bottom: 1px solid var(--surface-border); }
.learn-faq summary { padding: 10px 0; cursor: pointer; font-weight: 600; color: var(--text); list-style: none; }
.learn-faq summary::before { content: '＋'; display: inline-block; width: 1.2em; color: var(--primary); font-weight: 700; }
.learn-faq[open] summary::before { content: '−'; }
.learn-faq summary:hover { color: var(--primary); }
.learn-faq div { padding: 0 0 12px 1.4em; color: var(--text-soft); font-size: 13px; line-height: 1.7; }


/* P1：步数提示条（棋盘下方） */
.steps-hint {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px dashed var(--surface-border);
  border-radius: 10px;
  font-size: 12px;
  color: var(--text-soft);
}
.steps-hint-tip { margin-right: 4px; }
.steps-hint-chip {
  padding: 3px 10px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--surface-border);
  color: var(--text-soft);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.steps-hint-chip:hover { background: var(--primary-fade); }
.steps-hint-chip.is-pegs-4 {
  background: linear-gradient(135deg, rgba(34, 193, 195, 0.12) 0%, rgba(167, 139, 250, 0.12) 100%);
  border-color: var(--primary-soft);
  color: var(--primary-deep);
}
.steps-hint-chip.is-pegs-4.is-active {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-deep) 100%);
  color: #fff;
}
.steps-hint-chip.is-active {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-deep) 100%);
  color: #fff;
  border-color: transparent;
}

/* C4：演示状态视觉提示 */
.demo-badge {
  display: none;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 700;
  color: #b45309;
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.18) 0%, rgba(245, 158, 11, 0.18) 100%);
  border: 1px solid rgba(251, 191, 36, 0.45);
  border-radius: 999px;
  animation: demoPulse 1.5s ease-in-out infinite;
}
.demo-badge.is-on { display: inline-flex; }
@keyframes demoPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
.stage.is-demo {
  position: relative;
}
.stage.is-demo::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 14px;
  pointer-events: none;
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.45), 0 0 24px rgba(251, 191, 36, 0.25);
  animation: demoGlow 1.5s ease-in-out infinite;
}
@keyframes demoGlow {
  0%, 100% { box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.45), 0 0 24px rgba(251, 191, 36, 0.25); }
  50% { box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.75), 0 0 32px rgba(251, 191, 36, 0.45); }
}
.tool-btn.is-running {
  background: linear-gradient(135deg, #f59e0b 0%, #b45309 100%);
  color: #fff;
  border-color: transparent;
}

/* P1：每日挑战入口（卡片按钮） */
.daily-link {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(167, 139, 250, 0.12) 0%, rgba(76, 29, 149, 0.10) 100%);
  border: 1px solid var(--primary-soft);
  border-radius: 10px;
  color: var(--primary);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.daily-link:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(76, 29, 149, 0.15);
}
.daily-link-icon { font-size: 16px; }
.daily-link-text { flex: 1; }
.daily-link-arrow { color: var(--primary-deep); font-weight: 700; }

/* ============== 舞台容器（扁平 2D） ============== */

.stage {
  position: relative;
  /* 桌面柔光阴影 */
  background:
    radial-gradient(ellipse 60% 80% at 50% 60%, rgba(76, 29, 149, 0.10) 0%, transparent 70%);
  border-radius: 16px;
  padding: 20px 24px 28px;
}

/* ============== 棋盘台面（扁平木桌） ============== */

.board {
  position: relative;
  height: clamp(300px, 42vw, 380px);
  /* 深色木桌面（扁平俯视，靠渐变 + 木纹暗示立体感，不使用 3D 旋转） */
  background:
    /* 桌面纹理（极淡的木纹） */
    repeating-linear-gradient(90deg,
      rgba(0, 0, 0, 0.04) 0px,
      rgba(0, 0, 0, 0.04) 1px,
      transparent 1px,
      transparent 60px),
    /* 中心高光 */
    radial-gradient(ellipse 70% 50% at 50% 30%, rgba(167, 139, 250, 0.28) 0%, transparent 70%),
    /* 主体渐变：上方亮、下方暗 */
    linear-gradient(180deg, var(--desk-top) 0%, var(--desk-mid) 50%, var(--desk-bot) 100%);
  border-radius: 16px;
  border: 2px solid var(--desk-edge);
  box-shadow:
    /* 顶部高光 */
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    /* 底部内暗影 */
    inset 0 -10px 20px rgba(0, 0, 0, 0.30),
    /* 桌面投影 */
    0 20px 40px rgba(15, 12, 41, 0.30),
    /* 外发光描边 */
    0 0 0 1px rgba(76, 29, 149, 0.25);
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  padding: 0 8% 26px;
  overflow: visible;
}

/* 桌面纹理：木纹横线（通过 ::before 营造） */
.board::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 14px;
  background:
    repeating-linear-gradient(90deg,
      transparent 0px,
      transparent 28px,
      rgba(0, 0, 0, 0.08) 28px,
      rgba(0, 0, 0, 0.08) 29px,
      transparent 29px,
      transparent 56px);
  pointer-events: none;
  z-index: 0;
}

/* 桌面边缘高光（顶部） */
.board::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.3) 30%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0.3) 70%,
    transparent 100%);
  pointer-events: none;
  z-index: 1;
}

/* ============== 柱子 · 扁平立柱 ============== */

.peg {
  position: relative;
  flex: 0 0 auto;
  /* peg 仅作点击热区/分布锚点；圆盘在绝对定位的 .peg-stack 内可视觉溢出，故 peg 不必加宽 */
  width: clamp(110px, 14vw, 160px);
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  cursor: pointer;
  border-radius: 8px;
  transition: background-color 0.18s ease;
  outline: none;
  z-index: 2;
}
.peg:focus-visible {
  box-shadow: 0 0 0 3px var(--primary-soft);
  background-color: var(--primary-fade);
}
.peg:hover {
  background-color: rgba(167, 139, 250, 0.12);
}

/* 立柱柱身（纯竖向渐变模拟圆柱光照，无 3D） */
.peg::before {
  content: '';
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: calc(100% - 72px);
  border-radius: 8px;
  background:
    linear-gradient(90deg,
      rgba(255, 255, 255, 0.45) 0%,
      rgba(255, 255, 255, 0.10) 18%,
      transparent 38%,
      transparent 62%,
      rgba(0, 0, 0, 0.28) 84%,
      rgba(0, 0, 0, 0.50) 100%),
    linear-gradient(180deg,
      var(--primary-soft) 0%,
      var(--primary) 45%,
      var(--primary-deep) 100%);
  box-shadow:
    inset 2px 0 1px rgba(255, 255, 255, 0.5),
    inset -2px 0 1px rgba(0, 0, 0, 0.4),
    0 0 8px rgba(76, 29, 149, 0.3);
  pointer-events: none;
  z-index: 0;
}

/* 柱顶圆头（扁平小椭圆） */
.peg .peg-top {
  position: absolute;
  bottom: calc(100% - 72px);
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 10px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 35% 30%,
      #ddd6fe 0%,
      var(--primary-soft) 55%,
      var(--primary) 100%);
  box-shadow:
    inset 0 -1px 1px rgba(0, 0, 0, 0.3),
    0 2px 4px rgba(0, 0, 0, 0.3);
  pointer-events: none;
  z-index: 3;
}

/* 木质椭圆底座（扁平，直接放在桌面上，无需反向 rotateX） */
.peg .peg-base {
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(104px, 15vw, 168px);
  height: 20px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 30%,
      var(--wood-top) 0%,
      var(--wood-mid) 42%,
      var(--wood-bot) 80%,
      var(--wood-deep) 100%);
  box-shadow:
    inset 0 2px 1px rgba(255, 255, 255, 0.4),
    inset 0 -3px 6px rgba(0, 0, 0, 0.45),
    0 8px 12px rgba(0, 0, 0, 0.38),
    0 0 0 2px var(--wood-deep);
  pointer-events: none;
  z-index: 1;
}

/* 选中 / 提示 高亮 */
.peg.is-selected::before {
  box-shadow:
    inset 2px 0 1px rgba(255, 255, 255, 0.5),
    inset -2px 0 1px rgba(0, 0, 0, 0.4),
    0 0 16px rgba(167, 139, 250, 0.8);
}
.peg.is-hint-target::before {
  box-shadow:
    inset 2px 0 1px rgba(255, 255, 255, 0.5),
    inset -2px 0 1px rgba(0, 0, 0, 0.4),
    0 0 18px rgba(245, 158, 11, 0.85);
}
.peg.is-hint-target .peg-top {
  box-shadow:
    inset 0 -1px 1px rgba(0, 0, 0, 0.3),
    0 0 12px rgba(245, 158, 11, 0.7),
    0 2px 4px rgba(0, 0, 0, 0.3);
}

.peg.col-shake { animation: hn-shake 0.4s ease; }

@keyframes hn-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  50% { transform: translateX(6px); }
  75% { transform: translateX(-3px); }
}

/* ============== 圆盘叠放容器（flex 自然堆叠，稳态无需任何 transform） ============== */

.peg-stack {
  position: absolute;
  bottom: 16px;              /* 坐在底座之上 */
  left: 50%;
  transform: translateX(-50%);
  width: max-content;        /* 由最宽圆盘撑开，小盘居中 */
  display: flex;
  flex-direction: column-reverse;  /* DOM 顺序 [4,3,2,1] → 视觉 4 在底、1 在顶 */
  align-items: center;
  pointer-events: none;
  z-index: 4;
}
/* 飞行中的圆盘所在柱提升层级，确保越过其它柱子 */
.peg-stack.is-flying-host { z-index: 8; }

/* ============== 圆盘 · 扁平胶囊（2D，flex 自然定位，稳态零 transform） ============== */

.disk {
  position: relative;
  flex: 0 0 auto;
  border-radius: 999px;
  /* 顶部高光 + 底部暗带 + 投影，扁平但保留质感 */
  box-shadow:
    inset 0 3px 5px rgba(255, 255, 255, 0.50),
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    inset 0 -4px 6px rgba(0, 0, 0, 0.28),
    0 5px 9px rgba(0, 0, 0, 0.35);
  transition: box-shadow 0.2s ease;
  will-change: transform;
  pointer-events: auto;
}

/* P0：圆盘数字标签（对标站风格，色弱玩家也能区分大小盘） */
.disk .disk-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  user-select: none;
  font-variant-numeric: tabular-nums;
}

/* 不同圆盘：宽度梯度 + 颜色梯度 + 不同厚度（位置完全由 flex 堆叠决定，无硬编码偏移）
   P0：id-N 改为通用梯度，让 3/4/5/6 盘共用一套宽度；最窄 56px、最宽 252px */
.disk.id-1 {
  width: 56px;
  height: var(--disk-height-1);
  background:
    radial-gradient(ellipse 70% 90% at 35% 25%,
      var(--disk-1-top) 0%,
      var(--disk-1-mid) 50%,
      var(--disk-1-bot) 100%);
}
.disk.id-2 {
  width: 92px;
  height: var(--disk-height-2);
  background:
    radial-gradient(ellipse 70% 90% at 35% 25%,
      var(--disk-2-top) 0%,
      var(--disk-2-mid) 50%,
      var(--disk-2-bot) 100%);
}
.disk.id-3 {
  width: 132px;
  height: var(--disk-height-3);
  background:
    radial-gradient(ellipse 70% 90% at 35% 25%,
      var(--disk-3-top) 0%,
      var(--disk-3-mid) 50%,
      var(--disk-3-bot) 100%);
}
.disk.id-4 {
  width: 172px;
  height: var(--disk-height-4);
  background:
    radial-gradient(ellipse 70% 90% at 35% 25%,
      var(--disk-4-top) 0%,
      var(--disk-4-mid) 50%,
      var(--disk-4-bot) 100%);
}
.disk.id-5 {
  width: 212px;
  height: var(--disk-height-5);
  background:
    radial-gradient(ellipse 70% 90% at 35% 25%,
      var(--disk-5-top) 0%,
      var(--disk-5-mid) 50%,
      var(--disk-5-bot) 100%);
}
.disk.id-6 {
  width: 252px;
  height: var(--disk-height-6);
  background:
    radial-gradient(ellipse 70% 90% at 35% 25%,
      var(--disk-6-top) 0%,
      var(--disk-6-mid) 50%,
      var(--disk-6-bot) 100%);
}

/* 飞行中的圆盘（WAAPI 移动动画期间）：抬到最上层、不拦截点击 */
.disk.is-flying {
  pointer-events: none;
  z-index: 20;
}

/* 提示源圆盘脉冲 */
.disk.is-hint-source {
  animation: hn-disk-pulse 1.5s ease-in-out infinite;
}

@keyframes hn-disk-pulse {
  0%, 100% {
    box-shadow:
      inset 0 4px 6px rgba(255, 255, 255, 0.55),
      inset 0 1px 0 rgba(255, 255, 255, 0.7),
      inset 0 -3px 4px rgba(0, 0, 0, 0.30),
      0 4px 8px rgba(0, 0, 0, 0.35),
      0 0 0 3px rgba(245, 158, 11, 0.55),
      0 8px 20px rgba(245, 158, 11, 0.40);
  }
  50% {
    box-shadow:
      inset 0 4px 6px rgba(255, 255, 255, 0.55),
      inset 0 1px 0 rgba(255, 255, 255, 0.7),
      inset 0 -3px 4px rgba(0, 0, 0, 0.30),
      0 4px 8px rgba(0, 0, 0, 0.35),
      0 0 0 6px rgba(245, 158, 11, 0.85),
      0 12px 28px rgba(245, 158, 11, 0.60);
  }
}

/* 圆盘入场动画改由 JS 驱动（避免与 data-attr 位置矩阵冲突） */

/* ============================================================
   状态栏 HUD（桌面右栏 / 移动紧凑条）
   ============================================================ */

.workbench {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 245, 255, 0.95) 100%);
  border-radius: 16px;
  border: 1px solid var(--surface-border);
  box-shadow: var(--shadow-card);
  padding: 18px;
}
.workbench-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--primary);
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--surface-border);
}

.stat-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}
.stat {
  background: linear-gradient(135deg, var(--surface-soft) 0%, rgba(255, 255, 255, 0.5) 100%);
  border-radius: 10px;
  padding: 10px 12px;
  border: 1px solid var(--surface-border);
  box-shadow: 0 2px 4px rgba(76, 29, 149, 0.04);
}
.stat .l {
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--text-mute);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.stat .v {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.stat.is-best .v { color: var(--primary); }
.stat .v small {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-mute);
  margin-left: 4px;
}

.btn-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.btn {
  flex: 1;
  min-width: 90px;
  background: var(--surface-soft);
  color: var(--text);
  border: 1px solid var(--surface-border);
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
  font-family: inherit;
}
.btn:hover:not(:disabled) {
  background: var(--primary-fade);
  border-color: var(--primary-soft);
  color: var(--primary);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(76, 29, 149, 0.12);
}
.btn:active:not(:disabled) {
  transform: translateY(0);
}
.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.btn.primary {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-deep) 100%);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 12px rgba(109, 40, 217, 0.30);
}
.btn.primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(109, 40, 217, 0.45);
}

.status-info {
  margin-top: 12px;
  font-size: 12px;
  color: var(--text-mute);
  text-align: center;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  letter-spacing: 0.04em;
}
.status-info.is-win { color: var(--success); font-weight: 700; }
.status-info.is-hint { color: var(--warn); font-weight: 700; }

/* 移动端紧凑条 */
.hud-strip {
  display: none;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 12px;
  background: var(--surface-soft);
  border-radius: 10px;
  padding: 8px 10px;
  border: 1px solid var(--surface-border);
}
.hs-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-variant-numeric: tabular-nums;
}
.hs-item .hs-l {
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--text-mute);
  text-transform: uppercase;
}
.hs-item b {
  font-size: 14px;
  color: var(--text);
  font-weight: 700;
}
@media (max-width: 900px) {
  .hud-strip { display: grid; }
}

/* ============================================================
   胜利弹窗 · 3D 透视入场
   ============================================================ */

.modal-mask {
  position: fixed;
  inset: 0;
  background: rgba(15, 12, 41, 0.55);
  backdrop-filter: blur(8px);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.modal-mask.is-open { display: flex; animation: hn-mask-in 0.24s ease; }
@keyframes hn-mask-in { from { opacity: 0; } to { opacity: 1; } }

.modal {
  background: linear-gradient(135deg, #ffffff 0%, #faf5ff 100%);
  border-radius: 18px;
  padding: 28px;
  max-width: 420px;
  width: 100%;
  box-shadow: var(--shadow-deep);
  text-align: center;
  border: 1px solid var(--surface-border);
  animation: hn-modal-in 0.36s cubic-bezier(.2,.7,.3,1);
}
@keyframes hn-modal-in {
  from { opacity: 0; transform: translateY(24px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.modal h2 {
  font-size: 22px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 6px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.modal .sub {
  color: var(--text-soft);
  font-size: 13px;
  margin-bottom: 16px;
}
.stars-big {
  font-size: 28px;
  letter-spacing: 4px;
  color: var(--warn);
  margin-bottom: 16px;
  text-shadow: 0 0 12px rgba(245, 158, 11, 0.45);
}

.rating {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.18em;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 16px;
}
.rating.optimal {
  background: linear-gradient(135deg, #fde68a 0%, #f59e0b 100%);
  color: #78350f;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.30);
}
.rating.good {
  background: rgba(167, 139, 250, 0.18);
  color: var(--primary-deep);
}
.rating.normal {
  background: rgba(148, 163, 184, 0.18);
  color: var(--text-soft);
}

.result {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 20px;
}
.result .r {
  background: linear-gradient(135deg, var(--surface-soft) 0%, rgba(255, 255, 255, 0.6) 100%);
  border-radius: 10px;
  padding: 10px 6px;
  border: 1px solid var(--surface-border);
  box-shadow: 0 2px 4px rgba(76, 29, 149, 0.04);
}
.result .r .l {
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--text-mute);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.result .r .v {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.result .r.is-opt .v { color: var(--primary); }

.modal .actions {
  display: flex;
  gap: 8px;
  justify-content: center;
}
.modal .actions .btn { min-width: 120px; }

/* ============================================================
   Toast
   ============================================================ */

.toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(15, 12, 41, 0.92);
  color: #fff;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  z-index: 9998;
  opacity: 0;
  pointer-events: none;
  transition: all 0.24s ease;
  box-shadow: 0 8px 20px rgba(15, 12, 41, 0.30);
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.toast.error {
  background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
}
.toast.warn {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

/* ============================================================
   响应式微调
   ============================================================ */
@media (max-width: 600px) {
  .board { height: clamp(260px, 60vw, 340px); padding: 0 4% 24px; }
  .peg { width: clamp(84px, 26vw, 96px); }
  .disk.id-1 { width: 42px; }
  .disk.id-2 { width: 76px; }
  .disk.id-3 { width: 110px; }
  .disk.id-4 { width: 144px; }
  .disk.id-5 { width: 178px; }
  .disk.id-6 { width: 212px; }
  .peg::before { width: 12px; }
  .peg .peg-base { width: clamp(72px, 22vw, 96px); }
  .board-card { padding: 18px 16px 22px; }
  .workbench { padding: 14px; }
  .stat .v { font-size: 16px; }
  .modal { padding: 22px; }
}

/* 高 DPI 屏：避免 1px 边线模糊 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .board { border-width: 1.5px; }
}