/* Shared comic-parchment theme for every functional page except the homepage. */
body:not(.page-home) {
  --comic-paper: #f3f0e9;
  --comic-paper-strong: #e9e4da;
  --comic-paper-deep: #d8cdb8;
  --comic-ink: #181411;
  --comic-green: #173b34;
  --comic-muted: #5b5149;
  --comic-red: #a51618;
  --comic-red-dark: #781012;
  --comic-line: rgba(165, 22, 24, .42);
  --comic-hairline: rgba(24, 20, 17, .18);
  --comic-ease: cubic-bezier(.16, 1, .3, 1);
  min-height: 100vh;
  background-color: var(--comic-paper-deep);
  background-image:
    linear-gradient(rgba(232, 225, 210, .72), rgba(216, 205, 184, .82)),
    url("parchment-bg-v1.png?v=1");
  background-position: center top;
  background-size: cover;
  background-attachment: fixed;
  color: var(--comic-ink);
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
}

body:not(.page-home),
body:not(.page-home) * {
  box-sizing: border-box;
}

body:not(.page-home) .site-bg,
body:not(.page-home)::before,
body:not(.page-home)::after {
  display: none;
}

body:not(.page-home) .wrap {
  width: min(1180px, calc(100% - 64px));
}

body:not(.page-home) a,
body:not(.page-home) button {
  cursor: pointer;
  touch-action: manipulation;
}

body:not(.page-home) a:focus-visible,
body:not(.page-home) button:focus-visible,
body:not(.page-home) input:focus-visible,
body:not(.page-home) textarea:focus-visible,
body:not(.page-home) select:focus-visible {
  outline: 3px solid var(--comic-red);
  outline-offset: 3px;
}

body:not(.page-home) .topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(246, 243, 237, .97);
  border-bottom: 1px solid var(--comic-hairline);
  box-shadow: none;
  backdrop-filter: none;
}

body:not(.page-home) .nav {
  min-height: 72px;
  gap: 24px;
}

body:not(.page-home) .brand {
  min-width: 206px;
  gap: 12px;
  color: var(--comic-ink);
}

body:not(.page-home) .brand img {
  width: 42px;
  height: 42px;
  border: 1px solid var(--comic-red);
  border-radius: 0;
  background: var(--comic-paper);
  object-fit: cover;
  filter: none;
}

body:not(.page-home) .brand span {
  color: var(--comic-ink);
  font-family: "STSong", "Songti SC", serif;
  font-size: 21px;
  letter-spacing: .1em;
}

body:not(.page-home) .links {
  gap: 6px;
}

body:not(.page-home) .links a,
body:not(.page-home) .auth a,
body:not(.page-home) .auth span {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--comic-ink);
  font-size: 13px;
  font-weight: 700;
}

body:not(.page-home) .links a {
  border-bottom: 2px solid transparent;
  transition: color 180ms var(--comic-ease), border-color 180ms var(--comic-ease);
}

body:not(.page-home) .links a:hover,
body:not(.page-home) .links a.active {
  color: var(--comic-red);
  border-color: var(--comic-red);
  transform: none;
}

body:not(.page-home) .auth {
  gap: 4px;
  white-space: nowrap;
}

body:not(.page-home) .auth a:last-child {
  min-width: 92px;
  background: var(--comic-red);
  border: 1px solid var(--comic-red);
  color: #fffaf2;
  padding-inline: 18px;
}

body:not(.page-home) main {
  padding-bottom: 76px;
}

body:not(.page-home) main.wrap {
  position: relative;
  min-height: calc(100vh - 144px);
}

body:not(.page-home) main.wrap::before {
  content: "";
  position: absolute;
  inset: 28px -18px 26px;
  z-index: -1;
  border: 1px solid rgba(165, 22, 24, .28);
  background: rgba(243, 240, 233, .58);
}

body:not(.page-home) section {
  padding: clamp(52px, 6vw, 82px) 0;
}

body:not(.page-home) .section-head {
  align-items: flex-end;
  margin-bottom: 28px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--comic-line);
}

body:not(.page-home) .section-head h2 {
  margin: 0;
  color: var(--comic-ink);
  font-family: "STSong", "Songti SC", "SimSun", serif;
  font-size: clamp(32px, 4vw, 46px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: .04em;
  text-shadow: none;
}

body:not(.page-home) .section-head h2::before {
  width: 9px;
  height: 9px;
  margin-right: 14px;
  vertical-align: .2em;
  background: var(--comic-red);
  transform: rotate(45deg);
}

body:not(.page-home) .section-head p {
  max-width: 68ch;
  margin: 10px 0 0;
  color: var(--comic-muted);
  font-weight: 500;
  line-height: 1.7;
}

body:not(.page-home) .card,
body:not(.page-home) .item,
body:not(.page-home) .panel,
body:not(.page-home) .info-card,
body:not(.page-home) .honor-card,
body:not(.page-home) .honor-spotlight,
body:not(.page-home) .comment,
body:not(.page-home) .personal-result {
  border: 1px solid var(--comic-hairline);
  border-radius: 0;
  background: rgba(246, 242, 232, .82);
  color: var(--comic-ink);
  box-shadow: none;
  backdrop-filter: none;
}

body:not(.page-home) .card,
body:not(.page-home) .item,
body:not(.page-home) .honor-card {
  transition: border-color 180ms var(--comic-ease), transform 180ms var(--comic-ease), background-color 180ms var(--comic-ease);
}

body:not(.page-home) .card::after,
body:not(.page-home) .item::after,
body:not(.page-home) .honor-card::after {
  display: none;
}

body:not(.page-home) .card:hover,
body:not(.page-home) .item:hover,
body:not(.page-home) .honor-card:hover {
  transform: translateY(-2px);
  border-color: var(--comic-red);
  background: rgba(250, 247, 239, .94);
  box-shadow: none;
}

body:not(.page-home) .card h2,
body:not(.page-home) .card h3,
body:not(.page-home) .item h3,
body:not(.page-home) .info-card h3,
body:not(.page-home) .honor-card h3,
body:not(.page-home) .honor-spotlight h3 {
  color: var(--comic-green);
}

body:not(.page-home) .card p,
body:not(.page-home) .item p,
body:not(.page-home) .info-card p,
body:not(.page-home) .honor-card p,
body:not(.page-home) .honor-spotlight p,
body:not(.page-home) .comment p {
  color: var(--comic-muted);
  line-height: 1.72;
}

body:not(.page-home) .meta {
  color: var(--comic-muted);
}

body:not(.page-home) .badge,
body:not(.page-home) .reply-count,
body:not(.page-home) .tag,
body:not(.page-home) .score-pills span {
  border: 1px solid rgba(165, 22, 24, .28);
  border-radius: 2px;
  background: rgba(165, 22, 24, .07);
  color: var(--comic-red-dark);
}

body:not(.page-home) .btn {
  min-height: 44px;
  border: 1px solid var(--comic-red);
  border-radius: 0;
  background: var(--comic-red);
  color: #fffaf2;
  box-shadow: none;
  transition: background-color 180ms var(--comic-ease), color 180ms var(--comic-ease), transform 180ms var(--comic-ease);
}

body:not(.page-home) .btn:hover {
  background: var(--comic-red-dark);
  box-shadow: none;
  transform: translateY(-1px);
}

body:not(.page-home) .btn.secondary {
  border-color: var(--comic-green);
  background: transparent;
  color: var(--comic-green);
}

body:not(.page-home) .btn.secondary:hover {
  background: var(--comic-green);
  color: #fffaf2;
}

body:not(.page-home) .btn:disabled {
  opacity: .55;
}

body:not(.page-home) .form input,
body:not(.page-home) .form textarea,
body:not(.page-home) .form select,
body:not(.page-home) .share-link,
body:not(.page-home) .wechat-copy {
  min-height: 44px;
  border: 1px solid rgba(24, 20, 17, .28) !important;
  border-radius: 0;
  background: rgba(255, 252, 244, .82) !important;
  color: var(--comic-ink) !important;
  box-shadow: none;
}

body:not(.page-home) .form input::placeholder,
body:not(.page-home) .form textarea::placeholder {
  color: #6c625a;
  opacity: 1;
}

body:not(.page-home) .form input:focus,
body:not(.page-home) .form textarea:focus,
body:not(.page-home) .form select:focus,
body:not(.page-home) .share-link:focus,
body:not(.page-home) .wechat-copy:focus {
  border-color: var(--comic-red) !important;
  background: #fffdf8 !important;
  box-shadow: 0 0 0 3px rgba(165, 22, 24, .12);
}

body:not(.page-home) .file-field,
body:not(.page-home) .empty {
  border-radius: 0;
  border-color: rgba(165, 22, 24, .3);
  background: rgba(246, 242, 232, .65);
  color: var(--comic-muted);
}

body:not(.page-home) .emoji-bar button {
  min-width: 44px;
  min-height: 44px;
  border-radius: 0;
  border-color: var(--comic-hairline);
  background: rgba(255, 252, 244, .82);
  box-shadow: none;
}

body:not(.page-home) .comment {
  border: 1px solid var(--comic-hairline);
}

body:not(.page-home) .forum-image,
body:not(.page-home) .poster,
body:not(.page-home) .honor-photo {
  border-radius: 0;
  border-color: var(--comic-hairline);
  background: var(--comic-paper);
  box-shadow: none;
  filter: none;
}

body:not(.page-home) .members {
  gap: 18px;
}

body:not(.page-home) .member {
  grid-template-columns: 140px 1fr;
  gap: 20px;
}

body:not(.page-home) .member img {
  width: 140px;
  height: 200px;
  border-radius: 0;
  border: 1px solid var(--comic-hairline);
  filter: none;
}

body:not(.page-home) .member-admin-editor {
  grid-column: 1 / -1;
  margin-top: 2px;
  padding-top: 16px;
  border-top: 1px solid var(--comic-hairline);
}

body:not(.page-home) .member-admin-editor summary {
  width: fit-content;
  cursor: pointer;
  color: var(--comic-red);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
}

body:not(.page-home) .member-admin-form {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

body:not(.page-home) .member-admin-form label {
  display: grid;
  gap: 6px;
  color: var(--comic-muted);
  font-size: 12px;
  font-weight: 700;
}

body:not(.page-home) .member-admin-form textarea {
  min-height: 88px;
}

body:not(.page-home) .member-admin-form .member-note-field,
body:not(.page-home) .member-admin-form .member-image-field,
body:not(.page-home) .member-admin-form .btn {
  grid-column: 1 / -1;
}

body:not(.page-home) .member-admin-form .member-image-field {
  display: flex;
  align-items: center;
}

body:not(.page-home) .member-admin-form .btn {
  justify-self: start;
}

body:not(.page-home) .metric,
body:not(.page-home) .info-row {
  border: 1px solid rgba(24, 20, 17, .14);
  border-radius: 0;
  background: rgba(255, 252, 244, .55);
}

body:not(.page-home) .metric span,
body:not(.page-home) .info-row span,
body:not(.page-home) .hint {
  color: var(--comic-muted);
}

body:not(.page-home) .metric strong,
body:not(.page-home) .info-row strong {
  color: var(--comic-green);
}

body:not(.page-home) table {
  min-width: 720px;
  border: 1px solid var(--comic-hairline);
  border-radius: 0;
  background: rgba(246, 242, 232, .84);
  color: var(--comic-ink);
}

body:not(.page-home) th {
  background: var(--comic-red-dark);
  color: #fffaf2;
}

body:not(.page-home) th,
body:not(.page-home) td {
  border-color: rgba(24, 20, 17, .13);
}

body:not(.page-home) tr:nth-child(even) {
  background: rgba(165, 22, 24, .045);
}

body.page-league main.wrap section {
  overflow-x: auto;
}

body:not(.page-home) .chain-layout {
  gap: 20px;
}

body:not(.page-home) .radar-card {
  border-bottom: 1px solid var(--comic-hairline);
  padding-block: 14px;
}

body:not(.page-home) .radar .grid-line,
body:not(.page-home) .radar .axis {
  stroke: rgba(24, 20, 17, .22);
}

body:not(.page-home) .radar .max-line {
  fill: rgba(255, 252, 244, .24);
  stroke: rgba(24, 20, 17, .48);
}

body:not(.page-home) .radar .shape {
  fill: rgba(165, 22, 24, .2);
  stroke: var(--comic-red);
}

body:not(.page-home) .radar .score-dot {
  fill: var(--comic-paper);
  stroke: var(--comic-red);
}

body:not(.page-home) .radar text,
body:not(.page-home) .radar .score-label {
  fill: var(--comic-ink);
}

body:not(.page-home) .honor-hero {
  align-items: stretch;
}

body:not(.page-home) .honor-spotlight strong {
  color: var(--comic-red);
}

body:not(.page-home) .honor-card::before {
  background: var(--comic-red);
}

body:not(.page-home) .honor-medal {
  background: var(--comic-red);
  box-shadow: none;
}

body:not(.page-home) .rolebook-type {
  margin: 42px 0 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--comic-line);
  color: var(--comic-green);
  font-family: "STSong", "Songti SC", serif;
  font-size: 26px;
}

body:not(.page-home) .rolebook-count {
  color: var(--comic-red-dark);
}

body:not(.page-home) .role-card.rolebook-card {
  min-height: 420px;
  border: 1px solid rgba(165, 22, 24, .5);
  border-radius: 0;
  background: #171310;
  box-shadow: none;
}

body:not(.page-home) .role-card.rolebook-card::before {
  background: radial-gradient(circle, rgba(165, 22, 24, .22), transparent 65%);
}

body:not(.page-home) .role-card.rolebook-card:hover {
  border-color: var(--comic-red);
  box-shadow: none;
  transform: translateY(-3px);
}

body:not(.page-home) .role-card.rolebook-card img {
  height: 275px;
  filter: saturate(.92) drop-shadow(0 12px 14px rgba(0, 0, 0, .32));
}

body:not(.page-home) .role-card.rolebook-card strong {
  color: #f2ead8;
}

body:not(.page-home) .role-card.rolebook-card p {
  color: #c7bbb0;
}

body.page-login main.wrap section,
body.page-register main.wrap section {
  width: min(100%, 560px);
  margin-inline: auto;
}

body.page-login main.wrap .card,
body.page-register main.wrap .card {
  padding: clamp(24px, 4vw, 40px);
}

body:not(.page-home) .notice-row {
  gap: 10px;
}

body:not(.page-home) .btn-delete {
  border-radius: 0;
  border-color: var(--comic-red-dark);
  background: var(--comic-red);
}

body:not(.page-home) footer {
  border-top: 1px solid var(--comic-hairline);
  background: rgba(24, 20, 17, .94);
  color: #d8cdb8;
}

@media (max-width: 1020px) {
  body:not(.page-home) .members,
  body:not(.page-home) .honor-wall {
    grid-template-columns: 1fr 1fr;
  }

  body:not(.page-home) .chain-layout {
    grid-template-columns: 1fr;
  }

  body:not(.page-home) .member-admin-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 880px) {
  body:not(.page-home) {
    background-attachment: scroll;
  }

  body:not(.page-home) .wrap {
    width: calc(100% - 40px);
  }

  body:not(.page-home) .nav {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px 12px;
    padding: 10px 0;
  }

  body:not(.page-home) .links {
    grid-column: 1 / -1;
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
  }

  body:not(.page-home) .links::-webkit-scrollbar {
    display: none;
  }

  body:not(.page-home) .auth {
    justify-self: end;
  }

  body:not(.page-home) .section-head {
    align-items: flex-start;
  }

  body:not(.page-home) .honor-hero,
  body:not(.page-home) .sect-info {
    grid-template-columns: 1fr;
  }

  body:not(.page-home) .rolebook-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body:not(.page-home) .radar-card,
  body:not(.page-home) .personal-result .radar-card {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  body:not(.page-home) .wrap {
    width: calc(100% - 32px);
  }

  body:not(.page-home) main.wrap::before {
    inset-inline: -8px;
  }

  body:not(.page-home) section {
    padding-block: 48px;
  }

  body:not(.page-home) .section-head {
    display: grid;
  }

  body:not(.page-home) .section-head h2 {
    font-size: 32px;
  }

  body:not(.page-home) .section-head .btn {
    width: 100%;
  }

  body:not(.page-home) .members,
  body:not(.page-home) .honor-wall,
  body:not(.page-home) .rolebook-grid {
    grid-template-columns: 1fr;
  }

  body:not(.page-home) .member {
    grid-template-columns: 96px 1fr;
    gap: 14px;
  }

  body:not(.page-home) .member img {
    width: 96px;
    height: 138px;
  }

  body:not(.page-home) .metric-grid,
  body:not(.page-home) .score-grid,
  body:not(.page-home) .info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body:not(.page-home) .member-admin-form {
    grid-template-columns: 1fr;
  }

  body:not(.page-home) .member-admin-form .btn {
    width: 100%;
  }

  body:not(.page-home) .role-card.rolebook-card img {
    height: 260px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body:not(.page-home) *,
  body:not(.page-home) *::before,
  body:not(.page-home) *::after {
    animation: none !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}