:root{
  --cream:#FDF7F3;
  --cream-2:#F7EDE6;
  --blush:#F3C9C2;
  --blush-soft:#F9DFD9;
  --rose:#E8A49C;
  --gold:#C89B5C;
  --gold-soft:#E2C79A;
  --ink:#4A423E;
  --ink-soft:#8A7D76;
  --leaf:#CBB79A;
  --radius:18px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --glow-a:#FFFBF8;
  --glow-b:#FBEEE9;
  --surface-a:#FFFCFA;
  --surface-b:#FCF1EC;
  --card-ink:#332C29;
  color-scheme:light;
}


*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0;
  font-family:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-weight:300;
  color:var(--ink);
  background:
    radial-gradient(120% 90% at 10% 0%, var(--glow-a) 0%, transparent 60%),
    radial-gradient(110% 80% at 90% 100%, var(--glow-b) 0%, transparent 60%),
    var(--cream);
  background-attachment:fixed;
  min-height:100dvh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ---------- flower border ---------- */
.petals{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.bloom{position:absolute;width:clamp(130px,28vw,230px);height:auto;opacity:.5}
.bloom-tl{top:-26px;left:-30px}
.bloom-tr{top:-26px;right:-30px;transform:scaleX(-1)}
.bloom-bl{bottom:-26px;left:-30px;transform:scaleY(-1)}
.bloom-br{bottom:-26px;right:-30px;transform:scale(-1,-1)}
.fl ellipse{fill:var(--blush-soft)}
.bloom-tr .fl ellipse,.bloom-bl .fl ellipse{fill:#FBE9E3}
.fc{fill:var(--gold-soft)}
.sway{transform-origin:center;animation:sway 9s var(--ease) infinite}
.s2{animation-duration:11s;animation-delay:-3s}
.s3{animation-duration:13s;animation-delay:-6s}
@keyframes sway{
  0%,100%{transform:rotate(-3deg) translateY(0)}
  50%{transform:rotate(3deg) translateY(4px)}
}
@media (prefers-reduced-motion:reduce){.sway{animation:none}}

/* ---------- screens ---------- */
.screen{
  position:fixed;inset:0;z-index:1;
  display:flex;
  align-items:center;justify-content:center;
  padding:max(28px,env(safe-area-inset-top)) 22px max(28px,env(safe-area-inset-bottom));
  overflow-y:auto;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .7s var(--ease),visibility 0s linear .7s;
}
.screen.is-active{
  opacity:1;visibility:visible;pointer-events:auto;
  transition:opacity .7s var(--ease),visibility 0s linear 0s;
}
.screen.is-fading{opacity:0}

.wrap{width:100%;max-width:440px;margin:auto;text-align:center}
.wrap-wide{max-width:960px}

/* ---------- typography ---------- */
.h-script{
  font-family:'Cormorant Garamond',serif;
  font-weight:300;font-size:clamp(26px,6.5vw,36px);
  letter-spacing:.02em;margin:0 0 26px;color:var(--ink);
}
.field-label{
  font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-soft);margin:0 0 10px;font-weight:300;
}
.hint{font-size:13.5px;color:var(--ink-soft);margin:8px 0 0;font-weight:300;line-height:1.6}
.hint-eg{margin-top:2px}
.hint-sm{font-size:12px;margin-top:18px;opacity:.8}
.err{color:#B5685F;font-size:13px;min-height:18px;margin:10px 0 0}

/* ---------- splash ---------- */
.splash-card{
  position:relative;width:min(92vw,400px);aspect-ratio:4/5;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:0 11%;
  background:linear-gradient(170deg,var(--surface-a) 0%,var(--surface-b) 100%);
  border-radius:4px;
  box-shadow:0 24px 60px -28px rgba(120,88,70,.35);
  animation:cardIn 1.5s var(--ease) both;
}
.splash-frame{
  position:absolute;inset:16px;border:1.5px solid var(--gold-soft);
  animation:frameIn 1.6s var(--ease) .35s both;
}
@keyframes cardIn{
  0%{opacity:0;transform:translateY(42px) scale(.94)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes frameIn{0%{opacity:0;transform:scale(1.06)}100%{opacity:.9;transform:scale(1)}}

/* floral corners inside the card, echoing the reference */
.card-bloom{position:absolute;width:46%;height:auto;opacity:.85;pointer-events:none}
.card-bloom-tr{top:-4%;right:-3%;transform:scaleX(-1)}
.card-bloom-bl{bottom:-4%;left:-3%;transform:scaleY(-1)}
.card-bloom .fl ellipse{fill:#F6D2CB}
.card-bloom .fc{fill:#DDB97F}

.splash-happy,.splash-bday{
  font-family:'Parisienne','Snell Roundhand','Brush Script MT',cursive;
  /* Parisienne has deep descenders and tall ascenders — this line-height and
     the padding above keep the y-tails and capital flourishes off the frame. */
  margin:0;line-height:1.34;position:relative;z-index:1;white-space:nowrap;
  background:linear-gradient(100deg,#D9A95F,#C9893F 45%,#E6C489);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.splash-happy{font-size:clamp(40px,11.5vw,60px);animation:riseIn 1.2s var(--ease) .5s both}
.splash-bday{font-size:clamp(44px,12.8vw,68px);margin-top:0;animation:riseIn 1.2s var(--ease) .85s both}
.splash-name{
  position:relative;z-index:1;color:var(--card-ink);
  margin:22px 0 0;font-size:clamp(17px,4.6vw,22px);
  letter-spacing:.34em;font-weight:300;color:var(--ink);
  animation:riseIn 1.2s var(--ease) 1.35s both;
}
@keyframes riseIn{
  0%{opacity:0;transform:translateY(26px)}
  100%{opacity:1;transform:translateY(0)}
}

/* ---------- inputs / buttons ---------- */
.name-input{
  width:100%;font-family:inherit;font-weight:300;font-size:17px;color:var(--ink);
  background:color-mix(in srgb, var(--cream) 70%, #fff);
  border:1px solid rgba(200,155,92,.35);
  border-radius:var(--radius);
  padding:15px 18px;text-align:center;outline:none;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.name-input::placeholder{color:#BCADA5}
.name-input:focus{border-color:var(--gold);box-shadow:0 0 0 4px rgba(226,199,154,.22)}

.btn{
  margin-top:26px;width:100%;
  font-family:inherit;font-size:15px;font-weight:300;letter-spacing:.1em;
  color:#fff;background:linear-gradient(135deg,var(--rose),#D98E85);
  border:none;border-radius:999px;padding:15px 24px;cursor:pointer;
  box-shadow:0 12px 26px -14px rgba(216,133,122,.9);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),opacity .25s;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.99)}
.btn:disabled{opacity:.45;cursor:default;transform:none}
.btn-ghost{
  background:transparent;color:var(--ink-soft);
  border:1px solid rgba(200,155,92,.4);box-shadow:none;
}
.btn-stop{background:linear-gradient(135deg,#C9766C,#B5685F)}
.hidden{display:none}

/* ---------- intro ---------- */
.intro-lead{
  font-family:'Cormorant Garamond',serif;font-size:clamp(20px,5.2vw,26px);
  font-weight:300;margin:0 0 4px;line-height:1.45;
}
.intro-body{font-size:15px;line-height:1.75;color:var(--ink-soft);margin:20px 0 0;font-weight:300}
.intro-warn strong{font-weight:400;color:var(--ink)}

/* ---------- record stage ---------- */
/* Width + height are set from the real camera stream by app.js, so the frame
   matches the recording exactly — no letterboxing and nothing cropped off. */
.stage{
  position:relative;width:100%;aspect-ratio:3/4;margin:0 auto;
  border-radius:var(--radius);overflow:hidden;
  background:#2E2825;
  box-shadow:0 20px 50px -26px rgba(120,88,70,.5);
  transition:width .35s var(--ease),height .35s var(--ease);
}
.stage.sized{aspect-ratio:auto}
/* contain, not cover: what you see in the preview is exactly what gets recorded */
.preview{width:100%;height:100%;object-fit:contain;display:block;transform:scaleX(-1);background:#2E2825}
.stage-frame{position:absolute;inset:10px;border:1px solid rgba(255,255,255,.5);border-radius:10px;pointer-events:none}

.overlay{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(74,66,62,.32);backdrop-filter:blur(2px);
}
.overlay[hidden]{display:none}
.count-num{
  font-family:'Cormorant Garamond',serif;font-size:clamp(76px,22vw,130px);
  font-weight:300;color:#fff;text-shadow:0 4px 30px rgba(0,0,0,.25);
  animation:pop .95s var(--ease);
}
@keyframes pop{
  0%{opacity:0;transform:scale(1.5)}
  25%{opacity:1;transform:scale(1)}
  100%{opacity:.85;transform:scale(.96)}
}
.overlay-start{background:rgba(74,66,62,.2)}
.start-word{
  font-size:clamp(26px,8vw,44px);letter-spacing:.42em;font-weight:200;color:#fff;
  padding-left:.42em;
}
.overlay-start.fade-out{animation:fadeOut .9s var(--ease) forwards}
@keyframes fadeOut{to{opacity:0;transform:scale(1.12)}}

.rec-badge{
  position:absolute;top:18px;left:18px;display:none;align-items:center;gap:8px;
  background:rgba(74,66,62,.55);color:#fff;font-size:12.5px;letter-spacing:.08em;
  padding:6px 13px;border-radius:999px;
}
.rec-badge.on{display:flex}
.dot{width:8px;height:8px;border-radius:50%;background:#FF6B5E;animation:blink 1.3s infinite}
@keyframes blink{50%{opacity:.25}}

.cam-note{font-size:13.5px;color:var(--ink-soft);margin:16px 0 0;min-height:20px}

/* ---------- upload bar ---------- */
.bar{width:100%;height:4px;border-radius:99px;background:rgba(200,155,92,.2);overflow:hidden}
.bar-fill{height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--gold-soft),var(--rose));transition:width .3s var(--ease)}

/* ---------- gallery ---------- */
.gal-title{margin-bottom:28px}
.gal-grid{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start}
@media (max-width:720px){.gal-grid{grid-template-columns:1fr;gap:38px}}
.col-head{
  font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-soft);margin:0 0 16px;font-weight:300;
}
.others-slot{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:420px){.others-slot{grid-template-columns:1fr 1fr}}
.others-slot .hint{grid-column:1/-1}

.card{
  border:none;padding:0;background:transparent;cursor:pointer;text-align:center;
  /* colour must be explicit: a button won't inherit it, and the browser's own
     default turns white when the device is in dark mode */
  font-family:inherit;color:var(--ink);display:block;width:100%;
  animation:cardFade .6s var(--ease) both;
}
@keyframes cardFade{0%{opacity:0;transform:translateY(12px)}100%{opacity:1;transform:none}}
.card-media{
  width:100%;aspect-ratio:3/4;border-radius:14px;overflow:hidden;
  background:#E7DCD5;position:relative;
  box-shadow:0 14px 34px -22px rgba(120,88,70,.6);
  transition:transform .3s var(--ease);
}
.card:hover .card-media{transform:translateY(-3px)}
.card-media video{width:100%;height:100%;object-fit:cover;display:block}
/* The thumbnails play on their own now, so this is a small corner badge
   that says "tap for sound" rather than a scrim over the whole picture. */
.play-pip{
  position:absolute;right:8px;bottom:8px;
  width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(50,42,38,.55);backdrop-filter:blur(2px);
}
.play-pip svg{width:14px;height:14px;fill:#fff;opacity:.95;margin-left:1px}
.card-name{
  margin:10px 0 0;font-size:13.5px;color:var(--card-ink);font-weight:400;
  word-break:break-word;line-height:1.4;
}
.mine-slot .card-media{aspect-ratio:3/4}
.mine-slot video{width:100%;border-radius:14px;display:block}

/* ---------- lightbox ---------- */
.lightbox{
  position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;padding:26px;
  background:rgba(60,52,48,.88);backdrop-filter:blur(6px);
  animation:lbIn .3s var(--ease);
}
.lightbox[hidden]{display:none}
@keyframes lbIn{0%{opacity:0}100%{opacity:1}}
.lb-video{max-width:min(94vw,560px);max-height:76vh;border-radius:14px;background:#000}
.lb-name{color:#fff;font-size:14px;font-weight:300;letter-spacing:.1em;margin:0}
.lb-close{
  position:absolute;top:max(18px,env(safe-area-inset-top));right:20px;
  background:none;border:none;color:#fff;font-size:34px;line-height:1;cursor:pointer;opacity:.8;
}


/* ---------- tap-to-start-music hint ---------- */
/* Only shown while the browser is still refusing to play sound. */
.tap-hint{
  position:absolute;left:0;right:0;
  bottom:calc(18px + env(safe-area-inset-bottom,0px));
  margin:0;text-align:center;font-size:12px;letter-spacing:.14em;
  color:var(--ink-soft);opacity:.75;pointer-events:none;
  animation:hintPulse 2.6s var(--ease) infinite;
}
@keyframes hintPulse{0%,100%{opacity:.4}50%{opacity:.85}}
@media (prefers-reduced-motion:reduce){.tap-hint{animation:none}}