.sim-container {
  display: inline-flex;
  align-items: flex-start;
  gap: 20px;
  margin: 20px auto;
  width: fit-content;
}

.render-area canvas {
  display: block;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.controls {
  display: grid;
  grid-template-areas:
    ". forward ."
    "left . right"
    ". backward .";
  gap: 10px;
  background: rgba(30, 30, 30, 0.8);
  padding: 20px 24px;
  border-radius: 14px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
  font-family: "Segoe UI", Roboto, sans-serif;
  width: max-content;
  height: max-content;
}

.controls button {
  background: linear-gradient(180deg, #4e9af1, #1d6de6);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 12px 18px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.controls button:hover {
  background: linear-gradient(180deg, #66b2ff, #3380ff);
}

.controls button:active {
  transform: scale(0.94);
}

#forward { grid-area: forward; }
#backward { grid-area: backward; }
#left { grid-area: left; }
#right { grid-area: right; }