/* =====================================================================================
   THE KIDS' FOOTBALL DESIGN (theme envelope_style "football"), loaded only for it (views/guest.ejs).
   Ported 29 Sep 2026 from the test page Gary approved (previews/kids-football, laptop
   tap2open-kids/football/site/kids-football) the way the laser tag was (kids-laser.css): the stadium film at the top
   (views/partials/football-stage.ejs, public/js/kids-football-stage.js): the walk-out, the dribble, a pause on the ball
   ("Tap the ball"), the goal (once), the celebration, the trophy, and the film ends holding on THIS invitation's own
   printable (laid over the film's last frame). Then the top block (the ball, the age, the name, the details) and the
   ordinary scroll sections restyled with one real object per section, the cake, the player card and strips of the
   film's footage (public/js/kids-football-decor.js).
   Colours from the poster: gold + white + electric blue on a floodlit night navy; Anton headings.
   ===================================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=Barlow:wght@500;600;700&display=swap');

.football-page { --f-bg: #040a1c; --f-panel: #0a1430; --f-gold: #ffd65a; --f-blue: #3d7bff; --f-red: #e8343f; --f-ink: #eef3ff;
  --f-muted: #9fb0cc; --f-line: rgba(61,123,255,.28); --f-head: "Anton", "Impact", "Arial Narrow", sans-serif;
  --f-cond: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif; --f-body: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
  color-scheme: dark; }

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

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

/* ---- the stage ---- */
.football-scene { position: relative; display: block; width: 100%; height: 100vh; height: 100svh; margin: 0 auto; overflow: hidden;
  background: var(--f-bg); touch-action: manipulation; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none;
  -webkit-user-select: none; user-select: none; font-family: var(--f-body); color: var(--f-ink); }
/* the film's own 720x1280 frame, contain-fitted into the stage by the script (the ball and the printable live inside it) */
.football-frame { position: absolute; left: 0; top: 0; width: 720px; height: 1280px; transform-origin: 0 0; overflow: hidden; }
.football-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; background: var(--f-bg); }
#football-film { z-index: 1; }
.football-idle { z-index: 0; background: transparent !important; pointer-events: none; }
.football-idle.on { z-index: 2; }
.football-idle.out { z-index: 2; opacity: 0; transition: opacity .35s ease; }
/* the editor / ?stage=card: the film's last frame as a picture under the printable (still mode) */
.football-frame .football-still { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; object-fit: fill; pointer-events: none; }
/* THIS invitation's printable over the film's closing hold: the same 720x1280 box as the video; the SVG goes in inline
   (width/height 100%, its viewBox stretched to the box the way the film builder resized the still to 720x1280), or the
   default picture; faded in by the script with the film's crossfade */
.football-frame .football-printable { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; overflow: hidden; pointer-events: none;
  opacity: 0; will-change: opacity; }
.football-printable > svg, .football-printable > img, .football-printable > canvas { display: block; width: 100%; height: 100%; object-fit: fill; }

.football-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(--f-bg) center / cover no-repeat; cursor: pointer; border: 0; color: var(--f-ink); font: inherit; margin: 0; width: 100%; overflow: hidden; }
.football-open::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(4,10,28,.1) 40%, rgba(4,10,28,.88)); }
.football-open > .football-open-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; pointer-events: none; }
.football-card { position: relative; z-index: 2; text-align: center; max-width: 420px; display: block; }
.football-kicker { display: block; color: var(--f-gold); letter-spacing: .16em; font: 700 18px var(--f-cond); text-transform: uppercase; margin: 0 0 10px; }
.football-go { display: inline-block; padding: 16px 30px; border-radius: 999px; background: var(--f-gold); color: #0b1a3a;
  font: 400 24px var(--f-head); letter-spacing: .05em; text-transform: uppercase; }
.football-open.ready .football-go { animation: football-pulse 1.8s infinite; }
.football-hint { display: block; margin: 12px 0 0; font-size: 14px; opacity: .85; }
@keyframes football-pulse { 0% { box-shadow: 0 0 0 0 rgba(255,214,90,.55); } 70% { box-shadow: 0 0 0 18px rgba(255,214,90,0); } 100% { box-shadow: 0 0 0 0 rgba(255,214,90,0); } }

.football-bar { position: absolute; z-index: 15; top: calc(12px + env(safe-area-inset-top)); right: 12px; display: flex; gap: 8px; }
body:not(.football-sealed) .football-bar { left: 12px; right: auto; }
.football-chip { border: 1px solid rgba(238,243,255,.35); background: rgba(4,10,28,.6); color: var(--f-ink); border-radius: 999px;
  padding: 8px 14px; font: 600 14px var(--f-body); cursor: pointer; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.football-chip.football-icon { width: 40px; height: 40px; padding: 0; font-size: 18px; line-height: 1; }
.edit-mode .football-bar, .edit-mode .football-open, .edit-mode .football-ball, .edit-mode .football-scroll { display: none !important; }

/* the pause on the ball: the whole stage is the button, the ring shows where; the label sits under the ball */
.football-ball { position: absolute; inset: 0; z-index: 4; border: 0; padding: 0; margin: 0; background: transparent; cursor: pointer; width: 100%; }
.football-ring { position: absolute; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 3px rgba(255,214,90,.95), 0 0 26px 6px rgba(255,214,90,.45), inset 0 0 22px rgba(255,214,90,.3);
  animation: football-ring 1.6s ease-in-out infinite; }
@keyframes football-ring { 0%, 100% { opacity: .55; transform: translate(-50%, -50%) scale(.96); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } }
.football-ball-label { position: absolute; transform: translateX(-50%); pointer-events: none; white-space: nowrap; padding: 10px 22px;
  border-radius: 999px; background: var(--f-gold); color: #0b1a3a; font: 400 22px var(--f-head); letter-spacing: .06em; text-transform: uppercase;
  box-shadow: 0 6px 24px rgba(0,0,0,.45); animation: football-bob 1.6s ease-in-out infinite; }
@keyframes football-bob { 0%, 100% { margin-top: 0; } 50% { margin-top: -6px; } }

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

/* ---- the top block: the ball, the age, the name, the details (Gary 29/9: more space between the three lines) ---- */
.football-top { position: relative; max-width: 560px; margin: 0 auto; padding: 56px 20px 40px; text-align: center; font-family: var(--f-body); color: var(--f-ink); }
.football-age-line { margin: 6px 0 14px; color: var(--f-ink); font: 700 22px var(--f-cond); letter-spacing: .18em; text-transform: uppercase; overflow-wrap: anywhere; }
.football-age { margin: 0 0 22px; font: 400 150px/0.95 var(--f-head); color: var(--f-gold); text-shadow: 0 6px 0 #8a5a00, 0 0 30px rgba(255,214,90,.35); }
.football-title { margin: 0 0 22px; color: #fff; font: 400 44px/1.12 var(--f-head); letter-spacing: .02em; text-transform: uppercase; overflow-wrap: anywhere;
  text-shadow: 0 4px 0 #0a1a4a, 0 8px 22px rgba(0,0,0,.5); }
.football-details { display: grid; gap: 18px; margin: 30px 0; }
.football-details div { padding: 14px 12px; border: 1px solid var(--f-line); border-radius: 14px; background: rgba(10,20,48,.72); }
.football-details dt { color: var(--f-gold); font: 700 15px var(--f-cond); letter-spacing: .2em; text-transform: uppercase; }
.football-details dd { margin: 6px 0 0; font-weight: 700; font-size: 18px; line-height: 1.5; overflow-wrap: anywhere; }
.football-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 8px 0 6px; }
.football-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 22px; border-radius: 999px;
  border: 2px solid var(--f-gold); background: var(--f-gold); color: #0b1a3a; font: 800 19px var(--f-cond); letter-spacing: .07em;
  text-transform: uppercase; text-decoration: none; cursor: pointer; }
.football-btn.football-ghost { background: transparent; color: var(--f-gold); }

/* ---- the real objects: shot on black, faded at the edges so they melt into the page, and they "light up" (floodlights on) ---- */
.football-relic-wrap { position: relative; width: min(78vw, 340px); aspect-ratio: 1; margin: 0 auto 10px; }
.football-toy { cursor: pointer; }
.football-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 > .football-relic, .football-relic.lit { filter: none; transform: none; }
.football-tap-hint { margin: -4px 0 12px; color: var(--f-muted); font-style: italic; font-size: 14px; }
/* the toys: the ball = kicked (it flies up spinning and drops back with a bounce); the whistle shakes; the boots hop;
   the flag waves; the scarf swings; the trophy gleams */
.football-wobble { animation: football-wobble .7s ease-in-out; }
@keyframes football-wobble { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-6deg); } 40% { transform: rotate(5deg); } 60% { transform: rotate(-3deg); } 80% { transform: rotate(2deg); } }
.football-hop { animation: football-hop .6s cubic-bezier(.3,1.6,.5,1); }
@keyframes football-hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-18px) rotate(-4deg); } }
.football-kickball.football-kicked .football-relic { animation: football-kicked 1.1s cubic-bezier(.25,.8,.35,1); }
@keyframes football-kicked { 0% { transform: none; } 30% { transform: translateY(-38%) rotate(-240deg) scale(.82); } 62% { transform: translateY(0) rotate(-400deg) scale(1); }
  74% { transform: translateY(-9%) rotate(-440deg); } 86% { transform: translateY(0) rotate(-460deg); } 100% { transform: rotate(-470deg); } }
.football-whistle.football-blow .football-relic { animation: football-blow .5s linear 2; }
@keyframes football-blow { 0%, 100% { transform: none; } 25% { transform: translateX(-4px) rotate(-3deg); } 75% { transform: translateX(4px) rotate(3deg); } }
.football-flag.football-wave .football-relic { animation: football-wave 1s ease-in-out; transform-origin: 50% 90%; }
@keyframes football-wave { 0%, 100% { transform: none; } 25% { transform: rotate(-8deg); } 50% { transform: rotate(6deg); } 75% { transform: rotate(-4deg); } }
.football-trophy.lit .football-relic { animation: football-gleam 3.4s ease-in-out 1.4s infinite; }
@keyframes football-gleam { 0%, 100% { filter: none; } 50% { filter: brightness(1.18); } }

/* the cake: candles to match the age, flames drawn live; tap them out */
.football-cake-wrap { position: relative; width: min(92vw, 420px); margin: 0 auto 4px; }
canvas.football-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%); }
.football-cake-hint { margin: -10px 0 18px; color: var(--f-gold); font: 700 20px var(--f-cond); letter-spacing: .08em; text-transform: uppercase; min-height: 1.4em; }
#football-confetti { position: fixed; inset: 0; z-index: 30; width: 100%; height: 100%; pointer-events: none; }

/* the player card: a trading card made from the guest's name (the same name always gets the same card); its foil is painted
   on a canvas (a drawn gradient would be darkened on Samsung) */
.football-pcard { position: relative; z-index: 0; width: min(80vw, 300px); margin: 14px auto 16px; padding: 18px 18px 16px;
  border-radius: 22px 22px 60px 60px / 22px 22px 40px 40px; text-align: center; overflow: hidden; color: #2a1a00; box-shadow: 0 14px 34px rgba(0,0,0,.5); }
.football-pcard.football-blue { color: #06163f; }
.football-pcard .fpc-bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.football-pcard .fpc-rt { position: absolute; left: 20px; top: 16px; text-align: center; line-height: 1; }
.football-pcard .fpc-rt b { display: block; font: 400 48px/1 var(--f-head); }
.football-pcard .fpc-rt span { font: 800 18px var(--f-cond); letter-spacing: .08em; }
.football-pcard .fpc-no { position: absolute; right: 18px; top: 18px; font: 400 26px var(--f-head); opacity: .8; }
.football-pcard .fpc-kit { width: 108px; height: 108px; margin: 36px auto 4px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.35); }
.football-pcard .fpc-kit svg { width: 70px; height: 70px; }
.football-pcard .fpc-who { margin: 6px 0 2px; font: 400 32px/1.05 var(--f-head); text-transform: uppercase; letter-spacing: .03em; overflow-wrap: anywhere; }
.football-pcard .fpc-team { display: inline-block; margin: 2px 0 10px; padding: 3px 12px; border-radius: 999px; font: 800 14px var(--f-cond); letter-spacing: .14em;
  text-transform: uppercase; background: rgba(0,0,0,.18); }
.football-pcard .fpc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; border-top: 2px solid rgba(0,0,0,.2); padding-top: 10px; }
.football-pcard .fpc-stats b { display: block; font: 400 24px/1 var(--f-head); }
.football-pcard .fpc-stats span { font: 800 13px var(--f-cond); letter-spacing: .12em; text-transform: uppercase; }
.football-pcard .fpc-shine { position: absolute; top: -40%; left: -60%; width: 40%; height: 180%; transform: rotate(20deg); pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent); }
.football-pcard.football-flash .fpc-shine { animation: football-shine .9s ease-in-out; }
@keyframes football-shine { 0% { opacity: 1; left: -60%; } 100% { opacity: 1; left: 130%; } }
.football-pass-form { display: flex; gap: 10px; max-width: 360px; margin: 0 auto; }
.football-pass-form input { flex: 1; min-width: 0; padding: 13px 14px; border-radius: 12px; border: 1px solid rgba(61,123,255,.4); background: rgba(10,20,48,.9);
  color: var(--f-ink); font: 600 17px var(--f-body); }
.football-pass-form .football-btn { flex: none; min-height: 48px; padding: 10px 16px; font-size: 16px; }

/* little windows into the stadium between sections: the film's own footage (the walk-out, the dribble, the crowd, the
   huddle, the trophy lift), cut as looping strips and faded into the page at the edges. Never the goal (it plays once). */
.football-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%); }
.football-sceneband video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.92) contrast(1.02) brightness(.85); }
.football-sceneband .football-glow { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 50% 105%, rgba(61,123,255,.14), transparent 70%),
  linear-gradient(180deg, rgba(4,10,28,.75), rgba(4,10,28,0) 32%, rgba(4,10,28,0) 62%, rgba(4,10,28,.85)); }
.football-sceneband::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 -28px 30px -18px rgba(4,10,28,.95), inset 0 28px 30px -18px rgba(4,10,28,.95); }
/* the floodlight haze drifting behind the page */
.football-lights { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.football-sealed .football-lights { display: none; }
.football-lights i { position: absolute; width: 140vmax; height: 60vmax; border-radius: 50%; filter: blur(60px); opacity: .5;
  background: radial-gradient(closest-side, rgba(61,123,255,.2), rgba(61,123,255,0)); animation: football-drift 38s ease-in-out infinite alternate; }
.football-lights i:nth-child(1) { left: -60vmax; top: 10%; }
.football-lights i:nth-child(2) { right: -70vmax; top: 45%; animation-duration: 46s; animation-delay: -12s; }
.football-lights i:nth-child(3) { left: -40vmax; top: 75%; animation-duration: 54s; animation-delay: -30s; background: radial-gradient(closest-side, rgba(47,191,95,.1), rgba(47,191,95,0)); }
@keyframes football-drift { from { transform: translateX(-12vmax); } to { transform: translateX(22vmax); } }

/* ---- the page below: the test page's look ---- */
.football-page .sc-section { position: relative; max-width: 560px; padding: 56px 20px 40px; border-bottom: 0; text-align: center; font-family: var(--f-body); color: var(--f-ink); }
.football-page .sc-flow > .sc-section, .football-page .sc-flow > .sc-footer { position: relative; z-index: 1; }
.football-page .sc-h2, .football-page .sc-script { margin: 0 0 22px; color: #fff; font: 400 44px/1.12 var(--f-head); letter-spacing: .02em; text-transform: uppercase;
  text-shadow: 0 4px 0 #0a1a4a, 0 8px 22px rgba(0,0,0,.5); overflow-wrap: anywhere; }
/* the test page had no rule under its headings */
.football-page .sc-section > .sc-rule-sm { display: none; }
.football-page .sc-rule, .football-page .sc-rule-sm { width: 72px; height: 3px; margin: 0 auto 22px; border: 0; border-radius: 3px; background: linear-gradient(90deg, transparent, var(--f-gold), transparent); }
.football-page .sc-lead { font-size: 17px; line-height: 1.55; color: var(--f-ink); }
.football-page .sc-signature { font: 700 24px/1.25 var(--f-cond); letter-spacing: .03em; color: var(--f-ink); margin-top: 18px; }
.football-page #dresscode .sc-lead { font: 700 24px/1.25 var(--f-cond); letter-spacing: .03em; }
.football-eyebrow { margin: 0 0 10px; color: var(--f-gold); font: 700 17px var(--f-cond); letter-spacing: .22em; text-transform: uppercase; }
.football-page .sc-detail { display: block; padding: 14px 12px; margin: 0 0 14px; border: 1px solid var(--f-line); border-radius: 14px; background: rgba(10,20,48,.72); }
.football-page .sc-label { display: block; margin: 0 0 4px; color: var(--f-gold); font: 700 15px var(--f-cond); letter-spacing: .2em; text-transform: uppercase; }
.football-page .sc-value { font-family: var(--f-body); font-weight: 700; font-size: 18px; line-height: 1.5; color: var(--f-ink); }
.football-page .countdown-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 14px 0 12px; padding: 0; background: none; border: 0; }
.football-page .countdown-item { padding: 12px 0 8px; border: 1px solid var(--f-line); border-radius: 14px; background: rgba(10,20,48,.72); }
.football-page .countdown-val { display: block; font: 400 42px/1 var(--f-head); color: var(--f-gold); font-variant-numeric: tabular-nums; }
.football-page .countdown-lbl { color: var(--f-muted); font: 700 12px var(--f-cond); letter-spacing: .18em; text-transform: uppercase; }
.football-page .sc-timeline { list-style: none; margin: 16px 0 12px; padding: 0; text-align: left; }
.football-page .sc-timeline li { display: grid; grid-template-columns: 86px 1fr; gap: 12px; padding: 11px 4px; border-bottom: 1px dashed var(--f-line); }
.football-page .sc-timeline .sc-dot, .football-page .sc-timeline .sc-ico { display: none; }
.football-page .sc-time { color: var(--f-gold); font: 700 19px var(--f-cond); letter-spacing: .04em; }
.football-page .sc-what { font-family: var(--f-body); font-weight: 500; font-size: 17px; line-height: 1.45; color: var(--f-ink); }
.football-page .sc-map { margin: 18px 0 10px; padding: 8px; border: 0; border-radius: 16px; background: linear-gradient(145deg, #1d7a3f, #0d2a4a 55%, #1d7a3f);
  box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.football-page .sc-map iframe { display: block; width: 100%; height: 300px; border: 0; border-radius: 10px; background: #0c1220; }
.football-page .sc-btn { border-radius: 999px; min-height: 48px; padding: 12px 22px; font: 800 19px var(--f-cond); letter-spacing: .07em; text-transform: uppercase; }
html:not([data-ss]) .football-page .sc-btn-solid { background: var(--f-gold); border: 2px solid var(--f-gold); color: #0b1a3a; box-shadow: none; }
.football-page .sc-btn-ghost { background: transparent; border: 2px solid var(--f-gold); color: var(--f-gold); }
.football-page .sc-alt-links, .football-page .sc-alt-links a { color: var(--f-muted); }
/* the reply form (Gary 29/9: consistent spacing, everything left-aligned) */
.football-page .sc-form { text-align: left; margin-top: 10px; }
.football-page .sc-form label, .football-page .sc-legend { display: block; margin: 22px 0 8px; padding: 0; color: var(--f-gold); font: 700 15px var(--f-cond); letter-spacing: .16em;
  text-transform: uppercase; text-align: left; }
.football-page .sc-form > label:first-of-type { margin-top: 0; }
.football-page .sc-form .sc-choice label { margin: 0; letter-spacing: 0; text-transform: none; }
.football-page .sc-form input[type="text"], .football-page .sc-form input[type="tel"], .football-page .sc-form input[type="email"], .football-page .sc-form select, .football-page .sc-form textarea {
  width: 100%; padding: 13px 14px; border-radius: 12px; border: 1px solid rgba(61,123,255,.4); background: rgba(10,20,48,.9); color: var(--f-ink); font: 600 17px var(--f-body); }
.football-page .sc-form input:focus, .football-page .sc-form textarea:focus, .football-page .sc-form select:focus { outline: 2px solid var(--f-gold); outline-offset: 1px; }
.football-page .sc-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.football-page .sc-choice span { display: flex; align-items: center; justify-content: center; min-height: 54px; padding: 10px; border-radius: 14px; text-align: center;
  border: 2px solid rgba(255,214,90,.55); color: var(--f-ink); font: 700 17px var(--f-body); letter-spacing: 0; text-transform: none; box-shadow: none; }
html:not([data-ss]) .football-page .sc-choice span { background: transparent; }
html:not([data-ss]) .football-page .sc-choice input:checked + span { background: var(--f-gold); border-color: var(--f-gold); color: #0b1a3a; }
/* Samsung: a picked answer as on the test page Gary checked on his phone (gold words, thick gold rim, no fill): the
   app's ink-over-metal fill turned the answer's ⚽ into a dark blob */
html[data-ss] .football-page .sc-choice input:checked + span { background: transparent; border-color: var(--f-gold); border-width: 3px; color: var(--f-gold);
  -webkit-text-fill-color: currentColor; -webkit-background-clip: border-box; background-clip: border-box; }
.football-page .sc-thanks { border: 2px solid var(--f-gold); border-radius: 16px; background: rgba(255,214,90,.08); padding: 18px; text-align: left; }
.football-page .sc-footer { position: relative; padding: 56px 24px 70px; text-align: center; }
.football-page .sc-footer .sc-script { font: 400 44px/1.12 var(--f-head); color: #fff; }
.football-page .sc-footer-sub { color: var(--f-muted); }
.football-page .football-again { margin-top: 18px; }

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

/* ---- Samsung Internet (html[data-ss], Android): its dark mode flips any colour the page draws but keeps pictures'
   colours (and dims pictures, not canvases). So, like the test page Gary checked on his Samsung and the laser's:
   the gold buttons take their colour from a picture inside them and their words from an ink picture shaped to the
   letters (kids-football-stage.js ssButton), the ring round the ball is a picture, the player card's words are
   painted through ink pictures, and the objects become canvases (public/js/ss-canvas.js + the decor script). ---- */
.football-btn, .football-go { position: relative; }
.football-btn, .football-go, .football-ball-label { isolation: isolate; }   /* the label is already position: absolute */
[data-ss] .football-btn:not(.football-ghost), [data-ss] .football-go, [data-ss] .football-ball-label { background: transparent; border-color: transparent; box-shadow: none; overflow: hidden; }
[data-ss] :is(.football-btn, .football-go, .football-ball-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] .football-ss-ink { background: url('/themes/kids-football/assets/ss-ink-button.jpg') center / cover; -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent; }
[data-ss] .ss-emoji { margin-left: .25em; }
[data-ss] .football-ring { box-shadow: none; background: url('/themes/kids-football/assets/football/ss/ring.png') center / 100% 100% no-repeat; }
[data-ss] .football-pcard :is(.fpc-rt, .fpc-no, .fpc-who, .fpc-team, .fpc-stats) {
  background: url('/themes/kids-football/assets/football/ss/ink-card.png') 0 0 / 100% 100%; -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent; text-shadow: none; }
[data-ss] .football-pcard.football-blue :is(.fpc-rt, .fpc-no, .fpc-who, .fpc-team, .fpc-stats) { background-image: url('/themes/kids-football/assets/football/ss/ink-cardblue.png'); }
[data-ss] .football-pcard .fpc-team { background-color: transparent; }