:root {
  --blue: #4fc3f7;
  --blue-deep: #1e8fd4;
  --yellow: #ffd93d;
  --pink: #ff7eb3;
  --ink: #1d3557;
  --card: #ffffff;
}

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

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  padding: 2rem 1rem;
  overflow-x: hidden;
  position: relative;
  color: var(--ink);
  font-family: "Comic Sans MS", "Chalkboard SE", "Baloo 2", ui-rounded,
               "Trebuchet MS", Verdana, system-ui, sans-serif;
  background:
    radial-gradient(70% 55% at 50% 108%, #b8ecff 0%, rgba(184,236,255,0) 60%),
    linear-gradient(180deg, #7fd8ff 0%, #4fc3f7 55%, #38b0ec 100%);
}

/* ---------- floating suds ---------- */
.sky { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.suds {
  position: absolute;
  bottom: -18vh;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 26%,
              rgba(255,255,255,.95), rgba(255,255,255,.35) 45%, rgba(255,255,255,.08) 72%);
  border: 2px solid rgba(255,255,255,.65);
  animation: float linear infinite;
}
@keyframes float {
  0%   { transform: translate3d(0,0,0) scale(.7) rotate(0deg); opacity: 0; }
  12%  { opacity: 1; }
  50%  { transform: translate3d(4vw,-60vh,0) scale(1.05) rotate(12deg); }
  85%  { opacity: .85; }
  100% { transform: translate3d(-3vw,-125vh,0) scale(1.2) rotate(-10deg); opacity: 0; }
}
.s1  { left:  3%; width: 44px; height: 44px; animation-duration: 16s; animation-delay: 0s; }
.s2  { left: 12%; width: 20px; height: 20px; animation-duration: 11s; animation-delay: 2.5s; }
.s3  { left: 21%; width: 62px; height: 62px; animation-duration: 21s; animation-delay: 5s; }
.s4  { left: 30%; width: 26px; height: 26px; animation-duration: 13s; animation-delay: 1s; }
.s5  { left: 39%; width: 38px; height: 38px; animation-duration: 18s; animation-delay: 7s; }
.s6  { left: 48%; width: 16px; height: 16px; animation-duration: 10s; animation-delay: 3.5s; }
.s7  { left: 57%; width: 54px; height: 54px; animation-duration: 20s; animation-delay: 1.8s; }
.s8  { left: 66%; width: 24px; height: 24px; animation-duration: 12s; animation-delay: 8s; }
.s9  { left: 75%; width: 36px; height: 36px; animation-duration: 17s; animation-delay: 4.2s; }
.s10 { left: 84%; width: 18px; height: 18px; animation-duration: 12.5s; animation-delay: 6s; }
.s11 { left: 92%; width: 58px; height: 58px; animation-duration: 23s; animation-delay: 9.5s; }
.s12 { left: 45%; width: 70px; height: 70px; animation-duration: 26s; animation-delay: 12s; }

/* ---------- card ---------- */
main { position: relative; z-index: 2; width: 100%; display: flex; justify-content: center; }

.sticker {
  text-align: center;
  width: min(30rem, 100%);
  padding: 1.5rem 1.6rem 2rem;
  background: var(--card);
  border: 5px solid var(--ink);
  border-radius: 2.2rem;
  box-shadow: 0 12px 0 rgba(29,53,87,.28), 0 26px 40px rgba(15,60,95,.35);
  transform: rotate(-1.2deg);
}

.duck { margin: -4.6rem auto .2rem; width: 210px; }
.duck svg {
  width: 100%; height: auto; display: block;
  filter: drop-shadow(0 6px 0 rgba(29,53,87,.18));
  animation: bob 3s ease-in-out infinite;
  transform-origin: 50% 80%;
}
@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-10px) rotate(3deg); }
}
.duck:hover svg  { animation-duration: 1.1s; }
.duck:active svg { transform: scale(.92) rotate(-4deg); animation: none; }

h1 {
  margin: .2rem 0 .5rem;
  font-size: clamp(2.7rem, 13vw, 4.2rem);
  line-height: .95;
  letter-spacing: .01em;
  text-transform: uppercase;
}
h1 span {
  display: inline-block;
  color: var(--yellow);
  text-shadow:
    -3px -3px 0 var(--ink),  0 -3px 0 var(--ink),  3px -3px 0 var(--ink),
    -3px  0    0 var(--ink),                       3px  0    0 var(--ink),
    -3px  3px 0 var(--ink),  0  3px 0 var(--ink),  3px  3px 0 var(--ink),
     0 8px 0 var(--blue-deep), 0 11px 0 var(--ink);
}
h1 span:first-child { transform: rotate(-3deg); }
h1 span:last-child  { transform: rotate(2deg); color: #ffffff; }

.tagline {
  margin: 0 0 1.1rem;
  font-size: clamp(1.05rem, 4.6vw, 1.35rem);
  color: #2d6a9f;
  font-weight: 700;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem 1.3rem;
  border-radius: 999px;
  font-size: clamp(.95rem, 3.8vw, 1.15rem);
  font-weight: 800;
  color: #fff;
  background: linear-gradient(180deg, var(--pink), #f2569a);
  border: 4px solid var(--ink);
  box-shadow: 0 6px 0 rgba(29,53,87,.35);
  transform: rotate(-2deg);
  animation: wiggle 2.6s ease-in-out infinite;
}
@keyframes wiggle {
  0%, 100% { transform: rotate(-2deg) scale(1); }
  45%      { transform: rotate(2.5deg) scale(1.05); }
}
.spark { animation: twinkle 1.6s ease-in-out infinite; }
.badge .spark:last-child { animation-delay: .8s; }
@keyframes twinkle {
  0%, 100% { opacity: .45; transform: scale(.85); }
  50%      { opacity: 1; transform: scale(1.2); }
}

.note {
  margin: 1.2rem 0 0;
  font-size: 1rem;
  line-height: 1.55;
  color: #4a6b88;
}

footer {
  position: relative;
  z-index: 2;
  color: #ffffff;
  font-size: .85rem;
  font-weight: 700;
  text-shadow: 0 2px 0 rgba(29,53,87,.35);
}
footer p { margin: 0; }

@media (max-width: 420px) {
  .duck { width: 170px; margin-top: -3.6rem; }
  .sticker { padding: 1.2rem 1.1rem 1.6rem; border-radius: 1.8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .suds, .duck svg, .badge, .spark { animation: none; }
  .suds { bottom: auto; top: 25%; opacity: .5; }
}