/* Bubble Shooter — scoped under .bs */
.bs { display: grid; gap: 8px; justify-items: center; width: 100%; margin-inline: auto; }
.bs-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: var(--bsw, 100%); max-width: 100%; }
.bs-pause { width: 40px; padding: 0; }
.bs-stage {
  position: relative; max-width: 100%;
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: 0 0 0 1px rgba(80,120,255,.25), 0 16px 36px -18px rgba(20,40,140,.65);
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
  cursor: crosshair; outline: none;
}
.bs-stage canvas { display: block; width: 100%; height: 100%; }
.bs-stage .k-overlay { border-radius: var(--r-lg); }
.bs-hint { color: var(--muted); font-size: var(--t-xs); text-align: center; max-width: 34em; }
.bs-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* phone held sideways: board on the left, score on the right */
@media (orientation: landscape) and (max-height: 520px) {
  .bs { grid-template-columns: auto minmax(0, 220px); grid-template-areas: "stage top" "stage hint"; column-gap: 20px; align-content: center; justify-content: center; }
  .bs-stage { grid-area: stage; }
  .bs-top { grid-area: top; width: 100%; flex-direction: column; align-items: stretch; align-self: end; }
  .bs-top .k-scores { flex-direction: column; }
  .bs-hint { grid-area: hint; display: block; text-align: left; align-self: start; }
}