/* ==========================================================================
   风水罗盘 · 样式
   ========================================================================== */

/* ---------- 全局与布局 ---------- */
* { margin:0; padding:0; box-sizing:border-box; }
html,body { height:100%; }
body {
  min-height:100vh;
  display:flex; align-items:center;
  background: radial-gradient(1200px 900px at 50% 20%, #26221a 0%, #0d0b08 55%, #010100 100%);
  font-family: 'Noto Serif SC','Songti SC','STSong',SimSun,Georgia,serif;
  color:#e8c86a;
  padding:24px;
  user-select:none; -webkit-user-select:none;
}
.app { display:flex; gap:28px; align-items:flex-start; justify-content:center; flex-wrap:wrap; margin:auto; }
.compass-wrap svg {
  display:block;
  height:auto;
  touch-action:none;
  filter: drop-shadow(0 20px 36px rgba(0,0,0,.6));
}
svg.dragging { cursor:grabbing; }

/* ---------- SVG 内部样式（黑金古典） ---------- */
.rim { fill:url(#wood); stroke:#d4af37; stroke-width:2; }
.bezel-bg { fill:rgba(212,175,55,.06); stroke:none; }
.ring-border { fill:none; stroke:#c9a227; stroke-width:1.5; }
.divider { stroke:#d4af37; stroke-width:1; opacity:.16; }
.chars { fill:#f0d98c; stroke:#000; stroke-width:1.6; paint-order:stroke; }
.chars-red { fill:#ff5c4d; stroke:#000; stroke-width:1.6; paint-order:stroke; }
.glyph { fill:#d4af37; }
.bagua-line { stroke:#f0d98c; stroke-width:3; stroke-linecap:round; }
.hex-yang { stroke:#ff5c4d; stroke-width:2.2; stroke-linecap:round; }
.hex-yin { stroke:#7d7d6e; stroke-width:2.2; stroke-linecap:round; }
.ring { cursor:grab; }
.ring.active .chars, .ring.active .glyph { fill:#fff7d6; }
.ring.active .chars-red { fill:#ff8a6a; }
.ring.active .bagua-line { stroke:#fff7d6; }
.ring.active .hex-yang { stroke:#ff8a6a; }
.ring.active .hex-yin { stroke:#b5b5a0; }
.hit { cursor:grab; }
.bezel-tick-major { stroke:#f0d98c; stroke-width:2.2; }
.bezel-tick-mid   { stroke:#c9a227; stroke-width:1.4; }
.bezel-tick-minor { stroke:#8a6f38; stroke-width:1; }
.bezel-text { fill:#e2c37a; font-family:Georgia,serif; }
.bezel-card { fill:#ffd24a; font-weight:bold; text-shadow:0 0 8px rgba(255,210,74,.4); }
.tianchi-bg { fill:url(#tianchi); stroke:#8a6a2f; stroke-width:2; }
.tianchi-line { stroke:#b32222; stroke-width:1.6; opacity:.55; }
.tianchi-label { fill:#a08040; }
.needle-n { fill:#c62828; stroke:#8e1a1a; stroke-width:.8; }
.needle-s { fill:#f7f2e4; stroke:#a58a4e; stroke-width:.8; }
.pivot { fill:#d4a017; stroke:#7a5c1e; stroke-width:1.2; }
.pivot-ring { fill:none; stroke:#7a5c1e; stroke-width:1.2; }
.redline { stroke:#d32f2f; stroke-width:2.6; stroke-linecap:round; }
.redline-arrow { fill:#d32f2f; }

/* ---------- 信息面板 ---------- */
.panel {
  background:linear-gradient(165deg,#16130e 0%,#0a0907 100%);
  border:1px solid #d4af37;
  border-radius:16px;
  padding:22px 24px 18px;
  min-width:290px; max-width:350px;
  max-height:min(94vh, 720px); overflow:auto;
  box-shadow:0 14px 34px rgba(0,0,0,.55), inset 0 1px 0 rgba(240,217,140,.10);
}
.panel h1 { font-size:22px; letter-spacing:8px; color:#f0d98c; text-align:center; margin-bottom:2px; text-shadow:0 0 10px rgba(240,217,140,.35); }
.panel .sub { text-align:center; font-size:12px; color:#a08040; margin-bottom:14px; letter-spacing:1px; }
.direction { text-align:center; margin-bottom:12px; }
.direction small { display:block; font-size:12px; color:#a08040; margin-bottom:4px; letter-spacing:2px; }
#direction { font-size:28px; color:#ffd24a; letter-spacing:4px; text-shadow:0 0 12px rgba(255,210,74,.5); }
#guaxiang { font-size:13px; color:#c9a227; margin-top:4px; letter-spacing:2px; }
#readings { margin-bottom:14px; }
.read-row { display:flex; justify-content:space-between; align-items:baseline; padding:6px 6px; border-bottom:1px dashed rgba(212,175,55,.3); font-size:13px; color:#d9b96a; }
.read-row.hl { background:rgba(211,47,47,.1); border-radius:6px; }
.read-row em { font-style:normal; font-size:11px; color:#8a6a2f; margin-left:6px; font-family:Georgia,serif; }
.read-row .val { color:#f0d98c; font-size:13px; white-space:nowrap; }
#reset {
  width:100%; padding:10px 0; font:inherit; font-size:15px; letter-spacing:4px;
  color:#2c2013; background:linear-gradient(180deg,#e8c86a,#c9a227);
  border:none; border-radius:8px; cursor:pointer; margin-bottom:10px;
  box-shadow:0 4px 10px rgba(0,0,0,.4);
}
#reset:hover { filter:brightness(1.08); }
.hint { text-align:center; font-size:12px; color:#8a6a2f; letter-spacing:1px; }

/* ---------- 扩展层勾选 ---------- */
.layer-controls { margin:0 0 14px; padding:10px 12px; background:rgba(212,175,55,.06); border:1px dashed rgba(212,175,55,.38); border-radius:10px; }
.layer-controls h3 { font-size:13px; color:#c9a227; letter-spacing:2px; margin-bottom:8px; text-align:center; font-weight:normal; }
.layer-controls .grid { display:grid; grid-template-columns:1fr 1fr; gap:2px 12px; }
.layer-controls label { display:flex; align-items:center; gap:6px; font-size:12px; color:#d9b96a; padding:2px 2px; cursor:pointer; white-space:nowrap; }
.layer-controls input { accent-color:#d4af37; width:13px; height:13px; cursor:pointer; }
@media (max-width:820px){ .panel{ min-width:min(92vw,350px);} }