/* A New Page, THE CHILD STAGE (2026-10-16, Joel + Julie brief "make the child stage beautiful, not just bigger").
   What the child looks at (the sounds being blended, the word to read) sits on a warm lit surface that fills
   the screen; the grown-up's instructions sit below it in a quiet card. Light and colour change only while a
   child reads: no bounce, no scale. Night mode keeps the same stage as a lamp-lit navy surface.
   Loaded after program.css and the pass-* sheets on session.html, so it wins on equal specificity. */

:root{
  --stg-glow-1:#FFFBF1; --stg-glow-2:#FFF3D9; --stg-glow-3:#F6E6C4;
  --stg-shadow:0 24px 60px -24px rgba(31,42,85,.28), inset 0 2px 0 rgba(255,255,255,.8);
  --stg-tile-face-1:#FFFDF7; --stg-tile-face-2:#FFF1D2; --stg-tile-edge:#C49A3A;
  --stg-tile-lit-1:#FFF8E6; --stg-tile-lit-2:#FFE7B0; --stg-tile-lit-edge:#D9A845;
  --stg-letter:#1F2A55; --stg-word:#1E6B43; --stg-practice:#1F2A55; --stg-gold:#E3A72F;
  --stg-count-bg:#FFF8E6; --stg-count-ink:#1F2A55;
  --stg-panel-bg:#F3EFE6; --stg-panel-ink:#4A4F63; --stg-panel-line:rgba(31,42,85,.08); --stg-pill-bg:#EEF0F7; --stg-pill-ink:#1F2A55;
  --stg-btn:#1F2A55; --stg-btn-ink:#FFF6E3; --stg-btn-outline-bg:#FFF6E3;
  --stg-got:#1E6B43; --stg-got-ink:#FFFFFF;
}
@media screen and (prefers-color-scheme: dark){
  :root[data-anp-app]:not([data-theme="light"]){
    --stg-glow-1:#2A3A6E; --stg-glow-2:#1F2B55; --stg-glow-3:#141E3C;
    --stg-shadow:0 24px 60px -24px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,248,236,.08);
    --stg-word:#7FD3A4; --stg-practice:#FFF8EC;
    --stg-count-bg:#26335F; --stg-count-ink:#FFF8EC;
    --stg-panel-bg:#1A2545; --stg-panel-ink:#D9DCE8; --stg-panel-line:rgba(255,248,236,.08); --stg-lamp:rgba(242,181,68,.16); --stg-pill-bg:#26335F; --stg-pill-ink:#FFF8EC;
    --stg-btn:#FFF8EC; --stg-btn-ink:#1F2E55; --stg-btn-outline-bg:#1A2545;
    --stg-got:#1E6B43; --stg-got-ink:#FFFFFF;
  }
}
:root[data-anp-app][data-theme="dark"]{
  --stg-glow-1:#2A3A6E; --stg-glow-2:#1F2B55; --stg-glow-3:#141E3C;
  --stg-shadow:0 24px 60px -24px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,248,236,.08);
  --stg-word:#7FD3A4; --stg-practice:#FFF8EC;
  --stg-count-bg:#26335F; --stg-count-ink:#FFF8EC;
  --stg-panel-bg:#1A2545; --stg-panel-ink:#D9DCE8; --stg-panel-line:rgba(255,248,236,.08); --stg-lamp:rgba(242,181,68,.16); --stg-pill-bg:#26335F; --stg-pill-ink:#FFF8EC;
  --stg-btn:#FFF8EC; --stg-btn-ink:#1F2E55; --stg-btn-outline-bg:#1A2545;
  --stg-got:#1E6B43; --stg-got-ink:#FFFFFF;
}

/* 1. the stage: a soft lit surface, brightest behind the word, floating above the page */
#app .child-stage, #app .stim{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(14px,2.6vh,28px);
  padding:clamp(32px,5.5vw,60px) clamp(16px,4vw,48px);
  border-radius:32px; border:0; margin-top:16px;
  background:radial-gradient(55% 45% at 50% 40%, var(--stg-lamp,transparent), transparent 75%), radial-gradient(120% 90% at 50% 40%, var(--stg-glow-1) 0%, var(--stg-glow-2) 55%, var(--stg-glow-3) 100%);
  box-shadow:var(--stg-shadow); overflow:hidden; isolation:isolate;
}
#app .child-stage::after, #app .stim::after{   /* a whisper of paper grain */
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:-1; opacity:.55;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}

@media (min-width:1024px){ #app .child-stage{min-height:clamp(380px,44vh,520px)} }

/* 2. sound tiles: chunky wooden letter blocks */
#app .child-stage .anp-mb-row{gap:clamp(10px,1.6vw,18px); margin:0}
#app .child-stage .anp-mb-row.together{gap:clamp(4px,.8vw,8px)}
#app .child-stage .anp-mb-plus{display:none}
#app .child-stage .anp-mb-pill{
  width:clamp(72px,12vw,140px); aspect-ratio:1; display:grid; place-items:center; padding:0;
  font-family:var(--anp-font-read,Lexend,Verdana,sans-serif); font-weight:800; font-size:clamp(44px,7.4vw,86px); line-height:1;
  color:var(--stg-letter); border:0; border-radius:22px;
  background:linear-gradient(var(--stg-tile-face-1),var(--stg-tile-face-2));
  box-shadow:0 6px 0 var(--stg-tile-edge), 0 6px 14px rgba(120,90,20,.18), 0 14px 24px -10px rgba(31,42,85,.35), inset 0 2px 0 #fff;
  transition:box-shadow .25s ease, background .25s ease;
}
#app .child-stage .anp-mb-pill.lit{
  background:linear-gradient(var(--stg-tile-lit-1),var(--stg-tile-lit-2)); border:0;
  box-shadow:0 6px 0 var(--stg-tile-lit-edge), 0 0 0 4px rgba(227,167,47,.55), 0 0 36px 6px rgba(227,167,47,.45), inset 0 2px 0 #fff;
}
#app .child-stage .anp-mb-pill.pop{animation:none}   /* light only, never a bounce */

/* 3. the stage light under the tiles (decorative), filling left to right as each sound lights */
#app .child-stage .anp-mb-track{width:min(520px,80%); height:8px; margin:0; border-radius:8px; overflow:hidden;
  background:linear-gradient(90deg,transparent,rgba(227,167,47,.28) 18%,rgba(227,167,47,.28) 82%,transparent)}
#app .child-stage .anp-mb-fill{background:linear-gradient(90deg,transparent,var(--stg-gold) 18%,var(--stg-gold) 82%,transparent); box-shadow:0 0 14px rgba(227,167,47,.55)}

/* 4. the blended word: the star (colour and opacity only) */
#app .child-stage .anp-mb-whole{font-family:var(--anp-font-read,Lexend,Verdana,sans-serif); font-size:clamp(56px,10vw,120px); font-weight:800;
  letter-spacing:.05em; line-height:1; margin:0; color:var(--stg-word); transform:none}
#app .child-stage .anp-mb-whole.show{transform:none}
#app .child-stage .anp-mb-hint{margin:0; font-size:clamp(16px,2.2vw,20px); color:var(--stg-panel-ink)}
#app .child-stage .anp-mb-hint b{color:var(--stg-letter)}

/* 5. the grown-up's panel: quiet, under the stage */
#app .parent-panel{margin-top:16px; padding:20px 22px; border-radius:20px; background:var(--stg-panel-bg); color:var(--stg-panel-ink); border:1px solid var(--stg-panel-line,transparent);
  font-size:16.5px; line-height:1.55}
#app .parent-panel .for-you{display:inline-block; padding:3px 10px; border-radius:999px; background:var(--stg-pill-bg); color:var(--stg-pill-ink);
  font-size:14px; font-weight:700; margin-bottom:12px}
#app .parent-panel .say{color:var(--stg-panel-ink); margin:0 0 12px}
#app .parent-panel > .k{font-size:17px; font-weight:700; color:var(--stg-pill-ink); margin:0 0 10px; text-transform:none; letter-spacing:0}
#app .parent-panel .anp-mb-stage{margin-top:14px; padding-top:14px; border-top:1px solid rgba(31,42,85,.10)}
#app .stg-steps{display:flex; gap:10px; flex-wrap:wrap; margin:0 0 14px; padding:0; list-style:none}
#app .stg-steps li{display:flex; align-items:center; gap:8px; font-size:15px; font-weight:700; color:var(--stg-panel-ink)}
#app .stg-steps li::before{content:attr(data-n); display:grid; place-items:center; width:26px; height:26px; border-radius:50%;
  border:2px solid var(--stg-btn); color:var(--stg-btn); font-size:14px; font-weight:800}
#app .stg-steps li.on::before{background:var(--stg-btn); color:var(--stg-btn-ink)}
#app .stg-steps li + li::after{content:none}
@media (max-width:420px){ #app .stg-steps{gap:8px; flex-wrap:nowrap} #app .stg-steps li{font-size:14px; gap:6px} #app .stg-steps li::before{width:24px; height:24px; font-size:13px} }

/* 6. buttons: one friendly family. Active step filled, the rest outlined */
#app .parent-panel .anp-mb-btn, #app .parent-panel .say-btn{min-height:52px; padding:0 26px; border-radius:999px; font-weight:700; font-size:17px;
  background:var(--stg-btn); color:var(--stg-btn-ink); border:2px solid var(--stg-btn); box-shadow:0 8px 18px -10px rgba(31,42,85,.6); margin:0}
#app .parent-panel .anp-mb-btn.is-outline{background:var(--stg-btn-outline-bg); color:var(--stg-btn)}
#app .parent-panel .anp-mb-btn:focus-visible, #app .parent-panel .say-btn:focus-visible,
#app .markrow button:focus-visible{outline:3px solid var(--stg-gold); outline-offset:3px}

/* 7. the practice card: the same stage holding one giant word */
#app .stim .big{color:var(--stg-practice); line-height:1}
#app .stim .big:not(.word){font-size:clamp(96px,28vw,160px)}
#app .stim{container-type:inline-size}
#app .stim .big.word{font-size:clamp(48px,14vw,92px); letter-spacing:.05em}   /* fallback */
@supports (font-size:1cqw){ #app .stim .big.word{font-size:clamp(48px,calc(140cqw / var(--n,4)),200px)} }   /* "Sam" about 150px on a phone; a long word shrinks to fit the card */
#app .stim .count{top:18px; right:22px; padding:4px 12px; border-radius:999px; background:var(--stg-count-bg); color:var(--stg-count-ink);
  font-size:15px; font-weight:700; box-shadow:0 2px 8px -4px rgba(31,42,85,.3)}
#app .stim .hint{color:var(--stg-panel-ink); font-size:16px}
#app .markrow{gap:12px; margin-top:16px}
#app .markrow button{min-height:56px; border-radius:999px; font-size:18px}
#app .markrow .mk-yes{background:var(--stg-got); color:var(--stg-got-ink); border:2px solid var(--stg-got)!important}
#app .markrow .mk-no{background:var(--stg-btn-outline-bg); color:var(--stg-btn); border:2px solid var(--stg-btn)!important}
#app .markrow .mk-yes:active{filter:brightness(.92)}
#app .markrow .mk-no:active{background:var(--stg-pill-bg)}

/* night mode: the stage stays lamp-lit navy with cream wooden tiles (pass-dark.css would paint the tiles navy) */
@media screen and (prefers-color-scheme: dark){
:root[data-anp-app]:not([data-theme="light"]) #app .child-stage .anp-mb-pill{background:linear-gradient(var(--stg-tile-face-1),var(--stg-tile-face-2));border:0;color:var(--stg-letter)}
:root[data-anp-app]:not([data-theme="light"]) #app .child-stage .anp-mb-pill.lit{background:linear-gradient(var(--stg-tile-lit-1),var(--stg-tile-lit-2))}
:root[data-anp-app]:not([data-theme="light"]) #app .child-stage .anp-mb-whole{color:var(--stg-word)}
:root[data-anp-app]:not([data-theme="light"]) #app .child-stage .anp-mb-hint b{color:var(--stg-practice)}
:root[data-anp-app]:not([data-theme="light"]) #app .child-stage .anp-mb-track{background:linear-gradient(90deg,transparent,rgba(227,167,47,.28) 18%,rgba(227,167,47,.28) 82%,transparent)}
:root[data-anp-app]:not([data-theme="light"]) #app .parent-panel .anp-mb-stage{border-top:1px solid rgba(255,248,236,.12)}
}
:root[data-anp-app][data-theme="dark"] #app .child-stage .anp-mb-pill{background:linear-gradient(var(--stg-tile-face-1),var(--stg-tile-face-2));border:0;color:var(--stg-letter)}
:root[data-anp-app][data-theme="dark"] #app .child-stage .anp-mb-pill.lit{background:linear-gradient(var(--stg-tile-lit-1),var(--stg-tile-lit-2))}
:root[data-anp-app][data-theme="dark"] #app .child-stage .anp-mb-whole{color:var(--stg-word)}
:root[data-anp-app][data-theme="dark"] #app .child-stage .anp-mb-hint b{color:var(--stg-practice)}
:root[data-anp-app][data-theme="dark"] #app .child-stage .anp-mb-track{background:linear-gradient(90deg,transparent,rgba(227,167,47,.28) 18%,rgba(227,167,47,.28) 82%,transparent)}
:root[data-anp-app][data-theme="dark"] #app .parent-panel .anp-mb-stage{border-top:1px solid rgba(255,248,236,.12)}

@media (pointer: coarse){ #app .anp-keyhint{display:none} }   /* keyboard keys mean nothing on a phone or tablet */

@media (prefers-reduced-motion: reduce){
  #app .child-stage .anp-mb-pill, #app .child-stage .anp-mb-fill, #app .child-stage .anp-mb-row{transition:none}
}