/* Elegant pastel palette inspired by Churris' balloon installations. */
:root {
  --blush: #df8f9e; --coral: #d87573; --peach: #efb292; --cream: #fff6e8;
  --rose-gold: #bc7d72; --gold: #c99a4c; --ink: #663c42; --muted-ink: #8b6668;
  --glass: rgba(255, 250, 243, 0.72);
}

* { box-sizing: border-box; }
html { min-width: 320px; }

body {
  min-height: 100vh; margin: 0; overflow-x: hidden; color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  background: radial-gradient(circle at 78% 15%, rgba(255,255,255,.82), transparent 25%),
              linear-gradient(135deg, #fffaf2 0%, #fbe4dc 53%, #edc6c6 100%);
}

body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(180,122,105,.12) .7px, transparent .7px);
  background-size: 9px 9px; opacity: .35;
}
body.album-open { overflow: hidden; }

.page-content {
  position: relative; z-index: 3; min-height: 100vh; display: flex; align-items: center;
  justify-content: flex-end; padding: 44px clamp(28px, 6vw, 92px) 44px clamp(260px, 32vw, 510px);
  pointer-events: none;
}

.countdown-panel {
  width: min(780px, 100%); padding: clamp(34px, 5vw, 62px); text-align: center;
  background: var(--glass); border: 1px solid rgba(255,255,255,.9); border-radius: 36px;
  box-shadow: 0 28px 80px rgba(112,64,68,.16); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
  pointer-events: auto;
}

.intro {
  margin: 0 0 9px; color: var(--rose-gold); font: 600 .72rem Arial, sans-serif;
  letter-spacing: .25em; text-transform: uppercase;
}

/* A playful version of the message traditionally sent to Churris each day. */
.tradition-prompt {
  margin: 0 0 18px;
  color: var(--blush);
  font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
  font-size: clamp(1.15rem, 2.4vw, 1.7rem);
  font-weight: 600;
  line-height: 1.35;
  transform: rotate(-1deg);
  animation: note-entrance .7s ease-out both;
}

@keyframes note-entrance {
  from { opacity: 0; transform: translateY(8px) rotate(-1deg); }
  to { opacity: 1; transform: translateY(0) rotate(-1deg); }
}

h1 { margin: 0; font-size: clamp(2.8rem, 6.2vw, 5.7rem); font-weight: 400; letter-spacing: .05em; line-height: .95; }

.date {
  margin: 18px 0 0; color: var(--gold); font: 600 clamp(.95rem, 1.7vw, 1.2rem) Arial, sans-serif;
  letter-spacing: .28em;
}
.date span { color: var(--coral); }

.personal-note {
  max-width: 510px; margin: 23px auto 34px; color: var(--muted-ink);
  font-size: clamp(.95rem, 1.7vw, 1.08rem); font-style: italic; line-height: 1.55;
}

.countdown { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(9px, 1.6vw, 16px); }
.time-card {
  padding: clamp(18px, 2.7vw, 28px) 6px clamp(14px, 2vw, 20px);
  background: linear-gradient(145deg, rgba(255,255,255,.76), rgba(255,242,231,.55));
  border: 1px solid rgba(190,125,114,.2); border-radius: 22px;
  box-shadow: inset 0 1px 0 white, 0 10px 30px rgba(127,75,78,.08);
}
.number, .label { display: block; }
.number { color: var(--coral); font-size: clamp(2rem, 4.8vw, 3.65rem); font-variant-numeric: tabular-nums; line-height: 1; }
.label {
  margin-top: 10px; color: var(--muted-ink); font: normal clamp(.58rem, 1.2vw, .72rem) Arial, sans-serif;
  letter-spacing: .14em; text-transform: uppercase;
}
.closing-line { margin: 29px 0 0; color: var(--rose-gold); font-size: .95rem; letter-spacing: .04em; }
.birthday-message { margin: 30px 0 8px; color: var(--coral); font-size: clamp(2.3rem, 6vw, 4.6rem); line-height: 1.1; }

/* The garland uses only positioned circles and ellipses. */
.balloon-garland {
  position: fixed; z-index: 2; top: -7vh; bottom: -7vh; left: -75px;
  width: min(37vw, 500px); pointer-events: none;
}
.garland-balloon, .floating-balloon {
  position: absolute; display: block; border-radius: 52% 48% 49% 51% / 46% 47% 53% 54%;
  box-shadow: inset 12px 13px 20px rgba(255,255,255,.28), inset -10px -14px 20px rgba(102,51,55,.12), 0 11px 22px rgba(102,55,60,.13);
  transform-origin: 50% 80%; animation: garland-wobble 8s ease-in-out infinite alternate;
}

/* Extra installation details are reserved for the mobile reference layout. */
.mobile-balloon,
.floral-accent,
.mobile-divider { display: none; }

.mobile-balloon {
  position: absolute;
  border-radius: 52% 48% 49% 51% / 46% 47% 53% 54%;
  box-shadow: inset 9px 10px 16px rgba(255,255,255,.3),
              inset -8px -10px 16px rgba(102,51,55,.12),
              0 8px 18px rgba(102,55,60,.15);
  animation: garland-wobble 9s ease-in-out infinite alternate;
}

.mobile-balloon::after {
  content: "";
  position: absolute;
  top: 15%; left: 20%; width: 18%; height: 28%;
  border-radius: 50%; background: rgba(255,255,255,.34);
  filter: blur(2px); transform: rotate(25deg);
}

/* Special balloons are real buttons, but visually blend into the garland. */
.interactive-balloon {
  margin: 0;
  padding: 0;
  border: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: filter .2s ease, scale .2s ease, translate .2s ease;
}

.balloon-warning {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 54%;
  color: rgba(102, 60, 66, .66);
  font: 700 8px/1.25 Arial, sans-serif;
  letter-spacing: .08em;
  text-align: center;
  transform: translate(-50%, -50%) rotate(-4deg);
}

.interactive-balloon:hover {
  filter: brightness(1.055);
  translate: 0 -2px;
  scale: 1.025;
  animation-play-state: paused;
}
.interactive-balloon:focus-visible {
  outline: 3px solid rgba(102, 60, 66, .75);
  outline-offset: 5px;
}

.interactive-balloon.popped {
  pointer-events: none;
  animation: balloon-pop .38s ease-out forwards;
}

.interactive-balloon.is-restored {
  visibility: hidden;
  opacity: 0;
  animation: none;
}

.pop-burst,
.pop-burst::before,
.pop-burst::after {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  content: "";
  opacity: 0;
}

.popped .pop-burst { animation: burst-centre .36s ease-out; }
.popped .pop-burst::before { animation: burst-left .36s ease-out; }
.popped .pop-burst::after { animation: burst-right .36s ease-out; }

@keyframes balloon-pop {
  45% { opacity: 1; transform: scale(1.12); }
  100% { opacity: 0; transform: scale(.2); visibility: hidden; }
}
@keyframes burst-centre { 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(-45px); } }
@keyframes burst-left { 40% { opacity: 1; } 100% { opacity: 0; transform: translate(-38px, 27px); } }
@keyframes burst-right { 40% { opacity: 1; } 100% { opacity: 0; transform: translate(38px, 27px); } }

/* Full-screen focus moment shown after an interactive balloon is popped. */
.balloon-focus {
  position: fixed;
  z-index: 40;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  overflow: hidden;
  background: rgba(104, 67, 69, .32);
  backdrop-filter: blur(4px) saturate(.88);
  -webkit-backdrop-filter: blur(4px) saturate(.88);
  opacity: 0;
  pointer-events: none;
  transition: opacity .36s ease;
}

.balloon-focus[hidden] { display: none; }
.balloon-focus.is-visible { opacity: 1; pointer-events: auto; }
.balloon-focus.is-leaving { opacity: 0; pointer-events: auto; }

.focus-card {
  position: relative;
  width: min(560px, 86vw);
  min-height: 190px;
  padding: clamp(42px, 7vw, 64px) clamp(28px, 6vw, 58px);
  display: grid;
  place-items: center;
  color: var(--ink);
  text-align: center;
  background: linear-gradient(145deg, rgba(255,253,247,.97), rgba(255,238,229,.94));
  border: 1px solid rgba(188,125,114,.48);
  border-radius: 30px;
  box-shadow: 0 30px 85px rgba(78,42,50,.3), inset 0 1px 0 rgba(255,255,255,.95);
  opacity: 0;
  transform: translateY(10px) scale(.9);
  transition: opacity .44s ease .06s, transform .44s cubic-bezier(.2,.8,.2,1) .06s;
}

.focus-card::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(216,117,115,.16);
  border-radius: 22px;
  pointer-events: none;
}

.focus-card p {
  position: relative;
  z-index: 2;
  margin: 0;
  font-size: clamp(1.5rem, 4vw, 2.35rem);
  line-height: 1.35;
}

.memory-photo {
  position: relative;
  z-index: 2;
  display: block;
  max-width: 100%;
  max-height: min(58dvh, 560px);
  margin: 0 auto 18px;
  object-fit: contain;
  border-radius: 18px;
  box-shadow: 0 12px 34px rgba(78,42,50,.18);
}
.memory-photo[hidden] { display: none; }
.focus-card.has-photo {
  width: min(720px, 90vw);
  max-height: 90dvh;
  padding: clamp(22px, 4vw, 34px);
}
.focus-card.has-photo p { font-size: clamp(1.05rem, 2.7vw, 1.45rem); }

.balloon-focus.is-visible .focus-card { opacity: 1; transform: translateY(0) scale(1); }
.balloon-focus.is-leaving .focus-card {
  opacity: 0;
  transform: translateY(-5px) scale(.96);
  transition-delay: 0s;
}

.balloon-focus.is-dramatic .focus-card {
  border-color: rgba(216,117,115,.72);
  box-shadow: 0 34px 95px rgba(104,45,58,.38), 0 0 0 5px rgba(223,143,158,.1);
}

.focus-sparkle {
  position: absolute;
  z-index: 3;
  color: var(--gold);
  font-size: 1rem;
  opacity: 0;
}
.balloon-focus.is-visible .focus-sparkle { animation: focus-sparkle 1.4s ease-out .25s both; }
.sparkle-1 { left: 8%; top: 15%; }.sparkle-2 { left: 17%; bottom: 13%; color: var(--blush); animation-delay: .4s !important; }
.sparkle-3 { right: 10%; top: 18%; animation-delay: .32s !important; }.sparkle-4 { right: 18%; bottom: 12%; color: var(--coral); animation-delay: .5s !important; }
.sparkle-5 { left: 42%; top: 8%; color: var(--blush); animation-delay: .58s !important; }.sparkle-6 { right: 39%; bottom: 7%; animation-delay: .46s !important; }
.sparkle-7 { left: 4%; top: 52%; animation-delay: .65s !important; }.sparkle-8 { right: 4%; top: 48%; color: var(--rose-gold); animation-delay: .55s !important; }

@keyframes focus-sparkle {
  0% { opacity: 0; transform: scale(.4) rotate(0); }
  35% { opacity: .9; }
  100% { opacity: 0; transform: scale(1.35) rotate(35deg) translateY(-8px); }
}

/* Compact album buttons use existing empty space beneath the closing message. */
.album-trigger,
.finale-trigger {
  margin: 14px auto 0;
  padding: 10px 18px;
  color: var(--ink);
  font: 600 .82rem Georgia, serif;
  background: rgba(255,255,255,.62);
  border: 1px solid rgba(188,125,114,.32);
  border-radius: 999px;
  box-shadow: 0 8px 22px rgba(127,75,78,.09);
  cursor: pointer;
}
.album-trigger { margin-top: 10px; padding: 8px 16px; }
.album-trigger:focus-visible,
.finale-trigger:focus-visible,
.finale-close:focus-visible,
.finale-controls button:focus-visible {
  outline: 3px solid rgba(102,60,66,.72);
  outline-offset: 3px;
}
.finale-trigger[hidden] { display: none; }

.photo-finale {
  position: fixed;
  z-index: 50;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  overflow: hidden;
  background: rgba(91,55,60,.48);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.photo-finale[hidden] { display: none; }
.finale-card {
  position: relative;
  width: min(760px, 92vw);
  max-height: 94dvh;
  padding: 22px;
  text-align: center;
  background: linear-gradient(145deg, rgba(255,253,247,.98), rgba(255,238,229,.97));
  border: 1px solid rgba(188,125,114,.48);
  border-radius: 28px;
  box-shadow: 0 32px 90px rgba(78,42,50,.36);
}
.finale-card h2 { margin: 0 38px 14px; font-size: clamp(1.5rem, 4vw, 2.2rem); font-weight: 400; }
.album-photo-frame {
  position: relative;
  display: inline-block;
  max-width: 100%;
  padding: clamp(10px, 1.5vw, 13px) clamp(10px, 1.5vw, 13px) clamp(48px, 7vw, 68px);
  overflow: hidden;
  vertical-align: middle;
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.76), transparent 34%),
    linear-gradient(145deg, #fffef9 0%, #f8f1e5 100%);
  border: 1px solid rgba(139,102,91,.18);
  border-radius: 5px;
  box-shadow: 0 24px 48px rgba(66,35,39,.3), 0 5px 12px rgba(66,35,39,.18);
  transform: rotate(-1.15deg);
}
.album-photo-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .24;
  background-image: radial-gradient(rgba(111,82,73,.16) .45px, transparent .55px);
  background-size: 5px 5px;
}
.finale-card img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(62dvh, 600px);
  object-fit: contain;
  border-radius: 1px;
  background: #eee7dc;
  box-shadow: inset 0 0 0 1px rgba(67,42,40,.08);
}
.finale-close {
  position: absolute;
  z-index: 2;
  top: 12px;
  right: 14px;
  width: 36px;
  height: 36px;
  color: var(--ink);
  font-size: 1.5rem;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(188,125,114,.28);
  border-radius: 50%;
  cursor: pointer;
}
.finale-controls { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin-top: 14px; }
.finale-controls button {
  padding: 9px 14px;
  color: var(--ink);
  background: rgba(255,255,255,.7);
  border: 1px solid rgba(188,125,114,.3);
  border-radius: 999px;
  cursor: pointer;
}
.finale-controls button:disabled { cursor: default; opacity: .38; }
.finale-controls button:last-child { justify-self: end; }
.finale-controls button:first-child { justify-self: start; }
.finale-controls span { color: var(--muted-ink); font: .72rem Arial, sans-serif; }
.album-decoration { position: absolute; z-index: 1; pointer-events: none; color: var(--gold); opacity: .55; }
.album-sparkle-one { top: 18px; left: 20px; }
.album-sparkle-two { right: 58px; bottom: 20px; color: var(--blush); }
.album-balloon {
  left: -11px; bottom: 52px; width: 23px; height: 29px; border-radius: 52% 48% 49% 51%;
  background: linear-gradient(145deg,#f1b1ba,var(--blush)); box-shadow: inset 4px 5px 7px rgba(255,255,255,.3),0 5px 12px rgba(102,55,60,.14);
}
.pop-counter {
  margin: 14px 0 0;
  color: var(--muted-ink);
  font: normal .68rem Arial, sans-serif;
  letter-spacing: .08em;
  opacity: .75;
}
.garland-balloon::after, .floating-balloon::after {
  content: ""; position: absolute; top: 15%; left: 20%; width: 18%; height: 28%;
  border-radius: 50%; background: rgba(255,255,255,.34); filter: blur(2px); transform: rotate(25deg);
}
.blush { background: linear-gradient(145deg, #f1b1ba, var(--blush)); }
.coral { background: linear-gradient(145deg, #ed9b91, var(--coral)); }
.peach { background: linear-gradient(145deg, #ffd0ad, var(--peach)); }
.cream { background: linear-gradient(145deg, #fffdf5, #ebdfcc); }
.rose-gold { background: linear-gradient(145deg, #dfaaa0, #a96962); }
.gold { background: linear-gradient(145deg, #f4d081, #b98535); }

.b1{width:150px;height:166px;left:0;top:0}.b2{width:105px;height:118px;left:135px;top:3%;animation-delay:-2s}
.b3{width:132px;height:143px;left:74px;top:12%;animation-delay:-5s}.b4{width:92px;height:104px;left:188px;top:15%}
.b5{width:64px;height:73px;left:38px;top:23%;animation-delay:-4s}.b6{width:158px;height:174px;left:103px;top:25%;animation-delay:-1s}
.b7{width:96px;height:108px;left:228px;top:29%;animation-delay:-6s}.b8{width:122px;height:137px;left:22px;top:37%}
.b9{width:82px;height:94px;left:165px;top:42%;animation-delay:-3s}.b10{width:156px;height:171px;left:80px;top:48%;animation-delay:-7s}
.b11{width:72px;height:83px;left:224px;top:52%;animation-delay:-2s}.b12{width:88px;height:101px;left:10px;top:58%;animation-delay:-5s}
.b13{width:130px;height:145px;left:150px;top:61%}.b14{width:100px;height:114px;left:42px;top:70%;animation-delay:-4s}
.b15{width:148px;height:164px;left:104px;top:75%;animation-delay:-1s}.b16{width:79px;height:91px;left:235px;top:78%;animation-delay:-6s}
.b17{width:61px;height:70px;left:18px;top:84%;animation-delay:-3s}.b18{width:114px;height:128px;left:63px;top:89%;animation-delay:-5s}
.b19{width:92px;height:105px;left:173px;top:91%}.b20{width:68px;height:78px;left:263px;top:92%;animation-delay:-2s}

@keyframes garland-wobble { from { transform: rotate(-1.2deg) translateY(0); } to { transform: rotate(1.2deg) translateY(-4px); } }

/* Only the five poppable balloons receive an idle movement cue. */
.garland-balloon { animation: none; }
.mobile-balloon { animation: none; }

.interactive-balloon:not(.popped) {
  animation-name: interactive-float-a;
  animation-duration: 3.4s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  transform-origin: 50% 72%;
  will-change: transform;
}

.interactive-balloon[data-balloon-id="1"]:not(.popped) {
  animation-name: interactive-float-a;
  animation-duration: 3.2s;
  animation-delay: -.7s;
}
.interactive-balloon[data-balloon-id="2"]:not(.popped) {
  animation-name: interactive-float-b;
  animation-duration: 4.1s;
  animation-delay: -2.2s;
}
.interactive-balloon[data-balloon-id="3"]:not(.popped) {
  animation-name: interactive-float-c;
  animation-duration: 3.7s;
  animation-delay: -1.4s;
}
.interactive-balloon[data-balloon-id="4"]:not(.popped) {
  animation-name: interactive-float-b;
  animation-duration: 2.9s;
  animation-delay: -.25s;
}
.interactive-balloon[data-balloon-id="5"]:not(.popped) {
  animation-name: interactive-text-sway;
  animation-duration: 4.4s;
  animation-delay: -1.8s;
}

/* A very faint glint reinforces discoverability without flashing. */
.interactive-balloon:not(.popped)::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 20%;
  right: 17%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,.7);
  box-shadow: 0 0 9px rgba(255,255,255,.55);
  opacity: 0;
  animation: interactive-glint 5.2s ease-in-out infinite;
  pointer-events: none;
}

.interactive-balloon[data-balloon-id="2"]::before { animation-delay: -1.6s; }
.interactive-balloon[data-balloon-id="3"]::before { animation-delay: -3.1s; }
.interactive-balloon[data-balloon-id="4"]::before { animation-delay: -.8s; }
.interactive-balloon[data-balloon-id="5"]::before { animation-delay: -2.4s; opacity: 0; }

@keyframes interactive-float-a {
  0%, 100% { transform: translate(0, 0) rotate(-.8deg) scale(1); }
  45% { transform: translate(3px, -6px) rotate(1.4deg) scale(1.025); }
  72% { transform: translate(-2px, -3px) rotate(.2deg) scale(1.01); }
}

@keyframes interactive-float-b {
  0%, 100% { transform: translate(-2px, -1px) rotate(1deg) scale(1.01); }
  38% { transform: translate(3px, -4px) rotate(-1.5deg) scale(1.025); }
  70% { transform: translate(1px, 2px) rotate(.5deg) scale(1); }
}

@keyframes interactive-float-c {
  0%, 100% { transform: translate(1px, 1px) rotate(-1.2deg) scale(1); }
  32% { transform: translate(-3px, -5px) rotate(.8deg) scale(1.02); }
  68% { transform: translate(2px, -2px) rotate(1.5deg) scale(1.03); }
}

@keyframes interactive-text-sway {
  0%, 100% { transform: translate(0, 0) rotate(-.6deg) scale(1); }
  50% { transform: translate(2px, -3px) rotate(.7deg) scale(1.01); }
}

@keyframes interactive-glint {
  0%, 72%, 100% { opacity: 0; transform: scale(.65); }
  82% { opacity: .5; transform: scale(1); }
  90% { opacity: 0; transform: scale(1.2); }
}

.floating-balloons { position: fixed; z-index: 1; inset: 0; overflow: hidden; pointer-events: none; }
.floating-balloon { bottom: -170px; width: 58px; height: 72px; opacity: .18; animation: float-up 20s linear infinite; }
.float-1{left:40%;background:var(--blush);animation-duration:22s}.float-2{left:72%;background:var(--gold);animation-duration:27s;animation-delay:-10s}
.float-3{left:91%;background:var(--peach);animation-duration:24s;animation-delay:-17s}.float-4{left:52%;background:var(--coral);animation-duration:21s;animation-delay:-5s}
.float-5{left:82%;background:var(--rose-gold);animation-duration:25s;animation-delay:-14s}.float-6{left:64%;background:var(--cream);animation-duration:18s;animation-delay:-9s}
.extra-balloon { display: none; }.birthday-mode .extra-balloon { display: block; }
@keyframes float-up { from { transform: translateY(0) rotate(-3deg); } to { transform: translateY(calc(-100vh - 260px)) rotate(4deg); } }

.confetti { position: fixed; z-index: 5; inset: 0; overflow: hidden; pointer-events: none; }
.confetti-piece {
  position: absolute; top: -20px; width: 9px; height: 16px; border-radius: 3px;
  animation: confetti-fall var(--fall-time) linear forwards;
}
@keyframes confetti-fall { to { transform: translate3d(var(--drift), 105vh, 0) rotate(720deg); } }

@media (max-width: 850px) {
  .page-content { align-items: flex-start; padding: 160px 20px 28px; }
  .countdown-panel { padding: 34px 18px; }
  .balloon-garland { top: -55px; left: -35px; width: 115vw; height: 220px; bottom: auto; transform: scale(.72); transform-origin: top left; }
  .b8,.b9,.b10,.b11,.b12,.b13,.b14,.b15,.b16,.b17,.b18,.b19,.b20 { display: none; }
  .balloon-message {
    left: 50%;
    top: auto;
    bottom: 18px;
    transform: translate(-50%, 7px) scale(.94);
  }
  .balloon-message.is-visible { transform: translate(-50%, 0) scale(1); }
}
@media (max-width: 520px) {
  .page-content { padding-top: 125px; }.countdown-panel { border-radius: 28px; }
  .countdown { grid-template-columns: repeat(2, minmax(0, 1fr)); }.personal-note { margin-bottom: 28px; }
  .balloon-garland { transform: scale(.58); }
}

/* Mobile-only poster layout. All desktop rules above remain unchanged. */
@media (max-width: 700px) {
  body {
    width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
  }

  .page-content {
    width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    padding: 92px 8px 12px 56px;
    align-items: flex-start;
    justify-content: center;
    overflow: hidden;
  }

  .countdown-panel {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    max-height: calc(100dvh - 104px);
    min-height: 0;
    padding: clamp(22px, 3.2dvh, 30px) 12px 14px;
    border-radius: 30px;
    overflow: hidden;
  }

  /* display: contents lets the mobile poster reorder existing text without
     changing the HTML or the desktop reading order. */
  .countdown-panel header { display: contents; }

  .tradition-prompt {
    order: 1;
    margin: 0 0 7px;
    font-size: clamp(1.08rem, 5vw, 1.38rem);
    line-height: 1.2;
  }

  .intro {
    order: 2;
    margin: 0 0 7px;
    font-size: .62rem;
    letter-spacing: .23em;
  }

  h1 {
    order: 3;
    width: 250px;
    margin: 0 auto;
    font-size: clamp(3rem, 13vw, 3.65rem);
    line-height: .86;
    letter-spacing: .045em;
  }

  .date {
    order: 4;
    margin: 13px 0 0;
    font-size: .82rem;
    letter-spacing: .24em;
  }

  .countdown {
    order: 5;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
    margin-top: clamp(18px, 2.8dvh, 26px);
    gap: clamp(5px, 1.8vw, 8px);
  }

  .time-card {
    min-width: 0;
    padding: clamp(13px, 2dvh, 18px) 2px 11px;
    border-radius: 16px;
  }

  .number { font-size: clamp(1.55rem, 7.5vw, 2rem); }
  .label { margin-top: 7px; font-size: clamp(.47rem, 1.8vw, .58rem); letter-spacing: .08em; }

  .personal-note {
    order: 6;
    max-width: 310px;
    margin: clamp(14px, 2.3dvh, 22px) auto 0;
    font-size: clamp(.82rem, 3.4vw, .94rem);
    line-height: 1.38;
  }

  .birthday-message { order: 5; margin: 22px 0 0; font-size: clamp(2rem, 9vw, 2.8rem); }

  .closing-line {
    order: 7;
    width: min(310px, 100%);
    margin: clamp(18px, 2.8dvh, 26px) auto 0;
    padding: 12px 14px;
    color: var(--rose-gold);
    font-size: clamp(.82rem, 3.2vw, .94rem);
    background: rgba(255,255,255,.5);
    border: 1px solid rgba(190,125,114,.15);
    border-radius: 16px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 8px 22px rgba(127,75,78,.07);
  }

  .pop-counter { order: 8; margin: 8px 0 0; font-size: .62rem; }

  .balloon-garland {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    width: 100vw;
    height: 100dvh;
    transform: none;
  }

  /* Twenty overlapping balloons create a dense top curve and left column.
     The five button balloons are spread throughout the installation. */
  .b1 { width: 86px; height: 97px; left: -12px; top: 62px; }
  .b2 { width: 62px; height: 70px; left: 0; top: 17px; }
  .b3 { width: 76px; height: 85px; left: 35px; top: -9px; }
  .b4 { width: 60px; height: 68px; left: 3px; top: 15dvh; }
  .b5 { width: 50px; height: 58px; left: 8px; top: 27dvh; }
  .b6 { width: 70px; height: 78px; left: 89px; top: 0; }
  .b7 { width: 62px; height: 70px; left: -2px; top: 45dvh; }
  .b8 { display: block; width: 58px; height: 66px; left: 143px; top: 17px; }
  .b9 { display: block; width: 72px; height: 80px; left: 188px; top: 31px; }
  .b10 { display: block; width: 50px; height: 58px; left: 241px; top: 56px; }
  .b11 { display: block; width: 64px; height: 72px; left: 31px; top: 12dvh; }
  .b12 { display: block; width: 78px; height: 88px; left: -13px; top: 21dvh; }
  .b13 { display: block; width: 62px; height: 70px; left: 34px; top: 24dvh; }
  .b14 { display: block; width: 84px; height: 94px; left: -16px; top: 33dvh; }
  .b15 { display: block; width: 51px; height: 59px; left: 34px; top: 35dvh; }
  .b16 { display: block; width: 74px; height: 83px; left: 18px; top: 39dvh; }
  .b17 { display: block; width: 48px; height: 56px; left: 38px; top: 49dvh; }
  .b18 { display: block; width: 82px; height: 91px; left: -16px; top: 52dvh; }
  .b19 { display: block; width: 58px; height: 67px; left: 31px; top: 60dvh; }
  .b20 { display: block; width: 68px; height: 78px; left: -10px; top: 68dvh; }

  /* Keep every special balloon comfortably tappable. */
  .interactive-balloon { min-width: 48px; min-height: 48px; }

  /* Pop-up messages remain overlays and never add page height. */
  .balloon-message {
    width: min(330px, calc(100vw - 28px));
    bottom: 20px;
    padding: 16px 18px;
  }
}

/* Reference-poster refinements: tall arched board with balloons wrapping it. */
@media (max-width: 700px) {
  .page-content {
    padding: 10px 8px 10px 70px;
  }

  .countdown-panel {
    position: relative;
    height: calc(100dvh - 20px);
    max-height: calc(100dvh - 20px);
    padding: clamp(132px, 16dvh, 153px) 11px 14px;
    border-radius: 180px 180px 24px 24px / 145px 145px 24px 24px;
    background: rgba(255, 248, 239, .88);
    box-shadow: 0 22px 55px rgba(112,64,68,.14), inset 0 0 0 1px rgba(255,255,255,.45);
  }

  /* Nested ribs suggest a layered physical event backdrop. */
  .countdown-panel::before,
  .countdown-panel::after {
    content: "";
    position: absolute;
    pointer-events: none;
    border: 1px solid rgba(190, 125, 114, .13);
    border-left-color: transparent;
    border-bottom-color: transparent;
  }

  .countdown-panel::before {
    inset: 7px 7px 7px 14px;
    border-radius: 172px 172px 21px 21px / 138px 138px 21px 21px;
    box-shadow: inset -5px 0 0 rgba(190, 125, 114, .06);
  }

  .countdown-panel::after {
    inset: 14px 14px 14px 25px;
    border-radius: 164px 164px 18px 18px / 131px 131px 18px 18px;
  }

  .tradition-prompt { margin-bottom: 12px; font-size: clamp(1.1rem, 5.2vw, 1.42rem); }
  .intro { margin-bottom: 12px; }
  h1 { font-size: clamp(3rem, 13.5vw, 3.7rem); }
  .date { margin-top: clamp(17px, 2.3dvh, 22px); }

  .countdown { margin-top: clamp(27px, 3.5dvh, 34px); gap: clamp(4px, 1.5vw, 7px); }
  .time-card { padding: clamp(14px, 1.9dvh, 18px) 1px 11px; border-radius: 15px; }

  .mobile-divider {
    order: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 150px;
    margin: clamp(25px, 3.4dvh, 33px) auto 0;
    color: var(--coral);
    font-size: 1rem;
  }

  .mobile-divider::before,
  .mobile-divider::after {
    content: "";
    width: 52px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--rose-gold));
  }
  .mobile-divider::after { transform: rotate(180deg); }

  .personal-note {
    order: 7;
    margin-top: clamp(25px, 3.3dvh, 32px);
    max-width: 285px;
  }

  .closing-line {
    order: 8;
    margin-top: clamp(42px, 7dvh, 67px);
    padding: 13px 10px;
  }

  .pop-counter {
    order: 10;
    margin-top: 14px;
    font-size: .66rem;
  }

  .album-trigger { order: 9; margin-top: 9px; padding: 7px 13px; font-size: .68rem; }
  .finale-trigger { order: 9; margin-top: 8px; padding: 7px 13px; font-size: .68rem; }

  .focus-card.has-photo { width: 88vw; padding: 18px; border-radius: 24px; }
  .memory-photo { max-height: 57dvh; margin-bottom: 14px; }
  .finale-card { width: 94vw; max-height: 96dvh; padding: 16px 12px 14px; border-radius: 24px; }
  .finale-card h2 { margin-bottom: 10px; font-size: clamp(1.25rem, 5.6vw, 1.7rem); }
  .finale-card img { max-height: 62dvh; }
  .album-photo-frame { padding: 8px 8px clamp(43px, 6.2dvh, 58px); transform: rotate(-1deg); }
  .finale-controls { margin-top: 12px; }

  .pop-counter::before {
    content: "♧";
    display: inline-block;
    margin-right: 7px;
    color: var(--coral);
    font-size: 1rem;
    transform: rotate(180deg);
  }

  .birthday-message { order: 5; }

  /* The installation now physically overlaps the front edge of the board. */
  .balloon-garland { z-index: 4; }
  .mobile-balloon { display: block; }

  /* Top cluster: approximately two-thirds of the screen width. */
  .b1 { width: 90px; height: 102px; left: -19px; top: 77px; }
  .b2 { width: 72px; height: 81px; left: 8px; top: 12px; }
  .b3 { width: 82px; height: 92px; left: 56px; top: -12px; }
  .b6 { width: 74px; height: 84px; left: 111px; top: 8px; }
  .b8 { width: 66px; height: 75px; left: 160px; top: -6px; }
  .b9 { width: 76px; height: 86px; left: 204px; top: 17px; }
  .b10 { width: 52px; height: 60px; left: 258px; top: 50px; }

  /* The five interactive balloons are spread from top to lower-left. */
  .b7 {
    z-index: 5;
    width: 76px;
    height: 88px;
    left: 0;
    top: 112px;
  }
  .b4 { width: 66px; height: 75px; left: -10px; top: 35dvh; }
  .b5 { width: 56px; height: 64px; left: 8px; top: 66dvh; }

  /* Dense supporting clusters down the left edge. */
  .b11 { width: 61px; height: 70px; left: 42px; top: 18dvh; }
  .b12 { width: 82px; height: 92px; left: -18px; top: 23dvh; }
  .b13 { width: 64px; height: 73px; left: 35px; top: 27dvh; }
  .b14 { width: 90px; height: 101px; left: -24px; top: 41dvh; }
  .b15 { width: 55px; height: 64px; left: 38px; top: 44dvh; }
  .b16 { width: 78px; height: 88px; left: -12px; top: 49dvh; }
  .b17 { width: 50px; height: 58px; left: 40px; top: 54dvh; }
  .b18 { width: 88px; height: 99px; left: -22px; top: 57dvh; }
  .b19 { width: 62px; height: 72px; left: 34px; top: 61dvh; }
  .b20 { width: 76px; height: 86px; left: -18px; top: 72dvh; }

  /* Small fillers and a bottom flourish complete the organic frame. */
  .mb1 { width: 45px; height: 52px; left: 38px; top: 205px; }
  .mb2 { width: 55px; height: 63px; left: -8px; top: 30dvh; }
  .mb3 { width: 48px; height: 56px; left: 42px; top: 39dvh; }
  .mb4 { width: 37px; height: 43px; left: 22px; top: 47dvh; }
  .mb5 { width: 57px; height: 65px; left: 37px; top: 69dvh; }
  .mb6 { width: 48px; height: 56px; left: -7px; top: 78dvh; }
  .mb7 { width: 86px; height: 96px; left: 4px; bottom: -22px; }
  .mb8 { width: 82px; height: 92px; left: 69px; bottom: -27px; }
  .mb9 { width: 66px; height: 75px; left: auto; right: 27px; bottom: -22px; }
  .mb10 { width: 56px; height: 65px; right: -8px; bottom: -12px; }

  .floral-accent {
    display: block;
    position: absolute;
    z-index: 2;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #fff9ed;
    box-shadow: -10px 2px 0 #fff9ed, 9px -5px 0 #fff9ed, 15px 7px 0 #f4d7c9,
                -4px -11px 0 #f4d7c9, 5px 13px 0 #fff9ed;
  }
  .flower-1 { left: 102px; top: 86px; }
  .flower-2 { left: 45px; top: 50dvh; }
  .flower-3 { left: 182px; bottom: 35px; }

  .balloon-warning {
    font: 700 8.5px/1.25 Arial, sans-serif;
    letter-spacing: .06em;
    width: 58px;
  }
}

@media (max-width: 370px) {
  .page-content { padding-left: 58px; }
  .countdown-panel { padding-left: 9px; padding-right: 9px; }
  .countdown { gap: 4px; }
  .b9 { left: 181px; }
  .b10 { left: 232px; }
}

@media (prefers-reduced-motion: reduce) {
  .garland-balloon, .floating-balloon, .confetti-piece, .tradition-prompt,
  .pop-burst, .pop-burst::before, .pop-burst::after { animation: none; }
  .interactive-balloon.popped { visibility: hidden; opacity: 0; }
  .balloon-message { transition: none; }
  .balloon-focus { transition: opacity .2s ease; }
  .focus-card,
  .album-photo-frame,
  .balloon-focus.is-visible .focus-card,
  .balloon-focus.is-leaving .focus-card { transform: none; transition: opacity .2s ease; }
  .balloon-focus.is-visible .focus-sparkle { animation: none; }
  .interactive-balloon:not(.popped),
  .interactive-balloon:not(.popped)::before { animation: none; }
  .interactive-balloon:not(.popped) { filter: brightness(1.025); will-change: auto; }
  .floating-balloon { display: none; }
}