From a1ef3cf6ff127c527b35f7bfd8e5c7304abea2b5 Mon Sep 17 00:00:00 2001
From: Your Name <us01@sociowire.com>
Date: Sat, 24 Jan 2026 07:37:12 +0000
Subject: [PATCH] feat: Add universe tabs and planet marker CSS

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/styles/universe.css | 85 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 85 insertions(+)

diff --git a/src/styles/universe.css b/src/styles/universe.css
index 1e5df82..995377b 100644
--- a/src/styles/universe.css
+++ b/src/styles/universe.css
@@ -326,3 +326,88 @@ body[data-theme="light"] .island-universe-canvas {
     0 10px 40px rgba(0, 0, 0, 0.1),
     inset 0 0 0 1px rgba(30, 58, 138, 0.1);
 }
+
+/* ===== FILTER TABS ===== */
+
+.island-universe-tabs {
+  display: flex;
+  justify-content: center;
+  gap: 0.75rem;
+  margin-bottom: 1.5rem;
+}
+
+.universe-tab {
+  padding: 0.6rem 1.25rem;
+  border-radius: 25px;
+  background: rgba(255, 255, 255, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  color: rgba(255, 255, 255, 0.7);
+  font-size: 0.95rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.25s ease;
+}
+
+.universe-tab:hover {
+  background: rgba(255, 255, 255, 0.12);
+  color: #fff;
+  border-color: rgba(255, 255, 255, 0.25);
+}
+
+.universe-tab.is-active {
+  background: linear-gradient(135deg, rgba(96, 165, 250, 0.3), rgba(139, 92, 246, 0.3));
+  border-color: rgba(96, 165, 250, 0.5);
+  color: #fff;
+  box-shadow: 0 4px 15px rgba(96, 165, 250, 0.25);
+}
+
+body[data-theme="light"] .universe-tab {
+  background: rgba(30, 58, 138, 0.08);
+  border-color: rgba(30, 58, 138, 0.2);
+  color: rgba(30, 58, 138, 0.7);
+}
+
+body[data-theme="light"] .universe-tab:hover {
+  background: rgba(30, 58, 138, 0.12);
+  color: #1e3a8a;
+}
+
+body[data-theme="light"] .universe-tab.is-active {
+  background: linear-gradient(135deg, rgba(37, 99, 235, 0.2), rgba(99, 102, 241, 0.2));
+  border-color: rgba(37, 99, 235, 0.4);
+  color: #1e40af;
+}
+
+/* ===== PLANET MARKERS ===== */
+
+.universe-planet-marker {
+  cursor: pointer;
+  z-index: 5;
+}
+
+@keyframes universePlanetOrbit {
+  0%, 100% {
+    transform: translateY(0px) rotate(0deg);
+  }
+  25% {
+    transform: translateY(-8px) rotate(2deg);
+  }
+  50% {
+    transform: translateY(-3px) rotate(-1deg);
+  }
+  75% {
+    transform: translateY(-10px) rotate(1deg);
+  }
+}
+
+/* Responsive tabs */
+@media (max-width: 600px) {
+  .island-universe-tabs {
+    gap: 0.5rem;
+  }
+
+  .universe-tab {
+    padding: 0.5rem 0.9rem;
+    font-size: 0.85rem;
+  }
+}