/* Shared game HUD: one visual language in the menu, construction and photo mode. */
:root{--ui-scale:1;--hud-top:16px;--tray-height:166px;--ui-ink:#624c32}
:root[data-text-size=large]{--ui-scale:1.15}:root[data-text-size=extra]{--ui-scale:1.3}
#app .header{position:absolute;inset:var(--hud-top) 24px auto;height:58px;margin:0;border:0;display:flex;align-items:flex-start;justify-content:space-between;z-index:20;pointer-events:none}
#app .header>*{pointer-events:auto}.header #brand-home{flex:none;text-decoration:none}.header .header-center{position:absolute;left:50%;transform:translateX(-50%);margin:0;letter-spacing:0;display:block}
#app .coin-pouch{min-width:132px;font-size:calc(21px * var(--ui-scale));padding:7px 17px;border:2px solid #b98d53;border-radius:25px;background:#fff0ce;color:#644e32;box-shadow:0 4px #a38151;font-weight:700;line-height:1.2;text-align:center}
#app .coin-pouch small{font-size:calc(11px * var(--ui-scale));font-weight:400;color:#756344;letter-spacing:0;margin:4px 0 0}
.game-top{inset:var(--hud-top) 24px auto;align-items:flex-start}.game-top .coin-pouch{position:absolute;left:50%;transform:translateX(-50%)}
#app .header-actions{margin-left:auto;gap:8px}.header-actions .circle-button,.header-actions .worlds-button,#hud-toggle,#brand-home{display:grid;place-items:center;width:46px;height:46px;min-height:46px;padding:0;border:3px solid #fff0ce;border-radius:16px;background:linear-gradient(#ebc894,#c79860);box-shadow:0 4px #8e663f;color:#684627}
.header-actions .worlds-button span{display:none}.header-actions .ui-icon,#brand-home .ui-icon{width:23px;height:23px}.header-actions #help{font-size:24px}.header-actions #atmosphere-toggle{display:none}
#app #hud-toggle{display:flex;justify-content:center;gap:2px;margin-left:auto;order:5}#hud-toggle>.ui-icon:last-child{width:11px}.header .header-actions{position:absolute;right:0;top:58px;max-width:270px;display:flex;flex-wrap:wrap;padding:10px;background:#f6edda;border:1px solid #cfc4a8;border-radius:22px;box-shadow:0 5px 20px #52604520}#app.hud-folded .header-actions{display:none}
#app.home .header{display:none}#app.night .header-actions{background:#39485b;border-color:#8997ae}#app.night .header-actions button,#app.night #hud-toggle,#app.night #brand-home{background:linear-gradient(#66728a,#465168);color:#f4e8c8;border-color:#a6adbc;box-shadow:0 4px #263247}
/* Essential construction information is centered above the scene, not stacked at its side. */
#app.playing .story-panel{position:absolute;top:91px;left:50%;right:auto;transform:translateX(-50%);width:min(440px,calc(100% - 32px));padding:0;text-align:center;z-index:8;pointer-events:none}
#app.playing .story-panel>h1{display:block;font:calc(20px * var(--ui-scale))/1.2 var(--serif);margin:0 0 9px;max-width:none;letter-spacing:0}
#app.playing .story-panel>.eyebrow,#app.playing .story-panel>.level-meta,#app.playing .story-panel>p,#app.playing #back-collection,#app #progress-toggle{display:none}
#app.playing #progress-panel,#app.playing.progress-folded #progress-panel{display:block!important;border-radius:18px;padding:10px 15px;background:#f7f0dded;border:1px solid #cfc4a8}
#app.playing .progress-label{font-size:calc(13px * var(--ui-scale));margin:0 0 7px;gap:12px}.playing .progress-detail,.playing .stages{display:none!important}.playing .progress-track{height:5px}
#app.playing #scene,#app.playing:not(.tray-folded) #scene,#app.playing:not(.progress-folded) #scene{left:0;right:0;top:calc(var(--story-bottom,174px) + 8px);bottom:calc(var(--tray-height) + 37px)}
.scene-chip{display:none!important}.photo .photo-title,.photo .photo-back-button{display:none!important}
/* Always-open horizontal inventory. Horizontal touch pans; vertical drags place a block. */
#app #tray{position:absolute;bottom:max(12px,env(safe-area-inset-bottom));left:50%;right:auto;transform:translateX(-50%);width:min(980px,calc(100% - 28px));padding:10px 12px 7px;border-radius:24px;z-index:12}
#app #tray-toggle{display:none!important}.material-carousel{display:flex;align-items:center;gap:8px;min-width:0}
#app #materials{display:flex!important;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;gap:8px;flex:1;min-width:0;padding:4px 3px 8px;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:#a4b381 transparent;overscroll-behavior-x:contain;touch-action:pan-x}
#app #materials .material{flex:0 0 calc(94px * var(--ui-scale));width:calc(94px * var(--ui-scale));min-height:90px;padding:9px 5px 6px;scroll-snap-align:center;touch-action:pan-x;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:14px}
#app #materials .material img{width:55px;height:38px;margin:0}.material-name{font-size:calc(12px * var(--ui-scale))!important;white-space:normal!important;line-height:1.2}.material-status{font-size:calc(10px * var(--ui-scale))!important;line-height:1.2;margin-top:4px}.material-number,.material-count{font-size:calc(11px * var(--ui-scale))!important}
.carousel-arrow{display:grid;place-items:center;width:32px;height:44px;flex:none;background:#e4d1aa;color:#725634;border:1px solid #ccb487;border-radius:14px}.carousel-arrow .ui-icon{width:20px;height:20px}.carousel-arrow:focus-visible{outline:3px solid #718b4e}
#app #tray .tray-heading{padding:0 3px 4px;display:flex;gap:8px;font-size:calc(12px * var(--ui-scale))}#tray .tray-heading>span:first-child{display:none!important}#app #tray #tray-instruction{display:block;font-size:calc(12px * var(--ui-scale))}#layer-progress{display:none}#app #tray #hint{margin-left:auto;font-size:calc(12px * var(--ui-scale));white-space:nowrap}.touch-tip{display:none!important}
#app.playing #scene-caption{bottom:calc(var(--tray-height) + 18px);left:50%;font-size:calc(12px * var(--ui-scale));gap:7px;max-width:95%;width:max-content}#app #scene-caption .ui-icon{width:18px;height:18px}
#app.playing #toast,#app.playing #snap-status{bottom:calc(var(--tray-height) + 48px);font-size:calc(14px * var(--ui-scale));max-width:min(520px,90%);white-space:normal;z-index:40}
#app.playing .view-controls{left:16px;top:50%;bottom:auto;transform:translateY(-50%)}
#app .view-controls #camera-toggle{display:flex;align-items:center;justify-content:center;gap:1px;width:44px;height:44px;padding:5px;border:0;box-shadow:none}
#app .view-controls button{width:44px;min-height:38px}#app .view-controls .ui-icon{width:22px;height:22px}#app .view-controls #camera-toggle .ui-icon:last-child{width:10px}
#app.night .carousel-arrow{background:#586680;color:#f4e8c8;border-color:#8997ae}
/* Contextual tutorial bubbles appear with each new action, and can be minimized. */
#app #tutorial-guide{position:absolute;left:50%;transform:translateX(-50%);width:min(420px,calc(100% - 32px));bottom:calc(var(--tray-height) + 53px);margin:0;padding:12px 42px 12px 15px;background:#fff8e6;border:2px solid #b3bf8d;border-radius:20px;box-shadow:0 6px 20px #55653e20;z-index:13;font-size:calc(14px * var(--ui-scale));line-height:1.4;pointer-events:auto}
#tutorial-guide::after{content:'';position:absolute;bottom:-10px;left:50%;width:16px;height:16px;transform:rotate(45deg);background:inherit;border-bottom:2px solid #b3bf8d;border-right:2px solid #b3bf8d}
#app #tutorial-guide[data-target=scene]{top:calc(var(--story-bottom,174px) + 16px);bottom:auto}#app #tutorial-guide.tip-minimized{width:42px;height:42px;padding:0;left:auto;right:16px;transform:none}#tutorial-guide.tip-minimized::after,#tutorial-guide.tip-minimized>strong,#tutorial-guide.tip-minimized>span,#tutorial-guide.tip-minimized>.ui-icon{display:none}
#tutorial-tip-toggle{position:absolute;right:5px;top:5px;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:#e8edce;color:#5c6e43}#tutorial-guide #tutorial-tip-toggle .ui-icon{float:none;margin:0;width:17px;height:17px}
#app .material.tutorial-target{border-color:#7d9855;outline:2px solid #b7cc7c;outline-offset:1px}.home #tutorial-guide,.photo #tutorial-guide{display:none!important}
/* Text size applies to every active screen, including settings and photo customization. */
.cozy-dialog label,.cozy-dialog .wood-button{font-size:calc(15px * var(--ui-scale))}.cozy-dialog h2{font-size:calc(27px * var(--ui-scale))}.cozy-dialog{width:min(420px,92vw)}
#app .title-content p{font-size:calc(13px * var(--ui-scale))}.title-content .wood-button{font-size:calc(16px * var(--ui-scale))}.title-content .play-button{font-size:calc(25px * var(--ui-scale))}.title-footer{font-size:calc(12px * var(--ui-scale))}
.picker-heading h2{font-size:calc(30px * var(--ui-scale));margin:5px 0 10px}.picker-heading small,.house-actions small,.house-actions p{font-size:calc(13px * var(--ui-scale))}.picker-heading small{letter-spacing:0}.house-picker{top:100px}.house-actions .play-button{font-size:calc(19px * var(--ui-scale))}.house-dots button{font-size:calc(13px * var(--ui-scale));flex:none}
.house-progress{width:min(220px,60vw);height:8px;margin:0 auto 20px;display:block!important}.house-progress span{font-size:calc(12px * var(--ui-scale));top:10px}.house-stage img{width:76%;height:100%;max-height:none;min-height:0}.house-stage{min-height:100px}.house-actions p:empty{display:none}.house-dots{flex-wrap:nowrap;max-width:100%;overflow-x:auto;justify-content:flex-start;padding:8px 3px 5px;scrollbar-width:thin}
#app #atmosphere-panel .setting-label,#app #atmosphere-panel button,#app #atmosphere-panel p,#app #atmosphere-panel label,#app .paint-row legend,#app .audio-settings summary{font-size:calc(14px * var(--ui-scale))}#app #atmosphere-panel .segmented button span{font-size:calc(12px * var(--ui-scale))}#app .paint-section summary{font-size:calc(20px * var(--ui-scale))}#app #photo-dock button{font-size:calc(14px * var(--ui-scale))}#modal-content p,#modal-content .help-step span{font-size:calc(15px * var(--ui-scale));line-height:1.6}
@media(max-width:700px){
 :root{--hud-top:max(12px,env(safe-area-inset-top))}#app .header{left:14px;right:14px;height:52px}.game-top{left:14px;right:14px}#app .coin-pouch{min-width:132px;padding:7px 12px;font-size:calc(19px * var(--ui-scale))}#app .coin-pouch small{font-size:calc(10px * var(--ui-scale))}
 #app.playing .story-panel{top:88px;width:calc(100% - 28px)}#app.playing .story-panel>h1{font-size:calc(18px * var(--ui-scale));margin-bottom:7px}#app.playing #progress-panel{padding:8px 13px}
 #app #tray{padding:8px 8px 3px;bottom:max(8px,env(safe-area-inset-bottom));width:calc(100% - 20px)}.material-carousel{gap:4px}.carousel-arrow{width:24px;height:38px}#app #materials{gap:7px}#app #materials .material{flex-basis:calc(88px * var(--ui-scale));width:calc(88px * var(--ui-scale));min-height:86px}#app #tray #tray-instruction{font-size:calc(11px * var(--ui-scale))}#app #tray #hint{font-size:calc(11px * var(--ui-scale))}#hint span{display:none}
 #app.playing #scene-caption{font-size:calc(10px * var(--ui-scale));gap:4px}#app #tutorial-guide{font-size:calc(13px * var(--ui-scale));padding:10px 40px 10px 12px}#app.playing .view-controls{left:8px}
 .house-picker{inset:94px 12px 12px;gap:5px}.picker-heading h2{font-size:calc(25px * var(--ui-scale));margin:5px 0 10px}.picker-heading small{display:none}.house-stage{min-height:90px}.house-stage img{width:78%;max-width:78%;max-height:none}.house-actions small{font-size:calc(11px * var(--ui-scale))}.house-actions .play-button{min-width:230px;margin:9px auto 0;font-size:calc(18px * var(--ui-scale))}.house-dots{width:100%;padding-top:8px}.house-dots button{min-width:35px;height:35px}.house-actions p{font-size:calc(12px * var(--ui-scale));margin:5px 0 0;min-height:0}.house-progress{margin-bottom:16px}
 #app .title-content p{font-size:calc(12px * var(--ui-scale));padding:0 16px;line-height:1.35}.title-content .wood-button{font-size:calc(15px * var(--ui-scale));width:260px}.title-content .play-button{font-size:calc(23px * var(--ui-scale));width:280px}.title-art{top:calc(13% + 170px)}
 #app #atmosphere-panel{padding:16px 13px;max-height:46svh}.photo .photo-back-button{display:none}.photo #scene,.photo.panel-hidden #scene{top:88px}.photo #photo-dock{padding:4px}.photo #photo-dock button{font-size:calc(12px * var(--ui-scale));padding:8px 4px;gap:4px}.photo #photo-dock .ui-icon:last-child{width:10px}.photo #photo-dock .ui-icon:first-child{width:18px}
}
@media(max-width:700px) and (max-height:670px){.title-art{top:calc(13% + 128px)}#app .title-content p{font-size:calc(11px * var(--ui-scale))}.house-picker{top:87px}.picker-heading h2{font-size:calc(22px * var(--ui-scale))}.house-actions .play-button{min-height:46px;padding:10px 20px}.house-dots button{height:32px}.house-stage{min-height:70px}}
@media(prefers-reduced-motion:no-preference){#tutorial-guide:not(.tip-minimized){animation:tip-in .25s ease-out}@keyframes tip-in{from{opacity:0;margin-bottom:-8px}to{opacity:1;margin-bottom:0}}}
#app.playing #progress-panel{width:100%;max-width:none;box-sizing:border-box}
#app #materials{justify-content:flex-start}
#app #hud-toggle{min-width:46px}
#app.playing #tutorial-guide:not([hidden]){display:block!important}
#app.playing #progress-panel{margin:0}
#app.camera-folded .view-controls>button:not(#camera-toggle),#app.camera-folded .view-controls>span{display:none!important}
/* House selection: reserve the full center for the miniature and group navigation below it. */
.house-stage{display:block;max-width:960px;min-height:210px;width:100%;flex:1 1 0;}
.house-stage img{position:absolute;inset:0 0 66px;width:100%;max-width:100%;height:calc(100% - 66px);max-height:none;object-fit:contain;object-position:center;}
.house-stage #house-prev,.house-stage #house-next{position:absolute;bottom:8px;width:48px;height:48px;z-index:2;}
.house-stage #house-prev{left:calc(50% - 57px)}
.house-stage #house-next{right:calc(50% - 57px)}
.house-lock{top:calc(50% - 33px)}
.house-actions{flex:none;}
.house-actions .play-button{margin-bottom:20px;}
.house-dots{flex:none;flex-wrap:wrap;justify-content:center;overflow:visible;padding:3px 4px 6px;}
@media(max-width:700px){
 .house-picker{bottom:max(20px,env(safe-area-inset-bottom));gap:4px;}
 .house-stage{min-height:180px;max-width:none;}
 .house-stage img{inset:0 0 58px;width:100%;max-width:100%;height:calc(100% - 58px);}
 .house-stage #house-prev,.house-stage #house-next{width:44px;height:44px;bottom:7px;}
 .house-stage #house-prev{left:calc(50% - 53px)}
 .house-stage #house-next{right:calc(50% - 53px)}
 .house-actions .play-button{margin:9px auto 20px;}
 .house-dots{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:9px 7px;width:min(350px,100%);max-width:100%;padding:2px 3px 6px;overflow:visible;}
 .house-dots button{width:100%;min-width:0;height:36px;}
 .house-dots button.active{transform:none;}
 .house-lock{top:calc(50% - 29px);}
}
@media(max-width:700px) and (max-height:600px){
 .house-picker{overflow-y:auto;overscroll-behavior:contain;padding-bottom:8px;}
 .house-stage{flex:1 0 180px;}
}
/* Desktop actions remain visible; only mobile needs an expandable menu. */
@media(min-width:701px){
 #app #hud-toggle{display:none!important;}
 #app .header .header-actions,#app.hud-folded .header .header-actions{display:flex;position:static;flex-wrap:nowrap;align-items:center;gap:8px;max-width:none;margin-left:auto;padding:0;border:0;background:transparent;box-shadow:none;}
}
@media(min-width:701px) and (max-width:900px){
 #app .header .header-actions{gap:6px;}
 #app .header-actions .circle-button,#app .header-actions .worlds-button{width:42px;height:44px;min-height:44px;}
}