update manifest

public/index.html

@@ -42,8 +42,7 @@
   <!-- channel sidebar -->
   <aside id="sidebar">
     <header id="server-name">
-      <img id="server-logo" src="/icons/icon-192.png" alt="" width="22" height="22" />
+      <span class="server-name-text">gibbz</span>
-      <span class="server-name-text">gibbz voice <span class="poc-tag">POC</span></span>
       <button id="btn-sidebar-collapse" class="icon-btn" title="Hide sidebar"><span class="material-symbols-outlined">left_panel_close</span></button>
     </header>
     <div class="channel-group-label">Text channels</div>

public/static/manifest.webmanifest

@@ -1,5 +1,5 @@
 {
-  "name": "gibbz voice",
+  "name": "gibbz",
   "short_name": "gibbz",
   "description": "Discord-style voice chat with screen sharing and spatial audio",
   "start_url": "/",

public/style.css

@@ -173,9 +173,29 @@ body.sidebar-collapsed #btn-sidebar-expand { display: grid; }
 #stage-empty {
   position: absolute; inset: 0; display: grid; place-content: center;
   text-align: center; gap: 8px; color: var(--text-1); padding: 24px;
+  isolation: isolate; overflow: hidden;
+}
+#stage-empty::before,
+#stage-empty::after {
+  content: ""; position: absolute; left: 50%; top: 50%; z-index: -2;
+  width: min(48vw, 440px); aspect-ratio: 1; border-radius: 50%;
+  transform: translate(-50%, -54%); pointer-events: none;
+}
+#stage-empty::before {
+  background: radial-gradient(circle, rgba(88,101,242,.13), rgba(88,101,242,0) 68%);
+}
+#stage-empty::after {
+  width: min(31vw, 280px); border: 1px solid rgba(88,101,242,.14);
+  box-shadow: 0 0 0 24px rgba(88,101,242,.035), 0 0 0 48px rgba(88,101,242,.025);
+}
+#stage-empty .big-icon {
+  position: absolute; left: 50%; top: 50%; z-index: -1;
+  color: rgba(139,148,255,.11); transform: translate(-50%, -57%) rotate(-8deg);
+  pointer-events: none;
+}
+#stage-empty .big-icon .material-symbols-outlined {
+  font-size: clamp(180px, 25vw, 330px); font-variation-settings: 'wght' 300;
 }
-#stage-empty .big-icon { font-size: 56px; }
-#stage-empty .big-icon .material-symbols-outlined { font-size: 64px; opacity: 0.6; }
 #stage-empty h2 { font-size: 20px; color: var(--text-0); }
 #stage-empty p { max-width: 420px; color: var(--text-2); }
 #stage.empty #stage-empty { display: grid; }