/* ==========================================================================
   Один маленький вопрос… — стили
   Тёплый розово-закатный романтический стиль (одна визуальная тема).
   ========================================================================== */
:root{
  --ink:#3a2230;          /* глубокий сливово-коричневый текст */
  --ink-soft:#6b4a5c;
  --card:#fff6f2;         /* тёплый почти-белый с розовым оттенком */
  --card-edge:#f3d9d0;
  --yes:#e63f6d;          /* уверенный вишнёво-розовый */
  --yes-deep:#c62a58;
  --no:#c9a9b3;           /* приглушённый, «отступающий» */
  --gold:#f7b267;
  --shadow:rgba(120,30,60,.28);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 800px at 15% -10%, #ffd3c2 0%, transparent 55%),
    radial-gradient(1000px 700px at 110% 20%, #f7c6e0 0%, transparent 50%),
    linear-gradient(160deg,#ffb3a7 0%, #f38bb0 42%, #b47bd6 100%);
  min-height:100%;
  display:flex;align-items:center;justify-content:center;
  padding:24px;overflow:hidden;position:relative;
  -webkit-tap-highlight-color:transparent;
}

/* мягкие плавающие сердечки на фоне */
.bg{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.bg span{position:absolute;bottom:-40px;font-size:20px;opacity:.35;
  animation:rise linear infinite}
@keyframes rise{to{transform:translateY(-115vh) rotate(40deg);opacity:0}}

/* кнопка звука */
.sound{
  position:fixed;top:14px;right:14px;z-index:30;
  width:44px;height:44px;border:none;border-radius:50%;
  background:rgba(255,255,255,.75);backdrop-filter:blur(6px);
  font-size:20px;cursor:pointer;box-shadow:0 6px 16px -6px var(--shadow);
  transition:transform .15s;
}
.sound:hover{transform:scale(1.08)}
.sound:active{transform:scale(.94)}

.card{
  position:relative;z-index:1;
  width:min(560px,100%);
  background:var(--card);
  border:1px solid var(--card-edge);
  border-radius:28px;
  padding:44px 34px 40px;
  box-shadow:0 30px 70px -20px var(--shadow), 0 2px 0 #fff inset;
  text-align:center;
  animation:pop .5s cubic-bezier(.2,.9,.3,1.3) both;
}
@keyframes pop{from{transform:scale(.9);opacity:0}}

.eyebrow{
  font-size:12px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--ink-soft);margin:0 0 14px;font-weight:600;
}
.step-dots{display:flex;gap:8px;justify-content:center;margin-bottom:26px}
.step-dots i{width:8px;height:8px;border-radius:50%;background:var(--card-edge);transition:.3s}
.step-dots i.on{background:var(--yes);transform:scale(1.25)}

h1{
  font-family:Georgia,"Times New Roman",serif;
  font-style:italic;font-weight:600;
  font-size:clamp(26px,6vw,38px);
  line-height:1.2;margin:0 0 10px;text-wrap:balance;
}
.emoji{font-size:clamp(44px,12vw,64px);line-height:1;margin-bottom:10px;display:block}
p.sub{margin:0 0 26px;color:var(--ink-soft);font-size:16px;line-height:1.5;text-wrap:balance}

/* область камеры / фото */
.media{margin:0 auto 24px;width:min(320px,80%)}
.media video,.media img{
  width:100%;aspect-ratio:3/4;object-fit:cover;
  border-radius:20px;border:3px solid #fff;
  box-shadow:0 16px 34px -14px var(--shadow);background:#f0d9d9;
}
.media video{transform:scaleX(-1)} /* зеркало, как в селфи-камере */

.answers{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;min-height:60px;align-items:center}
button.btn{
  font:inherit;font-weight:700;font-size:17px;
  border:none;cursor:pointer;border-radius:16px;
  padding:15px 30px;transition:transform .18s, box-shadow .18s, background .2s, opacity .3s;
  touch-action:manipulation;
}
.yes{
  background:linear-gradient(160deg,var(--yes),var(--yes-deep));
  color:#fff;box-shadow:0 12px 24px -8px var(--yes-deep);
}
.yes:hover{transform:translateY(-2px) scale(1.04)}
.yes:active{transform:scale(.97)}
.soft{background:#fff;color:var(--ink);box-shadow:0 8px 18px -10px var(--shadow)}
.soft:hover{transform:translateY(-2px) scale(1.04)}
.ghost{background:transparent;color:var(--ink-soft);box-shadow:none;font-weight:600;font-size:15px}
.ghost:hover{color:var(--ink);text-decoration:underline}

.no{background:var(--no);color:#fff}
.no.flee{position:fixed;z-index:5;
  transition:top .28s cubic-bezier(.3,1.4,.5,1),left .28s cubic-bezier(.3,1.4,.5,1),transform .28s}

.hint{margin-top:20px;font-size:13px;color:var(--ink-soft);min-height:18px}

/* полноэкранный холст для салюта/конфетти */
#fx{position:fixed;inset:0;z-index:20;pointer-events:none;display:none}

/* фокус для доступности */
button:focus-visible{outline:3px solid var(--yes);outline-offset:3px}

@media (max-width:480px){
  .card{padding:34px 20px 30px;border-radius:22px}
  button.btn{padding:16px 24px;font-size:16px}
  .answers{gap:12px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important}
  .no.flee{transition:none}
}