:root {
  --kraft: #d4b185;
  --kraft-dark: #b8915f;
  --cream: #fffaf0;
  --paper: #fffdf6;
  --ink: #26386b;
  --coral: #e2604e;
  --pencil: #5b4a3a;
  --pink: #f4b6c2;
  --mint: #a8d8c8;
  --butter: #f6dc8c;
  --lilac: #c9b6e4;
  --hand: 'Caveat', cursive;
  --script: 'Homemade Apple', cursive;
  --type: 'Special Elite', 'Courier New', monospace;
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .24 0 0 0 0 .12 0 0 0 .32 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --fibers: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cg fill='none' stroke='%23fff' stroke-opacity='.18' stroke-width='.7'%3E%3Cpath d='M10 40q30 -8 60 4M120 20q20 6 44 -2M200 90q30 10 70 0M30 160q24 -6 50 6M150 200q40 -10 80 4M60 260q30 8 60 -4M240 250q20 -8 40 2'/%3E%3C/g%3E%3Cg fill='none' stroke='%23704e2a' stroke-opacity='.12' stroke-width='.6'%3E%3Cpath d='M80 90q20 4 40 -4M180 140q24 -6 46 4M20 220q20 6 36 0M230 40q16 -4 30 4'/%3E%3C/g%3E%3C/svg%3E");
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--hand);
  color: var(--ink);
  background: var(--noise), #a98458;
  -webkit-font-smoothing: antialiased;
}
body.locked { overflow: hidden; height: 100svh; }

.app {
  position: relative;
  max-width: 480px;
  margin: 0 auto;
  min-height: 100svh;
  overflow: hidden;
  background: var(--noise), var(--fibers), radial-gradient(ellipse at 50% 30%, #dcbd93, var(--kraft) 60%, #c7a171);
  box-shadow: 0 0 60px rgba(40, 25, 10, .35);
}

/* ───────── doodles ───────── */
.doodle { position: absolute; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.doodle.coral { stroke: var(--coral); }
.doodle.white { stroke: #fff; }
.doodle [pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; }
.inline-doodle { position: static; display: inline-block; vertical-align: middle; }

/* ───────── washi tape ───────── */
.tape {
  position: absolute; width: 96px; height: 26px; z-index: 3;
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .38) 0 6px, transparent 6px 12px), var(--t, var(--pink));
  opacity: .88;
  clip-path: polygon(0 0, 100% 0, 97% 20%, 100% 40%, 97% 60%, 100% 80%, 97% 100%, 0 100%, 3% 80%, 0 60%, 3% 40%, 0 20%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}
.tape.dots { background: radial-gradient(circle, rgba(255, 255, 255, .55) 1.5px, transparent 2px) 0 0 / 9px 9px, var(--t, var(--mint)); }
.tape.grid { background: linear-gradient(rgba(255, 255, 255, .35) 1px, transparent 1px) 0 0 / 8px 8px, linear-gradient(90deg, rgba(255, 255, 255, .35) 1px, transparent 1px) 0 0 / 8px 8px, var(--t, var(--butter)); }

/* ───────── stage / polaroid stack ───────── */
.stage { position: relative; height: 100svh; min-height: 600px; overflow: hidden; }
.counter {
  position: absolute; top: max(22px, env(safe-area-inset-top)); left: 0; right: 0; text-align: center;
  font: 400 15px var(--type); color: var(--pencil); letter-spacing: .12em; opacity: .85;
}
.stack {
  position: absolute; left: 50%; top: 47%;
  width: min(78vw, 330px); aspect-ratio: 330 / 400;
  transform: translate(-50%, -50%);
  touch-action: none; outline: none;
}
.polaroid {
  position: absolute; inset: 0;
  background: var(--cream);
  padding: 14px 14px 0;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .08), 0 10px 24px rgba(50, 30, 10, .28), inset 0 0 30px rgba(180, 150, 100, .12);
  cursor: grab; user-select: none; -webkit-user-select: none;
  will-change: transform;
  display: flex; flex-direction: column;
}
.polaroid:active { cursor: grabbing; }
.polaroid .ph { position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; background: #ddd; }
.polaroid img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; -webkit-user-drag: none; filter: saturate(.9) contrast(1.03) sepia(.08); }
.polaroid .ph::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 40px rgba(60, 30, 0, .22); background: linear-gradient(135deg, rgba(255, 240, 210, .18), transparent 50%); }
.polaroid .cap { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; font: 600 clamp(22px, 6.6vw, 28px) var(--hand); color: var(--ink); padding: 10px 6px 12px; line-height: 1.05; }
.polaroid .tape { top: -12px; left: 50%; margin-left: -48px; }

.note {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  background: var(--paper);
  background-image: repeating-linear-gradient(transparent 0 29px, #c6d6ea 29px 30px);
  box-shadow: 0 10px 24px rgba(50, 30, 10, .25);
  transform: rotate(1.5deg);
  padding: 20px;
}
.note .tape { top: -12px; left: 18px; transform: rotate(-12deg); }
.note .tape.r { left: auto; right: 18px; transform: rotate(10deg); }
.note .top { font: 600 26px var(--hand); color: var(--pencil); }
.note .names { font: 400 30px/1.5 var(--script); color: var(--ink); margin: 10px 0 2px; }
.note .names .amp { display: block; font: 700 30px var(--hand); color: var(--coral); line-height: 1; }
.note .bottom { font: 700 30px var(--hand); color: var(--coral); }
.note .date { font: 400 15px var(--type); letter-spacing: .14em; margin-top: 12px; color: var(--pencil); }

.hint {
  position: absolute; bottom: max(70px, calc(env(safe-area-inset-bottom) + 64px)); left: 0; right: 0;
  text-align: center; font: 600 24px var(--hand); color: var(--ink);
  transition: opacity .5s;
}
.hint .doodle { position: relative; display: block; margin: 0 auto 2px; }
.hint.down .bounce { display: inline-block; animation: bounce 1.6s ease-in-out infinite; }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
.skip {
  position: absolute; bottom: max(22px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%);
  background: none; border: 0; font: 400 13px var(--type); color: var(--pencil); opacity: .7;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; transition: opacity .4s;
}
.unlocked .skip { opacity: 0; pointer-events: none; }

/* ───────── sections ───────── */
section.block { position: relative; padding: 46px 22px; }
.title { font: 700 40px/1 var(--hand); color: var(--ink); text-align: center; margin-bottom: 18px; }
.title .u { background: linear-gradient(transparent 62%, rgba(226, 96, 78, .35) 62% 88%, transparent 88%); padding: 0 4px; }
.lede { text-align: center; font: 600 22px var(--hand); color: var(--pencil); }
.typed { font-family: var(--type); }

[data-reveal] { opacity: 0; transform: translateY(24px) rotate(var(--r, 0deg)); transition: opacity .9s ease, transform .9s cubic-bezier(.2, .8, .2, 1); }
[data-reveal].in { opacity: 1; transform: rotate(var(--r, 0deg)); }

.shadow { filter: drop-shadow(0 8px 12px rgba(60, 35, 10, .28)); position: relative; }

/* letter */
.letter {
  position: relative; background: var(--paper);
  background-image:
    linear-gradient(90deg, transparent 40px, rgba(226, 96, 78, .55) 40px, rgba(226, 96, 78, .55) 41.5px, transparent 41.5px),
    repeating-linear-gradient(transparent 0 31px, #bcd0e8 31px 32px);
  background-position: 0 14px;
  padding: 44px 22px 40px 54px;
  font: 400 24px/32px var(--hand); color: var(--ink);
}
.letter p + p { margin-top: 0; }
.letter .greet { font-weight: 700; }
.letter .sign { font: 400 20px/32px var(--script); margin-top: 32px; color: var(--ink); }
.clip { position: absolute; top: -18px; right: 34px; width: 30px; z-index: 4; }

/* stamp + postmark */
.stamp-row { position: relative; height: 270px; margin-top: 10px; }
.stamp {
  position: absolute; left: 50%; top: 18px; width: 196px; height: 238px; margin-left: -118px;
  padding: 8px;
  background: radial-gradient(circle at 50% 50%, transparent 4.5px, #fffef8 5px) -7px -7px / 14px 14px;
  transform: rotate(-5deg);
  filter: drop-shadow(0 6px 8px rgba(60, 35, 10, .3));
}
.stamp-in { width: 100%; height: 100%; background: #fffef8; padding: 8px; display: flex; flex-direction: column; }
.stamp-in .img { flex: 1; overflow: hidden; position: relative; }
.stamp-in img { width: 100%; height: 100%; object-fit: cover; filter: sepia(.25) saturate(.85); }
.stamp-in .img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(38, 56, 107, .0) 50%, rgba(38, 56, 107, .55)); }
.stamp-in .val { position: absolute; top: 14px; right: 14px; font: 400 15px var(--type); color: #fff; z-index: 1; }
.stamp-in .lbl { position: absolute; left: 16px; bottom: 34px; color: #fff; font: 700 26px/1 var(--hand); z-index: 1; text-shadow: 0 1px 4px rgba(0, 0, 0, .35); }
.stamp-in .sub { font: 400 11px var(--type); letter-spacing: .14em; text-align: center; padding-top: 7px; color: var(--ink); }
.postmark { position: absolute; right: 18px; top: 4px; width: 150px; transform: rotate(14deg); opacity: .78; z-index: 2; mix-blend-mode: multiply; }

/* countdown scraps */
.scraps { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.scrap-wrap { position: relative; filter: drop-shadow(0 4px 6px rgba(60, 35, 10, .25)); }
.scrap {
  width: 76px; padding: 14px 6px 10px; text-align: center; background: var(--paper);
  background-image: repeating-linear-gradient(transparent 0 15px, rgba(188, 208, 232, .7) 15px 16px);
}
.scrap b { display: block; font: 700 44px/1 var(--hand); color: var(--coral); font-variant-numeric: tabular-nums; }
.scrap span { font: 400 11px var(--type); letter-spacing: .1em; color: var(--pencil); }
.scrap-wrap .tape { width: 46px; height: 18px; top: -8px; left: 15px; }

/* timeline */
.plan { position: relative; max-width: 360px; margin: 0 auto; }
.plan-line { position: absolute; left: 33px; top: 20px; height: calc(100% - 40px); width: 20px; }
.plan-item { position: relative; display: grid; grid-template-columns: 66px 1fr; align-items: center; gap: 10px; padding: 9px 0; }
.plan-ico { width: 54px; height: 54px; border-radius: 50%; background: var(--paper); display: grid; place-items: center; box-shadow: 0 3px 8px rgba(60, 35, 10, .2); position: relative; z-index: 1; }
.plan-ico svg { width: 34px; height: 34px; fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.plan-time { font: 400 15px var(--type); color: #c9473a; letter-spacing: .08em; }
.plan-title { font: 700 27px/1.05 var(--hand); color: var(--ink); }
.plan-text { font: 400 20px/1.1 var(--hand); color: var(--pencil); }

/* map card */
.card {
  position: relative; background: var(--paper); padding: 14px 14px 18px;
  box-shadow: 0 10px 22px rgba(50, 30, 10, .25);
}
.map-card { max-width: 360px; margin: 0 auto; transform: rotate(-1.5deg); }
.map-card svg.map { width: 100%; display: block; background: #f6f0e1; }
.map-card .tape { top: -12px; right: 24px; transform: rotate(8deg); }
.map-card .addr { margin-top: 10px; text-align: center; font: 600 22px/1.15 var(--hand); }
.map-card .addr small { display: block; font: 400 13px/1.5 var(--type); color: var(--pencil); margin-top: 4px; }
.sticker {
  display: inline-block; margin-top: 14px; padding: 8px 18px 6px;
  font: 700 22px var(--hand); color: #fff; background: var(--coral); text-decoration: none;
  border-radius: 40px 34px 38px 30px / 30px 38px 32px 40px; transform: rotate(-2deg);
  box-shadow: 0 3px 0 #b8473a, 0 6px 12px rgba(60, 30, 10, .25);
  transition: transform .2s;
}
.sticker:active { transform: rotate(-2deg) translateY(2px); box-shadow: 0 1px 0 #b8473a; }
.center { text-align: center; }

/* photo grid */
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 16px; max-width: 380px; margin: 10px auto 0; }
.mini { position: relative; background: var(--cream); padding: 8px 8px 0; box-shadow: 0 8px 16px rgba(50, 30, 10, .26); }
.mini .ph { aspect-ratio: 4 / 5; overflow: hidden; }
.mini img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.9) sepia(.08); }
.mini .cap { font: 600 19px/1.05 var(--hand); text-align: center; padding: 8px 2px 10px; color: var(--ink); }
.mini .tape { width: 62px; height: 20px; top: -9px; left: 50%; margin-left: -31px; }
.grid .mini:nth-child(even) { margin-top: 28px; }

/* ticket */
.ticket { display: flex; max-width: 370px; margin: 8px auto 0; filter: drop-shadow(0 10px 14px rgba(60, 30, 10, .3)); transform: rotate(1.2deg); }
.t-main {
  flex: 1; padding: 22px 18px 20px; color: #fff; position: relative;
  background:
    radial-gradient(circle at 100% 0, transparent 11px, var(--coral) 11.5px) top right / 51% 51% no-repeat,
    radial-gradient(circle at 100% 100%, transparent 11px, var(--coral) 11.5px) bottom right / 51% 51% no-repeat,
    radial-gradient(circle at 0 0, transparent 9px, var(--coral) 9.5px) top left / 51% 51% no-repeat,
    radial-gradient(circle at 0 100%, transparent 9px, var(--coral) 9.5px) bottom left / 51% 51% no-repeat;
}
.t-main .k { font: 400 11px var(--type); letter-spacing: .2em; opacity: .9; }
.t-main h3 { font: 700 34px/1 var(--hand); margin: 6px 0 4px; }
.t-main p { font: 400 20px/1.15 var(--hand); }
.t-main .btn {
  display: inline-block; margin-top: 12px; padding: 7px 16px 5px; border: 2px dashed #fff; color: #fff;
  font: 700 22px var(--hand); text-decoration: none; border-radius: 6px; background: rgba(255, 255, 255, .1);
}
.t-stub {
  width: 88px; position: relative; color: var(--ink); display: flex; align-items: center; justify-content: center;
  border-left: 2px dashed rgba(226, 96, 78, .6);
  background:
    radial-gradient(circle at 0 0, transparent 11px, var(--paper) 11.5px) top left / 51% 51% no-repeat,
    radial-gradient(circle at 0 100%, transparent 11px, var(--paper) 11.5px) bottom left / 51% 51% no-repeat,
    radial-gradient(circle at 100% 0, transparent 9px, var(--paper) 9.5px) top right / 51% 51% no-repeat,
    radial-gradient(circle at 100% 100%, transparent 9px, var(--paper) 9.5px) bottom right / 51% 51% no-repeat;
}
.t-stub span { writing-mode: vertical-rl; transform: rotate(180deg); font: 400 13px var(--type); letter-spacing: .25em; }
.cal-badge {
  display: inline-grid; place-items: center; width: 108px; height: 108px; margin-top: 30px; border-radius: 50%;
  background: var(--butter); color: var(--ink); text-decoration: none; text-align: center;
  font: 700 21px/1 var(--hand); transform: rotate(-10deg);
  box-shadow: 0 0 0 4px var(--butter), 0 0 0 5.5px rgba(38, 56, 107, .5), 0 8px 14px rgba(60, 30, 10, .25);
}
footer.block { text-align: center; padding-bottom: 80px; }
footer .mono { font: 400 40px/1.6 var(--script); color: var(--ink); }
footer .with { font: 700 26px var(--hand); color: var(--coral); }

.music-btn {
  position: fixed; right: max(16px, calc(50vw - 240px + 16px)); bottom: 18px; z-index: 40;
  width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--paper); color: var(--ink);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .2); cursor: pointer;
}
.music-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}