#results { padding: 16px; overflow-y: auto; }
#results > .card { max-height: calc(100dvh - 32px); overflow-y: auto; }
#chooseIdentity, .identity-primary { display: block; margin: 16px auto 10px; padding: 13px 24px; border: 1px solid #ffe3a1; border-radius: 999px; background: linear-gradient(130deg, #fff0bf, #dfb868); color: #21142f; font: 750 15px system-ui, sans-serif; box-shadow: 0 5px 22px #edc87822; cursor: pointer; }
#chooseIdentity:disabled { opacity: .45; cursor: default; }
#identity-match-status { font: 12px/1.5 system-ui, sans-serif; margin: 12px 0; }
#results #again { font-size: 12px; padding: 9px 22px; letter-spacing: .04em; }
.identity-screen { width: min(820px, 96vw); padding: 28px; font-family: system-ui, sans-serif; }
.identity-screen h1 { letter-spacing: -.04em; font: 700 clamp(26px, 4vw, 38px)/1.16 system-ui, sans-serif; outline: none; margin: 8px 0; }
.identity-eyebrow { text-align: center; color: #c4b4e9; font-size: 10px; font-weight: 750; letter-spacing: .2em; margin-bottom: 10px; }
.identity-screen .identity-subtitle { margin: 10px 0 24px; color: #d7cde6; font-size: 13px; line-height: 1.6; }
.identity-candidates { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.identity-candidate { position: relative; cursor: pointer; display: flex; flex-direction: column; padding: 9px 9px 13px; border-radius: 22px; border: 1px solid #9381c85e; background: linear-gradient(155deg, #38305d, #19162e); transition: border-color .15s, box-shadow .15s, transform .15s; }
.identity-candidate:hover { border-color: #ddc5ff; transform: translateY(-2px); }
.identity-candidate.selected { border-color: #ffe3a1; box-shadow: 0 0 0 2px #ffe3a159, 0 10px 30px #b283de22; }
.identity-candidate:has(input:focus-visible) { outline: 3px solid #b9d5ff; outline-offset: 4px; }
.baby-portrait { display: grid; place-items: center; position: relative; width: 100%; aspect-ratio: 1; border-radius: 15px; overflow: hidden; background: radial-gradient(ellipse at 50% 28%, #f7cf981d, transparent 60%), linear-gradient(155deg, #534666, #2c2746); border: 1px solid #ffffff15; }
.identity-candidate:nth-of-type(2) .baby-portrait { background: radial-gradient(ellipse at 50% 28%, #e8eac423, transparent 60%), linear-gradient(155deg, #355663, #263345); }
.identity-candidate:nth-of-type(3) .baby-portrait { background: radial-gradient(ellipse at 50% 28%, #ffd8ab26, transparent 60%), linear-gradient(155deg, #685261, #38283f); }
.baby-portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.baby-portrait [hidden] { display: none; }
.baby-illustration { position: relative; display: block; width: 100%; height: 100%; filter: drop-shadow(0 8px 8px #140d2b44); }
.baby-illustration > span { position: absolute; display: block; box-sizing: border-box; }
.baby-halo { width: 82%; height: 82%; top: 10%; left: 9%; border: 1px solid #f6deaa33; border-radius: 50%; box-shadow: 0 0 0 10px #ffe7af05, inset 0 0 35px #ffecbc09; }
.baby-body { width: 53%; height: 38%; bottom: -4%; left: 23.5%; border-radius: 48% 48% 18% 18%; background: linear-gradient(120deg, #8dc5b5, #448b87); box-shadow: inset 7px 0 10px #eaffeb20, inset -7px 0 10px #143f4c2b; }
.baby-arm { width: 14%; height: 24%; bottom: -2%; border-radius: 60%; background: var(--baby-skin); box-shadow: inset -3px 0 4px #60332615; }
.baby-arm.left { left: 17%; transform: rotate(22deg); }.baby-arm.right { right: 17%; transform: rotate(-22deg); }
.baby-ear { top: 41%; width: 12%; height: 19%; border-radius: 50%; background: var(--baby-skin); box-shadow: inset 0 0 0 5px #723c3410; }
.baby-ear.left { left: 16%; }.baby-ear.right { right: 16%; }
.baby-face { left: 22%; top: 22%; width: 56%; height: 51%; border-radius: 44% 44% 46% 46%; background: var(--baby-skin); box-shadow: inset -5px -5px 10px #512d2815, inset 5px 5px 8px #fff4dd26; }
.baby-hair { left: 23%; top: 18%; width: 54%; height: 20%; border-radius: 70% 65% 35% 25%; background: var(--baby-hair); transform: rotate(-5deg); box-shadow: inset 0 3px 3px #ffeccc18; }
.baby-curl { left: 42%; top: 12%; width: 22%; height: 17%; border: 8px solid var(--baby-hair); border-right-color: transparent; border-bottom-width: 5px; border-radius: 50%; transform: rotate(-20deg); }
.baby-eye { top: 43%; width: 10%; height: 13%; border-radius: 50%; background: radial-gradient(circle at 36% 29%, #fff 0 13%, transparent 15%), radial-gradient(ellipse at center, #19141c 0 24%, var(--baby-eye) 27% 56%, #f8efe3 59%); box-shadow: 0 -2px 0 #34222055; }
.baby-eye.left { left: 33%; }.baby-eye.right { right: 33%; }
.baby-cheek { top: 54%; width: 13%; height: 7%; border-radius: 50%; background: #e873752b; filter: blur(1px); }
.baby-cheek.left { left: 26%; }.baby-cheek.right { right: 26%; }
.baby-nose { left: 47%; top: 52%; width: 6%; height: 6%; border-radius: 50%; background: var(--baby-skin); box-shadow: 1px 2px 2px #72452d2e; }
.baby-smile { top: 60%; left: 44%; width: 12%; height: 6%; border-bottom: 3px solid #7c413c99; border-radius: 0 0 50% 50%; }
.baby-collar { left: 36%; top: 72%; width: 28%; height: 10%; border-radius: 0 0 50% 50%; background: #fff0d4; box-shadow: 0 2px 3px #13484b33; }
.baby-button { left: 48%; bottom: 5%; width: 4%; aspect-ratio: 1; border-radius: 50%; background: #ffe1a0; box-shadow: 0 2px 3px #254d4b33; }
.identity-baby-label { margin: 12px 0 3px; color: #fff0cf; font-size: 14px; font-weight: 700; text-align: center; }
.identity-pick { text-align: center; color: #c9bddc; font-size: 11px; font-weight: 600; }
.identity-candidate.selected .identity-pick { color: #ffe3a1; }.identity-candidate.selected .identity-pick::before { content: '✓ '; }
.identity-name-step { margin: 20px auto 0; padding: 19px 20px 12px; max-width: 450px; background: #0d0b2055; border: 1px solid #a38cc54d; border-radius: 18px; }
.identity-name-step[hidden] { display: none; }
.identity-name-label { display: block; font-weight: 700; font-size: 17px; margin-bottom: 12px; color: #fff0cf; }
.identity-name-input { box-sizing: border-box; width: 100%; border: 1px solid #ac9ccb; border-radius: 10px; background: #100e24; color: #fff; padding: 12px; font: 16px system-ui, sans-serif; }
.identity-name-input:focus { outline: 2px solid #ffe3a1; outline-offset: 2px; }
.identity-name-hint { display: block; margin-top: 8px; color: #bdb2d0; font-size: 11px; line-height: 1.5; }
.identity-screen .identity-error { color: #ffb4be; font-size: 13px; margin: 8px 0 0; }
.identity-confirmed { width: min(480px, 96vw); }.identity-confirmed .identity-rim { position: relative; max-width: 230px; margin: 18px auto 22px; }
.identity-secondary { display: block; margin: 12px auto 0; border: 0; padding: 8px; background: transparent; color: #cdbde3; font: 12px system-ui, sans-serif; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.identity-primary:focus-visible,.identity-secondary:focus-visible { outline: 3px solid #b9d5ff; outline-offset: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 600px) {
  #results { padding: 8px; } #results > .card { max-height: calc(100dvh - 16px); }
  .identity-screen { padding: 22px 12px; }.identity-screen .identity-subtitle { font-size: 12px; margin-bottom: 18px; }
  .identity-candidates { gap: 7px; }.identity-candidate { padding: 5px 5px 10px; border-radius: 15px; }
  .baby-portrait { border-radius: 11px; }.identity-baby-label { font-size: 11px; margin-top: 10px; }.identity-pick { font-size: 10px; }
  .baby-curl { border-width: 4px; border-bottom-width: 3px; }.baby-smile { border-bottom-width: 2px; }
  .identity-name-step { padding: 16px 14px 9px; }.identity-name-label { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .identity-candidate { transition: none; }.identity-candidate:hover { transform: none; } }

/* who's playing: the name step's hint in the Watcher's voice, and the life-light falling onto the chosen baby's rim
   (0.8 s ease-in, then a 0.3 s ring flash; with reduced motion a 150 ms fade) */
.identity-name-hint.watcher-voice { margin-top: 10px; font-size: 15px; line-height: 1.45; color: #fff3d6; }
.identity-rim .liveem-light { animation: identity-light-drop .8s ease-in both, identity-light-flash .3s .8s ease-out, liveem-pulse .9s 1.1s ease-in-out infinite alternate; }
@keyframes identity-light-drop { from { translate: -50% calc(-50% - 150px); opacity: 0; } 25% { opacity: 1; } to { translate: -50% -50%; opacity: 1; } }
@keyframes identity-light-flash { from { box-shadow: 0 0 6px 2px rgba(255, 226, 170, .55), 0 0 0 0 rgba(255, 238, 196, .95); } to { box-shadow: 0 0 6px 2px rgba(255, 226, 170, .55), 0 0 0 16px rgba(255, 238, 196, 0); } }
@keyframes identity-light-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .identity-rim .liveem-light { animation: identity-light-fade .15s ease-out both; } }

/* meet your parents: the family after the naming — the baby between its father and mother (dad · baby · mom) */
.identity-parents { width: min(780px, 96vw); }
.identity-parents .identity-subtitle { margin-bottom: 14px; }
/* dad and mom stand level: the two photos share a top line, whatever the length of the words under each */
.parents-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1fr); align-items: start; gap: 16px; margin: 8px 0 14px; }
.parent-card { margin: 0; display: grid; gap: 8px; justify-items: center; align-content: start; min-width: 0; }
/* waist-up on purpose: the founder shots are full length, the frame shows the top half anchored at the head */
.parent-photo { display: block; height: clamp(140px, 42vh, 380px); aspect-ratio: 5 / 7; max-width: 100%; border-radius: 14px; overflow: hidden; background: radial-gradient(ellipse at 50% 30%, #f7cf9824, transparent 62%), linear-gradient(155deg, #2c2746, #1b1830); border: 1px solid #ffffff18; }
.parent-photo img { width: 100%; height: auto; display: block; object-position: top; }
.parent-card figcaption { display: grid; justify-items: center; gap: 2px; text-align: center; }
.parent-card strong { color: #ffe3a1; letter-spacing: 0.08em; text-transform: uppercase; font-size: 12px; }
.parent-name { font-weight: 700; color: #f1ecff; }
.parent-note { font-size: 12px; line-height: 1.35; color: #b9bed6; }
.family-baby { margin: 0 0 6px; display: grid; gap: 8px; justify-items: center; align-self: center; min-width: 0; }
.family-baby .identity-rim { position: relative; width: 100%; max-width: 210px; }
.family-baby .baby-portrait { aspect-ratio: 1; height: auto; border-radius: 50%; border: 2px solid #ffe3a1aa; box-shadow: 0 0 0 5px #ffe3a114, 0 10px 34px #b283de33; }
.family-baby .baby-portrait img { object-fit: cover; object-position: 50% 18%; } /* the photo fills the round frame */
.family-baby figcaption { display: grid; justify-items: center; gap: 4px; text-align: center; }
.family-baby-name { color: #fff0cf; font-size: 18px; font-weight: 800; overflow-wrap: anywhere; }
.family-baby .identity-sex { margin: 0; }
.identity-parents .lf-naming { margin: 0 0 4px; text-align: center; }
.identity-parents .identity-primary { margin: 10px auto 4px; }
.identity-primary.is-ready { opacity: .78; cursor: default; }
@media (max-width: 600px) {
  .parents-row { gap: 8px; grid-template-columns: minmax(0, 1fr) minmax(0, .78fr) minmax(0, 1fr); }
  .parent-photo { height: clamp(130px, 30vh, 250px); border-radius: 11px; }
  .parent-card figcaption { font-size: 12px; }
  .parent-note { font-size: 10.5px; }
  .family-baby-name { font-size: 15px; }
  .identity-parents .lf-naming { font-size: 12px; }
}
/* short phones: the notes go, so the button stays on the screen */
@media (max-width: 600px) and (max-height: 700px) { .parent-note { display: none; } .parent-photo { height: clamp(120px, 28vh, 200px); } }
/* laptops (820 px tall or less): the three portraits cap their height, so "Become …" stays on the card with the
   room's naming clock above it (at 1280x720 the button sat 71 px below the card's edge) */
@media (min-width: 701px) and (max-height: 820px) {
  .baby-portrait { aspect-ratio: auto; height: clamp(110px, 20vh, 200px); }
  .family-baby .baby-portrait { aspect-ratio: 1; height: auto; }
  .parent-photo { height: clamp(140px, 40vh, 330px); }
  .identity-screen { padding: 18px 24px 16px; }
  .identity-screen h1 { margin: 4px 0; font-size: clamp(24px, 3.2vw, 32px); }
  .identity-screen .identity-subtitle { margin: 4px 0 12px; }
  .identity-baby-label { margin: 6px 0 2px; }
  .identity-name-step { margin-top: 10px; padding: 12px 16px 8px; }
  .identity-name-label { margin-bottom: 8px; }
  .identity-screen .identity-primary { margin: 10px auto 4px; }
}

/* the baby's sex on every card, in the name step and under the chosen baby (shared/names.js sexOf: the owner named a
   girl "Skyboy"): a neutral gold chip with the sign and the letter, never pink or blue */
.identity-sex { display: inline-flex; align-items: center; justify-content: center; gap: 5px; align-self: center; margin: 3px auto 4px; padding: 3px 10px 3px 8px; border-radius: 999px; border: 1px solid #ffe3a18c; background: #ffe3a11a; color: #fff3d6; font: 800 12px/1.2 system-ui, sans-serif; letter-spacing: .02em; white-space: nowrap; }
/* on a card the chip is a tag at the photo's foot: the card is no taller than before (the chooser keeps its fit) */
.baby-portrait > .identity-sex { position: absolute; z-index: 2; left: 50%; bottom: 6px; transform: translateX(-50%); margin: 0; background: #1b1640eb; border-color: #ffe3a1b3; box-shadow: 0 2px 8px #0008; }
.identity-sex-symbol { font-size: 15px; line-height: 1; color: #ffe3a1; }
.identity-candidate.selected .identity-sex { background: #ffe3a1; border-color: #ffe3a1; color: #21142f; }
.identity-candidate.selected .identity-sex-symbol { color: #21142f; }
.identity-sex-slot:empty { display: none; }
.identity-sex-slot { display: inline-block; vertical-align: 1px; margin: 0 0 12px; }
.identity-sex-slot .identity-sex { margin: 0; padding-top: 1px; padding-bottom: 1px; } /* no taller than the label's line */
.identity-name-step:has(.identity-sex-slot:not(:empty)) .identity-name-label { display: inline-block; margin-right: 8px; }
.identity-screen .identity-sex-line { text-align: center; margin: -12px 0 14px; }
@media (max-width: 600px) { .identity-sex { gap: 3px; padding: 2px 7px 2px 5px; } .identity-sex-symbol { font-size: 13px; } .baby-portrait > .identity-sex { bottom: 4px; } }
@media (min-width: 701px) and (max-height: 820px) { .identity-name-label, .identity-sex-slot { margin-bottom: 8px; } }