:root{
  /* background */
  --bg1:#ffd7e6;
  --bg2:#ff9bb8;
  --bg3:#b9b7ff;

  /* card */
  --card: rgba(255,255,255,.72);
  --stroke: rgba(255,255,255,.75);
  --text:#1b1b25;

  /* buttons */
  --yes1:#ff2f73;
  --yes2:#ff8ab3;
  --yesGlow: rgba(255, 47, 115, .35);

  --noBg: rgba(240,240,244,.92);
  --noText: rgba(35,35,45,.70);

  --shadow: 0 26px 70px rgba(18, 10, 40, .18);
  --radius: 26px;
}

*{ box-sizing:border-box; }
html, body { height: 100%; }

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  overflow:hidden;

  /* ✅ Цветен фон */
  background:
    radial-gradient(900px 600px at 15% 15%, rgba(255,255,255,.86) 0%, rgba(255,255,255,0) 58%),
    radial-gradient(850px 520px at 85% 22%, rgba(255,255,255,.56) 0%, rgba(255,255,255,0) 60%),
    radial-gradient(900px 700px at 50% 110%, rgba(255,255,255,.46) 0%, rgba(255,255,255,0) 62%),
    linear-gradient(135deg, var(--bg1) 0%, var(--bg2) 45%, var(--bg3) 120%);
}

/* ✅ Центриране на съдържанието */
.wrap{
  min-height: 100vh;
  display:grid;
  place-items:center;
  padding: 24px;
}

.card{
  width: min(820px, 92vw);
  padding: clamp(18px, 4vw, 42px);
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid var(--stroke);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px);
  text-align:center;
  position: relative;
}

.chip{
  width: 58px;
  height: 58px;
  margin: 0 auto 14px;
  border-radius: 18px;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 16px 30px rgba(0,0,0,.10);
  font-size: 26px;
}

.question{
  margin: 0 0 22px;
  font-size: clamp(28px, 4.4vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* редът с бутоните */
.buttons{
  display:flex;
  justify-content:center;
  align-items:center;
  gap: 14px;
  min-height: 92px;
}

/* ✅ Бутони: видима стилизация */
.btn{
  border: 0;
  padding: 14px 28px;
  font-size: 18px;
  border-radius: 999px;             /* ✅ закръглени ръбове */
  cursor: pointer;
  user-select:none;

  box-shadow: 0 14px 28px rgba(0,0,0,.12);
  transform: translateY(0);
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease, background .15s ease;
}

.btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 34px rgba(0,0,0,.16);
}

.btn:active{
  transform: translateY(1px) scale(.98);
  box-shadow: 0 12px 22px rgba(0,0,0,.12);
}

/* ✅ “Да” е цветен */
.btn-yes{
  color: #fff;
  background: linear-gradient(135deg, var(--yes1), var(--yes2));
  box-shadow: 0 18px 40px var(--yesGlow);
}

.btn-yes:hover{ filter: brightness(1.06) saturate(1.06); }

/* ✅ “Не” е сив/невзрачен */
.btn-no{
  color: var(--noText);
  background: var(--noBg);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 14px 28px rgba(0,0,0,.10);
  filter: saturate(.85);
}

.btn-no:hover{
  filter: saturate(.75);
}

/* резултат при “Да” */
.result{
  margin-top: 6px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 14px;
}

.yay{
  font-size: 22px;
  font-weight: 700;
}

.gif{
  width: min(460px, 92%);
  border-radius: 18px;
  box-shadow: 0 18px 44px rgba(0,0,0,.20);
  border: 1px solid rgba(255,255,255,.7);
}

.small{
  opacity: .9;
  font-size: 14px;
}

.hint{
  margin: 18px 0 0;
  font-size: 14px;
  opacity: .78;
}

.hidden{ display:none !important; }

/* леки сърчица отзад */
.hearts{
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .22;
}

.hearts span{
  position: absolute;
  font-size: clamp(14px, 2.2vw, 28px);
  transform: translateY(110vh);
  animation: floatUp linear infinite;
  user-select:none;
  filter: blur(.15px);
}

@keyframes floatUp{
  from { transform: translateY(110vh) translateX(0) rotate(0deg); }
  to   { transform: translateY(-20vh) translateX(42px) rotate(20deg); }
}

/* разпределение / скорости */
.hearts span:nth-child(1){ left: 6%;  animation-duration: 12s; animation-delay: 0s; }
.hearts span:nth-child(2){ left: 14%; animation-duration: 16s; animation-delay: -7s; }
.hearts span:nth-child(3){ left: 22%; animation-duration: 14s; animation-delay: -10s; }
.hearts span:nth-child(4){ left: 30%; animation-duration: 18s; animation-delay: -4s; }
.hearts span:nth-child(5){ left: 38%; animation-duration: 13s; animation-delay: -9s; }
.hearts span:nth-child(6){ left: 46%; animation-duration: 17s; animation-delay: -12s; }
.hearts span:nth-child(7){ left: 54%; animation-duration: 15s; animation-delay: -6s; }
.hearts span:nth-child(8){ left: 62%; animation-duration: 19s; animation-delay: -14s; }
.hearts span:nth-child(9){ left: 70%; animation-duration: 14s; animation-delay: -8s; }
.hearts span:nth-child(10){ left: 78%; animation-duration: 18s; animation-delay: -11s; }
.hearts span:nth-child(11){ left: 86%; animation-duration: 20s; animation-delay: -16s; }
.hearts span:nth-child(12){ left: 92%; animation-duration: 21s; animation-delay: -18s; }
.hearts span:nth-child(13){ left: 26%; animation-duration: 22s; animation-delay: -15s; }
.hearts span:nth-child(14){ left: 58%; animation-duration: 23s; animation-delay: -19s; }
.hearts span:nth-child(15){ left: 40%; animation-duration: 24s; animation-delay: -20s; }