/* The game is a viewport, not a document. Collections use pages instead of scroll. */
html:has(.home-page),html:has(.lab-page),html:has(.opening-page){height:100%;overflow:hidden}
.home-page,.lab-page,.opening-page{height:100dvh;min-height:0;margin:0;overflow:hidden;box-sizing:border-box}
.home-page *,.lab-page *,.opening-page *{box-sizing:border-box}
[hidden]{display:none!important}
.shelf-pages{display:flex;justify-content:center;align-items:center;gap:15px;margin:5px 0 0;height:34px;color:#ecd7f1;font-size:12px}
.shelf-pages button,.checkin-steps button{width:42px;min-height:32px;background:#634773;color:#fff1d5;border:1px solid #b18ec6;border-radius:12px;font-size:24px;line-height:1}
.shelf-pages button:disabled,.checkin-steps button:disabled{opacity:.35}
/* Lab: fixed header, growing stage, mixing dock, a single ingredient shelf. */
.lab-page{display:grid;grid-template-rows:58px minmax(0,1fr)}
.lab-header{height:58px;width:100%;max-width:1500px;padding:0 16px}
.lab-header img{height:54px;width:100px}.lab-header button,.back-home{min-height:40px;padding:6px 12px}
.lab-page main{width:100%;height:100%;align-self:stretch;margin:0 auto;max-width:1500px;min-height:0;padding:0 12px 8px;overflow:hidden}
#lab-game{height:100%;display:grid;grid-template-rows:36px minmax(0,1fr) 62px 142px;gap:0;min-height:0}
.lab-title{margin:0;gap:12px}.lab-title h1{font-size:23px}.lab-title .eyebrow{display:none}#help-open{width:30px;height:30px;min-height:30px;font-size:20px}
.lab-scene{height:auto;min-height:0;border-radius:22px}
.mix-bar{padding:5px 10px;gap:10px;margin:0 8px;flex-wrap:nowrap;border-radius:0 0 18px 18px}
#mix-slots{flex-wrap:nowrap;gap:5px}.mix-slot{width:105px;min-height:40px;padding:5px;font-size:11px}
#mix{min-height:42px;padding:7px 18px;font-size:16px}#empty-pot{min-height:40px;font-size:11px}
.pantry{margin:5px 0 0;padding:5px 12px 4px;border-radius:18px;min-height:0}
.pantry-heading{margin:0 0 4px}.pantry-heading h2{font-size:16px}.pantry-heading p{font-size:11px}
#ingredients{grid-template-columns:repeat(8,minmax(0,1fr));gap:7px}
.ingredient{min-height:72px;height:72px;gap:2px;padding:3px;font-size:11px;border-radius:13px}
.ingredient img{width:46px;height:46px}.ingredient:hover{translate:0 -2px}
#save-note{position:fixed;bottom:5px;left:20px;max-width:30%;font-size:9px;margin:0;pointer-events:none}
.lab-dialogue{top:10px;padding:8px 12px 11px;width:44%;max-width:400px}
.lab-dialogue .lab-instruction{font-size:clamp(14px,1.5vw,19px)}
#lab-pet{width:min(70cqh,43cqw,calc(100cqh - 105px));height:min(70cqh,43cqw,calc(100cqh - 105px));bottom:6%;left:70%}
#cauldron{width:min(34cqw,66cqh);left:8%;bottom:3%}
/* Homebase: the room and a compact dock. Progress and treasure are one tap away. */
.home-page{display:grid;grid-template-rows:62px minmax(0,1fr)}
.home-header{height:62px;width:100%;max-width:none;padding:2px 16px}
.home-logo img{width:115px;height:58px}.home-header nav button{min-height:40px;padding:6px 12px}
.home-layout{display:block;max-width:none;width:100%;min-height:0;padding:0 12px 8px;margin:0}
.companion-column{height:100%;min-height:0;display:grid;grid-template-rows:minmax(0,1fr) 144px}
.home-welcome,.home-sidebar,.home-extras,.home-footer{display:none!important}
.home-page .room{height:100%;min-height:0;aspect-ratio:auto;width:100%;border-radius:24px;container-type:size}
.home-page .room #actor,.home-page .room.fluffy:not(.playing) #actor,.home-page .room.playing #actor{width:min(75cqh,60cqw);aspect-ratio:1}
.home-page .room.fluffy:not(.playing) #actor{bottom:9%;left:50%}
.companion-controls{position:relative;padding:0 8px;margin:0;display:grid;grid-template-rows:28px 60px 44px;gap:3px;align-content:start}
.home-page .hint{font-size:13px;padding:4px 3px;margin:0;min-height:0;line-height:20px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.home-page .pet-menu{margin:0;gap:10px;align-items:center;justify-content:center}
.home-page .pet-menu button{width:70px;height:56px;min-height:44px;font-size:12px}.home-page .pet-menu button span{font-size:22px}
.home-page .reset{position:absolute;right:10px;top:43px;min-height:36px;font-size:11px}
.world-dock{display:flex;justify-content:center;gap:8px;align-items:center}
.world-dock button{min-height:38px;padding:7px 18px;border:1px solid #b095c2;background:#50375f;color:#fff0d9;border-radius:14px;font-size:13px}
#treat-tray{position:absolute;z-index:30;left:50%;bottom:calc(100% + 5px);translate:-50% 0;width:min(560px,94vw);padding:8px;gap:6px;background:#37233eeb;border:1px solid #b092c4;border-radius:18px;box-shadow:0 8px 24px #170e2855}
.treat-choice{min-height:48px;padding:6px;flex:1;max-width:none}.treat-choice strong{font-size:11px}.treat-choice span{width:28px;height:28px;font-size:21px}#treat-status{font-size:11px;margin:0;min-height:14px}
/* Pop-ups use bounded pages and tabs. */
.home-dialog,.lab-page dialog{width:min(780px,96vw);max-width:96vw;max-height:calc(100dvh - 20px);overflow:hidden;padding:20px 24px;border-radius:22px}
.home-dialog h2,.lab-page dialog h2{font-size:25px;margin:6px 35px 10px 0}
.home-dialog p,.lab-page dialog p,.lab-page dialog li{font-size:13px;line-height:1.45;margin:8px 0}
.home-dialog .eyebrow,.lab-page dialog .eyebrow{font-size:9px;margin:0}
#recipes{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px 0 4px}.recipe{min-height:90px;padding:10px}.recipe small{font-size:11px}
#adventure-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px}.adventure-door{min-height:84px;padding:10px}.adventure-door span{font-size:20px}.adventure-door strong{font-size:15px}.adventure-door small{font-size:11px}
.starter-destinations{gap:8px}.starter-destinations button{padding:10px}.starter-destinations strong{font-size:16px}
.reward-art{width:120px;height:85px;object-fit:contain;margin:0 auto;display:block}.prize-choice{padding:10px;min-height:44px;margin:5px 0}.reward-dialog h2{font-size:23px}
.progress-item{padding:8px 0}.progress-item>div{font-size:13px}.progress-item .mission-track{height:9px}
.panel-tabs{display:flex;gap:5px;margin:10px 0 12px;justify-content:center}.panel-tabs button{flex:1;min-height:38px;padding:6px;border:1px solid #ad8ebe;border-radius:11px;background:#412d51;color:#eeddef;font-size:12px}.panel-tabs button[aria-pressed=true]{background:#f2d9ab;color:#513751}
#parent-fields{display:grid;grid-template-columns:1fr 1fr;gap:7px}.parent-field{padding:8px;margin:0;gap:6px;display:flex;align-items:center;justify-content:space-between}.parent-field span{font-size:12px}.parent-field small{font-size:10px}.parent-field input{width:65px;min-height:38px;padding:6px;font-size:16px}
.parent-form-heading{margin:0}.parent-form-heading h3{font-size:18px;margin:0}.lesson-target{margin:8px 0;font-size:12px}.parent-actions{flex-direction:row;gap:8px}.parent-actions button{min-height:40px;padding:8px 12px;font-size:13px}
#parent-tools h3{font-size:18px;margin:8px 0}.parent-prizes{border:0;padding:0;margin:0}#prize-form{gap:8px}#prize-form input{min-height:40px;padding:9px}
.checkin-steps{display:flex;align-items:center;justify-content:center;gap:15px;margin:5px 0;font-size:12px}
.parent-storage{margin:6px 0!important}.history-row,.earned-treat{padding:10px;font-size:12px;min-height:42px}
/* Opening flow keeps its existing behavior, now sized to the viewport. */
.opening-page{display:grid;grid-template-rows:64px minmax(0,1fr) 30px}
.academy-header{height:64px;width:100%;padding:5px 20px}.opening-world{height:100%;min-height:0;width:calc(100% - 24px);display:grid;grid-template-rows:44px minmax(0,1fr)}
.journey{height:44px;padding:4px}.opening-screen{min-height:0;padding:0 20px 10px}.opening-page h1{font-size:clamp(24px,4vh,42px)}
#choose-screen{display:grid;grid-template-rows:auto minmax(0,1fr) auto}.screen-heading .welcome-line{margin:5px 0;font-size:9px}.screen-heading>p:last-child{margin:6px 0;font-size:14px}
.egg-choices{width:min(780px,100%);min-height:0;margin:4px auto;gap:12px}.egg-card{min-height:0;padding:8px;display:flex;flex-direction:column}.egg-picture{height:auto;min-height:0;flex:1}.egg-picture img{height:100%;max-height:100%;width:100%;object-fit:contain}.egg-label{margin-top:5px}.egg-label strong{font-size:19px}.egg-label small{margin-top:3px;min-height:0}
.choose-action{margin:3px 0}.choose-action>p:first-child{margin:0 0 4px}.magic-button{min-height:44px;padding:9px 20px;font-size:16px}.gentle-note{margin:6px 0 0!important}
.opening-footer{height:30px;padding:5px 15px;font-size:10px}.hatching-stage{height:calc(100dvh - 300px);min-height:80px;width:100%;margin:0}.tap-egg{height:100%;width:auto;aspect-ratio:260/373}.tap-progress{margin:5px}.back-link{padding:4px;min-height:32px}
#meet-screen{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:15px;height:100%}.meet-copy{display:block}.new-friend{min-height:0;height:100%;max-width:none;display:flex;flex-direction:column;justify-content:center}.meet-pet{height:min(48dvh,420px);width:100%;max-width:none;aspect-ratio:1}.meet-copy>p:not(.welcome-line){margin:8px 0;font-size:14px}#name-form{margin-top:10px;gap:6px}#name-form .magic-button{margin-top:8px}#pet-name{min-height:40px;padding:8px}
@media(max-width:600px){
.lab-header{height:50px;padding:0 9px}.lab-page{grid-template-rows:50px minmax(0,1fr)}.lab-header img{height:46px;width:80px}.lab-header button,.back-home{font-size:11px}
#lab-game{grid-template-rows:30px minmax(0,1fr) 98px 135px}.lab-title h1{font-size:20px}.lab-page main{padding:0 6px 5px}.pantry-heading p{display:none}#ingredients{grid-template-columns:repeat(4,minmax(0,1fr))}.pantry{padding:5px 8px}.ingredient{height:69px;min-height:69px;font-size:10px}
.mix-bar{display:grid;grid-template-columns:1fr auto;gap:5px;padding:5px}#mix-slots{grid-column:1/-1;justify-content:center;width:100%}.mix-slot{width:30%;font-size:10px;min-height:36px}#mix{min-height:38px}#empty-pot{min-height:38px}#save-note{display:none}
.lab-dialogue{width:90%;left:50%;padding:6px 10px 9px;top:8px}.lab-dialogue .lab-instruction{font-size:14px}.dialogue-speaker{font-size:9px;margin:0}.lab-dialogue .reaction-label{font-size:10px;margin:2px 0}.lab-dialogue:after{width:12px;height:12px;bottom:-8px}
#lab-pet{width:min(52cqw,calc(100cqh - 82px));height:min(52cqw,calc(100cqh - 82px));max-width:none;max-height:none;left:69%;bottom:8%}#cauldron{width:min(43cqw,58cqh);left:0;bottom:3%}
.home-header{height:56px;padding:0 8px}.home-page{grid-template-rows:56px minmax(0,1fr)}.home-logo img{width:100px;height:52px}.home-header nav{gap:4px}.home-header nav button{padding:4px 8px;font-size:10px;min-height:40px}.home-header nav button span{font-size:15px}
.home-layout{padding:0 6px 6px}.companion-column{grid-template-rows:minmax(0,1fr) 144px}.home-page .room #actor,.home-page .room.fluffy:not(.playing) #actor,.home-page .room.playing #actor{width:min(76cqh,82cqw)}
.home-page .reset{top:auto;right:5px;bottom:3px;font-size:0;width:28px;padding:0}.home-page .reset:before{content:'↺';font-size:22px}.world-dock{gap:4px;padding-right:25px}.world-dock button{padding:6px;font-size:11px;min-height:38px}.home-page .pet-menu{gap:5px}.home-page .pet-menu button{width:54px;height:54px}.home-page .hint{font-size:11px}
.home-dialog,.lab-page dialog{padding:17px 14px;width:96vw}.home-dialog h2,.lab-page dialog h2{font-size:21px}.home-dialog p,.lab-page dialog p{font-size:12px}.home-dialog .quiet-note{font-size:10px}
#recipes{grid-template-columns:repeat(2,minmax(0,1fr))}.recipe{min-height:84px;font-size:12px}.recipe small{font-size:10px}.panel-tabs{gap:3px}.panel-tabs button{font-size:10px;padding:5px 3px}.parent-field{padding:6px}.parent-field span{font-size:11px}.parent-field small{font-size:9px}.parent-field input{width:52px}.parent-actions button{font-size:11px}.reward-art{height:65px}
.opening-page{grid-template-rows:54px minmax(0,1fr) 28px}.academy-header{height:54px;padding:5px 10px}.academy-logo strong{font-size:18px}.logo-star{font-size:24px}.opening-world{width:calc(100% - 12px)}.opening-screen{padding:0 8px 8px}.egg-card{padding:5px 2px}.egg-label strong{font-size:15px}.egg-label small{font-size:9px}.egg-choices{gap:4px}.opening-page h1{font-size:28px}.opening-footer>span{display:none}
#meet-screen{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;gap:0;text-align:center}.new-friend{grid-row:1;height:100%}.meet-pet{height:100%;max-height:35dvh}.meet-copy{grid-row:2}.meet-copy .welcome-line,.meet-copy>p:not(.welcome-line),#name-help{display:none}#name-form{margin:6px auto 0;align-items:center}#name-form .magic-button{margin-top:3px}#pet-name{height:40px}.meet-copy h1{font-size:24px}#petting-hint{margin:0!important;font-size:10px}
}
@media(max-height:560px) and (min-width:601px){
.lab-page{grid-template-rows:44px minmax(0,1fr)}.lab-header{height:44px}.lab-header img{height:42px}#lab-game{grid-template-rows:0 minmax(0,1fr) 48px 104px}.lab-title{visibility:hidden}.pantry-heading{display:none}.ingredient{height:60px;min-height:60px}.ingredient img{width:37px;height:37px}.pantry{padding-top:4px}.mix-slot{min-height:34px}#mix{min-height:36px}.shelf-pages{margin-top:2px;height:30px}
#ingredients{grid-template-columns:repeat(4,minmax(0,1fr))}.home-page{grid-template-rows:44px minmax(0,1fr)}.home-header{height:44px}.home-logo img{height:42px}.companion-column{grid-template-rows:minmax(0,1fr) 104px}.companion-controls{grid-template-rows:22px 42px 34px;gap:1px}.home-page .pet-menu button{height:40px;display:flex;gap:5px;align-items:center;justify-content:center}.home-page .pet-menu button span{font-size:18px}.world-dock button{min-height:30px;padding:4px 12px}.home-page .reset{top:28px}.home-page .hint{font-size:11px;padding:0}
.home-dialog,.lab-page dialog{padding:12px 20px}.home-dialog h2,.lab-page dialog h2{font-size:20px;margin:3px 0 5px}.home-dialog>p:not(.eyebrow),.lab-page dialog>p:not(.eyebrow){display:none}.recipe{min-height:60px}.recipe small{margin-top:3px}.reward-art{display:none}#recipes{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:5px}.adventure-door{min-height:58px}.starter-destinations button{padding:5px}.starter-destinations small{display:none}.panel-tabs{margin:5px 0}.panel-tabs button{min-height:30px}.parent-dialog .quiet-note{display:none}.parent-field{padding:3px}.parent-field input{min-height:32px}.lesson-target{margin:4px}.parent-actions button{min-height:32px}.checkin-steps{margin:2px}#parent-tools h3{margin:3px}.history-row,.earned-treat{min-height:34px;padding:5px}

.opening-page{grid-template-rows:44px minmax(0,1fr) 22px}.academy-header{height:44px}.opening-world{grid-template-rows:30px minmax(0,1fr)}.journey{height:30px}.screen-heading .welcome-line,.gentle-note,.egg-label small{display:none}.opening-page h1{font-size:24px}.screen-heading h1 br{display:none}.screen-heading>p:last-child{margin:3px 0;font-size:12px}.egg-label strong{font-size:15px}.magic-button{min-height:36px;padding:6px 16px;font-size:14px}.choose-action>p:first-child{font-size:11px;min-height:14px}.hatching-stage{height:calc(100dvh - 210px)}
}
/* All 24 ingredients stay visible: a side cabinet on desktop, a full tray on phones. */
.lab-page #lab-game{grid-template-columns:minmax(0,1fr) minmax(360px,40%);grid-template-rows:36px minmax(0,1fr) 88px;grid-template-areas:'title title' 'scene pantry' 'mix pantry';gap:8px 12px}
.lab-page .lab-title{grid-area:title;visibility:visible}.lab-page .lab-scene{grid-area:scene}.lab-page .mix-bar{grid-area:mix;display:grid;grid-template-columns:1fr auto;padding:6px;margin:0;gap:4px;border-radius:16px}.lab-page #mix-slots{grid-column:1/-1;width:100%;justify-content:center}.lab-page .mix-slot{width:32%;min-height:30px;font-size:10px;padding:3px}.lab-page #mix{min-height:36px;font-size:15px;padding:5px 12px}.lab-page #empty-pot{min-height:36px;padding:5px 10px}
.lab-page .pantry{grid-area:pantry;height:100%;min-height:0;margin:0;padding:12px;display:grid;grid-template-rows:42px minmax(0,1fr);gap:8px;overflow:hidden}.lab-page .pantry-heading{display:block;margin:0}.lab-page .pantry-heading h2{font-size:17px;margin:0}.lab-page .pantry-heading p{display:block;font-size:10px;margin:5px 0 0}.lab-page #ingredients{height:100%;min-height:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(6,minmax(0,1fr));gap:6px}.lab-page .ingredient{height:100%;min-height:0;min-width:0;padding:3px;gap:2px;font-size:11px;line-height:1.15;border-radius:11px;overflow:hidden}.lab-page .ingredient img{width:100%;height:calc(100% - 27px);min-height:0;max-height:70px;object-fit:contain;flex-shrink:1}.lab-page .ingredient>span:not(.tick){min-height:24px;display:flex;align-items:center;justify-content:center;text-align:center}.lab-page .ingredient:hover{translate:none}.lab-page .ingredient .tick{right:4px;top:2px;font-size:15px}.lab-page #save-note{display:none}
.lab-page .lab-dialogue{width:90%;max-width:480px;left:50%;top:10px}.lab-page #lab-pet{width:min(70cqh,56cqw,calc(100cqh - 95px));height:min(70cqh,56cqw,calc(100cqh - 95px));left:68%;bottom:5%}.lab-page #cauldron{width:min(45cqw,60cqh);left:0;bottom:3%}
@media(max-width:850px) and (min-height:561px){
.lab-page #lab-game{grid-template-columns:minmax(0,1fr);grid-template-rows:30px minmax(0,1fr) 88px clamp(240px,35dvh,310px);grid-template-areas:'title' 'scene' 'mix' 'pantry';gap:5px}.lab-page .pantry{padding:6px;grid-template-rows:22px minmax(0,1fr);gap:4px}.lab-page .pantry-heading h2{font-size:15px}.lab-page .pantry-heading p{display:none}.lab-page #ingredients{grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));gap:4px}.lab-page .ingredient{font-size:10px;padding:2px}.lab-page .ingredient img{height:calc(100% - 23px);max-height:48px}.lab-page .ingredient>span:not(.tick){min-height:21px}.lab-page .lab-dialogue{top:6px}.lab-page #lab-pet{width:min(65cqh,52cqw,calc(100cqh - 78px));height:min(65cqh,52cqw,calc(100cqh - 78px))}
}
@media(max-height:560px){
.lab-page #lab-game{grid-template-columns:minmax(0,1fr) minmax(280px,45%);grid-template-rows:0 minmax(0,1fr) 76px;grid-template-areas:'title title' 'scene pantry' 'mix pantry';gap:5px 8px}.lab-page .lab-title{visibility:hidden}.lab-page .pantry{padding:5px;grid-template-rows:20px minmax(0,1fr);gap:3px}.lab-page .pantry-heading h2{font-size:14px}.lab-page .pantry-heading p{display:none}.lab-page #ingredients{gap:3px}.lab-page .ingredient{font-size:9px;padding:1px}.lab-page .ingredient img{height:calc(100% - 20px);max-height:38px}.lab-page .ingredient>span:not(.tick){min-height:18px}.lab-page .mix-slot{min-height:27px}.lab-page #mix,.lab-page #empty-pot{min-height:30px;font-size:12px}.lab-page .lab-dialogue{padding:5px 8px;top:5px}.lab-page .lab-dialogue .lab-instruction{font-size:12px}.lab-page #lab-pet{width:min(65cqh,56cqw,calc(100cqh - 75px));height:min(65cqh,56cqw,calc(100cqh - 75px))}
}

/* The living map is intentionally a wide explorer, not a standard dialog. */
.home-page dialog.map-dialog{width:min(1420px,98vw);max-width:98vw;padding:18px}