/* =============================================================
   GAME: Bubble Shooter
   ============================================================= */
.board-bubbleshooter { display: flex; flex-direction: column; align-items: center; gap: 12px; outline: none; }
.bs-stage { position: relative; touch-action: none; cursor: crosshair; }
.bs-canvas {
  display: block; width: min(calc(100vw - 60px), 440px, calc((100vh - 250px) * .7)); min-width: 240px; aspect-ratio: 420 / 600;
  border-radius: 14px; background: #0d0826;
  box-shadow: 0 0 0 2px #a98bff, 0 0 26px rgba(169, 139, 255, .38);
}
.board-bubbleshooter:focus-visible .bs-canvas { box-shadow: 0 0 0 3px #fff, 0 0 26px rgba(169, 139, 255, .55); }
.bs-msg {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: max-content; max-width: 84%;
  padding: 10px 16px; border-radius: 12px; background: rgba(10, 6, 30, .86); color: #ece6ff; font-weight: 700; text-align: center;
  box-shadow: 0 0 0 1px rgba(169, 139, 255, .6), 0 0 22px rgba(169, 139, 255, .25); pointer-events: none;
}
.bs-msg[hidden] { display: none; }
.bs-num { color: #c9b8ff; font-variant-numeric: tabular-nums; }
.bs-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: 0; }

/* on-screen buttons: phones and tablets only */
.bs-pad { display: none; grid-template-columns: 56px 56px 62px 56px 44px; gap: 8px; align-items: center; touch-action: none; }
.bs-key {
  display: grid; place-items: center; height: 50px; border: 0; border-radius: 14px; cursor: pointer; color: #c9b8ff;
  background: var(--surface-2); box-shadow: inset 0 0 0 1px rgba(169, 139, 255, .5), 0 4px 0 rgba(0, 0, 0, .35);
  -webkit-tap-highlight-color: transparent; user-select: none;
}
.bs-key svg { width: 26px; height: 26px; fill: currentColor; }
.bs-key:active, .bs-key.down { background: #2a1d5c; transform: translateY(2px); box-shadow: inset 0 0 0 1px #a98bff, 0 2px 0 rgba(0, 0, 0, .35); }
.bs-key-fire { width: 60px; height: 60px; border-radius: 50%; color: #ffd23f; box-shadow: inset 0 0 0 1px rgba(255, 210, 63, .6), 0 4px 0 rgba(0, 0, 0, .35); }
.bs-key-swap { color: #7df0ff; }
.bs-key-pause { width: 44px; height: 44px; border-radius: 50%; color: var(--ink); }
.bs-key-pause svg { width: 18px; height: 18px; }
@media (pointer: coarse) {
  .bs-pad { display: grid; }
  .board-bubbleshooter { gap: 8px; }
  .bs-canvas { width: min(calc(100vw - 60px), 440px, calc((100vh - 330px) * .7)); }
}
@media (max-width: 360px) { .bs-pad { grid-template-columns: 48px 48px 56px 48px 40px; gap: 6px; } }

/* game over: a short red flash of the frame (off when motion is reduced) */
.bs-hurt .bs-canvas { animation: bsHurt .6s ease-out; }
@keyframes bsHurt { 0% { box-shadow: 0 0 0 3px #ff3d5e, 0 0 34px rgba(255, 61, 94, .7); } 100% { box-shadow: 0 0 0 2px #a98bff, 0 0 26px rgba(169, 139, 255, .38); } }