/* =====================================================================================
   THE KIDS' "WILD ONE" JUNGLE / SAFARI FIRST BIRTHDAY DESIGN (theme envelope_style "wildone"), loaded only for it
   (views/guest.ejs). Lane WILDONE 20/10: a copy of the ONEderful design's kids-onederful.css (live 18/10) with the colours
   and arched safari card of the Wild ONE test page Gary signed off (previews/kids-wild-one): warm ivory / sage / olive / honey,
   Cormorant Garamond + Great Vibes + Montserrat. The film at the top (views/partials/wildone-stage.ejs,
   public/js/kids-wild-one-stage.js), the page's own arched card rising out of the gift box with this child's details, the
   top block, then the ordinary scroll sections restyled with one real object per section (public/js/kids-wild-one-decor.js).
   ===================================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,500;0,600;1,400;1,500&family=Great+Vibes&family=Montserrat:wght@400;500;600;700&display=swap');

.wo-page { --p-bg: #F2EEE3; --p-panel: #fffcf5; --p-pink: #6E855A; --p-red: #556845; --p-gold: #B07F3A; --p-ink: #3A3A2B; --p-muted: #7A7461;
  --p-line: rgba(176,127,58,.28); --p-head: "Cormorant Garamond", Georgia, serif; --p-script: "Great Vibes", cursive;
  --p-body: "Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif; }
.wo-page [hidden] { display: none !important; }

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

/* ---- the stage ---- */
.wo-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); }
.wo-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) */
.wo-sprinkle { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity .35s ease; }
.wo-sprinkle.on { opacity: 1; }

.wo-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%; }
.wo-open::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26,10,18,.1) 40%, rgba(26,10,18,.85)); }
.wo-card { position: relative; text-align: center; max-width: 420px; display: block; }
.wo-kicker { display: block; color: #F6DDB0; letter-spacing: .3em; font: 600 15px var(--p-body); text-transform: uppercase; margin: 0 0 12px; }
.wo-go { display: inline-block; padding: 16px 30px; border-radius: 999px; background: #DCE4CC; color: #34402a;
  font: 600 17px var(--p-body); letter-spacing: .16em; text-transform: uppercase; }
.wo-open.ready .wo-go { animation: wo-pulse 1.8s infinite; }
.wo-hint { display: block; margin: 12px 0 0; font-size: 14px; opacity: .85; }
@keyframes wo-pulse { 0% { box-shadow: 0 0 0 0 rgba(220,228,204,.65); } 70% { box-shadow: 0 0 0 18px rgba(220,228,204,0); } 100% { box-shadow: 0 0 0 0 rgba(220,228,204,0); } }

.wo-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(.wo-sealed) .wo-bar { left: 12px; right: auto; }
.wo-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); }
.wo-chip.wo-icon { width: 40px; height: 40px; padding: 0; font-size: 18px; line-height: 1; }
.edit-mode .wo-bar, .edit-mode .wo-open, .edit-mode .wo-bag, .edit-mode .wo-scroll { display: none !important; }

/* the pause on the party bag: the whole stage is the button, the ring shows where */
.wo-bag { position: absolute; inset: 0; z-index: 3; border: 0; padding: 0; margin: 0; background: transparent; cursor: pointer; width: 100%; }
.wo-ring { position: absolute; transform: translate(-50%, -50%); border-radius: 44%; pointer-events: none;
  box-shadow: 0 0 0 2px rgba(244,214,160,.95), 0 0 26px 6px rgba(232,206,140,.55), inset 0 0 22px rgba(244,214,160,.35);
  animation: wo-ring 1.6s ease-in-out infinite; }
@keyframes wo-ring { 0%, 100% { opacity: .55; transform: translate(-50%, -50%) scale(.96); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); } }
.wo-bag-label { position: absolute; transform: translateX(-50%); pointer-events: none; white-space: nowrap; padding: 10px 20px;
  border-radius: 999px; background: #E9CFA0; color: #4a3424; font: 600 16px var(--p-body); letter-spacing: .2em; text-transform: uppercase;
  box-shadow: 0 6px 24px rgba(0,0,0,.45); animation: wo-bob 1.6s ease-in-out infinite; }
@keyframes wo-bob { 0%, 100% { margin-top: 0; } 50% { margin-top: -6px; } }
.wo-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: wo-twinkle 1.4s ease-in-out infinite; }
@keyframes wo-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 */
.wo-rv { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.wo-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)); }
.wo-rv-clip { position: absolute; left: 0; top: 0; width: 100%; overflow: hidden; }
.wo-rv-card { position: absolute; left: 0; top: 0; transform-origin: 50% 50%; will-change: transform;
  filter: drop-shadow(0 14px 26px rgba(40,20,10,.35)) drop-shadow(0 0 30px rgba(255,226,190,.45)); }
.wo-card-img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* the ONEderful card (Gary 18/10): an arched cream card (transparent round it: flowers spill past its edges); the words laid
   out like the test page's (tools/card.html, 807 px wide there -> --u = card width / 100) */
.wo-card-text { position: absolute; left: 13%; right: 13%; top: 18%; text-align: center; color: #33482e; }
.wo-card-text p { margin: 0; }
.wo-card-text .ct-kick { font: 500 calc(var(--u) * 2.1) / 1 var(--p-body); letter-spacing: .28em; text-indent: .28em; color: #b5843a; }
.wo-card-text .ct-one { margin-top: calc(var(--u) * 1.9); white-space: nowrap; line-height: .9; }
.wo-card-text .ct-one .caps { font: 500 calc(var(--u) * 10.9) / .9 var(--p-head); letter-spacing: .08em; color: #b5843a; }
.wo-card-text .ct-line { width: 15%; height: 2px; margin: calc(var(--u) * 3.6) auto calc(var(--u) * 2.85); background: linear-gradient(90deg, transparent, #bd8b3b, transparent); }
.wo-card-text .ct-turn { font: 500 calc(var(--u) * 3 * var(--nk, 1)) / 1.3 var(--p-head); letter-spacing: .13em; color: #33482e; white-space: nowrap; }
.wo-card-text .ct-when { margin-top: calc(var(--u) * 2.7); font: 500 calc(var(--u) * 2.6) / 1.45 var(--p-body); letter-spacing: .09em; color: #33482e; }
.wo-card-text .ct-where { margin-top: calc(var(--u) * 1.9); font: 500 calc(var(--u) * 3.5 * var(--nk, 1)) / 1.2 var(--p-head); color: #33482e; white-space: nowrap; }
.wo-card-text .ct-reply { margin: calc(var(--u) * 2.7) auto 0; max-width: 78%; font: italic 500 calc(var(--u) * 3.1) / 1.22 var(--p-head); color: #4d5e3c; }

.wo-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 14px var(--p-body); letter-spacing: .14em; text-transform: uppercase; text-shadow: 0 2px 10px rgba(0,0,0,.9); white-space: nowrap; animation: wo-fadein 1s ease both; }
.wo-arrow { width: 34px; height: 34px; border-radius: 50%; border: 2px solid #DCE4CC; display: grid; place-items: center; animation: wo-nudge 1.4s ease-in-out infinite;
  background: rgba(26,10,18,.45); }
.wo-arrow::before { content: ""; width: 10px; height: 10px; border: solid #DCE4CC; border-width: 0 3px 3px 0; transform: translateY(-2px) rotate(45deg); }
@keyframes wo-nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@keyframes wo-fadein { from { opacity: 0; } to { opacity: 1; } }

/* ---- the top block: the party bag, the age, the name, the details ---- */
.wo-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); }
.wo-age-line { margin: 0; color: var(--p-ink); font: 600 16px var(--p-body); letter-spacing: .26em; text-transform: uppercase; }
.wo-age { margin: -2px 0 2px; font: 300 150px/0.95 var(--p-head); font-variant-numeric: lining-nums; color: var(--p-gold); text-shadow: 0 0 26px rgba(255,255,255,.8); }
.wo-kid-name { margin: 0 0 6px; font: 400 calc(72px * var(--nk, 1))/1.05 var(--p-script); color: var(--p-pink); text-shadow: 0 2px 0 rgba(255,255,255,.7); overflow-wrap: anywhere; }
.wo-title { margin: 0 0 16px; color: var(--p-pink); font: 600 44px/1.08 var(--p-head); letter-spacing: .01em; }
.wo-details { display: grid; gap: 16px; margin: 22px 0 26px; }
.wo-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(169,132,79,.08); }
.wo-details dt { color: var(--p-gold); font: 600 12px var(--p-body); letter-spacing: .26em; text-transform: uppercase; }
.wo-details dd { margin: 4px 0 0; font-weight: 600; font-size: 17px; }
.wo-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 8px 0 6px; }
.wo-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: 600 15px var(--p-body); letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; }
.wo-btn.wo-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 ---- */
.wo-relic-wrap { position: relative; width: min(78vw, 340px); aspect-ratio: 1; margin: 0 auto 10px; }
.wo-toy { cursor: pointer; }
.wo-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 > .wo-relic, .wo-relic.lit { opacity: 1; filter: none; transform: none; }
.wo-tap-hint { margin: -4px 0 12px; color: var(--p-muted); font-style: italic; font-size: 14px; }
.wo-relic-wrap .wo-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; }
.wo-bagobj.lit .wo-glow { animation: wo-breathe 3.2s ease-in-out 1.2s infinite; }
@keyframes wo-breathe { 0%, 100% { opacity: .15; } 50% { opacity: .8; } }
.wo-wobble { animation: wo-wobble .7s ease-in-out; }
@keyframes wo-wobble { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-5deg); } 40% { transform: rotate(4deg); } 60% { transform: rotate(-3deg); } 80% { transform: rotate(2deg); } }
.wo-hop { animation: wo-hop .6s cubic-bezier(.3,1.6,.5,1); }
@keyframes wo-hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-18px) rotate(-4deg); } }
.wo-float { animation: wo-floaty 1.2s ease-in-out; }
@keyframes wo-floaty { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-26px) rotate(3deg); } 60% { transform: translateY(-8px) rotate(-2deg); } }
.wo-relic-wrap .wo-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%; }
.wo-palette.shine .wo-sheen { animation: wo-sheen 1.3s ease; }
@keyframes wo-sheen { 0% { opacity: 1; background-position: 120% 0; } 100% { opacity: 1; background-position: -60% 0; } }
.wo-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: wo-fairy 1.5s cubic-bezier(.2,.7,.4,1) forwards; }
@keyframes wo-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 */
.wo-cake-wrap { position: relative; width: min(92vw, 420px); margin: 0 auto 4px; }
canvas.wo-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%); }
.wo-cake-hint { margin: -10px 0 18px; color: var(--p-gold); font: italic 500 22px var(--p-head); letter-spacing: .02em; min-height: 1.4em; }
/* pop the bubbles: they drift up over the bubble wand; tap one and it pops */
.wo-bubbles { margin: 40px 0 0; text-align: center; }
.wo-bubbles-title { margin: 0 0 12px; color: var(--p-pink); font: 600 40px/1.08 var(--p-head); }
.wo-bubble-box { position: relative; width: min(92vw, 440px); height: 360px; margin: 0 auto 6px; }
.wo-bubble-box .wo-relic-wrap { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: min(62vw, 260px); margin: 0; }
.wo-bubble-box canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; touch-action: manipulation; }
.wo-popped { min-height: 1.4em; color: var(--p-gold); font: italic 500 22px var(--p-head); margin: 6px 0 14px; }
#wo-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 */
.wo-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%); }
.wo-sceneband video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.95); }
.wo-sceneband::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 -28px 30px -18px rgba(242,238,227,.95), inset 0 28px 30px -18px rgba(242,238,227,.95); }
.wo-glowbg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.wo-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: wo-drift 38s ease-in-out infinite alternate; }
.wo-glowbg i:nth-child(1) { left: -60vmax; top: 10%; }
.wo-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)); }
.wo-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 wo-drift { from { transform: translateX(-12vmax); } to { transform: translateX(22vmax); } }

/* ---- the page below: the test page's look ---- */
.wo-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); }
.wo-page .sc-flow > .sc-section, .wo-page .sc-flow > .sc-footer { position: relative; z-index: 1; }
.wo-page .sc-h2, .wo-page .sc-script { margin: 0 0 16px; color: var(--p-pink); font: 600 44px/1.08 var(--p-head); letter-spacing: .01em; text-transform: none; }
.wo-page .sc-rule, .wo-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); }
.wo-page .sc-lead { font-size: 17px; line-height: 1.6; color: var(--p-ink); }
.wo-page .sc-signature { font: italic 500 27px/1.3 var(--p-head); color: var(--p-ink); margin-top: 12px; }
.wo-eyebrow { margin: 0 0 6px; color: var(--p-gold); font: 600 13px var(--p-body); letter-spacing: .28em; text-transform: uppercase; }
.wo-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); }
.wo-page .sc-label { display: block; margin: 0 0 4px; color: var(--p-gold); font: 600 12px var(--p-body); letter-spacing: .26em; text-transform: uppercase; }
.wo-page .sc-value { font-weight: 600; font-size: 17px; line-height: 1.45; color: var(--p-ink); }
.wo-page .countdown-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 14px 0 12px; padding: 0; background: none; border: 0; }
.wo-page .countdown-item { padding: 12px 0 8px; border: 1px solid var(--p-line); border-radius: 16px; background: rgba(255,255,255,.72); }
.wo-page .countdown-val { display: block; font: 500 42px/1 var(--p-head); color: var(--p-pink); font-variant-numeric: lining-nums tabular-nums; }
.wo-page .countdown-lbl { color: var(--p-muted); font: 600 11px var(--p-body); letter-spacing: .18em; text-transform: uppercase; }
.wo-page .sc-timeline { list-style: none; margin: 16px 0 12px; padding: 0; text-align: left; }
.wo-page .sc-timeline li { display: grid; grid-template-columns: 86px 1fr; gap: 12px; padding: 11px 4px; border-bottom: 1px dashed var(--p-line); }
.wo-page .sc-timeline .sc-dot, .wo-page .sc-timeline .sc-ico { display: none; }
.wo-page .sc-time { color: var(--p-pink); font: 600 19px var(--p-head); font-variant-numeric: lining-nums; }
.wo-page .sc-what { font-size: 17px; line-height: 1.45; color: var(--p-ink); }
.wo-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); }
.wo-page .sc-map iframe { display: block; width: 100%; height: 300px; border: 0; border-radius: 12px; background: #e8e0d8; }
.wo-page .sc-btn { border-radius: 999px; min-height: 48px; padding: 12px 22px; font: 600 15px var(--p-body); letter-spacing: .14em; text-transform: uppercase; }
/* Android (data-ss): the app draws these as pictures (Samsung's dark mode can't dim them), so only elsewhere */
html:not([data-ss]) .wo-page .sc-btn-solid { background: var(--p-pink); border: 2px solid var(--p-pink); color: #fff; }
.wo-page .sc-btn-ghost { background: transparent; border: 2px solid var(--p-pink); color: var(--p-pink); }
.wo-page .sc-alt-links, .wo-page .sc-alt-links a { color: var(--p-muted); }
.wo-page .sc-form { text-align: left; }
.wo-page .sc-form label, .wo-page .sc-legend { display: block; margin: 16px 0 6px; color: var(--p-pink); font: 600 12px var(--p-body); letter-spacing: .2em; text-transform: uppercase; }
.wo-page .sc-form input[type="text"], .wo-page .sc-form input[type="tel"], .wo-page .sc-form input[type="email"], .wo-page .sc-form select, .wo-page .sc-form textarea {
  width: 100%; padding: 13px 14px; border-radius: 12px; border: 1px solid rgba(110,133,90,.4); background: #fff; color: var(--p-ink); font: 600 17px var(--p-body); }
.wo-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(110,133,90,.45); color: var(--p-ink); font: 600 15px var(--p-body); letter-spacing: 0; text-transform: none; box-shadow: none; }
html:not([data-ss]) .wo-page .sc-choice span { background: rgba(255,255,255,.6); }
html:not([data-ss]) .wo-page .sc-choice input:checked + span { background: var(--p-pink); border-color: var(--p-pink); color: #fff; }
.wo-page .sc-thanks { border: 2px solid var(--p-pink); border-radius: 16px; background: rgba(255,255,255,.75); padding: 16px; text-align: left; }
.wo-page .sc-footer { position: relative; padding: 50px 24px 70px; text-align: center; }
.wo-page .sc-footer .sc-script { font: 600 44px/1.08 var(--p-head); color: var(--p-pink); }
.wo-page .wo-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 */
.wo-page .rsvp-alert { padding: 14px 16px; border-radius: 16px; font: 700 17px/1.45 var(--p-body); text-align: center; }
.wo-page .rsvp-alert.success { background: rgba(255,255,255,.8); border: 2px solid var(--p-pink); color: var(--p-ink); }
.wo-page .rsvp-alert.error { background: #fff; border: 2px solid #b3261e; color: #b3261e; }

@media (min-width: 700px) { .wo-page .sc-h2, .wo-page .sc-script, .wo-title { font-size: 48px; } .wo-top, .wo-page .sc-section { padding-top: 64px; } }
@media (prefers-reduced-motion: reduce) {
  .wo-glowbg i, .wo-open.ready .wo-go, .wo-ring, .wo-bag-label, .wo-spark, .wo-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-wild-one/assets/wildone/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] .wo-scene, [data-ss] .wo-scene video { background: transparent; }
[data-ss] .wo-glowbg, [data-ss] .wo-sceneband::after { display: none; }
[data-ss] :is(.wo-details dd, .wo-card-text .ct-when, .wo-card-text .ct-where, .wo-age-line),
[data-ss] :is(.wo-title, .wo-details dt, .wo-age, .wo-card-text .ct-reply, .wo-bubbles-title, .wo-btn.wo-ghost),
[data-ss] :is(.wo-eyebrow, .wo-kid-name, .wo-cake-hint, .wo-popped, .wo-card-text .ct-one span),
[data-ss] :is(.wo-tap-hint, .wo-card-text .ct-kick, .wo-card-text .ct-turn) {
  background: url('/themes/kids-wild-one/assets/wildone/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(.wo-title, .wo-btn.wo-ghost, .wo-card-text .ct-reply, .wo-kid-name, .wo-bubbles-title) { background-image: url('/themes/kids-wild-one/assets/wildone/ss/ink-rose.png'); }
[data-ss] :is(.wo-eyebrow, .wo-details dt, .wo-age, .wo-cake-hint, .wo-popped, .wo-card-text .ct-one span) { background-image: url('/themes/kids-wild-one/assets/wildone/ss/ink-gold.png'); }
[data-ss] .wo-tap-hint { background-image: url('/themes/kids-wild-one/assets/wildone/ss/ink-muted.png'); }
[data-ss] .wo-card-text .ct-kick { background-image: url('/themes/kids-wild-one/assets/wildone/ss/ink-gold.png'); }
[data-ss] .wo-page .rsvp-alert.success { background: transparent; }
[data-ss] .wo-page .rsvp-alert.success { color: transparent; -webkit-text-fill-color: transparent; -webkit-background-clip: text; background-clip: text;
  background-image: url('/themes/kids-wild-one/assets/wildone/ss/ink-plum.png'); background-size: 100% 100%; border-color: transparent; }
[data-ss] :is(.wo-details div, .wo-btn.wo-ghost) { position: relative; background-color: transparent; border-color: transparent; box-shadow: none; }
[data-ss] :is(.wo-details div, .wo-btn.wo-ghost)::before { content: ""; position: absolute; inset: -2px; border-radius: inherit;
  padding: 2px; background: url('/themes/kids-wild-one/assets/wildone/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] .wo-card-text .ct-line { background: url('/themes/kids-wild-one/assets/wildone/ss/fill-gold.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] .wo-page .sc-map { background: url('/themes/kids-wild-one/assets/wildone/ss/fill-gold.png') 0 0 / 100% 100%; box-shadow: none; }
/* the film's overlays */
[data-ss] .wo-ring { box-shadow: none; background: url('/themes/kids-wild-one/assets/wildone/ss/ring.png') center / 100% 100% no-repeat; }
[data-ss] :is(.wo-spark, .wo-fairy) { background: url('/themes/kids-wild-one/assets/wildone/ss/sparkle.png') center / 100% 100% no-repeat; }
/* the solid buttons: their colour is a picture inside them, their words an ink picture (kids-wild-one-stage.js ssButton) */
.wo-btn, .wo-go { position: relative; }
.wo-btn, .wo-go, .wo-bag-label { isolation: isolate; }   /* the label stays position: absolute (placed over the bag) */
[data-ss] .wo-btn:not(.wo-ghost), [data-ss] .wo-go, [data-ss] .wo-bag-label { background: transparent; border-color: transparent; }
[data-ss] :is(.wo-btn, .wo-go, .wo-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] .wo-ss-ink { background: url('/themes/kids-wild-one/assets/ss-ink-button.jpg') center / cover; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
[data-ss] .wo-ss-ink-dark { background: url('/themes/kids-wild-one/assets/wildone/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 */
.wo-open > .wo-open-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; pointer-events: none; }
.wo-open::before { z-index: 1; }
.wo-open .wo-card { z-index: 2; }