@import url("https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&display=swap");

:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #f3f4f7;
  background: #0b0d11;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --page-bg: #0b0d11;
  --page-glow: rgba(67, 79, 99, 0.19);
  --card-bg: rgba(18, 21, 27, 0.96);
  --card-border: #292e37;
  --surface: #151920;
  --surface-2: #1c2129;
  --line: #343b46;
  --muted: #8992a0;
  --text: #f3f5f8;
  --accent: #8ca6c9;
  --accent-soft: rgba(140, 166, 201, 0.19);
}

* { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; background: var(--page-bg); }
body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 20% 8%, var(--page-glow), transparent 34%),
    var(--page-bg);
  transition: background-color 900ms ease, color 900ms ease;
  -webkit-tap-highlight-color: transparent;
}
body.dialog-open { overflow: hidden; }
button, a { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

body[data-progress="1"] {
  --page-bg: #171015; --page-glow: rgba(116, 53, 78, 0.16); --card-bg: rgba(27, 18, 24, 0.96);
  --card-border: #3b2a33; --surface: #21171d; --surface-2: #2a1d25; --line: #49333e; --accent: #b07a90; --accent-soft: rgba(176, 122, 144, .18);
}
body[data-progress="2"] {
  --page-bg: #28131c; --page-glow: rgba(150, 54, 92, 0.18); --card-bg: rgba(40, 20, 29, 0.96);
  --card-border: #52303d; --surface: #321924; --surface-2: #3b1f2b; --line: #613748; --accent: #c47d9b; --accent-soft: rgba(196, 125, 155, .20);
}
body[data-progress="3"] {
  --page-bg: #431b2b; --page-glow: rgba(190, 73, 119, 0.20); --card-bg: rgba(61, 24, 39, 0.96);
  --card-border: #704052; --surface: #4c2031; --surface-2: #57263a; --line: #81475e; --accent: #dc8eae; --accent-soft: rgba(220, 142, 174, .22);
}
body[data-progress="4"] {
  --page-bg: #6a2947; --page-glow: rgba(232, 122, 165, 0.23); --card-bg: rgba(83, 31, 53, 0.96);
  --card-border: #96566e; --surface: #64263f; --surface-2: #71304a; --line: #a75f7a; --accent: #f0a7c3; --accent-soft: rgba(240, 167, 195, .23);
}
body[data-progress="5"] {
  --page-bg: #a94e78; --page-glow: rgba(255, 196, 218, 0.28); --card-bg: rgba(111, 41, 70, 0.96);
  --card-border: #cc7c9c; --surface: #873c5e; --surface-2: #94476a; --line: #dc91ad; --accent: #ffd1e1; --accent-soft: rgba(255, 209, 225, .25);
}

.game-shell {
  display: grid;
  min-height: 100dvh;
  place-items: center;
  padding: max(14px, env(safe-area-inset-top)) 14px max(18px, env(safe-area-inset-bottom));
  opacity: 1;
  transform: scale(1);
  transition: opacity 600ms ease, transform 600ms ease, filter 600ms ease;
}
.game-shell.game-exit { opacity: 0; filter: blur(10px); transform: scale(.975); }
.game-card {
  position: relative;
  width: min(100%, 430px);
  padding: 20px;
  overflow: hidden;
  border: 1px solid var(--card-border);
  border-radius: 24px;
  background: var(--card-bg);
  box-shadow: 0 24px 80px rgba(0,0,0,.38);
  transition: background 900ms ease, border-color 900ms ease;
}
.game-header { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.app-label, .level-count, .present-kicker, .section-kicker, .letter-date, .reveal-eyebrow {
  margin:0 0 5px; color:var(--muted); font-size:.69rem; font-weight:800; letter-spacing:.15em; text-transform:uppercase;
}
h1 { margin:0; font-size:2rem; letter-spacing:-.05em; }
.icon-button {
  display:grid; width:40px; height:40px; place-items:center; border:1px solid var(--line); border-radius:12px;
  color:var(--text); background:var(--surface); cursor:pointer; font-weight:800;
}
.progress-row { display:grid; grid-template-columns:repeat(5,1fr); gap:7px; margin:20px 0 18px; }
.progress-dot { height:4px; border-radius:999px; background:rgba(255,255,255,.12); transition:background 700ms ease, transform 200ms ease; }
.progress-dot.current { background:rgba(255,255,255,.35); }
.progress-dot.done { background:var(--accent); }
.level-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:10px; }
.level-heading h2 { margin:0; font-size:1.24rem; letter-spacing:-.025em; }
.cell-counter { color:var(--muted); font-size:.8rem; font-variant-numeric:tabular-nums; }
.status { min-height:20px; margin:0 0 14px; color:#b8bec8; font-size:.82rem; line-height:1.45; }

.zip-board-wrap { width:100%; max-width:min(86vw, 390px); margin:0 auto; }
.zip-board {
  position:relative; display:grid; grid-template-columns:repeat(var(--cols),1fr); grid-template-rows:repeat(var(--rows),1fr);
  width:100%; aspect-ratio:var(--cols)/var(--rows); overflow:hidden; border:1px solid var(--line); border-radius:15px;
  background:var(--surface); touch-action:none; user-select:none; transition:border-color 700ms ease, background 700ms ease;
}
.zip-cell {
  position:relative; z-index:4; display:grid; min-width:0; min-height:0; place-items:center; padding:0;
  border:0; border-right:1px solid rgba(255,255,255,.10); border-bottom:1px solid rgba(255,255,255,.10);
  color:var(--text); background:transparent; cursor:pointer;
}
.zip-cell::after {
  content:""; position:absolute; inset:14%; border-radius:8px; background:transparent; transition:background 120ms ease, transform 120ms ease;
}
.zip-cell.route-cell::after { background:var(--accent-soft); }
.zip-cell.route-end::after { background:rgba(255,255,255,.17); transform:scale(.86); }
.clue-number {
  position:relative; z-index:5; display:grid; width:clamp(22px, 7vw, 31px); height:clamp(22px, 7vw, 31px); place-items:center;
  border-radius:50%; color:#17151a; background:#f4f5f7; box-shadow:0 2px 10px rgba(0,0,0,.22); font-size:clamp(.72rem,3vw,.94rem); font-weight:850;
}
.route-layer { position:absolute; z-index:3; inset:0; width:100%; height:100%; pointer-events:none; }
.route-layer polyline {
  fill:none; stroke:var(--accent); stroke-width:.12; stroke-linecap:round; stroke-linejoin:round;
  transition:stroke 700ms ease;
}
.wall-top { border-top:4px solid rgba(246,247,250,.78) !important; }
.wall-right { border-right:4px solid rgba(246,247,250,.78) !important; }
.wall-bottom { border-bottom:4px solid rgba(246,247,250,.78) !important; }
.wall-left { border-left:4px solid rgba(246,247,250,.78) !important; }
.zip-cell.hint-cell::before {
  content:""; position:absolute; z-index:6; inset:21%; border:2px solid var(--accent); border-radius:8px; animation:hint-pulse 650ms ease 2;
}
.zip-board.invalid { animation:board-shake 240ms ease; }
.zip-board.solved { box-shadow:0 0 0 2px var(--accent), 0 0 35px var(--accent-soft); }

.game-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px; }
.secondary-button, .primary-button, .music-button, .present-link {
  display:inline-flex; align-items:center; justify-content:center; min-height:44px; border-radius:12px; font-weight:750; text-decoration:none; cursor:pointer;
}
.secondary-button { border:1px solid var(--line); color:var(--text); background:var(--surface-2); }
.primary-button { width:100%; border:0; color:#24131b; background:#f7dce7; }
.game-note { margin:11px 0 0; color:var(--muted); font-size:.72rem; text-align:center; }

.level-complete { position:absolute; z-index:20; inset:0; display:grid; place-items:end center; padding:18px; background:rgba(8,7,9,.20); backdrop-filter:blur(0); opacity:0; pointer-events:none; transition:opacity 240ms ease, backdrop-filter 240ms ease; }
.level-complete.visible { opacity:1; pointer-events:auto; backdrop-filter:blur(4px); }
.level-complete-card { width:100%; padding:20px; border:1px solid rgba(255,255,255,.14); border-radius:18px; background:rgba(18,14,18,.93); box-shadow:0 15px 50px rgba(0,0,0,.42); transform:translateY(20px); transition:transform 280ms ease; text-align:center; }
.level-complete.visible .level-complete-card { transform:translateY(0); }
.complete-check { display:grid; width:42px; height:42px; margin:0 auto 10px; place-items:center; border-radius:50%; color:#28141d; background:#f4d4e1; font-weight:900; }
.level-complete-card p { margin:0 0 14px; font-weight:750; }

.help-sheet { position:fixed; z-index:60; inset:0; display:grid; align-items:end; visibility:hidden; opacity:0; transition:opacity 220ms ease, visibility 220ms ease; }
.help-sheet.visible { visibility:visible; opacity:1; }
.sheet-backdrop { position:absolute; inset:0; width:100%; border:0; background:rgba(0,0,0,.58); }
.help-card { position:relative; width:min(100%,500px); margin:0 auto; padding:14px 22px max(24px,env(safe-area-inset-bottom)); border-radius:24px 24px 0 0; color:#272127; background:#f7f3f5; box-shadow:0 -20px 60px rgba(0,0,0,.30); }
.sheet-handle { width:42px; height:4px; margin:0 auto 18px; border-radius:999px; background:#cabec3; }
.help-card h3 { margin:0 0 14px; font-size:1.35rem; }
.help-card p { color:#62575c; line-height:1.55; }
.help-card .primary-button { margin-top:8px; color:white; background:#30262b; }

.surprise { display:none; min-height:100dvh; color:#3c2931; background:linear-gradient(160deg,#fff8fb 0%,#fde8f0 48%,#f8d9e6 100%); opacity:0; }
.surprise.visible { display:block; animation:reveal-in 900ms ease forwards; }
.surprise-inner { width:min(100%,980px); margin:0 auto; padding:70px 16px max(90px,env(safe-area-inset-bottom)); }
.surprise-hero { max-width:730px; margin:0 auto 34px; text-align:center; }
.reveal-eyebrow, .present-kicker, .section-kicker, .letter-date { color:#a1617a; }
.surprise h2 { margin:0; font-family:Georgia,"Times New Roman",serif; font-size:clamp(2.55rem,11vw,5.2rem); font-weight:500; letter-spacing:-.055em; line-height:.98; }
.reveal-intro { max-width:620px; margin:20px auto 0; color:#755864; font-size:1rem; line-height:1.7; }
.music-button { margin-top:22px; padding:0 18px; border:1px solid rgba(80,45,59,.18); color:#543843; background:rgba(255,255,255,.64); }

.present-card, .letter-card { width:min(100%,760px); margin:0 auto; padding:clamp(24px,6vw,48px); border:1px solid rgba(104,61,78,.12); border-radius:24px; background:rgba(255,255,255,.67); box-shadow:0 22px 60px rgba(120,65,87,.10); }
.present-card { position:relative; margin-bottom:62px; overflow:hidden; }
.present-card::after { content:"♥"; position:absolute; right:-8px; bottom:-35px; color:rgba(204,117,151,.10); font-size:9rem; transform:rotate(-12deg); }
.present-card h3, .section-heading h3 { margin:0; font-family:Georgia,"Times New Roman",serif; font-size:clamp(2rem,8vw,3.3rem); font-weight:500; letter-spacing:-.04em; }
.present-card p:not(.present-kicker) { position:relative; z-index:1; color:#684d58; line-height:1.75; }
.present-link { position:relative; z-index:1; margin-top:10px; padding:0 18px; color:white; background:#9e5571; }

.present-link[hidden] {
  display: none;
}

.memories-section { margin:0 auto 70px; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:16px; width:min(100%,920px); margin:0 auto 18px; }
.swipe-note { margin:0 0 5px; color:#a1617a; font-size:.78rem; font-weight:750; }
.memory-feed.layout-horizontal { display:flex; gap:16px; width:calc(100% + 16px); margin-left:0; padding:4px 16px 24px 0; overflow-x:auto; overscroll-behavior-inline:contain; scroll-snap-type:x mandatory; scrollbar-width:none; }
.memory-feed.layout-horizontal::-webkit-scrollbar { display:none; }
.memory-feed.layout-vertical { display:grid; gap:20px; width:min(100%,760px); margin:0 auto; }
.memory-card { position:relative; flex:0 0 min(82vw,340px); margin:0; padding:11px 11px 16px; overflow:visible; border:0; border-radius:13px; color:#49343d; background:#fffdfd; box-shadow:0 17px 38px rgba(120,67,87,.15); cursor:pointer; scroll-snap-align:center; text-align:left; transform:rotate(-.45deg); }
.memory-card:nth-child(even) { transform:rotate(.55deg); }
.memory-card::before { content:""; position:absolute; z-index:3; top:-8px; left:50%; width:68px; height:19px; background:rgba(244,204,217,.72); transform:translateX(-50%) rotate(-2deg); box-shadow:0 1px 3px rgba(80,35,50,.08); }
.memory-photo-frame { display:block; overflow:hidden; border:1px solid #f1e5e9; border-radius:7px; background:#f0e1e7; }
.memory-photo-frame img { display:block; width:100%; aspect-ratio:4/5; object-fit:cover; transition:transform 250ms ease; }
.memory-card:active .memory-photo-frame img { transform:scale(.985); }
.memory-copy { display:grid; gap:4px; padding:13px 7px 1px; }
.memory-copy strong { font-family:Georgia,"Times New Roman",serif; font-size:1.13rem; }
.memory-copy small { color:#a37a89; }
.memory-copy > span { margin-top:4px; color:#705762; font-size:.88rem; line-height:1.45; }
.layout-vertical .memory-card { width:100%; max-width:none; transform:none; }
.layout-vertical .memory-photo-frame img { aspect-ratio:4/3; }

.letter-card p:not(.letter-date):not(.final-line) { color:#5e4650; font-family:Georgia,"Times New Roman",serif; font-size:1.05rem; line-height:1.85; }
.final-line {
  margin: 30px 0 0;
  color: #49313b;
  font-family: "Noto Serif", "Times New Roman", serif;
  font-size: clamp(1.45rem, 6vw, 2.15rem);
  font-style: italic;
  line-height: 1.45;
}
.post-dialog { width:min(94vw,920px); max-width:none; max-height:90dvh; padding:0; overflow:hidden; border:0; border-radius:20px; color:#2f272a; background:#fff; box-shadow:0 26px 90px rgba(52,22,35,.38); }
.post-dialog::backdrop { background:rgba(23,10,16,.74); backdrop-filter:blur(5px); }
.post-shell { position:relative; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr); min-height:min(76vh,650px); }
.dialog-close { position:absolute; z-index:6; top:10px; right:10px; display:grid; width:38px; height:38px; place-items:center; border:0; border-radius:50%; color:#2d2026; background:rgba(255,255,255,.88); box-shadow:0 4px 14px rgba(0,0,0,.15); cursor:pointer; font-size:1.55rem; }
.post-image-wrap { display:grid; min-height:0; place-items:center; background:#f4edf0; }
.post-image-wrap img { display:block; width:100%; height:100%; max-height:76vh; object-fit:contain; }
.post-copy { display:flex; min-height:0; flex-direction:column; padding:24px; }
.post-profile { display:flex; align-items:center; gap:11px; padding-bottom:17px; border-bottom:1px solid #eee5e8; }
.profile-dot { display:grid; width:38px; height:38px; place-items:center; border-radius:50%; color:white; background:#c67293; }
.post-profile div { display:grid; gap:2px; }
.post-profile span:not(.profile-dot) { color:#9a7b87; font-size:.78rem; }
.post-text { flex:1; padding:18px 2px; overflow:auto; color:#67525b; line-height:1.64; }
.post-text .dialog-caption { color:#3f3036; font-weight:750; }
.post-nav { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px; padding-top:14px; border-top:1px solid #eee5e8; }
.post-nav button { min-height:38px; border:0; color:#7d4c60; background:transparent; cursor:pointer; font-weight:750; }
.post-nav button:last-child { text-align:right; }
.post-nav span { color:#a18a93; font-size:.8rem; }

.confetti-layer { position:fixed; z-index:90; inset:0; overflow:hidden; pointer-events:none; }
.confetti-piece { position:absolute; top:-18px; left:var(--x); width:8px; height:13px; border-radius:2px; background:hsl(var(--hue) 75% 65%); opacity:0; }
.confetti-layer.active .confetti-piece { animation:confetti-fall var(--duration) var(--delay) cubic-bezier(.2,.75,.25,1) forwards; }

@keyframes board-shake { 30%{transform:translateX(-3px)} 60%{transform:translateX(3px)} }
@keyframes hint-pulse { 50%{transform:scale(1.12); box-shadow:0 0 14px var(--accent)} }
@keyframes reveal-in { from{opacity:0} to{opacity:1} }
@keyframes confetti-fall { 0%{opacity:0;transform:translateY(-5vh) rotate(0)} 10%{opacity:1} 100%{opacity:.9;transform:translateY(110vh) rotate(var(--rotation))} }

@media (max-width: 680px) {
  .game-card { padding:18px; border-radius:21px; }
  .zip-board-wrap { max-width:100%; }
  .post-dialog { width:calc(100vw - 18px); max-height:92dvh; border-radius:17px; }
  .post-shell { display:flex; max-height:92dvh; min-height:0; flex-direction:column; }
  .post-image-wrap { flex:0 1 55dvh; min-height:240px; }
  .post-image-wrap img { max-height:55dvh; }
  .post-copy { min-height:210px; flex:1 1 auto; padding:16px; overflow:hidden; }
  .post-profile { padding-bottom:12px; }
  .post-text { padding:12px 1px; font-size:.92rem; }
  .surprise-inner { padding-top:56px; }
  .section-heading { padding:0 2px; }
}

@media (max-width: 360px) {
  .game-shell { padding-left:8px; padding-right:8px; }
  .game-card { padding:14px; border-radius:18px; }
  .status { font-size:.77rem; }
  .game-note { display:none; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; animation-duration:1ms!important; animation-iteration-count:1!important; transition-duration:1ms!important; }
}

/* Final-level bridge: a deliberate full-screen beat between the neutral game and
   the birthday content. The gradient itself carries the black→pink theme into
   the pale memory page, and the button gives the player an obvious next action. */
.final-bridge {
  display: none;
  min-height: 100dvh;
  place-items: center;
  padding: max(28px, env(safe-area-inset-top)) 20px max(34px, env(safe-area-inset-bottom));
  color: #fff7fb;
  background:
    radial-gradient(circle at 50% 26%, rgba(255,225,237,.20), transparent 32%),
    linear-gradient(180deg, #a94e78 0%, #bd668d 34%, #dc94b2 68%, #f7d9e5 94%, #fff8fb 100%);
  opacity: 0;
}
.final-bridge.visible {
  display: grid;
  animation: bridge-in 1100ms ease forwards;
}
.bridge-content {
  width: min(100%, 430px);
  margin-top: -7vh;
  text-align: center;
}
.bridge-check {
  display: grid;
  width: 54px;
  height: 54px;
  margin: 0 auto 22px;
  place-items: center;
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  box-shadow: 0 12px 36px rgba(76,22,47,.15);
  font-size: 1.35rem;
  font-weight: 900;
}
.bridge-kicker {
  margin: 0 0 7px;
  color: rgba(255,247,251,.76);
  font-size: .69rem;
  font-weight: 850;
  letter-spacing: .17em;
}
.final-bridge h2 {
  margin: 0;
  font-size: clamp(3.2rem, 17vw, 5.5rem);
  font-weight: 720;
  letter-spacing: -.07em;
  line-height: .95;
}
.bridge-copy {
  margin: 16px 0 26px;
  color: rgba(255,247,251,.88);
  font-size: 1rem;
}
.scroll-down-button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 22px;
  border: 1px solid rgba(255,255,255,.42);
  border-radius: 999px;
  color: #6f2d4c;
  background: rgba(255,249,252,.90);
  box-shadow: 0 14px 34px rgba(77,25,48,.16);
  cursor: pointer;
  font-weight: 800;
}
.scroll-down-button span {
  display: inline-block;
  animation: scroll-nudge 1.5s ease-in-out infinite;
}

@keyframes bridge-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes scroll-nudge {
  0%, 100% { transform: translateY(-2px); }
  50% { transform: translateY(4px); }
}

.post-image-wrap {
  position: relative;
}

.photo-nav {
  position: absolute;
  z-index: 5;
  top: 50%;

  display: grid;
  width: 42px;
  height: 42px;

  place-items: center;

  border: 0;
  border-radius: 50%;

  color: #3b2830;
  background: rgba(255, 255, 255, 0.88);

  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.17);

  transform: translateY(-50%);

  cursor: pointer;

  font-size: 1.8rem;
  line-height: 1;
}

.photo-nav-previous {
  left: 12px;
}

.photo-nav-next {
  right: 12px;
}

.photo-counter {
  position: absolute;
  z-index: 5;

  top: 14px;
  left: 50%;

  padding: 6px 11px;

  border-radius: 999px;

  color: white;
  background: rgba(20, 15, 17, 0.58);

  backdrop-filter: blur(8px);

  transform: translateX(-50%);

  font-size: 0.75rem;
  font-weight: 700;
}

.photo-dots {
  position: absolute;
  z-index: 5;

  bottom: 14px;
  left: 50%;

  display: flex;
  gap: 5px;

  transform: translateX(-50%);
}

.photo-dot {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.48);

  box-shadow: 0 1px 4px rgba(0,0,0,.15);
}

.photo-dot.active {
  background: white;
  transform: scale(1.2);
}

.photo-nav[hidden],
.photo-counter[hidden],
.photo-dots[hidden] {
  display: none;
}

.memory-photo-frame {
  position: relative;
}

.memory-photo-count {
  position: absolute;
  top: 10px;
  right: 10px;

  padding: 6px 9px;

  border-radius: 999px;

  color: white;
  background: rgba(35, 22, 28, 0.62);

  backdrop-filter: blur(7px);

  font-size: 0.72rem;
  font-weight: 750;
}

@media (max-width: 680px) {
  .photo-nav {
    width: 36px;
    height: 36px;

    background: rgba(255,255,255,.82);

    font-size: 1.55rem;
  }

  .photo-nav-previous {
    left: 8px;
  }

  .photo-nav-next {
    right: 8px;
  }
}

/* Month-by-month photo gallery --------------------------------------------- */
.memory-feed.image-gallery-feed {
  display: grid;
  gap: 42px;
  width: min(100%, 920px);
  margin: 0 auto;
}

.memory-month {
  min-width: 0;
}

.memory-month-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  padding: 0 2px;
  margin-bottom: 13px;
}

.memory-month-heading p {
  margin: 0;
  color: #a1617a;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.memory-month-heading h4 {
  margin: 0;
  color: #49313b;
  font-family: "Noto Serif", Georgia, "Times New Roman", serif;
  font-size: clamp(1.45rem, 5vw, 2rem);
  font-weight: 600;
  letter-spacing: -.035em;
}

.image-carousel {
  display: flex;
  gap: 14px;
  width: calc(100% + 16px);
  padding: 5px 16px 18px 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.image-carousel::-webkit-scrollbar {
  display: none;
}

.carousel-image {
  position: relative;
  flex: 0 0 min(76vw, 310px);
  aspect-ratio: 4 / 5;
  padding: 8px;
  overflow: hidden;
  border: 0;
  border-radius: 18px;
  color: #49313d;
  background: #fffdfd;
  box-shadow: 0 14px 34px rgba(120, 67, 87, .15);
  cursor: pointer;
  scroll-snap-align: center;
  text-align: left;
}

.carousel-image img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  object-fit: cover;
  transition: transform 220ms ease;
}

.carousel-image:active img {
  transform: scale(.985);
}

.carousel-image-label {
  position: absolute;
  left: 17px;
  right: 17px;
  bottom: 17px;
  overflow: hidden;
  padding: 8px 10px;
  border-radius: 10px;
  color: white;
  background: rgba(36, 22, 29, .60);
  backdrop-filter: blur(8px);
  font-size: .78rem;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.post-dialog[open] .post-shell {
  animation: photo-dialog-open 300ms cubic-bezier(.2, .8, .2, 1);
}

.post-nav button[hidden] {
  display: none;
}

@keyframes photo-dialog-open {
  from {
    opacity: 0;
    transform: scale(.93) translateY(14px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@media (max-width: 680px) {
  .memory-feed.image-gallery-feed {
    gap: 34px;
  }

  .memory-month-heading {
    display: block;
    padding: 0 2px;
  }

  .memory-month-heading p {
    margin-bottom: 4px;
  }

  .image-carousel {
    gap: 11px;
    width: calc(100% + 16px);
  }

  .carousel-image {
    flex-basis: 78vw;
    max-width: 310px;
    border-radius: 16px;
  }

  .post-dialog[open] .post-shell {
    animation-duration: 240ms;
  }
}


/* Image loading fallback -------------------------------------------------- */
/* If neither /photos/... nor /public/photos/... exists, keep the card shape
   intact instead of showing the browser's tiny broken-image icon. */
.carousel-image img.image-load-error,
.post-image-wrap img.image-load-error {
  opacity: .18;
}

.carousel-image:has(img.image-load-error)::after {
  content: "Image not found";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  color: #8a6876;
  font-size: .8rem;
  font-weight: 750;
  text-align: center;
  pointer-events: none;
}


/* 12-month memory selector ------------------------------------------------ */
.memory-feed.month-memory-browser {
  display: grid;
  gap: 26px;
  width: min(100%, 920px);
  margin: 0 auto;
}

.month-selector-wrap {
  min-width: 0;
}

.month-selector {
  display: flex;
  gap: 11px;
  width: calc(100% + 16px);
  padding: 5px 16px 18px 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.month-selector::-webkit-scrollbar {
  display: none;
}

.month-slot {
  position: relative;
  flex: 0 0 118px;
  padding: 7px;
  overflow: hidden;
  border: 1px solid rgba(121, 72, 91, .11);
  border-radius: 17px;
  color: #513641;
  background: rgba(255,255,255,.78);
  box-shadow: 0 11px 28px rgba(120,67,87,.10);
  cursor: pointer;
  scroll-snap-align: start;
  text-align: left;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease,
    opacity 180ms ease;
}

.month-slot.has-memory:active {
  transform: scale(.975);
}

.month-slot.selected {
  border-color: rgba(171, 84, 119, .65);
  box-shadow:
    0 0 0 2px rgba(196, 111, 145, .18),
    0 14px 32px rgba(120,67,87,.16);
  transform: translateY(-2px);
}

.month-slot.empty-month {
  opacity: .44;
  cursor: default;
}

.month-slot-media {
  display: grid;
  width: 100%;
  aspect-ratio: 1 / 1.15;
  place-items: center;
  overflow: hidden;
  border-radius: 12px;
  background:
    linear-gradient(145deg, rgba(246,214,226,.78), rgba(255,249,252,.95));
}

.month-slot-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.month-slot-placeholder {
  color: rgba(145, 83, 107, .58);
  font-family: "Noto Serif", Georgia, serif;
  font-size: 1.25rem;
  font-weight: 650;
}

.month-slot-copy {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  padding: 9px 4px 2px;
}

.month-slot-copy strong {
  font-size: .88rem;
}

.month-slot-copy small {
  color: #a37a89;
  font-size: .68rem;
}

.month-highlights[hidden] {
  display: none;
}

.month-highlights {
  min-width: 0;
  padding: 20px 0 6px;
  border-top: 1px solid rgba(121,72,91,.13);
  animation: month-highlights-in 300ms ease both;
}

.selected-month-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  padding: 0 2px;
  margin-bottom: 13px;
}

.selected-month-heading p {
  margin: 0 0 3px;
  color: #a1617a;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.selected-month-heading h4 {
  margin: 0;
  color: #49313b;
  font-family: "Noto Serif", Georgia, "Times New Roman", serif;
  font-size: clamp(1.65rem, 6vw, 2.25rem);
  font-weight: 600;
  letter-spacing: -.04em;
}

.selected-month-heading > span {
  flex: 0 0 auto;
  margin-bottom: 4px;
  color: #9b7584;
  font-size: .75rem;
  font-weight: 700;
}

.selected-month-carousel {
  margin-top: 2px;
}

.month-slot img.image-load-error {
  opacity: .2;
}

@keyframes month-highlights-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 680px) {
  .memory-feed.month-memory-browser {
    gap: 20px;
  }

  .month-selector {
    gap: 9px;
  }

  .month-slot {
    flex-basis: 104px;
    border-radius: 15px;
  }

  .selected-month-heading {
    align-items: start;
  }

  .selected-month-heading > span {
    margin-top: 7px;
  }
}


/* Photo-first popup viewer ------------------------------------------------ */
.post-dialog {
  width: min(96vw, 860px);
  max-height: 94dvh;
  overflow: visible;
  border-radius: 24px;
  background: transparent;
  box-shadow: none;
}

.post-dialog::backdrop {
  background: rgba(38, 20, 29, .82);
  backdrop-filter: blur(10px);
}

.post-shell {
  display: block;
  min-height: 0;
  background: transparent;
}

.post-copy {
  display: none !important;
}

.post-image-wrap {
  position: relative;
  display: block;
  min-height: 0;
  padding: 52px 58px 66px;
  overflow: visible;
  border-radius: 24px;
  background: rgba(255, 246, 250, .20);
  box-shadow: 0 28px 80px rgba(35, 13, 23, .36);
  backdrop-filter: blur(7px);
}

.photo-stage {
  position: relative;
  display: grid;
  min-height: min(72dvh, 680px);
  place-items: center;
  overflow: hidden;
  border-radius: 20px;
  touch-action: none;
  user-select: none;
  cursor: zoom-in;
}

.photo-stage:has(img.is-zoomed) {
  cursor: grab;
}

.photo-stage:has(img.is-zoomed):active {
  cursor: grabbing;
}

.cute-photo-frame {
  position: relative;
  display: grid;
  max-width: 100%;
  max-height: min(72dvh, 680px);
  place-items: center;
  padding: 12px;
  transition: transform 220ms ease;
}

.cute-photo-frame img {
  display: block;
  width: auto;
  max-width: min(72vw, 720px);
  height: auto;
  max-height: min(68dvh, 640px);
  object-fit: contain;
  transform-origin: center center;
  transition: transform 120ms ease-out, opacity 160ms ease;
  will-change: transform;
  user-select: none;
  -webkit-user-drag: none;
}

/* Random deterministic frame styles. */
.cute-frame-polaroid {
  padding: 14px 14px 44px;
  border-radius: 5px;
  background: #fffdf8;
  box-shadow:
    0 18px 38px rgba(49, 22, 34, .24),
    inset 0 0 0 1px rgba(92, 52, 67, .08);
  transform: rotate(-1deg);
}

.cute-frame-polaroid::after {
  content: "♡";
  position: absolute;
  right: 14px;
  bottom: 9px;
  color: #ce7e9d;
  font-family: Georgia, serif;
  font-size: 1.35rem;
}

.cute-frame-tape {
  padding: 12px;
  border: 8px solid #fff9fc;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(49, 22, 34, .24);
  transform: rotate(.65deg);
}

.cute-frame-tape::before,
.cute-frame-tape::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: -14px;
  width: 68px;
  height: 24px;
  background: rgba(246, 188, 211, .76);
  box-shadow: 0 2px 5px rgba(70, 31, 46, .10);
}

.cute-frame-tape::before {
  left: 13%;
  transform: rotate(-7deg);
}

.cute-frame-tape::after {
  right: 13%;
  transform: rotate(7deg);
}

.cute-frame-scallop {
  padding: 16px;
  border: 6px solid #f7bfd4;
  border-radius: 28px 10px 28px 10px;
  background: #fff9fc;
  box-shadow:
    0 18px 42px rgba(49, 22, 34, .23),
    0 0 0 6px rgba(255, 238, 245, .90);
}

.cute-frame-scallop::after {
  content: "♡  ♡  ♡";
  position: absolute;
  left: 50%;
  bottom: -7px;
  padding: 2px 9px;
  border-radius: 999px;
  color: #b96082;
  background: #fff5f9;
  transform: translateX(-50%);
  font-size: .82rem;
  letter-spacing: .18em;
}

.cute-frame-sticker {
  padding: 13px;
  border: 5px solid #fff;
  border-radius: 24px;
  background: #fff;
  box-shadow:
    0 16px 38px rgba(49, 22, 34, .24),
    8px 8px 0 rgba(243, 178, 205, .72);
  transform: rotate(-.45deg);
}

.cute-frame-sticker::before {
  content: "★";
  position: absolute;
  z-index: 2;
  top: -18px;
  right: -12px;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 50%;
  color: white;
  background: #d780a3;
  box-shadow: 0 6px 13px rgba(64, 24, 41, .18);
}

.cute-frame-ribbon {
  padding: 14px;
  border: 6px solid #f7d5e2;
  border-radius: 12px;
  background: #fffafc;
  box-shadow: 0 18px 40px rgba(49, 22, 34, .23);
  transform: rotate(.35deg);
}

.cute-frame-ribbon::after {
  content: "♥";
  position: absolute;
  top: -18px;
  left: 50%;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #c96f93;
  transform: translateX(-50%);
  box-shadow: 0 6px 15px rgba(58, 22, 37, .18);
}

.zoom-controls {
  position: absolute;
  z-index: 8;
  right: 50%;
  bottom: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px;
  border-radius: 999px;
  background: rgba(255,255,255,.90);
  box-shadow: 0 8px 24px rgba(46, 19, 31, .22);
  transform: translateX(50%);
  backdrop-filter: blur(8px);
}

.zoom-controls button {
  min-width: 38px;
  height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  color: #543442;
  background: transparent;
  cursor: pointer;
  font-weight: 800;
}

.zoom-controls button:hover {
  background: #f8e7ee;
}

#zoomResetButton {
  min-width: 62px;
  font-size: .78rem;
  font-variant-numeric: tabular-nums;
}

.post-dialog .dialog-close {
  top: 10px;
  right: 10px;
  z-index: 12;
}

.post-dialog .photo-counter {
  top: 12px;
}

.post-dialog .photo-dots {
  bottom: 61px;
}

.post-dialog .photo-nav {
  z-index: 9;
}

@media (max-width: 680px) {
  .post-dialog {
    width: calc(100vw - 12px);
    max-height: 96dvh;
  }

  .post-image-wrap {
    padding: 48px 40px 64px;
    border-radius: 20px;
  }

  .photo-stage {
    min-height: 68dvh;
    border-radius: 16px;
  }

  .cute-photo-frame {
    max-height: 66dvh;
  }

  .cute-photo-frame img {
    max-width: calc(100vw - 92px);
    max-height: 61dvh;
  }

  .photo-nav-previous {
    left: 6px;
  }

  .photo-nav-next {
    right: 6px;
  }

  .zoom-controls {
    bottom: 11px;
  }

  .post-dialog .photo-dots {
    bottom: 57px;
  }
}


/* Viewer alignment polish ------------------------------------------------ */
.post-dialog {
  width: min(96vw, 900px);
}

.post-image-wrap {
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: min(86dvh, 760px);
  padding: 50px 66px 18px;
}

.photo-stage {
  width: 100%;
  min-height: 0;
  height: min(72dvh, 650px);
  place-items: center;
}

.cute-photo-frame {
  margin: auto;
  max-width: min(100%, 720px);
  max-height: 100%;
}

.cute-photo-frame img {
  max-width: min(100%, 690px);
  max-height: min(66dvh, 610px);
}

.post-dialog .photo-counter {
  top: 13px;
  left: 50%;
  transform: translateX(-50%);
}

.post-dialog .photo-nav {
  top: 50%;
}

.post-dialog .photo-nav-previous {
  left: 14px;
}

.post-dialog .photo-nav-next {
  right: 14px;
}

.post-dialog .photo-dots {
  left: 50%;
  bottom: 67px;
  max-width: 60%;
  justify-content: center;
  transform: translateX(-50%);
}

.post-dialog .zoom-controls {
  position: relative;
  right: auto;
  bottom: auto;
  justify-self: center;
  margin-top: 10px;
  transform: none;
}

/* Don't leave an empty dots row when a large album hides the dots. */
.post-dialog .photo-dots[hidden] {
  display: none !important;
}

/* Vietnamese-safe letter typography ------------------------------------- */
.letter-card {
  width: min(100%, 800px);
  padding: clamp(28px, 6vw, 54px);
}

.letter-card p:not(.letter-date):not(.final-line) {
  color: #563e49;
  font-family: "Noto Serif", "Times New Roman", serif;
  font-size: clamp(1rem, 2.1vw, 1.08rem);
  font-weight: 400;
  line-height: 1.95;
  letter-spacing: 0;
  word-spacing: 0.015em;
  text-rendering: optimizeLegibility;
}

.letter-date {
  margin-bottom: 18px;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}

.final-line {
  margin-top: 34px;
  font-family: "Noto Serif", "Times New Roman", serif;
  font-size: clamp(1.55rem, 5vw, 2.25rem);
  font-weight: 500;
  font-style: italic;
  line-height: 1.5;
  letter-spacing: -.015em;
}

@media (max-width: 680px) {
  .post-dialog {
    width: calc(100vw - 10px);
  }

  .post-image-wrap {
    min-height: 88dvh;
    padding: 48px 42px 14px;
  }

  .photo-stage {
    height: 72dvh;
  }

  .cute-photo-frame img {
    max-width: calc(100vw - 94px);
    max-height: 66dvh;
  }

  .post-dialog .photo-nav-previous {
    left: 5px;
  }

  .post-dialog .photo-nav-next {
    right: 5px;
  }

  .post-dialog .zoom-controls {
    margin-top: 8px;
  }

  .letter-card {
    padding: 28px 22px 34px;
  }

  .letter-card p:not(.letter-date):not(.final-line) {
    font-size: 1rem;
    line-height: 1.9;
  }

  .final-line {
    margin-top: 30px;
    font-size: clamp(1.55rem, 7vw, 2rem);
  }
}