/* ---------------------------------------------------------------------------
   Lovemory Template 03 — analog scrapbook anniversary story
   Palette and materials follow MANUS_ASSET_PRD.md. The pages are intentionally
   tactile: paper grain, low-saturation ink, taped photos, and imperfect edges.
--------------------------------------------------------------------------- */
@font-face {
  font-family: 'JaoTomato';
  src: url('../assets/fonts/JaoTomato-Thin.ttf') format('truetype');
  font-display: swap;
}

:root {
  --ink: #3b2b22;
  --paper: #f5ede1;
  --paper-deep: #e9ddcd;
  --pink: #e7b7b0;
  --pink-deep: #cc8e8b;
  --kraft: #a9835f;
  --brown-deep: #574033;
  --brown-dark: #30241f;
  --sage: #aab5a1;
  --cream-white: #fffaf1;
  --star-blue: #c4c9bb;
  --shadow: rgba(59, 43, 34, .25);

  --bg: var(--paper);
  --fg: var(--ink);
  --accent: var(--pink-deep);
  --dot: rgba(59, 43, 34, .10);
}

.theme-dark  { --bg: var(--brown-dark);  --fg: var(--paper); --accent: var(--pink); --dot: rgba(245, 237, 225, .10); }
.theme-brown { --bg: var(--brown-deep);  --fg: var(--paper); --accent: var(--pink); --dot: rgba(245, 237, 225, .10); }
.theme-cream { --bg: var(--paper);       --fg: var(--ink);   --accent: var(--pink-deep); --dot: rgba(59, 43, 34, .10); }
.theme-pink  { --bg: #efd0c9;             --fg: var(--ink);   --accent: var(--brown-deep); --dot: rgba(59, 43, 34, .09); }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--brown-dark);
  font-family: 'Mali', sans-serif;
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .24;
  background-image:
    radial-gradient(rgba(245, 237, 225, .18) .7px, transparent .9px),
    radial-gradient(rgba(20, 12, 8, .13) .55px, transparent .8px);
  background-position: 0 0, 11px 13px;
  background-size: 19px 17px, 23px 21px;
  mix-blend-mode: soft-light;
}

#app {
  position: relative;
  max-width: 540px;
  height: 100%;
  margin: 0 auto;
  overflow: hidden;
  box-shadow: 0 0 2.2rem rgba(0, 0, 0, .16);
}

.step {
  display: none;
  position: absolute;
  inset: 0;
  padding: 4.5rem 1.5rem 2.5rem;
  background-color: var(--bg);
  color: var(--fg);
  overflow-y: auto;
  text-align: center;
  isolation: isolate;
  scrollbar-width: none;
  background-image:
    radial-gradient(var(--dot) .8px, transparent .9px),
    repeating-linear-gradient(97deg, transparent 0 11px, rgba(255,255,255,.035) 11px 12px, transparent 12px 27px),
    repeating-linear-gradient(4deg, transparent 0 17px, rgba(57,37,25,.025) 17px 18px, transparent 18px 31px);
  background-size: 2rem 2rem, 43px 37px, 51px 47px;
}
.step::-webkit-scrollbar { display: none; }
.step::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .34;
  background: radial-gradient(ellipse at 20% 0%, rgba(255,255,255,.20), transparent 46%), radial-gradient(ellipse at 95% 100%, rgba(54,33,21,.08), transparent 46%);
}
.step.active {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .9rem;
  animation: page-in .32s cubic-bezier(.23, 1, .32, 1) both;
}
.step > * { position: relative; z-index: 1; }

@keyframes page-in {
  from { opacity: 0; transform: translateY(12px) rotate(.25deg); }
  to { opacity: 1; transform: translateY(0) rotate(0); }
}

.step-no {
  position: absolute;
  top: 1.6rem;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  min-width: 3.4rem;
  padding: .18rem .75rem .1rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: .78rem;
  letter-spacing: .14em;
  opacity: .76;
}

.script {
  font-family: 'Yellowtail', 'Caveat', 'JaoTomato', cursive;
  font-weight: 400;
  line-height: 1.08;
  margin: 0;
  font-size: clamp(2.35rem, 9vw, 3.2rem);
  letter-spacing: .01em;
  text-shadow: .06rem .07rem 0 rgba(245, 237, 225, .15);
}
.script-hero { font-size: clamp(2.85rem, 13vw, 4rem); transform: rotate(-3deg); }
.script i { font-style: normal; font-size: .8em; }

.paper-note {
  margin: 0;
  padding: .95rem 1.25rem 1rem;
  max-width: 22rem;
  white-space: pre-line;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.85;
  background: url('../assets/paper/note-cream.webp') center / 100% 100% no-repeat;
  filter: drop-shadow(.22rem .3rem .45rem var(--shadow));
  transform: rotate(-1deg);
}
.note-sm { font-size: .9rem; padding: .72rem 1rem .78rem; }

.sticker-btn {
  margin-top: .5rem;
  padding: .66rem 1.5rem .58rem;
  border: 1px solid rgba(59, 43, 34, .34);
  border-radius: .15rem;
  background: var(--pink);
  color: var(--brown-deep);
  font-family: 'Mali', sans-serif;
  font-size: .9rem;
  line-height: 1.35;
  transform: rotate(-2deg);
  box-shadow: .24rem .26rem 0 rgba(59, 43, 34, .8);
  cursor: pointer;
  transition: transform .16s ease-out, box-shadow .16s ease-out;
}
.sticker-btn:hover { transform: rotate(-2deg) translateY(-2px); }
.sticker-btn:active { transform: rotate(-2deg) translate(.12rem, .12rem); box-shadow: .1rem .1rem 0 rgba(59, 43, 34, .8); }

/* Generated scrapbook stickers are layered behind the copy and never block taps. */
.scrap-deco { position: absolute; z-index: 0; pointer-events: none; user-select: none; }
.cover-sprig { width: 4.8rem; top: 3.8%; right: .1rem; opacity: .86; transform: rotate(19deg); }
.cover-star { position: absolute; z-index: 0; width: 2rem; height: 2rem; opacity: .76; pointer-events: none; background: center / contain no-repeat; filter: drop-shadow(.08rem .12rem .18rem rgba(0,0,0,.16)); }
.cover-star-cream { background-image: url('../assets/scrapbook/stars/star-cut-paper.png'); }
.cover-star-pink { background-image: url('../assets/scrapbook/stars/star-diecut.png'); }
.cover-star-sage { background-image: url('../assets/scrapbook/stars/star-doodle.png'); opacity: .7; }
.cover-sparkle-gold { background-image: url('../assets/scrapbook/stars/sparkle-4point.png'); }
.cover-sparkle-blue { background-image: url('../assets/scrapbook/stars/sparkle-scatter.png'); }
.cover-star-a { width: 3rem; height: 3rem; top: 14%; left: 8%; transform: rotate(-15deg); }
.cover-star-b { width: 1.55rem; height: 1.55rem; top: 23%; left: 23%; transform: rotate(14deg); }
.cover-star-c { width: 3.8rem; height: 3.8rem; top: 25%; right: 7%; transform: rotate(9deg); }
.cover-star-d { width: 1.15rem; height: 1.15rem; top: 35%; left: 10%; transform: rotate(-8deg); }
.cover-star-e { width: 2.45rem; height: 2.45rem; top: 10%; right: 20%; transform: rotate(7deg); }
.cover-star-f { width: 1.55rem; height: 1.55rem; bottom: 24%; right: 18%; transform: rotate(-17deg); }
.cover-star-g { width: 2.15rem; height: 2.15rem; bottom: 15%; left: 17%; transform: rotate(13deg); }
.pin-star { width: 6.5rem; top: 11%; left: -1.7rem; opacity: .77; transform: rotate(-15deg); }
.story-sparkles { width: 5.1rem; top: 10%; right: -.9rem; opacity: .66; transform: rotate(7deg); }
.story-heart { width: 4rem; bottom: 6%; left: -.9rem; opacity: .68; transform: rotate(-10deg); }
.song-star { width: 5.6rem; top: 16%; left: -1.8rem; opacity: .64; transform: rotate(-11deg); }
.ending-star { width: 5.2rem; right: -.9rem; bottom: 8%; opacity: .72; transform: rotate(9deg); }

/* Small fallback ornaments remain as ink-and-paper marks, with generated art inside. */
.deco { position: absolute; z-index: 0; width: 2rem; height: 2rem; opacity: .62; pointer-events: none; background: center / contain no-repeat; }
.deco-star { background-image: url('../assets/scrapbook/stars/star-cut-paper.png'); }
.deco-star.blue { background-image: url('../assets/scrapbook/stars/sparkle-4point.png'); }
.deco-heart { background-image: url('../assets/scrapbook/hearts/heart-doodle.png'); }
.s1 { top: 13%; left: 5%; transform: rotate(-9deg); }
.s2 { top: 25%; right: 7%; transform: scale(.8) rotate(8deg); }
.s3 { bottom: 16%; left: 8%; transform: rotate(5deg); }

.heart-doodle {
  position: relative;
  width: 13rem;
  height: 10rem;
  margin: .2rem 0 .45rem;
  background: url('../assets/scrapbook/hearts/heart-flower.png') center / contain no-repeat;
  filter: drop-shadow(.24rem .35rem .45rem rgba(0, 0, 0, .16));
  transform: rotate(-4deg);
}

/* --- step 2: PIN -------------------------------------------------------- */
.pin-card {
  width: min(19rem, 88%);
  padding: 1.45rem 1rem 1.15rem;
  color: var(--ink);
  background: url('../assets/paper/card-kraft.webp') center / 100% 100% no-repeat;
  filter: drop-shadow(.25rem .35rem .6rem var(--shadow));
  transform: rotate(1.5deg);
}
.pin-question { margin: 0 0 1rem; font-size: 1rem; }
.pin-inputs { display: flex; justify-content: center; gap: .35rem; }
.pin-slot { position: relative; width: 2.1rem; height: 2.5rem; }
.pin-digit {
  width: 100%; height: 100%;
  border: 1.5px solid var(--ink);
  background: rgba(245, 237, 225, .20);
  color: transparent;
  caret-color: var(--ink);
  text-align: center;
  font-size: 1.2rem;
  font-family: 'Mali', sans-serif;
}
.pin-digit:focus { outline: 2px solid var(--accent); outline-offset: 1px; background: rgba(255, 250, 241, .42); }
.pin-digit-img { display: none; position: absolute; inset: 12%; width: 76%; height: 76%; object-fit: contain; pointer-events: none; }
.pin-slot-tip { margin: .9rem 0 0; font-size: .82rem; opacity: .76; }
.unlock-hint { margin: auto 0 .4rem; padding: .38rem 1.55rem .28rem; border: 1px solid currentColor; border-radius: 999px; font-size: .9rem; letter-spacing: .12em; transform: rotate(-2deg); }
.toast { margin: .2rem 0 0; padding: .35rem .9rem .3rem; background: var(--paper); color: var(--ink); font-size: .9rem; box-shadow: .15rem .15rem 0 var(--brown-deep); transform: rotate(-1deg); }
.toast-success { background: var(--pink); }
.icon-heart { display: inline-block; width: .7rem; height: .7rem; background: var(--brown-deep); clip-path: polygon(50% 100%, 15% 68%, 0 38%, 8% 12%, 30% 4%, 50% 20%, 70% 4%, 92% 12%, 100% 38%, 85% 68%); }

@keyframes shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
#app.shake { animation: shake .45s; }

/* --- story pages -------------------------------------------------------- */
.step-story { height: 100dvh; padding-top: 3.5rem; padding-bottom: 1.1rem; overflow: hidden; }
.step-story.active { justify-content: center; gap: .15rem; }
.polaroids { display: flex; flex: 0 0 auto; flex-direction: column; justify-content: space-between; gap: clamp(.2rem, 1vh, .55rem); width: min(100%, 24rem); height: min(77dvh, 40rem); align-items: stretch; padding: .15rem .2rem .25rem; overflow: visible; }
.pattern-left-right-left .polaroids,
.pattern-right-left-right .polaroids { align-items: stretch; }
.polaroid {
  position: relative;
  width: min(12.4rem, 20vh, 64%);
  aspect-ratio: 1145 / 1374;
  margin: 0;
  padding: 0;
  color: var(--ink);
  background: #111015;
  border: 1px solid rgba(0, 0, 0, .78);
  border-radius: .16rem;
  filter: drop-shadow(.18rem .3rem .45rem var(--shadow));
  transition: transform .18s ease-out;
}
.polaroid:hover { transform: translateY(-2px) rotate(-1deg); }
.polaroid::after { content: ''; position: absolute; inset: .08rem; background: transparent; border: 1px solid rgba(245, 237, 225, .16); border-radius: .12rem; z-index: 2; pointer-events: none; }
.pattern-left-right-left .polaroid::after,
.pattern-right-left-right .polaroid::after { filter: none; }
.photo-left { align-self: flex-start; margin-left: .15rem; }
.photo-right { align-self: flex-end; margin-right: .15rem; }
.pattern-left-right-left .photo-left:nth-child(3) { transform: rotate(-3.1deg); }
.pattern-left-right-left .photo-right { transform: rotate(2.8deg); }
.pattern-right-left-right .photo-right { transform: rotate(3.1deg); }
.pattern-right-left-right .photo-left { transform: rotate(-2.8deg); }
.polaroid img { position: absolute; left: 5.5%; top: 5.5%; width: 89%; height: 76%; object-fit: cover; display: block; background: #090a0f; z-index: 1; }
.polaroid figcaption { position: absolute; left: 0; right: 0; bottom: 2.5%; height: 14%; z-index: 5; display: grid; place-content: center; padding: 0 .45rem; color: var(--paper); font-size: .7rem; line-height: 1.3; text-shadow: 0 1px 0 rgba(0,0,0,.5); }
.polaroid .pl-date { display: block; font-weight: 600; }
.tilt-left { transform: rotate(-2.2deg); }
.tilt-right { transform: rotate(2.6deg); }
.tilt-right .label-sticker { left: auto; right: -1.4rem; }
.label-sticker { position: absolute; top: 1.2rem; left: -1.4rem; z-index: 5; padding: .18rem .5rem .12rem; background: var(--cream-white); font-size: .66rem; letter-spacing: .04em; transform: rotate(-4deg); box-shadow: .12rem .12rem 0 var(--shadow); }
.label-sticker:empty { display: none; }

/* Generated washi is the tactile tape layer holding each paper piece down. */
.polaroid::before,
.lined-note::before { content: ''; position: absolute; top: -.6rem; left: 50%; width: 5.1rem; height: 1.55rem; transform: translateX(-50%) rotate(-3deg); background: var(--tape) center / 100% 100% no-repeat; z-index: 4; pointer-events: none; }
.pin-card, .lined-note { position: relative; }
.lined-note::before { --tape: url('../assets/scrapbook/tape/polka-brown.png'); }
.polaroids .polaroid:nth-child(3n+1)::before { --tape: url('../assets/scrapbook/tape/grid-pink.png'); }
.polaroids .polaroid:nth-child(3n+2)::before { --tape: url('../assets/scrapbook/tape/hearts.png'); transform: translateX(-50%) rotate(2.5deg); }
.polaroids .polaroid:nth-child(3n+3)::before { --tape: url('../assets/scrapbook/tape/strawberry.png'); transform: translateX(-50%) rotate(-1.5deg); }
.polaroid-wide::before { --tape: url('../assets/scrapbook/tape/kraft.png'); }
.polaroid-end::before { --tape: url('../assets/scrapbook/tape/strawberry.png'); transform: translateX(-50%) rotate(4deg); }

/* --- our song ----------------------------------------------------------- */
.polaroid-wide { width: min(18rem, 84%); }
.player { width: min(18rem, 84%); padding: .78rem .85rem .62rem; border-radius: .55rem; background: var(--brown-dark); color: var(--paper); text-align: left; box-shadow: .22rem .26rem 0 rgba(59, 43, 34, .22); }
.player-head { display: flex; align-items: center; gap: .6rem; }
.player-art { width: 2.5rem; height: 2.5rem; border-radius: .25rem; object-fit: cover; background: var(--brown-deep); }
.player-meta { min-width: 0; }
.player-title { margin: 0; font-size: .9rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.player-artist { margin: 0; font-size: .75rem; opacity: .7; }
.player-bar { margin: .7rem 0 .25rem; height: .27rem; border-radius: 999px; background: rgba(255,255,255,.24); cursor: pointer; }
.player-bar span { display: block; width: 0; height: 100%; border-radius: 999px; background: var(--pink); }
.player-times { display: flex; justify-content: space-between; font-size: .68rem; opacity: .7; }
.player-ctrl { display: flex; align-items: center; justify-content: space-between; padding: .35rem .2rem .1rem; }
.pc-icon { width: .9rem; height: .9rem; background: var(--paper); opacity: .55; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.pc-shuffle, .pc-repeat { clip-path: none; border: 1.5px solid var(--paper); background: none; border-radius: .2rem; }
.pc-prev { transform: rotate(180deg); }
.pc-play { width: 2.4rem; height: 2.4rem; border: none; border-radius: 50%; background: var(--paper); cursor: pointer; clip-path: circle(50%); position: relative; transition: transform .16s ease-out; }
.pc-play:active { transform: scale(.96); }
.pc-play::before { content: ''; position: absolute; inset: 0; margin: auto; width: .8rem; height: .9rem; background: var(--brown-dark); clip-path: polygon(12% 0, 100% 50%, 12% 100%); }
.pc-play.playing::before { clip-path: none; background: linear-gradient(to right, var(--brown-dark) 0 34%, transparent 34% 66%, var(--brown-dark) 66% 100%); }

/* --- ending ------------------------------------------------------------- */
.lined-note { width: min(19rem, 88%); padding: .95rem 1.1rem 1.1rem; color: var(--ink); background: url('../assets/paper/note-lined.webp') center / 100% 100% no-repeat; filter: drop-shadow(.25rem .35rem .6rem var(--shadow)); transform: rotate(-1deg); }
.lined-note p { margin: 0; white-space: pre-line; line-height: 1.85rem; font-family: 'JaoTomato', 'Mali', sans-serif; font-size: 1.05rem; }
.polaroid-end { width: min(12rem, 56%); transform: rotate(3deg); align-self: flex-end; margin-right: 1rem; }
.heart-sticker { position: absolute; bottom: 5.5rem; left: 2.2rem; display: grid; place-items: center; width: 5.2rem; height: 4.8rem; padding: .4rem; background: var(--pink-deep); color: var(--brown-deep); font-size: .75rem; text-align: center; clip-path: polygon(50% 100%, 15% 68%, 0 38%, 8% 12%, 30% 4%, 50% 20%, 70% 4%, 92% 12%, 100% 38%, 85% 68%); filter: drop-shadow(.16rem .2rem .25rem var(--shadow)); transform: rotate(-8deg); }

.progress-dots { display: none; }
.dev-mode .progress-dots { display: flex; gap: .3rem; position: absolute; top: .6rem; left: 50%; transform: translateX(-50%); z-index: 50; }
.progress-dots span { width: .4rem; height: .4rem; border-radius: 50%; background: rgba(255,255,255,.35); }
.progress-dots .done { background: rgba(255,255,255,.7); }
.progress-dots .current { background: var(--pink-deep); }

@media (max-height: 680px) {
  .step { padding-top: 3.7rem; padding-bottom: 1.5rem; }
  .step.active { gap: .58rem; }
  .step-story { padding-top: 3.1rem; padding-bottom: .7rem; }
  .step-story.active { gap: .05rem; }
  .polaroids { height: min(78dvh, 33rem); gap: .12rem; }
  .heart-doodle { width: 10.5rem; height: 7.8rem; margin: -.2rem 0 .1rem; }
  .script-hero { font-size: clamp(2.45rem, 12vw, 3.35rem); }
  .polaroid { width: min(8.9rem, 20vh, 46%); }
}

@media (prefers-reduced-motion: reduce) {
  .step.active, #app.shake { animation: none; }
  .sticker-btn, .polaroid, .pc-play { transition: none; }
}