/* ============================================================
   Adel & Amirah — wedding e-invite
   Aesthetic: refined Malay-wedding luxury · walnut + cream + gold
   ============================================================ */

:root{
  --walnut:        #4f3f2c;
  --walnut-deep:   #3a2d1f;
  --cover-bg:      #574631;
  --cream:         #f4ecdd;
  --cream-soft:    #faf5ec;
  --paper:         #f7f1e6;
  --ink:           #3c2f21;
  --ink-soft:      #6b5944;
  --gold:          #c2a163;
  --gold-deep:     #a9854a;
  --gold-soft:     #d8bd8a;
  --maroon:        #7a3a2d;
  --line:          rgba(60,47,33,.16);

  --serif: "Cormorant Garamond", Georgia, serif;
  --body:  "EB Garamond", Georgia, serif;
  --arab:  "Amiri", serif;

  --ease: cubic-bezier(.22,.61,.36,1);
  --sheet-ease: cubic-bezier(.16,.84,.34,1);

  --safe-b: env(safe-area-inset-bottom, 0px);
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
[hidden]{ display:none !important; }   /* ensure hidden always hides (e.g. .form has display:flex) */
html,body{ margin:0; height:100%; }
body{
  font-family:var(--body);
  background:#b8ab9c;              /* fills the area around the vertical frame on wide screens */
  color:var(--cream);
  overflow:hidden;
  position:fixed; inset:0;          /* lock the viewport, panels & scroll-area handle scrolling */
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
button{ font-family:inherit; cursor:pointer; border:0; background:none; color:inherit; }
a{ color:inherit; text-decoration:none; }
svg{ width:100%; height:100%; display:block; }

/* ============================= VERTICAL FRAME =============================
   Keeps the whole experience portrait (9:16) on every device. On wide screens
   it becomes a centred column; #b8ab9c (body) shows on the sides. */
.frame{
  position:fixed; top:0; bottom:0; left:50%; transform:translateX(-50%);
  width:min(100vw, 56.25vh);       /* 56.25vh = 9/16 of the height */
  overflow:hidden; background:#b8ab9c;
  box-shadow:0 0 60px rgba(0,0,0,.28);
}
@supports (height:100dvh){ .frame{ width:min(100vw, 56.25dvh); } }

/* ============================= VIDEO ============================= */
.video-wrap{ position:absolute; inset:0; z-index:0; background:#b8ab9c; }
.video-wrap video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
}
.video-veil{ /* subtle — keeps the video clean, just enough contrast for the controls + nav */
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to bottom, rgba(28,20,12,.30) 0%, transparent 15%, transparent 72%, rgba(28,20,12,.46) 100%);
}

@keyframes rise{ to{ opacity:1; transform:none; } }

/* ============================= INVITE =============================
   No cover any more — this IS the landing. Starts transparent purely
   so the first paint fades in rather than snapping. */
.invite{
  position:absolute; inset:0; z-index:10;
  opacity:0;
  transition:opacity .6s var(--ease);
}
.invite.is-shown{ opacity:1; }

/* ============================= TAB BAR ============================= */
.tabbar{
  position:absolute; left:0; right:0; bottom:0; z-index:20;
  display:flex; justify-content:space-around; align-items:flex-end;
  padding:4px 8px calc(5px + var(--safe-b));
  background:linear-gradient(to top, rgba(58,45,31,.94) 38%, rgba(58,45,31,.0));
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.tabbar::before{
  content:""; position:absolute; top:0; left:14%; right:14%; height:1px;
  background:linear-gradient(90deg,transparent,rgba(216,189,138,.5),transparent);
}
.tab{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:3px 2px; color:var(--cream); opacity:.86;
  transition:opacity .2s, transform .2s;
}
.tab:active{ transform:translateY(1px); }
.tab-ico{ width:21px; height:21px; }
.tab-ico svg{ fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.tab-label{ font-family:var(--serif); font-size:10px; letter-spacing:.14em; text-transform:uppercase; }

.tab-center{
  flex:0 0 auto; transform:translateY(-14px); opacity:1;
}
.tab-center .tab-ico{
  width:50px; height:50px; padding:14px;
  border-radius:50%;
  background:radial-gradient(circle at 50% 35%, #6a5740, #463623);
  border:1.5px solid var(--gold-soft);
  box-shadow:0 6px 18px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.12);
  color:var(--gold-soft);
}
.tab-center .tab-ico svg{ stroke-width:1.4; }
.tab-center .tab-label{ margin-top:3px; color:var(--gold-soft); }
.tab-center:active{ transform:translateY(-12px); }

/* music toggle */
.music-toggle{
  position:absolute; top:calc(env(safe-area-inset-top,0px) + 14px); right:16px; z-index:25;
  width:42px; height:42px; padding:10px; border-radius:50%;
  background:rgba(58,45,31,.55); border:1px solid rgba(216,189,138,.4);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  color:var(--cream); transition:transform .2s;
}
.music-toggle:active{ transform:scale(.92); }
.music-toggle svg{ fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.music-toggle .m-off{ display:none; }
.music-toggle.muted .m-on{ display:none; }
.music-toggle.muted .m-off{ display:block; }

/* language toggle (always visible, top-left) */
.lang-toggle{
  position:absolute; top:calc(env(safe-area-inset-top,0px) + 14px); left:16px; z-index:55;
  display:flex; gap:2px; padding:3px; border-radius:999px;
  background:rgba(58,45,31,.55); border:1px solid rgba(216,189,138,.4);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.lang-toggle button{
  font-family:var(--serif); font-size:13px; letter-spacing:.1em; font-weight:600;
  color:var(--cream); padding:6px 12px; border-radius:999px; line-height:1;
  transition:background .25s, color .25s;
}
.lang-toggle button.active{ background:var(--gold-soft); color:#3a2d1a; }

/* ============================= SCRIM + SHEETS ============================= */
.scrim{
  position:absolute; inset:0; z-index:60;
  background:rgba(26,18,10,.55);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  opacity:0; transition:opacity .35s var(--ease);
}
.scrim.show{ opacity:1; }

.sheet{
  position:absolute; left:0; right:0; bottom:0; z-index:70;
  max-height:90%;
  background:
    linear-gradient(180deg, var(--cream-soft), var(--paper));
  color:var(--ink);
  border-radius:26px 26px 0 0;
  box-shadow:0 -16px 50px rgba(0,0,0,.4);
  transform:translateY(101%);
  transition:transform .5s var(--sheet-ease);
  display:flex; flex-direction:column;
  overflow:hidden;
}
.sheet::before{ /* gold hairline at top */
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,transparent,var(--gold),var(--gold-deep),var(--gold),transparent);
}
.sheet.open{ transform:translateY(0); }

.sheet-grip{ width:42px; height:4px; border-radius:99px; background:var(--line); margin:11px auto 0; flex:none; }
.sheet-close{
  position:absolute; top:12px; right:14px; z-index:2;
  width:34px; height:34px; border-radius:50%; font-size:22px; line-height:1;
  color:var(--ink-soft); background:rgba(60,47,33,.06);
  display:grid; place-items:center;
}
.sheet-body{
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:18px 26px calc(34px + var(--safe-b));
  scrollbar-width:thin;
}

.sheet-kicker{
  text-align:center; font-family:var(--serif); text-transform:uppercase;
  letter-spacing:.4em; font-size:12px; color:var(--gold-deep); margin:6px 0 2px;
}
.sheet-title{
  text-align:center; font-family:var(--serif); font-weight:600;
  font-size:34px; margin:0 0 14px; color:var(--ink);
}
.sheet-note{ text-align:center; font-size:15.5px; line-height:1.6; color:var(--ink-soft); margin:0 0 18px; }
.sheet-note.center{ max-width:34ch; margin-inline:auto; }

/* ---- buttons ---- */
.btn-stack{ display:flex; flex-direction:column; gap:11px; margin-top:18px; }
.lbtn{
  display:flex; align-items:center; justify-content:center; gap:11px;
  padding:15px 18px; border-radius:14px;
  border:1px solid var(--line);
  background:#fff; color:var(--ink);
  font-family:var(--serif); font-size:17px; letter-spacing:.04em;
  transition:transform .15s, box-shadow .2s, background .2s;
}
.lbtn svg{ width:21px; height:21px; flex:none; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.lbtn:active{ transform:scale(.98); }
.lbtn.primary{
  background:linear-gradient(180deg,var(--walnut),var(--walnut-deep));
  color:var(--cream); border-color:transparent;
  box-shadow:0 8px 20px rgba(79,63,44,.3);
}

.addr{ text-align:center; font-size:16.5px; line-height:1.6; color:var(--ink-soft); margin:0 0 18px; }
.map-frame{
  border-radius:16px; overflow:hidden; border:1px solid var(--line);
  height:190px; background:#e9e2d4;
}
.map-frame iframe{ width:100%; height:100%; border:0; }

/* ---- contacts ---- */
.contact-list{ list-style:none; padding:0; margin:6px 0 0; display:flex; flex-direction:column; gap:11px; }
.contact{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:14px 16px; border-radius:16px;
  background:#fff; border:1px solid var(--line);
}
.c-meta{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.c-name{ font-family:var(--serif); font-size:21px; font-weight:600; line-height:1.1; }
.c-rel{ font-size:13px; color:var(--ink-soft); }
.c-acts{ display:flex; gap:9px; flex:none; }
.cbtn{ width:44px; height:44px; border-radius:50%; display:grid; place-items:center; transition:transform .15s; }
.cbtn:active{ transform:scale(.92); }
.cbtn svg{ width:21px; height:21px; fill:none; stroke:#fff; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.cbtn.call{ background:linear-gradient(160deg,#8a6b3f,#6f5331); }
.cbtn.wa{ background:linear-gradient(160deg,#3aae5a,#2b9248); }
.cbtn.wa svg{ stroke-width:1.4; }

/* ---- forms ---- */
.form{ display:flex; flex-direction:column; gap:15px; }
.field{ display:flex; flex-direction:column; gap:6px; }
.field > span{ font-size:14px; letter-spacing:.04em; color:var(--ink-soft); font-weight:500; }
.field em{ font-style:italic; opacity:.7; }
.field input, .field textarea{
  font-family:var(--body); font-size:17px; color:var(--ink);
  padding:13px 15px; border-radius:12px;
  border:1px solid var(--line); background:#fff; width:100%;
  transition:border-color .2s, box-shadow .2s;
}
.field input:focus, .field textarea:focus{
  outline:none; border-color:var(--gold-deep);
  box-shadow:0 0 0 3px rgba(194,161,99,.18);
}
.field textarea{ resize:vertical; min-height:54px; }

.submit-btn{
  margin-top:4px; padding:16px; border-radius:14px;
  background:linear-gradient(180deg,var(--gold),var(--gold-deep));
  color:#3a2d1a; font-family:var(--serif); font-weight:600; font-size:18px;
  letter-spacing:.06em; box-shadow:0 8px 20px rgba(169,133,74,.3);
  transition:transform .15s, opacity .2s;
}
.submit-btn:active{ transform:scale(.98); }
.submit-btn:disabled{ opacity:.6; }
.form-msg{ text-align:center; font-size:14px; min-height:1em; margin:2px 0 0; color:var(--maroon); }
.form-msg.ok{ color:#2b7a44; }

.form-done{ text-align:center; padding:24px 0 8px; animation:rise .6s var(--ease); }
.done-mark{ width:64px; height:64px; margin:0 auto 14px; border-radius:50%;
  background:linear-gradient(160deg,var(--gold),var(--gold-deep)); display:grid; place-items:center; }
.done-mark svg{ width:30px; height:30px; fill:none; stroke:#fff; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.done-title{ font-family:var(--serif); font-size:30px; font-weight:600; margin:0 0 6px; }
.done-sub{ color:var(--ink-soft); font-size:16px; line-height:1.5; max-width:30ch; margin:0 auto; }

/* ---- timeline ---- */
.timeline{ list-style:none; margin:8px 0 22px; padding:0 4px; position:relative; }
.timeline::before{ content:""; position:absolute; left:62px; top:8px; bottom:8px; width:1px; background:var(--line); }
.timeline li{ display:flex; align-items:center; gap:20px; padding:11px 0; position:relative; }
.timeline li::after{ content:""; position:absolute; left:58px; width:9px; height:9px; border-radius:50%;
  background:var(--gold); border:2px solid var(--paper); }
.t-time{ width:52px; flex:none; text-align:right; font-family:var(--serif); font-weight:600; font-size:21px; line-height:1; color:var(--ink); }
.t-time small{ display:block; font-size:10px; font-weight:400; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); margin-top:3px; }
.t-desc{ font-size:17px; padding-left:18px; }

.theme-card{ text-align:center; background:#fff; border:1px solid var(--line); border-radius:18px; padding:18px; margin-bottom:16px; }
.tc-kick{ font-family:var(--serif); text-transform:uppercase; letter-spacing:.34em; font-size:12px; color:var(--gold-deep); margin:0 0 12px; }
.swatches{ display:flex; justify-content:center; gap:12px; margin-bottom:12px; }
.swatches i{ width:34px; height:34px; border-radius:50%; background:var(--c); border:1px solid var(--line); box-shadow:inset 0 0 0 3px #fff; }
.tc-text{ font-size:15px; color:var(--ink-soft); margin:0; }

/* ---- gifts / qr ---- */
.qr-grid{ display:grid; grid-template-columns:1fr 1fr; gap:13px; margin:10px 0 4px; }
.qr-card{ margin:0; text-align:center; background:#fff; border:1px solid var(--line); border-radius:18px; padding:13px; }
.qr-shell{ position:relative; display:block; width:100%; aspect-ratio:1; border-radius:8px; overflow:hidden; padding:0; background:#fff; }
.qr-card img{ width:100%; height:100%; object-fit:contain; border-radius:8px; display:block; background:#fff; }
/* reveal overlay — covers the code until the guest taps */
.qr-reveal{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px;
  background:linear-gradient(180deg,var(--cream-soft),var(--paper));
  border:1px dashed var(--gold-deep); border-radius:8px;
  color:var(--gold-deep); font-family:var(--body); font-size:13px; letter-spacing:.03em; line-height:1.3; text-align:center; padding:8px;
  transition:opacity .2s;
}
.qr-reveal svg{ width:34px; height:34px; flex:none; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.qr-card.revealed .qr-reveal{ opacity:0; pointer-events:none; }
.qr-shell:active{ transform:scale(.99); }
.qr-card figcaption{ margin-top:9px; font-family:var(--serif); font-size:19px; font-weight:600; color:var(--gold-deep); letter-spacing:.02em; }
.qr-sub{ text-align:center; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); margin:11px 0 0; }

.divider{ display:flex; align-items:center; gap:14px; margin:26px 2px 14px; }
.divider::before,.divider::after{ content:""; flex:1; height:1px; background:var(--line); }
.divider span{ font-family:var(--serif); text-transform:uppercase; letter-spacing:.3em; font-size:13px; color:var(--gold-deep); }

/* ---- wishes wall ---- */
.wishes-wall{ display:flex; flex-direction:column; gap:11px; margin-top:18px; }
.wall-empty{ text-align:center; color:var(--ink-soft); font-style:italic; font-size:15px; }
.wish{
  background:#fff; border:1px solid var(--line); border-radius:16px; padding:14px 16px;
  position:relative; animation:rise .5s var(--ease);
}
.wish-msg{ font-size:16.5px; line-height:1.55; margin:0 0 8px; color:var(--ink); }
.wish-foot{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.wish-name{ font-family:var(--serif); font-size:16px; font-weight:600; color:var(--gold-deep); }
.wish-name::before{ content:"— "; }
.wish-time{ font-size:12px; color:var(--ink-soft); }

/* ============================================================
   DISPOSABLE CAMERA
   Dark walnut "inside the camera body" — deliberately the only
   part of the invite that isn't cream paper.
   ============================================================ */
.cam, .gal{
  position:absolute; inset:0; z-index:80;
  display:flex; flex-direction:column;
  background:linear-gradient(180deg,#2a2015,#1a120c);
  color:var(--cream);
  animation:camIn .32s var(--ease);
}
@keyframes camIn{ from{ opacity:0; transform:scale(1.02); } }

.cam-top{
  flex:none; display:flex; align-items:center; justify-content:space-between;
  padding:calc(env(safe-area-inset-top,0px) + 12px) 16px 10px;
  border-bottom:1px solid rgba(216,189,138,.16);
}
.cam-x{
  width:36px; height:36px; border-radius:50%; font-size:24px; line-height:1;
  display:grid; place-items:center; color:var(--cream);
  background:rgba(244,236,221,.08);
}
.cam-x:active{ transform:scale(.92); }

/* mechanical frame counter */
.cam-counter{
  margin:0; display:flex; align-items:baseline; gap:3px;
  padding:5px 12px; border-radius:8px;
  background:#140e08; border:1px solid rgba(216,189,138,.3);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.6);
  font-family:var(--serif); letter-spacing:.06em; color:var(--gold-soft);
}
.cam-counter b{ font-size:22px; font-weight:600; line-height:1; font-variant-numeric:tabular-nums; }
.cam-counter span{ opacity:.45; font-size:14px; }
.cam-counter i{ font-style:normal; font-size:14px; opacity:.6; }
.cam-counter.wind b{ animation:wind .45s var(--ease); }
@keyframes wind{ 50%{ transform:translateY(-7px); opacity:0; } 51%{ transform:translateY(7px); } }

.cam-pane{
  flex:1; min-height:0; display:flex; flex-direction:column;
  padding:18px 22px calc(20px + var(--safe-b));
  overflow-y:auto; -webkit-overflow-scrolling:touch;
}

/* ---- intro / name the roll ---- */
#camName{ justify-content:center; text-align:center; }
.cam-mark{
  width:66px; height:66px; margin:0 auto 18px; padding:15px; border-radius:50%;
  background:radial-gradient(circle at 50% 32%, #6a5740, #3a2d1f);
  border:1.5px solid var(--gold-soft); color:var(--gold-soft);
}
.cam-mark svg{ fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.cam-h{
  font-family:var(--serif); font-size:30px; font-weight:600; line-height:1.15;
  margin:0 0 10px; color:var(--cream);
}
.cam-p{
  font-size:15.5px; line-height:1.6; margin:0 0 24px;
  color:rgba(244,236,221,.72); max-width:32ch; margin-inline:auto;
}
/* shown only inside app webviews, where storage is thrown away on app close */
.cam-tip{
  display:flex; align-items:flex-start; gap:10px; text-align:left;
  margin:0 0 22px; padding:12px 14px; border-radius:12px;
  background:rgba(216,189,138,.1); border:1px solid rgba(216,189,138,.3);
  color:var(--gold-soft); font-size:13.5px; line-height:1.5;
}
.cam-tip svg{ width:18px; height:18px; flex:none; margin-top:1px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; }
.cam-tip[hidden]{ display:none !important; }

/* the shared .form styles assume cream paper — repaint for the dark body */
.cam-form{ text-align:left; }
.cam-form .field > span{ color:rgba(244,236,221,.66); }
.cam-form .field input{
  background:rgba(244,236,221,.07); border-color:rgba(216,189,138,.28); color:var(--cream);
}
.cam-form .field input::placeholder{ color:rgba(244,236,221,.35); }
.cam-form .field input:focus{ border-color:var(--gold-soft); box-shadow:0 0 0 3px rgba(216,189,138,.16); }
.cam-skip{
  margin-top:12px; padding:8px; font-size:14px; text-align:center;
  color:rgba(244,236,221,.5); text-decoration:underline; text-underline-offset:3px;
}

/* ---- viewfinder ---- */
#camShoot{ padding-inline:16px; }
.vf{
  position:relative; flex:1; min-height:0; margin-bottom:16px;
  border-radius:20px; overflow:hidden;
  background:#0d0906; border:1px solid rgba(216,189,138,.22);
  box-shadow:inset 0 0 60px rgba(0,0,0,.8);
}
.vf video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.vf.flip video{ transform:scaleX(-1); }          /* selfie cam reads as a mirror */
.vf-grain{
  position:absolute; inset:0; pointer-events:none; opacity:.16; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
.vf::after{  /* vignette */
  content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 70px 20px rgba(0,0,0,.55);
}
/* corner framing marks */
.vf-marks i{
  position:absolute; width:22px; height:22px; border:2px solid rgba(216,189,138,.55);
}
.vf-marks i:nth-child(1){ top:16px; left:16px; border-right:0; border-bottom:0; border-radius:4px 0 0 0; }
.vf-marks i:nth-child(2){ top:16px; right:16px; border-left:0; border-bottom:0; border-radius:0 4px 0 0; }
.vf-marks i:nth-child(3){ bottom:16px; left:16px; border-right:0; border-top:0; border-radius:0 0 0 4px; }
.vf-marks i:nth-child(4){ bottom:16px; right:16px; border-left:0; border-top:0; border-radius:0 0 4px 0; }

/* shown instead of the live feed inside in-app browsers that block getUserMedia */
.vf-fallback{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  padding:32px; text-align:center;
  background:linear-gradient(180deg,#2a2015,#17100a);
  color:var(--gold-soft); font-family:var(--serif); font-size:17px; letter-spacing:.04em;
}
.vf-fallback svg{ width:52px; height:52px; flex:none; fill:none; stroke:currentColor; stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; }
.vf-fallback:active{ opacity:.8; }

/* ---- controls ---- */
.cam-controls{
  flex:none; display:flex; align-items:center; justify-content:space-between;
  padding:0 6px;
}
.shutter{
  width:78px; height:78px; border-radius:50%; padding:6px;
  background:linear-gradient(180deg,var(--gold-soft),var(--gold-deep));
  box-shadow:0 8px 24px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .12s;
}
.shutter span{
  display:block; width:100%; height:100%; border-radius:50%;
  background:radial-gradient(circle at 50% 35%, #fdf6e8, #e4d3ae);
  border:1px solid rgba(0,0,0,.12);
}
.shutter:active{ transform:scale(.93); }
.shutter:disabled{ opacity:.45; }
.cam-mini{
  width:46px; height:46px; padding:12px; border-radius:50%;
  background:rgba(244,236,221,.08); border:1px solid rgba(216,189,138,.25);
  color:var(--gold-soft);
}
.cam-mini svg{ fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.cam-mini:active{ transform:scale(.92); }
/* Keep the box when the flip button is unavailable (no live stream, so no
   camera to flip). Removing it from the flow would slide the shutter off
   centre — and that fallback is what most in-app browsers land on. */
.cam-mini[hidden]{ display:block !important; visibility:hidden; pointer-events:none; }
.cam-hint{
  flex:none; text-align:center; margin:14px 0 0;
  font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(244,236,221,.38);
}

/* ---- roll finished ---- */
#camDone{ justify-content:center; }
#camDone .form-done{ color:var(--cream); }
#camDone .done-sub{ color:rgba(244,236,221,.68); }
.cam-donebtn{ margin-top:26px; }

/* ---- flash + toast ---- */
.cam-flash{
  position:absolute; inset:0; z-index:90; background:#fff;
  opacity:0; pointer-events:none;
}
.cam-flash.fire{ animation:flash .34s ease-out; }
@keyframes flash{ 0%{ opacity:.92; } 100%{ opacity:0; } }

.cam-toast{
  position:absolute; left:16px; right:16px; bottom:calc(96px + var(--safe-b)); z-index:88;
  margin:0; padding:12px 16px; border-radius:12px; text-align:center;
  background:rgba(20,14,8,.92); border:1px solid rgba(216,189,138,.3);
  color:var(--gold-soft); font-size:14.5px; line-height:1.4;
  opacity:0; transform:translateY(8px); pointer-events:none;
  transition:opacity .25s, transform .25s;
}
.cam-toast.show{ opacity:1; transform:none; }

/* ============================================================
   GALLERY
   ============================================================ */
.gal-title{
  margin:0; font-family:var(--serif); text-transform:uppercase;
  letter-spacing:.34em; font-size:13px; color:var(--gold-soft);
}
.gal-pane{
  flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:20px 18px calc(24px + var(--safe-b));
}
#galLocked{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.canister{
  width:64px; height:64px; margin-bottom:18px; padding:12px; border-radius:16px;
  background:rgba(244,236,221,.06); border:1px solid rgba(216,189,138,.28);
  color:var(--gold-soft);
}
.canister svg{ fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.gal-h{ font-family:var(--serif); font-size:30px; font-weight:600; margin:0 0 10px; }
.gal-p{ font-size:15.5px; line-height:1.6; color:rgba(244,236,221,.7); margin:0 0 26px; max-width:30ch; }

.countdown{ display:flex; gap:9px; }
.countdown div{
  min-width:62px; padding:11px 6px; border-radius:12px;
  background:rgba(244,236,221,.06); border:1px solid rgba(216,189,138,.2);
}
.countdown b{
  display:block; font-family:var(--serif); font-size:26px; font-weight:600;
  line-height:1; color:var(--gold-soft); font-variant-numeric:tabular-nums;
}
.countdown small{
  display:block; margin-top:5px; font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(244,236,221,.45);
}

/* contact sheet */
.gal-count{
  text-align:center; margin:0 0 14px; font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; color:rgba(244,236,221,.45);
}
.gal-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:5px; }
.gal-grid button{
  position:relative; aspect-ratio:1; border-radius:4px; overflow:hidden;
  background:rgba(244,236,221,.06); padding:0;
}
.gal-grid img{ width:100%; height:100%; object-fit:cover; display:block; }
.gal-grid button:active{ opacity:.75; }
.gal-empty{ text-align:center; color:rgba(244,236,221,.5); font-style:italic; margin-top:40px; }

/* lightbox */
.lb{
  position:absolute; inset:0; z-index:95;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:rgba(10,7,4,.96); padding:56px 12px calc(20px + var(--safe-b));
  animation:camIn .25s var(--ease);
}
.lb img{ max-width:100%; max-height:100%; object-fit:contain; border-radius:6px; }
.lb-x{
  position:absolute; top:calc(env(safe-area-inset-top,0px) + 12px); right:14px;
  width:38px; height:38px; border-radius:50%; font-size:26px; line-height:1;
  display:grid; place-items:center; color:var(--cream); background:rgba(244,236,221,.1);
}
.lb-foot{
  flex:none; display:flex; align-items:center; justify-content:space-between; gap:14px;
  width:100%; margin-top:14px;
}
.lb-foot > span{ font-family:var(--serif); font-size:17px; color:var(--gold-soft); }
.lb-dl{
  display:flex; align-items:center; gap:7px; flex:none;
  padding:9px 15px; border-radius:999px;
  background:rgba(244,236,221,.1); border:1px solid rgba(216,189,138,.3);
  color:var(--cream); font-size:14px;
}
.lb-dl svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.12s !important; }
}