/* Story-run theme overrides. Player account themes remain underneath these. */
body.story-theme-active {
    background-color: var(--bg-primary);
    background-image:
        linear-gradient(135deg, color-mix(in srgb, var(--story-sky-a) 42%, transparent), transparent 52%),
        linear-gradient(225deg, color-mix(in srgb, var(--story-sky-b) 34%, transparent), transparent 58%),
        linear-gradient(180deg, var(--story-sky-c), var(--bg-primary) 72%);
}

body.story-theme-active::before {
    background:
        linear-gradient(115deg, transparent 4%, color-mix(in srgb, var(--story-sky-a) 22%, transparent) 29%, transparent 47%),
        linear-gradient(248deg, transparent 18%, color-mix(in srgb, var(--story-sky-b) 18%, transparent) 52%, transparent 70%);
}

.story-theme-active .app-shell { border-color: color-mix(in srgb, var(--story-border) 32%, transparent); }
.story-theme-active .region-title,
.story-theme-active .region-footer { border-color: color-mix(in srgb, var(--story-border) 58%, transparent); }
.story-theme-active .story-root { background: color-mix(in srgb, var(--bg-primary) 78%, transparent); }
.story-theme-active .story-chapter,
.story-theme-active .story-region,
.story-theme-active .story-ending dl { border-color: color-mix(in srgb, var(--story-border) 45%, transparent); }
.story-theme-active .game-container { box-shadow: inset 0 0 44px color-mix(in srgb, var(--story-sky-a) 12%, transparent); }

.story-theme-active .story-shell {
    display: grid;
    align-content: start;
    gap: 0 1rem;
}
.story-theme-active .story-run-header { grid-area: header; }
.story-theme-active .story-progress { grid-area: progress; }
.story-theme-active .story-chapter { grid-area: chapter; }
.story-theme-active .story-map { grid-area: map; }
.story-theme-active .story-inventory { grid-area: inventory; }

body[data-story-layout="expedition"] .story-shell {
    grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
    grid-template-areas:
        "header header"
        "progress progress"
        "chapter map"
        "inventory inventory";
}
body[data-story-layout="expedition"] .story-map { padding-left: .7rem; }

body[data-story-layout="crossing"] .story-shell {
    grid-template-columns: minmax(190px, .36fr) minmax(0, 1fr);
    grid-template-areas:
        "header header"
        "progress chapter"
        "progress map"
        "inventory inventory";
}
body[data-story-layout="crossing"] .story-progress {
    grid-template-columns: 1fr;
    align-content: start;
    margin-right: 1rem;
    border-right: 1px solid color-mix(in srgb, var(--story-border) 30%, transparent);
}

body[data-story-layout="signal"] .story-shell {
    grid-template-columns: minmax(0, .72fr) minmax(330px, 1.28fr);
    grid-template-areas:
        "header progress"
        "chapter chapter"
        "map map"
        "inventory inventory";
}
body[data-story-layout="signal"] .story-progress { align-self: end; }

@media (max-width: 800px) {
    body[data-story-layout] .story-shell {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "header" "progress" "chapter" "map" "inventory";
    }
    body[data-story-layout="crossing"] .story-progress {
        grid-template-columns: repeat(var(--story-parts, 5), 1fr);
        margin-right: 0;
        border-right: 0;
    }
    body[data-story-layout="expedition"] .story-map { padding-left: 0; }
}