/* Bloom Pop. */
/* Set here rather than inherited: a topic page centres everything its embedded game leaves unset. */
/* The effects canvas reaches past the board on every side; clipped across so it never widens the page. */
.blp { position: relative; width: 100%; text-align: center; overflow-x: clip; }

.blp-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 6px 14px;
  margin: 0 0 6px; min-height: 36px; text-align: left;
}
.blp-name { font-weight: 800; font-size: 1.04rem; color: var(--c-text); }
.blp-moves {
  display: inline-flex; align-items: baseline; gap: 6px; padding: 3px 12px; border-radius: 999px;
  background: #f4effc; color: #5b3f8f;
}
.blp-moves-label { font-size: .78rem; font-weight: 600; }
.blp-moves-n { font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; display: inline-block; }
.blp-moves.is-low { background: #fff0e6; color: #b5531d; }
.blp-moves-n.is-bump { animation: blp-bump .5s ease; }
@keyframes blp-bump { 30% { transform: scale(1.45); } 100% { transform: none; } }

.blp-goals { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; min-height: 44px; }
.blp-goal {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px 3px 4px; border-radius: 12px;
  background: #fbf8ff; border: 1px solid #ebe2f7;
}
.blp-goal-pic { width: 34px; height: 34px; }
.blp-goal-n { min-width: 1.6em; font-size: 1.05rem; font-weight: 800; color: var(--c-text); font-variant-numeric: tabular-nums; }
.blp-goal.is-done { background: #eefaf0; border-color: #c6e9cd; }
.blp-goal.is-done .blp-goal-n::before {
  content: ''; display: inline-block; width: .5em; height: .9em; margin-left: .3em;
  border: solid #2e9a4a; border-width: 0 3px 3px 0; transform: rotate(45deg) translateY(-2px);
}
.blp-goal.is-bump { animation: blp-goal-bump .35s ease; }
@keyframes blp-goal-bump { 40% { transform: scale(1.12); } 100% { transform: none; } }

.blp-say {
  display: flex; align-items: center; justify-content: center;
  min-height: 2.5em; margin: 2px 0 4px; padding: 0 6px;
  font-size: .92rem; font-weight: 650; line-height: 1.3; color: #5b3f8f;
}

.blp-stage { position: relative; width: 100%; display: grid; place-items: center; }
.blp-boardbox { position: relative; grid-area: 1 / 1; }
.blp-board {
  display: block; border-radius: 18px;
  box-shadow: 0 10px 26px rgba(90, 60, 140, .18);
  touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}
.blp-fx { position: absolute; left: 0; top: 0; pointer-events: none; }
.blp-hand { position: absolute; left: 0; top: 0; width: 40px; opacity: 0; pointer-events: none; z-index: 2; }
.blp-hand svg { display: block; width: 100%; height: auto; transform-origin: 34.4% 5.9%; filter: drop-shadow(0 3px 3px rgba(60, 40, 20, .3)); }
/* Centred on the fingertip. */
.blp-hand-tap {
  position: absolute; left: 34.4%; top: 5.9%; width: 44px; height: 44px; margin: -22px 0 0 -22px;
  border-radius: 50%; border: 3px solid rgba(255, 255, 255, .95); box-shadow: 0 0 10px rgba(255, 210, 120, .9);
}

.blp-win { grid-area: 1 / 1; z-index: 4; display: grid; place-items: center; width: 100%; pointer-events: none; }
.blp-card {
  pointer-events: auto; width: min(340px, 92%); padding: 20px 20px 16px; border-radius: 20px;
  background: rgba(255, 255, 255, .97); box-shadow: 0 16px 40px rgba(70, 40, 120, .28);
  animation: blp-card-in .45s cubic-bezier(.2, 1.4, .4, 1) both;
}
@keyframes blp-card-in { from { opacity: 0; transform: translateY(14px) scale(.9); } }
.blp-kicker { margin: 0; font-size: .8rem; font-weight: 700; color: #8b6cc4; letter-spacing: .02em; }
.blp-card-title { margin: 2px 0 4px; font-size: 1.4rem; color: var(--c-text); }
.blp-line { margin: 0 0 10px; font-size: .95rem; color: var(--c-text-soft); }
.blp-spare { margin: 0 0 12px; font-size: .82rem; color: var(--c-text-soft); }
.blp-done { margin: 0 0 12px; font-weight: 800; color: #2e9a4a; }
.blp-acts { display: flex; justify-content: center; gap: 10px; }
.blp-act, .blp-next {
  display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 999px;
  font: inherit; font-weight: 700; cursor: pointer; border: 0;
}
.blp-act { background: #f1ecf9; color: #5b3f8f; }
.blp-next { background: #8c5ee0; color: #fff; }

.blp-controls { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 10px 0 2px; }
.blp-ctl {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px;
  background: #f4f0fa; border: 1px solid #e4dbf2; color: #4b3a6b; font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer;
}
.blp-icon { width: 18px; height: 18px; flex: none; }

/* The review build's tools, under the game panel and outside it. */
.blp-review {
  display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap;
  margin: 10px auto 0; padding: 8px; font-size: .85rem; color: var(--c-text-soft);
}
.blp-review select, .blp-review button { font: inherit; padding: 4px 8px; border-radius: 8px; border: 1px solid #ccc; background: #fff; }

@media (max-width: 600px) {
  .blp-goal-pic { width: 28px; height: 28px; }
  .blp-goals { gap: 5px; }
  .blp-say { font-size: .86rem; }
}

html.fills-window .game-root .blp { display: flex; flex-direction: column; height: 100%; }
html.fills-window .game-root .blp > :not(.blp-stage) { flex: none; }
html.fills-window .game-root .blp-stage { flex: 1 1 0; min-height: 0; overflow: hidden; }