/* =====================================================================================
   THE KIDS' LASER TAG DESIGN (theme envelope_style "laser"), loaded only for it (views/guest.ejs).
   Ported 24 Sep 2026 from the test page Gary approved (previews/kids-laser) - a copy of kids-dino.css in the
   laser colours (neon green #7CFF5B, electric blue #45C8FF on arena navy): the film at the top
   (views/partials/laser-stage.ejs, public/js/kids-laser-stage.js) with this child's details written in neon on the
   sign behind the arena doors, the top block (target, age, details), then the ordinary scroll sections restyled
   with one real object per section, target practice and the agent pass (public/js/kids-laser-decor.js).
   Headings use the neon-tube lettering of the sign (Tilt Neon), Gary's pick for the reveal.
   ===================================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Nunito:wght@400;600;700;800&family=Tilt+Neon&display=swap');

.laser-page { --l-bg: #03050d; --l-panel: #0a1020; --l-blue: #45C8FF; --l-green: #7CFF5B; --l-ink: #E6F4FF; --l-muted: #9fb2c8;
  --l-line: rgba(69,200,255,.24); --l-head: "Barlow Condensed", "Bahnschrift", "Arial Narrow", system-ui, sans-serif;
  --l-neon: "Tilt Neon", "Barlow Condensed", system-ui, sans-serif; --l-body: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;
  --l-glow: 0 0 2px #fff, 0 0 9px #7CFF5B, 0 0 20px #45e05a, 0 0 40px #2aa84a; color-scheme: dark; }

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

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

/* ---- the stage ---- */
.laser-scene { position: relative; display: block; width: 100%; height: 100vh; height: 100svh; margin: 0 auto; overflow: hidden;
  background: var(--l-bg); touch-action: manipulation; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none;
  -webkit-user-select: none; user-select: none; font-family: var(--l-body); color: var(--l-ink); }
.laser-frame { position: absolute; left: 0; top: 0; width: 720px; height: 1280px; transform-origin: 0 0; overflow: hidden; }
.laser-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; background: var(--l-bg); }
#laser-film { z-index: 1; }
/* the editor / ?stage=card: the film's last frame as a picture under the words (kids-laser-stage.js still mode) */
.laser-frame .laser-still { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: fill; pointer-events: none; }
.laser-idle { z-index: 0; background: transparent !important; pointer-events: none; }
.laser-idle.on { z-index: 2; }
.laser-idle.out { z-index: 2; opacity: 0; transition: opacity .35s ease; }

/* the neon sign's words (laid out for the film's last frame; the script moves them with the push-in) */
.laser-brief { position: absolute; z-index: 3; pointer-events: none; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; font-family: var(--l-neon); line-height: 1.05; opacity: 0; transition: opacity .4s; transform-origin: 0 0; }
.laser-brief.laser-on { opacity: 1; }
.laser-brief .ln { display: block; opacity: 0; max-width: 100%; }
.laser-brief .ln.laser-in { animation: laser-neon-on .6s steps(1, end) both; }
@keyframes laser-neon-on { 0% { opacity: 0; } 12% { opacity: .9; } 20% { opacity: .1; } 34% { opacity: 1; } 44% { opacity: .35; } 56%, 100% { opacity: 1; } }
.laser-brief .b1 { color: #e2f8ff; letter-spacing: .14em; text-transform: uppercase; text-shadow: 0 0 2px #fff, 0 0 8px #45C8FF, 0 0 18px #45C8FF, 0 0 34px #1e8fff; }
.laser-brief .b2, .laser-brief .b2s { color: #effff0; text-shadow: var(--l-glow); }
.laser-brief .b2s { margin-top: .05em; }
.laser-brief .b3 { color: #fff0fb; margin: .02em 0 .04em; text-shadow: 0 0 3px #fff, 0 0 12px #ff4fd8, 0 0 28px #ff2fc8, 0 0 60px #d4169f; }
.laser-brief .b6 { color: #effff0; text-transform: uppercase; letter-spacing: .08em; margin-bottom: .45em; text-shadow: var(--l-glow); }
.laser-brief .b4, .laser-brief .b5 { color: #fff; text-shadow: 0 0 2px #fff, 0 0 8px #45C8FF, 0 0 18px #2a9dff; line-height: 1.25; }
.laser-brief .b5 { margin-top: .35em; color: #e2f8ff; }
/* Gary 24/9: "spread out a wee bit, with more text closer to the top and a bit more at the bottom, spaces in between":
   the lines share the whole sign, evenly spaced from just under its top edge to just above its bottom edge */
.laser-brief { justify-content: space-between; padding: 2.5% 0 1.5%; box-sizing: border-box; }
.laser-brief .b3 { margin: 0; line-height: .95; }
.laser-brief .b6 { margin-bottom: 0; }
.laser-brief .b5 { margin-top: 0; }

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

.laser-bar { position: absolute; z-index: 15; top: calc(12px + env(safe-area-inset-top)); right: 12px; display: flex; gap: 8px; }
body:not(.laser-sealed) .laser-bar { left: 12px; right: auto; }
.laser-chip { border: 1px solid rgba(230,244,255,.35); background: rgba(3,5,13,.6); color: var(--l-ink); border-radius: 999px;
  padding: 8px 14px; font: 600 14px var(--l-body); cursor: pointer; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.edit-mode .laser-bar, .edit-mode .laser-open, .edit-mode .laser-door, .edit-mode .laser-scroll { display: none !important; }

/* the pause on the doors: the whole stage is the button, the ring shows the target on the doors */
.laser-door { position: absolute; inset: 0; z-index: 4; border: 0; padding: 0; margin: 0; background: transparent; cursor: pointer; width: 100%; }
.laser-ring { position: absolute; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 2px rgba(124,255,91,.9), 0 0 26px 6px rgba(124,255,91,.45), inset 0 0 22px rgba(124,255,91,.35);
  animation: laser-ring 1.6s ease-in-out infinite; }
@keyframes laser-ring { 0%, 100% { opacity: .55; transform: translate(-50%, -50%) scale(.96); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); } }
.laser-door-label { position: absolute; transform: translateX(-50%); pointer-events: none; white-space: nowrap; padding: 10px 20px;
  border-radius: 999px; background: var(--l-green); color: #04160a; font: 800 20px var(--l-head); letter-spacing: .05em; text-transform: uppercase;
  box-shadow: 0 6px 24px rgba(0,0,0,.45); animation: laser-bob 1.6s ease-in-out infinite; }
@keyframes laser-bob { 0%, 100% { margin-top: 0; } 50% { margin-top: -6px; } }

.laser-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(--l-ink); text-decoration: none; text-align: center;
  font: 700 16px var(--l-head); letter-spacing: .1em; text-transform: uppercase; text-shadow: 0 2px 10px rgba(0,0,0,.9); white-space: nowrap;
  animation: laser-fadein 1s ease both; }
.laser-arrow { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--l-blue); display: grid; place-items: center; animation: laser-nudge 1.4s ease-in-out infinite; }
.laser-arrow::before { content: ""; width: 10px; height: 10px; border: solid var(--l-blue); border-width: 0 3px 3px 0; transform: translateY(-2px) rotate(45deg); }
@keyframes laser-nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@keyframes laser-fadein { from { opacity: 0; } to { opacity: 1; } }

/* ---- the top block: the target, the age, the details ---- */
.laser-top { position: relative; max-width: 560px; margin: 0 auto; padding: 56px 20px 30px; text-align: center; font-family: var(--l-body); color: var(--l-ink); }
.laser-age-line { margin: 0; color: var(--l-ink); font: 700 22px var(--l-head); letter-spacing: .18em; text-transform: uppercase; }
.laser-age { margin: -6px 0 2px; font: 800 150px/0.9 var(--l-head); color: var(--l-green); text-shadow: 0 0 24px rgba(124,255,91,.55), 0 6px 0 #1d5a12; }
.laser-title { margin: 0 0 16px; color: #effff0; font: 400 42px/1.08 var(--l-neon); letter-spacing: .01em; text-shadow: var(--l-glow); }
.laser-details { display: grid; gap: 16px; margin: 22px 0 26px; }
.laser-details div { padding: 14px 12px; border: 1px solid var(--l-line); border-radius: 14px; background: rgba(10,16,32,.72); }
.laser-details dt { color: var(--l-blue); font: 700 14px var(--l-head); letter-spacing: .2em; text-transform: uppercase; }
.laser-details dd { margin: 4px 0 0; font-weight: 700; font-size: 18px; }
.laser-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 8px 0 6px; }
.laser-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 22px; border-radius: 999px;
  border: 2px solid var(--l-green); background: var(--l-green); color: #04160a; font: 800 18px var(--l-head); letter-spacing: .06em;
  text-transform: uppercase; text-decoration: none; cursor: pointer; }
.laser-btn.laser-ghost { background: transparent; color: var(--l-green); }

/* ---- the real objects: shot on black, faded at the edges, they light up as they arrive ---- */
.laser-relic-wrap { position: relative; width: min(78vw, 340px); aspect-ratio: 1; margin: 0 auto 10px; }
.laser-toy { cursor: pointer; }
.laser-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 > .laser-relic, .laser-relic.lit { filter: none; transform: none; }
.laser-tap-hint { margin: -4px 0 12px; color: var(--l-muted); font-style: italic; font-size: 14px; }
.laser-wobble { animation: laser-wobble .7s ease-in-out; }
@keyframes laser-wobble { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-5deg); } 40% { transform: rotate(4deg); } 60% { transform: rotate(-3deg); } 80% { transform: rotate(2deg); } }
.laser-hop { animation: laser-hop .6s cubic-bezier(.3,1.6,.5,1); }
@keyframes laser-hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-18px) rotate(-4deg); } }
/* the target: a hit = a white flash and a ring rippling out */
.laser-hitfx { position: absolute; left: 50%; top: 50%; width: 30%; aspect-ratio: 1; border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%) scale(.2); opacity: 0; }
.laser-flash { background: radial-gradient(circle, #fff 0 25%, rgba(160,255,140,.8) 45%, rgba(124,255,91,0) 70%); mix-blend-mode: screen; }
.laser-ringfx { box-shadow: 0 0 0 4px rgba(124,255,91,.95), 0 0 30px 8px rgba(69,200,255,.6); }
.laser-hit .laser-flash { animation: laser-hitflash .55s ease-out; }
.laser-hit .laser-ringfx { animation: laser-hitring .8s ease-out; }
@keyframes laser-hitflash { 0% { opacity: 1; transform: translate(-50%, -50%) scale(.3); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(2.2); } }
@keyframes laser-hitring { 0% { opacity: 1; transform: translate(-50%, -50%) scale(.4); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(3); } }
/* the vest: tagged = its blue pads flash red */
.laser-vest.laser-tagged .laser-relic { animation: laser-tagged 1s steps(1) 1; }
@keyframes laser-tagged { 0%, 40%, 80% { filter: hue-rotate(150deg) saturate(2.2) brightness(1.3); } 20%, 60%, 100% { filter: none; } }
/* the blaster: a clean green beam (Gary 23/9: lasers only, no sparks) */
.laser-blaster .laser-beam { position: absolute; left: 88%; top: 38%; height: 4px; width: 0; border-radius: 4px; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, #eaffe4, #7CFF5B 30%, rgba(124,255,91,0)); box-shadow: 0 0 12px 3px rgba(124,255,91,.8); }
.laser-blaster.laser-fire .laser-beam { animation: laser-beam .45s ease-out; }
@keyframes laser-beam { 0% { opacity: 1; width: 0; } 60% { opacity: 1; width: 60vw; } 100% { opacity: 0; width: 70vw; } }
.laser-blaster.laser-fire .laser-relic { animation: laser-recoil .3s ease-out; }
@keyframes laser-recoil { 0%, 100% { transform: none; } 30% { transform: translateX(-10px) rotate(-3deg); } }
/* the radar sweeps all the time */
.laser-radar .laser-sweep { position: absolute; left: 50%; top: 50%; width: 56%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none;
  background: conic-gradient(from 0deg, rgba(124,255,91,.55), rgba(124,255,91,0) 18%, rgba(124,255,91,0)); mix-blend-mode: screen; opacity: 0; }
.laser-radar.lit .laser-sweep { opacity: 1; animation: laser-sweep 3s linear infinite; }
@keyframes laser-sweep { to { transform: translate(-50%, -50%) rotate(360deg); } }
.laser-trophy.lit .laser-relic { animation: laser-gleam 3.4s ease-in-out 1.4s infinite; }
@keyframes laser-gleam { 0%, 100% { filter: none; } 50% { filter: brightness(1.18); } }
/* the cake: candles to match the age, flames drawn live; tap them out */
.laser-cake-wrap { position: relative; width: min(92vw, 420px); margin: 0 auto 4px; }
canvas.laser-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%); }
.laser-cake-hint { margin: -10px 0 18px; color: var(--l-green); font: 700 19px var(--l-head); letter-spacing: .08em; text-transform: uppercase; min-height: 1.4em; }
#laser-confetti { position: fixed; inset: 0; z-index: 30; width: 100%; height: 100%; pointer-events: none; }
/* target practice */
.laser-range { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: min(88vw, 360px); margin: 6px auto 12px; }
.laser-range button { position: relative; aspect-ratio: 1; border: 0; padding: 0; border-radius: 50%; cursor: pointer; touch-action: manipulation;
  background: #000 var(--l-target, none) center / 128% no-repeat; filter: brightness(.22) saturate(.4); transition: filter .15s, transform .15s; }
.laser-range button.up { filter: none; transform: scale(1.06); box-shadow: 0 0 22px 4px rgba(124,255,91,.45); }
.laser-range button.got { filter: brightness(1.8) saturate(0); transform: scale(.9); }
.laser-range-bar { display: flex; justify-content: space-between; align-items: baseline; width: min(88vw, 360px); margin: 0 auto;
  font: 700 18px var(--l-head); letter-spacing: .12em; text-transform: uppercase; color: var(--l-muted); }
.laser-range-bar strong { color: var(--l-green); font-size: 30px; font-variant-numeric: tabular-nums; }
.laser-range-msg { min-height: 1.5em; margin: 6px 0 0; color: var(--l-green); font: 700 20px var(--l-head); letter-spacing: .06em; text-transform: uppercase; }
/* the agent pass */
.laser-pass { position: relative; width: min(88vw, 340px); margin: 14px auto 16px; padding: 18px 18px 16px; border-radius: 24px; text-align: left; overflow: hidden;
  background: linear-gradient(160deg, #0d1a33, #060b18 70%); border: 2px solid var(--l-green);
  box-shadow: 0 0 0 2px rgba(69,200,255,.55), 0 0 26px rgba(124,255,91,.45), inset 0 0 24px rgba(69,200,255,.15); }
.laser-pass.laser-blue { border-color: var(--l-blue); box-shadow: 0 0 0 2px rgba(124,255,91,.45), 0 0 26px rgba(69,200,255,.5), inset 0 0 24px rgba(69,200,255,.15); }
.laser-pass-top { display: flex; justify-content: space-between; align-items: center; font: 700 13px var(--l-head); letter-spacing: .22em; text-transform: uppercase; color: var(--l-blue); }
.laser-pass-ring { width: 38px; height: 38px; border-radius: 50%; flex: none;
  background: radial-gradient(circle, #fff 0 14%, #7CFF5B 16% 24%, transparent 26% 40%, #45C8FF 42% 50%, transparent 52% 66%, #7CFF5B 68% 76%, transparent 78%); }
.laser-pass-who { margin: 14px 0 2px; font: 400 36px/1.05 var(--l-neon); color: #fff; text-shadow: 0 0 10px rgba(124,255,91,.8); overflow-wrap: anywhere; }
.laser-pass-code { margin: 0; font: 700 18px var(--l-head); letter-spacing: .08em; text-transform: uppercase; color: var(--l-green); }
.laser-pass-team { display: inline-block; margin-top: 12px; padding: 5px 12px; border-radius: 999px; font: 800 14px var(--l-head); letter-spacing: .14em; text-transform: uppercase;
  color: #04160a; background: var(--l-green); }
.laser-pass.laser-blue .laser-pass-team { background: var(--l-blue); color: #031425; }
.laser-pass-bars { height: 26px; margin-top: 14px; opacity: .8;
  background: repeating-linear-gradient(90deg, #e6f4ff 0 2px, transparent 2px 5px, #e6f4ff 5px 6px, transparent 6px 10px, #e6f4ff 10px 13px, transparent 13px 15px); }
.laser-pass-scan { position: absolute; left: 0; right: 0; top: -20%; height: 18%; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, transparent, rgba(124,255,91,.55), transparent); }
.laser-pass.laser-scanning .laser-pass-scan { animation: laser-scan .9s ease-in-out; }
@keyframes laser-scan { 0% { opacity: 1; top: -20%; } 100% { opacity: 1; top: 105%; } }
.laser-pass-form { display: flex; gap: 10px; max-width: 360px; margin: 0 auto; }
.laser-pass-form input { flex: 1; min-width: 0; padding: 13px 14px; border-radius: 12px; border: 1px solid rgba(69,200,255,.35); background: rgba(10,16,32,.9); color: var(--l-ink); font: 600 17px var(--l-body); }
.laser-pass-form .laser-btn { flex: none; min-height: 48px; padding: 10px 16px; font-size: 16px; }

/* windows into the arena between sections: looping strips of the film's own footage, clear of the words above */
.laser-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%); }
.laser-sceneband video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.88) contrast(1.02) brightness(.82); }
.laser-sceneband .laser-glow { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 50% 105%, rgba(69,200,255,.16), transparent 70%),
  linear-gradient(180deg, rgba(3,5,13,.75), rgba(3,5,13,0) 32%, rgba(3,5,13,0) 62%, rgba(3,5,13,.85)); }
.laser-sceneband::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 -28px 30px -18px rgba(3,5,13,.95), inset 0 28px 30px -18px rgba(3,5,13,.95); }
.laser-mist { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.laser-sealed .laser-mist { display: none; }
.laser-mist i { position: absolute; width: 140vmax; height: 60vmax; border-radius: 50%; filter: blur(60px); opacity: .5;
  background: radial-gradient(closest-side, rgba(60,120,220,.22), rgba(60,120,220,0)); animation: laser-drift 38s ease-in-out infinite alternate; }
.laser-mist i:nth-child(1) { left: -60vmax; top: 10%; }
.laser-mist i:nth-child(2) { right: -70vmax; top: 45%; animation-duration: 46s; animation-delay: -12s; }
.laser-mist i:nth-child(3) { left: -40vmax; top: 75%; animation-duration: 54s; animation-delay: -30s; background: radial-gradient(closest-side, rgba(124,255,91,.08), rgba(124,255,91,0)); }
@keyframes laser-drift { from { transform: translateX(-12vmax); } to { transform: translateX(22vmax); } }

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

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

/* ---- Samsung Internet (html[data-ss]): coloured buttons take their colour from a picture inside them and their words
   from an ink picture (kids-laser-stage.js ssButton), like the dino's, because Samsung's dark mode flips any colour the
   page draws but keeps pictures' colours ---- */
.laser-btn, .laser-go { position: relative; }
.laser-btn, .laser-go, .laser-door-label { isolation: isolate; }
[data-ss] .laser-btn:not(.laser-ghost), [data-ss] .laser-go, [data-ss] .laser-door-label { background: transparent; border-color: transparent; }
[data-ss] :is(.laser-btn, .laser-go, .laser-door-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-green { background: url('/themes/kids-laser/assets/ss-ink-button.jpg') center / cover; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
[data-ss] .ss-ink-blue { background: url('/themes/kids-laser/assets/ss-ink-blue.jpg') center / cover; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
[data-ss] .ss-emoji { margin-left: .25em; }
.laser-open > .laser-open-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; pointer-events: none; }
.laser-open::before { z-index: 1; }
.laser-open .laser-card { z-index: 2; }