@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600&family=Inter:wght@400;500;700&display=swap');

:root {
  --bg: #050609;
  --ink: #f7edd2;
  --muted: #b7a98f;
  --gold: #d5a84f;
  --red: #8f2634;
  --glass: rgba(12, 14, 21, .72);
  --line: rgba(213,168,79,.25);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--ink); font-family: Inter, system-ui, sans-serif; }
body:before {
  content:""; position:fixed; inset:0; pointer-events:none; opacity:.13; z-index:1;
  background-image: radial-gradient(circle at 20% 10%, var(--red), transparent 28%),
                    radial-gradient(circle at 85% 20%, #224466, transparent 30%),
                    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: auto, auto, 100% 4px;
  mix-blend-mode: screen;
}
#bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; }
.shell { position: relative; z-index: 2; width: min(1120px, calc(100% - 32px)); margin: 0 auto; padding: 40px 0 64px; }
.hero { min-height: 86vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.sigil { width: 88px; height: 88px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; color:var(--gold); font: 52px Cinzel, serif; box-shadow:0 0 40px rgba(213,168,79,.18), inset 0 0 30px rgba(213,168,79,.08); }
.kicker,.label,.stamp { color:var(--gold); letter-spacing:.22em; font-size:.78rem; text-transform:uppercase; }
h1 { font: clamp(4rem, 12vw, 9rem) Cinzel, serif; margin:.1em 0; text-shadow:0 0 28px rgba(213,168,79,.25); }
h2,h3 { font-family:Cinzel, serif; font-weight:600; }
.sub { max-width: 620px; color:var(--muted); line-height:1.6; }
.actions { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:24px; }
button {
  border:1px solid var(--line); background:rgba(255,255,255,.04); color:var(--ink);
  padding:12px 18px; border-radius:999px; cursor:pointer; font-weight:700;
}
button:hover, button.active { border-color:var(--gold); box-shadow:0 0 24px rgba(213,168,79,.12); }
.primary { background: linear-gradient(135deg, rgba(213,168,79,.22), rgba(143,38,52,.18)); }
.hidden { display:none !important; }
.panel,.card,.export-card {
  background: var(--glass); border:1px solid var(--line); border-radius:28px;
  box-shadow:0 24px 80px rgba(0,0,0,.45), inset 0 1px rgba(255,255,255,.04);
  backdrop-filter: blur(14px);
}
.panel { padding:28px; margin:28px 0; }
.method-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px; margin:22px 0; }
.method-grid div { border:1px solid var(--line); border-radius:18px; padding:16px; background:rgba(255,255,255,.035); }
.method-grid span { display:block; margin-top:8px; color:var(--muted); }
.throw-buttons button { font-size:1.5rem; min-width:70px; border-radius:18px; margin:6px; }
.coins { display:flex; justify-content:center; gap:18px; font-size:4rem; color:var(--gold); margin:20px 0; }
.coins.rolling span { animation: flip .45s linear infinite; }
.coins.rolling span:nth-child(2){ animation-delay:.08s; } .coins.rolling span:nth-child(3){ animation-delay:.15s; }
@keyframes flip { 50% { transform: rotateY(180deg) scale(1.08); filter:blur(1px); } }
.status { text-align:center; color:var(--muted); }
.hex-stack { display:flex; flex-direction:column-reverse; gap:10px; align-items:center; margin:24px auto 0; min-height:260px; }
.hex-line { width:230px; height:20px; position:relative; display:flex; gap:36px; justify-content:center; align-items:center; animation: draw .5s ease both; }
.hex-line.yang:before { content:""; width:100%; height:12px; background:var(--ink); box-shadow:0 0 22px rgba(247,237,210,.16); }
.hex-line.yin:before,.hex-line.yin:after { content:""; width:42%; height:12px; background:var(--ink); box-shadow:0 0 22px rgba(247,237,210,.16); }
.hex-line.moving { filter: drop-shadow(0 0 10px var(--gold)); }
.hex-line.moving:after { color:var(--gold); }
@keyframes draw { from { opacity:0; transform:scaleX(.2); } to { opacity:1; transform:scaleX(1); } }
.result { margin-top:32px; }
.export-card { padding:26px; }
.result-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; }
.card { padding:22px; }
.card.wide { margin-top:18px; }
.big-glyph { font-size:8rem; color:var(--gold); line-height:1; text-shadow:0 0 36px rgba(213,168,79,.22); }
#primaryMeta,#changedMeta,.reading { color:var(--muted); line-height:1.75; }
.trigram-view { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; }
.trigram { border:1px solid var(--line); border-radius:20px; padding:16px; background:rgba(255,255,255,.03); }
.trigram b { font-size:2.2rem; color:var(--gold); margin-right:10px; }
.tabs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
.tab { padding:9px 12px; font-size:.86rem; }
.reading p { margin: 0 0 1em; }
@media (prefers-reduced-motion: reduce) { *, *:before, *:after { animation:none !important; transition:none !important; } #bg { display:none; } }
@media (max-width: 640px) { .shell { width:min(100% - 20px, 1120px); } .hex-line { width:190px; } .big-glyph { font-size:6rem; } }