/* physics-plane.css */
.physics-app {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  aspect-ratio: 16/9;
  background: #101318;
  border: 1px solid #222;
  border-radius: 12px;
  overflow: hidden;
  user-select: none;
}

.physics-app canvas.physics-canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
}

.physics-hud {
  position: absolute; inset: 12px auto auto 12px;
  background: rgba(0,0,0,.42);
  color: #eaeaea;
  font: 12px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial;
  padding: 8px 10px; border-radius: 8px; backdrop-filter: blur(2px);
}
.physics-hud .row { display: grid; grid-template-columns: auto auto; gap: 10px; }
.physics-hud .row + .row { margin-top: 4px; }
.physics-hud b { font-weight: 700; }

.physics-controls {
  position: absolute; inset: auto 8px 8px 8px;
  display: grid; gap: 8px;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

.physics-controls .col { display: grid; grid-auto-flow: column; gap: 8px; }
.physics-controls .row { display: grid; grid-auto-flow: column; gap: 8px; }
.physics-controls .grid {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center;
}

/* Don't stretch grid items in the controls */
.physics-controls .col, 
.physics-controls .row, 
.physics-controls .grid {
  justify-items: start;     /* items hug their own width */
  align-items: center;
}

/* Make the three columns not stretch the buttons */
.physics-controls .grid {
  /* was: grid-template-columns: 1fr auto 1fr; */
  grid-template-columns: max-content 1fr max-content;
  /* left & right are only as wide as their content; middle can flex */
}

.physics-controls button {
  display: inline-block; width: auto;
  /*appearance: none;*/ border: 1px solid #2a2f36; background: #161a20;
  color: #eaeaea; border-radius: 10px; padding: 6px 8px; /*NEW*/ font-size: 0.8rem; margin: 2px; white-space: nowrap; justify-self: start;  /*NEW*/ /*font-weight: 600;*/
  cursor: pointer; touch-action: manipulation;
}
.physics-controls button:active { transform: translateY(1px); }

.physics-controls .mid { display: grid; gap: 8px; }
@media (max-width: 640px) {
  .physics-controls .col, .physics-controls .row { grid-auto-flow: row; }
  .physics-controls .grid { grid-template-columns: 1fr; }
}