/* tools/dice/tool.css —— DicePal
   ⚠️ 全部选择器限定在 #tool-root 内，且类名统一 dc- 前缀。
      原版用的是 .scene / .cube / .face / .dot / .row / .controls 这类通用名，
      直接搬进多工具站会和外壳、和别的工具撞车 —— 迁移时全部改名。 */

/* ── 骰子舞台 ───────────────────────────────────────────── */
/* 挂载点已改为透明，这几块直接坐在页面底色上（与原版一致）。 */
#tool-root .dc-stage {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 30px; min-height: 100px; margin: 8px 0 30px;
}
#tool-root .dc-scene { width: 80px; height: 80px; perspective: 600px; }
#tool-root .dc-cube {
  width: 100%; height: 100%; position: relative;
  transform-style: preserve-3d; transform: translateZ(-40px);
}
/* 原版配色：白骰面 + 红点 + 内阴影 */
#tool-root .dc-face {
  position: absolute; width: 80px; height: 80px; box-sizing: border-box;
  background: var(--dice-face); border: 2px solid var(--dice-edge); border-radius: 10px;
  display: flex; padding: 8px; box-shadow: inset 0 0 15px rgba(0, 0, 0, .1);
}
#tool-root .dc-dot {
  display: block; width: 16px; height: 16px; border-radius: 50%;
  background: var(--accent); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .3);
}

#tool-root .dc-front  { transform: rotateY(0deg)    translateZ(40px); justify-content: center; align-items: center; }
#tool-root .dc-right  { transform: rotateY(90deg)   translateZ(40px); justify-content: space-between; }
#tool-root .dc-back   { transform: rotateY(180deg)  translateZ(40px); justify-content: space-between; flex-direction: column; }
#tool-root .dc-left   { transform: rotateY(-90deg)  translateZ(40px); justify-content: space-between; flex-direction: column; align-items: center; }
#tool-root .dc-top    { transform: rotateX(90deg)   translateZ(40px); justify-content: space-between; flex-direction: column; }
#tool-root .dc-bottom { transform: rotateX(-90deg)  translateZ(40px); justify-content: space-between; flex-direction: column; }

#tool-root .dc-right .dc-dot:nth-child(1) { align-self: flex-start; }
#tool-root .dc-right .dc-dot:nth-child(2) { align-self: flex-end; }
#tool-root .dc-back  .dc-dot:nth-child(1) { align-self: flex-start; }
#tool-root .dc-back  .dc-dot:nth-child(2) { align-self: center; }
#tool-root .dc-back  .dc-dot:nth-child(3) { align-self: flex-end; }
#tool-root .dc-left  .dc-row { display: flex; gap: 16px; }
#tool-root .dc-top .dc-row,
#tool-root .dc-bottom .dc-row { display: flex; justify-content: space-between; }
#tool-root .dc-top .dc-mid { justify-content: center; }

/* 弹跳只用【负向】位移。正向 translateY 会把可滚动溢出区撑高，
   那正是结构铁律禁止的东西（底部空白 bug 的来源之一）。 */
@keyframes dc-bounce {
  0%, 50%, 100% { transform: translateY(0); }
  30%           { transform: translateY(-40px); }
  70%           { transform: translateY(-15px); }
}
#tool-root .dc-bounce { animation: dc-bounce .6s ease-in-out; }

/* ── 控制条 ─────────────────────────────────────────────── */
#tool-root .dc-controls {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 15px; padding: 20px; border-radius: var(--radius);
  background: var(--panel); border: 1px solid var(--line); margin-bottom: 20px;
}
#tool-root .dc-group { display: inline-flex; align-items: center; gap: 8px; }
#tool-root .dc-group label { font-size: 14px; font-weight: 700; }
#tool-root .dc-num { width: 5em; text-align: center; }

/* 按钮宽度恒定：撑位与标签占同一个网格单元，宽度 = 两者最大值。
   撑位始终是最长态（"转动中 15s"），所以按下去按钮不会变宽、不会挤走旁边的输入框。 */
#tool-root .dc-roll { display: grid; place-items: center; }
#tool-root .dc-roll > * { grid-area: 1 / 1; }
#tool-root .dc-sizer { visibility: hidden; pointer-events: none; }
#tool-root .dc-label { font-variant-numeric: tabular-nums; }
/* 禁用态由 core.css 的 .field:disabled / .btn:disabled 统一处理（等效色，不用 opacity）*/

/* ── 结果 ───────────────────────────────────────────────── */
/* 原版的分数条：深底、蓝字、居中 */
#tool-root .dc-score {
  min-height: 3em; display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 700; color: var(--btn);
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); margin-bottom: 26px;
  visibility: hidden;
}
/* 用 visibility 而不是 opacity 做显隐，同样是躲开合成层那条（C3）。
   高度提前占好，结果出现时布局不跳。 */
#tool-root .dc-score.is-on { visibility: visible; }

/* ── 历史 ───────────────────────────────────────────────── */
#tool-root .dc-history {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px;
}
#tool-root .dc-history-head {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;
}
#tool-root .dc-history-head h3 { margin: 0; font-size: 15px; }
#tool-root .dc-small { padding: 5px 12px; font-size: 13px; }
/* 列表自己内滚。半透明底没挂在这个 overflow 元素上（C4）—— 底是不滚的父级给的。

   🔒 高度用【固定值】而不是 max-height。
      用 max-height 的话，历史从 0 长到上限要经过好几条记录，
      每投一次整块就往下顶一次 —— 转 5 次布局抖 5 次，体验很差（Jay 报的）。
      固定高度换来的是「第一次进页面就是最终高度，之后永不变化」。
      代价是空态时有一块留白，这个交换是划算的：布局稳定 > 空态紧凑。 */
#tool-root .dc-history-list {
  list-style: none; margin: 0; padding: 0;
  height: 190px; overflow-y: auto; overscroll-behavior: contain;
}
#tool-root .dc-history-list li {
  display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
  padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: 14px;
}
#tool-root .dc-meta { color: var(--ink-faint); font-family: var(--mono); font-size: 12px; }
#tool-root .dc-history-list li strong { color: var(--ink); white-space: nowrap; }
#tool-root .dc-history-list::-webkit-scrollbar { width: 4px; }
#tool-root .dc-history-list::-webkit-scrollbar-thumb { background: var(--line); border-radius: 2px; }
/* 空态在固定高度的框里居中，否则一行字孤零零贴在顶上，像是坏了 */
#tool-root .dc-empty {
  color: var(--ink-faint); font-size: 14px;
  height: 100%; display: flex; align-items: center; justify-content: center;
  border-bottom: 0;
}