/* Keep the scene open: one navigation bar and a small left-hand tool rail. */
:root{
 --hud-gold:#e7c979;
 --hud-left:max(12px,env(safe-area-inset-left));
 --hud-bottom:max(10px,env(safe-area-inset-bottom));
 --hud-movement-bottom:calc(92px + env(safe-area-inset-bottom));
 --hud-tools-bottom:calc(184px + env(safe-area-inset-bottom));
}
body #app .topbar{
 left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right));
 top:max(8px,env(safe-area-inset-top));width:auto;max-width:none;
 height:48px;min-height:48px;padding:1px 5px 1px 10px;gap:6px;border-radius:16px;
 flex-wrap:nowrap;box-sizing:border-box;
}
body #app .topbar .brand{flex:none;margin:0;font-size:18px;gap:4px}
body #app .topbar .brand span{display:inline}
body #app .topbar .brand svg{width:22px;height:26px}
body #app .topbar .presence-button{margin:0;margin-right:auto;padding:4px;min-width:0;gap:4px;font-size:11px;white-space:nowrap}
body #app .topbar #presence-status{overflow:hidden;text-overflow:ellipsis;max-width:120px}
body #app .topbar #zones{display:block;margin-left:0;padding:5px 8px;font-size:11px;white-space:nowrap}
body #app .topbar #hud-menu-toggle{margin-left:0;flex:none}
body #app .topbar>.header-divider,body #app .topbar>#location{display:none}

body #app .bottom-area{bottom:var(--hud-bottom);gap:0;max-width:100%;z-index:8}
body #app .bottom-area .dock{
 width:min(340px,calc(100vw - 24px));padding:3px 4px;gap:0;border-radius:18px;
 box-sizing:border-box;justify-content:space-around;
}
body #app .bottom-area .dock button{
 flex:1;min-width:44px;width:auto;height:48px;min-height:48px;padding:4px 2px;gap:3px;
 font-size:10px;line-height:1.2;border:0!important;border-radius:0;
 background:transparent!important;box-shadow:none!important;backdrop-filter:none;-webkit-backdrop-filter:none;
 color:var(--hud-text)!important;transition:color .16s,opacity .16s;
}
body #app .bottom-area .dock button svg{width:19px;height:19px;stroke-width:1.65}
body #app .bottom-area .dock button>span:last-child{
 position:static;width:auto;max-width:100%;height:auto;clip:auto;clip-path:none;
 overflow:visible;white-space:normal;line-height:11px;text-align:center;
}
body #app .bottom-area .dock button:is(.active,[aria-pressed=true],[aria-expanded=true]){
 color:var(--hud-gold)!important;background:transparent!important;border:0!important;box-shadow:none!important;
}
body #app .bottom-area .dock button:hover{background:transparent!important;color:#f1ddb0!important}
body #app .bottom-area .dock button:active{opacity:.75}
body #app .bottom-area .dock button:focus-visible{outline:2px solid var(--hud-gold);outline-offset:-2px;border-radius:9px}
body #app .bottom-area .dock-divider{display:none}

/* The invisible 84px drag target still gives the thumb its full movement range. */
body #app #movement{left:var(--hud-left);bottom:var(--hud-movement-bottom);transform:none;gap:0}
body #app #joystick{
 width:84px;height:84px;border:0!important;background:transparent!important;
 box-shadow:none!important;backdrop-filter:none;-webkit-backdrop-filter:none;touch-action:none;
}
body #app #joystick .joystick-ring,body #app #joystick .pad{display:none}
body #app #joystick #stick{
 left:calc(50% - 18px);top:calc(50% - 18px);width:36px;height:36px;
 border:1px solid #eef0e6a3;border-radius:50%;background:#f1f0e04d;
 box-shadow:0 2px 12px #101a1733,inset 0 1px 1px #ffffff35;
 backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);pointer-events:none;
}
body #constellation-ui .constellation-pad{
 left:var(--hud-left);bottom:calc(48px + env(safe-area-inset-bottom));
 background:transparent;border:0;box-shadow:none;
}
body #constellation-ui .constellation-pad i{
 width:36px;height:36px;left:26px;top:26px;background:#f1f0e04d;border-color:#eef0e6a3;
 box-shadow:0 2px 12px #101a1733,inset 0 1px 1px #ffffff35;
}
body #constellation-ui .constellation-pad button{font-size:0}

body #app #gift-bag{
 left:var(--hud-left);right:auto;top:auto;bottom:var(--hud-tools-bottom);transform:none;
 width:44px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 260px);
 border:0;background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
}
body #app #gift-bag[data-open=true]{
 width:min(324px,calc(100vw - 24px));padding:8px;overflow:auto;border:1px solid var(--hud-edge);
 background:rgba(25,29,28,.88);backdrop-filter:var(--hud-blur);-webkit-backdrop-filter:var(--hud-blur);
}
body #app #sns-links{left:var(--hud-left);right:auto;bottom:calc(var(--hud-tools-bottom) + 48px)}
body #app #constellation-entry{left:var(--hud-left);right:auto;top:auto;bottom:calc(var(--hud-tools-bottom) + 96px)}
body #app #support-launcher{left:var(--hud-left);right:auto;top:auto;bottom:calc(var(--hud-tools-bottom) + 144px)}
body #app :is(#support-launcher,#constellation-entry,#bag-toggle),body #app #sns-links>summary{
 width:44px;height:44px;min-width:44px;min-height:44px;box-sizing:border-box;
 padding:5px 3px;gap:2px;border-radius:13px;font-size:9px;line-height:1.15;
}
body #app #sns-links .sns-menu{left:52px;right:auto;bottom:0;max-width:calc(100vw - 82px)}
body #app #sns-links .sns-brand-label{max-width:40px;font-size:8px;line-height:1.05;text-align:center}
body #app #sns-links>summary svg,body #app :is(#constellation-entry,#bag-toggle) svg{width:20px;height:20px}
body #app #support-launcher .support-sparkle{font-size:19px;line-height:20px}
body #app #bag-toggle{background:var(--hud-surface)!important;border:1px solid var(--hud-edge)}
body[data-hud-menu-open=true] #app :is(#gift-bag,#sns-links,#support-launcher,#constellation-entry,#allocation-launcher,#movement),
body[data-hud-menu-open=true] #niche-photo-controls{visibility:hidden}
body:has(#gift-bag[data-open=true]) #app :is(#sns-links,#constellation-entry,#support-launcher){visibility:hidden}

body #visitor-social button.social-say-toggle{
 left:calc(var(--hud-left) + 88px);right:auto;bottom:calc(var(--hud-movement-bottom) + 20px);
 width:44px;height:44px;min-height:44px;border-radius:13px;
}
body #visitor-social .social-presets{
 left:calc(var(--hud-left) + 52px);right:auto;bottom:calc(var(--hud-movement-bottom) + 72px);
 width:min(252px,calc(100vw - 80px));max-height:calc(100dvh - 250px);
}
body #visitor-social .social-admin-controls,
body[data-admin-ui-hidden=true] #visitor-social .social-admin-controls{
 left:var(--hud-left);right:auto;top:calc(max(8px,env(safe-area-inset-top)) + 60px);bottom:auto;
 flex-direction:column;gap:6px;
}
body #visitor-social .social-admin-controls>button{position:static;width:44px;height:44px;min-height:44px;border-radius:13px}
body #visitor-social .social-admin-composer,
body[data-admin-ui-hidden=true] #visitor-social .social-admin-composer{
 left:calc(var(--hud-left) + 52px);right:auto;top:calc(max(8px,env(safe-area-inset-top)) + 60px);bottom:auto;
 width:min(300px,calc(100vw - 80px));max-height:calc(100dvh - 160px);
}
body #app #allocation-launcher{
 right:max(12px,env(safe-area-inset-right));bottom:calc(80px + env(safe-area-inset-bottom));
 width:52px;height:52px;min-height:52px;padding:5px 3px;border-radius:16px;
 flex-direction:column;gap:1px;font-size:9px;line-height:1.15;
}
body #app #allocation-launcher svg{width:22px;height:22px}
body:not([data-niche-ui-hidden=true]) #niche-photo-controls{top:120px;left:var(--hud-left);gap:6px}

/* Tree care replaces the dock; reserve its existing lower work area. */
body[data-scene=grove]{--hud-movement-bottom:calc(206px + env(safe-area-inset-bottom));--hud-tools-bottom:calc(298px + env(safe-area-inset-bottom))}
body[data-scene=grove] #app #sns-links{bottom:var(--hud-tools-bottom)}
body[data-scene=grove] #app #constellation-entry{bottom:calc(var(--hud-tools-bottom) + 48px)}
body[data-scene=grove] #app #support-launcher{bottom:calc(var(--hud-tools-bottom) + 96px)}
body[data-scene=grove] #visitor-social button.social-say-toggle{bottom:calc(var(--hud-movement-bottom) + 20px)}
body[data-scene=grove] #visitor-social .social-presets{bottom:calc(var(--hud-movement-bottom) + 72px)}

@media(max-width:360px){
 body #app .topbar{gap:3px;padding-left:7px}
 body #app .topbar .brand{font-size:16px;gap:2px}
 body #app .topbar .brand svg{width:20px}
 body #app .topbar .presence-button{font-size:10px;padding:3px}
 body #app .topbar #presence-status{max-width:89px}
 body #app .topbar #zones{font-size:10px;padding:4px}
 body #app .bottom-area .dock{width:calc(100vw - 16px)}
 body #app .bottom-area .dock button{font-size:9px}
}
@media(max-height:720px){body:not([data-niche-ui-hidden=true]) #niche-photo-controls{top:68px;bottom:auto;gap:4px}}
@media(max-height:620px){
 :root{--hud-movement-bottom:calc(72px + env(safe-area-inset-bottom));--hud-tools-bottom:calc(164px + env(safe-area-inset-bottom))}
 body #app #gift-bag{max-height:calc(100dvh - 220px)}
 body #visitor-social .social-presets{max-height:calc(100dvh - 200px)}
 body:not([data-niche-ui-hidden=true]) #niche-photo-controls{top:68px;bottom:auto;gap:4px}
}
@media(max-height:500px) and (min-width:620px){
 :root{--hud-movement-bottom:calc(66px + env(safe-area-inset-bottom));--hud-tools-bottom:calc(84px + env(safe-area-inset-bottom))}
 body #app #gift-bag{left:calc(var(--hud-left) + 92px);max-height:calc(100dvh - 146px)}
 body #app #sns-links{left:calc(var(--hud-left) + 140px);bottom:var(--hud-tools-bottom)}
 body #app #constellation-entry{left:calc(var(--hud-left) + 188px);bottom:var(--hud-tools-bottom)}
 body #app #support-launcher{left:calc(var(--hud-left) + 236px);bottom:var(--hud-tools-bottom)}
 body #app #sns-links .sns-menu{left:0;bottom:52px;max-height:calc(100dvh - 160px);overflow:auto}
 body #visitor-social button.social-say-toggle{left:var(--hud-left);bottom:calc(12px + env(safe-area-inset-bottom))}
 body #visitor-social .social-presets{left:calc(var(--hud-left) + 52px);bottom:calc(12px + env(safe-area-inset-bottom));max-height:calc(100dvh - 86px)}
 body #visitor-social .social-admin-controls{left:var(--hud-left);top:68px}
 body #visitor-social .social-admin-composer{top:68px;max-height:calc(100dvh - 84px)}
 body #app #allocation-launcher{bottom:var(--hud-bottom);right:max(12px,env(safe-area-inset-right))}
 body[data-scene=grove]{--hud-movement-bottom:calc(24px + env(safe-area-inset-bottom));--hud-tools-bottom:calc(124px + env(safe-area-inset-bottom))}
 body[data-scene=grove] #grove-ui{left:auto;right:12px;transform:none;width:min(340px,48vw);max-width:none}
 body[data-scene=grove] #app #sns-links{left:calc(var(--hud-left) + 92px);bottom:var(--hud-tools-bottom)}
 body[data-scene=grove] #app #constellation-entry{left:calc(var(--hud-left) + 140px);bottom:var(--hud-tools-bottom)}
 body[data-scene=grove] #app #support-launcher{left:calc(var(--hud-left) + 188px);bottom:var(--hud-tools-bottom)}
 body[data-scene=grove] #visitor-social button.social-say-toggle{left:calc(var(--hud-left) + 92px);bottom:calc(var(--hud-movement-bottom) + 20px)}
}
@media(prefers-reduced-motion:reduce){body #app .bottom-area .dock button{transition:none}}

body[data-petting=true] #app .bottom-area .dock button:not(#petting-toggle),
body #app .bottom-area .dock:has(button[aria-expanded=true]) button:not([aria-expanded=true]){color:var(--hud-text)!important}