:root{
  --bg:#0b0d1e; --bg2:#12152e; --card:rgba(255,255,255,.045);
  --line:rgba(201,162,39,.28); --gold:#c9a227; --gold-l:#e8c96a;
  --ink:#f3efe4; --muted:#b3b6c8; --good:#6fbf87; --warn:#d99a5b; --bad:#d97a7a;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  line-height:1.65; -webkit-font-smoothing:antialiased;
  min-height:100dvh; overflow-x:hidden;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.5;
  background-image:radial-gradient(circle at 20% 0%,rgba(201,162,39,.13),transparent 45%),
                   radial-gradient(circle at 80% 30%,rgba(80,90,200,.16),transparent 50%);
}
.glow{position:fixed;width:60vmax;height:60vmax;border-radius:50%;filter:blur(90px);
  background:radial-gradient(circle,rgba(201,162,39,.10),transparent 65%);
  top:-30vmax;right:-25vmax;z-index:0;pointer-events:none}

main,header,footer{position:relative;z-index:1}
.top{display:flex;align-items:center;padding:18px 20px 0;max-width:680px;margin:0 auto}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.brand-mark{font-size:22px;color:var(--gold);line-height:1}
.brand-text{display:flex;flex-direction:column;font-weight:700;letter-spacing:.16em;font-size:14px}
.brand-text small{font-weight:400;letter-spacing:.02em;font-size:11px;color:var(--muted);margin-top:2px}

main{max-width:680px;margin:0 auto;padding:0 20px 24px}
.hero{padding:34px 0 16px;text-align:center}
.eyebrow{margin:0 0 10px;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold)}
h1{margin:0;font-size:clamp(27px,8.4vw,40px);line-height:1.3;font-weight:650;letter-spacing:-.01em}
.lede{margin:14px auto 0;max-width:32em;color:#c8c6d6;font-size:15px}

.board{
  margin-top:22px;padding:20px;border-radius:20px;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
  border:1px solid var(--line);
  box-shadow:0 24px 60px -30px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.05);
}
.coins{display:flex;justify-content:center;gap:14px;height:38px;margin:2px 0 6px}
.coin{width:34px;height:34px;border-radius:50%;border:1px solid rgba(201,162,39,.55);
  background:radial-gradient(circle at 32% 28%,#3a3413,#14152a 70%);
  box-shadow:inset 0 0 10px rgba(201,162,39,.25);opacity:.55;transition:opacity .2s}
.coin.flip{animation:flip .42s ease-in-out}
@keyframes flip{0%{transform:rotateY(0) translateY(0)}50%{transform:rotateY(540deg) translateY(-14px)}100%{transform:rotateY(1080deg) translateY(0)}}

.board-note{margin:0 0 10px;text-align:center;font-size:11.5px;letter-spacing:.02em;color:#8f93a8}
.lines{display:flex;flex-direction:column-reverse;gap:7px;min-height:0;margin:6px 0 4px}
.line{display:flex;gap:9px;justify-content:center;opacity:0;transform:translateY(6px);animation:pop .28s ease forwards}
@keyframes pop{to{opacity:1;transform:none}}
.line i{display:block;height:9px;border-radius:2px;background:linear-gradient(90deg,var(--gold),var(--gold-l));
  box-shadow:0 0 12px rgba(201,162,39,.25)}
.line.yang i{width:132px}
.line.yin i{width:61px}
.line.moving i{box-shadow:0 0 14px rgba(232,201,106,.75);outline:1px solid rgba(232,201,106,.5)}

.board-actions{text-align:center;margin-top:14px}
.btn{display:inline-block;border:0;cursor:pointer;font:inherit;text-decoration:none;
  border-radius:12px;padding:14px 34px;font-weight:650;letter-spacing:.01em;transition:transform .12s,filter .2s}
.btn:active{transform:scale(.985)}
.btn.primary{background:linear-gradient(180deg,#dcb63c,#b8911f);color:#161304;
  box-shadow:0 10px 26px -10px rgba(201,162,39,.75)}
.btn.primary[disabled]{filter:grayscale(.4) brightness(.8);cursor:default}
.btn.ghost{background:transparent;color:var(--gold-l);border:1px solid var(--line);padding:11px 26px;font-size:14px}
.hint{margin:10px 0 0;color:var(--muted);font-size:12.5px}
.progress{margin:10px 0 0;color:var(--gold);font-size:12.5px;letter-spacing:.14em}

.result{margin-top:8px}
.result-head{display:flex;align-items:center;gap:16px;padding-top:8px}
.hex{font-size:52px;line-height:1;color:var(--gold-l);text-shadow:0 0 26px rgba(201,162,39,.45);font-family:"Noto Sans Symbols2",serif}
.result-label{margin:0;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.answer{margin:12px 0 10px;font-size:clamp(40px,12vw,58px);line-height:1.05;font-weight:700;
  letter-spacing:.02em;color:var(--gold-l);text-shadow:0 0 30px rgba(201,162,39,.3)}
.answer.yes{color:#8fd6a5;text-shadow:0 0 32px rgba(111,191,135,.35)}
.answer.maybe{color:#e8d79a}
.answer.no{color:#e3908f;text-shadow:0 0 30px rgba(217,122,122,.26)}
.answer-sub{margin:0 0 4px;color:#d8d5e4;font-size:14.5px;line-height:1.5}
.result h2{margin:2px 0 2px;font-size:23px;font-weight:650}
.hex-sub{margin:0;color:var(--muted);font-size:13px}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 4px;padding:0}
.tag{list-style:none;font-size:12px;padding:4px 11px;border-radius:999px;
  border:1px solid var(--line);color:#ded7bf;background:rgba(201,162,39,.06)}
.block{margin-top:16px;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06)}
.block h3{margin:0 0 6px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.block p{margin:0;font-size:15px;color:#e6e3da}
.advice{border-color:rgba(201,162,39,.3);background:rgba(201,162,39,.07)}
.moving{margin:12px 0 0;padding:9px 13px;border-radius:10px;font-size:12.5px;color:#cfd2e0;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07)}
.result .btn{margin-top:18px;margin-bottom:6px}
.level-cat .hex{color:#8fd6a5;text-shadow:0 0 26px rgba(111,191,135,.4)}
.level-hung .hex{color:#e09292;text-shadow:0 0 26px rgba(217,122,122,.35)}

.steps{margin-top:36px}
.steps h2,.contact h2{margin:0 0 12px;font-size:16px;letter-spacing:.02em}
.steps ol{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.steps li{display:flex;gap:12px;align-items:flex-start;color:#cdcad8;font-size:14px}
.steps li span{flex:0 0 24px;height:24px;border-radius:50%;display:grid;place-items:center;
  font-size:12px;color:var(--gold);border:1px solid var(--line);margin-top:1px}

.contact{margin-top:34px;padding:22px;border-radius:18px;text-align:center;
  border:1px solid rgba(201,162,39,.22);background:rgba(201,162,39,.05)}
.contact p{margin:0 0 16px;color:#cfccdb;font-size:14px}
.channels{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.channel{flex:1 1 120px;max-width:180px;padding:13px 10px;font-size:14px;border:1px solid var(--line);
  background:rgba(255,255,255,.04);color:var(--ink)}
.channel.zalo{border-color:rgba(0,140,255,.4)}
.channel.tg{border-color:rgba(60,170,230,.4)}
.channel.wa{border-color:rgba(80,200,120,.4)}

.foot{max-width:680px;margin:0 auto;padding:34px 20px 40px;text-align:center;color:#a2a5ba;font-size:12.5px}
.foot p{margin:0}
.copy{margin-top:6px!important;letter-spacing:.12em;color:#7d8098}
.noscript{text-align:center;color:var(--warn);padding:20px}

@media (min-width:520px){
  .board{padding:26px 28px}
  .line.yang i{width:176px}
  .line.yin i{width:82px}
}
@media (prefers-reduced-motion:reduce){
  .coin.flip,.line{animation:none;opacity:1;transform:none}
}