/* =============================================================
   GAME: Brick Breaker
   ============================================================= */
.board-brickbreaker { display: flex; flex-direction: column; align-items: center; gap: 12px; outline: none; }
.bb-stage { position: relative; touch-action: none; }
.bb-run .bb-stage { cursor: none; }
.bb-canvas {
  display: block; width: min(calc(100vw - 60px), 480px, calc((100vh - 250px) * .75)); min-width: 240px; aspect-ratio: 3 / 4;
  border-radius: 14px; background: #060a24;
  box-shadow: 0 0 0 2px #3d8bff, 0 0 26px rgba(61, 139, 255, .38);
}
.board-brickbreaker:focus-visible .bb-canvas { box-shadow: 0 0 0 3px #fff, 0 0 26px rgba(61, 139, 255, .55); }
.bb-msg {
  position: absolute; left: 50%; top: 62%; transform: translate(-50%, -50%); width: max-content; max-width: 84%;
  padding: 10px 16px; border-radius: 12px; background: rgba(4, 8, 30, .84); color: #d8e6ff; font-weight: 700; text-align: center;
  box-shadow: 0 0 0 1px rgba(61, 139, 255, .6), 0 0 22px rgba(61, 139, 255, .25); pointer-events: none;
}
.bb-msg[hidden] { display: none; }
.bb-num { color: #8fc0ff; font-variant-numeric: tabular-nums; }
.bb-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: 0; }

/* on-screen pad: phones and tablets only */
.bb-pad { display: none; grid-template-columns: 72px 64px 72px 48px; gap: 8px; align-items: center; touch-action: none; }
.bb-key {
  display: grid; place-items: center; height: 52px; border: 0; border-radius: 14px; cursor: pointer; color: #8fc0ff;
  background: var(--surface-2); box-shadow: inset 0 0 0 1px rgba(61, 139, 255, .5), 0 4px 0 rgba(0, 0, 0, .35);
  -webkit-tap-highlight-color: transparent; user-select: none;
}
.bb-key svg { width: 26px; height: 26px; fill: currentColor; }
.bb-key:active, .bb-key.down { background: #16275a; transform: translateY(2px); box-shadow: inset 0 0 0 1px #3d8bff, 0 2px 0 rgba(0, 0, 0, .35); }
.bb-key-fire { border-radius: 50%; width: 60px; height: 60px; justify-self: center; color: #ff8fe8; box-shadow: inset 0 0 0 1px rgba(255, 79, 216, .6), 0 4px 0 rgba(0, 0, 0, .35); }
.bb-key-pause { width: 44px; height: 44px; border-radius: 50%; color: var(--ink); }
.bb-key-pause svg { width: 18px; height: 18px; }
@media (pointer: coarse) {
  .bb-pad { display: grid; }
  .board-brickbreaker { gap: 8px; }
  .bb-stage { cursor: default; }
  .bb-canvas { width: min(calc(100vw - 60px), 480px, calc((100vh - 330px) * .75)); }
}

/* a lost ball: red flash of the frame (off when motion is reduced) */
.bb-hurt .bb-canvas { animation: bbHurt .5s ease-out; }
@keyframes bbHurt { 0% { box-shadow: 0 0 0 3px #ff3d5e, 0 0 34px rgba(255, 61, 94, .7); } 100% { box-shadow: 0 0 0 2px #3d8bff, 0 0 26px rgba(61, 139, 255, .38); } }