:root{
  --bg1:#2a0b1f;
  --bg2:#4a1030;
  --pink:#ff3f7b;
  --pink2:#ff7aa8;
  --cream:#fff3f8;
  --text: rgba(255,255,255,.94);
  --muted: rgba(255,255,255,.78);
  --shadow: 0 18px 50px rgba(0,0,0,.45);
  --radius: 22px;
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  color:var(--text);
  font: 16px/1.45 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background:
    radial-gradient(1000px 650px at 15% 15%, rgba(255,70,160,.38), transparent 58%),
    radial-gradient(900px 560px at 85% 30%, rgba(255,210,235,.28), transparent 62%),
    radial-gradient(700px 520px at 50% 85%, rgba(255,60,130,.18), transparent 60%),
    linear-gradient(155deg, var(--bg1), var(--bg2));
  overflow-x:hidden;
}

#cowCanvas{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  z-index:0;
}

/* lighter veil so the cows are visible, still keeps text readable */
.veil{
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(900px 600px at 50% 35%, rgba(255,80,170,.06), rgba(0,0,0,.42)),
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.26));
  backdrop-filter: blur(2px);
}

.wrap{
  position:relative;
  z-index:2;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding: clamp(18px, 3vw, 40px);
}

.top{ text-align:center; max-width: 820px; }
.title{
  margin:0 0 10px;
  font-size: clamp(30px, 5vw, 52px);
  letter-spacing: .2px;
  text-shadow: 0 10px 40px rgba(0,0,0,.5);
}
.hint{
  margin:0 0 22px;
  color: var(--muted);
  font-size: clamp(14px, 2.4vw, 18px);
}

.stage{
  width: min(920px, 92vw);
  min-height: min(540px, 72vh);
  border-radius: var(--radius);
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  box-shadow: var(--shadow);
  background:
    radial-gradient(900px 520px at 50% 0%, rgba(255,140,210,.10), transparent 60%),
    radial-gradient(900px 520px at 50% 100%, rgba(255,70,160,.08), transparent 65%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.12);
}

.corner-cow{
  position:absolute;
  top: 10px;
  right: 12px;
  z-index: 2;
  opacity: .85;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.25));
  pointer-events:none;
}
@media (max-width: 520px){
  .corner-cow{ transform: scale(.9); top: 8px; right: 8px; }
}

.balloon{
  appearance:none;
  border:0;
  background:transparent;
  cursor:pointer;
  position:absolute;
  left: 50%;
  top: 55%;
  bottom: auto;
  width: clamp(170px, 26vw, 270px);
  aspect-ratio: 1 / 1.2;
  display:grid;
  place-items:center;
  transform: translate(-50%, -50%) rotate(-6deg);
  filter:
    drop-shadow(0 18px 34px rgba(0,0,0,.38))
    drop-shadow(0 0 28px rgba(255,80,160,.26));
  will-change: transform, opacity;
  outline: none;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
}

/* removed the extra sheen layer behind the heart (kept SVG shine instead) */

.balloon:focus-visible{
  outline: 3px solid rgba(255,255,255,.35);
  outline-offset: 6px;
  border-radius: 18px;
}

#heart-container svg{ width:100%; height:auto; display:block; }

.tapRing{
  position:absolute;
  inset: -10px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.20);
  opacity:0;
  transform: scale(.9);
}

.balloon.is-arriving{ animation: flyIn 2.4s cubic-bezier(.2,.8,.2,1) forwards; }
.balloon.is-floating{ animation: floaty 2.6s ease-in-out infinite; }

/* From off-screen bottom-left into the center */
@keyframes flyIn{
  0%{
    transform: translate(-50%, -50%) translate(-42vw, 42vh) rotate(-14deg) scale(.98);
    opacity:0;
  }
  60%{ opacity:1; }
  100%{
    transform: translate(-50%, -50%) translate(0, 0) rotate(-6deg) scale(1);
    opacity:1;
  }
}
@keyframes floaty{
  0%{ transform: translate(-50%, -50%) translate(0,0) rotate(-6deg); }
  50%{ transform: translate(-50%, -50%) translate(0,-10px) rotate(-3deg); }
  100%{ transform: translate(-50%, -50%) translate(0,0) rotate(-6deg); }
}

.balloon.is-hinting .tapRing{
  animation: ping 1.35s ease-out infinite;
}
@keyframes ping{
  0%{ opacity:0; transform: scale(.92); }
  35%{ opacity:.60; }
  100%{ opacity:0; transform: scale(1.08); }
}

.balloon.is-popping{ animation: pop 420ms ease-out forwards; }
@keyframes pop{
  0%{ transform: translate(-50%, -50%) translate(0,0) rotate(-6deg) scale(1); opacity:1; }
  55%{ transform: translate(-50%, -50%) translate(0,-8px) rotate(2deg) scale(1.22); opacity:1; }
  100%{ transform: translate(-50%, -50%) translate(0,-18px) rotate(4deg) scale(1.40); opacity:0; }
}

.confetti{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:3;
  pointer-events:none;
}

.card{
  position:relative;
  z-index:4;
  width: min(760px, 90%);
  padding: clamp(18px, 4vw, 30px);
  border-radius: calc(var(--radius) - 4px);
  background: linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.15);
  box-shadow: 0 20px 70px rgba(0,0,0,.45);
  text-align:center;
  opacity:0;
  transform: translateY(14px) scale(.985);
  pointer-events:none;
}

.card.is-visible{
  animation: cardIn 520ms cubic-bezier(.2,.9,.2,1) forwards;
  pointer-events:auto;
}
@keyframes cardIn{
  to{ opacity:1; transform: translateY(0) scale(1); }
}

.msg{
  margin:0;
  color: var(--cream);
  font-size: clamp(22px, 3.8vw, 38px);
  line-height: 1.2;
  letter-spacing: .2px;
  font-weight: 650;
  text-shadow: 0 12px 42px rgba(0,0,0,.35);
}

.sig{
  margin: 12px 0 0;
  color: rgba(255,255,255,.82);
  font-size: 16px;
  letter-spacing: .5px;
}

.actions{
  margin-top: 18px;
  display:flex;
  gap: 10px;
  justify-content:center;
  flex-wrap:wrap;
}

.again{
  appearance:none;
  border:1px solid rgba(255,255,255,.20);
  background: rgba(255,60,140,.08);
  color: rgba(255,255,255,.94);
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 650;
  letter-spacing: .2px;
  cursor:pointer;
  transition: transform .12s ease, background .2s ease, border-color .2s ease;
}
.again:hover{ background: rgba(255,60,140,.14); }
.again:active{ transform: translateY(1px); }

/* footer removed */

/* Mobile tuning */
@media (max-width: 520px){
  .stage{ min-height: 68vh; }
  .balloon{ top: 56%; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .balloon.is-arriving, .balloon.is-floating, .balloon.is-popping,
  .card.is-visible{ animation: none !important; }
  /* (no balloon pseudo-element) */
  .card{ opacity:1; transform:none; }
}