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

body {
    height: 100dvh;
    background: linear-gradient(135deg, #ffe6f0 0%, #f0faff 50%, #e0f7ff 100%);
    font-family: 'Comic Neue', 'M PLUS Rounded 1c', cursive, sans-serif;
    overflow: hidden;
    position: relative;
    color: #ff6699;
    cursor: default;
}

.floating-shapes {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.shape {
    position: absolute;
    opacity: 0.18;
    animation: drift 18s infinite linear;
}

.shape.heart   { width: 90px; height: 80px; background: #ff99aa; clip-path: polygon(50% 0%, 100% 25%, 75% 100%, 50% 75%, 25% 100%, 0% 25%); }
.shape.star    { width: 70px; height: 70px; background: #ffdd77; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.shape.cloud   { width: 130px; height: 70px; background: #e6f7ff; border-radius: 100px; }
.shape.bubble  { width: 60px; height: 60px; background: rgba(173, 216, 230, 0.6); border-radius: 50%; box-shadow: inset 0 0 15px white; }
.shape.bow     { width: 100px; height: 55px; background: #ff6699; clip-path: polygon(0 50%, 30% 0, 30% 35%, 70% 35%, 70% 0, 100% 50%, 70% 100%, 70% 65%, 30% 65%, 30% 100%); }
.shape.flower  { width: 80px; height: 80px; background: #ffb3cc; border-radius: 50%; box-shadow: 0 0 0 12px rgba(255,255,255,0.4); }

.shape:nth-child(1) { top: 8%;  left: 6%;  animation-duration: 22s; }
.shape:nth-child(2) { top: 22%; right: 9%; animation-duration: 26s; animation-delay: -4s; }
.shape:nth-child(3) { bottom:12%; left: 14%; animation-duration: 19s; animation-delay: -9s; }
.shape:nth-child(4) { bottom:28%; right: 7%; animation-duration: 24s; animation-delay: -13s; }
.shape:nth-child(5) { top: 45%; left: 20%; animation-duration: 28s; animation-delay: -17s; }
.shape:nth-child(6) { bottom:38%; right: 18%; animation-duration: 21s; animation-delay: -20s; }

.container {
    position: relative;
    z-index: 10;
    text-align: center;
    width: min(90vw, 480px);
    margin: auto;
    padding: 2.5rem 1.8rem;
    background: rgba(255, 250, 252, 0.82);
    border-radius: 36px;
    border: 4px solid #ffb3cc;
    box-shadow: 0 14px 48px rgba(255, 182, 193, 0.42),
                inset 0 0 24px rgba(255,255,255,0.75);
    backdrop-filter: blur(10px);
    animation: float-container 6s infinite ease-in-out;
}

.bunny {
    width: 170px;
    height: 170px;
    margin: 0 auto 1.8rem;
    position: relative;
    animation: bunny-bob 3.2s infinite ease-in-out;
}

.ear {
    position: absolute;
    width: 64px;
    height: 108px;
    background: #ff99aa;
    border-radius: 32px 32px 0 0;
    top: -48px;
    animation: ear-flap 2.4s infinite alternate ease-in-out;
}

.ear.left  { left: 32px; transform: rotate(-18deg); }
.ear.right { right: 32px; transform: rotate(18deg); animation-delay: 0.4s; }

.face {
    width: 148px;
    height: 148px;
    background: white;
    border-radius: 50%;
    position: absolute;
    top: 24px;
    left: 11px;
    border: 5px solid #ff6699;
    box-shadow: inset 0 10px 24px rgba(0,0,0,0.06);
}

.eye {
    width: 32px;
    height: 42px;
    background: #2d2d2d;
    border-radius: 50%;
    position: absolute;
    top: 42px;
    overflow: hidden;
}

.eye.left  { left: 28px; }
.eye.right { right: 28px; }

.shine {
    width: 14px;
    height: 18px;
    background: white;
    border-radius: 50%;
    position: absolute;
    top: 8px;
    left: 10px;
    animation: sparkle 4s infinite;
}

.blush {
    width: 44px;
    height: 28px;
    background: #ffb3cc;
    border-radius: 50%;
    opacity: 0.75;
    position: absolute;
    top: 68px;
    animation: blush-pulse 3s infinite alternate;
}

.blush.left  { left: 8px;  transform: rotate(-20deg); }
.blush.right { right: 8px; transform: rotate(20deg); }

.mouth.smile {
    width: 40px;
    height: 24px;
    border-bottom: 6px solid #ff6699;
    border-radius: 0 0 60% 60%;
    position: absolute;
    bottom: 36px;
    left: 54px;
    animation: happy-mouth 3.5s infinite ease-in-out;
}

.sparkles {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.6rem;
    color: #ffe066;
    pointer-events: none;
}

.sparkles span {
    position: absolute;
    animation: twinkle 2.8s infinite;
}

.sparkles span:nth-child(1) { left: -40px; animation-delay: 0s; }
.sparkles span:nth-child(2) { left: 0;    animation-delay: 0.7s; }
.sparkles span:nth-child(3) { left: 40px; animation-delay: 1.4s; }

.title {
    font-size: 3.4rem;
    color: #ff6699;
    text-shadow: 4px 4px 0 #ffe066,
                -3px -3px 0 #a3e4ff;
    margin: 0.4rem 0 0.8rem;
    line-height: 1;
    animation: title-rainbow 6s infinite;
}

.subtitle {
    font-size: 1.45rem;
    color: #ff88aa;
    margin-bottom: 2rem;
    opacity: 0.9;
}

.time-box {
    font-family: 'Courier New', monospace;
    font-size: 3.8rem;
    font-weight: bold;
    color: #ff99aa;
    background: rgba(255,255,255,0.7);
    padding: 0.9rem 2rem;
    border-radius: 28px;
    border: 4px dashed #ffb3cc;
    margin: 1.4rem auto;
    display: inline-block;
    box-shadow: 0 10px 24px rgba(255,182,193,0.35);
    animation: time-glow 2.5s infinite alternate;
}

.message {
    font-size: 1.7rem;
    color: #ff6699;
    margin: 1.6rem 0 2.2rem;
    animation: message-bounce 2s infinite;
}

.little-hearts span {
    font-size: 2.4rem;
    color: #ff4757;
    margin: 0 0.5rem;
    animation: heart-pop 1.8s infinite;
}

.little-hearts span:nth-child(2) { animation-delay: 0.3s; }
.little-hearts span:nth-child(3) { animation-delay: 0.6s; }
.little-hearts span:nth-child(4) { animation-delay: 0.9s; }

.heart-trail {
    position: absolute;
    pointer-events: none;
    font-size: 1.8rem;
    color: #ff6699;
    z-index: 20;
    animation: float-away 1.4s forwards;
    text-shadow: 0 0 8px rgba(255,102,153,0.7);
}

/* ──────────────────────────────────────────────── */

@keyframes drift {
    0%   { transform: translate(0, 0) rotate(0deg); }
    100% { transform: translate(60px, -80px) rotate(25deg); }
}

@keyframes float-container {
    0%,100% { transform: translateY(0); }
    50%     { transform: translateY(-12px); }
}

@keyframes bunny-bob {
    0%,100% { transform: translateY(0) rotate(0deg); }
    50%     { transform: translateY(-10px) rotate(2deg); }
}

@keyframes ear-flap {
    0%   { transform: rotate(-18deg); }
    100% { transform: rotate(-30deg); }
}

@keyframes sparkle {
    0%,100% { opacity: 0.3; transform: scale(0.8); }
    50%     { opacity: 1;   transform: scale(1.3); }
}

@keyframes blush-pulse {
    0%   { opacity: 0.65; transform: scale(0.95); }
    100% { opacity: 1;    transform: scale(1.1); }
}

@keyframes happy-mouth {
    0%,100% { transform: scaleY(1); }
    50%     { transform: scaleY(1.15); }
}

@keyframes twinkle {
    0%,100% { opacity: 0; transform: scale(0.5) rotate(0deg); }
    50%     { opacity: 1; transform: scale(1.4) rotate(180deg); }
}

@keyframes title-rainbow {
    0%    { color: #ff6699; }
    25%   { color: #ffdd77; }
    50%   { color: #77ddff; }
    75%   { color: #aaffaa; }
    100%  { color: #ff6699; }
}

@keyframes time-glow {
    0%   { box-shadow: 0 10px 24px rgba(255,182,193,0.35); transform: scale(1); }
    100% { box-shadow: 0 16px 36px rgba(255,105,180,0.55); transform: scale(1.03); }
}

@keyframes message-bounce {
    0%,100% { transform: translateY(0); }
    50%     { transform: translateY(-6px); }
}

@keyframes heart-pop {
    0%,100% { transform: scale(1); }
    50%     { transform: scale(1.35); }
}

@keyframes float-away {
    0%   { opacity: 1; transform: translate(0,0) scale(1); }
    100% { opacity: 0; transform: translate(0,-60px) scale(0.4); }
}

@media (max-width: 520px) {
    .title     { font-size: 2.6rem; }
    .time-box  { font-size: 2.8rem; padding: 0.7rem 1.4rem; }
    .bunny     { width: 140px; height: 140px; }
    .face      { width: 120px; height: 120px; top: 20px; left: 10px; }
    .ear       { width: 52px; height: 88px; top: -40px; }
}