:root {
  --night: #1d0f18;
  --plum: #2e1526;
  --rose: #e0587a;
  --deep-rose: #b83858;
  --blush: #f7c6d0;
  --text: #f6e9ee;
  --pad: clamp(16px, 4vw, 40px);
  --gap: clamp(24px, 6vh, 56px);
  --fs-medium: 1.6rem;   /* one medium size for all text */
  --fs-button: 1.1rem;   /* one size for all buttons */
  --fs-large: 2.4rem;    /* falling hearts (desktop default) */
  --btn-w: 10em;         /* one size for all buttons */
  --btn-h: 3.2em;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  caret-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

html {
  height: 100%;
  overflow: hidden;                    /* no page scrolling */
  overscroll-behavior: none;           /* no rubber-band bounce */
  scrollbar-width: none;               /* hide scrollbar (Firefox) */
  -ms-overflow-style: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  cursor: default;
  background:
    radial-gradient(ellipse at 50% 110%, rgba(224, 88, 122, 0.35), transparent 60%),
    radial-gradient(ellipse at 20% 0%, rgba(184, 56, 88, 0.25), transparent 55%),
    linear-gradient(180deg, var(--night) 0%, var(--plum) 55%, #3d1a2e 100%);
  background-attachment: fixed;
}

body {
  position: fixed;                     /* pinned: no scroll, no bounce, no address-bar jump */
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--text);
  font-family: "Outfit", sans-serif;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  cursor: default;
  /* Safe areas on all four sides (notches, rounded corners, landscape) */
  padding:
    calc(var(--pad) + env(safe-area-inset-top, 0px))
    calc(var(--pad) + env(safe-area-inset-right, 0px))
    calc(var(--pad) + env(safe-area-inset-bottom, 0px))
    calc(var(--pad) + env(safe-area-inset-left, 0px));
}

.hidden { display: none !important; }
::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* ---------- Panels ---------- */
.panel {
  width: 100%;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap);
}
.panel:not(.hidden) { animation: panelIn 0.5s ease both; }
@keyframes panelIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---------- Catch field ---------- */
#field { position: fixed; inset: 0; overflow: hidden; touch-action: manipulation; }
#field.off { display: none; }

.falling {
  position: absolute;
  top: -80px;
  padding: 10px;                       /* bigger touch target for fingers */
  font-size: var(--fs-large);
  line-height: 1;
  cursor: pointer;
  will-change: transform;
}
.falling svg, .burst svg { display: block; width: 1em; height: 1em; }
.falling.caught {
  opacity: 0;
  transform: scale(1.6) !important;
  transition: transform 0.25s, opacity 0.25s;
  pointer-events: none;
}

#hud {
  position: fixed;
  top: calc(16px + env(safe-area-inset-top, 0px));
  left: env(safe-area-inset-left, 0px);
  right: env(safe-area-inset-right, 0px);
  padding: 0 var(--pad);
  font-size: var(--fs-medium);
  font-style: italic;
  color: var(--blush);
  text-align: center;
  z-index: 2;
  pointer-events: none;
}
#hud.off { display: none; }

/* ---------- Text (all medium) ---------- */
.title {
  font-size: var(--fs-medium);
  font-style: italic;
  font-weight: 700;
  line-height: 1.2;
  color: var(--blush);
  max-width: 18ch;
  padding: 0 0.1em;
}
.note {
  font-size: var(--fs-medium);
  font-style: italic;
  line-height: 1.45;
  max-width: min(100%, 26ch);
  min-height: 4.4em;                   /* room for 3 lines so buttons never jump */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.1em;
  transition: opacity 0.5s ease;
}
.note.fade { opacity: 0; }
.note i, .note svg { color: var(--rose); margin: 0 4px; }

/* ---------- Buttons (all the same size as Next) ---------- */
.row {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(14px, 3vw, 28px);
  align-items: center;
  justify-content: center;
  min-height: 56px;
  width: 100%;
}
button {
  font-family: inherit;
  font-weight: 700;
  font-size: var(--fs-button);
  color: var(--text);
  background: transparent;
  border: 1.5px solid var(--rose);
  border-radius: 999px;
  width: var(--btn-w);
  height: var(--btn-h);
  min-width: 0;
  min-height: 0;
  padding: 0.4em 0.8em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  line-height: 1;
  white-space: nowrap;
  transition: transform 0.25s ease, background 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
button, button * { cursor: pointer; }

/* Hover fill only on devices that truly hover, so taps don't leave buttons stuck filled */
@media (hover: hover) {
  button:hover { background: var(--rose); }
  #yes:hover   { background: var(--rose); border-color: var(--rose); }
}
button:focus-visible { background: var(--rose); outline: none; }

#yes { background: var(--deep-rose); border-color: var(--deep-rose); transform-origin: center; }

/* Hindi button: long messages wrap inside the same fixed box */
#no {
  white-space: normal;
  line-height: 1.15;
  text-align: center;
}

/* Invisible placeholder so layout holds still when No starts running */
.no-spacer { flex: none; visibility: hidden; pointer-events: none; }

#no.runaway {
  position: fixed;
  z-index: 5;
  transition: left 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              top 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              background 0.2s ease;
}

/* Bounce when the No button is tapped */
@keyframes noBounce {
  0%   { transform: scale(1); }
  25%  { transform: scale(0.82); }
  50%  { transform: scale(1.14); }
  72%  { transform: scale(0.96); }
  100% { transform: scale(1); }
}
#no.bounce { animation: noBounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }

/* ---------- Burst hearts ---------- */
.burst {
  position: fixed;
  pointer-events: none;
  font-size: clamp(1.3rem, 5vw, 2.4rem);
  line-height: 1;
  z-index: 10;
  will-change: transform, opacity;
  animation: floatUp 2.4s ease-out forwards;
}
@keyframes floatUp {
  0%   { transform: translateY(0) scale(0.6) rotate(0deg); opacity: 1; }
  100% { transform: translateY(-45vh) scale(1.2) rotate(var(--spin)); opacity: 0; }
}

/* ---------- Footer ---------- */
#footer {
  position: fixed;
  left: 50%;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  padding: 6px 16px;
  border: 1px solid rgba(247, 198, 208, 0.25);
  border-radius: 999px;
  background: rgba(46, 21, 38, 0.6);
  font-family: "Outfit", sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blush);
  white-space: nowrap;
  z-index: 2;
  pointer-events: none;
}

#footer span {
  opacity: 0.8;
}

/* =========================================================
   Responsive
   Text and buttons keep the medium sizes above on every screen.
   These rules only change layout and falling heart size.
   ========================================================= */

/* Phones (up to 599px): larger falling hearts */
@media (max-width: 599px) {
  :root { --fs-large: 3.6rem; }
}

/* Tablets (portrait and landscape, 600px to 1024px): roomier spacing and largest hearts */
@media (min-width: 600px) and (max-width: 1024px) {
  :root {
    --gap: clamp(36px, 7vh, 64px);
    --fs-large: 4.8rem;
  }
  .panel { max-width: 760px; }
  .title { max-width: 20ch; }
  .note  { max-width: min(100%, 28ch); }
}

/* Large tablets / desktop: wider layout */
@media (min-width: 1025px) {
  .panel { max-width: 840px; }
}

/* Phones in portrait: stack the buttons */
@media (max-width: 480px) {
  .row { flex-direction: column; }
}

/* Phones in landscape (short screens): buttons side by side */
@media (orientation: landscape) and (max-height: 520px) {
  :root {
    --pad: clamp(12px, 2.5vw, 28px);
    --gap: clamp(12px, 4vh, 24px);
  }
  .row { flex-direction: row; min-height: 48px; }
  .title { max-width: 30ch; line-height: 1.15; }
  .note  { min-height: 3.2em; max-width: min(100%, 40ch); }
}

@media (prefers-reduced-motion: reduce) {
  .burst { animation: none; opacity: 0; }
  .panel:not(.hidden) { animation: none; }
  #no.runaway { transition: none; }
  #no.bounce { animation: none; }
}