:root{
  --bg:#2a1410;
  --panel:#4a2218;
  --text:#fff7ed;
  --muted:#edc9a8;
  --gold:#fbbf24;
  --touch:72px;
  --wood:#3e2718;
  --wood-deep:#1c110c;
  --brass:#c9a227;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
body{
  min-height:100dvh;
  font-family:"PingFang TC","Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif;
  background:
    radial-gradient(ellipse at 50% 0%,#7a2e14 0%,transparent 52%),
    radial-gradient(ellipse at 80% 100%,#3f2a12 0%,transparent 46%),
    var(--bg);
  color:var(--text);
  padding:max(.5rem,env(safe-area-inset-top)) .7rem max(.5rem,env(safe-area-inset-bottom));
  user-select:none;
}
button{font:inherit;border:none;cursor:pointer;color:inherit;touch-action:manipulation}
button:active{transform:scale(.98)}
.app{max-width:560px;margin:0 auto;min-height:calc(100dvh - 1rem);display:flex;flex-direction:column}
.screen{display:flex;flex-direction:column;gap:.55rem;flex:1;min-height:0}
.hidden{display:none!important}
h1{text-align:center;font-size:clamp(1.05rem,3.8vw,1.38rem);color:#fcd34d;font-weight:900;letter-spacing:.04em}
.gentle{text-align:center;color:var(--muted);font-weight:700;line-height:1.45;font-size:.95rem}
.panel{
  background:rgba(74,34,24,.92);
  border-radius:16px;
  padding:.9rem;
  border:1px solid rgba(251,191,36,.35);
}
.label{color:var(--gold);font-weight:800;margin:.4rem 0 .3rem}
.chips{display:flex;flex-wrap:wrap;gap:.4rem}
.chip,.chips button{
  min-height:var(--touch);
  padding:.55rem .95rem;
  border-radius:16px;
  background:rgba(0,0,0,.34);
  border:3px solid rgba(237,201,168,.4);
  font-weight:900;
  font-size:1.05rem;
}
.chip.active,.chips button.active{
  border-color:var(--gold);
  background:rgba(251,191,36,.3);
  color:#fde68a;
  box-shadow:0 0 0 3px rgba(251,191,36,.35);
}
.cur{font-weight:800;margin:.35rem 0}.cur span{color:var(--gold)}
.daily{
  text-align:center;
  font-weight:800;
  color:#fde68a;
  background:rgba(0,0,0,.22);
  border-radius:12px;
  padding:.55rem .7rem;
  line-height:1.4;
  margin:.35rem 0 .5rem;
}
.btn-go{
  width:100%;
  min-height:76px;
  margin-top:.45rem;
  border-radius:16px;
  font-weight:900;
  font-size:1.25rem;
  background:linear-gradient(180deg,#fcd34d,#d97706);
  color:#451a03;
}
.btn-incense{
  width:100%;
  min-height:var(--touch);
  border-radius:16px;
  font-weight:900;
  font-size:1.12rem;
  background:linear-gradient(180deg,#b45309,#7c2d12);
  color:#fef3c7;
  border:2px solid #fbbf24;
  box-shadow:0 0 0 0 rgba(251,191,36,.0);
}
.btn-incense:not(.is-lit){
  animation:invite 2.4s ease-in-out infinite;
}
.btn-incense.is-lit{
  background:linear-gradient(180deg,#78350f,#451a03);
  color:#fde68a;
  animation:none;
}
@keyframes invite{
  0%,100%{box-shadow:0 0 0 0 rgba(251,191,36,0)}
  50%{box-shadow:0 0 0 5px rgba(251,191,36,.22)}
}
.dock{
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  gap:.4rem;
  padding-top:.2rem;
  padding-bottom:max(.15rem,env(safe-area-inset-bottom));
}
.dock .btn-go{margin-top:0}
.btn.hear{
  width:100%;
  min-height:76px;
  border-radius:16px;
  font-weight:900;
  font-size:1.2rem;
  background:rgba(251,191,36,.22);
  border:3px solid #fbbf24;
  color:#fde68a;
}
.btn{
  min-height:56px;
  border-radius:14px;
  font-weight:900;
  padding:0 .8rem;
  background:rgba(255,255,255,.14);
  flex:1;
  font-size:1.02rem;
}
.btn.ghost{background:rgba(0,0,0,.28)}
.bar{
  flex-shrink:0;
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
  justify-content:space-between;
  font-weight:800;
  background:rgba(74,34,24,.92);
  padding:.55rem .7rem;
  border-radius:14px;
}
.bar span{color:#fde68a}

/* ── 神龕 shrine ── */
.altar{
  position:relative;
  flex:1;
  min-height:0;
  border-radius:18px;
  border:1px solid rgba(251,191,36,.42);
  background:
    radial-gradient(ellipse at 50% 12%,rgba(251,191,36,.32) 0%,transparent 46%),
    radial-gradient(ellipse at 50% 100%,rgba(90,30,12,.4) 0%,transparent 48%),
    linear-gradient(180deg,#3a2414 0%,#1a100c 58%,#100a08 100%);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:.3rem;
  padding:.55rem .55rem .45rem;
  overflow:hidden;
  box-shadow:inset 0 0 70px rgba(0,0,0,.4);
}
.altar.shrine{
  background:
    radial-gradient(ellipse at 50% 10%,rgba(253,224,71,.28) 0%,transparent 42%),
    radial-gradient(ellipse at 18% 80%,rgba(127,29,29,.18) 0%,transparent 40%),
    linear-gradient(180deg,#3b2a16 0%,#1a120c 55%,#0e0a08 100%);
}
.altar::before,
.altar::after{
  content:"";
  pointer-events:none;
  position:absolute;
  inset:0;
  z-index:0;
  background-image:
    radial-gradient(circle at 18% 24%,rgba(253,224,71,.5) 0 1.2px,transparent 1.5px),
    radial-gradient(circle at 72% 16%,rgba(254,243,199,.4) 0 1px,transparent 1.3px),
    radial-gradient(circle at 42% 48%,rgba(251,191,36,.32) 0 1px,transparent 1.3px),
    radial-gradient(circle at 86% 40%,rgba(253,224,71,.38) 0 1.1px,transparent 1.4px),
    radial-gradient(circle at 10% 70%,rgba(254,243,199,.28) 0 .9px,transparent 1.2px),
    radial-gradient(circle at 58% 78%,rgba(251,191,36,.22) 0 1px,transparent 1.3px);
  animation:motes 10s linear infinite;
}
.altar::after{
  background-image:
    radial-gradient(circle at 32% 12%,rgba(253,224,71,.35) 0 1px,transparent 1.2px),
    radial-gradient(circle at 90% 28%,rgba(254,243,199,.3) 0 .8px,transparent 1.1px),
    radial-gradient(circle at 64% 58%,rgba(251,191,36,.28) 0 1.1px,transparent 1.4px),
    radial-gradient(circle at 22% 88%,rgba(253,224,71,.22) 0 .9px,transparent 1.2px);
  animation-duration:14s;
  animation-direction:reverse;
}
@keyframes motes{
  0%{transform:translateY(0);opacity:.75}
  100%{transform:translateY(-26px);opacity:.35}
}
.floor-tag{
  position:absolute;
  top:.45rem;
  left:.55rem;
  z-index:3;
  font-weight:900;
  color:#fbbf24;
  background:rgba(0,0,0,.4);
  border-radius:999px;
  padding:.15rem .55rem;
  font-size:.85rem;
}
.shenkan{
  position:relative;
  z-index:1;
  width:min(94%,328px);
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  filter:drop-shadow(0 10px 14px rgba(0,0,0,.45));
}
.roof{
  width:106%;
  height:24px;
  position:relative;
  z-index:2;
  background:linear-gradient(180deg,#e8c547 0%,#b45309 40%,#7c4a12 100%);
  border-radius:50% 50% 0 0 / 100% 100% 0 0;
  box-shadow:0 2px 0 #fde68a, inset 0 2px 0 rgba(255,255,255,.28);
}
.roof .ridge{
  position:absolute;
  left:50%;
  top:-7px;
  width:14px;
  height:14px;
  transform:translateX(-50%) rotate(45deg);
  background:linear-gradient(135deg,#fef3c7,#d97706);
  border-radius:2px;
  box-shadow:0 0 8px rgba(251,191,36,.55);
}
.roof::after{
  content:"";
  position:absolute;
  left:-3%;
  right:-3%;
  bottom:0;
  height:5px;
  background:linear-gradient(180deg,#fbbf24,#92400e);
  border-radius:2px;
}
.cabinet{
  width:100%;
  background:
    repeating-linear-gradient(90deg,rgba(0,0,0,.12) 0 2px,transparent 2px 11px),
    linear-gradient(90deg,#2a1810 0%,#5a3820 14%,#3e2718 50%,#5a3820 86%,#2a1810 100%);
  border:3px solid var(--brass);
  border-top:none;
  border-radius:0 0 3px 3px;
  padding:7px 9px 5px;
  box-shadow:inset 0 0 0 2px #7a5418;
}
.niche{
  background:
    radial-gradient(ellipse at 50% 0%,rgba(253,224,71,.3),transparent 64%),
    linear-gradient(180deg,#2a1c10,#100c08);
  border:2px solid #8a6a28;
  border-radius:6px;
  padding:.42rem .4rem;
  display:flex;
  justify-content:center;
}
.tablet{
  min-width:min(88%,260px);
  text-align:center;
  font-weight:900;
  font-size:clamp(1.22rem,5vw,1.7rem);
  letter-spacing:.18em;
  color:#fef3c7;
  border:3px solid #fde68a;
  border-radius:6px;
  padding:.42rem .55rem;
  background:linear-gradient(180deg,#6b3a16,#3f220e);
  box-shadow:0 6px 14px rgba(0,0,0,.4), inset 0 1px 0 rgba(253,224,71,.35);
}
.altar-table{
  width:108%;
  display:flex;
  flex-direction:column;
  align-items:center;
  margin-top:-1px;
}
.table-top{
  width:100%;
  background:
    repeating-linear-gradient(90deg,rgba(0,0,0,.08) 0 3px,transparent 3px 14px),
    linear-gradient(180deg,#9a6a38,#6b4220 55%,#4a2c14);
  border-radius:4px 4px 0 0;
  padding:7px 10px 6px;
  border-top:3px solid #e8c547;
  box-shadow:0 3px 0 #3a1e0c;
}
.apron{
  width:100%;
  height:14px;
  background:
    linear-gradient(180deg,#b91c1c,#7f1d1d 60%,#5c1010);
  border:2px solid #d4a017;
  border-top:none;
  border-radius:0 0 6px 6px;
  box-shadow:inset 0 1px 0 rgba(253,224,71,.35);
}
.offerings{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:.3rem;
  pointer-events:none;
}
.fruit{
  font-size:1.55rem;
  letter-spacing:-.12em;
  line-height:1;
  padding:0 2px 3px;
  pointer-events:none;
  filter:drop-shadow(0 2px 1px rgba(0,0,0,.4));
}
.tea{
  display:flex;
  gap:7px;
  pointer-events:none;
  padding:0 2px 4px;
}
.cup{
  width:20px;
  height:16px;
  border-radius:2px 2px 9px 9px;
  background:linear-gradient(180deg,#fde68a,#b45309);
  border:2px solid #fbbf24;
  position:relative;
  box-shadow:0 2px 0 #3a1e0c;
}
.cup::before{
  content:"";
  position:absolute;
  top:2px;left:2px;right:2px;
  height:4px;
  background:#7c2d12;
  border-radius:50%;
}

/* 香爐 */
.censer{
  pointer-events:auto;
  min-width:72px;
  min-height:64px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  background:transparent;
  padding:0;
  border-radius:12px;
  flex:0 0 auto;
}
.altar:not(.lit):not(.planting) .censer{
  animation:invite 2.4s ease-in-out infinite;
}
.censer:focus-visible{
  outline:3px solid #fde68a;
  outline-offset:2px;
}
.incense{
  position:relative;
  height:34px;
  width:44px;
  display:flex;
  justify-content:center;
  align-items:flex-end;
  gap:8px;
  margin-bottom:-10px;
  z-index:2;
  pointer-events:none;
}
.incense .stick{
  width:3px;
  height:26px;
  background:linear-gradient(#d6d3d1,#57534e);
  border-radius:2px 2px 0 0;
  position:relative;
  opacity:.4;
  transform:translateY(8px);
  transform-origin:50% 100%;
}
.altar.planting .stick,
.altar.lit .stick{
  opacity:1;
  transform:translateY(0);
}
.altar.planting .stick{
  animation:plant .42s ease-out both;
}
.altar.planting .stick:nth-child(2){animation-delay:.07s}
.altar.planting .stick:nth-child(3){animation-delay:.14s}
@keyframes plant{
  0%{transform:translateY(-22px);opacity:.15}
  72%{transform:translateY(2px);opacity:1}
  100%{transform:translateY(0);opacity:1}
}
.ember{
  position:absolute;
  top:-3px;
  left:50%;
  width:6px;
  height:6px;
  margin-left:-3px;
  border-radius:50%;
  background:#fb923c;
  box-shadow:0 0 6px 2px #f97316,0 0 12px 4px rgba(249,115,22,.55);
  opacity:0;
}
.altar.planting .ember{opacity:.45}
.altar.lit .ember{
  opacity:1;
  animation:glow 1.35s ease-in-out infinite;
}
.altar.lit .stick:nth-child(2) .ember{animation-delay:.25s}
.altar.lit .stick:nth-child(3) .ember{animation-delay:.5s}
@keyframes glow{
  0%,100%{transform:scale(1);opacity:.85}
  50%{transform:scale(1.25);opacity:1}
}
.smoke{
  position:absolute;
  bottom:26px;
  width:18px;
  height:72px;
  border-radius:20px;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.52));
  filter:blur(6px);
  opacity:0;
  pointer-events:none;
}
.smoke.s1{left:2px}
.smoke.s2{left:15px}
.smoke.s3{left:28px}
.altar.lit .smoke{
  animation:rise 3.4s ease-in-out infinite;
}
.altar.lit .smoke.s1{animation-delay:0s}
.altar.lit .smoke.s2{animation-delay:.85s}
.altar.lit .smoke.s3{animation-delay:1.6s}
@keyframes rise{
  0%{opacity:0;transform:translateY(8px) scaleX(.45) scaleY(.55)}
  22%{opacity:.62;transform:translateY(-14px) scaleX(.95) scaleY(1.05)}
  70%{opacity:.22;transform:translateY(-56px) scaleX(1.3) scaleY(1.45)}
  100%{opacity:0;transform:translateY(-78px) scaleX(.9) scaleY(1.2)}
}
.bowl{
  width:62px;
  height:26px;
  position:relative;
  z-index:1;
  background:linear-gradient(180deg,#e8c9a0,#b8860b 38%,#6b4e14 78%,#3f2e0c);
  border-radius:50% 50% 44% 44% / 58% 58% 78% 78%;
  border:2px solid #fde68a;
  box-shadow:inset 0 4px 6px rgba(0,0,0,.35),0 3px 0 #3a2a08;
}
.sand{
  position:absolute;
  left:7px;right:7px;top:4px;
  height:10px;
  background:radial-gradient(ellipse,#2a2218,#16110c);
  border-radius:50%;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.6);
}
.altar.lit .bowl{
  box-shadow:inset 0 4px 6px rgba(0,0,0,.35),0 3px 0 #3a2a08,0 0 16px rgba(251,146,60,.45);
}

.poe-stage{
  position:relative;
  z-index:1;
  width:min(92%,380px);
  height:168px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-end;
  margin-top:auto;
  flex-shrink:0;
  background:radial-gradient(ellipse at 50% 100%,rgba(0,0,0,.38),transparent 72%);
}
.poe-row{
  position:relative;
  z-index:1;
  display:flex;
  gap:1.15rem;
  align-items:flex-end;
  justify-content:center;
  min-height:128px;
  width:100%;
}
.poe{
  width:132px;
  height:150px;
  position:relative;
  transform-origin:50% 70%;
  filter:drop-shadow(0 10px 8px rgba(0,0,0,.5));
}
.poe img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  display:none;
  pointer-events:none;
}
.poe.yang .face-flat{display:block}
.poe.yin .face-round{display:block}
.poe.toss{animation:toss 1.05s cubic-bezier(.2,.7,.25,1) both}
.poe.toss.delay{animation-delay:.08s}
.poe.toss .face-round{display:block}
.poe.toss .face-flat{display:none}
.li-pair{
  position:relative;
  z-index:1;
  width:min(92%,340px);
  height:auto;
  max-height:150px;
  object-fit:contain;
  filter:drop-shadow(0 10px 8px rgba(0,0,0,.5));
  margin-bottom:4px;
}
.poe-stage.li-mode .poe-row{display:none}
.poe-stage.li-mode .li-pair{display:block}
@keyframes toss{
  0%{transform:translateY(0) rotate(0deg) scale(1)}
  16%{transform:translateY(-128px) rotate(-210deg) scale(1.06)}
  48%{transform:translateY(-36px) rotate(200deg) scale(1)}
  70%{transform:translateY(16px) rotate(340deg) scale(.94)}
  84%{transform:translateY(-10px) rotate(355deg) scale(1.03)}
  100%{transform:translateY(0) rotate(360deg) scale(1)}
}
.status{
  position:relative;
  z-index:1;
  text-align:center;
  font-weight:900;
  font-size:clamp(1.05rem,3.8vw,1.28rem);
  color:#fde68a;
  min-height:2.6em;
  line-height:1.4;
  padding:0 .4rem;
  flex-shrink:0;
}
.result{
  flex:1;
  min-height:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  background:rgba(74,34,24,.92);
  border:1px solid rgba(251,191,36,.4);
  border-radius:16px;
  padding:.7rem .8rem .8rem;
}
.rkind{
  text-align:center;
  color:#fde68a;
  font-weight:900;
  letter-spacing:.28em;
  font-size:clamp(1.45rem,6vw,1.95rem);
  margin-bottom:.55rem;
  border:3px solid #fbbf24;
  border-radius:14px;
  padding:.45rem .55rem;
  background:linear-gradient(180deg,rgba(251,191,36,.22),rgba(0,0,0,.25));
  text-shadow:0 2px 0 #7c2d12;
  box-shadow:0 0 18px rgba(251,191,36,.28);
}
.rkind[data-kind="yin"]{
  color:#e7e5e4;
  border-color:#a8a29e;
  background:linear-gradient(180deg,rgba(168,162,158,.18),rgba(0,0,0,.28));
  box-shadow:none;
  text-shadow:none;
}
.rkind[data-kind="xiao"]{
  color:#fed7aa;
  border-color:#fdba74;
  background:linear-gradient(180deg,rgba(253,186,116,.2),rgba(0,0,0,.25));
  box-shadow:0 0 14px rgba(253,186,116,.22);
}
.rkind[data-kind="li"]{
  border-width:4px;
  box-shadow:0 0 24px rgba(251,191,36,.5);
}
.bmsg{
  text-align:center;
  font-weight:800;
  font-size:clamp(1.02rem,3.5vw,1.18rem);
  line-height:1.55;
  color:#fff7ed;
}
.screen.has-result .altar{
  flex:0 1 auto;
  justify-content:flex-start;
  gap:.2rem;
  padding:.35rem .5rem .35rem;
}
.screen.has-result .roof{height:14px}
.screen.has-result .roof .ridge{width:10px;height:10px;top:-5px}
.screen.has-result .cabinet{padding:4px 6px 3px}
.screen.has-result .niche{padding:.22rem .3rem}
.screen.has-result .tablet{
  font-size:clamp(1.02rem,3.8vw,1.22rem);
  padding:.22rem .4rem;
  letter-spacing:.12em;
  border-width:2px;
}
.screen.has-result .table-top{padding:4px 8px 4px}
.screen.has-result .apron{height:8px}
.screen.has-result .fruit{font-size:1.05rem}
.screen.has-result .incense{height:22px}
.screen.has-result .incense .stick{height:16px}
.screen.has-result .smoke{height:28px;bottom:16px}
.screen.has-result .censer{min-height:64px}
.screen.has-result .bowl{width:52px;height:20px}
.screen.has-result .poe-stage{height:118px;margin-top:.15rem}
.screen.has-result .poe{width:96px;height:112px}
.screen.has-result .status{display:none}
.row{display:flex;gap:.4rem;flex-shrink:0}
html.elder-mode .btn-go,html.elder-mode .btn.hear,html.elder-mode .btn-incense{min-height:80px;font-size:1.28rem}
html.elder-mode .chip,html.elder-mode .chips button,html.elder-mode .btn{min-height:70px}
html.elder-mode .btn.hear{min-height:80px}
html.elder-mode .fruit{font-size:1.75rem}
html.elder-mode .tablet{font-size:clamp(1.4rem,5.6vw,1.9rem)}
html.elder-mode .status{font-size:clamp(1.22rem,4.5vw,1.5rem)}
html.elder-mode .bmsg{font-size:clamp(1.08rem,3.8vw,1.24rem)}
html.elder-mode .rkind{font-size:clamp(1.22rem,4.2vw,1.4rem)}
@media (max-height:700px){
  .roof{height:16px}
  .roof .ridge{width:10px;height:10px;top:-5px}
  .cabinet{padding:5px 7px 4px}
  .niche{padding:.28rem .3rem}
  .tablet{padding:.3rem .45rem;font-size:clamp(1.08rem,4.2vw,1.35rem);letter-spacing:.12em}
  .table-top{padding:5px 8px 4px}
  .apron{height:10px}
  .fruit{font-size:1.1rem}
  .incense{height:26px}
  .incense .stick{height:20px}
  .smoke{height:36px}
  .poe{width:110px;height:128px}
  .poe-stage{height:140px}
  .screen.has-result .roof{height:12px}
  .screen.has-result .tablet{font-size:clamp(.95rem,3.4vw,1.1rem);padding:.16rem .32rem}
  .screen.has-result .poe-stage{height:108px}
  .screen.has-result .poe{width:90px;height:104px}
  .screen.has-result .incense{height:18px}
}