/* =========================================================
   Có thư cho Hà: collage / cắt dán
   Hồng, xanh Tiffany, vàng pastel
   ========================================================= */

:root {
  --pink: #ffb3c7;
  --pink-2: #ff8fb1;
  --pink-deep: #e8457a;
  --tiff: #81d8d0;
  --tiff-2: #5cc7bd;
  --tiff-deep: #17837b;
  --butter: #fff1a8;
  --sun: #ffd84d;
  --paper: #fffaf0;
  --kraft: #e9cfa3;
  --ink: #2b2230;
  --ink-soft: #5d4d61;

  --f-hand: 'Patrick Hand', ui-rounded, system-ui, sans-serif;
  --f-display: 'Playfair Display', Georgia, serif;
  --f-block: 'Anton', Impact, sans-serif;
  --f-script: 'Pacifico', cursive;
  --f-mono: 'Space Mono', ui-monospace, monospace;
  --f-chunky: 'Paytone One', system-ui, sans-serif;

  --grain: url("../assets/grain.png");
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
/* chờ đọc trạng thái từ server, tránh nháy sai màn */
.is-booting .scene { visibility: hidden; }
.test-badge {
  position: fixed;
  z-index: 90;
  left: 10px;
  bottom: calc(var(--sab) + 10px);
  margin: 0;
  padding: 4px 10px;
  font: 700 11px/1.4 var(--f-mono);
  letter-spacing: .08em;
  color: #fff;
  background: #b3184f;
  border-radius: 999px;
  pointer-events: none;
}

html, body { margin: 0; height: 100%; }

body {
  color: var(--ink);
  font-family: var(--f-hand);
  background-color: #fff4c4;
  background-image: var(--grain), radial-gradient(circle at 1px 1px, rgba(43, 34, 48, .13) 1.1px, transparent 1.6px);
  background-size: 200px 200px, 22px 22px;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}

button { font: inherit; color: inherit; }
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
:focus-visible { outline: 3px dashed var(--pink-deep); outline-offset: 4px; }
[tabindex="-1"]:focus { outline: none; }

/* ---------- cảnh ---------- */
.scene {
  position: fixed;
  inset: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.stage {
  position: relative;
  min-height: 100%;
  overflow: hidden;
}
.scene.is-leaving { animation: leave .5s ease-in forwards; }
@keyframes leave { to { opacity: 0; scale: 1.04; } }

/* ---------- hiệu ứng "dán" ---------- */
.paste { rotate: var(--r, 0deg); }
.is-active .paste { animation: paste .6s cubic-bezier(.2, 1.5, .35, 1) var(--d, 0s) both; }
.is-active .paste.bob {
  animation:
    paste .6s cubic-bezier(.2, 1.5, .35, 1) var(--d, 0s) both,
    bob 3.4s ease-in-out calc(var(--d, 0s) + .6s) infinite alternate;
}
@keyframes paste {
  0% { opacity: 0; scale: 1.45; rotate: calc(var(--r, 0deg) + 10deg); }
  55% { opacity: 1; }
  100% { opacity: 1; scale: 1; rotate: var(--r, 0deg); }
}
@keyframes bob { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -9px, 0); } }

/* ---------- giấy xé nền ---------- */
.scraps { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.scrap { position: absolute; display: block; }
.scrap--pink {
  top: -6%; left: -14%; width: 78%; height: 32%;
  background: var(--grain), var(--pink);
  rotate: -9deg;
}
.scrap--tiff {
  bottom: -8%; right: -16%; width: 82%; height: 34%;
  background-color: var(--tiff);
  background-image: var(--grain), radial-gradient(circle, rgba(255, 255, 255, .45) 2px, transparent 2.6px);
  background-size: 200px 200px, 14px 14px;
  rotate: 7deg;
}
.scrap--lined {
  top: 40%; right: -10%; width: 44%; height: 20%;
  background-color: var(--paper);
  background-image: repeating-linear-gradient(transparent 0 21px, rgba(23, 131, 123, .28) 21px 22px);
  rotate: 13deg;
}

/* ---------- bóng giấy: lớp tối lệch xuống theo đúng mép xé (rẻ hơn filter) ---------- */
.has-shadow::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(43, 34, 48, .17);
  clip-path: var(--tear);
  translate: 3px 8px;
}

/* ---------- sticker ---------- */
.sticker {
  position: absolute;
  z-index: 5;
  width: var(--s, 44px);
  height: var(--s, 44px);
  overflow: visible;
  fill: currentColor;
  stroke: #fff;
  stroke-width: 2.6px;
  stroke-linejoin: round;
  paint-order: stroke fill;
  pointer-events: none;
}
.sticker--d { display: none; }

/* ---------- băng dính washi ---------- */
.tape {
  position: absolute;
  z-index: 6;
  top: -11px;
  left: 50%;
  width: 78px;
  height: 24px;
  translate: -50% 0;
  rotate: var(--tr, -4deg);
  opacity: .9;
  clip-path: polygon(0 12%, 4% 0, 30% 6%, 62% 0, 96% 4%, 100% 0, 97% 30%, 100% 55%, 96% 80%, 100% 100%, 70% 95%, 35% 100%, 3% 96%, 0 100%, 3% 70%, 0 45%, 3% 25%);
  box-shadow: inset 0 0 0 100px rgba(255, 255, 255, .08);
}
.tape--tiff { background: rgba(129, 216, 208, .85); }
.tape--pink { background: rgba(255, 143, 177, .8); }
.tape--yellow { background: rgba(255, 216, 77, .8); }
.tape--stripe {
  width: 92px;
  translate: none;
  background: repeating-linear-gradient(45deg, rgba(255, 143, 177, .9) 0 7px, rgba(255, 250, 240, .85) 7px 14px);
}

/* ---------- nhãn Dymo ---------- */
.dymo {
  position: absolute;
  z-index: 7;
  right: 10px;
  bottom: -12px;
  rotate: 5deg;
  padding: 5px 11px 4px;
  background: #1f1a24;
  color: #fff;
  font: 700 12px/1 var(--f-mono);
  letter-spacing: .22em;
  border-radius: 2px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .3);
  box-shadow: 0 3px 6px rgba(0, 0, 0, .25);
}

/* ---------- polaroid ---------- */
.polaroid {
  --w: 36vw;
  position: absolute;
  z-index: 1;
  width: var(--w);
  margin: 0;
  padding: 6px 6px 4px;
  background: #fff;
  box-shadow: 0 14px 22px -12px rgba(43, 34, 48, .5), 0 1px 2px rgba(43, 34, 48, .15);
}
.polaroid img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: var(--butter);
}
.polaroid figcaption {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.3em;
  padding: 4px 2px 0;
  text-align: center;
  text-wrap: balance;
  font: 400 clamp(12px, 3.4vw, 17px)/1.1 var(--f-hand);
  color: var(--ink-soft);
}

/* ---------- dải chữ chạy ---------- */
.ribbon {
  position: absolute;
  z-index: 4;
  left: -10%;
  width: 120%;
  overflow: hidden;
  padding: 3px 0 2px;
  background: var(--pink-2);
  border-block: 2px dashed rgba(255, 255, 255, .75);
  box-shadow: 0 5px 12px -6px rgba(43, 34, 48, .45);
  pointer-events: none;
  contain: layout paint;
  transform: translateZ(0);
}
.ribbon--top { top: calc(var(--sat) + 12px); rotate: -2.5deg; }
.ribbon--bottom { bottom: calc(var(--sab) + 12px); rotate: 2deg; background: var(--tiff); }
.ribbon-track {
  display: flex;
  width: max-content;
  animation: marquee 26s linear infinite;
  will-change: transform;
  backface-visibility: hidden;
}
.ribbon--bottom .ribbon-track { animation-direction: reverse; animation-duration: 30s; }
.ribbon-track span {
  white-space: pre;
  font: 700 13px/1.45 var(--f-mono);
  letter-spacing: .14em;
  color: var(--ink);
}
.ribbon--bottom .ribbon-track span { font: 400 17px/1.25 var(--f-hand); letter-spacing: .04em; }
@keyframes marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

/* =========================================================
   CẢNH 1: PHONG BÌ
   ========================================================= */
.intro-wrap {
  position: relative;
  z-index: 3;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: calc(var(--sat) + 64px) 16px calc(var(--sab) + 32px);
  text-align: center;
}
.postmark {
  margin: 0;
  padding: 6px 14px;
  border: 2px dashed var(--pink-deep);
  border-radius: 999px;
  color: var(--pink-deep);
  font: 700 11px/1 var(--f-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  background: rgba(255, 250, 240, .7);
}
.intro-title {
  position: relative;
  margin: 0;
  font: 900 clamp(40px, 11vw, 76px)/1.05 var(--f-display);
  letter-spacing: -.01em;
}
.title-sticker { position: absolute; z-index: 1; }
.title-heart { top: -44px; right: 2%; }
.title-star { top: -34px; left: 4%; }
.is-active .title-sticker { animation: bob 3.4s ease-in-out .8s infinite alternate; }
.name-chip {
  position: relative;
  isolation: isolate;
  display: inline-block;
  padding: .02em .24em .2em .18em;
  font-family: var(--f-script);
  font-weight: 400;
  font-size: .82em;
  rotate: -3deg;
}
.name-chip::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--tiff);
  clip-path: polygon(0 6%, 50% 0, 100% 8%, 98% 92%, 52% 100%, 2% 96%);
}
.intro-sub {
  margin: 0;
  font-size: clamp(19px, 5vw, 24px);
  line-height: 1.25;
  color: var(--ink-soft);
}

.envelope {
  position: relative;
  display: block;
  width: min(80vw, 360px);
  aspect-ratio: 1.55;
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  perspective: 900px;
  animation: wobble 2.6s ease-in-out 1.2s infinite;
}
.envelope.is-open { animation: none; cursor: default; }
@keyframes wobble {
  0%, 70%, 100% { transform: rotate(0deg); }
  76% { transform: rotate(-3deg); }
  84% { transform: rotate(3deg); }
  92% { transform: rotate(-1.5deg); }
}
.env-back, .env-front, .env-flap, .env-letter { position: absolute; display: block; }
.env-back {
  inset: 0;
  border-radius: 8px;
  background: var(--pink-2);
  box-shadow: 0 18px 26px -14px rgba(43, 34, 48, .55);
}
.env-letter {
  left: 7%; right: 7%; top: 7%; bottom: 8%;
  z-index: 1;
  display: grid;
  place-items: center;
  background-color: var(--paper);
  background-image: repeating-linear-gradient(transparent 0 17px, rgba(23, 131, 123, .25) 17px 18px);
  font: 400 clamp(18px, 5vw, 24px)/1 var(--f-script);
  color: var(--pink-deep);
  transition: translate .8s cubic-bezier(.3, 1.3, .5, 1) .35s;
}
.env-front {
  inset: 0;
  z-index: 2;
  border-radius: 8px;
  background:
    linear-gradient(to top right, transparent 49.6%, rgba(43, 34, 48, .08) 50%) left / 50% 100% no-repeat,
    linear-gradient(to top left, transparent 49.6%, rgba(43, 34, 48, .08) 50%) right / 50% 100% no-repeat,
    var(--pink);
  clip-path: polygon(0 0, 50% 56%, 100% 0, 100% 100%, 0 100%);
}
.env-flap {
  left: 0; right: 0; top: 0;
  height: 62%;
  z-index: 3;
  background: #ffa0bd;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top;
  transition: transform .6s ease-in-out, z-index 0s .3s;
}
.env-seal {
  position: absolute;
  z-index: 4;
  left: 50%; top: 58%;
  width: 19%;
  aspect-ratio: 1;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--pink-deep);
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .25), 0 3px 6px rgba(43, 34, 48, .3);
  transition: opacity .25s, scale .25s;
}
.env-seal svg { width: 52%; height: 52%; fill: var(--paper); }
.env-stamp {
  position: absolute;
  z-index: 4;
  right: 6%; bottom: 9%;
  width: 17%;
  aspect-ratio: .82;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 1px;
  background: var(--sun);
  outline: 3px dotted var(--paper);
  outline-offset: -3px;
  rotate: 6deg;
}
.env-stamp svg { width: 62%; aspect-ratio: 1; fill: var(--pink-2); }
.env-stamp small { font: 700 8px/1 var(--f-mono); letter-spacing: .08em; }
.envelope.is-open .env-flap { transform: rotateX(180deg); z-index: 0; }
.envelope.is-open .env-seal { opacity: 0; scale: .4; }
.envelope.is-open .env-letter { translate: 0 -48%; }

.hint {
  margin: 4px 0 0;
  font-size: 18px;
  color: var(--ink-soft);
}

.id-card {
  position: relative;
  width: min(86vw, 300px);
  margin-top: 14px;
  padding: 16px 16px 12px;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 10px;
  box-shadow: 5px 5px 0 var(--sun);
  text-align: left;
}
.id-flower { top: -18px; right: -14px; }
.id-head {
  margin: 0 0 8px;
  padding-bottom: 6px;
  border-bottom: 2px dotted var(--ink);
  font: 400 20px/1 'Lobster', cursive;
  color: var(--pink-deep);
}
.id-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
  margin: 0;
}
.id-info div { min-width: 0; }
.id-info .id-wide { grid-column: 1 / -1; }
.id-info dt { font: 700 9px/1.2 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--tiff-deep); }
.id-info dd { margin: 0; font-size: 18px; line-height: 1.15; }

/* =========================================================
   CẢNH 2: CÂU HỎI
   ========================================================= */
.pol-1 { top: calc(var(--sat) + 56px); left: 5%; --w: min(31vw, 160px); }
.pol-2 { top: calc(var(--sat) + 66px); right: 5%; --w: min(29vw, 150px); }
.pol-3 { bottom: calc(var(--sab) + 60px); right: 5%; --w: min(31vw, 150px); }
.pol-4 { display: none; }

.clipping {
  position: absolute;
  z-index: 2;
  bottom: calc(var(--sab) + 74px);
  left: 4%;
  width: min(54vw, 240px);
}
.clip-paper {
  padding: 12px 13px 14px;
  background-color: #f3eee2;
  background-image: radial-gradient(circle, rgba(43, 34, 48, .07) 1px, transparent 1.4px);
  background-size: 4px 4px;
}
.clip-head {
  margin: 0 0 5px;
  padding-bottom: 3px;
  border-bottom: 2px solid var(--ink);
  font: 400 22px/1.05 var(--f-block);
  letter-spacing: .02em;
  text-transform: uppercase;
}
.clip-body {
  margin: 0;
  font: 400 12.5px/1.38 var(--f-display);
  font-weight: 700;
  color: #3b3340;
  text-align: justify;
  hyphens: auto;
}
.clip-body b { font-weight: 900; }

.ask-main {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: center;
  padding: calc(var(--sat) + 104px + 34vw) 16px calc(var(--sab) + 140px + min(31vw, 150px));
}
.card-shadow {
  position: relative;
  width: min(100%, 640px);
}
.card {
  padding: 30px 14px 24px;
  text-align: center;
  background-color: var(--paper);
  background-image:
    var(--grain),
    linear-gradient(rgba(129, 216, 208, .32) 1px, transparent 1px),
    linear-gradient(90deg, rgba(129, 216, 208, .32) 1px, transparent 1px);
  background-size: 200px 200px, 20px 20px, 20px 20px;
}
.card-wish {
  margin: 0 auto 16px;
  font: 400 clamp(20px, 5.4vw, 26px)/1.32 var(--f-hand);
  color: var(--ink);
}
.card-wish mark {
  padding: 0 .2em;
  background: linear-gradient(transparent 45%, rgba(255, 216, 77, .85) 45% 90%, transparent 90%);
  color: inherit;
}
.card-note {
  margin: 0 0 8px;
  font-size: clamp(18px, 4.6vw, 23px);
  color: var(--ink-soft);
}

/* ransom note: mỗi chữ một mẩu giấy cắt */
.ransom {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .16em .42em;
  margin: 0;
  font-size: clamp(28px, 8.8vw, 62px);
  line-height: 1;
}
.ransom .word {
  display: inline-flex;
  align-items: center;
  gap: .05em;
  white-space: nowrap;
}
.cut {
  position: relative;
  isolation: isolate;
  display: inline-block;
  padding: .16em .17em .16em;
  font-family: var(--ff);
  font-weight: var(--fw, 400);
  font-style: var(--fs, normal);
  font-size: calc(var(--sz, 1) * 1em);
  line-height: 1.3;
  color: var(--fg);
  rotate: var(--r, 0deg);
  translate: 0 var(--y, 0);
}
/* mẩu giấy nằm sau chữ: chỉ giấy mang mép cắt, chữ và dấu luôn hiện đủ */
.cut::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--bg);
  clip-path: var(--clip);
}
.is-active .cut { animation: drop .5s cubic-bezier(.25, 1.6, .45, 1) var(--d, 0s) both; }
@keyframes drop {
  from { opacity: 0; scale: 1.9; translate: 0 -28px; }
  to { opacity: 1; scale: 1; translate: 0 var(--y, 0); }
}

.actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px;
  min-height: 70px;
  margin-top: calc(24px + (var(--grow, 1) - 1) * 34px);
  margin-bottom: calc((var(--grow, 1) - 1) * 34px);
}
.btn {
  padding: 14px 24px 13px;
  font: 400 clamp(18px, 4.8vw, 22px)/1.1 var(--f-chunky);
  color: var(--ink);
  border: 2.5px solid var(--ink);
  border-radius: 14px;
  box-shadow: 4px 4px 0 var(--ink);
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
.btn-yes {
  position: relative;
  z-index: 2;
  background: var(--pink-2);
  rotate: -2deg;
  scale: var(--grow, 1);
  transition: scale .35s cubic-bezier(.3, 1.6, .5, 1), translate .1s, box-shadow .1s, background .2s;
}
.btn-yes:hover { background: #ff7aa3; }
.btn-yes:active { translate: 3px 3px; box-shadow: 1px 1px 0 var(--ink); }
.btn-no {
  max-width: min(70vw, 280px);
  background: var(--tiff);
  rotate: 2deg;
}
.btn-no.is-running {
  position: fixed;
  z-index: 50;
  margin: 0;
  transition:
    left .42s cubic-bezier(.3, 1.45, .5, 1),
    top .42s cubic-bezier(.3, 1.45, .5, 1),
    rotate .3s;
}
.tease {
  min-height: 1.3em;
  margin: 16px 0 0;
  font-size: clamp(17px, 4.4vw, 21px);
  color: #b3184f;
}

/* =========================================================
   CẢNH 3: ĐỒNG Ý
   ========================================================= */
/* polaroid trơn (không chú thích): mép dưới dày như ảnh thật */
.polaroid--bare { padding-bottom: 24px; }
.polaroid--inline {
  --w: min(58vw, 240px);
  position: relative;
  z-index: 2;
}
.ypol-1 { top: calc(var(--sat) + 58px); left: -3%; --w: min(30vw, 190px); }
.ypol-2 { top: calc(var(--sat) + 70px); right: -3%; --w: min(29vw, 185px); }

.yes-main {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  padding: calc(var(--sat) + 112px + 30vw) 16px calc(var(--sab) + 90px);
}
.ransom--big { font-size: clamp(54px, 17vw, 120px); gap: .1em; }

.sheet {
  position: relative;
  width: min(100%, 560px);
}
.letter {
  padding: 30px 20px 18px 50px;
  font-size: clamp(19px, 5vw, 22px);
  line-height: 30px;
  background-color: var(--paper);
  background-image:
    linear-gradient(90deg, transparent 34px, rgba(232, 69, 122, .45) 34px 36px, transparent 36px),
    repeating-linear-gradient(transparent 0 29px, rgba(23, 131, 123, .26) 29px 30px);
  background-position: 0 0, 0 30px;
}
.letter p { margin: 0 0 12px; }
.letter .sign { text-align: right; font: 400 22px/1.4 var(--f-script); color: var(--pink-deep); margin: 0; }

.pledge, .picker {
  padding: 26px 18px 22px;
  background: var(--paper);
}
.pledge {
  position: relative;
  background-color: #fff8dc;
  background-image: radial-gradient(circle, rgba(255, 216, 77, .35) 1.5px, transparent 2px);
  background-size: 16px 16px;
}
.dymo--pledge { right: auto; bottom: auto; top: -14px; left: 14px; rotate: -4deg; }
.pledge-title, .picker-title {
  margin: 0;
  font: 900 clamp(24px, 6.6vw, 32px)/1.1 var(--f-display);
  text-align: center;
}
.pledge-sub {
  margin: 4px 0 14px;
  text-align: center;
  font-size: 17px;
  color: var(--ink-soft);
}
.pledge-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.pledge-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  text-align: left;
  font: 400 clamp(17px, 4.5vw, 20px)/1.25 var(--f-hand);
  background: rgba(255, 255, 255, .75);
  border: 2px solid rgba(43, 34, 48, .14);
  border-radius: 10px;
  cursor: pointer;
  transition: background .2s, border-color .2s, rotate .2s;
}
.pledge-item:hover { border-color: var(--pink-2); }
.pledge-check {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-top: 1px;
  border: 2.5px solid var(--ink);
  border-radius: 7px;
  background: #fff;
  font: 700 16px/1 var(--f-mono);
  color: transparent;
  transition: background .2s, color .2s, scale .25s;
}
.pledge-item[aria-pressed="true"] { background: rgba(129, 216, 208, .28); border-color: var(--tiff-2); }
.pledge-item[aria-pressed="true"] .pledge-check { background: var(--pink-2); color: var(--ink); scale: 1.1; rotate: -8deg; }
.pledge-item s { text-decoration-thickness: 2px; text-decoration-color: var(--pink-deep); }

.stamp {
  position: absolute;
  z-index: 6;
  right: 10px;
  bottom: 14px;
  padding: 6px 12px 4px;
  border: 4px double var(--pink-deep);
  border-radius: 6px;
  font: 400 22px/1 var(--f-block);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--pink-deep);
  rotate: -13deg;
  opacity: 0;
  pointer-events: none;
}
.stamp.is-on { animation: stamp .45s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes stamp { from { opacity: 0; scale: 3.2; } to { opacity: .88; scale: 1; } }

.date-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.date-opt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-height: 76px;
  padding: 10px 12px;
  text-align: left;
  background: var(--o-bg, var(--butter));
  border: 2.5px solid var(--ink);
  border-radius: 12px;
  box-shadow: 3px 3px 0 var(--ink);
  rotate: var(--o-r, 0deg);
  cursor: pointer;
  transition: translate .12s, box-shadow .12s, scale .2s;
}
.date-opt:active { translate: 2px 2px; box-shadow: 1px 1px 0 var(--ink); }
.date-opt b { font: 400 18px/1.1 var(--f-chunky); }
.date-opt span { font-size: 16px; line-height: 1.15; color: var(--ink-soft); }
.date-opt .emoji { font-size: 22px; line-height: 1; }
.date-opt { position: relative; }
.date-opt[aria-checked="true"] {
  scale: 1.04;
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 6px var(--pink-deep);
}
.date-opt[aria-checked="true"]::after {
  content: "✓";
  position: absolute;
  top: -10px;
  right: -8px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--pink-2);
  font: 700 14px/1 var(--f-mono);
}
.date-opt:focus-visible { outline: 3px dashed var(--ink); outline-offset: 5px; }

.ticket-wrap {
  --notch:
    radial-gradient(circle 12px at left 50%, #0000 97%, #000) left / 51% 100% no-repeat,
    radial-gradient(circle 12px at right 50%, #0000 97%, #000) right / 51% 100% no-repeat;
  position: relative;
  width: min(100%, 520px);
}
.ticket-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(43, 34, 48, .2);
  translate: 3px 7px;
  -webkit-mask: var(--notch);
  mask: var(--notch);
}
.ticket {
  display: flex;
  -webkit-mask: var(--notch);
  mask: var(--notch);
}
.ticket-main {
  flex: 1;
  min-width: 0;
  padding: 16px 16px 14px 24px;
  background-color: var(--butter);
  background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .35) 0 8px, transparent 8px 16px);
}
.t-kicker { margin: 0; font: 700 11px/1 var(--f-mono); letter-spacing: .18em; text-transform: uppercase; color: #b3184f; }
.t-title { margin: 6px 0 10px; font: 900 clamp(21px, 5.6vw, 27px)/1.05 var(--f-display); }
.t-info { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin: 0; }
.t-info div { min-width: 0; }
.t-info .t-wide { grid-column: 1 / -1; }
.t-info dt { font: 700 9px/1.2 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--tiff-deep); }
.t-info dd { margin: 0; font-size: 18px; line-height: 1.15; }
#ticketPlace.is-set { color: var(--pink-deep); }
.ticket-stub {
  flex: none;
  width: 64px;
  display: grid;
  place-items: center;
  background: var(--tiff);
  border-left: 3px dashed var(--ink);
}
.ticket-stub span {
  writing-mode: vertical-rl;
  rotate: 180deg;
  font: 700 12px/1 var(--f-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  white-space: nowrap;
}

.outro {
  margin: 0;
  text-align: center;
  font-size: clamp(21px, 5.6vw, 26px);
  line-height: 1.25;
}
.outro small { font-size: .75em; color: var(--ink-soft); }
.replay {
  min-height: 44px;
  padding: 8px 18px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  box-shadow: 3px 3px 0 var(--ink);
  font-size: 19px;
  color: var(--ink);
  text-decoration: underline wavy var(--pink-2);
  text-underline-offset: 5px;
  cursor: pointer;
}

/* ---------- lời nhắn + gửi chốt ---------- */
.note {
  padding: 26px 18px 22px;
  background-color: var(--paper);
  background-image: repeating-linear-gradient(transparent 0 29px, rgba(23, 131, 123, .22) 29px 30px);
  background-position: 0 6px;
  text-align: center;
}
.note textarea {
  display: block;
  width: 100%;
  min-height: 120px;
  margin-top: 4px;
  padding: 12px 14px;
  font: 400 20px/1.4 var(--f-hand);
  color: var(--ink);
  background: rgba(255, 255, 255, .85);
  border: 2.5px solid var(--ink);
  border-radius: 12px;
  resize: vertical;
  box-shadow: inset 2px 2px 0 rgba(43, 34, 48, .08);
}
.note textarea:focus { outline: 3px dashed var(--pink-deep); outline-offset: 3px; }
.note-count { margin: 4px 2px 0; text-align: right; font: 400 12px/1 var(--f-mono); color: var(--ink-soft); }
.note-hint { min-height: 1.3em; margin: 8px 0 0; font-size: 18px; line-height: 1.3; color: #b3184f; }
.btn-send { margin-top: 12px; rotate: -1deg; }
.btn-send[disabled] { opacity: .6; cursor: progress; }
.is-readonly .pledge-item, .is-readonly .date-opt { cursor: default; }
.is-readonly #noteForm .btn-send, .is-readonly .note-count { display: none; }
.note-sent {
  margin: 6px 0 0;
  padding: 12px 14px;
  font: 400 20px/1.4 var(--f-hand);
  text-align: left;
  white-space: pre-wrap;
  background: rgba(255, 255, 255, .85);
  border: 2px dashed var(--ink-soft);
  border-radius: 12px;
}

/* ---------- chứng nhận ---------- */
.cert-main {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: calc(var(--sat) + 64px) 16px calc(var(--sab) + 70px);
}
.cert-frame {
  width: min(100%, 480px);
  padding: 8px;
  background: #fff;
  box-shadow: 0 16px 26px -14px rgba(43, 34, 48, .55), 0 1px 2px rgba(43, 34, 48, .2);
}
.cert-img { display: block; width: 100%; height: auto; aspect-ratio: 18 / 25; background: var(--butter); -webkit-touch-callout: default; }
.cert-actions { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.cert-tip { margin: 0; max-width: 32ch; font-size: 16px; line-height: 1.3; color: var(--ink-soft); }

/* ---------- nút nhạc ---------- */
.music {
  position: fixed;
  z-index: 70;
  top: calc(var(--sat) + 6px);
  right: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100vw - 24px);
  padding: 6px 12px 6px 6px;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 999px;
  box-shadow: 3px 3px 0 var(--ink);
  rotate: -2deg;
  cursor: pointer;
  animation: pop-in .5s cubic-bezier(.3, 1.6, .5, 1) both;
}
@keyframes pop-in { from { opacity: 0; scale: .4; } }
/* cuộn xuống thì thu nút nhạc lên, để không đè chữ */
.music { transition: translate .3s ease, opacity .3s ease; }
.music.is-tucked { translate: 0 -140%; opacity: 0; pointer-events: none; }
.music-disc {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--pink-2) 0 5px, var(--ink) 5.5px 7px, transparent 7.5px),
    repeating-radial-gradient(circle, #2b2230 0 2px, #463a4b 2px 4px);
  animation: spin 3s linear infinite paused;
}
.music.is-playing .music-disc { animation-play-state: running; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.music-text { display: grid; text-align: left; line-height: 1.05; }
.music-text b { font: 400 15px/1.1 var(--f-chunky); white-space: nowrap; }

.confetti {
  position: fixed;
  inset: 0;
  z-index: 60;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* =========================================================
   LAPTOP
   ========================================================= */
@media (min-width: 900px) {
  .scrap--pink { width: 46%; height: 42%; left: -6%; }
  .scrap--tiff { width: 48%; height: 44%; right: -6%; }
  .scrap--lined { top: 34%; right: auto; left: -4%; width: 24%; height: 26%; rotate: -8deg; }

  .intro-wrap { gap: 16px; padding-top: 48px; padding-bottom: 48px; }
  .id-card {
    position: absolute;
    left: max(4%, calc(50% - 600px));
    bottom: 9%;
    margin: 0;
  }
  .hint { font-size: 20px; }

  .pol-1 { top: 9%; left: 5%; --w: clamp(170px, 15vw, 235px); }
  .pol-2 { top: 11%; right: 6%; --w: clamp(165px, 14.5vw, 225px); }
  .pol-3 { top: auto; bottom: 9%; left: 9%; right: auto; --w: clamp(150px, 13vw, 205px); }
  .pol-4 { display: block; bottom: 15%; right: 9%; --w: clamp(155px, 13.5vw, 210px); }
  .polaroid { padding: 9px 9px 6px; }
  .polaroid--bare { padding-bottom: 34px; }
  .polaroid figcaption { font-size: 19px; }

  .clipping { top: 42%; bottom: auto; left: auto; right: 2.5%; width: 220px; }
  .sticker--d { display: block; }

  .ask-main {
    min-height: 100dvh;
    align-items: center;
    padding: 90px 24px;
  }
  .card-shadow { width: min(52vw, 620px); }
  .card { padding: 38px 30px 28px; }
  .ransom { font-size: clamp(44px, 4.6vw, 64px); }

  .ransom--big { font-size: clamp(90px, 9vw, 130px); }
  .ypol-1 { top: 150px; left: max(4%, calc(50% - 640px)); --w: clamp(180px, 16vw, 250px); }
  .ypol-2 { top: 560px; right: max(4%, calc(50% - 640px)); --w: clamp(175px, 15vw, 240px); }
  .yes-main { padding-top: 100px; }

  .music { right: 20px; top: 8px; }
}

/* laptop màn thấp: thu chữ để cả thẻ câu hỏi nằm gọn trong màn hình */
@media (min-width: 900px) and (max-height: 820px) {
  .ask-main { padding: 64px 24px 40px; }
  .card { padding: 30px 28px 18px; }
  .ransom { font-size: clamp(36px, 6.4vh, 58px); }
  .card-wish { margin-bottom: 10px; }
  .actions { margin-top: calc(14px + (var(--grow, 1) - 1) * 34px); }
}

@media (max-width: 899px) and (max-height: 700px) {
  .ask-main { padding-top: calc(var(--sat) + 90px + 30vw); }
}

@media (max-width: 899px) {
  .music { padding: 4px; gap: 0; }
  .music-disc { width: 38px; height: 38px; }
  .music-text { display: none; }
}

/* điện thoại: thẻ câu hỏi gọn hơn để câu hỏi + 2 nút nằm trong một màn hình */
@media (max-width: 899px) {
  .card { padding: 24px 12px 16px; }
  .card-note { margin-bottom: 8px; font-size: clamp(17px, 4.6vw, 21px); line-height: 1.3; }
  .card-wish { margin-bottom: 12px; font-size: clamp(19px, 5.1vw, 24px); line-height: 1.3; }
  .actions { margin-top: calc(16px + (var(--grow, 1) - 1) * 34px); min-height: 62px; }
  .tease { margin-top: 10px; }
}
@media (max-width: 899px) and (max-height: 700px) {
  .ransom { font-size: clamp(26px, 8.2vw, 40px); }
}

/* điện thoại: bớt chuyển động chạy liên tục để dải chữ mượt */
@media (pointer: coarse) {
  .is-active .paste.bob { animation: paste .6s cubic-bezier(.2, 1.5, .35, 1) var(--d, 0s) both; }
  .is-active .title-sticker { animation: none; }
  .envelope { animation-iteration-count: 3; }
}

/* số ô lẻ thì ô cuối trải hết hàng */
.date-opt:last-child:nth-child(odd) { grid-column: 1 / -1; }

@media (max-width: 360px) {
  .date-options { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: .01ms !important;
  }
  .ribbon-track { animation: none !important; }
}