/* ============================================================================
   Fortune Rath Yatra Experience — styles  (palette sampled from the deck)
   ========================================================================== */
:root{
  --cream:#FCF0D8; --cream-soft:#FFF6E2; --parch:#F5ECDA;
  --orange:#F07A00; --orange-deep:#DA5F00; --orange-2:#F79A2E;
  --gold:#F2C24E; --gold-deep:#E0A72E;
  --maroon:#3A0E04; --brown:#7A2E10; --ink:#3A1A0A; --ink-soft:#6A4A2E;
  --white:#FFFFFF; --green:#2FA24C; --green-soft:#E7F5E9;
  --night:#1B0A03;
  --radius:22px; --shadow:0 18px 46px rgba(60,20,0,.30);
  --glow:0 8px 26px rgba(224,95,0,.42);
  --ease:cubic-bezier(.22,1,.36,1);
  --f-display:"Baloo 2", system-ui, sans-serif;
  --f-body:"Poppins", system-ui, sans-serif;
}
*{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html,body{ height:100%; }
body{ font-family:var(--f-body); background:#0e0602; color:var(--ink);
  display:flex; align-items:center; justify-content:center; overflow:hidden; }

.stage{ position:relative; width:100%; max-width:460px; height:100dvh;
  overflow:hidden; background:var(--night); }
@media(min-width:480px){ .stage{ height:min(940px,100dvh); border-radius:26px;
  box-shadow:0 30px 80px rgba(0,0,0,.55); } }

/* screens */
.screen{ position:absolute; inset:0; display:none; flex-direction:column;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  opacity:0; transition:opacity .45s var(--ease); }
.screen.on{ display:flex; opacity:1; }

/* ---------- shared buttons ---------- */
.btn{ font-family:var(--f-display); font-weight:700; font-size:1.05rem;
  border:none; border-radius:999px; padding:15px 26px; cursor:pointer;
  transition:transform .16s var(--ease), filter .2s, box-shadow .25s; }
.btn:active{ transform:translateY(1px) scale(.99); }
.btn.block{ width:100%; }
.btn.primary{ color:#fff; background:linear-gradient(180deg,var(--orange-2),var(--orange-deep));
  box-shadow:var(--glow); }
.btn.primary:hover{ filter:brightness(1.05); transform:translateY(-2px); }
.btn.gold{ color:var(--maroon); background:linear-gradient(180deg,#FBD97A,var(--gold-deep));
  box-shadow:0 8px 22px rgba(224,167,46,.4); }
.btn.ghost{ background:#fff; color:var(--brown); border:1.5px solid rgba(122,46,16,.28); }

/* ============================================================================
   SCREEN 1 · SPLASH  (deck art baked in; tap zone over the drawn button)
   ========================================================================== */
/* ============================================================================
   SCREEN 1 · SPLASH — real button PNG placed exactly as slide 1
   ========================================================================== */
#screen-open{ justify-content:center; align-items:center; }

/* shared image button (Start Journey + Proceed) */
.img-btn{ position:absolute; transform:translate(-50%,-50%); padding:0; border:none;
  background:none; cursor:pointer; z-index:3; line-height:0;
  transition:transform .14s var(--ease), filter .18s, opacity .4s var(--ease); }
.img-btn img{ width:100%; height:auto; display:block; }
.img-btn:hover{ filter:brightness(1.05); }
.img-btn:active{ transform:translate(-50%,-50%) scale(.97); }
/* green confirmation on press (orange → green) */
.img-btn.pressed{ filter:hue-rotate(96deg) saturate(1.35) brightness(.95); }

/* slide 1: PNG width 41.44%, centre cx 49.78% / cy 45.63% */
.start-btn{ left:49.78%; top:46%; width:41.44%; opacity:0; }
.start-btn.ready{ opacity:1; }

.loader{ position:absolute; left:0; right:0; top:45.6%; transform:translateY(-50%);
  display:flex; gap:9px; justify-content:center; z-index:4; }
.loader span{ width:11px; height:11px; border-radius:50%;
  background:linear-gradient(180deg,var(--gold),var(--orange-deep));
  animation:bounce 1s var(--ease) infinite; }
.loader span:nth-child(2){ animation-delay:.15s; } .loader span:nth-child(3){ animation-delay:.3s; }
@keyframes bounce{ 0%,100%{ transform:translateY(0); opacity:.5;} 50%{ transform:translateY(-10px); opacity:1;} }

/* ============================================================================
   SCREEN 2 · FORM
   ========================================================================== */
/* ============================================================================
   SCREEN 2 · FORM  — elements from the deck placed on the exact 9:16 frame
   ========================================================================== */
#screen-form{ justify-content:center; align-items:center; }
.frame{ position:relative; height:100%; aspect-ratio:1080/1920; flex:0 0 auto;
  container-type:size; }
.frame-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.frame .ov{ position:absolute; transform:translate(-50%,-50%); height:auto; pointer-events:none; }
.ov.odia { left:49%;   top:15.4%; width:36%; }
.ov.title{ left:50%;   top:16.6%; width:58%; }
.ov.sub  { left:49%;   top:28.5%; width:42%; }
.ov.divider{ left:50%; top:21.5%; width:36%; }
/* "Your Name" / "Mobile Number" labels above each field pill */
.field-label{ position:absolute; left:13%; font-family:var(--f-body); font-weight:700;
  color:#6E4C3A; font-size:2.04cqh; letter-spacing:.005em; pointer-events:none; }
.field-label.lbl-name { top:31.3%; }
.field-label.lbl-phone{ top:42.3%; }
.ov.note { left:45.8%; top:58.3%; width:53%; }
/* real inputs sitting inside the drawn field pills */
.frame-field{ position:absolute; left:26%; width:60%; height:6.1%;
  background:transparent; border:none; outline:none; padding:0;
  font-family:var(--f-body); font-weight:500; font-size:2.03cqh; color:#3A1A0A; }
.frame-field.name { top:34.6%; }
.frame-field.phone{ top:45.6%; }
.frame-field::placeholder{ color:#8A7B78; opacity:1; font-size:1.68cqh; }
.frame-err{ position:absolute; left:8%; top:55.6%; width:84%; text-align:center; pointer-events:none;
  color:#C0361B; font-size:2cqh; font-weight:600; min-height:1em; }

/* Terms & Conditions checkbox row (replaces the old note) */
.tc-row{ position:absolute; left:11%; top:53%; display:flex; align-items:center; gap:2.4cqw;
  background:none; border:none; padding:1.5cqh 3cqw; cursor:pointer;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.tc-box{ flex:0 0 auto; width:4.4cqw; height:4.4cqw; border:2px solid #E39A3C; border-radius:4px;
  background:#fff; display:grid; place-items:center; }
.tc-tick{ width:60%; height:60%; opacity:0; transform:scale(.4); transition:.16s var(--ease);
  background:no-repeat center/contain; }
.tc-row.checked .tc-tick{ opacity:1; transform:scale(1);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23E06A00' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round' d='M4 12l6 6L20 5'/%3E%3C/svg%3E"); }
.tc-row.checked .tc-box{ border-color:#E06A00; }
.tc-label{ height:2.48cqh; width:auto; }

/* locked Proceed: greyed + non-interactive until T&C accepted */
.proceed-btn.is-locked{ filter:grayscale(.9) brightness(1.05) opacity(.55); pointer-events:none; }

/* T&C pop-up */
.tc-modal{ position:absolute; inset:0; z-index:20; display:flex; align-items:center;
  justify-content:center; padding:6% 6%; background:rgba(30,12,2,.55);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }
.tc-modal[hidden]{ display:none; }
.tc-panel{ width:100%; max-height:86%; background:#FFF7EA; border-radius:20px;
  border:1px solid rgba(224,167,46,.5); box-shadow:0 20px 50px rgba(30,12,2,.5);
  display:flex; flex-direction:column; overflow:hidden; }
.tc-head{ padding:4.5cqw 5cqw 2.5cqw; text-align:center; border-bottom:1px solid rgba(224,167,46,.35); }
.tc-h1{ font-family:var(--f-display); font-weight:800; color:var(--orange-deep); font-size:3.1cqw;
  letter-spacing:.04em; }
.tc-h2{ font-family:var(--f-display); font-weight:700; color:var(--maroon); font-size:4.4cqw; margin-top:.4cqw; }
.tc-body{ flex:1 1 auto; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:3.5cqw 5cqw;
  color:#4A2A18; font-size:3.2cqw; line-height:1.5; }
.tc-body p{ margin:0 0 2.4cqw; }
.tc-body p.tc-lead{ font-weight:700; color:var(--maroon); }
.tc-foot{ flex:0 0 auto; padding:3cqw 5cqw 4cqw; border-top:1px solid rgba(224,167,46,.35);
  display:flex; flex-direction:column; align-items:center; gap:2cqw; background:#FFF7EA; }
.tc-hint{ font-size:2.9cqw; color:#9A6A3C; text-align:center; transition:.2s; }
.tc-foot.ready .tc-hint{ opacity:0; height:0; margin:0; }
.tc-accept{ min-width:52%; padding:3.4cqw 6cqw; border:none; border-radius:999px; cursor:pointer;
  font-family:var(--f-display); font-weight:800; font-size:4cqw; color:#fff; letter-spacing:.02em;
  background:linear-gradient(180deg,#EA710F,#DB5500);
  box-shadow:0 10px 24px rgba(216,84,0,.4); transition:filter .2s, transform .14s; }
.tc-accept:disabled{ filter:grayscale(.9) brightness(1.05) opacity(.5); cursor:default; box-shadow:none; }
.tc-accept:not(:disabled):active{ transform:scale(.97); }

/* slide 2: PNG width 43.84%, centre cx 49.26% / cy 63.92% */
.proceed-btn{ left:49.26%; top:61.5%; width:43.84%; }

/* ============================================================================
   SCREEN 3 · SELFIE — deck elements placed on the exact 9:16 frame
   ========================================================================== */
#screen-selfie{ justify-content:center; align-items:center; }
.ov.s-title{ left:52.0%; top:15.8%; width:54.5%; }
.ov.s-sub  { left:52.6%; top:19.6%; width:50.9%; }

/* live camera fills the drawn frame (cx 52.0%, cy 39.8%, w 63.4%, h 35.1%) */
.cam-frame{ position:absolute; left:52.0%; top:39.8%; transform:translate(-50%,-50%);
  width:63.4%; height:35.1%; border-radius:3.4cqw; overflow:hidden; background:#241609; }
.cam-frame video,.cam-frame #shotView{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cam-frame video.mirror{ transform:scaleX(-1); }
.cam-border{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:2; }
.cam-controls{ position:absolute; top:4%; left:4%; right:4%; z-index:3;
  display:flex; justify-content:space-between; pointer-events:none; }
.cam-controls[hidden]{ display:none; }
.cam-btn{ pointer-events:auto; display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:0; background:transparent; border:none; cursor:pointer; color:#fff; }
.cam-btn svg{ width:2.4cqh; height:2.4cqh; padding:1cqh; box-sizing:content-box; border-radius:50%;
  background:rgba(20,8,2,.45); border:1px solid rgba(255,255,255,.45); }
.cam-btn em{ font-style:normal; font-size:1.1cqh; font-weight:600; letter-spacing:.08em;
  text-shadow:0 1px 3px rgba(0,0,0,.6); }
.cam-btn.on svg{ background:var(--gold); color:var(--maroon); border-color:var(--gold); }
.cam-msg{ position:absolute; inset:0; display:none; flex-direction:column; gap:1.4cqh;
  align-items:center; justify-content:center; text-align:center; padding:4%;
  background:rgba(27,10,3,.85); color:var(--cream); z-index:4; }
.cam-msg.show{ display:flex; }
.cam-msg .lede{ font-size:1.9cqh; line-height:1.4; }

/* the three deck buttons at their measured spots — always visible; greyed when unusable */
.sel-btn{ position:absolute; transform:translate(-50%,-50%); padding:0; border:none;
  background:none; cursor:pointer; z-index:3;
  transition:transform .14s var(--ease), filter .22s, opacity .22s; }
.sel-btn img{ width:100%; height:auto; display:block; }
.sel-btn:not(:disabled):hover{ transform:translate(-50%,-50%) translateY(-2px); filter:brightness(1.06); }
.sel-btn:not(:disabled):active{ transform:translate(-50%,-50%) scale(.95); }
.sel-btn:disabled{ cursor:default; pointer-events:none;
  filter:grayscale(1) brightness(1.12) contrast(.85); opacity:.45; }
.sel-btn.capture { left:52.9%; top:63.7%; width:16.9%; }
.sel-btn.retake  { left:29.6%; top:63.4%; width:11.6%; }
.sel-btn.usephoto{ left:75.3%; top:63.4%; width:12.1%; }

/* ============================================================================
   SCREEN 4 · QUIZ  (video background, no image)
   ========================================================================== */
#screen-ride{ overflow:hidden; }
#rideVideo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
/* the deck's orange bar across the bottom (screens tagged .has-bar) */
.screen.has-bar::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:4.2%;
  background:url("../assets/elements/orange-bar.png") center/cover no-repeat,
             linear-gradient(180deg,#F79A2E,#EE7513); z-index:6; pointer-events:none; }
.quiz-top{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center;
  padding:6% 8% 0; gap:1.4%; }
.quiz-top .q-logo{ width:44%; height:auto; filter:drop-shadow(0 4px 10px rgba(60,20,0,.22)); }
/* after the first question, drop the celebration header — keep only the logo */
.quiz-top.compact .q-title,
.quiz-top.compact .q-tagline,
.quiz-top.compact .q-div-sm{ display:none; }
.quiz-top .q-div-sm{ width:26%; height:auto; margin-top:1%; }
.quiz-top .q-title{ width:62%; height:auto; margin-top:1.5%; }
.quiz-top .q-tagline{ width:78%; height:auto; margin-top:1%; }
.quiz-top .q-div-2{ margin-top:0.5%; }
.qcard{ position:absolute; left:16px; right:16px; bottom:5.5%; z-index:2; container-type:inline-size;
  aspect-ratio:1030/1228;
  background:url("../assets/elements/quiz/card-panel.png") center/100% 100% no-repeat;
  transform:translateY(24px); opacity:0; transition:transform .4s var(--ease), opacity .4s; }
/* content sits between the panel's lotus dividers (top ~10%, bottom ~88%) */
.qcard-inner{ position:absolute; inset:13% 9% 13%; display:flex; flex-direction:column; }
.qcard.up{ transform:translateY(0); opacity:1; }
.q-count{ text-align:center; font-weight:600; font-size:2.6cqw; letter-spacing:.14em;
  text-transform:uppercase; color:var(--orange-deep); margin-bottom:1.5cqw; }
.q-text{ font-family:var(--f-display); font-weight:700; font-size:4cqw; color:var(--maroon);
  text-align:center; line-height:1.18; margin-bottom:2.5cqw;
  background:#fff; border-radius:3.5cqw; padding:2.4cqw 3.2cqw;
  box-shadow:0 2px 10px rgba(90,40,10,.10); }
.opts{ display:flex; flex-direction:column; gap:2.2cqw; }
/* each option is the deck's pill artwork; the letter badge + tick are baked into
   the art, so we only overlay the answer text. Correct/wrong swap the art. */
.opt{ position:relative; width:100%; aspect-ratio:974/142; display:flex; align-items:center;
  padding:0 13% 0 15%; cursor:pointer; border:none; background:transparent;
  font-family:var(--f-body); font-size:3.6cqw; color:var(--ink); text-align:left;
  transition:transform .14s var(--ease); }
.opt::before{ content:""; position:absolute; inset:0; z-index:0;
  background:var(--art-default) center/100% 100% no-repeat; }
.opt > *{ position:relative; z-index:1; }
.opt .opt-txt{ line-height:1.15; }
.opt:not(.done):hover{ transform:translateY(-1px); }
.opts.locked .opt{ cursor:default; }
.opt.correct::before{ background:var(--art-correct) center/100% 100% no-repeat; }
.opt.wrong::before{ background:var(--art-wrong) center/100% 100% no-repeat; }
.opt.correct{ color:#2C6A16; }
.opt.wrong{ color:#9C1B12; }

/* the message banner (Correct! / Incorrect!) — deck artwork, text baked in */
.feedback{ position:relative; width:100%; aspect-ratio:1000/241; margin-top:1.8cqw;
  background:var(--fb-art) center/100% 100% no-repeat;
  opacity:0; transform:translateY(6px); transition:.3s var(--ease); }
.feedback.show{ opacity:1; transform:translateY(0); }
.feedback.correct{ --fb-art:url("../assets/elements/quiz/banner-correct.png"); }
.feedback.incorrect{ --fb-art:url("../assets/elements/quiz/banner-incorrect.png"); }

/* ============================================================================
   SCREEN 5 · CONGRATULATIONS  (last video frame + deck PNGs, per slide 8)
   ========================================================================== */
#screen-cta{ justify-content:center; align-items:center; }
/* bubble: width 67.13%, centre cx 51.25% / cy 70.75% */
.ov.cta-congrats{ left:51.25%; top:70.75%; width:67.13%; }
/* button: width 45.98%, centre cx 52.36% / cy 79.91% */
.cta-btn{ left:52.36%; top:79.91%; width:45.98%; opacity:0; }
.cta-btn.ready{ opacity:1; }

/* ============================================================================
   SCREEN 6 & 7 · CHOOSE A BLESSING
   ========================================================================== */
#screen-category,#screen-bless{ justify-content:flex-end; }
.bless-wrap{ position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; padding:0 18px 4%; justify-content:flex-end; }
.bless-title{ font-family:var(--f-display); font-weight:800; color:#C0361B; font-size:1.5rem;
  text-align:center; text-shadow:0 2px 10px rgba(255,255,255,.4); }
.bless-sub{ color:var(--brown); font-size:.86rem; text-align:center; margin-top:2px;
  text-shadow:0 1px 6px rgba(255,255,255,.5); }
.bless-cat{ font-family:var(--f-display); font-weight:700; color:var(--orange-deep);
  font-size:1.05rem; text-align:center; margin-top:8px; }
.bless-grid{ width:100%; display:flex; flex-direction:column; gap:12px; margin-top:14px; }
.bcard{ width:100%; text-align:left; background:rgba(255,247,230,.94); backdrop-filter:blur(6px);
  border:1px solid rgba(224,167,46,.5); border-radius:18px; padding:15px 16px; cursor:pointer;
  box-shadow:0 10px 26px rgba(60,20,0,.22); opacity:0; transform:translateY(14px);
  transition:transform .18s var(--ease), box-shadow .25s, opacity .3s; }
.bcard.in{ opacity:1; transform:translateY(0); }
.bcard:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(60,20,0,.3); }
.bcard h3{ font-family:var(--f-display); font-weight:700; font-size:1.06rem; color:var(--maroon); }
.bcard p{ font-size:.82rem; color:var(--ink-soft); margin-top:3px; line-height:1.3; }
.bcard.msg h3{ font-size:.98rem; font-weight:600; font-family:var(--f-body); color:var(--ink); line-height:1.35; }
.back-link{ margin-top:14px; background:none; border:none; color:var(--brown); font-family:var(--f-body);
  font-weight:600; font-size:.86rem; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.bless-foot{ margin-top:12px; font-family:var(--f-display); font-weight:600; font-size:.82rem;
  color:var(--brown); text-align:center; text-shadow:0 1px 6px rgba(255,255,255,.5); }

/* ---- Choose a Blessing — deck v7 layout: frosted panel + 3 art cards --------
   Geometry measured from the deck screenshot (fractions of the panel box):
   heading cy 26.2%, card-row cy 55.9%, footer cy 79.3%. Panel = card-panel.png
   (aspect 1030/1228), width 75.4% of stage, centre cy 68.5%.                   */
.cat-panel{ position:absolute; left:50%; top:68.5%; transform:translate(-50%,-50%);
  width:75.4%; aspect-ratio:1030/1228; }
.cat-panel-art{ position:absolute; inset:0; width:100%; height:100%;
  object-fit:fill; z-index:1; pointer-events:none; }

/* title + subtitle block (Choose a Blessing / What are you seeking today?) */
.cat-heading{ position:absolute; left:50%; top:26.2%; transform:translate(-50%,-50%);
  width:49%; height:auto; z-index:2; }

/* three category cards in a row (icon + title + copy baked into each PNG) */
.cat-grid{ position:absolute; left:50%; top:55.9%; transform:translate(-50%,-50%);
  width:89.8%; display:flex; justify-content:space-between; align-items:flex-start; z-index:2; }
.cat-card{ flex:0 0 31.8%; padding:0; border:none; background:none; cursor:pointer;
  line-height:0; border-radius:16px; opacity:0; transform:translateY(16px);
  transition:transform .2s var(--ease), opacity .35s var(--ease), filter .18s;
  -webkit-tap-highlight-color:transparent; }
.cat-card img{ width:100%; height:auto; display:block; }
.cat-card.in{ opacity:1; transform:translateY(0); }
.cat-card:hover{ transform:translateY(-3px); filter:brightness(1.03); }
.cat-card:active{ transform:translateY(-1px) scale(.98); }

/* footer line (May Lord Jagannath bless you and your family) */
.cat-foot{ position:absolute; left:50%; top:79.3%; transform:translate(-50%,-50%);
  width:59.7%; height:auto; z-index:2; }

/* ============================================================================
   SCREEN 8 · CERTIFICATE  (last video frame backdrop + deck frame art)
   Positions measured from the reference: card cy 60.5%, w 74.5%.
   Inside the card: name cy 32.7%, selfie cy 57.9%, blessing cy 86.2%.
   ========================================================================== */
#screen-cert{ justify-content:center; align-items:center; }
.cert-card{ position:absolute; left:50.8%; top:60.5%; transform:translate(-50%,-50%);
  width:74.5%; aspect-ratio:823/1235; }
.cert-art{ position:absolute; inset:0; width:100%; height:100%; object-fit:fill; }

.cert-name{ position:absolute; left:50%; top:32.7%; transform:translate(-50%,-50%);
  width:70%; text-align:center; font-family:var(--f-display); font-weight:800;
  color:#B01218; font-size:3.3cqh; line-height:1.05; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }

.cert-photo{ position:absolute; left:50.2%; top:57.9%; transform:translate(-50%,-50%);
  width:76.7%; aspect-ratio:3/2; border-radius:2cqw; overflow:hidden;
  background:#EFE3CC; box-shadow:0 6px 16px rgba(60,25,0,.22); }
.cert-photo img{ width:100%; height:100%; object-fit:cover; display:block; }

.cert-bless{ position:absolute; left:50%; top:86.2%; transform:translate(-50%,-50%);
  width:74%; text-align:center; font-family:var(--f-body); color:#5A3220;
  font-size:1.48cqh; line-height:1.42; }   /* 20% smaller than the name/lead text */

/* real buttons, art from the deck — side by side, cy 92% */
.cert-btn{ position:absolute; top:92%; transform:translate(-50%,-50%);
  width:40%; padding:0; background:none; border:none; cursor:pointer;
  transition:transform .14s var(--ease), filter .2s; }
.cert-btn img{ width:100%; height:auto; display:block; }
.cert-btn:hover{ transform:translate(-50%,-50%) translateY(-2px); filter:brightness(1.06); }
.cert-btn:active{ transform:translate(-50%,-50%) scale(.96); }
.cert-btn.save { left:26.6%; }
.cert-btn.share{ left:73.4%; }
.restart-link{ position:absolute; left:50%; transform:translateX(-50%); top:97.2%;
  background:none; border:none; color:#FFE9C7; font-family:var(--f-body);
  font-weight:600; font-size:1.6cqh; cursor:pointer; text-shadow:0 1px 6px rgba(0,0,0,.6); }

/* blessings screens sit on the video frame — add a soft scrim for legibility */
#screen-category::before, #screen-bless::before{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,8,2,.18) 0%, rgba(20,8,2,.55) 55%, rgba(20,8,2,.72) 100%); }
#screen-category .bless-wrap, #screen-bless .bless-wrap{ z-index:2; }
#screen-category .bless-title, #screen-bless .bless-title{ color:#FFF3D6; text-shadow:0 2px 12px rgba(0,0,0,.7); }
#screen-category .bless-sub, #screen-bless .bless-sub{ color:#FFE0B4; text-shadow:0 2px 10px rgba(0,0,0,.7); }
#screen-category .bless-foot, #screen-bless .bless-foot{ color:#FFE0B4; text-shadow:0 2px 10px rgba(0,0,0,.7); }
#screen-bless .bless-cat{ color:#FFC46B; text-shadow:0 2px 10px rgba(0,0,0,.7); }
#screen-bless .back-link{ color:#FFE9C7; text-shadow:0 1px 6px rgba(0,0,0,.6); }

/* full-screen save preview (press-and-hold on iOS) */
.save-overlay{ position:fixed; inset:0; z-index:60; display:none; align-items:center;
  justify-content:center; padding:22px; background:rgba(10,4,2,.93); }
.save-overlay.show{ display:flex; }
.save-inner{ display:flex; flex-direction:column; align-items:center; gap:16px; width:100%; max-width:420px; }
.save-inner img{ max-width:100%; max-height:68vh; border-radius:14px; box-shadow:var(--shadow);
  border:1px solid rgba(242,194,78,.4); -webkit-touch-callout:default; }
.save-hint{ color:var(--cream); font-size:.9rem; line-height:1.45; text-align:center; }
.save-hint b{ color:var(--gold); }
.save-inner .btn{ min-width:170px; }

/* transient toast */
.toast{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px);
  max-width:88%; background:rgba(27,10,3,.96); color:var(--cream); border:1px solid rgba(242,194,78,.4);
  padding:12px 18px; border-radius:14px; font-size:.86rem; line-height:1.35; text-align:center;
  box-shadow:var(--shadow); opacity:0; pointer-events:none; z-index:70; transition:.25s var(--ease); }
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }