/* solo-extras.css — Solo Stage extra effects on the OBS overlay (brain=go).
 * Driven by the Go SOLO_UPDATE fold (fever_active / revival_active /
 * avatar_effect_tier). Namespaced so nothing leaks onto the base card. Mirrors
 * the SoloWidget.tsx (React) look (solo-widget-v2.css). Goes beyond Rust + the
 * original vendored solo.js (which had no extras render).
 *
 * Phase 2 — Fever Time: a rainbow conic glow behind the card + a drop-shadow
 * "ignite" on the SVG, toggled by [data-fever="1"] on .card-wrap (set in
 * solo.js soloRenderGo from su.fever_active). */
.card-wrap[data-fever="1"] #mainsvg {
  filter:
    drop-shadow(0 0 12px rgba(0, 185, 200, 0.7))
    drop-shadow(0 0 28px rgba(168, 85, 247, 0.5));
}

.solo-fever-glow {
  display: none;
  position: absolute;
  inset: 12% 0 -4% 0;
  z-index: 0;
  border-radius: 24px;
  pointer-events: none;
  background: conic-gradient(
    from 0deg,
    rgba(245, 158, 11, 0.45),
    rgba(0, 185, 200, 0.45),
    rgba(168, 85, 247, 0.45),
    rgba(245, 158, 11, 0.45)
  );
  filter: blur(28px);
  animation: solo-fever-rot 4s linear infinite;
}
.card-wrap[data-fever="1"] .solo-fever-glow {
  display: block;
}
@keyframes solo-fever-rot {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Phase 2 — Revival: a centered banner + live countdown while a revival window
 * is active (from the SOLO_UPDATE fold revival_active / revival_expires_at).
 * No SoloWidget reference (revival isn't on the OBS card there) — minimal look. */
.solo-revival {
  display: none;
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  pointer-events: none;
  padding: 6px 18px;
  border-radius: 999px;
  font-family: 'Montserrat', 'Noto Sans Thai', sans-serif;
  font-weight: 800;
  font-size: 15px;
  color: #fff;
  letter-spacing: 0.06em;
  white-space: nowrap;
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.95), rgba(236, 72, 153, 0.95));
  box-shadow: 0 4px 18px rgba(236, 72, 153, 0.55);
  animation: solo-revival-pulse 0.8s ease-in-out infinite alternate;
}
.solo-revival.is-on { display: block; }
@keyframes solo-revival-pulse {
  from { transform: translateX(-50%) scale(1); }
  to   { transform: translateX(-50%) scale(1.05); }
}

/* Phase 4 — User Avatar Effect: a viewer's avatar pops on the right for ~6s when
 * their single gift crosses a tier. Mirrors SoloWidget .solv2-avatar-effect
 * (literal colors — no CSS vars). Driven by the one-shot AVATAR_EFFECT message. */
.solo-ae {
  display: none;
  position: absolute;
  top: 38%;
  right: 6%;
  z-index: 5;
  align-items: center;
  gap: 10px;
  pointer-events: none;
}
.solo-ae.is-on {
  display: flex;
  animation:
    solo-ae-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both,
    solo-ae-out 0.6s ease-in 5.4s both;
}
@keyframes solo-ae-in {
  from { opacity: 0; transform: scale(0.4) translateX(40px); }
  to   { opacity: 1; transform: scale(1) translateX(0); }
}
@keyframes solo-ae-out {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.8) translateX(20px); }
}
.solo-ae-ring {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1e293b;
  border: 3px solid #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}
.solo-ae-ring img { width: 100%; height: 100%; object-fit: cover; }
.solo-ae-label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  background: rgba(15, 23, 42, 0.92);
  padding: 4px 12px;
  border-radius: 8px;
  font-family: 'Montserrat', 'Noto Sans Thai', sans-serif;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}
.solo-ae-tier {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #fbbf24;
  text-transform: uppercase;
}
.solo-ae-name {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.solo-ae[data-tier="1"] .solo-ae-ring { border-color: #fbbf24; box-shadow: 0 0 18px rgba(251, 191, 36, 0.7); }
.solo-ae[data-tier="2"] .solo-ae-ring { border-color: #00b9c8; box-shadow: 0 0 22px rgba(0, 185, 200, 0.8); }
.solo-ae[data-tier="3"] .solo-ae-ring {
  border-color: #a855f7;
  box-shadow: 0 0 26px rgba(168, 85, 247, 0.85);
  animation: solo-ae-spin 3s linear infinite;
}
.solo-ae[data-tier="3"] .solo-ae-tier { color: #c4b5fd; }
@keyframes solo-ae-spin {
  from { filter: hue-rotate(0deg); }
  to   { filter: hue-rotate(360deg); }
}