:root {
  font-family: "MS PGothic", "Yu Gothic", system-ui, sans-serif;
  color: #332f2a;
  background: #d9d4c7;
  --ink: #332f2a;
  --paper: #fffef6;
  --line: #8c8478;
  --soft: #eee9dc;
  --link: #354b91;
  --pink: #b4455b;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  background-color: #d9d4c7;
  background-image: radial-gradient(#aaa394 0.7px, transparent 0.7px);
  background-size: 5px 5px;
}
button, select { font: inherit; }
button { color: inherit; }

.bbs-shell {
  width: min(100% - 24px, 720px);
  margin: 20px auto 52px;
  border: 1px solid #777064;
  background: var(--paper);
  box-shadow: 3px 3px 0 #8f897e;
}

.bbs-header {
  padding: 18px 22px 16px;
  border-bottom: 4px double var(--line);
  background: linear-gradient(90deg, #f2dce2, #fffef6 55%, #dfe7f6);
}
.bbs-header h1 {
  margin: 3px 0 8px;
  color: #714459;
  font-size: clamp(1.65rem, 5vw, 2.25rem);
  letter-spacing: .08em;
  text-shadow: 1px 1px #fff;
}
.bbs-header p { margin: 4px 0; line-height: 1.55; }
.eyebrow { font: bold .72rem ui-monospace, monospace; letter-spacing: .08em; }
.notice { color: #766e64; font-size: .78rem; }
.pager {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-height: 62px;
  padding: 7px 18px;
  color: var(--link);
  font: .78rem ui-monospace, monospace;
}
.pager:empty { display: none; }
#pager-top { border-bottom: 1px dotted var(--line); }
#pager-bottom { border-top: 1px dotted var(--line); }
.pager-count { color: #766e64; }
.pager-links { display: inline-flex; align-items: center; justify-content: center; gap: 3px; }
.pager-page { min-width: 2em; padding: 5px 1px; color: inherit; text-align: center; text-decoration: none; }
.pager-page:hover, .pager-page:focus-visible { color: #fff; background: var(--link); }
.pager-page.is-current { color: #8f334b; font-weight: bold; }
.pager-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  color: inherit;
  text-decoration: none;
}
.pager-arrow:hover, .pager-arrow:focus-visible { color: #fff; background: var(--link); }
.pager-arrow.is-disabled { color: #aaa49a; cursor: default; }
.pager-arrow.is-disabled:hover { color: #aaa49a; background: transparent; }
.post-list { padding: 0 18px 22px; }
.empty-posts { margin: 24px 0 0; text-align: center; color: #766e64; }

.post {
  padding: 18px 4px 22px;
  border-bottom: 1px dashed var(--line);
}
.post:last-child { border-bottom: 0; }
.post-head { margin-bottom: 10px; }
.post-number { color: #8f334b; font: bold .82rem ui-monospace, monospace; }
.post-title { margin: 3px 0 5px; font-size: 1.08rem; }
.post-meta { margin: 0; color: #665f57; font-size: .78rem; }
.art-stage {
  position: relative;
  width: min(302px, 100%);
  aspect-ratio: 1;
  margin: 12px auto;
  border: 1px solid var(--ink);
  background: #fff;
  box-shadow: 2px 2px 0 #b6afa3;
}
.art-stage canvas, .art-stage img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}
.art-stage [hidden] { display: none; }
.art-badge {
  position: absolute;
  right: 4px;
  bottom: 4px;
  padding: 2px 5px;
  color: #fff;
  background: #333c;
  font: .65rem ui-monospace, monospace;
}
.post-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.text-button, .speed-select {
  min-height: 42px;
  border: 1px solid #70695e;
  border-radius: 2px;
  background: #f7f3e8;
}
.text-button { display: inline-flex; align-items: center; justify-content: center; gap: .22em; padding: 7px 12px; cursor: pointer; box-shadow: 1px 1px 0 #aaa294; }
.text-button:hover:not(:disabled) { color: #fff; background: var(--link); }
.text-button:focus-visible, .speed-select:focus-visible, .comments-toggle:focus-visible {
  outline: 3px solid #e1a82d;
  outline-offset: 2px;
}
.text-button:disabled { cursor: not-allowed; opacity: .52; }
.replay-button { width: 7.4rem; }
.like-button { width: 6.8rem; }
.like-button[aria-pressed="true"] { color: #fff; background: var(--pink); }
.speed-wrap { display: flex; align-items: center; gap: 5px; font-size: .78rem; }
.speed-select { padding: 4px 7px; }
.button-icon { display: inline-block; flex: 0 0 auto; width: .9em; height: .9em; vertical-align: -.12em; }
.replay-status { min-height: 1.4em; margin: 8px 0; text-align: center; font: .74rem ui-monospace, monospace; }
.author-comment {
  margin: 12px 0 9px;
  padding: 9px 11px;
  border-left: 4px solid #b6a993;
  background: var(--soft);
  line-height: 1.6;
}
.thanks {
  position: fixed;
  z-index: 5;
  max-width: min(260px, calc(100vw - 24px));
  padding: 8px 10px;
  border: 1px solid var(--pink);
  border-radius: 7px;
  color: #6e263a;
  background: #fff5f7;
  box-shadow: 2px 2px 0 #c8a7af;
  font-size: .8rem;
  pointer-events: none;
  animation: thanks-in .18s ease-out;
}
@keyframes thanks-in { from { opacity: 0; transform: translateY(5px); } }
.comments-toggle {
  display: flex;
  align-items: center;
  gap: .3em;
  width: 100%;
  min-height: 42px;
  padding: 8px 5px;
  border: 0;
  border-top: 1px dotted var(--line);
  color: var(--link);
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.comments { margin: 2px 0 0 14px; padding: 0 0 0 22px; list-style: none; }
.comments[hidden] { display: none; }
.comment { --branch-y: 20px; position: relative; margin: 8px 0; padding: 8px 10px 8px 17px; background: #f8f6ef; }
.comment::before {
  content: "";
  position: absolute;
  left: -22px;
  top: -8px;
  width: 22px;
  height: calc(var(--branch-y) + 8px);
  border-left: 1px solid #aaa;
  border-bottom: 1px solid #aaa;
  pointer-events: none;
}
.comment:not(:last-child)::after {
  content: "";
  position: absolute;
  left: -22px;
  top: var(--branch-y);
  bottom: -8px;
  border-left: 1px solid #aaa;
  pointer-events: none;
}
.comment-author { color: #7c3850; font-weight: bold; font-size: .78rem; }
.comment p { margin: 3px 0 0; line-height: 1.55; }
.load-error { padding: 18px; color: #9c1e27; font-weight: bold; }
.site-links { padding: 8px 14px 0; font-size: .72rem; }
.site-links a { color: #0000b8; text-decoration: underline; }

@media (max-width: 520px) {
  .bbs-shell { width: calc(100% - 12px); margin-top: 6px; box-shadow: none; }
  .bbs-header { padding: 15px 14px; }
  .post-list { padding: 0 10px 16px; }
  .post { padding-top: 15px; }
  .post-actions { display: grid; grid-template-columns: minmax(82px, auto) 1fr 1fr; }
  .text-button { width: 100%; }
  .replay-button { min-width: 0; }
  .speed-wrap { justify-content: center; }
}

@media (max-width: 350px) {
  .post-actions { grid-template-columns: minmax(82px, auto) 1fr; }
  .like-button { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .thanks { animation: none; }
}