/* Touch layouts and safe areas; desktop layout stays in the component styles. */
html{color-scheme:dark}
.landingAccountActions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}.landingAccountActions button{min-height:44px;padding:10px 16px;font-size:12px;border:1px solid #ffffff30;background:#202020;color:#eee}.landingAccountActions [data-register]{background:#e9e9e9;color:#141414}.accountLogout{margin-left:auto;font-size:12px}.accountLogout[hidden]{display:none}
@media(max-width:540px){.landingNav{flex-wrap:wrap;padding-block:16px;gap:14px}.landingAccountActions{width:100%;justify-content:flex-start;gap:10px}.landingAccountActions .landingAboutLink{margin-right:auto}.accountDialog{padding:24px;max-height:calc(100dvh - 24px);overflow:auto}.accountDialog input{font-size:16px}.accountDialog button{min-height:44px}}
.landing{padding-inline:clamp(24px,4vw,88px);min-height:100dvh;display:flex;flex-direction:column}
.landingNav{flex-shrink:0}
.landingHero{flex:1;min-height:calc(100dvh - 270px);gap:clamp(32px,6vw,120px);padding-block:clamp(40px,7vh,100px)}
.landingCopy{max-width:680px}
.landing h1{font-size:clamp(64px,8vw,144px)}
.landingIntro{font-size:clamp(24px,2.1vw,36px)}
.landingDescription{max-width:520px;font-size:clamp(14px,1vw,17px)}
.landingIdentity img{max-width:min(31vw,520px)}
.landingBottom{gap:6vw}.landingAbout p,.landingHelp p{max-width:640px}
.userHome{flex:1;padding-bottom:32px}
.userHomeGrid{grid-template-columns:minmax(280px,30%) minmax(0,1fr);gap:clamp(20px,3vw,48px);align-items:start}
.userCard{position:sticky;top:24px}
.userPortrait3d{height:clamp(360px,49dvh,640px);width:100%;max-width:none}
.userHomeMain{min-width:0}
.userWelcome{padding-block:28px}
.userEditor form{column-gap:24px}
#mobile{display:none}
@media(max-width:700px),(pointer:coarse){
  .landing{padding-inline:max(18px,env(safe-area-inset-left)) max(18px,env(safe-area-inset-right))}
  .userHomeGrid,.userHomeMain,.userEditor,.userPlayCard{min-width:0}
  .landingHero{min-height:0;grid-template-columns:1fr;padding-block:42px;gap:24px}
  .landingCopy{max-width:none}
  .landing h1{font-size:clamp(58px,13vw,90px);letter-spacing:-3px;overflow-wrap:anywhere}
  .landingIntro{font-size:26px}
  .landingDescription{max-width:100%;font-size:14px}
  .landingIdentity{position:static;opacity:1;width:auto;z-index:auto;padding:8px 0 20px}
  .landingIdentity img{width:min(60vw,280px);max-width:100%}
  .landingIdentity>span{display:block;margin-top:14px}
  .landingBottom{grid-template-columns:1fr;gap:24px}
  .landingFooter{flex-wrap:wrap}
  .userHomeGrid{grid-template-columns:minmax(0,1fr);gap:18px}
  .userCard{display:block;position:static;text-align:center;padding:18px}
  .userPortrait3d{height:clamp(280px,48dvh,440px);width:100%;max-width:none}
  .userPlayCard{padding:22px}
  .userPlayCard>button{position:static;width:100%;justify-content:space-between;margin-top:18px}
  .userWelcome h1{overflow-wrap:anywhere}
  .userHomeHeader{flex-wrap:wrap;padding-block:14px;gap:12px}
  .userHomeHeader small{width:100%;margin-left:0}
  .landing input:not([type=color]):not([type=checkbox]),.landing select{font-size:16px}
  .landing button,.onlineRoom button,.onlineProfileDialog button{min-height:44px}
  .userEditor form,.userClothes{grid-template-columns:repeat(2,minmax(0,1fr))}
  #toggleFirstPerson{left:max(10px,env(safe-area-inset-left))!important;top:max(10px,env(safe-area-inset-top))!important;max-width:55vw;font-size:12px;min-height:44px}
  #showToolbar{right:max(10px,env(safe-area-inset-right));max-width:40vw;min-height:44px}
  #toolbar{box-sizing:border-box;right:max(8px,env(safe-area-inset-right));top:max(8px,env(safe-area-inset-top));width:min(360px,calc(100vw - 16px));max-height:calc(100dvh - 24px);overflow:auto;overscroll-behavior:contain}
  #toolbar button{min-height:44px}
  #toolbar input:not([type=color]):not([type=range]):not([type=checkbox]),#toolbar select{font-size:16px;max-width:100%}
  .onlineRoom{top:auto;bottom:max(12px,env(safe-area-inset-bottom));right:max(10px,env(safe-area-inset-right));width:min(340px,calc(100vw - 20px))}
  .onlineRoom>summary{min-height:48px;padding:10px 14px}
  .onlineRoom .onlineTabPages{max-height:48dvh}
  .onlineRoom input,.onlineRoom select{font-size:16px}
  .onlineProfileDialog{max-height:calc(100dvh - 24px);width:calc(100vw - 20px)}
  #screenView{padding:max(8px,env(safe-area-inset-top)) 8px max(8px,env(safe-area-inset-bottom))}
  #screenView article{width:100%;max-height:calc(100dvh - 16px);overflow:auto}
  #screenView header{gap:12px;align-items:center}
  #screenView h2{font-size:18px;overflow-wrap:anywhere}
  #screenView header button{flex-shrink:0;min-height:44px}
  .monitorWorkspace{grid-template-columns:minmax(0,1fr)}
  .monitorStage{min-width:0;min-height:160px}
  #dialog article,#boardEditor{width:min(560px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto}
  #npcConversation{left:10px;bottom:max(10px,env(safe-area-inset-bottom));width:calc(100vw - 20px);height:min(520px,75dvh)}
  #mobile{display:grid;left:max(12px,env(safe-area-inset-left));bottom:calc(76px + env(safe-area-inset-bottom));grid-template-columns:repeat(3,44px);gap:5px;z-index:4}
  #mobile button{min-width:44px;min-height:44px;background:#181818df;color:#fff;border-color:#ffffff40;padding:0}
  #mobile .mobileInteract{grid-column:1/-1;font-size:12px}
  .roomPresenceNotices{bottom:calc(250px + env(safe-area-inset-bottom));width:calc(100vw - 24px)}
  .roomLoading{padding:12px;overscroll-behavior:contain}
  .roomLoadingContent{max-width:600px}
}
@media(max-width:380px){.userEditor form,.userClothes{grid-template-columns:1fr}.userColors{grid-template-columns:repeat(3,minmax(0,1fr))}.landing h1{font-size:60px}.landingPlay{width:100%;justify-content:space-between}.userWelcome h1{font-size:24px}}
@media(orientation:landscape) and (max-height:500px) and (pointer:coarse){
  .landingHero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding-block:24px}
  .landingIdentity img{width:min(30vw,230px)}
  .userPortrait3d{height:300px}
  #mobile{bottom:calc(12px + env(safe-area-inset-bottom))}
  .onlineRoom{width:290px}.onlineRoom .onlineTabPages{max-height:55dvh}
  .roomPresenceNotices{bottom:20px;width:min(360px,45vw)}
  .roomLoadingContent{padding:16px;max-width:540px}.roomLoadingTip{min-height:0;margin:12px 0;padding:10px;gap:8px}.roomLoadingTip img{display:none}.roomLoadingContent h2{margin:10px 0;font-size:24px}.roomLoadingContent small{display:none}
  .onlineAvatarPreviewStage{height:160px}
}