/* =====================================================================================
   THE KIDS' SCENE DESIGNS (theme envelope_style "scene", 30 Sep 2026), loaded only for them (views/guest.ejs): one look for the
   storybook batch, the Monster Truck's (public/css/kids-trucks.css) with each theme's colours as CSS variables (set in
   views/partials/scene-stage.ejs from theme.scene.pal): a dark page, glowing headings in the design's own font, the design
   itself as the opening (the tap brings it to life), its top as the top of the page, then the sections with an eyebrow +
   icon each, the character scene, the tap game and the pass (public/js/kids-scene-decor.js).
   ===================================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap');
.scene-page { --k-body: 'Nunito', 'Segoe UI', system-ui, -apple-system, sans-serif; color-scheme: dark; }
.scene-page [hidden] { display: none !important; }

/* ---- locking ---- */
.scene-page.gf-locked { position: static; height: auto; overflow: visible; }
.scene-page.gf-locked .stage-scroll { pointer-events: auto; }
body.ks-sealed { overflow: hidden; overscroll-behavior: none; }
.ks-sealed .sc-flow, .ks-sealed .sc-music, .ks-sealed .ks-top { display: none !important; }
.scene-page .sc-hero { display: none; }
html:has(body.scene-page), body.scene-page { overflow-x: hidden; background: var(--k-bg); }
.scene-page #card-stage.stage-scroll { background: radial-gradient(120% 40% at 50% 0, var(--k-bg2), transparent 70%), var(--k-bg); }
.scene-page .sc-flow { position: relative; overflow-x: clip; }

/* =============================== THE STAGE =============================== */
.ks-scene { position: relative; display: block; width: 100%; height: 100vh; height: 100svh; overflow: hidden; background: var(--k-bg);
  isolation: isolate; font-family: var(--k-body); color: var(--k-ink); -webkit-tap-highlight-color: transparent; }
.ks-fill { position: absolute; inset: -40px; background-size: cover; background-position: center; filter: blur(22px) brightness(.62) saturate(1.2); }
.ks-card { position: absolute; left: 50%; top: 50%; width: min(100%, calc((100svh - 40px) * .7143), 620px); aspect-ratio: 1000 / 1400;
  transform: translate(-50%, -50%); container-type: inline-size; overflow: hidden; border-radius: 6px; box-shadow: 0 20px 60px #000a; }
.ks-zoom { position: absolute; inset: 0; will-change: transform; }
.ks-bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ks-main { position: absolute; display: block; object-fit: contain; z-index: 2; cursor: pointer; transform-origin: 50% 90%; }
.ks-f { position: absolute; z-index: 3; display: flex; align-items: center; pointer-events: none; }
.ks-f > span { display: inline-block; white-space: nowrap; line-height: 1; paint-order: stroke fill; transform-origin: center; }
.ks-glow { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; background: radial-gradient(40% 30% at var(--gx, 50%) var(--gy, 50%), var(--k-glow), transparent 70%); }
.ks-fx { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.ks-fx i, .ks-fx .ks-word { position: absolute; width: var(--sz, 2cqw); height: var(--sz, 2cqw); margin: calc(var(--sz, 2cqw) / -2); opacity: 0; }
.ks-siren { position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background: radial-gradient(60% 40% at 20% 10%, #ff1a1acc, transparent 70%), radial-gradient(60% 40% at 80% 10%, #1a5cffcc, transparent 70%); }
.ks-kicker { position: absolute; left: 0; right: 0; top: 14px; margin: 0; z-index: 5; text-align: center; font: 800 11px/1 var(--k-body);
  letter-spacing: .3em; text-transform: uppercase; color: #fff; text-shadow: 0 2px 8px #000; pointer-events: none; }
@media (min-height: 700px) { .ks-kicker { top: calc(50% - min(100vw, calc((100svh - 40px) * .7143), 620px) * .7 - 26px); } }

/* the tap button sits in the design's own empty lower plate */
.ks-cta { position: absolute; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6cqw; padding: 0; border: 0;
  background: none; cursor: pointer; color: var(--k-btn-ink); font-family: var(--k-body); -webkit-tap-highlight-color: transparent; }
.ks-cta-ico { display: grid; place-items: center; width: 13cqw; height: 13cqw; border-radius: 50%; color: var(--k-btn-ink);
  background: radial-gradient(circle at 35% 30%, #fff, var(--k-hot2) 55%, var(--k-hot)); box-shadow: 0 0 0 .6cqw #fff8, 0 0 5cqw var(--k-glow); animation: ks-pulse 1.3s ease-in-out infinite; }
.ks-cta-ico svg { width: 60%; height: 60%; }
.ks-cta-go { padding: 1.6cqw 4cqw; border-radius: 999px; background: linear-gradient(180deg, var(--k-hot2), var(--k-hot)); color: var(--k-btn-ink);
  font: 400 4.2cqw/1 var(--k-head); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 .8cqw 0 #0005, 0 0 4cqw var(--k-glow); }
.ks-cta-hint { font: 800 2.3cqw/1.2 var(--k-body); letter-spacing: .08em; color: var(--k-edge); text-transform: uppercase; }
@keyframes ks-pulse { 50% { transform: scale(1.09); box-shadow: 0 0 0 1.2cqw #fff5, 0 0 8cqw var(--k-glow); } }

/* the bar */
.ks-bar { position: absolute; top: 10px; right: 10px; z-index: 7; display: flex; gap: 6px; }
.ks-chip { min-height: 34px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--k-hot2); background: #000a; color: var(--k-hot2);
  font: 800 11px/1 var(--k-body); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ks-chip[aria-pressed="false"] { opacity: .7; }
.edit-mode .ks-bar, .edit-mode .ks-cta, .edit-mode .ks-kicker { display: none !important; }
.ks-bang { position: absolute; left: 0; right: 0; top: 36%; z-index: 8; text-align: center; pointer-events: none; opacity: 0;
  font: 400 clamp(80px, 30vw, 160px)/1 'Archivo Black', Impact, sans-serif; color: #ffe400; -webkit-text-stroke: 5px #111; paint-order: stroke fill; text-shadow: 0 8px 0 #e32626; }

/* ---- phase: ready (the build-up) ---- */
[data-phase="ready"] .ks-glow { opacity: 1; animation: ks-glow .5s ease-in-out infinite alternate; }
[data-phase="ready"] .ks-cta, [data-phase="ready"] .ks-kicker { opacity: 0; transform: scale(.9); transition: opacity .3s, transform .3s; pointer-events: none; }
[data-phase="ready"][data-move="swim-up"] .ks-main { animation: ks-bob .5s ease-in-out infinite alternate; }
[data-phase="ready"][data-move="rear"] .ks-main { animation: ks-stamp .35s ease-in-out infinite alternate; }
[data-phase="ready"][data-move="fly-at"] .ks-main { animation: ks-hover .3s ease-in-out infinite alternate; }
[data-phase="ready"][data-move="shake-burst"] .ks-main { animation: ks-shake .09s linear infinite; }
[data-phase="ready"][data-move="bounce"] .ks-main { animation: ks-hop .35s ease-in-out infinite alternate; }
[data-phase="ready"][data-siren] .ks-siren, [data-phase="burst"][data-siren] .ks-siren { animation: ks-siren .5s steps(2) infinite; }
@keyframes ks-glow { to { opacity: .55; } }
@keyframes ks-bob { to { transform: translateY(-2%) rotate(-2deg); } }
@keyframes ks-stamp { to { transform: rotate(-3deg) translateY(-1%); } }
@keyframes ks-hover { to { transform: translate(1%, -2%) rotate(-2deg); } }
@keyframes ks-shake { 0% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(-1.2%, .5%) rotate(-2deg); } 75% { transform: translate(1.2%, -.5%) rotate(2deg); } }
@keyframes ks-hop { to { transform: translateY(-6%); } }
@keyframes ks-siren { 0% { opacity: 1; } 50% { opacity: .15; } }

/* ---- phase: burst (the effect; the view pushes in on the main character) ---- */
[data-phase="burst"] .ks-zoom { animation: ks-push 2.4s cubic-bezier(.5,0,.85,.6) both; }
[data-phase="burst"] .ks-cta, [data-phase="burst"] .ks-kicker { opacity: 0; pointer-events: none; }
[data-phase="burst"] .ks-glow { opacity: 1; }
@keyframes ks-push { 0% { transform: scale(1); } 100% { transform: scale(2.6); } }
[data-phase="burst"][data-move="swim-up"] .ks-main { animation: ks-swim-up 2.4s ease-in-out both; }
[data-phase="burst"][data-move="rear"] .ks-main { transform-origin: 70% 100%; animation: ks-rear 1.6s cubic-bezier(.3,.7,.3,1) both; }
[data-phase="burst"][data-move="fly-at"] .ks-main { animation: ks-fly-at 1.8s cubic-bezier(.5,0,.6,1) both; }
[data-phase="burst"][data-move="shake-burst"] .ks-main { animation: ks-pop 1s cubic-bezier(.3,1.6,.4,1) both; }
[data-phase="burst"][data-move="bounce"] .ks-main { animation: ks-bounce 1.6s ease-out both; }
@keyframes ks-swim-up { 0% { transform: none; } 30% { transform: translate(3%, -3%) rotate(4deg); } 65% { transform: translate(-2%, -9%) rotate(-6deg); } 100% { transform: translate(4%, -16%) rotate(3deg) scale(1.08); } }
@keyframes ks-rear { 0% { transform: none; } 35% { transform: rotate(-14deg) translateY(-3%); } 70% { transform: rotate(-10deg) translateY(-2%); } 100% { transform: none; } }
@keyframes ks-fly-at { 0% { transform: none; } 30% { transform: translate(-3%, 2%) scale(.95) rotate(-4deg); } 100% { transform: translate(20%, -12%) scale(2.2) rotate(6deg); } }
@keyframes ks-pop { 0% { transform: none; } 40% { transform: translateY(-8%) scale(1.12); } 100% { transform: translateY(-2%) scale(1.05); } }
@keyframes ks-bounce { 0%, 100% { transform: none; } 20% { transform: translateY(-12%); } 40% { transform: none; } 60% { transform: translateY(-8%); } 80% { transform: none; } }
[data-phase="burst"] .ks-fx i, [data-phase="burst"] .ks-fx .ks-word { animation: ks-fly 1.8s cubic-bezier(.2,.6,.3,1) both; animation-delay: var(--dl, 0s); }
@keyframes ks-fly { 0% { opacity: 0; transform: translate(0, 0) scale(.3) rotate(0); } 12% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.6) rotate(var(--rot, 0deg)); } }
[data-fx="comic"][data-phase="burst"] .ks-bang { animation: ks-bang 1.4s cubic-bezier(.2,1.6,.4,1) both .25s; }
[data-fx="comic"] .ks-bang::before { content: 'POW!'; }
@keyframes ks-bang { 0% { opacity: 0; transform: scale(.2) rotate(-14deg); } 30% { opacity: 1; transform: scale(1.1) rotate(-8deg); } 80% { opacity: 1; } 100% { opacity: 0; transform: scale(1.6) rotate(-6deg); } }

/* the particles of each effect (the opening and the small bursts down the page) */
[data-fx="bubbles"] .ks-fx i, .ks-pt-bubbles { border-radius: 50%; background: radial-gradient(circle at 32% 30%, #fff 0 14%, #ffffff33 22%, #bff6ff22 60%, #ffffff66 72%, transparent 76%); box-shadow: inset 0 0 0 1px #ffffffaa; }
[data-fx="sparkles"] .ks-fx i, .ks-pt-sparkles { background: linear-gradient(135deg, #fff, var(--k-hot2)); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); filter: drop-shadow(0 0 6px var(--k-hot)); }
[data-fx="sparkles"] .ks-fx i:nth-child(3n) , .ks-pt-sparkles:nth-child(3n) { background: linear-gradient(135deg, #fff, var(--k-hot)); }
[data-fx="comic"] .ks-fx i, .ks-pt-comic { background: #ffe400; clip-path: polygon(50% 0, 61% 30%, 95% 18%, 72% 45%, 100% 62%, 66% 64%, 70% 100%, 50% 76%, 30% 100%, 34% 64%, 0 62%, 28% 45%, 5% 18%, 39% 30%); filter: drop-shadow(0 0 2px #111) drop-shadow(0 0 1px #e32626); }
[data-fx="comic"] .ks-fx i:nth-child(2n), .ks-pt-comic:nth-child(2n) { background: #ff2a2a; }
[data-fx="comic"] .ks-fx .ks-word { width: auto; height: auto; margin: 0; font: 400 5cqw/1 'Archivo Black', Impact, sans-serif; color: #ffe400; -webkit-text-stroke: .5cqw #111; paint-order: stroke fill; transform-origin: center; }
[data-fx="coins"] .ks-fx i, .ks-pt-coins { border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6c4, #f2c14b 45%, #b7811a 80%); box-shadow: inset 0 0 0 2px #8a5c0c88, 0 0 6px #f2c14b88; }
[data-fx="water"] .ks-fx i, .ks-pt-water { border-radius: 50% 50% 50% 0; background: radial-gradient(circle at 35% 35%, #fff, #8fd3ff 50%, #2a7fd0); transform: rotate(45deg); opacity: .9; }
.ks-pt { position: absolute; width: 14px; height: 14px; margin: -7px; opacity: 0; z-index: 3; pointer-events: none; animation: ks-pt 1.2s cubic-bezier(.2,.6,.3,1) both; animation-delay: var(--dl, 0s); }
@keyframes ks-pt { 0% { opacity: 0; transform: translate(0, 0) scale(.4); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.5) rotate(var(--rot, 0deg)); } }

/* the cloud in the theme's colours that fills the screen, then clears on the invitation */
.ks-cloud { position: fixed; inset: 0; z-index: 60; pointer-events: none; overflow: hidden; visibility: hidden; }
.ks-cloud::before { content: ''; position: absolute; inset: 0; background: var(--k-c2); opacity: 0; transition: opacity .9s ease-in; }
.ks-cloud i { position: absolute; bottom: -40vmax; width: var(--sz, 80vmax); height: var(--sz, 80vmax); margin-left: calc(var(--sz, 80vmax) / -2); border-radius: 50%;
  background: radial-gradient(circle, var(--k-c1) 0%, var(--k-c2) 40%, transparent 70%); opacity: 0; transform: translateY(40vh) scale(.3); }
.ks-cloud.rising, .ks-cloud.clearing { visibility: visible; }
.ks-cloud.rising i { animation: ks-billow 1.2s cubic-bezier(.2,.6,.3,1) both; animation-delay: var(--dl, 0s); }
.ks-cloud.rising::before { opacity: .96; transition-delay: .35s; }
@keyframes ks-billow { to { opacity: 1; transform: translateY(-30vh) scale(1); } }
.ks-cloud.clearing::before { opacity: 0; transition: opacity 1.3s ease-out; }
.ks-cloud.clearing i { animation: ks-clear 1.4s ease-out both; animation-delay: var(--dl, 0s); }
@keyframes ks-clear { from { opacity: 1; transform: translateY(-30vh) scale(1); } to { opacity: 0; transform: translateY(-80vh) scale(1.5); } }

/* ---- phase: open (the design's top is the top of the page: its headline, name and age) ---- */
[data-phase="open"].ks-scene { height: calc(min(100vw, 620px) * 1.4 * var(--k-hero)); }
[data-phase="open"] .ks-card { top: 0; transform: translateX(-50%); width: min(100vw, 620px); border-radius: 0; box-shadow: none; animation: ks-settle 1.8s ease-out both; }
[data-phase="open"] .ks-card::after { content: ''; position: absolute; left: 0; right: 0; top: calc(var(--k-hero) * 100% - 90px); height: 90px; z-index: 6; background: linear-gradient(transparent, var(--k-bg)); }
[data-phase="open"] .ks-fill, [data-phase="open"] .ks-cta, [data-phase="open"] .ks-kicker, [data-phase="open"] .ks-siren { display: none; }
[data-phase="open"] .ks-bar { left: 10px; right: auto; }
[data-phase="open"] .ks-chip#ks-sound { display: none; }
@keyframes ks-settle { from { filter: blur(4px) brightness(1.3); } }
[data-phase="open"] .ks-f-age > span { animation: ks-age-in 1.1s cubic-bezier(.2,1.4,.4,1) both .5s; }
@keyframes ks-age-in { from { transform: scale(.3) rotate(-8deg); opacity: 0; } }

/* =============================== THE TOP BLOCK =============================== */
.ks-top { padding: 4px 20px 26px; text-align: center; font-family: var(--k-body); color: var(--k-ink); background: var(--k-bg); }
.ks-age-line { margin: 0 0 16px; font: 800 12px/1.4 var(--k-body); letter-spacing: .26em; text-transform: uppercase; color: var(--k-hot2); }
.ks-details { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 0 auto 22px; max-width: 420px; }
.ks-details > div { background: var(--k-tile); border: 1px solid var(--k-edge); border-radius: 14px; padding: 14px 10px; box-shadow: inset 0 1px 0 #ffffff10; }
.ks-details dt { margin: 0 0 6px; font: 800 11px/1.3 var(--k-body); letter-spacing: .28em; text-transform: uppercase; color: var(--k-hot2); }
.ks-details dd { margin: 0; font: 700 17px/1.35 var(--k-body); color: var(--k-ink); }
.ks-actions { display: flex; gap: 10px; justify-content: center; max-width: 420px; margin: 0 auto; }
.ks-btn { display: inline-flex; align-items: center; justify-content: center; flex: 1 1 0; min-height: 52px; padding: 12px 14px; border-radius: 999px; border: 0; cursor: pointer; text-decoration: none;
  font: 400 16px/1 var(--k-head); letter-spacing: .08em; text-transform: uppercase; color: var(--k-btn-ink);
  background: linear-gradient(180deg, var(--k-hot2), var(--k-hot)); box-shadow: 0 0 20px var(--k-glow), 0 4px 0 #0006; }
.ks-btn:active { transform: translateY(3px); }
.ks-btn.ks-ghost { background: transparent; color: var(--k-hot2); border: 2px solid var(--k-hot2); box-shadow: 0 0 14px var(--k-glow); }

/* =============================== THE SECTIONS =============================== */
.scene-page .sc-section { background: transparent !important; color: var(--k-ink); text-align: center; }
.scene-page .sc-h2 { font-family: var(--k-head) !important; font-weight: 400 !important; font-size: clamp(30px, 9.5vw, 42px) !important; line-height: 1.08 !important;
  text-transform: uppercase; letter-spacing: .01em; color: var(--k-ink) !important; text-shadow: 0 0 18px var(--k-glow), 0 3px 0 #000; }
.scene-page .sc-script { font-family: var(--k-head) !important; font-weight: 400 !important; font-size: clamp(30px, 9vw, 40px) !important; text-transform: uppercase; color: var(--k-hot2) !important; text-shadow: 0 0 16px var(--k-glow); }
.scene-page .sc-lead, .scene-page .sc-value, .scene-page .sc-what { color: var(--k-ink) !important; font-family: var(--k-body); font-size: 18px; line-height: 1.55; }
.scene-page .sc-signature { color: var(--k-hot2) !important; font-family: var(--k-head) !important; letter-spacing: .04em; }
.scene-page .sc-label, .scene-page .sc-legend, .scene-page .sc-form label { color: var(--k-hot2) !important; font: 800 12px/1.3 var(--k-body) !important; letter-spacing: .24em; text-transform: uppercase; }
.scene-page .sc-rule, .scene-page .sc-rule-sm { height: 4px !important; width: 60% !important; max-width: 220px; border: 0 !important; margin: 12px auto 18px !important; border-radius: 4px;
  background: linear-gradient(90deg, transparent, var(--k-hot2), var(--k-hot), transparent) !important; }
.ks-head { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 8px; }
.ks-icon { display: block; width: 40px; height: 40px; color: var(--k-hot2); filter: drop-shadow(0 0 8px var(--k-glow)); }
.ks-icon svg { width: 100%; height: 100%; }
.ks-eyebrow { font: 800 12px/1.3 var(--k-body); letter-spacing: .32em; text-transform: uppercase; color: var(--k-hot2); }
.scene-page .countdown-bar { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 8px; max-width: 340px; margin: 10px auto 0; background: none !important; border: 0 !important; }
.scene-page .countdown-item { background: var(--k-tile) !important; border: 1px solid var(--k-edge) !important; border-radius: 12px; padding: 12px 0 8px; box-shadow: inset 0 -12px 18px #0005; }
.scene-page .countdown-val { display: block; font: 400 30px/1 var(--k-head) !important; color: var(--k-hot2) !important; text-shadow: 0 0 12px var(--k-glow); }
.scene-page .countdown-lbl { display: block; margin-top: 4px; font: 700 10px/1 var(--k-body) !important; letter-spacing: .24em; text-transform: uppercase; color: var(--k-mute) !important; }
.scene-page .sc-timeline { max-width: 380px; margin: 8px auto 0; text-align: left; }
.scene-page .sc-timeline li { border-bottom: 1px solid #ffffff14; padding: 12px 4px; }
.scene-page .sc-time { font: 400 16px/1 var(--k-head) !important; letter-spacing: .04em; color: var(--k-hot2) !important; }
.scene-page .sc-ico, .scene-page .sc-dot { color: var(--k-hot2) !important; }
.scene-page .sc-detail { background: var(--k-tile); border: 1px solid var(--k-edge); border-radius: 14px; padding: 14px; margin: 10px auto; max-width: 420px; }
.scene-page .sc-btn { border-radius: 999px !important; font-family: var(--k-head) !important; font-weight: 400 !important; letter-spacing: .08em; text-transform: uppercase; min-height: 50px; }
.scene-page .sc-btn-solid { background: linear-gradient(180deg, var(--k-hot2), var(--k-hot)) !important; color: var(--k-btn-ink) !important; border: 0 !important; box-shadow: 0 0 22px var(--k-glow), 0 4px 0 #0006 !important; }
.scene-page .sc-btn-ghost { background: transparent !important; color: var(--k-hot2) !important; border: 2px solid var(--k-hot2) !important; box-shadow: 0 0 14px var(--k-glow) !important; }
.scene-page .sc-alt-links a { color: var(--k-hot2) !important; }
.scene-page .sc-map { border: 2px solid var(--k-edge); border-radius: 14px; overflow: hidden; }
.scene-page .sc-form input[type="text"], .scene-page .sc-form textarea, .scene-page .sc-form select { background: var(--k-tile) !important; color: var(--k-ink) !important; border: 1px solid var(--k-edge) !important; border-radius: 12px !important; font: 400 17px/1.3 var(--k-body) !important; }
.scene-page .sc-form ::placeholder { color: var(--k-mute); opacity: .7; }
.scene-page .sc-choice { display: grid !important; grid-template-columns: 1fr; gap: 12px; }
.scene-page .sc-choice label span { display: flex; align-items: center; justify-content: center; min-height: 60px; padding: 12px 16px; border-radius: 16px !important;
  background: var(--k-tile) !important; color: var(--k-ink) !important; border: 2px solid var(--k-edge) !important; font: 400 17px/1.2 var(--k-head) !important; letter-spacing: .04em; text-transform: uppercase; }
.scene-page .sc-choice input:checked + span { border-color: var(--k-hot2) !important; background: linear-gradient(180deg, var(--k-bg2), var(--k-tile)) !important; color: #fff !important; box-shadow: 0 0 22px var(--k-glow), inset 0 0 18px var(--k-glow) !important; }
.scene-page .sc-thanks { color: var(--k-hot2) !important; }
.scene-page .sc-footer { background: transparent !important; }
.scene-page .sc-footer .sc-script { color: var(--k-hot2) !important; }
.scene-page .sc-footer-sub, .scene-page .sc-finale-day, .scene-page .sc-finale-month { color: var(--k-mute) !important; }
/* stronger fly-ins, like the approved pages: a touch of blur + overshoot */
.scene-page .sc-section.reveal > * { filter: blur(5px); }
.scene-page .sc-section.reveal.seen > * { filter: none; transition: opacity .7s ease-out, transform .9s cubic-bezier(.2,1.25,.35,1), filter .6s ease-out; }

/* =============================== THE CHARACTER SCENE =============================== */
.ks-arena, .ks-game { position: relative; height: 290px; margin: 26px -20px 0; overflow: hidden; isolation: isolate; }
.ks-arena-bg { position: absolute; inset: 0; background-size: cover; background-position: 50% var(--band, 40%); }
.ks-arena-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(var(--k-bg) 0, transparent 22%, transparent 70%, var(--k-bg) 100%); }
.ks-arena-fx { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.ks-actor { position: absolute; left: 50%; bottom: 18px; height: 230px; aspect-ratio: var(--ar, .7); transform: translateX(-50%); z-index: 2; cursor: pointer; -webkit-tap-highlight-color: transparent; outline-offset: 4px; }
.ks-actor :is(img, canvas) { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 8px #000a); display: block; }
.ks-actor:focus-visible { outline: 3px solid var(--k-hot2); border-radius: 12px; }
.ks-tap-hint { position: absolute; left: 0; right: 0; bottom: 4px; margin: 0; z-index: 4; font: 700 12px/1.2 var(--k-body); letter-spacing: .12em; text-transform: uppercase; color: var(--k-mute); }
[data-state="ready"] .ks-actor { transform: translateX(-50%) translateX(-120vw); }
[data-state="here"] .ks-actor :is(img, canvas) { animation: ks-idle 2.4s ease-in-out infinite alternate; }
@keyframes ks-idle { to { transform: translateY(-3%) rotate(-1.5deg); } }
[data-kind="swim"][data-state="enter"] .ks-actor { animation: ks-a-swim 2.2s ease-out both; }
[data-kind="gallop"][data-state="enter"] .ks-actor { animation: ks-a-gallop 2.2s cubic-bezier(.3,.6,.35,1) both; }
[data-kind="gallop"][data-state="enter"] .ks-actor :is(img, canvas) { animation: ks-gait .25s ease-in-out infinite alternate; }
[data-kind="fly"][data-state="enter"] .ks-actor { animation: ks-a-fly 2s cubic-bezier(.2,.7,.3,1) both; }
[data-kind="treasure"][data-state="enter"] .ks-actor { animation: ks-a-drop 1.6s cubic-bezier(.3,1.5,.5,1) both; }
[data-kind="dog"][data-state="enter"] .ks-actor { animation: ks-a-run 2.2s cubic-bezier(.3,.6,.35,1) both; }
[data-kind="dog"][data-state="enter"] .ks-actor :is(img, canvas) { animation: ks-gait .18s ease-in-out infinite alternate; }
@keyframes ks-a-swim { 0% { transform: translateX(-50%) translate(-110vw, 30px) rotate(8deg); } 40% { transform: translateX(-50%) translate(-40vw, -20px) rotate(-6deg); } 70% { transform: translateX(-50%) translate(-10vw, 14px) rotate(5deg); } 100% { transform: translateX(-50%); } }
@keyframes ks-a-gallop { 0% { transform: translateX(-50%) translateX(-110vw); } 100% { transform: translateX(-50%); } }
@keyframes ks-gait { to { transform: translateY(-4%) rotate(-1.5deg); } }
@keyframes ks-a-fly { 0% { transform: translateX(-50%) translate(-90vw, 220px) rotate(-18deg) scale(.6); } 70% { transform: translateX(-50%) translate(4vw, -16px) rotate(4deg) scale(1.05); } 100% { transform: translateX(-50%); } }
@keyframes ks-a-drop { 0% { transform: translateX(-50%) translateY(-360px); } 100% { transform: translateX(-50%); } }
@keyframes ks-a-run { 0% { transform: translateX(-50%) translateX(-110vw); } 100% { transform: translateX(-50%); } }
[data-state="react"] .ks-actor :is(img, canvas) { animation: ks-react 1.2s cubic-bezier(.3,1.4,.4,1) both; }
[data-kind="swim"][data-state="react"] .ks-actor :is(img, canvas) { animation: ks-r-swim 1.2s ease-in-out both; }
[data-kind="gallop"][data-state="react"] .ks-actor :is(img, canvas) { transform-origin: 70% 100%; animation: ks-rear 1.2s cubic-bezier(.3,.7,.3,1) both; }
[data-kind="fly"][data-state="react"] .ks-actor :is(img, canvas) { animation: ks-r-fly 1.2s cubic-bezier(.3,.7,.3,1) both; }
[data-kind="treasure"][data-state="react"] .ks-actor :is(img, canvas) { animation: ks-r-chest 1.1s ease-out both; }
[data-kind="dog"][data-state="react"] .ks-actor :is(img, canvas) { animation: ks-bounce 1.1s ease-out both; }
@keyframes ks-react { 40% { transform: scale(1.12) rotate(-4deg); } }
@keyframes ks-r-swim { 25% { transform: rotate(-10deg) translateY(-6%); } 55% { transform: rotate(9deg) translateY(-3%); } 100% { transform: none; } }
@keyframes ks-r-fly { 30% { transform: translate(8%, -14%) scale(1.15) rotate(8deg); } 70% { transform: translate(-6%, -6%) scale(1.08) rotate(-6deg); } 100% { transform: none; } }
@keyframes ks-r-chest { 0%, 100% { transform: none; } 10% { transform: rotate(-4deg); } 20% { transform: rotate(4deg); } 30% { transform: rotate(-3deg); } 45% { transform: translateY(-14%) scale(1.08); } 70% { transform: none; } }

/* =============================== THE TAP GAME =============================== */
.ks-game-intro { margin-bottom: 0 !important; }
.ks-game .ks-arena-bg::after { background: linear-gradient(var(--k-bg) 0, #0003 22%, #0003 78%, var(--k-bg) 100%); }
.ks-token { position: absolute; z-index: 2; width: 68px; height: 68px; margin: -34px; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  animation: ks-float 2.2s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -.37s); }
.ks-token span, .ks-token b { position: absolute; inset: 0; display: grid; place-items: center; }
.ks-token.hit { pointer-events: none; animation: ks-tok-hit .6s ease-out both; }
@keyframes ks-float { to { transform: translateY(-10px); } }
@keyframes ks-tok-hit { to { transform: scale(1.8); opacity: 0; } }
.ks-tok-bubble span { border-radius: 50%; background: radial-gradient(circle at 32% 30%, #fff 0 12%, #ffffff40 20%, #bff6ff26 58%, #ff9fe066 70%, #ffffffaa 74%, transparent 77%); box-shadow: inset 0 0 0 1.5px #ffffffcc, 0 0 18px #bff6ff66; }
.ks-tok-firework span { background: linear-gradient(135deg, #fff, var(--k-hot2)); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); filter: drop-shadow(0 0 10px var(--k-hot2)); animation: ks-twinkle .8s ease-in-out infinite alternate; }
@keyframes ks-twinkle { to { transform: scale(.75) rotate(20deg); } }
.ks-tok-comic { width: 96px; height: 96px; margin: -48px; }
.ks-tok-comic b { background: #ffe400; clip-path: polygon(50% 0, 61% 30%, 95% 18%, 72% 45%, 100% 62%, 66% 64%, 70% 100%, 50% 76%, 30% 100%, 34% 64%, 0 62%, 28% 45%, 5% 18%, 39% 30%);
  font: 400 17px/1 'Archivo Black', Impact, sans-serif; color: #e32626; letter-spacing: .02em; }
.ks-tok-comic:nth-of-type(2n) b { background: #ff2a2a; color: #ffe400; }
.ks-tok-coin { width: 54px; height: 54px; margin: -27px; }
.ks-tok-coin span { border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6c4, #f2c14b 45%, #b7811a 80%); box-shadow: inset 0 0 0 3px #8a5c0c88, 0 0 16px #f2c14b88; animation: ks-glint 1.6s ease-in-out infinite; }
@keyframes ks-glint { 50% { filter: brightness(1.5); } }
.ks-tok-flame span { left: 14%; right: 14%; top: 4%; bottom: 8%; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: radial-gradient(ellipse at 50% 72%, #fff5b0 0 16%, #ffd522 30%, #ff7a1a 56%, #e8261a 78%, transparent 80%); filter: drop-shadow(0 0 12px #ff5a1a); animation: ks-flicker .18s ease-in-out infinite alternate; transform-origin: 50% 100%; }
@keyframes ks-flicker { to { transform: scaleY(1.12) scaleX(.9) skewX(3deg); } }
.ks-tok-flame.hit { animation: ks-douse .8s ease-out both; }
@keyframes ks-douse { 40% { transform: scale(.6); filter: grayscale(1) brightness(1.6); } 100% { transform: scale(.2) translateY(-30px); opacity: 0; } }
.ks-game-status { min-height: 1.6em; margin: 10px 0 0 !important; font: 800 17px/1.4 var(--k-body) !important; color: var(--k-ink) !important; }
.ks-game.won + .ks-game-status { color: var(--k-hot2) !important; text-shadow: 0 0 10px var(--k-glow); }
.ks-game.won { box-shadow: inset 0 0 60px var(--k-glow); }
.ks-game-again { max-width: 220px; margin: 8px auto 0; }

/* =============================== THE PASS =============================== */
.ks-pass { position: relative; max-width: 300px; margin: 40px auto 26px; padding: 44px 20px 20px; border-radius: 16px; text-align: left; transform: rotate(-2deg);
  background: linear-gradient(160deg, var(--k-bg2), var(--k-tile)); color: var(--k-ink); box-shadow: 0 18px 40px #000c, 0 0 0 2px var(--k-edge), 0 0 30px var(--k-glow); }
.ks-pass::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 30px; border-radius: 16px 16px 0 0; background: linear-gradient(90deg, var(--k-hot), var(--k-hot2)); }
.ks-pass-top { display: block; margin: 0 0 10px; font: 800 11px/1.3 var(--k-body); letter-spacing: .18em; color: var(--k-hot2); }
.ks-pass-label { display: block; font: 800 11px/1.3 var(--k-body); letter-spacing: .3em; text-transform: uppercase; color: var(--k-mute); }
.ks-pass strong { display: block; min-height: 72px; margin: 6px 0 12px; padding-right: 96px; font: 400 30px/1.08 var(--k-head); text-transform: uppercase; color: var(--k-ink); overflow-wrap: normal; word-break: normal; }
.ks-pass-stamp { display: inline-block; padding: 8px 12px; border: 2px dashed var(--k-hot2); color: var(--k-hot2); font: 800 12px/1 var(--k-body); letter-spacing: .16em; text-transform: uppercase; transform: rotate(-5deg); }
.ks-pass.issued .ks-pass-stamp { background: var(--k-hot2); color: var(--k-btn-ink); animation: ks-stamp-in .5s cubic-bezier(.2,1.6,.4,1); }
@keyframes ks-stamp-in { from { transform: rotate(-5deg) scale(2.2); opacity: 0; } }
.ks-pass-photo { position: absolute; right: 10px; top: 46px; height: 110px; width: auto; filter: drop-shadow(0 6px 6px #000a); }
.ks-pass-icon { position: absolute; left: 14px; top: 6px; width: 20px; height: 20px; color: var(--k-btn-ink); }
.ks-pass-icon svg { width: 100%; height: 100%; }
.ks-pass-form { display: flex; flex-direction: column; gap: 10px; max-width: 320px; margin: 0 auto; text-align: left; }
.ks-pass-form label { color: var(--k-hot2); font: 800 12px/1.3 var(--k-body); letter-spacing: .24em; text-transform: uppercase; }
.ks-pass-form input { min-height: 50px; padding: 10px 14px; background: var(--k-tile); color: var(--k-ink); border: 1px solid var(--k-edge); border-radius: 12px; font: 400 17px/1.3 var(--k-body); }

@media (prefers-reduced-motion: reduce) {
  .scene-page *, .scene-page *::before, .scene-page *::after { animation: none !important; transition: none !important; }
  .ks-arena .ks-actor { transform: translateX(-50%) !important; }
  .ks-cloud { display: none; }
}

/* after the first captures (30/9): room above the design's headline for Replay / Music, a bigger tap button */
[data-phase="open"].ks-scene { height: calc(min(100vw, 620px) * 1.4 * var(--k-hero) + 50px); }
[data-phase="open"] .ks-card { top: 50px; }
.ks-cta-go { font-size: 5.2cqw; padding: 2cqw 5cqw; }
.ks-cta-ico { width: 15cqw; height: 15cqw; }
.ks-cta-hint { font-size: 2.6cqw; }

/* =====================================================================================
   30/9 round 2 (Gary): the opening is its own clear scene, not the printable; characters really move; decorations
   dress the page. Later rules in this block override the first version above.
   ===================================================================================== */
.ks-scene { container-type: inline-size; }
.ks-zoom { position: absolute; inset: 0; transform-origin: 50% 55%; }
.ks-backdrop { position: absolute; inset: -24px; background-size: cover; background-position: 50% 30%; filter: blur(5px) brightness(.78) saturate(1.2); }
.ks-zoom::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(var(--k-bg) 0%, color-mix(in srgb, var(--k-bg) 55%, transparent) 26%, transparent 46%, transparent 70%, color-mix(in srgb, var(--k-bg) 70%, transparent) 86%, var(--k-bg) 100%); }
.ks-glow { z-index: 2; background: radial-gradient(34% 26% at var(--gx, 50%) var(--gy, 62%), var(--k-glow), transparent 70%); }
.ks-fx { z-index: 6; }
.ks-hero-actor { position: absolute; left: 50%; bottom: 120px; height: clamp(230px, calc(100svh - 430px), 520px); aspect-ratio: var(--ar, .7); max-width: 96vw;
  transform: translateX(-50%); z-index: 3; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ks-rig { position: absolute; inset: 0; animation: ks-float-idle 3.2s ease-in-out infinite alternate; }
.ks-rig :is(img, canvas) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 14px 14px #0009); pointer-events: none; }
@keyframes ks-float-idle { to { transform: translateY(-2.5%) rotate(-1deg); } }
[data-move="swim-up"] .ks-rig { animation: ks-swim-idle 3.6s ease-in-out infinite alternate; }
@keyframes ks-swim-idle { 0% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-3%) rotate(-1.5deg); } 100% { transform: translate(1%, -1%) rotate(1deg); } }
/* the moving parts */
.rig-tail, .rig-fin { animation: ks-swish 1.5s ease-in-out infinite alternate; }   /* fin: 1/10, the mermaid (only the fin, no seam) */
@keyframes ks-swish { from { transform: rotate(-8deg); } to { transform: rotate(7deg); } }
.rig-cape { animation: ks-flutter .42s ease-in-out infinite alternate; }
@keyframes ks-flutter { from { transform: rotate(-3deg) skewY(2deg); } to { transform: rotate(4deg) skewY(-3deg) scaleX(1.03); } }
.rig-head { animation: ks-tilt 2.2s ease-in-out infinite alternate; }
@keyframes ks-tilt { 0%, 30% { transform: rotate(-4deg); } 70%, 100% { transform: rotate(5deg); } }
.rig-dogtail { animation: ks-wag .28s ease-in-out infinite alternate; }
@keyframes ks-wag { from { transform: rotate(-20deg); } to { transform: rotate(16deg); } }
/* the tap hint on the character itself */
.ks-ring { position: absolute; left: 50%; top: 50%; width: 60%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  border: 3px solid var(--k-hot2); box-shadow: 0 0 22px var(--k-glow); opacity: 0; animation: ks-ring-out 2s ease-out infinite; pointer-events: none; }
@keyframes ks-ring-out { 0% { opacity: .9; transform: translate(-50%, -50%) scale(.6); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.25); } }
[data-phase="open"] .ks-ring, [data-phase="burst"] .ks-ring, [data-phase="ready"] .ks-ring { display: none; }

/* the words at the top */
.ks-cover { position: absolute; left: 0; right: 0; top: 48px; z-index: 5; display: flex; flex-direction: column; align-items: center; padding: 0 14px; text-align: center; pointer-events: none; transition: opacity .35s, transform .45s; }
.ks-cover .ks-kicker { position: static; margin: 0 0 6px; font: 800 11px/1.3 var(--k-body); letter-spacing: .3em; text-transform: uppercase; color: #fff; text-shadow: 0 2px 8px #000; }
.ks-headline { margin: 0; max-width: 100%; white-space: nowrap; font-size: clamp(26px, 8.4vw, 42px); line-height: 1.05; text-transform: uppercase; paint-order: stroke fill; text-shadow: 0 3px 0 #0007, 0 0 18px var(--k-glow); }
.ks-name { margin: 2px 0 6px; max-width: 100%; white-space: nowrap; font-size: clamp(44px, 15vw, 70px); line-height: 1.05; paint-order: stroke fill; text-shadow: 0 4px 0 #0007, 0 0 22px var(--k-glow); }
.ks-badge { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 94px; height: 94px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, var(--k-hot2) 48%, var(--k-hot) 82%); border: 4px solid #fff; box-shadow: 0 0 0 3px var(--k-hot), 0 0 30px var(--k-glow), 0 8px 20px #0009; }
.ks-badge b { font-size: 52px; line-height: .9; font-weight: 400; color: var(--k-btn-ink); }
.ks-badge small { order: -1; margin-bottom: 2px; font: 800 9px/1 var(--k-body); letter-spacing: .16em; text-transform: uppercase; color: var(--k-btn-ink); }
/* one clear button */
.ks-scene > .ks-cta { position: absolute; left: 50%; top: auto; bottom: 50px; width: auto; height: auto; transform: translateX(-50%); z-index: 6; display: flex; flex-direction: row; align-items: center; gap: 12px;
  padding: 8px 26px 8px 8px; border-radius: 999px; background: linear-gradient(180deg, var(--k-hot2), var(--k-hot)); box-shadow: 0 0 30px var(--k-glow), 0 5px 0 #0007; animation: ks-cta-glow 1.6s ease-in-out infinite; }
.ks-scene > .ks-cta:active { transform: translateX(-50%) translateY(3px); }
@keyframes ks-cta-glow { 50% { box-shadow: 0 0 50px var(--k-hot2), 0 5px 0 #0007; } }
.ks-scene > .ks-cta .ks-cta-ico { width: 50px; height: 50px; background: #fff; color: var(--k-hot); animation: none; box-shadow: none; }
.ks-scene > .ks-cta .ks-cta-go { padding: 0; background: none; box-shadow: none; font: 400 19px/1 var(--k-head); color: var(--k-btn-ink); letter-spacing: .06em; white-space: nowrap; }
.ks-scene > .ks-cta-hint { position: absolute; left: 0; right: 0; bottom: 20px; margin: 0; z-index: 6; text-align: center; font: 800 11px/1.2 var(--k-body); letter-spacing: .14em; text-transform: uppercase; color: #fff; text-shadow: 0 2px 6px #000; }
[data-phase="ready"] .ks-cover, [data-phase="burst"] .ks-cover, [data-phase="ready"] > .ks-cta-hint, [data-phase="burst"] > .ks-cta-hint { opacity: 0; pointer-events: none; transition: opacity .3s; }
[data-phase="ready"] > .ks-cta, [data-phase="burst"] > .ks-cta { opacity: 0; pointer-events: none; transform: translateX(-50%) scale(.94); transition: opacity .3s, transform .3s; }
/* build-up + burst on the character */
[data-phase="ready"] .ks-hero-actor .ks-rig { animation: ks-shake .12s linear infinite; }
[data-phase="ready"][data-move="swim-up"] .ks-hero-actor .ks-rig { animation: ks-bob .5s ease-in-out infinite alternate; }
[data-phase="burst"][data-move="swim-up"] .ks-hero-actor .ks-rig { animation: ks-swim-up 2.4s ease-in-out both; }
[data-phase="burst"][data-move="rear"] .ks-hero-actor .ks-rig { transform-origin: 70% 100%; animation: ks-rear 1.6s cubic-bezier(.3,.7,.3,1) both; }
[data-phase="burst"][data-move="fly-at"] .ks-hero-actor .ks-rig { animation: ks-fly-at 1.8s cubic-bezier(.5,0,.6,1) both; }
[data-phase="burst"][data-move="shake-burst"] .ks-hero-actor .ks-rig { animation: ks-pop 1s cubic-bezier(.3,1.6,.4,1) both; }
[data-phase="burst"][data-move="bounce"] .ks-hero-actor .ks-rig { animation: ks-bounce 1.6s ease-out both; }
/* 1/10 Gary (trampoline): no shake on the tap, just faster bouncing -> move "spring": quick hops while it builds up, then three big bounces */
[data-phase="ready"][data-move="spring"] .ks-hero-actor .ks-rig { animation: ks-hop .18s ease-in-out infinite alternate; }
[data-phase="burst"][data-move="spring"] .ks-hero-actor .ks-rig { animation: ks-spring 1.8s ease-in-out both; }
@keyframes ks-spring { 0%, 100% { transform: none; } 14% { transform: translateY(-18%); } 28% { transform: translateY(1%) scaleY(.96); } 44% { transform: translateY(-13%); } 58% { transform: translateY(1%) scaleY(.97); } 74% { transform: translateY(-8%); } 88% { transform: none; } }
[data-phase="burst"] .ks-zoom { animation: ks-push2 2.4s cubic-bezier(.5,0,.85,.6) both; }
@keyframes ks-push2 { 0% { transform: scale(1); } 100% { transform: scale(2.3); } }
/* ambient particles */
.ks-ambient { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.ks-ambient i { position: absolute; width: var(--sz, 12px); height: var(--sz, 12px); opacity: 0; animation: ks-amb-rise var(--d, 8s) linear infinite; animation-delay: var(--dl, 0s); }
@keyframes ks-amb-rise { 0% { opacity: 0; transform: translateY(40vh); } 15% { opacity: .9; } 85% { opacity: .8; } 100% { opacity: 0; transform: translateY(-60vh); } }
@keyframes ks-amb-twinkle { 0%, 100% { opacity: 0; transform: scale(.4) rotate(0); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }
[data-fx="bubbles"] .ks-ambient i { border-radius: 50%; background: radial-gradient(circle at 32% 30%, #fff 0 14%, #ffffff33 22%, transparent 64%, #ffffff88 72%, transparent 76%); box-shadow: inset 0 0 0 1px #ffffffaa; }
[data-fx="sparkles"] .ks-ambient i, [data-fx="comic"] .ks-ambient i, [data-fx="coins"] .ks-ambient i { animation-name: ks-amb-twinkle; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
[data-fx="sparkles"] .ks-ambient i { background: linear-gradient(135deg, #fff, var(--k-hot2)); filter: drop-shadow(0 0 6px var(--k-hot)); }
[data-fx="comic"] .ks-ambient i { background: #ffe400; filter: drop-shadow(0 0 1px #111); }
[data-fx="coins"] .ks-ambient i { background: linear-gradient(135deg, #fff, #f2c14b); filter: drop-shadow(0 0 6px #f2c14b); }
[data-fx="water"] .ks-ambient i { border-radius: 50%; background: radial-gradient(circle, #ffd522, #ff5a1a 60%, transparent 70%); }
.ks-scene .ks-siren { z-index: 4; }

/* ---- the top of the page after the opening: the same scene, the name and the big age ---- */
[data-phase="open"].ks-scene { height: 80svh; min-height: 540px; max-height: 780px; }
[data-phase="open"] .ks-cover, [data-phase="open"] > .ks-cta, [data-phase="open"] > .ks-cta-hint, [data-phase="open"] .ks-siren { display: none; }
[data-phase="open"] .ks-hero-actor { bottom: auto; top: 54px; height: calc(100% - 330px); min-height: 200px; cursor: default; }
[data-phase="open"] .ks-zoom { animation: ks-settle 1.8s ease-out both; }
.ks-hero { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 5; padding: 0 16px; text-align: center; opacity: 0; transform: translateY(30px); pointer-events: none; }
[data-phase="open"] .ks-hero { opacity: 1; transform: none; transition: opacity .8s .3s, transform 1s .3s cubic-bezier(.2,1.2,.4,1); }
.ks-hero-name { margin: 0; font-size: clamp(42px, 14vw, 64px); font-weight: 400; line-height: 1.05; color: var(--k-ink); white-space: nowrap; text-shadow: 0 0 22px var(--k-glow), 0 3px 0 #000; }
.ks-hero-age { font-size: clamp(110px, 38vw, 170px); line-height: .9; color: transparent; background: linear-gradient(180deg, #fff 0%, var(--k-hot2) 40%, var(--k-hot) 100%);
  -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0 18px var(--k-glow)) drop-shadow(0 5px 0 #000); }
[data-phase="open"] .ks-hero-age { animation: ks-age-in 1.1s cubic-bezier(.2,1.4,.4,1) both .5s; }
.ks-hero-cap { margin: 10px 0 0; font: 800 11px/1.4 var(--k-body); letter-spacing: .26em; text-transform: uppercase; color: var(--k-hot2); }
[data-phase="open"] .ks-bar { left: 10px; right: auto; }
.ks-top { padding-top: 14px; }

/* ---- decorations down the page (kids-scene-decor.js): one per section, peeking in from alternating sides ---- */
.scene-page .sc-section { position: relative; }
.ks-deco { position: absolute; z-index: 0; top: 18px; width: clamp(70px, 22vw, 110px); pointer-events: none; opacity: 0; transition: opacity .8s, transform 1.1s cubic-bezier(.2,1.2,.4,1); }
.ks-deco :is(img, canvas) { display: block; width: 100%; height: auto; filter: drop-shadow(0 6px 8px #0008); animation: ks-deco-bob 4s ease-in-out infinite alternate; }
.ks-deco.l { left: -14px; transform: translateX(-60px) rotate(-14deg); } .ks-deco.r { right: -14px; transform: translateX(60px) rotate(14deg); }
.ks-deco.in.l { opacity: .95; transform: translateX(0) rotate(-8deg); } .ks-deco.in.r { opacity: .95; transform: translateX(0) rotate(8deg); }
@keyframes ks-deco-bob { to { transform: translateY(-8px) rotate(4deg); } }
.scene-page .sc-section > *:not(.ks-deco) { position: relative; z-index: 1; }
/* a theme divider between sections */
[data-kkey="mermaid"] .sc-rule, [data-kkey="mermaid"] .sc-rule-sm { height: 12px !important; background: radial-gradient(circle at 40% 35%, #fff 0 18%, #e9f6ff 30%, #b9cfe0 62%, transparent 66%) 0 0 / 14px 12px repeat-x !important; }
[data-kkey="princess"] .sc-rule, [data-kkey="princess"] .sc-rule-sm { height: 14px !important; background: radial-gradient(circle, #ffd87a 0 30%, transparent 34%) 50% 50% / 26px 14px repeat-x, linear-gradient(90deg, transparent, #ffd87a, transparent) 50% 50% / 100% 2px no-repeat !important; }
[data-kkey="pirate"] .sc-rule, [data-kkey="pirate"] .sc-rule-sm { height: 8px !important; background: repeating-linear-gradient(135deg, #c9a45a 0 6px, #7a5a26 6px 10px) !important; border-radius: 8px; }
[data-kkey="fire-engine"] .sc-rule, [data-kkey="fire-engine"] .sc-rule-sm { height: 10px !important; background: repeating-linear-gradient(135deg, #ffd522 0 12px, #1a1a1a 12px 24px) !important; }
[data-kkey="superhero"] .sc-rule, [data-kkey="superhero"] .sc-rule-sm { height: 10px !important; background: radial-gradient(circle, #ffe400 0 32%, transparent 36%) 0 0 / 12px 10px repeat-x !important; }
@media (prefers-reduced-motion: reduce) { .ks-deco { opacity: .95 !important; transform: none !important; } }
/* the scene's character is the rigged one now */
.ks-actor .ks-rig { position: absolute; inset: 0; animation: ks-float-idle 3s ease-in-out infinite alternate; }
.ks-actor .ks-rig :is(img, canvas) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 10px 8px #000a); }
[data-state="react"] .ks-actor .ks-rig { animation: ks-react 1.2s cubic-bezier(.3,1.4,.4,1) both; }
[data-kind="swim"][data-state="react"] .ks-actor .ks-rig { animation: ks-r-swim 1.2s ease-in-out both; }
[data-kind="gallop"][data-state="react"] .ks-actor .ks-rig { transform-origin: 70% 100%; animation: ks-rear 1.2s cubic-bezier(.3,.7,.3,1) both; }
[data-kind="fly"][data-state="react"] .ks-actor .ks-rig { animation: ks-r-fly 1.2s cubic-bezier(.3,.7,.3,1) both; }
[data-kind="treasure"][data-state="react"] .ks-actor .ks-rig { animation: ks-r-chest 1.1s ease-out both; }
[data-kind="dog"][data-state="react"] .ks-actor .ks-rig { animation: ks-bounce 1.1s ease-out both; }
[data-kind="gallop"][data-state="enter"] .ks-actor .ks-rig { animation: ks-gait .25s ease-in-out infinite alternate; }
[data-kind="dog"][data-state="enter"] .ks-actor .ks-rig { animation: ks-gait .18s ease-in-out infinite alternate; }
/* the opening's words sit on a dark scene: light letters with the design's colour as the outline, so they always read */
.ks-cover .ks-headline { color: #fff !important; -webkit-text-stroke: 0 !important; text-shadow: 0 0 2px var(--k-hot), 0 3px 0 #000c, 0 0 18px var(--k-glow) !important; }
.ks-cover .ks-name { color: #fff !important; -webkit-text-stroke: 0 !important; text-shadow: 0 0 3px var(--k-hot), 0 4px 0 #000c, 0 0 24px var(--k-glow) !important; }
/* 30/9 round 3 (Gary): the age circle clear of the name; the horse cut-out's straight cut edges faded out (a full horse is asked of the art chat) */
.ks-cover .ks-name { margin-bottom: 14px; }
.ks-cover .ks-badge { margin-top: 4px; }
/* (the princess horse edge mask was dropped 30/9: the whole horse is drawn now, dev/overrides/princess-main.png) */

/* ---- theme-supplied pieces (BATCH2 request, 30/9): all optional, older themes unchanged ---- */
/* particles as the theme's own pictures: scene.open.fx = 'img' + scene.fxImg */
[data-fx="img"] .ks-fx i, .ks-pt-img { background: center / contain no-repeat; filter: drop-shadow(0 2px 3px #0006); }
.ks-pt-img { width: 30px; height: 30px; margin: -15px; }
/* game tokens as pictures: scene.game.token = 'img' + game.img (+ img2 when hit) */
.ks-tok-img { width: 76px; height: 76px; margin: -38px; }
.ks-tok-img span { background: center / contain no-repeat; filter: drop-shadow(0 4px 6px #0008); }
/* arena kind 'roll': a vehicle drives in level, settles, and rocks/revs when tapped */
[data-kind="roll"][data-state="enter"] .ks-actor { animation: ks-a-roll 2.2s cubic-bezier(.25,.7,.3,1) both; }
[data-kind="roll"][data-state="enter"] .ks-actor .ks-rig { animation: ks-rumble .12s linear infinite alternate; }
[data-kind="roll"][data-state="react"] .ks-actor .ks-rig { transform-origin: 50% 100%; animation: ks-rev 1.1s ease-in-out both; }
@keyframes ks-a-roll { 0% { transform: translateX(-50%) translateX(-110vw); } 85% { transform: translateX(-50%) translateX(2vw); } 100% { transform: translateX(-50%); } }
@keyframes ks-rumble { to { transform: translateY(-.8%); } }
@keyframes ks-rev { 0%, 100% { transform: none; } 15% { transform: rotate(-3deg) translateX(-2%); } 35% { transform: rotate(2deg) translateX(3%); } 55% { transform: rotate(-1.5deg); } 75% { transform: translateY(-3%); } }
/* rig parts: 'wheel' spins (faster while driving in), 'arm' scoops slowly */
.rig-wheel { animation: ks-spin 1.2s linear infinite; }
[data-state="enter"] .rig-wheel, [data-phase="burst"] .rig-wheel { animation-duration: .35s; }
@keyframes ks-spin { to { transform: rotate(360deg); } }
.rig-arm { animation: ks-scoop 2.6s ease-in-out infinite alternate; }
@keyframes ks-scoop { 0%, 20% { transform: rotate(-6deg); } 80%, 100% { transform: rotate(5deg); } }
/* opening move 'roll-in': the vehicle drives to the middle on the tap */
[data-phase="ready"][data-move="roll-in"] .ks-hero-actor .ks-rig { animation: ks-rumble .1s linear infinite alternate; }
[data-phase="burst"][data-move="roll-in"] .ks-hero-actor .ks-rig { animation: ks-roll-in 1.8s cubic-bezier(.4,0,.3,1) both; }
@keyframes ks-roll-in { 0% { transform: none; } 20% { transform: translateX(-4%) rotate(-1deg); } 100% { transform: translateX(6%) scale(1.25); } }

/* ---- Samsung (Android, html[data-ss]; 30/9): Samsung Internet's dark mode repaints colours a page draws (gold -> brown,
   dark letters -> light) but keeps pictures. The engine's glowing pieces take their colour from pictures made by
   batch1/tools/make-ss-scene.cjs (ss-k-btn = hot2 -> hot, ss-k-ink = the button lettering, ss-k-strip, ss-k-hot2).
   The tap button and the age circle get a real <img> (Samsung dims those less than CSS pictures). Test with ?ss=1. ---- */
[data-ss] .ks-scene > .ks-cta, [data-ss] .ks-badge { isolation: isolate; overflow: hidden; }
[data-ss] .ks-cta > .ss-fill, [data-ss] .ks-badge > .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] .ks-badge { position: relative; }
[data-ss] .ks-scene > .ks-cta .ks-cta-go, [data-ss] .ks-badge b, [data-ss] .ks-badge small, [data-ss] .ks-btn:not(.ks-ghost),
[data-ss] .ks-pass.issued .ks-pass-stamp {
  background: var(--ss-k-ink) center / cover; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
[data-ss] .ks-btn:not(.ks-ghost) { background-image: var(--ss-k-ink), var(--ss-k-btn); background-size: cover, cover; background-position: center, center;
  -webkit-background-clip: text, border-box; background-clip: text, border-box; }
[data-ss] .ks-pass.issued .ks-pass-stamp { background-image: var(--ss-k-ink), var(--ss-k-hot2); background-size: cover, cover;
  -webkit-background-clip: text, padding-box; background-clip: text, padding-box; }
[data-ss] .ks-pass::before { background: var(--ss-k-strip) center / cover; }
[data-ss] .ks-hero-age { background: var(--ss-k-btn) center / cover; -webkit-background-clip: text; background-clip: text; }
[data-ss] .ks-cta-ico svg, [data-ss] .ks-pass-icon svg { color: inherit; }
/* the picked answer stays the scene's dark tile with white words (the standard page's picture fill is not used here) */
[data-ss] .scene-page .sc-choice input:checked + span { -webkit-text-fill-color: #fff !important; }
/* 30/9 (BATCH2 spotted): a wide character (chest, lion, train) ran under a long name on the pass: the picture keeps to its
   corner (max 86px wide, drawn inside that box) and the name keeps 100px clear of it */
.ks-pass .ks-pass-photo { max-width: 86px; max-height: 110px; object-fit: contain; object-position: right top; }
.ks-pass strong { padding-right: 0; margin-right: 100px; }   /* a margin, not padding: an overflowing name then shows in scrollWidth and shrinks (kids-scene-decor.js) */
/* 16/10 Gary ("MIA'S BIRTHD..." hidden by the picture): the top line keeps clear of the picture's corner and wraps instead */
.ks-pass .ks-pass-top { margin-right: 80px; }
.ks-pass-star { white-space: nowrap; }   /* MIA IS 2! never splits; a long line wraps after the dot */

/* ======================= 30/9 round 4 (Gary's phone test + BATCH2) ======================= */
/* Samsung: bubbles drawn as colours turned BLACK in its dark mode. On Android they are the near-white picture (ss-white.jpg,
   never repainted) shaped by a mask (masks are never recoloured either): the scroll pages' own bubble fix (scroll.css). */
[data-ss][data-fx="bubbles"] .ks-fx i, [data-ss] .ks-pt-bubbles, [data-ss] .ks-tok-bubble span, [data-ss][data-fx="bubbles"] .ks-ambient i {
  background: var(--ss-white) center / cover; box-shadow: none;
  -webkit-mask-image: radial-gradient(circle at 32% 30%, #000 0 14%, transparent 26%), radial-gradient(circle, rgba(0,0,0,.2) 0 56%, rgba(0,0,0,.85) 66%, transparent 71%);
          mask-image: radial-gradient(circle at 32% 30%, #000 0 14%, transparent 26%), radial-gradient(circle, rgba(0,0,0,.2) 0 56%, rgba(0,0,0,.85) 66%, transparent 71%); }
/* the same for the other drawn particles that are colour gradients (sparkles, coins, flames go brown/dark otherwise) */
[data-ss][data-fx="sparkles"] .ks-fx i, [data-ss] .ks-pt-sparkles, [data-ss][data-fx="sparkles"] .ks-ambient i, [data-ss] .ks-tok-firework span { background: var(--ss-k-btn) center / cover; }
[data-ss][data-fx="coins"] .ks-fx i, [data-ss] .ks-pt-coins, [data-ss][data-fx="coins"] .ks-ambient i, [data-ss] .ks-tok-coin span { background: var(--ss-button) center / cover; box-shadow: none; }
/* decorations: fully on screen (they were pushed 14px off the edge and looked cut); scene.decorFace turns a piece to face in */
.ks-deco.l { left: 4px; } .ks-deco.r { right: 4px; }
.ks-deco.flip :is(img, canvas) { scale: -1 1; }
/* scene.ageArt: the age sits on the theme's own picture (a shell, a coin, a badge...) instead of the plain circle */
.ks-badge.art { position: relative; width: 116px; height: 116px; background: none; border: 0; box-shadow: none; border-radius: 0; overflow: visible; }
.ks-badge.art > .ks-badge-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; z-index: 0; filter: drop-shadow(0 6px 10px #0009) drop-shadow(0 0 14px var(--k-glow)); }
.ks-badge.art b, .ks-badge.art small { position: relative; z-index: 1; }
.ks-badge.art b { font-size: 50px; text-shadow: 0 1px 0 #fff8; }
.ks-badge.art small { font-size: 8px; }
/* scene.fxFrom img: a prop the burst comes out of (the fire hose), its right-middle at the point */
.ks-prop { position: absolute; z-index: 3; transform: translate(-100%, -50%); height: auto; pointer-events: none; filter: drop-shadow(0 6px 8px #0008); }
/* scene.emit puffs: grow, drift up and fade */
.ks-puff { position: absolute; z-index: 3; pointer-events: none; background: center / contain no-repeat; opacity: 0; animation: ks-puff 2.6s ease-out forwards; }
.ks-puff.flat { animation-name: ks-puff-flat; }
@keyframes ks-puff { 0% { opacity: 0; transform: translate(0, 0) scale(.4); } 15% { opacity: .95; } 100% { opacity: 0; transform: translate(var(--px, 0), -90px) scale(2.4); } }
@keyframes ks-puff-flat { 0% { opacity: 0; transform: scale(.4); } 15% { opacity: .9; } 100% { opacity: 0; transform: translate(var(--px, 0), -20px) scale(1.8); } }
/* opening move 'glide' (princess horse, Gary 30/9: less shaking): a slow graceful lift while ready, rises and glows on the burst */
[data-phase="ready"][data-move="glide"] .ks-hero-actor .ks-rig { animation: ks-glide-ready 1.4s ease-in-out infinite alternate; }
[data-phase="burst"][data-move="glide"] .ks-hero-actor .ks-rig { animation: ks-glide 2s cubic-bezier(.3,.6,.3,1) both; filter: drop-shadow(0 0 24px var(--k-hot2)); }
@keyframes ks-glide-ready { from { transform: translateY(0) rotate(0); } to { transform: translateY(-2.5%) rotate(-1deg) scale(1.02); } }
@keyframes ks-glide { 0% { transform: none; } 40% { transform: translateY(-4%) rotate(-2deg) scale(1.06); } 100% { transform: translateY(-9%) scale(1.16); } }
/* arena kind 'prance': walks in with a soft step, and a gentle bow when tapped (not a rear) */
[data-kind="prance"][data-state="enter"] .ks-actor { animation: ks-a-gallop 2.8s cubic-bezier(.25,.6,.3,1) both; }
[data-kind="prance"][data-state="enter"] .ks-actor .ks-rig { animation: ks-step .55s ease-in-out infinite alternate; }
[data-kind="prance"][data-state="react"] .ks-actor .ks-rig { transform-origin: 60% 100%; animation: ks-bow 1.4s ease-in-out both; }
@keyframes ks-step { to { transform: translateY(-1.2%); } }
@keyframes ks-bow { 0%, 100% { transform: none; } 30% { transform: rotate(3deg) translateY(1%); } 55% { transform: rotate(3deg) translateY(1%); } 80% { transform: translateY(-3%) rotate(-1deg); } }
@media (prefers-reduced-motion: reduce) { .ks-puff { display: none; } }
/* scene.pageArt: the theme's scene blurred + dimmed behind the page (fixed), the page's flat colour made see-through over it */
.ks-page-art { position: fixed; inset: -40px; z-index: 0; background: center / cover no-repeat; pointer-events: none; }
body.ks-has-art .app-container { position: relative; z-index: 1; background: transparent !important; }
body.ks-has-art #card-stage.stage-scroll { background: radial-gradient(120% 40% at 50% 0, color-mix(in srgb, var(--k-bg2) 70%, transparent), transparent 70%) !important; }
body.ks-has-art .ks-top { background: transparent; }
body.ks-has-art .ks-arena-bg::after { background: linear-gradient(color-mix(in srgb, var(--k-bg) 80%, transparent) 0, transparent 22%, transparent 70%, color-mix(in srgb, var(--k-bg) 80%, transparent) 100%); }
.ks-scene > .ks-cta { max-width: calc(100vw - 32px); overflow: hidden; }   /* + the words shrink to fit (kids-scene-stage.js fit) */
.ks-hero-age { padding: .06em .08em .14em; margin-bottom: -.14em; }   /* BATCH2 30/9: tall/slanted fonts (Knewave 2) were sliced at the foot by background-clip:text */
[data-ss] .ks-badge b, [data-ss] .ks-badge small, [data-ss] .ks-scene > .ks-cta .ks-cta-go { padding: .12em .08em; margin: -.12em -.08em; }   /* BATCH2 30/9: a letter painted by background-clip:text is cut at its box (Samsung only): give the paint room */
/* the themed age holder on Samsung: its number painted from ss-k-age.jpg (scene.ageInk), the button's ink would be wrong on it */
[data-ss] .ks-badge.art b, [data-ss] .ks-badge.art small { background-image: var(--ss-k-age); }
.ks-badge.art b, .ks-badge.art small { color: inherit !important; }
.ks-actor .ks-prop { z-index: 2; }
/* the hose / any fxFrom prop: its own size and place, never the character's picture rules (100% box, idle animation) */
.ks-hero-actor .ks-prop, .ks-actor .ks-prop { position: absolute; height: auto !important; animation: none !important; object-fit: contain; }
/* particles that fly up then fall (coins out of the chest, water from the hose): tapFx rise/arc and the opening's water */
.ks-pt.fall { animation: ks-pt-fall 1.5s cubic-bezier(.25,.6,.4,1) both; animation-delay: var(--dl, 0s); }
@keyframes ks-pt-fall { 0% { opacity: 0; transform: translate(0, 0) scale(.5); } 10% { opacity: 1; } 50% { transform: translate(calc(var(--dx) * .55), var(--dy)) scale(1.1) rotate(var(--rot, 0deg)); } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), calc(var(--dy) * -.1 + 40px)) scale(1) rotate(calc(var(--rot, 0deg) * 2)); } }
[data-phase="burst"] .ks-fx i.arc { animation: ks-fly-arc 1.9s cubic-bezier(.25,.6,.4,1) both; animation-delay: var(--dl, 0s); }
@keyframes ks-fly-arc { 0% { opacity: 0; transform: translate(0, 0) scale(.4); } 10% { opacity: 1; } 50% { transform: translate(calc(var(--dx) * .55), var(--dy)) scale(1.2); } 85% { opacity: .9; } 100% { opacity: 0; transform: translate(var(--dx), calc(var(--dy) * -.1 + 8cqw)) scale(1); } }
.ks-pt-coins.fall { width: 16px; height: 16px; margin: -8px; }
/* a tall character (the pirate boy behind his chest) stays inside its scene when it jumps */
[data-kind="treasure"] .ks-actor { height: 212px; bottom: 12px; }
@keyframes ks-r-chest { 0%, 100% { transform: none; } 10% { transform: rotate(-3deg); } 20% { transform: rotate(3deg); } 30% { transform: rotate(-2deg); } 45% { transform: translateY(-6%) scale(1.04); } 70% { transform: none; } }
.ks-pt-water.fall { width: 9px; height: 9px; margin: -4.5px; }
[data-kind="treasure"] .ks-actor { height: 196px; bottom: 8px; }
/* rig part classes for BATCH3 (30/9): 'wave' = a friendly wave from the shoulder, 'rattle' = a toddler's quick shake */
.rig-wave { animation: ks-wave .75s ease-in-out infinite alternate; }
@keyframes ks-wave { from { transform: rotate(-5deg); } to { transform: rotate(6deg); } }
.rig-rattle { animation: ks-rattle .24s ease-in-out infinite alternate; }
@keyframes ks-rattle { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
[data-ss] .ks-badge.art b { text-shadow: none; }   /* 30/9: with the picture-painted (transparent) letters, the white shadow showed THROUGH them and paled the number */
/* rig part class 'punch' (1/10, the superhero's raised fist): a quick small pump, kept small so the cut never shows */
.rig-punch { animation: ks-punch .6s ease-in-out infinite alternate; }
@keyframes ks-punch { from { transform: rotate(-1.5deg) translateY(.5%); } to { transform: rotate(2deg) translateY(-1.5%); } }

/* Approved brighter first-ten storybook treatment. Activated only by the matching stage script. */
.ks-polished .ks-backdrop { filter: blur(3.5px) brightness(1) saturate(1.08); }
.ks-polished .ks-zoom::after { background: linear-gradient(rgba(7,17,30,.68),rgba(7,17,30,.38) 24%,rgba(7,17,30,.035) 45%,rgba(7,17,30,.02) 72%,rgba(7,17,30,.3) 88%,rgba(7,17,30,.68)); }
.ks-polished .ks-rig :is(img,canvas) { filter: drop-shadow(0 9px 10px #0006); }
.ks-polished .ks-cover { top:64px; }
.ks-polished:not([data-phase="open"]) .ks-hero-actor { height:clamp(185px,calc(100svh - 455px),500px); }
.ks-polished .ks-chip { min-width:66px; min-height:44px; padding:9px 13px; border:1.5px solid var(--k-hot2); color:var(--k-hot2); background:color-mix(in srgb,var(--k-bg) 88%,transparent); letter-spacing:.07em; box-shadow:0 2px 5px #0004; }
.ks-polished .ks-chip[aria-pressed="false"] { opacity:1; }
.ks-polished-page #music-toggle { min-height:44px; }
.ks-polished .ks-chip:active { transform:translateY(2px); box-shadow:inset 0 2px 4px #0006; }
.ks-polished > .ks-cta { min-height:66px; border:2px solid #fff9; box-shadow:0 5px 0 #0005,0 7px 18px #0005; }
.ks-polished > .ks-cta .ks-cta-ico { flex-shrink:0; }
.ks-polished > .ks-cta:active { animation:none; transform:translateX(-50%) translateY(4px) scale(.98); box-shadow:0 1px 0 #0005,inset 0 2px 6px #0003; }
.ks-polished :is(.ks-chip,.ks-cta):focus-visible,.ks-polished .ks-hero-actor:focus-visible { outline:3px solid #fff; outline-offset:4px; }
.ks-polished-page .ks-arena :is(.ks-btn,button) { min-height:44px; }


/* 1/10 Gary: the opening "tap" screens were darker and duller than the printables -> printable brightness.
   The scenery is barely blurred and brightened, the full-screen dark band is gone; shading stays only right behind the
   words (a soft local shadow under the headline/name/age and behind the hint line). Animations + controls untouched. */
/* scene.openBlur (px, optional): more blur where the background has the hero's look-alikes painted in (BATCH4 ask 1/10) */
.ks-polished .ks-backdrop { filter: blur(var(--ks-open-blur, 1.5px)) brightness(1.12) saturate(1.15) contrast(1.04); }
.ks-polished .ks-zoom::after { background: linear-gradient(rgba(7,17,30,.30), rgba(7,17,30,.06) 22%, transparent 34%, transparent 82%, rgba(7,17,30,.18) 93%, rgba(7,17,30,.34)); }
.ks-polished .ks-rig :is(img, canvas) { filter: brightness(1.07) saturate(1.1) drop-shadow(0 8px 10px #0005); }
.ks-polished .ks-cover { isolation: isolate; }
.ks-polished .ks-cover::before { content: ''; position: absolute; z-index: -1; left: 50%; top: -30px; width: 108%; height: calc(100% + 54px); transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(7,17,30,.46), rgba(7,17,30,.30) 55%, transparent); pointer-events: none; }
.ks-polished .ks-cover :is(.ks-headline, .ks-name) { text-shadow: 0 3px 0 #0008, 0 0 12px rgba(0,0,0,.55), 0 0 22px var(--k-glow); }
.ks-polished .ks-cover .ks-kicker, .ks-polished > .ks-cta-hint { text-shadow: 0 1px 2px #000, 0 0 10px rgba(0,0,0,.7); }
/* ...and the page top after the opening (name + big age + caption over the brighter scene): keep a darker floor under them and a
   local shadow behind the words so they always read (Gary 1/10: "make sure we can read text") */
.ks-polished[data-phase="open"] .ks-zoom::after { background: linear-gradient(rgba(7,17,30,.30), rgba(7,17,30,.06) 18%, transparent 30%, transparent 46%, rgba(7,17,30,.38) 66%, rgba(7,17,30,.72) 86%, rgba(7,17,30,.86)); }
.ks-polished .ks-hero { isolation: isolate; }
.ks-polished .ks-hero::before { content: ''; position: absolute; z-index: -1; left: 50%; bottom: -20px; width: 120%; height: calc(100% + 60px); transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(7,17,30,.55), rgba(7,17,30,.32) 60%, transparent); pointer-events: none; }
.ks-polished .ks-hero-name { text-shadow: 0 3px 0 #000a, 0 0 14px rgba(0,0,0,.7), 0 0 24px var(--k-glow); }
.ks-polished .ks-hero-age { filter: drop-shadow(0 0 14px rgba(0,0,0,.55)) drop-shadow(0 5px 0 #000); }
.ks-polished .ks-hero-cap { text-shadow: 0 1px 2px #000, 0 0 10px rgba(0,0,0,.85); }
.ks-polished .ks-cover::before { background: radial-gradient(closest-side, rgba(7,17,30,.52), rgba(7,17,30,.34) 55%, transparent); }

/* UPGRADE 3/10 (Gary): cover age circle sits a little further below the name, and its words sit a little lower inside the circle */
.ks-cover .ks-badge { margin-top: 14px; }
.ks-badge:not(.art) > b, .ks-badge:not(.art) > small { transform: translateY(4px); }

/* 5/10 Gary: Is turning spilled off the picture badges (go-kart, pool, soft play read S TURNING); keep it inside the circle */
.ks-badge.art small { font-size: 7px; letter-spacing: .06em; }
/* superhero: thin white halo so the red words read on the yellow star ring */
[data-key=superhero] .ks-badge.art small { filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff); }

/* =====================================================================================
   6 Oct 2026 (GOKART lane, shared with the fire engine lane): the FILM OPENING for scene designs with scene.film
   (views/partials/scene-stage.ejs + public/js/kids-scene-film.js). Every rule is under .ks-film / .ks-film-mode, which
   only exist on those designs, so the other scene designs are unchanged.
   ===================================================================================== */
.ks-film { position: absolute; inset: 0; z-index: 6; overflow: hidden; background: var(--k-bg); }
.ks-film[hidden] { display: none; }
.ks-film > video, .ks-film > .ks-film-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: var(--k-bg); }
.ks-film-frame { position: absolute; left: 0; top: 0; width: 720px; height: 1280px; transform-origin: 0 0; pointer-events: none; z-index: 1; }
.ks-film-fx { position: absolute; left: 0; top: 0; width: 720px; height: 1280px; }
.ks-film-gate { position: absolute; inset: 0; z-index: 2; margin: 0; padding: 0; border: 0; width: 100%; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ks-film-gate-label { position: absolute; transform: translateX(-50%); pointer-events: none; white-space: nowrap; display: inline-flex; align-items: center; isolation: isolate; overflow: hidden;
  padding: 12px 26px; border-radius: 999px; background: linear-gradient(180deg, var(--k-hot2), var(--k-hot)); color: var(--k-btn-ink);
  font: 400 20px/1 var(--k-head); letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 0 30px var(--k-glow), 0 5px 0 #0007; animation: ks-film-bob 1.6s ease-in-out infinite; }
@keyframes ks-film-bob { 0%, 100% { margin-top: 0; } 50% { margin-top: -6px; } }
/* the cover: the film's first frame behind the name and age, not the storybook character */
.ks-film-mode .ks-hero-actor, .ks-film-mode .ks-fx, .ks-film-mode .ks-ambient, .ks-film-mode .ks-bang { display: none; }
.ks-film-mode .ks-backdrop { inset: 0; filter: brightness(.86) saturate(1.1); background-position: 50% 50%; }
/* while the film plays the cover's words and button are gone */
.ks-film-mode[data-phase="film"] .ks-cover, .ks-film-mode[data-phase="film"] > .ks-cta, .ks-film-mode[data-phase="film"] > .ks-cta-hint { display: none; }
/* after the film: its last frame + the invitation's words are the top of the page (the storybook name/age block is not needed) */
.ks-film-mode[data-phase="open"] .ks-hero { display: none; }
.ks-film-mode[data-phase="open"].ks-scene { height: min(100svh, calc(100vw * 16 / 9)); max-height: 1000px; min-height: 0; }
.ks-film-mode[data-phase="open"] .ks-film { animation: none; }
.ks-film.ks-film-broken > video { display: none; }
/* the reply section's picture with the child's name (scene.film.rsvpArt) */
.ks-rsvp-art { width: min(86vw, 400px); margin: 0 auto 18px; }
.ks-rsvp-art canvas { display: block; width: 100%; height: auto; border-radius: 18px; box-shadow: 0 10px 30px #0008; }
[data-ss] .ks-film-gate-label { background: transparent; box-shadow: none; }
[data-ss] .ks-film-gate-label > .ss-fill { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); object-fit: cover; z-index: -1; }
@media (prefers-reduced-motion: reduce) { .ks-film-gate-label { animation: none; } }

/* 6/10 (Gary): on film-opening pages the sections slide up and fade in as they arrive, once (kids-scene-film.js adds ks-once) */
.ks-film-page .sc-section.reveal > *, .ks-film-page .sc-footer.reveal > * { opacity: 0; transform: translateY(34px); filter: none; }
.ks-film-page .sc-section.reveal:is(.seen, .ks-once) > *, .ks-film-page .sc-footer.reveal:is(.seen, .ks-once) > * { opacity: 1; transform: none;
  transition: opacity .6s ease-out, transform .8s cubic-bezier(.2,1.2,.35,1); transition-delay: calc(var(--i, 0) * .08s); }
@media (prefers-reduced-motion: reduce) { .ks-film-page .sc-section.reveal > *, .ks-film-page .sc-footer.reveal > * { opacity: 1; transform: none; transition: none; } }