/* ── fixed tokens ────────────────────────────────────── */
:root{
  --zhu:#C6302F;
  --zhu-deep:#9B2320;
  --zhu-shade:#7C1B18;
  --jin:#C9A227;
  --jin-deep:#8A701C;
  --qi:#17110E;
  --qing:#3E6B62;
  --zhu-ink:#231A12;
  --term-bg:#171210;
  --term-fg:#E9E2D4;
  --display:'Noto Serif TC',Georgia,serif;
  --body:'Noto Sans TC',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --col:1080px;
  --read:680px;
}

/* ── 夜の廟 ──────────────────────────────────────────── */
:root,[data-theme="dark"]{
  --bg:#120E0C;
  --bg-2:#1C1512;
  --glow:rgba(198,48,47,.17);
  --lantern:rgba(255,150,70,.30);
  --vignette:rgba(0,0,0,.55);
  --surface:#1F1814;
  --surface-2:#282019;
  --text:#F0E7D6;
  --text-dim:rgba(240,231,214,.58);
  --text-faint:rgba(240,231,214,.34);
  --accent:#C9A227;
  --accent-dim:#8A701C;
  --rule:rgba(201,162,39,.28);
  --lattice:rgba(255,255,255,.024);
  --paving:rgba(240,231,214,.075);
  --band-1:#B92C2A;
  --band-2:#7C1B18;
  --tassel:#C9A227;
  --plaque-1:#33201A;
  --plaque-2:#241611;
  --slip-1:#EFE2C6;
  --slip-2:#DFCDA6;
  --slip-shadow:0 34px 64px -30px #000,0 0 0 1px rgba(0,0,0,.55);
  --lift:0 24px 48px -24px #000;
}

/* ── 晝の廟 ──────────────────────────────────────────── */
[data-theme="light"]{
  --bg:#F0E7D2;
  --bg-2:#E7DAC0;
  --glow:rgba(198,48,47,.11);
  --lantern:rgba(214,120,50,.20);
  --vignette:rgba(120,90,40,.16);
  --surface:#E6DAC0;
  --surface-2:#EDE3CD;
  --text:#251C13;
  --text-dim:rgba(37,28,19,.68);
  --text-faint:rgba(37,28,19,.5);
  --accent:#9B2320;
  --accent-dim:#7C1B18;
  --rule:rgba(155,35,32,.24);
  --lattice:rgba(90,60,20,.042);
  --paving:rgba(37,28,19,.1);
  --band-1:#C13230;
  --band-2:#8E211E;
  --tassel:#B08B1E;
  --plaque-1:#33201A;
  --plaque-2:#241611;
  --slip-1:#FFFCF3;
  --slip-2:#F4EAD4;
  --slip-shadow:0 24px 48px -28px rgba(60,40,10,.6),0 0 0 1px rgba(140,110,60,.26);
  --lift:0 18px 36px -20px rgba(60,40,10,.5);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body{
  background:var(--bg);color:var(--text);
  font-family:var(--body);line-height:1.75;
  min-height:100vh;padding:0 20px;overflow-x:hidden;
  background-image:
    radial-gradient(ellipse 70% 42% at 50% 0%,var(--glow),transparent 68%),
    radial-gradient(ellipse 120% 80% at 50% 32%,transparent 42%,var(--vignette) 100%),
    repeating-linear-gradient(90deg,transparent 0 25px,var(--lattice) 25px 28px),
    linear-gradient(180deg,var(--bg-2),var(--bg) 44%);
  transition:background-color .35s ease,color .35s ease;
}
a{color:inherit}
.skip{position:absolute;left:-9999px;top:0;background:var(--zhu);color:#fff;
  padding:10px 16px;z-index:99;border-radius:0 0 3px 0}
.skip:focus{left:0}

/* ── 八仙彩 + 燈籠 ───────────────────────────────────── */
.banner-top{position:relative;height:58px;margin:0 -20px;pointer-events:none;user-select:none;z-index:2}
.band{
  position:absolute;inset:0 0 auto;height:22px;
  background:
    repeating-linear-gradient(90deg,rgba(0,0,0,.13) 0 2px,transparent 2px 9px),
    linear-gradient(180deg,var(--band-1),var(--band-2));
  box-shadow:0 4px 12px -4px rgba(0,0,0,.5),inset 0 -4px 6px -4px rgba(0,0,0,.55);
}
.band::after{
  content:"";position:absolute;inset:auto 0 0;height:4px;
  background:repeating-linear-gradient(90deg,var(--jin) 0 9px,var(--jin-deep) 9px 18px);
  opacity:.9;
}
.tassel{position:absolute;top:22px;display:flex;flex-direction:column;align-items:center}
.tassel i{display:block;width:9px;height:8px;border-radius:1px;background:var(--jin)}
.tassel i:nth-child(2){width:4px;height:20px;background:linear-gradient(180deg,var(--tassel),transparent)}
.tassel:nth-of-type(1){left:16%}
.tassel:nth-of-type(2){left:33%}
.tassel:nth-of-type(3){left:50%;margin-left:-4px}
.tassel:nth-of-type(4){right:33%}
.tassel:nth-of-type(5){right:16%}

.denglong{position:absolute;top:16px;width:62px;display:none}
.denglong.l{left:calc(50% - 614px)}
.denglong.r{right:calc(50% - 614px)}
.denglong .cord{width:2px;height:12px;margin:0 auto;background:var(--jin-deep)}
.denglong .body{
  position:relative;height:74px;border-radius:50% / 46%;
  background:
    repeating-linear-gradient(180deg,rgba(0,0,0,.11) 0 6px,transparent 6px 12px),
    radial-gradient(ellipse 62% 52% at 50% 44%,#FFCF8E,#DC5A32 60%,#9C2A18);
  box-shadow:0 0 48px 9px var(--lantern),inset 0 -9px 15px -9px rgba(0,0,0,.55);
}
.denglong .body::before,.denglong .body::after{
  content:"";position:absolute;left:33%;right:33%;height:7px;border-radius:2px;background:#2C2118}
.denglong .body::before{top:-3px}.denglong .body::after{bottom:-3px}
.denglong .kanji{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--display);font-weight:900;font-size:1.6rem;color:#7C1B18;
  writing-mode:vertical-rl;
}
.denglong .fringe{
  position:absolute;left:50%;transform:translateX(-50%);bottom:-16px;
  width:5px;height:16px;background:linear-gradient(180deg,var(--jin),transparent)}
@media (min-width:1260px){.denglong{display:block}}
@media (max-width:560px){
  .banner-top{height:50px}
  .tassel:nth-of-type(2),.tassel:nth-of-type(4){display:none}
}

/* ── top bar ─────────────────────────────────────────── */
.topbar{max-width:var(--col);margin:0 auto;padding:14px 0 0;
  display:flex;justify-content:space-between;align-items:center;gap:14px;position:relative;z-index:3}
.brand{font-family:var(--mono);font-size:.76rem;letter-spacing:.14em;
  color:var(--text-dim);text-decoration:none}
.brand span{opacity:.55}
.brand:hover{color:var(--accent)}
.topbar-right{display:flex;align-items:center;gap:8px}
.lang,.theme{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;
  color:var(--text-dim);text-decoration:none;background:none;cursor:pointer;
  border:1px solid var(--rule);border-radius:2px;padding:5px 10px;line-height:1.4;
}
.theme{font-family:var(--display);font-weight:600;font-size:.82rem;padding:3px 10px}
.lang:hover,.theme:hover{border-color:var(--accent);color:var(--accent)}
.lang:focus-visible,.theme:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.theme .day{display:none}
[data-theme="light"] .theme .day{display:inline}
[data-theme="light"] .theme .night{display:none}
.star{display:inline-flex;align-items:center;gap:6px;text-decoration:none;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;
  color:#fff;background:linear-gradient(180deg,var(--zhu),var(--zhu-deep));
  border-radius:2px;padding:6px 11px;
  box-shadow:0 6px 16px -10px rgba(140,30,20,.9),0 0 0 1px rgba(0,0,0,.16)}
.star:hover{filter:brightness(1.08)}
.star svg{width:12px;height:12px;fill:currentColor}
.star b{font-weight:500;padding-left:6px;margin-left:2px;border-left:1px solid rgba(255,255,255,.3)}

/* ── 廟埕: the grounds ───────────────────────────────── */
.grounds{
  max-width:var(--col);margin:0 auto;
  display:grid;gap:clamp(30px,5vw,56px);align-items:center;
  min-height:clamp(520px,72vh,760px);
}
@media (min-width:1000px){.grounds{grid-template-columns:1.05fr 1fr}}

/* ── 燕尾脊 + 匾額 ───────────────────────────────────── */
.hero{text-align:center;position:relative}
.temple{position:relative;width:100%;max-width:520px;margin:0 auto}
.roof{width:100%;height:auto;display:block;filter:drop-shadow(var(--lift));
  animation:roofIn .85s cubic-bezier(.2,.8,.3,1) backwards}
@keyframes roofIn{from{opacity:0;transform:translateY(-14px)}}
.roof .tile{fill:var(--zhu)}
.roof .tile-dark{fill:var(--zhu-deep)}
.roof .eave{fill:var(--zhu-shade)}
.roof .gold{fill:var(--jin)}
.roof .jade{fill:var(--qing)}

.plaque{
  display:inline-block;position:relative;margin-top:-14px;
  border:2px solid var(--jin-deep);border-radius:2px;
  padding:16px clamp(26px,5vw,54px) 20px;
  background-color:var(--plaque-2);
  background-image:linear-gradient(180deg,var(--plaque-1),var(--plaque-2));
  box-shadow:0 0 0 5px var(--bg),0 0 0 6px rgba(201,162,39,.3),var(--lift);
  animation:plaqueIn .8s cubic-bezier(.2,.8,.3,1) .22s backwards;
}
@keyframes plaqueIn{from{opacity:0;transform:translateY(16px)}}
.plaque::before,.plaque::after{
  content:"";position:absolute;top:50%;width:9px;height:9px;border-radius:50%;
  background:var(--jin-deep);transform:translateY(-50%)}
.plaque::before{left:9px}.plaque::after{right:9px}
h1{
  font-family:var(--display);font-weight:900;
  font-size:clamp(2.2rem,5.8vw,3.3rem);
  letter-spacing:.24em;text-indent:.24em;
  color:var(--jin);line-height:1.16;
  text-shadow:0 2px 0 rgba(0,0,0,.4);
}
h1.en{font-size:clamp(1.7rem,4.4vw,2.5rem);letter-spacing:.08em;text-indent:.08em}
.sub{font-family:var(--mono);font-size:.66rem;letter-spacing:.32em;text-indent:.32em;
  color:#B5942F;margin-top:9px}
.creed{margin:24px auto 0;max-width:32ch;font-size:.94rem;color:var(--text-dim)}

/* ── 籤筒 ────────────────────────────────────────────── */
.altar{display:flex;flex-direction:column;align-items:center;gap:20px;position:relative}
.altar::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  top:-26px;left:50%;transform:translateX(-50%);
  width:min(520px,calc(100vw - 10px));height:300px;
  background:repeating-radial-gradient(circle at 50% 46%,
    transparent 0 16px,var(--paving) 16px 17.5px);
  -webkit-mask-image:radial-gradient(ellipse 50% 46% at 50% 46%,#000 24%,transparent 74%);
  mask-image:radial-gradient(ellipse 50% 46% at 50% 46%,#000 24%,transparent 74%);
}
.altar > *{position:relative;z-index:1}
.tube-wrap{width:140px;height:210px;position:relative;transform-origin:50% 92%;flex:none}
.tube-wrap.shaking{animation:shake .46s ease-in-out 3}
@keyframes shake{
  0%,100%{transform:rotate(0) translateY(0)}
  25%{transform:rotate(-12deg) translateY(-6px)}
  75%{transform:rotate(12deg) translateY(-6px)}
}
.sticks{position:absolute;bottom:118px;left:50%;transform:translateX(-50%);
  display:flex;gap:5px;align-items:flex-end;z-index:0}
.sticks i{display:block;width:7px;border-radius:3px 3px 0 0;
  background:linear-gradient(180deg,#F0E4C8,#A98F63);
  box-shadow:inset -1.5px 0 0 rgba(0,0,0,.2)}
.sticks i:nth-child(1){height:44px}
.sticks i:nth-child(2){height:62px}
.sticks i:nth-child(3){height:50px}
.sticks i:nth-child(4){height:70px}
.sticks i:nth-child(5){height:48px}
.sticks i:nth-child(6){height:58px}
.sticks i:nth-child(7){height:40px}
.chosen{
  position:absolute;bottom:118px;left:50%;z-index:0;
  width:9px;height:86px;border-radius:4px 4px 0 0;
  background:linear-gradient(180deg,#FBF3DF,var(--jin));
  box-shadow:inset -1.5px 0 0 rgba(0,0,0,.18),0 0 16px -2px rgba(201,162,39,.6);
  transform-origin:50% 100%;
  transform:translateX(-50%) translateY(70px) rotate(0deg);
  transition:transform .55s cubic-bezier(.2,.9,.3,1.25);
}
.chosen::after{content:"";position:absolute;top:10px;left:1px;right:1px;height:3px;
  background:var(--zhu)}
.tube-wrap.drawn .chosen{transform:translateX(-50%) translateY(-16px) rotate(9deg)}
.tube{
  position:absolute;bottom:0;left:50%;transform:translateX(-50%);z-index:1;
  width:116px;height:132px;
  background:linear-gradient(90deg,#7C1B18,var(--zhu) 40%,#B72C25 76%,#6E1815);
  border-radius:4px 4px 6px 6px;
  box-shadow:0 18px 34px -14px rgba(40,10,5,.8),inset 0 -14px 22px -14px #000;
}
.tube::before{content:"";position:absolute;inset:0 0 auto;height:10px;
  background:linear-gradient(90deg,var(--jin-deep),var(--jin),var(--jin-deep));opacity:.9}
.tube span{
  position:absolute;inset:12px 0 0;display:grid;place-items:center;
  font-family:var(--display);font-weight:900;font-size:1.9rem;
  color:var(--jin);letter-spacing:.14em;
  writing-mode:vertical-rl;text-shadow:0 2px 3px rgba(0,0,0,.45);
}

button#drawBtn{
  font-family:var(--display);font-weight:600;
  font-size:1.05rem;letter-spacing:.3em;text-indent:.3em;
  color:var(--qi);background:linear-gradient(180deg,var(--jin),#A9861B);
  border:none;border-radius:3px;padding:14px 36px;cursor:pointer;
  box-shadow:0 10px 24px -12px rgba(150,115,20,1),0 0 0 1px rgba(0,0,0,.24);
  transition:transform .15s ease,filter .15s ease;
}
button#drawBtn:hover{filter:brightness(1.09)}
button#drawBtn:active{transform:translateY(2px)}
button#drawBtn:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
button#drawBtn[disabled]{opacity:.45;cursor:wait}
.hint{font-size:.84rem;color:var(--text-dim);text-align:center;max-width:26ch}
.hint::before{content:"";display:block;width:26px;height:1px;background:var(--rule);margin:0 auto 12px}
.slip.show ~ .hint{display:none}
.censer{font-family:var(--mono);font-size:.76rem;letter-spacing:.16em;color:var(--text-dim)}
.censer strong{color:var(--accent);font-weight:500}

/* ── 籤詩 ────────────────────────────────────────────── */
.slip{
  width:100%;max-width:480px;
  background:linear-gradient(160deg,var(--slip-1),var(--slip-2));
  color:var(--zhu-ink);border-radius:2px;
  padding:clamp(22px,3.4vw,30px);
  box-shadow:var(--slip-shadow);
  display:none;position:relative;
}
.slip::after{content:"";position:absolute;inset:8px;pointer-events:none;
  border:1px solid rgba(140,110,60,.4);border-radius:2px}
.slip.show{display:block;animation:rise .55s cubic-bezier(.2,.8,.25,1)}
@keyframes rise{from{opacity:0;transform:translateY(22px) rotate(-.6deg)}to{opacity:1;transform:none}}
.slip-top{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;
  padding-bottom:14px;border-bottom:1px solid rgba(140,110,60,.4)}
.num{font-family:var(--display);font-weight:600;font-size:.9rem;
  letter-spacing:.24em;color:#6B4E22}
.luck{
  font-family:var(--display);font-weight:900;
  font-size:clamp(1.7rem,5vw,2.3rem);line-height:.98;letter-spacing:.04em;
  color:var(--zhu-deep);white-space:nowrap;text-align:right;flex:0 0 auto;
}
/* English tier names are words, not three characters — let them wrap */
html[lang="en"] .luck{
  font-size:clamp(1.05rem,2.4vw,1.35rem);line-height:1.25;letter-spacing:.13em;
  white-space:normal;max-width:7.5ch;
}
.luck[data-tier="mid"]{color:#4A5F7A}
.luck[data-tier="bad"]{color:#26201A}
.string{
  margin-top:16px;
  font-family:var(--mono);font-size:clamp(.76rem,2.4vw,.86rem);
  background:var(--term-bg);color:var(--term-fg);
  padding:12px 14px;border-radius:2px;
  border-left:3px solid var(--zhu);word-break:break-word;line-height:1.65;
}
.string b{color:var(--jin);font-weight:500}
.verdict{margin:18px 0 0;font-family:var(--display);font-size:1rem;
  line-height:1.95;color:#2E2013}
.verdict .label{display:block;font-family:var(--mono);font-size:.62rem;
  letter-spacing:.34em;color:#8A6B2E;margin-bottom:6px}
.omikuji{margin-top:18px;border-top:1px solid rgba(140,110,60,.4)}
.omikuji div{display:flex;gap:14px;align-items:baseline;
  padding:8px 0;border-bottom:1px dotted rgba(140,110,60,.4);font-size:.87rem}
.omikuji div:last-child{border-bottom:none}
.omikuji b{font-family:var(--display);font-weight:600;color:#6B4E22;
  letter-spacing:.14em;flex:0 0 auto;min-width:4.5em}
.tie{display:none;margin-top:14px;font-size:.79rem;color:#8A4A3E;
  background:rgba(198,48,47,.08);border-left:2px solid var(--zhu);
  padding:9px 12px;line-height:1.7}
.slip[data-tier="bad"] .tie{display:block}

/* ── 一覽 + FAQ ──────────────────────────────────────── */
main.reading{max-width:var(--read);margin:0 auto}
.scroll,.faq{margin:clamp(56px,11vw,104px) 0 0}
h2{font-family:var(--display);font-weight:600;font-size:1.35rem;
  letter-spacing:.14em;color:var(--text);display:flex;align-items:center;gap:12px}
h2::before{content:"";width:9px;height:9px;background:var(--zhu);flex:none;transform:rotate(45deg)}
.lede{margin-top:12px;font-size:.9rem;color:var(--text-dim);
  padding-bottom:18px;border-bottom:1px solid var(--rule)}
.list{list-style:none;margin-top:8px}
.list li{padding:18px 0 18px 18px;border-bottom:1px solid var(--rule);
  border-left:2px solid transparent;transition:border-color .2s ease,padding-left .2s ease}
.list li:hover{border-left-color:var(--zhu);padding-left:24px}
.list b{display:block;font-family:var(--display);font-weight:600;
  font-size:.8rem;letter-spacing:.18em;color:var(--accent)}
.list code{display:block;margin:8px 0;font-family:var(--mono);
  font-size:.8rem;color:var(--text);word-break:break-word}
.list span{font-size:.85rem;color:var(--text-dim)}
.faq dt{font-family:var(--display);font-weight:600;font-size:1.02rem;
  color:var(--text);margin-top:26px}
.faq dd{margin-top:6px;font-size:.9rem;color:var(--text-dim)}

/* ── footer ──────────────────────────────────────────── */
footer{max-width:var(--read);margin:clamp(60px,11vw,100px) auto 0;padding-bottom:52px;
  text-align:center;border-top:1px solid var(--rule);padding-top:30px}
.offering{font-size:.86rem;color:var(--text-dim)}
.offering a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--rule)}
.offering a:hover{border-color:var(--accent)}
.fineprint{margin-top:14px;font-size:.72rem;color:var(--text-faint);line-height:1.9}
.foot-links{margin-top:18px;font-family:var(--mono);font-size:.72rem;
  letter-spacing:.1em;color:var(--text-faint)}
.foot-links a{color:var(--accent-dim);text-decoration:none}
.foot-links a:hover{color:var(--accent)}

@media (max-width:999px){
  .grounds{min-height:0;padding-top:8px}
  .plaque{margin-top:-10px}
}
@media (max-width:480px){
  .topbar-right{gap:6px}
  .temple{max-width:340px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}