Deploy Aether Garden application

.gitattributes

@@ -63,3 +63,9 @@ assets/verify/01-cover.png filter=lfs diff=lfs merge=lfs -text
 assets/verify/error.png filter=lfs diff=lfs merge=lfs -text
 assets/verify/02-prologue.png filter=lfs diff=lfs merge=lfs -text
 assets/verify/03-page1.png filter=lfs diff=lfs merge=lfs -text
+assets/verify/02-page2.png filter=lfs diff=lfs merge=lfs -text
+assets/verify/02-prologue-ready.png filter=lfs diff=lfs merge=lfs -text
+assets/verify/02-prologue-skip.png filter=lfs diff=lfs merge=lfs -text
+assets/verify/03-page3.png filter=lfs diff=lfs merge=lfs -text
+assets/verify/04-page4.png filter=lfs diff=lfs merge=lfs -text
+assets/verify/05-page5.png filter=lfs diff=lfs merge=lfs -text

app.py

@@ -117,6 +117,16 @@ def opening_gate_html() -> str:
             #realm-opening .realm-cover-card {{
                 min-height: min(380px, 58vh) !important;
             }}
+            .realm-prologue-actions {{
+                display: flex !important;
+                flex-direction: column !important;
+                align-items: center !important;
+                justify-content: center !important;
+                width: 100% !important;
+            }}
+            #realm-prologue-enter:not(.ready) {{
+                display: none !important;
+            }}
         </style>
         <div id="realm-opening" class="realm-opening is-open" aria-live="polite">
             <div class="realm-opening-backdrop"></div>
@@ -167,8 +177,8 @@ def opening_gate_html() -> str:
                     <p class="realm-prologue-cursor" id="realm-prologue-cursor" aria-hidden="true">▌</p>
                     <div class="realm-prologue-actions">
                         <button id="realm-prologue-skip" type="button" class="realm-prologue-skip is-hidden">Skip</button>
-                        <button id="realm-prologue-enter" type="button" disabled>Enter the Realm</button>
                     </div>
+                    <button id="realm-prologue-enter" type="button" disabled>Enter the Realm</button>
                 </div>
             </div>
             <div class="realm-toc-card" id="realm-toc" aria-hidden="true">
@@ -1702,6 +1712,11 @@ def build_app() -> gr.Blocks:
                                 host.style.setProperty('visibility', 'hidden', 'important');
                                 host.style.setProperty('pointer-events', 'none', 'important');
                             }
+                            const hoisted = document.getElementById('realm-opening');
+                            if (hoisted) {
+                                hoisted.classList.add('is-closed');
+                                hoisted.style.setProperty('pointer-events', 'none', 'important');
+                            }
                             document.body.classList.add('aether-realm-entered');
                         };
 

ui/styles.css

@@ -2944,7 +2944,7 @@ body,
     max-height: 565px !important;
     min-height: 0 !important;
     overflow: hidden !important;
-    padding: 0.5rem 0.85rem 0.75rem !important;
+    padding: 0.65rem 1.15rem 0.8rem !important;
     display: flex !important;
     flex-direction: column !important;
 }
@@ -3328,7 +3328,9 @@ body,
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.8s ease;
-    overflow: hidden;
+    overflow-x: hidden;
+    overflow-y: auto;
+    max-height: min(88vh, 700px);
     isolation: isolate;
     clip-path: polygon(
         0% 3%, 2% 0%, 5% 2%, 8% 0%, 12% 2%, 16% 0%, 20% 1.5%, 24% 0%,
@@ -3409,7 +3411,7 @@ body,
 }
 
 .realm-prologue-cursor.active {
-    display: block;
+    display: none;
 }
 
 @keyframes cursorBlink {
@@ -3450,6 +3452,7 @@ body,
 }
 
 .realm-prologue-body {
+    padding: 0 0.85rem;
     font-family: 'IM Fell English', serif;
     font-size: clamp(1rem, 2.2vw, 1.15rem);
     line-height: 1.75;
@@ -3476,19 +3479,23 @@ body,
 
 .realm-prologue-actions {
     display: flex;
+    flex-direction: column;
     align-items: center;
     justify-content: center;
-    gap: 0.75rem;
-    margin-top: 0.5rem;
-    flex-wrap: wrap;
+    gap: 0.65rem;
+    width: 100%;
+    margin-top: 0.65rem;
+    text-align: center;
 }
 
 .realm-prologue-skip {
+    display: inline-block;
+    margin: 0 auto;
     border: 1px solid rgba(98, 62, 28, 0.35);
     border-radius: 999px;
     background: rgba(255, 249, 232, 0.55);
     color: #5c4228;
-    padding: 0.5rem 1rem;
+    padding: 0.5rem 1.35rem;
     font-family: 'Cinzel', serif;
     text-transform: uppercase;
     letter-spacing: 0.1em;
@@ -3507,6 +3514,7 @@ body,
 }
 
 #realm-prologue-enter {
+    display: none;
     border: 1px solid var(--tome-gold-dark);
     border-radius: 999px;
     background: linear-gradient(180deg, #f0d696, #bb8e33);
@@ -3517,7 +3525,7 @@ body,
     letter-spacing: 0.12em;
     cursor: pointer;
     font-size: 0.78rem;
-    margin-top: 0;
+    margin: 0.55rem auto 0;
     opacity: 0;
     transform: translateY(8px);
     pointer-events: none;
@@ -3525,6 +3533,7 @@ body,
 }
 
 #realm-prologue-enter.ready {
+    display: inline-block;
     opacity: 1;
     transform: translateY(0);
     pointer-events: auto;
@@ -3562,19 +3571,19 @@ body,
 }
 
 .tome-page-left {
-    padding-right: 2.75rem !important;
-    padding-left: 0.35rem !important;
+    padding-right: 3.1rem !important;
+    padding-left: 1.55rem !important;
     border-right: none !important;
 }
 
 .tome-page-right {
-    padding-left: 2.75rem !important;
-    padding-right: 0.35rem !important;
+    padding-left: 3.1rem !important;
+    padding-right: 1.55rem !important;
 }
 
 .realm-tabs [role="tabpanel"] {
-    padding-left: 1.35rem !important;
-    padding-right: 1.35rem !important;
+    padding-left: 2.35rem !important;
+    padding-right: 2.35rem !important;
     clip-path: polygon(
         0% 1.5%, 1.5% 0%, 3% 1%, 5% 0%, 7% 1.2%, 9% 0%, 11% 1%, 13% 0%, 15% 1%,
         85% 0%, 87% 1%, 89% 0%, 91% 1.2%, 93% 0%, 95% 1%, 97% 0%, 98.5% 1.5%,
@@ -3766,14 +3775,14 @@ body,
 }
 
 .tome-page-left {
-    padding-right: 2.4rem !important;
-    padding-left: 0.5rem !important;
+    padding-right: 3.1rem !important;
+    padding-left: 1.55rem !important;
     border-right: 1px solid rgba(98, 62, 28, 0.12);
 }
 
 .tome-page-right {
-    padding-left: 2.4rem !important;
-    padding-right: 0.5rem !important;
+    padding-left: 3.1rem !important;
+    padding-right: 1.55rem !important;
 }
 
 .tome-expand-btn {
@@ -4898,7 +4907,7 @@ body.aether-realm-entered #realm-opening-host {
     justify-content: flex-start !important;
     gap: 0 !important;
     min-height: 0 !important;
-    padding: 0.45rem 0.35rem 0.35rem !important;
+    padding: 0.65rem 1.35rem 0.6rem !important;
     background:
         linear-gradient(180deg, rgba(255, 249, 232, 0.35), rgba(255, 249, 232, 0.12)),
         radial-gradient(circle at 8% 12%, rgba(138, 106, 58, 0.06) 0 2px, transparent 3px),
@@ -4929,7 +4938,7 @@ body.aether-realm-entered #realm-opening-host {
     justify-content: flex-start !important;
     gap: 0.3rem !important;
     min-height: 0 !important;
-    padding: 0.45rem 0.35rem 0.35rem !important;
+    padding: 0.65rem 1.35rem 0.6rem !important;
     position: relative !important;
     background:
         linear-gradient(180deg, rgba(255, 249, 232, 0.35), rgba(255, 249, 232, 0.1)),
@@ -4972,7 +4981,10 @@ body.aether-realm-entered #realm-opening-host {
 }
 
 .tome-page-right .realm-stats-strip {
-    width: 100% !important;
+    width: calc(100% - 0.85rem) !important;
+    max-width: calc(100% - 0.85rem) !important;
+    margin-left: auto !important;
+    margin-right: auto !important;
     justify-content: space-around !important;
     text-align: center;
     margin-bottom: 0.3rem !important;
@@ -5185,10 +5197,11 @@ body.aether-realm-entered #realm-opening-host {
 .tome-page-left .realm-map,
 .tome-page-left #world-map {
     flex: 1 1 auto !important;
-    width: 100% !important;
+    width: calc(100% - 0.85rem) !important;
+    max-width: calc(100% - 0.85rem) !important;
     min-height: 280px !important;
     max-height: none !important;
-    margin: 0.25rem 0 0 !important;
+    margin: 0.3rem auto 0 !important;
     border: 1px solid rgba(98, 62, 28, 0.3) !important;
     border-radius: 3px !important;
     padding: 0.28rem !important;