/* Year 1 'kids' look: bigger text, bright colours, friendly shapes. Loaded after style.css. */
:root {
  --k-pink:#ff6f91; --k-orange:#ff9f1c; --k-yellow:#ffd23f; --k-green:#2ec4b6; --k-blue:#3a86ff; --k-purple:#8338ec;
  --radius:22px;
}
body { font-size:18px; line-height:1.75; background:linear-gradient(180deg,#fff8e7 0%,#eef8ff 100%) fixed; }
h1,h2,h3,h4 { font-family:"Comic Sans MS","Segoe UI",system-ui,sans-serif; }
p, li { font-size:1.08rem; }

/* top bar: friendlier and taller */
.topbar { background:linear-gradient(90deg,var(--k-purple),var(--k-blue)); height:64px; }
.brand { font-size:1.15rem; }
.crumb { font-size:1rem; }
.tier a { font-size:1rem; padding:6px 16px; }

/* hero (chapter title card) */
.hero { background:linear-gradient(135deg,var(--k-purple),var(--k-pink) 55%,var(--k-orange)); border-radius:28px; padding:34px 36px; position:relative; overflow:hidden; }
.hero h1 { font-size:2.9rem; }
.hero .kicker { color:var(--k-yellow); font-size:1rem; }
.hero h3 { color:var(--k-yellow); }
.hero .spec { color:#fff; opacity:.9; }
.hero .kidowl { position:absolute; right:14px; top:10px; width:120px; height:auto; }
.hero .kidbubble { position:absolute; right:150px; top:18px; background:#fff; color:var(--k-purple); font-weight:700; padding:8px 14px; border-radius:18px; font-size:1rem; max-width:220px; }

/* section headings become coloured cards with a big number badge */
.sec-h { border:0; background:#fff; border-radius:24px; padding:14px 18px; margin:48px 0 18px; box-shadow:0 6px 0 rgba(131,56,236,.12), 0 10px 24px rgba(31,58,95,.08); gap:14px; align-items:center; }
.sec-h .num { width:58px; height:58px; border-radius:50%; background:var(--k-blue); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:1.5rem; flex:0 0 auto; }
.sec-h h2 { font-size:1.7rem; color:var(--k-purple); }
.sec-h .meta { display:none; }
.sec-h .kidowl { width:70px; height:auto; flex:0 0 auto; margin-left:auto; }
.sec-h .kidbubble { background:var(--k-yellow); color:#4a2d00; font-weight:700; padding:6px 12px; border-radius:16px; font-size:.95rem; position:relative; }
.sec-h.c1 .num { background:var(--k-pink); } .sec-h.c2 .num { background:var(--k-orange); }
.sec-h.c3 .num { background:var(--k-green); } .sec-h.c4 .num { background:var(--k-purple); }
.sec-h.c5 .num { background:var(--k-blue); }

/* key ideas, watch-out and grown-up tip boxes */
.keybox, .watch, .tip { border-radius:20px; padding:16px 20px; font-size:1.05rem; border-left-width:0; }
.keybox { background:#e8f7ff; box-shadow:inset 6px 0 0 var(--k-blue); }
.watch { background:#fff1e6; box-shadow:inset 6px 0 0 var(--k-orange); }
.tip { background:#e9fbf7; box-shadow:inset 6px 0 0 var(--k-green); }
.keybox h4, .watch h4, .tip h4 { font-size:1rem; }
.keybox h4::before { content:"\2605  "; color:var(--k-blue); }
.watch h4::before { content:"\26A0  "; color:var(--k-orange); }
.tip h4::before { content:"\2665  "; color:var(--k-green); }

/* worked examples */
.we { border-radius:24px; border:3px solid var(--k-yellow); box-shadow:0 8px 0 rgba(255,210,63,.35); }
.we-h { background:var(--k-yellow); color:#4a2d00; font-size:1.05rem; font-weight:800; border-radius:0; }
.we-q { font-size:1.15rem; }

/* exercises: big coloured header and cards */
.exercise { border-radius:26px; border:0; box-shadow:0 10px 26px rgba(31,58,95,.10); }
.ex-head { background:linear-gradient(90deg,var(--k-blue),var(--k-purple)); padding:16px 22px; }
.ex-head h3 { font-size:1.3rem; }
.exprog { font-size:1rem; color:#fff; background:rgba(255,255,255,.2); border-radius:99px; padding:4px 12px; }
.exercise.c1 .ex-head { background:linear-gradient(90deg,var(--k-pink),var(--k-orange)); }
.exercise.c2 .ex-head { background:linear-gradient(90deg,var(--k-orange),var(--k-yellow)); color:#3b2300; }
.exercise.c2 .ex-head h3, .exercise.c2 .exprog { color:#3b2300; }
.exercise.c3 .ex-head { background:linear-gradient(90deg,var(--k-green),var(--k-blue)); }
.exercise.c4 .ex-head { background:linear-gradient(90deg,var(--k-purple),var(--k-pink)); }
.exercise.c5 .ex-head { background:linear-gradient(90deg,var(--k-blue),var(--k-green)); }

.q { position:relative; padding:20px 22px; grid-template-columns:52px minmax(0,1fr) auto; gap:12px; }
.q.done { background:#eefcf4; }
.qnum { width:44px; height:44px; border-radius:50%; background:var(--k-yellow); color:#4a2d00; display:flex; align-items:center; justify-content:center; font-size:1.2rem; font-weight:800; margin-top:2px; }
.qtext { font-size:1.2rem; font-weight:600; }
.fig { margin:14px 0; background:#fff; border-radius:18px; padding:10px; }
.fig .cap { font-size:1rem; }
.done-wrap { font-size:1rem; }
.done-wrap input { width:24px; height:24px; }

/* big friendly buttons */
.ctrl button { font-size:1rem; padding:6px 18px; border-width:2px; }
.btn { font-size:1rem; padding:9px 20px; }
.reveal { font-size:1.08rem; border-radius:16px; }
.reveal.ans::before, .reveal.sol::before { font-size:.9rem; }

/* sticker for a finished exercise */
.kidstar { display:inline-flex; align-items:center; gap:6px; background:var(--k-yellow); color:#4a2d00; font-weight:800; border-radius:99px; padding:4px 12px; font-size:1rem; box-shadow:0 3px 0 #d4a500; }
.kidstar.pop { animation:kidpop .6s ease-out; }
@keyframes kidpop { 0%{transform:scale(.4) rotate(-15deg);opacity:0} 70%{transform:scale(1.15) rotate(4deg);opacity:1} 100%{transform:scale(1) rotate(0)} }

/* the end-of-chapter cards */
.endcard { border-radius:24px; }

/* ---- movement: owl bob, picture pop-in, button wiggle ---- */
.kidowl { animation:kidbob 2.8s ease-in-out infinite; transform-origin:50% 90%; }
@keyframes kidbob { 0%,100% { transform:translateY(0) rotate(0); } 50% { transform:translateY(-6px) rotate(-2deg); } }
.fig.popwait { opacity:0; }
.fig.popped { animation:kidfig .6s cubic-bezier(.3,1.4,.5,1) both; }
@keyframes kidfig { from { opacity:0; transform:scale(.6); } to { opacity:1; transform:scale(1); } }
@keyframes kidshake { 0%,100% { transform:translateX(0); } 20% { transform:translateX(-7px); } 40% { transform:translateX(7px); } 60% { transform:translateX(-5px); } 80% { transform:translateX(4px); } }
@keyframes kidwiggle { 0%,100% { transform:rotate(0); } 25% { transform:rotate(-3deg); } 75% { transform:rotate(3deg); } }
.btn:hover, .ctrl button:hover, .walkbtn:hover, .pagenav a:hover, .kid-play:hover, .kid-cbtn:hover,
.kg-btn:hover, .kg-choice:not(:disabled):hover { animation:kidwiggle .45s ease-in-out; }

/* ---- celebration burst when a question is ticked ---- */
.kid-burst { position:absolute; width:0; height:0; pointer-events:none; z-index:5; }
.kid-burst i { position:absolute; left:-7px; top:-7px; width:14px; height:14px; border-radius:3px; font-style:normal; animation:kidburst 1s ease-out forwards; }
.kid-burst i.kid-sp { width:auto; height:auto; left:-10px; top:-12px; font-size:20px; line-height:1; border-radius:0; background:none !important; }
@keyframes kidburst { 0% { transform:translate(0,0) rotate(0); opacity:1; } 80% { opacity:1; } 100% { transform:translate(var(--dx),var(--dy)) rotate(var(--rot)); opacity:0; } }

/* ---- tap-to-count ---- */
.fig.kid-countable { cursor:pointer; }
.kid-count { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:-4px 0 14px; font-size:1rem; }
.kid-cbtn { font:inherit; font-weight:800; font-size:.95rem; min-height:40px; border:0; border-radius:99px; padding:6px 16px; background:var(--k-green); color:#fff; cursor:pointer; box-shadow:0 3px 0 #1b7f74; }
.kid-cbtn:active { transform:translateY(2px); box-shadow:0 1px 0 #1b7f74; }
.kid-bubbles { display:flex; flex-wrap:wrap; gap:6px; min-height:34px; }
.kid-bub { width:34px; height:34px; border-radius:50%; color:#fff; font-weight:800; display:inline-flex; align-items:center; justify-content:center; animation:kidpop .35s ease-out; box-shadow:inset 0 -3px 0 rgba(0,0,0,.15); }
.kid-total { font-weight:800; color:var(--k-purple); }

/* ---- the 'Play the game' button in an exercise header ---- */
.kid-play { font:inherit; font-weight:800; font-size:1.1rem; min-height:48px; padding:8px 22px; border:0; border-radius:99px; background:#fff; color:var(--k-purple); cursor:pointer; box-shadow:0 5px 0 rgba(0,0,0,.25); animation:kidpop .5s ease-out; }
.kid-play:active { transform:translateY(3px); box-shadow:0 2px 0 rgba(0,0,0,.25); }
.kid-play:focus-visible, .kid-cbtn:focus-visible, .kg-choice:focus-visible, .kg-x:focus-visible, .kg-btn:focus-visible {
  outline:3px solid #fff; outline-offset:2px; }

/* ---- the quiz game (modal) ---- */
.kg-back { position:fixed; inset:0; z-index:300; background:rgba(16,28,46,.6); display:flex; align-items:center; justify-content:center; padding:12px; }
.kg-card { position:relative; background:#fff; border-radius:26px; width:min(600px,100%); max-height:94vh; overflow:auto; box-shadow:0 20px 60px rgba(0,0,0,.4); animation:kidfig .35s ease-out both; }
.kg-top { display:flex; align-items:center; gap:12px; padding:14px 18px; background:linear-gradient(90deg,var(--k-pink),var(--k-purple)); color:#fff; position:sticky; top:0; z-index:1; }
.kg-title { margin:0; color:#fff; font-size:1.3rem; }
.kg-title:focus { outline:none; }
.kg-round { margin-left:auto; font-weight:800; font-size:1rem; background:rgba(255,255,255,.22); padding:3px 12px; border-radius:99px; white-space:nowrap; }
.kg-x { background:rgba(255,255,255,.22); border:0; color:#fff; width:44px; height:44px; border-radius:50%; font-size:1.8rem; line-height:1; cursor:pointer; flex:0 0 auto; }
.kg-body { padding:18px; }
.kg-fig { background:#f7fbff; border-radius:18px; padding:8px; text-align:center; margin-bottom:12px; }
.kg-fig svg { max-height:180px; width:auto; max-width:100%; height:auto; }
.kg-fig .kid-count { display:none; }
.kg-q { font-size:1.35rem; font-weight:700; margin:4px 0 16px; color:var(--ink); }
.kg-choices { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.kg-choice { font:inherit; font-size:1.45rem; font-weight:800; min-height:76px; border:0; border-radius:20px; color:#fff; cursor:pointer; padding:10px; box-shadow:0 6px 0 rgba(0,0,0,.2); word-break:break-word; }
.kg-choice:active:not(:disabled) { transform:translateY(4px); box-shadow:0 2px 0 rgba(0,0,0,.2); }
.kg-choice:disabled { cursor:default; }
.kg-choice.k1 { background:#e0456f; } .kg-choice.k2 { background:#d9730d; }
.kg-choice.k3 { background:#1f9d8f; } .kg-choice.k4 { background:#2563d6; }
.kg-choice.right { background:#2e8b57; box-shadow:0 0 0 5px #fff, 0 0 0 9px #2e8b57; }
.kg-choice.right::after { content:" \2713"; }
.kg-choice.wrong { background:#8a99aa; animation:kidshake .45s ease-in-out; }
.kg-choice.dim { opacity:.45; }
.kg-feed { display:flex; align-items:center; gap:12px; min-height:90px; margin:14px 0 4px; }
.kg-owlwrap { flex:0 0 auto; }
.kg-owl { width:84px; height:auto; display:block; }
.kg-owl.cheer { animation:kidbob .6s ease-in-out 3; }
.kg-owl.oops { animation:kidshake .5s ease-in-out 2; }
.kg-ftxt { font-size:1.2rem; font-weight:700; color:var(--ink); }
.kg-next { display:block; margin:10px auto 0; }
.kg-stars { display:flex; justify-content:center; gap:6px; font-size:3.2rem; line-height:1; margin:10px 0; }
.kg-star { color:#d5dde8; }
.kg-star.on { color:#ffb703; text-shadow:0 3px 0 #d98e00; animation:kidpop .5s ease-out both; }
.kg-msg { text-align:center; font-size:1.25rem; font-weight:700; margin:8px 0 18px; }
.kg-actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.kg-btn { font:inherit; font-weight:800; font-size:1.15rem; min-height:52px; padding:10px 26px; border:0; border-radius:99px; background:var(--k-blue); color:#fff; cursor:pointer; box-shadow:0 5px 0 #2a63c7; }
.kg-btn:active { transform:translateY(3px); box-shadow:0 2px 0 #2a63c7; }
.kg-btn.alt { background:#fff; color:var(--k-purple); border:3px solid var(--k-purple); box-shadow:none; }

@media (max-width: 700px) {
  body { font-size:17px; }
  .hero { padding:24px 20px; }
  .hero h1 { font-size:2.1rem; }
  .hero .kidowl { width:80px; top:6px; right:6px; }
  .hero .kidbubble { display:none; }
  .sec-h .kidbubble { display:none; }
  .sec-h .kidowl { width:54px; }
  .q { padding:16px 14px; grid-template-columns:40px minmax(0,1fr); }
  .qnum { width:36px; height:36px; font-size:1rem; }
  .kid-play { font-size:1rem; padding:8px 16px; }
  .kg-body { padding:14px; }
  .kg-title { font-size:1.1rem; }
  .kg-choices { gap:10px; }
  .kg-choice { font-size:1.25rem; min-height:68px; }
  .kg-owl { width:70px; }
  .kg-ftxt { font-size:1.05rem; }
}

/* people who asked for less motion get still pictures and buttons */
@media (prefers-reduced-motion: reduce) {
  .kidowl, .kg-owl, .kg-card, .kidstar, .kidstar.pop, .fig.popped, .kid-bub, .kid-play,
  .kg-star, .kg-choice, .kg-choice.wrong, .kid-burst i, .btn, .ctrl button, .kg-btn,
  .walkbtn, .pagenav a, .kid-cbtn { animation:none !important; transition:none !important; }
  .fig.popwait { opacity:1; }
  .kid-burst { display:none; }
}
@media print {
  .kid-play, .kid-count, .kg-back, .kid-burst { display:none !important; }
  .fig.popwait { opacity:1 !important; animation:none !important; }
}