/* kids.css — the shared look for every kids-learning page: colours, type, chunky buttons.
   System fonts only (nothing loaded from the internet), so pages work offline. */
:root {
  --bg: #FFF7E8;
  --card: #FFFFFF;
  --ink: #26263A;
  --muted: #6D6D85;
  --line: #EDE3CF;
  --hour: #FFC61A;      /* the short hand: yellow (his pick), drawn with a dark outline */
  --minute: #E63946;    /* the long hand: red (his pick) */
  --blue: #2D7FF9;
  --brick: #FF8A5B;     /* 小砖 */
  --brick-dark: #E0663A;
  --good: #22A55B;
  --good-ink: #137A3F;
  --good-bg: #E2F6EA;
  --bad: #E0484E;
  --bad-ink: #B42328;
  --bad-bg: #FDECEC;
  --star: #FFC233;
  --radius: 22px;
  --font: ui-rounded, "SF Pro Rounded", "Nunito", "Arial Rounded MT Bold", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}
body { min-height: 100vh; min-height: 100dvh; }
button, a { font: inherit; touch-action: manipulation; -webkit-user-select: none; user-select: none; }

.btn {
  --c: var(--blue);
  --s: #1B5FC4;
  appearance: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border: 0; border-radius: 18px;
  padding: 18px 28px;
  font-size: 26px; font-weight: 800; color: #fff; text-decoration: none;
  background: var(--c);
  box-shadow: 0 6px 0 var(--s);
  cursor: pointer;
  transition: transform .06s, box-shadow .06s;
}
.btn:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--s); }
.btn.green { --c: var(--good); --s: #17803F; }
.btn.red { --c: var(--bad); --s: #A8262B; }
.btn.light { --c: #fff; --s: var(--line); color: var(--ink); border: 3px solid var(--line); }
.btn[disabled] { --c: #CFCAC0; --s: #B3AEA4; cursor: default; }
.btn[disabled]:active { transform: none; box-shadow: 0 6px 0 var(--s); }

/* ---------- 小砖, the buddy (shared/buddy.js) ---------- */
.buddy { flex: none; aspect-ratio: 120 / 130; }
.buddy svg { width: 100%; height: 100%; overflow: visible; display: block; }
.buddy .bk-shadow { fill: rgba(38, 38, 58, .12); transform-box: fill-box; transform-origin: center; }
.buddy .bk-torso { fill: var(--brick); stroke: var(--ink); stroke-width: 3; }
.buddy .bk-mortar { stroke: var(--brick-dark); stroke-width: 2.5; stroke-linecap: round; fill: none; }
.buddy .bk-foot { fill: var(--brick-dark); stroke: var(--ink); stroke-width: 2.5; }
.buddy .bk-arm line { stroke: var(--ink); stroke-width: 12; stroke-linecap: round; }
.buddy .bk-arm .bk-arm-in { stroke: var(--brick); stroke-width: 7; }
.buddy .bk-antenna { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.buddy .bk-spark-tip { fill: var(--hour); stroke: var(--ink); stroke-width: 2.5; }
.buddy .bk-eye { fill: #fff; stroke: var(--ink); stroke-width: 2.5; }
.buddy .bk-pupils { fill: var(--ink); transition: transform .2s; }
.buddy .bk-shine { fill: #fff; }
.buddy .bk-cheek { fill: #FF5D8F; opacity: .45; }
.buddy .bk-mouth { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.buddy .bk-m-open, .buddy .bk-m-o { fill: #8E2A2A; stroke-width: 2.5; }
.buddy .bk-m-open, .buddy .bk-m-sad, .buddy .bk-m-o { display: none; }
.buddy .bk-sparks { fill: var(--hour); stroke: var(--ink); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.buddy .bk-bd { transform-box: fill-box; transform-origin: 50% 100%; animation: bd-breathe 2.8s ease-in-out infinite; }
.buddy .bk-eyes { transform-box: fill-box; transform-origin: center; animation: bd-blink 4.2s infinite; }
.buddy .bk-arm { transform-box: fill-box; transition: transform .2s; }
.buddy .bk-arm-l { transform-origin: 100% 0%; }
.buddy .bk-arm-r { transform-origin: 0% 0%; }
.buddy .bk-m-o { transform-box: fill-box; transform-origin: center; }

.buddy.is-talk:not(.is-happy):not(.is-sad) .bk-m-smile { display: none; }
.buddy.is-talk:not(.is-happy):not(.is-sad) .bk-m-o { display: inline; animation: bd-talk .2s ease-in-out infinite alternate; }

.buddy.is-happy .bk-bd { animation: bd-jump .9s cubic-bezier(.3, .7, .4, 1); }
.buddy.is-happy .bk-shadow { animation: bd-shadow .9s cubic-bezier(.3, .7, .4, 1); }
.buddy.is-happy .bk-m-smile { display: none; }
.buddy.is-happy .bk-m-open { display: inline; }
.buddy.is-happy .bk-arm-l { transform: rotate(110deg); }
.buddy.is-happy .bk-arm-r { transform: rotate(-110deg); }
.buddy.is-happy .bk-sparks { animation: bd-sparks .9s ease-out; }

.buddy.is-sad .bk-bd { animation: bd-droop 1s ease-out forwards; }
.buddy.is-sad .bk-m-smile { display: none; }
.buddy.is-sad .bk-m-sad { display: inline; }
.buddy.is-sad .bk-pupils { transform: translateY(3px); }
.buddy.is-sad .bk-arm-l { transform: rotate(-12deg); }
.buddy.is-sad .bk-arm-r { transform: rotate(12deg); }

.buddy.is-cheer .bk-arm-r { animation: bd-wave .35s ease-in-out 4 alternate; }
.buddy.is-cheer .bk-bd { animation: bd-nod .7s ease-in-out 2; }

.buddy.is-wave .bk-arm-r { animation: bd-wave .45s ease-in-out infinite alternate; }

.buddy.is-dance .bk-bd { animation: bd-dance .45s ease-in-out infinite alternate; }
.buddy.is-dance .bk-arm-l { animation: bd-arm-l .45s ease-in-out infinite alternate; }
.buddy.is-dance .bk-arm-r { animation: bd-arm-r .45s ease-in-out infinite alternate; }
.buddy.is-dance .bk-m-smile { display: none; }
.buddy.is-dance .bk-m-open { display: inline; }
.buddy.is-dance .bk-sparks { animation: bd-sparks 1.2s ease-out infinite; }

@keyframes bd-breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.025, .975); } }
@keyframes bd-blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
@keyframes bd-talk { from { transform: scaleY(1); } to { transform: scaleY(.35); } }
@keyframes bd-jump {
  0% { transform: translateY(0) scale(1, 1); }
  15% { transform: translateY(0) scale(1.14, .84); }
  45% { transform: translateY(-30%) scale(.92, 1.1); }
  72% { transform: translateY(0) scale(1.1, .9); }
  86% { transform: translateY(-4%) scale(.98, 1.02); }
  100% { transform: translateY(0) scale(1, 1); }
}
@keyframes bd-shadow { 0%, 100% { transform: scale(1); opacity: 1; } 45% { transform: scale(.6); opacity: .5; } }
@keyframes bd-sparks { 0% { opacity: 0; transform: scale(.3); } 30% { opacity: 1; transform: scale(1.15); } 100% { opacity: 0; transform: scale(1.3); } }
@keyframes bd-droop {
  0% { transform: scale(1, 1) rotate(0); }
  35% { transform: scale(1.06, .86) rotate(-5deg); }
  100% { transform: scale(1.03, .93) rotate(-3deg); }
}
@keyframes bd-nod { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(6deg) translateY(-3%); } }
@keyframes bd-wave { from { transform: rotate(-115deg); } to { transform: rotate(-155deg); } }
@keyframes bd-dance { from { transform: rotate(-8deg) translateY(0); } to { transform: rotate(8deg) translateY(-10%); } }
@keyframes bd-arm-l { from { transform: rotate(40deg); } to { transform: rotate(130deg); } }
@keyframes bd-arm-r { from { transform: rotate(-130deg); } to { transform: rotate(-40deg); } }

/* ---------- the answer bar (Kit.answerBar) ---------- */
.answer-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  padding: 18px 16px max(18px, env(safe-area-inset-bottom));
  transform: translateY(105%); transition: transform .32s cubic-bezier(.2, .9, .3, 1.15);
}
.answer-bar.show { transform: translateY(0); }
.answer-bar.good { background: var(--good-bg); color: var(--good-ink); box-shadow: 0 -3px 0 #9AD9B2; }
.answer-bar.bad { background: var(--bad-bg); color: var(--bad-ink); box-shadow: 0 -3px 0 #F2A9AC; }
.ab-in { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.ab-text b { display: block; font-size: 26px; }
.ab-text span { display: block; margin-top: 4px; font-size: 19px; font-weight: 700; }
.ab-in .btn { width: 100%; }

/* ---------- a panel that slides over the page (review) ---------- */
.sheet-back { position: fixed; inset: 0; z-index: 30; background: rgba(38, 38, 58, .45); display: flex; align-items: flex-end; justify-content: center; animation: fade-in .2s; }
.sheet {
  width: 100%; max-width: 760px; max-height: 92vh; overflow: auto;
  background: var(--bg); border-radius: 26px 26px 0 0; padding: 14px 18px max(20px, env(safe-area-inset-bottom));
  animation: sheet-up .3s cubic-bezier(.2, .9, .3, 1.1);
}
@keyframes fade-in { from { opacity: 0; } }
@keyframes sheet-up { from { transform: translateY(100%); } }

/* ---------- confetti + star bursts (Kit.confetti / Kit.burst) ---------- */
.fx-layer { position: fixed; inset: 0; pointer-events: none; z-index: 40; overflow: hidden; }
.confetti { position: absolute; top: -20px; width: 10px; height: 16px; border-radius: 3px; animation: confetti-fall linear forwards; }
@keyframes confetti-fall { to { transform: translate(var(--drift), 110vh) rotate(var(--spin)); } }
.burst { position: absolute; font-style: normal; font-size: 22px; margin: -11px 0 0 -11px; animation: burst .8s ease-out forwards; }
@keyframes burst { from { transform: translate(0, 0) scale(.4); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) scale(1); opacity: 0; } }

/* ---------- little motions used by every page ---------- */
@keyframes pop-in { from { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.06); } to { transform: scale(1); opacity: 1; } }
@keyframes slide-in { from { transform: translateX(40px); opacity: 0; } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-9px); } 40%, 80% { transform: translateX(9px); } }
@keyframes bounce { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.08); } }

@media (prefers-reduced-motion: reduce) {
  *, .buddy * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* the answer bar sits in one row on a tablet, so it covers no more than the Check button did */
@media (min-width: 600px) {
  .ab-in { flex-direction: row; align-items: center; justify-content: space-between; gap: 20px; }
  .ab-in .btn { width: auto; min-width: 240px; }
}