/* ================================================================
   Homeschool for the Future — Trail core styles (shared by levels)
   ================================================================ */
@font-face{font-family:'Young Serif';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/young-serif-400.woff2') format('woff2')}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/schibsted-grotesk-400.woff2') format('woff2')}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/schibsted-grotesk-500.woff2') format('woff2')}
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/schibsted-grotesk-700.woff2') format('woff2')}

:root{
  --cream:#F7F1E1; --card:#FFFBF0; --line:#E3D8BE;
  --pine:#1E3A2C; --pine-mid:rgba(30,58,44,.72); --pine-soft:rgba(30,58,44,.14);
  --moss:#6B8757; --moss-deep:#4F6A3F; --leaf:#8FAE6E;
  --amber:#D89A3E; --amber-deep:#B47B2A;
  --clay:#C06B45; --berry:#C24C41; --sun:#EEC25B; --sky:#A9C7CE;
  --font-display:'Young Serif','Iowan Old Style',Georgia,serif;
  --font-body:'Schibsted Grotesk','Avenir Next','Segoe UI',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{background:var(--cream)}
body{font-family:var(--font-body);background:var(--cream);color:var(--pine);line-height:1.5;font-size:1.05rem;
  -webkit-font-smoothing:antialiased;min-height:100dvh;user-select:none;-webkit-user-select:none}
svg{display:block}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:10px}
h1,h2,h3{font-family:var(--font-display);font-weight:400;line-height:1.15}

.shell{max-width:720px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column}
.screen{display:none;flex:1;flex-direction:column}
.screen.on{display:flex}

/* ---------- chunky UI ---------- */
.big-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-weight:700;font-size:1.15rem;
  background:var(--amber);color:#3A2A10;border-radius:20px;padding:1rem 1.7rem;
  box-shadow:0 4px 0 var(--amber-deep);transition:transform .12s ease,box-shadow .12s ease}
.big-btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--amber-deep)}
.soft-btn{display:inline-flex;align-items:center;gap:.45rem;font-weight:700;font-size:1rem;color:var(--moss-deep);
  background:var(--card);border:3px solid var(--line);border-radius:16px;padding:.7rem 1.1rem;transition:transform .12s;text-decoration:none}
.soft-btn:active{transform:scale(.95)}
.icon-btn{width:56px;height:56px;border-radius:18px;background:var(--card);border:3px solid var(--line);
  display:flex;align-items:center;justify-content:center;transition:transform .12s}
.icon-btn:active{transform:scale(.92)}
.icon-btn svg{width:28px;height:28px}

/* ---------- trail ---------- */
.hills{position:relative;overflow:hidden;border-radius:0 0 28px 28px;background:linear-gradient(180deg,#CFE0D8 0%,#E9EDD9 70%)}
.hills svg{width:100%;height:auto}
.trail-head{display:flex;align-items:center;gap:.8rem;padding:1rem 1.2rem;position:absolute;top:0;left:0;right:0}
.hello{font-family:var(--font-display);font-size:1.35rem;color:var(--pine);text-shadow:0 1px 0 rgba(255,255,255,.5)}
.acorn-badge{margin-left:auto;display:flex;align-items:center;gap:.4rem;background:var(--card);border:3px solid var(--line);
  border-radius:99px;padding:.35rem .8rem .35rem .5rem;font-weight:700;font-size:1.05rem;color:var(--pine)}
.acorn-badge svg{width:26px;height:26px}
.brand-line{text-align:center;font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--moss-deep);padding:1rem 1rem .2rem}
.trail-body{padding:0 1.1rem 2rem}
.grove{margin-top:1.6rem}
.grove-head{display:flex;align-items:baseline;gap:.6rem;margin-bottom:.7rem}
.grove-head h2{font-size:1.3rem;color:var(--pine)}
.grove-head small{color:var(--pine-mid);font-weight:500}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.8rem}
.act-card{background:var(--card);border:3px solid var(--line);border-radius:22px;padding:1rem .8rem .85rem;
  display:flex;flex-direction:column;align-items:center;gap:.5rem;transition:transform .12s ease,border-color .12s;text-align:center}
.act-card:active{transform:scale(.95)}
.act-card:hover{border-color:var(--leaf)}
.act-card .art{width:64px;height:64px}
.act-card .art svg{width:100%;height:100%}
.act-card b{font-size:1rem;line-height:1.2}
.mini-acorns{display:flex;gap:3px;min-height:18px}
.mission-card{margin-top:2rem;background:linear-gradient(135deg,#E4EBD3,#F2EED8);border:3px solid var(--leaf);border-radius:22px;
  padding:1.2rem 1.3rem;display:flex;gap:1rem;align-items:center}
.mission-card .art{flex:none;width:56px;height:56px}
.mission-card b{display:block;font-size:1.05rem;color:var(--moss-deep)}
.mission-card p{font-size:.95rem;color:var(--pine-mid)}
.tiny-note{text-align:center;font-size:.8rem;color:var(--pine-mid);padding:0 1.5rem 1.6rem;opacity:.8}

/* ---------- activity ---------- */
.act-top{display:flex;align-items:center;gap:.8rem;padding:.9rem 1.1rem}
.pips{display:flex;gap:.45rem;margin:0 auto}
.pip{width:16px;height:16px;border-radius:50%;background:var(--pine-soft);transition:background .3s,transform .3s}
.pip.done{background:var(--moss)}
.pip.now{background:var(--amber);transform:scale(1.25)}
.prompt-bar{display:flex;align-items:center;gap:.9rem;margin:0 1.1rem;background:var(--card);border:3px solid var(--line);
  border-radius:22px;padding:.9rem 1.1rem}
.prompt-bar .say-btn{flex:none;width:52px;height:52px;border-radius:50%;background:var(--moss);display:flex;align-items:center;justify-content:center;transition:transform .12s}
.prompt-bar .say-btn:active{transform:scale(.9)}
.prompt-bar .say-btn svg{width:26px;height:26px}
.prompt-text{font-size:1.28rem;font-weight:700;line-height:1.3}
.stage{flex:1;padding:1.2rem 1.1rem 2rem;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:1.4rem}

/* critters (tap-to-count) */
.crit{position:relative;width:56px;height:56px;transition:transform .15s;border:0;background:none}
.crit:active{transform:scale(1.12)}
.crit .chip{position:absolute;top:-12px;right:-8px;min-width:26px;height:26px;border-radius:50%;background:var(--amber);
  color:#3A2A10;font-weight:700;font-size:.95rem;display:none;align-items:center;justify-content:center;border:2px solid #fff;box-shadow:0 2px 4px rgba(0,0,0,.15);z-index:2}
.crit.counted .chip{display:flex;animation:pop .3s ease}
.crit.gone{opacity:.35;filter:grayscale(.7)}
.crit.gone::after{content:"✗";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--berry);font-size:1.7rem;font-weight:700}
@keyframes pop{from{transform:scale(.3)}60%{transform:scale(1.25)}to{transform:scale(1)}}

/* meadow scatter scene */
.meadow{position:relative;width:100%;max-width:520px;height:280px;background:linear-gradient(180deg,#EDF0DA,#E2EAD2);
  border:3px solid var(--line);border-radius:26px}
.meadow .crit{position:absolute;width:64px;height:64px}

/* choices */
.choices{display:flex;gap:.9rem;flex-wrap:wrap;justify-content:center}
.choice{min-width:88px;min-height:76px;background:var(--card);border:3px solid var(--line);border-radius:20px;
  display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:2rem;color:var(--pine);
  padding:.5rem .9rem;transition:transform .12s,border-color .2s,opacity .2s;box-shadow:0 4px 0 var(--line)}
.choice:active{transform:translateY(3px);box-shadow:0 1px 0 var(--line)}
.choice svg{width:100%;height:100%}
.choice.dim{opacity:.35;pointer-events:none}
.choice.yay{border-color:var(--moss);background:#EDF3DF;box-shadow:0 4px 0 var(--moss)}
.choice.wordy{font-family:var(--font-body);font-weight:700;font-size:1.5rem;letter-spacing:.02em}
.shake{animation:shake .4s ease}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}50%{transform:translateX(6px)}75%{transform:translateX(-4px)}}
.pop-in{animation:pop .35s ease}

/* ten frames */
.tframes{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}
.tframe{display:grid;grid-template-columns:repeat(5,52px);grid-auto-rows:52px;gap:6px;background:var(--card);
  border:3px solid var(--line);border-radius:16px;padding:10px}
.tcell{border:2px dashed var(--line);border-radius:10px;display:flex;align-items:center;justify-content:center}
.tcell .crit{width:40px;height:40px}
.tcell .crit .chip{top:-10px;right:-10px}

/* groups & equations */
.add-row{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;justify-content:center}
.add-group{display:flex;gap:.4rem;flex-wrap:wrap;justify-content:center;background:var(--card);border:3px dashed var(--line);border-radius:20px;padding:.8rem;max-width:260px}
.add-group--wide{max-width:440px}
.add-sign{font-family:var(--font-display);font-size:2.4rem;color:var(--clay)}
.side-card{display:flex;flex-direction:column;gap:.5rem;align-items:center}
.side-card .cluster{display:flex;gap:.3rem;flex-wrap:wrap;justify-content:center;max-width:190px}
.side-card .cluster span{width:44px;height:44px;display:block}

/* fly-away scene */
.branch-scene{position:relative;width:100%;max-width:520px;height:240px}
.branch-scene .branch-svg{position:absolute;left:0;right:0;bottom:36px;width:100%;height:60px}
.bird-spot{position:absolute;width:64px;height:64px;transition:transform 1.1s ease,opacity 1.1s ease}
.bird-spot.fly{transform:translate(60px,-150px) scale(.55) rotate(-8deg);opacity:0}
.away-row{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center;padding:1rem}
.away-row .bird-spot{position:relative;width:60px;height:60px}

/* letter & picture tiles */
.tile-row{display:flex;gap:.7rem;flex-wrap:wrap;justify-content:center}
.tile{width:72px;height:72px;border-radius:18px;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:2.1rem;transition:transform .15s,opacity .2s;box-shadow:0 4px 0 rgba(0,0,0,.12)}
.tile:active{transform:scale(.93)}
.tile-acorn{background:#EAD9B8;border:3px solid #C9AE7E;color:#6B4A26}
.tile-leaf{background:#DFE8C8;border:3px solid #A9BC85;color:#3F5A2C}
.tile.matched{opacity:.35;pointer-events:none;transform:scale(.9)}
.tile.said{border-color:var(--moss);background:#EDF3DF;color:var(--moss-deep)}
.tile.picked{border-color:var(--amber);box-shadow:0 0 0 4px rgba(216,154,62,.35),0 4px 0 rgba(0,0,0,.12)}
.slot-row{display:flex;gap:.55rem;flex-wrap:wrap;justify-content:center}
.slot{width:64px;height:64px;border-radius:16px;border:3px dashed var(--line);background:rgba(255,251,240,.6);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:2rem;color:var(--moss-deep)}
.slot.filled{border-style:solid;border-color:var(--moss);background:#EDF3DF;animation:pop .3s ease}
.oslot{width:84px;height:84px;border-radius:18px;border:3px dashed var(--line);background:rgba(255,251,240,.6);
  display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:1.5rem;color:var(--pine-mid)}
.oslot.filled{border-style:solid;border-color:var(--moss);background:#EDF3DF;animation:pop .3s ease}
.oslot .mini{width:64px;height:64px}

/* sentence building */
.sent-line{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;align-items:flex-end;min-height:70px;
  border-bottom:4px solid var(--line);padding:0 1rem .6rem;max-width:620px;width:100%}
.placed-word{font-family:var(--font-body);font-weight:700;font-size:1.25rem;color:var(--moss-deep);
  background:#EDF3DF;border:3px solid var(--moss);border-radius:14px;padding:.35rem .8rem;animation:pop .3s ease}
.tile.wordtile{width:auto;min-width:64px;padding:0 1rem;font-family:var(--font-body);font-weight:700;font-size:1.25rem;height:60px}
.sent-choice{display:block;width:100%;max-width:460px;text-align:left;background:var(--card);border:3px solid var(--line);
  border-radius:18px;padding:1rem 1.2rem;font-size:1.2rem;font-weight:500;color:var(--pine);
  transition:transform .12s,border-color .2s,opacity .2s;box-shadow:0 4px 0 var(--line)}
.sent-choice:active{transform:translateY(3px);box-shadow:0 1px 0 var(--line)}
.sent-choice.dim{opacity:.35;pointer-events:none}
.sent-choice.yay{border-color:var(--moss);background:#EDF3DF;box-shadow:0 4px 0 var(--moss)}
.sent-stack{display:grid;gap:.8rem;width:100%;justify-items:center}

/* pattern strip */
.pattern-strip{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;justify-content:center;background:var(--card);
  border:3px solid var(--line);border-radius:20px;padding:.9rem 1rem}
.pat-item{width:58px;height:58px}
.pat-item svg{width:100%;height:100%}
.pat-num{width:58px;height:58px;border-radius:14px;background:#EAD9B8;border:3px solid #C9AE7E;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:1.6rem;color:#6B4A26}
.pat-q{width:58px;height:58px;border-radius:14px;border:3px dashed var(--amber);display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:1.7rem;color:var(--amber-deep);background:rgba(216,154,62,.08)}

/* picture cards */
.pic-grid{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}
.pic-card{width:132px;background:var(--card);border:3px solid var(--line);border-radius:22px;padding:.9rem .6rem .7rem;
  display:flex;flex-direction:column;align-items:center;gap:.4rem;transition:transform .12s,opacity .2s,border-color .2s;box-shadow:0 4px 0 var(--line)}
.pic-card svg{width:84px;height:84px}
.pic-card span{font-weight:700;font-size:1rem;color:var(--pine-mid)}
.pic-card:active{transform:translateY(3px);box-shadow:0 1px 0 var(--line)}
.pic-card.dim{opacity:.35;pointer-events:none}
.pic-card.yay{border-color:var(--moss);background:#EDF3DF;box-shadow:0 4px 0 var(--moss)}
.pic-card.used{opacity:.35;pointer-events:none}
.pic-card.collected{border-color:var(--moss);background:#EDF3DF;pointer-events:none}
.hero-art{width:120px;height:120px}
.hero-art svg{width:100%;height:100%}

/* overlays */
.overlay{position:fixed;inset:0;display:none;align-items:center;justify-content:center;padding:1.2rem;z-index:60;background:rgba(30,58,44,.45);backdrop-filter:blur(3px)}
.overlay.on{display:flex}
.sheet{position:relative;width:min(460px,100%);background:var(--cream);border-radius:28px;border:4px solid var(--card);
  box-shadow:0 30px 80px -20px rgba(20,40,30,.5);padding:2rem 1.6rem;text-align:center;max-height:92dvh;overflow-y:auto}
.sheet h2{font-size:1.9rem;margin:.8rem 0 .4rem}
.sheet .sub{color:var(--pine-mid);margin-bottom:1.4rem}
.sheet-row{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap}
.big-star{width:110px;height:110px;margin:0 auto;animation:pop .5s ease}
.big-star svg{width:100%;height:100%}
.leaf-bits{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:59}
.leaf-bit{position:absolute;top:-40px;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(340deg)}}
.mission-box{margin-top:1.2rem;background:#E4EBD3;border:3px solid var(--leaf);border-radius:18px;padding:1rem;text-align:left;display:flex;gap:.8rem;align-items:center}
.mission-box svg{flex:none;width:44px;height:44px}
.mission-box b{color:var(--moss-deep)}
.mission-box p{font-size:.92rem;color:var(--pine-mid)}

/* welcome & grown-ups */
.field{width:100%;font:inherit;font-size:1.2rem;font-weight:700;color:var(--pine);background:var(--card);
  border:3px solid var(--line);border-radius:16px;padding:.85rem 1rem;text-align:center}
.field:focus{outline:3px solid var(--amber);border-color:transparent}
.grownup-note{font-size:.85rem;color:var(--pine-mid);margin:.6rem 0 1rem}
.hold-btn{position:relative;width:120px;height:120px;border-radius:50%;background:var(--card);border:4px solid var(--line);
  margin:1rem auto;display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:700;color:var(--moss-deep)}
.hold-ring{position:absolute;inset:-4px;border-radius:50%;pointer-events:none}
.parent-list{text-align:left;display:grid;gap:.9rem;margin:1.2rem 0}
.parent-item{display:flex;align-items:center;justify-content:space-between;gap:1rem;background:var(--card);border:3px solid var(--line);border-radius:16px;padding:.8rem 1rem}
.parent-item b{font-size:.98rem}
.parent-item small{display:block;color:var(--pine-mid);font-weight:400}
.switch{position:relative;width:58px;height:34px;border-radius:99px;background:var(--pine-soft);transition:background .2s;flex:none}
.switch.on{background:var(--moss)}
.switch::after{content:"";position:absolute;top:4px;left:4px;width:26px;height:26px;border-radius:50%;background:#fff;transition:left .2s}
.switch.on::after{left:28px}
.stars-table{display:grid;gap:.4rem;font-size:.92rem}
.stars-table div{display:flex;justify-content:space-between;gap:.6rem;color:var(--pine-mid)}
.danger{color:var(--berry);font-weight:700}
.parent-foot{font-size:.8rem;color:var(--pine-mid);margin-top:1rem}
.parent-foot a{color:var(--moss-deep)}

/* ---------- lesson engine ---------- */
.lesson-body{display:flex;flex-direction:column;align-items:center;gap:1.3rem;width:100%}
.story-card{background:var(--card);border:3px solid var(--line);border-radius:24px;padding:1.6rem 1.8rem;max-width:540px;text-align:center;font-size:1.28rem;line-height:1.55;color:var(--pine)}
.lesson-note{max-width:540px;width:100%;background:#EFE9D6;border:3px solid var(--line);border-radius:16px;padding:.2rem 1rem}
.lesson-note summary{cursor:pointer;font-weight:700;color:var(--moss-deep);padding:.6rem 0;list-style:none}
.lesson-note summary::-webkit-details-marker{display:none}
.lesson-note div{padding:.2rem 0 .9rem;color:var(--pine-mid);font-size:.95rem;display:grid;gap:.5rem;text-align:left}
.lesson-note b{color:var(--pine)}
.eq-big{font-family:var(--font-display);font-size:2.6rem;display:flex;gap:.9rem;align-items:center;background:var(--card);border:3px solid var(--line);border-radius:20px;padding:.8rem 1.6rem}
.eq-big .eq-a{color:var(--moss-deep)}
.eq-big .eq-b{color:#4A7390}
.eq-big .eq-r{color:var(--amber-deep)}
.qgwrap{display:flex;gap:1.2rem;align-items:center;justify-content:center;flex-wrap:wrap;min-height:110px}
.qg{display:grid;grid-template-columns:repeat(5,38px);gap:7px;justify-content:center}
.qg + .qg{margin-top:12px}
.qg-sq{width:38px;height:38px;border-radius:9px;background:#E8B461;border:2.5px solid #B47B2A;position:relative;animation:pop .3s ease backwards}
.qg-sq.b{background:#9DBF8A;border-color:#55763B}
.qg-sq.lit{box-shadow:0 0 0 4px rgba(216,154,62,.45);transform:scale(1.12);transition:transform .2s,box-shadow .2s}
.qg-sq.done-lit{transition:transform .3s,box-shadow .3s}
.qg-sq.bye{transform:translate(46px,42px) rotate(14deg);opacity:0;transition:transform .55s ease,opacity .55s ease}
.qg-sq .chip2{position:absolute;top:-11px;right:-9px;min-width:22px;height:22px;border-radius:50%;background:var(--amber);color:#3A2A10;font-weight:700;font-size:.8rem;display:flex;align-items:center;justify-content:center;border:2px solid #fff;z-index:2}
.qg-label{font-family:var(--font-display);font-size:1.7rem;color:var(--pine);text-align:center;margin-top:.45rem;min-height:1.2em}
.qg-cluster{display:flex;flex-direction:column;align-items:center;transition:transform .45s ease,opacity .45s ease}
.qg-cluster.merge-l{transform:translateX(40px);opacity:0}
.qg-cluster.merge-r{transform:translateX(-40px);opacity:0}
.nl-wrap{width:100%;max-width:640px}
.nl-wrap svg{width:100%;height:auto;overflow:visible}
.nl-num{font-family:Georgia,serif;font-size:19px;fill:rgba(30,58,44,.6)}
.nl-num.start{fill:var(--moss-deep);font-weight:bold;font-size:21px}
.nl-num.visited{fill:var(--amber-deep);font-weight:bold}
.nl-num.landed{fill:#96471F;font-weight:bold;font-size:22px}
.jump-label{font-family:var(--font-body);font-weight:700;font-size:15px;fill:var(--clay)}
.lesson-actions{display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center}
.os-panel{margin-top:1.2rem;background:var(--card);border:3px solid var(--moss);border-radius:18px;padding:1rem 1.2rem;text-align:left;display:grid;gap:.45rem}
.os-panel b{color:var(--moss-deep);font-size:.95rem}
.os-panel div{color:var(--pine);font-size:.95rem}
.os-panel div span{color:var(--moss-deep);font-weight:700;margin-right:.4rem}
.os-panel small{color:var(--pine-mid);font-size:.78rem;margin-top:.3rem}

@media (max-width:480px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .tile{width:60px;height:60px;font-size:1.8rem}
  .slot{width:52px;height:52px;font-size:1.6rem}
  .oslot{width:70px;height:70px}
  .oslot .mini{width:52px;height:52px}
  .pic-card{width:104px}
  .pic-card svg{width:64px;height:64px}
  .tframe{grid-template-columns:repeat(5,44px);grid-auto-rows:44px}
  .tcell .crit{width:34px;height:34px}
  .meadow{height:250px}
  .prompt-text{font-size:1.12rem}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01s!important;transition-duration:.01s!important}
}