:root {
  --safe-x: clamp(22px, 4.5vw, 58px);
  --safe-y: clamp(30px, 4vh, 76px);
  --accent: #70e7ff;
  --accent-rgb: 112, 231, 255;
  --accent-two: #c176ff;
  --text: #fff;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  color-scheme: only light;
  background: transparent !important;
  background-color: rgba(0, 0, 0, 0) !important;
}

body {
  color: var(--text);
  font-family: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

.overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: transparent;
}

.blow-gift-cue { display: none !important; }

.overlay-error {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 20;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 22px 28px;
  max-width: min(640px, 92vw);
  border-radius: 16px;
  background: rgba(17, 20, 28, 0.9);
  color: #fff;
  font-size: clamp(22px, 3.4vw, 32px);
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
}

.overlay-error a {
  color: #9ad4ff;
  text-decoration: underline;
}

.overlay.pass-expired .bubble-list,
.overlay.pass-expired .queue-badge,
.overlay.pass-expired .pop-credits {
  visibility: hidden;
}

.bubble-list {
  --bubble-columns: 1;
  --bubble-rows: 1;
  --bubble-size: min(300px, 100%);
  --bubble-gap: 28px;
  position: absolute;
  inset: var(--safe-y) var(--safe-x);
  display: grid;
  grid-template-columns: repeat(var(--bubble-columns), var(--bubble-size));
  grid-template-rows: repeat(var(--bubble-rows), var(--bubble-size));
  place-content: center;
  gap: var(--bubble-gap);
  perspective: 1200px;
}

.queue-badge {
  --queue-size: clamp(48px, 7vw, 72px);
  position: fixed;
  z-index: 30;
  display: grid;
  place-items: center;
  width: var(--queue-size);
  height: var(--queue-size);
  pointer-events: none;
  opacity: 0.96;
  will-change: left, top;
}

.queue-badge[hidden] {
  display: none !important;
}

.queue-badge.is-queue-pulse {
  animation: queue-badge-pulse 520ms cubic-bezier(.18, .82, .22, 1);
}

.queue-badge.is-queue-pulse .queue-badge__surface {
  animation: queue-badge-glow 520ms ease-out;
}

.queue-badge.is-queue-pulse .queue-badge__count {
  animation: queue-badge-count-pop 520ms cubic-bezier(.18, .82, .22, 1);
}

.queue-badge__surface {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 48% 52% 46% 54% / 52% 45% 55% 48%;
  background:
    radial-gradient(circle at 28% 20%, rgba(255, 255, 255, 0.72) 0 10%, transparent 30%),
    radial-gradient(circle at 74% 72%, rgba(var(--accent-rgb), 0.3), transparent 50%),
    rgba(19, 28, 55, 0.42);
  box-shadow:
    inset 8px 10px 18px rgba(255, 255, 255, 0.12),
    inset -10px -12px 20px rgba(var(--accent-rgb), 0.16),
    0 10px 24px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(8px);
}

.queue-badge__count {
  position: relative;
  z-index: 1;
  color: #fff;
  font-size: calc(var(--queue-size) * 0.36);
  font-weight: 950;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
}

@keyframes queue-badge-pulse {
  0% { transform: scale(1); }
  35% { transform: scale(1.22); }
  70% { transform: scale(0.96); }
  100% { transform: scale(1); }
}

@keyframes queue-badge-glow {
  0% {
    box-shadow:
      inset 8px 10px 18px rgba(255, 255, 255, 0.12),
      inset -10px -12px 20px rgba(var(--accent-rgb), 0.16),
      0 10px 24px rgba(0, 0, 0, 0.32);
    filter: brightness(1);
  }
  40% {
    box-shadow:
      inset 8px 10px 18px rgba(255, 255, 255, 0.22),
      inset -10px -12px 20px rgba(var(--accent-rgb), 0.34),
      0 0 22px rgba(var(--accent-rgb), 0.55),
      0 12px 28px rgba(0, 0, 0, 0.34);
    filter: brightness(1.35);
  }
  100% {
    box-shadow:
      inset 8px 10px 18px rgba(255, 255, 255, 0.12),
      inset -10px -12px 20px rgba(var(--accent-rgb), 0.16),
      0 10px 24px rgba(0, 0, 0, 0.32);
    filter: brightness(1);
  }
}

@keyframes queue-badge-count-pop {
  0% { transform: scale(1); }
  35% { transform: scale(1.18); }
  100% { transform: scale(1); }
}

.bubble {
  --bubble-accent: var(--accent);
  --bubble-accent-rgb: var(--accent-rgb);
  --bubble-accent-two: var(--accent-two);
  --bubble-base-rgb: 19, 28, 55;
  --bubble-text: #fff;
  --float-duration: 8s;
  --float-delay: -1s;
  --drift-x: 4px;
  --drift-y: 5px;
  --motion-inset: 6px;
  --wander-x: 18px;
  --wander-y: 24px;
  --wander-duration: 14s;
  position: relative;
  width: var(--bubble-size);
  aspect-ratio: 1;
  contain: layout paint;
  justify-self: center;
  overflow: hidden;
  border-radius: 50%;
  clip-path: circle(50% at 50% 50%);
  color: var(--bubble-text);
  opacity: 1;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  transition: opacity 280ms ease-out, filter 280ms ease-out;
}

.bubble.is-entering {
  opacity: 0;
  filter: brightness(1.18);
}

.bubble:not(.is-popping):not(.is-expiring):not(.is-cancelling) {
  animation: bubble-wander var(--wander-duration) ease-in-out var(--float-delay) infinite alternate;
}

.bubble.is-popping,
.bubble.is-expiring,
.bubble.is-cancelling {
  transition: none;
}

.bubble-list.is-compact .bubble {
  --drift-x: 1px !important;
  --drift-y: 1px !important;
  --motion-inset: 4px;
}

.bubble-list.is-compact .bubble__content {
  inset: 6% 5%;
  gap: calc(var(--bubble-size) * 0.01);
}

.bubble-list.is-compact .bubble__message {
  margin-bottom: calc(var(--bubble-size) * 0.02);
  font-size: calc(var(--bubble-size) * 0.065);
  -webkit-line-clamp: 2;
}

.bubble-list.is-compact .bubble__gift {
  gap: calc(var(--bubble-size) * 0.01);
}

.bubble-list.is-compact .bubble__icon-wrap {
  width: 30%;
}

.bubble-list.is-compact .bubble__icon-fallback {
  font-size: calc(var(--bubble-size) * 0.09);
}

.bubble-list.is-compact .bubble__quantity {
  font-size: calc(var(--bubble-size) * 0.078);
}

.bubble-list.is-compact .bubble__timer {
  margin-top: calc(var(--bubble-size) * 0.02);
  font-size: calc(var(--bubble-size) * 0.078);
}

.bubble__float {
  position: absolute;
  inset: var(--motion-inset);
  contain: layout paint;
  overflow: hidden;
  border-radius: 50%;
  clip-path: circle(50% at 50% 50%);
  animation: bubble-float var(--float-duration) ease-in-out var(--float-delay) infinite alternate;
  will-change: transform;
}

.bubble__surface {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: clamp(1px, .22vw, 3px) solid rgba(255, 255, 255, 0.5);
  border-radius: 48% 52% 46% 54% / 52% 45% 55% 48%;
  background:
    radial-gradient(circle at 27% 19%, rgba(255, 255, 255, 0.8) 0 1.8%, rgba(255, 255, 255, 0.19) 7%, transparent 19%),
    radial-gradient(circle at 78% 74%, rgba(var(--bubble-accent-rgb), 0.28), transparent 42%),
    radial-gradient(circle at 22% 76%, rgba(255, 117, 200, 0.16), transparent 38%),
    conic-gradient(from 205deg at 52% 48%, rgba(112, 231, 255, 0.12), rgba(193, 118, 255, 0.16), rgba(255, 117, 200, 0.11), rgba(255, 233, 119, 0.1), rgba(112, 231, 255, 0.12)),
    rgba(var(--bubble-base-rgb), 0.3);
  box-shadow:
    inset 18px 22px 42px rgba(255, 255, 255, 0.09),
    inset -22px -28px 52px rgba(var(--bubble-accent-rgb), 0.13),
    inset 0 0 8px rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(12px) saturate(1.45);
  background-position: 0% 0%, 100% 100%, 0% 100%, 0% 50%, 0% 0%;
  background-size: 125% 125%, 145% 145%, 140% 140%, 220% 220%, 100% 100%;
  animation:
    membrane-deform 8.5s ease-in-out infinite alternate,
    iridescent-flow 11s linear infinite;
  will-change: border-radius, background-position;
}

.bubble__surface::before,
.bubble__surface::after {
  position: absolute;
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.bubble__surface::before {
  inset: 3.5%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: inset 0 0 24px rgba(255, 255, 255, 0.08);
  animation: inner-membrane 6.8s ease-in-out -2s infinite alternate;
}

.bubble__surface::after {
  right: 7%;
  bottom: 12%;
  width: 21%;
  height: 11%;
  border-right: 3px solid rgba(var(--bubble-accent-rgb), 0.42);
  transform: rotate(-43deg);
  animation: rim-glide 7.4s ease-in-out -1.6s infinite alternate;
}

.bubble__shine {
  position: absolute;
  inset: 4%;
  border-radius: inherit;
  background:
    radial-gradient(ellipse at 24% 15%, rgba(255, 255, 255, 0.9) 0 3%, rgba(112, 231, 255, 0.34) 8%, transparent 22%),
    conic-gradient(from 20deg at 48% 52%, transparent 0 14%, rgba(255, 233, 119, 0.2) 20%, rgba(255, 117, 200, 0.25) 27%, transparent 36% 64%, rgba(112, 231, 255, 0.24) 73%, rgba(193, 118, 255, 0.2) 80%, transparent 88%);
  background-position: 0% 0%, 50% 50%;
  background-size: 120% 120%, 190% 190%;
  filter: blur(1.5px);
  mix-blend-mode: screen;
  opacity: 0.68;
  animation: highlight-wander 9.2s ease-in-out -3.1s infinite alternate;
}

.bubble__content {
  position: absolute;
  inset: 14% 12% 13%;
  z-index: 2;
  display: flex;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.bubble__message {
  display: -webkit-box;
  width: 100%;
  max-height: 3.3em;
  margin: 0 0 min(calc(var(--bubble-size) * 0.05), 20px);
  overflow: hidden;
  color: var(--bubble-text);
  font-size: min(calc(var(--bubble-size) * 0.085), 34px);
  font-weight: 850;
  letter-spacing: -0.025em;
  line-height: 1.08;
  overflow-wrap: anywhere;
  text-shadow: 0 3px 13px rgba(0, 0, 0, 0.62);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.bubble__gift {
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 0;
  overflow: visible;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: min(calc(var(--bubble-size) * 0.022), 9px);
}

.bubble__icon-wrap {
  position: relative;
  display: grid;
  width: min(calc(var(--bubble-size) * 0.3), 120px);
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 1;
  flex: 0 0 auto;
  overflow: hidden;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.2), rgba(var(--bubble-accent-rgb), 0.08) 68%, transparent 72%);
}

.bubble__icon {
  position: relative;
  z-index: 1;
  display: block;
  width: 92%;
  height: 92%;
  object-fit: contain;
  filter: drop-shadow(0 4px 7px rgba(0, 0, 0, 0.48));
}

.bubble__icon[hidden] {
  display: none;
}

.bubble__icon-fallback {
  position: absolute;
  color: var(--bubble-accent);
  font-size: min(calc(var(--bubble-size) * 0.1), 40px);
  text-shadow: 0 0 18px rgba(var(--bubble-accent-rgb), 0.9);
}

.bubble__quantity {
  width: 100%;
  min-width: 0;
  flex: 0 0 auto;
  overflow: visible;
  color: var(--bubble-text);
  font-size: min(calc(var(--bubble-size) * 0.095), 38px);
  font-weight: 950;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  padding-block: 0.06em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.58), 0 0 12px rgba(var(--bubble-accent-rgb), 0.32);
}

.bubble__quantity[hidden] {
  display: none;
}

.bubble__timer {
  width: 100%;
  min-width: 0;
  flex: 0 0 auto;
  margin-top: min(calc(var(--bubble-size) * 0.035), 14px);
  overflow: visible;
  color: var(--bubble-text);
  font-size: min(calc(var(--bubble-size) * 0.105), 42px);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  line-height: 1.15;
  text-shadow: 0 2px 13px rgba(0, 0, 0, 0.6);
}

.bubble__rare {
  position: absolute;
  top: 9%;
  left: 50%;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.2em;
  padding: 0.22em 0.55em;
  border: 1px solid rgba(255, 224, 150, 0.75);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 236, 180, 0.95), rgba(214, 160, 48, 0.92));
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.35),
    0 0 18px rgba(255, 196, 64, 0.35);
  color: #2a1a00;
  font-size: min(calc(var(--bubble-size) * 0.055), 18px);
  font-weight: 900;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
  transform: translateX(-50%);
  pointer-events: none;
}

.bubble__rare[hidden] {
  display: none !important;
}

.bubble.is-rare .bubble__surface {
  box-shadow:
    inset 18px 22px 42px rgba(255, 255, 255, 0.12),
    inset -22px -28px 52px rgba(255, 196, 64, 0.22),
    inset 0 0 10px rgba(255, 236, 180, 0.28),
    0 0 28px rgba(255, 196, 64, 0.28);
}

.bubble.is-rare .bubble__surface::before {
  border-color: rgba(255, 224, 150, 0.45);
  box-shadow: inset 0 0 28px rgba(255, 196, 64, 0.18);
}

.bubble.is-rare .bubble__shine {
  opacity: 0.95;
  filter: blur(1.2px) saturate(1.15);
}

.bubble__particles {
  position: absolute;
  inset: 0;
  z-index: 6;
  border-radius: 50%;
  pointer-events: none;
}

.bubble.is-impacting .bubble__surface {
  animation:
    membrane-deform 8.5s ease-in-out infinite alternate,
    iridescent-flow 11s linear infinite,
    bubble-impact 620ms cubic-bezier(.18, .8, .28, 1);
}

.bubble.style-solid .bubble__surface {
  background:
    radial-gradient(circle at 28% 20%, rgba(255, 255, 255, 0.72) 0 2%, rgba(255, 255, 255, 0.12) 10%, transparent 21%),
    radial-gradient(circle at 74% 72%, rgba(var(--bubble-accent-rgb), 0.26), transparent 48%),
    conic-gradient(from 205deg, rgba(112, 231, 255, 0.11), rgba(193, 118, 255, 0.16), rgba(255, 117, 200, 0.1), rgba(255, 233, 119, 0.08), rgba(112, 231, 255, 0.11)),
    rgba(var(--bubble-base-rgb), 0.38);
  backdrop-filter: blur(7px) saturate(1.3);
}

.bubble.style-neon .bubble__surface {
  border-color: var(--bubble-accent);
  box-shadow: inset 0 0 52px rgba(var(--bubble-accent-rgb), 0.28);
}

.bubble.style-soft .bubble__surface {
  border-color: rgba(255, 255, 255, 0.32);
  background:
    radial-gradient(circle at 28% 20%, rgba(255, 255, 255, 0.56) 0 2%, transparent 17%),
    radial-gradient(circle at 68% 72%, rgba(var(--bubble-accent-rgb), 0.2), transparent 48%),
    rgba(var(--bubble-base-rgb), 0.5);
}

/* Classic denser fill (original opacity) */
.is-classic-fill .bubble__surface {
  border-color: rgba(255, 255, 255, 0.54);
  background:
    radial-gradient(circle at 27% 19%, rgba(255, 255, 255, 0.88) 0 1.8%, rgba(255, 255, 255, 0.22) 7%, transparent 19%),
    radial-gradient(circle at 78% 74%, rgba(var(--bubble-accent-rgb), 0.34), transparent 42%),
    radial-gradient(circle at 22% 76%, rgba(255, 117, 200, 0.2), transparent 38%),
    conic-gradient(from 205deg at 52% 48%, rgba(112, 231, 255, 0.15), rgba(193, 118, 255, 0.2), rgba(255, 117, 200, 0.13), rgba(255, 233, 119, 0.12), rgba(112, 231, 255, 0.15)),
    rgba(var(--bubble-base-rgb), 0.44);
  box-shadow:
    inset 18px 22px 42px rgba(255, 255, 255, 0.1),
    inset -22px -28px 52px rgba(var(--bubble-accent-rgb), 0.16),
    inset 0 0 8px rgba(255, 255, 255, 0.34);
}

.is-classic-fill .bubble__shine {
  opacity: 0.8;
}

.is-classic-fill .bubble.style-solid .bubble__surface {
  background:
    radial-gradient(circle at 28% 20%, rgba(255, 255, 255, 0.8) 0 2%, rgba(255, 255, 255, 0.14) 10%, transparent 21%),
    radial-gradient(circle at 74% 72%, rgba(var(--bubble-accent-rgb), 0.3), transparent 48%),
    conic-gradient(from 205deg, rgba(112, 231, 255, 0.13), rgba(193, 118, 255, 0.2), rgba(255, 117, 200, 0.12), rgba(255, 233, 119, 0.1), rgba(112, 231, 255, 0.13)),
    rgba(var(--bubble-base-rgb), 0.52);
}

.is-classic-fill .bubble.style-soft .bubble__surface {
  border-color: rgba(255, 255, 255, 0.34);
  background:
    radial-gradient(circle at 28% 20%, rgba(255, 255, 255, 0.62) 0 2%, transparent 17%),
    radial-gradient(circle at 68% 72%, rgba(var(--bubble-accent-rgb), 0.24), transparent 48%),
    rgba(var(--bubble-base-rgb), 0.66);
}

.bubble.is-low-time .bubble__surface {
  border-color: rgba(255, 107, 126, 0.72);
  animation:
    membrane-deform 8.5s ease-in-out infinite alternate,
    iridescent-flow 11s linear infinite,
    low-time-pulse 1s ease-in-out infinite;
}

.bubble.is-low-time .bubble__timer {
  color: #ff9aaa;
  text-shadow: 0 0 15px rgba(255, 58, 94, 0.76);
}

.bubble.is-low-time.is-impacting .bubble__surface {
  animation:
    membrane-deform 8.5s ease-in-out infinite alternate,
    iridescent-flow 11s linear infinite,
    bubble-impact 620ms cubic-bezier(.18, .8, .28, 1);
}

.bubble.is-popping {
  z-index: 10;
  animation: bubble-pop 820ms cubic-bezier(.2, .72, .3, 1) forwards;
}

.bubble.is-popping .bubble__surface::before {
  animation: bubble-pop-ring 620ms ease-out forwards;
}

.bubble.is-expiring,
.bubble.is-cancelling {
  animation: bubble-dissolve 780ms ease-in forwards;
}

.bubble.is-cancelling {
  animation-duration: 420ms;
}

.particle {
  --angle: 0deg;
  --distance: 120px;
  --size: 12px;
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: var(--particle-color, #fff);
  box-shadow: 0 0 min(12px, calc(var(--bubble-size) * 0.03)) var(--particle-color, #fff);
  opacity: 0;
  animation: particle-burst 760ms cubic-bezier(.08, .72, .22, 1) forwards;
  animation-delay: var(--delay, 0ms);
}

@keyframes bubble-wander {
  0% { transform: translate3d(calc(-1 * var(--wander-x)), calc(0.35 * var(--wander-y)), 0); }
  25% { transform: translate3d(calc(0.55 * var(--wander-x)), calc(-1 * var(--wander-y)), 0); }
  50% { transform: translate3d(var(--wander-x), calc(-0.2 * var(--wander-y)), 0); }
  75% { transform: translate3d(calc(-0.35 * var(--wander-x)), var(--wander-y), 0); }
  100% { transform: translate3d(calc(0.25 * var(--wander-x)), calc(-0.55 * var(--wander-y)), 0); }
}

@keyframes bubble-float {
  0% { transform: translate3d(calc(0px - var(--drift-x)), var(--drift-y), 0) rotate(-1.2deg); }
  35% { transform: translate3d(calc(0.4 * var(--drift-x)), calc(-0.85 * var(--drift-y)), 0) rotate(0.2deg); }
  70% { transform: translate3d(var(--drift-x), calc(0.25 * var(--drift-y)), 0) rotate(0.85deg); }
  100% { transform: translate3d(calc(-0.2 * var(--drift-x)), calc(-0.55 * var(--drift-y)), 0) rotate(-0.35deg); }
}

@keyframes membrane-deform {
  0% { border-radius: 48% 52% 46% 54% / 52% 45% 55% 48%; }
  32% { border-radius: 53% 47% 51% 49% / 47% 54% 46% 53%; }
  67% { border-radius: 46% 54% 49% 51% / 55% 48% 52% 45%; }
  100% { border-radius: 51% 49% 55% 45% / 49% 53% 47% 51%; }
}

@keyframes iridescent-flow {
  0% { background-position: 0% 0%, 100% 100%, 0% 100%, 0% 50%, 0% 0%; }
  50% { background-position: 8% 5%, 90% 82%, 12% 86%, 100% 50%, 0% 0%; }
  100% { background-position: 0% 0%, 100% 100%, 0% 100%, 200% 50%, 0% 0%; }
}

@keyframes inner-membrane {
  0% { border-radius: 52% 48% 54% 46% / 48% 55% 45% 52%; opacity: .72; }
  100% { border-radius: 46% 54% 48% 52% / 55% 47% 53% 45%; opacity: 1; }
}

@keyframes rim-glide {
  0% { right: 7%; bottom: 12%; transform: rotate(-43deg); opacity: .52; }
  100% { right: 12%; bottom: 7%; transform: rotate(-29deg); opacity: .9; }
}

@keyframes highlight-wander {
  0% {
    background-position: 0% 0%, 22% 35%;
    border-radius: 49% 51% 46% 54% / 53% 47% 55% 45%;
    opacity: .65;
  }
  50% { background-position: 8% 4%, 72% 58%; opacity: .88; }
  100% {
    background-position: 2% 9%, 92% 76%;
    border-radius: 54% 46% 52% 48% / 47% 55% 45% 53%;
    opacity: .72;
  }
}

@keyframes bubble-impact {
  0% { transform: scale(1); filter: brightness(1); }
  28% { transform: scale(.99); filter: brightness(1.5); }
  52% { transform: scale(.985); filter: brightness(1.12); }
  100% { transform: scale(1); filter: brightness(1); }
}

@keyframes low-time-pulse {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(.99); filter: brightness(1.24); }
}

@keyframes bubble-pop {
  0% { opacity: 1; transform: scale(1); filter: brightness(1); }
  24% { opacity: 1; transform: scale(.99); filter: brightness(1.75); }
  46% { opacity: .92; transform: scale(.97); filter: brightness(1.3); }
  100% { opacity: 0; transform: scale(.9); filter: brightness(2.1); }
}

@keyframes bubble-pop-ring {
  0% { border-color: rgba(255, 255, 255, 0.2); box-shadow: inset 0 0 24px rgba(255, 255, 255, 0.08); opacity: .55; }
  38% { border-color: rgba(255, 255, 255, 0.9); box-shadow: inset 0 0 0 clamp(3px, 1vw, 12px) rgba(var(--bubble-accent-rgb), 0.48); opacity: 1; }
  100% { border-color: rgba(255, 255, 255, 0); box-shadow: inset 0 0 0 clamp(9px, 3vw, 34px) rgba(var(--bubble-accent-rgb), 0); opacity: 0; }
}

@keyframes bubble-dissolve {
  0% { opacity: 1; transform: scale(1); filter: brightness(1); }
  42% { opacity: .68; transform: scale(.96); filter: brightness(1.12); }
  100% { opacity: 0; transform: scale(.74); filter: brightness(1.35); }
}

@keyframes particle-burst {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--angle)) translateX(0) scale(.3); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--angle)) translateX(var(--distance)) scale(0); }
}

@media (max-width: 520px) {
  :root {
    --safe-x: 14px;
    --safe-y: 22px;
  }

}

.pop-credits {
  position: absolute;
  left: 50%;
  top: calc(50% + min(22vw, 158px) + 20px);
  bottom: auto;
  z-index: 40;
  width: min(92vw, 900px);
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  pointer-events: none;
  overflow: visible;
}

.pop-credit {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(6px, 1vh, 12px);
  width: 100%;
  max-width: 100%;
  padding: 8px 12px 0;
  color: #fff;
  text-align: center;
  opacity: 0;
  transform: translateY(12px);
  will-change: opacity, transform;
}

.pop-credit.is-playing {
  animation: pop-credit-under 1.65s cubic-bezier(.16, .84, .22, 1) both;
}

.pop-credit__label,
.pop-credit__name {
  position: relative;
  z-index: 1;
  max-width: 100%;
  -webkit-text-stroke: 0.07em #000;
  paint-order: stroke fill;
  text-shadow:
    -3px -3px 0 #000,
     3px -3px 0 #000,
    -3px  3px 0 #000,
     3px  3px 0 #000,
    -3px  0 0 #000,
     3px  0 0 #000,
     0 -3px 0 #000,
     0  3px 0 #000,
     0  6px 14px rgba(0, 0, 0, 0.55);
}

.pop-credit__label {
  color: #fff;
  font-size: clamp(18px, 3.2vw, 30px);
  font-weight: 900;
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  text-transform: uppercase;
}

.pop-credit__name {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin: 0;
  color: #fff;
  font-size: clamp(34px, 7.5vw, 88px);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1.08;
  overflow: visible;
  overflow-wrap: anywhere;
  word-break: break-word;
  text-overflow: unset;
  white-space: normal;
}

@keyframes pop-credit-under {
  0% {
    opacity: 0;
    transform: translateY(12px);
  }
  18% {
    opacity: 1;
    transform: translateY(0);
  }
  72% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-14px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bubble,
  .bubble.is-popping,
  .bubble.is-expiring,
  .bubble.is-cancelling,
  .bubble__float,
  .bubble__surface,
  .bubble__surface::before,
  .bubble__surface::after,
  .bubble__shine,
  .bubble.is-popping .bubble__surface::before,
  .bubble.is-low-time .bubble__surface,
  .bubble.is-impacting .bubble__surface,
  .particle,
  .pop-credit,
  .queue-badge.is-queue-pulse,
  .queue-badge.is-queue-pulse .queue-badge__surface,
  .queue-badge.is-queue-pulse .queue-badge__count {
    animation: none;
  }
}