Deploy Aether Garden application

app.py

@@ -96,9 +96,10 @@ def opening_gate_html() -> str:
             </div>
             <div class="realm-opening-inner">
                 <div class="realm-book-stage">
-                    <div class="realm-book-closed" id="realm-book-closed">
+                    <div class="realm-book-3d" id="realm-book-3d">
+                    <div class="realm-book-face realm-book-front" id="realm-book-closed">
                         <div class="realm-book-spine" aria-hidden="true"></div>
-                        <div class="realm-cover-card">
+                        <div class="realm-cover-card realm-cover-front">
                             <p class="realm-cover-kicker">Book of Ages, Vol. I</p>
                             <div class="realm-cover-calligraphy" aria-hidden="true"></div>
                             <h1 class="realm-cover-title"><span>AETHER</span><span>GARDEN</span></h1>
@@ -106,6 +107,15 @@ def opening_gate_html() -> str:
                             <button id="realm-opening-enter" type="button">Open The Tome</button>
                         </div>
                     </div>
+                    <div class="realm-book-face realm-book-back" id="realm-book-back" aria-hidden="true">
+                        <div class="realm-cover-card realm-cover-back">
+                            <div class="realm-back-ornament" aria-hidden="true">❧</div>
+                            <p class="realm-cover-kicker">End of Vol. I</p>
+                            <p class="realm-back-text">The Realm remembereth all things.<br/>Close the cover — until thou returnest.</p>
+                            <button id="realm-reopen-enter" type="button">Open The Tome</button>
+                        </div>
+                    </div>
+                    </div>
                     <div class="realm-book-open" id="realm-book-open" aria-hidden="true">
                         <div class="realm-book-page realm-book-page-left"></div>
                         <div class="realm-book-page realm-book-page-right"></div>
@@ -213,11 +223,15 @@ def _prewarm_oracle() -> None:
 
 def render_location_panel(location_id: int | None) -> str:
     if not location_id:
-        return '<div class="location-panel"><p class="feed-empty">Click a location on the map to explore.</p></div>'
+        return (
+            '<div id="location-panel-host" class="location-panel-host">'
+            '<p class="feed-empty map-hint">Click a glowing place on the map to unveil its secrets.</p>'
+            '</div>'
+        )
 
     location = get_location_by_id(location_id)
     if not location:
-        return ""
+        return '<div id="location-panel-host" class="location-panel-host"></div>'
 
     entities = get_entities_by_location(location_id)
     chips = "".join(
@@ -231,18 +245,23 @@ def render_location_panel(location_id: int | None) -> str:
     special = location.get("special_property", "")
 
     return f"""
-    <div class="location-panel location-panel-animate open">
-        <div class="location-panel-banner" style="{img_style}">
-            <div class="location-panel-scrim"></div>
-            <h3 class="location-panel-name">{location['name']}</h3>
-        </div>
-        <div class="location-panel-content">
-            <p class="location-panel-desc">{location['short_description']}</p>
-            <p class="location-panel-special">✦ {special}</p>
-            <p style="color: var(--realm-text-tertiary); font-size: 0.8rem; margin-bottom: 0.75rem;">
-                {len(entities)} souls currently here
-            </p>
-            <div class="location-entity-list">{chips}{more}</div>
+    <div id="location-panel-host" class="location-panel-host" data-open="1">
+        <div class="location-modal-overlay is-open" id="location-modal">
+            <div class="location-modal-card">
+                <div class="location-modal-close" role="button" tabindex="0" aria-label="Close">✕</div>
+                <div class="location-panel location-panel-animate open">
+                    <div class="location-panel-banner" style="{img_style}">
+                        <div class="location-panel-scrim"></div>
+                        <h3 class="location-panel-name">{location['name']}</h3>
+                    </div>
+                    <div class="location-panel-content">
+                        <p class="location-panel-desc">{location['short_description']}</p>
+                        <p class="location-panel-special">✦ {special}</p>
+                        <p class="location-soul-count">{len(entities)} souls currently here</p>
+                        <div class="location-entity-list">{chips}{more}</div>
+                    </div>
+                </div>
+            </div>
         </div>
     </div>
     """
@@ -341,8 +360,18 @@ def filter_entities(location_filter, type_filter, status_filter, search):
 
 
 def filter_book(day, entry_type, search):
+    from ui.book_display import parse_day_query
+
+    parsed = parse_day_query(search)
+    if parsed is not None:
+        day = parsed
+        search = ""
+    try:
+        day_int = int(day) if day is not None else None
+    except (TypeError, ValueError):
+        day_int = None
     return render_book_for_day(
-        day=int(day) if day else None,
+        day=day_int,
         entry_type=entry_type,
         search=search,
         limit=12,
@@ -616,10 +645,11 @@ def build_app() -> gr.Blocks:
             with gr.Tab("The Realm", id="realm"):
                 with gr.Column(elem_classes=["tome-spread-shell"]):
                     with gr.Row(elem_classes=["tome-spread-row"]):
-                        with gr.Column(scale=1, elem_classes=["tome-page-left", "tome-printed-page"]):
+                        with gr.Column(scale=1, elem_classes=["tome-page-left", "tome-printed-page", "tome-page-centered"]):
                             gr.HTML(
+                                '<div class="tome-ornament top" aria-hidden="true">✦ ─── ❧ ─── ✦</div>'
                                 '<p class="tome-printed-kicker">The Living Realm</p>'
-                                '<p class="tome-printed-hint">Tap a place on the map — its tale unfolds below.</p>'
+                                '<p class="tome-printed-hint">Tap a place on the map — a vision shall rise.</p>'
                             )
                             world_map = gr.HTML(
                                 value=render_world_map(),
@@ -627,9 +657,12 @@ def build_app() -> gr.Blocks:
                             )
                             location_panel = gr.HTML(
                                 value=render_location_panel(None),
+                                elem_id="location-panel-host-wrap",
                             )
+                            gr.HTML('<div class="tome-ornament bottom" aria-hidden="true">❧</div>')
 
-                        with gr.Column(scale=1, elem_classes=["tome-page-right", "tome-printed-page"]):
+                        with gr.Column(scale=1, elem_classes=["tome-page-right", "tome-printed-page", "tome-page-centered"]):
+                            gr.HTML('<div class="tome-ornament top" aria-hidden="true">✦ ─── ❧ ─── ✦</div>')
                             realm_stats = gr.HTML(value=render_realm_stats())
                             current_event = gr.HTML(value=render_current_event())
                             realm_pulse = gr.HTML(value=render_realm_pulse(limit=4))
@@ -668,6 +701,7 @@ def build_app() -> gr.Blocks:
                                 lines=2,
                                 interactive=True,
                             )
+                            gr.HTML('<div class="tome-ornament bottom" aria-hidden="true">❧</div>')
 
                 with gr.Column(elem_classes=["tome-offpage-store"]):
                     world_vignette = gr.HTML(value=render_world_vignette())
@@ -708,7 +742,11 @@ def build_app() -> gr.Blocks:
                 with gr.Column(elem_classes=["tome-spread-shell"]):
                     with gr.Row(elem_classes=["tome-spread-row"]):
                         with gr.Column(scale=1, elem_classes=["tome-page-left", "tome-printed-page", "tome-explore-index"]):
-                            place_ribbon = gr.HTML(value=render_place_ribbon(_default_loc_id))
+                            place_ribbon = gr.HTML(
+                                value=render_place_ribbon(_default_loc_id),
+                                container=False,
+                                padding=False,
+                            )
                             explore_place_pick = gr.Textbox(visible=False, elem_id="explore_place_pick")
                             wander_btn = gr.Button("✦ Wander at random", variant="secondary", size="sm")
 
@@ -717,7 +755,12 @@ def build_app() -> gr.Blocks:
                                 '<p class="tome-printed-kicker">You step inside</p>'
                                 '<p class="explore-controls-hint">WASD walk · drag look · E talk · golden wisps are live visitors</p>'
                             )
-                            diorama_view = gr.HTML(value=render_diorama(_default_loc_id))
+                            diorama_view = gr.HTML(
+                                value=render_diorama(_default_loc_id),
+                                container=False,
+                                padding=False,
+                                elem_id="explore-diorama-host",
+                            )
                             portal_pick = gr.Textbox(visible=False, elem_id="portal_location_pick")
 
                 with gr.Column(elem_classes=["tome-offpage-store"]):
@@ -752,6 +795,12 @@ def build_app() -> gr.Blocks:
                         with gr.Column(scale=1, elem_classes=["tome-page-left", "tome-printed-page", "tome-book-index"]):
                             day_tabs = gr.HTML(value=render_day_tabs(_init_book_day))
                             book_day_pick = gr.Textbox(visible=False, elem_id="book_day_pick")
+                            _day_choices = list(range(max(1, _init_book_day - 14), _init_book_day + 1))
+                            book_day_select = gr.Dropdown(
+                                choices=[(f"Day {d}", d) for d in reversed(_day_choices)],
+                                value=_init_book_day,
+                                label="Jump to day",
+                            )
                             book_filter = gr.Dropdown(
                                 choices=[
                                     ("All", "all"),
@@ -765,7 +814,7 @@ def build_app() -> gr.Blocks:
                                 label="Filter",
                             )
                             book_search = gr.Textbox(
-                                placeholder="Search by name...",
+                                placeholder='Search name… or type "Day 3"',
                                 label="Search",
                             )
                         with gr.Column(scale=1, elem_classes=["tome-page-right", "tome-printed-page"]):
@@ -777,12 +826,29 @@ def build_app() -> gr.Blocks:
                 with gr.Column(elem_classes=["tome-spread-shell"]):
                     with gr.Row(elem_classes=["tome-spread-row"]):
                         with gr.Column(scale=1, elem_classes=["tome-page-left", "tome-printed-page"]):
-                            bonds_sidebar = gr.HTML(value=render_bonds_sidebar())
+                            bonds_type_filter = gr.Dropdown(
+                                choices=[
+                                    ("All bonds", "all"),
+                                    ("Allied", "allied"),
+                                    ("Friends", "friends"),
+                                    ("Rivals", "rivals"),
+                                    ("Enemies", "enemies"),
+                                    ("Mentor", "mentor"),
+                                    ("Owes debt", "owes_debt"),
+                                    ("Curious", "curious"),
+                                ],
+                                value="all",
+                                label="Show connections",
+                            )
+                            bonds_sidebar = gr.HTML(
+                                value=render_bonds_sidebar(),
+                                container=False,
+                                padding=False,
+                            )
                         with gr.Column(scale=1, elem_classes=["tome-page-right", "tome-printed-page"]):
                             rel_graph = gr.HTML(value=render_relationship_graph())
 
             with gr.Tab("Souls of the Garden", id="entities"):
-                featured_chars = gr.HTML(value=render_featured_characters())
                 entity_pick = gr.Textbox(visible=False, elem_id="entity_pick")
 
                 with gr.Column(elem_classes=["tome-spread-shell"]):
@@ -810,9 +876,21 @@ def build_app() -> gr.Blocks:
                                     scale=1,
                                 )
                                 entity_search = gr.Textbox(placeholder="Search…", label="Find", scale=1)
-                            entity_grid = gr.HTML(value=render_entity_grid(get_all_entities()))
-                        with gr.Column(scale=1, elem_classes=["tome-page-right", "tome-printed-page"]):
-                            entity_detail = gr.HTML(value=render_entity_hologram(None))
+                            entity_grid = gr.HTML(
+                                value=render_entity_grid(get_all_entities()),
+                                container=False,
+                                padding=False,
+                            )
+                        with gr.Column(scale=1, elem_classes=["tome-page-right", "tome-printed-page", "tome-souls-stage"]):
+                            _first_ent = get_all_entities(limit=1)
+                            entity_detail = gr.HTML(
+                                value=render_entity_hologram(_first_ent[0] if _first_ent else None),
+                                container=False,
+                                padding=False,
+                            )
+
+                with gr.Column(elem_classes=["tome-offpage-store"]):
+                    featured_chars = gr.HTML(value=render_featured_characters())
 
         _summon_outputs = [
             world_map, header, activity_feed, entity_result, location_panel,
@@ -994,14 +1072,37 @@ def build_app() -> gr.Blocks:
                 day = int(day_state or 1)
             return day, render_day_tabs(day), filter_book(day, entry_type, search)
 
+        def _book_day_select_change(day_val, entry_type, search):
+            try:
+                day = int(day_val)
+            except (TypeError, ValueError):
+                state = get_world_state()
+                day = int(state.get("current_day", 1) or 1)
+            return day, render_day_tabs(day), filter_book(day, entry_type, search)
+
         book_day_pick.change(
             _book_day_change,
             [book_day_pick, book_day, book_filter, book_search],
             [book_day, day_tabs, book_display],
+        ).then(
+            lambda d: d,
+            inputs=[book_day],
+            outputs=[book_day_select],
+        )
+        book_day_select.change(
+            _book_day_select_change,
+            [book_day_select, book_filter, book_search],
+            [book_day, day_tabs, book_display],
         )
         book_filter.change(filter_book, [book_day, book_filter, book_search], [book_display])
         book_search.change(filter_book, [book_day, book_filter, book_search], [book_display])
 
+        bonds_type_filter.change(
+            render_bonds_sidebar,
+            [bonds_type_filter],
+            [bonds_sidebar],
+        )
+
         for f in [loc_filter, type_filter, status_filter, entity_search]:
             f.change(
                 filter_entities,
@@ -1144,29 +1245,34 @@ def build_app() -> gr.Blocks:
 
                     const closeBook = () => {
                         const gate = document.getElementById('realm-opening');
+                        const book3d = document.getElementById('realm-book-3d');
                         if (!gate) return;
                         gate.classList.remove('is-closed', 'is-opened', 'is-prologue', 'is-unfolded', 'is-unfolding');
-                        gate.classList.add('is-reclosed');
-                        const closedBook = document.getElementById('realm-book-closed');
+                        gate.classList.add('is-closing', 'is-reclosed');
                         const openBook = document.getElementById('realm-book-open');
                         const prologue = document.getElementById('realm-prologue');
-                        if (closedBook) {
-                            closedBook.classList.remove('is-opening');
-                            closedBook.style.opacity = '';
-                            closedBook.style.pointerEvents = '';
-                        }
                         if (openBook) openBook.setAttribute('aria-hidden', 'true');
                         if (prologue) {
                             prologue.classList.remove('visible');
                             prologue.setAttribute('aria-hidden', 'true');
                         }
+                        if (book3d) {
+                            book3d.classList.remove('is-opening');
+                            setTimeout(() => book3d.classList.add('show-back'), prefersReduced ? 0 : 80);
+                        }
+                        setTimeout(() => {
+                            gate.classList.remove('is-closing');
+                            gate.classList.add('is-back-visible');
+                        }, prefersReduced ? 60 : 1150);
                         applyTurnFx('prev');
                     };
 
                     const reopenBook = () => {
                         const gate = document.getElementById('realm-opening');
+                        const book3d = document.getElementById('realm-book-3d');
                         if (!gate) return;
-                        gate.classList.remove('is-reclosed');
+                        if (book3d) book3d.classList.remove('show-back', 'is-opening');
+                        gate.classList.remove('is-reclosed', 'is-back-visible', 'is-closing');
                         gate.classList.add('is-opened', 'is-closed');
                         playOpeningChime();
                     };
@@ -1323,6 +1429,7 @@ def build_app() -> gr.Blocks:
                         if (!gate || gate.dataset.bound) return;
                         gate.dataset.bound = '1';
 
+                        const book3d = document.getElementById('realm-book-3d');
                         const closedBook = document.getElementById('realm-book-closed');
                         const openBook = document.getElementById('realm-book-open');
                         const prologue = document.getElementById('realm-prologue');
@@ -1388,7 +1495,7 @@ def build_app() -> gr.Blocks:
                         const beginUnfold = () => {
                             playOpeningChime();
                             gate.classList.add('is-unfolding');
-                            if (closedBook) closedBook.classList.add('is-opening');
+                            if (book3d) book3d.classList.add('is-opening');
                             if (openBook) openBook.setAttribute('aria-hidden', 'false');
                             setTimeout(() => {
                                 gate.classList.add('is-unfolded', 'is-prologue');
@@ -1403,7 +1510,8 @@ def build_app() -> gr.Blocks:
                         gate.addEventListener('click', (e) => {
                             const target = e.target;
                             if (!(target instanceof Element)) return;
-                            if (gate.classList.contains('is-reclosed') && target.id === 'realm-opening-enter') {
+                            if (gate.classList.contains('is-reclosed') &&
+                                (target.id === 'realm-opening-enter' || target.id === 'realm-reopen-enter')) {
                                 e.preventDefault();
                                 e.stopPropagation();
                                 reopenBook();
@@ -1461,19 +1569,31 @@ def build_app() -> gr.Blocks:
             }
           };
 
+          const wireClickable = (el, handler) => {
+            if (!el || el.dataset.boundClick) return;
+            el.dataset.boundClick = '1';
+            el.addEventListener('click', handler);
+            el.addEventListener('keydown', (e) => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                handler(e);
+              }
+            });
+          };
+
+          const closeLocationModal = () => {
+            document.querySelectorAll('.location-modal-overlay').forEach((m) => m.classList.remove('is-open'));
+          };
+
           const bindSpreadClicks = () => {
             document.querySelectorAll('.place-ribbon-item').forEach((btn) => {
-              if (btn.dataset.ribbonBound) return;
-              btn.dataset.ribbonBound = '1';
-              btn.addEventListener('click', () => {
+              wireClickable(btn, () => {
                 const id = btn.getAttribute('data-location-id');
                 if (id) fireHiddenInput('#explore_place_pick', id);
               });
             });
             document.querySelectorAll('.day-tab').forEach((btn) => {
-              if (btn.dataset.dayBound) return;
-              btn.dataset.dayBound = '1';
-              btn.addEventListener('click', () => {
+              wireClickable(btn, () => {
                 const day = btn.getAttribute('data-day');
                 if (day) fireHiddenInput('#book_day_pick', day);
               });
@@ -1482,16 +1602,36 @@ def build_app() -> gr.Blocks:
               if (card.dataset.entityBound) return;
               card.dataset.entityBound = '1';
               card.style.cursor = 'pointer';
-              card.addEventListener('click', () => {
+              wireClickable(card, () => {
                 const id = card.getAttribute('data-entity-id');
                 if (id) fireHiddenInput('#entity_pick', id);
               });
             });
+            document.querySelectorAll('.location-modal-close').forEach((btn) => {
+              wireClickable(btn, closeLocationModal);
+            });
+            document.querySelectorAll('.location-modal-overlay').forEach((overlay) => {
+              if (overlay.dataset.overlayBound) return;
+              overlay.dataset.overlayBound = '1';
+              overlay.addEventListener('click', (e) => {
+                if (e.target === overlay) closeLocationModal();
+              });
+            });
+          };
+
+          const showLocationModal = () => {
+            const host = document.querySelector('#location-panel-host, [data-open="1"] .location-modal-overlay, .location-modal-overlay');
+            const modal = document.querySelector('.location-modal-overlay');
+            if (modal) modal.classList.add('is-open');
           };
 
           bind();
           bindSpreadClicks();
-          new MutationObserver(() => { bind(); bindSpreadClicks(); }).observe(document.body, { childList: true, subtree: true });
+          new MutationObserver(() => {
+            bind();
+            bindSpreadClicks();
+            if (document.querySelector('.location-modal-overlay .location-panel-name')) showLocationModal();
+          }).observe(document.body, { childList: true, subtree: true });
 
           window._aetherHoverDiorama = false;
           window._aetherDioramaActive = false;

ui/book_display.py

@@ -2,7 +2,7 @@
 
 from __future__ import annotations
 
-from world.book_of_ages import get_entries
+from world.book_of_ages import get_entries, get_entries_by_day
 from world.database import get_world_state
 
 ENTRY_TYPE_LABELS = {
@@ -95,7 +95,7 @@ def render_day_tabs(selected_day: int | None = None) -> str:
     for day in reversed(days):
         sel = " is-active" if day == selected_day else ""
         buttons.append(
-            f'<button type="button" class="day-tab{sel}" data-day="{day}">Day {day}</button>'
+            f'<div class="day-tab{sel}" role="button" tabindex="0" data-day="{day}">Day {day}</div>'
         )
 
     return f"""
@@ -108,6 +108,21 @@ def render_day_tabs(selected_day: int | None = None) -> str:
     """
 
 
+def parse_day_query(text: str | None) -> int | None:
+    """Parse 'Day 3', 'day3', or '3' from user input."""
+    if not text or not str(text).strip():
+        return None
+    import re
+
+    raw = str(text).strip()
+    m = re.match(r"^day\s*(\d+)$", raw, re.I)
+    if m:
+        return int(m.group(1))
+    if raw.isdigit():
+        return int(raw)
+    return None
+
+
 def render_book_for_day(
     day: int | None = None,
     entry_type: str = "all",
@@ -119,12 +134,25 @@ def render_book_for_day(
         state = get_world_state()
         day = int(state.get("current_day", 1) or 1)
 
-    entries = get_entries(
-        limit=limit * 3,
-        entry_type=entry_type if entry_type != "all" else None,
-        search=search or None,
-    )
-    entries = [e for e in entries if e["world_day"] == day][:limit]
+    try:
+        day = int(day)
+    except (TypeError, ValueError):
+        state = get_world_state()
+        day = int(state.get("current_day", 1) or 1)
+
+    parsed = parse_day_query(search)
+    if parsed is not None:
+        day = parsed
+        search = ""
+
+    entries = get_entries_by_day(day)
+    if entry_type and entry_type != "all":
+        entries = [e for e in entries if e["entry_type"] == entry_type]
+    if search:
+        q = search.lower()
+        entries = [e for e in entries if q in (e.get("content") or "").lower()
+                   or q in (e.get("title") or "").lower()]
+    entries = entries[:limit]
 
     if not entries:
         return f"""

ui/place_ribbon.py

@@ -20,18 +20,20 @@ def render_place_ribbon(selected_id: int | None = None) -> str:
             else '<span class="ribbon-thumb ribbon-thumb-empty"></span>'
         )
         items.append(f"""
-        <button type="button" class="place-ribbon-item{sel}" data-location-id="{loc['id']}"
-                title="{loc['name']}">
+        <div class="place-ribbon-item{sel}" role="button" tabindex="0"
+             data-location-id="{loc['id']}" title="{loc['name']}">
           {thumb}
           <span class="ribbon-label">{short}</span>
           <span class="ribbon-count">{loc.get('entity_count', 0)} souls</span>
-        </button>
+        </div>
         """)
 
     return f"""
     <div class="place-ribbon">
+      <div class="tome-ornament top" aria-hidden="true">✦ ─── ❧ ─── ✦</div>
       <p class="place-ribbon-kicker">Sacred Places</p>
       <p class="place-ribbon-hint">Choose a realm — the world opens on the right page.</p>
       <div class="place-ribbon-list">{"".join(items)}</div>
+      <div class="tome-ornament bottom" aria-hidden="true">❧</div>
     </div>
     """

ui/relationship_graph.py

@@ -242,13 +242,21 @@ def render_relationship_graph(selected_entity_id: str | None = None) -> str:
     return render_bonds_graph_frame(src)
 
 
-def render_bonds_sidebar() -> str:
+def render_bonds_sidebar(rel_type: str = "all") -> str:
     relationships = get_all_relationships()
+    if rel_type and rel_type != "all":
+        relationships = [r for r in relationships if r["relationship_type"] == rel_type]
+
     if not relationships:
-        return """
+        empty = (
+            "No bonds of this kind yet — try another thread type."
+            if rel_type and rel_type != "all"
+            else "No alliances forged yet — wait for the next realm tick."
+        )
+        return f"""
         <div class="bonds-sidebar">
           <p class="tome-printed-kicker">The Web of Bonds</p>
-          <p class="bonds-sidebar-empty">No alliances forged yet — wait for the next realm tick.</p>
+          <p class="bonds-sidebar-empty">{empty}</p>
         </div>
         """
 
@@ -257,17 +265,19 @@ def render_bonds_sidebar() -> str:
         for k, c in REL_COLORS.items()
     )
     rel_list = []
-    for rel in relationships[:12]:
+    for rel in relationships[:10]:
         t = TYPE_SHORT.get(rel["relationship_type"], rel["relationship_type"])
+        desc = (rel.get("description") or "A bond still forming…")[:72]
         rel_list.append(
             f'<li><b>{rel["entity_a_name"]}</b> ↔ <b>{rel["entity_b_name"]}</b> '
-            f'· {t} — <em>{rel["description"][:72]}</em></li>'
+            f'· {t} — <em>{desc}</em></li>'
         )
 
+    total = len(get_all_relationships())
     return f"""
     <div class="bonds-sidebar">
       <p class="tome-printed-kicker">The Web of Bonds</p>
-      <p class="bonds-sidebar-desc">{len(relationships)} threads between living souls.</p>
+      <p class="bonds-sidebar-desc">{len(relationships)} shown · {total} threads total</p>
       <div class="rel-legend">{legend}</div>
       <ul class="rel-list">{"".join(rel_list)}</ul>
     </div>

ui/styles.css

@@ -4347,10 +4347,278 @@ body,
 .tome-printed-page .current-event,
 .tome-printed-page .realm-pulse,
 .tome-printed-page .activity-feed,
-.tome-printed-page .location-panel,
 .tome-printed-page .book-container,
 .tome-printed-page .entity-hologram-empty .hologram-stage {
     background: rgba(255, 249, 232, 0.62) !important;
     box-shadow: none !important;
     border: 1px solid rgba(138, 106, 58, 0.22) !important;
 }
+
+/* ── Centered spread pages with ornaments ── */
+.tome-page-centered {
+    justify-content: center !important;
+    gap: 0.45rem !important;
+}
+
+.tome-ornament {
+    text-align: center;
+    font-family: 'Cinzel', serif;
+    font-size: 0.72rem;
+    letter-spacing: 0.22em;
+    color: rgba(122, 90, 40, 0.55);
+    margin: 0.15rem 0;
+    flex-shrink: 0;
+}
+
+.tome-ornament.top { margin-bottom: 0.35rem; }
+.tome-ornament.bottom { margin-top: auto; padding-top: 0.35rem; }
+
+/* ── Location popup modal ── */
+.location-panel-host {
+    position: relative;
+    min-height: 0;
+}
+
+.location-panel-host .map-hint {
+    text-align: center;
+    font-family: 'IM Fell English', serif;
+    font-style: italic;
+    color: #5c4228;
+    padding: 0.5rem;
+}
+
+.location-modal-overlay {
+    display: none;
+    position: fixed;
+    inset: 0;
+    z-index: 8800;
+    background: rgba(12, 8, 5, 0.72);
+    backdrop-filter: blur(4px);
+    align-items: center;
+    justify-content: center;
+    padding: 1rem;
+}
+
+.location-modal-overlay.is-open {
+    display: flex;
+    animation: modalFadeIn 0.35s ease;
+}
+
+@keyframes modalFadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+.location-modal-card {
+    position: relative;
+    width: min(420px, 92vw);
+    max-height: min(78vh, 560px);
+    overflow: auto;
+    border-radius: 14px;
+    transform: perspective(900px) rotateX(6deg) scale(0.98);
+    animation: modalPop 0.42s cubic-bezier(0.34, 1.2, 0.64, 1);
+    box-shadow:
+        0 28px 64px rgba(0, 0, 0, 0.55),
+        0 0 40px rgba(201, 161, 59, 0.15);
+}
+
+@keyframes modalPop {
+    from { opacity: 0; transform: perspective(900px) rotateX(14deg) translateY(24px) scale(0.92); }
+    to { opacity: 1; transform: perspective(900px) rotateX(6deg) scale(0.98); }
+}
+
+.location-modal-close {
+    position: absolute;
+    top: 0.55rem;
+    right: 0.65rem;
+    z-index: 3;
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    background: rgba(20, 12, 8, 0.65);
+    color: #f4e8c8;
+    display: grid;
+    place-items: center;
+    cursor: pointer;
+    font-size: 0.9rem;
+    border: 1px solid rgba(201, 161, 59, 0.35);
+}
+
+.location-modal-card .location-panel {
+    margin: 0 !important;
+    border: none !important;
+    box-shadow: none !important;
+}
+
+.location-soul-count {
+    color: #5c4228;
+    font-size: 0.8rem;
+    margin-bottom: 0.75rem;
+    font-family: 'IM Fell English', serif;
+}
+
+/* ── Explore spread — force 3D diorama visible ── */
+.tome-explore-index,
+.tome-explore-stage {
+    display: flex !important;
+    flex-direction: column !important;
+    min-height: 0 !important;
+    flex: 1 1 auto !important;
+}
+
+.tome-explore-index .place-ribbon {
+    flex: 1 1 auto;
+    min-height: 180px;
+}
+
+.tome-explore-index .place-ribbon-list {
+    flex: 1 1 auto;
+    min-height: 140px;
+    max-height: 380px;
+}
+
+.tome-explore-stage > .block,
+.tome-explore-stage > .form,
+.tome-explore-stage #explore-diorama-host,
+.tome-explore-stage #explore-diorama-host > div {
+    flex: 1 1 auto !important;
+    min-height: 260px !important;
+    display: flex !important;
+    flex-direction: column !important;
+}
+
+.tome-explore-stage .diorama-wrap {
+    flex: 1 1 auto !important;
+    min-height: 260px !important;
+    max-height: 100% !important;
+    margin: 0 !important;
+    display: flex !important;
+    flex-direction: column !important;
+}
+
+.tome-explore-stage .diorama-header {
+    display: none !important;
+}
+
+.tome-explore-stage .diorama-stage {
+    flex: 1 1 auto !important;
+    min-height: 240px !important;
+}
+
+.tome-explore-stage .diorama-frame {
+    min-height: 240px !important;
+    height: 100% !important;
+    max-height: 400px !important;
+}
+
+.tome-explore-stage .diorama-empty {
+    flex: 1 1 auto;
+    min-height: 240px;
+    display: grid;
+    place-items: center;
+    padding: 1rem;
+    text-align: center;
+    border: 1px dashed rgba(138, 106, 58, 0.35);
+    border-radius: 12px;
+    font-family: 'IM Fell English', serif;
+}
+
+/* ── Souls spread fix ── */
+.tome-souls-index,
+.tome-souls-stage {
+    display: flex !important;
+    flex-direction: column !important;
+    min-height: 0 !important;
+}
+
+.tome-souls-index .entity-grid {
+    flex: 1 1 auto;
+    max-height: none;
+    min-height: 200px;
+}
+
+.tome-souls-stage .entity-hologram {
+    flex: 1 1 auto;
+    min-height: 280px;
+}
+
+#tome-spreads [role="tabpanel"]:has(#entities) .featured-section {
+    display: none !important;
+}
+
+/* ── Book 3D cover flip ── */
+.realm-book-3d {
+    position: relative;
+    width: min(440px, 90vw);
+    min-height: min(520px, 72vh);
+    transform-style: preserve-3d;
+    transition: transform 1.15s cubic-bezier(0.45, 0, 0.2, 1);
+}
+
+.realm-book-3d.show-back {
+    transform: rotateY(180deg);
+}
+
+.realm-book-3d.is-opening {
+    opacity: 0;
+    transform: rotateY(-12deg) translateZ(-30px);
+    pointer-events: none;
+}
+
+.realm-book-face {
+    position: absolute;
+    inset: 0;
+    backface-visibility: hidden;
+    -webkit-backface-visibility: hidden;
+}
+
+.realm-book-back {
+    transform: rotateY(180deg);
+}
+
+.realm-cover-back {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-height: min(480px, 70vh);
+    background:
+        radial-gradient(circle at 30% 20%, rgba(255, 240, 198, 0.08), transparent 32%),
+        radial-gradient(circle at 70% 80%, rgba(0, 0, 0, 0.28), transparent 40%),
+        linear-gradient(155deg, #3d2616 0%, #24150c 42%, #120a06 100%) !important;
+}
+
+.realm-back-ornament {
+    font-size: 2.4rem;
+    color: rgba(201, 161, 59, 0.45);
+    margin-bottom: 0.75rem;
+}
+
+.realm-back-text {
+    font-family: 'IM Fell English', serif;
+    font-style: italic;
+    color: #d8c49a;
+    line-height: 1.55;
+    margin: 0 0 1.25rem;
+    max-width: 22rem;
+}
+
+.realm-opening.is-reclosed .realm-book-stage {
+    display: flex !important;
+    align-items: center;
+    justify-content: center;
+}
+
+.realm-opening.is-reclosed .realm-book-3d {
+    opacity: 1 !important;
+    pointer-events: auto !important;
+}
+
+.realm-opening.is-closing .realm-book-stage {
+    perspective: 1400px;
+}
+
+.realm-opening.is-back-visible .realm-book-open,
+.realm-opening.is-back-visible .realm-prologue-card {
+    display: none !important;
+}