/* * Life Simulator stage layout alignment. * Scope: the shared stage frame and body slot only. */ #view-memory#view-memory.fantasy-memory-view #fantasy-workbench#fantasy-workbench.fantasy-fx-ready > .fantasy-workbench > .fantasy-stage { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; height: 100%; overflow: hidden; } /* * r2: align the stage header with the surrounding deep-space cyan glass. * The V4 tree keeps its violet atmosphere inside the scene; the shared * header stays blue/cyan so it belongs to the workbench frame. */ body:has(#view-memory.fantasy-memory-view.active) #view-memory#view-memory.fantasy-memory-view #fantasy-workbench#fantasy-workbench.fantasy-fx-ready .fantasy-stage-top { border-bottom-color: rgba(0, 229, 255, 0.52) !important; background: linear-gradient( 100deg, rgba(0, 229, 255, 0.1), rgba(31, 103, 157, 0.08) 48%, rgba(41, 74, 139, 0.05) 72%, transparent ), linear-gradient( 180deg, rgba(5, 17, 34, 0.98), rgba(4, 11, 25, 0.98) ) !important; box-shadow: inset 0 -1px rgba(0, 229, 255, 0.28), inset 0 0 28px rgba(0, 170, 220, 0.08), 0 8px 24px rgba(0, 0, 0, 0.24) !important; } body:has(#view-memory.fantasy-memory-view.active) #view-memory#view-memory.fantasy-memory-view #fantasy-workbench#fantasy-workbench.fantasy-fx-ready .fantasy-stage-top .fantasy-kicker { color: #7fefff !important; text-shadow: 0 0 10px rgba(0, 229, 255, 0.42) !important; } body:has(#view-memory.fantasy-memory-view.active) #view-memory#view-memory.fantasy-memory-view #fantasy-workbench#fantasy-workbench.fantasy-fx-ready .fantasy-stage-top h3 { color: #e4fbff !important; text-shadow: 0 0 12px rgba(0, 229, 255, 0.28), 0 0 20px rgba(67, 154, 255, 0.12) !important; } body:has(#view-memory.fantasy-memory-view.active) #view-memory#view-memory.fantasy-memory-view #fantasy-workbench#fantasy-workbench.fantasy-fx-ready .fantasy-stage-top.fantasy-aurora-surface::before { background: conic-gradient( from 205deg, rgba(0, 229, 255, 0.5), rgba(32, 122, 203, 0.18) 36%, rgba(80, 144, 255, 0.34) 68%, rgba(173, 248, 255, 0.24) 82%, rgba(0, 229, 255, 0.5) ) !important; filter: blur(7px) !important; } body:has(#view-memory.fantasy-memory-view.active) #view-memory#view-memory.fantasy-memory-view #fantasy-workbench#fantasy-workbench.fantasy-fx-ready .fantasy-stage-top.fantasy-aurora-surface::after { background: conic-gradient( from var(--fantasy-aurora-angle), transparent 0 64%, rgba(55, 148, 255, 0.2) 68%, rgba(0, 229, 255, 0.78) 73%, rgba(205, 252, 255, 0.94) 78%, rgba(57, 175, 255, 0.7) 84%, transparent 91% 100% ) !important; filter: drop-shadow(0 0 4px rgba(0, 229, 255, 0.46)) drop-shadow(0 0 9px rgba(67, 154, 255, 0.2)) !important; } @media (max-width: 860px), (hover: none), (pointer: coarse) { body:has(#view-memory.fantasy-memory-view.active) #view-memory#view-memory.fantasy-memory-view #fantasy-workbench#fantasy-workbench.fantasy-fx-ready .fantasy-stage-top { box-shadow: inset 0 0 18px rgba(0, 170, 220, 0.06), 0 6px 16px rgba(0, 0, 0, 0.18) !important; } } @media (prefers-reduced-motion: reduce) { body:has(#view-memory.fantasy-memory-view.active) #view-memory#view-memory.fantasy-memory-view #fantasy-workbench#fantasy-workbench.fantasy-fx-ready .fantasy-stage-top.fantasy-aurora-surface::before, body:has(#view-memory.fantasy-memory-view.active) #view-memory#view-memory.fantasy-memory-view #fantasy-workbench#fantasy-workbench.fantasy-fx-ready .fantasy-stage-top.fantasy-aurora-surface::after { animation: none !important; } } #view-memory#view-memory.fantasy-memory-view #fantasy-workbench#fantasy-workbench.fantasy-fx-ready > .fantasy-workbench > .fantasy-stage > .fantasy-stage-top { flex: 0 0 auto; min-height: 78px; box-sizing: border-box; } #view-memory#view-memory.fantasy-memory-view #fantasy-workbench#fantasy-workbench.fantasy-fx-ready > .fantasy-workbench > .fantasy-stage > :is(#fantasy-space, #fantasy-tree-stage) { position: relative; flex: 1 1 auto; width: 100%; max-width: 100%; min-width: 0; min-height: 0; box-sizing: border-box; overflow: hidden; } #view-memory#view-memory.fantasy-memory-view #fantasy-workbench#fantasy-workbench.fantasy-fx-ready > .fantasy-workbench > .fantasy-stage > #fantasy-tree-stage > .fantasy-tree-v4-root { flex: 1 1 auto; min-width: 0; min-height: 0; } #view-memory#view-memory.fantasy-memory-view #fantasy-workbench#fantasy-workbench.fantasy-fx-ready > .fantasy-workbench > .fantasy-stage > #fantasy-tree-stage > .fantasy-tree-v4-stage > .fantasy-tree-v4-root > #fantasy-tree-v4-host { flex: 1 1 auto; min-width: 0; min-height: 0; } /* * Match V4's boundary depth: the shared stage is only a transparent flex * slot. Each view renders its content inside the workbench perimeter. */ #view-memory#view-memory.fantasy-memory-view #fantasy-workbench#fantasy-workbench.fantasy-fx-ready > .fantasy-workbench > .fantasy-stage { border: 0 !important; border-color: transparent !important; background: transparent !important; clip-path: none !important; box-shadow: none !important; filter: none !important; } @media (max-width: 860px), (hover: none), (pointer: coarse) { #view-memory#view-memory.fantasy-memory-view #fantasy-workbench#fantasy-workbench.fantasy-fx-ready > .fantasy-workbench > .fantasy-stage { height: auto; } #view-memory#view-memory.fantasy-memory-view #fantasy-workbench#fantasy-workbench.fantasy-fx-ready > .fantasy-workbench > .fantasy-stage > #fantasy-space { flex: 0 0 auto; min-height: max(360px, calc(100dvh - 190px)); } #view-memory#view-memory.fantasy-memory-view #fantasy-workbench#fantasy-workbench.fantasy-fx-ready > .fantasy-workbench > .fantasy-stage > #fantasy-tree-stage { flex: 0 0 62dvh; min-height: 440px; } } /* Remove the bottom orbital status strip marked in the reference image. */ #view-memory#view-memory.fantasy-memory-view #fantasy-workbench#fantasy-workbench.fantasy-fx-ready .fantasy-space-status-strip { display: none !important; } /* * Keep V4 as the boundary reference. Planet and V3 already render their * content inside the shared workbench HUD, so the sibling outer frame only * duplicates that perimeter in those two views. */ #view-memory#view-memory.fantasy-memory-view #fantasy-workbench#fantasy-workbench.fantasy-fx-ready:not(:has(.fantasy-tree-v4-stage)) > .fantasy-workbench-outer-frame { display: none !important;