/* ════════════════════════════════════════════════════════════
   divination-liuyao-clean.css
   六爻占卜 · 清新奶油风 + 苹果毛玻璃 重设计
   命名空间: .ly2-   (起卦页)  +  #liuyao-result-page 奶油化覆盖
   ════════════════════════════════════════════════════════════ */

:root {
  --ly2-cream: #FBF8F3;
  --ly2-cream-2: #F4EEE4;
  --ly2-glass: rgba(255, 255, 255, 0.66);
  --ly2-glass-hover: rgba(255, 255, 255, 0.82);
  --ly2-border: rgba(255, 255, 255, 0.75);
  --ly2-line: rgba(60, 60, 95, 0.07);
  --ly2-gold: #D4950C;
  --ly2-gold-light: #E8B84B;
  --ly2-gold-soft: rgba(212, 149, 12, 0.10);
  --ly2-purple: #6C5CE7;
  --ly2-purple-soft: rgba(108, 92, 231, 0.10);
  --ly2-ink: #36343f;
  --ly2-ink-2: #8a8f9c;
  --ly2-ink-3: #b6bac6;
  --ly2-shadow: 0 8px 30px rgba(108, 92, 231, 0.10), 0 2px 8px rgba(0, 0, 0, 0.03);
  --ly2-radius: 22px;
}

/* ── 背景：沿用与「命理玄机」一致的全局淡紫背景，不再覆盖奶油层 ── */
/* （原奶油柔光层已移除，使六爻与命理玄机观感统一） */

/* ── 页面骨架 ── */
.ly2-page {
  position: relative;
  isolation: isolate;
}
.ly2-wrap {
  max-width: 460px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── 页头微调（清爽） ── */
.ly2-page .div-header { margin-bottom: 18px; }
.ly2-page .div-header h2 {
  font-family: 'Noto Serif SC', serif;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--ly2-ink);
  background: none;
  -webkit-text-fill-color: currentColor;
}
.ly2-page .div-header .div-subtitle {
  color: var(--ly2-ink-2);
  letter-spacing: 1px;
}
.ly2-page .div-header-icon {
  box-shadow: 0 8px 22px rgba(212, 149, 12, 0.22);
  border-radius: 18px;
}

/* ── 毛玻璃卡片 ── */
.ly2-card {
  background: var(--ly2-glass);
  backdrop-filter: blur(22px) saturate(1.3);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  border: 1px solid var(--ly2-border);
  border-radius: var(--ly2-radius);
  box-shadow: var(--ly2-shadow);
  padding: 20px 18px;
  transition: box-shadow 0.4s ease, transform 0.4s ease;
}
.ly2-card-title {
  font-family: 'Noto Serif SC', serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 4px;
  color: var(--ly2-ink);
  text-align: center;
  margin-bottom: 16px;
}

/* ══ 问事卡 ══ */
.ly2-chips {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.ly2-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 11px 4px;
  border-radius: 14px;
  border: 1px solid var(--ly2-line);
  background: rgba(255, 255, 255, 0.5);
  color: var(--ly2-ink-2);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.22s ease;
}
.ly2-chip i { font-size: 19px; color: var(--ly2-ink-3); transition: color 0.22s ease; }
.ly2-chip:hover {
  border-color: rgba(212, 149, 12, 0.28);
  background: rgba(255, 255, 255, 0.78);
  transform: translateY(-1px);
}
.ly2-chip:hover i { color: var(--ly2-gold); }
.ly2-chip.active {
  border-color: rgba(212, 149, 12, 0.5);
  background: var(--ly2-gold-soft);
  color: var(--ly2-gold);
  box-shadow: 0 4px 14px rgba(212, 149, 12, 0.12);
}
.ly2-chip.active i { color: var(--ly2-gold); }

.ly2-input {
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid var(--ly2-line);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.ly2-input:focus-within {
  border-color: rgba(212, 149, 12, 0.45);
  box-shadow: 0 0 0 4px rgba(212, 149, 12, 0.08);
}
.ly2-textarea {
  width: 100%;
  min-height: 72px;
  resize: none;
  border: none;
  outline: none;
  background: transparent;
  padding: 13px 15px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ly2-ink);
  font-family: inherit;
}
.ly2-textarea::placeholder { color: var(--ly2-ink-3); font-style: italic; }
.ly2-ask-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 9px;
  font-size: 11.5px;
  color: var(--ly2-ink-3);
}

/* 输入校验抖动 */
@keyframes ly2Shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(3px); }
}
.ly2-shake { animation: ly2Shake 0.55s ease; }
.ly2-locked { opacity: 0.72; pointer-events: none; }

/* ══ 起卦卡 ══ */
.ly2-cast { text-align: center; }

/* 三枚扁平铜钱 */
.ly2-coins {
  display: flex;
  justify-content: center;
  gap: 18px;
  perspective: 600px;
  margin: 6px 0 10px;
  min-height: 60px;
  align-items: center;
}
.ly2-coin {
  width: 56px;
  height: 56px;
  transform-style: preserve-3d;
  transition: transform 0.3s ease;
}
.ly2-coin-inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 36% 30%, #F4D58A 0%, #E0A94B 38%, #C8881F 72%, #A86A14 100%);
  box-shadow:
    inset 0 1px 3px rgba(255, 255, 255, 0.55),
    inset 0 -3px 6px rgba(120, 70, 10, 0.35),
    0 4px 12px rgba(160, 110, 20, 0.28);
  border: 1.5px solid rgba(168, 106, 20, 0.5);
  transition: filter 0.3s ease, background 0.3s ease;
}
.ly2-coin-hole {
  width: 17px;
  height: 17px;
  border-radius: 4px;
  background: linear-gradient(160deg, #F6EFE2, #E7DCC6);
  box-shadow: inset 0 1px 3px rgba(120, 80, 20, 0.35);
}
/* 正面（亮金） / 反面（暗铜） */
.ly2-coin.is-heads .ly2-coin-inner { filter: brightness(1.08) saturate(1.1); }
.ly2-coin.is-tails .ly2-coin-inner {
  background: radial-gradient(circle at 36% 30%, #D8C49A 0%, #B69A6A 42%, #93764A 78%, #755C38 100%);
  filter: saturate(0.7) brightness(0.96);
}
.ly2-coin.settled { animation: ly2CoinDrop 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes ly2CoinDrop {
  0% { transform: translateY(-8px) scale(1.06); }
  60% { transform: translateY(2px) scale(0.98); }
  100% { transform: translateY(0) scale(1); }
}
.ly2-coin.spinning { animation: ly2CoinSpin 0.72s ease-in-out; }
@keyframes ly2CoinSpin {
  0%   { transform: rotateY(0deg) translateY(0); }
  25%  { transform: rotateY(540deg) translateY(-16px); }
  50%  { transform: rotateY(900deg) translateY(-22px); }
  75%  { transform: rotateY(1440deg) translateY(-10px); }
  100% { transform: rotateY(1800deg) translateY(0); }
}

/* 铜钱结果文字 */
.ly2-coin-result {
  font-family: 'Noto Serif SC', serif;
  font-size: 13px;
  letter-spacing: 1px;
  min-height: 20px;
  margin-bottom: 6px;
  color: var(--ly2-ink-2);
  transition: color 0.3s ease;
}
.ly2-coin-result.yang { color: var(--ly2-gold); }
.ly2-coin-result.yin { color: var(--ly2-purple); }
.ly2-coin-result.changing { color: #e07b5b; font-weight: 600; }

/* 卦象渐成 */
.ly2-hexagram {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 270px;
  margin: 10px auto 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid var(--ly2-line);
  transition: box-shadow 0.5s ease;
}
.ly2-hexagram.complete {
  box-shadow: 0 0 0 1px rgba(212, 149, 12, 0.18), 0 8px 26px rgba(212, 149, 12, 0.1);
}
.ly2-yao {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}
.ly2-yao-label {
  width: 26px;
  flex-shrink: 0;
  font-family: 'Noto Serif SC', serif;
  font-size: 11px;
  color: var(--ly2-ink-3);
  text-align: right;
  transition: color 0.3s ease;
}
.ly2-yao.filled .ly2-yao-label { color: var(--ly2-ink-2); }
.ly2-yao-line {
  flex: 1;
  display: flex;
  gap: 10px;
  align-items: center;
  height: 13px;
}
.ly2-bar { height: 11px; border-radius: 6px; flex: 1; transition: all 0.3s ease; }
/* 占位（未摇） */
.ly2-bar:not(.full):not(.half) {
  background: repeating-linear-gradient(90deg, var(--ly2-ink-3) 0 6px, transparent 6px 12px);
  opacity: 0.32;
  height: 3px;
}
/* 阳爻 — 整条暖金 */
.ly2-yao.yang .ly2-bar.full {
  background: linear-gradient(90deg, var(--ly2-gold-light), var(--ly2-gold));
  box-shadow: 0 1px 5px rgba(212, 149, 12, 0.25);
}
/* 阴爻 — 两段柔紫 */
.ly2-yao.yin .ly2-bar.half {
  background: linear-gradient(90deg, #9b91e0, var(--ly2-purple));
  box-shadow: 0 1px 5px rgba(122, 111, 214, 0.22);
}
/* 动爻标记 */
.ly2-yao.changing .ly2-yao-mark {
  position: absolute;
  right: -2px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  color: #e07b5b;
  line-height: 1;
}
.ly2-yao.changing .ly2-bar { box-shadow: 0 0 8px rgba(224, 123, 91, 0.4); }
/* 新填入的爻渐入 */
.ly2-yao.just-filled .ly2-yao-line { animation: ly2YaoIn 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes ly2YaoIn {
  0% { opacity: 0; transform: translateX(-10px); }
  100% { opacity: 1; transform: translateX(0); }
}

/* 状态文字 */
.ly2-status {
  font-family: 'Noto Serif SC', serif;
  font-size: 13px;
  letter-spacing: 1.5px;
  color: var(--ly2-ink-2);
  min-height: 20px;
  margin-bottom: 16px;
  transition: color 0.3s ease;
}
.ly2-status.done {
  color: var(--ly2-gold);
  font-weight: 700;
  letter-spacing: 2px;
}

/* 起卦按钮 */
.ly2-cast-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 20px;
  border: none;
  border-radius: 16px;
  font-family: 'Noto Serif SC', serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 4px;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, #E0A85B 0%, #D4950C 60%, #C2840A 100%);
  box-shadow: 0 8px 22px rgba(212, 149, 12, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: transform 0.2s ease, box-shadow 0.3s ease, opacity 0.3s ease;
}
.ly2-cast-btn i { font-size: 19px; }
.ly2-cast-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(212, 149, 12, 0.36); }
.ly2-cast-btn:active { transform: translateY(0); }
.ly2-cast-btn.casting { opacity: 0.85; cursor: default; transform: none; }
.ly2-cast-btn:disabled { cursor: default; }
.ly2-spin { animation: ly2Spin 0.9s linear infinite; display: inline-block; }
@keyframes ly2Spin { to { transform: rotate(360deg); } }

/* ════════════════════════════════════════════════════════════
   结果页奶油化覆盖（沿用 .ly-* 结构，统一清新基调）
   ════════════════════════════════════════════════════════════ */
#liuyao-result-page .ly-section-label,
#liuyao-result-page .ly-section-label i { color: var(--ly2-gold); }
#liuyao-result-page .ly-section-label::after { background: var(--ly2-line); }

/* ── 响应式 ── */
@media (max-width: 380px) {
  .ly2-coins { gap: 14px; }
  .ly2-coin { width: 50px; height: 50px; }
  .ly2-chip { font-size: 12px; padding: 10px 2px; }
  .ly2-chip i { font-size: 17px; }
}

/* ── 无障碍：降低动效 ── */
@media (prefers-reduced-motion: reduce) {
  .ly2-coin.spinning,
  .ly2-coin.settled,
  .ly2-yao.just-filled .ly2-yao-line,
  .ly2-spin { animation: none !important; }
  .ly2-cast-btn:hover { transform: none; }
}