:root{font-family:"DM Sans",ui-rounded,"Trebuchet MS",system-ui,sans-serif;color:#24483a;background:#cce5ce;--ink:#24483a;--deep:#174935;--cream:#fff9e9;--gold:#f6c75e;--wood:#a9683d;--shadow:0 12px 30px #2448342b}
*{box-sizing:border-box}
body{margin:0;min-width:320px;min-height:100vh;min-height:100dvh;overflow-x:hidden}
button{font:inherit;color:inherit;touch-action:manipulation;cursor:pointer}
button:focus-visible{outline:4px solid #f7ae55;outline-offset:4px}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
#app{position:relative;min-height:100vh;min-height:100dvh;isolation:isolate;overflow:hidden;background:linear-gradient(180deg,#d6efe1 0%,#eaf2cd 55%,#f6d89f 100%)}
.scene-art{position:absolute;z-index:-1;inset:0;width:100%;height:100%;min-height:100vh;min-height:100dvh;opacity:.76;pointer-events:none}
.scene-art use{width:100%;height:100%}
.screen{min-height:100vh;min-height:100dvh}
.home{display:grid;place-items:center;padding:clamp(20px,5vw,56px) 18px;position:relative}
.home-card{position:relative;width:min(100%,780px);padding:clamp(24px,5vw,52px);text-align:center;background:linear-gradient(145deg,#fffbeded,#f8f0dce8);border:2px solid #fff9;border-radius:38px;box-shadow:0 22px 60px #204b3c3d,inset 0 2px #fff;backdrop-filter:blur(5px)}
.home-card:before,.home-card:after{content:"✦";position:absolute;color:#f4c658;text-shadow:0 2px 7px #e0a33a;animation:twinkle 2.3s ease-in-out infinite}
.home-card:before{font-size:32px;left:8%;top:12%}.home-card:after{font-size:24px;right:9%;top:25%;animation-delay:.8s}
.brand-kicker{margin:0 0 3px;font-size:clamp(14px,2vw,19px);font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#53845b}
h1,h2,h3,.game-title{font-family:ui-rounded,"Trebuchet MS",sans-serif}
.game-title{margin:0;color:#3e794b;font-size:clamp(50px,10vw,100px);font-weight:700;line-height:.94;letter-spacing:-.04em;text-shadow:0 3px 0 #f9d77b,0 7px 0 #e9aa57,0 10px 15px #714a3650}
.game-subtitle{display:inline-block;margin:12px 0 0;padding:7px 22px;border-radius:40px;background:#b96f43;color:#fff8e4;font:700 clamp(15px,2.8vw,23px) ui-rounded,"Trebuchet MS",sans-serif;letter-spacing:.06em;box-shadow:0 4px 0 #804c33}
.dino-emblem{display:block;width:clamp(110px,22vw,175px);height:clamp(100px,20vw,160px);margin:20px auto 8px;filter:drop-shadow(0 8px 5px #31554145);animation:bob 3.5s ease-in-out infinite}
.home-copy{margin:12px auto 24px;max-width:500px;font-size:clamp(16px,2.5vw,21px);line-height:1.45;color:#476b54}
.primary-button,.wood-button,.icon-button{border:0;font-weight:800;transition:transform .16s ease,filter .16s ease,box-shadow .16s ease}
.primary-button{min-width:min(100%,265px);padding:15px 30px;border-radius:24px;color:#fffdf0;background:linear-gradient(#77b95a,#438c50);box-shadow:0 6px 0 #326e45,0 10px 17px #315d3d3b;font:700 25px ui-rounded,"Trebuchet MS",sans-serif}
.primary-button:hover,.wood-button:hover,.icon-button:hover{filter:brightness(1.05);transform:translateY(-2px)}
.primary-button:active,.wood-button:active,.icon-button:active{transform:translateY(2px)}
.home-note{margin:22px 0 0;color:#72846c;font-size:13px;font-weight:700}
#game{position:relative;display:flex;flex-direction:column;max-width:1320px;min-height:100vh;min-height:100dvh;margin:0 auto;padding:env(safe-area-inset-top) clamp(12px,3vw,34px) env(safe-area-inset-bottom)}
.game-header{display:grid;grid-template-columns:64px 1fr 64px;align-items:center;gap:10px;padding:12px 0 4px}
.icon-button{width:58px;height:54px;border:2px solid #f7efd9;border-radius:20px;background:linear-gradient(#fff9e7,#efe2c5);box-shadow:0 4px 0 #b48c5f,0 7px 14px #374b3633;font-size:27px}
.icon-button[aria-pressed=true]{background:#e8f2c7}
.heading-wrap{text-align:center}
#level-title{display:block;font:700 13px system-ui,sans-serif;letter-spacing:.13em;text-transform:uppercase;color:#66815c}
#level-name{margin:0;color:#2f6747;font-size:clamp(23px,4vw,36px);line-height:1.1}
.progress{display:flex;justify-content:center;gap:7px;margin:4px 0 0}
.progress-dot{width:8px;height:8px;background:#b8c8a3;border-radius:50%}
.progress-dot.current{width:23px;border-radius:12px;background:#e5a84a}.progress-dot.complete{background:#5c9c69}
.game-intro{text-align:center;padding:5px 8px 9px}
#prompt{min-height:27px;margin:0;font-size:clamp(16px,2.3vw,21px);font-weight:700;color:#3d624a}
#match-count{display:inline-block;margin-top:3px;padding:4px 12px;border-radius:20px;background:#fff7dfc9;color:#788b58;font-size:13px;font-weight:800}
#board{flex:1;display:flex;flex-direction:column;gap:10px;justify-content:center;min-height:0;padding:clamp(12px,2.3vw,24px);margin:0 0 10px;border:3px solid #fff8;border-radius:32px;background:linear-gradient(145deg,#fff8e9df,#f1eacdd9);box-shadow:var(--shadow),inset 0 1px #fff;backdrop-filter:blur(3px)}
.zone-title{display:flex;justify-content:center;align-items:center;gap:9px;margin:0 0 5px;color:#67835d;text-align:center;font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.zone-title:before,.zone-title:after{content:"";width:30px;height:1px;background:#9fb28a}
#nests{display:grid;grid-template-columns:repeat(3,minmax(90px,1fr));gap:clamp(4px,1.5vw,16px);justify-items:center;align-items:end}
#board[data-count="5"] #nests,#board[data-count="7"] #nests{grid-template-columns:repeat(4,minmax(75px,1fr))}
.nest-target{position:relative;display:grid;place-items:center;width:100%;max-width:190px;min-height:clamp(110px,17vh,168px);padding:0 4px 7px;border:2px solid transparent;border-radius:24px;background:#fff4d348;transition:.18s ease}
.nest-art{display:block;width:min(100%,170px);aspect-ratio:297/280;background-repeat:no-repeat;background-size:700% 100%;background-position:var(--asset-x) center;filter:drop-shadow(0 7px 3px #55432b2b);transition:transform .2s ease,filter .2s ease}
.nest-label{display:block;margin-top:-14px;padding:3px 10px;border:1px solid #e9d7a3;border-radius:18px;background:#fff9e8;color:#655b43;font-size:clamp(11px,1.5vw,14px);font-weight:800;white-space:nowrap;box-shadow:0 2px 5px #68523c20}
.nest-target:hover .nest-art{transform:translateY(-4px)}
.nest-target.drop-ready{background:#e3f2ce;border-color:#91bd72;transform:scale(1.04)}
.nest-target.try-again{animation:nudge .3s ease-in-out 2}
.nest-target.matched{background:#e6f4d5a8}
.nest-target.matched .nest-art{filter:drop-shadow(0 0 12px #ffda63)}
.egg-piece{position:relative;display:grid;place-items:center;width:clamp(63px,10vw,100px);height:clamp(82px,13vw,126px);padding:0;border:3px solid #fff9;border-radius:27px;background:linear-gradient(145deg,#fffef4,#efe2c0);box-shadow:0 5px 0 #c6ae7d,0 9px 16px #54432d27;transition:transform .18s ease,box-shadow .18s ease,opacity .18s ease}
.egg-art{display:block;width:82%;height:92%;aspect-ratio:297/430;background-repeat:no-repeat;background-size:700% 100%;background-position:var(--asset-x) center;filter:drop-shadow(0 2px 1px #59493328)}
.egg-piece:hover{transform:translateY(-4px) rotate(-2deg)}
.egg-piece.selected{transform:translateY(-8px) scale(1.06);box-shadow:0 0 0 4px #ffd867,0 9px 18px #8e672b50}
.egg-piece.dragging{opacity:.45}
.egg-piece.matched{opacity:.3;transform:scale(.82);box-shadow:none}
#egg-tray{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(9px,2vw,18px);padding:7px 8px 0}
.nest-egg{position:absolute;z-index:2;left:50%;top:18%;width:clamp(46px,7vw,72px);aspect-ratio:297/430;background-repeat:no-repeat;background-size:700% 100%;background-position:var(--asset-x) center;transform:translateX(-50%);filter:drop-shadow(0 3px 2px #4a362b55);animation:egg-home .55s cubic-bezier(.2,.8,.2,1) both}
.nest-target.hinted .nest-art,.egg-piece.hinted{animation:magic-glow 1s ease-in-out infinite alternate}
#hint-message{width:fit-content;max-width:95%;align-self:center;margin:0;padding:7px 15px;border-radius:20px;background:#fff0b8;color:#795b27;font-weight:800;text-align:center;box-shadow:0 2px 8px #66502c25}
.game-footer{display:flex;justify-content:center;align-items:center;gap:12px;padding:0 0 14px}
.wood-button{min-height:50px;padding:9px 22px;border:2px solid #f1dba8;border-radius:19px;background:linear-gradient(#bd8050,#925832);color:#fff8e7;box-shadow:0 4px 0 #70452e,0 8px 14px #3d493437;font-weight:800}
.wand-button{display:flex;align-items:center;gap:7px;min-width:116px;justify-content:center}
.wand-icon{width:36px;height:36px;filter:drop-shadow(0 2px 1px #4e432c56)}
.complete-overlay{position:fixed;z-index:10;inset:0;display:grid;place-items:center;padding:20px;background:#173d2fc9;backdrop-filter:blur(7px)}
.complete-card{position:relative;width:min(100%,520px);padding:26px 26px 30px;border:3px solid #fff;border-radius:34px;background:linear-gradient(155deg,#fffbe9,#f2e5bf);box-shadow:0 25px 80px #142f26a8;text-align:center;animation:card-pop .4s cubic-bezier(.2,.8,.2,1) both}
#hatch-art{width:150px;height:130px;margin:0 auto 3px;filter:drop-shadow(0 8px 4px #665a3835);animation:bob 2.6s ease-in-out infinite}
.complete-sparkles{font-size:34px;color:#e4a73d;letter-spacing:.25em}
.complete-card h2{margin:5px 0;color:#3d7b4b;font-size:clamp(29px,6vw,42px)}
.complete-card p{margin:0 0 22px;color:#5b7053;font-size:18px}
.complete-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.complete-actions .primary-button{font-size:20px;min-width:180px;padding:13px 22px}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-8px) rotate(2deg)}}
@keyframes twinkle{0%,100%{opacity:.55;transform:scale(.8) rotate(0)}50%{opacity:1;transform:scale(1.2) rotate(25deg)}}
@keyframes magic-glow{from{filter:drop-shadow(0 0 2px #f5d263);transform:scale(1)}to{filter:drop-shadow(0 0 12px #ffdc6a);transform:scale(1.06)}}
@keyframes egg-home{0%{opacity:0;transform:translate(-50%,-26px) scale(.6) rotate(-8deg)}75%{transform:translate(-50%,4px) scale(1.08)}100%{opacity:1;transform:translate(-50%,0) scale(1)}}
@keyframes card-pop{0%{opacity:0;transform:translateY(16px) scale(.94)}100%{opacity:1;transform:none}}
@keyframes nudge{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
@media(min-width:850px){#board{gap:12px}.game-intro{padding:8px}#nests{grid-template-columns:repeat(3,minmax(130px,1fr))!important}#board[data-count="5"] #nests,#board[data-count="7"] #nests{grid-template-columns:repeat(5,minmax(105px,1fr))!important}.nest-target{min-height:clamp(132px,19vh,200px)}.nest-art{width:min(100%,190px)}}
@media(max-width:560px){.home-card{padding:28px 18px;border-radius:29px}.game-header{grid-template-columns:50px 1fr 50px;gap:5px;padding-top:max(8px,env(safe-area-inset-top))}.icon-button{width:46px;height:44px;border-radius:16px;font-size:23px}#board{gap:8px;padding:8px 5px;border-radius:24px;margin-bottom:8px}.nest-target{min-height:clamp(96px,14vh,130px);border-radius:17px;padding-bottom:5px}.nest-art{width:min(100%,130px)}.nest-label{margin-top:-11px;padding:2px 7px;font-size:10px}.nest-egg{width:clamp(39px,10vw,53px);top:15%}.egg-piece{width:clamp(56px,15vw,75px);height:clamp(75px,19vw,98px);border-radius:20px}.egg-art{width:84%}.zone-title{font-size:11px}.game-footer{padding-bottom:max(12px,env(safe-area-inset-bottom))}.wood-button{min-height:47px;padding:7px 16px}.wand-icon{width:32px;height:32px}}
@media(max-height:650px) and (min-width:561px){.game-header{padding-top:6px}.game-intro{padding:2px}.nest-target{min-height:105px}.nest-art{width:130px}#board{gap:5px;padding:8px}.egg-piece{height:78px;width:64px}.nest-egg{width:48px}}
@media(prefers-reduced-motion:reduce){* ,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}

/* Toddler-first, word-free play controls and direct touch dragging */
.game-header{grid-template-columns:64px 1fr 64px}
#level-progress{min-height:12px}
.game-intro,.zone-title{display:none!important}
#board{justify-content:space-evenly;gap:clamp(14px,4vh,36px);padding:clamp(12px,3vw,30px)}
.nest-zone,.egg-zone{width:100%;display:grid;place-items:center}
#nests{grid-template-columns:repeat(var(--choice-count,2),minmax(0,1fr));width:min(100%,920px);gap:clamp(8px,2vw,24px)}
#board[data-count="2"] #nests{grid-template-columns:repeat(2,minmax(0,1fr))}
#board[data-count="3"] #nests{grid-template-columns:repeat(3,minmax(0,1fr))}
#board[data-count="4"] #nests{grid-template-columns:repeat(4,minmax(0,1fr))}
.nest-target{min-height:clamp(124px,22vh,205px);max-width:220px;background:#fff6d94a}
.nest-art{width:min(100%,190px)}
.nest-target.hinted{background:#fff0a6;border-color:#f1c94e;box-shadow:0 0 0 5px #ffe48880,0 0 30px #ffcf42}
.nest-target.hinted .nest-art{animation:magic-glow 0.48s ease-in-out infinite alternate}
#egg-tray{gap:clamp(12px,3vw,28px)}
.egg-piece{width:clamp(78px,12vw,112px);height:clamp(104px,17vw,142px);touch-action:none;user-select:none;-webkit-user-select:none}
.egg-piece.dragging{position:relative;z-index:8;opacity:.94;transform:translate3d(var(--drag-x),var(--drag-y),0) scale(1.1);box-shadow:0 0 0 5px #ffe17a,0 18px 30px #56412b55}
.egg-piece.hinted{animation:magic-glow 0.48s ease-in-out infinite alternate;box-shadow:0 0 0 6px #ffe17a,0 0 32px #ffcf42}
.wand-button{width:88px;height:82px;min-width:88px;min-height:82px;padding:9px;border-radius:50%;background:radial-gradient(circle at 35% 25%,#edbd62,#a76138 75%);box-shadow:0 5px 0 #70452e,0 0 0 5px #f5e5ba,0 9px 18px #3d493437}
.wand-icon{width:58px;height:58px}
.wand-button:after{content:"";position:absolute;width:18px;height:18px;top:-5px;right:0;background:#fff4ba;clip-path:polygon(50% 0,62% 37%,100% 50%,62% 62%,50% 100%,37% 62%,0 50%,37% 37%);filter:drop-shadow(0 1px 3px #b27a32);animation:twinkle 1.5s ease-in-out infinite}
.wand-button{position:relative}
.wand-button.magic-active{animation:wand-pop .55s ease-in-out 2;box-shadow:0 5px 0 #70452e,0 0 0 7px #ffe58b,0 0 36px #ffd250}
.play-button{display:grid;place-items:center;width:92px;min-width:92px;height:82px;margin:0 auto;padding:0;font-size:36px;border-radius:26px}
.symbol-button{display:grid;place-items:center;width:76px;min-width:76px;height:70px;padding:0;font-size:36px}
.complete-card{min-height:245px;display:flex;flex-direction:column;justify-content:center}
.complete-card p{margin:0}
@keyframes wand-pop{50%{transform:scale(1.12) rotate(-5deg)}}
@media(max-width:560px){
 .game-header{grid-template-columns:50px 1fr 50px}
 #board{gap:clamp(12px,2vh,20px);padding:9px 6px}
 .nest-target{min-height:clamp(112px,18vh,154px);padding:4px}
 .nest-art{width:min(100%,145px)}
 #egg-tray{gap:clamp(8px,2.4vw,16px);padding:4px}
 .egg-piece{width:clamp(66px,18vw,88px);height:clamp(88px,23vw,112px);border-radius:21px}
 .wand-button{width:78px;height:74px;min-width:78px;min-height:74px}
 .wand-icon{width:51px;height:51px}
 .game-footer{padding-bottom:max(17px,env(safe-area-inset-bottom))}
}

/* Keep moving eggs transparent to drop hit testing and keep every round centered on wide screens */
.egg-piece.dragging{pointer-events:none}
@media(min-width:850px){
 #board[data-count="2"] #nests{grid-template-columns:repeat(2,minmax(130px,1fr))!important}
 #board[data-count="3"] #nests{grid-template-columns:repeat(3,minmax(130px,1fr))!important}
 #board[data-count="4"] #nests{grid-template-columns:repeat(4,minmax(110px,1fr))!important}
}

/* Five-colour garden: two-row layout on small touchscreens */
#board[data-count="5"] #nests{grid-template-columns:repeat(3,minmax(0,1fr))!important;max-width:680px}
#board[data-count="5"] .nest-target{min-height:clamp(90px,15vh,145px)}
#board[data-count="5"] .nest-art{width:min(100%,120px)}
#board[data-count="5"] .egg-piece{width:clamp(54px,13vw,86px);height:clamp(75px,17vw,110px)}
@media(min-width:850px){#board[data-count="5"] #nests{grid-template-columns:repeat(5,minmax(0,1fr))!important;max-width:960px}}

/* Wordless tap-to-hatch sequence */
#board[data-stage="hatching"] .nest-zone{display:none!important}
#board[data-stage="hatching"] .egg-zone{flex:1;display:grid;place-items:center}
#board[data-stage="hatching"] #egg-tray{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:clamp(12px,4vw,45px)}
.hatch-egg{position:relative;display:grid;place-items:center;width:clamp(94px,24vw,175px);height:clamp(140px,34vw,230px);padding:0;border:0;background:transparent;touch-action:manipulation}
.hatch-egg .egg-art{display:block;width:100%;height:100%;background-size:700% 100%;background-position:var(--asset-x) center;background-repeat:no-repeat;filter:drop-shadow(0 12px 12px #493e2d66)}
.crack-lines{position:absolute;inset:8% 15%;opacity:0;pointer-events:none;transition:opacity .2s}
.crack-lines svg{width:100%;height:100%}
.hatch-egg[data-cracks="1"] .crack-lines{opacity:.35;clip-path:inset(0 0 55% 0)}
.hatch-egg[data-cracks="2"] .crack-lines{opacity:.9;clip-path:inset(0 0 15% 0)}
.hatch-egg.hatched .egg-art{animation:egg-open .8s ease forwards}
.hatch-egg.hatched .crack-lines{opacity:0}
.hatched-baby{position:absolute;width:115%;height:115%;animation:baby-arrives 1.1s ease both;filter:drop-shadow(0 10px 12px #314b3666)}
.hatch-egg.wiggle{animation:egg-wiggle .42s ease}
.hatch-egg.hinted{filter:drop-shadow(0 0 18px #ffd04c);animation:egg-wiggle .8s infinite}
@keyframes egg-wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-9deg)}75%{transform:rotate(9deg)}}
@keyframes egg-open{0%{transform:scale(1);opacity:1}70%{transform:scale(1.16) rotate(-12deg);opacity:1}100%{transform:scale(.35) translateY(110px);opacity:0}}
@keyframes baby-arrives{0%{opacity:0;transform:translateY(45px) scale(.3)}60%{opacity:1;transform:translateY(-12px) scale(1.1)}100%{opacity:1;transform:translateY(0) scale(1)}}

/* Toddler welcome: a character, not a menu */
#home.home{padding:0;min-height:100dvh;background:transparent}
#home .home-card{width:100%;max-width:none;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:0;box-shadow:none;background:transparent;backdrop-filter:none}
#home .home-card:before,#home .home-card:after{display:none}
#home .dino-start{position:relative;display:grid;place-items:center;width:min(75vw,430px);height:min(72vh,420px);padding:0;border:0;background:transparent;box-shadow:none;cursor:pointer;touch-action:manipulation;animation:welcome-bounce 3s ease-in-out infinite}
#home .dino-emblem{width:100%;height:100%;margin:0;filter:drop-shadow(0 16px 18px #174e4566);animation:none}
#home .dino-start:active{transform:scale(.94)}
#home .start-sparkle{position:absolute;right:2%;top:10%;color:#fff1a0;font-size:clamp(36px,7vw,70px);text-shadow:0 0 15px #ffca47;animation:twinkle 1.3s ease-in-out infinite;pointer-events:none}
@keyframes welcome-bounce{0%,100%{translate:0 0}50%{translate:0 -15px}}
@media(prefers-reduced-motion:reduce){#home .dino-start{animation:none}}

#board[data-stage="reunion"] #nests{grid-template-columns:repeat(3,minmax(0,1fr));width:100%}
#board[data-stage="reunion"] #egg-tray{display:flex;justify-content:center;gap:clamp(10px,4vw,40px)}
.reunion-target{position:relative}
.reunion-parent{position:absolute;width:70%;height:70%;top:-16%;left:15%;opacity:.65;filter:drop-shadow(0 6px 5px #42553766)}
.reunion-baby{width:clamp(80px,18vw,155px);height:clamp(100px,23vw,170px);border:0;background:transparent;touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab}
.reunion-child{width:100%;height:100%;filter:drop-shadow(0 8px 6px #42553766)}
.reunion-baby.selected,.reunion-baby.hinted{filter:drop-shadow(0 0 20px #ffd04c)}
.reunion-baby.matched{opacity:0;pointer-events:none;transition:opacity .35s}
.reunion-target.reunited{box-shadow:0 0 30px #ffe577;animation:welcome-bounce 1s ease-in-out}