:root{
  --fk:"LXGW WenKai","STKaiti","KaiTi","Songti SC",serif;   /* 中文标题/牌匾：霞鹜文楷 */
  --fs:"Inter",-apple-system,"PingFang SC","Noto Sans SC","Microsoft YaHei",sans-serif;
  --table-off:-13%; /* 供桌下沉，腿砍掉 */
  --tline:calc(var(--table-h) * (1 - var(--table-top)) + var(--table-off)); /* 桌面线 */
  --dbot:calc(var(--tline) + 17%); /* 神像底部 */
  --dh:52%;  /* 神像高度 */
  --gold:#e8c877;--gold2:#b8902e;--red:#c8362b;--bg:#070405;--ink:#f3e6c8;--dim:#9c8a68;
  --bar:92px;--top:52px;
  --table-h:34%;        /* 供桌图高度占场景比例 */
  --table-top:.30;      /* 桌面线在供桌图里的位置（从上往下比例） */
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:#050303 radial-gradient(ellipse 60% 70% at 50% 45%,#1c0e07 0%,#0a0504 55%,#050303 100%) fixed;color:var(--ink);font-family:var(--fs);overscroll-behavior:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
#app{position:relative;margin:0 auto;max-width:460px;height:100dvh;background:var(--bg);box-shadow:0 0 80px rgba(0,0,0,.8),0 0 0 1px rgba(232,200,119,.08);overflow:hidden;display:flex;flex-direction:column;user-select:none;-webkit-user-select:none}
.serif{font-family:var(--fk)}

/* 顶栏 */
#top{height:var(--top);padding:env(safe-area-inset-top) 14px 0;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:5}
.merit{display:flex;align-items:baseline;gap:6px;padding:5px 12px;border-radius:20px;background:rgba(232,200,119,.08);border:1px solid rgba(232,200,119,.25)}
.merit .mi{font-size:12px;color:var(--dim)}
.merit b{font-size:16px;color:var(--gold);font-variant-numeric:tabular-nums}
.merit.pop b{animation:pop .25s}
@keyframes pop{50%{transform:scale(1.3)}}
.dname{position:absolute;left:50%;transform:translateX(-50%);font-family:var(--fk);font-size:18px;letter-spacing:4px;color:var(--gold);text-shadow:0 0 12px rgba(232,200,119,.4)}
.gear{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.06);display:grid;place-items:center}
.gear svg{width:20px;height:20px;fill:#d9c9a3}

/* 场景 */
#scene{position:relative;flex:1;overflow:hidden;background:#070405}
.hall{position:absolute;inset:0;background:url(img/hall.webp) center 30%/cover no-repeat;opacity:.5;mask-image:linear-gradient(#000 55%,rgba(0,0,0,.5) 80%,transparent 100%);-webkit-mask-image:linear-gradient(#000 55%,rgba(0,0,0,.5) 80%,transparent 100%)}
.vig{position:absolute;inset:0;background:radial-gradient(ellipse 62% 52% at 50% 45%,rgba(60,30,10,.15) 0%,rgba(10,5,3,.45) 55%,rgba(3,2,1,.92) 100%)}
.ghost{position:absolute;left:50%;bottom:calc(var(--dbot) - 14%);height:78%;width:160%;transform:translateX(-50%);transform-origin:50% 100%;background:center bottom/auto 100% no-repeat;opacity:.5;filter:blur(1.2px) sepia(1) saturate(1.5) brightness(1.15) contrast(1.05);pointer-events:none;mask-image:linear-gradient(to top,transparent 18%,rgba(0,0,0,.7) 40%,#000 60%);-webkit-mask-image:linear-gradient(to top,transparent 18%,rgba(0,0,0,.7) 40%,#000 60%);animation:ghost 9s ease-in-out infinite alternate}
@keyframes ghost{to{opacity:.62;transform:translateX(-50%) scale(1.02)}}
.rays{position:absolute;left:50%;top:28%;width:140vmin;height:140vmin;max-width:900px;max-height:900px;transform:translate(-50%,-50%);background:repeating-conic-gradient(from 0deg,rgba(232,200,119,.05) 0 3deg,transparent 3deg 11deg);mask-image:radial-gradient(circle,#000 0,transparent 55%);-webkit-mask-image:radial-gradient(circle,#000 0,transparent 55%);animation:spin 90s linear infinite;pointer-events:none}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.halo{position:absolute;left:50%;bottom:calc(var(--dbot) + 2%);height:46%;aspect-ratio:1;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle,rgba(255,214,130,.34) 0,rgba(232,170,60,.16) 32%,rgba(180,110,30,.05) 58%,transparent 72%);animation:breath 5.5s ease-in-out infinite;pointer-events:none}
.halo::after{content:"";position:absolute;inset:18%;border-radius:50%;border:1px solid rgba(255,225,160,.18);box-shadow:0 0 30px rgba(255,210,120,.18),inset 0 0 40px rgba(255,210,120,.12)}
@keyframes breath{0%,100%{opacity:.75;transform:translateX(-50%) scale(1)}50%{opacity:1;transform:translateX(-50%) scale(1.06)}}
.bl{position:absolute;left:50%;bottom:calc(var(--dbot) - 5%);height:62%;max-height:460px;aspect-ratio:1;transform:translateX(-50%);mix-blend-mode:screen;opacity:.8;animation:blspin 120s linear infinite,blbreath 7s ease-in-out infinite;pointer-events:none;filter:saturate(1.05) brightness(1.05)}
@keyframes blspin{to{transform:translateX(-50%) rotate(360deg)}}
@keyframes blbreath{50%{opacity:1}}
.rays2{position:absolute;left:50%;bottom:calc(var(--dbot) - 22%);height:96%;aspect-ratio:1;transform:translateX(-50%);mix-blend-mode:screen;opacity:.42;filter:blur(3px) saturate(1.1);animation:r2 9s ease-in-out infinite alternate;pointer-events:none;mask-image:radial-gradient(circle,#000 30%,transparent 72%);-webkit-mask-image:radial-gradient(circle,#000 30%,transparent 72%)}
@keyframes r2{to{opacity:.6;transform:translateX(-50%) scale(1.04)}}
.beam{position:absolute;left:50%;top:-10%;width:160%;height:95%;transform:translateX(-50%);background:conic-gradient(from 165deg at 50% 0%,rgba(255,220,150,0) 0deg,rgba(255,220,150,.10) 8deg,rgba(255,230,170,.18) 15deg,rgba(255,220,150,.10) 22deg,rgba(255,220,150,0) 30deg);mix-blend-mode:screen;mask-image:linear-gradient(#000 30%,transparent 95%);-webkit-mask-image:linear-gradient(#000 30%,transparent 95%);animation:beam 7s ease-in-out infinite alternate;pointer-events:none;filter:blur(6px)}
@keyframes beam{to{opacity:.55;transform:translateX(-50%) scaleX(1.08)}}
.deity{position:absolute;left:50%;bottom:var(--dbot);transform:translateX(-50%);height:var(--dh);max-width:92%;object-fit:contain;filter:drop-shadow(0 0 22px rgba(255,200,110,.38)) drop-shadow(0 18px 20px rgba(0,0,0,.6));animation:dglow 5.5s ease-in-out infinite;transition:opacity .4s}
@keyframes dglow{50%{filter:drop-shadow(0 0 34px rgba(255,210,120,.55)) drop-shadow(0 18px 20px rgba(0,0,0,.6)) brightness(1.06)}}
.deity.swap{animation:swap .6s}
@keyframes swap{0%{opacity:0;transform:translateX(-50%) scale(.92)}100%{opacity:1;transform:translateX(-50%) scale(1)}}

/* 供桌与供品 */
.altar{position:absolute;left:0;right:0;bottom:var(--table-off);height:var(--table-h)}
.table{position:absolute;left:50%;bottom:0;width:112%;height:100%;transform:translateX(-50%);object-fit:fill;filter:drop-shadow(0 -4px 20px rgba(0,0,0,.6))}
.tlight{position:absolute;left:0;right:0;top:0;height:100%;pointer-events:none;background:radial-gradient(ellipse 22% 30% at 31% 62%,rgba(255,160,70,.28),rgba(255,140,50,0) 70%),radial-gradient(ellipse 22% 30% at 69% 62%,rgba(255,160,70,.28),rgba(255,140,50,0) 70%),radial-gradient(ellipse 40% 24% at 50% 66%,rgba(255,170,80,.14),rgba(255,140,50,0) 70%);mix-blend-mode:soft-light;animation:tl 2.8s ease-in-out infinite alternate;opacity:.9}
.tlight.off{opacity:0}
@keyframes tl{to{opacity:.7}}
/* 桌面在供桌图的 10%–30%（从上往下）：后排红烛+香炉落在 ~18%，前排供品落在 ~29%，形成前后错位 */
.altar > div{position:absolute;bottom:71%}
.altar > .candle,.altar > .burner{bottom:80%}
.slot{display:flex;align-items:flex-end;justify-content:center}
.altar > .slot.outer{bottom:77%;width:16%;height:52%}.slot.outer.left{left:.5%}.slot.outer.right{right:.5%}
.altar > .slot.inner{bottom:70%;width:18%;height:34%}.slot.inner.left{left:13%}.slot.inner.right{right:13%}
.altar > .slot.center{bottom:68.5%;left:50%;transform:translateX(-50%);width:17%;height:15%}
.slot img{max-width:100%;max-height:100%;filter:drop-shadow(0 6px 6px rgba(0,0,0,.55));display:none;position:relative;z-index:1}
.slot::before,.candle::before,.burner::before{content:"";position:absolute;left:50%;bottom:-4%;width:90%;height:14%;transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse,rgba(0,0,0,.7) 0,rgba(0,0,0,.35) 45%,rgba(0,0,0,0) 72%);filter:blur(2px)}
.candle::before{width:160%;height:6%}
.slot img[src]{display:block}
.slot.empty::before{display:none}
.slot.empty::after{content:"＋";font-size:14px!important;position:absolute;bottom:30%;font-size:11px;color:rgba(232,200,119,.35);border:1px dashed rgba(232,200,119,.3);border-radius:6px;padding:4px 7px}
.candle{width:6%;height:62%;display:flex;justify-content:center;align-items:flex-end}
.candle.left{left:32.5%}.candle.right{right:32.5%}
.candle img{height:100%;filter:drop-shadow(0 6px 6px rgba(0,0,0,.6))}
.candle .flame{position:absolute;left:50%;top:1.5%;width:0;height:0;pointer-events:none}
.candle .flame .fl,.candle .flame .glow{opacity:0;transition:opacity .7s ease}
.candle .flame .fl{--fw:60px;position:absolute;left:50%;bottom:-6px;width:var(--fw);height:calc(var(--fw)*.98);transform:translateX(-50%);background:url(img/flame-sprite.png) 0 0/calc(var(--fw)*48) 100% no-repeat;animation:fspr 3.2s steps(48) infinite;-webkit-mask-image:linear-gradient(to top,rgba(0,0,0,0) 0,#000 30%);mask-image:linear-gradient(to top,rgba(0,0,0,0) 0,#000 30%);filter:saturate(1.1) brightness(1.05);z-index:3}
.candle .flame .glow{position:absolute;left:50%;top:-26px;width:150px;height:150px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(255,180,80,.30) 0,rgba(255,140,40,.10) 38%,rgba(255,120,30,0) 70%);animation:glowp 2.4s ease-in-out infinite alternate;z-index:1}
.candle.lit .flame .fl,.candle.lit .flame .glow{opacity:1}
@keyframes glowp{to{transform:translate(-50%,-50%) scale(1.06);opacity:.85}}
.burner{left:50%;transform:translateX(-50%);width:22%;height:44%;display:flex;justify-content:center;align-items:flex-end}
.burner img{max-height:100%;max-width:100%;filter:drop-shadow(0 10px 10px rgba(0,0,0,.7));position:relative;z-index:2}
.sticks{position:absolute;left:-30%;right:-30%;bottom:55%;height:260px;overflow:hidden;display:flex;justify-content:center;align-items:flex-end;gap:7px;z-index:3;pointer-events:none}
.sticks::after{content:"";position:absolute;left:50%;bottom:-3px;width:26%;height:7px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse,rgba(40,30,25,.55),rgba(40,30,25,0) 70%);filter:blur(1px)}
.stick{position:relative;width:var(--w,5px);height:var(--h,120px);margin-bottom:calc(var(--full,160px) * -0.22);transform:rotate(var(--r,0deg));transform-origin:50% 100%;transition:height .8s linear;background:url(img/cut/stick.webp) center bottom/100% var(--full,160px) no-repeat;filter:drop-shadow(1px 1px 1px rgba(0,0,0,.5))}
.stick::after{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(#d8d2c8,#9a928a);border-radius:2px 2px 0 0;opacity:.95}
.stick::before{content:"";position:absolute;left:-1px;top:-2px;width:7px;height:7px;border-radius:50%;background:radial-gradient(circle at 50% 60%,#fff1c4 0,#ffb347 35%,#ff6a1a 60%,rgba(255,80,0,0) 80%);box-shadow:0 0 6px 2px rgba(255,130,40,.55),0 0 14px 4px rgba(255,100,20,.2);animation:ember 2.2s ease-in-out infinite alternate;z-index:1}
.stick.out::before{display:none}
.stick.ash{height:calc(var(--full,160px) * 0.22 + 12px)!important;background:linear-gradient(90deg,#5a554f,#8c857c 50%,#555049);border-radius:2px 2px 0 0}
.stick.ash::after{display:none}
@keyframes ember{0%{opacity:1;transform:scale(1)}40%{opacity:.8;transform:scale(.92)}100%{opacity:.6;transform:scale(.85)}}
#smoke{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:4}

.timer{position:absolute;right:12px;bottom:16px;z-index:5;font-size:12px;color:var(--dim);background:rgba(0,0,0,.45);border:1px solid rgba(232,200,119,.2);padding:5px 10px;border-radius:14px;font-variant-numeric:tabular-nums}
.timer b{color:var(--gold);font-weight:600}
.fish{position:absolute;left:12px;bottom:10px;z-index:5;width:56px;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;color:var(--dim)}
.fish img{width:46px;height:46px;object-fit:contain;filter:drop-shadow(0 4px 6px rgba(0,0,0,.6))}
.fish:active img{transform:scale(.9)}
.fish.hit img{animation:fhit .18s ease-out}
@keyframes fhit{40%{transform:scale(.88) rotate(-4deg)}}
.autof{position:absolute;left:72px;bottom:24px;z-index:5;display:flex;align-items:center;gap:6px;font-size:11px;color:var(--dim);cursor:pointer;user-select:none}
.autof .sw{width:38px;height:22px;border-radius:11px}
.autof .sw::after{width:16px;height:16px}
.autof .sw.on::after{left:19px}
.autof.on span{color:var(--gold)}
.fish.auto img{filter:drop-shadow(0 0 10px rgba(255,200,110,.55)) drop-shadow(0 4px 6px rgba(0,0,0,.6))}
#floats{position:absolute;inset:0;pointer-events:none;z-index:9}
.float{position:absolute;transform:translate(-50%,-50%);color:var(--gold);font-size:15px;font-weight:600;text-shadow:0 0 8px rgba(0,0,0,.8);animation:rise 1.2s ease-out forwards;white-space:nowrap}
.float.big{font-size:19px;color:#ffd98a}
@keyframes rise{to{transform:translate(-50%,-150%) translateY(-60px);opacity:0}}
.lintel{position:absolute;left:-2%;top:-2%;width:104%;z-index:6;pointer-events:none;filter:drop-shadow(0 6px 10px rgba(0,0,0,.7))}
.wishcard{position:absolute;left:0;top:0;width:23%;max-width:110px;z-index:5;transform-origin:50% 0;animation:sway 7s ease-in-out infinite alternate,drop 1.4s cubic-bezier(.3,.9,.3,1.1);filter:drop-shadow(0 10px 14px rgba(0,0,0,.6));cursor:pointer}
.wishcard img{width:100%;display:block}
.wtxt{position:absolute;left:5%;right:5%;top:19%;height:46%;color:#f6e3b4;font-family:var(--fk);text-shadow:0 1px 1px rgba(0,0,0,.6),0 0 6px rgba(255,220,150,.25)}
.wtxt .wmain{position:absolute;left:16%;right:16%;top:9%;bottom:9%;overflow:hidden}
.wtxt .wmain span{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;font-size:11.5px;line-height:1.3;font-weight:700}
.vcols{position:absolute;inset:0;display:flex;flex-direction:row-reverse;justify-content:center;align-items:center;gap:.25em;font-weight:700;line-height:1.12}
.vc{display:flex;flex-direction:column;align-items:center}
.vc i{font-style:normal;display:block;height:1.12em;width:1.05em;text-align:center}
.vc i.pu{transform:translate(.32em,-.38em)}
.wtxt .wcat{position:absolute;right:7%;top:22%;writing-mode:vertical-rl;font-size:7.5px;letter-spacing:2px;color:#e8c877;opacity:.9;white-space:nowrap}
.wtxt .wname{position:absolute;left:7%;bottom:22%;writing-mode:vertical-rl;font-size:7px;letter-spacing:1px;color:#e8c877;opacity:.85;white-space:nowrap}
@keyframes sway{0%{transform:rotate(-1.6deg)}100%{transform:rotate(1.6deg)}}
@keyframes drop{0%{transform:translateY(-40px) rotate(-4deg);opacity:0}60%{opacity:1}}

/* 底栏 */
#bar{height:calc(var(--bar) + env(safe-area-inset-bottom));padding:8px 6px env(safe-area-inset-bottom);display:flex;justify-content:space-around;align-items:flex-start;background:linear-gradient(#0a0607,#000);border-top:1px solid rgba(232,200,119,.12);z-index:5}
#bar button{display:flex;flex-direction:column;align-items:center;gap:6px;width:64px;font-size:12px;color:#cdbb95;letter-spacing:1px}
#bar .ic{width:48px;height:48px;border-radius:50%;background:radial-gradient(circle at 50% 35%,#3a2a12,#1a1108 70%);border:1px solid rgba(232,200,119,.35);box-shadow:inset 0 0 12px rgba(232,200,119,.12),0 4px 10px rgba(0,0,0,.6);display:grid;place-items:center;position:relative}
#bar .main .ic{width:54px;height:54px;border-color:var(--gold);box-shadow:0 0 16px rgba(232,200,119,.35),inset 0 0 14px rgba(232,200,119,.2)}
#bar button:active .ic{transform:scale(.93)}
.ic img{width:34px;height:34px;object-fit:contain;filter:drop-shadow(0 3px 4px rgba(0,0,0,.6))}
#bar .main .ic img{width:38px;height:38px}
.ic .fu{width:30px;height:30px;transform:rotate(45deg);background:linear-gradient(135deg,#c8362b,#8c1c15);border:1px solid var(--gold);display:grid;place-items:center;box-shadow:0 3px 6px rgba(0,0,0,.6)}
.ic .fu b{transform:rotate(-45deg);font-family:var(--fk);font-size:19px;color:var(--gold);font-weight:700}
.ic .inc3{position:relative;width:30px;height:34px}
.ic .inc3 i{position:absolute;bottom:0;left:50%;width:3px;height:30px;margin-left:-1.5px;background:url(img/cut/stick.webp) center bottom/100% 36px no-repeat;transform-origin:50% 100%;border-radius:1px}
.ic .inc3 i:nth-child(1){transform:rotate(-9deg)}.ic .inc3 i:nth-child(3){transform:rotate(9deg)}
.ic .inc3 i::before{content:"";position:absolute;left:-1.5px;top:-2px;width:6px;height:6px;border-radius:50%;background:radial-gradient(#fff1c4,#ff8a2a 55%,rgba(255,80,0,0) 80%);box-shadow:0 0 5px 1px rgba(255,130,40,.6)}
#bar button.on .ic{border-color:var(--gold);background:radial-gradient(circle at 50% 35%,#5a4218,#2a1c0a 70%)}

/* 面板 */
#mask{position:absolute;inset:0;background:rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .25s;z-index:20}
#mask.on{opacity:1;pointer-events:auto}
.sheet{position:absolute;left:0;right:0;bottom:0;max-height:78%;background:linear-gradient(#1a1009,#0c0706);border-radius:18px 18px 0 0;border-top:1px solid rgba(232,200,119,.3);transform:translateY(105%);transition:transform .3s cubic-bezier(.2,.8,.2,1);z-index:21;display:flex;flex-direction:column}
.sheet.on{transform:none}
.grip{width:40px;height:4px;border-radius:2px;background:rgba(232,200,119,.35);margin:10px auto 4px;flex:none}
.sheet-body{overflow-y:auto;padding:6px 16px calc(18px + env(safe-area-inset-bottom));-webkit-overflow-scrolling:touch}
.sheet h3{margin:6px 0 4px;font-family:var(--fk);font-size:19px;letter-spacing:3px;color:var(--gold);text-align:center;font-weight:400}
.sheet .sub{margin:0 0 14px;text-align:center;font-size:12px;color:var(--dim);line-height:1.6}
.sheet h5{margin:16px 0 8px;font-size:13px;color:#d9c9a3;font-weight:600;letter-spacing:1px}
.sheet h5 small{font-weight:400;color:var(--dim);margin-left:6px}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.grid.c3{grid-template-columns:repeat(3,1fr)}
.card{border:1px solid rgba(232,200,119,.18);border-radius:12px;background:rgba(255,255,255,.03);padding:8px 6px 8px;text-align:center;position:relative;transition:border-color .2s}
.card img{width:100%;aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 4px 6px rgba(0,0,0,.6))}
.card b{display:block;font-size:13px;color:var(--ink);font-weight:600;margin-top:4px;font-family:var(--fk);letter-spacing:1px}
.card small{display:block;font-size:10px;color:var(--dim);margin-top:2px;line-height:1.3}
.card.on{border-color:var(--gold);background:rgba(232,200,119,.1);box-shadow:0 0 0 1px var(--gold) inset}
.card.on::after{content:"✓";position:absolute;right:6px;top:4px;font-size:12px;color:var(--gold)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:7px 12px;border-radius:20px;border:1px solid rgba(232,200,119,.25);font-size:13px;color:#d9c9a3;background:rgba(255,255,255,.03)}
.chip small{color:var(--dim);font-size:11px;margin-left:4px}
.chip.on{border-color:var(--gold);color:var(--gold);background:rgba(232,200,119,.12)}
.opt{display:flex;gap:8px}
.opt .o{flex:1;border:1px solid rgba(232,200,119,.22);border-radius:12px;padding:10px 6px;text-align:center;background:rgba(255,255,255,.03)}
.opt .o b{display:block;font-size:18px;color:var(--ink);font-family:var(--fk)}
.opt .o small{display:block;font-size:10px;color:var(--dim);margin-top:3px;line-height:1.3}
.opt .o.on{border-color:var(--gold);background:rgba(232,200,119,.12)}
.opt .o.on b{color:var(--gold)}
.note{margin:10px 0 0;padding:10px 12px;border-left:2px solid var(--gold2);background:rgba(232,200,119,.06);font-size:12px;color:#d9c9a3;line-height:1.7;border-radius:0 8px 8px 0}
.btn{display:block;width:100%;margin-top:18px;padding:14px;border-radius:14px;background:linear-gradient(#d8b25c,#a87c22);color:#2a1a05;font-size:17px;font-weight:700;letter-spacing:4px;font-family:var(--fk);box-shadow:0 6px 18px rgba(216,178,92,.3)}
.btn:active{transform:translateY(1px)}
.btn.ghostb{background:none;border:1px solid rgba(232,200,119,.4);color:var(--gold);box-shadow:none;margin-top:10px;font-weight:400}
.btn[disabled]{opacity:.45}
.row{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.06);font-size:14px}
.row small{color:var(--dim);font-size:12px;display:block;margin-top:2px}
.sw{width:46px;height:26px;border-radius:13px;background:#3a2f22;position:relative;transition:background .2s;flex:none}
.sw::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#d9c9a3;transition:left .2s}
.sw.on{background:var(--gold2)}.sw.on::after{left:23px;background:#fff6dc}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:8px 0 4px}
.stats div{text-align:center;padding:10px 4px;border-radius:10px;background:rgba(255,255,255,.04)}
.stats b{display:block;font-size:18px;color:var(--gold);font-variant-numeric:tabular-nums}
.stats small{font-size:11px;color:var(--dim)}
input.txt,textarea.txt{width:100%;padding:11px 12px;border-radius:10px;border:1px solid rgba(232,200,119,.25);background:rgba(0,0,0,.35);color:var(--ink);font:inherit;font-size:14px;outline:none}
input.txt:focus,textarea.txt:focus{border-color:var(--gold)}
textarea.txt{min-height:74px;resize:none}
.wl{padding:10px 0;border-bottom:1px solid rgba(255,255,255,.06);display:flex;gap:10px;align-items:flex-start}
.wl .tag{flex:none;padding:2px 7px;border-radius:4px;background:rgba(200,54,43,.25);color:#f3b0a8;font-size:11px;margin-top:2px}
.wl p{margin:0;font-size:13px;line-height:1.5;flex:1}
.wl small{color:var(--dim);font-size:11px}
.wl button{flex:none;font-size:12px;color:var(--gold);border:1px solid rgba(232,200,119,.35);border-radius:6px;padding:3px 8px}
.wl.done p{color:var(--dim);text-decoration:line-through}
.xp{display:flex;gap:14px;align-items:center;padding:12px;border:1px solid rgba(232,200,119,.3);border-radius:12px;background:rgba(232,200,119,.06);margin-top:10px}
.xp .bars{display:flex;gap:8px;align-items:flex-end;height:70px;flex:none;padding:0 6px}
.xp .bars i{display:block;width:5px;background:linear-gradient(#8a4b2a,#5a2d16);border-radius:2px;position:relative}
.xp .bars i::before{content:"";position:absolute;top:-3px;left:-1px;width:7px;height:7px;border-radius:50%;background:#ff9a3a;box-shadow:0 0 6px 2px rgba(255,150,50,.5)}
.xp b{font-family:var(--fk);color:var(--gold);font-size:18px;letter-spacing:2px;display:block}
.xp p{margin:4px 0 0;font-size:12px;color:#d9c9a3;line-height:1.6}

/* 仪式层 */
#rite{position:absolute;inset:0;z-index:15;pointer-events:none;background:radial-gradient(ellipse at 50% 60%,rgba(0,0,0,.15),rgba(0,0,0,.55));animation:fadein .4s}
@keyframes fadein{from{opacity:0}}
#rite.bow #scene{}
.rite-sticks{position:absolute;left:50%;bottom:-40%;transform:translateX(-50%);display:flex;gap:6px;align-items:flex-end;filter:drop-shadow(0 0 12px rgba(255,150,50,.5))}
.rite-sticks .stick{height:150px;transition:none}
.rite-sticks .stick::before{opacity:0}
#rite.lit .rite-sticks .stick::before{opacity:1;transition:opacity .4s}
.rite-text{position:absolute;left:0;right:0;top:12%;text-align:center;font-family:var(--fk);font-size:30px;letter-spacing:10px;color:var(--gold);text-shadow:0 0 20px rgba(232,200,119,.6),0 2px 6px rgba(0,0,0,.9);opacity:0;transition:opacity .5s}
.rite-text.show{opacity:1}
.rite-text small{display:block;font-size:14px;letter-spacing:3px;color:#d9c9a3;margin-top:10px}
#scene.bow{animation:bow 1.1s ease-in-out}
@keyframes bow{0%,100%{transform:none}45%,55%{transform:translateY(14px) scale(.985)}}

#toast{position:absolute;left:50%;bottom:calc(var(--bar) + 20px);transform:translateX(-50%) translateY(10px);background:rgba(20,12,6,.92);border:1px solid rgba(232,200,119,.4);color:var(--ink);padding:10px 16px;border-radius:12px;font-size:13px;opacity:0;transition:.3s;pointer-events:none;z-index:40;max-width:86%;text-align:center;line-height:1.6}
#toast.show{opacity:1;transform:translateX(-50%)}

.noanim *{transition:none!important;animation-duration:0s!important}
.seg{display:flex;border:1px solid rgba(232,200,119,.3);border-radius:10px;overflow:hidden;margin-bottom:6px}
.seg button{flex:1;padding:9px;font-size:13px;color:#d9c9a3;background:rgba(255,255,255,.03)}
.seg button.on{background:rgba(232,200,119,.18);color:var(--gold);font-weight:600}
.card.none{display:flex;flex-direction:column;justify-content:center;min-height:90px;color:var(--dim)}
.riting .wishcard,.riting .timer,.riting .fish,.riting .autof{opacity:0;transition:opacity .3s}

.lang-en .wtxt .wcat,.lang-fil .wtxt .wcat{writing-mode:horizontal-tb;right:auto;left:0;width:100%;text-align:center;top:6%;letter-spacing:1px}
.lang-en .wtxt .wname,.lang-fil .wtxt .wname{writing-mode:horizontal-tb;left:0;width:100%;text-align:center;bottom:6%;letter-spacing:0}
.lang-en #bar button{font-size:11px;letter-spacing:0}
.lang-en .rite-text{letter-spacing:2px;font-size:26px}
.lang-en .dname{letter-spacing:1px;font-size:16px}
.lang-en .btn{letter-spacing:1px}
.lang-en .sheet h3{letter-spacing:1px}
.lang-en .fish span{font-size:9px;white-space:nowrap}
.lang-en .dname,.lang-fil .dname{position:static;transform:none;flex:1;text-align:center;margin:0 8px;font-size:14px;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lang-en .merit,.lang-fil .merit{padding:4px 9px;gap:4px}.lang-en .merit .mi,.lang-fil .merit .mi{font-size:11px}.lang-en .merit b,.lang-fil .merit b{font-size:14px}
.lang-fil .fish span{font-size:9px;white-space:nowrap}
.lang-fil #bar button{font-size:11px;letter-spacing:0}.lang-fil .rite-text{letter-spacing:2px;font-size:24px}.lang-fil .btn,.lang-fil .sheet h3{letter-spacing:1px}
@keyframes fspr{to{background-position:calc(var(--fw)*-48) 0}}

/* 英文 / 菲语：标题用 Cormorant Garamond（与中文楷体同样的古典气质），正文 Inter */
.lang-en,.lang-fil{--fk:"Cormorant Garamond","Playfair Display",Georgia,serif}
.lang-en .dname,.lang-fil .dname{font-size:17px;font-weight:600;letter-spacing:.5px}
.lang-en .sheet h3,.lang-fil .sheet h3{font-size:22px;font-weight:700}
.lang-en .btn,.lang-fil .btn{font-size:18px;font-weight:700}
.lang-en .card b,.lang-fil .card b{font-size:15px;font-weight:700}
.lang-en .opt .o b,.lang-fil .opt .o b{font-size:20px;font-weight:700}
.lang-en .rite-text,.lang-fil .rite-text{font-size:30px;font-weight:600}
.lang-en .wtxt .wmain span,.lang-fil .wtxt .wmain span{font-size:11.5px;font-weight:700}
.dname,.sheet h3,.rite-text,.btn,.card b,.opt .o b,.wtxt{font-feature-settings:"palt" 1}

/* 供品面板：五个供位缩略图 */
.seg5{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:10px;align-items:end}
.seg5 button{height:58px;border:1px solid rgba(232,200,119,.22);border-radius:10px;background:rgba(255,255,255,.03);display:flex;align-items:flex-end;justify-content:center;padding:4px;position:relative}
.seg5 button img{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 3px 4px rgba(0,0,0,.6))}
.seg5 button span{color:rgba(232,200,119,.45);font-size:18px;align-self:center}
.seg5 button.on{border-color:var(--gold);background:rgba(232,200,119,.12);box-shadow:0 0 0 1px var(--gold) inset}
.seg5 button.c{height:46px}
.nowine{margin:0 0 10px;font-size:12px;color:#e8b0a0}

/* 祈福牌：红绳缠在横梁上垂下（不用铁钩） */
.cordwrap{position:absolute;z-index:7;pointer-events:none;width:13px;border-radius:3px;
  background:repeating-linear-gradient(-28deg,#8f1410 0 2px,#d23a2c 2px 4px,#a8201a 4px 6px);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.25),0 2px 4px rgba(0,0,0,.55)}
.cordwrap::after{content:"";position:absolute;left:50%;bottom:-7px;width:11px;height:11px;margin-left:-5.5px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#e65446,#a51d16 60%,#6e0e0a);box-shadow:0 2px 3px rgba(0,0,0,.5)}
.cordwrap[hidden]{display:none}