/* ============================================================
 * Luopan — standalone single stylesheet (pillar 1)
 * ------------------------------------------------------------
 * The module stage rules mirror ClairvoyantOracle.com/jsmodules/
 * Luopan.css (which is @imported by the timeline main.css); here
 * they are unscoped because the standalone stage lives in
 * #luopan-mount rather than #luopan-oracle-section.
 * Keep the `.luopan-*` block in sync with jsmodules/Luopan.css
 * (the Mayan precedent).
 * ============================================================ */

/* ---------- the module stage (mirrors jsmodules/Luopan.css) ---------- */
.luopan-stage {
  position: relative;
  margin: 24px 0;
  padding: 18px 14px 20px;
  border: 2px solid #b8912f;
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 40%, rgba(184, 145, 47, 0.10), transparent 62%),
    #0f0c14;
  box-shadow: 0 0 26px rgba(0, 0, 0, 0.85), inset 0 0 40px rgba(184, 145, 47, 0.06);
  overflow: hidden;
  text-align: center;
}

/* ---- the red notice (only for an assigned birth day) ---- */
.luopan-notice {
  margin: 0 auto 16px;
  max-width: 660px;
  padding: 10px 14px;
  border: 1px solid #c0392b;
  border-left-width: 4px;
  border-radius: 8px;
  background: rgba(192, 57, 43, 0.14);
  color: #ff6b5a;
  font-size: 0.82rem;
  line-height: 1.42;
  text-align: left;
  letter-spacing: 0.01em;
  box-shadow: 0 0 18px rgba(192, 57, 43, 0.22);
}

/* ---- Task 0.5: the GLOBAL assigned-birth banner ----
 * Rendered once at the top of #timeline-container when no birthday was
 * entered (the Oracle assigned a substitute date). No longer on the wheel.
 * Kept identical to jsmodules/Luopan.css (the standalone never renders it,
 * but the mirror must not drift). */
.nativity-assigned-notice {
  margin: 0 auto 18px;
  max-width: 720px;
  padding: 10px 16px;
  border: 1px solid #c0392b;
  border-left-width: 4px;
  border-radius: 8px;
  background: rgba(192, 57, 43, 0.14);
  color: #ff6b5a;
  font-size: 0.84rem;
  line-height: 1.42;
  text-align: center;
  letter-spacing: 0.01em;
  box-shadow: 0 0 18px rgba(192, 57, 43, 0.22);
}

/* ---- the dial ---- */
.luopan-dial {
  display: block;
  /* 2026-10-04 (owner): +25% (420 → 525px). */
  width: min(525px, 100%);
  height: auto;
  margin: 4px auto 8px;
  filter: drop-shadow(0 0 16px rgba(184, 145, 47, 0.32));
}

/* each ring group carries its own landing rotation */
.luopan-ring { transform-box: view-box; transform-origin: 200px 200px; }

.luopan-pointer {
  fill: #ffd97a;
  filter: drop-shadow(0 0 4px #ffd97a);
}

.luopan-cell {
  fill: rgba(20, 16, 26, 0.55);
  stroke: rgba(184, 145, 47, 0.42);
  stroke-width: 0.6;
  transition: fill 0.7s ease, stroke 0.7s ease, filter 0.7s ease;
}
/* alternate band tint so the concentric rings read apart */
.luopan-ring:nth-child(even) .luopan-cell { fill: rgba(184, 145, 47, 0.05); }
.luopan-ring:nth-child(3n) .luopan-cell { fill: rgba(120, 90, 200, 0.05); }

.luopan-ring-label {
  fill: #e7c86a;
  font-size: 8px;
  font-family: "Noto Serif KR", Georgia, serif;
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
}
.luopan-ring-nineStar .luopan-ring-label,
.luopan-ring-element .luopan-ring-label { font-size: 11px; font-weight: 700; }
/* every band is labelled now — dense 60-cell rings run smaller + radial */
.luopan-ring-mansion .luopan-ring-label { font-size: 7px; }
.luopan-ring-yearCycle .luopan-ring-label { font-size: 5px; }
.luopan-ring-solarTerm .luopan-ring-label { font-size: 5.5px; }
.luopan-ring-mountain .luopan-ring-label { font-size: 7px; }
.luopan-ring-trigram .luopan-ring-label { font-size: 11px; font-weight: 700; }
.luopan-ring-dayOfficer .luopan-ring-label { font-size: 9px; }
.luopan-ring-jiazi .luopan-ring-label { font-size: 5.5px; }

/* the landed day-pillar / resolved ring cells — glowing only after the spin */
.luopan-aligned .luopan-cell { stroke: #ffe89a; filter: drop-shadow(0 0 3px #ffd97a); }
.luopan-aligned .luopan-cell.luopan-landed {
  fill: rgba(64, 200, 110, 0.5);
  filter: drop-shadow(0 0 5px rgba(80, 240, 140, 0.9));
}
.luopan-aligned .luopan-ring-label { fill: #ffe07a; filter: drop-shadow(0 0 4px #ffd97a); }

/* ---- the central liquid-filled compass ---- */
.luopan-compass-capsule {
  fill: rgba(150, 205, 230, 0.12);
  stroke: #cfd8e0;
  stroke-width: 1.2;
  filter: drop-shadow(0 0 6px rgba(150, 205, 230, 0.35));
}
.luopan-compass-bubble {
  fill: rgba(225, 245, 255, 0.55);
  stroke: #ffffff;
  stroke-width: 0.8;
}
.luopan-needle { transform-box: view-box; transform-origin: 200px 200px; }
.luopan-needle-n { fill: #d64535; }
.luopan-needle-s { fill: #e8eef2; }
.luopan-heaven-pool {
  fill: rgba(6, 10, 16, 0.72);
  stroke: #b8912f;
  stroke-width: 1;
}

/* ---- the result panel ---- */
.luopan-result {
  margin: 10px auto 0;
  max-width: 660px;
  text-align: left;
  color: #e8dcc0;
  font-size: 0.9rem;
  line-height: 1.5;
  /* 2026-10-04 — reveal only once the dial settles (never during the grind). */
  opacity: 0;
  transition: opacity 0.55s ease;
}
.luopan-aligned .luopan-result { opacity: 1; }
.luopan-result > div { margin: 3px 0; }
.luopan-birthday strong { color: #ffe89a; }
.luopan-darian { color: #b9a884; font-size: 0.84rem; }
.luopan-kua { color: #c9a3ff; font-size: 0.84rem; }
.luopan-compass-read { color: #9fd4e8; }
.luopan-rings-read { color: #cbbfa0; font-size: 0.82rem; }
.luopan-place { color: #d9c88a; font-size: 0.86rem; }
.luopan-relationship { color: #cbbfa0; font-size: 0.82rem; font-style: italic; }
.luopan-verdict { color: #ffe89a; font-size: 0.88rem; margin-top: 2px !important; }
.luopan-adjustment { color: #b9a884; font-size: 0.8rem; font-style: italic; }
/* ---- the consensus bearing (P1, 2026-10-06) ---- */
.luopan-bearing { margin-top: 6px !important; }
.luopan-bearing-title { color: #9fd4e8; font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; }
.luopan-bearing-vote { display: flex; gap: 6px; align-items: baseline; color: #cbbfa0; font-size: 0.8rem; margin: 1px 0; }
.luopan-bearing-source { flex: 1 1 auto; }
.luopan-bearing-dir { color: #ffd97a; font-variant-numeric: tabular-nums; }
.luopan-bearing-weight { color: #9fd4e8; opacity: 0.8; font-size: 0.72rem; }
.luopan-bearing-consensus { color: #ffe89a; font-size: 0.84rem; margin-top: 3px; }
/* ---- the nine landed tiles (P5, 2026-10-06) ---- */
.luopan-tiles { margin-top: 8px !important; }
.luopan-tiles-title { color: #9fd4e8; font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; }
.luopan-tile-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 4px 10px; margin-top: 3px; }
.luopan-tile { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; border-left: 2px solid rgba(184, 145, 47, 0.45); padding: 2px 0 2px 6px; }
.luopan-tile-ring { flex: 1 0 100%; color: #9fd4e8; font-size: 0.68rem; letter-spacing: 0.05em; text-transform: uppercase; }
.luopan-tile-glyph { color: #ffd97a; font-family: "Noto Serif KR", Georgia, serif; font-size: 1.02rem; }
.luopan-tile-label { color: #e8dcc0; font-size: 0.8rem; }
.luopan-tile-meaning { flex: 1 0 100%; color: #b9a884; font-size: 0.74rem; font-style: italic; overflow-wrap: anywhere; }
.luopan-feixing { margin: 10px auto 0; max-width: 660px; text-align: center; }
.luopan-feixing-title { color: #9fd4e8; font-size: 0.84rem; margin-bottom: 6px; }
.luopan-feixing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; max-width: 300px; margin: 0 auto; }
.luopan-feixing-cell { border: 1px solid rgba(184, 145, 47, 0.5); border-radius: 6px; padding: 6px 2px; background: rgba(15, 12, 20, 0.6); }
.lfx-dir { color: #cbbfa0; font-size: 0.66rem; line-height: 1.1; }
.lfx-stars { display: flex; justify-content: center; gap: 6px; font-family: "Noto Serif KR", Georgia, serif; font-size: 0.92rem; }
.lfx-s { color: #ffd97a; } .lfx-x { color: #9fd4e8; } .lfx-y { color: #c9a3ff; }
.luopan-feixing-sit { border-color: #ffd97a; box-shadow: 0 0 6px rgba(255, 217, 122, 0.35); }
.luopan-feixing-face { border-color: #9fd4e8; box-shadow: 0 0 6px rgba(159, 212, 232, 0.35); }
.luopan-feixing-note { color: #ffe89a; font-size: 0.78rem; margin-top: 6px; }
.luopan-zeri { color: #c9a3ff; font-size: 0.8rem; margin-top: 6px; }
.luopan-narrative { margin-top: 8px; text-align: left; color: #e8dcc0; font-size: 0.86rem; line-height: 1.5; }
.luopan-narrative p { margin: 5px 0; }
.luopan-quantum-note {
  margin-top: 8px !important;
  color: #ff8a75;
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---- motion (the Mayan contract) ---- */
.luopan-grinding .luopan-dial { animation: luopanJudder 0.12s linear 3; }
@keyframes luopanJudder {
  0% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(-1.5px, 1px) rotate(-0.3deg); }
  50% { transform: translate(1px, -1.5px) rotate(0.3deg); }
  75% { transform: translate(-1px, -1px) rotate(-0.2deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
.luopan-strike .luopan-needle { animation: luopanStrike 1.3s ease-out 1; }
@keyframes luopanStrike {
  0% { filter: drop-shadow(0 0 0 #fff); }
  12% { filter: drop-shadow(0 0 12px #ffffff); }
  36% { filter: drop-shadow(0 0 6px #ffd97a); }
  100% { filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0)); }
}

/* ---- phones: the dial fits 390px ---- */
@media (max-width: 480px) {
  .luopan-stage { margin: 16px 0; padding: 12px 8px 16px; }
  /* 276px, not 330: each ring group is rotated to land its cell, and the
   * bounding box of a rotated square grows up to ×√2 — a 330px dial's ring
   * bbox can reach ~390px mid-settle (the generic mobile overflow gate flags
   * rotated SVG boxes). 276px keeps the worst-case ring bbox under 390px. */
  .luopan-dial { width: 100%; max-width: 276px; }
  .luopan-notice { font-size: 0.74rem; padding: 8px 10px; }
  .luopan-result { font-size: 0.82rem; }
  .luopan-rings-read { font-size: 0.76rem; }
}

@media (prefers-reduced-motion: reduce) {
  .luopan-grinding .luopan-dial { animation: none; }
  .luopan-strike .luopan-needle { animation: none; }
  .luopan-rings, .luopan-needle { transition: none !important; }
  .luopan-ring { transition: none !important; }
  .luopan-cell { transition: none; }
  .luopan-result { transition: none; }
}

/* ---------- standalone page chrome ---------- */
.luopan-page { padding-top: 1.4rem; }

.luopan-standalone-header {
  text-align: center;
  margin: 0 0 1rem;
}
.luopan-standalone-header h1 {
  font-family: 'Pirata One', 'Liberation Serif', serif;
  font-size: 2.6rem;
  letter-spacing: 2px;
  color: #d9a441;
  margin: 0;
  text-shadow: 0 0 18px rgba(217, 164, 65, .35);
}
.luopan-sub {
  font-family: 'Noto Serif KR', serif;
  color: #c9bda0;
  font-size: 1rem;
  margin: .35rem 0 0;
}

.luopan-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem 1rem;
  border: 1px solid #b8860b66;
  border-radius: 10px;
  padding: .8rem 1rem;
  margin: 0 0 1.2rem;
  background: rgba(20, 14, 10, .5);
}
.luopan-controls label { color: #e8dcc0; font-size: .9rem; text-align: center; }
.luopan-birth-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
}
.luopan-birth-row input {
  font-family: inherit;
  font-size: .95rem;
  width: 5.2rem;
  text-align: center;
  color: #f3e6c4;
  background: rgba(10, 7, 5, .7);
  border: 1px solid #b8860b99;
  border-radius: 8px;
  padding: .4rem .5rem;
  color-scheme: dark;
}
.luopan-birth-row select {
  font-family: inherit;
  font-size: .9rem;
  color: #f3e6c4;
  background: rgba(10, 7, 5, .7);
  border: 1px solid #b8860b99;
  border-radius: 8px;
  padding: .4rem .45rem;
  color-scheme: dark;
}
.luopan-birth-row input::placeholder { color: #8f8266; }
.luopan-spin-btn {
  font-family: 'Pirata One', 'Liberation Serif', serif;
  font-size: 1.05rem;
  letter-spacing: 1px;
  color: #1a1208;
  background: linear-gradient(180deg, #e8c874, #c79a2e);
  border: 1px solid #8a6a1c;
  border-radius: 8px;
  padding: .45rem 1.1rem;
  cursor: pointer;
  transition: filter .2s, transform .1s;
}
.luopan-spin-btn:hover { filter: brightness(1.08); }
.luopan-spin-btn:active { transform: translateY(1px); }

@media (max-width: 480px) {
  .luopan-standalone-header h1 { font-size: 2rem; }
  .luopan-controls { padding: .7rem .6rem; }
  .luopan-birth-row input { width: 4.6rem; }
}