/* Pandemic Simulator — mobile-responsive layout additions */

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  background: #050505;
}

canvas#gameCanvas {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  touch-action: none;
  overscroll-behavior: contain;
}

button, .btn, [role="button"] {
  min-height: 44px;
  min-width: 44px;
  touch-action: manipulation;
}

@media (max-width: 768px) {
  body {
    padding: max(8px, var(--safe-area-inset-top)) max(8px, var(--safe-area-inset-right)) max(8px, var(--safe-area-inset-bottom)) max(8px, var(--safe-area-inset-left));
  }

  canvas#gameCanvas {
    max-height: calc(100vh - 16px);
  }
}

@media (max-width: 480px) {
  canvas#gameCanvas {
    min-height: 320px;
  }
}