/* Stack Up — the well and the two side panels.

   Everything else — bars, buttons, readout, stage, dialogs, the seven colours
   — is css/games/arcade.css, which Bubble Pop loads too. If a rule in here
   would also be right for Bubble Pop, it is in the wrong file. */

/* Hold on the left, the well in the middle, next on the right. That is where
   this game has put them for thirty years and there is no reason to be
   clever about it. */
.su-play {
  flex: 1;
  min-height: 0;
  display: flex;
  gap: 10px;
  align-items: stretch;
  justify-content: center;
}

/* The well and the dock under it, as one column (handheld mode), taking the
   room the well used to take on its own. */
.su-main {
  flex: 0 1 34rem;
  min-width: 0;
}

.su-stage { flex: 1; min-width: 0; }

.su-side {
  flex: 0 0 9.5rem;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--surface);
  overflow-y: auto;
}

.su-side__title {
  margin: 0;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.su-boxes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  padding: 6px 0;
}

/* The pieces are canvases drawn by board.js, at the pixel size the script
   gives them. Block, so they do not sit on a text baseline. */
.su-piece {
  display: block;
  border-radius: 6px;
  background: var(--surface-alt);
}

.su-piece--empty {
  display: grid;
  place-items: center;
  width: 74px;
  height: 46px;
  color: var(--ink-faint);
}

.su-side__hint {
  margin: auto 0 0;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--ink-muted);
}

/* Both panels above the board, side by side, once there is no room beside
   it. The well is only ten cells wide but it is twice as tall as it is wide,
   so height is the scarce thing on a phone and the panels have to be short
   rather than narrow. */
@media (max-width: 52rem) {
  /* A grid rather than a wrapping row: the two panels side by side on a row
     only as tall as they need, and the well taking everything under them.
     Wrapped, the spare height was shared between the two lines, and on a
     phone the panels took about 180px of it and sat half empty. */
  .su-play {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .su-side--hold { grid-column: 1; grid-row: 1; }
  .su-side--next { grid-column: 2; grid-row: 1; }

  .su-side {
    flex: 1 1 8rem;
    order: -1;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
  }

  .su-boxes {
    flex-direction: row;
    padding: 0;
  }

  .su-side__hint { display: none; }

  .su-main { grid-column: 1 / -1; grid-row: 2; }
}

/* On an actual phone the two panels side by side run out of room: Hold plus
   its label plus three next pieces plus THEIR label is wider than 375px, and
   the third piece ends up behind a scrollbar. Stacking each label above its
   own boxes buys back the ~150px the two labels were taking, which is enough
   for all four pieces to show. */
@media (max-width: 30rem) {
  .su-side {
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
  }

  .su-side--hold { flex: 0 0 auto; }
  .su-side--next { flex: 1 1 auto; }
}

@media (max-height: 560px) {
  .su-side { padding: 6px 8px; }
  .su-side__hint { display: none; }
}

/* ------------------------------------------------------- handheld mode

   css/games/handheld.css lays the shell out; these are Stack Up's own parts
   of it.

   A finger on the well does the moving, turning and dropping
   (js/games/stackUp/touch.js), the way the phone versions of this game are
   played, and a computer has the keys. The buttons for them are parked in
   the dock (stackUp.html says why); Hold stays as a button as well as a
   flick, because nobody guesses a flick up. If the parked ones come back,
   they join the dock as more of its buttons. */
.hh-dock .su-moves:not([hidden]) { display: contents; }

/* Hold and Coming up are the game, so they are not .hh-side -- a phone keeps
   them, over the well. They step aside for the screens before play. */
.hh-app:has(.ar-screen:not([hidden])) .su-side { display: none; }

/* A phone: the numbers are one line of four. Coins are on the first screen
   and the tally, where they are news. */
@media (pointer: coarse) and (max-width: 720px) {
  .hh-app .su-coins { display: none; }
  .stack-up-page .hh-app .ar-readout__note { margin-left: 0; font-size: 0.72rem; }
}