/* =====================================================================================
   THE KIDS' GIRLS' PARTY DESIGN (theme envelope_style "party"), loaded only for it (views/guest.ejs).
   Ported 24 Sep 2026 from the test page Gary approved (previews/kids-party, tap2open-kids/hall/site/kids-party):
   the film at the top (views/partials/party-stage.ejs, public/js/kids-party-stage.js), the page's own card rising out
   of the party bag with this child's details, the top block (party bag, age, name, details), then the ordinary scroll
   sections restyled to that page's light blush look with one real object per section (public/js/kids-party-decor.js).
   A light design (theme.tone "light"): on Android the app's own Samsung layer paints the page as a picture and fills
   the sections' writing with ink pictures; the few coloured things only this design draws get the same treatment at
   the bottom of this file.
   ===================================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Dancing+Script:wght@700&family=Nunito:wght@400;600;700;800&display=swap');

.party-page { --p-bg: #F2D9DB; --p-panel: #fff6f7; --p-pink: #C9427F; --p-gold: #A8772A; --p-ink: #4A2233; --p-muted: #86606f;
  --p-line: rgba(201,66,127,.22); --p-head: "Fredoka", "Segoe UI", system-ui, sans-serif; --p-script: "Dancing Script", cursive;
  --p-body: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif; }
.party-page [hidden] { display: none !important; }

/* ---- locking: until the film has played the page is just the stage (kids-party-stage.js .party-sealed) ---- */
.party-page.gf-locked { position: static; height: auto; overflow: visible; }
.party-page.gf-locked .stage-scroll { pointer-events: auto; }
body.party-sealed { overflow: hidden; overscroll-behavior: none; }
.party-sealed .sc-flow, .party-sealed .sc-music, .party-sealed .party-top, .party-sealed .party-glowbg { display: none !important; }
/* the card and the top block carry the name, age, date and place */
.party-page .sc-hero { display: none; }
html:has(body.party-page), body.party-page { overflow-x: hidden; background: var(--p-bg); }
.party-page #card-stage.stage-scroll { background: var(--p-bg); }
.party-page .sc-flow { position: relative; overflow-x: clip; }

/* ---- the stage ---- */
.party-scene { position: relative; display: block; width: 100%; height: 100vh; height: 100svh; margin: 0 auto; overflow: hidden;
  background: var(--p-bg); touch-action: manipulation; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none;
  -webkit-user-select: none; user-select: none; font-family: var(--p-body); color: var(--p-ink); }
.party-scene video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--p-bg); z-index: 1; }
/* waiting on the bag: a steady sprinkle of confetti and a breathing glow, drawn by the page (no looping video) */
.party-sprinkle { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity .35s ease; }
.party-sprinkle.on { opacity: 1; }

.party-open { position: absolute; z-index: 20; inset: 0; display: grid; place-items: end center; padding: 0 16px calc(64px + env(safe-area-inset-bottom));
  background: var(--p-bg) center / cover no-repeat; cursor: pointer; border: 0; color: #FFF3F8; font: inherit; margin: 0; width: 100%; }
.party-open::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26,10,18,.1) 40%, rgba(26,10,18,.85)); }
.party-card { position: relative; text-align: center; max-width: 420px; display: block; }
.party-kicker { display: block; color: #F4C96B; letter-spacing: .14em; font: 600 18px var(--p-head); text-transform: uppercase; margin: 0 0 10px; }
.party-go { display: inline-block; padding: 16px 28px; border-radius: 999px; background: #FF9CCB; color: #4a0f2c;
  font: 700 22px var(--p-head); letter-spacing: .03em; }
.party-open.ready .party-go { animation: party-pulse 1.8s infinite; }
.party-hint { display: block; margin: 12px 0 0; font-size: 14px; opacity: .85; }
@keyframes party-pulse { 0% { box-shadow: 0 0 0 0 rgba(255,156,203,.6); } 70% { box-shadow: 0 0 0 18px rgba(255,156,203,0); } 100% { box-shadow: 0 0 0 0 rgba(255,156,203,0); } }

.party-bar { position: absolute; z-index: 15; top: calc(12px + env(safe-area-inset-top)); right: 12px; display: flex; gap: 8px; }
/* once the page is open the app's Music button takes the top right: Replay + sound move to the left (like the dino's) */
body:not(.party-sealed) .party-bar { left: 12px; right: auto; }
.party-chip { border: 1px solid rgba(255,243,248,.4); background: rgba(26,10,18,.55); color: #FFF3F8; border-radius: 999px;
  padding: 8px 14px; font: 600 14px var(--p-body); cursor: pointer; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.party-chip.party-icon { width: 40px; height: 40px; padding: 0; font-size: 18px; line-height: 1; }
.edit-mode .party-bar, .edit-mode .party-open, .edit-mode .party-bag, .edit-mode .party-scroll { display: none !important; }

/* the pause on the party bag: the whole stage is the button, the ring shows where */
.party-bag { position: absolute; inset: 0; z-index: 3; border: 0; padding: 0; margin: 0; background: transparent; cursor: pointer; width: 100%; }
.party-ring { position: absolute; transform: translate(-50%, -50%); border-radius: 44%; pointer-events: none;
  box-shadow: 0 0 0 2px rgba(244,201,107,.9), 0 0 26px 6px rgba(255,156,203,.5), inset 0 0 22px rgba(244,201,107,.35);
  animation: party-ring 1.6s ease-in-out infinite; }
@keyframes party-ring { 0%, 100% { opacity: .55; transform: translate(-50%, -50%) scale(.96); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); } }
.party-bag-label { position: absolute; transform: translateX(-50%); pointer-events: none; white-space: nowrap; padding: 10px 20px;
  border-radius: 999px; background: var(--p-gold); color: #3d2400; font: 700 20px var(--p-head); letter-spacing: .04em; text-transform: uppercase;
  box-shadow: 0 6px 24px rgba(0,0,0,.45); animation: party-bob 1.6s ease-in-out infinite; }
@keyframes party-bob { 0%, 100% { margin-top: 0; } 50% { margin-top: -6px; } }
.party-spark { position: absolute; width: 10px; height: 10px; pointer-events: none; transform: translate(-50%, -50%);
  background: radial-gradient(circle, #fff 0 20%, rgba(255,215,140,.9) 35%, rgba(244,201,107,0) 70%); animation: party-twinkle 1.4s ease-in-out infinite; }
@keyframes party-twinkle { 0%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.3); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); } }

/* the reveal (Gary 23/9: the video's card "changes shape and size"): the film only bursts the bag; the page's OWN card
   (one fixed shape) rises out of the bag with the details already on it, hovers, then comes forward */
.party-rv { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.party-rv-dim { position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse 80% 60% at 50% 45%, rgba(26,10,18,.2), rgba(26,10,18,.78)); }
.party-rv-clip { position: absolute; left: 0; top: 0; width: 100%; overflow: hidden; }
.party-rv-card { position: absolute; left: 0; top: 0; background: #f6eee4; border-radius: 1.6%; transform-origin: 50% 50%;
  box-shadow: 0 0 34px 8px rgba(255,214,150,.5), 0 16px 34px rgba(0,0,0,.35); will-change: transform; }
.party-card-img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; display: block; }
/* Gary 23/9: "all the text seems quite squashed... separate it out" -> the groups are spread over the whole card */
.party-card-text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: space-evenly;
  text-align: center; color: #5a2a3e; padding: 13% 9% 12%; }
.party-card-text p { margin: 0; }
.party-card-text .ct-kicker { font: 700 calc(var(--u) * 4.4) var(--p-head); letter-spacing: .2em; text-transform: uppercase; color: #b0708e; }
.party-card-text .ct-title { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 2.2); }
.party-card-text .ct-name { font: 700 calc(var(--u) * 17 * var(--nk, 1)) / 1 var(--p-script); color: #c2457d; white-space: nowrap; }   /* a long name shrinks (--nk, party-stage.ejs) */
.party-card-text .ct-what { font: 600 calc(var(--u) * 7.6) / 1.1 var(--p-head); color: #5a2a3e; }
.party-card-text .ct-age { font: 700 calc(var(--u) * 5.4) var(--p-head); color: #b0708e; letter-spacing: .06em; }
.party-card-text .ct-age b { display: inline-grid; place-items: center; width: calc(var(--u) * 12.5); height: calc(var(--u) * 12.5); margin-left: calc(var(--u) * 1.6);
  border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffd9ea, #ff8fc2 60%, #e0679f); color: #fff;
  font: 700 calc(var(--u) * 7.6) var(--p-head); vertical-align: middle; box-shadow: 0 2px 8px rgba(194,69,125,.35); }
.party-card-text .ct-line { width: 38%; height: 2px; background: linear-gradient(90deg, transparent, #d9ad55, transparent); }
.party-card-text .ct-when { font: 700 calc(var(--u) * 5.2) / 1.6 var(--p-body); color: #5a2a3e; }
.party-card-text .ct-where { font: 600 calc(var(--u) * 5) / 1.4 var(--p-body); color: #7b4a5f; }

.party-scroll { position: absolute; z-index: 5; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px; color: #FFF3F8; text-decoration: none; text-align: center;
  font: 600 17px var(--p-head); letter-spacing: .06em; text-shadow: 0 2px 10px rgba(0,0,0,.9); white-space: nowrap; animation: party-fadein 1s ease both; }
.party-arrow { width: 34px; height: 34px; border-radius: 50%; border: 2px solid #FF9CCB; display: grid; place-items: center; animation: party-nudge 1.4s ease-in-out infinite;
  background: rgba(26,10,18,.45); }
.party-arrow::before { content: ""; width: 10px; height: 10px; border: solid #FF9CCB; border-width: 0 3px 3px 0; transform: translateY(-2px) rotate(45deg); }
@keyframes party-nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@keyframes party-fadein { from { opacity: 0; } to { opacity: 1; } }

/* ---- the top block: the party bag, the age, the name, the details ---- */
.party-top { position: relative; z-index: 1; max-width: 560px; margin: 0 auto; padding: 56px 20px 30px; text-align: center; font-family: var(--p-body); color: var(--p-ink); }
.party-age-line { margin: 0; color: var(--p-ink); font: 600 22px var(--p-head); letter-spacing: .12em; text-transform: uppercase; }
.party-age { margin: -2px 0 2px; font: 700 150px/0.95 var(--p-head); color: var(--p-pink); text-shadow: 0 0 26px rgba(255,255,255,.7), 0 5px 0 #eaa6c6; }
.party-kid-name { margin: 0 0 10px; font: 700 calc(64px * var(--nk, 1))/1 var(--p-script); color: var(--p-gold); text-shadow: 0 2px 0 rgba(255,255,255,.7); overflow-wrap: anywhere; }
.party-title { margin: 0 0 16px; color: var(--p-pink); font: 700 40px/1.08 var(--p-head); letter-spacing: .005em; }
.party-details { display: grid; gap: 16px; margin: 22px 0 26px; }
.party-details div { padding: 14px 12px; border: 1px solid var(--p-line); border-radius: 16px; background: rgba(255,255,255,.72); box-shadow: 0 4px 14px rgba(201,66,127,.08); }
.party-details dt { color: var(--p-pink); font: 600 14px var(--p-head); letter-spacing: .2em; text-transform: uppercase; }
.party-details dd { margin: 4px 0 0; font-weight: 700; font-size: 18px; }
.party-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 8px 0 6px; }
.party-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 22px; border-radius: 999px;
  border: 2px solid var(--p-pink); background: var(--p-pink); color: #fff; font: 700 18px var(--p-head); letter-spacing: .03em;
  text-decoration: none; cursor: pointer; }
.party-btn.party-ghost { background: transparent; color: var(--p-pink); }

/* ---- the real objects: shot on the page's blush, faded at the edges, they light up as they arrive ---- */
.party-relic-wrap { position: relative; width: min(78vw, 340px); aspect-ratio: 1; margin: 0 auto 10px; }
.party-toy { cursor: pointer; }
.party-relic { display: block; width: 100%; height: 100%; object-fit: cover;
  -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent 100%); mask-image: radial-gradient(closest-side, #000 72%, transparent 100%);
  opacity: .3; filter: saturate(.4); transform: scale(.93); transition: opacity 1.4s ease, filter 1.6s ease, transform 1.6s cubic-bezier(.2,.8,.2,1); }
.lit > .party-relic, .party-relic.lit { opacity: 1; filter: none; transform: none; }
.party-tap-hint { margin: -4px 0 12px; color: var(--p-muted); font-style: italic; font-size: 14px; }
.party-relic-wrap .party-glow { position: absolute; left: 50%; top: 30%; width: 40%; height: 26%; transform: translateX(-50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,210,150,.55), rgba(255,170,90,0)); mix-blend-mode: screen; opacity: 0; }
.party-bagobj.lit .party-glow { animation: party-breathe 3.2s ease-in-out 1.2s infinite; }
@keyframes party-breathe { 0%, 100% { opacity: .15; } 50% { opacity: .8; } }
.party-wobble { animation: party-wobble .7s ease-in-out; }
@keyframes party-wobble { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-5deg); } 40% { transform: rotate(4deg); } 60% { transform: rotate(-3deg); } 80% { transform: rotate(2deg); } }
.party-hop { animation: party-hop .6s cubic-bezier(.3,1.6,.5,1); }
@keyframes party-hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-18px) rotate(-4deg); } }
.party-float { animation: party-floaty 1.2s ease-in-out; }
@keyframes party-floaty { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-26px) rotate(3deg); } 60% { transform: translateY(-8px) rotate(-2deg); } }
.party-relic-wrap .party-sheen { position: absolute; inset: 18%; border-radius: 50%; pointer-events: none; mix-blend-mode: screen; opacity: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,240,220,.75) 48%, transparent 66%); background-size: 260% 100%; }
.party-palette.shine .party-sheen { animation: party-sheen 1.3s ease; }
@keyframes party-sheen { 0% { opacity: 1; background-position: 120% 0; } 100% { opacity: 1; background-position: -60% 0; } }
.party-fairy { position: absolute; width: var(--sz, 8px); height: var(--sz, 8px); border-radius: 50%; pointer-events: none; left: 50%; top: 45%;
  background: radial-gradient(circle, #fff 0 22%, #f4c96b 45%, rgba(233,120,170,0) 72%); animation: party-fairy 1.5s cubic-bezier(.2,.7,.4,1) forwards; }
@keyframes party-fairy { from { transform: translate(0, 0) scale(1); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) scale(.4); opacity: 0; } }
/* the cake: candles to match the age, flames drawn live; tap them out */
.party-cake-wrap { position: relative; width: min(92vw, 420px); margin: 0 auto 4px; }
canvas.party-cake { display: block; width: 100%; height: auto; cursor: pointer; touch-action: manipulation;
  -webkit-mask-image: radial-gradient(closest-side, #000 76%, transparent 100%); mask-image: radial-gradient(closest-side, #000 76%, transparent 100%); }
.party-cake-hint { margin: -10px 0 18px; color: var(--p-gold); font: 600 20px var(--p-head); letter-spacing: .04em; min-height: 1.4em; }
/* pop the bubbles: they drift up over the bubble wand; tap one and it pops */
.party-bubbles { margin: 40px 0 0; text-align: center; }
.party-bubbles-title { margin: 0 0 12px; color: var(--p-pink); font: 700 36px/1.08 var(--p-head); }
.party-bubble-box { position: relative; width: min(92vw, 440px); height: 360px; margin: 0 auto 6px; }
.party-bubble-box .party-relic-wrap { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: min(62vw, 260px); margin: 0; }
.party-bubble-box canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; touch-action: manipulation; }
.party-popped { min-height: 1.4em; color: var(--p-gold); font: 600 20px var(--p-head); margin: 6px 0 14px; }
#party-confetti { position: fixed; inset: 0; z-index: 30; width: 100%; height: 100%; pointer-events: none; }
/* little windows into the party between some sections: real footage from the film itself, looping, faded into the page */
.party-sceneband { position: relative; height: 230px; max-width: 680px; margin: 44px auto 6px; overflow: hidden; pointer-events: none;
  -webkit-mask-image: radial-gradient(120% 130% at 50% 50%, #000 42%, transparent 82%); mask-image: radial-gradient(120% 130% at 50% 50%, #000 42%, transparent 82%); }
.party-sceneband video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.95); }
.party-sceneband::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 -28px 30px -18px rgba(242,217,219,.95), inset 0 28px 30px -18px rgba(242,217,219,.95); }
.party-glowbg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.party-glowbg i { position: absolute; width: 140vmax; height: 60vmax; border-radius: 50%; filter: blur(60px); opacity: .5;
  background: radial-gradient(closest-side, rgba(255,255,255,.55), rgba(255,255,255,0)); animation: party-drift 38s ease-in-out infinite alternate; }
.party-glowbg i:nth-child(1) { left: -60vmax; top: 10%; }
.party-glowbg i:nth-child(2) { right: -70vmax; top: 45%; animation-duration: 46s; animation-delay: -12s; background: radial-gradient(closest-side, rgba(214,180,255,.22), rgba(214,180,255,0)); }
.party-glowbg i:nth-child(3) { left: -40vmax; top: 75%; animation-duration: 54s; animation-delay: -30s; background: radial-gradient(closest-side, rgba(244,201,107,.22), rgba(244,201,107,0)); }
@keyframes party-drift { from { transform: translateX(-12vmax); } to { transform: translateX(22vmax); } }

/* ---- the page below: the test page's look ---- */
.party-page .sc-section { position: relative; max-width: 560px; padding: 44px 20px 34px; border-bottom: 0; text-align: center; font-family: var(--p-body); color: var(--p-ink); }
.party-page .sc-flow > .sc-section, .party-page .sc-flow > .sc-footer { position: relative; z-index: 1; }
.party-page .sc-h2, .party-page .sc-script { margin: 0 0 16px; color: var(--p-pink); font: 700 40px/1.08 var(--p-head); letter-spacing: .005em; text-transform: none; }
.party-page .sc-rule, .party-page .sc-rule-sm { width: 72px; height: 3px; margin: 0 auto 20px; border: 0; border-radius: 3px; background: linear-gradient(90deg, transparent, var(--p-pink), transparent); }
.party-page .sc-lead { font-size: 17px; line-height: 1.6; color: var(--p-ink); }
.party-page .sc-signature { font: 600 24px/1.3 var(--p-head); color: var(--p-ink); margin-top: 12px; }
.party-eyebrow { margin: 0 0 6px; color: var(--p-gold); font: 600 16px var(--p-head); letter-spacing: .2em; text-transform: uppercase; }
.party-page .sc-detail { display: block; padding: 14px 12px; margin: 0 0 14px; border: 1px solid var(--p-line); border-radius: 16px; background: rgba(255,255,255,.72); }
.party-page .sc-label { display: block; margin: 0 0 4px; color: var(--p-pink); font: 600 14px var(--p-head); letter-spacing: .2em; text-transform: uppercase; }
.party-page .sc-value { font-weight: 700; font-size: 18px; line-height: 1.45; color: var(--p-ink); }
.party-page .countdown-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 14px 0 12px; padding: 0; background: none; border: 0; }
.party-page .countdown-item { padding: 12px 0 8px; border: 1px solid var(--p-line); border-radius: 16px; background: rgba(255,255,255,.72); }
.party-page .countdown-val { display: block; font: 700 40px/1 var(--p-head); color: var(--p-pink); font-variant-numeric: tabular-nums; }
.party-page .countdown-lbl { color: var(--p-muted); font: 600 12px var(--p-head); letter-spacing: .16em; text-transform: uppercase; }
.party-page .sc-timeline { list-style: none; margin: 16px 0 12px; padding: 0; text-align: left; }
.party-page .sc-timeline li { display: grid; grid-template-columns: 86px 1fr; gap: 12px; padding: 11px 4px; border-bottom: 1px dashed var(--p-line); }
.party-page .sc-timeline .sc-dot, .party-page .sc-timeline .sc-ico { display: none; }
.party-page .sc-time { color: var(--p-pink); font: 600 18px var(--p-head); }
.party-page .sc-what { font-size: 17px; line-height: 1.45; color: var(--p-ink); }
.party-page .sc-map { margin: 18px 0 10px; padding: 8px; border: 0; border-radius: 18px; background: linear-gradient(145deg, #f4c96b, #b98a3a 55%, #f4c96b);
  box-shadow: 0 10px 30px rgba(120,60,80,.3); }
.party-page .sc-map iframe { display: block; width: 100%; height: 300px; border: 0; border-radius: 12px; background: #e8e0d8; }
.party-page .sc-btn { border-radius: 999px; min-height: 48px; padding: 12px 22px; font: 700 17px var(--p-head); letter-spacing: .03em; }
/* Android (data-ss): the app draws these as pictures (Samsung's dark mode can't dim them), so only elsewhere */
html:not([data-ss]) .party-page .sc-btn-solid { background: var(--p-pink); border: 2px solid var(--p-pink); color: #fff; }
.party-page .sc-btn-ghost { background: transparent; border: 2px solid var(--p-pink); color: var(--p-pink); }
.party-page .sc-alt-links, .party-page .sc-alt-links a { color: var(--p-muted); }
.party-page .sc-form { text-align: left; }
.party-page .sc-form label, .party-page .sc-legend { display: block; margin: 16px 0 6px; color: var(--p-pink); font: 600 14px var(--p-head); letter-spacing: .14em; text-transform: uppercase; }
.party-page .sc-form input[type="text"], .party-page .sc-form input[type="tel"], .party-page .sc-form input[type="email"], .party-page .sc-form select, .party-page .sc-form textarea {
  width: 100%; padding: 13px 14px; border-radius: 12px; border: 1px solid rgba(201,66,127,.35); background: #fff; color: var(--p-ink); font: 600 17px var(--p-body); }
.party-page .sc-choice span { display: flex; align-items: center; justify-content: center; min-height: 54px; padding: 10px; border-radius: 14px; text-align: center;
  border: 2px solid rgba(201,66,127,.45); color: var(--p-ink); font: 700 17px var(--p-body); letter-spacing: 0; text-transform: none; box-shadow: none; }
html:not([data-ss]) .party-page .sc-choice span { background: rgba(255,255,255,.6); }
html:not([data-ss]) .party-page .sc-choice input:checked + span { background: var(--p-pink); border-color: var(--p-pink); color: #fff; }
.party-page .sc-thanks { border: 2px solid var(--p-pink); border-radius: 16px; background: rgba(255,255,255,.75); padding: 16px; text-align: left; }
.party-page .sc-footer { position: relative; padding: 50px 24px 70px; text-align: center; }
.party-page .sc-footer .sc-script { font: 700 40px/1.08 var(--p-head); color: var(--p-pink); }
.party-page .party-again { margin-top: 18px; }
/* the reply's "on its way" message: the app's own is pale green on a dark page (style.css .rsvp-alert), unreadable on blush */
.party-page .rsvp-alert { padding: 14px 16px; border-radius: 16px; font: 700 17px/1.45 var(--p-body); text-align: center; }
.party-page .rsvp-alert.success { background: rgba(255,255,255,.8); border: 2px solid var(--p-pink); color: var(--p-ink); }
.party-page .rsvp-alert.error { background: #fff; border: 2px solid #b3261e; color: #b3261e; }

@media (min-width: 700px) { .party-page .sc-h2, .party-page .sc-script, .party-title { font-size: 48px; } .party-top, .party-page .sc-section { padding-top: 64px; } }
@media (prefers-reduced-motion: reduce) {
  .party-glowbg i, .party-open.ready .party-go, .party-ring, .party-bag-label, .party-spark, .party-arrow { animation: none !important; }
}

/* ---- Samsung Internet (html[data-ss], Android): its dark mode FLIPS colours a page draws (blush -> maroon, dark writing
   -> light) but only dims pictures, and leaves canvas and video alone. The app paints the page itself as a picture and
   fills the sections' writing with ink pictures (scroll.css, theme.tone "light"); here the same for what only this design
   draws: writing filled with ink pictures (themes/kids-party/assets/party/ss/, made for the test page Gary checked on
   his phone 23/9), outlines as picture rings (a mask is never recoloured), buttons with a picture inside them. ---- */
[data-ss] .party-scene, [data-ss] .party-scene video { background: transparent; }
[data-ss] .party-glowbg, [data-ss] .party-sceneband::after { display: none; }
[data-ss] :is(.party-details dd, .party-card-text .ct-what, .party-card-text .ct-when, .party-age-line),
[data-ss] :is(.party-title, .party-details dt, .party-age, .party-card-text .ct-name, .party-card-text .ct-age b, .party-bubbles-title, .party-btn.party-ghost),
[data-ss] :is(.party-eyebrow, .party-kid-name, .party-cake-hint, .party-popped),
[data-ss] :is(.party-tap-hint, .party-card-text .ct-kicker, .party-card-text .ct-age, .party-card-text .ct-where) {
  background: url('/themes/kids-party/assets/party/ss/ink-plum.png') 0 0 / 100% 100%; -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent; text-shadow: none; }
[data-ss] :is(.party-title, .party-details dt, .party-age, .party-card-text .ct-age b, .party-bubbles-title, .party-btn.party-ghost) { background-image: url('/themes/kids-party/assets/party/ss/ink-pink.png'); }
[data-ss] :is(.party-eyebrow, .party-kid-name, .party-cake-hint, .party-popped) { background-image: url('/themes/kids-party/assets/party/ss/ink-gold.png'); }
[data-ss] :is(.party-tap-hint, .party-card-text .ct-where) { background-image: url('/themes/kids-party/assets/party/ss/ink-muted.png'); }
[data-ss] :is(.party-card-text .ct-kicker, .party-card-text .ct-age) { background-image: url('/themes/kids-party/assets/party/ss/ink-rose.png'); }
[data-ss] .party-card-text .ct-name { background-image: url('/themes/kids-party/assets/party/ss/ink-berry.png'); }
[data-ss] .party-card-text .ct-age b { width: auto; height: auto; margin-left: calc(var(--u) * 1.4); box-shadow: none; font-size: calc(var(--u) * 8.5); }
[data-ss] .party-page .rsvp-alert.success { background: transparent; }
[data-ss] .party-page .rsvp-alert.success { color: transparent; -webkit-text-fill-color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: url('/themes/kids-party/assets/party/ss/ink-plum.png'); background-size: 100% 100%; border-color: transparent; }
[data-ss] :is(.party-details div, .party-btn.party-ghost) { position: relative; background-color: transparent; border-color: transparent; box-shadow: none; }
[data-ss] :is(.party-details div, .party-btn.party-ghost)::before { content: ""; position: absolute; inset: -2px; border-radius: inherit;
  padding: 2px; background: url('/themes/kids-party/assets/party/ss/fill-pink.png') 0 0 / 100% 100%; pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
[data-ss] .party-card-text .ct-line { background: url('/themes/kids-party/assets/party/ss/fill-pink.png') 0 0 / 100% 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); }
[data-ss] .party-page .sc-map { background: url('/themes/kids-party/assets/party/ss/fill-gold.png') 0 0 / 100% 100%; box-shadow: none; }
/* the film's overlays */
[data-ss] .party-ring { box-shadow: none; background: url('/themes/kids-party/assets/party/ss/ring.png') center / 100% 100% no-repeat; }
[data-ss] :is(.party-spark, .party-fairy) { background: url('/themes/kids-party/assets/party/ss/sparkle.png') center / 100% 100% no-repeat; }
/* the solid buttons: their colour is a picture inside them, their words an ink picture (kids-party-stage.js ssButton) */
.party-btn, .party-go { position: relative; }
.party-btn, .party-go, .party-bag-label { isolation: isolate; }   /* the label stays position: absolute (placed over the bag) */
[data-ss] .party-btn:not(.party-ghost), [data-ss] .party-go, [data-ss] .party-bag-label { background: transparent; border-color: transparent; }
[data-ss] :is(.party-btn, .party-go, .party-bag-label) > .ss-fill { position: absolute; left: -1px; top: -1px; width: calc(100% + 2px); height: calc(100% + 2px);
  border-radius: inherit; object-fit: cover; z-index: -1; pointer-events: none; }
[data-ss] .party-ss-ink { background: url('/themes/kids-party/assets/ss-ink-button.jpg') center / cover; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
[data-ss] .party-ss-ink-dark { background: url('/themes/kids-party/assets/party/ss/ink-dark.png') 0 0 / 100% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
[data-ss] .ss-emoji { margin-left: .25em; }
/* the Tap-to-open cover's picture is a real picture (a canvas once ss-canvas.js swaps it) instead of a CSS background */
.party-open > .party-open-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; pointer-events: none; }
.party-open::before { z-index: 1; }
.party-open .party-card { z-index: 2; }