/* =====================================================================================
   THE KIDS' DINO DESIGN (theme envelope_style "dino"), loaded only for it (views/guest.ejs).
   Ported 23 Sep 2026 from the test page Gary approved (previews/kids-dino): the film at the top
   (views/partials/dino-stage.ejs, public/js/kids-dino-stage.js) with this child's details drawn on the
   ranger's tracker, the top block (hatched egg, age, details), then the ordinary scroll sections
   restyled to that page's look with one real object per section (public/js/kids-dino-decor.js).
   ===================================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Nunito:wght@400;600;700;800&display=swap');

.dino-page { --d-bg: #040805; --d-panel: #0a130b; --d-lime: #9BE15D; --d-amber: #FFC53D; --d-ink: #E9FFE0; --d-muted: #a9bea5;
  --d-line: rgba(155,225,93,.22); --d-head: "Barlow Condensed", "Bahnschrift", "Arial Narrow", system-ui, sans-serif;
  --d-body: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif; }

/* the app has no global [hidden] rule, and these pieces set their own display: hidden must win */
.dino-page [hidden] { display: none !important; }

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

/* ---- the stage ---- */
.dino-scene { position: relative; display: block; width: 100%; height: 100vh; height: 100svh; margin: 0 auto; overflow: hidden;
  background: var(--d-bg); touch-action: manipulation; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none;
  -webkit-user-select: none; user-select: none; font-family: var(--d-body); color: var(--d-ink); }
/* the film's own 720x1280 frame, contained in the stage; everything that lines up with the film lives inside it */
.dino-frame { position: absolute; left: 0; top: 0; width: 720px; height: 1280px; transform-origin: 0 0; }
.dino-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; background: var(--d-bg); }
#dino-film { z-index: 1; }
.dino-idle { z-index: 0; background: transparent !important; pointer-events: none; }
.dino-idle.on { z-index: 2; }
.dino-idle.out { z-index: 2; opacity: 0; transition: opacity .35s ease; }
/* the tracker: the tablet picture with the live screen, over the film's last 8 seconds */
.dino-tracker { position: absolute; inset: 0; z-index: 3; overflow: hidden; pointer-events: none; }
.dino-zoom { position: absolute; left: 0; top: 0; width: 720px; height: 1280px; transform-origin: 0 0; isolation: isolate; }
.dino-tablet { position: absolute; inset: 0; width: 720px; height: 1280px; display: block; }
.dino-glass { position: absolute; left: 0; top: 0; width: 1020px; height: 920px; transform-origin: 0 0; background: #000;
  mix-blend-mode: screen; opacity: .95; }
.dino-glass canvas { position: absolute; left: 60px; top: 60px; width: 900px; height: 800px; display: block; }
.dino-off { display: none !important; }

.dino-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(--d-bg) center / cover no-repeat; cursor: pointer; border: 0; color: var(--d-ink); font: inherit; margin: 0; width: 100%; }
.dino-open::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,8,5,.15) 40%, rgba(4,8,5,.85)); }
.dino-card { position: relative; text-align: center; max-width: 420px; display: block; }
.dino-kicker { display: block; color: var(--d-amber); letter-spacing: .14em; font: 700 17px var(--d-head); text-transform: uppercase; margin: 0 0 10px; }
.dino-go { display: inline-block; padding: 16px 28px; border-radius: 999px; background: var(--d-lime); color: #07210a;
  font: 800 22px var(--d-head); letter-spacing: .04em; text-transform: uppercase; }
.dino-open.ready .dino-go { animation: dino-pulse 1.8s infinite; }
.dino-hint { display: block; margin: 12px 0 0; font-size: 14px; opacity: .8; }
@keyframes dino-pulse { 0% { box-shadow: 0 0 0 0 rgba(155,225,93,.55); } 70% { box-shadow: 0 0 0 18px rgba(155,225,93,0); } 100% { box-shadow: 0 0 0 0 rgba(155,225,93,0); } }

.dino-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 Halloween's) */
body:not(.dino-sealed) .dino-bar { left: 12px; right: auto; }
.dino-chip { border: 1px solid rgba(233,255,224,.35); background: rgba(4,8,5,.6); color: var(--d-ink); border-radius: 999px;
  padding: 8px 14px; font: 600 14px var(--d-body); cursor: pointer; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.edit-mode .dino-bar, .edit-mode .dino-open, .edit-mode .dino-egg, .edit-mode .dino-scroll { display: none !important; }

/* the pause on the egg: the whole stage is the button, the ring shows where */
.dino-egg { position: absolute; inset: 0; z-index: 4; border: 0; padding: 0; margin: 0; background: transparent; cursor: pointer; width: 100%; }
.dino-ring { position: absolute; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 2px rgba(255,197,61,.85), 0 0 26px 6px rgba(255,197,61,.45), inset 0 0 22px rgba(255,197,61,.35);
  animation: dino-ring 1.6s ease-in-out infinite; }
@keyframes dino-ring { 0%, 100% { opacity: .55; transform: translate(-50%, -50%) scale(.96); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); } }
.dino-egg-label { position: absolute; transform: translateX(-50%); pointer-events: none; white-space: nowrap; padding: 10px 20px;
  border-radius: 999px; background: var(--d-amber); color: #2a1d00; font: 800 20px var(--d-head); letter-spacing: .05em; text-transform: uppercase;
  box-shadow: 0 6px 24px rgba(0,0,0,.45); animation: dino-bob 1.6s ease-in-out infinite; }
@keyframes dino-bob { 0%, 100% { margin-top: 0; } 50% { margin-top: -6px; } }
.dino-spark { position: absolute; width: 10px; height: 10px; pointer-events: none; transform: translate(-50%, -50%);
  background: radial-gradient(circle, #fff 0 20%, rgba(255,215,120,.9) 35%, rgba(255,197,61,0) 70%); animation: dino-twinkle 1.4s ease-in-out infinite; }
@keyframes dino-twinkle { 0%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.3); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); } }

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

/* ---- the top block: the hatched egg, the age, the details ---- */
.dino-top { position: relative; max-width: 560px; margin: 0 auto; padding: 56px 20px 30px; text-align: center; font-family: var(--d-body); color: var(--d-ink); }
.dino-age-line { margin: 0; color: var(--d-ink); font: 700 22px var(--d-head); letter-spacing: .18em; text-transform: uppercase; }
.dino-age { margin: -6px 0 2px; font: 800 150px/0.9 var(--d-head); color: var(--d-amber); text-shadow: 0 0 24px rgba(255,197,61,.45), 0 6px 0 #6b4a00; }
.dino-title { margin: 0 0 16px; color: var(--d-amber); font: 800 40px/1.05 var(--d-head); letter-spacing: .01em; text-transform: uppercase; }
.dino-details { display: grid; gap: 16px; margin: 22px 0 26px; }
.dino-details div { padding: 14px 12px; border: 1px solid var(--d-line); border-radius: 14px; background: rgba(10,19,11,.72); }
.dino-details dt { color: var(--d-lime); font: 700 14px var(--d-head); letter-spacing: .2em; text-transform: uppercase; }
.dino-details dd { margin: 4px 0 0; font-weight: 700; font-size: 18px; }
.dino-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 8px 0 6px; }
.dino-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 22px; border-radius: 999px;
  border: 2px solid var(--d-amber); background: var(--d-amber); color: #2a1d00; font: 800 18px var(--d-head); letter-spacing: .06em;
  text-transform: uppercase; text-decoration: none; cursor: pointer; }
.dino-btn.dino-ghost { background: transparent; color: var(--d-amber); }

/* ---- the real objects: shot on black, faded at the edges, they light up as they arrive ---- */
.dino-relic-wrap { position: relative; width: min(78vw, 340px); aspect-ratio: 1; margin: 0 auto 10px; }
.dino-toy { cursor: pointer; }
.dino-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%);
  filter: brightness(.22) saturate(.5); transform: scale(.93); transition: filter 1.6s ease, transform 1.6s cubic-bezier(.2,.8,.2,1); }
.lit > .dino-relic, .dino-relic.lit { filter: none; transform: none; }
.dino-tap-hint { margin: -4px 0 12px; color: var(--d-muted); font-style: italic; font-size: 14px; }
.dino-wobble { animation: dino-wobble .7s ease-in-out; }
@keyframes dino-wobble { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-5deg); } 40% { transform: rotate(4deg); } 60% { transform: rotate(-3deg); } 80% { transform: rotate(2deg); } }
.dino-hop { animation: dino-hop .6s cubic-bezier(.3,1.6,.5,1); }
@keyframes dino-hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-18px) rotate(-4deg); } }

/* the volcano: big, smoking, rumbling; tap it and it erupts */
.dino-relic-wrap.dino-volcano { width: min(100vw, 560px); margin-left: calc(50% - min(50vw, 280px)); }
.dino-volcano .dino-relic { -webkit-mask-image: radial-gradient(closest-side, #000 80%, transparent 100%); mask-image: radial-gradient(closest-side, #000 80%, transparent 100%); }
.dino-volcano .dino-plume { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.dino-volcano .dino-lava { position: absolute; left: 48%; top: 45%; width: 34%; height: 26%; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,140,40,.7), rgba(255,80,0,0)); mix-blend-mode: screen; opacity: 0; transition: opacity .3s; }
.dino-volcano.lit .dino-lava { opacity: .45; animation: dino-lava 1.8s ease-in-out infinite; }
@keyframes dino-lava { 0%, 100% { opacity: .35; } 50% { opacity: .8; } }
.dino-volcano.rumble .dino-relic { animation: dino-shake .45s linear 2; }
.dino-volcano.rumble .dino-lava { opacity: 1 !important; animation: none; }
.dino-volcano.erupt .dino-relic { animation: dino-shake .5s linear 3; }
.dino-volcano.erupt .dino-lava { opacity: 1 !important; animation: none; width: 72%; height: 58%; transition: all .25s; }
.dino-volcano .dino-flash { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; mix-blend-mode: screen; opacity: 0;
  background: radial-gradient(closest-side, rgba(255,170,80,.6), transparent 70%); }
.dino-volcano.erupt .dino-flash { animation: dino-flash 1.2s ease-out; }
@keyframes dino-flash { 0% { opacity: 0; } 10% { opacity: 1; } 100% { opacity: 0; } }
@keyframes dino-shake { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-3px, 2px); } 50% { transform: translate(3px, -2px); } 75% { transform: translate(-2px, -1px); } }
.dino-ember { position: absolute; left: 48%; top: 43%; width: var(--sz, 7px); height: var(--sz, 7px); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #fff6c8 0 25%, #ffb52e 45%, rgba(255,90,0,0) 72%); animation: dino-emb 1.6s cubic-bezier(.2,.7,.4,1) forwards; }
@keyframes dino-emb { from { transform: translate(0, 0); opacity: 1; } to { transform: translate(var(--dx), var(--dy)); opacity: 0; } }
/* amber: a sheen of light passes over it when tapped */
.dino-amber .dino-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,190,.75) 48%, transparent 66%); background-size: 260% 100%; }
.dino-amber.shine .dino-sheen { animation: dino-sheen 1.3s ease; }
@keyframes dino-sheen { 0% { opacity: 1; background-position: 120% 0; } 100% { opacity: 1; background-position: -60% 0; } }
.dino-baby .dino-relic { -webkit-mask-image: radial-gradient(closest-side, #000 40%, transparent 100%); mask-image: radial-gradient(closest-side, #000 40%, transparent 100%); }
/* the cake: candles to match the age, flames drawn live; tap them out */
.dino-cake-wrap { position: relative; width: min(92vw, 420px); margin: 0 auto 4px; }
canvas.dino-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%); }
.dino-cake-hint { margin: -10px 0 18px; color: var(--d-amber); font: 700 19px var(--d-head); letter-spacing: .08em; text-transform: uppercase; min-height: 1.4em; }
#dino-confetti { position: fixed; inset: 0; z-index: 30; width: 100%; height: 100%; pointer-events: none; }
/* little windows into the jungle between some sections: looping strips of the film's own footage */
/* Gary 23/9: "a bit of a gap between that and the video underneath": each strip sits clear of the words above it */
.dino-sceneband { position: relative; height: 210px; 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%); }
.dino-sceneband video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.88) contrast(1.02) brightness(.82); }
.dino-sceneband .dino-glow { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 50% 105%, rgba(255,186,90,.20), transparent 70%),
  linear-gradient(180deg, rgba(4,8,5,.75), rgba(4,8,5,0) 32%, rgba(4,8,5,0) 62%, rgba(4,8,5,.85)); }
.dino-sceneband::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 -28px 30px -18px rgba(4,8,5,.95), inset 0 28px 30px -18px rgba(4,8,5,.95); }
.dino-mist { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.dino-sealed .dino-mist { display: none; }
.dino-mist i { position: absolute; width: 140vmax; height: 60vmax; border-radius: 50%; filter: blur(60px); opacity: .5;
  background: radial-gradient(closest-side, rgba(90,140,80,.22), rgba(90,140,80,0)); animation: dino-drift 38s ease-in-out infinite alternate; }
.dino-mist i:nth-child(1) { left: -60vmax; top: 10%; }
.dino-mist i:nth-child(2) { right: -70vmax; top: 45%; animation-duration: 46s; animation-delay: -12s; }
.dino-mist i:nth-child(3) { left: -40vmax; top: 75%; animation-duration: 54s; animation-delay: -30s; background: radial-gradient(closest-side, rgba(255,197,61,.08), rgba(255,197,61,0)); }
@keyframes dino-drift { from { transform: translateX(-12vmax); } to { transform: translateX(22vmax); } }

/* ---- the page below: the test page's look ---- */
.dino-page .sc-section { position: relative; max-width: 560px; padding: 44px 20px 34px; border-bottom: 0; text-align: center; font-family: var(--d-body); color: var(--d-ink); }
.dino-page .sc-flow > .sc-section, .dino-page .sc-flow > .sc-footer { position: relative; z-index: 1; }
.dino-page .sc-h2, .dino-page .sc-script { margin: 0 0 16px; color: var(--d-amber); font: 800 40px/1.05 var(--d-head); letter-spacing: .01em; text-transform: uppercase; }
.dino-page .sc-rule, .dino-page .sc-rule-sm { width: 72px; height: 3px; margin: 0 auto 20px; border: 0; border-radius: 3px; background: linear-gradient(90deg, transparent, var(--d-lime), transparent); }
.dino-page .sc-lead { font-size: 17px; line-height: 1.6; color: var(--d-ink); }
.dino-page .sc-signature { font: 700 24px/1.25 var(--d-head); letter-spacing: .02em; color: var(--d-lime); margin-top: 12px; text-transform: uppercase; }
.dino-page #dresscode .sc-lead { font-size: 18px; }
.dino-eyebrow { margin: 0 0 6px; color: var(--d-lime); font: 700 16px var(--d-head); letter-spacing: .22em; text-transform: uppercase; }
.dino-page .sc-detail { display: block; padding: 14px 12px; margin: 0 0 14px; border: 1px solid var(--d-line); border-radius: 14px; background: rgba(10,19,11,.72); }
.dino-page .sc-label { display: block; margin: 0 0 4px; color: var(--d-lime); font: 700 14px var(--d-head); letter-spacing: .2em; text-transform: uppercase; }
.dino-page .sc-value { font-weight: 700; font-size: 18px; line-height: 1.45; color: var(--d-ink); }
.dino-page .countdown-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 14px 0 12px; padding: 0; background: none; border: 0; }
.dino-page .countdown-item { padding: 12px 0 8px; border: 1px solid var(--d-line); border-radius: 14px; background: rgba(10,19,11,.72); }
.dino-page .countdown-val { display: block; font: 800 40px/1 var(--d-head); color: var(--d-amber); font-variant-numeric: tabular-nums; }
.dino-page .countdown-lbl { color: var(--d-muted); font: 700 12px var(--d-head); letter-spacing: .18em; text-transform: uppercase; }
.dino-page .sc-timeline { list-style: none; margin: 16px 0 12px; padding: 0; text-align: left; }
.dino-page .sc-timeline li { display: grid; grid-template-columns: 86px 1fr; gap: 12px; padding: 11px 4px; border-bottom: 1px dashed var(--d-line); }
.dino-page .sc-timeline .sc-dot, .dino-page .sc-timeline .sc-ico { display: none; }
.dino-page .sc-time { color: var(--d-lime); font: 700 18px var(--d-head); letter-spacing: .04em; }
.dino-page .sc-what { font-size: 17px; line-height: 1.45; color: var(--d-ink); }
.dino-page .sc-map { margin: 18px 0 10px; padding: 8px; border: 0; border-radius: 16px; background: linear-gradient(145deg, #6d5a2c, #3a2f14 55%, #6d5a2c);
  box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.dino-page .sc-map iframe { display: block; width: 100%; height: 300px; border: 0; border-radius: 10px; background: #1a1f18; }
.dino-page .sc-btn { border-radius: 999px; min-height: 48px; padding: 12px 22px; font: 800 17px var(--d-head); letter-spacing: .06em; 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]) .dino-page .sc-btn-solid { background: var(--d-amber); border: 2px solid var(--d-amber); color: #2a1d00; }
.dino-page .sc-btn-ghost { background: transparent; border: 2px solid var(--d-amber); color: var(--d-amber); }
.dino-page .sc-alt-links, .dino-page .sc-alt-links a { color: var(--d-muted); }
.dino-page .sc-form { text-align: left; }
.dino-page .sc-form label, .dino-page .sc-legend { display: block; margin: 16px 0 6px; color: var(--d-lime); font: 700 14px var(--d-head); letter-spacing: .16em; text-transform: uppercase; }
.dino-page .sc-form input[type="text"], .dino-page .sc-form input[type="tel"], .dino-page .sc-form input[type="email"], .dino-page .sc-form select, .dino-page .sc-form textarea {
  width: 100%; padding: 13px 14px; border-radius: 12px; border: 1px solid rgba(155,225,93,.35); background: rgba(10,19,11,.9); color: var(--d-ink); font: 600 17px var(--d-body); }
.dino-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(255,197,61,.55); color: var(--d-ink); font: 700 17px var(--d-body); letter-spacing: 0; text-transform: none; box-shadow: none; }
html:not([data-ss]) .dino-page .sc-choice span { background: transparent; }
html:not([data-ss]) .dino-page .sc-choice input:checked + span { background: var(--d-amber); border-color: var(--d-amber); color: #2a1d00; }
[data-ss] .dino-page .sc-choice input:checked + span { border-color: var(--d-amber); }
.dino-page .sc-thanks { border: 2px solid var(--d-lime); border-radius: 16px; background: rgba(155,225,93,.08); padding: 16px; text-align: left; }
.dino-page .sc-footer { position: relative; padding: 50px 24px 70px; text-align: center; }
.dino-page .sc-footer .sc-script { font: 800 40px/1.05 var(--d-head); color: var(--d-amber); text-transform: uppercase; }
.dino-page .dino-again { margin-top: 18px; }

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

/* ---- Samsung Internet (html[data-ss]): the coloured buttons take their colour from a picture inside them and their words
   from an ink picture (kids-dino-stage.js ssButton), like the app's gold buttons (views/guest.ejs), because Samsung's dark
   mode flips any colour the page draws (Gary 23/9: "Count me in" came out as a red box) but keeps pictures' colours ---- */
.dino-btn, .dino-go { position: relative; }
.dino-btn, .dino-go, .dino-egg-label { isolation: isolate; }
[data-ss] .dino-btn:not(.dino-ghost), [data-ss] .dino-go, [data-ss] .dino-egg-label { background: transparent; border-color: transparent; }
[data-ss] :is(.dino-btn, .dino-go, .dino-egg-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] .ss-ink-amber { background: var(--ss-ink-button, url('/themes/kids-dino/assets/ss-ink-button.jpg')) center / cover; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
[data-ss] .ss-ink-lime { background: url('/themes/kids-dino/assets/ss-ink-lime.jpg') center / cover; -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 */
.dino-open > .dino-open-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; pointer-events: none; }
.dino-open::before { z-index: 1; }
.dino-open .dino-card { z-index: 2; }