kavyabhand commited on
Commit
e500ac8
·
verified ·
1 Parent(s): 3ebd170

Deploy Aether Garden application

Browse files
Files changed (5) hide show
  1. README_HF_SPACE.md +8 -0
  2. app.py +0 -0
  3. assets/TODO.md +121 -0
  4. ui/map.py +9 -2
  5. ui/styles.css +95 -3113
README_HF_SPACE.md CHANGED
@@ -8,10 +8,18 @@ sdk_version: 5.50.0
8
  app_file: app.py
9
  pinned: true
10
  license: mit
 
 
 
 
 
 
11
  ---
12
 
13
  # Aether Garden
14
 
15
  The World That Remembers — a living AI world where every visitor leaves something behind.
16
 
 
 
17
  Open the app, read the Book of Ages, summon something strange, and watch the world remember.
 
8
  app_file: app.py
9
  pinned: true
10
  license: mit
11
+ tags:
12
+ - gradio
13
+ - minicpm
14
+ - agents
15
+ - simulation
16
+ - modal
17
  ---
18
 
19
  # Aether Garden
20
 
21
  The World That Remembers — a living AI world where every visitor leaves something behind.
22
 
23
+ This Space variant runs MiniCPM 3-4B by default via Modal for low-latency, under-32B inference.
24
+
25
  Open the app, read the Book of Ages, summon something strange, and watch the world remember.
app.py CHANGED
The diff for this file is too large to render. See raw diff
 
assets/TODO.md ADDED
@@ -0,0 +1,121 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ I got the following comments for this project, go through them and fix accordingly
2
+
3
+ 1. The Living Realm map has a 2 markers that are offset or way too close to the border, I can still interact with them but just because I was moving the mouse around and I noticed the highlight. Try centering or giving a better contrast to the nav buttons. Or align the buttons with the text frame so it looks centered and aligned, on high res it could be a missing button just because it's almost on the edge of the visual center.
4
+
5
+ 2. I entered from phone - clicked on map and saw some texts - but couldn't figure out how to enter the locations or what to do.
6
+
7
+ After you implement the changes, run it and check if everything is working, understand the codebase and check the details below -
8
+ #### Stay under 32B
9
+ Every model must be under 32B parameters. Combine several small models if you like — but each one’s total parameter count must stay below the cap.
10
+ REQ-02
11
+
12
+ #### Ship a Gradio app
13
+ Deploy your project as a Gradio App inside the official Build Small org on Hugging Face. Docker is fine, as long as the interface is a Gradio Space.
14
+
15
+
16
+ REQ-05
17
+
18
+ #### Mind the GPU limit
19
+ Submit as many apps as you like. If you rely on the provided Zero GPU resources, you’re limited to 10 Zero GPU apps per user.
20
+
21
+ REQ-06
22
+
23
+ #### Tag your README
24
+ Add tags for the tracks and badges you want to be considered for to the yaml block at the top of your README, plus a short write-up of the idea and tech.
25
+
26
+
27
+ There are category prizes as well, i am attaching those below, make sure to include as many criteria as possible, you have access to modal as well as the hugging face credentials-
28
+
29
+ #### Best MiniCPM Build
30
+
31
+ 1st$2,500
32
+ 2nd$1,500
33
+ 3rd$1,000
34
+
35
+ **To qualify ·**Build with MiniCPM models.
36
+
37
+ Hide clarifications
38
+ - The pool is split per track: $5,000 to Backyard AI and $5,000 to Thousand Token Wood.
39
+ - Placements above are awarded within each track.
40
+ - Vision (MiniCPM-V) and omni (MiniCPM-o) variants qualify, not just the text models.
41
+
42
+ #### Best Use of Codex
43
+
44
+ 1st$5,000
45
+ 2nd$3,000
46
+ 3rd$1,000
47
+
48
+ **To qualify ·**Requires Codex-attributed commits in your connected GitHub repo or Space.
49
+
50
+ Hide clarifications
51
+ - $10,000 total, awarded across all submissions.
52
+ - Using Codex holistically — fine-tuning models, building complex agents — ranks higher than light use.
53
+
54
+ #### Nemotron Hardware Prize
55
+
56
+ Best spaceRTX 5080
57
+ Community engagementRTX 5080
58
+
59
+ **To qualify ·**Build with Nemotron models.
60
+
61
+ Hide clarifications
62
+ - Two RTX 5080 GPUs, awarded across all submissions.
63
+ - “Best space” is judged by the NVIDIA team; “community engagement” is judged on likes & interactions.
64
+ #### Best Use of Modal
65
+
66
+ 1st10,000 credits
67
+ 2nd7,000 credits
68
+ 3rd3,000 credits
69
+
70
+ **To qualify ·**Use Modal for the development or runtime of your app, and note it in your Space README.
71
+
72
+ Hide clarifications
73
+ - $20,000 in Modal credits total, judged on best use of the platform.
74
+ - Inference, fine-tuning, batch jobs and sandboxes all count.
75
+
76
+
77
+ Off Brand
78
+ The best custom UI that pushes past the default Gradio look.
79
+
80
+ Hide details
81
+ gr.Server is your friend — go well beyond the stock components and make it yours.
82
+
83
+ $1,500
84
+ Tiny Titan
85
+ The best app built on a genuinely tiny model.
86
+
87
+ Hide details
88
+ Models must be ≤ 4B parameters. Biggest impact from the smallest weights wins.
89
+
90
+ $1,000
91
+ Best Demo
92
+ The full package: great app, great demo video, great social post.
93
+
94
+ Hide details
95
+ Storytelling counts as much as the build — sell it across all three.
96
+
97
+ $1,000
98
+ Best Agent
99
+ The best agentic app.
100
+
101
+ Hide details
102
+ Multi-step tool use and planning — all under the 32B cap, of course.
103
+
104
+ $2,000
105
+ Bonus Quest Champion
106
+ The most bonus criteria met across the board.
107
+
108
+ Hide details
109
+ Ties go to the most ambitious, highest-quality submission despite the extra constraints.
110
+
111
+ $1,000
112
+ Judges’ Wildcard
113
+ For the entry that’s amazing but fits no category.
114
+
115
+ Hide details
116
+ No entry needed — every submission is in the running. We know you’re out there.
117
+
118
+ Go through everything, implement everything and tell me if it is ready for submission, it has to be top 1 at any cost, everything should work, tell me if you needs any keys or anything i should provide from my end
119
+
120
+
121
+
ui/map.py CHANGED
@@ -43,6 +43,11 @@ LOCATION_PATHS = [
43
 
44
  def render_world_map(selected_location_id: int | None = None) -> str:
45
  locations = get_all_locations()
 
 
 
 
 
46
  active_event = get_active_world_event()
47
  affected_slugs = set()
48
  if active_event:
@@ -116,8 +121,10 @@ def render_world_map(selected_location_id: int | None = None) -> str:
116
  )
117
 
118
  for loc in locations:
119
- x = loc["map_x"] / 100 * 800
120
- y = loc["map_y"] / 100 * 600
 
 
121
  is_affected = loc["slug"] in affected_slugs
122
  is_selected = selected_location_id == loc["id"]
123
  pulse_class = " location-pulse" if is_affected else " location-glow"
 
43
 
44
  def render_world_map(selected_location_id: int | None = None) -> str:
45
  locations = get_all_locations()
46
+ map_w, map_h = 800, 600
47
+ # Keep hit areas and labels safely inside the frame on all aspect ratios.
48
+ margin_x = 62
49
+ margin_top = 62
50
+ margin_bottom = 90
51
  active_event = get_active_world_event()
52
  affected_slugs = set()
53
  if active_event:
 
121
  )
122
 
123
  for loc in locations:
124
+ raw_x = loc["map_x"] / 100 * map_w
125
+ raw_y = loc["map_y"] / 100 * map_h
126
+ x = min(max(raw_x, margin_x), map_w - margin_x)
127
+ y = min(max(raw_y, margin_top), map_h - margin_bottom)
128
  is_affected = loc["slug"] in affected_slugs
129
  is_selected = selected_location_id == loc["id"]
130
  pulse_class = " location-pulse" if is_affected else " location-glow"
ui/styles.css CHANGED
@@ -417,6 +417,16 @@ footer { display: none !important; }
417
  cursor: pointer;
418
  }
419
 
 
 
 
 
 
 
 
 
 
 
420
  .location-node:hover .location-circle {
421
  opacity: 0.5 !important;
422
  transform: scale(1.08);
@@ -640,21 +650,6 @@ footer { display: none !important; }
640
  margin: 0.5rem 0 0;
641
  }
642
 
643
- .event-chronicle {
644
- font-family: 'IM Fell English', serif;
645
- font-style: italic;
646
- font-size: 0.88rem;
647
- line-height: 1.5;
648
- color: #5c4228;
649
- margin: 0.55rem 0 0;
650
- padding-top: 0.45rem;
651
- border-top: 1px solid rgba(138, 106, 58, 0.2);
652
- }
653
-
654
- .vignette-mystery {
655
- margin-top: 0.45rem !important;
656
- }
657
-
658
  /* Summon form */
659
  .summon-section {
660
  background: linear-gradient(135deg, rgba(42,74,58,0.25), var(--realm-bg-secondary));
@@ -816,6 +811,28 @@ footer { display: none !important; }
816
  animation: slide-up 0.3s ease-out;
817
  }
818
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
819
  .location-panel-banner {
820
  position: relative;
821
  height: 120px;
@@ -1422,9 +1439,6 @@ footer { display: none !important; }
1422
 
1423
  .diorama-stage {
1424
  position: relative;
1425
- border-radius: 10px;
1426
- overflow: hidden;
1427
- box-shadow: inset 0 0 0 1px rgba(138, 106, 58, 0.22);
1428
  }
1429
 
1430
  .diorama-frame {
@@ -1437,13 +1451,13 @@ footer { display: none !important; }
1437
  cursor: crosshair;
1438
  }
1439
 
1440
- /* Walk pad — anchored inside the 3D diorama stage only */
1441
  #aether-walk-pad {
1442
  display: none !important;
1443
- position: absolute;
1444
- left: 0.85rem;
1445
- bottom: 0.85rem;
1446
- z-index: 12;
1447
  pointer-events: none;
1448
  }
1449
 
@@ -1981,12 +1995,6 @@ body,
1981
 
1982
  .location-node {
1983
  filter: drop-shadow(0 7px 12px rgba(0,0,0,0.36));
1984
- cursor: pointer;
1985
- pointer-events: all;
1986
- }
1987
-
1988
- .location-node .location-hit {
1989
- pointer-events: all;
1990
  }
1991
 
1992
  .location-selected .location-circle {
@@ -2386,20 +2394,33 @@ body,
2386
 
2387
  .tome-corner {
2388
  position: fixed;
2389
- bottom: 2rem;
2390
- width: 54px;
2391
- height: 54px;
2392
- border: 1px solid var(--tome-gold-dark);
2393
  border-radius: 12px;
2394
- background: linear-gradient(180deg, #f4dfb0, #d2ae63);
2395
- color: var(--tome-ink);
2396
- font-size: 1.1rem;
 
2397
  cursor: pointer;
2398
- box-shadow: 0 10px 24px rgba(26, 14, 6, 0.3);
 
 
 
 
 
 
 
 
 
 
2399
  }
2400
 
2401
- .tome-corner-left { left: 1.2rem; bottom: 5.5rem; }
2402
- .tome-corner-right { right: 1.2rem; }
 
 
2403
 
2404
  .tome-ribbon {
2405
  position: fixed;
@@ -2542,15 +2563,10 @@ body,
2542
  }
2543
 
2544
  .realm-cover-card {
2545
- padding: clamp(2rem, 5vh, 3rem) clamp(1.6rem, 4vw, 2.6rem);
2546
  background:
2547
  radial-gradient(circle at 25% 15%, rgba(255,240,198,0.12), transparent 28%),
2548
  linear-gradient(150deg, var(--tome-leather-light), var(--tome-leather), var(--tome-leather-dark));
2549
- display: flex;
2550
- flex-direction: column;
2551
- align-items: center;
2552
- justify-content: center;
2553
- min-height: min(380px, 58vh);
2554
  }
2555
 
2556
  .realm-cover-kicker {
@@ -2562,30 +2578,25 @@ body,
2562
 
2563
  .realm-cover-title {
2564
  margin: 0.6rem 0;
2565
- color: #f8e4a8 !important;
2566
  font-family: 'Cinzel Decorative', 'Cinzel', serif;
2567
  font-size: clamp(1.5rem, 6vw, 3rem);
2568
- letter-spacing: 0.16em;
2569
- word-spacing: 0.12em;
2570
  display: flex;
2571
  flex-direction: column;
2572
- gap: 0.18em;
2573
  align-items: center;
2574
- line-height: 0.95;
2575
- text-shadow:
2576
- 0 2px 4px rgba(0, 0, 0, 0.65),
2577
- 0 1px 0 rgba(255, 248, 220, 0.45);
2578
  }
2579
 
2580
  .realm-cover-title span {
2581
  display: inline-block;
 
2582
  white-space: nowrap;
2583
- color: #f8e4a8 !important;
2584
- -webkit-text-fill-color: #f8e4a8;
2585
- background: transparent;
2586
- letter-spacing: inherit;
2587
- clip-path: inset(0 100% 0 0);
2588
- animation: revealSigil 1.8s steps(18, end) forwards;
2589
  }
2590
 
2591
  .realm-cover-title span:nth-child(2) {
@@ -2598,13 +2609,15 @@ body,
2598
  height: 160px;
2599
  pointer-events: none;
2600
  background:
2601
- linear-gradient(90deg, transparent 0 17%, rgba(232, 200, 115, 0.1) 17.2% 18%, transparent 18.2% 82%, rgba(232, 200, 115, 0.1) 82.2% 83%, transparent 83.2%),
2602
- linear-gradient(36deg, transparent 0 21%, rgba(232, 200, 115, 0.1) 21.5% 22.8%, transparent 23.2%),
2603
- linear-gradient(-36deg, transparent 0 21%, rgba(232, 200, 115, 0.1) 21.5% 22.8%, transparent 23.2%),
2604
- linear-gradient(-36deg, transparent 76.8%, rgba(232, 200, 115, 0.1) 77.2% 78.5%, transparent 79%),
2605
- linear-gradient(36deg, transparent 76.8%, rgba(232, 200, 115, 0.1) 77.2% 78.5%, transparent 79%);
2606
- opacity: 0.14;
2607
- filter: blur(0.2px);
 
 
2608
  }
2609
 
2610
  .realm-cover-sub {
@@ -2764,6 +2777,9 @@ body,
2764
  bottom: 1rem;
2765
  }
2766
 
 
 
 
2767
  .tome-ribbon {
2768
  right: 1rem;
2769
  top: 0;
@@ -2898,11 +2914,6 @@ body,
2898
  to { width: 100%; }
2899
  }
2900
 
2901
- @keyframes revealSigil {
2902
- from { clip-path: inset(0 100% 0 0); }
2903
- to { clip-path: inset(0 0 0 0); }
2904
- }
2905
-
2906
  /* -------------------------------------------------------------------------- */
2907
  /* Viewport-fit hotfix: keep app in one screen and scroll inside the spread */
2908
  /* -------------------------------------------------------------------------- */
@@ -2958,10 +2969,8 @@ body,
2958
  height: 565px !important;
2959
  max-height: 565px !important;
2960
  min-height: 0 !important;
2961
- overflow: hidden !important;
2962
- padding: 0.65rem 1.15rem 0.8rem !important;
2963
- display: flex !important;
2964
- flex-direction: column !important;
2965
  }
2966
 
2967
  .realm-tabs [role="tabpanel"] > .column,
@@ -2981,9 +2990,9 @@ body,
2981
 
2982
  .realm-opening-backdrop {
2983
  background:
2984
- radial-gradient(circle at 28% 18%, rgba(201, 161, 59, 0.12), transparent 38%),
2985
- radial-gradient(circle at 78% 24%, rgba(138, 106, 58, 0.1), transparent 36%),
2986
- linear-gradient(180deg, #120a06 0%, #0a0604 55%, #050302 100%) !important;
2987
  }
2988
 
2989
  #realm-opening-enter:hover {
@@ -2991,44 +3000,21 @@ body,
2991
  }
2992
 
2993
  .realm-opening {
 
2994
  display: flex !important;
2995
- align-items: center !important;
2996
  justify-content: center !important;
2997
- padding: clamp(1rem, 3vh, 2rem) !important;
2998
  overflow: hidden;
2999
  }
3000
 
3001
- .realm-opening.is-prologue {
3002
- overflow-y: auto;
3003
- }
3004
-
3005
- .realm-opening-inner {
3006
- position: relative;
3007
- z-index: 4;
3008
- width: min(820px, 92vw);
3009
- display: flex;
3010
- align-items: center;
3011
- justify-content: center;
3012
- min-height: min(480px, 72vh);
3013
- max-height: min(88vh, 760px);
3014
- margin: auto;
3015
- }
3016
-
3017
  .realm-cover-card {
3018
- margin: 0 auto !important;
 
3019
  }
3020
 
3021
  .realm-cover-title {
3022
  font-size: clamp(2.4rem, 7vw, 4.7rem) !important;
3023
- color: #f8e4a8 !important;
3024
- letter-spacing: 0.16em !important;
3025
- word-spacing: 0.12em !important;
3026
- }
3027
-
3028
- .realm-cover-title span {
3029
- color: #f8e4a8 !important;
3030
- -webkit-text-fill-color: #f8e4a8 !important;
3031
- letter-spacing: inherit !important;
3032
  }
3033
 
3034
  .realm-cover-sub,
@@ -3161,3014 +3147,10 @@ body,
3161
  .realm-tabs [role="tabpanel"] {
3162
  height: 565px !important;
3163
  max-height: 565px !important;
3164
- overflow: hidden !important;
3165
- }
3166
-
3167
- .realm-opening-inner {
3168
- min-height: min(420px, 68vh);
3169
- }
3170
-
3171
- .realm-prologue-card {
3172
- max-height: min(82vh, 620px);
3173
- overflow-y: auto;
3174
  }
3175
 
3176
- .tome-page-left,
3177
- .tome-page-right {
3178
- padding-left: 0.5rem !important;
3179
- padding-right: 0.5rem !important;
3180
  }
3181
  }
3182
-
3183
- /* -------------------------------------------------------------------------- */
3184
- /* Cinematic book opening + prologue */
3185
- /* -------------------------------------------------------------------------- */
3186
- .realm-opening-vignette {
3187
- position: absolute;
3188
- inset: 0;
3189
- pointer-events: none;
3190
- background: radial-gradient(ellipse at 50% 42%, transparent 28%, rgba(8, 5, 3, 0.72) 100%);
3191
- z-index: 1;
3192
- }
3193
-
3194
- .realm-book-stage {
3195
- position: relative;
3196
- z-index: 3;
3197
- width: 100%;
3198
- perspective: 1800px;
3199
- transform-style: preserve-3d;
3200
- display: flex;
3201
- align-items: center;
3202
- justify-content: center;
3203
- }
3204
-
3205
- .realm-opening.is-prologue .realm-book-stage,
3206
- .realm-opening.is-unfolded .realm-book-stage {
3207
- visibility: hidden;
3208
- opacity: 0;
3209
- pointer-events: none;
3210
- position: absolute;
3211
- width: min(760px, 94vw);
3212
- height: min(380px, 58vh);
3213
- overflow: hidden;
3214
- }
3215
-
3216
- .realm-book-closed {
3217
- position: relative;
3218
- transform-style: preserve-3d;
3219
- transition: transform 1.4s cubic-bezier(0.45, 0, 0.2, 1), opacity 0.9s ease;
3220
- }
3221
-
3222
- .realm-book-closed.is-opening {
3223
- transform: rotateY(-14deg) translateZ(-40px);
3224
- opacity: 0;
3225
- pointer-events: none;
3226
- }
3227
-
3228
- .realm-book-spine {
3229
- position: absolute;
3230
- left: 50%;
3231
- top: 4%;
3232
- bottom: 4%;
3233
- width: 18px;
3234
- transform: translateX(-50%);
3235
- background: linear-gradient(90deg, #2e1a10, #6b4226 48%, #2e1a10);
3236
- border-radius: 4px;
3237
- box-shadow: 0 0 24px rgba(0, 0, 0, 0.45);
3238
- z-index: 0;
3239
- }
3240
-
3241
- .realm-book-open {
3242
- position: absolute;
3243
- inset: 0;
3244
- display: flex;
3245
- gap: 0;
3246
- opacity: 0;
3247
- transform: scale(0.94);
3248
- pointer-events: none;
3249
- transition: opacity 1s ease 0.3s, transform 1.2s cubic-bezier(0.34, 1.2, 0.64, 1) 0.2s;
3250
- }
3251
-
3252
- .realm-opening.is-unfolded .realm-book-open {
3253
- opacity: 1;
3254
- transform: scale(1);
3255
- }
3256
-
3257
- .realm-book-page {
3258
- flex: 1;
3259
- min-height: 320px;
3260
- border: 1px solid rgba(138, 106, 58, 0.35);
3261
- background:
3262
- radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.35), transparent 32%),
3263
- linear-gradient(180deg, #f8efd8, #e8d5ad);
3264
- box-shadow: inset 0 0 40px rgba(138, 106, 58, 0.12);
3265
- }
3266
-
3267
- .realm-book-page-left {
3268
- border-radius: 14px 4px 4px 14px;
3269
- transform-origin: right center;
3270
- animation: pageFanLeft 1.1s cubic-bezier(0.34, 1.1, 0.64, 1) 0.15s both;
3271
- clip-path: polygon(
3272
- 0% 2%, 3% 0%, 7% 1.5%, 11% 0.5%, 15% 2%, 19% 0%, 23% 1%, 27% 0.5%,
3273
- 31% 2%, 35% 0%, 39% 1.5%, 43% 0.5%, 47% 2%, 51% 0%, 55% 1%, 59% 0.5%,
3274
- 63% 2%, 67% 0%, 71% 1.5%, 75% 0.5%, 79% 2%, 83% 0%, 87% 1%, 91% 0.5%,
3275
- 95% 2%, 98% 0%, 100% 2%, 100% 98%, 98% 100%, 95% 98%, 91% 100%,
3276
- 87% 98%, 83% 100%, 79% 98%, 75% 100%, 71% 98%, 67% 100%, 63% 98%,
3277
- 59% 100%, 55% 98%, 51% 100%, 47% 98%, 43% 100%, 39% 98%, 35% 100%,
3278
- 31% 98%, 27% 100%, 23% 98%, 19% 100%, 15% 98%, 11% 100%, 7% 98%,
3279
- 3% 100%, 0% 98%
3280
- );
3281
- }
3282
-
3283
- .realm-book-page-right {
3284
- border-radius: 4px 14px 14px 4px;
3285
- transform-origin: left center;
3286
- animation: pageFanRight 1.1s cubic-bezier(0.34, 1.1, 0.64, 1) 0.15s both;
3287
- clip-path: polygon(
3288
- 0% 2%, 3% 0%, 7% 1.5%, 11% 0.5%, 15% 2%, 19% 0%, 23% 1%, 27% 0.5%,
3289
- 31% 2%, 35% 0%, 39% 1.5%, 43% 0.5%, 47% 2%, 51% 0%, 55% 1%, 59% 0.5%,
3290
- 63% 2%, 67% 0%, 71% 1.5%, 75% 0.5%, 79% 2%, 83% 0%, 87% 1%, 91% 0.5%,
3291
- 95% 2%, 98% 0%, 100% 2%, 100% 98%, 98% 100%, 95% 98%, 91% 100%,
3292
- 87% 98%, 83% 100%, 79% 98%, 75% 100%, 71% 98%, 67% 100%, 63% 98%,
3293
- 59% 100%, 55% 98%, 51% 100%, 47% 98%, 43% 100%, 39% 98%, 35% 100%,
3294
- 31% 98%, 27% 100%, 23% 98%, 19% 100%, 15% 98%, 11% 100%, 7% 98%,
3295
- 3% 100%, 0% 98%
3296
- );
3297
- }
3298
-
3299
- @keyframes pageFanLeft {
3300
- from { transform: rotateY(78deg); opacity: 0; }
3301
- to { transform: rotateY(0deg); opacity: 1; }
3302
- }
3303
-
3304
- @keyframes pageFanRight {
3305
- from { transform: rotateY(-78deg); opacity: 0; }
3306
- to { transform: rotateY(0deg); opacity: 1; }
3307
- }
3308
-
3309
- .realm-prologue-card {
3310
- position: absolute;
3311
- z-index: 5;
3312
- width: min(760px, 94vw);
3313
- max-width: min(760px, 94vw);
3314
- left: 50%;
3315
- top: 50%;
3316
- transform: translate(-50%, -50%);
3317
- margin: 0;
3318
- padding: clamp(1.6rem, 3.8vw, 2.4rem) clamp(1.6rem, 4.2vw, 2.8rem);
3319
- border: 1px solid rgba(98, 62, 28, 0.42);
3320
- border-radius: 6px 16px 14px 8px;
3321
- background:
3322
- /* coffee ring stains — kept to corners, away from title */
3323
- radial-gradient(ellipse 130px 100px at 94% 92%, rgba(72, 44, 18, 0.22) 0%, rgba(92, 58, 26, 0.1) 40%, transparent 68%),
3324
- radial-gradient(ellipse 150px 120px at 6% 88%, rgba(68, 42, 18, 0.2) 0%, rgba(84, 52, 22, 0.08) 42%, transparent 70%),
3325
- radial-gradient(ellipse 100px 80px at 8% 12%, rgba(54, 32, 12, 0.14) 0%, transparent 62%),
3326
- radial-gradient(ellipse 90px 70px at 92% 10%, rgba(58, 34, 14, 0.12) 0%, transparent 60%),
3327
- /* foxing — edges only */
3328
- radial-gradient(circle at 4% 42%, rgba(88, 62, 32, 0.12) 0 2.5px, transparent 3.5px),
3329
- radial-gradient(circle at 96% 55%, rgba(78, 54, 28, 0.1) 0 2px, transparent 3px),
3330
- radial-gradient(circle at 12% 96%, rgba(74, 48, 22, 0.1) 0 2.5px, transparent 3.5px),
3331
- /* smoky edge darkening — even vignette, no center blob */
3332
- radial-gradient(ellipse 115% 100% at 50% 50%, transparent 55%, rgba(48, 30, 14, 0.12) 82%, rgba(32, 18, 8, 0.2) 100%),
3333
- /* aged parchment base */
3334
- linear-gradient(168deg, #e8d4a8 0%, #dcc292 38%, #cdb47a 72%, #c4a86e 100%);
3335
- box-shadow:
3336
- 0 28px 70px rgba(12, 6, 2, 0.55),
3337
- 0 8px 22px rgba(28, 16, 6, 0.35),
3338
- inset 0 0 0 1px rgba(255, 240, 200, 0.28),
3339
- inset 0 -22px 44px rgba(88, 56, 24, 0.16),
3340
- inset 18px 0 28px rgba(72, 46, 20, 0.08),
3341
- inset -18px 0 28px rgba(72, 46, 20, 0.08);
3342
- text-align: center;
3343
- opacity: 0;
3344
- pointer-events: none;
3345
- transition: opacity 0.8s ease;
3346
- overflow-x: hidden;
3347
- overflow-y: auto;
3348
- max-height: min(88vh, 700px);
3349
- isolation: isolate;
3350
- clip-path: polygon(
3351
- 0% 3%, 2% 0%, 5% 2%, 8% 0%, 12% 2%, 16% 0%, 20% 1.5%, 24% 0%,
3352
- 100% 0%, 100% 97%, 98% 100%, 95% 98%, 92% 100%, 88% 98%, 84% 100%,
3353
- 0% 100%
3354
- );
3355
- }
3356
-
3357
- .realm-prologue-card::before {
3358
- content: "";
3359
- position: absolute;
3360
- inset: 0;
3361
- pointer-events: none;
3362
- z-index: 0;
3363
- opacity: 0.45;
3364
- background:
3365
- radial-gradient(ellipse 180px 140px at 96% 96%, rgba(42, 24, 8, 0.18) 0%, transparent 58%),
3366
- radial-gradient(ellipse 160px 130px at 4% 94%, rgba(38, 22, 6, 0.16) 0%, transparent 56%),
3367
- linear-gradient(125deg, rgba(58, 36, 14, 0.06) 0%, transparent 50%, rgba(48, 28, 10, 0.07) 100%);
3368
- mix-blend-mode: multiply;
3369
- }
3370
-
3371
- .realm-prologue-card::after {
3372
- content: "";
3373
- position: absolute;
3374
- inset: 0;
3375
- pointer-events: none;
3376
- z-index: 0;
3377
- opacity: 0.35;
3378
- background:
3379
- repeating-linear-gradient(
3380
- 0deg,
3381
- transparent,
3382
- transparent 2px,
3383
- rgba(62, 40, 18, 0.025) 2px,
3384
- rgba(62, 40, 18, 0.025) 3px
3385
- ),
3386
- repeating-linear-gradient(
3387
- 90deg,
3388
- transparent,
3389
- transparent 3px,
3390
- rgba(48, 30, 12, 0.02) 3px,
3391
- rgba(48, 30, 12, 0.02) 4px
3392
- ),
3393
- radial-gradient(ellipse 90% 80% at 50% 100%, rgba(28, 14, 4, 0.22) 0%, transparent 55%);
3394
- mix-blend-mode: multiply;
3395
- }
3396
-
3397
- .realm-prologue-card > * {
3398
- position: relative;
3399
- z-index: 1;
3400
- }
3401
-
3402
- .realm-prologue-card.visible {
3403
- opacity: 1;
3404
- transform: translate(-50%, -50%);
3405
- pointer-events: auto;
3406
- }
3407
-
3408
- .realm-typewriter.is-typing::after {
3409
- content: "▌";
3410
- display: inline;
3411
- margin-left: 1px;
3412
- color: var(--tome-gold-dark);
3413
- animation: cursorBlink 0.85s step-end infinite;
3414
- }
3415
-
3416
- .realm-prologue-cursor {
3417
- display: none;
3418
- margin: 0.25rem 0 0.5rem;
3419
- text-align: left;
3420
- max-width: 640px;
3421
- margin-left: auto;
3422
- margin-right: auto;
3423
- color: var(--tome-gold-dark);
3424
- font-family: 'IM Fell English', serif;
3425
- animation: cursorBlink 0.85s step-end infinite;
3426
- }
3427
-
3428
- .realm-prologue-cursor.active {
3429
- display: none;
3430
- }
3431
-
3432
- @keyframes cursorBlink {
3433
- 50% { opacity: 0; }
3434
- }
3435
-
3436
- .realm-opening.is-unfolding .realm-cover-card {
3437
- transform-origin: left center;
3438
- animation: coverLift 1.2s cubic-bezier(0.45, 0, 0.2, 1) forwards;
3439
- will-change: transform, opacity;
3440
- }
3441
-
3442
- @keyframes coverLift {
3443
- 0% { transform: perspective(1200px) rotateY(0deg); opacity: 1; }
3444
- 55% { transform: perspective(1200px) rotateY(-72deg); opacity: 0.85; }
3445
- 100% { transform: perspective(1200px) rotateY(-94deg); opacity: 0; }
3446
- }
3447
-
3448
- .realm-prologue-kicker {
3449
- margin: 0;
3450
- font-family: 'IM Fell English', serif;
3451
- font-style: italic;
3452
- font-size: 0.92rem;
3453
- color: #5c4228;
3454
- letter-spacing: 0.06em;
3455
- text-shadow: 0 1px 0 rgba(255, 236, 196, 0.35);
3456
- }
3457
-
3458
- .realm-prologue-title {
3459
- margin: 0.5rem 0 1rem;
3460
- font-family: 'Cinzel Decorative', 'Cinzel', serif;
3461
- font-size: clamp(1.4rem, 4vw, 2.2rem);
3462
- color: #8a6424;
3463
- letter-spacing: 0.2em;
3464
- word-spacing: 0.08em;
3465
- text-transform: uppercase;
3466
- text-shadow: 0 1px 1px rgba(255, 240, 200, 0.35);
3467
- }
3468
-
3469
- .realm-prologue-body {
3470
- padding: 0 0.85rem;
3471
- font-family: 'IM Fell English', serif;
3472
- font-size: clamp(1rem, 2.2vw, 1.15rem);
3473
- line-height: 1.75;
3474
- color: #3d2a16;
3475
- text-align: left;
3476
- max-width: 640px;
3477
- margin: 0 auto 1.2rem;
3478
- word-spacing: 0.07em;
3479
- letter-spacing: 0.02em;
3480
- text-shadow: 0 1px 0 rgba(255, 236, 196, 0.2);
3481
- }
3482
-
3483
- .realm-prologue-body p {
3484
- margin: 0 0 0.85rem;
3485
- }
3486
-
3487
- .realm-prologue-whisper {
3488
- font-style: italic;
3489
- color: #5a4024;
3490
- border-top: 1px solid rgba(98, 62, 28, 0.32);
3491
- padding-top: 0.85rem;
3492
- margin-top: 0.5rem !important;
3493
- }
3494
-
3495
- .realm-prologue-actions {
3496
- display: flex;
3497
- flex-direction: column;
3498
- align-items: center;
3499
- justify-content: center;
3500
- gap: 0.65rem;
3501
- width: 100%;
3502
- margin-top: 0.65rem;
3503
- text-align: center;
3504
- }
3505
-
3506
- .realm-prologue-skip {
3507
- display: inline-block;
3508
- margin: 0 auto;
3509
- border: 1px solid rgba(98, 62, 28, 0.35);
3510
- border-radius: 999px;
3511
- background: rgba(255, 249, 232, 0.55);
3512
- color: #5c4228;
3513
- padding: 0.5rem 1.35rem;
3514
- font-family: 'Cinzel', serif;
3515
- text-transform: uppercase;
3516
- letter-spacing: 0.1em;
3517
- cursor: pointer;
3518
- font-size: 0.68rem;
3519
- transition: background 0.2s ease, border-color 0.2s ease;
3520
- }
3521
-
3522
- .realm-prologue-skip:hover {
3523
- background: rgba(240, 214, 150, 0.75);
3524
- border-color: rgba(98, 62, 28, 0.5);
3525
- }
3526
-
3527
- .realm-prologue-skip.is-hidden {
3528
- display: none;
3529
- }
3530
-
3531
- #realm-prologue-enter {
3532
- display: none;
3533
- border: 1px solid var(--tome-gold-dark);
3534
- border-radius: 999px;
3535
- background: linear-gradient(180deg, #f0d696, #bb8e33);
3536
- color: #2d1a0c;
3537
- padding: 0.65rem 1.4rem;
3538
- font-family: 'Cinzel', serif;
3539
- text-transform: uppercase;
3540
- letter-spacing: 0.12em;
3541
- cursor: pointer;
3542
- font-size: 0.78rem;
3543
- margin: 0.55rem auto 0;
3544
- opacity: 0;
3545
- transform: translateY(8px);
3546
- pointer-events: none;
3547
- transition: opacity 0.5s ease, transform 0.5s ease, background 0.2s ease;
3548
- }
3549
-
3550
- #realm-prologue-enter.ready {
3551
- display: inline-block;
3552
- opacity: 1;
3553
- transform: translateY(0);
3554
- pointer-events: auto;
3555
- }
3556
-
3557
- #realm-prologue-enter:disabled {
3558
- cursor: default;
3559
- }
3560
-
3561
- #realm-prologue-enter.ready:hover {
3562
- background: linear-gradient(180deg, #f5e0a8, #c9a13b);
3563
- }
3564
-
3565
- .realm-opening.is-unfolding .realm-opening-backdrop,
3566
- .realm-opening.is-prologue .realm-opening-backdrop {
3567
- background:
3568
- radial-gradient(ellipse 70% 55% at 50% 42%, rgba(201, 161, 59, 0.1), transparent 52%),
3569
- radial-gradient(ellipse 90% 70% at 50% 100%, rgba(18, 8, 4, 0.65), transparent 55%),
3570
- linear-gradient(180deg, #0c0705 0%, #140c08 42%, #080403 100%) !important;
3571
- }
3572
-
3573
- .realm-opening.is-prologue .realm-opening-vignette {
3574
- background:
3575
- radial-gradient(ellipse 65% 58% at 50% 46%, transparent 32%, rgba(6, 3, 2, 0.55) 100%),
3576
- radial-gradient(circle at 20% 30%, rgba(92, 58, 28, 0.08) 0%, transparent 42%),
3577
- radial-gradient(circle at 80% 70%, rgba(72, 44, 18, 0.1) 0%, transparent 38%);
3578
- }
3579
-
3580
- /* -------------------------------------------------------------------------- */
3581
- /* Two-page spread content distribution */
3582
- /* -------------------------------------------------------------------------- */
3583
- .tome-spread-row {
3584
- gap: 0 !important;
3585
- margin: 0 !important;
3586
- }
3587
-
3588
- .realm-tabs [role="tabpanel"] {
3589
- padding-left: 2.35rem !important;
3590
- padding-right: 2.35rem !important;
3591
- clip-path: none !important;
3592
- overflow: hidden !important;
3593
- border-radius: 3px 8px 8px 3px !important;
3594
- }
3595
-
3596
- .realm-tabs [role="tabpanel"]::after {
3597
- width: 88px;
3598
- opacity: 0.95;
3599
- }
3600
-
3601
- .book-header,
3602
- .explore-intro,
3603
- .rel-graph-wrap > .rel-graph-desc {
3604
- max-width: calc(50% - 2rem);
3605
- margin-left: 0;
3606
- padding-right: 1.5rem;
3607
- }
3608
-
3609
- .book-container .book-header {
3610
- max-width: 100%;
3611
- padding-right: 0;
3612
- text-align: center;
3613
- margin-bottom: 0.75rem;
3614
- }
3615
-
3616
- .book-entries {
3617
- column-count: 2;
3618
- column-gap: 3.5rem;
3619
- padding: 0 0.5rem;
3620
- }
3621
-
3622
- .book-entries .book-day-header {
3623
- break-after: avoid;
3624
- }
3625
-
3626
- .book-entries .book-entry {
3627
- break-inside: avoid;
3628
- margin-bottom: 0.65rem;
3629
- }
3630
-
3631
- .explore-intro {
3632
- max-width: 100%;
3633
- text-align: center;
3634
- padding: 0 2rem;
3635
- margin-bottom: 1rem;
3636
- }
3637
-
3638
- /* -------------------------------------------------------------------------- */
3639
- /* 3D bonds graph frame */
3640
- /* -------------------------------------------------------------------------- */
3641
- .rel-graph-stage {
3642
- position: relative;
3643
- width: 100%;
3644
- height: min(62vh, 520px);
3645
- min-height: 380px;
3646
- border-radius: 14px;
3647
- overflow: hidden;
3648
- border: 1px solid rgba(138, 106, 58, 0.38);
3649
- box-shadow:
3650
- inset 0 0 32px rgba(58, 42, 26, 0.18),
3651
- 0 14px 32px rgba(76, 50, 22, 0.22);
3652
- margin-bottom: 0.85rem;
3653
- }
3654
-
3655
- .rel-graph-frame {
3656
- display: block;
3657
- width: 100%;
3658
- height: 100%;
3659
- border: none;
3660
- background: #0a0806;
3661
- }
3662
-
3663
- /* Form controls — parchment palette */
3664
- .gradio-container label,
3665
- .gradio-container .label-wrap span {
3666
- color: var(--tome-ink-faded) !important;
3667
- font-family: 'IM Fell English', serif !important;
3668
- font-size: 0.88rem !important;
3669
- }
3670
-
3671
- .gradio-container select,
3672
- .gradio-container .dropdown input,
3673
- .gradio-container .svelte-1gfkn6j {
3674
- background: #fff7e7 !important;
3675
- color: var(--tome-ink) !important;
3676
- border-color: rgba(138, 106, 58, 0.35) !important;
3677
- }
3678
-
3679
- .gradio-container .wrap.svelte-p5q82i .wrap-inner {
3680
- background: #fff7e7 !important;
3681
- }
3682
-
3683
- .sidebar-panel {
3684
- padding: 0.35rem 0 0.5rem !important;
3685
- }
3686
-
3687
- .current-event,
3688
- .realm-pulse,
3689
- .activity-feed {
3690
- margin-bottom: 0.75rem !important;
3691
- padding: 0.85rem 1rem !important;
3692
- }
3693
-
3694
- .realm-map {
3695
- margin-bottom: 0.5rem;
3696
- border-radius: 10px;
3697
- overflow: hidden;
3698
- }
3699
-
3700
- /* -------------------------------------------------------------------------- */
3701
- /* Living book spread — no scroll, printed pages, expand option */
3702
- /* -------------------------------------------------------------------------- */
3703
- /* Hidden Gradio pickers — mounted but invisible (Gradio 5 drops visible=False) */
3704
- .aether-pick-bridge {
3705
- position: fixed !important;
3706
- left: -9999px !important;
3707
- top: 0 !important;
3708
- width: 1px !important;
3709
- height: 1px !important;
3710
- overflow: hidden !important;
3711
- opacity: 0 !important;
3712
- pointer-events: none !important;
3713
- z-index: -1 !important;
3714
- margin: 0 !important;
3715
- padding: 0 !important;
3716
- border: none !important;
3717
- }
3718
-
3719
- .aether-hidden-pick,
3720
- .aether-hidden-pick.block,
3721
- .aether-pick-bridge .block {
3722
- width: 1px !important;
3723
- height: 1px !important;
3724
- min-height: 0 !important;
3725
- margin: 0 !important;
3726
- padding: 0 !important;
3727
- border: none !important;
3728
- box-shadow: none !important;
3729
- background: transparent !important;
3730
- overflow: hidden !important;
3731
- }
3732
-
3733
- .aether-hidden-pick textarea,
3734
- .aether-hidden-pick input {
3735
- width: 1px !important;
3736
- height: 1px !important;
3737
- min-height: 0 !important;
3738
- padding: 0 !important;
3739
- border: none !important;
3740
- opacity: 0 !important;
3741
- }
3742
-
3743
- .tome-offpage-store {
3744
- display: none !important;
3745
- height: 0 !important;
3746
- max-height: 0 !important;
3747
- overflow: hidden !important;
3748
- visibility: hidden !important;
3749
- pointer-events: none !important;
3750
- margin: 0 !important;
3751
- padding: 0 !important;
3752
- }
3753
-
3754
- .tome-spread-shell {
3755
- flex: 1 1 auto;
3756
- min-height: 0;
3757
- display: flex;
3758
- flex-direction: column;
3759
- overflow: hidden;
3760
- }
3761
-
3762
- .tome-spread-row {
3763
- flex: 1 1 auto;
3764
- min-height: 0 !important;
3765
- max-height: 100% !important;
3766
- align-items: stretch !important;
3767
- overflow: hidden !important;
3768
- gap: 0 !important;
3769
- margin: 0 !important;
3770
- }
3771
-
3772
- .tome-spread-row > .column,
3773
- .tome-spread-row > .gr-column {
3774
- min-height: 0 !important;
3775
- max-height: 100% !important;
3776
- overflow: hidden !important;
3777
- }
3778
-
3779
- .tome-printed-page {
3780
- position: relative;
3781
- display: flex !important;
3782
- flex-direction: column !important;
3783
- flex-wrap: nowrap !important;
3784
- min-height: 0 !important;
3785
- max-height: 100% !important;
3786
- overflow: hidden !important;
3787
- padding: 0.75rem 1.25rem 0.65rem !important;
3788
- background: transparent !important;
3789
- box-shadow: none !important;
3790
- border: none !important;
3791
- border-radius: 0 !important;
3792
- isolation: isolate;
3793
- }
3794
-
3795
- .tome-printed-page::before {
3796
- content: "";
3797
- position: absolute;
3798
- inset: 0;
3799
- pointer-events: none;
3800
- z-index: 0;
3801
- opacity: 0.4;
3802
- background:
3803
- repeating-linear-gradient(
3804
- 0deg,
3805
- transparent,
3806
- transparent 2px,
3807
- rgba(62, 40, 18, 0.02) 2px,
3808
- rgba(62, 40, 18, 0.02) 3px
3809
- ),
3810
- radial-gradient(ellipse 100% 90% at 50% 50%, transparent 58%, rgba(48, 30, 14, 0.08) 100%);
3811
- mix-blend-mode: multiply;
3812
- }
3813
-
3814
- .tome-printed-page > * {
3815
- position: relative;
3816
- z-index: 1;
3817
- min-height: 0;
3818
- }
3819
-
3820
- /* Strip Gradio chrome — ink sits on parchment, not in nested UI cards */
3821
- .tome-printed-page > .block,
3822
- .tome-printed-page > .form,
3823
- .tome-printed-page .block,
3824
- .tome-printed-page .form,
3825
- .tome-printed-page .html-container,
3826
- .tome-printed-page .prose,
3827
- .tome-printed-page .empty,
3828
- .tome-printed-page .gr-group {
3829
- background: transparent !important;
3830
- border: none !important;
3831
- box-shadow: none !important;
3832
- border-radius: 0 !important;
3833
- padding: 0 !important;
3834
- margin: 0 !important;
3835
- overflow: visible !important;
3836
- min-height: 0 !important;
3837
- }
3838
-
3839
- .tome-printed-page > .block,
3840
- .tome-printed-page > .form {
3841
- flex-shrink: 0;
3842
- }
3843
-
3844
- .tome-printed-page > .block:has(#world-map),
3845
- .tome-printed-page > .block:has(#location-panel-host-wrap),
3846
- .tome-explore-stage > .block:has(#explore-diorama-host),
3847
- .tome-explore-stage #explore-diorama-host {
3848
- flex: 1 1 auto !important;
3849
- min-height: 260px !important;
3850
- display: flex !important;
3851
- flex-direction: column !important;
3852
- overflow: hidden !important;
3853
- }
3854
-
3855
- .tome-printed-page::-webkit-scrollbar {
3856
- display: none !important;
3857
- width: 0 !important;
3858
- }
3859
-
3860
- .tome-printed-page .block.hidden,
3861
- .tome-printed-page .form.hidden,
3862
- .tome-printed-page .block:empty,
3863
- .tome-printed-page .svelte-1gfkn6j.hidden {
3864
- display: none !important;
3865
- height: 0 !important;
3866
- max-height: 0 !important;
3867
- margin: 0 !important;
3868
- padding: 0 !important;
3869
- overflow: hidden !important;
3870
- border: none !important;
3871
- }
3872
-
3873
- .tome-expand-btn,
3874
- .tome-expand-backdrop {
3875
- display: none !important;
3876
- visibility: hidden !important;
3877
- pointer-events: none !important;
3878
- }
3879
-
3880
- /* Printed ink — content sits on paper, not in UI cards */
3881
- .tome-printed-page .current-event,
3882
- .tome-printed-page .activity-feed,
3883
- .tome-printed-page .location-panel,
3884
- .tome-printed-page .book-container,
3885
- .tome-printed-page .book-entries {
3886
- background: transparent !important;
3887
- box-shadow: none !important;
3888
- border: none !important;
3889
- border-radius: 0 !important;
3890
- }
3891
-
3892
- .tome-printed-page .current-event {
3893
- padding: 0 0 0.65rem !important;
3894
- margin: 0 0 0.5rem !important;
3895
- border-bottom: 1px solid rgba(98, 62, 28, 0.22) !important;
3896
- }
3897
-
3898
- .tome-printed-page .event-label,
3899
- .tome-printed-page .event-title,
3900
- .tome-printed-page .event-text,
3901
- .tome-printed-page .event-locations {
3902
- color: #3d2a16 !important;
3903
- text-shadow: 0 1px 0 rgba(255, 236, 196, 0.2);
3904
- }
3905
-
3906
- .tome-printed-page .event-label {
3907
- color: #7a5a28 !important;
3908
- font-family: 'IM Fell English', serif !important;
3909
- }
3910
-
3911
- .tome-printed-page .activity-feed {
3912
- padding: 0 !important;
3913
- margin: 0 !important;
3914
- overflow-x: hidden !important;
3915
- overflow-y: auto !important;
3916
- }
3917
-
3918
- .tome-printed-page .feed-item {
3919
- padding: 0.4rem 0 !important;
3920
- border-bottom: 1px solid rgba(98, 62, 28, 0.16) !important;
3921
- background: transparent !important;
3922
- }
3923
-
3924
- .tome-printed-page .feed-content {
3925
- color: #3d2a16 !important;
3926
- font-family: 'IM Fell English', serif !important;
3927
- font-size: 0.88rem !important;
3928
- line-height: 1.45 !important;
3929
- display: block !important;
3930
- overflow: visible !important;
3931
- -webkit-line-clamp: unset !important;
3932
- }
3933
-
3934
- .tome-printed-page .feed-day {
3935
- color: #8a6424 !important;
3936
- font-family: 'Cinzel', serif !important;
3937
- }
3938
-
3939
- .tome-page-left.tome-printed-page #world-map,
3940
- .tome-page-left.tome-printed-page .realm-map {
3941
- flex: 1 1 auto !important;
3942
- min-height: 280px !important;
3943
- max-height: none !important;
3944
- width: 100% !important;
3945
- border: 1px solid rgba(98, 62, 28, 0.28) !important;
3946
- border-radius: 2px !important;
3947
- box-shadow: inset 0 0 18px rgba(58, 36, 14, 0.12) !important;
3948
- background: rgba(12, 18, 14, 0.92) !important;
3949
- }
3950
-
3951
- .tome-printed-page .location-panel {
3952
- padding: 0.45rem 0 0 !important;
3953
- margin: 0 !important;
3954
- font-family: 'IM Fell English', serif !important;
3955
- font-style: italic;
3956
- font-size: 0.82rem !important;
3957
- color: #5c4228 !important;
3958
- }
3959
-
3960
- .tome-printed-page .location-panel * {
3961
- color: #5c4228 !important;
3962
- }
3963
-
3964
- .tome-book-index .tome-printed-heading {
3965
- margin-bottom: 0.75rem;
3966
- padding-bottom: 0.65rem;
3967
- border-bottom: 1px solid rgba(98, 62, 28, 0.22);
3968
- }
3969
-
3970
- .tome-book-index .book-title {
3971
- margin: 0 0 0.35rem;
3972
- font-size: 1.35rem !important;
3973
- color: #7a5a28 !important;
3974
- }
3975
-
3976
- .tome-book-index .book-subtitle {
3977
- margin: 0;
3978
- font-family: 'IM Fell English', serif;
3979
- font-style: italic;
3980
- font-size: 0.88rem;
3981
- color: #5c4228;
3982
- }
3983
-
3984
- .tome-printed-page .book-entries {
3985
- column-count: 1 !important;
3986
- column-gap: 0 !important;
3987
- overflow: hidden !important;
3988
- max-height: 100%;
3989
- }
3990
-
3991
- .tome-printed-page .book-entry {
3992
- break-inside: avoid;
3993
- margin-bottom: 0.55rem !important;
3994
- padding-bottom: 0.45rem !important;
3995
- border-bottom: 1px solid rgba(98, 62, 28, 0.14) !important;
3996
- background: transparent !important;
3997
- }
3998
-
3999
- .tome-printed-page .entry-content {
4000
- font-family: 'IM Fell English', serif !important;
4001
- font-size: 0.86rem !important;
4002
- line-height: 1.45 !important;
4003
- display: -webkit-box;
4004
- -webkit-line-clamp: 3;
4005
- -webkit-box-orient: vertical;
4006
- overflow: hidden;
4007
- }
4008
-
4009
- .tome-printed-page .book-day-header {
4010
- font-family: 'Cinzel', serif !important;
4011
- color: #8a6424 !important;
4012
- margin: 0.35rem 0 !important;
4013
- }
4014
-
4015
- /* Aged spread binding — worn parchment across both pages */
4016
- .realm-tabs [role="tabpanel"] {
4017
- background:
4018
- radial-gradient(ellipse 130px 100px at 3% 92%, rgba(72, 44, 18, 0.1) 0%, transparent 62%),
4019
- radial-gradient(ellipse 120px 95px at 97% 8%, rgba(58, 34, 14, 0.09) 0%, transparent 60%),
4020
- linear-gradient(90deg,
4021
- #e8d8b4 0%,
4022
- #e2d0a6 44.5%,
4023
- #c9a87a 48.8%,
4024
- #8e6840 49.8%,
4025
- #6b4a2c 50%,
4026
- #8e6840 50.2%,
4027
- #c9a87a 51.2%,
4028
- #e2d0a6 55.5%,
4029
- #ebe2c6 100%) !important;
4030
- }
4031
-
4032
- .realm-tabs [role="tabpanel"]::-webkit-scrollbar {
4033
- display: none !important;
4034
- width: 0 !important;
4035
- height: 0 !important;
4036
- }
4037
-
4038
- .tome-muted {
4039
- font-family: 'IM Fell English', serif;
4040
- font-style: italic;
4041
- font-size: 0.82rem;
4042
- color: #5c4228;
4043
- }
4044
-
4045
- /* Spread helpers — left/right page content */
4046
- .tome-printed-kicker {
4047
- margin: 0 0 0.2rem;
4048
- font-family: 'Cinzel', serif;
4049
- font-size: 0.72rem;
4050
- letter-spacing: 0.14em;
4051
- text-transform: uppercase;
4052
- color: #8a6424;
4053
- }
4054
-
4055
- .tome-printed-hint,
4056
- .explore-controls-hint,
4057
- .realm-summon-hint {
4058
- margin: 0 0 0.55rem;
4059
- font-family: 'IM Fell English', serif;
4060
- font-style: italic;
4061
- font-size: 0.82rem;
4062
- color: #5c4228;
4063
- }
4064
-
4065
- .realm-stats-strip {
4066
- display: flex;
4067
- flex-wrap: wrap;
4068
- gap: 0.65rem 1rem;
4069
- margin-bottom: 0.55rem;
4070
- padding: 0.45rem 0.65rem;
4071
- border-radius: 8px;
4072
- background: rgba(255, 249, 232, 0.55);
4073
- font-family: 'IM Fell English', serif;
4074
- font-size: 0.82rem;
4075
- color: #4a3420;
4076
- }
4077
-
4078
- .realm-summon-block {
4079
- margin-top: 0.35rem;
4080
- }
4081
-
4082
- .realm-summon-input textarea {
4083
- min-height: 4.2rem !important;
4084
- }
4085
-
4086
- /* Place ribbon — Explore left page */
4087
- .place-ribbon {
4088
- display: flex;
4089
- flex-direction: column;
4090
- gap: 0.45rem;
4091
- min-height: 0;
4092
- flex: 1 1 auto;
4093
- overflow: hidden;
4094
- }
4095
-
4096
- .place-ribbon-kicker,
4097
- .day-tabs-title {
4098
- margin: 0;
4099
- font-family: 'Cinzel Decorative', 'Cinzel', serif;
4100
- font-size: 1rem;
4101
- color: var(--tome-ink);
4102
- text-align: center;
4103
- }
4104
-
4105
- .place-ribbon-hint,
4106
- .day-tabs-sub {
4107
- margin: 0 0 0.35rem;
4108
- font-family: 'IM Fell English', serif;
4109
- font-style: italic;
4110
- font-size: 0.8rem;
4111
- color: #5c4228;
4112
- text-align: center;
4113
- }
4114
-
4115
- .place-ribbon-list {
4116
- display: flex;
4117
- flex-direction: column;
4118
- gap: 0.35rem;
4119
- overflow-y: auto;
4120
- min-height: 0;
4121
- flex: 1 1 auto;
4122
- padding-right: 0.15rem;
4123
- }
4124
-
4125
- .place-ribbon-item {
4126
- display: grid;
4127
- grid-template-columns: 42px 1fr auto;
4128
- gap: 0.45rem;
4129
- align-items: center;
4130
- padding: 0.35rem 0.45rem;
4131
- border: 1px solid rgba(138, 106, 58, 0.28);
4132
- border-radius: 8px;
4133
- background: rgba(255, 249, 232, 0.72);
4134
- cursor: pointer;
4135
- text-align: left;
4136
- color: var(--tome-ink);
4137
- font-family: 'IM Fell English', serif;
4138
- transition: transform 0.15s ease, box-shadow 0.15s ease;
4139
- }
4140
-
4141
- .place-ribbon-item:hover,
4142
- .place-ribbon-item.is-selected {
4143
- transform: translateX(2px);
4144
- box-shadow: 0 4px 12px rgba(76, 50, 22, 0.14);
4145
- border-color: rgba(138, 106, 58, 0.5);
4146
- }
4147
-
4148
- .ribbon-thumb {
4149
- width: 42px;
4150
- height: 42px;
4151
- border-radius: 6px;
4152
- background-size: cover;
4153
- background-position: center;
4154
- border: 1px solid rgba(138, 106, 58, 0.35);
4155
- }
4156
-
4157
- .ribbon-thumb-empty {
4158
- background: linear-gradient(135deg, #d8c49a, #b89562);
4159
- }
4160
-
4161
- .ribbon-label {
4162
- font-family: 'Cinzel', serif;
4163
- font-size: 0.78rem;
4164
- line-height: 1.2;
4165
- }
4166
-
4167
- .ribbon-count {
4168
- font-size: 0.68rem;
4169
- color: #6b4f30;
4170
- white-space: nowrap;
4171
- }
4172
-
4173
- /* Day tabs — Book left page */
4174
- .day-tabs-wrap {
4175
- display: flex;
4176
- flex-direction: column;
4177
- gap: 0.35rem;
4178
- min-height: 0;
4179
- }
4180
-
4181
- .day-tabs {
4182
- display: flex;
4183
- flex-direction: column;
4184
- gap: 0.3rem;
4185
- overflow-y: auto;
4186
- max-height: 220px;
4187
- }
4188
-
4189
- .day-tab {
4190
- padding: 0.4rem 0.55rem;
4191
- border: 1px solid rgba(138, 106, 58, 0.28);
4192
- border-radius: 8px;
4193
- background: rgba(255, 249, 232, 0.72);
4194
- font-family: 'Cinzel', serif;
4195
- font-size: 0.82rem;
4196
- color: var(--tome-ink);
4197
- cursor: pointer;
4198
- text-align: left;
4199
- }
4200
-
4201
- .day-tab.is-active,
4202
- .day-tab:hover {
4203
- background: rgba(255, 244, 214, 0.95);
4204
- border-color: rgba(138, 106, 58, 0.55);
4205
- }
4206
-
4207
- .book-day-view .book-entries {
4208
- column-count: 1 !important;
4209
- padding: 0;
4210
- }
4211
-
4212
- .book-day-banner {
4213
- font-family: 'Cinzel Decorative', 'Cinzel', serif;
4214
- font-size: 1.1rem;
4215
- margin: 0 0 0.65rem;
4216
- color: #6b4a2c;
4217
- }
4218
-
4219
- /* Bonds sidebar */
4220
- .bonds-sidebar {
4221
- display: flex;
4222
- flex-direction: column;
4223
- gap: 0.45rem;
4224
- min-height: 0;
4225
- overflow: hidden auto;
4226
- }
4227
-
4228
- .bonds-sidebar-desc,
4229
- .bonds-sidebar-empty {
4230
- font-family: 'IM Fell English', serif;
4231
- font-style: italic;
4232
- font-size: 0.84rem;
4233
- color: #5c4228;
4234
- margin: 0;
4235
- }
4236
-
4237
- .bonds-sidebar .rel-legend {
4238
- display: flex;
4239
- flex-wrap: wrap;
4240
- gap: 0.35rem 0.55rem;
4241
- }
4242
-
4243
- .bonds-sidebar .rel-list {
4244
- margin: 0;
4245
- padding-left: 1rem;
4246
- font-family: 'IM Fell English', serif;
4247
- font-size: 0.78rem;
4248
- line-height: 1.35;
4249
- color: var(--tome-ink);
4250
- }
4251
-
4252
- .tome-explore-stage .diorama-wrap,
4253
- .tome-explore-stage .rel-graph-stage {
4254
- flex: 1 1 auto;
4255
- min-height: 280px;
4256
- }
4257
-
4258
- .tome-souls-index .entity-grid {
4259
- display: flex;
4260
- flex-direction: column;
4261
- gap: 0.45rem;
4262
- max-height: 340px;
4263
- overflow-y: auto;
4264
- }
4265
-
4266
- .tome-souls-index .entity-grid-card {
4267
- display: grid;
4268
- grid-template-columns: 56px 1fr;
4269
- min-height: 72px;
4270
- }
4271
-
4272
- .souls-filter-row,
4273
- .souls-search-row {
4274
- display: flex !important;
4275
- flex-wrap: wrap !important;
4276
- gap: 0.45rem !important;
4277
- margin-bottom: 0.35rem !important;
4278
- align-items: flex-end !important;
4279
- position: static !important;
4280
- z-index: auto !important;
4281
- flex: 0 0 auto !important;
4282
- }
4283
-
4284
- .tome-souls-index .souls-filter-row > .block,
4285
- .tome-souls-index .souls-filter-row > .form {
4286
- flex: 1 1 calc(50% - 0.35rem) !important;
4287
- min-width: 0 !important;
4288
- max-width: 100% !important;
4289
- margin: 0 !important;
4290
- }
4291
-
4292
- .tome-souls-index .souls-search-row {
4293
- margin-bottom: 0.55rem !important;
4294
- padding-bottom: 0.55rem !important;
4295
- border-bottom: 1px solid rgba(138, 106, 58, 0.22);
4296
- }
4297
-
4298
- .tome-souls-index .souls-search-row > .block,
4299
- .tome-souls-index .souls-search-row > .form {
4300
- flex: 1 1 100% !important;
4301
- width: 100% !important;
4302
- max-width: 100% !important;
4303
- margin: 0 !important;
4304
- }
4305
-
4306
- .tome-souls-index .souls-filter-row input,
4307
- .tome-souls-index .souls-filter-row textarea,
4308
- .tome-souls-index .souls-search-row input,
4309
- .tome-souls-index .souls-search-row textarea {
4310
- width: 100% !important;
4311
- max-width: 100% !important;
4312
- box-sizing: border-box !important;
4313
- }
4314
-
4315
- .tome-souls-index > .block:has(.entity-grid),
4316
- .tome-souls-index > .block:has(.html-container) {
4317
- flex: 1 1 auto !important;
4318
- min-height: 0 !important;
4319
- overflow: hidden !important;
4320
- margin-top: 0.2rem !important;
4321
- position: relative !important;
4322
- z-index: 1 !important;
4323
- }
4324
-
4325
- /* Entity hologram — Souls right page */
4326
- .entity-hologram {
4327
- position: relative;
4328
- perspective: 900px;
4329
- min-height: 320px;
4330
- flex: 1 1 auto;
4331
- }
4332
-
4333
- .entity-hologram-empty .hologram-stage {
4334
- display: grid;
4335
- place-items: center;
4336
- min-height: 280px;
4337
- border: 1px dashed rgba(138, 106, 58, 0.35);
4338
- border-radius: 12px;
4339
- background: rgba(255, 249, 232, 0.45);
4340
- }
4341
-
4342
- .hologram-hint {
4343
- font-family: 'IM Fell English', serif;
4344
- font-style: italic;
4345
- color: #5c4228;
4346
- text-align: center;
4347
- padding: 1rem;
4348
- }
4349
-
4350
- .hologram-beam {
4351
- position: absolute;
4352
- left: 50%;
4353
- bottom: 8%;
4354
- width: 62%;
4355
- height: 42%;
4356
- transform: translateX(-50%);
4357
- background: radial-gradient(ellipse at center, rgba(201, 161, 59, 0.22), transparent 68%);
4358
- pointer-events: none;
4359
- filter: blur(8px);
4360
- animation: hologramPulse 3.2s ease-in-out infinite;
4361
- }
4362
-
4363
- @keyframes hologramPulse {
4364
- 0%, 100% { opacity: 0.45; transform: translateX(-50%) scale(0.96); }
4365
- 50% { opacity: 0.85; transform: translateX(-50%) scale(1.04); }
4366
- }
4367
-
4368
- .hologram-stage {
4369
- position: relative;
4370
- transform: rotateX(8deg) translateZ(12px);
4371
- transform-style: preserve-3d;
4372
- border: 1px solid rgba(201, 161, 59, 0.35);
4373
- border-radius: 14px;
4374
- background: linear-gradient(180deg, rgba(12, 10, 8, 0.92), rgba(24, 18, 12, 0.88));
4375
- box-shadow:
4376
- 0 18px 40px rgba(0, 0, 0, 0.35),
4377
- 0 0 28px rgba(201, 161, 59, 0.12);
4378
- overflow: hidden;
4379
- color: #f4e8c8;
4380
- }
4381
-
4382
- .hologram-banner {
4383
- height: 88px;
4384
- background-size: cover;
4385
- background-position: center;
4386
- position: relative;
4387
- }
4388
-
4389
- .hologram-banner-scrim {
4390
- position: absolute;
4391
- inset: 0;
4392
- background: linear-gradient(180deg, transparent, rgba(10, 8, 6, 0.85));
4393
- }
4394
-
4395
- .hologram-head {
4396
- position: relative;
4397
- }
4398
-
4399
- .hologram-portrait-wrap {
4400
- position: absolute;
4401
- top: 52px;
4402
- left: 1rem;
4403
- z-index: 2;
4404
- filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.45));
4405
- }
4406
-
4407
- .hologram-body {
4408
- padding: 3.2rem 1rem 1rem;
4409
- font-family: 'IM Fell English', serif;
4410
- }
4411
-
4412
- .hologram-meta {
4413
- margin: 0 0 0.25rem;
4414
- font-size: 0.72rem;
4415
- letter-spacing: 0.06em;
4416
- text-transform: uppercase;
4417
- color: #c9a13b;
4418
- }
4419
-
4420
- .hologram-name {
4421
- margin: 0 0 0.45rem;
4422
- font-family: 'Cinzel Decorative', 'Cinzel', serif;
4423
- font-size: 1.25rem;
4424
- color: #f8e4a8;
4425
- }
4426
-
4427
- .hologram-appearance,
4428
- .hologram-memory {
4429
- margin: 0 0 0.55rem;
4430
- font-size: 0.88rem;
4431
- line-height: 1.45;
4432
- color: #e8dcc0;
4433
- }
4434
-
4435
- .hologram-goals {
4436
- font-size: 0.82rem;
4437
- margin-bottom: 0.45rem;
4438
- color: #d8c8a4;
4439
- }
4440
-
4441
- .hologram-greeting {
4442
- margin: 0.35rem 0 0.55rem;
4443
- padding-left: 0.75rem;
4444
- border-left: 2px solid rgba(201, 161, 59, 0.45);
4445
- font-style: italic;
4446
- color: #f0e2b8;
4447
- }
4448
-
4449
- /* Closed book overlay after last page */
4450
- .realm-opening.is-reclosed {
4451
- opacity: 1 !important;
4452
- visibility: visible !important;
4453
- pointer-events: auto !important;
4454
- }
4455
-
4456
- .realm-opening.is-reclosed .realm-book-stage {
4457
- display: flex !important;
4458
- }
4459
-
4460
- .realm-opening.is-reclosed .realm-book-closed {
4461
- opacity: 1 !important;
4462
- pointer-events: auto !important;
4463
- transform: none !important;
4464
- }
4465
-
4466
- .realm-opening.is-reclosed .realm-prologue-card,
4467
- .realm-opening.is-reclosed .realm-book-open {
4468
- display: none !important;
4469
- }
4470
-
4471
- .realm-cover-card {
4472
- background:
4473
- radial-gradient(circle at 22% 12%, rgba(255, 240, 198, 0.1), transparent 30%),
4474
- radial-gradient(circle at 78% 88%, rgba(0, 0, 0, 0.22), transparent 42%),
4475
- linear-gradient(155deg, #4a2e1a 0%, #2e1a10 38%, #1a0f08 100%) !important;
4476
- border-color: rgba(120, 78, 42, 0.65) !important;
4477
- }
4478
-
4479
- .tome-printed-page .current-event,
4480
- .tome-printed-page .realm-pulse,
4481
- .tome-printed-page .activity-feed,
4482
- .tome-printed-page .book-container,
4483
- .tome-printed-page .entity-hologram-empty .hologram-stage {
4484
- background: rgba(255, 249, 232, 0.62) !important;
4485
- box-shadow: none !important;
4486
- border: 1px solid rgba(138, 106, 58, 0.22) !important;
4487
- }
4488
-
4489
- /* ── Centered spread pages with ornaments ── */
4490
- .tome-page-centered {
4491
- justify-content: flex-start !important;
4492
- flex-wrap: nowrap !important;
4493
- gap: 0.45rem !important;
4494
- }
4495
-
4496
- .tome-ornament {
4497
- text-align: center;
4498
- font-family: 'Cinzel', serif;
4499
- font-size: 0.72rem;
4500
- letter-spacing: 0.22em;
4501
- color: rgba(122, 90, 40, 0.55);
4502
- margin: 0.15rem 0;
4503
- flex-shrink: 0;
4504
- }
4505
-
4506
- .tome-ornament.top { margin-bottom: 0.35rem; }
4507
- .tome-ornament.bottom { margin-top: auto; padding-top: 0.35rem; }
4508
-
4509
- /* ── Location popup modal ── */
4510
- .location-panel-host {
4511
- position: relative;
4512
- min-height: 0;
4513
- }
4514
-
4515
- .location-panel-host .map-hint {
4516
- text-align: center;
4517
- font-family: 'IM Fell English', serif;
4518
- font-style: italic;
4519
- color: #5c4228;
4520
- padding: 0.5rem;
4521
- }
4522
-
4523
- .location-modal-overlay {
4524
- display: none;
4525
- position: fixed;
4526
- inset: 0;
4527
- z-index: 8800;
4528
- background: rgba(12, 8, 5, 0.72);
4529
- backdrop-filter: blur(4px);
4530
- align-items: center;
4531
- justify-content: center;
4532
- padding: 1rem;
4533
- }
4534
-
4535
- .location-modal-overlay.is-open {
4536
- display: flex;
4537
- animation: modalFadeIn 0.35s ease;
4538
- }
4539
-
4540
- @keyframes modalFadeIn {
4541
- from { opacity: 0; }
4542
- to { opacity: 1; }
4543
- }
4544
-
4545
- .location-modal-card {
4546
- position: relative;
4547
- width: min(420px, 92vw);
4548
- max-height: min(78vh, 560px);
4549
- overflow: auto;
4550
- border-radius: 14px;
4551
- transform: perspective(900px) rotateX(6deg) scale(0.98);
4552
- animation: modalPop 0.42s cubic-bezier(0.34, 1.2, 0.64, 1);
4553
- box-shadow:
4554
- 0 28px 64px rgba(0, 0, 0, 0.55),
4555
- 0 0 40px rgba(201, 161, 59, 0.15);
4556
- }
4557
-
4558
- @keyframes modalPop {
4559
- from { opacity: 0; transform: perspective(900px) rotateX(14deg) translateY(24px) scale(0.92); }
4560
- to { opacity: 1; transform: perspective(900px) rotateX(6deg) scale(0.98); }
4561
- }
4562
-
4563
- .location-modal-close {
4564
- position: absolute;
4565
- top: 0.55rem;
4566
- right: 0.65rem;
4567
- z-index: 3;
4568
- width: 28px;
4569
- height: 28px;
4570
- border-radius: 50%;
4571
- background: rgba(20, 12, 8, 0.65);
4572
- color: #f4e8c8;
4573
- display: grid;
4574
- place-items: center;
4575
- cursor: pointer;
4576
- font-size: 0.9rem;
4577
- border: 1px solid rgba(201, 161, 59, 0.35);
4578
- }
4579
-
4580
- .location-modal-card .location-panel {
4581
- margin: 0 !important;
4582
- border: none !important;
4583
- box-shadow: none !important;
4584
- }
4585
-
4586
- /* Stacked modal — image on top, title + text below */
4587
- .location-panel-stacked {
4588
- background: linear-gradient(180deg, #f8efd8, #ead9b3) !important;
4589
- }
4590
-
4591
- .location-panel-stacked .location-panel-image-wrap {
4592
- width: 100%;
4593
- height: min(200px, 34vh);
4594
- overflow: hidden;
4595
- background: #1a120c;
4596
- flex-shrink: 0;
4597
- }
4598
-
4599
- .location-panel-stacked .location-panel-image {
4600
- width: 100%;
4601
- height: 100%;
4602
- object-fit: cover;
4603
- display: block;
4604
- }
4605
-
4606
- .location-panel-stacked .location-panel-content {
4607
- padding: 1rem 1.15rem 1.2rem !important;
4608
- text-align: left;
4609
- }
4610
-
4611
- .location-panel-stacked .location-panel-name {
4612
- position: static !important;
4613
- z-index: auto !important;
4614
- color: #3d2a16 !important;
4615
- font-family: 'Cinzel Decorative', 'Cinzel', serif !important;
4616
- font-size: 1.05rem !important;
4617
- letter-spacing: 0.06em;
4618
- margin: 0 0 0.55rem !important;
4619
- padding: 0 !important;
4620
- text-shadow: none !important;
4621
- line-height: 1.3;
4622
- }
4623
-
4624
- .location-panel-stacked .location-panel-desc {
4625
- color: #4a3420 !important;
4626
- font-family: 'IM Fell English', serif !important;
4627
- font-size: 0.92rem !important;
4628
- line-height: 1.55 !important;
4629
- margin: 0 0 0.65rem !important;
4630
- }
4631
-
4632
- .location-panel-stacked .location-panel-special {
4633
- color: #7a5528 !important;
4634
- font-family: 'IM Fell English', serif !important;
4635
- font-style: italic;
4636
- font-size: 0.84rem !important;
4637
- margin: 0 0 0.5rem !important;
4638
- opacity: 1 !important;
4639
- }
4640
-
4641
- .location-panel-stacked .location-soul-count {
4642
- color: #6b4e2c !important;
4643
- font-size: 0.78rem !important;
4644
- margin: 0 !important;
4645
- padding-top: 0.45rem;
4646
- border-top: 1px solid rgba(138, 106, 58, 0.22);
4647
- }
4648
-
4649
- .location-modal-card .location-panel-stacked {
4650
- border-radius: 12px;
4651
- overflow: hidden;
4652
- }
4653
-
4654
- #aether-location-modal .location-modal-close {
4655
- top: 0.45rem;
4656
- right: 0.5rem;
4657
- background: rgba(12, 8, 5, 0.72);
4658
- }
4659
-
4660
- .location-soul-count {
4661
- color: #5c4228;
4662
- font-size: 0.8rem;
4663
- margin-bottom: 0.75rem;
4664
- font-family: 'IM Fell English', serif;
4665
- }
4666
-
4667
- /* ── Explore spread — force 3D diorama visible ── */
4668
- .tome-explore-index,
4669
- .tome-explore-stage {
4670
- display: flex !important;
4671
- flex-direction: column !important;
4672
- min-height: 0 !important;
4673
- flex: 1 1 auto !important;
4674
- }
4675
-
4676
- .tome-explore-index .place-ribbon {
4677
- flex: 1 1 auto;
4678
- min-height: 180px;
4679
- }
4680
-
4681
- .tome-explore-index .place-ribbon-list {
4682
- flex: 1 1 auto;
4683
- min-height: 120px;
4684
- max-height: 420px;
4685
- scrollbar-width: none;
4686
- }
4687
-
4688
- .tome-explore-index .place-ribbon-list::-webkit-scrollbar {
4689
- display: none;
4690
- width: 0;
4691
- }
4692
-
4693
- .tome-explore-stage > .block,
4694
- .tome-explore-stage > .form,
4695
- .tome-explore-stage #explore-diorama-host,
4696
- .tome-explore-stage #explore-diorama-host > div {
4697
- flex: 1 1 auto !important;
4698
- min-height: 260px !important;
4699
- display: flex !important;
4700
- flex-direction: column !important;
4701
- }
4702
-
4703
- .tome-explore-stage .diorama-wrap {
4704
- flex: 1 1 auto !important;
4705
- min-height: 260px !important;
4706
- max-height: 100% !important;
4707
- margin: 0 !important;
4708
- display: flex !important;
4709
- flex-direction: column !important;
4710
- }
4711
-
4712
- .tome-explore-stage .diorama-header {
4713
- display: none !important;
4714
- }
4715
-
4716
- .tome-explore-stage .diorama-stage {
4717
- flex: 1 1 auto !important;
4718
- min-height: 240px !important;
4719
- }
4720
-
4721
- .tome-explore-stage .diorama-frame {
4722
- min-height: 240px !important;
4723
- height: 100% !important;
4724
- max-height: 400px !important;
4725
- }
4726
-
4727
- .tome-explore-stage .diorama-empty {
4728
- flex: 1 1 auto;
4729
- min-height: 240px;
4730
- display: grid;
4731
- place-items: center;
4732
- padding: 1rem;
4733
- text-align: center;
4734
- border: 1px dashed rgba(138, 106, 58, 0.35);
4735
- border-radius: 12px;
4736
- font-family: 'IM Fell English', serif;
4737
- }
4738
-
4739
- /* ── Souls spread fix ── */
4740
- .tome-souls-index,
4741
- .tome-souls-stage {
4742
- display: flex !important;
4743
- flex-direction: column !important;
4744
- min-height: 0 !important;
4745
- }
4746
-
4747
- .tome-souls-index .entity-grid {
4748
- flex: 1 1 auto;
4749
- max-height: none;
4750
- min-height: 200px;
4751
- }
4752
-
4753
- .tome-souls-stage .entity-hologram {
4754
- flex: 1 1 auto;
4755
- min-height: 280px;
4756
- }
4757
-
4758
- #tome-spreads [role="tabpanel"]:has(#entities) .featured-section {
4759
- display: none !important;
4760
- }
4761
-
4762
- /* ── Book 3D cover flip ── */
4763
- .realm-book-3d {
4764
- position: relative;
4765
- width: min(760px, 94vw);
4766
- margin: 0 auto;
4767
- box-sizing: border-box;
4768
- transform-style: preserve-3d;
4769
- transition: transform 1.15s cubic-bezier(0.45, 0, 0.2, 1);
4770
- }
4771
-
4772
- .realm-book-3d.show-back {
4773
- transform: rotateY(180deg);
4774
- }
4775
-
4776
- .realm-book-3d.is-opening {
4777
- opacity: 0;
4778
- pointer-events: none;
4779
- transition: opacity 0.85s ease;
4780
- }
4781
-
4782
- .realm-book-face {
4783
- backface-visibility: hidden;
4784
- -webkit-backface-visibility: hidden;
4785
- }
4786
-
4787
- .realm-book-closed,
4788
- .realm-book-front {
4789
- position: relative;
4790
- width: 100%;
4791
- transform-style: preserve-3d;
4792
- }
4793
-
4794
- .realm-book-back {
4795
- position: absolute;
4796
- inset: 0;
4797
- transform: rotateY(180deg);
4798
- }
4799
-
4800
- .realm-book-closed .realm-book-spine {
4801
- left: 0 !important;
4802
- top: 10px !important;
4803
- bottom: 10px !important;
4804
- width: 16px !important;
4805
- height: auto !important;
4806
- transform: translateX(-100%) !important;
4807
- border-radius: 8px 0 0 8px !important;
4808
- z-index: 1;
4809
- }
4810
-
4811
- .realm-cover-back {
4812
- display: flex;
4813
- flex-direction: column;
4814
- align-items: center;
4815
- justify-content: center;
4816
- min-height: min(380px, 58vh);
4817
- background:
4818
- radial-gradient(circle at 30% 20%, rgba(255, 240, 198, 0.08), transparent 32%),
4819
- radial-gradient(circle at 70% 80%, rgba(0, 0, 0, 0.28), transparent 40%),
4820
- linear-gradient(155deg, #3d2616 0%, #24150c 42%, #120a06 100%) !important;
4821
- }
4822
-
4823
- .realm-back-ornament {
4824
- font-size: 2.4rem;
4825
- color: rgba(201, 161, 59, 0.45);
4826
- margin-bottom: 0.75rem;
4827
- }
4828
-
4829
- .realm-back-text {
4830
- font-family: 'IM Fell English', serif;
4831
- font-style: italic;
4832
- color: #d8c49a;
4833
- line-height: 1.55;
4834
- margin: 0 0 1.25rem;
4835
- max-width: 22rem;
4836
- }
4837
-
4838
- .realm-opening.is-reclosed .realm-book-stage {
4839
- display: flex !important;
4840
- align-items: center;
4841
- justify-content: center;
4842
- }
4843
-
4844
- .realm-opening.is-reclosed .realm-book-3d {
4845
- opacity: 1 !important;
4846
- pointer-events: auto !important;
4847
- }
4848
-
4849
- .realm-opening.is-closing .realm-book-stage {
4850
- perspective: 1400px;
4851
- }
4852
-
4853
- .realm-opening.is-back-visible .realm-book-open,
4854
- .realm-opening.is-back-visible .realm-prologue-card {
4855
- display: none !important;
4856
- }
4857
-
4858
- /* ═══════════════════════════════════════════════════════════════════════════
4859
- FIX PACK — centering, book edges, interactions, readability
4860
- ═══════════════════════════════════════════════════════════════════════════ */
4861
-
4862
- #realm-opening-host,
4863
- #realm-opening-host > .block,
4864
- #realm-opening-host .html-container {
4865
- position: fixed !important;
4866
- inset: 0 !important;
4867
- width: 100vw !important;
4868
- height: 100vh !important;
4869
- max-width: none !important;
4870
- margin: 0 !important;
4871
- padding: 0 !important;
4872
- left: 0 !important;
4873
- right: 0 !important;
4874
- transform: none !important;
4875
- z-index: 99999 !important;
4876
- pointer-events: none !important;
4877
- }
4878
-
4879
- /* After hoist, empty host must not blanket the realm */
4880
- #realm-opening-host:not(:has(#realm-opening)),
4881
- #realm-opening-host:empty,
4882
- body.aether-realm-entered #realm-opening-host {
4883
- display: none !important;
4884
- visibility: hidden !important;
4885
- pointer-events: none !important;
4886
- width: 0 !important;
4887
- height: 0 !important;
4888
- overflow: hidden !important;
4889
- z-index: -1 !important;
4890
- }
4891
-
4892
- #realm-opening.realm-opening-hoisted.is-closed {
4893
- display: none !important;
4894
- pointer-events: none !important;
4895
- }
4896
-
4897
- #realm-opening-host .realm-opening,
4898
- #realm-opening.realm-opening-hoisted {
4899
- position: fixed !important;
4900
- inset: 0 !important;
4901
- width: 100vw !important;
4902
- height: 100vh !important;
4903
- max-width: none !important;
4904
- margin: 0 !important;
4905
- padding: 0 !important;
4906
- left: 0 !important;
4907
- right: 0 !important;
4908
- transform: none !important;
4909
- display: flex !important;
4910
- align-items: center !important;
4911
- justify-content: center !important;
4912
- z-index: 99999 !important;
4913
- pointer-events: auto !important;
4914
- overflow-x: clip !important;
4915
- overflow-y: auto !important;
4916
- }
4917
-
4918
- .realm-opening.is-closed {
4919
- pointer-events: none !important;
4920
- }
4921
-
4922
- .realm-opening-inner {
4923
- position: relative !important;
4924
- width: min(820px, 92vw) !important;
4925
- min-height: min(480px, 72vh) !important;
4926
- display: flex !important;
4927
- align-items: center !important;
4928
- justify-content: center !important;
4929
- margin: 0 auto !important;
4930
- flex-shrink: 0 !important;
4931
- }
4932
-
4933
- .realm-opening.is-unfolding .realm-opening-inner,
4934
- .realm-opening.is-prologue .realm-opening-inner {
4935
- min-height: min(480px, 72vh) !important;
4936
- }
4937
-
4938
- .realm-book-stage {
4939
- width: 100% !important;
4940
- display: flex !important;
4941
- align-items: center !important;
4942
- justify-content: center !important;
4943
- margin: 0 auto !important;
4944
- }
4945
-
4946
- .realm-book-3d {
4947
- width: min(760px, 94vw) !important;
4948
- margin-left: auto !important;
4949
- margin-right: auto !important;
4950
- box-sizing: border-box !important;
4951
- }
4952
-
4953
- .realm-book-3d .realm-cover-card {
4954
- width: 100% !important;
4955
- max-width: 100% !important;
4956
- min-height: min(380px, 58vh) !important;
4957
- margin: 0 auto !important;
4958
- flex-shrink: 0 !important;
4959
- }
4960
-
4961
- .realm-cover-front,
4962
- .realm-cover-back {
4963
- border: 3px solid rgba(92, 58, 28, 0.75) !important;
4964
- outline: 1px solid rgba(201, 161, 59, 0.35) !important;
4965
- outline-offset: 3px;
4966
- box-shadow:
4967
- inset 0 2px 0 rgba(255, 240, 198, 0.12),
4968
- inset 0 -3px 8px rgba(0, 0, 0, 0.35),
4969
- 0 22px 60px rgba(0, 0, 0, 0.55) !important;
4970
- }
4971
-
4972
- /* Book spread — leather edge frame (top + sides) */
4973
- .realm-tabs [role="tabpanel"] {
4974
- box-shadow:
4975
- inset 0 14px 20px -6px rgba(48, 28, 14, 0.18),
4976
- inset 14px 0 18px -8px rgba(72, 44, 18, 0.12),
4977
- inset -14px 0 18px -8px rgba(72, 44, 18, 0.12),
4978
- inset 0 -8px 16px rgba(168, 134, 83, 0.1),
4979
- 0 18px 38px rgba(76, 50, 22, 0.26) !important;
4980
- }
4981
-
4982
- /* Page I — content prints directly on parchment, no nested cards */
4983
- .tome-page-left.tome-page-centered {
4984
- display: flex !important;
4985
- flex-direction: column !important;
4986
- justify-content: flex-start !important;
4987
- gap: 0 !important;
4988
- min-height: 0 !important;
4989
- background: transparent !important;
4990
- border: none !important;
4991
- border-radius: 0 !important;
4992
- box-shadow: none !important;
4993
- }
4994
-
4995
- .tome-page-left .tome-ornament.top {
4996
- margin-bottom: 0.15rem !important;
4997
- }
4998
-
4999
- .tome-page-left .tome-printed-kicker {
5000
- margin: 0 0 0.08rem !important;
5001
- font-size: 0.92rem !important;
5002
- text-align: center;
5003
- }
5004
-
5005
- .tome-page-left .tome-printed-hint {
5006
- margin: 0 0 0.3rem !important;
5007
- font-size: 0.8rem !important;
5008
- line-height: 1.35 !important;
5009
- text-align: center;
5010
- }
5011
-
5012
- .tome-page-right.tome-page-centered {
5013
- display: flex !important;
5014
- flex-direction: column !important;
5015
- justify-content: flex-start !important;
5016
- gap: 0.3rem !important;
5017
- min-height: 0 !important;
5018
- position: relative !important;
5019
- background: transparent !important;
5020
- border: none !important;
5021
- border-radius: 0 !important;
5022
- box-shadow: none !important;
5023
- overflow: hidden !important;
5024
- }
5025
-
5026
- .tome-page-right.tome-page-centered::after {
5027
- content: "❧";
5028
- position: absolute;
5029
- right: 0.55rem;
5030
- bottom: 0.45rem;
5031
- font-size: 1.15rem;
5032
- color: rgba(138, 106, 58, 0.22);
5033
- pointer-events: none;
5034
- z-index: 0;
5035
- }
5036
-
5037
- .tome-page-right .tome-printed-kicker {
5038
- margin: 0 0 0.08rem !important;
5039
- font-size: 0.92rem !important;
5040
- text-align: center;
5041
- }
5042
-
5043
- .tome-page-right .tome-printed-hint {
5044
- margin: 0 0 0.35rem !important;
5045
- font-size: 0.8rem !important;
5046
- text-align: center;
5047
- line-height: 1.35 !important;
5048
- }
5049
-
5050
- .tome-page-left > .block,
5051
- .tome-page-left > .form,
5052
- .tome-page-right > .block,
5053
- .tome-page-right > .form,
5054
- .tome-page-left .html-container,
5055
- .tome-page-right .html-container {
5056
- width: 100% !important;
5057
- max-width: 100% !important;
5058
- }
5059
-
5060
- .tome-page-right .realm-stats-strip {
5061
- width: 100% !important;
5062
- max-width: 100% !important;
5063
- margin-left: auto !important;
5064
- margin-right: auto !important;
5065
- justify-content: space-around !important;
5066
- text-align: center;
5067
- margin-bottom: 0.3rem !important;
5068
- border: 1px solid rgba(138, 106, 58, 0.2);
5069
- background: rgba(255, 249, 232, 0.62) !important;
5070
- }
5071
-
5072
- .tome-realm-vignette,
5073
- .tome-realm-vignette .world-vignette {
5074
- width: 100% !important;
5075
- margin: 0 0 0.3rem !important;
5076
- }
5077
-
5078
- .tome-page-right .world-vignette {
5079
- padding: 0.55rem 0.7rem !important;
5080
- border: 1px solid rgba(138, 106, 58, 0.22) !important;
5081
- border-radius: 4px !important;
5082
- background:
5083
- linear-gradient(135deg, rgba(255, 249, 232, 0.72), rgba(244, 228, 194, 0.45)) !important;
5084
- box-shadow: inset 0 0 18px rgba(58, 36, 14, 0.06) !important;
5085
- }
5086
-
5087
- .tome-page-right .vignette-label {
5088
- font-family: 'Cinzel', serif !important;
5089
- font-size: 0.62rem !important;
5090
- letter-spacing: 0.18em !important;
5091
- text-transform: uppercase !important;
5092
- color: #8a6424 !important;
5093
- margin: 0 0 0.25rem !important;
5094
- }
5095
-
5096
- .tome-page-right .vignette-title {
5097
- font-family: 'Cinzel Decorative', 'Cinzel', serif !important;
5098
- font-size: 0.95rem !important;
5099
- color: #4a3420 !important;
5100
- margin: 0 0 0.35rem !important;
5101
- }
5102
-
5103
- .tome-page-right .vignette-text {
5104
- font-family: 'IM Fell English', serif !important;
5105
- font-style: italic;
5106
- font-size: 0.84rem !important;
5107
- line-height: 1.5 !important;
5108
- color: #5c4228 !important;
5109
- margin: 0 !important;
5110
- }
5111
-
5112
- .tome-page-right .current-event {
5113
- width: 100% !important;
5114
- padding: 0.65rem 0.75rem !important;
5115
- margin: 0 0 0.3rem !important;
5116
- border: 1px solid rgba(138, 106, 58, 0.24) !important;
5117
- border-radius: 4px !important;
5118
- background: rgba(255, 249, 232, 0.5) !important;
5119
- }
5120
-
5121
- .tome-page-right.tome-page-centered .realm-pulse {
5122
- display: none !important;
5123
- }
5124
-
5125
- .tome-page-right .pulse-header {
5126
- margin-bottom: 0.45rem !important;
5127
- }
5128
-
5129
- .tome-page-right .pulse-track {
5130
- flex-direction: column !important;
5131
- overflow: hidden !important;
5132
- gap: 0.45rem !important;
5133
- max-width: 100% !important;
5134
- padding-bottom: 0 !important;
5135
- scrollbar-width: none !important;
5136
- }
5137
-
5138
- .tome-page-right .pulse-track::-webkit-scrollbar {
5139
- display: none !important;
5140
- width: 0 !important;
5141
- height: 0 !important;
5142
- }
5143
-
5144
- .tome-page-right .pulse-track .pulse-card {
5145
- flex: 0 0 auto !important;
5146
- width: 100% !important;
5147
- max-width: 100% !important;
5148
- min-width: 0 !important;
5149
- box-sizing: border-box !important;
5150
- overflow: hidden !important;
5151
- word-break: break-word !important;
5152
- background: rgba(255, 252, 240, 0.65) !important;
5153
- border: 1px solid rgba(138, 106, 58, 0.18) !important;
5154
- }
5155
-
5156
- .tome-page-right .pulse-card:nth-child(n+3) {
5157
- display: none !important;
5158
- }
5159
-
5160
- .tome-page-right .pulse-title,
5161
- .tome-page-right .pulse-headline {
5162
- color: #4a3420 !important;
5163
- }
5164
-
5165
- .tome-page-right .pulse-detail {
5166
- color: #5c4228 !important;
5167
- }
5168
-
5169
- .tome-page-right .activity-feed {
5170
- width: 100% !important;
5171
- padding: 0.5rem 0.65rem !important;
5172
- margin: 0 0 0.3rem !important;
5173
- border: 1px solid rgba(138, 106, 58, 0.2) !important;
5174
- border-radius: 4px !important;
5175
- background: rgba(255, 249, 232, 0.4) !important;
5176
- max-height: 11.5rem !important;
5177
- overflow-y: auto !important;
5178
- overflow-x: hidden !important;
5179
- -webkit-overflow-scrolling: touch;
5180
- scrollbar-width: thin;
5181
- }
5182
-
5183
- .tome-page-right .activity-feed::-webkit-scrollbar {
5184
- width: 5px;
5185
- }
5186
-
5187
- .tome-page-right .activity-feed::-webkit-scrollbar-thumb {
5188
- background: rgba(138, 106, 58, 0.45);
5189
- border-radius: 4px;
5190
- }
5191
-
5192
- .tome-page-right .activity-feed::before {
5193
- content: "Recent Pages";
5194
- display: block;
5195
- font-family: 'Cinzel', serif;
5196
- font-size: 0.62rem;
5197
- letter-spacing: 0.16em;
5198
- text-transform: uppercase;
5199
- color: #8a6424;
5200
- margin-bottom: 0.35rem;
5201
- }
5202
-
5203
- .tome-page-right .realm-summon-block {
5204
- width: 100% !important;
5205
- margin-top: 0.25rem !important;
5206
- padding: 0.5rem 0.6rem 0.35rem !important;
5207
- border: 1px solid rgba(138, 106, 58, 0.22) !important;
5208
- border-radius: 4px !important;
5209
- background: rgba(255, 249, 232, 0.55) !important;
5210
- text-align: center;
5211
- }
5212
-
5213
- .tome-page-right .tome-ornament.bottom {
5214
- margin-top: auto !important;
5215
- padding-top: 0.2rem !important;
5216
- }
5217
-
5218
- .tome-page-left .tome-ornament.bottom {
5219
- margin-top: auto !important;
5220
- padding-top: 0.2rem !important;
5221
- }
5222
-
5223
- .tome-map-chrome {
5224
- display: flex;
5225
- align-items: center;
5226
- justify-content: center;
5227
- gap: 0.45rem;
5228
- margin: 0.1rem 0 0.15rem;
5229
- flex-shrink: 0;
5230
- }
5231
-
5232
- .tome-map-chrome-line {
5233
- flex: 1;
5234
- max-width: 72px;
5235
- height: 1px;
5236
- background: linear-gradient(90deg, transparent, rgba(138, 106, 58, 0.35), transparent);
5237
- }
5238
-
5239
- .tome-map-chrome-label {
5240
- font-family: 'Cinzel', serif;
5241
- font-size: 0.58rem;
5242
- letter-spacing: 0.2em;
5243
- text-transform: uppercase;
5244
- color: rgba(122, 90, 40, 0.55);
5245
- white-space: nowrap;
5246
- }
5247
-
5248
- .tome-map-chrome-glyph {
5249
- color: rgba(138, 106, 58, 0.45);
5250
- font-size: 0.7rem;
5251
- }
5252
-
5253
- .tome-map-divider {
5254
- display: flex;
5255
- align-items: center;
5256
- justify-content: center;
5257
- gap: 0.5rem;
5258
- margin: 0.12rem 0 0.08rem;
5259
- flex-shrink: 0;
5260
- }
5261
-
5262
- .tome-map-divider-text {
5263
- font-family: 'Cinzel', serif;
5264
- font-size: 0.58rem;
5265
- letter-spacing: 0.16em;
5266
- color: rgba(122, 90, 40, 0.5);
5267
- white-space: nowrap;
5268
- }
5269
-
5270
- .tome-map-vine {
5271
- flex: 1;
5272
- height: 10px;
5273
- max-width: 88px;
5274
- background-repeat: no-repeat;
5275
- background-size: contain;
5276
- opacity: 0.55;
5277
- }
5278
-
5279
- .tome-map-vine.left {
5280
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 10'%3E%3Cpath d='M0 5 Q20 0 40 5 T80 5' fill='none' stroke='%238a6a3a' stroke-width='0.8'/%3E%3Ccircle cx='40' cy='5' r='1.2' fill='%23c9a13b'/%3E%3C/svg%3E");
5281
- background-position: right center;
5282
- }
5283
-
5284
- .tome-map-vine.right {
5285
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 10'%3E%3Cpath d='M0 5 Q20 10 40 5 T80 5' fill='none' stroke='%238a6a3a' stroke-width='0.8'/%3E%3Ccircle cx='40' cy='5' r='1.2' fill='%23c9a13b'/%3E%3C/svg%3E");
5286
- background-position: left center;
5287
- }
5288
-
5289
- .tome-page-centered .realm-stats-strip,
5290
- .tome-page-centered .current-event,
5291
- .tome-page-centered .realm-pulse,
5292
- .tome-page-centered .activity-feed {
5293
- flex-shrink: 0;
5294
- margin-bottom: 0.35rem !important;
5295
- }
5296
-
5297
- .tome-page-centered .realm-summon-block,
5298
- .tome-page-centered .realm-summon-input,
5299
- .tome-page-centered .seal-summon-btn {
5300
- flex-shrink: 0;
5301
- }
5302
-
5303
- .tome-page-left .realm-map,
5304
- .tome-page-left #world-map {
5305
- flex: 1 1 auto !important;
5306
- width: 100% !important;
5307
- max-width: 100% !important;
5308
- min-height: 280px !important;
5309
- max-height: none !important;
5310
- margin: 0.3rem auto 0 !important;
5311
- border: 1px solid rgba(98, 62, 28, 0.3) !important;
5312
- border-radius: 3px !important;
5313
- padding: 0.28rem !important;
5314
- background: rgba(10, 14, 12, 0.06) !important;
5315
- box-shadow: inset 0 0 22px rgba(58, 36, 14, 0.1) !important;
5316
- }
5317
-
5318
- .tome-page-left #world-map .html-container,
5319
- .tome-page-left #world-map .prose {
5320
- min-height: 0 !important;
5321
- }
5322
-
5323
- .tome-page-left .location-panel-host,
5324
- .tome-page-left #location-panel-host-wrap {
5325
- flex-shrink: 0 !important;
5326
- margin: 0.3rem 0 0 !important;
5327
- width: 100% !important;
5328
- }
5329
-
5330
- .tome-page-left .location-panel-host .map-hint {
5331
- padding: 0.4rem 0.5rem 0.35rem !important;
5332
- margin: 0 !important;
5333
- font-size: 0.76rem !important;
5334
- line-height: 1.4 !important;
5335
- border-top: 1px solid rgba(138, 106, 58, 0.22);
5336
- text-align: center;
5337
- }
5338
-
5339
- .tome-page-left .map-hint-selected {
5340
- text-align: left;
5341
- background: rgba(255, 249, 232, 0.55);
5342
- border: 1px solid rgba(138, 106, 58, 0.2);
5343
- border-radius: 3px;
5344
- padding: 0.45rem 0.55rem !important;
5345
- }
5346
-
5347
- .tome-page-left .map-hint-selected strong {
5348
- font-family: 'Cinzel', serif;
5349
- color: #5c3e1e;
5350
- font-weight: 600;
5351
- }
5352
-
5353
- .tome-page-left .map-hint-sub {
5354
- color: #6b4e2c;
5355
- font-style: italic;
5356
- }
5357
-
5358
- .tome-page-left .map-hint-glyph {
5359
- color: #a8843a;
5360
- }
5361
-
5362
- #aether-location-modal {
5363
- z-index: 90000 !important;
5364
- }
5365
-
5366
- /* Explore spread — centered headers, balanced gutters */
5367
- .tome-explore-index {
5368
- padding: 0.65rem 1.2rem 0.75rem 1.2rem !important;
5369
- gap: 0.5rem !important;
5370
- text-align: center;
5371
- align-items: center !important;
5372
- }
5373
-
5374
- .tome-explore-stage-header {
5375
- text-align: center;
5376
- width: 100%;
5377
- margin: 0 0 0.2rem;
5378
- flex-shrink: 0;
5379
- }
5380
-
5381
- .tome-explore-stage-header .tome-ornament.top {
5382
- margin-bottom: 0.1rem !important;
5383
- font-size: 0.62rem !important;
5384
- }
5385
-
5386
- .tome-explore-stage-header .tome-printed-kicker,
5387
- .tome-explore-stage-header .explore-controls-hint {
5388
- text-align: center;
5389
- margin-left: auto;
5390
- margin-right: auto;
5391
- max-width: 100%;
5392
- }
5393
-
5394
- .tome-explore-stage-header .tome-printed-kicker {
5395
- font-size: 0.68rem !important;
5396
- margin-bottom: 0.05rem !important;
5397
- }
5398
-
5399
- .tome-explore-stage-header .explore-controls-hint {
5400
- font-size: 0.72rem !important;
5401
- margin-bottom: 0.2rem !important;
5402
- line-height: 1.3 !important;
5403
- }
5404
-
5405
- .tome-explore-index .place-ribbon-item {
5406
- padding: 0.5rem 0.55rem !important;
5407
- margin-bottom: 0.15rem;
5408
- }
5409
-
5410
- .tome-explore-index .wander-btn,
5411
- .tome-explore-index button {
5412
- margin-top: 0.35rem !important;
5413
- }
5414
-
5415
- .tome-explore-stage {
5416
- padding: 0.5rem 1.2rem 0.55rem 1.2rem !important;
5417
- text-align: center;
5418
- align-items: center !important;
5419
- min-height: 0 !important;
5420
- }
5421
-
5422
- .tome-explore-stage > .block:has(#explore-diorama-host) {
5423
- flex: 1 1 auto !important;
5424
- min-height: 420px !important;
5425
- max-height: 100% !important;
5426
- width: 100% !important;
5427
- display: flex !important;
5428
- flex-direction: column !important;
5429
- overflow: hidden !important;
5430
- order: 1;
5431
- margin: 0 !important;
5432
- }
5433
-
5434
- .tome-explore-stage > .block:has(.tome-explore-stage-header) {
5435
- flex: 0 0 auto !important;
5436
- width: 100% !important;
5437
- min-height: auto !important;
5438
- order: 2;
5439
- margin-top: 0.25rem !important;
5440
- }
5441
-
5442
- .tome-explore-stage .diorama-header {
5443
- display: none !important;
5444
- }
5445
-
5446
- .tome-explore-stage .diorama-wrap {
5447
- flex: 1 1 auto !important;
5448
- min-height: 400px !important;
5449
- margin: 0 !important;
5450
- width: 100% !important;
5451
- border-radius: 8px !important;
5452
- }
5453
-
5454
- .tome-explore-stage .diorama-stage {
5455
- flex: 1 1 auto !important;
5456
- min-height: 400px !important;
5457
- }
5458
-
5459
- .tome-explore-stage .diorama-frame {
5460
- min-height: 400px !important;
5461
- height: 100% !important;
5462
- max-height: none !important;
5463
- background: #0c1410 !important;
5464
- }
5465
-
5466
- /* Stacked page fore-edges — cinematic book, not flat panels */
5467
- .tome-spread-row > .column.tome-page-left,
5468
- .tome-spread-row > .column.tome-page-right {
5469
- position: relative !important;
5470
- }
5471
-
5472
- .tome-spread-row > .column.tome-page-left::after {
5473
- content: "";
5474
- position: absolute;
5475
- top: 3%;
5476
- bottom: 3%;
5477
- right: 0.15rem;
5478
- width: 6px;
5479
- pointer-events: none;
5480
- z-index: 4;
5481
- border-radius: 0 2px 2px 0;
5482
- background:
5483
- repeating-linear-gradient(
5484
- 180deg,
5485
- rgba(88, 56, 24, 0.22) 0 1px,
5486
- rgba(255, 249, 232, 0.55) 1px 2.5px,
5487
- rgba(72, 44, 18, 0.14) 2.5px 3.5px
5488
- );
5489
- box-shadow: 2px 0 5px rgba(48, 28, 14, 0.1);
5490
- }
5491
-
5492
- .tome-spread-row > .column.tome-page-right::before {
5493
- content: "";
5494
- position: absolute;
5495
- top: 3%;
5496
- bottom: 3%;
5497
- left: 0.15rem;
5498
- width: 6px;
5499
- pointer-events: none;
5500
- z-index: 4;
5501
- border-radius: 2px 0 0 2px;
5502
- background:
5503
- repeating-linear-gradient(
5504
- 180deg,
5505
- rgba(88, 56, 24, 0.22) 0 1px,
5506
- rgba(255, 249, 232, 0.55) 1px 2.5px,
5507
- rgba(72, 44, 18, 0.14) 2.5px 3.5px
5508
- );
5509
- box-shadow: -2px 0 5px rgba(48, 28, 14, 0.1);
5510
- }
5511
-
5512
- .realm-tabs [role="tabpanel"]::before {
5513
- background:
5514
- linear-gradient(90deg, transparent 0 46.5%, rgba(255,255,255,0.14) 47.8%, transparent 49%),
5515
- linear-gradient(90deg, transparent 51%, rgba(255,255,255,0.14) 52.2%, transparent 53.5%),
5516
- radial-gradient(circle at 12% 18%, rgba(113, 82, 42, 0.06) 0 2px, transparent 2px),
5517
- radial-gradient(circle at 70% 74%, rgba(113, 82, 42, 0.05) 0 1.5px, transparent 1.5px) !important;
5518
- opacity: 0.42 !important;
5519
- }
5520
-
5521
- /* ── Spread pages: balanced gutters + centered content ── */
5522
- .tome-spread-row > .column.tome-page-left.tome-printed-page,
5523
- .tome-spread-row > .column.tome-page-right.tome-printed-page,
5524
- .tome-spread-row > .column.tome-explore-index,
5525
- .tome-spread-row > .column.tome-explore-stage {
5526
- flex-wrap: nowrap !important;
5527
- align-content: flex-start !important;
5528
- align-items: stretch !important;
5529
- overflow-x: hidden !important;
5530
- overflow-y: hidden !important;
5531
- box-sizing: border-box !important;
5532
- }
5533
-
5534
- .tome-spread-row > .column.tome-page-left.tome-printed-page {
5535
- padding: 0.7rem 2.25rem 0.55rem 1.15rem !important;
5536
- border-right: none !important;
5537
- }
5538
-
5539
- .tome-spread-row > .column.tome-page-right.tome-printed-page {
5540
- padding: 0.7rem 1.15rem 0.55rem 2.25rem !important;
5541
- }
5542
-
5543
- .tome-spread-row > .column.tome-printed-page > .block,
5544
- .tome-spread-row > .column.tome-printed-page > .form {
5545
- width: 100% !important;
5546
- max-width: 100% !important;
5547
- margin-left: auto !important;
5548
- margin-right: auto !important;
5549
- box-sizing: border-box !important;
5550
- overflow: hidden !important;
5551
- min-width: 0 !important;
5552
- }
5553
-
5554
- .tome-spread-row > .column.tome-printed-page .html-container,
5555
- .tome-spread-row > .column.tome-printed-page .prose {
5556
- max-width: 100% !important;
5557
- overflow: hidden !important;
5558
- }
5559
-
5560
- /* Page I right — hide pulse + collapsed Gradio blocks that bleed on outer edge */
5561
- .tome-page-right.tome-page-centered > .block:has(.realm-pulse),
5562
- .tome-page-right.tome-page-centered > .block.hidden,
5563
- .tome-page-right.tome-page-centered > .form.hidden,
5564
- .tome-page-right.tome-page-centered > .block:has(.share-caption-box.hidden),
5565
- .tome-page-right.tome-page-centered > .block:has(.soul-card-image.hidden) {
5566
- display: none !important;
5567
- height: 0 !important;
5568
- min-height: 0 !important;
5569
- max-height: 0 !important;
5570
- margin: 0 !important;
5571
- padding: 0 !important;
5572
- overflow: hidden !important;
5573
- border: none !important;
5574
- box-shadow: none !important;
5575
- }
5576
-
5577
- .tome-page-right.tome-page-centered .realm-summon-input,
5578
- .tome-page-right.tome-page-centered .realm-summon-input textarea {
5579
- width: 100% !important;
5580
- max-width: 100% !important;
5581
- box-sizing: border-box !important;
5582
- resize: vertical !important;
5583
- }
5584
-
5585
- .tome-explore-index .place-ribbon,
5586
- .tome-explore-index .place-ribbon-list,
5587
- .tome-explore-index .wander-btn {
5588
- width: 100% !important;
5589
- max-width: 100% !important;
5590
- margin-left: auto !important;
5591
- margin-right: auto !important;
5592
- box-sizing: border-box !important;
5593
- }
5594
-
5595
- /* Souls — parchment hologram (readable) */
5596
- .tome-souls-stage .hologram-stage {
5597
- background: linear-gradient(168deg, #faf3df 0%, #ebe0c4 55%, #dccca8 100%) !important;
5598
- border: 1px solid rgba(138, 106, 58, 0.45) !important;
5599
- box-shadow:
5600
- inset 0 0 24px rgba(88, 56, 24, 0.08),
5601
- 0 12px 28px rgba(76, 50, 22, 0.18) !important;
5602
- transform: none !important;
5603
- color: #3d2814 !important;
5604
- }
5605
-
5606
- .tome-souls-stage .hologram-beam {
5607
- display: none;
5608
- }
5609
-
5610
- .tome-souls-stage .hologram-meta {
5611
- color: #8a6424 !important;
5612
- }
5613
-
5614
- .tome-souls-stage .hologram-name {
5615
- color: #3d2814 !important;
5616
- font-family: 'Cinzel Decorative', 'Cinzel', serif !important;
5617
- }
5618
-
5619
- .tome-souls-stage .hologram-appearance,
5620
- .tome-souls-stage .hologram-memory,
5621
- .tome-souls-stage .hologram-goals {
5622
- color: #4a3420 !important;
5623
- font-family: 'IM Fell English', serif !important;
5624
- line-height: 1.5 !important;
5625
- }
5626
-
5627
- .tome-souls-stage .hologram-greeting {
5628
- color: #5c4228 !important;
5629
- border-left-color: rgba(138, 106, 58, 0.55) !important;
5630
- }
5631
-
5632
- .tome-souls-stage .hologram-banner {
5633
- height: 72px;
5634
- }
5635
-
5636
- .tome-souls-index .entity-grid-card.is-selected {
5637
- outline: 2px solid rgba(138, 106, 58, 0.75);
5638
- outline-offset: 2px;
5639
- box-shadow: 0 6px 16px rgba(76, 50, 22, 0.2) !important;
5640
- }
5641
-
5642
- .tome-souls-index {
5643
- padding: 0.55rem 1.2rem 0.65rem 1.2rem !important;
5644
- align-items: stretch !important;
5645
- display: flex !important;
5646
- flex-direction: column !important;
5647
- gap: 0.25rem !important;
5648
- overflow: hidden !important;
5649
- }
5650
-
5651
- .tome-souls-index .entity-grid {
5652
- max-height: 100% !important;
5653
- overflow-y: auto !important;
5654
- overflow-x: hidden !important;
5655
- flex: 1 1 auto !important;
5656
- min-height: 0 !important;
5657
- padding: 0.35rem 0.1rem 0.35rem 0 !important;
5658
- margin-top: 0.15rem !important;
5659
- }
5660
-
5661
- .tome-souls-index .entity-grid-card {
5662
- display: grid !important;
5663
- grid-template-columns: 52px minmax(0, 1fr) !important;
5664
- gap: 0.6rem !important;
5665
- align-items: start !important;
5666
- min-height: auto !important;
5667
- padding: 0.5rem 0.55rem !important;
5668
- background: rgba(255, 249, 232, 0.78) !important;
5669
- border: 1px solid rgba(138, 106, 58, 0.28) !important;
5670
- border-radius: 8px !important;
5671
- overflow: visible !important;
5672
- box-shadow: none !important;
5673
- }
5674
-
5675
- .tome-souls-index .grid-card-scrim {
5676
- display: none !important;
5677
- }
5678
-
5679
- .tome-souls-index .grid-card-portrait {
5680
- width: 52px;
5681
- height: 52px;
5682
- display: flex;
5683
- align-items: center;
5684
- justify-content: center;
5685
- }
5686
-
5687
- .tome-souls-index .grid-card-portrait .entity-avatar {
5688
- width: 48px !important;
5689
- height: 48px !important;
5690
- flex-shrink: 0;
5691
- }
5692
-
5693
- .tome-souls-index .grid-card-body {
5694
- min-width: 0;
5695
- overflow: visible;
5696
- }
5697
-
5698
- .tome-souls-index .grid-card-name {
5699
- font-family: 'Cinzel', serif !important;
5700
- font-size: 0.82rem !important;
5701
- color: #3d2814 !important;
5702
- margin: 0.1rem 0 !important;
5703
- line-height: 1.25 !important;
5704
- }
5705
-
5706
- .tome-souls-index .grid-card-type {
5707
- font-family: 'Cinzel', serif !important;
5708
- font-size: 0.58rem !important;
5709
- letter-spacing: 0.14em !important;
5710
- color: #8a6424 !important;
5711
- }
5712
-
5713
- .tome-souls-index .grid-card-preview {
5714
- font-family: 'IM Fell English', serif !important;
5715
- font-size: 0.78rem !important;
5716
- line-height: 1.4 !important;
5717
- color: #5c4228 !important;
5718
- margin: 0.15rem 0 0 !important;
5719
- display: block !important;
5720
- -webkit-line-clamp: unset !important;
5721
- overflow: visible !important;
5722
- }
5723
-
5724
- .tome-souls-index .grid-card-location,
5725
- .tome-souls-index .grid-card-meta {
5726
- font-size: 0.68rem !important;
5727
- color: #7a5a28 !important;
5728
- }
5729
-
5730
- .tome-souls-stage {
5731
- overflow: hidden !important;
5732
- align-items: stretch !important;
5733
- display: flex !important;
5734
- flex-direction: column !important;
5735
- min-height: 0 !important;
5736
- }
5737
-
5738
- .tome-souls-stage > .block {
5739
- flex: 1 1 auto !important;
5740
- min-height: 0 !important;
5741
- overflow: hidden !important;
5742
- display: flex !important;
5743
- flex-direction: column !important;
5744
- }
5745
-
5746
- .tome-souls-stage .entity-hologram {
5747
- flex: 1 1 auto !important;
5748
- min-height: 0 !important;
5749
- overflow: hidden !important;
5750
- display: flex !important;
5751
- flex-direction: column !important;
5752
- }
5753
-
5754
- .tome-souls-stage .hologram-stage {
5755
- flex: 1 1 auto !important;
5756
- min-height: 0 !important;
5757
- max-height: 100% !important;
5758
- overflow: hidden !important;
5759
- display: flex !important;
5760
- flex-direction: column !important;
5761
- }
5762
-
5763
- .tome-souls-stage .hologram-banner {
5764
- flex: 0 0 auto !important;
5765
- height: 4.5rem !important;
5766
- min-height: 4.5rem !important;
5767
- border-radius: 8px 8px 0 0;
5768
- background-size: cover !important;
5769
- background-position: center !important;
5770
- }
5771
-
5772
- .tome-souls-stage .hologram-scroll {
5773
- flex: 1 1 auto !important;
5774
- min-height: 0 !important;
5775
- overflow-y: auto !important;
5776
- overflow-x: hidden !important;
5777
- padding: 0.7rem 0.85rem 1rem !important;
5778
- -webkit-overflow-scrolling: touch;
5779
- scrollbar-width: thin;
5780
- }
5781
-
5782
- .tome-souls-stage .hologram-scroll::-webkit-scrollbar {
5783
- width: 5px;
5784
- }
5785
-
5786
- .tome-souls-stage .hologram-scroll::-webkit-scrollbar-thumb {
5787
- background: rgba(138, 106, 58, 0.45);
5788
- border-radius: 4px;
5789
- }
5790
-
5791
- .tome-souls-stage .hologram-identity-row {
5792
- display: grid !important;
5793
- grid-template-columns: 76px minmax(0, 1fr) !important;
5794
- gap: 0.75rem !important;
5795
- align-items: start !important;
5796
- margin-bottom: 0.7rem !important;
5797
- }
5798
-
5799
- .tome-souls-stage .hologram-portrait-wrap {
5800
- position: static !important;
5801
- top: auto !important;
5802
- left: auto !important;
5803
- transform: none !important;
5804
- float: none !important;
5805
- margin: 0 !important;
5806
- width: 72px;
5807
- height: 72px;
5808
- }
5809
-
5810
- .tome-souls-stage .hologram-portrait-wrap .entity-avatar {
5811
- width: 72px !important;
5812
- height: 72px !important;
5813
- }
5814
-
5815
- .tome-souls-stage .hologram-identity-text {
5816
- min-width: 0;
5817
- }
5818
-
5819
- .tome-souls-stage .hologram-meta,
5820
- .tome-souls-stage .hologram-name,
5821
- .tome-souls-stage .hologram-appearance,
5822
- .tome-souls-stage .hologram-goals,
5823
- .tome-souls-stage .hologram-goals p,
5824
- .tome-souls-stage .hologram-greeting,
5825
- .tome-souls-stage .hologram-memory {
5826
- overflow: visible !important;
5827
- text-overflow: unset !important;
5828
- -webkit-line-clamp: unset !important;
5829
- max-height: none !important;
5830
- line-height: 1.65 !important;
5831
- margin-bottom: 0.55rem !important;
5832
- }
5833
-
5834
- .tome-souls-stage .hologram-name {
5835
- margin-bottom: 0.35rem !important;
5836
- line-height: 1.3 !important;
5837
- }
5838
-
5839
- /* Bonds — compact cards */
5840
- .bond-cards {
5841
- display: flex;
5842
- flex-direction: column;
5843
- gap: 0.4rem;
5844
- overflow-y: auto;
5845
- max-height: 380px;
5846
- padding-right: 0.2rem;
5847
- }
5848
-
5849
- .bond-card {
5850
- padding: 0.45rem 0.55rem;
5851
- border-radius: 8px;
5852
- border-left: 3px solid var(--bond-color, #8a6a3a);
5853
- background: rgba(255, 249, 232, 0.72);
5854
- border: 1px solid rgba(138, 106, 58, 0.22);
5855
- border-left-width: 3px;
5856
- border-left-color: var(--bond-color, #8a6a3a);
5857
- }
5858
-
5859
- .bond-card-type {
5860
- font-family: 'Cinzel', serif;
5861
- font-size: 0.62rem;
5862
- letter-spacing: 0.1em;
5863
- text-transform: uppercase;
5864
- color: var(--bond-color, #8a6a3a);
5865
- }
5866
-
5867
- .bond-card-names {
5868
- margin: 0.15rem 0;
5869
- font-family: 'Cinzel', serif;
5870
- font-size: 0.78rem;
5871
- color: #3d2814;
5872
- line-height: 1.25;
5873
- }
5874
-
5875
- .bond-card-desc {
5876
- margin: 0;
5877
- font-family: 'IM Fell English', serif;
5878
- font-style: italic;
5879
- font-size: 0.76rem;
5880
- color: #5c4228;
5881
- line-height: 1.35;
5882
- }
5883
-
5884
- .bonds-legend-compact {
5885
- margin-bottom: 0.35rem;
5886
- }
5887
-
5888
- .bonds-legend-compact .rel-legend-item {
5889
- font-size: 0.68rem;
5890
- }
5891
-
5892
- .bonds-sidebar .rel-list {
5893
- display: none;
5894
- }
5895
-
5896
- /* Book day view — fill right page */
5897
- .tome-book-index + .column .book-day-view,
5898
- .tome-page-right .book-day-view {
5899
- min-height: 200px;
5900
- }
5901
-
5902
- .tome-page-right .book-entries {
5903
- overflow-y: auto !important;
5904
- max-height: 420px !important;
5905
- }
5906
-
5907
- .tome-book-index {
5908
- padding: 0.55rem 0.75rem !important;
5909
- gap: 0.45rem !important;
5910
- }
5911
-
5912
- /* Location modal always on top */
5913
- .location-modal-overlay.is-open {
5914
- z-index: 9900 !important;
5915
- }
5916
-
5917
- /* Back cover — match front "Open The Tome" button */
5918
- #realm-reopen-enter {
5919
- margin-top: 1rem;
5920
- border: 1px solid rgba(227, 184, 93, 0.58);
5921
- border-radius: 999px;
5922
- padding: 0.6rem 1.2rem;
5923
- font-family: 'Cinzel', serif;
5924
- font-size: 0.76rem;
5925
- letter-spacing: 0.12em;
5926
- text-transform: uppercase;
5927
- background: linear-gradient(180deg, rgba(227, 184, 93, 0.3), rgba(227, 184, 93, 0.14));
5928
- color: #fff4dd;
5929
- cursor: pointer;
5930
- }
5931
-
5932
- #realm-reopen-enter:hover {
5933
- background: linear-gradient(180deg, rgba(227, 184, 93, 0.42), rgba(110, 201, 188, 0.2));
5934
- }
5935
-
5936
- /* Page VI — Summon spread */
5937
- .tome-summon-index,
5938
- .tome-summon-stage {
5939
- flex-wrap: nowrap !important;
5940
- overflow-x: hidden !important;
5941
- overflow-y: auto !important;
5942
- justify-content: flex-start !important;
5943
- gap: 0.75rem !important;
5944
- }
5945
-
5946
- .tome-summon-index > .block,
5947
- .tome-summon-index > .form,
5948
- .tome-summon-index > button {
5949
- flex-shrink: 0;
5950
- margin-bottom: 0.2rem !important;
5951
- }
5952
-
5953
- .tome-summon-index .tome-printed-kicker {
5954
- margin: 0 0 0.45rem !important;
5955
- line-height: 1.35 !important;
5956
- }
5957
-
5958
- .tome-summon-index .summon-prompt-input {
5959
- flex: 0 0 auto !important;
5960
- width: 100% !important;
5961
- max-width: 100% !important;
5962
- min-height: 0 !important;
5963
- display: block !important;
5964
- }
5965
-
5966
- .tome-summon-index .summon-prompt-input textarea {
5967
- flex: 0 0 auto !important;
5968
- min-height: 6.5rem !important;
5969
- max-height: 8.5rem !important;
5970
- }
5971
-
5972
- .tome-summon-index .summon-leaf-hint {
5973
- font-family: 'IM Fell English', serif;
5974
- font-style: italic;
5975
- font-size: 0.82rem;
5976
- color: #5c4228;
5977
- text-align: center;
5978
- margin: 0 0 0.85rem;
5979
- line-height: 1.7;
5980
- }
5981
-
5982
- .tome-summon-index .summon-prompt-input textarea {
5983
- font-family: 'IM Fell English', serif !important;
5984
- font-size: 0.92rem !important;
5985
- line-height: 1.7 !important;
5986
- padding: 0.7rem 0.8rem !important;
5987
- }
5988
-
5989
- .tome-summon-index .summon-prompt-input {
5990
- margin-bottom: 0.35rem !important;
5991
- }
5992
-
5993
- .tome-summon-index .seal-summon-btn,
5994
- .tome-summon-index button.seal-summon-btn,
5995
- .tome-summon-index #summon-seal-btn {
5996
- flex: 0 0 auto !important;
5997
- display: block !important;
5998
- visibility: visible !important;
5999
- opacity: 1 !important;
6000
- width: 100% !important;
6001
- max-width: 100% !important;
6002
- min-height: 3rem !important;
6003
- margin: 0.25rem auto 0.85rem !important;
6004
- padding: 0.72rem 1.35rem !important;
6005
- font-size: 0.84rem !important;
6006
- font-weight: 600 !important;
6007
- letter-spacing: 0.1em !important;
6008
- text-transform: uppercase !important;
6009
- color: #fff8e8 !important;
6010
- background: linear-gradient(180deg, #d43845 0%, #8f1a28 55%, #6e1018 100%) !important;
6011
- border: 2px solid #f2d8a0 !important;
6012
- box-shadow:
6013
- 0 0 0 3px rgba(201, 42, 56, 0.18),
6014
- 0 8px 22px rgba(100, 18, 28, 0.38) !important;
6015
- position: relative !important;
6016
- z-index: 5 !important;
6017
- cursor: pointer !important;
6018
- pointer-events: auto !important;
6019
- filter: none !important;
6020
- transition: transform 0.15s ease, box-shadow 0.15s ease !important;
6021
- }
6022
-
6023
- .tome-summon-index #summon-seal-btn:hover,
6024
- .tome-summon-index button.seal-summon-btn:hover {
6025
- transform: translateY(-1px) !important;
6026
- box-shadow:
6027
- 0 0 0 3px rgba(201, 42, 56, 0.28),
6028
- 0 12px 26px rgba(100, 18, 28, 0.45) !important;
6029
- }
6030
-
6031
- .tome-summon-index .summon-submit-hint {
6032
- font-family: 'Cinzel', serif;
6033
- font-size: 0.62rem;
6034
- letter-spacing: 0.12em;
6035
- text-transform: uppercase;
6036
- color: #8a6424;
6037
- text-align: center;
6038
- margin: 0.65rem 0 0.4rem;
6039
- line-height: 1.55;
6040
- }
6041
-
6042
- .tome-summon-stage {
6043
- overflow-y: auto !important;
6044
- align-items: stretch !important;
6045
- }
6046
-
6047
- .tome-summon-stage > .block:has(.entity-result-slot),
6048
- .tome-summon-stage .entity-result-slot {
6049
- flex: 1 1 auto !important;
6050
- min-height: 0 !important;
6051
- overflow: visible !important;
6052
- }
6053
-
6054
- .tome-summon-stage .entity-card .entity-card-top {
6055
- margin-top: 0 !important;
6056
- }
6057
-
6058
- .tome-summon-stage .entity-result-slot,
6059
- .tome-summon-stage .entity-result-slot .block {
6060
- width: 100% !important;
6061
- max-width: 100% !important;
6062
- overflow: visible !important;
6063
- }
6064
-
6065
- .summon-reveal-empty {
6066
- padding: 1.25rem 1rem;
6067
- border: 1px dashed rgba(138, 106, 58, 0.38);
6068
- border-radius: 10px;
6069
- background: rgba(255, 249, 232, 0.55);
6070
- text-align: center;
6071
- margin: 0.25rem 0 0.5rem;
6072
- }
6073
-
6074
- .summon-reveal-kicker {
6075
- font-family: 'Cinzel Decorative', 'Cinzel', serif;
6076
- font-size: 0.95rem;
6077
- color: #4a3420;
6078
- margin: 0 0 0.35rem;
6079
- }
6080
-
6081
- .summon-reveal-hint {
6082
- font-family: 'IM Fell English', serif;
6083
- font-style: italic;
6084
- font-size: 0.86rem;
6085
- line-height: 1.5;
6086
- color: #5c4228;
6087
- margin: 0;
6088
- }
6089
-
6090
- .tome-summon-stage .entity-card {
6091
- background: rgba(255, 249, 232, 0.72) !important;
6092
- border: 1px solid rgba(138, 106, 58, 0.32) !important;
6093
- border-radius: 10px !important;
6094
- padding: 0 !important;
6095
- color: #3d2814 !important;
6096
- box-shadow: inset 0 0 18px rgba(88, 56, 24, 0.06) !important;
6097
- overflow: visible !important;
6098
- max-height: none !important;
6099
- }
6100
-
6101
- .tome-summon-stage .entity-card-banner {
6102
- height: 9.5rem !important;
6103
- min-height: 9.5rem !important;
6104
- width: 100% !important;
6105
- margin: 0 !important;
6106
- border-radius: 10px 10px 0 0 !important;
6107
- background-size: cover !important;
6108
- background-position: center center !important;
6109
- }
6110
-
6111
- .tome-summon-stage .entity-card-banner-scrim {
6112
- display: block !important;
6113
- background: linear-gradient(180deg, rgba(12, 10, 8, 0.05) 0%, rgba(255, 249, 232, 0.92) 100%) !important;
6114
- }
6115
-
6116
- .tome-summon-stage .entity-card-top {
6117
- display: grid !important;
6118
- grid-template-columns: 72px minmax(0, 1fr) !important;
6119
- gap: 0.65rem !important;
6120
- align-items: start !important;
6121
- margin: 0 !important;
6122
- margin-top: 0 !important;
6123
- padding: 0.75rem 0.9rem 0.5rem !important;
6124
- }
6125
-
6126
- .tome-summon-stage .entity-appearance,
6127
- .tome-summon-stage .entity-traits,
6128
- .tome-summon-stage .entity-section,
6129
- .tome-summon-stage .entity-greeting,
6130
- .tome-summon-stage .entity-footer {
6131
- padding-left: 0.9rem !important;
6132
- padding-right: 0.9rem !important;
6133
- }
6134
-
6135
- .tome-summon-stage .entity-footer {
6136
- padding-bottom: 0.9rem !important;
6137
- }
6138
-
6139
- .tome-summon-stage .entity-portrait {
6140
- grid-row: 1 / span 2;
6141
- }
6142
-
6143
- .tome-summon-stage .entity-portrait .entity-avatar {
6144
- width: 68px !important;
6145
- height: 68px !important;
6146
- }
6147
-
6148
- .tome-summon-stage .entity-name,
6149
- .tome-summon-stage .entity-type,
6150
- .tome-summon-stage .entity-status {
6151
- color: #3d2814 !important;
6152
- }
6153
-
6154
- .tome-summon-stage .entity-appearance,
6155
- .tome-summon-stage .entity-section p,
6156
- .tome-summon-stage .memory-text,
6157
- .tome-summon-stage .entity-greeting {
6158
- color: #4a3420 !important;
6159
- font-family: 'IM Fell English', serif !important;
6160
- line-height: 1.7 !important;
6161
- margin-bottom: 0.55rem !important;
6162
- overflow: visible !important;
6163
- }
6164
-
6165
- .tome-summon-stage .section-label {
6166
- color: #8a6424 !important;
6167
- font-family: 'Cinzel', serif !important;
6168
- }
6169
-
6170
- .tome-summon-stage .oracle-summoning {
6171
- margin: 0.25rem 0 0.5rem;
6172
- border-radius: 10px;
6173
- overflow: hidden;
6174
- }
 
417
  cursor: pointer;
418
  }
419
 
420
+ .location-hit {
421
+ cursor: pointer;
422
+ }
423
+
424
+ .location-label {
425
+ letter-spacing: 0.04em;
426
+ text-shadow: 0 1px 8px rgba(0,0,0,0.75);
427
+ pointer-events: none;
428
+ }
429
+
430
  .location-node:hover .location-circle {
431
  opacity: 0.5 !important;
432
  transform: scale(1.08);
 
650
  margin: 0.5rem 0 0;
651
  }
652
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
653
  /* Summon form */
654
  .summon-section {
655
  background: linear-gradient(135deg, rgba(42,74,58,0.25), var(--realm-bg-secondary));
 
811
  animation: slide-up 0.3s ease-out;
812
  }
813
 
814
+ .location-panel-empty {
815
+ padding: 1rem 1.1rem;
816
+ border-left: 3px solid var(--realm-accent-gold);
817
+ }
818
+
819
+ .location-panel-empty-title {
820
+ margin: 0 0 0.35rem;
821
+ font-family: 'Cinzel', serif;
822
+ color: var(--realm-accent-gold);
823
+ font-size: 0.74rem;
824
+ letter-spacing: 0.1em;
825
+ text-transform: uppercase;
826
+ }
827
+
828
+ .location-panel-empty-copy {
829
+ margin: 0;
830
+ font-family: 'EB Garamond', serif;
831
+ color: var(--realm-text-secondary);
832
+ line-height: 1.5;
833
+ font-size: 0.92rem;
834
+ }
835
+
836
  .location-panel-banner {
837
  position: relative;
838
  height: 120px;
 
1439
 
1440
  .diorama-stage {
1441
  position: relative;
 
 
 
1442
  }
1443
 
1444
  .diorama-frame {
 
1451
  cursor: crosshair;
1452
  }
1453
 
1454
+ /* Single global walk pad (one instance avoids duplicate stacks per diorama) */
1455
  #aether-walk-pad {
1456
  display: none !important;
1457
+ position: fixed;
1458
+ left: 0.75rem;
1459
+ bottom: 0.75rem;
1460
+ z-index: 500;
1461
  pointer-events: none;
1462
  }
1463
 
 
1995
 
1996
  .location-node {
1997
  filter: drop-shadow(0 7px 12px rgba(0,0,0,0.36));
 
 
 
 
 
 
1998
  }
1999
 
2000
  .location-selected .location-circle {
 
2394
 
2395
  .tome-corner {
2396
  position: fixed;
2397
+ bottom: 1.95rem;
2398
+ width: 56px;
2399
+ height: 56px;
2400
+ border: 1px solid #7f632e;
2401
  border-radius: 12px;
2402
+ background: linear-gradient(180deg, #f8e8bf 0%, #cfa353 100%);
2403
+ color: #2b180b;
2404
+ font-size: 1.2rem;
2405
+ font-weight: 700;
2406
  cursor: pointer;
2407
+ box-shadow: 0 12px 28px rgba(26, 14, 6, 0.35), 0 0 0 1px rgba(255, 246, 214, 0.18) inset;
2408
+ }
2409
+
2410
+ .tome-corner-left { left: max(0.75rem, calc(50vw - 700px + 0.55rem)); }
2411
+ .tome-corner-right { right: max(0.75rem, calc(50vw - 700px + 0.55rem)); }
2412
+
2413
+ .tome-corner:hover,
2414
+ .tome-corner:focus-visible {
2415
+ transform: translateY(-1px);
2416
+ border-color: #8f6d2d;
2417
+ box-shadow: 0 14px 30px rgba(26, 14, 6, 0.45), 0 0 0 2px rgba(255, 246, 214, 0.32) inset;
2418
  }
2419
 
2420
+ .tome-corner:focus-visible {
2421
+ outline: 2px solid rgba(255, 235, 181, 0.9);
2422
+ outline-offset: 2px;
2423
+ }
2424
 
2425
  .tome-ribbon {
2426
  position: fixed;
 
2563
  }
2564
 
2565
  .realm-cover-card {
2566
+ padding: clamp(1.4rem, 4vw, 2.4rem);
2567
  background:
2568
  radial-gradient(circle at 25% 15%, rgba(255,240,198,0.12), transparent 28%),
2569
  linear-gradient(150deg, var(--tome-leather-light), var(--tome-leather), var(--tome-leather-dark));
 
 
 
 
 
2570
  }
2571
 
2572
  .realm-cover-kicker {
 
2578
 
2579
  .realm-cover-title {
2580
  margin: 0.6rem 0;
2581
+ color: #fff7e7;
2582
  font-family: 'Cinzel Decorative', 'Cinzel', serif;
2583
  font-size: clamp(1.5rem, 6vw, 3rem);
2584
+ letter-spacing: 0.08em;
 
2585
  display: flex;
2586
  flex-direction: column;
2587
+ gap: 0.05em;
2588
  align-items: center;
2589
+ line-height: 0.9;
2590
+ text-shadow: 0 2px 16px rgba(255, 230, 170, 0.12);
 
 
2591
  }
2592
 
2593
  .realm-cover-title span {
2594
  display: inline-block;
2595
+ overflow: hidden;
2596
  white-space: nowrap;
2597
+ border-right: 2px solid rgba(240, 222, 175, 0.65);
2598
+ width: 0;
2599
+ animation: writeSigil 1.8s steps(18, end) forwards;
 
 
 
2600
  }
2601
 
2602
  .realm-cover-title span:nth-child(2) {
 
2609
  height: 160px;
2610
  pointer-events: none;
2611
  background:
2612
+ radial-gradient(circle at 22% 48%, rgba(232, 200, 115, 0.24), transparent 16%),
2613
+ radial-gradient(circle at 78% 48%, rgba(232, 200, 115, 0.24), transparent 16%),
2614
+ linear-gradient(90deg, transparent 0 17%, rgba(232, 200, 115, 0.12) 17.2% 18%, transparent 18.2% 82%, rgba(232, 200, 115, 0.12) 82.2% 83%, transparent 83.2%),
2615
+ linear-gradient(36deg, transparent 0 21%, rgba(232, 200, 115, 0.14) 21.5% 22.8%, transparent 23.2%),
2616
+ linear-gradient(-36deg, transparent 0 21%, rgba(232, 200, 115, 0.14) 21.5% 22.8%, transparent 23.2%),
2617
+ linear-gradient(-36deg, transparent 76.8%, rgba(232, 200, 115, 0.14) 77.2% 78.5%, transparent 79%),
2618
+ linear-gradient(36deg, transparent 76.8%, rgba(232, 200, 115, 0.14) 77.2% 78.5%, transparent 79%);
2619
+ opacity: 0.18;
2620
+ filter: blur(0.2px) drop-shadow(0 0 6px rgba(232, 200, 115, 0.08));
2621
  }
2622
 
2623
  .realm-cover-sub {
 
2777
  bottom: 1rem;
2778
  }
2779
 
2780
+ .tome-corner-left { left: 0.65rem; }
2781
+ .tome-corner-right { right: 0.65rem; }
2782
+
2783
  .tome-ribbon {
2784
  right: 1rem;
2785
  top: 0;
 
2914
  to { width: 100%; }
2915
  }
2916
 
 
 
 
 
 
2917
  /* -------------------------------------------------------------------------- */
2918
  /* Viewport-fit hotfix: keep app in one screen and scroll inside the spread */
2919
  /* -------------------------------------------------------------------------- */
 
2969
  height: 565px !important;
2970
  max-height: 565px !important;
2971
  min-height: 0 !important;
2972
+ overflow: auto !important;
2973
+ padding: 0.4rem 1rem 1rem !important;
 
 
2974
  }
2975
 
2976
  .realm-tabs [role="tabpanel"] > .column,
 
2990
 
2991
  .realm-opening-backdrop {
2992
  background:
2993
+ radial-gradient(circle at 30% 14%, rgba(201, 161, 59, 0.09), transparent 36%),
2994
+ radial-gradient(circle at 82% 22%, rgba(138, 106, 58, 0.12), transparent 36%),
2995
+ linear-gradient(180deg, #f1e2c5 0%, #decb9f 100%) !important;
2996
  }
2997
 
2998
  #realm-opening-enter:hover {
 
3000
  }
3001
 
3002
  .realm-opening {
3003
+ max-height: 760px;
3004
  display: flex !important;
3005
+ align-items: flex-start !important;
3006
  justify-content: center !important;
3007
+ padding-top: 1.25rem !important;
3008
  overflow: hidden;
3009
  }
3010
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
3011
  .realm-cover-card {
3012
+ margin-top: 0 !important;
3013
+ transform: none !important;
3014
  }
3015
 
3016
  .realm-cover-title {
3017
  font-size: clamp(2.4rem, 7vw, 4.7rem) !important;
 
 
 
 
 
 
 
 
 
3018
  }
3019
 
3020
  .realm-cover-sub,
 
3147
  .realm-tabs [role="tabpanel"] {
3148
  height: 565px !important;
3149
  max-height: 565px !important;
3150
+ overflow: auto !important;
 
 
 
 
 
 
 
 
 
3151
  }
3152
 
3153
+ .realm-opening {
3154
+ max-height: 720px;
 
 
3155
  }
3156
  }