/* TBC Games - phone and tablet layout.
 *
 * The app had no media queries at all, so every screen was the desktop
 * layout squeezed down. These rules are additive and load after index.css so
 * nothing desktop changes.
 *
 * Two breakpoints only: tablet (<=1024px) where the side panels become
 * stacked sections, and phone (<=640px) where the three-pane studio becomes
 * one pane at a time. More breakpoints than that and nobody can reason about
 * which one is in effect.
 */

/* Safe areas first - without these the top bar sits under a notch and the
   bottom row under the home indicator, on every iPhone. */
.app {
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
}
.topbar {
  padding-top: env(safe-area-inset-top, 0);
}

/* 100vh is wrong on mobile browsers - it includes the collapsing URL bar, so
   the bottom of the page sits under it. dvh follows the real viewport. */
@supports (height: 100dvh) {
  .page, .ide, .viewport { min-height: 0; }
  .ide { height: calc(100dvh - 52px); }
}

/* ------------------------------------------------------------- tablet --- */
@media (max-width: 1024px) {
  .topbar { flex-wrap: wrap; row-gap: 6px; }
  .nav { order: 3; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .nav::-webkit-scrollbar { display: none; }

  .ide-body { flex-direction: column; overflow-y: auto; }
  .panel, .panel.right {
    flex: 0 0 auto !important;
    width: auto !important;
    max-height: 42vh;
    border-left: 0;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  .ide-centre { min-height: 52vh; }
  .viewport { min-height: 48vh; }
}

/* -------------------------------------------------------------- phone --- */
@media (max-width: 640px) {
  :root { font-size: 15px; }           /* 14px body text is too small to read on a phone */

  .topbar { gap: 6px; padding: 6px 10px; }
  .brand { font-size: 14px; }
  .topbar select { max-width: 112px; }

  /* Tap targets. Anything under 44px gets mis-tapped, and a mis-tap in an
     editor is worse than a slow tap. */
  button, .nav a, .tabs button, select, input[type="checkbox"] {
    min-height: 44px;
  }
  button.sm, .ghost.sm { min-height: 38px; padding: 8px 12px; }
  .tree-item { min-height: 40px; align-items: center; }

  .wrap { padding: 12px 14px; }
  .card { padding: 12px; }

  /* The studio's three panes do not fit side by side on a phone, so the
     toolbar's Code / Scene / Team buttons become the pane switcher and only
     one pane shows at a time. */
  .ide-body > .panel { max-height: 38vh; }
  .ide-toolbar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    gap: 4px;
  }
  .ide-toolbar::-webkit-scrollbar { display: none; }
  .ide-toolbar .spacer { min-width: 4px; }

  /* Asset grid: two columns is right on a phone, and the thumbnails stay
     large enough to tell a pine from an oak. */
  .panel-body [style*="grid-template-columns: 1fr 1fr"] { gap: 8px; }

  table { font-size: 12.5px; }
  pre { font-size: 11.5px; }
}

/* ------------------------------------------------------- emulator play -- */
/* The emulator is the surface that has to be right on a phone: the picture
   should fill the screen and the chrome should get out of the way. */
@media (max-width: 820px) {
  .emu-play { position: fixed; inset: 0; z-index: 400; background: #07070a; }
  .emu-play iframe { width: 100%; height: 100%; border: 0; display: block; }
  .emu-play .ide-toolbar {
    position: absolute; top: 0; left: 0; right: 0; z-index: 2;
    padding-top: calc(env(safe-area-inset-top, 0px) + 4px);
    background: linear-gradient(180deg, rgba(7,7,10,.88), rgba(7,7,10,0));
    border: 0;
  }
  /* Landscape on a phone is almost all screen, so the bar hides until tapped. */
  @media (orientation: landscape) and (max-height: 520px) {
    .emu-play .ide-toolbar { opacity: 0; transition: opacity .2s; }
    .emu-play:focus-within .ide-toolbar,
    .emu-play .ide-toolbar:hover { opacity: 1; }
  }
}

/* --------------------------------------------------------- install hint - */
.pwa-install {
  position: fixed;
  left: 12px; right: 12px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  z-index: 500;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(18, 18, 20, .94);
  backdrop-filter: blur(8px);
  font-size: 13px;
}
.pwa-install .spacer { flex: 1; }
@media (min-width: 641px) {
  .pwa-install { left: auto; right: 16px; max-width: 380px; }
}