* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    background: #fce4ec;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: 'Trebuchet MS', 'Arial Rounded MT Bold', Arial, sans-serif;
    overflow: hidden;
    position: relative;
}

/* ── Floating hearts ── */
.hearts-container {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.floating-heart {
    position: absolute;
    bottom: -60px;
    user-select: none;
    animation: floatUp linear forwards;
}

@keyframes floatUp {
    0%   { transform: translateY(0)      rotate(0deg)   scale(1);    opacity: 0.85; }
    50%  { transform: translateY(-50vh)  rotate(180deg) scale(1.1);  opacity: 0.7;  }
    100% { transform: translateY(-115vh) rotate(360deg) scale(0.8);  opacity: 0;    }
}

/* ── Card ── */
.card {
    background: #fff;
    border-radius: 30px;
    padding: 50px 60px 45px;
    text-align: center;
    width: auto;
    box-shadow: 0 12px 45px rgba(233, 80, 100, 0.12);
    position: relative;
    z-index: 10;
}

.hidden { display: none !important; }

/* ── Bear area ── */
.bear-wrapper {
    position: relative;
    display: inline-block;
    margin-bottom: 28px;
}

.bear-img {
    width: 180px;
    height: 180px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
    transition: all 0.4s ease;
}

/* Floating hearts ring around the initial bear */
.bear-hearts-ring {
    position: absolute;
    inset: -30px;
    pointer-events: none;
}

.ring-heart {
    position: absolute;
    font-size: 22px;
    animation: ringFloat 2.4s ease-in-out infinite;
}

.rh1 { top: 5%;  left: 5%;  animation-delay: 0s; }
.rh2 { top: 0%;  left: 55%; animation-delay: 0.4s; }
.rh3 { top: 35%; left: -5%; animation-delay: 0.8s; }
.rh4 { top: 60%; left: 85%; animation-delay: 1.2s; }
.rh5 { bottom: 0%; left: 15%; animation-delay: 1.6s; }
.rh6 { bottom: 5%; left: 65%; animation-delay: 2.0s; }

@keyframes ringFloat {
    0%, 100% { transform: translateY(0)   scale(1);   opacity: 0.9; }
    50%       { transform: translateY(-8px) scale(1.15); opacity: 1;   }
}

.no-ring .bear-hearts-ring { display: none; }

/* ── Question text ── */
.question {
    color: #e8453c;
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 32px;
    line-height: 1.3;
}

.yay-text { font-size: 2.2rem; margin-bottom: 10px; }

.subtitle {
    color: #aaa;
    font-size: 1.05rem;
    margin-top: 6px;
}

/* ── Buttons ── */
.buttons {
    display: flex;
    gap: 24px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    min-height: 80px;
}

.btn-yes {
    background: #2db55d;
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 16px 44px;
    font-size: 1.25rem;
    font-weight: 800;
    cursor: pointer;
    transition: padding  0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                font-size 0.35s ease,
                box-shadow 0.2s ease;
    box-shadow: 0 5px 18px rgba(45, 181, 93, 0.45);
    transform-origin: center;
}

.btn-yes:hover {
    background: #25a052;
    box-shadow: 0 8px 24px rgba(45, 181, 93, 0.55);
}

.btn-no {
    background: #d44233;
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 14px 30px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
    box-shadow: 0 5px 16px rgba(212, 66, 51, 0.4);
    white-space: nowrap;
}

.btn-no:hover {
    background: #c03a2b;
    transform: scale(1.04);
}

/* ── Footer ── */
.footer {
    position: fixed;
    bottom: 22px;
    color: #e8453c;
    font-weight: 700;
    font-size: 0.9rem;
    z-index: 10;
    cursor: pointer;
    letter-spacing: 0.02em;
}