/* ═══════════════════════════════════════════════
   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;}
html{-webkit-text-size-adjust:100%;}
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;}
.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:40px; height:27px; border-radius:4px; overflow:hidden;
  box-shadow:0 1px 5px rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.12);
}
.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:345px;}
.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);}
.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;}
.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;}
.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;}

/* ═══ 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;}
.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);}
.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) ── */

/* ── 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:100%; object-fit:cover;}

/* ── 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;}
.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;}
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}