/* Layout: one full-screen floating-island diorama; chunky toy-like controls float over it, sheets rise from the bottom. */
:root{
  --sky-top:#7cc8ff; --sky-bot:#e3f6ff; --ink:#27304f; --ink-soft:#5a6485; --paper:#fffaf0; --paper-2:#f3ebd9;
  --sun:#ffc531; --sun-shade:#d99a00; --berry:#ff5c8a; --berry-shade:#d43d69; --leaf:#3fae5a; --leaf-shade:#2c8443;
  --pond:#3aa6e6; --pond-shade:#2382bd; --line:#e2d7bf; --lock:#a9a391;
  --display:"Baloo 2","Trebuchet MS","Segoe UI",system-ui,sans-serif; --body:"Nunito","Segoe UI",system-ui,sans-serif;
  color-scheme:light;
}
[hidden]{display:none!important}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--sky-bot);color:var(--ink);font:700 16px/1.35 var(--body);overflow:hidden;-webkit-tap-highlight-color:transparent}
#app{position:relative;height:100%;overflow:hidden;background:radial-gradient(circle at 82% 12%,#fff7c9 0,#fff7c900 22%),linear-gradient(var(--sky-top),var(--sky-bot) 70%)}
#c{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;outline:none}
button{font:inherit;color:inherit;cursor:pointer;border:0}
button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
h1,h2,h3{font-family:var(--display);margin:0;line-height:1.1;text-wrap:balance}

.cd{display:inline-block;width:.95em;height:.95em;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff3b0,var(--sun) 55%,var(--sun-shade));box-shadow:inset 0 0 0 2px #e0a800;vertical-align:-.12em;margin-right:.2em}
.pill{display:flex;align-items:center;gap:8px;background:var(--paper);border-radius:999px;padding:6px 14px;box-shadow:0 3px 0 #0002;font-family:var(--display);font-size:18px;font-variant-numeric:tabular-nums}
.round{width:44px;height:44px;border-radius:50%;background:var(--paper);box-shadow:0 3px 0 #0002;font-size:20px;display:grid;place-items:center;flex:none}
.btn{background:var(--sun);border-radius:16px;padding:10px 18px;font-family:var(--display);font-size:18px;box-shadow:0 5px 0 var(--sun-shade);transition:transform .06s,box-shadow .06s}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--sun-shade)}
.btn.pink{background:var(--berry);color:#fff;box-shadow:0 5px 0 var(--berry-shade)}.btn.pink:active{box-shadow:0 1px 0 var(--berry-shade)}
.btn.green{background:var(--leaf);color:#fff;box-shadow:0 5px 0 var(--leaf-shade)}.btn.green:active{box-shadow:0 1px 0 var(--leaf-shade)}
.btn.blue{background:var(--pond);color:#fff;box-shadow:0 5px 0 var(--pond-shade)}.btn.blue:active{box-shadow:0 1px 0 var(--pond-shade)}
.btn.plain{background:var(--paper-2);box-shadow:0 5px 0 var(--line)}.btn.plain:active{box-shadow:0 1px 0 var(--line)}
.btn:disabled{background:#e6e0d0;color:#8d8777;box-shadow:0 5px 0 #cfc8b6;cursor:not-allowed}
.btn.big{font-size:22px;padding:14px 22px;width:100%}
.btn small{display:block;font:800 12px var(--body);opacity:.85}

#hud{position:absolute;top:0;left:0;right:0;display:flex;gap:8px;align-items:center;padding:10px 16px;padding-top:calc(10px + env(safe-area-inset-top,0px));pointer-events:none}
#hud>*{pointer-events:auto}
#hud .lvl{flex:0 1 auto;min-width:0}
#hud .lvl .star{width:30px;height:30px;border-radius:50%;background:var(--berry);color:#fff;display:grid;place-items:center;font-size:16px;flex:none}
.bar{display:block;width:76px;height:10px;border-radius:9px;background:var(--paper-2);overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--berry);border-radius:9px;transition:width .3s}
#hud .sp{flex:1}
#areaNav{position:absolute;left:0;right:0;top:calc(66px + env(safe-area-inset-top,0px));display:flex;justify-content:center;gap:8px;align-items:center;pointer-events:none}
#areaNav>*{pointer-events:auto}
/* the island arrows: 50 px, 1.25x the 40 they were (owner, 2026-10-22: "a slightly larger button for changing land"), at every layout */
#areaNav button{width:50px;height:50px;font-size:30px;line-height:1}
#areaName{background:#27304fcc;color:#fff;border-radius:999px;padding:6px 16px;font-family:var(--display);font-size:17px;min-width:150px;text-align:center}
#lockCard{position:absolute;left:16px;right:16px;bottom:calc(104px + env(safe-area-inset-bottom,0px));margin:auto;max-width:420px;background:var(--paper);border-radius:22px;padding:14px 16px;box-shadow:0 6px 0 #0002;display:flex;gap:12px;align-items:center}
#lockCard p{margin:2px 0 0;color:var(--ink-soft);font-size:14px}
#lockCard div{flex:1;min-width:0}
#bar{position:absolute;left:0;right:0;bottom:0;display:flex;gap:10px;justify-content:center;align-items:flex-end;padding:12px 16px;padding-bottom:calc(14px + env(safe-area-inset-bottom,0px));pointer-events:none}
#bar>*{pointer-events:auto}
/* the farm tour line (seven islands C4): the toast's look, parked above the bar (tutShow sets bottom from #bar's top edge while #bar is a
   bottom row; this is the fallback; beside the side column from 700 px see the media block below); .tutPulse marks the button the step asks for. It never covers what a child must tap (correctness verification 2026-10-22:
   at z-index 29 it sat over the quiz's answers and the critter sheet on a phone): tutShow hides it while a veil, the lock card, the place
   bar, the joystick or the house is up, and z-index 19 keeps it under every .veil (20) even before tutShow runs. Skip is ink on paper
   (it inherited the bar's white: 1.2:1). Owner, 2026-10-23: the bar spans the width between the side gutters, as the toast does (left:50%
   capped it at half the screen, so at 360 px a line ran to four lines and "Skip tour" spilled out of its button), and Skip is a paper pill
   like the HUD's buttons (the island arrows' font, radius and shadow) that never shrinks under its label */
#tutBar{position:absolute;left:16px;right:16px;margin-inline:auto;width:fit-content;bottom:calc(104px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:10px;background:#27304fee;color:#fff;border-radius:16px;padding:6px 8px 6px 16px;max-width:520px;font-size:15px;z-index:19;animation:pop2 .25s}
#tutBar #tutSkip{color:var(--ink);background:var(--paper);flex:none;min-height:44px;min-width:44px;padding:0 16px;border-radius:999px;box-shadow:0 3px 0 #0002;font:700 15px/1 var(--body);white-space:nowrap}
@media (max-width:340px){#tutBar{font-size:14px;padding-left:12px}#tutBar #tutSkip{font-size:14px;padding:0 12px}}
/* a phone on its side (568x320) has no room for the line between the island arrows and a bottom #bar: there it covered the arrows' lower
   8 px with Skip under the right arrow (verification F1, 2026-10-22). tutShow then adds .side: the words over Skip, beside the arrows in
   the top right corner, its width the room right of them (set by tutShow) */
#tutBar.side{left:auto;right:calc(16px + env(safe-area-inset-right,0px));top:calc(66px + env(safe-area-inset-top,0px));bottom:auto;transform:none;animation:pop2 .25s;flex-direction:column;align-items:stretch;gap:4px;padding:6px 8px;font-size:13px;line-height:1.2;text-align:center}
.tutPulse{animation:tutPulse 1.1s ease-in-out infinite}@keyframes tutPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
#bar .side{flex:1 1 0;max-width:130px;position:relative}
#mathBtn{flex:1.6 1 0;max-width:230px;font-size:28px;padding:16px 10px}
.badge{position:absolute;top:-8px;right:-6px;min-width:24px;height:24px;border-radius:12px;background:var(--berry);color:#fff;font:800 13px/24px var(--body);padding:0 6px;text-align:center}
/* a toast is words only (toast() sets textContent), so it lets taps through: it sat over the subject buttons and swallowed a child's
   tap for its 2.6 s (found by tutorial-flow.js's hit test, 2026-10-22) */
#toast{position:absolute;left:50%;top:calc(118px + env(safe-area-inset-top,0px));transform:translateX(-50%);background:#27304fee;color:#fff;border-radius:16px;padding:10px 16px;max-width:min(88%,460px);text-align:center;font-size:15px;z-index:30;animation:pop .25s;pointer-events:none}
.fly{position:absolute;right:70px;top:54px;font:800 20px var(--display);color:#b77c00;pointer-events:none;animation:fly 1s forwards;z-index:25}
@keyframes fly{from{opacity:1;transform:translateY(24px)}to{opacity:0;transform:translateY(-14px)}}
@keyframes pop{from{transform:translateX(-50%) scale(.8);opacity:0}to{transform:translateX(-50%) scale(1);opacity:1}}

.veil{position:absolute;inset:0;background:#27304f66;display:flex;align-items:flex-end;justify-content:center;z-index:20;padding:0 0 env(safe-area-inset-bottom,0px)}
.veil.clear{background:none;pointer-events:none}.veil.clear .card{pointer-events:auto}
.card{background:var(--paper);width:100%;max-width:560px;max-height:92%;overflow:auto;border-radius:28px 28px 0 0;padding:16px 16px 20px;box-shadow:0 -6px 0 #0001;animation:rise .22s}
@keyframes rise{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
@media (min-width:640px) and (min-height:620px){.veil{align-items:center}.card{border-radius:28px}}
.top{display:flex;gap:8px;align-items:center;margin-bottom:10px}
.top h2{flex:1;min-width:0;font-size:24px}
#gTitle{flex:0 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top .round{box-shadow:none;background:var(--paper-2)}
.chip{background:var(--paper-2);border-radius:999px;padding:4px 12px;font-size:13px;white-space:nowrap}
.chip.hot{background:#ffe1ea;color:var(--berry-shade)}
.muted{color:var(--ink-soft);font-size:14px;margin:6px 0}

#start{background:linear-gradient(#7cc8ffee,#e3f6ffee);align-items:center;padding:16px}
.field{display:grid;gap:4px;text-align:left;margin-top:12px}
.field label{font-size:14px;color:var(--ink-soft)}
.field input,.field select,.rename{font:800 18px var(--body);color:var(--ink);background:#fff;border:3px solid var(--line);border-radius:14px;padding:10px 12px;width:100%;min-width:0}
.row{display:flex;gap:10px;flex-wrap:wrap}.row>*{flex:1 1 120px;min-width:0}
.picks{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:14px 0}
.picks button{background:#fff;border:3px solid var(--line);border-radius:18px;padding:10px;font-family:var(--display);font-size:18px}
.picks button[aria-pressed=true]{border-color:var(--berry);background:#fff0f4}
.picks .em{display:block;font-size:44px;line-height:1.1}

.qcard h2{font-size:clamp(24px,6.4vw,38px);text-align:center;margin:10px 0 14px;white-space:pre-line}
.qcard h2.long{font-size:clamp(18px,4.6vw,24px);font-family:var(--body);font-weight:800;line-height:1.3}
.qvisual{text-align:center;font-size:clamp(24px,7vw,36px);line-height:1.25;white-space:pre-line;background:#fff;border-radius:18px;padding:8px;margin-top:6px;word-break:break-word}
.stars{display:flex;gap:5px;align-items:center;font-size:13px;color:var(--ink-soft)}
.stars i{width:14px;height:14px;border-radius:50%;background:var(--paper-2);box-shadow:inset 0 0 0 2px var(--line)}
.stars i.on{background:var(--sun);box-shadow:inset 0 0 0 2px var(--sun-shade)}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.choices.long{grid-template-columns:1fr}
.choice{background:#fff;border:3px solid var(--line);border-radius:18px;padding:14px 8px;font-family:var(--display);font-size:clamp(20px,5.5vw,28px);box-shadow:0 5px 0 var(--line);min-height:64px;font-variant-numeric:tabular-nums}
.choice:active{transform:translateY(3px);box-shadow:0 2px 0 var(--line)}
.choice.right{background:#dff5e3;border-color:var(--leaf);box-shadow:0 5px 0 var(--leaf)}
.choice.wrong{background:#ffe1ea;border-color:var(--berry);box-shadow:0 5px 0 var(--berry)}
.choice:disabled{cursor:default}
.feedback{margin-top:12px;border-radius:16px;padding:10px 14px;text-align:center;font-size:16px}
.feedback.yes{background:#dff5e3;color:#1e6a33}.feedback.no{background:#ffe1ea;color:#a52650}
#qPromo{margin-top:12px;background:#fff3c4;border-radius:18px;padding:12px;text-align:center}
#qPromo .row{margin-top:10px}
#qNext{margin-top:12px}

.meters{display:grid;gap:8px;margin:10px 0}
.meter{display:grid;grid-template-columns:64px 1fr 44px;gap:8px;align-items:center;font-size:14px}
.meter .bar{width:100%;height:14px}.meter .bar i.f{background:#ff9a3d}.meter .bar i.w{background:var(--pond)}.meter .bar i.l{background:var(--berry)}
.meter span:last-child{text-align:right;font-variant-numeric:tabular-nums}
.acts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:12px 0}
.acts .btn{padding:10px 6px;font-size:17px}
.slot{margin-top:10px}.slot h3{font-size:15px;margin-bottom:6px;color:var(--ink-soft);font-family:var(--body)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips button{background:#fff;border:3px solid var(--line);border-radius:999px;padding:6px 12px;font-size:14px}
.chips button[aria-pressed=true]{background:#fff0f4;border-color:var(--berry)}
.tabs{display:flex;gap:6px;margin-bottom:12px;overflow-x:auto}
.tabs button{flex:1 0 auto;background:var(--paper-2);border-radius:14px;padding:8px 12px;font-family:var(--display);font-size:16px}
.tabs button[aria-selected=true]{background:var(--ink);color:#fff}
.goods{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.good{background:#fff;border:3px solid var(--line);border-radius:18px;padding:10px;display:grid;gap:6px;text-align:center;align-content:start}
.good .em{font-size:36px;line-height:1.1}
.good b{font-family:var(--display);font-size:16px;line-height:1.15}
.good .btn{font-size:15px;padding:7px 8px;border-radius:12px}
.good.locked{background:var(--paper-2);color:var(--lock)}.good.locked .em{filter:grayscale(1);opacity:.6}
.good .note{font-size:12px;color:var(--ink-soft);min-height:1.3em}
.stat{display:flex;justify-content:space-between;padding:6px 0;border-bottom:2px dashed var(--line);font-size:15px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (max-width:470px){#gradeChip{display:none}}
.qcard .top{flex-wrap:wrap}#qGrade{min-width:0;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto}
.veil.clear{align-items:flex-end}.veil.clear .card{max-height:46%;border-radius:28px 28px 0 0}
.good .btn{min-height:42px}.tabs button{padding:11px 12px}.chips button{padding:10px 14px}
.conf{position:absolute;top:-12px;width:10px;height:16px;border-radius:3px;z-index:40;pointer-events:none;animation:confall 2s linear forwards}
@keyframes confall{to{top:105%;transform:rotate(540deg) translateX(40px)}}
#camBtn[aria-pressed=true]{background:var(--ink);color:#fff}
#wxChip{background:var(--paper)}
@media (max-width:560px){#wxChip{font-size:0;padding:4px 8px}#wxChip::first-letter{font-size:16px}}
#outBtn{position:absolute;left:16px;top:calc(112px + env(safe-area-inset-top,0px));font-size:15px;padding:8px 14px}
#joy{position:absolute;left:18px;bottom:calc(112px + env(safe-area-inset-bottom,0px));width:112px;height:112px;border-radius:50%;background:#fffaf099;box-shadow:inset 0 0 0 3px #27304f33;touch-action:none;display:grid;place-items:center}
#joyK{width:48px;height:48px;border-radius:50%;background:var(--ink);opacity:.75;pointer-events:none}
#placeBar{position:absolute;left:16px;right:16px;bottom:calc(14px + env(safe-area-inset-bottom,0px));margin:auto;max-width:460px;background:var(--paper);border-radius:22px;padding:12px 14px;box-shadow:0 6px 0 #0002}
#placeBar p{margin:0 0 10px;text-align:center;font-size:15px}
.pickf{background:#fff;border:3px solid var(--line);border-radius:14px;padding:10px;font:800 17px var(--body);color:var(--ink)}.pickf[aria-pressed=true]{border-color:var(--berry);background:#fff0f4}
.swatches{display:flex;gap:10px;flex-wrap:wrap}.swatches button{width:44px;height:44px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 2px var(--line)}.swatches button[aria-pressed=true]{box-shadow:0 0 0 4px var(--ink)}
.roomrow{display:grid;gap:3px;padding:8px 0;border-bottom:2px dashed var(--line);font-size:14px}.roomrow span{color:var(--ink-soft)}.roomrow .bar{width:100%}
.lookout{display:block;width:100%;height:auto;border-radius:14px}
.field textarea{font:600 12px ui-monospace,Menlo,monospace;color:var(--ink);background:#fff;border:3px solid var(--line);border-radius:14px;padding:8px;width:100%;resize:vertical;word-break:break-all}
#app::before{content:"";position:absolute;inset:0;background:#8fa3b8;opacity:0;transition:opacity 3s,background 3s;pointer-events:none}
#app[data-wx=cloudy]::before{opacity:.45;background:#aab6c2}#app[data-wx=rain]::before{opacity:.75;background:#75879a}#app[data-wx=snow]::before{opacity:.6;background:#dfe7ee}#app[data-wx=wind]::before{opacity:.12}
.tabs button{white-space:nowrap}
#hud .lvl{flex:none}#hud .lvl .bar{min-width:44px}@media (max-width:400px){#hud{gap:5px;padding-inline:10px}#hud .lvl .bar{width:44px}.pill{padding:6px 10px;font-size:16px}.round{width:40px;height:40px}}
.tabs{flex-wrap:wrap;overflow:visible}.tabs button{flex:1 1 auto}
#toast{left:16px;right:16px;margin-inline:auto;width:fit-content;transform:none;animation:pop2 .25s}@keyframes pop2{from{transform:scale(.85);opacity:0}to{transform:none;opacity:1}}
#outBtn{left:auto;right:16px;top:auto;bottom:calc(108px + env(safe-area-inset-bottom,0px));min-height:44px}
.qcard .top{flex-wrap:nowrap}

.garea{position:relative;height:120px;border-radius:18px;overflow:hidden;margin:10px 0 14px;touch-action:none;user-select:none;-webkit-user-select:none}
.garea.fish{background:linear-gradient(#9bdcf7,#3f9bd1)}
.garea.apple{background:linear-gradient(#cfeeff 0,#e9f9d8 78%,#9bd36a 78%);height:min(300px,42vh);cursor:grab}
.net{position:absolute;top:10px;bottom:10px;width:24%;border-radius:14px;background:#7be08a99;box-shadow:inset 0 0 0 4px #2f9e4f}
.fishy{position:absolute;top:50%;left:4%;font-size:42px;line-height:1;transform:translate(-50%,-50%)}
.fall{position:absolute;font-size:32px;line-height:1;transform:translate(-50%,-50%);pointer-events:none}
.bask{position:absolute;bottom:0;left:50%;font-size:50px;line-height:1;transform:translateX(-50%);pointer-events:none}
.prod{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:10px 0;padding:8px 12px;border-radius:16px;background:var(--paper-2);font-weight:800}

.garea.pop{height:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:10px;background:linear-gradient(#b98a5a,#9a6f44)}
.garea.pop.gems{background:linear-gradient(#6b6470,#3f3a46)}
.plot{aspect-ratio:1.25;border:0;border-radius:14px;background:#0000002e;font-size:clamp(26px,7vw,40px);line-height:1;display:grid;place-items:center;padding:0;cursor:pointer;touch-action:manipulation}
.plot.on{background:#ffffff38;animation:pl .18s ease-out}@keyframes pl{from{transform:scale(.5)}to{transform:none}}
.garea.chase{height:min(300px,42vh);background:linear-gradient(#bfe6a0,#8fcf6a)}
.garea.chase.stars{background:linear-gradient(#2a2f5c,#5a3f8a)}.garea.chase.barn{background:repeating-linear-gradient(90deg,#c79a63 0 46px,#b98a55 46px 50px)}
.tgt{position:absolute;transform:translate(-50%,-50%);width:54px;height:54px;border:0;background:none;font-size:36px;line-height:1;padding:0;cursor:pointer;touch-action:manipulation}
@media (prefers-reduced-motion:reduce){.plot.on{animation:none}}

/* hosted page: keep controls clear of the host's badge along the bottom edge */
body.web{--lift:58px}
body.web #bar{padding-bottom:calc(14px + var(--lift) + env(safe-area-inset-bottom,0px))}
body.web #lockCard{bottom:calc(104px + var(--lift) + env(safe-area-inset-bottom,0px))}
body.web #joy{bottom:calc(112px + var(--lift) + env(safe-area-inset-bottom,0px))}
body.web #placeBar{bottom:calc(14px + var(--lift) + env(safe-area-inset-bottom,0px))}
body.web #outBtn{bottom:calc(108px + var(--lift) + env(safe-area-inset-bottom,0px))}
body.web .veil{padding-bottom:calc(var(--lift) + env(safe-area-inset-bottom,0px))}
@media (min-width:700px){
 body.web #bar{left:0;right:auto;top:0;bottom:0;width:168px;flex-direction:column;justify-content:center;align-items:stretch;padding:12px 0 12px calc(16px + env(safe-area-inset-left,0px))}
 body.web #bar .side,body.web #bar #mathBtn{flex:none;max-width:none}body.web #bar #mathBtn{order:-1}
 body.web #joy{left:auto;right:24px;bottom:calc(84px + env(safe-area-inset-bottom,0px))}
 body.web #lockCard{bottom:calc(22px + var(--lift) + env(safe-area-inset-bottom,0px))}
 body.web #outBtn{bottom:calc(24px + var(--lift) + env(safe-area-inset-bottom,0px))}
 body.web .veil{padding-bottom:0}body.web .veil.clear{padding-bottom:var(--lift)}
 /* the tour line beside the 168 px column, never under it, at the lock card's height (it hides while the card is up) */
 body.web #tutBar{left:184px;right:16px;margin-inline:auto;width:fit-content;transform:none;animation:pop2 .25s;bottom:calc(22px + var(--lift) + env(safe-area-inset-bottom,0px))}
}
/* top bar must never push the view and settings buttons off a narrow screen */
#hud .lvl{flex:0 1 auto;min-width:0}#hud .lvl .bar{flex:1 1 44px;min-width:24px}#hud .sp{flex:1 1 0;min-width:0}#hud>.pill:not(.lvl),#hud>.round{flex:none}
@media (max-width:640px){#gradeChip{display:none}}
@media (max-width:520px){#hud{gap:6px;padding-inline:10px}#hud .lvl .bar{width:44px}.pill{padding:6px 10px;font-size:16px}#hud .round{width:40px;height:40px}}
@media (max-width:360px){#hud .lvl .bar{display:none}#wxChip{display:none}}

/* hints, worked answers, number pad */
.chip.new{background:#e3f1ff;color:#1f5f93}
.tipbox{background:#fff3c4;border-radius:16px;padding:10px 14px;margin:0 0 12px;font-size:15px;line-height:1.35}
.how{margin-top:8px;padding:8px 12px;border-radius:12px;background:#ffffffb8;color:var(--ink);font-size:15px;line-height:1.35;text-align:left}
.entry{display:flex;justify-content:center;align-items:center;gap:8px;font-family:var(--display);font-size:30px;margin-bottom:10px}
#padOut{min-width:150px;min-height:58px;padding:6px 16px;border-radius:16px;border:3px solid var(--pond);background:#fff;text-align:center;font-variant-numeric:tabular-nums}
#padOut.empty{color:var(--lock)}#padOut.right{border-color:var(--leaf);background:#dff5e3}
.keys{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:340px;margin:0 auto 10px}
.key{background:#fff;border:3px solid var(--line);border-radius:14px;box-shadow:0 4px 0 var(--line);font-family:var(--display);font-size:24px;min-height:50px;touch-action:manipulation}
.key:active{transform:translateY(3px);box-shadow:0 1px 0 var(--line)}
@media (max-height:640px){.key{min-height:42px;font-size:21px}#padOut{min-height:48px;font-size:26px}}
/* progress report */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;margin:6px 0 4px}
.tile{background:#fff;border:3px solid var(--line);border-radius:16px;padding:10px 8px;text-align:center}
.tile b{display:block;font-family:var(--display);font-size:26px;line-height:1.1}.tile span{font-size:12px;color:var(--ink-soft)}
.heat{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:6px}
.hk{border-radius:12px;padding:7px 9px;background:var(--paper-2);border-left:8px solid var(--lock)}
.hk b{display:block;font-size:13px;line-height:1.2}.hk small{font-size:12px;color:var(--ink-soft)}
.hk.hi{background:#dff5e3;border-left-color:var(--leaf)}.hk.mid{background:#fff3c4;border-left-color:var(--sun-shade)}.hk.low{background:#ffe1ea;border-left-color:var(--berry)}.hk.none{opacity:.7}
table.rep{width:100%;border-collapse:collapse;font-size:14px}table.rep th,table.rep td{text-align:left;padding:6px 4px;border-bottom:2px dashed var(--line)}table.rep th{font-size:12px;color:var(--ink-soft)}
table.rep td:nth-child(n+2),table.rep th:nth-child(n+2){text-align:right;font-variant-numeric:tabular-nums}

/* daily quests */
.quest{display:flex;gap:12px;align-items:center;background:#fff;border:3px solid var(--line);border-radius:16px;padding:10px 12px;margin:8px 0}
.quest .qcheck{width:34px;height:34px;border-radius:50%;border:3px solid var(--line);display:grid;place-items:center;font-weight:800;flex:none;color:#fff}
.quest.done{border-color:var(--leaf);background:#dff5e3}.quest.done .qcheck{border-color:var(--leaf);background:var(--leaf)}
.quest b{display:block;font-size:15px;line-height:1.2}.quest small{display:block;font-size:12px;color:var(--ink-soft);margin-top:2px}

/* subjects, passages */
.passage{background:#fff;border-radius:16px;padding:10px 14px;margin:0 0 10px;font:600 15px/1.45 var(--body);max-height:34vh;overflow:auto;white-space:pre-line;text-align:left}
.qvisual.words{font-size:clamp(18px,4.6vw,26px);font-family:var(--display)}
.subjs{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin:10px 0}
.subj{background:#fff;border:3px solid var(--line);border-radius:18px;padding:10px 8px;display:grid;gap:2px;justify-items:center;text-align:center}
.subj .em{font-size:34px;line-height:1.1}.subj b{font-family:var(--display);font-size:16px;line-height:1.15}.subj small{font-size:12px;color:var(--ink-soft)}
.subj[aria-pressed=true]{border-color:var(--berry);background:#fff0f4}
/* the Typing tile (Key Builders) 1.25x a subject tile's height and words, in its place at the end (owner, 2026-10-22: "a slightly
   larger button for ... typing game"); a subject tile in its row grows to the same height with its words centred */
.subj{align-content:center}
.subj[data-act=typing]{min-height:128px;padding:12px 10px}
.subj[data-act=typing] .em{font-size:42px}.subj[data-act=typing] b{font-size:20px}.subj[data-act=typing] small{font-size:15px}
.lvls{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.lvl{display:flex;align-items:center;justify-content:space-between;gap:8px;background:#fff;border:3px solid var(--line);border-radius:14px;padding:6px 10px;font-size:14px}
.lvl select{font:800 14px var(--body);color:var(--ink);border:0;background:var(--paper-2);border-radius:10px;padding:6px 8px}
#qSubj{font-size:18px}

/* long word answers (reading, history...) stay compact so all four fit beside a passage */
.choices.xl .choice{font:800 clamp(15px,3.9vw,18px)/1.25 var(--body);padding:10px 12px;min-height:48px;text-align:left}
.choices.xl{gap:8px}
@media (max-height:760px){.passage{max-height:28vh;font-size:14px}}
@media (max-width:520px){.passage{max-height:24vh;font-size:14px;padding:8px 12px}}

/* start screen: brand on the left (or on top on phones), setup on the right */
#start .card.start{max-width:880px;display:grid;grid-template-columns:1fr;gap:6px;padding:18px 18px 16px;text-align:left;border-radius:28px}
.brand{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:12px}
.kin{width:72px;height:72px;grid-row:span 2}
.wordmark{font:800 clamp(26px,8.4vw,36px)/1 var(--display);color:var(--ink);letter-spacing:-.01em;text-shadow:0 3px 0 var(--sun);margin:0}
.wordmark .amp{color:#f07a1a;text-shadow:0 3px 0 #c75a12}
.idot{position:relative;display:inline-block}
.idot::after{content:"";position:absolute;left:50%;top:-.02em;width:.26em;height:.26em;transform:translateX(-50%);background:var(--sun);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.tag{margin:4px 0 0;font:700 15px/1.35 var(--body);color:var(--ink-soft);align-self:start}
.setup{min-width:0}
.steps{display:flex;gap:16px;list-style:none;padding:0;margin:10px 0 2px;counter-reset:st;font:800 14px var(--body);color:var(--lock)}
.steps li{display:flex;align-items:center;gap:6px;counter-increment:st}
.steps li::before{content:counter(st);display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--paper-2);color:var(--ink-soft);font-size:12px}
.steps li[aria-current=step]{color:var(--ink)}.steps li[aria-current=step]::before{background:var(--berry);color:#fff}
.steps li.done::before{background:var(--leaf);color:#fff}
.field .lab,.field label{font:800 15px var(--body);color:var(--ink)}
.ages{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.age{min-height:44px;border-radius:12px;background:#fff;border:3px solid var(--line);font:800 18px var(--display);color:var(--ink);padding:0}
.age[aria-pressed=true]{border-color:var(--berry);background:#fff0f4}
.looks{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.look{display:flex;align-items:center;gap:10px;background:#fff;border:3px solid var(--line);border-radius:16px;padding:5px 12px 5px 5px;font:800 17px var(--body);color:var(--ink);text-align:left}
.look[aria-pressed=true]{border-color:var(--berry);background:#fff0f4}
.look .pt{width:54px;height:54px;border-radius:12px;background:linear-gradient(#bfe6ff,#eaf8ff);flex:none;object-fit:cover}
.look .pt:not([src]){visibility:hidden}
#start .btn.big{margin-top:14px}#oldFarm{margin-top:10px!important}
.fine{margin:10px 0 0;font:700 13px/1.4 var(--body);color:var(--ink-soft)}
.ask{font:800 24px var(--display);margin:8px 0 0;color:var(--ink)}
#start .picks{grid-template-columns:repeat(2,1fr);margin:12px 0 0}
#start .picks button{display:grid;justify-items:center;gap:2px;padding:8px 8px 10px;color:var(--ink)}
#start .picks img{width:96px;height:96px}
.pair{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:end}.pair .btn{margin-top:14px}
@media (min-width:760px) and (min-height:540px){
 #start .card.start{grid-template-columns:5fr 6fr;gap:26px;padding:26px}
 .brand{grid-template-columns:1fr;justify-items:center;text-align:center;align-content:center;padding:26px 18px;border-radius:22px;background:radial-gradient(circle at 50% 30%,#fff7c9 0,#fff7c900 38%),linear-gradient(#9dd8ff,#d9f3ff);}
 .kin{width:170px;height:170px;grid-row:auto}
 .wordmark{font-size:clamp(48px,6.2vw,64px);line-height:.95;margin-top:10px}
 .wordmark>span{display:inline-grid;grid-template-columns:1fr auto 1fr;column-gap:.14em}.wordmark .w{grid-column:2;justify-self:start}.wordmark .amp{grid-area:2/1;justify-self:end}
 .tag{max-width:26ch;margin-top:16px;font-size:16px;color:var(--ink)}
 #start .picks{grid-template-columns:repeat(4,1fr)}#start .picks img{width:84px;height:84px}
}
@media (max-width:380px){.ages{grid-template-columns:repeat(4,1fr)}.kin{width:64px;height:64px}}

.tips{margin:4px 0 0;padding-left:18px;display:grid;gap:6px;font:700 14px/1.4 var(--body);color:var(--ink)}
.tips b{font-weight:800}

/* ---- learning extras (g_learn.js): Pre-K, trace and place tasks, badges, learn-first locks, grown-up controls, rest screen ---- */
.ages{grid-template-columns:repeat(7,1fr)}
.choices.big{gap:14px}
.choices.big .choice{font-size:clamp(40px,12vw,64px);line-height:1.05;min-height:clamp(92px,21vw,128px);padding:8px}
.task .row{margin-top:10px}
.tcv{display:block;width:100%;max-width:460px;height:300px;margin:0 auto;background:#fff;border:3px solid var(--line);border-radius:20px;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;cursor:crosshair}
.tcv.ok{border-color:var(--leaf)}
.ptgt{position:relative;display:grid;place-items:center;min-height:156px;max-width:460px;margin:0 auto;background:#fff;border:3px dashed var(--line);border-radius:22px;padding:10px;transition:background .15s,border-color .15s}
.ptgt.hot{border-color:var(--pond);background:#eef8ff}.ptgt.ok{border:3px solid var(--leaf);background:#dff5e3}.ptgt.show{border:3px solid var(--sun-shade);background:#fff3c4}
.ptgt-em{font-size:clamp(70px,20vw,104px);line-height:1;opacity:.9}
.pin{position:absolute;inset:12px 12px 22px;display:flex;flex-wrap:wrap;align-content:flex-end;justify-content:center;gap:2px;pointer-events:none}
.pin .pitem{pointer-events:auto;width:46px;height:46px;font-size:38px;background:none;border:0;box-shadow:none;filter:drop-shadow(0 2px 1px #0003)}
.pcount{position:absolute;top:-14px;right:-8px;min-width:46px;height:46px;border-radius:23px;padding:0 8px;background:var(--berry);color:#fff;font:800 26px/46px var(--display);text-align:center;box-shadow:0 3px 0 var(--berry-shade)}
.ppool{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:460px;min-height:64px;margin:12px auto 0}
.pitem{width:60px;height:60px;padding:0;border-radius:16px;background:#fff;border:3px solid var(--line);box-shadow:0 4px 0 var(--line);font-size:36px;line-height:1;display:grid;place-items:center;touch-action:none;-webkit-user-select:none;user-select:none}
.pitem.lift{opacity:.25}.pitem:disabled{cursor:default}
.pghost{position:fixed;z-index:60;font-size:46px;line-height:1;pointer-events:none;transform:translate(-50%,-50%)}
.newbadge{display:inline-block;margin-top:6px;color:#8a5a00}
.brow{display:flex;gap:10px;align-items:flex-start;padding:7px 0;border-bottom:2px dashed var(--line)}
.brow>b{flex:none;width:118px;font-size:14px}
.bdgs{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.bdg{display:inline-flex;align-items:center;gap:4px;background:#fff7d6;border:2px solid #f0cf6a;border-radius:999px;padding:3px 10px;font-size:13px}
.bdg small{color:var(--ink-soft);font-size:11px}
.subj.locked{background:var(--paper-2);opacity:.72}
.subj .lf{font:800 11px/1.25 var(--body);font-style:normal;color:var(--berry-shade)}.subj .lf.go{color:var(--leaf-shade)}
#lnVeil{z-index:45}
@media (max-width:380px){.ages{grid-template-columns:repeat(7,1fr);gap:4px}.age{font-size:16px}}
/* short screens (phones on their side): a trace or place task sits beside the question, sized to the screen, so the pad and its
   Check button are never below the fold and the question side still scrolls. Portrait phones and tablets keep the stacked layout. */
@media (max-height:480px) and (min-width:560px){
 #quiz .card.lntask{--cw:min(calc(100vw - 16px),900px);width:var(--cw);max-width:none;height:92%;position:relative;padding-right:calc(var(--cw)*.5 + 4px)}
 #quiz .card.lntask #qTask{position:absolute;top:14px;right:16px;bottom:16px;width:calc(var(--cw)*.5 - 22px);display:flex;flex-direction:column;justify-content:center}
 #quiz .card.lntask .top .chip{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 #quiz .card.lntask h2{font-size:clamp(20px,3.6vw,30px);margin:6px 0 10px}
 #quiz .card.lntask .qvisual{font-size:28px;padding:4px}
 #quiz .card.lntask .task .row{flex:none;margin-top:8px}
 #quiz .card.lntask .ptgt{flex:1 1 auto;min-height:0;width:100%}
 #quiz .card.lntask .ptgt-em{font-size:min(90px,20vh)}
 #quiz .card.lntask .pcount{top:-6px;right:-6px;min-width:40px;height:40px;font-size:22px;line-height:40px}
 #quiz .card.lntask .ppool{flex:none;min-height:0;margin-top:8px;gap:6px}
 #quiz .card.lntask .pitem{width:48px;height:48px;font-size:30px;border-radius:14px}
 #quiz .card.lntask .pin .pitem{width:38px;height:38px;font-size:30px}
 #quiz .card.lntask .many .ppool{gap:4px}#quiz .card.lntask .many .ppool .pitem{width:40px;height:40px;font-size:25px;border-radius:12px;box-shadow:0 3px 0 var(--line)}
 #quiz .card.lntask .task>.btn.big{flex:none;margin-top:8px;padding:10px 18px;font-size:20px}
}
/* ---- Pre-K picture-first UI, hand demo, answer pops, badges sheet (g_learn.js) ---- */
.subjs.pk{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:12px}
.subjs.pk .subj{padding:14px 8px 10px;gap:4px}.subjs.pk .subj .em{font-size:64px;line-height:1.05}.subjs.pk .subj small,.subjs.pk .subj .lf{display:none}
.subjs.pk .subj[data-act=typing] .em{font-size:80px}
.subj.tap{border-color:var(--leaf);background:#dff5e3;transform:scale(1.04)}
.lnsay{display:none}
.qcard.pk .lnsay{display:grid;width:60px;height:60px;font-size:30px;margin:4px auto -4px;background:#e3f1ff;box-shadow:0 4px 0 #b9d6f2}
.qcard.pk #qNext{font-size:0}.qcard.pk #qNext::before{content:"▶";font-size:34px;line-height:1}
#qPromo.pkb .row{display:flex;gap:12px;justify-content:center}#qPromo.pkb .btn{font-size:34px;line-height:1;min-width:110px;min-height:72px}
.task .btn .ic{font-size:30px;line-height:1}
.lnhand{position:fixed;left:0;top:0;z-index:31;font-size:52px;line-height:1;margin:-4px 0 0 -26px;pointer-events:none;filter:drop-shadow(0 3px 2px #0004);transition:opacity .2s}
.lnghost{z-index:30}
.lnpop{position:fixed;z-index:32;font-size:110px;line-height:1;pointer-events:none;transform:translate(-50%,-50%);animation:lnPop 1.05s ease-out forwards}
@keyframes lnPop{0%{transform:translate(-50%,-50%) scale(.2);opacity:0}25%{transform:translate(-50%,-50%) scale(1.25);opacity:1}55%{transform:translate(-50%,-50%) scale(1)}100%{transform:translate(-50%,-80%) scale(1);opacity:0}}
.lnshake{animation:lnShake .5s}
@keyframes lnShake{20%{transform:translateX(-12px)}40%{transform:translateX(10px)}60%{transform:translateX(-7px)}80%{transform:translateX(4px)}}
.lnlp{outline:4px solid var(--sun)!important;outline-offset:2px}
#bar button,#hud button,.qcard .top button{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
button.stat.lnbadges{width:100%;background:none;border:0;border-bottom:2px dashed var(--line);font:inherit;font-size:15px;color:inherit;text-align:left;cursor:pointer}
.bgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
.bt{display:grid;justify-items:center;gap:2px;padding:10px 6px 8px;border-radius:16px;background:var(--paper-2);border:3px solid var(--line);text-align:center}
.bt .bi{font-size:36px;line-height:1.1;filter:grayscale(1) brightness(0);opacity:.2}
.bt b{font-size:12px;line-height:1.2}.bt small{font-size:11px;color:var(--ink-soft)}
.bt.got{background:#fff7d6;border-color:#f0cf6a}.bt.got .bi{filter:none;opacity:1}