:root {
  --ink: #1a0606;
  --lacquer: #8e0f14;
  --red: #c8102e;
  --gold: #e9b949;
  --gold-hi: #ffe39a;
  --paper: #f3e3c0;
  --paper-dk: #d9bf8c;
  --text: #f6e7c8;
  --muted: #c9a97a;
  --jade: #2e8b57;
  --brush: "Ma Shan Zheng", "Noto Serif SC", serif;
  --serif: "Cormorant Garamond", "Noto Serif SC", Georgia, serif;
  --caps: "Cinzel", "Noto Serif SC", serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; overflow-x: clip; }
body {
  min-height: 100vh;
  color: var(--text);
  font-family: var(--serif);
  font-size: 19px;
  background:
    radial-gradient(ellipse 60% 45% at 50% 62%, rgba(255, 150, 40, .28), transparent 70%),
    radial-gradient(ellipse 90% 60% at 50% 0%, #5a0a0c 0%, transparent 70%),
    repeating-linear-gradient(90deg, rgba(0,0,0,.18) 0 2px, transparent 2px 60px),
    linear-gradient(#2a0707, #120303 70%, #070101);
  overflow-x: hidden;
}
button, input { font: inherit; }
[hidden] { display: none !important; }

#smoke { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }
.bagua { position: fixed; left: 50%; top: 52%; width: min(120vw, 900px); aspect-ratio: 1; transform: translate(-50%, -50%); opacity: .09; pointer-events: none; z-index: 0; }
.bagua svg { width: 100%; height: 100%; animation: spin 140s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* hanging lanterns */
.lanterns { position: fixed; inset: 0 0 auto 0; height: 0; z-index: 2; pointer-events: none; }
.lantern { position: absolute; top: 0; width: 64px; height: 120px; transform-origin: 50% 0; animation: sway 5s ease-in-out infinite; }
.lantern::before { content: ""; position: absolute; left: 50%; top: 0; width: 2px; height: 34px; background: #3a1a0a; }
.lantern b {
  position: absolute; left: 0; top: 30px; width: 64px; height: 70px; border-radius: 45%;
  display: grid; place-items: center; font: 400 30px var(--brush); color: var(--gold-hi);
  background: radial-gradient(circle at 50% 45%, #ff5a3a, #c8102e 55%, #6d0610);
  box-shadow: 0 0 40px 8px rgba(255, 80, 40, .45), inset 0 0 0 3px rgba(0,0,0,.25);
  border-top: 6px solid var(--gold); border-bottom: 6px solid var(--gold);
}
.lantern::after { content: ""; position: absolute; left: 50%; top: 106px; width: 10px; height: 26px; margin-left: -5px; background: repeating-linear-gradient(90deg, var(--red) 0 2px, transparent 2px 3px); }
.l1 { left: 3%; animation-delay: -1s; } .l2 { left: 18%; top: -24px; animation-delay: -3s; }
.l3 { right: 18%; top: -24px; animation-delay: -2s; } .l4 { right: 3%; animation-delay: -4s; }
@keyframes sway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }

/* top bar */
.roof {
  position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 10px; padding: 10px 16px;
  background: linear-gradient(#5e0a0d, #3a0507); border-bottom: 3px solid var(--gold);
  box-shadow: 0 6px 0 #1a0303, 0 10px 30px rgba(0,0,0,.6);
}
.roof::after { content: ""; position: absolute; left: 0; right: 0; bottom: -14px; height: 10px; background: radial-gradient(circle at 10px -2px, transparent 9px, #3a0507 10px) 0 0/20px 10px repeat-x; }
.grow { flex: 1; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand img { width: 46px; height: 46px; filter: drop-shadow(0 2px 6px rgba(0,0,0,.6)); transition: transform .3s; }
.brand:hover img { transform: rotate(-12deg) scale(1.06); }
.brand span { font: 800 18px var(--caps); letter-spacing: .2em; color: var(--gold-hi); }
@media (max-width: 480px) { .brand span { display: none; } }
.hero-logo { display: block; width: 150px; height: 150px; margin: 0 auto 6px; filter: drop-shadow(0 10px 24px rgba(0,0,0,.7)) drop-shadow(0 0 30px rgba(255,170,60,.35)); animation: bob 4s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-6px) rotate(-3deg); } }
.seal-logo {
  font: 400 26px/1 var(--brush); color: var(--gold-hi); text-decoration: none; background: var(--red);
  padding: 6px 8px 4px; border: 2px solid var(--gold); border-radius: 6px; box-shadow: inset 0 0 0 2px var(--red), inset 0 0 0 4px var(--gold-hi);
}
.ca { display: flex; align-items: center; gap: 6px; font-size: 14px; background: rgba(0,0,0,.35); border: 1px solid rgba(233,185,73,.4); border-radius: 999px; padding: 4px 6px 4px 12px; min-width: 0; }
.ca span { font-family: var(--caps); color: var(--gold); }
.ca code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 30vw; color: var(--text); }
.ca button { background: var(--gold); color: var(--ink); border: 0; border-radius: 999px; padding: 2px 10px; cursor: pointer; font-family: var(--caps); font-size: 12px; }
.icon-btn {
  width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--gold);
  background: rgba(0,0,0,.3); color: var(--gold-hi); font: 400 20px var(--brush); text-decoration: none; cursor: pointer;
}
.icon-btn.off { opacity: .4; }
.sound-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: 999px; border: 2px solid var(--gold);
  background: rgba(0,0,0,.3); color: var(--gold-hi); font: 800 13px var(--caps); letter-spacing: .06em; cursor: pointer;
}
.sound-btn.off { opacity: .55; border-style: dashed; }
@media (max-width: 480px) { .sound-btn span { display: none; } .sound-btn { padding: 0 10px; } }

/* entrance gate */
.gate { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; }
.door {
  position: absolute; top: 0; bottom: 0; width: 50%; display: grid; place-items: center; transition: transform 1.1s cubic-bezier(.6,0,.3,1);
  background:
    radial-gradient(circle at 50% 50%, transparent 0 0),
    repeating-linear-gradient(0deg, rgba(0,0,0,.25) 0 3px, transparent 3px 90px),
    linear-gradient(90deg, #5e0a0d, #a3121a 50%, #5e0a0d);
  box-shadow: inset 0 0 80px rgba(0,0,0,.6);
}
.door.left { left: 0; border-right: 4px solid var(--gold); } .door.right { right: 0; border-left: 4px solid var(--gold); }
.door span { font: 400 clamp(60px, 12vw, 130px)/1 var(--brush); color: var(--gold-hi); writing-mode: vertical-rl; opacity: .9; text-shadow: 0 4px 0 #3a0507; }
.door.left span { margin-left: 30%; } .door.right span { margin-right: 30%; }
.door::after { content: ""; position: absolute; top: 50%; width: 46px; height: 46px; margin-top: -23px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #ffe39a, #b98418); border: 3px solid #5c3604; }
.door.left::after { right: 22px; } .door.right::after { left: 22px; }
.enter {
  position: relative; z-index: 2; width: 190px; height: 190px; border-radius: 50%; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: radial-gradient(circle at 50% 40%, #e8323a, #8e0f14); border: 6px double var(--gold-hi); color: var(--gold-hi);
  box-shadow: 0 0 0 8px rgba(233,185,73,.25), 0 0 60px rgba(255,120,40,.6); animation: pulse 2s ease-in-out infinite; transition: opacity .4s, transform .4s;
}
.enter b { font: 400 54px/1 var(--brush); }
.enter span { font: 800 13px var(--caps); letter-spacing: .1em; }
.enter small { font-size: 12px; opacity: .8; font-family: var(--serif); }
@keyframes pulse { 50% { box-shadow: 0 0 0 16px rgba(233,185,73,.12), 0 0 90px rgba(255,120,40,.8); } }
.gate.open .door.left { transform: translateX(-100%); } .gate.open .door.right { transform: translateX(100%); }
.gate.open .enter { opacity: 0; transform: scale(1.4); pointer-events: none; }
.gate.open { pointer-events: none; }
.buy, .ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 18px; border-radius: 6px;
  font: 800 15px var(--caps); letter-spacing: .06em; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.buy { background: linear-gradient(#ffe39a, #e9b949 50%, #b98418); color: #3a0507; border: 2px solid #7a4a08; box-shadow: 0 3px 0 #5c3604, 0 0 20px rgba(233,185,73,.35); }
.buy:active { transform: translateY(2px); box-shadow: 0 1px 0 #5c3604; }
.ghost { background: rgba(0,0,0,.35); color: var(--gold-hi); border: 2px solid var(--gold); }

main { position: relative; z-index: 4; }

/* the altar */
.altar { position: relative; max-width: 980px; margin: 0 auto; padding: 46px 16px 20px; text-align: center; }
.pillar {
  position: absolute; top: 30px; bottom: 0; width: 64px; display: flex; justify-content: center; padding-top: 30px;
  background: linear-gradient(90deg, #4a0508, #b3141c 40%, #d0242a 55%, #6d0610);
  border-left: 4px solid var(--gold); border-right: 4px solid var(--gold); box-shadow: 0 0 40px rgba(0,0,0,.6);
}
.pillar span { writing-mode: vertical-rl; font: 400 34px/1.2 var(--brush); color: var(--gold-hi); letter-spacing: .15em; text-shadow: 0 2px 0 #3a0507; }
.pillar.left { left: 0; } .pillar.right { right: 0; }

.title h1 { margin: 0; display: flex; flex-direction: column; align-items: center; }
.title .cn {
  font: 400 clamp(84px, 16vw, 150px)/1 var(--brush); color: var(--gold-hi);
  background: linear-gradient(#fff3c4, #f0c45a 45%, #b07a12 80%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 0 #5e0a0d) drop-shadow(0 0 30px rgba(255,170,60,.45));
}
.title .en { font: 800 clamp(22px, 4vw, 34px) var(--caps); letter-spacing: .5em; margin-right: -.5em; color: var(--gold); margin-top: 4px; }
.sub { margin: 14px auto 0; max-width: 520px; color: var(--muted); font-size: 20px; line-height: 1.4; }
.sub em { color: var(--gold-hi); }

.hero-ca {
  display: inline-flex; align-items: center; gap: 10px; max-width: 100%; margin: 18px auto 0; padding: 6px 16px 6px 6px; cursor: pointer;
  background: rgba(0,0,0,.4); border: 1px solid rgba(233,185,73,.5); border-radius: 999px; color: var(--gold-hi);
}
.hero-ca span { font: 800 12px var(--caps); background: var(--gold); color: var(--ink); border-radius: 999px; padding: 3px 10px; }
.hero-ca code { font: 700 15px ui-monospace, monospace; letter-spacing: .04em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ask { margin: 18px auto 0; display: flex; gap: 8px; max-width: 520px; }
.ask input {
  flex: 1; min-width: 0; padding: 12px 14px; border-radius: 6px; border: 2px solid rgba(233,185,73,.55);
  background: rgba(20,4,4,.75); color: var(--text); font-family: ui-monospace, monospace; font-size: 14px; outline: none;
}
.ask input:focus { border-color: var(--gold-hi); box-shadow: 0 0 0 3px rgba(233,185,73,.25); }

.shrine { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 10px; margin: 30px auto 0; max-width: 620px; min-height: 290px; }
.master { position: relative; justify-self: end; width: 170px; }
.master-svg { width: 170px; height: 170px; display: block; filter: drop-shadow(0 10px 20px rgba(0,0,0,.6)); }
.speech {
  position: absolute; bottom: 168px; right: 10px; width: 200px; padding: 10px 12px; text-align: left; font-size: 16px; line-height: 1.3;
  background: var(--paper); color: #3a0d06; border-radius: 10px; border: 2px solid #7a4a1a; box-shadow: 0 6px 20px rgba(0,0,0,.5);
  font-style: italic; transition: opacity .3s;
}
.speech::after { content: ""; position: absolute; bottom: -10px; right: 50px; border: 8px solid transparent; border-top-color: var(--paper); }

.cup-btn { position: relative; background: none; border: 0; padding: 0; cursor: pointer; width: 160px; height: 240px; -webkit-tap-highlight-color: transparent; }
.cup-svg { width: 160px; height: 220px; position: absolute; bottom: 0; left: 0; filter: drop-shadow(0 14px 18px rgba(0,0,0,.7)); transform-origin: 50% 90%; }
.cup-btn:hover .cup-svg { filter: drop-shadow(0 14px 18px rgba(0,0,0,.7)) drop-shadow(0 0 18px rgba(255,200,80,.6)); }
.cup-btn.shaking .cup-svg { animation: rattle .12s linear infinite; }
@keyframes rattle { 0% { transform: rotate(-12deg) translateX(-4px); } 50% { transform: rotate(12deg) translateX(4px) translateY(-6px); } 100% { transform: rotate(-12deg) translateX(-4px); } }
.cup-btn:not(.shaking) .cup-svg { animation: breathe 3s ease-in-out infinite; }
@keyframes breathe { 50% { transform: translateY(-5px) rotate(-2deg); } }
.cup-btn:disabled { cursor: wait; }

.flying-stick {
  position: absolute; left: 50%; bottom: 120px; width: 16px; height: 150px; margin-left: -8px; border-radius: 3px; opacity: 0;
  background: linear-gradient(90deg, #a77b35, #f0cd85 50%, #a77b35); border: 2px solid #3a240c; z-index: 2;
}
.flying-stick::before { content: ""; position: absolute; left: -2px; right: -2px; top: -2px; height: 26px; background: var(--red); border-radius: 3px 3px 0 0; border: 2px solid #3a240c; }
.flying-stick .num { position: absolute; left: 50%; top: 34px; transform: translateX(-50%); writing-mode: vertical-rl; font: 900 13px "Noto Serif SC", serif; color: #3a0d06; }
.flying-stick.out { animation: fly 1.1s cubic-bezier(.2,.9,.3,1.2) forwards; }
@keyframes fly { 0% { opacity: 1; transform: translateY(40px) rotate(0); } 60% { opacity: 1; transform: translateY(-110px) rotate(380deg); } 100% { opacity: 1; transform: translateY(0) rotate(360deg) scale(1.05); } }

.burner { position: relative; justify-self: start; width: 160px; height: 120px; }
.burner svg { position: absolute; bottom: 0; left: 0; width: 160px; height: 70px; }
.burner i { position: absolute; bottom: 58px; width: 3px; height: 60px; background: linear-gradient(#ff6a2a 0 4px, #a0522d 4px, #6b3a1a); border-radius: 2px; }
.burner i:nth-child(1) { left: 62px; transform: rotate(-8deg); } .burner i:nth-child(2) { left: 79px; height: 66px; } .burner i:nth-child(3) { left: 96px; transform: rotate(8deg); }
.burner i::before { content: ""; position: absolute; top: -3px; left: -3px; width: 9px; height: 9px; border-radius: 50%; background: #ff8a3a; box-shadow: 0 0 12px 4px rgba(255,120,40,.8); animation: ember 1.6s ease-in-out infinite alternate; }
@keyframes ember { to { opacity: .55; box-shadow: 0 0 6px 2px rgba(255,120,40,.6); } }

.sticks-left { margin: 16px 0 0; font: 800 14px var(--caps); letter-spacing: .12em; color: var(--gold); }
.sticks-left b { color: var(--gold-hi); font-size: 18px; }
.hint { margin: 8px 0 0; color: var(--muted); font-size: 16px; letter-spacing: .05em; }
.mobile-only { display: none; }
@media (hover: none) { .mobile-only { display: inline; } }

/* the fortune scroll */
.scroll-wrap { scroll-margin-top: 80px; max-width: 760px; margin: 10px auto 0; padding: 0 16px 30px; }
.scroll { position: relative; filter: drop-shadow(0 20px 40px rgba(0,0,0,.7)); }
.rod { position: relative; z-index: 2; height: 26px; margin: 0 -18px; border-radius: 13px; background: linear-gradient(#3a1a08, #8a5a26 35%, #c99a4a 50%, #6b3a12 70%, #2a1204); }
.rod::before, .rod::after { content: ""; position: absolute; top: -5px; width: 22px; height: 36px; border-radius: 6px; background: linear-gradient(#ffe39a, #b98418); border: 2px solid #5c3604; }
.rod::before { left: -6px; } .rod::after { right: -6px; }
.paper {
  position: relative; overflow: hidden; color: #2a0d06; padding: 26px 34px 30px; margin: -4px 0;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(255,255,255,.35), transparent 50%),
    radial-gradient(ellipse at 80% 90%, rgba(120,70,20,.18), transparent 60%),
    repeating-linear-gradient(0deg, rgba(120,80,30,.04) 0 2px, transparent 2px 5px),
    var(--paper);
  border-left: 10px solid var(--red); border-right: 10px solid var(--red);
  box-shadow: inset 0 0 60px rgba(120,70,20,.35);
}
.scroll.unroll .paper { animation: unroll 1.4s cubic-bezier(.3,.8,.3,1) both; }
@keyframes unroll { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }

.paper-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.stick-no { font: 900 26px "Noto Serif SC", serif; color: #5e0a0d; letter-spacing: .1em; }
.stick-no b { color: var(--red); font-size: 34px; padding: 0 4px; }
.grade-stamp {
  display: flex; flex-direction: column; align-items: center; padding: 6px 14px; border: 4px double var(--red); color: var(--red);
  transform: rotate(-6deg); border-radius: 8px; background: rgba(200,16,46,.06);
}
.grade-stamp.stamped { animation: stamp .45s cubic-bezier(.3,1.6,.5,1) both; animation-delay: 1.1s; }
@keyframes stamp { from { transform: rotate(-6deg) scale(3); opacity: 0; } to { transform: rotate(-6deg) scale(1); opacity: 1; } }
.g-cn { font: 400 40px/1 var(--brush); }
.g-en { font: 800 12px var(--caps); letter-spacing: .15em; margin-top: 4px; }
.grade-stamp.l3, .grade-stamp.l4 { color: #222; border-color: #222; background: rgba(0,0,0,.06); }

.hex-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; margin: 18px 0 10px; padding: 14px 0; border-top: 2px solid rgba(94,10,13,.25); border-bottom: 2px solid rgba(94,10,13,.25); }
.hex-sym { font-size: 92px; line-height: 1; color: #2a0d06; font-family: "Noto Serif SC", "Segoe UI Symbol", "Apple Symbols", serif; }
.hex-cn { font: 400 48px/1 var(--brush); color: #5e0a0d; }
.hex-en { font: 700 18px var(--serif); color: #6b3a1a; margin-top: 6px; }
.hex-en i { display: block; font-style: italic; font-weight: 500; font-size: 15px; opacity: .8; }
.saying { display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 140px; }
.s-cn { writing-mode: vertical-rl; font: 400 34px/1.1 var(--brush); color: var(--red); letter-spacing: .1em; }
.s-en { font: italic 500 14px/1.2 var(--serif); text-align: center; color: #6b3a1a; }

.reading { font-size: 23px; line-height: 1.45; margin: 16px 0; color: #2a0d06; }
.reading::first-letter { font: 400 54px/0.8 var(--brush); color: var(--red); float: left; padding: 6px 8px 0 0; }
.dos { display: grid; gap: 8px; margin: 10px 0 16px; font-size: 19px; }
.dos > div { display: flex; gap: 10px; align-items: baseline; }
.tag { flex: none; font: 800 13px var(--caps); letter-spacing: .08em; padding: 3px 8px; border-radius: 4px; color: #fff4d6; }
.tag.good { background: var(--jade); } .tag.bad { background: #222; }
.luck { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.luck > div { background: rgba(94,10,13,.07); border: 1px solid rgba(94,10,13,.25); border-radius: 6px; padding: 8px 10px; text-align: center; }
.luck small { display: block; font: 800 11px var(--caps); letter-spacing: .1em; color: #8e5a2a; }
.luck b { display: block; font: 700 19px/1.2 var(--serif); color: #5e0a0d; margin-top: 4px; }
.seen { min-height: 64px; display: flex; align-items: flex-end; margin-top: 14px; font-size: 14px; color: #8e5a2a; font-family: ui-monospace, monospace; padding-right: 90px; }
.red-seal {
  position: absolute; right: 26px; bottom: 20px; width: 72px; height: 72px; display: grid; place-items: center; text-align: center;
  font: 400 22px/1 var(--brush); color: #fff1d0; background: var(--red); border-radius: 6px; transform: rotate(8deg); opacity: .88;
  box-shadow: inset 0 0 0 3px var(--red), inset 0 0 0 5px #fff1d0;
}

.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 24px; }

footer { text-align: center; padding: 30px 16px 40px; color: var(--muted); font-size: 15px; opacity: .8; }

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 120px); z-index: 20; padding: 10px 18px; border-radius: 6px;
  background: var(--paper); color: #3a0d06; border: 2px solid var(--gold); transition: transform .3s; font-size: 17px;
}
.toast.show { transform: translate(-50%, 0); }

@media (max-width: 760px) {
  .pillar, .lantern.l2, .lantern.l3 { display: none; }
  .ca code { max-width: 22vw; }
  .shrine { grid-template-columns: 1fr auto; }
  .burner { display: none; }
  .master, .master-svg { width: 130px; height: 130px; }
  .speech { bottom: 128px; right: -10px; width: 170px; font-size: 15px; }
  .paper { padding: 20px 18px 24px; }
  .rod { margin: 0 -8px; }
  .hex-row { grid-template-columns: auto 1fr; }
  .saying { grid-column: 1 / -1; flex-direction: row; max-width: none; justify-content: center; }
  .s-cn { writing-mode: horizontal-tb; }
  .hex-sym { font-size: 70px; }
  .luck { grid-template-columns: 1fr; }
  .reading { font-size: 20px; }
}
@media (max-width: 480px) {
  .ca { display: none !important; }
  .buy { padding: 9px 12px; font-size: 13px; }
  .shrine { min-height: 260px; }
}