/* v7733yy: Slime/Pour/Pottery art-max column at >=700px (landscape tablet/desktop).
   v7724 media widened to min-width:700 gave #slpal/#potpal width:100% inside the v71 side-rail grid -> stage 0px. */
@media (min-width:700px){
  html body #slime.active,html body #pottery.active{
    display:flex!important;flex-direction:column!important;
    grid-template-columns:none!important;grid-template-rows:none!important;
    height:100dvh!important;overflow:hidden!important;
  }
  html body #slime.active>*,html body #pottery.active>*{grid-column:auto!important;grid-row:auto!important}
  html body #slime.active>.bar.top,html body #pottery.active>.bar.top{
    order:0!important;display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;
    width:100%!important;height:auto!important;flex:0 0 auto!important;align-items:center!important;justify-content:flex-start!important;
    padding:calc(4px + env(safe-area-inset-top)) 10px 2px!important;gap:6px!important;
  }
  html body #slime.active>.stage,html body #pottery.active>.stage{
    order:1!important;flex:1 1 0!important;width:auto!important;min-width:0!important;min-height:0!important;height:auto!important;
  }
  html body #slime.active>.bar.tools,html body #pottery.active>.bar.tools{
    order:2!important;display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;
    width:100%!important;height:auto!important;flex:0 0 auto!important;justify-content:center!important;align-items:center!important;
  }
  html body #slime #slpal,html body #pottery #potpal{order:3!important;flex:0 0 auto!important;height:auto!important;width:100%!important}
}
/* v7733yy: canvas never larger than the rounded stage */
html body #slime #slstage{position:relative!important;overflow:hidden!important}
html body #slime #slstage #slc{position:absolute!important;inset:0!important;width:100%!important;height:100%!important}
/* Pour: portrait already column (keep); landscape >=700 fix side-rail stage collapse */
@media (min-width:700px) and (orientation:landscape){
  html body #pour.active{display:flex!important;flex-direction:column!important;grid-template-columns:none!important;grid-template-rows:none!important;height:100dvh!important;overflow:hidden!important}
  html body #pour.active>*{grid-column:auto!important;grid-row:auto!important}
  html body #pour.active>.bar.top{order:0!important;display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;width:100%!important;height:auto!important;flex:0 0 auto!important;align-items:center!important;padding:calc(4px + env(safe-area-inset-top)) 10px 2px!important;gap:6px!important}
  html body #pour.active>.stage{order:1!important;flex:1 1 0!important;width:auto!important;min-width:0!important;min-height:0!important;height:auto!important}
  html body #pour.active>.bar.tools{order:2!important;display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;width:100%!important;height:auto!important;flex:0 0 auto!important;justify-content:center!important;align-items:center!important}
  html body #pour #prpal{order:3!important;flex:0 0 auto!important}
}