/* Life Simulator stage chrome: cyan-led deep-space palette. */
body:has(#view-memory.fantasy-memory-view.active)
    #view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready {
    --life-stage-cyan: #00b8c8;
    --life-stage-ice: #b8dfe1;
    --life-stage-violet: rgba(143, 61, 255, 0.13);
    --life-stage-bg-a: rgba(2, 11, 22, 0.98);
    --life-stage-bg-b: rgba(6, 20, 38, 0.96);
}

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: 1px solid transparent !important;
    border-bottom-color: rgba(0, 184, 200, 0.28) !important;
    background:
        linear-gradient(
            105deg,
            rgba(0, 184, 200, 0.045),
            var(--life-stage-bg-b) 54%,
            rgba(143, 61, 255, 0.035)
        ) padding-box,
        linear-gradient(
            105deg,
            rgba(0, 184, 200, 0.38),
            rgba(0, 184, 200, 0.14) 56%,
            var(--life-stage-violet)
        ) border-box !important;
    box-shadow:
        inset 0 0 28px rgba(0, 184, 200, 0.03),
        inset 0 -1px rgba(0, 184, 200, 0.08),
        0 8px 24px rgba(0, 12, 28, 0.28) !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: #65c8d0 !important;
    text-shadow: 0 0 10px rgba(0, 184, 200, 0.18) !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: var(--life-stage-ice) !important;
    text-shadow:
        0 0 12px rgba(0, 184, 200, 0.12),
        0 0 20px rgba(70, 154, 255, 0.05) !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, 184, 200, 0.22),
            rgba(34, 122, 203, 0.09) 36%,
            rgba(80, 144, 255, 0.14) 68%,
            rgba(216, 255, 255, 0.1) 82%,
            rgba(0, 184, 200, 0.22)
        ) !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(80, 144, 255, 0.08) 68%,
            rgba(0, 184, 200, 0.4) 73%,
            rgba(216, 255, 255, 0.54) 78%,
            rgba(68, 171, 255, 0.3) 84%,
            transparent 91% 100%
        ) !important;
    filter:
        drop-shadow(0 0 4px rgba(0, 184, 200, 0.18))
        drop-shadow(0 0 9px rgba(70, 154, 255, 0.08)) !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::after {
    background:
        linear-gradient(
            90deg,
            transparent 0 12%,
            rgba(0, 184, 200, 0.04) 28%,
            rgba(0, 184, 200, 0.72) 42%,
            rgba(143, 61, 255, 0.14) 55%,
            rgba(0, 184, 200, 0.72) 68%,
            transparent 88%
        ) !important;
    filter:
        drop-shadow(0 0 5px rgba(0, 184, 200, 0.18))
        drop-shadow(0 0 8px rgba(143, 61, 255, 0.05)) !important;
}

body:has(#view-memory.fantasy-memory-view.active)
    #view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    :is(.fantasy-view-toggle, .fantasy-tree-visual-version) {
    border-color: rgba(0, 184, 200, 0.25) !important;
    background:
        linear-gradient(
            145deg,
            rgba(3, 18, 34, 0.98),
            rgba(7, 17, 33, 0.96)
        ) padding-box,
        linear-gradient(
            112deg,
            rgba(0, 184, 200, 0.4),
            rgba(143, 61, 255, 0.13) 64%,
            rgba(0, 184, 200, 0.23)
        ) border-box !important;
    box-shadow:
        inset 0 1px 0 rgba(216, 255, 255, 0.08),
        0 0 12px rgba(0, 184, 200, 0.05) !important;
}

body:has(#view-memory.fantasy-memory-view.active)
    #view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    :is(
        .fantasy-view-toggle button,
        .fantasy-tree-visual-version button,
        .fantasy-stage-actions .fantasy-action-btn
    ) {
    border-color: transparent !important;
    background:
        linear-gradient(
            145deg,
            rgba(6, 22, 40, 0.98),
            rgba(9, 12, 31, 0.97)
        ) padding-box,
        linear-gradient(
            112deg,
            rgba(0, 184, 200, 0.32),
            rgba(143, 61, 255, 0.11) 58%,
            rgba(0, 184, 200, 0.2)
        ) border-box !important;
    color: rgba(216, 255, 255, 0.82) !important;
    box-shadow:
        inset 0 1px 0 rgba(216, 255, 255, 0.08),
        0 0 8px rgba(0, 184, 200, 0.045) !important;
}

body:has(#view-memory.fantasy-memory-view.active)
    #view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    :is(
        .fantasy-view-toggle button.active,
        .fantasy-view-toggle button[aria-selected="true"],
        .fantasy-tree-visual-version button.active,
        .fantasy-tree-visual-version button[aria-selected="true"],
        .fantasy-stage-actions .fantasy-action-btn.active,
        .fantasy-stage-actions .fantasy-action-btn[aria-pressed="true"]
    ) {
    background:
        linear-gradient(
            145deg,
            rgba(0, 54, 66, 0.66),
            rgba(7, 24, 48, 0.98)
        ) padding-box,
        linear-gradient(
            112deg,
            var(--life-stage-cyan),
            rgba(143, 61, 255, 0.32) 56%,
            rgba(0, 184, 200, 0.5)
        ) border-box !important;
    color: var(--life-stage-ice) !important;
    box-shadow:
        inset 0 1px 0 rgba(216, 255, 255, 0.14),
        0 0 12px rgba(0, 184, 200, 0.1),
        0 0 18px rgba(143, 61, 255, 0.035) !important;
}

body:has(#view-memory.fantasy-memory-view.active)
    #view-memory#view-memory.fantasy-memory-view
    #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
    :is(
        .fantasy-view-toggle button:hover:not(:disabled),
        .fantasy-view-toggle button:focus-visible,
        .fantasy-tree-visual-version button:hover:not(:disabled),
        .fantasy-tree-visual-version button:focus-visible,
        .fantasy-stage-actions .fantasy-action-btn:hover:not(:disabled),
        .fantasy-stage-actions .fantasy-action-btn:focus-visible
    ) {
    color: #f5ffff !important;
    border-color: rgba(0, 184, 200, 0.44) !important;
    box-shadow:
        inset 0 1px 0 rgba(216, 255, 255, 0.12),
        0 0 14px rgba(0, 184, 200, 0.09),
        0 0 18px rgba(143, 61, 255, 0.045) !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, 184, 200, 0.025),
            0 6px 16px rgba(0, 12, 28, 0.22) !important;
    }

    body:has(#view-memory.fantasy-memory-view.active)
        #view-memory#view-memory.fantasy-memory-view
        #fantasy-workbench#fantasy-workbench.fantasy-fx-ready
        :is(
            .fantasy-view-toggle,
            .fantasy-tree-visual-version,
            .fantasy-view-toggle button,
            .fantasy-tree-visual-version button,
            .fantasy-stage-actions .fantasy-action-btn
        ) {
        box-shadow: 0 0 8px rgba(0, 184, 200, 0.04) !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::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::after {
        animation: none !important;
    }
}