/* ============================================================
   moonfamily — balloon park homepage
   Fixed home layout + shared balloon theme foundation
   ============================================================ */

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

:root {
  --sky: #bdeeff;
  --sky-deep: #83dcff;
  --grass: #b8e86f;
  --grass-deep: #7bc34a;
  --cream: #fff9ed;
  --paper: #fffdf7;
  --pink: #ff91ca;
  --pink-deep: #ed5eaa;
  --pink-soft: #ffc8e2;
  --yellow: #ffd93f;
  --yellow-deep: #eba423;
  --orange: #ffa63b;
  --orange-deep: #db7b1f;
  --blue: #48c8f3;
  --blue-deep: #178fc8;
  --green: #99df69;
  --green-deep: #68ae42;
  --purple: #a98cec;
  --purple-deep: #7553bc;
  --text: #76516f;
  --text-soft: #aa7f9e;
  --line: #ff70c2;
  --shadow: rgba(196, 72, 150, .22);
}

html { scroll-behavior: smooth; }
body {
  min-height: 100vh;
  font-family: 'Pixelify Sans', 'Fredoka', system-ui, sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 14% 15%, rgba(255,255,255,.9) 0 5.5rem, transparent 5.7rem),
    radial-gradient(circle at 78% 19%, rgba(255,255,255,.8) 0 4.7rem, transparent 4.9rem),
    linear-gradient(180deg, var(--sky) 0 57%, #c9f285 57% 100%);
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed;
  inset: 56% 0 0;
  background:
    radial-gradient(circle at 9px 9px, rgba(255,255,255,.58) 0 2.5px, transparent 3px) 0 0 / 24px 24px,
    radial-gradient(ellipse at 24% 0%, #caef86 0 28%, transparent 28.5%),
    radial-gradient(ellipse at 72% 7%, #bee97a 0 34%, transparent 34.5%);
  z-index: -3;
  pointer-events: none;
}

body::after {
  content: '';
  position: fixed;
  left: 0;
  right: 0;
  top: 50%;
  height: 180px;
  background:
    radial-gradient(circle at 2rem 2.6rem, #fff 0 1.25rem, transparent 1.3rem),
    radial-gradient(circle at 4rem 2rem, #fff 0 1.8rem, transparent 1.85rem),
    radial-gradient(circle at 6.3rem 2.7rem, #fff 0 1.25rem, transparent 1.3rem);
  background-size: 9rem 5rem;
  opacity: .95;
  z-index: -2;
  pointer-events: none;
  transform: translateY(-54%);
}

img { max-width: 100%; display: block; }
a { color: inherit; }

.sky-park { position: fixed; inset: 0; pointer-events: none; z-index: -1; }
.cloud {
  position: absolute;
  width: 142px;
  height: 50px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 28px 22px, #fff 0 24px, transparent 25px),
    radial-gradient(circle at 70px 13px, #fff 0 34px, transparent 35px),
    radial-gradient(circle at 112px 27px, #fff 0 28px, transparent 29px),
    radial-gradient(circle at 8px 30px, rgba(72,200,243,.18) 0 2px, transparent 3px) 0 0 / 13px 13px;
  opacity: .92;
  animation: cloudFloat 9s ease-in-out infinite;
}
.cloud-a { left: 8%; top: 30%; }
.cloud-b { right: 8%; top: 27%; transform: scale(.8); animation-delay: -3s; }
.cloud-c { left: 49%; top: 47%; transform: scale(.72); animation-delay: -5s; }

.star {
  position: absolute;
  color: #fff;
  text-shadow: 0 2px 0 rgba(23,143,200,.25);
  font-size: 2rem;
  animation: twinkle 2.8s ease-in-out infinite;
}
.s1 { left: 6%; top: 12%; color: var(--yellow); }
.s2 { right: 10%; top: 42%; color: var(--pink-deep); animation-delay: -.8s; }
.s3 { left: 86%; top: 12%; color: #fff; animation-delay: -1.4s; }
.s4 { left: 28%; top: 33%; color: var(--purple); animation-delay: -2s; }

.balloon {
  position: absolute;
  border-radius: 50%;
  animation: balloonDrift 7.6s ease-in-out infinite;
  filter: drop-shadow(0 12px 0 rgba(255,255,255,.28));
}
.balloon::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -84px;
  width: 4px;
  height: 96px;
  border-radius: 99px;
  background: #1678b6;
  transform: translateX(-50%);
}
.balloon-heart {
  width: 300px; height: 300px; left: -122px; top: 28px;
  background:
    radial-gradient(circle at 22px 22px, rgba(255,255,255,.34) 0 8px, transparent 9px) 0 0 / 48px 48px,
    var(--pink);
}
.balloon-dot {
  width: 350px; height: 350px; left: calc(50% - 210px); top: -126px;
  background:
    radial-gradient(circle at 12px 12px, #fff 0 5px, transparent 6px) 0 0 / 28px 28px,
    var(--yellow);
  animation-delay: -2.5s;
}
.balloon-check {
  width: 210px; height: 210px; right: 6%; top: 26px;
  background:
    linear-gradient(45deg, rgba(255,255,255,.86) 25%, transparent 25% 50%, rgba(255,255,255,.86) 50% 75%, transparent 75%) 0 0 / 24px 24px,
    linear-gradient(-45deg, rgba(255,255,255,.38) 25%, transparent 25% 50%, rgba(255,255,255,.38) 50% 75%, transparent 75%) 0 0 / 24px 24px,
    #f46ca0;
  animation-delay: -1.1s;
}

.page-shell {
  width: min(1120px, calc(100% - 28px));
  margin: 0 auto;
  padding: 22px 0 58px;
  position: relative;
}

.site-header { text-align: center; padding: 8px 0 18px; }
.logo {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .02em;
  min-height: 128px;
  margin: 0 auto 8px;
  padding: 8px 52px 16px;
  font-family: 'Cherry Bomb One', 'Fredoka', sans-serif;
  font-size: clamp(3.2rem, 9vw, 6.8rem);
  line-height: 1;
  letter-spacing: .01em;
}
.logo .l {
  display: inline-block;
  text-shadow:
    -3px -3px 0 #fff, 3px -3px 0 #fff,
    -3px  3px 0 #fff, 3px  3px 0 #fff,
    -5px 0 0 #fff, 5px 0 0 #fff,
    0 -5px 0 #fff, 0 5px 0 #fff,
    0 7px 0 rgba(151,73,133,.24),
    0 11px 0 rgba(0,0,0,.12);
  transition: transform .16s ease;
}
.logo .l:hover { transform: translateY(-10px) rotate(-7deg) scale(1.04) !important; }
.logo .l1 { color: #ff83c3; transform: translateY(11px) rotate(-11deg); }
.logo .l2 { color: #ffb13d; transform: translateY(4px) rotate(-7deg); }
.logo .l3 { color: #ffe05a; transform: translateY(0) rotate(-4deg); }
.logo .l4 { color: #99df69; transform: translateY(-4px) rotate(-1deg); }
.logo .l5 { color: #48c8f3; transform: translateY(-4px) rotate(1deg); }
.logo .l6 { color: #a98cec; transform: translateY(0) rotate(4deg); }
.logo .l7 { color: #ff83c3; transform: translateY(4px) rotate(7deg); }
.logo .l8 { color: #ffa63b; transform: translateY(7px) rotate(10deg); }
.logo .l9 { color: #ffe05a; transform: translateY(10px) rotate(13deg); }
.logo .l10 { color: #82d86a; transform: translateY(13px) rotate(16deg); }
.logo-gap { width: .28em; }
.logo-spark {
  position: absolute;
  color: var(--yellow);
  font-size: 2rem;
  text-shadow: 2px 2px 0 var(--yellow-deep);
  animation: spin 4.8s linear infinite;
}
.logo-spark.left { left: 8px; top: 24px; }
.logo-spark.right { right: 8px; bottom: 24px; }
.logo-bow {
  position: absolute;
  right: 30px;
  top: 4px;
  font-size: 2rem;
  animation: bowWiggle 2.8s ease-in-out infinite;
}

.top-nav {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 6px 0 4px;
}
.nav-pill {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 24px;
  border-radius: 999px;
  border: 3px solid;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  text-shadow: 1px 1px 0 rgba(92,54,98,.28);
  transition: transform .14s ease, filter .14s ease;
}
.nav-pill:hover { transform: translateY(-4px); filter: saturate(1.08); }
.nav-pink { background: var(--pink); border-color: var(--pink-deep); box-shadow: 0 4px 0 var(--pink-deep); }
.nav-yellow { background: var(--yellow); border-color: var(--yellow-deep); box-shadow: 0 4px 0 var(--yellow-deep); }
.nav-blue { background: var(--blue); border-color: var(--blue-deep); box-shadow: 0 4px 0 var(--blue-deep); }
.nav-green { background: var(--green); border-color: var(--green-deep); box-shadow: 0 4px 0 var(--green-deep); }
.nav-orange { background: var(--orange); border-color: var(--orange-deep); box-shadow: 0 4px 0 var(--orange-deep); }

.hero-stage {
  position: relative;
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 28px;
  align-items: stretch;
  margin: 28px 0 24px;
}
.rainbow-band {
  position: absolute;
  left: 11%;
  right: -3%;
  top: 86px;
  height: 164px;
  border-radius: 999px 999px 0 0;
  background: repeating-linear-gradient(180deg,
    #ef5c98 0 20px,
    #ff9f2f 20px 40px,
    #ffde38 40px 60px,
    #53c86f 60px 80px,
    #37bde9 80px 100px,
    #9b78d8 100px 120px,
    transparent 120px 150px);
  opacity: .95;
  transform: rotate(-4deg);
  z-index: 0;
  pointer-events: none;
}

.basket-card,
.status-panel,
.notes-card {
  position: relative;
  z-index: 1;
  border: 4px solid var(--line);
  border-radius: 30px;
  background: var(--cream);
  outline: 2px dashed rgba(255,255,255,.95);
  outline-offset: -10px;
  box-shadow: 0 8px 0 rgba(255,112,194,.24), 0 16px 28px rgba(196,72,150,.16);
}
.basket-card {
  padding: 28px 18px 18px;
  background:
    repeating-conic-gradient(from 0deg, rgba(255,249,237,.95) 0deg 90deg, rgba(255,200,226,.9) 90deg 180deg);
  background-size: 24px 24px;
}
.status-panel {
  padding: 28px 24px 24px;
  background:
    radial-gradient(circle at 1rem 1rem, rgba(255,157,196,0.22) 2px, transparent 3px),
    var(--cream);
  background-size: 1.5rem 1.5rem, auto;
}
.card-label {
  width: fit-content;
  margin: -44px auto 18px;
  padding: 8px 24px;
  border: 3px solid var(--pink-deep);
  border-radius: 999px;
  background: var(--pink-soft);
  color: var(--pink-deep);
  font-weight: 700;
  text-shadow: 1px 1px 0 #fff;
  box-shadow: 0 4px 0 rgba(237,94,170,.28);
}
.pink-label { background: #ffe0ef; }

.image-window {
  position: relative;
  border: 4px solid #b1fbff;
  border-radius: 24px;
  background: #fff;
  padding: 8px;
  overflow: hidden;
}
.mascot-window img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  background: #fff;
}
.image-window::after {
  content: '♡';
  position: absolute;
  right: 12px;
  top: 8px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--yellow);
  color: #fff;
  border: 3px solid var(--orange);
  font-weight: 700;
  text-shadow: 1px 1px 0 var(--orange-deep);
}
.mascot-name {
  text-align: center;
  margin-top: 14px;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--pink-deep);
  text-shadow: 1px 1px 0 #fff;
}
.mascot-quote {
  margin-top: 6px;
  text-align: center;
  color: var(--text);
  font-style: italic;
}

.us-portrait { margin: 2px 0 18px; text-align: center; }
.photo-pair {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
}
.heart-burst-layer {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1px;
  height: 1px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.photo-card {
  position: relative;
  min-width: 0;
  padding: 4px;
  border-radius: 26px;
  text-align: center;
  background: linear-gradient(120deg, #ff73c0, #ffcf4d, #56d8ff, #a98cec, #86e86d, #ff73c0);
  background-size: 300% 300%;
  animation: rainbowBorder 6s linear infinite;
  box-shadow: 0 6px 0 rgba(255,145,202,.26), 0 10px 18px rgba(117,83,188,.12);
}
.photo-card::before {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 22px;
  background: rgba(255,255,255,.97);
  z-index: 0;
}
.photo-frame,
.photo-card figcaption { position: relative; z-index: 1; }
.photo-frame { background: #fff; border-radius: 18px; padding: 6px; }
.photo-card img {
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
  border-radius: 14px;
}
.photo-card figcaption {
  margin-top: 7px;
  padding-bottom: 4px;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--pink-deep);
}
.photo-milo figcaption { color: var(--purple-deep); }
.us-tagline {
  margin-top: 4px;
  font-size: .82rem;
  color: var(--text);
  font-style: italic;
  opacity: .9;
}

.pair-heart {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  color: var(--pink-deep);
  width: auto;
  height: auto;
  padding: 0 2px;
  display: grid;
  place-items: center;
  font-size: 2.35rem;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
  text-shadow:
    0 0 0 #fff,
    0 0 12px rgba(255,255,255,.95),
    0 0 22px rgba(255,116,190,.45),
    0 5px 0 rgba(237,94,170,.18);
  animation: pulse 1.5s ease-in-out infinite;
  transition: transform .15s ease, filter .15s ease;
  position: relative;
  z-index: 2;
}
.pair-heart:hover { transform: translateY(-2px) scale(1.08); filter: saturate(1.08); }
.pair-heart:active { transform: translateY(0) scale(.97); }
.pair-heart:focus-visible { outline: none; }
.heart-pop { animation: heartPop 1.05s ease; }
.pair-bounce .photo-card:first-child { animation: rainbowBorder 6s linear infinite, leftNudge 1.05s ease; }
.pair-bounce .photo-card:last-child { animation: rainbowBorder 6s linear infinite, rightNudge 1.05s ease; }
.burst-heart {
  position: absolute;
  left: 0;
  top: 0;
  font-size: 1.1rem;
  line-height: 1;
  color: #ff5cab;
  text-shadow: 0 0 8px rgba(255,255,255,.9);
  opacity: 0;
  transform: translate(-50%, -50%) scale(.2);
  animation: burstFly .95s cubic-bezier(.2,.7,.2,1) forwards;
}
.burst-heart:nth-child(2n) { color: #ff8ccf; }
.burst-heart:nth-child(3n) { color: #ff73c0; }

.status-row { margin-bottom: 14px; }
.status-label {
  display: inline-block;
  background: var(--pink-soft);
  color: var(--pink-deep);
  padding: 4px 14px;
  border-radius: 999px;
  font-weight: 700;
  font-size: .78rem;
  border: 2px solid var(--pink);
  margin-bottom: 6px;
  text-transform: lowercase;
}
.status-value {
  color: var(--text);
  font-weight: 700;
  padding-left: 6px;
  font-size: 1rem;
}
.mood-bubble { color: var(--purple-deep); }

.daily-checkin {
  width: min(100%, 210px);
  min-height: 46px;
  margin: 4px auto 16px;
  display: grid;
  grid-template-columns: 34px 1fr;
  grid-template-areas:
    "icon main"
    "icon sub";
  align-items: center;
  column-gap: 8px;
  padding: 6px 13px 7px 9px;
  border: 3px solid var(--yellow-deep);
  border-radius: 999px;
  background:
    radial-gradient(circle at 10px 10px, rgba(255,255,255,.66) 0 3px, transparent 4px) 0 0 / 20px 20px,
    linear-gradient(180deg, #fff7b8, #ffd45e);
  color: var(--orange-deep);
  font-family: 'Fredoka', 'Pixelify Sans', system-ui, sans-serif;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 5px 0 rgba(231,136,28,.30), inset 0 0 0 2px rgba(255,255,255,.55);
}
.daily-checkin:hover:not(:disabled) {
  transform: translateY(-3px);
  filter: saturate(1.05);
}
.daily-checkin:disabled {
  cursor: default;
}
.daily-checkin.claimed {
  grid-template-columns: 30px auto;
  grid-template-areas: "icon main";
  justify-content: center;
  border-color: var(--green-deep);
  background:
    radial-gradient(circle at 10px 10px, rgba(255,255,255,.66) 0 3px, transparent 4px) 0 0 / 20px 20px,
    linear-gradient(180deg, #efffc7, #c5f26d);
  color: #569a34;
  box-shadow: 0 5px 0 rgba(86,154,52,.22), inset 0 0 0 2px rgba(255,255,255,.55);
}
.daily-checkin.claimed .checkin-main {
  align-self: center;
  text-align: center;
}
.daily-checkin.claimed .checkin-sub {
  display: none;
}
.checkin-icon {
  grid-area: icon;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #fff7b1 0 18%, #ffd45e 19% 100%);
  font-size: 1.05rem;
  filter: drop-shadow(1px 3px 0 rgba(255,160,90,.28));
}
.checkin-main {
  grid-area: main;
  font-size: .88rem;
  line-height: 1.05;
}
.checkin-sub {
  grid-area: sub;
  color: var(--text-soft);
  font-size: .72rem;
  line-height: 1.1;
}

.days-counter {
  position: relative;
  margin-top: 16px;
  padding: 14px 18px 16px;
  background:
    radial-gradient(circle at 12px 12px, rgba(255,177,204,.22) 0 2px, transparent 3px) 0 0 / 24px 24px,
    #fff7fb;
  border-radius: 22px;
  border: 3px solid var(--line);
  box-shadow: 0 7px 0 rgba(255,112,194,.22);
  text-align: center;
}
.days-counter::before,
.days-counter::after {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  background: var(--line);
  border-radius: 8px;
  transform: rotate(45deg);
  top: -11px;
  z-index: -1;
}
.days-counter::before { left: 26%; }
.days-counter::after { right: 26%; }
.counter-label {
  display: block;
  margin-bottom: 8px;
  color: var(--text-soft);
  font-size: .9rem;
  letter-spacing: .06em;
}
.days-number {
  display: block;
  font-family: 'Press Start 2P', monospace;
  font-size: 2rem;
  line-height: 1.1;
  color: var(--pink-deep);
  text-shadow: 3px 3px 0 var(--pink-soft);
}
.days-unit {
  display: block;
  margin-top: 8px;
  color: var(--text-soft);
  font-size: .92rem;
}

.marquee-bar {
  margin: 25px 0 30px;
  height: 42px;
  border: 3px solid var(--pink-deep);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--pink), var(--purple), var(--blue), var(--pink));
  overflow: hidden;
  display: flex;
  align-items: center;
  box-shadow: 0 5px 0 rgba(237,94,170,.24);
}
.marquee-track {
  white-space: nowrap;
  padding-left: 100%;
  color: #fff;
  font-weight: 700;
  letter-spacing: .06em;
  text-shadow: 1px 1px 0 rgba(92,54,98,.32);
  animation: marquee 28s linear infinite;
}

.section-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 4px 0 22px;
}
.section-title span {
  color: var(--yellow);
  font-size: 1.8rem;
  text-shadow: 2px 2px 0 var(--yellow-deep);
}
.section-title h2 {
  min-width: 250px;
  padding: 7px 28px;
  border: 3px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  text-align: center;
  color: var(--pink-deep);
  font-family: 'Fredoka', 'Pixelify Sans', system-ui, sans-serif;
  font-size: 1.95rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.12;
  text-shadow: 2px 2px 0 #fff1a9;
  box-shadow: 0 5px 0 rgba(255,112,194,.22);
}

.room-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.room-card {
  position: relative;
  min-height: 300px;
  padding: 26px 18px 20px;
  border: 4px solid var(--line);
  border-radius: 32px;
  background: var(--cream);
  overflow: hidden;
  text-decoration: none;
  text-align: center;
  box-shadow: 0 8px 0 rgba(255,112,194,.22), 0 18px 30px rgba(196,72,150,.14);
  transition: transform .16s ease, filter .16s ease;
}
.room-card:hover { transform: translateY(-7px) rotate(-1deg); filter: saturate(1.06); }
.room-card::before {
  content: '';
  position: absolute;
  inset: 10px;
  border: 2px dashed rgba(255,255,255,.95);
  border-radius: 24px;
  pointer-events: none;
}
.room-balloon {
  position: relative;
  width: 142px;
  height: 142px;
  margin: 0 auto 15px;
  border-radius: 50%;
  border: 4px solid rgba(255,255,255,.9);
  filter: drop-shadow(0 6px 0 rgba(0,0,0,.09));
}
.room-balloon::before,
.room-balloon::after {
  content: '';
  position: absolute;
  top: 98%;
  width: 3px; height: 46px;
  background: #1678b6;
}
.room-balloon::before { left: 48px; transform: rotate(10deg); }
.room-balloon::after { right: 48px; transform: rotate(-10deg); }
.room-basket {
  width: 72px;
  height: 50px;
  margin: -6px auto 11px;
  display: grid;
  place-items: center;
  border: 4px solid var(--orange-deep);
  border-radius: 12px 12px 20px 20px;
  background: var(--yellow);
  font-size: 2rem;
}
.workshop-room .room-balloon {
  background:
    radial-gradient(circle at 12px 12px, #fff 0 4px, transparent 5px) 0 0 / 22px 22px,
    var(--yellow);
}
.storage-room .room-balloon {
  background:
    radial-gradient(circle at 12px 12px, #fff 0 4px, transparent 5px) 0 0 / 22px 22px,
    var(--blue);
}
.garden-room .room-balloon {
  background:
    linear-gradient(45deg, rgba(255,255,255,.78) 25%, transparent 25% 50%, rgba(255,255,255,.78) 50% 75%, transparent 75%) 0 0 / 22px 22px,
    var(--green);
}
.room-card h3 {
  color: var(--pink-deep);
  font-family: 'Fredoka', 'Pixelify Sans', system-ui, sans-serif;
  font-size: 1.95rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.1;
  text-shadow: 2px 2px 0 #fff;
}
.room-card p {
  margin: 8px auto 12px;
  color: var(--text-soft);
  font-weight: 700;
}
.room-card b {
  display: inline-flex;
  padding: 6px 18px;
  border-radius: 999px;
  border: 3px solid var(--pink-deep);
  background: var(--pink-soft);
  color: #fff;
  text-shadow: 1px 1px 0 var(--pink-deep);
}

.village-strip {
  position: relative;
  height: 190px;
  margin: 36px 0 20px;
  border-radius: 34px;
  overflow: hidden;
  background:
    radial-gradient(circle at 12px 12px, rgba(255,255,255,.62) 0 3px, transparent 4px) 0 0 / 25px 25px,
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.0));
}
.path {
  position: absolute;
  left: 24%; top: -20px;
  width: 160px; height: 240px;
  background: #ffe078;
  border-radius: 50% 50% 0 0;
  transform: rotate(22deg);
  opacity: .95;
}
.house {
  position: absolute;
  bottom: 28px;
  width: 98px; height: 82px;
  border: 4px solid rgba(255,255,255,.86);
  border-radius: 12px 12px 18px 18px;
  box-shadow: 0 5px 0 rgba(0,0,0,.08);
}
.house::before {
  content: '';
  position: absolute;
  left: 8px; right: 8px; bottom: 65px;
  height: 56px;
  border-radius: 48px 48px 10px 10px;
  border: 4px solid rgba(255,255,255,.86);
}
.house span {
  position: absolute;
  left: 36px; bottom: 0;
  width: 26px; height: 39px;
  border-radius: 12px 12px 0 0;
  background: #fff4b6;
}
.house-pink { left: 6%; background: #67d0f7; }
.house-pink::before { background: #ff7fc4; }
.house-blue { right: 9%; background: #ff9bd2; }
.house-blue::before { background: #ff79ba; }
.tree {
  position: absolute;
  bottom: 28px;
  width: 36px; height: 54px;
  border-radius: 12px;
  background: #9c6a45;
}
.tree::before {
  content: '';
  position: absolute;
  left: 50%; bottom: 30px;
  width: 68px; height: 64px;
  transform: translateX(-50%);
  border-radius: 22px;
  background:
    radial-gradient(circle at 8px 8px, rgba(255,255,255,.75) 0 3px, transparent 4px) 0 0 / 16px 16px,
    var(--green-deep);
}
.t-a { left: 66%; }
.t-b { right: 2%; transform: scale(.82); }
.flower { position: absolute; color: var(--pink-deep); font-size: 1.7rem; text-shadow: 1px 1px 0 #fff; }
.f-a { left: 31%; bottom: 36px; color: var(--orange); }
.f-b { left: 54%; bottom: 62px; color: var(--pink-deep); }
.f-c { right: 28%; bottom: 38px; color: var(--blue-deep); }

.notes-card {
  padding: 30px 26px 24px;
  margin-top: 20px;
  background:
    radial-gradient(circle at 12px 12px, rgba(255,145,202,.20) 0 3px, transparent 4px) 0 0 / 24px 24px,
    var(--cream);
}
.note-list { display: grid; gap: 12px; }
.note-list p {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 2px dashed var(--pink-soft);
  border-radius: 18px;
  background: rgba(255,255,255,.58);
  font-weight: 700;
}
.note-list span {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--yellow);
  color: var(--orange-deep);
  border: 3px solid var(--orange);
  font-size: .85rem;
}

@keyframes balloonDrift {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-16px) rotate(3deg); }
}
@keyframes cloudFloat {
  0%, 100% { margin-top: 0; }
  50% { margin-top: -12px; }
}
@keyframes twinkle {
  0%, 100% { transform: scale(1) rotate(0); opacity: .78; }
  50% { transform: scale(1.22) rotate(10deg); opacity: 1; }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes bowWiggle {
  0%, 100% { transform: rotate(14deg); }
  50% { transform: rotate(-12deg); }
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.18); }
}
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}
@keyframes rainbowBorder {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}
@keyframes heartPop {
  0% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(255,145,202,0)); }
  18% { transform: scale(1.45); filter: drop-shadow(0 0 8px rgba(255,145,202,.65)); }
  38% { transform: scale(.92); }
  55% { transform: scale(1.25); }
  72% { transform: scale(1.1); }
  100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(255,145,202,0)); }
}
@keyframes leftNudge {
  0%,100% { transform: translateX(0) rotate(0deg); }
  20% { transform: translateX(10px) rotate(-2deg) scale(1.02); }
  50% { transform: translateX(-4px) rotate(2deg) scale(1.01); }
  75% { transform: translateX(4px) rotate(-1deg); }
}
@keyframes rightNudge {
  0%,100% { transform: translateX(0) rotate(0deg); }
  20% { transform: translateX(-10px) rotate(2deg) scale(1.02); }
  50% { transform: translateX(4px) rotate(-2deg) scale(1.01); }
  75% { transform: translateX(-4px) rotate(1deg); }
}
@keyframes burstFly {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.2); }
  15% { opacity: 1; transform: translate(-50%, -50%) scale(var(--scale, 1)); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) rotate(var(--rot)) scale(calc(var(--scale, 1) * 1.15)); }
}

@media (max-width: 860px) {
  .hero-stage { grid-template-columns: 1fr; }
  .rainbow-band { left: -8%; right: -8%; top: 140px; height: 150px; }
  .room-grid { grid-template-columns: 1fr; }
  .balloon-dot { left: 35%; width: 250px; height: 250px; }
  .balloon-check { right: -60px; }
}

@media (max-width: 520px) {
  .page-shell { width: min(100% - 18px, 1120px); padding-top: 16px; }
  .logo { padding-inline: 14px; min-height: 92px; }
  .logo-bow, .logo-spark { display: none; }
  .top-nav { gap: 8px; }
  .nav-pill { padding-inline: 16px; }
  .section-title h2 { min-width: auto; font-size: 1.65rem; }
  .house-blue { display: none; }
  .photo-pair { grid-template-columns: 1fr; }
  .pair-heart { margin: 0 auto; font-size: 2.6rem; }
  .days-number { font-size: 1.55rem; }
}