/* Lia's maths games - layout for a 13" landscape tablet in Chrome (about 1280 x 650 usable), works on the PC too.
   Game screen = top bar, then two panels: QUESTION (left) and YOUR ANSWER (right). Picture answers stack instead. */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
:root { --ink: #23214a; --purple: #6b5bd2; --purple-d: #4d3fb0; --pale: #efeaff; --line: #d7d0f7; --green: #2eaa6a;
  --green-d: #1f7d4d; --orange: #f2a34b; --bg: #fff8ef; }
html, body { margin: 0; height: 100%; background: var(--bg); font-family: "Segoe UI", Roboto, Arial, sans-serif; color: var(--ink);
  touch-action: manipulation; user-select: none; -webkit-user-select: none; }
#app { max-width: 1400px; margin: 0 auto; min-height: 100%; padding: 0 16px 12px; }
.screen[hidden] { display: none !important; }
h1 { font-size: 40px; margin: 18px 0 4px; color: var(--purple); text-align: center; }
.big { font-size: 26px; text-align: center; line-height: 1.3; margin: 4px 0; }
.small { font-size: 16px; color: #777; text-align: center; }
.small a { color: var(--purple); }
button { font: inherit; border: 0; border-radius: 16px; background: var(--purple); color: #fff; cursor: pointer;
  box-shadow: 0 4px 0 var(--purple-d); }
button:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--purple-d); }
button.soft { background: var(--pale); color: var(--ink); box-shadow: 0 4px 0 var(--line); }
button.ok { background: var(--green); box-shadow: 0 4px 0 var(--green-d); font-size: 28px; padding: 14px 30px; font-weight: 600; }
button.go { background: var(--green); box-shadow: 0 5px 0 var(--green-d); font-size: 32px; padding: 18px 50px; }

/* ---------- menu ---------- */
#start { display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 10px; }
#menu { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; width: 100%; max-width: 1100px; }
.gamecard { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; background: #fff; color: var(--ink);
  border: 3px solid var(--line); box-shadow: 0 4px 0 var(--line); position: relative; padding: 18px 20px 18px 74px; }
.gamecard b { font-size: 28px; color: var(--purple); } .gamecard small { font-size: 18px; color: #555; }
.gamecard .num { position: absolute; left: 16px; top: 20px; width: 42px; height: 42px; border-radius: 50%; background: var(--purple);
  color: #fff; text-align: center; line-height: 42px; font-size: 22px; }

/* Start here (review 2026-10-15): one big first card; calm "done for today" look */
#startCard { width: 100%; max-width: 1100px; }
.gamecard.startcard { width: 100%; padding: 26px 28px 26px 96px; border-color: var(--green); box-shadow: 0 5px 0 var(--green-d); }
.gamecard.startcard b { font-size: 40px; color: var(--green-d); } .gamecard.startcard small { font-size: 21px; }
.gamecard.startcard .num { width: 60px; height: 60px; line-height: 60px; font-size: 32px; background: var(--green); top: 26px; }
.gamecard.startcard.donecard { background: #eefaf2; cursor: default; }
.moretitle { margin: 6px 0 0; }
/* worked example (fading) shown above her own question */
.workex { text-align: left; background: #f4fbf6; border: 2px dashed var(--green); border-radius: 14px; padding: 10px 14px; margin: 0 0 10px; font-size: 19px; }
.workex h4 { margin: 0 0 6px; color: var(--green-d); font-size: 18px; text-transform: uppercase; letter-spacing: .04em; }
.workex ol { margin: 6px 0 4px 22px; padding: 0; } .workex .ans { font-weight: 700; color: var(--green-d); }

/* ---------- game screen ---------- */
#game { display: flex; flex-direction: column; height: 100vh; height: 100dvh; padding-bottom: 8px; }
#top { display: flex; align-items: center; gap: 14px; padding: 8px 230px 8px 0; min-height: 64px; }
#top .home { font-size: 18px; padding: 10px 16px; white-space: nowrap; }
#stepname { font-size: 18px; color: #555; white-space: nowrap; }
#progress { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
#progress i { width: 14px; height: 14px; border-radius: 50%; background: #e3dcff; display: inline-block; }
#progress i.done { background: var(--green); } #progress i.miss { background: var(--orange); } #progress i.now { background: var(--purple); outline: 3px solid #c9c0f5; }

#stage { flex: 1; display: grid; gap: 16px; min-height: 0; }
#game[data-layout="split"] #stage { grid-template-columns: minmax(0, 3fr) minmax(330px, 2fr); }
#game[data-layout="stack"] #stage { grid-template-columns: 1fr; grid-template-rows: auto auto; align-content: center; }
#game[data-layout="stack"] .panel { overflow: visible; }
.panel { background: #fff; border: 3px solid var(--line); border-radius: 22px; padding: 14px 18px; display: flex; flex-direction: column;
  align-items: center; gap: 10px; min-height: 0; overflow: auto; }
.tag { align-self: flex-start; font-size: 15px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--purple);
  background: var(--pale); padding: 4px 12px; border-radius: 999px; }
#prompt { font-size: 30px; font-weight: 600; text-align: center; line-height: 1.3; margin: 0; }
#visual { width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; flex: 1; min-height: 0; }
#visual svg { max-height: 300px; max-width: 100%; }
#visual:empty { display: none; }
#apanel { background: #f7f4ff; }
#ahint { font-size: 20px; color: #444; text-align: center; margin: 0; }
#input { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
#feedback { width: 100%; font-size: 22px; text-align: center; padding: 10px 14px; border-radius: 14px; }
#feedback:empty { display: none; }
#feedback.good { background: #d9f5e5; color: var(--green-d); font-weight: 600; }
#feedback.bad { background: #fff0d6; color: #a0561a; }
#game[data-layout="stack"] #visual svg { max-height: 240px; }

/* ---------- keypad: answer box + keys + Check, all in the answer panel ---------- */
.keypadwrap { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.answerbox { width: 100%; max-width: 330px; height: 72px; border: 4px solid var(--purple); border-radius: 16px; background: #fff;
  font-size: 44px; font-weight: 700; display: flex; align-items: center; justify-content: center; letter-spacing: 1px; }
.answerbox.empty { color: #c4bce8; }
.keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; max-width: 330px; }
.keys button { height: 58px; font-size: 28px; }
.keys button.soft { font-size: 22px; }
#input > button.ok, .keypadwrap > button.ok { width: 100%; max-width: 330px; }

/* ---------- place value chart ---------- */
.pv { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.pv .col { width: 140px; background: #fff; border: 3px solid var(--line); border-radius: 16px; padding: 8px; text-align: center; }
.pv .col h3 { margin: 0 0 6px; font-size: 22px; color: var(--purple); }
.pv .dots { min-height: 104px; display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; align-content: flex-start; }
.pv .dot { width: 32px; height: 32px; border-radius: 50%; color: #fff; font-size: 11px; line-height: 32px; font-weight: bold; }
.pv .dot.TTh { background: #7e57c2; } .pv .dot.Th { background: #e05a7a; } .pv .dot.H { background: #2e9ad6; }
.pv .dot.T { background: var(--green); } .pv .dot.O { background: var(--orange); }
.pv .ctl { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }
.pv .ctl button { width: 50px; height: 50px; padding: 0; font-size: 30px; }
.pv .count { font-size: 26px; font-weight: bold; }

/* ---------- number line, tiles, picture options, grids ---------- */
svg.line { width: 100%; max-width: 1000px; height: auto; }
.tiles { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.tile { font-size: 32px; min-width: 160px; padding: 14px 18px; background: #fff; color: var(--ink); border: 3px solid var(--line); box-shadow: none; position: relative; }
.tile.picked { background: var(--pale); border-color: var(--purple); }
.tile .n, .opt .n { position: absolute; top: -12px; right: -12px; width: 36px; height: 36px; border-radius: 50%; background: var(--purple);
  color: #fff; font-size: 20px; line-height: 36px; }
.choices button { font-size: 32px; min-width: 160px; padding: 14px 18px; background: #fff; color: var(--ink); border: 3px solid var(--line); box-shadow: none; }
.opt { background: #fff; color: var(--ink); border: 4px solid var(--line); box-shadow: none; padding: 10px 14px; min-width: 120px;
  font-size: 28px; position: relative; }
.opt.picked { border-color: var(--purple); background: var(--pale); }
.opt.right { border-color: var(--green); background: #d9f5e5; }
.opt svg { display: block; margin: 0 auto; max-height: 200px; max-width: 100%; }
svg.gridsvg { width: 100%; max-width: 600px; max-height: 360px; touch-action: none; }
.roman { font-size: 64px; font-weight: 700; color: var(--purple); }

/* ---------- end ---------- */
#end { display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 30px; }
#stars { font-size: 50px; letter-spacing: 6px; }

/* the voice button sits in the top-right corner of the top bar, out of the way of answers */
#liaTalk { top: 8px !important; bottom: auto !important; right: 16px !important; }

/* phone or portrait: everything in one column */
@media (max-width: 820px) {
  #game[data-layout="split"] #stage { grid-template-columns: 1fr; }
  #top { padding-right: 200px; flex-wrap: wrap; }  /* keep clear of the Talk button in the corner */
  #prompt { font-size: 24px; }
}

#input button.soft { font-size: 20px; padding: 10px 24px; }
/* building with counters: bigger columns so the counters are easy to see */
#game[data-layout="stack"] .pv .col { width: 180px; }
#game[data-layout="stack"] .pv .dots { min-height: 150px; }
#game[data-layout="stack"] .pv .dot { width: 38px; height: 38px; line-height: 38px; font-size: 12px; }
/* carry-on card on the menu */
.resume { background: #2eaa6a; box-shadow: 0 5px 0 #1f7d4d; font-size: 26px; padding: 16px 34px; }

/* wrong answer: the message sits right under the answer title, shakes once, and the answer box turns orange */
#feedback.shake { animation: shake .4s; }
@keyframes shake { 0%, 100% { transform: none; } 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }
.answerbox.wrong { border-color: #f2a34b; }
#feedback.bad { font-size: 22px; line-height: 1.35; }

/* a game she started: progress bar inside its own card (Chris 2026-10-14: one button, % done in its bar) */
.gamecard.inprogress { border-color: #2eaa6a; }
.gamecard .pbar { position: relative; display: block; width: 100%; height: 34px; margin-top: 8px; border-radius: 17px; background: #e6f5ec; overflow: hidden; }
.gamecard .pbar i { position: absolute; left: 0; top: 0; bottom: 0; background: #2eaa6a; border-radius: 17px; }
.gamecard .pbar em { position: relative; display: block; line-height: 34px; padding-left: 14px; font-style: normal; font-weight: 700; font-size: 17px; color: #14532f;
  white-space: nowrap; }
.gamecard .pbar i { background: #8fd9ae; }

/* ---------- scratch pad (scratch.js): see-through paper over the question panel ---------- */
#qpanel { position: relative; }
#scratchBtn { position: absolute; top: 10px; right: 12px; font-size: 18px; padding: 8px 14px; z-index: 6; }
#scratch { position: absolute; inset: 0; z-index: 5; border-radius: 19px; overflow: hidden;
  background-color: rgba(255, 252, 235, .22);
  background-image: linear-gradient(rgba(107, 91, 210, .10) 1px, transparent 1px), linear-gradient(90deg, rgba(107, 91, 210, .10) 1px, transparent 1px);
  background-size: 32px 32px; }
#scratch canvas { display: block; touch-action: none; cursor: crosshair; }
#scratch .sbar { position: absolute; left: 10px; bottom: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
#scratch .sbar button { font-size: 20px; min-width: 52px; height: 48px; padding: 0 12px; }
#scratch .sbar button.on { outline: 3px solid var(--purple); }
#qpanel.scratching #scratchBtn { background: var(--purple); color: #fff; box-shadow: 0 4px 0 var(--purple-d); }

/* ---------- no overlaps (Chris 2026-10-14, "Build 9483": the number columns covered the words) ----------
   Stacked screens: each panel is as tall as its content and the game area scrolls if the screen is short,
   so nothing is ever drawn on top of anything else. Split screens: each panel scrolls inside itself. */
#game[data-layout="stack"] #stage { overflow-y: auto; align-content: start; grid-template-rows: none; grid-auto-rows: max-content; }
#game[data-layout="stack"] .panel { min-height: auto; flex-shrink: 0; }
#game[data-layout="stack"] #visual { flex: none; }
#game[data-layout="split"] .panel { overflow: auto; }
#prompt { max-width: 100%; overflow-wrap: anywhere; }
#qpanel { padding-top: 16px; }
#scratchBtn { top: 8px; }
/* counters: smaller columns so a 4-column build fits on a tablet screen without scrolling */
#game[data-layout="stack"] .pv .col { width: 160px; }
#game[data-layout="stack"] .pv .dots { min-height: 110px; }
#game[data-layout="stack"] .pv .dot { width: 30px; height: 30px; line-height: 30px; font-size: 11px; }
/* the Talk button lives in the top-right corner, so the Working out button sits on the left, after the QUESTION tag */
#scratchBtn { right: auto; left: 130px; }

/* ---------- pen anywhere (scratch.js v2): ink layer over the game area, tools in the top bar ---------- */
#scratchBtn, #scratch { display: none !important; }   /* the old in-panel pad is gone */
#stage { position: relative; }
#ink { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 20; }
#game.pen-on #stage { touch-action: none; }          /* a pen stroke draws instead of scrolling the page */
#penbar { display: flex; gap: 6px; align-items: center; }
#penbar button { font-size: 17px; padding: 8px 12px; min-height: 44px; white-space: nowrap; }
#penbar #penBtn.active { background: var(--purple); color: #fff; box-shadow: 0 4px 0 var(--purple-d); }
#penbar #penTools { display: inline-flex; gap: 6px; }
#penbar #penTools[hidden] { display: none; }
#penbar #penTools button.on { outline: 3px solid var(--purple); }
#qpanel { padding-top: 14px; }
/* pen on: no part of the game screen may scroll or pan under the pen (each panel is its own scroll area, so the
   rule must reach every element, not just the stage). Taps on buttons still work. Turn Pen off to scroll. */
#game.pen-on, #game.pen-on * { touch-action: none !important; }
html, body { overscroll-behavior: none; }
#game.pen-on, #game.pen-on #stage { overscroll-behavior: none; -webkit-overflow-scrolling: auto; }   /* 2026-10-24: no rubber-band under the pen (iPad) */

/* QA 2026-10-14: nothing tappable while an answer is being checked or the next question is coming */
#game.busy #input, #game.busy #visual { pointer-events: none; }
.keys button.wide { grid-column: 1 / -1; height: 48px; font-size: 20px; }
.tile.right, .opt.right { border-color: var(--green) !important; background: #d9f5e5 !important; }
.tile.right .n, .opt.right .n { background: var(--green); }
/* bigger tap targets: the array and coordinate pictures may use the room the panel has */
#visual svg.gridsvg { max-height: min(560px, 58vh); }
/* fit-to-screen (game.js fit()): the game area never needs scrolling on the tablet */
#game { overflow: hidden; }
/* the game screen is exactly the screen: no page padding below it (was 12 px too tall) */
#app:has(#game:not([hidden])) { padding-bottom: 0; }
#game { box-sizing: border-box; }
/* top bar keeps clear of the Talk button and the full-screen button in the top-right corner */
#top { padding-right: 290px; }

/* How I learn: "How sure were you?" faces and small thumbnails for "Which was easiest?" */
#feedback.sure { background: var(--pale, #e9e4ff); color: var(--ink); }
#feedback .faces { display: flex; gap: 14px; justify-content: center; margin-top: 8px; flex-wrap: wrap; }
#feedback .face { display: flex; flex-direction: column; align-items: center; gap: 2px; background: #fff; color: var(--ink); border: 4px solid var(--line, #ddd);
  border-radius: 18px; padding: 6px 16px; min-width: 110px; box-shadow: none; }
#feedback .face span { font-size: 52px; line-height: 1.1; } #feedback .face small { font-size: 17px; }
.tiles.thumbs .opt { min-width: 0; width: calc(50% - 14px); max-width: 300px; padding: 6px 8px; }
.tiles.thumbs .opt svg { max-height: 96px; }
.tiles.thumbs .opt div { font-size: 19px; font-weight: 700; margin-top: 4px; }
/* gentle break card after 20 minutes of steady maths (Codex/Grok review 2026-10-14) */
.breakcard { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; background: rgba(35,33,74,.35); }
.breakcard > div { background: #fff; border-radius: 24px; padding: 28px 34px; text-align: center; max-width: 560px; box-shadow: 0 10px 30px rgba(35,33,74,.3); }
.breakcard button { margin: 10px 8px 0; }
/* menu on one screen (Chris 2026-10-15): tighter cards, 3 across on the tablet; game.js fitMenu() shrinks the rest */
#menu { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
#start .gamecard { padding: 12px 16px 12px 66px; } #start .gamecard b { font-size: 24px; } #start .gamecard small { font-size: 16px; }
#start .gamecard .num { top: 14px; }
#start .gamecard.startcard { padding: 18px 24px 18px 92px; } #start .gamecard.startcard b { font-size: 34px; }
#start h1 { margin: 4px 0; } #start p.big { margin: 2px 0; }
.workex .yourq { margin-top: 8px; padding: 8px 12px; background: var(--purple, #6a4fc8); color: #fff; border-radius: 10px; font-weight: 700; font-size: 20px; }
.workex svg { max-height: 150px; }

/* Year 4 skills map (levels.py) */
.mapbar { display: flex; align-items: center; gap: 16px; width: 100%; margin: 0 0 12px; padding: 10px 16px; border: 3px solid var(--purple, #6b5bd2);
  border-radius: 18px; background: #f4f1ff; color: var(--ink); text-align: left; cursor: pointer; font: inherit; }
.mapbar .lvl { flex: none; background: #6b5bd2; color: #fff; font-weight: 800; font-size: 22px; padding: 8px 14px; border-radius: 12px; }
.mapbar .lvt { flex: 1; min-width: 0; } .mapbar .lvt b { font-size: 20px; }
.mapbar .pbar { position: relative; display: block; height: 26px; margin-top: 4px; border-radius: 13px; background: #e2dcff; overflow: hidden; }
.mapbar .pbar i { position: absolute; left: 0; top: 0; bottom: 0; background: #8f80e8; border-radius: 13px; }
.mapbar .pbar em { position: relative; display: block; line-height: 26px; padding-left: 12px; font-style: normal; font-weight: 700; font-size: 15px; }
.mapbar .go { flex: none; font-weight: 800; color: #6b5bd2; font-size: 20px; }
.levelup { margin: 0 0 12px; padding: 12px 16px; border-radius: 14px; background: #fff4d6; font-size: 20px; text-align: center; }
.gamecard .gstars { font-size: 14px !important; color: #6b5bd2; font-weight: 700; }
#map .maptitle { font-size: 24px; font-weight: 800; } #map .maphelp { margin: 8px 4px; }
.maplevel { background: #fff; border-radius: 16px; padding: 12px 16px; margin: 10px 0; border: 2px solid #e2dcff; }
.maplevel.now { border-color: #6b5bd2; box-shadow: 0 4px 0 #cfc6ff; } .maplevel.next { opacity: .75; } .maplevel.done { background: #eefaf2; border-color: #2eaa6a; }
.maplevel h3 { margin: 0 0 8px; font-size: 20px; } .maplevel h3 span { font-size: 15px; font-weight: 600; color: #6b6890; margin-left: 8px; }
.maplevel .skills { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 4px 14px; }
.maplevel .sk { font-size: 16px; } .maplevel .st { display: inline-block; width: 64px; font-size: 14px; } .maplevel .off { opacity: .2; }
#map .maptop { display: flex; align-items: center; gap: 16px; }
.keys button.bigkey { font-size: 46px; font-weight: 900; line-height: 1; }  /* the . and backspace keys: big enough to see and hit (Chris 2026-10-16) */

/* ---------- 2026-10-16 senses (reports/Visual audio tactile upgrades.md): tap to hear, mute, drag, her answer as a picture ---------- */
.promptrow { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; }
button.say { flex: none; width: 58px; height: 58px; padding: 0; border-radius: 50%; font-size: 28px; background: var(--pale); color: var(--ink);
  box-shadow: 0 3px 0 var(--line); }
button.say.on { background: #ffe680; }
#prompt .w { border-radius: 6px; transition: background .12s; }
#prompt .w.said, #board .w.said { background: #ffe680; box-shadow: 0 0 0 3px #ffe680; }
#top .mute { font-size: 24px; padding: 6px 12px; line-height: 1; }
.pvtray { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; touch-action: none; }
.pvtray .pvnote { font-size: 18px; color: #555; }
.dot.drag { width: 48px; height: 48px; border-radius: 50%; color: #fff; font-size: 13px; line-height: 48px; font-weight: bold; text-align: center;
  cursor: grab; touch-action: none; box-shadow: 0 3px 0 rgba(0,0,0,.18); }
.dot.drag.TTh { background: #7e57c2; } .dot.drag.Th { background: #e05a7a; } .dot.drag.H { background: #2e9ad6; }
.dot.drag.T { background: var(--green); } .dot.drag.O { background: var(--orange); }
.pv .dots .dot { touch-action: none; }
.dot.flying { position: fixed; z-index: 9500; pointer-events: none; opacity: .9; transform: scale(1.12); width: 48px; height: 48px; line-height: 48px;
  border-radius: 50%; color: #fff; font-size: 13px; font-weight: bold; text-align: center; }
.dot.flying.TTh { background: #7e57c2; } .dot.flying.Th { background: #e05a7a; } .dot.flying.H { background: #2e9ad6; }
.dot.flying.T { background: var(--green); } .dot.flying.O { background: var(--orange); }
svg.minebar { width: 100%; max-width: 640px; height: auto; }
.easier { display: flex; flex-direction: column; gap: 6px; align-items: center; }
.easyrow { display: flex; align-items: center; gap: 10px; } .easyrow > b { font-size: 22px; min-width: 70px; text-align: right; }
.easyrow .pv .col { width: 110px; } .easyrow .pv .dots { min-height: 40px; }
svg.easyarray { width: auto; max-width: 100%; max-height: 260px; }
.easysay { margin: 0; font-size: 19px; color: #555; }
@media (prefers-reduced-motion: reduce) { .dot.flying { transform: none; } }

/* ---------- visual polish (Chris 2026-10-23): tick + confetti, bigger short questions and tiles, coloured menu cards, star end screen ---------- */
.cele { position: fixed; inset: 0; pointer-events: none; z-index: 70; overflow: hidden; }
.cele .tick { position: absolute; left: 50%; top: 42%; width: 190px; height: 190px; margin: -95px 0 0 -95px; border-radius: 50%; background: #2eaa6a;
  color: #fff; font-size: 140px; line-height: 190px; text-align: center; box-shadow: 0 10px 40px rgba(20,100,60,.45); animation: tickpop 1s ease-out forwards; }
.cele i { position: absolute; top: 42%; width: 14px; height: 22px; border-radius: 3px; animation: confly .95s ease-out forwards; }
@keyframes tickpop { 0% { transform: scale(0); opacity: 0; } 25% { transform: scale(1.18); opacity: 1; } 45% { transform: scale(1); } 85% { opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
@keyframes confly { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 100% { transform: translate(var(--dx), calc(var(--dy) + 420px)) rotate(540deg); opacity: 0; } }
#prompt.short { font-size: 46px; font-weight: 700; }
.tile { font-size: 38px; min-width: 190px; padding: 18px 24px; }
.choices button { font-size: 38px; min-width: 190px; padding: 18px 24px; }
.opt { min-width: 150px; font-size: 32px; padding: 14px 18px; }
@media (max-width: 760px) { #prompt.short { font-size: 34px; } .tile, .choices button { font-size: 30px; min-width: 130px; padding: 14px 16px; } }
#menu .gamecard { border-left-width: 12px; }
#menu .gamecard:nth-child(6n+1) { border-color: #6b5bd2; } #menu .gamecard:nth-child(6n+2) { border-color: #2eaa6a; }
#menu .gamecard:nth-child(6n+3) { border-color: #f2a34b; } #menu .gamecard:nth-child(6n+4) { border-color: #e5568a; }
#menu .gamecard:nth-child(6n+5) { border-color: #2d8fd5; } #menu .gamecard:nth-child(6n+6) { border-color: #9a5cc9; }
#menu .gamecard:nth-child(6n+1) .num { background: #6b5bd2; } #menu .gamecard:nth-child(6n+2) .num { background: #2eaa6a; }
#menu .gamecard:nth-child(6n+3) .num { background: #f2a34b; } #menu .gamecard:nth-child(6n+4) .num { background: #e5568a; }
#menu .gamecard:nth-child(6n+5) .num { background: #2d8fd5; } #menu .gamecard:nth-child(6n+6) .num { background: #9a5cc9; }
#stars .pop { display: inline-block; font-size: 64px; animation: starpop .6s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes starpop { 0% { transform: scale(0) rotate(-40deg); opacity: 0; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
.walletend { font-size: 24px; font-weight: 700; color: #6b5bd2; background: #fff; border-radius: 999px; padding: 10px 24px; box-shadow: 0 3px 10px rgba(0,0,0,.12); }

/* menu groups (Chris 2026-10-23) */
#menu .mhead { grid-column: 1 / -1; text-align: left; margin: 6px 4px 0; font-size: 15px; color: #4a4580; }
#menu .mhead b { font-size: 17px; color: #3a2fa0; margin-right: 8px; }
#menu .mhead span { color: #6a6790; font-size: 13px; }

/* Lia's menu fills the screen (Chris 2026-10-23): wide, two columns, bigger cards */
#start.lia-wide { max-width: none; width: 100%; padding-left: 2.2vw; padding-right: 2.2vw; box-sizing: border-box; }
#menu.liamenu { display: grid; grid-template-columns: 2.1fr 1fr; gap: 18px 3vw; max-width: none; width: 100%; align-items: start; }
#menu.liamenu .grp { display: flex; flex-direction: column; gap: 10px; }
#menu.liamenu .grp.practice { grid-row: 1 / span 2; }
#menu.liamenu .grp.side { grid-column: 2; }
#menu.liamenu .cards { display: grid; gap: 14px; }
#menu.liamenu .grp.practice .cards { grid-template-columns: repeat(3, 1fr); }
#menu.liamenu .grp.side .cards { grid-template-columns: 1fr; }
#menu.liamenu .mhead { margin: 0 4px; font-size: 18px; } #menu.liamenu .mhead b { font-size: 24px; } #menu.liamenu .mhead span { display: block; font-size: 15px; }
#menu.liamenu .gamecard { padding: 18px 18px 16px 76px; min-height: 130px; }
#menu.liamenu .gamecard b { font-size: 28px; } #menu.liamenu .gamecard small { font-size: 18px; } #menu.liamenu .gamecard .gstars { font-size: 16px !important; }
#menu.liamenu .gamecard .num { top: 18px; width: 48px; height: 48px; line-height: 48px; font-size: 26px; }
#start.lia-wide .gamecard.startcard { padding: 24px 28px 24px 110px; } #start.lia-wide .gamecard.startcard b { font-size: 44px; } #start.lia-wide .gamecard.startcard small { font-size: 22px; }
#start.lia-wide .gamecard.startcard .num { width: 66px; height: 66px; line-height: 66px; font-size: 34px; top: 24px; }
@media (max-width: 900px) { #menu.liamenu { grid-template-columns: 1fr; } #menu.liamenu .grp.side { grid-column: 1; } #menu.liamenu .grp.practice { grid-row: auto; } #menu.liamenu .grp.practice .cards { grid-template-columns: repeat(2, 1fr); } }
#start.lia-wide #startCard { width: 100%; max-width: none; } #start.lia-wide .gamecard.startcard { max-width: none; }
/* squarer, bigger cards that fill the screen (Chris 2026-10-23) */
#menu.liamenu { grid-template-columns: 2.4fr 1fr; }
#menu.liamenu .grp.practice .cards { grid-template-columns: repeat(4, 1fr); }
#menu.liamenu .gamecard { aspect-ratio: 1 / 0.95; min-height: 0; padding: 16px 16px 14px; justify-content: flex-start; gap: 6px; }
#menu.liamenu .gamecard .num { position: static; margin: 0 0 4px; flex: none; }
#menu.liamenu .grp.side .gamecard { aspect-ratio: 1.7 / 1; }
#menu.liamenu .gamecard b { font-size: 30px; line-height: 1.1; } #menu.liamenu .gamecard small { font-size: 19px; }
@media (max-width: 900px) { #menu.liamenu .grp.practice .cards { grid-template-columns: repeat(2, 1fr); } #menu.liamenu .gamecard { aspect-ratio: auto; } }
/* sized to the screen height: 2 rows of practice cards, 3 cards on the right */
#menu.liamenu .grp.practice .cards { grid-auto-rows: max(170px, calc((100vh - 345px) / 2)); }
#menu.liamenu .grp.side .cards { grid-auto-rows: max(120px, calc((100vh - 345px) / 3 - 14px)); gap: 12px; }
#menu.liamenu .gamecard, #menu.liamenu .grp.side .gamecard { aspect-ratio: auto; min-height: 0; overflow: hidden; }
/* NO SCROLLING (Chris 2026-10-23): Lia's menu is exactly one screen high; everything is sized from the screen height */
body:has(#start.lia-wide:not([hidden])) { overflow: hidden; height: 100vh; }
#start.lia-wide { height: 100vh; box-sizing: border-box; overflow: hidden; display: flex; flex-direction: column; gap: 0.8vh; padding: 0.8vh 2vw 0.8vh; }
#start.lia-wide h1 { font-size: clamp(18px, 4.2vh, 40px); margin: 0; }
#start.lia-wide p.big { font-size: clamp(13px, 2.6vh, 24px); margin: 0; }
#start.lia-wide #mapBar { transform: scale(.85); transform-origin: center top; margin: -0.6vh 0 -1.2vh; }
#start.lia-wide #startCard { flex: none; }
#start.lia-wide .gamecard.startcard { padding: 1.4vh 24px 1.4vh 9vh; }
#start.lia-wide .gamecard.startcard b { font-size: clamp(22px, 5vh, 46px); } #start.lia-wide .gamecard.startcard small { font-size: clamp(12px, 2.3vh, 22px); }
#start.lia-wide .gamecard.startcard .num { width: 6vh; height: 6vh; line-height: 6vh; font-size: 3.4vh; top: 50%; transform: translateY(-50%); }
#start.lia-wide .moretitle { display: none; }
#menu.liamenu { flex: 1; min-height: 0; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); gap: 1vh 3vw; align-items: stretch; }
#menu.liamenu .grp { min-height: 0; gap: 0.6vh; }
#menu.liamenu .grp.practice { grid-row: 1 / span 2; }
#menu.liamenu .grp.side { grid-column: 2; }
#menu.liamenu .grp.side:nth-of-type(2) { grid-row: 1; } #menu.liamenu .grp.side:nth-of-type(3) { grid-row: 2; }
#menu.liamenu .cards { flex: 1; min-height: 0; gap: 1.2vh 1vw; }
#menu.liamenu .grp.practice .cards { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, minmax(0, 1fr)); grid-auto-rows: unset; }
#menu.liamenu .grp.side .cards { grid-template-columns: 1fr; grid-auto-rows: unset; grid-template-rows: none; }
#menu.liamenu .grp.side:nth-of-type(3) .cards { grid-template-columns: 1fr 1fr; }
#menu.liamenu .mhead { font-size: clamp(11px, 1.9vh, 18px); } #menu.liamenu .mhead b { font-size: clamp(15px, 2.9vh, 26px); } #menu.liamenu .mhead span { font-size: clamp(10px, 1.6vh, 15px); }
@media (max-height: 640px) { #menu.liamenu .mhead span { display: none; } }
#menu.liamenu .gamecard { padding: 1.2vh 0.9vw 1vh; gap: 0.4vh; aspect-ratio: auto; overflow: hidden; justify-content: flex-start; min-width: 0; }
#menu.liamenu .gamecard .num { width: 5.2vh; height: 5.2vh; line-height: 5.2vh; font-size: 2.8vh; margin: 0 0 0.3vh; }
#menu.liamenu .gamecard b { font-size: clamp(15px, 3.1vh, 30px); line-height: 1.1; }
#menu.liamenu .gamecard small { font-size: clamp(11px, 2vh, 19px); line-height: 1.2; }
#menu.liamenu .gamecard .gstars { font-size: clamp(10px, 1.8vh, 16px) !important; }
#menu.liamenu .gamecard .pbar { height: 3.4vh; margin-top: 0.4vh; } #menu.liamenu .gamecard .pbar em { line-height: 3.4vh; font-size: clamp(10px, 1.8vh, 16px); }
#start.lia-wide #walletLine { flex: none; margin: 0; font-size: clamp(13px, 2.4vh, 22px); }
#start.lia-wide #sidelinks { flex: none; margin: 0; }
#start.lia-wide { padding-left: 140px; }
#start.lia-wide .gamecard.startcard .num { top: 50% !important; transform: none !important; margin-top: -3vh; }
@media (min-width: 1100px) { body.sidelinks #sidelinks { left: 10px !important; } body.sidelinks #sidelinks a { width: 112px; padding: 10px 6px !important; font-size: 14px !important; box-sizing: border-box; } }
#menu.liamenu { grid-template-rows: minmax(0, .8fr) minmax(0, 1.2fr); }

/* Chris 2026-10-25: "Talk to me" only during a lesson */
body:not(.inlesson) #liaTalk { display: none !important; }

/* Grok Bot 2026-10-25 (full screen, Chris: "make sure they start full screen"): the child pages use the whole window width
   on big screens too (was a 1400px centre column; the tablet is narrower so it looks the same there). Both girls. */
#app { max-width: none; }
#menu, #startCard { max-width: none; }

/* Grok Bot 2026-10-25 (Chris): the next tile she should do pulses a little, shimmers and wears 3 stars */
.gamecard.nextup { position: relative; overflow: hidden; z-index: 1; animation: nextPulse 2s ease-in-out infinite; will-change: transform;
  border-color: #f5b301 !important; box-shadow: 0 0 0 3px #ffd84d, 0 6px 18px rgba(245, 179, 1, .45); }
.gamecard.startcard.nextup { animation-name: nextPulseWide; }
.gamecard.nextup::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; pointer-events: none;
  background: linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 100%);
  transform: translateX(-120%); animation: nextShimmer 2s ease-in-out infinite; will-change: transform; }
.gamecard .next3 { position: absolute; top: 6px; right: 8px; font-size: 22px; line-height: 1; letter-spacing: -2px; pointer-events: none;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
@keyframes nextPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } }
@keyframes nextPulseWide { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } }
@keyframes nextShimmer { 0%, 35% { transform: translateX(-120%); } 85%, 100% { transform: translateX(260%); } }
/* a check that is due: every other tile greyed out and not tappable until it is done */
.gamecard.lockout { filter: grayscale(1); opacity: .38; pointer-events: none; cursor: default; box-shadow: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .gamecard.nextup { animation: none; } .gamecard.nextup::after { display: none; }
}
/* Grok Bot 2026-10-25: level map - one winding path of islands (levels) with stepping stones (skills), tablet portrait first */
#map { max-width: none; }
#map .maptop { position: sticky; top: 0; z-index: 3; background: inherit; padding: 6px 0; }
.lpath { position: relative; max-width: 900px; margin: 0 auto; padding: 8px 0 40px; }
.lroad { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; overflow: visible; }
.lroad .lroadbg { fill: none; stroke: #d9cfa8; stroke-width: 34; stroke-linecap: round; }
.lroad .lroadfg { fill: none; stroke: #fff; stroke-width: 4; stroke-dasharray: 2 16; stroke-linecap: round; }
.lisle { position: relative; z-index: 1; display: flex; align-items: flex-start; gap: 12px; width: 84%; margin: 0 0 34px; }
.lisle:nth-child(even) { margin-left: 16%; flex-direction: row-reverse; }
.lisle .lnode { flex: none; width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 30px; font-weight: 900; background: #c9c2f2; color: #fff; border: 4px solid #fff; box-shadow: 0 4px 0 rgba(0,0,0,.15); }
.lisle .lcard { flex: 1; min-width: 0; background: #fff; border-radius: 22px; padding: 12px 14px; border: 3px solid #e2dcff; box-shadow: 0 6px 0 #e9e4ff; }
.lisle h3 { margin: 0 0 8px; font-size: 21px; } .lisle h3 span { display: block; font-size: 15px; font-weight: 600; color: #6b6890; margin-top: 2px; }
.lisle.flag .lnode { background: #2eaa6a; } .lisle.flag .lcard { background: #effaf3; border-color: #9ad9b4; box-shadow: none; }
.lisle.done .lnode { background: #f2b705; } .lisle.done .lcard { background: #fff8db; border-color: #f2c94c; box-shadow: 0 6px 0 #f6dc8c; }
.lisle.now .lnode { background: #6b5bd2; box-shadow: 0 0 0 6px rgba(107,91,210,.25), 0 0 26px 6px rgba(107,91,210,.55); }
.lisle.now .lcard { border-color: #6b5bd2; box-shadow: 0 0 0 4px rgba(107,91,210,.18), 0 0 30px rgba(107,91,210,.35); }
.lisle.next { opacity: .55; } .lisle.next .lnode { background: #b8b3cf; }
.lme { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; padding: 8px 12px; border-radius: 16px; background: #f0edff; }
.lme .lav { font-size: 44px; line-height: 1; } .lme small { display: block; color: #6b6890; } .lme b { font-size: 18px; }
.lnote { font-size: 14px; color: #6b6890; margin: 0 0 8px; }
.stones { display: flex; flex-wrap: wrap; gap: 8px; }
.stone { min-height: 56px; min-width: 120px; flex: 1 1 140px; max-width: 220px; display: flex; flex-direction: column; justify-content: center;
  gap: 2px; padding: 6px 10px; border-radius: 999px; border: 2px solid #d9d3f7; background: #f7f5ff; color: #2d2a4a; text-align: center; cursor: pointer; }
.stone .snm { font-size: 14px; font-weight: 700; line-height: 1.15; } .stone .sst { font-size: 14px; letter-spacing: -1px; }
.stone .off { opacity: .2; } .stone.s2, .stone.s3 { background: #fff4c7; border-color: #f2c94c; } .stone.s0 { background: #fbfbfd; }
.stone:active { transform: scale(.97); }
.stonesheet { position: fixed; inset: 0; z-index: 50; background: rgba(20,16,40,.45); display: flex; align-items: flex-end; justify-content: center; }
.stonesheet[hidden] { display: none; }
.sscard { width: min(640px, 100%); background: #fff; border-radius: 26px 26px 0 0; padding: 18px 22px 26px; text-align: center; }
.sscard .ssst { font-size: 40px; } .sscard .ssst .off { opacity: .2; } .sscard h3 { margin: 6px 0; font-size: 24px; } .sscard p { font-size: 18px; }
.sscard .ssok { min-width: 160px; min-height: 56px; font-size: 20px; }
@media (orientation: portrait) { .lisle { width: 90%; } .lisle:nth-child(even) { margin-left: 10%; } }
@media (prefers-reduced-motion: reduce) { .stone:active { transform: none; } }
#map .maptop{background:#fff8ef}  /* Grok Bot 2026-10-25: solid behind the sticky map title */