/* ====== 生活助手 - 公共样式（Alipay/WeChat 设计语言）====== */
:root {
  /* Brand */
  --primary: #07c160; --primary-dark: #06ad56; --primary-light: #e8f5e9;
  --blue: #1677ff; --blue-light: #e6f4ff;
  --danger: #e94560; --danger-light: #fff0f3;
  --warning: #f59e0b; --warning-light: #fffbf0;
  --info: #1677ff;

  /* Surfaces */
  --bg: #f5f5f5; --card: #ffffff; --card-hover: #fafafa;
  --sheet: #f8f9fa;

  /* Text */
  --text: #1a1a1a; --text-secondary: #666666; --text-muted: #999999; --text-placeholder: #bfbfbf;

  /* Borders */
  --border: #e8e8e8; --border-light: #f0f0f0; --divider: #f5f5f5;

  /* Shadows — 支付宝风格极轻柔 */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.10);

  /* Radii */
  --radius-xs: 6px; --radius-sm: 8px; --radius: 12px; --radius-lg: 16px; --radius-xl: 20px;
  --radius-full: 9999px;

  /* Spacing (8px grid) */
  --sp-xs: 4px; --sp-sm: 8px; --sp-md: 12px; --sp-lg: 16px; --sp-xl: 24px;

  /* Typography */
  --font-xs: 11px; --font-sm: 12px; --font-md: 14px; --font-lg: 16px; --font-xl: 17px;
  --font-2xl: 20px; --font-3xl: 24px; --font-hero: 36px;

  /* Animation */
  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);
  --spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* Safe area */
  --safe-bottom: constant(safe-area-inset-bottom, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --touch-min: 44px;
  --touch-min-sm: 44px;
  --touch-min-lg: 56px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  background: var(--bg); color: var(--text); font-size: var(--font-md); line-height: 1.5;
  -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased;
  user-select: none; -webkit-user-select: none;
  -webkit-overflow-scrolling: touch;
}

/* ====== Cards ====== */
.card {
  background: var(--card); border-radius: var(--radius); padding: var(--sp-lg);
  box-shadow: var(--shadow-sm); transition: box-shadow 0.2s var(--ease-out);
}
.card-pressable:active { background: var(--card-hover); }
.section { margin: var(--sp-md); }
.section-title {
  font-size: var(--font-lg); font-weight: 600; margin-bottom: var(--sp-md);
  display: flex; align-items: center; 
}
.section-title > * + * { margin-left: var(--sp-sm); }

/* Hero number (large stat) */
.hero-num { font-size: var(--font-hero); font-weight: 700; line-height: 1.1; letter-spacing: -1px; }
.hero-num .unit { font-size: var(--font-lg); font-weight: 400; color: var(--text-secondary); margin-left: 2px; }

/* ====== Buttons ====== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; 
  padding: 11px 24px; border: none; border-radius: var(--radius-sm);
  font-size: var(--font-lg); font-weight: 600; cursor: pointer; text-align: center;
  transition: all 0.15s var(--ease-out); font-family: inherit;
  min-height: var(--touch-min); position: relative; overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.btn > * + * { margin-left: 6px; }
.btn:active { transform: scale(0.96); }
.btn::after {
  content: ''; position: absolute; top:0;right:0;bottom:0;left:0; background: rgba(0,0,0,0);
  transition: background 0.2s; border-radius: inherit;
}
.btn:active::after { background: rgba(0,0,0,0.08); }

.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:active { background: var(--primary-dark); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-outline { background: #fff; color: var(--primary); border: 1px solid var(--primary); }
.btn-outline:active { background: var(--primary-light); }
.btn-ghost { background: transparent; color: var(--text-secondary); }
.btn-block { display: flex; width: 100%; }
.btn-sm { padding: 7px 16px; font-size: var(--font-md); min-height: var(--touch-min-sm); }
.btn-lg { padding: 14px 32px; font-size: var(--font-xl); border-radius: var(--radius); }

/* 工具页「分享给朋友」按钮 */
.share-tool-btn {
  display: flex; width: 100%; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; margin: 4px 0 12px;
  border: 1px solid var(--primary); border-radius: 12px;
  background: #fff; color: var(--primary); font-size: 14px; font-weight: 600;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.share-tool-btn:active { background: var(--primary-light); transform: scale(0.98); }

/* ====== 语音开关按钮（学习工具共用，Tools.voiceBtnHTML 生成）====== */
.voice-toggle-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--border); background: #fff; font-size: 18px;
  cursor: pointer; box-shadow: var(--shadow-sm); flex-shrink: 0;
  -webkit-tap-highlight-color: transparent; transition: transform 0.15s var(--ease-out);
}
.voice-toggle-btn:active { transform: scale(0.92); }
.voice-toggle-btn.sm { width: 36px; height: 36px; font-size: 15px; }
.theme-kids .voice-toggle-btn {
  border-color: rgba(255,255,255,0.7); background: rgba(255,255,255,0.92);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* ====== Inputs ====== */
.input {
  width: 100%; padding: 11px var(--sp-md); border: 1px solid var(--border);
  border-radius: var(--radius-sm); font-size: var(--font-lg); font-family: inherit;
  outline: none; background: #fafafa; transition: all 0.2s var(--ease-out);
  -webkit-appearance: none;
}
.input:focus { border-color: var(--primary); background: #fff; box-shadow: 0 0 0 3px rgba(7,193,96,0.1); }
.input::placeholder { color: var(--text-placeholder); }

.input-row {
  display: flex; align-items: center;  margin-bottom: var(--sp-md);
}
.input-row > * + * { margin-left: var(--sp-sm); }
.input-row label { font-size: var(--font-md); color: var(--text-secondary); white-space: nowrap; min-width: 64px; }
.input-row .unit { font-size: var(--font-sm); color: var(--text-muted); white-space: nowrap; }

/* ====== Chips ====== */
.chip-row { display: flex;  flex-wrap: wrap; }
.chip-row > * + * { margin-left: var(--sp-sm); }
.chip {
  padding: 8px 16px; border-radius: var(--radius-full); border: 1px solid var(--border);
  background: #fff; font-size: var(--font-sm); color: var(--text-secondary); cursor: pointer;
  transition: all 0.2s var(--ease-out); min-height: var(--touch-min-sm); display: flex; align-items: center;
}
.chip:active { transform: scale(0.95); }
.chip.selected { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ====== Tables ====== */
.rt { width: 100%; border-collapse: collapse; font-size: var(--font-sm); margin-top: var(--sp-sm); }
.rt th { background: #f9fafb; padding: 10px 8px; font-weight: 500; color: var(--text-secondary); font-size: var(--font-xs); border-bottom: 2px solid var(--border); text-align: center; }
.rt td { padding: 10px 8px; text-align: center; border-bottom: 1px solid var(--border-light); }
.rt .rn { text-align: left; font-weight: 500; }
.rt .ra { font-weight: 600; }
.rt .rtr td { background: #f9fafb; font-weight: 700; border-top: 2px solid var(--border); }

/* ====== Summary Grid ====== */
.sr { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-sm); margin-top: var(--sp-sm); }
.sc { background: #f9fafb; border-radius: var(--radius-sm); padding: 14px 8px; text-align: center; }
.sc-l { font-size: var(--font-xs); color: var(--text-muted); margin-bottom: 4px; }
.sc-v { font-size: var(--font-xl); font-weight: 700; }

/* ====== Colors ====== */
.danger { color: var(--danger); }
.success { color: var(--primary); }
.primary { color: var(--blue); }

/* ====== 政策/说明盒（办公财务工具共享） ====== */
.policy-box { background: #f9fafb; border-radius: var(--radius-sm); padding: var(--sp-md); font-size: var(--font-sm); color: var(--text-secondary); line-height: 1.8; }
.policy-box b { color: var(--text); }

/* ====== 玩法说明（折叠，学习/游戏/番茄等工具共享；与 learn-base.css 的 .rules 一致） ====== */
.rules {
  width: 100%;
  margin-top: 10px;
  background: var(--card);
  border: 1px solid var(--border-light);
  border-radius: 14px;
  padding: 6px 12px;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.7;
  text-align: center;
}
.rules summary { cursor: pointer; font-weight: 700; font-size: 14px; color: var(--text); min-height: 44px; display: flex; align-items: center; justify-content: center; }
.rules p { margin: 2px 0; text-align: center; }

/* ====== Limit info / Alert ====== */
.limit-info {
  margin-top: var(--sp-sm); padding: 10px var(--sp-md); background: var(--warning-light);
  border-radius: var(--radius-sm); font-size: var(--font-sm); color: #92400e;
  border: 1px solid #fde68a; line-height: 1.6;
}

/* ====== 「!」说明按钮（录入项/结果指标右上角，点击展示解释） ====== */
.info-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; border-radius: 50%; background: #e6e6e6; color: #888;
  font-size: 10px; font-weight: 700; line-height: 1; cursor: pointer;
  vertical-align: top; margin-left: 3px; flex-shrink: 0; user-select: none;
}
.info-ic:active { background: var(--primary, #07c160); color: #fff; }
/* 浮动提示条：脱离文档流，不改变原布局；半透明深色底，靠近「!」按钮弹出 */
.info-tip {
  display: none; position: fixed; z-index: 9999;
  background: rgba(20,20,24,0.86); color: #f5f5f5;
  border-radius: 10px; padding: 10px 12px;
  font-size: 12px; line-height: 1.7;
  box-shadow: 0 4px 16px rgba(0,0,0,0.28);
  pointer-events: none;
}
.info-tip.show { display: block; }

/* ====== Step Indicator ====== */
.steps { display: flex; justify-content: center;  margin-bottom: var(--sp-lg); }
.steps > * + * { margin-left: 4px; }
.step-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); transition: all 0.3s var(--ease-out); }
.step-dot.active { background: var(--primary); width: 24px; border-radius: 4px; }
.step-dot.done { background: var(--primary); }

/* ====== Progress Ring ====== */
.ring-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.ring-wrap canvas { transform: rotate(-90deg); }
.ring-center { position: absolute; text-align: center; }

/* ====== Bottom Sheet ====== */
.sheet-overlay { position: fixed; top:0;right:0;bottom:0;left:0; background: rgba(0,0,0,0.4); z-index: 300; display: none; opacity: 0; transition: opacity 0.25s var(--ease-out); }
.sheet-overlay.open { display: block; opacity: 1; }
.sheet-panel {
  position: fixed; bottom: 0; left: 0; right: 0; background: #fff;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: var(--sp-lg); padding-bottom: calc(var(--sp-lg) + var(--safe-bottom));
  z-index: 301; transform: translateY(100%); transition: transform 0.3s var(--spring);
  max-height: 70vh; overflow-y: auto;
}
.sheet-panel.open { transform: translateY(0); }
.sheet-handle { width: 36px; height: 4px; background: var(--border); border-radius: 2px; margin: 0 auto var(--sp-lg); }

/* ====== Search Bar ====== */
.search-bar {
  display: flex; align-items: center; padding: var(--sp-sm) var(--sp-md);
  background: #f5f5f5; border-radius: var(--radius); margin-bottom: var(--sp-md);
}
.search-bar > * + * { margin-left: var(--sp-sm); }
.search-bar input { flex: 1; border: none; background: transparent; font-size: var(--font-md); outline: none; }
.search-bar .search-icon { font-size: 18px; color: var(--text-muted); }

/* ====== Horizontal Scroll ====== */
.hscroll { display: flex;  overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
.hscroll > * + * { margin-left: var(--sp-sm); }
.hscroll::-webkit-scrollbar { display: none; }
.hscroll > * { scroll-snap-align: start; flex-shrink: 0; }

/* ====== Calculator keys ====== */
.calc-display { margin: var(--sp-md); background: #fff; border-radius: var(--radius-lg); padding: var(--sp-xl) var(--sp-lg); text-align: right; box-shadow: var(--shadow-sm); min-height: 100px; }
.calc-expr { font-size: var(--font-md); color: var(--text-muted); min-height: 20px; word-break: break-all; }
.calc-result { font-size: 42px; font-weight: 700; word-break: break-all; line-height: 1.1; letter-spacing: -1px; }
.calc-result.sm { font-size: 32px; } .calc-result.xs { font-size: 22px; }
.calc-keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 0 4px; }
.c-key {
  aspect-ratio: 1; border: none; border-radius: 50%; font-size: 24px; font-weight: 500;
  cursor: pointer; background: #fff; color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  display: flex; align-items: center; justify-content: center; transition: all 0.1s var(--ease-out);
  min-height: 56px; -webkit-tap-highlight-color: transparent;
}
.c-key:active { transform: scale(0.9); background: #f0f0f0; }
.c-key.op { background: var(--primary-light); color: var(--primary); font-weight: 600; }
.c-key.op:active { background: #c8e6c9; }
.c-key.eq { background: var(--primary); color: #fff; font-weight: 700; }
.c-key.eq:active { background: var(--primary-dark); }
.c-key.fn { background: #f5f5f5; color: var(--text-secondary); font-size: 18px; }
.c-key.z { grid-column: span 2; aspect-ratio: auto; border-radius: 36px; }

/* ====== Image canvas ====== */
.canvas-area { text-align: center; margin: var(--sp-md) 0; }
.canvas-area canvas, .canvas-area img { max-width: 100%; border-radius: var(--radius); }

/* ====== Phrase cards ====== */
.phrase-card {
  background: #fff; border-radius: var(--radius); padding: var(--sp-lg);
  box-shadow: var(--shadow-sm); cursor: pointer; transition: all 0.15s var(--ease-out);
  display: flex; align-items: center;
  min-height: var(--touch-min);
}
.phrase-card > * + * { margin-left: var(--sp-md); }
.phrase-card:active { background: #fafafa; transform: scale(0.98); }
.phrase-card .ph-icon { font-size: 24px; flex-shrink: 0; }
.phrase-card .ph-body { flex: 1; min-width: 0; }
.phrase-card .ph-en { font-size: var(--font-lg); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phrase-card .ph-cn { font-size: var(--font-sm); color: var(--text-secondary); margin-top: 2px; }
.phrase-card .ph-tag { display: inline-block; padding: 2px 8px; background: var(--primary-light); color: var(--primary); border-radius: 10px; font-size: var(--font-xs); margin-top: 4px; }

/* ====== Filter sliders ====== */
.filter-slider { display: flex; align-items: center;  margin-bottom: var(--sp-sm); }
.filter-slider > * + * { margin-left: 10px; }
.filter-slider label { font-size: var(--font-sm); min-width: 52px; color: var(--text-secondary); }
.filter-slider input[type=range] { flex: 1; height: 4px; -webkit-appearance: none; appearance: none; background: var(--border); border-radius: 2px; outline: none; }
.filter-slider input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 2px solid var(--primary); box-shadow: var(--shadow-sm); cursor: pointer; }
.filter-slider span { font-size: var(--font-sm); min-width: 36px; text-align: right; color: var(--text-muted); }

/* ====== Tool row (shared flex row) ====== */
.tool-row { display: flex;  align-items: center; flex-wrap: wrap; }
.tool-row > * + * { margin-left: var(--sp-sm); }

/* ====== Badge ====== */
.badge {
  display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--radius-full);
  font-size: var(--font-xs); font-weight: 600; line-height: 1.4;
}
.badge-hot { background: var(--danger-light); color: var(--danger); }
.badge-new { background: var(--blue-light); color: var(--blue); }

/* ====== Empty State ====== */
.empty-state { text-align: center; padding: 48px 24px; color: var(--text-muted); }
.empty-state .empty-icon { font-size: 48px; margin-bottom: var(--sp-lg); }
.empty-state .empty-title { font-size: var(--font-lg); font-weight: 600; color: var(--text-secondary); margin-bottom: var(--sp-sm); }
.empty-state .empty-desc { font-size: var(--font-sm); }

/* ====== Divider ====== */
.divider { height: 1px; background: var(--border-light); margin: var(--sp-md) 0; }
.divider-thick { height: 8px; background: var(--bg); margin: var(--sp-md) calc(-1 * var(--sp-lg)); }

/* ====== Timeline ====== */
.timeline { position: relative; padding-left: 20px; }
.timeline::before { content: ''; position: absolute; left: 7px; top: 0; bottom: 0; width: 2px; background: var(--border); }
.timeline-item { position: relative; padding-bottom: var(--sp-lg); }
.timeline-item::before { content: ''; position: absolute; left: -16px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--primary); border: 2px solid #fff; box-shadow: var(--shadow-sm); }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item:last-child::before { background: var(--border); }

/* ====== Animations ====== */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.anim-fade-up { animation: fadeInUp 0.3s var(--ease-out); }
.anim-scale-in { animation: scaleIn 0.25s var(--spring); }

/* ====== Dark mode card (for calculator etc) ====== */
.card-dark { background: #1c1c1e; color: #fff; }
.card-dark .section-title { color: #fff; }

/* ====== Segmented Control ====== */
.segmented { display: flex; background: #f5f5f5; border-radius: var(--radius-sm); padding: 2px; }
.segmented-item { flex: 1; text-align: center; padding: 8px; border-radius: 6px; font-size: var(--font-sm); cursor: pointer; transition: all 0.2s var(--ease-out); color: var(--text-secondary); }
.segmented-item.active { background: #fff; color: var(--text); font-weight: 600; box-shadow: var(--shadow-sm); }

/* ====== Prevent edge sticking ====== */
.page-wrap{padding:0 12px;max-width:100%;overflow-x:hidden;}
@media(max-width:380px){.page-wrap{padding:0 8px;}}

/* ====== AI Markdown 渲染（Tools.mdToHtml 输出，统一规范：左对齐 / 紧凑行距 / 标题加粗） ====== */
.md-render{line-height:1.6;word-break:break-word;text-align:left;color:var(--text);}
.md-render h5{margin:10px 0 4px;font-size:15px;font-weight:700;color:var(--text);}
.md-render p{margin:4px 0;}
.md-render strong{font-weight:700;}
.md-render ul,.md-render ol{margin:4px 0 4px 18px;padding:0;}
.md-render li{margin:2px 0;}
.md-render blockquote{margin:6px 0;padding:4px 10px;border-left:3px solid var(--border);color:var(--text-secondary);}
.md-render code{background:#f5f5f5;border-radius:4px;padding:1px 5px;font-size:13px;}
.md-render a{color:var(--blue);}

/* ====== aspect-ratio 兼容兜底（旧内核 <Chrome 88 不支持，避免元素塌陷）====== */
@supports not (aspect-ratio: 1) {
  .c-key, .key { min-height: 52px; min-width: 52px; }
  .grid-container, .board-wrap, .board, #boardCanvas { min-height: 320px; }
  .cell { min-height: 36px; }
}

/* ====== GEO 直接答案容器（各工具页共用，替代内联样式）======
 * 用法：<div class="geo-answer" data-geo-answer>
 *         <div class="geo-answer-head" onclick="...">💡 <span>工具说明</span></div>
 *         <div class="geo-answer-body"></div>
 *       </div>
 * js/seo.js 命中时设置容器 display，并把后台 seo_summary 填进 .geo-answer-body
 */
.geo-answer { display: none; }
.geo-answer-head {
  display: flex; align-items: center; gap: 5px;
  font-size: var(--font-xs, 12px); color: var(--text-muted, #888);
  margin: 8px 12px 4px; cursor: pointer;
  min-height: var(--touch-min, 44px); padding: 8px 4px; box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
.geo-answer-body {
  display: none;
  background: #f7faf7; color: #333;
  font-size: 13px; line-height: 1.7;
  padding: 10px 14px; margin: 0 12px 8px;
  border-radius: 8px; border: 1px solid #e2efe2;
}

/* ====== 3D 骰子组件（与情侣场景骰子样式统一）======
 * 用法：<div class="dice3d" style="--dice-color:#1677ff"><!-- Tools.buildDice3D 填充 --></div>
 * 尺寸变体：.dice3d-lg(84px) / 默认(60px) / .dice3d-sm(48px)
 * 颜色：通过 --dice-color 设置（不同玩家/角色不同色）
 */
.dice3d { --dice-size: 60px; --dice-color: #1677ff; width: var(--dice-size); height: var(--dice-size); perspective: calc(var(--dice-size) * 4.7); position: relative; flex-shrink: 0; -webkit-tap-highlight-color: transparent; }
.dice3d-lg { --dice-size: 84px; }
.dice3d-sm { --dice-size: 48px; }
.dice3d-dice { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 1.1s cubic-bezier(.2,.6,.3,1); }
.dice3d .face { position: absolute; inset: 0; background: var(--dice-color); border-radius: 15%; display: grid; grid-template-columns: repeat(3,1fr); grid-template-rows: repeat(3,1fr); padding: 11%; box-sizing: border-box; box-shadow: inset 0 0 8px rgba(0,0,0,0.12); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.dice3d .face i { width: 58%; aspect-ratio: 1; border-radius: 50%; background: #fff; margin: auto; display: block; opacity: 0; }
.dice3d .f1 { transform: translateZ(calc(var(--dice-size) / 2)); }
.dice3d .f2 { transform: rotateY(90deg) translateZ(calc(var(--dice-size) / 2)); }
.dice3d .f3 { transform: rotateX(90deg) translateZ(calc(var(--dice-size) / 2)); }
.dice3d .f4 { transform: rotateX(-90deg) translateZ(calc(var(--dice-size) / 2)); }
.dice3d .f5 { transform: rotateY(-90deg) translateZ(calc(var(--dice-size) / 2)); }
.dice3d .f6 { transform: rotateY(180deg) translateZ(calc(var(--dice-size) / 2)); }
.dice3d.rolling { pointer-events: none; }

/* ====== 3D 骰子（情侣场景同款实现，微信已验证正常转动）======
 * 用法：<div class="dice-scene" style="--dice-color:#1677ff"></div>
 * 构建/掷骰用 Tools.buildDiceLovers / rollDiceLovers / rollDiceLoversTo
 */
.dice-scene { width: 72px; height: 72px; perspective: 340px; position: relative; flex-shrink: 0; -webkit-tap-highlight-color: transparent; }
.dice-scene.sm { width: 52px; height: 52px; perspective: 260px; }
.dice-scene .dice { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 1.1s cubic-bezier(.2,.6,.3,1); }
.dice-scene .dice .face { position: absolute; inset: 0; background: var(--dice-color, #fff); border-radius: 14%; display: grid; grid-template-columns: repeat(3,1fr); grid-template-rows: repeat(3,1fr); padding: 11%; box-sizing: border-box; box-shadow: inset 0 0 8px rgba(0,0,0,0.08); }
.dice-scene .dice .face i { width: 58%; aspect-ratio: 1; border-radius: 50%; background: #fff; margin: auto; display: block; opacity: 0; }
.dice-scene .dice .f1 { transform: translateZ(36px); }
.dice-scene .dice .f2 { transform: rotateY(90deg) translateZ(36px); }
.dice-scene .dice .f3 { transform: rotateX(90deg) translateZ(36px); }
.dice-scene .dice .f4 { transform: rotateX(-90deg) translateZ(36px); }
.dice-scene .dice .f5 { transform: rotateY(-90deg) translateZ(36px); }
.dice-scene .dice .f6 { transform: rotateY(180deg) translateZ(36px); }
.dice-scene.sm .dice .f1 { transform: translateZ(26px); }
.dice-scene.sm .dice .f2 { transform: rotateY(90deg) translateZ(26px); }
.dice-scene.sm .dice .f3 { transform: rotateX(90deg) translateZ(26px); }
.dice-scene.sm .dice .f4 { transform: rotateX(-90deg) translateZ(26px); }
.dice-scene.sm .dice .f5 { transform: rotateY(-90deg) translateZ(26px); }
.dice-scene.sm .dice .f6 { transform: rotateY(180deg) translateZ(26px); }
.dice-scene.rolling { pointer-events: none; }