/* ── Gift stage: shared by the viewer, builder preview and gallery preview ── */
.stage {
  position: relative; width: 100%; height: 100%; overflow: hidden;
  container-type: size; isolation: isolate; background: #111;
  font-family: var(--dv-body), 'Plus Jakarta Sans', system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
}
.tpl {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 7cqi; overflow-x: hidden; overflow-y: auto;
}
.fx-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.layer { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 3.2cqi; width: 100%; max-width: 520px; margin: auto 0; }
.hidden { display: none !important; }

.g-title { font-family: var(--dv-head), 'Fraunces', Georgia, serif; font-weight: 700; font-size: clamp(26px, 9.6cqi, 58px); line-height: 1.05; margin: 0; letter-spacing: -.01em; text-wrap: balance; }
.g-eyebrow { font-size: clamp(14px, 4.2cqi, 20px); font-weight: 600; opacity: .85; margin: 0; }
.g-msg { font-size: clamp(15px, 4.5cqi, 21px); line-height: 1.55; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.g-sig { font-family: var(--dv-body), 'Caveat', cursive; font-size: clamp(22px, 7cqi, 34px); margin: 0; }
.g-dear { font-weight: 700; margin: 0; font-size: clamp(15px, 4.5cqi, 20px); }
.g-hint { font-size: clamp(12px, 3.6cqi, 15px); margin: 0; animation: hint 1.8s ease-in-out infinite; }
.g-btn { font: inherit; font-weight: 700; font-size: clamp(15px, 4.6cqi, 19px); border: 0; border-radius: 999px; padding: .8em 1.6em; cursor: pointer; transition: transform .2s ease; }
.g-btn:active { transform: scale(.96); }
.g-card { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 2.6cqi; width: 100%;
  background: rgba(255,255,255,.1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.22); border-radius: 5cqi; padding: 6cqi; }
.ar { font-family: 'Amiri', 'Times New Roman', serif; font-size: clamp(30px, 11cqi, 58px); line-height: 1.25; margin: 0; color: #f7d98b; }

.pop { animation: pop .7s cubic-bezier(.2, 1.5, .4, 1) both; }
.rise { animation: rise .8s ease both; }
@keyframes pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes hint { 0%, 100% { opacity: .8; } 50% { opacity: .35; } }

/* ── Valentine ── */
.tpl-valentine { background: radial-gradient(120% 80% at 50% 0%, #ffe3ea 0%, #ffb3c6 45%, #ff6f91 100%); color: #5b0e2d; }
.v-heart { font-size: clamp(56px, 22cqi, 120px); line-height: 1; animation: beat 1.2s ease-in-out infinite; filter: drop-shadow(0 8px 18px rgba(200, 0, 60, .3)); }
@keyframes beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.14); } 30% { transform: scale(1); } 45% { transform: scale(1.08); } }
.v-btns { display: flex; gap: 5cqi; align-items: center; justify-content: center; flex-wrap: wrap; margin-top: 3cqi; min-height: 4em; }
.v-yes { background: #e8174f; color: #fff; box-shadow: 0 10px 24px rgba(232, 23, 79, .4); }
.v-no { background: #fff; color: #a01a43; white-space: nowrap; }
.v-no.roam { position: absolute; z-index: 6; margin: 0; transition: left .28s ease, top .28s ease; }

/* ── Birthday ── */
.tpl-birthday { background: linear-gradient(180deg, #2b1055 0%, #6a3fa0 55%, #d68fc8 100%); color: #fff; }
.cake { display: flex; flex-direction: column; align-items: center; width: min(62cqi, 300px); margin-top: 6cqi; }
.candles { display: flex; gap: min(3cqi, 14px); justify-content: center; align-items: flex-end; position: relative; z-index: 2; margin-bottom: -3px; }
.candle { position: relative; width: min(3.2cqi, 15px); height: min(11cqi, 52px); border-radius: 3px 3px 1px 1px; cursor: pointer;
  background: repeating-linear-gradient(135deg, #fff 0 5px, #ff7aa8 5px 10px); }
.candle::before { content: ''; position: absolute; inset: -40px -10px -4px; }
.candle::after { content: ''; position: absolute; left: 50%; top: -5px; width: 2px; height: 6px; background: #3a2a2a; transform: translateX(-50%); }
.flame { position: absolute; left: 50%; bottom: calc(100% + 3px); width: min(3.8cqi, 17px); height: min(6.6cqi, 30px);
  border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%;
  background: radial-gradient(ellipse at 50% 70%, #fff 0 18%, #ffe36b 36%, #ff9a1f 70%, rgba(255, 80, 0, 0) 72%);
  filter: drop-shadow(0 0 8px #ffb43a); transform: translateX(-50%); transform-origin: 50% 90%;
  animation: flicker .14s ease-in-out infinite alternate; transition: opacity .25s; }
@keyframes flicker { from { transform: translateX(-50%) scale(1, 1) rotate(-3deg); } to { transform: translateX(-50%) scale(.9, 1.08) rotate(3deg); } }
.candle.out .flame { animation: none; opacity: 0; }
.smoke { position: absolute; left: 50%; bottom: 100%; width: 7px; height: 7px; border-radius: 50%; background: rgba(230, 230, 230, .75); animation: smoke 1.3s ease-out forwards; }
@keyframes smoke { to { transform: translate(-50%, -70px) scale(4); opacity: 0; } }
.tier { position: relative; border-radius: 12px 12px 6px 6px; overflow: hidden; }
.tier::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 60%;
  background: radial-gradient(circle at 50% 0, #fff 0 9px, transparent 10px) 0 0 / 18px 22px repeat-x, linear-gradient(#fff, #fff) 0 0 / 100% 8px no-repeat; }
.tier.t1 { width: 72%; height: min(13cqi, 62px); background: linear-gradient(#ffd6e4, #ffaecb); }
.tier.t2 { width: 100%; height: min(17cqi, 82px); background: linear-gradient(#ff9fc0, #f2769f); margin-top: -2px; }
.tier.t2::after { content: ''; position: absolute; inset: 45% 6% 12%;
  background: radial-gradient(circle, #ffe36b 2px, transparent 3px) 0 0 / 22px 16px, radial-gradient(circle, #3ddbd9 2px, transparent 3px) 11px 8px / 22px 16px; }
.plate { width: 118%; height: min(3.4cqi, 16px); background: #efe8fb; border-radius: 50%; margin-top: -5px; box-shadow: 0 10px 22px rgba(0, 0, 0, .25); }
.b-all { background: none; border: 0; color: inherit; opacity: .7; font: inherit; font-size: clamp(12px, 3.4cqi, 14px); text-decoration: underline; cursor: pointer; }
.b-balloons { font-size: clamp(40px, 15cqi, 80px); animation: float 3s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-10px); } }
.b-age { display: flex; align-items: baseline; gap: 2cqi; margin: 0; }
.b-age b { font-family: var(--dv-head), 'Fraunces', serif; font-size: clamp(48px, 20cqi, 110px); line-height: 1; color: #ffe36b; text-shadow: 0 6px 24px rgba(255, 200, 60, .45); }
.b-age span { font-family: var(--dv-body), 'Caveat', cursive; font-size: clamp(20px, 6.5cqi, 32px); }

/* ── Heartfelt note ── */
.tpl-note { color: #2d2340; --accent: #6c5ce7; }
.tpl-note.mode-sorry { background: linear-gradient(160deg, #f1edff, #b9b0f5); --accent: #6c5ce7; }
.tpl-note.mode-thanks { background: linear-gradient(160deg, #fff4e6, #ffbf95); --accent: #e9673a; }
.tpl-note.mode-just { background: linear-gradient(160deg, #e6fbf4, #8fdcc4); --accent: #12936f; }
.env { position: relative; width: min(74cqi, 340px); aspect-ratio: 1.5; perspective: 900px; cursor: pointer; margin: 6cqi 0 2cqi;
  filter: drop-shadow(0 18px 28px rgba(40, 20, 60, .25)); animation: float 3.2s ease-in-out infinite; }
.env.open { animation: none; }
.env-back { position: absolute; inset: 0; background: color-mix(in srgb, var(--accent) 70%, #000); border-radius: 10px; }
.env-letter { position: absolute; left: 6%; right: 6%; top: 8%; bottom: 6%; z-index: 2; background: #fffdf7; border-radius: 6px;
  display: grid; place-items: start center; padding-top: 8%; font-family: var(--dv-body), 'Caveat', cursive; font-size: clamp(20px, 7cqi, 32px); color: var(--accent);
  transition: transform .8s .35s cubic-bezier(.3, 1.2, .5, 1); }
.env-front { position: absolute; inset: 0; z-index: 3; background: var(--accent); border-radius: 10px;
  clip-path: polygon(0 0, 50% 56%, 100% 0, 100% 100%, 0 100%); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 7%; }
.env-to { font-family: var(--dv-body), 'Caveat', cursive; font-size: clamp(18px, 5.6cqi, 26px); color: #fff; }
.env-flap { position: absolute; left: 0; right: 0; top: 0; height: 60%; z-index: 4; background: color-mix(in srgb, var(--accent) 82%, #fff);
  clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: top; transition: transform .6s ease, z-index 0s .3s; border-radius: 10px 10px 0 0; }
.env-seal { position: absolute; left: 50%; top: 56%; z-index: 5; width: 17%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(circle at 35% 35%, #ff8b8b, #c0392b); display: grid; place-items: center; font-size: clamp(16px, 5.5cqi, 28px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .3); transition: opacity .3s, transform .3s; }
.env.open .env-flap { transform: rotateX(180deg); z-index: 1; }
.env.open .env-seal { opacity: 0; transform: translate(-50%, -50%) scale(.4); }
.env.open .env-letter { transform: translateY(-55%); }
.letter { width: 100%; text-align: start; background: #fffdf7; color: #2d2340; border-radius: 4cqi; padding: 7cqi 7cqi 6cqi;
  box-shadow: 0 24px 50px rgba(40, 20, 60, .22); user-select: text; -webkit-user-select: text; }
.letter h2 { font-family: var(--dv-head), 'Fraunces', serif; font-size: clamp(24px, 8cqi, 40px); color: var(--accent); margin: 0 0 3cqi; }
.l-to { font-weight: 700; margin: 0 0 2cqi; }
.typed { font-family: var(--dv-body), 'Caveat', cursive; font-size: clamp(21px, 6.6cqi, 30px); line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; min-height: 3em; }
.letter .g-sig { text-align: end; margin-top: 3cqi; color: var(--accent); }

/* ── Memory book ── */
.tpl-photobook { background: #fbf3e8 radial-gradient(#e9dcc8 1.2px, transparent 1.6px) 0 0 / 18px 18px; color: #3b2a1e; }
.pb-cover { width: min(64cqi, 310px); aspect-ratio: 3 / 4; border-radius: 6px 18px 18px 6px; cursor: pointer;
  background: linear-gradient(135deg, #c45a50, #8e2f3a); color: #fff7ea; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3cqi; padding: 7cqi; box-shadow: inset 12px 0 0 rgba(0, 0, 0, .16), inset 14px 0 0 rgba(255, 255, 255, .12), 0 22px 44px rgba(80, 30, 20, .35);
  transition: transform .3s; }
.pb-cover:hover { transform: rotate(-2deg) scale(1.02); }
.pb-cover p { margin: 0; font-family: var(--dv-body), 'Caveat', cursive; font-size: clamp(20px, 6.4cqi, 30px); }
.pb-cover-icon { font-size: clamp(30px, 10cqi, 52px); }
.pb-cover-title { font-family: var(--dv-head), 'Fraunces', serif; font-size: clamp(22px, 7.4cqi, 36px); margin: 0; line-height: 1.1; }
.deck { position: relative; width: min(70cqi, 340px); aspect-ratio: 3 / 4; touch-action: pan-y; cursor: grab; margin-top: 2cqi; }
.pb-card { position: absolute; inset: 0; display: flex; flex-direction: column; background: #fff; border-radius: 8px; padding: 4.5% 4.5% 0;
  box-shadow: 0 14px 32px rgba(60, 30, 10, .22); transition: transform .45s cubic-bezier(.2, .9, .3, 1), opacity .45s; will-change: transform; }
.pb-card img, .pb-ph { width: 100%; flex: 1; min-height: 0; object-fit: cover; border-radius: 3px; background: #efe6da; pointer-events: none; }
.pb-ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2cqi; font-size: clamp(40px, 16cqi, 80px); }
.pb-ph small { font-size: 12px; color: #9a8873; }
.pb-cap { font-family: var(--dv-body), 'Caveat', cursive; font-size: clamp(18px, 6cqi, 28px); padding: 3% 2% 4%; min-height: 2.4em; display: grid; place-items: center; }
.pb-end { justify-content: center; align-items: center; gap: 4cqi; padding: 9%; background: #fffaf2; }
.pb-endheart { font-size: clamp(36px, 13cqi, 64px); }
.pb-nav { display: flex; gap: 4cqi; align-items: center; margin-top: 7cqi; }
.pb-dots { display: flex; gap: 6px; }
.pb-dots i { width: 7px; height: 7px; border-radius: 50%; background: #dccbb3; transition: background .3s, transform .3s; }
.pb-dots i.on { background: #8e2f3a; transform: scale(1.3); }
.pb-arrow { width: 42px; height: 42px; border-radius: 50%; border: 0; background: #fff; color: #8e2f3a; font-size: 24px; line-height: 1; cursor: pointer; box-shadow: 0 6px 14px rgba(60, 30, 10, .18); }
.pb-arrow:disabled { opacity: .35; cursor: default; }

/* ── Anniversary ── */
.tpl-anniversary { background: radial-gradient(120% 90% at 50% 0%, #7a1f45 0%, #3d0c22 55%, #1c0610 100%); color: #fbe7c6; }
.an-head { font-style: italic; color: #f3cf8b; }
.an-since { margin: 0; font-size: clamp(13px, 3.8cqi, 17px); letter-spacing: .04em; opacity: .85; }
.an-count { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2cqi; width: 100%; margin: 2cqi 0; }
.an-count div { background: rgba(255, 255, 255, .06); border: 1px solid rgba(243, 207, 139, .3); border-radius: 3cqi; padding: 3cqi .5cqi; }
.an-count b { display: block; font-family: var(--dv-head), 'Fraunces', serif; font-size: clamp(20px, 7.4cqi, 38px); color: #fff3dc; font-variant-numeric: tabular-nums; }
.an-count span { font-size: clamp(8px, 2.6cqi, 12px); letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.an-btn { background: linear-gradient(135deg, #f6d79a, #d9a24e); color: #3d0c22; box-shadow: 0 10px 26px rgba(217, 162, 78, .35); }
.an-photo { width: min(46cqi, 230px); aspect-ratio: 1; border-radius: 50%; object-fit: cover; border: 4px solid #f3cf8b;
  box-shadow: 0 0 0 9px rgba(243, 207, 139, .15), 0 20px 40px rgba(0, 0, 0, .45); }
.an-ring { font-size: clamp(50px, 18cqi, 96px); filter: drop-shadow(0 0 20px rgba(243, 207, 139, .5)); }

/* ── Eid ── */
.tpl-eid { background: linear-gradient(180deg, #071330 0%, #0f2c55 55%, #1a4f6e 100%); color: #fdf3d6; }
.moon { position: absolute; top: 9cqh; right: 10cqi; z-index: 1; width: min(20cqi, 100px); aspect-ratio: 1; border-radius: 50%;
  box-shadow: calc(min(20cqi, 100px) * -.22) calc(min(20cqi, 100px) * .1) 0 0 #f7e3a3; transform: rotate(-18deg);
  filter: drop-shadow(0 0 18px rgba(247, 227, 163, .5)); }
.lanterns { position: absolute; top: 0; left: 0; right: 0; z-index: 3; display: flex; justify-content: flex-start; padding-left: 9cqi; gap: 7cqi; pointer-events: none; }
.lantern { display: flex; flex-direction: column; align-items: center; transform-origin: top center; pointer-events: auto; cursor: pointer;
  animation: swing 3.2s ease-in-out infinite; }
.lantern:nth-child(2) { animation-delay: -1.1s; animation-duration: 3.8s; }
.lantern:nth-child(3) { animation-delay: -2.2s; animation-duration: 3.4s; }
.lantern .str { width: 2px; background: #c9a24a; }
.lantern svg { width: min(14cqi, 72px); height: auto; margin-top: -2px; transition: filter .5s; }
.lantern .glass { fill: #26365a; transition: fill .5s; }
.lantern.lit .glass { fill: #ffd66b; }
.lantern.lit svg { filter: drop-shadow(0 0 12px #ffc44d) drop-shadow(0 0 30px rgba(255, 196, 77, .55)); }
@keyframes swing { 0%, 100% { transform: rotate(5deg); } 50% { transform: rotate(-5deg); } }
.eid-low { margin-top: 44cqh; }

/* ── Ramadan ── */
.tpl-ramadan { background: linear-gradient(180deg, #120a2a 0%, #2d1857 48%, #7b3f7a 80%, #d98a6a 100%); color: #fff3e0; justify-content: flex-start; padding-top: 10cqh; }
.r-layer { margin: 0 0 30cqi; }
.r-moon { position: relative; width: min(28cqi, 140px); aspect-ratio: 1; border-radius: 50%; cursor: pointer; margin: 4cqi 0;
  box-shadow: calc(min(28cqi, 140px) * -.2) calc(min(28cqi, 140px) * .08) 0 0 #8f8466; transform: rotate(-22deg);
  transition: box-shadow 1s, filter 1s, transform 1s; animation: hint 2.4s ease-in-out infinite; }
.r-moon.glow { animation: none; box-shadow: calc(min(28cqi, 140px) * -.2) calc(min(28cqi, 140px) * .08) 0 0 #fff1b8;
  filter: drop-shadow(0 0 28px rgba(255, 240, 180, .85)); transform: rotate(-22deg) scale(1.05); }
.r-text { display: flex; flex-direction: column; align-items: center; gap: 3cqi; }
.mosque { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; z-index: 1; fill: #0d0620; pointer-events: none; }
.mosque .win { fill: #ffcf7a; opacity: .85; }

/* ── Maldives ── */
.tpl-maldives { background: linear-gradient(180deg, #06173a 0%, #0b2f63 50%, #0e6e8c 82%, #2bc3c9 100%); color: #fff; cursor: pointer; }
.flag-wrap { display: flex; align-items: flex-start; margin-bottom: 2cqi; }
.pole { width: 6px; height: min(50cqi, 240px); background: linear-gradient(90deg, #9aa, #fff, #889); border-radius: 3px; }
.flag { width: min(48cqi, 230px); height: auto; transform-origin: left center; filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .35));
  animation: wave 2.6s ease-in-out infinite; }
@keyframes wave { 0%, 100% { transform: perspective(500px) rotateY(-14deg) skewY(2deg); } 50% { transform: perspective(500px) rotateY(10deg) skewY(-2deg); } }
.mv-sea { position: absolute; left: 0; right: 0; bottom: 0; height: 10cqh; z-index: 1; pointer-events: none;
  background: radial-gradient(60% 18px at 50% 0, rgba(255, 255, 255, .25), transparent) 0 0 / 120px 100%, linear-gradient(transparent, rgba(255, 255, 255, .12)); }
.tpl-maldives .g-card { background: rgba(6, 23, 58, .45); }

@media (prefers-reduced-motion: reduce) {
  .stage * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* ── Dhivehi (Thaana, right-to-left) ──
   Thaana letters sit lower and smaller than Latin ones, so headings drop the serif/italic
   styling and everything gets a little more line height. */
.lang-dv .g-title, .lang-dv .an-head, .lang-dv .pb-cover-title, .lang-dv .letter h2 {
  font-family: var(--dv-head), 'Fraunces', serif; font-style: normal; letter-spacing: 0; line-height: 1.45; }
.lang-dv .g-title { font-size: clamp(24px, 8.6cqi, 52px); }
.lang-dv .g-msg { font-size: clamp(16px, 5cqi, 23px); line-height: 1.95; }
.lang-dv .g-eyebrow, .lang-dv .g-dear { font-size: clamp(15px, 4.6cqi, 21px); line-height: 1.8; }
.lang-dv .g-hint { font-size: clamp(13px, 4cqi, 17px); line-height: 1.8; }
.lang-dv .g-sig, .lang-dv .typed, .lang-dv .pb-cap, .lang-dv .env-letter, .lang-dv .env-to,
.lang-dv .pb-cover p, .lang-dv .b-age span {
  font-family: var(--dv-body), 'Caveat', cursive; line-height: 1.8; }
.lang-dv .typed { font-size: clamp(18px, 5.6cqi, 26px); line-height: 2; }
.lang-dv .g-sig { font-size: clamp(17px, 5.2cqi, 24px); }
.lang-dv .pb-cap, .lang-dv .env-letter { font-size: clamp(15px, 4.6cqi, 22px); }
.lang-dv .env-to { font-size: clamp(14px, 4.2cqi, 20px); }
.lang-dv .an-count span { letter-spacing: 0; text-transform: none; font-size: clamp(9px, 2.8cqi, 13px); }
.lang-dv .an-photo, .lang-dv .an-ring { margin-bottom: 1cqi; }
.tpl { font-family: var(--dv-body), 'Plus Jakarta Sans', system-ui, sans-serif; }
/* Dhivehi lines anywhere in a gift (e.g. only the message) get Thaana-friendly sizing. */
.tpl .g-msg:dir(rtl) { font-size: clamp(17px, 5.4cqi, 24px); line-height: 1.95; }
.tpl .typed:dir(rtl) { font-size: clamp(19px, 6cqi, 27px); line-height: 2; }
.tpl .g-sig:dir(rtl) { font-family: var(--dv-body), 'Caveat', cursive; font-size: clamp(18px, 5.6cqi, 25px); }
.tpl .g-eyebrow:dir(rtl), .tpl .g-dear:dir(rtl) { font-size: clamp(16px, 4.9cqi, 22px); line-height: 1.8; }
.tpl .g-hint:dir(rtl) { font-size: clamp(14px, 4.2cqi, 18px); line-height: 1.8; }

/* ── Mother's Day: buds that bloom ── */
.tpl-mother { background: linear-gradient(180deg, #fff3ec 0%, #ffd6dd 60%, #f7b5c4 100%); color: #6b2340; }
.m-bouquet { position: relative; width: min(66cqi, 310px); height: min(66cqi, 310px); margin-top: 2cqi; }
.m-stem { position: absolute; left: 50%; bottom: 30%; width: 4px; height: calc(var(--l) * .62%); border-radius: 2px;
  background: linear-gradient(#6cc77a, #2f8a45); transform-origin: bottom center; transform: translateX(-50%) rotate(var(--a)); cursor: pointer; }
.m-stem::before { content: ''; position: absolute; left: -22px; right: -22px; top: -40px; height: 70px; }
.m-stem::after { content: ''; position: absolute; left: 3px; top: 55%; width: 16px; height: 8px; border-radius: 0 80% 0 80%; background: #4caf5f; }
.m-bud { position: absolute; left: 50%; top: 0; width: min(6.5cqi, 30px); height: min(8cqi, 38px); display: grid; place-items: center;
  transform: translate(-50%, -80%) rotate(calc(var(--a) * -1)); border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%;
  background: radial-gradient(ellipse at 50% 30%, #ff9eb5 0 35%, #4caf5f 37%); font-size: 0; line-height: 1;
  animation: budWiggle 2.2s ease-in-out infinite; }
.m-stem:nth-child(2) .m-bud { animation-delay: -.4s; } .m-stem:nth-child(3) .m-bud { animation-delay: -.9s; }
.m-stem:nth-child(4) .m-bud { animation-delay: -1.3s; } .m-stem:nth-child(5) .m-bud { animation-delay: -1.7s; }
.m-stem.open .m-bud { background: none; width: auto; height: auto; font-size: min(14cqi, 64px); animation: bloom .7s cubic-bezier(.2, 1.6, .4, 1) both;
  filter: drop-shadow(0 6px 10px rgba(150, 30, 70, .25)); }
@keyframes budWiggle { 0%, 100% { margin-top: 0; } 50% { margin-top: -4px; } }
@keyframes bloom { from { transform: translate(-50%, -80%) rotate(calc(var(--a) * -1)) scale(.2); } to { transform: translate(-50%, -80%) rotate(calc(var(--a) * -1)) scale(1); } }
.m-vase { position: absolute; left: 50%; bottom: 0; width: 42%; height: 36%; transform: translateX(-50%); z-index: 2;
  background: linear-gradient(135deg, #8fd0de, #3f8ea6); border-radius: 22% 22% 42% 42% / 12% 12% 48% 48%;
  box-shadow: inset 10px 0 0 rgba(255, 255, 255, .25), 0 14px 24px rgba(63, 142, 166, .35); }
.m-big { font-size: clamp(60px, 26cqi, 130px); line-height: 1; animation: float 3s ease-in-out infinite; }
.tpl-mother .b-all { color: #6b2340; }

/* ── Father's Day: flip the medal ── */
.tpl-father { background: radial-gradient(120% 80% at 50% 0%, #2a5f8f 0%, #133556 55%, #0a1f36 100%); color: #eaf3ff; }
.f-hang { display: flex; flex-direction: column; align-items: center; perspective: 900px; transform-origin: top center; animation: fswing 3.4s ease-in-out infinite; }
@keyframes fswing { 0%, 100% { transform: rotate(3deg); } 50% { transform: rotate(-3deg); } }
.f-ribbon { width: min(24cqi, 112px); height: min(22cqi, 104px); clip-path: polygon(0 0, 100% 0, 70% 100%, 30% 100%);
  background: linear-gradient(90deg, #c8102e 0 33%, #ffffff 33% 66%, #1e5aa8 66%); }
.f-medal { position: relative; width: min(44cqi, 210px); aspect-ratio: 1; margin-top: -8px; transform-style: preserve-3d; cursor: pointer;
  transition: transform 1.1s cubic-bezier(.3, 1.5, .5, 1); }
.f-medal.flip { transform: rotateY(180deg) scale(1.06); }
.f-face { position: absolute; inset: 0; border-radius: 50%; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; color: #7a4f0a;
  background: radial-gradient(circle at 35% 30%, #fff6c2, #f2c94c 45%, #c9932b 82%);
  box-shadow: inset 0 0 0 7px #e0ad3f, inset 0 0 0 12px #fff0b0, 0 16px 34px rgba(0, 0, 0, .45); }
.f-face.back { transform: rotateY(180deg); }
.f-star { font-size: min(22cqi, 104px); line-height: 1; color: #d9a23e; text-shadow: 0 2px 0 #fff3c4, 0 -2px 0 #a8741d; }
.f-no { font-family: 'Fraunces', serif; font-weight: 800; font-size: min(8cqi, 38px); line-height: 1.1; }
.f-dad { font-family: 'Fraunces', serif; font-weight: 800; font-size: min(14cqi, 66px); line-height: 1; letter-spacing: .02em; }
.lang-dv .f-no, .lang-dv .f-dad { font-family: var(--dv-head), 'Fraunces', serif; letter-spacing: 0; line-height: 1.5; }
.lang-dv .f-dad { font-size: min(11cqi, 52px); }
.f-after { display: flex; flex-direction: column; align-items: center; gap: 3cqi; width: 100%; margin-top: 2cqi; }

/* ── Children's Day: pop the balloons ── */
.tpl-children { background: linear-gradient(180deg, #8fd3ff 0%, #c9ecff 58%, #fff6d6 100%); color: #174a7c; }
.c-sky { position: absolute; inset: 0; z-index: 3; }
.c-cloud { position: absolute; width: min(34cqi, 160px); height: min(11cqi, 52px); border-radius: 999px; background: #fff; opacity: .85;
  box-shadow: min(8cqi, 38px) max(-5cqi, -24px) 0 max(-1cqi, -5px) #fff, max(-8cqi, -38px) max(-3cqi, -14px) 0 max(-2cqi, -9px) #fff; }
.c-balloon { position: absolute; width: min(16cqi, 76px); aspect-ratio: .82; border-radius: 50% 50% 48% 48% / 56% 56% 44% 44%; cursor: pointer;
  background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .8) 0 7%, transparent 8%), var(--c);
  box-shadow: inset -7px -10px 0 rgba(0, 0, 0, .12); animation: bob 2.6s ease-in-out infinite;
  transition: transform .16s ease-out, opacity .16s ease-out; touch-action: manipulation; }
.c-balloon::before { content: ''; position: absolute; left: 50%; bottom: -7px; width: 12px; height: 9px; background: var(--c); clip-path: polygon(50% 0, 100% 100%, 0 100%); transform: translateX(-50%); }
.c-balloon::after { content: ''; position: absolute; left: 50%; top: calc(100% + 6px); width: 1.5px; height: min(15cqi, 72px); background: rgba(23, 74, 124, .4); }
.c-balloon.pop { animation: none; transform: scale(1.6); opacity: 0; pointer-events: none; }
@keyframes bob { 0%, 100% { translate: 0 0; rotate: -2deg; } 50% { translate: 0 -12px; rotate: 3deg; } }
.c-top { position: absolute; top: 6cqi; left: 7cqi; right: 7cqi; width: auto; margin: 0; z-index: 4; pointer-events: none; gap: 1.5cqi; }
.c-count { margin: 0; font-weight: 800; font-size: clamp(14px, 4.4cqi, 20px); background: rgba(255, 255, 255, .7); padding: .25em .9em; border-radius: 999px; }
.tpl-children .g-card { background: rgba(255, 255, 255, .7); border-color: rgba(255, 255, 255, .9); }

/* ── Teachers' Day: chalkboard ── */
.tpl-teacher { background: linear-gradient(180deg, #f6e7c8 0%, #e3c99a 100%); color: #4a2e12; justify-content: flex-start; padding-top: 6cqi; }
.t-layer { gap: 4cqi; }
.t-board { position: relative; width: 100%; min-height: min(118cqi, 66cqh); display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2.4cqi; padding: 7cqi 6cqi 9cqi; border: min(3.4cqi, 16px) solid #8a5a2b; border-radius: 3cqi; cursor: default;
  background: radial-gradient(120% 90% at 30% 20%, #41745a 0%, #284a37 70%, #1f3a2b 100%);
  box-shadow: inset 0 0 40px rgba(0, 0, 0, .45), 0 18px 30px rgba(80, 45, 10, .35); user-select: text; -webkit-user-select: text; }
.t-chalk { margin: 0; color: #f7f5ec; font-family: var(--dv-body), 'Caveat', cursive; text-shadow: 0 0 1px #fff, 0 0 6px rgba(255, 255, 255, .25);
  white-space: pre-wrap; overflow-wrap: anywhere; }
.t-chalk:empty { display: none; }
.t-title { font-family: var(--dv-head), 'Caveat', cursive; font-size: clamp(30px, 10.5cqi, 58px); font-weight: 700; line-height: 1.1; }
.t-thanks { font-size: clamp(18px, 6cqi, 30px); opacity: .85; }
.t-dear { font-size: clamp(18px, 5.6cqi, 28px); font-weight: 700; margin-top: 2cqi; }
.t-msg { font-size: clamp(19px, 6.2cqi, 30px); line-height: 1.35; }
.t-sig { font-size: clamp(19px, 6cqi, 30px); align-self: flex-end; }
.t-for { font-size: clamp(22px, 7cqi, 36px); }
.t-hint { font-size: clamp(18px, 5.6cqi, 28px); opacity: .7; animation: hint 1.8s ease-in-out infinite; }
.t-before { display: flex; flex-direction: column; gap: 3cqi; align-items: center; }
.t-ledge { position: absolute; left: 6%; right: 6%; bottom: 3cqi; height: 6px; border-radius: 3px; background: #6e4520; }
.t-ledge::before { content: ''; position: absolute; right: 18%; top: -5px; width: 26px; height: 6px; border-radius: 3px; background: #f7f5ec; }
.t-apple { font-size: min(18cqi, 84px); line-height: 1; background: none; border: 0; cursor: pointer; padding: 0;
  filter: drop-shadow(0 8px 10px rgba(80, 45, 10, .35)); animation: float 2.4s ease-in-out infinite; }
.t-apple.jump { animation: appleJump .7s ease-out both; cursor: default; }
@keyframes appleJump { 30% { transform: translateY(-30px) rotate(-12deg); } 100% { transform: none; } }
.lang-dv .t-chalk { line-height: 1.8; }
.lang-dv .t-title { font-size: clamp(26px, 8.6cqi, 48px); line-height: 1.5; }
.lang-dv .t-msg { font-size: clamp(17px, 5.2cqi, 25px); line-height: 2; }

/* ── Custom celebration: unwrap the gift ── */
.tpl-custom { background: linear-gradient(170deg, #ff9a8b, #ff6a88 55%, #ff99ac); }
.cu-box { position: relative; width: min(48cqi, 230px); aspect-ratio: 1; margin: 6cqi 0 2cqi; cursor: pointer; animation: giftWiggle 2.6s ease-in-out infinite; }
.cu-body { position: absolute; left: 7%; right: 7%; bottom: 0; height: 66%; background: var(--box); border-radius: 4% 4% 7% 7%;
  box-shadow: inset 0 -12px 0 rgba(0, 0, 0, .08), 0 20px 34px rgba(0, 0, 0, .25); }
.cu-body::before, .cu-lid::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 15%; transform: translateX(-50%); background: var(--rib); }
.cu-lid { position: absolute; left: 0; right: 0; top: 18%; height: 20%; z-index: 2; background: var(--box); border-radius: 6%;
  box-shadow: 0 7px 0 rgba(0, 0, 0, .1); transition: transform .8s cubic-bezier(.3, 1.4, .5, 1), opacity .8s; }
.cu-bow { position: absolute; left: 50%; top: 2%; width: 46%; height: 20%; z-index: 3; transform: translateX(-50%); transition: transform .8s cubic-bezier(.3, 1.4, .5, 1), opacity .8s; }
.cu-bow::before, .cu-bow::after { content: ''; position: absolute; bottom: 0; width: 50%; height: 100%; border: min(2.4cqi, 11px) solid var(--rib); }
.cu-bow::before { left: 0; border-radius: 60% 10% 50% 60%; transform: rotate(-14deg); }
.cu-bow::after { right: 0; border-radius: 10% 60% 60% 50%; transform: rotate(14deg); }
.cu-box.open { animation: none; cursor: default; }
.cu-box.open .cu-lid { transform: translate(-30%, -160%) rotate(-28deg); opacity: 0; }
.cu-box.open .cu-bow { transform: translate(-50%, -260%) rotate(20deg); opacity: 0; }
@keyframes giftWiggle { 0%, 70%, 100% { transform: rotate(0); } 76% { transform: rotate(-7deg); } 82% { transform: rotate(6deg); } 88% { transform: rotate(-4deg); } 94% { transform: rotate(2deg); } }
.cu-emoji { font-size: clamp(70px, 30cqi, 150px); line-height: 1; filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .25)); animation: float 3s ease-in-out infinite; }