*, *::before, *::after { box-sizing: border-box; }

:root {
  --bg: #F7EDEF;
  --panel: #FFFFFF;
  --art: #F4D6DE;
  --ink: #3D2430;
  --ink-soft: #5A3A48;
  --muted: #6E4B5A;
  --accent: #C2255C;
  --accent-hover: #A61E4D;
  --line: #E6CBD3;
  --paper: #F3ECE3;
  --seal: #C2415A;
  --shadow: 0 24px 60px rgba(122, 21, 56, 0.18);

  --vh: 1vh; /* перезаписывается на 1dvh, где поддерживается */
}
@supports (height: 1dvh) {
  :root { --vh: 1dvh; }
}

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
}

body {
  font-family: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

img { display: block; max-width: 100%; }

h1, p { margin: 0; }

h1 {
  font-family: "Caveat", cursive;
  font-weight: 700;
  font-size: clamp(32px, 9vw, 44px);
  line-height: 1.05;
  overflow-wrap: anywhere;
}

p {
  font-size: clamp(16px, 4.4vw, 18px);
  line-height: 1.5;
  color: var(--ink-soft);
}

/* ---------- Экраны ----------
   Экран занимает весь вьюпорт и скроллится, если панель выше экрана
   (маленький телефон, альбомная ориентация). margin:auto у ребёнка
   центрирует его, но не обрезает сверху при переполнении. */
.screen {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding:
    max(16px, env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right))
    max(16px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s ease, visibility 0s linear .45s;
  z-index: 1;
}
.screen.active {
  opacity: 1;
  visibility: visible;
  transition: opacity .45s ease;
  z-index: 2;
}
.screen > * { margin: auto; }

/* ---------- Панель ---------- */
.panel {
  width: 100%;
  max-width: 420px;
  background: var(--panel);
  border-radius: 28px;
  box-shadow: var(--shadow);
  overflow: hidden;
  flex-shrink: 0;
}
.screen.active .panel { animation: pop .55s cubic-bezier(.2, .9, .3, 1.2) both; }
@keyframes pop {
  from { opacity: 0; transform: translateY(24px) scale(.94); }
}

.art {
  background: var(--art);
  height: clamp(180px, calc(var(--vh) * 38), 400px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.art { padding: 12px 10px 0; }
.art.short { height: clamp(150px, calc(var(--vh) * 26), 260px); }

/* ---------- Кролики (SVG из bunnies.js) ---------- */
.scene { width: 100%; height: 100%; max-width: 380px; overflow: visible; }
.scene .bun, .scene .ear, .scene .head, .scene .hold, .scene .snack, .scene .chew,
.scene .tear, .scene .drop, .scene .blink, .scene .paw-up,
.scene .spark, .scene .float-heart, .scene .cloud {
  transform-box: fill-box;
}
.scene .bun { transform-origin: 50% 100%; }
.scene .ear { transform-origin: 50% 100%; }
.scene .head { transform-origin: 50% 80%; }
.scene .snack, .scene .chew, .scene .blink, .scene .spark { transform-origin: 50% 50%; }

/* Моргание */
.blink { animation: blink 4.5s infinite; }
.b-pink .blink { animation-delay: 1.3s; }
@keyframes blink { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }

/* 1. Грусть: уши висят, покачиваются, текут слёзы, тучка с дождём */
.m-sad .ear.l { transform: rotate(-45deg); }
.m-sad .ear.r { transform: rotate(45deg); }
.m-sad { animation: sway 3.2s ease-in-out infinite; }
.b-pink.m-sad { animation-delay: -1.6s; }
@keyframes sway { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg) translateY(2px); } }
.m-sad .head { animation: sob 1.6s ease-in-out infinite; }
@keyframes sob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(2px) rotate(1deg); } }
.tear { animation: tear 1.6s ease-in infinite; opacity: 0; }
.tear.t2 { animation-delay: .8s; }
.b-pink .tear { animation-delay: .4s; }
.b-pink .tear.t2 { animation-delay: 1.2s; }
@keyframes tear {
  0% { transform: translateY(0) scale(.4); opacity: 0; }
  15% { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(30px) scale(1); opacity: 0; }
}
.cloud { animation: drift 4s ease-in-out infinite; }
@keyframes drift { 50% { transform: translateX(6px); } }
.drop { animation: rain 1s linear infinite; opacity: 0; }
.drop.d1 { animation-delay: .33s; }
.drop.d2 { animation-delay: .66s; }
@keyframes rain { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(22px); opacity: 0; } }

/* 2. Серый воодушевлён: прыгает, уши торчком и шевелятся */
.m-excited { animation: hop .8s ease-in-out infinite; }
@keyframes hop {
  0%, 100% { transform: translateY(0) scale(1.05, .95); }
  45%, 55% { transform: translateY(-14px) scale(.97, 1.03); }
}
.m-excited .ear.l { animation: wiggleL .4s ease-in-out infinite alternate; }
.m-excited .ear.r { animation: wiggleR .4s ease-in-out infinite alternate; }
@keyframes wiggleL { from { transform: rotate(-12deg); } to { transform: rotate(2deg); } }
@keyframes wiggleR { from { transform: rotate(12deg); } to { transform: rotate(-2deg); } }
.s-excited .b-pink { animation: bob 2.6s ease-in-out infinite; }
.s-excited .b-pink .head { transform: rotate(-8deg); } /* смотрит на серого */
@keyframes bob { 50% { transform: translateY(-4px); } }
.spark { animation: twinkle 1.4s ease-in-out infinite; }
.spark.s1 { animation-delay: .35s; }
.spark.s2 { animation-delay: .7s; }
.spark.s3 { animation-delay: 1.05s; }
@keyframes twinkle { 0%, 100% { transform: scale(.2) rotate(0); opacity: 0; } 50% { transform: scale(1) rotate(45deg); opacity: 1; } }

/* 3. Застолье: по очереди берут хинкали с тарелки и жуют */
.m-eat .hold { animation: lift 4s ease-in-out infinite; }
.m-eat .snack { animation: bite 4s ease-in-out infinite; }
.m-eat .chew { animation: chew 4s linear infinite; }
.m-eat .head { animation: nod 4s ease-in-out infinite; }
.b-pink.m-eat .hold, .b-pink.m-eat .snack, .b-pink.m-eat .chew, .b-pink.m-eat .head { animation-delay: -2s; }
.m-eat .ear.l { transform: rotate(-10deg); }
.m-eat .ear.r { transform: rotate(10deg); }
@keyframes lift {
  0%, 15% { transform: translateY(36px); }
  35% { transform: translateY(0); }
  45%, 70% { transform: translateY(-8px); }
  85%, 100% { transform: translateY(36px); }
}
@keyframes bite {
  0%, 48% { transform: scale(1); opacity: 1; }
  54% { transform: scale(.75); }
  62% { transform: scale(.45); }
  70% { transform: scale(0); opacity: 0; }
  99% { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes chew {
  0%, 46% { transform: scaleY(.35); }
  50%, 58%, 66%, 74% { transform: scaleY(1); }
  54%, 62%, 70%, 78%, 100% { transform: scaleY(.35); }
}
@keyframes nod {
  0%, 40%, 80%, 100% { transform: rotate(0); }
  50%, 70% { transform: translateY(3px) rotate(0); }
}

/* 4. Серый радуется: высокие прыжки, машет лапками, сердечки */
.m-joy { animation: jump .9s cubic-bezier(.3, 0, .4, 1) infinite; }
@keyframes jump {
  0%, 100% { transform: translateY(0) scale(1.06, .94); }
  50% { transform: translateY(-20px) scale(.96, 1.04); }
}
.paw-up.l { transform-origin: 80% 100%; animation: waveL .45s ease-in-out infinite alternate; }
.paw-up.r { transform-origin: 20% 100%; animation: waveR .45s ease-in-out infinite alternate; }
@keyframes waveL { from { transform: rotate(-25deg); } to { transform: rotate(10deg); } }
@keyframes waveR { from { transform: rotate(25deg); } to { transform: rotate(-10deg); } }
.m-joy .ear.l { animation: wiggleL .45s ease-in-out infinite alternate; }
.m-joy .ear.r { animation: wiggleR .45s ease-in-out infinite alternate; }
.s-joy .b-pink { animation: bob 2.4s ease-in-out infinite; }
.s-joy .b-pink .head { transform: rotate(-6deg); }
.float-heart { animation: heartUp 2.4s ease-out infinite; opacity: 0; }
.float-heart.h1 { animation-delay: .6s; }
.float-heart.h2 { animation-delay: 1.2s; }
.float-heart.h3 { animation-delay: 1.8s; }
@keyframes heartUp {
  0% { transform: translateY(10px) scale(.4); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateY(-40px) scale(1.1); opacity: 0; }
}

/* ---------- Форма свидания ---------- */
.fields {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 6px;
  text-align: left;
}
.field-row { display: flex; gap: 10px; }
.field-row .field { flex: 1 1 0; min-width: 0; }
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: none;
  min-width: 0;
}
.label {
  padding: 0;
  font-size: 14px;
  font-weight: 800;
  color: var(--muted);
}
.pick {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  padding: 10px 12px 10px 14px;
  border: 2px solid var(--line);
  border-radius: 14px;
  background: #FFF9FA;
  color: var(--ink);
  font: 700 15px/1.2 "Nunito", system-ui, sans-serif;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease;
}
.pick:hover, .pick:focus-visible { border-color: var(--accent); outline: none; }
.pick.empty { color: var(--muted); font-weight: 600; }
.pick-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick svg {
  width: 20px; height: 20px; flex-shrink: 0;
  fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- Всплывашка календаря / времени ---------- */
.sheet {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  background: rgba(61, 36, 48, .35);
  opacity: 0;
  transition: opacity .2s ease;
}
.sheet[hidden] { display: none; }
.sheet.open { opacity: 1; }
.sheet-card {
  width: 100%;
  max-width: 360px;
  max-height: 100%;
  overflow-y: auto;
  padding: 18px 16px 18px;
  border-radius: 24px;
  background: #fff;
  box-shadow: var(--shadow);
  transform: translateY(16px) scale(.97);
  transition: transform .25s cubic-bezier(.2, .9, .3, 1.2);
}
.sheet.open .sheet-card { transform: none; }
.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}
.sheet-title {
  flex: 1;
  text-align: center;
  font-family: "Caveat", cursive;
  font-weight: 700;
  font-size: 30px;
  line-height: 1;
}
.sheet-nav {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: var(--art);
  cursor: pointer;
}
.sheet-nav svg { width: 18px; fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.sheet-nav:disabled { opacity: .35; cursor: default; }
.sheet.is-time .sheet-nav { visibility: hidden; }

.cal {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.cal-wd {
  padding: 4px 0 6px;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
}
.cal-wd.we { color: var(--accent); }
.cal-day, .time-opt {
  min-height: 40px;
  border: none;
  border-radius: 12px;
  background: #FFF4F6;
  color: var(--ink);
  font: 700 15px/1 "Nunito", system-ui, sans-serif;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, transform .1s ease;
}
.cal-day { aspect-ratio: 1; min-height: 0; border-radius: 50%; }
.cal-day:hover:not(:disabled), .time-opt:hover:not(:disabled) { background: var(--art); }
.cal-day:active:not(:disabled), .time-opt:active:not(:disabled) { transform: scale(.94); }
.cal-day.today { box-shadow: inset 0 0 0 2px var(--accent); }
.cal-day.sel, .time-opt.sel { background: var(--accent); color: #fff; }
.cal-day:disabled, .time-opt:disabled { background: none; color: #CDB5BE; cursor: default; }
.cal-day:focus-visible, .time-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.times {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.field input[type="text"] {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 10px 12px;
  border: 2px solid var(--line);
  border-radius: 14px;
  background: #FFF9FA;
  color: var(--ink);
  font: 600 16px/1.2 "Nunito", system-ui, sans-serif; /* 16px — iOS не зумит */
  -webkit-appearance: none;
  appearance: none;
}
.field input:focus { outline: none; border-color: var(--accent); }
.field input[type="text"] { margin-top: 4px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-soft);
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.chip input:checked + span { background: var(--accent); border-color: var(--accent); color: #fff; }
.chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.form-error { min-height: 1em; font-size: 14px; font-weight: 600; color: var(--accent); }
.form-error:empty { display: none; }
.btn:disabled { opacity: .7; cursor: default; }

.content {
  padding: clamp(20px, 6vw, 30px) clamp(18px, 5.5vw, 28px) clamp(22px, 6vw, 28px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.final .content { padding-top: clamp(28px, 8vw, 40px); gap: 14px; }

/* ---------- Кнопки ---------- */
.buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
  width: 100%;
  margin-top: 12px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  min-width: 128px;
  padding: 0 26px;
  border-radius: 999px;
  font: 800 18px/1.15 "Nunito", system-ui, sans-serif;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  transition: transform .15s ease, background-color .2s ease;
}
.btn.yes {
  border: none;
  background: var(--accent);
  color: #fff;
  box-shadow: 0 8px 20px rgba(166, 30, 77, .3);
}
.btn.yes:hover { background: var(--accent-hover); }
.btn.yes:active { transform: scale(.97); }
.btn.no {
  border: 2px solid var(--line);
  background: #fff;
  color: var(--ink-soft);
  font-weight: 600;
}
.buttons .btn:not(.wide) {
  flex: 1 1 0;
  min-width: 0;
  max-width: 180px;
  padding: 0 10px;
  white-space: nowrap;
  font-size: clamp(16px, 4.6vw, 18px);
}
.btn.wide { width: 100%; }
.btn.tg { margin-top: 10px; padding: 12px 18px; font-size: 17px; text-align: center; }
.btn.tg svg {
  width: 20px; height: 20px; flex-shrink: 0;
  fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* «Нет» после первого побега живёт в body с position:fixed */
.btn.no.runaway {
  position: fixed;
  z-index: 50;
  margin: 0;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .12);
  transition: left .28s cubic-bezier(.2, .8, .3, 1), top .28s cubic-bezier(.2, .8, .3, 1), transform .2s ease;
}
.no-spot { visibility: hidden; pointer-events: none; }

.note { font-size: 14px; color: var(--muted); }

/* ---------- Конверт ---------- */
.stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: 100%;
}

.envelope {
  position: relative;
  /* ширина ограничена и шириной, и высотой экрана — конверт всегда влезает целиком */
  width: min(100%, 380px, calc((var(--vh) * 100 - 150px) * 0.577));
  min-width: 170px;
  aspect-ratio: 358 / 620;
  border-radius: 28px;
  background: var(--paper);
  box-shadow: var(--shadow);
  perspective: 1200px;
  flex-shrink: 0;
}

.env-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 28px;
}

.env-flap {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 50%;
  border-radius: 28px 28px 0 0;
  background: #EFE6DB;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top center;
  transition: transform .7s cubic-bezier(.5, 0, .3, 1) .15s, opacity .3s ease .6s;
}
.env-flap::after { /* кромка клапана */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 96%, rgba(0, 0, 0, .06));
}

.photos { position: absolute; inset: 0; }
.photo {
  position: absolute;
  background: #fff;
  padding: var(--pad) var(--pad) var(--padb);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .15);
  transform: rotate(var(--r));
  transition: transform .8s cubic-bezier(.3, 0, .2, 1) .2s, opacity .6s ease .35s;
}
.photo .pic {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  background: #E9D3DA;
}
.photo.tall .pic { aspect-ratio: 132 / 150; }
.photo .ph {
  display: flex;
  align-items: center;
  justify-content: center;
}
.photo .ph img { width: 55%; height: auto; opacity: .9; }

.seal {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 27%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: none;
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  background: radial-gradient(circle at 35% 30%, #D9637A, var(--seal) 60%, #9E2F45);
  box-shadow:
    inset 0 0 0 6px rgba(255, 255, 255, .16),
    inset 0 -6px 12px rgba(0, 0, 0, .2),
    0 10px 24px rgba(122, 21, 56, .35);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: sealPulse 2s ease-in-out infinite;
  z-index: 3;
}
.seal svg {
  width: 42%;
  fill: none;
  stroke: #FFE3EA;
  stroke-width: 1.8;
  stroke-linejoin: round;
}
@keyframes sealPulse {
  50% { transform: translate(-50%, -50%) scale(1.06); }
}

.env-caption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}
.env-title {
  font-family: "Caveat", cursive;
  font-weight: 700;
  font-size: clamp(30px, 8vw, 36px);
  line-height: 1;
}
.env-hint { font-size: 15px; color: var(--muted); }

/* Раскрытие */
.envelope.opening .seal {
  animation: sealBreak .5s ease forwards;
  pointer-events: none;
}
@keyframes sealBreak {
  30% { transform: translate(-50%, -50%) scale(1.18); }
  100% { transform: translate(-50%, -50%) scale(0) rotate(40deg); opacity: 0; }
}
.envelope.opening .env-flap { transform: rotateX(180deg); opacity: 0; }
.envelope.opening .photo {
  transform: translate(var(--fx), var(--fy)) rotate(calc(var(--r) * 4)) scale(.8);
  opacity: 0;
}
#screen-envelope.leaving .stack {
  transition: transform .5s ease .55s, opacity .5s ease .55s;
  transform: translateY(30px) scale(.92);
  opacity: 0;
}

/* ---------- Сердечки ---------- */
.hearts {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.heart {
  position: absolute;
  bottom: -40px;
  color: #E0577A;
  line-height: 1;
  animation: float linear forwards;
}
.heart.emoji {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}
@keyframes float {
  from { transform: translateY(0) rotate(0); opacity: .75; }
  to { transform: translateY(calc(var(--vh) * -115)) rotate(25deg); opacity: 0; }
}

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