html {
    min-height: 100%;
    background: var(--site-bg, #5d6f7c);
    --village-log-base-font-size: 16px;
    font-size: calc(16px * var(--site-font-scale, 1));
}

body {
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    margin: 0;
    background: transparent;
    color: var(--site-text, #fff);
    font-family: var(--site-font-family, sans-serif);
    font-size: 1rem;
    font-weight: normal;
}

body::before,
body::after {
    content: "";
    position: fixed;
    pointer-events: none;
}

body::before {
    z-index: -2;
    inset: -28px;
    background-color: var(--site-bg, #5d6f7c);
    background-image: var(--site-background-image, none);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    filter: var(--site-background-filter, none);
}

body::after {
    z-index: -1;
    inset: 0;
    background: var(--site-background-overlay, transparent);
}

a {
    color: var(--site-link, #00ffff);
    text-decoration-thickness: .08em;
    text-underline-offset: .16em;
}

a:visited {
    color: var(--site-link-visited, var(--site-link, #00ffff));
    text-decoration-style: dotted;
}

a:hover,
a:active {
    color: var(--site-link-hover, var(--site-link, #00ffff));
    text-decoration-thickness: .14em;
}

a:focus-visible {
    outline: 3px solid var(--site-focus-ring, var(--site-accent-strong, #ffff00));
    outline-offset: 2px;
}

a.message-anchor,
a.message-anchor:visited,
a.message-anchor:hover,
a.message-anchor:active,
a.message-external-link,
a.message-external-link:visited,
a.message-external-link:hover,
a.message-external-link:active {
    color: var(--site-message-body-link-dark, var(--site-link, #00ffff));
    font-weight: inherit;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-underline-offset: .16em;
}

a.message-anchor,
a.message-anchor:visited,
a.message-anchor:hover,
a.message-anchor:active {
    text-decoration-thickness: .08em;
}

a.message-external-link,
a.message-external-link:visited,
a.message-external-link:hover,
a.message-external-link:active {
    text-decoration-thickness: .14em;
}

a.message-anchor:hover,
a.message-anchor:focus-visible,
a.message-external-link:hover,
a.message-external-link:focus-visible {
    color: var(--site-message-body-link-dark, var(--site-link-hover, var(--site-link, #00ffff)));
}

a.message-anchor:focus-visible,
a.message-external-link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.page {
    width: min(620px, calc(100% - 24px));
    margin: 0 auto;
    background: var(--site-page-surface, #000);
    min-height: 100vh;
    padding: 10px 16px 16px;
    border-left: 1px solid var(--site-page-border, #26323c);
    border-right: 1px solid var(--site-page-border, #26323c);
    box-shadow: var(--site-page-shadow, 8px 0 0 rgba(0, 0, 0, .24), -8px 0 0 rgba(0, 0, 0, .24));
}

.site-brand {
    margin: -10px -16px 14px;
    overflow: hidden;
    border: 1px solid var(--site-page-border, #26323c);
    border-radius: 3px;
    background: var(--site-ui-surface, #070707);
}

.site-brand-navigation {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    border-top: 1px solid var(--site-panel-border, #4d4d2e);
}

.site-brand-guide-nav {
    flex: 0 0 auto;
    margin: 0;
    padding: 6px 10px;
    border: 0;
    background: transparent;
}

.site-brand-account-nav {
    flex: 1 1 auto;
    display: flex;
    min-width: 0;
    align-items: baseline;
    justify-content: flex-end;
    gap: .75rem;
    margin: 0;
    padding: 6px 10px;
    overflow-x: auto;
    overflow-y: hidden;
    border: 0;
    border-radius: 0;
    background: var(--site-ui-surface, #070707);
    scrollbar-width: none;
}

.site-brand-account-nav::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.site-brand-account-nav > * {
    flex: 0 0 auto;
    white-space: nowrap;
}

.site-brand-account-nav .inline-form {
    margin: 0;
}

.site-brand-link {
    position: relative;
    display: block;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    background-color: #09122f;
    color: #fff0c3;
    line-height: 0;
}

.site-brand-link:visited,
.site-brand-link:hover,
.site-brand-link:active {
    color: #fff0c3;
}

.site-brand-link::before,
.site-brand-link::after {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
}

.site-brand-link::before {
    z-index: 0;
    background-image: var(--site-brand-banner-image, url("/brand/banner.webp"));
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.site-brand-link::after {
    z-index: 1;
    background: var(--site-brand-overlay, linear-gradient(90deg, transparent 45%, rgba(8, 14, 40, .16) 63%, rgba(8, 14, 40, .75) 100%));
}

.site-brand-link:hover::before {
    filter: brightness(1.06);
}

.site-brand-link:focus-visible {
    outline: 3px solid #fff0c3;
    outline-offset: 2px;
}

.site-brand-link picture,
.site-brand-image {
    display: block;
    width: 100%;
}

.site-brand-image {
    height: auto;
    min-height: 64px;
    object-fit: cover;
    opacity: 0;
}

.site-brand-name {
    position: absolute;
    z-index: 2;
    top: 50%;
    right: 4.5%;
    color: var(--site-brand-name-color, #fff0c3);
    font-family: "Yu Mincho", YuMincho, "Hiragino Mincho ProN", serif;
    font-size: var(--site-brand-name-size, clamp(1.45rem, 5.2vw, 2rem));
    font-weight: 700;
    line-height: 1;
    letter-spacing: var(--site-brand-name-letter-spacing, .16em);
    text-shadow: var(--site-brand-name-shadow, 0 2px 6px rgba(3, 6, 20, .94));
    transform: translateY(-50%);
    white-space: nowrap;
    opacity: var(--site-brand-name-opacity, 1);
}

.site-brand-name::before {
    position: absolute;
    top: calc(100% + .16em);
    left: 50%;
    box-sizing: border-box;
    width: .3em;
    height: .3em;
    border: 1px solid currentColor;
    background: var(--site-brand-name-diamond-bg, rgba(8, 14, 40, .7));
    content: "";
    opacity: .9;
    transform: translateX(-50%) rotate(45deg);
}

.site-brand-name::after {
    display: block;
    width: 100%;
    margin-top: .35em;
    border-bottom: 1px solid currentColor;
    content: "";
    opacity: var(--site-brand-name-underline-opacity, .75);
}

@media (forced-colors: active) {
    .site-brand-link {
        border: 2px solid LinkText;
        background: Canvas;
    }

    .site-brand-link::after {
        background: Canvas;
        opacity: .78;
    }

    .site-brand-link::before {
        display: none;
    }

    .site-brand-name {
        opacity: 1;
    }

    .site-brand-name {
        color: LinkText;
        text-shadow: none;
    }
}

@media (max-width: 700px) {
    .site-brand-link::before {
        background-image: var(--site-brand-banner-mobile-image, url("/brand/banner-mobile.webp"));
    }
}

.top {
    position: relative;
    display: flex;
    min-width: 0;
    align-items: baseline;
    gap: .75rem;
    border: 1px solid var(--site-panel-border, #4d4d2e);
    padding: 8px 12px;
    margin-bottom: 14px;
    background: var(--site-ui-surface, #070707);
    border-radius: var(--site-ui-radius, 0);
    box-shadow: inset 1px 1px 0 #202020, inset -1px -1px 0 #000;
}

.top h1 {
    display: block;
    min-width: 3em;
    flex: 0 1 auto;
    margin: 0;
    overflow: hidden;
    font-size: calc(16px * var(--site-font-scale, 1));
    font-weight: bold;
    color: #fff;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.top nav {
    display: flex;
    min-width: 0;
    flex: 0 1 auto;
    align-items: baseline;
    flex-wrap: nowrap;
    gap: .75rem;
    margin-left: auto;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}

.top nav::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

.top nav > * {
    flex: 0 0 auto;
    white-space: nowrap;
}

.page-bottom-navigation {
    clear: both;
    margin: 20px 0 0;
    text-align: right;
}

.site-policy-footer {
    box-sizing: border-box;
    width: min(620px, calc(100% - 24px));
    margin: 18px auto 0;
    padding: 12px 16px;
    border-top: 1px solid var(--site-border, #9b9b9b);
    background: var(--site-page-surface, #000);
}

.site-policy-footer nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 18px;
}

.policy-card-list {
    display: grid;
    gap: 12px;
}

.policy-card h2,
.policy-document-body h2,
.policy-document-body h3 {
    scroll-margin-top: 16px;
}

.policy-meta {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 4px 12px;
}

.policy-meta dt {
    font-weight: bold;
}

.policy-meta dd {
    margin: 0;
}

.policy-document-body {
    line-height: 1.75;
    overflow-wrap: anywhere;
}

.policy-document-body section + section {
    margin-top: 2rem;
    padding-top: .5rem;
    border-top: 1px solid var(--site-border, #9b9b9b);
}

.policy-document-body li + li {
    margin-top: .45rem;
}

.policy-old-version {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
    border: 2px solid #f4c542;
}

.registration-policy-confirmation {
    margin-top: 16px;
    border: 2px solid var(--site-accent, #33d6e8);
    background: var(--site-panel-bg, #101820);
}

.registration-policy-confirmation label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.6;
}

.registration-policy-confirmation input[type="checkbox"] {
    flex: 0 0 auto;
    margin-top: .35em;
}

@media (max-width: 420px) {
    .site-policy-footer nav {
        display: grid;
        grid-template-columns: 1fr;
        text-align: center;
    }

    .policy-meta {
        grid-template-columns: 1fr;
    }

    .policy-meta dd {
        margin-bottom: 8px;
    }
}

.box {
    border: 0;
    padding: 12px;
    margin: 14px 0;
    background: var(--site-page-surface, #000);
    border-radius: var(--site-ui-radius, 0);
}

.box h2 {
    border-left: 8px solid var(--site-accent, #5854b8);
    border-bottom: 1px solid var(--site-accent, #5854b8);
    margin: 0 0 10px;
    padding: 2px 0 3px 6px;
    font-size: calc(15px * var(--site-font-scale, 1));
    font-weight: bold;
    color: #fff;
    text-shadow: var(--site-heading-shadow, 1px 1px 0 #000);
    box-shadow: 0 1px 0 #111;
}

.home-user-guide-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem 1rem;
    margin-bottom: 0.75rem;
}

.home-user-guide-heading h2 {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}

.home-user-guide-heading > a {
    flex: 0 0 auto;
    margin-left: auto;
    white-space: nowrap;
}

.home-user-guide p {
    margin: 8px 0;
    line-height: 1.7;
}

.home-user-guide-beginner {
    margin: 14px 0;
    padding: 14px 16px;
    border: 1px solid var(--site-accent-strong, #ffff00);
    border-left-width: 5px;
    border-radius: var(--site-ui-radius, 0);
    background: var(--site-ui-surface, #070707);
    color: var(--site-ui-text, #fff);
}

.home-user-guide-beginner .home-user-guide-beginner-label {
    margin: 0 0 4px;
    font-size: .875rem;
    font-weight: bold;
}

.home-user-guide-beginner h3 {
    margin: 0;
    font-size: 1.25rem;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.home-user-guide-beginner h3 a {
    display: inline-block;
    padding-block: 3px;
}

.home-user-guide-beginner p:last-child {
    margin: 6px 0 0;
    font-size: .875rem;
}

.home-user-guide-links {
    margin: 12px 0;
    line-height: 1.6;
}

.home-user-guide-links dt {
    margin-top: 10px;
    font-weight: bold;
}

.home-user-guide-links dd {
    margin: 2px 0 0 1em;
}

.home-user-guide-more {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 1em;
}

.home-user-guide-links a,
.home-user-guide-more a {
    padding-block: 2px;
}

label {
    display: block;
    margin: 8px 0;
}

input,
button,
select,
textarea {
    font: inherit;
}

button,
select,
input,
textarea,
fieldset {
    border-radius: var(--site-button-radius, 0);
}

textarea {
    vertical-align: top;
}

fieldset {
    border: 1px solid var(--site-panel-border, #4d4d2e);
    margin: 10px 0;
    padding: 8px;
}

legend {
    color: #ffff00;
}

.village-list {
    display: table;
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--site-table-border, #d7d79a);
    background: var(--site-page-surface, #000);
    color: var(--site-text, #fff);
    border-radius: var(--site-ui-radius, 0);
}

.table-scroll {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
}

.table-scroll > table {
    width: 100%;
    max-width: none;
}

.table-scroll > .village-list-wide {
    min-width: 640px;
}

.table-scroll:focus-visible {
    outline: 2px solid var(--site-accent-strong, #ffff00);
    outline-offset: -2px;
}

.village-list th,
.village-list td {
    border: 1px solid var(--site-table-border, #d7d79a);
    padding: 6px 5px;
    text-align: left;
    vertical-align: top;
}

.village-list th {
    color: #fff;
    font-weight: bold;
}

.village-list td:first-child {
    font-weight: bold;
    text-align: right;
    white-space: nowrap;
}

.village-title-link {
    font-weight: bold;
}

.village-list-detail {
    display: inline-block;
    margin-left: 1.4em;
    font-size: .92em;
    font-style: italic;
    font-weight: bold;
}

.village-ended-guide {
    border-top: 0;
}

.village-ended-guide p {
    margin: 6px 0;
}

.village-ended-link {
    display: inline-block;
    font-weight: bold;
}

.village-empty {
    margin: 6px 0 0;
}

.info-list {
    display: grid;
    grid-template-columns: 8em 1fr;
    gap: 6px 10px;
    text-align: left;
}

.info-list dt,
.info-list dd {
    min-width: 0;
    text-align: left;
}

.info-list dt {
    color: var(--site-ui-muted-text, var(--site-text, #fff));
}

.info-list dd {
    margin: 0;
    overflow-wrap: anywhere;
    white-space: normal;
}

.info-list dd.info-list-value--multiline {
    white-space: pre-wrap;
}

.info-list dd.info-list-value--stacked {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    white-space: normal;
}

.info-list-value--stacked > * {
    max-width: 100%;
}

.info-list-value--stacked .form-help {
    margin: 0;
}

.public-profile-info .public-profile-introduction {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.public-profile-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9em, 1fr));
    gap: 8px;
    margin: 0;
}

.public-profile-stats > div {
    box-sizing: border-box;
    border: 1px solid var(--site-table-border, #d7d79a);
    padding: 8px;
    background: var(--site-ui-surface, var(--site-page-surface, #000));
}

.public-profile-stats dt {
    font-size: .88em;
}

.public-profile-stats dd {
    margin: 3px 0 0;
    font-size: 1.18em;
    font-weight: bold;
}

.public-profile-history-table caption {
    padding: 4px;
    text-align: left;
    font-weight: bold;
}

.public-profile-history-table td:first-child {
    min-width: 13em;
}

.public-profile-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 12px;
}

.performance-page-nav,
.mypage-performance-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
}

.mypage-performance-links {
    margin-top: 12px;
}

.performance-filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10em, 1fr));
    gap: 10px 12px;
    align-items: end;
}

.performance-filter-grid label {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.performance-filter-grid input,
.performance-filter-grid select,
.performance-filter-grid button {
    box-sizing: border-box;
    width: 100%;
    min-height: 2.2em;
}

.participation-filter-grid .performance-search-field {
    grid-column: span 2;
}

.performance-filter-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: stretch;
}

.performance-filter-actions > * {
    flex: 1 1 8em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.button-link--secondary {
    filter: saturate(.65);
}

.performance-filter-summary,
.participation-result-count {
    margin-bottom: 0;
}

.performance-table-scroll {
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid var(--site-table-border, #d7d79a);
}

.performance-table {
    width: 100%;
    min-width: 56em;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

.performance-table caption {
    padding: 6px;
    text-align: left;
    font-weight: bold;
}

.performance-table th,
.performance-table td {
    border: 1px solid var(--site-table-border, #d7d79a);
    padding: 6px 8px;
    text-align: right;
    white-space: nowrap;
}

.performance-table th:first-child,
.performance-table td:first-child,
.participation-history-table td:nth-child(2) {
    text-align: left;
}

.participation-history-table {
    min-width: 68em;
}

.participation-history-table td:first-child {
    min-width: 14em;
    white-space: normal;
}

.participation-history-table td small {
    display: block;
}

.public-profile-pagination [aria-disabled="true"] {
    opacity: .65;
}

@media (max-width: 420px) {
    .performance-filter-grid {
        grid-template-columns: 1fr;
    }

    .participation-filter-grid .performance-search-field {
        grid-column: auto;
    }

    .performance-overview {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

#public-profile form,
.public-profile-form-layout {
    max-width: 48em;
}

.public-profile-form-layout {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.public-profile-form-layout > button {
    align-self: flex-start;
}

#public-profile input[type="text"],
#public-profile input[type="url"],
#public-profile textarea {
    display: block;
    box-sizing: border-box;
    width: 100%;
}

.account-title {
    color: var(--site-accent-strong, #ffff00);
    font-weight: bold;
    overflow-wrap: anywhere;
}

.account-title-form {
    display: block;
    clear: both;
    box-sizing: border-box;
    margin: 4px 0 14px;
    border: 1px solid var(--site-table-border, #d7d79a);
    border-radius: 6px;
    padding: 10px;
    background: var(--site-ui-surface, var(--site-page-surface, #000));
}

.account-title-controls {
    display: flex;
    align-items: stretch;
    gap: 8px;
    margin: 4px 0 8px;
}

.account-title-controls select {
    box-sizing: border-box;
    min-width: 0;
    flex: 1 1 auto;
}

.account-title-controls button {
    flex: 0 0 auto;
}

.account-title-form .form-help,
.account-title-form .form-message {
    margin: 0;
}

.form-help {
    margin: -3px 0 8px;
    font-size: .88em;
}

.form-errors {
    margin: 8px 0;
}

/* A non-interactive login result, not an input or a focusable action. */
.password-login-failure:focus {
    outline: none;
}

.password-login-failure p {
    margin: 0;
}

.password-login-failure p + p {
    margin-top: .25em;
}

.password-login-failure-title {
    color: var(--site-error-text, #ffb4b4);
    font-weight: 700;
}

.password-authentication-notice {
    padding: .65em .8em;
    border: 1px solid var(--site-panel-border, currentColor);
    border-radius: .3em;
}

.password-authentication-notice p {
    margin: 0 0 .6em;
}

.password-authentication-notice p:last-child {
    margin-bottom: 0;
}

.public-profile-field-error {
    box-sizing: border-box;
    width: 100%;
    margin: 4px 0 10px;
    border: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
}

.public-profile-field-error strong {
    display: block;
    margin-bottom: 3px;
}

.public-profile-field-error ul {
    margin: 0;
    padding-left: 1.4em;
}

#public-profile-handle-name[aria-invalid="true"] {
    border-color: var(--site-error-text, #ffb4b4);
    box-shadow: none;
}

.form-message {
    display: inline-block;
    margin: 0 0 0 8px;
}

.inline-form {
    display: inline;
}

.admin-page {
    box-sizing: border-box;
    width: min(1100px, calc(100% - 24px));
}

.admin-navigation-header {
    align-items: flex-start;
}

.admin-navigation-header nav {
    flex: 1 1 0;
    flex-wrap: wrap;
    justify-content: flex-end;
    overflow: visible;
}

.admin-table-scroll {
    box-sizing: border-box;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.admin-search-form {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 8px 12px;
    margin: 0 0 12px;
}

.admin-search-form label {
    display: grid;
    flex: 1 1 12rem;
    gap: 3px;
    min-width: min(12rem, 100%);
}

.admin-search-form input,
.admin-search-form select {
    box-sizing: border-box;
    width: 100%;
}

.admin-search-form button {
    flex: 0 0 auto;
}

.admin-user-table {
    min-width: 760px;
}

.admin-user-table th,
.admin-user-table td {
    padding: 4px 5px;
    vertical-align: middle;
    white-space: nowrap;
}

.admin-user-table td:first-child {
    text-align: left;
}

.admin-feature-cell {
    text-align: center !important;
}

.admin-feature-state {
    display: inline-block;
    min-width: 2em;
    margin-right: 4px;
}

.admin-user-table button {
    padding: 1px 6px;
}

.admin-rating-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0.75rem;
    margin: 0;
}

.admin-rating-summary-grid > div {
    border: 1px solid #777852;
    border-radius: 0.5rem;
    padding: 0.65rem 0.75rem;
}

.admin-rating-summary-grid dt {
    color: #b8b88e;
    font-size: 0.9rem;
}

.admin-rating-summary-grid dd {
    margin: 0.25rem 0 0;
    font-weight: 700;
}

.admin-rating-filters {
    display: grid;
    grid-template-columns: minmax(9rem, 1fr) minmax(8rem, 0.7fr) minmax(8rem, 0.7fr) minmax(10rem, 0.8fr) auto;
    align-items: end;
    gap: 0.5rem 0.75rem;
}

.admin-rating-filters label {
    align-self: end;
}

.admin-rating-filters input,
.admin-rating-filters select,
.admin-rating-filters button {
    min-height: 2.75rem;
}

.admin-rating-settlement-lookup {
    display: flex;
    align-items: end;
    gap: 0.5rem 0.75rem;
    flex-wrap: wrap;
}

.admin-rating-settlement-lookup label {
    flex-basis: 100%;
}

.admin-rating-settlement-lookup input {
    box-sizing: border-box;
    width: min(100%, 12rem);
    min-height: 2.75rem;
}

.admin-rating-settlement-lookup button {
    min-height: 2.75rem;
}

.rating-warning {
    color: var(--site-warning-text, #ffd391);
    font-weight: 700;
}

.admin-rating-page textarea {
    box-sizing: border-box;
    width: min(100%, 48rem);
    min-height: 7rem;
}

.admin-rating-table {
    min-width: 720px;
}

.admin-rating-history {
    min-width: 960px;
}

.admin-rating-settlement-factions {
    min-width: 760px;
}

.admin-rating-settlement-participants {
    min-width: 1380px;
}

@media (max-width: 760px) {
    .admin-rating-filters {
        grid-template-columns: 1fr;
    }

    .admin-rating-settlement-lookup {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-rating-settlement-lookup input {
        width: 100%;
    }

    .admin-rating-summary-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 420px) {
    .admin-rating-summary-grid {
        grid-template-columns: 1fr;
    }
}

.chip-tabs {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    border-bottom: 1px solid #888b5d;
    padding-bottom: 0;
}

.chip-tabs a,
.chip-tabs strong {
    display: inline-block;
    padding: 5px 10px;
    border: 1px solid #888b5d;
    border-bottom: 0;
    background: #2f331e;
    color: #ffffcc;
    text-decoration: none;
}

.chip-tabs strong {
    background: #d7d79a;
    color: #000;
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .45);
}

.chip-help,
.chip-warning {
    border: 1px solid var(--site-panel-border, #777852);
    background: var(--site-ui-surface, #15150a);
    color: var(--site-ui-text, #d7d79a);
    margin: 8px 0 12px;
    padding: 7px 9px;
    line-height: 1.55;
    box-shadow: var(--site-panel-shadow, none);
}

.chip-warning {
    border-color: var(--site-result-unknown-border, #ffff00);
    background: var(--site-result-unknown-bg, #2a2a12);
    color: var(--site-result-unknown-text, #fff);
}

.chip-help p,
.chip-warning p {
    margin: 3px 0;
}

.chip-dummy-warning {
    color: var(--site-warning-text, #ffd391);
    font-weight: bold;
}

.chip-summary {
    display: grid;
    grid-template-columns: 8em minmax(0, 1fr);
    gap: 8px 12px;
    line-height: 1.55;
}

.chip-summary dt {
    color: #d7d79a;
}

.chip-summary dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.chip-action-panel {
    border: 1px solid #ffff00;
    background: #202008;
}

.chip-action-panel p {
    margin: 4px 0 8px;
    line-height: 1.45;
}

.chip-primary-button {
    border: 2px outset #ffffcc;
    background: #ffff00;
    color: #000;
    font-weight: bold;
    padding: 5px 14px;
}

.chip-secondary-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-top: 8px;
}

.readonly-value {
    display: inline-block;
    min-width: 12em;
    border: 1px solid #777852;
    background: #1c1c12;
    color: #ffffcc;
    padding: 2px 5px;
}

.chip-table-note,
.chip-upload-note {
    color: #d7d79a;
    font-size: .92rem;
    line-height: 1.45;
    margin: 4px 0 8px;
}

.chip-image-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.chip-image-preview {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 54px;
}

.chip-image-preview img {
    width: auto;
    height: auto;
    max-width: 48px;
    max-height: 48px;
    border: 1px solid #777852;
    background: #111;
    object-fit: contain;
}

.chip-temporary-image {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 4px 6px;
    border: 1px solid #777852;
    background: #111107;
    color: #ffffcc;
    font-size: .86rem;
}

.chip-temporary-image img {
    width: auto;
    height: auto;
    max-width: 48px;
    max-height: 48px;
    border: 1px solid #777852;
    background: #111;
    object-fit: contain;
}
.chip-image-note {
    color: #d7d79a;
    font-size: .78rem;
    line-height: 1.2;
}

.chip-character-image-check {
    display: grid;
    grid-template-columns: 58px minmax(9em, 1fr);
    gap: 8px;
    align-items: start;
}

.chip-character-image-thumb {
    display: inline-flex;
    max-width: 52px;
    align-items: center;
    justify-content: center;
}

.chip-character-image-thumb img {
    display: block;
    width: auto;
    height: auto;
    max-width: 50px;
    max-height: 50px;
    border: 1px solid #777852;
    background: #111;
    object-fit: contain;
}

.chip-image-missing-label {
    color: #d7d79a;
    font-size: .78rem;
    line-height: 1.2;
    padding: 2px;
    text-align: center;
}

.chip-image-border-settings {
    margin: 1rem 0;
    padding: 0.75rem;
    border: 1px solid var(--site-table-border, #777);
}

.chip-image-border-settings h3 {
    margin: 0 0 0.6rem;
}

.chip-image-border-toggle,
.chip-image-border-details {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.chip-image-border-details {
    margin-top: 0.6rem;
}

.chip-image-border-details[hidden],
.chip-image-border-custom[hidden],
.chip-image-border-error[hidden] {
    display: none;
}

.chip-image-border-dialog {
    max-width: min(34rem, calc(100vw - 2rem));
    padding: 0;
    border: 1px solid var(--site-table-border, #777);
    color: var(--site-text, #fff);
    background: var(--site-page-bg, #000);
}

.chip-image-border-dialog::backdrop {
    background: rgb(0 0 0 / 55%);
}

.chip-image-border-dialog-body {
    padding: 1rem;
}

.chip-image-border-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem 1rem;
}

.chip-image-border-custom {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.8rem;
}

.chip-image-border-error {
    color: var(--site-error-text, #ffb4b4);
}

.chip-image-border-dialog-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.chip-set-image-border {
    box-sizing: border-box;
    border: 1px solid var(--chip-set-image-border-color, var(--chip-image-border-color, #777));
}

.chip-set-image-borderless {
    box-sizing: border-box;
    border: 0;
}

.chip-variant-status {
    display: grid;
    grid-template-columns: 4.5em minmax(0, 1fr);
    gap: 2px 6px;
    margin: 0;
}

.chip-variant-status div {
    display: contents;
}

.chip-variant-status dt {
    color: #d7d79a;
    margin: 0;
}

.chip-variant-status dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.chip-upload-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}

.chip-upload {
    padding: 8px;
    border: 1px solid #555;
    background: #050505;
}

.chip-upload h3 {
    margin: 0 0 6px;
    font-size: calc(15px * var(--site-font-scale, 1));
}

.chip-crop-stage {
    position: relative;
    width: fit-content;
    max-width: 100%;
    margin-top: 8px;
    line-height: 0;
}

.chip-crop-stage img {
    display: block;
    max-width: min(320px, 100%);
    max-height: 320px;
    border: 1px solid #777;
}

.chip-crop-box {
    position: absolute;
    left: 0;
    top: 0;
    box-sizing: border-box;
    width: 160px;
    height: 160px;
    border: 2px solid #ffff00;
    background: rgba(255, 255, 0, .08);
    cursor: move;
    touch-action: none;
}

.chip-size-control {
    display: block;
    margin-top: 8px;
}

.chip-character-actions {
    white-space: nowrap;
}

.link-button {
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--site-link, #00ffff);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.error,
.form-errors,
.public-profile-field-error {
    color: var(--site-error-text, #ffb4b4);
    font-weight: 700;
    overflow-wrap: anywhere;
}

/* Programmatic focus on a result is separate from keyboard focus on an action. */
[data-error-summary-focused]:not(a):not(button):not(input):not(select):not(textarea):not([contenteditable]):not([role="button"]):not([role="combobox"]):not([role="textbox"]):focus {
    outline: none;
}

.error-incident {
    margin: 1rem 0;
    padding: 0.8rem;
    border: 1px solid var(--site-panel-border, #999);
    border-radius: 0.45rem;
    background: var(--site-ui-surface, #f7f7f7);
}

.error-incident > :first-child {
    margin-top: 0;
}

.error-incident-id-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.error-incident-id-row code {
    max-width: 100%;
    padding: 0.35rem 0.5rem;
    overflow-wrap: anywhere;
    user-select: all;
}

.link-button:hover,
.feedback-open-button:hover {
    color: var(--site-link-hover, var(--site-link, #00ffff));
    text-decoration-thickness: .14em;
}

.link-button:focus-visible,
.feedback-open-button:focus-visible {
    outline: 3px solid var(--site-focus-ring, var(--site-accent-strong, #ffff00));
    outline-offset: 2px;
}

.notice {
    border: 1px solid var(--site-result-neutral-border, var(--site-panel-border, #777));
    border-radius: var(--site-button-radius, 0);
    padding: 8px 10px;
    background: var(--site-result-neutral-bg, var(--site-ui-surface, #1f2c36));
    color: var(--site-result-neutral-text, var(--site-ui-text, #fff));
    font-weight: 700;
}

.feedback-open-button {
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--site-link, #00ffff);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.feedback-modal {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: grid;
    place-items: center;
    padding: 16px;
    background: rgba(0, 0, 0, .62);
}

.feedback-modal[hidden] {
    display: none;
}

.feedback-dialog {
    width: min(520px, 100%);
    border: 2px solid var(--site-panel-border, #4d4d2e);
    border-radius: var(--site-ui-radius, 0);
    padding: 12px;
    background: var(--site-ui-surface, #070707);
    color: var(--site-ui-text, #fff);
    box-shadow: var(--site-panel-shadow, 4px 4px 0 rgba(0, 0, 0, .6));
}

.feedback-dialog a {
    color: var(--site-link, #00ffff);
}

.feedback-dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-bottom: 1px solid var(--site-panel-border, #4d4d2e);
    margin-bottom: 10px;
    padding-bottom: 4px;
}

.feedback-dialog-head h2 {
    margin: 0;
    font-size: calc(16px * var(--site-font-scale, 1));
}

.feedback-close-button {
    min-width: 28px;
    min-height: 24px;
}

.feedback-form select,
.feedback-form input,
.feedback-form textarea {
    width: 100%;
    box-sizing: border-box;
}

.feedback-submit-status {
    border: 1px solid var(--site-panel-border, #4d4d2e);
    padding: 8px;
    background: var(--site-panel-bg, #070707);
}

.feedback-form button[type="submit"][disabled] {
    cursor: wait;
    opacity: .72;
}

.feedback-result {
    border: 1px solid var(--site-panel-border, #4d4d2e);
    padding: 8px;
    background: var(--site-panel-bg, #070707);
}

.form-help {
    color: var(--site-ui-muted-text, #e9e9c0);
    font-size: .92rem;
    margin: 2px 0 8px;
}

.entry-guide,
.entry-notice {
    border: 1px solid var(--site-result-neutral-border, var(--site-panel-border, #777));
    color: var(--site-result-neutral-text, var(--site-ui-text, #fff));
    background: var(--site-result-neutral-bg, var(--site-ui-surface, #1f2c36));
    margin: 10px 0;
    padding: 8px 10px;
}

.entry-guide p {
    margin: 0 0 2px;
}

.entry-settings {
    display: grid;
    gap: 8px;
}

.entry-settings > label {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
}

.entry-message-row {
    display: grid;
    grid-template-columns: minmax(64px, 96px) minmax(0, 1fr);
    align-items: start;
    gap: 10px;
}

.entry-chip-preview img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.entry-message-input {
    display: grid;
    gap: 4px;
}

.entry-message-input textarea {
    box-sizing: border-box;
    min-height: 132px;
    width: 100%;
}

.entry-confirm-summary {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 4px 10px;
    margin: 10px 0;
}

.entry-confirm-summary dt {
    color: #d7d79a;
}

.entry-confirm-summary dd {
    margin: 0;
}

.village-room {
    padding-bottom: 4px;
}

.village-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
    margin: 12px 0;
}

.village-tabs span {
    color: #fff;
}

.village-tabs a.selected {
    color: #fff;
    text-decoration: none;
}

.message-index {
    margin: 10px 0 14px;
    line-height: 1.35;
    padding: 4px 0;
}

.message-index a {
    margin-right: 4px;
}

.message-index .message-index-jump {
    display: inline-block;
    min-width: 1.5em;
    margin-right: 4px;
    text-align: center;
}

.message-index .message-index-jump[aria-disabled="true"] {
    opacity: 0.45;
}

.message-index a.selected {
    background: #d7d79a;
    color: #000;
    padding: 0 2px;
}

.village-log-show-all {
    margin: -8px 0 14px;
}

.log-display-form {
    margin: 8px 0 10px;
    text-align: right;
    color: #fff;
}

.log-display-form label {
    display: inline;
    margin: 0 2px 0 0;
}

.log-display-form select,
.log-display-form button {
    margin-left: 2px;
}

.log-display-form button {
    border: 2px outset #d7d7d7;
    background: #e8e8e8;
    color: #000;
    padding: 1px 8px;
}

.log-search-panel {
    border: 2px solid #8a8a8a;
    background: #626262;
    color: #fff;
    margin: 10px 0 12px;
    padding: 7px 8px;
    box-shadow: var(--site-panel-shadow,
            inset 1px 1px 0 rgba(255, 255, 255, .52),
            inset -1px -1px 0 rgba(0, 0, 0, .35),
            3px 3px 0 #000);
}

.log-search-form {
    margin: 0;
}

.log-search-form select,
.log-search-form input {
    margin-right: 3px;
}

.log-search-form input {
    box-sizing: border-box;
    max-width: min(58vw, 260px);
}

.log-search-form button {
    border: 1px solid #a0a0a0;
    background: #e8e8e8;
    color: #000;
    padding: 1px 8px;
    font-size: .9em;
}

.message-filter-panel {
    border: 2px dotted #2d3040;
    background: #4b5f8d;
    color: #fff;
    margin: 12px auto;
    max-width: 250px;
    padding: 4px;
    box-shadow: 3px 3px 0 #000;
}

.message-filter-head,
.message-filter-caption {
    background: #4b5f8d;
    border-bottom: 1px solid rgba(255, 255, 255, .45);
    color: #fff;
    padding: 2px 4px;
}

.message-filter-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: bold;
}

.message-filter-collapse {
    width: 28px;
    min-height: 24px;
    border: 2px outset #d7d7d7;
    background: #e8e8e8;
    color: #000;
    padding: 0;
}

.message-filter-panel.collapsed .message-filter-section {
    display: none;
}

.message-filter-panel.collapsed .message-filter-collapse {
    transform: rotate(180deg);
}

.message-filter-section {
    margin-top: 4px;
}

.message-filter-group {
    margin-top: 4px;
}

.message-filter-group-caption {
    background: #20245a;
    border-left: 4px solid #9a9ad7;
    border-bottom: 1px solid #334f9f;
    color: #fff;
    font-size: .9rem;
    font-weight: bold;
    padding: 2px 4px;
}

.message-filter-group .message-filter-participants {
    display: grid;
    gap: 1px;
}

.message-filter-participant,
.message-filter-type {
    background: #000080;
    border-bottom: 1px solid #334f9f;
}

.message-filter-participant {
    container-type: inline-size;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-rows: auto minmax(1.1em, auto);
    gap: 4px;
    align-items: end;
    min-height: 42px;
    padding: 6px 3px 3px;
}

.message-filter-name {
    display: block;
    grid-column: 1 / -1;
    grid-row: 1;
    overflow-wrap: anywhere;
}

.message-filter-memo {
    color: #cfd7ff;
    display: block;
    font-size: .85rem;
    grid-column: 1;
    grid-row: 2;
    line-height: 1.25;
    min-width: 0;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.message-filter-prompt-counts {
    font-size: .8rem;
    grid-column: 2;
    grid-row: 2;
    white-space: nowrap;
}

.message-filter-activity {
    align-items: center;
    display: flex;
    gap: 4px;
    grid-column: 3;
    grid-row: 2;
    white-space: nowrap;
}

.message-filter-stats {
    display: grid;
    grid-auto-flow: column;
    gap: 4px;
    min-width: 36px;
    justify-content: end;
    white-space: nowrap;
}

@container (max-width: 245px) {
    .message-filter-prompt-counts {
        grid-column: 1 / -1;
        grid-row: 3;
        justify-self: end;
    }
}

.message-filter-star {
    border: 0;
    background: transparent;
    color: var(--site-ui-highlight-text, var(--site-link, #00ffff));
    cursor: pointer;
    font-size: calc(15px * var(--site-font-scale, 1));
    line-height: 1;
    padding: 0;
}

.message-filter-star:hover,
.message-filter-star:focus-visible {
    color: var(--site-accent-strong, #ffff00);
}

.message-filter-type-list {
    display: grid;
    gap: 1px;
}

.message-filter-type {
    border-left: 0;
    border-right: 0;
    border-top: 0;
    color: #fff;
    cursor: pointer;
    min-height: 32px;
    padding: 5px 4px;
    text-align: left;
}

.message-filter-type:not(.selected) {
    background: #444;
    color: #dcdcdc;
}

.message-filter-actions {
    display: grid;
    gap: 2px;
}

.message-filter-actions button,
.message-filter-section select,
.message-filter-section button[data-message-focus-open],
.village-commit-section button {
    border: 2px outset #d7d7d7;
    background: #e8e8e8;
    color: #000;
}

.message-filter-actions button,
.message-filter-section button[data-message-focus-open],
.village-commit-section button {
    min-height: 30px;
}

.message-filter-section select {
    box-sizing: border-box;
    margin: 2px 0 4px;
    width: 100%;
}

.message-filter-section button[data-message-focus-open] {
    width: 100%;
}

.village-commit-section form {
    display: grid;
    gap: 2px;
}

.village-commit-section button {
    width: 100%;
}

.village-commit-status,
.village-commit-note {
    margin: 4px 0;
    line-height: 1.35;
}

.village-commit-note {
    font-size: .88rem;
}

.log-search-panel p,
.window-description {
    margin: 4px 0 0;
    line-height: 1.45;
}

.log-search-panel .log-search-form + .log-search-form {
    display: inline-block;
    margin-top: 5px;
}

.log-search-panel .log-search-form + .log-search-form select {
    display: none;
}

.log-search-panel p {
    font-size: .92rem;
}

.window-description {
    border: 1px solid var(--site-panel-border, #777852);
    background: var(--site-ui-surface, #15150a);
    color: var(--site-ui-text, #d7d79a);
    padding: 5px 7px;
    box-shadow: var(--site-panel-shadow, none);
}

.village-info-card,
.village-rule-roll-call {
    --village-info-label-text: var(--village-info-card-label-text, var(--site-ui-highlight-text, #e6f4df));
    background: var(--village-info-card-bg, var(--site-ui-surface, #15150a));
    border: var(--village-info-card-border-width, 2px)
            var(--village-info-card-border-style, solid)
            var(--village-info-card-border, var(--site-panel-border, #777852));
    color: var(--village-info-card-text, var(--site-ui-text, #fff));
    border-radius: var(--village-info-card-radius, var(--site-ui-radius, 0));
    box-shadow: var(--village-info-card-shadow, var(--site-panel-shadow, none));
}

.village-info-card {
    margin: 10px 0 22px;
    padding: 20px 26px;
    line-height: 1.45;
}

.village-info-card .info-list dt {
    color: var(--village-info-label-text);
}

.village-info-card a {
    color: var(--village-info-card-link, var(--site-link, #fff4b0));
}

.village-info-card a:visited {
    color: var(--village-info-card-link-visited, var(--site-link-visited, #f1dcff));
}

.village-info-card a:hover,
.village-info-card a:active {
    color: var(--village-info-card-link-hover, var(--site-link-hover, #fff));
}

.village-info-card a:focus-visible {
    outline-color: var(--village-info-card-focus-ring, var(--site-focus-ring, #fff));
}

.village-plan-source-summary {
    margin: 10px 0 14px;
    padding: 10px 12px;
    border: 1px solid var(--site-panel-border, #777852);
    background: var(--site-ui-surface, #15150a);
    color: var(--site-ui-text, var(--site-text, #fff));
}

.village-plan-source-summary > p {
    margin: 4px 0 8px;
}

.village-plan-source-summary .info-list {
    margin-bottom: 8px;
}

.village-plan-source-actions,
.letter-related-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
}

.village-auto-abandon-notice,
.village-auto-abandoned-notice,
.village-deadline-help {
    border: 1px solid var(--site-result-unknown-border, #c9ad55);
    background: var(--site-result-unknown-bg, #463f22);
    color: var(--site-result-unknown-text, #fff4b0);
    padding: 8px 10px;
}

.village-auto-abandon-notice time,
.village-deadline-help time {
    font-weight: bold;
}

.village-deadline-help {
    margin-top: 10px;
}

.village-deadline-help .form-help,
.village-info-card .form-help {
    display: block;
    margin: 4px 0 0;
}

.village-info-card .form-help {
    color: inherit;
}

.village-silence-settings {
    border-top: 1px solid var(--site-border, #9b9b9b);
    display: grid;
    gap: 8px;
    margin-top: 14px;
    padding-top: 14px;
}

.village-result-reflection-setting {
    display: grid;
    gap: 6px;
}

.village-result-reflection-setting label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: bold;
}

.village-result-reflection-setting .form-help {
    margin: -2px 0 6px 26px;
}

.entry-confirm-result-reflection {
    display: grid;
    gap: 4px;
}

.village-result-reflection-notice {
    display: grid;
    gap: 4px;
    border: 2px solid var(--site-result-unknown-border, #c9ad55);
    background: var(--site-result-unknown-bg, #463f22);
    color: var(--site-result-unknown-text, #fff4b0);
    margin: 8px 0;
    padding: 8px 10px;
}

.village-silence-toggle {
    font-weight: bold;
}

.village-silence-time {
    border-left: 4px solid var(--site-accent, #33d6e8);
    padding-left: 10px;
}

.village-silence-reservation-help {
    border-left: 4px solid var(--site-accent, #33d6e8);
    padding-left: 8px;
}

.village-silence-active-notice {
    background: var(--site-result-unknown-bg, #463f22);
    border: 2px solid var(--site-accent, #33d6e8);
    color: var(--site-result-unknown-text, #fff4b0);
    margin: 12px 0;
    padding: 10px 12px;
}

.village-silence-active-notice strong {
    color: var(--site-accent, #33d6e8);
    font-size: 1.15rem;
}

.village-silence-active-notice p {
    margin: 5px 0 0;
}

.village-silence-summary {
    box-sizing: border-box;
    border: 1px solid var(--site-panel-border, #6c7e90);
    padding: 7px 9px;
    background: var(--site-panel-bg, #070707);
    background: color-mix(in srgb, var(--site-panel-bg, #070707) 82%, transparent);
}

.village-silence-summary--enabled {
    border-color: var(--site-accent, #33d6e8);
    background: var(--site-result-unknown-bg, #463f22);
    color: var(--site-result-unknown-text, #fff4b0);
}

.village-silence-status {
    color: inherit;
    font-size: 1.05rem;
}

.admin-operation-card form {
    display: grid;
    gap: 10px;
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.form-actions form {
    display: inline;
    margin: 0;
}

.button-link {
    border: 2px outset #d7d7d7;
    background: var(--site-aux-button-bg, #e8e8e8);
    color: var(--site-aux-button-color, #000);
    padding: 3px 10px;
    text-decoration: none;
}

.button-link:visited,
.button-link:hover,
.button-link:active {
    color: var(--site-aux-button-color, #000);
}

.server-clock {
    position: fixed;
    top: max(8px, env(safe-area-inset-top));
    right: max(8px, env(safe-area-inset-right));
    padding: 2px 5px;
    border: 1px solid var(--site-panel-border, #777852);
    background: var(--site-ui-surface, #000);
    color: var(--site-ui-text, #fff);
    font-variant-numeric: tabular-nums;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    line-height: 1.2;
    z-index: 850;
    box-shadow: var(--site-panel-shadow, none);
}
.account-security-form,
.account-recovery-form {
    display: grid;
    gap: 0.85rem;
}

.account-security-form label,
.account-recovery-form label {
    display: grid;
    gap: 0.35rem;
}

.account-security-form input,
.account-recovery-form input {
    width: min(100%, 42rem);
}

.account-security-radio-group {
    display: grid;
    gap: 0.35rem;
}

.account-security-form label.account-security-radio-option {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 2.25rem;
}

.account-security-form .account-security-radio-option input[type="radio"] {
    flex: 0 0 auto;
    width: auto;
    margin: 0;
}

.account-recovery-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    margin-top: 1rem;
}

.authentication-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1rem 0;
    color: var(--site-muted-text, #aaa);
}

.authentication-divider::before,
.authentication-divider::after {
    content: "";
    flex: 1;
    border-top: 1px solid var(--site-panel-border, #777852);
}

.passkey-settings-block + .passkey-settings-block {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--site-panel-border, #777852);
}

.passkey-list {
    display: grid;
    gap: 0.9rem;
    padding-left: 1.25rem;
}

.passkey-list li {
    display: grid;
    gap: 0.45rem;
}

.recovery-code-panel {
    margin-top: 1rem;
    padding: 1rem;
    border: 2px solid var(--accent, #8d6f45);
    border-radius: 0.5rem;
}

.recovery-code-panel ul {
    columns: 2;
    padding-left: 1.5rem;
}

.recovery-code-panel code {
    overflow-wrap: anywhere;
    font-size: 1.05rem;
    letter-spacing: 0.08em;
}

@media (max-width: 520px) {
    .recovery-code-panel ul {
        columns: 1;
    }
}

/* Letter mailbox */
.letter-tabs { display:flex; gap:.35rem; flex-wrap:wrap; margin:1rem 0; }
.letter-tabs a { position:relative; padding:.55rem .75rem; border:1px solid var(--border-color, #777); border-radius:.35rem; text-decoration:none; }
.letter-tabs a.selected { font-weight:700; border-width:2px; }
.letter-count-badge,.letter-request-badge { display:inline-flex; min-width:1.35rem; height:1.35rem; padding:0 .3rem; align-items:center; justify-content:center; border-radius:999px; color:#fff; background:#c22; font-size:.75rem; line-height:1; }
.letter-request-badge { background:#805000; }
.letter-list { display:grid; gap:.25rem; }
.letter-row { display:grid; grid-template-columns:2rem minmax(7rem,1fr) minmax(10rem,2fr) auto; gap:.5rem; align-items:center; padding:.65rem; border-bottom:1px solid var(--border-color, #777); text-decoration:none; }
.letter-row.unread { font-weight:700; background:rgba(255,190,40,.12); }
.letter-star { color:#ffd24a; font-size:1.2rem; }
.letter-favorite {
  color:#1b1200;
  background:#ffd24a;
  border:2px solid #fff2a8;
  font-size:1rem;
  font-weight:700;
}
.letter-favorite:hover,.letter-favorite:focus-visible { background:#fff0a6; color:#000; outline:3px solid #42dff5; }
.letter-favorite.active { color:#fff; background:#9b5600; border-color:#ffcf66; }
.letter-request { border-top:1px solid var(--border-color, #777); padding:1rem 0; }
.letter-request form { display:inline-block; margin-right:.5rem; }
.letter-form { display:grid; grid-template-columns:minmax(0, 1fr); gap:.6rem; }
.letter-form > input,.letter-form > textarea { box-sizing:border-box; min-width:0; width:100%; }
.letter-recipient-picker {
  display:grid;
  gap:.4rem;
  min-width:0;
}
.letter-recipient-field {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.4rem;
  box-sizing:border-box;
  width:100%;
  padding:0;
  border:0;
  background:transparent;
  color:inherit;
}
.letter-recipient-empty {
  color:inherit;
}
.letter-recipient-chip {
  display:inline-flex;
  align-items:center;
  max-width:100%;
  overflow:hidden;
  border:1px solid #566a7d;
  border-radius:999px;
  background:#f4f7fa;
  color:#15202a;
  font-weight:700;
}
.letter-recipient-chip > span {
  min-width:0;
  padding:.25rem .25rem .25rem .65rem;
  overflow-wrap:anywhere;
}
.letter-recipient-chip button {
  align-self:stretch;
  min-width:2rem;
  margin:0;
  padding:.15rem .55rem;
  border:0;
  border-left:1px solid #8d2e2e;
  border-radius:0 999px 999px 0;
  background:#b83232;
  color:#fff;
  font-size:1.1rem;
  font-weight:900;
}
.letter-recipient-chip button:hover,
.letter-recipient-chip button:focus-visible {
  background:#7d1414;
  outline:3px solid #22cce5;
  outline-offset:1px;
}
.letter-recipient-open {
  justify-self:start;
  align-self:start;
  width:fit-content;
  max-width:100%;
  min-width:44px;
  min-height:44px;
  padding:.5rem .85rem;
  font-size:1rem;
  line-height:1.4;
  font-weight:700;
}
.letter-recipient-status,
.letter-recipient-search-status {
  min-height:1.35em;
  margin:0;
  overflow-wrap:anywhere;
}
.letter-recipient-picker > .form-help {
  margin:0;
}
.letter-recipient-status:empty {
  display:none;
}
.letter-recipient-status:not(:empty) {
  padding:.45rem .6rem;
  border-left:4px solid #f2b84b;
  background:rgba(120,65,0,.45);
}
.letter-recipient-dialog {
  box-sizing:border-box;
  width:min(34rem, calc(100vw - 2rem));
  max-height:calc(100vh - 2rem);
  padding:1rem;
  border:2px solid var(--site-panel-border, #6c7e90);
  border-radius:.65rem;
  background-color:var(--site-bg, #101820);
  background-image:linear-gradient(var(--site-page-surface, #101820), var(--site-page-surface, #101820));
  color:var(--site-text, #fff);
  overflow-y:auto;
}
.letter-recipient-dialog::backdrop {
  background:rgb(0 0 0 / 65%);
}
.letter-recipient-dialog-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding-bottom:.7rem;
  border-bottom:2px solid var(--site-panel-border, #6c7e90);
}
.letter-recipient-dialog-head h2 {
  margin:0;
  font-size:1.2rem;
}
.letter-recipient-dialog-head button {
  min-width:44px;
  min-height:44px;
  font-size:1.2rem;
}
.letter-recipient-search-row {
  display:grid;
  gap:.35rem;
  margin-top:1rem;
}
.letter-recipient-search-input {
  display:grid;
  grid-template-columns:minmax(0, 1fr) 48px;
  gap:.4rem;
}
.letter-recipient-search-input input {
  box-sizing:border-box;
  width:100%;
  min-width:0;
}
.letter-recipient-search-input button {
  min-width:44px;
  padding:.35rem;
}
.letter-recipient-match-types {
  display:flex;
  flex-wrap:wrap;
  gap:.4rem;
  margin-top:.65rem;
}
.letter-recipient-match-types button {
  flex:1 1 7rem;
}
.letter-recipient-match-types button[aria-pressed="true"] {
  border-color:#66ecff;
  background:#176579;
  color:#fff;
  box-shadow:0 0 0 2px #66ecff inset;
}
.letter-recipient-search-status {
  margin:.75rem 0 .4rem;
}
.letter-recipient-results {
  display:grid;
  gap:.4rem;
}
.letter-recipient-result {
  display:grid;
  grid-template-columns:minmax(0, 1fr) 48px;
  align-items:center;
  gap:.65rem;
  min-height:3.4rem;
  padding:.4rem;
  border:2px solid #8f9ba7;
  border-radius:.35rem;
  background:rgba(120,135,150,.22);
}
.letter-recipient-result-name {
  min-width:0;
  overflow-wrap:anywhere;
  font-weight:700;
}
.letter-recipient-result-add {
  box-sizing:border-box;
  justify-self:end;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  min-width:44px;
  min-height:44px;
  padding:.2rem;
  border:2px solid #d7efff;
  background:#2e5f95;
  color:#fff;
  font-size:1.35rem;
  font-weight:900;
}
.letter-rule-check { padding:.75rem; border:1px solid var(--border-color, #777); }
.letter-detail-head { display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.letter-party { min-width:0; }
.letter-party h2 { margin:.15rem 0 .5rem; font-size:1rem; }
.letter-single-party { margin:0; font-size:1.15rem; font-weight:700; }
.letter-sent-recipients {
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
  margin:0;
  padding:0;
  list-style:none;
}
.letter-sent-recipients a {
  display:inline-flex;
  max-width:100%;
  padding:.3rem .65rem;
  border:1px solid #66d6e8;
  border-radius:999px;
  background:rgba(20,115,135,.25);
  overflow-wrap:anywhere;
  font-weight:700;
}
.letter-thread { display:grid; gap:.85rem; }
.letter-card {
  margin:0;
  padding:1rem;
  border:2px solid #536b82;
  border-left-width:7px;
  border-radius:.5rem;
  background:rgba(10,22,38,.72);
  box-shadow:0 3px 10px rgba(0,0,0,.28);
}
.letter-card + .letter-card { margin-top:.35rem; }
.letter-card.sent { margin-left:2rem; border-left-color:#dca83b; }
.letter-card.letter-sent-record { margin-left:0; }
.letter-card.received { margin-right:2rem; border-left-color:#35d6ed; }
.letter-direction { margin:.1rem 0 .75rem; font-weight:700; color:#7eeaff; }
.letter-card.sent .letter-direction { color:#ffd36b; }
.letter-latest-label {
  display:inline-block;
  width:max-content;
  margin:0 0 .5rem;
  padding:.2rem .55rem;
  border-radius:999px;
  color:#07111e;
  background:#7eeaff;
  font-weight:700;
}
.letter-blocked-notice {
  margin:1rem 0;
  padding:1rem;
  border:3px solid #ff5a5a;
  border-radius:.5rem;
  background:#451414;
  color:#fff;
}
.account-withdrawn-notice {
  margin:1rem 0;
  padding:1rem;
  border:3px solid #ffb347;
  border-radius:.5rem;
  background:#3d260e;
  color:#fff4da;
}
.account-withdrawn-notice strong { font-size:1.1rem; }
.account-withdrawn-notice p { margin:.45rem 0 0; }
.account-withdrawal-link {
  display:block;
  margin:max(.65rem, 10px) 0 0 !important;
}
.letter-block-list { display:grid; gap:.65rem; padding-left:1.25rem; }
.letter-block-list li { padding:.65rem; border-bottom:1px solid var(--border-color,#777); }
.letter-block-list form { display:inline-block; margin-left:1rem; }
.letter-body { white-space:pre-wrap; overflow-wrap:anywhere; }
.letter-reply-form {
  display:grid;
  gap:.75rem;
  width:100%;
}
.letter-global-launcher {
    position: fixed;
    z-index: 1200;
    right: 12px;
    bottom: 12px;
    min-width: 44px;
    min-height: 44px;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 2px solid #ffffcc;
    border-radius: 999px;
    background: #8b1a1a;
    color: #fff;
    text-decoration: none;
}
.letter-notification-toast {
    position: fixed;
    z-index: 1210;
    right: 12px;
    bottom: 68px;
    width: min(25rem, calc(100vw - 24px));
    box-sizing: border-box;
    padding: 12px;
    border: 2px solid #ffffcc;
    background: #202010;
    color: #fff;
    overflow-wrap: anywhere;
}
.letter-notification-toast p { margin: 0 0 8px; }
.letter-notification-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.letter-notification-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    margin: 0;
    border: 2px outset #d7d7d7;
    padding: 4px 12px;
    background: var(--site-aux-button-bg, #e8e8e8);
    color: var(--site-aux-button-color, #000);
    cursor: pointer;
}
.letter-reply-form label { margin:0; }
.letter-reply-form input[name="subject"],
.letter-reply-form textarea[name="body"] {
  display:block;
  box-sizing:border-box;
  width:100%;
  max-width:none;
  margin-top:.35rem;
}
.letter-reply-form textarea[name="body"] {
  min-height:12rem;
  resize:vertical;
}
.letter-reply-actions {
  display:flex;
  justify-content:flex-start;
}
.letter-reply-actions button {
  min-width:8rem;
  min-height:2.75rem;
}
.letter-safety-section {
  margin-top:1.25rem;
}
@media (max-width: 640px) {
  .letter-row { grid-template-columns:1.5rem 1fr; }
  .letter-row span:nth-of-type(2),.letter-row small { grid-column:2; }
  .letter-detail-head { align-items:flex-start; flex-wrap:wrap; }
  .letter-detail-head form { margin-left:auto; }
  .letter-card.sent { margin-left:.75rem; }
  .letter-card.letter-sent-record { margin-left:0; }
  .letter-reply-form textarea[name="body"] { min-height:10rem; }
  .letter-reply-actions button { width:100%; }
  .letter-recipient-open {
    min-height:30px;
    padding:.2rem .6rem;
    line-height:1.2;
  }
  .letter-recipient-dialog {
    width:calc(100vw - 1rem);
    padding:.75rem;
  }
  .letter-recipient-result {
    grid-template-columns:minmax(0, 1fr) 44px;
    gap:.45rem;
  }
}
.letter-confirm-dialog {
    box-sizing: border-box;
    width: min(36rem, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    margin-inline: auto;
    border: 1px solid var(--line, #9a8067);
    border-radius: 0.75rem;
    padding: 1.25rem;
}
.letter-confirm-dialog::backdrop {
    background: rgb(0 0 0 / 55%);
}
.letter-confirm-dialog [data-letter-confirm-body] {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    max-height: 50vh;
    overflow-y: auto;
}
.letter-confirm-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1rem;
}
.letter-confirm-actions button {
    flex: 1 1 8rem;
    min-width: 8rem;
    min-height: 44px;
}

.account-withdrawal-page .withdrawal-warning {
    border-color: #c56a5a;
}

.account-withdrawal-page .withdrawal-blockers {
    border-color: #d49a3a;
}

.account-withdrawal-page .withdrawal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.account-withdrawal-page .danger-button {
    background: #7f2525;
    color: #fff;
}

.account-withdrawal-page .withdrawal-confirm-check {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
}

.account-settings-section {
    margin-top: 1.5rem;
}

.registration-duplicate-account-notice {
    margin-bottom: 0.75rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--site-result-unknown-border, var(--site-panel-border, #a45d00));
    border-inline-start-width: 0.3rem;
    background: var(--site-result-unknown-bg, var(--site-ui-surface, #2a2a12));
    color: var(--site-result-unknown-text, var(--site-ui-text, var(--site-text, #fff)));
}

.registration-duplicate-account-notice strong {
    display: block;
    font-size: 0.95rem;
}

.registration-duplicate-account-notice p {
    margin: 0.3rem 0 0;
    font-size: 0.9rem;
    line-height: 1.5;
}

.account-switch-row,
.admin-action-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.65rem 0;
    border-bottom: 1px solid color-mix(in srgb, currentColor 20%, transparent);
}

.account-switch-row > div {
    display: grid;
    gap: 0.15rem;
}

.account-switch-row button,
.admin-action-row button {
    min-height: 32px;
}

.admin-action-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    align-items: start;
}

.admin-action-row form {
    display: grid;
    min-width: 0;
    gap: 0.5rem;
}

.admin-action-row textarea {
    width: 100%;
    box-sizing: border-box;
}

.additional-account-application {
    margin: 0.7rem 0;
    padding: 0.7rem;
    border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
}

.additional-account-administrator-message {
    margin-top: 0.65rem;
    padding-inline-start: 0.75rem;
    border-inline-start: 3px solid color-mix(in srgb, currentColor 38%, transparent);
}

.additional-account-administrator-message h3,
.additional-account-administrator-message h4,
.additional-account-administrator-message p {
    margin-block: 0.25rem;
}

.additional-account-invitation-link a {
    font-weight: 700;
}

@media (max-width: 480px) {
    .account-switch-row,
    .admin-action-row {
        align-items: stretch;
        flex-direction: column;
    }
}

/* お知らせ・更新履歴 */
.site-information-box {
    overflow: hidden;
    padding-block: 0.65rem;
}

.site-information-box > h2 {
    margin-bottom: 0.45rem;
}

.site-information-tabs {
    display: flex;
    gap: 0.35rem;
    margin: 0 0 0.4rem;
    border-bottom: 2px solid var(--site-panel-border, #777852);
}

.site-information-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    padding: 0.3rem 0.65rem;
    border: 1px solid var(--site-panel-border, #777852);
    border-bottom: 0;
    border-radius: var(--site-ui-radius, 0) var(--site-ui-radius, 0) 0 0;
    background: var(--site-ui-surface, #15150a);
    color: var(--site-ui-text, var(--site-text, #fff));
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.site-information-tab:visited {
    color: var(--site-ui-text, var(--site-text, #fff));
}

.site-information-tab.is-active {
    background: var(--site-panel-bg, #101820);
    color: var(--site-ui-highlight-text, var(--site-link, #00ffff));
    box-shadow: inset 0 -3px 0 var(--site-link, #00ffff);
}

.site-information-panel[hidden] {
    display: none;
}

.site-information-entry {
    display: grid;
    grid-template-columns: minmax(6.5rem, auto) 1fr;
    gap: 0.1rem 0.65rem;
    padding: 0.38rem 0;
    border-bottom: 1px solid color-mix(in srgb, var(--site-panel-border, #777852) 68%, transparent);
}

.site-information-entry:last-child {
    border-bottom: 0;
}

.site-information-entry h2,
.site-information-entry h3,
.site-information-entry p {
    margin: 0;
    line-height: 1.35;
}

.site-information-entry h2,
.site-information-entry h3,
.site-information-entry > p:not(.site-information-date) {
    grid-column: 2;
}

.site-information-date {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    color: var(--site-ui-muted-text, var(--site-text, #fff));
    font-size: 0.9em;
}

.site-information-more {
    margin: 0.45rem 0 0;
    text-align: right;
}

.information-list-entry {
    grid-template-columns: minmax(7rem, auto) 1fr;
    padding-block: 0.9rem;
}

.information-page-tabs {
    overflow-x: auto;
}

.information-detail-body {
    min-height: 8rem;
    margin: 1rem 0;
    padding: 1rem;
    border: 1px solid var(--site-panel-border, #777852);
    background: var(--site-ui-surface, #15150a);
    color: var(--site-ui-text, var(--site-text, #fff));
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.site-information-required-guide {
    padding: 0.75rem;
    border: 2px solid var(--site-result-loss-border, #d76161);
    background: var(--site-result-loss-bg, #4a1717);
    color: var(--site-result-loss-text, #fff);
    font-weight: 700;
}

.information-acknowledge-form,
.information-preview-actions,
.site-information-dialog-actions,
.information-admin-heading,
.information-admin-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
}

.information-acknowledged {
    font-weight: 700;
}

.site-information-dialog {
    width: min(42rem, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    padding: 0;
    border: 2px solid var(--site-panel-border, #777852);
    border-radius: var(--site-ui-radius, 0);
    background: var(--site-panel-bg, #101820);
    color: var(--site-text, #fff);
    box-shadow: var(--site-panel-shadow, 0 0.6rem 2rem rgba(0, 0, 0, 0.6));
    overflow: auto;
}

.site-information-dialog::backdrop {
    background: rgba(0, 0, 0, 0.72);
}

.site-information-dialog-content {
    padding: 1rem;
}

.site-information-dialog-content > h2 {
    margin-top: 0;
}

.site-information-dialog-entry {
    padding: 0.75rem;
    border: 1px solid var(--site-panel-border, #777852);
    background: var(--site-ui-surface, #15150a);
}

.site-information-dialog-entry + .site-information-dialog-entry {
    margin-top: 0.65rem;
}

.site-information-dialog-entry h3,
.site-information-dialog-entry p {
    margin-block: 0.25rem;
}

.site-information-dialog-actions {
    justify-content: flex-end;
    margin-top: 1rem;
}

.site-information-dialog-action {
    display: inline-block;
    box-sizing: border-box;
    margin: 0;
    border: 2px outset ButtonBorder;
    border-radius: var(--site-button-radius, 0);
    background: ButtonFace;
    color: ButtonText;
    padding: 1px 6px;
    font: inherit;
    line-height: normal;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.site-information-dialog-action:visited,
.site-information-dialog-action:hover,
.site-information-dialog-action:active {
    color: ButtonText;
    text-decoration: none;
}

.information-admin-heading {
    justify-content: space-between;
}

.information-admin-form fieldset {
    display: grid;
    gap: 0.35rem;
    border: 1px solid var(--site-panel-border, #777852);
}

.information-admin-form .choice-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.information-admin-form textarea,
.information-admin-form input[type="text"] {
    box-sizing: border-box;
    width: 100%;
}

.information-title-preview {
    display: grid;
    gap: 0.25rem;
    padding: 0.7rem;
    border: 1px solid var(--site-panel-border, #777852);
    background: var(--site-ui-surface, #15150a);
    color: var(--site-ui-text, var(--site-text, #fff));
}

.information-title-preview > span {
    color: var(--site-ui-muted-text, var(--site-text, #fff));
    font-size: 0.9em;
}

.information-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.information-admin-table {
    min-width: 48rem;
}

.information-admin-actions form {
    margin: 0;
}

.information-preview-meta {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.35rem 0.8rem;
}

.information-preview-meta dt,
.information-preview-meta dd {
    margin: 0;
}

.information-preview-meta dt {
    font-weight: 700;
}

.information-preview-variations {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
    margin: 1rem 0;
}

.information-preview-variations section {
    min-width: 0;
    padding: 0.65rem;
    border: 1px solid var(--site-panel-border, #777852);
    background: var(--site-ui-surface, #15150a);
    color: var(--site-ui-text, var(--site-text, #fff));
    overflow-wrap: anywhere;
}

.information-preview-variations h3 {
    margin: 0 0 0.35rem;
    font-size: 0.9em;
}

@media (max-width: 480px) {
    .site-information-entry,
    .information-list-entry {
        display: block;
    }

    .site-information-entry > * + * {
        margin-top: 0.2rem;
    }

    .site-information-tabs {
        gap: 0.2rem;
    }

    .site-information-tab {
        flex: 1 0 auto;
        padding-inline: 0.55rem;
        font-size: 0.92em;
    }

    .site-information-dialog {
        width: calc(100vw - 2rem);
        max-height: calc(100vh - 1rem);
    }

    .site-information-dialog-content {
        padding: 0.75rem;
    }

    .site-information-dialog-actions,
    .information-preview-actions,
    .information-form-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .site-information-dialog-actions > *,
    .information-preview-actions > *,
    .information-form-actions > * {
        box-sizing: border-box;
        width: 100%;
        text-align: center;
    }

    .information-preview-variations {
        grid-template-columns: 1fr;
    }
}

.ranking-village-description-summary {
    margin-bottom: 0.65rem;
}

.ranking-village-description-dialog {
    box-sizing: border-box;
    width: min(720px, calc(100vw - 2rem));
    max-height: 82vh;
    max-height: 82svh;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--site-panel-border, #777852);
    border-radius: 0.75rem;
    background: var(--site-ui-surface, #15150a);
    color: var(--site-ui-text, var(--site-text, #fff));
}

.ranking-village-description-dialog::backdrop {
    background: rgb(0 0 0 / 68%);
}

/* Keep the theme surface, but composite its translucency over an opaque base.
   This is specific to the replacement edition; legacy dialogs are unchanged. */
.social-salon-description-dialog {
    background: var(--site-bg, #070b14);
}

.social-salon-description-dialog > .ranking-village-description-dialog-content {
    background: var(--site-ui-surface, #15150a);
}

.ranking-village-description-dialog-content {
    box-sizing: border-box;
    max-height: calc(82vh - 2px);
    max-height: calc(82svh - 2px);
    padding: 1rem 1.15rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.ranking-village-description-dialog-content h2 {
    margin-top: 0;
}

.ranking-village-description-dialog-content h3 {
    margin-top: 1.75rem;
}

.ranking-village-description-dialog-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
}

.ranking-village-application-confirmation {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.ranking-village-application-confirmation input {
    flex: 0 0 auto;
    margin-top: 0.25rem;
}

.ranking-village-expected-participants {
    box-sizing: border-box;
    width: min(8rem, 100%);
    min-width: 6rem;
    padding: 0.25rem 0.4rem;
}

.ranking-village-application-history,
.ranking-village-application-admin-row {
    margin-top: 1rem;
    padding: 0.85rem;
    border: 1px solid var(--site-panel-border, #777852);
    border-radius: 0.5rem;
}

.ranking-village-application-history dl,
.ranking-village-application-admin-row dl {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 0.35rem 0.75rem;
}

.ranking-village-application-history dt,
.ranking-village-application-history dd,
.ranking-village-application-admin-row dt,
.ranking-village-application-admin-row dd {
    margin: 0;
}

.ranking-village-application-multiline {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

@media (max-width: 480px) {
    .ranking-village-description-dialog {
        width: calc(100vw - 1rem);
        max-height: 72vh;
        max-height: 72svh;
    }

    .ranking-village-description-dialog-content {
        max-height: calc(72vh - 2px);
        max-height: calc(72svh - 2px);
        padding: 0.75rem;
    }

    .ranking-village-application-history dl,
    .ranking-village-application-admin-row dl {
        grid-template-columns: 1fr;
    }

    .ranking-village-application-history dt,
    .ranking-village-application-admin-row dt {
        margin-top: 0.45rem;
        font-weight: 700;
    }
}
.village-plan-section-heading,
.village-plan-card-heading {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 8px 12px;
}

.village-plan-section-heading {
    position: relative;
    display: block;
    margin-bottom: 10px;
}

.village-plan-section-heading h2,
.village-plan-card-heading h2,
.village-plan-card-heading h3 {
    min-width: 0;
    margin: 0;
}

.box .village-plan-section-heading h2 {
    padding-right: 6.5rem;
}

.village-plan-section-heading > :not(h2) {
    position: absolute;
    top: 4px;
    right: 0;
}

.village-plan-section-guide {
    margin: 6px 0 12px;
    color: var(--site-ui-muted-text, var(--site-text, #fff));
    font-size: .92em;
}

.village-plan-status-tabs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
    margin: 0 0 14px;
}

.village-plan-status-tabs a {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 7px 4px;
    border: 1px solid var(--site-table-border, #d7d79a);
    border-radius: 5px 5px 0 0;
    background: var(--site-ui-subtle-surface, rgba(255, 255, 255, .04));
    color: var(--site-link, #cfcfff);
    font-size: .9em;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
}

.village-plan-status-tabs a.is-active {
    border-bottom-color: var(--site-accent, #28dcef);
    background: var(--site-ui-surface, var(--site-page-surface, #000));
    color: var(--site-text, #fff);
    font-weight: 700;
    box-shadow: inset 0 -3px 0 var(--site-accent, #28dcef);
}

.village-plan-status-tabs small {
    font-size: .82em;
    font-weight: 400;
}

.village-plan-list {
    display: grid;
    gap: 7px;
}

.village-plan-card {
    box-sizing: border-box;
    min-width: 0;
    padding: 8px 10px;
    border: 1px solid var(--site-table-border, #d7d79a);
    border-radius: 5px;
    background: var(--site-ui-surface, var(--site-page-surface, #000));
}

.village-plan-card-heading h2,
.village-plan-card-heading h3 {
    font-size: 1.08em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.village-name-single-line {
    display: block;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.village-plan-card-heading {
    margin-top: 5px;
}

.village-plan-badges {
    display: flex;
    min-width: 0;
    flex-wrap: nowrap;
    align-items: center;
    gap: 5px 6px;
    overflow: hidden;
}

.village-plan-badges.village-plan-detail-badges {
    flex-wrap: wrap;
    overflow: hidden;
}

.village-plan-badge-mobile-only {
    display: none;
}

.village-plan-status,
.village-plan-type,
.village-plan-label {
    flex: 0 0 auto;
    padding: 2px 7px;
    border-radius: 999px;
    color: var(--site-ui-text, var(--site-text, #fff));
    font-size: .8em;
    line-height: 1.35;
}

.village-plan-status {
    border: 1px solid var(--site-accent, var(--site-table-border, #d7d79a));
    background: var(--site-ui-emphasis-surface, var(--site-ui-surface, #202020));
    font-weight: bold;
}

.village-plan-type {
    border: 1px solid var(--site-link, var(--site-accent, #70d7ff));
    background: var(--site-ui-emphasis-surface, var(--site-ui-surface, #202020));
    font-weight: bold;
}

.village-plan-label {
    border: 1px solid var(--site-panel-border, var(--site-table-border, #777));
    background: var(--site-ui-surface, var(--site-page-surface, #111));
    white-space: nowrap;
}

.village-plan-label-more {
    border-style: dashed;
}

.village-plan-compact-meta {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    gap: 2px 0;
    margin: 5px 0 0;
    color: var(--site-ui-muted-text, var(--site-text, #fff));
    font-size: .82em;
}

.village-plan-compact-meta span:not(:last-child)::after {
    margin: 0 5px;
    content: "｜";
}

.village-plan-composition {
    display: flex;
    min-width: 0;
    gap: 7px;
    margin: 4px 0 0;
    font-size: .84em;
    line-height: 1.45;
}

.village-plan-composition > span:first-child {
    flex: 0 0 auto;
    color: var(--site-ui-muted-text, var(--site-text, #fff));
}

.village-plan-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px 10px;
    margin: 9px 0 0;
}

.village-plan-meta > div {
    min-width: 0;
}

.village-plan-meta dt {
    color: var(--site-ui-muted-text, var(--site-text, #fff));
    font-size: .75em;
}

.village-plan-meta dd {
    margin: 1px 0 0;
    overflow-wrap: anywhere;
}

.village-plan-summary {
    margin: 5px 0 0;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.village-plan-summary-clamped {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    white-space: normal;
}

.village-plan-detail-link,
.village-plan-register-link {
    margin: 7px 0 0;
    text-align: right;
}

.village-plan-detail {
    margin-top: 12px;
}

.village-plan-detail-meta {
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
    margin-top: 14px;
}

.village-plan-composition-detail {
    margin-top: 14px;
}

.village-plan-composition-detail h3 {
    margin: 0 0 6px;
}

.village-plan-composition-detail dl {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin: 0;
}

.village-plan-composition-detail dl > div {
    display: flex;
    gap: 4px;
}

.village-plan-composition-detail dd {
    margin: 0;
}

.village-plan-description {
    margin-top: 18px;
    padding-top: 12px;
    border-top: 1px solid var(--site-panel-border, #4d4d2e);
}

.village-plan-description h3 {
    margin: 0;
}

.village-plan-participants,
.village-plan-reserved-chips,
.village-plan-participant-management,
.village-plan-participation-co {
    margin-top: 18px;
    padding-top: 12px;
    border-top: 1px solid var(--site-panel-border, #4d4d2e);
}

.village-plan-participants h3,
.village-plan-reserved-chips h3,
.village-plan-participant-management h3,
.village-plan-participation-co h3 {
    margin: 0 0 8px;
}

.village-plan-reserved-chips-hidden {
    margin: 8px 0 0;
    padding: 8px 10px;
    border-left: 4px solid var(--site-accent, #5854b8);
    background: var(--site-ui-emphasis-surface, var(--site-ui-surface, #202020));
}

.village-plan-reserved-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.village-plan-reserved-chip-list li {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    max-width: 100%;
    padding: 4px 8px;
    border: 1px solid var(--site-panel-border, #4d4d2e);
    border-radius: 5px;
    background: var(--site-ui-surface, #202020);
}

.village-plan-reserved-chip-list li span {
    color: var(--site-ui-muted-text, var(--site-text, #fff));
    font-size: .82em;
}

.village-plan-participation-unavailable {
    margin: 8px 0;
    padding: 8px 10px;
    border-left: 4px solid var(--site-accent, #5854b8);
    background: var(--site-ui-emphasis-surface, var(--site-ui-surface, #202020));
}

.village-plan-participant-group {
    margin-top: 12px;
}

.village-plan-participant-group > summary {
    margin: 0 0 5px;
    color: var(--site-ui-text, var(--site-text, #fff));
    cursor: pointer;
    font-weight: bold;
}

.village-plan-undecided-capacity-note {
    margin: 4px 0 7px;
}

.village-plan-participation-type-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 6px 0 10px;
}

.village-plan-participation-type-actions form {
    margin: 0;
}

.village-plan-participant-table {
    width: 100%;
    min-width: 0;
    border-collapse: collapse;
    table-layout: fixed;
}

.village-plan-participant-table th,
.village-plan-participant-table td {
    border: 1px solid var(--site-table-border, #777852);
    padding: 4px 6px;
    vertical-align: top;
    overflow-wrap: anywhere;
}

.village-plan-participant-table th {
    background: var(--site-table-header-bg, var(--site-ui-emphasis-surface, #243454));
    color: var(--site-table-header-text, var(--site-ui-text, #fff));
}

.village-plan-participant-table th:first-child,
.village-plan-participant-table td:first-child {
    width: 2.2rem;
    text-align: center;
}

.village-plan-participant-table th:nth-child(2) { width: 27%; }
.village-plan-participant-table th:nth-child(3) { width: 6em; }

.village-plan-participant-table td small {
    display: block;
    margin-top: 2px;
    color: var(--site-ui-muted-text, var(--site-text, #fff));
}

.village-plan-participant-table tr.empty td {
    height: 1.45em;
}

@media (max-width: 700px) {
    .village-plan-participant-table {
        font-size: .82em;
    }

    .village-plan-participant-table th,
    .village-plan-participant-table td {
        padding: 3px 4px;
    }

    .village-plan-participant-table th:nth-child(2) { width: 28%; }
    .village-plan-participant-table th:nth-child(3) { width: 5.5em; }
}

.village-plan-pending-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
}

.village-plan-pending-row form {
    margin: 0;
}

.village-plan-pending-row > span {
    display: grid;
    min-width: min(18rem, 100%);
}

.village-plan-pending-row small {
    color: var(--site-muted-text, #b8b8b8);
}

.village-plan-co-form,
.village-plan-chip-set-fields {
    display: grid;
    gap: 7px;
}

.village-plan-co-form-group {
    display: grid;
    gap: 7px;
    min-width: 0;
    margin: 0;
    padding: 9px 10px 10px;
    border: 1px solid var(--site-panel-border, #4d4d2e);
}

.village-plan-co-form-group + .village-plan-co-form-group {
    margin-top: 5px;
}

.village-plan-co-form-group legend {
    padding: 0 5px;
    color: var(--site-heading-text, var(--site-text, #fff));
    font-weight: bold;
}

#village-plan-chip-preferences {
    scroll-margin-top: 12px;
}

.village-plan-chip-selection-warning,
.village-plan-chip-draw-notice,
.village-plan-chip-draw-confirm {
    border-left: 4px solid #d45b5b;
    background: color-mix(in srgb, #d45b5b 13%, var(--site-ui-surface, #202020));
    color: var(--site-text, #fff);
    padding: 9px 11px;
}

.village-plan-chip-selection-warning {
    margin: 2px 0 0;
    font-weight: 700;
}

.village-plan-chip-preferences {
    display: grid;
    gap: 7px;
}

.village-plan-entry-chip-guide {
    margin: 8px 0 10px;
    padding: 9px 11px;
    border-left: 4px solid var(--site-accent, #36c5d6);
    background: var(--site-ui-emphasis-surface, var(--site-ui-surface, #202020));
}

.village-plan-entry-chip-guide p {
    margin: 4px 0 0;
}

.village-plan-say-point-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.village-plan-say-point-row input {
    max-width: 8em;
}

.village-plan-timestamps {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 18px;
    margin: 14px 0 0;
    color: var(--site-ui-muted-text, var(--site-text, #fff));
    font-size: .82em;
}

.village-plan-timestamps > div {
    display: flex;
    gap: 5px;
}

.village-plan-timestamps dd {
    margin: 0;
}

.village-plan-form {
    display: grid;
    gap: 7px;
}

.village-plan-form-section {
    display: grid;
    min-width: 0;
    gap: 7px;
    margin: 0;
    padding: 10px 12px 12px;
}

.village-plan-form-section > label:not(:first-of-type) {
    margin-top: 6px;
}

.village-plan-form input:not([type="checkbox"]):not([type="radio"]),
.village-plan-form select,
.village-plan-form textarea,
.village-plan-form button {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
}

.village-plan-form textarea {
    resize: vertical;
}

.village-plan-label-selector > fieldset {
    min-width: 0;
    margin: 5px 0 0;
    padding: 8px 10px 9px;
}

.village-plan-label-options {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    gap: 6px 14px;
}

.village-plan-label-options label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0;
}

.village-plan-label-options input {
    flex: 0 0 auto;
    margin: 0;
}

.village-plan-type-selector {
    min-width: 0;
    margin: 5px 0 0;
    padding: 8px 10px;
}

.village-plan-type-options {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 16px;
}

.village-plan-type-options label,
.village-plan-undecided-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0;
}

.village-plan-type-options input[type="radio"] {
    flex: 0 0 auto;
    width: auto;
    margin: 0;
}

.village-plan-special-application {
    display: grid;
    gap: 5px;
}

.village-plan-special-application[hidden],
[data-village-plan-composition][hidden],
[data-village-plan-update][hidden],
[data-village-plan-silence][hidden],
[data-village-plan-chip-sets][hidden],
[data-village-plan-spectator][hidden] {
    display: none;
}

.village-plan-role-grid,
.village-role-allocation-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px 10px;
    margin-top: 8px;
}

.village-plan-role-grid label,
.village-role-allocation-grid label,
.village-plan-capacity-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 4rem;
    align-items: center;
    gap: 3px;
    margin: 0;
}

.village-plan-capacity-field {
    width: calc((100% - 30px) / 4);
}

.village-plan-role-grid input[type="number"],
.village-role-allocation-grid input[type="number"] {
    width: 4rem;
    justify-self: end;
}

.village-plan-time-selects {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.village-plan-update-fields {
    display: grid;
    gap: 6px;
    margin-top: 7px;
}

.village-plan-update-row {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    margin: 0;
}

.village-plan-spectator-setting-row {
    display: grid;
    grid-template-columns: 5.5em max-content;
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
}

.village-plan-form .village-plan-spectator-setting-row select {
    width: 6rem;
}

.village-plan-spectator-capacity-value {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.village-plan-form .village-plan-spectator-capacity-value input[type="number"] {
    width: 4rem;
}

.village-plan-participation-type-help {
    margin: 2px 0 7px;
}

.village-rp-prohibition {
    overflow-wrap: anywhere;
}

.village-plan-pagination {
    justify-content: center;
    margin-top: 14px;
}

.village-plan-status-guide {
    margin: 12px 0;
    padding: 8px 10px;
    border-left: 3px solid var(--site-accent, #28dcef);
    background: var(--site-ui-subtle-surface, rgba(255, 255, 255, .04));
}

.village-plan-status-guide p {
    margin: 0;
}

.village-plan-status-guide p + p {
    margin-top: 6px;
}

.village-plan-search-section {
    margin-bottom: 12px;
}

.village-plan-search-section h2 {
    margin-top: 0;
}

.village-plan-search-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.village-plan-search-form label {
    min-width: 0;
}

.village-plan-search-actions {
    display: flex;
    grid-column: 1 / -1;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.village-plan-entry-progress {
    margin: 8px 0;
}

@media (max-width: 700px) {
    .village-plan-status-tabs {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .village-plan-badges {
        flex-wrap: nowrap;
        overflow: hidden;
    }

    .village-plan-badge-desktop-only {
        display: none;
    }

    .village-plan-badge-mobile-only {
        display: inline-flex;
    }

    .village-plan-card-heading {
        align-items: flex-start;
    }

    .village-plan-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .village-plan-meta > div:last-child {
        grid-column: 1 / -1;
    }

.village-plan-detail-meta > div:last-child {
        grid-column: auto;
    }

    .village-plan-form-section {
        padding: 8px;
    }

    .village-plan-role-grid,
    .village-role-allocation-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .village-plan-role-grid label,
    .village-role-allocation-grid label {
        grid-template-columns: minmax(0, 1fr) 4rem;
        align-items: center;
    }

    .village-plan-capacity-field {
        grid-template-columns: minmax(0, 1fr) 4rem;
        width: calc((100% - 10px) / 2);
    }

    .village-plan-role-grid input[type="number"],
    .village-role-allocation-grid input[type="number"] {
        width: 4rem;
        justify-self: end;
    }
}

.village-plan-detail-meta dd.info-list-value--stacked {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.village-plan-detail-meta dd.info-list-value--stacked a {
    white-space: nowrap;
}

.home-customization-link {
    margin: 12px 0;
    padding: 8px 12px;
    border: 1px solid color-mix(in srgb, var(--site-link, #00ffff) 42%, transparent);
    border-left: 4px solid var(--site-link, #00ffff);
    border-radius: var(--site-ui-radius, 0);
    background: color-mix(in srgb, var(--site-link, #00ffff) 9%, var(--site-panel-bg, #111));
}
.home-customization-link a,
.home-customization-link a:visited { color: var(--site-link, #00ffff); font-weight: 700; text-decoration: underline; }
.home-customization-link a:hover { color: var(--site-link-hover, var(--site-link, #00ffff)); }

.registered-forward-email { overflow-wrap: anywhere; }
@media (max-width: 700px) {
    .page {
        box-sizing: border-box;
        width: 100%;
    }

    .site-brand {
        margin: 0 0 12px;
    }

    .site-brand-account-nav {
        justify-content: flex-start;
        gap: .6rem;
        margin: 0;
    }

    .site-brand-link::after {
        background: var(--site-brand-mobile-overlay, linear-gradient(90deg, transparent 38%, rgba(8, 14, 40, .18) 58%, rgba(8, 14, 40, .8) 100%));
    }

    .site-brand-name {
        right: 4%;
        letter-spacing: .12em;
    }

    .server-clock {
        position: fixed;
        top: max(8px, env(safe-area-inset-top));
        right: max(8px, env(safe-area-inset-right));
        max-width: 100%;
    }
}

.village-info-section,
.village-rule-section {
    margin-bottom: 18px;
}

.village-chip-set-list {
    min-width: 0;
    overflow-wrap: anywhere;
    white-space: normal;
}

.village-chip-set-list {
    text-align: left;
}

.village-chip-set-label {
    white-space: nowrap;
}

.village-info-card .info-list dd.village-chip-set-list {
    white-space: normal;
}

.village-role-composition {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.village-start-schedule-label {
    color: #fff4b0;
    font-weight: bold;
}

.village-start-schedule-info {
    color: #17130a;
    font-weight: bold;
}

.village-start-schedule-info time {
    box-sizing: border-box;
    display: block;
    width: 100%;
    border: 2px solid #6a4b00;
    border-left-width: 7px;
    border-radius: 3px;
    padding: 8px 10px;
    background: #fff4b0;
    color: #17130a;
    line-height: 1.55;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .35);
}

.say-filter {
    border: 1px solid var(--site-panel-border, #4d4d2e);
    background: var(--site-ui-surface, #000066);
    color: var(--site-ui-text, #fff);
    margin: 8px 0 12px;
    padding: 4px;
    line-height: 1.45;
    box-shadow: var(--site-panel-shadow, none);
}

.say-filter-caption {
    border-bottom: 1px solid var(--site-panel-border, #4d4d2e);
    background: var(--site-table-header-bg, #4b5f8d);
    color: var(--site-table-header-text, #fff);
    margin: -4px -4px 4px;
    padding: 2px 4px;
}

.say-filter a {
    display: inline-block;
    margin: 0 10px 2px 0;
    color: var(--site-link, #fff);
}

.say-filter a.selected {
    border: 1px solid var(--site-message-anchor-border, #d7d79a);
    background: var(--site-message-anchor-bg, #d7d79a);
    color: var(--site-message-anchor-text, #000);
    padding: 0 3px;
}

.say-filter a.unselected {
    opacity: 0.78;
    font-weight: 400;
}

.say-filter a.disabled {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
    text-decoration: none;
}

.message-window-result-title {
    margin: 0.35rem 0 0.5rem;
    font-size: 1rem;
}

.wolf-toolbox {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    border: 1px solid var(--site-wolf-message-border, #9b4a4a);
    border-radius: var(--site-ui-radius, 0);
    background: var(--site-wolf-message-bg, #5e2222);
    color: var(--site-wolf-message-text, #fff);
    margin: 8px 0 12px;
    padding: 5px 6px;
}

.wolf-toolbox span {
    font-weight: bold;
    margin-right: 4px;
}

.village-ui-tools,
.new-message-tools {
    border: 1px solid var(--site-panel-border, #777852);
    background: var(--site-ui-surface, #15150a);
    color: var(--site-ui-text, #d7d79a);
    margin: 8px 0 10px;
    padding: 5px 6px;
    box-shadow: var(--site-panel-shadow,
            inset 1px 1px 0 rgba(255, 255, 255, .12),
            2px 2px 0 #000);
}

.mypage-tabs {
    display: flex;
    margin: 10px 0;
    border-bottom: 1px solid var(--site-panel-border, #777852);
}

.mypage-tabs a {
    padding: 7px 18px;
    border: 1px solid transparent;
    text-decoration: none;
}

.mypage-tabs a.selected {
    border-color: var(--site-panel-border, #777852);
    border-bottom-color: var(--site-ui-surface, #15150a);
    background: var(--site-ui-surface, #15150a);
    color: var(--site-ui-text, var(--site-text, #fff));
    font-weight: bold;
    text-decoration: underline;
}

.mypage-settings > .village-ui-tools {
    border: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
}

.box.settings-section {
    box-sizing: border-box;
    border: 1px solid var(--site-panel-border, #777852);
    margin-bottom: 16px;
    padding: 12px;
    background: var(--site-ui-surface, #070707);
    color: var(--site-ui-text, var(--site-text, #fff));
}

.letter-settings {
    display: grid;
    gap: 16px;
}

.letter-settings > h2,
.letter-settings > .form-help {
    margin-top: 0;
    margin-bottom: 0;
}

.letter-settings-form,
.letter-notification-form,
.letter-email-form {
    display: grid;
    gap: 14px;
    margin: 0;
}

.letter-settings-group {
    margin: 0;
    padding: 16px;
    border: 2px solid var(--site-panel-border, #777852);
    border-radius: 8px;
    background: var(--site-page-surface, rgba(8, 18, 31, .58));
    color: var(--site-ui-text, var(--site-text, #fff));
}

.letter-settings-group h3 {
    margin: 0 0 14px;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--site-panel-border, #777852);
}

.letter-settings-group h4 {
    margin: 0 0 8px;
}

.letter-settings-group label {
    display: grid;
    gap: 6px;
    margin: 0;
}

.letter-settings-group select,
.letter-settings-group input[type="email"] {
    box-sizing: border-box;
    width: min(100%, 32rem);
    max-width: 100%;
}

.letter-settings-actions {
    display: flex;
    justify-content: flex-end;
}

.letter-push-settings {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed var(--site-panel-border, #777852);
}

.letter-block-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.letter-block-list li {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
}

.letter-block-list form {
    display: inline-block;
    margin: 0;
}

.setting-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(180px, auto);
    gap: 14px;
    align-items: center;
    padding: 10px 0;
    border-top: 1px solid var(--site-panel-border, #4d4d2e);
}

.setting-row:first-of-type {
    border-top: 0;
}

.setting-row > :only-child {
    grid-column: 1 / -1;
}

.setting-row p {
    margin: 3px 0 0;
    color: var(--site-ui-muted-text, #e9e9c0);
    line-height: 1.4;
}

.setting-row select {
    max-width: 100%;
}

.mypage-settings .setting-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 15rem);
}

.mypage-settings .setting-row select {
    width: 100%;
    min-width: 0;
}

.village-log-navigation-setting {
    grid-template-columns: minmax(0, 1fr) minmax(12rem, 15rem);
}

.village-log-navigation-setting select {
    width: 100%;
}

.setting-unimplemented {
    font-weight: bold;
}

.settings-save-status {
    min-height: 1.4em;
    color: var(--site-ui-highlight-text, var(--site-link, #00ffff));
    font-weight: 700;
}

@media (max-width: 700px) {
    .setting-row,
    .mypage-settings .setting-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 7px;
    }

    .village-log-navigation-setting {
        grid-template-columns: minmax(0, 1fr);
    }

    .letter-settings {
        gap: 12px;
    }

    .letter-settings-group {
        padding: 14px 12px;
    }

    .letter-settings-actions button,
    .letter-notification-form > button,
    .letter-email-form > button {
        width: 100%;
        min-height: 44px;
    }

    .letter-block-list li {
        align-items: stretch;
        flex-direction: column;
    }

    .letter-block-list button {
        width: 100%;
        min-height: 44px;
    }
}

.village-ui-tools label,
.new-message-tools label {
    display: inline-block;
    margin: 0 10px 0 0;
}

.new-message-tools select {
    margin-left: 3px;
}

.new-message-tools button {
    margin-right: 6px;
}

.new-message-tools [data-notification-status] {
    color: var(--site-ui-highlight-text, var(--site-link, #00ffff));
}

.village-ui-tools [data-village-ui-status] {
    color: var(--site-ui-highlight-text, var(--site-link, #00ffff));
}

.new-message-help {
    border: 1px solid var(--site-panel-border, #777852);
    background: var(--site-page-surface, #0c0c05);
    color: var(--site-ui-muted-text, #d7d79a);
    margin: -4px 0 10px;
    padding: 5px 7px;
    line-height: 1.45;
}

.new-message-push-filters {
    margin: 12px 0 10px;
    padding: 10px 12px;
    border: 1px solid var(--site-panel-border, #777852);
    background: var(--site-page-surface, #0c0c05);
}

.new-message-push-filters h3 {
    margin: 0;
    padding-bottom: 7px;
    border-bottom: 1px solid var(--site-panel-border, #777852);
}

.new-message-push-filters .setting-row:first-of-type {
    border-top: 0;
}

.new-message-push-filters select {
    width: min(12rem, 100%);
}

.new-message-filter-help {
    margin: 8px 0 0;
    color: var(--site-ui-muted-text, #d7d79a);
    line-height: 1.45;
}

@media (max-width: 700px) {
    .new-message-push-filters {
        padding: 9px 10px;
    }

    .new-message-push-filters select {
        width: 100%;
    }
}

.new-message-permission {
    border: 1px solid var(--site-result-unknown-border, #b29a48);
    background: var(--site-result-unknown-bg, #2a2a12);
    color: var(--site-result-unknown-text, #fff4b0);
    margin: 8px 0 10px;
    padding: 6px 8px;
    box-shadow: var(--site-panel-shadow,
        inset 1px 1px 0 rgba(255, 255, 255, .16), 2px 2px 0 rgba(0, 0, 0, .45));
}

.new-message-permission[hidden] {
    display: none;
}

.new-message-permission span {
    margin-right: 10px;
}

.new-message-notice {
    border: 2px solid #ffff00;
    background: #3a3a16;
    color: #fff;
    margin: 8px 0 12px;
    padding: 7px 8px;
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .2), 3px 3px 0 #000;
}

.new-message-notice[hidden] {
    display: none;
}

.new-message-notice span {
    margin-right: 10px;
}

.app-notice,
.app-confirm {
    box-sizing: border-box;
    position: fixed;
    z-index: 2100;
    color: #fff;
}

.app-notice[hidden],
.app-confirm[hidden] {
    display: none;
}

.app-notice {
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
    max-width: min(360px, calc(100vw - 24px));
    padding: 9px 12px;
    border: 0;
    border-radius: 4px;
    background: rgba(84, 84, 84, .94);
    font-size: calc(14px * var(--site-font-scale, 1));
    line-height: 1.4;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
    opacity: 1;
    pointer-events: none;
    transition: opacity 220ms ease-out;
}

.app-notice span {
    display: block;
    margin: 0;
}

.app-notice.is-leaving {
    opacity: 0;
}

.app-notice-error {
    background: rgba(132, 40, 40, .96);
}

.app-confirm {
    left: 50%;
    top: 50%;
    width: min(360px, calc(100vw - 28px));
    padding: 10px 12px;
    border: 1px solid var(--site-message-action-border, #9ea452);
    background: rgba(0, 0, 0, .55);
    color: var(--site-text, #fff);
    box-shadow: 0 3px 12px rgba(0, 0, 0, .8);
    transform: translate(-50%, -50%);
}

[data-app-confirm-body] {
    margin: 0 0 10px;
    color: #fff36a;
    font-weight: 700;
    line-height: 1.45;
    overflow-wrap: anywhere;
    white-space: pre-line;
}

.message-external-link {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.app-confirm-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 12px;
}

.app-confirm-checkbox {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin: 0 0 12px;
    line-height: 1.45;
}

.app-confirm-checkbox[hidden] {
    display: none;
}

.app-confirm-checkbox input {
    flex: 0 0 auto;
    margin-top: .2em;
}

.wolf-toolbox button,
.new-message-tools button,
.new-message-permission button,
.new-message-notice button,
.app-confirm button,
.message-action-menu button,
.message-popup-controls button,
.vlog-red-head button,
.red-mobile-tabs button,
.say-tabs button {
    border: 1px solid #777852;
    background: #d7d79a;
    color: #000;
    cursor: pointer;
}

.wolf-toolbox button {
    border: 2px outset #d7d7d7;
    border-radius: var(--site-button-radius, 0);
    background: #e8e8e8;
    color: #000;
    padding: 1px 8px;
}

.wolf-toolbox button.selected,
.vlog-red-head button.selected,
.red-mobile-tabs button.selected {
    background: #fff47a;
    color: #111;
    box-shadow: inset 0 0 0 2px #5f4d00;
}

.wolf-toolbox .red-off-help-button {
    display: inline-grid;
    place-items: center;
    width: 1.65rem;
    min-width: 1.65rem;
    height: 1.65rem;
    margin-left: auto;
    padding: 0;
    border: 2px solid currentColor;
    border-radius: 50%;
    background: #f4f2ea;
    color: #171717;
    font-weight: 700;
    line-height: 1;
}

.formpl_frame {
    border: 2px solid #ffff00;
    margin: 10px 0 14px;
    background: #b9ba91;
    color: #000;
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .52), inset -1px -1px 0 rgba(0, 0, 0, .35), 3px 3px 0 #000;
}

.say-form {
    --say-input-bg: #fff;
    --say-input-text: #000;
    background: var(--say-bg);
    border-color: var(--say-border);
    color: var(--say-text);
}

.say-form[data-message-type="MONOLOGUE"] {
    --say-input-bg: #fafaf5;
}

.say-form[data-message-type="WOLF_WHISPER"] {
    --say-input-bg: #ffe0e0;
}

.say-form[data-message-type="RESONANCE"] {
    --say-input-bg: #e8fbfa;
}

.say-form[data-message-type="GRAVE"] {
    --say-input-bg: #eef6ff;
}

.say-form[data-message-type="BACKSTAGE"] {
    --say-input-bg: #e8f3fb;
}

.say-form[data-message-type="PRIVATE_TALK"] {
    --say-input-bg: #f5f0fa;
}

.say-form[data-message-type="RANK_WHITE"] {
    --say-input-bg: #fffef2;
}

.say-form[data-message-type="RANK_BLACK"] {
    --say-input-bg: #1f1f1f;
    --say-input-text: #fff;
}

.act-form-body {
    align-items: flex-start;
    gap: 8px;
    padding: 7px 10px 10px;
}

.act-form-body::before {
    content: "";
    flex: 0 0 82px;
}

.act-form-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin: 0 0 5px;
}

.act-target-line {
    display: inline-flex;
    margin: 0;
}

.act-target-line select,
.act-fieldset select {
    margin-left: 0;
}

.act-fieldset {
    box-sizing: border-box;
    margin: 4px 0 6px;
    max-width: 100%;
    min-inline-size: 0;
    padding: 5px 7px;
    width: 100%;
}

.act-fieldset legend {
    color: inherit;
}

.act-kind-line,
.act-input-control {
    min-width: 0;
}

.act-input-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin-top: 5px;
}

.act-input-control input,
.act-input-control select {
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
    width: 100%;
}

.act-fieldset [data-act-disabled-placeholder]:disabled {
    border-color: #999;
    background: #d2d2d2;
    color: transparent;
    cursor: not-allowed;
}

.act-submit-line {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.act-submit-line span {
    color: inherit;
}

.act-form button {
    border: 2px outset #d7d7d7;
    background: #e8e8e8;
    color: #000;
    padding: 2px 10px;
}

.formpl_content {
    padding: 8px 12px 4px;
}

.action-form label {
    display: inline;
    margin: 0 6px 0 0;
}

.action-form select {
    margin-left: 4px;
}

.action-form button {
    border: 2px outset #d7d7d7;
    background: #e8e8e8;
    color: #000;
    padding: 1px 10px;
}

.say-form-vote-controls {
    box-sizing: border-box;
    margin: 6px 0;
    border: 1px solid var(--site-panel-border, #777852);
    border-radius: var(--site-ui-radius, 0);
    background: var(--site-ui-surface, #15150a);
    color: var(--site-ui-text, var(--site-text, #fff));
    box-shadow: var(--site-panel-shadow, none);
}

.say-form-vote-controls.is-pending {
    border-color: var(--site-warning-border, #d6b85e);
}

.village-vote-controls {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
}

.village-vote-label,
.village-vote-status,
.village-vote-controls button {
    flex: 0 0 auto;
    white-space: nowrap;
}

.say-form-vote-controls .village-vote-target {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}

.village-vote-target select {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    text-overflow: ellipsis;
}

.village-vote-status {
    color: inherit;
    font-size: .85em;
    font-weight: 700;
}

.village-vote-controls button {
    border: 2px outset #d7d7d7;
    background: #e8e8e8;
    color: #000;
    padding: 1px 10px;
    min-height: 30px;
}

.say-form-head {
    position: relative;
    border-bottom: 0;
    padding: 8px 12px 4px 102px;
}

.say-quick-settings-button {
    appearance: none;
    position: absolute;
    z-index: 2;
    top: 6px;
    right: 8px;
    display: inline-grid;
    place-items: center;
    width: 1.65rem;
    min-width: 1.65rem;
    height: 1.65rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: currentColor;
    box-shadow: none;
    cursor: pointer;
}

.say-quick-settings-button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.say-quick-settings-icon {
    display: block;
    width: 1.5rem;
    height: 1.5rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.say-form-participant-name {
    display: block;
    min-width: 0;
    padding-right: 2rem;
    overflow-wrap: anywhere;
}

.say-form-head .say-chip-expression-control {
    display: flex;
    min-width: 0;
    margin: 6px 0 0;
}

.say-form-head .say-chip-expression-control select {
    flex: 0 1 220px;
    min-width: 0;
    max-width: 100%;
}

.say-form .village-vote-target select {
    margin: 0;
}

.say-form select {
    margin-left: 8px;
}

.say-form-error,
.act-form .error {
    display: block;
    margin: 4px 0 6px;
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--feedback-error-text, #fff0f0);
    font-weight: bold;
}

[data-say-input-errors]:not(:has(> :not([hidden]))),
[data-act-input-errors]:not(:has(> :not([hidden]))),
[data-simple-say-errors]:not(:has(> :not([hidden]))) { display: none; }

:is([data-say-input-errors], [data-act-input-errors]) > .access-rate-notice {
    margin: 4px 0 6px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--feedback-error-text, var(--site-error-text, #ffb4b4));
    font-weight: bold;
}

.say-tabs {
    display: flex;
    align-items: flex-end;
    gap: 0;
    margin: -2px -2px 0;
    padding: 0;
    border-bottom: 2px solid var(--say-border);
    background: #000;
    position: relative;
    z-index: 1;
}

.say-tabs button {
    position: relative;
    bottom: -2px;
    min-height: 28px;
    min-width: 34px;
    border: 1px solid var(--tab-border, #777852);
    border-bottom: 0;
    border-radius: 4px 4px 0 0;
    background: var(--tab-bg, #d7d79a);
    color: var(--tab-text, #000);
    font-weight: bold;
    line-height: 1.1;
    margin: 0 1px 0 0;
    padding: 5px 11px 5px;
    text-shadow: none;
    box-shadow:
            inset 1px 1px 0 rgba(255, 255, 255, .36),
            inset -1px -1px 0 rgba(0, 0, 0, .55);
}

.say-tabs button::before {
    display: none;
}

.say-tabs button:hover,
.say-tabs button:focus-visible {
    filter: brightness(1.08);
}

.say-tabs button.selected {
    background: var(--tab-bg, var(--say-bg));
    border-color: var(--tab-border, var(--say-border));
    border-bottom-color: var(--tab-border, var(--say-border));
    color: var(--tab-text, var(--say-text));
    text-shadow: none;
    box-shadow:
            inset 1px 1px 0 rgba(255, 255, 255, .58),
            inset -1px 0 0 rgba(0, 0, 0, .24),
            0 2px 0 var(--tab-border, var(--say-border));
    z-index: 1;
}

.formpl_body {
    display: flex;
    gap: 8px;
    padding: 4px 10px 12px;
}

.formpl_chrimg {
    flex: 0 0 82px;
    min-height: 100px;
    padding-top: 94px;
}

.formpl_chrimg img,
.vlog-img img {
    border: 1px solid #4d4d2e;
    background: transparent;
    object-fit: contain;
}

.formpl_chrimg img {
    box-sizing: border-box;
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: 104px;
    padding: 0;
    margin-inline: 0;
}

.formpl_chrimg img.image-missing,
.vlog-img img.image-missing {
    visibility: hidden;
}

.formpl_textarea {
    flex: 1;
}

.formpl_fields {
    flex: 1;
    min-width: 0;
}

.formpl_fields label {
    margin: 4px 0 6px;
}

.say-chip-expression-control {
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.say-chip-expression-control select {
    min-width: 8em;
    max-width: min(50vw, 220px);
}

.private-talk-target-line {
    display: none;
}

.say-form[data-message-type="PRIVATE_TALK"] .private-talk-target-line {
    display: inline-flex;
    margin: 0 3px;
    vertical-align: middle;
}

.private-talk-target-line select {
    max-width: min(48vw, 220px);
}

.formpl_textarea textarea,
.formpl_fields textarea {
    width: 100%;
    box-sizing: border-box;
    background: var(--say-input-bg, #fff);
    color: var(--say-input-text, #000);
    border: 2px inset #d7d7d7;
}

.say-submit-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    margin-top: 2px;
}

.say-submit-line [data-say-submit],
.simple-say-actions [data-simple-say-submit] {
    border: 2px outset var(--site-aux-button-border, #d7d7d7);
    background: var(--site-aux-button-bg, #e8e8e8);
    color: var(--site-aux-button-color, #000);
    box-shadow: var(--site-aux-button-shadow, none);
    padding: 2px 10px;
}

.say-input-status-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
    margin-top: 3px;
}

[data-say-point-preview][hidden],
[data-say-point-remaining-label][hidden] {
    display: none;
}

.say-point-preview,
.say-point-remaining,
.say-body-metrics {
    color: var(--say-text, var(--site-form-text, var(--site-text, #fff)));
}

.say-point-preview {
    min-width: 42px;
    text-align: right;
}

.say-point-preview.shortage,
.say-point-remaining.shortage,
.say-body-metrics .limit-exceeded,
.message-confirm-points dd.shortage {
    color: #ff3333;
    font-weight: bold;
}

.say-point-remaining {
    font-size: .92rem;
}

.say-body-metrics {
    font-size: .92rem;
    white-space: nowrap;
}

.village-start-countdown,
.epilogue-countdown,
.village-update-countdown,
.commit-countdown {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 6px;
    padding: 5px 8px;
    border: 1px solid #7b7b4a;
    background: #ffffdd;
    color: #222;
}

.village-start-countdown strong,
.epilogue-countdown strong,
.village-update-countdown strong,
.commit-countdown strong {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.village-start-countdown {
    border-width: 2px;
    border-color: var(--site-accent-strong, #7b7b4a);
    font-weight: bold;
}

@media (max-width: 700px) {
    .village-start-countdown {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }
}

.say-draft-actions {
    display: flex;
    flex-wrap: wrap;
    min-width: 0;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 6px;
}

.say-draft-actions button:not(.say-draft-help-button),
.simple-say-actions [data-simple-say-save] {
    min-width: 0;
    flex: 1 1 0;
    min-height: 27px;
    border: 1px solid #a8a8a8;
    background: #e8e8e8;
    color: #000;
    box-shadow: none;
    padding: 1px 3px;
    font-size: .9em;
    white-space: nowrap;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.say-draft-actions > button:not(.say-draft-help-button) {
    flex: 1 1 0;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}

.say-draft-actions button:disabled,
.say-submit-line button:disabled,
.simple-say-actions button:disabled,
.message-confirm-actions button:disabled {
    color: #777;
    cursor: default;
    filter: grayscale(.5);
}

.mobile-say-toggle {
    display: none;
}

.mobile-say-panel {
    display: flow-root;
}

.message-confirm {
    color: #fff;
    margin: 14px 0;
}

.message-confirm h2 {
    border-top: 1px solid #4d4d7e;
    border-bottom: 1px solid #4d4d7e;
    color: #fff;
    font-size: 1rem;
    font-weight: normal;
    margin: 12px 0;
    padding: 4px 0;
}

.message-preview {
    margin: 10px 0 12px;
}

.message-confirm-expression-control {
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    gap: 6px;
    margin: 0 0 10px;
    white-space: nowrap;
}

.message-confirm-expression-control select {
    min-width: 8em;
    max-width: min(60vw, 240px);
}

.message-confirm-points {
    display: grid;
    grid-template-columns: max-content max-content;
    gap: 4px 10px;
    margin: 8px 0 14px;
}

.message-confirm-points dt {
    color: #d7d79a;
}

.message-confirm-points dd {
    margin: 0;
}

.message-confirm-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    align-items: flex-start;
    margin-top: 14px;
}

.message-confirm-actions form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin: 0;
}

.message-confirm-actions button {
    border: 2px outset #d7d7d7;
    background: #e8e8e8;
    color: #000;
    padding: 4px 12px;
}

@media (max-width: 520px) {
    .entry-confirm-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 8px;
        width: 100%;
    }

    .entry-confirm-actions button {
        box-sizing: border-box;
        min-width: 0;
        width: 100%;
    }
}

.private-talk-confirm-recipient {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 16px 0;
}

.private-talk-confirm-image {
    flex: 0 0 70px;
    min-height: 70px;
}

.private-talk-confirm-image img {
    border: 1px solid #999;
    display: block;
    height: auto;
    max-height: 64px;
    max-width: 64px;
    object-fit: contain;
    width: auto;
}

.private-talk-confirm-text {
    color: #fff;
    font-size: 1.02rem;
    font-weight: bold;
    line-height: 1.5;
    margin: 0;
}

.message-confirm-question {
    color: #fff;
    margin: 12px 0;
}

.public-say-confirm-check {
    display: block;
    flex-basis: 100%;
    border: 1px solid #ff3333;
    background: #1e0909;
    color: #fff;
    line-height: 1.45;
    margin: 0 0 10px;
    max-width: 620px;
    padding: 7px 9px;
}

.public-say-confirm-check span {
    color: #ffff66;
    font-weight: bold;
}

[data-public-say-panel][hidden] {
    display: none !important;
}

#say-form:has(+ #act-form:not([hidden])),
#say-form:has(+ .prologue-settings:not([hidden])) {
    margin-bottom: 0;
    border-bottom: 0;
    box-shadow: none;
}

#say-form + #act-form:not([hidden]) {
    margin-top: 0;
    border-top: 0;
}

#say-form + #act-form:not([hidden]):has(+ .prologue-settings:not([hidden])) {
    margin-bottom: 0;
    border-bottom: 0;
    box-shadow: none;
}

.prologue-settings {
    border: 2px solid;
    margin: 0 0 14px;
    padding: 7px 10px 10px 102px;
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, .52), inset -1px -1px 0 rgba(0, 0, 0, .35), 3px 3px 0 #000;
}

#say-form + .prologue-settings:not([hidden]),
#say-form + #act-form:not([hidden]) + .prologue-settings:not([hidden]) {
    border-top: 0;
}

.prologue-setting-form,
.leave-village-form {
    margin: 0 0 6px;
}

.leave-village-form {
    padding-inline-start: 10px;
}

.prologue-setting-form fieldset {
    margin: 4px 0 8px;
    padding: 6px 8px;
}

.prologue-setting-form legend {
    color: inherit;
}

.prologue-settings button {
    border: 2px outset #d7d7d7;
    background: #e8e8e8;
    color: #000;
    padding: 2px 10px;
}

.prologue-profile-form input[type="text"] {
    box-sizing: border-box;
    width: min(52vw, 220px);
}

.role-request-notice {
    border: 2px solid #000;
    background: #e3c45d;
    color: #000;
    margin: 12px 0;
    padding: 5px 8px;
}

.role-request-notice .role-request-link {
    color: #003399;
    text-decoration: underline;
}

.role-panel {
    --role-panel-border: #d7d79a;
    --role-panel-shell: #b9ba91;
    --role-panel-head: #5b5d36;
    --role-panel-line: #6a6b43;
    --role-panel-content: #c8c9a5;
    --role-panel-ink: #3b3b18;
    --role-panel-highlight: #ffffcc;
    --role-panel-error-text: #50000e;
    --role-result-wolf-ink: #7b0000;
    border: 2px solid var(--role-panel-border);
    background: var(--role-panel-shell);
    background-clip: padding-box;
    color: #000;
    margin: 10px 0 14px;
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .55), inset -1px -1px 0 rgba(0, 0, 0, .35), 3px 3px 0 #000;
}

.role-panel--resonator-side {
    --role-panel-border: #79a36e;
    --role-panel-shell: #91b486;
    --role-panel-head: #315d38;
    --role-panel-line: #52794c;
    --role-panel-content: #bdd4b6;
    --role-panel-ink: #1d4322;
    --role-panel-highlight: #e9ffe6;
}

.role-panel--wolf-side {
    --role-panel-border: #c88484;
    --role-panel-shell: #b77d7d;
    --role-panel-head: #743636;
    --role-panel-line: #925555;
    --role-panel-content: #d8b4b4;
    --role-panel-ink: #4a1f1f;
    --role-panel-highlight: #ffe8e8;
}

.role-panel--orange-side {
    --role-panel-border: #d8a36e;
    --role-panel-shell: #c79664;
    --role-panel-head: #7b4d24;
    --role-panel-line: #875728;
    --role-panel-content: #e0bf98;
    --role-panel-ink: #4f2e14;
    --role-panel-highlight: #fff0d8;
}

.role-panel--fox-side {
    --role-panel-border: #c7a844;
    --role-panel-shell: #c7ad50;
    --role-panel-head: #6f5a18;
    --role-panel-line: #92752d;
    --role-panel-content: #ead98a;
    --role-panel-ink: #443500;
    --role-panel-highlight: #fff7c2;
}

.role-panel--grave-side {
    --role-panel-border: #c5c5de;
    --role-panel-shell: #242448;
    --role-panel-head: #181835;
    --role-panel-line: #9a9ac2;
    --role-panel-content: #34345f;
    --role-panel-ink: #f1f1ff;
    --role-panel-highlight: #fff;
    --role-result-wolf-ink: #ff9daa;
    --role-panel-error-text: #ffb4b4;
    color: #f1f1ff;
}

.role-request-preview {
    scroll-margin-top: 8px;
}

#assigned-role-panel {
    scroll-margin-top: 8px;
}

.role-request-preview-note {
    margin: 8px;
    padding: 7px 8px;
    border: 1px solid var(--role-panel-line);
    background: var(--role-panel-content);
    color: var(--role-panel-ink);
    font-size: .92rem;
    line-height: 1.45;
}

.role-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: var(--role-panel-head);
    border-bottom: 1px solid var(--role-panel-line);
    color: #fff;
    padding: 5px 8px;
    font-weight: bold;
}

.role-panel-head small {
    color: var(--role-panel-highlight);
    font-weight: normal;
    white-space: nowrap;
}

.role-panel-head span {
    color: var(--role-panel-highlight);
    margin-right: 8px;
}

.role-panel-list {
    display: grid;
    grid-template-columns: 5em 1fr;
    gap: 4px 8px;
    margin: 8px;
    padding: 7px 8px;
    border: 1px solid var(--role-panel-line);
    background: var(--role-panel-content);
    color: var(--role-panel-ink);
}

.role-panel-list dt {
    font-weight: bold;
    color: var(--role-panel-ink);
}

.role-panel-list dd {
    margin: 0;
}

.role-panel-body-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 100px;
    align-items: stretch;
}

.role-panel-main {
    min-width: 0;
}

.role-panel-intro,
.role-panel-section {
    margin: 8px;
    padding: 7px 8px;
    border: 1px solid var(--role-panel-line);
    background: var(--role-panel-content);
    color: var(--role-panel-ink);
    line-height: 1.45;
}

.role-panel-intro,
.role-panel-multiline {
    white-space: pre-line;
}

.role-panel-section h3,
.role-ability-form h3 {
    color: var(--role-panel-ink);
    font-size: calc(14px * var(--site-font-scale, 1));
    margin: 0 0 6px;
}

.role-panel-section p {
    margin: 0;
}

.role-panel-portrait {
    display: grid;
    min-width: 0;
    min-height: 100%;
    place-content: center;
    place-items: center;
    gap: 6px;
    margin: 0;
    padding: 8px;
    text-align: center;
}

.role-panel-portrait img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.role-panel-error {
    margin: 8px;
}

.role-panel-error,
.role-ability-form .error {
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--role-panel-error-text, #50000e);
    font-weight: 700;
}

.role-ability-form {
    border: 1px solid var(--role-panel-line);
    background: var(--role-panel-content);
    color: var(--role-panel-ink);
    margin: 8px;
    padding: 7px 8px;
}

.role-ability-form .form-help,
.role-ability-form .ranking-host-generated-line {
    color: var(--role-panel-ink);
}

.role-ability-form label {
    display: inline;
    margin: 0 6px 0 0;
}

.ranking-host-entrance-speech-field {
    display: block;
    width: 100%;
    margin: 0 0 8px;
}

.ranking-host-entrance-speech-input {
    box-sizing: border-box;
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-top: 4px;
    resize: vertical;
}

.role-ability-form select {
    margin-left: 4px;
}

.role-ability-form button {
    border: 2px outset #d7d7d7;
    background: #e8e8e8;
    color: #000;
    padding: 1px 10px;
}

.role-preview-ability-note {
    margin: 7px 0 0;
    color: var(--role-panel-ink);
    font-size: .9rem;
    line-height: 1.45;
}

.role-result-table {
    width: 100%;
    table-layout: fixed;
    border-color: var(--role-panel-line);
    background: var(--role-panel-content);
    color: var(--role-panel-ink);
}

.role-result-table th,
.role-result-table td {
    border-color: var(--role-panel-line);
    color: var(--role-panel-ink);
}

.role-result-table th:first-child,
.role-result-table td:first-child {
    width: 6em;
    text-align: left;
}

.role-result-table th:last-child,
.role-result-table td:last-child {
    width: 8em;
    text-align: center;
    white-space: nowrap;
}

.role-result-wolf {
    color: var(--role-result-wolf-ink);
    font-weight: bold;
}

.role-panel-text {
    margin: 8px;
    padding: 7px 8px;
    border: 1px solid var(--role-panel-line);
    background: var(--role-panel-content);
    color: var(--role-panel-ink);
    line-height: 1.45;
}

.role-ground-list {
    margin: 8px;
    padding: 7px 8px;
    border: 1px solid var(--role-panel-line);
    background: var(--role-panel-content);
    color: var(--role-panel-ink);
}

.role-ground-list h3 {
    color: var(--role-panel-ink);
    font-size: calc(14px * var(--site-font-scale, 1));
    margin: 8px 0 4px;
}

.role-ground-list .village-list {
    border-color: var(--role-panel-line);
    background: var(--role-panel-content);
    color: var(--role-panel-ink);
}

.role-ground-list .village-list th,
.role-ground-list .village-list td,
.role-ground-list .village-list td:first-child {
    border-color: var(--role-panel-line);
    color: var(--role-panel-ink);
    text-align: left;
}
.table-scroll > .village-list-wide {
    min-width: 0;
}

.village-list-wide {
    table-layout: fixed;
}

.village-overview-table {
    font-size: .9rem;
    line-height: 1.35;
}

.village-overview-table th:nth-child(1),
.village-overview-table td:nth-child(1) { width: 2.75em; }
.village-overview-table th:nth-child(2),
.village-overview-table td:nth-child(2) { width: auto; }
.village-overview-table th:nth-child(3),
.village-overview-table td:nth-child(3) { width: 6.75em; }
.village-overview-table th:nth-child(4),
.village-overview-table td:nth-child(4) { width: 5em; }
.village-overview-table th:nth-child(5),
.village-overview-table td:nth-child(5) { width: 5.75em; }

.village-overview-table th,
.village-overview-table td {
    padding: 4px;
}

.village-overview-table .village-name-cell,
.village-list-wide td {
    overflow-wrap: anywhere;
}

.village-overview-table .village-id-cell {
    text-align: left;
}

.chip-set-management-table th:nth-child(1),
.chip-set-management-table td:nth-child(1) { width: 28%; }
.chip-set-management-table th:nth-child(2),
.chip-set-management-table td:nth-child(2) { width: 13%; }
.chip-set-management-table th:nth-child(3),
.chip-set-management-table td:nth-child(3) { width: 14%; }
.chip-set-management-table th:nth-child(4),
.chip-set-management-table td:nth-child(4) { width: 20%; }
.chip-set-management-table th:nth-child(5),
.chip-set-management-table td:nth-child(5) { width: 17%; }
.chip-set-management-table th:nth-child(6),
.chip-set-management-table td:nth-child(6) { width: 8%; }

.village-list-title-line,
.village-list-meta,
.village-list-rule-content {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 7px;
}

.village-list-title-line,
.village-overview-table .village-name-cell,
.village-title-link {
    min-width: 0;
}

.village-overview-table .village-name-cell {
    overflow: hidden;
}

.village-overview-table .village-title-link {
    width: 100%;
    max-width: 100%;
}

.village-list-meta {
    margin-top: 2px;
}

.village-overview-table .village-list-detail {
    margin-left: 0;
    font-size: .86em;
}

.village-list-subparticipants,
.village-list-winner {
    display: block;
    margin-top: 2px;
    font-size: .84em;
    line-height: 1.25;
}

.village-list-start-reservation {
    display: block;
    margin-top: 2px;
    font-size: .72em;
    line-height: 1.25;
    white-space: normal;
    overflow-wrap: normal;
}

.village-list-start-reservation-time,
.village-list-start-reservation-suffix {
    white-space: nowrap;
}

.village-overview-table .village-list-subparticipants,
.village-overview-table .village-list-rule-content > span {
    white-space: nowrap;
}

.village-overview-table .village-list-rule-content {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
    font-size: .78em;
}

@media (min-width: 701px) {
    .village-overview-table .village-list-subparticipants {
        font-size: .76em;
    }

    .village-overview-table td:nth-child(4) {
        font-size: .78em;
    }
}

.finished-search-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12em, 1fr));
    gap: 8px 12px;
    align-items: end;
}

.finished-search-grid label {
    display: grid;
    gap: 3px;
}

.finished-search-wide { grid-column: span 2; }
.finished-village-search details { margin: 10px 0; }
.finished-village-search summary { cursor: pointer; font-weight: bold; }
.finished-composition-field {
    display: grid;
    gap: 4px;
}
.finished-composition-label { font-weight: bold; }
.finished-composition-control {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.finished-composition-control [data-finished-composition-summary] {
    flex: 1 1 18em;
    min-width: 0;
    overflow-wrap: anywhere;
}
.finished-composition-dialog {
    width: min(42rem, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    box-sizing: border-box;
    overflow: auto;
    color: var(--site-text, inherit);
    background: var(--site-page-surface, #fff);
    border: 2px solid var(--site-table-border, currentColor);
}
.finished-composition-dialog::backdrop { background: rgba(0, 0, 0, 0.62); }
.finished-composition-dialog-head,
.finished-composition-dialog-actions {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: center;
}
.finished-composition-dialog-head h3 { margin: 0; }
.finished-composition-table { width: 100%; }
.finished-composition-table th { text-align: left; }
.finished-composition-table input { width: 7em; max-width: 100%; }
.finished-composition-dialog-actions { margin-top: 12px; }
.finished-search-actions,
.page-number-navigation,
.village-log-perspectives {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.vlog-handle-name::after { content: " /"; }

@media (max-width: 700px) {
    .finished-search-wide { grid-column: auto; }
    .finished-composition-dialog {
        width: calc(100vw - 16px);
        max-height: calc(100vh - 16px);
        padding: 12px;
    }
    .finished-composition-dialog-actions { align-items: stretch; flex-direction: column-reverse; }
    .finished-composition-dialog-actions button { width: 100%; }
    .table-scroll:has(> .village-overview-table) { overflow-x: visible; }
    .village-overview-table,
    .village-overview-table tbody { display: block; width: 100%; box-sizing: border-box; }
    .village-overview-table { border: 0; background: transparent; }
    .village-overview-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .village-overview-table tr {
        display: grid;
        width: 100%;
        box-sizing: border-box;
        grid-template-columns: 3.25em repeat(11, minmax(0, 1fr));
        margin: 0 0 10px;
        border: 1px solid var(--site-table-border, #d7d79a);
        background: var(--site-page-surface, #000);
    }
    .village-overview-table td,
    .village-overview-table td:nth-child(n) {
        width: auto;
        min-width: 0;
        box-sizing: border-box;
        padding: 5px 7px;
        border-width: 0;
        text-align: left;
        overflow-wrap: break-word;
    }
    .village-overview-table td::before {
        content: attr(data-label);
        display: inline;
        margin-right: .4em;
        font-weight: bold;
        font-size: .78em;
        color: var(--site-accent-strong, #ffff00);
    }
    .village-overview-table td:nth-child(1) {
        grid-column: 1 / 2;
        grid-row: 1;
        border-bottom: 1px solid var(--site-table-border, #d7d79a);
        text-align: center;
    }
    .village-overview-table td:nth-child(2) {
        grid-column: 2 / -1;
        grid-row: 1;
        border-bottom: 1px solid var(--site-table-border, #d7d79a);
    }
    .village-overview-table td:nth-child(1)::before,
    .village-overview-table td:nth-child(2)::before { content: none; }
    .village-overview-table td:nth-child(3) {
        grid-column: 1 / 6;
        grid-row: 2;
    }
    .village-overview-table td:nth-child(4) {
        grid-column: 6 / 10;
        grid-row: 2;
        border-left: 1px solid var(--site-table-border, #d7d79a);
    }
    .village-overview-table td:nth-child(5) {
        grid-column: 10 / -1;
        grid-row: 2;
        border-left: 1px solid var(--site-table-border, #d7d79a);
    }
    .village-overview-table .village-list-detail { margin-left: 0; }
    .village-overview-table .village-list-subparticipants,
    .village-overview-table .village-list-winner { margin-top: 3px; }
    .village-overview-table .village-list-rule-content {
        align-items: flex-start;
        flex-direction: column;
        gap: 2px;
    }
    .finished-search-wide { grid-column: auto; }
}
@media (max-width: 560px) {
    .role-panel-body-grid {
        grid-template-columns: 1fr;
    }

    .role-panel-portrait {
        display: none;
    }

    .role-panel-list {
        grid-template-columns: 4.5em minmax(0, 1fr);
    }

    .role-panel-content,
    .role-panel-section,
    .role-ability-form {
        min-width: 0;
    }

    .role-result-table {
        display: table;
        width: 100%;
        max-width: 100%;
        overflow: visible;
    }

    .role-result-table th,
    .role-result-table td,
    .role-result-table td:nth-child(2) {
        min-width: 0;
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

.village-rule-editor {
    display: grid;
    gap: 8px;
}

.village-rule-editor textarea {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    min-height: 12rem;
    resize: vertical;
}

.village-dummy-message-editor {
    display: grid;
    gap: 8px;
}

.village-dummy-message-editor textarea {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    min-height: 7rem;
    resize: vertical;
}

.village-rule-required-toggle,
.entry-village-rule-confirmation label,
.entry-ranking-handle-confirmation label,
.village-rule-reacknowledgement label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.village-rule-reacknowledgement,
.entry-village-rule-confirmation {
    border-left: 5px solid var(--site-accent, #33d6e8);
}

.entry-ranking-handle-confirmation {
    border-left: 5px solid var(--site-warning-border, #e4a23a);
}

.village-rule-display h2 {
    border-left: 5px solid var(--site-accent, #33d6e8);
    padding-left: 9px;
}

.entry-confirm-form {
    display: grid;
    gap: 10px;
}

.entry-confirm-actions {
    align-items: stretch;
    justify-content: flex-end;
}

.entry-confirm-actions button {
    min-width: 8rem;
    min-height: 2.4rem;
}

.entry-confirm-submit {
    font-weight: bold;
}

.village-plan-create-guide {
    display: grid;
    gap: 5px;
    margin-bottom: 14px;
    padding: 10px 12px;
}

.village-plan-create-guide h2,
.village-plan-create-guide p {
    margin: 0;
}

.village-plan-create-guide h2 {
    font-size: 1.08rem;
}

.village-plan-locked-setting {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
    margin: 8px 0;
    padding: 9px 10px;
    border: 1px solid var(--site-panel-border, #777852);
    background: var(--site-ui-surface, #15150a);
}

.village-plan-locked-setting-label {
    font-weight: bold;
}

.village-plan-locked-note {
    color: var(--site-warning-text, var(--site-ui-muted-text, #e9e9c0));
}

input[readonly].village-plan-locked-input {
    cursor: not-allowed;
    opacity: .82;
}

.village-plan-entry-changes {
    margin: 10px 0 14px;
    padding: 10px 12px;
    border: 2px solid var(--site-warning-border, #e4a23a);
    background: var(--site-warning-bg, var(--site-ui-surface, #15150a));
    color: var(--site-warning-text, var(--site-ui-text, #fff));
}

.village-plan-entry-changes h3,
.village-plan-entry-changes > p {
    margin: 0 0 8px;
}

.village-plan-entry-change-list {
    margin: 8px 0;
}

.village-plan-entry-change-list > div {
    display: grid;
    grid-template-columns: minmax(7em, 10em) minmax(0, 1fr);
    gap: 4px 10px;
    padding: 6px 0;
    border-top: 1px solid var(--site-panel-border, currentColor);
}

.village-plan-entry-change-list dt {
    font-weight: bold;
}

.village-plan-entry-change-list dd {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 6px;
    margin: 0;
    min-width: 0;
}

.village-plan-entry-change-before,
.village-plan-entry-change-after {
    overflow-wrap: anywhere;
}

.village-plan-entry-change-before {
    opacity: .8;
}

.village-plan-entry-change-after {
    font-weight: bold;
}

.village-plan-entry-change-value--multiline {
    white-space: pre-wrap;
}

@media (max-width: 560px) {
    .village-plan-entry-change-list > div {
        grid-template-columns: 1fr;
    }

    .village-plan-entry-change-list dd {
        grid-template-columns: 1fr;
    }

    .village-plan-entry-change-arrow {
        transform: rotate(90deg);
        width: max-content;
    }
}

.village-create-confirm-summary,
.village-create-confirm-page .village-rule-display,
.village-create-confirm-page .village-info {
    margin-bottom: 16px;
}

.village-create-role-composition {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
    gap: 6px 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.village-create-confirm-form {
    display: grid;
    gap: 10px;
}

.village-create-confirm-actions {
    justify-content: flex-end;
}

.village-create-confirm-actions button {
    min-height: 2.5rem;
}

.village-create-submit {
    font-weight: bold;
}

.village-rule-body {
    margin: 10px 0;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}

.entry-village-rule-confirmation,
.entry-ranking-handle-confirmation,
.village-rule-reacknowledgement {
    display: grid;
    gap: 10px;
    margin: 14px 0;
    padding: 12px;
}

.village-rule-card {
    color: inherit;
}

.entry-ranking-handle-confirmation strong {
    color: inherit;
}

.village-rule-card .form-help {
    color: inherit;
}

.village-rule-reacknowledgement form {
    display: grid;
    gap: 10px;
}

.village-rule-roll-call {
    margin: 12px 0;
    padding: 10px 12px;
}

.village-rule-roll-call h3,
.village-rule-roll-call p {
    margin-top: 0;
}

.village-rule-roll-call-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 6px;
    margin: 8px 0;
    padding: 0;
    list-style: none;
}

.village-rule-roll-call-list li {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
    padding: 6px 8px;
    border: 1px solid rgb(255 255 255 / 35%);
    overflow-wrap: anywhere;
}

.village-rule-roll-call-list li.pending {
    background: #4f2424;
}

.village-rule-roll-call-list li.acknowledged {
    background: #254c2b;
}

.village-rule-roll-call-status {
    flex: 0 0 auto;
    font-weight: bold;
}

.village-plan-ground-slide-control {
    margin-top: 0.75rem;
    padding-top: 0.65rem;
    border-top: 1px solid var(--panel-border, #526681);
}

.village-plan-ground-slide-control h4 {
    margin: 0 0 0.35rem;
}

.village-rule-dialog {
    box-sizing: border-box;
    width: min(38rem, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    padding: 16px;
    border: 2px solid var(--site-panel-border, #6c7e90);
    border-radius: 8px;
    background: var(--site-page-surface, #101820);
    color: var(--site-text, #fff);
    overflow-y: auto;
}

.village-rule-dialog::backdrop {
    background: rgb(0 0 0 / 65%);
}

.village-rule-dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 2px solid var(--site-panel-border, #6c7e90);
}

.village-rule-dialog-head h2 {
    margin: 0 0 8px;
}

.ranking-handle-preview-dialog .ranking-handle-message-preview {
    width: 100%;
    margin: 12px 0;
}

.ranking-handle-preview-dialog .vlog-name {
    overflow-wrap: anywhere;
}

.vlog {
    margin-top: 10px;
}

.vlog-layout {
    display: block;
}

.vlog-layout[data-red-extract="true"] {
    display: block;
}

.vlog-message {
    border: 1px solid #fff;
    margin: 14px 0;
    background: #575b32;
    color: #fff;
    font-size: calc(var(--village-log-base-font-size, 16px) * var(--site-font-scale, 1));
    font-weight: normal;
    line-height: 1.42;
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .22), inset -1px -1px 0 rgba(0, 0, 0, .4), 3px 3px 0 #000;
}

.vlog-management-message {
    display: grid;
    gap: 8px;
    padding: 14px 16px;
}

.vlog-management-label {
    font-size: 1.08em;
    letter-spacing: .04em;
}

.vlog-management-body {
    margin: 0;
    white-space: normal;
    overflow-wrap: anywhere;
}

.vlog-management-time {
    justify-self: end;
    font-size: .88em;
}

.vlog-message.vlog-village-builder {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.vlog-village-builder .village-info-card,
.village-info-card.village-builder-message-preview {
    --village-info-card-bg: var(--site-village-builder-message-bg, var(--site-ui-gradient, #416b42));
    --village-info-card-text: var(--site-village-builder-message-text, var(--site-ui-text, #fff));
    --village-info-card-label-text: var(--site-village-builder-message-label-text, var(--site-ui-highlight-text, #e6f4df));
    --village-info-card-border: var(--site-village-builder-message-border, var(--site-accent-strong, #000));
    --village-info-card-border-width: var(--site-village-builder-message-border-width, 2px);
    --village-info-card-border-style: var(--site-village-builder-message-border-style, solid);
    --village-info-card-radius: var(--site-village-builder-message-radius, 0);
    --village-info-card-shadow: var(--site-village-builder-message-shadow, var(--site-panel-shadow, none));
    --village-info-card-link: var(--site-village-builder-message-link, var(--site-link, #fff4b0));
    --village-info-card-link-visited: var(--site-village-builder-message-link-visited, var(--site-link-visited, #f1dcff));
    --village-info-card-link-hover: var(--site-village-builder-message-link-hover, var(--site-link-hover, #fff));
    --village-info-card-focus-ring: var(--site-village-builder-message-focus-ring, var(--site-focus-ring, #fff));
    margin: 0;
    border: var(--village-info-card-border-width)
            var(--village-info-card-border-style)
            var(--village-info-card-border);
    border-left-width: var(--site-village-builder-message-border-left-width,
            var(--village-info-card-border-width));
    border-left-color: var(--site-village-builder-message-border-left-color,
            var(--village-info-card-border));
    border-radius: var(--village-info-card-radius);
    background: var(--village-info-card-bg);
    color: var(--village-info-card-text);
    box-shadow: var(--village-info-card-shadow);
}

.vlog-village-builder-header {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.vlog-village-builder-header .message-menu-trigger {
    position: static;
    flex: 0 0 auto;
}

.vlog-village-builder-body,
.village-builder-message-preview p {
    margin: 12px 0;
    white-space: normal;
    overflow-wrap: anywhere;
}

.vlog-village-builder-footer,
.village-builder-message-preview footer {
    text-align: right;
    font-size: .88em;
}

.village-builder-message-composer {
    margin: 14px 0;
}

.village-builder-message-composer > summary,
.village-builder-transfer > summary {
    cursor: pointer;
    font-weight: bold;
}

.village-builder-message-form {
    display: grid;
    gap: 10px;
    margin-bottom: 0;
}

.village-builder-message-form textarea,
.village-builder-message-form .formatting-direct-input {
    box-sizing: border-box;
    width: 100%;
}

.village-builder-message-form .message-formatting-editor {
    /* 通常発言欄でチップ列が占める幅を差し引き、本文入力の文字サイズを揃える。 */
    --message-format-inline-reserve: var(--site-log-chip-column, 88px);
}

.village-builder-message-preview {
    margin-bottom: 10px;
}

.village-builder-confirm-notice {
    padding: 10px 12px;
    border: 2px solid currentColor;
}

.village-builder-confirm-actions {
    display: grid;
    gap: 10px;
}

.village-builder-confirm-check {
    grid-column: 1 / -1;
}

.village-builder-confirm-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.village-builder-transfer {
    margin-top: 18px;
}

.village-builder-transfer form,
.village-builder-transfer [data-builder-transfer-participant-panel],
.village-builder-transfer [data-builder-transfer-handle-panel] {
    display: grid;
    gap: 10px;
}

.village-builder-transfer [data-builder-transfer-handle-panel][hidden],
.village-builder-transfer [data-builder-transfer-participant-panel][hidden] {
    display: none;
}

.village-builder-transfer-target {
    margin: 0;
    padding: 10px 12px;
    border: 1px solid var(--site-line, currentColor);
}

.village-builder-transfer-target .link-button {
    font-weight: bold;
}

.village-builder-transfer-dialog {
    box-sizing: border-box;
    width: min(48rem, calc(100vw - 32px));
    max-height: 90vh;
    overflow: auto;
    padding: 14px 16px;
    border: 1px solid var(--site-panel-border, #888);
    border-radius: var(--site-ui-radius, 0);
    background: var(--site-error-surface, #151c28);
    color: var(--site-text, #fff);
}

.village-builder-transfer-dialog > h2 { margin: 0 0 .5rem; }
.village-builder-transfer-dialog > ul { margin-block: .6rem; }
.village-builder-transfer-profile[data-profile-state="error"],
.village-builder-transfer-profile[data-profile-state="loading"] {
    padding: 0;
    border: 0;
    background: transparent;
    max-height: none;
    overflow: visible;
}
.village-builder-transfer-profile[data-profile-state] > p { margin-block: .4rem; }
.village-builder-transfer-dialog [data-builder-transfer-profile-section] > p { margin-block: .5rem; }

.village-builder-transfer-dialog::backdrop {
    background: rgba(0, 0, 0, .72);
}

.village-builder-transfer-dialog .dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 16px;
}

.village-builder-transfer-dialog-lead {
    margin-bottom: 8px;
}

.village-builder-transfer-profile {
    box-sizing: border-box;
    max-height: 48vh;
    overflow: auto;
    padding: 10px;
    border: 1px solid var(--site-line, currentColor);
    background: var(--site-panel-bg, #070707);
    color: var(--site-text, #fff);
}

.village-builder-transfer-profile h3 {
    margin: 8px 0;
}

.village-builder-transfer-profile h3:first-child {
    margin-top: 0;
}

.village-builder-transfer-confirm-check {
    display: block;
    margin: 12px 0;
    padding: 10px;
    border: 2px solid var(--site-accent-strong, currentColor);
}

.vlog-header {
    position: relative;
    min-height: 22px;
    padding: 14px 12px 0;
    border-bottom: 0;
    background: transparent;
}

.message-menu-trigger {
    cursor: pointer;
    position: static;
    display: inline-block;
    margin-right: 4px;
}

.vlog-kind,
.vlog-name {
    color: inherit;
    font-weight: bold;
}

.vlog-name {
    margin-left: 4px;
}

.vlog-body {
    display: flex;
    gap: 14px;
    padding: 8px 12px 2px;
}

.vlog-img {
    display: flex;
    flex: 0 0 var(--site-log-chip-width, 78px);
    align-items: center;
    justify-content: center;
    min-height: 78px;
}

.vlog-img img {
    width: auto;
    height: auto;
    max-width: var(--site-log-chip-width, 78px);
    max-height: var(--site-log-chip-max-height, 118px);
    object-fit: fill;
    border: 1px solid rgba(255, 255, 255, .75);
}

.vlog-text {
    margin: 0;
    white-space: normal;
    line-height: 1.42;
    flex: 1;
    font-size: 1em;
}

.vlog-footer {
    padding: 0 12px 12px;
    text-align: right;
    font-size: calc(14px * var(--site-font-scale, 1));
    line-height: 1.3;
}

.vlog-message.vlog-with-chip {
    display: grid;
    grid-template-columns: var(--site-log-chip-column, 88px) minmax(0, 1fr);
    grid-template-areas:
            "photo header"
            "photo text"
            "photo footer";
    column-gap: var(--site-log-gap, 6px);
}

.vlog-message.vlog-with-chip .vlog-header {
    grid-area: header;
    padding-left: 0;
}

.vlog-message.vlog-with-chip .vlog-body {
    display: contents;
}

.vlog-message.vlog-with-chip .vlog-img {
    grid-area: photo;
    align-self: center;
    box-sizing: border-box;
    min-height: 0;
    padding: 10px 0 10px 8px;
}

.vlog-message.vlog-with-chip .vlog-text {
    grid-area: text;
    padding: 8px 12px 2px 0;
}

.vlog-message.vlog-with-chip .vlog-footer {
    grid-area: footer;
    padding: 0 12px 12px 0;
}

.vlog-message.vlog-with-chip.vlog-message-pending {
    grid-template-areas:
            "photo header"
            "photo text"
            "photo controls"
            "photo footer";
}

.vlog-message.vlog-with-chip.vlog-message-pending .pending-message-content {
    display: contents;
}

.vlog-message.vlog-with-chip.vlog-message-pending .pending-message-controls {
    grid-area: controls;
    padding: 6px 12px 2px 0;
}

.message-number-insert {
    border: 0;
    padding: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.message-number-insert:hover,
.message-number-insert:focus-visible {
    color: inherit;
    background: color-mix(in srgb, currentColor 16%, transparent);
    text-decoration: underline;
}

.message-number-insert:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* Only the dedicated touch-copy shortcut owns the number's long-press gesture. */
body[data-message-anchor-action-mode="INSERT_WITH_COPY_SHORTCUT"] button.message-number-insert[data-anchor-insert] {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

.vlog-public {
    border-color: #686846;
}

.vlog-message-pending {
    border-color: #a9ad7a;
    background: #747851;
}

.message-format-bold {
    font-weight: 700;
}

.message-format-italic {
    font-style: italic;
}

.message-format-underline {
    text-decoration-line: underline;
}

.message-format-strike {
    text-decoration-line: line-through;
}

.message-format-underline.message-format-strike {
    text-decoration-line: underline line-through;
}

.message-format-size-small {
    font-size: .8571428571em;
}

.message-format-size-large {
    font-size: 1.2em;
}

.message-format-size-extra-large {
    font-size: 1.5em;
}

:root {
    --message-format-color-red: #ff6b6b;
    --message-format-color-orange: #ffad5c;
    --message-format-color-yellow: #fff16b;
    --message-format-color-green: #78df78;
    --message-format-color-cyan: #69e3e3;
    --message-format-color-blue: #8db6ff;
    --message-format-color-purple: #c59cff;
    --message-format-color-pink: #ff9fd3;
    --message-format-color-gray: #c7c7c7;
}

.message-format-color-red { color: var(--message-format-color-red); }
.message-format-color-orange { color: var(--message-format-color-orange); }
.message-format-color-yellow { color: var(--message-format-color-yellow); }
.message-format-color-green { color: var(--message-format-color-green); }
.message-format-color-cyan { color: var(--message-format-color-cyan); }
.message-format-color-blue { color: var(--message-format-color-blue); }
.message-format-color-purple { color: var(--message-format-color-purple); }
.message-format-color-pink { color: var(--message-format-color-pink); }
.message-format-color-gray { color: var(--message-format-color-gray); }

.message-formatting-editor {
    container-type: inline-size;
    --message-format-inline-reserve: 0px;
    --message-format-font-scale: var(--message-input-font-scale, 1);
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

.message-formatting-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
    order: -1;
    padding: 6px;
    border: 1px solid var(--say-border, #777852);
    background: var(--say-input-bg, #fff);
    color: var(--say-input-text, #000);
}

.message-formatting-toolbar[hidden],
.formatting-direct-input[hidden] {
    display: none !important;
}

.formatting-mode-description {
    flex: 1 0 100%;
    margin: 0;
    font-size: .88em;
}

.formatting-toolbar-primary,
.formatting-toolbar-secondary {
    display: flex;
    flex: 1 0 100%;
    min-width: 0;
    max-width: 100%;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
}

.message-formatting-toolbar .formatting-toolbar-secondary > button {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}

.formatting-mode-selection_panel .message-formatting-toolbar {
    order: 1;
}

.formatting-mode-selection_panel .message-formatting-preview {
    order: 2;
}

.formatting-button-group,
.formatting-color-palette {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}

.message-formatting-toolbar button {
    position: relative;
    box-sizing: border-box;
    min-height: 30px;
    padding-inline: 7px;
    border: 2px outset #d7d7d7;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}

.message-formatting-toolbar button.selected,
.message-formatting-toolbar button[aria-pressed="true"],
.message-formatting-toolbar button[aria-pressed="mixed"] {
    border: 2px solid var(--site-formatting-selected-border, var(--site-accent-strong, #ffff00));
    background: var(--site-formatting-selected-bg, #34307f);
    box-shadow: var(--site-formatting-selected-shadow, inset 2px 2px 3px rgb(0 0 0 / 55%));
    color: var(--site-formatting-selected-color, #fff);
    font-weight: bold;
}

.message-formatting-toolbar button[aria-pressed="mixed"] {
    background: var(
            --site-formatting-mixed-bg,
            repeating-linear-gradient(
                    135deg,
                    var(--site-formatting-selected-bg, #34307f) 0 5px,
                    #514ca2 5px 10px));
}

.formatting-colors {
    position: relative;
}

.formatting-colors > summary {
    font-size: .88em;
}

.formatting-color-palette {
    position: absolute;
    z-index: 5;
    top: 100%;
    left: 0;
    min-width: min(360px, 80vw);
    padding: 6px;
    border: 1px solid var(--site-panel-border, #fff);
    background: var(--site-ui-surface, #15150a);
    color: var(--site-ui-text, #fff);
    box-shadow: var(--site-panel-shadow, none);
}

.formatting-color-palette button[data-format-color="RED"] { color: var(--message-format-color-red); }
.formatting-color-palette button[data-format-color="ORANGE"] { color: var(--message-format-color-orange); }
.formatting-color-palette button[data-format-color="YELLOW"] { color: var(--message-format-color-yellow); }
.formatting-color-palette button[data-format-color="GREEN"] { color: var(--message-format-color-green); }
.formatting-color-palette button[data-format-color="CYAN"] { color: var(--message-format-color-cyan); }
.formatting-color-palette button[data-format-color="BLUE"] { color: var(--message-format-color-blue); }
.formatting-color-palette button[data-format-color="PURPLE"] { color: var(--message-format-color-purple); }
.formatting-color-palette button[data-format-color="PINK"] { color: var(--message-format-color-pink); }
.formatting-color-palette button[data-format-color="GRAY"] { color: var(--message-format-color-gray); }

.formatting-state {
    flex: 1 1 180px;
    font-size: .88em;
    min-width: 0;
    overflow-wrap: anywhere;
}

.formatting-direct-input {
    box-sizing: border-box;
    width: 100%;
    min-height: 11em;
    padding: 7px;
    border: 2px inset #d7d7d7;
    background: #fff;
    color: #000;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.formatting-direct-input .message-format-size-small {
    font-size: clamp(
            calc(8px * var(--message-format-font-scale, 1)),
            calc(((100cqi - var(--message-format-inline-reserve, 0px)) / 35) * var(--message-format-font-scale, 1)),
            calc(28px * var(--message-format-font-scale, 1)));
}

.formatting-direct-input .message-format-size-large {
    font-size: clamp(
            calc(11px * var(--message-format-font-scale, 1)),
            calc(((100cqi - var(--message-format-inline-reserve, 0px)) / 25) * var(--message-format-font-scale, 1)),
            calc(40px * var(--message-format-font-scale, 1)));
}

.formatting-direct-input .message-format-size-extra-large {
    font-size: clamp(
            calc(13px * var(--message-format-font-scale, 1)),
            calc(((100cqi - var(--message-format-inline-reserve, 0px)) / 20) * var(--message-format-font-scale, 1)),
            calc(48px * var(--message-format-font-scale, 1)));
}

[data-simple-say-body],
[data-say-body],
.formatting-direct-input {
    font-size: clamp(
            calc(9px * var(--message-format-font-scale, 1)),
            calc(((100cqi - var(--message-format-inline-reserve, 0px)) / 30) * var(--message-format-font-scale, 1)),
            calc(32px * var(--message-format-font-scale, 1)));
}

.message-formatting-preview {
    width: 100%;
    box-sizing: border-box;
}

.message-formatting-preview .vlog-header,
.message-formatting-preview .vlog-footer {
    padding-left: 12px;
}

.message-formatting-preview[hidden] {
    display: none !important;
}

.message-formatting-preview [data-formatting-preview-chip-container][hidden] {
    display: none !important;
}

.message-insertion-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    align-items: center;
    padding: 5px 0;
}

.message-insertion-toolbar button,
.app-confirm button,
.message-action-menu button,
.message-popup-controls button {
    min-height: 27px;
    border: 1px solid #a8a8a8;
    background: #e8e8e8;
    color: #000;
    box-shadow: none;
    padding: 1px 9px;
    font-size: .9em;
    white-space: nowrap;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.message-tools-dialog {
    box-sizing: border-box;
    width: min(520px, calc(100vw - 24px));
    max-height: calc(100dvh - 24px);
    margin: 12px auto auto;
    padding: 14px;
    border: 2px solid var(--say-border, #777852);
    background: var(--page-bg, #0d1424);
    color: var(--page-text, #f4f4f4);
    overflow-y: auto;
}

.message-tools-dialog::backdrop {
    background: rgb(0 0 0 / 62%);
}

.message-tools-dialog-head {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.message-tools-dialog-head h2 {
    margin: 0;
}

.message-tools-dialog-head button {
    min-width: 36px;
    min-height: 36px;
    font-size: 1.25rem;
}

.message-word-register-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    align-items: end;
    margin-bottom: 10px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--say-border, #777852);
}

.message-word-register-line label {
    grid-column: 1 / -1;
}

.message-word-register-line input {
    box-sizing: border-box;
    min-width: 0;
    width: 100%;
}

.message-word-list {
    display: grid;
    gap: 6px;
    max-height: min(50dvh, 360px);
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}

.message-word-list li,
.message-word-list > label {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    box-sizing: border-box;
    padding: 8px;
    border: 1px solid var(--say-border, #777852);
    overflow-wrap: anywhere;
}

.message-word-list > label {
    grid-template-columns: auto minmax(0, 1fr);
    cursor: pointer;
}

.message-tools-status {
    min-height: 1.5em;
    margin: 8px 0;
    color: var(--site-ui-highlight-text, var(--site-link, #77e8f5));
    font-weight: 700;
    overflow-wrap: anywhere;
}

.say-form .message-tools-status {
    color: currentColor;
}

.say-draft-actions {
    align-items: center;
}

.say-draft-actions .say-draft-help-button {
    appearance: none;
    display: inline-grid;
    place-items: center;
    width: 1.65rem;
    min-width: 1.65rem;
    height: 1.65rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #171717;
    box-shadow: none;
    cursor: pointer;
}

.say-draft-actions .say-draft-help-button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.say-draft-help-icon {
    display: block;
    width: 1.65rem;
    height: 1.65rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.say-draft-help-icon > circle:first-child {
    fill: #f4f2ea;
}

.say-draft-help-icon-dot {
    fill: currentColor;
    stroke: none;
}

.say-draft-help-dialog,
.quick-ui-settings-dialog,
.red-off-help-dialog {
    box-sizing: border-box;
    width: min(36rem, calc(100vw - 2rem));
    max-height: calc(100dvh - 2rem);
    padding: 1rem;
    border: 2px solid var(--site-panel-border, #777852);
    border-radius: var(--site-ui-radius, 0);
    background: var(--site-ui-surface, #15150a);
    color: var(--site-ui-text, #fff);
    overflow-y: auto;
}

.say-draft-help-dialog::backdrop,
.quick-ui-settings-dialog::backdrop,
.red-off-help-dialog::backdrop {
    background: rgb(0 0 0 / 62%);
}

.say-draft-help-dialog-head,
.quick-ui-settings-dialog-head,
.red-off-help-dialog-head,
.village-log-navigation-menu-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.say-draft-help-dialog-head h2,
.quick-ui-settings-dialog-head h2,
.red-off-help-dialog-head h2 {
    margin: 0;
}

.say-draft-help-dialog dt {
    margin-top: .8rem;
    font-weight: 700;
}

.say-draft-help-dialog dd {
    margin: .2rem 0 0;
}

.say-draft-help-close,
.red-off-help-dialog-head button,
.village-log-navigation-menu-head button {
    min-width: 2rem;
    padding: .2rem .45rem;
}

.quick-ui-settings-dialog {
    width: min(42rem, calc(100vw - 1rem));
    container: quick-ui-settings / inline-size;
}

.quick-ui-settings-list {
    display: grid;
    gap: .65rem;
    margin-top: .9rem;
}

.quick-ui-settings-dialog .quick-ui-settings-list:not(.village-ui-tools) {
    border: 1px solid transparent;
    padding: 5px 6px;
}

.quick-ui-settings-list > label {
    display: grid;
    grid-template-columns: minmax(10rem, 1fr) minmax(10rem, 1fr);
    align-items: center;
    gap: .75rem;
    margin: 0;
}

.quick-ui-settings-list > label > select {
    width: 100%;
    min-width: 0;
    margin: 0;
}

.quick-ui-settings-list > label:has(> input[type="checkbox"]:not([hidden])) {
    display: flex;
}

.quick-ui-settings-list .settings-save-status {
    min-height: 1.4em;
    margin: 0;
}

.quick-ui-setting-help {
    margin: -.1rem 0 .1rem;
    color: var(--site-ui-muted-text, var(--site-text, #fff));
    line-height: 1.4;
}

.quick-ui-notification-actions,
.quick-ui-settings-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .6rem;
}

.quick-ui-settings-actions {
    justify-content: flex-end;
    margin-top: 1rem;
}

@media (max-width: 430px) {
    .quick-ui-settings-list > label {
        grid-template-columns: 1fr;
        gap: .25rem;
    }
}

@container quick-ui-settings (max-width: 26rem) {
    .quick-ui-settings-list > label {
        grid-template-columns: 1fr;
        gap: .25rem;
    }
}

/* The same preference covers existing pagers without changing their individual appearance. */
:root body [data-page-navigation] {
    min-width: 0;
    max-width: 100%;
    flex-wrap: var(--page-navigation-flex-wrap, nowrap);
    white-space: var(--page-navigation-white-space, nowrap);
    overflow-x: auto;
    overscroll-behavior-x: contain;
}

:root [data-page-navigation] > a,
:root [data-page-navigation] > span {
    flex-shrink: 0;
    white-space: nowrap;
}

[data-sticky-log-navigation] {
    --village-log-controls-gap: 4px;
    --village-log-sticky-inset: max(env(safe-area-inset-top, 0px), var(--village-log-controls-offset, 0px));
}

@media (max-width: 700px) {
    [data-sticky-log-navigation] {
        --village-log-controls-gap: 0px;
    }

    .village-page .server-clock,
    .village-page .village-log-floating-navigation-button {
        top: max(4px, env(safe-area-inset-top, 0px));
    }
}

[data-sticky-log-ready] [data-sticky-log-days],
[data-sticky-log-ready] [data-sticky-log-pages] {
    position: sticky;
    z-index: 820;
}

[data-sticky-log-ready] [data-sticky-log-days] {
    top: var(--village-log-sticky-inset);
    z-index: 821;
}

[data-sticky-log-ready] [data-sticky-log-pages] {
    top: calc(var(--village-log-sticky-inset) + var(--village-log-days-height, 0px));
}

[data-sticky-log-ready] [data-log-navigation-parent-offset] {
    translate: 0 var(--village-log-parent-offset);
}

[data-sticky-log-ready] [data-log-navigation-stuck] {
    background: linear-gradient(0deg, var(--site-page-bg, #000), var(--site-page-bg, #000)), var(--site-bg, #000);
    box-shadow: 0 1px 0 var(--site-panel-border, #777852);
    opacity: .55;
}

[data-sticky-log-ready] [data-log-navigation-stuck]:hover,
[data-sticky-log-ready] [data-log-navigation-stuck]:focus-within,
[data-sticky-log-ready] [data-log-navigation-stuck]:active {
    opacity: 1;
}

[data-sticky-log-ready] #log-top,
[data-sticky-log-ready] .vlog-message[id] {
    scroll-margin-top: calc(var(--village-log-sticky-inset) + var(--village-log-days-height, 0px)
            + var(--village-log-pages-height, 0px) + 8px);
}

.village-log-footer-navigation {
    margin: 1rem 0;
    padding: .65rem .75rem;
    border: 1px solid var(--site-panel-border, #777852);
    border-radius: var(--site-ui-radius, 0);
    background: var(--site-panel-bg, #070707);
    color: var(--site-text, #fff);
}

.village-log-footer-navigation .village-tabs,
.village-log-footer-navigation .message-index,
.village-log-navigation-menu .village-tabs,
.village-log-navigation-menu .message-index {
    margin: .35rem 0;
}

.village-log-footer-navigation .page-bottom-navigation {
    margin: .35rem 0 0;
}

body[data-village-log-navigation-mode="CONTEXT_MENU"] [data-village-log-long-press-surface],
body[data-village-log-navigation-mode="CONTEXT_MENU"] [data-village-log-long-press-surface] * {
    -webkit-touch-callout: none;
}

body[data-village-log-navigation-mode="CONTEXT_MENU"] [data-village-log-long-press-surface]
    :is(a, button, input, textarea, select, option, label, summary,
        [contenteditable]:not([contenteditable="false"]), [role="button"], [role="link"],
        [data-village-log-native-interaction]),
body[data-village-log-navigation-mode="CONTEXT_MENU"] [data-village-log-long-press-surface]
    [data-village-log-native-interaction] * {
    -webkit-touch-callout: default;
}

body[data-village-log-navigation-mode="CONTEXT_MENU"] .village-log-long-press-pending,
body[data-village-log-navigation-mode="CONTEXT_MENU"] .village-log-long-press-pending * {
    -webkit-user-select: none;
    user-select: none;
}

.village-log-floating-navigation-button {
    position: fixed;
    z-index: 940;
    top: .5rem;
    left: .5rem;
    width: 2.35rem;
    height: 2.35rem;
    padding: 0;
    border: 2px solid var(--site-accent-strong, #ffff00);
    border-radius: var(--site-button-radius, 0);
    background: var(--site-ui-surface, #15150a);
    color: var(--site-ui-text, #fff);
    font-size: 1.25rem;
    line-height: 1;
}

.village-log-navigation-menu {
    position: fixed;
    z-index: 950;
    top: 3.2rem;
    left: .5rem;
    box-sizing: border-box;
    width: min(32rem, calc(100vw - 1rem));
    max-height: calc(100dvh - 1rem);
    padding: .75rem;
    border: 2px solid var(--site-panel-border, #777852);
    border-radius: var(--site-ui-radius, 0);
    background: var(--site-ui-surface, #15150a);
    color: var(--site-ui-text, #fff);
    box-shadow: 0 .5rem 1.5rem rgb(0 0 0 / 48%);
    overflow: auto;
}

.village-log-navigation-menu[hidden] {
    display: none;
}

.village-log-navigation-filter {
    margin-top: 1rem;
    padding: var(--site-log-navigation-filter-padding, .7rem 0 0);
    border-top: 1px solid var(--site-panel-border, #777852);
}

.village-log-navigation-section-title {
    display: block;
    margin: 0 0 .45rem;
    color: inherit;
    font-size: 1.05rem;
    font-weight: 700;
}

.village-log-navigation-filter-help,
.village-log-navigation-filter-status {
    margin: .45rem 0;
    color: var(--site-muted, var(--site-ui-text, #fff));
    font-size: .88rem;
}

.village-log-navigation-filter-group {
    margin-top: .45rem;
}

.village-log-navigation-filter-group > summary {
    cursor: pointer;
    color: var(--site-link, #00ffff);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: .16em;
}

.village-log-navigation-filter-options {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .18rem;
    margin-top: .35rem;
    padding: var(--site-log-navigation-filter-options-padding, 0 0 0 .75rem);
}

.village-log-navigation-filter-option {
    display: grid;
    grid-template-columns: 1.4rem minmax(0, 1fr);
    align-items: center;
    gap: .25rem;
    min-height: 1.75rem;
    border: 1px solid transparent;
    border-radius: var(--site-button-radius, .2rem);
    padding: .2rem .4rem;
    background: var(--site-input-bg, transparent);
    color: var(--site-ui-text, var(--site-text, #fff));
    font: inherit;
    text-align: left;
    overflow-wrap: anywhere;
}

.village-log-navigation-filter-option::before {
    content: "□";
    color: var(--site-muted, currentColor);
    font-weight: 700;
    text-align: center;
}

.village-log-navigation-filter-option.selected {
    border-color: var(--site-accent, #d97706);
    background: color-mix(in srgb, var(--site-accent, #d97706) 20%, transparent);
    color: var(--site-link, #00ffff);
    font-weight: 700;
}

.village-log-navigation-filter-option.selected::before {
    content: "✓";
    color: currentColor;
}

.village-log-navigation-filter-option:hover,
.village-log-navigation-filter-option:focus-visible {
    border-color: var(--site-link-hover, var(--site-link, #00ffff));
    background: color-mix(in srgb, var(--site-link, #00ffff) 12%, transparent);
    color: var(--site-link-hover, var(--site-link, #00ffff));
}

.village-log-navigation-filter-submit {
    width: 100%;
    margin-top: .75rem;
}

.message-tools-dialog-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}

.message-random-options,
.message-random-dice {
    display: grid;
    gap: 7px;
    margin-bottom: 10px;
}

.message-random-options p {
    margin: 0 0 4px 24px;
}

.message-random-dice {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.message-random-dice legend {
    grid-column: 1 / -1;
}

.message-random-dice label,
.message-random-dice select {
    box-sizing: border-box;
    width: 100%;
}

@media (max-width: 700px) {
    .message-formatting-toolbar {
        align-items: stretch;
    }

    .message-formatting-toolbar button {
        min-height: 34px;
    }

    .formatting-color-palette {
        position: static;
        min-width: 0;
        max-width: 100%;
    }

    .message-tools-dialog {
        width: calc(100vw - 16px);
        max-height: calc(100dvh - 16px);
        margin-top: 8px;
        padding: 10px;
    }

    .message-random-dice {
        grid-template-columns: minmax(0, 1fr);
    }

    .message-random-dice legend {
        grid-column: auto;
    }
}

.vlog-message-cancelled {
    border-color: #8f8f8f;
    background: #4a4a4a;
    color: #dedede;
    filter: grayscale(.45);
}

.vlog-message-cancelled .vlog-kind {
    color: #f0f0f0;
}

.vlog-message-cancelled .cancelled-at {
    color: #c5c5c5;
}

.vlog-message.vlog-moderated-hidden.vlog-moderated-hidden {
    --message-bg: #555;
    --message-text: #f4f4f4;
    --message-border: #aaa;
    --message-anchor-text: #fff2a8;
    border-color: #aaa;
    background: #555;
    background-image: none;
    color: #f4f4f4;
    text-shadow: none;
    filter: none;
}

.vlog-moderation-label {
    display: block;
    margin: 0 0 6px;
    color: #fff;
    font-weight: 700;
    letter-spacing: .02em;
}

.pending-message-content {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    flex-direction: column;
    gap: 6px;
}

.pending-message-content .vlog-text {
    flex: 0 1 auto;
}

.pending-message-controls {
    display: flex;
    flex: 0 0 auto;
    flex-direction: row;
    align-self: flex-start;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding-bottom: 2px;
}

.pending-message-controls form {
    margin: 0;
}

.pending-message-countdown {
    font-size: calc(13px * var(--site-font-scale, 1));
    white-space: nowrap;
}

.vlog-action,
.vlog-bookmark,
.vlog-grave-action,
.vlog-backstage-action {
    font-size: calc(15px * var(--site-font-scale, 1));
    box-shadow: none;
}

.vlog-action-line {
    padding: 9px 14px 8px;
}

.vlog-action-text {
    overflow-wrap: anywhere;
}

.vlog-bookmark .vlog-action-text {
    display: flex;
    flex-wrap: wrap;
    overflow-wrap: normal;
    word-break: keep-all;
}

.vlog-bookmark .vlog-action-text > * {
    white-space: nowrap;
}

.vlog-prompt-icon {
    display: inline-block;
    margin-left: 4px;
    font-size: 1.15em;
    line-height: 1;
    vertical-align: -0.08em;
}

.vlog-action-text strong {
    font-weight: bold;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.bookmark-resume-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}

.bookmark-resume-actions button {
    min-height: 28px;
    border: 1px solid var(--site-accent-strong, #ffff00);
    padding: 3px 8px;
    background: var(--site-aux-button-bg, #e8e8e8);
    color: var(--site-aux-button-color, #000);
    cursor: pointer;
    font-size: .875em;
    line-height: 1.35;
}

.bookmark-resume-actions button[aria-pressed="true"] {
    border-width: 2px;
    font-weight: bold;
    box-shadow: 0 0 0 2px var(--site-accent-strong, #ffff00);
}

.bookmark-resume-actions button:focus-visible {
    outline: 3px solid var(--site-accent-strong, #ffff00);
    outline-offset: 2px;
}

.bookmark-resume-actions button[disabled] {
    cursor: wait;
    opacity: .7;
}

.bookmark-resume-status {
    margin: 6px 0;
}

.bookmark-resume-status:empty {
    display: none;
}

.bookmark-resume-target {
    outline: 3px solid var(--site-accent-strong, #ffff00);
    outline-offset: 3px;
}

.bookmark-resume-dialog {
    width: min(480px, calc(100% - 32px));
    border: 2px solid var(--site-accent-strong, #ffff00);
    padding: 18px;
    background: var(--site-panel-bg, #070707);
    color: var(--site-text, #fff);
    box-shadow: 0 14px 38px rgba(0, 0, 0, .55);
}

.bookmark-resume-dialog::backdrop {
    background: rgba(0, 0, 0, .65);
}

.bookmark-resume-dialog h3 {
    margin: 0 0 12px;
    font-size: calc(17px * var(--site-font-scale, 1));
}

.bookmark-resume-dialog form {
    display: flex;
    justify-content: flex-end;
    margin: 16px 0 0;
}

.bookmark-resume-dialog button {
    min-width: 96px;
    min-height: 40px;
}

.vlog-action-meta {
    margin-top: 6px;
    text-align: right;
    font-size: calc(13px * var(--site-font-scale, 1));
    line-height: 1.25;
}

.vlog-wolf {
    border-color: #d7b8b8;
    background: #762525;
}

.vlog-resonance {
    border-color: #b8d7d5;
    background: #1f4f4d;
}

.vlog-grave,
.vlog-backstage {
    border-color: #c5c5de;
    background: #242448;
}

.vlog-monologue {
    border-color: #d7d7d7;
    background: #454545;
}

.vlog-private-talk {
    border-color: #d7c8e7;
    background: #34243f;
}

.vlog-rank-black {
    border-color: #777;
    background: #222;
    color: #fff;
}

.vlog-rank-white {
    border-color: #ddd;
    background: #eee;
    color: #000;
}

.vlog-system,
.vlog-system-private,
.vlog-system-grave {
    border-color: #fff;
    background: #000;
    box-shadow: none;
    font-size: calc(15px * var(--site-font-scale, 1));
    line-height: 1.45;
}

.vlog-system-private {
    border-color: #4e4e5c;
    background: #11111a;
    color: #a7a7b5;
}

.vlog-system-text {
    margin: 0;
    padding: 9px 10px;
    white-space: normal;
}

.vlog-system-text > [data-village-log-native-interaction] {
    white-space: pre-wrap;
}

.vlog-layout[data-red-cut="true"] .vlog-main .vlog-message[data-wolf-whisper="true"] {
    display: none;
}

.vlog-red-pane {
    display: none;
    border: 1px solid #9b4a4a;
    background: #1a0606;
    min-width: 0;
}

.vlog-layout[data-red-extract="true"] .vlog-red-pane {
    display: block;
}

.vlog-layout[data-red-extract="true"] .red-mobile-tabs {
    display: flex;
}

.vlog-layout[data-red-extract="true"][data-red-tab="red"] .vlog-main,
.vlog-layout[data-red-extract="true"]:not([data-red-tab="red"]) .vlog-red-pane {
    display: none;
}

.vlog-layout[data-red-extract="true"][data-red-tab="red"] .vlog-red-pane {
    display: block;
}

.vlog-red-head {
    background: #5e2222;
    color: #fff;
    padding: 4px 6px;
    border-bottom: 1px solid #9b4a4a;
}

.vlog-red-head button {
    float: right;
}

.vlog-red-list {
    position: relative;
    padding: 0 6px 6px;
}

.red-pane-off .vlog-red-list {
    min-height: 120px;
}

.red-pane-off .vlog-red-list > * {
    visibility: hidden;
}

.red-pane-off .vlog-red-list::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    background-color: rgba(0, 0, 0, .78);
    background-image: repeating-linear-gradient(
        135deg,
        rgba(215, 215, 154, .48) 0,
        rgba(215, 215, 154, .48) 2px,
        transparent 2px,
        transparent 8px
    );
}

.red-mobile-tabs {
    display: none;
    align-items: flex-end;
    gap: 0;
    margin: 4px 0 0;
    padding: 0 0 0 5px;
    border-bottom: 2px solid #9b4a4a;
    background: #000;
}

.red-mobile-tabs button {
    position: relative;
    bottom: -2px;
    min-height: 27px;
    border: 1px solid #101010;
    border-bottom: 0;
    border-radius: 4px 4px 0 0;
    background: #555;
    color: #fff;
    font-weight: bold;
    margin: 0 1px 0 0;
    padding: 4px 11px 5px;
    text-shadow: 1px 1px 0 #000;
    box-shadow:
            inset 1px 1px 0 rgba(255, 255, 255, .36),
            inset -1px -1px 0 rgba(0, 0, 0, .55);
}

.red-mobile-tabs button.selected {
    background: #762525;
    border-color: #9b4a4a;
    border-bottom-color: #762525;
    color: #fff;
    box-shadow:
            inset 1px 1px 0 rgba(255, 255, 255, .28),
            0 2px 0 #762525;
}

.red-mobile-tabs button[data-red-tab="red"]:not(.selected) {
    color: #ffcc33;
}

.message-popup {
    position: fixed;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: min(640px, calc(100vw - 16px));
    max-height: calc(100svh - 16px);
    margin: 0;
    overflow: visible;
    border: 0;
    background: transparent;
    color: var(--site-text, #fff);
    box-shadow: none;
    pointer-events: none;
}

.message-popup-active {
    border-color: transparent;
}

.message-popup-controls {
    --controls-font-size: calc(12px * var(--site-font-scale, 1));
    --controls-hit-height: max(24px, calc(var(--controls-font-size) * 2));
    --controls-face-height: calc(var(--controls-font-size) * 5 / 3);
    --controls-padding: calc(var(--controls-font-size) / 6);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0;
    background: transparent;
    border-bottom: 0;
    text-align: right;
    box-sizing: border-box;
    gap: var(--controls-padding);
    font: inherit;
}
.message-panel-header > .message-popup-controls {
    /* The smallest message-card inset is 6px; large text must not lift targets past it. */
    --controls-top-margin: max(-6px, calc((1lh - var(--controls-hit-height)) / 2));
    float: right;
    width: max-content;
    /* The name column can be narrower than the buttons; keep them within the whole card. */
    max-width: none;
    /* Keep the float's occupied height equal to the existing name line. */
    margin: var(--controls-top-margin) -4px calc(1lh - var(--controls-hit-height) - var(--controls-top-margin)) 8px;
    padding: 0;
}

/* Cards without a header must not squeeze the controls into the photo column. */
.message-popup-content > .vlog-message > .message-popup-controls {
    grid-column: 1 / -1;
}

.message-popup-content > .vlog-message.message-load-notice {
    display: block;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid var(--site-panel-border, #888);
    border-radius: var(--site-ui-radius, 0);
    background: var(--site-error-surface, #151c28);
    color: var(--site-text, #fff);
}
.message-load-notice > .vlog-header {
    display: flow-root;
    margin: 0;
    padding: 0;
    color: inherit;
}
.message-load-notice > p { margin: .5em 0 0; }

.message-popup-controls button,
.message-popup-controls button:hover {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    position: relative;
    width: auto;
    max-width: none;
    min-width: var(--controls-hit-height);
    height: var(--controls-hit-height);
    min-height: var(--controls-hit-height);
    margin: 0;
    padding: var(--controls-padding);
    border: 0;
    border-radius: 3px;
    color: inherit;
    background: transparent;
    font: var(--controls-font-size)/1.25 sans-serif;
    text-decoration: none;
    box-shadow: none;
    cursor: pointer;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.message-popup-controls .control-face {
    display: inline-grid;
    place-items: center;
    box-sizing: border-box;
    height: var(--controls-face-height);
    min-width: calc(var(--controls-font-size) * 4);
    padding: 0 calc(var(--controls-font-size) / 3);
    border: 1px solid color-mix(in srgb, currentColor 40%, transparent);
    border-radius: 3px;
    background: transparent;
    white-space: nowrap;
    text-align: center;
    line-height: 1;
    pointer-events: none;
}
.message-popup-controls .control-label {
    display: block;
    margin: 0;
    padding: 0;
    line-height: 1;
    text-align: center;
}
.message-popup-controls .control-cross {
    display: block;
    width: calc(var(--controls-font-size) * 4 / 3);
    height: calc(var(--controls-font-size) * 4 / 3);
    margin: 0;
}
.message-popup-controls [data-popup-close-all] .control-face {
    font-weight: 400;
}
.message-popup-controls [data-popup-close] .control-face {
    font-weight: 650;
}
/* Keep the close target width stable on hover as well as at rest. */
.message-popup-controls button[data-popup-close] {
    width: var(--controls-hit-height);
    min-width: var(--controls-hit-height);
}
.message-popup-controls [data-popup-close] .control-face {
    min-width: var(--controls-face-height);
    width: var(--controls-face-height);
    padding: 0;
    color: #fff;
    border-color: #a51f26;
    background: #b4232a;
}
.message-popup-controls button:hover .control-face {
    background: color-mix(in srgb, currentColor 22%, transparent) !important;
    border-color: currentColor;
}
.message-popup-controls button:active .control-face {
    background: color-mix(in srgb, currentColor 30%, transparent) !important;
}
.message-popup-controls [data-popup-close]:hover .control-face {
    border-color: #80171d;
    background: #941b22 !important;
}
.message-popup-controls [data-popup-close]:active .control-face {
    border-color: #641117;
    background: #7a1720 !important;
}
.message-popup-controls button:focus-visible {
    outline: 2px solid var(--site-focus-ring, currentColor);
    outline-offset: 1px;
}
/* The visual face stays one line. The whole transparent button is clickable. */
@media (max-width: 600px), (pointer: coarse) {
    .message-panel-header > .message-popup-controls {
        margin-bottom: calc(1lh - var(--controls-hit-height) - var(--controls-top-margin) + 3px);
    }
}

.message-panel-header {
    display: flow-root;
}

.message-panel-header .vlog-name {
    overflow-wrap: anywhere;
}

.message-popup > .message-popup-controls {
    position: relative;
    flex: 0 0 auto;
    align-self: flex-end;
    width: max-content;
    max-width: 100%;
    background: transparent;
    pointer-events: auto;
}

.message-popup > .message-popup-body {
    /* Keep the wrapper clear; the message card supplies its own theme surface. */
    flex: 0 1 auto;
    min-height: 0;
    overflow: auto;
    scrollbar-gutter: stable;
    overscroll-behavior: contain;
    background: transparent;
    box-shadow: none;
    pointer-events: auto;
}

.message-popup-body {
    box-sizing: border-box;
    min-width: 0;
    padding: 2px 6px;
}

.message-popup .message-popup-content > .vlog-message {
    box-sizing: border-box;
    max-width: 100%;
    margin: 0;
}

.message-inline-list {
    --message-inline-min-width: 480px;
    --message-inline-indent: 12px;
    box-sizing: border-box;
    /* Stop indenting at the readable width, including after a viewport resize. */
    margin: 2px 0 4px clamp(0px, calc(100% - var(--message-inline-min-width)), var(--message-inline-indent));
    padding: 0;
}

.message-inline {
    box-sizing: border-box;
    min-width: 0;
    margin: 0;
    border: 0;
    background: rgba(0, 0, 0, .2);
    color: var(--site-text, #fff);
}

.message-inline + .message-inline {
    margin-top: 4px;
}

.vlog .vlog-message:has(+ .message-inline-list),
.village-builder-message-preview:has(+ .message-inline-list) {
    margin-bottom: 2px;
}

.vlog .message-inline-list + .vlog-message {
    margin-top: 4px;
}

.message-inline .message-popup-content > .vlog-message {
    box-sizing: border-box;
    max-width: 100%;
    margin: 0;
}

.message-inline > .message-popup-body {
    /* Nested panels must not accumulate the floating popup's horizontal padding. */
    padding: 0;
}

.message-action-menu {
    position: fixed;
    z-index: 2000;
    width: max-content;
    max-width: calc(100vw - 16px);
    border: 1px solid var(--site-message-action-border, #9ea452);
    background: rgba(0, 0, 0, .2);
    color: var(--site-text, #fff);
    box-shadow: 0 3px 12px rgba(0, 0, 0, .8);
}

.message-action-menu ul {
    list-style: none;
    margin: 0;
    padding: 4px;
}

.message-action-menu li {
    margin: 0;
    padding: 0;
}

.message-action-menu button {
    width: 100%;
    margin: 2px 0;
    min-height: 27px;
    padding: 1px 9px;
    text-align: left;
    font-size: .9em;
    white-space: nowrap;
}

@media (max-width: 700px), (max-width: 950px) and (max-height: 520px) {
    html {
        font-size: calc(14px * var(--site-font-scale, 1));
    }

    body {
        --village-log-base-font-size: 14px;
        --mobile-log-font-size: calc(var(--village-log-base-font-size) * var(--site-font-scale, 1));
        --mobile-log-meta-font-size: calc(12px * var(--site-font-scale, 1));
        --mobile-log-line-height: 1.28;
        --mobile-log-photo-column: 74px;
        --mobile-log-photo-max-width: 68px;
        --mobile-log-photo-max-height: 104px;
        --mobile-log-gap: 6px;
        --mobile-log-margin: 7px;
        --mobile-log-padding: 7px;
        --mobile-form-font-size: 1rem;
        --mobile-say-textarea-height: 136px;
        background: var(--site-page-bg, #000);
        font-size: 1rem;
        line-height: 1.35;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    .message-popup-body {
        overflow-wrap: anywhere;
    }

    .message-inline {
        overflow-wrap: anywhere;
    }

    .page {
        box-sizing: border-box;
        width: 100%;
        margin: 0;
        min-height: 100svh;
        padding: 8px max(10px, env(safe-area-inset-right)) 14px max(10px, env(safe-area-inset-left));
        border-left: 0;
        border-right: 0;
        box-shadow: none;
    }

    .top {
        gap: 8px;
        margin: 0 0 10px;
        padding: 6px 10px;
    }

    .top h1 {
        font-size: calc(14px * var(--site-font-scale, 1));
    }

    .top nav {
        flex-wrap: nowrap;
        gap: 4px 10px;
        margin-top: 0;
    }

    .admin-navigation-header {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-navigation-header h1 {
        min-width: 0;
        overflow: visible;
        text-overflow: clip;
    }

    .admin-navigation-header nav {
        width: 100%;
        margin-left: 0;
        flex-wrap: wrap;
        justify-content: flex-start;
        overflow: visible;
    }

    .box {
        margin: 10px 0;
        padding: 8px 10px;
    }

    .box h2 {
        margin-bottom: 6px;
        font-size: calc(14px * var(--site-font-scale, 1));
    }

    fieldset {
        margin: 8px 0;
        padding: 6px;
    }

    input,
    button,
    select,
    textarea {
        max-width: 100%;
        font-size: inherit;
    }

    .village-list {
        display: table;
        width: 100%;
        max-width: 100%;
        font-size: calc(13px * var(--site-font-scale, 1));
    }

    .village-list th,
    .village-list td {
        padding: 3px 5px;
    }

    .table-scroll .village-list {
        max-width: none;
    }

    .admin-page {
        width: 100%;
    }

    .admin-table-scroll .village-list {
        display: table;
        width: 100%;
        max-width: none;
        overflow: visible;
    }

    .admin-user-table td:nth-child(2) {
        min-width: 9em;
        white-space: nowrap;
    }

    .village-page .page {
        box-sizing: border-box;
        width: 100%;
        margin: 0;
        padding: 0 8px 12px;
        border-left: 0;
        border-right: 0;
        box-shadow: none;
    }

    .site-brand {
        margin: 0 0 12px;
    }

    .village-page .top {
        margin-left: -8px;
        margin-right: -8px;
    }

    .village-page .village-room {
        margin-left: -8px;
        margin-right: -8px;
        padding-left: 8px;
        padding-right: 8px;
    }

    .village-page .village-tabs {
        overflow-x: visible;
        white-space: normal;
    }

    .village-page .log-display-form,
    .village-page .message-index {
        overflow-x: auto;
        white-space: nowrap;
    }

    .village-page .log-search-panel {
        margin-left: 0;
        margin-right: 0;
    }

    .village-page .log-search-form {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        align-items: center;
    }

    .village-page .log-search-form input {
        box-sizing: border-box;
        flex: 1 1 160px;
        max-width: none;
        min-width: 0;
    }

    .village-page .log-search-form input[name="words"] {
        flex-basis: calc(100% - 96px);
    }

    .village-page .log-search-form select,
    .village-page .log-search-form button {
        box-sizing: border-box;
        flex: 0 1 auto;
    }

    .village-page .page,
    .message-window-page,
    .message-confirm-page .page {
        font-size: 1rem;
    }

    .village-page .vlog,
    .message-window-page .vlog {
        margin-top: 6px;
    }

    .village-page .vlog-message,
    .message-window-page .vlog-message,
    .message-confirm-page .vlog-message,
    .message-popup-content .vlog-message {
        display: grid;
        grid-template-columns: var(--mobile-log-photo-column, 74px) minmax(0, 1fr);
        grid-template-areas:
                "photo header"
                "photo text"
                "photo footer";
        column-gap: var(--mobile-log-gap, 8px);
        row-gap: var(--mobile-log-row-gap, 6px);
        margin: var(--mobile-log-margin, 8px) 0;
        padding: var(--mobile-log-padding, 8px);
        font-size: var(--mobile-log-font-size, 14px);
        line-height: var(--mobile-log-line-height, 1.35);
        box-shadow: none;
    }

    .village-page .vlog-message.vlog-without-chip,
    .message-window-page .vlog-message.vlog-without-chip,
    .message-confirm-page .vlog-message.vlog-without-chip,
    .message-popup-content .vlog-message.vlog-without-chip {
        display: block;
    }

    .village-page .vlog-header,
    .message-window-page .vlog-header,
    .message-confirm-page .vlog-header,
    .message-popup-content .vlog-header {
        grid-area: header;
        min-height: 0;
        padding: 0;
    }

    .village-page .message-menu-trigger,
    .message-window-page .message-menu-trigger,
    .message-confirm-page .message-menu-trigger,
    .message-popup-content .message-menu-trigger {
        position: static;
        display: inline-block;
        margin-right: 4px;
    }

    .village-page .vlog-body,
    .message-window-page .vlog-body,
    .message-confirm-page .vlog-body,
    .message-popup-content .vlog-body {
        display: contents;
    }

    .village-page .vlog-img,
    .message-window-page .vlog-img,
    .message-confirm-page .vlog-img,
    .message-popup-content .vlog-img {
        grid-area: photo;
        align-self: center;
        min-height: 0;
        padding: 0;
    }

    .village-page .vlog-img img,
    .message-window-page .vlog-img img,
    .message-confirm-page .vlog-img img,
    .message-popup-content .vlog-img img {
        width: auto;
        height: auto;
        max-width: var(--mobile-log-photo-max-width, 68px);
        max-height: var(--mobile-log-photo-max-height, 104px);
    }

    .village-page .vlog-text,
    .message-window-page .vlog-text,
    .message-confirm-page .vlog-text,
    .message-popup-content .vlog-text {
        grid-area: text;
        padding: 0;
        line-height: var(--mobile-log-line-height, 1.35);
    }

    .village-page .vlog-message-pending {
        grid-template-areas:
                "photo header"
                "photo text"
                "photo controls"
                "photo footer";
    }

    .village-page .vlog-message-pending .pending-message-content {
        display: contents;
    }

    .village-page .vlog-message-pending .pending-message-controls {
        grid-area: controls;
        flex-direction: column;
        align-self: end;
        align-items: flex-start;
        gap: 4px;
        min-width: 0;
        padding-top: 6px;
    }

    .village-page .vlog-footer,
    .message-window-page .vlog-footer,
    .message-confirm-page .vlog-footer,
    .message-popup-content .vlog-footer {
        grid-area: footer;
        padding: 1px 0 0;
        font-size: var(--mobile-log-meta-font-size, 12px);
        line-height: 1.25;
    }

    .village-page .vlog-message.vlog-with-chip .vlog-header,
    .message-window-page .vlog-message.vlog-with-chip .vlog-header,
    .message-confirm-page .vlog-message.vlog-with-chip .vlog-header,
    .message-popup-content .vlog-message.vlog-with-chip .vlog-header {
        padding: 0;
    }

    .village-page .vlog-message.vlog-with-chip .vlog-img,
    .message-window-page .vlog-message.vlog-with-chip .vlog-img,
    .message-confirm-page .vlog-message.vlog-with-chip .vlog-img,
    .message-popup-content .vlog-message.vlog-with-chip .vlog-img,
    .village-page .vlog-message.vlog-with-chip .vlog-text,
    .message-window-page .vlog-message.vlog-with-chip .vlog-text,
    .message-confirm-page .vlog-message.vlog-with-chip .vlog-text,
    .message-popup-content .vlog-message.vlog-with-chip .vlog-text {
        padding: 0;
    }

    .village-page .vlog-message.vlog-with-chip .vlog-footer,
    .message-window-page .vlog-message.vlog-with-chip .vlog-footer,
    .message-confirm-page .vlog-message.vlog-with-chip .vlog-footer,
    .message-popup-content .vlog-message.vlog-with-chip .vlog-footer {
        padding: 1px 0 0;
    }

    .village-page .vlog-message.vlog-with-chip.vlog-message-pending .pending-message-controls {
        padding: 6px 0 0;
    }

    .village-page .vlog-system,
    .village-page .vlog-system-private,
    .village-page .vlog-system-grave,
    .village-page .vlog-action,
    .village-page .vlog-bookmark,
    .village-page .vlog-grave-action,
    .village-page .vlog-backstage-action,
    .message-window-page .vlog-system,
    .message-window-page .vlog-system-private,
    .message-window-page .vlog-system-grave,
    .message-window-page .vlog-action,
    .message-window-page .vlog-bookmark,
    .message-window-page .vlog-grave-action,
    .message-window-page .vlog-backstage-action,
    .message-popup-content .vlog-system,
    .message-popup-content .vlog-system-private,
    .message-popup-content .vlog-system-grave,
    .message-popup-content .vlog-action,
    .message-popup-content .vlog-bookmark,
    .message-popup-content .vlog-grave-action,
    .message-popup-content .vlog-backstage-action {
        display: block;
        padding: 0;
    }

    .village-page .vlog-system,
    .village-page .vlog-system-private,
    .village-page .vlog-system-grave,
    .message-window-page .vlog-system,
    .message-window-page .vlog-system-private,
    .message-window-page .vlog-system-grave {
        font-size: calc(13px * var(--site-font-scale, 1));
        line-height: var(--mobile-log-line-height, 1.35);
    }

    .village-page .vlog-system-text,
    .message-window-page .vlog-system-text,
    .message-popup-content .vlog-system-text,
    .village-page .vlog-action-line,
    .message-window-page .vlog-action-line,
    .message-popup-content .vlog-action-line {
        padding: 6px 8px;
    }

    .village-page .vlog-action,
    .village-page .vlog-bookmark,
    .village-page .vlog-grave-action,
    .village-page .vlog-backstage-action,
    .message-window-page .vlog-action,
    .message-window-page .vlog-bookmark,
    .message-window-page .vlog-grave-action,
    .message-window-page .vlog-backstage-action {
        font-size: calc(13px * var(--site-font-scale, 1));
    }

    .village-page .vlog-action-meta,
    .message-window-page .vlog-action-meta {
        margin-top: 4px;
        font-size: var(--mobile-log-meta-font-size, 12px);
    }

    .village-page .bookmark-resume-actions {
        display: flex;
        margin-top: 8px;
    }

    .village-page .bookmark-resume-actions button {
        width: auto;
        min-height: 28px;
        white-space: normal;
        word-break: keep-all;
        overflow-wrap: normal;
    }

    .village-page .say-form,
    .village-page .act-form,
    .village-page .prologue-settings {
        font-size: var(--mobile-form-font-size, 14px);
    }

    .village-page .say-tabs {
        margin: -2px -2px 0;
    }

    .village-page .say-tabs button {
        min-height: 25px;
        min-width: 30px;
        padding: 4px 8px;
        font-size: calc(14px * var(--site-font-scale, 1));
    }

    .village-page .say-form-head {
        padding: 5px 8px 3px 90px;
    }

    .village-page .formpl_body {
        display: flex;
        gap: 6px;
        padding: 2px 8px 8px;
    }

    .village-page .formpl_chrimg {
        flex: 0 0 76px;
        min-height: 76px;
        padding-top: 78px;
    }

    .village-page .formpl_chrimg img {
        width: 100%;
        height: auto;
        max-width: 100%;
        max-height: 96px;
    }

    .village-page .formpl_fields label {
        margin: 2px 0 4px;
    }

    .village-page .formpl_fields textarea {
        height: var(--mobile-say-textarea-height, 136px);
        min-height: var(--mobile-say-textarea-height, 136px);
    }

    .village-page .say-submit-line,
    .village-page .act-submit-line {
        display: flex;
        flex-wrap: wrap;
        gap: 4px 6px;
        align-items: center;
        margin-top: 2px;
    }

    .village-page .say-submit-line span {
        margin: 0;
    }

    .village-page .act-form-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 3px;
    }

    .village-page .act-form-body::before {
        flex-basis: 76px;
    }

    .village-page .act-target-line,
    .village-page .act-target-line select,
    .village-page .act-fieldset select,
    .village-page .act-fieldset input {
        box-sizing: border-box;
        max-width: 100%;
        min-width: 0;
        width: 100%;
    }

    .village-page .act-fieldset {
        box-sizing: border-box;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
        max-width: 100%;
        min-inline-size: 0;
        width: 100%;
    }

    .village-page .say-form select {
        margin-left: 4px;
    }

    .village-page .prologue-settings {
        padding: 6px 8px 8px 92px;
    }

    body.mobile-say-bottom-disabled .prologue-settings {
        padding-left: 10px;
    }
}

@media (max-width: 520px) {
    .message-action-menu {
        max-width: calc(100vw - 16px);
    }

    .formpl_chrimg {
        max-width: 78px;
    }
}

.mvp-voting-notice {
    margin: 0.8rem 0;
    padding: 0.85rem 1rem;
    color: var(--site-text, inherit);
    border: 2px solid var(--site-accent, #7a5b23);
    background: color-mix(in srgb, var(--site-panel-bg, #fff) 86%, var(--site-accent, #7a5b23));
}

.mvp-voting-notice > strong {
    display: block;
    font-size: 1.1rem;
}

.mvp-voting-notice-actions,
.mvp-voting-actions,
.mvp-result-winners {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.mvp-voting-panel {
    margin-top: 0.9rem;
    border-color: var(--site-panel-border, #686846);
}

.mvp-voting-open,
.mvp-voting-actions button,
.mvp-voting-notice-actions button {
    min-height: 32px;
    box-sizing: border-box;
}

.mvp-voting-open {
    display: inline-flex;
    align-items: center;
}

.mvp-voting-body {
    padding: 0.85rem;
}

.mvp-category {
    margin: 0.75rem 0;
    padding: 0.65rem;
}

.mvp-candidate {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.55rem;
    margin: 0.35rem 0;
    padding: 0.4rem;
    border-bottom: 1px solid color-mix(in srgb, currentColor 22%, transparent);
}

.mvp-candidate--none {
    grid-template-columns: auto 1fr;
}

.mvp-candidate--with-image {
    grid-template-columns: auto auto minmax(0, 1fr);
}

.mvp-candidate img,
.mvp-result-winner img {
    display: block;
    flex: 0 0 auto;
    width: auto;
    max-width: min(30vw, 8rem);
    height: 48px;
    object-fit: contain;
}

.mvp-result-winner img {
    height: 64px;
}

.mvp-candidate-text,
.mvp-result-winner > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    overflow-wrap: anywhere;
}

.mvp-praise-field {
    display: grid;
    gap: 0.35rem;
}

.mvp-praise-field textarea {
    width: 100%;
    box-sizing: border-box;
}

.mvp-cancel-form {
    margin-top: 0.6rem;
}

.mvp-result-category {
    margin: 0.8rem 0;
    padding: 0.75rem;
    border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
}

.mvp-result-winner {
    display: flex;
    gap: 0.65rem;
    align-items: center;
    min-width: min(100%, 16rem);
}

.mvp-joint-label {
    font-weight: 700;
}

@media (max-width: 480px) {
    .mvp-candidate.mvp-candidate--none {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .mvp-candidate img {
        height: 40px;
    }
}
.tag-match-code-name-help {
    margin: 0.25rem 0;
}

.tag-match-code-name-option [hidden] {
    display: none !important;
}

.tag-match-second-entry-summary {
    margin: 0.5rem 0;
}

.tag-match-second-entry-summary .info-list {
    grid-template-columns: max-content minmax(0, 1fr);
    margin: 0;
}

.entry-confirm-second-member-summary .entry-confirm-summary {
    margin: 0;
}

/* The saved bottom-bar preference applies at every viewport width. */
.mobile-say-toolbar { display: none; }
/* Keep the disclosure label aligned with adjacent formatting buttons. */
.message-formatting-toolbar .formatting-toolbar-secondary {
  align-items: flex-start;
}
.message-formatting-toolbar .formatting-colors > summary {
  display: flex;
  align-items: center;
  gap: 4px;
  box-sizing: border-box;
  min-height: 26px;
  margin: 0;
  padding: 1px 0;
  border: 2px solid transparent;
  font-size: inherit;
  line-height: normal;
  list-style: none;
  cursor: pointer;
}
.message-formatting-toolbar .formatting-colors > summary::-webkit-details-marker {
  display: none;
}
.message-formatting-toolbar .formatting-colors > summary::before {
  content: "";
  flex: 0 0 auto;
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 5px solid currentColor;
}
.message-formatting-toolbar .formatting-colors[open] > summary::before {
  transform: rotate(90deg);
}
body.mobile-say-bottom-enabled {
  --mobile-say-toggle-height: calc(20px + env(safe-area-inset-bottom, 0px));
  padding-bottom: var(--mobile-say-toggle-height);
}
.village-room #latest {
  /* Align the log's end above the viewport edge (and the dock, when enabled). */
  scroll-margin-top: calc(100vh - var(--mobile-say-toggle-height, 0px) - 8px);
  scroll-margin-top: calc(100dvh - var(--mobile-say-toggle-height, 0px) - 8px);
}
body.mobile-say-bottom-enabled .mobile-say-toolbar {
  color-scheme: var(--site-color-scheme, dark);
  position: fixed;
  inset: auto 0 var(--mobile-viewport-bottom-offset, 0px);
  z-index: 1080;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 max(12px, env(safe-area-inset-right, 0px)) calc(1px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
  width: min(654px, calc(100% - 16px));
  margin: 0 auto;
  border-top: 1px solid var(--site-panel-border, #7b8c9f);
  background: transparent;
  box-shadow: none;
  transition: none;
}
body.mobile-say-bottom-enabled .mobile-say-toolbar .mobile-say-toggle {
  position: static;
  inset: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 148px;
  min-height: 18px;
  margin: 0;
  padding: 0 10px;
  border: 1px solid var(--site-aux-button-border, var(--site-panel-border, #777852));
  border-radius: 4px;
  background: var(--site-aux-button-bg, #e8e8e8);
  color: var(--site-aux-button-color, #000);
  font-family: inherit;
  font-size: calc(12px * var(--site-font-scale, 1));
  line-height: 1.2;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: var(--site-aux-button-shadow, none);
  touch-action: manipulation;
}
body.mobile-say-bottom-enabled .mobile-say-button-surface {
  display: inline-flex;
  border-radius: 4px;
  background: var(--say-input-bg, #fff);
}
body.mobile-say-bottom-enabled.mobile-say-open .mobile-say-toolbar .mobile-say-toggle {
  background: var(--site-formatting-selected-bg, var(--site-aux-button-bg, #34307f));
  color: var(--site-formatting-selected-color, #fff);
  border-color: var(--site-formatting-selected-border, var(--site-accent-strong, #ffff00));
  box-shadow: var(--site-formatting-selected-shadow, none);
}
body.mobile-say-bottom-enabled .mobile-say-toolbar .mobile-say-toggle:focus-visible {
  outline: 2px solid var(--site-focus-ring, #fff1ba);
  outline-offset: 2px;
}
body.mobile-say-bottom-enabled .mobile-say-panel {
  left: 0;
  right: 0;
  width: min(654px, calc(100% - 16px));
  margin: 0 auto;
  box-sizing: border-box;
  display: none;
  position: fixed;
  z-index: 1070;
  overflow: hidden;
  flex-direction: column;
  bottom: calc(var(--mobile-viewport-bottom-offset, 0px) + var(--mobile-say-toggle-height));
  max-height: var(--mobile-say-panel-height, 45dvh);
  height: var(--mobile-say-panel-height, 45dvh);
  padding: 0;
  border: 1px solid var(--site-panel-border, #7b8c9f);
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  background: transparent;
  color-scheme: var(--site-color-scheme, dark);
  box-shadow: none;
  scroll-behavior: auto;
  transition: none;
}
body.mobile-say-bottom-enabled.mobile-say-open .mobile-say-panel { display: flex; }
.mobile-say-panel-content { display: contents; }
body.mobile-say-bottom-enabled .mobile-say-panel-content {
  display: block;
  flex: 1;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 10px max(10px, env(safe-area-inset-right, 0px)) 10px max(10px, env(safe-area-inset-left, 0px));
}
body.mobile-say-bottom-enabled .mobile-say-panel-content > :first-child { margin-top: 0; }
body.mobile-say-bottom-enabled .mobile-say-panel-content > :last-child { margin-bottom: 0; }
body.mobile-say-bottom-enabled .mobile-say-panel .formpl_frame { margin-top: 0; margin-bottom: 0; }
body.mobile-say-bottom-enabled.mobile-say-keyboard-open .mobile-say-panel [data-say-body],
body.mobile-say-bottom-enabled.mobile-say-keyboard-open .mobile-say-panel [data-formatting-direct-editor] {
  min-height: 0;
  max-height: var(--mobile-say-editor-max-height);
  overflow-y: auto;
}

.say-panel-resize-tools { display: none; }
body.mobile-say-bottom-enabled .say-panel-resize-tools {
  display: flex;
  flex: 0 0 auto;
  z-index: 10;
  height: 24px;
  margin: 0;
  background: transparent;
  border-bottom: 1px solid var(--site-panel-border, #7b8c9f);
}
.say-panel-resize-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  cursor: ns-resize;
  touch-action: none;
  user-select: none;
}
.say-panel-resize-handle > span {
  width: 44px;
  height: 4px;
  border-radius: 4px;
  background: var(--site-text, #c5d1df);
  opacity: .65;
}
.say-panel-resize-handle:focus-visible {
  outline: 2px solid var(--site-focus-ring, #fff1ba);
  outline-offset: -2px;
}
.say-panel-resize-tools [data-say-panel-size-reset] {
  touch-action: manipulation;
  height: 22px;
  min-height: 22px;
  padding: 0 8px;
  margin: 0 5px 0 0;
  font-size: calc(11px * var(--site-font-scale, 1));
  line-height: 1.2;
  color: var(--site-aux-button-color, #000);
  background: var(--site-aux-button-bg, #e8e8e8);
  border: 1px solid var(--site-aux-button-border, var(--site-panel-border, #777852));
  border-radius: 4px;
}
.say-panel-resize-tools [data-say-panel-size-reset]:disabled { opacity: .5; }

/* A second input surface shares the one canonical posting form. */
.simple-say-composer[hidden], .simple-say-inline[hidden], .simple-say-settings[hidden] { display: none; }
.simple-say-composer {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    height: 100%;
    min-height: 0;
    gap: 6px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}
body.mobile-say-bottom-enabled.mobile-say-simple .mobile-say-panel {
    background: linear-gradient(var(--site-panel-bg, #232833), var(--site-panel-bg, #232833)), var(--site-bg, #232833);
}
.simple-say-header, .simple-say-recipient, .simple-say-actions { flex: 0 0 auto; margin: 0; }
.simple-say-composer [data-simple-say-errors] { flex: 0 0 auto; }
.simple-say-composer .say-form-error { color: var(--site-error-text, #ffb4b4); }
.simple-say-header { display: flex; align-items: center; gap: 6px; min-width: 0; }
.simple-say-header .say-tabs {
    display: flex; flex: 1 1 auto; flex-wrap: nowrap; min-width: 0;
    margin: 0; overflow-x: auto; overflow-y: hidden; white-space: nowrap; scrollbar-width: thin;
}
.simple-say-header .say-tabs button { flex: 0 0 auto; }
.simple-say-composer [data-simple-say-body] {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 7px;
    resize: none;
    overflow-y: auto;
    line-height: 1.5;
}
.simple-say-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 4px; }
.simple-say-actions [data-simple-say-submit], .simple-say-actions [data-simple-say-save] {
    flex: 0 1 auto; box-sizing: border-box; width: 6.5em; min-width: 0; min-height: 32px; font-size: inherit; white-space: nowrap;
}
.simple-say-recipient { color: var(--site-text, #fff); }
.say-panel-mode-control {
    display: flex; flex: 0 1 auto; align-items: center; gap: 4px; min-width: 0; max-width: 100%;
    margin: 0 0 0 auto; white-space: nowrap; color: inherit;
    font-size: calc(13px * var(--site-font-scale, 1)); line-height: 1.3;
}
.say-panel-mode-control[hidden] { display: none; }
.say-panel-mode-control select {
    min-width: 0; min-height: 32px; max-width: 100%; padding: 2px 5px;
    font: inherit; font-size: calc(16px * var(--site-font-scale, 1));
}
.simple-say-actions .say-panel-mode-control { color: var(--site-text, #fff); }
.say-actions-with-mode {
    --say-mode-action-line-height: 1.35em;
    --say-mode-action-height: calc(var(--say-mode-action-line-height) + 8px);
}
.say-actions-with-mode [data-say-submit],
.say-actions-with-mode .say-panel-mode-control select {
    box-sizing: border-box; height: var(--say-mode-action-height); min-height: 0;
    font-size: inherit; line-height: var(--say-mode-action-line-height); white-space: nowrap;
}
.say-actions-with-mode .say-panel-mode-control { font: inherit; }
.village-page .say-submit-line .say-panel-mode-control { margin: 0 0 0 auto; }
@media (max-width: 700px) {
    .say-panel-mode-control { flex: 0 0 auto; }
    .simple-say-actions { flex-wrap: nowrap; align-items: center; }
    .village-page .say-submit-line.say-actions-with-mode {
        display: grid; grid-template-columns: minmax(0, 1fr) max-content; align-items: center;
    }
    .say-actions-with-mode [data-say-submit] { grid-column: 1; grid-row: 1; justify-self: start; padding: 2px 6px; }
    .say-actions-with-mode .say-panel-mode-control { grid-column: 2; grid-row: 1; }
    .say-actions-with-mode [data-private-talk-target-line] {
        grid-column: 1 / -1; grid-row: 2; min-width: 0;
    }
}
.simple-say-recipient { display: flex; gap: 6px; align-items: center; }
.simple-say-recipient[hidden] { display: none; }
.simple-say-recipient select { min-width: 0; max-width: 100%; flex: 1; }
.mobile-say-toolbar .simple-say-settings {
    position: absolute;
    right: max(4px, env(safe-area-inset-right, 0px));
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    margin: 0;
    padding: 1px;
}

.quick-ui-notification-toggles {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 6px 12px;
}
.quick-ui-notification-toggles > label { display: flex; align-items: center; gap: 4px; min-width: 0; }
.quick-ui-notification-toggles input { flex: 0 0 auto; }

/* Compact the phone controls without changing either editing surface. */
@media (max-width: 700px), (max-width: 950px) and (max-height: 520px) {
    .village-page {
        --phone-say-action-height: max(24px, calc(1.35em + 6px));
    }
    .village-page #say-form .say-tabs button,
    .village-page .simple-say-header .say-tabs button {
        min-height: 24px;
        padding: 3px 7px;
    }
    .village-page #say-form .say-actions-with-mode {
        --say-mode-action-height: var(--phone-say-action-height);
    }
    .village-page #say-form .say-actions-with-mode [data-say-submit] {
        min-height: 24px;
        padding: 1px 4px;
    }
    .village-page .simple-say-actions {
        --simple-action-height: max(22px, calc(1.35em + 4px));
        font-size: .92em;
        line-height: 1.35;
        gap: 4px;
    }
    .village-page .simple-say-actions [data-simple-say-submit],
    .village-page .simple-say-actions [data-simple-say-save],
    .village-page .simple-say-actions .say-panel-mode-control select {
        height: var(--simple-action-height);
        min-height: var(--simple-action-height);
        padding: 1px 3px;
        font: inherit;
    }
    .village-page .simple-say-actions [data-simple-say-submit],
    .village-page .simple-say-actions [data-simple-say-save] { width: auto; }
    .village-page .simple-say-actions .say-panel-mode-control { font: inherit; }
    .village-page .simple-say-header .say-tabs { font-size: .92em; }
    .village-page .simple-say-header .say-tabs button {
        min-height: 22px;
        padding: 2px 6px;
        font-size: inherit;
    }
    .village-page #say-form .say-panel-mode-control select { padding: 1px 4px; }
    .village-page .simple-say-composer { gap: 4px; }
    .village-page #say-form .say-draft-actions { gap: 4px; margin-top: 4px; }
    .village-page #say-form .say-draft-actions > button:not(.say-draft-help-button) {
        min-height: 25px;
        padding: 1px 7px;
    }
    .village-page #say-form .message-formatting-toolbar { gap: 4px; }
    .village-page #say-form .message-formatting-toolbar button { min-height: 30px; padding-inline: 6px; }
    .village-page #say-form .message-insertion-toolbar { gap: 4px; padding-block: 4px; }
    .village-page #say-form .message-insertion-toolbar button { min-height: 25px; padding-inline: 7px; }
    .village-page #say-form select:not(.say-panel-mode-control select),
    .village-page .simple-say-recipient select { min-height: 24px; padding-block: 1px; }
}
/* Selectable site CSS themes. Layout stays in common CSS; themes supply appearance tokens only. */
body {
    background: transparent;
}

.top,
.box,
.message-filter-panel,
.formpl_frame,
.prologue-settings,
.role-panel,
.vlog-message,
.vlog-red-pane {
    border-radius: var(--site-ui-radius, 0);
}

.top {
    border-width: var(--site-top-border-width, 1px);
    border-style: var(--site-top-border-style, solid);
    box-shadow: var(--site-top-shadow, inset 1px 1px 0 #202020, inset -1px -1px 0 #000);
}

.top h1 {
    color: var(--site-title-text, #fff);
    text-shadow: var(--site-title-shadow, var(--site-heading-shadow, 1px 1px 0 #000));
}

.message-filter-panel,
.message-filter-head,
.message-filter-caption {
    background: var(--site-filter-bg, #4b5f8d);
    color: var(--site-ui-text, #fff);
}

.message-filter-participant,
.message-filter-type {
    background: var(--site-filter-item-bg, #000080);
    color: var(--site-ui-text, #fff);
}

.message-filter-memo {
    color: var(--site-ui-muted-text, #cfd7ff);
}

.message-filter-star {
    color: var(--site-ui-highlight-text, #00ffff);
}

.message-filter-star:hover,
.message-filter-star:focus-visible {
    color: var(--site-accent-strong, #ffff00);
}

.village-tabs span,
.village-tabs a.selected,
.log-display-form {
    color: var(--site-text, #fff);
}

.new-message-tools [data-notification-status],
.village-ui-tools [data-village-ui-status] {
    color: var(--site-ui-highlight-text, var(--site-link, #00ffff));
    font-weight: 700;
}

legend {
    color: var(--site-legend-text, #ffff00);
}

.formpl_frame:not(.say-form) {
    background: var(--site-form-bg, #b9ba91);
    color: var(--site-form-text, #000);
    border-radius: var(--site-ui-radius, 0);
}

.message-filter-panel,
.formpl_frame,
.role-panel {
    box-shadow: var(--site-panel-shadow,
            inset 1px 1px 0 rgba(255, 255, 255, .52),
            inset -1px -1px 0 rgba(0, 0, 0, .35),
            3px 3px 0 #000);
}

.say-tabs {
    border: var(--site-say-tabs-border-width, 0) var(--site-say-tabs-border-style, solid)
        var(--site-say-tabs-border, transparent);
    border-bottom: 2px solid var(--say-border);
    border-radius: var(--site-ui-radius, 0) var(--site-ui-radius, 0) 0 0;
    background: var(--site-say-tabs-bg, #000);
    box-shadow: var(--site-say-tabs-shadow, none);
}

.say-tabs button {
    background: var(--tab-bg, #d7d79a);
    border-width: var(--site-say-tab-border-width, 1px);
    border-style: var(--site-say-tab-border-style, solid);
    border-radius: var(--site-button-radius, 4px) var(--site-button-radius, 4px) 0 0;
    box-shadow: var(--site-say-tab-shadow,
            inset 1px 1px 0 rgba(255, 255, 255, .36),
            inset -1px -1px 0 rgba(0, 0, 0, .55));
}

.say-tabs button.selected {
    background: var(--tab-bg, var(--say-bg));
    box-shadow: var(--site-say-tab-selected-shadow,
            inset 1px 1px 0 rgba(255, 255, 255, .58),
            inset -1px 0 0 rgba(0, 0, 0, .24),
            0 2px 0 var(--tab-border, var(--say-border)));
}

.vlog-message {
    --message-anchor-text: var(--site-message-anchor-body-dark, #fff2a8);
    --message-body-anchor-text: var(--site-message-body-link-dark, var(--site-link, #00ffff));
    border-width: var(--site-message-border-width, 2px);
    border-left-width: var(--site-message-border-left-width, var(--site-message-border-width, 2px));
    border-style: var(--site-message-border-style, solid);
    border-radius: var(--site-message-radius, 0);
    box-shadow: var(--site-message-shadow, none);
}

.vlog-public {
    --message-popup-bg: var(--site-public-popup-message-bg, var(--message-bg));
    --message-bg: var(--site-public-log-message-bg, var(--site-public-message-bg, #575b32));
    --message-text: var(--site-public-log-message-text, var(--site-public-message-text, #fff));
    --message-border: var(--site-public-log-message-border, var(--site-public-message-border, #686846));
    --message-anchor-text: var(--site-public-message-anchor-text,
            var(--site-message-anchor-body-dark, #fff2a8));
    --message-body-anchor-text: var(--site-public-message-body-link,
            var(--site-message-body-link-dark, var(--site-link, #00ffff)));
}

.say-form[data-message-type="PUBLIC_SAY"],
.say-tab-public {
    --message-bg: var(--site-public-message-bg, #575b32);
    --message-text: var(--site-public-message-text, #fff);
    --message-border: var(--site-public-message-border, #686846);
    --message-anchor-text: var(--site-public-message-anchor-text,
            var(--site-message-anchor-body-dark, #fff2a8));
    --message-body-anchor-text: var(--site-public-message-body-link,
            var(--site-message-body-link-dark, var(--site-link, #00ffff)));
}

.vlog-action {
    --message-popup-bg: var(--site-action-popup-message-bg, var(--message-bg));
    --message-bg: var(--site-action-log-message-bg,
            var(--site-action-message-bg, var(--site-public-message-bg, #575b32)));
    --message-text: var(--site-action-log-message-text,
            var(--site-action-message-text, var(--site-public-message-text, #fff)));
    --message-border: var(--site-action-log-message-border,
            var(--site-action-message-border, var(--site-public-message-border, #686846)));
    --message-anchor-text: var(--site-action-message-anchor-text,
            var(--site-public-message-anchor-text, var(--site-message-anchor-body-dark, #fff2a8)));
    --message-body-anchor-text: var(--site-action-message-body-link,
            var(--site-public-message-body-link, var(--site-message-body-link-dark, var(--site-link, #00ffff))));
}

.say-tab-action,
.act-form[data-act-speech-type="PUBLIC_SAY"] {
    --message-bg: var(--site-action-message-bg, var(--site-public-message-bg, #575b32));
    --message-text: var(--site-action-message-text, var(--site-public-message-text, #fff));
    --message-border: var(--site-action-message-border, var(--site-public-message-border, #686846));
    --message-anchor-text: var(--site-action-message-anchor-text,
            var(--site-public-message-anchor-text, var(--site-message-anchor-body-dark, #fff2a8)));
    --message-body-anchor-text: var(--site-action-message-body-link,
            var(--site-public-message-body-link, var(--site-message-body-link-dark, var(--site-link, #00ffff))));
}

.vlog-monologue,
.vlog-bookmark,
.say-form[data-message-type="MONOLOGUE"],
.say-tab-monologue,
.say-tab-bookmark {
    --message-popup-bg: var(--site-monologue-popup-message-bg, var(--message-bg));
    --message-bg: var(--site-monologue-message-bg, #454545);
    --message-text: var(--site-monologue-message-text, #fff);
    --message-border: var(--site-monologue-message-border, #d7d7d7);
}

.vlog-wolf,
.say-form[data-message-type="WOLF_WHISPER"],
.say-tab-wolf {
    --message-popup-bg: var(--site-wolf-popup-message-bg, var(--message-bg));
    --message-bg: var(--site-wolf-message-bg, #762525);
    --message-text: var(--site-wolf-message-text, #fff);
    --message-border: var(--site-wolf-message-border, #d7b8b8);
}

.vlog-resonance,
.say-form[data-message-type="RESONANCE"],
.say-tab-resonance {
    --message-popup-bg: var(--site-resonance-popup-message-bg, var(--message-bg));
    --message-bg: var(--site-resonance-message-bg, #1f4f4d);
    --message-text: var(--site-resonance-message-text, #fff);
    --message-border: var(--site-resonance-message-border, #b8d7d5);
}

.vlog-grave,
.vlog-grave-action,
.say-form[data-message-type="GRAVE"],
.act-form[data-act-speech-type="GRAVE"],
.say-tab-grave,
.say-tab-grave-action {
    --message-popup-bg: var(--site-grave-popup-message-bg, var(--message-bg));
    --message-bg: var(--site-grave-message-bg, #242448);
    --message-text: var(--site-grave-message-text, #fff);
    --message-border: var(--site-grave-message-border, #c5c5de);
}

.vlog-backstage,
.vlog-backstage-action,
.say-form[data-message-type="BACKSTAGE"],
.act-form[data-act-speech-type="BACKSTAGE"],
.say-tab-backstage,
.say-tab-backstage-action {
    --message-popup-bg: var(--site-backstage-popup-message-bg, var(--message-bg));
    --message-bg: var(--site-backstage-message-bg, #242448);
    --message-text: var(--site-backstage-message-text, #fff);
    --message-border: var(--site-backstage-message-border, #c5c5de);
}

.vlog-backstage.vlog-spectator-grave,
.vlog-backstage-action.vlog-spectator-grave,
.say-form[data-observer-grave="true"][data-message-type="BACKSTAGE"],
.act-form[data-observer-grave="true"][data-act-speech-type="BACKSTAGE"],
.say-form[data-observer-grave="true"] .say-tab-backstage,
.say-form[data-observer-grave="true"] .say-tab-backstage-action {
    --message-popup-bg: var(--site-grave-popup-message-bg, var(--message-bg));
    --message-bg: var(--site-grave-message-bg, #242448);
    --message-text: var(--site-grave-message-text, #fff);
    --message-border: var(--site-grave-message-border, #c5c5de);
}

.vlog-private-talk,
.say-form[data-message-type="PRIVATE_TALK"],
.say-tab-private-talk {
    --message-popup-bg: var(--site-private-popup-message-bg, var(--message-bg));
    --message-bg: var(--site-private-message-bg, #34243f);
    --message-text: var(--site-private-message-text, #fff);
    --message-border: var(--site-private-message-border, #d7c8e7);
}

.vlog-rank-white,
.say-form[data-message-type="RANK_WHITE"],
.say-tab-rank-white {
    --message-popup-bg: var(--site-rank-white-popup-message-bg, var(--message-bg));
    --message-bg: var(--site-rank-white-message-bg, #eee);
    --message-text: var(--site-rank-white-message-text, #000);
    --message-border: var(--site-rank-white-message-border, #ddd);
    --message-anchor-text: var(--site-message-anchor-body-light, #073849);
    --message-body-anchor-text: var(--site-message-body-link-light, var(--site-link, #073849));
}

.vlog-rank-black,
.say-form[data-message-type="RANK_BLACK"],
.say-tab-rank-black {
    --message-popup-bg: var(--site-rank-black-popup-message-bg, var(--message-bg));
    --message-bg: var(--site-rank-black-message-bg, #222);
    --message-text: var(--site-rank-black-message-text, #fff);
    --message-border: var(--site-rank-black-message-border, #777);
}

.vlog-admin-message {
    --message-bg:
            repeating-linear-gradient(
                    0deg,
                    rgba(255, 244, 218, .09) 0 1px,
                    transparent 1px 4px),
            repeating-linear-gradient(
                    90deg,
                    rgba(74, 28, 0, .08) 0 1px,
                    transparent 1px 5px),
            linear-gradient(
                    180deg,
                    rgba(255, 220, 165, .08) 0%,
                    rgba(92, 36, 0, .10) 100%),
            var(--site-admin-message-base, #e2820c);
    --message-text: #1a1205;
    --message-border: #7e4408;
    --message-anchor-text: #3d2202;
    --message-body-anchor-text: #052b42;
}

.vlog-public,
.vlog-action,
.vlog-monologue,
.vlog-bookmark,
.vlog-wolf,
.vlog-resonance,
.vlog-grave,
.vlog-grave-action,
.vlog-backstage,
.vlog-backstage-action,
.vlog-private-talk,
.vlog-rank-white,
.vlog-rank-black,
.vlog-message.vlog-admin-message {
    border-color: var(--message-border);
    background: var(--message-bg);
    color: var(--message-text);
}

/* Only the floating card uses opaque tokens; inline references keep the log surface. */
.message-popup .message-popup-content > :is(
        .vlog-public, .vlog-action, .vlog-monologue, .vlog-bookmark,
        .vlog-wolf, .vlog-resonance, .vlog-grave, .vlog-grave-action,
        .vlog-backstage, .vlog-backstage-action, .vlog-private-talk,
        .vlog-rank-white, .vlog-rank-black) {
    background: var(--message-popup-bg, var(--message-bg));
}

.vlog-message.vlog-admin-message {
    border-width: 1px;
    border-left-width: 4px;
    border-style: solid;
    border-left-color: #f6bf44;
    border-radius: 0;
    box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .08),
            inset 0 -1px 0 rgba(92, 36, 0, .14);
    text-shadow: none;
}

.vlog-message .message-anchor,
.vlog-message .message-anchor:visited,
.vlog-message .message-anchor:hover,
.vlog-message .message-anchor:active,
.vlog-message .message-external-link,
.vlog-message .message-external-link:visited,
.vlog-message .message-external-link:hover,
.vlog-message .message-external-link:active {
    color: var(--message-body-anchor-text,
            var(--site-message-body-link-dark, var(--site-link, #00ffff)));
}

.vlog-message .message-anchor:hover,
.vlog-message .message-anchor:focus-visible,
.vlog-message .message-external-link:hover,
.vlog-message .message-external-link:focus-visible {
    color: var(--message-body-anchor-text,
            var(--site-message-body-link-dark, var(--site-link, #00ffff)));
}

.vlog-message .message-format-color-background {
    color: color-mix(in srgb, var(--message-text) 8%, transparent);
}

@supports not (color: color-mix(in srgb, white 8%, transparent)) {
    .vlog-message .message-format-color-background {
        color: transparent;
        text-shadow: 0 0 1px var(--message-text);
    }
}

.vlog-message.vlog-village-builder {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.say-form[data-message-type="PUBLIC_SAY"],
.say-form[data-message-type="MONOLOGUE"],
.say-form[data-message-type="WOLF_WHISPER"],
.say-form[data-message-type="RESONANCE"],
.say-form[data-message-type="GRAVE"],
.say-form[data-message-type="BACKSTAGE"],
.say-form[data-message-type="PRIVATE_TALK"],
.say-form[data-message-type="RANK_WHITE"],
.say-form[data-message-type="RANK_BLACK"] {
    --say-bg: var(--message-bg);
    --say-text: var(--message-text);
    --say-border: var(--message-border);
}

/* Match the actual typing surfaces to the selected speech type, including direct editing. */
.say-form [data-simple-say-body],
.say-form [data-say-body],
.say-form .formatting-direct-input {
    background: var(--say-bg, var(--site-public-message-bg, #575b32));
    color: var(--say-text, var(--site-public-message-text, #fff));
    border-color: var(--say-border, var(--site-public-message-border, #686846));
    caret-color: var(--say-text, var(--site-public-message-text, #fff));
}

.say-tab-public,
.say-tab-action,
.say-tab-monologue,
.say-tab-bookmark,
.say-tab-wolf,
.say-tab-resonance,
.say-tab-grave,
.say-tab-grave-action,
.say-tab-backstage,
.say-tab-backstage-action,
.say-tab-private-talk,
.say-tab-rank-white,
.say-tab-rank-black {
    --tab-bg: var(--message-bg);
    --tab-text: var(--message-text);
    --tab-border: var(--message-border);
}

.formpl_frame.act-form {
    border-color: var(--message-border);
    background: var(--message-bg);
    color: var(--message-text);
}

.act-form :is([data-act-body], [data-act-template], [data-act-disabled-placeholder]) {
    background: var(--message-bg);
    color: var(--message-text);
    border-color: var(--message-border);
    caret-color: var(--message-text);
}

.prologue-settings {
    border-color: var(--site-action-message-border, var(--site-public-message-border, #686846));
    background: var(--site-action-message-bg, var(--site-public-message-bg, #575b32));
    color: var(--site-action-message-text, var(--site-public-message-text, #fff));
}

.say-form .form-help,
.act-form .form-help,
.prologue-settings .form-help {
    color: currentColor;
}

.act-form [data-silence-act-notice] {
    display: block;
    margin: .75rem 0;
    padding: .6rem .75rem;
    border: 1px solid var(--site-result-unknown-border, #b29a48);
    border-left-width: 4px;
    border-radius: var(--site-button-radius, 4px);
    background: var(--site-result-unknown-bg, #efe5bd);
    color: var(--site-result-unknown-text, #665514);
    font-weight: 700;
    line-height: 1.5;
}

.act-form [data-silence-act-notice]::before {
    content: "⚠";
    margin-right: .35em;
}

.act-form [data-silence-act-notice][hidden] {
    display: none;
}

.act-fieldset,
.prologue-setting-form fieldset {
    border-color: var(--site-public-message-border, #686846);
}

.act-fieldset,
.prologue-profile-fieldset {
    border-radius: var(--site-ui-radius, 0);
}

.vlog-body {
    gap: var(--site-log-gap, 14px);
}

.vlog-img {
    flex-basis: var(--site-log-chip-width, 78px);
}

.vlog-img img {
    width: auto;
    height: auto;
    max-width: var(--site-log-chip-width, 78px);
    max-height: var(--site-log-chip-max-height, 118px);
}

.vlog-message.vlog-with-chip .vlog-header,
.vlog-message.vlog-with-chip .vlog-footer {
    padding-left: 0;
}

.vlog-message.vlog-without-chip .vlog-header,
.vlog-message.vlog-without-chip .vlog-footer {
    padding-left: 12px;
}

.vlog-message .message-menu-trigger,
.vlog-message .message-menu-trigger:visited,
.vlog-message .message-menu-trigger:hover,
.vlog-message .message-menu-trigger:active,
.vlog-message .message-number-insert {
    border: 0;
    border-radius: 0;
    padding: 0;
    background: transparent;
    color: var(--message-anchor-text, var(--site-message-anchor-body-dark, #fff2a8));
    font-weight: normal;
    line-height: 1.3;
    text-decoration: none;
}

.vlog-message .message-number-insert {
    font-weight: inherit;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-thickness: .08em;
    text-underline-offset: .16em;
}

.vlog-message .message-menu-trigger:hover,
.vlog-message .message-menu-trigger:focus-visible,
.vlog-message .message-number-insert:hover,
.vlog-message .message-number-insert:focus-visible {
    border-color: transparent;
    background: transparent;
    color: var(--message-anchor-text, var(--site-message-anchor-body-dark, #fff2a8));
}

.vlog-message .message-menu-trigger:focus-visible,
.vlog-message .message-number-insert:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.role-panel {
    background: var(--role-panel-shell);
    border-color: var(--role-panel-border);
    border-radius: var(--site-ui-radius, 0);
    overflow: hidden;
}

.role-panel--wolf-side,
.role-panel--fox-side,
.role-panel--resonator-side,
.role-panel--orange-side,
.role-panel--grave-side {
    background: var(--role-panel-shell);
}

.role-panel-list,
.role-panel-intro,
.role-panel-section,
.role-ability-form,
.role-panel-text,
.role-ground-list,
.role-request-preview-note {
    /*
     * Role surfaces must use the matching role palette as a set. Applying a
     * theme-only background here can combine a pale surface with a light
     * grave-side foreground (or the inverse) and make the role text unreadable.
     */
    background: var(--role-panel-content);
    color: var(--role-panel-ink);
    border-radius: var(--site-button-radius, 0);
}

.role-panel-intro,
.role-panel-section p,
.role-panel-text,
.role-request-preview-note,
.role-preview-ability-note,
.message-filter-caption,
.message-filter-memo {
    font-size: calc(1rem * var(--site-description-scale, 1));
}

.message-formatting-toolbar button,
.message-filter-actions button,
.message-filter-section button[data-message-focus-open],
.action-form button,
.act-form button,
.prologue-settings button {
    border-radius: var(--site-button-radius, 0);
    background: var(--site-aux-button-bg, #e8e8e8);
    color: var(--site-aux-button-color, #000);
}

.message-formatting-toolbar button,
.message-filter-actions button,
.message-filter-section button[data-message-focus-open] {
    min-height: 26px;
    padding-block: 1px;
}

.box h2 {
    border-left-width: var(--site-heading-border-left-width, 8px);
    border-left-style: var(--site-heading-border-left-style, solid);
    border-bottom-width: var(--site-heading-border-bottom-width, 1px);
    border-bottom-style: var(--site-heading-border-bottom-style, solid);
    border-right: var(--site-heading-border-right, 0);
    border-top: var(--site-heading-border-top, 0);
    border-radius: var(--site-heading-radius, 0);
    border-image: var(--site-heading-border-image, none);
    background: var(--site-heading-bg, transparent);
    color: var(--site-heading-text, #fff);
    box-shadow: var(--site-heading-shadow-box, 0 1px 0 #111);
}

.village-list {
    border-width: var(--site-table-outer-border-width, 1px);
    border-style: var(--site-table-outer-border-style, solid);
    background: var(--site-table-bg, var(--site-page-surface, #000));
    color: var(--site-table-text, var(--site-text, #fff));
    box-shadow: var(--site-table-shadow, none);
}

.village-list th,
.village-list td {
    border-width: var(--site-table-cell-border-width, 1px);
    border-style: var(--site-table-cell-border-style, solid);
}

.village-list th {
    background: var(--site-table-header-bg, transparent);
    color: var(--site-table-header-text, #fff);
}

.village-list tbody tr:nth-child(odd) > td {
    background: var(--site-table-row-odd-bg, transparent);
}

.village-list tbody tr:nth-child(even) > td {
    background: var(--site-table-row-even-bg, transparent);
}

.role-result-table,
.role-ground-list .village-list {
    border-color: var(--role-panel-line);
    background: var(--role-panel-content);
    color: var(--role-panel-ink);
    box-shadow: none;
}

.role-result-table th,
.role-result-table td,
.role-ground-list .village-list th,
.role-ground-list .village-list td {
    border-color: var(--role-panel-line);
    background: var(--role-panel-content);
    color: var(--role-panel-ink);
}

/*
 * Keep the role palette above the generic odd/even table-row palette. The
 * generic selector is intentionally specific, so role tables need an equally
 * specific contract instead of depending on source order.
 */
.role-result-table tbody tr:nth-child(odd) > td,
.role-result-table tbody tr:nth-child(even) > td,
.role-ground-list .village-list tbody tr:nth-child(odd) > td,
.role-ground-list .village-list tbody tr:nth-child(even) > td {
    border-color: var(--role-panel-line);
    background: var(--role-panel-content);
    color: var(--role-panel-ink);
}

.village-log-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    margin-bottom: 10px;
}

.village-log-heading h2 {
    flex: 1 1 12em;
    margin-bottom: 0;
}

.epilogue-results-jump {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    box-sizing: border-box;
    border: 1px solid var(--site-panel-border, #4d4d2e);
    border-radius: var(--site-button-radius, 0);
    padding: 3px 8px;
    background: var(--site-aux-button-bg, #e8e8e8);
    color: var(--site-aux-button-color, #000);
    font-size: .86rem;
    font-weight: bold;
    text-decoration: none;
}

.epilogue-results-jump:hover,
.epilogue-results-jump:focus-visible {
    outline: 2px solid var(--site-accent-strong, #ffff00);
    outline-offset: 2px;
}

.epilogue-participant-results {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    scroll-margin-top: 18px;
    margin: 14px 0;
    border: 1px solid var(--site-result-border, var(--site-panel-border, #4d4d2e));
    border-radius: var(--site-ui-radius, 0);
    padding: 8px;
    background: var(--site-result-bg, var(--site-panel-bg, #070707));
    color: var(--site-text, #fff);
}

.epilogue-participant-results h3 {
    margin: 0 0 8px;
    font-size: 1rem;
    color: var(--site-text, #fff);
}

.epilogue-result-table-scroll {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    box-shadow: inset -12px 0 10px -12px var(--site-accent-strong, #ffff00);
}

.epilogue-result-table-scroll:focus-visible {
    outline: 2px solid var(--site-accent-strong, #ffff00);
    outline-offset: -2px;
}

.epilogue-result-table {
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
    table-layout: auto;
    font-size: .84rem;
}

.epilogue-result-table th,
.epilogue-result-table td {
    border: 1px solid var(--site-result-border, var(--site-table-border, #d7d79a));
    padding: 4px 6px;
    vertical-align: middle;
    overflow-wrap: anywhere;
}

.epilogue-result-table thead th {
    background: var(--site-result-header-bg, var(--site-ui-surface, #070707));
    text-align: left;
    white-space: nowrap;
}

.epilogue-result-group th {
    background: var(--site-result-group-bg, rgba(255, 255, 255, .1));
    font-size: .92rem;
    text-align: left;
}

.epilogue-result-participant {
    min-width: 0;
}

.epilogue-result-participant-content {
    display: flex;
    align-items: center;
    gap: 5px;
}

.epilogue-result-participant img {
    display: block;
    flex: 0 0 auto;
    width: auto;
    max-width: 40px;
    height: auto;
    max-height: 40px;
    object-fit: contain;
}

.epilogue-result-participant-text {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.epilogue-result-handle,
.epilogue-result-faction,
.epilogue-result-role-request {
    display: block;
    font-size: .86em;
    font-weight: normal;
}

.epilogue-result-faction {
    margin-top: 2px;
    white-space: nowrap;
}

.epilogue-result-tag-members {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: .86em;
}

.public-profile-tag-members {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
}

.epilogue-result-role > span {
    display: block;
    white-space: nowrap;
}

.epilogue-result-role-request {
    color: var(--site-muted-text, currentColor);
}

.village-start-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18em), 1fr));
    gap: 14px;
}

.village-start-action {
    box-sizing: border-box;
    padding: 12px;
    border: 1px solid var(--site-line, currentColor);
}

.village-start-action h3 {
    margin-top: 0;
}

.village-start-action input[type="date"] {
    box-sizing: border-box;
    display: block;
    width: 100%;
    max-width: 14em;
    margin-top: 6px;
}


.epilogue-result-outcome {
    display: inline-block;
    min-width: 4em;
    box-sizing: border-box;
    border: 1px solid;
    border-radius: var(--site-button-radius, 0);
    padding: 2px 5px;
    text-align: center;
    white-space: nowrap;
}

.epilogue-result-outcome--win {
    border-color: var(--site-result-win-border, #74c98a);
    background: var(--site-result-win-bg, #203f2b);
    color: var(--site-result-win-text, #e8ffe8);
    font-weight: bold;
}

.epilogue-result-outcome--loss {
    border-color: var(--site-result-loss-border, #cf7777);
    background: var(--site-result-loss-bg, #472525);
    color: var(--site-result-loss-text, #ffdada);
}

.epilogue-result-outcome--not-participating {
    border-color: var(--site-result-neutral-border, #777);
    background: var(--site-result-neutral-bg, #333);
    color: var(--site-result-neutral-text, #f1f1f1);
}

.epilogue-result-outcome--undetermined {
    border-color: var(--site-result-unknown-border, #c9ad55);
    background: var(--site-result-unknown-bg, #463f22);
    color: var(--site-result-unknown-text, #fff4b0);
}

@media (max-width: 700px) {
    .epilogue-result-table {
        font-size: .78rem;
    }

    .epilogue-result-table th,
    .epilogue-result-table td {
        padding: 3px 4px;
    }

    .epilogue-result-table thead th {
        white-space: normal;
    }

    .epilogue-result-participant-content {
        gap: 3px;
    }

    .epilogue-result-participant img {
        max-width: 32px;
        max-height: 32px;
    }

    .epilogue-result-handle,
    .epilogue-result-faction,
    .epilogue-result-role-request {
        font-size: .78em;
    }
}

@media (max-width: 430px) {
    html {
        font-size: calc(13px * var(--site-font-scale, 1));
    }

    body {
        --village-log-base-font-size: 13px;
        --mobile-log-font-size: calc(var(--village-log-base-font-size) * var(--site-font-scale, 1));
        --mobile-log-meta-font-size: calc(11px * var(--site-font-scale, 1));
        --mobile-log-line-height: 1.26;
        --mobile-log-photo-column: 64px;
        --mobile-log-photo-max-width: 58px;
        --mobile-log-photo-max-height: 90px;
        --mobile-log-gap: 6px;
        --mobile-log-margin: 5px;
        --mobile-log-padding: 6px;
        --mobile-say-textarea-height: 112px;
    }

    .village-page .page {
        padding-left: 6px;
        padding-right: 6px;
    }

    .village-page .top {
        margin-left: -6px;
        margin-right: -6px;
    }

    .village-page .village-room {
        margin-left: -6px;
        margin-right: -6px;
        padding-left: 6px;
        padding-right: 6px;
    }

    .village-page .village-tabs,
    .village-page .log-display-form,
    .village-page .message-index {
        font-size: calc(13px * var(--site-font-scale, 1));
    }

    .village-page .log-display-form select,
    .village-page .log-display-form button,
    .village-page .say-tabs button {
        font-size: calc(13px * var(--site-font-scale, 1));
    }

    .village-page .log-search-form input {
        flex-basis: 11em;
    }

    .village-page .vlog-system-text,
    .message-window-page .vlog-system-text,
    .message-popup-content .vlog-system-text,
    .village-page .vlog-action-line,
    .message-window-page .vlog-action-line,
    .message-popup-content .vlog-action-line {
        padding: 5px 7px;
    }

}

@media (max-width: 360px) {
    html {
        font-size: calc(12px * var(--site-font-scale, 1));
    }

    body {
        --village-log-base-font-size: 12px;
        --mobile-log-font-size: calc(var(--village-log-base-font-size) * var(--site-font-scale, 1));
        --mobile-log-meta-font-size: calc(10px * var(--site-font-scale, 1));
        --mobile-log-line-height: 1.25;
        --mobile-log-photo-column: 58px;
        --mobile-log-photo-max-width: 52px;
        --mobile-log-photo-max-height: 80px;
        --mobile-log-gap: 6px;
        --mobile-log-margin: 5px;
        --mobile-log-padding: 6px;
        --mobile-say-textarea-height: 96px;
    }

    .village-page .village-tabs,
    .village-page .log-display-form,
    .village-page .message-index {
        font-size: calc(12px * var(--site-font-scale, 1));
    }

    .village-page .log-display-form select,
    .village-page .log-display-form button,
    .village-page .say-tabs button {
        font-size: calc(12px * var(--site-font-scale, 1));
    }

    .village-page .log-search-form input {
        flex-basis: 100%;
    }

    .village-page .log-search-form input[name="words"] {
        flex-basis: 100%;
    }

}

@media (max-width: 700px) and (max-height: 700px) {
    body {
        --mobile-log-margin: 5px;
        --mobile-say-textarea-height: 92px;
    }

}
.chip-catalog-page {
    box-sizing: border-box;
}

.chip-catalog-index {
    padding-top: 30px;
}

.chip-catalog-selector {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 14px 0 28px;
}

.chip-catalog-selector label {
    flex: 0 0 auto;
    margin: 0;
}

.chip-catalog-selector select {
    min-width: 0;
    flex: 1 1 220px;
}

.chip-catalog-selector button {
    flex: 0 0 auto;
}

.chip-catalog-byline {
    line-height: 1.5;
}

.chip-catalog-variant-heading {
    margin: 0.75rem 0;
}

.chip-catalog-selection-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 0.5rem 0;
}

.chip-catalog-filter-help {
    margin: 14px 8px 20px;
    font-weight: bold;
}

.chip-catalog-character-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 36px 14px;
    align-items: start;
    padding: 10px 18px 0;
}

.chip-catalog-character-card {
    min-width: 0;
    text-align: center;
}

.chip-catalog-character-images {
    display: grid;
    justify-items: center;
    row-gap: 8px;
}

.chip-catalog-character-images img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

/* Preserve natural content dimensions and reserve the same space before loading. */
.chip-catalog-character-images img[width][height] {
    box-sizing: content-box;
}

.chip-catalog-character-images img[width][height].chip-set-image-border {
    max-width: calc(100% - 2px);
}

.chip-catalog-character-title,
.chip-catalog-character-name {
    margin: 0;
    color: #fff;
    font-size: .82rem;
    font-weight: bold;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.chip-catalog-character-title {
    margin-top: 3px;
}

.chip-catalog-navigation {
    margin: 28px 0 0;
}

@media (max-width: 520px) {
    .chip-catalog-selector {
        align-items: stretch;
        flex-wrap: wrap;
    }

    .chip-catalog-selector label {
        flex-basis: 100%;
    }

    .chip-catalog-character-grid {
        gap: 28px 10px;
        padding-inline: 4px;
    }
}

.admin-notification-dialog {
    width: min(38rem, calc(100vw - 2rem));
    max-height: min(80vh, 42rem);
    overflow: auto;
    border: 2px solid var(--site-panel-border, #8f552d);
    border-radius: .35rem;
    padding: 1rem 1.25rem;
    color: var(--site-ui-text, #1f1712);
    background: var(--site-ui-surface, #fff8ea);
}

.admin-notification-dialog::backdrop {
    background: rgb(0 0 0 / 58%);
}

.admin-work-dialog {
    box-sizing: border-box;
    width: min(34rem, calc(100vw - 2rem));
    background: var(--site-error-surface, #fff8ea);
}

.admin-work-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5em;
}

.admin-work-dialog [data-admin-work-status]:empty {
    display: none;
}

.admin-notification-dialog li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .35rem 1rem;
    margin-block: .65rem;
}

.message-moderation-summary {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .35rem .8rem;
    margin: -.35rem .5rem .8rem;
    font-size: .9rem;
}

/* Color preference applies to the typing area from Issue #1175. */
body[data-message-composer-color-mode="NONE"] .say-form [data-simple-say-body],
body[data-message-composer-color-mode="NONE"] .say-form [data-say-body],
body[data-message-composer-color-mode="NONE"] .say-form .formatting-direct-input,
body[data-message-composer-color-mode="NONE"] .act-form :is([data-act-body], [data-act-template], [data-act-disabled-placeholder]) {
    background: #fff;
    color: #29262a;
    border-color: #888;
    caret-color: #29262a;
}

body[data-message-composer-color-mode="PALE"] :is(.say-form, .act-form) {
    --composer-pale-input-bg: #fff;
}

body[data-message-composer-color-mode="PALE"] .say-form [data-simple-say-body],
body[data-message-composer-color-mode="PALE"] .say-form [data-say-body],
body[data-message-composer-color-mode="PALE"] .say-form .formatting-direct-input,
body[data-message-composer-color-mode="PALE"] .act-form :is([data-act-body], [data-act-template], [data-act-disabled-placeholder]) {
    background: var(--composer-pale-input-bg);
    color: #29262a;
    border-color: #aaa6a1;
    caret-color: #29262a;
}

body[data-message-composer-color-mode="PALE"] .say-form[data-message-type="PUBLIC_SAY"] {
    --composer-pale-input-bg: #fff;
}

body[data-message-composer-color-mode="PALE"] .say-form[data-message-type="MONOLOGUE"] {
    --composer-pale-input-bg: #dadada;
}

body[data-message-composer-color-mode="PALE"] .say-form[data-message-type="WOLF_WHISPER"] {
    --composer-pale-input-bg: #e4d3d3;
}

body[data-message-composer-color-mode="PALE"] .say-form[data-message-type="RESONANCE"] {
    --composer-pale-input-bg: #d2dcdb;
}

body[data-message-composer-color-mode="PALE"] .say-form[data-message-type="GRAVE"],
body[data-message-composer-color-mode="PALE"] .act-form[data-act-speech-type="GRAVE"] {
    --composer-pale-input-bg: #d3e0ed;
}

body[data-message-composer-color-mode="PALE"] .say-form[data-message-type="BACKSTAGE"],
body[data-message-composer-color-mode="PALE"] .act-form[data-act-speech-type="BACKSTAGE"] {
    --composer-pale-input-bg: #d3e0ed;
}

body[data-message-composer-color-mode="PALE"] .say-form[data-message-type="PRIVATE_TALK"] {
    --composer-pale-input-bg: #d6d3d9;
}

body[data-message-composer-color-mode="PALE"] .say-form[data-message-type="RANK_WHITE"] {
    --composer-pale-input-bg: #fcfcfc;
}

body[data-message-composer-color-mode="PALE"] .say-form[data-message-type="RANK_BLACK"] {
    --composer-pale-input-bg: #d3d3d3;
}
.error,
.error-message,
.form-error,
.form-errors,
.chip-image-border-error,
.public-profile-field-error,
[data-feedback-tone="error"] {
    color: var(--feedback-error-text, var(--site-error-text, #ffb4b4));
    font-weight: 700;
    overflow-wrap: anywhere;
}

.new-message-tools [data-feedback-tone="error"],
.village-ui-tools [data-feedback-tone="error"] {
    color: var(--feedback-error-text, var(--site-error-text, #ffb4b4));
}

[data-feedback-tone="error"],
[data-feedback-tone="warning"] {
    font-weight: 700;
    overflow-wrap: anywhere;
}

[data-feedback-tone="warning"] {
    color: var(--site-warning-text, #ffd391);
}

.admin-audit-warning,
.warning-box,
.new-message-tools [data-feedback-tone="warning"],
.village-ui-tools [data-feedback-tone="warning"] {
    color: var(--site-warning-text, #ffd391);
}

.role-panel {
    --feedback-error-text: var(--role-panel-error-text, #50000e);
}

.say-form,
.act-form {
    --feedback-error-text: #fff0f0;
}

.say-form[data-message-type="PUBLIC_SAY"],
.act-form[data-act-speech-type="PUBLIC_SAY"] {
    --feedback-error-text: var(--site-public-composer-error-text, #fff0f0);
}

.say-form[data-message-type="RANK_WHITE"] {
    --feedback-error-text: #b00020;
}

/* A standalone failure message does not need a second panel around it. */
.box.error {
    border: 0;
    border-radius: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
}