/* 小六壬預測機：連續完整手掌模型，SVG 文字跟隨骨架投影。 */
.lr-app .row input[type="text"] { flex: 1 1 220px; min-width: 0; }
.lr-clock { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 14px 0 0; padding: 10px 16px; background: var(--bg); border-left: 3px solid var(--gold); border-radius: 0 8px 8px 0; }
.lr-clock-k { font-size: 12px; letter-spacing: 0.3em; color: var(--gold-dark); }
.lr-clock-date { font-size: 15px; color: var(--ink); letter-spacing: 0.05em; }
.lr-clock-time { font-family: var(--serif); font-size: 26px; font-weight: 700; color: var(--indigo); letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }
.lr-info { font-size: 13px; color: var(--indigo); margin: 6px 0 0 !important; line-height: 1.8; }

/* 掌訣圖＋掐算看板 */
.lr-stage {
  display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 24px; align-items: center;
  margin: 18px 0 6px; padding: 18px; background: var(--bg); border: 1px solid var(--hairline); border-radius: 10px;
}
.lr-hand { position: relative; }
.lr-hand svg { position: relative; display: block; width: 100%; height: auto; }
.lr-hand { overflow: hidden; }
.lr-hand-video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; object-fit: contain; transform-origin: 50% 100%; transform: translateY(5.897436%) scale(1.1); }
.lr-hand-model { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
.lr-model-ready .lr-hand-video { visibility: hidden; }
.lr-hand:not(.lr-recorded-ready) .lr-spot { visibility: hidden; }
.lr-board { text-align: center; }
.lr-phase { font-size: 13px; color: var(--muted); letter-spacing: 0.05em; min-height: 1.8em; margin: 0 !important; }
.lr-count { font-family: var(--serif); font-size: 46px; font-weight: 700; color: var(--indigo); line-height: 1.25; margin: 6px 0 !important; letter-spacing: 0.08em; }
.lr-at { font-size: 15px; color: var(--gold-dark); min-height: 1.6em; letter-spacing: 0.1em; margin: 0 !important; }
.lr-chain { list-style: none; padding: 0 !important; margin: 14px 0 0 !important; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.lr-chain li { margin: 0 !important; display: inline-flex; border: 1px solid var(--gold); border-radius: 999px; overflow: hidden; font-size: 13px; }
.lr-chain-k { background: var(--gold); color: #fff; padding: 2px 8px; }
.lr-chain-v { padding: 2px 10px; font-family: var(--serif); color: var(--ink); }
.lr-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.lr-spot text { font-family: var(--serif); font-size: 12.5px; font-weight: 700; fill: var(--indigo); text-anchor: middle; dominant-baseline: central; transition: fill 0.2s; }
.lr-label { fill: var(--bg); fill-opacity: 0.94; stroke: var(--gold); stroke-width: 0.65; transition: fill 0.2s; }
.lr-glow { fill: var(--gold); opacity: 0; transition: opacity 0.3s; }
.lr-dot { fill: var(--gold-dark); opacity: 0; }
.lr-spot.is-on .lr-label { fill: var(--gold); }
.lr-spot.is-on text { fill: var(--ink); }
.lr-spot.is-landed .lr-dot { opacity: 1; }
.lr-spot.is-final .lr-glow { opacity: 0.45; }
.lr-spot.is-final .lr-label { fill: var(--indigo); stroke: var(--indigo); }
.lr-spot.is-final text { fill: var(--bg); }
.lr-ripple { fill: none; stroke: var(--gold); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }

@media (prefers-reduced-motion: reduce) {
  .lr-spot text, .lr-label, .lr-glow { transition: none; }
}

/* 結果 */
.lr-result { margin-top: 18px; padding: 22px 24px; background: var(--bg); border: 1px solid var(--gold); border-radius: 10px; scroll-margin-top: 90px; }
.lr-result[hidden] { display: none; }
.lr-res-head { text-align: center; padding-bottom: 14px; border-bottom: 1px solid var(--hairline); }
.lr-res-head .eyebrow { margin-bottom: 4px; }
.lr-result .lr-res-name { justify-content: center; align-items: center; font-size: 34px; letter-spacing: 0.2em; color: var(--indigo); margin: 0; }
.lr-tag { font-family: var(--sans); font-size: 13px; letter-spacing: 0.1em; padding: 2px 10px; border-radius: 4px; font-weight: 600; }
.lr-tag--good { background: var(--indigo); color: #fff; }
.lr-tag--mid { background: var(--gold); color: var(--ink); }
.lr-tag--bad { background: var(--ink); color: var(--bg); }
.lr-result .lr-res-sum { font-size: 16px; max-width: 34em; margin: 10px auto 0; line-height: 1.9; }
.lr-result .lr-res-q { font-size: 14px; color: var(--muted); margin: 6px 0 0; }
.lr-result .lr-res-path { font-size: 13px; color: var(--gold-dark); letter-spacing: 0.05em; margin: 6px 0 0; }
.lr-res-path span { white-space: nowrap; }
.lr-focus { margin: 16px 0; padding: 12px 18px; background: #F5EAD0; border-left: 3px solid var(--gold); border-radius: 0 8px 8px 0; }
.lr-result .lr-focus p { margin: 0; line-height: 1.85; }
.lr-result .lr-focus-k { font-family: var(--serif); font-weight: 700; color: var(--indigo); margin-bottom: 4px; }
.lr-result .lr-sub { font-size: 12px; letter-spacing: 0.3em; color: var(--gold-dark); margin: 18px 0 6px; }
.lr-verse, .lr-topics { list-style: none; padding: 0 !important; margin: 0 !important; }
.lr-verse li { margin: 0 !important; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px 18px; align-items: baseline; padding: 8px 0; border-bottom: 1px dashed var(--hairline); }
.lr-v { font-family: var(--serif); font-size: 17px; letter-spacing: 0.1em; color: var(--ink); white-space: nowrap; }
.lr-p { font-size: 14px; color: var(--muted); line-height: 1.8; }
.lr-attrs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; margin: 16px 0 0; background: var(--hairline); border: 1px solid var(--hairline); border-radius: 8px; overflow: hidden; }
.lr-attrs div { text-align: center; padding: 8px 4px; background: var(--card); }
.lr-attrs dt { font-size: 11px; color: var(--muted); letter-spacing: 0.2em; }
.lr-attrs dd { margin: 2px 0 0; font-family: var(--serif); font-size: 15px; color: var(--indigo); }
.lr-attrs dd small { display: block; font-family: var(--sans); font-size: 11px; color: var(--muted); }
.lr-topics li { margin: 0 !important; padding: 9px 0; border-bottom: 1px dashed var(--hairline); line-height: 1.85; font-size: 14.5px; }
.lr-topics li b { display: inline-block; min-width: 6.5em; font-family: var(--serif); color: var(--indigo); }
.lr-topics li.is-focus { background: #F5EAD0; padding-left: 10px; padding-right: 10px; }
.lr-ext { margin-left: 8px; font-size: 11px; color: var(--muted); border: 1px solid var(--border); border-radius: 3px; padding: 0 5px; white-space: nowrap; }
.lr-result .lr-nums { font-size: 14px; margin: 14px 0 0; line-height: 1.85; }
.lr-nums b { font-family: var(--serif); color: var(--indigo); }
.lr-result .lr-hint { font-size: 14px; margin: 12px 0 0; padding: 10px 14px; border: 1px dashed var(--gold); border-radius: 8px; line-height: 1.85; }

@media (max-width: 640px) {
  .lr-stage { grid-template-columns: 1fr; gap: 6px; padding: 12px; }
  .lr-hand { width: 100%; max-width: 280px; margin: 0 auto; }
  .lr-count { font-size: 38px; }
  .lr-result { padding: 16px 14px; }
  .lr-result .lr-res-name { font-size: 30px; }
  .lr-verse li { grid-template-columns: 1fr; }
  .lr-attrs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lr-topics li b { display: block; }
}