/* css/app.css */
:root {
  --accent: #A22135;
  --bg: #141414;
  --btn-shadow: #b4b4b4;
  --btn-secondary-bg: #212121;
  --btn-secondary-shadow: #2e2e2e;
  --btn-secondary-color: rgba(255,255,255,0.80);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
button, input, select, textarea { font-family: inherit; font-size: inherit; }
html, body { height: 100%; width: 100%; overflow: hidden; background: #000; }
body { font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, sans-serif; }

/* Screen visibility */
.screen { display: none; position: absolute; inset: 0; }
body[data-screen="splash"]         #screen-splash         { display: flex; flex-direction: column; }
body[data-screen="splash-denied"]  #screen-splash-denied  { display: flex; flex-direction: column; }
body[data-screen="camera"]         #screen-camera         { display: block; overflow: hidden; }
body[data-screen="countdown"]      #screen-countdown      { display: block; overflow: hidden; }
body[data-screen="preview"]        #screen-preview        { display: flex; flex-direction: column; }
body[data-screen="strip"]          #screen-strip          { display: flex; flex-direction: column; align-items: center; padding: 52px 16px 28px; background: var(--bg); }
body[data-screen="compare"]        #screen-compare        { display: flex; flex-direction: column; background: var(--bg); }
body[data-screen="done"]           #screen-done           { display: flex; flex-direction: column; background: var(--bg); padding: 50px 18px 24px; }
body[data-screen="gallery"]        #screen-gallery        { display: flex; flex-direction: column; background: var(--bg); padding: 78px 24px 28px; }

/* Shared buttons */
.btn-primary {
  display: block; width: 100%; padding: 13px;
  background: #fff; color: #000; text-align: center; text-decoration: none;
  border: none; border-radius: 999px;
  font-size: 19px; font-weight: 600; cursor: pointer;
  font-family: inherit;
  box-shadow: 0 4px 0 0 #b4b4b4;
  transform: translateY(0);
  transition: transform 0.07s, box-shadow 0.07s;
}
.btn-primary:active {
  transform: translateY(4px);
  box-shadow: none;
}
.btn-secondary {
  display: block; width: 100%; padding: 13px;
  background: var(--btn-secondary-bg); color: var(--btn-secondary-color);
  text-align: center; text-decoration: none;
  border: none; border-radius: 999px;
  font-size: 19px; font-weight: 500; cursor: pointer;
  font-family: inherit;
  box-shadow: 0 4px 0 0 var(--btn-secondary-shadow);
  transform: translateY(0);
  transition: transform 0.07s, box-shadow 0.07s;
}
.btn-secondary:active {
  transform: translateY(4px);
  box-shadow: none;
}
.btn-text {
  background: none; border: none; color: rgba(255,255,255,0.80);
  font-size: 20px; font-weight: 400; cursor: pointer; padding: 2px 0;
  font-family: inherit; letter-spacing: 0.01em;
  transition: color 0.07s;
}
.btn-text:active { color: rgba(255,255,255,0.40); }
.btn-icon {
  background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.15); border-radius: 50%;
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: rgba(255,255,255,0.85);
  transform: translateY(0); transition: transform 0.07s;
}
.btn-icon:active { transform: translateY(2px); }
.hidden { display: none !important; }

/* ── Splash (1 · and 1e ·) ──────────────────────── */
#screen-splash,
#screen-splash-denied {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
}

/* Background photo with blur */
#screen-splash::before,
#screen-splash-denied::before {
  content: '';
  position: absolute; inset: -12px;
  background: url('../assets/splash.jpg') center / cover no-repeat;
  filter: blur(3px);
  z-index: -2;
}

/* Dark gradient overlay — heavier at top, fades out */
#screen-splash::after,
#screen-splash-denied::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.80) 0%,
    rgba(0,0,0,0.55) 30%,
    rgba(0,0,0,0.15) 65%,
    rgba(0,0,0,0.00) 100%
  );
  z-index: -1;
}

.splash-top {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: flex-start; justify-content: flex-start;
  padding: 80px 24px 0;
}

.splash-title {
  font-family: 'Playfair Display', serif;
  font-size: 52px; font-weight: 500; line-height: 58px;
  color: #fff;
}

.splash-subtitle {
  font-family: 'Playfair Display', serif;
  font-size: 18px; font-weight: 400; line-height: 22px;
  color: #fff; text-align: left; margin-top: 0;
}

.splash-actions {
  flex-shrink: 0;
  padding: 0 24px 28px;
  display: flex; flex-direction: column; gap: 16px;
}

/* Camera denied message box */
.splash-denied-msg {
  position: absolute;
  bottom: 164px;
  left: 24px; right: 24px;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-radius: 8px;
  padding: 14px 16px;
  color: rgba(255,255,255,0.80);
  font-size: 18px; font-weight: 400; line-height: 1.55;
  text-align: left;
}

/* ── Camera (2 ·) + Countdown (3 ·) ────────────── */
#screen-camera video,
#screen-countdown video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
}

/* Blur background — shown behind the main feed at ×0.5 zoom so there
   are no black bars when the user zooms out. Toggled via JS.
   Negative inset expands the element 36px past each screen edge so that
   blur's soft feathered edges live off-screen, even with overflow:hidden
   on the parent. object-fit:cover (from the shared video rule) keeps the
   video covering the larger box. */
#camera-blur-bg,
#countdown-blur-bg {
  filter: blur(24px) brightness(0.35) saturate(0.6);
  top: -36px !important; left: -36px !important;
  right: -36px !important; bottom: -36px !important;
  width: auto !important; height: auto !important;
  display: none;
  z-index: 0;
}

.crop-guide {
  position: absolute;
  top: 50%; left: 50%;
  width: 350px; height: 300px;
  transform: translate(-50%, -54%);
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.55);
  border: 1.5px solid rgba(255,255,255,0.75);
  border-radius: 3px;
  pointer-events: none;
  touch-action: none;
}

/* Message shown above the crop guide during auto-take countdowns */
#countdown-message {
  position: absolute;
  top: 108px;
  left: 0; right: 0;
  text-align: center;
  color: rgba(255,255,255,0.92);
  font-family: 'Playfair Display', serif;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 5px rgba(0,0,0,0.75);
  z-index: 10;
  pointer-events: none;
  padding: 0 24px;
}

.camera-controls-top {
  position: absolute; top: 44px; left: 18px; right: 18px;
  display: flex; align-items: center; justify-content: space-between;
}

.timer-toggle {
  display: flex; align-items: center; gap: 8px;
}
.timer-label { color: rgba(255,255,255,0.55); font-size: 15px; }

.timer-pill-group {
  display: flex; background: rgba(0,0,0,0.4);
  border-radius: 999px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.15);
}

.timer-pill {
  padding: 7px 14px; border-radius: 999px; border: none; cursor: pointer;
  font-size: 15px; font-weight: 500; font-family: inherit;
  background: transparent; color: rgba(255,255,255,0.65);
}
.timer-pill.active {
  background: rgba(255,255,255,0.15); color: #fff; font-weight: 600;
}
.timer-pill:active { background: rgba(255,255,255,0.25); color: #fff; }

/* ── Zoom presets ───────────────────────────────── */
/* Lives outside all .screen divs so it persists across the camera↔countdown
   transition without flashing. Hidden by default; shown only on camera +
   countdown screens. z-index: 25 keeps it above the autotake overlay (20)
   and the semi-transparent scrim (0) but below Ready now (50). */
.zoom-controls {
  position: fixed;
  bottom: 124px;
  left: 24px; right: 24px;
  display: none; gap: 6px; z-index: 25;
  background: rgba(0,0,0,0.4);
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.15);
}
body[data-screen="camera"]    .zoom-controls,
body[data-screen="countdown"] .zoom-controls { display: flex; }
.zoom-pill {
  flex: 1; text-align: center;
  padding: 14px 0; border-radius: 999px; border: none; cursor: pointer;
  font-size: 30px; font-weight: 500; font-family: inherit;
  background: transparent; color: rgba(255,255,255,0.65);
}
.zoom-pill.active {
  background: rgba(255,255,255,0.15); color: #fff; font-weight: 600;
}
.zoom-pill:active { background: rgba(255,255,255,0.25); color: #fff; }

.shot-dots {
  position: absolute; bottom: 110px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 8px; z-index: 5;
}
.shot-dot {
  width: 8px; height: 8px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.6);
  background: transparent;
}
.shot-dot.filled { background: rgba(255,255,255,0.9); border-color: rgba(255,255,255,0.9); }

.camera-controls-bottom {
  position: absolute; bottom: 32px; left: 0; right: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 0 24px;
}

.btn-cancel {
  background: none; border: none; color: rgba(255,255,255,0.62);
  font-size: 16px; cursor: pointer;
  position: absolute; bottom: 36px; left: 28px;
  font-family: inherit; letter-spacing: 0.01em; z-index: 5;
  transition: color 0.07s;
}
.btn-cancel:active { color: rgba(255,255,255,0.88); }

.btn-shutter {
  width: 68px; height: 68px; border-radius: 50%;
  background: #fff; border: 4px solid rgba(255,255,255,0.35);
  outline: 2px solid rgba(255,255,255,0.6);
  cursor: pointer; position: relative; z-index: 5;
  transform: scale(1); transition: transform 0.07s;
}
.btn-shutter:active {
  transform: scale(0.91);
}

#countdown-dots {
  bottom: 60px;
}

/* ── Countdown number (3 ·) ─────────────────────── */
.countdown-number {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 200px; font-weight: 100; color: rgba(255,255,255,0.82);
  font-family: 'Source Sans Pro', sans-serif;
  text-shadow: 0 0 60px rgba(255,255,255,0.25);
  line-height: 1;
  pointer-events: none;
}

/* ── Auto-take overlay (shown over camera during automated sequence) ─ */
/*
 * Message is vertically centred between the flip-camera button (bottom ≈ 84 px)
 * and the top of the crop guide (≈ 50% − 162 px).
 * Midpoint = (84 + 50% − 162) / 2 = 25% − 39 px.
 *
 * Flip and zoom controls (z-index 30) sit above this overlay (z-index 20) during
 * the intro phase so users can adjust before the first shot.
 */
.autotake-overlay {
  position: absolute; inset: 0; z-index: 20;
  /*
   * Dark band at top (message area) and bottom (button area); transparent in the
   * middle so the crop guide / camera preview stays fully bright.
   *
   * Crop guide sits at 50% − 162 px (top) to 50% + 138 px (bottom).
   * On a 844 px screen that's ≈ 31% – 66% of screen height.
   * Using slightly wider margins (28% / 68%) to handle all common phone heights.
   */
  background: linear-gradient(to bottom,
    rgba(0,0,0,0.62)  0%,
    rgba(0,0,0,0.62) 26%,
    rgba(0,0,0,0.08) 32%,
    rgba(0,0,0,0.08) 66%,
    rgba(0,0,0,0.62) 72%,
    rgba(0,0,0,0.62) 100%
  );
}

.autotake-message {
  position: absolute;
  top: calc(25% - 39px);
  left: 28px; right: 28px;
  transform: translateY(-50%);
  font-family: 'Playfair Display', serif;
  font-size: 24px; font-weight: 500; color: #fff;
  text-align: center; line-height: 1.5;
  white-space: pre-line;
}

.autotake-actions {
  position: absolute;
  bottom: 48px; left: 28px; right: 28px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}

/* Quit link — top-right corner of camera/countdown screen, mirrors Done button style */
.autotake-quit-link {
  position: absolute;
  top: 50px; right: 18px;
  z-index: 30; /* above autotake overlay (z-index 20) */
}

/* ── "Ready now" pill — global fixed element ────────────────────────────── */
/*
 * Lives outside all .screen divs so it persists through the camera→countdown
 * screen transition.  Shown during the interphase label (5 s) and kept visible
 * through the 10 s countdown so the button never flashes or changes style.
 */
.interphase-ready-now {
  position: fixed;
  bottom: 44px; left: 18px; right: 18px;
  z-index: 50;
  /* Primary button style */
  display: block; width: calc(100% - 36px);
  background: #fff; color: #000; text-align: center;
  border: none; border-radius: 999px;
  font-size: 19px; font-weight: 600;
  padding: 13px;
  cursor: pointer; font-family: inherit;
  box-shadow: 0 4px 0 0 #b4b4b4;
  transform: translateY(0);
  transition: transform 0.07s, box-shadow 0.07s;
}
.interphase-ready-now:active {
  transform: translateY(4px);
  box-shadow: none;
}

/* ── Photo Preview (3b ·) ─────────────────────── */
/*
 * Three-layer architecture (same idea as the camera screen):
 *
 *  Layer 1 · preview-bg   — full-screen photo, blurred + darkened  (always behind)
 *  Layer 2 · preview-photo — identical photo, crisp, clipped to the strip window
 *                            clip-path is set by JS after layout settles
 *  Layer 3 · preview-content — heading + spacer + placeholder + pinned buttons
 *
 * Because both photo layers are position:absolute from the same screen origin,
 * sharing background-size:cover and background-position:center 22%, they render
 * the SAME pixels at the SAME screen coordinates. Clipping Layer 2 to the
 * placeholder rectangle creates a perfect crisp window into the blurred backdrop.
 */
#screen-preview { overflow: hidden; }

/* Layer 1 – blurred, darkened full-screen backdrop */
.preview-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  filter: blur(8px) brightness(0.45);
  /* scale(1.03) pushes the blur's softened edge pixels ~6px past the viewport
     boundary so overflow:hidden clips them — no dark/light edge artifacts.
     background-size:cover still computes from the pre-transform 390×844 box. */
  transform: scale(1.03);
}

/* Layer 2 – crisp, full-brightness photo; clipped by JS to the strip area */
.preview-photo {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center center;  /* same as .preview-bg — same pixels */
  background-repeat: no-repeat;
  /* clip-path applied dynamically in showPreviewScreen() */
}

/* Layer 3 – heading + pinned buttons (placeholder is positioned absolutely) */
.preview-content {
  position: relative; z-index: 1;
  flex: 1; display: flex; flex-direction: column;
  padding: 58px 24px 0;
  pointer-events: none;
}

.preview-heading {
  font-family: 'Playfair Display', serif;
  font-size: 36px; font-weight: 500; color: #fff;
  text-align: left; line-height: 1.3; flex-shrink: 0;
}

/* Invisible placeholder — JS measures its bounding rect and clips
   .preview-photo to this rectangle.  Pinned 32px above the primary button
   (preview-actions: bottom:24px + ~116px tall → top at ~bottom:140px;
   +32px gap → photo bottom at bottom:172px). */
.preview-photo-area {
  position: absolute;
  bottom: 172px; left: 50%;
  width: 350px; height: 300px;
  transform: translateX(-50%);
}

.preview-actions {
  position: absolute; bottom: 24px; left: 24px; right: 24px;
  display: flex; flex-direction: column; gap: 16px;
  pointer-events: auto; /* restore clicks inside the pointer-events:none content layer */
}

/* ── Strip Review (4 ·) ────────────────────────── */
#screen-strip {
  background: var(--bg);
  padding: 52px 16px 28px;
  align-items: center;
}

.strip-heading {
  flex-shrink: 0;
  font-family: 'Playfair Display', serif;
  font-size: 36px; font-weight: 500; color: #fff;
  text-align: left; line-height: 1.3;
  width: 100%;
  margin-bottom: 16px;
}

.strip-outer {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; align-items: center;
  justify-content: flex-end; /* pin strip to bottom so it sits 32px above button */
}

.strip-frame {
  display: flex; flex-direction: column;
  background-color: #fff;
  background-image: url('../assets/frame.png');
  background-size: 100% 100%; background-repeat: no-repeat;
  /* Height fills all available space above buttons; width derives from aspect-ratio.
     max-height caps at 220×3=660px so the strip never becomes taller than its
     natural max-width allows — prevents distortion on very tall screens. */
  height: 100%;
  max-width: 220px;  /* never wider than 220px */
  max-height: 660px; /* = 220px × 3 — preserves 1:3 ratio at max size */
  padding: 10.5px 10.5px 0;
  gap: 12px;
  border-radius: 3px;
  border: 1px solid rgba(0,0,0,0.08);
  overflow: hidden;
  aspect-ratio: 1 / 3;
}

.strip-frame::after {
  content: ''; display: block;
  flex: 1; min-height: 0;
}

.strip-slot {
  position: relative;
  width: 100%;
  aspect-ratio: 168 / 144;
  flex-shrink: 0;
}

.strip-photo {
  width: 100%; height: 100%;
  background-size: cover; background-position: center 22%;
  border-radius: 1px;
}

/* X buttons — solid dark pill, same visual language as secondary buttons */
.strip-x-btn {
  position: absolute; top: -10px; right: -10px;
  width: 26px; height: 26px; border-radius: 50%;
  background: #212121;
  border: 1px solid rgba(255,255,255,0.28);
  box-shadow: inset 0 -1px 0 0 rgba(255,255,255,0.28);
  cursor: pointer; z-index: 10;
  transform: translateY(0);
  transition: transform 0.07s, box-shadow 0.07s;
}
.strip-x-btn:active {
  transform: translateY(2px);
  box-shadow: none;
}
.strip-x-btn::before,
.strip-x-btn::after {
  content: ''; position: absolute;
  width: 11px; height: 1.5px;
  background: rgba(255,255,255,0.65); border-radius: 1px;
  top: 50%; left: 50%;
  margin-left: -5.5px; margin-top: -0.75px;
}
.strip-x-btn::before { transform: rotate(45deg); }
.strip-x-btn::after  { transform: rotate(-45deg); }

.review-actions {
  width: 100%; flex-shrink: 0;
  display: flex; flex-direction: column; gap: 16px;
  padding-top: 32px;
}

/* ── Start Over Modal (4c ·) ───────────────────── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,0.72);
  display: flex; align-items: center; justify-content: center;
  padding: 28px;
}

.modal {
  width: 100%;
  background: #0f0f0f;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  padding: 28px 22px 20px;
  display: flex; flex-direction: column; gap: 16px;
}

.modal-body {
  color: rgba(255,255,255,0.88);
  font-size: 20px; font-weight: 300; line-height: 1.55;
  text-align: center; margin-bottom: 8px;
}

/* ── Compare (4b ·) ────────────────────────────── */
#screen-compare {
  padding: 44px 24px 24px;
}

.compare-heading {
  font-family: 'Playfair Display', serif;
  font-size: 36px; font-weight: 500; color: #fff;
  margin-bottom: 12px; flex-shrink: 0;
}

.compare-new-photo,
.compare-old-photo {
  position: relative;
  width: 100%; aspect-ratio: 168 / 144;
  border-radius: 6px;
  background-size: cover; background-position: center 22%;
  flex-shrink: 0;
  margin: 0 auto 26px;
  /* On small screens the two full-width photos + chrome won't fit.
     Cap height so they shrink together; aspect-ratio auto-narrows the
     width, and margin:auto keeps each one centered. */
  max-height: calc((100vh - 244px) / 2);
}

/* Floating overlay buttons — hang off bottom-right corner of each photo */
.compare-keep-ovr {
  position: absolute; bottom: -18px; right: 10px;
  border-radius: 999px;
  font-size: 16px; font-weight: 500;
  padding: 5px 12px;
  cursor: pointer; z-index: 20;
  letter-spacing: 0.01em; white-space: nowrap;
  transform: translateY(0);
  transition: transform 0.07s, box-shadow 0.07s;
}

/* Keep (white primary) */
.compare-keep-primary {
  background: #fff; color: #000;
  border: 1px solid #b4b4b4;
  box-shadow: 0 3px 0 0 #b4b4b4;
  font-weight: 600;
}
.compare-keep-primary:active {
  transform: translateY(3px);
  box-shadow: none;
}

/* Keep instead (dark, matches Save button style) */
.compare-keep-secondary {
  background: #212121; color: rgba(255,255,255,0.80);
  border: 1px solid #494949;
  box-shadow: 0 2px 0 0 #494949;
}
.compare-keep-secondary:active {
  transform: translateY(2px);
  box-shadow: none;
}

.compare-spacer { flex: 1; min-height: 8px; }

/* Try again — full-width secondary button at bottom */
.compare-try-again {
  width: 100%; padding: 14px; flex-shrink: 0;
  background: #212121; color: rgba(255,255,255,0.65);
  border: none; border-radius: 999px;
  font-size: 17px; font-weight: 500; cursor: pointer;
  font-family: inherit;
  box-shadow: 0 4px 0 0 #2e2e2e;
  transform: translateY(0);
  transition: transform 0.07s, box-shadow 0.07s;
}
.compare-try-again:active {
  transform: translateY(4px);
  box-shadow: none;
}

/* ── Done (5 ·) ────────────────────────────────── */
/* Bottom padding removed — done-actions pins itself absolutely */
#screen-done { padding: 50px 18px 0; }

.done-header {
  width: 100%; flex-shrink: 0;
  display: flex; justify-content: flex-end;
  margin-bottom: 6px;
  /* Must sit above the absolutely-positioned image group (z-index: auto = 0).
     position: relative pulls it into the stacking context so z-index applies. */
  position: relative; z-index: 1;
}

.done-heading {
  display: none; /* removed — more space for the strip */
}

/* Fills remaining vertical space between heading and pinned buttons */
.done-main { flex: 1; min-height: 0; }

.done-top-row {
  /* Base styles only — buildDoneScreen() overrides everything via inline styles */
  display: flex; align-items: flex-start;
}

/* ── Selfie flash (front-camera only) ─────────── */
@keyframes selfie-flash {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}
.selfie-flash {
  position: fixed; inset: 0; z-index: 9999;
  background: #fff; pointer-events: none;
  animation: selfie-flash 0.6s ease-out forwards;
}

/* Width & height set dynamically by buildDoneScreen() */
.done-strip {
  flex-shrink: 0;
  background-size: cover; background-position: top center;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 3px;
  position: relative; /* anchor for absolutely-positioned Retake buttons */
}

/* Retake pills overlaid on each photo slot in the done-strip.
   Left 1/4 of the button overlaps the strip's right edge; 3/4 hangs outside.
   Position (top, left) set dynamically in _renderDoneScreen(). */
.strip-retake-btn {
  position: absolute;
  background: #212121; color: rgba(255,255,255,0.80);
  border: 1px solid #494949;
  box-shadow: 0 2px 0 0 #494949;
  border-radius: 999px;
  font-size: 13px; font-weight: 500;
  padding: 4px 9px;
  cursor: pointer; font-family: inherit;
  white-space: nowrap; z-index: 10;
  transition: transform 0.07s, box-shadow 0.07s;
}
.strip-retake-btn:active {
  transform: translateY(2px); box-shadow: none;
}

.done-selfies { flex: 1; position: relative; }

.selfie-card {
  position: absolute; left: 4px;
  background-size: cover;
  /* background-position set inline by _renderDoneScreen() */
  border: 3px solid #fff; border-radius: 2px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.55);
}

/* Pinned to bottom of screen — consistent across all device heights.
   z-index: 1 ensures buttons always paint above the image group, which
   is position:absolute with no explicit z-index (treated as 0). */
.done-actions {
  position: absolute; bottom: 24px; left: 18px; right: 18px;
  display: flex; flex-direction: column; gap: 16px;
  z-index: 1;
}

/* ── Narrow-screen heading scaling ─────────────────
   When the viewport is narrower than 390 px, Playfair headings drop 2 pt
   so longer titles don't wrap to an extra line on small phones (≤360 px). */
@media (max-width: 389px) {
  .done-heading,
  .strip-heading,
  .preview-heading,
  .gallery-heading,
  .compare-heading { font-size: 34px; }
  .splash-title    { font-size: 50px; line-height: 56px; }
}

/* ── Saved to Gallery (5b ·) ─────────────────────── */
#screen-gallery { position: absolute; inset: 0; overflow: hidden; }

.btn-save-photos {
  position: absolute; top: 46px; right: 24px;
  background: none; border: none;
  color: rgba(255,255,255,0.80);
  display: flex; align-items: center; justify-content: center;
  padding: 4px;
  cursor: pointer; z-index: 10;
}
.btn-save-photos svg { stroke: rgba(255,255,255,0.80); flex-shrink: 0; }

.gallery-heading {
  flex-shrink: 0;
  font-family: 'Playfair Display', serif;
  font-size: 36px; font-weight: 500; color: #fff;
  text-align: left; line-height: 1.3;
  margin-bottom: 10px;
}

.gallery-quote {
  flex-shrink: 0;
  font-family: 'Playfair Display', serif;
  font-style: italic; font-weight: 400;
  font-size: 20px;
  color: rgba(255,255,255,0.55); line-height: 1.45;
  text-align: center;
  margin-bottom: 8px;
  white-space: nowrap; /* prevent wrapping at any size */
}

.gallery-bottom {
  flex: 1; min-height: 0; position: relative;
}

.gallery-fan-area {
  position: absolute; inset: 0;
  pointer-events: none; /* let clicks reach center strip + buttons below */
}

.gallery-fan-strip {
  position: absolute;
  bottom: 112px; left: 50%;
  /* Width & height set dynamically by buildGalleryFan() to fill available space */
  width: 110px; height: 330px; /* fallback */
  background-color: #fff; /* visible while image loads */
  background-size: cover; background-position: top center;
  border-radius: 3px; overflow: hidden;
  transform-origin: bottom center;
  border: 1px solid rgba(0,0,0,0.08);
  pointer-events: none;
  transition: opacity 400ms ease;
}
/* Center strip is tappable (replay animation) */
.gallery-fan-strip:nth-child(3) {
  pointer-events: auto; cursor: pointer;
}

.gallery-actions {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 10;
  display: flex; flex-direction: column; gap: 16px;
}

/* ── Landscape takeover ──────────────────────────────────────────────────── */
/* Covers every screen whenever the phone is rotated sideways.
   Purely CSS-driven — no JS needed. */
#landscape-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 10000;
  background: #141414;
  flex-direction: column;
  align-items: center; justify-content: center;
  padding: 40px;
}
#landscape-overlay p {
  font-family: 'Playfair Display', serif;
  font-size: 32px; font-weight: 500;
  color: #fff; text-align: center; line-height: 1.4;
}
@media (orientation: landscape) {
  #landscape-overlay { display: flex; }
}