/*
 * PLAYHUB LAYOUT: STORYWORLD
 * Genre-neutral storytelling atmosphere: archive, salon and many possible worlds.
 * Quick changes: edit the variables and background image in this block.
 */
body[data-layout="storyworld"] {
    color-scheme: dark;
    --text: #edf0ed;
    --surface: rgb(18 25 28 / 93%);
    --surface-strong: rgb(28 38 42 / 96%);
    --line: #655849;
    --muted: #aeb4b1;
    --accent-ink: #fffaf3;
    --danger: #e27873;
    --story-brass: #b98a52;
    --story-slate: #40545d;
    --story-paper: #d8c9ae;
    color: var(--text);
    background-color: #101619;
    background-image: url("./images/storyworld-background.webp");
    background-position: center top;
    background-size: cover;
    background-attachment: fixed;
}

/* Quiet navigation that can belong to any setting. */
body[data-layout="storyworld"] .topbar,
body[data-layout="storyworld"] .footer,
body[data-layout="storyworld"] .chat-tabbar,
body[data-layout="storyworld"] .workspace-tabbar {
    border-color: #574c40;
    background: rgb(12 17 20 / 97%);
    box-shadow: inset 0 -1px 0 rgb(185 138 82 / 16%);
}

body[data-layout="storyworld"] .brand-mark {
    border-color: var(--story-brass);
    color: #d3a66d;
}

body[data-layout="storyworld"] .account-menu-popover {
    border-color: #655849;
    background: #151e22;
}

body[data-layout="storyworld"] .account-menu-popover a:hover,
body[data-layout="storyworld"] .account-menu-popover .text-button:hover {
    background: #26343a;
}

/* Slate panels keep the illustrated archive atmospheric but readable. */
body[data-layout="storyworld"] .auth-panel,
body[data-layout="storyworld"] .form-section,
body[data-layout="storyworld"] .workspace-section,
body[data-layout="storyworld"] .settings-account-form,
body[data-layout="storyworld"] .admin-activity-grid > div,
body[data-layout="storyworld"] .chat-compose,
body[data-layout="storyworld"] .participant-panel,
body[data-layout="storyworld"] dialog {
    border-color: var(--line);
    background: var(--surface);
    box-shadow:
        0 0 0 1px rgb(185 138 82 / 7%),
        0 18px 38px rgb(0 0 0 / 34%);
}

body[data-layout="storyworld"] input,
body[data-layout="storyworld"] select,
body[data-layout="storyworld"] textarea {
    border-color: #655849;
    background: #0d1417;
    color: var(--text);
}

body[data-layout="storyworld"] .secondary-button,
body[data-layout="storyworld"] .icon-text-button {
    border-color: #75634f;
    background: #263238;
    color: var(--text);
}

body[data-layout="storyworld"] .secondary-button:hover,
body[data-layout="storyworld"] .icon-text-button:hover {
    border-color: var(--accent);
    background: #34444b;
}

body[data-layout="storyworld"] .message-list {
    background-color: var(--chat-background, rgb(7 11 13 / 96%));
    color: var(--text);
    scrollbar-color: var(--accent) #11191d;
}

body[data-layout="storyworld"] .notice,
body[data-layout="storyworld"] blockquote,
body[data-layout="storyworld"] .bbcode-editor,
body[data-layout="storyworld"] .bbcode-toolbar {
    border-color: #655849;
    background: rgb(33 44 48 / 96%);
}

body[data-layout="storyworld"] .command-list code,
body[data-layout="storyworld"] .eyebrow,
body[data-layout="storyworld"] .participant-typing-icon {
    color: #d3a66d;
}

body[data-layout="storyworld"] .command-list dt,
body[data-layout="storyworld"] .command-list dd {
    border-bottom-color: #4e4941;
}

@media (max-width: 680px) {
    body[data-layout="storyworld"] {
        background-position: center top;
        background-attachment: scroll;
    }
}