/* ===================== SHORT-VIEWPORT SAFETY NET ===================== */
/* .tank-stage/.tank-studio-stage below lean on a flat min-height floor
   (400px / 220px) to stay readable on tall/narrow phones. That floor has no
   idea how tall the viewport actually is - on a short window (a landscape
   phone, a shrunk browser) it keeps forcing the same pixel height past the
   point where there's room for it, and since flex items don't clip their
   own overflow by default, the canvas just bleeds down into whatever comes
   after it in the DOM (menu-box's input/Play button, or the swatch row).
   Scaling the floor off vh as well as px means it always concedes space
   back before that happens, on any aspect ratio - this alone fixes the
   overlap; the media query below on top of it is about using the freed-up
   width well, not just avoiding the overlap. */
.tank-stage { min-height: min(400px, 40vh); }
.tank-studio-stage { min-height: min(220px, 26vh); }

/* ===================== SHORT / LANDSCAPE LAYOUT ===================== */
/* Landscape phones (and any short-but-wide window) have the opposite
   problem from portrait: plenty of width, very little height. The normal
   stacked column - tank on top, menu pinned below - has nowhere left to
   shrink once the tank hits its floor above, so past this height we go
   side-by-side instead: tank stage on the left, menu controls on the
   right, both sized off the viewport height rather than fighting each
   other for it. Same idea for the Tank Design Studio: header stays on top,
   but the 3D viewport and the color swatches move into a row beneath it
   instead of stacking (which is what pushed the swatches off-screen on
   short screens in the first place). */
@media (max-height: 560px) and (orientation: landscape) {
  #start-screen {
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    gap: clamp(16px, 4vw, 40px);
    /* Keep the bottom-right clearance the column layout reserves for the
       fixed hof/settings icon buttons (position:fixed, bottom:12px) - they
       don't participate in this flow so nothing here pushes them aside,
       the padding has to leave room for them itself. */
    padding: 10px 16px calc(36px + 14px);
  }
  .logo-wrap { flex: 1 1 40%; min-width: 0; height: 100%; }
  .tank-stage { height: 84%; min-height: 0; }

  .menu-box {
    margin-top: 0;
    justify-content: center;
    gap: 10px;
    width: min(38vw, 300px);
    flex: 0 0 auto;
  }
  .controls-hint { display: none; }

  .settings-header { margin-bottom: 8px; }

  #start-screen.studio-open .tank-studio-panel {
    display: grid;
    height: 100%;
    grid-template-columns: 1fr auto;
    /* minmax(0, 1fr), not plain 1fr: a bare 1fr row still carries an
       implicit auto (content-based) minimum, and the stage's canvas has
       real backing-store pixels once three.js has rendered a frame - that
       intrinsic size feeds back into "content size" and wins the row a
       taller-than-available height. minmax(0, ...) removes that floor so
       the row is governed purely by the panel's own height instead. */
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "header header" "stage swatches";
    row-gap: 8px;
  }
  .tank-studio-panel .settings-header { grid-area: header; margin-bottom: 0; }
  .tank-studio-stage { grid-area: stage; min-height: 0; }
  .tank-studio-panel .color-swatches {
    grid-area: swatches;
    flex-direction: column;
    flex-wrap: wrap;
    /* No max-width here on purpose: this wraps into new columns once a
       column's items exceed max-height, and the grid's "auto" column
       track (see grid-template-columns above) sizes itself to match
       however wide that turns out to be. Capping it independently just
       reintroduces the same overflow the grid track is already
       preventing, with an extra column of swatches bleeding past it. */
    max-height: 100%;
    align-content: flex-start;
    justify-content: center;
    margin: 0 0 0 4px;
  }
}