@font-face{font-family:Heebo;src:url(fonts/heebo.woff2) format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Frank Ruhl Libre';src:url(fonts/frank.woff2) format('woff2');font-weight:300 900;font-display:swap}
:root{--sky:#bfe6ff;--sky2:#e9f7ff;--ink:#3b2a20;--wood:#c98b4f;--wood2:#a86a34;--green:#5cb85c;--good:#3fae5a;--bad:#e8774a;--gold:#ffc83d;--card:#fffaf0;--hud:64px;
  --fs:clamp(16px,1.2vmin + 10px,24px)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:var(--sky);color:var(--ink);font-family:Heebo,system-ui,sans-serif;font-size:var(--fs);
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;overscroll-behavior:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;touch-action:manipulation}
svg{display:block}
#app{position:fixed;inset:0;display:flex;flex-direction:column;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.screen{position:absolute;inset:0;display:none;flex-direction:column}
.screen.on{display:flex}
.btn{min-height:64px;min-width:64px;padding:12px 26px;border-radius:999px;background:var(--gold);color:#4a2f10;font-weight:800;font-size:1.1em;
  box-shadow:0 5px 0 #d99a1a,0 8px 18px rgba(0,0,0,.15);transition:transform .1s;display:inline-flex;align-items:center;justify-content:center;gap:.4em}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 #d99a1a}
.btn.green{background:#7bd36b;color:#14421a;box-shadow:0 5px 0 #4f9e42,0 8px 18px rgba(0,0,0,.15)}
.btn.blue{background:#7cc3f5;color:#0f3557;box-shadow:0 5px 0 #4a92c7,0 8px 18px rgba(0,0,0,.15)}
.btn.white{background:#fff;box-shadow:0 5px 0 #d8cfc0,0 8px 18px rgba(0,0,0,.12)}
.ibtn{width:56px;height:56px;border-radius:18px;background:rgba(255,255,255,.85);display:grid;place-items:center;box-shadow:0 3px 0 rgba(0,0,0,.12);flex:none}
.ibtn svg{width:30px;height:30px}
/* ---------- title ---------- */
#title{background:linear-gradient(#8fd3ff,#d9f2ff 60%,#bfe8a8 60%,#8fcf6d);align-items:center;justify-content:center;text-align:center;overflow:hidden}
#title .sun{position:absolute;top:6%;right:8%;width:22vmin;height:22vmin;border-radius:50%;background:#ffe27a;box-shadow:0 0 60px #ffe27a}
#title .rainbowbg{position:absolute;width:150vmin;height:75vmin;left:50%;top:22%;transform:translateX(-50%);border-radius:75vmin 75vmin 0 0;opacity:.45;
  background:radial-gradient(circle at 50% 100%,transparent 50%,#9b6fd1 50% 53%,#5aa0e8 53% 56%,#5cc77a 56% 59%,#ffd84a 59% 62%,#ffa23e 62% 65%,#f36b6b 65% 68%,transparent 68%)}
#title h1{margin:0;font-size:clamp(40px,9vmin,92px);font-weight:900;color:#fff;text-shadow:0 4px 0 #2e6fa6,0 8px 20px rgba(0,0,0,.2);line-height:1;position:relative}
#title .heb{font-family:'Frank Ruhl Libre',serif;font-size:clamp(28px,6vmin,60px);color:#2e5f8f;font-weight:700;direction:rtl;position:relative}
#title .tag{font-weight:700;color:#2e5f8f;margin:.3em 0 1em;position:relative}
#title .hero{width:min(80vw,70vh,560px);position:relative;animation:bob 3s ease-in-out infinite;margin:1vh 0}
#title .row{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;position:relative}
#title .corner{position:absolute;top:calc(env(safe-area-inset-top) + 12px);right:12px;z-index:2}
#title .critters{position:absolute;bottom:2%;left:0;right:0;display:flex;justify-content:space-around;pointer-events:none}
#title .critters svg{width:16vmin;max-width:120px}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-10px) rotate(1deg)}}
@media (orientation:landscape) and (max-height:500px){#title .hero{width:min(42vw,62vh)} #title .critters{display:none} #title .tag{margin:.2em 0 .5em}}
/* ---------- level select ---------- */
#levels{background:linear-gradient(#bfe6ff,#fef6e4);padding:16px}
#levels header{display:flex;align-items:center;gap:12px;margin-bottom:12px}
#levels h2{margin:0;font-size:1.5em}
.lgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;overflow:auto;padding:4px 4px 24px}
@media (orientation:landscape){.lgrid{grid-template-columns:repeat(4,1fr)}}
.lcard{background:var(--card);border-radius:22px;padding:10px;display:flex;flex-direction:column;align-items:center;gap:4px;box-shadow:0 4px 0 #e3d5bb;min-height:120px;position:relative;text-align:center}
.lcard .num{position:absolute;top:8px;left:12px;font-weight:900;color:#a57b4f}
.lcard .ic{width:70%;max-width:110px;height:60px;display:grid;place-items:center}.lcard .ic svg{max-height:60px;width:auto;max-width:100%}
.lcard b{font-size:.85em;line-height:1.1}
.lcard.locked{opacity:.55;filter:grayscale(.7)}
.lcard .lk{position:absolute;inset:0;display:grid;place-items:center;color:#7a6a5a}.lcard .lk svg{width:40px}
.stars{display:flex;gap:2px;justify-content:center}.stars svg{width:22px;height:22px;fill:#e2d6c2}.stars svg.on{fill:var(--gold);filter:drop-shadow(0 1px 0 #c9921b)}
/* ---------- game ---------- */
#game{background:var(--sky)}
.hud{height:var(--hud);display:flex;align-items:center;gap:8px;padding:4px 8px;flex:none;z-index:5}
.hud .lname{flex:1;font-weight:800;font-size:.95em;line-height:1.1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hud .lname small{display:block;font-weight:600;opacity:.7;font-size:.75em}
.src{height:48px;border-radius:999px;background:#fff8e6;padding:0 12px 0 6px;display:flex;align-items:center;gap:6px;font-weight:700;font-size:.75em;box-shadow:0 3px 0 rgba(0,0,0,.1);min-width:48px}
.src svg{width:28px;height:28px}
@media (max-width:420px){.src span{display:none}.src{padding:0 10px}}
.banner{margin:0 10px;background:rgba(255,255,255,.92);border-radius:20px;padding:8px 14px;display:flex;align-items:center;gap:10px;box-shadow:0 3px 0 rgba(0,0,0,.08);flex:none;min-height:56px;z-index:4}
.banner .av{width:46px;flex:none}
.banner .tx b{display:block;font-size:1.02em;line-height:1.15}
.banner .tx span{display:block;font-size:.8em;opacity:.8;line-height:1.2}
.stage{position:relative;flex:1;min-height:0;overflow:hidden}
.toast{position:absolute;left:50%;top:calc(var(--hud) + 72px);transform:translate(-50%,-20px);opacity:0;background:#fff;border-radius:20px;padding:10px 18px;font-weight:800;box-shadow:0 6px 18px rgba(0,0,0,.18);z-index:30;
  max-width:92%;text-align:center;pointer-events:none;transition:all .25s;border:3px solid #fff}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast.good{border-color:#7bd36b;color:#1f6b2c}.toast.bad{border-color:#f5a97f;color:#8a3b14}
.shake{animation:shake .45s}
@keyframes shake{20%{transform:translateX(-10px)}40%{transform:translateX(9px)}60%{transform:translateX(-6px)}80%{transform:translateX(4px)}}
.pulse{animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.07)}}
.drag{touch-action:none;cursor:grab}
.dragging{z-index:50;filter:drop-shadow(0 10px 10px rgba(0,0,0,.25));transition:none!important}
.zone-hi{outline:4px dashed #fff;outline-offset:4px}
.center{display:flex;flex-direction:column;align-items:center;justify-content:safe center;height:100%;gap:14px;padding:12px;text-align:center;overflow-y:auto}
.choices{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;width:100%;max-width:720px}
.choices .btn{flex:1 1 140px;max-width:340px}
.ground{position:absolute;left:0;right:0;bottom:0;height:24%;background:#8fcf6d;border-radius:50% 50% 0 0/20% 20% 0 0}
/* sparkle & confetti */
.spark{position:fixed;width:14px;height:14px;pointer-events:none;z-index:90;animation:spark .8s ease-out forwards}
@keyframes spark{to{transform:translate(var(--dx),var(--dy)) scale(.2) rotate(200deg);opacity:0}}
.conf{position:fixed;top:-20px;width:10px;height:16px;z-index:95;pointer-events:none;animation:conf linear forwards}
@keyframes conf{to{transform:translateY(110vh) rotate(720deg)}}
/* ---------- overlays ---------- */
.overlay{position:fixed;inset:0;background:rgba(30,50,80,.45);display:none;align-items:center;justify-content:center;z-index:80;padding:16px}
.overlay.on{display:flex}
.card{background:var(--card);border-radius:28px;padding:20px;max-width:620px;width:100%;max-height:100%;overflow:auto;box-shadow:0 12px 40px rgba(0,0,0,.25);text-align:center}
.card h3{margin:.1em 0 .4em;font-size:1.3em}
.pasuk-he{font-family:'Frank Ruhl Libre',serif;direction:rtl;font-size:1.35em;line-height:1.7;background:#fff3d6;border-radius:16px;padding:10px 14px;margin:8px 0}
.pasuk-en{font-size:.95em;line-height:1.4}
.pasuk-note{font-size:.85em;opacity:.8;margin-top:8px}
.bigstars{display:flex;justify-content:center;gap:8px;margin:10px 0}
.bigstars svg{width:min(18vmin,90px);height:min(18vmin,90px);fill:#e2d6c2;transform:scale(0)}
.bigstars svg.pop{animation:popin .5s cubic-bezier(.3,1.8,.5,1) forwards}
.bigstars svg.on{fill:var(--gold);filter:drop-shadow(0 3px 0 #c9921b)}
@keyframes popin{to{transform:scale(1)}}
.card .row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:12px}
/* ---------- cutscene ---------- */
#cut{position:fixed;inset:0;z-index:70;display:none;overflow:hidden;background:#000}
#cut.on{display:block}
#cut .scene{position:absolute;inset:0;overflow:hidden}
#cut .cap{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom) + 6%);transform:translateX(-50%);width:min(92%,760px);background:rgba(255,255,255,.93);border-radius:22px;
  padding:14px 20px;font-weight:800;font-size:1.15em;text-align:center;box-shadow:0 8px 24px rgba(0,0,0,.25);transition:opacity .4s;z-index:10}
#cut .cap .ref{display:block;font-size:.65em;font-weight:600;opacity:.7;margin-top:4px}
#cut .skipb{position:absolute;top:calc(env(safe-area-inset-top) + 12px);right:12px;z-index:11}
.layer{position:absolute;inset:0;transition:opacity 1.2s, transform 1.2s}
.rays{position:absolute;left:50%;top:-30%;width:160vmax;height:160vmax;transform:translateX(-50%);opacity:0;transition:opacity 1.5s;
  background:repeating-conic-gradient(from 0deg at 50% 50%,rgba(255,240,180,.55) 0 6deg,transparent 6deg 18deg);border-radius:50%;
  -webkit-mask:radial-gradient(circle,#000 0,transparent 60%);mask:radial-gradient(circle,#000 0,transparent 60%);animation:spin 40s linear infinite}
.glow{position:absolute;left:50%;top:-25vmin;width:80vmin;height:80vmin;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle,rgba(255,248,210,.95),rgba(255,230,150,.4) 40%,transparent 70%);opacity:0;transition:opacity 1.5s}
@keyframes spin{to{transform:translateX(-50%) rotate(360deg)}}
.rain{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity 1.5s}
.rain i{position:absolute;top:-10%;width:2px;height:7%;background:linear-gradient(transparent,rgba(220,235,255,.9));border-radius:2px;animation:fall .7s linear infinite}
@keyframes fall{to{transform:translateY(120vh) translateX(-4vh)}}
.water{position:absolute;left:-10%;right:-10%;bottom:0;height:0;transition:height 4s ease-in-out;background:linear-gradient(#4f9fd8,#2a6aa8)}
.water::before{content:'';position:absolute;left:0;right:0;top:-18px;height:20px;background:radial-gradient(circle at 20px 22px,#4f9fd8 20px,transparent 21px) 0 0/40px 20px repeat-x;animation:wave 2s linear infinite}
@keyframes wave{to{background-position:40px 0}}
.flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.flash.go{animation:flash .9s}
@keyframes flash{10%{opacity:.6}20%{opacity:.1}30%{opacity:.45}100%{opacity:0}}
.floaty{animation:floaty 3s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-8px) rotate(2deg)}}
.cloud{position:absolute;background:#fff;border-radius:999px;transition:all 2s}
.cloud::before,.cloud::after{content:'';position:absolute;background:inherit;border-radius:50%}
.cloud::before{width:50%;height:150%;left:15%;bottom:20%}.cloud::after{width:40%;height:120%;right:12%;bottom:30%}
/* ---------- build level ---------- */
.trees{position:absolute;inset:0;display:flex;flex-wrap:wrap;align-items:flex-end;align-content:flex-end;justify-content:space-around;padding:0 4% 12%;gap:8px 0}
@media (orientation:landscape){.trees{flex-wrap:nowrap}.tree{width:min(20vw,40vh,200px)}}
.tree{width:min(40vw,24vh,200px);position:relative;transform-origin:50% 100%;transition:transform 1s cubic-bezier(.5,0,.8,.4),opacity .5s}
.tree.fall{transform:rotate(88deg);opacity:0}
.tree.hit{animation:hit .25s}
@keyframes hit{30%{transform:rotate(-4deg)}70%{transform:rotate(3deg)}}
.tree .lbl{position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);background:#fff;border-radius:10px;padding:0 8px;font-size:.62em;font-weight:800;white-space:nowrap}
.tree .chips{position:absolute;bottom:22%;left:50%;width:60%;height:10px;transform:translateX(-50%);display:flex;gap:4px;justify-content:center}
.tree .chips i{width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid #a86a34}.tree .chips i.on{background:#a86a34}
.logpile{position:absolute;left:12px;bottom:12px;background:rgba(255,255,255,.85);border-radius:16px;padding:6px 12px;font-weight:800;display:flex;align-items:center;gap:8px;z-index:3}
.logpile .lg{display:flex;gap:2px}.logpile .lg i{width:14px;height:22px;border-radius:7px;background:#b5763c;border:2px solid #7a4a22}
.dim{display:flex;flex-direction:column;align-items:center;justify-content:space-evenly;height:100%;padding:8px 10px;gap:8px}
.slotwrap{width:min(96%,900px)}
.slotlabel{display:flex;justify-content:space-between;font-weight:800;margin-bottom:4px}
.slot{height:clamp(56px,10vmin,84px);border-radius:14px;border:4px dashed #6b9bc4;background:rgba(255,255,255,.6);position:relative;display:flex;overflow:hidden}
.slot.full{border:4px solid var(--good);background:#e8f8e4}
.slot .seg{height:100%;background:repeating-linear-gradient(90deg,#c98b4f 0 18px,#b5763c 18px 20px);border-right:3px solid #7a4a22;display:grid;place-items:center;color:#fff;font-weight:800;font-size:.75em;text-shadow:0 1px 2px #000;animation:popin .3s;transform:scale(1)}
.ticks{position:absolute;inset:auto 0 0 0;height:10px;background:repeating-linear-gradient(90deg,#6b9bc4 0 2px,transparent 2px 10%);opacity:.6;pointer-events:none}
.tray{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;align-items:center;width:100%}
.board{height:clamp(56px,9vmin,72px);border-radius:12px;background:repeating-linear-gradient(90deg,#d99a5b 0 22px,#c98b4f 22px 24px);border:3px solid #7a4a22;color:#fff;font-weight:900;
  display:grid;place-items:center;text-shadow:0 1px 2px #5a3a1a;min-width:72px;box-shadow:0 4px 0 #7a4a22;white-space:nowrap;padding:0 8px;font-size:.9em}
.amahbox{display:flex;align-items:center;gap:10px;background:#fff8e6;border-radius:14px;padding:4px 12px;font-size:.75em;font-weight:700;max-width:100%}
.amahbox .amah{width:110px;flex:none}
.arkmini{display:flex;gap:6px;font-weight:800;font-size:.8em}.arkmini span{background:#fff;border-radius:10px;padding:2px 10px}.arkmini span.ok{background:#c9efc0}
.xsec{position:relative;width:min(70vw,48vh,420px);aspect-ratio:50/40}
.xsec .hull{position:absolute;left:0;right:0;bottom:0;height:75%;background:#f0d2a8;border:8px solid #a86a34;border-radius:6px 6px 14px 14px}
.xsec .roof{position:absolute;left:0;right:0;top:0;height:25%;clip-path:polygon(0 100%,44% 0,56% 0,100% 100%);background:#a86a34}
.xsec .deck{position:absolute;left:0;right:0;height:10px;background:#7a4a22;border-radius:4px;animation:popin .3s;transform:scale(1)}
.xsec .deck span{position:absolute;left:50%;transform:translate(-50%,-110%);font-size:.65em;font-weight:800;background:#fff;border-radius:8px;padding:0 6px;white-space:nowrap}
.plank{width:min(60vw,320px);height:clamp(48px,8vmin,64px)}
.sideark{position:relative;width:min(94vw,120vh,760px);max-height:100%}
.spot{position:absolute;border:4px dashed rgba(255,255,255,.95);border-radius:12px;background:rgba(255,255,255,.18)}
.spot.hi{background:rgba(123,211,107,.45)}
.part{width:clamp(80px,14vmin,120px);height:clamp(80px,14vmin,120px);border-radius:18px;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:.7em;font-weight:800;box-shadow:0 4px 0 #d8cfc0;gap:4px;text-align:center;line-height:1.05}
.part svg{width:55%;height:auto}
.paintgrid{position:absolute;display:grid;touch-action:none;pointer-events:none}
.paintgrid i{background:transparent;transition:background .2s}
.paintgrid i.p{background:rgba(35,25,20,.92)}
.paintgrid.inside i.p{background:rgba(35,25,20,.85)}
.bucket{display:flex;flex-direction:column;align-items:center;gap:4px;background:#fff;border-radius:20px;padding:10px 14px;box-shadow:0 4px 0 #d8cfc0;min-width:110px;font-weight:800;font-size:.8em}
.bucket svg{width:64px;height:64px}
.insideview{position:relative;width:min(94vw,120vh,760px);aspect-ratio:320/130}
.insideview .wall{position:absolute;left:6.25%;right:6.25%;top:20%;bottom:12%;background:repeating-linear-gradient(0deg,#e6b98a 0 14px,#d9a571 14px 16px);border:6px solid #8a5a32;border-radius:8px}
.insideview .wall b{position:absolute;left:0;right:0;height:6px;background:#8a5a32}
/* ---------- family / board ---------- */
.arkscene{position:absolute;inset:0;background:linear-gradient(var(--sky) 60%,#8fcf6d 60%)}
.arkscene .ark{position:absolute;left:4%;top:4%;width:92%}
.arkscene .doorzone{position:absolute;border-radius:14px}
.crowd{position:absolute;left:0;right:0;bottom:2%;display:flex;flex-wrap:wrap;justify-content:center;gap:2px 4px;padding:0 6px}
.who{width:min(22vw,12vh,120px);display:flex;flex-direction:column;align-items:center;transition:transform .9s ease-in,opacity .9s ease-in}
.who .nm{font-size:.62em;font-weight:800;background:#fff;border-radius:10px;padding:0 6px;white-space:nowrap;margin-top:-4px}
.who.gone{opacity:0;pointer-events:none}
.counter{position:absolute;right:10px;top:10px;background:#fff;border-radius:18px;padding:6px 14px;font-weight:900;font-size:1.1em;z-index:3;box-shadow:0 3px 0 rgba(0,0,0,.1)}
@media (orientation:landscape){
  .arkscene .ark{width:min(48%,110vh);top:8%}
  .who{width:min(11vw,22vh,110px)}
  .crowd{left:auto;right:1%;width:52%;bottom:4%}
}
/* ---------- sort ---------- */
.sort{position:absolute;inset:0;display:grid;grid-template-areas:"card card" "k n";grid-template-rows:1fr auto;gap:10px;padding:10px}
@media (orientation:landscape){.sort{grid-template-areas:"k card n";grid-template-columns:1fr 1.2fr 1fr;grid-template-rows:1fr}}
.sort .acard{grid-area:card;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:0}
.sort .acard .mover{width:min(56vw,34vh,260px);background:#fff;border-radius:26px;padding:10px;box-shadow:0 6px 0 #d8cfc0;display:flex;flex-direction:column;align-items:center}
.sort .acard .mover b{font-size:1.2em}
.pen{border-radius:24px;padding:10px;display:flex;flex-direction:column;align-items:center;gap:6px;min-height:140px;border:5px solid;position:relative;transition:transform .2s}
.pen.k{grid-area:k;background:#e4f7de;border-color:#7bd36b}.pen.n{grid-area:n;background:#fdeee3;border-color:#f5a97f}
.pen .ph{font-weight:900;font-size:1.05em;display:flex;align-items:center;gap:6px}
.pen .ph i{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:#fff;font-style:normal;font-size:.9em}
.pen.k .ph i{background:var(--good)}.pen.n .ph i{background:var(--bad)}
.pen .in{display:flex;flex-wrap:wrap;gap:2px;justify-content:center}
.pen .in svg{width:clamp(34px,6vmin,52px)}
.pen.hi{transform:scale(1.04)}
.traits{display:flex;gap:8px;font-size:.75em;font-weight:800;flex-wrap:wrap;justify-content:center}
.traits span{background:#fff;border-radius:10px;padding:2px 8px}
.lesson{display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap}
.lesson .sign{background:#fff;border-radius:20px;padding:10px 14px;font-weight:800;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:130px;box-shadow:0 4px 0 #d8cfc0}
.lesson .sign svg{width:70px;height:56px}
/* ---------- board ---------- */
.herd{position:absolute;right:4%;bottom:6%;display:flex;flex-direction:column;align-items:center;gap:4px;background:rgba(255,255,255,.55);border-radius:24px;padding:8px 12px;border:4px dashed #fff}
.herd .hs{display:flex}.herd .hs svg{width:clamp(56px,10vmin,96px);margin-left:-18px}.herd .hs svg:first-child{margin-left:0}
.walker{position:absolute;width:clamp(48px,8vmin,80px);z-index:4;transition:left 1.1s ease-in-out,top 1.1s ease-in-out,opacity .3s 1s,transform 1.1s}
.boardbar{position:absolute;left:10px;bottom:10px;display:flex;flex-direction:column;gap:8px;align-items:flex-start;z-index:5}
.tally{background:#fff;border-radius:18px;padding:6px 14px;font-weight:900;font-size:1.2em}
.parade{position:absolute;left:0;right:0;bottom:8%;height:22%;overflow:hidden}
.parade .pa{position:absolute;bottom:0;width:clamp(56px,10vmin,96px);animation:march 5s linear forwards}
.parade .pa b{position:absolute;top:-6px;left:50%;transform:translateX(-50%);background:#fff;border-radius:8px;font-size:.55em;padding:0 5px;white-space:nowrap}
@keyframes march{from{left:105%}to{left:-25%}}
/* ---------- feed ---------- */
.feed{position:absolute;inset:0;display:flex;flex-direction:column;transition:background 1.5s;background:linear-gradient(#e9c79a,#d9a86e)}
.feed.night{background:linear-gradient(#5a4a6e,#3b3150)}
.feed .stalls{flex:1;display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:10px;min-height:0}
@media (orientation:landscape){.feed .stalls{grid-template-columns:repeat(4,1fr)}}
.stall{position:relative;background:rgba(255,255,255,.35);border-radius:22px;border:4px solid #a86a34;display:flex;align-items:flex-end;justify-content:center;padding:6px;min-height:0;overflow:visible}
.stall .an{width:min(100%,24vh,190px);transition:transform .3s}
.stall .an.sad{filter:saturate(.6)}
.stall .want{position:absolute;top:6px;right:6px;width:clamp(56px,10vmin,80px);height:clamp(56px,10vmin,80px);border-radius:50%;background:conic-gradient(#7bd36b calc(var(--p,1)*360deg),#f2e6d6 0);display:grid;place-items:center;opacity:0;transform:scale(.3);transition:all .25s}
.stall .want.on{opacity:1;transform:scale(1)}
.stall .want.late{background:conic-gradient(#f5a97f 360deg,#f5a97f 0);animation:pulse 1s infinite}
.stall .want>div{width:78%;height:78%;border-radius:50%;background:#fff;display:grid;place-items:center}.stall .want svg{width:70%}
.stall .heart{position:absolute;top:20%;left:50%;font-size:1.6em;animation:heart 1s forwards;pointer-events:none}
@keyframes heart{to{transform:translateY(-60px);opacity:0}}
.foods{display:flex;gap:12px;justify-content:center;padding:10px;background:rgba(255,255,255,.5);flex:none}
.food{width:clamp(70px,12vmin,96px);height:clamp(70px,12vmin,96px);background:#fff;border-radius:22px;display:grid;place-items:center;box-shadow:0 4px 0 #d8cfc0}
.food svg{width:75%}.food.sel{outline:5px solid var(--gold)}
.dn{position:absolute;left:10px;top:10px;background:#fff;border-radius:16px;padding:4px 12px;font-weight:900;z-index:3}
/* ---------- birds / exit ---------- */
.seascene{position:absolute;inset:0;overflow:hidden;background:linear-gradient(#a9d8f5,#e4f4ff)}
.seascene .mtn{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:120%;height:42%;background:#8a7a64;clip-path:polygon(10% 100%,40% 20%,50% 8%,60% 20%,90% 100%)}
.seascene .sea{position:absolute;left:0;right:0;bottom:0;height:26%;background:linear-gradient(#5aa8e0,#2f74b5);transition:height 2s}
.seascene .ark{position:absolute;left:50%;bottom:22%;width:min(70%,90vh,560px);transform:translateX(-50%)}
.bird{position:absolute;min-height:64px;width:clamp(96px,18vmin,150px);z-index:5;transition:left 1.6s ease-in-out,top 1.6s ease-in-out,transform .3s}
.bird .flyer .wingA{transform-origin:64px 40px;animation:flap .3s ease-in-out infinite alternate}
@keyframes flap{to{transform:scaleY(-.6)}}
.sunbtn{position:absolute;right:6%;top:6%;width:clamp(80px,15vmin,130px);height:clamp(80px,15vmin,130px);border-radius:50%;background:radial-gradient(#fff6b0,#ffd24a);box-shadow:0 0 40px #ffe27a;display:grid;place-items:center;font-weight:900;font-size:1.6em;color:#8a5a10}
.meadow{position:absolute;inset:0;background:linear-gradient(#9fdcff,#e8f8ff 55%,#9fd67a 55%,#7cc35a)}
.meadow .ark{position:absolute;left:4%;top:28%;width:min(60%,90vh,520px)}
.out{position:absolute;width:clamp(50px,8.5vmin,86px);transition:left 1.4s ease-out,top 1.4s ease-out;z-index:3}
.rbsky{position:absolute;left:0;right:0;top:0;height:55%;touch-action:none;z-index:4}
.rbarc{position:absolute;left:50%;transform:translateX(-50%) scale(.6);opacity:0;border-radius:50%;border-style:solid;transition:all .6s;pointer-events:none;box-sizing:border-box}
.rbarc.on{opacity:.9;transform:translateX(-50%) scale(1)}
.flower{position:absolute;width:20px;height:20px;border-radius:50%;animation:popin .6s forwards;transform:scale(0)}
/* finale */
.finale{background:linear-gradient(#9fdcff,#fff7e0)}

@media (orientation:landscape) and (max-height:520px){
  :root{--hud:54px}
  .ibtn{width:50px;height:50px}.src{height:44px}
  .banner{min-height:44px;padding:4px 12px}.banner .av{width:34px}
  .banner .tx span{font-size:.72em}
  .dim.side{flex-direction:row;justify-content:center}
  .dim.side .tray{flex-direction:column;width:auto}
  .dim.side .sideark{width:min(68vw,(100vh - 140px)*2.3)}
  .dim.side .xsec{width:min(50vw,(100vh - 150px)*1.25)}
  .dim .amahbox{display:none}
  .toast{top:calc(var(--hud) + 52px)}
}

@media (orientation:landscape) and (max-height:520px){.center{gap:8px;padding:6px}.age-row{flex-direction:row}}
@media (orientation:landscape){.agewrap{flex-direction:row}.agewrap .choices{max-width:380px}}

.scenery{position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(#9fdcff,#e6f6ff 62%)}
.scenery .hills{position:absolute;left:-10%;right:-10%;bottom:0;height:30%;background:#8fcf6d;border-radius:50% 50% 0 0/30% 30% 0 0;box-shadow:inset 0 10px 0 #a5dc84}
.scenery .dtree{position:absolute;bottom:18%;width:min(20vw,18vh,150px);opacity:.9}
.scenery .dtree.l{left:-3%}.scenery .dtree.r{right:-3%}
.scenery .noachside{position:absolute;left:1%;bottom:2%;width:min(17vw,15vh,120px)}
.stage>.center,.stage>.dim{position:relative;z-index:1}
.stage>.trees,.stage>.logpile{z-index:1}
.paintgrid.inside{clip-path:none}

/* ---- voice narration (v1.1) ---- */
.cbtns{display:flex;gap:8px}
.banner .tx{flex:1;min-width:0}
.rpt{display:none;width:60px;height:60px;flex:none;border-radius:50%;background:#ffd84a;color:#6b4300;place-items:center;box-shadow:0 4px 0 #d9a92a;border:0;padding:0;cursor:pointer}
.rpt svg{width:34px;height:34px}
.rpt:active{transform:translateY(3px);box-shadow:0 1px 0 #d9a92a}
.banner.canrpt .rpt{display:grid}
.vceBtn.off{opacity:.75}
@media (max-width:420px){ .hud .ibtn{width:46px;height:46px;border-radius:15px} .hud .ibtn svg{width:26px;height:26px} .hud{gap:6px} .rpt{width:54px;height:54px} }
@media (orientation:landscape) and (max-height:520px){ .rpt{width:46px;height:46px} .rpt svg{width:28px;height:28px} }

/* ---- points (v1.1) ---- */
.score{display:flex;align-items:center;gap:4px;background:rgba(255,255,255,.9);border-radius:999px;padding:4px 12px 4px 6px;font-weight:900;font-size:1.15em;flex:none;box-shadow:0 3px 0 rgba(0,0,0,.1);min-width:64px;justify-content:center}
.score svg{width:28px;height:28px}
.score.bump{animation:sbump .45s cubic-bezier(.3,1.8,.5,1)}
@keyframes sbump{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}
.ptpop{position:fixed;z-index:60;transform:translate(-50%,-50%);font-weight:900;font-size:1.8em;color:#e8a300;-webkit-text-stroke:1.5px #fff;text-shadow:0 2px 0 rgba(0,0,0,.18);pointer-events:none;animation:ptup 1.25s ease-out forwards}
@keyframes ptup{0%{opacity:0;transform:translate(-50%,-30%) scale(.6)}20%{opacity:1;transform:translate(-50%,-70%) scale(1.15)}100%{opacity:0;transform:translate(-50%,-220%) scale(1)}}
.lvpts{display:flex;align-items:center;justify-content:center;gap:6px;font-size:1.1em;margin-top:6px}.lvpts svg{width:26px;height:26px}
.lvbest{opacity:.7;font-weight:700;font-size:.9em}
.lcard .lbest{display:block;font-weight:800;opacity:.75;font-size:.8em}
@media (max-width:420px){ .score{font-size:1em;min-width:54px;padding:3px 9px 3px 4px} .score svg{width:22px;height:22px} #srcBtn span{display:none} }

.bird[disabled]{opacity:1}

.finale .center{overflow-y:auto}
@media (orientation:landscape) and (max-height:520px){ .finale .center{gap:6px} .finale .center>div:first-child{display:none} }

/* ---- point celebration (v1.2) ---- */
.flystar{position:fixed;z-index:61;width:32px;height:32px;pointer-events:none;will-change:transform,opacity;filter:drop-shadow(0 2px 0 #c9921b)}
.flystar svg{width:100%;height:100%;fill:#ffc83d;stroke:#fff;stroke-width:1.4;stroke-linejoin:round}
.score.bump.big{animation:sbumpbig .55s cubic-bezier(.3,1.8,.5,1)}
@keyframes sbumpbig{0%{transform:scale(1)}35%{transform:scale(1.5) rotate(-4deg)}65%{transform:scale(.95) rotate(2deg)}100%{transform:scale(1)}}
.ptpop{font-size:2.4em}
.ptpop.big{font-size:3em;color:#ffb300}
@keyframes ptup{0%{opacity:0;transform:translate(-50%,-30%) scale(.4)}18%{opacity:1;transform:translate(-50%,-75%) scale(1.3)}32%{transform:translate(-50%,-85%) scale(1)}100%{opacity:0;transform:translate(-50%,-240%) scale(.95)}}
.bigstars svg.pop.on{animation:popstar .6s cubic-bezier(.3,1.8,.5,1) forwards}
@keyframes popstar{0%{transform:scale(0) rotate(-40deg)}60%{transform:scale(1.35) rotate(8deg)}100%{transform:scale(1) rotate(0)}}
@media (prefers-reduced-motion: reduce){ .flystar{display:none} .score.bump,.score.bump.big{animation:none} .ptpop{animation-duration:.01s} .bigstars svg.pop,.bigstars svg.pop.on{animation:none;transform:scale(1)} }

.bird.leafy .leaf{transform-origin:104px 43px;animation:leafwig .5s ease-in-out infinite alternate}
@keyframes leafwig{to{transform:rotate(8deg)}}