/* The mobile HUD is a set of small, persistent handles around the playable scene. */
.fold-pill,#photo-dock{display:none}.view-controls #reset-view .ui-icon{width:23px;height:23px}
#tutorial-guide{margin:12px 0;padding:12px 14px;border:1px solid #b8c39b;background:#f3f2df;border-radius:16px;font-size:12px;line-height:1.5;color:#566544}#tutorial-guide strong{display:block;margin-bottom:4px}#tutorial-guide .ui-icon{width:21px;height:21px;float:left;margin:2px 9px 3px 0}#app.night #tutorial-guide{background:#465168;color:#f3e7cb;border-color:#85918c}
.material.wrong-material{outline:3px solid #c17c55;outline-offset:2px}#snap-status.mismatch{background:#a35942;color:#fff5e2}.photo #photo-dock{display:flex;position:absolute;bottom:24px;left:50%;transform:translateX(-50%);z-index:16;gap:6px;background:#f6edda;border:1px solid #cfc4a8;border-radius:24px;padding:5px;box-shadow:0 4px #ab997344}#photo-dock button{display:flex;align-items:center;gap:6px;justify-content:center;border-radius:20px;background:transparent;padding:10px 13px;font-size:12px;min-height:40px}#photo-dock .ui-icon{width:19px;height:19px}#photo-dock .ui-icon:last-child{width:13px;height:13px;transform:rotate(180deg)}#photo-dock [aria-expanded=true]{background:#dde7c4}#photo-dock [aria-expanded=true] .ui-icon:last-child{transform:none}.home #photo-dock,.clean-photo #photo-dock{display:none}
#app.night #photo-dock{background:#39485b;color:#eee6d0;border-color:#8997ae}#app.night #photo-dock [aria-expanded=true]{background:#62765b}
#app:fullscreen{width:100%;height:100dvh;min-height:100dvh}#fullscreen-toggle[aria-pressed=true]{background:#c6d4a5}
@media(max-width:700px){
 #app{height:100svh;min-height:100svh}.header{height:48px;top:max(8px,env(safe-area-inset-top));margin:0 12px;border:0;justify-content:flex-start;gap:8px;overflow:visible}.brand>span:last-child{display:none}.brand-symbol{width:40px;height:40px;border-radius:14px}.brand-symbol svg{width:26px;height:26px}.header-center{display:block;padding:7px 12px;font-size:12px;margin:0;border-width:1px}.header-actions{position:absolute;right:0;top:52px;display:flex;gap:7px;flex-wrap:wrap;max-width:272px;padding:9px;background:#f6edda;border:1px solid #cfc4a8;border-radius:20px;box-shadow:0 5px 20px #52604520}.header-actions .circle-button,.header-actions .worlds-button{width:38px;height:38px;margin:0;padding:0;display:grid;place-items:center}.header-actions .worlds-button span{display:none}.hud-folded .header-actions{display:none}#app.night .header-actions{background:#39485b;border-color:#738298}
 .fold-pill{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:42px;padding:8px 12px;border:1px solid #cfc4a8;background:#f6edda;color:#5b6047;border-radius:22px;font-size:11px;box-shadow:0 3px #ad9e7c30}.fold-pill>.ui-icon{width:18px;height:18px}.fold-pill>.ui-icon:last-child{width:14px;height:14px}#hud-toggle{margin-left:auto;order:5;min-width:66px}#app.night .fold-pill{background:#39485b;color:#eee6d0;border-color:#8997ae}.fold-pill[aria-expanded=false]>.ui-icon:last-child{transform:rotate(180deg)}
 .playing .story-panel{top:66px;left:12px;right:12px;width:auto;padding:0;z-index:8}.playing .story-panel #progress-toggle{width:100%;pointer-events:auto}.playing .story-panel>h1,.playing .story-panel>.eyebrow,.playing .story-panel>.level-meta,.playing .story-panel>p,.playing .story-panel>#back-collection{display:none}.playing #progress-panel{padding:9px 13px;background:#f6edda;border-radius:0 0 18px 18px}.playing.progress-folded #progress-panel,.playing.progress-folded #tutorial-guide{display:none!important}.playing .progress-detail,.playing .stages{display:none}.playing .progress-label{margin:0 0 8px}#tutorial-guide{margin:5px 0 0;font-size:11px;padding:9px 12px}#progress-toggle{display:none}.playing #progress-toggle{display:flex}
 .playing #scene,.photo #scene,.photo.panel-hidden #scene{top:112px;left:0;right:0;bottom:82px}.playing:not(.tray-folded) #scene{bottom:225px}.playing:not(.progress-folded) #scene{top:205px}.photo #scene,.photo.panel-hidden #scene{top:88px}.photo:not(.panel-hidden) #scene{bottom:calc(var(--photo-panel-height,250px) + 92px)}
 .playing .view-controls,.photo .view-controls,.photo.panel-hidden .view-controls{top:50%;bottom:auto;left:10px;right:auto;transform:translateY(-50%);padding:3px;border-radius:24px;gap:2px;max-height:calc(100svh - 240px);overflow:auto;scrollbar-width:none}.view-controls #camera-toggle{display:flex;width:42px;height:42px;min-height:42px;gap:1px;padding:7px;box-shadow:none;border:0}.view-controls #camera-toggle>.ui-icon:first-child{width:23px;height:23px}.view-controls #camera-toggle>.ui-icon:last-child{width:10px;height:10px}.playing .view-controls button,.photo .view-controls button{width:42px;height:38px;min-height:38px}.playing .view-controls .ui-icon,.photo .view-controls .ui-icon{width:20px;height:20px}.camera-folded .view-controls>button:not(#camera-toggle),.camera-folded .view-controls>span{display:none!important}
 #tray{left:12px;right:12px;bottom:max(10px,env(safe-area-inset-bottom));width:auto;transform:none;border-radius:23px;padding:5px 8px 8px}#tray-toggle{width:100%;border:0;background:transparent;box-shadow:none;font-size:12px;min-height:38px;padding:5px 7px}.tray-folded #tray{padding:3px 6px}.tray-folded #tray>:not(#tray-toggle){display:none}#tray .tray-heading{padding:2px 4px 6px}#tray .tray-heading>span:first-child{display:none}#tray .tray-heading #tray-instruction{display:block;font-size:9px}#tray #hint{margin-left:auto;font-size:9px}.material{min-height:57px}#materials{gap:5px}.material img{height:30px;width:42px}.material-status{font-size:7px}.touch-tip{font-size:8px;padding-top:5px}
 #scene-caption{left:50%;bottom:67px;font-size:8px;gap:5px;max-width:95%;white-space:normal;justify-content:center}.playing:not(.tray-folded) #scene-caption{bottom:235px}#scene-caption span{display:block}#scene-caption .ui-icon{width:15px;height:15px;flex:none}.photo #scene-caption{display:none}
 .photo .photo-title{display:none}.photo .photo-back-button{top:63px;left:12px;min-height:34px;padding:6px 11px;font-size:10px}.photo #photo-dock{bottom:max(10px,env(safe-area-inset-bottom));width:calc(100% - 24px);justify-content:space-between;gap:2px}.photo #photo-dock button{flex:1;padding:9px 6px;font-size:11px}
 #app #atmosphere-panel,.photo #atmosphere-panel{top:auto;bottom:72px;left:12px;right:12px;width:auto;max-height:46svh;overflow:auto;border-radius:24px;padding:18px 16px 14px;z-index:15;overscroll-behavior:contain;scrollbar-width:thin}.photo #atmosphere-panel #panel-eyebrow,.photo #atmosphere-panel #panel-title,.photo #atmosphere-panel .audio-settings{display:none}.photo #atmosphere-panel .paint-section{margin:16px 0 0;padding:0;border:0}.photo .paint-section summary{font-size:18px}.paint-swatches{grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}.paint-swatch{width:32px;min-height:32px;justify-self:center}.paint-row legend{font-size:11px;margin:12px 0 9px}.photo #atmosphere-panel .setting-row{margin:16px 0}.photo #atmosphere-panel[data-empty]{display:none}.photo[data-panel-tab=paint] #atmosphere-panel>.setting-row,.photo[data-panel-tab=paint] #photo-actions,.photo[data-panel-tab=weather] #paint-section,.photo[data-panel-tab=weather] #photo-actions,.photo[data-panel-tab=photo] #paint-section,.photo[data-panel-tab=photo] #atmosphere-panel>.setting-row{display:none!important}.photo #photo-actions .primary-button{margin-top:12px}.photo #photo-actions .photo-tip{margin:15px 0 5px}.photo .clean-photo #photo-dock{display:none}
 #toast{bottom:76px;left:50%;width:max-content;max-width:calc(100% - 32px);font-size:11px;padding:11px 15px;z-index:40}.playing:not(.tray-folded) #toast{bottom:240px}#snap-status{bottom:78px;font-size:11px;max-width:90%;white-space:normal}.playing:not(.tray-folded) #snap-status{bottom:238px}
 /* Make the miniature the main artwork, not a tiny thumbnail between empty bands. */
 .title-content h1{top:13%;font-size:clamp(58px,17vw,78px);line-height:.87}.title-content p{top:calc(13% + 142px);font-size:9px}.title-art{inset:calc(13% + 155px) -9% 150px}.title-content .play-button{bottom:85px;min-height:56px}.title-content .wood-button{bottom:20px;min-height:48px}.game-top{inset:12px 16px auto}.coin-pouch{min-width:124px;padding:6px 14px;font-size:19px}
}
@media(max-width:700px) and (max-height:670px){.title-content h1{top:13%;font-size:52px}.title-content p{top:calc(13% + 98px)}.title-art{top:calc(13% + 110px);bottom:138px}.title-content .play-button{bottom:78px;min-height:51px}.title-content .wood-button{bottom:16px;min-height:44px}.playing .view-controls{left:6px}.view-controls #camera-toggle{width:36px;min-height:36px}.playing .view-controls button{width:36px;min-height:32px;height:32px}}
@media(prefers-reduced-motion:no-preference){.material.wrong-material{animation:wrong .25s 2}@keyframes wrong{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}}

:fullscreen #app{height:100dvh;min-height:100dvh}
@media(max-width:700px){
 .playing #scene,.playing:not(.progress-folded) #scene,.playing:not(.tray-folded) #scene{top:calc(var(--story-bottom,110px) + 8px);bottom:calc(var(--tray-height,220px) + 36px)}
 .playing #scene-caption,.playing:not(.tray-folded) #scene-caption{bottom:calc(var(--tray-height,220px) + 17px)}
 #scene-caption>span:last-child{display:block}
 .playing #toast,.playing:not(.tray-folded) #toast,.playing #snap-status,.playing:not(.tray-folded) #snap-status{bottom:calc(var(--tray-height,220px) + 32px)}
 .material img{margin:0}.photo #photo-dock{max-width:440px}
}
@media(max-width:700px){.title-art{left:-2%;right:-2%}.title-content .play-button{padding:12px 20px}}
@media(min-width:701px){#camera-toggle,#progress-toggle,#tray-toggle,#hud-toggle{display:none}}
@media(max-width:700px){#app.night #progress-panel{background:#39485b;color:#eee6d0}#app.night #progress-panel .progress-label{color:#eee6d0}}