/* Mobile adaptation for the game page (<=768px).
   Loaded after game.css / game_screen.css so same-specificity rules win.
   All desktop changes are confined to the min-width block below. */

/* ---------- base (game page only, this file is only loaded on the game page) ---------- */

#paper svg {
  display: block;
}

#paper,
#tabs,
.direct_drive_button,
.navigation_button {
  -webkit-tap-highlight-color: transparent;
}

/* ---------- desktop guard: keep desktop identical to before ---------- */

@media (min-width: 769px) and (min-height: 501px) {
  .blocklyZoom {
    display: none;
  }
}

/* ---------- mobile layout (portrait narrow or landscape short) ---------- */

@media (max-width: 768px), (max-height: 500px) and (orientation: landscape) {
  #wrapper {
    overflow: hidden;
  }

  /* bottom horizontal scrollable control bar (#tabs DOM untouched) */
  #tabs {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: 56px;
    float: none;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    z-index: 30;
    padding-bottom: env(safe-area-inset-bottom);
    box-sizing: content-box;
  }

  #tabs::-webkit-scrollbar {
    display: none;
  }

  .tab {
    flex: 0 0 auto;
    width: auto;
    min-width: 60px;
    height: 56px;
    padding-top: 0;
  }

  .tab input[type='radio'] + label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 0;
    text-align: center;
    box-sizing: border-box;
  }

  .tab label img {
    width: 26px;
    height: 26px;
    margin: 0 0 2px 0;
  }

  .tab label span {
    line-height: 12px;
    font-size: 10px;
    max-width: 64px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .tab input[type='radio']:disabled + label {
    opacity: 0.3;
  }

  .tab_break {
    display: none;
  }

  /* 40% map on top / 60% editor below */
  #right {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 56px;
    height: auto;
    margin-left: 0;
    overflow: hidden;
  }

  #paper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 40%;
    width: auto;
    float: none;
    overflow: hidden;
    padding-left: 0;
    touch-action: none;
  }

  #paper svg {
    width: 100%;
    height: 100%;
  }

  #tab_panes {
    position: absolute;
    top: 40%;
    left: 0;
    right: 0;
    height: 60%;
    width: auto;
    float: none;
  }

  #consoleSlider {
    display: none;
  }

  .tab_pane {
    padding: 8px;
    font-size: 15px;
    line-height: 1.35;
  }

  #load_pane,
  #save_pane {
    margin: 0;
  }

  /* cinema mode: map fills everything above the control bar during a run */
  #wrapper.cinema #paper {
    top: 0;
    bottom: 0;
    height: auto;
    z-index: 20;
    pointer-events: none;
  }

  #wrapper.cinema #tab_panes {
    display: none;
  }

  #wrapper.cinema #zoom_pan,
  #wrapper.cinema #direct_drive {
    display: none;
  }

  #wrapper.cinema #fuelGauge {
    z-index: 25;
  }

  /* overlays re-anchored to the map strip */
  #zoom_pan {
    right: 8px;
    top: 4px;
    height: auto;
  }

  #zoom_pan .direct_drive_button {
    width: 40px;
    height: 40px;
    background-size: 36px 36px;
    position: static;
    display: block;
    margin-top: 6px;
  }

  #fuelGauge {
    width: 64px;
    height: 64px;
    right: 8px;
    bottom: 64px;
  }

  #fuelGaugePointer {
    width: 64px;
    height: 64px;
  }

  #fuelGauge img,
  #fuelGaugePointer img {
    width: 64px;
    height: 64px;
  }

  #direct_drive {
    left: 8px;
    right: auto;
    margin-left: 0;
    bottom: calc(60% + 8px);
    transform: scale(0.82);
    transform-origin: bottom left;
  }

  .direct_drive_button {
    touch-action: none;
  }

  /* result popup */
  .ocargo-modal {
    width: 92%;
    left: 4%;
    top: 3%;
    max-height: 85vh;
    padding: 16px;
  }

  #modal-content {
    width: 100%;
  }

  #modal-mascot {
    display: none;
  }

  /* hide python tab on phones (class set by mobile.js) */
  body.mobile-hide-python #python_tab {
    display: none !important;
  }
}