/* ==========================================================
   Balloon Party — Leo's party quest
   Pastel pink, mint, lilac and butter; Fraunces, Caveat and Sora.
   ========================================================== */
.bp {
  --g-bg: #fff6f1; --g-bg2: #eef9f4; --g-ink: #3a2a45; --g-muted: #6e5a78;
  --g-accent: #e76f9a; --g-accent2: #ffe08a; --g-card: #ffffff; --g-card-ink: #3a2a45;
  --g-display: 'Fraunces', serif; --g-script: 'Caveat', cursive;
  --g-body: 'Sora', sans-serif; --g-label: 'Sora', sans-serif;
  --vx-accent-ink: #fff;
  --pink: #ff8fb1; --mint: #8fd6b8; --lilac: #c9b5ff; --butter: #ffe08a; --sky: #7cc4ff;
}
.bp .vx-loader { background: linear-gradient(180deg, #ffd6e3, #d7f2e6 60%, #e6dcff); }
.bp .vx-loader-mono, .bp .vx-loader-text { color: #3a2a45; }
.bp .gr-big { font-weight: 600; font-size: clamp(2.2rem, 11vw, 3rem); }
.bp .gr-hero .gr-kicker { font-size: 0.92rem; }
.bp-pull { inset: 0; }
.bp-pull--l { justify-content: flex-start; transform: translateX(-60%); }
.bp-pull--r { justify-content: flex-end; transform: translateX(60%); }
.bp-age { margin: -6px 0 0; font: 700 clamp(7rem, 44vw, 10rem)/0.9 var(--g-display); color: #e76f9a; text-shadow: 0 5px 0 #fff, 0 11px 0 #8fd6b8, 0 18px 30px rgba(58, 42, 69, 0.4); }

.bp-k { display: inline-block; margin: 0 0 10px; padding: 5px 12px; border-radius: 20px; background: #3a2a45; color: #fff; font: 700 0.62rem var(--g-label); letter-spacing: 0.2em; text-transform: uppercase; }
.bp-h2 { margin: 0 0 10px; font: 700 clamp(2.1rem, 10vw, 2.8rem)/1.02 var(--g-display); color: #3a2a45; }
.bp-sub { margin: 0 auto 24px; max-width: 320px; font: 500 1.35rem/1.25 var(--g-script); color: var(--g-muted); }

/* ---------- pop the balloons ---------- */
.bp-pop-sec { padding: 80px 12px 70px; text-align: center; background: linear-gradient(180deg, #fff6f1, #ffeef4); overflow: hidden; }
.bp-balloons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; height: 340px; margin-bottom: 20px; }
.bp-slot { position: relative; display: grid; justify-items: center; align-content: start; padding-top: calc(var(--i) % 2 * 34px); }
.bp-balloon { position: relative; z-index: 2; width: 104px; height: 126px; padding: 0; border: 0; border-radius: 50% 50% 48% 52% / 58% 58% 42% 42%; background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.85) 0 8%, var(--c) 30%, color-mix(in srgb, var(--c) 70%, #3a2a45) 100%); box-shadow: inset -8px -10px 18px rgba(0, 0, 0, 0.12); cursor: pointer; }
.bp-balloon span { font: 700 1.5rem/1 var(--g-script); color: #3a2a45; }
.bp-knot { position: absolute; left: 50%; bottom: -8px; width: 14px; height: 12px; margin-left: -7px; background: color-mix(in srgb, var(--c) 75%, #3a2a45); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.bp-string { width: 20px; height: 120px; margin-top: 2px; fill: none; stroke: #b9a8c6; stroke-width: 1.5; }
.bp-card { position: absolute; z-index: 1; top: calc(var(--i) % 2 * 34px + 10px); left: 2px; right: 2px; display: grid; gap: 4px; padding: 16px 8px; border-radius: 16px; background: #fff; border: 3px dashed var(--c); opacity: 0; transform: scale(0.6); }
.bp-card span { font: 700 1.2rem/1 var(--g-script); color: color-mix(in srgb, var(--c) 60%, #3a2a45); }
.bp-card strong { font: 700 1.02rem/1.15 var(--g-display); color: #3a2a45; }
.bp-card em { font: 400 0.7rem/1.35 var(--g-body); font-style: normal; color: var(--g-muted); }
.bp-after .vx-unit { background: #fff; }
.bp .vx-countdown b { font-family: var(--g-display); color: var(--g-accent); }

/* ---------- board game path ---------- */
.bp-path-sec { padding: 80px 14px; text-align: center; background: #eef9f4 radial-gradient(circle, rgba(143, 214, 184, 0.35) 2px, transparent 2.5px) 0 0 / 22px 22px; }
.bp-board { position: relative; height: calc(var(--n) * 200px); max-width: 370px; margin: 0 auto; text-align: left; }
.bp-trail { position: absolute; left: 0; top: 0; width: 120px; height: 100%; overflow: visible; }
.bp-trail path { fill: none; stroke: #fff; stroke-width: 22; stroke-linecap: round; }
.bp-trail path + path { stroke: #ffe08a; }
.bp-token { position: absolute; left: 0; top: 0; z-index: 3; width: 74px; filter: drop-shadow(0 8px 8px rgba(58, 42, 69, 0.3)); }
.bp-stop { position: absolute; left: 0; right: 0; top: calc(var(--i) * 200px + 6px); display: flex; align-items: flex-start; }
.bp-dot { flex: 0 0 auto; display: grid; place-items: center; width: 48px; height: 48px; margin-left: 36px; border-radius: 50%; background: #fff; color: #3a2a45; font: 700 1.2rem var(--g-display); box-shadow: 0 0 0 5px #3a2a45; transition: 0.4s; }
.bp-stop.is-here .bp-dot { background: #ff8fb1; color: #fff; transform: scale(1.12); }
.bp-stop-card { margin: -6px 0 0 34px; padding: 14px 14px 12px; border-radius: 18px; background: #fff; box-shadow: 0 6px 0 #3a2a45; border: 3px solid #3a2a45; transform: rotate(-1.5deg); opacity: 0.45; transition: 0.5s; }
.bp-stop:nth-child(odd) .bp-stop-card { transform: rotate(1.5deg); }
.bp-stop.is-here .bp-stop-card, .bp-stop.is-done .bp-stop-card { opacity: 1; }
.bp-stop-card span { font: 700 0.62rem var(--g-label); letter-spacing: 0.14em; color: #e76f9a; }
.bp-stop-card strong { display: block; margin: 2px 0 4px; font: 700 1.2rem/1.1 var(--g-display); color: #3a2a45; }
.bp-stop-card em { font: 400 0.82rem/1.45 var(--g-body); font-style: normal; color: var(--g-muted); }

/* ---------- sticker book ---------- */
.bp-sticker-sec { padding: 80px 14px; text-align: center; background: linear-gradient(180deg, #f3eeff, #fff6f1); }
.bp-sheet { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 16px; max-width: 360px; margin: 0 auto; padding: 22px 16px; border-radius: 22px; background: #fff repeating-linear-gradient(45deg, rgba(201, 181, 255, 0.12) 0 10px, transparent 10px 20px); box-shadow: 0 20px 40px -26px rgba(58, 42, 69, 0.5); }
.bp-sticker { position: relative; aspect-ratio: 0.86; padding: 0; border: 0; background: none; cursor: pointer; perspective: 800px; transform: rotate(var(--r)); }
.bp-sticker-in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 0.9s cubic-bezier(.3, 1.4, .5, 1); }
.bp-sticker.is-peeled .bp-sticker-in { transform: rotateY(180deg) translateZ(20px); }
.bp-sticker-front, .bp-sticker-back { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 22px; }
.bp-sticker-front { padding: 7px; background: #fff; box-shadow: 0 6px 14px rgba(58, 42, 69, 0.25); overflow: hidden; }
.bp-sticker-front::after { content: ''; position: absolute; right: 0; bottom: 0; width: 34px; height: 34px; background: linear-gradient(135deg, transparent 50%, #f1ecf6 50%); border-radius: 0 0 22px 0; box-shadow: -2px -2px 4px rgba(0, 0, 0, 0.12); }
.bp-sticker-front img { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; }
.bp-sticker-front b { position: absolute; left: 10px; bottom: 12px; padding: 2px 10px; border-radius: 12px; background: #fff; font: 700 1.2rem var(--g-script); color: #e76f9a; transform: rotate(-4deg); }
.bp-sticker-back { transform: rotateY(180deg); display: grid; place-items: center; padding: 14px; background: #ffe08a; color: #3a2a45; font: 700 1.25rem/1.2 var(--g-script); box-shadow: 0 6px 14px rgba(58, 42, 69, 0.25); }

/* ---------- gumball machine ---------- */
.bp-gum-sec { padding: 80px 14px; text-align: center; background: linear-gradient(180deg, #fff6f1, #fff1d6); }
.bp-machine { position: relative; width: 220px; margin: 0 auto 26px; }
.bp-globe { position: relative; z-index: 2; width: 220px; height: 220px; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.9) 0 10%, rgba(255, 255, 255, 0.25) 25%, rgba(200, 230, 255, 0.2) 60%); box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.8), inset -10px -14px 30px rgba(0, 0, 0, 0.08), 0 0 0 6px #e76f9a; }
.bp-globe i { position: absolute; left: var(--x); top: var(--y); width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #fff 0 12%, var(--c) 40%); }
.bp-base { position: relative; z-index: 1; width: 170px; height: 130px; margin: -14px auto 0; border-radius: 14px 14px 26px 26px; background: linear-gradient(#e76f9a, #c94f7c); box-shadow: inset 0 -10px 0 rgba(0, 0, 0, 0.12); }
.bp-crank { position: absolute; left: 50%; top: 26px; width: 64px; height: 64px; margin-left: -32px; padding: 0; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 4px 0 #a8406a; cursor: pointer; }
.bp-crank i { position: absolute; left: 50%; top: 8px; bottom: 8px; width: 14px; margin-left: -7px; border-radius: 8px; background: #3a2a45; }
.bp-chute { position: absolute; left: 50%; bottom: 10px; width: 46px; height: 26px; margin-left: -23px; border-radius: 6px 6px 14px 14px; background: #3a2a45; }
.bp-gumball { position: absolute; z-index: 3; left: 50%; bottom: 14px; width: 32px; height: 32px; margin-left: -16px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #fff 0 12%, #ff8fb1 40%); opacity: 0; }
.bp-tip { min-height: 150px; max-width: 340px; margin: 0 auto; }
.bp-tip-card { display: grid; justify-items: center; gap: 4px; padding: 18px; border-radius: 22px; background: #fff; border: 4px solid var(--c); box-shadow: 0 8px 0 var(--c); }
.bp-tip-card img { width: 70px; }
.bp-tip-card strong { font: 700 1.3rem var(--g-display); color: #3a2a45; }
.bp-tip-card p { margin: 0; font: 400 0.92rem/1.5 var(--g-body); color: var(--g-muted); }

/* ---------- treasure map ---------- */
.bp-map-sec { padding: 80px 16px; text-align: center; background: #fff6f1; }
.bp-treasure { max-width: 360px; margin: 0 auto 20px; padding: 16px 14px 18px; border-radius: 10px; background: #f6e3b8; box-shadow: inset 0 0 40px rgba(150, 100, 40, 0.35), 0 16px 30px -18px rgba(58, 42, 69, 0.6); transform: rotate(-1.5deg); }
.bp-treasure svg { display: block; width: 100%; }
.bp-coast { fill: #9fd3e8; opacity: 0.6; }
.bp-house path { fill: #ff8fb1; stroke: #3a2a45; stroke-width: 2; }
.bp-house rect { fill: #3a2a45; }
.bp-route { fill: none; stroke: #3a2a45; stroke-width: 3; stroke-dasharray: 8 7; stroke-linecap: round; }
.bp-x path { stroke: #e04848; stroke-width: 6; stroke-linecap: round; }
.bp-treasure text { font: 700 18px var(--g-script); fill: #3a2a45; }
.bp-treasure-name { margin: 6px 0 2px; font: 700 1.3rem var(--g-display); color: #3a2a45; }
.bp-treasure-addr { margin: 0; font: 400 0.82rem var(--g-body); color: #6e5a3a; }

/* ---------- rsvp ---------- */
.bp-rsvp-sec { position: relative; padding: 80px 14px; background: linear-gradient(180deg, #fff6d9, #ffe3ec); overflow: hidden; }
.bp-booth { max-width: 400px; margin: 0 auto; padding: 28px 20px 26px; border-radius: 26px; background: #fff; border: 4px solid #3a2a45; box-shadow: 0 10px 0 #3a2a45; text-align: left; }
.bp-booth .bp-k, .bp-booth .bp-h2, .bp-booth .bp-sub { display: block; text-align: center; }
.bp-booth .bp-k { width: max-content; margin: 0 auto 10px; }
.bp-stomp { position: fixed; left: 0; bottom: 70px; z-index: 60; display: flex; align-items: flex-start; gap: 4px; pointer-events: none; visibility: hidden; }
.bp-stomp img { width: 120px; }
.bp-stomp span { padding: 6px 12px; border-radius: 16px; background: #fff; border: 3px solid #3a2a45; font: 700 1.4rem var(--g-script); color: #3a2a45; }

/* ---------- party horn finale ---------- */
.bp-horn-sec { position: relative; padding: 100px 20px 130px; text-align: center; background: linear-gradient(180deg, #ffe3ec, #e6dcff 60%, #d7f2e6); overflow: hidden; }
.bp-love { margin: 10px 0 30px; font: 700 clamp(2.6rem, 12vw, 3.4rem)/1 var(--g-display); color: #3a2a45; }
.bp-love em { font: 700 1.25em var(--g-script); color: #e76f9a; }
.bp-horn { position: relative; display: flex; align-items: center; height: 70px; margin: 0 auto 10px; padding: 0; border: 0; background: none; cursor: pointer; touch-action: none; -webkit-user-select: none; user-select: none; }
.bp-horn-cone { width: 70px; height: 50px; background: repeating-linear-gradient(90deg, #ff8fb1 0 10px, #ffe08a 10px 20px); clip-path: polygon(0 0, 100% 35%, 100% 65%, 0 100%); }
.bp-horn-coil { width: 26px; height: 18px; border-radius: 0 10px 10px 0; background: repeating-linear-gradient(90deg, #7cc4ff 0 8px, #fff 8px 12px, #8fd6b8 12px 20px); box-shadow: 0 2px 0 rgba(58, 42, 69, 0.2); }
.bp-hosts { margin: 20px 0 30px; font: 700 1.6rem var(--g-script); color: #3a2a45; }

/* ---------- Readable colours: every line passes WCAG AA contrast ---------- */
.gr.bp { --vx-accent: #c2416f; }
.bp .vx-countdown b, .bp-stop-card span { color: #c2416f; }
/* ---------- end readable colours ---------- */

/* ---------- Readable for every guest: labels from 13.5px, text from 15px ---------- */
:root .bp-card > em { font-size: 0.844rem; }
:root .bp-k { font-size: 0.844rem; letter-spacing: 0.14em; }
:root .bp-stop-card > em { font-size: 0.938rem; }
:root .bp-stop-card > span { font-size: 0.844rem; }
:root .bp-tip-card > p { font-size: 0.938rem; }
:root .bp-treasure-addr { font-size: 0.938rem; }
:root .gr-stage-bottom > small { font-size: 0.938rem; }
/* ---------- end readable ---------- */