avatars plus other changes

assets/styles/hidden-details.css

@@ -49,8 +49,9 @@
 }
 
 .hidden-avatar {
-    width: 2rem;
-    height: 2rem;
+    --hidden-avatar-size: 2rem;
+    width: var(--hidden-avatar-size);
+    height: var(--hidden-avatar-size);
     display: inline-grid;
     place-items: center;
     flex: 0 0 auto;
@@ -60,13 +61,40 @@
         0 0 18px color-mix(in oklab, var(--hidden-avatar-color, var(--accent)) 18%, transparent);
     overflow: hidden;
     animation: hidden-avatar-breathe 6s ease-in-out infinite;
+    transition: box-shadow 180ms ease, filter 180ms ease, transform 180ms ease;
 }
 
-.hidden-avatar svg {
+.hidden-avatar--tiny { --hidden-avatar-size: 1.35rem; }
+.hidden-avatar--small { --hidden-avatar-size: 2rem; }
+.hidden-avatar--medium { --hidden-avatar-size: 2.75rem; }
+.hidden-avatar--large { --hidden-avatar-size: 4rem; }
+
+.hidden-avatar img,
+.hidden-avatar__fallback {
     width: 100%;
     height: 100%;
     display: block;
-    shape-rendering: geometricPrecision;
+}
+
+.hidden-avatar img {
+    object-fit: cover;
+    border-radius: inherit;
+}
+
+.hidden-avatar__fallback {
+    place-items: center;
+    color: color-mix(in oklab, var(--hidden-avatar-color, var(--accent)) 38%, var(--fg));
+    font-weight: 850;
+}
+
+.hidden-avatar__fallback:not([hidden]) {
+    display: grid;
+}
+
+.hidden-avatar:hover {
+    box-shadow: 0 0 0 1px color-mix(in oklab, var(--hidden-avatar-color, var(--accent)) 54%, color-mix(in oklab, #fff 20%, transparent)),
+        0 0 24px color-mix(in oklab, var(--hidden-avatar-color, var(--accent)) 28%, transparent);
+    filter: saturate(1.08);
 }
 
 .hidden-toast.is-visible {

assets/styles/play.css

@@ -502,6 +502,7 @@
   --ritual-red: #d06b78;
   --ritual-green: #7fb089;
   --ritual-violet: #a58ac9;
+  --active-avatar-glow: var(--ritual-gold);
 }
 
 .observatory-panel {
@@ -519,6 +520,7 @@
     radial-gradient(circle at 50% 50%, rgba(214, 179, 106, 0.16), transparent 12%),
     radial-gradient(circle at 28% 34%, rgba(117, 169, 189, 0.14), transparent 18%),
     radial-gradient(circle at 72% 70%, rgba(208, 107, 120, 0.12), transparent 16%),
+    radial-gradient(circle at 50% 48%, color-mix(in oklab, var(--active-avatar-glow) 14%, transparent), transparent 26%),
     repeating-radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 58px),
     var(--ritual-sky);
 }
@@ -547,6 +549,8 @@
   font-weight: 900;
   transform: translate(-50%, -50%);
   box-shadow: 0 0 18px rgba(214, 179, 106, 0.28);
+  transition: width 180ms ease, height 180ms ease, box-shadow 180ms ease, transform 180ms ease, filter 180ms ease;
+  animation: observatory-breathe 7s ease-in-out infinite;
 }
 
 .observatory-star:hover,
@@ -554,9 +558,10 @@
   background: radial-gradient(circle, #fff8e8 0 18%, var(--ritual-red) 19% 56%, rgba(208, 107, 120, 0.22) 57% 100%);
   color: #fff8e8;
   box-shadow: 0 0 28px rgba(208, 107, 120, 0.46);
+  filter: saturate(1.08);
 }
 
-.observatory-star span {
+.observatory-star > span:not(.observatory-avatar) {
   display: grid;
   place-items: center;
   width: 100%;
@@ -565,6 +570,110 @@
   text-transform: uppercase;
 }
 
+.observatory-avatar {
+  --avatar-size: 2rem;
+  display: inline-grid;
+  place-items: center;
+  width: var(--avatar-size);
+  height: var(--avatar-size);
+  flex: 0 0 auto;
+  border-radius: 50%;
+  overflow: hidden;
+  background: color-mix(in oklab, var(--avatar-glow, var(--ritual-gold)) 20%, #17130f);
+  box-shadow: 0 0 0 1px color-mix(in oklab, var(--avatar-glow, var(--ritual-gold)) 54%, rgba(255, 248, 232, 0.28)),
+    0 0 20px color-mix(in oklab, var(--avatar-glow, var(--ritual-gold)) 28%, transparent);
+}
+
+.observatory-avatar--marker { --avatar-size: 100%; }
+.observatory-avatar--tiny { --avatar-size: 1.35rem; }
+.observatory-avatar--small { --avatar-size: 2rem; }
+.observatory-avatar--medium { --avatar-size: 2.75rem; }
+.observatory-avatar--large { --avatar-size: 4rem; }
+
+.observatory-avatar img,
+.observatory-avatar__fallback {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.observatory-avatar img {
+  object-fit: cover;
+  border-radius: inherit;
+}
+
+.observatory-avatar__fallback:not([hidden]) {
+  display: grid;
+  place-items: center;
+  color: #fff8e8;
+  font-weight: 900;
+}
+
+.observatory-star-avatar {
+  position: absolute;
+  inset: 0;
+  opacity: 0.76;
+}
+
+.observatory-star-avatar.distant {
+  opacity: 0.42;
+  transform: scale(0.58);
+}
+
+.observatory-star-avatar.medium {
+  opacity: 0.82;
+  transform: scale(0.9);
+}
+
+.observatory-star-avatar.close,
+.observatory-star-avatar.focus {
+  opacity: 1;
+  transform: scale(1.08);
+}
+
+.observatory-star-avatar.focus {
+  transform: scale(1.22);
+  box-shadow: 0 0 0 2px rgba(255, 248, 232, 0.42), 0 0 34px color-mix(in oklab, var(--avatar-glow, var(--ritual-gold)) 48%, transparent);
+}
+
+.observatory-star-label {
+  position: absolute;
+  left: 50%;
+  top: calc(100% + 0.38rem);
+  width: max-content;
+  max-width: 13rem;
+  height: auto !important;
+  padding: 0.18rem 0.42rem;
+  border-radius: 999px;
+  background: rgba(23, 19, 15, 0.72);
+  color: #fff8e8;
+  font-size: 0.68rem !important;
+  line-height: 1.25;
+  opacity: 0;
+  pointer-events: none;
+  text-transform: none !important;
+  transform: translateX(-50%) translateY(-2px);
+  transition: opacity 160ms ease, transform 160ms ease;
+}
+
+.observatory-star:hover .observatory-star-label,
+.observatory-star.is-active .observatory-star-label {
+  opacity: 1;
+  transform: translateX(-50%) translateY(0);
+}
+
+.observatory-thread-row,
+.return-memory-head,
+.symbol-chip-head {
+  display: flex;
+  align-items: center;
+  gap: 0.55rem;
+}
+
+.observatory-thread-row {
+  margin: 0.45rem 0;
+}
+
 .observatory-drawer,
 .dream-sentence {
   padding: 1rem;
@@ -591,6 +700,16 @@
   gap: 0.35rem;
   min-height: 100px;
   text-align: left;
+  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
+}
+
+.return-memory:hover,
+.return-memory:focus-visible,
+.symbol-chip:hover,
+.symbol-chip:focus-visible {
+  border-color: color-mix(in oklab, var(--active-avatar-glow, var(--ritual-gold)) 38%, var(--border));
+  box-shadow: 0 0 18px color-mix(in oklab, var(--active-avatar-glow, var(--ritual-gold)) 18%, transparent);
+  transform: translateY(-1px);
 }
 
 .return-memory span,
@@ -610,6 +729,7 @@
   text-align: left;
   background:
     linear-gradient(135deg, color-mix(in oklab, var(--surface) 88%, var(--ritual-blue) 12%), var(--surface));
+  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
 }
 
 .symbol-chip.is-active {
@@ -617,6 +737,11 @@
   color: #fff8e8;
 }
 
+@keyframes observatory-breathe {
+  0%, 100% { box-shadow: 0 0 18px rgba(214, 179, 106, 0.24); }
+  50% { box-shadow: 0 0 26px rgba(214, 179, 106, 0.4); }
+}
+
 .symbol-chip.is-active span {
   color: rgba(255, 248, 232, 0.72);
 }