.bc-sky {
  position: fixed;
  z-index: 7;
  inset: 0;
  overflow: clip;
  pointer-events: none;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  contain: layout paint style;
}

.bc-playfield { position: absolute; inset: 0; }

.bc-catch, .bc-burst {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: var(--bc-hit, var(--bc-diameter));
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.bc-catch {
  appearance: none;
  border: 0;
  border-radius: 50%;
  padding: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.bc-sky:not([data-out-of-play]) .bc-catch[data-catchable] { pointer-events: auto; }
.bc-catch:focus-visible { outline: 2px solid #ffdbac; outline-offset: -1px; }

.bc-face {
  position: relative;
  display: block;
  width: var(--bc-diameter);
  aspect-ratio: 1;
  border-radius: var(--bc-shape);
  border: .65px solid color-mix(in srgb, var(--bc-1) 74%, transparent);
  background:
    radial-gradient(ellipse at 58% 76%, color-mix(in srgb, var(--bc-2) 31%, transparent), transparent 39%),
    radial-gradient(ellipse at 23% 34%, color-mix(in srgb, var(--bc-1) 27%, transparent), transparent 46%),
    radial-gradient(ellipse at 76% 58%, color-mix(in srgb, var(--bc-3) 18%, transparent), transparent 38%),
    radial-gradient(ellipse at 50% 49%, #f1ddff05 42%, #d9b0f141 72%, #dfbbfa76 96%);
  box-shadow:
    inset 1px 1px 2px #f6e4ffa3, inset -2px -2px 4px #b387e352,
    0 0 8px #b28ef334;
  scale:
    calc(var(--bc-grow, 1) * var(--bc-surface-x, 1))
    calc(var(--bc-grow, 1) * var(--bc-surface-y, 1));
  animation: bc-membrane var(--bc-shimmer) ease-in-out infinite;
  pointer-events: none;
}

.bc-catch[data-obscured] .bc-face { opacity: .35; }

.bc-face::before, .bc-face::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.bc-face::before {
  inset: 1%;
  background:
    conic-gradient(from var(--bc-rim-angle), transparent 7%, var(--bc-1) 13%, transparent 28%, var(--bc-2) 46%, transparent 54%, var(--bc-3) 76%, transparent 90%);
  mask-image: radial-gradient(ellipse closest-side, transparent 81%, #000 99%);
  opacity: .65;
  rotate: var(--bc-rim-sweep, 0deg);
  animation: bc-refraction var(--bc-shimmer) ease-in-out infinite alternate;
}

.bc-face::after {
  background:
    radial-gradient(ellipse 23% 8% at var(--bc-light-x) var(--bc-light-y), #fffaf4e8 7%, #ffedff87 40%, transparent 100%),
    radial-gradient(ellipse 11% 5% at 66% 77%, #d7fff6a3, transparent 100%),
    radial-gradient(ellipse 4% 4% at 25% 37%, #fff7e3c2, transparent 100%);
  transform: rotate(var(--bc-glint-angle));
  animation: bc-specular var(--bc-shimmer) ease-in-out infinite alternate;
}

@keyframes bc-membrane { 50% { transform: scaleX(var(--bc-wobble)) scaleY(.975) rotate(5deg); } }
@keyframes bc-refraction { to { transform: rotate(19deg); opacity: .48; } }
@keyframes bc-specular { to { transform: translate(1%, 3%) rotate(calc(var(--bc-glint-angle) + 9deg)); opacity: .73; } }

.bc-burst { animation: bc-pop-lifetime .43s linear both; }
.bc-burst .bc-face { animation: bc-pop-surface .17s ease-out both; }
.bc-burst::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid var(--bc-2);
  border-radius: 50%;
  animation: bc-pop-ring .36s .065s ease-out both;
}

.bc-burst i {
  position: absolute;
  width: var(--bc-drop-size);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff5eb;
  box-shadow: 0 0 4px var(--bc-1);
  animation: bc-droplet .36s .065s cubic-bezier(.19,.66,.34,1) both;
}

.bc-burst[data-missed] { opacity: .65; }
@keyframes bc-pop-lifetime { to { visibility: hidden; } }
@keyframes bc-pop-surface {
  0% { opacity: .92; transform: scale(1); }
  32% { opacity: 1; filter: brightness(1.4); transform: scale(.86, .93); }
  70% { opacity: .86; transform: scale(1.1); }
  100% { opacity: 0; transform: scale(1.23); }
}
@keyframes bc-pop-ring {
  from { opacity: .8; transform: scale(.75); }
  to { opacity: 0; transform: scale(1.68); }
}
@keyframes bc-droplet {
  from { opacity: .98; transform: scale(1); }
  to { opacity: 0; transform: translate(var(--bc-drop-x), var(--bc-drop-y)) scale(.22); }
}

.bc-score {
  position: absolute;
  top: 0;
  left: 0;
  color: color-mix(in srgb, var(--bc-score-tint) 78%, #f5ede0);
  font: italic 400 clamp(21px, 18.8px + .72vw, 26px)/1 var(--serif, Georgia, serif);
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: .02em;
  text-shadow: 0 1px 2px #150b22a8;
  white-space: nowrap;
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: bc-score-trace 1.65s .12s ease-in-out both;
}

@keyframes bc-score-trace {
  0%, 100% { opacity: 0; }
  15%, 45.5% { opacity: .62; }
}

@media (prefers-reduced-motion: reduce) {
  .bc-sky { display: none; }
  [data-satellite="invention"].is-still .satellite-bubbles::after {
    content: '';
    position: absolute;
    width: 7px;
    aspect-ratio: 1;
    border: 1px solid #e5ccfac9;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #fff7e4d4, #b1d7f04a 47%, transparent 62%);
    box-shadow: -7px -6px 0 -2px #bfded9aa, 6px -7px 0 -2px #edc7eda8;
    transform: translateY(-5px);
  }
}