/* THE NUMBERS TRACK — see numbers.js. The count card sits where the letter's
   word card sits, and fills with apples one at a time as they are counted. */
#numCard{position:fixed;left:50%;top:62%;transform:translate(-50%,-50%) scale(.6);opacity:0;z-index:12;
  width:min(88vw,420px);padding:14px 12px 12px;border-radius:24px;background:#fff;text-align:center;
  box-shadow:6px 14px 40px rgba(120,86,50,.22),var(--gloss);pointer-events:none;
  transition:opacity .3s,transform .5s var(--spring)}
#numCard.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.nm-row{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 8px;min-height:52px}
.nm-a{width:clamp(44px,12vw,58px);animation:nmIn .5s var(--spring) both}
.nm-row.many .nm-a{width:clamp(34px,9.4vw,46px)}
.nm-apple{width:100%;height:auto;display:block;overflow:visible;filter:drop-shadow(0 4px 5px rgba(120,40,20,.25))}
@keyframes nmIn{0%{transform:scale(0) rotate(-30deg)}70%{transform:scale(1.2) rotate(6deg)}100%{transform:scale(1) rotate(0)}}
#numWord{display:block;margin-top:8px;font:800 clamp(20px,5.6vw,30px)/1.1 var(--font);color:var(--deep);min-height:1.2em}

/* WHAT MO TAUGHT — the report card on the grown-up page (report.js) */
.rp-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:8px;margin:6px 0 12px}
.rp-stats div{background:#FFF8EC;border-radius:14px;padding:8px 6px;text-align:center;box-shadow:var(--lift-1)}
.rp-stats b{display:block;font:900 clamp(22px,6vw,30px)/1 var(--font);color:var(--deep)}
.rp-stats i{display:block;font:600 12px/1.2 var(--font);color:var(--ink-soft);font-style:normal;margin-top:3px}
.rp-row{display:flex;flex-wrap:wrap;gap:5px;margin:4px 0 8px}
.rp-chip{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:9px;
  font:800 15px/1 var(--font);color:#B5A48E;background:#F6EEDF}
.rp-chip.met{color:var(--ink);background:#FFF3C4}
.rp-chip.name{color:var(--ink);background:#FFE49A;box-shadow:inset 0 0 0 2px var(--sun)}
.rp-chip.sound{color:var(--ink);background:#DFF3FF;box-shadow:inset 0 0 0 2px var(--sun),inset 0 0 0 4px var(--sky)}
.rp-key{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12px}
.rp-key .rp-chip{width:auto;padding:0 8px;height:24px;font-size:12px}
/* a box of ten on the count card: ten apples in two rows, counted as one "ten" */
.nm-row.boxes{gap:8px 10px}
.nm-ten{display:grid;grid-template-columns:repeat(5,1fr);gap:2px;padding:4px;border-radius:10px;
  background:#F6E6C8;box-shadow:inset 0 0 0 2px #D8B989;width:clamp(96px,26vw,124px)}
.nm-ten .nm-apple{width:100%}
.nm-row .nm-a.nm-box,.nm-row.many .nm-a.nm-box{width:auto}
.nm-pk{font-size:11px;color:var(--ink-soft)}

/* Letters / Numbers, at the top of the picker */
.nm-switch{display:flex;gap:6px;padding:4px;border-radius:999px;background:rgba(255,255,255,.7);box-shadow:var(--lift-1);margin:0 auto 10px}
.nm-switch button{border:0;cursor:pointer;font:800 clamp(14px,3.8vw,17px)/1 var(--font);color:var(--ink-soft);padding:9px 18px;border-radius:999px;background:transparent}
.nm-switch button.on{background:var(--deep);color:#fff;box-shadow:var(--lift-1)}