/* Matter.js debug renderer panel — toggled with "P" in-game, see
   game.ts's setPhysicsDebug(). Matter.Render creates its own <canvas>
   inside this element and manages that canvas's own sizing; this file only
   positions the container as a fixed picture-in-picture panel so it never
   competes with the main game canvas or HUD. */
#physics-debug {
  position: fixed;
  right: 10px;
  bottom: 10px;
  width: 320px;
  height: 320px;
  border: 2px solid #39ff14;
  background: #000;
  z-index: 500;
  pointer-events: none;
}

#physics-debug::before {
  content: "physics debug (P to toggle)";
  position: absolute;
  top: -20px;
  left: 0;
  font: 11px monospace;
  color: #39ff14;
  white-space: nowrap;
}