:root{
  --gold:#c9a227;--ink:#3a2a1a;--cream:#fff8ec;--mute:#7a6550;
  --sans:"Microsoft YaHei","微软雅黑","PingFang SC","Noto Sans SC",SimSun,"宋体","Segoe UI",sans-serif;
  --serif:"KaiTi","楷体","STKaiti","SimSun","宋体","Palatino Linotype",serif;
  --shadow:0 10px 28px rgba(40,24,10,.16), 0 1px 0 rgba(255,255,255,.65) inset;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;overflow:hidden;background:#d8d2c8;color:#3a2a1a;font-family:var(--sans)}
button{font-family:inherit;border:0;cursor:pointer;color:inherit;background:none}
#view{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0}
.vignette{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 42%,rgba(255,244,220,0) 42%,rgba(16,8,6,0.22) 100%),
    linear-gradient(to right,rgba(8,4,3,0.16),transparent 14%,transparent 86%,rgba(8,4,3,0.16)),
    linear-gradient(to bottom,rgba(8,4,3,0.12),transparent 16%,transparent 82%,rgba(8,4,3,0.20))}

#hud{position:fixed;inset:0;z-index:5;pointer-events:none}
#hud button,.title-pill,.icon-pill,.actionbar,.nametag{pointer-events:auto}
.top{position:absolute;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:flex-start;
  padding:clamp(10px,1.8vh,18px) clamp(14px,1.6vw,22px) 0;z-index:2}
.title-pill{display:flex;align-items:center;gap:8px;padding:7px 16px;border-radius:22px;
  background:rgba(22,16,14,.46);border:1px solid rgba(255,255,255,.14);
  box-shadow:none;backdrop-filter:blur(14px);
  font-size:clamp(14px,1.2vw,16px);font-weight:700;color:#fff8ee;text-shadow:0 1px 2px rgba(0,0,0,.45)}
.title-pill small{font-weight:400;opacity:.62;font-size:clamp(11px,.9vw,12px);margin-left:2px;color:#efe6d8}
.title-pill .mark{width:8px;height:8px;border-radius:50%;background:linear-gradient(180deg,#f3d29b,#c9a227)}
.top-right{display:flex;gap:8px}
.icon-pill{min-width:42px;height:38px;padding:0 14px;border-radius:19px;
  background:rgba(22,16,14,.46);border:1px solid rgba(255,255,255,.14);
  box-shadow:none;backdrop-filter:blur(14px);font-size:13px;color:#f3ece2}

.nametag{position:absolute;left:50%;top:50%;transform:translate(-50%,-120%);
  padding:4px 11px;border-radius:11px;background:rgba(20,16,14,.82);
  border:1px solid rgba(255,255,255,.32);box-shadow:0 2px 8px rgba(0,0,0,.28);
  font-size:13px;font-weight:600;letter-spacing:.04em;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.45);
  white-space:nowrap;pointer-events:none;opacity:0}
.nametag.show{opacity:1}

.hint{position:absolute;left:50%;top:64px;bottom:auto;transform:translate(-50%,0);
  padding:6px 14px;border-radius:16px;background:rgba(32,24,18,.78);
  border:1px solid rgba(255,236,210,.28);color:#fff8ee;font-size:clamp(12px,1.2vw,14px);
  text-shadow:0 1px 2px rgba(0,0,0,.35);box-shadow:0 4px 14px rgba(0,0,0,.22);opacity:0;transition:opacity .35s;white-space:nowrap;
  pointer-events:none;max-width:min(86vw,560px);text-align:center;z-index:5}
.hint.show{opacity:1}

.actionbar{position:absolute;left:50%;bottom:max(2px,env(safe-area-inset-bottom,0px));
  transform:translateX(-50%);
  display:flex;gap:0;padding:3px 6px;border-radius:16px;
  background:rgba(18,14,12,.16);border:1px solid rgba(255,255,255,.08);
  box-shadow:none;backdrop-filter:blur(8px);z-index:3}
.actionbar button{display:flex;flex-direction:column;align-items:center;gap:1px;
  min-width:clamp(52px,6.4vw,64px);padding:4px 8px 5px;border-radius:14px;
  font-size:clamp(12px,1.15vw,14px);font-weight:600;color:#fff8ee;letter-spacing:.03em;
  text-shadow:0 1px 2px rgba(0,0,0,.62)}
.actionbar button:hover{background:rgba(255,255,255,.08)}
.actionbar button.on{background:rgba(255,255,255,.14);color:#fff}
.actionbar .ico{width:15px;height:15px;display:block;line-height:1}
.actionbar .ico svg{width:15px;height:15px;display:block}

/* ===== blessing overlay: never scroll ===== */
#after{position:fixed;inset:0;z-index:20;display:none;overflow:hidden;
  align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 50% 78%,rgba(255,170,70,.18),rgba(28,20,14,.52) 55%);
  padding:clamp(6px,1.6vh,22px) clamp(10px,2vw,24px)}
#after.show{display:flex}
.after-inner{width:min(34rem,94vw);max-height:100%;display:flex;flex-direction:column;align-items:stretch}
.after-inner.rising{animation:riseFromCandle .72s cubic-bezier(.18,.78,.2,1) both}
@keyframes riseFromCandle{
  from{opacity:0;transform:translateY(24vh) scale(.7);filter:blur(3px)}
  to{opacity:1;transform:none;filter:none}
}
.flip-wrap{perspective:1200px;filter:drop-shadow(0 8px 28px rgba(80,40,10,.28)) drop-shadow(0 0 34px rgba(255,176,70,.28))}
#after.promo-mode .flip-wrap{display:none}
.flip{position:relative;transform-style:preserve-3d;transition:transform .85s cubic-bezier(.2,.7,.2,1);
  height:auto;width:100%}
.flip.open{transform:rotateY(180deg)}
.face{backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:20px;
  box-shadow:0 18px 50px rgba(0,0,0,.28);overflow:hidden;font-family:var(--sans)}
.face.back{position:absolute;inset:0}
.face.back{background:linear-gradient(165deg,#6a4528,#2a1810 55%,#3d2618);color:#f7ecd4;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(8px,1.4vh,12px);
  border:1px solid rgba(243,210,155,.28)}
.back-orn{width:clamp(64px,10vh,86px);height:clamp(64px,10vh,86px);border-radius:50%;border:1.5px solid rgba(243,210,155,.55);
  box-shadow:inset 0 0 0 8px rgba(243,210,155,.08),0 0 28px rgba(255,180,70,.35);
  background:radial-gradient(circle at 40% 35%,#f3d29b,#c48b3e 60%,#7a4e20)}
.back-kicker{font-family:var(--serif);font-size:clamp(20px,3.2vh,26px)}
.face.back span{font-size:clamp(12px,1.6vh,14px);letter-spacing:2px;opacity:.75}
.face.front{position:relative;transform:rotateY(180deg);display:flex;flex-direction:column;align-items:stretch;
  gap:clamp(5px,.8vh,8px);text-align:center;
  background:linear-gradient(#c9a227,#c9a227) 0 0/100% 5px no-repeat,
    linear-gradient(#c9a227,#c9a227) 0 100%/100% 5px no-repeat,
    linear-gradient(#c9a227,#c9a227) 0 0/5px 100% no-repeat,
    linear-gradient(#c9a227,#c9a227) 100% 0/5px 100% no-repeat,
    linear-gradient(180deg,#fff8ec,#f6e6c8);
  color:#3a2616;padding:clamp(16px,2.4vh,24px) clamp(18px,2.6vw,30px) clamp(14px,2vh,20px);
  overflow:hidden}
.card-orn{display:flex;justify-content:center;margin:2px 0 2px}
.gold-cross{display:block;width:14px;height:18px;
  background:linear-gradient(#d4b056,#c9a227) 50% 0/2.2px 100% no-repeat,
    linear-gradient(#d4b056,#c9a227) 0 34%/100% 2.2px no-repeat;
  filter:drop-shadow(0 0 4px rgba(212,176,86,.45))}
.face.front .kicker{font-size:clamp(11px,1.5vh,13px);letter-spacing:3px;color:#9a6a2a;flex:none}
.face.front h2{font-family:var(--serif);font-size:clamp(22px,3.5vh,28px);margin:0;line-height:1.25;flex:none}
.card-rule{display:flex;align-items:center;gap:10px;height:12px;margin:2px 8% 2px}
.card-rule::before,.card-rule::after{content:"";flex:1;height:1px;
  background:linear-gradient(90deg,transparent,rgba(201,162,39,.75),transparent)}
.card-rule span{width:7px;height:7px;transform:rotate(45deg);border:1px solid #c9a227;flex:none;box-sizing:border-box}
.face.front .verse{font-family:var(--serif);font-size:clamp(18px,2.9vh,23px);line-height:1.75;color:#2c1c10;
  flex:none;margin:clamp(4px,.6vh,8px) 0;text-align:center}
.face.front .ref{font-size:clamp(12px,1.6vh,14px);color:#8a5a28;flex:none;text-align:right;margin:2px 0 4px}
.face.front .tip{margin-top:clamp(6px,1vh,10px);padding-top:clamp(8px,1.2vh,12px);
  border-top:1px solid rgba(140,90,40,.2);font-size:clamp(13px,1.75vh,15px);line-height:1.6;color:#5a3a22;
  flex:none;text-align:left}
.face.front .tip b{display:block;font-size:clamp(11px,1.45vh,12px);letter-spacing:1px;color:#9a6a2a;margin-bottom:4px;font-weight:600;text-align:left}
.card-actions{display:flex;gap:10px;margin-top:clamp(8px,1.4vh,14px);flex:none}
.btn-share,.btn-keep{flex:1;height:clamp(36px,5.2vh,46px);border-radius:999px;font-size:clamp(13px,1.8vh,15px);font-weight:600}
.btn-share{border:1px solid rgba(140,90,40,.28);background:rgba(255,255,255,.45);color:#5a3a18;
  box-shadow:0 2px 8px rgba(60,40,20,.08)}
.btn-keep{color:#3a2108;background:linear-gradient(180deg,#fff1cf,#d9a556);
  box-shadow:0 4px 14px rgba(160,110,40,.28)}

/* promo: replacement panel, no internal scroll */
.promo{display:none;flex-direction:column;gap:clamp(6px,1.1vh,12px);color:#fff5e2;
  max-height:100%;overflow:hidden;padding:clamp(10px,1.6vh,18px);
  background:linear-gradient(180deg,rgba(42,28,18,.72),rgba(28,18,12,.78));
  border:1px solid rgba(255,236,200,.18);border-radius:20px;
  box-shadow:0 18px 48px rgba(0,0,0,.3)}
#after.promo-mode .promo{display:flex}
.promo-tabs{display:flex;gap:8px;flex:none}
.promo-tabs button{flex:1;height:clamp(32px,4.6vh,40px);border-radius:999px;font-size:clamp(13px,1.7vh,14px);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,236,200,.18);color:#f4e9d3}
.promo-tabs button.on{background:linear-gradient(180deg,rgba(243,210,155,.28),rgba(170,110,80,.18));
  border-color:rgba(243,210,155,.5);color:#fff6e4;font-weight:600}
.promo-pane{display:none;flex:1 1 auto;min-height:0;overflow:hidden}
.promo-pane.on{display:flex;flex-direction:column;gap:clamp(8px,1.2vh,12px)}
.ad-slot{height:clamp(44px,7vh,64px);border:1.5px dashed rgba(255,236,200,.4);border-radius:14px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;color:rgba(255,236,200,.7);letter-spacing:3px;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.04) 0 10px,transparent 10px 20px);flex:none}
.ad-slot small{font-size:11px;letter-spacing:1px;margin-top:3px;opacity:.75}
.sec-head{flex:none}
.sec-head h3{font-family:var(--serif);font-size:clamp(18px,2.8vh,22px)}
.sec-head p{font-size:clamp(12px,1.6vh,13px);opacity:.75;margin-top:3px;line-height:1.45}
.jewels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(6px,.8vw,10px);flex:none}
.jw{display:flex;flex-direction:column;gap:6px;background:rgba(255,255,255,.08);border:1px solid rgba(255,236,200,.18);
  border-radius:16px;padding:clamp(8px,1.2vh,12px);min-width:0}
.jw-img{width:100%;height:clamp(56px,9vh,78px);border-radius:12px;flex:none;
  background:radial-gradient(circle at 50% 40%,#fff,#efe3cf 80%);
  display:flex;align-items:center;justify-content:center;position:relative}
.jw-img svg{width:clamp(48px,8vh,70px);height:clamp(48px,8vh,70px)}
.jw-tag{position:absolute;left:6px;top:6px;font-size:10px;padding:2px 7px;border-radius:8px;background:#3b2416;color:#f3d29b}
.jw-body{flex:1;min-width:0}
.jw-body h4{font-size:clamp(13px,1.8vh,15px);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jw-body p{font-size:clamp(11px,1.45vh,12px);line-height:1.45;opacity:.8;margin-top:4px}
.jw-foot{display:flex;align-items:center;justify-content:space-between;margin-top:6px;gap:6px}
.jw-price{font-family:var(--serif);color:#f3d29b;font-size:clamp(13px,1.8vh,15px)}
.jw-price small{font-family:var(--sans);font-size:10px;opacity:.6;margin-left:3px}
.jw-go{font-size:12px;padding:5px 10px;border-radius:14px;background:linear-gradient(180deg,#5a3a18,#3a2410);color:#f3d29b;text-decoration:none;white-space:nowrap}
.paywall{padding:clamp(10px,1.4vh,14px);border:1px solid rgba(255,236,200,.2);border-radius:16px;background:rgba(255,255,255,.06);flex:none}
.pw-head{display:flex;gap:10px;align-items:center;margin-bottom:8px}
.pw-head h3{font-family:var(--serif);font-size:clamp(16px,2.4vh,18px)}
.pw-head p{font-size:clamp(11px,1.5vh,12px);opacity:.7;margin-top:2px}
.pw-lock{width:36px;height:36px;border-radius:12px;flex:none;background:linear-gradient(160deg,#f3d29b,#c48b3e);position:relative}
.pw-lock::before{content:"";position:absolute;left:12px;top:7px;width:9px;height:9px;border:2.5px solid #3a2108;border-bottom:0;border-radius:8px 8px 0 0}
.pw-lock::after{content:"";position:absolute;left:9px;top:16px;width:18px;height:13px;border-radius:4px;background:#3a2108}
.pw-btn{width:100%;display:flex;align-items:center;justify-content:space-between;text-align:left;
  padding:clamp(8px,1.3vh,12px) 14px;border-radius:14px;margin-top:8px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,236,200,.2);color:#fff}
.pw-btn b{display:block;font-size:clamp(13px,1.8vh,15px)}
.pw-btn small{display:block;font-size:clamp(11px,1.45vh,12px);opacity:.7;margin-top:2px}
.pw-btn em{font-style:normal;font-family:var(--serif);font-size:clamp(16px,2.4vh,20px);color:#f3d29b;padding:5px 12px;border-radius:12px;background:rgba(243,210,155,.12)}
.pw-btn.gold{background:linear-gradient(120deg,rgba(243,210,155,.22),rgba(170,110,80,.16));border-color:rgba(243,210,155,.45)}
.pw-btn.gold em{background:linear-gradient(180deg,#fff1cf,#d9a556);color:#3a2108}
.btn-primary{width:100%;height:clamp(40px,5.6vh,48px);border-radius:24px;margin-top:14px;font-size:16px;font-weight:600;color:#3a2108;
  background:linear-gradient(180deg,#fff1cf,#d9a556);box-shadow:0 4px 14px rgba(160,110,40,.25)}
.btn-ghost{width:100%;height:clamp(36px,5vh,44px);margin-top:2px;border-radius:22px;border:1px solid rgba(255,236,200,.3);color:#f4e9d3;flex:none;font-size:clamp(13px,1.7vh,15px)}
.foot{text-align:center;font-size:clamp(10px,1.3vh,11px);opacity:.5;margin:0;letter-spacing:1px;flex:none}

.modal{position:fixed;inset:0;z-index:40;background:rgba(10,6,4,.5);display:none;align-items:center;justify-content:center;padding:24px;overflow:hidden}
.modal.show{display:flex}
.sheet{width:min(400px,92vw);max-height:min(80vh,560px);overflow:hidden;background:linear-gradient(180deg,#fff8ec,#f3e2c4);border-radius:20px;padding:clamp(18px,3vh,24px);text-align:center;color:#3a2616;
  box-shadow:0 18px 50px rgba(0,0,0,.28)}
.sheet h3{font-family:var(--serif);font-size:clamp(18px,3vh,22px);margin:8px 0 10px}
.sheet p{color:#6a5040;line-height:1.65;font-size:clamp(13px,1.8vh,15px)}
.reg-list{display:grid;gap:8px;margin:14px 0 6px;text-align:left}
.reg{padding:12px 14px;border-radius:14px;border:1px solid rgba(140,90,40,.2);background:rgba(255,255,255,.45)}
.reg.cur{border-color:#c9a227;background:rgba(243,210,155,.35)}
.reg small{display:block;color:#8a6a48;margin-top:3px}
.toast{position:fixed;left:50%;bottom:clamp(88px,14vh,120px);transform:translateX(-50%) translateY(16px);z-index:50;
  background:rgba(40,28,16,.88);color:#f7ecd4;padding:10px 16px;border-radius:16px;opacity:0;pointer-events:none;transition:.3s;
  font-size:13px;box-shadow:0 8px 24px rgba(0,0,0,.25);max-width:90vw;text-align:center}
.toast.show{opacity:1;transform:translateX(-50%)}

@media (max-height:700px){
  .face.front{padding:14px 16px 14px}
}
@media (max-width:720px){
  .jewels{grid-template-columns:repeat(3,minmax(0,1fr))}
  .actionbar button{min-width:50px;padding:3px 6px;font-size:10px}
  .hint{white-space:normal}
}

body.after-open .actionbar,
body.after-open .hint,
body.after-open .nametag{opacity:0;visibility:hidden;pointer-events:none}

.presence{position:absolute;left:clamp(12px,1.6vw,20px);bottom:clamp(16px,3vh,24px);
  padding:7px 12px;border-radius:16px;background:rgba(22,16,14,.46);
  border:1px solid rgba(255,255,255,.14);box-shadow:none;backdrop-filter:blur(14px);
  font-size:clamp(12px,1.15vw,13px);color:#f3ece2;display:none;pointer-events:none;z-index:3}
.presence.show{display:block}
#hud .presence{pointer-events:none}
.candle-count{position:absolute;left:clamp(12px,1.6vw,20px);bottom:clamp(48px,8.2vh,64px);
  padding:7px 12px;border-radius:16px;background:rgba(22,16,14,.46);
  border:1px solid rgba(255,220,140,.22);backdrop-filter:blur(14px);
  font-size:clamp(12px,1.15vw,13px);color:#f6e6c8;display:none;pointer-events:none;z-index:3}
.candle-count.show{display:block}

#boot{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 50% 42%,#f4ead6 0%,#e4d4bc 58%,#d4c2a4 100%);
  color:#6a5438;font-family:var(--sans);letter-spacing:.08em;transition:opacity .55s}
#boot.hide{opacity:0;pointer-events:none;visibility:hidden}
.boot-card{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.boot-flame{width:22px;height:34px;border-radius:50% 50% 45% 45%;
  background:radial-gradient(circle at 50% 70%,#fff6c8 0%,#ffcf5a 38%,#ff8a20 72%,rgba(255,120,20,0) 100%);
  box-shadow:0 0 18px rgba(255,170,50,.55);animation:bootFlicker 1s ease-in-out infinite}
@keyframes bootFlicker{0%,100%{transform:scaleY(1) scaleX(1);opacity:.92}50%{transform:scaleY(1.08) scaleX(.94);opacity:1}}
.boot-card p{font-size:16px;letter-spacing:.18em;color:#5a4430}
.boot-bar{width:148px;height:4px;border-radius:99px;background:rgba(120,90,50,.16);overflow:hidden}
.boot-bar span{display:block;height:100%;width:40%;border-radius:99px;
  background:linear-gradient(90deg,#f3d29b,#c9a227);animation:bootLoad 1.2s ease-in-out infinite}
@keyframes bootLoad{0%{transform:translateX(-80%)}100%{transform:translateX(280%)}}
.boot-card small{font-size:12px;opacity:.6;letter-spacing:.12em}
#boot span{padding:10px 18px;border-radius:999px;background:rgba(255,255,255,.55);border:1px solid rgba(160,130,80,.25)}

@media (max-width:480px){
  .title-pill{padding:6px 12px;font-size:12px}
  .title-pill small{margin-left:4px}
  .icon-pill{min-width:38px;height:34px;padding:0 10px}
  .hint{max-width:min(78vw,320px);font-size:12px;white-space:normal;line-height:1.35}
  .actionbar{padding:3px 4px;border-radius:16px}
  .actionbar button{min-width:44px;padding:3px 4px 4px;font-size:10px;white-space:nowrap}
  .nametag{font-size:12px;padding:3px 9px}
}
@media (max-height:760px){
  .hint{z-index:6}
}

#stage{position:fixed;inset:0;z-index:0;overflow:hidden;background:#2a2018;cursor:pointer}
#world{position:absolute;inset:0;transform-origin:50% 50%;will-change:transform}
.scene{position:absolute;inset:0;opacity:0;transition:none;pointer-events:none}
.scene.on{opacity:1}
.scene .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center}
#fx,#fgCv,#actorCv{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#sceneAltar{z-index:2}
#fx{z-index:3}
#actorCv{z-index:4}
#fgCv{z-index:5}
#veil{position:fixed;inset:0;z-index:4;background:rgba(28,18,10,0);pointer-events:none;transition:background .6s ease}
#veil.on{background:rgba(28,18,10,.22)}
#after.show .after-inner{animation:riseFromCandle .95s cubic-bezier(.18,.78,.2,1) both}

/* v27: outpainted cathedral tiles (positioned in stage % by app.js), v23 bg image hidden */
#bgNave{display:none}
.tiles27{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
.tiles27 img.tile27{position:absolute;display:block;max-width:none;max-height:none;user-select:none;-webkit-user-drag:none}
#fgCv{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

/* ===================== v32: launch build — phones, tablets, notches, loader ===================== */
html,body{position:fixed;inset:0;overscroll-behavior:none;touch-action:none;-webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;-webkit-text-size-adjust:100%;text-size-adjust:100%}
#stage{touch-action:none}
button{touch-action:manipulation}
#after,#after *,.modal,.modal *{touch-action:pan-y}
/* determinate loading bar */
.boot-bar{width:min(220px,60vw);height:6px}
#boot .boot-bar span{display:block;width:0;padding:0;border:0;background:linear-gradient(90deg,#f3d29b,#c9a227);
  border-radius:99px;animation:none;transition:width .25s ease-out}
#boot small{font-variant-numeric:tabular-nums}
/* notch / home-indicator safe areas */
.top{padding-top:max(clamp(10px,1.8vh,18px),env(safe-area-inset-top,0px));
  padding-left:max(clamp(14px,1.6vw,22px),env(safe-area-inset-left,0px));
  padding-right:max(clamp(14px,1.6vw,22px),env(safe-area-inset-right,0px))}
.hint{top:calc(max(10px,env(safe-area-inset-top,0px)) + 54px)}
.actionbar{bottom:calc(env(safe-area-inset-bottom,0px) + 6px)}
#soundBtn{display:flex;align-items:center;justify-content:center;padding:0 12px}
#soundBtn svg{display:block}
#soundBtn.muted{opacity:.7}
#after{padding-top:max(clamp(6px,1.6vh,22px),env(safe-area-inset-top,0px));padding-bottom:max(clamp(6px,1.6vh,22px),env(safe-area-inset-bottom,0px));
  padding-left:max(clamp(10px,2vw,24px),env(safe-area-inset-left,0px));padding-right:max(clamp(10px,2vw,24px),env(safe-area-inset-right,0px))}
/* touch devices: 44px+ targets */
@media (pointer:coarse){
  .icon-pill{min-width:44px;height:44px;border-radius:22px}
  .title-pill{min-height:40px}
  .actionbar{padding:4px 6px;border-radius:20px;background:rgba(18,14,12,.38);gap:2px}
  .actionbar button{min-width:68px;min-height:54px;padding:6px 8px;font-size:12px;justify-content:center;gap:3px}
  .actionbar .ico,.actionbar .ico svg{width:20px;height:20px}
  .btn-share,.btn-keep,.btn-ghost,.promo-tabs button{min-height:44px}
}
/* portrait phones: full-width bar, readable hint */
body.portrait .actionbar{left:max(8px,env(safe-area-inset-left,0px));right:max(8px,env(safe-area-inset-right,0px));transform:none;justify-content:space-around}
body.portrait .actionbar button{flex:1;min-width:0}
body.portrait .hint{max-width:calc(100vw - 32px);white-space:normal;line-height:1.4;font-size:13px}
body.portrait .candle-count{bottom:calc(env(safe-area-inset-bottom,0px) + 80px)}
body.portrait .presence{bottom:calc(env(safe-area-inset-bottom,0px) + 120px)}
/* short landscape phones: the bar becomes a column on the right so the scene keeps its height */
body.short .actionbar{left:auto;right:max(8px,env(safe-area-inset-right,0px));top:50%;bottom:auto;transform:translateY(-50%);
  flex-direction:column;padding:4px;gap:2px}
body.short .actionbar button{min-width:64px;min-height:48px;padding:4px 6px;font-size:11px}
body.short .top{padding-top:max(6px,env(safe-area-inset-top,0px))}
body.short .hint{top:calc(max(6px,env(safe-area-inset-top,0px)) + 48px);max-width:min(60vw,520px)}
body.short .candle-count{bottom:calc(env(safe-area-inset-bottom,0px) + 10px)}
body.short .toast{bottom:16px}
/* blessing card must never be cut off: allow vertical scroll on very short screens */
#after{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
#after.show{align-items:safe center}
.after-inner{max-height:none}
@media (max-height:520px){
  .face.front .verse{font-size:16px;line-height:1.55}
  .face.front h2{font-size:20px}
  .face.front{gap:3px;padding:12px 16px 12px}
  .face.front .tip{font-size:12.5px;line-height:1.45}
  .after-inner{width:min(40rem,92vw)}
}

/* ===== v32: prayer intention panel ===== */
.intents{position:fixed;z-index:15;left:0;top:0;width:min(92vw,360px);padding:14px 12px 12px;border-radius:20px;
  background:linear-gradient(180deg,rgba(48,32,20,.86),rgba(30,20,13,.9));border:1px solid rgba(243,210,155,.32);
  box-shadow:0 14px 40px rgba(0,0,0,.38),0 0 30px rgba(255,180,80,.12);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  color:#fff4e0;opacity:0;transform:translateY(8px) scale(.98);transition:opacity .28s ease,transform .28s ease;touch-action:manipulation}
.intents.show{opacity:1;transform:none}
.intents[hidden]{display:none}
.int-head{text-align:center;margin:0 26px 10px;line-height:1.25}
.int-head b{display:block;font-family:"Palatino Linotype","Book Antiqua",Georgia,var(--serif);font-weight:600;font-size:16px;letter-spacing:.01em}
.int-head small{display:block;font-size:12px;opacity:.7;margin-top:2px}
.int-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.int-grid button{min-height:52px;padding:6px 8px;border-radius:14px;text-align:center;
  background:linear-gradient(180deg,rgba(255,236,200,.13),rgba(255,236,200,.05));border:1px solid rgba(243,210,155,.3);color:#fff6e6;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;transition:background .15s,border-color .15s}
.int-grid button b{font-family:"Palatino Linotype","Book Antiqua",Georgia,var(--serif);font-weight:600;font-size:13.5px;line-height:1.15}
.int-grid button small{font-size:11.5px;opacity:.72}
.int-grid button:active,.int-grid button.on{background:linear-gradient(180deg,rgba(243,210,155,.38),rgba(201,162,39,.22));border-color:rgba(243,210,155,.75)}
.int-close{position:absolute;right:6px;top:6px;width:44px;height:44px;border-radius:22px;font-size:22px;line-height:44px;color:#f3e2c4;opacity:.75}
.int-name{display:flex;gap:8px;margin-top:10px}
.int-name[hidden]{display:none}
.int-name input{flex:1;min-width:0;height:44px;border-radius:12px;border:1px solid rgba(243,210,155,.45);background:rgba(255,248,236,.95);
  color:#3a2616;padding:0 12px;font-size:16px;font-family:inherit;user-select:text;-webkit-user-select:text;touch-action:manipulation}
.int-name button{height:44px;padding:0 14px;border-radius:12px;font-weight:600;color:#3a2108;background:linear-gradient(180deg,#fff1cf,#d9a556);white-space:nowrap}
body.intent-open .actionbar{opacity:0;visibility:hidden;pointer-events:none}
body.short .intents{width:min(300px,46vw);padding:10px 8px 8px}
body.short .int-head{margin-bottom:6px}
body.short .int-head b{font-size:14px}
body.short .int-grid{gap:6px}
body.short .int-grid button{min-height:46px;padding:4px 6px}
body.short .int-grid button b{font-size:12.5px}
/* English blessing cards (intentions) */
.face.front.en .verse{font-family:"Palatino Linotype","Book Antiqua",Georgia,var(--serif);font-style:italic;font-size:clamp(17px,2.6vh,21px);line-height:1.55}
.face.front.en h2{font-family:"Palatino Linotype","Book Antiqua",Georgia,var(--serif);font-size:clamp(20px,3.1vh,25px)}
.face.front.en .tip{font-family:"Palatino Linotype","Book Antiqua",Georgia,var(--serif);font-size:clamp(14px,1.9vh,16px)}
.face.front.en .kicker{letter-spacing:2px}
@media (max-height:520px){ .face.front.en .verse{font-size:15.5px;line-height:1.45} .face.front.en .tip{font-size:13px} }

/* v34: single weekly tier */
.pw-btn small.pw-en{font-size:clamp(10px,1.3vh,11px);opacity:.6;margin-top:1px}
.m-en{font-size:13px;opacity:.72;margin-top:6px;line-height:1.45}

/* v34: Weekly Blessing preview sheet */
.weekly{position:fixed;inset:0;z-index:30;background:rgba(10,6,4,.55);display:flex;align-items:center;justify-content:center;
  padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
.weekly[hidden]{display:none}
.wk-sheet{position:relative;width:min(560px,100%);max-height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y;
  background:linear-gradient(180deg,#fff8ec,#f3e2c4);color:#3a2616;border-radius:20px;padding:18px 16px 14px;box-shadow:0 18px 50px rgba(0,0,0,.3)}
.wk-x{position:absolute;right:8px;top:8px;width:44px;height:44px;border:0;border-radius:22px;background:rgba(90,60,30,.08);color:#5a3c1e;font-size:24px;line-height:44px;cursor:pointer}
.wk-badge{display:inline-block;font-size:11px;letter-spacing:.04em;color:#8a5a1a;background:rgba(243,210,155,.55);border:1px solid rgba(201,162,39,.5);border-radius:999px;padding:3px 10px;margin-right:48px}
.wk-sheet h3{font-family:var(--serif);font-size:20px;margin:8px 0 4px}
.wk-sub{font-size:13px;color:#6a5040;line-height:1.5}
.wk-sub span,.wk-note span{display:block;font-size:12px;opacity:.8}
.wk-list{display:grid;gap:8px;margin:12px 0 10px}
.wk-day{display:grid;grid-template-columns:62px 1fr;gap:4px 10px;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.55);border:1px solid rgba(140,90,40,.18);text-align:left}
.wk-d{grid-row:1/span 2;font-family:var(--serif);font-size:13px;color:#8a5a1a;line-height:1.3}
.wk-d small{display:block;font-family:inherit;font-size:11px;opacity:.75;margin-top:2px}
.wk-bl{font-size:13.5px;line-height:1.45}
.wk-bl i{font-family:var(--serif);display:block;color:#3a2616}
.wk-bl em{font-style:normal;font-size:11px;color:#9a7a58}
.wk-bl span{display:block;font-size:12.5px;color:#5a4030;margin-top:2px}
.wk-wear{display:flex;gap:8px;align-items:center;font-size:12.5px;color:#4a3020;border-top:1px dashed rgba(140,90,40,.25);padding-top:6px}
.wk-wear .dot{flex:none;width:18px;height:18px;border-radius:9px;border:1px solid rgba(90,60,20,.25)}
.wk-wear b{font-weight:600}
.wk-wear small{display:block;font-size:11.5px;opacity:.75}
.wk-note{font-size:12px;color:#7a5a40;line-height:1.5;text-align:center;margin:4px 0 10px}
.wk-buy{width:100%;min-height:48px;border:0;border-radius:14px;background:linear-gradient(180deg,#fff1cf,#d9a556);color:#3a2108;font-size:14px;cursor:pointer}
.wk-buy b{font-family:var(--serif);font-size:17px}
.wk-fine{font-size:11px;color:#8a6a48;text-align:center;margin-top:6px}
@media (min-width:700px) and (max-height:500px){.wk-sheet{width:min(760px,100%)}.wk-list{grid-template-columns:1fr 1fr}}
@media (max-width:440px){.wk-day{grid-template-columns:1fr}.wk-d{grid-row:auto;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}.wk-d small{margin-top:0}}
@media (min-width:700px) and (max-height:500px){.wk-day{grid-template-columns:1fr}.wk-d{grid-row:auto;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}.wk-d small{margin-top:0}}