:root {
    --site-color-scheme: dark;
    --site-error-text: #ffb4b4;
    --site-public-composer-error-text: #8f0019;
    --site-error-surface: #111e30;
    --site-warning-text: #ffd391;
    --site-bg: #707985;
    --site-brand-banner-image: url("/brand/banner.webp");
    --site-brand-banner-mobile-image: url("/brand/banner-mobile.webp");
    --site-brand-name-opacity: 1;
    --site-brand-overlay: linear-gradient(90deg, transparent 45%, rgba(8, 14, 40, .16) 63%, rgba(8, 14, 40, .75) 100%);
    --site-brand-mobile-overlay: linear-gradient(90deg, transparent 38%, rgba(8, 14, 40, .18) 58%, rgba(8, 14, 40, .8) 100%);
    --site-page-bg: rgba(21, 28, 40, .62);
    --site-text: #fff8ec;
    --site-link: #9de8ff;
    --site-link-visited: #f0bdff;
    --site-link-hover: #fff1ba;
    --site-focus-ring: #fff1ba;
    --site-message-anchor-bg: #15283d;
    --site-message-anchor-text: #ffeda8;
    --site-message-anchor-border: #e8bd63;
    --site-message-anchor-hover-bg: #29455f;
    --site-message-anchor-body-dark: #ffeda8;
    --site-message-anchor-body-light: #15344e;
    --site-public-message-anchor-text: #15344e;
    --site-message-body-link-dark: #9de8ff;
    --site-message-body-link-light: #004b82;
    --site-public-message-body-link: #004b82;
    --site-panel-bg: rgba(17, 30, 48, .72);
    --site-panel-border: #966f62;
    --site-accent: #ad806f;
    --site-accent-strong: #91a8b3;
    --site-table-border: #9d7b6e;
    --chip-image-border-color: #9d7b6e;
    --site-page-border: #254f70;
    --site-page-shadow: 8px 0 18px rgba(3, 10, 22, .42), -8px 0 18px rgba(3, 10, 22, .42);
    --site-heading-shadow: 0 1px 2px #07101c;
    --site-heading-border-image: linear-gradient(90deg, #ad806f, #91a8b3) 1;
    --site-background-image: url("/images/themes/twilight-background.png");
    --site-background-filter: blur(18px) saturate(.88);
    --site-background-overlay: linear-gradient(
            166deg,
            #707985 0%,
            #8d818e 25%,
            #a98488 50%,
            #c18d7f 75%,
            #d3a57e 100%);
    --site-page-surface: rgba(18, 25, 37, .64);
    --site-home-page-surface: rgba(18, 25, 37, .46);
    --site-home-section-surface: linear-gradient(
            145deg,
            rgba(76, 86, 101, .74) 0%,
            rgba(111, 87, 102, .68) 52%,
            rgba(137, 96, 81, .64) 100%);
    --site-ui-surface: rgba(17, 30, 48, .74);
    --site-plan-dialog-surface: #111e30;
    --site-ui-gradient: linear-gradient(125deg, rgba(173, 128, 111, .84), rgba(145, 168, 179, .78));
    --site-ui-text: #fff8ec;
    --site-ui-muted-text: #d4e6f2;
    --site-ui-highlight-text: #9de8ff;
    --site-legend-text: #fff1ba;
    --site-ui-radius: 10px;
    --site-message-radius: 7px;
    --site-button-radius: 8px;
    --site-log-navigation-filter-padding: .7rem;
    --site-log-navigation-filter-options-padding: .4rem;
    --site-message-border-width: 1px;
    --site-message-border-left-width: 5px;
    --site-panel-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 10px 26px rgba(3, 10, 22, .3);
    --site-village-builder-message-bg:
            repeating-linear-gradient(
                    105deg,
                    rgba(222, 207, 179, .055) 0 1px,
                    transparent 1px 6px),
            linear-gradient(180deg, #465f45, #435b43) #465f45;
    --site-village-builder-message-text: #fff8ec;
    --site-village-builder-message-label-text: #dce8c8;
    --site-village-builder-message-border: #2f4130;
    --site-village-builder-message-border-width: 1px;
    --site-village-builder-message-border-left-width: 4px;
    --site-village-builder-message-border-left-color: #b5a77e;
    --site-village-builder-message-border-style: solid;
    --site-village-builder-message-radius: 0;
    --site-village-builder-message-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .05),
            inset 0 -1px 0 rgba(0, 0, 0, .18);
    --site-village-builder-message-link: #fff2a8;
    --site-village-builder-message-link-visited: #e7d6ff;
    --site-village-builder-message-link-hover: #fff;
    --site-village-builder-message-focus-ring: #fff;
    --site-public-log-message-bg:
            linear-gradient(
                    115deg,
                    rgba(255, 255, 255, .18) 0%,
                    rgba(255, 255, 255, .07) 30%,
                    rgba(255, 255, 255, 0) 55%),
            linear-gradient(
                    180deg,
                    rgba(255, 252, 246, .90) 0%,
                    rgba(252, 248, 240, .88) 48%,
                    rgba(246, 238, 230, .90) 100%);
    --site-public-log-message-text: #29262a;
    --site-public-log-message-border: rgba(105, 73, 68, .18);
    --site-action-log-message-bg: var(--site-public-log-message-bg);
    --site-action-log-message-text: var(--site-public-log-message-text);
    --site-action-log-message-border: var(--site-public-log-message-border);
    --site-public-message-bg: linear-gradient(
            158deg in srgb,
            #b9bdc5 0%,
            #c7c3c6 24%,
            #d4c6c6 48%,
            #dfccc4 73%,
            #ead2bf 100%);
    --site-public-message-text: #29262a;
    --site-sample-guide-emphasis: #741854;
    --site-public-message-border: #8e9098;
    --site-message-action-border: #686a72;
    --site-action-message-bg: var(--site-public-message-bg);
    --site-action-message-text: var(--site-public-message-text);
    --site-action-message-border: var(--site-public-message-border);
    --site-monologue-message-bg: linear-gradient(125deg, rgba(54, 57, 67, .82), rgba(84, 80, 77, .78));
    --site-monologue-message-text: #fff;
    --site-monologue-message-border: #d7d7d7;
    --site-wolf-message-bg: linear-gradient(125deg, rgba(124, 35, 40, .9), rgba(116, 31, 36, .9));
    --site-wolf-message-text: #fff;
    --site-wolf-message-border: #3a0a10;
    --site-resonance-message-bg: linear-gradient(125deg, rgba(27, 80, 72, .84), rgba(45, 105, 111, .82));
    --site-resonance-message-text: #fff;
    --site-resonance-message-border: #b8d7d5;
    --site-grave-message-bg: linear-gradient(125deg, rgba(38, 39, 79, .86), rgba(53, 48, 94, .82));
    --site-grave-message-text: #fff;
    --site-grave-message-border: #c5c5de;
    --site-backstage-message-bg: var(--site-grave-message-bg);
    --site-backstage-message-text: var(--site-grave-message-text);
    --site-backstage-message-border: var(--site-grave-message-border);
    --site-private-message-bg: linear-gradient(125deg, rgba(62, 35, 73, .86), rgba(81, 50, 93, .82));
    --site-private-message-text: #fff;
    --site-private-message-border: #d7c8e7;
    --site-rank-white-message-bg: linear-gradient(125deg, rgba(255, 255, 255, .96), rgba(207, 226, 238, .9));
    --site-rank-white-message-text: #000;
    --site-rank-white-message-border: #dcecf5;
    --site-rank-black-message-bg: linear-gradient(125deg, rgba(9, 13, 20, .96), rgba(48, 58, 72, .92));
    --site-rank-black-message-text: #fff;
    --site-rank-black-message-border: #93a9bd;
    /* Floating references keep their own color without showing the logs behind them. */
    --site-public-popup-message-bg: linear-gradient(180deg, #fffcf6 0%, #fcf8f0 48%, #f6eee6 100%);
    --site-action-popup-message-bg: var(--site-public-popup-message-bg);
    --site-monologue-popup-message-bg: linear-gradient(125deg, #363943, #54504d);
    --site-wolf-popup-message-bg: linear-gradient(125deg, #7c2328, #741f24);
    --site-resonance-popup-message-bg: linear-gradient(125deg, #1b5048, #2d696f);
    --site-grave-popup-message-bg: linear-gradient(125deg, #26274f, #35305e);
    --site-backstage-popup-message-bg: var(--site-grave-popup-message-bg);
    --site-private-popup-message-bg: linear-gradient(125deg, #3e2349, #51325d);
    --site-rank-white-popup-message-bg: linear-gradient(125deg, #fff, #cfe2ee);
    --site-rank-black-popup-message-bg: linear-gradient(125deg, #090d14, #303a48);
    --site-filter-bg:
            linear-gradient(rgba(255, 250, 243, .14), rgba(255, 250, 243, .14)),
            linear-gradient(125deg, rgba(145, 104, 90, .42), rgba(104, 131, 145, .46));
    --site-filter-item-bg:
            linear-gradient(rgba(255, 250, 243, .1), rgba(255, 250, 243, .1)),
            linear-gradient(125deg, rgba(139, 101, 89, .36), rgba(111, 137, 149, .40));
    --site-form-bg: linear-gradient(125deg, rgba(181, 139, 121, .9), rgba(153, 177, 187, .86));
    --site-form-text: #102334;
    --site-mvp-panel-bg: #dfe3e5;
    --site-mvp-panel-text: #102334;
    --site-mvp-error-text: #9f1c2c;
    --site-aux-button-bg: #d7e7ed;
    --site-aux-button-color: #102334;
    --site-aux-button-border: rgba(211, 244, 255, .76);
    --site-aux-button-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .72),
            inset -3px -2px 8px rgba(255, 255, 255, .08),
            inset 0 -1px 0 rgba(91, 169, 202, .34),
            0 5px 16px rgba(3, 16, 29, .3);
    --site-aux-button-filter: blur(10px) saturate(1.2);
    --site-formatting-selected-bg: #ad806f;
    --site-formatting-selected-color: #102334;
    --site-formatting-selected-border: #91a8b3;
    --site-formatting-mixed-bg: repeating-linear-gradient(135deg, #ad806f 0 5px, #c49b8b 5px 10px);
    --site-say-tabs-bg: #07111f;
    --site-say-tabs-border-width: 1px;
    --site-say-tabs-border: #254f70;
    --site-say-tabs-shadow: 0 -2px 0 rgba(173, 128, 111, .38);
    --site-say-tab-selected-shadow: inset 0 3px 0 rgba(157, 232, 255, .35), 0 2px 0 #183d5c;
    --site-table-bg: #0b1828;
    --site-table-text: #fff8ec;
    --site-table-header-bg: #111e30;
    --site-table-header-text: #fff;
    --site-table-row-odd-bg: rgba(26, 52, 76, .9);
    --site-table-row-even-bg: rgba(16, 37, 61, .86);
    --site-table-shadow: 0 8px 20px rgba(3, 10, 22, .2);
    --site-log-gap: 6px;
    --site-log-chip-width: 78px;
    --site-title-anchor-border: #9aa4ad;
    --site-title-anchor-radius: 999px;
    --site-description-scale: .8;
    --site-result-bg: rgba(17, 30, 48, .94);
    --site-result-border: #b86137;
    --site-result-header-bg: #1a344c;
    --site-result-group-bg: #453329;
    --site-result-win-bg: #174737;
    --site-result-win-text: #e4fff2;
    --site-result-win-border: #6fc99a;
    --site-result-loss-bg: #5a2929;
    --site-result-loss-text: #ffe8e3;
    --site-result-loss-border: #dc8772;
    --site-result-neutral-bg: #304052;
    --site-result-neutral-text: #eef5ff;
    --site-result-neutral-border: #8799ad;
    --site-result-unknown-bg: #57441d;
    --site-result-unknown-text: #fff5c8;
    --site-result-unknown-border: #d6b85e;
}

.message-filter-panel,
.formpl_frame,
.role-panel,
.vlog-message {
    box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .16),
            0 10px 26px rgba(3, 10, 22, .3);
}

/* Issue #827: 通常発言は画像を使わず、生成り紙の半艶面とする。 */
.vlog-message.vlog-public,
.vlog-message.vlog-action {
    text-shadow: none;
    box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .28),
            inset 0 -1px 0 rgba(105, 73, 68, .08);
}

body.village-page .page {
    background: transparent;
}

body.village-page .village-room {
    background: transparent;
}

body.home-page .page {
    background: var(--site-home-page-surface);
}

body.home-page .top,
body.home-page .box {
    background: var(--site-home-section-surface);
}

body.home-page .village-list {
    background: rgba(18, 29, 42, .68);
}

.village-info-card,
.village-rule-roll-call {
    --village-info-label-text: #9de8ff;
    border: 2px solid transparent;
    background:
            linear-gradient(145deg, rgba(8, 20, 36, .78), rgba(62, 30, 24, .70)) padding-box,
            linear-gradient(90deg, #ad806f, #91a8b3) border-box;
    color: #fff8ec;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 10px 26px rgba(3, 10, 22, .3);
}

.message-formatting-toolbar button,
.message-filter-actions button,
.message-filter-section button[data-message-focus-open],
.action-form button,
.act-form button,
.role-ability-form button,
.prologue-settings button,
.village-log-navigation-filter-submit,
.bookmark-resume-actions button,
.letter-notification-actions button,
.button-link,
.epilogue-results-jump {
    border-color: var(--site-aux-button-border);
    background: var(--site-aux-button-bg);
    color: var(--site-aux-button-color);
    box-shadow: var(--site-aux-button-shadow);
    backdrop-filter: var(--site-aux-button-filter);
    -webkit-backdrop-filter: var(--site-aux-button-filter);
    text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}

@media (min-width: 701px) {
    :root {
        --site-bg: #3f4650;
        --site-background-overlay: linear-gradient(
                166deg,
                #3f4650 0%,
                #48454f 25%,
                #57474f 50%,
                #614d4b 75%,
                #6b584c 100%);
    }
}

@media (max-width: 700px) {
    :root {
        --site-page-surface: rgba(18, 25, 37, .58);
    }
}