/* Mobile portrait overrides for Burgomaster – 412px wide viewport */
@media (max-width: 600px) {
  body {
    overflow-x: hidden;
  }

  #htmlGame {
    width: 100vw;
    max-width: 100vw;
    overflow-x: hidden;
  }

  /* Scale the fixed-width game area to fit the screen */
  .content-panel {
    /* game canvas + tabs are 800px wide; scale to viewport */
    transform-origin: top left;
    transform: scale(calc(100vw / 800));
    width: 800px !important;
    height: 480px !important;
    /* collapsed outer height to match scaled height */
    margin-bottom: calc((100vw / 800) * 480px - 480px);
  }

  /* menu-panel: allow wrapping so buttons remain tappable */
  .menu-panel {
    flex-wrap: wrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .tab-link {
    padding: 10px 8px;
    font-size: 13px;
    flex-shrink: 0;
  }

  /* resource panel: allow scroll */
  .resource-panel {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
  }

  /* info panel stays readable */
  .info-panel__history {
    min-height: 60px;
    max-height: 80px;
  }

  /* canvas elements: no pointer-events issues on mobile */
  canvas {
    touch-action: none;
  }

  /* building list: 2 columns on narrow */
  .building-list {
    width: 100%;
    justify-content: space-around;
  }

  .building-card {
    max-width: 45%;
  }
}