Deploy Aether Garden application

app.py

@@ -31,8 +31,15 @@ from world.locations import get_all_locations, get_location_by_id, update_entity
 from ai.generation import generate_entity
 from persistence.backup import backup_database, restore_database
 from ui import assets
-from ui.book_display import render_activity_feed, render_book_of_ages, render_current_event
-from ui.entity_card import render_entity_card, render_entity_grid
+from ui.book_display import (
+    render_activity_feed,
+    render_book_for_day,
+    render_book_of_ages,
+    render_current_event,
+    render_day_tabs,
+)
+from ui.entity_card import render_entity_card, render_entity_grid, render_entity_hologram
+from ui.place_ribbon import render_place_ribbon
 from ui.explore import (
     place_gallery_items,
     place_ids,
@@ -46,7 +53,7 @@ from ui.featured import render_featured_characters, render_world_vignette
 from ui.hero import render_hero_banner
 from ui.map import render_world_map
 from ui.pulse import render_realm_pulse
-from ui.relationship_graph import render_relationship_graph
+from ui.relationship_graph import render_bonds_sidebar, render_relationship_graph
 from ui.share import build_soul_card, share_caption
 
 CSS_PATH = Path(__file__).parent / "ui" / "styles.css"
@@ -127,7 +134,6 @@ def opening_gate_html() -> str:
                     <button class="realm-toc-link" data-spread="book">III. The Book of Ages</button>
                     <button class="realm-toc-link" data-spread="entities">IV. Souls of the Garden</button>
                     <button class="realm-toc-link" data-spread="bonds">V. Bonds and Alliances</button>
-                    <button class="realm-toc-link" data-spread="summon">VI. Summon a New Soul</button>
                 </div>
             </div>
         </div>
@@ -255,7 +261,8 @@ def _summon_error(message: str):
         render_location_panel(None),
         _HIDE_CARD,
         _HIDE_CAPTION,
-        "",
+        render_realm_pulse(),
+        render_realm_stats(),
     )
 
 
@@ -296,7 +303,8 @@ def summon_entity(description: str, session_id: str):
         render_location_panel(entity["location_id"]),
         card_update,
         caption_update,
-        render_diorama(entity["location_id"]),
+        render_realm_pulse(),
+        render_realm_stats(),
     )
 
 
@@ -332,15 +340,39 @@ def filter_entities(location_filter, type_filter, status_filter, search):
     return render_entity_grid(entities)
 
 
-def filter_book(entry_type, search):
-    return render_book_of_ages(
+def filter_book(day, entry_type, search):
+    return render_book_for_day(
+        day=int(day) if day else None,
         entry_type=entry_type,
         search=search,
-        limit=8,
-        include_header=False,
+        limit=12,
     )
 
 
+def select_entity_by_id(entity_id: str):
+    if not entity_id:
+        return render_entity_hologram(None)
+    from world.entities import get_entity
+
+    entity = get_entity(entity_id)
+    if not entity:
+        return render_entity_hologram(None)
+    return render_entity_hologram(entity)
+
+
+def render_realm_stats() -> str:
+    state = get_world_state()
+    day = int(state.get("current_day", 1) or 1)
+    count = len(get_all_entities())
+    return f"""
+    <div class="realm-stats-strip">
+      <span>World Day <b>{day}</b></span>
+      <span>{count} souls awake</span>
+      <span>8 sacred places</span>
+    </div>
+    """
+
+
 def chat_with_soul(soul_id: str, player_message: str) -> str:
     """AI response from a soul given a visitor's message. Called from diorama iframe."""
     if not soul_id or not player_message or not player_message.strip():
@@ -514,28 +546,48 @@ def refresh_all_views():
 _SOUL_HINT = '<div class="feed-empty">Click a soul above to meet them.</div>'
 
 
+def _explore_scene(loc_id: int | None):
+    if not loc_id:
+        return (
+            render_diorama(None),
+            render_room(None),
+            gr.update(value=[]),
+            [],
+            _SOUL_HINT,
+            render_place_ribbon(None),
+        )
+    items, soul_ids = soul_gallery(loc_id)
+    return (
+        render_diorama(loc_id),
+        render_room(loc_id),
+        gr.update(value=items),
+        soul_ids,
+        _SOUL_HINT,
+        render_place_ribbon(loc_id),
+    )
+
+
 def enter_place(evt: gr.SelectData):
     ids = place_ids()
     if evt.index is None or evt.index >= len(ids):
-        return None, render_diorama(None), render_room(None), gr.update(value=[]), [], _SOUL_HINT
+        return (None, *_explore_scene(None))
     loc_id = ids[evt.index]
-    items, soul_ids = soul_gallery(loc_id)
-    return loc_id, render_diorama(loc_id), render_room(loc_id), gr.update(value=items), soul_ids, _SOUL_HINT
+    return (loc_id, *_explore_scene(loc_id))
 
 
 def wander_to_place():
     loc_id = random_place_id()
     if not loc_id:
-        return None, render_diorama(None), render_room(None), gr.update(value=[]), [], _SOUL_HINT
-    items, soul_ids = soul_gallery(loc_id)
-    return loc_id, render_diorama(loc_id), render_room(loc_id), gr.update(value=items), soul_ids, _SOUL_HINT
+        return (None, *_explore_scene(None))
+    return (loc_id, *_explore_scene(loc_id))
 
 
 def open_diorama_from_map(location_id: int | None):
-    if not location_id:
-        return render_diorama(None), render_room(None), gr.update(value=[]), [], _SOUL_HINT
-    items, soul_ids = soul_gallery(location_id)
-    return render_diorama(location_id), render_room(location_id), gr.update(value=items), soul_ids, _SOUL_HINT
+    try:
+        loc_id = int(location_id) if location_id else None
+    except (TypeError, ValueError):
+        loc_id = None
+    return _explore_scene(loc_id)
 
 
 def meet_soul(evt: gr.SelectData, soul_ids: list):
@@ -565,6 +617,10 @@ 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"]):
+                            gr.HTML(
+                                '<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>'
+                            )
                             world_map = gr.HTML(
                                 value=render_world_map(),
                                 elem_id="world-map",
@@ -574,12 +630,47 @@ def build_app() -> gr.Blocks:
                             )
 
                         with gr.Column(scale=1, elem_classes=["tome-page-right", "tome-printed-page"]):
+                            realm_stats = gr.HTML(value=render_realm_stats())
                             current_event = gr.HTML(value=render_current_event())
-                            activity_feed = gr.HTML(value=render_activity_feed(limit=3))
+                            realm_pulse = gr.HTML(value=render_realm_pulse(limit=4))
+                            activity_feed = gr.HTML(value=render_activity_feed(limit=4))
+                            gr.HTML(
+                                '<div class="realm-summon-block">'
+                                '<p class="tome-printed-kicker">Summon Into the Realm</p>'
+                                '<p class="realm-summon-hint">Describe what you bring — the Garden will remember.</p>'
+                                '</div>'
+                            )
+                            summon_input = gr.Textbox(
+                                placeholder="A clockmaker who weaves time from fallen leaves…",
+                                label=None,
+                                show_label=False,
+                                lines=3,
+                                elem_classes=["realm-summon-input"],
+                            )
+                            summon_btn = gr.Button(
+                                "Seal & Summon",
+                                variant="primary",
+                                elem_classes=["seal-summon-btn"],
+                            )
+                            entity_result = gr.HTML()
+                            soul_card_img = gr.Image(
+                                label="Your Soul Card",
+                                visible=False,
+                                show_label=True,
+                                interactive=False,
+                                type="filepath",
+                                elem_classes=["soul-card-image"],
+                                height=280,
+                            )
+                            share_caption_box = gr.Textbox(
+                                label="Share caption",
+                                visible=False,
+                                lines=2,
+                                interactive=True,
+                            )
 
                 with gr.Column(elem_classes=["tome-offpage-store"]):
                     world_vignette = gr.HTML(value=render_world_vignette())
-                    realm_pulse = gr.HTML(value=render_realm_pulse())
                     realm_diorama = gr.HTML(value="")
                     map_pick = gr.Textbox(visible=False, elem_id="map_location_pick")
                     with gr.Accordion("How this world works", open=False):
@@ -614,31 +705,31 @@ def build_app() -> gr.Blocks:
                 explore_loc = gr.State(value=_default_loc_id)
                 soul_ids_state = gr.State(value=[])
 
-                gr.HTML(
-                    '<div class="explore-intro">'
-                    '<h2 class="section-title">Walk the Eight Sacred Places</h2>'
-                    '<p class="section-desc">Pick a place below — then <strong>WASD to walk</strong>, '
-                    '<strong>drag to look</strong>, <strong>E to talk</strong> to any soul you find. '
-                    'Other live visitors appear as golden wisps when they step into the same place. '
-                    'Or press ✦ to wander somewhere at random.</p>'
-                    '</div>'
-                )
-                wander_btn = gr.Button("✦ Wander somewhere at random", variant="secondary")
-
-                places_gallery = gr.Gallery(
-                    value=place_gallery_items(),
-                    columns=4,
-                    height="auto",
-                    object_fit="cover",
-                    allow_preview=False,
-                    show_label=False,
-                    elem_classes=["places-gallery"],
-                )
+                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))
+                            explore_place_pick = gr.Textbox(visible=False, elem_id="explore_place_pick")
+                            wander_btn = gr.Button("✦ Wander at random", variant="secondary", size="sm")
 
-                diorama_view = gr.HTML(value=render_diorama(_default_loc_id))
-                portal_pick = gr.Textbox(visible=False, elem_id="portal_location_pick")
+                        with gr.Column(scale=1, elem_classes=["tome-page-right", "tome-printed-page", "tome-explore-stage"]):
+                            gr.HTML(
+                                '<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))
+                            portal_pick = gr.Textbox(visible=False, elem_id="portal_location_pick")
 
-                with gr.Accordion("Classic view (if 3D does not load)", open=False):
+                with gr.Column(elem_classes=["tome-offpage-store"]):
+                    places_gallery = gr.Gallery(
+                        value=place_gallery_items(),
+                        columns=4,
+                        height="auto",
+                        object_fit="cover",
+                        allow_preview=False,
+                        show_label=False,
+                        elem_classes=["places-gallery"],
+                    )
                     room_view = gr.HTML(value=render_room(_default_loc_id))
                     souls_gallery = gr.Gallery(
                         value=[],
@@ -652,15 +743,15 @@ def build_app() -> gr.Blocks:
                     soul_card = gr.HTML()
 
             with gr.Tab("Book of Ages", id="book"):
+                _book_state = get_world_state()
+                _init_book_day = int(_book_state.get("current_day", 1) or 1)
+                book_day = gr.State(value=_init_book_day)
+
                 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-book-index"]):
-                            gr.HTML(
-                                '<div class="tome-printed-heading">'
-                                '<h2 class="book-title">Book of Ages</h2>'
-                                '<p class="book-subtitle">Every creation, encounter, and event — remembered forever</p>'
-                                '</div>'
-                            )
+                            day_tabs = gr.HTML(value=render_day_tabs(_init_book_day))
+                            book_day_pick = gr.Textbox(visible=False, elem_id="book_day_pick")
                             book_filter = gr.Dropdown(
                                 choices=[
                                     ("All", "all"),
@@ -679,83 +770,57 @@ def build_app() -> gr.Blocks:
                             )
                         with gr.Column(scale=1, elem_classes=["tome-page-right", "tome-printed-page"]):
                             book_display = gr.HTML(
-                                value=render_book_of_ages(limit=8, include_header=False)
+                                value=render_book_for_day(_init_book_day, limit=12)
                             )
 
             with gr.Tab("Bonds and Alliances", id="bonds"):
-                gr.HTML(
-                    '<div class="explore-intro">'
-                    '<h2 class="section-title">The Web of Bonds</h2>'
-                    '<p class="section-desc">Every alliance, rivalry, and debt forged by the simulation — '
-                    'not scripted, only remembered.</p></div>'
-                )
-                rel_graph = gr.HTML(value=render_relationship_graph())
+                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())
+                        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())
-                with gr.Row():
-                    loc_filter = gr.Dropdown(
-                        choices=["all"] + [l["name"] for l in get_all_locations()],
-                        value="all",
-                        label="Location",
-                    )
-                    type_filter = gr.Dropdown(
-                        choices=["all", "character", "creature", "object", "place"],
-                        value="all",
-                        label="Type",
-                    )
-                    status_filter = gr.Dropdown(
-                        choices=["all", "active", "dormant", "legendary"],
-                        value="all",
-                        label="Status",
-                    )
-                    entity_search = gr.Textbox(placeholder="Search...", label="Search")
-                entity_grid = gr.HTML(value=render_entity_grid(get_all_entities()))
-                entity_detail = gr.HTML()
-
-                entity_names = gr.Dropdown(
-                    choices=[e["display_name"] for e in get_all_entities()],
-                    label="View Entity Profile",
-                )
+                entity_pick = gr.Textbox(visible=False, elem_id="entity_pick")
 
-            with gr.Tab("Summon a New Soul", id="summon"):
-                gr.HTML('<div id="summon-spread" class="summon-section"><h3 class="summon-title">Summon Something Into the Realm</h3></div>')
-                with gr.Row():
-                    summon_input = gr.Textbox(
-                        placeholder="Describe what you are bringing into the world...",
-                        label=None,
-                        show_label=False,
-                        lines=5,
-                        scale=4,
-                    )
-                    summon_btn = gr.Button("Seal & Summon", variant="primary", scale=1, elem_classes=["seal-summon-btn"])
-
-                gr.HTML(
-                    '<p class="summon-hint">Hint: "A wizard" is forgotten. '
-                    '"A wizard who collects the sound of doors closing" is remembered.</p>'
-                )
-                entity_result = gr.HTML()
-
-                with gr.Group(visible=True):
-                    soul_card_img = gr.Image(
-                        label="Your Soul Card — download & share it",
-                        visible=False,
-                        show_label=True,
-                        interactive=False,
-                        type="filepath",
-                        elem_classes=["soul-card-image"],
-                        height=420,
-                    )
-                    share_caption_box = gr.Textbox(
-                        label="Share caption (copy this with your card)",
-                        visible=False,
-                        lines=3,
-                        interactive=True,
-                    )
+                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-souls-index"]):
+                            gr.HTML('<p class="tome-printed-kicker">Souls of the Garden</p>')
+                            with gr.Row(elem_classes=["souls-filter-row"]):
+                                loc_filter = gr.Dropdown(
+                                    choices=["all"] + [l["name"] for l in get_all_locations()],
+                                    value="all",
+                                    label="Place",
+                                    scale=1,
+                                )
+                                type_filter = gr.Dropdown(
+                                    choices=["all", "character", "creature", "object", "place"],
+                                    value="all",
+                                    label="Kind",
+                                    scale=1,
+                                )
+                            with gr.Row(elem_classes=["souls-filter-row"]):
+                                status_filter = gr.Dropdown(
+                                    choices=["all", "active", "dormant", "legendary"],
+                                    value="all",
+                                    label="Status",
+                                    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))
 
         _summon_outputs = [
             world_map, header, activity_feed, entity_result, location_panel,
-            soul_card_img, share_caption_box, realm_diorama,
+            soul_card_img, share_caption_box, realm_pulse, realm_stats,
+        ]
+
+        _explore_outputs = [
+            diorama_view, room_view, souls_gallery, soul_ids_state, soul_card, place_ribbon,
         ]
 
         summon_btn.click(
@@ -812,47 +877,39 @@ def build_app() -> gr.Blocks:
             """,
         )
 
-        def _realm_location_change(loc_id):
-            d = render_diorama(loc_id) if loc_id else ""
-            return render_world_map(loc_id), render_location_panel(loc_id), d
-
-        location_select.change(
-            fn=_realm_location_change,
-            inputs=[location_select],
-            outputs=[world_map, location_panel, realm_diorama],
-        )
-
-        def _map_open_diorama(pick):
+        def _realm_map_pick(pick):
             try:
                 loc_id = int(pick) if pick else None
             except (TypeError, ValueError):
                 loc_id = None
-            if not loc_id:
-                return "", render_diorama(None), render_room(None), gr.update(value=[]), [], _SOUL_HINT
-            items, soul_ids = soul_gallery(loc_id)
-            return (
-                render_diorama(loc_id),
-                render_diorama(loc_id),
-                render_room(loc_id),
-                gr.update(value=items),
-                soul_ids,
-                _SOUL_HINT,
-            )
+            return render_world_map(loc_id), render_location_panel(loc_id)
+
+        location_select.change(
+            fn=_realm_map_pick,
+            inputs=[location_select],
+            outputs=[world_map, location_panel],
+        )
 
         map_pick.change(
-            _map_open_diorama,
+            _realm_map_pick,
             inputs=[map_pick],
-            outputs=[realm_diorama, diorama_view, room_view, souls_gallery, soul_ids_state, soul_card],
+            outputs=[world_map, location_panel],
+        )
+
+        explore_place_pick.change(
+            open_diorama_from_map,
+            inputs=[explore_place_pick],
+            outputs=_explore_outputs,
         ).then(
             lambda pick: int(pick) if pick and str(pick).isdigit() else None,
-            inputs=[map_pick],
+            inputs=[explore_place_pick],
             outputs=[explore_loc],
         )
 
         portal_pick.change(
             open_diorama_from_map,
             inputs=[portal_pick],
-            outputs=[diorama_view, room_view, souls_gallery, soul_ids_state, soul_card],
+            outputs=_explore_outputs,
         ).then(
             lambda pick: int(pick) if pick and str(pick).isdigit() else None,
             inputs=[portal_pick],
@@ -862,12 +919,12 @@ def build_app() -> gr.Blocks:
         places_gallery.select(
             enter_place,
             inputs=None,
-            outputs=[explore_loc, diorama_view, room_view, souls_gallery, soul_ids_state, soul_card],
+            outputs=[explore_loc, *_explore_outputs],
         )
         wander_btn.click(
             wander_to_place,
             inputs=None,
-            outputs=[explore_loc, diorama_view, room_view, souls_gallery, soul_ids_state, soul_card],
+            outputs=[explore_loc, *_explore_outputs],
         )
         souls_gallery.select(meet_soul, inputs=[soul_ids_state], outputs=[soul_card])
 
@@ -878,7 +935,7 @@ def build_app() -> gr.Blocks:
         ).then(
             fn=refresh_all_views,
             outputs=[world_map, header, current_event, activity_feed, world_vignette, featured_chars, realm_pulse],
-        )
+        ).then(fn=render_realm_stats, outputs=[realm_stats])
 
         # ── Soul chat API ──
         chat_soul_id_comp = gr.Textbox(visible=False, elem_id="chat_soul_id_input")
@@ -930,8 +987,20 @@ def build_app() -> gr.Blocks:
             outputs=[presence_bar],
         )
 
-        book_filter.change(filter_book, [book_filter, book_search], [book_display])
-        book_search.change(filter_book, [book_filter, book_search], [book_display])
+        def _book_day_change(day_pick, day_state, entry_type, search):
+            try:
+                day = int(day_pick) if day_pick else int(day_state or 1)
+            except (TypeError, ValueError):
+                day = int(day_state 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],
+        )
+        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])
 
         for f in [loc_filter, type_filter, status_filter, entity_search]:
             f.change(
@@ -940,13 +1009,15 @@ def build_app() -> gr.Blocks:
                 [entity_grid],
             )
 
-        entity_names.change(select_entity_from_dropdown, [entity_names], [entity_detail])
+        entity_pick.change(select_entity_by_id, [entity_pick], [entity_detail])
 
         refresh_timer = gr.Timer(30)
         refresh_timer.tick(
             fn=refresh_all_views,
             outputs=[world_map, header, current_event, activity_feed, world_vignette, featured_chars, realm_pulse],
-        ).then(fn=render_relationship_graph, outputs=[rel_graph])
+        ).then(fn=render_relationship_graph, outputs=[rel_graph]).then(
+            fn=render_bonds_sidebar, outputs=[bonds_sidebar]
+        ).then(fn=render_realm_stats, outputs=[realm_stats])
 
         MAP_CLICK_JS = """
         () => {
@@ -957,8 +1028,7 @@ def build_app() -> gr.Blocks:
                         { key: 'explore', label: 'Explore the Realm', kind: 'tab', panel: 1 },
                         { key: 'book', label: 'Book of Ages', kind: 'tab', panel: 2 },
                         { key: 'entities', label: 'Souls of the Garden', kind: 'tab', panel: 4 },
-                        { key: 'bonds', label: 'Bonds and Alliances', kind: 'tab', panel: 3 },
-                        { key: 'summon', label: 'Summon a New Soul', kind: 'tab', panel: 5 }
+                        { key: 'bonds', label: 'Bonds and Alliances', kind: 'tab', panel: 3 }
                     ];
                     let currentSpread = 0;
 
@@ -1072,7 +1142,40 @@ def build_app() -> gr.Blocks:
                         if (floating) floating.classList.remove('open');
                     };
 
+                    const closeBook = () => {
+                        const gate = document.getElementById('realm-opening');
+                        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');
+                        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');
+                        }
+                        applyTurnFx('prev');
+                    };
+
+                    const reopenBook = () => {
+                        const gate = document.getElementById('realm-opening');
+                        if (!gate) return;
+                        gate.classList.remove('is-reclosed');
+                        gate.classList.add('is-opened', 'is-closed');
+                        playOpeningChime();
+                    };
+
                     const goToSpread = (idx, direction = 'next') => {
+                        if (idx >= sections.length && direction === 'next') {
+                            closeBook();
+                            return;
+                        }
                         const clamped = Math.max(0, Math.min(sections.length - 1, idx));
                         const spread = sections[clamped];
                         if (!spread) return;
@@ -1106,11 +1209,11 @@ def build_app() -> gr.Blocks:
                                 <button type="button" id="tome-toc-open" class="tome-ribbon" aria-label="Open table of contents">Table of Contents</button>
                                 <div id="tome-page-indicator" class="tome-page-indicator">Page I</div>
                                 <div id="tome-floating-toc" class="tome-floating-toc">
-                                    ${sections.map((s, i) => `<button type="button" class="tome-floating-link" data-index="${i}">${s.key === 'summon' ? 'VI. Summon a New Soul' : `${toRoman(i + 1)}. ${s.label}`}</button>`).join('')}
+                                    ${sections.map((s, i) => `<button type="button" class="tome-floating-link" data-index="${i}">${toRoman(i + 1)}. ${s.label}</button>`).join('')}
                                 </div>
                                 <label class="sr-only" for="tome-jump">Jump to section</label>
                                 <select id="tome-jump" class="tome-jump-select" aria-label="Jump to section">
-                                    ${sections.map((s, i) => `<option value="${i}">${s.key === 'summon' ? 'VI. Summon a New Soul' : `${toRoman(i + 1)}. ${s.label}`}</option>`).join('')}
+                                    ${sections.map((s, i) => `<option value="${i}">${toRoman(i + 1)}. ${s.label}</option>`).join('')}
                                 </select>
                             `;
                             document.body.appendChild(nav);
@@ -1127,7 +1230,13 @@ def build_app() -> gr.Blocks:
                         }
                         if (next && !next.dataset.bound) {
                             next.dataset.bound = '1';
-                            next.addEventListener('click', () => goToSpread(currentSpread + 1, 'next'));
+                            next.addEventListener('click', () => {
+                                if (currentSpread >= sections.length - 1) {
+                                    closeBook();
+                                    return;
+                                }
+                                goToSpread(currentSpread + 1, 'next');
+                            });
                         }
                         if (tocOpen && !tocOpen.dataset.bound) {
                             tocOpen.dataset.bound = '1';
@@ -1158,7 +1267,10 @@ def build_app() -> gr.Blocks:
                         window.addEventListener('keydown', (e) => {
                             const tag = document.activeElement?.tagName;
                             if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') return;
-                            if (e.key === 'ArrowRight') goToSpread(currentSpread + 1, 'next');
+                            if (e.key === 'ArrowRight') {
+                                if (currentSpread >= sections.length - 1) closeBook();
+                                else goToSpread(currentSpread + 1, 'next');
+                            }
                             if (e.key === 'ArrowLeft') goToSpread(currentSpread - 1, 'prev');
                             if (e.key === 'Escape') closeToc();
                         }, { passive: true });
@@ -1267,6 +1379,7 @@ def build_app() -> gr.Blocks:
                             if (!prologueReady) return;
                             playOpeningChime();
                             ensureAmbientMelody();
+                            gate.classList.remove('is-reclosed');
                             gate.classList.add('is-opened');
                             closeToc();
                             setTimeout(() => gate.classList.add('is-closed'), 700);
@@ -1290,6 +1403,12 @@ 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') {
+                                e.preventDefault();
+                                e.stopPropagation();
+                                reopenBook();
+                                return;
+                            }
                             if (target.id === 'realm-opening-enter') {
                                 e.preventDefault();
                                 e.stopPropagation();
@@ -1333,8 +1452,46 @@ def build_app() -> gr.Blocks:
               });
             });
           };
+          const fireHiddenInput = (id, value) => {
+            const root = document.querySelector(id);
+            const input = root && (root.querySelector('textarea') || root.querySelector('input'));
+            if (input) {
+              input.value = value;
+              input.dispatchEvent(new Event('input', { bubbles: true }));
+            }
+          };
+
+          const bindSpreadClicks = () => {
+            document.querySelectorAll('.place-ribbon-item').forEach((btn) => {
+              if (btn.dataset.ribbonBound) return;
+              btn.dataset.ribbonBound = '1';
+              btn.addEventListener('click', () => {
+                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', () => {
+                const day = btn.getAttribute('data-day');
+                if (day) fireHiddenInput('#book_day_pick', day);
+              });
+            });
+            document.querySelectorAll('.entity-grid-card').forEach((card) => {
+              if (card.dataset.entityBound) return;
+              card.dataset.entityBound = '1';
+              card.style.cursor = 'pointer';
+              card.addEventListener('click', () => {
+                const id = card.getAttribute('data-entity-id');
+                if (id) fireHiddenInput('#entity_pick', id);
+              });
+            });
+          };
+
           bind();
-          new MutationObserver(bind).observe(document.body, { childList: true, subtree: true });
+          bindSpreadClicks();
+          new MutationObserver(() => { bind(); bindSpreadClicks(); }).observe(document.body, { childList: true, subtree: true });
 
           window._aetherHoverDiorama = false;
           window._aetherDioramaActive = false;

ui/book_display.py

@@ -3,6 +3,7 @@
 from __future__ import annotations
 
 from world.book_of_ages import get_entries
+from world.database import get_world_state
 
 ENTRY_TYPE_LABELS = {
     "arrival": "Arrival",
@@ -82,6 +83,79 @@ def render_book_of_ages(
     return "\n".join(parts)
 
 
+def render_day_tabs(selected_day: int | None = None) -> str:
+    """Day selector for the Book of Ages left page."""
+    state = get_world_state()
+    current = int(state.get("current_day", 1) or 1)
+    days = list(range(max(1, current - 7), current + 1))
+    if selected_day is None:
+        selected_day = current
+
+    buttons = []
+    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>'
+        )
+
+    return f"""
+    <div class="day-tabs-wrap">
+      <p class="tome-printed-kicker">Chronicle by Day</p>
+      <h3 class="day-tabs-title">Book of Ages</h3>
+      <p class="day-tabs-sub">Pick a day — its deeds appear on the right leaf.</p>
+      <div class="day-tabs">{"".join(buttons)}</div>
+    </div>
+    """
+
+
+def render_book_for_day(
+    day: int | None = None,
+    entry_type: str = "all",
+    search: str = "",
+    limit: int = 10,
+) -> str:
+    """Entries for a single world day (right page)."""
+    if day is None:
+        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]
+
+    if not entries:
+        return f"""
+        <div class="book-container book-day-view">
+          <p class="book-day-empty">Day {day} rests in quiet ink — no deeds recorded yet.</p>
+        </div>
+        """
+
+    parts = [
+        '<div class="book-container book-day-view">',
+        f'<p class="book-day-banner">Day {day}</p>',
+        '<div class="book-entries">',
+    ]
+    for entry in entries:
+        type_label = ENTRY_TYPE_LABELS.get(entry["entry_type"], entry["entry_type"])
+        type_class = ENTRY_TYPE_CLASSES.get(entry["entry_type"], "")
+        title_html = f'<span class="entry-title">{entry["title"]}: </span>' if entry.get("title") else ""
+        content = entry["content"]
+        if entry["entry_type"] == "dream_fragment":
+            content = f"<em>{content}</em>"
+        parts.append(f"""
+        <div class="book-entry {type_class}">
+            <span class="entry-type-badge">{type_label}</span>
+            <p class="entry-content">{title_html}{content}</p>
+        </div>
+        """)
+
+    parts.append("</div></div>")
+    return "\n".join(parts)
+
+
 def render_activity_feed(limit: int = 5) -> str:
     entries = get_entries(limit=limit)
 

ui/entity_card.py

@@ -166,6 +166,50 @@ def render_entity_card(entity: dict) -> str:
     """
 
 
+def render_entity_hologram(entity: dict | None) -> str:
+    """3D-styled entity detail panel for the Souls spread right page."""
+    if not entity:
+        return """
+        <div class="entity-hologram entity-hologram-empty">
+          <div class="hologram-stage">
+            <p class="hologram-hint">Select a soul on the left leaf to unveil their story.</p>
+          </div>
+        </div>
+        """
+
+    location = get_location_by_id(entity["location_id"])
+    loc_name = location["name"].replace("The ", "") if location else "Unknown"
+    slug = location["slug"] if location else None
+    avatar = render_avatar(entity, size=120, location_slug=slug)
+    loc_img = assets.location_image_url(slug)
+    banner = f"background-image:url('{loc_img}');" if loc_img else ""
+    type_label = TYPE_LABELS.get(entity["type"], entity["type"].title())
+    status = STATUS_LABELS.get(entity["status"], entity["status"].title())
+
+    return f"""
+    <div class="entity-hologram" data-entity-id="{entity['id']}">
+      <div class="hologram-beam" aria-hidden="true"></div>
+      <div class="hologram-stage">
+        <div class="hologram-banner" style="{banner}">
+          <div class="hologram-banner-scrim"></div>
+        </div>
+        <div class="hologram-portrait-wrap">{avatar}</div>
+        <div class="hologram-body">
+          <p class="hologram-meta">{type_label} · {loc_name} · Day {entity['days_in_realm']} · {status}</p>
+          <h2 class="hologram-name">{entity['display_name']}</h2>
+          <p class="hologram-appearance">{entity['appearance']}</p>
+          <div class="hologram-goals">
+            <p><b>Seeks</b> {entity['primary_goal']}</p>
+            <p><b>Fears</b> {entity['primary_fear']}</p>
+          </div>
+          <blockquote class="hologram-greeting">"{entity['greeting']}"</blockquote>
+          <p class="hologram-memory">{entity['memory_summary'] or 'They have only just arrived.'}</p>
+        </div>
+      </div>
+    </div>
+    """
+
+
 def render_entity_grid(entities: list[dict]) -> str:
     if not entities:
         return '<div class="empty-state">The Realm waits for its first arrivals.</div>'

ui/place_ribbon.py

@@ -0,0 +1,37 @@
+"""Vertical place ribbon for the Explore spread — left page navigation."""
+
+from __future__ import annotations
+
+from ui import assets
+from world.locations import get_all_locations
+
+
+def render_place_ribbon(selected_id: int | None = None) -> str:
+    locations = get_all_locations()
+    items = []
+    for loc in locations:
+        slug = loc.get("slug", "")
+        img = assets.location_image_url(slug)
+        sel = " is-selected" if selected_id and loc["id"] == selected_id else ""
+        short = loc["name"].replace("The ", "")
+        thumb = (
+            f'<span class="ribbon-thumb" style="background-image:url(\'{img}\')"></span>'
+            if img
+            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']}">
+          {thumb}
+          <span class="ribbon-label">{short}</span>
+          <span class="ribbon-count">{loc.get('entity_count', 0)} souls</span>
+        </button>
+        """)
+
+    return f"""
+    <div class="place-ribbon">
+      <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>
+    """

ui/relationship_graph.py

@@ -156,20 +156,11 @@ def _encode_scene(data: dict) -> str:
     return "data=" + base64.b64encode(raw).decode()
 
 
-def render_relationship_graph(selected_entity_id: str | None = None) -> str:
+def _bonds_graph_src(selected_entity_id: str | None = None) -> str | None:
     entities = get_all_entities(limit=80)
     relationships = get_all_relationships()
-
-    if not entities:
-        return '<div class="empty-state">No souls yet — the web of bonds is unwritten.</div>'
-
-    if not relationships:
-        return """
-        <div class="rel-graph-wrap">
-          <p class="rel-graph-empty">Souls wander alone for now. After the next simulation tick,
-          bonds will appear here as a living web.</p>
-        </div>
-        """
+    if not entities or not relationships:
+        return None
 
     entity_map = {e["id"]: e for e in entities}
     connected_ids: set[str] = set()
@@ -182,11 +173,7 @@ def render_relationship_graph(selected_entity_id: str | None = None) -> str:
             edge_pairs.append((a, b))
 
     if not connected_ids:
-        return """
-        <div class="rel-graph-wrap">
-          <p class="rel-graph-empty">Bonds are forming — check back after the next realm tick.</p>
-        </div>
-        """
+        return None
 
     node_ids = sorted(connected_ids)
     positions_2d = _force_layout(entity_map, node_ids, edge_pairs)
@@ -229,34 +216,61 @@ def render_relationship_graph(selected_entity_id: str | None = None) -> str:
 
     scene = {"nodes": scene_nodes, "edges": scene_edges}
     hash_data = _encode_scene(scene)
-    graph_src = f"{assets.file_url('bonds_graph.html')}#{hash_data}"
+    return f"{assets.file_url('bonds_graph.html')}#{hash_data}"
+
+
+def render_bonds_graph_frame(scene_src: str | None = None) -> str:
+    if not scene_src:
+        return '<div class="rel-graph-stage rel-graph-empty"><p>Bonds are forming…</p></div>'
+    return f"""
+    <div class="rel-graph-stage">
+      <iframe
+        class="rel-graph-frame"
+        src="{scene_src}"
+        title="3D web of bonds in the Realm"
+        loading="lazy"
+        tabindex="-1"
+      ></iframe>
+    </div>
+    """
+
+
+def render_relationship_graph(selected_entity_id: str | None = None) -> str:
+    src = _bonds_graph_src(selected_entity_id)
+    if not src:
+        return '<div class="rel-graph-stage rel-graph-empty"><p>No bonds woven yet.</p></div>'
+    return render_bonds_graph_frame(src)
+
+
+def render_bonds_sidebar() -> str:
+    relationships = get_all_relationships()
+    if not relationships:
+        return """
+        <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>
+        </div>
+        """
 
     legend = "".join(
         f'<span class="rel-legend-item"><i style="background:{c}"></i>{k}</span>'
         for k, c in REL_COLORS.items()
     )
-
     rel_list = []
-    for rel in relationships[:10]:
+    for rel in relationships[:12]:
         t = TYPE_SHORT.get(rel["relationship_type"], rel["relationship_type"])
         rel_list.append(
             f'<li><b>{rel["entity_a_name"]}</b> ↔ <b>{rel["entity_b_name"]}</b> '
-            f'· {t} (strength {rel["strength"]}) — <em>{rel["description"][:90]}</em></li>'
+            f'· {t} — <em>{rel["description"][:72]}</em></li>'
         )
 
     return f"""
-    <div class="rel-graph-wrap">
-      <p class="rel-graph-desc">Every bond forged by the simulation — {len(relationships)} threads between {len(node_ids)} souls.</p>
-      <div class="rel-graph-stage">
-        <iframe
-          class="rel-graph-frame"
-          src="{graph_src}"
-          title="3D web of bonds in the Realm"
-          loading="lazy"
-          tabindex="-1"
-        ></iframe>
-      </div>
+    <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>
       <div class="rel-legend">{legend}</div>
       <ul class="rel-list">{"".join(rel_list)}</ul>
     </div>
     """
+
+

ui/styles.css

@@ -3687,16 +3687,10 @@ body,
     flex-direction: column !important;
     min-height: 0 !important;
     max-height: 100% !important;
-    overflow: hidden !important;
+    overflow: hidden auto !important;
     padding: 0.85rem 1.15rem 0.75rem !important;
-    background:
-        radial-gradient(ellipse 110px 85px at 94% 90%, rgba(72, 44, 18, 0.14) 0%, transparent 64%),
-        radial-gradient(ellipse 95px 75px at 6% 12%, rgba(58, 34, 14, 0.1) 0%, transparent 58%),
-        radial-gradient(ellipse 80px 60px at 88% 8%, rgba(54, 32, 12, 0.08) 0%, transparent 55%),
-        radial-gradient(circle at 5% 38%, rgba(88, 62, 32, 0.09) 0 2px, transparent 3px),
-        radial-gradient(circle at 94% 62%, rgba(78, 54, 28, 0.08) 0 2px, transparent 3px),
-        linear-gradient(168deg, #ebe0c4 0%, #e0d0aa 45%, #d4c094 100%);
-    box-shadow: inset 0 0 28px rgba(88, 56, 24, 0.08);
+    background: transparent !important;
+    box-shadow: none !important;
     isolation: isolate;
 }
 
@@ -3969,3 +3963,394 @@ body,
     font-size: 0.82rem;
     color: #5c4228;
 }
+
+/* Spread helpers — left/right page content */
+.tome-printed-kicker {
+    margin: 0 0 0.2rem;
+    font-family: 'Cinzel', serif;
+    font-size: 0.72rem;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    color: #8a6424;
+}
+
+.tome-printed-hint,
+.explore-controls-hint,
+.realm-summon-hint {
+    margin: 0 0 0.55rem;
+    font-family: 'IM Fell English', serif;
+    font-style: italic;
+    font-size: 0.82rem;
+    color: #5c4228;
+}
+
+.realm-stats-strip {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.65rem 1rem;
+    margin-bottom: 0.55rem;
+    padding: 0.45rem 0.65rem;
+    border-radius: 8px;
+    background: rgba(255, 249, 232, 0.55);
+    font-family: 'IM Fell English', serif;
+    font-size: 0.82rem;
+    color: #4a3420;
+}
+
+.realm-summon-block {
+    margin-top: 0.35rem;
+}
+
+.realm-summon-input textarea {
+    min-height: 4.2rem !important;
+}
+
+/* Place ribbon — Explore left page */
+.place-ribbon {
+    display: flex;
+    flex-direction: column;
+    gap: 0.45rem;
+    min-height: 0;
+    flex: 1 1 auto;
+    overflow: hidden;
+}
+
+.place-ribbon-kicker,
+.day-tabs-title {
+    margin: 0;
+    font-family: 'Cinzel Decorative', 'Cinzel', serif;
+    font-size: 1rem;
+    color: var(--tome-ink);
+}
+
+.place-ribbon-hint,
+.day-tabs-sub {
+    margin: 0 0 0.35rem;
+    font-family: 'IM Fell English', serif;
+    font-style: italic;
+    font-size: 0.8rem;
+    color: #5c4228;
+}
+
+.place-ribbon-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.35rem;
+    overflow-y: auto;
+    min-height: 0;
+    flex: 1 1 auto;
+    padding-right: 0.15rem;
+}
+
+.place-ribbon-item {
+    display: grid;
+    grid-template-columns: 42px 1fr auto;
+    gap: 0.45rem;
+    align-items: center;
+    padding: 0.35rem 0.45rem;
+    border: 1px solid rgba(138, 106, 58, 0.28);
+    border-radius: 8px;
+    background: rgba(255, 249, 232, 0.72);
+    cursor: pointer;
+    text-align: left;
+    color: var(--tome-ink);
+    font-family: 'IM Fell English', serif;
+    transition: transform 0.15s ease, box-shadow 0.15s ease;
+}
+
+.place-ribbon-item:hover,
+.place-ribbon-item.is-selected {
+    transform: translateX(2px);
+    box-shadow: 0 4px 12px rgba(76, 50, 22, 0.14);
+    border-color: rgba(138, 106, 58, 0.5);
+}
+
+.ribbon-thumb {
+    width: 42px;
+    height: 42px;
+    border-radius: 6px;
+    background-size: cover;
+    background-position: center;
+    border: 1px solid rgba(138, 106, 58, 0.35);
+}
+
+.ribbon-thumb-empty {
+    background: linear-gradient(135deg, #d8c49a, #b89562);
+}
+
+.ribbon-label {
+    font-family: 'Cinzel', serif;
+    font-size: 0.78rem;
+    line-height: 1.2;
+}
+
+.ribbon-count {
+    font-size: 0.68rem;
+    color: #6b4f30;
+    white-space: nowrap;
+}
+
+/* Day tabs — Book left page */
+.day-tabs-wrap {
+    display: flex;
+    flex-direction: column;
+    gap: 0.35rem;
+    min-height: 0;
+}
+
+.day-tabs {
+    display: flex;
+    flex-direction: column;
+    gap: 0.3rem;
+    overflow-y: auto;
+    max-height: 220px;
+}
+
+.day-tab {
+    padding: 0.4rem 0.55rem;
+    border: 1px solid rgba(138, 106, 58, 0.28);
+    border-radius: 8px;
+    background: rgba(255, 249, 232, 0.72);
+    font-family: 'Cinzel', serif;
+    font-size: 0.82rem;
+    color: var(--tome-ink);
+    cursor: pointer;
+    text-align: left;
+}
+
+.day-tab.is-active,
+.day-tab:hover {
+    background: rgba(255, 244, 214, 0.95);
+    border-color: rgba(138, 106, 58, 0.55);
+}
+
+.book-day-view .book-entries {
+    column-count: 1 !important;
+    padding: 0;
+}
+
+.book-day-banner {
+    font-family: 'Cinzel Decorative', 'Cinzel', serif;
+    font-size: 1.1rem;
+    margin: 0 0 0.65rem;
+    color: #6b4a2c;
+}
+
+/* Bonds sidebar */
+.bonds-sidebar {
+    display: flex;
+    flex-direction: column;
+    gap: 0.45rem;
+    min-height: 0;
+    overflow: hidden auto;
+}
+
+.bonds-sidebar-desc,
+.bonds-sidebar-empty {
+    font-family: 'IM Fell English', serif;
+    font-style: italic;
+    font-size: 0.84rem;
+    color: #5c4228;
+    margin: 0;
+}
+
+.bonds-sidebar .rel-legend {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.35rem 0.55rem;
+}
+
+.bonds-sidebar .rel-list {
+    margin: 0;
+    padding-left: 1rem;
+    font-family: 'IM Fell English', serif;
+    font-size: 0.78rem;
+    line-height: 1.35;
+    color: var(--tome-ink);
+}
+
+.tome-explore-stage .diorama-wrap,
+.tome-explore-stage .rel-graph-stage {
+    flex: 1 1 auto;
+    min-height: 280px;
+}
+
+.tome-souls-index .entity-grid {
+    display: flex;
+    flex-direction: column;
+    gap: 0.45rem;
+    max-height: 340px;
+    overflow-y: auto;
+}
+
+.tome-souls-index .entity-grid-card {
+    display: grid;
+    grid-template-columns: 56px 1fr;
+    min-height: 72px;
+}
+
+.souls-filter-row {
+    gap: 0.35rem !important;
+    margin-bottom: 0.25rem !important;
+}
+
+/* Entity hologram — Souls right page */
+.entity-hologram {
+    position: relative;
+    perspective: 900px;
+    min-height: 320px;
+    flex: 1 1 auto;
+}
+
+.entity-hologram-empty .hologram-stage {
+    display: grid;
+    place-items: center;
+    min-height: 280px;
+    border: 1px dashed rgba(138, 106, 58, 0.35);
+    border-radius: 12px;
+    background: rgba(255, 249, 232, 0.45);
+}
+
+.hologram-hint {
+    font-family: 'IM Fell English', serif;
+    font-style: italic;
+    color: #5c4228;
+    text-align: center;
+    padding: 1rem;
+}
+
+.hologram-beam {
+    position: absolute;
+    left: 50%;
+    bottom: 8%;
+    width: 62%;
+    height: 42%;
+    transform: translateX(-50%);
+    background: radial-gradient(ellipse at center, rgba(201, 161, 59, 0.22), transparent 68%);
+    pointer-events: none;
+    filter: blur(8px);
+    animation: hologramPulse 3.2s ease-in-out infinite;
+}
+
+@keyframes hologramPulse {
+    0%, 100% { opacity: 0.45; transform: translateX(-50%) scale(0.96); }
+    50% { opacity: 0.85; transform: translateX(-50%) scale(1.04); }
+}
+
+.hologram-stage {
+    position: relative;
+    transform: rotateX(8deg) translateZ(12px);
+    transform-style: preserve-3d;
+    border: 1px solid rgba(201, 161, 59, 0.35);
+    border-radius: 14px;
+    background: linear-gradient(180deg, rgba(12, 10, 8, 0.92), rgba(24, 18, 12, 0.88));
+    box-shadow:
+        0 18px 40px rgba(0, 0, 0, 0.35),
+        0 0 28px rgba(201, 161, 59, 0.12);
+    overflow: hidden;
+    color: #f4e8c8;
+}
+
+.hologram-banner {
+    height: 88px;
+    background-size: cover;
+    background-position: center;
+    position: relative;
+}
+
+.hologram-banner-scrim {
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(180deg, transparent, rgba(10, 8, 6, 0.85));
+}
+
+.hologram-portrait-wrap {
+    position: absolute;
+    top: 52px;
+    left: 1rem;
+    z-index: 2;
+    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.45));
+}
+
+.hologram-body {
+    padding: 3.2rem 1rem 1rem;
+    font-family: 'IM Fell English', serif;
+}
+
+.hologram-meta {
+    margin: 0 0 0.25rem;
+    font-size: 0.72rem;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    color: #c9a13b;
+}
+
+.hologram-name {
+    margin: 0 0 0.45rem;
+    font-family: 'Cinzel Decorative', 'Cinzel', serif;
+    font-size: 1.25rem;
+    color: #f8e4a8;
+}
+
+.hologram-appearance,
+.hologram-memory {
+    margin: 0 0 0.55rem;
+    font-size: 0.88rem;
+    line-height: 1.45;
+    color: #e8dcc0;
+}
+
+.hologram-goals {
+    font-size: 0.82rem;
+    margin-bottom: 0.45rem;
+    color: #d8c8a4;
+}
+
+.hologram-greeting {
+    margin: 0.35rem 0 0.55rem;
+    padding-left: 0.75rem;
+    border-left: 2px solid rgba(201, 161, 59, 0.45);
+    font-style: italic;
+    color: #f0e2b8;
+}
+
+/* Closed book overlay after last page */
+.realm-opening.is-reclosed {
+    opacity: 1 !important;
+    visibility: visible !important;
+    pointer-events: auto !important;
+}
+
+.realm-opening.is-reclosed .realm-book-stage {
+    display: flex !important;
+}
+
+.realm-opening.is-reclosed .realm-book-closed {
+    opacity: 1 !important;
+    pointer-events: auto !important;
+    transform: none !important;
+}
+
+.realm-opening.is-reclosed .realm-prologue-card,
+.realm-opening.is-reclosed .realm-book-open {
+    display: none !important;
+}
+
+.realm-cover-card {
+    background:
+        radial-gradient(circle at 22% 12%, rgba(255, 240, 198, 0.1), transparent 30%),
+        radial-gradient(circle at 78% 88%, rgba(0, 0, 0, 0.22), transparent 42%),
+        linear-gradient(155deg, #4a2e1a 0%, #2e1a10 38%, #1a0f08 100%) !important;
+    border-color: rgba(120, 78, 42, 0.65) !important;
+}
+
+.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;
+}