/* age191.css: מסך בחירת הגיל ומסך "מי משחק?" לפי תמונות גיא (מפרט 191 / 90: age-select.jpg + player-select.jpg, 1:1): יער לילה, לוגו בועות,
   לוח זכוכית עם שם, "בְּנֵי כַּמָּה אַתֶּם?", 5 כדורי גביש, כוכב, "הַמְשֵׁךְ" ירוק; קוסם ופְּלִינְקִי גדולים וחיים על רצפת היער; כרטיסי זכוכית לשחקנים; X אדום.
   ועוד חיים (גיא 02.11 21:37): נשימה, מצמוץ, נדנוד, נפנוף שרביט, כוכב נופל, גחליליות. מונפשים רק transform ו-opacity.
   | the age and who-plays screens after Guy's pictures (spec 191 / 90), and the life on them (Guy 02.11 21:37). Only transform and opacity animate.
   Talks to: app/index.html (#familyScreen, #kidForm, #kidCards, #newKidBtn, #kidBack), ui/opening-art.js (.f191, .hall-wiz), ui/opening-hero.js (.kt-hero, .kt-pet,
   .nk-words), ui/age191-life.js (.f9-*), ui/brand-logo.js (#brandLogo, its own place), tests/f9_age_screen_check.mjs.
   Update: places are in vw / vh measured on the 2752x1536 pictures; sizes in --u (1% of a 16:9 stage that fits the screen). Loaded after opening.css. */

#familyScreen.f191 { --u: min(1vw, 1.7778vh); --glass: rgba(34, 46, 66, .42); --glass-rim: rgba(196, 210, 240, .38); --gold-t: #FFD58A;
  background-size: cover; background-position: 50% 50%; background-color: #0B1424; }
#familyScreen.f191 .f9-life { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
#familyScreen.f191 .fam-title { position: relative; z-index: 3; }

/* ---------- the age screen (the form is open): logo + title top right, the big glass panel on the left, the pair on the forest floor ---------- */
#familyScreen.f191:has(#kidForm:not([hidden])) { display: block; overflow: hidden; padding: 0; }
#familyScreen.f191:has(#kidForm:not([hidden])) .fam-title { position: absolute; top: 30vh; right: 8vw; width: min(40vw, calc(15.5vh * 5)); margin: 0; text-align: center;
  font: 700 calc(5 * var(--u))/1.25 'Rubik', sans-serif; color: var(--gold-t);
  text-shadow: 0 2px 0 rgba(120, 70, 10, .55), 0 0 calc(1.6 * var(--u)) rgba(255, 196, 90, .75), 0 0 calc(4 * var(--u)) rgba(255, 170, 60, .35); }
#familyScreen.f191:has(#kidForm) .hall-wiz { position: absolute; z-index: 2; left: 60vw; right: 5vw; bottom: 2vh; top: auto; height: 55vh; width: auto; margin: 0; }
#familyScreen.f191:has(#kidForm[hidden]) .hall-wiz { display: none; }
#familyScreen.f191 .hall-wiz .f9-hero { position: absolute; left: 0; bottom: 0; height: 100%; width: auto; }
/* Guy 05.11 19:09: no Plinky on this screen before the first hatch (ui/opening-art.js mounts the wizard only; the .hw-pet rule is gone) */
#familyScreen.f191 .hall-wiz .hw-ring, #familyScreen.f191 .hall-wiz::after { display: none; }
/* the soft round shadow under each character (D-006) */
#familyScreen.f191 .f9-fig::before { content: ""; position: absolute; left: 12%; right: 12%; bottom: -3%; height: 9%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 8, 20, .6), transparent); }
#familyScreen.f191 .hall-wiz .f9-pet .f9-body, #familyScreen.f191 .kt-pet .f9-body { filter: drop-shadow(0 0 calc(1.4 * var(--u)) rgba(255, 170, 50, .65)); }

/* Guy 05.11 19:09: 5 orbs with 64 px tap rings need about 320 px; on a narrow phone (667 wide) the panel grows to 336 px and moves left so it
   still ends before the title (51vw); 844 wide and up keep the old 39.8vw place */
#familyScreen.f191 #kidForm { position: absolute; z-index: 2; left: clamp(8px, calc(51vw - max(39.8vw, 336px)), 7.4vw); top: 9.9vh; width: max(39.8vw, 336px); height: 81.5vh; max-width: none; margin: 0; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: stretch; justify-content: space-between; gap: 0; padding: 6.5vh 2.2vw 3vh; /* Guy 10.11 18:32: 2.8vw -> 2.2vw sides, room for the full-size age orbs */
  border-radius: calc(2.2 * var(--u)); color: #EEF2FA; background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)), var(--glass);
  border: 2px solid var(--glass-rim); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 calc(2 * var(--u)) calc(4 * var(--u)) rgba(0, 6, 20, .45);
  -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15); }
#familyScreen.f191 .f9-namebox { position: relative; flex: 0 0 auto; }
/* owner spec 232 (Guy 10.11.2026 08:57: "השם רשום מאוד מאוד קטן, צריך להגדיל את הכתב"): the typed name is big for ages 4-8, at least 46 px
   (was calc(2.6 * --u) = 18 px at 844x390 and 9 px with the phone keyboard open); the field grows with it; the long hint stays smaller.
   Guy 10.11 18:32 ("האותיות ענקיות צריך לעשות משהו באמצע"): the middle ground = max(30px, 4.4u): 30 px on a phone (was 46), 45 px at 1024x768 (was 68).
   Guy 11.11 00:44 ("השם גדול מידי"): a third smaller = max(22px, 3u): 22 px on a phone, 31 px at 1024x768 */
#familyScreen.f191 #kidForm #kidName { display: block; width: 100%; box-sizing: border-box; height: max(64px, 16vh); min-height: 0; margin: 0; border-radius: 999px;
  padding: 0 max(44px, calc(6 * var(--u))) 0 calc(2 * var(--u)); font: 700 max(22px, calc(3 * var(--u)))/1 'Rubik', sans-serif; color: #FFFFFF; text-align: right;
  background: rgba(10, 16, 28, .55); border: 2px solid rgba(150, 168, 205, .38); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .35); }
#familyScreen.f191 #kidForm #kidName::placeholder { color: rgba(214, 222, 238, .78); opacity: 1; font-size: max(20px, calc(2.8 * var(--u))); font-weight: 500; }
/* spec 232: the phone keyboard is open (a short screen and the name has focus): only the name and "הַמְשֵׁךְ" stay, so both fit */
@media (max-height: 300px) {
  #familyScreen.f191 #kidForm:has(#kidName:focus) .age-title, #familyScreen.f191 #kidForm:has(#kidName:focus) #kidAge,
  #familyScreen.f191 #kidForm:has(#kidName:focus) .f9-star { display: none; }
  #familyScreen.f191 #kidForm:has(#kidName:focus) { top: 4px; height: calc(100% - 8px); padding: 8px 2.8vw; justify-content: space-evenly; }
  #familyScreen.f191 #kidForm:has(#kidName:focus) #kidName { height: 64px; }
  #familyScreen.f191 #kidForm:has(#kidName:focus) #kidNext { font-size: 22px; }
}
/* Guy 11.11 00:47: the same when the keyboard only shrinks the visible area (Android Chrome, fullscreen): ui/kb-lift.js sets .kb-open + --kb-h */
html.kb-open #familyScreen.f191 #kidForm .age-title, html.kb-open #familyScreen.f191 #kidForm #kidAge, html.kb-open #familyScreen.f191 #kidForm .f9-star { display: none; }
html.kb-open #familyScreen.f191 #kidForm { top: 4px; height: calc(var(--kb-h, 100vh) - 8px); padding: 8px 2.8vw; justify-content: space-evenly; }
html.kb-open #familyScreen.f191 #kidForm #kidName { height: min(64px, calc(var(--kb-h, 100vh) * .3)); }
html.kb-open #familyScreen.f191 #kidForm #kidNext { font-size: 22px; }
#familyScreen.f191 #kidForm #kidName:focus { outline: none; border-color: rgba(255, 213, 138, .8); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .35), 0 0 0 3px rgba(255, 213, 138, .25); }
#familyScreen.f191 .f9-pencil { position: absolute; top: 50%; right: calc(2.4 * var(--u)); width: calc(3.4 * var(--u)); min-width: 20px; height: auto; aspect-ratio: 1; transform: translateY(-50%); pointer-events: none; }
#familyScreen.f191 #kidForm .age-title { margin: 0; font: 700 calc(3.2 * var(--u))/1.3 'Rubik', sans-serif; color: var(--gold-t); text-align: center;
  text-shadow: 0 2px 0 rgba(90, 50, 8, .55), 0 0 calc(1.2 * var(--u)) rgba(255, 190, 90, .55); }
/* Guy 05.11 19:09 ("העיגולים גדולים מדי"): the orbs are drawn at about 2/3 of their old size (was max(46px, min(5.9vw, 12vh))); each keeps a 64 px
   tap ring (ui/tap-target.js .tt64), so the row keeps the orb centres at least 64 px apart; one row, centred */
/* Guy 10.11 18:32 ("אין מקום לבחירת הגיל ... זה של הגיל קטן", a middle ground with 05.11 19:09 "too big" = 47 px then, 31 px since): each orb
   is drawn at least 44 px (55 px at 1024x768), at least 12 px apart, and the 64 px rings never overlap (centres >= 65 px apart) */
#familyScreen.f191 #kidForm #kidAge { --age-d: max(44px, min(5.4vw, 11.5vh)); display: flex; flex-wrap: nowrap; justify-content: center;
  gap: max(12px, calc(65px - var(--age-d))); margin: 0 -1vw; padding: 0; }
/* a wide screen has the room inside the padding: the row (and the guide's glow around it) stays off the panel's rim */
@media (min-width: 900px) { #familyScreen.f191 #kidForm #kidAge { margin: 0; } }

/* the 5 crystal age orbs: a silver rim, cut facets, a bright gloss, each its own jewel (4 amethyst .. 8 garnet), a chunky dark lip below */
#familyScreen.f191 #kidForm #kidAge .chip { --gem: #9B4FC8; --gem-d: #4E1F73; --gem-l: #E3C2FF;
  width: var(--age-d); height: auto; min-height: 0; aspect-ratio: 1; padding: 0; margin: 0; border-radius: 50%; flex: 0 0 auto;
  font: 700 max(19px, calc(2.9 * var(--u)))/1 'Rubik', sans-serif; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .45), 0 0 6px rgba(0, 0, 0, .35);
  border: 3px solid rgba(226, 232, 246, .85); border-bottom-width: 3px;
  background: radial-gradient(circle at 34% 26%, rgba(255, 255, 255, .95) 0 7%, rgba(255, 255, 255, .25) 16%, transparent 30%),
    conic-gradient(from 22deg, var(--gem-l), var(--gem) 12%, var(--gem-d) 25%, var(--gem) 37%, var(--gem-l) 50%, var(--gem) 62%, var(--gem-d) 75%, var(--gem) 87%, var(--gem-l)),
    radial-gradient(circle at 50% 60%, var(--gem), var(--gem-d));
  background-blend-mode: normal, soft-light, normal;
  box-shadow: 0 5px 0 rgba(20, 24, 40, .85), 0 8px 14px rgba(0, 0, 0, .45), inset 0 -6px 10px rgba(0, 0, 0, .35), inset 0 3px 6px rgba(255, 255, 255, .35), 0 0 calc(1.4 * var(--u)) color-mix(in srgb, var(--gem) 55%, transparent);
  transition: transform .15s; }
#familyScreen.f191 #kidForm #kidAge .gem4 { --gem: #9B4FD0; --gem-d: #4A1C78; --gem-l: #E6C6FF; }
#familyScreen.f191 #kidForm #kidAge .gem5 { --gem: #3F93A8; --gem-d: #174B5C; --gem-l: #BDF1FA; }
#familyScreen.f191 #kidForm #kidAge .gem6 { --gem: #3E9C58; --gem-d: #16502A; --gem-l: #C4F5CF; }
#familyScreen.f191 #kidForm #kidAge .gem7 { --gem: #4D66CF; --gem-d: #1D2C78; --gem-l: #C9D4FF; }
#familyScreen.f191 #kidForm #kidAge .gem8 { --gem: #B8503E; --gem-d: #5E1E16; --gem-l: #FFCDBE; }
#familyScreen.f191 #kidForm #kidAge .chip:active { transform: translateY(4px); box-shadow: 0 1px 0 rgba(20, 24, 40, .85), 0 3px 8px rgba(0, 0, 0, .4), inset 0 -6px 10px rgba(0, 0, 0, .35); }
#familyScreen.f191 #kidForm #kidAge .chip[aria-pressed="true"] { transform: scale(1.12); border-color: #FFF3C0;
  box-shadow: 0 5px 0 rgba(20, 24, 40, .85), 0 0 0 4px #FFD54D, 0 0 calc(2 * var(--u)) 6px rgba(255, 214, 90, .85), inset 0 -6px 10px rgba(0, 0, 0, .3); }

#familyScreen.f191 .f9-star { display: block; align-self: center; flex: 0 1 auto; width: auto; height: min(14vh, calc(9 * var(--u))); min-height: 34px; overflow: visible;
  pointer-events: none; /* a decoration (aria-hidden): a touch on it goes to the age orb's 64 px ring above it (Guy 05.11 19:09) */
  animation: f9StarFloat 3.6s ease-in-out infinite; }
#familyScreen.f191 #kidForm #kidNext { width: 100%; height: max(48px, 11vh); min-height: 0; margin: 0; border-radius: calc(1.8 * var(--u));
  font: 700 calc(3.8 * var(--u))/1 'Rubik', sans-serif; color: #3D3A0C; text-shadow: 0 1px 0 rgba(255, 255, 210, .55);
  background: linear-gradient(180deg, #D8E36A 0%, #B2C540 45%, #93A82C 100%); border: 2px solid rgba(240, 250, 170, .7); border-bottom: 8px solid #5A6A16;
  box-shadow: 0 8px 16px rgba(0, 0, 0, .4), inset 0 2px 0 rgba(255, 255, 230, .6), 0 0 calc(2 * var(--u)) rgba(190, 220, 80, .35); }
#familyScreen.f191 #kidForm #kidNext:active { transform: translateY(6px); border-bottom-width: 2px; }
#familyScreen.f191 #kidForm #kidNext.off { filter: none; opacity: .62; background: linear-gradient(180deg, #A9B07A, #8A925C); box-shadow: 0 6px 12px rgba(0, 0, 0, .3); }

/* the red X (only when other children exist: C-72i), top right like the picture */
#familyScreen.f191 .kid-back { top: max(2.2vh, env(safe-area-inset-top)); right: max(1.6vw, env(safe-area-inset-right)); width: max(44px, calc(4.6 * var(--u))); height: max(44px, calc(4.6 * var(--u)));
  z-index: 4; border: 3px solid rgba(255, 220, 220, .7); border-bottom: 5px solid #6E1414;
  background: radial-gradient(circle at 38% 30%, #F49A9A, #D23A3A 55%, #9E1E1E); box-shadow: 0 6px 12px rgba(0, 0, 0, .45), inset 0 2px 0 rgba(255, 255, 255, .45); }
#familyScreen.f191 .kid-back svg { width: 58%; height: 58%; }

/* ---------- the who-plays screen (the cards): logo centred on top, white title, two big glass cards ---------- */
#familyScreen.f191:has(#kidForm[hidden]) { display: block; overflow: hidden; padding: 0; }
#familyScreen.f191:has(#kidForm[hidden]) .fam-title { position: absolute; top: 26vh; left: 0; right: 0; margin: 0; text-align: center;
  font: 500 calc(4.2 * var(--u))/1.3 'Rubik', sans-serif; color: #fff; text-shadow: 0 2px 6px rgba(0, 0, 0, .55), 0 0 calc(1.4 * var(--u)) rgba(190, 210, 255, .45); }
#familyScreen.f191 #kidCards { position: absolute; z-index: 2; top: 39vh; height: 47.6vh; left: 2vw; right: 2vw; width: auto; max-width: none; margin: 0;
  display: flex; flex-direction: row; justify-content: center; align-items: stretch; gap: 2.8vw; grid-template-columns: none; }
#familyScreen.f191 .kid-card, #familyScreen.f191 .new-kid { position: relative; flex: 0 1 calc(21.9 * var(--u)); width: auto; min-width: 0; height: 100%; margin: 0;
  border-radius: calc(2.4 * var(--u)); border: 2px solid var(--glass-rim); border-bottom: 2px solid var(--glass-rim); overflow: visible;
  background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02)), var(--glass);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 calc(1.4 * var(--u)) calc(3 * var(--u)) rgba(0, 6, 20, .5);
  -webkit-backdrop-filter: blur(12px) saturate(1.15); backdrop-filter: blur(12px) saturate(1.15); }
#familyScreen.f191 .kid-card:active, #familyScreen.f191 .new-kid:active { transform: translateY(4px) scale(.98); }
#familyScreen.f191 .kid-card.current { border-color: rgba(220, 230, 255, .6); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 calc(2 * var(--u)) rgba(170, 200, 255, .3), 0 calc(1.4 * var(--u)) calc(3 * var(--u)) rgba(0, 6, 20, .5); }
#familyScreen.f191 .kid-card .kt-glow, #familyScreen.f191 .new-kid .kt-glow { display: none; }
#familyScreen.f191 .kid-card .kt-hero { position: absolute; left: auto; right: 8%; top: 1%; bottom: auto; height: 75%; width: auto; margin: 0; filter: none; }
#familyScreen.f191 .kid-card .kt-pet { position: absolute; left: 4%; right: auto; top: 40%; bottom: auto; height: 30%; width: auto; filter: none; }
#familyScreen.f191 .kid-card .kid-name { position: absolute; left: 50%; bottom: 6%; transform: translateX(-50%); margin: 0; max-width: 78%; min-width: 52%; box-sizing: border-box; height: 16%;
  display: flex; align-items: center; justify-content: center; padding: 0 calc(1.6 * var(--u)); border-radius: 999px; font: 500 calc(2.8 * var(--u))/1 'Rubik', sans-serif; color: #fff;
  background: rgba(10, 16, 28, .72); border: 1.5px solid rgba(170, 186, 220, .35); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .35); }
#familyScreen.f191 .new-kid { justify-content: center; gap: 4%; border-style: solid; }
#familyScreen.f191 .new-kid .nk-art { width: 38%; height: auto; aspect-ratio: 1; animation: f9Plus 3.2s ease-in-out infinite; filter: none; }
#familyScreen.f191 .new-kid .nk-words { font: 500 calc(3 * var(--u))/1.3 'Rubik', sans-serif; color: #fff; text-shadow: 0 2px 4px rgba(0, 0, 0, .5); }
#familyScreen.f191 .kid-card svg { max-height: none; }

/* ---------- the living figures (ui/age191-life.js): sway on the box, breathing on the body, lids that blink, a wand wave ---------- */
#familyScreen.f191 .f9-fig { transform-origin: 50% 100%; animation: f9Sway 6.5s ease-in-out infinite; }
#familyScreen.f191 .f9-fig .f9-body { position: absolute; inset: 0; transform-origin: 50% 100%; animation: f9Breathe 3.4s ease-in-out infinite; }
#familyScreen.f191 .f9-fig .f9-body img { display: block; width: 100%; height: 100%; object-fit: contain; animation: none; filter: none; position: static; margin: 0; transform: none; }
#familyScreen.f191 .f9-pet { animation-duration: 5.2s; animation-delay: -1.4s; }
#familyScreen.f191 .f9-pet .f9-body { animation: f9PetBreathe 2.8s ease-in-out infinite; }
#familyScreen.f191 .hall-wiz[data-state=speaking] .f9-wiz .f9-body { animation: f9Talk .5s ease-in-out infinite; }
#familyScreen.f191 .f9-lid { position: absolute; border-radius: 50% 50% 46% 46%; transform-origin: 50% 0; transform: scaleY(0); opacity: 0; animation: f9Blink 4.6s ease-in-out infinite; }
#familyScreen.f191 .f9-lid-wiz { background: radial-gradient(120% 90% at 50% 20%, #F6C29E, #E9A27C 70%, #D88E6A); box-shadow: inset 0 -2px 0 rgba(120, 60, 40, .55); }
#familyScreen.f191 .f9-lid-pet { background: radial-gradient(120% 90% at 50% 25%, #FFD34A, #FFB20C 70%, #F29A00); box-shadow: inset 0 -2px 0 rgba(140, 70, 0, .55); animation-duration: 3.9s; }
#familyScreen.f191 .f9-wand { position: absolute; width: 0; height: 0; }
#familyScreen.f191 .f9-waving { animation: f9Wave 1.3s ease-in-out 1; }
#familyScreen.f191 .f9-spark { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, #fff 0 25%, #FFE58A 45%, rgba(255, 220, 120, 0) 70%); animation: f9Spark 1s ease-out forwards; }

/* ---------- the night: fireflies that are born, drift, pulse and fade; a shooting star with a soft tail ---------- */
#familyScreen.f191 .f9-fly { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle, #FFFBD0 0 18%, #F2F27A 38%, rgba(214, 240, 110, .35) 58%, rgba(214, 240, 110, 0) 72%); animation: f9Fly 7s ease-in-out forwards; }
#familyScreen.f191 .f9-shoot { position: absolute; width: 0; height: 0; z-index: 0; }
#familyScreen.f191 .f9-tail { position: absolute; left: 0; top: -2px; width: 16vw; height: 3px; border-radius: 3px; opacity: 0;
  background: linear-gradient(90deg, #fff 0 2%, rgba(220, 235, 255, .85) 8%, rgba(160, 200, 255, .3) 45%, rgba(160, 200, 255, 0)); box-shadow: 0 0 8px rgba(200, 225, 255, .6);
  animation: f9Shoot 1.25s cubic-bezier(.3, .1, .6, 1) forwards; }
#familyScreen.f191 .f9-tail::before { content: ""; position: absolute; left: -5px; top: -4px; width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(circle, #fff 0 35%, rgba(210, 230, 255, 0) 70%); }

@keyframes f9Sway { 0%, 100% { transform: rotate(-1deg); } 50% { transform: rotate(1deg); } }
@keyframes f9Breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.025, .975) translateY(-0.5%); } }
@keyframes f9PetBreathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.04, .96); } 80% { transform: scale(.98, 1.03) translateY(-2%); } }
@keyframes f9Talk { 50% { transform: scale(1.015, 1.01) rotate(-1deg); } }
@keyframes f9Blink { 0%, 90%, 100% { transform: scaleY(0); opacity: 0; } 91% { opacity: 1; } 94% { transform: scaleY(1); opacity: 1; } 97% { transform: scaleY(0); opacity: 1; } 98% { opacity: 0; } }
/* fix int3 (spec70_onboard P2): the wave rocks the figure on the edge of its feet (the pivot = the bottom corner on the side it leans
   to: translateX(-+50%) around the 50% 100% origin), so no corner ever dips below its floor; it dipped ~3 px under the screen's bottom and the
   form screen scrolled. The pivot side switches only at an upright moment (rotate 0 = no visible jump). */
@keyframes f9Wave { 0% { transform: translateX(-50%) rotate(0) translateX(50%); } 25% { transform: translateX(-50%) rotate(-3.5deg) translateX(50%); }
  40% { transform: translateX(-50%) rotate(0) translateX(50%); } 40.01% { transform: translateX(50%) rotate(0) translateX(-50%); }
  55% { transform: translateX(50%) rotate(2deg) translateX(-50%); } 67% { transform: translateX(50%) rotate(0) translateX(-50%); }
  67.01% { transform: translateX(-50%) rotate(0) translateX(50%); } 80% { transform: translateX(-50%) rotate(-1deg) translateX(50%); }
  100% { transform: translateX(-50%) rotate(0) translateX(50%); } }
@keyframes f9Spark { 0% { transform: translate(0, 0) scale(.4); opacity: 0; } 15% { opacity: 1; transform: translate(0, 0) scale(1.2); } 100% { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } }
@keyframes f9Fly { 0% { transform: translate(0, 0) scale(var(--fs)); opacity: 0; } 15% { opacity: .95; } 30% { opacity: .45; } 45% { opacity: 1; }
  60% { opacity: .5; } 75% { opacity: .9; } 100% { transform: translate(var(--fx), var(--fy)) scale(var(--fs)); opacity: 0; } }
@keyframes f9Shoot { 0% { transform: translateX(0); opacity: 0; } 15% { opacity: 1; } 75% { opacity: .85; } 100% { transform: translateX(-34vw); opacity: 0; } }
@keyframes f9StarFloat { 0%, 100% { transform: translateY(0) scale(1); opacity: 1; } 50% { transform: translateY(-4%) scale(1.04); opacity: .9; } }
@keyframes f9Plus { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.05); opacity: .88; } }

/* calmer, never broken: the characters stand still, the star and the "+" rest; the fireflies only glow softly in place (age191-life.js also
   stops the shooting stars and the wand waves) */
@media (prefers-reduced-motion: reduce) {
  #familyScreen.f191 .f9-fig, #familyScreen.f191 .f9-fig .f9-body, #familyScreen.f191 .f9-lid, #familyScreen.f191 .f9-waving,
  #familyScreen.f191 .f9-star, #familyScreen.f191 .new-kid .nk-art { animation: none !important; }
  #familyScreen.f191 .f9-fly { animation: f9FlyCalm 6s ease-in-out forwards; }
  #familyScreen.f191 .f9-shoot, #familyScreen.f191 .f9-spark { display: none; }
}
@keyframes f9FlyCalm { 0%, 100% { opacity: 0; } 50% { opacity: .7; } }