html,
body {
    min-height: 100%;
}

body {
    margin: 0;
    background: #fbf7ee;
    color: #800000;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Yu Gothic", "MS PGothic", "IPAMonaPGothic", Arial, sans-serif;
    font-size: 12pt;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
}

form {
    margin: 0;
}

hr {
    border: 0;
    border-top: 1px solid #d8b8ac;
}

a { color: #00e; }
a:visited { color: #00e; }
a:hover,
a:active { color: #f00; }

header {
    position: relative;
    min-height: 20pt;
    padding: 4px 10px;
    border-bottom: 1px solid #d8b8ac;
    background: #fbf7ee;
    text-align: right;
}

.brand {
    position: absolute;
    left: 0;
    right: 0;
    color: #800000 !important;
    font-weight: 700;
    font-size: 160%;
    line-height: 20pt;
    text-align: center;
    text-decoration: none;
    pointer-events: auto;
}

header nav {
    display: inline;
    margin-left: 1em;
    position: relative;
    z-index: 1;
}

header nav a {
    margin-right: .65em;
}

header nav a.on {
    color: #800000;
    font-weight: 700;
}

.wrap {
    width: auto;
    margin: 8px 4px 32px;
}

.logo {
    text-align: center;
    margin: 18px 0 4px;
}

.logo h1 {
    display: inline-block;
    margin: 0;
    color: #800000;
    font-size: 160%;
    line-height: 1;
    letter-spacing: 0;
    text-shadow: none;
}

.intro {
    max-width: 12em;
    text-align: center;
    margin: 0 auto 18px;
}

.board-intro {
    max-width: 36em;
}

.board-intro h1 {
    color: #800000;
    margin: 8px 0 3px;
    font-size: 160%;
}

.board-source {
    margin: 6px 0 0;
    padding: 6px 10px;
    background: #fff4f4;
    border-left: 3px solid #800000;
    font-size: 90%;
}

.board-source a {
    color: #800000;
    font-weight: bold;
}

.tableContainer {
    overflow-x: auto;
    margin: 12px 0 20px;
}

.boardTable {
    border: 1px outset;
    line-height: 1.5em;
    margin-left: auto;
    margin-right: auto;
    background: #fbf7ee;
}

.boardTable td,
.boardTable th {
    border: 1px inset;
    padding: 2px 10px;
    vertical-align: top;
}

.boardTable th {
    color: #cc1105;
    font-size: 1em;
    text-align: left;
}

.boardTable ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.boardTable li {
    margin-bottom: 6px;
}

.board-tagline {
    color: #789;
    font-size: 11px;
    line-height: 1.3;
}

.postform {
    display: block;
    width: auto;
    margin: 0 auto 14px;
    border: 0;
    background: transparent;
    padding: 0;
}

.ftbl {
    table-layout: fixed;
    width: 560px;
    margin: 0 auto;
    border-collapse: separate;
    border-spacing: 0;
}

.ftdc {
    width: 5.5em;
    white-space: nowrap;
    background-color: #eeaa88;
}

.ftbl td {
    padding: 1px;
    vertical-align: top;
}

.postform input,
.postform textarea,
.postform select {
    border: 1px inset;
    background: #fff;
    color: #000;
    padding: 2px 4px;
    font: inherit;
}

.postform input {
    max-width: 330px;
}

.postform textarea {
    width: 438px;
    height: 150px;
    min-height: 150px;
    resize: vertical;
}

button,
input[type="submit"] {
    border: 1px outset;
    background: #eee;
    color: #000;
    font: inherit;
    padding: 1px 8px;
    cursor: pointer;
}

.postform button {
    margin-left: 2px;
    margin-top: 0;
}

.thread {
    border-top: 1px solid #e0c7bc;
    padding: 9px 0 12px;
    clear: both;
}

.post {
    min-height: 44px;
    margin: 0 0 7px;
    padding: 6px 11px 7px 9px;
    background: #f3e4dc;
    border-left: 2px solid #d9bfb7;
    border-radius: 0 3px 3px 0;
    overflow: auto;
}

.post.op,
.thread > .post:first-child {
    background: transparent;
    border: 0;
    padding-top: 4px;
}

.meta {
    margin-bottom: 2px;
    color: #800000;
    line-height: 1.35;
}

.subject {
    color: #cc1105;
    font-weight: 700;
}

.name {
    color: #117743;
    font-weight: 700;
    margin: 0 5px;
}

.subject a {
    color: inherit;
    text-decoration: none;
}

.subject a:hover {
    text-decoration: underline;
}

.file {
    float: left;
    margin: 2px 22px 10px 0;
    padding: 3px;
    background: #fbf7ee;
    border: 1px solid #ead2c4;
}

.file img {
    max-width: 220px;
    max-height: 220px;
    border: 0;
}

.media-file {
    display: block;
    max-width: min(520px, 100%);
}

.media-file video {
    display: block;
    max-width: min(520px, 100%);
    max-height: 360px;
    margin-top: 3px;
    border: 1px solid #999;
    background: #000;
}

.audio-file {
    display: block;
    max-width: min(520px, 100%);
}

.audio-file audio {
    display: block;
    width: min(420px, 100%);
    margin-top: 3px;
}

.basedlii-comment-form {
    display: table;
    margin: 0 auto 14px;
}

.basedlii-comment-form textarea {
    width: 438px;
    height: 110px;
    min-height: 110px;
    border: 1px inset;
    background: #fff;
    color: #000;
    padding: 2px 4px;
    font: inherit;
    resize: vertical;
}

.basedlii-comment-form button {
    margin-top: 3px;
}

.flash-file {
    display: block;
    width: min(620px, 100%);
}

.flash-stage {
    display: block;
    max-width: 100%;
    margin-top: 3px;
    background: #111;
    border: 1px solid #999;
}

.flash-stage.is-unloaded {
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(550px, 100%);
    min-height: 220px;
}

.flash-load {
    border: 1px outset;
    background: #eee;
    color: #000;
    font: inherit;
    font-weight: 700;
    padding: 4px 14px;
    cursor: pointer;
}

.flash-stage embed,
.flash-stage object,
.flash-stage ruffle-player {
    display: block;
    width: min(550px, 100%);
    max-width: 100%;
    aspect-ratio: 11 / 8;
    min-height: 280px;
    background: #000;
}

.media-shell {
    display: inline-block;
    max-width: 100%;
    vertical-align: top;
}

.media-shell img,
.media-shell video,
.media-shell iframe,
.media-shell embed,
.media-shell object,
.media-shell ruffle-player {
    display: block;
}

.media-toolbar {
    display: flex;
    gap: 4px;
    margin-top: 2px;
    justify-content: flex-start;
}

.media-button {
    border: 0;
    background: transparent;
    color: #00e;
    font: inherit;
    font-size: 10pt;
    line-height: 1.2;
    padding: 1px 2px;
    cursor: pointer;
}

.media-button:hover {
    color: #f00;
    text-decoration: underline;
}

.media-shell.is-theater {
    position: fixed;
    z-index: 10000;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: none;
    padding: 18px;
    background: rgba(0, 0, 0, .88);
    box-sizing: border-box;
}

.media-shell.is-theater img,
.media-shell.is-theater video,
.media-shell.is-theater iframe,
.media-shell.is-theater embed,
.media-shell.is-theater object,
.media-shell.is-theater ruffle-player {
    width: auto !important;
    height: auto !important;
    max-width: 92vw !important;
    max-height: 78vh !important;
    background: #000;
    object-fit: contain;
}

.media-shell.is-theater .media-toolbar {
    margin-top: 8px;
}

.media-shell.is-theater .media-button {
    border-color: #777;
    background: #111;
    color: #fff;
}

.filemeta {
    display: inline;
    margin-bottom: 0;
    font-size: 11pt;
}

.body {
    max-width: 800px;
    min-width: 150px;
    margin: .85em 40px;
    overflow-wrap: anywhere;
}

/* text-only posts (e.g. news) have no floated thumbnail, so drop the left gutter */
.post.no-file .body {
    margin-left: 6px;
}

/* clamp long OP bodies in board-index previews, fade out the overflow */
.thread .post.op .body {
    position: relative;
    max-height: 10em;
    overflow: hidden;
}

.thread .post.op .body::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2.2em;
    background: linear-gradient(rgba(255, 255, 238, 0), #fbf7ee);
    pointer-events: none;
}

.threadlink,
.subnav {
    text-align: right;
    margin: 4px 0;
}

.thread-actions {
    color: #800000;
}

.thread-actions a {
    margin-left: 4px;
}

.meta .thread-actions a {
    color: #800000;
    text-decoration: none;
}

.meta .thread-actions a:hover {
    text-decoration: underline;
}

.omitted {
    clear: both;
    margin: 5px 0 5px 52px;
    color: #333;
    font-size: 10.5pt;
}

.pager {
    clear: both;
    text-align: center;
    margin: 16px 0 8px;
    padding-top: 10px;
    border-top: 1px solid #d8b8ac;
    font-size: 11pt;
}

.pager a,
.pager .cur,
.pager .gap {
    display: inline-block;
    min-width: 1.4em;
    margin: 0 2px;
    padding: 1px 6px;
    text-align: center;
}

.pager a {
    border: 1px solid #d9bfb7;
    background: #fff4f4;
    text-decoration: none;
}

.pager a:hover {
    border-color: #800000;
    background: #eecccc;
}

.pager .cur {
    border: 1px solid #800000;
    background: #800000;
    color: #fbf7ee;
    font-weight: 700;
}

.pager .gap {
    color: #800000;
}

.delete {
    clear: both;
    margin-top: 6px;
}

.delete input {
    max-width: 150px;
    border: 1px inset;
}

.empty,
.error {
    display: table;
    margin: 12px auto;
    border: 1px outset;
    background: #fbf7ee;
    padding: 8px 14px;
}

.latest-news {
    display: table;
    min-width: 280px;
    max-width: 620px;
    margin: 10px auto 18px;
    border: 1px outset;
    background: #fbf7ee;
    padding: 4px 12px;
}

.latest-news h2 {
    color: #cc1105;
    font-size: 1em;
    margin: 0 0 3px;
}

.latest-news ul {
    margin: 0;
    padding-left: 1.3em;
}

.source {
    clear: both;
    margin-top: 6px;
    font-size: 11pt;
}

.admin-form {
    margin-bottom: 10px;
}

.admin-section {
    max-width: 1180px;
    margin: 12px auto;
    padding: 6px;
    border: 1px solid #d9bfb7;
    background: #fbf7ee;
}

.admin-section h2 {
    margin: 0 0 6px;
    color: #cc1105;
    font-size: 1em;
}

.admin-section .postform {
    display: table;
    margin: 6px auto 10px;
}

.admin-section .postform label {
    display: grid;
    grid-template-columns: 9em minmax(240px, 420px);
    gap: 4px;
    margin: 2px 0;
    align-items: center;
}

.admin-section .postform label > span {
    background: #fbf7ee;
}

.admin-note {
    max-width: 780px;
    margin: 6px auto 0;
    color: #800000;
    font-size: 0.92em;
}

.admin-status {
    min-width: 620px;
}

.admin-table {
    max-width: 100%;
}

.admin-table td {
    max-width: 320px;
    overflow-wrap: anywhere;
}

.admin-posts {
    width: min(1180px, 100%);
}

.admin-posts th,
.admin-posts td {
    font-size: 0.9em;
}

.admin-hidden-row {
    color: #707070;
    background: #f7efea;
}

.admin-actions {
    white-space: nowrap;
}

.inline {
    display: inline;
}

.quote {
    color: #789922;
}

.post.op .body {
    max-width: 800px;
    min-width: 150px;
}

.post.reply {
    display: table;
    max-width: 1800px;
    margin-left: 18px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.45);
}

.post time {
    margin: 0 5px;
}

.post .meta a[href*="#p"] {
    margin: 0 15px 0 5px;
    color: #800000;
    text-decoration: underline;
}

.post .meta a[href*="#p"]:hover {
    color: #f00;
}

.media-file video,
.flash-stage,
.media-shell img,
.media-shell video,
.media-shell iframe,
.media-shell embed,
.media-shell object,
.media-shell ruffle-player {
    border: 0;
}

.media-toolbar {
    clear: both;
}

.threadlink,
.subnav {
    clear: both;
}

.threadlink a {
    font-size: 120%;
}

.board-tools {
    text-align: center;
    margin: -4px 0 12px;
    font-size: 11pt;
}

.board-tools a {
    display: inline-block;
    margin: 0 4px;
}

.catalog-wrap {
    max-width: 1240px;
}

.catalog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    align-items: start;
}

.catalog-card {
    min-width: 0;
    padding: 6px;
    border: 1px solid #d9bfb7;
    background: #fbf7ee;
    text-align: center;
    overflow-wrap: anywhere;
}

.catalog-card:hover {
    background: #fff8e8;
}

.catalog-thumb {
    display: grid;
    place-items: center;
    height: 124px;
    margin-bottom: 5px;
    background: #f0e0d6;
    border: 1px inset #d9bfb7;
    overflow: hidden;
}

.catalog-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.catalog-file {
    color: #800000;
    font-weight: 700;
}

.catalog-title {
    display: block;
    font-weight: 700;
    line-height: 1.25;
}

.catalog-card small {
    display: block;
    color: #800000;
    margin-top: 2px;
}

.catalog-card p {
    margin: 4px 0 0;
    text-align: left;
    font-size: 10pt;
    line-height: 1.25;
}

.is-pow-checking {
    opacity: .78;
}

.is-pow-checking button,
.is-pow-checking input[type="submit"] {
    cursor: wait;
}

.empty,
.error,
.latest-news {
    background: #fbf7ee;
    border: 1px outset #800000;
}

.latest-news h2 {
    color: #cc1105;
}

.recent-panel {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(300px, 1fr);
    gap: 18px;
    max-width: 960px;
    margin: 10px auto 16px;
    padding: 8px;
    border: 1px solid #d9bfb7;
    background: #fbf7ee;
    color: #800000;
}

.recent-panel h2 {
    margin: 0 0 7px;
    padding-bottom: 4px;
    border-bottom: 1px dashed #d9bfb7;
    color: #800000;
    font-size: 1em;
}

.recent-panel ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.recent-panel li {
    margin: 0 0 3px;
    padding: 2px 4px;
    background: #fff8e8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.recent-panel li:nth-child(even) {
    background: #f7efea;
}

.recent-panel a {
    text-decoration: none;
}

.recent-image-strip {
    display: grid;
    grid-template-columns: repeat(5, minmax(72px, 1fr));
    gap: 8px;
}

.recent-image-card {
    display: block;
    height: 124px;
    border: 1px solid #d9bfb7;
    background: #f0e0d6;
    overflow: hidden;
    text-align: center;
    transition: border-color .1s, box-shadow .1s;
}

.recent-image-card:hover {
    background: #eecccc;
    border-color: #800000;
    box-shadow: 0 0 0 1px #800000;
}

.recent-image-card img {
    transition: transform .15s;
}

.recent-image-card:hover img {
    transform: scale(1.04);
}

.recent-image-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
}

.recent-empty {
    color: #800000;
}

footer {
    text-align: center;
    color: #800000;
    padding: 8px 4px;
    font-size: 10pt;
}

.menu-body {
    background: #fbf7ee;
    background-image: none;
    color: #800000;
    font-size: 11pt;
}

.frame-logo {
    display: block;
    width: 120px;
    margin: 0 0 6px;
    border: 1px solid #800000;
    background: #f0e0d6;
    line-height: 0;
}

.frame-logo img {
    display: block;
    width: 120px;
    height: 160px;
    border: 0;
    object-fit: cover;
}

body.board-m header {
    display: none;
}

body.board-f {
    background: #fbf7ee;
    color: #800000;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1.25;
}

body.board-f header {
    display: none;
}

body.board-f a,
body.board-f a:visited {
    color: #0000ee;
}

body.board-f a:hover {
    color: #0000ee;
    background: #eecccc;
}

.flash-index-wrap {
    margin: 8px 36px;
}

.flash-recent {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(300px, 1fr);
    gap: 18px;
    margin: 0 0 12px;
    padding: 8px;
    border: 1px solid #d9bfb7;
    background: #fbf7ee;
    color: #800000;
}

.flash-recent h2 {
    margin: 0 0 7px;
    padding-bottom: 4px;
    border-bottom: 1px dashed #d9bfb7;
    color: #800000;
    font-size: 15px;
}

.flash-recent ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.flash-recent li {
    margin: 0 0 3px;
    padding: 2px 4px;
    background: #fff8e8;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.flash-recent li:nth-child(even) {
    background: #f7efea;
}

.flash-recent a {
    text-decoration: none;
}

.flash-file-strip {
    display: grid;
    grid-template-columns: repeat(5, minmax(72px, 1fr));
    gap: 8px;
}

.flash-file-card {
    display: grid;
    align-content: center;
    min-height: 86px;
    padding: 6px 4px;
    border: 1px solid #d9bfb7;
    background: #f0e0d6;
    text-align: center;
    text-decoration: none;
    overflow: hidden;
}

.flash-file-card:hover {
    background: #eecccc;
}

.flash-file-icon {
    display: block;
    width: 48px;
    margin: 0 auto 5px;
    border: 1px outset #800000;
    background: #eeaa88;
    color: #800000;
    font-weight: 700;
    line-height: 32px;
}

.flash-file-name,
.flash-file-size {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.flash-file-size {
    color: #800000;
    font-size: 12px;
}

.flash-file-empty {
    color: #800000;
}

.flash-index {
    width: 100%;
    border-collapse: collapse;
    border-top: 1px solid #cc0000;
    border-bottom: 1px solid #cc0000;
    color: #cc0000;
    table-layout: auto;
}

.flash-index th {
    background: #eeaa88;
    border: 1px solid #cc0000;
    color: #cc0000;
    padding: 4px 7px;
    text-align: center;
    font-weight: 700;
}

.flash-index td {
    padding: 2px 5px;
    border-left: 1px solid #ead2c4;
    border-right: 1px solid #ead2c4;
    white-space: nowrap;
    vertical-align: middle;
}

.flash-index tr.odd {
    background: #f0e0d6;
}

.flash-index tr.even {
    background: #fbf7ee;
}

.flash-index tr:hover {
    background: #eecccc;
}

.flash-index .f-no,
.flash-index .f-size,
.flash-index .f-date,
.flash-index .f-replies {
    text-align: center;
}

.flash-index .f-name {
    color: #117743;
    font-weight: 700;
}

.flash-index .f-file,
.flash-index .f-embed,
.flash-index .f-reply {
    text-align: center;
}

.flash-index .f-tag {
    text-align: center;
    color: #cc0000;
}

.flash-index .f-subject {
    width: 36%;
    color: #cc0000;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
}

.flash-index .f-subject a {
    color: #cc0000;
    text-decoration: none;
}

.flash-index .f-empty {
    padding: 10px;
    text-align: center;
}

.flash-post-panel {
    max-width: 680px;
    margin: 12px auto 0;
    color: #800000;
}

.flash-post-panel summary {
    cursor: pointer;
    color: #0000ee;
    text-align: center;
}

.flash-post-panel .postform {
    margin-top: 8px;
}

.flash-thread {
    margin: 0 5px;
    color: #cc0000;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
}

.flash-reply-top {
    border-bottom: 1px solid #d9bfb7;
    padding: 0 0 8px;
    text-align: center;
    font-size: 20px;
    font-weight: 700;
}

.flash-thread-nav {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid #d9bfb7;
    padding: 7px 0;
}

.flash-thread-nav label {
    color: #cc0000;
}

.flash-thread-count {
    white-space: nowrap;
}

.flash-thread-file {
    margin: 7px 0 2px;
}

.flash-thread-op {
    min-height: 450px;
}

.flash-thread-meta {
    margin: 2px 0 0;
}

.flash-thread-subject {
    color: #cc0000;
    font-weight: 700;
}

.flash-thread-name {
    color: #117743;
}

.flash-thread-body {
    margin: 18px 0 0 40px;
    max-width: 620px;
    color: #cc0000;
    white-space: normal;
}

.flash-embed {
    margin: 6px 0 8px 40px;
}

.flash-embed summary {
    display: inline;
    cursor: pointer;
    color: #0000ee;
}

.flash-embed .flash-stage {
    margin-top: 6px;
    width: 720px;
    max-width: 90vw;
    min-height: 400px;
    border: 1px solid #cc0000;
}

.flash-reply-row {
    display: flex;
    align-items: flex-start;
    margin: 4px 0;
}

.flash-gutter {
    width: 20px;
    color: #d9bfb7;
}

.flash-reply-box {
    display: inline-block;
    min-width: 330px;
    max-width: 680px;
    background: #f0e0d6;
    border: 1px solid #d9bfb7;
    padding: 3px 6px 12px;
    color: #cc0000;
}

.flash-reply-body {
    margin: 12px 0 0 35px;
    color: #cc0000;
}

.flash-reply-form {
    border-top: 1px solid #d9bfb7;
    margin-top: 8px;
    padding-top: 8px;
    text-align: center;
}

.flash-reply-form summary {
    display: inline;
    cursor: pointer;
    color: #0000ee;
}

.flash-reply-form .postform {
    margin-top: 8px;
    text-align: left;
}

body.board-m a,
body.board-m a:link,
body.board-m a:visited {
    color: #0000ee;
    text-decoration: none;
}

body.board-m a:hover {
    color: #0000ee;
    text-decoration: none;
    background-color: #eecccc;
}

.up-wrap {
    margin: 0;
    padding: 0;
}

.up-title {
    border-collapse: collapse;
}

.up-title td {
    background-color: #eeaa88;
    padding: 1px 3px;
}

.up-title strong {
    font-size: 1.35em;
}

.upform {
    margin: 0;
}

.upform input,
.upform select {
    font: inherit;
}

.upform input[type="text"],
.upform input[type="password"],
.upform input[type="file"] {
    max-width: 100%;
    box-sizing: border-box;
}

.button,
.upform input[type="submit"] {
    background-color: #eeaa88;
    color: #800000;
    border-color: #ffffff;
}

.allowed-exts {
    color: gray;
    font-size: small;
    font-style: italic;
}

.files {
    width: 100%;
    border-collapse: collapse;
    font-size: small;
}

.files td,
.files th {
    padding: 0 8px 0 1px;
    white-space: nowrap;
}

.files .fco {
    width: 90%;
    text-align: left;
}

.files .fsz {
    text-align: right;
}

.files .fnw {
    text-align: left;
}

.files .odd {
    background-color: #f7efea;
}

.files tr:hover {
    background-color: #f0e0d6;
}

.deleted {
    color: gray;
}

.pagelink {
    font-family: Verdana, Chicago, Arial, sans-serif;
    font-size: medium;
}

.pagelink a {
    text-decoration: underline;
}

.engNav {
    padding: 0 .55em;
}

.engNav a { color: #00e; }
.engNav a:visited { color: #033; }
.engNav a:hover { color: #e00 !important; }

.menu-links {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px;
    margin: 4px 0 6px;
}

.menu-links a {
    display: block;
    padding: 1px 2px;
    border-left: 3px solid #eeaa88;
    background: #fff8e8;
}

.siteName {
    margin: .3em 0;
    line-height: 1.05;
}

.siteName a,
.siteName a:visited,
.siteName a:hover {
    color: #800000 !important;
    text-decoration: none;
    font-size: 1em;
}

.notice {
    border: 1px outset;
    margin: .5em 0;
    background: #fbf7ee;
    width: 100%;
}

.notice td,
.notice th {
    border: 1px inset;
    padding: 2px;
}

.boardList {
    line-height: 1.5em;
}

.boardList h2 {
    color: #cc1105;
    margin: 8px 0 2px;
    padding: 1px 3px;
    border-bottom: 1px solid #d9bfb7;
    background: #fff8e8;
    font-size: 1em;
}

.boardList ul {
    list-style-type: none;
    margin: 0 0 1em;
    padding: 0;
}

.boardList li a {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    padding: 1px 2px;
    text-decoration: none;
}

.boardList li a:hover {
    background: #eecccc;
}

.boardList li small {
    flex: 0 0 auto;
    color: #800000;
    font-size: .82em;
}

.board-prog {
    background: #fbf7ee;
    color: #800000;
    font-family: "MS PGothic", "IPAMonaPGothic", "Mona", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}

.board-prog header {
    border-bottom: 1px solid #800000;
    background: #fbf7ee;
}

.board-prog .brand,
.board-prog header nav a.on {
    color: #800000 !important;
}

.prog-wrap {
    width: auto;
    margin: 8px 4px 32px;
}

.prog-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    max-width: 760px;
    margin: 0 auto 10px;
    text-align: center;
    border: 0;
    background: transparent;
    padding: 0;
}

.prog-head h1 {
    margin: 0;
    color: #800000;
    font-size: 160%;
    line-height: 1.2;
}

.prog-head p {
    margin: 3px 0 0;
    color: #800000;
    font-size: 11pt;
}

.prog-board-panel,
.prog-thread-panel,
.prog-form-panel {
    margin: 8px auto;
    border: 0;
    background: transparent;
}

.prog-board-title {
    display: table;
    margin: 0 auto;
    padding: 2px 10px;
    border: 1px outset;
    background: #fbf7ee;
    color: #cc1105;
    font-weight: 700;
}

.prog-thread-table {
    width: min(980px, 100%);
    margin: 0 auto;
    border: 1px outset;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    background: #fbf7ee;
}

.prog-thread-table th,
.prog-thread-table td {
    border: 1px inset;
    padding: 2px 8px;
    vertical-align: top;
}

.prog-thread-table th {
    background: #eeaa88;
    color: #800000;
    text-align: left;
}

.prog-row-no,
.prog-row-count,
.prog-row-date {
    width: 5.5em;
    white-space: nowrap;
}

.prog-row-count {
    text-align: right;
}

.prog-thread-link {
    font-weight: 700;
}

.prog-thread-table small {
    display: block;
    margin-top: 1px;
    color: #800000;
    overflow-wrap: anywhere;
}

.prog-empty {
    color: #800000;
    text-align: center;
}

.prog-thread-tools {
    text-align: right;
    margin-bottom: 5px;
}

.prog-thread-panel h1 {
    margin: 0;
    padding: 2px 8px;
    border-top: 1px solid #800000;
    border-bottom: 1px solid #800000;
    background: #fbf7ee;
    color: #cc1105;
    font-size: 14pt;
    text-align: center;
}

.prog-posts {
    margin: 0;
    padding: 7px 10px 12px;
}

.prog-posts dt {
    margin-top: 10px;
    color: #800000;
}

.prog-posts dd {
    margin: 5px 0 12px 2.5em;
    max-width: 820px;
    color: #800000;
    overflow-wrap: anywhere;
}

.prog-post-no {
    color: #800000;
    font-weight: 700;
    text-decoration: none;
}

.prog-subject {
    color: #cc1105;
}

.prog-name {
    color: #117743;
}

.prog-id {
    color: #800000;
}

.prog-form-panel {
    display: table;
    padding: 0;
}

.prog-form-panel summary {
    margin: 0 0 4px;
    padding: 1px 8px;
    border: 1px outset;
    background: #fbf7ee;
    color: #cc1105;
    font-weight: 700;
    cursor: pointer;
}

.prog-postform {
    display: grid;
    grid-template-columns: repeat(3, max-content);
    align-items: center;
    gap: 5px 8px;
}

.prog-postform textarea,
.prog-form-actions {
    grid-column: 1 / -1;
}

.prog-postform input,
.prog-postform textarea {
    border: 1px inset;
    background: #fff;
    color: #000;
    font: inherit;
    padding: 2px 4px;
}

.prog-postform textarea {
    width: min(780px, 100%);
    min-height: 150px;
    resize: vertical;
}

.prog-form-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

@media (max-width: 768px) {
    html {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        overscroll-behavior-x: none;
    }

    body {
        min-width: 0;
        width: 100%;
        max-width: 100%;
        position: relative;
        font-size: 12pt;
        overflow-x: hidden;
        overscroll-behavior-x: none;
        -webkit-text-size-adjust: 100%;
    }

    /* Header / nav: stack instead of absolute-overlap */
    header {
        text-align: center;
        padding: 4px 6px;
    }

    .brand {
        position: static;
        display: block;
        font-size: 150%;
        line-height: 1.3;
    }

    header nav {
        display: block;
        margin: 2px 0 0;
        line-height: 1.9;
    }

    header nav a {
        display: inline-block;
        margin: 0 .35em;
        padding: 2px 0;
    }

    /* Roomier tap targets for links/buttons */
    button,
    input[type="submit"],
    .flash-load {
        padding: 5px 12px;
    }

    /* Content gutters shrink */
    .wrap,
    .prog-wrap {
        margin: 8px 6px 28px;
    }

    .flash-index-wrap {
        margin: 8px 6px;
        overflow-x: auto;
    }

    .body,
    .post.op .body {
        margin: 1em 6px;
        max-width: 100%;
    }

    .post.reply {
        display: block;
        margin-left: 6px;
        max-width: 100%;
    }

    .file {
        float: none;
        margin: 0 0 8px;
        padding: 3px;
    }

    .file img {
        max-width: 100%;
        height: auto;
    }

    /* Post forms: fluid widths, no fixed px */
    .postform,
    .basedlii-comment-form {
        display: block;
        width: auto;
    }

    .ftbl {
        width: 100%;
        display: block;
    }

    .ftbl tbody,
    .ftbl tr,
    .ftbl td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    .ftdc {
        width: auto;
        padding: 3px 5px;
        border-top: 1px solid #d9bfb7;
    }

    .postform input,
    .postform textarea,
    .postform select,
    .upform input,
    .upform select {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .postform textarea,
    .basedlii-comment-form textarea,
    .prog-postform textarea {
        width: 100%;
        box-sizing: border-box;
    }

    .postform button,
    .postform input[type="submit"],
    .upform input[type="submit"] {
        width: auto;
        min-width: 7em;
        margin: 4px 0 0;
    }

    .upform {
        display: grid;
        gap: 4px;
        padding: 0 4px;
    }

    /* Recent / file strips: fewer columns */
    .recent-panel,
    .flash-recent {
        display: block;
    }

    .recent-panel h2,
    .flash-recent h2 {
        margin-top: 12px;
    }

    .recent-image-strip,
    .flash-file-strip,
    .catalog-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .catalog-card {
        padding: 5px;
    }

    .catalog-thumb {
        height: 112px;
    }

    /* Embedded iframes/players: lock to viewport, no horizontal drag */
    .media-shell,
    .media-file,
    .audio-file,
    .flash-file {
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
    }

    .media-shell embed,
    .media-shell object,
    .media-shell video,
    .media-shell ruffle-player,
    .flash-stage,
    .flash-stage embed,
    .flash-stage object,
    .flash-stage ruffle-player,
    .media-file video {
        width: 100% !important;
        max-width: 100% !important;
        touch-action: pan-y;
    }

    /* iOS lets iframes drag/inner-scroll regardless of width.
       Pin them: aspect-ratio box + iframe filling it absolutely. */
    .media-shell:not(.is-theater):has(iframe) {
        position: relative;
        width: 100%;
        max-width: 100%;
        aspect-ratio: 16 / 9;
    }

    .media-shell:not(.is-theater) iframe {
        position: absolute;
        inset: 0;
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        border: 0;
        touch-action: pan-y;
    }

    /* Flash thread layout: trim deep indents */
    .flash-thread-body,
    .flash-reply-body {
        margin-left: 12px;
    }

    .flash-embed {
        margin-left: 12px;
    }

    .flash-embed .flash-stage {
        width: 100%;
        max-width: 100%;
    }

    .flash-reply-box {
        min-width: 0;
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
    }

    .flash-thread-nav {
        flex-wrap: wrap;
    }

    /* Multimedia (/m) uploader file table scrolls */
    .up-wrap {
        overflow-x: auto;
    }

    /* Programming board: stack form grid + head */
    .prog-head {
        flex-wrap: wrap;
        gap: 6px;
    }

    .prog-postform {
        grid-template-columns: 1fr;
    }

    .prog-postform input {
        width: 100%;
        box-sizing: border-box;
    }

    /* Admin: stack label columns, let tables scroll */
    .admin-status {
        min-width: 0;
    }

    .admin-section {
        overflow-x: auto;
    }

    .admin-section .postform label {
        grid-template-columns: 1fr;
    }

    /* Board index table */
    .boardTable a {
        display: block;
    }

    /* /m and /f hide nav on desktop (frames provide menu);
       without frames on mobile, restore it so users can navigate */
    body.board-m header,
    body.board-f header {
        display: block;
    }
}

/* ---------- Dark theme (toggled by dark.js via data-theme) ----------
   One cohesive palette via custom properties. Tweak here, not per-rule. */
html[data-theme="dark"] {
    --bg:          #0f1216;  /* page background          */
    --surface:     #181c22;  /* cards, header, footer    */
    --surface-2:   #20252d;  /* replies, alt rows, hover */
    --field:       #0b0e12;  /* input fields             */
    --border:      #2a3038;  /* hairlines, card borders  */
    --border-2:    #3a414b;  /* stronger edges, buttons  */
    --text:        #d8dce2;  /* body text                */
    --muted:       #99a1ac;  /* timestamps, captions     */
    --accent:      #ff8b80;  /* headings (maroon -> coral)*/
    --link:        #79b8ff;
    --link-visited:#c3a6ff;
    --link-hover:  #ffb574;
    --green:       #8cc265;  /* names, greentext         */
}

html[data-theme="dark"] body,
html[data-theme="dark"] .menu-body { background: var(--bg); color: var(--text); }

html[data-theme="dark"] a,
html[data-theme="dark"] .engNav a { color: var(--link); }
html[data-theme="dark"] a:visited,
html[data-theme="dark"] .engNav a:visited { color: var(--link-visited); }
html[data-theme="dark"] a:hover,
html[data-theme="dark"] a:active,
html[data-theme="dark"] .engNav a:hover { color: var(--link-hover); }

html[data-theme="dark"] hr { border-color: var(--border); }
html[data-theme="dark"] .thread { border-top-color: var(--border); }

/* surfaces */
html[data-theme="dark"] header,
html[data-theme="dark"] .boardTable,
html[data-theme="dark"] .boardTable td,
html[data-theme="dark"] .boardTable th,
html[data-theme="dark"] .recent-panel,
html[data-theme="dark"] .threadlink,
html[data-theme="dark"] .prog-board-panel,
html[data-theme="dark"] .catalog-card,
html[data-theme="dark"] .file,
html[data-theme="dark"] .notice {
    background: var(--surface);
    border-color: var(--border);
}
html[data-theme="dark"] header { border-bottom-color: var(--border); }
html[data-theme="dark"] footer {
    background: var(--surface);
    border-top-color: var(--border);
    color: var(--muted);
}

/* accent text (headings + brand) */
html[data-theme="dark"] .brand,
html[data-theme="dark"] header nav a.on,
html[data-theme="dark"] .logo h1,
html[data-theme="dark"] .board-intro h1,
html[data-theme="dark"] .meta,
html[data-theme="dark"] .recent-panel h2,
html[data-theme="dark"] .prog-head h1,
html[data-theme="dark"] .siteName a,
html[data-theme="dark"] .siteName a:visited,
html[data-theme="dark"] .boardList h2,
html[data-theme="dark"] .error { color: var(--accent); }
html[data-theme="dark"] .boardList h2 {
    background: var(--surface-2);
    border-bottom-color: var(--border);
}
html[data-theme="dark"] .boardList li a:hover { background: var(--surface-2); }
html[data-theme="dark"] .boardList li small { color: var(--muted); }
html[data-theme="dark"] .brand { color: var(--accent) !important; }

/* names + greentext (readable green on dark) */
html[data-theme="dark"] .name,
html[data-theme="dark"] .quote { color: var(--green); }
html[data-theme="dark"] .subject { color: #ffb3a7; }
html[data-theme="dark"] .board-tagline,
html[data-theme="dark"] .post time { color: var(--muted); }

/* replies / alternating rows */
html[data-theme="dark"] .post {
    background: var(--surface-2);
    border-left-color: var(--border-2);
}
html[data-theme="dark"] .post.op,
html[data-theme="dark"] .thread > .post:first-child { background: transparent; }
html[data-theme="dark"] .thread .post.op .body::after {
    background: linear-gradient(rgba(15, 18, 22, 0), var(--bg));
}
html[data-theme="dark"] .recent-panel li { background: var(--surface); }
html[data-theme="dark"] .recent-panel li:nth-child(even) { background: var(--surface-2); }

html[data-theme="dark"] .board-source,
html[data-theme="dark"] .menu-links a {
    background: var(--surface-2);
    border-left-color: var(--accent);
}

/* form fields */
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
    background: var(--field);
    color: var(--text);
    border-color: var(--border);
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: var(--muted); }
html[data-theme="dark"] button,
html[data-theme="dark"] input[type="submit"] {
    background: var(--surface-2);
    color: var(--text);
    border: 1px solid var(--border-2);
}

/* postform label cells (Name / Subject / ... strip) */
html[data-theme="dark"] .ftdc {
    background-color: var(--surface-2);
    color: var(--muted);
}

/* news panel + empty/error notices */
html[data-theme="dark"] .latest-news,
html[data-theme="dark"] .empty,
html[data-theme="dark"] .error {
    background: var(--surface);
    border: 1px solid var(--border);
}
html[data-theme="dark"] .latest-news h2 { color: var(--accent); }

/* pager */
html[data-theme="dark"] .pager a {
    background: var(--surface-2);
    border-color: var(--border);
}
html[data-theme="dark"] .pager a:hover { background: var(--surface-2); }
html[data-theme="dark"] .pager .cur {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--bg);
}
html[data-theme="dark"] .catalog-card:hover { background: var(--surface-2); }

/* thumbnails */
html[data-theme="dark"] .catalog-thumb,
html[data-theme="dark"] .recent-image-card { background: var(--field); }
html[data-theme="dark"] .recent-image-card { border-color: var(--border); }

/* menu frame */
html[data-theme="dark"] .frame-logo { border-color: var(--border); }

/* ---------- Search ---------- */
.header-search {
    display: inline-block;
    margin-left: .75em;
    vertical-align: middle;
}
.header-search input {
    font-size: 90%;
    padding: 1px 5px;
    border: 1px solid #d9bfb7;
    background: #fff;
    border-radius: 3px;
}
.search-page-form {
    text-align: center;
    margin: 0 auto 16px;
}
.search-page-form input[type="search"] {
    width: min(360px, 70%);
    padding: 5px 8px;
    border: 1px solid #d9bfb7;
    border-radius: 3px;
}
.search-count {
    text-align: center;
    color: #800000;
    margin: 0 0 10px;
}
.search-results {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 800px;
}
.search-results li { margin: 0 0 6px; }
.search-hit {
    display: block;
    padding: 6px 9px;
    border: 1px solid #d9bfb7;
    background: #fff8e8;
    border-radius: 3px;
    text-decoration: none;
    color: inherit;
}
.search-hit:hover { background: #fff4f4; }
.search-board { color: #117743; font-weight: 700; }
.search-hit small { color: #999; margin-left: .5em; }
.search-hit p { margin: 3px 0 0; color: #555; font-size: 92%; }

html[data-theme="dark"] .header-search input,
html[data-theme="dark"] .search-page-form input[type="search"] {
    background: var(--field);
    color: var(--text);
    border-color: var(--border);
}
html[data-theme="dark"] .search-count { color: var(--accent); }
html[data-theme="dark"] .search-hit {
    background: var(--surface);
    border-color: var(--border);
}
html[data-theme="dark"] .search-hit:hover { background: var(--surface-2); }
html[data-theme="dark"] .search-hit p { color: var(--muted); }
html[data-theme="dark"] .search-hit small { color: var(--muted); }

/* ---------- Homepage stats + about ---------- */
.home-stats {
    margin: 0 auto 16px;
    max-width: 560px;
}
.home-stats ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.home-stats li {
    flex: 1 1 100px;
    min-width: 90px;
    padding: 8px 6px;
    border: 1px solid #d9bfb7;
    background: #fff8e8;
    border-radius: 4px;
    text-align: center;
}
.home-stats b {
    display: block;
    font-size: 150%;
    color: #800000;
    line-height: 1.1;
}
.home-stats span {
    font-size: 80%;
    color: #888;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.home-about {
    max-width: 560px;
    margin: 18px auto;
    padding: 10px 16px;
    border: 1px solid #d9bfb7;
    background: #fff4f4;
    border-radius: 4px;
}
.home-about h2 {
    margin: 0 0 6px;
    color: #800000;
    font-size: 115%;
}
.home-about ul { margin: 0; padding-left: 1.2em; }
.home-about li { margin: 3px 0; font-size: 92%; }

html[data-theme="dark"] .home-stats li {
    background: var(--surface);
    border-color: var(--border);
}
html[data-theme="dark"] .home-stats b { color: var(--accent); }
html[data-theme="dark"] .home-stats span { color: var(--muted); }
html[data-theme="dark"] .home-about {
    background: var(--surface);
    border-color: var(--border);
}
html[data-theme="dark"] .home-about h2 { color: var(--accent); }

/* ---------- Thread watching ---------- */
.watch-toggle {
    font: inherit;
    font-size: 90%;
    cursor: pointer;
    padding: 1px 8px;
    border: 1px solid #d9bfb7;
    background: #fff8e8;
    color: #800000;
    border-radius: 3px;
}
.watch-toggle.on {
    background: #800000;
    color: #fbf7ee;
    border-color: #800000;
}
.watched-list {
    max-width: 560px;
    margin: 0 auto 16px;
    padding: 8px 14px;
    border: 1px solid #d9bfb7;
    background: #fff8e8;
    border-radius: 4px;
}
.watched-list h2 { margin: 0 0 5px; color: #800000; font-size: 110%; }
.watched-list ul { list-style: none; margin: 0; padding: 0; }
.watched-list li { margin: 2px 0; }
.watched-list .watch-board { color: #117743; font-weight: 700; }
.watched-list .watch-remove { color: #999; text-decoration: none; font-size: 85%; }

html[data-theme="dark"] .watch-toggle {
    background: var(--surface-2);
    color: var(--text);
    border-color: var(--border);
}
html[data-theme="dark"] .watch-toggle.on {
    background: var(--accent);
    color: var(--bg);
    border-color: var(--accent);
}
html[data-theme="dark"] .watched-list {
    background: var(--surface);
    border-color: var(--border);
}
html[data-theme="dark"] .watched-list h2 { color: var(--accent); }

/* ---------- Reporting ---------- */
.report-link {
    color: #b08;
    text-decoration: none;
    font-size: 90%;
    opacity: .65;
}
.report-link:hover { opacity: 1; color: #f00; }
.report-form { max-width: 480px; margin: 0 auto; text-align: left; }
.report-form textarea { width: 100%; box-sizing: border-box; }
.report-preview {
    display: inline-block;
    margin-top: 4px;
    color: #777;
    font-style: italic;
}
.report-actions { margin-top: 8px; }
html[data-theme="dark"] .report-link { color: #e8b0a8; opacity: .7; }
html[data-theme="dark"] .report-link:hover { color: var(--link-hover); opacity: 1; }
html[data-theme="dark"] .report-preview { color: var(--muted); }