/* October 12-16: the garden week. Cream paper, dark green ink, leaf corners, yellow pills.
   Phone first. One column up to 560px; a sideways phone gets two columns so nothing hides below the fold. */
:root{--paper:#f8f3e4;--card:#fffaf0;--ink:#173f2a;--leaf:#2f6b3a;--leaf2:#3f8f4f;--soft:#e6ead2;--sun:#ffd65a;--sun2:#e9b73a;--clay:#e8703a;--line:#d9d2bb;--bad:#c9482b;--r:22px;
  --font:ui-rounded,"SF Pro Rounded","Arial Rounded MT Bold","Nunito","Fredoka",system-ui,-apple-system,"Segoe UI",sans-serif}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-weight:700;line-height:1.3;min-height:100vh;min-height:100dvh;overflow-x:hidden}
button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button:disabled{cursor:default}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;background:#fff;padding:10px 14px;border-radius:12px;z-index:30}.skip:focus{left:10px;top:10px}
:focus-visible{outline:4px solid #1d6fd6;outline-offset:3px}
.leaves{position:fixed;width:clamp(74px,19vw,150px);height:auto;pointer-events:none;z-index:0}
.leaves.tl{left:0;top:0}.leaves.tr{right:0;top:0;transform:scaleX(-1)}
.leaves.bl{left:0;bottom:0;transform:scaleY(-1)}.leaves.br{right:0;bottom:0;transform:scale(-1,-1)}
.page{position:relative;z-index:1;max-width:560px;margin:0 auto;padding:max(14px,env(safe-area-inset-top)) 16px calc(26px + env(safe-area-inset-bottom))}

/* ---- hub ---- */
.week-head{text-align:center;padding:10px 46px 4px}
.eyebrow{margin:0;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#4d6a55}
.week-head h1{margin:2px 0 10px;font-size:clamp(30px,8.6vw,44px);font-weight:900;line-height:1.02;letter-spacing:-.01em}
.pills{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.pill{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;border-radius:999px;border:2px solid var(--line);background:var(--card);color:var(--ink);text-decoration:none;font-size:15px}
.pill[aria-pressed="false"]{background:#ece6d3;color:#5d6f62}
.mission{display:flex;align-items:center;gap:14px;width:100%;margin:16px 0 6px;padding:16px 18px;border:0;border-radius:var(--r);background:var(--leaf);color:#fff;text-align:left;box-shadow:0 6px 0 #1f4c28}
.mission:active{transform:translateY(3px);box-shadow:0 3px 0 #1f4c28}
.mission .m-art{flex:none;width:58px;height:58px;border-radius:50%;background:#fff7e0;display:grid;place-items:center;font-size:32px}
.mission small{display:block;font-size:14px;opacity:.9;font-weight:700}
.mission strong{display:block;font-size:22px;font-weight:900;line-height:1.1}
.mission b{margin-left:auto;font-size:26px}
.section-title{margin:20px 2px 8px;font-size:18px;font-weight:900}
.game-grid{display:grid;gap:12px}
.game-card{display:grid;grid-template-columns:76px 1fr;align-items:center;gap:12px;width:100%;padding:12px 14px;border:2px solid var(--line);border-radius:var(--r);background:var(--card);text-align:left;box-shadow:0 4px 0 #e2dac3}
.game-card:active{transform:translateY(2px);box-shadow:0 2px 0 #e2dac3}
.game-card .plant{width:76px;height:84px}
.game-card strong{display:block;font-size:22px;font-weight:900;line-height:1.1}
.game-card small{display:block;font-size:15px;color:#4d6a55;margin-top:2px}
.leafdots{display:flex;gap:5px;margin-top:6px;align-items:center;font-size:13px;color:#4d6a55}
.leafdots i{width:14px;height:14px;border-radius:50% 0 50% 50%;background:#e3dcc6;transform:rotate(45deg)}.leafdots i.on{background:var(--leaf2)}
.leafdots span{margin-left:6px}
.together-grid{display:grid;gap:10px}
.tg-card{display:grid;grid-template-columns:52px 1fr;gap:12px;align-items:center;width:100%;padding:12px 14px;border:2px dashed #b9c79f;border-radius:var(--r);background:#f3f1dc;text-align:left}
.tg-card .tg-pic{width:52px;height:52px;border-radius:16px;background:#fff7e0;display:grid;place-items:center;font-size:28px}
.tg-card strong{display:block;font-size:18px;font-weight:900}.tg-card small{display:block;font-size:14px;color:#4d6a55}
.tg-card.did{border-style:solid;border-color:var(--leaf2)}
.plan-card{display:grid;grid-template-columns:52px 1fr;gap:12px;align-items:center;width:100%;margin-top:12px;padding:12px 14px;border:2px solid var(--line);border-radius:var(--r);background:var(--card);text-align:left}
.plan-icon{width:52px;height:52px;border-radius:14px;background:var(--sun);border:2px solid var(--sun2);display:grid;place-items:center;font-size:26px;font-weight:900}
.plan-card strong{display:block;font-size:18px;font-weight:900}.plan-card small{display:block;font-size:14px;color:#4d6a55}
.grownup{margin-top:16px;padding:12px 16px;border-radius:var(--r);background:#efe9d6;font-weight:600;font-size:15px}
.grownup summary{font-weight:900;font-size:16px;cursor:pointer;line-height:44px}
.grownup p{margin:10px 0}
.quiet{min-height:44px;padding:8px 16px;border-radius:999px;border:2px solid var(--line);background:#fff;font-size:15px}
footer{display:flex;justify-content:space-between;gap:12px;margin-top:18px;font-size:15px}
footer a{color:var(--leaf);padding:10px 2px}

/* ---- inside a garden ---- */
.act-head{display:grid;grid-template-columns:1fr auto;align-items:start;gap:8px;padding:2px 0 0 0;min-height:60px}
.act-head h1{margin:0;padding:6px 6px 0 52px;font-size:clamp(26px,7.4vw,36px);font-weight:900;line-height:1.02;text-align:center}
.done{min-height:48px;padding:8px 20px;border-radius:999px;border:2px solid var(--sun2);background:var(--sun);font-size:18px;font-weight:900;box-shadow:0 3px 0 var(--sun2)}
#play{display:flex;flex-direction:column;align-items:stretch;gap:16px;padding-top:8px}
.ask{margin:6px 0 0;font-size:clamp(24px,6.6vw,32px);font-weight:900;text-align:center;line-height:1.1}
.say{margin:0;text-align:center;font-size:17px;color:#33543d;min-height:22px}
.say.bad{color:var(--bad)}.say.good{color:var(--leaf)}
.row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center}
.big{min-height:60px;padding:12px 28px;border:0;border-radius:999px;background:var(--leaf);color:#fff;font-size:24px;font-weight:900;box-shadow:0 5px 0 #1f4c28;width:min(100%,420px);align-self:center}
.big:active{transform:translateY(3px);box-shadow:0 2px 0 #1f4c28}
.big:disabled{background:#a9b9a3;box-shadow:0 5px 0 #8a9a85}
.big.sun{background:var(--sun);color:var(--ink);box-shadow:0 5px 0 var(--sun2)}
.out{min-height:48px;padding:8px 22px;border-radius:999px;border:2px solid var(--leaf);background:var(--card);font-size:18px;font-weight:900}
.out.sun{border-color:var(--sun2)}
.hear{display:inline-flex;align-items:center;gap:10px;min-height:58px;padding:10px 26px;border:0;border-radius:999px;background:var(--sun);font-size:21px;font-weight:900;box-shadow:0 4px 0 var(--sun2);align-self:center}
.hear svg{width:30px;height:30px}
.shake{animation:shake .32s}
@keyframes shake{25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
.pop{animation:pop .34s}
@keyframes pop{50%{transform:scale(1.14)}}

/* word garden */
.boxes{display:flex;gap:10px;justify-content:center;flex-wrap:nowrap}
.box{position:relative;flex:0 1 122px;min-width:58px;aspect-ratio:1/1.02;max-height:126px;border:3px dashed var(--leaf);border-radius:18px;background:transparent;font-size:clamp(34px,10vw,52px);font-weight:900;display:grid;place-items:center;padding:0}
.box.full{border-style:solid;background:var(--card)}
.box.right{border-color:var(--leaf2);background:#e1f0d2}
.box.wrong{border-color:var(--bad);background:#fbe3da}
.box .heart{position:absolute;top:-13px;left:50%;width:24px;height:22px;margin-left:-12px}
.model{display:flex;gap:8px;justify-content:center;align-items:flex-end;min-height:96px}
.model .box{border-style:solid;background:var(--card);cursor:default}
.model .box.hot{border-color:#e05a3c;background:#fff0e6}
.meet{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;padding:12px 14px;border-radius:var(--r);background:var(--card);border:2px solid var(--line)}
.meet .pic{font-size:50px;line-height:1}
.meet p{margin:0;font-size:22px}
.tray{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.seed{position:relative;width:92px;height:116px;border:0;border-radius:14px;background:linear-gradient(#69a85b,#8fc07a);box-shadow:0 4px 0 #3c7a3c;padding:0;display:grid;place-items:center}
.seed span{display:grid;place-items:center;width:70px;height:62px;border-radius:10px;background:#fbf4dc;font-size:34px;font-weight:900}
.seed svg{position:absolute;left:50%;width:26px;height:14px;margin-left:-13px}.seed .top{top:6px;fill:#dff0c8}.seed .bot{bottom:6px;fill:#2f6b3a}
.seed:disabled{opacity:.28}
.seed:active{transform:translateY(2px)}
.chips{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.chip{min-height:60px;min-width:60px;padding:8px 18px;border:3px solid var(--line);border-radius:16px;background:var(--card);font-size:clamp(26px,7.4vw,34px);font-weight:900}
.chip.on{border-color:var(--leaf);background:#e9f3d8}
.chip.right{border-color:var(--leaf2);background:#d6ecc2}
.chip.wrong{border-color:var(--bad);background:#fbe3da}

/* noun trail */
.thing{display:flex;flex-direction:column;align-items:center;gap:0}
.thing .pic{font-size:clamp(76px,24vw,118px);line-height:1.05;filter:drop-shadow(0 6px 0 rgba(23,63,42,.12))}
.thing .word{font-size:clamp(34px,10vw,46px);font-weight:900}
.bins{display:grid;gap:10px}
.bin{display:grid;grid-template-columns:70px 1fr;align-items:center;gap:8px;min-height:70px;padding:8px 16px;border:3px solid transparent;border-radius:var(--r);background:var(--card);box-shadow:0 3px 0 #e2dac3;font-size:clamp(24px,7vw,32px);font-weight:900;text-align:left}
.bin .ico{font-size:42px;line-height:1;text-align:center}
.bin.on{border-color:var(--leaf);background:#eef5df}
.bin.right{border-color:var(--leaf2);background:#d6ecc2}
.bin.wrong{border-color:var(--bad);background:#fbe3da}
.teach3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.teach3 div{padding:10px 4px;border-radius:18px;background:var(--card);border:2px solid var(--line);text-align:center;font-size:18px}
.teach3 .pic{display:block;font-size:44px;line-height:1.1}

/* ten-frame garden */
.plate{align-self:center;min-width:min(100%,360px);padding:8px 26px;border-radius:22px;background:var(--soft);font-size:clamp(46px,14vw,72px);font-weight:900;text-align:center;line-height:1.05}
.plate .q{color:#8a9a85}
.frame{display:grid;grid-template-columns:repeat(5,1fr);align-self:center;width:min(100%,430px);border:4px solid var(--leaf);border-radius:14px;background:#fffdf5;overflow:hidden}
.frame.full{animation:shake .32s}
.cell{aspect-ratio:1/1;border:2px solid var(--leaf);display:grid;place-items:center;position:relative}
.cell svg{width:70%;height:70%}
.cell.lit{background:#fff1b8}
.cell b{position:absolute;right:4px;bottom:1px;font-size:15px;color:#33543d}
.add{display:inline-flex;align-items:center;gap:8px;min-height:56px;padding:8px 18px;border-radius:16px;border:3px solid var(--sun2);background:#ffe9a6;font-size:19px;font-weight:900}
.add.circle{border-color:#3c7a3c;background:#dcefc9}
.add svg{width:28px;height:28px}
.undo{display:inline-flex;align-items:center;gap:8px;min-height:56px;padding:8px 18px;border-radius:16px;border:3px solid var(--line);background:var(--card);font-size:19px;font-weight:900}
.undo:disabled{opacity:.45}
.nums{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.num{width:66px;height:66px;border:3px solid var(--line);border-radius:18px;background:var(--card);font-size:32px;font-weight:900;padding:0}
.nums.many .num{width:52px;height:56px;font-size:26px}
.num.on{border-color:var(--leaf);background:#e9f3d8}
.num.right{border-color:var(--leaf2);background:#d6ecc2}
.num.wrong{border-color:var(--bad);background:#fbe3da}

/* mission end, together cards, planner */
.finish{display:flex;flex-direction:column;align-items:center;gap:10px;padding:14px;border-radius:var(--r);background:var(--card);border:2px solid var(--line);text-align:center}
.finish .plant{width:120px;height:132px}
.finish h2{margin:0;font-size:28px;font-weight:900}
.finish p{margin:0;font-size:18px}
.talk{padding:16px;border-radius:var(--r);background:var(--card);border:2px solid var(--line)}
.talk p{margin:0 0 10px;font-size:21px}
.talk .steps{display:grid;gap:8px;margin:10px 0}
.talk label,.day label{display:flex;align-items:center;gap:12px;min-height:52px;padding:6px 12px;border-radius:14px;background:#f3f1dc;font-size:19px}
.talk input,.day input{width:28px;height:28px;accent-color:var(--leaf);flex:none}
.days{display:grid;gap:10px}
.day{padding:12px 14px;border-radius:var(--r);background:var(--card);border:2px solid var(--line)}
.day h2{margin:0 0 6px;font-size:20px;font-weight:900}
.day.off{background:#efe9d6;border-style:dashed}
.day.off p{margin:0;font-size:17px;color:#4d6a55}
.day label{margin-top:6px}
.note{margin:0;text-align:center;font-size:15px;color:#4d6a55;font-weight:600}
#celebration{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:20}
.petal{position:absolute;top:-24px;width:16px;height:16px;border-radius:50% 0 50% 50%;animation:fall 1.5s ease-in forwards}
@keyframes fall{to{transform:translate(var(--dx),108vh) rotate(540deg);opacity:.2}}
.plant .new{transform-box:fill-box;transform-origin:50% 100%;animation:grow .8s cubic-bezier(.2,.9,.3,1.2)}
@keyframes grow{from{transform:scale(0)}}

/* story plays (week-2026-10-12-stories.js): a drawn picture, a caption, a choice, then tell it back */
.st-n{font-size:13px;letter-spacing:.03em}
.st-stage{align-self:center;width:min(100%,66vh);border:3px solid var(--leaf);border-radius:var(--r);overflow:hidden;background:#cdeaf6;line-height:0}
.st-svg{display:block;width:100%;height:auto;font-family:var(--font)}
/* the film: a rendered clip over each drawing. The drawing stays underneath and shows if the clip is late or will not play. */
.st-stage,.st-pic{position:relative}
.st-pic{display:block;overflow:hidden;line-height:0}
.st-film{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none;transition:opacity .28s ease}
.film-on>.st-film.on{opacity:1}
.filming>.st-svg{opacity:0}
.st-stage.filming,.st-pic.filming{background:#eae0d1}
body.still .st-film{transition:none}
.st-thumb{position:relative;border-radius:9px;overflow:hidden}
.st-thumb>i{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;background-repeat:no-repeat}
.st-thumb.film-on>i{opacity:1}
.st-cap{margin:0;padding:10px 14px;border-radius:18px;border:2px solid var(--line);background:var(--card);font-size:18px;line-height:1.28;text-align:center}
.st-cap.good{border-color:var(--leaf2);background:#e9f3d8}
.st-cap.bad{border-color:#e3b39f;background:#fdf0e8}
.st-choice{display:grid;gap:8px}
.st-q{margin:0;font-size:19px;font-weight:900;text-align:center;line-height:1.15}
.st-opt{min-height:50px;padding:8px 14px;border:3px solid var(--sun2);border-radius:16px;background:#fff1c2;font-size:19px;font-weight:900;line-height:1.15}
.st-opt:active{transform:translateY(2px)}
.st-row .hear{min-height:48px;font-size:18px;padding:6px 20px}
.st-poster{position:relative;display:block;width:100%;padding:0;border:3px solid var(--leaf);border-radius:var(--r);overflow:hidden;background:#cdeaf6;line-height:0;box-shadow:0 4px 0 #1f4c28}
.st-poster .st-svg{height:132px}
.st-poster b{position:absolute;left:0;right:0;bottom:10px;margin:0 auto;width:max-content;display:flex;align-items:center;gap:8px;padding:8px 18px;border-radius:999px;background:var(--sun);border:2px solid var(--sun2);font-size:18px;line-height:1.2;font-weight:900}
.st-poster i{font-style:normal;font-size:14px}
.st-board{display:grid;gap:8px}
.st-slot{display:grid;grid-template-columns:86px 1fr;align-items:center;gap:6px;min-height:58px;padding:3px 4px 3px 12px;border:3px dashed var(--leaf);border-radius:16px;background:rgba(255,250,240,.5)}
.st-slot b{font-size:16px}
.st-tray{display:grid;gap:8px;align-content:start}
.st-card{display:grid;grid-template-columns:40px 1fr;align-items:center;gap:8px;min-height:50px;width:100%;padding:3px 10px;border:3px solid var(--sun2);border-radius:13px;background:#fff7dc;color:var(--ink);font-size:15.5px;font-weight:900;line-height:1.15;text-align:left}
.st-ico{width:40px;height:40px;display:block;font-family:var(--font)}
.st-card.bad{border-color:var(--bad);background:#fbe3da}
.st-card.good{border-color:var(--leaf2);background:#d6ecc2;color:var(--ink)}
.st-item{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px;border-radius:var(--r);border:2px solid var(--line);background:var(--card);text-align:center}
.st-item .st-ico{width:84px;height:84px}
.st-item strong{font-size:clamp(24px,7vw,30px);font-weight:900;line-height:1.1}
.st-bins{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.st-bin{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:96px;padding:8px 6px;border:3px solid var(--line);border-radius:var(--r);background:var(--card);color:var(--ink);font-size:17px;font-weight:900;line-height:1.1}
.st-bin .st-ico{width:52px;height:52px}
.st-bin.right{border-color:var(--leaf2);background:#d6ecc2}
.st-bin.wrong{border-color:var(--bad);background:#fbe3da;opacity:.75}
.finish .st-fin{width:min(100%,240px);border-radius:16px}
.st-win{display:flex;flex-direction:column;align-items:center;gap:10px}
.st-win .big{width:min(100%,420px)}

@media (min-width:700px){
  .page{max-width:640px;padding-top:26px}
  .game-card strong{font-size:24px}
}
/* a short screen that is not sideways: an iPhone in Safari with its bars showing (about 660 px tall), a small
   phone, or a tablet on its side inside the browser. Everything tightens so no button falls below the screen. */
@media (min-height:521px) and (max-height:800px){
  .thing .pic{font-size:clamp(64px,12vh,96px)}
  #play{gap:12px}
}
@media (min-height:521px) and (max-height:700px){
  .page{padding-top:8px}
  .act-head{min-height:48px}.act-head h1{font-size:24px;padding-top:8px}
  .done{min-height:44px;padding:6px 16px;font-size:16px}
  #play{gap:9px;padding-top:2px}
  .ask{font-size:22px;margin:0}
  .say{font-size:15px;min-height:18px}
  .box{max-height:84px;flex-basis:84px;font-size:36px}
  .model{min-height:76px}
  .meet{padding:8px 12px}.meet .pic{font-size:38px}.meet p{font-size:19px}
  .seed{width:70px;height:84px}.seed span{width:52px;height:44px;font-size:28px}.seed svg{width:20px;height:10px;margin-left:-10px}.seed .top{top:5px}.seed .bot{bottom:5px}
  .tray{gap:8px}
  .hear{min-height:48px;font-size:18px;padding:6px 20px}
  .big{min-height:52px;font-size:21px;padding:8px 22px}
  .out{min-height:44px;font-size:16px;padding:6px 18px}
  .thing .pic{font-size:62px}.thing .word{font-size:30px}
  .bins{gap:7px}.bin{min-height:56px;font-size:23px;grid-template-columns:52px 1fr}.bin .ico svg{width:36px;height:36px}
  .plate{font-size:40px;padding:4px 18px}
  .frame{width:min(100%,300px)}
  .add,.undo{min-height:48px;font-size:17px;padding:6px 14px}
  .nums{gap:7px}.num{width:54px;height:54px;font-size:26px}.nums.many .num{width:46px;height:46px;font-size:22px}
  .chip{min-height:50px;font-size:26px;padding:6px 14px}
  .teach3 .pic{font-size:36px}.teach3 div{padding:6px 4px;font-size:16px}
  .finish{padding:10px;gap:6px}.finish .plant{width:92px;height:100px}.finish h2{font-size:23px}.finish p{font-size:16px}
}
/* a phone held sideways: prompt on the left, controls on the right, everything above the fold */
@media (orientation:landscape) and (max-height:520px){
  .page{max-width:none;padding:8px max(16px,env(safe-area-inset-right)) 10px max(16px,env(safe-area-inset-left))}
  .leaves{width:64px}
  .act-head{min-height:46px;position:absolute;right:max(16px,env(safe-area-inset-right));top:6px;left:auto;z-index:3;display:block}
  .act-head h1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .done{min-height:44px;padding:6px 18px}
  #play{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:min-content;grid-auto-flow:row dense;column-gap:18px;row-gap:8px;align-items:center;padding-top:2px;min-height:calc(100dvh - 22px);align-content:center}
  #play>.wide{grid-column:1/-1}
  #play>.left{grid-column:1}
  #play>.right{grid-column:2}
  .ask{font-size:24px;margin:0;padding:0 100px;min-height:48px;display:flex;align-items:center;justify-content:center}
  .say{font-size:15px;min-height:18px}
  .box{max-height:78px;flex-basis:78px;font-size:36px}
  .model{min-height:58px}.model .box{max-height:54px;flex-basis:54px;font-size:26px}
  .tray{grid-row:span 2}
  .seed{width:66px;height:78px}.seed span{width:50px;height:40px;font-size:27px}.seed svg{width:20px;height:10px;margin-left:-10px}.seed .top{top:4px}.seed .bot{bottom:4px}
  #play{gap:8px}
  .thing .pic{font-size:74px}.thing .word{font-size:32px}
  .bin{min-height:54px;font-size:24px;grid-template-columns:54px 1fr;padding:5px 14px}.bin .ico svg{width:34px;height:34px}
  .bins{gap:7px}
  .plate{font-size:42px;padding:2px 18px;min-width:0}
  .frame{width:min(100%,300px)}
  .big{min-height:50px;font-size:21px;padding:8px 22px}
  .hear{min-height:48px;font-size:18px;padding:6px 20px}
  .add,.undo{min-height:48px;font-size:17px;padding:6px 14px}
  .num{width:56px;height:54px;font-size:27px}.nums.many .num{width:44px;height:46px;font-size:22px}
  .chip{min-height:50px;font-size:26px}
  .week-head{padding:0 60px}.week-head h1{font-size:28px;margin-bottom:6px}
  #hub{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;align-items:start}
  #hub>.week-head,#hub>.mission,#hub>.grownup,#hub>footer,#hub>.section-title{grid-column:1/-1}
  .mission{margin:8px 0 2px;padding:10px 16px}
  .section-title{margin:10px 2px 6px}
  .game-grid,.together-grid{grid-column:1/-1;grid-template-columns:repeat(3,1fr)}
  .game-card{grid-template-columns:56px 1fr;padding:8px 10px}.game-card .plant{width:56px;height:62px}.game-card strong{font-size:18px}.game-card small{font-size:13px}
  .plan-card{grid-column:1/-1}
  .finish{flex-direction:row;flex-wrap:wrap;justify-content:center}.finish .plant{width:84px;height:92px}
}
@media (orientation:landscape) and (max-height:360px){
  #play{row-gap:5px}
  .ask{min-height:44px;font-size:21px}
  .box{max-height:62px;flex-basis:62px;font-size:30px}
  .model{min-height:58px}
  .seed{width:56px;height:62px}.seed span{width:44px;height:34px;font-size:23px}.seed svg{display:none}
  .thing .pic{font-size:56px}.thing .word{font-size:26px}
  .bin{min-height:46px;font-size:21px;padding:3px 12px}.bin .ico svg{width:28px;height:28px}.bins{gap:5px}
  .plate{font-size:32px}
  .frame{width:min(100%,230px)}
  .big{min-height:44px;font-size:19px}
  .hear{min-height:44px;font-size:17px}
  .out{min-height:44px;font-size:15px;padding:4px 14px}
  .add,.undo{min-height:44px;font-size:16px}
  .num{width:50px;height:46px;font-size:24px}.nums.many .num{width:44px;height:44px;font-size:20px}.nums{gap:6px}
  .chip{min-height:44px;font-size:23px}
  .meet{padding:6px 10px}.meet .pic{font-size:32px}.meet p{font-size:18px}
  .say{font-size:14px;min-height:16px}
  .teach3 .pic{font-size:30px}.teach3 div{padding:4px;font-size:15px}
  .finish{padding:8px}.finish .plant{width:64px;height:70px}.finish h2{font-size:20px}.finish p{font-size:15px}
}
/* story plays on short and sideways screens */
@media (min-height:521px) and (max-height:700px){
  .st-n{display:none}
  .st-cap{font-size:17px;padding:8px 12px}
  .st-q{font-size:17px}.st-opt{min-height:46px;font-size:17px;padding:6px 12px}
  .st-row .hear{min-height:44px;font-size:17px}
  .st-poster .st-svg{height:100px}.st-poster b{bottom:8px;font-size:17px;padding:6px 16px}
  .talk{padding:10px 12px}.talk p{font-size:18px;margin-bottom:6px}.talk .steps{gap:6px;margin:6px 0}.talk label{min-height:44px;font-size:17px;padding:4px 12px}
  .st-slot{min-height:52px}.st-card{min-height:46px;font-size:15px}
  .st-item{padding:8px}.st-item .st-ico{width:60px;height:60px}.st-item strong{font-size:24px}
  .st-bin{min-height:80px}.st-bin .st-ico{width:42px;height:42px}
  .finish .st-fin{width:min(100%,190px)}
}
@media (orientation:landscape) and (max-height:520px){
  #play.st{align-content:start;row-gap:6px;min-height:0}
  .st-n{display:none}
  .st-stage{grid-row:1 / span 4;align-self:start;width:min(100%,calc((100dvh - 30px) * 1.5))}
  .st-cap{margin-top:44px;font-size:16px;padding:6px 12px;line-height:1.22}
  .st-choice{gap:6px}.st-q{font-size:16px}.st-opt{min-height:44px;font-size:16px;padding:4px 12px}
  .st-row .hear{min-height:44px;font-size:16px;padding:4px 16px}
  .st-poster .st-svg{height:110px}
  #play.tk{align-content:start;min-height:0}
  #play.tk .talk{grid-row:1 / span 3;align-self:start;margin-top:46px}
  .st-win{gap:6px}
  .talk{padding:8px 12px}.talk p{font-size:17px;margin-bottom:4px}.talk .steps{gap:5px;margin:4px 0}.talk label{min-height:44px;font-size:16px;padding:2px 10px}
  .st-board{gap:5px}.st-slot{min-height:46px;grid-template-columns:76px 1fr;padding:1px 3px 1px 10px}.st-slot b{font-size:15px}
  .st-tray{gap:5px}.st-card{min-height:44px;font-size:14.5px;grid-template-columns:34px 1fr}.st-card .st-ico{width:34px;height:34px}
  .st-item{flex-direction:row;justify-content:center;padding:8px 12px;gap:12px}.st-item .st-ico{width:56px;height:56px}.st-item strong{font-size:22px}
  .st-bins{gap:8px}.st-bin{min-height:70px;flex-direction:row;gap:8px;font-size:16px}.st-bin .st-ico{width:40px;height:40px;flex:none}
  .finish .st-fin{width:150px}
}
@media (orientation:landscape) and (max-height:360px){
  .st-cap{font-size:15px;margin-top:42px}
  .st-q{font-size:15px}.st-opt{font-size:15px}
  .st-poster .st-svg{height:92px}.st-poster b{bottom:5px;font-size:15px;padding:4px 14px}
  #play.tk .talk{margin-top:44px}.talk .note{display:none}
  .talk p{font-size:16px}
  .st-slot{min-height:44px}.st-card{font-size:14px}
  .st-bin{min-height:60px}
  .finish .st-fin{width:120px}
}
@media (prefers-reduced-motion:reduce){.shake,.pop,.petal,.plant .new,.frame.full{animation:none}}
body.still .shake,body.still .pop,body.still .petal,body.still .plant .new{animation:none}