隔壁论坛风味 CSS 分享

/* 1. Palette. Native light/dark/system switches remain in control. */
:root {
  --nsk-bg: #fffcf8;
  --nsk-grid: #d4d4d4;
  --nsk-panel: #ffffff;
  --nsk-sub: #fbfbfb;
  --nsk-hover: #f6f6f6;
  --nsk-text: #333333;
  --nsk-link: #555555;
  --nsk-link-hover: #333333;
  --nsk-muted: #888888;
  --nsk-line: rgb(0 0 0 / 0.08);
  --nsk-soft-line: rgb(0 0 0 / 0.05);
  --nsk-strong-line: #d4d4d4;
  --nsk-green: #2ea44f;
  --nsk-green-hover: #2c974b;
  --nsk-green-soft: #edf7ef;
  --nsk-green-text: #187f36;
  --nsk-stat: #ffffda;
  --nsk-outer-shadow: 0 3px 8px rgb(0 0 0 / 0.24);
  --nsk-card-shadow: 0 0 5px rgb(0 0 0 / 0.10), 0 0 1px rgb(0 0 0 / 0.10);
  --nsk-header-shadow: 0 0 6px rgb(0 0 0 / 0.28);
}

:root[data-theme="dark"] {
  --nsk-bg: #8c8f95;
  --nsk-grid: #555555;
  --nsk-panel: #272727;
  --nsk-sub: #3b3b3b;
  --nsk-hover: #2b2b2b;
  --nsk-text: #aaaaaa;
  --nsk-link: #c5c5c5;
  --nsk-link-hover: #fcfcfc;
  --nsk-muted: #999999;
  --nsk-line: rgb(0 0 0 / 0.30);
  --nsk-soft-line: rgb(0 0 0 / 0.20);
  --nsk-strong-line: #555555;
  --nsk-green: #158736;
  --nsk-green-hover: #23af4a;
  --nsk-green-soft: #24392a;
  --nsk-green-text: #35b663;
  --nsk-stat: #3b3b3b;
  --nsk-outer-shadow: 0 0 8px rgb(0 0 0 / 0.70);
  --nsk-card-shadow: 0 0 5px rgb(0 0 0 / 0.40);
  --nsk-header-shadow: 0 0 6px rgb(0 0 0 / 0.80);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --nsk-bg: #8c8f95;
    --nsk-grid: #555555;
    --nsk-panel: #272727;
    --nsk-sub: #3b3b3b;
    --nsk-hover: #2b2b2b;
    --nsk-text: #aaaaaa;
    --nsk-link: #c5c5c5;
    --nsk-link-hover: #fcfcfc;
    --nsk-muted: #999999;
    --nsk-line: rgb(0 0 0 / 0.30);
    --nsk-soft-line: rgb(0 0 0 / 0.20);
    --nsk-strong-line: #555555;
    --nsk-green: #158736;
    --nsk-green-hover: #23af4a;
    --nsk-green-soft: #24392a;
    --nsk-green-text: #35b663;
    --nsk-stat: #3b3b3b;
    --nsk-outer-shadow: 0 0 8px rgb(0 0 0 / 0.70);
    --nsk-card-shadow: 0 0 5px rgb(0 0 0 / 0.40);
    --nsk-header-shadow: 0 0 6px rgb(0 0 0 / 0.80);
  }
}

/* Match the native dark selectors' specificity, including system mode. */
:root, :root[data-theme], :root:not([data-theme="light"]) {
  --bg: var(--nsk-bg);
  --panel: var(--nsk-panel);
  --panel-alt: var(--nsk-sub);
  --panel-hover: var(--nsk-hover);
  --text: var(--nsk-text);
  --text-strong: var(--nsk-link-hover);
  --text-muted: var(--nsk-link);
  --text-subtle: var(--nsk-muted);
  --text-disabled: var(--nsk-muted);
  --line: var(--nsk-line);
  --line-soft: var(--nsk-soft-line);
  --line-strong: var(--nsk-strong-line);
  --brand: var(--nsk-green-text);
  --brand-hover: var(--nsk-green-hover);
  --brand-soft: var(--nsk-green-soft);
  --brand-border: var(--nsk-green);
  --link: var(--nsk-green-text);
  --link-hover: var(--nsk-green-hover);
  --link-line: transparent;
  --link-soft: transparent;
  --action: var(--nsk-green);
  --action-hover: var(--nsk-green-hover);
  --action-border: rgb(27 31 35 / 0.15);
  --action-text: #ffffff;
  --mark: var(--nsk-green);
  --mark-deep: var(--nsk-green-hover);
  --mark-text: #ffffff;
  --mark-soft: var(--nsk-green-soft);
  --mark-soft-text: var(--nsk-green-text);
  --focus-ring: var(--nsk-green-text);
  --field-focus: var(--nsk-green);
  --field-ring: rgb(46 164 79 / 0.18);
  --selection: #b6e4c1;
  --selection-editor: #b6e4c1;
  --shadow-base: var(--nsk-card-shadow);
  --shadow-medium: 0 10px 28px rgb(0 0 0 / 0.20);
  --code-inline-bg: var(--nsk-sub);
  --code-inline-text: var(--nsk-text);
  --code-inline-border: var(--nsk-strong-line);
  --container: 1080px;
  --sidebar-w: 260px;
  --gap: 20px;
  --nav-ctl: 28px;
  --r-scale: 1;
  --r: 16px;
  --r-pill: 3px;
  --r-input: 4px;
  --r-sm: 3px;
  --r-xs: 2px;
  --font-sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", "WenQuanYi Micro Hei", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Microsoft YaHei", monospace;
}

/* 2. Shared shell; game stages retain their own geometry and typography. */
body {
  background-color: var(--nsk-bg);
  background-image: linear-gradient(var(--nsk-grid) 1px, transparent 1px), linear-gradient(to right, var(--nsk-grid) 1px, transparent 1px);
  background-size: 32px 32px;
}

body:has(.forum-layout) {
  font-size: 13px;
  line-height: 1.5;
}

.top {
  background: var(--nsk-panel);
  border-bottom: 0;
  box-shadow: var(--nsk-header-shadow);
}

.top .bar {
  max-width: 1080px;
  height: 40px;
  gap: 10px;
  padding: 0;
}

.top .brand-logo { flex: none; }
.top .site-logo { height: 30px; }
.top .site-logo > path:first-child { fill: var(--nsk-link); }
.top .site-logo-sb { fill: var(--nsk-panel); }
.top .site-logo-word { fill: var(--nsk-link); }
.top .forum-nav { margin-left: 0; gap: 0; max-height: 30px; flex: 1; }
.top .forum-nav a { padding: 4px 6px; color: var(--nsk-link); font-size: 13px; }
.top .forum-nav a:hover { color: var(--nsk-link-hover); background: transparent; }
.top :is(.forum-more-toggle, .script-toggle button, .theme-menu > button) {
  border-color: transparent;
  background: transparent;
  color: var(--nsk-link);
  font-size: 12px;
}
.top :is(.forum-more-toggle, .script-toggle button, .theme-menu > button):hover {
  background: var(--nsk-sub);
  color: var(--nsk-link-hover);
}
.top .nav-apps .nav-apps-toggle.forum-more-toggle.nav-shop {
  padding: 3px 6px;
  background: transparent;
  color: var(--nsk-link);
  font-size: 12px;
}
.top .nav-apps .nav-apps-toggle.forum-more-toggle.nav-shop:hover,
.top .nav-apps.is-open .nav-apps-toggle.forum-more-toggle.nav-shop {
  background: var(--nsk-sub);
  color: var(--nsk-link-hover);
}
.top .search-form { flex: 0 1 168px; min-width: 90px; margin-left: auto; }
.top .search-form input { min-width: 0; width: 100%; height: 28px; font-size: 12px; background: var(--nsk-sub); border-color: var(--nsk-line); }
.top .nav-user img { width: 28px; height: 28px; border-radius: 15%; }
:is(.nav-user-menu, .nav-apps-menu, .mobile-menu-drawer) { border-radius: 4px; }

.wrap:has(.forum-layout) {
  margin: 15px auto 20px;
  padding: 25px 30px;
  background: var(--nsk-panel);
  border-radius: 16px;
  box-shadow: var(--nsk-outer-shadow);
}
.forum-layout {
  grid-template-columns: minmax(0, 1fr) var(--sidebar-w);
  gap: 20px;
}
.forum-layout :is(.forum-main, .main-panel) { min-width: 0; }
.forum-main > .main-panel,
.forum-main > :is(.topic-opening, .topic-replies, .topic-highlights),
.forum-main > .main-panel > :is(.post-list, .topic-toolbar, .forum-head),
.forum-main > .topic-opening > .post-list {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.forum-main > .main-panel { overflow: visible; }
.forum-layout :is(.forum-head, .profile-head) { padding: 8px; }
.forum-layout .forum-head h1 { font-size: 18px; }
.doc-head { max-width: 76ch; }

/* Keep geometry on the forum components below, not on generic game controls. */
.forum-layout :is(button, .btn):focus-visible,
.top :is(button, a, input):focus-visible { outline: 2px solid var(--nsk-green-text); outline-offset: 2px; }
.forum-layout :is(button.alt, .btn.alt, .bot-toggle):hover {
  background: var(--nsk-sub);
  color: var(--nsk-link-hover);
}

/* 3. Topic lists. Never apply these row dimensions to post entries. */
.forum-layout .topic-toolbar {
  min-height: 28px;
  padding: 0 8px 8px;
  gap: 8px;
  border: 0;
  background: transparent;
  border-radius: 0;
}
.forum-layout .topic-toolbar > .tab-bar { gap: 0; border: 0; }
.forum-layout .topic-toolbar .tab {
  flex: none;
  padding: 2px 6px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--nsk-link);
  font-size: 12px;
  line-height: 1.5;
  white-space: nowrap;
}
.forum-layout .topic-toolbar .tab::after { display: none; }
.forum-layout .topic-toolbar .tab:hover { background: var(--nsk-sub); color: var(--nsk-link-hover); }
.forum-layout .topic-toolbar .tab.active { background: #888; color: var(--nsk-panel); }
.forum-layout .topic-actions { gap: 5px; }
.forum-layout .topic-actions :is(.btn, button) { padding: 2px 7px; font-size: 12px; line-height: 1.5; }

.forum-layout .post-list { border-color: var(--nsk-line); }
.forum-layout .post-list > .post-item:not(.post-entry) {
  position: relative;
  gap: 10px;
  padding: 8px;
  min-height: 57px;
  border-top: 0;
  border-bottom: 1px solid var(--nsk-soft-line);
  border-radius: 0;
  background: transparent;
}
.forum-layout .post-list > .post-item:not(.post-entry):hover { background: var(--nsk-hover); }
.forum-layout .post-item:not(.post-entry) > .post-avatar {
  width: 40px;
  height: 40px;
  margin-top: 0;
  border-radius: 15%;
}
.forum-layout .post-item:not(.post-entry) > .post-avatar > .avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 15%;
}
.forum-layout .post-item:not(.post-entry) > .post-body { min-width: 0; flex: 1; }
.forum-layout .post-item:not(.post-entry) .post-title-row {
  padding-right: 0;
  font-size: 14px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.forum-layout .post-item:not(.post-entry) .post-title {
  color: var(--nsk-link);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
}
.forum-layout .post-item:not(.post-entry) .post-title:hover { color: var(--nsk-link-hover); text-decoration: none; }
.forum-layout .post-item:not(.post-entry) .post-meta {
  gap: 2px 8px;
  margin-top: 2px;
  padding-right: 40px;
  color: var(--nsk-link);
  font-size: 11px;
  line-height: 1.6;
}
.forum-layout .post-item:not(.post-entry) .post-meta a { color: inherit; }
.forum-layout .post-item:not(.post-entry) .post-meta .meta-icon { width: 12px; height: 12px; margin-right: 3px; }
.forum-layout .post-item:not(.post-entry) .post-forum-meta { display: none; }
.forum-layout .post-item:not(.post-entry) .post-forum-badge {
  position: absolute;
  right: 13px;
  bottom: 8px;
  margin: 0;
  padding: 0 4px;
  height: 20px;
  line-height: 20px;
  border: 0;
  border-radius: 2px;
  background: var(--nsk-sub);
  color: var(--nsk-link);
  font-size: 11px;
  box-shadow: 0 0 2px rgb(0 0 0 / 0.3);
}
.forum-layout .post-item:not(.post-entry) .topic-pages { font-size: 10px; opacity: .75; }
.forum-layout .topic-badge { padding: 0 3px; border-radius: 2px; font-size: 10px; line-height: 1.5; }
.forum-layout .topic-badge.pinned { background: transparent; color: var(--nsk-green-text); border: 1px solid currentColor; }

/* 4. Sidebar. Keep every original shortcut and balance visible. */
.forum-layout .sidebar { min-width: 0; gap: 10px; }
.forum-layout .sidebar-card {
  min-width: 0;
  border: 0;
  border-radius: 2px;
  background: var(--nsk-panel);
  box-shadow: var(--nsk-card-shadow);
}
.forum-layout .sidebar :is(.stats-wrap, .card-body) { padding: 8px 10px; }
.forum-layout .sidebar :is(.stats-title, .card-title) { color: var(--nsk-text); font-size: 13px; }
.forum-layout .sidebar .user-card { display: flex; flex-direction: column; padding: 0; background: transparent; box-shadow: none; }
.forum-layout .sidebar .user-wrap { display: contents; }
.forum-layout .sidebar .user-header { order: 1; padding: 0; }
.forum-layout .sidebar .user-header-info { align-items: center; gap: 12px; }
.forum-layout .sidebar .user-avatar-big { width: 40px; height: 40px; border-radius: 15%; }
.forum-layout .sidebar .user-avatar-big img { width: 40px; height: 40px; border-radius: 15%; }
.forum-layout .sidebar .user-name { color: var(--nsk-link); font-size: 16px; font-weight: 400; }
.forum-layout .sidebar .user-rank { margin-top: 3px; color: var(--nsk-muted); font-size: 11px; }
.forum-layout .sidebar .user-stats,
.forum-layout .sidebar .user-stats:has(> :nth-child(5)) {
  order: 2;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 10px;
  margin: 16px 0;
  padding: 10px;
  border: 0;
  border-radius: 5px;
  background: var(--nsk-stat);
  box-shadow: 0 0 3px rgb(0 0 0 / 0.15);
}
.forum-layout .sidebar .user-stat { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px; }
.forum-layout .sidebar :is(.user-stat-label, .user-stat-value) { color: var(--nsk-link); font: inherit; font-size: 12px; }
.forum-layout .sidebar .user-stat-value { font-variant-numeric: tabular-nums; }
.forum-layout .sidebar .user-card .btn-post {
  order: 3;
  display: block;
  margin: 0 0 16px;
  padding: 3px 10px;
  border: 1px solid rgb(27 31 35 / .15);
  border-radius: 4px;
  background: var(--nsk-green);
  color: #fff;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  box-shadow: 0 1px 0 rgb(27 31 35 / .10);
}
.forum-layout .sidebar .user-card .btn-post::before { content: "+ "; }
.forum-layout .sidebar .user-card .btn-post:hover { background: var(--nsk-green-hover); color: #fff; text-decoration: none; }
.forum-layout .sidebar .user-links {
  order: 4;
  margin: 0;
  padding: 6px 10px;
  border: 0;
  border-radius: 2px;
  gap: 0 8px;
  box-shadow: var(--nsk-card-shadow);
}
.forum-layout .sidebar .user-links::before {
  content: "快捷功能区";
  grid-column: 1 / -1;
  color: var(--nsk-text);
  font-size: 13px;
  font-weight: 700;
  padding: 2px 0 5px;
}
.forum-layout .sidebar .user-links a { gap: 5px; padding: 4px 0; border-bottom: 1px solid var(--nsk-soft-line); font-size: 12px; line-height: 1.5; }
.forum-layout .sidebar .user-links .meta-icon { width: 12px; height: 12px; }
.forum-layout .sidebar .stats-grid dd { font-family: var(--font-sans); font-size: 13px; font-variant-numeric: tabular-nums; }

/* 5. Reading view. Small author header, full-width content. */
.forum-layout :is(.topic-title, .topic-head h1, .topic-header h1, .post-content-title) { color: var(--nsk-link); font-size: 18px; font-weight: 700; line-height: 1.5; }
.forum-layout :is(.topic-head, .topic-header) { padding: 0 8px 10px; }
.forum-layout :is(.topic-title, .topic-head h1, .topic-header h1, .post-content-title) a { color: inherit; }
.forum-layout :is(.breadcrumb, .post-topic-title) { padding: 0 8px 10px; border: 0; border-radius: 0; background: transparent; }
.forum-layout .breadcrumb { padding-bottom: 8px; font-size: 11px; color: var(--nsk-muted); }
.forum-layout .post-content-title { min-width: 0; overflow-wrap: anywhere; }
.forum-layout .post-content-stats { color: var(--nsk-muted); font-size: 11px; }
.forum-layout .post-entry {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 0 10px;
  padding: 12px 8px;
  border: 0;
  border-bottom: 1px solid var(--nsk-line);
  border-radius: 0;
  background: transparent;
  scroll-margin-top: 52px;
}
.forum-layout .post-entry:hover { background: transparent; }
.forum-layout .post-entry > .post-avatar { grid-column: 1; grid-row: 1; width: 40px; height: 40px; margin: 0; }
.forum-layout .post-entry > .post-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 15%; }
.forum-layout .post-entry > .post-body { grid-column: 2; grid-row: 1; min-width: 0; align-self: center; }
.forum-layout .post-entry .post-head { min-width: 0; gap: 3px 6px; min-height: 36px; }
.forum-layout .post-entry .post-author { color: var(--nsk-link); font-size: 14px; font-weight: 700; }
.forum-layout .post-entry .post-time { color: var(--nsk-muted); font-size: 11px; }
.forum-layout .post-entry .post-ops { margin-left: auto; gap: 10px; font-size: 11px; }
.forum-layout .post-entry .post-ops :is(a, button) { padding: 0; border: 0; background: transparent; box-shadow: none; color: var(--nsk-muted); font-size: 11px; }
.forum-layout .post-entry .post-ops :is(a, button):hover { background: transparent; color: var(--nsk-link-hover); }
.forum-layout .post-entry .post-content { grid-column: 1 / -1; margin: 14px 0 16px; min-width: 0; font-size: 14px; line-height: 1.5; color: var(--nsk-text); overflow-wrap: anywhere; }
.forum-layout .post-entry > :is(.post-sig, .post-dz-actions, .floor-box, .lit-by, .lottery-win-mark, .rp-claim-mark, .bounty-answer-mark, .bounty-accept-form, .lottery-review-row) { grid-column: 1 / -1; }
.forum-layout .post-entry :is(.post-sig, .post-dz-actions) { min-width: 0; }
.forum-layout .topic-opening > .post-list { border: 0; border-radius: 0; }
.forum-layout .topic-opening > .post-list > .post-entry { border-bottom: 0; }
.forum-layout .topic-opening > .post-actions-row { border: 0; background: transparent; }
.forum-layout .topic-replies { margin-top: 20px; }
.forum-layout .topic-replies .topic-post-list { border: 0; border-radius: 0; }
.forum-layout .topic-replies .post-entry { margin: 0; border-radius: 0; box-shadow: none; }

/* display:contents only flattens wrapper boxes; DOM, forms and reply order stay intact. */
.forum-layout .post-entry.post-dz { grid-template-columns: 40px minmax(0, 1fr); gap: 0 10px; padding: 12px 8px; }
.forum-layout .post-dz .post-author-col,
.forum-layout .post-dz .post-main {
  display: contents;
  padding: 0;
  border: 0;
  background: transparent !important;
}
.forum-layout .post-dz .post-author-avatar { grid-column: 1; grid-row: 1 / span 2; width: 40px; height: 40px; align-self: start; }
.forum-layout .post-dz .post-author-avatar img { width: 100%; height: 100%; border-radius: 15%; object-fit: cover; }
.forum-layout .post-dz .post-author-who { grid-column: 2; grid-row: 1; justify-content: flex-start; align-self: center; gap: 5px; min-width: 0; text-align: left; }
.forum-layout .post-dz .post-author-who .post-author { flex-basis: auto; font-size: 14px; }
.forum-layout .post-dz .post-author-stats { display: none; }
.forum-layout .post-dz .post-main > * { grid-column: 1 / -1; min-width: 0; }
.forum-layout .post-dz .post-main > .post-body { grid-column: 2; grid-row: 2; }
.forum-layout .post-dz .post-main > .post-head { grid-column: 2; grid-row: 2; min-height: 18px; padding: 0; border: 0; }
.forum-layout .post-dz .post-main > .post-body .post-head { min-height: 18px; padding: 0; border: 0; }
.forum-layout .post-dz .post-content { grid-column: 1 / -1; }
.forum-layout .post-dz .post-sig { margin-top: 0; }
.forum-layout .post-dz.post-deleted .post-main > .post-head { padding: 0; }
.forum-layout .post-dz.post-deleted .post-author-avatar { width: 40px; height: 40px; }

.forum-layout .post-content :is(h1, h2, h3, h4, h5, h6) { color: var(--nsk-green-text); line-height: 1.4; }
.forum-layout .post-content h1 { font-size: 20px; }
.forum-layout .post-content h2 { font-size: 18px; padding-bottom: 3px; border-bottom: 1px solid var(--nsk-soft-line); }
.forum-layout .post-content h3 { font-size: 16px; }
.forum-layout .post-content :is(h4, h5, h6) { font-size: 14px; }
.forum-layout .post-content p { margin: 0 0 14px; }
.forum-layout .post-content :is(ul, ol) { padding-left: 24px; }
.forum-layout .post-content ul > li::marker { color: var(--nsk-text); }
.forum-layout .post-content ul { list-style-type: disc; }
.forum-layout .post-content a:not(.link-card) { background: transparent; background-image: none; color: var(--nsk-green-text); text-decoration: none; box-shadow: none; }
.forum-layout .post-content a:not(.link-card):hover { background: transparent; color: var(--nsk-green-hover); text-decoration: underline; text-underline-offset: 2px; }
.forum-layout .post-content blockquote { margin: 10px 0 14px; padding: 8px 12px; background: var(--nsk-soft-line); border-left: 4px solid var(--nsk-strong-line); color: var(--nsk-link); }
.forum-layout .post-content blockquote > :last-child { margin-bottom: 0; }
.forum-layout .post-content :is(pre, table, .link-card) { max-width: 100%; }
.forum-layout .post-content pre { background: var(--nsk-sub); border: 1px solid var(--nsk-line); border-radius: 4px; font-size: 13px; line-height: 1.6; }
.forum-layout .post-content code:not(pre code) { padding: 1px 4px; border-radius: 2px; }
.forum-layout .post-content pre code { font-size: inherit; }
.forum-layout .post-content :is(img:not(.emoji):not(.smoji), video) { max-width: 100%; height: auto; }
.forum-layout .post-content :is(.rich-drawn, .mermaid-diagram, .geo-map, .stl-model) { max-width: 100%; }
.forum-layout .post-content .link-card { border-radius: 4px; background: var(--nsk-sub); }
.forum-layout .post-content .link-card:hover { color: var(--nsk-link-hover); background: var(--nsk-hover); }
.forum-layout .post-content .code-copy { padding: 3px 7px; font-size: 11px; background: var(--nsk-panel); color: var(--nsk-link); border: 1px solid var(--nsk-line); }
.forum-layout .post-content .code-copy:hover { background: var(--nsk-sub); color: var(--nsk-link-hover); }
.forum-layout :is(.post-sig, .profile-sig) { padding-top: 10px; border-top: 1px dashed var(--nsk-line); color: var(--nsk-muted); font-size: 12px; }
.forum-layout .post-sig-rule { display: none; }
.forum-layout .post-sig-text { color: var(--nsk-muted); }
.forum-layout .floor-box { margin: 6px 0 12px; border-radius: 4px; background: var(--nsk-sub); border-color: var(--nsk-line); }
.forum-layout .floor-box-item { border-color: var(--nsk-line); }
.forum-layout .floor-box :is(.floor-box-foot, .floor-box-item) { min-width: 0; }
.forum-layout .reply-panel { border-radius: 4px; border-color: var(--nsk-line); background: var(--nsk-sub); }
.forum-layout .reply-panel-head { padding: 8px 12px; }
.forum-layout .reply-panel form { padding: 12px; }
.forum-layout .reply-panel textarea { background: var(--nsk-panel); font-size: 14px; line-height: 1.5; }
.forum-layout .pagination-bar { margin-top: 12px; }
.forum-layout .pagination ul { gap: 3px; }
.forum-layout .pagination :is(a, .ellipsis) { min-width: 24px; padding: 1px 6px; border: 0; border-radius: 2px; background: transparent; color: var(--nsk-muted); font-size: 13px; line-height: 1.5; }
.forum-layout .pagination li.active a { background: var(--nsk-sub); color: var(--nsk-link); }
.forum-layout .pagination a:hover { background: var(--nsk-sub); color: var(--nsk-link-hover); }

/* 6. Quiet decoration, while retaining names, numeric levels and roles. */
:is(.top, .forum-layout, .mobile-menu-drawer, .user-card-pop) .uname {
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
  background: none !important;
  background-image: none !important;
  text-shadow: none !important;
  filter: none !important;
  animation: none !important;
}
:is(.top, .forum-layout, .mobile-menu-drawer, .user-card-pop) .uname::before,
:is(.top, .forum-layout, .mobile-menu-drawer, .user-card-pop) .uname::after { display: none !important; }
.pet-float, .pet-menu, .pet-bubble,
.forum-layout :is(.post-author-pet-wrap, .post-author-medals, .post-medal, .pet-yard, .pet-yard-head, .post-pet, .post-pets) { display: none !important; }
.forum-layout .level-badge { height: auto; min-height: 0; line-height: 1.5; vertical-align: baseline; }
.forum-layout .level-badge-art { display: none; }
.forum-layout .level-badge-n { position: static; display: inline; color: var(--nsk-muted); font-family: var(--font-sans); font-size: 11px; font-weight: 400; letter-spacing: 0; text-shadow: none; }
.forum-layout .post-user-uid { padding: 0; border: 0; border-radius: 0; background: transparent !important; color: var(--nsk-muted) !important; box-shadow: none; text-shadow: none; font-size: 11px; }
.forum-layout .uid-vanity-mark { display: none; }
.forum-layout .uid-vanity-num { font-size: 11px; letter-spacing: 0; }
.forum-layout .post-user-group { padding: 0 3px; border: 1px solid var(--nsk-green-text); border-radius: 2px; background: transparent !important; color: var(--nsk-green-text) !important; font-size: 10px; line-height: 1.3; }
.forum-layout .post-user-level { padding: 0; border: 0; background: transparent; color: var(--nsk-muted); font-size: 11px; }
.forum-layout .avatar-frame { display: none; }
.forum-layout .avatar-framed { padding: 0; margin: 0; }
.forum-layout .avatar-framed > .avatar-img { width: 100%; height: 100%; border-radius: 15%; }
.footer { margin-top: 0; background: var(--nsk-panel); border-color: var(--nsk-line); }
.footer :is(.footer-wrap, .footer-inner) { max-width: 1080px; }
.page-scroll button { width: 30px; height: 30px; border: 0; border-radius: 4px; background: var(--nsk-panel); color: var(--nsk-link); box-shadow: var(--nsk-card-shadow); }
.page-scroll button:hover { background: var(--nsk-sub); color: var(--nsk-link-hover); }

/* 7. Responsive. Reuse sb.sb's mobile navigation and content order. */
@media (max-width: 1120px) {
  .top .bar { margin: 0 20px; }
  .wrap:has(.forum-layout) { margin-left: 20px; margin-right: 20px; }
}
@media (min-width: 761px) and (max-width: 1024px) {
  .forum-layout { grid-template-columns: minmax(0, 1fr) 220px; gap: 16px; }
  .wrap:has(.forum-layout) { padding: 20px; }
  .top .bar { gap: 7px; }
  .top .search-form { flex-basis: 135px; }
}
@media (max-width: 760px) {
  .top .bar { height: 40px; margin: 0; padding: 0 12px; gap: 8px; }
  .top .brand-logo .site-logo { height: 28px; }
  .top .mobile-menu-button { width: 28px; height: 28px; border: 0; background: transparent; color: var(--nsk-link); }
  .top .mobile-menu-button:hover { background: var(--nsk-sub); color: var(--nsk-link-hover); }
  .top .search-form { min-width: 0; flex: 1; }
  .wrap:has(.forum-layout) { margin: 10px 12px 16px; padding: 16px 12px; border-radius: 8px; }
  .forum-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .forum-layout .sidebar { width: 100%; }
  .forum-layout .post-entry { padding: 12px 8px; }
  .forum-layout .post-entry .post-ops { flex-basis: auto; margin-left: auto; justify-content: flex-end; }
  .forum-layout .post-entry .post-head { gap: 3px 5px; }
  .forum-layout .post-entry .post-content { margin-top: 12px; }
  .forum-layout .topic-replies .topic-post-list { border: 0; }
  .forum-layout .topic-toolbar { padding-left: 8px; padding-right: 8px; }
  .forum-layout .post-content .link-card { width: 100%; }
  .forum-layout .post-entry .post-content table { display: block; overflow-x: auto; }
  .forum-layout .post-dz .post-author-who { justify-content: flex-start; }
  .forum-layout .post-dz .post-main > .post-head { border: 0; }
}
@media (max-width: 500px) {
  .top .bar { padding: 0 8px; gap: 6px; }
  .top .brand-logo .site-logo { height: 25px; }
  .top .search-form input { padding-left: 7px; }
  .wrap:has(.forum-layout) { margin: 9px 4px 14px; padding: 16px 3px; border-radius: 4px; }
  .forum-layout .post-list > .post-item:not(.post-entry) { padding: 7px 8px; }
  .forum-layout .post-item:not(.post-entry) .post-meta { gap: 2px 5px; }
  .forum-layout .post-entry, .forum-layout .post-entry.post-dz { padding: 12px 8px; }
  .forum-layout .post-entry .post-head { line-height: 1.5; }
  .forum-layout .post-entry .post-ops { gap: 8px; }
  .forum-layout .post-entry .post-content { font-size: 14px; }
  .forum-layout .reply-panel form { padding: 10px; }
}

/* games.css is loaded only by the entertainment pages. Preserve their native
 * available width and inherited metrics; navigation and sidebar keep the theme. */
:root:has(link[rel="stylesheet"][href*="/assets/games."]) {
  --container: 1600px;
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-mono: "Space Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", monospace;
}
:root:has(link[rel="stylesheet"][href*="/assets/games."]) body {
  font-size: 15px;
  line-height: 1.75;
}
:root:has(link[rel="stylesheet"][href*="/assets/games."]) .wrap:has(.forum-layout) {
  max-width: 1600px;
  margin: 0 auto;
  padding: 20px 16px 32px;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}
/* The game shell is transparent, so its sidebar needs its own opaque surface. */
:root:has(link[rel="stylesheet"][href*="/assets/games."]) .forum-layout > .sidebar {
  box-sizing: border-box;
  padding: 12px;
  background: var(--nsk-panel);
  border-radius: 8px;
  box-shadow: var(--nsk-card-shadow);
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", sans-serif;
  font-size: 13px;
  line-height: 1.5;
}
@media (max-width: 760px) {
  :root:has(link[rel="stylesheet"][href*="/assets/games."]) .wrap:has(.forum-layout) {
    padding: 12px 12px 24px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .top *, .forum-layout *, .page-scroll * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}