More

src/App.vue

@@ -163,7 +163,14 @@
                 or skip.
               </p>
             </div>
-            <div class="player-body">
+            <div
+              class="player-body"
+              :class="{
+                playing: isPlaying && !isAnswerClip,
+                answer: isPlaying && isAnswerClip,
+                idle: !currentClipUrl
+              }"
+            >
               <div
                 class="pulse-orb"
                 :class="{

src/styles.css

@@ -367,6 +367,19 @@ button {
   place-items: center;
   position: relative;
   min-height: 620px;
+  color: #7df9ff;
+}
+
+.player-body.playing {
+  animation: planetShift 4s linear infinite;
+}
+
+.player-body.answer {
+  color: #2bdc7b;
+}
+
+.player-body.idle {
+  color: #000;
 }
 
 audio.hidden-audio {
@@ -377,7 +390,7 @@ audio.hidden-audio {
   width: 96px;
   height: 96px;
   border-radius: 50%;
-  background: radial-gradient(circle at 30% 30%, #fbd72b, #f58b2b 60%, #1d3b8b);
+  background: currentColor;
   transform: translate(-50%, -50%) scale(calc(1 + var(--pulse, 0) * 0.9));
   box-shadow:
     0 0 calc(22px + var(--pulse, 0) * 140px) rgba(251, 215, 43, 0.6),
@@ -390,28 +403,12 @@ audio.hidden-audio {
 }
 
 .pulse-orb.idle {
-  background: radial-gradient(circle at 40% 40%, #1a1a1a, #000 65%);
   box-shadow: 0 0 12px rgba(0, 0, 0, 0.6);
   transform: translate(-50%, -50%) scale(1);
 }
 
-.pulse-orb.playing {
-  color: #7df9ff;
-  background: currentColor;
-  animation: planetShift 4s linear infinite, pulseGlow 1.6s ease-in-out infinite;
-  opacity: 1;
-}
-
-.pulse-orb.answer {
-  background: radial-gradient(circle at 30% 30%, #6bff9f, #1ecb5a 65%, #0b5c2b);
-  box-shadow:
-    0 0 calc(18px + var(--pulse, 0) * 90px) rgba(43, 220, 123, 0.6),
-    0 0 calc(40px + var(--pulse, 0) * 160px) rgba(43, 220, 123, 0.3);
-  animation: pulseGlow 1.6s ease-in-out infinite;
-}
-
 .pulse-orb.active {
-  animation: none;
+  animation: pulseGlow 1.6s ease-in-out infinite;
 }
 
 .pulse-tentacles {
@@ -451,16 +448,7 @@ audio.hidden-audio {
 }
 
 .pulse-tentacles.playing {
-  color: #7df9ff;
-  animation: planetShift 4s linear infinite;
-}
-
-.pulse-tentacles.answer {
-  color: #2bdc7b;
-}
-
-.pulse-tentacles.idle {
-  color: #000;
+  color: currentColor;
 }