/* Bubble Pop — the well, the coming-up strip, and nothing else.

   Everything that is not specific to this game — the bars, the buttons, the
   readout, the stage, the dialogs, the seven colours — is in
   css/games/arcade.css, which Stack Up loads too. If a rule in here would
   also be right for Stack Up, it is in the wrong file. */

/* The board and the strip beside it.

   The well is tall and narrow — it is 400 units across and 520 tall, which is
   the shape this game has had since 1994 and the shape it has to be, because
   a wide well makes every bank shot trivial. On a wide window that leaves
   plenty of room at the sides, so the strip goes there rather than eating
   height the board needs. On a narrow one it drops underneath. */
.bp-play {
  flex: 1;
  min-height: 0;
  display: flex;
  gap: 10px;
  align-items: stretch;
}

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

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

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

.bp-side__title:first-child { margin-top: 0; }

.bp-side__loaded {
  margin: 2px 0 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--accent);
}

.bp-queue {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 0;
}

.bp-queue__slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* The little canvases are drawn by the same routine that draws the balls in
   the well, at the size they are given here. Block, so they do not sit on a
   text baseline and leave a few pixels of descender space under the row. */
.bp-queue__ball { display: block; }

.bp-side__hint {
  margin: 14px 0 0;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--ink-muted);
}

/* Over the board rather than beside it. 46rem is where the well plus a
   11.5rem strip stops leaving the board a sensible width. Over, not under:
   under, it would sit below the dock, and the dock belongs at the bottom
   where a thumb is. */
@media (max-width: 46rem) {
  .bp-play { flex-direction: column; }

  .bp-side {
    order: -1;
    flex: 0 0 auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
  }

  .bp-side__title { margin: 0; }

  /* On a phone the paragraph is the first thing to go: the rules are in the
     How to play dialog, which is one tap away and always current. */
  .bp-side__hint { display: none; }
}

/* A short window gives the board everything it can. */
@media (max-height: 560px) {
  .bp-side { padding: 6px 8px; }
  .bp-side__hint { display: none; }
}


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

   css/games/handheld.css lays the shell out; these are Bubble Pop's own
   parts of it. */

/* The strip is not marked .hh-side, which handheld mode takes off a phone
   altogether: what is coming up next is part of the game, and a phone still
   wants it, as the one short row above. It steps aside for the screens before
   play like everything else. */
.hh-app:has(.ar-screen:not([hidden])) .bp-side { display: none; }

/* The parked aim buttons (bubblePop.html says why). If they come back, they
   join the dock as three more of its buttons. `hidden` loses to any display
   an author sets, so the rule says :not([hidden]) rather than trusting it. */
.hh-dock .bp-aim:not([hidden]) { display: contents; }

/* Handheld mode on a phone: the numbers are one line of four. Coins are on
   the first screen and on the tally, where they are news; on the line over
   the well they were the fifth number and the one that wrapped it. */
@media (pointer: coarse) and (max-width: 720px) {
  .hh-app .bp-coins { display: none; }
  .bubble-pop-page .hh-app .ar-readout__note { margin-left: 0; font-size: 0.72rem; }

  .bp-side { padding: 5px 10px; gap: 4px 10px; }
  .bp-side__loaded { font-size: 1rem; }
}