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

:root{
  --bg:#0d0c0b;
  --panel:#171513;
  --panel-2:#211e1a;
  --line:#3a342d;
  --text:#eee7da;
  --muted:#a69c8d;
  --gold:#c6a56a;
  --gold-2:#e1c98f;
  --danger:#b85c4d;
  --radius:22px;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:radial-gradient(circle at 50% 0%,#29231c 0,#0d0c0b 52%);color:var(--text);font-family:Inter,system-ui,sans-serif}
body{min-height:100vh}
button,textarea{font:inherit}
button{cursor:pointer}
.app{width:min(1040px,calc(100% - 32px));margin:0 auto;min-height:100vh;padding:36px 0 22px;display:flex;flex-direction:column}
.brand{display:flex;align-items:center;gap:14px;margin-bottom:44px}
.brand-mark{width:44px;height:44px;border:1px solid var(--gold);border-radius:50%;display:grid;place-items:center;color:var(--gold-2);font-size:25px}
.eyebrow,.step,.card-label{letter-spacing:.18em;font-size:.68rem;color:var(--gold);font-weight:600}
.brand h1{font:700 1.65rem "Cormorant Garamond",serif;letter-spacing:.08em;margin:0}
.screen{display:none;flex:1}
.screen.active{display:block}
.panel{background:linear-gradient(145deg,rgba(33,30,26,.96),rgba(18,17,15,.96));border:1px solid var(--line);border-radius:var(--radius);padding:clamp(28px,6vw,68px);box-shadow:0 25px 80px rgba(0,0,0,.28)}
.intro-panel{max-width:760px;margin:7vh auto 0;text-align:center}
h2{font:600 clamp(2.1rem,5vw,3.8rem)/1 "Cormorant Garamond",serif;margin:12px 0 18px}
.muted{color:var(--muted);line-height:1.7}
textarea{width:100%;min-height:150px;resize:vertical;background:#0f0e0d;border:1px solid var(--line);border-radius:15px;color:var(--text);padding:18px;font-size:1rem;outline:none;margin-top:18px}
textarea:focus{border-color:var(--gold)}
.actions{margin-top:20px;display:flex;justify-content:center}
.primary,.secondary,.ghost{border:0;border-radius:999px;padding:13px 20px;font-weight:600;transition:.2s}
.primary{background:var(--gold);color:#17130d}
.primary:hover{background:var(--gold-2);transform:translateY(-1px)}
.secondary{background:var(--panel-2);color:var(--text);border:1px solid var(--line)}
.secondary:hover{border-color:var(--gold);color:var(--gold-2)}
.ghost{background:transparent;color:var(--muted);margin:18px auto;display:block}
.casting-header{display:flex;align-items:end;justify-content:space-between;gap:25px}
.casting-header h2{margin-bottom:5px}
.progress{width:240px;height:4px;background:var(--line);border-radius:99px;overflow:hidden}
#progress-bar{display:block;width:16.66%;height:100%;background:var(--gold);transition:.4s}
.coins{display:flex;justify-content:center;gap:clamp(18px,5vw,46px);margin:55px 0 30px}
.coin{width:clamp(110px,17vw,155px);aspect-ratio:1;border-radius:50%;border:2px solid #8e774c;background:radial-gradient(circle at 35% 28%,#d7c08a,#866f43 48%,#332a1c 100%);color:#241e14;box-shadow:0 18px 35px rgba(0,0,0,.45),inset 0 2px 8px rgba(255,255,255,.28);font-size:2.3rem;transition:transform .2s,filter .2s;position:relative}
.coin::after{content:"";position:absolute;inset:9%;border:1px solid rgba(255,245,207,.25);border-radius:50%}
.coin:hover:not(:disabled){transform:translateY(-5px) scale(1.02)}
.coin:disabled{cursor:default;filter:grayscale(.45);opacity:.6}
.coin.flipping{animation:flip .75s ease-in-out}
.coin.heads{background:radial-gradient(circle at 35% 28%,#eee0b3,#a48750 48%,#45371f)}
.coin.tails{background:radial-gradient(circle at 35% 28%,#c0c0bd,#65645f 48%,#252522);color:#eee}
@keyframes flip{0%{transform:rotateY(0) translateY(0)}45%{transform:rotateY(900deg) translateY(-28px)}100%{transform:rotateY(1800deg) translateY(0)}}
.toss-result{width:min(500px,100%);margin:0 auto 20px;padding:15px 18px;border:1px solid var(--line);background:var(--panel);border-radius:15px;text-align:center}
.toss-result strong{display:block;font:600 1.7rem "Cormorant Garamond",serif;color:var(--gold-2);margin-top:4px}
.hidden{display:none!important}
.hex-preview{min-height:170px;display:grid;place-items:center;margin:10px 0}
.line-stack{display:flex;flex-direction:column-reverse;gap:10px;width:240px}
.line{height:14px;position:relative;display:flex;justify-content:center}
.line.yang::before{content:"";display:block;width:100%;height:100%;background:var(--gold-2);border-radius:3px}
.line.yin::before,.line.yin::after{content:"";display:block;width:45%;height:100%;background:var(--gold-2);border-radius:3px}
.line.yin{justify-content:space-between}
.line.moving{filter:drop-shadow(0 0 7px rgba(198,165,106,.55))}
.line.moving::marker{content:""}
.next-line-wrap{text-align:center}
.result-top{max-width:850px;margin:0 auto 30px}
.result-top h2{margin-bottom:8px}
blockquote{margin:0;padding:15px 18px;border-left:2px solid var(--gold);background:rgba(33,30,26,.55);color:var(--muted);line-height:1.6}
.result-grid{display:grid;grid-template-columns:320px 1fr;gap:20px}
.hex-card,.judgement-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:28px}
.hex-card{text-align:center}
.hex-symbol{font-size:5rem;line-height:1;margin:18px 0 4px}
.hex-number{font-size:.75rem;color:var(--gold);letter-spacing:.15em}
.hex-card h3{font:600 1.8rem "Cormorant Garamond",serif;margin:8px 0 24px}
.result-stack{margin:0 auto;width:190px;gap:7px}
.judgement-card p{font:500 1.22rem/1.7 "Cormorant Garamond",serif;color:#e9dfce}
.changing-box,.relating-box{margin-top:28px;padding-top:20px;border-top:1px solid var(--line)}
.changing-box p,.relating-box p{font:500 1rem/1.6 Inter,sans-serif;color:var(--muted);margin-bottom:0}
.copy-panel{margin:20px auto;text-align:center;max-width:780px}
.copy-panel p{font-size:.82rem;color:var(--muted);line-height:1.6}
.copy-status{color:var(--gold-2);font-size:.78rem}
footer{margin-top:35px;padding-top:18px;border-top:1px solid rgba(58,52,45,.7);display:flex;justify-content:space-between;color:#746d62;font-size:.68rem;gap:10px}
@media(max-width:720px){
  .app{width:min(100% - 22px,1040px);padding-top:22px}
  .brand{margin-bottom:28px}
  .intro-panel{margin-top:3vh}
  .casting-header{display:block}
  .progress{width:100%;margin-top:18px}
  .coins{gap:10px;margin:38px 0 22px}
  .coin{width:29vw;max-width:125px}
  .result-grid{grid-template-columns:1fr}
  footer{flex-direction:column}
}