/* ============================================================
   通玄 TONGXUAN · 大六壬 daliuren.css
   壬课帖 → 四课三传（深色底座）→ AI 深度解读入口（deep-cta 走 base.css）
   颜色一律取 token / 金色·朱砂 rgba，换肤零负担
   ============================================================ */

/* ---------- 页头补饰：菱形分隔随题字入场 ---------- */
.lr-hero-divider {
  margin-top: 26px;
  animation: pageUp 1s var(--ease-out) 0.28s both;
}

/* ================================================
   一、壬课帖
   ================================================ */

/* 类别 chips（宣纸底上的金缘小丸） */
.lr-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.lr-chip {
  padding: 8px 24px;
  font-family: var(--font-serif);
  font-size: 15px; font-weight: 600;
  letter-spacing: 0.14em; text-indent: 0.14em;
  color: var(--paper-ink-soft);
  border: 1px solid rgba(150, 114, 58, 0.4);
  border-radius: 999px;
  background: var(--paper-50);
  transition: color 0.3s, border-color 0.3s, background 0.3s,
              box-shadow 0.3s, transform 0.3s var(--ease-out);
}
.lr-chip:hover {
  transform: translateY(-2px);
  color: var(--gold-700);
  border-color: rgba(184, 145, 75, 0.7);
  box-shadow: 0 6px 16px rgba(212, 175, 106, 0.2);
}
.lr-chip.active {
  background: linear-gradient(135deg, var(--gold-300), var(--gold-500) 60%, var(--gold-600));
  color: var(--ink-950);
  border-color: transparent;
  box-shadow: 0 6px 18px rgba(212, 175, 106, 0.32);
}
.lr-chip:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; }

/* 占时：勾选行 + 补占日期 */
.lr-now-check { padding-bottom: 0; }
.lr-date-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 16px;
}
.lr-date-grid[hidden] { display: none; }

/* ================================================
   二、课盘呈现
   ================================================ */
.lr-pan-question { font-weight: 700; }
.lr-badge-row { margin-top: 14px; }

/* ---------- 信息条：月将 / 占时 金框 chip + 课体 朱砂徽 ---------- */
.lr-info-bar {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 14px;
  margin-bottom: 42px;
}
.lr-info-chip {
  display: inline-flex; align-items: baseline; gap: 12px;
  padding: 9px 22px;
  border: 1px solid rgba(184, 145, 75, 0.6);
  border-radius: 999px;
  background: rgba(212, 175, 106, 0.1);
  box-shadow: inset 0 1px 0 rgba(240, 220, 174, 0.4), 0 4px 14px rgba(212, 175, 106, 0.14);
}
.lr-info-chip i {
  font-style: normal;
  font-family: var(--font-serif);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.3em; text-indent: 0.3em;
  color: var(--gold-700);
}
.lr-info-chip b {
  font-family: var(--font-serif);
  font-size: 16.5px; font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--paper-ink);
}
.lr-keti {
  display: inline-flex; align-items: baseline; gap: 12px;
  padding: 9px 20px;
  border-radius: 8px;
  background: linear-gradient(155deg, var(--cinnabar), var(--cinnabar-deep));
  box-shadow: 0 6px 16px rgba(150, 53, 44, 0.35), inset 0 0 0 2px rgba(240, 220, 174, 0.45);
}
.lr-keti i {
  font-style: normal;
  font-family: var(--font-serif);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.3em; text-indent: 0.3em;
  color: var(--paper-200);
}
.lr-keti b {
  font-family: var(--font-serif);
  font-size: 16.5px; font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--paper-50);
}

/* ---------- 深色底座卡（承托四课三传，token 换肤自适） ---------- */
.lr-board {
  position: relative;
  max-width: 920px;
  margin-inline: auto;
  padding: 46px 48px 52px;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(212, 175, 106, 0.42);
  background:
    radial-gradient(ellipse 120% 90% at 50% -30%, rgba(212, 175, 106, 0.14), transparent 55%),
    linear-gradient(160deg, var(--ink-800), var(--ink-950) 90%);
  box-shadow: 0 30px 70px rgba(10, 15, 30, 0.4), inset 0 1px 0 rgba(212, 175, 106, 0.18);
  overflow: hidden;
}
.lr-board::after {
  content: "";
  position: absolute; inset: 9px;
  border: 1px solid rgba(212, 175, 106, 0.22);
  border-radius: calc(var(--radius-lg) - 9px);
  pointer-events: none;
}
.lr-board-title {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  margin: 0 0 30px;
  font-family: var(--font-serif);
  font-size: 14px; font-weight: 600;
  letter-spacing: 0.52em; text-indent: 0.52em;
  color: var(--gold-500);
}
.lr-board-title::before, .lr-board-title::after {
  content: "";
  width: 64px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 106, 0.65));
}
.lr-board-title::after { transform: scaleX(-1); }
.lr-board-title-chuan { margin-top: 50px; }

/* ---------- 四课：一行四张竖卡，依次立起 ---------- */
.lr-sike {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  max-width: 660px;
  margin-inline: auto;
}
.lr-ke {
  display: flex; flex-direction: column; align-items: center;
  border-radius: var(--radius-md);
  border: 1px solid rgba(212, 175, 106, 0.38);
  background: linear-gradient(175deg, var(--paper-50), var(--paper-100));
  box-shadow: 0 14px 32px rgba(10, 15, 30, 0.42), inset 0 1px 0 rgba(240, 220, 174, 0.5);
  overflow: hidden;
  transform-origin: 50% 100%;
  animation: lrKeRise 0.72s var(--ease-out) calc(var(--i, 0) * 0.15s) both;
}
/* 上神：衬线大字金渐变 */
.lr-ke-top {
  display: flex; align-items: center; justify-content: center;
  width: 100%;
  padding: 20px 6px 14px;
  font-family: var(--font-serif);
  font-size: clamp(32px, 4vw, 40px);
  font-weight: 700; line-height: 1.15;
  background: linear-gradient(168deg, var(--gold-300) 8%, var(--gold-500) 55%, var(--gold-700) 96%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 3px 10px rgba(212, 175, 106, 0.25));
}
/* 格间细金线 */
.lr-ke-line {
  width: 62%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(184, 145, 75, 0.8), transparent);
}
/* 下神：墨色 */
.lr-ke-bottom {
  width: 100%;
  padding: 13px 6px 15px;
  text-align: center;
  font-family: var(--font-serif);
  font-size: 21px; font-weight: 600;
  letter-spacing: 0.03em; line-height: 1.3;
  color: var(--paper-ink);
}
/* 卡底小字课名 */
.lr-ke-label {
  width: 100%;
  padding: 7px 0 9px;
  text-align: center;
  font-family: var(--font-serif);
  font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.36em; text-indent: 0.36em;
  color: var(--gold-700);
  border-top: 1px dashed rgba(150, 114, 58, 0.45);
  background: rgba(212, 175, 106, 0.1);
}
@keyframes lrKeRise {
  from { opacity: 0; transform: perspective(720px) rotateX(-58deg) translateY(18px); }
  62%  { opacity: 1; }
  to   { opacity: 1; transform: perspective(720px) rotateX(0deg) translateY(0); }
}

/* ---------- 三传：横向三站，四课立毕后逐站点亮 ---------- */
.lr-sanchuan {
  display: flex; align-items: stretch; justify-content: center;
  gap: 12px;
}
.lr-chuan {
  flex: 0 1 200px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 22px 14px 20px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(212, 175, 106, 0.3);
  background: rgba(212, 175, 106, 0.06);
  animation: lrChuanGlow 0.75s var(--ease-out) calc(0.78s + var(--i, 0) * 0.24s) both;
}
.lr-chuan-name {
  font-family: var(--font-serif);
  font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.42em; text-indent: 0.42em;
  color: var(--text-mid);
}
/* 地支大字：衬线金渐变 44px */
.lr-chuan-zhi {
  font-family: var(--font-serif);
  font-size: 44px; font-weight: 700; line-height: 1.15;
  background: linear-gradient(168deg, var(--gold-300) 8%, var(--gold-400) 40%, var(--gold-500) 70%, var(--gold-600) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 4px 16px rgba(212, 175, 106, 0.38));
}
.lr-chuan-chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.lr-tag {
  padding: 3px 13px;
  border-radius: 999px;
  font-family: var(--font-serif);
  font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.14em; text-indent: 0.14em;
  white-space: nowrap;
}
.lr-tag-jiang {
  color: var(--gold-300);
  border: 1px solid rgba(212, 175, 106, 0.5);
  background: rgba(212, 175, 106, 0.1);
}
.lr-tag-qin {
  color: var(--paper-100);
  background: linear-gradient(155deg, var(--cinnabar), var(--cinnabar-deep));
  box-shadow: 0 3px 10px rgba(150, 53, 44, 0.4);
}
/* 站间金色箭头 */
.lr-arrow {
  --rot: 0deg;
  align-self: center;
  flex-shrink: 0;
  font-family: var(--font-serif);
  font-size: 26px; font-weight: 700; line-height: 1;
  color: var(--gold-500);
  text-shadow: 0 0 14px rgba(212, 175, 106, 0.5);
  animation: lrArrowIn 0.5s var(--ease-out) calc(1s + var(--i, 0) * 0.24s) both;
}
@keyframes lrChuanGlow {
  from { opacity: 0; transform: translateY(14px) scale(0.94); }
  to   { opacity: 1; transform: none; }
}
@keyframes lrArrowIn {
  from { opacity: 0; transform: rotate(var(--rot)) translateX(-8px); }
  to   { opacity: 1; transform: rotate(var(--rot)); }
}

/* ================================================
   响应式与降级
   ================================================ */
@media (max-width: 960px) {
  .lr-board { padding: 38px 30px 42px; }
}
@media (max-width: 720px) {
  .lr-date-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lr-chip { padding: 7px 18px; font-size: 14px; }
  .lr-info-bar { gap: 10px; margin-bottom: 34px; }
  .lr-info-chip { padding: 7px 16px; gap: 9px; }
  .lr-board { padding: 30px 18px 36px; }
  .lr-board-title-chuan { margin-top: 40px; }

  /* 四课降级 2×2 */
  .lr-sike { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 360px; }
  .lr-ke-top { padding: 16px 6px 11px; }

  /* 三传改竖排，箭头转 ↓ */
  .lr-sanchuan { flex-direction: column; align-items: center; gap: 8px; }
  .lr-chuan { flex-basis: auto; width: min(100%, 300px); padding: 18px 14px 16px; }
  .lr-chuan-zhi { font-size: 38px; }
  .lr-arrow { --rot: 90deg; font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .lr-hero-divider { animation: none; opacity: 1; }
  .lr-ke { animation: none; opacity: 1; transform: none; }
  .lr-chuan { animation: none; opacity: 1; transform: none; }
  .lr-arrow { animation: none; opacity: 1; transform: rotate(var(--rot)); }
}