/* ═══════════════════════════════════════════════
   LEGADO — style.css
   Dark & gold keepsake design
   ═══════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Inter:wght@300;400;500;600&display=swap');

:root{
  --gold:#b8842a; --gold2:#d4a855; --gold3:#f0cc80;
  --dark:#0a0806; --dark2:#131009; --dark3:#1e1810;
  --p:#fdf8f0;
  --sage:#3d6b55; --sagebg:rgba(61,107,85,.15);
  --rose:#9a3a2a;
  --serif:'Playfair Display',Georgia,serif;
  --sans:'Inter',system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
/* Starts one browser-zoom step up (≈Ctrl+ once) so elders never have to
   find the zoom themselves. Everything sized in rem follows this number —
   change 110% to 100% to go back, or 120% to go bigger still. */
html{-webkit-text-size-adjust:100%; font-size:110%;}
body{
  background:var(--dark); color:var(--p); font-family:var(--sans);
  -webkit-font-smoothing:antialiased; min-height:100vh; overflow-x:hidden;
}
[hidden]{display:none !important;}
button{font-family:var(--sans); -webkit-tap-highlight-color:transparent;}
img{max-width:100%;}

@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeDown{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}
@keyframes scaleIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
@keyframes glowPulse{0%,100%{box-shadow:0 0 12px rgba(184,132,42,.28), 0 0 30px rgba(184,132,42,.1)}50%{box-shadow:0 0 20px rgba(212,168,85,.55), 0 0 48px rgba(184,132,42,.25)}}
@keyframes shimmer{0%{background-position:-200% center}100%{background-position:200% center}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.2}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes spinSlow{from{transform:rotate(0)}to{transform:rotate(360deg)}}

.screen{display:none; min-height:100vh;}
.screen.active{display:block; animation:fadeIn .6s ease;}
.screen.leaving{opacity:0; transition:opacity .45s ease; pointer-events:none;}
#s-lang.active,#s-intro.active,#s-splash.active,#s-camera-help.active,
#s-processing.active,#s-reveal.active,#s-upgrade.active{
  display:flex !important; flex-direction:column;
  align-items:center; justify-content:center;
  padding:2.5rem 1.5rem; text-align:center;
  position:relative; overflow:hidden;
}
#s-lang::before,#s-intro::before,#s-splash::before,#s-reveal::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 80% 60% at 50% 20%, rgba(184,132,42,.13) 0%, transparent 70%);
}
#s-lang>*,#s-intro>*,#s-splash>*,#s-reveal>*{position:relative;z-index:1;}

.btn-primary{
  width:100%; max-width:340px; padding:1.05rem;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  color:var(--dark); border:none; border-radius:14px;
  font-family:var(--serif); font-size:1.05rem; font-weight:700;
  cursor:pointer; letter-spacing:.02em;
  box-shadow:0 4px 22px rgba(184,132,42,.42);
  transition:transform .1s, opacity .2s;
}
.btn-primary:active{transform:scale(.97); opacity:.9;}

/* V17: the third door. Someone returning with a code they have already paid
   for is not choosing between two ordinary options - so it does not look like
   the quiet text link underneath, and it does not compete with the warm gold
   of "continue" either. Lit from within rather than filled. */
.btn-jewel{
  display:block; width:100%; max-width:340px; padding:.85rem; margin:.65rem auto 0;
  background:rgba(184,132,42,.1); color:var(--gold3);
  border:1px solid rgba(184,132,42,.5); border-radius:14px;
  font-family:var(--serif); font-size:.92rem; font-weight:600;
  cursor:pointer; letter-spacing:.01em; transition:all .2s;
}
.btn-jewel:hover{background:rgba(184,132,42,.2); border-color:var(--gold2); color:#fff;}
.btn-jewel:active{transform:scale(.97);}
.btn-jewel[hidden]{display:none;}
.btn-text{
  background:none; border:none; color:rgba(255,255,255,.28);
  font-size:.78rem; cursor:pointer; margin-top:.85rem; padding:.4rem;
  transition:color .2s;
}
.btn-text:hover{color:rgba(255,255,255,.55);}
.btn-ghost{
  display:block; width:100%; max-width:340px; padding:.8rem; margin:.65rem auto 0;
  background:transparent; color:rgba(255,255,255,.32);
  border:1px solid rgba(255,255,255,.12); border-radius:12px;
  font-size:.85rem; font-weight:500; cursor:pointer; transition:all .2s;
}
.btn-ghost:hover{border-color:rgba(255,255,255,.28); color:rgba(255,255,255,.6);}

.deco{display:flex; align-items:center; gap:.6rem; width:100%; max-width:340px; margin:0 auto 1.5rem;}
.deco-bar{flex:1; height:1px; background:linear-gradient(90deg,transparent,rgba(184,132,42,.4),transparent);}
.deco-diamond{width:5px; height:5px; background:var(--gold); transform:rotate(45deg); flex-shrink:0;}

/* ═══ SCREEN 1: LANGUAGE ═══ */
.lang-select-wrap{max-width:400px; width:100%; margin:0 auto;}
.lang-select-logo{display:flex; flex-direction:column; align-items:center; margin-bottom:1.75rem; animation:fadeDown .8s ease both;}
.logo-img-lg{width:76px; height:76px; border-radius:20px; box-shadow:0 6px 28px rgba(0,0,0,.5); animation:glowPulse 3.5s ease-in-out infinite;}
.lang-wordmark{font-family:var(--serif); font-size:2.1rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; margin-top:.85rem;}
.lang-select-label{font-family:var(--serif); font-size:1.4rem; font-weight:400; font-style:italic; margin-bottom:1.7rem; min-height:1.5em; animation:fadeUp .8s ease .2s both; transition:opacity .45s ease;}
.lang-select-label.fading{opacity:0;}
.lang-select-options{display:flex; flex-direction:column; gap:.75rem; animation:fadeUp .8s ease .4s both;}
.lang-select-btn{
  display:flex; align-items:center; gap:1rem; padding:1.05rem 1.2rem;
  border:1px solid rgba(184,132,42,.28); border-radius:16px;
  background:rgba(255,255,255,.04); cursor:pointer; transition:all .22s; text-align:left;
}
.lang-select-btn:hover,.lang-select-btn:active{border-color:var(--gold); background:rgba(184,132,42,.12); transform:translateX(4px);}
.lsb-flag{
  flex-shrink:0; width:2.6rem; height:auto; border-radius:4px; overflow:hidden;
  box-shadow:0 1px 5px rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.12);
  display:block; line-height:0;
}
.lsb-flag svg{display:block; width:100%; height:100%;}
.lsb-text{display:flex; flex-direction:column; gap:.12rem;}
.lsb-name{font-family:var(--serif); font-size:1.1rem; font-weight:600; color:var(--gold3);}
.lsb-phrase{font-size:.74rem; color:rgba(255,255,255,.38); font-style:italic;}

/* ═══ SCREEN 2: INTRO ═══ */
.intro-slides{width:100%; max-width:430px;}
.intro-slide{display:none; flex-direction:column; align-items:center; animation:fadeUp .7s ease both;}
.intro-slide.active{display:flex;}
.intro-slide-img{width:72px; height:72px; border-radius:18px; margin-bottom:1.4rem; box-shadow:0 6px 24px rgba(0,0,0,.5); animation:float 3s ease-in-out infinite;}
.intro-slide-icon{font-size:3.6rem; margin-bottom:1.4rem; animation:float 3s ease-in-out infinite;}
.intro-slide-num{font-size:.64rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--gold2); opacity:.75; margin-bottom:.95rem;}
.intro-slide-title{font-family:var(--serif); font-size:clamp(1.55rem,5vw,2.15rem); font-weight:400; line-height:1.25; margin-bottom:.85rem;}
.intro-slide-title em{font-style:italic; color:var(--gold3);}
.intro-slide-body{font-size:.94rem; color:rgba(255,255,255,.5); line-height:1.7; font-weight:300; max-width:21.5rem;}
.intro-slide-body strong{color:rgba(255,255,255,.8);}
.intro-dots{display:flex; gap:.5rem; justify-content:center; margin:2.4rem 0 1.7rem;}
.intro-dot{width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.15); transition:all .3s;}
.intro-dot.active{background:var(--gold); width:20px; border-radius:3px;}

/* ═══ SCREEN 3: SPLASH ═══ */
.splash-inner{max-width:480px; width:100%; margin:0 auto;}
.legado-logo{display:flex; flex-direction:column; align-items:center; margin-bottom:1.6rem; animation:fadeDown .8s ease both;}
.logo-img-md{width:60px; height:60px; border-radius:16px; box-shadow:0 5px 22px rgba(0,0,0,.5); animation:glowPulse 3.5s ease-in-out infinite;}
.logo-wordmark{font-family:var(--serif); font-size:2rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; margin-top:.7rem; line-height:1;}
.logo-tagline{font-size:.62rem; color:var(--gold2); letter-spacing:.25em; text-transform:uppercase; margin-top:.4rem; font-weight:300; opacity:.85;}
.free-badge{
  display:inline-flex; align-items:center; gap:.35rem;
  border:1px solid rgba(61,107,85,.5); background:var(--sagebg); color:#7accaa;
  font-size:.65rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  padding:.3rem .85rem; border-radius:20px; margin-bottom:1.25rem;
  animation:fadeIn .8s ease .3s both;
}
.splash-h1{font-family:var(--serif); font-size:clamp(1.7rem,5.5vw,2.6rem); font-weight:400; line-height:1.22; margin-bottom:.85rem; animation:fadeUp .9s ease .4s both;}
.splash-h1 em{font-style:italic; color:var(--gold3);}
.splash-sub{font-size:.92rem; color:rgba(255,255,255,.45); line-height:1.72; font-weight:300; margin-bottom:1.9rem; animation:fadeUp .9s ease .5s both;}
.glass-card{
  background:rgba(255,255,255,.045);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(184,132,42,.18); border-radius:20px;
  padding:1.5rem; margin-bottom:1.1rem; text-align:left;
  animation:scaleIn .7s ease .6s both;
}
.card-lbl{font-size:.62rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--gold2); margin-bottom:.9rem;}
.field{margin-bottom:.95rem;}
.field:last-child{margin-bottom:0;}
.flbl{display:block; font-size:.78rem; font-weight:500; color:rgba(255,255,255,.5); margin-bottom:.4rem;}
.section-lbl-left{text-align:left; margin-bottom:.45rem; color:rgba(255,255,255,.4);}
.finp{
  width:100%; padding:.85rem 1rem;
  border:1px solid rgba(184,132,42,.22); border-radius:10px;
  background:rgba(255,255,255,.055);
  font-family:var(--serif); font-size:1rem; color:var(--p);
  outline:none; transition:border-color .25s, background .25s; -webkit-appearance:none;
}
.finp:focus{border-color:var(--gold); background:rgba(255,255,255,.09);}
.finp::placeholder{color:rgba(255,255,255,.22); font-family:var(--sans); font-size:.88rem;}
.theme-grid{display:grid; grid-template-columns:1fr 1fr; gap:.5rem;}
.theme-pill{
  padding:.68rem .5rem; border:1px solid rgba(184,132,42,.18); border-radius:9px;
  background:rgba(255,255,255,.03); cursor:pointer;
  font-size:.78rem; font-weight:500; color:rgba(255,255,255,.45);
  text-align:center; transition:all .2s;
}
.theme-pill:active{transform:scale(.96);}
.theme-pill.sel{border-color:var(--gold); background:rgba(184,132,42,.15); color:var(--gold3);}
.mode-grid{display:grid; grid-template-columns:1fr 1fr; gap:.6rem; margin-bottom:1.15rem;}
.mode-card{
  display:flex; flex-direction:column; align-items:center;
  background:rgba(255,255,255,.035); border:1px solid rgba(184,132,42,.15);
  border-radius:14px; padding:1rem .85rem; cursor:pointer; transition:all .2s;
}
.mode-card:active{transform:scale(.97);}
.mode-card.sel{border-color:var(--gold); background:rgba(184,132,42,.13);}
.mode-icon{font-size:1.5rem; margin-bottom:.38rem;}
.mode-title{font-size:.84rem; font-weight:600; color:rgba(255,255,255,.75); margin-bottom:.16rem;}
.mode-card.sel .mode-title{color:var(--gold3);}
.mode-desc{font-size:.68rem; color:rgba(255,255,255,.36); line-height:1.4;}
.btn-begin{max-width:none; animation:fadeUp .8s ease .75s both;}
.trust{font-size:.67rem; color:rgba(255,255,255,.24); margin-top:.85rem; animation:fadeIn .8s ease .9s both;}

/* ═══ SCREEN 4: CAMERA HELP ═══ */
.help-inner{max-width:430px; width:100%; margin:0 auto;}
.help-icon{font-size:2.9rem; margin-bottom:1rem; animation:float 3s ease-in-out infinite;}
.help-title{font-family:var(--serif); font-size:1.65rem; font-weight:400; margin-bottom:.5rem;}
.help-sub{font-size:.87rem; color:rgba(255,255,255,.45); line-height:1.65; font-weight:300; margin-bottom:1.5rem;}
.steps-card{
  background:rgba(255,255,255,.04); border:1px solid rgba(184,132,42,.18);
  border-radius:16px; padding:1.25rem; text-align:left; margin-bottom:1rem;
}
.steps-lbl{font-size:.62rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--gold2); margin-bottom:.85rem;}
.step-row{display:flex; gap:.75rem; align-items:flex-start; margin-bottom:.8rem;}
.step-row:last-child{margin-bottom:0;}
.step-num{
  width:24px; height:24px; border-radius:50%; border:1px solid var(--gold);
  color:var(--gold3); font-size:.7rem; font-weight:600;
  display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px;
}
.step-text{font-size:.82rem; color:rgba(255,255,255,.55); line-height:1.5;}
.step-text strong{color:rgba(255,255,255,.85);}
/* V17: the camera choice. Sits with the other cards on the camera screen,
   reads as one quiet sentence rather than a setting. */
.cam-choice{
  background:rgba(255,255,255,.04); border:1px solid rgba(184,132,42,.18);
  border-radius:12px; padding:.9rem 1rem; margin-bottom:1rem; text-align:left;
}
.cam-choice-lbl{font-size:.6rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--gold2); margin-bottom:.4rem;}
.cam-choice-txt{font-size:.83rem; color:rgba(255,255,255,.62); line-height:1.5;}
.cam-choice-btn{
  margin-top:.6rem; padding:.42rem .85rem;
  background:transparent; color:var(--gold2);
  border:1px solid rgba(184,132,42,.35); border-radius:20px;
  font-size:.76rem; font-family:inherit; cursor:pointer; transition:all .2s;
}
.cam-choice-btn:hover{border-color:var(--gold2); background:rgba(184,132,42,.1);}
.cam-choice[hidden]{display:none;}

.tips-box{
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07);
  border-radius:12px; padding:.85rem 1rem; margin-bottom:1.2rem; text-align:left;
}
.tips-lbl{font-size:.6rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.3); margin-bottom:.5rem;}
.tips-body{font-size:.76rem; color:rgba(255,255,255,.42); line-height:1.7;}
.tips-body strong{color:rgba(255,255,255,.66);}

/* ═══ SCREEN 5: RECORD ═══ */
#s-record{background:var(--dark);}
.rec-topbar{
  position:sticky; top:0; z-index:100;
  background:rgba(10,8,6,.95);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  padding:.8rem 1.2rem; display:flex; align-items:center; gap:.75rem;
  border-bottom:1px solid rgba(184,132,42,.12);
}
.btn-back{
  padding:.4rem .75rem; border:1px solid rgba(184,132,42,.25); border-radius:7px;
  background:transparent; color:rgba(255,255,255,.5);
  font-size:.76rem; font-weight:600; cursor:pointer; transition:all .15s;
}
.btn-back:hover{border-color:var(--gold); color:var(--gold3);}
.rec-topbar-logo{font-family:var(--serif); font-size:.95rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; margin-right:auto;}
.rec-prog-txt{font-size:.72rem; color:rgba(255,255,255,.35); font-weight:500; white-space:nowrap;}
@media(max-width:460px){
  .rec-topbar{gap:.5rem; padding:.8rem .9rem;}
  .rec-prog-txt{font-size:.64rem;}
}
.rec-prog-txt strong{color:var(--gold3);}
.prog-bar{height:2px; background:rgba(184,132,42,.12);}
.prog-fill{height:100%; width:0; background:linear-gradient(90deg,var(--gold),var(--gold3)); transition:width .6s ease;}
.dots-row{display:flex; gap:.4rem; padding:.55rem 1.2rem; background:var(--dark2); flex-wrap:wrap;}
.dot{width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.1); transition:all .35s;}
.dot.done{background:var(--sage); border-color:var(--sage);}
.dot.current{background:var(--gold); border-color:var(--gold); width:24px; border-radius:4px;}
.rec-content{max-width:660px; margin:0 auto; padding:1.2rem 1rem .6rem;}
.guide-tip{
  background:var(--sagebg); border:1px solid rgba(61,107,85,.25);
  border-radius:12px; padding:.85rem 1rem; margin-bottom:1rem;
  text-align:left; animation:fadeUp .5s ease;
}
.guide-tip-lbl{font-size:.6rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:#7accaa; margin-bottom:.3rem;}
.guide-tip-txt{font-size:.83rem; color:rgba(255,255,255,.6); line-height:1.5; font-style:italic;}
.swipe-row{display:flex; align-items:center; justify-content:center; gap:.5rem; font-size:.64rem; color:rgba(255,255,255,.2); margin-bottom:.85rem;}
.swipe-arrow{opacity:.45;}
.q-card{
  background:var(--dark3); border-radius:18px; padding:1.7rem 1.5rem 1.4rem;
  margin-bottom:1.05rem; position:relative; overflow:hidden; text-align:left;
  border:1px solid rgba(184,132,42,.15); box-shadow:0 8px 32px rgba(0,0,0,.4);
  animation:scaleIn .5s ease;
}
.q-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--gold),var(--gold3),var(--gold),transparent);
  background-size:200% auto; animation:shimmer 3s linear infinite;
}
.q-card::after{
  content:'"'; position:absolute; bottom:-12px; right:16px;
  font-family:var(--serif); font-size:6rem; font-style:italic;
  color:rgba(184,132,42,.06); line-height:1; pointer-events:none;
}
.q-eyebrow{font-size:.6rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--gold2); margin-bottom:.65rem;}
.q-text{font-family:var(--serif); font-size:clamp(1.08rem,3.8vw,1.38rem); font-weight:400; line-height:1.48;}
.q-hint{margin-top:.85rem; font-size:.77rem; color:rgba(255,255,255,.35); font-style:italic; line-height:1.55; padding-top:.75rem; border-top:1px solid rgba(184,132,42,.1);}
.cam-wrap{
  position:relative; background:var(--dark); border-radius:16px; overflow:hidden;
  aspect-ratio:4/3; margin-bottom:.9rem;
  box-shadow:0 8px 32px rgba(0,0,0,.5); border:1px solid rgba(184,132,42,.12);
}
#vid-preview{width:100%; height:100%; object-fit:cover; display:block;}
.cam-overlay{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:.6rem;
  background:rgba(10,8,6,.85); color:rgba(255,255,255,.7);
  text-align:center; padding:1rem;
}
.cam-overlay.hidden{display:none;}
.cam-overlay-icon{font-size:2.2rem;}
.cam-overlay-txt{font-size:.85rem; line-height:1.5;}
.cam-help-link{
  margin-top:.45rem; font-size:.73rem; color:var(--gold2); cursor:pointer;
  text-decoration:underline; text-underline-offset:3px; background:none; border:none;
}
.rec-badge{
  position:absolute; top:.8rem; left:.8rem;
  display:none; align-items:center; gap:.4rem;
  background:rgba(154,58,42,.92); color:#fff;
  padding:.28rem .7rem; border-radius:20px;
  font-size:.7rem; font-weight:700; letter-spacing:.06em;
}
.rec-badge.on{display:flex;}
.rec-dot{width:7px; height:7px; background:#fff; border-radius:50%; animation:pulse 1s infinite;}
.timer-pill{
  position:absolute; bottom:.8rem; right:.8rem; display:none;
  background:rgba(0,0,0,.75); color:#fff;
  font-family:'Courier New',monospace; font-size:.92rem; font-weight:700;
  padding:.28rem .68rem; border-radius:7px;
}
.timer-pill.on{display:block;}
/* Bottom-left, opposite the timer and clear of the REC badge. Small enough to
   be ignored, large enough for an unsteady thumb. */
/* V18N — the camera toggle. It used to be an emoji plus a word, always on
   screen, competing with the face behind it. Now: a drawn mark, a quieter
   label, and it leaves entirely while a chapter is being recorded. */
.cam-switch{
  position:absolute; bottom:.8rem; left:.8rem;
  display:inline-flex; align-items:center; gap:.4rem;
  background:rgba(10,8,6,.52); color:rgba(240,204,128,.9);
  border:1px solid rgba(184,132,42,.34); border-radius:22px;
  padding:.36rem .74rem .36rem .58rem;
  font-size:.68rem; font-family:inherit; letter-spacing:.02em;
  cursor:pointer; backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
  box-shadow:0 2px 12px rgba(0,0,0,.34);
  transition:opacity .35s ease, transform .35s ease, background .2s ease, border-color .2s ease;
}
.cam-switch svg{width:15px; height:15px; display:block; flex:0 0 auto;}
.cam-switch-lbl{opacity:.72;}
.cam-switch:hover{background:rgba(10,8,6,.72); border-color:rgba(240,204,128,.5); color:#f0cc80;}
.cam-switch:active{transform:scale(.96);}
.cam-switch:disabled{opacity:.35; cursor:default;}
.cam-switch[hidden]{display:none;}
/* Off screen while a chapter is being recorded — nothing competes with them. */
.cam-switch.is-away{opacity:0; transform:translateY(8px) scale(.94); pointer-events:none;}
@media (prefers-reduced-motion: reduce){ .cam-switch{transition:opacity .2s ease;} }
.playback-wrap{display:none; margin-bottom:.9rem; position:relative; border-radius:16px; overflow:hidden; box-shadow:0 8px 32px rgba(0,0,0,.5);}
.playback-wrap.on{display:block; animation:scaleIn .4s ease;}
#vid-playback{width:100%; display:block; background:var(--dark);}
.wm-overlay{position:absolute; inset:0; pointer-events:none;}
.wm-logo-badge{
  position:absolute; top:9px; right:9px;
  font-family:var(--serif); font-size:.65rem; font-weight:700;
  color:rgba(255,255,255,.45); background:rgba(0,0,0,.35);
  padding:.18rem .5rem; border-radius:5px; letter-spacing:.08em; text-transform:uppercase;
}
.wm-diag-wrap{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;}
.wm-diag-txt{
  font-family:var(--serif); font-size:1.05rem; font-weight:700;
  color:rgba(255,255,255,.16); transform:rotate(-35deg);
  letter-spacing:.12em; white-space:nowrap; text-shadow:0 1px 2px rgba(0,0,0,.3);
}
.wm-bottom-txt{position:absolute; bottom:9px; left:0; right:0; text-align:center; font-family:var(--serif); font-size:.72rem; color:rgba(255,255,255,.35); letter-spacing:.06em;}
.blur-overlay{
  position:absolute; inset:0;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  background:rgba(10,8,6,.55);
  display:none; align-items:center; justify-content:center;
  flex-direction:column; gap:.6rem; text-align:center; padding:1.5rem;
}
.blur-overlay.on{display:flex; animation:fadeIn .4s ease;}
.blur-icon{font-size:1.8rem;}
.blur-title{font-family:var(--serif); font-size:.95rem; color:#fff; line-height:1.4;}
.blur-sub{font-size:.72rem; color:rgba(255,255,255,.65);}
.photo-section{
  background:rgba(255,255,255,.03); border:1px dashed rgba(184,132,42,.2);
  border-radius:14px; padding:.95rem 1rem; margin-bottom:.9rem; text-align:left;
}
.photo-section-lbl{font-size:.6rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.3); margin-bottom:.4rem; display:flex; align-items:center; gap:.4rem;}
.photo-optional{font-size:.58rem; background:rgba(184,132,42,.1); color:var(--gold2); padding:.1rem .4rem; border-radius:4px;}
.photo-sub{font-size:.73rem; color:rgba(255,255,255,.3); margin-bottom:.65rem; line-height:1.4;}
.photo-input-row{display:flex; gap:.5rem; align-items:center;}
.btn-photo{
  padding:.45rem .85rem; border:1px solid rgba(184,132,42,.25); border-radius:8px;
  background:rgba(184,132,42,.07); color:var(--gold2);
  font-size:.76rem; font-weight:600; cursor:pointer; transition:all .15s; flex-shrink:0;
}
.btn-photo:hover{background:rgba(184,132,42,.15);}
.photo-count{font-size:.7rem; color:rgba(255,255,255,.3); font-style:italic;}
.photo-thumbs{display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.6rem;}
.photo-thumb-wrap{position:relative;}
.photo-thumb{width:44px; height:44px; border-radius:7px; object-fit:cover; border:1px solid rgba(184,132,42,.2); display:block;}
.photo-remove{
  position:absolute; top:-5px; right:-5px; width:16px; height:16px;
  background:var(--rose); color:#fff; border:none; border-radius:50%;
  font-size:.58rem; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.clip-saved{
  display:none; align-items:center; gap:.45rem;
  background:var(--sagebg); border:1px solid rgba(61,107,85,.25);
  border-radius:9px; padding:.55rem .85rem; margin-bottom:.7rem;
  font-size:.78rem; color:#7accaa; font-weight:500; text-align:left;
}
.clip-saved.on{display:flex; animation:fadeUp .4s ease;}
.controls-wrap{
  position:sticky; bottom:0; z-index:50;
  background:rgba(10,8,6,.96);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-top:1px solid rgba(184,132,42,.1);
  padding:.85rem 1.2rem calc(.85rem + env(safe-area-inset-bottom));
}
.controls-bar{max-width:440px; margin:0 auto; display:flex; align-items:center; justify-content:center; gap:1rem;}
.btn-rec{
  width:76px; height:76px; border-radius:50%;
  border:2.5px solid var(--rose); background:transparent;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:all .25s; flex-shrink:0; box-shadow:0 0 0 6px rgba(154,58,42,.1);
}
.btn-rec:active{transform:scale(.91);}
.btn-rec-inner{width:44px; height:44px; background:var(--rose); border-radius:50%; transition:all .25s;}
.btn-rec.recording .btn-rec-inner{border-radius:7px; width:28px; height:28px;}
.btn-rec.recording{box-shadow:0 0 0 8px rgba(154,58,42,.18), 0 0 0 16px rgba(154,58,42,.07);}
.btn-side{
  flex:1; max-width:115px; min-height:50px; padding:.75rem .45rem;
  border:1px solid rgba(184,132,42,.2); border-radius:12px;
  background:rgba(255,255,255,.04); color:rgba(255,255,255,.55);
  font-size:.83rem; font-weight:600; cursor:pointer; transition:all .15s;
}
.btn-side:active:not(:disabled){transform:scale(.95);}
.btn-side:disabled{opacity:.2; cursor:not-allowed;}
.btn-side.go{background:rgba(61,107,85,.25); color:#7accaa; border-color:rgba(61,107,85,.4);}
.controls-sub{text-align:center; font-size:.65rem; color:rgba(255,255,255,.2); margin-top:.45rem;}

/* ═══ SCREEN 6: PROCESSING ═══ */
.proc-loader{margin-bottom:1.4rem;}
.proc-ring{
  width:96px; height:96px; border-radius:50%;
  border:2px solid rgba(184,132,42,.15); border-top-color:var(--gold);
  display:flex; align-items:center; justify-content:center;
  animation:spinSlow 2.2s linear infinite;
}
.proc-icon-img{width:56px; height:56px; border-radius:14px; animation:spinSlow 2.2s linear infinite reverse;}
.proc-title{font-family:var(--serif); font-size:1.85rem; font-weight:400; margin-bottom:.4rem;}
.proc-sub{font-size:.85rem; color:rgba(255,255,255,.35); margin-bottom:2rem;}
.proc-track{width:260px; height:2px; background:rgba(255,255,255,.08); border-radius:1px; overflow:hidden; margin-bottom:.75rem;}
.proc-fill{height:100%; width:0; background:linear-gradient(90deg,var(--gold),var(--gold3)); transition:width .7s ease;}
.proc-step{font-size:.75rem; color:rgba(255,255,255,.3); font-style:italic; min-height:2.8em; display:flex; align-items:center; justify-content:center; text-align:center; line-height:1.4;}

/* ═══ SCREEN 7: REVEAL ═══ */
.reveal-inner{max-width:480px; width:100%; margin:0 auto;}
.reveal-logo{font-family:var(--serif); font-size:.85rem; font-weight:700; color:rgba(255,255,255,.25); letter-spacing:.18em; text-transform:uppercase; margin-bottom:1.8rem; animation:fadeIn 1s ease .2s both;}
.reveal-deco{animation:fadeIn 1s ease .7s both;}
.reveal-name-line{
  font-family:var(--serif); font-size:clamp(1.9rem,7vw,3.3rem); font-weight:400;
  color:var(--gold3); letter-spacing:.04em; line-height:1.15;
  margin-bottom:.5rem; animation:fadeUp 1.2s ease .4s both;
}
.reveal-subtitle{font-family:var(--serif); font-size:clamp(.88rem,2.5vw,1.05rem); color:rgba(255,255,255,.35); font-style:italic; letter-spacing:.08em; margin-bottom:2.2rem; animation:fadeIn 1s ease .9s both;}
.reveal-player-wrap{
  position:relative; border-radius:18px; overflow:hidden; background:var(--dark);
  isolation:isolate; transform:translateZ(0);
  box-shadow:0 16px 64px rgba(0,0,0,.7), 0 0 0 1px rgba(184,132,42,.15);
  margin-bottom:1rem; animation:scaleIn 1s ease 1.2s both;
}
#vid-output{width:100%; display:block; background:var(--dark); min-height:200px;}
/* kill the native paused-video play-button / controls overlay that flashed over
   each clip during the reveal (the "ghost player") */
#vid-output::-webkit-media-controls,
#vid-output::-webkit-media-controls-overlay-play-button,
#vid-output::-webkit-media-controls-start-playback-button,
#vid-output::-webkit-media-controls-panel{display:none !important;}
.reveal-blur{
  position:absolute; inset:-2px; z-index:6;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  background:rgba(10,8,6,.55);
  display:flex; align-items:center; justify-content:center;
  flex-direction:column; gap:.6rem; text-align:center; padding:1.5rem;
  opacity:0; pointer-events:none; transition:opacity .9s ease;
}
.reveal-blur.on{opacity:1;}
.reveal-transition{
  position:absolute; inset:0; z-index:7; background:var(--dark);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .8s ease;
}
.reveal-transition.on{opacity:1;}
#reveal-trans-blur{position:absolute; inset:-6%; width:112%; height:112%; object-fit:cover; filter:blur(26px) brightness(.5);}
#reveal-trans-img{position:relative; width:100%; height:100%; object-fit:contain;}
.reveal-wm{position:absolute; inset:0; pointer-events:none; z-index:5;}
.reveal-fade{
  position:absolute; inset:0; z-index:8; background:#000;
  opacity:0; pointer-events:none; transition:opacity .7s ease;
}
.reveal-fade.on{opacity:1;}
.player-controls{display:flex; gap:.6rem; justify-content:center; align-items:center; margin-bottom:1.2rem; animation:fadeUp .8s ease 1.5s both;}
.pc-btn{
  width:46px; height:46px; border-radius:50%; line-height:1;
  border:1px solid rgba(184,132,42,.35); background:rgba(184,132,42,.08);
  color:var(--gold3); font-size:1.05rem; cursor:pointer; transition:all .2s;
  display:flex; align-items:center; justify-content:center;
}
.pc-btn:hover{background:rgba(184,132,42,.2); border-color:var(--gold);}
.pc-btn:active{transform:scale(.92);}
.pc-main{width:58px; height:58px; font-size:1.35rem; border-width:1.5px;}
.reveal-meta{
  display:flex; align-items:center; justify-content:space-between;
  padding:.7rem .9rem; background:rgba(255,255,255,.04); border-radius:10px;
  margin-bottom:1.1rem; animation:fadeUp .8s ease 1.7s both;
}
.reveal-meta-name{font-family:var(--serif); font-size:.88rem; font-weight:600;}
.reveal-meta-dur{font-size:.7rem; color:rgba(255,255,255,.3);}
.clip-downloads-wrap{
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06);
  border-radius:12px; padding:.85rem 1rem; margin-bottom:1rem; text-align:left;
}
.clip-downloads-lbl{font-size:.6rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.3); margin-bottom:.6rem;}
.clip-downloads{display:flex; gap:.5rem; flex-wrap:wrap;}
.clip-dl-link{
  padding:.4rem .8rem; background:rgba(184,132,42,.08);
  border:1px solid rgba(184,132,42,.2); border-radius:8px;
  font-size:.72rem; color:var(--gold2); text-decoration:none; transition:all .15s;
}
.clip-dl-link:hover{background:rgba(184,132,42,.18);}
.montage-card{
  background:rgba(255,255,255,.04); border:1px solid rgba(184,132,42,.12);
  border-radius:12px; padding:.9rem; margin-bottom:1.1rem; text-align:left;
}
.montage-lbl{font-size:.6rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--gold2); margin-bottom:.6rem;}
.montage-photos{display:flex; gap:.45rem; flex-wrap:wrap;}
.montage-thumb{width:50px; height:50px; border-radius:8px; object-fit:cover; border:1px solid rgba(184,132,42,.2);}
.photo-lightbox{position:fixed; inset:0; z-index:500; background:rgba(0,0,0,.92); display:flex; align-items:center; justify-content:center; padding:1.5rem; cursor:zoom-out;}
.photo-lightbox[hidden]{display:none;}
.photo-lightbox img{max-width:100%; max-height:100%; border-radius:8px; box-shadow:0 8px 40px rgba(0,0,0,.6);}
.preview-notice{
  display:flex; gap:.7rem; align-items:flex-start; text-align:left;
  background:rgba(184,132,42,.07); border:1px solid rgba(184,132,42,.2);
  border-radius:12px; padding:.8rem .95rem; margin-bottom:1.1rem;
}
.preview-notice-icon{font-size:1rem; flex-shrink:0; margin-top:2px;}
.preview-notice-txt{font-size:.77rem; color:rgba(255,255,255,.4); line-height:1.5;}
.preview-notice-txt strong{color:var(--gold3);}
.upgrade-nudge{
  background:linear-gradient(135deg,rgba(184,132,42,.12), rgba(184,132,42,.05));
  border:1px solid rgba(184,132,42,.3); border-radius:14px;
  padding:1.15rem; margin-bottom:1.1rem;
}
.upgrade-nudge-title{font-family:var(--serif); font-size:1.02rem; margin-bottom:.35rem;}
.upgrade-nudge-title em{color:var(--gold3); font-style:italic;}
.upgrade-nudge-sub{font-size:.75rem; color:rgba(255,255,255,.4); margin-bottom:.9rem;}
.upgrade-cta{
  background:linear-gradient(135deg,rgba(184,132,42,.1), rgba(184,132,42,.05));
  border:1px solid rgba(184,132,42,.25); border-radius:18px;
  padding:1.5rem; margin-bottom:1.1rem; animation:scaleIn .8s ease 1.9s both;
}
.upgrade-cta-eye{font-size:.6rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--gold2); margin-bottom:.45rem;}
.upgrade-cta-title{font-family:var(--serif); font-size:1.2rem; font-weight:400; line-height:1.3; margin-bottom:.45rem;}
.upgrade-cta-title em{font-style:italic; color:var(--gold3);}
.upgrade-cta-sub{font-size:.77rem; color:rgba(255,255,255,.38); line-height:1.5; margin-bottom:1rem;}
.save-card{
  background:rgba(255,255,255,.04); border:1.5px solid var(--gold);
  border-radius:16px; padding:1.25rem; margin-bottom:1rem;
  animation:scaleIn .8s ease 2s both;
}
.save-lbl{font-size:.6rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--gold2); margin-bottom:.4rem;}
.save-desc{font-size:.77rem; color:rgba(255,255,255,.38); line-height:1.5; margin-bottom:.85rem;}
.btn-save{
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  width:100%; padding:.92rem;
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  color:var(--dark); border:none; border-radius:12px;
  font-size:.93rem; font-weight:700; cursor:pointer; text-decoration:none;
  box-shadow:0 4px 16px rgba(184,132,42,.4); transition:opacity .2s; margin-bottom:.45rem;
}
.btn-save:active{opacity:.85;}
.save-note{font-size:.65rem; color:rgba(255,255,255,.25); text-align:center;}
.btn-alt{
  display:flex; align-items:center; justify-content:center; gap:.45rem;
  width:100%; padding:.82rem; margin-bottom:.65rem;
  background:transparent; color:rgba(255,255,255,.3);
  border:1px solid rgba(255,255,255,.09); border-radius:12px;
  font-size:.85rem; font-weight:500; cursor:pointer; transition:all .15s;
}
.btn-alt:hover{border-color:rgba(255,255,255,.2); color:rgba(255,255,255,.55);}
.reveal-note{font-size:.72rem; color:rgba(255,255,255,.18); font-style:italic; line-height:1.6; margin-top:.5rem;}

/* ═══ SCREEN 8: UPGRADE ═══ */
.upgrade-inner{max-width:440px; width:100%; margin:0 auto;}
.upgrade-logo-txt{font-family:var(--serif); font-size:.85rem; color:rgba(255,255,255,.25); letter-spacing:.12em; text-transform:uppercase; margin-bottom:1.5rem;}
.upgrade-big-icon{font-size:2.5rem; margin-bottom:1rem;}
.upgrade-title{font-family:var(--serif); font-size:clamp(1.5rem,5vw,2.1rem); font-weight:400; line-height:1.2; margin-bottom:.65rem;}
.upgrade-title em{font-style:italic; color:var(--gold3);}
.upgrade-sub-txt{font-size:.85rem; color:rgba(255,255,255,.38); line-height:1.65; font-weight:300; margin-bottom:1.5rem;}
.upgrade-options{display:flex; flex-direction:column; gap:.6rem; margin-bottom:1.25rem;}
.upgrade-opt{
  display:flex; align-items:center; gap:.7rem; text-align:left;
  background:rgba(255,255,255,.04); border:1px solid rgba(184,132,42,.18);
  border-radius:14px; padding:.95rem; cursor:pointer; transition:all .2s;
}
.upgrade-opt:active{transform:scale(.98);}
.upgrade-opt:hover{border-color:var(--gold); background:rgba(184,132,42,.09);}
.upgrade-opt-icon{font-size:1.25rem; flex-shrink:0;}
.upgrade-opt-body{display:flex; flex-direction:column; gap:.12rem;}
.upgrade-opt-name{font-size:.85rem; font-weight:600; color:var(--p);}
.upgrade-opt-desc{font-size:.7rem; color:rgba(255,255,255,.38); line-height:1.4;}
.upgrade-opt-price{font-size:.88rem; font-weight:700; color:var(--gold3); white-space:nowrap; margin-left:auto; padding-left:.45rem; flex-shrink:0;}

/* ═══ RESPONSIVE ═══ */
@media (max-width:420px){
  .splash-h1{font-size:1.6rem;}
  .q-text{font-size:1rem;}
  .btn-rec{width:68px; height:68px;}
  .btn-rec-inner{width:38px; height:38px;}
  .lang-select-btn{padding:.9rem 1rem;}
}
@media (min-width:900px){
  .rec-content{padding-top:1.6rem;}
  .cam-wrap{max-width:640px; margin-left:auto; margin-right:auto;}
  .playback-wrap{max-width:640px; margin-left:auto; margin-right:auto;}
}

/* ── Lang label trilingual: heading rotates (see LANG_ROTATE in app.js) ── */

/* ── The veil: video hidden until frames paint (V7 ghost countermeasure) ── */
#vid-output.veiled{opacity:0;}

/* ── Narration toggle (intro) ── */
#btn-voice.on{color:#e9c46a;}

/* ── Save card prominence (V6) ── */
.save-card{border:1px solid rgba(184,132,42,.45); box-shadow:0 0 24px rgba(184,132,42,.10);}
.save-desc strong{color:#e9c46a;}
body.paid .save-card{border-color:rgba(233,196,106,.7); box-shadow:0 0 30px rgba(184,132,42,.22);}
#btn-buy-code{width:100%; margin-bottom:1rem;}

/* ── Premiere title ── */
.premiere-title{font-family:var(--serif); font-style:italic; color:#e9c46a; font-size:1.05rem; margin-bottom:.7rem; animation:fadeUp .8s ease both;}

/* ── Premiere stage (film engine live view) ── */
.premiere-stage{width:min(92vw,560px); margin:0 auto 1.3rem; border:1px solid rgba(184,132,42,.35); border-radius:14px; overflow:hidden;
  box-shadow:0 10px 40px rgba(0,0,0,.6), 0 0 30px rgba(184,132,42,.12); animation:fadeUp .8s ease both;}
.premiere-stage canvas{display:block; width:100%; height:auto;}
#s-processing.premiere .ldr{transform:scale(.55); margin:-1.5rem auto -1.1rem;}
#s-processing.premiere .ldr-word{font-size:.85rem;}
#s-processing.premiere .proc-title{font-size:1.3rem;}

/* ── Flag images (downloaded PNGs) ── */
.lsb-flag img{display:block; width:100%; height:auto;}

/* ── Share row ── */
.share-wrap{margin-bottom:1.1rem; animation:fadeUp .8s ease 1.8s both;}
.share-lbl{font-size:.6rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.3); margin-bottom:.65rem;}
.share-btns{display:flex; gap:.7rem; justify-content:center;}
.share-btn{
  width:48px; height:48px; border-radius:50%;
  border:1px solid rgba(184,132,42,.35); background:rgba(184,132,42,.08);
  color:var(--gold3); cursor:pointer; transition:all .2s;
  display:flex; align-items:center; justify-content:center;
}
.share-btn svg{width:22px; height:22px;}
.share-btn:hover{background:rgba(184,132,42,.2); border-color:var(--gold); transform:translateY(-2px);}
.share-btn:active{transform:scale(.92);}

/* ── Share gate modal ── */
.share-gate{
  position:fixed; inset:0; z-index:200;
  background:rgba(10,8,6,.85);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center; padding:1.5rem;
  animation:fadeIn .3s ease;
}
.share-gate-card{
  max-width:380px; width:100%; text-align:center;
  background:var(--dark3); border:1px solid rgba(184,132,42,.3);
  border-radius:20px; padding:2rem 1.5rem;
  box-shadow:0 20px 60px rgba(0,0,0,.6);
  animation:scaleIn .35s ease;
}
.share-gate-icon{font-size:2rem; display:block; margin-bottom:.9rem;}
.share-gate-title{font-family:var(--serif); font-size:1.25rem; font-weight:400; line-height:1.35; margin-bottom:.6rem;}
.share-gate-title em{font-style:italic; color:var(--gold3);}
.share-gate-sub{font-size:.8rem; color:rgba(255,255,255,.45); line-height:1.6; margin-bottom:1.2rem;}

/* ── Swipe feedback toast + name validation ── */
.swipe-toast{position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); background:rgba(10,8,6,.9); color:#f0cc80; border:1px solid rgba(184,132,42,.35); padding:.5rem 1.1rem; border-radius:20px; font-family:var(--serif); font-size:.85rem; opacity:0; pointer-events:none; transition:opacity .3s; z-index:300;}
.swipe-toast.on{opacity:1;}
.finp-error{border-color:#9a3a2a !important; animation:shake .35s ease;}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

/* ── Theme description line ── */
.theme-desc{margin-top:.6rem; font-size:.72rem; color:rgba(255,255,255,.35); font-style:italic; line-height:1.5;}

/* ── Larger text mode (for elders) ── */
body.bigtext .q-text{font-size:clamp(1.35rem,4.8vw,1.75rem);}
body.bigtext .q-hint{font-size:.95rem;}
body.bigtext .guide-tip-txt{font-size:1rem;}
body.bigtext .controls-sub{font-size:.8rem;}

/* ── Unlock code card ── */
.unlock-card{background:rgba(255,255,255,.04); border:1px solid rgba(184,132,42,.2); border-radius:14px; padding:1rem; margin-bottom:1rem; text-align:left;}
.unlock-lbl{font-size:.62rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--gold2); margin-bottom:.6rem;}
.unlock-row{display:flex; gap:.5rem;}
.unlock-row .finp{flex:1; min-width:0;}
.btn-unlock{padding:.6rem 1rem; border:none; border-radius:10px; background:linear-gradient(135deg,var(--gold),var(--gold2)); color:var(--dark); font-weight:700; font-size:.85rem; cursor:pointer; flex-shrink:0;}
.btn-unlock:disabled{opacity:.5; cursor:default;}
/* Arrived holding a code: the offer is dimmed, not removed. */
body.came-with-code .unlock-card #btn-buy-code{
  background:none; color:rgba(255,255,255,.34);
  border:1px solid rgba(255,255,255,.14); box-shadow:none; font-weight:500;
}
body.came-with-code .unlock-card .offer-price,
body.came-with-code .unlock-card .offer-list{opacity:.4;}
body.came-with-code .unlock-lbl-second{color:var(--gold2);}
.unlock-note{font-size:.68rem; color:rgba(255,255,255,.3); margin-top:.5rem;}

/* ── Paid state: watermarks & preview gates removed ── */
body.paid .wm-overlay, body.paid .reveal-wm{display:none !important;}
/* Paid: unlock auto-produces the film — hide the reveal video + controls (and any leftover upsell) */
body.paid .reveal-player-wrap, body.paid .player-controls, body.paid .upgrade-cta{display:none !important;}
body.paid .blur-overlay, body.paid .reveal-blur{display:none !important;}
body.paid .preview-notice, body.paid .upgrade-nudge{display:none !important;}

/* ── Reveal video is tappable (opens unlock) ── */
#vid-output{cursor:pointer;}

/* ── Loader animation (Claude Design, transplanted from loader-en.html) ── */
.ldr{position:relative;width:150px;height:150px;margin:0 auto 2rem}
.ldr-ring{position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg, transparent 0%, transparent 62%, #b8842a 82%, #f0cc80 96%, transparent 100%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));
  animation:ldr-spin 1.8s linear infinite}
.ldr-ring2{position:absolute;inset:11px;border-radius:50%;
  background:conic-gradient(from 180deg, transparent 0%, transparent 72%, rgba(184,132,42,.55) 92%, transparent 100%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1px));
  animation:ldr-spin 2.6s linear infinite reverse}
.ldr-glow{position:absolute;inset:26px;border-radius:50%;background:rgba(184,132,42,.09);
  box-shadow:0 0 34px rgba(184,132,42,.28), inset 0 0 22px rgba(184,132,42,.14);
  animation:ldr-breathe 2.4s ease-in-out infinite}
.ldr-icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.ldr-icon img{width:64px;height:64px;border-radius:16px;box-shadow:0 4px 20px rgba(0,0,0,.55);animation:ldr-breathe 2.4s ease-in-out infinite}
.ldr-dust{position:absolute;bottom:6px;width:3px;height:3px;border-radius:50%;background:#f0cc80;opacity:0;box-shadow:0 0 8px 2px rgba(240,204,128,.55);animation:ldr-rise 3.2s ease-in infinite}
.ldr-dust:nth-child(1){left:22%;animation-delay:0s}
.ldr-dust:nth-child(2){left:50%;animation-delay:1.1s}
.ldr-dust:nth-child(3){left:76%;animation-delay:2.2s}
@keyframes ldr-spin{to{transform:rotate(360deg)}}
@keyframes ldr-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
@keyframes ldr-rise{0%{opacity:0;transform:translateY(0) scale(1)}12%{opacity:.85}100%{opacity:0;transform:translateY(-120px) scale(.4)}}
.ldr-word{font-family:'Playfair Display',Georgia,serif;font-size:1.05rem;letter-spacing:.5em;text-transform:uppercase;padding-left:.5em;text-align:center;
  background:linear-gradient(90deg,#7a6248 0%,#f0cc80 45%,#fde9b0 50%,#f0cc80 55%,#7a6248 100%);
  background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:ldr-shine 2.8s linear infinite;margin-bottom:.9rem}
@keyframes ldr-shine{to{background-position:-200% center}}

/* ── Reveal end card: "Recorded with love" after the last answer ── */
.reveal-endcard{position:absolute;inset:0;z-index:8;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;
  background:#0d0a07;opacity:0;pointer-events:none;transition:opacity 1.2s ease}
.reveal-endcard.on{opacity:1}
.endcard-main{font-family:'Playfair Display',Georgia,serif;font-size:clamp(1.3rem,5vw,2rem);color:#e9c46a}
.endcard-sub{font-size:.62rem;letter-spacing:.4em;text-transform:uppercase;color:rgba(255,255,255,.35);padding-left:.4em}

/* ── Read-aloud tip on the record screen ── */
.q-tip{margin-top:.45rem; font-size:.68rem; color:rgba(233,196,106,.5);}

/* ── Question overlay at the start of each reveal clip ── */
.reveal-q{position:absolute; left:0; right:0; bottom:11%; z-index:7; padding:0 1.2rem; text-align:center;
  font-family:'Playfair Display',Georgia,serif; font-style:italic; font-size:clamp(.85rem,3.4vw,1.15rem);
  color:#e9c46a; text-shadow:0 2px 10px rgba(0,0,0,.85); opacity:0; pointer-events:none; transition:opacity .8s ease;}
.reveal-q.on{opacity:1}

/* ═══════════ THE RITUAL — pre-record ceremony & celebration ═══════════ */
.ritual{
  position:fixed; inset:0; z-index:400;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1.8rem; padding:2rem 1.6rem; text-align:center;
  background:rgba(10,8,6,.95);
  opacity:0; pointer-events:none;
  transition:opacity .9s ease, background .9s ease;
}
.ritual.on{opacity:1;}
.ritual.counting{background:rgba(10,8,6,.5);} /* veil lifts so they can see themselves */
.ritual-line{
  font-family:var(--serif); color:#f0cc80;
  font-size:1.32rem; line-height:1.6; max-width:19rem;
  opacity:0; transform:translateY(12px);
  transition:opacity 1.2s ease, transform 1.2s ease;
}
.ritual-line.show{opacity:1; transform:none;}
.ritual-count{
  font-family:var(--serif); color:rgba(240,204,128,.92);
  font-size:3.8rem; line-height:1; font-weight:400;
  opacity:0; transform:scale(.8);
  transition:opacity .5s ease, transform .5s ease;
}
.ritual-count.show{opacity:1; transform:scale(1);}
@media(min-width:600px){
  .ritual-line{font-size:1.6rem; max-width:25rem;}
  .ritual-count{font-size:4.6rem;}
}
@media(prefers-reduced-motion:reduce){
  .ritual, .ritual-line, .ritual-count{transition-duration:.2s;}
  .ritual-line, .ritual-count{transform:none;}
}

/* ═══════════ V8: closing invitation, produced state, soft cue ═══════════ */

/* the ritual overlay, transparent enough to sit over a live camera */
.ritual.soft{background:rgba(10,8,6,.28);}

/* "I've said it all" — the skip for the closing invitation */
.btn-skip-closing{
  display:block; margin:.5rem auto 1.5rem; padding:.9rem 2rem;
  border:1.5px solid rgba(184,132,42,.45); border-radius:999px;
  background:transparent; color:rgba(255,255,255,.7);
  font-family:var(--serif); font-size:1.05rem; font-style:italic;
  cursor:pointer; transition:all .2s;
}
.btn-skip-closing:hover{border-color:var(--gold); color:var(--gold3);}
#rec-prog-closing{font-family:var(--serif); font-style:italic; color:var(--gold3);}

/* once a film exists, the produce card gives way to gratitude */
body.produced .save-card{display:none !important;}
.thanks-card{
  background:rgba(184,132,42,.07); border:1px solid rgba(184,132,42,.24);
  border-radius:16px; padding:1.4rem 1.2rem; margin-bottom:1.1rem; text-align:center;
  animation:fadeUp .9s ease both;
}
.thanks-title{font-family:var(--serif); font-size:1.35rem; color:var(--gold3); margin-bottom:.5rem;}
.thanks-body{font-family:var(--serif); font-size:1rem; color:rgba(255,255,255,.62); line-height:1.6; margin-bottom:1rem;}
.thanks-offer{font-size:.82rem; font-style:italic; color:rgba(255,255,255,.4); line-height:1.6; margin-bottom:1rem;}
.btn-thanks-more{
  padding:.6rem 1.2rem; border:1px solid rgba(184,132,42,.4); border-radius:10px;
  background:rgba(184,132,42,.1); color:var(--gold3);
  font-size:.84rem; font-weight:600; cursor:pointer; transition:all .2s;
}
.btn-thanks-more:hover{background:rgba(184,132,42,.2); border-color:var(--gold);}

/* Already paid: never show them a price or a code box again */
body.paid .unlock-card{display:none !important;}

/* Chapter captured — record is locked until they choose Retake */
.btn-rec.locked{opacity:.35; cursor:not-allowed; filter:grayscale(.6);}
.btn-rec:disabled{cursor:not-allowed;}

/* ═══════════════════════════════════════════════════════════
   V12 — 30 July 2026
   ═══════════════════════════════════════════════════════════ */

/* ── The meta line ran together ──
   .reveal-meta is flex with space-between, but with no gap the name and the
   duration touched as soon as both were long enough to fill the row:
   "test Cam 2's Story5 chapters · 0:31". */
.reveal-meta{gap:.85rem;}
.reveal-meta-name{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.reveal-meta-dur{white-space:nowrap; flex-shrink:0;}

/* ── A bigger player ──
   The film is the whole point of this screen, and it was being held inside a
   480px reading column sized for paragraphs. On a phone it now stands a little
   taller; on anything wider it steps outside the column entirely. */
#vid-output{min-height:260px;}
@media (min-width:700px){
  .reveal-player-wrap{
    width:620px;
    margin-left:-70px;   /* 480px column + 70 each side = 620 */
    margin-right:-70px;
  }
}

/* ── Back-gesture guard ──
   Belt and braces with the history trap in app.js: this stops the horizontal
   rubber-band that triggers swipe-back on some Android browsers. */
html, body{overscroll-behavior-x:none;}

/* ── Pass Legado on ──
   Deliberately quieter than the upgrade CTA. This is an invitation at the end
   of something emotional, not a sales panel. */
.pass-on{
  background:rgba(184,132,42,.05); border:1px solid rgba(184,132,42,.18);
  border-radius:16px; padding:1.2rem 1.1rem; margin-bottom:1.1rem; text-align:center;
  animation:fadeUp .9s ease both;
}
.pass-on-title{font-family:var(--serif); font-size:1.05rem; color:rgba(255,255,255,.78); line-height:1.5; margin-bottom:.45rem;}
.pass-on-title em{color:var(--gold3); font-style:italic;}
.pass-on-sub{font-size:.84rem; color:rgba(255,255,255,.42); line-height:1.6; margin-bottom:.95rem;}
.btn-pass-on{
  padding:.68rem 1.25rem; border:1px solid rgba(184,132,42,.4); border-radius:10px;
  background:rgba(184,132,42,.1); color:var(--gold3);
  font-size:.86rem; font-weight:600; cursor:pointer; transition:all .2s;
}
.btn-pass-on:hover{background:rgba(184,132,42,.2); border-color:var(--gold);}
.btn-pass-on:active{transform:scale(.97);}

/* ═══════════════════════════════════════════════
   V16 — UPGRADE SCREEN
   Appended at the end of style.css. Only new class names; nothing
   above is touched or overridden.

   The old .upgrade-options / .upgrade-opt rules can stay where they
   are — they simply have nothing left to style.
   ═══════════════════════════════════════════════ */

/* The price. Serif, because it is a keepsake, not a checkout. */
.offer-price{
  font-family:var(--serif); font-size:2rem; line-height:1;
  color:var(--gold3); margin-bottom:.15rem;
}
.offer-terms{font-size:.72rem; color:rgba(255,255,255,.34); line-height:1.5; margin-bottom:1rem;}

/* What they actually get. Every line is a promise, not a spec. */
.offer-list{display:flex; flex-direction:column; gap:.6rem; margin-bottom:1.15rem;}
.offer-list p{font-size:.76rem; line-height:1.6; color:rgba(255,255,255,.62);}
.offer-list span{color:var(--gold); margin-right:.35rem;}

.unlock-card .btn-primary{max-width:none; padding:.85rem; font-size:.95rem;}
.unlock-lbl-second{margin-top:1.25rem;}

/* For anyone who cannot pay. Quiet on purpose — a kindness offered,
   not an offer being marketed. */
.access-note{
  font-size:.72rem; line-height:1.6; font-style:italic;
  color:rgba(255,255,255,.3); text-align:left;
  margin:0 0 1.6rem; padding-left:.15rem;
}

.section-rule{height:1px; background:rgba(255,255,255,.09); margin-bottom:1.25rem;}

.quiet-lbl{
  font-size:.6rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.3); text-align:left; margin-bottom:.75rem;
}

/* The song. Deliberately lighter than the product above it — an
   accessory must never compete with the thing being sold. */
.addon-card{
  border:1px solid rgba(255,255,255,.1); border-radius:14px;
  padding:1rem; text-align:left; margin-bottom:1.4rem;
}
.addon-head{display:flex; align-items:baseline; justify-content:space-between; gap:.5rem; margin-bottom:.45rem;}
.addon-name{font-family:var(--serif); font-size:1rem;}
.addon-price{font-size:.8rem; color:var(--gold3); white-space:nowrap;}
.addon-desc{font-size:.74rem; line-height:1.6; color:rgba(255,255,255,.42); margin-bottom:.75rem;}
.addon-by{font-size:.68rem; color:rgba(255,255,255,.26); margin-bottom:.9rem;}

.btn-quiet{
  display:inline-block; padding:.55rem 1rem;
  border:1px solid rgba(184,132,42,.45); border-radius:10px;
  font-size:.76rem; color:var(--gold2); text-decoration:none;
  transition:border-color .2s, color .2s;
}
.btn-quiet:hover{border-color:var(--gold2); color:var(--gold3);}

/* The in-person door. One sentence, no button, no price. */
.inperson-line{
  font-size:.72rem; line-height:1.65; color:rgba(255,255,255,.26);
  text-align:left; margin:0 0 1.5rem;
}
.inperson-line a{color:var(--gold); text-decoration:none; border-bottom:1px solid rgba(184,132,42,.4);}
.inperson-line a:hover{color:var(--gold2);}

/* ── Before and after payment ──
   Nobody who has already paid should be shown a price, a list of what
   they would get, or an offer of help affording it. Once a code is
   accepted, the selling disappears and only thanks remain. */
.paid-only{display:none;}
body.paid .paid-only{display:block;}
body.paid .not-paid{display:none !important;}

.thanks-note{margin-bottom:2rem;}
.thanks-note p{
  font-size:.82rem; line-height:1.75; color:rgba(255,255,255,.45);
  margin-bottom:.9rem; text-align:left;
}
.thanks-note p:first-child{color:var(--gold3); font-family:var(--serif); font-size:.95rem;}
.thanks-note p:last-child{margin-bottom:0;}

/* ── A bigger premiere on a desktop ──
   The 620px step already existed for tablets. A 27-inch iMac was still
   watching a film in a column sized for paragraphs. Negative margins
   rather than a transform, because .reveal-player-wrap already carries
   translateZ(0) for its own compositing. */
@media (min-width:1000px){
  .reveal-player-wrap{
    width:820px;
    margin-left:-170px;   /* 480px column + 170 each side = 820 */
    margin-right:-170px;
  }
  #vid-output{min-height:400px;}
}
@media (min-width:1360px){
  .reveal-player-wrap{
    width:980px;
    margin-left:-250px;   /* 480 + 250 each side = 980 */
    margin-right:-250px;
  }
  #vid-output{min-height:480px;}
}

/* ═══════════════════════════════════════════════
   V16 — THE OPENING (Screen 0)

   Two seconds before the language screen. Converted from the designer's
   React sting to plain CSS: same geometry, same timings, same easings,
   none of the runtime.

   Only transform, opacity and stroke-dashoffset are animated. Nothing
   here forces a repaint, which matters because IndexedDB is being read
   off disk at the same moment.
   ═══════════════════════════════════════════════ */
#s-boot{
  position:fixed; inset:0; z-index:500;
  background:var(--dark);
  display:flex; align-items:center; justify-content:center;
  transition:opacity .45s ease;
}
#s-boot svg{width:min(46vw,46vh,260px); height:auto;}

/* app.js adds .out — fade away and stop swallowing taps immediately */
#s-boot.out{opacity:0; pointer-events:none;}

.boot-drift{transform-origin:540px 540px; animation:boot-drift 2s linear both;}
.boot-card {transform-origin:540px 540px; animation:boot-card 2s cubic-bezier(.215,.61,.355,1) both;}
.boot-cover{animation:boot-wipe 2s cubic-bezier(.645,.045,.355,1) both;}
.boot-rule {transform-origin:540px 759px; animation:boot-pop 2s cubic-bezier(.34,1.56,.64,1) both;}
.boot-ring {animation:boot-travel 2s cubic-bezier(.645,.045,.355,1) both,
                      boot-fade   2s linear both;}

@keyframes boot-card  {0%{opacity:0; transform:scale(.93)} 25%,100%{opacity:1; transform:scale(1)}}
@keyframes boot-drift {0%,25%{transform:scale(1)} 100%{transform:scale(1.008)}}
@keyframes boot-wipe  {0%,9%{transform:translateY(0)} 41%,100%{transform:translateY(296px)}}
@keyframes boot-travel{0%,14%{stroke-dashoffset:0} 63%,100%{stroke-dashoffset:-3010}}
@keyframes boot-fade  {0%,12%{opacity:0} 20%,56%{opacity:1} 73%,100%{opacity:0}}
@keyframes boot-pop   {0%,57%{transform:scaleX(0)} 81%,100%{transform:scaleX(1)}}

/* Switched off, it must still read as a finished title card — the mark
   whole, the underline drawn, the tracing line gone. */
@media (prefers-reduced-motion: reduce){
  .boot-drift, .boot-card, .boot-cover, .boot-rule, .boot-ring{animation:none !important;}
  .boot-cover{transform:translateY(296px);}
  .boot-ring {opacity:0;}
}

/* ── The premiere, at desktop size ──
   V16. .premiere-stage was capped at min(92vw,560px) while the finished
   film now plays at 820–980px. So the live premiere — the moment the
   family actually watches together — was the smallest picture in the app.
   Same breakpoints as .reveal-player-wrap, so the two match. */
@media (min-width:1000px){
  .premiere-stage{width:min(92vw,820px);}
}
@media (min-width:1360px){
  .premiere-stage{width:min(92vw,980px);}
}