/* family.css: profile picker, new-child form, egg ceremony, parent gate, help owl, combo fire, scaffolding (F1-F4).
   Talks to: app/index.html (#familyScreen, #eggScreen, #gate, #owlBtn) and ui/profile-picker, egg-ceremony, parent-gate, help-owl, minigames/shared/adapt.
   Update: change a look here; class names are used by the JS. */
[hidden] { display: none !important; }
#familyScreen, #eggScreen { background: radial-gradient(120% 80% at 50% 0%, #7B5CFF 0%, #3E2C8C 55%, #241A5C 100%); color: #fff; align-items: center; overflow-y: auto; padding: max(10px, env(safe-area-inset-top)) 16px 90px; }
.fam-title { margin: 6px 0 10px; font-weight: normal; font-size: 26px; line-height: 1.6; text-align: center; text-shadow: 0 3px 0 rgba(0,0,0,.3); }
/* the picker tiles, the new-child tile and the form: styles/opening.css (owner 26.10 08:49 / 08:54: pictures first, soft glass) */
/* egg ceremony */
/* owner spec 28 §2.1: 3 big 3D lit eggs (115x145) on glowing cushions, in the middle of the screen */
#eggScreen:has(#eggGrid:not([hidden])) { justify-content: center; }
#eggGrid { display: flex; justify-content: center; align-items: flex-end; gap: 12px; width: 100%; max-width: 420px; margin: auto 0; padding-bottom: 8vh; }
#eggGrid[hidden], #lockStage[hidden] { display: none; }
.egg-pick { position: relative; width: 115px; height: 145px; flex: 0 0 115px; border: 0; padding: 0; cursor: pointer; background: none; animation: eggBob 2.4s ease-in-out infinite; }
.egg-pick::before { content: ""; position: absolute; left: 50%; bottom: -18px; width: 124px; height: 34px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, #fff8d6 0%, color-mix(in srgb, var(--glow) 70%, #fff) 45%, transparent 100%); box-shadow: 0 0 26px color-mix(in srgb, var(--glow) 70%, transparent); z-index: 0; }
.egg-pick img, .egg-pick svg { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 14px color-mix(in srgb, var(--glow) 80%, transparent)); }
.egg-pick:nth-child(2) { animation-delay: -.8s; } .egg-pick:nth-child(3) { animation-delay: -1.6s; }
@keyframes eggBob { 50% { transform: translateY(-8px); } }
@keyframes eggGlow { 0%,100% { box-shadow: 0 0 12px color-mix(in srgb, var(--glow) 40%, transparent); } 50% { box-shadow: 0 0 30px var(--glow); } }
/* owner spec 32 §2.1: the lock screen fills the whole height (100dvh): the title and the locks at the top, the big egg in the middle, the question card at the bottom (thumbs) */
#eggScreen:has(#lockStage:not([hidden])) { overflow: hidden; padding-bottom: max(24px, env(safe-area-inset-bottom)); }
#lockStage { display: flex; flex-direction: column; justify-content: space-between; align-items: center; flex: 1 1 auto; min-height: 0; width: 100%; max-width: 420px; gap: 6px; }
#lockStage > #eggWrap { margin: auto 0; }
#lockRow { display: flex; gap: 14px; }
/* spec 28 §2.2: 5 gold star locks 1/5..5/5 over the egg */
#lockRow { gap: 8px; }
.lock { width: 56px; height: 56px; border-radius: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; color: #7A4A00; font: 800 13px/1 'Rubik', sans-serif;
  background: linear-gradient(180deg, #FFF3C4, #F5C64A); border: 2px solid #E9A92A; border-bottom-width: 4px; box-shadow: 0 0 10px rgba(255,201,60,.35); }
.lock svg { width: 24px; height: 24px; fill: #B7791F; }
.lock.now { background: linear-gradient(180deg, #FFE27A, #FFB020); box-shadow: 0 0 18px rgba(255,201,60,.9); animation: bump .9s ease-in-out infinite; }
.lock.open { background: linear-gradient(180deg, #FFFBEA, #FFE9A8); border-color: #FFD66B; box-shadow: 0 0 16px rgba(255,236,170,.9); }
.lock.open svg { fill: #FFB020; }
#eggWrap { position: relative; display: grid; place-items: center; width: 168px; height: 210px; }
#bigEgg { width: 168px; height: 210px; }
#eggCracks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#eggCracks path { fill: none; stroke: #FFE9A8; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 4px #FFD24A); opacity: 0; transition: opacity .4s; }
#eggCracks path.on { opacity: 1; }
#lockStage.glow #eggWrap { filter: drop-shadow(0 0 26px rgba(255,214,80,.95)); }
.lock-opt.pic { padding: 4px; } .lock-opt.pic svg { width: 64px; height: 64px; }
#lockCard { width: 100%; background: var(--sheet); color: var(--ink); border-radius: 24px; padding: 6px 12px 12px; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,.3); }
#lockCard.gone { display: none; }
#lockPrompt { margin: 0; font-size: 19px; line-height: 1.8; }
#lockShow { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; min-height: 8px; }
.show-text { font-size: 40px; line-height: 1.5; direction: rtl; }
.show-text.long { font-size: 27px; white-space: nowrap; }
/* owner 26.10 01:04 placement: a sentence the child reads wraps (ages 7-8); a drawing with the heard word (ages 4-5) */
.show-text.sent { font-size: 25px; line-height: 1.55; white-space: normal; max-width: 100%; }
.show-pic svg { width: 92px; height: 92px; display: block; filter: drop-shadow(0 4px 6px rgba(0,0,0,.18)); }
/* owner spec 30 §1.2: the big 3D speaker of the lock card (replays the heard syllable / word) */
.lock-say { width: 84px; height: 84px; margin: 4px auto 8px; border: 0; border-radius: 50%; padding: 0; cursor: pointer; display: grid; place-items: center;
  background: radial-gradient(circle at 38% 30%, #93C5FD, #3B82F6 55%, #1D4ED8); box-shadow: inset 0 -6px 0 #1E3A8A, 0 8px 16px rgba(30,58,138,.35);
  animation: lsBeat 1.6s ease-in-out infinite; }
.lock-say svg { width: 46px; height: 46px; }
.lock-say.small { width: 52px; height: 52px; margin: 0; animation: none; box-shadow: inset 0 -4px 0 #1E3A8A, 0 4px 10px rgba(30,58,138,.3); }
.lock-say.small svg { width: 28px; height: 28px; }
.lock-say:active { transform: translateY(3px); }
.lock-say.pulse { animation: lsTap .4s ease-out; }
@keyframes lsBeat { 50% { transform: scale(1.07); } }
@keyframes lsTap { 40% { transform: scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .lock-say { animation: none; } }
.count-row { display: flex; gap: 4px; }
#lockOpts { display: flex; gap: 10px; justify-content: center; margin-top: 6px; }
.lock-opt { flex: 1 1 0; max-width: 110px; min-height: 72px; font-size: 38px; --b: #6A4BF0; --b-hi: #9C86FF; --b-dark: var(--purple-dark); }
.lock-opt.good { --b: #2EB86A; --b-hi: #6EE59A; --b-dark: #1B7F45; }
.lock-opt.word { font-size: 24px; padding: 0 4px; }
/* never "wrong": the tapped button glows softly, the egg still cracks */
.lock-opt.soft { --b: #8E7BFF; --b-hi: #B9ADFF; box-shadow: 0 0 14px rgba(255,214,102,.7); }
#eggDone { width: 100%; max-width: 320px; margin-top: 8px; }
#eggDone[hidden] { display: none; }
/* kid-alone audit #1 (R-450): a phone held sideways (844x390, 667x375) - the column above is taller than the screen and its answers fell below it.
   Same elements, two sides: the locks and a smaller egg on one side, the question card on the other; nothing added */
@media (orientation: landscape) and (max-height: 520px) {
  #eggScreen:has(#lockStage:not([hidden])) { padding-top: max(6px, env(safe-area-inset-top)); padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  #eggScreen:has(#lockStage:not([hidden])) .fam-title { font-size: 18px; line-height: 1.4; margin: 2px 0 4px; }
  #lockStage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "row card" "egg card" "egg done";
    align-items: center; justify-items: center; max-width: 820px; column-gap: 16px; row-gap: 4px; }
  #lockRow { grid-area: row; gap: 6px; }
  #lockRow .lock { width: 46px; height: 46px; border-radius: 13px; font-size: 11px; }
  #lockRow .lock svg { width: 20px; height: 20px; }
  #lockStage > #eggWrap { grid-area: egg; margin: 0; width: 132px; height: 165px; }
  #eggWrap #bigEgg, #eggWrap #bigEggArt { width: 132px; height: 165px; }
  #lockCard { grid-area: card; align-self: center; max-height: 100%; overflow-y: auto; padding: 4px 10px 10px; }
  #lockPrompt { font-size: 17px; line-height: 1.5; }
  .lock-say { width: 64px; height: 64px; margin: 2px auto 4px; } .lock-say svg { width: 36px; height: 36px; }
  .show-pic svg { width: 70px; height: 70px; }
  .show-text { font-size: 32px; line-height: 1.3; }
  .lock-opt { min-height: 62px; font-size: 32px; }
  .lock-opt.pic svg { width: 52px; height: 52px; }
  #eggDone { grid-area: done; margin-top: 0; }
}
/* owner spec 70 #3 (EggHatching): sideways (844x390, 740x360) the 3 eggs sit on the 3 painted cushions of the sanctuary, all inside the
   screen (the column above scrolled them below it); the small guide medal moves to the corner */
@media (orientation: landscape) and (max-height: 520px) {
  #eggScreen:has(#eggGrid:not([hidden])) { justify-content: flex-start; overflow: hidden; padding-bottom: 0; }
  #eggScreen:has(#eggGrid:not([hidden])) .fam-title { font-size: 22px; line-height: 1.4; margin: 2px 0 0; }
  #eggGrid { width: 87vw; max-width: none; justify-content: space-around; gap: 0; margin: auto 0 0; padding-bottom: 21vh; }
  #eggScreen:has(#eggGrid:not([hidden])) > .egg-guide { position: absolute; left: max(12px, env(safe-area-inset-left)); bottom: 10px; margin: 0; }
}
/* parent gate */
#gateScrim { position: fixed; inset: 0; z-index: 80; background: rgba(20,12,60,.55); }
#gate { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 81; width: min(340px, calc(100vw - 32px)); background: var(--sheet); border-radius: 24px; padding: 6px 14px 12px; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
#gateScrim[hidden], #gate[hidden] { display: none; }
#gateQ { margin: 0; font-size: 30px; line-height: 1.5; font-family: 'Rubik', sans-serif; }
#gateTyped { margin: 0; font-size: 26px; min-height: 40px; color: var(--purple-dark); font-family: 'Rubik', sans-serif; }
#gateKeys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.gkey { font-size: 22px; min-height: 48px; }
/* kid-alone R-454: the X that closes the gate is big and glows a few times when the gate opens */
#gateCancel { flex: 0 0 auto; min-width: 72px; display: grid; place-items: center; }
#gateCancel.gate-x-glow { animation: gateX 1.2s ease-in-out 3; }
@keyframes gateX { 50% { box-shadow: 0 0 0 6px rgba(255,214,80,.9), 0 0 22px rgba(255,214,80,.95); } }
@media (prefers-reduced-motion: reduce) { #gateCancel.gate-x-glow { animation: none; box-shadow: 0 0 0 4px rgba(255,214,80,.9); } }
#gateMsg { margin: 4px 0 0; min-height: 22px; font-size: 15px; color: #C2452D; }
/* kid-alone R-454: sideways (844x390, 667x375) the gate is taller than the screen and its X fell below it: the keys go beside the question */
@media (orientation: landscape) and (max-height: 520px) {
  #gate { width: min(600px, calc(100vw - 32px)); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); column-gap: 14px; align-items: center;
    grid-template-areas: "label keys" "q keys" "typed keys" "msg keys" "row keys"; max-height: calc(100dvh - 16px); }
  #gate > .sec-label { grid-area: label; margin: 0; } #gateQ { grid-area: q; font-size: 26px; line-height: 1.3; } #gateTyped { grid-area: typed; min-height: 34px; }
  #gateKeys { grid-area: keys; } #gateMsg { grid-area: msg; } #gate > .win-row { grid-area: row; }
  .gkey { min-height: 44px; }
}
/* kids switch button in the HUD */
.kids-btn { flex: 0 0 auto; width: 44px; height: 40px; border: 0; border-radius: 14px; background: linear-gradient(180deg, #fff, #F1EBFF); border-bottom: 4px solid #C9BDF2; display: grid; place-items: center; padding: 0; cursor: pointer; }
/* help owl: bottom-left floating, above the footer; in the mini-game the prompt's owl button does it */
.owl-btn { position: fixed; z-index: 50; left: 10px; bottom: calc(env(safe-area-inset-bottom) + 112px); width: 58px; height: 58px; border-radius: 50%; border: 0; padding: 4px; cursor: pointer;
  background: radial-gradient(circle at 40% 35%, #FFF8E6, #FFE0A8); border-bottom: 5px solid #D9921A; box-shadow: 0 6px 14px rgba(0,0,0,.25); }
.owl-btn.in-game { display: none; }
.owl-btn svg, .speak svg { display: block; margin: auto; }
.speak { --b: #FFD27A; --b-hi: #FFF2C8; --b-dark: #D9921A; }
.pic-hint { flex: 0 0 auto; display: inline-flex; }
/* combo fire on the wand + scaffolding */
#gWizard.wand-fire { filter: drop-shadow(0 0 10px #FF7A1A) drop-shadow(0 0 4px #FFC93C); }
.stone.gone-opt { opacity: 0; transform: scale(.4); pointer-events: none; transition: opacity .4s, transform .4s; }
#sheet.newkid .sec-blinky { display: none; }
@media (prefers-reduced-motion: reduce) {
  .egg-pick, .lock.now { animation: none !important; }
}

/* the help owl hides while a sheet or card is open (it never covers their content) */
body:has(#tierSheet.open) .owl-btn, body:has(#sheet.open) .owl-btn, body:has(#islandCard:not([hidden])) .owl-btn, body:has(#chestCard:not([hidden])) .owl-btn,
body:has(#tierSheet.open) .owl-label, body:has(#sheet.open) .owl-label, body:has(#chestCard:not([hidden])) .owl-label, body:has(#islandCard:not([hidden])) .owl-label,
body:has(#kidForm:not([hidden])) .owl-btn, body:has(#gate:not([hidden])) .owl-btn { display: none; }

/* owner spec 27 §2.1: the opening backdrop. It covers the island (z 5..9) and sits under the customizer sheet (11) and the family/egg screens (20).
   ui/family-flow.js adds body.intro-done when the island is really shown (set-up child, no new-kid sheet). */
#introCover { position: fixed; inset: 0; z-index: 10; background: radial-gradient(120% 80% at 50% 0%, #7B5CFF 0%, #3E2C8C 55%, #241A5C 100%); transition: opacity .45s ease, visibility 0s .45s; }
#introCover .ic-glow { position: absolute; inset: 0; background: radial-gradient(2px 2px at 20% 30%, #fff8, transparent), radial-gradient(2px 2px at 70% 18%, #fff9, transparent), radial-gradient(3px 3px at 82% 62%, #ffe28a, transparent), radial-gradient(2px 2px at 35% 76%, #fff7, transparent), radial-gradient(3px 3px at 12% 58%, #ffe28a99, transparent); }
body.intro-done #introCover { opacity: 0; visibility: hidden; pointer-events: none; }
#bigEggArt { width: 168px; height: 210px; object-fit: contain; filter: drop-shadow(0 0 16px rgba(255,236,170,.7)); animation: eggBob 2.4s ease-in-out infinite; }
/* owner spec 68 #3+#15 (C-68m): the short demo before every placement question: a drawn hand taps the speaker, then sweeps over the
   options without resting on one (components/egg-ceremony/lock-quiz.js playDemo). It never blocks a tap. */
#lockCard { position: relative; }
#lockDemo { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 3; filter: drop-shadow(0 4px 6px rgba(0,0,0,.35)); transform: translate(var(--sx), var(--sy)); opacity: 0; }
#lockDemo.demo { animation: lockDemo 2.4s ease-in-out forwards; }
@keyframes lockDemo {
  0% { opacity: 0; transform: translate(var(--sx), calc(var(--sy) + 24px)); }
  12% { opacity: 1; transform: translate(var(--sx), var(--sy)); }
  22% { transform: translate(var(--sx), var(--sy)) scale(.86); }
  32% { transform: translate(var(--sx), var(--sy)) scale(1); }
  58% { transform: translate(var(--ax), var(--oy)); }
  86% { opacity: 1; transform: translate(var(--bx), var(--oy)); }
  100% { opacity: 0; transform: translate(var(--bx), calc(var(--oy) + 16px)); }
}
@keyframes lockDemoCalm { 0%, 100% { opacity: 0; } 15%, 80% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #lockDemo.demo { animation: lockDemoCalm 1.6s linear forwards; } }