/* The Dinosaur face film's page below the film, in the old Dinosaur invite's look (11 Nov 2026, Gary: "keep it kind of similar to that ...
   Maybe just use that"). Loaded only when theme.adventure.dino_page is set (views/partials/adventure-stage.ejs), after adventure.css and
   kids-dino.css; these rules copy kids-dino.css's ".dino-page" page rules onto the face film page, strong enough to win over adventure.css.
   The film and the parchment card under it keep the face film's own look; from the countdown down it is the old invite's page: near-black
   jungle, the real objects lighting up as they arrive (public/js/kids-dino-decor.js), amber headings, lime labels, dark panels. */
html body[data-adventure="kids-dino-face"] { --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; --adv-page: #040805; background: #040805; background-image: none; }
html body[data-adventure="kids-dino-face"] .sc-flow, html body[data-adventure="kids-dino-face"] .sc-footer {
  --adv-card: none; --adv-card-line: var(--d-line); --adv-card-ring: transparent; --adv-ink: var(--d-ink); --adv-muted: var(--d-muted); --adv-accent: var(--d-lime);
  --adv-field: rgba(10,19,11,.9); --adv-field-line: rgba(155,225,93,.35); }
body.adventure-sealed .dino-mist { display: none; }
html body[data-adventure="kids-dino-face"] .adventure-top { z-index: 1; }   /* the drifting mist goes behind the parchment card, as on the old invite */

/* the sections: no cards, the objects and words straight on the dark page, above the drifting mist */
html body[data-adventure="kids-dino-face"] .sc-flow > .sc-section { position: relative; z-index: 1; box-sizing: border-box; width: 100%; max-width: 560px; margin: 0 auto; padding: 44px 20px 34px;
  border: 0; border-radius: 0; background: none; box-shadow: none; text-align: center; font-family: var(--d-body); color: var(--d-ink); }
html body[data-adventure="kids-dino-face"] .sc-flow > .sc-section::before, html body[data-adventure="kids-dino-face"] .sc-flow > .sc-section::after { display: none; }
html body[data-adventure="kids-dino-face"] .sc-flow .adv-eyebrow { display: none; }
html body[data-adventure="kids-dino-face"] .sc-flow .dino-cake-wrap { max-width: 100%; }   /* the cake stays inside a narrow phone's screen */   /* the old invite's own eyebrows come with the objects */
html body[data-adventure="kids-dino-face"] .sc-flow .sc-h2, html body[data-adventure="kids-dino-face"] .sc-flow .sc-script,
html body[data-adventure="kids-dino-face"] .sc-footer .sc-script { margin: 0 0 16px; color: var(--d-amber); font: 800 40px/1.05 var(--d-head); letter-spacing: .01em; text-transform: uppercase; text-shadow: none; }
html body[data-adventure="kids-dino-face"] .sc-flow .sc-rule, html body[data-adventure="kids-dino-face"] .sc-flow .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); }
html body[data-adventure="kids-dino-face"] .sc-flow .sc-lead { font: 400 17px/1.6 var(--d-body); color: var(--d-ink); }
html body[data-adventure="kids-dino-face"] #dresscode .sc-lead { font-size: 18px; }
html body[data-adventure="kids-dino-face"] .sc-flow .sc-signature { margin-top: 12px; font: 700 24px/1.25 var(--d-head); letter-spacing: .02em; color: var(--d-lime); text-transform: uppercase; }
html body[data-adventure="kids-dino-face"] .sc-flow .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); }
html body[data-adventure="kids-dino-face"] .sc-flow .sc-label { display: block; margin: 0 0 4px; color: var(--d-lime); font: 700 14px var(--d-head); letter-spacing: .2em; text-transform: uppercase; }
html body[data-adventure="kids-dino-face"] .sc-flow .sc-value { font: 700 18px/1.45 var(--d-body); color: var(--d-ink); }
html body[data-adventure="kids-dino-face"] .sc-flow .countdown-bar { gap: 8px; margin: 14px 0 12px; }
html body[data-adventure="kids-dino-face"] .sc-flow .countdown-item { padding: 12px 0 8px; border-radius: 14px; background: rgba(10,19,11,.72); box-shadow: inset 0 0 0 1px var(--d-line); }
html body[data-adventure="kids-dino-face"] .sc-flow .countdown-val { font: 800 40px/1 var(--d-head); color: var(--d-amber); }
html body[data-adventure="kids-dino-face"] .sc-flow .countdown-lbl { color: var(--d-muted); font: 700 12px var(--d-head); letter-spacing: .18em; }
html body[data-adventure="kids-dino-face"] .sc-flow .sc-timeline { list-style: none; margin: 16px 0 12px; padding: 0; text-align: left; }
html body[data-adventure="kids-dino-face"] .sc-flow .sc-timeline li { display: grid; grid-template-columns: 86px 1fr; gap: 12px; padding: 11px 4px; border-bottom: 1px dashed var(--d-line); }
html body[data-adventure="kids-dino-face"] .sc-flow .sc-timeline .sc-dot, html body[data-adventure="kids-dino-face"] .sc-flow .sc-timeline .sc-ico { display: none; }
html body[data-adventure="kids-dino-face"] .sc-flow .sc-time { color: var(--d-lime); font: 700 18px var(--d-head); letter-spacing: .04em; }
html body[data-adventure="kids-dino-face"] .sc-flow .sc-what { font: 400 17px/1.45 var(--d-body); color: var(--d-ink); }
html body[data-adventure="kids-dino-face"] .sc-flow .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); }
html body[data-adventure="kids-dino-face"] .sc-flow .sc-btn { border-radius: 999px; min-height: 48px; padding: 12px 22px; font: 800 17px var(--d-head); letter-spacing: .06em; text-transform: uppercase; }
html:not([data-ss]) body[data-adventure="kids-dino-face"] .sc-flow .sc-btn-solid { background: var(--d-amber); border: 2px solid var(--d-amber); color: #2a1d00; box-shadow: none; }
html body[data-adventure="kids-dino-face"] .sc-flow .sc-btn-ghost { background: transparent; border: 2px solid var(--d-amber); color: var(--d-amber); box-shadow: none; }
html body[data-adventure="kids-dino-face"] .sc-flow .sc-form { text-align: left; }
html body[data-adventure="kids-dino-face"] .sc-flow .sc-form label, html body[data-adventure="kids-dino-face"] .sc-flow .sc-legend { display: block; margin: 16px 0 6px; color: var(--d-lime); font: 700 14px var(--d-head); letter-spacing: .16em; text-transform: uppercase; }
html body[data-adventure="kids-dino-face"] .sc-flow .sc-form :is(input[type="text"], input[type="tel"], input[type="email"], select, 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); }
html body[data-adventure="kids-dino-face"] .sc-flow .sc-choice span { min-height: 54px; padding: 10px; border-radius: 14px; 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]) body[data-adventure="kids-dino-face"] .sc-flow .sc-choice span { background: transparent; }
html:not([data-ss]) body[data-adventure="kids-dino-face"] .sc-flow .sc-choice input:checked + span { background: var(--d-amber); border-color: var(--d-amber); color: #2a1d00; }
html body[data-adventure="kids-dino-face"] .sc-flow .sc-thanks { border: 2px solid var(--d-lime); border-radius: 16px; background: rgba(155,225,93,.08); padding: 16px; text-align: left; color: var(--d-ink); }
/* the closing words: the baby dinosaur on the dark page, like the old invite (no jungle picture behind) */
html body[data-adventure="kids-dino-face"] .sc-footer { position: relative; z-index: 1; margin-top: 0; padding: 50px 24px 70px; background: none; text-align: center; }
html body[data-adventure="kids-dino-face"] .sc-footer::before { display: none; }
html body[data-adventure="kids-dino-face"] .sc-footer .sc-footer-sub { color: var(--d-muted); text-shadow: none; }
@media (min-width: 700px) { html body[data-adventure="kids-dino-face"] .sc-flow :is(.sc-h2, .sc-script) { font-size: 48px; } html body[data-adventure="kids-dino-face"] .sc-flow > .sc-section { padding-top: 64px; } }

/* 12 Nov 2026 (Gary: each face film page should match its cover, "themed ... and not plain"). His 11 Nov choice stays: the old invite's
   objects, mist and dark jungle (the objects are photos on black, so the page stays dark behind them). The words now sit on parchment
   cards like the card under the film, the page gets the cover's warm party lights at night, and the buttons the cover's golden yellow. */
html body[data-adventure="kids-dino-face"] {
  --p-card: radial-gradient(ellipse at 50% 35%, #fbf6e4 0, #f1e6c4 70%, #e2d3a2 100%); --p-line: #4f6b2a; --p-ink: #20391d; --p-label: #8a5a12;
  --p-gold: linear-gradient(180deg, #ffd66b, #e8a81c);
  background: radial-gradient(circle at 30% 40%, rgba(255,214,120,.6) 0, rgba(255,200,90,.2) 3px, transparent 7px) 0 0 / 173px 241px,
    radial-gradient(circle at 70% 60%, rgba(255,190,80,.24) 0, rgba(255,190,80,.09) 14px, transparent 26px) 0 0 / 293px 419px,
    radial-gradient(circle at 25% 80%, rgba(170,230,110,.16) 0, rgba(170,230,110,.05) 12px, transparent 22px) 0 0 / 331px 557px,
    linear-gradient(90deg, rgba(24,54,26,.8) 0, rgba(5,11,6,0) 20%, rgba(5,11,6,0) 80%, rgba(24,54,26,.8) 100%) 0 0 / 100% 100% no-repeat,
    linear-gradient(180deg, #081209 0, #050b06 45%, #070f08 100%) 0 0 / 100% 100% no-repeat, #050b06; }
html body[data-adventure="kids-dino-face"] .sc-flow :is(.sc-h2, .sc-script) { text-shadow: 0 2px 16px rgba(255,170,40,.28); }
/* the cards */
html body[data-adventure="kids-dino-face"] .sc-flow :is(.sc-detail, .sc-timeline, .sc-form, .sc-thanks, .countdown-item),
html body[data-adventure="kids-dino-face"] .sc-flow .sc-centered > .sc-lead {
  border: 0; border-radius: 16px; background: var(--p-card); color: var(--p-ink); outline: 1.5px dashed rgba(79,107,42,.55); outline-offset: -8px;
  box-shadow: inset 0 0 0 3px var(--p-line), 0 14px 32px rgba(0,0,0,.55), 0 0 26px rgba(255,197,61,.12); }
html body[data-adventure="kids-dino-face"] .sc-flow .sc-detail { padding: 18px 18px 16px; }
html body[data-adventure="kids-dino-face"] .sc-flow .sc-timeline { padding: 10px 18px; }
html body[data-adventure="kids-dino-face"] .sc-flow .sc-form { padding: 8px 18px 20px; }
html body[data-adventure="kids-dino-face"] .sc-flow .sc-thanks { padding: 18px; }
html body[data-adventure="kids-dino-face"] .sc-flow .sc-centered > .sc-lead { padding: 20px 20px; margin-left: auto; margin-right: auto; }
html body[data-adventure="kids-dino-face"] .sc-flow .countdown-item { outline-offset: -6px; }
/* the words on the cards */
html body[data-adventure="kids-dino-face"] .sc-flow :is(.sc-label, .sc-time, .countdown-lbl) { color: var(--p-label); }
html body[data-adventure="kids-dino-face"] .sc-flow :is(.sc-value, .sc-what, .sc-thanks) { color: var(--p-ink); }
html body[data-adventure="kids-dino-face"] .sc-flow .sc-centered > .sc-lead { color: var(--p-ink); font-weight: 600; }
html body[data-adventure="kids-dino-face"] .sc-flow .countdown-val { color: var(--p-ink); }
html body[data-adventure="kids-dino-face"] .sc-flow .sc-timeline li { border-bottom-color: rgba(79,107,42,.35); }
html body[data-adventure="kids-dino-face"] .sc-flow .sc-timeline li:last-child { border-bottom: 0; }
html body[data-adventure="kids-dino-face"] .sc-flow .sc-form :is(label, .sc-legend) { color: var(--p-label); }
html body[data-adventure="kids-dino-face"] .sc-flow .sc-form :is(input[type="text"], input[type="tel"], input[type="email"], select, textarea) {
  background: #fffdf4; border: 1.5px solid rgba(79,107,42,.45); color: var(--p-ink); }
html body[data-adventure="kids-dino-face"] .sc-flow .sc-form :is(input, textarea)::placeholder { color: #6f7a58; opacity: 1; }
html body[data-adventure="kids-dino-face"] .sc-flow .sc-form :is(input, textarea, select):focus { border-color: #c98f12; box-shadow: 0 0 0 3px rgba(255,197,61,.35); outline: 0; }
html body[data-adventure="kids-dino-face"] .sc-flow .sc-form .rsvp-privacy { color: #5f6b4a; }
html body[data-adventure="kids-dino-face"] .sc-flow .sc-choice span { border-color: rgba(79,107,42,.5); color: var(--p-ink); }
html body[data-adventure="kids-dino-face"] .sc-flow .sc-form { --adv-field: #fffdf4; }   /* Android too: the not-chosen answer is light with dark words */
html body[data-adventure="kids-dino-face"] .sc-flow .sc-choice span { background: #fffdf4; }
html:not([data-ss]) body[data-adventure="kids-dino-face"] .sc-flow .sc-choice input:checked + span { background: var(--p-gold); border-color: #c98f12; color: #2a1d00;
  box-shadow: 0 0 0 3px rgba(255,197,61,.3), 0 6px 14px rgba(0,0,0,.18); }
/* the buttons: the cover's golden yellow, as on the card under the film */
html:not([data-ss]) body[data-adventure="kids-dino-face"] .sc-flow .sc-btn-solid { background: var(--p-gold); border: 0; color: #2a1d00;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.15), 0 8px 18px rgba(0,0,0,.35); }
html body[data-adventure="kids-dino-face"] .sc-flow .sc-btn-ghost { background: rgba(10,19,11,.6); }