/* Brain Spark — kid-friendly look & layout (loaded last; paired with ui.js) */
@font-face{font-family:"Fredoka";src:url("fonts/fredoka.woff2") format("woff2");font-weight:300 700;font-style:normal;font-display:swap}

:root{--accent:#5b8def;--accent-soft:#e8f0ff;--ink:#1f2d4d;--ink-soft:#5a6a8a}
body.grade-1{--accent:#4a90e2;--accent-soft:#dcecff}
body.grade-2{--accent:#2fbf7f;--accent-soft:#d9f7e8}
body.grade-3{--accent:#8b6ad8;--accent-soft:#ece4ff}
body.grade-4{--accent:#f08a3c;--accent-soft:#ffead9}
body.grade-5{--accent:#1fb0b0;--accent-soft:#d6f5f5}
body.grade-6{--accent:#ec6a8c;--accent-soft:#ffe1ea}
body.grade-adult{--accent:#7aa6ff;--accent-soft:#2e3d58;--ink:#e8eef8;--ink-soft:#a8b8d8}

body{font-family:"Fredoka",ui-rounded,"SF Pro Rounded",system-ui,-apple-system,sans-serif;color:var(--ink)}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:radial-gradient(rgba(255,255,255,.6) 2px,transparent 2.6px);background-size:26px 26px}
body.grade-adult::before{background-image:radial-gradient(rgba(255,255,255,.05) 2px,transparent 2.6px)}
button,select,input{font-family:inherit}
h1,h2,.q,.btn,.grade,.choice{letter-spacing:.01em}

.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Top bar: one row ---------- */
.top{flex-wrap:nowrap;margin-bottom:10px}
.top-left{flex-wrap:nowrap;min-width:0}
.top > div:last-child{display:flex;gap:8px;flex:none}
h1{display:inline-flex;align-items:center;gap:8px;font-size:1.45rem;font-weight:700;white-space:nowrap}
h1 .logo{width:30px;height:30px;border-radius:9px;box-shadow:0 2px 6px rgba(40,70,140,.25)}
.back-btn:not(.hidden) + h1{display:none}
.icon{width:46px;height:46px;min-height:46px;padding:0;font-size:1.3rem;line-height:1;display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 3px 0 rgba(60,90,160,.18);transition:transform .15s}
.icon:active{transform:translateY(2px)}
.icon[aria-pressed="true"]{text-decoration:none;opacity:.55;background:#eef1f7}
.back-btn{font-weight:700;padding:10px 16px}

/* ---------- Cards ---------- */
.card{border-radius:28px;padding:18px 16px 20px;box-shadow:0 14px 40px rgba(60,90,160,.18),0 0 0 4px rgba(255,255,255,.5)}
h2{font-weight:700}
.howto{font-weight:500}

/* ---------- Start screen ---------- */
#start h2{margin:4px 0 6px;font-size:1.55rem;line-height:1.2}
#start .howto{margin:0 0 4px}
.grades{gap:10px;margin:14px 0 16px}
.grade{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:84px;padding:10px 6px;border-radius:20px;
  font-weight:600;font-size:1.05rem;border-width:3px;transition:transform .15s,box-shadow .15s}
.grade::before{font-size:2rem;line-height:1.1}
.grade[data-grade="1"]::before{content:"🐣"}
.grade[data-grade="2"]::before{content:"🐸"}
.grade[data-grade="3"]::before{content:"🦊"}
.grade[data-grade="4"]::before{content:"🐼"}
.grade[data-grade="5"]::before{content:"🦉"}
.grade[data-grade="6"]::before{content:"🚀"}
.grade[data-grade="adult"]::before{content:"🎓";font-size:1.6rem}
.grade.adult-wide{flex-direction:row;gap:10px;min-height:60px}
.grade[data-grade="1"]{background:#eef6ff;border-color:#cfe3fb}
.grade[data-grade="2"]{background:#ecfbf3;border-color:#c6efd9}
.grade[data-grade="3"]{background:#f4efff;border-color:#ddd0f7}
.grade[data-grade="4"]{background:#fff4ea;border-color:#fbdcc2}
.grade[data-grade="5"]{background:#e9fafa;border-color:#bfeaea}
.grade[data-grade="6"]{background:#fff0f4;border-color:#f9d0dc}
.grade[data-grade="adult"]{background:#eef1f7;border-color:#d5dbe8}
.grade.selected{transform:scale(1.03);box-shadow:0 5px 0 rgba(0,0,0,.12),0 0 0 3px #fff inset;position:relative}
.grade.selected::after{content:"✓";position:absolute;top:6px;right:8px;width:22px;height:22px;border-radius:50%;background:currentColor;
  color:#fff;font-size:.8rem;line-height:22px;text-align:center}
.grade.selected::after{background:var(--accent);color:#fff}
.extreme-row{border-radius:18px}
.extreme-row .ext-label{font-weight:700}
#play{font-size:1.35rem;min-height:62px}
.hint{font-weight:500}

/* ---------- Game header ---------- */
.game-pills{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#fxTrack{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 10px}
#fxTrack #fxDots{margin:0;justify-content:flex-start;flex:1;min-width:0;gap:5px}
#fxTrack #fxDots i{width:10px;height:10px}
#fxTrack #fxDots i.cur{background:var(--accent);transform:scale(1.45)}
#fxStars{flex:none;display:inline-flex;align-items:center;gap:4px;background:#fff6d6;color:#8a5a00;border:2px solid #ffe08a;border-radius:999px;
  padding:3px 10px 3px 7px;font-weight:700;font-size:1rem;min-width:56px;justify-content:center}
#fxStars.bump{animation:uiBump .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes uiBump{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}
.fx-flystar{position:fixed;z-index:75;font-size:1.8rem;pointer-events:none;left:0;top:0}

.q-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:2px 0 6px}
.q-meta .cat{margin:0;display:inline-flex;align-items:center;gap:6px;background:var(--accent-soft);color:var(--accent);border-radius:999px;
  padding:4px 12px 4px 8px;font-size:.85rem;font-weight:700;letter-spacing:.04em}
.q-meta .cat::before{content:attr(data-emoji);font-size:1.1rem;letter-spacing:0}
.q-meta #gradePill{margin:0;background:transparent;color:var(--ink-soft);padding:0;font-weight:600;font-size:.82rem}
.q{font-weight:700;font-size:clamp(1.45rem,6vw,2rem);margin:6px 0 14px;line-height:1.22}

/* ---------- Play area ---------- */
.play-stack{display:flex;flex-direction:column;min-height:250px;margin:0}
#timer{order:0;display:flex;align-items:center;gap:10px;margin:0 0 4px}
#timer .howto{display:none}
#timer .count{font-size:1.45rem;font-weight:700;width:48px;height:48px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  background:var(--accent-soft);color:var(--accent);line-height:1}
#timer .bar{flex:1;margin:0;max-width:none;height:14px}
.play-stack.revealed .timer-slot{position:static}
#choices{order:1;margin:8px 0 4px;gap:10px}
.play-stack.revealed .choices{opacity:1;filter:none}

/* Answer buttons: a colour per letter, like a game show */
.choice{font-weight:600;font-size:1.18rem;min-height:60px;border-radius:20px;display:flex;align-items:center}
.letter{flex:none;width:34px;height:34px;font-size:1rem;font-weight:700;margin-right:12px}
.choice:nth-child(1) .letter{background:#4a90e2}
.choice:nth-child(2) .letter{background:#ec5f95}
.choice:nth-child(3) .letter{background:#2fb872}
.choice:nth-child(4) .letter{background:#f08a3c}
.choices .choice:nth-child(1):not(.correct):not(.wrong):not(.picked){border-color:#cfe3fb;background:#f3f8ff}
.choices .choice:nth-child(2):not(.correct):not(.wrong):not(.picked){border-color:#f9d0e0;background:#fff5f9}
.choices .choice:nth-child(3):not(.correct):not(.wrong):not(.picked){border-color:#c6efd9;background:#f2fcf7}
.choices .choice:nth-child(4):not(.correct):not(.wrong):not(.picked){border-color:#fbdcc2;background:#fff8f1}
.choice.correct .letter{background:#2fb872}
.choice.wrong .letter{background:#e0607e}
.choice.fade-out{opacity:.45}

/* Listening */
#fxListen{order:0;display:none;flex:1;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--ink-soft);font-weight:600;font-size:1.05rem;min-height:200px}
.play-stack.listening #fxListen{display:flex}
.eq{display:flex;align-items:flex-end;gap:6px;height:54px}
.eq i{width:10px;border-radius:6px;background:var(--accent);animation:uiEq 1s ease-in-out infinite;height:30%}
.eq i:nth-child(2){animation-delay:-.2s}.eq i:nth-child(3){animation-delay:-.45s}.eq i:nth-child(4){animation-delay:-.7s}.eq i:nth-child(5){animation-delay:-.3s}
@keyframes uiEq{0%,100%{height:25%}50%{height:100%}}

/* Answer feedback: a banner above the choices (choices stay visible) */
#answer.ans{position:relative;left:auto;right:auto;top:auto;transform:none;display:none;order:0;margin:0 0 4px;padding:10px 14px;border-radius:20px;
  text-align:left;grid-template-columns:auto 1fr;column-gap:12px;align-items:center;box-shadow:none;opacity:1;visibility:visible}
#answer.ans.show{display:grid;transform:none;animation:uiBanner .45s cubic-bezier(.34,1.56,.64,1)}
@keyframes uiBanner{from{opacity:0;transform:translateY(-8px) scale(.96)}to{opacity:1;transform:none}}
#answer .ans-mark{grid-row:1/4;margin:0;font-size:2.4rem;min-height:0}
#answer #ansTitle{font-weight:600;font-size:.9rem;opacity:.85}
#answer .ansb{margin:0;font-size:clamp(1.2rem,5vw,1.5rem);line-height:1.15;font-weight:700}
#answer .cheer{font-size:.95rem;font-weight:600}
.actions{min-height:66px;margin-top:6px}
#next{font-size:1.25rem}

/* ---------- End screen ---------- */
#end h2{margin:4px 0 2px;font-size:1.8rem}
#fxRating{display:flex;justify-content:center;gap:6px;margin:6px 0 2px;font-size:3rem;line-height:1}
#fxRating span{filter:grayscale(1);opacity:.25;transform:scale(.6);transition:transform .45s cubic-bezier(.34,1.56,.64,1),opacity .3s,filter .3s}
#fxRating span:nth-child(2){font-size:3.6rem;margin-top:-10px}
#fxRating span.on{filter:none;opacity:1;transform:scale(1)}
#endScore{font-size:1.25rem;font-weight:700;color:var(--ink)}
#end .btn{margin-top:10px}
#end .btn:first-of-type{margin-top:14px}
#fxReview{margin:18px 0 0;text-align:left;border-top:3px dashed #e3eaf7;padding-top:14px}
#fxReview h3{margin:0 0 8px;font-size:1.15rem}
#fxReview .rv-note{margin:0 0 10px;color:var(--ink-soft);font-weight:500;font-size:.92rem}
#fxReview ol{list-style:none;margin:0;padding:0;display:grid;gap:8px}
#fxReview li{background:#f5f8ff;border-radius:16px;padding:10px 12px}
#fxReview .rv-q{font-weight:600;line-height:1.25}
#fxReview .rv-a{margin-top:4px;color:#177a4c;font-weight:700}
#fxReview .rv-you{margin-top:2px;color:#b04a32;font-size:.85rem;font-weight:500}
#fxReview.perfect{text-align:center}

/* ---------- Adults (dark) ---------- */
body.grade-adult .grade{background:#2a3550;border-color:#4a5a78}
body.grade-adult .icon[aria-pressed="true"]{background:#1f2940}
body.grade-adult #fxStars{background:#3a3420;border-color:#6a5a2a;color:#ffe08a}
body.grade-adult .q-meta .cat{color:#9ec5ff}
body.grade-adult .choices .choice:not(.correct):not(.wrong):not(.picked){background:#2e3d58;border-color:#4a5a78}
body.grade-adult .choices .choice.correct{background:#1e3d32;border-color:#3ecf8e;color:#e8fff4;box-shadow:0 4px 0 #3ecf8e,0 0 0 3px rgba(62,207,142,.25)}
body.grade-adult .choices .choice.wrong{background:#3a2a28;border-color:#e8a070;color:#ffe8dc}
body.grade-adult #fxReview{border-color:#3a4a68}
body.grade-adult #fxReview li{background:#2e3d58}
body.grade-adult #fxReview .rv-a{color:#7dffb5}
body.grade-adult #fxReview .rv-you{color:#ffb090}
body.grade-adult #endScore{color:#f0f4ff}
body.grade-adult .card{box-shadow:0 14px 40px rgba(0,0,0,.35)}

@media (prefers-reduced-motion:reduce){.eq i{animation:none;height:60%}}
@media (max-width:360px){.grade{min-height:74px;font-size:.98rem}.grade::before{font-size:1.7rem}.choice{font-size:1.08rem}}

/* ---------- School calendar button + pop-up (pacing.js) ---------- */
.cal-btn{position:relative}
.cal-btn[hidden]{display:none}
.cal-badge{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--accent);color:#fff;
  font-size:.72rem;font-weight:700;line-height:20px;text-align:center;box-shadow:0 0 0 2px #fff}
.cal-badge[hidden]{display:none}
.cal-pop{position:fixed;inset:0;z-index:95;display:flex;align-items:flex-start;justify-content:center;padding:calc(70px + env(safe-area-inset-top)) 12px 12px;background:rgba(20,30,60,.38)}
.cal-pop[hidden]{display:none}
.cal-card{width:100%;max-width:380px;background:#fff;color:var(--ink,#1f2d4d);border-radius:24px;padding:16px 16px 18px;display:grid;gap:12px;text-align:left;
  box-shadow:0 20px 50px rgba(0,0,0,.3);animation:calIn .3s cubic-bezier(.34,1.56,.64,1);transform-origin:top right}
@keyframes calIn{from{opacity:0;transform:translateY(-10px) scale(.95)}to{opacity:1;transform:none}}
.cal-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.cal-head h2{margin:0;font-size:1.25rem}
.pc-close{appearance:none;border:0;background:#eef1f7;color:inherit;width:40px;height:40px;border-radius:50%;font-size:1rem;cursor:pointer;flex:none}
.pc-status{background:var(--accent-soft);border-radius:16px;padding:10px 12px}
.pc-line{display:block;font-weight:700;font-size:1.05rem;color:var(--accent)}
.pc-sub{display:block;font-weight:500;font-size:.85rem;color:var(--ink-soft);margin-top:2px}
.pc-field{display:grid;gap:4px;font-weight:600;font-size:.92rem}
.pc-field input{font:inherit;font-weight:600;min-height:46px;border:2px solid #d6e4ff;border-radius:12px;padding:0 10px;background:#fff;color:var(--ink,#1f2d4d)}
.pc-check{display:flex;align-items:center;gap:10px;font-weight:600;font-size:.92rem}
.pc-check input{width:22px;height:22px;flex:none;accent-color:var(--accent)}
.pc-note{margin:0;font-size:.8rem;color:var(--ink-soft);font-weight:500}
.pc-done{min-height:52px;font-size:1.1rem}
body.grade-adult .cal-card{background:#243044}
body.grade-adult .pc-close{background:#2e3d58}
@media (max-width:360px){.top h1{font-size:1.2rem}.top h1 .logo{width:26px;height:26px}.top > div:last-child{gap:6px}.icon{width:42px;height:42px;min-height:42px}}
@media (prefers-reduced-motion:reduce){.cal-card{animation:none}}