/* V3 — special bubbles, chain combos, ENCORE letters */

/* ============ SPECIAL BUBBLES ============ */
.bubble-tesla {
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.2) 18%, transparent 35%),
    radial-gradient(circle at 50% 50%, rgba(155,213,255,0.45) 0%, rgba(110,180,240,0.55) 60%, rgba(60,140,220,0.65) 100%) !important;
  border: 1.5px solid #9bd5ff !important;
  box-shadow:
    0 0 18px rgba(155,213,255,0.85),
    inset 0 0 14px rgba(255,255,255,0.3) !important;
  animation: tesla-pulse 0.4s ease-in-out infinite;
}
@keyframes tesla-pulse {
  0%, 100% { box-shadow: 0 0 14px rgba(155,213,255,0.7), inset 0 0 14px rgba(255,255,255,0.3); }
  50% { box-shadow: 0 0 28px rgba(255,255,255,0.95), inset 0 0 18px rgba(255,255,255,0.5); }
}
.bubble-ember {
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,0.7) 0%, rgba(255,220,160,0.3) 18%, transparent 35%),
    radial-gradient(circle at 50% 50%, rgba(255,200,90,0.45) 0%, rgba(255,140,50,0.6) 60%, rgba(220,80,30,0.7) 100%) !important;
  border: 1.5px solid #ff8a3a !important;
  box-shadow:
    0 0 18px rgba(255,138,58,0.85),
    inset 0 0 14px rgba(255,200,100,0.4) !important;
  animation: ember-flicker 0.6s ease-in-out infinite;
}
@keyframes ember-flicker {
  0%, 100% { transform: scale(1); }
  33% { transform: scale(1.06, 0.96); }
  66% { transform: scale(0.96, 1.04); }
}
.bubble-champagne {
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.4) 18%, transparent 35%),
    radial-gradient(circle at 50% 50%, rgba(255,250,220,0.55) 0%, rgba(245,232,200,0.65) 60%, rgba(212,168,75,0.7) 100%) !important;
  border: 1.5px solid #fff8e0 !important;
  box-shadow:
    0 0 24px rgba(255,250,220,0.9),
    0 0 8px rgba(212,168,75,0.6),
    inset 0 0 18px rgba(255,255,255,0.5) !important;
  animation: champagne-shimmer 1.2s ease-in-out infinite;
}
@keyframes champagne-shimmer {
  0%, 100% { filter: brightness(1) hue-rotate(0deg); }
  50% { filter: brightness(1.25) hue-rotate(-8deg); }
}

.bubble-glyph {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  pointer-events: none;
  filter: drop-shadow(0 0 4px currentColor);
  animation: glyph-spin 2s linear infinite;
}
@keyframes glyph-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ============ HAZARDS ============ */
.hazard-tesla {
  position: absolute;
  pointer-events: none;
  z-index: 22;
  filter: drop-shadow(0 0 8px rgba(155,213,255,0.9));
}
.hazard-ember {
  position: absolute;
  pointer-events: none;
  z-index: 16;
  filter: drop-shadow(0 0 6px rgba(255,138,58,0.8));
}
.hazard-champagne {
  position: absolute;
  pointer-events: none;
  z-index: 17;
  width: 100%;
  filter: drop-shadow(0 -4px 8px rgba(255,250,220,0.6));
}
.hazard-burst {
  position: absolute;
  pointer-events: none;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.burst-ring {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 3px solid var(--gold-bright);
  box-shadow: 0 0 16px rgba(232,193,112,0.8), inset 0 0 10px rgba(255,250,220,0.6);
}
.burst-points {
  position: absolute;
  font-family: 'Limelight', serif;
  font-size: 18px;
  letter-spacing: 0.1em;
  color: var(--cream-bright);
  text-shadow: 0 0 8px rgba(212,168,75,1), 0 1px 0 #000;
  white-space: nowrap;
  margin-top: 18px;
}

/* ============ ENCORE letters ============ */
.letter-bubble {
  position: absolute;
  width: 44px; height: 44px;
  z-index: 19;
  filter: drop-shadow(0 0 8px rgba(232,193,112,0.7));
}

.encore-track {
  position: absolute;
  top: 8px; left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
  z-index: 30;
  pointer-events: none;
}
.encore-letter {
  font-family: 'Limelight', serif;
  font-size: 13px;
  width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(212,168,75,0.4);
  color: rgba(232,193,112,0.35);
  background: rgba(10,9,8,0.6);
  text-shadow: none;
  transition: all 0.3s ease;
}
.encore-letter.lit {
  color: var(--cream-bright);
  background: linear-gradient(180deg, var(--gold), var(--gold-deep));
  border-color: var(--gold-bright);
  text-shadow: 0 0 6px rgba(255,250,220,0.9);
  box-shadow: 0 0 10px rgba(212,168,75,0.7);
  transform: scale(1.1);
}

/* ============ CHAIN DISPLAY ============ */
.chain-display {
  position: absolute;
  z-index: 28;
  pointer-events: none;
  text-align: center;
  animation: chain-bounce 0.4s ease-out;
}
@keyframes chain-bounce {
  0% { transform: scale(0.5); opacity: 0; }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); opacity: 1; }
}
.chain-num {
  font-family: 'Limelight', serif;
  font-size: 28px;
  color: var(--gold-bright);
  text-shadow:
    0 0 8px rgba(232,193,112,1),
    0 0 16px rgba(255,200,80,0.8),
    0 1px 0 #000;
  letter-spacing: 0.05em;
}
.chain-label {
  font-family: 'Cinzel', serif;
  font-size: 9px;
  letter-spacing: 0.4em;
  color: var(--cream-bright);
  text-shadow: 0 0 6px rgba(212,168,75,0.9);
  margin-top: -2px;
}


/* ============ lolomoi brand override ============ */
.title-main {
  font-family: 'Poiret One', 'Limelight', serif !important;
  font-weight: 400 !important;
  text-transform: lowercase !important;
  letter-spacing: 0.02em !important;
  font-size: 110px !important;
  line-height: 0.9 !important;
}
@media (max-width: 720px) {
  .title-main { font-size: 64px !important; }
}