/* My Palace and Creation share a portrait scene coordinate system. */
@media(max-width:760px){
  :is(#myPalace,#creation){
    --portrait-w:min(100vw,56.25svh);--portrait-h:min(100svh,177.777778vw);
    --portrait-x:calc((100vw - var(--portrait-w))/2);--portrait-y:calc((100svh - var(--portrait-h))/2);
    height:100svh!important;min-height:0!important;overflow:hidden!important;
  }
  #myPalace{background:#f2dfd9!important}#creation{background:#e0ece9!important}
  body:has(:is(#myPalace,#creation).active) #elarisNavigation{left:8px!important;right:8px!important;top:max(7px,env(safe-area-inset-top))!important;gap:4px!important}
  body:has(:is(#myPalace,#creation).active) #elarisNavigation button{min-width:0!important;min-height:40px!important;padding:6px 8px!important;font-size:11px!important;line-height:1.2!important;border-radius:12px!important;white-space:normal!important}
  body:has(:is(#myPalace,#creation).active) #journeyHome{flex:0 0 70px!important;font-size:14px!important;letter-spacing:.06em!important}
  body:has(:is(#myPalace,#creation).active) #journeyBack{flex:1 1 auto!important;max-width:none!important}
  body:has(:is(#myPalace,#creation).active) :is(#journeyPalaces,#journeyMember){flex:0 0 58px!important;margin:0!important}
  #myPalace #mpViewport,#creation #crViewport{position:absolute!important;inset:0!important;overflow:hidden!important;touch-action:manipulation!important}
  #myPalace #mpStage,#creation #crWorld{
    position:absolute!important;left:var(--portrait-x)!important;top:var(--portrait-y)!important;
    width:var(--portrait-w)!important;height:var(--portrait-h)!important;min-width:0!important;min-height:0!important;
    aspect-ratio:9/16!important;transform:none!important;scale:1!important;
    background-position:center!important;background-size:100% 100%!important;background-repeat:no-repeat!important;
  }
  #myPalace #mpRoomArt,#creation #crArt{opacity:0!important;pointer-events:none!important}
  #mpStage,#mpStage[data-room=salon]{background-image:url('assets/images/my-palace-salon-mobile-v44.webp')!important}
  #mpStage[data-room=boudoir]{background-image:url('assets/images/my-palace-boudoir-mobile-v44.webp')!important}
  #mpStage[data-room=conservatory]{background-image:url('assets/images/my-palace-conservatory-mobile-v44.webp')!important}
  #mpStage[data-room=music]{background-image:url('assets/images/my-palace-music-mobile-v44.webp')!important}
  #creation #crWorld{background-image:url('assets/images/creation-mobile-v44.webp')!important}
  #myPalace .mp-pan{display:none!important}
  #myPalace .mp-top,#creation .cr-top{left:8px!important;right:8px!important;top:54px!important;padding:0!important;gap:5px!important;background:none!important}
  #myPalace .mp-top .mp-pill,#creation .cr-top .cr-btn{min-height:32px!important;padding:5px 9px!important;font-size:10px!important;line-height:1.2!important;white-space:normal!important}
  #myPalace .mp-title{
    top:calc(var(--portrait-y) + var(--portrait-h)*.15)!important;left:calc(var(--portrait-x) + var(--portrait-w)*.08)!important;
    width:calc(var(--portrait-w)*.84)!important;max-width:none!important;
  }
  #myPalace .mp-title p{font-size:9px!important;letter-spacing:.12em!important;margin:0 0 4px!important}
  #myPalace .mp-title h1{font-size:24px!important;line-height:1.12!important;max-width:100%!important;overflow-wrap:anywhere!important;margin:0!important}
  #myPalace .mp-title small{font-size:10px!important;line-height:1.35!important;margin-top:5px!important;max-width:100%!important}
  #myPalace :is(.mp-room-location,.mp-help){font-size:10px!important;padding:5px 8px!important;min-height:32px!important;max-width:100%!important;margin:7px 4px 0 0!important;white-space:normal!important}
  #myPalace #mpWelcome{left:50%!important;top:60%!important;width:70%!important;max-width:70%!important;font-size:12px!important;padding:9px 12px!important;white-space:normal!important}
  #myPalace .mp-bottom{left:calc(var(--portrait-x) + 10px)!important;right:calc(var(--portrait-x) + 10px)!important;bottom:max(10px,calc(var(--portrait-y) + 8px))!important;display:grid!important;grid-template-columns:1fr!important;gap:5px!important}
  #myPalace .mp-bottom>.mp-capsule{display:flex!important;align-items:center!important;justify-content:space-between!important;width:100%!important;padding:6px 10px!important;border-radius:15px!important}
  #myPalace .mp-stats{gap:12px!important}.mp-stat{min-width:0}
  #myPalace .mp-stat{font-size:10px!important;gap:4px!important}#myPalace .mp-stat b{font-size:18px!important}
  #myPalace .mp-streak-note{font-size:9px!important;line-height:1.25!important;max-width:38%!important;margin:0!important}
  #myPalace .mp-bottom>.mp-actions{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:5px!important}
  #myPalace .mp-bottom .mp-pill{width:100%!important;padding:6px!important;min-height:38px!important;font-size:10px!important;line-height:1.25!important;white-space:normal!important}
  #myPalace :is(#mpPreviewLabel,#mpEditHint){left:calc(var(--portrait-x) + var(--portrait-w)*.10)!important;right:auto!important;top:calc(var(--portrait-y) + var(--portrait-h)*.34)!important;bottom:auto!important;width:calc(var(--portrait-w)*.80)!important;max-width:none!important;transform:none!important;font-size:10px!important;line-height:1.3!important;padding:6px 9px!important;box-sizing:border-box!important}
  #myPalace #mpEditor{left:calc(var(--portrait-x) + 12px)!important;right:auto!important;top:calc(var(--portrait-y) + var(--portrait-h)*.37)!important;bottom:auto!important;width:min(190px,calc(var(--portrait-w) - 24px))!important;max-height:calc(var(--portrait-h)*.38)!important;padding:12px!important;border-radius:20px!important;overflow:auto!important}
  #myPalace #mpEditor h3{font-size:18px!important;margin:0 0 5px!important}
  #myPalace #mpEditor :is(button,label){font-size:11px!important;line-height:1.3!important}
  #myPalace #mpEditor button{min-height:32px!important;padding:5px!important;white-space:normal!important}
  #myPalace #mpDrawer{
    position:absolute!important;left:calc(var(--portrait-x) + 10px)!important;right:auto!important;top:95px!important;bottom:12px!important;
    width:calc(var(--portrait-w) - 20px)!important;max-width:none!important;max-height:calc(100svh - 107px)!important;
    padding:18px 13px!important;border-radius:32px 32px 12px 12px!important;overflow:auto!important;box-sizing:border-box!important;
    background:linear-gradient(135deg,#fff9f1f7,#f0e1ddf5)!important;border:1px solid #d4b795!important;
  }
  #myPalace #mpDrawer *,#mpSettings *,#mpIntroduction *{box-sizing:border-box;min-width:0;max-width:100%;overflow-wrap:anywhere}
  #myPalace .mp-drawer-head{gap:6px!important;flex-wrap:nowrap!important;margin-bottom:15px!important}
  #myPalace .mp-drawer-head h2{font-size:23px!important;line-height:1.15!important}
  #myPalace .mp-drawer-head p{font-size:11px!important;line-height:1.4!important}
  #myPalace .mp-close{width:34px!important;height:34px!important;min-width:34px!important;flex-shrink:0!important}
  #myPalace :is(.mp-collection,.mp-room-gallery){grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px 9px!important}
  #myPalace .mp-room-portal{height:170px!important}#myPalace .mp-room-portal span{white-space:normal!important;width:90%!important;font-size:10px!important;text-align:center!important;padding:5px!important}
  #myPalace :is(.mp-room-card,.mp-collectible) h3{font-size:18px!important;line-height:1.2!important;margin:8px 0!important}
  #myPalace :is(.mp-room-card,.mp-collectible) p,#myPalace .mp-room-progress{font-size:11px!important;line-height:1.4!important;min-height:0!important}
  #myPalace #mpDrawer .mp-pill{font-size:11px!important;min-height:34px!important;padding:6px 8px!important;white-space:normal!important;line-height:1.3!important}
  #myPalace .mp-collectible{padding:0 5px 8px!important}#myPalace .mp-collectible img{height:85px!important;object-fit:contain!important}
  #myPalace .mp-rituals{grid-template-columns:1fr!important;gap:15px!important}#myPalace .mp-ritual h3{font-size:20px!important}
  #mpSettings,#mpIntroduction{box-sizing:border-box!important;width:calc(100vw - 24px)!important;max-width:400px!important;max-height:calc(100svh - 24px)!important;padding:20px 15px!important;overflow:auto!important;border-radius:30px 30px 12px 12px!important}
  #mpSettings h2,#mpIntroduction h2{font-size:25px!important;line-height:1.15!important}
  #mpSettings :is(input,select){width:100%!important;font-size:16px!important;min-height:38px!important}
  #mpSettings .mp-settings-row{grid-template-columns:minmax(0,1fr) 62px!important;gap:7px!important}
  #mpSettings p,#mpIntroduction p{font-size:12px!important;line-height:1.45!important}
  #mpIntroduction :is(.mpi-nav,.mpi-foot,.mpi-masthead){flex-wrap:wrap!important;gap:6px!important}
  #mpIntroduction button,#mpSettings button{font-size:11px!important;line-height:1.3!important;white-space:normal!important;padding:7px 9px!important;min-height:34px!important}

  #creation .cr-intro{left:calc(var(--portrait-x) + var(--portrait-w)*.10)!important;top:calc(var(--portrait-y) + var(--portrait-h)*.15)!important;width:calc(var(--portrait-w)*.80)!important;padding:8px 10px!important;box-sizing:border-box!important;border:0!important;border-radius:18px!important;text-align:center!important;background:#fffaf0da!important}
  #creation .cr-intro small{font-size:8px!important;letter-spacing:.09em!important}
  #creation .cr-intro h1{font-size:24px!important;line-height:1.05!important;margin:4px 0!important}
  #creation .cr-intro h1 br{display:none!important}
  #creation .cr-intro p{font-size:10px!important;line-height:1.35!important}
  #creation .cr-spot{min-width:0!important;min-height:0!important;width:34%!important;padding:0!important}
  #creation .cr-spot i{width:9px!important;height:9px!important;margin:0 0 7px!important}
  #creation .cr-spot span{box-sizing:border-box!important;min-width:0!important;width:100%!important;padding:7px!important;font-size:14px!important;line-height:1.15!important;white-space:normal!important;border-radius:15px!important}
  #creation .cr-spot small{font-size:10px!important;line-height:1.3!important;margin-top:3px!important}
  #creation .cr-spot[data-place=council]{left:50%!important;top:43%!important}
  #creation .cr-spot[data-place=wish]{left:20%!important;top:51%!important}
  #creation .cr-spot[data-place=makers]{left:80%!important;top:51%!important}
  #creation .cr-spot[data-place=atelier]{left:50%!important;top:75%!important}
  #creation .cr-bottom{left:calc(var(--portrait-x) + var(--portrait-w)*.08)!important;bottom:calc(var(--portrait-y) + var(--portrait-h)*.07)!important;transform:none!important;width:calc(var(--portrait-w)*.84)!important;max-width:none!important;box-sizing:border-box!important;display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:5px!important;padding:7px!important;border-radius:17px!important}
  #creation .cr-bottom>div{grid-column:1/-1!important}#creation .cr-bottom b{font-size:13px!important;margin:0!important}#creation .cr-bottom p{font-size:10px!important;line-height:1.3!important}
  #creation .cr-bottom .cr-btn{min-height:32px!important;font-size:10px!important;line-height:1.25!important;padding:5px 7px!important;white-space:normal!important}
  #creation .cr-preview-bar{font-size:9px!important;line-height:1.3!important;padding:4px 8px!important;min-height:0!important}
  #crDialog{box-sizing:border-box!important;width:calc(100vw - 24px)!important;max-width:400px!important;max-height:calc(100svh - 24px)!important;border-radius:34px 34px 12px 12px!important;overflow:auto!important}
  #crDialog *{box-sizing:border-box;min-width:0;max-width:100%;overflow-wrap:anywhere}
  #crDialog .cr-dialog-inner{padding:20px 13px!important}#crDialog .cr-dialog-head{gap:7px!important}
  #crDialog .cr-close{width:34px!important;height:34px!important;min-width:34px!important}
  #crDialog h2{font-size:26px!important;line-height:1.15!important}#crDialog h3{font-size:21px!important}
  #crDialog p,#crDialog summary,#crDialog .cr-muted{font-size:12px!important;line-height:1.5!important}
  #crDialog .cr-eyebrow{font-size:9px!important}
  #crDialog :is(.cr-pair,.cr-owner-grid){grid-template-columns:minmax(0,1fr)!important;gap:12px!important}
  #crDialog .cr-field{font-size:13px!important;margin:12px 0!important}
  #crDialog .cr-field :is(input,textarea,select){width:100%!important;max-width:100%!important;font-size:16px!important;line-height:1.4!important;padding:8px!important}
  #crDialog textarea{min-height:82px!important;max-height:180px!important;resize:vertical!important}
  body:has(#creation.active) #elarisMemberDialog{box-sizing:border-box!important;width:calc(100vw - 24px)!important;max-width:400px!important;max-height:calc(100svh - 24px)!important;overflow:auto!important}
  body:has(#creation.active) #elarisMemberDialog *{box-sizing:border-box;min-width:0;max-width:100%;overflow-wrap:anywhere}
  body:has(#creation.active) #elarisMemberDialog textarea{width:100%!important;font-size:16px!important;min-height:80px!important;max-height:160px!important;resize:vertical!important}
  body:has(#creation.active) #elarisMemberDialog button{white-space:normal!important}
  #crDialog .cr-btn{min-height:36px!important;padding:7px 10px!important;font-size:12px!important;line-height:1.3!important;white-space:normal!important}
  #crDialog .cr-plaques{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}#crDialog .cr-plaque{font-size:16px!important;padding:10px!important}
  #crDialog .cr-timeline{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  body:has(:is(#myPalace,#creation).active) #esMySpace{left:8px!important;bottom:8px!important;max-width:45vw!important}
  body:has(:is(#myPalace,#creation).active) #esMySpace button{min-height:32px!important;padding:6px!important;font-size:10px!important}
  body:has(#myPalace.active) #esMySpace{bottom:100px!important}
}