fix(simulation): align LCC layers in PlayCanvas world

apps/control-station/src/styles/simulation.css

@@ -332,6 +332,7 @@
 }
 
 .simulation-viewport {
+  container-type: inline-size;
   display: grid;
   min-height: 0;
   grid-template-rows: auto minmax(0, 1fr) auto;
@@ -341,7 +342,9 @@
 }
 
 .simulation-viewport__toolbar {
-  flex-wrap: wrap;
+  display: grid;
+  grid-template-columns: minmax(12rem, 1fr) auto minmax(12rem, 1fr);
+  align-items: center;
   gap: 0.55rem;
   border-bottom: 1px solid var(--station-hairline);
   background: var(--nodedc-glass-panel-bg-soft);
@@ -356,6 +359,74 @@
   gap: 0.45rem;
 }
 
+.simulation-viewport__controls {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  justify-content: center;
+  gap: 0.55rem;
+}
+
+.simulation-viewport__settings-anchor {
+  position: relative;
+  display: grid;
+  place-items: center;
+}
+
+.simulation-viewport__settings {
+  position: absolute;
+  z-index: 12;
+  top: calc(100% + 0.65rem);
+  right: 0;
+  display: grid;
+  width: min(19rem, calc(100cqw - 1.3rem));
+  gap: 0.75rem;
+  border-radius: 0.9rem;
+  background: rgb(25 27 31 / 0.98);
+  box-shadow: 0 1rem 3rem rgb(0 0 0 / 0.42);
+  padding: 0.8rem;
+}
+
+.simulation-viewport__settings-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+
+.simulation-viewport__settings-head > div,
+.simulation-viewport__settings-switches {
+  display: grid;
+  gap: 0.32rem;
+}
+
+.simulation-viewport__settings strong {
+  color: var(--nodedc-text-primary);
+  font-size: 0.72rem;
+}
+
+.simulation-viewport__settings span,
+.simulation-viewport__settings p {
+  color: var(--nodedc-text-muted);
+  font-size: 0.56rem;
+  line-height: 1.45;
+}
+
+.simulation-viewport__settings p {
+  margin: 0;
+}
+
+.simulation-viewport__settings-switches {
+  gap: 0.55rem;
+  border-radius: 0.72rem;
+  background: rgb(255 255 255 / 0.035);
+  padding: 0.65rem;
+}
+
+.simulation-viewport__toolbar-balance {
+  min-width: 0;
+}
+
 .simulation-viewport__toolbar > div:first-child > span:last-child,
 .simulation-viewport__notice > span:last-child {
   color: var(--nodedc-text-muted);
@@ -364,14 +435,24 @@
 
 .simulation-viewport__stage {
   position: relative;
+  min-width: 0;
   min-height: 30rem;
+  overflow: hidden;
 }
 
 .simulation-viewport__stage canvas {
   display: block;
+  max-width: 100%;
   width: 100%;
   height: 100%;
   outline: none;
+  cursor: grab;
+  touch-action: none;
+  user-select: none;
+}
+
+.simulation-viewport__stage canvas:active {
+  cursor: grabbing;
 }
 
 .simulation-viewport__stage canvas:focus-visible {
@@ -407,6 +488,21 @@
   padding: 0.48rem 0.65rem;
 }
 
+@container (max-width: 68rem) {
+  .simulation-viewport__toolbar {
+    grid-template-columns: 1fr;
+  }
+
+  .simulation-viewport__controls {
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+
+  .simulation-viewport__toolbar-balance {
+    display: none;
+  }
+}
+
 .simulation-workspace__processing {
   display: flex;
   min-height: 18rem;