/* =====================================================================================
   THE KIDS' UNICORN DESIGN (theme envelope_style "unicorn"), loaded only for it (views/guest.ejs).
   Ported 29 Sep 2026 from the test page Gary approved (previews/kids-unicorn, tap2open-kids/unicorn/site/kids-unicorn),
   the same way as the girls' party (kids-party.css): the film at the top (views/partials/unicorn-stage.ejs,
   public/js/kids-unicorn-stage.js) with the invitation poster drawn on a canvas over the moving unicorn, the top block
   (horn headband, age, name, details), then the ordinary scroll sections restyled to the test page's light lilac-blush look
   with one real object per section (public/js/kids-unicorn-decor.js). Berry pink, lilac and soft gold.
   A light design (theme.tone "light"): on Android the app's Samsung layer paints the page as a picture and fills the
   sections' writing with ink pictures; what only this design draws gets the same treatment at the bottom of this file.
   ===================================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Pacifico&family=Nunito:wght@400;600;700;800&display=swap');

.unicorn-page { --u-bg: #F7EAF3; --u-panel: #fff7fb; --u-pink: #C9427F; --u-lilac: #8B6BE0; --u-gold: #A8772A; --u-ink: #4A2233; --u-muted: #86606f;
  --u-line: rgba(201,66,127,.22); --u-head: "Fredoka", "Segoe UI", system-ui, sans-serif; --u-script: "Pacifico", cursive;
  --u-body: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif; }
.unicorn-page [hidden] { display: none !important; }

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

/* ---- the stage: the film, the horn loop, the end loop, the poster over them ---- */
.unicorn-scene { position: relative; z-index: 2; display: block; width: 100%; height: 100vh; height: 100svh; margin: 0 auto; overflow: hidden;
  background: #2a1d3a; touch-action: manipulation; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none;
  -webkit-user-select: none; user-select: none; font-family: var(--u-body); color: var(--u-ink); }
.unicorn-scene video, .unicorn-scene .uc-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: transparent; }
.unicorn-scene .uc-film { z-index: 1; }
.unicorn-scene .uc-idle { z-index: 0; pointer-events: none; }
.unicorn-scene .uc-idle.on { z-index: 2; }
.unicorn-scene .uc-idle.out { z-index: 2; opacity: 0; transition: opacity .35s ease; }
.unicorn-scene .uc-endv { z-index: 0; pointer-events: none; }
.unicorn-scene .uc-endv.on { z-index: 2; }
/* the editor and ?stage=card: the film's last frame, the poster over it (and the loop moving in the editor) */
.unicorn-scene .uc-still { display: none; z-index: 1; pointer-events: none; }
.unicorn-scene.uc-still-mode .uc-still { display: block; }
.unicorn-scene.uc-still-mode .uc-film, .unicorn-scene.uc-still-mode .uc-idle { display: none; }

.uc-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: #2a1d3a; cursor: pointer; border: 0; color: #FFF3F8; font: inherit; margin: 0; width: 100%; overflow: hidden; }
.uc-open > .uc-open-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; pointer-events: none; }
.uc-open::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(40,16,48,.05) 40%, rgba(40,16,48,.8)); }
.uc-card { position: relative; z-index: 2; display: block; text-align: center; max-width: 420px; }
.uc-kicker { display: block; color: #FFE9A8; letter-spacing: .16em; font: 600 18px var(--u-head); text-transform: uppercase; margin: 0 0 10px;
  text-shadow: 0 2px 10px rgba(60,20,70,.7); }
.uc-go { position: relative; display: inline-block; padding: 16px 28px; border-radius: 999px; background: #FF9CCB; color: #4a0f2c;
  font: 700 22px var(--u-head); letter-spacing: .03em; }
.uc-open.ready .uc-go { animation: uc-pulse 1.8s infinite; }
.uc-hint { display: block; margin: 12px 0 0; font-size: 14px; opacity: .9; }
@keyframes uc-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); } }

.uc-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 party's) */
body:not(.unicorn-sealed) .uc-bar { left: 12px; right: auto; }
.uc-chip { border: 1px solid rgba(255,243,248,.45); background: rgba(40,16,48,.5); color: #FFF3F8; border-radius: 999px;
  padding: 8px 14px; font: 600 14px var(--u-body); cursor: pointer; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.uc-chip.uc-icon { width: 40px; height: 40px; padding: 0; font-size: 18px; line-height: 1; }
.edit-mode .uc-bar, .edit-mode .uc-open, .edit-mode .uc-horn, .edit-mode .uc-scroll { display: none !important; }

/* the pause on the horn: the whole stage is the button, the ring shows where */
.uc-horn { position: absolute; inset: 0; z-index: 3; border: 0; padding: 0; margin: 0; background: transparent; cursor: pointer; width: 100%; }
.uc-ring { position: absolute; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 3px rgba(255,214,120,.95), 0 0 26px 6px rgba(255,156,203,.55), inset 0 0 22px rgba(255,214,120,.35);
  animation: uc-ring 1.6s ease-in-out infinite; }
@keyframes uc-ring { 0%, 100% { opacity: .55; transform: translate(-50%, -50%) scale(.96); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.07); } }
.uc-horn-label { position: absolute; transform: translateX(-50%); pointer-events: none; white-space: nowrap; padding: 10px 22px; overflow: hidden;
  border-radius: 999px; background: #F4C96B; color: #3d2400; font: 700 20px var(--u-head); letter-spacing: .05em; text-transform: uppercase;
  box-shadow: 0 6px 24px rgba(0,0,0,.35); animation: uc-bob 1.6s ease-in-out infinite; }
@keyframes uc-bob { 0%, 100% { margin-top: 0; } 50% { margin-top: -6px; } }
.uc-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: uc-twinkle 1.4s ease-in-out infinite; }
@keyframes uc-twinkle { 0%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.3); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); } }

/* the invitation poster, drawn on a canvas laid over the film frame (kids-unicorn-stage.js; a canvas = Samsung-safe) */
.uc-poster { position: absolute; z-index: 4; left: 0; top: 0; width: 720px; height: 1280px; transform-origin: 0 0; pointer-events: none; visibility: hidden; }
.uc-poster.on { visibility: visible; }

.uc-scroll { position: absolute; z-index: 5; left: 50%; bottom: calc(10px + 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(--u-head); letter-spacing: .06em; text-shadow: 0 2px 10px rgba(40,10,50,.95); white-space: nowrap; animation: uc-fadein 1s ease both; }
.uc-arrow { width: 34px; height: 34px; border-radius: 50%; border: 2px solid #FF9CCB; display: grid; place-items: center; animation: uc-nudge 1.4s ease-in-out infinite;
  background: rgba(40,16,48,.45); }
.uc-arrow::before { content: ""; width: 10px; height: 10px; border: solid #FF9CCB; border-width: 0 3px 3px 0; transform: translateY(-2px) rotate(45deg); }
@keyframes uc-nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@keyframes uc-fadein { from { opacity: 0; } to { opacity: 1; } }

/* ---- the top block: the horn headband, the age, the name, the details ---- */
.unicorn-top { position: relative; z-index: 1; max-width: 560px; margin: 0 auto; padding: 56px 20px 30px; text-align: center; font-family: var(--u-body); color: var(--u-ink); }
.uc-age-line { margin: 6px 0 14px; color: var(--u-ink); font: 600 22px var(--u-head); letter-spacing: .12em; text-transform: uppercase; }
.uc-age { margin: 0 0 16px; font: 700 150px/0.95 var(--u-head); color: var(--u-pink); text-shadow: 0 0 26px rgba(255,255,255,.7), 0 5px 0 #eaa6c6; }
/* a long name shrinks (--nk from the partial, then kids-unicorn-stage.js fits it to the line) */
.uc-kid-name { margin: 0 0 8px; font: 400 calc(58px * var(--nk, 1))/1.25 var(--u-script); color: var(--u-lilac); text-shadow: 0 2px 0 rgba(255,255,255,.7);
  white-space: nowrap; max-width: 100%; }
.uc-title { margin: 0 0 20px; color: var(--u-pink); font: 700 40px/1.12 var(--u-head); letter-spacing: .005em; overflow-wrap: anywhere; }
.uc-details { display: grid; gap: 18px; margin: 30px 0 30px; }
.uc-details div { padding: 14px 12px; border: 1px solid var(--u-line); border-radius: 16px; background: rgba(255,255,255,.72); box-shadow: 0 4px 14px rgba(201,66,127,.08); }
.uc-details dt { color: var(--u-pink); font: 600 14px var(--u-head); letter-spacing: .2em; text-transform: uppercase; }
.uc-details dd { margin: 6px 0 0; font-weight: 700; font-size: 18px; line-height: 1.5; overflow-wrap: anywhere; }
.uc-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 8px 0 6px; }
.uc-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 22px; border-radius: 999px;
  border: 2px solid var(--u-pink); background: var(--u-pink); color: #fff; font: 700 18px var(--u-head); letter-spacing: .03em;
  text-decoration: none; cursor: pointer; }
.uc-btn.uc-ghost { background: transparent; color: var(--u-pink); }

/* ---- the real objects: shot on the page colour, faded at the edges, they light up as they arrive ---- */
.uc-relic-wrap { position: relative; width: min(78vw, 340px); aspect-ratio: 1; margin: 0 auto 10px; }
.uc-toy { cursor: pointer; }
.uc-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 > .uc-relic, .uc-relic.lit { opacity: 1; filter: none; transform: none; }
.uc-tap-hint { margin: -4px 0 12px; color: var(--u-muted); font-style: italic; font-size: 14px; }
.uc-wobble { animation: uc-wobble .7s ease-in-out; }
@keyframes uc-wobble { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-5deg); } 40% { transform: rotate(4deg); } 60% { transform: rotate(-3deg); } 80% { transform: rotate(2deg); } }
.uc-hop { animation: uc-hop .6s cubic-bezier(.3,1.6,.5,1); }
@keyframes uc-hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-18px) rotate(-4deg); } }
.uc-float { animation: uc-floaty 1.2s ease-in-out; }
@keyframes uc-floaty { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-26px) rotate(3deg); } 60% { transform: translateY(-8px) rotate(-2deg); } }
.uc-relic-wrap .uc-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%; }
.uc-shine .uc-sheen { animation: uc-sheen 1.3s ease; }
@keyframes uc-sheen { 0% { opacity: 1; background-position: 120% 0; } 100% { opacity: 1; background-position: -60% 0; } }
.uc-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: uc-fairy 1.5s cubic-bezier(.2,.7,.4,1) forwards; }
@keyframes uc-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 */
.uc-cake-wrap { position: relative; width: min(92vw, 420px); margin: 0 auto 4px; }
canvas.uc-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%);
  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); }
canvas.uc-cake.lit { opacity: 1; filter: none; transform: none; }
.uc-cake-hint { margin: -10px 0 18px; color: var(--u-gold); font: 600 20px var(--u-head); letter-spacing: .04em; min-height: 1.4em; }
/* pop the magic bubbles: they drift up around the toy unicorn; tap one and it pops */
.uc-bubbles { margin: 40px 0 0; text-align: center; }
.uc-bubbles-title { margin: 0 0 12px; color: var(--u-pink); font: 700 40px/1.12 var(--u-head); }
.uc-bubble-box { position: relative; width: min(92vw, 440px); height: 360px; margin: 0 auto 6px; }
.uc-bubble-box .uc-relic-wrap { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: min(62vw, 260px); margin: 0; }
.uc-bubble-box canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; touch-action: manipulation; }
.uc-popped { min-height: 1.4em; color: var(--u-gold); font: 600 20px var(--u-head); margin: 6px 0 14px; }
#uc-confetti { position: fixed; inset: 0; z-index: 30; width: 100%; height: 100%; pointer-events: none; }
/* little windows into the film between some sections: its own footage, looping, faded into the page */
.uc-sceneband { position: relative; height: 230px; max-width: 680px; margin: 34px auto 0; 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%); }
.uc-sceneband video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.95); }
.uc-sceneband::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 -28px 30px -18px rgba(247,234,243,.95), inset 0 28px 30px -18px rgba(247,234,243,.95); }
.uc-glowbg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.uc-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,.6), rgba(255,255,255,0)); animation: uc-drift 38s ease-in-out infinite alternate; }
.uc-glowbg i:nth-child(1) { left: -60vmax; top: 10%; }
.uc-glowbg i:nth-child(2) { right: -70vmax; top: 45%; animation-duration: 46s; animation-delay: -12s; background: radial-gradient(closest-side, rgba(190,160,255,.25), rgba(190,160,255,0)); }
.uc-glowbg i:nth-child(3) { left: -40vmax; top: 75%; animation-duration: 54s; animation-delay: -30s; background: radial-gradient(closest-side, rgba(143,227,191,.2), rgba(143,227,191,0)); }
@keyframes uc-drift { from { transform: translateX(-12vmax); } to { transform: translateX(22vmax); } }

/* ---- the page below: the test page's look ---- */
.unicorn-page .sc-section { position: relative; max-width: 560px; padding: 44px 20px 34px; border-bottom: 0; text-align: center; font-family: var(--u-body); color: var(--u-ink); }
.unicorn-page .sc-flow > .sc-section, .unicorn-page .sc-flow > .sc-footer { position: relative; z-index: 1; }
.unicorn-page .sc-h2, .unicorn-page .sc-script { margin: 0 0 16px; color: var(--u-pink); font: 700 40px/1.12 var(--u-head); letter-spacing: .005em; text-transform: none; }
.unicorn-page .sc-rule, .unicorn-page .sc-rule-sm { width: 72px; height: 3px; margin: 0 auto 20px; border: 0; border-radius: 3px; background: linear-gradient(90deg, transparent, var(--u-pink), transparent); }
.unicorn-page .sc-lead { font-size: 17px; line-height: 1.6; color: var(--u-ink); }
.unicorn-page .sc-signature { font: 600 24px/1.3 var(--u-head); color: var(--u-ink); margin-top: 12px; }
.uc-eyebrow { margin: 0 0 10px; color: var(--u-gold); font: 600 16px var(--u-head); letter-spacing: .2em; text-transform: uppercase; }
.unicorn-page .sc-detail { display: block; padding: 14px 12px; margin: 0 0 14px; border: 1px solid var(--u-line); border-radius: 16px; background: rgba(255,255,255,.72); }
.unicorn-page .sc-label { display: block; margin: 0 0 4px; color: var(--u-pink); font: 600 14px var(--u-head); letter-spacing: .2em; text-transform: uppercase; }
.unicorn-page .sc-value { font: 700 18px/1.45 var(--u-body); color: var(--u-ink); }
.unicorn-page .countdown-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 14px 0 12px; padding: 0; background: none; border: 0; }
.unicorn-page .countdown-item { position: relative; padding: 12px 0 8px; border: 1px solid var(--u-line); border-radius: 16px; background: rgba(255,255,255,.72); }
.unicorn-page .countdown-val { display: block; font: 700 40px/1 var(--u-head); color: var(--u-pink); font-variant-numeric: tabular-nums; }
.unicorn-page .countdown-lbl { color: var(--u-muted); font: 600 12px var(--u-head); letter-spacing: .16em; text-transform: uppercase; }
.unicorn-page .sc-timeline { list-style: none; margin: 16px 0 12px; padding: 0; text-align: left; }
.unicorn-page .sc-timeline li { display: grid; grid-template-columns: 86px 1fr; gap: 12px; padding: 12px 4px; border-bottom: 1px dashed var(--u-line); }
.unicorn-page .sc-timeline .sc-dot, .unicorn-page .sc-timeline .sc-ico { display: none; }
.unicorn-page .sc-time { color: var(--u-pink); font: 600 18px var(--u-head); }
.unicorn-page .sc-what { font-size: 17px; line-height: 1.45; color: var(--u-ink); }
.unicorn-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(90,40,110,.25); }
.unicorn-page .sc-map iframe { display: block; width: 100%; height: 300px; border: 0; border-radius: 12px; background: #e8e0e8; }
.unicorn-page .sc-btn { border-radius: 999px; min-height: 48px; padding: 12px 22px; font: 700 17px var(--u-head); letter-spacing: .03em; text-transform: none; }
/* Android (data-ss): the app draws these as pictures (Samsung's dark mode can't dim them), so only elsewhere */
html:not([data-ss]) .unicorn-page .sc-btn-solid { background: var(--u-pink); border: 2px solid var(--u-pink); color: #fff; box-shadow: none; }
.unicorn-page .sc-btn-ghost { background: transparent; border: 2px solid var(--u-pink); color: var(--u-pink); }
.unicorn-page .sc-alt-links, .unicorn-page .sc-alt-links a { color: var(--u-muted); }
/* the reply form: every label and question the same distance from what it belongs to, all on the left (Gary 29/9) */
.unicorn-page .sc-form { text-align: left; margin-top: 10px; }
.unicorn-page .sc-form label, .unicorn-page .sc-form .sc-legend { display: block; margin: 22px 0 8px; padding: 0; color: var(--u-pink); font: 600 14px var(--u-head);
  letter-spacing: .14em; text-transform: uppercase; text-align: left; }
.unicorn-page .sc-form > label:first-of-type { margin-top: 0; }
.unicorn-page .sc-form .sc-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.unicorn-page .sc-form .sc-choice label { margin: 0; letter-spacing: 0; text-transform: none; }
.unicorn-page .sc-form input[type="text"], .unicorn-page .sc-form input[type="tel"], .unicorn-page .sc-form input[type="email"], .unicorn-page .sc-form select, .unicorn-page .sc-form textarea {
  width: 100%; padding: 13px 14px; border-radius: 12px; border: 1px solid rgba(201,66,127,.35); background: #fff; color: var(--u-ink); font: 600 17px var(--u-body); }
.unicorn-page .sc-form input:focus, .unicorn-page .sc-form select:focus, .unicorn-page .sc-form textarea:focus { outline: 2px solid var(--u-gold); outline-offset: 1px; }
.unicorn-page .sc-choice span { position: relative; 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(--u-ink); font: 700 17px var(--u-body); letter-spacing: 0; text-transform: none; box-shadow: none; }
html:not([data-ss]) .unicorn-page .sc-choice span { background: rgba(255,255,255,.6); }
html:not([data-ss]) .unicorn-page .sc-choice input:checked + span { background: var(--u-pink); border-color: var(--u-pink); color: #fff; }
.unicorn-page .sc-btn-block { margin-top: 24px; }
.unicorn-page .sc-thanks { border: 2px solid var(--u-pink); border-radius: 16px; background: rgba(255,255,255,.75); padding: 16px; text-align: left; }
.unicorn-page .sc-footer { position: relative; padding: 50px 24px 70px; text-align: center; }
.unicorn-page .sc-footer .sc-script { font: 700 40px/1.12 var(--u-head); color: var(--u-pink); }
.unicorn-page .sc-footer-sub { color: var(--u-muted); }
.unicorn-page .uc-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 */
.unicorn-page .rsvp-alert { padding: 14px 16px; border-radius: 16px; font: 700 17px/1.45 var(--u-body); text-align: center; }
.unicorn-page .rsvp-alert.success { position: relative; background: rgba(255,255,255,.8); border: 2px solid var(--u-pink); color: var(--u-ink); }
.unicorn-page .rsvp-alert.error { background: #fff; border: 2px solid #b3261e; color: #b3261e; }

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

/* ---- Samsung Internet (html[data-ss]): 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 the test page's ink pictures (themes/kids-unicorn/assets/unicorn/ss/), outlines as picture rings
   (a mask is never recoloured), buttons with a picture inside them. The poster, cake and bubbles are canvases. ---- */
[data-ss] .unicorn-scene { background: transparent; }
[data-ss] .uc-open { background: transparent; }
[data-ss] .uc-glowbg, [data-ss] .uc-sceneband::after { display: none; }
/* ...so the film strips fade out top and bottom with the mask itself (a mask is never recoloured) instead of the drawn wash */
[data-ss] .uc-sceneband {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 30px, #000 calc(100% - 30px), transparent 100%), radial-gradient(120% 130% at 50% 50%, #000 42%, transparent 82%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(180deg, transparent 0, #000 30px, #000 calc(100% - 30px), transparent 100%), radial-gradient(120% 130% at 50% 50%, #000 42%, transparent 82%);
  mask-composite: intersect; }
[data-ss] :is(.uc-details dd, .uc-age-line),
[data-ss] :is(.uc-title, .uc-details dt, .uc-age, .uc-bubbles-title, .uc-btn.uc-ghost),
[data-ss] :is(.uc-eyebrow, .uc-kid-name, .uc-cake-hint, .uc-popped),
[data-ss] .uc-tap-hint {
  background: url('/themes/kids-unicorn/assets/unicorn/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(.uc-title, .uc-details dt, .uc-age, .uc-bubbles-title, .uc-btn.uc-ghost) { background-image: url('/themes/kids-unicorn/assets/unicorn/ss/ink-pink.png'); }
[data-ss] :is(.uc-eyebrow, .uc-cake-hint, .uc-popped) { background-image: url('/themes/kids-unicorn/assets/unicorn/ss/ink-gold.png'); }
[data-ss] .uc-kid-name { background-image: url('/themes/kids-unicorn/assets/unicorn/ss/ink-lilac.png'); padding: 0 .3em; }
[data-ss] .uc-tap-hint { background-image: url('/themes/kids-unicorn/assets/unicorn/ss/ink-muted.png'); }
/* the section headings stay berry pink as on the test page (the app's layer would fill them with the dark text ink) */
[data-ss][data-tone] .unicorn-page .sc-flow .sc-h2 { background-image: url('/themes/kids-unicorn/assets/unicorn/ss/ink-pink.png'); background-size: 100% 100%; }
/* boxes: no drawn fill, a pink picture ring instead (the ring is a mask, so it keeps its rounded corners) */
[data-ss] .unicorn-page :is(.uc-details div, .uc-btn.uc-ghost, .countdown-item, .sc-detail, .rsvp-alert.success) {
  position: relative; background-color: transparent; border-color: transparent; box-shadow: none; }
[data-ss] .unicorn-page :is(.uc-details div, .uc-btn.uc-ghost, .countdown-item, .sc-detail, .rsvp-alert.success)::before { content: ""; position: absolute; inset: -2px; border-radius: inherit;
  padding: 2px; background: url('/themes/kids-unicorn/assets/unicorn/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] .unicorn-page .rsvp-alert.success { color: transparent; -webkit-text-fill-color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: url('/themes/kids-unicorn/assets/unicorn/ss/ink-plum.png'); background-size: 100% 100%; }
[data-ss] .unicorn-page .sc-choice input:not(:checked) + span { background: transparent; }
[data-ss] .unicorn-page .sc-map { background: url('/themes/kids-unicorn/assets/unicorn/ss/fill-gold.png') 0 0 / 100% 100%; box-shadow: none; }
[data-ss] .unicorn-page .sc-timeline li { border-bottom-color: transparent; background: url('/themes/kids-unicorn/assets/unicorn/ss/fill-pink.png') left bottom / 100% 1px no-repeat; }
/* the film's overlays */
[data-ss] .uc-ring { box-shadow: none; background: url('/themes/kids-unicorn/assets/unicorn/ss/ring.png') center / 100% 100% no-repeat; }
[data-ss] :is(.uc-spark, .uc-fairy) { background: url('/themes/kids-unicorn/assets/unicorn/ss/sparkle.png') center / 100% 100% no-repeat; }
/* the solid buttons: their colour is a picture inside them, their words an ink picture (kids-unicorn-stage.js ssButton) */
.uc-btn, .uc-go { position: relative; }
.uc-btn, .uc-go, .uc-horn-label { isolation: isolate; }   /* the label stays position: absolute (placed over the horn) */
[data-ss] .uc-btn:not(.uc-ghost), [data-ss] .uc-go, [data-ss] .uc-horn-label { background: transparent; border-color: transparent; }
[data-ss] :is(.uc-btn, .uc-go, .uc-horn-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] .uc-ss-ink { background: url('/themes/kids-unicorn/assets/ss-ink-button.jpg') center / cover; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
[data-ss] .uc-ss-ink-dark { background: url('/themes/kids-unicorn/assets/unicorn/ss/ink-dark.png') 0 0 / 100% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
[data-ss] .uc-ss-emoji { margin-left: .25em; }

/* ---- the same layer when THIS design switched it on in the browser (html[data-uc-ss]: a non-Apple browser whose user agent
   doesn't say "Android", views/partials/unicorn-stage.ejs). The server writes these for Android only (views/guest.ejs), so
   here they are again: the picture variables scroll.css uses, and the app's gold-button rules. ---- */
html[data-uc-ss] {
  --ss-button: url('/themes/kids-unicorn/assets/ss-button.jpg');
  --ss-ink-button: url('/themes/kids-unicorn/assets/ss-ink-button.jpg');
  --ss-white: url('/themes/kids-unicorn/assets/ss-white.jpg');
  --ss-line: url('/themes/kids-unicorn/assets/ss-line.jpg');
  --ss-ink-text: url('/themes/kids-unicorn/assets/ss-ink-text.jpg');
  --ss-ink-accent: url('/themes/kids-unicorn/assets/ss-ink-accent.jpg');
  --ss-ink-muted: url('/themes/kids-unicorn/assets/ss-ink-muted.jpg');
}
html[data-uc-ss] .sc-btn-solid { position: relative; isolation: isolate; background: #c9427f; color: #fff; }
html[data-uc-ss] .sc-btn-solid > .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; }
html[data-uc-ss] .sc-btn-solid > .ss-ink { background: var(--ss-ink-button) center / cover; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
html[data-uc-ss] .sc-choice input:checked + span { background-color: #c9427f; background-image: var(--ss-ink-button), var(--ss-button);
  background-size: cover, cover; background-position: center, center; -webkit-background-clip: text, border-box; background-clip: text, border-box;
  -webkit-text-fill-color: transparent; color: #fff; }