/* ==========================================================================
   17 Wishes for Fareeha 💌 — styles & animations
   ========================================================================== */

:root {
  --rose: #e8476a;
  --berry: #c2357e;
  --violet: #b45cff;
  --ink: #3a1e2a;
  --ink-soft: #7a5866;
  --teal: #1fa597;
  --font-body: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-script: "Great Vibes", "Segoe Script", cursive;
  --font-hand: "Caveat", "Segoe Print", cursive;
  --ease-pop: cubic-bezier(.2, 1.3, .4, 1);
  color-scheme: light only;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh;
  font-family: var(--font-body); line-height: 1.6; color: var(--ink);
  background: #2c0f36; overflow-x: hidden;
  -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased;
  transition: color .8s ease;
}
body.modal-open { overflow: hidden; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; }
button:focus-visible, a:focus-visible { outline: 3px solid #ffc94d; outline-offset: 3px; }
#fx { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 90; pointer-events: none; }

/* ---------- sky that follows the time of day ---------- */
.sky { position: fixed; inset: 0; z-index: -2; overflow: hidden; transition: background 1.5s ease; }
body[data-sky="morning"] .sky { background: linear-gradient(170deg, #ffe8cc 0%, #ffd1c1 45%, #ffc2d6 100%); }
body[data-sky="day"] .sky { background: linear-gradient(170deg, #dff0ff 0%, #fde3f1 55%, #fff1dc 100%); }
body[data-sky="sunset"] .sky { background: linear-gradient(170deg, #ffcf9f 0%, #ff9db0 50%, #c78bff 100%); }
body[data-sky="night"] .sky { background: radial-gradient(ellipse at 50% 110%, #6b2160 0%, #2c0f36 45%, #12061a 100%); }
body[data-sky="night"] { color: #fff; }
.orb { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; animation: drift 16s ease-in-out infinite alternate; }
.o1 { left: -14vmax; top: -14vmax; width: 46vmax; height: 46vmax; background: #ffb3c6; }
.o2 { right: -16vmax; bottom: -12vmax; width: 42vmax; height: 42vmax; background: #c9a7ff; animation-delay: -8s; }
body[data-sky="night"] .orb { opacity: .22; }
.stars, .stars::before { position: absolute; inset: 0; opacity: 0; transition: opacity 1.5s ease; }
.stars {
  background-image:
    radial-gradient(circle at 20px 30px, #fff 0 1px, transparent 1.6px),
    radial-gradient(circle at 140px 80px, #fff 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 90px 170px, #ffe3ef 0 1px, transparent 1.6px),
    radial-gradient(circle at 200px 140px, #fff 0 .8px, transparent 1.4px);
  background-size: 230px 230px;
}
.stars::before {
  content: ""; opacity: 1;
  background-image: radial-gradient(circle at 50px 60px, #fff 0 1.4px, transparent 2.2px), radial-gradient(circle at 250px 210px, #fff6c9 0 1.2px, transparent 2px);
  background-size: 330px 330px;
  animation: twinkle 3.4s ease-in-out infinite alternate;
}
body[data-sky="night"] .stars { opacity: .85; }
.floaters { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.floater { position: absolute; bottom: -50px; font-size: var(--fs, 20px); opacity: 0; animation: floatUp var(--dur, 18s) linear var(--dl, 0s) infinite; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: .85em 1.5em; border: 0; border-radius: 999px; cursor: pointer;
  background: linear-gradient(135deg, #ff6b8b, var(--rose) 55%, var(--berry));
  color: #fff; font-size: 1rem; font-weight: 800; line-height: 1.2; text-decoration: none;
  box-shadow: 0 12px 26px -10px rgba(232, 71, 106, .7), inset 0 1px 0 rgba(255, 255, 255, .35);
  transition: transform .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: scale(.97); }
.btn.glow { animation: btnGlow 1.6s ease-in-out infinite; }

/* ---------- hero, countdown, progress ---------- */
.page { width: min(1100px, 100% - 32px); margin: 0 auto; padding: max(48px, env(safe-area-inset-top)) 0 calc(96px + env(safe-area-inset-bottom)); }
.hero { max-width: 720px; margin: 0 auto 30px; text-align: center; }
.kicker { display: inline-block; margin: 0; padding: .45em 1.1em; border-radius: 999px; background: rgba(255, 255, 255, .72); color: var(--rose); font-size: .78rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; box-shadow: 0 8px 20px -12px rgba(232, 71, 106, .5); animation: fadeDown .8s ease both; }
body[data-sky="night"] .kicker { background: rgba(255, 255, 255, .12); color: #ffb3c6; }
h1 { margin: .45em 0 0; line-height: 1; }
.h-small { display: block; font-size: clamp(1.6rem, 6.4vw, 2.6rem); font-weight: 900; letter-spacing: -.01em; animation: fadeUp .8s ease .1s both; }
h1 .script {
  display: block; padding: 0 .2em .1em;
  font-family: var(--font-script); font-weight: 400; font-size: clamp(4.4rem, 20vw, 8.6rem); line-height: 1.05;
  background: linear-gradient(90deg, #e8476a, #ff8a5c 25%, #c04df0 50%, #ff8a5c 75%, #e8476a);
  background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  clip-path: inset(-30% 100% -30% -10%);
  animation: write 1.8s cubic-bezier(.6, .1, .3, 1) .3s forwards, shimmer 6s linear 2.1s infinite;
}
body[data-sky="night"] h1 .script { background-image: linear-gradient(90deg, #ffd166, #ff8fab 25%, #c9a7ff 50%, #ff8fab 75%, #ffd166); }
.sub { max-width: 30em; margin: .5em auto 0; font-weight: 700; opacity: .85; animation: fadeUp .8s ease .5s both; }

.status {
  max-width: 520px; margin: 24px auto 0; padding: 22px 18px 20px; border-radius: 28px;
  background: rgba(255, 255, 255, .62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 24px 50px -28px rgba(80, 20, 60, .55), inset 0 0 0 1px rgba(255, 255, 255, .7);
  animation: fadeUp .9s ease .7s both;
}
body[data-sky="night"] .status { background: rgba(255, 255, 255, .08); box-shadow: 0 24px 50px -28px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(255, 255, 255, .14); }
.status-label { margin: 0; font-size: 1.05rem; font-weight: 800; line-height: 1.35; }
.clock { display: flex; justify-content: center; gap: 10px; margin: 12px 0 4px; }
.clock span { min-width: clamp(76px, 22vw, 96px); padding: 10px 6px 8px; border-radius: 18px; background: rgba(255, 255, 255, .78); box-shadow: 0 10px 22px -16px rgba(80, 20, 60, .6); }
body[data-sky="night"] .clock span { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.clock b { display: block; font-size: clamp(2rem, 9vw, 3rem); font-weight: 900; line-height: 1.05; font-variant-numeric: tabular-nums; background: linear-gradient(135deg, var(--rose), var(--violet)); -webkit-background-clip: text; background-clip: text; color: transparent; }
body[data-sky="night"] .clock b { background-image: linear-gradient(#fff, #ffc2d4); }
.clock small { font-size: .64rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.status-note { margin: .35em 0 0; font-family: var(--font-hand); font-size: 1.4rem; font-weight: 700; line-height: 1.25; }
.status .btn { margin-top: 12px; }

.progress { max-width: 520px; margin: 22px auto 0; animation: fadeUp .9s ease .85s both; }
.progress-track { position: relative; height: 12px; border-radius: 99px; background: rgba(255, 255, 255, .55); }
body[data-sky="night"] .progress-track { background: rgba(255, 255, 255, .12); }
.progress-track span { display: block; width: var(--p, 0%); height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ff8fab, var(--rose), var(--violet)); transition: width 1.2s var(--ease-pop); }
.progress-track i { position: absolute; left: var(--p, 0%); top: 50%; translate: -50% -50%; font-size: 22px; font-style: normal; transition: left 1.2s var(--ease-pop); animation: beat 1.3s ease-in-out infinite; }
.progress-text { margin: 8px 0 0; font-size: .85rem; font-weight: 800; opacity: .8; }

/* ---------- the 17 cards ---------- */
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 1000px; margin: 0 auto; }
.tile {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  aspect-ratio: 3 / 4; padding: 10px 6px; border: 0; border-radius: 20px; cursor: pointer;
  color: var(--ink); background: var(--tile-bg);
  box-shadow: 0 14px 30px -18px rgba(60, 10, 40, .6), inset 0 0 0 1px rgba(255, 255, 255, .55);
  opacity: 0; translate: 0 26px;
  transition: opacity .6s ease var(--td, 0s), translate .7s var(--ease-pop) var(--td, 0s), transform .25s ease, box-shadow .25s ease;
}
.grid.shown .tile { opacity: 1; translate: 0 0; }
.tile[data-theme="night"] { color: #fff; box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(255, 255, 255, .16); }
.tile:hover { transform: translateY(-3px); }
.t-time { font-size: clamp(1rem, 4.2vw, 1.3rem); font-weight: 900; line-height: 1.1; letter-spacing: -.01em; }
.t-face { font-size: clamp(1.8rem, 8.5vw, 2.5rem); line-height: 1.1; }
.t-note { min-height: 2.5em; font-size: .7rem; font-weight: 800; line-height: 1.25; text-align: center; opacity: .75; font-variant-numeric: tabular-nums; }
.tile.locked .t-face { opacity: .75; filter: grayscale(.3); }
.tile.next { box-shadow: 0 0 0 2px rgba(255, 255, 255, .9), 0 14px 30px -18px rgba(60, 10, 40, .6); }
.tile.next .t-note { opacity: 1; color: var(--rose); }
.tile[data-theme="night"].next .t-note { color: #ffb3c6; }
.tile.ready { box-shadow: 0 0 0 3px #fff, 0 0 0 6px rgba(232, 71, 106, .55), 0 18px 34px -16px rgba(232, 71, 106, .8); animation: readyGlow 1.6s ease-in-out infinite; }
.tile.ready .t-face { animation: wiggle 1.4s ease-in-out infinite; }
.tile.ready .t-note { opacity: 1; }
.tile.opened { justify-content: flex-end; color: #fff; }
.tile.opened::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--photo) var(--focus, 50% 35%) / cover no-repeat; }
.tile.opened::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(40, 8, 30, .78)); }
.tile.opened .t-face { display: none; }
.tile.opened .t-note { min-height: 0; opacity: .95; text-shadow: 0 1px 4px rgba(0, 0, 0, .6); }
.tile.opened .t-time { text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }
.tile.shake { animation: shakeX .5s ease; }
.tile.pop { animation: unlockPop .8s var(--ease-pop); }

/* ---------- footer ---------- */
.foot { margin-top: 40px; text-align: center; font-weight: 700; opacity: .9; }
.foot p { margin: .4em 0; }
.foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; font-size: .9rem; }
.foot a { color: inherit; text-decoration-color: rgba(232, 71, 106, .5); text-underline-offset: 3px; }
.love-count { min-height: 1.6em; font-family: var(--font-hand); font-size: 1.35rem; }

/* ---------- floating buttons & toasts ---------- */
.fabs { position: fixed; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 40; display: flex; flex-direction: column; gap: 10px; }
.fab { position: relative; display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; font-size: 1.5rem; cursor: pointer; background: rgba(255, 255, 255, .9); box-shadow: 0 12px 28px -12px rgba(60, 10, 40, .7), inset 0 0 0 1.5px rgba(232, 71, 106, .25); transition: transform .2s; }
.fab:active { transform: scale(.92); }
#hugFab { animation: nudge 6s ease-in-out 5s infinite; }
.eq { display: flex; align-items: flex-end; gap: 3px; height: 20px; }
.eq i { width: 4px; height: 5px; border-radius: 2px; background: var(--rose); animation: eq 1s ease-in-out infinite; }
.eq i:nth-child(2) { animation-delay: -.35s; }
.eq i:nth-child(3) { animation-delay: -.7s; }
.fab.off .eq i { height: 4px; background: #c9a9b5; animation: none; }
.fab.off::after { content: ""; position: absolute; width: 28px; height: 3px; border-radius: 2px; background: #c9a9b5; transform: rotate(-45deg); }

.toasts { position: fixed; left: 50%; top: calc(10px + env(safe-area-inset-top)); z-index: 85; display: flex; flex-direction: column; gap: 8px; width: min(94vw, 390px); transform: translateX(-50%); pointer-events: none; }
.toast { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 20px; background: rgba(255, 255, 255, .95); color: var(--ink); box-shadow: 0 16px 36px -14px rgba(40, 10, 30, .6); cursor: pointer; pointer-events: auto; opacity: 0; transform: translateY(-120%) scale(.96); transition: transform .5s var(--ease-pop), opacity .35s ease; }
.toast.in { opacity: 1; transform: none; }
.toast.out { opacity: 0; transform: translateY(-60%) scale(.96); }
.toast-icon { display: grid; place-items: center; flex: 0 0 38px; height: 38px; border-radius: 11px; font-size: 1.3rem; background: linear-gradient(135deg, #ffe0e8, #efe4ff); }
.toast b { display: block; font-size: .86rem; }
.toast p { margin: 1px 0 0; font-size: .92rem; line-height: 1.35; }

/* ---------- card viewer ---------- */
.viewer { position: fixed; inset: 0; z-index: 70; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; opacity: 0; transition: opacity .35s ease; }
.viewer.show { opacity: 1; }
.viewer-bg { position: fixed; inset: 0; background: rgba(28, 6, 30, .72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.v-close { position: fixed; right: 12px; top: calc(12px + env(safe-area-inset-top)); z-index: 3; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--rose); font-size: 1.05rem; font-weight: 900; cursor: pointer; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .5); }
.v-stage { position: relative; z-index: 1; display: grid; place-items: center; min-height: 100%; padding: calc(64px + env(safe-area-inset-top)) 16px calc(40px + env(safe-area-inset-bottom)); }

/* covers: envelope, gift, heart */
.cover { display: flex; flex-direction: column; align-items: center; gap: 18px; color: #fff; text-align: center; cursor: pointer; animation: coverIn .7s var(--ease-pop) both; }
.cover.gone { animation: coverOut .45s ease forwards; pointer-events: none; }
.cover-label { margin: 0; font-size: .8rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: #ffd1dc; }
.cover-title { margin: -8px 0 0; font-family: var(--font-script); font-size: clamp(2.4rem, 10vw, 3.4rem); line-height: 1.1; }
.cover-hint { margin: 0; font-weight: 800; animation: hintPulse 1.6s ease-in-out infinite; }
.cover.opening .cover-hint { visibility: hidden; }

.env { position: relative; width: min(300px, 76vw); aspect-ratio: 3 / 2; perspective: 900px; filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .45)); animation: floaty 3.6s ease-in-out infinite; }
.cover.opening .env { animation: none; }
.env-back, .env-front { position: absolute; inset: 0; border-radius: 12px; }
.env-back { background: #ee8fa8; }
.env-letter { position: absolute; left: 7%; right: 7%; top: 6%; z-index: 1; display: grid; place-items: center; height: 82%; border-radius: 8px; font-size: 2.4rem; background: repeating-linear-gradient(#fffdf7 0 18px, #f5e6df 18px 19px); transition: transform .9s var(--ease-pop) .45s; }
.env-front { z-index: 2; background: linear-gradient(160deg, #ffb3c6, #f58aa7); clip-path: polygon(0 0, 50% 54%, 100% 0, 100% 100%, 0 100%); }
.env-flap { position: absolute; left: 0; right: 0; top: 0; z-index: 3; height: 58%; transform-origin: 50% 0; background: linear-gradient(180deg, #ffa2bb, #ef7a9b); clip-path: polygon(0 0, 100% 0, 50% 100%); transition: transform .6s ease, z-index 0s linear .3s; }
.env-seal { position: absolute; left: 50%; top: 54%; z-index: 4; display: grid; place-items: center; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; color: #fff; font-size: 1.35rem; background: radial-gradient(circle at 35% 30%, #ff7a9a, #c2184b); box-shadow: 0 4px 10px rgba(120, 0, 40, .4), inset 0 -3px 6px rgba(0, 0, 0, .2); animation: beat 1.4s ease-in-out infinite; transition: transform .4s ease, opacity .4s ease; }
.cover.opening .env-seal { animation: none; transform: scale(0); opacity: 0; }
.cover.opening .env-flap { z-index: 0; transform: rotateX(180deg); }
.cover.opening .env-letter { transform: translateY(-62%); }

.giftbox { position: relative; width: min(230px, 60vw); aspect-ratio: 1; }
.giftbox .gift-svg { position: relative; z-index: 2; width: 100%; height: 100%; transform-origin: 50% 95%; animation: giftIdle 3s ease-in-out infinite; filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .45)); }
.giftbox .rays { position: absolute; inset: -55%; z-index: 1; border-radius: 50%; opacity: 0; scale: .3; background: repeating-conic-gradient(rgba(255, 226, 140, 0) 0deg 9deg, rgba(255, 226, 140, .45) 9deg 18deg); -webkit-mask: radial-gradient(circle, #000 16%, transparent 62%); mask: radial-gradient(circle, #000 16%, transparent 62%); transition: opacity .5s ease, scale .9s cubic-bezier(.2, .9, .3, 1); }
.cover.shaking .gift-svg { animation: shake .6s linear; }
.cover.opening .gift-svg { animation: none; }
.cover.opening .rays { opacity: 1; scale: 1; animation: spin 12s linear infinite; }
.gift-svg { overflow: visible; --g-base: #ff5c8a; --g-top: #ff7ba0; --g-rib: #ffd166; --g-knot: #f2b437; }
.g-base { fill: var(--g-base); }
.g-top { fill: var(--g-top); }
.g-rib { fill: var(--g-rib); }
.g-loop { fill: var(--g-rib); stroke: var(--g-knot); stroke-width: 3; stroke-linejoin: round; }
.g-knot { fill: var(--g-knot); }
.g-shadow { fill: rgba(0, 0, 0, .13); }
.gift-svg .g-lid { transform-origin: 100px 82px; transition: transform .8s cubic-bezier(.2, .8, .3, 1), opacity .7s ease .15s; }
.cover.opening .g-lid { transform: translate(-34px, -120px) rotate(-38deg); opacity: 0; }

.bigheart { position: relative; display: grid; place-items: center; width: min(240px, 64vw); filter: drop-shadow(0 20px 30px rgba(255, 60, 120, .45)); animation: beat 1.3s ease-in-out infinite; }
.bigheart svg { width: 100%; height: auto; overflow: visible; }
.bigheart svg path { fill: #ff4d79; }
.bigheart span { position: absolute; top: 34%; font-size: 3rem; }
.cover.opening .bigheart { animation: heartBurst .9s cubic-bezier(.5, 0, .7, .4) forwards; }

/* the card */
.card {
  --card-bg: linear-gradient(165deg, #fff6e6, #ffe1d2 55%, #ffd3e0); --card-ink: var(--ink); --accent: var(--rose);
  position: relative; width: min(480px, 100%); padding: 22px 20px 18px; border-radius: 30px;
  background: var(--card-bg); color: var(--card-ink);
  box-shadow: 0 40px 80px -30px rgba(10, 0, 10, .8), inset 0 0 0 1px rgba(255, 255, 255, .5);
  animation: cardIn .8s var(--ease-pop) both;
}
.card.theme-day { --card-bg: linear-gradient(165deg, #f2f8ff, #fde8f4 55%, #fff6e8); --accent: #d63384; }
.card.theme-sunset { --card-bg: linear-gradient(165deg, #ffe7cf, #ffc7c9 50%, #e9c4ff); --card-ink: #3a1530; --accent: #c2357e; }
.card.theme-night { --card-bg: linear-gradient(165deg, #3a1450, #24103a 55%, #140821); --card-ink: #fff; --accent: #ff9fbb; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9), inset 0 0 0 1px rgba(255, 255, 255, .14); }
.card.squish { animation: squish .7s ease; }
.c-time { margin: 0 0 14px; text-align: center; font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.c-photo { position: relative; width: min(320px, 100%); margin: 0 auto 18px; animation: photoIn .9s var(--ease-pop) .15s both; }
.c-photo-btn { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.c-photo img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: var(--focus, 50% 35%); background: rgba(255, 255, 255, .4); }
.frame-polaroid .c-photo-btn { padding: 10px 10px 36px; background: #fff; rotate: -2.5deg; box-shadow: 0 16px 30px -14px rgba(0, 0, 0, .5); }
.frame-polaroid .c-photo-btn::after { content: "💖"; position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; font-size: 1.1rem; }
.frame-polaroid .c-photo::before { content: ""; position: absolute; left: 50%; top: -12px; z-index: 2; width: 90px; height: 26px; margin-left: -45px; background: rgba(255, 214, 226, .85); rotate: 3deg; box-shadow: 0 2px 4px rgba(0, 0, 0, .08); }
.frame-arch .c-photo img { border: 6px solid #fff; border-radius: 999px 999px 20px 20px; box-shadow: 0 0 0 3px var(--accent), 0 18px 34px -16px rgba(0, 0, 0, .5); }
.frame-ring .c-photo-btn { padding: 7px; border-radius: 30px; background: conic-gradient(from var(--a, 0deg), #ff6b8b, #ffd166, #7bdff2, #b892ff, #ff6b8b); box-shadow: 0 18px 34px -16px rgba(0, 0, 0, .5); }
.frame-ring .c-photo img { border-radius: 24px; }
.frame-film .c-photo-btn { padding: 22px 12px; border-radius: 8px; background: radial-gradient(circle, #fff 0 3px, transparent 3.5px) 0 4px / 18px 14px repeat-x, radial-gradient(circle, #fff 0 3px, transparent 3.5px) 0 calc(100% - 4px) / 18px 14px repeat-x, #1d1a22; box-shadow: 0 18px 34px -16px rgba(0, 0, 0, .55); }
.kiss-mark { position: absolute; z-index: 3; font-size: 46px; line-height: 1; pointer-events: none; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .25)); animation: stamp .55s var(--ease-pop) both; }
.c-title { margin: 0; text-align: center; font-family: var(--font-script); font-size: clamp(2.3rem, 9vw, 3rem); font-weight: 400; line-height: 1.1; color: var(--accent); animation: fadeUp .7s ease .35s both; }
.c-text { margin: .6em 0 0; text-align: center; font-size: 1.05rem; font-weight: 600; line-height: 1.65; }
.c-text .w { display: inline-block; opacity: 0; transform: translateY(6px); animation: wordIn .5s ease forwards; animation-delay: var(--d, 0s); }
.c-ps { margin: .9em 0 0; text-align: center; font-family: var(--font-hand); font-size: 1.45rem; font-weight: 700; line-height: 1.25; color: var(--accent); animation: fadeUp .7s ease 1.2s both; }
.c-sign { margin: 1em 0 0; text-align: center; font-size: .9rem; font-weight: 700; opacity: .9; animation: fadeUp .7s ease 1.4s both; }
.c-sign b { display: block; font-family: var(--font-script); font-size: 2.6rem; font-weight: 400; line-height: 1.15; color: var(--accent); }
.c-sign small { display: block; font-size: .78rem; font-weight: 800; letter-spacing: .04em; opacity: .85; }
.c-love { margin-top: 16px; text-align: center; animation: fadeUp .7s ease 1.6s both; }
.c-love p { margin: 0 0 8px; font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
.c-love-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.love-btn { padding: .6em 1.05em; border: 0; border-radius: 999px; cursor: pointer; font-weight: 800; color: var(--accent); background: rgba(255, 255, 255, .88); box-shadow: 0 8px 18px -12px rgba(60, 10, 40, .6), inset 0 0 0 1.5px rgba(232, 71, 106, .2); transition: transform .15s ease; }
.theme-night .love-btn { background: rgba(255, 255, 255, .12); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .25); }
.love-btn:active { transform: scale(.92); }
.c-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px dashed rgba(122, 88, 102, .35); }
.theme-night .c-nav { border-top-color: rgba(255, 255, 255, .2); }
.nav-btn { padding: .5em .9em; border: 0; border-radius: 999px; cursor: pointer; font-size: .85rem; font-weight: 800; background: rgba(255, 255, 255, .7); color: var(--accent); }
.theme-night .nav-btn { background: rgba(255, 255, 255, .12); color: #fff; }
.nav-btn:disabled { opacity: .35; cursor: default; }
.c-next { flex: 1; text-align: center; font-size: .78rem; font-weight: 800; line-height: 1.3; opacity: .85; font-variant-numeric: tabular-nums; }

.float-text { position: fixed; z-index: 95; font-size: 1.05rem; font-weight: 900; color: var(--rose); white-space: nowrap; pointer-events: none; text-shadow: 0 2px 0 #fff, 0 0 12px #fff; animation: floatText 1.4s ease-out forwards; }

/* photo zoom */
.zoom { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; background: rgba(10, 0, 12, .94); cursor: zoom-out; animation: fadeIn .25s ease; }
.zoom img { max-width: 100%; max-height: 92vh; border-radius: 12px; box-shadow: 0 30px 60px rgba(0, 0, 0, .5); }

/* ---------- hug overlay with the bears ---------- */
.hug-overlay { position: fixed; inset: 0; z-index: 75; display: grid; place-items: center; padding: 20px; text-align: center; color: var(--ink); cursor: pointer; background: radial-gradient(circle at 50% 55%, rgba(255, 222, 233, .97), rgba(255, 240, 245, .97)); opacity: 0; transition: opacity .35s ease; }
.hug-overlay.show { opacity: 1; }
.hug-stage { --bw: 44%; position: relative; width: min(78vw, 340px); aspect-ratio: 1.25; margin: 0 auto; }
.hug-text { margin: 18px 0 4px; font-size: clamp(1.4rem, 5.4vw, 2rem); font-weight: 900; line-height: 1.2; }
.hug-count { margin: 0; font-weight: 700; color: var(--ink-soft); }
.hug-hint { margin: 18px 0 0; font-size: .85rem; opacity: .6; }
.actor { position: absolute; left: var(--x, -30%); bottom: 0; z-index: 2; width: var(--bw); transform: translateX(-50%); transition: left .9s cubic-bezier(.3, 1.2, .5, 1); }
.actor.her { z-index: 3; }
.hug-overlay.instant .actor { transition: none; }
.actor > svg { display: block; width: 100%; height: auto; overflow: visible; transform-origin: 50% 100%; }
.actor.walking > svg { animation: waddle .42s ease-in-out infinite alternate; }
.actor.hugging > svg { animation: squeeze 1.6s ease-in-out infinite; }
.bear { --fur: #c98b5b; --belly: #f3d9bf; --ear: #e7b48f; --muzzle: #f6e3cf; --line: #6b4434; }
.actor.her .bear { --fur: #fde4d8; --belly: #fff7f2; --ear: #f9b6c6; --muzzle: #fff8f3; --line: #a06e60; }
.bear .fur { fill: var(--fur); stroke: var(--line); stroke-width: 2.2; }
.bear .belly { fill: var(--belly); }
.bear .ear-in { fill: var(--ear); }
.bear .muzzle { fill: var(--muzzle); stroke: var(--line); stroke-width: 1.4; }
.bear .nose { fill: #3b2219; }
.bear .mouth { fill: none; stroke: #3b2219; stroke-width: 2; stroke-linecap: round; }
.bear .eyes { fill: #2b1a14; transform-origin: 60px 45px; animation: blink 5s infinite; }
.bear .eyes-happy { fill: none; stroke: #2b1a14; stroke-width: 2.6; stroke-linecap: round; opacity: 0; }
.bear .blush { fill: #ff8fab; opacity: 0; transition: opacity .5s; }
.bear .badge { fill: #ff5c8a; }
.bear .steth path { fill: none; stroke: var(--teal); stroke-width: 3.2; stroke-linecap: round; }
.bear .steth circle { fill: #dff6f2; stroke: var(--teal); stroke-width: 2.6; }
.bear .bow path, .bear .bow circle { fill: #ff5c8a; stroke: #df3068; stroke-width: 1.4; stroke-linejoin: round; }
.actor.me .steth, .actor.me .bow { display: none; }
.actor.her .badge { display: none; }
.bear .arm, .bear .bear-head { transition: transform .7s cubic-bezier(.3, 1.4, .5, 1); }
.bear .arm-l { transform-origin: 30px 90px; }
.bear .arm-r { transform-origin: 90px 90px; }
.bear .bear-head { transform-origin: 60px 84px; }
.actor.hugging .blush { opacity: .85; }
.actor.me.hugging .arm-r { transform: rotate(-82deg); }
.actor.me.hugging .arm-l { transform: rotate(14deg); }
.actor.her.hugging .arm-l { transform: rotate(98deg); }
.actor.her.hugging .arm-r { transform: rotate(-16deg); }
.actor.me.hugging .bear-head { transform: rotate(9deg) translate(3px, 2px); }
.actor.her.hugging .bear-head { transform: rotate(-9deg) translate(-3px, 2px); }
.actor.hugging .eyes { opacity: 0; }
.actor.hugging .eyes-happy { opacity: 1; }

/* ---------- larger screens ---------- */
@media (min-width: 640px) {
  .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
}
@media (min-width: 980px) {
  .grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* ---------- keyframes ---------- */
@keyframes fadeIn { from { opacity: 0; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes fadeDown { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@keyframes write { to { clip-path: inset(-30% -10% -30% -10%); } }
@keyframes shimmer { to { background-position: 200% 0; } }
@keyframes drift { to { transform: translate(6vmax, 4vmax) scale(1.1); } }
@keyframes twinkle { from { opacity: .3; } to { opacity: 1; } }
@keyframes floatUp { 0% { transform: translateY(0) rotate(0); opacity: 0; } 10% { opacity: .55; } 85% { opacity: .45; } 100% { transform: translateY(-112vh) rotate(25deg); opacity: 0; } }
@keyframes beat { 0%, 70%, 100% { scale: 1; } 14% { scale: 1.16; } 28% { scale: 1; } 42% { scale: 1.09; } }
@keyframes floatText { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.6); } 15% { opacity: 1; transform: translate(-50%, -70%) scale(1.08); } 100% { opacity: 0; transform: translate(-50%, -240%) scale(1); } }
@keyframes readyGlow { 0%, 100% { box-shadow: 0 0 0 3px #fff, 0 0 0 6px rgba(232, 71, 106, .55), 0 18px 34px -16px rgba(232, 71, 106, .8); } 50% { box-shadow: 0 0 0 3px #fff, 0 0 0 11px rgba(232, 71, 106, .25), 0 18px 40px -12px rgba(232, 71, 106, .95); } }
@keyframes wiggle { 0%, 100% { rotate: 0deg; } 20% { rotate: -12deg; } 40% { rotate: 10deg; } 60% { rotate: -6deg; } 80% { rotate: 4deg; } }
@keyframes shakeX { 0%, 100% { translate: 0; } 20% { translate: -8px; } 40% { translate: 7px; } 60% { translate: -5px; } 80% { translate: 3px; } }
@keyframes unlockPop { 0% { transform: scale(.85); } 50% { transform: scale(1.12) rotate(-3deg); } 100% { transform: none; } }
@keyframes btnGlow { 0%, 100% { box-shadow: 0 12px 26px -10px rgba(232, 71, 106, .7), 0 0 0 0 rgba(232, 71, 106, .45); } 50% { box-shadow: 0 12px 26px -10px rgba(232, 71, 106, .7), 0 0 0 12px rgba(232, 71, 106, 0); } }
@keyframes nudge { 0%, 86%, 100% { rotate: 0deg; } 90% { rotate: -14deg; } 94% { rotate: 12deg; } }
@keyframes eq { 0%, 100% { height: 5px; } 50% { height: 20px; } }
@keyframes coverIn { from { opacity: 0; transform: scale(.7) translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes coverOut { to { opacity: 0; transform: scale(1.25); filter: blur(6px); } }
@keyframes hintPulse { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes giftIdle { 0%, 72%, 92%, 100% { transform: rotate(0); } 76% { transform: rotate(-6deg) scale(1.03); } 80% { transform: rotate(5deg) scale(1.03); } 84% { transform: rotate(-4deg); } 88% { transform: rotate(3deg); } }
@keyframes shake { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(-10deg) scale(1.05); } 30% { transform: rotate(9deg) scale(1.08); } 45% { transform: rotate(-8deg) scale(1.1); } 60% { transform: rotate(7deg) scale(1.1); } 75% { transform: rotate(-4deg) scale(1.08); } }
@keyframes spin { to { rotate: 360deg; } }
@keyframes heartBurst { 0% { transform: scale(1); } 40% { transform: scale(.85); } 100% { transform: scale(2.6); opacity: 0; } }
@keyframes cardIn { from { opacity: 0; transform: translateY(40px) scale(.9) rotate(-2deg); } to { opacity: 1; transform: none; } }
@keyframes photoIn { from { opacity: 0; transform: translateY(-30px) rotate(-8deg) scale(.85); } to { opacity: 1; transform: none; } }
@keyframes wordIn { to { opacity: 1; transform: none; } }
@keyframes stamp { from { opacity: 0; transform: scale(3) rotate(var(--rot, -12deg)); } to { opacity: .95; transform: scale(1) rotate(var(--rot, -12deg)); } }
@keyframes squish { 30% { transform: scale(.95, .97); } 60% { transform: scale(1.03); } 100% { transform: none; } }
@keyframes waddle { from { transform: rotate(-5deg) translateY(0); } to { transform: rotate(5deg) translateY(-5%); } }
@keyframes squeeze { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04, .97); } }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }

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